/* G-TECHPRO content pages (repairs, sell, lab, about, location, help, warranty, policies, 404), v4 "Apple Night".
   Black and near-black sections, big rounded #161617 tiles in different sizes, plain columns with hairlines, a two-tone headline
   (white sentence, grey sentence) on every page. The client blue is the only colour. System type, semibold, sentence case.
   Base classes are extended here, never restyled. Class prefix: c-. Scroll motion (GSAP) is added by /js/pages/repairs.js and only
   when <html> has .motion; without it every page is a complete static layout. Spec: /DESIGN-V4.md */

[data-open-chat][hidden]{display:none}
.nw{white-space:nowrap}
.c-lab{font:600 14px/1.35 var(--f-sans);letter-spacing:-.005em;color:var(--mute)}
.c-k{font:600 clamp(17px,1.5vw,21px)/1.25 var(--f-display);letter-spacing:-.012em;color:var(--soft)}
.c-w{display:inline-block}

/* ---------- opening: breadcrumb, two-tone headline, one line, buttons ---------- */
.c-hero{position:relative;background:#000}
.c-hero .crumbs{padding:18px 0 0}
.crumbs a{position:relative}
.crumbs a::after{content:"";position:absolute;inset:-12px -8px}
.c-hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(26px,4vw,60px) 0 clamp(30px,3.6vw,52px)}
.c-h1{max-width:17em;margin:0;font:600 clamp(36px,5.4vw,76px)/1.04 var(--f-display);letter-spacing:-.032em;color:var(--text);text-wrap:balance}
.c-sub{max-width:28em;margin-top:22px;font:400 clamp(19px,1.8vw,24px)/1.3 var(--f-sans);letter-spacing:-.014em;color:var(--soft);text-wrap:pretty}
.c-sub a{color:var(--link)}
.c-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px;margin-top:30px}
.c-actions-l{justify-content:flex-start}
button.textlink{background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.c-hero.is-doc .c-hero-copy{padding-bottom:clamp(28px,3.4vw,48px)}
.c-hero.is-doc .c-h1{font-size:clamp(34px,4.8vw,64px)}
.c-hero.is-404 .c-hero-copy{justify-content:center;min-height:min(60vh,600px);padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(64px,9vw,128px)}

/* ---------- tiles: the one surface. Big, rounded, borderless; a stage gives them the perspective they tilt in ---------- */
.c-stage{max-width:1700px;margin:0 auto;padding:0 12px;perspective:1600px}
.c-tile{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--tile);transform-origin:50% 100%;isolation:isolate}
.c-hero-tile{min-height:clamp(440px,44vw,680px)}
.c-illus{position:absolute;right:18px;bottom:16px;z-index:3;background:rgba(255,255,255,.08)}

/* ---------- sections ---------- */
.c-sec{padding:clamp(72px,9vw,128px) 0;background:#000}
.c-sec-sm{padding:clamp(40px,5vw,72px) 0;background:#000}
.c-sec.is-alt,.c-sec-sm.is-alt{background:var(--bg-2)}
.c-narrow{max-width:calc(900px + var(--pad)*2)}
.c-sechead{margin-bottom:clamp(30px,4.2vw,60px)}
.c-sechead.is-center{text-align:center}
.c-h2{max-width:22em;margin:0;font:600 clamp(30px,4vw,52px)/1.08 var(--f-display);letter-spacing:-.024em;color:var(--text);text-wrap:balance}
.is-center .c-h2{margin-inline:auto}
.c-lead{max-width:34em;margin-top:18px;font:400 clamp(17px,1.5vw,21px)/1.4 var(--f-sans);letter-spacing:-.012em;color:var(--soft);text-wrap:pretty}
.is-center .c-lead{margin-inline:auto}
.c-lead a,.c-hint a,.c-fine a,.c-prose a,.c-draft a{color:var(--link);text-decoration:none}
.c-lead a:hover,.c-hint a:hover,.c-fine a:hover,.c-prose a:hover{text-decoration:underline;text-underline-offset:3px}
.c-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,96px);align-items:start}
.c-split-head{position:sticky;top:calc(var(--head) + 28px)}
.c-draftbar{padding:14px 0;background:var(--bg-2)}
.c-draft{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.45;color:var(--soft)}
.c-draft .tag-example{flex:none}
.c-prose .c-draft{margin-top:28px}
.c-pic,.c-pic img{display:block;width:100%;height:100%}

