/* ==========================================================================
   Trinity Vantage Solutions — site stylesheet
   No build step, no trackers, no third-party requests. The two typefaces are
   self-hosted from assets/fonts/, so nothing is fetched from anyone else's
   server at runtime.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Typefaces

   Archivo carries the headlines: a broad American grotesque that gains
   authority at size rather than losing it. Inter carries body and interface
   text, where neutrality is the job.

   Both are variable fonts, subset to latin and latin-ext and gated by
   unicode-range, so an English page pulls roughly 83 KB and never touches the
   latin-ext files. font-display: swap keeps text readable while they load.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces — charcoal, not pure black */
  --bg:            #0E1013;
  --bg-alt:        #111418;
  --surface:       #15181D;
  --surface-raise: #1A1E24;
  --surface-sink:  #0B0D10;

  /* Lines */
  --line:          #242A32;
  --line-soft:     #1C2128;
  --line-strong:   #333B45;

  /* Type */
  --text:          #F1EFEB;
  --text-2:        #AEB5BF;
  --text-3:        #8A919B;
  --text-4:        #7F8691;

  /* Single restrained accent — polished copper, sampled from the logo.
     Flat values carry small UI; the two gradients carry anything big enough
     to read as metal. Every stop in --metal-fill clears 4.5:1 against
     --metal-ink-on, and every stop in --metal-ink clears it against --bg. */
  --accent:        #C07A3C;
  --accent-bright: #E0AC79;
  --accent-dim:    rgba(192, 122, 60, 0.15);
  --accent-line:   rgba(192, 122, 60, 0.34);

  --metal-fill: linear-gradient(150deg,
                  #EBC59B 0%, #D6934F 24%, #C07A3C 50%, #B87333 76%, #DDA466 100%);
  --metal-ink:  linear-gradient(115deg,
                  #F3DCC2 0%, #E0AC79 34%, #C98A4C 66%, #EBC59B 100%);
  --metal-ink-on: #1C1409;

  --focus:         #E0AC79;

  /* Functional only, never decorative: the one colour that means "this failed".
     Desaturated so it reads as a warning rather than an alarm. */
  --alert:         #E08A76;

  /* Gold, reserved for the brand line. Copper is the working accent; gold is
     what the company signs its name in. Every stop clears 7.8:1 on the dark
     grounds, so it stays readable at any size. */
  --gold:      #E8C879;
  --gold-ink:  linear-gradient(115deg,
                 #FBF0D2 0%, #EDD08A 28%, #C9A227 62%, #F5E3B0 100%);

  --radius:        10px;
  --radius-sm:     7px;
  --radius-lg:     14px;

  --header-h:      88px;

  --shadow:        0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.32);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Archivo", "Inter", -apple-system, BlinkMacSystemFont,
          "Segoe UI Variable Display", "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
          Menlo, Consolas, monospace;

  --pad-x: clamp(20px, 5vw, 40px);
  --pad-y: clamp(64px, 8vw, 116px);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 620;
  letter-spacing: -0.024em;
  line-height: 1.14;
  color: var(--text);
}

p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
dd { margin: 0; }

a { color: inherit; text-decoration: none; }

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

hr.hairline {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 22px 0;
}

::selection { background: var(--accent); color: #0E1013; }

/* Focus */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  background: var(--accent);
  color: #1A1E2A;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  transition: top .15s ease;
}
.skip-link:focus { top: 14px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 150;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: var(--metal-fill);
  transform: scaleX(0);
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

.section {
  padding-block: var(--pad-y);
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: calc(var(--header-h) + 8px);
}
.section-alt { background: var(--bg-alt); }

section[id], main > span[id], footer[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

.icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  display: inline-block;
  vertical-align: -0.14em;
}

/* --------------------------------------------------------------------------
   4. Typographic components
   -------------------------------------------------------------------------- */

.mono-label,
.eyebrow,
.mono-index,
.step-num,
.tag,
.flow-stage,
.flow-chips {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow {
  font-size: 0.6875rem;
  color: var(--accent-bright);
  margin-bottom: 18px;
}

.mono-label {
  font-size: 0.625rem;
  color: var(--text-4);
}

.section-title {
  font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.45rem);
  max-width: 22ch;
}
.section-title + .section-lead { margin-top: 20px; }

.section-lead {
  font-size: clamp(1rem, 0.96rem + 0.28vw, 1.125rem);
  color: var(--text-2);
  max-width: 62ch;
}
.section-lead + .section-lead { margin-top: 14px; }

.lead {
  font-size: clamp(1.03rem, 0.98rem + 0.35vw, 1.1875rem);
  color: var(--text-2);
  max-width: 56ch;
}

.footnote {
  margin-top: 32px;
  font-size: 0.9375rem;
  color: var(--text-3);
  max-width: 66ch;
  padding-left: 16px;
  border-left: 2px solid var(--line-strong);
}

.muted { color: var(--text-3); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: background-color .16s ease, border-color .16s ease,
              color .16s ease, transform .12s ease, box-shadow .2s ease;
}
.btn .icon { transition: transform .18s ease; }
.btn:hover .icon { transform: translateX(2px); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--metal-fill);
  color: var(--metal-ink-on);
  border-color: rgba(255, 255, 255, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .40),
    inset 0 -1px 0 rgba(0, 0, 0, .22),
    0 1px 2px rgba(0, 0, 0, .45);
}
.btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .48),
    inset 0 -1px 0 rgba(0, 0, 0, .22),
    0 1px 2px rgba(0, 0, 0, .45),
    0 8px 26px rgba(192, 122, 60, .28);
}

