/* ==========================================================================
   Proglomerate
   Palette sampled from the logo file and the approved hero footage.
   ========================================================================== */

:root{
  --canvas:#08111E;
  --canvas-2:#0B1728;
  --panel:#101B33;
  --panel-2:#16223D;
  --accent:#C9A55E;
  --accent-deep:#B08D45;
  --accent-hover:#DBBB78;
  --accent-muted:rgba(201,165,94,.14);
  --hair:rgba(201,165,94,.20);
  --hair-strong:rgba(201,165,94,.42);
  --text-primary:#F7F5EF;
  --text-secondary:#A9B4C6;
  --text-tertiary:#7C879B;

  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);

  --wrap:1180px;
  --gut:clamp(1.25rem,5vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:clamp(.975rem,.94rem + .18vw,1.0625rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{display:block;max-width:100%}

h1,h2,h3,h4{margin:0;font-weight:400}

p{margin:0}

a{color:inherit}

::selection{background:var(--accent-muted);color:var(--text-primary)}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#08111E;
  padding:.75rem 1.25rem;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:.75rem;top:.75rem}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ==========================================================================
   The fixed background environment: one place, not stacked sections
   ========================================================================== */

.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.env-glow{
  position:absolute;inset:-20%;
  background:
    radial-gradient(ellipse 42% 46% at 78% 30%,rgba(201,165,94,.055),transparent 62%),
    radial-gradient(ellipse 52% 40% at 14% 76%,rgba(46,74,122,.10),transparent 66%);
  animation:envdrift 110s var(--ease-soft) -22s infinite alternate;
  will-change:transform;
}
@keyframes envdrift{
  from{transform:translate3d(-1.6%,1.1%,0) scale(1)}
  to{transform:translate3d(2.2%,-1.7%,0) scale(1.06)}
}

.env-motes{
  position:absolute;inset:-30%;
  background-image:
    radial-gradient(circle at 12% 18%,rgba(201,165,94,.5) 0,transparent 1.1px),
    radial-gradient(circle at 63% 41%,rgba(201,165,94,.38) 0,transparent 1px),
    radial-gradient(circle at 34% 77%,rgba(247,245,239,.28) 0,transparent .9px),
    radial-gradient(circle at 86% 66%,rgba(201,165,94,.42) 0,transparent 1.1px);
  background-size:340px 340px,470px 470px,290px 290px,610px 610px;
  opacity:.5;
  animation:motedrift 150s linear -40s infinite;
  will-change:transform;
}
@keyframes motedrift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-3%,-9%,0)}
}

.env-grain{
  position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}

/* Everything above the environment */
.nav,main,.foot{position:relative;z-index:1}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  padding:1.05rem var(--gut);
  transition:background-color .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease),padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(8,17,30,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(201,165,94,.14);
  padding-block:.8rem;
}

.brand{
  display:inline-flex;align-items:center;gap:.72rem;
  text-decoration:none;color:var(--text-primary);
}
.brand-mark{width:30px;height:30px;flex:none;color:var(--accent)}
.brand-text{display:flex;flex-direction:column;gap:.14rem;line-height:1}
.brand-name{
  font-family:var(--display);font-weight:400;font-size:1.06rem;
  letter-spacing:.10em;text-transform:uppercase;
}
.brand-tag{
  font-family:var(--mono);font-size:.5rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--accent);
}

.nav-links{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.1rem)}
.nav-links a{
  font-size:.83rem;letter-spacing:.03em;color:var(--text-secondary);
  text-decoration:none;position:relative;padding-block:.35rem;
  transition:color .35s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--text-primary)}

/* Two classes, so this beats the single-class .btn rule further down */
.nav-links .nav-cta{display:none}
@media (min-width:900px){.nav-links .nav-cta{display:inline-flex}}

/* Narrow screens: the wordmark gives up its tagline and some tracking so the
   three links always fit. Nothing is ever clipped. */