/* ---------- steps: a big grey number, a short semibold title, one line; they rise in one after another ---------- */
.c-steps{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(28px,3vw,48px)}
.c-st{padding-top:26px;border-top:1px solid var(--line)}
.c-sn{display:block;font:600 clamp(60px,6.6vw,92px)/.9 var(--f-display);letter-spacing:-.045em;color:var(--mute);font-variant-numeric:tabular-nums}
.c-st-t{margin-top:22px;font:600 clamp(21px,1.9vw,26px)/1.15 var(--f-display);letter-spacing:-.018em;color:var(--text)}
.c-st-p{margin-top:10px;max-width:22em;font:400 17px/1.45 var(--f-sans);color:var(--soft)}

/* ---------- groups of tiles of different sizes (about, location, help): a wide one, then the rest ---------- */
.c-mos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;perspective:1600px}
.c-mt{position:relative;display:flex;flex-direction:column;grid-column:span 6;min-height:clamp(300px,27vw,390px);overflow:hidden;border-radius:var(--r-xl);background:var(--tile);transform-origin:50% 100%;isolation:isolate;transition:background-color .3s}
.c-mt:nth-child(even){background:var(--tile-2)}
.c-mt:hover{background:#1c1c1e}
.c-mos-3 .c-mt:first-child{grid-column:1/-1;min-height:clamp(340px,31vw,450px)}
.c-mos-4 .c-mt:nth-child(1),.c-mos-4 .c-mt:nth-child(4){grid-column:span 7}
.c-mos-4 .c-mt:nth-child(2),.c-mos-4 .c-mt:nth-child(3){grid-column:span 5}
.c-mt-copy{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;padding:clamp(28px,3.4vw,48px)}
.c-mt:not(.has-media) .c-mt-copy{justify-content:space-between;gap:clamp(36px,6vw,90px)}
.c-mt-ic .ico{width:32px;height:32px;stroke-width:1.6;color:var(--link)}
.c-mt-text{display:grid;gap:10px;justify-items:start}
.c-mt-h{font:600 clamp(28px,3vw,42px)/1.08 var(--f-display);letter-spacing:-.025em;color:var(--text)}
.c-mt-p{max-width:23em;font:400 clamp(17px,1.4vw,19px)/1.38 var(--f-sans);letter-spacing:-.012em;color:var(--soft)}
.c-mt-a{margin-top:6px}
.c-mt-a::after{content:"";position:absolute;inset:0;z-index:3}
.c-mt-a:focus-visible{outline:none}
.c-mt:has(.c-mt-a:focus-visible){outline:2px solid var(--link);outline-offset:3px}
.c-mt-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.c-mt-pic img{object-fit:cover;filter:brightness(.62) saturate(.85);transform:scale(1.06);transition:transform 1.4s var(--ease-out)}
.c-mt:hover .c-mt-pic img{transform:scale(1.1)}
.c-mt-pic.is-top img{object-position:50% 18%}
.c-mt.is-photo .c-mt-media::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.94),rgba(0,0,0,.8) 42%,rgba(0,0,0,.12) 88%)}
.c-phones{position:absolute;right:clamp(10px,5vw,96px);top:8%;bottom:-12%;display:flex;align-items:flex-end;gap:clamp(6px,2vw,26px);pointer-events:none}
.c-phones img{width:auto;height:100%;max-width:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.c-phones img:first-child{transform:rotate(-5deg) translateY(7%)}
.c-phones img:last-child{transform:rotate(4deg)}
.c-mt.is-phones .c-mt-text{max-width:min(23em,48%)}

/* plain columns with a hairline above each (about: four promises) */
.c-cols{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(28px,3vw,48px)}
.c-cols-4{--n:4}
.c-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:26px;border-top:1px solid var(--line)}
.c-col-t{font:600 clamp(22px,2vw,28px)/1.12 var(--f-display);letter-spacing:-.02em;color:var(--text)}
.c-col-p{flex:1;max-width:22em;font:400 17px/1.45 var(--f-sans);color:var(--soft)}
.c-col .textlink{margin-top:6px}
.c-where{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(56px,8vw,112px) clamp(20px,5vw,80px);background:var(--tile-2)}
.c-where .c-h2{max-width:15em}
.c-where .c-lead{max-width:30em}

