/* ============================================================
   ORCA WEB3: design system
   orcaweb3.io  |  a division of Orca Agency
   Dark chrome, Orca red signal, chain native accents.
   ============================================================ */

:root{
  color-scheme:dark;

  /* Orca brand */
  --red:#C01F27;
  --red-deep:#9E171C;
  --red-hot:#E8323B;
  --red-text:#FF6B73;   /* small text on dark, meets AA where --red-hot does not */
  --red-wash:rgba(192,31,39,.10);
  --red-line:rgba(192,31,39,.32);
  --red-glow:0 0 0 1px rgba(192,31,39,.35), 0 18px 46px -18px rgba(192,31,39,.55);

  /* Abyss scale. Lifted off pure black so surfaces separate and the page
     reads as deep rather than flat. */
  --abyss:#101522;
  --abyss-2:#161C2C;
  --panel:#1F2637;
  --panel-2:#273044;
  --panel-3:#313B52;

  /* Text */
  --ice:#F3F5F9;
  --ice-2:#D3D9E4;
  --steel:#9BA5B6;
  --steel-2:#8F98AA;
  --steel-3:#868FA2;

  /* Lines */
  --line:rgba(255,255,255,.13);
  --line-2:rgba(255,255,255,.065);
  --line-3:rgba(255,255,255,.22);

  /* Signals */
  --up:#2FD98A;
  --down:#FF5C5C;
  --cyan:#4BA2FF;
  --violet:#836EF9;
  --mint:#50D2C1;

  --font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --maxw:1240px;
  --gut:clamp(20px,5vw,40px);
  --sec-y:clamp(64px,8vw,104px);
  --radius:16px;
  --radius-lg:24px;
  --radius-xl:32px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow:0 2px 4px rgba(0,0,0,.4),0 24px 60px -30px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:104px}
body{
  margin:0;font-family:var(--font);color:var(--ice-2);background:var(--abyss);
  font-size:16.5px;line-height:1.72;font-weight:400;letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0}
p{margin:0 0 1.15rem}
h1,h2,h3,h4,h5{margin:0;font-weight:800;line-height:1.14;letter-spacing:-.028em;color:var(--ice);text-wrap:balance}
h1{font-size:clamp(2.25rem,5.4vw,4.05rem);line-height:1.1;letter-spacing:-.032em}
h2{font-size:clamp(1.8rem,3.7vw,2.8rem);line-height:1.13}
h3{font-size:clamp(1.18rem,2vw,1.52rem);letter-spacing:-.02em;line-height:1.24}
h4{font-size:1.05rem;letter-spacing:-.015em}
strong{color:var(--ice);font-weight:600}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2.5px solid var(--red-hot);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.section{padding:var(--sec-y) 0;position:relative}
.section.tight{padding:clamp(44px,5vw,64px) 0}
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.g2,.g3,.g4,.split{grid-template-columns:1fr}}

/* ---------- ambience ---------- */
.mesh{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.mesh::before,.mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(120px);opacity:.72}
.mesh::before{width:60vw;height:60vw;left:-18vw;top:-24vw;background:radial-gradient(circle,rgba(192,31,39,.5),transparent 68%)}
.mesh::after{width:52vw;height:52vw;right:-16vw;top:6vw;background:radial-gradient(circle,rgba(75,162,255,.3),transparent 68%)}
.gridlines{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%);
}
.rel{position:relative;z-index:1}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:80;background:transparent;border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s}
/* fixed rather than sticky, so it takes no flow space and the hero image
   runs edge to edge behind it instead of starting below it */
.hdr-in{width:100%;padding:0 clamp(18px,3.6vw,56px);height:88px;display:flex;align-items:center;gap:20px;
  transition:height .3s var(--ease)}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;position:relative}
.brand img{height:44px;width:auto;transition:height .3s var(--ease),opacity .3s}
.brand .lg-dark{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none}

/* sticky state: solid white bar, dark type */
.hdr.on{background:#fff;border-bottom-color:rgba(11,12,15,.10);
  box-shadow:0 2px 4px rgba(0,0,0,.04),0 14px 40px -22px rgba(0,0,0,.5)}