@media (max-width:620px){
  .nav{padding-inline:1rem;gap:.75rem}
  .brand{gap:.55rem}
  .brand-mark{width:26px;height:26px}
  .brand-tag{display:none}
  .brand-name{font-size:.86rem;letter-spacing:.06em}
  .nav-links{gap:.95rem}
  .nav-links a{font-size:.78rem}
}
@media (max-width:400px){
  .nav{padding-inline:.9rem}
  .brand{gap:.45rem}
  .brand-mark{width:24px;height:24px}
  .brand-name{font-size:.78rem;letter-spacing:.03em}
  .nav-links{gap:.7rem}
  .nav-links a{font-size:.73rem}
}
@media (max-width:350px){
  .brand-name{font-size:.72rem;letter-spacing:0}
  .nav-links{gap:.55rem}
  .nav-links a{font-size:.7rem}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--body);font-size:.85rem;font-weight:500;letter-spacing:.02em;
  padding:.78rem 1.35rem;
  border:1px solid var(--accent);
  border-radius:2px;
  text-decoration:none;cursor:pointer;
  background:transparent;color:var(--accent);
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
  text-shadow:none;
}
.btn:hover{background:var(--accent);color:#08111E;transform:translateY(-1px)}

.btn-solid{background:var(--accent);color:#08111E;border-color:var(--accent)}
.btn-solid:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#08111E}

.btn-quiet{
  border-color:rgba(169,180,198,.28);color:var(--text-secondary);
}
.btn-quiet:hover{background:transparent;border-color:var(--text-secondary);color:var(--text-primary)}

.btn-arrow{
  width:1em;height:1em;flex:none;
  transition:transform .4s var(--ease);
}
.btn:hover .btn-arrow{transform:translateX(3px)}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ==========================================================================
   The scrub hero
   ========================================================================== */

.hero{position:relative;height:520vh}

.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--canvas);
}

.poster,
#heroVideo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.poster{
  background-size:cover;background-position:50% 50%;
  transition:opacity 1.1s var(--ease);
}
#heroVideo{
  opacity:0;
  transition:opacity 1.1s var(--ease);
  will-change:transform;
  transform:translateZ(0);
}
.stage.video-ready #heroVideo{opacity:1}
.stage.video-failed #heroVideo{display:none}

.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,17,30,.72) 0%,rgba(8,17,30,0) 24%),
    linear-gradient(90deg,rgba(6,12,22,.58) 0%,rgba(6,12,22,.12) 46%,rgba(6,12,22,0) 68%),
    radial-gradient(ellipse 120% 90% at 50% 45%,rgba(8,14,24,0) 35%,rgba(8,14,24,.62) 100%);
}

.bands{
  position:absolute;inset:0;
  display:grid;place-items:center start;
  padding-left:clamp(1.5rem,7vw,7.5rem);
  padding-right:var(--gut);
}

.band{
  grid-area:1/1;
  position:relative;
  isolation:isolate;
  width:min(48ch,44vw);
  opacity:0;
  text-shadow:var(--tshadow);
  pointer-events:none;
}
.band.live{pointer-events:auto}
.band .btn{text-shadow:none}

.band::before{
  content:"";position:absolute;inset:-16% -22% -18% -30%;
  pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 62% at 42% 50%,rgba(5,8,16,.68) 0%,rgba(5,8,16,.46) 46%,rgba(5,8,16,0) 76%);
}

.band-line{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.85rem,3.8vw,3.35rem);
  line-height:1.1;letter-spacing:-.018em;
  color:var(--text-primary);
}
.band-sub{
  margin-top:1.15rem;
  font-size:clamp(.95rem,1.05vw,1.08rem);
  color:#D6DCE6;
  max-width:42ch;
}

.band-kicker{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
  margin-bottom:1.15rem;
}

.band-cta{
  display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem;
}

