@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/source-sans-400.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/source-sans-600.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/source-sans-700.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/cormorant-400.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/cormorant-600.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/cormorant-700.woff2") format("woff2")}

/* ============================================================
   CORSAC VANTAGE
   Dark throughout. One living canvas behind the whole site.
   ============================================================ */

:root{
  --purple:        #1A0B2E;
  --purple-deep:   #0C0518;
  --purple-raised: #32184E;
  --amber:         #D97706;
  --amber-lt:      #F0A03A;
  --gold:          #D4AF37;
  --gold-lt:       #E3CA7B;
  --ink:           #241633;
  --card-tint:     #F3EFF8;
  --off-white:     #FBFAFD;

  --on-dark:     #EFE8F7;
  --on-dark-dim: #A395BC;
  --on-dark-mute:#7C6D96;
  --hair:        rgba(212,175,55,.20);
  --hair-soft:   rgba(212,175,55,.10);

  /* Serif matches the Financial Command Center wordmark. */
  --serif: "Cormorant Garamond", "Hoefler Text", Baskerville, Georgia, serif;
  --sans:  "Source Sans 3", Calibri, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease:  cubic-bezier(.22,.61,.36,1);
  --ease-o:cubic-bezier(.16,1,.3,1);
  --wrap:  1280px;
  --gut:   clamp(1.5rem,5vw,5.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--purple-deep)}
body{
  margin:0;background:transparent;color:var(--on-dark);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,blockquote,ol,ul{margin:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(217,119,6,.35);color:#fff}

.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;position:relative;z-index:2}

/* ---------- the living canvas ---------- */
#terrain{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:radial-gradient(rgba(255,255,255,.9) .5px,transparent .5px);
  background-size:3px 3px;
}
main,.site-head,.site-foot{position:relative;z-index:2}

/* ---------- type ---------- */
.serif{font-family:var(--serif)}

.eyebrow{
  font-family:var(--sans);font-weight:700;font-size:.7rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--amber-lt);
  display:flex;align-items:center;gap:1rem;
}
.eyebrow::before{content:"";width:38px;height:1px;background:linear-gradient(90deg,var(--amber),transparent)}

.hero-h{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2.6rem,min(12vw,17vh),11.5rem);
  line-height:.88;letter-spacing:-.018em;color:#fff;
}
.sec-h{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2.5rem,6.2vw,5.25rem);
  line-height:1.0;letter-spacing:-.014em;color:#fff;text-wrap:balance;
}
.sec-h .gold{color:var(--gold-lt)}
.lede{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.6;color:var(--on-dark-dim)}
.dim{color:var(--on-dark-dim)}
.mute{color:var(--on-dark-mute)}

/* ghost numeral, the editorial signature */
.ghost-n{
  font-family:var(--serif);font-weight:600;line-height:.8;
  font-size:clamp(5rem,13vw,12rem);
  color:transparent;-webkit-text-stroke:1px rgba(212,175,55,.28);
  letter-spacing:-.04em;user-select:none;
}

hr.hair{height:1px;background:var(--hair);border:0;margin:0}

/* ---------- sections ---------- */
section[id]{scroll-margin-top:5rem}
.sec{padding-block:clamp(2.25rem,3.6vw,3.4rem);position:relative}
.sec-lg{padding-block:clamp(2.75rem,4.6vw,4.25rem);position:relative}

