/* ————— Pinnacle Manchester · Webild "Le Cercle" dynamic ————— */
:root{
  --ink:#141210;
  --base:#FAF8F5;
  --base-2:#F2EEE7;
  --card:#FFFFFF;
  --line:rgba(20,18,16,.1);
  --text:#1A1816;
  --muted:rgba(26,24,22,.62);
  --faint:rgba(26,24,22,.42);
  --porcelain:#F4EFE6;
  --porcelain-dim:rgba(244,239,230,.78);
  --gold:#D4AF37;
  --gold-deep:#B08A2E;
  --gold-dark:#8F7420;
  --gold-glow:rgba(212,175,55,.35);
  --serif:"Cinzel",serif;
  --head:"Questrial",system-ui,sans-serif;
  --sans:"Inter Tight",system-ui,sans-serif;
  --mono:"IBM Plex Mono",monospace;
  --r:14px;
  --r-lg:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--base);
  color:var(--text);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* grain — barely there on cream */
#grain{position:fixed;inset:-25%;width:150%;height:150%;pointer-events:none;z-index:80;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}}

/* cinematic letterbox intro */
.cine-bar{position:fixed;left:0;right:0;height:9vh;background:#0A0908;z-index:180;pointer-events:none;
  transition:transform 1.4s cubic-bezier(.76,0,.24,1) .35s}
.cine-top{top:0;transform-origin:top}
.cine-bottom{bottom:0;transform-origin:bottom}
body.ready .cine-top{transform:scaleY(0)}
body.ready .cine-bottom{transform:scaleY(0)}

/* scroll progress */
#progressBar{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  transform:scaleX(0);transform-origin:left;z-index:150;pointer-events:none}

/* trailing cursor ring */
#cursorRing{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid rgba(176,138,46,.55);border-radius:50%;
  pointer-events:none;z-index:300;transform:translate(-50%,-50%);opacity:0;
  transition:width .35s ease,height .35s ease,border-color .35s ease,opacity .4s ease}
