/* =========================================================================
   Avery Woodbury Studio
   Visual system: a celestial instrument console.
   Ground  #04030b   near black with a violet bias
   Gold    #e6c079   primary accent, the brass of the instrument
   Peri    #9aa2ff   secondary accent, the cold light of the sky
   Type    Cormorant Garamond (display) / Inter (body) / Chakra Petch (labels)
   ========================================================================= */
:root{
  --void:#04030b; --deep:#0a0718; --panel-a:rgba(150,140,255,.055); --panel-b:rgba(150,140,255,.015);
  --gold:#e6c079; --gold-hi:#ffe9bd; --gold-dim:#8a6f37;
  --peri:#9aa2ff; --peri-hi:#cfd2ff;
  --text:#efeafc; --muted:#a79fc4; --dim:#7a719a;
  --line:rgba(230,192,121,.20); --line-soft:rgba(190,180,255,.11);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Chakra Petch","Inter",ui-monospace,"Segoe UI",sans-serif;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--void); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.66;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
/* a registered angle so the form's border light can actually rotate */
@property --ang{syntax:'<angle>'; initial-value:0deg; inherits:false}
html{scrollbar-color:var(--gold-dim) var(--void)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:var(--gold-dim); border:3px solid var(--void); border-radius:6px}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:600; line-height:1.06; text-wrap:balance}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:rgba(230,192,121,.28); color:#fff}

/* ---------------------------------------------------------------- sky ---- */
#sky{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block}
.sky-fallback{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("assets/nebula.jpg");
  background-size:cover; background-position:66% 34%;
  opacity:.72; filter:saturate(.95) brightness(.9);
}
.sky-scrim{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(130% 90% at 50% -5%, transparent 34%, rgba(4,3,11,.34) 74%, rgba(4,3,11,.7) 100%),
    linear-gradient(180deg, rgba(4,3,11,.10) 0%, rgba(4,3,11,.40) 52%, rgba(4,3,11,.7) 100%);
}
/* keeps the headline the brightest thing on the page no matter what drifts behind it */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, rgba(4,3,11,.82) 0%, rgba(4,3,11,.55) 34%, transparent 62%);
}
.sky-grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.30; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:3px 3px;
}
main,header,footer,.meridian{position:relative; z-index:1}

/* ------------------------------------------------------------ utilities -- */
.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.label{
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:.6rem;
}
.label::before{content:"\2726"; color:var(--gold-dim); font-size:.8em; letter-spacing:0}
.lede{color:var(--muted); font-size:1.06rem}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--gold); color:#1a1206;
  padding:.7rem 1.1rem; border-radius:0 0 10px 0; font-weight:600; z-index:99;
}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}

/* corner brackets, the HUD motif that marks every panel */
.brk{position:relative}
.brk::before,.brk::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border:1px solid var(--line); opacity:.85;
}
.brk::before{top:-1px; left:-1px; border-right:0; border-bottom:0}
.brk::after{bottom:-1px; right:-1px; border-left:0; border-top:0}

/* ticked hairline used under section headings */
.tickrule{
  height:11px; margin-top:1.6rem; position:relative; overflow:hidden;
  background:linear-gradient(90deg, var(--line) 0%, rgba(230,192,121,.06) 55%, transparent 100%);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 0;
}
.tickrule::after{
  content:""; position:absolute; inset:0 0 auto 0; height:11px;
  background-image:linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:28px 11px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%, transparent 62%);
  mask-image:linear-gradient(90deg,#000 0%, transparent 62%);
  opacity:.55;
}

/* -------------------------------------------------------------- reveal --- */
.js .rv{opacity:0; transform:translateY(26px)}
.rv.in{opacity:1; transform:none; transition:opacity .8s ease, transform .8s cubic-bezier(.16,.8,.3,1)}
@media (prefers-reduced-motion:reduce){ .js .rv{opacity:1; transform:none} }

