/* ============================================================
   CAESAR DIGITAL — Design System
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Palette */
  --ink:        #07080D;
  --ink-rise:   #0B0D14;
  --ink-lift:   #101320;
  --bone:       #F5F3EF;
  --bone-deep:  #EBE8E2;
  --paper:      #FFFFFF;
  --on-dark:    #F7F7F5;
  --on-light:   #111111;
  --blue:       #4B8CFF;
  --blue-deep:  #2E6BE0;
  --blue-ink:   #2A62D6;   /* blue accent text on light backgrounds (AA) */
  --blue-fill:  #2F6BE6;   /* blue surfaces that carry white text (AA) */
  --silver:     #C7CCD6;

  /* Derived */
  --muted-dark:  rgba(247,247,245,.58);
  --muted-light: rgba(17,17,17,.60);
  --hair-dark:   rgba(199,204,214,.14);
  --hair-dark-2: rgba(199,204,214,.075);
  --hair-light:  rgba(17,17,17,.14);
  --hair-light-2:rgba(17,17,17,.07);

  /* Type */
  /* Display grotesque + a distinct body grotesque + serif for every index numeral.
     Deliberately avoids Inter/Roboto — the numerals are the signature. */
  --display: "Instrument Sans", "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --body:    "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif:   "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* Rhythm */
  --shell:     1440px;
  --gut:       clamp(20px, 5vw, 72px);
  --section-y: clamp(88px, 11vw, 176px);
  --nav-h:     78px;

  /* Motion */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast:    .28s;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--body);
  font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
::selection{ background:var(--blue); color:#fff; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:2px; }

.skip{
  position:absolute; left:16px; top:-100px; z-index:200;
  background:var(--blue-fill); color:#fff; padding:.75rem 1.1rem;
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  transition:top .3s var(--ease);
}
.skip:focus{ top:16px; }

/* ---------- 3. Typography ---------- */
.h-display{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.85rem,7.2vw,7.5rem);
  line-height:.94;
  letter-spacing:-.045em;
}
.h-section{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.05rem,4.6vw,4.1rem);
  line-height:1.02;
  letter-spacing:-.038em;
}
.h-statement{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.7rem,4.3vw,3.8rem);
  line-height:1.15;
  letter-spacing:-.032em;
}
.eyebrow{
  font-family:var(--body);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  line-height:1.4;
}
.lede{
  font-size:clamp(1.02rem,.95rem + .42vw,1.24rem);
  line-height:1.6;
  font-weight:350;
}
.tnum{ font-variant-numeric:tabular-nums; }
.dim-d{ color:var(--muted-dark); }
.dim-l{ color:var(--muted-light); }

/* ---------- 4. Layout ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.section{ position:relative; padding-block:var(--section-y); scroll-margin-top:var(--nav-h); }
.section--dark{ background:var(--ink); color:var(--on-dark); }
.section--light{ background:var(--bone); color:var(--on-light); }
.shell{ position:relative; z-index:2; }

/* ---------- 4b. Atmosphere ----------
   One grain plate reused across the page. It kills gradient banding and gives
   the flat fills some tooth, so they read as paper and film rather than as a
   hex value. Paired with a faint directional light per section, which is what
   keeps the lower half of the page from looking like plain #07080D blocks. */
.grain::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
.section--dark.grain::after,.hero.grain::after,.footer.grain::after{ opacity:.06; }
.section--light.grain::after{ opacity:.035; }

/* Hairline seam where a dark section starts — reads as a lit edge, not a border. */
.seam::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:2;
  background:linear-gradient(90deg,
    transparent 0%, rgba(199,204,214,.18) 20%,
    rgba(75,140,255,.32) 50%,
    rgba(199,204,214,.18) 80%, transparent 100%);
}

/* Section index label: (02) — SERVICES */
.rail{
  display:flex; align-items:center; gap:.85rem;
  margin-bottom:clamp(26px,3.4vw,48px);
}
.rail__num{ font-family:var(--serif); font-style:italic; font-size:1.05rem; letter-spacing:.02em; text-transform:none; color:var(--blue); line-height:1; }
.rail__label{ color:var(--silver); }
.section--light .rail__label{ color:rgba(17,17,17,.68); }
.section--light .rail__num{ color:var(--blue-ink); }
.rail__line{
  flex:1 1 auto; height:1px; max-width:170px;
  background:currentColor; opacity:.2;
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease-out) .1s;
}
.is-in .rail__line{ transform:scaleX(1); }

/* Column hairlines on dark sections */
.gridlines{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  max-width:var(--shell); margin-inline:auto;
  padding-inline:var(--gut);
  display:none; grid-template-columns:repeat(6,minmax(0,1fr));
}
.gridlines i{ border-left:1px solid var(--hair-dark-2); }
.gridlines i:last-child{ border-right:1px solid var(--hair-dark-2); }
/* fade the rules out at both ends so they read as drafting marks, not a table */
.gridlines{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
@media (min-width:920px){ .gridlines{ display:grid; } }

/* ---------- 5. Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.7rem;
  padding:1.02rem 1.85rem;
  font-size:.815rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  border-radius:2px; overflow:hidden; isolation:isolate;
  white-space:nowrap;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:translateY(101%);
  transition:transform .46s var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translateY(0); }
.btn{ transform:translate3d(var(--mx,0px),var(--my,0px),0); }
.btn:active{ transform:translate3d(var(--mx,0px),calc(var(--my,0px) + 1px),0); }
.btn__arrow{ transition:transform .38s var(--ease-out); }
.btn:hover .btn__arrow{ transform:translateX(5px); }

.btn--primary{ background:var(--blue-fill); color:#fff; }
.btn--primary::before{ background:var(--on-dark); }
.btn--primary:hover,.btn--primary:focus-visible{ color:var(--ink); }

.btn--light{ background:var(--on-dark); color:var(--ink); }
.btn--light::before{ background:var(--blue); }
.btn--light:hover,.btn--light:focus-visible{ color:#fff; }
.btn--light::before{ background:var(--blue-fill); }

.btn--ghost{ border:1px solid var(--hair-dark); color:var(--on-dark); }
.btn--ghost::before{ background:var(--on-dark); }
.btn--ghost:hover,.btn--ghost:focus-visible{ color:var(--ink); border-color:var(--on-dark); }

.btn--dark{ background:var(--on-light); color:var(--bone); }
.btn--dark::before{ background:var(--blue-fill); }
.btn--dark:hover,.btn--dark:focus-visible{ color:#fff; }

/* Text link with retracting underline */
.tlink{
  position:relative; display:inline-flex; align-items:center; gap:.55rem;
  font-size:.9rem; letter-spacing:.02em; padding-block:.35rem;
}
.tlink::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; opacity:.34;
  transform:scaleX(1); transform-origin:right;
  transition:transform .42s var(--ease-out);
}
.tlink:hover::after,.tlink:focus-visible::after{ transform:scaleX(0); }
.tlink i{ font-style:normal; transition:transform .38s var(--ease-out); }
.tlink:hover i{ transform:translateX(5px); }

