/* ============================================================
   CORSAIR FUNDING — corsairfunding.com
   Dark water. Gold blades. Nothing slow.
   ============================================================ */

:root{
  --ink:#0b0d10;
  --ink-2:#0f1218;
  --ink-3:#141924;
  --panel:#10141b;
  --gold:#d4a437;
  --gold-hot:#e8bc55;
  --gold-deep:#8f6f22;
  --bone:#ece7db;
  --mist:#9aa2af;
  --err:#f2705d;
  --hair:rgba(212,164,55,.18);
  --hair-soft:rgba(236,231,219,.08);
  --disp:'Space Grotesk','Helvetica Neue',sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --cut:14px;
  --ease:cubic-bezier(.22,.68,.12,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}
html,body{overflow-x:clip}

body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* film grain — pure data-URI turbulence, no requests */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:2147483000;
  pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
}

::selection{background:var(--gold);color:var(--ink)}

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

a{color:var(--gold-hot);text-decoration:none}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--gold);color:var(--ink);padding:.6rem 1rem;font-weight:600;
}
.skip:focus{left:12px;top:12px}

/* honeypot — real humans never see or reach this */
.fx{position:absolute !important;left:-9999px !important;top:auto;width:1px;height:1px;overflow:hidden}

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

h1,h2,h3{font-family:var(--disp);color:var(--bone);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.6vw,4.4rem);font-weight:700}
h2{font-size:clamp(1.9rem,3.4vw,2.75rem);font-weight:700}
h3{font-size:1.22rem;font-weight:700;line-height:1.25}

.kicker{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--disp);font-size:.74rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.kicker::before{content:"";width:26px;height:1px;background:var(--gold)}

.lede{color:var(--mist);max-width:56ch;text-wrap:pretty}

.hairline{height:1px;border:0;background:linear-gradient(90deg,var(--gold) 0%,rgba(212,164,55,.05) 100%)}

/* ---------- layout ---------- */

.rig{width:min(1180px,100% - 48px);margin-inline:auto}