/* reading panels: soft-edged scrim so copy stays legible over the canvas */
.panel::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(12,5,24,0) 0%, rgba(12,5,24,.8) 7%,
    rgba(12,5,24,.8) 93%, rgba(12,5,24,0) 100%);
}
.panel > *{position:relative;z-index:2}
/* open sections stay transparent so the canvas breathes through */

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.sec-head .eyebrow{margin-bottom:.85rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;position:relative;overflow:hidden;
  font-family:var(--sans);font-weight:700;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;padding:1.05em 2.2em;border:1px solid transparent;cursor:pointer;
  transition:transform .45s var(--ease-o),box-shadow .45s var(--ease-o),
             color .35s var(--ease),border-color .35s var(--ease);
}
.btn span{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;transform:translateY(101%);
  transition:transform .5s var(--ease-o);
}
.btn-primary{background:var(--amber);color:#fff;box-shadow:0 18px 50px rgba(217,119,6,.3)}
.btn-primary::before{background:var(--gold)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 26px 66px rgba(217,119,6,.42);color:var(--purple-deep)}
.btn-primary:hover::before{transform:translateY(0)}
.btn-ghost{border-color:rgba(212,175,55,.42);color:var(--gold-lt)}
.btn-ghost::before{background:var(--gold)}
.btn-ghost:hover{transform:translateY(-3px);color:var(--purple-deep);border-color:var(--gold)}
.btn-ghost:hover::before{transform:translateY(0)}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.75rem}

/* ---------- header ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.3rem var(--gut);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),
             border-color .5s var(--ease),padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head.stuck{
  background:rgba(12,5,24,.86);backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--hair-soft);padding-block:.9rem;
}
.scroll-bar{
  position:fixed;left:0;top:0;height:2px;width:100%;z-index:70;
  background:linear-gradient(90deg,var(--amber),var(--gold));
  transform:scaleX(0);transform-origin:left;will-change:transform;
}
.lockup{display:flex;align-items:center;gap:.9rem;flex:none;position:relative;z-index:2}
.lockup img{width:42px;height:42px;object-fit:contain;transition:transform .5s var(--ease-o)}
.lockup:hover img{transform:translateY(-2px) scale(1.04)}
.lockup .txt{display:flex;flex-direction:column;line-height:1.15}
.lockup .nm{font-family:var(--serif);font-size:1.24rem;font-weight:600;color:#fff;letter-spacing:.24em;text-transform:uppercase}
.lockup .tg{font-size:.5rem;color:var(--gold);letter-spacing:.26em;text-transform:uppercase;margin-top:.15rem}

.nav{display:flex;align-items:center;gap:2.4rem}
.nav a{
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-dim);position:relative;padding-block:.3rem;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease-o);
}
.nav a:hover{color:#fff}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a.cta{color:var(--gold-lt)}
.nav-toggle{display:none;background:none;border:0;color:#fff;padding:.5rem;cursor:pointer;position:relative;z-index:2}

@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{
    position:fixed;inset:0 0 auto 0;flex-direction:column;align-items:flex-start;
    gap:.2rem;padding:6rem var(--gut) 2.5rem;background:rgba(12,5,24,.98);
    border-bottom:1px solid var(--hair);
    transform:translateY(-101%);transition:transform .5s var(--ease-o);
  }
  .nav.open{transform:translateY(0)}
  .nav a{font-size:1.35rem;font-family:var(--serif);text-transform:none;letter-spacing:0;padding:.75rem 0}
  .lockup .nm{font-size:1.02rem;letter-spacing:.18em}
}

/* ---------- hero ---------- */
.hero{position:relative}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-vig{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(125% 88% at 50% 44%, transparent 36%, rgba(12,5,24,.46) 88%),
    linear-gradient(180deg, rgba(12,5,24,.6) 0%, transparent 22% 70%, rgba(12,5,24,.55) 100%),
    linear-gradient(90deg, rgba(12,5,24,.68) 0%, transparent 46%);
}
.hero-inner{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;
  padding-inline:var(--gut);padding-top:3rem;
  /* reserve the skip control's strip so centred content can never sit on it */
  padding-bottom:5.5rem;
  width:min(var(--wrap),100%);margin-inline:auto;
}
.hero .eyebrow{margin-bottom:2rem;opacity:0;animation:fadeUp .8s var(--ease-o) .15s forwards}
.hero-h .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero-h .ln > span{display:block;transform:translateY(105%);animation:riseIn 1.15s var(--ease-o) forwards}
.hero-h .ln:nth-child(2) > span{animation-delay:.12s}
@keyframes riseIn{to{transform:translateY(0)}}
.hero-sub{
  max-width:44ch;margin-top:2.4rem;color:var(--on-dark-dim);
  font-size:clamp(1rem,min(1.45vw,2.4vh),1.28rem);line-height:1.55;
  opacity:0;animation:fadeUp .9s var(--ease-o) .5s forwards;
}
.hero .btn-row{opacity:0;animation:fadeUp .9s var(--ease-o) .68s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.mark-stage{
  position:absolute;z-index:2;right:5vw;top:50%;translate:0 -50%;
  width:clamp(190px,29vw,480px);aspect-ratio:1;perspective:1200px;pointer-events:none;
  opacity:0;transition:opacity .8s var(--ease-o);
}
.mark-stage.lit{opacity:1}
.mark-3d{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transform:rotateX(var(--mx,0deg)) rotateY(var(--my,0deg));
  transition:transform .6s var(--ease-o);will-change:transform;
}
.mark-3d img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 34px 70px rgba(0,0,0,.66)) drop-shadow(0 0 54px rgba(212,175,55,.22));
}
.mark-3d .sheen{
  position:absolute;inset:0;
  -webkit-mask:url("../img/foxhead-gold.webp") center/contain no-repeat;
          mask:url("../img/foxhead-gold.webp") center/contain no-repeat;
  background:linear-gradient(105deg,transparent 33%,rgba(255,248,222,.9) 48%,transparent 63%);
  background-size:280% 100%;animation:sweep 7s var(--ease) infinite;
  mix-blend-mode:screen;opacity:.72;
}
@keyframes sweep{0%,60%{background-position:172% 0}100%{background-position:-72% 0}}