/* Split text: word and character spans */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) drift-down: words fall into place, echoing the descent */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}

/* (c) blur-to-sharp: two stacked copies, echoing haze clearing */
.e-blur .band-line{position:relative;display:block}
.e-blur .band-line .soft{
  position:absolute;inset:0;filter:blur(11px);
  opacity:calc(1 - var(--k,0));
  pointer-events:none;
}
.e-blur .band-line .sharp{display:block;opacity:var(--k,0)}

/* invented for this footage: converge, words sliding inward as the blades do */
.e-converge .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)));
}

/* (e) word-by-word rise into a staged settle: three arrivals, one band */
.e-settle .band-kicker{
  --kk:clamp(0,var(--k,0)*4,1);
  opacity:var(--kk);
  transform:translateY(calc((1 - var(--kk)) * 10px));
}
.e-settle .band-line .w{
  --kc:clamp(0,(var(--k,0) - .06 - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 22px));
}
.e-settle .band-sub{
  --ks:clamp(0,(var(--k,0) - .62)*4,1);
  opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks)) * 14px));
}
.e-settle .band-cta{
  --kb:clamp(0,(var(--k,0) - .76)*5,1);
  opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb)) * 14px));
}

/* Loading ring, revealed only if the video is slow to arrive */
.ring{
  position:absolute;right:clamp(1.5rem,4vw,3rem);bottom:clamp(1.5rem,4vw,3rem);
  width:38px;height:38px;color:var(--accent);
  opacity:0;transition:opacity .6s var(--ease);
  transform:rotate(-90deg);
}
.ring.show{opacity:.75}
.stage.video-ready .ring{opacity:0}

.cue{
  position:absolute;left:clamp(1.5rem,7vw,7.5rem);bottom:clamp(1.6rem,4.4vh,3rem);
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-secondary);
  text-shadow:var(--tshadow);
  transition:opacity .7s var(--ease);
}
.cue-rail{
  display:block;width:1px;height:34px;
  background:linear-gradient(180deg,var(--accent),transparent);
  animation:cuepulse 3.4s var(--ease-soft) -.8s infinite;
  transform-origin:top;
}
@keyframes cuepulse{
  0%,100%{transform:scaleY(.4);opacity:.35}
  50%{transform:scaleY(1);opacity:1}
}

@media (max-height:560px){.cue{display:none}}

/* ==========================================================================
   The static hero (phones, portrait tablets, reduced motion)
   The five gates below must match site.js character for character.
   ========================================================================== */

.hero-static{display:none}

@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .hero-static{display:block}
}

.hero-static{
  position:relative;
  min-height:min(100vh,44rem);
  display:flex;align-items:flex-end;
  padding:8rem 0 clamp(3rem,9vh,5.5rem);
  overflow:hidden;
  isolation:isolate;
}
.hero-static-img{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:64% 50%;
}
.hero-static::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,17,30,.86) 0%,rgba(8,17,30,.34) 34%,rgba(8,17,30,.92) 100%),
    linear-gradient(90deg,rgba(6,12,22,.74) 0%,rgba(6,12,22,.16) 62%,rgba(6,12,22,0) 100%);
}
.hero-static .wrap{position:relative}
.hero-static h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2rem,7.4vw,3.4rem);
  line-height:1.11;letter-spacing:-.018em;
  max-width:19ch;
  text-shadow:var(--tshadow);
}
.hero-static .lede{
  margin-top:1.3rem;max-width:46ch;color:#D6DCE6;
  text-shadow:0 1px 10px rgba(5,8,16,.8);
}
.hero-static .band-cta{margin-top:2rem}

/* ==========================================================================
   Page hero for About and Contact
   ========================================================================== */