#cursorRing.on{opacity:1}
#cursorRing.grow{width:58px;height:58px;border-color:var(--gold)}
@media(pointer:coarse){#cursorRing{display:none}}

/* ————— loader ————— */
#loader{position:fixed;inset:0;z-index:200;background:#100E0C;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;transition:transform 1s cubic-bezier(.76,0,.24,1),visibility 1s}
#loader.done{transform:translateY(-101%);visibility:hidden}
.loader-emblem{width:64px;opacity:.9;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.loader-line{width:min(320px,60vw);height:1px;background:rgba(244,239,230,.12)}
#loaderFill{display:block;height:100%;width:0%;background:var(--gold);transition:width .25s ease}
.loader-meta{display:flex;justify-content:space-between;width:min(320px,60vw);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.25em;color:var(--porcelain-dim)}

/* ————— nav ————— */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:34px;
  padding:20px clamp(20px,4vw,54px);
  transition:background .5s ease,backdrop-filter .5s ease,padding .5s ease,border-color .5s,color .5s;
  border-bottom:1px solid transparent;color:#fff}
#nav.scrolled{background:rgba(250,248,245,.86);backdrop-filter:blur(12px);padding:13px clamp(20px,4vw,54px);
  border-bottom-color:var(--line);color:var(--text)}
.nav-brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.nav-brand img{width:30px;transition:filter .5s}
#nav.scrolled .nav-brand img{filter:invert(.85) sepia(.2)}
.nav-brand span{font-family:var(--serif);font-size:1.02rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.1;display:flex;flex-direction:column;color:inherit}
.nav-brand em{font-style:normal;font-family:var(--sans);font-weight:600;font-size:.5rem;letter-spacing:.44em;color:var(--gold)}
.nav-links{display:flex;gap:26px}
.nav-links a{font-family:var(--sans);font-weight:500;font-size:.88rem;color:inherit;opacity:.85;transition:opacity .3s,color .3s}
.nav-links a:hover{opacity:1;color:var(--gold-deep)}
.nav-cta{font-family:var(--sans);font-weight:600;font-size:.85rem;
  color:#fff;background:rgba(16,14,12,.92);padding:11px 22px;border-radius:12px;transition:background .3s,transform .3s,color .3s}
.nav-cta:hover{background:var(--gold);color:var(--ink);transform:translateY(-1px)}
@media(max-width:820px){.nav-links{display:none}}

/* ————— acts / pinning ————— */
.act{position:relative}
.act .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.act-dusk{height:170vh}
.act-words{height:190vh}
.act-cloud{height:320vh}
.act-type{height:150vh}

/* melt overlays (JS drives opacity) */
.melt{position:absolute;inset:0;background:var(--base);opacity:0;pointer-events:none;z-index:6;will-change:opacity}

/* ————— ACT I · dusk (the "video hero") ————— */
.act-dusk .pin{background:#100E0C}
.act-dusk .pin::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(120% 100% at 50% 45%,transparent 62%,rgba(6,5,8,.55) 100%)}
.sky{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 100%,rgba(255,176,80,.6) 0%,rgba(211,116,44,.42) 26%,rgba(114,58,34,.34) 48%,rgba(24,18,18,.85) 78%),
    linear-gradient(to bottom,#12101E 0%,#2C1B26 30%,#5C3120 55%,#9A5A2C 74%,#C97F3B 88%,#EFA457 100%);
}
.sky::before,.sky::after{content:"";position:absolute;left:-20%;width:140%;height:12%;border-radius:50%;
  filter:blur(26px);opacity:.35;will-change:transform}
.sky::before{top:46%;background:linear-gradient(90deg,transparent,rgba(214,120,52,.5),transparent);animation:driftA 26s ease-in-out infinite alternate}
.sky::after{top:58%;background:linear-gradient(90deg,transparent,rgba(255,170,90,.35),transparent);animation:driftB 34s ease-in-out infinite alternate}
@keyframes driftA{from{transform:translateX(-4%)}to{transform:translateX(5%)}}
@keyframes driftB{from{transform:translateX(4%)}to{transform:translateX(-5%)}}
.horizon{position:absolute;left:0;right:0;bottom:21.5%;height:2px;
  background:linear-gradient(90deg,transparent 12%,rgba(255,190,110,.55) 42%,rgba(255,220,160,.85) 50%,rgba(255,190,110,.55) 58%,transparent 88%);
  filter:blur(1px)}
.sun{position:absolute;left:50%;bottom:24%;width:34vmin;height:34vmin;border-radius:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle,#FFE9C4 0%,#FFC873 28%,rgba(255,166,80,.55) 55%,rgba(255,150,60,0) 72%);
  filter:blur(2px);will-change:transform,opacity;animation:sunBreathe 7s ease-in-out infinite alternate}
@keyframes sunBreathe{from{opacity:.94}to{opacity:1.0}}
.haze{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,8,.4),transparent 40%)}
.ground{position:absolute;left:0;right:0;bottom:0;height:22%;
  background:linear-gradient(to bottom,rgba(20,12,8,.1),#0D0A08 55%)}
.ground::before{content:"";position:absolute;left:50%;top:-2px;width:38vmin;height:40%;transform:translateX(-50%);
  background:linear-gradient(to bottom,rgba(255,180,95,.32),transparent 80%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);filter:blur(6px)}
.star-field{position:absolute;top:0;left:0;width:2px;height:2px;border-radius:50%;background:transparent;opacity:0;will-change:opacity}
.silhouette{position:absolute;left:50%;bottom:12%;width:min(74vw,980px);transform:translateX(-50%);will-change:transform}
.silhouette picture{display:block;width:100%}
.silhouette img{width:100%;filter:brightness(0.1) contrast(1.12) drop-shadow(0 0 30px rgba(255,160,70,.22))}
.silhouette::after{content:"";position:absolute;left:6%;right:6%;bottom:-3.5%;height:9%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.75),transparent 70%)}
.silhouette .mirror-wrap{position:absolute;top:99%;left:0;width:100%}
.silhouette .mirror{position:absolute;top:0;left:0;transform:scaleY(-1);opacity:.2;filter:brightness(0.08) blur(4px);
  -webkit-mask-image:linear-gradient(to top,transparent 40%,rgba(0,0,0,.75));mask-image:linear-gradient(to top,transparent 40%,rgba(0,0,0,.75))}
.night-veil{position:absolute;inset:0;background:
  radial-gradient(100% 80% at 50% 100%,rgba(12,11,16,.2) 0%,rgba(10,10,16,.85) 70%),#0A0A12;opacity:0}

/* hero text block — Webild left composition */
.mast{position:absolute;left:clamp(22px,5.5vw,80px);right:clamp(22px,5.5vw,80px);top:16%;max-width:680px;
  text-align:left;pointer-events:none}
.hero-chip,.mast-sub,.mast-cta{opacity:0;transform:translateY(26px);
  transition:opacity .9s ease,transform 1s cubic-bezier(.22,1,.36,1)}
.hero-chip{transition-delay:.5s}
.mast-sub{transition-delay:1.05s}
.mast-cta{transition-delay:1.25s}
body.ready .hero-chip,body.ready .mast-sub,body.ready .mast-cta{opacity:1;transform:none}
.mast-word{clip-path:inset(-8% 0 102% 0);transform:translateY(34px);
  transition:clip-path 1.3s cubic-bezier(.76,0,.24,1) .65s,transform 1.3s cubic-bezier(.22,1,.36,1) .65s}
body.ready .mast-word{clip-path:inset(-8% 0 -12% 0);transform:none}
.hero-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.4);border-radius:999px;
  padding:7px 16px;font-size:.8rem;color:rgba(255,255,255,.92);backdrop-filter:blur(4px);margin-bottom:22px}
