/* ============================================================
   Talon Creative
   Palette sampled from the studio mark: gold #E9A81B on #0C0C0B
   ============================================================ */

:root{
  --gold:#E9A81B;
  --gold-soft:#F2C55E;
  --gold-deep:#B8830F;

  --ink:#0C0C0B;
  --ink-1:#111110;
  --ink-2:#161615;
  --ink-3:#1D1D1B;

  --text:#EFEBE3;
  --text-2:#A5A199;
  --text-3:#726E67;

  --line:rgba(233,168,27,.14);
  --line-soft:rgba(255,255,255,.07);

  --r:14px;
  --r-lg:22px;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t:.55s var(--ease);

  --nav-h:64px;
  --wrap:1160px;
  --wrap-nav:1120px;
  --pad:clamp(20px,5vw,40px);
}

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

html{
  /* the JS momentum loop owns scrolling; CSS smooth would fight it */
  scroll-behavior:auto;
  scroll-padding-top:calc(var(--nav-h) + 34px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.62;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
[hidden]{display:none!important}

::selection{background:rgba(233,168,27,.26);color:#fff}

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

.skip{
  position:fixed;top:-60px;left:16px;z-index:200;
  background:var(--gold);color:#0C0C0B;
  padding:10px 16px;border-radius:8px;font-weight:600;
  transition:top .3s var(--ease);
}
.skip:focus{top:16px}

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

/* ------------ atmosphere ------------ */

.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.032;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora span{
  position:absolute;display:block;border-radius:50%;
  filter:blur(120px);opacity:.22;
}
.aurora .a1{
  width:min(70vw,780px);aspect-ratio:1;
  top:-24vh;left:50%;translate:-50% 0;
  background:radial-gradient(circle,rgba(233,168,27,.55),transparent 68%);
  animation:drift1 26s var(--ease-io) infinite alternate;
}
.aurora .a2{
  width:min(56vw,620px);aspect-ratio:1;
  bottom:-22vh;right:-10vw;
  background:radial-gradient(circle,rgba(184,131,15,.42),transparent 70%);
  animation:drift2 32s var(--ease-io) infinite alternate;
}
@keyframes drift1{
  from{transform:translate3d(-4%,0,0) scale(1)}
  to{transform:translate3d(6%,5%,0) scale(1.12)}
}
@keyframes drift2{
  from{transform:translate3d(0,0,0) scale(1.06)}
  to{transform:translate3d(-8%,-6%,0) scale(.94)}
}

/* ------------ nav: a floating island ------------
   Ported from the Velocity site. `.nav` is only a transparent dock that centres
   the island; `.nav-inner` IS the island. Two deliberate choices carried over:

   1. It does NOT restyle on scroll. A bar that fades a background in and shrinks
      moves page furniture while you read. A constant island is calmer, and it is
      the single biggest reason a floating nav reads as clean.
   2. The dock is pointer-events:none, so the transparent gutters either side of
      the island never swallow clicks meant for the page beneath.

   Three-column balance: .nav-brand and .nav-right are both flex:1 1 0, so they
   counterweight each other and the link group lands on the true centre line of
   the island whatever its labels say. Sizing the middle group would only centre
   it by luck, and it would drift the moment a label changed. */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:auto;
  display:flex;align-items:flex-start;justify-content:center;
  padding:14px 16px 0;
  background:transparent;border-bottom:0;
  pointer-events:none;
}
.nav.is-stuck{background:transparent;box-shadow:none}

.nav-inner{
  pointer-events:auto;
  width:100%;max-width:var(--wrap-nav);margin:0;
  height:var(--nav-h);padding:0 16px;
  display:flex;align-items:center;gap:16px;
  background:rgba(9,9,8,.9);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 14px 40px -26px rgba(0,0,0,.95);
}

.nav-brand{
  flex:1 1 0;min-width:0;
  display:flex;align-items:center;gap:11px;
  text-decoration:none;color:var(--text);cursor:pointer;
  font-family:"Inter Tight",Inter,sans-serif;
  font-weight:700;font-size:18px;letter-spacing:-.02em;
}
.brand-mark{
  width:28px;height:28px;object-fit:contain;
  transition:transform .6s var(--ease),filter .6s var(--ease);
}
.nav-brand:hover .brand-mark{
  transform:rotate(-8deg) scale(1.06);
  filter:drop-shadow(0 0 12px rgba(233,168,27,.45));
}
.wm{white-space:nowrap}
.wm-thin{color:var(--text-2);font-weight:450;margin-left:.32em}

/* centre column: hover is a colour change, nothing moves */
.nav-links{flex:0 1 auto;position:relative;display:flex;align-items:center;gap:2px}
.nav-link{
  position:relative;padding:9px 14px;border-radius:9px;
  font-size:14px;font-weight:500;color:var(--text-2);
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:color .35s var(--ease);
}
.nav-link:hover,.nav-link.is-active{color:var(--text)}

/* utility cluster, split from the links by a hairline */
.nav-right{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:13px}
.nav-signin{
  font-size:13.5px;padding:0 4px;font-weight:600;
  color:var(--text-2);text-decoration:none;white-space:nowrap;
  transition:color .35s var(--ease);
}
.nav-signin:hover{color:var(--gold)}
.nav-div{width:1px;height:20px;background:rgba(255,255,255,.14);flex:none}
/* the CTA is sized after the .btn block, not here: both selectors are one class,
   so whichever comes last in the file wins and .btn would override this one */
.nav-cta{white-space:nowrap}

.nav-toggle{
  display:none;width:40px;height:40px;flex:none;
  border-radius:10px;background:rgba(255,255,255,.04);
  border:1px solid var(--line-soft);cursor:pointer;padding:0;
  align-items:center;justify-content:center;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.nav-toggle:hover{background:rgba(233,168,27,.08);border-color:rgba(233,168,27,.3)}
.nav-toggle svg{width:22px;height:22px;color:var(--text)}

/* mobile drawer: an island too, inset to the same 16px gutter as the bar above,
   so a floating bar is never followed by a full-bleed panel */
.nav-mobile{
  position:fixed;inset:calc(var(--nav-h) + 20px) 16px auto 16px;z-index:999;
  display:none;flex-direction:column;gap:2px;padding:12px;
  max-height:calc(100vh - var(--nav-h) - 36px);overflow-y:auto;overscroll-behavior:contain;
  background:rgba(12,12,11,.96);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--line-soft);border-radius:16px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.95);
  transform:translateY(-10px);opacity:0;
  transition:transform .4s var(--ease),opacity .4s var(--ease);
}
.nav-mobile.open{display:flex;transform:none;opacity:1}
.nav-mobile a{
  padding:12px;border-radius:10px;text-decoration:none;
  font-size:15.5px;font-weight:500;color:var(--text-2);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.nav-mobile a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.nav-m-div{height:1px;margin:10px 12px;background:var(--line-soft)}
.nav-mobile a.nav-m-cta{
  margin-top:4px;text-align:center;font-weight:600;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold) 55%,var(--gold-deep));
  color:#120E03;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.nav-mobile a.nav-m-cta:hover{color:#120E03}

/* ------------ type ------------ */

.display{
  font-family:"Inter Tight",Inter,sans-serif;
  font-weight:600;
  font-size:clamp(2.5rem,6.4vw,4.6rem);
  line-height:1.03;
  letter-spacing:-.042em;
  margin:0 0 22px;
  background:linear-gradient(178deg,#FFFCF6 8%,#CFC8BC 96%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.h2{
  font-family:"Inter Tight",Inter,sans-serif;
  font-weight:600;
  font-size:clamp(1.72rem,3.5vw,2.65rem);
  line-height:1.12;letter-spacing:-.035em;
  margin:0 0 14px;color:var(--text);
}
h3{
  font-family:"Inter Tight",Inter,sans-serif;
  font-weight:600;font-size:1.075rem;letter-spacing:-.022em;
  margin:0 0 8px;color:var(--text);
}
.eyebrow{
  margin:0 0 14px;
  font-size:11.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold);
}
.lede{
  margin:0 auto 34px;max-width:60ch;
  font-size:clamp(1rem,1.45vw,1.115rem);
  color:var(--text-2);line-height:1.68;
}
.sub{margin:0;max-width:62ch;color:var(--text-2);font-size:1.005rem}

/* the Apply section carries no kicker and no standfirst, so its heading does the
   whole job and is sized closer to the hero than to a section head */
.apply-title{
  font-family:"Inter Tight",Inter,sans-serif;
  font-weight:600;
  font-size:clamp(2.35rem,5.2vw,3.9rem);
  line-height:1.04;letter-spacing:-.04em;
  margin:0;
  background:linear-gradient(178deg,#FFFCF6 10%,#CFC8BC 96%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.sec-head-apply{margin-bottom:clamp(28px,3.4vw,42px)}

/* ------------ buttons ------------ */

.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 25px;border-radius:11px;
  font-size:14.5px;font-weight:550;letter-spacing:-.012em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  font-family:inherit;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),
             background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.32) 50%,transparent 80%);
  transform:translateX(-130%);
  transition:transform .85s var(--ease);
}
.btn:hover::before{transform:translateX(130%)}

