/* ==========================================================================
   NORBELIN — visual system
   Concept: the page as an engraved instrument. Intaglio plates, guilloche
   ground, denomination figures, plate marks, counterfoil rules.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  /* grounds — five steps, light to dark, so band pacing can be authored */
  --paper:          #F7F0E3;
  --paper-2:        #EFE6D3;
  --paper-3:        #E5D9C2;
  --burgundy:       #4A1022;
  --burgundy-deep:  #380B19;
  --burgundy-black: #26070F;

  /* ink */
  --ink:      #1E1712;
  --ink-76:   rgba(30,23,18,.78);
  --ink-56:   rgba(30,23,18,.58);
  --ink-38:   rgba(30,23,18,.40);
  --cream:    #F6F1EA;
  --cream-76: rgba(246,241,234,.76);
  --cream-52: rgba(246,241,234,.54);
  --cream-30: rgba(246,241,234,.30);

  /* the precious accent — rationed */
  --gold:      #C8A96A;
  --gold-lift: #E2C793;
  --gold-soft: rgba(200,169,106,.34);

  /* rules */
  --rule:        rgba(30,23,18,.16);
  --rule-strong: rgba(30,23,18,.34);
  --rule-dark:   rgba(246,241,234,.16);
  --rule-dark-s: rgba(246,241,234,.32);

  /* type */
  --display:"Zodiak","Bodoni Moda","Didot","Bodoni MT",Georgia,serif;
  --sans:"Switzer","Instrument Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;

  /* measure */
  --gutter: clamp(1.25rem,5.4vw,6.5rem);
  --maxw: 1600px;
  --topbar: 0px;

  /* motion — slow, settled, never bouncy */
  --ease:    cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.62,.02,.24,1);
  --t-slow:  1150ms;
  --t-mid:   680ms;
  --t-fast:  420ms;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(16px,.55vw + 14.4px,17.5px);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* laid paper — the tooth of the stock, not a texture effect */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:900;
  opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.018em}

::selection{background:var(--burgundy);color:var(--cream)}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:5px;border-radius:1px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--burgundy);color:var(--cream);padding:1rem 1.5rem;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:0}

/* ------------------------------------------------------------- structure */
.wrap{padding-inline:var(--gutter);max-width:var(--maxw);margin-inline:auto;width:100%}

.band{position:relative;padding-block:clamp(5rem,12vw,11.5rem)}
.band--tight{padding-block:clamp(3.5rem,7.5vw,6.5rem)}
.band--flush{padding-bottom:0}

/* ground modifiers */
.band--paper2{background:var(--paper-2)}
.band--paper3{background:var(--paper-3)}
.band--paper3 .practice{border-color:rgba(30,23,18,.2)}
.band--paper3 .practice:last-of-type{border-bottom-color:rgba(30,23,18,.2)}
.band--dark  {background:var(--burgundy);color:var(--cream)}
.band--deep  {background:var(--burgundy-deep);color:var(--cream)}
.band--black {background:var(--burgundy-black);color:var(--cream)}
.band--dark h1,.band--dark h2,.band--dark h3,
.band--deep h1,.band--deep h2,.band--deep h3,
.band--black h1,.band--black h2,.band--black h3{color:var(--cream)}

/* folio — the margin mark of a set page */
main{counter-reset:folio}
/* sticky topbar would otherwise clip every in-page anchor landing */
section[id],main[id]{scroll-margin-top:calc(var(--topbar) + 8px)}
.band[data-folio]{counter-increment:folio}
.band[data-folio]::before{
  content:"№ 0" counter(folio);
  position:absolute;top:clamp(5rem,12vw,11.5rem);
  left:calc(var(--gutter) - 3.1rem);
  font-family:var(--sans);font-size:.62rem;font-weight:500;
  letter-spacing:.22em;color:var(--ink-38);
  writing-mode:vertical-rl;
}
.band--dark[data-folio]::before,
.band--deep[data-folio]::before,
.band--black[data-folio]::before{color:var(--cream-30)}
@media(max-width:1280px){.band[data-folio]::before{display:none}}

/* --------------------------------------------------------- type fixtures */
.stamp{
  font-family:var(--sans);font-size:.6rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.3em;color:var(--ink-56);
  display:inline-flex;align-items:center;gap:.85rem;
}
.stamp--gold{color:var(--gold)}
.stamp--dark{color:var(--cream-52)}
.stamp__no{
  font-variant-numeric:tabular-nums;color:var(--gold);white-space:nowrap;flex:0 0 auto;
  padding-right:.85rem;border-right:1px solid var(--gold-soft);
}