/* ---------- 6. Scroll progress ---------- */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  z-index:120; pointer-events:none;
}

/* ---------- 7. Logo mark ---------- */
/* Brand mark. Two fixed-colour vector files rather than a tinted mask:
   white on the near-black sections, black on the warm off-white ones. */
.mark{
  height:var(--mark,30px); width:auto;
  flex:0 0 auto;
  user-select:none; -webkit-user-drag:none;
}
/* wrapper carries the scroll reveal so the mark keeps its own opacity */
.markwrap{ display:block; align-self:flex-start; line-height:0; }
.logo{ display:inline-flex; align-items:center; gap:.72rem; color:var(--on-dark); }
.logo__type{ display:flex; flex-direction:column; line-height:1; }
.logo__a{
  font-family:var(--display); font-weight:600; font-size:.95rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.logo__b{
  font-size:.55rem; font-weight:500; letter-spacing:.34em;
  text-transform:uppercase; color:var(--silver); margin-top:.26rem;
}

/* ---------- 8. Navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease), border-color .45s var(--ease), height .45s var(--ease);
}
.nav.is-stuck{
  height:66px;
  background:rgba(7,8,13,.84);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
          backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--hair-dark);
}
.nav__inner{
  width:100%; max-width:var(--shell); margin-inline:auto;
  padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.nav__menu{ display:none; align-items:center; gap:clamp(1.4rem,2.4vw,2.5rem); }
.nav__link{
  position:relative; display:block; overflow:hidden;
  font-size:.845rem; letter-spacing:.05em; line-height:1.6;
  color:rgba(247,247,245,.72);
  transition:color var(--t-fast) var(--ease);
}
/* the label slides up and its duplicate takes its place */
.nav__link > span{ display:block; position:relative; transition:transform .55s var(--ease-out); }
.nav__link > span::after{
  content:attr(data-t); position:absolute; left:0; top:100%; width:100%;
  color:var(--on-dark);
}
@media (hover:hover){
  .nav__link:hover > span,.nav__link:focus-visible > span{ transform:translateY(-100%); }
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--ease-out);
}
.nav__link:hover,.nav__link:focus-visible{ color:var(--on-dark); }
.nav__link:hover::after,.nav__link:focus-visible::after{ transform:scaleX(1); }
.nav__cta{ display:none; padding:.76rem 1.3rem; font-size:.735rem; }
.nav__end{ display:flex; align-items:center; gap:clamp(.9rem,1.6vw,1.5rem); }
@media (min-width:1000px){
  .nav__menu{ display:flex; }
  .nav__cta{ display:inline-flex; }
}

/* ---------- Language switch ---------- */
.lang{
  display:inline-flex; align-items:center; gap:.42rem;
  font-size:.72rem; letter-spacing:.14em;
}
.lang__btn{
  position:relative; padding:.4rem .25rem;
  font-family:var(--body); font-weight:500;
  font-size:.72rem; letter-spacing:.14em;
  color:rgba(247,247,245,.55);
  transition:color var(--t-fast) var(--ease);
}
/* anchored to the text rather than to the box, so the tap area can grow on
   touch without dragging the underline away from the label */
.lang__btn::after{
  content:""; position:absolute; left:.25rem; right:.25rem;
  top:50%; margin-top:.58em; height:1px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--ease-out);
}
@media (max-width:999px){
  .lang__btn{ padding-block:.95rem; }
}
.lang__btn:hover{ color:var(--on-dark); }
.lang__btn.is-on{ color:var(--on-dark); }
.lang__btn.is-on::after{ transform:scaleX(1); }
.lang__sep{ color:rgba(247,247,245,.5); }

/* Burger */
.burger{
  width:44px; height:44px; margin-right:-10px;
  display:grid; place-content:center; gap:6px;
}
.burger span{
  display:block; width:24px; height:1.5px; background:var(--on-dark);
  transition:transform .4s var(--ease-out), opacity .25s var(--ease);
}
.burger.is-open span:nth-child(1){ transform:translateY(3.75px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-3.75px) rotate(-45deg); }
@media (min-width:1000px){ .burger{ display:none; } }

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:99;
  background:var(--ink);
  padding:calc(var(--nav-h) + 36px) var(--gut) 44px;
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .72s var(--ease-out), visibility 0s linear .72s;
  visibility:hidden;
}
.drawer.is-open{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .72s var(--ease-out), visibility 0s; }
.drawer__list li{ overflow:hidden; border-bottom:1px solid var(--hair-dark); }
.drawer__list a{
  display:flex; align-items:baseline; gap:1rem;
  padding-block:clamp(.8rem,3.2vw,1.3rem);
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.85rem,8.6vw,2.8rem); letter-spacing:-.03em;
  transform:translateY(115%);
  transition:transform .7s var(--ease-out);
}
.drawer.is-open .drawer__list a{ transform:translateY(0); }
.drawer.is-open .drawer__list li:nth-child(1) a{ transition-delay:.10s; }
.drawer.is-open .drawer__list li:nth-child(2) a{ transition-delay:.16s; }
.drawer.is-open .drawer__list li:nth-child(3) a{ transition-delay:.22s; }
.drawer.is-open .drawer__list li:nth-child(4) a{ transition-delay:.28s; }
.drawer__idx{ font-family:var(--serif); font-style:italic; font-size:1rem; letter-spacing:.02em; color:var(--blue); }
.drawer__foot{ display:flex; flex-direction:column; gap:1.15rem; }
.drawer__foot .btn{ justify-content:center; }
.drawer__meta{ font-size:.78rem; color:var(--muted-dark); letter-spacing:.03em; }