.btn-gold{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold) 55%,var(--gold-deep));
  color:#120E03;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 8px 26px -12px rgba(233,168,27,.75);
}
.btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 16px 40px -14px rgba(233,168,27,.85);
}
.btn-gold:active{transform:translateY(0)}

.btn-ghost{
  background:rgba(255,255,255,.032);
  border-color:var(--line-soft);
  color:var(--text);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{
  transform:translateY(-2px);
  border-color:rgba(233,168,27,.4);
  background:rgba(233,168,27,.07);
  color:#fff;
}
.btn-lg{padding:16px 34px;font-size:15.5px;border-radius:13px}
.dico{width:20px;height:15px;flex:none}

/* Nav CTA: sized here, AFTER .btn, because both are single-class selectors and
   source order decides. The base .btn inherits the body 1.62 line-height, which
   is what made this 51.5px tall inside a 64px island: 80% of the bar, 6px of
   clearance, and it read as a button wearing the nav rather than sitting in it.
   line-height:1 makes the height arithmetic explicit: 13 + 22 + 2 = 37px, so it
   now fills 58% and clears 13.5px top and bottom, matching the sign-in link's
   optical weight. The drop glow is pulled in too, since a wide soft shadow adds
   apparent size in a tight bar. */
.nav-cta{
  padding:11px 16px;
  font-size:13px;
  line-height:1;
  font-weight:600;
  border-radius:9px;
  box-shadow:0 1px 0 rgba(255,255,255,.26) inset,0 4px 12px -8px rgba(233,168,27,.6);
}
.nav-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 8px 18px -9px rgba(233,168,27,.75);
}

