/* Layout: story site. Hero hook (copy left, Bruny Island road photo right), five Story Spine chapters on a sticky-label rail with a signal chain, three-ring moment + proof strip, filterable brand wall with flip tiles, a self-check, close. Three palettes via data-palette: a (forest/crimson), b (mocha/champagne/amber), c (lemon/charcoal/lavender). */
:root,[data-palette="a"]{
  --bg:#06110C; --bg2:#0B1C14; --deep:#030805; --surface:rgba(3,8,5,.55); --tile:#06110C; --tile-hi:#171717;
  --fg:#E8EFE9; --fg2:#C6D1CA; --muted:#93A39A;
  --acc:#A31C1B; --acc-hi:#C8302C; --acc2:#8FB9A8;
  --line:rgba(232,239,233,.12); --line-strong:rgba(232,239,233,.35);
  --btn-bg:#A31C1B; --btn-fg:#E8EFE9; --btn-hover:#C8302C;
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif; --display-w:500; --display-bold:900;
  --photo-filter:saturate(.8) contrast(1.05);
  --body:"Figtree","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
[data-palette="b"]{
  --bg:#2A2017; --bg2:#5B4632; --deep:#1E1610; --surface:rgba(91,70,50,.45); --tile:#2A2017; --tile-hi:#5B4632;
  --fg:#F4D9A0; --fg2:#E9D3A8; --muted:#C2A87C;
  --acc:#C8792C; --acc-hi:#C8792C; --acc2:#F4D9A0;
  --line:rgba(244,217,160,.16); --line-strong:rgba(244,217,160,.4);
  --btn-bg:#C8792C; --btn-fg:#1E1610; --btn-hover:#D98A3C;
  --display:"Cormorant Garamond","Cormorant",Garamond,Georgia,serif; --display-w:500; --display-bold:600;
  --photo-filter:sepia(.28) saturate(.85) contrast(1.02);
  color-scheme:dark;
}
[data-palette="c"]{
  --bg:#FFF21A; --bg2:#FFF21A; --deep:#F5E600; --surface:rgba(23,23,23,.05); --tile:#FFF21A; --tile-hi:#171717;
  --fg:#171717; --fg2:#2A2A22; --muted:#4D4A1E;
  --acc:#A66BFF; --acc-hi:#171717; --acc2:#A66BFF;
  --line:rgba(23,23,23,.16); --line-strong:rgba(23,23,23,.5);
  --btn-bg:#171717; --btn-fg:#FFF21A; --btn-hover:#A66BFF;
  --display:"Syne","Archivo Black","Arial Black",sans-serif; --display-w:700; --display-bold:800;
  --photo-filter:saturate(1.05) contrast(1.08);
  --em-fg:#171717; --tile-hi-fg:#FFF21A; --btn-hover-fg:#171717;
  color-scheme:light;
}
/* Background options. Lemon stays the signature highlight; the base colour changes. 60-30-10: base / text / lemon. */
[data-palette="c"]{ --mark:#FFF21A }
[data-palette="c"][data-tone="1"]{ /* Cloud Dancer white */
  --bg:#F0EEE9; --bg2:#F0EEE9; --deep:#E6E3DC; --surface:rgba(23,23,23,.04); --tile:#F0EEE9; --tile-hi:#171717; --tile-hi-fg:#FFF21A;
  --fg:#171717; --fg2:#2E2E2B; --muted:#5E5C55; --acc:#171717; --acc-hi:#171717; --acc2:#171717; --mark:#FFF21A; --em-fg:#171717;
  --line:rgba(23,23,23,.14); --line-strong:rgba(23,23,23,.45);
  --btn-bg:#171717; --btn-fg:#FFF21A; --btn-hover:#FFF21A; --btn-hover-fg:#171717; color-scheme:light }
[data-palette="c"][data-tone="2"]{ /* Deep forest */
  --bg:#0B2A1E; --bg2:#0F3324; --deep:#071C14; --surface:rgba(242,240,230,.05); --tile:#0B2A1E; --tile-hi:#FFF21A; --tile-hi-fg:#0B2A1E;
  --fg:#F2F0E6; --fg2:#D5D9CF; --muted:#A9B5A6; --acc:#FFF21A; --acc-hi:#FFF21A; --acc2:#FFF21A; --mark:#FFF21A; --em-fg:#0B2A1E;
  --line:rgba(242,240,230,.14); --line-strong:rgba(242,240,230,.4);
  --btn-bg:#FFF21A; --btn-fg:#0B2A1E; --btn-hover:#F2F0E6; --btn-hover-fg:#0B2A1E; color-scheme:dark }
[data-palette="c"][data-tone="3"]{ /* Denim cobalt */
  --bg:#1F3BE0; --bg2:#2A47F0; --deep:#1630C4; --surface:rgba(255,255,255,.07); --tile:#1F3BE0; --tile-hi:#FFF21A; --tile-hi-fg:#171717;
  --fg:#F7F7F2; --fg2:#E3E7FF; --muted:#C3CCFF; --acc:#FFF21A; --acc-hi:#FFF21A; --acc2:#FFF21A; --mark:#FFF21A; --em-fg:#171717;
  --line:rgba(255,255,255,.2); --line-strong:rgba(255,255,255,.5);
  --btn-bg:#FFF21A; --btn-fg:#171717; --btn-hover:#F7F7F2; --btn-hover-fg:#171717; color-scheme:dark }
[data-palette="c"][data-tone="4"]{ /* Bruny deep sea */
  --bg:#0E3B3D; --bg2:#124749; --deep:#082A2B; --surface:rgba(242,240,230,.05); --tile:#0E3B3D; --tile-hi:#FFF21A; --tile-hi-fg:#0E3B3D;
  --fg:#F2F0E6; --fg2:#D3DEDC; --muted:#A9C2C0; --acc:#FFF21A; --acc-hi:#FFF21A; --acc2:#FFF21A; --mark:#FFF21A; --em-fg:#0E3B3D;
  --line:rgba(242,240,230,.14); --line-strong:rgba(242,240,230,.4);
  --btn-bg:#FFF21A; --btn-fg:#0E3B3D; --btn-hover:#F2F0E6; --btn-hover-fg:#0E3B3D; color-scheme:dark }
[data-palette="c"][data-tone="5"]{ /* Charcoal */
  --bg:#171717; --bg2:#202020; --deep:#0E0E0E; --surface:rgba(255,242,26,.05); --tile:#171717; --tile-hi:#FFF21A; --tile-hi-fg:#171717;
  --fg:#FFF21A; --fg2:#F3EC9A; --muted:#C9C26A; --acc:#FFF21A; --acc-hi:#FFF21A; --acc2:#FFF21A; --mark:#FFF21A; --em-fg:#171717;
  --line:rgba(255,242,26,.16); --line-strong:rgba(255,242,26,.5);
  --btn-bg:#FFF21A; --btn-fg:#171717; --btn-hover:#F3EC9A; --btn-hover-fg:#171717; color-scheme:dark }
[data-palette="c"] .photo figcaption span:last-child{background:var(--mark);color:var(--em-fg);padding:5px 9px;transform:rotate(-4deg);font-weight:600}
[data-palette="c"] .photo figcaption{align-items:flex-end}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background .5s,color .5s}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--acc2);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:var(--display-w)}
em{font-style:italic;color:var(--acc-hi)}
[data-palette="b"] em{font-weight:600}
[data-palette="c"] em{-webkit-box-decoration-break:clone;box-decoration-break:clone;font-style:normal;color:var(--em-fg);background:linear-gradient(transparent 6%,var(--mark) 6%,var(--mark) 98%,transparent 98%);padding:0 .08em}
.progress{position:fixed;top:env(safe-area-inset-top,0px);left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--acc);z-index:70}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:58px}
.brand{font-family:var(--display);font-weight:var(--display-bold);font-size:20px;text-decoration:none}
.brand span{color:var(--acc)}
.chap-now{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);flex:1;text-align:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chap-now b{color:var(--fg);font-weight:500}
.nav-cta{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line-strong);border-radius:999px;padding:8px 16px;white-space:nowrap;transition:border-color .2s,background .2s}
.nav-cta:hover{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 15%,transparent)}
@media (max-width:640px){.chap-now{display:none}}