.page-hero{
  position:relative;
  padding:clamp(8rem,17vh,11rem) 0 clamp(3.5rem,8vh,5.5rem);
  overflow:hidden;isolation:isolate;
  border-bottom:1px solid rgba(201,165,94,.12);
}
.page-hero-img{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:70% 50%;
  opacity:.72;
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,17,30,.9) 0%,rgba(8,17,30,.5) 46%,rgba(8,17,30,.96) 100%),
    linear-gradient(90deg,rgba(6,12,22,.8) 0%,rgba(6,12,22,.2) 66%,rgba(6,12,22,0) 100%);
}
.page-hero h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.1rem,5.6vw,3.8rem);
  line-height:1.08;letter-spacing:-.02em;max-width:17ch;
}
.page-hero .lede{margin-top:1.3rem;max-width:52ch;color:var(--text-secondary)}

/* ==========================================================================
   Shared section furniture
   ========================================================================== */

.sec{padding-block:clamp(4.5rem,11vh,8.5rem);position:relative}
.sec-alt{background:linear-gradient(180deg,rgba(16,27,51,0),rgba(16,27,51,.5) 18%,rgba(16,27,51,.5) 82%,rgba(16,27,51,0))}

.kicker{
  display:block;
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
}

h2.h{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.7rem,3.2vw,2.85rem);
  line-height:1.14;letter-spacing:-.016em;
  max-width:22ch;
}
h3.h3{
  font-family:var(--body);font-weight:500;font-size:1.0625rem;
  letter-spacing:.005em;color:var(--text-primary);
}
.lede{color:var(--text-secondary)}
.muted{color:var(--text-tertiary)}

/* Self-drawing hairline */
.rule{
  display:block;width:100%;height:1px;
  background:var(--hair-strong);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.5s var(--ease);
}
.rule.in{transform:scaleX(1)}

/* ==========================================================================
   Entrances
   ========================================================================== */

