/** Shopify CDN: Minification failed

Line 698:0 Unexpected "}"

**/

:root{
 --pw:1440px; --gut:26px;
 /* --sub/--faint are tuned for WHITE. On the tinted --shell strip they lose their
    contrast margin, so shell-backed labels must use these instead. */
 --subOnShell:#59616F; --faintOnShell:#7D869A;
 --ink:#131A28;--body:#414A57;--sub:#626C7D;--goldInk:#8A5D00;--band:#1E3E7A;--faint:#A3ACBD;--line:#E4E9F0;
 --paper:#fff;--shell:#F5F7FA;--dark:#131A28;--darkSub:#9BA7BC;
 --cta:#2D5FB8;--ctaDk:#244C94;--gold:#F7A70A;--lime:#BFD730;--sale:#D8232A;--save:#1E7A46;
 --r:10px;--br:7px;--fH:Archivo,Arial,sans-serif;--fB:'Instrument Sans',Arial,sans-serif;--tk:-.6px}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--body);font:15.5px/1.7 var(--fB)}
img{display:block}a{text-decoration:none;color:inherit}
h1,h2,h3,.hd{font-family:var(--fH);margin:0;color:inherit;letter-spacing:var(--tk);line-height:1.1;font-weight:800}
h1{font-weight:900;letter-spacing:-1.4px}
.h2{font-weight:900;letter-spacing:-.9px}
.hl{color:var(--gold)}
.mark{background:linear-gradient(180deg,transparent 58%,rgba(247,167,10,.55) 58%);padding:0 2px}
.h2wrap{display:flex;align-items:flex-start;gap:11px}
.h2wrap:before{content:'';flex:none;width:5px;height:26px;border-radius:3px;background:var(--gold);display:block}