.deck{padding:6.5rem 0;background:radial-gradient(120% 90% at 82% -10%,#10141c 0%,var(--ink) 58%)}
.deck--tight{padding:4.5rem 0}
.deck--shade{background:
  radial-gradient(70% 90% at 12% 0%,rgba(212,164,55,.05) 0%,transparent 55%),
  linear-gradient(168deg,#141a27 0%,var(--ink-2) 45%,#0c0f15 100%)}
.deck--deep{background:linear-gradient(180deg,var(--ink-3) 0%,#10141d 100%)}

/* sharp diagonal seams between decks */
.seam-dn{position:relative;clip-path:polygon(0 0,100% 5vw,100% 100%,0 100%);margin-top:-5vw;padding-top:calc(6.5rem + 5vw)}
.seam-up{position:relative;clip-path:polygon(0 5vw,100% 0,100% 100%,0 100%);margin-top:-5vw;padding-top:calc(6.5rem + 5vw)}
.seam-dn::before,.seam-up::before{
  content:"";position:absolute;top:1px;height:2px;width:115%;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(212,164,55,.7) 40%,rgba(232,188,85,.9) 60%,transparent 100%);
}
.seam-dn::before{left:0;transform-origin:0 0;transform:rotate(2.862deg)}
.seam-up::before{right:0;transform-origin:100% 0;transform:rotate(-2.862deg)}

.deck__head{max-width:62ch;margin-bottom:3.2rem}
.deck__head h2{margin:.9rem 0 .8rem}

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

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--disp);font-weight:700;font-size:1rem;letter-spacing:.02em;
  padding:.95rem 1.9rem;cursor:pointer;border:0;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:transform .22s var(--ease),background .22s,color .22s,box-shadow .22s;
}
.btn--gold{background:var(--gold);color:#090a0d}
.btn--gold:hover{background:var(--gold-hot);color:#090a0d;transform:translateY(-2px)}
.btn--void{
  background:transparent;color:var(--bone);
  box-shadow:inset 0 0 0 1px rgba(212,164,55,.55);
}
.btn--void:hover{color:var(--gold-hot);box-shadow:inset 0 0 0 1px var(--gold-hot);transform:translateY(-2px)}
.btn--wide{width:100%}

/* ---------- masthead ---------- */

.mast{
  position:sticky;top:0;z-index:60;
  background:rgba(11,13,16,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair-soft);
}
.mast__row{display:flex;align-items:center;justify-content:space-between;height:70px;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.7rem;color:var(--bone)}
.brand:hover{color:var(--bone)}
.brand__mark{width:34px;height:34px;flex:none}
.brand__word{font-family:var(--disp);font-weight:700;font-size:1.12rem;letter-spacing:.16em}
.brand__word em{font-style:normal;color:var(--gold);font-weight:500;letter-spacing:.22em;font-size:.68em;display:block;line-height:1.1}
.mast__links{display:flex;gap:1.9rem;list-style:none}
.mast__links a{
  color:var(--mist);font-size:.92rem;font-weight:500;letter-spacing:.03em;
  padding:.35rem 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.mast__links a:hover{color:var(--bone);border-color:var(--gold)}
.mast .btn{padding:.62rem 1.35rem;font-size:.92rem}

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

.prow{
  position:relative;overflow:hidden;
  min-height:min(92vh,880px);
  display:flex;align-items:center;
  background:
    radial-gradient(85% 75% at 68% 24%,rgba(232,188,85,.10) 0%,transparent 52%),
    radial-gradient(120% 90% at 72% 30%,#171e2c 0%,#11151d 42%,var(--ink) 72%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6vw),0 100%);
  padding:5.5rem 0 8rem;
}
.prow::after{ /* vignette + low-water glow — sits under the text layer */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 55% at 76% 78%,rgba(212,164,55,.10) 0%,transparent 60%),
    radial-gradient(140% 120% at 50% 45%,transparent 55%,rgba(5,6,8,.55) 100%);
}
.prow__sea{
  position:absolute;top:0;right:-6vw;bottom:0;width:96vw;
  /* The sea is allowed further to port than it was. The copy is guarded
     by the near-opaque .prow__inner::before scrim, not by starving the
     canvas — the previous stack held the chart to <=48/255 across the
     left 55% of the fold and the signature barely survived. */
  -webkit-mask-image:linear-gradient(to left,#000 64%,rgba(0,0,0,.50) 84%,transparent 99%);
  mask-image:linear-gradient(to left,#000 64%,rgba(0,0,0,.50) 84%,transparent 99%);
}
.prow__sea canvas{width:100%;height:100%}
.prow__inner{position:relative;z-index:2;max-width:860px}
.prow h1{
  margin:1.1rem 0 1.3rem;
  font-size:clamp(3.4rem,7.5vw,6.5rem);
  line-height:.98;letter-spacing:-.035em;
  text-shadow:0 2px 34px rgba(7,9,12,.85);
}
.prow h1 .flare{color:var(--gold-hot);text-shadow:0 0 42px rgba(232,188,85,.45)}
.prow__sub{color:var(--mist);font-size:1.14rem;max-width:52ch;margin-bottom:2.1rem}
.prow__sub strong{color:var(--bone);font-weight:600}
.prow__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2rem}
.prow__proof{
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;list-style:none;
  color:var(--mist);font-size:.88rem;
}
.prow__proof li{display:flex;align-items:center;gap:.5rem}
.prow__proof li::before{content:"";width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none}

/* ---------- speed band ---------- */

.band{
  position:relative;z-index:3;
  background:linear-gradient(100deg,#b98e2c 0%,var(--gold) 28%,var(--gold-hot) 55%,var(--gold) 100%);
  color:#0a0b0e;
  transform:skewY(-2deg);margin:-3rem 0 -1rem;
  overflow:hidden;border-block:1px solid #090a0d;
  box-shadow:0 10px 40px rgba(212,164,55,.18);
}
.band__rail{display:flex;width:max-content;transform:skewY(2deg);animation:rail 58s linear infinite}
.band.is-held .band__rail{animation-play-state:paused}
.band__set{display:flex;flex:none;align-items:center;padding-block:.85rem}
.band__set span{
  font-family:var(--disp);font-weight:700;font-size:.98rem;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;padding:0 1.6rem;
  display:flex;align-items:center;gap:1.6rem;
}
.band__set span::after{content:"◆";font-size:.6rem}
@keyframes rail{to{transform:skewY(2deg) translateX(-50%)}}

/* ---------- fleet (products) ---------- */

.fleet{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.fleet__card{
  position:relative;
  background:var(--panel);
  padding:1.8rem 1.7rem 1.6rem;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  box-shadow:inset 0 0 0 1px var(--hair-soft);
  transition:transform .28s var(--ease),box-shadow .28s;
  display:flex;flex-direction:column;gap:.7rem;
}
.fleet__card::before{ /* gold blade across the clipped corner */
  content:"";position:absolute;top:3px;right:3px;width:26px;height:1px;
  background:var(--gold);transform:rotate(45deg);transform-origin:100% 0;
  opacity:.55;transition:opacity .28s;
}
.fleet__card:hover{
  transform:translate(-3px,-3px);
  box-shadow:inset 0 0 0 1px rgba(212,164,55,.6),inset 0 0 46px rgba(212,164,55,.06),0 18px 40px rgba(0,0,0,.5);
}
.fleet__card:hover::before{opacity:1}
.fleet__card--flag{
  grid-column:span 2;grid-row:span 1;
  background:linear-gradient(128deg,#151a23 0%,var(--panel) 55%);
  box-shadow:inset 0 0 0 1px rgba(212,164,55,.34);
}
.fleet__tag{
  align-self:flex-start;font-family:var(--disp);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#0a0b0e;background:var(--gold);
  padding:.28rem .6rem;clip-path:polygon(6px 0,100% 0,100% 100%,0 100%,0 6px);
}
.fleet__meta{display:flex;gap:1.4rem;font-family:var(--disp);font-size:.86rem;color:var(--gold-hot);letter-spacing:.04em}
.fleet__meta b{color:var(--bone);font-weight:700}
.fleet__card p{color:var(--mist);font-size:.97rem}
.fleet__go{margin-top:auto;font-family:var(--disp);font-size:.88rem;font-weight:700;letter-spacing:.06em;color:var(--gold-hot)}
.fleet__go::after{content:" →"}

/* ---------- why (ledger) ---------- */

.ledger{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:start}
.ledger__facts{list-style:none;display:grid;gap:1.15rem;margin-top:2rem}
.ledger__facts li{display:flex;gap:.95rem;color:var(--mist)}
.ledger__facts li strong{color:var(--bone);font-weight:600}
.ledger__facts li::before{
  content:"";flex:none;width:10px;height:10px;margin-top:.5rem;
  background:linear-gradient(135deg,var(--gold) 50%,transparent 50%);
}
.tally{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.tally__cell{
  background:var(--panel);padding:1.7rem 1.5rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
  box-shadow:inset 0 0 0 1px var(--hair-soft);
}
.tally__num{
  font-family:var(--disp);font-weight:700;font-size:clamp(2.3rem,3.6vw,3.1rem);
  color:var(--gold-hot);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.tally__lbl{color:var(--mist);font-size:.9rem;margin-top:.5rem;line-height:1.45}

/* ---------- course (how it works) ---------- */

.course{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;counter-reset:leg}
.course__leg{
  position:relative;background:var(--ink-2);padding:2rem 1.7rem 1.8rem;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
  box-shadow:inset 0 0 0 1px var(--hair-soft);
  counter-increment:leg;
}
.deck--shade .course__leg{background:var(--panel)}
.course__leg::before{
  content:"0" counter(leg);
  font-family:var(--disp);font-weight:700;font-size:2.7rem;color:transparent;
  -webkit-text-stroke:1px var(--gold);display:block;margin-bottom:1rem;line-height:1;
}
.course__leg h3{margin-bottom:.55rem}
.course__leg p{color:var(--mist);font-size:.97rem}

/* ---------- waters (industries) ---------- */

.waters{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-soft)}
.waters--six{grid-template-columns:repeat(3,1fr)}
.waters__cell{
  background:var(--ink-2);padding:1.5rem 1.4rem;min-height:150px;
  display:flex;flex-direction:column;justify-content:space-between;gap:.8rem;
  transition:background .25s;
}
.waters__cell:hover{background:var(--ink-3)}
.waters__cell h3{font-size:1.02rem}
.waters__cell p{color:var(--mist);font-size:.86rem;line-height:1.5}
.waters__cell h3::after{
  content:"";display:block;width:22px;height:2px;background:var(--gold);margin-top:.55rem;
  transition:width .3s var(--ease);
}
.waters__cell:hover h3::after{width:44px}

/* ---------- FAQ ---------- */

.qdeck{max-width:820px}
.qdeck details{border-bottom:1px solid var(--hair-soft)}
.qdeck details:first-of-type{border-top:1px solid var(--hair-soft)}
.qdeck summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.35rem .2rem;font-family:var(--disp);font-weight:700;font-size:1.08rem;color:var(--bone);
  transition:color .2s;
}
.qdeck summary::-webkit-details-marker{display:none}
.qdeck summary:hover{color:var(--gold-hot)}
.qdeck summary::after{
  content:"+";flex:none;font-weight:500;font-size:1.5rem;color:var(--gold);
  transition:transform .3s var(--ease);line-height:1;
}
.qdeck details[open] summary::after{transform:rotate(45deg)}
.qdeck details[open] summary{color:var(--gold-hot)}
.qdeck details p{color:var(--mist);padding:0 .2rem 1.4rem;max-width:66ch}

/* ---------- broadside (final CTA) ---------- */

.broadside{
  position:relative;
  background:
    radial-gradient(70% 110% at 12% 100%,rgba(212,164,55,.12) 0%,transparent 55%),
    radial-gradient(60% 80% at 88% 0%,rgba(232,188,85,.07) 0%,transparent 55%),
    linear-gradient(120deg,#161c28,var(--ink-2) 70%);
  clip-path:polygon(0 5vw,100% 0,100% 100%,0 100%);
  margin-top:-5vw;padding:calc(6rem + 5vw) 0 6.5rem;text-align:left;
}
.broadside::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.broadside h2{max-width:22ch}
.broadside .lede{margin:1rem 0 2.2rem}
.broadside__cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.broadside__tel{font-family:var(--disp);color:var(--bone);font-weight:500;letter-spacing:.04em}
.broadside__tel:hover{color:var(--gold-hot)}

/* ---------- keel (footer) ---------- */

.keel{
  background:
    radial-gradient(80% 60% at 50% 0%,rgba(212,164,55,.05) 0%,transparent 55%),
    linear-gradient(180deg,#0a0c10 0%,#07090c 100%);
  border-top:1px solid var(--hair);padding:4rem 0 2.5rem;font-size:.92rem;
}
.keel__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2.5rem;margin-bottom:3rem}
.keel h2{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:1rem}
.keel ul{list-style:none;display:grid;gap:.55rem}
.keel a{color:var(--mist)}
.keel a:hover{color:var(--gold-hot)}
.keel__brand p{color:var(--mist);margin-top:1rem;max-width:34ch}
.keel address{font-style:normal;color:var(--mist);display:grid;gap:.55rem}
.keel__disc{
  border-left:2px solid var(--gold);padding:.9rem 0 .9rem 1.2rem;
  color:var(--mist);font-size:.85rem;max-width:88ch;margin-bottom:2rem;
}
.keel__disc strong{color:var(--bone)}
.keel__base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--hair-soft);padding-top:1.6rem;color:#6d7480;font-size:.82rem;
}
.keel__base a{color:#6d7480;text-decoration:underline;text-underline-offset:3px}
.keel__base a:hover{color:var(--gold-hot)}

/* ---------- forms (apply / unsubscribe) ---------- */

.hold{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:start}
.hold__pitch h1{margin:1rem 0 1rem;font-size:clamp(2.2rem,4vw,3.4rem)}
.hold__pitch .lede{margin-bottom:2.4rem}
.next{list-style:none;display:grid;gap:1.4rem;counter-reset:nx}
.next li{position:relative;padding-left:3.4rem;counter-increment:nx;color:var(--mist)}
.next li strong{display:block;color:var(--bone);font-family:var(--disp);font-size:1.05rem;margin-bottom:.15rem}
.next li::before{
  content:"0" counter(nx);position:absolute;left:0;top:.1rem;
  font-family:var(--disp);font-weight:700;color:transparent;-webkit-text-stroke:1px var(--gold);
  font-size:1.6rem;line-height:1;
}
.sheet{
  background:var(--panel);padding:2.4rem 2.2rem;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
  box-shadow:inset 0 0 0 1px var(--hair);
}
.sheet__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:grid;gap:.4rem;margin-bottom:1.15rem}
.field label{font-family:var(--disp);font-size:.8rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.field input,.field select,.field textarea{
  width:100%;background:var(--ink);border:1px solid rgba(236,231,219,.16);
  color:var(--bone);font:inherit;padding:.8rem .95rem;border-radius:0;
  transition:border-color .2s,box-shadow .2s;
}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4a437' fill='none' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .95rem center;padding-right:2.4rem}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 22px rgba(212,164,55,.12);
}
.field.is-bad input,.field.is-bad select{border-color:var(--err)}
.field__err{display:none;color:var(--err);font-size:.85rem;line-height:1.4}
.field.is-bad .field__err{display:block}
.sheet__fine{color:#6d7480;font-size:.82rem;margin-top:1rem}
.sheet__ok{text-align:center;padding:2.5rem 1rem}
.sheet__ok svg{margin:0 auto 1.4rem}
.sheet__ok h2{margin-bottom:.7rem}
.sheet__ok p{color:var(--mist)}
[hidden]{display:none !important}

/* ---------- legal pages ---------- */

.scroll{max-width:760px}
.scroll h1{margin:1rem 0 .6rem;font-size:clamp(2.1rem,3.8vw,3rem)}
.scroll__date{color:#6d7480;font-size:.9rem;margin-bottom:2.6rem}
.scroll h2{font-size:1.35rem;margin:2.4rem 0 .8rem}
.scroll p,.scroll li{color:var(--mist)}
.scroll ul{padding-left:1.3rem;display:grid;gap:.5rem;margin:.8rem 0}
.scroll p+p{margin-top:.9rem}

/* ---------- 404 ---------- */

.adrift{min-height:72vh;display:flex;align-items:center;text-align:left}
.adrift__code{
  font-family:var(--disp);font-weight:700;font-size:clamp(6rem,16vw,11rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--gold);letter-spacing:.02em;
}
.adrift h1{margin:.8rem 0 1rem}
.adrift .lede{margin-bottom:2.2rem}
.adrift__cta{display:flex;flex-wrap:wrap;gap:.9rem}

/* ---------- inline icons (lucide) ---------- */

.lci{display:block;flex:none;width:1.55em;height:1.55em;stroke-width:1.75;color:var(--gold)}
.band .lci{width:1.15em;height:1.15em;color:inherit}
.course__leg .lci{position:absolute;top:2rem;right:1.7rem}

/* ---------- reveals ----------
   The hidden start state is gated on html.mo-on, which an inline head
   script sets only when JS is running and reduced-motion is off. With
   JS disabled, or under reduced motion, .rv never hides in the first
   place — content can never be trapped behind an observer that did not
   fire. site.js still adds .is-in exactly as before. */

.mo-on .rv{opacity:0;transform:translateX(-18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.mo-on .rv--r{transform:translateX(18px)}
.mo-on .rv--u{transform:translateY(18px)}
.mo-on .rv.is-in{opacity:1;transform:none}
.rv[data-lag="1"]{transition-delay:.08s}
.rv[data-lag="2"]{transition-delay:.16s}
.rv[data-lag="3"]{transition-delay:.24s}
.rv[data-lag="4"]{transition-delay:.32s}
.rv[data-lag="5"]{transition-delay:.4s}

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

@media (max-width:1024px){
  .fleet{grid-template-columns:1fr 1fr}
  .fleet__card--flag{grid-column:span 2}
  .waters{grid-template-columns:repeat(2,1fr)}
  .ledger{grid-template-columns:1fr;gap:2.6rem}
  .hold{grid-template-columns:1fr;gap:3rem}
  .prow__sea{width:110vw;right:-10vw;opacity:.7}
}

@media (max-width:768px){
  .mast__links{display:none}
  .deck{padding:4.5rem 0}
  .seam-dn{padding-top:calc(4.5rem + 5vw)}
  .seam-up{padding-top:calc(4.5rem + 5vw)}
  .prow{min-height:0;padding:4.5rem 0 7rem}
  /* Phone: the hero IS the copy column, so the sea was being multiplied
     down to ~5% and the fold read as a flat black rectangle. The vertical
     scrim below already protects the type; the canvas no longer has to be
     starved on top of it. */
  .prow__sea{opacity:.85;-webkit-mask-image:linear-gradient(to top,#000 42%,transparent 96%);mask-image:linear-gradient(to top,#000 42%,transparent 96%)}
  .fleet{grid-template-columns:1fr}
  .fleet__card--flag{grid-column:span 1}
  .course{grid-template-columns:1fr}
  .tally{grid-template-columns:1fr 1fr}
  .waters{grid-template-columns:1fr}
  .waters__cell{min-height:0}
  .keel__grid{grid-template-columns:1fr 1fr}
  .sheet{padding:1.8rem 1.4rem}
  .sheet__row{grid-template-columns:1fr}
  .broadside{padding-bottom:5rem}
}

@media (max-width:480px){
  .keel__grid{grid-template-columns:1fr}
  .tally{grid-template-columns:1fr}
  .btn{width:100%}
  .mast .btn{width:auto}
}

/* ---------- photography — navy duotone plates, gold highlights ----------
   Images are pre-graded to the brand duotone (near-black navy → gold) and
   sit UNDER navy scrim gradients so all foreground text keeps AA contrast.
   Never applied to the hero (.prow) — the canvas scene stays untouched. */

.deck--ph-cranes{ /* Why Corsair — harbor cranes at dusk, image weighted right */
  background:
    linear-gradient(97deg,rgba(11,14,20,.96) 0%,rgba(11,14,20,.9) 40%,rgba(12,16,24,.66) 70%,rgba(13,17,26,.42) 100%),
    linear-gradient(180deg,rgba(11,13,16,.55) 0%,transparent 22%,transparent 78%,rgba(11,13,16,.6) 100%),
    radial-gradient(70% 90% at 12% 0%,rgba(212,164,55,.05) 0%,transparent 55%),
    url("../assets/img/harbor-cranes-dusk.webp") right center/cover no-repeat var(--ink-2);
}

.deck--ph-ocean{ /* Industries — "the waters we work", dark sea texture */
  background:
    linear-gradient(180deg,rgba(11,13,16,.9) 0%,rgba(11,13,16,.68) 45%,rgba(11,13,16,.92) 100%),
    radial-gradient(60% 70% at 82% 8%,rgba(212,164,55,.06) 0%,transparent 60%),
    url("../assets/img/dark-ocean.webp") center/cover no-repeat var(--ink);
}

.broadside--ph{ /* Final CTA — gold-lit container ship, cargo moving at night */
  background:
    linear-gradient(100deg,rgba(12,15,22,.95) 0%,rgba(12,15,22,.86) 44%,rgba(14,18,27,.52) 100%),
    linear-gradient(180deg,rgba(11,13,16,.5) 0%,transparent 30%),
    radial-gradient(70% 110% at 12% 100%,rgba(212,164,55,.1) 0%,transparent 55%),
    url("../assets/img/container-ship-night.webp") center 62%/cover no-repeat #10141c;
}

@media (max-width:768px){ /* heavier, more uniform scrim on small screens */
  .deck--ph-cranes{
    background:
      linear-gradient(180deg,rgba(11,14,20,.93) 0%,rgba(11,14,20,.85) 100%),
      url("../assets/img/harbor-cranes-dusk.webp") center/cover no-repeat var(--ink-2);
  }
  .broadside--ph{
    background:
      linear-gradient(180deg,rgba(12,15,22,.93) 0%,rgba(12,15,22,.82) 100%),
      url("../assets/img/container-ship-night.webp") center 62%/cover no-repeat #10141c;
  }
}

/* ---------- reduced motion: everything stops ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .band__rail{animation:none !important;transform:skewY(2deg)}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   SHIP'S MANIFEST — layout DNA: numbered sections, slim
   left-rail index nav, two-column ledger rows.
   ============================================================ */

/* section numbers riding the kickers */
.kicker__no{
  font-variant-numeric:tabular-nums;color:var(--bone);
  padding-right:.7rem;margin-right:.1rem;border-right:1px solid var(--hair);
  font-weight:700;
}

/* slim left-rail index — desktop only, fixed to the port side */
.railnav{
  position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:50;
  display:none;flex-direction:column;gap:.35rem;
}
.railnav a{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--disp);font-size:.68rem;font-weight:500;letter-spacing:.14em;
  color:#5d6470;padding:.28rem .3rem;transition:color .25s;
  font-variant-numeric:tabular-nums;
}
.railnav a::before{
  content:"";width:14px;height:1px;background:currentColor;flex:none;
  transition:width .3s var(--ease),background .3s;
}
.railnav a .railnav__lbl{
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  text-transform:uppercase;letter-spacing:.18em;
  transition:max-width .35s var(--ease),opacity .3s;
}
.railnav a:hover{color:var(--mist)}
.railnav a.is-here{color:var(--gold)}
.railnav a.is-here::before{width:24px;background:var(--gold)}
.railnav a.is-here .railnav__lbl,.railnav a:hover .railnav__lbl{max-width:140px;opacity:1;margin-left:.15rem}
@media (min-width:1360px){.railnav{display:flex}}

/* two-column ledger rows — the manifest body */
.mrows{border-top:1px solid var(--hair)}
.mrow{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:1rem 3rem;align-items:start;
  padding:2rem 0 2.1rem;border-bottom:1px solid var(--hair-soft);
  position:relative;
}
.mrow::before{
  content:attr(data-no);position:absolute;top:2.15rem;left:-3.6rem;
  font-family:var(--disp);font-weight:700;font-size:1.05rem;letter-spacing:.04em;
  color:transparent;-webkit-text-stroke:1px rgba(212,164,55,.55);
  font-variant-numeric:tabular-nums;
}
.mrow__head{display:flex;align-items:flex-start;gap:.9rem}
.mrow__head .lci{margin-top:.15rem}
.mrow__head h3{font-size:1.18rem}
.mrow__fig{
  display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;margin-top:.55rem;
  font-family:var(--disp);font-size:.85rem;letter-spacing:.04em;color:var(--gold-hot);
}
.mrow__fig b{color:var(--bone);font-weight:700;font-variant-numeric:tabular-nums}
.mrow__body p{color:var(--mist);font-size:.97rem;max-width:52ch}
.mrow__body .fleet__go{display:inline-block;margin-top:.7rem}
.mrow:hover{background:linear-gradient(90deg,rgba(212,164,55,.04),transparent 65%)}
.mrow:hover::before{-webkit-text-stroke-color:var(--gold)}

/* compact manifest lines — industries: term, dot leader, entry */
.mlines{display:grid;grid-template-columns:1fr 1fr;gap:0 4rem;border-top:1px solid var(--hair)}
.mline{
  display:flex;align-items:baseline;gap:1rem;
  padding:1.25rem 0;border-bottom:1px solid var(--hair-soft);
}
.mline .lci{align-self:center;width:1.35em;height:1.35em}
.mline h3{font-size:1rem;white-space:nowrap}
.mline::after{content:none}
.mline__dots{flex:1;border-bottom:1px dotted rgba(212,164,55,.35);transform:translateY(-4px);min-width:2rem}
.mline p{color:var(--mist);font-size:.85rem;line-height:1.5;max-width:24ch;text-align:right}

@media (max-width:1300px){.mrow::before{position:static;display:block;margin-bottom:.6rem}}
@media (max-width:900px){
  .mrow{grid-template-columns:1fr;gap:.8rem;padding:1.7rem 0}
  .mlines{grid-template-columns:1fr;gap:0}
  .mline p{max-width:none}
}
@media (max-width:560px){
  .mline{flex-wrap:wrap;gap:.35rem .8rem}
  /* The dot leader stays. `p` wraps to its own line below, so the leader
     simply runs out from the heading to the end of the first line — the
     signature scroll moment survives on phones instead of vanishing. */
  .mline__dots{min-width:1.5rem;transform:translateY(-3px)}
  .mline p{flex-basis:100%;text-align:left}
}

/* ============================================================
   THE APPLICATION DESK — five steps, one sheet
   ============================================================ */

.desk{max-width:760px;margin-inline:auto}
.desk__head{margin-bottom:2.6rem}
.desk__head h1{font-size:clamp(2.3rem,4.4vw,3.4rem);margin:1.1rem 0 1rem}

.gauge{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:.7rem}
.gauge__label{font-family:var(--disp);font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.gauge__count{font-family:var(--disp);font-size:.74rem;letter-spacing:.12em;color:#6d7480;font-variant-numeric:tabular-nums}
.gauge__bar{height:2px;background:var(--hair-soft);margin-bottom:2.6rem;position:relative}
.gauge__bar i{
  position:absolute;inset:0 auto 0 0;width:20%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-hot));
  box-shadow:0 0 14px rgba(232,188,85,.5);
  transition:width .5s var(--ease);
}

.step{border:0}
.step[hidden]{display:none}
.step__title{font-size:1.6rem;margin-bottom:.4rem;outline:none}
.step__sub{color:var(--mist);font-size:.92rem;margin-bottom:1.9rem}
.opt{text-transform:none;letter-spacing:0;color:#6d7480}

.check{display:flex;align-items:center;gap:.65rem;color:var(--mist);font-size:.92rem;cursor:pointer;margin:-.4rem 0 1.3rem}
.check input{width:16px;height:16px;accent-color:var(--gold);flex:none}

.sheet__row--three{grid-template-columns:1fr 1fr 1fr}

.seg{display:flex;border:1px solid rgba(236,231,219,.16)}
.seg label{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:.68rem .5rem;cursor:pointer;color:var(--mist);
  font-family:var(--disp);font-size:.9rem;font-weight:500;letter-spacing:.05em;
  transition:background .2s,color .2s;position:relative;
}
.seg label+label{border-left:1px solid rgba(236,231,219,.16)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){background:var(--gold);color:#0a0b0e}
.seg label:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.field.is-bad .seg,.field.is-bad .dz,.field.is-bad .sig{border-color:var(--err)}

.dz{
  border:1px dashed rgba(212,164,55,.4);background:rgba(212,164,55,.03);
  padding:1.5rem 1.2rem;text-align:center;color:var(--mist);font-size:.92rem;
  cursor:pointer;transition:border-color .2s,background .2s;
}
.dz:hover,.dz.is-over{border-color:var(--gold);background:rgba(212,164,55,.07)}
.dz strong{display:block;color:var(--bone);font-family:var(--disp);font-weight:500;font-size:.98rem;margin-bottom:.2rem}
.dz input{display:none}
.dz__browse{color:var(--gold-hot);text-decoration:underline;text-underline-offset:3px}
.chips{list-style:none;display:grid;gap:.5rem;margin-top:.7rem}
.chips li{
  display:flex;align-items:center;gap:.8rem;padding:.5rem .8rem;
  background:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-soft);font-size:.86rem;
}
.chips li b{font-weight:500;color:var(--bone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}
.chips li span{color:#6d7480;font-variant-numeric:tabular-nums;flex:none;margin-left:auto}
.chips button{
  flex:none;background:none;border:0;color:var(--mist);font-size:1.1rem;line-height:1;
  cursor:pointer;padding:.1rem .3rem;
}
.chips button:hover{color:var(--err)}

.sig{position:relative;border:1px solid rgba(212,164,55,.4);background:#f2ede1}
.sig canvas{width:100%;height:190px;touch-action:none;cursor:crosshair}
.sig__hint{
  position:absolute;left:0;right:0;bottom:.9rem;text-align:center;color:#8b8574;
  font-family:var(--disp);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  pointer-events:none;transition:opacity .3s;
}
.sig__clear{
  position:absolute;top:.6rem;right:.6rem;background:none;border:1px solid rgba(28,34,49,.3);
  color:#5c5647;font-family:var(--disp);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .7rem;cursor:pointer;transition:color .2s,border-color .2s;
}
.sig__clear:hover{color:#1c2231;border-color:rgba(28,34,49,.6)}

.readback{box-shadow:inset 0 0 0 1px var(--hair);padding:1.5rem 1.6rem;margin-bottom:1.6rem;background:var(--ink)}
.readback h3{font-size:1.15rem;margin-bottom:1rem}
.readback dl{display:grid;grid-template-columns:auto 1fr;gap:.42rem 1.6rem;font-size:.9rem}
.readback dt{color:#6d7480;white-space:nowrap}
.readback dd{color:var(--bone);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.consent{color:var(--mist);font-size:.92rem;border-left:2px solid var(--gold);padding-left:1.1rem;margin:1.6rem 0}

.stepnav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2.1rem;padding-top:1.7rem;border-top:1px solid var(--hair-soft)}
.stepnav__back{
  background:none;border:0;color:var(--mist);font-family:var(--disp);font-weight:500;
  font-size:.92rem;letter-spacing:.05em;cursor:pointer;padding:.6rem .4rem;transition:color .2s;
}
.stepnav__back:hover{color:var(--bone)}
.stepnav__back[hidden]{visibility:hidden;display:block}
.stepnav .btn:disabled{opacity:.6;cursor:default;transform:none}

.form-alert{display:none;color:var(--err);font-size:.9rem;margin-top:1rem;line-height:1.5}
.form-alert.is-on{display:block}

@media (max-width:768px){
  .sheet__row--three{grid-template-columns:1fr}
  .readback dl{grid-template-columns:1fr;gap:.12rem}
  .readback dt{margin-top:.55rem}
  .stepnav .btn{width:auto}
}

/* ============================================================
   THE CHART SEA — hero legibility + WebGL fallback
   ============================================================ */

/* Static chart plane behind the canvas. Doubles as the graceful
   fallback: if WebGL is unavailable the canvas hides itself and this
   ruled perspective plane still carries the fold. */
.prow__sea::before{
  content:"";position:absolute;inset:auto 0 -14% 0;height:78%;
  pointer-events:none;opacity:.5;
  transform:perspective(560px) rotateX(74deg);transform-origin:50% 100%;
  background-image:
    repeating-linear-gradient(90deg,rgba(212,164,55,.30) 0 1px,transparent 1px 78px),
    repeating-linear-gradient(0deg,rgba(212,164,55,.24) 0 1px,transparent 1px 64px);
  -webkit-mask-image:linear-gradient(to top,#000 4%,rgba(0,0,0,.35) 46%,transparent 82%);
  mask-image:linear-gradient(to top,#000 4%,rgba(0,0,0,.35) 46%,transparent 82%);
}
.prow__sea canvas{position:relative;z-index:1}

/* Legibility scrim behind the copy column.
   Deliberately a HORIZONTAL gradient, not a radial: a radial leaves the
   right-hand end of the headline and the bottom of the proof list
   under-covered, which measured out at ~1.0 contrast against a bright
   crest. A linear ramp holds the same density down the full height of
   the column and only releases once the copy has ended. The vertical
   mask feathers the top and bottom so it never reads as a slab. */
.prow__inner::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-14vw;right:-30%;top:-4rem;bottom:-3rem;
  background:linear-gradient(90deg,
    rgba(5,8,13,.95) 0%,
    rgba(5,8,13,.93) 58%,
    rgba(5,8,13,.86) 74%,
    rgba(5,8,13,.45) 88%,
    rgba(5,8,13,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 11%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 11%,#000 86%,transparent 100%);
}

@media (max-width:768px){
  .prow__inner::before{
    left:-10vw;right:-10vw;
    background:linear-gradient(180deg,rgba(5,8,13,.90) 0%,rgba(5,8,13,.80) 62%,rgba(5,8,13,.42) 100%);
    -webkit-mask-image:none;mask-image:none;
  }
  .prow__sea::before{opacity:.3}
}

/* ============================================================
   MOTION LAYER — "the manifest rules itself in"
   Every animated start state is scoped to .mo-on. Without JS, or under
   prefers-reduced-motion, none of these selectors match and the page
   renders fully composed and fully visible.
   ============================================================ */

/* --- word-mask type reveal (hero line + closing line) --- */
.mo-on .moWord{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.mo-on .moWordIn{
  display:inline-block;transform:translateY(112%);
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.mo-on .moIn .moWordIn{transform:none}
/* once landed, drop the clip so the .flare glow is not cut off */
.mo-on .moWordsDone .moWord{overflow:visible}

/* --- the signature: hairline rules that draw in left-to-right --- */
.mo-on .moRule{position:relative}
.mo-on .moRule::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  pointer-events:none;
  /* The drawn rule must still land as a RULE. Fading it to zero at the
     right left every ledger row reading half-drawn once the animation
     had finished, which is not the ruled-manifest look the rest of the
     page is built on. It now settles onto a real hairline. */
  background:linear-gradient(90deg,rgba(212,164,55,.62) 0%,rgba(212,164,55,.30) 72%,rgba(212,164,55,.17) 100%);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.1s var(--ease);
  transition-delay:var(--moDelay,0ms);
}
.mo-on .moRule.moIn::after{transform:scaleX(1)}
/* the static borders step aside so the drawn rule is the only line */
.mo-on .mrow,.mo-on .mline,.mo-on .qdeck details{border-bottom-color:transparent}

/* --- dot leaders run out to their entries --- */
.mo-on .moLead{
  -webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0);
  transition:-webkit-clip-path 1.05s var(--ease) .14s,clip-path 1.05s var(--ease) .14s;
}
.mo-on .moLead.moIn{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}

/* --- ruled underline beneath every section head --- */
.mo-on .moUnder{position:relative}
.mo-on .moUnder::after{
  content:"";position:absolute;left:0;bottom:-1.4rem;height:1px;width:min(100%,260px);
  pointer-events:none;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(212,164,55,.06) 100%);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.15s var(--ease) .18s;
}
.mo-on .moUnder.moIn::after{transform:scaleX(1)}

/* --- depth gauge: how deep you are in the run --- */
.moBar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:70;
  pointer-events:none;background:rgba(212,164,55,.07);
}
.moBar i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold) 45%,var(--gold-hot));
  box-shadow:0 0 12px rgba(232,188,85,.35);
  transition:transform .12s linear;
}

/* --- hero depth planes --- */
.mo-on .prow__inner{will-change:transform,opacity}
.mo-on .prow__sea{will-change:transform}

/* --- magnetic controls + instrument tilt --- */
.mo-on .moMag{transition:transform .38s var(--ease),background .22s,color .22s,box-shadow .22s}
.mo-on .moMag:hover{transform:none}
.mo-on .moTilt{transform-style:preserve-3d;will-change:transform}
/* pointer-tracked brass sheen — the card knows where the cursor is */
.mo-on .moTilt::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
    rgba(232,188,85,.13) 0%,rgba(232,188,85,.04) 38%,transparent 66%);
  opacity:0;transition:opacity .38s;
}
.mo-on .moTilt:hover::after{opacity:1}

/* Reduced motion is handled by .mo-on never being set, but belt and
   braces: if the class is somehow present, everything composes. */
@media (prefers-reduced-motion:reduce){
  .moBar{display:none}
  .mo-on .moWordIn{transform:none}
  .mo-on .moWord{overflow:visible}
  .mo-on .moRule::after,.mo-on .moUnder::after{transform:scaleX(1)}
  .mo-on .moLead{-webkit-clip-path:none;clip-path:none}
  .mo-on .prow__inner,.mo-on .prow__sea{transform:none !important;opacity:1 !important}
}

/* ============================================================
   SECURE APPLICATION LINK — trust panel, resume note, consent
   Existing tokens only: --panel, --gold, --hair, --mist, --disp.
   No new fonts, no new colours, no new requests. Every rule here
   only ever paints something that is already in the DOM — nothing
   in this block hides content.
   ============================================================ */

.vouch{
  background:linear-gradient(180deg,rgba(212,164,55,.07) 0%,rgba(212,164,55,0) 100%);
  box-shadow:inset 0 0 0 1px var(--hair);
  border-left:2px solid var(--gold);
  padding:1.15rem 1.35rem 1.2rem;
  margin-bottom:1.1rem;
}
.vouch__head{
  display:flex;align-items:center;gap:.65rem;
  font-family:var(--disp);font-size:.76rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  margin-bottom:.75rem;line-height:1;
}
.vouch__head::before{content:"";width:22px;height:1px;background:var(--gold);flex:none}
.vouch__list{list-style:none;display:grid;gap:.42rem}
.vouch__list li{
  position:relative;padding-left:.95rem;
  color:var(--mist);font-size:.855rem;line-height:1.5;text-wrap:pretty;
}
.vouch__list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:4px;height:1px;background:var(--gold-deep);
}
.vouch__list strong{color:var(--bone);font-weight:600}

/* Resume note — injected by secure-link.js, never present in markup */
.resume{
  display:flex;align-items:flex-start;gap:.8rem;
  background:rgba(212,164,55,.08);
  box-shadow:inset 0 0 0 1px var(--hair);
  padding:.7rem .8rem .7rem .95rem;
  margin-bottom:1.3rem;
}
.resume p{color:var(--mist);font-size:.85rem;line-height:1.45}
.resume__x{
  flex:none;margin-left:auto;background:none;border:0;cursor:pointer;
  color:#6d7480;font-size:1.15rem;line-height:1;padding:.05rem .3rem;
  transition:color .2s;
}
.resume__x:hover{color:var(--gold-hot)}

/* Consent — a .field so it inherits the site's existing error plumbing
   (.field.is-bad -> .field__err), with the uppercase label treatment
   overridden because this is a sentence, not a field name. */
.field--check{margin-bottom:1.15rem}
.field--check .check{
  display:flex;align-items:flex-start;gap:.7rem;margin:0;cursor:pointer;
  font-family:var(--body);font-size:.85rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--mist);line-height:1.5;
}
.field--check .check input{
  width:16px;height:16px;flex:none;margin-top:.2rem;
  accent-color:var(--gold);background:var(--ink);padding:0;
}
.field--check.is-bad .check input{outline:2px solid var(--err);outline-offset:2px}

@media (max-width:768px){
  .vouch{padding:1rem 1.1rem 1.05rem}
}