/* ------------ hero ------------ */

.hero{
  position:relative;z-index:2;
  min-height:100svh;
  display:flex;align-items:center;
  padding:150px 0 110px;
  text-align:center;
}
.hero-in{display:flex;flex-direction:column;align-items:center}

.hero-mark{position:relative;margin-bottom:34px}
.hero-mark img{
  width:clamp(84px,11vw,116px);height:auto;
  position:relative;z-index:2;
  animation:float 7s ease-in-out infinite;
}
.mark-glow{
  position:absolute;inset:-45%;z-index:1;border-radius:50%;
  background:radial-gradient(circle,rgba(233,168,27,.4),transparent 62%);
  filter:blur(26px);
  animation:pulse 5.5s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}
@keyframes pulse{
  0%,100%{opacity:.55;transform:scale(.95)}
  50%{opacity:1;transform:scale(1.08)}
}

.hero-cta{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}

.hero-meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);font-weight:500;
}
.hero-meta i{width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.55}

.scroll-hint{
  position:absolute;left:50%;bottom:34px;translate:-50% 0;
  width:22px;height:34px;border:1px solid var(--line-soft);border-radius:12px;
  display:grid;place-items:start center;padding-top:7px;
}
.scroll-hint span{
  width:2px;height:6px;border-radius:2px;background:var(--gold);
  animation:wheel 2.1s var(--ease-io) infinite;
}
@keyframes wheel{
  0%{opacity:0;transform:translateY(0)}
  25%{opacity:1}
  75%{opacity:1;transform:translateY(11px)}
  100%{opacity:0;transform:translateY(13px)}
}

/* ------------ bands ------------ */

.band{position:relative;z-index:2;padding:clamp(74px,10vw,124px) 0}
.band-alt{
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.017) 18%,
             rgba(255,255,255,.017) 82%,transparent);
  border-block:1px solid var(--line-soft);
}
.sec-head{margin-bottom:clamp(40px,5vw,60px);max-width:66ch}

/* ------------ the step deck ------------
   Three cards on one stage, the front one readable and the other two peeking
   behind it, advancing every 4 seconds. Slot classes carry the geometry, so an
   advance is only a class swap and the browser interpolates the rest.

   The card leaving does not travel down through the other two to reach the
   back. It fades upward out of the stack, and only once it is invisible is it
   re-placed in the back slot with transitions suppressed for one frame. That
   re-placement is what would otherwise read as a glitch. */