/* facts: a label, then the thing, over a hairline (location, company details) */
.c-facts,.c-dl{display:grid;gap:0 clamp(20px,3vw,40px);margin:0}
.c-facts-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.c-dl{grid-template-columns:repeat(2,minmax(0,1fr))}
.c-fact{padding:24px 0 14px;border-top:1px solid var(--line)}
.c-fact dt{margin-bottom:8px;font:400 15px/1.3 var(--f-sans);color:var(--mute)}
.c-fact dd{margin:0;font:600 clamp(18px,1.45vw,21px)/1.32 var(--f-display);letter-spacing:-.014em;color:var(--text);overflow-wrap:anywhere}
.c-dl .c-fact dd{font-size:clamp(17px,1.5vw,19px);font-weight:500}
.c-fact address{font-style:normal}
.c-fact a{color:var(--text);text-decoration:none;transition:color .2s}
.c-fact a:hover{color:var(--link);text-decoration:underline;text-underline-offset:3px}

/* closing tile, just above the footer */
.c-closer{padding:12px 0 clamp(72px,8vw,112px);background:#000}
.c-closer-tile{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(56px,8vw,112px) clamp(20px,5vw,80px)}
.c-closer-tile .c-h2{max-width:14em}
.c-closer-tile .c-lead{max-width:30em}

/* ---------- feature tiles: copy on the left, the phone on the right (repairs, sell) ---------- */
.c-feat{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;min-height:clamp(460px,40vw,600px)}
.c-days-copy,.c-tell-copy{position:relative;z-index:2;padding:clamp(32px,5vw,76px) clamp(24px,5vw,84px)}
.c-feat-ph{position:relative;z-index:1;align-self:stretch;display:grid;place-items:center;perspective:1200px;pointer-events:none}
.c-feat-ph::before{content:"";position:absolute;left:14%;right:14%;top:12%;bottom:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(91,140,255,.34),transparent);filter:blur(34px);opacity:.75}
.c-ph{position:relative;width:auto;height:clamp(320px,36vw,520px);max-width:none;filter:drop-shadow(0 40px 60px rgba(0,0,0,.65));transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .8s var(--ease-out)}
.c-feat.is-hover .c-ph{transition:transform .14s linear}
.c-days-n{margin-top:.04em;font:600 clamp(104px,15vw,236px)/.88 var(--f-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
.c-to{margin:0 .1em;font-size:.34em;letter-spacing:-.02em;color:var(--mute)}
.c-days-u{margin-top:.16em;font:600 clamp(30px,3.6vw,52px)/1.05 var(--f-display);letter-spacing:-.026em;color:var(--text)}
.c-days-s{max-width:20em;margin-top:22px;font:400 clamp(17px,1.5vw,21px)/1.38 var(--f-sans);letter-spacing:-.012em;color:var(--soft)}
.c-lines{display:grid}
.c-lines li{padding:.2em 0;font:600 clamp(28px,3.4vw,50px)/1.1 var(--f-display);letter-spacing:-.028em;color:var(--text)}
.c-lines-lg{margin-top:12px}
.c-lines-lg li{font-size:clamp(30px,4.2vw,60px);letter-spacing:-.034em;line-height:1.08}
.c-lines-lg li+li{border-top:1px solid var(--line)}
.c-abt{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:clamp(480px,44vw,660px)}
.c-abt-copy{position:relative;z-index:2;display:grid;align-content:center;padding:clamp(32px,5vw,76px) clamp(24px,5vw,84px)}
.c-abt-media{position:relative;margin:0;min-height:100%;overflow:hidden;background:var(--tile-2)}
.c-big{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,72px);padding:clamp(40px,6vw,80px) clamp(20px,4vw,60px)}
.c-big-n{font:600 clamp(170px,29vw,420px)/.8 var(--f-display);letter-spacing:-.065em;font-variant-numeric:tabular-nums;color:var(--text)}
.c-big-t{max-width:6.5em;font:600 clamp(28px,4vw,58px)/1.06 var(--f-display);letter-spacing:-.028em}

/* ---------- photo tiles: they tilt up into place and their pictures drift ---------- */
.c-photo-tile{margin:0;background:var(--tile-2)}
.c-drift{position:absolute;inset:0}
.c-drift .c-pic img{object-fit:cover;transform:scale(1.14);filter:brightness(.88) saturate(.92)}
.c-drift .c-pic.is-top img{object-position:50% 22%}
.c-photo-tile figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:56px 28px 22px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.68));font:400 14px/1.45 var(--f-sans);color:#d1d1d6}
.c-abt-media figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:56px 24px 20px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7));font:400 14px/1.45 var(--f-sans);color:#d1d1d6}
.c-duo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:12px}
.c-duo-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(32px,5vw,76px)}
.c-duo-copy .c-h2{font-size:clamp(30px,3.6vw,50px)}
.c-duo-photo{min-height:clamp(440px,40vw,620px)}
.c-gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-top:clamp(8px,1vw,16px)}
.c-gal .c-photo-tile{grid-column:span 7;min-height:clamp(320px,36vw,560px)}
.c-gal .c-photo-tile:last-child{grid-column:span 5}

