/* TishTush — hero standard (2026-10-27): #07090C ground, copper #D4946C only accent,
   IBM Plex, type is the design. No cards, no gradients, no green, no purple.
   Gold lives only in the wordmark image.
   Nike-top pass (2026-10-27): homepage opens image-first (poster slide),
   slim header chrome, open menu floats as an overlay panel.
   Poster-center pass (2026-10-27): slide-1 text block centered; poster
   headline set in self-hosted IBM Plex Sans Condensed Bold, uppercase.
   Signup-login pass (2026-10-27): slide-1 ask is now two pills —
   "Sign up" + "Log in" ("Book the job" superseded).
   Login-signup pass (2026-10-27, later): owner refined the row order —
   "Log in" first (compact outline), then "Sign up" (wide black, dominant),
   the row spanning the full poster width. Stylesheet renamed to
   style-48.css so no warm cache can pair new HTML with old styling.
   Final-row framing pass (2026-10-27): Sophie's poster photo is reframed
   wider — a higher mobile photo share and a crop anchored nearer the top
   of the source portrait — so her head, shoulders, and blazer stay in
   frame at every phone height. Stylesheet renamed to style-49.css so no
   warm cache can pair new HTML with old styling.
   Jacket pass (2026-10-27, later still): the owner, on his phone, still
   saw the poster cropped at Sophie's upper chest — "I want to see her
   jacket." The final-row NUMBERS said torso visible; his eyes said
   sliver. The poster photo row is now minmax(0,1fr) against an auto type
   row (the photo takes every pixel the type doesn't), the crop anchor
   drops to center 16%, short phones compact the type harder and the
   dots strip narrows to 60px, so at EVERY height the rendered band
   shows the full head with headroom, the shoulders, and the cream
   jacket plainly across its bottom quarter. Same pass: slide 1 drops
   the Log in pill — two buttons was an issue; ONE wide black "Sign up"
   pill remains (the header menu keeps its own Log in). And the
   one-portrait rule lands: Sophie's face appears exactly once on the
   homepage (this poster); the booking band now shows a front-desk
   scene and the sale band a counter scene. Stylesheet renamed to
   style-50.css so no warm cache can pair new HTML with old styling.
   QR-slide pass (2026-10-27, later): the owner, on the customer pay
   card: "Make a slide." A fourth hero slide joins the slider, LAST —
   the "Scan to Pay" card on the dark stage, headline "Paid on the
   spot." + one line (scan → portal → invoice; no settlement or
   Apple Pay claims). Dots 3 → 4; the on-bright dot treatment now
   keys to the two bright slides (indices 0 and 2), the dark QR
   slide taking the standard copper dots. Slide 1 untouched.
   Stylesheet renamed to style-51.css so no warm cache can pair new
   HTML with old styling.
   QR-slide-2 pass (2026-10-27, later): the owner corrected the slide
   twice — "Instead of slide 2." then "Sign up." The QR slide REPLACES
   the black type-only hero slide at position 2 (that slide is removed
   entirely; the slider is 3 slides: poster / QR / video), and its
   visual is the SIGNUP card ("Get Started Today!", payload
   tel:+17432009809 — scan → call → Sophie signs them up), NOT the pay
   card, which no longer appears on the homepage. Headline "Get
   started today."; the line is Sophie's official line verbatim. The
   on-bright keys stay at indices 0 and 2 (bright poster + bright
   video), the dark QR slide at index 1 takes copper dots, and the
   video's play index stays 2 — the script needed no change. The card
   is presented as large as the composition allows (wider media
   column on desktop; full-bleed, edge-to-edge on phones) from the
   full-resolution 2200×1120 PNG, byte-identical, no re-encode — the
   owner's gate: "Is it scannable? Increase quality." The QR ON THE
   SLIDE must decode from the final renders (ZXing + OpenCV →
   tel:+17432009809); the proof table lives in SITE-SPEC.md.
   Stylesheet renamed to style-52.css so no warm cache can pair new
   HTML with old styling.
   Leads-slide pass (2026-10-27, later): a FOURTH hero slide joins the
   slider, LAST — "Better leads. More jobs." for garage door companies,
   over an original generated scene (hand + phone showing a booked job,
   technician and van soft behind). Form stolen from a competitor ad
   the owner approved; copy, brand and image are ours. The slide is a
   DARK slide (index 3): on-bright keys stay at indices 0 and 2, so it
   takes the standard copper dots; the video's play index stays 2 and
   the script needed no change (it is generic over slides.length).
   One ask: "Start your first month — $20" → the signup page. No
   ratings, no review counts, no lead promises anywhere on the slide.
   Stylesheet renamed to style-53.css so no warm cache can pair new
   HTML with old styling. */