.rise{opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rise.in{opacity:1;transform:none}

.stag>*{opacity:0;transform:translateY(20px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.stag.in>*{opacity:1;transform:none}
.stag.in>*:nth-child(1){transition-delay:0ms}
.stag.in>*:nth-child(2){transition-delay:90ms}
.stag.in>*:nth-child(3){transition-delay:180ms}
.stag.in>*:nth-child(4){transition-delay:270ms}
.stag.in>*:nth-child(5){transition-delay:360ms}
.stag.in>*:nth-child(6){transition-delay:450ms}

/* Retire the stagger once the entrance is done, at matching specificity,
   so later hovers never inherit the delay. */
.stag.done.in>*:nth-child(1),
.stag.done.in>*:nth-child(2),
.stag.done.in>*:nth-child(3),
.stag.done.in>*:nth-child(4),
.stag.done.in>*:nth-child(5),
.stag.done.in>*:nth-child(6){transition-delay:0s}

/* ==========================================================================
   The firm: two-column statement over a drawn watermark
   ========================================================================== */

.firm{position:relative;overflow:hidden;isolation:isolate}
.firm-grid{
  display:grid;gap:clamp(1.75rem,4vw,4rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:880px){
  .firm-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
}
.firm-body p+p{margin-top:1.15rem}
.firm-body{max-width:56ch}

.watermark{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:min(46vw,30rem);height:auto;color:var(--accent);
  opacity:.09;pointer-events:none;z-index:-1;
}
.watermark path{
  fill:none;stroke:currentColor;stroke-width:1.1;
  stroke-dasharray:76;stroke-dashoffset:76;
  transition:stroke-dashoffset 2.6s var(--ease);
}
.watermark.in path{stroke-dashoffset:0}
.watermark.in path:nth-child(2){transition-delay:.28s}
.watermark.in path:nth-child(3){transition-delay:.56s}
@media (max-width:880px){.watermark{opacity:.06;right:-24%}}

/* ==========================================================================
   Phase sections: 01 Acquire, 02 Scale, 03 Exit
   Each gets a different skeleton so no two neighbours repeat.
   ========================================================================== */

/* The whole mark is always present. The active petal draws itself in and
   fills, the other two stay as faint outlines, so each section shows
   where it sits in the three part arc. */
.phase-mark{width:50px;height:50px;color:var(--accent);flex:none;overflow:visible}
.phase-mark .ghost path{
  fill:none;stroke:currentColor;stroke-width:1.8;opacity:.26;
}
.phase-mark .live{
  fill:var(--accent);fill-opacity:0;
  stroke:currentColor;stroke-width:3;stroke-linejoin:round;
  stroke-dasharray:76;stroke-dashoffset:76;
  transition:stroke-dashoffset 1.5s var(--ease),fill-opacity 1.2s var(--ease) .55s;
}
.phase-head.in .phase-mark .live,
.in .phase-mark .live{stroke-dashoffset:0;fill-opacity:.24}

.phase-head{
  display:flex;align-items:flex-start;gap:1.25rem;margin-bottom:clamp(1.5rem,3vw,2.4rem);
}
.phase-num{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
  padding-top:.35rem;
}

/* Acquire: three bordered cards in a row */
.cards{
  display:grid;gap:1px;background:var(--hair);
  border-block:1px solid var(--hair);
  grid-template-columns:1fr;
  margin-top:clamp(2rem,4vw,3.25rem);
}
@media (min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--canvas);
  padding:clamp(1.5rem,2.6vw,2.15rem) clamp(1.25rem,2.2vw,1.9rem);
  transition:background-color .55s var(--ease);
}
.card:hover{background:var(--panel)}
.card h3{margin-bottom:.7rem}
.card p{color:var(--text-secondary);font-size:.97rem}

/* Scale: a left rail with a stacked list, not a grid */
.rail-grid{
  display:grid;gap:clamp(1.75rem,4vw,3.5rem);grid-template-columns:1fr;
}
@media (min-width:880px){
  .rail-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}
.stack{list-style:none;margin:0;padding:0}
.stack li{
  padding:clamp(1.35rem,2.4vw,1.85rem) 0;
  border-top:1px solid var(--hair);
  display:grid;gap:.55rem .25rem;
}
.stack li:last-child{border-bottom:1px solid var(--hair)}
.stack p{color:var(--text-secondary);font-size:.97rem;max-width:56ch}

/* Exit: a ledger of rows */
.ledger{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0}
.ledger li{
  display:grid;gap:.6rem 2rem;
  grid-template-columns:1fr;
  padding:clamp(1.4rem,2.6vw,2rem) 0;
  border-top:1px solid var(--hair);
  transition:padding-left .55s var(--ease),border-color .55s var(--ease);
}
@media (min-width:820px){
  .ledger li{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);align-items:baseline}
}
.ledger li:last-child{border-bottom:1px solid var(--hair)}
.ledger li:hover{padding-left:.9rem;border-top-color:var(--hair-strong)}
.ledger p{color:var(--text-secondary);font-size:.97rem;max-width:58ch}

/* ==========================================================================
   The interactive moment: press and hold to complete the mark
   ========================================================================== */

.mark-sec{
  background:linear-gradient(180deg,rgba(16,27,51,0),rgba(16,27,51,.62),rgba(16,27,51,0));
  text-align:center;
}
.mark-inner{display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.mark-sec h2.h{max-width:20ch;margin-inline:auto}

.holder{
  position:relative;
  width:min(300px,74vw);aspect-ratio:1;
  display:grid;place-items:center;
  margin-block:clamp(.25rem,1.5vw,1rem);
}
.holder-svg{position:absolute;inset:0;width:100%;height:100%;color:var(--accent)}

.holder-ghost path{
  fill:none;stroke:currentColor;stroke-width:1;opacity:.2;
}

.holder-arc{
  fill:none;stroke:var(--hair);stroke-width:1;
}
.holder-arc-fill{
  fill:none;stroke:var(--accent);stroke-width:1.8;
  stroke-linecap:round;
  stroke-dasharray:465;
  stroke-dashoffset:calc(465 - 465 * var(--hp,0));
}
.holder-petal path{
  fill:var(--accent);
  fill-opacity:calc(var(--pp,0) * .18);
  stroke:var(--accent);stroke-width:1.5;
  stroke-dasharray:76;
  stroke-dashoffset:calc(76 - 76 * var(--pp,0));
}
.holder-petal{--pp:0}

/* The three words sit in a row under the mark and light up in order as the
   petals draw in. A row reads more clearly than labels scattered around a
   circle, and it stays centred at every width. */
.holder-legend{
  display:flex;align-items:center;justify-content:center;
  gap:.85rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;
}
.holder-label{
  color:var(--accent);
  opacity:calc(.24 + .76 * var(--pp,0));
  white-space:nowrap;
}
.holder-sep{color:var(--accent);opacity:.24}

.hold-btn{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-secondary);background:transparent;
  border:1px solid rgba(169,180,198,.28);border-radius:2px;
  padding:.8rem 1.5rem;cursor:pointer;
  transition:color .4s var(--ease),border-color .4s var(--ease);
  -webkit-user-select:none;user-select:none;touch-action:none;
}
.hold-btn:hover{color:var(--text-primary);border-color:var(--text-secondary)}
.holder-done .hold-btn{opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
@media (pointer:coarse){.hold-btn{min-height:44px}}

/* The button and the payoff share one cell, so the line arrives exactly
   where the instruction was and nothing shifts. */
.mark-swap{
  display:grid;place-items:center;
  width:100%;min-height:5.4rem;
}
.mark-swap>*{grid-area:1/1}

.mark-payoff{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.4;
  max-width:32ch;margin-inline:auto;
  opacity:0;transform:translateY(12px);
  pointer-events:none;
  transition:opacity .9s var(--ease) .2s,transform .9s var(--ease) .2s;
}
.holder-done .mark-payoff{opacity:1;transform:none}

/* ==========================================================================
   Mandate: a dense definition list
   ========================================================================== */

.dl{
  display:grid;gap:0;margin:clamp(2rem,4vw,3rem) 0 0;
  border-top:1px solid var(--hair);
}
.dl-row{
  display:grid;gap:.35rem 2rem;grid-template-columns:1fr;
  padding:clamp(1.05rem,2vw,1.45rem) 0;
  border-bottom:1px solid var(--hair);
}
@media (min-width:760px){
  .dl-row{grid-template-columns:minmax(0,.34fr) minmax(0,1fr);align-items:baseline}
}
.dl-row dt{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
}
.dl-row dd{margin:0;color:var(--text-primary);max-width:60ch}

/* ==========================================================================
   Process: a stepper with a drawn connecting line
   ========================================================================== */

.steps{
  display:grid;gap:clamp(1.75rem,3vw,2.5rem);
  grid-template-columns:1fr;
  margin-top:clamp(2.25rem,4vw,3.25rem);
  position:relative;
}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;padding-top:1.75rem}
.step::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--hair);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease);
}
.steps.in .step::before{transform:scaleX(1)}
.steps.in .step:nth-child(2)::before{transition-delay:.16s}
.steps.in .step:nth-child(3)::before{transition-delay:.32s}
.steps.in .step:nth-child(4)::before{transition-delay:.48s}
.step-n{
  display:block;font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.26em;color:var(--accent);margin-bottom:.85rem;
}
.step h3{margin-bottom:.6rem}
.step p{color:var(--text-secondary);font-size:.95rem}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.1rem,2vw,1.45rem) 0;
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.35;
  color:var(--text-primary);
  transition:color .4s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq-sign{
  position:relative;width:12px;height:12px;flex:none;
  align-self:center;color:var(--accent);
}
.faq-sign::before,.faq-sign::after{
  content:"";position:absolute;background:currentColor;
  transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.faq-sign::before{left:0;right:0;top:50%;height:1px;transform:translateY(-50%)}
.faq-sign::after{top:0;bottom:0;left:50%;width:1px;transform:translateX(-50%) scaleY(1)}
.faq details[open] .faq-sign::after{transform:translateX(-50%) scaleY(0)}
.faq-a{
  padding-bottom:clamp(1.2rem,2.2vw,1.7rem);
  color:var(--text-secondary);max-width:66ch;font-size:.99rem;
}

/* ==========================================================================
   The call to action and the form
   ========================================================================== */

.cta-panel{
  background:var(--panel);
  border:1px solid rgba(201,165,94,.16);
  border-radius:3px;
  padding:clamp(1.75rem,4vw,3.4rem);
  display:grid;gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .cta-panel{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
}
.cta-panel h2.h{max-width:16ch}
.cta-copy .lede{margin-top:1.1rem;max-width:44ch}

.form{display:grid;gap:1.05rem}
.field{display:grid;gap:.45rem}
.field label{
  font-family:var(--mono);font-size:.63rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-tertiary);
}
.field input,.field textarea{
  font-family:var(--body);font-size:.97rem;color:var(--text-primary);
  background:rgba(8,17,30,.6);
  border:1px solid rgba(169,180,198,.26);
  border-radius:2px;
  padding:.7rem .85rem;
  transition:border-color .35s var(--ease),background-color .35s var(--ease);
  width:100%;
}
.field textarea{resize:vertical;min-height:6.5rem;line-height:1.55}
.field input:hover,.field textarea:hover{border-color:rgba(169,180,198,.42)}
.field input:focus,.field textarea:focus{
  border-color:var(--accent);background:rgba(8,17,30,.85);outline:none;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(124,135,155,.7)}

.form-row{display:grid;gap:1.05rem;grid-template-columns:1fr}
@media (min-width:560px){.form-row{grid-template-columns:1fr 1fr}}

/* The honeypot. Moved off screen rather than display:none, because robots
   that read the stylesheet skip anything hidden outright. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.form-error{
  margin:0;padding:.7rem .85rem;
  border:1px solid rgba(214,120,96,.5);border-radius:2px;
  background:rgba(214,120,96,.08);
  color:#F0C9BC;font-size:.9rem;
}

.form button[type="submit"][disabled]{opacity:.55;cursor:default;transform:none}
.form.sending button[type="submit"]{pointer-events:none}

.form-note{font-size:.83rem;color:var(--text-tertiary);max-width:52ch}
.form-note a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-muted)}
.form-note a:hover{border-bottom-color:var(--accent)}

.form-done{
  display:none;
  border:1px solid var(--hair-strong);border-radius:2px;
  padding:clamp(1.25rem,2.5vw,1.75rem);
  background:rgba(201,165,94,.06);
}
.form-done p+p{margin-top:.7rem}
.form-sent .form{display:none}
.form-sent .form-done{display:block}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-grid{
  display:grid;gap:clamp(2rem,4.5vw,4rem);grid-template-columns:1fr;
}
@media (min-width:900px){
  .contact-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.75fr)}
}
.detail-block+.detail-block{margin-top:clamp(1.75rem,3vw,2.5rem)}
.detail-block h3{margin-bottom:.75rem}
.detail-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.detail-list a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--accent-muted);transition:border-color .35s var(--ease)}
.detail-list a:hover{border-bottom-color:var(--accent)}
.detail-list li{color:var(--text-secondary)}
.next-list{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;counter-reset:n}
.next-list li{
  display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:baseline;
  color:var(--text-secondary);font-size:.97rem;
}
.next-list li::before{
  counter-increment:n;content:counter(n,decimal-leading-zero);
  font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;color:var(--accent);
}

/* ==========================================================================
   About page pieces
   ========================================================================== */

.principles{
  display:grid;gap:1px;background:var(--hair);
  border-block:1px solid var(--hair);
  grid-template-columns:1fr;margin-top:clamp(2rem,4vw,3rem);
}
@media (min-width:720px){.principles{grid-template-columns:1fr 1fr}}
.principle{
  background:var(--canvas);padding:clamp(1.5rem,2.6vw,2.15rem);
  transition:background-color .55s var(--ease);
}
.principle:hover{background:var(--panel)}
.principle h3{margin-bottom:.7rem}
.principle p{color:var(--text-secondary);font-size:.97rem}

.triptych{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:1fr;
  margin-top:clamp(2rem,4vw,3rem);
}
@media (min-width:760px){.triptych{grid-template-columns:repeat(3,1fr)}}
/* align-content:start keeps the rows at their natural height. Without it the
   shortest column's rows stretch and its heading drops out of line. */
.trip{display:grid;gap:.9rem;justify-items:start;align-content:start}
.trip .phase-mark{width:42px;height:42px}
.trip h3{font-family:var(--display);font-weight:400;font-size:1.3rem;letter-spacing:.01em}
.trip p{color:var(--text-secondary);font-size:.96rem}

.nots{list-style:none;margin:clamp(1.75rem,3vw,2.5rem) 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--hair)}
.nots li{
  padding:clamp(1rem,1.9vw,1.35rem) 0 clamp(1rem,1.9vw,1.35rem) 2rem;
  border-bottom:1px solid var(--hair);
  color:var(--text-primary);position:relative;max-width:72ch;
}
.nots li::before{
  content:"";position:absolute;left:0;top:calc(clamp(1rem,1.9vw,1.35rem) + .62em);
  width:11px;height:1px;background:var(--accent);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot{
  border-top:1px solid rgba(201,165,94,.16);
  padding-block:clamp(3rem,6vh,4.5rem) clamp(1.75rem,3vh,2.5rem);
  background:linear-gradient(180deg,rgba(16,27,51,0),rgba(16,27,51,.55));
}
.foot-grid{
  display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr;
}
@media (min-width:760px){
  .foot-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.6fr) minmax(0,.9fr)}
}
.foot h4{
  font-family:var(--mono);font-size:.63rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-tertiary);
  margin-bottom:1rem;
}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot-links a{color:var(--text-secondary);text-decoration:none;font-size:.92rem;transition:color .35s var(--ease)}
.foot-links a:hover{color:var(--text-primary)}
.foot-brand .brand{margin-bottom:1rem}
.foot-brand p{color:var(--text-tertiary);font-size:.88rem;max-width:34ch}
.foot-base{
  margin-top:clamp(2.5rem,5vh,3.75rem);
  padding-top:1.5rem;border-top:1px solid rgba(201,165,94,.12);
  display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;justify-content:space-between;
  font-size:.8rem;color:var(--text-tertiary);
}

/* ==========================================================================
   Reduced motion, honoured completely
   ========================================================================== */

@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;
  }
  .rise,.stag>*{opacity:1;transform:none}
  .rule{transform:scaleX(1)}
  .watermark path,.phase-mark .live{stroke-dashoffset:0}
  .phase-mark .live{fill-opacity:.24}
  .step::before{transform:scaleX(1)}
  .holder-petal,.holder-label{--pp:1}
  .holder-arc-fill{stroke-dashoffset:0}
  .mark-payoff{opacity:1;transform:none}
  .env-glow,.env-motes{animation:none}
  .cue-rail{animation:none;transform:scaleY(1);opacity:.8}
}

/* Pinned states applied by JS when reduced motion flips on mid-session */
.pinned .rule{transform:scaleX(1)}
.pinned .watermark path,.pinned .phase-mark .live{stroke-dashoffset:0}
.pinned .phase-mark .live{fill-opacity:.24}
.pinned .step::before{transform:scaleX(1)}
.pinned .rise,.pinned .stag>*{opacity:1;transform:none}

/* Pause every animation when the tab is hidden or a section is off-screen */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}