/* ============================================================
   SECTION 1 — HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  background:var(--ink);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2; background:var(--ink); }
/* Held still on purpose. A slow scale/translate drift was in here, but
   continuously re-rasterising a 4K frame reads as a wobble rather than as
   atmosphere — the movement in the footage itself is enough. */
.hero__video{
  width:100%; height:100%;
  object-fit:cover;
  object-position:78% center;
  transform:scale(1.04) translateZ(0);
  will-change:auto;
}

/* Layered scrims: keeps copy legible, pushes the statue visually right */
.hero__scrim{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
/* Tuned so copy sits on effectively solid #07080D while the statue keeps
   ~67% of its original luminance — dark enough to read, bright enough to feel cinematic. */
.hero__scrim--base{ background:rgba(7,8,13,.22); }
.hero__scrim--side{
  background:linear-gradient(100deg,
    rgba(7,8,13,.95) 0%,
    rgba(7,8,13,.90) 24%,
    rgba(7,8,13,.62) 44%,
    rgba(7,8,13,.22) 62%,
    rgba(7,8,13,.07) 78%,
    rgba(7,8,13,.10) 100%);
}
.hero__scrim--edge{
  background:linear-gradient(to bottom,
    rgba(7,8,13,.72) 0%,
    rgba(7,8,13,.10) 20%,
    rgba(7,8,13,0) 46%,
    rgba(7,8,13,.70) 84%,
    rgba(7,8,13,.95) 100%);
}
/* faint blue atmosphere on the statue side */
.hero__scrim--tint{
  background:radial-gradient(58% 62% at 78% 44%, rgba(75,140,255,.10) 0%, rgba(75,140,255,0) 62%);
  mix-blend-mode:screen;
}

.hero__body{
  position:relative; z-index:2;
  flex:1 1 auto;
  display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + 28px);
  padding-bottom:24px;
}
.hero__copy{ max-width:min(900px,56vw); }
@media (max-width:900px){ .hero__copy{ max-width:100%; } }

.hero__eyebrow{
  display:flex; align-items:center; gap:.85rem;
  color:var(--silver); margin-bottom:clamp(20px,2.6vw,32px);
}
.hero__eyebrow::before{
  content:""; width:clamp(28px,4vw,54px); height:1px; background:var(--blue);
  flex:0 0 auto; transform-origin:left;
  animation:lineIn 1.1s var(--ease-out) .5s backwards;
}
@keyframes lineIn{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.hero h1{ margin-bottom:clamp(22px,2.8vw,34px); }
.hero h1 .accent{ color:var(--blue); }
.hero__sub{
  max-width:53ch; color:rgba(247,247,245,.76);
  margin-bottom:clamp(30px,3.6vw,46px);
}
.hero__actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(16px,2.2vw,30px);
}

/* Line-mask reveal for the headline. Each line is its own clipped block so
   the break stays identical at every width instead of re-ragging. */
.reveal-words{ display:block; }
.rw{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.rw > span{
  display:block;
  transform:translateY(112%);
  transition:transform 1.05s var(--ease-out);
}
.hero.is-ready .rw > span{ transform:translateY(0); }
.rw:nth-child(1) > span{ transition-delay:.34s; }
.rw:nth-child(2) > span{ transition-delay:.44s; }

/* staged fade for the rest of the hero */
.hero [data-stage]{
  opacity:0; transform:translateY(22px);
  transition:opacity .95s var(--ease-out), transform .95s var(--ease-out);
}
.hero.is-ready [data-stage]{ opacity:1; transform:none; }
.hero.is-ready [data-stage="1"]{ transition-delay:.18s; }
.hero.is-ready [data-stage="2"]{ transition-delay:.68s; }
.hero.is-ready [data-stage="3"]{ transition-delay:.80s; }
.hero.is-ready [data-stage="4"]{ transition-delay:.94s; }

/* Hero footer rail: scroll cue + meta */
.hero__foot{
  position:relative; z-index:2;
  border-top:1px solid var(--hair-dark);
}
.hero__foot-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:clamp(16px,2vw,22px);
}
.scrollcue{
  display:inline-flex; align-items:center; gap:.85rem;
  color:var(--silver);
}
.scrollcue__track{
  position:relative; width:52px; height:1px;
  background:var(--hair-dark); overflow:hidden;
}
.scrollcue__track::after{
  content:""; position:absolute; inset:0;
  background:var(--blue);
  animation:cueSlide 2.6s var(--ease) infinite;
}
@keyframes cueSlide{
  0%{ transform:translateX(-100%); }
  55%{ transform:translateX(0); }
  100%{ transform:translateX(100%); }
}
.hero__meta{
  display:none; gap:2.4rem; color:var(--muted-dark);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
}
@media (min-width:820px){ .hero__meta{ display:flex; } }

/* ============================================================
   SECTION 2 — STATEMENT
   ============================================================ */
