:root{
  --bg:oklch(0.125 0.004 270);
  --surface:oklch(0.205 0.008 255);
  --raised:oklch(0.30 0.01 255);
  --line:oklch(1 0 0 / 11%);
  --line-strong:oklch(1 0 0 / 20%);
  --ink:oklch(0.99 0.001 250);
  --muted:oklch(0.95 0.004 250);
  --faint:oklch(0.88 0.005 250);
  --accent:oklch(0.68 0.24 353);
  --accent-deep:oklch(0.50 0.19 353);
  --accent-dim:oklch(0.68 0.24 353 / 12%);
  --neon:oklch(0.8 0.19 145);
  --display:'Poppins',ui-sans-serif,system-ui,sans-serif;
  --sans:'Open Sans',ui-sans-serif,system-ui,sans-serif;
  --radius-card:8px;
  --radius-input:4px;
  --ease-switch:cubic-bezier(0.16,1,0.3,1);
  --dur-hover:420ms;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button:not(:disabled),[role="button"],summary,label[for],a.btn{cursor:pointer}
img{max-width:100%;display:block}

/* THE TYPE. Every title uppercase, lit metal, one contact shadow, no glow. */
h1,h2,h3{
  font-family:var(--display);font-weight:800;
  text-transform:uppercase;text-wrap:balance;
  letter-spacing:-0.015em;line-height:1.02;margin:0;
}
h1,h2{
  /* ALL PINK, EXTRUDED. The face is the logo pink, the body under it is the
     same colour falling into shadow, and nothing is stroked or outlined. */
  color:oklch(0.68 0.24 353);
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  text-shadow:
    0 1px 0 oklch(0.62 0.22 353),
    0 2px 0 oklch(0.56 0.20 353),
    0 3px 0 oklch(0.50 0.18 353),
    0 4px 0 oklch(0.44 0.16 353),
    0 5px 0 oklch(0.38 0.14 353),
    0 6px 0 oklch(0.32 0.12 353),
    0 7px 0 oklch(0.26 0.09 353),
    0 10px 20px oklch(0 0 0 / 72%);
  filter:none;
}
h3{
  color:oklch(0.68 0.24 353);
  text-shadow:
    0 1px 0 oklch(0.56 0.20 353),
    0 2px 0 oklch(0.44 0.16 353),
    0 3px 0 oklch(0.32 0.12 353),
    0 5px 11px oklch(0 0 0 / 65%);
}
.panel-name{
  text-shadow:0 1px 0 oklch(0.38 0.14 353),0 2px 0 oklch(0.28 0.10 353),0 4px 8px oklch(0 0 0 / 55%);
}
.stat b{
  text-shadow:
    0 1px 0 oklch(0.44 0.17 353),
    0 2px 0 oklch(0.34 0.12 353),
    0 3px 0 oklch(0.26 0.09 353),
    0 6px 13px oklch(0 0 0 / 70%);
}
.offer .price{
  text-shadow:
    0 1px 0 oklch(0.44 0.17 353),
    0 2px 0 oklch(0.34 0.12 353),
    0 3px 0 oklch(0.26 0.09 353),
    0 6px 13px oklch(0 0 0 / 70%);
}

/* WHAT IT GETS HIM. Every block ends on the goal, in his own terms. */
.goal{
  margin-top:14px;padding:11px 14px;border-radius:var(--radius-input);
  background:var(--accent-dim);
  box-shadow:inset 0 0 0 1px oklch(0.68 0.24 353 / 26%);
  font-size:0.86rem;color:var(--ink);font-weight:600;line-height:1.45;
}
.goal b{color:var(--accent);font-weight:700;letter-spacing:0.04em;text-transform:uppercase;font-size:0.68rem;display:block;margin-bottom:3px}
.goalbar{
  margin:26px 0 0;padding:18px 20px;border-radius:var(--radius-card);
  background:var(--surface);
  box-shadow:inset 0 1px 0 oklch(1 0 0 / 7%),inset 0 0 0 1px oklch(0.68 0.24 353 / 28%),0 2px 0 oklch(0 0 0 / 40%);
  font-size:1rem;color:var(--ink);
}
h1{font-size:clamp(2.4rem,7.4vw,5rem)}
h2{font-size:clamp(1.65rem,4.2vw,2.9rem)}
h3{font-size:clamp(1rem,2vw,1.2rem);color:var(--ink);letter-spacing:0.01em}
p{margin:0;text-wrap:pretty}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
section{padding:clamp(26px,3.4vw,46px) 0;border-top:1px solid var(--line-strong)}
section:first-of-type{border-top:0}

.kicker{
  font-family:var(--display);font-weight:700;font-size:0.72rem;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);
  margin:0 0 14px;
}
.kicker.quiet{color:var(--faint)}
.lede{font-size:clamp(1.05rem,2.1vw,1.3rem);color:var(--muted);max-width:60ch;margin:18px 0 0}
.sub{color:var(--faint);max-width:64ch;margin:14px 0 0;font-size:0.97rem}

/* THE PLATE. One surface material, depth by shadow, never a gradient. */
.plate{
  background:var(--surface);
  border-radius:var(--radius-card);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 7%),
    inset 0 0 0 1px oklch(1 0 0 / 7%),
    0 2px 0 oklch(0 0 0 / 40%),
    0 14px 30px -18px oklch(0 0 0 / 90%);
  padding:clamp(20px,2.6vw,30px);
}
.plate.lit{box-shadow:
  inset 0 1px 0 oklch(1 0 0 / 9%),
  inset 0 0 0 1px oklch(0.68 0.24 353 / 32%),
  0 2px 0 oklch(0 0 0 / 40%),
  0 16px 34px -18px oklch(0 0 0 / 90%);}