.skip-hero{
  position:absolute;right:var(--gut);bottom:2.2rem;z-index:4;
  font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;
  color:var(--on-dark-mute);background:none;border:0;cursor:pointer;padding:.6rem 0;
  display:flex;align-items:center;gap:.85rem;transition:color .3s var(--ease);
}
.skip-hero:hover{color:var(--gold)}
.skip-hero::after{content:"";width:40px;height:1px;background:currentColor;transition:width .4s var(--ease-o);order:-1}
.skip-hero:hover::after{width:60px}

@media (max-width:900px){
  .mark-stage{right:50%;translate:50% -50%;top:84%;width:min(190px,42vw);opacity:.12}
  .mark-stage.lit{opacity:.17}
  .hero-inner{justify-content:flex-end;padding-bottom:6.5rem}
}

/* ---------- statement ---------- */
.statement .big{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2.1rem,4.8vw,4rem);line-height:1.1;letter-spacing:-.012em;
  color:#fff;text-wrap:balance;max-width:20ch;
}
.statement .sub{margin-top:1.5rem;max-width:56ch;color:var(--on-dark-dim);font-size:1.08rem}

/* ---------- the name behind the firm ---------- */
.name-sec{position:relative;overflow:hidden}
.name-mark{
  position:absolute;right:-6%;top:50%;translate:0 -50%;
  width:min(46vw,620px);opacity:.055;pointer-events:none;z-index:0;
  filter:grayscale(.15);
}
.name-grid{
  display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(2.25rem,5vw,4.5rem);
  align-items:start;margin-top:clamp(1.35rem,2.6vw,2.1rem);
}
.name-grid .prose p{font-size:1.14rem;line-height:1.8}
.triad{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--hair)}
.triad li{
  display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:baseline;
  padding-block:.95rem;border-bottom:1px solid var(--hair-soft);
}
.triad .t-n{
  font-family:var(--serif);font-style:italic;font-size:1.05rem;
  color:var(--gold);width:2.1rem;letter-spacing:.06em;
}
.triad .t-t{
  font-family:var(--serif);font-weight:600;font-size:clamp(1.4rem,2.4vw,2.05rem);
  line-height:1.15;color:#fff;letter-spacing:-.008em;
}
.name-close{
  margin-top:clamp(1.5rem,2.8vw,2.25rem);font-family:var(--serif);font-weight:600;
  font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.24;letter-spacing:-.01em;
  color:var(--on-dark-dim);max-width:38ch;
  /* the grid above runs prose left, triad right. this closes on the right so
     the eye keeps travelling instead of snapping back to the gutter. */
  margin-left:auto;text-align:right;
}
@media (max-width:860px){.name-close{margin-left:0;text-align:left;max-width:none}}
.name-close em{font-style:normal;color:var(--gold-lt);display:block;margin-top:.4rem}
@media (max-width:860px){
  .name-grid{grid-template-columns:1fr;gap:2rem}
  .name-mark{opacity:.04;width:70vw;right:-18%}
}