/* A light sweeps across the metal on hover. Nothing moves until you point at it. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(104deg,
    transparent 38%, rgba(255, 255, 255, .40) 50%, transparent 62%);
  transform: translateX(-130%);
  pointer-events: none;
}
.js .btn-primary:hover::after { animation: sheen .85s cubic-bezier(.3,.6,.3,1); }

@keyframes sheen {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}

/* Gradient lettering, for the few places big enough to hold it. */
.metal-ink { color: var(--accent-bright); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .metal-ink {
    background-image: var(--metal-ink);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--text-3); background: rgba(255,255,255,.03); }

.btn-sm { padding: 9px 16px; font-size: 0.875rem; }
.btn-block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   6. Header / nav
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14, 16, 19, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(14, 16, 19, 0.94);
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}

/* The mark stays generous on phones without crowding the menu button. */
@media (max-width: 520px) {
  .brand { gap: 12px; }
  .brand-mark { width: 48px; height: 48px; }
  .brand-mono { font-size: 1.1875rem; }
}
.brand-mark {
  width: 56px;
  height: 56px;
  flex: none;
  object-fit: contain;
  transition: filter .3s ease, transform .3s ease;
}
.brand:hover .brand-mark { filter: brightness(1.12) saturate(1.06); transform: translateY(-1px); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-mono {
  font-family: var(--mono);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--gold);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .brand-mono {
    background-image: var(--gold-ink);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.brand-full {
  font-size: 0.8125rem;
  color: var(--text);
  letter-spacing: 0.015em;
  margin-top: 3px;
}

.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
}
.nav-toggle .icon { width: 20px; height: 20px; grid-area: 1 / 1; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.primary-nav {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 14px var(--pad-x) 22px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.primary-nav.is-open { display: flex; }

.nav-list { display: flex; flex-direction: column; }
.nav-list a {
  display: block;
  padding: 11px 2px;
  font-size: 0.9375rem;
  color: var(--text-2);
  border-bottom: 1px solid var(--line-soft);
  transition: color .15s ease;
}
.nav-list a:hover { color: var(--text); }
.nav-list a.is-active { color: var(--accent-bright); }

.nav-cta { margin-top: 14px; }

@media (min-width: 920px) {
  .nav-toggle { display: none; }
  .primary-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav-list { flex-direction: row; gap: 2px; }
  .nav-list a {
    padding: 8px 13px;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text-2);
  }
  .nav-list a:hover { background: rgba(255,255,255,.04); color: var(--text); }
  .nav-list a.is-active { color: var(--accent-bright); background: var(--accent-dim); }
  .nav-cta { margin-top: 0; margin-left: 10px; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(52px, 7vw, 96px) clamp(60px, 8vw, 108px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -30% 20% auto -20%;
  height: 520px;
  background: radial-gradient(60% 60% at 40% 40%, rgba(192,122,60,.11), transparent 70%);
  pointer-events: none;
}
.js .hero::before { animation: dusk 26s ease-in-out infinite alternate; }

@keyframes dusk {
  from { transform: translate3d(0, 0, 0) scale(1);          opacity: .8; }
  to   { transform: translate3d(6%, 3%, 0) scale(1.14);     opacity: 1;  }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; }

.hero h1 {
  margin-top: 22px;
  font-size: clamp(2.05rem, 1.35rem + 3.05vw, 3.55rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
  max-width: 19ch;
}
.hero h1 + .lead { margin-top: 24px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 11px;
  border: 1px solid var(--accent-line);
  background: var(--accent-dim);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--accent-bright);
  letter-spacing: -0.004em;
}
.pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(224,172,121,.18);
}

.hero-facts {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 18px;
}
.hero-facts li {
  font-size: 0.9375rem;
  color: var(--text-2);
}
.hero-facts .mono-label { display: block; margin-bottom: 5px; }

@media (min-width: 620px) {
  .hero-facts { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.hero-figure {
  margin: 44px 0 0;
  padding: clamp(16px, 3vw, 26px);
  background:
    linear-gradient(180deg, var(--surface), var(--surface-sink));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.hero-figure figcaption {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8125rem;
  color: var(--text-3);
}

@media (min-width: 1020px) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(32px, 4vw, 60px);
    align-items: center;
  }
  .hero-figure { margin-top: 0; }
  .hero-facts { grid-template-columns: 1fr; gap: 16px; }
}

/* --- flow diagram --- */

/* Capped so the diagram never inflates on tablet-width layouts. */
.flow { display: block; width: 100%; max-width: 540px; height: auto; margin-inline: auto; }

.flow-stage { font-size: 9.5px; letter-spacing: 0.18em; fill: var(--text-4); }
.flow-stage-on { fill: var(--accent-bright); }

.flow-node rect {
  fill: var(--surface-raise);
  stroke: var(--line);
  stroke-width: 1;
}
.flow-node .flow-title {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  fill: var(--text);
  text-anchor: middle;
}
.flow-node-dead rect { stroke-dasharray: 4 4; }
.flow-node-dead .flow-title { fill: var(--text-3); }
.flow-node-live rect { stroke: var(--line-strong); }
.flow-node-goal rect { stroke: var(--accent-line); fill: rgba(192,122,60,.11); }

.flow-link { stroke: var(--line-strong); stroke-width: 1.5; }
.flow-link-dead { stroke-dasharray: 3 3; stroke: var(--line); }
.flow-link-on { stroke: var(--accent-line); }

.flow-break circle {
  fill: var(--bg);
  stroke: var(--text-3);
  stroke-width: 1.1;
}
.flow-break path { stroke: var(--text-2); stroke-width: 1.5; stroke-linecap: round; }

.flow-note {
  font-family: var(--font);
  font-size: 11px;
  fill: var(--text-3);
  text-anchor: middle;
}

.flow-rule { stroke: var(--line-soft); stroke-width: 1; }

.flow-dot { fill: var(--accent-bright); }

.js .flow-break { animation: breakPulse 3.4s ease-in-out infinite; }
@keyframes breakPulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

.flow-chips {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  fill: var(--accent-bright);
  text-anchor: middle;
}

.js .flow-dot-a { animation: flowTravel 3.8s cubic-bezier(.5,.1,.3,1) infinite; }
.js .flow-dot-b { animation: flowTravel 3.8s cubic-bezier(.5,.1,.3,1) infinite 1.9s; }

@keyframes flowTravel {
  0%   { transform: translateX(0);    opacity: 0; }
  14%  { opacity: 1; }
  68%  { transform: translateX(28px); opacity: 1; }
  84%, 100% { transform: translateX(28px); opacity: 0; }
}

/* Phone widths shrink the diagram below its comfortable size, so the labels
   are scaled up in viewBox units to keep the rendered text readable. */
@media (max-width: 480px) {
  .flow-node .flow-title { font-size: 18px; }
  .flow-note  { font-size: 15px; }
  .flow-chips { font-size: 12.5px; letter-spacing: 0.14em; }
  .flow-stage { font-size: 12px; }
}

/* --- the anatomy of a broken lead path --- */

.break-figure {
  margin: 44px 0 0;
  padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 30px) clamp(22px, 3vw, 28px);
  background: linear-gradient(180deg, var(--surface), var(--surface-sink));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.breakdown {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin-inline: auto;
}

.bd-short { display: none; }

.bd-stop circle {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 1.6;
}
.bd-stop text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--accent-bright);
  text-anchor: middle;
}

.break-legend {
  display: grid;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.break-legend li {
  font-size: 0.9375rem;
  color: var(--text-3);
  line-height: 1.55;
}
.break-legend strong { color: var(--text); font-weight: 600; }
.bd-index {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  color: var(--accent);
}
@media (min-width: 860px) {
  .break-legend { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .break-legend li { align-content: start; }
}

/* The schematic shrinks below its comfortable size on a phone, so the end labels
   shorten and the type scales up in viewBox units to stay readable. */
@media (max-width: 480px) {
  .bd-long  { display: none; }
  .bd-short { display: inline; }
  .breakdown .flow-node .flow-title { font-size: 22px; }
  .bd-stop text { font-size: 19px; }
}

/* --------------------------------------------------------------------------
   8. Cards / grids
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 1px; margin-top: 48px; }

.card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
  transition: border-color .18s ease, background-color .18s ease;
}
.card:hover { border-color: var(--line-strong); background: var(--surface-raise); }
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--metal-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.card:hover::before { transform: scaleX(1); }
.card h3 {
  font-size: 1.0625rem;
  margin-bottom: 10px;
}
.card p { font-size: 0.9375rem; color: var(--text-2); }

.card-lg { padding: 30px 28px 32px; }
.card-lg h3 { font-size: 1.1875rem; }

.mono-index {
  display: block;
  font-size: 0.625rem;
  color: var(--accent);
  margin-bottom: 16px;
}

.grid-2, .grid-3 { gap: 14px; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1020px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   9. Split sections (anti-agency, about)
   -------------------------------------------------------------------------- */

.split { display: grid; gap: clamp(36px, 5vw, 64px); }
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
  .split-head { position: sticky; top: calc(var(--header-h) + 40px); }
}

.principles { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.principles li { background: var(--bg); padding: 26px 26px 28px; }
.section-alt .principles li { background: var(--bg-alt); }
.principles h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.principles p { font-size: 0.9375rem; color: var(--text-2); }

/* --------------------------------------------------------------------------
   10. Steps
   -------------------------------------------------------------------------- */

.steps {
  margin-top: 48px;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.step {
  background: var(--bg-alt);
  padding: 28px 26px 30px;
  position: relative;
  overflow: hidden;
}
/* The rail fills step by step as the section arrives. */
.step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--metal-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.steps.is-visible .step::before { transform: scaleX(1); }
.steps.is-visible .step:nth-child(2)::before { transition-delay: .14s; }
.steps.is-visible .step:nth-child(3)::before { transition-delay: .28s; }
.steps.is-visible .step:nth-child(4)::before { transition-delay: .42s; }
.step-num {
  display: block;
  font-size: 0.625rem;
  color: var(--accent);
  margin-bottom: 18px;
}
.step h3 { font-size: 1.125rem; margin-bottom: 10px; }
.step p { font-size: 0.9375rem; color: var(--text-2); }

@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   11. Pilot / price
   -------------------------------------------------------------------------- */

.pilot-grid { margin-top: 48px; display: grid; gap: 20px; }
@media (min-width: 1000px) {
  .pilot-grid { grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr); align-items: start; }
  .price-card { position: sticky; top: calc(var(--header-h) + 32px); }
}

.pilot-detail { display: grid; gap: 20px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
}
.panel-quiet { background: transparent; }
.panel-title {
  font-size: 0.9375rem;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.panel-text { font-size: 0.9375rem; color: var(--text-2); }
.panel-text + .panel-text { margin-top: 12px; }

.list-check, .price-points, .cta-points { display: grid; gap: 13px; }
.list-check li, .price-points li, .cta-points li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.55;
}
.list-check .icon, .price-points .icon, .cta-points .icon {
  color: var(--accent);
  margin-top: 4px;
  width: 15px; height: 15px;
}

.price-card {
  background: linear-gradient(180deg, var(--surface-raise), var(--surface));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 30px 28px 32px;
  box-shadow: var(--shadow);
}
.price {
  font-family: var(--display);
  margin-top: 10px;
  font-size: clamp(2.6rem, 2.1rem + 2vw, 3.4rem);
  font-weight: 640;
  letter-spacing: -0.04em;
  line-height: 1;
}
.price-currency {
  font-size: 0.44em;
  vertical-align: 0.62em;
  margin-right: 3px;
  color: var(--text-3);
  font-weight: 560;
}
.price-sub { margin-top: 10px; font-size: 0.9375rem; color: var(--text-2); }
.price-points { margin-bottom: 26px; }
.price-note {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--text-3);
  text-align: center;
}

/* --------------------------------------------------------------------------
   12. Scope columns
   -------------------------------------------------------------------------- */

.scope-grid {
  margin-top: 48px;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 820px) { .scope-grid { grid-template-columns: 1fr 1fr; } }

.scope-col { background: var(--bg-alt); padding: 30px 28px 34px; }
.scope-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.0625rem;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.scope-do .scope-head .icon { color: var(--accent); }
.scope-dont .scope-head .icon { color: var(--text-3); }

.scope-col ul { display: grid; gap: 12px; }
.scope-col li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9375rem;
  color: var(--text-2);
}
.scope-col li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 8px; height: 1px;
  background: var(--line-strong);
}
.scope-do li::before { background: var(--accent); }
.scope-dont li { color: var(--text-3); }

/* --------------------------------------------------------------------------
   13. Philosophy feature band
   -------------------------------------------------------------------------- */

/* The brand-principle band. Warmer ground, copper edges, and the line itself
   carried at display size — this is the sentence the site is remembered for. */
.section-feature {
  position: relative;
  background:
    radial-gradient(78% 140% at 8% 0%, rgba(192, 122, 60, .14), transparent 64%),
    linear-gradient(180deg, #15181E 0%, var(--surface-sink) 100%);
  border-top: 1px solid var(--accent-line);
  border-bottom: 1px solid var(--accent-line);
}
.feature-inner { position: relative; max-width: 68ch; }
.feature-text {
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.125rem);
  color: var(--text-2);
  margin-top: 22px;
}

.principle { margin: clamp(36px, 5vw, 52px) 0 clamp(30px, 4vw, 42px); }

.principle-rule {
  display: block;
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: 22px;
}

.principle-kicker {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 16px;
}

.pullquote {
  font-family: var(--display);
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  font-weight: 640;
  letter-spacing: -0.032em;
  line-height: 1.08;
  color: var(--text);
}
.pullquote-accent { color: var(--accent-bright); }

/* The band's warm wash lifts its background, so the closing line moves up a
   tier to stay clear of 4.5:1 at the hottest point of the gradient. */
.section-feature .feature-text.muted { color: var(--text-2); }

/* --------------------------------------------------------------------------
   13b. Slogan lockup — "Trust in Trinity."
   Used three times only: about, closing statement, footer. The mark sizes
   itself off the surrounding type so one class covers every placement.
   -------------------------------------------------------------------------- */

.slogan {
  display: flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 620;
  letter-spacing: -0.024em;
  line-height: 1.2;
  color: var(--gold);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .slogan {
    background-image: var(--gold-ink);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.slogan-md {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 1.1875rem;
}

.slogan-lg {
  justify-content: center;
  margin-top: clamp(48px, 6vw, 76px);
  padding-top: clamp(36px, 4vw, 52px);
  border-top: 1px solid var(--line);
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.125rem);
  letter-spacing: -0.032em;
}

.footer-slogan {
  font-family: var(--display);
  margin-top: 10px;
  font-size: 1.0625rem;
  font-weight: 620;
  letter-spacing: -0.014em;
  color: var(--gold);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .footer-slogan {
    background-image: var(--gold-ink);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* --------------------------------------------------------------------------
   14. Operating-rules and company panels
   -------------------------------------------------------------------------- */

.proof {
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
  background: rgba(255,255,255,.016);
}
.proof-kicker {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 14px;
}
.proof-title {
  font-size: 1.125rem;
  margin-bottom: 22px;
  letter-spacing: -0.02em;
  max-width: 26ch;
}
.proof-note { margin-top: 20px; font-size: 0.875rem; color: var(--text-3); }

/* Parent-company credibility block */
.about-col { display: grid; gap: 20px; align-content: start; }
.parent-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 28px;
  background: var(--surface);
}
.parent-line {
  margin-top: 4px;
  font-size: 1.0625rem;
  color: var(--text-2);
  letter-spacing: -0.012em;
}
.parent-line strong { color: var(--text); font-weight: 620; }
.parent-note { margin-top: 12px; font-size: 0.9375rem; color: var(--text-3); }
.pending-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   15. CTA + form
   -------------------------------------------------------------------------- */

.section-cta { background: var(--bg-alt); }
.cta-inner { display: grid; gap: clamp(34px, 5vw, 60px); }
@media (min-width: 960px) {
  .cta-inner { grid-template-columns: minmax(0, 1fr) minmax(380px, 0.86fr); align-items: start; }
}
.cta-points { margin-top: 30px; }

.form-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.02);
  font-size: 0.8125rem;
  color: var(--text-3);
}
.form-intro a { color: var(--accent-bright); }

/* Honeypot. Off-screen rather than display:none, which bots skip. */
.field-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-alt {
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--text-3);
  text-align: center;
}
.form-alt a { color: var(--accent-bright); }
.form-alt a:hover { text-decoration: underline; }