.hed{font-size:clamp(2.35rem,5.4vw,4.9rem);line-height:1.01;letter-spacing:-.026em}
.hed--sm{font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.04;letter-spacing:-.022em}

.lede{
  font-size:clamp(1.06rem,.45vw + .95rem,1.28rem);
  line-height:1.66;color:var(--ink-76);max-width:56ch;font-weight:400;
}
.band--dark .lede,.band--deep .lede,.band--black .lede{color:var(--cream-76)}
.note{font-size:.815rem;line-height:1.6;color:var(--ink-56);letter-spacing:.005em}
.band--dark .note,.band--deep .note,.band--black .note{color:var(--cream-52)}

.prose{font-size:clamp(1.02rem,.3vw + .95rem,1.14rem);line-height:1.82;color:var(--ink-76);max-width:64ch}
.prose p + p{margin-top:1.55rem}

/* drop cap — set from the display face, optically aligned */
.prose--cap > p:first-of-type::first-letter{
  font-family:var(--display);font-weight:700;color:var(--burgundy);
  float:left;font-size:5.1em;line-height:.76;
  padding-right:.09em;padding-top:.06em;margin-left:-.045em;
}

/* -------------------------------------------------------------- ornament */
/* guilloche wave — the counterfoil rule between movements */
.wave{
  height:26px;width:100%;
  background-repeat:repeat-x;background-size:auto 100%;
  opacity:.5;
}
.wave--ink{background-image:url("/assets/pattern/wave-ink.svg")}
.wave--gold{background-image:url("/assets/pattern/wave-gold.svg");opacity:.42}

/* seal — dinkus / section mark */
.seal{width:clamp(46px,5vw,64px);height:auto;opacity:.72}

/* plate mark — the debossed edge of a copper plate on damp paper */
.platemark{position:relative}
.platemark::before{
  content:"";position:absolute;inset:-.85rem -1rem;
  border:1px solid var(--rule);pointer-events:none;
}
.band--dark .platemark::before,
.band--deep .platemark::before,
.band--black .platemark::before{border-color:var(--rule-dark)}

/* hairline that draws itself on reveal */
.hair{height:1px;background:var(--rule);width:100%;transform:scaleX(0);transform-origin:left;
  transition:transform 1250ms var(--ease)}
.hair--gold{background:var(--gold-soft)}
.band--dark .hair,.band--deep .hair,.band--black .hair{background:var(--rule-dark)}
.in .hair,.hair.in{transform:scaleX(1)}

/* ------------------------------------------------------------- controls */
.link{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--sans);font-size:.695rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.22em;text-decoration:none;
  padding-bottom:.5rem;position:relative;color:inherit;
}
.link::after,.link::before{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%}
.link::after{background:var(--rule-strong)}
.link::before{background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform 760ms var(--ease);z-index:1}
.link:hover::before,.link:focus-visible::before{transform:scaleX(1)}
.link__arw{transition:transform 620ms var(--ease);flex:0 0 auto}
.link:hover .link__arw{transform:translateX(5px)}
.band--dark .link::after,.band--deep .link::after,.band--black .link::after{background:var(--rule-dark-s)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;font-family:var(--sans);
  font-size:.69rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  padding:1.22rem 2.6rem;background:var(--burgundy);color:var(--cream);
  border:1px solid var(--burgundy);cursor:pointer;position:relative;overflow:hidden;
  transition:color 620ms var(--ease),border-color 620ms var(--ease);
}
.btn > span{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--burgundy-black);
  transform:scaleY(0);transform-origin:bottom;transition:transform 620ms var(--ease);
}
.btn:hover::before{transform:scaleY(1)}

/* the one gold fill on the page — the hero's single precious gesture */
.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--burgundy-black)}
.btn--gold::before{background:var(--cream)}
.btn--gold:hover{border-color:var(--cream);color:var(--burgundy-black)}

.btn--ghost{background:transparent;color:var(--burgundy);border-color:var(--rule-strong)}
.btn--ghost::before{background:var(--burgundy)}
.btn--ghost:hover{color:var(--cream);border-color:var(--burgundy)}