:root{
  --bg:#07090C; --raised:#0E1217; --raised2:#12181F;
  --ink:#F2EDE8; --muted:#B9B2A9; --faint:#8B95A1;
  --copper:#D4946C; --copper-ink:#14100C; --line:#232B34; --cream:#F6F1EA;
  --wrap:1240px; --hh:52px; --dots-safe:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
/* Self-hosted poster face — IBM Plex Sans Condensed Bold, SIL OFL 1.1
   (license: fonts/LICENSE-IBM-Plex.txt). Slide 1's headline only; no
   external font request at runtime for this face. */
@font-face{
  font-family:"IBM Plex Sans Condensed";
  src:url("fonts/ibm-plex-sans-condensed-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
a{color:var(--copper)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--copper); outline-offset:3px; border-radius:4px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:40; background:rgba(7,9,12,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.header-in{display:flex; align-items:center; gap:20px; min-height:var(--hh); padding-top:4px; padding-bottom:4px; position:relative}
.brand{display:flex; align-items:center; text-decoration:none; flex:none}
.brand img{height:38px; width:auto}
.nav-toggle{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; appearance:none; -webkit-appearance:none; clip-path:inset(50%); overflow:hidden; white-space:nowrap}
.menu-btn{
  display:none; margin-left:auto; cursor:pointer; user-select:none;
  border:1.5px solid var(--line); color:var(--ink); border-radius:999px;
  padding:7px 16px; font-weight:600; font-size:14.5px; min-height:40px; align-items:center;
}
.nav-toggle:focus-visible ~ .menu-btn{outline:3px solid var(--copper); outline-offset:3px}
.navpanel{display:contents}
nav.main{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap; align-items:center}
nav.main a{
  color:var(--muted); text-decoration:none; font-size:15.5px; font-weight:500;
  padding:8px 11px; border-radius:999px; min-height:40px; display:inline-flex; align-items:center;
}
nav.main a:hover{color:var(--ink); background:var(--raised)}
nav.main a[aria-current="page"]{color:var(--copper)}
.header-actions{display:flex; gap:10px; align-items:center; flex:none}
/* Button system (2026-10-29, founder: the uniform copper pill is
   hated and gone — every button carries its own variant; no two
   peer buttons on a screen share a style). .btn is layout only. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:16.5px;
  padding:15px 30px; text-decoration:none; cursor:pointer;
  min-height:54px; line-height:1.2; text-align:center;
  background:#101216; color:var(--ink); border:1px solid #2A2F38; border-radius:12px;
}
.btn:hover{background:#1A1E24; text-decoration:none}
.btn.small{padding:10px 20px; min-height:44px; font-size:15px}
.btn.b-cream{background:var(--cream); color:#14100C; border:1.5px solid var(--cream); border-radius:4px}
.btn.b-cream:hover{background:#FFFFFF; border-color:#FFFFFF}
.btn.b-line{background:transparent; color:var(--ink); border:1.5px solid var(--ink); border-radius:999px; text-transform:uppercase; letter-spacing:.08em; font-size:.92em}
.btn.b-line:hover{background:var(--ink); color:#14100C}
.btn.b-cline{background:transparent; color:var(--copper); border:1.5px solid var(--copper); border-radius:12px}
.btn.b-cline:hover{background:rgba(212,148,108,.12)}
.btn.b-block{background:var(--copper); color:var(--copper-ink); border:1.5px solid var(--copper); border-radius:2px; box-shadow:5px 5px 0 rgba(0,0,0,.85)}
.btn.b-block:hover{background:#E0A87E; border-color:#E0A87E; transform:translate(-1px,-1px); box-shadow:6px 6px 0 rgba(0,0,0,.85)}
.btn.b-under{background:transparent; color:var(--copper); border:0; border-radius:0; padding-left:4px; padding-right:4px; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px}
.btn.b-under:hover{color:#E0A87E; background:transparent}
.btn.b-rail{background:var(--raised); color:var(--copper); border:1px solid var(--line); border-bottom:3px solid var(--copper); border-radius:10px}
.btn.b-rail:hover{color:#E0A87E; border-bottom-color:#E0A87E; background:var(--raised)}
.btn.b-chip{background:transparent; color:var(--ink); border:1px solid var(--ink); border-radius:6px; text-transform:uppercase; letter-spacing:.1em; font-size:12.5px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:500}
.btn.b-chip:hover{background:var(--ink); color:#14100C}
.btn.b-band{background:transparent; color:var(--copper); border:0; border-top:2px solid var(--copper); border-bottom:2px solid var(--copper); border-radius:0; text-transform:uppercase; letter-spacing:.06em}
.btn.b-band:hover{background:rgba(212,148,108,.1)}
.btn.b-text{background:transparent; color:var(--muted); border:0; border-radius:999px}
.btn.b-text:hover{color:var(--ink); background:var(--raised)}
.btn.ghost{background:transparent; color:var(--copper); border:1.5px solid var(--copper); border-radius:12px}
.btn.ghost:hover{background:rgba(212,148,108,.12)}

/* ---------- type system ---------- */
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--copper); margin:0 0 22px; display:flex; align-items:center; gap:16px;
}
.eyebrow::before{content:""; width:38px; height:2px; background:var(--copper); flex:none}
h1.page, .display{
  font-size:clamp(44px,6.8vw,88px); line-height:1.0; letter-spacing:-.028em;
  font-weight:700; margin:0 0 20px; text-wrap:balance;
}
h1.page .accent, .display .accent{color:var(--copper)}
.lede{font-size:clamp(18.5px,1.7vw,21.5px); color:var(--muted); margin:0 0 30px; max-width:38em; line-height:1.5}
.line{font-size:clamp(18px,1.6vw,21px); color:var(--muted); margin:0; max-width:36em; line-height:1.5}
.line b, .lede b{color:var(--ink); font-weight:600}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:34px}
.cta-note{color:var(--faint); font-size:15.5px; margin:14px 0 0}
section{padding:clamp(84px,11vw,150px) 0}
section + section{border-top:1px solid var(--line)}
h2.display{font-size:clamp(40px,6vw,80px)}
.more-link{font-weight:600; font-size:17px; text-decoration:none}
.more-link:hover{text-decoration:underline}

/* ---------- hero slider (index) ---------- */
.slider{position:relative; overflow:hidden; background:var(--bg)}
.slides{display:flex}
.slide{
  min-width:100%; height:calc(100svh - var(--hh)); min-height:540px;
  position:relative; display:flex; align-items:center; overflow:hidden;
  /* The bottom strip belongs to the slider dots alone: slide content is
     laid out in the box above it and can never reach the dot row. */
  padding-bottom:var(--dots-safe);
}
.slide-media{position:absolute; inset:0; z-index:0}
.slide-media img, .slide-media video{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* bright slides (2 & 3) — Nike photo-slide grammar: white ground, black type,
   black pill. The contrast against the near-black hero slide is the point. */
.slide-bright{background:#FFFFFF; color:#111111; display:grid; grid-template-columns:1fr 1fr; align-items:stretch}
.slide-bright .bright-media{position:relative; overflow:hidden}
.slide-bright .bright-media img, .slide-bright .bright-media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.slide-bright .bright-in{
  align-self:center; padding:clamp(28px,4.5vw,72px); max-width:640px;
}
.slide-bright .bright-in .eyebrow{color:#111111}
.slide-bright .slide-line{color:#3D3D3D}
.slide-bright .slide-h{font-size:clamp(42px,6.4vw,92px)}
.slide-bright .bright-media img.sophie{object-position:center 20%}
.btn.dark{background:#111111; border-color:#111111; color:#FFFFFF; border-radius:12px}
.btn.dark:hover{background:#2B2B2B; border-color:#2B2B2B}
/* QR signup slide (homepage slide 2) — Nike grammar on the dark stage:
   the get-started card IS the visual, presented large and clean; one headline,
   one short line, copper the only accent. The card's own ground is
   #07090C with transparent corners, so it sits on the stage seamlessly. */
.slide-qr{background:var(--bg); color:var(--ink)}
.slide-qr-in{
  position:relative; z-index:2; width:100%;
  display:grid; grid-template-columns:.84fr 1.16fr; gap:clamp(30px,4vw,56px);
  align-items:center;
}
.qr-media img{width:100%; height:auto; display:block}
.qr-card-link{display:block; -webkit-tap-highlight-color:transparent}
.qr-card-link:active{opacity:.92}
.qr-tap-hint{
  margin:12px 0 0; text-align:center; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--copper);
}
.slide-qr .slide-line{margin-bottom:0}
/* leads slide (homepage slide 4) — full-bleed original scene, live type
   over the photograph's dark left half; one copper ask. A scrim (not a
   card) holds the type's contrast while staying honest to the photo. */
.slide-leads{background:var(--bg); color:var(--ink)}
.slide-leads::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(7,9,12,.90) 0%, rgba(7,9,12,.72) 34%, rgba(7,9,12,.18) 62%, rgba(7,9,12,0) 78%);
}
.slide-leads-in{position:relative; z-index:2; width:100%}
.slide-leads .slide-h{max-width:8em}
.slide-leads .slide-line{max-width:25em}
   two-pill row): ONE pill — "Sign up", black, flex-grown to the full
   poster content width, the width the single wide pill owned in the
   reference render. The owner: "For two buttons is an issue — have
   only the sign-up button." Log in lives in the header menu only. */
.poster-cta{display:flex; gap:12px; justify-content:center; align-items:stretch; flex-wrap:nowrap; width:100%}
.poster-cta .poster-signup{flex:1 1 auto}
.btn.outline-dark{background:transparent; color:#111111; border:1.5px solid #111111}
.btn.outline-dark:hover{background:rgba(17,17,17,.08); border-color:#111111; text-decoration:none}
/* poster slide (homepage slide 1) — Nike grammar: the photo IS the first
   screen, full-bleed edge to edge; poster headline on the bright ground;
   one short line; ONE black pill. Nothing else competes on the slide. */
.slide-poster{
  background:#F6F1EA; color:#111111;
  display:grid; grid-template-columns:1.08fr .92fr; align-items:stretch;
}
.poster-media{position:relative; overflow:hidden}
.poster-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 16%; display:block;
}
.poster-in{
  align-self:center; justify-self:center; text-align:center;
  padding:clamp(28px,4.5vw,72px); max-width:720px;
}
.poster-h{
  font-family:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(76px,8.8vw,164px); line-height:.94; letter-spacing:-.01em;
  font-weight:700; margin:0 0 20px; text-wrap:balance; color:#111111;
  text-transform:uppercase;
}
.poster-h .accent{color:#9C5A2E}
.poster-line{
  font-size:clamp(18.5px,1.9vw,22.5px); color:#3D3D3D;
  max-width:24em; margin:0 auto 30px; line-height:1.45;
}
.slider.on-bright .dots button{border-color:#111111}
.slider.on-bright .dots button[aria-current="true"]{background:#111111}
.slide-in{position:relative; z-index:2; width:100%; padding-top:30px; padding-bottom:16px}
.poster-media, .poster-in, .slide-bright .bright-media, .slide-bright .bright-in{min-height:0}
.slide-1{
  background-color:var(--bg);
  background-image:linear-gradient(90deg, rgba(242,237,232,.05) 1px, transparent 1px);
  background-size:calc(100%/6) 100%;
}
.hero-h1{
  font-size:clamp(54px,12.6vw,148px); line-height:.97; letter-spacing:-.032em;
  font-weight:700; margin:0 0 26px; text-wrap:balance;
}
.hero-h1 .accent{color:var(--copper)}
.hero-sub{font-size:clamp(18.5px,2vw,23px); color:var(--muted); max-width:30em; margin:0 0 32px; line-height:1.45}
.slide-h{
  font-size:clamp(46px,9.4vw,118px); line-height:.98; letter-spacing:-.03em;
  font-weight:700; margin:0 0 18px; text-wrap:balance;
}
.slide-h .accent{color:var(--copper)}
.slide-line{font-size:clamp(18px,1.9vw,22px); color:#E8E2DA; max-width:26em; margin:0 0 30px; line-height:1.45}
.status{
  display:block; margin-top:28px;
  font-size:15px; color:var(--muted); max-width:34em;
}
.status b{color:var(--copper); font-weight:600}
html.js .slides{transition:transform .65s cubic-bezier(.22,.61,.21,1)}
html:not(.js) .slides{flex-direction:column}
html:not(.js) .slide{height:auto; min-height:0; padding:70px 0}
.dots{
  position:absolute; left:50%; transform:translateX(-50%); bottom:27px; z-index:6;
  display:none; gap:8px;
}
html.js .dots{display:flex}
.dots button{
  width:9px; height:9px; border-radius:999px; border:1.5px solid var(--copper);
  background:transparent; padding:0; cursor:pointer; transition:all .3s;
}
.dots button[aria-current="true"]{background:var(--copper); width:30px}
.dots button:focus-visible{outline:3px solid var(--copper); outline-offset:3px}
/* ---------- full-screen stills (index, below the slider) ---------- */
.still{
  min-height:100svh; display:flex; align-items:center; position:relative;
  overflow:hidden; padding:96px 0; border-top:1px solid var(--line);
}
.still-in{position:relative; z-index:2; width:100%}
.still-h{
  font-size:clamp(44px,7.4vw,104px); line-height:.99; letter-spacing:-.03em;
  font-weight:700; margin:0 0 20px; text-wrap:balance;
}
.still-h .accent{color:var(--copper)}
.still .say{
  font-size:clamp(20px,2.2vw,26px); color:var(--ink); max-width:30em; margin:0 0 8px; line-height:1.4;
}
.still-media{position:absolute; inset:0; z-index:0}
.still-media img, .still-media video{width:100%; height:100%; object-fit:cover; display:block}
.still-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(7,9,12,.86) 0%, rgba(7,9,12,.38) 52%, rgba(7,9,12,.30) 100%);
}
.still-media img{object-position:center 30%}
.still-pro{background:var(--raised)}
/* inner Pro slider */

/* ---------- Nike continuation: homepage below the slider ----------
   The type is the design: one idea, one line, hairline rules, negative
   space, and media shown full-width instead of trapped behind copy. */
.nike-section{
  padding:clamp(104px,13vw,184px) 0;
  border-top:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.nike-section .eyebrow{margin-bottom:30px}
.nike-h{
  font-size:clamp(40px,7vw,88px); line-height:.98; letter-spacing:-.032em;
  font-weight:700; margin:0 0 24px; text-wrap:balance;
}
.nike-line{
  font-size:clamp(19px,2vw,23px); line-height:1.45; color:var(--muted);
  margin:0; max-width:34em;
}
.nike-line b{color:var(--ink); font-weight:600}
/* photo-behind sections (2026-10-29 founder rule: every section carries a
   photo behind its copy). The photo stays bright up top — the shade gathers
   only where the words sit, the way the deck's leads slide does it. */
.nike-bg{display:flex; flex-direction:column; justify-content:flex-end; min-height:96svh}
.sec-bg{position:absolute; inset:0; z-index:0; background:#000}
.sec-bg img{width:100%; height:100%; object-fit:cover; display:block}
.nike-bg::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,9,12,.10) 0%, rgba(7,9,12,.22) 42%, rgba(7,9,12,.86) 74%, rgba(7,9,12,.97) 100%);
}
.nike-bg .wrap{position:relative; z-index:2; width:100%; min-width:0}
/* face sections (install + counter): the shade gathers earlier so the
   headline never sits on a face — eyes stay in the bright zone, the
   words land in the dark one. */
.nike-bg.bgface{min-height:115svh}
.nike-bg.bgface::after{
  background:linear-gradient(180deg, rgba(7,9,12,.08) 0%, rgba(7,9,12,.16) 32%, rgba(7,9,12,.80) 54%, rgba(7,9,12,.96) 76%, rgba(7,9,12,.98) 100%);
}
/* the Pro section runs tall (intro + carousel): a deeper shade overall so
   every mini slide stays readable over the scene. */
.nike-pro.nike-bg::after{
  background:linear-gradient(180deg, rgba(7,9,12,.34) 0%, rgba(7,9,12,.44) 45%, rgba(7,9,12,.78) 78%, rgba(7,9,12,.94) 100%);
}
.bg-call img{object-position:center 28%}
.bg-install img{object-position:center 45%}
.bg-counter img{object-position:center 45%}
.bg-close img{object-position:center 32%}
.nike-close .nike-line{font-size:clamp(21px,2.4vw,28px)}

/* ---------- statements ---------- */
.statement{
  display:grid; grid-template-columns:110px 1fr; gap:10px 34px;
  padding:clamp(52px,7vw,84px) 0; border-top:1px solid var(--line);
}
.statement:first-child{border-top:none; padding-top:6px}
.statement .idx{
  font-family:"IBM Plex Mono",monospace; color:var(--copper); font-size:15px;
  letter-spacing:.18em; padding-top:clamp(12px,1.6vw,22px);
}
.statement h3{
  font-size:clamp(38px,5.6vw,72px); line-height:1.0; letter-spacing:-.026em;
  font-weight:700; margin:0 0 14px; text-wrap:balance;
}
.statement p{font-size:clamp(18px,1.6vw,21px); color:var(--muted); margin:0; max-width:34em; line-height:1.5}
.statement p b{color:var(--ink); font-weight:600}

/* ---------- faces ---------- */
.faces{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px)}
.face figure{margin:0 0 24px}
.face img{width:100%; aspect-ratio:1; object-fit:cover}
.face .role{
  font-family:"IBM Plex Mono",monospace; font-size:13px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--copper); margin:0 0 10px;
}
.face h3{font-size:clamp(34px,4vw,54px); line-height:1.02; letter-spacing:-.024em; margin:0 0 12px; font-weight:700}
.face p{color:var(--muted); font-size:18.5px; margin:0 0 12px; max-width:26em; line-height:1.5}
.face .mins{font-family:"IBM Plex Mono",monospace; font-size:14px; color:var(--faint); letter-spacing:.04em; margin:0 0 16px}

/* ---------- full-bleed media ---------- */
.bleed{width:100%; margin:0}
.bleed img{width:100%; height:auto}
.bleed.tall img{aspect-ratio:16/8.4; object-fit:cover; object-position:center 38%}
video.ph{width:100%; background:#000; display:block}

/* ---------- plain rows & columns (no cards) ---------- */
.cols{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.6vw,48px)}
.col{border-top:2px solid var(--copper); padding-top:20px}
.col .tag{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--copper); display:block; margin-bottom:12px;
}
.col h3{font-size:23px; margin:0 0 10px; letter-spacing:-.01em}
.col p{color:var(--muted); margin:0; font-size:17px}
ul.lines{list-style:none; padding:0; margin:0}
ul.lines li{
  padding:15px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:18px;
}
ul.lines li:first-child{padding-top:2px}
ul.lines li b{color:var(--ink); font-weight:600}
.rows{border-top:1px solid var(--line)}
.row-item{
  display:grid; grid-template-columns:220px 1fr; gap:8px 40px;
  padding:30px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.row-item .tag{
  font-family:"IBM Plex Mono",monospace; font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--copper);
}
.row-item h3{font-size:clamp(24px,2.8vw,34px); margin:0 0 8px; letter-spacing:-.018em}
.row-item p{color:var(--muted); margin:0; font-size:18px; max-width:38em}
.row-item p + p{margin-top:8px}

/* ---------- split (services) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4.5vw,64px); align-items:center}
.split .ph{width:100%; aspect-ratio:1; object-fit:cover}
.split.flip .split-media{order:2}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:1fr 1fr 1fr; gap:clamp(26px,3.6vw,48px); align-items:start}
.plan{border-top:1px solid var(--line); padding-top:24px; display:flex; flex-direction:column}
.plan.pro{border-top:2px solid var(--copper)}
.plan .tag{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--copper); display:block; margin-bottom:14px;
}
.plan .amount{font-size:clamp(54px,5.6vw,78px); font-weight:700; letter-spacing:-.03em; line-height:1; margin:0 0 6px}
.plan .amount .per{font-size:.38em; color:var(--faint); font-weight:600; letter-spacing:0}
.plan .per-line{color:var(--faint); font-size:15.5px; margin:0 0 20px}
.plan ul.lines{margin-bottom:26px}
.plan ul.lines li{font-size:16.5px; padding:12px 0}
.plan .btn{margin-top:auto; align-self:flex-start}
.fineprint{color:var(--faint); font-size:15px; max-width:62em; margin-top:34px}
table.fees{width:100%; border-collapse:collapse; margin:10px 0 6px}
table.fees th, table.fees td{
  text-align:left; padding:20px 16px 20px 0; border-bottom:1px solid var(--line); vertical-align:top;
  font-size:17.5px;
}
table.fees th{color:var(--ink); font-weight:600; width:30%; font-size:19px}
table.fees td{color:var(--muted)}
.example-num{color:var(--ink); font-weight:700}

/* ---------- faq ---------- */
details{border-top:1px solid var(--line); padding:2px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{
  cursor:pointer; font-weight:600; font-size:clamp(21px,2.5vw,29px); letter-spacing:-.015em;
  padding:26px 40px 26px 0; min-height:44px; list-style:none; position:relative;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  color:var(--copper); font-weight:400; font-size:30px;
}
details[open ] summary::after{content:"–"}
details p{color:var(--muted); margin:0 0 28px; max-width:44em; font-size:18px; line-height:1.55}

/* ---------- closing / end cta ---------- */
.closing h2{
  font-size:clamp(42px,6.6vw,86px); line-height:1.0; letter-spacing:-.028em;
  font-weight:700; margin:0 0 20px; text-wrap:balance;
}
.closing p.say{
  font-size:clamp(20px,2.2vw,26px); color:var(--ink); max-width:30em; margin:0 0 8px; line-height:1.4;
}
.endcta h2{
  font-size:clamp(38px,5.6vw,72px); line-height:1.0; letter-spacing:-.026em;
  font-weight:700; margin:0 0 16px; text-wrap:balance;
}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line); padding:52px 0 48px}
.footer-grid{display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start}
footer.site .footer-grid img{height:48px; width:auto; border-radius:6px}
footer.site nav{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto}
footer.site nav a{
  color:var(--muted); text-decoration:none; padding:10px 12px; font-size:15.5px;
  min-height:44px; display:inline-flex; align-items:center; border-radius:999px;
}
footer.site nav a:hover{color:var(--ink)}
.foot-note{color:var(--faint); font-size:14.5px; margin-top:26px; max-width:72em}
.big-call{
  font-size:clamp(38px,8vw,92px); font-weight:700; letter-spacing:-.03em; line-height:1.05; margin:10px 0 14px;
}
.big-call a{text-decoration:none; color:var(--ink)}
.big-call a:hover{color:var(--copper)}

@media (max-width:1020px){
  .cols,.plans{grid-template-columns:1fr; gap:38px}
  .plan .btn{align-self:stretch}
}
@media (max-width:900px){
  .faces,.split{grid-template-columns:1fr}
  .split.flip .split-media{order:0}
  .statement{grid-template-columns:1fr; gap:2px}
  .statement .idx{padding-top:0}
  .row-item{grid-template-columns:1fr; gap:4px}
  .menu-btn{display:inline-flex}
  .navpanel{
    display:none; position:absolute; top:calc(100% + 10px); left:12px; right:12px;
    background:var(--raised); border:1px solid var(--line); border-radius:18px;
    box-shadow:0 26px 60px rgba(0,0,0,.55);
    padding:14px 18px 16px; flex-direction:column; align-items:stretch; gap:4px;
  }
  .nav-toggle:checked ~ .navpanel{display:flex}
  nav.main{margin-left:0; flex-direction:column; align-items:stretch; gap:0}
  nav.main a{padding:11px 6px; font-size:17px; border-radius:0; border-bottom:1px solid var(--line)}
  nav.main a:last-child{border-bottom:0}
  .header-actions{flex-direction:column; align-items:flex-start; gap:10px; margin-top:12px; padding-top:14px; border-top:1px solid var(--line)}
  section{padding:76px 0}
  .slide{min-height:480px}
  /* The photo row takes every pixel the type row doesn't (1fr / auto):
     no fixed share can starve the jacket again at an in-between height. */
  .slide-poster{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto}
  .poster-in{align-self:start; padding:16px 24px 14px}
  .poster-h{font-size:clamp(54px,15vw,92px); margin-bottom:12px}
  .poster-line{margin-bottom:18px}
  .slide-bright{grid-template-columns:1fr; grid-template-rows:44% 56%}
  .slide-bright .bright-media{order:-1}
  .slide-bright .bright-in{order:0; align-self:start; padding:26px 24px 16px}
  .slide-qr-in{grid-template-columns:1fr; gap:20px; align-content:center; padding-left:0; padding-right:0}
  .slide-qr .qr-copy{padding:0 24px}
  .slide-qr .qr-media{padding:0}
  .slide-leads{align-items:flex-end}
  .slide-leads .slide-media img{object-position:64% center}
  .slide-leads::after{background:linear-gradient(0deg, rgba(7,9,12,.95) 0%, rgba(7,9,12,.86) 52%, rgba(7,9,12,.45) 78%, rgba(7,9,12,.18) 100%)}
  .slide-leads-in{padding-bottom:24px}
  .bleed.tall img{aspect-ratio:4/4.6; object-position:center 30%}
}
@media (max-width:900px) and (max-height:760px){
  /* Short phones (and short in-app browsers): the dots strip narrows to
     60px (the dots themselves occupy 27–36px from the bottom, so the
     clearance stays wide) and the poster type compacts hard — smaller
     headline, tighter line, lower pill — so the 1fr photo row grows
     until the jacket is plainly across the bottom of the band here too. */
  :root{--dots-safe:60px}
  .poster-in{padding:6px 20px 2px}
  .poster-h{font-size:34px; margin-bottom:5px}
  .poster-line{font-size:14.5px; margin-bottom:8px}
  .poster-cta .btn{min-height:46px; padding-top:10px; padding-bottom:10px; font-size:15px}
  .slide-in{padding-top:10px; padding-bottom:8px}
  .slide-1 .eyebrow{margin-bottom:14px}
  .hero-h1{font-size:47px; margin-bottom:16px}
  .hero-sub{font-size:18px; margin-bottom:22px}
  .status{margin-top:18px; font-size:14px}
  .slide-bright{grid-template-rows:35% 65%}
  .slide-bright .bright-in{padding:16px 24px 12px}
  .slide-bright .bright-in .eyebrow{margin-bottom:14px}
  .slide-bright .slide-h{font-size:40px; margin-bottom:12px}
  .slide-bright .slide-line{font-size:17.5px; margin-bottom:20px}
  .slide-qr-in{gap:14px}
  .slide-qr .slide-h{font-size:40px; margin-bottom:12px}
  .slide-qr .slide-line{font-size:17.5px}
  .slide-leads .eyebrow{margin-bottom:14px}
  .slide-leads .slide-h{font-size:40px; margin-bottom:12px}
  .slide-leads .slide-line{font-size:17.5px; margin-bottom:20px}
  .slide-leads-in{padding-bottom:14px}
}
@media (max-width:900px) and (min-height:761px) and (max-height:860px){
  /* Mid-height phones: the un-compacted poster type is tall enough to
     starve the 1fr photo row (at 844 the band fell to 332px and the
     jacket shrank back to a sliver) — compact the type moderately here
     too, so the photo keeps its quarter-plus of jacket. */
  .poster-in{padding:10px 24px 6px}
  .poster-h{font-size:44px; margin-bottom:8px}
  .poster-line{font-size:17px; margin-bottom:12px}
  .poster-cta .btn{min-height:50px; padding-top:12px; padding-bottom:12px}
}
@media (max-width:900px) and (min-height:861px){
  /* Tall phones: no poster override needed — the 1fr / auto rows give
     the photo the whole stage above the type at these heights too. */
}
@media (max-width:900px){
  .nike-section{padding:88px 0}
  .nike-bg{min-height:92svh}
  .nike-bg.bgface{min-height:106svh}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .slides{transition:none}
}

/* photo behind every section (all pages) */
.phsec{position:relative;overflow:hidden;isolation:isolate}
.phsec>.ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.phsec>.ph-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,9,12,.80),rgba(7,9,12,.90))}
.phsec.ph-deep>.ph-shade{background:linear-gradient(180deg,rgba(7,9,12,.88),rgba(7,9,12,.95))}
.phsec>.wrap,.phsec>.endcta-in{position:relative;z-index:2}
.slide-qr>.qr-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.slide-qr>.ph-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(7,9,12,.88) 30%,rgba(7,9,12,.45))}
.slide-qr>.slide-qr-in{position:relative;z-index:2}
.phsec.ph-band>.ph-bg{height:440px}
.phsec.ph-band>.ph-shade{background:linear-gradient(180deg,rgba(7,9,12,.80),rgba(7,9,12,.93) 300px,#07090C 440px)}

/* Geo-Grid proof tile inside Pro mini-slide 2 */

/* st4 AI-bots supporting line */
.nike-line.ai-line{margin-top:14px; font-size:clamp(18px,2vw,23px)}

/* Pro section photo (2026-10-29 update): the grows slide's own photo and the
   brief's first fallback both already appear in the professions slider
   (skincare + med-spa slides), so the section carries the owner-at-his-books
   photo instead — unused on this page. The crop rides left so the owner's
   face stays at the right edge, clear of the headline. */
.bg-pro img{object-position:78% 32%}

/* ============ Professions slider (2026-10-29 update) ============
   "One Sophie. Every trade." — the approved mock, carried into the package
   skin (IBM Plex, brand tokens). Badge card is constant across slides; only
   the scene, the words, and the badge's role line change. */
.prof{padding:clamp(56px,8vw,96px) 0 clamp(48px,6vw,72px)}
.prof-h{text-align:center; font-size:clamp(32px,4.6vw,44px); font-weight:700; letter-spacing:-.02em; line-height:1.08}
.prof-h span{color:var(--copper)}
.prof-sub{text-align:center; color:var(--muted); font-size:16.5px; margin:12px auto 30px; max-width:520px; line-height:1.55}
.prof-stage{position:relative; border-radius:26px; overflow:hidden; border:1px solid var(--line); background:var(--raised)}
.prof-track{display:flex; transition:transform .55s cubic-bezier(.22,.8,.24,1)}
.prof-slide{position:relative; flex:0 0 100%; min-height:520px}
.prof-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.prof-shade{position:absolute; inset:0; background:linear-gradient(90deg, rgba(7,9,12,.88) 22%, rgba(7,9,12,.45) 55%, rgba(7,9,12,.12) 80%)}
.prof-copy{position:absolute; left:86px; top:50%; transform:translateY(-50%); max-width:52%}
.prof-kick{display:flex; align-items:center; gap:12px; color:var(--copper); font-size:13px; font-weight:700; letter-spacing:.28em; margin-bottom:18px}
.prof-kick::before{content:""; width:34px; height:2px; background:var(--copper); flex:none}
.prof-copy h3{font-size:clamp(34px,4.4vw,52px); font-weight:700; letter-spacing:-.02em; line-height:1.05}
.prof-copy h3 em{font-style:normal; color:var(--copper); display:block}
.prof-copy p{margin-top:16px; font-size:17px; line-height:1.55; color:#EDE7DC; max-width:440px}
.prof-cta{margin-top:24px}
.prof-badge{position:absolute; right:44px; top:50%; transform:translateY(-50%); width:236px; background:#0B0E12; border:1px solid #2C333D; border-radius:20px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.55)}
.prof-bar{display:flex; justify-content:space-between; align-items:center; padding:11px 14px; font-size:10.5px; letter-spacing:.18em; color:#CFC8BC; border-bottom:1px solid #22282F}
.prof-bar b{color:var(--ink); font-weight:700}
.prof-face{margin:12px 12px 0; border-radius:120px 120px 14px 14px; overflow:hidden; aspect-ratio:4/4.6}
.prof-face img{width:100%; height:100%; object-fit:cover; object-position:50% 8%; display:block}
.prof-who{padding:13px 16px 16px}
.prof-nm{display:flex; align-items:center; gap:9px}
.prof-name{font-size:23px; font-weight:700; letter-spacing:-.01em}
.prof-pill{font-size:9.5px; font-weight:700; letter-spacing:.1em; background:var(--copper); color:var(--copper-ink); padding:4px 8px; border-radius:999px}
.prof-role{margin-top:5px; font-size:13.5px; color:var(--muted)}
.prof-duty{margin-top:10px; display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#CDE8CF}
.prof-duty i{width:7px; height:7px; border-radius:50%; background:#58C472; display:inline-block}
.prof-arrow{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:0; background:#000; color:#fff; font-size:24px; cursor:pointer; z-index:5; box-shadow:0 8px 24px rgba(0,0,0,.5)}
.prof-prev{left:16px} .prof-next{right:16px}
.prof-dots{display:flex; justify-content:center; gap:8px; margin-top:20px}
.prof-dots button{width:9px; height:9px; border-radius:999px; border:0; background:#3A424D; cursor:pointer; padding:0; transition:all .3s}
.prof-dots button[aria-current="true"]{width:28px; background:var(--copper)}
@media (max-width:760px){
  .prof-slide{min-height:540px}
  .prof-shade{background:linear-gradient(180deg, rgba(7,9,12,.84) 0%, rgba(7,9,12,.38) 52%, rgba(7,9,12,.55) 100%)}
  .prof-copy{left:20px; right:20px; top:64px; transform:none; max-width:100%}
  .prof-kick{font-size:10px; letter-spacing:.16em; margin-bottom:12px}
  .prof-kick::before{width:22px}
  .prof-copy h3{font-size:30px}
  .prof-copy p{font-size:14.5px; margin-top:11px; max-width:300px}
  .prof-cta{margin-top:16px; font-size:14.5px; min-height:44px; padding:10px 18px}
  .prof-badge{left:14px; right:14px; top:auto; bottom:14px; transform:none; width:auto; display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:16px}
  .prof-bar{display:none}
  .prof-face{margin:0; width:46px; height:46px; flex:none; border-radius:50%; aspect-ratio:auto}
  .prof-who{padding:0; flex:1; min-width:0}
  .prof-nm{gap:7px}
  .prof-name{font-size:16px}
  .prof-pill{font-size:7.5px; padding:3px 6px}
  .prof-role{font-size:11px; margin-top:2px}
  .prof-duty{font-size:10px; margin-top:3px}
  .prof-arrow{width:38px; height:38px; font-size:18px; top:14px; transform:none}
  .prof-prev{left:10px} .prof-next{right:10px}
}

/* ============ Video reel (2026-10-29 update) ============
   "See Sophie at work." — the approved mock: portrait film cards, tap to
   play (the film swaps in only on a tap — nothing autoplays). */
.reel-sec{padding:clamp(48px,6vw,72px) 0 clamp(56px,7vw,84px)}
.reel-head{max-width:560px; margin:0 auto; text-align:center}
.reel-head h2{font-size:clamp(30px,4.4vw,42px); font-weight:700; letter-spacing:-.02em; line-height:1.12}
.reel-head h2 .accent{color:var(--copper)}
.reel-sub{margin-top:12px; font-size:16.5px; line-height:1.5; color:var(--muted)}
.reel{margin-top:28px; display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 22px 10px; scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.reel-card{flex:0 0 76%; max-width:320px; scroll-snap-align:center}
.reel-frame{position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/5; background:var(--raised); border:1px solid var(--line); cursor:pointer}
.reel-poster{width:100%; height:100%; object-fit:cover; display:block}
.reel-frame video{width:100%; height:100%; object-fit:cover; display:block}
.reel-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,9,12,.06) 55%, rgba(7,9,12,.45)); pointer-events:none}
.reel-dur{position:absolute; top:12px; right:12px; background:rgba(7,9,12,.72); color:var(--ink); font-size:13px; font-weight:600; padding:4px 9px; border-radius:8px}
.reel-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.35); pointer-events:none}
.reel-play::after{content:""; border-left:22px solid #111; border-top:14px solid transparent; border-bottom:14px solid transparent; margin-left:5px}
.reel-chip{position:absolute; left:12px; bottom:12px; width:52px; height:52px; border-radius:50%; overflow:hidden; border:2.5px solid #fff; box-shadow:0 6px 18px rgba(0,0,0,.4)}
.reel-chip img{width:100%; height:100%; object-fit:cover; display:block}
.reel-cap{margin-top:13px; font-size:16.5px; font-weight:600; line-height:1.4; text-align:center; padding:0 6px}
.reel-cap span{color:var(--muted); font-weight:400}
.reel-dots{margin-top:20px; display:flex; gap:8px; justify-content:center}
.reel-dots button{width:9px; height:9px; border-radius:99px; border:none; background:#3A434E; cursor:pointer; padding:0; transition:all .25s}
.reel-dots button[aria-current="true"]{width:30px; background:var(--ink)}
@media (min-width:760px){ .reel-card{flex-basis:300px} .reel{justify-content:center} }
/* At desktop widths all three cards fit and the reel cannot scroll — the
   dots would be dead controls there, so they only exist where scrolling does. */
@media (min-width:973px){ .reel-dots{display:none} }