/* ------------------------------------------------------------ meridian --- */
.meridian{
  position:fixed; left:22px; top:0; bottom:0; width:1px; z-index:30; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--line-soft) 12%, var(--line-soft) 88%, transparent);
}
.meridian i{
  position:absolute; left:50%; width:7px; height:7px; margin-left:-3.5px; margin-top:-3.5px;
  border-radius:50%; background:var(--gold);
  box-shadow:0 0 12px 2px rgba(230,192,121,.75); top:0;
}
.meridian b{
  position:absolute; left:12px; top:0; margin-top:-.55em; white-space:nowrap;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; color:var(--dim); font-weight:500;
}
@media (max-width:1360px){ .meridian{display:none} }

/* ----------------------------------------------------------------- nav --- */
.nav{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  background:linear-gradient(180deg, rgba(4,3,11,.72), rgba(4,3,11,.34));
  border-bottom:1px solid transparent; transition:background .35s ease, border-color .35s ease;
}
.nav.stuck{background:rgba(4,3,11,.93); border-bottom-color:var(--line-soft)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:1.4rem; padding:.9rem 0}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; white-space:nowrap}
.brand .mark{width:26px; height:26px; flex:none; color:var(--gold)}
.brand .mark circle,.brand .mark ellipse,.brand .mark line{
  fill:none; stroke:currentColor; stroke-width:1.1; vector-effect:non-scaling-stroke;
}
.brand .mark .core{fill:currentColor; stroke:none}
.brand .mark .spin{transform-origin:16px 16px; animation:markspin 26s linear infinite}
@keyframes markspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .brand .mark .spin{animation:none} }
.brand b{font-family:var(--serif); font-size:1.28rem; font-weight:700; letter-spacing:.01em}
.brand span{font-family:var(--mono); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--dim)}
.nav-links{display:flex; gap:1.85rem; align-items:center}
.nav-links a{
  text-decoration:none; font-family:var(--mono); font-size:.74rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  position:relative; padding:.25rem 0; transition:color .22s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-1px; height:1px;
  background:linear-gradient(90deg,var(--gold),transparent); transition:right .3s ease;
}
.nav-links a:hover{color:var(--gold-hi)}
.nav-links a:hover::after{right:0}
.nav-cta{
  text-decoration:none; font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.62rem 1.15rem; color:var(--gold-hi); position:relative;
  border:1px solid var(--line); background:rgba(230,192,121,.07);
  clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition:background .25s ease, color .25s ease;
}
.nav-cta:hover{background:rgba(230,192,121,.18); color:#fff}
@media (max-width:960px){ .nav-links{display:none} }
@media (max-width:560px){
  .nav-in{gap:.7rem}
  .brand b{font-size:1.05rem} .brand span{display:none} .brand .mark{width:22px;height:22px}
  .nav-cta{padding:.55rem .85rem; font-size:.66rem}
}

/* -------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex; align-items:center; gap:.65rem; text-decoration:none;
  font-family:var(--mono); font-size:.8rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  padding:1rem 1.7rem; position:relative; border:1px solid transparent;
  clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition:transform .28s cubic-bezier(.16,.8,.3,1), box-shadow .28s ease, background .28s ease;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-hi),var(--gold) 60%,#c9a35c);
  color:#241a06; box-shadow:0 12px 40px -16px rgba(230,192,121,.85);
}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 20px 52px -16px rgba(230,192,121,.95)}
.btn-ghost{border-color:var(--line); color:var(--text); background:rgba(150,140,255,.06)}
.btn-ghost:hover{background:rgba(150,140,255,.13); border-color:rgba(230,192,121,.45); transform:translateY(-2px)}
.btn .arw{transition:transform .28s ease}
.btn:hover .arw{transform:translateX(5px)}

/* ---------------------------------------------------------------- hero --- */
.hero{padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(2.5rem,5vw,4rem); position:relative; isolation:isolate}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
@media (max-width:940px){ .hero-grid{grid-template-columns:1fr; gap:2.5rem} }
.hero h1{font-size:clamp(2.5rem,6vw,4.6rem); margin:1.5rem 0 0; letter-spacing:-.014em}
.hero h1 em{
  font-style:normal; position:relative;
  background:linear-gradient(96deg,var(--gold-hi) 0%,var(--gold) 34%,var(--peri-hi) 68%,var(--gold-hi) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 7s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{background-position:0% 0} 50%{background-position:100% 0}}

/* opening sequence: each word of the headline rises out of its own mask,
   then the deck and the Tree follow. Plays once, from the .go class the
   script sets on the first painted frame. */
.hero h1 .w{display:inline-block; overflow:hidden; vertical-align:bottom}
.hero h1 .wi{display:inline-block; transition:transform .9s cubic-bezier(.16,.84,.26,1)}
.js body:not(.go) .hero h1 .wi{transform:translateY(118%)}
.hero h1 .w:nth-of-type(1) .wi{transition-delay:.05s}
.hero h1 .w:nth-of-type(2) .wi{transition-delay:.12s}
.hero h1 .w:nth-of-type(3) .wi{transition-delay:.19s}
.hero h1 .w:nth-of-type(4) .wi{transition-delay:.26s}
.hero h1 .w:nth-of-type(5) .wi{transition-delay:.33s}
.hero h1 .w:nth-of-type(6) .wi{transition-delay:.40s}
.hero h1 .w:nth-of-type(7) .wi{transition-delay:.50s}
.hero .label,.hero .lede,.hero .hero-cta,.hero .hero-note{transition:opacity .8s ease .55s, transform .8s cubic-bezier(.16,.84,.26,1) .55s}
.js body:not(.go) .hero .label,
.js body:not(.go) .hero .lede,
.js body:not(.go) .hero .hero-cta,
.js body:not(.go) .hero .hero-note{opacity:0; transform:translateY(18px)}
.tree{transition:opacity 1.1s ease .35s, transform 1.1s cubic-bezier(.16,.84,.26,1) .35s}
.js body:not(.go) .tree{opacity:0; transform:scale(.93)}
@media (prefers-reduced-motion:reduce){
  .hero h1 em{animation:none}
  .js body:not(.go) .hero h1 .wi{transform:none}
  .js body:not(.go) .hero .label,
  .js body:not(.go) .hero .lede,
  .js body:not(.go) .hero .hero-cta,
  .js body:not(.go) .hero .hero-note{opacity:1; transform:none}
  .js body:not(.go) .tree{opacity:1; transform:none}
}
.hero .lede{margin-top:1.6rem; max-width:56ch; font-size:1.1rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem}
.hero-note{
  margin-top:1.4rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim);
}

/* the Tree: the same ten Sephirot and twenty two paths as the study app.
   It turns on its own and is inert to the pointer, so it never competes
   with scrolling. Nothing to click, nothing labelled, size never changes. */
.tree{position:relative; display:grid; place-items:center; aspect-ratio:1/1; max-width:560px; margin-inline:auto; width:100%}
.tree canvas{
  position:relative; width:100%; height:100%; display:block;
  pointer-events:none;
}

/* ----------------------------------------------------------------- belt -- */
.belt{
  overflow:hidden; border-block:1px solid var(--line-soft);
  background:rgba(8,6,20,.55); padding:1rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.belt-in{display:flex; width:max-content; animation:belt 38s linear infinite}
.belt:hover .belt-in{animation-play-state:paused}
.belt-track{display:flex; gap:2.8rem; padding-right:2.8rem; align-items:center}
.belt-track li{
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--dim); white-space:nowrap;
}
.belt-track li::before{content:"\2726"; color:var(--gold-dim); margin-right:1.1rem; font-size:.8em}
@keyframes belt{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .belt-in{animation:none} }

/* ------------------------------------------------------------- sections -- */
section{padding:clamp(4rem,7.5vw,6.5rem) 0; scroll-margin-top:5rem}
.sec-head{max-width:70ch}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.25rem); margin:1.1rem 0 0; letter-spacing:-.012em}
.sec-head p{margin-top:1.2rem}
.divider{height:1px; border:0; margin:0; background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* ---------------------------------------------------------------- work --- */
.case{
  display:grid; grid-template-columns:1fr 1.04fr; gap:clamp(2rem,4.6vw,3.6rem);
  align-items:center; padding:clamp(2.6rem,5vw,3.8rem) 0; border-top:1px solid var(--line-soft);
}
.case:first-of-type{border-top:0}
.case.flip .case-media{order:-1}
@media (max-width:940px){
  .case{grid-template-columns:1fr; gap:2rem}
  .case.flip .case-media{order:0}
}
.case-num{
  font-family:var(--mono); font-size:2.3rem; font-weight:600; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(230,192,121,.42);
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
.case-role{
  display:block; margin-top:.9rem; font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--peri);
}
.case h3{font-size:clamp(1.75rem,3.2vw,2.4rem); margin:.5rem 0 0}
.case p.body{margin-top:1.15rem; color:var(--muted)}
.case ul.proof{margin-top:1.6rem; display:grid; gap:.9rem}
.case ul.proof li{position:relative; padding-left:1.7rem; font-size:.95rem}
.case ul.proof li::before{
  content:""; position:absolute; left:.1rem; top:.6em; width:8px; height:8px; rotate:45deg;
  border:1px solid var(--gold); background:rgba(230,192,121,.25);
}
.chips{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.7rem}
.chip{
  font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); padding:.4rem .7rem;
  border:1px solid var(--line-soft); background:rgba(150,140,255,.045);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.case-link{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:1.8rem; text-decoration:none;
  font-family:var(--mono); font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-hi); border-bottom:1px solid rgba(230,192,121,.4); padding-bottom:.3rem;
  transition:gap .25s ease, border-color .25s ease;
}
.case-link:hover{gap:.95rem; border-color:var(--gold)}