.hero-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.mast-word{display:block;font-family:var(--head);font-weight:400;color:#fff;
  font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1.08;letter-spacing:.005em;
  text-shadow:0 2px 40px rgba(0,0,0,.35)}
.mast-sub{display:block;margin-top:20px;font-family:var(--sans);font-size:clamp(.95rem,1.3vw,1.08rem);
  line-height:1.6;max-width:46ch;color:rgba(255,255,255,.88)}
.mast-rule{display:none}
.mast-cta{display:flex;gap:12px;margin-top:28px;pointer-events:auto}
@media(max-width:560px){.mast-cta{flex-direction:column;align-items:flex-start}}
.hero-hint{position:absolute;right:clamp(20px,4vw,54px);bottom:32px;display:flex;align-items:center;gap:14px;
  opacity:0;transition:opacity 1s ease 1.2s}
body.ready .hero-hint{opacity:1}
.hint-mono{font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;color:rgba(244,239,230,.7)}
.hint-bar{width:1px;height:44px;background:rgba(244,239,230,.25);position:relative;overflow:hidden}
.hint-bar i{position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--gold);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{to{top:110%}}
.hero-coords{position:absolute;left:clamp(20px,4vw,54px);bottom:32px;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.22em;line-height:1.9;color:rgba(244,239,230,.55);
  opacity:0;transition:opacity 1s ease 1.2s}
body.ready .hero-coords{opacity:1}
@media(max-width:1440px){.hero-coords{display:none}}
@media(max-width:1000px){.hint-mono{display:none}}

/* ————— ACT II · text-fill statement (Le Cercle "text fill about") ————— */
.act-words .pin{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--base);padding:0 clamp(22px,8vw,120px);gap:52px}
.words{max-width:940px;text-align:center;font-family:var(--sans);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(.95rem,1.9vw,1.5rem);line-height:2}
.words .w{color:rgba(26,24,22,.18);transition:color .3s ease}
.words .w.lit{color:var(--text)}
.words .w.gold{font-style:normal}
.words .w.gold.lit{color:var(--gold-deep)}
.words-statement{max-width:900px;text-align:center;font-family:var(--head);font-weight:400;
  font-size:clamp(1.7rem,3.6vw,3.1rem);line-height:1.25;color:var(--text);
  opacity:0;transform:translateY(24px);will-change:opacity,transform}
.words-statement em{font-style:normal;color:var(--gold-deep)}
.words-kicker,.words-foot{display:none}

/* ————— chips (Webild section labels) ————— */
.flow-kicker{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);padding:7px 16px;margin-bottom:22px;
  font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:.01em;text-transform:none;color:var(--muted)}
.flow-kicker::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);
  margin:0;vertical-align:baseline;transform:none;transition:none}
html.js .flow-kicker.reveal::before,html.js .flow-kicker.reveal.in::before{transform:none}

/* ————— services tiles ————— */
.tiles{padding:clamp(70px,10vh,120px) clamp(18px,3vw,44px);background:var(--base)}
.tiles-head{text-align:center;margin-bottom:clamp(34px,6vh,60px)}
.tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:760px){.tile-grid{grid-template-columns:1fr}}
.tile{position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);background:#181614;min-height:min(52vh,440px);
  box-shadow:0 20px 50px rgba(26,24,22,.12)}
.tile picture{position:absolute;inset:0}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1),filter .6s ease;filter:brightness(.82)}
.tile:hover img{transform:scale(1.05);filter:brightness(.95)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,8,.8) 0%,rgba(10,9,8,.12) 45%,transparent 70%)}
.tile-copy{position:absolute;left:clamp(18px,3vw,34px);right:18px;bottom:clamp(18px,3vw,30px);z-index:2;
  display:flex;flex-direction:column;align-items:flex-start}
.tile-kicker{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.35);border-radius:999px;
  padding:5px 12px;font-family:var(--sans);font-weight:500;font-size:.7rem;color:rgba(255,255,255,.9);margin-bottom:12px}
.tile-title{display:block;font-family:var(--head);font-weight:400;font-size:clamp(1.5rem,2.8vw,2.2rem);
  line-height:1.12;color:#fff}
.tile-more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--sans);font-weight:600;
  font-size:.85rem;color:#fff;background:rgba(255,255,255,.14);backdrop-filter:blur(4px);
  border-radius:999px;padding:9px 18px}
.tile-more i{font-style:normal;transition:transform .35s ease;color:var(--gold)}
.tile:hover .tile-more i{transform:translateX(5px)}