/* The whole how-it-works block is centred. Everything else on the page that is
   centred (hero, the Discord band) is centred, and a lone left-aligned column
   under a full-width heading was reading as an alignment mistake rather than a
   choice. Scoped to #how so the Apply head, which shares .sec-head, is left. */
#how .sec-head{max-width:none;text-align:center}

.deck{position:relative}

.deck-stage{
  position:relative;
  max-width:660px;margin-inline:auto;
  /* height is set from the tallest card at runtime; this is the pre-JS floor */
  min-height:250px;
}

.dcard{
  position:absolute;left:0;right:0;top:0;
  padding:32px 32px 34px;
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  /* fully opaque on purpose: at 97% the card behind ghosted through the front
     card's own body copy, which read as a rendering fault rather than depth */
  background:linear-gradient(180deg,#191917,#0F0F0E);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.95);
  transform-origin:top center;
  will-change:transform,opacity;
  transition:transform .72s var(--ease),opacity .72s var(--ease),
             border-color .72s var(--ease),box-shadow .72s var(--ease);
}
/* front */
.dcard.s0{transform:translateY(0) scale(1);opacity:1;z-index:3;
  border-color:rgba(233,168,27,.32);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95),0 0 0 1px rgba(233,168,27,.06) inset;}
/* one back. The offsets are bigger than they look they need to be: a card that
   is also scaled down finishes higher than its translate suggests, so at +20px
   only about 9px of it cleared the front card's bottom edge and the stack was
   invisible. These give a 15px and a 30px reveal. */
.dcard.s1{transform:translateY(26px) scale(.955);opacity:.62;z-index:2}
/* two back */
.dcard.s2{transform:translateY(52px) scale(.912);opacity:.34;z-index:1}
/* leaving: up and out, never down through the deck */
.dcard.out{transform:translateY(-30px) scale(1.015);opacity:0;z-index:4;pointer-events:none}
/* one frame with no transition, used only while a card is invisible */
.dcard.no-anim{transition:none!important}

.dcard:not(.s0){pointer-events:none}

.dcard-n{
  display:block;margin-bottom:14px;
  font-family:"Inter Tight",Inter,sans-serif;
  font-size:clamp(2rem,4vw,2.6rem);font-weight:700;
  line-height:1;letter-spacing:-.04em;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.dcard h3{font-size:1.32rem;margin-bottom:10px}
.dcard p{
  margin:0 auto;color:var(--text-2);font-size:14.9px;line-height:1.66;
  max-width:46ch;
}
.dcard{text-align:center}

/* progress: each dot fills over the 4s dwell, so the wait is visible */
.deck-dots{display:flex;justify-content:center;gap:9px;margin-top:clamp(30px,3.6vw,42px)}
.deck-dot{
  position:relative;width:52px;height:3px;padding:0;
  border:0;border-radius:3px;cursor:pointer;
  background:rgba(255,255,255,.11);
  overflow:hidden;
  transition:background .4s var(--ease);
}
.deck-dot:hover{background:rgba(255,255,255,.2)}
.deck-dot i{
  position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-soft),var(--gold));
  border-radius:3px;
}
.deck-dot.is-done i{transform:scaleX(1)}
.deck-dot.is-on i{animation:deckFill 4s linear forwards}
.deck.is-paused .deck-dot.is-on i{animation-play-state:paused}
@keyframes deckFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:560px){
  .dcard{padding:26px 22px 28px}
  .deck-dot{width:40px}
}

/* Reduced motion: no rotation, no stack. All three read at once as a plain list. */
@media (prefers-reduced-motion:reduce){
  .deck-stage{min-height:0;display:grid;gap:14px}
  .dcard,.dcard.s0,.dcard.s1,.dcard.s2,.dcard.out{
    position:relative;transform:none;opacity:1;pointer-events:auto;
  }
  .deck-dots{display:none}
}

/* ------------ panel + tabs ------------ */

.panel{
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.034),rgba(255,255,255,.011));
  overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}