.btn--ghost-dark{background:transparent;color:var(--cream);border-color:var(--rule-dark-s)}
.btn--ghost-dark::before{background:var(--cream)}
.btn--ghost-dark:hover{color:var(--burgundy-black);border-color:var(--cream)}

/* ---------------------------------------------------------------- motion */
.rise{opacity:0;transform:translateY(22px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.rise.in{opacity:1;transform:none}

/* line mask — type rises out from behind a hard edge */
.mask{display:block;overflow:hidden}
.mask > *{display:block;transform:translateY(102%);
  transition:transform 1250ms var(--ease)}
.mask.in > *,.in .mask > *{transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .rise{opacity:1;transform:none}
  .mask > *{transform:none}
  .hair{transform:scaleX(1)}
}

/* ==========================================================================
   TOPBAR — wordmark + navigation + the running instrument
   ========================================================================== */
.topbar{position:sticky;top:0;z-index:80}

.masthead{
  background:rgba(247,240,227,.93);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color 700ms var(--ease),padding 700ms var(--ease);
}
.topbar.is-stuck .masthead{border-bottom-color:var(--rule)}
.masthead__inner{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding-block:1.4rem;transition:padding-block 700ms var(--ease);
}
.topbar.is-stuck .masthead__inner{padding-block:1rem}

.wordmark{
  font-family:var(--display);font-size:clamp(1.42rem,1.5vw,1.66rem);
  font-weight:600;letter-spacing:-.012em;line-height:1;
  text-decoration:none;color:var(--ink);display:inline-block;
}
.wordmark__pt{color:var(--gold)}

.nav{display:flex;gap:2.3rem;align-items:center}
.nav a{
  text-decoration:none;font-size:.665rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-56);position:relative;
  padding-block:.42rem;transition:color 560ms var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform 620ms var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.nav__cta{
  border:1px solid var(--rule-strong);padding:.72rem 1.4rem;color:var(--ink) !important;
  transition:border-color 560ms var(--ease),background 560ms var(--ease),color 560ms var(--ease);
}
.nav__cta::after{display:none}
.nav__cta:hover{background:var(--burgundy);border-color:var(--burgundy);color:var(--cream) !important}

/* ---- market instrument ---- */
.ticker{
  background:var(--burgundy-black);
  border-top:1px solid rgba(200,169,106,.28);
  border-bottom:1px solid rgba(200,169,106,.28);
  overflow:hidden;white-space:nowrap;position:relative;
}
.ticker::before,.ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(28px,6vw,90px);z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--burgundy-black),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--burgundy-black),transparent)}
.ticker__track{
  display:inline-flex;align-items:center;padding-block:.5rem;
  animation:tickerScroll 78s linear infinite;will-change:transform;
}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{
  display:inline-flex;align-items:center;gap:.55rem;color:var(--cream-76);
  font-family:var(--sans);font-size:.635rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  padding-inline:1.5rem;border-right:1px solid rgba(246,241,234,.12);
  font-variant-numeric:tabular-nums;
}
.ticker__sym{font-weight:600;color:var(--cream);letter-spacing:.16em}
.ticker__chg.up{color:var(--gold)}
.ticker__chg.down{color:rgba(246,241,234,.5)}
.ticker__ico{width:.46rem;height:.46rem;flex:0 0 auto}
.ticker__ico.up path{fill:var(--gold)}
.ticker__ico.down path{fill:rgba(246,241,234,.5)}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ---- mobile menu ---- */
.menu-btn{
  display:none;background:none;border:0;padding:.5rem 0;cursor:pointer;
  font-family:var(--sans);font-size:.665rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);align-items:center;gap:.65rem;
}
.menu-btn__bars{display:block;width:22px;height:9px;position:relative}
.menu-btn__bars i{position:absolute;left:0;right:0;height:1px;background:var(--ink);
  transition:transform 620ms var(--ease),opacity 380ms var(--ease)}
.menu-btn__bars i:first-child{top:0}
.menu-btn__bars i:last-child{bottom:0}
body.menu-open .menu-btn__bars i:first-child{transform:translateY(4px) rotate(15deg)}
body.menu-open .menu-btn__bars i:last-child{transform:translateY(-4px) rotate(-15deg)}