/* ---------- method: offset editorial grid ---------- */
.principles{margin-top:clamp(1.4rem,2.6vw,2.1rem);border-top:1px solid var(--hair-soft)}
.principle{
  display:grid;grid-template-columns:minmax(90px,.5fr) 1.15fr 1.35fr;
  gap:clamp(1.5rem,4vw,4rem);align-items:start;
  padding-block:clamp(1.15rem,2vw,1.7rem);border-bottom:1px solid var(--hair-soft);
  transition:background .5s var(--ease);
}
.principle:hover{background:rgba(212,175,55,.028)}
.principle .n{
  font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.6rem);
  line-height:1;color:transparent;-webkit-text-stroke:1px rgba(212,175,55,.55);
  font-variant-numeric:tabular-nums;transition:color .5s var(--ease);
}
.principle:hover .n{color:rgba(212,175,55,.2)}
.principle h3{
  font-family:var(--serif);font-weight:600;font-size:clamp(1.32rem,2.1vw,1.9rem);
  line-height:1.2;color:#fff;letter-spacing:-.012em;
}
.principle p{color:var(--on-dark-dim);font-size:1rem;line-height:1.65}
@media (max-width:880px){
  .principle{grid-template-columns:auto 1fr;gap:1.1rem 1.4rem}
  .principle p{grid-column:2}
}

/* ---------- engagements: editorial list, no cards ---------- */
.group-label{
  display:flex;align-items:center;gap:1.4rem;margin:clamp(1.5rem,2.8vw,2.3rem) 0 0;
  font-family:var(--serif);font-size:clamp(1.7rem,3.3vw,2.7rem);font-weight:600;letter-spacing:.02em;color:var(--gold-lt);
}
.group-label::after{content:"";flex:1;height:1px;background:var(--hair)}
.eng{border-bottom:1px solid var(--hair-soft)}
.eng-item{
  display:grid;grid-template-columns:1.1fr 1.5fr auto;gap:clamp(1.2rem,3.5vw,3.5rem);
  align-items:start;padding-block:clamp(1.1rem,1.85vw,1.55rem);
  border-top:1px solid var(--hair-soft);position:relative;
}
/* optical top-align: nudge the smaller text down to the heading's cap line */
.eng-item p,.eng-item .spec{padding-top:.42em}
.eng-item::after{
  content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-o);
}
.eng-item:hover::after{transform:scaleX(1)}
.eng-item h3{
  font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.7vw,2.35rem);
  line-height:1.12;color:#fff;letter-spacing:-.008em;transition:color .4s var(--ease);
}
.eng-item:hover h3{color:var(--gold-lt)}
.eng-item p{color:var(--on-dark-dim);font-size:1rem;line-height:1.65}
.eng-item .spec{
  font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;font-weight:700;
  color:var(--gold);white-space:nowrap;text-align:right;line-height:1.9;
}
@media (max-width:920px){
  .eng-item{grid-template-columns:1fr;gap:.8rem}
  .eng-item .spec{text-align:left;white-space:normal}
}
.qualifier{margin-top:clamp(1.35rem,2.4vw,2.1rem);color:var(--on-dark-mute);font-size:1rem;max-width:64ch}