.grid{display:grid;gap:16px}
@media(min-width:760px){
  .g2{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
}

/* STAT TILES */
.stat{display:grid;gap:4px;align-content:start}
.stat b{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1;
  color:var(--ink);letter-spacing:-0.02em;
}
.stat b.pink{color:var(--accent)}
.stat span{font-size:0.8rem;color:var(--faint);letter-spacing:0.04em;text-transform:uppercase;font-weight:600}
.stat em{font-style:normal;font-size:0.85rem;color:var(--muted)}

/* THE BUTTON. Flat pink face, near black label, solid 4px edge. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  border-radius:5px;font-family:var(--sans);font-weight:700;font-size:0.9375rem;
  letter-spacing:0.014em;line-height:1;padding:0.875rem 1.625rem;min-height:2.875rem;
  white-space:nowrap;text-decoration:none;border:0;
  color:var(--bg);background:oklch(0.68 0.24 353);
  box-shadow:
    inset 0 2px 0 oklch(1 0 0 / 52%),
    inset 0 3px 0 oklch(1 0 0 / 16%),
    inset 0 -2px 0 oklch(0 0 0 / 26%),
    0 4px 0 var(--accent-deep),
    0 7px 16px -4px oklch(0 0 0 / 65%);
  transition:filter 120ms var(--ease-switch),box-shadow 120ms var(--ease-switch);
}
@media(hover:hover) and (pointer:fine){
  .btn:hover{filter:brightness(1.07);box-shadow:
    inset 0 2px 0 oklch(1 0 0 / 62%),
    inset 0 3px 0 oklch(1 0 0 / 20%),
    inset 0 -2px 0 oklch(0 0 0 / 26%),
    0 4px 0 var(--accent-deep),
    0 10px 22px -4px oklch(0 0 0 / 72%);}
}
.btn:active{transition-duration:0ms;filter:brightness(0.92);box-shadow:
  inset 0 2px 0 oklch(1 0 0 / 30%),
  inset 0 -2px 0 oklch(0 0 0 / 34%),
  0 4px 0 oklch(0.44 0.17 353),
  0 4px 8px -3px oklch(0 0 0 / 70%);}

/* SOURCE CHIP. Every claim carries where it was read. */
.src{
  display:inline-block;margin-top:10px;font-size:0.72rem;color:var(--faint);
  letter-spacing:0.03em;border-top:1px solid var(--line);padding-top:8px;width:100%;
}
.src a{color:var(--faint)}

/* THE SERP MOCKS */
.serp{
  background:oklch(0.21 0.006 255);border-radius:var(--radius-card);
  padding:18px;box-shadow:inset 0 0 0 1px oklch(1 0 0 / 7%),0 2px 0 oklch(0 0 0 / 40%);
  font-size:0.86rem;
}
.serp-bar{
  display:flex;align-items:center;gap:10px;background:oklch(0.26 0.008 255);
  border-radius:999px;padding:9px 16px;margin-bottom:16px;
  box-shadow:inset 0 1px 0 oklch(1 0 0 / 8%),inset 0 0 0 1px oklch(1 0 0 / 6%);
  color:var(--muted);font-size:0.84rem;
}
.serp-bar svg{flex:none;opacity:.7}
.serp-row{padding:11px 0;border-bottom:1px solid var(--line)}
.serp-row:last-child{border-bottom:0}
.serp-row .u{color:var(--faint);font-size:0.74rem;letter-spacing:0.02em}
.serp-row .t{color:oklch(0.78 0.11 250);font-weight:600;margin-top:2px}
.serp-row .d{color:var(--faint);font-size:0.8rem;margin-top:3px}
.serp-row.them{opacity:.95}
.serp-row.them .t{color:oklch(0.72 0.17 30)}
.flagline{
  display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);color:oklch(0.76 0.16 30);font-size:0.82rem;font-weight:600;
}

/* THE PANEL REPLICA */
/* ── THE KNOWLEDGE PANEL, AS GOOGLE DRAWS IT ─────────────────────────────
   Palette, type and radii taken from studioraine.art's own replica, which
   sampled them off a real panel screenshot: page #1f2125, cards #2f3039,
   rules #3c3e40, text #e5e8ee, secondary #bdc1c6, link #8ab4f8, Arial.
   Ours is the same object with his facts in it, so it has to be the same
   object: not a dark card in our brand type. */