/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(110% 90% at 80% 20%,var(--bg2) 0%,var(--bg) 55%,var(--deep) 100%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(36px,6vw,80px)}
.hero-copy{min-width:0;position:relative;z-index:2}
.hook{font-family:var(--display);font-weight:var(--display-w);font-size:clamp(38px,5.6vw,78px);line-height:1.02;letter-spacing:-.02em;margin:18px 0 22px}
[data-palette="c"] .hook{font-size:clamp(36px,5.2vw,72px);letter-spacing:-.035em;line-height:1}
.hook em{font-weight:var(--display-bold)}
[data-palette="a"] .glitch{position:relative;display:inline-block}
[data-palette="a"] .glitch::after{content:attr(data-text);position:absolute;left:0;top:0;color:var(--acc2);opacity:0;animation:glitch 6s steps(1) 2.2s infinite}
@keyframes glitch{0%,92%,100%{opacity:0;transform:none}93%{opacity:.8;transform:translate(3px,-2px);clip-path:inset(10% 0 55% 0)}95%{opacity:.7;transform:translate(-3px,1px);clip-path:inset(60% 0 8% 0)}97%{opacity:0}}
[data-palette="b"] .glitch{background:linear-gradient(100deg,var(--acc) 0%,var(--fg) 45%,var(--acc) 90%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:glow 6s ease-in-out infinite}
@keyframes glow{0%,100%{background-position:100% 0}50%{background-position:0 0}}
[data-palette="c"] .glitch{background-size:0 100%;background-repeat:no-repeat;animation:mark 1.1s .9s cubic-bezier(.2,.7,.2,1) forwards;background-image:linear-gradient(transparent 6%,var(--mark) 6%,var(--mark) 98%,transparent 98%)}
@keyframes mark{to{background-size:100% 100%}}
.lede{max-width:48ch;color:var(--fg2);margin:0 0 28px;font-size:17px}
.lede b{color:var(--fg);font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;padding:14px 22px;border-radius:999px;border:1px solid var(--line-strong);color:var(--fg);background:transparent;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.btn:hover{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 18%,transparent)}
.btn.solid{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.btn.solid:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
[data-palette="c"] .btn.solid:hover{color:var(--btn-hover-fg)}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.photo{position:relative;margin:0;min-width:0;border-radius:6px;overflow:hidden;aspect-ratio:3/4;max-width:100%}
[data-palette="c"] .photo{border-radius:0;overflow:visible}
[data-palette="c"] .photo img{box-shadow:12px 12px 0 var(--mark)}
.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:var(--photo-filter);transition:filter .5s}
.photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--deep) 85%,transparent) 100%),linear-gradient(90deg,color-mix(in srgb,var(--acc) 22%,transparent),transparent 45%);z-index:1;pointer-events:none}
[data-palette="c"] .photo::before{background:linear-gradient(180deg,transparent 55%,rgba(23,23,23,.75) 100%)}
.beam{position:absolute;z-index:1;left:30%;top:-30%;width:70px;height:160%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 40%,transparent) 40%,transparent);transform:rotate(16deg);filter:blur(8px);mix-blend-mode:screen;pointer-events:none;animation:sweep 7s ease-in-out infinite}
[data-palette="c"] .beam{display:none}
@keyframes sweep{0%,100%{left:20%}50%{left:70%}}
.photo figcaption{position:absolute;z-index:2;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#F4F4EE}
.scroll-cue{margin-top:36px;display:flex;align-items:center;gap:12px}
.scroll-cue .line{width:40px;height:2px;background:var(--acc);transform-origin:0 50%;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{transform:scaleX(0)}50%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:100% 50%}}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}.photo{aspect-ratio:4/3.4}.photo img{object-position:50% 38%}}