/* ---------- fit ---------- */
.fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(2.25rem,5vw,4.5rem);margin-top:clamp(1.25rem,2.4vw,1.9rem)}
.fit h3{font-family:var(--serif);font-size:clamp(1.45rem,2.4vw,2.05rem);font-weight:600;margin-bottom:1.8rem;color:#fff}
.fit ul{list-style:none;display:grid;gap:1.15rem;padding:0}
.fit li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;color:var(--on-dark-dim);line-height:1.55}
.fit li::before{content:"";width:16px;height:1px;background:var(--gold);translate:0 -.35em}
.fit .no li::before{background:var(--amber)}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(1.25rem,2.4vw,1.9rem);border-top:1px solid var(--hair-soft)}
.faq details{border-bottom:1px solid var(--hair-soft)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.35rem 3.5rem 1.35rem 0;position:relative;
  font-family:var(--serif);font-weight:600;font-size:clamp(1.18rem,1.75vw,1.5rem);
  line-height:1.35;color:#fff;transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-lt)}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:50%;width:14px;height:14px;translate:0 -50%;
  transition:transform .4s var(--ease-o);
  background:
    linear-gradient(var(--amber-lt),var(--amber-lt)) center/14px 1.5px no-repeat,
    linear-gradient(var(--amber-lt),var(--amber-lt)) center/1.5px 14px no-repeat;
}
.faq details[open] summary::after{transform:rotate(90deg);background:linear-gradient(var(--amber-lt),var(--amber-lt)) center/14px 1.5px no-repeat}
.faq .ans{overflow:hidden}
.faq .ans p{padding:0 clamp(1rem,10vw,8rem) 1.9rem 0;color:var(--on-dark-dim);max-width:76ch}

/* ---------- closer ---------- */
.closer{
  margin-top:clamp(1.9rem,3.6vw,3rem);text-align:right;font-family:var(--serif);
  font-style:italic;font-weight:600;color:var(--gold-lt);
  font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.5;max-width:50ch;margin-left:auto;
}

/* ---------- gallery strip ---------- */
.gallery{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);
  gap:1px;background:var(--hair-soft);margin-top:clamp(1.25rem,2.4vw,1.9rem);
  border-block:1px solid var(--hair-soft);
}
.tile{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--purple-deep)}
.tile img{width:100%;height:100%;object-fit:cover;opacity:.72;
  transform:scale(1.04);transition:transform 1.1s var(--ease-o),opacity .6s var(--ease)}
.tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,5,24,.2) 0%,transparent 40%,rgba(12,5,24,.94) 100%);
}
.tile:hover img{transform:scale(1);opacity:.9}
.tile-c{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.5rem 1.4rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.tile-c b{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:#fff;line-height:1.25}
.tile-c i{font-style:normal;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700}
@media (max-width:1080px){
  .gallery{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));grid-auto-columns:auto}
  .tile{aspect-ratio:4/3}
}

/* ---------- CTA film ---------- */
.cta-film{position:relative;overflow:hidden;min-height:clamp(430px,62vh,660px);display:flex;align-items:center}
.cta-media{position:absolute;inset:0;z-index:0}
.cta-media video,.cta-media img{width:100%;height:100%;object-fit:cover;opacity:.62}
.cta-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(12,5,24,.9) 0%,rgba(12,5,24,.6) 45%,rgba(12,5,24,.95) 100%),
    linear-gradient(90deg,rgba(12,5,24,.9) 0%,rgba(12,5,24,.25) 65%);
}

/* ---------- cinematic panels (Built) ---------- */
.film{position:relative;min-height:clamp(470px,68vh,700px);display:flex;align-items:flex-end;overflow:hidden}
.film + .film{border-top:1px solid var(--hair-soft)}
.film-bg{position:absolute;inset:0;z-index:0}
.film-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--ease-o)}
.film:hover .film-bg img{transform:scale(1.01)}
.film-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(12,5,24,.72) 0%, rgba(12,5,24,.24) 34%, rgba(12,5,24,.92) 100%),
    linear-gradient(90deg, rgba(12,5,24,.86) 0%, transparent 62%);
}
.film.right .film-bg::after{
  background:
    linear-gradient(180deg, rgba(12,5,24,.72) 0%, rgba(12,5,24,.24) 34%, rgba(12,5,24,.92) 100%),
    linear-gradient(270deg, rgba(12,5,24,.86) 0%, transparent 62%);
}
.film-copy{position:relative;z-index:2;width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;padding-block:clamp(3rem,7vw,5.5rem)}
.film-copy .inner{max-width:52ch}