/* screen frame, tilted like an instrument readout */
.screen{
  --bry:6deg; --rx:0deg; --ry:0deg;
  position:relative; border:1px solid var(--line-soft); background:var(--deep); overflow:hidden;
  box-shadow:0 48px 90px -46px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.02) inset;
  transform:perspective(1500px) rotateY(calc(var(--bry) + var(--ry))) rotateX(calc(1.4deg + var(--rx)));
  transition:transform .6s cubic-bezier(.16,.8,.3,1), box-shadow .6s ease, border-color .6s ease;
}
.case.flip .screen{--bry:-6deg}
/* while the pointer is over it, the tilt tracks the cursor tightly */
.screen.tilting{--bry:0deg; transition:transform .14s ease-out, box-shadow .6s ease, border-color .6s ease}
.screen:hover{
  border-color:rgba(230,192,121,.35);
  box-shadow:0 56px 110px -46px rgba(0,0,0,1), 0 0 46px -14px rgba(154,162,255,.35);
}
/* the sheet of light that sweeps the glass as the pointer crosses it */
.screen .glare{
  position:absolute; inset:0; pointer-events:none; z-index:2; opacity:0;
  background:radial-gradient(420px 300px at var(--gx,50%) var(--gy,50%), rgba(240,220,170,.16), transparent 62%);
  transition:opacity .4s ease;
}
.screen.tilting .glare{opacity:1}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .case-media{animation:casefloat linear both; animation-timeline:view(); animation-range:entry 0% exit 100%}
    @keyframes casefloat{from{transform:translateY(30px)} to{transform:translateY(-30px)}}
  }
}
.screen-bar{
  display:flex; align-items:center; gap:.4rem; padding:.55rem .75rem;
  background:rgba(150,140,255,.07); border-bottom:1px solid var(--line-soft);
}
.dot{width:8px; height:8px; border-radius:50%; background:rgba(230,192,121,.32)}
.screen-url{
  margin-left:.55rem; flex:1; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  color:var(--dim); background:rgba(0,0,0,.4); padding:.22rem .6rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.screen img{width:100%; height:auto}
.screen::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
}
@media (max-width:940px){ .screen,.case.flip .screen{transform:none} }