.hdr.on .hdr-in{height:74px}
.hdr.on .brand img{height:38px}
.hdr.on .brand .lg-white{opacity:0}
.hdr.on .brand .lg-dark{opacity:1}
.hdr.on .nav a{color:#4A5060}
.hdr.on .nav a:hover,.hdr.on .nav a.here{color:#0B0C0F;background:rgba(11,12,15,.055)}
.hdr.on .burger{border-color:rgba(11,12,15,.16)}
.hdr.on .burger span{background:#0B0C0F}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{padding:10px 15px;font-size:14.6px;font-weight:500;color:var(--ice-2);border-radius:10px;
  transition:color .2s,background .2s}
.nav a:hover,.nav a.here{color:#fff;background:rgba(255,255,255,.09)}
.nav a.btn{margin-left:12px}
/* keep the CTA white on both header states */
.nav a.btn-p,.hdr.on .nav a.btn-p,.nav a.btn-p:hover,.hdr.on .nav a.btn-p:hover{color:#fff;background:linear-gradient(180deg,var(--red-hot),var(--red))}

.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line-3);border-radius:11px;
  background:transparent;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;
  transition:border-color .3s}
.burger span{display:block;width:18px;height:1.9px;background:var(--ice);border-radius:2px;transition:.28s var(--ease)}
.burger.on span:nth-child(1){transform:translateY(5.9px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-5.9px) rotate(-45deg)}
@media(max-width:1000px){
  .burger{display:flex}
  .nav{position:fixed;inset:88px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--abyss-2);border-bottom:1px solid var(--line);padding:14px clamp(18px,5vw,40px) 26px;
    transform:translateY(-14px);opacity:0;pointer-events:none;transition:.3s var(--ease);
    max-height:calc(100vh - 88px);overflow:auto}
  .hdr.on .nav{inset-block-start:74px;background:#fff;border-bottom-color:rgba(11,12,15,.12)}
  .hdr.on .nav a{border-bottom-color:rgba(11,12,15,.08)}
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:15px 4px;font-size:16.4px;border-bottom:1px solid var(--line-2);border-radius:0}
  .nav a.btn{margin:18px 0 0;justify-content:center;border-bottom:0}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:12px;font-size:14.6px;font-weight:600;letter-spacing:-.01em;border:1px solid transparent;cursor:pointer;transition:.24s var(--ease);white-space:nowrap;font-family:var(--font)}
.btn-p{background:linear-gradient(180deg,var(--red-hot),var(--red));color:#fff;box-shadow:0 10px 26px -12px rgba(192,31,39,.85)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(192,31,39,.95)}
.btn-g{border-color:var(--line-3);color:var(--ice);background:rgba(255,255,255,.035)}
.btn-g:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.24);transform:translateY(-2px)}
.btn-t{color:var(--ice);padding-left:0;padding-right:0}
.btn-t:hover{color:var(--red-hot)}
.btn-lg{padding:16px 30px;font-size:15.4px}
.btn-sm{padding:9px 16px;font-size:13.4px}

/* ---------- eyebrow / pills ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.6px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red-text);margin-bottom:18px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--red)}
.eyebrow.plain::before{display:none}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border:1px solid var(--line);border-radius:999px;font-size:12.2px;font-weight:500;color:var(--steel);background:rgba(255,255,255,.03);font-family:var(--mono);letter-spacing:.02em}
.pill.live{color:var(--up);border-color:rgba(47,217,138,.28);background:rgba(47,217,138,.07)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(47,217,138,.16);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- cards ---------- */
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,2.6vw,32px);position:relative;overflow:hidden;transition:.32s var(--ease)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.05),transparent 42%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover{border-color:var(--line-3);transform:translateY(-3px)}
.card:hover::after{opacity:1}
.card h3{margin-bottom:10px}
.card p:last-child{margin-bottom:0}
.card .num{font-family:var(--mono);font-size:12px;color:var(--steel-3);letter-spacing:.1em;margin-bottom:16px;display:block}
.card-link{display:block}
.card-link:hover h3{color:var(--red-hot)}

.stat{display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,2.4vw,28px);background:var(--panel);transition:.3s var(--ease)}
.stat:hover{border-color:var(--line-3);transform:translateY(-2px)}
.stat-top{display:flex;align-items:center;gap:14px;min-width:0}
.stat-top .ico-box{margin-bottom:0;flex-shrink:0}
.stat b{font-family:var(--mono);font-size:clamp(1.45rem,2.3vw,2rem);font-weight:700;
  color:var(--ice);letter-spacing:-.035em;line-height:1.1;text-wrap:balance;min-width:0}
.stat>span{font-size:14px;color:var(--steel);display:block;line-height:1.6}
/* long word values step down so they stay on one or two lines beside the icon */
.stat b{font-size:clamp(1.2rem,2vw,1.7rem)}
.stat-top:has(b:only-child) b{font-size:clamp(1.45rem,2.3vw,2rem)}

/* ---------- chain chips ---------- */
.chains{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:9px;padding:9px 15px 9px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.028);font-size:13.4px;font-weight:500;color:var(--ice-2);transition:.24s var(--ease)}
.chip svg,.chip img{width:19px;height:19px;flex-shrink:0}
.chip:hover{border-color:var(--line-3);background:rgba(255,255,255,.07);transform:translateY(-2px)}
.chip .tick{font-family:var(--mono);font-size:11.4px;color:var(--steel-2);letter-spacing:.04em}

.chain-card{display:flex;flex-direction:column;gap:14px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),var(--abyss-2));transition:.3s var(--ease);position:relative;overflow:hidden}
.chain-card::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--accent,var(--red));opacity:.55;transition:opacity .3s}
.chain-card:hover{transform:translateY(-4px);border-color:var(--line-3)}
.chain-card:hover::before{opacity:1}
.chain-card .head{display:flex;align-items:center;gap:12px}
.chain-card .head svg,.chain-card .head img{width:34px;height:34px}
.chain-card .nm{font-weight:700;color:var(--ice);font-size:16px;letter-spacing:-.02em;line-height:1.2}
.chain-card .tk{font-family:var(--mono);font-size:11.6px;color:var(--steel-2);letter-spacing:.08em;text-transform:uppercase}
.chain-card p{font-size:14.2px;line-height:1.65;margin:0;color:var(--steel)}
.chain-card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.tag{font-family:var(--mono);font-size:10.4px;letter-spacing:.09em;text-transform:uppercase;padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.05);color:var(--steel-2);border:1px solid var(--line-2)}