.menu{
  position:fixed;inset:0;z-index:70;background:var(--burgundy-black);color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--gutter) 3rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 900ms var(--ease);
  visibility:hidden;
}
body.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu__rosette{
  position:absolute;right:-22%;top:50%;transform:translateY(-50%);
  width:min(105vw,760px);opacity:.075;pointer-events:none;
}
.menu__list{list-style:none;margin:0;padding:0;position:relative;z-index:1}
.menu__list li{overflow:hidden;border-bottom:1px solid rgba(246,241,234,.12)}
.menu__list a{
  display:flex;align-items:baseline;gap:1.1rem;text-decoration:none;
  font-family:var(--display);font-weight:600;
  font-size:clamp(2rem,10vw,3.1rem);letter-spacing:-.024em;color:var(--cream);
  padding-block:.62rem;
  transform:translateY(104%);transition:transform 820ms var(--ease),color 500ms var(--ease);
}
body.menu-open .menu__list a{transform:none}
.menu__list a:hover{color:var(--gold)}
.menu__list .n{
  font-family:var(--sans);font-size:.6rem;font-weight:500;letter-spacing:.22em;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
.menu__foot{margin-top:2.6rem;position:relative;z-index:1;
  opacity:0;transition:opacity 700ms var(--ease) 520ms}
body.menu-open .menu__foot{opacity:1}

@media(max-width:1000px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
}

/* ==========================================================================
   I. HERO — the handshake
   ========================================================================== */
.hero{
  position:relative;background:var(--burgundy-black);color:var(--cream);
  overflow:hidden;isolation:isolate;
  min-height:100vh;min-height:calc(100svh - var(--topbar));
  display:flex;flex-direction:column;
}

/* engine-turned ground */
.hero__rosette{
  position:absolute;z-index:0;pointer-events:none;
  right:-16%;top:50%;width:min(128vh,1180px);
  transform:translateY(-50%);opacity:.085;
  animation:turn 300s linear infinite;
}
@keyframes turn{from{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero__rosette{animation:none}}

/* the intaglio plate — ascends through the frame and leaves it top-right,
   so the eye exits the composition in the direction the headline promises */
.hero__plate{
  position:absolute;z-index:1;pointer-events:none;
  right:-9%;top:-14%;width:min(68%,1120px);
  opacity:0;transform:translate3d(0,44px,0);
  transition:opacity 2400ms var(--ease) 300ms,transform 2800ms var(--ease) 300ms;
}
.hero.is-live .hero__plate{opacity:.95;transform:none}

/* two-axis grade: horizontal keeps the type side solid, vertical grounds the
   headline so it never floats over open linework */
.hero__veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(38,7,15,.1) 0%,rgba(38,7,15,.34) 44%,rgba(38,7,15,.88) 78%,var(--burgundy-black) 100%),
    linear-gradient(96deg,var(--burgundy-black) 2%,rgba(38,7,15,.9) 26%,rgba(38,7,15,.38) 54%,rgba(38,7,15,0) 80%);
}

.hero__body{
  position:relative;z-index:3;flex:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(3.5rem,10vw,8rem);
  padding-bottom:clamp(2.4rem,4.5vw,4rem);
}

.hero__rule{height:1px;background:var(--gold-soft);width:100%;max-width:min(74vw,760px);
  transform:scaleX(0);transform-origin:left;transition:transform 1500ms var(--ease) 120ms;
  margin-bottom:1.15rem}
.hero.is-live .hero__rule{transform:scaleX(1)}

.hero__stamp{opacity:0;transform:translateY(10px);
  transition:opacity 900ms var(--ease) 440ms,transform 900ms var(--ease) 440ms}
.hero.is-live .hero__stamp{opacity:1;transform:none}

.hero__h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(3.4rem,12.4vw,11rem);
  line-height:.87;letter-spacing:-.042em;color:var(--cream);
  margin-top:clamp(1.4rem,3.2vw,2.5rem);
}
.hero__h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero__h1 .ln > span{display:block;transform:translateY(104%);
  transition:transform 1500ms var(--ease)}
.hero.is-live .hero__h1 .ln > span{transform:none}
.hero__h1 .ln:nth-child(1) > span{transition-delay:560ms}
.hero__h1 .ln:nth-child(2) > span{transition-delay:720ms}
.hero__h1 .pt{color:var(--gold)}

.hero__lede{
  font-size:clamp(1.06rem,.5vw + .95rem,1.3rem);line-height:1.62;
  color:var(--cream-76);max-width:46ch;
  margin-top:clamp(1.9rem,3.4vw,2.8rem);
  opacity:0;transform:translateY(14px);
  transition:opacity 1100ms var(--ease) 1000ms,transform 1100ms var(--ease) 1000ms;
}
.hero.is-live .hero__lede{opacity:1;transform:none}