.fit-form [aria-invalid="true"] { border-color: var(--alert); }

.btn[disabled] { opacity: .6; cursor: progress; }
.btn[disabled]::after { display: none; }

.fit-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px 30px;
  display: grid;
  gap: 18px;
  box-shadow: var(--shadow);
}

.field { display: grid; gap: 7px; }
.field label { font-size: 0.875rem; color: var(--text-2); font-weight: 520; }

.field input[type="text"], .field select {
  width: 100%;
  padding: 11px 13px;
  background: var(--surface-sink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.field input::placeholder { color: var(--text-4); }
.field input:hover, .field select:hover { border-color: var(--text-4); }
.field input:focus-visible, .field select:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.field select option { background: var(--surface); color: var(--text); }

.field-hint { font-size: 0.75rem; color: var(--text-4); }

.field-check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 11px;
  padding-top: 4px;
}
.field-check input[type="checkbox"] {
  width: 17px; height: 17px;
  margin: 3px 0 0;
  accent-color: var(--accent);
  flex: none;
}
.field-check label { font-size: 0.8125rem; color: var(--text-3); }

.form-status {
  font-size: 0.8125rem;
  color: var(--accent-bright);
  min-height: 1.2em;
}
.form-status:not(:empty) {
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--line-strong);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius-sm);
  color: var(--text-2);
}
.form-status.is-busy { color: var(--text-3); }
.form-status.is-info:not(:empty),
.form-status.is-ok:not(:empty) {
  border-color: var(--accent-line);
  border-left-color: var(--accent);
  background: var(--accent-dim);
}
.form-status.is-error:not(:empty) {
  border-color: rgba(224, 138, 118, .34);
  border-left-color: var(--alert);
  background: rgba(224, 138, 118, .10);
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface-sink);
  padding-top: clamp(48px, 6vw, 72px);
}
.footer-inner { display: grid; gap: 40px; }
@media (min-width: 800px) {
  .footer-inner { grid-template-columns: 1.1fr 0.8fr 1.2fr; gap: 48px; }
}