/* a work item that carries a film of its own. the video is typographic, so it
   gets its own frame rather than being dimmed behind the copy. */
/* Media is a supporting element, not the subject. The copy column takes the
   room; the media column sizes to its own capped width and sits on the outer
   edge. Anyone who wants it larger uses the player's own fullscreen control. */
.film.has-media .film-copy{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
}
.film.right.has-media .film-copy{grid-template-columns:auto minmax(0,1fr)}
.film.has-media .film-copy .inner{max-width:54ch}
.film-media{margin:0}
/* a device illustration carries its own frame, so it gets no border of ours */
.film-media.device img{width:100%;height:auto;display:block;filter:drop-shadow(0 26px 60px rgba(0,0,0,.5))}
/* on a right-aligned item the media belongs on the outside, opposite the copy */
.film.right.has-media .film-copy .inner{order:2}
.film.right.has-media .film-media{order:1}
.film.right .film-media figcaption{justify-content:flex-end}
.film.right .film-media figcaption::before{order:2}
.film-media video{
  width:100%;aspect-ratio:16/9;display:block;background:var(--purple-deep);
  border:1px solid var(--hair);box-shadow:0 30px 80px rgba(0,0,0,.5);
}
/* a 9:16 film would be over 1000px tall in a half-width column, so it is
   capped to read as a phone rather than a billboard.
   NOTE: not `.portrait` - that class is the founder headshot frame and carries
   its own padding, border and 4:5 ratio. */
/* hard caps. these were roughly double this and swallowed the page. */
.film-media{max-width:320px}
.film-media.device{max-width:300px}
.film-media.tall{max-width:158px}
.film-media.tall video{aspect-ratio:9/16}
.film-media figcaption{
  margin-top:.85rem;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--gold);display:flex;align-items:center;gap:.8rem;
}
.film-media figcaption::before{content:"";width:26px;height:1px;background:var(--gold)}

/* live link out to the product itself */
.film-link{
  display:inline-flex;align-items:center;gap:.6em;margin-top:1.5rem;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--gold-lt);border-bottom:1px solid rgba(212,175,55,.4);padding-bottom:.35rem;
  transition:color .3s var(--ease),border-color .3s var(--ease),gap .3s var(--ease-o);
}
.film-link::after{content:"\2197";font-size:1.05em;line-height:1}
.film-link:hover{color:#fff;border-color:var(--gold);gap:.95em}
.film.right .film-copy .inner .film-link{margin-left:auto}

/* small, quiet escape hatch for the still image, which has no player controls */
.media-full{
  display:inline-block;margin-top:.55rem;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:var(--on-dark-mute);
  border-bottom:1px solid rgba(212,175,55,.28);padding-bottom:.2rem;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.media-full:hover{color:var(--gold-lt);border-color:var(--gold)}

/* side by side holds much further down now that the media is small */
@media (max-width:760px){
  .film.has-media .film-copy,
  .film.right.has-media .film-copy{grid-template-columns:1fr;gap:1.6rem}
  /* stacked, every item reads copy first, so the right-aligned one falls back in line */
  .film.right.has-media .film-copy .inner{order:1}
  .film.right.has-media .film-media{order:2}
  .film.right .film-media figcaption{justify-content:flex-start}
  .film.right .film-media figcaption::before{order:0}
}
.film.right .film-copy .inner{margin-left:auto;text-align:right}
.film.right .film-copy .eyebrow{justify-content:flex-end}
.film.right .film-copy .eyebrow::before{display:none}
.film.right .film-copy .eyebrow::after{content:"";width:38px;height:1px;background:linear-gradient(270deg,var(--amber),transparent)}
.film h2{
  font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,5vw,4.2rem);
  line-height:1.0;letter-spacing:-.014em;color:#fff;margin:1.5rem 0 .8rem;
}
.film .what{font-size:clamp(1.18rem,1.7vw,1.45rem);color:var(--gold-lt);font-family:var(--serif);font-weight:600}
.film .body{color:var(--on-dark-dim);margin-top:1.3rem;line-height:1.7}
.film .spec{
  margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--hair);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--gold);
  display:flex;flex-wrap:wrap;gap:.5rem 2rem;
}
.film.right .spec{justify-content:flex-end}
@media (max-width:820px){
  .film-copy .inner,.film.right .film-copy .inner{max-width:none;text-align:left;margin-left:0}
  .film.right .spec{justify-content:flex-start}
  .film.right .film-copy .eyebrow{justify-content:flex-start}
  .film.right .film-copy .eyebrow::after{display:none}
  .film.right .film-copy .eyebrow::before{display:block}
  .film-bg::after,.film.right .film-bg::after{
    background:linear-gradient(180deg, rgba(12,5,24,.68) 0%, rgba(12,5,24,.42) 30%, rgba(12,5,24,.95) 100%);
  }
}