.tabs{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--line-soft);
}
.tab-ink{
  position:absolute;bottom:-1px;left:0;height:2px;width:50%;
  background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold) 78%,transparent);
  transition:transform .6s var(--ease);
  pointer-events:none;
}
.tab{
  appearance:none;background:none;border:0;cursor:pointer;
  padding:24px 26px;text-align:left;font-family:inherit;
  display:flex;flex-direction:column;gap:4px;
  transition:background .45s var(--ease);
}
.tab + .tab{border-left:1px solid var(--line-soft)}
.tab strong{
  font-family:"Inter Tight",Inter,sans-serif;
  font-size:15.5px;font-weight:600;letter-spacing:-.02em;
  color:var(--text-3);transition:color .4s var(--ease);
}
.tab em{font-style:normal;font-size:13px;color:var(--text-3);opacity:.72;transition:opacity .4s var(--ease)}
.tab:hover{background:rgba(255,255,255,.028)}
.tab:hover strong{color:var(--text-2)}
.tab.is-on{background:rgba(233,168,27,.05)}
.tab.is-on strong{color:var(--gold)}
.tab.is-on em{color:var(--text-2);opacity:1}

.pane{padding:clamp(24px,3.2vw,38px)}


/* picker */

.picker{margin-bottom:30px}
.picker > label{
  display:block;margin-bottom:9px;
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);
}
.sel-wrap{position:relative;max-width:420px}
.sel-wrap .chev{
  position:absolute;right:16px;top:50%;translate:0 -50%;
  width:12px;height:8px;color:var(--gold);pointer-events:none;
  transition:transform .4s var(--ease);
}
.sel-wrap:hover .chev{transform:translateY(1px)}
select,input[type=text],input[type=email],input[type=url],textarea{
  width:100%;font-family:inherit;font-size:14.5px;color:var(--text);
  background:rgba(255,255,255,.038);
  border:1px solid var(--line-soft);border-radius:11px;
  padding:13px 16px;
  transition:border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer}

/* ------------ animated dropdown ------------
   A native <select> renders its option list in the OS, not the page, so it
   cannot be animated at all. Every select is therefore upgraded in JS to a
   button plus a listbox, and the real <select> stays in the DOM, hidden, still
   holding the value. Nothing downstream changes: validation, readValue() and
   the change listener that re-renders on a category switch all still talk to
   the native element.

   The menu is position:fixed and placed from the button's rect, because .panel
   is overflow:hidden and would otherwise clip any menu opening near its edge.
   Fixed also means no ancestor transform or stacking context can trap it. */

.cs{position:relative;width:100%}
/* the real select stays for the form, out of sight and out of the a11y tree */
.cs > select{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;pointer-events:none;
}

.cs-btn{
  position:relative;z-index:1;
  width:100%;display:flex;align-items:center;gap:12px;
  font-family:inherit;font-size:14.5px;text-align:left;color:var(--text);
  background:rgba(255,255,255,.038);
  border:1px solid var(--line-soft);border-radius:11px;
  padding:13px 16px;cursor:pointer;
  transition:border-color .4s var(--ease),background .4s var(--ease),
             box-shadow .4s var(--ease);
}
.cs-btn:hover{border-color:rgba(255,255,255,.14)}
.cs-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-val.is-placeholder{color:var(--text-3)}
.cs-chev{
  width:12px;height:8px;flex:none;color:var(--gold);
  transition:transform .45s var(--ease);
}
.cs.is-open .cs-btn{
  border-color:rgba(233,168,27,.55);
  background:rgba(233,168,27,.035);
  box-shadow:0 0 0 3px rgba(233,168,27,.1);
}
.cs.is-open .cs-chev{transform:rotate(180deg)}

.cs-menu{
  position:fixed;z-index:1200;
  margin:0;padding:6px;list-style:none;
  max-height:min(320px,54vh);overflow-y:auto;overscroll-behavior:contain;
  background:rgba(16,16,15,.97);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(233,168,27,.22);border-radius:12px;
  box-shadow:0 26px 60px -28px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.35);
  opacity:0;transform:translateY(-8px) scale(.985);transform-origin:top center;
  pointer-events:none;visibility:hidden;
  transition:opacity .3s var(--ease),transform .38s var(--ease),visibility .38s;
}
/* opening upward when there is no room below: same motion, mirrored origin */
.cs-menu.drop-up{transform:translateY(8px) scale(.985);transform-origin:bottom center}
.cs-menu.is-open{opacity:1;transform:none;pointer-events:auto;visibility:visible}