/* ---------- the lab: 25 checks as a clean list with small ticks ---------- */
.c-checks{position:relative}
.c-sheet{display:grid;grid-auto-flow:column;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--r3,9),auto);column-gap:clamp(24px,4vw,64px);border-top:1px solid var(--line)}
.c-sheet li{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 0;border-bottom:1px solid var(--line);font:500 clamp(17px,1.5vw,19px)/1.3 var(--f-display);letter-spacing:-.012em;color:var(--text)}
.c-ck{flex:none;width:20px;height:20px;fill:none;stroke:var(--link);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.c-ck path{stroke-dasharray:1;stroke-dashoffset:0}
.c-scan{position:absolute;left:0;right:0;top:0;height:2px;z-index:2;opacity:0;pointer-events:none;background:linear-gradient(90deg,rgba(91,140,255,0),#8fb0ff 25%,#fff 50%,#8fb0ff 75%,rgba(91,140,255,0));box-shadow:0 0 18px 2px rgba(47,107,255,.6)}

/* the lab: grades in plain columns, the word first, then the battery in large type */
.c-grades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.c-gr{padding-top:28px;border-top:1px solid var(--line)}
.c-gr-k{font:400 15px/1.3 var(--f-sans);color:var(--mute)}
.c-gr-name{display:flex;align-items:center;gap:12px;margin-top:6px;font:600 clamp(28px,3vw,38px)/1.1 var(--f-display);letter-spacing:-.022em;color:var(--text)}
.c-gr-name::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--ok)}
.c-gr-B .c-gr-name::before{background:#ffd60a}
.c-gr-C .c-gr-name::before{background:#ff9f0a}
.c-gr-stat{margin-top:28px;font:600 clamp(36px,4vw,54px)/1 var(--f-display);letter-spacing:-.032em;font-variant-numeric:tabular-nums;color:var(--text)}
.c-gr-sub{margin-top:6px;font-size:15px;color:var(--mute)}
.c-gr-dl{display:grid;margin:28px 0 0}
.c-gr-dl div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.c-gr-dl dt{font-size:15px;line-height:1.5;color:var(--mute)}
.c-gr-dl dd{margin:0;font-size:17px;line-height:1.4;color:var(--text)}

/* ---------- location: the map is the big tile ---------- */
.c-map{display:flex;flex-direction:column;background:var(--tile)}
.c-map-box{position:relative;flex:1;min-height:clamp(380px,42vw,620px);background:#101012}
.c-map-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;filter:invert(.9) hue-rotate(180deg) brightness(.95) contrast(.88) saturate(.75)}
.c-map-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;color:var(--soft)}
.c-map-fallback .ico{width:38px;height:38px;color:var(--link)}
.c-map-fallback p{font:600 28px/1.1 var(--f-display);letter-spacing:-.02em;color:var(--text)}
.c-map-fallback small{font-size:15px}
.c-map-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:18px 24px 20px}
.c-map-bar p{display:grid;gap:2px}
.c-map-bar b{font:600 19px/1.2 var(--f-display);letter-spacing:-.014em}
.c-map-bar span{font-size:15px;color:var(--soft)}

/* location: "Getting here", a sticky headline beside a short list of facts (distances are straight-line, never minutes) */
.c-gh{min-width:0}
.c-gh-dl{grid-template-columns:minmax(0,1fr)}
.c-gh-dl .c-fact{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);gap:6px clamp(16px,2.4vw,32px);align-items:baseline;padding:22px 0}
.c-gh-dl .c-fact dt{margin:0}
.c-gh-dl .c-fact dd{font-weight:500}
.c-gh-dl .c-fact a{color:var(--link)}
.c-gh-note{margin-top:0;padding:24px clamp(0px,8vw,120px) 0 0;border-top:1px solid var(--line);font:400 17px/1.5 var(--f-sans);color:var(--soft);text-wrap:pretty}
.c-gh-note a{color:var(--link);text-decoration:none}
.c-gh-note a:hover{text-decoration:underline;text-underline-offset:3px}