/* chapters */
.story{padding-block:clamp(56px,8vw,104px)}
.chapter{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px 56px;padding-block:clamp(40px,6vw,72px);border-top:1px solid var(--line)}
.chapter:first-child{border-top:0;padding-top:0}
.ch-rail{position:sticky;top:96px;align-self:start;min-width:0}
.ch-rail .num{font-family:var(--display);font-weight:var(--display-bold);font-size:clamp(56px,6vw,84px);line-height:.9;color:transparent;-webkit-text-stroke:1px var(--line-strong);font-variant-numeric:tabular-nums;transition:color .6s,-webkit-text-stroke-color .6s}
.chapter.lit .ch-rail .num{color:var(--acc);-webkit-text-stroke-color:var(--acc)}
.ch-rail .beat{display:block;margin-top:14px}
.ch-rail .place{display:block;font-family:var(--mono);font-size:11px;color:var(--acc2);letter-spacing:.14em;margin-top:6px}
[data-palette="c"] .ch-rail .place{color:var(--fg)}
.ch-body{min-width:0;max-width:68ch}
.ch-body h2{font-family:var(--display);font-size:clamp(30px,3.8vw,48px);line-height:1.06;letter-spacing:-.01em;margin-bottom:18px}
.ch-body p{margin:0 0 14px;color:var(--fg2)}
.ch-body p b{color:var(--fg);font-weight:600}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px;padding:0;list-style:none}
.facts li{font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:5px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.facts li b{color:var(--fg);font-weight:500}
.loop{margin-top:22px;font-family:var(--display);font-style:italic;font-size:clamp(19px,2vw,23px);color:var(--acc-hi);display:flex;gap:12px;align-items:baseline}
[data-palette="c"] .loop{font-style:normal;font-weight:700}
.loop::before{content:"";flex:0 0 28px;height:2px;background:var(--acc);transform:translateY(-6px)}
@media (max-width:760px){.chapter{grid-template-columns:1fr;gap:12px}.ch-rail{position:static;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}.ch-rail .num{font-size:48px}.ch-rail .beat,.ch-rail .place{margin-top:0}}

/* signal gap */
.signal{margin:22px 0 8px;border:1px solid var(--line);border-radius:6px;padding:18px 18px 14px;background:var(--surface)}
.signal .row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:10px}
.signal .row span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted)}
.signal .bar{height:10px;border-radius:2px;background:var(--line);overflow:hidden}
.signal .bar i{display:block;height:100%;width:var(--w);background:var(--acc2);transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
[data-palette="c"] .signal .bar i{background:var(--fg)}
.signal .row.seen .bar i{background:var(--acc)}
.signal .note{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.08em;margin:6px 0 0}
@media (max-width:520px){.signal .row{grid-template-columns:1fr;gap:4px}}

/* channel mix (chapter 3) */
.mix{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 8px;padding:0;list-style:none}
.mix li{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:4px;font-size:13.5px;color:var(--fg);background:var(--surface);transition:transform .25s,border-color .25s}
.mix li:hover{transform:translateY(-2px);border-color:var(--acc)}
.mix li i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-hi)}