.cs-menu::-webkit-scrollbar{width:8px}
.cs-menu::-webkit-scrollbar-thumb{background:rgba(233,168,27,.28);border-radius:8px}

.cs-opt{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:8px;
  font-size:14px;color:var(--text-2);cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease);
  opacity:0;transform:translateY(-5px);
}
/* the stagger: each row is given its own delay inline as the menu is built */
.cs-menu.is-open .cs-opt{animation:csOpt .42s var(--ease) forwards}
@keyframes csOpt{to{opacity:1;transform:none}}

.cs-opt:hover,.cs-opt.is-cursor{background:rgba(233,168,27,.1);color:var(--text)}
.cs-opt.is-sel{color:var(--gold)}
.cs-tick{
  width:14px;height:14px;flex:none;opacity:0;
  transition:opacity .25s var(--ease);
}
.cs-opt.is-sel .cs-tick{opacity:1}

/* error state has to reach the button, since the native select is invisible */
.field.is-bad .cs-btn{
  border-color:rgba(232,90,66,.65);
  background:rgba(232,90,66,.05);
}

@media (prefers-reduced-motion:reduce){
  .cs-menu,.cs-chev{transition:none}
  .cs-menu.is-open .cs-opt{animation:none;opacity:1;transform:none}
}

select option{background:#161615;color:var(--text)}
textarea{min-height:106px;resize:vertical;line-height:1.6}
input::placeholder,textarea::placeholder{color:var(--text-3)}
select:hover,input:hover,textarea:hover{border-color:rgba(255,255,255,.14)}
select:focus,input:focus,textarea:focus{
  outline:none;border-color:rgba(233,168,27,.55);
  background:rgba(233,168,27,.035);
  box-shadow:0 0 0 3px rgba(233,168,27,.1);
}
.picker-blurb{margin:11px 0 0;color:var(--text-3);font-size:13.2px;min-height:1.3em}

/* fields */

.fields{display:grid;gap:26px}

.field{
  opacity:0;transform:translateY(12px);
  animation:fieldIn .6s var(--ease) forwards;
}
@keyframes fieldIn{to{opacity:1;transform:none}}

.field > .lab{
  display:block;margin-bottom:4px;
  font-size:14.5px;font-weight:500;color:var(--text);letter-spacing:-.012em;
}
.req{color:var(--gold);margin-left:3px}
.help{margin:0 0 10px;font-size:12.8px;color:var(--text-3);line-height:1.5}
.field > .lab + .opts,.field > .lab + input,.field > .lab + textarea,
.field > .lab + .sel-wrap{margin-top:10px}

.opts{display:grid;gap:8px}
.opts.row{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

.opt{
  display:flex;align-items:center;gap:11px;
  padding:11px 15px;cursor:pointer;
  border:1px solid var(--line-soft);border-radius:10px;
  background:rgba(255,255,255,.02);
  font-size:14px;color:var(--text-2);
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.opt:hover{border-color:rgba(233,168,27,.3);background:rgba(233,168,27,.045);color:var(--text)}
.opt input{
  appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:16px;height:16px;border:1.5px solid var(--text-3);
  background:transparent;cursor:pointer;position:relative;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.opt input[type=radio]{border-radius:50%}
.opt input[type=checkbox]{border-radius:5px}
.opt input::after{
  content:"";position:absolute;inset:0;margin:auto;
  transform:scale(0);transition:transform .32s var(--ease);
}
.opt input[type=radio]::after{width:7px;height:7px;border-radius:50%;background:#120E03}
.opt input[type=checkbox]::after{
  width:9px;height:5px;margin-top:-2px;
  border-left:2px solid #120E03;border-bottom:2px solid #120E03;
  transform:scale(0) rotate(-45deg);
}
.opt input:checked{background:var(--gold);border-color:var(--gold)}
.opt input[type=radio]:checked::after{transform:scale(1)}
.opt input[type=checkbox]:checked::after{transform:scale(1) rotate(-45deg)}
.opt:has(input:checked){
  border-color:rgba(233,168,27,.5);background:rgba(233,168,27,.08);color:var(--text);
}
.opt-other{display:flex;align-items:center;gap:11px}
.opt-other input[type=text]{
  flex:1;padding:9px 13px;font-size:13.5px;border-radius:9px;
}

/* scale */

.scale{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.scale-end{font-size:12.5px;color:var(--text-3);white-space:nowrap}
.scale-dots{display:flex;gap:8px}
.scale-dots label{
  position:relative;width:42px;height:42px;cursor:pointer;
  display:grid;place-items:center;border-radius:11px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.02);
  font-size:14px;font-weight:550;color:var(--text-3);
  transition:all .35s var(--ease);
}
.scale-dots label:hover{border-color:rgba(233,168,27,.35);color:var(--text);transform:translateY(-2px)}
.scale-dots input{position:absolute;opacity:0;pointer-events:none}
.scale-dots label:has(input:checked){
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  border-color:var(--gold);color:#120E03;
  box-shadow:0 6px 18px -8px rgba(233,168,27,.8);
}

/* errors */

.field.is-bad .lab{color:#F2C55E}
.field.is-bad input,.field.is-bad textarea,.field.is-bad select{
  border-color:rgba(232,90,66,.65);background:rgba(232,90,66,.05);
}
.field.is-bad .opts{
  border-radius:12px;
  box-shadow:0 0 0 1px rgba(232,90,66,.45);
  padding:8px;margin-inline:-8px;
}
.err{margin:8px 0 0;font-size:12.8px;color:#E58A6E}

/* form foot */

.form-foot{
  margin-top:32px;padding-top:26px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.btn-submit{min-width:150px}
.btn-submit .spin{
  display:none;width:15px;height:15px;flex:none;
  border:2px solid rgba(18,14,3,.28);border-top-color:#120E03;border-radius:50%;
  animation:spin .7s linear infinite;
}
.btn-submit.is-busy{pointer-events:none;opacity:.82}
.btn-submit.is-busy .spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.form-note{margin:0;font-size:12.8px;color:var(--text-3);max-width:46ch;line-height:1.55}

/* done */

.done{text-align:center;padding:14px 0 4px;animation:fieldIn .7s var(--ease) both}
.done-tick{
  width:60px;height:60px;margin:0 auto 20px;
  border-radius:50%;display:grid;place-items:center;
  color:var(--gold);border:1px solid rgba(233,168,27,.4);
  background:rgba(233,168,27,.08);
}
.done-tick svg{width:30px;height:30px}
.done-tick svg path{
  stroke-dasharray:32;stroke-dashoffset:32;
  animation:draw .7s var(--ease) .18s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.done h3{font-size:1.32rem;margin-bottom:9px}
.done > p{margin:0 auto 26px;max-width:52ch;color:var(--text-2);font-size:14.5px}
.done-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.raw{margin-top:28px;text-align:left}
.raw summary{
  cursor:pointer;font-size:13px;color:var(--text-3);
  list-style:none;display:inline-flex;align-items:center;gap:7px;
  transition:color .3s var(--ease);
}
.raw summary::-webkit-details-marker{display:none}
.raw summary::before{content:"+";color:var(--gold);font-size:15px;line-height:1}
.raw[open] summary::before{content:"\2212"}
.raw summary:hover{color:var(--text-2)}
.raw pre{
  margin:14px 0 0;padding:18px;
  background:rgba(0,0,0,.35);border:1px solid var(--line-soft);border-radius:12px;
  font-size:12.4px;line-height:1.65;color:var(--text-2);
  white-space:pre-wrap;word-break:break-word;max-height:340px;overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ------------ cta band + footer ------------ */

.cta-band{text-align:center}
.cta-in{display:flex;flex-direction:column;align-items:center;gap:16px}
.cta-in .sub{margin-bottom:12px}

.foot{
  position:relative;z-index:2;
  border-top:1px solid var(--line-soft);
  padding:46px 0 54px;
}
.foot-in{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.foot-brand{
  display:flex;align-items:center;gap:9px;
  font-family:"Inter Tight",Inter,sans-serif;font-weight:600;
  font-size:14.5px;letter-spacing:-.02em;color:var(--text-2);
}
.foot-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.foot-links a{
  color:var(--text-3);text-decoration:none;font-size:13.5px;
  padding:6px 11px;border-radius:8px;
  transition:color .35s var(--ease),background .35s var(--ease);
}
.foot-links a:hover{color:var(--gold);background:rgba(233,168,27,.06)}
.foot-fine{margin:0;max-width:56ch;font-size:12.3px;color:var(--text-3);line-height:1.6}

/* ------------ reveal ------------ */

.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:calc(var(--d,0) * 85ms);
}
.reveal.is-in{opacity:1;transform:none}

/* ------------ responsive ------------ */

@media (max-width:960px){
  .nav-links,.nav-signin,.nav-div{display:none}
  .nav-toggle{display:inline-flex}
}
/* above the drawer breakpoint the toggle is gone, so an open drawer could
   otherwise be left stranded over the page after a resize */
@media (min-width:961px){
  .nav-mobile,.nav-mobile.open{display:none}
}

@media (max-width:860px){
  .nav-inner{padding:0 12px;gap:10px}
  .nav-cta{padding:9px 15px}
  .tabs{grid-template-columns:1fr}
  .tab + .tab{border-left:0;border-top:1px solid var(--line-soft)}
  .tab-ink{display:none}
  .tab{padding:19px 22px}
  .tab.is-on{box-shadow:inset 2px 0 0 var(--gold)}
  .hero{min-height:auto;padding:132px 0 90px}
  .scroll-hint{display:none}
  .opts.row{grid-template-columns:1fr}
}

@media (max-width:560px){
  .hero-cta .btn{width:100%}
  .form-foot{flex-direction:column;align-items:stretch}
  .btn-submit{width:100%}
  .scale-dots label{width:38px;height:38px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
  .field{opacity:1;transform:none}
}

/* ------------ honeypot ------------
   Not display:none. Some bots skip hidden inputs, and a screen reader is
   kept out with aria-hidden plus tabindex="-1" rather than by hiding it. */
.hp{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}

/* ------------ sent confirmation ------------ */
.modal{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;padding:22px;
}
.modal-veil{
  position:absolute;inset:0;
  background:rgba(6,6,5,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .34s var(--ease);
}
.modal.is-on .modal-veil{opacity:1}

.modal-card{
  position:relative;width:min(478px,100%);text-align:center;
  background:linear-gradient(180deg,var(--ink-2),var(--ink-1));
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:40px 34px 30px;
  box-shadow:0 40px 100px -40px rgba(0,0,0,.95);
  opacity:0;transform:translateY(16px) scale(.975);
  transition:opacity .36s var(--ease),transform .42s var(--ease);
}
.modal.is-on .modal-card{opacity:1;transform:none}
.modal-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(70% 46% at 50% 0%,rgba(233,168,27,.2),transparent 70%);
  mask:linear-gradient(#000,transparent 60%);
  -webkit-mask:linear-gradient(#000,transparent 60%);
}

.modal-x{
  position:absolute;top:13px;right:13px;
  width:32px;height:32px;display:grid;place-items:center;
  background:none;border:0;border-radius:9px;cursor:pointer;
  color:var(--text-3);transition:color .2s,background .2s;
}
.modal-x:hover{color:var(--text);background:rgba(255,255,255,.05)}
.modal-x svg{width:15px;height:15px}

.modal-tick{
  width:66px;height:66px;margin:0 auto 20px;color:var(--gold);
  display:grid;place-items:center;
}
.modal-tick svg{width:66px;height:66px;overflow:visible}
.mt-ring{
  stroke-dasharray:107;stroke-dashoffset:107;opacity:.4;
  transition:stroke-dashoffset .8s var(--ease) .1s;
}
.mt-check{
  stroke-dasharray:34;stroke-dashoffset:34;
  transition:stroke-dashoffset .5s var(--ease) .42s;
}
.modal.is-on .mt-ring,.modal.is-on .mt-check{stroke-dashoffset:0}

.modal-title{
  font-family:"Inter Tight",Inter,sans-serif;
  font-size:clamp(23px,4.2vw,27px);font-weight:600;letter-spacing:-.025em;
  margin:0 0 11px;line-height:1.2;
}
.modal-body{
  margin:0 auto 27px;max-width:38ch;
  color:var(--text-2);font-size:14.5px;line-height:1.62;
}
.modal-cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.modal-cta .btn{min-width:0}

body.locked{overflow:hidden}

@media (max-width:520px){
  .modal-card{padding:34px 22px 24px}
  .modal-cta{flex-direction:column-reverse}
  .modal-cta .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .modal-veil,.modal-card,.mt-ring,.mt-check{transition-duration:.01ms!important}
  .mt-ring,.mt-check{stroke-dashoffset:0}
}


/* a category that is not open yet: visible, so people know it is coming */
.cs-opt.is-off{
  opacity:.42;cursor:not-allowed;pointer-events:none;
}
.cs-opt.is-off .cs-tick{visibility:hidden}