.gp{
  background:#1f2125;color:#e5e8ee;border-radius:12px;overflow:hidden;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:18px 18px 16px;
  box-shadow:
    0 0 0 1px oklch(1 0 0 / 9%),
    0 34px 80px -34px oklch(0 0 0 / 90%),
    0 40px 120px -50px oklch(0.68 0.24 353 / 38%);
}
.gp-name{font-size:clamp(25px,2.4vw,31px);line-height:1.18;font-weight:400;color:#e5e8ee;letter-spacing:0;margin:0;text-shadow:none;text-transform:none}
.gp-sub{font-size:13px;color:#bdc1c6;margin-top:3px}
.gp-shots{display:grid;grid-template-columns:1.35fr 1fr;gap:7px;margin-top:14px}
.gp-shots .big{border-radius:12px;overflow:hidden;position:relative;aspect-ratio:1}
.gp-shots .col{display:grid;grid-template-rows:1fr 1fr;gap:7px}
.gp-shots .sm{border-radius:12px;overflow:hidden;position:relative}
.gp-shots img{width:100%;height:100%;object-fit:cover;display:block}
.gp-src{position:absolute;left:9px;bottom:7px;font-size:10px;color:#fff;text-shadow:0 0 6px oklch(0 0 0 / 70%)}
.gp-cards{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}
.gp-card{background:#2f3039;border-radius:12px;padding:11px 13px}
.gp-card dt{font-size:11px;color:#bdc1c6;margin:0}
.gp-card dd{margin:6px 0 0;font-size:17px;color:#e5e8ee;line-height:1.2}
.gp-card dd small{display:block;font-size:11px;color:#bdc1c6;margin-top:4px}
.gp-over{margin-top:16px;border-top:1px solid #3c3e40;padding-top:13px}
.gp-over h4{margin:0 0 9px;font-size:18.5px;font-weight:400;color:#e5e8ee;text-transform:none;letter-spacing:0;text-shadow:none}
.gp-over p{font-size:13px;line-height:1.52;color:#e5e8ee;margin:0}
.gp-rows{margin:13px 0 0;padding:0;list-style:none}
.gp-rows li{display:grid;grid-template-columns:104px 1fr;gap:10px;padding:7px 0;border-top:1px solid #3c3e40;font-size:13px}
.gp-rows li:first-child{border-top:0}
.gp-rows dt,.gp-rows b{color:#bdc1c6;font-weight:400}
.gp-rows span{color:#e5e8ee}
.gp-rows a,.gp-link{color:#8ab4f8;text-decoration:none}
.gp-profiles{margin-top:15px;border-top:1px solid #3c3e40;padding-top:13px}
.gp-profiles h4{margin:0 0 10px;font-size:13px;color:#bdc1c6;font-weight:400;text-transform:none;letter-spacing:0;text-shadow:none}
.gp-prow{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.gp-prow a{display:grid;justify-items:center;gap:6px;text-decoration:none;width:54px}
.gp-prow svg{width:26px;height:26px;display:block}
.gp-prow span{font-size:11px;color:#bdc1c6;text-align:center;line-height:1.2}

/* QUOTE FROM GOOGLE */
.quote{
  border-left:3px solid var(--accent);padding:4px 0 4px 18px;margin:0;
  color:var(--ink);font-size:1.02rem;
}
.quote cite{display:block;margin-top:9px;font-style:normal;font-size:0.78rem;color:var(--faint);letter-spacing:0.03em}

/* THE PROCESS RAIL */
.rail{display:grid;gap:0;counter-reset:step}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:16px;padding:15px 0;
  border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:0}
.step-n{
  counter-increment:step;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:0.9rem;
  color:var(--bg);background:var(--accent);
  box-shadow:inset 0 2px 0 oklch(1 0 0 / 45%),0 3px 0 var(--accent-deep),0 6px 12px -4px oklch(0 0 0 / 70%);
}
.step-n::before{content:counter(step)}
.step h3{margin-bottom:5px}
.step p{color:var(--muted);font-size:0.94rem}
.step .when{color:var(--faint);font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;font-weight:700;margin-top:7px}

/* OFFERS */
.offer{display:grid;gap:12px;align-content:start}
.offer .price{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4vw,2.5rem);line-height:1;letter-spacing:-0.02em;color:var(--ink)}
.offer.lead .price{color:var(--accent)}
.offer .term{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--faint);font-weight:700}
.offer ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.offer li{position:relative;padding-left:20px;color:var(--muted);font-size:0.9rem}
.offer li::before{content:"";position:absolute;left:0;top:0.62em;width:11px;height:2px;background:var(--accent);border-radius:1px}
.tagline{font-size:0.9rem;color:var(--faint)}

/* FOOTER */
footer{padding:44px 0 64px;border-top:1px solid var(--line)}
.foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.foot .by{color:var(--faint);font-size:0.84rem}
@font-face{font-family:'SR Tag';src:url(data:font/woff2;base64,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) format('woff2');font-weight:900;font-style:normal;font-display:swap}
.sr-tag{display:inline-flex;align-items:center;gap:.55em;text-transform:uppercase;font-family:'SR Tag',Poppins,system-ui,sans-serif;font-weight:900;font-size:14px;letter-spacing:.06em;line-height:1;text-decoration:none;color:inherit}
.sr-tag svg{flex:none}
.sr-tag svg rect{transform-box:fill-box;transform-origin:50% 50%}
.sr-tag:hover svg rect{animation:sr-eq .9s cubic-bezier(.45,0,.55,1) infinite}
.sr-tag:hover svg rect:nth-child(2){animation-delay:-.68s}
.sr-tag:hover svg rect:nth-child(3){animation-delay:-.24s}
.sr-tag:hover svg rect:nth-child(4){animation-delay:-.51s}
.sr-tag:hover svg rect:nth-child(5){animation-delay:-.37s}
@keyframes sr-eq{0%,100%{transform:scaleY(1)}25%{transform:scaleY(.55)}55%{transform:scaleY(1.22)}80%{transform:scaleY(.75)}}
@media (prefers-reduced-motion:reduce){.sr-tag:hover svg rect{animation:none}}

/* THE FRAMED SHOT. The site's own pattern: a real screenshot, a plate
   around it, and one pink caption line underneath saying what it is. */
figure.shot{margin:0;display:grid;gap:0}
figure.shot img{
  width:100%;height:auto;border-radius:var(--radius-card) var(--radius-card) 0 0;
  display:block;background:var(--raised);
}
figure.shot .frame{
  border-radius:var(--radius-card);overflow:hidden;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 10%),
    0 3px 0 oklch(0 0 0 / 45%),
    0 20px 44px -22px oklch(0 0 0 / 95%);
}
figure.shot.win .frame{box-shadow:
  inset 0 0 0 1px oklch(0.68 0.24 353 / 38%),
  0 3px 0 oklch(0.44 0.17 353),
  0 20px 44px -22px oklch(0 0 0 / 95%);}
figure.shot figcaption{
  margin-top:12px;font-size:0.82rem;color:var(--accent);
  font-weight:700;letter-spacing:0.02em;line-height:1.45;
}
figure.shot figcaption span{display:block;color:var(--faint);font-weight:400;margin-top:4px;letter-spacing:0.03em;font-size:0.74rem}
.read{margin-top:14px;color:var(--muted);font-size:0.97rem}
.vs{display:grid;gap:22px}
@media(min-width:860px){.vs{grid-template-columns:1fr 1fr;gap:26px}}
.band{
  margin:0;padding:22px 24px;border-radius:var(--radius-card);
  background:oklch(0.68 0.24 353);color:var(--bg);
  font-weight:700;font-size:1.02rem;line-height:1.5;
  box-shadow:
    inset 0 2px 0 oklch(1 0 0 / 46%),
    inset 0 -2px 0 oklch(0 0 0 / 22%),
    0 4px 0 var(--accent-deep),
    0 12px 26px -8px oklch(0 0 0 / 70%);
}
.band b{display:block;font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;opacity:.72;margin-bottom:6px}

/* ── ASYMMETRY. Nothing on this page sits in a 1:1 grid. ─────────────── */
.bleed{max-width:1340px;margin:0 auto;padding:0 20px}
.off{display:grid;gap:18px}
@media(min-width:900px){
  .off{grid-template-columns:repeat(12,1fr);gap:22px;align-items:start}
  .c7{grid-column:span 7}.c5{grid-column:span 5}.c6{grid-column:span 6}
  .c8{grid-column:span 8}.c4{grid-column:span 4}.c9{grid-column:span 9}.c3{grid-column:span 3}
  .drop{margin-top:30px}.drop-s{margin-top:14px}.rise{margin-top:-46px}
}

/* HIS PHOTOS. Plate, lit edge, cast. Never a card. */
.ph{position:relative;border-radius:var(--radius-card);overflow:hidden;
  box-shadow:inset 0 0 0 1px oklch(1 0 0 / 12%),0 3px 0 oklch(0 0 0 / 45%),0 24px 50px -26px oklch(0 0 0 / 95%);}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.tall img{aspect-ratio:3/4}
.ph.wide img{aspect-ratio:16/10}
.ph.sq img{aspect-ratio:1}
.ph figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 13px;
  background:linear-gradient(180deg,oklch(0 0 0 / 0) 0%,oklch(0 0 0 / 86%) 72%);
  color:var(--ink);font-size:0.8rem;font-weight:600;line-height:1.4;
}
.ph figcaption em{display:block;font-style:normal;color:var(--accent);font-size:0.68rem;
  letter-spacing:0.1em;text-transform:uppercase;margin-bottom:4px}

/* THE HERO, full bleed with him in it. */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;border-top:0}
.hero-img{position:absolute;inset:0;z-index:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:62% 28%;opacity:.62}
.hero-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,oklch(0.165 0.004 270 / 30%) 0%,oklch(0.165 0.004 270 / 55%) 38%,oklch(0.165 0.004 270 / 94%) 82%,oklch(0.165 0.004 270) 100%);}
.hero-in{position:relative;z-index:1;width:100%;padding:0 0 clamp(40px,6vw,76px)}

/* BRAND MARKS. Real logos, real colour, no text beside them. */
.marks{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mark{
  width:46px;height:46px;border-radius:var(--radius-input);display:grid;place-items:center;
  background:var(--surface);
  box-shadow:inset 0 1px 0 oklch(1 0 0 / 12%),inset 0 0 0 1px oklch(1 0 0 / 8%),0 3px 0 oklch(0 0 0 / 50%),0 8px 16px -6px oklch(0 0 0 / 70%);
  transition:filter 120ms var(--ease-switch),box-shadow 120ms var(--ease-switch);
}
.mark svg{width:22px;height:22px;display:block}
@media(hover:hover){.mark:hover{filter:brightness(1.14);box-shadow:inset 0 1px 0 oklch(1 0 0 / 16%),inset 0 0 0 1px oklch(1 0 0 / 10%),0 3px 0 oklch(0 0 0 / 50%),0 10px 22px -6px oklch(0 0 0 / 80%)}}
.mark:active{filter:brightness(0.92);transition-duration:0ms}

/* THE MOAT TABLE. Them on the left, us on the right, no ambiguity. */
.moat{display:grid;gap:14px}
@media(min-width:820px){.moat{grid-template-columns:1fr 1fr;gap:20px}}
.moat-col{border-radius:var(--radius-card);padding:clamp(20px,2.4vw,28px);background:var(--surface);
  box-shadow:inset 0 1px 0 oklch(1 0 0 / 6%),inset 0 0 0 1px oklch(1 0 0 / 7%),0 2px 0 oklch(0 0 0 / 40%);}
.moat-col.us{box-shadow:inset 0 1px 0 oklch(1 0 0 / 9%),inset 0 0 0 1px oklch(0.68 0.24 353 / 40%),0 3px 0 var(--accent-deep),0 20px 44px -22px oklch(0 0 0 / 95%);}
.moat-col h3{margin-bottom:16px}
.moat-col.them h3{color:var(--faint);text-shadow:none}
.moat-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.moat-col li{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;font-size:0.93rem;color:var(--muted)}
.moat-col.us li{color:var(--ink)}
.moat-col .ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.moat-col.them .ic{background:oklch(0.30 0.01 255);box-shadow:inset 0 1px 0 oklch(1 0 0 / 8%)}
.moat-col.us .ic{background:var(--accent);box-shadow:inset 0 1px 0 oklch(1 0 0 / 46%),0 2px 0 var(--accent-deep)}
.moat-col .ic svg{width:11px;height:11px}

/* THE BIG PULL QUOTE, his own words. */
.pull{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,3vw,2.1rem);
  line-height:1.2;letter-spacing:-0.01em;color:var(--ink);margin:0;text-wrap:balance}
.pull span{color:var(--accent)}
.by-him{margin-top:14px;font-size:0.76rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);font-weight:700}

.embed{border-radius:var(--radius-card);overflow:hidden;
  box-shadow:inset 0 0 0 1px oklch(1 0 0 / 9%),0 3px 0 oklch(0 0 0 / 45%),0 20px 44px -24px oklch(0 0 0 / 95%)}
.embed iframe{display:block;width:100%;border:0}

.amb{position:relative}
.amb>.amb-bg{display:none}


.amb>.wrap,.amb>.bleed,.amb>.ed{position:relative;z-index:1}
@keyframes drift{0%{transform:scale(1.06) translate3d(-1.5%,-1%,0)}100%{transform:scale(1.14) translate3d(1.5%,1.5%,0)}}
@media(prefers-reduced-motion:reduce){}

/* ── EDITORIAL. Hairlines and overlap, never a wall of boxes. ────────── */
.ed{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,52px)}
.rule{height:1px;background:var(--line);margin:0}
.num{
  font-family:var(--display);font-weight:800;font-size:clamp(4rem,13vw,11rem);
  line-height:.78;letter-spacing:-0.05em;color:transparent;
  -webkit-text-stroke:1px oklch(1 0 0 / 13%);
  pointer-events:none;user-select:none;
}
.eyebrow{
  font-family:var(--display);font-weight:700;font-size:0.68rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--faint);
}
.eyebrow.pink{color:var(--accent)}
.lead-xl{font-size:clamp(1.15rem,2.3vw,1.5rem);line-height:1.45;color:var(--muted);max-width:30ch}
.note{font-size:0.95rem;color:var(--muted);line-height:1.6}
.cite-line{
  margin-top:10px;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--faint);border-top:1px solid var(--line);padding-top:9px;
}
.cite-line a{color:var(--faint)}

/* SCROLL-LINKED MOTION. Continuous parallax tied to scroll position, not a
   reveal: nothing is hidden and nothing fades in. Degrades to static. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .par{animation:par linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes par{from{transform:translate3d(0,4.5%,0)}to{transform:translate3d(0,-4.5%,0)}}
    .par-slow{animation:parslow linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes parslow{from{transform:translate3d(0,2.2%,0) scale(1.04)}to{transform:translate3d(0,-2.2%,0) scale(1.04)}}
    .glide{animation:glide linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes glide{from{transform:translate3d(-2.5%,0,0)}to{transform:translate3d(2.5%,0,0)}}
    .countersink{animation:csink linear both;animation-timeline:view();animation-range:entry 10% cover 60%}
    @keyframes csink{from{letter-spacing:0.04em}to{letter-spacing:-0.02em}}
    .track-num{animation:tnum linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes tnum{from{transform:translate3d(0,22%,0)}to{transform:translate3d(0,-22%,0)}}
  }
}
.sticky-col{position:sticky;top:34px}

/* EXHIBIT. A screenshot presented like a plate in a magazine. */
.ex{margin:0}
.ex .img{overflow:hidden;border-radius:6px;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 14%),
    0 3px 0 oklch(0 0 0 / 55%),
    0 26px 52px -26px oklch(0 0 0 / 98%)}
.ex img{width:100%;display:block}
.ex figcaption{display:flex;gap:12px;align-items:baseline;margin-top:13px;
  border-top:1px solid var(--line);padding-top:11px}
.ex figcaption b{font-family:var(--display);font-size:0.7rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap}
.ex figcaption span{font-size:0.86rem;color:var(--muted);line-height:1.45}

/* PRICE LIST, editorial. No cards. */
.price-row{display:grid;gap:12px;padding:22px 0;border-top:1px solid var(--line-strong)}
@media(min-width:860px){.price-row{grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:34px;align-items:start}}
.price-row .big{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,5vw,3.4rem);
  line-height:.95;letter-spacing:-0.03em;color:oklch(0.68 0.24 353);
  text-shadow:0 1px 0 oklch(0.56 0.20 353),0 2px 0 oklch(0.44 0.16 353),0 3px 0 oklch(0.32 0.12 353),0 6px 14px oklch(0 0 0 / 70%);}
.price-row h3{font-size:clamp(1.05rem,2vw,1.3rem);margin-bottom:8px}
.price-row ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.price-row li{font-size:0.9rem;color:var(--muted);padding-left:18px;position:relative}
.price-row li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--accent)}
.price-row .term{font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);margin-top:8px;font-weight:700}

/* THE MARQUEE. His own frames drifting, a slow continuous loop that never
   stops and never reveals anything: it is wallpaper with a pulse. */
.marq{display:flex;gap:14px;width:max-content;animation:marq 64s linear infinite}
.marq.back{animation-duration:86s;animation-direction:reverse}
.marq figure{margin:0;flex:none;width:clamp(150px,19vw,250px);border-radius:3px;overflow:hidden;
  box-shadow:0 20px 44px -26px oklch(0 0 0 / 95%),inset 0 0 0 1px oklch(1 0 0 / 9%)}
.marq img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
@keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.marq{animation:none}}
.marq-wrap{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.wins{display:grid;gap:12px;margin-top:30px}
@media(min-width:760px){.wins{grid-template-columns:repeat(4,1fr);gap:18px}}
.win-item b{display:block;font-family:var(--display);font-weight:800;color:var(--accent);
  font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.1;
  text-shadow:0 1px 0 oklch(0.52 0.19 353),0 2px 0 oklch(0.40 0.15 353),0 4px 9px oklch(0 0 0 / 65%)}
.win-item span{display:block;color:var(--faint);font-size:0.8rem;margin-top:7px;line-height:1.45}

/* ── THE MOSAIC. Static, asymmetric, his own frames as the ground the
      finished panel sits on. No animation: it is a wall, not a carousel. */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;grid-auto-rows:minmax(70px,auto)}