.hero__cta{
  display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;align-items:center;
  margin-top:clamp(2.2rem,4vw,3.2rem);
  opacity:0;transform:translateY(14px);
  transition:opacity 1100ms var(--ease) 1180ms,transform 1100ms var(--ease) 1180ms;
}
.hero.is-live .hero__cta{opacity:1;transform:none}

.hero__foot{
  position:relative;z-index:3;border-top:1px solid var(--rule-dark);
  opacity:0;transition:opacity 1200ms var(--ease) 1400ms;
}
.hero.is-live .hero__foot{opacity:1}
.disciplines{display:flex;flex-wrap:wrap;gap:0 clamp(1.5rem,3.4vw,3.2rem);padding-block:1.15rem}
.disciplines span{
  font-size:.615rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cream-52);padding-block:.35rem;
}

/* ---- client register ---- */
.clients{background:var(--burgundy-black);color:var(--cream);
  border-top:1px solid var(--rule-dark);padding-block:clamp(1.6rem,3vw,2.3rem);overflow:hidden}
.clients__label{
  display:block;font-family:var(--sans);font-size:.6rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--cream-52);margin-bottom:1.5rem;
}
.clients__track{
  display:inline-flex;align-items:center;gap:clamp(3rem,7vw,6.5rem);
  padding-left:var(--gutter);white-space:nowrap;
  animation:logosScroll 52s linear infinite;will-change:transform;
}
.clients:hover .clients__track{animation-play-state:paused}
.clients__img{
  height:clamp(2.2rem,3.4vw,3rem);width:auto;flex:0 0 auto;
  opacity:.62;filter:grayscale(1) brightness(1.9) contrast(.85);
  transition:opacity 620ms var(--ease);
}
.clients__img--wide{height:clamp(1.8rem,2.7vw,2.4rem)}
.clients__img:hover{opacity:1}
@keyframes logosScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.clients__track{animation:none}}

@media(min-width:901px) and (max-height:860px){
  .hero__h1{font-size:clamp(3.4rem,9.4vh,7.4rem)}
  .hero__body{padding-top:clamp(2.5rem,6vh,4.5rem)}
  .hero__lede{margin-top:1.5rem;font-size:1.06rem}
  .hero__cta{margin-top:1.7rem}
}
@media(max-width:900px){
  .hero__plate{right:-14%;bottom:auto;top:8%;width:118%;opacity:0}
  .hero.is-live .hero__plate{opacity:.3}
  .hero__veil{background:linear-gradient(180deg,rgba(38,7,15,.55) 0%,rgba(38,7,15,.86) 42%,var(--burgundy-black) 78%)}
  .hero__rosette{right:-42%;width:150vw;opacity:.07}
}

/* ==========================================================================
   II. RESEARCH — a tight dark band holding the opening movement
   ========================================================================== */
.research{position:relative;overflow:hidden}
.research__plate{
  position:absolute;right:-4%;top:0;bottom:0;margin-block:auto;height:-moz-fit-content;height:fit-content;
  width:min(40%,460px);opacity:.22;pointer-events:none;
}
@media(max-width:840px){.research__plate{display:none}}
.research__inner{
  position:relative;z-index:1;display:grid;gap:2.4rem;align-items:end;
  grid-template-columns:1fr;
}
@media(min-width:840px){
  .research__inner{grid-template-columns:1fr auto;gap:3.5rem}
}

/* ==========================================================================
   III. POSITION — the thesis. The page's largest breath.
   ========================================================================== */
.position{position:relative;overflow:hidden}
.position__plate{
  position:absolute;left:-10%;bottom:-6%;width:min(46%,620px);
  opacity:.14;pointer-events:none;
}
.position__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:clamp(2.4rem,5vw,5.5rem)}
@media(min-width:960px){
  .position__grid{grid-template-columns:.82fr 1.18fr;align-items:start}
}
.position__hed{margin-top:1.7rem}