/* ---------- ticker rail ---------- */
.rail{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:rgba(255,255,255,.015);overflow:hidden;position:relative}
.rail::before,.rail::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.rail::before{left:0;background:linear-gradient(90deg,var(--abyss),transparent)}
.rail::after{right:0;background:linear-gradient(270deg,var(--abyss),transparent)}
.rail-track{display:flex;gap:34px;padding:15px 0;width:max-content;animation:slide 46s linear infinite}
.rail:hover .rail-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.rail-item{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.8px;color:var(--steel);white-space:nowrap}
.rail-item svg,.rail-item img{width:17px;height:17px}
.rail-item b{color:var(--ice);font-weight:600}
.rail-item .up{color:var(--up)}
.rail-item .down{color:var(--down)}
@media(prefers-reduced-motion:reduce){.rail-track{animation:none;width:100%;overflow-x:auto;flex-wrap:nowrap}}

/* ---------- news ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filter{padding:8px 15px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--steel);font-family:var(--mono);font-size:11.6px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.22s var(--ease)}
.filter:hover{color:var(--ice);border-color:var(--line-3)}
.filter.on{background:var(--red);border-color:var(--red);color:#fff}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.news{display:flex;flex-direction:column;gap:11px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),var(--abyss-2));transition:.3s var(--ease);min-height:172px}
.news:hover{transform:translateY(-3px);border-color:var(--line-3)}
.news .meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.6px;letter-spacing:.09em;text-transform:uppercase;color:var(--steel-3)}
.news .cat{padding:3px 8px;border-radius:5px;background:var(--red-wash);color:var(--red-text);border:1px solid var(--red-line)}
.news h4{font-size:15.4px;line-height:1.4;font-weight:600;letter-spacing:-.015em}
.news p{font-size:13.4px;line-height:1.6;color:var(--steel);margin:0}
.news .src{margin-top:auto;font-family:var(--mono);font-size:11px;color:var(--steel-3);display:flex;justify-content:space-between;gap:10px;padding-top:8px;border-top:1px solid var(--line-2)}
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.07),rgba(255,255,255,.03));background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px;color:transparent}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- process ---------- */
.steps{display:grid;gap:0;counter-reset:s}
.step{display:grid;grid-template-columns:64px 1fr;gap:clamp(16px,3vw,32px);padding:28px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .n{font-family:var(--mono);font-size:13.4px;color:var(--red-text);letter-spacing:.1em;padding-top:5px}
.step h3{margin-bottom:8px}
.step p{margin:0;font-size:15px;color:var(--steel)}
@media(max-width:640px){.step{grid-template-columns:1fr;gap:6px}}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-weight:600;color:var(--ice);font-size:16.4px;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:29px;width:11px;height:11px;border-right:1.8px solid var(--steel);border-bottom:1.8px solid var(--steel);transform:rotate(45deg);transition:.28s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg);border-color:var(--red-hot)}
.faq .a{padding:0 44px 24px 0;color:var(--steel);font-size:15px}
.faq .a p:last-child{margin:0}

/* ---------- forms ---------- */
.form{display:grid;gap:15px}
.field{display:grid;gap:7px}
.field label{font-family:var(--mono);font-size:11.4px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);font-weight:500}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--ice);font-family:var(--font);font-size:15px;
  transition:.22s var(--ease);appearance:none;color-scheme:dark
}
/* if the custom dropdown script never runs, the native menu is still legible */
.field select{background-color:#12151D}
.field select option{background-color:#12151D;color:#EEF1F6}
.field select option:disabled,.field select option[value=""]{color:#8F98A8}
.field textarea{min-height:132px;resize:vertical;line-height:1.6}
.field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238F98A8' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 16px center}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);background:rgba(255,255,255,.055);box-shadow:0 0 0 3px rgba(192,31,39,.16)}
.field input::placeholder,.field textarea::placeholder{color:var(--steel-2);opacity:1}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:600px){.form .row{grid-template-columns:1fr}}
.form-note{font-size:12.6px;color:var(--steel-2);line-height:1.6}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* ---------- cta band ---------- */
.cta{border:1px solid var(--red-line);border-radius:var(--radius-xl);padding:clamp(34px,5vw,64px);background:
  radial-gradient(900px circle at 12% 0%,rgba(192,31,39,.20),transparent 58%),
  linear-gradient(180deg,var(--panel-2),var(--abyss-2));position:relative;overflow:hidden}
.cta h2{margin-bottom:14px}
.cta p{max-width:60ch;color:var(--ice-2)}
.cta .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);background:var(--abyss-2);padding:clamp(48px,6vw,72px) 0 0}
.ftr>.wrap{max-width:none;padding:0 clamp(18px,3.6vw,56px)}
.ftr-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(24px,4vw,48px)}
@media(max-width:860px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ftr-grid{grid-template-columns:1fr}}
.ftr h5{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-3);margin-bottom:16px;font-weight:500}
.ftr ul{list-style:none;display:grid;gap:10px}
.ftr ul a{font-size:14.2px;color:var(--steel);transition:color .2s}
.ftr ul a:hover{color:var(--ice)}
.ftr .blurb{font-size:14px;color:var(--steel);max-width:38ch;margin:16px 0 0}
.ftr-bot{margin-top:clamp(36px,5vw,56px);border-top:1px solid var(--line-2);padding:22px 0 30px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:13.2px;font-weight:400;color:var(--steel)}
.ftr-bot a{color:var(--ice-2)}
.ftr-bot a:hover{color:#fff}
.ftr-bot .legal{display:flex;flex-wrap:wrap;gap:18px}
.divisions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.divisions a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border:1px solid var(--line);border-radius:7px;color:var(--steel-2);transition:.22s}
.divisions a:hover{color:var(--ice);border-color:var(--line-3)}