/* ------------------------------------------------------------ services --- */
.svc-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:1.1rem; margin-top:clamp(2.4rem,5vw,3.4rem)}
.svc{grid-column:span 2}
.svc:nth-child(4),.svc:nth-child(5){grid-column:span 3}
@media (max-width:1000px){ .svc-grid{grid-template-columns:repeat(2,1fr)} .svc,.svc:nth-child(4),.svc:nth-child(5){grid-column:span 1} }
@media (max-width:720px){ .svc-grid{grid-template-columns:1fr} }
.svc{
  position:relative; padding:1.9rem 1.7rem 2.1rem;
  border:1px solid var(--line-soft);
  background:linear-gradient(165deg,var(--panel-a),var(--panel-b)), rgba(7,5,18,.72);
  transition:border-color .35s ease, transform .35s cubic-bezier(.16,.8,.3,1), background .35s ease;
}
.svc::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(340px 180px at 78% 0%, rgba(230,192,121,.13), transparent 70%);
}
.svc:hover{transform:translateY(-5px); border-color:rgba(230,192,121,.32)}
.svc:hover::after{opacity:1}
.svc-icon{width:32px; height:32px; color:var(--gold)}
.svc .tag{
  margin-top:1.1rem; font-family:var(--mono); font-size:.65rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--peri);
}
.svc h3{font-size:1.6rem; margin:.4rem 0 .45rem}
.svc>p{color:var(--muted); font-size:.94rem}
.svc ul{margin-top:1.4rem; display:grid; gap:.62rem; border-top:1px solid var(--line-soft); padding-top:1.4rem}
.svc ul li{font-size:.9rem; position:relative; padding-left:1.25rem; color:var(--text)}
.svc ul li::before{
  content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; rotate:45deg;
  background:var(--gold-dim);
}