/* help: three ways to reach the shop, big tiles of different sizes */
.c-ctiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;perspective:1600px}
.c-ct{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;grid-column:span 5;min-height:clamp(220px,19vw,270px);padding:clamp(26px,3vw,44px);color:var(--text);text-decoration:none;transition:background-color .3s}
.c-ct:hover{background:#1c1c1e}
.c-ct-call{grid-column:span 7;grid-row:span 2;min-height:clamp(300px,31vw,450px);background:var(--tile-2)}
.c-ct-call:hover{background:#232326}
.c-ct-ic{margin-bottom:auto}
.c-ct-ic .ico{width:32px;height:32px;stroke-width:1.6;color:var(--link)}
.c-ct-k{font:400 17px/1.3 var(--f-sans);color:var(--soft)}
.c-ct-v{font:600 clamp(21px,2.2vw,30px)/1.18 var(--f-display);letter-spacing:-.02em;overflow-wrap:anywhere}
.c-ct-call .c-ct-v{font-size:clamp(36px,5.2vw,74px);line-height:1.02;letter-spacing:-.036em;white-space:nowrap}
.c-ct-go{display:inline-flex;align-items:center;gap:4px;margin-top:14px;font-size:17px;color:var(--link)}
.c-ct-go .ico{width:15px;height:15px;stroke-width:2.2}

/* warranty: covered and not covered, two tiles of different sizes */
.c-cover{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;perspective:1600px}
.c-cv{grid-column:span 7;display:flex;flex-direction:column;gap:22px;padding:clamp(30px,4vw,56px)}
.c-cv.is-not{grid-column:span 5;background:var(--tile-2)}
.c-cv-h{font:600 clamp(28px,3vw,40px)/1.1 var(--f-display);letter-spacing:-.026em}
.c-cv.is-not .c-cv-h{color:var(--soft)}
.c-cv-note{max-width:24em;margin-top:6px;font-size:16px;line-height:1.45;color:var(--mute)}
.c-ticks{display:grid;gap:14px;font:400 17px/1.45 var(--f-sans);color:var(--text)}
.c-ticks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start}
.c-ticks .ico{width:20px;height:20px;margin-top:2px;color:var(--link)}
.is-not .c-ticks .ico{color:var(--mute)}

/* ---------- students: the budget picks. Apple Store cards in a grid (a sideways rail on phones); each card carries its phone's colour as a soft light ---------- */
.c-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,262px),1fr));gap:20px;perspective:1600px}
.c-pick{display:flex;min-width:0;transform-origin:50% 100%}
.c-pick .p-card{flex:1;height:100%}
.c-pick .p-img::before{content:"";position:absolute;left:12%;right:12%;top:16%;bottom:2%;z-index:0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--glow,#9a9ca1) 70%,transparent),transparent);opacity:.42;filter:blur(22px);transition:opacity .5s}
.c-pick .p-card:hover .p-img::before{opacity:.75}
.c-pick .p-img img{z-index:1}
.c-picks-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;margin-top:clamp(24px,3vw,40px);font-size:14px;line-height:1.5;color:var(--mute)}
.c-picks-note .textlink{font-size:17px}