/* ————— trust strip ————— */
.trust{background:var(--base);border-block:1px solid var(--line);padding:34px clamp(20px,4vw,54px)}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;max-width:1300px;margin:0 auto}
@media(max-width:900px){.trust-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.trust-row{grid-template-columns:1fr}}
.trust-item{display:flex;align-items:center;gap:14px}
.trust-item i{font-style:normal;color:var(--gold);font-size:.66rem}
.trust-item span{font-family:var(--sans);font-weight:500;font-size:.85rem;line-height:1.55;color:var(--muted)}

/* ————— ACT III · point cloud (dark media moment) ————— */
.act-cloud .pin{background:#0B0A09}
#cloudCanvas{position:absolute;inset:0;width:100%;height:100%}
.cloud-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 80% at 50% 50%,transparent 55%,rgba(11,10,9,.7) 100%)}
.cloud-kicker{position:absolute;top:calc(18px + 64px);left:clamp(20px,4vw,54px);color:rgba(244,239,230,.5);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em}
.cloud-chapter{position:absolute;left:clamp(20px,5vw,70px);right:clamp(20px,5vw,70px);bottom:12%;max-width:440px;
  opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease;pointer-events:none;
  background:rgba(14,13,12,.82);padding:26px 28px;border-radius:var(--r);border:1px solid rgba(255,255,255,.1)}
.cloud-chapter.on{opacity:1;transform:none}
.cloud-chapter .ch-index{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.25);
  border-radius:999px;padding:4px 12px;margin-bottom:14px;font-family:var(--sans);font-weight:500;
  font-size:.68rem;letter-spacing:.04em;color:rgba(255,255,255,.85)}