section{padding:38px 0}
.eyebrow{font:800 11.5px var(--fH);letter-spacing:2px;text-transform:uppercase;color:var(--cta)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 14px var(--fH);padding:14px 24px;border:0;border-radius:var(--br);cursor:pointer;white-space:nowrap}
.btn-p{background:var(--cta);color:#fff}.btn-p:hover{background:var(--ctaDk)}
.btn-g{background:var(--gold);color:#16213A}
.btn-w{background:#fff;color:var(--ink)}
.btn-o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.h2{font-size:30px}
.shsub{font:400 14px/1.55 var(--fB);color:var(--sub);margin-top:6px;letter-spacing:0}
.more{font:700 13px var(--fH);color:var(--cta)}
.g4{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:760px){.g2{grid-template-columns:1fr}}
.g3{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
@media(max-width:560px){.g4{grid-template-columns:1fr}section{padding:34px 0}h1{font-size:30px !important}}

/* product card */
.pc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .2s,transform .2s}
.pc:hover{box-shadow:0 14px 34px rgba(19,26,40,.13);transform:translateY(-2px)}
.pc .im{position:relative;aspect-ratio:4/3;background:#f2f5f9;overflow:hidden}
.pc .im img{width:100%;height:100%;object-fit:cover}
.badges{position:absolute;top:9px;left:9px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.bdg{font:700 9.5px var(--fH);letter-spacing:.7px;padding:5px 9px;border-radius:4px;color:#fff;background:var(--ink)}
.bdg.qs{background:var(--gold);color:#16213A}.bdg.sale{background:var(--sale)}.bdg.bs{background:var(--cta)}
.savetag{position:absolute;top:9px;right:9px;font:700 10px var(--fH);background:#EAF6EE;color:var(--save);padding:5px 9px;border-radius:4px}
.pc .bd{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1}
.pc .cat{font:600 11.5px var(--fH);color:var(--sub);letter-spacing:.3px}
.pc .nm{font:800 16.5px/1.25 var(--fH);color:var(--ink);margin-top:5px;letter-spacing:-.4px}
.sw{display:flex;gap:5px;margin-top:9px}
.sw span{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.sw i{font-style:normal;font:600 10.5px var(--fH);color:var(--sub);align-self:center}
.prow{margin-top:auto;padding-top:11px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.pr{font:900 21px var(--fH);color:var(--ink);letter-spacing:-.8px}
.was{font-size:12.5px;color:#68717E;text-decoration:line-through}
.mo{font-size:12px;color:var(--sub);margin-top:3px}
.cta2{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:11px}
.cta2 a:first-child{background:var(--cta);color:#fff;font:700 12.5px var(--fH);padding:10px;border-radius:6px;text-align:center}
.cta2 a:last-child{box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font:700 12.5px var(--fH);padding:10px 12px;border-radius:6px}
/* category tile */
.ct{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1/.78;display:block;background:var(--ink)}
.ct img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ct:hover img{transform:scale(1.05)}
.ct span.ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,17,29,.05) 35%,rgba(11,17,29,.85))}
.ct .lb{position:absolute;left:16px;right:16px;bottom:14px}
.ct.tx{background:var(--shell);box-shadow:inset 0 0 0 1px var(--line)}
.ct.tx .lb b{color:var(--ink)}
.ct.tx .lb i{color:var(--sub)}
.ct.tx:hover{box-shadow:inset 0 0 0 1.5px var(--cta)}
.ct .ar{position:absolute;top:14px;right:16px;color:var(--cta);font:700 17px var(--fH)}
.ct .lb b{color:#fff;font:900 19px var(--fH);display:block;letter-spacing:-.5px}
.ct .lb i{font-style:normal;color:#e3e9f2;font-size:12.5px}
/* chips */
.navrow::-webkit-scrollbar{display:none}
.megalink{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;margin-left:-10px;font-size:13.5px;color:var(--body);border-radius:7px;transition:background .12s,color .12s}
.megalink:after{content:'→';opacity:0;font-size:12px;color:var(--cta);transform:translateX(-4px);transition:.14s}
.megalink:hover{background:#F2F6FC;color:var(--cta);font-weight:600}
.megalink:hover:after{opacity:1;transform:translateX(0)}
#mega a{cursor:pointer}
#mega{animation:megaIn .16s ease-out}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#mainnav .navrow a{position:relative;transition:color .12s}
#mainnav .navrow a:hover{color:var(--cta)}
/* ── main nav ── */
#mainnav .navrow{align-items:center;gap:0;overflow:visible}
.navlink{padding:12px 15px;cursor:pointer;color:var(--ink);border-bottom:3px solid transparent;
 transition:color .12s,border-color .12s}
.navlink:first-child{padding-left:0}
.navlink:hover{color:var(--cta);border-bottom-color:var(--cta)}
.navdeal{color:var(--sale)}
.navdeal:hover{color:var(--sale);border-bottom-color:var(--sale)}
.navsep{width:1px;height:18px;background:var(--line);margin:0 13px;flex:none}
.navcta{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:var(--cta);color:#fff;
 border-radius:8px;padding:9px 16px;font:800 12.5px var(--fH);white-space:nowrap}
.navcta:hover{background:var(--ctaDk);color:#fff}
@media(max-width:1180px){.hdphone{display:none}}
@media(max-width:1120px){.navlink{padding:12px 11px}.navsep{margin:0 8px}}
@media(max-width:1020px){.navcta{display:none}}

/* header search collapses gracefully - the field itself never disappears */
@media(max-width:820px){#ppSearchBar>span:first-child,#ppSearchBar kbd{display:none !important}}
@media(max-width:620px){#ppSearchBar b{display:none !important}#ppSearchBar{max-width:none}}
@media(max-width:700px){.heroblk{display:none !important}.mobopen{display:block !important}}


/* ══ FOOTER ══
   Gutters match the page sections (26px) so nothing sits proud of the content
   column, and every row is a grid that divides evenly at each breakpoint. */
.ppfoot{background:#fff;border-top:1px solid var(--line);font-size:13.5px;color:var(--body)}
/* CTA band: light, centred, no photo cluster on the edges. The dark slab and the
   tilted shots hugging the page edges read as clutter at the end of a long page. */
.ppfoot .ftop{background:var(--shell);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ppfoot .ftopin{display:flex;align-items:center;justify-content:center;gap:56px;max-width:840px;margin:0 auto;padding:26px 0;flex-wrap:wrap}
.ppfoot .flbl{color:var(--ink) !important;font:800 10.5px var(--fH);letter-spacing:1.3px;text-transform:uppercase;color:var(--acc)}
.ppfoot .fnum{display:block;font:900 27px var(--fH);color:var(--ink);letter-spacing:-.8px;margin-top:4px;text-decoration:none}
.ppfoot .fnum:hover{color:var(--acc)}
.ppfoot .fmeta{font-size:12.5px;color:var(--sub);margin-top:4px}
.ppfoot .fmeta a{color:var(--sub);text-decoration:underline}
.ppfoot .fbtns{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:640px){.ppfoot .ftopin{gap:16px;padding:22px 0;justify-content:flex-start}.ppfoot .fnum{font-size:24px}.ppfoot .fbtns{width:100%}.ppfoot .fbtns .btn{flex:1;justify-content:center}}
.ppfoot .fbrandrow{display:flex;gap:26px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:30px 0 22px;border-bottom:1px solid var(--line)}
.ppfoot .fbrand{max-width:420px}
.ppfoot .fbrand img{height:38px;display:block}
.ppfoot .fbrand p{margin:12px 0 0;line-height:1.65;color:var(--sub);font-size:13px}
.ppfoot .fbadges{display:flex;flex-wrap:wrap;gap:6px}
.ppfoot .fbadges span{border:1px solid var(--line);border-radius:20px;padding:6px 12px;font:700 10.5px var(--fH);color:var(--sub);white-space:nowrap}
.ppfoot .fshow{display:inline-block;margin-top:12px;font:700 12.5px var(--fH);color:var(--cta);text-decoration:none}

.ppfoot .fmain{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:26px 0 30px}
.ppfoot .fcol b{display:block;font:800 11px var(--fH);letter-spacing:1px;text-transform:uppercase;color:var(--ink);margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--lime)}
.ppfoot .fthumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:11px}
.ppfoot .fthumb{display:block;padding:0}
.ppfoot .fthumb img{width:100%;height:44px;object-fit:cover;border-radius:7px;display:block}
.ppfoot .fthumb span{display:block;font:700 10px var(--fH);color:var(--sub);margin-top:4px;text-align:center}
.ppfoot .fthumb:hover span{color:var(--cta)}
.ppfoot .fcol a{display:block;padding:4px 0;color:var(--body);text-decoration:none;font-size:13px}
.ppfoot .fcol a:hover{color:var(--cta)}

.ppfoot .fbrands{background:var(--shell);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ppfoot .fbrandin{display:flex;align-items:center;gap:8px;padding:14px 26px;flex-wrap:wrap}
.ppfoot .flbl2{font:800 10px var(--fH);letter-spacing:1.2px;text-transform:uppercase;color:var(--subOnShell);margin-right:4px;white-space:nowrap}
.ppfoot .fb{font:700 12px var(--fH);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:6px;padding:6px 11px;white-space:nowrap}
.ppfoot .fbotin{display:flex;gap:18px;align-items:center;padding:15px 26px 22px;font-size:12px;color:var(--sub);flex-wrap:wrap}
.ppfoot .flinks{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
.ppfoot .flinks a{color:var(--sub);text-decoration:none}
.ppfoot .flinks a:hover{color:var(--cta)}

@media(max-width:900px){
 .ppfoot .fmain{grid-template-columns:1fr 1fr;gap:22px}
 .ppfoot .fbrandrow{padding:24px 0 20px}
 .ppfoot .fshots{margin-left:0}
 .ppfoot .fshot{width:88px;height:88px}
}
@media(max-width:560px){.ppfoot .fshots{display:none}}
@media(max-width:560px){
 .ppfoot .fmain{grid-template-columns:1fr}
 .ppfoot .fnum{font-size:27px}
 .ppfoot .fbtns{margin-left:0;width:100%}
 .ppfoot .fbtns .btn{flex:1;justify-content:center}
 .ppfoot .flinks{margin-left:0}
}

/* full-bleed page, but prose never runs past a comfortable measure */
.ppfoot .fbrand p,.psub,.shsub{max-width:70ch}

/* ONE container rule. Backgrounds stay full-bleed; the content column is capped at
   --pw and gutters come from --gut, so chrome, sections and footer can never drift.
   Sections must not carry an inline padding SHORTHAND - it would set the inline axis
   to 0 and beat this rule. Author vertical space with padding-top/padding-bottom. */
.w,.sec{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box;
 padding-left:max(var(--gut),calc((100% - var(--pw))/2));
 padding-right:max(var(--gut),calc((100% - var(--pw))/2))}
.w{position:relative}
@media(max-width:560px){:root{--gut:18px}}
/* opt-out for bands that should touch both edges */
.bleed{margin-left:calc(-1 * max(var(--gut),calc((100% - var(--pw))/2)));margin-right:calc(-1 * max(var(--gut),calc((100% - var(--pw))/2)))}

/* the DETECTED chip only exists once geo actually resolved a state */
.geoChip{display:none}
[data-geo-known] .geoChip{display:inline-block}

/* ══════════════════════════════════════════════════════════════
   PLAYGROUND LAYER - makes every interior page feel built for play
   without touching the information design. One accent per page
   (set with data-accent on <body>) keeps the site varied but tidy.
   ══════════════════════════════════════════════════════════════ */
body[data-accent="blue"]{--acc:#2D5FB8;--accInk:#fff;--accSoft:#EAF1FB}
body[data-accent="gold"]{--acc:#F7A70A;--accInk:#16213A;--accSoft:#FFF6E4}
body[data-accent="red"]{--acc:#C22B31;--accInk:#fff;--accSoft:#FBECEC}
/* Retired: lime / green / clay page accents. The brand runs on Slide Blue for the
   commercial line and Ladder Gold for residential; navy and white carry the layout,
   and Rocket Red is reserved for sale surfaces. Turf Lime survives only as the
   marker highlight (.hl), never as a page accent. Legacy values alias to blue so an
   old data-accent cannot render an off-brand colour. */
body[data-accent="lime"],body[data-accent="green"],body[data-accent="clay"]{--acc:#2D5FB8;--accInk:#fff;--accSoft:#EAF1FB}
body{--acc:#2D5FB8;--accInk:#fff;--accSoft:#EAF1FB}

/* ── hero: colour wash, drawn shapes, tilted photo ── */
.crumbwrap{background:#fff;border-bottom:1px solid var(--line)}
.crumb{padding:11px 0 10px}
.crumb .csep{color:#6B7280}
/* ── INTERIOR HERO ──────────────────────────────────────────────
   Two columns: a padded copy card and a contained photo. The grid declaration had been
   lost, which collapsed both children to full width and ballooned the photo. */
.phero{background:#fff;padding:26px 0 10px;position:relative}
.pherogrid{position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
 gap:22px;align-items:stretch}
.pcopy{background:var(--shell);border:1px solid var(--line);border-radius:20px;
 padding:32px 34px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.peyebrow{display:inline-block;align-self:flex-start;background:var(--gold);color:#16213A;
 font:800 10.5px var(--fH);letter-spacing:1.2px;text-transform:uppercase;padding:6px 12px;border-radius:5px}
.ph1{font-size:38px;line-height:1.06;letter-spacing:-1.3px;margin:12px 0 0}
.psub{font-size:15.5px;line-height:1.68;color:var(--body);margin:11px 0 0;max-width:52ch}
.pctas{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.pstats{display:flex;gap:30px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
.pstats > div{min-width:92px}
.pstats b{display:block;font:900 21px var(--fH);color:var(--ink);line-height:1.15}
.pstats span{font-size:11.5px;color:var(--sub)}
.pshot{position:relative;border-radius:20px;overflow:hidden;min-height:300px;background:var(--shell);min-width:0}
.pshot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ptag{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.95);color:var(--ink);
 font:700 11.5px var(--fH);padding:7px 13px;border-radius:6px}
@media(max-width:900px){
 .pherogrid{grid-template-columns:1fr;gap:14px}
 .pcopy{padding:24px 22px;border-radius:16px}
 .ph1{font-size:28px}
 .pshot{min-height:210px;order:-1;border-radius:16px}}
.peyebrow{display:inline-block;background:var(--acc);color:var(--accInk);border-radius:999px;
 padding:6px 13px;font:800 10.5px var(--fH);letter-spacing:1.2px;text-transform:uppercase}
/* Marker highlight. It is a BACKGROUND on the inline element, not a pseudo-element:
   a pseudo is one rectangle, so on a phrase that wraps it stretched across both
   lines. box-decoration-break:clone makes the background fragment per line, and a
   background paints under the text natively - no z-index or isolation needed.
   Scoped to .hl (not .ph1 .hl) so the closing band gets the same treatment. */
.hl{display:inline;color:inherit;
 background-image:linear-gradient(var(--lime),var(--lime));
 background-size:100% 1.08em;background-position:0 72%;background-repeat:no-repeat;
 -webkit-box-decoration-break:clone;box-decoration-break:clone;
 padding:0 .06em;border-radius:3px}
.ph1 .hl{color:var(--ink)}
.pcloser .hl{color:#16213A}
.pstats > div{background:var(--accSoft);border-radius:12px;padding:9px 13px}
.ptag{background:var(--gold);color:#16213A;font-weight:800;transform:rotate(-1.6deg)}

/* ── section heads: chunky marker in the page accent ── */
.h2wrap:before{background:var(--acc);flex:none;width:6px;height:28px;border-radius:4px;margin-top:.14em}

/* ── cards lift when you point at them ── */
.card{transition:transform .14s ease, box-shadow .14s ease}
a.card:hover,.pc:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(19,26,40,.11)}

/* ── chips get the page accent on hover ── */
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--acc);color:var(--acc)}

/* ── trust row: colour-cycled ticks instead of five identical greens ── */
/* ── closing band: playful shapes, not a flat rectangle ── */
.pcloser{position:relative;overflow:hidden}
.pcloser:before{content:"";position:absolute;left:-70px;top:-90px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08)}
.pcloser:after{content:"";position:absolute;right:-60px;bottom:-110px;width:300px;height:300px;border-radius:50%;background:rgba(191,215,48,.16)}
.pcloser .w{position:relative}
/* ══ PLAYGROUND LAYER - the body of the page, not just the hero ══ */

/* Alternating bands, but only on sections that do not already declare their own
   background - an inline background always wins, so trying to alternate across
   those produced two identical neighbours. */

.ppbody > section{padding-top:34px;padding-bottom:34px}

/* section heads get a small sticker above the title */
.sh .h2wrap{position:relative}
.h2{position:relative}

/* cards: rounder, with a coloured top edge that shows on hover */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:19px 21px;position:relative;overflow:hidden}
.card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--acc);
 transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
a.card:hover:before{transform:scaleX(1)}

/* numbered process bands read like a game board */
.g4 > .card > div:first-child,.g3 > .card > div:first-child{letter-spacing:1.1px}
.stepnum{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;
 background:var(--acc);color:var(--accInk);font:900 15px var(--fH);transform:rotate(-3deg);margin-bottom:10px}

/* Spec tables read as quiet data panels. Gold is reserved for the versus band, where
   it marks OUR column - if every table header is gold the highlight means nothing. */
.ppbody table{border-radius:16px;overflow:hidden;box-shadow:0 1px 0 var(--line)}
.ppbody table thead th{background:var(--shell);color:var(--sub)}
.ppbody table tbody tr:hover td{background:var(--shell)}

/* FAQ: accent marker and a chunkier open state */
.ppbody details{border-radius:14px;overflow:hidden;transition:background .15s}
.ppbody details[open]{background:var(--accSoft)}
.ppbody details summary{font-weight:800}
.ppbody details summary::marker{color:var(--acc)}

/* chips and pills inside the body pick up the accent */
.ppbody .chip{background:#fff}
.ppbody .chip:hover{background:var(--accSoft)}

/* a big soft dot behind every other band, so backgrounds are never flat */
.ppbody > section > *{position:relative}
/* ══ PLAYGROUND LAYER 2 - motion, texture and small rewards ══ */

/* 1 · a hand-drawn rule between chapters, instead of a hard edge */
.ppbody > section:not(.phero):not(.pcloser) + section:not(.pcloser){position:relative}
.ppbody > section:not(.phero) + section:not(.pcloser):before{content:"";position:absolute;left:50%;top:0;
 width:56px;height:4px;border-radius:3px;background:var(--acc);opacity:.28;transform:translateX(-50%)}

/* 2 · sections rise in as you reach them (respects reduced-motion) */
@media (prefers-reduced-motion:no-preference){
 .ppbody.revealArmed > section{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
 .ppbody.revealArmed > section.seen,.ppbody > .phero{opacity:1;transform:none}
}

/* 3 · price tags tilt like a real tag */
.pc .pr,.ppbody .pr{display:inline-block}
a.card:hover .pr{transform:rotate(-1.5deg)}
.pr{transition:transform .14s ease}

/* 4 · buttons press down when clicked */
.btn{transition:transform .1s ease,background .14s ease,box-shadow .14s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}

/* 5 · stat numbers get a playful accent underline */
.pstats b:after{content:"";display:block;width:22px;height:3px;border-radius:2px;background:var(--acc);margin-top:5px}

/* 6 · big soft "confetti" dots scattered behind tinted bands */
.confetti{position:absolute;border-radius:50%;pointer-events:none}

/* 7 · photos in the body get the same tilted-frame treatment as the hero */
.ppbody .card > img:first-child{border-radius:12px}
.ppbody .shotframe{border:5px solid #fff;border-radius:18px;box-shadow:0 14px 34px rgba(19,26,40,.16);transform:rotate(-1deg);overflow:hidden}

/* 8 · FAQ arrows turn instead of the default triangle */
.ppbody details summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px}
.ppbody details summary::-webkit-details-marker{display:none}
.ppbody details summary:before{content:"";width:9px;height:9px;border-right:2.5px solid var(--acc);
 border-bottom:2.5px solid var(--acc);transform:rotate(-45deg);transition:transform .18s ease;flex:none}
.ppbody details[open] summary:before{transform:rotate(45deg)}

/* Promo bar stays one line at every width: it sheds pieces rather than wrapping,
   and the row reserves space so the dismiss button never overlaps the copy. */
.dsrow{flex-wrap:nowrap;white-space:nowrap;padding-right:44px}
@media(max-width:900px){.dsrow .dsname{display:none}}
@media(max-width:700px){.dsrow #dsclock{display:none !important}}
@media(max-width:520px){.dsrow .dscta{display:none}.dsrow .dsmsg{font-size:12px}}

/* ── SECTION RHYTHM ──────────────────────────────────────────────
   Every page alternates white / shell down the column from the same
   starting point, so the cadence is identical site-wide. Pages no
   longer carry their own tints - a page that wants a band out of turn
   sets an inline background (dark, sale, accent), which wins on
   specificity and is skipped by the count. */
/* No positional checkerboard. Tint is applied deliberately, to GROUP sections that
   belong together (the shopping run), so weight means something. Consecutive .tint
   sections merge into one continuous field. */
#app > section.tint,.ppbody > section.tint{background:var(--shell)}
#app > section.tint,.ppbody > section.tint{padding-top:48px;padding-bottom:48px}
/* A run of tinted sections merges into ONE field - but only where they are the SAME kind
   of block (consecutive product rows, or a run grouped by PP.rhythm). Two unrelated
   tinted bands, e.g. a process timeline followed by the FAQ, keep their full padding
   so the boundary between them still reads. */
#app > section.tint.prow + section.tint.prow,.ppbody > section.tint.prow + section.tint.prow,
#app > section.tint.tintauto + section.tint.tintauto,.ppbody > section.tint.tintauto + section.tint.tintauto{padding-top:6px}
#app > section.tint.prow:has(+ section.tint.prow),.ppbody > section.tint.prow:has(+ section.tint.prow),
#app > section.tint.tintauto:has(+ section.tint.tintauto),.ppbody > section.tint.tintauto:has(+ section.tint.tintauto){padding-bottom:6px}
/* three weights instead of one uniform 34px rhythm */
#app > section.sec-lg{padding-top:56px;padding-bottom:52px}
#app > section.sec-sm{padding-top:22px;padding-bottom:22px}
/* the page's one moment of real contrast */
#app > section.proofband,.ppbody > section.proofband{background:var(--band);color:#fff}
.proofband .pbtop{display:grid;grid-template-columns:1.25fr .95fr;gap:40px;align-items:center}
.proofband .pbteam{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 20px;margin-top:20px;
 padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
.proofband .pbside{display:flex;flex-direction:column;gap:14px}
.proofband .pbcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
 border-radius:var(--r);padding:20px 22px}
@media(max-width:900px){.proofband .pbtop{grid-template-columns:1fr;gap:26px}
 .proofband h2{font-size:27px !important}
 #app > section.sec-lg{padding-top:38px;padding-bottom:36px}}
#app > section:first-of-type,#app > section.phero{background:#fff}


.gcat{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
@media(max-width:1180px){.gcat{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.gcat{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.gcat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.hpad{padding:30px 24px !important}.hpad h1{font-size:34px !important;letter-spacing:-1.2px !important}}

/* ── prose measure - an answer 399 characters long across 872px is unreadable and
   reads as text pinned to both edges. Cap every body paragraph at a sane measure. ── */
details p,.faqwrap p,.prose p{max-width:68ch}
.shsub{max-width:72ch}

/* ══ TWEAKS ══ three controls that reshape the whole feel, not single properties. ══ */

/* 1 · DENSITY - how much air the page carries */
html[data-density="compact"] section{padding:24px 0}
html[data-density="compact"] .sh{margin-bottom:10px}
html[data-density="compact"] .g4,html[data-density="compact"] .g3{gap:12px}
html[data-density="compact"] .gcat{gap:9px}
html[data-density="compact"] .pc .im{aspect-ratio:16/10}
html[data-density="compact"] .card{padding:14px 16px}
html[data-density="compact"] .h2{font-size:22px}

html[data-density="spacious"] section{padding:64px 0}
html[data-density="spacious"] .sh{margin-bottom:24px}
html[data-density="spacious"] .g4,html[data-density="spacious"] .g3{gap:26px}
html[data-density="spacious"] .gcat{gap:18px}
html[data-density="spacious"] .pc .im{aspect-ratio:1/1}
html[data-density="spacious"] .card{padding:26px 28px}
html[data-density="spacious"] .h2{font-size:30px}

/* 2 · ACCENT LEAD - which brand colour carries the page */
html[data-lead="gold"] body{--acc:#F7A70A;--accInk:#16213A;--accSoft:#FFF6E4;--cta:#B87A05;--ctaDk:#8A5D00;--band:#2A2110}
html[data-lead="navy"] body{--acc:#16213A;--accInk:#fff;--accSoft:#EDF0F6;--cta:#16213A;--ctaDk:#0C1424;--band:#16213A}

/* 3 · PERSONALITY - playful keeps the marker, tilts, dots and soft corners;
   straight strips all of it for a plain-spoken, catalogue feel */
html[data-play="straight"]{--r:4px;--br:3px}
html[data-play="straight"] .hl{background-image:none;color:var(--cta);padding:0}
html[data-play="straight"] .confetti{display:none}
html[data-play="straight"] .pc .tag,html[data-play="straight"] [style*="rotate"]{transform:none !important}
html[data-play="straight"] .rise{opacity:1 !important;transform:none !important}

/* the panel itself */
#tw{position:fixed;right:18px;bottom:18px;z-index:800;font-family:var(--fH)}
#twBtn{display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:0;border-radius:999px;
 padding:12px 18px;font:800 13px var(--fH);cursor:pointer;box-shadow:0 10px 30px rgba(19,26,40,.3)}
#twPanel{display:none;position:absolute;right:0;bottom:56px;width:268px;background:#fff;border:1px solid var(--line);
 border-radius:14px;box-shadow:0 24px 60px rgba(19,26,40,.24);padding:16px;max-height:70vh;overflow:auto}
#tw.open #twPanel{display:block}
#twPanel h4{font:800 10.5px var(--fH);letter-spacing:1.3px;text-transform:uppercase;color:var(--sub);margin:0 0 3px}
#twPanel .hint{font:400 11.5px var(--fB);color:var(--sub);line-height:1.5;margin:0 0 8px}
#twPanel .grp{display:flex;gap:6px;margin-bottom:16px}
#twPanel .grp button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:9px 6px;
 font:700 11.5px var(--fH);color:var(--ink);cursor:pointer;line-height:1.2}
#twPanel .grp button[aria-pressed="true"]{border-color:var(--cta);background:#EAF1FB;color:var(--cta)}
#twPanel .rst{width:100%;border:0;background:var(--shell);border-radius:8px;padding:9px;font:700 11.5px var(--fH);color:var(--sub);cursor:pointer}
@media print{#tw{display:none}}

.toolband{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;align-items:stretch}
.toolstack{display:flex;flex-direction:column;gap:12px}
@media(max-width:900px){.toolband{grid-template-columns:1fr}}
@media(max-width:560px){.toolstack{gap:9px}}

/* four equal columns instead of a centre-flowed row, so the items line up on a grid
   instead of landing wherever their text length puts them */
.trustrow{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-top:12px;padding-bottom:12px;align-items:stretch}
@media(max-width:820px){.trustrow{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:420px){.trustrow{grid-template-columns:1fr}}
/* the promise line and the contact group sit on one baseline until they genuinely
   cannot, then stack cleanly rather than half-wrapping */
/* headline left, all the proof in ONE right-hand column, so the top reads as two
   aligned blocks instead of three ragged stacked lines */
.hpromise{display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:14px 26px;align-items:end;
 padding-bottom:14px;border-bottom:1px solid var(--line)}
.hproof{display:flex;flex-direction:column;gap:8px;align-items:flex-end;text-align:right}
@media(max-width:900px){
 .hpromise{grid-template-columns:1fr;align-items:start;gap:12px}
 .hpromise h1{font-size:30px !important}
 .hproof{align-items:flex-start;text-align:left}}

.gfoot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media(max-width:1000px){.gfoot{grid-template-columns:1fr 1fr 1fr}.gfoot>div:first-child{grid-column:1/-1}}
@media(max-width:640px){.gfoot{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.gfoot{grid-template-columns:1fr}}

/* FAQ - heading and prompt hold the left, the questions become full-width rows on the
   right with real padding, so the block reads as a panel instead of thin floating lines */
.faqgrid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:34px;align-items:start}
.faqlead{font-size:14.5px;line-height:1.7;color:var(--body);margin:10px 0 0;max-width:34ch}
.faqcta{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-top:16px}
.faqtel{font:700 13px var(--fH);color:var(--sub)}
.faqlist{border-top:1px solid var(--line)}
.ppbody .faqlist details{border-radius:0;border-bottom:1px solid var(--line);background:transparent;padding:0}
.ppbody .faqlist details[open]{background:transparent}
.ppbody .faqlist summary{padding:15px 2px;font-size:15.5px;line-height:1.35}
.ppbody .faqlist details[open] summary{color:var(--acc)}
.ppbody .faqlist details p{margin:0;padding:0 2px 17px 21px;max-width:64ch;font-size:14px;line-height:1.72;color:var(--body)}
@media(max-width:900px){.faqgrid{grid-template-columns:1fr;gap:18px}.faqlead{max-width:none}
 .faqcta{flex-direction:row;align-items:center;gap:14px}}

/* ══════════════════════════════════════════════════════════════════════════
   RESTORED - a regex sweep that was meant to remove four stale .trustrow rules
   took 8.5KB with it, including .g2, .gfoot, .tool, the form controls, the spec
   table, the chip row and the whole search overlay. Rewritten here from the
   markup that uses them. Keep additions in this file; do not append duplicate
   blocks for a selector that already exists above.
   ══════════════════════════════════════════════════════════════════════════ */

/* hero/section split - copy beside a panel, stacks on tablet */
.hsp{align-items:start}
@media(max-width:900px){.hsp{grid-template-columns:1fr !important}}

/* form controls */
.lbl{display:block;font:700 11.5px var(--fH);letter-spacing:.4px;color:var(--sub);margin-bottom:6px}
.fld{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;
 font:600 14.5px var(--fB);color:var(--ink);background:#fff;outline:0;transition:border-color .14s,box-shadow .14s}
.fld:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--accSoft)}
select.fld{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),linear-gradient(135deg,var(--sub) 50%,transparent 50%);
 background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}

/* spec table */
table.spec{width:100%;border-collapse:collapse;font-size:13.5px}
table.spec td{padding:9px 0;border-bottom:1px solid var(--line);color:var(--body);vertical-align:top}
table.spec td:last-child{text-align:right;font-weight:700;color:var(--ink);white-space:nowrap}
table.spec tr:last-child td{border-bottom:0}

/* chip row */
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* hero CTA row */
.pctas{display:flex;gap:11px;flex-wrap:wrap;margin-top:18px}

/* "Not sure yet? Start here." cards */
.tool{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);
 padding:18px 19px;transition:border-color .14s,transform .14s,box-shadow .14s}
.tool:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 10px 26px rgba(19,26,40,.08)}
.tool b{display:block;font:800 16.5px var(--fH);color:var(--ink);line-height:1.28}
.tool span{display:block;font-size:13.5px;line-height:1.65;color:var(--body);margin-top:7px;flex:1}
.tool i{display:block;font-style:normal;font:800 12.5px var(--fH);color:var(--acc);margin-top:13px}

/* footer bits */
.fcall{line-height:1.2}
.fbot{border-top:1px solid var(--line)}
.faqside{align-self:start}

/* selectable thumbnails */
.thumb{cursor:pointer;transition:border-color .14s,transform .14s}
.thumb:hover{transform:translateY(-1px)}

/* ── search overlay ── */
#ppSearchWrap{position:fixed;inset:0;z-index:900}
#ppSearchWrap .sscrim{position:absolute;inset:0;background:rgba(15,23,41,.5)}
#ppSearchWrap .spanel{position:relative;max-width:660px;margin:8vh auto 0;background:#fff;border-radius:18px;
 box-shadow:0 30px 80px rgba(15,23,41,.4);overflow:hidden;max-height:80vh;display:flex;flex-direction:column;animation:sIn .16s ease}
@keyframes sIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
#ppSearchWrap .sbar{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--line);flex:none}
#ppSearchWrap input{flex:1;border:0;outline:0;font:600 17px var(--fB);color:var(--ink);background:none}
#ppSearchWrap input::placeholder{color:#68717E;font-weight:400}
#ppSearchWrap .sesc{border:1px solid var(--line);background:none;border-radius:6px;padding:5px 9px;font:700 11px var(--fH);color:var(--sub);cursor:pointer}
#ppSearchWrap .sgeo{padding:9px 18px;background:var(--accSoft);font-size:12.5px;color:var(--acc);font-weight:600;flex:none}
#ppSearchBody{overflow-y:auto;padding:8px 0 4px}
#ppSearchWrap .sgrp{padding:6px 0 10px}
#ppSearchWrap .slbl{font:800 10px var(--fH);letter-spacing:1.2px;text-transform:uppercase;color:var(--sub);padding:8px 18px 6px}
#ppSearchWrap .srow{display:flex;align-items:center;gap:13px;padding:9px 18px;text-decoration:none}
#ppSearchWrap .srow:hover,#ppSearchWrap .srow.on{background:var(--shell)}
#ppSearchWrap .srow img{width:46px;height:46px;object-fit:cover;border-radius:8px;flex:none;background:var(--shell)}
#ppSearchWrap .sic{width:46px;height:46px;border-radius:8px;background:var(--accSoft);display:flex;align-items:center;justify-content:center;flex:none}
#ppSearchWrap .stxt{flex:1;min-width:0}
#ppSearchWrap .stxt b{display:block;font:700 14.5px var(--fH);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ppSearchWrap .stxt span{display:block;font-size:12.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ppSearchWrap .sprice{font:800 14.5px var(--fH);color:var(--ink);text-align:right;flex:none}
#ppSearchWrap .sprice s{display:block;font:400 11.5px var(--fB);color:#68717E}
#ppSearchWrap .sgo{font:700 12.5px var(--fH);color:var(--acc);flex:none}
#ppSearchWrap .schips{display:flex;flex-wrap:wrap;gap:7px;padding:2px 18px}
#ppSearchWrap .schip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 13px;font:600 12.5px var(--fB);color:var(--ink);cursor:pointer}
#ppSearchWrap .schip:hover{border-color:var(--acc);color:var(--acc)}
#ppSearchWrap .sall{display:block;padding:13px 18px;border-top:1px solid var(--line);font:700 13.5px var(--fH);color:var(--acc);text-decoration:none}
#ppSearchWrap .sall:hover{background:var(--shell)}
#ppSearchWrap .snone{padding:24px 18px 18px;text-align:center}
#ppSearchWrap .snone b{font:800 17px var(--fH);color:var(--ink)}
#ppSearchWrap .snone p{font-size:13.5px;color:var(--sub);line-height:1.6;margin:7px auto 0;max-width:400px}
#ppSearchWrap .snb{display:flex;gap:9px;justify-content:center;margin-top:14px}
#ppSearchWrap .sfoot{display:flex;gap:16px;align-items:center;padding:11px 18px;border-top:1px solid var(--line);
 background:var(--shell);font-size:11.5px;color:var(--sub);flex:none;flex-wrap:wrap}
#ppSearchWrap .sfoot a{margin-left:auto;color:var(--acc);font-weight:700;text-decoration:none}
#ppSearchWrap kbd{border:1px solid var(--line);background:#fff;border-radius:4px;padding:1px 5px;font:600 10.5px var(--fH);margin-right:3px}
@media(max-width:700px){#ppSearchWrap .spanel{margin:0;max-width:none;height:100%;max-height:none;border-radius:0}
 #ppSearchWrap .sfoot span{display:none}#ppSearchWrap .sfoot a{margin-left:0}}

/* playable-by line - a date reads as a deadline where a lead time reads as fine print */
.pc .playby{display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding-top:8px;
 border-top:1px dashed var(--line);font:600 11.5px var(--fB);color:var(--sub);line-height:1.35}
.pc .playby svg{color:var(--acc);flex:none;margin-top:2px}
.pc .playby > span{flex:1;min-width:0}
.pc .playby b{color:var(--ink);font-weight:800}

#app > section:last-of-type{padding-top:44px;padding-bottom:48px}

/* ── versus band ── */
.vs{display:grid;grid-template-columns:minmax(150px,.85fr) 1fr 1fr;
 border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.vs > div{padding:15px 18px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.55;
 display:flex;gap:9px;align-items:flex-start}
.vs > div:nth-last-child(-n+3){border-bottom:0}
.vshead{font:800 10.5px var(--fH);letter-spacing:1.1px;text-transform:uppercase;padding-top:13px;padding-bottom:13px}
.vsaspect{font-weight:700;color:var(--ink);background:var(--shell)}
.vshead.vsaspect{color:var(--sub)}
.vsthem{color:var(--sub)}
.vsthem svg{color:#B0483F;flex:none;margin-top:4px}
.vshead.vsthem{color:var(--sub);background:#fff}
.vsus{background:var(--accSoft);color:var(--ink);font-weight:600}
.vsus svg{color:var(--save);flex:none;margin-top:4px}
.vshead.vsus{background:var(--acc);color:var(--accInk)}
.vsfoot{margin:12px 0 0;font-size:13px;color:var(--sub);max-width:70ch}
@media(max-width:760px){
 .vs{grid-template-columns:1fr 1fr}
 .vs > .vsaspect{grid-column:1/-1;background:var(--ink);color:#fff;font:800 12px var(--fH);padding:11px 16px}
 .vs > .vshead.vsaspect{display:none}
 .vs > div{font-size:13.5px;padding:13px 15px}}

/* ── tabbed table ── */
/* Cap the header and panel together, but keep them on the page's left gutter - a
   centred block would break the left edge every other section shares. */
section.tabsec .sh,section.tabsec .tabs{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}

.tbl td:not(:first-child),.tbl th:not(:first-child){width:1%;white-space:nowrap}
.tbl td:first-child,.tbl th:first-child{width:auto}
/* overflow-x:auto promotes the y-axis to auto as well, and the tabs' -1px margin is
   enough to trigger a phantom vertical scrollbar - pin y explicitly. */
.tabrow{display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--shell);
 overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabrow::-webkit-scrollbar{display:none}
.tab{border:0;background:none;padding:14px 22px;font:800 13px var(--fH);color:var(--sub);cursor:pointer;
 white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);background:#fff;border-bottom-color:var(--acc)}
.tabpane{display:none}
.tabpane.on{display:block}
.tabsub{margin:0;padding:14px 20px 0;font-size:13.5px;color:var(--sub);line-height:1.6}
.tblwrap{overflow-x:auto;overflow-y:hidden}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;padding:12px 20px;font:800 10.5px var(--fH);letter-spacing:.9px;text-transform:uppercase;
 color:var(--sub);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:13px 20px;border-bottom:1px solid var(--line);color:var(--body)}
.tbl td:first-child{font-weight:700;color:var(--ink)}
.tbl th.r,.tbl td.r{text-align:right}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--shell)}

/* ── process timeline ── */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.steps li{position:relative;padding:0 20px 0 0}
.steps li:not(:last-child):after{content:"";position:absolute;left:34px;right:6px;top:15px;height:2px;
 background:var(--line)}
.stepn{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
 width:32px;height:32px;border-radius:50%;background:var(--acc);color:var(--accInk);
 font:900 14px var(--fH)}
.steps b{display:block;font:800 16px var(--fH);color:var(--ink);margin-top:13px;line-height:1.25}
.steps p{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:var(--body)}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr;gap:22px 0}.steps li:nth-child(2n):after{display:none}}
@media(max-width:560px){.steps{grid-template-columns:1fr;gap:18px}.steps li:after{display:none !important}.steps li{padding-right:0}}

/* ── lineup cards ── */
.lineup{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:18px 20px 20px}
.lcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
 border-radius:14px;overflow:hidden;text-decoration:none;transition:box-shadow .16s,transform .16s}
.lcard:hover{box-shadow:0 10px 26px rgba(19,26,40,.1);transform:translateY(-2px)}
.lmedia{display:block;aspect-ratio:4/3;background:var(--shell);overflow:hidden}
.lmedia img{width:100%;height:100%;object-fit:cover;display:block}
/* cover is right for lifestyle photography and wrong for a tall product shot on a white
   sweep - those get contained so the whole product stays in frame */
.lfit{padding:10px;background:linear-gradient(160deg,#fff,var(--shell))}
.lfit img{object-fit:contain}
.lword{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
 background:linear-gradient(150deg,var(--shell),#EBEFF6);text-align:center;padding:16px;color:#9AA6BA}
.lword .lwtag{font:800 11px var(--fH);letter-spacing:1.3px;text-transform:uppercase;color:var(--sub)}
.lword .lwnote{font:600 11.5px var(--fB);color:#7B8698}
.lbody{display:flex;flex-direction:column;padding:15px 16px 16px;flex:1}
.lname{font:800 17px var(--fH);color:var(--ink);line-height:1.25}
.lsub{font-size:12.5px;color:var(--sub);margin-top:3px;line-height:1.5}
.lvars{display:flex;flex-direction:column;margin-top:11px;border-top:1px solid var(--line)}
.lvar{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
 padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--body)}
.lvar:last-child{border-bottom:0;padding-bottom:0}
.lvar b{font:800 13.5px var(--fH);color:var(--ink);white-space:nowrap}
/* families with one or two variants would otherwise leave the card bottom empty */
.lnote{margin-top:auto;padding-top:12px;font:700 12.5px var(--fH);color:var(--cta)}
@media(max-width:900px){.lineup{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.lineup{grid-template-columns:1fr;padding:14px}}

/* ── crew note ──
   Was set in a handwriting face at 19px - charming in theory, hard to read in practice.
   A person quoted plainly at a readable size does the same job better. */
.crewnote{display:flex;gap:17px;align-items:flex-start;background:var(--shell);
 border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:14px;padding:22px 24px}
.crewnote .cnmark{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;
 display:flex;align-items:center;justify-content:center;font:800 15px var(--fH);flex:none;letter-spacing:.5px}
.crewnote p{margin:0;font:400 19px/1.55 var(--fB);color:var(--ink);letter-spacing:-.1px}
.crewnote cite{display:block;margin-top:11px;font:700 12.5px var(--fH);color:var(--sub);font-style:normal}
@media(max-width:560px){.crewnote{padding:18px;gap:13px}.crewnote p{font-size:17px}
 .crewnote .cnmark{width:38px;height:38px;font-size:13px}}




}


/* ════════════════════════════════════════════════════════════════
   C2 DESIGN LAYER - the approved home-page language, applied site-wide.
   Loaded after the utility layer so it wins on chrome, hero and type.
   ════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
body{margin:0;background:#F4F7FB;font-family:'Instrument Sans',Arial,sans-serif;color:#141A2B}
a{text-decoration:none;color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 22px}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;grid-auto-rows:172px}
.bento.cats{grid-auto-rows:184px}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
details[open] .fqx{transform:rotate(45deg)}
/* ── header + mega menu ── */
.pphdr{position:sticky;top:0;z-index:120;background:#fff;border-bottom:1px solid #E4E9F2}
.navwrap{position:relative}
.navrow{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap}
.navitem{position:static}
.navitem>a{display:flex;align-items:center;gap:5px;padding:14px 15px;font:800 14px Archivo,Arial,sans-serif;color:#141A2B;border-bottom:3px solid transparent;white-space:nowrap}
.navitem:first-child>a{padding-left:0}
.navitem:hover>a{color:#2D5FB8;border-bottom-color:#2D5FB8}
.mega{position:absolute;left:0;right:0;top:100%;width:100%;box-sizing:border-box;
 background:#fff;border:1px solid #E4E9F2;border-top:0;border-radius:0 0 22px 22px;
 box-shadow:0 26px 60px -12px rgba(20,26,43,.28);padding:26px 26px 0;display:none;z-index:130;
 opacity:0;transform:translateY(-8px)}
.navitem:hover .mega{display:grid;animation:megaIn .16s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes megaIn{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.navitem:hover .mega{animation:none;opacity:1;transform:none}}
.megacol{padding-bottom:24px}
.megacol+.megacol{border-left:1px solid #EEF1F6;padding-left:26px}
.megacol b{display:block;font:900 10.5px Archivo,Arial,sans-serif;letter-spacing:1.3px;text-transform:uppercase;color:#5A657A;
 padding-bottom:9px;margin-bottom:8px;border-bottom:2px solid #EEF1F6}
.megacol a{display:flex;align-items:center;justify-content:space-between;gap:10px;
 padding:7px 10px;margin:0 -10px;border-radius:9px;font:600 13.5px 'Instrument Sans',Arial,sans-serif;
 color:#141A2B;white-space:nowrap;transition:background .12s ease,color .12s ease}
.megacol a::after{content:"→";font:900 12px Archivo,Arial,sans-serif;color:#2D5FB8;opacity:0;transform:translateX(-4px);
 transition:opacity .12s ease,transform .12s ease}
.megacol a:hover{background:#F1F6FE;color:#2D5FB8}
.megacol a:hover::after{opacity:1;transform:none}
.megafeat{border-radius:16px;overflow:hidden;background:#F4F7FB;min-width:210px;align-self:start;
 border:1px solid #E4E9F2;transition:box-shadow .14s ease}
.megafeat:hover{box-shadow:0 12px 26px rgba(20,26,43,.16)}
.megafeat img{width:100%;height:132px;object-fit:cover;display:block;transition:transform .35s ease}
.megafeat:hover img{transform:scale(1.05)}
.megafoot{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
 margin:0 -26px;padding:13px 26px;background:#F7F9FC;border-top:1px solid #EEF1F6;border-radius:0 0 21px 21px}
.megafoot span{font:600 12.5px 'Instrument Sans',Arial,sans-serif;color:#5A657A}
.megafoot a{font:900 12.5px Archivo,Arial,sans-serif;color:#2D5FB8;white-space:nowrap}
.megafoot a:hover{text-decoration:underline}
.megafoot .mfphone{margin-left:auto;color:#141A2B}
.navsep{width:1px;align-self:center;height:18px;background:#E4E9F2;margin:0 12px}
.navcta{margin-left:auto;align-self:center;display:inline-flex;align-items:center;gap:6px;background:#2D5FB8;color:#fff;
 border-radius:100px;padding:11px 20px;font:900 13.5px Archivo,Arial,sans-serif;white-space:nowrap}
.navcta:hover{background:#1E4A97}
.srch{flex:1;max-width:430px;display:flex;align-items:center;gap:9px;background:#F4F7FB;border:1.5px solid #E4E9F2;
 border-radius:100px;padding:10px 16px;cursor:text}
.srch span{flex:1;font-size:13.5px;color:#68717E}
.icobtn{display:flex;align-items:center;gap:8px;font:800 13px Archivo,Arial,sans-serif;color:#141A2B;white-space:nowrap}
@media(max-width:1180px){.hidelg{display:none !important}}
@media(max-width:1080px){.navitem>a{padding:14px 10px;font-size:13px}.navsep{margin:0 7px}}
@media(max-width:900px){
 .navrow,.srch{display:none}
 .burger{display:flex !important}
 .pphdr{position:static}
}
.burger{display:none;align-items:center;gap:8px;background:#141A2B;color:#fff;border-radius:100px;padding:11px 18px;
 font:900 13px Archivo,Arial,sans-serif;border:0;cursor:pointer}
#drawer{position:fixed;inset:0 auto 0 0;width:310px;max-width:88vw;background:#fff;z-index:400;overflow:auto;
 transform:translateX(-102%);transition:transform .22s ease;box-shadow:0 0 44px rgba(20,26,43,.3)}
#drawer.open{transform:none}
#scrim{position:fixed;inset:0;background:rgba(20,26,43,.5);z-index:390;display:none}
#scrim.on{display:block}
@keyframes ppmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{display:inline-block;animation:ppmarquee 34s linear infinite;will-change:transform}
@media(prefers-reduced-motion:reduce){.marquee{animation:none,none}.pin.new{animation:none}}
@keyframes pppulse{0%{r:3;opacity:.9}70%{r:11;opacity:0}100%{r:11;opacity:0}}
.pin,.ring{pointer-events:none}
.ring{animation:pppulse 2.6s ease-out infinite}
@media(max-width:1040px){
 .bento,.bento.cats{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
 .bento>*{grid-column:span 1 !important;grid-row:span 1 !important}
 .bento>.lead{grid-column:span 2 !important}
 .split{grid-template-columns:1fr !important}
 .g4{grid-template-columns:repeat(2,1fr) !important}
 .g3{grid-template-columns:repeat(2,1fr) !important}
 .gfoot{grid-template-columns:1.4fr 1fr 1fr !important}
 h1{font-size:46px !important;letter-spacing:-2px !important}
}
/* utility-bar company links */
.ulinks{display:flex;gap:16px;margin-left:auto}
.ulinks a{color:#fff;opacity:.86;text-decoration:none;font-weight:600}
.ulinks a:hover{opacity:1;text-decoration:underline}
@media(max-width:760px){.ulinks{display:none}}

/* category strip - five equal cards, photo-led but square-cornered and
   flat, so it does not read as a second bento under the hero */
.catstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#E4E9F2;
 border:1px solid #E4E9F2;border-radius:14px;overflow:hidden}
.catcard{display:flex;flex-direction:column;background:#fff;padding:0 0 14px;text-decoration:none;
 transition:background .14s ease}
.catcard:hover{background:#F7F9FC}
.catimg{display:block;aspect-ratio:4/3;overflow:hidden;background:#F4F7FB}
.catimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.catcard:hover .catimg img{transform:scale(1.06)}
.catcard b{font:800 16.5px Archivo,Arial,sans-serif;letter-spacing:-.35px;
 color:#141A2B;line-height:1.18;padding:13px 15px 0}
.catcard:hover b{color:#2D5FB8}
.catsub{font:400 12.5px 'Instrument Sans',Arial,sans-serif;color:#5A657A;line-height:1.45;padding:5px 15px 0;flex:1}
.catfoot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
 font:900 13px Archivo,Arial,sans-serif;color:#141A2B;padding:11px 15px 0;margin-top:11px;border-top:1px solid #EEF1F6}
.catgo{color:#2D5FB8;font-size:12px;opacity:0;transition:opacity .14s ease}
.catcard:hover .catgo{opacity:1}
@media(max-width:1000px){.catstrip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.catstrip{grid-template-columns:repeat(2,1fr)}.catcard b{font-size:15px}}

/* home product row */
.shoprow{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.shoprow .pcard{background:#fff;border:1px solid #E4E9F2;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:transform .14s ease,box-shadow .14s ease}
.shoprow .pcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,26,43,.12)}
.shoprow .pcardimg{position:relative;display:block;background:#F4F7FB;aspect-ratio:4/3;overflow:hidden}
.shoprow .pcardimg img{width:100%;height:100%;object-fit:cover;display:block}
.shoprow .psave{position:absolute;left:9px;top:9px;background:#1B7A45;color:#fff;font:900 10px Archivo,Arial,sans-serif;letter-spacing:.6px;padding:4px 9px;border-radius:6px}
.shoprow .pcardb{display:block;padding:12px 13px 14px}
@media(max-width:1000px){.shoprow{grid-template-columns:repeat(2,1fr) !important}}

@media(max-width:640px){
 .bento,.bento.cats,.g4,.g3{grid-template-columns:1fr !important}
 .shoprow{grid-template-columns:1fr 1fr !important;gap:10px}
 .gfoot{grid-template-columns:1fr 1fr !important}
 .gfoot>div:first-child{grid-column:1/-1}
 .bento>.lead{grid-column:span 1 !important}
 h1{font-size:35px !important}
 h2{font-size:28px !important;letter-spacing:-1.1px !important}
 .wrap{padding:0 16px}
}


/* ── interior pages inherit the home's type scale ── */
body{background:#F4F7FB;font-family:'Instrument Sans',Arial,sans-serif;color:#141A2B}
h1,h2,h3,.pphdr,.h2{font-family:Archivo,Arial,sans-serif}
.h2,h2.h2{font-family:'Archivo Black',Archivo,Arial,sans-serif;letter-spacing:-1.6px;text-transform:uppercase}
.wrap{max-width:1280px}
.card{border-radius:16px}
.btn{border-radius:100px;font-family:Archivo,Arial,sans-serif;font-weight:900}

/* ── mobile fork - replaces the hero bento below 760px ── */
.mfork{display:none}
@media(max-width:760px){
 .mfork{display:block;padding:4px 0 2px}
 .bento{display:none}
 .mforkhead{padding:2px 2px 16px}
 .mforkeyebrow{display:inline-block;background:#F7A70A;color:#141A2B;border-radius:100px;
  padding:6px 13px;font:900 11px Archivo,Arial,sans-serif;letter-spacing:.4px}
 .mforkhead h1{font-family:'Archivo Black',Archivo,Arial,sans-serif;font-size:40px;line-height:.94;
  letter-spacing:-1.9px;margin:12px 0 0;text-transform:uppercase;color:#141A2B}
 .mforkhead h1 span{color:#2D5FB8}
 .mforkhead p{font-size:14.5px;line-height:1.55;color:#5A657A;margin:9px 0 0}
 .mforkcard{display:flex;gap:0;flex-direction:column;background:#fff;border:1px solid #E4E9F2;
  border-radius:16px;overflow:hidden;margin-bottom:11px;text-decoration:none}
 .mfimg{display:block;aspect-ratio:16/9;overflow:hidden;background:#F4F7FB}
 .mfimg img{width:100%;height:100%;object-fit:cover;display:block}
 .mfbody{display:block;padding:14px 16px 15px}
 .mfbody b{display:block;font:900 26px 'Archivo Black',Archivo,Arial,sans-serif;letter-spacing:-1.1px;
  text-transform:uppercase;color:#141A2B;line-height:1}
 .mfsub{display:block;font-size:13.5px;color:#141A2B;margin-top:5px;font-weight:600}
 .mfmeta{display:block;font-size:12.5px;color:#5A657A;margin-top:2px}
 .mffoot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font:900 14px Archivo,Arial,sans-serif;color:#141A2B;margin-top:12px;padding-top:11px;border-top:1px solid #EEF1F6}
 .mfgo{color:#2D5FB8;font-size:13px}
 .mforkrest{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 2px 0}
 .mforkrest span{font-size:12.5px;color:#5A657A}
 .mforkrest a{border:1px solid #E4E9F2;background:#fff;border-radius:100px;padding:7px 13px;
  font:800 12.5px Archivo,Arial,sans-serif;color:#141A2B;text-decoration:none}
 .mforkcall{display:block;text-align:center;margin-top:14px;padding:12px;background:#F4F7FB;
  border-radius:12px;font:800 13px Archivo,Arial,sans-serif;color:#2D5FB8;text-decoration:none}
}
@media (max-width:1230px){.navcta{display:none !important}} /* nav fix: links + CTA need ~1231px; theme's own 1020px hide rule is overridden by a later duplicate .navcta rule, so the pill was clipped 901-1230px */
@media (min-width:1041px){.bento>.lead{grid-column:3/span 2 !important;grid-row:1 !important;padding:18px 22px !important}.bento>.lead>h1,.bento>.lead>h2{font-size:20px !important;letter-spacing:-.4px !important;line-height:1.08 !important;margin:5px 0 0 !important}.bento>.lead>p{display:none !important}.bento>.lead>div{margin-top:9px !important}.bento>div:nth-child(2){grid-column:1/span 2 !important;grid-row:1/span 2 !important}}
.bento>div:nth-child(3){position:relative;overflow:hidden}@media (min-width:1041px){.bento>div:nth-child(3)::after{content:"";position:absolute;right:16px;top:41px;width:62px;height:62px;background-color:currentColor;opacity:.9;pointer-events:none;-webkit-mask:url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%221%22%20y=%225%22%20width=%2213%22%20height=%2210%22%20rx=%221.5%22/%3E%3Cpath%20d=%22M14%208h3.6L21%2011.4V15h-7z%22/%3E%3Ccircle%20cx=%226.5%22%20cy=%2218%22%20r=%222%22/%3E%3Ccircle%20cx=%2217.5%22%20cy=%2218%22%20r=%222%22/%3E%3C/svg%3E) no-repeat center/contain;mask:url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%221%22%20y=%225%22%20width=%2213%22%20height=%2210%22%20rx=%221.5%22/%3E%3Cpath%20d=%22M14%208h3.6L21%2011.4V15h-7z%22/%3E%3Ccircle%20cx=%226.5%22%20cy=%2218%22%20r=%222%22/%3E%3Ccircle%20cx=%2217.5%22%20cy=%2218%22%20r=%222%22/%3E%3C/svg%3E) no-repeat center/contain}}
.catstrip>.catcard>.catimg{background:#fff !important}.catstrip>.catcard:nth-child(5)>.catimg>img{object-position:50% 6% !important} .ph1{line-height:1.18 !important} .ph1 .hl{background-size:100% .88em !important;background-position:0 92% !important;padding:0 5px !important} .pstats{flex-wrap:wrap !important;gap:16px 30px !important} .pstats>div{background:none !important;box-shadow:none !important;border-radius:0 !important;padding:0 !important;width:auto !important;min-width:0 !important;flex:0 0 auto !important} .pstats .pphdr{background:none !important} .pstats:has(>div:nth-child(4)){gap:14px 18px !important} .pstats:has(>div:nth-child(4)) .pphdr{font-size:17px !important} .ct.agetile{background:#fff !important;box-shadow:inset 0 0 0 1px var(--line)} .ct.agetile img{object-fit:contain !important;padding:12px 14px 56px !important} .ct.agetile .ov{display:none !important} .ct.agetile .lb b{color:var(--ink) !important} .ct.agetile .lb i{color:var(--sub) !important} .ct.agetile:hover{box-shadow:inset 0 0 0 1.5px var(--cta)} .ct.agetile:hover img{transform:none !important} .bdg.ks{background:#CCFF00 !important;color:#131A28 !important}
.bdg.wt{background:#00BCD4 !important;color:#0B2B2E !important}.bdg.bto{background:#2E3A4E !important;color:#FFFFFF !important}.pc:has(.bdg.bto) .playby{display:none !important}