/* ------------------------------------------------------------------
     Palette. Two grounds, two accents, and the accents mean something.
     Amber   = levels, money, the thing you should look at.
     Oxblood = warning, limit, the things we will not do.
     Neve rule: hue is function, never decoration.
  ------------------------------------------------------------------ */
  :root{
    --petrol:#0E2A33;
    --petrol-d:#081F26;
    --cream:#EFE6D4;
    --bone:#E2D8C2;
    --metal:#B8B2A6;
    --metal-d:#8A857B;
    --amber:#F5A623;
    --ox:#5C1A1B;
    --rule-l:rgba(14,42,51,.16);
    --rule-d:rgba(239,230,212,.15);
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);background:var(--cream);color:var(--petrol);
    font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}

  /* One texture only, and it is paper, not an idea. */
  body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.4;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");}

  .wrap{max-width:1100px;margin:0 auto;padding:0 28px}
  h1,h2,h3,.wordmark{font-weight:800;letter-spacing:-0.025em;line-height:1.03}

  nav{position:sticky;top:0;z-index:50;background:var(--petrol);border-bottom:1px solid var(--rule-d)}
  .nav-inner{display:flex;justify-content:space-between;align-items:center;height:66px;gap:20px}
  .wordmark{color:var(--cream);text-decoration:none;font-size:20px;display:flex;align-items:center;gap:10px}
  /* The mark is one file, assets/mark.svg. Change it there and every page follows. */
  .mark{width:24px;height:24px;flex-shrink:0;display:block}
  .mark-foot{width:34px;height:34px;opacity:.62;margin-bottom:14px}
  .wordmark small{font-family:var(--mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
    color:var(--metal);font-weight:400;margin-left:9px}
  .nav-links{display:flex;gap:30px;align-items:center}
  .nav-links a{color:var(--metal);text-decoration:none;font-family:var(--mono);font-size:11px;
    letter-spacing:.16em;text-transform:uppercase}
  .nav-links a:hover{color:var(--amber)}
  /* Off-page destinations read as panel switches, not anchors. */
  .nav-links a.keep{color:var(--cream);box-shadow:inset 0 0 0 1px var(--metal-d);padding:7px 12px}
  .nav-links a.keep:hover{color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
  /* .nav-links a beats .btn on specificity, so restate the CTA properties. */
  .nav-links a.btn{color:var(--petrol);font-size:11.5px;letter-spacing:.14em;font-weight:700}
  .nav-links a.btn:hover{color:var(--petrol);background:#FFB945}
  .btn{display:inline-block;background:var(--amber);color:var(--petrol);padding:12px 22px;
    text-decoration:none;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;border:none;cursor:pointer;transition:background .14s}
  .btn:hover{background:#FFB945}
  .btn-lg{padding:17px 30px;font-size:12.5px}
  .btn-out{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px var(--metal-d)}
  .btn-out:hover{background:rgba(239,230,212,.06);box-shadow:inset 0 0 0 1px var(--metal)}

  header{background:var(--petrol);color:var(--cream);padding:112px 0 96px}
  .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--amber);margin-bottom:30px}
  h1{font-size:clamp(42px,7vw,84px);max-width:12ch;color:var(--cream)}
  h1 em{font-style:normal;color:var(--amber)}
  .sub{font-size:19px;color:var(--metal);max-width:54ch;margin:30px 0 40px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}

  /* Chassis legend. Set once, like a panel sticker. */
  .legend{background:var(--petrol-d);color:var(--metal);padding:15px 0;text-align:center;
    font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    border-top:1px solid var(--rule-d)}
  .legend b{color:var(--amber);font-weight:400}

  section{padding:88px 0}
  section.dark{background:var(--petrol);color:var(--cream)}
  section.bone{background:var(--bone)}
  .track{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
  .track .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--amber);font-weight:700}
  .track .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--metal-d)}
  section.dark .track .t{color:var(--metal)}
  h2{font-size:clamp(28px,4.4vw,46px);margin-bottom:20px;max-width:19ch}
  section.dark h2{color:var(--cream)}
  .lede{font-size:17px;color:rgba(14,42,51,.74);max-width:66ch;margin-bottom:48px}
  section.dark .lede{color:var(--metal)}

  /* ---------- SPEC BLOCK -------------------------------------------
     Straight from 1970s hi-fi print. Values right aligned, units set
     once in the column head, hairline rules, small type.
     Looks like evidence because it is.
  ------------------------------------------------------------------ */
  .spec{border-top:2px solid var(--petrol);width:100%;border-collapse:collapse;margin:10px 0 0}
  section.dark .spec{border-top-color:var(--amber)}
  .spec caption{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--metal-d);padding-bottom:11px}
  section.dark .spec caption{color:var(--metal)}
  .spec th{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--metal-d);font-weight:400;text-align:left;padding:9px 14px 9px 0;
    border-bottom:1px solid var(--rule-l)}
  section.dark .spec th{color:var(--metal);border-bottom-color:var(--rule-d)}
  .spec th.r,.spec td.r{text-align:right;padding-right:0}
  .spec td{padding:13px 14px 13px 0;border-bottom:1px solid var(--rule-l);font-size:14.5px;vertical-align:top}
  section.dark .spec td{border-bottom-color:var(--rule-d)}
  .spec td.k{font-weight:600}
  .spec td.v{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
  .spec td.note{color:rgba(14,42,51,.6);font-size:13.5px}
  section.dark .spec td.note{color:var(--metal)}
  .spec tr:last-child td{border-bottom:none}
  .spec .hot{color:var(--ox);font-weight:700}
  section.dark .spec .hot{color:var(--amber)}

  /* ---------- CHANNEL STRIPS ---------------------------------------
     Studer meter bridge: identical units in a row. Repetition is the
     idea. No shadows, no rounding, hairline separation only.
  ------------------------------------------------------------------ */
  .strips{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--rule-l)}
  section.dark .strips{background:var(--rule-d)}
  .strip{background:var(--cream);padding:32px 28px 34px;display:flex;flex-direction:column}
  section.bone .strip{background:var(--bone)}
  section.dark .strip{background:var(--petrol)}
  .strip .cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--amber);margin-bottom:22px;padding-bottom:9px;border-bottom:1px solid var(--rule-l)}
  section.dark .strip .cap{border-bottom-color:var(--rule-d)}
  .strip h3{font-size:23px;margin-bottom:8px}
  section.dark .strip h3{color:var(--cream)}
  .strip .sup{font-family:var(--mono);font-size:11px;color:var(--metal-d);letter-spacing:.04em;margin-bottom:18px}
  section.dark .strip .sup{color:var(--metal)}
  .strip p{font-size:14.5px;color:rgba(14,42,51,.72)}
  section.dark .strip p{color:var(--metal)}

  .ab{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1px;background:var(--rule-l)}
  .ch{background:var(--cream);padding:32px 28px}
  .ch.out{background:var(--petrol);color:var(--cream)}
  .ch .cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--metal-d);margin-bottom:8px}
  .ch.out .cap{color:var(--amber)}
  .ch h3{font-size:22px;margin-bottom:20px}
  .ch.out h3{color:var(--cream)}
  .ch ul{list-style:none}
  .ch li{font-size:14.5px;color:rgba(14,42,51,.74);padding:12px 0 12px 24px;position:relative;
    border-bottom:1px solid var(--rule-l)}
  .ch.out li{color:var(--metal);border-bottom-color:var(--rule-d)}
  .ch li:last-child{border-bottom:none}
  .ch li::before{content:'';position:absolute;left:0;top:21px;width:13px;height:1px;background:var(--metal-d)}
  .ch.out li::before{background:var(--amber);height:2px;top:20px}

  /* Numerals are the display type. */
  .fig-row{display:grid;grid-template-columns:minmax(190px,auto) 1fr;gap:52px;align-items:start}
  .fig{font-size:clamp(50px,8vw,84px);font-weight:800;letter-spacing:-0.04em;color:var(--amber);line-height:.86}
  .fig .u{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--metal);margin-top:18px;font-weight:400;line-height:1.65;max-width:22ch}
  .fig-row p{color:var(--bone);font-size:16.5px}
  .fig-row p+p{margin-top:15px;color:var(--metal);font-size:15px}

  /* Refusals get the oxblood, and only refusals. */
  .refuse{background:var(--ox);color:var(--cream)}
  .refuse .strips{background:rgba(239,230,212,.2)}
  .refuse .strip{background:var(--ox)}
  .refuse .strip .cap{color:var(--cream);opacity:.62;border-bottom-color:rgba(239,230,212,.2)}
  .refuse .strip h3{color:var(--cream)}
  .refuse .strip p{color:rgba(239,230,212,.8)}
  .refuse h2{color:var(--cream)}
  .refuse .lede{color:rgba(239,230,212,.78)}
  .refuse .track .n{color:var(--cream)}
  .refuse .track .t{color:rgba(239,230,212,.6)}

  .faq{max-width:790px}
  .faq details{border-bottom:1px solid var(--rule-l);padding:22px 0}
  .faq summary{cursor:pointer;font-size:18px;font-weight:700;letter-spacing:-0.015em;list-style:none;
    display:flex;justify-content:space-between;gap:24px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:'+';color:var(--amber);font-size:22px;font-weight:400;line-height:1}
  .faq details[open] summary::after{content:'\2212'}
  .faq p{font-size:15px;color:rgba(14,42,51,.74);margin-top:13px;max-width:66ch}

  .end{background:var(--petrol);color:var(--cream);padding:96px 28px;text-align:center}
  .end h2{margin:0 auto 18px;max-width:15ch}
  .end p{color:var(--metal);max-width:48ch;margin:0 auto 36px;font-size:17px}
  .quiet{font-size:14.5px;color:rgba(14,42,51,.62);max-width:66ch;margin-top:42px}
  section.dark .quiet{color:var(--metal)}
  footer{background:var(--petrol-d);color:var(--metal);padding:42px 0}
  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px}
  footer p{font-size:11.5px;line-height:1.75}
  footer a{color:var(--metal)}
  .src{font-size:11px;color:rgba(14,42,51,.5);max-width:76ch;margin-top:36px;line-height:1.8}
  .src a{color:rgba(14,42,51,.5)}

  /* ---------- PROSE ------------------------------------------------
     Long-form text pages. Same panel logic, one column, nothing new
     invented. Used by the privacy notice.
  ------------------------------------------------------------------ */
  .prose{max-width:68ch}
  .prose h2{font-size:clamp(22px,2.6vw,28px);margin:52px 0 14px;max-width:28ch}
  .prose h2:first-child{margin-top:0}
  .prose p{font-size:16px;color:rgba(14,42,51,.78);margin-bottom:16px}
  .prose ul{list-style:none;margin:0 0 16px}
  .prose li{font-size:16px;color:rgba(14,42,51,.78);padding:11px 0 11px 24px;position:relative;
    border-bottom:1px solid var(--rule-l)}
  .prose li:last-child{border-bottom:none}
  .prose li::before{content:'';position:absolute;left:0;top:20px;width:13px;height:1px;background:var(--amber)}
  .prose a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
  .stamp{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--metal-d);border-top:2px solid var(--petrol);padding-top:12px;margin-bottom:44px}

  @media(max-width:760px){
    header{padding:70px 0 60px}section{padding:58px 0}
    .fig-row{grid-template-columns:1fr;gap:26px}
    .wordmark{font-size:18px}
    .wordmark small{display:none}
    .nav-links{gap:10px}
    .nav-links a{white-space:nowrap}
    .nav-links a:not(.btn):not(.keep){display:none}
    .nav-links a.keep{font-size:9.5px;letter-spacing:.1em;padding:7px 9px}
    .nav-links a.btn{font-size:10px;letter-spacing:.1em;padding:10px 13px}
    .end{padding:64px 24px}
    .spec td,.spec th{font-size:12.5px;padding-right:8px}
  }
  @media(max-width:400px){
    .nav-inner{padding:0}
    nav .wrap{padding:0 16px}
    .wordmark{font-size:16px}
    .mark{width:20px;height:20px}
    .nav-links{gap:7px}
    .nav-links a.keep{font-size:9px;padding:6px 7px}
    .nav-links a.btn{font-size:9.5px;padding:9px 10px}
  }