/* ---------- FAQ: hairline rows, a plus that turns into a minus. Native details, so it works without JavaScript ---------- */
.c-faq{max-width:760px;margin:0 auto;border-top:1px solid var(--line)}
.c-split .c-faq{max-width:none;margin:0}
.c-faq details{border-bottom:1px solid var(--line)}
.c-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:18px 0;list-style:none;cursor:pointer;font:600 clamp(19px,1.7vw,22px)/1.3 var(--f-display);letter-spacing:-.016em;color:var(--text);-webkit-tap-highlight-color:transparent;transition:color .2s}
.c-faq summary::-webkit-details-marker{display:none}
.c-faq summary:hover{color:#fff}
.c-faq summary:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:8px}
.c-pm{position:relative;flex:none;width:20px;height:20px}
.c-pm::before,.c-pm::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:var(--soft);transition:transform .4s var(--ease-out),background-color .2s}
.c-pm::after{transform:rotate(90deg)}
.c-faq details[open] .c-pm::after{transform:rotate(0)}
.c-faq summary:hover .c-pm::before,.c-faq summary:hover .c-pm::after{background:#fff}
.c-faq .a{max-width:36em;padding:0 44px 28px 0;font:400 17px/1.5 var(--f-sans);color:var(--soft)}
.motion .c-faq details[open] .a{animation:c-open .5s var(--ease-out) both}
@keyframes c-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- long reads (warranty rights, policies): 720px, 17px on 1.6 ---------- */
.c-prose{font:400 17px/1.6 var(--f-sans);letter-spacing:-.011em;color:var(--soft)}
.c-prose p{margin:0 0 16px;max-width:40em}
.c-prose .c-h2{margin-bottom:22px;font-size:clamp(28px,3.4vw,44px)}
.c-ph2{margin:0 0 14px;font:600 clamp(24px,2.2vw,28px)/1.2 var(--f-display);letter-spacing:-.02em;color:var(--text)}
.c-doc-grid{display:grid;grid-template-columns:220px minmax(0,720px);justify-content:center;gap:clamp(32px,6vw,96px);align-items:start}
.c-toc{position:sticky;top:calc(var(--head) + 28px)}
.c-toc .c-lab{margin-bottom:8px}
.c-toc ol{display:grid}
.c-toc a{display:flex;align-items:center;min-height:44px;padding:6px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.35;color:var(--soft);text-decoration:none;transition:color .2s}
.c-toc a:hover{color:var(--text)}
.c-doc .c-prose>section{padding:clamp(32px,4vw,48px) 0 clamp(8px,1vw,16px);border-top:1px solid var(--line)}
.c-short{padding:clamp(24px,3vw,36px);margin-bottom:clamp(12px,2vw,24px)}
.c-short .c-ph2{margin-bottom:18px}
.c-open{margin-top:clamp(36px,4vw,56px);padding:clamp(24px,3vw,36px);background:var(--tile-2)}
.c-open .c-list{margin:0}
.c-list{display:grid;gap:10px;margin:0 0 16px}
.c-list li{position:relative;padding-left:22px}
.c-list li::before{content:"";position:absolute;left:3px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--mute)}
.c-links{margin-top:clamp(36px,4vw,56px)}
.c-links .c-ph2{margin-bottom:6px}
.c-links ul{border-top:1px solid var(--line)}
.c-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;border-bottom:1px solid var(--line);font:600 19px/1.3 var(--f-display);letter-spacing:-.014em;color:var(--text);text-decoration:none;transition:color .2s}
.c-links a:hover{color:var(--link)}
.c-links .ico{width:18px;height:18px;color:var(--mute);transition:transform .25s var(--ease-out)}
.c-links a:hover .ico{transform:translateX(3px)}