/* ---------- misc ---------- */
.lead{font-size:clamp(1.02rem,1.7vw,1.22rem);line-height:1.7;color:var(--ice-2);max-width:66ch}
.muted{color:var(--steel)}
.mono{font-family:var(--mono)}
.center{text-align:center}
.mx{margin-left:auto;margin-right:auto}
.sec-head{max-width:74ch;margin-bottom:clamp(30px,4vw,48px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{color:var(--steel);margin-top:14px;font-size:16.4px}
.prose{max-width:74ch}
.prose h2{margin:44px 0 14px}
.prose h3{margin:32px 0 10px}
.prose ul,.prose ol{margin:0 0 1.15rem;padding-left:22px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--red-text)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* hero */
.hero{padding:clamp(72px,10vw,132px) 0 clamp(56px,7vw,88px);position:relative;overflow:hidden}
.hero h1 span.hl{background:linear-gradient(100deg,var(--red-hot),#FF7A82 45%,var(--ice));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin:22px 0 0}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero .trust{display:flex;flex-wrap:wrap;gap:26px;margin-top:44px;padding-top:26px;border-top:1px solid var(--line-2)}
.hero .trust div b{display:block;font-family:var(--mono);font-size:1.4rem;color:var(--ice);font-weight:700}
.hero .trust div span{font-size:12.6px;color:var(--steel-2)}

/* page head */
.phead{padding:clamp(56px,7vw,96px) 0 clamp(28px,4vw,44px);position:relative;overflow:hidden;border-bottom:1px solid var(--line-2)}
.crumbs{font-family:var(--mono);font-size:11.4px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-3);margin-bottom:20px}
.crumbs a:hover{color:var(--red-hot)}
.crumbs span{margin:0 8px;color:var(--steel-3)}

/* page head spacing */
.phead .lead{margin:22px 0 0;max-width:64ch}
.phead .pill{margin-top:26px}
.phead h1{max-width:20ch}

/* news fallback notice */
.news-notice{grid-column:1/-1;padding:16px 20px;border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(255,255,255,.025);font-size:13.8px;color:var(--steel);line-height:1.6;margin-bottom:4px}
.news-notice b{color:var(--ice-2)}

/* ============================================================
   HERO IMAGE + OVERLAY
   ============================================================ */
.hero{padding:clamp(150px,15vw,210px) 0 clamp(60px,7vw,96px)}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media img,.hero-media video{transform:scale(1.04);filter:saturate(1.08) contrast(1.06) brightness(1.12)}
.hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(16,21,34,.95) 0%,rgba(16,21,34,.84) 34%,rgba(16,21,34,.44) 62%,rgba(16,21,34,.20) 100%),
  linear-gradient(180deg,rgba(16,21,34,.80) 0%,rgba(16,21,34,.22) 36%,rgba(16,21,34,.52) 78%,var(--abyss) 100%),
  radial-gradient(1100px circle at 6% 24%,rgba(192,31,39,.34),transparent 62%)}
@media(max-width:860px){
  .hero-media::after{background:
    linear-gradient(180deg,rgba(16,21,34,.92) 0%,rgba(16,21,34,.72) 40%,rgba(16,21,34,.86) 78%,var(--abyss) 100%),
    radial-gradient(900px circle at 20% 16%,rgba(192,31,39,.36),transparent 64%)}
  .hero-media img{object-position:center}
}
.hero .wrap{max-width:var(--maxw)}
.hero h1{text-shadow:0 2px 30px rgba(0,0,0,.6)}
.hero .lead{text-shadow:0 1px 18px rgba(0,0,0,.7)}
.hero.no-img{padding-top:clamp(140px,13vw,180px)}

/* page heads sit under the transparent header */
.phead{padding:clamp(140px,13vw,170px) 0 clamp(30px,4vw,48px)}

/* ============================================================
   ICONS
   ============================================================ */
.ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;color:currentColor}
.ico svg{width:100%;height:100%;display:block}
.ico-lg{width:26px;height:26px}

.ico-box{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;
  background:var(--red-wash);border:1px solid var(--red-line);color:var(--red-text);margin-bottom:18px;
  transition:.3s var(--ease)}
.ico-box .ico{width:23px;height:23px}
.card:hover .ico-box{background:rgba(192,31,39,.18);border-color:rgba(192,31,39,.5);transform:translateY(-2px)}
.ico-box.neutral{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--ice-2)}
.ico-box.up{background:rgba(47,217,138,.09);border-color:rgba(47,217,138,.28);color:var(--up)}
.ico-box.warn{background:rgba(255,92,92,.09);border-color:rgba(255,92,92,.28);color:var(--down)}
.ico-box.sm{width:38px;height:38px;border-radius:11px;margin-bottom:14px}
.ico-box.sm .ico{width:19px;height:19px}