/* The reversed lockup, so the complete logo can sit on the dark ground. */
.footer-lockup {
  display: block;
  width: 100%;
  max-width: 236px;
  height: auto;
  margin-bottom: 22px;
}
.footer-parent { font-size: 0.8125rem; color: var(--text-2); margin-top: 8px; }
.footer-loc { font-size: 0.8125rem; color: var(--text-4); margin-top: 4px; }

.footer-nav ul { margin-top: 14px; display: grid; gap: 9px; }
.footer-nav a { font-size: 0.875rem; color: var(--text-2); }
.footer-nav a:hover { color: var(--accent-bright); }

.pending-list { margin-top: 14px; display: grid; gap: 9px; }
.pending-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--text-3);
}
.pending-list a { color: var(--text-2); transition: color .16s ease; }
.pending-list a:hover { color: var(--accent-bright); }
.pending-list a[aria-current="page"] { color: var(--accent-bright); }
.tag {
  font-size: 0.5625rem;
  color: var(--text-4);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 6px;
}
.footer-note { margin-top: 18px; font-size: 0.8125rem; color: var(--text-4); max-width: 46ch; }

.footer-bottom {
  margin-top: clamp(40px, 5vw, 60px);
  padding-block: 22px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--text-4);
}

/* --------------------------------------------------------------------------
   17. Reveal on scroll (progressive enhancement)
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Items arrive one after another rather than as a single slab. */
.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.js .reveal-stagger.is-visible > :nth-child(2) { transition-delay: .06s; }
.js .reveal-stagger.is-visible > :nth-child(3) { transition-delay: .12s; }
.js .reveal-stagger.is-visible > :nth-child(4) { transition-delay: .18s; }
.js .reveal-stagger.is-visible > :nth-child(5) { transition-delay: .24s; }
.js .reveal-stagger.is-visible > :nth-child(6) { transition-delay: .30s; }
.js .reveal-stagger.is-visible > :nth-child(7) { transition-delay: .36s; }
.js .reveal-stagger.is-visible > :nth-child(8) { transition-delay: .42s; }
.js .reveal-stagger.is-visible > :nth-child(9) { transition-delay: .48s; }