.mosaic figure{margin:0;overflow:hidden;border-radius:3px;box-shadow:inset 0 0 0 1px oklch(1 0 0 / 8%)}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88}
.m-a{grid-column:span 2;grid-row:span 3}
.m-b{grid-column:span 2;grid-row:span 2}
.m-c{grid-column:span 2;grid-row:span 4}
.m-d{grid-column:span 2;grid-row:span 2}
.m-e{grid-column:span 2;grid-row:span 3}
.m-f{grid-column:span 2;grid-row:span 2}
.m-g{grid-column:span 3;grid-row:span 2}
.m-h{grid-column:span 3;grid-row:span 2}
.m-i{grid-column:span 2;grid-row:span 2}
@media(max-width:700px){
  .mosaic{grid-template-columns:repeat(4,1fr);gap:6px}
  .m-a,.m-b,.m-c,.m-d,.m-e,.m-f,.m-i{grid-column:span 2;grid-row:span 2}
  .m-g,.m-h{grid-column:span 4;grid-row:span 2}
}
.stage{position:relative}
.stage .socwall{filter:saturate(1.06) contrast(1.06)}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(118% 76% at 76% 50%, oklch(0.125 0.004 270 / 0) 0%, oklch(0.125 0.004 270 / 30%) 38%, oklch(0.125 0.004 270 / 86%) 72%);}
.stage .float{position:relative;z-index:2}
@media(min-width:1000px){
  .stage .float{position:absolute;right:2.5%;top:50%;transform:translateY(-50%);width:min(430px,40%)}
}
@media(max-width:999px){.stage .float{margin-top:-54px;padding:0 16px}}
.num-solid{-webkit-text-stroke:0;color:oklch(1 0 0 / 9%)}
.simplified{font-size:0.78rem;color:var(--faint);font-style:normal;letter-spacing:0.02em;
  border-left:2px solid var(--accent);padding-left:12px;margin-top:16px;line-height:1.5}