.card .num{display:flex;align-items:center;gap:9px}
.card .num .ico{width:15px;height:15px;color:var(--red-text)}

.eyebrow .ico{width:15px;height:15px}
.step .n{display:flex;align-items:center;gap:8px}
.stat .ico-box{margin-bottom:0}

.ilist{list-style:none;display:grid;gap:13px;margin:0;padding:0}
.ilist li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.62;color:var(--steel)}
.ilist li b{color:var(--ice);font-weight:600}
.ilist .ico{margin-top:3px;color:var(--red-text)}
.ilist.up .ico{color:var(--up)}
.ilist.warn .ico{color:var(--down)}
.ilist.neutral .ico{color:var(--steel-2)}
.faq summary{display:flex;align-items:flex-start;gap:12px}
.faq summary .ico{width:18px;height:18px;margin-top:4px;color:var(--red-text);flex-shrink:0}
.btn .ico{width:17px;height:17px}
.ftr h5{display:flex;align-items:center;gap:8px}
.ftr h5 .ico{width:14px;height:14px;color:var(--steel-2)}

/* ============================================================
   CHAIN PAGES: market and tokenomics panel
   ============================================================ */
.mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1000px){.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.mgrid{grid-template-columns:1fr}}
.mtile{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));display:flex;flex-direction:column;gap:6px}
.mtile .ml{font-family:var(--mono);font-size:10.6px;letter-spacing:.13em;text-transform:uppercase;color:var(--steel-3)}
.mtile .mv{font-family:var(--mono);font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:700;color:var(--ice);
  letter-spacing:-.02em;line-height:1.15}
.mtile .mv.up{color:var(--up)}
.mtile .mv.down{color:var(--down)}
.mtile .mv .na{font-size:.86rem;font-weight:500;color:var(--steel-2);letter-spacing:0}
.mtile .ms{font-size:12.2px;color:var(--steel-2);line-height:1.5}
.mread{margin-top:18px;border:1px solid var(--line);border-left:2px solid var(--red);border-radius:var(--radius);
  padding:22px 24px;background:rgba(255,255,255,.022)}
.mread-h{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.4px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--red-text);margin-bottom:14px}
.mread p{font-size:14.6px;line-height:1.68;color:var(--steel);margin:0 0 12px}
.mread p:last-child{margin:0}
.msrc{margin:16px 0 0;font-size:12.2px;color:var(--steel-3);line-height:1.6}
.mnotice{border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;
  background:rgba(255,255,255,.022);font-size:14.8px;line-height:1.68;color:var(--steel)}
.mnotice b{color:var(--ice)}
.mnotice.warn{border-color:rgba(255,92,92,.3);background:rgba(255,92,92,.05)}

/* chain page hero */
.chero{position:relative;overflow:hidden;padding:clamp(140px,13vw,170px) 0 clamp(34px,4vw,54px);
  border-bottom:1px solid var(--line-2)}
.chero .cmark{width:78px;height:78px;display:block;margin-bottom:26px;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.chero .ctick{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel-2);margin-bottom:18px}
.chero .ctick .sw{width:9px;height:9px;border-radius:2px;background:var(--accent,var(--red))}
.chero h1{max-width:19ch}
.chain-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chain-nav a{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--line);
  border-radius:10px;font-size:13px;color:var(--steel);transition:.22s var(--ease);background:rgba(255,255,255,.025)}
.chain-nav a:hover{color:var(--ice);border-color:var(--line-3);transform:translateY(-2px)}
.chain-nav a .ico{width:16px;height:16px}
.chain-nav a img,.chain-nav a svg{width:16px;height:16px}

/* chain index grid link state */
.chain-card.linked{cursor:pointer}
.chain-card .go{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.6px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--steel-3);margin-top:2px;transition:color .2s}
.chain-card:hover .go{color:var(--red-text)}
.chero .lead{margin:22px 0 0;max-width:64ch}
.chero .crumbs{margin-bottom:22px}

/* ============================================================
   CUSTOM DARK DROPDOWN
   Replaces the native select popup, which the OS draws light.
   ============================================================ */
.osel{position:relative}
.osel-native{position:absolute!important;opacity:0;pointer-events:none;width:1px;height:1px;
  clip:rect(0,0,0,0);overflow:hidden}
.osel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--ice);font-family:var(--font);font-size:15px;font-weight:400;text-align:left;cursor:pointer;
  transition:.2s var(--ease);line-height:1.4}
.osel-btn:hover{border-color:var(--line-3);background:rgba(255,255,255,.05)}
.osel-btn.is-placeholder .osel-val{color:var(--steel-2)}
.osel-btn:focus-visible{outline:none;border-color:var(--red);background:rgba(255,255,255,.055);
  box-shadow:0 0 0 3px rgba(192,31,39,.16)}
.osel.open .osel-btn{border-color:var(--red);background:rgba(255,255,255,.055);
  box-shadow:0 0 0 3px rgba(192,31,39,.16)}
.osel-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.osel-chev{width:12px;height:8px;flex-shrink:0;color:var(--steel);transition:transform .25s var(--ease)}
.osel.open .osel-chev{transform:rotate(180deg);color:var(--red-hot)}

.osel-list{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:60;max-height:270px;overflow-y:auto;
  background:#212838;border:1px solid var(--line-3);border-radius:13px;padding:6px;
  box-shadow:0 4px 10px rgba(0,0,0,.5),0 26px 60px -20px rgba(0,0,0,.95);
  animation:oselIn .16s var(--ease-out)}