/* signal chain */
.chain{list-style:none;margin:22px 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.chain li{position:relative;border:1px solid var(--line);border-radius:6px;padding:14px 14px 12px;background:var(--surface);min-width:0;overflow:hidden;transition:border-color .4s}
.chain li::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,transparent,var(--acc),transparent);background-size:200% 100%;background-position:200% 0;animation:pulse 4.8s linear infinite;animation-delay:calc(var(--i,0) * .8s)}
@keyframes pulse{0%{background-position:200% 0}30%{background-position:-100% 0}100%{background-position:-100% 0}}
.chain li:hover{border-color:var(--acc)}
.chain .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc-hi);margin-bottom:6px}
.chain b{display:block;font-family:var(--display);font-weight:var(--display-w);font-size:19px;line-height:1.15;color:var(--fg)}
.chain small{display:block;margin-top:6px;color:var(--muted);font-size:13px;line-height:1.45}
@media (max-width:900px){.chain{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.chain{grid-template-columns:1fr}}

/* three rings */
.rings-sec{border-top:1px solid var(--line);padding-block:clamp(56px,8vw,104px)}
.rings-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.rings-grid h2{font-family:var(--display);font-size:clamp(32px,4.4vw,56px);line-height:1.04;margin:14px 0 18px}
.rings-grid p{color:var(--fg2);margin:0 0 14px;max-width:52ch}
.rings{position:relative;width:min(100%,440px);aspect-ratio:1;margin:0 auto}
.ring{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;cursor:pointer;transition:background .35s,border-color .35s;background:transparent;padding:0;font:inherit;color:inherit}
.ring span{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.ring.r1{left:19%;top:0}.ring.r2{left:0;top:34%}.ring.r3{left:38%;top:34%}
.ring.r1 span{transform:translateY(-34%)}.ring.r2 span{transform:translate(-26%,22%)}.ring.r3 span{transform:translate(26%,22%)}
.ring:hover,.ring.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.ring:hover span,.ring.on span{color:var(--fg)}
.core{position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);font-family:var(--display);font-weight:var(--display-bold);font-size:15px;color:var(--acc-hi);pointer-events:none;text-align:center;line-height:1.1}
.ring-detail{min-height:6.5em;border-left:2px solid var(--acc);padding-left:16px;margin-top:8px}
.ring-detail h3{font-family:var(--display);font-size:22px;margin-bottom:4px}
.ring-detail p{color:var(--muted);margin:0;font-size:15px}
@media (max-width:820px){.rings-grid{grid-template-columns:1fr}}

/* proof */
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:4px;margin-top:56px}
.metric{padding:24px 22px;border-right:1px solid var(--line);min-width:0}
.metric:last-child{border-right:0}
.metric .n{font-family:var(--display);font-weight:var(--display-bold);font-size:clamp(36px,4.4vw,56px);line-height:1;font-variant-numeric:tabular-nums}
.metric .n .u{color:var(--acc-hi)}
[data-palette="c"] .metric .n .u{color:var(--fg);opacity:.55}
.metric p{margin:10px 0 0;color:var(--muted);font-size:14px}
@media (max-width:820px){.proof{grid-template-columns:repeat(2,minmax(0,1fr))}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* brand wall */
.brands-sec{border-top:1px solid var(--line);padding-block:clamp(48px,7vw,88px)}
.sec-head{display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between;align-items:end;margin-bottom:22px}
.sec-head h2{font-family:var(--display);font-size:clamp(28px,3.4vw,42px);line-height:1.08}
.sec-head p{color:var(--muted);margin:0;max-width:44ch}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.filters button{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--fg);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.filters button[aria-pressed="true"]{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.filters .count{opacity:.6;margin-left:6px}
.wall{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line)}
.tile{flex:1 1 170px;min-height:140px;position:relative;perspective:900px;border:0;padding:0;background:transparent;cursor:pointer;font:inherit;color:inherit;text-align:left}
.tile .in{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.tile.flip .in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--tile);display:flex;flex-direction:column;justify-content:space-between;gap:6px;padding:14px 16px}
.face.front .nm{padding-right:18px;font-family:var(--display);font-weight:var(--display-bold);font-size:clamp(17px,1.6vw,21px);line-height:1.1;color:var(--fg);opacity:.78;transition:opacity .3s}
.face.front .meta{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.face.front .plus{position:absolute;right:14px;top:12px;font-family:var(--mono);font-size:14px;color:var(--acc-hi);transition:transform .3s}
.tile:hover .face.front{background:var(--tile-hi)}
[data-palette="c"] .tile:hover .face.front .nm,[data-palette="c"] .tile:hover .face.front .meta,[data-palette="c"] .tile:hover .face.front .plus{color:var(--tile-hi-fg)}
.tile:hover .nm{opacity:1}
.tile:hover .plus{transform:rotate(90deg)}
.face.back{transform:rotateY(180deg);background:var(--btn-bg);color:var(--btn-fg)}
.face.back b{font-family:var(--display);font-weight:var(--display-bold);font-size:16px;line-height:1.15}
.face.back span{font-size:12.5px;line-height:1.4;opacity:.92}
.face.back small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.wall-note{margin-top:12px}

/* self-check */
.check{display:grid;gap:8px;margin:22px 0 16px;padding:0;list-style:none}
.check label{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--surface);cursor:pointer;transition:border-color .2s}
.check label:hover{border-color:var(--acc)}
.check input{accent-color:var(--acc);width:18px;height:18px;margin-top:3px;flex:0 0 auto}
.check span{color:var(--fg2);font-size:15px}
.score{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line)}
.score .big{font-family:var(--display);font-weight:var(--display-bold);font-size:44px;line-height:1;color:var(--acc-hi);font-variant-numeric:tabular-nums}
.score p{margin:0;color:var(--fg2);max-width:40ch;flex:1;min-width:200px}