/* Check marks draw themselves in behind their line of text. */
.js .list-check .icon,
.js .cta-points .icon,
.js .price-points .icon {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  transition: stroke-dashoffset .55s cubic-bezier(.3,.7,.3,1) .12s;
}
.js .reveal-stagger.is-visible .icon,
.js .is-visible .list-check .icon,
.js .is-visible .price-points .icon,
.js .is-visible .cta-points .icon { stroke-dashoffset: 0; }

/* --------------------------------------------------------------------------
   18. Motion / print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal-stagger > * { opacity: 1; transform: none; }
  .js .list-check .icon,
  .js .cta-points .icon,
  .js .price-points .icon { stroke-dashoffset: 0; }
  .steps .step::before,
  .scroll-progress span { transform: scaleX(1); }
  .flow-dot { display: none; }
}

@media print {
  .site-header, .nav-toggle, .hero::before, .hero::after { display: none; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   19. Secondary pages — policies, and the 404
   -------------------------------------------------------------------------- */

.doc-nav { display: flex; align-items: center; gap: 10px; }
/* The brand already links home, so the spare button goes first on small screens. */
@media (max-width: 620px) {
  .doc-nav .btn-ghost { display: none; }
}

.doc { padding-block: clamp(48px, 7vw, 88px) var(--pad-y); }