.osel.up .osel-list{top:auto;bottom:calc(100% + 7px)}
@keyframes oselIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.osel-list::-webkit-scrollbar{width:9px}
.osel-list::-webkit-scrollbar-track{background:transparent}
.osel-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:9px;
  border:3px solid #212838}
.osel-list{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}

.osel-opt{padding:11px 13px;border-radius:9px;font-size:14.6px;line-height:1.4;color:var(--ice-2);
  cursor:pointer;transition:background .12s,color .12s;user-select:none}
.osel-opt.placeholder{color:var(--steel-2)}
.osel-opt.active{background:rgba(255,255,255,.08);color:#fff}
.osel-opt.on{color:#fff;font-weight:600;background:var(--red-wash);box-shadow:inset 2px 0 0 var(--red)}
.osel-opt.on.active{background:rgba(192,31,39,.22)}
@media(prefers-reduced-motion:reduce){.osel-list{animation:none}}

/* form legibility pass */
.field input,.field textarea,.osel-btn{-webkit-text-fill-color:currentColor}
.form-note a{color:var(--ice-2);border-bottom:1px solid var(--line-3)}
.form-note a:hover{color:#fff;border-bottom-color:var(--red)}

/* ============================================================
   HERO VIDEO
   Poster paints first. The loop fades in over it once decoded,
   and never downloads at all on small screens, reduced motion,
   metered connections or when the tab is hidden.
   ============================================================ */
.hero-media .hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center right}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;
  opacity:0;transition:opacity .9s var(--ease-out);will-change:opacity;pointer-events:none;
  background:var(--abyss)}
.hero-vid.on{opacity:1}
@media(max-width:900px){.hero-vid{display:none}}
@media(prefers-reduced-motion:reduce){.hero-vid{display:none}}

/* headline: give the second sentence room to land */
.hero h1 .hl,.chero h1 .hl{display:inline-block;margin-top:.16em}
.hero h1{max-width:none}
.hero h1 br{display:block}
.hero .lead{margin-top:26px}

/* section rhythm: alternating bands now read as distinct surfaces */
.section[style*="--abyss-2"]{background:var(--abyss-2)!important}

/* Depth: the page is no longer one flat value. A soft vertical wash plus a
   faint top light on each band stops large dark areas reading as dead space. */
body{background:
  radial-gradient(1400px 700px at 80% -5%,rgba(75,162,255,.07),transparent 62%),
  radial-gradient(1100px 600px at 5% 12%,rgba(192,31,39,.06),transparent 60%),
  var(--abyss);
  background-attachment:fixed}
.section{position:relative}
.card,.chain-card,.news,.mtile,.stat{box-shadow:0 1px 0 rgba(255,255,255,.045) inset,0 18px 40px -28px rgba(0,0,0,.9)}
.card:hover,.chain-card:hover,.news:hover{box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 26px 54px -26px rgba(0,0,0,.95)}

/* ============================================================
   GRAPHIC BLOCKS
   Bigger visual moves so the page is scanned, not read.
   ============================================================ */

/* oversized ghost numerals */
.bigcard{position:relative;overflow:hidden;padding:clamp(26px,3vw,38px);border:1px solid var(--line);
  border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--panel),var(--panel-2));
  transition:.32s var(--ease);display:block;min-height:230px}
.bigcard:hover{transform:translateY(-4px);border-color:var(--red-line)}
.bigcard .gnum{position:absolute;right:-.06em;bottom:-.34em;font-family:var(--mono);font-weight:700;
  font-size:clamp(7rem,11vw,11rem);line-height:1;color:rgba(255,255,255,.045);pointer-events:none;
  transition:color .32s var(--ease)}
.bigcard:hover .gnum{color:rgba(232,50,59,.14)}
.bigcard .ico-box{margin-bottom:22px}
.bigcard h3{font-size:clamp(1.3rem,2.1vw,1.7rem);margin-bottom:10px;position:relative}
.bigcard p{position:relative;margin:0;font-size:15.4px;color:var(--steel);max-width:34ch}
.bigcard .kicker{position:relative;display:block;font-family:var(--mono);font-size:10.8px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red-text);margin-bottom:14px}

/* visual timeline */
.rail-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;position:relative;margin-top:14px}
.rail-steps::before{content:"";position:absolute;left:0;right:0;top:23px;height:2px;
  background:linear-gradient(90deg,var(--red) 0%,rgba(232,50,59,.35) 55%,var(--line) 100%)}
.rstep{position:relative;padding:0 14px 0 0}
.rstep .dot{width:46px;height:46px;border-radius:50%;background:var(--abyss);border:2px solid var(--red);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:700;
  color:var(--red-text);position:relative;z-index:2;margin-bottom:18px}
.rstep:nth-child(n+4) .dot{border-color:var(--line-3);color:var(--steel)}
.rstep h4{font-size:15.4px;margin-bottom:6px;letter-spacing:-.015em}
.rstep p{font-size:13.6px;line-height:1.55;color:var(--steel);margin:0}
@media(max-width:900px){
  .rail-steps{grid-template-columns:1fr 1fr;gap:26px 16px}
  .rail-steps::before{display:none}
  .rstep .dot{margin-bottom:12px;width:40px;height:40px}
}
@media(max-width:520px){.rail-steps{grid-template-columns:1fr}}