.statement{
  color:var(--on-light); overflow:hidden;
  background-color:#F3F0EA;
  background-image:linear-gradient(176deg, #F8F6F2 0%, #F3F0EA 54%, #EDE9E2 100%);
}

/* --- the statement itself --- */
.statement__main{ position:relative; }
/* --- signature --- */
.sig{
  color:var(--on-light);
  width:clamp(300px,29vw,420px);
  height:auto;
  overflow:visible;
  display:block;
}
@media (min-width:1000px){
  /* upper right of the statement block, where the mark used to sit */
  .sig{ position:absolute; z-index:1; top:-6px; right:0; }
}
@media (max-width:999px){
  /* below the headline instead of beside it, so nothing gets crowded.
     The svg sits before the heading in the markup (so it can be absolutely
     placed on desktop), so reorder rather than move it. */
  .statement__main{ display:flex; flex-direction:column; }
  .sig{ order:2; margin-top:clamp(30px,5vw,48px); width:clamp(230px,58vw,320px); }
}
.sig__word{
  font-family:var(--body);
  font-size:13px; font-weight:500; letter-spacing:5.2px;
}

/* Pre-animation state. Deliberately carries no transition: the transitions are
   attached in js/main.js immediately before the reveal, otherwise arming the
   signature would itself animate and the whole thing would flash in, un-draw,
   then redraw. */
.sig--armed .sig__script path{ stroke-dashoffset:var(--len); }
.sig--armed .sig__mark{ opacity:0; transform:translateX(-6px); }
.sig.is-written .sig__script path{ stroke-dashoffset:0; }
.sig.is-written .sig__mark{ opacity:1; transform:none; }

.statement__text{
  position:relative; z-index:1;
  max-width:78%;
  text-wrap:balance;
}
@media (min-width:1000px){ .statement__text{ max-width:62%; } }
@media (max-width:999px){ .statement__text{ max-width:100%; } }

/* Scroll-driven fill. JS splits the heading into words and drives each one
   from near-invisible to solid ink as the block travels up the viewport.
   Without JS the text simply renders solid — nothing is hidden. */
.statement__text .w{
  display:inline-block;
  color:var(--on-light);
}
.statement__text.is-split .w{ opacity:.12; }

/* --- supporting row --- */
.statement__foot{
  display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,56px);
  margin-top:clamp(44px,5.5vw,84px);
  padding-top:clamp(28px,3.2vw,44px);
  border-top:1px solid var(--hair-light);
}
@media (min-width:900px){
  .statement__foot{
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:clamp(40px,5vw,88px);
  }
}
.statement__support{
  color:var(--muted-light);
  font-size:clamp(1rem,.95rem + .3vw,1.14rem);
  line-height:1.6; max-width:38ch;
}

.disciplines{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,2.6vw,38px) clamp(20px,3vw,48px);
}
@media (max-width:520px){ .disciplines{ grid-template-columns:1fr; gap:22px; } }

.disc{
  display:grid; gap:.4rem;
  padding-top:1rem;
  border-top:1px solid var(--hair-light-2);
  position:relative;
}
.disc::before{
  content:""; position:absolute; top:-1px; left:0; width:100%; height:1px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease-out);
}
.is-in .disc::before{ transform:scaleX(1); }
.is-in .disc:nth-child(1)::before{ transition-delay:.10s; }
.is-in .disc:nth-child(2)::before{ transition-delay:.20s; }
.is-in .disc:nth-child(3)::before{ transition-delay:.30s; }
.is-in .disc:nth-child(4)::before{ transition-delay:.40s; }
.disc__n{
  font-family:var(--serif); font-style:italic;
  font-size:1rem; letter-spacing:.02em; color:var(--blue-ink); line-height:1;
}
.disc__k{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.15rem,1.7vw,1.45rem); letter-spacing:-.028em; line-height:1.1;
}
.disc__v{
  font-size:.85rem; line-height:1.45; color:rgba(17,17,17,.68);
}

/* ============================================================
   SECTION 3 — SERVICES
   ============================================================ */
/* Light falls from above the grid — the cards sit in it rather than on a flat fill. */
.services{
  position:relative; overflow:hidden;
  background:
    radial-gradient(130% 68% at 50% -14%, #0E1220 0%, rgba(14,18,32,0) 62%),
    var(--ink);
}
.services::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(75,140,255,.42), transparent);
}
.services__head{
  display:grid; gap:clamp(20px,2.6vw,40px); grid-template-columns:1fr;
  margin-bottom:clamp(48px,6vw,84px);
}
@media (min-width:980px){
  .services__head{ grid-template-columns:minmax(0,1.1fr) minmax(0,.78fr); align-items:end; }
}
.services__head p{ color:var(--muted-dark); max-width:44ch; }

.svc-grid{
  display:grid; gap:1px;
  background:var(--hair-dark);
  border:1px solid var(--hair-dark);
  grid-template-columns:1fr;
  position:relative; z-index:1;
}
@media (min-width:760px){ .svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1180px){ .svc-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.svc{
  position:relative;
  background:var(--ink);
  padding:clamp(30px,3.2vw,46px) clamp(24px,2.6vw,38px) clamp(34px,3.6vw,52px);
  display:flex; flex-direction:column; gap:clamp(28px,4vw,56px);
  min-height:clamp(300px,30vw,392px);
  transition:background .5s var(--ease), transform .5s var(--ease-out);
  overflow:hidden;
}
.svc::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--blue);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.svc::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(260px circle at var(--px,50%) var(--py,0%), rgba(75,140,255,.16), transparent 70%);
  opacity:0; transition:opacity .55s var(--ease);
}
.svc:hover{ background:var(--ink-lift); transform:translateY(-5px); }
.svc:hover::before{ transform:scaleX(1); }
.svc:hover::after{ opacity:1; }
.svc__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.svc__num{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:1.3rem; letter-spacing:.01em; color:var(--blue); line-height:1;
}
.svc__mark{
  --mark:20px; opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease-out);
}
.svc:hover .svc__mark{ opacity:.55; transform:translateY(0); }
.svc__body{ margin-top:auto; }
.svc__title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.32rem,1.9vw,1.62rem); letter-spacing:-.028em; line-height:1.12;
  margin-bottom:.9rem;
}
.svc__text{ color:var(--muted-dark); font-size:.955rem; line-height:1.6; }