.cloud-chapter .ch-index::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
.cloud-chapter h2{font-family:var(--head);font-weight:400;font-size:clamp(1.4rem,2.4vw,2rem);
  margin-bottom:10px;color:#fff}
.cloud-chapter p{font-size:.92rem;color:rgba(255,255,255,.72)}
.cloud-chapter .ch-price{margin-top:14px;font-family:var(--sans);font-weight:600;font-size:.85rem;color:var(--gold)}
.cloud-progress{position:absolute;right:clamp(20px,4vw,54px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:10px}
.cloud-progress span{width:2px;height:34px;background:rgba(244,239,230,.2);transition:background .4s;border-radius:2px}
.cloud-progress span.on{background:var(--gold)}

/* ————— marquee band ————— */
.marquee{overflow:hidden;white-space:nowrap;background:var(--ink);padding:18px 0}
.marquee-track{display:inline-flex;animation:marq 40s linear infinite}
.marquee-track span{font-family:var(--head);font-weight:400;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.85);padding-right:16px}
.marquee-track em{font-style:normal;color:var(--gold)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ————— ACT IV · kinetic type ————— */
.act-type .pin{background:var(--base-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5vh}
.grid-bg{position:absolute;inset:0;
  background:
    linear-gradient(rgba(176,138,46,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(176,138,46,.12) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(80% 75% at 50% 50%,#000 30%,transparent 100%);
  mask-image:radial-gradient(80% 75% at 50% 50%,#000 30%,transparent 100%)}
.grid-cell{position:absolute;width:72px;height:72px;background:rgba(212,175,55,.1);opacity:0;transition:opacity 1.2s ease}
.grid-cell.on{opacity:1}
.type-kicker{position:relative;text-align:center;font-family:var(--sans);font-weight:500;font-size:clamp(.95rem,1.5vw,1.2rem);
  color:var(--muted);line-height:1.8;z-index:2}
.type-stage{position:relative;z-index:2;width:100%;will-change:transform}
.type-letters{display:flex;justify-content:center;width:100%}
.type-letters span{font-family:var(--head);font-weight:400;color:var(--text);
  font-size:clamp(6rem,24vw,21rem);line-height:.95;will-change:transform}
.type-words{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;font-family:var(--head);font-weight:400;color:var(--text);
  font-size:clamp(2.2rem,7.2vw,6rem);line-height:1.1;
  opacity:0;transform:translateY(26px);pointer-events:none}
.type-foot{position:relative;z-index:2;font-family:var(--sans);font-weight:500;font-size:.85rem;color:var(--muted)}

/* ————— flow sections ————— */
.act-flow{position:relative;padding:clamp(80px,12vh,150px) clamp(22px,6vw,90px)}
.act-flow.light{background:var(--base)}
.act-flow.light.alt{background:var(--base-2)}
.flow-title{font-family:var(--head);font-weight:400;font-size:clamp(2rem,4.4vw,3.6rem);
  line-height:1.12;margin-bottom:20px;color:var(--text)}
.flow-title em,.city-copy em{font-style:normal;font-family:inherit;color:var(--gold-deep)}
.flow-title.sub-block{margin-top:90px}
.section-sub{font-family:var(--sans);font-size:1rem;color:var(--muted);margin-bottom:44px}
.lede{max-width:72ch;font-size:1.02rem;color:var(--muted);margin-bottom:48px}
#science{padding-bottom:clamp(40px,6vh,70px)}

/* cross-section figure */
.cross-section{margin:20px 0 60px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(16px,3vw,36px);box-shadow:0 18px 44px rgba(26,24,22,.06)}
.cs-toggle-row{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-bottom:6px}
.cs-prompt{font-family:var(--sans);font-weight:500;font-size:.8rem;color:var(--gold-dark);display:flex;align-items:center;gap:8px}
.cs-toggle{font-family:var(--sans);font-weight:600;font-size:.85rem;cursor:pointer;
  background:var(--ink);border:1px solid var(--ink);color:#fff;padding:10px 20px;border-radius:999px;transition:background .3s,color .3s}
.cs-toggle:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.cs-toggle[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.cs-scroll{overflow-x:auto}
.cs-scroll svg{min-width:760px;width:100%;height:auto}
.cs-label{font-family:var(--mono);font-size:12px;letter-spacing:.02em;fill:#4A4238}
.cs-red{fill:var(--gold-dark)}
#ppfLayer,#ppfNote{opacity:0;transition:opacity .7s ease .1s}
#ppfLayer{transform:translateY(170px);transition:opacity .5s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.cross-section.ppf-on #ppfLayer{opacity:1;transform:none}
.cross-section.ppf-on #ppfNote{opacity:1;transition-delay:.55s}
.cross-section figcaption{margin-top:14px;font-size:.82rem;color:var(--muted);max-width:80ch}

/* stats */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:10px}
.stat strong{display:block;font-family:var(--head);font-weight:400;font-size:clamp(2.2rem,4vw,3.4rem);color:var(--text)}
.stat span{font-size:.88rem;color:var(--muted)}
@media(max-width:760px){.stat-row{grid-template-columns:1fr;gap:18px}}

/* segmented toggle + package groups */
.seg{display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px;margin-bottom:28px}
.seg-btn{font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--muted);background:transparent;border:0;
  border-radius:999px;padding:10px 24px;cursor:pointer;transition:background .3s,color .3s}
.seg-btn:hover{color:var(--text)}
.seg-btn.active{background:var(--ink);color:#fff}
.pkg-group{display:none}
.pkg-group.on{display:block;animation:pkgIn .5s cubic-bezier(.22,1,.36,1)}
@keyframes pkgIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pkg-group .section-sub{margin-bottom:30px}
.pkg-group .card-grid{margin-top:0}

/* cards */
.card-grid{display:grid;gap:18px;margin:36px 0 10px}
.card-grid.three{grid-template-columns:repeat(3,1fr)}
.card-grid.two{grid-template-columns:repeat(2,1fr);max-width:900px}
@media(max-width:900px){.card-grid.three,.card-grid.two{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 30px;
  display:flex;flex-direction:column;gap:14px;position:relative;
  box-shadow:0 14px 36px rgba(26,24,22,.05);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s}
.card:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(26,24,22,.1);border-color:rgba(176,138,46,.4)}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 42%,rgba(212,175,55,.08) 50%,transparent 58%) no-repeat;
  background-size:260% 100%;background-position:130% 0;transition:background-position 1s ease}
.card:hover::after{background-position:-130% 0}
.card.featured{border-color:var(--gold-deep);box-shadow:0 20px 50px rgba(176,138,46,.14)}
.card-flag{position:absolute;top:-13px;left:24px;background:var(--gold);color:var(--ink);
  font-family:var(--sans);font-weight:600;font-size:.72rem;padding:5px 14px;border-radius:999px}
.card h3{font-family:var(--head);font-weight:400;font-size:1.4rem}
.card-blurb{font-family:var(--sans);color:var(--muted);font-size:.9rem}
.price{font-size:.9rem;color:var(--muted)}
.price strong{font-family:var(--head);font-weight:400;font-size:2rem;color:var(--text);margin-left:4px}
.price .per{font-size:.85rem;color:var(--muted)}
.card ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:.9rem;color:var(--muted)}
.card ul li::before{content:"✓";color:var(--gold-deep);margin-right:10px;font-size:.8rem}
.card .meta{margin-top:auto;font-size:.62rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-align:center;
  font-family:var(--sans);font-weight:600;font-size:.9rem;
  border:1px solid var(--ink);color:var(--text);padding:13px 26px;border-radius:999px;
  position:relative;overflow:hidden;z-index:1;transition:color .4s ease,border-color .4s ease}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.btn:hover{color:#fff}
.btn:hover::before{transform:scaleX(1)}
.btn-solid{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-solid::before{background:var(--gold)}
.btn-solid:hover{color:var(--ink)}
.btn-ghost{background:#fff;border-color:#fff;color:var(--ink)}
.btn-ghost::before{background:var(--gold)}
.btn-ghost:hover{color:var(--ink)}

/* add-ons */
.addons{margin-top:70px}
.addons-title{font-family:var(--head);font-weight:400;font-size:1.5rem;margin-bottom:24px}
.addon-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.addon-row{grid-template-columns:1fr}}
.addon{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.addon h4{font-family:var(--head);font-weight:400;font-size:1.1rem;margin-bottom:8px}
.addon p{font-size:.88rem;color:var(--muted)}
.addon-price{margin-top:12px;font-family:var(--head);font-size:1.25rem;color:var(--text)}
.addon-price span{font-family:var(--sans);font-weight:500;font-size:.78rem;color:var(--gold-dark)}

/* photo band — big rounded media card, Le Cercle style */
.photo-band{position:relative;overflow:hidden;margin:0 clamp(18px,3vw,44px) clamp(60px,9vh,110px);
  border-radius:var(--r-lg);box-shadow:0 26px 60px rgba(26,24,22,.14)}
.photo-band img{width:100%;height:min(74vh,640px);object-fit:cover;object-position:center 60%;
  transform:scale(1.14);will-change:transform}
.photo-band figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px clamp(18px,3vw,40px);
  background:linear-gradient(transparent,rgba(8,7,6,.8));font-family:var(--sans);font-weight:500;
  font-size:.82rem;color:#fff}

/* wpf band */
.wpf{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:40px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;
  box-shadow:0 14px 36px rgba(26,24,22,.05)}
.wpf h3{font-family:var(--head);font-weight:400;font-size:1.3rem;margin-bottom:8px}
.wpf p{font-size:.92rem;color:var(--muted);max-width:62ch}
.wpf-cta{text-align:right;flex-shrink:0}
.wpf-cta .meta{margin-bottom:12px;font-size:.62rem}
@media(max-width:820px){.wpf{flex-direction:column;align-items:flex-start}.wpf-cta{text-align:left}}
.small-print{margin-top:28px;font-size:.8rem;color:var(--faint)}
.small-print a{color:var(--gold-dark);border-bottom:1px solid rgba(176,138,46,.4)}

/* versus */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
@media(max-width:820px){.versus{grid-template-columns:1fr}}
.versus-col{border-radius:var(--r-lg);padding:34px 32px}
.versus-them{background:var(--card);border:1px solid var(--line)}
.versus-them h3{color:var(--faint)}
.versus-us{background:var(--ink);color:#fff}
.versus-us h3{color:var(--gold)}
.versus-col h3{font-family:var(--head);font-weight:400;font-size:1.3rem;margin-bottom:18px}
.versus-col ul{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:.92rem;color:var(--muted)}
.versus-us ul{color:rgba(255,255,255,.8)}
.versus-them li::before{content:"✕";color:#B0603A;margin-right:12px;font-size:.8rem}
.versus-us li::before{content:"✓";color:var(--gold);margin-right:12px;font-size:.8rem}

/* ————— city / studio (dark media moment) ————— */
.act-city .pin{position:relative;height:auto;background:#0A0A0C;display:flex;flex-direction:column;padding-bottom:70px}
.act-city .pin::before{content:"";position:absolute;top:0;left:0;right:0;height:150px;
  background:linear-gradient(var(--base),transparent);z-index:4;pointer-events:none}
.city-map{position:relative;height:clamp(230px,38vw,48vh);min-height:230px;overflow:hidden;flex:0 0 auto}
.city-map img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;object-position:0% 60%;
  will-change:transform;animation:mapDrift 36s ease-in-out infinite alternate}
@keyframes mapDrift{from{transform:scale(1)}to{transform:scale(1.06) translateX(-1.5%)}}
.city-map::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,10,12,.55),transparent 22%,transparent 72%,#0A0A0C 100%),
    linear-gradient(to right,rgba(10,10,12,.5),transparent 8%,transparent 92%,rgba(10,10,12,.5))}
.city-arcs{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.arc{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:.75;stroke-dasharray:6 7;animation:arcflow 2.6s linear infinite}
@keyframes arcflow{to{stroke-dashoffset:-52}}
.node{fill:rgba(244,239,230,.95)}
.node-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;fill:rgba(244,239,230,.9);
  paint-order:stroke;stroke:rgba(8,8,10,.75);stroke-width:3px;stroke-linejoin:round}
.pin-core{fill:var(--gold)}
.pin-ring{fill:none;stroke:var(--gold);stroke-width:1.5;animation:ring 2.4s ease-out infinite}
.pin-ring.d2{animation-delay:1.2s}
@keyframes ring{from{r:6;opacity:.9}to{r:34;opacity:0}}
.map-label{position:absolute;z-index:3;transform:translate(22px,-112%);display:flex;flex-direction:column;gap:6px;
  background:rgba(14,13,12,.88);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);padding:14px 18px;white-space:nowrap;opacity:0;transition:opacity .8s;
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
.map-label strong{font-family:var(--head);font-weight:400;font-size:1rem;color:#fff}
.map-label em{font-style:normal;font-family:var(--sans);font-size:.78rem;line-height:1.55;color:rgba(255,255,255,.75)}
.map-label.on{opacity:1}
@media(max-width:640px){.map-label strong{font-size:.85rem}.map-label em{font-size:.7rem}}
.city-copy{display:grid;padding-top:56px;padding-bottom:26px;grid-template-columns:1.15fr 1fr;gap:6px clamp(40px,6vw,110px);
  align-content:center;padding-left:clamp(26px,5vw,80px);padding-right:clamp(26px,5vw,80px);position:relative;z-index:2;color:var(--porcelain)}
.city-kicker,.city-copy h2,.city-lede{grid-column:1}
.city-kicker{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.3);border-radius:999px;
  padding:6px 14px;margin-bottom:20px;font-family:var(--sans);font-weight:500;font-size:.75rem;
  letter-spacing:.01em;text-transform:none;color:rgba(255,255,255,.85);justify-self:start}
.city-kicker::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
.city-copy h2{font-family:var(--head);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.15;margin-bottom:22px;color:#fff}
.city-lede{color:rgba(255,255,255,.72);font-size:.98rem;max-width:52ch;margin-bottom:36px}
.city-facts{grid-column:2;grid-row:1/4;align-self:center;display:grid;grid-template-columns:1fr 1fr;
  gap:22px 34px;font-family:var(--sans);font-size:.85rem;line-height:1.8}
.city-facts dt{font-weight:600;color:var(--gold);font-size:.72rem;letter-spacing:.12em}
.city-facts dd{color:rgba(255,255,255,.75)}
.city-facts a{color:#fff;border-bottom:1px solid rgba(212,175,55,.5)}
@media(max-width:900px){
  .city-copy{grid-template-columns:1fr;padding-top:50px}
  .city-kicker,.city-copy h2,.city-lede{grid-column:auto}
  .city-facts{grid-column:auto;grid-row:auto;grid-template-columns:1fr;gap:18px}
}

/* reviews */
.stars{color:var(--gold);letter-spacing:.35em;font-size:1.1rem;margin-bottom:10px}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media(max-width:980px){.review-grid{grid-template-columns:1fr}}
.review-grid blockquote{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  display:flex;flex-direction:column;gap:16px;box-shadow:0 14px 36px rgba(26,24,22,.05)}
.review-grid p{font-family:var(--sans);font-weight:400;font-size:.95rem;line-height:1.75;color:var(--text)}
.review-grid cite{font-style:normal;font-family:var(--sans);font-weight:600;font-size:.78rem;color:var(--gold-dark)}

/* finance */
.finance-inner{max-width:900px}
.finance-inner .lede{margin-bottom:20px}

/* faqs */
.faq-list{max-width:860px;display:flex;flex-direction:column;gap:12px}
.faq{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .3s;
  box-shadow:0 10px 26px rgba(26,24,22,.04)}
.faq[open]{border-color:rgba(176,138,46,.45)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:20px 24px;font-family:var(--head);font-weight:400;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{font-style:normal;color:var(--gold-deep);font-size:1.2rem;line-height:1;transition:transform .35s ease}
.faq[open] summary i{transform:rotate(45deg)}
.faq-body{padding:0 24px 22px;max-width:72ch}
.faq-body p{font-size:.92rem;color:var(--muted)}

/* book / contact — parallax media finisher */
#book{position:relative;color:#fff;overflow:hidden;
  background:url("../assets/topdown.avif") center 40%/cover no-repeat}
@media(pointer:fine){#book{background-attachment:fixed}}
#book::before{content:"";position:absolute;inset:0;background:rgba(12,10,8,.78)}
#book>*{position:relative;z-index:1}
#book .flow-title{color:#fff}
#book .flow-kicker{background:rgba(14,13,12,.6);border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.85);backdrop-filter:blur(4px)}
.assurances{display:flex;flex-wrap:wrap;gap:12px 34px;margin:8px 0 44px}
.assurances span{font-family:var(--sans);font-weight:500;font-size:.85rem;color:rgba(255,255,255,.85)}
.assurances span::before{content:"✓";margin-right:10px;color:var(--gold)}
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
#bookForm{display:flex;flex-direction:column;gap:18px;background:var(--card);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,36px);color:var(--text);box-shadow:0 26px 60px rgba(0,0,0,.3)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.field-row{grid-template-columns:1fr}}
#bookForm label{display:flex;flex-direction:column;gap:8px;font-family:var(--sans);font-weight:500;font-size:.8rem;color:var(--muted)}
#bookForm input,#bookForm select,#bookForm textarea{background:var(--base-2);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font-family:var(--sans);font-size:.95rem;padding:13px 14px;outline:none;transition:border-color .3s}
#bookForm input:focus,#bookForm select:focus,#bookForm textarea:focus{border-color:var(--gold-deep)}
#bookForm textarea{resize:vertical}
#bookForm .btn-solid{border:0;cursor:pointer;align-self:stretch;padding:16px 36px}
.form-note{min-height:1.2em;color:var(--gold-dark);font-size:.8rem}
.contact-card{background:rgba(14,13,12,.8);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:34px 32px;color:#fff}
.contact-card h3{font-family:var(--head);font-weight:400;font-size:1.5rem;line-height:1.25;margin-bottom:22px}
.contact-card dl{display:flex;flex-direction:column;gap:14px}
.contact-card dt{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.contact-card dd{font-size:.9rem;color:rgba(255,255,255,.8);line-height:1.6}
.contact-card a{border-bottom:1px solid rgba(212,175,55,.5)}
.response-note{margin-top:22px;color:rgba(255,255,255,.7);font-size:.88rem}

/* centred section heads */
.centered{text-align:center}
.centered .lede,.centered .section-sub{margin-left:auto;margin-right:auto}
.centered .flow-title::after{content:none}
.centered .assurances{justify-content:center}
.centered .faq-list{margin:0 auto;text-align:left}
.centered .review-grid{text-align:left}
.centered .contact-grid{text-align:left}

/* footer — light, tidy columns */
footer{padding:100px clamp(22px,6vw,90px) 50px;color:var(--text);background:var(--base-2)}
.footer-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px clamp(40px,6vw,90px);
  margin-bottom:46px;padding-bottom:46px;border-bottom:1px solid var(--line)}
.foot-logo{width:130px;opacity:.95}
.footer-news p:first-child{font-family:var(--head);font-weight:400;font-size:1.15rem;margin-bottom:14px}
#newsForm{display:flex;gap:10px}
#newsForm input{background:var(--card);border:1px solid var(--line);border-radius:999px;color:var(--text);
  font-family:var(--sans);font-size:.9rem;padding:12px 18px;outline:none;min-width:240px}
#newsForm input:focus{border-color:var(--gold-deep)}
#newsForm input::placeholder{color:var(--faint)}
.btn-news{background:var(--ink);color:#fff;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:.85rem;padding:12px 26px;transition:background .3s,color .3s}
.btn-news:hover{background:var(--gold);color:var(--ink)}
.foot-social{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.foot-social a{font-family:var(--sans);font-weight:500;font-size:.85rem;color:var(--muted);transition:color .3s}
.foot-social a:hover{color:var(--gold-dark)}
footer .mono{display:block;margin-bottom:14px;color:var(--faint);text-align:center;line-height:2;
  font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.02em;text-transform:none}
footer .mono a{border-bottom:1px solid rgba(176,138,46,.4)}
.foot-fine{font-size:.72rem;color:var(--faint);max-width:80ch;margin:0 auto;text-align:center;line-height:1.8}
@media(max-width:900px){
  .footer-top{grid-template-columns:1fr;justify-items:center;text-align:center;gap:34px}
  .foot-social{flex-direction:row;align-items:center;justify-content:center}
  #newsForm{justify-content:center;flex-wrap:wrap}
}

/* reveals */
html.js .reveal{opacity:0;transform:translateY(34px) scale(.975);filter:blur(6px)}
html.js .reveal:not(.done){transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1),filter .8s ease}
html.js .reveal.in{opacity:1;transform:none;filter:none}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  html.js .reveal{opacity:1;transform:none;filter:none}
}

/* ————— phone fit ————— */
@media(max-width:640px){
  .cloud-progress{display:none}
  .cloud-chapter{padding:20px}
  .cloud-kicker{font-size:.56rem;letter-spacing:.12em;right:16px}
}
/* short phones: keep the hero stack clear of the car */
@media(max-height:720px) and (max-width:820px){
  .mast{top:9%}
  .mast-word{font-size:clamp(1.9rem,8vw,2.5rem)}
  .mast-sub{margin-top:14px;font-size:.9rem}
  .mast-cta{margin-top:20px}
}
/* iOS: 16px inputs prevent auto zoom on focus */
@media(max-width:820px){
  #bookForm input,#bookForm select,#bookForm textarea,#newsForm input{font-size:16px}
}