/* ---------- founder ---------- */
.founder-head{
  display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center;
  padding-top:clamp(8rem,13vw,11rem);padding-bottom:clamp(3.5rem,7vw,6rem);
}
.portrait{
  aspect-ratio:4/5;position:relative;overflow:hidden;
  border:1px solid var(--hair);
  background:linear-gradient(160deg,var(--purple-raised),var(--purple-deep));
  display:grid;place-items:center;text-align:center;padding:2rem;
}
.portrait .ph{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:700;line-height:2.2}
.portrait img,.portrait picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,5,24,0) 55%,rgba(12,5,24,.35) 100%);}
.founder-head h1{
  font-family:var(--serif);font-weight:600;font-size:clamp(3.1rem,8.2vw,6.6rem);
  line-height:.9;color:#fff;letter-spacing:-.018em;
}
.founder-head .role{margin-top:2rem;color:var(--gold-lt);font-size:1.28rem;line-height:1.7;font-family:var(--serif);font-weight:600}
@media (max-width:820px){.founder-head{grid-template-columns:1fr}}

.pull{
  font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.9vw,4rem);
  line-height:1.08;letter-spacing:-.012em;text-wrap:balance;color:#fff;
}
.quote{
  font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,4vw,3.2rem);line-height:1.2;
  color:var(--gold-lt);text-wrap:balance;letter-spacing:-.008em;
}
.quote cite{
  display:block;margin-top:2rem;font-family:var(--sans);font-style:normal;
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--on-dark-mute);font-weight:700;
}
.prose{max-width:68ch}
.prose p{margin-top:1.1rem;color:var(--on-dark-dim);line-height:1.78;font-size:1.08rem}
.prose p:first-child{margin-top:0}
.prose strong{color:#fff;font-weight:600}

/* ---------- editorial split ----------
   Sections used to stack a narrow column against the left gutter and leave the
   right half empty. This runs the section across the full measure instead: the
   label and heading anchor a left rail, the body copy fills the rest and ends
   at the right gutter. The eye travels left to right rather than dropping down
   one skinny channel. */
.split{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(1.8rem,5vw,5rem);align-items:start;
}
/* the heading holds its place while the copy beside it scrolls */
.split-side{position:sticky;top:7rem}
.split-side .sec-h,
.split-side .pull,
.split-side .big,
.split-side .hero-h{max-width:none}
.split-side .eyebrow + .sec-h,
.split-side .eyebrow + .pull,
.split-side .eyebrow + .big,
.split-side .eyebrow + .hero-h{margin-top:1.3rem}
.split-side .ghost-n{display:block;margin-top:clamp(1.1rem,2.4vw,1.9rem)}
/* two classes, declared after the section rules, so a page-level cap like
   `.statement .sub{max-width:56ch}` cannot re-narrow a column it now owns */
.split .split-main > *{max-width:none}
.split-main > *:first-child{margin-top:0}
.split-main .lede{margin-top:.5rem}
.split-main .btn-row{margin-top:clamp(1.6rem,3vw,2.2rem)}

@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:clamp(1rem,3vw,1.5rem)}
  .split-side{position:static}
  .split-side .ghost-n{display:none}
  .split-main .lede{margin-top:0}
}
/* sticky needs a normal flow; reduced motion users get the plain stack */
@media (prefers-reduced-motion:reduce){.split-side{position:static}}
/* real numbers only. every figure here is on the resume. */
.stats{
  list-style:none;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
  margin-top:clamp(1.8rem,3.4vw,2.75rem);border-top:1px solid var(--hair);
}
.stats li{
  padding:1.4rem 1.4rem 1.4rem 0;border-bottom:1px solid var(--hair-soft);
  display:flex;flex-direction:column;gap:.5rem;
}
.stats b{
  font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,3.6vw,3.2rem);
  line-height:.95;color:var(--gold-lt);letter-spacing:-.015em;font-variant-numeric:tabular-nums;
}
.stats span{font-size:.9rem;line-height:1.5;color:var(--on-dark-dim);max-width:26ch}