.dash-frame{border-radius:var(--radius-card);overflow:hidden;
  box-shadow:inset 0 0 0 1px oklch(0.68 0.24 353 / 32%),0 3px 0 var(--accent-deep),0 26px 54px -26px oklch(0 0 0 / 95%)}
.dash-frame iframe{display:block;width:100%;height:540px;border:0;background:var(--bg)}
.linkpill{display:inline-flex;align-items:center;gap:10px;background:var(--surface);
  border-radius:var(--radius-input);padding:12px 16px;color:var(--ink);font-weight:700;font-size:0.9rem;
  box-shadow:inset 0 1px 0 oklch(1 0 0 / 9%),inset 0 0 0 1px oklch(1 0 0 / 8%),0 2px 0 oklch(0 0 0 / 45%);
  text-decoration:none;word-break:break-all}
.linkpill em{font-style:normal;color:var(--accent)}


/* ── THE SCROLL RAIL. John: "there should be a progress bar on the left side
      that indicates how much more you have to scroll". Scroll-linked, no JS,
      and it is the one piece of chrome on the page. */
.rail-left{
  position:fixed;left:0;top:0;bottom:0;width:4px;z-index:40;
  background:oklch(1 0 0 / 7%);
}
.rail-left i{
  display:block;width:100%;height:100%;transform-origin:0 0;transform:scaleY(0);
  background:oklch(0.68 0.24 353);
  box-shadow:0 0 14px oklch(0.68 0.24 353 / 70%),0 0 3px oklch(0.68 0.24 353);
}
@supports (animation-timeline: scroll()){
  .rail-left i{animation:railfill linear both;animation-timeline:scroll(root block)}
  @keyframes railfill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
@supports not (animation-timeline: scroll()){ .rail-left i{transform:scaleY(1);opacity:.35} }
body{padding-left:4px}

/* ── THE SOCIAL WALL. Their real front pages, shot today, as the ground. */
.socwall{display:grid;gap:10px;grid-template-columns:repeat(6,1fr)}
.socwall figure{margin:0;position:relative;border-radius:8px;overflow:hidden;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 15%),
    0 3px 0 oklch(0 0 0 / 55%),
    0 26px 54px -26px oklch(0 0 0 / 98%);}
.socwall img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.socwall .s-ig{grid-column:span 3;aspect-ratio:16/11}
.socwall .s-sc{grid-column:span 3;aspect-ratio:16/11}
.socwall .s-lt{grid-column:span 2;aspect-ratio:4/3}
.socwall .s-tt{grid-column:span 2;aspect-ratio:4/3}
.socwall .s-sp{grid-column:span 2;aspect-ratio:4/3}
.socwall figcaption{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;
  padding:22px 11px 9px;color:#fff;font-size:0.76rem;font-weight:700;
  background:linear-gradient(180deg,oklch(0 0 0 / 0),oklch(0 0 0 / 88%) 62%);}