/* ------------------------------------------------------------- also band -- */
.cap-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:2.6rem; background:var(--line-soft); border:1px solid var(--line-soft)}
@media (max-width:900px){ .cap-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:540px){ .cap-grid{grid-template-columns:1fr} }
.cap{background:rgba(8,6,20,.82); padding:1.6rem 1.4rem}
.cap h4{font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold)}
.cap p{margin-top:.8rem; font-size:.89rem; color:var(--muted); line-height:1.75}

/* -------------------------------------------------------------- process -- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; margin-top:clamp(2.4rem,5vw,3.4rem)}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }
.step{position:relative; padding-top:2rem}
.step::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,var(--gold-dim),transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s cubic-bezier(.16,.8,.3,1);
}
.step::after{
  content:""; position:absolute; top:-3px; left:0; width:7px; height:7px; rotate:45deg;
  background:var(--gold); opacity:0; scale:.3;
  transition:opacity .5s ease, scale .5s cubic-bezier(.2,.9,.3,1.4);
}
/* the rail draws itself across as each step arrives, left to right */
.step.in::before{transform:scaleX(1)}
.step.in::after{opacity:1; scale:1}
.step:nth-child(2).in::before{transition-delay:.15s} .step:nth-child(2).in::after{transition-delay:.15s}
.step:nth-child(3).in::before{transition-delay:.30s} .step:nth-child(3).in::after{transition-delay:.30s}
.step:nth-child(4).in::before{transition-delay:.45s} .step:nth-child(4).in::after{transition-delay:.45s}
.no-js .step::before{transform:scaleX(1)}
.no-js .step::after{opacity:1; scale:1}
@media (prefers-reduced-motion:reduce){
  .step::before{transform:scaleX(1); transition:none}
  .step::after{opacity:1; scale:1; transition:none}
}
.step b{
  display:block; font-family:var(--mono); font-size:.78rem; font-weight:600;
  letter-spacing:.28em; color:var(--gold-dim); font-variant-numeric:tabular-nums;
}
.step h4{font-family:var(--serif); font-size:1.45rem; font-weight:600; margin:.55rem 0 .6rem}
.step p{font-size:.89rem; color:var(--muted)}

/* ---------------------------------------------------------------- about -- */
.about{display:grid; grid-template-columns:1fr .82fr; gap:clamp(2rem,5vw,4rem); align-items:start}
@media (max-width:940px){ .about{grid-template-columns:1fr} }
.about h2{font-size:clamp(2rem,4.4vw,3.1rem); margin:1.1rem 0 1.5rem}
.about p+p{margin-top:1.15rem}
.about-panel{
  padding:1.9rem; border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(230,192,121,.085),rgba(230,192,121,.015)), rgba(7,5,18,.7);
}
.about-panel h4{font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold)}
.props{margin-top:1.4rem; display:grid; gap:1.05rem}
.prop{display:flex; justify-content:space-between; gap:1rem; align-items:baseline; border-bottom:1px dashed var(--line-soft); padding-bottom:1.05rem}
.prop:last-child{border-bottom:0; padding-bottom:0}
.prop span{font-size:.87rem; color:var(--muted)}
.prop b{font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-hi); white-space:nowrap}