.creds{list-style:none;padding:0;display:grid;gap:0;margin-top:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--hair)}
.creds li{
  display:grid;grid-template-columns:minmax(200px,.9fr) 1.4fr;gap:1rem clamp(1.5rem,4vw,3.5rem);
  padding-block:1.05rem;border-bottom:1px solid var(--hair-soft);align-items:baseline;
}
.creds b{font-family:var(--serif);font-weight:600;font-size:1.22rem;color:#fff;line-height:1.25}
.creds span{color:var(--on-dark-dim);font-size:.96rem;line-height:1.55}
@media (max-width:720px){.creds li{grid-template-columns:1fr;gap:.35rem}}

.mantra{
  margin-top:clamp(2rem,4vw,3.25rem);font-family:var(--serif);font-style:italic;
  font-weight:600;font-size:clamp(1.4rem,2.6vw,2.1rem);color:var(--gold-lt);letter-spacing:-.008em;
}

.todo{
  border-left:2px solid var(--amber);background:rgba(217,119,6,.07);
  padding:1.3rem 1.6rem;margin-top:2.5rem;font-size:.95rem;color:var(--on-dark-dim);max-width:68ch;
}
.todo b{color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:.64rem;display:block;margin-bottom:.5rem}

/* ---------- footer ---------- */
.site-foot{background:rgba(12,5,24,.94);border-top:1px solid var(--hair-soft);padding-block:clamp(3rem,6vw,5rem) 2.5rem}
.foot-grid{display:flex;flex-wrap:wrap;gap:3rem;justify-content:space-between;align-items:flex-start}
.foot-col h3{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:1.3rem;font-weight:700}
.foot-col p,.foot-col a{font-size:.95rem;line-height:1.95;display:block;color:var(--on-dark-dim);transition:color .3s var(--ease)}
.foot-col a:hover{color:var(--gold-lt)}
.foot-base{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid var(--hair-soft);
  font-size:.75rem;letter-spacing:.1em;color:var(--on-dark-mute);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
}

/* ---------- reveal: clip wipe, reads as a camera move ---------- */
/* Visible is the BASE state. JS adds .rv-hide only to elements that are
   off-screen at load, and removes it when they scroll in. Nothing is ever
   left invisible waiting on a transition that may never composite. */
.js .rv,.js .rv-w{transition:opacity .42s var(--ease-o),transform .42s var(--ease-o),clip-path .55s var(--ease-o)}
.js .rv.rv-hide{opacity:0;transform:translateY(18px)}
.js .rv-w.rv-hide{opacity:0;transform:translateY(10px);clip-path:inset(0 0 100% 0)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .hero-pin{position:relative;height:auto;min-height:90vh}
  .hero-h .ln > span{transform:none}
  .hero-sub,.hero .btn-row,.hero .eyebrow{opacity:1}
  /* never let the mark depend on a transition or a JS class here */
  .mark-stage{opacity:1 !important;transition:none !important}
  .mark-3d .sheen{display:none}
  .rv,.rv-w,.rv-hide{opacity:1 !important;transform:none !important;clip-path:none !important}
  .skip-hero{display:none}
  .film-bg img{transform:none}
}