.pullquote{
  font-family:var(--display);font-weight:500;font-style:normal;
  font-size:clamp(1.6rem,3.2vw,2.65rem);line-height:1.24;letter-spacing:-.024em;
  color:var(--burgundy);margin-top:clamp(2.6rem,5vw,4rem);max-width:22ch;
  position:relative;padding-top:2.6rem;
}
.pullquote::before{
  content:"";position:absolute;top:0;left:0;width:clamp(64px,9vw,120px);height:1px;background:var(--gold);
}
.pullquote__attr{
  display:block;margin-top:1.6rem;font-family:var(--sans);font-size:.6rem;
  font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-56);
}

/* ==========================================================================
   IV. PROCESS — the centrepiece. Full-bleed, cinematic, plate-led.
   ========================================================================== */
.process{position:relative;overflow:hidden}
.process__rosette{
  position:absolute;left:-24%;top:-30%;width:min(105vh,900px);opacity:.06;pointer-events:none;
  animation:turnSlow 420s linear infinite;
}
@keyframes turnSlow{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){.process__rosette{animation:none}}
.process__head{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:1.4rem 4rem}
.process__hed{font-size:clamp(2.2rem,4.6vw,4.1rem);margin-top:1.7rem;letter-spacing:-.026em;max-width:14ch}
.process__head .lede{max-width:52ch}
@media(min-width:1000px){
  .process__head{grid-template-columns:1.02fr .98fr;align-items:end}
  .process__hed{margin-top:1.7rem}
  .process__head .lede{margin-top:0 !important;padding-bottom:.4rem}
}

.process__stage{
  position:relative;z-index:1;margin-top:clamp(3rem,6vw,5.5rem);
  min-height:clamp(430px,42vw,520px);
}
.pstep{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1250ms var(--ease-io);
  display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;
}
.pstep.is-active{opacity:1;visibility:visible;position:relative}
@media(min-width:900px){
  .pstep{grid-template-columns:.94fr 1.06fr;gap:clamp(2.5rem,5vw,5rem)}
}
.pstep__text{border-top:1px solid var(--rule-dark);padding-top:clamp(1.8rem,3.4vw,2.6rem);max-width:56ch}
.pstep__no{
  font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,5vw,4rem);
  color:var(--gold);line-height:1;letter-spacing:-.03em;display:block;
}
.pstep__phase{
  display:block;margin-top:1rem;font-size:.6rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--cream-52);
}
.pstep__h{font-size:clamp(1.85rem,3.4vw,2.9rem);color:var(--cream);margin-top:1.15rem;letter-spacing:-.024em}
.pstep__body{font-size:clamp(1rem,.3vw + .92rem,1.1rem);line-height:1.76;color:var(--cream-76);margin-top:1.3rem}

.pstep__figure{position:relative;display:flex;align-items:center;justify-content:center;min-height:clamp(200px,26vw,340px)}
.pstep__figure::before{
  content:"";position:absolute;inset:0;border:1px solid var(--rule-dark);
}
.pstep__figure::after{
  content:"";position:absolute;inset:.55rem;border:1px solid rgba(200,169,106,.18);
}
.pstep__art{
  max-height:clamp(160px,22vw,270px);width:auto;max-width:82%;
  object-fit:contain;opacity:.94;position:relative;
}
@media(max-width:899px){
  .pstep__figure{min-height:180px;order:-1}
  .pstep__art{max-height:150px}
}