/* ------------------------------------------------------------------ faq -- */
.faq{margin-top:2.6rem; border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  cursor:pointer; list-style:none; padding:1.4rem 2.8rem 1.4rem 0; position:relative;
  font-family:var(--serif); font-size:1.3rem; transition:color .22s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-hi)}
.faq summary::after{
  content:""; position:absolute; right:.5rem; top:50%; width:11px; height:11px;
  margin-top:-5.5px; border-right:1px solid var(--gold); border-bottom:1px solid var(--gold);
  transform:rotate(45deg); transition:transform .28s ease;
}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq .ans{padding:0 2.8rem 1.6rem 0; color:var(--muted); font-size:.95rem; max-width:78ch}
/* answers glide open where the browser can animate to auto height;
   everywhere else they simply appear, which is the old behaviour */
@supports (interpolate-size: allow-keywords){
  @media (prefers-reduced-motion:no-preference){
    .faq details::details-content{
      opacity:0; block-size:0; overflow:hidden;
      transition:block-size .45s cubic-bezier(.2,.8,.3,1), opacity .4s ease,
                 content-visibility .45s allow-discrete;
    }
    .faq details[open]::details-content{opacity:1; block-size:auto}
    .faq{interpolate-size:allow-keywords}
  }
}

/* -------------------------------------------------------------- contact -- */
.contact-band{
  position:relative; overflow:hidden;
  padding:clamp(2.6rem,5.5vw,4.2rem) clamp(1.4rem,4vw,3.4rem);
  border:1px solid var(--line);
  background:
    radial-gradient(620px 340px at 16% 6%, rgba(230,192,121,.24), transparent 68%),
    radial-gradient(560px 320px at 88% 98%, rgba(154,162,255,.24), transparent 68%),
    linear-gradient(165deg, rgba(150,140,255,.075), rgba(150,140,255,.018));
}
.contact-band::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg,var(--line-soft) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 50%, #000, transparent 82%);
  mask-image:radial-gradient(75% 70% at 50% 50%, #000, transparent 82%);
}
.contact-band>*{position:relative}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4.5vw,3.6rem); align-items:start}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }
.contact-pitch h2{font-size:clamp(2rem,4.2vw,3rem); margin-top:1.1rem}
.contact-pitch .lede{margin-top:1.2rem; max-width:48ch}
.next{margin-top:1.9rem; display:grid; gap:1rem}
.next li{display:flex; gap:1rem; align-items:baseline; font-size:.94rem; color:var(--text)}
.next li b{
  font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.2em;
  color:var(--gold-dim); font-variant-numeric:tabular-nums; flex:none;
}
.micro{
  margin-top:1.7rem; font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}