.socwall figcaption svg{width:16px;height:16px;flex:none}
@media(max-width:760px){
  .socwall{grid-template-columns:repeat(2,1fr)}
  .socwall .s-ig,.socwall .s-sc,.socwall .s-lt,.socwall .s-tt,.socwall .s-sp{grid-column:span 2;aspect-ratio:16/11}
}

/* ── THE PACKAGE BOXES. One extruded box per offer, each carrying a drawn
      picture of the thing you actually end up with. Same depth recipe as the
      buttons and the logo: flat face, lit top edge, solid foot, long cast. */
.boxes{display:grid;gap:18px}
@media(min-width:960px){.boxes{grid-template-columns:repeat(3,1fr);gap:20px}}
.box{
  border-radius:10px;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;
  box-shadow:
    inset 0 2px 0 oklch(1 0 0 / 14%),
    inset 0 0 0 1px oklch(1 0 0 / 12%),
    0 6px 0 oklch(0.26 0.01 255),
    0 26px 50px -22px oklch(0 0 0 / 95%);
}
.box.lead{
  box-shadow:
    inset 0 2px 0 oklch(1 0 0 / 18%),
    inset 0 0 0 1px oklch(0.68 0.24 353 / 48%),
    0 6px 0 var(--accent-deep),
    0 30px 58px -22px oklch(0 0 0 / 98%),
    0 36px 90px -46px oklch(0.68 0.24 353 / 45%);
}
.box-vis{
  height:186px;position:relative;overflow:hidden;
  background:#101216;
  box-shadow:inset 0 -1px 0 oklch(1 0 0 / 12%);
  display:grid;place-items:center;padding:14px;
}
.box-body{padding:18px 18px 20px;display:grid;gap:10px}
.box-body h3{font-size:1.02rem;margin:0}
.box-price{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.3rem);
  line-height:1;letter-spacing:-0.02em;color:oklch(0.68 0.24 353);
  text-shadow:0 1px 0 oklch(0.56 0.20 353),0 2px 0 oklch(0.44 0.16 353),0 3px 0 oklch(0.32 0.12 353),0 6px 13px oklch(0 0 0 / 70%);}
.box-term{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);font-weight:700}
.box-body ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px}
.box-body li{position:relative;padding-left:18px;font-size:0.88rem;color:var(--muted);line-height:1.5}
.box-body li b{color:var(--ink);font-weight:700}
.box-body li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:2px;background:var(--accent);border-radius:1px}
.box-end{margin-top:4px;padding:10px 12px;border-radius:5px;background:var(--accent-dim);
  box-shadow:inset 0 0 0 1px oklch(0.68 0.24 353 / 30%);font-size:0.82rem;color:var(--ink);font-weight:600}
.box-end b{display:block;color:var(--accent);font-size:0.64rem;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:3px}