.doc-head { max-width: 62ch; }
.doc-head h1 {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.doc-head h1 + .section-lead { margin-top: 22px; }

.doc-meta {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.doc-meta div { display: grid; gap: 4px; }
.doc-meta dd { font-size: 0.875rem; color: var(--text-2); }

/* Anything still waiting on Ronnie is marked in place rather than guessed at. */
.blank {
  font-family: var(--mono);
  font-size: 0.8125em;
  letter-spacing: 0.04em;
  color: var(--accent-bright);
  background: var(--accent-dim);
  border: 1px dashed var(--accent-line);
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
}

.doc-banner {
  margin-top: 32px;
  padding: 18px 20px;
  border: 1px dashed var(--line-strong);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .02);
  font-size: 0.9375rem;
  color: var(--text-3);
  max-width: 74ch;
}
.doc-banner strong { color: var(--text); font-weight: 600; }

.doc-body { margin-top: clamp(40px, 5vw, 60px); max-width: 74ch; }
.doc-body section + section {
  margin-top: 44px;
  padding-top: 40px;
  border-top: 1px solid var(--line-soft);
}
.doc-body h2 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.doc-body h3 {
  font-size: 1rem;
  margin: 26px 0 10px;
  color: var(--text-2);
}
.doc-body p { color: var(--text-2); font-size: 0.9375rem; }
.doc-body p + p { margin-top: 14px; }
.doc-body ul { margin-top: 14px; display: grid; gap: 10px; }
.doc-body ul li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9375rem;
  color: var(--text-2);
}
.doc-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.doc-body ul.plain li::before { background: var(--line-strong); }

.doc-toc {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.doc-toc a {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  transition: border-color .16s ease, color .16s ease;
}
.doc-toc a:hover { border-color: var(--accent-line); color: var(--accent-bright); }

.doc-back { margin-top: 48px; }

/* 404 */
.notfound {
  min-height: 58vh;
  display: grid;
  align-content: center;
  padding-block: clamp(56px, 9vw, 120px);
}
.notfound .mono-label { margin-bottom: 20px; }
.notfound h1 {
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.notfound p { margin-top: 20px; color: var(--text-2); max-width: 54ch; }
.notfound .btn-row { margin-top: 34px; }
.notfound-links {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.notfound-links a { font-size: 0.9375rem; color: var(--text-2); }
.notfound-links a:hover { color: var(--accent-bright); }