/* the timeline plate doubles as the progress rail */
.process__controls{
  position:relative;z-index:1;display:flex;align-items:center;gap:1.2rem;
  margin-top:clamp(2.4rem,4.5vw,3.6rem);flex-wrap:wrap;
}
.icon-btn{
  background:none;border:1px solid var(--rule-dark-s);width:2.85rem;height:2.85rem;
  cursor:pointer;display:grid;place-items:center;color:var(--cream-76);flex:0 0 auto;
  transition:border-color 560ms var(--ease),color 560ms var(--ease),background 560ms var(--ease);
}
.icon-btn:hover{border-color:var(--gold);color:var(--gold)}
.process__dots{display:flex;gap:.6rem}
.process__dots button{
  width:.38rem;height:.38rem;border:0;padding:0;cursor:pointer;border-radius:50%;
  background:rgba(246,241,234,.26);
  transition:background 560ms var(--ease),transform 560ms var(--ease);
}
.process__dots button.is-active{background:var(--gold);transform:scale(1.5)}
.process__rail{flex:1;min-width:120px;max-width:300px;height:1px;background:rgba(246,241,234,.2);position:relative}
.process__rail::after{
  content:"";position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--gold);
}
.process__rail.animate::after{width:100%;transition:width 6000ms linear}
.process__count{
  font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;color:var(--cream-52);
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   V. PRACTICES — the register of disciplines
   ========================================================================== */
.practices{position:relative;overflow:hidden}
.practices__plate{
  position:absolute;right:-4%;bottom:6%;width:min(30%,400px);opacity:.11;pointer-events:none;
}
@media(max-width:1100px){.practices__plate{display:none}}
.section__head{
  position:relative;z-index:1;display:flex;justify-content:space-between;
  align-items:flex-end;gap:2.5rem;flex-wrap:wrap;
}
.section__head .note{max-width:32ch}

.practice{
  position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:.85rem 3rem;
  padding-block:clamp(2.1rem,3.6vw,3.2rem);border-top:1px solid var(--rule);
  transition:padding-left 760ms var(--ease);
}
.practice:last-of-type{border-bottom:1px solid var(--rule)}
.practice::before{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform 900ms var(--ease);
}
.practice:hover::before{transform:scaleX(1)}
@media(min-width:900px){
  .practice{grid-template-columns:4.5rem minmax(0,.82fr) minmax(0,1.18fr) 8.5rem;align-items:start}
  .practice:hover{padding-left:1.1rem}
  .practice h3{margin-bottom:0;padding-right:2rem}
}
.practice__no{
  font-family:var(--display);font-weight:600;font-size:1.4rem;color:var(--ink-38);
  letter-spacing:0;font-variant-numeric:tabular-nums;
  transition:color 640ms var(--ease);
}
.practice:hover .practice__no{color:var(--gold)}
.practice h3{
  font-size:clamp(1.62rem,2.9vw,2.35rem);margin-bottom:.9rem;letter-spacing:-.024em;
  transition:color 640ms var(--ease);
}
.practice:hover h3{color:var(--burgundy)}
.practice p{color:var(--ink-76);max-width:52ch;font-size:1rem;line-height:1.72}
.practice__act{display:flex;align-items:flex-start}
@media(max-width:899px){.practice__act{margin-top:1.2rem}}

/* ==========================================================================
   VI. CASE STUDIES — denominations
   ========================================================================== */
.cases{position:relative;overflow:hidden}
.cases__plate{
  position:absolute;left:-8%;bottom:4%;width:min(38%,480px);opacity:.1;pointer-events:none;
}
.case{
  position:relative;z-index:1;border-top:1px solid var(--rule-strong);
  padding-block:clamp(2.8rem,5vw,4.6rem);
  display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.4rem);
}
.case:last-of-type{border-bottom:1px solid var(--rule-strong)}
@media(min-width:1040px){
  .case{grid-template-columns:1.06fr .94fr;gap:clamp(3rem,6vw,6rem);align-items:start}
}
.case__h{font-size:clamp(1.72rem,3.1vw,2.6rem);margin-top:1.15rem;letter-spacing:-.024em;max-width:20ch}
.case__acts{display:flex;flex-wrap:wrap;gap:1.4rem 2.2rem;align-items:center;margin-top:2rem}

/* the denomination panel — the figures are the drama */
.denoms{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.denom{
  border-top:1px solid var(--rule);padding-block:1.5rem;padding-right:1.2rem;
  position:relative;
}
.denom:nth-child(odd){padding-right:1.6rem}
.denom:nth-child(even){padding-left:1.6rem;border-left:1px solid var(--rule)}
.denom__fig{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,4.4vw,3.5rem);line-height:1;letter-spacing:-.038em;
  color:var(--burgundy);font-variant-numeric:tabular-nums lining-nums;
}
.denom__lab{
  margin-top:.85rem;font-size:.635rem;line-height:1.55;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink-56);max-width:25ch;
}
.denoms--single{grid-template-columns:1fr}
.denoms--single .denom{border-left:0;padding-left:0}

/* ==========================================================================
   VII. INDUSTRIES — dark band, skyline bled across the foot
   ========================================================================== */