/* mini SERP, for the panel box */
.mini{width:100%;font-family:Arial,Helvetica,sans-serif}
.mini-bar{display:flex;align-items:center;gap:6px;background:#2b2d31;border-radius:999px;padding:5px 9px;font-size:8px;color:#bdc1c6;margin-bottom:8px}
.mini-row{display:grid;grid-template-columns:1fr 84px;gap:9px}
.mini-res div{height:5px;border-radius:2px;background:#2f3136;margin-bottom:5px}
.mini-res div.b{background:#3a3d44;width:72%}
.mini-kp{background:#1f2125;border-radius:6px;padding:6px;box-shadow:0 0 0 1px oklch(1 0 0 / 14%),0 10px 20px -10px #000}
.mini-kp img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;display:block}
.mini-kp b{display:block;color:#e5e8ee;font-size:8.5px;margin-top:5px;font-weight:400}
.mini-kp i{display:block;color:#bdc1c6;font-size:7px;font-style:normal;margin-top:1px}
.mini-kp u{display:block;height:3px;background:#2f3039;border-radius:2px;margin-top:5px;text-decoration:none}

/* chat answer, for the AI box */
.chat{width:100%;display:grid;gap:7px}
.chat .q{justify-self:end;max-width:80%;background:#2a2d33;color:#e9ecf1;border-radius:9px 9px 2px 9px;padding:7px 9px;font-size:9.5px}
.chat .a{justify-self:start;max-width:92%;background:#15181d;color:#e9ecf1;border-radius:9px 9px 9px 2px;padding:9px 10px;font-size:9.5px;line-height:1.5;
  box-shadow:inset 0 0 0 1px oklch(1 0 0 / 12%)}
.chat .a mark{background:oklch(0.68 0.24 353 / 26%);color:#fff;border-radius:2px;padding:0 2px}

/* the stack, for the full package box */
.stack3{position:relative;width:100%;height:100%}
.stack3 span{position:absolute;border-radius:5px;background:#1a1d22;
  box-shadow:inset 0 0 0 1px oklch(1 0 0 / 14%),0 12px 24px -12px #000;overflow:hidden}
.stack3 .s1{left:2%;top:8%;width:58%;height:62%}
.stack3 .s2{right:3%;top:2%;width:42%;height:52%}
.stack3 .s3{left:16%;bottom:3%;width:70%;height:34%;background:#15181d;display:flex;align-items:center;padding:0 9px;font-size:8.5px;color:#e9ecf1;font-family:Arial,sans-serif}
.stack3 img{width:100%;height:100%;object-fit:cover;display:block}
.stack3 .s3 mark{background:oklch(0.68 0.24 353 / 28%);color:#fff;border-radius:2px;padding:0 2px;margin-right:3px}

/* ── THE STICKY BAR. Wordmark, contents, phone, email, one button. ──────── */
.nav{position:sticky;top:0;z-index:50;background:oklch(0.125 0.004 270 / 92%);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 -1px 0 var(--line-strong),0 10px 30px -20px oklch(0 0 0 / 90%)}
.nav-in{max-width:1280px;margin:0 auto;padding:10px clamp(16px,3vw,40px);
  display:flex;align-items:center;gap:18px;min-height:60px}
.nav-logo img{height:22px;width:auto;display:block}
.toc{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.toc::-webkit-scrollbar{display:none}
.toc a{font-family:var(--display);font-weight:700;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:4px;white-space:nowrap;
  transition:color 120ms var(--ease-switch),background-color 120ms var(--ease-switch)}
.toc a:hover{color:var(--ink);background:oklch(1 0 0 / 7%)}
.nav-contact{display:flex;align-items:center;gap:14px;margin-left:auto}
.nav-contact>a:not(.btn){font-size:0.82rem;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav-contact>a:not(.btn):hover{color:var(--accent)}
.btn-sm{min-height:2.25rem;padding:0.55rem 1rem;font-size:0.82rem}
@media(max-width:980px){
  .nav-contact>a:not(.btn){display:none}
  .toc a{padding:8px 8px}
}
@media(max-width:620px){.nav-logo img{height:18px}.toc{gap:0}}
html{scroll-padding-top:72px}

/* EXHIBITS CAPPED. A screenshot is a window onto the page, not the page. */
.ex .img{max-height:520px}
.ex .img img{object-fit:cover;object-position:top center;max-height:520px}
.ex .img.short{max-height:360px}
.ex .img.short img{max-height:360px}
.hero-s{padding-top:28px}
.panel-facts li b{color:var(--ink)}
.foot .by a{color:var(--faint);text-decoration:none}
.foot .by a:hover{color:var(--accent)}
section{padding:clamp(24px,3vw,40px) 0}
.pull{font-size:clamp(1.15rem,2.4vw,1.7rem)}
/* phone: the two big profiles run full width, the three small ones sit 2-up */
@media(max-width:760px){
  .socwall .s-lt,.socwall .s-tt,.socwall .s-sp{grid-column:span 1;aspect-ratio:4/5}
  .stage .float{margin-top:-24px;padding:0 8px}
}
.box-pay{display:grid;gap:8px;margin-top:8px}
.box-pay .btn{width:100%}
.pay-note{font-size:0.76rem;color:var(--faint);line-height:1.4}

/* THE STAGE IS A GRID, NOT A FLOAT. The panel used to be absolutely
   positioned over the wall; being taller than the wall, it ran out of the
   section and over the two below it. In flow now: wall left, panel right,
   nothing can overlap anything. */
@media(min-width:1000px){
  .stage{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:22px;align-items:start}
  .stage .float{position:static;transform:none;width:auto;margin:0;padding:0}
  .socwall{grid-template-columns:repeat(4,1fr);gap:9px}
  .socwall .s-ig,.socwall .s-sc{grid-column:span 2;aspect-ratio:16/11}
  .socwall .s-lt{grid-column:span 2;aspect-ratio:16/9}
  .socwall .s-tt,.socwall .s-sp{grid-column:span 1;aspect-ratio:4/5}
}
.stage::after{display:none}
.stage .socwall{filter:none}

/* ── NAV, CALMED (John: "navbar is making the site look extremely
      overwhelming"). Eleven things in a row became five: the wordmark, one
      "contents" disclosure, the number, the email, one button. The contents
      list only opens when asked for. */
.nav-in{min-height:56px;gap:14px;padding:8px clamp(16px,3vw,40px)}
.nav-logo img{height:20px}
.toc-dd{position:relative}
.toc-dd summary{list-style:none;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--display);font-weight:700;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted);padding:8px 11px;border-radius:5px;
  box-shadow:inset 0 0 0 1px oklch(1 0 0 / 12%);
  transition:color 120ms var(--ease-switch),background-color 120ms var(--ease-switch)}
.toc-dd summary::-webkit-details-marker{display:none}
.toc-dd summary svg{width:12px;height:12px;transition:transform 160ms var(--ease-switch)}
.toc-dd[open] summary svg{transform:rotate(180deg)}
.toc-dd summary:hover,.toc-dd[open] summary{color:var(--ink);background:oklch(1 0 0 / 7%)}
.toc-dd .toc{position:absolute;top:calc(100% + 8px);left:0;min-width:240px;display:grid;gap:2px;
  flex:none;overflow:visible;padding:8px;border-radius:8px;background:oklch(0.17 0.006 260);
  box-shadow:inset 0 1px 0 oklch(1 0 0 / 9%),inset 0 0 0 1px oklch(1 0 0 / 10%),0 24px 48px -18px oklch(0 0 0 / 95%)}
.toc-dd .toc a{display:flex;gap:12px;align-items:baseline;padding:9px 11px;border-radius:4px;
  font-size:0.78rem;letter-spacing:0.06em;color:var(--muted)}
.toc-dd .toc a i{font-style:normal;color:var(--accent);font-weight:800;min-width:18px}
.toc-dd .toc a[aria-current="true"]{color:var(--ink);background:oklch(1 0 0 / 8%);box-shadow:inset 0 0 0 1px oklch(1 0 0 / 9%)}
.nav-contact{gap:16px}
.nav-txt{font-size:0.78rem!important;font-weight:600!important;color:var(--muted)!important}
.nav-txt:hover{color:var(--ink)!important}
.nav-ic{display:none;width:36px;height:36px;border-radius:5px;place-items:center;color:var(--ink);
  box-shadow:inset 0 0 0 1px oklch(1 0 0 / 14%)}
.nav-ic svg{width:17px;height:17px}
@media(max-width:980px){
  .nav-txt{display:none!important}
  .nav-ic{display:grid}
  .nav-cta{display:none}
  .nav-contact{gap:8px}
}
@media(max-width:620px){.nav-logo img{height:16px}.toc-dd summary{padding:8px 9px}}

/* ── THE PANEL PHOTOS FILL THEIR BOX (John: "FIX MISSING IMAGE"). The two
      small frames were portrait images sizing their own rows, so the right
      column outgrew the big square and left a hole under it. One fixed
      height now, the big photo spans both rows, the small ones split it. */
.gp-shots{grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;height:250px}
.gp-shots .big{grid-row:1 / span 2;grid-column:1;aspect-ratio:auto;min-height:0}
.gp-shots .col{display:contents}
.gp-shots .sm{min-height:0}
.gp-shots .col .sm:nth-child(1){grid-column:2;grid-row:1}
.gp-shots .col .sm:nth-child(2){grid-column:2;grid-row:2}

/* ── THE HERO HAS NO HOLE. The wall stretches to the panel's height, so the
      left column is never shorter than the right one. */
@media(min-width:1000px){
  .stage{align-items:stretch}
  .stage .socwall{height:100%;grid-template-rows:1fr 1fr}
  .socwall .s-ig,.socwall .s-sc,.socwall .s-lt,.socwall .s-tt,.socwall .s-sp{aspect-ratio:auto;min-height:0}
}
@media(max-width:999px){.stage .float{margin-top:16px;padding:0}}

/* ── TITLES, ON THE REFERENCE RECIPE. studioraine.art runs Poppins 900 with
      a white lit top edge, a stepped foot and one cast, measured off
      /google-people-panels. Same structure here, face in logo pink per
      John, sized in em so the depth scales with the type. */
h1,h2{
  font-weight:900;color:oklch(0.68 0.24 353);
  text-shadow:
    0 -0.012em 0 oklch(1 0 0 / 50%),
    0 0.012em 0 oklch(0.52 0.19 353),
    0 0.024em 0 oklch(0.42 0.16 353),
    0 0.036em 0 oklch(0.32 0.12 353),
    0 0.065em 0.11em oklch(0 0 0 / 58%);
  filter:drop-shadow(0 1px 2px oklch(0 0 0 / 60%));
}

/* the band eyebrow measured 4.41:1 under opacity .72; full strength now */
.band b{opacity:1}

/* Pay buttons carry Stripe's own mark, in Stripe's own colour, on a white
   chip so the purple reads against the pink plate. */
.stripe-chip{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:5px;background:#fff;
  box-shadow:0 1px 0 oklch(0 0 0 / 25%);flex:none}
.stripe-chip svg{width:15px;height:15px;display:block}

/* THE 80/20 FIELD LIST */
.fields{display:grid;gap:0}
.fr{display:grid;grid-template-columns:30px 1fr auto;gap:14px;align-items:start;padding:13px 0;border-top:1px solid var(--line)}
.fr:first-child{border-top:0;padding-top:0}
.fr>b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:900 0.8rem var(--display);color:var(--bg);
  background:var(--accent);box-shadow:inset 0 2px 0 oklch(1 0 0 / 45%),0 3px 0 var(--accent-deep)}
.fr h3{font-size:0.92rem;margin:0}
.fr p{margin-top:3px;font-size:0.92rem;color:var(--muted)}
.fr p em{font-style:normal;color:var(--ink);font-weight:700}
.fr .fs{font-size:0.82rem;color:var(--faint);line-height:1.5}
.tag{font:800 0.62rem var(--display);letter-spacing:0.1em;text-transform:uppercase;padding:6px 9px;border-radius:4px;white-space:nowrap;margin-top:2px}
.tag.build{color:var(--bg);background:var(--accent)}
.tag.his{color:var(--ink);box-shadow:inset 0 0 0 1px oklch(1 0 0 / 30%)}
@media(max-width:620px){.fr{grid-template-columns:28px 1fr}.fr .tag{grid-column:2;justify-self:start}}

/* THE $2,500 VISUAL: the finished panel, at full richness. His red studio
   portrait sits behind on the right with the face clear; the panel card
   sits left, in Google's own palette, with his photos, his genre, his next
   show and the five brand marks. */
.box-vis.vis-lead{height:336px;display:block;padding:0;background:#0d0e11}
.vl-bg{position:absolute;right:0;top:0;width:52%;height:100%;object-fit:cover;object-position:50% 10%}
.vis-lead::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 -60px 60px -40px oklch(0.68 0.24 353 / 35%)}
.vl-bar{position:absolute;left:12px;top:12px;right:12px;z-index:2;display:flex;align-items:center;gap:7px;
  background:#303134;border-radius:999px;padding:6px 11px;font:12px Arial,Helvetica,sans-serif;color:#e8eaed;
  box-shadow:0 6px 16px -6px #000,inset 0 0 0 1px oklch(1 0 0 / 10%)}
.vl-bar svg{width:14px;height:14px;flex:none}
.vl-kp{position:absolute;left:12px;top:54px;z-index:2;width:66%;background:#1f2125;border-radius:12px;padding:11px;
  font-family:Arial,Helvetica,sans-serif;
  box-shadow:0 0 0 1px oklch(1 0 0 / 14%),0 22px 44px -16px #000,0 26px 60px -30px oklch(0.68 0.24 353 / 75%)}
.vl-kp .n{color:#e5e8ee;font-size:17px;line-height:1.15}
.vl-kp .d{color:#bdc1c6;font-size:10.5px;margin-top:2px}
.vl-im{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:96px;gap:4px;margin-top:8px}
.vl-im img{width:100%;height:100%;object-fit:cover;border-radius:7px;display:block;min-height:0}
.vl-im div{display:grid;grid-template-rows:46px 46px;gap:4px;min-height:0}
.vl-row{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:5px}
.vl-row span{background:#2f3039;border-radius:7px;padding:5px 7px;color:#e5e8ee;font-size:10.5px;line-height:1.25}
.vl-row span i{display:block;font-style:normal;color:#bdc1c6;font-size:8.5px}
.vl-pr{display:flex;justify-content:space-between;margin-top:8px;padding:7px 4px 0;border-top:1px solid #3c3e40}
.vl-pr svg{width:19px;height:19px;display:block}

/* Platform names in copy are their colour marks, set on the text line. */
.si{display:inline-block;width:1.08em;height:1.08em;vertical-align:-0.18em;margin:0 0.1em;line-height:0}
.si svg{width:100%;height:100%;display:block}

/* iMESSAGE: the same control as studioraine.art's .ci-sms. The Messages
   mark is the button, 22.5% corners, a solid green foot and one cast. */
.ci-sms{display:block;flex:none;border-radius:22.5%;line-height:0;
  box-shadow:lab(46.1955 -45.1023 39.2232) 0 3px 0 0,lab(0 0 0 / .7) 0 6px 14px -4px;
  transition:filter 120ms var(--ease-switch)}
.ci-sms svg{width:100%;height:100%;display:block;border-radius:22.5%}
.ci-sms:hover{filter:brightness(1.08)}
.ci-sms:active{filter:brightness(.92);transition-duration:0ms}
.ci-nav{width:38px;height:38px}
.ci-big{width:60px;height:60px}
.sms-row{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:6px}
.sms-row span{font-size:0.86rem;color:var(--muted);line-height:1.4}
.sms-row b{color:var(--ink)}

/* ── NO HORIZONTAL SCROLL ON A PHONE. Measured 419px of page on a 375px
      screen. Root cause: grid children default to min-width:auto, so an
      unbroken source URL (support.google.com/knowledgepanel/answer/...) set
      the column's minimum wider than the screen. Every grid child may now
      shrink, every citation may break anywhere, and the contents list opens
      inside the viewport instead of off its right edge. */
.off>*,.boxes>*,.grid>*,.stage>*,.wins>*,.fr>*,.price-row>*,.vs>*{min-width:0}
.cite-line,.src,.linkpill,.fs,.note,.pay-note{overflow-wrap:anywhere}
.ex,.ex .img,.ex img,figure{max-width:100%}
@media(max-width:620px){
  .toc-dd .toc{position:fixed;left:12px;right:12px;top:62px;min-width:0}
}
/* last line of defence, without breaking position:sticky */
html,body{overflow-x:clip}