/* ============================================================
   SECTION 4 — SELECTED WORK
   ============================================================ */
.work{
  color:var(--on-light);
  background-color:#F3F0EB;
  background-image:linear-gradient(184deg, #F6F3EF 0%, #F1EEE7 100%);
}
.work__head{
  display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between;
  gap:1.6rem; margin-bottom:clamp(42px,5vw,72px);
}
.work__head-sub{ max-width:36ch; }
.work__list{ display:grid; gap:clamp(28px,3.6vw,56px); }
.work__pair{ display:grid; gap:clamp(28px,3.6vw,56px); grid-template-columns:1fr; }
@media (min-width:900px){ .work__pair{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.case{ display:block; color:inherit; position:relative; }
.case__frame{
  position:relative; overflow:hidden;
  background:var(--ink);
  border:1px solid var(--hair-light);
  border-radius:3px;
  aspect-ratio:16/10;
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease), border-color .5s var(--ease);
}
.case--wide .case__frame{ aspect-ratio:21/9; }
@media (max-width:640px){
  .case--wide .case__frame{ aspect-ratio:16/11; }
  .case__frame{ aspect-ratio:16/11; }
}
.case:hover .case__frame{
  transform:translateY(-7px);
  box-shadow:0 26px 60px -28px rgba(7,8,13,.44);
  border-color:rgba(17,17,17,.24);
}
.case__inner{
  position:absolute; inset:0;
  transform:translate3d(var(--cx,0px),var(--cy,0px),0);
  transition:transform .7s var(--ease-out);
}
.case:hover .case__inner{ transform:scale(1.045) translate3d(var(--cx,0px),var(--cy,0px),0); }
.case__veil{
  position:absolute; inset:0; z-index:3;
  background:rgba(7,8,13,.28);
  opacity:1; transition:opacity .6s var(--ease);
}
.case:hover .case__veil{ opacity:0; }
.case__badge{
  position:absolute; z-index:4; left:0; bottom:0;
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--blue-fill); color:#fff;
  padding:.72rem 1.15rem;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  transform:translateY(101%);
  transition:transform .5s var(--ease-out);
}
.case:hover .case__badge{ transform:translateY(0); }
.case__meta{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding-top:clamp(18px,2vw,26px);
}
.case__cat{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(17,17,17,.70); margin-bottom:.7rem; display:block;
}
.case__name{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.42rem,2.5vw,2.2rem); letter-spacing:-.034em; line-height:1.06;
  margin-bottom:.7rem;
}
.case__desc{ color:var(--muted-light); max-width:46ch; font-size:.965rem; }
.case__go{
  flex:0 0 auto; display:none; align-items:center; gap:.5rem;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding-top:.4rem;
}
.case__go i{ font-style:normal; transition:transform .4s var(--ease-out); }
.case:hover .case__go i{ transform:translateX(5px); }
@media (min-width:720px){ .case__go{ display:inline-flex; } }
.case__go-m{ margin-top:1rem; }
@media (min-width:720px){ .case__go-m{ display:none; } }

/* ---- Website mockups (pure CSS, no fake logos or fake metrics) ---- */
.mk{ position:absolute; inset:0; display:flex; flex-direction:column; }

/* shared mockup primitives */
.mk-bar{ background:currentColor; border-radius:1px; display:block; }
.mk-soft{ opacity:.28; }
.mk-softer{ opacity:.16; }

/* Mockup A — luxury streetwear e-commerce */
.mk-a{ background:#0A0B11; color:#F7F7F5; padding:clamp(14px,2vw,26px); display:flex; flex-direction:column; gap:clamp(10px,1.4vw,18px); }
.mk-a__nav{ display:flex; align-items:center; justify-content:space-between; }
.mk-a__nav .mk-bar{ height:5px; }
.mk-a__navlinks{ display:flex; gap:10px; }
.mk-a__hero{
  flex:1 1 auto; min-height:0; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#14161F 0%,#0A0B11 60%);
  border:1px solid rgba(255,255,255,.07);
  display:grid; place-content:center; text-align:center; gap:8px;
  padding:10px;
}
.mk-a__hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 90% at 50% 120%, rgba(75,140,255,.2), transparent 70%);
}
.mk-a__word{
  font-family:var(--display); font-weight:600;
  font-size:clamp(.85rem,2.1vw,1.55rem); letter-spacing:.3em; text-transform:uppercase;
  opacity:.94;
}
.mk-a__sub{ font-size:clamp(.4rem,.72vw,.53rem); letter-spacing:.28em; text-transform:uppercase; opacity:.5; }
.mk-a__row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(8px,1.1vw,14px);
  flex:0 0 40%; min-height:0;
}
.mk-a__tile{
  height:100%; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(160deg,#12141C,#0C0E15);
  position:relative; overflow:hidden;
}
.mk-a__tile::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:34%; aspect-ratio:1;
  background:currentColor; opacity:.11;
  -webkit-mask:url("../assets/caesar-mark-white.png") center/contain no-repeat;
          mask:url("../assets/caesar-mark-white.png") center/contain no-repeat;
}