/* close */
.close{border-top:1px solid var(--line);padding-block:clamp(56px,8vw,104px);background:radial-gradient(80% 120% at 85% 100%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 60%),var(--bg)}
.close .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
.close h2{font-family:var(--display);font-size:clamp(40px,5.4vw,74px);line-height:.98;letter-spacing:-.02em;margin:14px 0 20px}
.close h2 .l1{color:var(--acc-hi);font-weight:var(--display-bold);display:block}
.close p{color:var(--muted);max-width:44ch}
.li-link{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none;font-family:var(--display);font-size:22px;transition:color .2s,padding .3s}
.li-link:hover{color:var(--acc-hi);padding-left:8px}
form{display:grid;gap:14px;align-content:start}
.field{display:grid;gap:6px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line-strong);border-radius:4px;padding:11px 14px;transition:border-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--acc)}
.field textarea{min-height:120px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.turnstile{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px dashed var(--line-strong);border-radius:4px;padding:11px 14px}
.status{font-family:var(--mono);font-size:12px;color:var(--fg2);min-height:1.4em;margin:0}
@media (max-width:820px){.close .grid{grid-template-columns:1fr}}
footer{border-top:1px solid var(--line);padding-block:24px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}

/* palette switcher (preview only) */
.palette{position:fixed;z-index:80;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;gap:6px;align-items:center;padding:6px 6px 6px 14px;border-radius:999px;background:#111111;color:#EEEEEE;box-shadow:0 8px 30px rgba(0,0,0,.35);font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.palette button{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;display:grid;place-items:center;font:inherit;font-weight:600}
.palette button[aria-pressed="true"]{border-color:#FFFFFF}
.palette .t1{background:linear-gradient(135deg,#F0EEE9 55%,#FFF21A 55%);color:#171717}
.palette .t2{background:linear-gradient(135deg,#0B2A1E 55%,#FFF21A 55%);color:#FFF21A}
.palette .t3{background:linear-gradient(135deg,#1F3BE0 55%,#FFF21A 55%);color:#FFF21A}
.palette .t4{background:linear-gradient(135deg,#0E3B3D 55%,#FFF21A 55%);color:#FFF21A}
.palette .t5{background:linear-gradient(135deg,#171717 55%,#FFF21A 55%);color:#FFF21A}
.palette .tip{min-width:7.5em;text-align:right;color:#CCCCCC}

/* reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
  [data-palette="c"] .glitch{background-size:100% 100%}
}

[data-palette="c"][data-tone="6"]{ /* Forest + crimson, blended with bone cream and sage */
  --bg:#0B2A1E; --bg2:#0F3324; --deep:#071C14; --surface:rgba(242,232,213,.05); --tile:#0B2A1E; --tile-hi:#A31C1B; --tile-hi-fg:#F2E8D5;
  --fg:#F2E8D5; --fg2:#DCD6C4; --muted:#B7C4A8; --acc:#E5484A; --acc-hi:#F2E8D5; --acc2:#B7C4A8; --mark:#A31C1B; --em-fg:#F2E8D5;
  --line:rgba(242,232,213,.14); --line-strong:rgba(242,232,213,.4);
  --btn-bg:#A31C1B; --btn-fg:#F2E8D5; --btn-hover:#C8302C; --btn-hover-fg:#F2E8D5; color-scheme:dark }
.palette .t6{background:linear-gradient(135deg,#0B2A1E 55%,#A31C1B 55%);color:#F2E8D5}

[data-palette="c"][data-tone="7"]{ /* Forest + Bruny sand */
  --bg:#0B2A1E; --bg2:#0F3324; --deep:#071C14; --surface:rgba(234,212,178,.05); --tile:#0B2A1E; --tile-hi:#EAD4B2; --tile-hi-fg:#0B2A1E;
  --fg:#F3EBDD; --fg2:#DED6C6; --muted:#B9BC9C; --acc:#EAD4B2; --acc-hi:#EAD4B2; --acc2:#EAD4B2; --mark:#EAD4B2; --em-fg:#0B2A1E;
  --line:rgba(243,235,221,.14); --line-strong:rgba(243,235,221,.4);
  --btn-bg:#EAD4B2; --btn-fg:#0B2A1E; --btn-hover:#F3EBDD; --btn-hover-fg:#0B2A1E; color-scheme:dark }
[data-palette="c"][data-tone="8"]{ /* Bruny scrub olive + sand */
  --bg:#262A17; --bg2:#30341D; --deep:#1A1D0F; --surface:rgba(234,212,178,.05); --tile:#262A17; --tile-hi:#EAD4B2; --tile-hi-fg:#262A17;
  --fg:#F3EBDD; --fg2:#DED6C6; --muted:#BFC09C; --acc:#EAD4B2; --acc-hi:#EAD4B2; --acc2:#EAD4B2; --mark:#EAD4B2; --em-fg:#262A17;
  --line:rgba(243,235,221,.14); --line-strong:rgba(243,235,221,.4);
  --btn-bg:#EAD4B2; --btn-fg:#262A17; --btn-hover:#F3EBDD; --btn-hover-fg:#262A17; color-scheme:dark }
.palette .t7{background:linear-gradient(135deg,#0B2A1E 55%,#EAD4B2 55%);color:#EAD4B2}
.palette .t8{background:linear-gradient(135deg,#262A17 55%,#EAD4B2 55%);color:#EAD4B2}

/* growth check extras */
.check .area{display:inline-block;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:2px 7px;margin-right:10px;border-radius:3px;background:var(--mark,var(--acc));color:var(--em-fg,var(--bg));vertical-align:2px}
.check{grid-template-columns:1fr}
.check label{padding:10px 14px}
.gaps{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:0}
.gaps .label{margin-right:4px}
.gap{font-family:var(--mono);font-size:11px;padding:4px 10px;border:1px dashed var(--line-strong);border-radius:999px;color:var(--fg2)}

/* Typography rhythm for the wide display face (Syne): room for descenders, highlighter band clear of the line above */
[data-palette="c"] .hook{font-size:clamp(34px,4.9vw,68px);line-height:1.12;letter-spacing:-.03em;margin:20px 0 30px}
[data-palette="c"] em{background:linear-gradient(transparent 16%,var(--mark) 16%,var(--mark) 97%,transparent 97%);padding:0 .1em;margin:0 -.04em}
[data-palette="c"] .glitch{background-image:linear-gradient(transparent 16%,var(--mark) 16%,var(--mark) 97%,transparent 97%)}
[data-palette="c"] .ch-body h2{line-height:1.14;letter-spacing:-.02em;margin-bottom:22px}
[data-palette="c"] .rings-grid h2{line-height:1.12;letter-spacing:-.02em}
[data-palette="c"] .sec-head h2{line-height:1.14}
[data-palette="c"] .close h2{line-height:1.08;letter-spacing:-.03em}
[data-palette="c"] .close h2 .l1{margin-bottom:.06em}
[data-palette="c"] .metric .n{line-height:1.05}
[data-palette="c"] .chain b{line-height:1.2}
[data-palette="c"] .face.front .nm,[data-palette="c"] .face.back b{line-height:1.2}
[data-palette="c"] .ch-rail .num{line-height:1}
@media (max-width:520px){[data-palette="c"] .hook{line-height:1.14}}

/* "guesses" reads as unconfirmed: sand colour with a dashed underline, resolved by the solid highlight on "measured" */
.guess{color:var(--mark,var(--acc));text-decoration:underline dashed;text-decoration-color:var(--mark,var(--acc));text-decoration-thickness:.055em;text-underline-offset:.14em;text-decoration-skip-ink:none}

/* Proof strip v2: fits the wide display face, and each stat opens to show how */
.proof .metric{display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left;font:inherit;color:inherit;background:transparent;border:0;border-right:1px solid var(--line);padding:26px 22px 22px;cursor:pointer;position:relative;transition:background .3s}
.proof .metric:last-child{border-right:0}
.proof .metric:hover,.proof .metric[aria-expanded="true"]{background:var(--surface)}
.proof .metric .n{display:flex;align-items:baseline;flex-wrap:nowrap;white-space:nowrap;font-size:clamp(30px,3.1vw,46px);line-height:1.05;letter-spacing:-.02em;max-width:100%}
.proof .metric .n .u{font-size:.62em;margin:0 .04em}
.proof .metric .lbl{color:var(--muted);font-size:14px;line-height:1.45}
.proof .metric .how{display:block;max-height:0;overflow:hidden;opacity:0;color:var(--fg2);font-size:13.5px;line-height:1.5;border-top:1px solid transparent;transition:max-height .45s cubic-bezier(.2,.7,.2,1),opacity .35s,padding .35s,border-color .35s}
.proof .metric:hover .how,.proof .metric:focus-visible .how,.proof .metric[aria-expanded="true"] .how{max-height:6em;opacity:1;padding-top:10px;border-top-color:var(--line)}
.proof .metric .tap{position:absolute;top:12px;right:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc-hi);opacity:.7;transition:opacity .3s}
.proof .metric:hover .tap,.proof .metric[aria-expanded="true"] .tap{opacity:0}
@media (max-width:820px){.proof .metric:nth-child(2){border-right:0}.proof .metric:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:420px){.proof{grid-template-columns:1fr}.proof .metric{border-right:0;border-bottom:1px solid var(--line)}.proof .metric:last-child{border-bottom:0}}
/* Brand wall: wide display face needs wider tiles and smaller names */
[data-palette="c"] .tile{flex-basis:200px}
[data-palette="c"] .face.front .nm{font-size:clamp(14px,1.08vw,16px);letter-spacing:-.015em;overflow-wrap:normal;hyphens:manual}
[data-palette="c"] .face.back b{font-size:15px}
/* Logo: name plus pronunciation */
.brand{display:inline-flex;align-items:baseline;gap:0;white-space:nowrap}
.brand .say{margin-left:10px;padding:3px 8px;border:1px solid var(--line-strong);border-radius:999px;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transform:translateY(-2px)}
@media (max-width:380px){.brand .say{display:none}}

/* ===== Flight: Hyderabad to Melbourne (pinned, scroll-driven) ===== */
.story-cont{padding-top:clamp(40px,6vw,72px)}
.flight{position:relative;height:340vh;border-top:1px solid var(--line)}
.flight-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;background:radial-gradient(70% 60% at 50% 50%,var(--bg2),var(--bg) 70%)}
.fstage{position:relative;width:min(94vw,calc(86vh*1000/784));aspect-ratio:1000/784;transform:scale(var(--fz,1));transform-origin:var(--fo,50% 50%);transition:transform .1s linear}
.fmap{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fdots{fill:none;stroke:var(--acc);stroke-width:4.2;stroke-linecap:round;opacity:.28}
.froute-bg{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-dasharray:3 9}
.froute{fill:none;stroke:var(--mark,var(--acc));stroke-width:3;stroke-linecap:round}
.fpin circle{fill:var(--mark,var(--acc))}
.fpin .fpulse{fill:none;stroke:var(--mark,var(--acc));stroke-width:2;animation:fpulse 2.2s ease-out infinite;transform-origin:center}
.fpin-mel{opacity:var(--fmel,0);transition:opacity .4s}
@keyframes fpulse{from{transform:scale(1);opacity:.9}to{transform:scale(3.4);opacity:0}}
.fplane path{fill:var(--fg)}
.fcity{position:absolute;transform:translate(14px,-50%);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);white-space:nowrap}
.fcity-mel{opacity:var(--fmel,0);transition:opacity .4s}
.fpill{position:absolute;transform:translate(var(--dx),var(--dy)) scale(.9);display:inline-flex;gap:8px;align-items:baseline;padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line-strong);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap;opacity:0;transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.2,1)}
.fpill b{font-size:12.5px;font-weight:600;color:var(--fg)}
.fpill i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--muted)}
.fpill.on{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1)}
.fpill.past.dim{opacity:.35}
.fpill.next b{color:var(--fg)}
.fpill.next.on{border-color:var(--mark,var(--acc))}
.fcard{position:absolute;left:50%;bottom:clamp(20px,6vh,64px);transform:translateX(-50%);width:min(440px,calc(100vw - 32px));min-height:150px;padding:20px 24px;border-radius:14px;background:color-mix(in srgb,var(--bg) 88%,transparent);border:1px solid var(--line-strong);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.fstep{position:absolute;inset:20px 24px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.fstep.on{opacity:1;transform:none;position:relative;inset:auto}
.fstep h3{font-family:var(--display);font-weight:var(--display-bold);font-size:clamp(24px,2.6vw,32px);line-height:1.12;margin:8px 0 8px;font-variant-numeric:tabular-nums}
.fstep p{margin:0;color:var(--fg2);font-size:14.5px;line-height:1.55}
.fprog{position:absolute;left:50%;top:clamp(76px,11vh,110px);transform:translateX(-50%);width:min(240px,50vw);height:2px;background:var(--line)}
.fprog i{display:block;height:100%;width:0;background:var(--mark,var(--acc))}
@media (max-width:700px){
  .flight{height:300vh}
  .fstage{width:118vw}
  .fpill{transform:translate(calc(var(--dx)*.62),calc(var(--dy)*.72)) scale(.85)}
  .fpill.on{transform:translate(calc(var(--dx)*.62),calc(var(--dy)*.72)) scale(.92)}
  .fcity{font-size:9px}
  .fcard{min-height:138px;padding:16px 18px}
  .fstep{inset:16px 18px}
}

/* ===== The switch: agency to in-house (pinned, two preview variants) ===== */
.shift{position:relative;height:260vh;border-top:1px solid var(--line)}
.shift-stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:center}
.shift-copy{position:relative;min-width:0}
.sstep{transition:opacity .45s,transform .45s}
.sstep[data-step="1"]{position:absolute;left:0;right:0;top:34px}
.sstep h3{font-family:var(--display);font-weight:var(--display-w);font-size:clamp(28px,3.4vw,44px);line-height:1.12;margin:14px 0 14px}
.sstep p{color:var(--fg2);margin:0;max-width:44ch}
.sstep.off{opacity:0;transform:translateY(12px);pointer-events:none}
.variant-switch{display:flex;gap:6px;align-items:center;margin-top:210px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.variant-switch button{font:inherit;letter-spacing:.12em;padding:7px 12px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--fg);cursor:pointer}
.variant-switch button[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.shift-stage{position:relative;min-width:0;aspect-ratio:1;max-height:78vh;width:100%;justify-self:center}
.shift-stage[data-variant="morph"] .pipe,.shift-stage[data-variant="pipe"] .morph{display:none}
/* morph */
.morph{position:absolute;inset:0}
.mlines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mlines line{stroke:var(--line-strong);stroke-width:.35;vector-effect:non-scaling-stroke}
.mlines line.dash{stroke-dasharray:4 5}
.mlines line.solid{stroke:var(--mark,var(--acc));stroke-width:1.5}
.mnode{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:7px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--bg);font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--fg)}
.mcap{background:var(--mark,var(--acc));color:var(--em-fg,var(--bg));border-color:transparent}
.mcore{padding:14px 18px;font-family:var(--display);font-weight:var(--display-bold);font-size:15px;background:var(--fg);color:var(--bg);border:0;z-index:2;display:grid}
.mcore span{grid-area:1/1;text-align:center;transition:opacity .3s}
.mcore .mc-b{opacity:0}
.shift.in-house .mcore .mc-a{opacity:0}.shift.in-house .mcore .mc-b{opacity:1}
/* pipeline */
.pipe{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:22px}
.prow{display:grid;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.plabel{grid-area:1/1;transition:opacity .3s}.plabel-b{opacity:0}
.shift.in-house .plabel{opacity:0}.shift.in-house .plabel-b{opacity:1;color:var(--fg)}
.ptrack{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.pline{position:absolute;left:7%;right:7%;top:15px;height:2px;background:var(--line)}
.pline i{display:block;height:100%;width:0;background:var(--mark,var(--acc))}
.pstep{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.pdot{width:32px;height:32px;border-radius:50%;border:1.5px dashed var(--line-strong);background:var(--bg);transition:background .35s,border-color .35s,transform .35s}
.pstep b{font-size:12.5px;font-weight:600;color:var(--muted);transition:color .35s}
.pstep.lit .pdot{background:var(--mark,var(--acc));border:1.5px solid var(--mark,var(--acc));transform:scale(1.08)}
.pstep.lit b{color:var(--fg)}
.ploop{align-self:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--mark,var(--acc));opacity:0;transition:opacity .4s}
.shift.loop .ploop{opacity:1}
@media (max-width:820px){
  .shift{height:240vh}
  .shift-stick{grid-template-columns:1fr;align-content:center;gap:12px}
  .sstep h3{font-size:24px;margin:8px 0}
  .sstep p{font-size:14px}
  .sstep[data-step="1"]{top:24px}
  .variant-switch{margin-top:150px}
  .shift-stage{max-height:52vh;width:min(100%,52vh)}
  .ptrack{grid-template-columns:repeat(4,1fr);row-gap:18px}
  .pline{display:none}
  .mnode{font-size:11px;padding:5px 9px}
}
@media (prefers-reduced-motion:reduce){
  .flight,.shift{height:auto}
  .flight-stick,.shift-stick{position:relative;height:auto;padding-block:48px}
  .fpill{opacity:1}
}

/* flight refinements */
.fpin .fpulse{transform-box:fill-box}
.fcard{left:max(16px,4vw);transform:none}
.fprog{position:static;transform:none;width:100%;margin:0 0 14px}
.fstep{inset:auto;left:24px;right:24px;top:36px}
.fstep.on{left:auto;right:auto;top:auto}
@media (max-width:700px){
  .flight-stick{place-items:start center;padding-top:72px}
  .fstage{width:140vw}
  .fpill{transform:translate(var(--dxm,var(--dx)),calc(var(--dy)*.8)) scale(.82)}
  .fpill.on{transform:translate(var(--dxm,var(--dx)),calc(var(--dy)*.8)) scale(.88)}
  .fpill.past{transform:translate(calc(var(--dx)*.55),calc(var(--dy)*.8)) scale(.82)}
  .fpill.past.on{transform:translate(calc(var(--dx)*.55),calc(var(--dy)*.8)) scale(.88)}
  .fcard{left:16px;right:16px;width:auto}
  .fstep{left:18px;right:18px;top:32px}
}
@media (max-width:700px){.fstage{justify-self:start;margin-left:-26vw}}
@media (max-width:700px){.fpill.past,.fpill.past.on{transform:translate(var(--mx),var(--my)) scale(.86)}}

/* v2: no pinning. Each story plays once, quickly, when it scrolls into view */
.flight{height:auto}
.flight-stick{position:relative;height:auto;min-height:min(100vh,860px);padding-block:clamp(56px,8vh,96px)}
.shift{height:auto}
.shift-stick{position:relative;height:auto;padding-block:clamp(56px,8vw,104px)}
.sstep[data-step="1"]{top:30px}
.shift-copy{min-height:260px}
.fcity-mel{transform:translate(calc(-100% - 14px),-50%)}
.replay{position:absolute;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--bg);color:var(--muted);cursor:pointer;opacity:0;transition:opacity .4s,color .2s,border-color .2s}
.replay.show{opacity:1}
.replay:hover{color:var(--fg);border-color:var(--mark,var(--acc))}
#freplay{right:max(16px,4vw);bottom:clamp(20px,6vh,64px)}
#sreplay{right:0;bottom:0}
@media (max-width:820px){.flight{height:auto}.shift{height:auto}.shift-copy{min-height:200px}.shift-stick{padding-block:48px}}
@media (max-width:700px){.flight-stick{padding-top:72px;min-height:100svh}#freplay{bottom:auto;top:76px;right:16px}}
.sstep{transition:opacity .22s,transform .22s}
.sstep:not(.off){transition-delay:.18s}

/* Positions live here, not in style="" attributes: the site CSP blocks inline styles */
.signal .bar i{--w:100%}
#seen-bar{--w:62%}
.fcity-hyd,.fp1,.fp2,.fp3{left:28.51%;top:26.76%}
.fcity-mel,.fp4,.fp5,.fp6{left:77.75%;top:86.75%}
.fp1{--dx:-60px;--dy:-150px;--mx:-6px;--my:34px}
.fp2{--dx:-90px;--dy:-108px;--mx:-6px;--my:72px}
.fp3{--dx:-40px;--dy:-66px;--mx:-6px;--my:110px}
.fp4{--dx:24px;--dy:-150px;--dxm:-150px}
.fp5{--dx:24px;--dy:-108px;--dxm:-160px}
.fp6{--dx:24px;--dy:-66px;--dxm:-120px}

/* Pill layout v3: no overlaps, nothing under the nav or off-screen */
#flight .fp1{--py:-44px;--my:22px}
#flight .fp2{--py:0px;--my:60px}
#flight .fp3{--py:44px;--my:98px}
#flight .fp4{--ny:-44px;--nm:22px}
#flight .fp5{--ny:0px;--nm:60px}
#flight .fp6{--ny:44px;--nm:98px}
@media (min-width:701px){
  #flight .fpill.past{transform-origin:right center;transform:translate(calc(-100% - 18px),calc(-50% + var(--py))) scale(calc(var(--ps,1)*.92))}
  #flight .fpill.past.on{transform:translate(calc(-100% - 18px),calc(-50% + var(--py))) scale(var(--ps,1))}
  #flight .fpill.next{transform-origin:left center;transform:translate(18px,calc(-50% + var(--ny))) scale(calc(var(--ns,1)*.92))}
  #flight .fpill.next.on{transform:translate(18px,calc(-50% + var(--ny))) scale(var(--ns,1))}
  #flight .fcity-hyd{transform:translate(14px,-50%)}
  #flight .fcity-mel{transform:translate(calc(-100% - 14px),-50%)}
}
@media (max-width:700px){
  #flight .fpill.past,#flight .fpill.past.on{transform-origin:left top;transform:translate(-6px,var(--my)) scale(.86)}
  #flight .fpill.next,#flight .fpill.next.on{transform-origin:right top;transform:translate(calc(-100% + 10px),var(--nm)) scale(.86)}
}
@media (max-width:700px){
  #flight .flight-stick{display:flex;flex-direction:column;align-items:flex-start;min-height:0;padding-bottom:56px}
  #flight .fstage{flex:none;margin-left:-26vw}
  #flight .fcard{position:relative;left:auto;right:auto;bottom:auto;width:auto;align-self:stretch;margin:100px 16px 0}
  #flight .fp1{--my:88px}#flight .fp2{--my:126px}#flight .fp3{--my:164px}
}
#flight .fcity-hyd{transform:translate(10px,calc(-100% - 8px))}