/* headline stat band */
.statband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(180deg,var(--panel),var(--panel-2))}
.statband div{padding:clamp(24px,3vw,38px);border-right:1px solid var(--line-2);position:relative}
.statband div:last-child{border-right:0}
.statband b{display:block;font-family:var(--mono);font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:700;
  color:var(--ice);line-height:1;letter-spacing:-.035em;margin-bottom:10px;white-space:nowrap}
.statband b .u{font-size:.46em;color:var(--red-text);margin-left:.06em;letter-spacing:0;vertical-align:.32em}
.statband span{font-size:13.6px;color:var(--steel);line-height:1.5;display:block}
@media(max-width:860px){.statband{grid-template-columns:1fr 1fr}.statband div:nth-child(2){border-right:0}
  .statband div:nth-child(-n+2){border-bottom:1px solid var(--line-2)}}
@media(max-width:440px){.statband{grid-template-columns:1fr}.statband div{border-right:0;border-bottom:1px solid var(--line-2)}}

/* yes / no split */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.vs{grid-template-columns:1fr}}
.vs>div{border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,2.8vw,32px);
  background:linear-gradient(180deg,var(--panel),var(--panel-2))}
.vs .yes{border-color:rgba(47,217,138,.26)}
.vs .no{border-color:rgba(255,92,92,.26)}
.vs h3{font-size:1.18rem;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.vslist{list-style:none;display:grid;gap:11px;margin:0;padding:0}
.vslist li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ice-2)}
.vslist .ico{width:18px;height:18px;margin-top:2px;flex-shrink:0}
.vs .yes .ico{color:var(--up)}
.vs .no .ico{color:var(--down)}

/* tight capability tiles */
.captiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:940px){.captiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.captiles{grid-template-columns:1fr}}
.captile{display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);transition:.26s var(--ease)}
.captile:hover{background:var(--panel-2);border-color:var(--red-line);transform:translateX(3px)}
.captile .ico-box{margin-bottom:0;flex-shrink:0}
.captile b{display:block;color:var(--ice);font-size:15.6px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.captile span{display:block;font-size:13.4px;color:var(--steel);margin-top:3px;line-height:1.45}
.captile .arw{margin-left:auto;color:var(--steel-3);transition:.26s var(--ease);flex-shrink:0}
.captile:hover .arw{color:var(--red-text);transform:translateX(3px)}

/* who-for row */
.whorow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:860px){.whorow{grid-template-columns:1fr}}
.who{padding:clamp(24px,2.8vw,32px);border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--panel),var(--panel-2));transition:.3s var(--ease)}
.who:hover{transform:translateY(-3px);border-color:var(--line-3)}
.who h3{font-size:1.2rem;margin-bottom:8px}
.who>p{font-size:14.6px;color:var(--steel);margin:0 0 16px}
.who .tags{display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:600px){.bigcard .gnum{font-size:7rem;color:rgba(255,255,255,.03);right:-.1em}}

/* ============================================================
   HEADER: CAPABILITIES DROPDOWN
   ============================================================ */
.navdrop{position:relative}
.navdrop-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border:0;border-radius:10px;
  background:transparent;font-family:var(--font);font-size:14.6px;font-weight:500;color:var(--ice-2);
  cursor:pointer;transition:color .2s,background .2s;line-height:1.4}
.navdrop-btn:hover,.navdrop.open .navdrop-btn,.navdrop.here .navdrop-btn{color:#fff;background:rgba(255,255,255,.09)}
.hdr.on .navdrop-btn{color:#4A5060}
.hdr.on .navdrop-btn:hover,.hdr.on .navdrop.open .navdrop-btn,.hdr.on .navdrop.here .navdrop-btn{color:#0B0C0F;background:rgba(11,12,15,.055)}
.navdrop-chev{width:11px;height:7px;transition:transform .26s var(--ease);opacity:.75}
.navdrop.open .navdrop-chev{transform:rotate(180deg)}

.navdrop-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);
  width:min(720px,calc(100vw - 40px));background:#1A2130;border:1px solid var(--line-3);border-radius:18px;
  padding:14px;box-shadow:0 6px 14px rgba(0,0,0,.4),0 40px 80px -28px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;pointer-events:none;z-index:90;
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s}
.navdrop.open .navdrop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s}
.navdrop-menu::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}

.navdrop-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.navdrop-grid a{display:flex;align-items:flex-start;gap:13px;padding:13px 14px;border-radius:12px;
  transition:background .18s;color:var(--ice-2)}
.navdrop-grid a:hover{background:rgba(255,255,255,.06)}
.navdrop-grid .ico-box{margin-bottom:0;flex-shrink:0}
.navdrop-grid b{display:block;color:var(--ice);font-size:14.8px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.navdrop-grid b+span{display:block;font-size:12.8px;color:var(--steel);margin-top:3px;line-height:1.45}
.navdrop-all{display:flex;align-items:center;gap:10px;margin-top:10px;padding:13px 14px;border-radius:12px;
  border-top:1px solid var(--line-2);font-family:var(--mono);font-size:11.6px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red-text);transition:background .18s}
.navdrop-all:hover{background:var(--red-wash)}
.navdrop-all .ico{width:15px;height:15px}