/* Mockup B — premium service business, light editorial */
.mk-b{ background:#F2F0EC; color:#111; display:flex; flex-direction:column; }
.mk-b__nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(10px,1.4vw,16px) clamp(14px,2vw,24px);
  border-bottom:1px solid rgba(17,17,17,.1);
}
.mk-b__nav .mk-bar{ height:5px; }
.mk-b__navlinks{ display:flex; gap:10px; }
.mk-b__main{
  flex:1 1 auto; min-height:0; display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(12px,1.8vw,22px);
  padding:clamp(14px,2vw,26px);
}
.mk-b__col{ display:flex; flex-direction:column; justify-content:center; gap:clamp(7px,.9vw,11px); }
.mk-b__h{ height:clamp(9px,1.5vw,15px); background:#111; border-radius:1px; }
.mk-b__img{
  background:linear-gradient(150deg,#1A1C24,#0C0E15);
  position:relative; overflow:hidden; border-radius:2px;
}
.mk-b__img::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 70% at 70% 25%, rgba(75,140,255,.24), transparent 66%);
}
.mk-b__strip{
  flex:0 0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(17,17,17,.1); border-top:1px solid rgba(17,17,17,.1);
}
.mk-b__cell{ background:#F2F0EC; padding:clamp(9px,1.3vw,15px) clamp(10px,1.4vw,16px); display:flex; flex-direction:column; gap:6px; }

/* Mockup C — booking / lead-gen platform */
.mk-c{ background:#090A10; color:#F7F7F5; display:flex; flex-direction:column; }
.mk-c__nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(10px,1.4vw,16px) clamp(14px,2vw,24px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mk-c__nav .mk-bar{ height:5px; }
.mk-c__pill{ height:14px; width:52px; border-radius:20px; background:var(--blue); opacity:.9; }
.mk-c__main{
  flex:1 1 auto; min-height:0; display:grid; grid-template-columns:1fr .92fr;
  gap:clamp(12px,1.8vw,22px); padding:clamp(14px,2vw,26px); align-items:center;
}
.mk-c__copy{ display:flex; flex-direction:column; gap:clamp(7px,.9vw,11px); }
.mk-c__h{ height:clamp(9px,1.5vw,14px); background:#F7F7F5; border-radius:1px; opacity:.92; }
.mk-c__card{
  background:#10121B; border:1px solid rgba(255,255,255,.1);
  border-radius:3px; padding:clamp(11px,1.5vw,18px);
  display:flex; flex-direction:column; gap:clamp(7px,.9vw,11px);
}
.mk-c__field{ height:clamp(13px,1.9vw,20px); border:1px solid rgba(255,255,255,.12); border-radius:2px; background:rgba(255,255,255,.03); }
.mk-c__field--focus{ border-color:var(--blue); box-shadow:0 0 0 2px rgba(75,140,255,.16); }
.mk-c__slots{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.mk-c__slot{ aspect-ratio:1.6; border:1px solid rgba(255,255,255,.1); border-radius:2px; }
.mk-c__slot--on{ background:var(--blue); border-color:var(--blue); }
.mk-c__submit{ height:clamp(15px,2.1vw,22px); background:var(--blue); border-radius:2px; }

/* ============================================================
   SECTION 5 — PROCESS
   ============================================================ */
.process{
  position:relative; overflow:hidden;
  background:
    radial-gradient(88% 60% at 6% 104%, #0D111A 0%, rgba(13,17,26,0) 60%),
    var(--ink);
}
.process__head{ margin-bottom:clamp(50px,6vw,88px); max-width:20ch; }
.steps{ display:grid; gap:0; grid-template-columns:1fr; position:relative; z-index:1; }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.step{
  position:relative;
  padding:clamp(26px,2.6vw,36px) 0 clamp(30px,3vw,44px);
  border-top:1px solid var(--hair-dark);
}
@media (min-width:900px){
  .step{ padding-right:clamp(20px,2.4vw,40px); }
  .step + .step{ padding-left:clamp(20px,2.4vw,40px); border-left:1px solid var(--hair-dark); }
}
@media (max-width:899px){
  .step{ padding-left:clamp(44px,12vw,64px); }
  .step::after{
    content:""; position:absolute; left:0; top:clamp(26px,2.6vw,36px); bottom:0;
    width:1px; background:var(--hair-dark);
  }
  .step:last-child::after{ display:none; }
}
/* animated blue progress on the top rule */
.step__rule{
  position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--ease-out);
}
.is-in .step__rule{ transform:scaleX(1); }
.is-in .step:nth-child(1) .step__rule{ transition-delay:.05s; }
.is-in .step:nth-child(2) .step__rule{ transition-delay:.20s; }
.is-in .step:nth-child(3) .step__rule{ transition-delay:.35s; }
.is-in .step:nth-child(4) .step__rule{ transition-delay:.50s; }
@media (max-width:899px){ .step__rule{ width:52px; right:auto; } }

.step__num{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(2.9rem,5.2vw,4.6rem); line-height:1; letter-spacing:-.01em;
  color:transparent;
  -webkit-text-stroke:1px rgba(199,204,214,.46);
  margin-bottom:clamp(20px,2.6vw,34px);
  transition:color .6s var(--ease), -webkit-text-stroke-color .6s var(--ease);
}
@media (max-width:899px){
  .step__num{
    position:absolute; left:0; top:clamp(22px,2.4vw,32px);
    font-size:clamp(.82rem,3.6vw,1rem); letter-spacing:.14em;
    color:var(--blue); -webkit-text-stroke:0; margin:0;
  }
}
.step:hover .step__num{ color:rgba(75,140,255,.14); -webkit-text-stroke-color:var(--blue); }
.step__title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.22rem,1.9vw,1.55rem); letter-spacing:-.03em;
  margin-bottom:.75rem;
}
.step__text{ color:var(--muted-dark); font-size:.955rem; max-width:34ch; }

.process__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem 2.2rem;
  margin-top:clamp(44px,5vw,72px);
  padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--hair-dark);
}
.process__foot p{ color:var(--muted-dark); max-width:48ch; font-size:.955rem; }

/* ============================================================
   SECTION 6 — INQUIRY
   ============================================================ */
.inquiry{
  color:var(--on-light);
  background-color:#F4F1EB;
  background-image:linear-gradient(174deg, #F2EFE8 0%, #F8F6F2 44%, #F1EDE6 100%);
}
.inquiry__grid{
  display:grid; gap:clamp(40px,5vw,80px); grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:1020px){
  .inquiry__grid{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(48px,6vw,104px); }
}
.inquiry__copy{ position:relative; }
@media (min-width:1020px){ .inquiry__copy{ position:sticky; top:calc(var(--nav-h) + 40px); } }
.inquiry__copy h2{ margin-bottom:clamp(20px,2.4vw,30px); max-width:14ch; }
.inquiry__copy .lede{ color:var(--muted-light); max-width:44ch; margin-bottom:clamp(30px,3.4vw,44px); }
.inquiry__points{ display:flex; flex-direction:column; gap:1rem; border-top:1px solid var(--hair-light); padding-top:clamp(24px,2.6vw,32px); }
.inquiry__point{ display:flex; gap:.85rem; align-items:baseline; font-size:.94rem; color:rgba(17,17,17,.72); }
.inquiry__point::before{ content:""; width:5px; height:5px; flex:0 0 auto; background:var(--blue); transform:rotate(45deg) translateY(-1px); }

/* Form card */
.formcard{
  position:relative;
  background:var(--paper);
  border:1px solid rgba(17,17,17,.16);
  border-radius:3px;
  padding:clamp(24px,3.4vw,52px);
}
.formcard::before{
  content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform 1.2s var(--ease-out) .18s;
}
.is-in .formcard::before{ transform:scaleX(1); }

.fgrid{ display:grid; gap:clamp(18px,2.1vw,26px); grid-template-columns:1fr; }
@media (min-width:640px){
  .fgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .f-full{ grid-column:1 / -1; }
}
.field{ display:flex; flex-direction:column; gap:.55rem; min-width:0; }
.field label{
  font-size:.7rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(17,17,17,.64);
  display:flex; align-items:center; gap:.4rem;
  transition:color .3s var(--ease);
}
.field label .opt{ letter-spacing:.08em; text-transform:none; color:rgba(17,17,17,.60); font-weight:400; }
.field:focus-within label{ color:var(--on-light); }

.ctl{
  width:100%; appearance:none; -webkit-appearance:none;
  background:transparent;
  border:0; border-bottom:1px solid rgba(17,17,17,.22);
  border-radius:0;
  padding:.72rem 0;
  font-size:1rem; line-height:1.45; color:var(--on-light);
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.ctl::placeholder{ color:rgba(17,17,17,.3); }
.ctl:hover{ border-bottom-color:rgba(17,17,17,.42); }
.ctl:focus{ outline:none; border-bottom-color:var(--on-light); box-shadow:0 1px 0 0 var(--on-light); }
.ctl:focus-visible{ outline:none; }
textarea.ctl{ resize:vertical; min-height:118px; }

/* select with custom chevron */
.selwrap{ position:relative; }
.selwrap::after{
  content:""; position:absolute; right:2px; top:50%; width:8px; height:8px;
  border-right:1.5px solid rgba(17,17,17,.5); border-bottom:1.5px solid rgba(17,17,17,.5);
  transform:translateY(-75%) rotate(45deg); pointer-events:none;
  transition:border-color .3s var(--ease);
}
.selwrap:focus-within::after{ border-color:var(--on-light); }
select.ctl{ padding-right:26px; cursor:pointer; color:rgba(17,17,17,.55); }
select.ctl.has-value{ color:var(--on-light); }
select.ctl option{ color:var(--on-light); }

/* checkbox */
/* consent line is running text, not a field label — override the label styling */
.field label.check,
.check{
  display:flex; align-items:flex-start; gap:.85rem; cursor:pointer;
  font-size:.9rem; font-weight:400; line-height:1.5;
  letter-spacing:normal; text-transform:none;
  color:rgba(17,17,17,.72);
}
.field:focus-within label.check{ color:rgba(17,17,17,.72); }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{
  flex:0 0 auto; width:19px; height:19px; margin-top:2px;
  border:1px solid rgba(17,17,17,.3); border-radius:2px;
  display:grid; place-content:center;
  transition:background .28s var(--ease), border-color .28s var(--ease);
}
.check__box::after{
  content:""; width:9px; height:5px;
  border-left:1.7px solid #fff; border-bottom:1.7px solid #fff;
  transform:rotate(-45deg) scale(.4); opacity:0;
  transition:transform .28s var(--ease-out), opacity .2s var(--ease);
  margin-top:-2px;
}
.check input:checked + .check__box{ background:var(--blue); border-color:var(--blue); }
.check input:checked + .check__box::after{ transform:rotate(-45deg) scale(1); opacity:1; }
.check input:focus-visible + .check__box{ outline:2px solid var(--blue); outline-offset:3px; }

.form__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.2rem; margin-top:clamp(26px,3vw,38px);
  padding-top:clamp(22px,2.6vw,30px); border-top:1px solid var(--hair-light-2);
}
.form__note{ font-size:.78rem; color:rgba(17,17,17,.62); letter-spacing:.02em; }
.err{
  display:block; font-size:.74rem; color:#C2413B; letter-spacing:.02em;
  min-height:0; opacity:0; transform:translateY(-3px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.field.is-invalid .err{ opacity:1; transform:none; }
.field.is-invalid .ctl{ border-bottom-color:#C2413B; }
.field.is-invalid label{ color:#C2413B; }
.check.is-invalid .check__box{ border-color:#C2413B; }

/* success panel */
.formcard__done{
  position:absolute; inset:0; z-index:5;
  background:var(--paper);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:1.15rem; padding:clamp(28px,3.6vw,56px);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .55s var(--ease), transform .55s var(--ease-out), visibility 0s linear .55s;
}
.formcard.is-done .formcard__done{ opacity:1; visibility:visible; transform:none; transition:opacity .55s var(--ease) .1s, transform .55s var(--ease-out) .1s, visibility 0s; }
.formcard.is-done .formcard__form{ opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.done__mark{ --mark:44px; }
.done__title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-.03em; line-height:1.15;
  max-width:20ch;
}
.done__text{ color:var(--muted-light); max-width:38ch; font-size:.96rem; }

/* ============================================================
   SECTION 7 — FINAL CTA + FOOTER
   ============================================================ */
.finale{ background:var(--ink); position:relative; overflow:hidden; }
.finale::before{
  content:""; position:absolute; left:50%; top:-10%; transform:translateX(-50%);
  width:min(1100px,120vw); aspect-ratio:1;
  background:radial-gradient(closest-side, rgba(75,140,255,.13), transparent 72%);
  pointer-events:none;
}
.finale__inner{ position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center; gap:clamp(28px,3.4vw,44px); }
.finale__mark{ --mark:clamp(48px,6vw,72px); opacity:.5; }
.finale h2{ max-width:16ch; }
.finale h2 .accent{ color:var(--blue); }

.footer{
  position:relative;
  background-color:var(--ink);
  background-image:linear-gradient(180deg, #090B12 0%, var(--ink) 46%);
  border-top:1px solid var(--hair-dark);
}
.footer__top{
  display:grid; gap:clamp(30px,4vw,56px); grid-template-columns:1fr;
  padding-block:clamp(46px,5vw,74px);
}
@media (min-width:820px){
  .footer__top{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:start; }
}
.footer__brand p{ color:var(--muted-dark); max-width:34ch; margin-top:1.15rem; font-size:.95rem; }
.footer__nav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; }
.footer__col h3{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(247,247,245,.62); margin-bottom:1.1rem; font-weight:500;
}
.footer__col li + li{ margin-top:.72rem; }
.footer__col a{
  font-size:.94rem; color:rgba(247,247,245,.78);
  display:inline-flex; align-items:center; gap:.45rem;
  transition:color .3s var(--ease);
  position:relative;
}
.footer__col a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--ease-out);
}
.footer__col a:hover{ color:var(--on-dark); }
.footer__col a:hover::after{ transform:scaleX(1); }
.footer__bottom{
  border-top:1px solid var(--hair-dark);
  padding-block:clamp(20px,2.4vw,28px);
  display:flex; flex-wrap:wrap; gap:.75rem 1.6rem;
  align-items:center; justify-content:space-between;
}
.footer__legal{ font-size:.76rem; color:rgba(247,247,245,.52); letter-spacing:.02em; max-width:64ch; }
.footer__totop{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--silver); transition:color .3s var(--ease);
}
.footer__totop:hover{ color:var(--on-dark); }
.footer__totop i{ font-style:normal; transition:transform .38s var(--ease-out); }
.footer__totop:hover i{ transform:translateY(-4px); }

/* ============================================================
   Scroll reveal
   ============================================================ */
[data-rise]{
  opacity:0; transform:translateY(22px);
  transition:opacity .95s var(--ease-out), transform .95s var(--ease-out);
  transition-delay:var(--d,0s);
}
[data-rise].is-in{ opacity:1; transform:none; }

/* Headings rise out of a mask, line by line, instead of fading up as a block.
   JS measures the real line boxes and re-groups on resize, so the split always
   matches how the text actually wraps. */
.ln{
  display:block; overflow:hidden;
  padding-bottom:.12em; margin-bottom:-.12em;
}
.ln__i{
  display:block;
  transform:translateY(112%);
  transition:transform 1.05s var(--ease-out);
  transition-delay:var(--ld,0s);
}
.is-in .ln__i,.ln--in .ln__i{ transform:translateY(0); }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  [data-rise],.hero [data-stage]{ opacity:1 !important; transform:none !important; }
  .rw > span{ transform:none !important; }
  .rail__line,.step__rule,.formcard::before{ transform:scaleX(1) !important; }
  .hero__video{ animation:none !important; transform:scale(1.02) !important; }
}

/* ============================================================
   Mobile refinements
   ============================================================ */
/* --- Portrait: cinematic bottom band ------------------------------------
   Below 900px a 16:9 `object-fit:cover` scales the video up to ~4x, which
   drops Caesar's face straight behind the headline and forces a scrim heavy
   enough to erase the statue. Instead the video takes a band across the
   lower half and dissolves upward into the near-black: the statue stays
   clearly visible and the copy sits on flat #07080D. */
@media (max-width:900px){
  .hero__body{ align-items:flex-start; padding-top:calc(var(--nav-h) + 44px); }
  .hero__actions{ flex-direction:column; align-items:stretch; gap:1.1rem; }
  .hero__actions .btn{ justify-content:center; width:100%; }
  .hero__actions .tlink{ justify-content:center; }
  .hero__media{
    top:auto; bottom:0; height:48%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.30) 20%, rgba(0,0,0,.82) 42%, #000 58%);
            mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.30) 20%, rgba(0,0,0,.82) 42%, #000 58%);
  }
  .hero__video{
    object-position:96% center;
    transform:scale(1.04) translateZ(0);
  }
  .hero__scrim--base{ background:transparent; }
  .hero__scrim--side{ background:none; }
  .hero__scrim--tint{
    background:radial-gradient(70% 40% at 58% 78%, rgba(75,140,255,.12) 0%, rgba(75,140,255,0) 66%);
  }
  .hero__scrim--edge{
    background:linear-gradient(to bottom,
      rgba(7,8,13,0) 46%,
      rgba(7,8,13,.10) 64%,
      rgba(7,8,13,.5) 89%,
      rgba(7,8,13,.93) 100%);
  }
}
/* Short phones: tighten the hero stack and drop the band so the CTAs never
   land on the statue's head. */
@media (max-width:900px) and (max-height:820px){
  .hero__media{ height:42%; }
  .hero__body{ padding-top:calc(var(--nav-h) + 26px); }
  .hero__eyebrow{ margin-bottom:16px; }
  .hero h1{ margin-bottom:18px; }
  .hero__sub{ margin-bottom:22px; font-size:.98rem; }
  .hero__actions{ gap:.85rem; }
}

@media (max-width:640px){
  :root{ --nav-h:66px; }
  .btn{ padding:1.05rem 1.5rem; }
  /* touch-friendly form fields */
  .ctl{ padding:.95rem 0; font-size:16px; }
  textarea.ctl{ min-height:132px; }
  .check{ font-size:.88rem; }
  .form__foot .btn{ width:100%; justify-content:center; }
  .footer__nav{ grid-template-columns:1fr; gap:2rem; }
  .statement__facts{ grid-template-columns:1fr; }
}