/* ---------- forms: choices are rounded-rect tiles (chosen = blue outline and a faint blue wash), fields are the base v4 fields ---------- */
.c-form{color-scheme:dark}
.c-fgrid,.c-sell-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:clamp(28px,4.4vw,76px);align-items:start}
.c-fmain,.c-form-col{min-width:0}
.c-q{min-width:0}
.c-q+.c-q{margin-top:clamp(36px,4.4vw,60px);padding-top:clamp(36px,4.4vw,60px);border-top:1px solid var(--line)}
.c-q-h{margin:0 0 22px;font:600 clamp(24px,2.4vw,32px)/1.15 var(--f-display);letter-spacing:-.022em;color:var(--text)}
.c-q-h-sm{margin-bottom:18px;font-size:clamp(22px,2vw,28px)}
.c-tabs{display:none;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.js .c-tabs{display:flex}
.c-tabs .chip{min-height:48px;padding:0 20px;font-size:17px}
.js .c-group:not(.is-on){display:none}
.js .c-group-title{display:none}
.c-group+.c-group{margin-top:26px}
.c-group-title{margin-bottom:12px}
.c-chips{display:flex;flex-wrap:wrap;gap:8px}
.c-chip,.c-opt{position:relative;display:flex}
.c-chip input,.c-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.c-chip span{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-m);font:400 16px/1.2 var(--f-sans);letter-spacing:-.011em;transition:border-color .2s,box-shadow .2s,background-color .2s,transform .12s}
.c-chip:hover span,.c-opt:hover .c-opt-in{border-color:rgba(255,255,255,.5)}
.c-chip:active span,.c-opt:active .c-opt-in{transform:scale(.98)}
.c-chip input:checked+span,.c-opt input:checked+.c-opt-in{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:rgba(47,107,255,.08)}
.c-chip input:focus-visible+span,.c-opt input:focus-visible+.c-opt-in{outline:2px solid var(--link);outline-offset:3px}
.c-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:12px}
.c-opts-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.c-opt-in{display:flex;flex-direction:column;gap:6px;width:100%;min-height:108px;padding:18px 18px 16px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-m);transition:border-color .2s,box-shadow .2s,background-color .2s,transform .12s}
.c-opt-in .ico{width:28px;height:28px;margin-bottom:10px;stroke-width:1.6;color:var(--link)}
.c-opt-in b{font:600 18px/1.22 var(--f-display);letter-spacing:-.014em;color:var(--text)}
.c-opt-in small{font:400 14px/1.4 var(--f-sans);color:var(--soft)}
.c-hint{margin-top:14px;font-size:14px;line-height:1.5;color:var(--mute)}
.c-fine{margin-top:14px;font-size:13px;line-height:1.5;color:var(--mute)}
.c-gap-l{margin-top:22px}
.c-gap-m{margin-top:18px}
.c-dtile{padding:clamp(24px,2.6vw,36px)}
.c-sum{margin:0 0 20px}
.c-sum>div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.35}
.c-sum dt{color:var(--mute)}
.c-sum dd{margin:0;text-align:right;font-weight:600;color:var(--text)}
.c-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:22px}
.c-fields-3{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:0}
.c-fields .c-wide{grid-column:1/-1}
.c-dtile .c-fields{grid-template-columns:minmax(0,1fr)}
.c-form .select{-webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer;background:var(--tile-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px}
.c-form .select option{background:#1d1d1f;color:var(--text)}
.c-form .input,.c-form .select,.c-form .textarea{background-color:var(--tile-2)}
.c-form .input::placeholder,.c-form .textarea::placeholder{font-size:15px;opacity:1}
.c-form .input{text-overflow:ellipsis}
.c-file{min-height:56px;padding:10px 12px;color:var(--soft)}
.c-file::file-selector-button{margin-right:14px;padding:10px 16px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-s);background:none;color:var(--text);font:500 15px/1 var(--f-sans);cursor:pointer;transition:border-color .2s}
.c-file::file-selector-button:hover{border-color:var(--text)}
.c-form .form-note{margin-top:14px}
.c-form .form-note:not(:empty){padding:12px 14px;border-radius:var(--r-m);background:rgba(47,107,255,.12);color:var(--text)}
.c-form [type=submit]{min-height:52px}
.c-side{display:grid;gap:12px}
.c-side-tile{display:grid;align-content:start;justify-items:start;gap:14px;padding:clamp(26px,2.8vw,40px)}
.c-side-tile.is-2{background:var(--tile-2)}
.c-side-h{font:600 clamp(22px,2vw,28px)/1.15 var(--f-display);letter-spacing:-.02em;color:var(--text)}
.c-side-p{font-size:17px;line-height:1.45;color:var(--soft)}
@media (min-width:981px) and (min-height:980px){
  .c-fside,.c-side{position:sticky;top:calc(var(--head) + 20px)}
}

/* if GSAP is missing, the page script falls back to IntersectionObserver and these classes */
.motion .c-pre{opacity:0;transform:translateY(28px)}
.motion .c-pre.c-in{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}

/* split-flap digits (the "1 to 2", the 12 and the 25 flip in like an airport board) */
.fl-w{display:inline-block;perspective:420px}
.fl{display:inline-block;min-width:.56em;transform-origin:50% 54%;backface-visibility:hidden}

/* ---------- tablet and phone ---------- */
@media (max-width:1200px){
  .c-steps-5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .c-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-facts-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .c-steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .c-gh-dl .c-fact{grid-template-columns:minmax(0,1fr)}
  .c-feat,.c-abt{grid-template-columns:minmax(0,1fr);min-height:0}
  .c-days-copy,.c-tell-copy{padding-bottom:0}
  .c-feat-ph{height:clamp(320px,62vw,460px);margin-top:12px}
  .c-ph{height:clamp(300px,56vw,420px)}
  .c-abt-media{min-height:clamp(320px,70vw,520px)}
  .c-fgrid,.c-sell-grid{grid-template-columns:minmax(0,1fr)}
  .c-split{grid-template-columns:minmax(0,1fr)}
  .c-split-head{position:static}
  .c-duo{grid-template-columns:minmax(0,1fr)}
  .c-duo-photo{min-height:clamp(380px,80vw,560px)}
  .c-doc-grid{grid-template-columns:minmax(0,1fr)}
  .c-toc{position:static}
  .c-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .c-grades{grid-template-columns:minmax(0,1fr)}
  .c-cv,.c-cv.is-not{grid-column:1/-1}
  .c-gal .c-photo-tile,.c-gal .c-photo-tile:last-child{grid-column:1/-1}
  .c-ct,.c-ct-call{grid-column:1/-1;grid-row:auto;min-height:220px}
  .c-ct-call{min-height:300px}
  .c-big{flex-direction:column;align-items:flex-start;gap:8px}
  .c-big-t{max-width:none}
}
@media (max-width:900px){
  .c-mos .c-mt,.c-mos-3 .c-mt:first-child,.c-mos-4 .c-mt:nth-child(n){grid-column:1/-1;min-height:clamp(280px,56vw,380px)}
  .c-mos-3 .c-mt.is-phones{min-height:420px}
  .c-mt.is-phones .c-mt-text{max-width:min(23em,56%)}
}
@media (max-width:760px){
  .c-picks{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);margin:0 calc(var(--pad) * -1);padding:4px var(--pad) 18px;scrollbar-width:none}
  .c-picks::-webkit-scrollbar{display:none}
  .c-pick{flex:0 0 min(74vw,290px);scroll-snap-align:start}
  .c-stage{padding:0 8px}
  .c-tile,.c-mt{border-radius:var(--r-l)}
  .c-steps-3,.c-steps-4,.c-steps-5{grid-template-columns:minmax(0,1fr);gap:0}
  .c-st{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:10px;padding:22px 0 26px}
  .c-sn{grid-row:1/3;font-size:56px}
  .c-st-t{margin-top:6px}
  .c-sheet{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--r2,13),auto);column-gap:20px}
  .c-sheet li{min-height:64px;gap:10px;font-size:16px}
  .c-fields,.c-fields-3{grid-template-columns:minmax(0,1fr)}
  .c-opts-2{grid-template-columns:minmax(0,1fr)}
  .c-dl{grid-template-columns:minmax(0,1fr)}
  .c-cols-4{grid-template-columns:minmax(0,1fr)}
  .c-facts-4{grid-template-columns:minmax(0,1fr)}
  .c-toc ol{grid-template-columns:minmax(0,1fr)}
  .c-map-box{min-height:380px}
  .c-ct-call .c-ct-v{white-space:normal}
  .c-mt.is-phones .c-mt-text{max-width:100%}
  .c-mt.is-phones .c-phones{top:52%;left:0;right:0;justify-content:center;bottom:-24%}
  .c-mt.is-phones{min-height:480px}
  .c-faq .a{padding-right:8px}
}
@media (max-width:520px){
  .c-actions{gap:14px 22px}
  .c-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-days-n{font-size:clamp(96px,30vw,150px)}
  .c-gr-dl div{grid-template-columns:84px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .c-ph,.c-mt-pic img{transition:none}
  .c-mt:hover .c-mt-pic img{transform:scale(1.06)}
}