/* inside the mobile drawer it becomes an accordion */
@media(max-width:1000px){
  .navdrop{width:100%}
  .navdrop-btn{width:100%;justify-content:space-between;padding:15px 4px;font-size:16.4px;border-radius:0;
    border-bottom:1px solid var(--line-2)}
  .navdrop-btn:hover,.navdrop.open .navdrop-btn,.navdrop.here .navdrop-btn{background:transparent}
  .hdr.on .navdrop-btn{border-bottom-color:rgba(11,12,15,.08)}
  .navdrop-menu{position:static;transform:none;width:100%;background:transparent;border:0;box-shadow:none;
    padding:0;opacity:1;visibility:hidden;pointer-events:none;transition:none;height:0;overflow:hidden}
  .navdrop.open .navdrop-menu{visibility:visible;pointer-events:auto;transform:none;height:auto;
    overflow:visible;padding:6px 0 12px}
  .navdrop-grid{grid-template-columns:1fr;gap:0}
  .navdrop-grid a{padding:12px 6px}
  .hdr.on .navdrop-grid b{color:#0B0C0F}
  .hdr.on .navdrop-grid b+span,.hdr.on .navdrop-grid a{color:#4A5060}
  .navdrop-all{margin-top:4px}
}
@media(prefers-reduced-motion:reduce){.navdrop-menu{transition:none}}

/* ============================================================
   PAGE HEAD BACKGROUND + PARALLAX
   Transform based rather than background-attachment: fixed,
   which is janky on mobile and unsupported on iOS Safari.
   ============================================================ */
.phead,.chero{position:relative;overflow:hidden;isolation:isolate}
.phead-media{position:absolute;inset:-14% 0 -14% 0;z-index:0;pointer-events:none;overflow:hidden}
.phead-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  will-change:transform;transform:translate3d(0,0,0)}
/* the overlay: dark enough that headline and body copy stay legible,
   with the Orca red glow reasserted over the top left */
.phead-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(16,21,34,.96) 0%,rgba(16,21,34,.88) 34%,rgba(16,21,34,.62) 66%,rgba(16,21,34,.5) 100%),
  linear-gradient(180deg,rgba(16,21,34,.9) 0%,rgba(16,21,34,.45) 32%,rgba(16,21,34,.72) 74%,var(--abyss) 100%),
  radial-gradient(900px circle at 8% 18%,rgba(192,31,39,.3),transparent 62%)}
@media(max-width:860px){
  .phead-media::after{background:
    linear-gradient(180deg,rgba(16,21,34,.9) 0%,rgba(16,21,34,.78) 30%,rgba(16,21,34,.92) 62%,var(--abyss) 100%),
    radial-gradient(700px circle at 22% 14%,rgba(192,31,39,.26),transparent 64%)}
  .phead-media img{object-position:center}
}
/* the mesh and gridline layers sit above the photo, not instead of it */
.phead .mesh,.chero .mesh{opacity:.5}
.phead .gridlines,.chero .gridlines,.hero .gridlines{z-index:1}
.phead .wrap,.chero .wrap{position:relative;z-index:2}
.phead h1,.chero h1{text-shadow:0 2px 26px rgba(0,0,0,.55)}
.phead .lead,.chero .lead{text-shadow:0 1px 16px rgba(0,0,0,.6)}

/* chain pages tint the photo with the chain's own accent */
.chero .phead-media::after{background:
  linear-gradient(90deg,rgba(16,21,34,.96) 0%,rgba(16,21,34,.88) 34%,rgba(16,21,34,.62) 66%,rgba(16,21,34,.52) 100%),
  linear-gradient(180deg,rgba(16,21,34,.9) 0%,rgba(16,21,34,.45) 32%,rgba(16,21,34,.72) 74%,var(--abyss) 100%),
  radial-gradient(820px circle at 10% 20%,color-mix(in srgb,var(--accent,#C01F27) 34%,transparent),transparent 62%)}
@supports not (background:color-mix(in srgb,red 30%,transparent)){
  .chero .phead-media::after{background:
    linear-gradient(90deg,rgba(16,21,34,.96) 0%,rgba(16,21,34,.88) 34%,rgba(16,21,34,.62) 66%,rgba(16,21,34,.52) 100%),
    linear-gradient(180deg,rgba(16,21,34,.9) 0%,rgba(16,21,34,.45) 32%,rgba(16,21,34,.72) 74%,var(--abyss) 100%),
    radial-gradient(820px circle at 10% 20%,rgba(192,31,39,.3),transparent 62%)}
}

/* home hero parallax uses the same machinery */
.hero-media{will-change:transform}

@media(prefers-reduced-motion:reduce){
  .phead-media img,.hero-media{transform:none!important;will-change:auto}
}

/* counting numbers: reserve the width so the layout does not jump as digits change */
.count{font-variant-numeric:tabular-nums}

/* proudly built in the USA */
.usa{display:inline-flex;align-items:center;gap:8px;margin-left:14px;padding-left:14px;
  border-left:1px solid var(--line);font-size:12.6px;color:var(--steel);white-space:nowrap}
.usa-flag{width:19px;height:13px;border-radius:2px;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.16)}
@media(max-width:620px){.usa{margin-left:0;padding-left:0;border-left:0;display:flex;margin-top:10px}}