/* the form card: a rotating thread of light runs round its border */
.form-card{
  position:relative; padding:1.9rem;
  background:rgba(6,4,16,.82);
  border:1px solid var(--line-soft);
}
.form-card::before{
  content:""; position:absolute; inset:-1px; pointer-events:none; padding:1px;
  background:conic-gradient(from var(--ang),
    transparent 0turn, transparent .32turn,
    rgba(230,192,121,.9) .40turn, rgba(255,233,189,1) .43turn, rgba(230,192,121,.9) .46turn,
    transparent .54turn, transparent .78turn,
    rgba(154,162,255,.5) .85turn, transparent .92turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:orbitline 7s linear infinite;
}
@keyframes orbitline{to{--ang:360deg}}
@media (prefers-reduced-motion:reduce){ .form-card::before{animation:none} }
.hp{position:absolute; left:-9999px; top:auto}
.fields{display:grid; gap:1.1rem}
.field{display:grid; gap:.45rem}
.field span{
  font-family:var(--mono); font-size:.66rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
.field input,.field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--text);
  background:rgba(150,140,255,.05); border:1px solid var(--line-soft);
  padding:.85rem 1rem; width:100%; resize:vertical; min-height:0;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.field input:focus,.field textarea:focus{
  outline:none; border-color:rgba(230,192,121,.55);
  background:rgba(150,140,255,.08);
  box-shadow:0 0 0 3px rgba(230,192,121,.14);
}
.field input:user-invalid,.field textarea:user-invalid{border-color:rgba(224,84,84,.6)}
.form-send{justify-self:start; border:0; cursor:pointer; margin-top:.3rem}
.form-send[disabled]{opacity:.6; cursor:wait; transform:none}
.alt{font-size:.85rem; color:var(--dim)}
.alt a{color:var(--muted); text-decoration-color:rgba(230,192,121,.4)}
.alt a:hover{color:var(--gold-hi)}
.ferr{font-size:.88rem; color:#e8a1a1}
.ferr a{color:var(--gold-hi)}

/* the wax-seal moment when a message lands */
.sent{display:grid; justify-items:center; text-align:center; padding:2.2rem 0 1.4rem; gap:.4rem}
.sent[hidden],.fields[hidden]{display:none}
.sent h3{font-size:1.9rem}
.sent p{color:var(--muted)}
.seal{width:74px; height:74px; margin-bottom:.6rem}
.seal circle,.seal path{
  fill:none; stroke:var(--gold); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
}
.seal circle{stroke-dasharray:170; stroke-dashoffset:170}
.seal path{stroke:var(--gold-hi); stroke-dasharray:36; stroke-dashoffset:36}
.form-card.done .seal circle{animation:draw .7s ease-out forwards}
.form-card.done .seal path{animation:draw .45s ease-out .55s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .seal circle,.seal path{stroke-dashoffset:0; animation:none}
}

/* --------------------------------------------------------------- footer -- */
footer{border-top:1px solid var(--line-soft); padding:2.6rem 0 3rem}
.foot{display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:space-between; align-items:center}
.foot-links{display:flex; flex-wrap:wrap; gap:1.4rem}
.foot-links a{
  font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .22s ease;
}
.foot-links a:hover{color:var(--gold-hi)}
.foot small{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; color:var(--dim)}
.foot-tag{display:block; margin-top:.6rem}

/* ---------------------------------------------------------------- proof --- */
.proof-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:clamp(2.4rem,5vw,3.4rem)}
@media (max-width:900px){ .proof-grid{grid-template-columns:1fr} }
.proof-card{
  display:block; text-decoration:none; padding:1.8rem 1.6rem;
  border:1px solid var(--line-soft);
  background:linear-gradient(165deg,var(--panel-a),var(--panel-b)), rgba(7,5,18,.72);
  transition:border-color .35s ease, transform .35s cubic-bezier(.16,.8,.3,1);
}
.proof-card:hover{transform:translateY(-5px); border-color:rgba(230,192,121,.35)}
.proof-card h3{font-size:1.55rem; margin:.5rem 0 .5rem}
.proof-card p{color:var(--muted); font-size:.92rem}
.proof-card .case-role{margin-top:0}
.proof-go{
  display:inline-flex; gap:.5rem; margin-top:1.2rem;
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-hi);
  border-bottom:1px solid rgba(230,192,121,.35); padding-bottom:.25rem;
  transition:gap .25s ease;
}
.proof-card:hover .proof-go{gap:.85rem}
.proof-cta{margin-top:2.2rem}

/* ------------------------------------------------------- portfolio page --- */
.page-head{padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(1.5rem,3vw,2.5rem)}
.page-head h1{font-size:clamp(2.4rem,5.4vw,4rem); margin-top:1.2rem; letter-spacing:-.012em}
.page-head .lede{margin-top:1.4rem; max-width:58ch}
.endcap{text-align:center; padding:clamp(2.6rem,5vw,4rem) 0}
.endcap h2{font-size:clamp(2rem,4.4vw,3rem)}
.endcap p{margin-top:1rem; color:var(--muted)}
.endcap .btn{margin-top:1.8rem}