.sectors-band{position:relative;overflow:hidden}
.sectors-band{padding-bottom:clamp(9rem,15vw,14rem)}
.sectors-band__plate{
  position:absolute;left:0;right:0;bottom:0;margin-inline:auto;
  width:min(132%,1750px);max-height:clamp(120px,15vw,215px);
  object-fit:contain;object-position:bottom;opacity:.34;pointer-events:none;
}
.sectors{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0;
  margin-top:clamp(2.4rem,4.5vw,3.6rem);border-top:1px solid var(--rule-dark);
}
.sector{
  border-bottom:1px solid var(--rule-dark);padding:1.5rem .2rem;text-decoration:none;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  color:var(--cream-76);position:relative;transition:color 620ms var(--ease);
}
.sector::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform 760ms var(--ease);
}
.sector:hover{color:var(--cream)}
.sector:hover::after{transform:scaleX(1)}
.sector__name{font-family:var(--display);font-weight:500;font-size:clamp(1.16rem,1.7vw,1.42rem);letter-spacing:-.014em}
.sector__mark{
  font-family:var(--display);font-size:.95rem;color:var(--gold);opacity:0;
  transform:translateX(-6px);transition:opacity 620ms var(--ease),transform 620ms var(--ease);
}
.sector:hover .sector__mark{opacity:1;transform:none}

/* ==========================================================================
   VIII. FOUNDER
   ========================================================================== */
.founder__grid{display:grid;grid-template-columns:1fr;gap:clamp(2.2rem,4.5vw,4.5rem);align-items:start}
@media(min-width:960px){.founder__grid{grid-template-columns:.4fr .6fr}}
.plate-slot{
  background:var(--paper-2);aspect-ratio:3/4;width:100%;position:relative;
  display:grid;place-items:center;border:1px solid var(--rule);
}
.plate-slot::after{content:"";position:absolute;inset:.6rem;border:1px solid var(--rule)}
.plate-slot span{
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-38);font-family:var(--sans);position:relative;z-index:1;
}
.signature{
  font-family:var(--display);font-weight:500;font-size:1.7rem;
  color:var(--burgundy);margin-top:2.2rem;letter-spacing:-.01em;
}

/* ==========================================================================
   IX. CONTACT — the close, on the deepest ground
   ========================================================================== */
.contact{position:relative;overflow:hidden}
.contact__rosette{
  position:absolute;left:-18%;bottom:-38%;width:min(92vh,780px);opacity:.07;pointer-events:none;
}
.contact__plate{position:absolute;right:-5%;top:6%;width:min(32%,400px);opacity:.17;pointer-events:none}
.contact__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:clamp(2.8rem,5.5vw,5.5rem)}
@media(min-width:1000px){.contact__grid{grid-template-columns:.86fr 1.14fr}}

.book{
  border:1px solid var(--rule-dark-s);padding:clamp(1.7rem,3vw,2.4rem);
  margin-top:2.8rem;position:relative;
}
.book::before{content:"";position:absolute;top:0;left:0;width:2px;height:100%;background:var(--gold)}
.book__h{font-family:var(--display);font-weight:600;font-size:clamp(1.28rem,2vw,1.62rem);
  margin-top:.75rem;letter-spacing:-.018em;color:var(--cream)}
.nda{border-left:1px solid var(--gold);padding-left:1.5rem;margin-top:2.6rem;
  color:var(--cream-76);font-size:.95rem;max-width:46ch}

.field{border-bottom:1px solid var(--rule-dark-s);padding-block:1.05rem;display:block;
  transition:border-color 620ms var(--ease)}
.field label{display:block;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cream-52);margin-bottom:.7rem}
.field input,.field select,.field textarea{
  width:100%;border:0;background:transparent;font-family:var(--display);
  font-size:1.16rem;font-weight:500;color:var(--cream);padding:0;resize:vertical;letter-spacing:-.008em;
}
.field select option{background:var(--burgundy-black);color:var(--cream)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none}
.field:focus-within{border-color:var(--gold)}
.field input::placeholder,.field textarea::placeholder{color:var(--cream-30)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--burgundy-black);color:var(--cream);border-top:1px solid var(--rule-dark)}
.footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:2.6rem;padding-block:clamp(3rem,5.5vw,5rem)}
.footer .wordmark{color:var(--cream)}
.footer h4{font-family:var(--sans);font-size:.6rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cream-52);margin-bottom:1.35rem}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:.7rem}
.footer a{text-decoration:none;font-size:.885rem;color:var(--cream-76);transition:color 520ms var(--ease)}
.footer a:hover{color:var(--gold)}
.footer .note{color:var(--cream-52)}
.colophon{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;
  border-top:1px solid var(--rule-dark);padding-block:1.9rem;align-items:center;
}
.colophon .note{font-size:.72rem;letter-spacing:.06em}