/* ==========================================================================
   Balerion — Home page
   ========================================================================== */

/* ── 01 · Header ────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
}
.site-header.is-stuck {
  background: rgba(10, 8, 5, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--nav-h);
}
.nav__logo img { height: 24px; width: auto; }
@media (max-width: 760px) { .nav__logo img { height: 21px; } }

/* Seven items rather than three, so the gap gives at mid widths instead of
   pushing the CTA off the end. */
.nav__links { display: flex; gap: clamp(15px, 1.5vw, 26px); align-items: center; }

/* The six under What we build in the drawer. Indented and quieter than their
   parent so the hierarchy reads without a control to open it. */
.drawer__sub { display: flex; flex-direction: column; margin: 2px 0 10px 38px; }
.drawer__sub a {
  font-family: var(--f-body); font-size: 13.5px; line-height: 1.35;
  color: var(--ink-3); padding: 7px 0; border: 0;
  transition: color var(--dur) var(--ease);
}
.drawer__sub a:hover { color: var(--ink); }

/* ── Services mega menu ─────────────────────────────────── */
/* Opens on hover and on focus-within, both in CSS. There is no state to keep
   and no script to load; tabbing in opens it and tabbing out closes it. The
   six links are in the document regardless, so nothing depends on it opening.
   The trigger keeps a little padding below it so the pointer can cross the gap
   into the panel without passing over dead ground and closing it. */
.nav__mega { position: static; }
.nav__megaTrigger { display: inline-flex; align-items: center; gap: 6px; }
.nav__chev { width: 9px; height: 6px; flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.nav__mega:hover .nav__chev,
.nav__mega:focus-within .nav__chev { transform: rotate(180deg); }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(10, 8, 5, .97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-2);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
.nav__mega:hover .mega,
.nav__mega:focus-within .mega {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) { .mega { transition: none; } }

/* The padding and the preview width are named because the cards are absolutely
   positioned over the right column from inside the list - they have to land on
   exactly the track the grid reserved. vw rather than % so the two expressions
   resolve against the same thing. */
.mega__inner {
  --mega-pad-t: clamp(26px, 2.4vw, 40px);
  --mega-pad-b: clamp(22px, 2vw, 34px);
  --mega-stage: clamp(288px, 25vw, 400px);
  position: relative;
  max-width: var(--wrap); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--mega-stage);
  gap: clamp(28px, 3.4vw, 64px);
  padding: var(--mega-pad-t) var(--gut) var(--mega-pad-b);
}

/* ── the index ─────────────────────────────── */
.mega__list { list-style: none; margin: 0; padding: 0; grid-column: 1; }
/* Deliberately not positioned: the preview card inside each item has to
   resolve against .mega__inner so it lands on the track the grid reserved
   for it, not against the row it was written next to. */
.mega__item { position: static; }
.mega__row {
  position: relative;
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 16px;
  align-items: center; gap: 16px;
  padding: 16px 0; color: var(--ink-2);
  border-top: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease);
}
.mega__item--last .mega__row { border-bottom: 1px solid var(--line); }

/* The ember sweep sits on top of the hairline it replaces, so the row gains a
   lit edge rather than a second line. */
.mega__row::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--ember);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
a.mega__row:hover, a.mega__row:focus-visible { color: var(--ink); }
a.mega__row:hover::before, a.mega__row:focus-visible::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .mega__row::before { transition: none; } }

.mega__num {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--ink-3); transition: color var(--dur-fast) var(--ease);
}
a.mega__row:hover .mega__num, a.mega__row:focus-visible .mega__num { color: var(--orange); }

.mega__name {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 104, 'wght' 500;
  font-size: 15px; line-height: 1.25; letter-spacing: -.005em;
}
.mega__tick {
  width: 16px; height: 16px; opacity: 0; transform: translateX(-6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
a.mega__row:hover .mega__tick, a.mega__row:focus-visible .mega__tick {
  opacity: 1; transform: none;
}

/* ── the right column, at rest ──────────────── */
.mega__stage {
  grid-column: 2; position: relative; z-index: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: 10px;
}
.mega__eyebrow {
  margin: 0; font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.mega__pitch {
  margin: 0; font-family: var(--f-display);
  font-variation-settings: 'wdth' 108, 'wght' 500;
  font-size: clamp(19px, 1.5vw, 23px); line-height: 1.2; letter-spacing: -.015em;
  color: var(--ink);
}
.mega__hint {
  margin: 0; font-family: var(--f-body); font-size: 12px; color: var(--ink-3);
}

/* ── the preview ────────────────────────────── */
.mega__card {
  position: absolute; z-index: 1;
  top: var(--mega-pad-t); bottom: var(--mega-pad-b);
  right: var(--gut); width: var(--mega-stage);
  margin: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.mega__item:hover .mega__card,
.mega__item:focus-within .mega__card { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mega__card { transition: none; } }

/* The artwork was drawn near-black, so it needs lifting before a scrim goes
   over it or the card reads as an empty dark rectangle. */
.mega__art {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(1.3) saturate(1.15);
}
.mega__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(10, 8, 5, .95) 0%, rgba(10, 8, 5, .74) 46%, rgba(10, 8, 5, .12) 100%);
}
.mega__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 12px;
  height: 100%; justify-content: flex-end;
  padding: clamp(18px, 1.6vw, 24px);
}
.mega__copy {
  margin: 0; font-family: var(--f-body);
  font-size: 13px; line-height: 1.5; color: var(--ink);
}
.mega__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--orange);
}
.mega__ctaArrow { width: 14px; height: 14px; flex-shrink: 0; }

/* Below the two-column width the preview has nowhere to go, so the panel
   becomes the index alone - which is what the drawer shows anyway. */
@media (max-width: 1040px) {
  .mega__inner { grid-template-columns: minmax(0, 1fr); }
  .mega__stage, .mega__card { display: none; }
}
/* Direct children only. A descendant selector here reached every link inside
   the mega panel as well and quietly overrode its size, padding and hover,
   which is why the panel's rows rendered at a third of the height they were
   written at. The top-level items are either an <a> straight in the row or the
   trigger inside .nav__mega - nothing else should pick these up. */
.nav__links > a, .nav__megaTrigger {
  font-size: 13.5px; color: var(--ink-2); position: relative; padding-block: 4px;
  transition: color var(--dur) var(--ease);
}
.nav__links > a::after, .nav__megaTrigger::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--orange); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__links > a:hover, .nav__megaTrigger:hover { color: var(--ink); }
.nav__links > a:hover::after, .nav__megaTrigger:hover::after {
  transform: scaleX(1); transform-origin: left;
}

.nav__cta { font-size: 13px; padding: 11px 20px; }

/* Burger — the source mockup hides nav links at 820px with no replacement.
   This is the missing control. */
.nav__burger {
  display: none; width: 42px; height: 42px; margin-right: -9px;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav__burger span {
  display: block; width: 20px; height: 1.5px; background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Width is not the whole question: the mega panel only opens on hover, so a
   touch tablet wide enough for the inline nav could see What we build but
   never reach the six under it - tapping the trigger just jumps to the
   section. Anything that cannot hover gets the drawer instead, where all six
   are plain links. */
@media (max-width: 900px), (hover: none) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
}

/* Drawer */
.drawer {
  position: fixed; inset: 0; z-index: 89;
  background: var(--void);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 32px) var(--gut) 40px;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .6s var(--ease-io), visibility 0s linear .6s;
}
.drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s, 0s; }
.drawer__links { display: flex; flex-direction: column; gap: 4px; }
/* Direct children only, for the same reason as .nav__links: the six under
   What we build sit in a .drawer__sub inside this box, and a descendant
   selector gave them the 30px uppercase display face meant for the top level. */
.drawer__links > a {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' var(--display-wdth), 'wght' 700;
  text-transform: uppercase; font-size: clamp(28px, 8vw, 46px); line-height: 1.08;
  letter-spacing: -.02em;
  padding-block: 8px; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 14px;
}
.drawer__links > a .n { font-family: var(--f-mono); font-size: 11px; color: var(--orange);
  letter-spacing: .1em; font-variation-settings: normal; }
.drawer__foot { display: flex; flex-direction: column; gap: 18px; }
.drawer__foot .btn { justify-content: center; }
@media (min-width: 901px) and (hover: hover) { .drawer { display: none; } }

/* ── 02 · Hero ──────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(94vh, 860px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--void);
}
.hero__video {
  /* 124% tall with 12% hanging off each edge: the parallax rides inside that
     slack so no edge is ever exposed, at any scroll position. */
  position: absolute; top: -12%; left: 0; width: 100%; height: 124%;
  object-fit: cover; z-index: -3;
  filter: saturate(.42) contrast(1.14) brightness(.48) sepia(.3) hue-rotate(-12deg);
}
/* Under 768px the parallax is skipped, so the oversize would only crop the
   frame differently from desktop for no reason. Sit flush instead. */
@media (max-width: 767px) {
  .hero__video { top: 0; height: 100%; }
}

.hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(94deg, rgba(10,8,5,.94) 0%, rgba(10,8,5,.6) 46%, rgba(10,8,5,.14) 80%, rgba(10,8,5,.46) 100%),
    linear-gradient(180deg, rgba(10,8,5,.82) 0%, transparent 30%, rgba(10,8,5,.96) 100%);
}
.hero__heat { position: absolute; inset: 0; z-index: -1; background: var(--heat); }
.hero__rules {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(242,238,228,.055) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
}
.hero__inner {
  position: relative; flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: calc(var(--nav-h) + clamp(40px, 8vw, 96px)) clamp(26px, 3.4vw, 46px);
}
/* On a phone the 94vh floor left 144px of slack that justify-content pushed to
   the top, so the eyebrow started a third of the way down the screen. A lower
   floor with a hard cap takes the slack out on tall handsets too, and the
   shorter top padding closes the rest. The floor is still a floor: on a short
   phone the content is taller than it anyway. */
@media (max-width: 760px) {
  .hero { min-height: min(78vh, 640px); }
  .hero__inner { padding-block: calc(var(--nav-h) + 28px) 30px; }
}

.hero h1 { margin-bottom: clamp(16px, 2vw, 24px); }
.hero__lede { max-width: 46ch; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(22px, 3vw, 34px); }

/* ── 03 · Client strip ──────────────────────────────────── */
.clients { padding-block: 30px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.clients__row { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; }
.clients__label { flex-shrink: 0; }
.clients__strip {
  flex: 1 1 380px; overflow: hidden; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.clients__track { display: flex; align-items: center; gap: clamp(30px, 4vw, 62px); width: max-content; }
.clients__track img {
  height: 34px; width: auto; opacity: .55;
  filter: grayscale(1) brightness(1.8) contrast(.8);
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.clients__track img:hover { opacity: 1; filter: none; }
.clients__track .ph {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--line-2); white-space: nowrap; border: 1px dashed var(--line-2);
  padding: 8px 14px;
}

/* ── 04 · Positioning statement ─────────────────────────── */
/* Held to roughly 30% of a 1080px screen. This reads as a caption to the hero,
   not a screen of its own, so nothing here should push the page down.

   The clip is the ground now rather than an object beside the sentence. It is
   graded rather than used as shot: the footage is navy and the palette has no
   blue in it. A plain hue-rotate could not carry a saturated blue that far -
   measured, it moved the mean hue from 225 only as far as 216 - so the clip is
   flattened to grey, given a sepia base and then rotated. That lands on 20,
   between --orange at 18 and --peach at 24. */
.stance {
  position: relative; isolation: isolate; overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding-block: clamp(40px, 4.5vw, 64px);
}
.stance__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) sepia(1) saturate(2.8) hue-rotate(-26deg) contrast(1.1);
}
/* The sentence sits left, so the scrim is heaviest there and opens up over the
   globe on the right. Values measured against the brightest frame of the clip
   under the real glyph boxes, not guessed. */
.stance__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10,8,5,.90) 0%, rgba(10,8,5,.80) 38%,
                           rgba(10,8,5,.34) 68%, rgba(10,8,5,.12) 100%),
    linear-gradient(180deg, rgba(10,8,5,.30) 0%, rgba(10,8,5,.10) 45%,
                            rgba(10,8,5,.34) 100%);
}
.stance p {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  text-transform: uppercase;
  font-size: clamp(21px, 2.4vw, 38px);
  line-height: 1.12; letter-spacing: -.018em;
  max-width: 30ch;
}
/* Over a flat ground the unlit words could afford to be nearly invisible. Over
   a clip they cannot - --line-2 would disappear into the brighter frames - so
   the reveal now runs from --ink-2 up to --ink instead. */
.stance .w { color: var(--ink-2); transition: color .2s linear; }
.stance .w.on { color: var(--ink); }
.stance .w.hot { color: var(--orange); }

/* ── 05 · What we do (one screen) ───────────────────────── */
/* Procurement reads this as a checklist, so the whole list has to be on screen
   at once - that is the brief, and it is why the old pinned rail (six 100vh
   panels, ~5,400px of scroll) is gone. The section is sized to the viewport and
   centres inside it; if a short window cannot take the grid it grows rather
   than clipping, because losing a capability is worse than losing the promise
   of one screen. */
.build {
  border-bottom: 1px solid var(--line);
  min-height: calc(100svh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(32px, 4vw, 56px);
}
.build__head { margin-bottom: clamp(24px, 3vw, 44px); }
.build__head h2 { margin-top: 10px; font-size: clamp(26px, 3.2vw, 46px); }
.build__head .lede { margin-top: 10px; max-width: 46ch; }

.build__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 34px) clamp(20px, 2.6vw, 44px);
  list-style: none; margin: 0; padding: 0;
  counter-reset: none;
}
.cap { display: flex; }
/* The whole cell is the target, not a few words inside it - six of these are a
   checklist and a checklist is clicked, not read word by word. It is a div
   instead of a link until the page it points at exists. */
.cap__link {
  display: flex; flex-direction: column; flex: 1;
  padding-top: 16px; border-top: 1px solid var(--line);
  color: inherit; text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
a.cap__link:hover { border-top-color: var(--orange); }
a.cap__link:hover .cap__title { color: var(--orange); }
.cap__title { transition: color var(--dur) var(--ease); }

/* The band is the only real picture in this section and the section has to fit
   one screen, so its height is a tuned budget rather than a nice aspect ratio.
   --cap-band is what is left once the heading, the title, the copy and the CTA
   have taken theirs; it was measured against a 1440x900 viewport, which is the
   tightest common desktop. */
.cap__media {
  position: relative; display: block;
  aspect-ratio: var(--cap-band, 4.8 / 1);
  margin-bottom: 14px; overflow: hidden;
  border-radius: var(--r-sm);
  background-color: var(--bg-3);
  background-size: cover; background-position: center;
  /* The band is a dark surface sitting inside a light section, so it declares
     the dark scope's ink for itself. Without this the numeral inherits
     .on-paper's near-black --ink and disappears into its own scrim. */
  --ink: #F2EEE4;
  color: var(--ink);
}
/* The art was drawn near-black for a dark ground. On paper it needs lifting or
   the band reads as six grey rectangles. */
.cap__media { filter: brightness(1.22) saturate(1.12); }
/* Enough ground under the numeral for it to hold at AA without dimming the
   half of the band that carries the picture. */
.cap__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(10,8,5,.86) 0%, rgba(10,8,5,.5) 34%, rgba(10,8,5,0) 62%);
}
.cap__num {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  z-index: 1;
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-size: clamp(26px, 2.4vw, 38px); line-height: .82; letter-spacing: -.02em;
  color: var(--ink);
}
a.cap__link:hover .cap__media { filter: brightness(1.38) saturate(1.2); }

.cap__title {
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.25;
  margin-bottom: 8px; max-width: 22ch;
}
.cap__copy { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
/* margin-top:auto pins this to the bottom of the cell, so the six line up
   across a row even though their copy runs to different lengths. */
.cap__cta {
  margin-top: auto; padding-top: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--orange);
}
.cap__cta .btn__arrow {
  width: 13px; height: 13px; flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
a.cap__link:hover .cap__cta .btn__arrow { transform: translateX(4px); }

/* Two columns from tablet down; the checklist still reads at a glance and the
   copy keeps a sane measure. */
@media (max-width: 1000px) { .build__grid { grid-template-columns: repeat(2, 1fr); } }

/* A phone gets the same promise: two columns, three rows, the whole list on one
   screen. Measured at 375x812 there is room for the copy as well as the list,
   so it stays visible rather than being hidden - clamped, because the longest
   of the six would otherwise push the last row off the screen and the list is
   what has to survive. Nothing is removed from the markup either way. */
@media (max-width: 620px) {
  .build { min-height: calc(100svh - var(--nav-h)); padding-block: clamp(28px, 6vw, 44px); }
  .build__head { margin-bottom: 20px; }
  .build__grid { gap: 14px 16px; }
  .cap { padding-top: 10px; }
  /* Two columns on a phone is a 160px cell, and the whole list still has to
     land in one screen. The band is budgeted against that, not against a
     ratio that would look nice on its own: at 160x32 it is a strip of the
     artwork rather than a picture of it, which is what the height allows. */
  .cap__link { --cap-band: 5 / 1; }
  .cap__media { margin-bottom: 8px; border-radius: 4px; }
  .cap__num { left: 9px; font-size: 19px; }
  .cap__title { font-size: 13.5px; margin-bottom: 6px; }
  /* The CTA costs a line in every cell, which on three stacked rows is the
     whole margin the phone had. The copy gives those lines back: the list and
     a way into each page matter more here than the third and fourth line of a
     description that continues on the page itself. */
  .cap__copy {
    font-size: 11.5px; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .cap__cta { padding-top: 10px; font-size: 12px; }
}

/* A short phone - an SE, or a tall one with the browser chrome showing - runs
   about 110px past the fold at the settings above. The list still has to land
   in one screen, so on a short viewport the copy gives up two more lines and
   the numerals come down a size. Measured at 375x667. */
@media (max-width: 620px) and (max-height: 720px) {
  .build { padding-block: 16px; }
  .build__head { margin-bottom: 10px; }
  .build__head h2 { font-size: 24px; }
  .build__head .lede { font-size: 13px; }
  .build__grid { gap: 9px 14px; }
  .cap { padding-top: 8px; }
  .cap__link { --cap-band: 7 / 1; }
  .cap__media { margin-bottom: 6px; }
  .cap__num { font-size: 15px; }
  .cap__copy { -webkit-line-clamp: 1; }
  .cap__cta { padding-top: 7px; }
}

/* ── Capability page ────────────────────────────────────── */
.cap-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 26%, 340px);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .cap-body__grid { grid-template-columns: 1fr; } }

.cap-body .prose { max-width: 62ch; }

/* The home page numbers everything it lists. Doing the same here ties the two
   together and gives a long page something to scan by - and it costs nothing in
   the editor, because the counter runs off the headings that are already there. */
.cap-body .prose { counter-reset: cap-h2; }
.cap-body .prose h2 {
  counter-increment: cap-h2;
  display: flex; align-items: baseline; gap: 16px;
  padding-top: 26px; border-top: 1px solid var(--line);
  margin-top: 2.4em;
}
.cap-body .prose h2::before {
  content: counter(cap-h2, decimal-leading-zero);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em;
  color: var(--orange); flex-shrink: 0;
  position: relative; top: -.25em;
}

/* The opening paragraph carries the whole argument, so it is sized like one. */
.cap-body .prose > p:first-child {
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--ink);
}

/* The deliverables list is the part a buyer actually reads line by line. Ruled
   rows rather than bullets, the same shape as the cards on the home page. */
.cap-body .prose ul { padding-left: 0; list-style: none; gap: 0; }
.cap-body .prose ul li {
  padding: 13px 0 13px 26px; border-top: 1px solid var(--line);
  position: relative;
}
.cap-body .prose ul li:last-child { border-bottom: 1px solid var(--line); }
.cap-body .prose ul li::before {
  content: ""; position: absolute; left: 2px; top: 1.15em;
  width: 9px; height: 1px; background: var(--orange);
}

/* Each paragraph under How we run it opens with its own label. Pulling that
   label onto its own line turns a wall of prose into three named moves. */
.cap-body .prose p strong:first-child {
  display: block; margin-bottom: 4px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--peach); font-weight: 500;
}

/* ── Capability page: the sticky card ───────────────────── */
.cap-aside { position: sticky; top: calc(var(--nav-h) + 24px); }
@media (max-width: 900px) { .cap-aside { position: static; } }
.cap-aside__card {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2); overflow: hidden;
}
.cap-aside__media { aspect-ratio: 16 / 10; overflow: hidden; }
.cap-aside__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-aside__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cap-aside__copy { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.cap-aside__mail { font-size: 12.5px; color: var(--ink-2); }
.cap-aside__mail a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.cap-more__list { list-style: none; display: grid; gap: 0; margin-top: 18px; }
.cap-more__list li { border-top: 1px solid var(--line); }
.cap-more__list li:last-child { border-bottom: 1px solid var(--line); }
.cap-more__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; font-family: var(--f-display);
  font-variation-settings: 'wdth' 104, 'wght' 600;
  font-size: clamp(16px, 1.6vw, 22px); color: var(--ink);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.cap-more__list a:hover { color: var(--orange); padding-left: 10px; }
.cap-more__list .btn__arrow { width: 18px; height: 18px; flex-shrink: 0; }

/* ── 06 · Case snapshots ────────────────────────────────── */
.cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); }
@media (max-width: 980px) { .cases__grid { grid-template-columns: 1fr; } }
.case {
  background: var(--void); padding: 26px 24px 28px;
  display: flex; flex-direction: column; gap: 16px;
  transition: background var(--dur) var(--ease);
}
.case:hover { background: var(--bg-2); }
.case__tag { align-self: flex-start; }
.case__row { display: flex; flex-direction: column; gap: 5px; }
.case__row dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--line-2); }
.case__row dd { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.case__result { margin-top: auto; padding-top: 18px; border-top: 2px solid var(--orange); }
.case__result .v {
  font-family: var(--f-display); font-variation-settings: 'wdth' 104, 'wght' 800;
  font-size: clamp(30px, 3.4vw, 44px); color: var(--red); line-height: .95;
}
.case__result .l { font-size: 12.5px; color: var(--ink-3); margin-top: 7px; line-height: 1.45; }
.case--todo { border: 1px dashed var(--line-2); background: transparent; }
.case--todo .placeholder { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--peach); }

/* ── 07 · Testimonials ──────────────────────────────────── */
.quotes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { .quotes__grid { grid-template-columns: 1fr; } }
.quote {
  border: 1px solid var(--line); border-top: 2px solid var(--orange);
  background: var(--bg-2); display: flex; flex-direction: column;
  border-radius: var(--r); overflow: hidden;
}
.quote__body { padding: 28px 30px; flex: 1; display: flex; flex-direction: column; gap: 22px; }
.quote blockquote {
  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; color: var(--ink);
}
.quote blockquote::before { content: "\201C"; color: var(--orange); }
.quote blockquote::after { content: "\201D"; color: var(--orange); }
.quote__who { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.quote__who img { width: 46px; height: 46px; object-fit: cover; border: 1px solid var(--line);
  border-radius: var(--r-sm); flex-shrink: 0; }
.quote__name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.quote__role { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.quote__org {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 30px; border-top: 1px solid var(--line); background: var(--void);
}
/* The two supplied logos are opaque tiles of opposite polarity: Rever is white
   on black, SHARGE is red on white. Neither a light plate nor a dark one suits
   both, so each tile is left to sit on its own - Rever's black merges into the
   band and its mark floats, SHARGE reads as a light chip. Replace this with a
   flush treatment once the client supplies transparent logo files.
   contain, not cover, so a non-square mark is never cropped. */
.quote__org img { width: 38px; height: 38px; object-fit: contain; border-radius: var(--r-sm); }

/* On a light card one of those two tiles always reads as a solid box, so the
   strip keeps the dark ground it was drawn for - Rever's black merges into it
   and SHARGE stays a light chip, exactly as on the dark sections. A small dark
   island, not a second theme: only the ink it actually uses is redeclared.
   Delete this once transparent logo files arrive. */
.on-paper .quote__org {
  --ink:   #F2EEE4;   /* 16.25:1 on the strip */
  --ink-3: #8A8274;   /*  4.95:1 on the strip */
  background: #14110D;
  color: var(--ink);
  border-top-color: #332E24;
}
.quote__orgName { font-family: var(--f-display); font-variation-settings: 'wdth' 104, 'wght' 700;
  text-transform: uppercase; font-size: 14px; letter-spacing: -.005em; }
.quote__orgInd { font-size: 11.5px; color: var(--ink-3); }

/* ── 08 · Industries ────────────────────────────────────── */
.inds { position: relative; isolation: isolate; overflow: hidden; }
.inds__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  filter: saturate(.4) contrast(1.1) brightness(.4) sepia(.25) hue-rotate(-12deg);
}
.inds::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(20,17,13,.78) 14%,
              rgba(20,17,13,.84) 70%, var(--bg) 100%);
}
.inds__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
@media (max-width: 900px) { .inds__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .inds__grid { grid-template-columns: 1fr; } }
.ind {
  background: rgba(26, 22, 16, .62); box-shadow: inset -1px -1px 0 var(--line);
  padding: 24px 20px 26px; min-height: 168px; position: relative; overflow: hidden;
  transition: background var(--dur) var(--ease);
}
.ind::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: var(--ember); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.ind:hover { background: rgba(36, 31, 23, .9); }
.ind:hover::before { transform: scaleX(1); }
.ind__icon { width: 24px; height: 24px; margin-bottom: 14px; }
.ind h3 { font-size: 16px; }
.ind p { font-size: 12.5px; color: var(--ink-3); margin-top: 9px; line-height: 1.5; }

/* ── 09 · Insights ──────────────────────────────────────── */
.posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .posts__grid { grid-template-columns: 1fr; } }
.post {
  border: 1px solid var(--line); background: var(--bg-2);
  border-radius: var(--r);
  padding: 24px; display: flex; flex-direction: column; gap: 13px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.post:hover { border-color: var(--line-2); background: var(--bg-3); }
.post h3 { font-size: clamp(17px, 1.4vw, 20px); }
.post p { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.post__meta { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between;
  gap: 12px; border-top: 1px solid var(--line); }

/* Full-bleed out of the card's own padding, so the picture meets the border
   rather than floating inside a frame. */
.post__media {
  display: block; margin: -24px -24px 0; overflow: hidden;
  border-radius: var(--r) var(--r) 0 0;
  aspect-ratio: 16 / 9; background: var(--bg-3);
}
.post__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.post:hover .post__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .post__media img { transition: none; } }

/* ── The spine ──────────────────────────────────────────── */
/* One line down the left of the page with a node per section, lit as that
   section comes up. The client's note was that the service is abstract and the
   page needs to show something; this shows the structure rather than buying
   another picture of it. Decorative, built in JS, absent without it.

   Placed against the document rather than inside a section, so it crosses the
   light sections and the dark ones alike - which is why it is drawn in --ink-3,
   the one ink that reads on both grounds. */
.spine {
  position: absolute; width: 7px; pointer-events: none; z-index: 2;
  /* Tracks the wrap's left edge so it stays in the page's gutter rather than
     drifting to the window edge on a wide screen; falls back to a fixed inset
     once the wrap is narrower than its max and the arithmetic goes negative. */
  left: max(18px, calc(50% - var(--wrap) / 2 + 18px));
}
.spine__track, .spine__fill {
  position: absolute; left: 3px; top: 0; bottom: 0; width: 1px;
}
.spine__track { background: var(--ink-3); opacity: .3; }
.spine__fill { background: var(--ember); transform-origin: top; transform: scaleY(0); }
.spine__node {
  position: absolute; left: 0; width: 7px; height: 7px; margin-top: -3px;
  border-radius: 50%; background: var(--ink-3); opacity: .55;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.spine__node.is-on {
  background: var(--orange); opacity: 1;
  box-shadow: 0 0 0 3px rgba(248, 120, 67, .16), 0 0 14px rgba(248, 120, 67, .5);
}
/* The branch into the section the node marks. */
.spine__node::after {
  content: ""; position: absolute; left: 7px; top: 3px; height: 1px; width: 0;
  background: var(--orange);
  transition: width var(--dur) var(--ease);
}
.spine__node.is-on::after { width: 13px; }
@media (prefers-reduced-motion: reduce) {
  .spine__node, .spine__node::after { transition: none; }
}
/* Narrower than this there is no gutter to stand in and the line crosses the
   cards instead of running beside them. The breakpoint lives here rather than
   in the script because a width check in JS is read once at load: a phone that
   rotates, or a window dragged narrow, would keep whatever it decided then. */
@media (max-width: 1179px) { .spine { display: none; } }

/* ── 10 · Careers / lore ────────────────────────────────── */
.join { background: var(--void); border-bottom: 1px solid var(--line); }
.join__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 78px); }
@media (max-width: 900px) { .join__grid { grid-template-columns: 1fr; } }
.lore {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-start; gap: 16px;
  margin-top: 26px; padding: 20px 22px; border: 1px solid var(--line-2); max-width: 60ch;
}
.lore::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: 46%; z-index: -2;
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
              url("../img/join-lore-bg.webp") right center / cover no-repeat;
}
.lore::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #000 0%, #000 58%, rgba(0,0,0,.6) 86%, rgba(0,0,0,0) 100%);
}
.lore svg { flex-shrink: 0; margin-top: 2px; }
.lore p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; max-width: 66%; }
.lore b { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .lore::after { display: none; } .lore p { max-width: none; } }

.leaders { display: flex; flex-direction: column; gap: 22px; margin-top: 26px; }
.leader { display: flex; gap: 16px; align-items: center; }
.leader img { width: 60px; height: 60px; object-fit: cover; flex-shrink: 0; }
.leader__name { font-family: var(--f-display); font-variation-settings: 'wdth' 104, 'wght' 700;
  text-transform: uppercase; font-size: 17px; letter-spacing: -.01em; }
.leader__role { color: var(--red); font-size: 12px; margin-top: 3px; }

/* ── 11 · Contact band ──────────────────────────────────── */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  /* Sits under the video: shows while the clip loads, and is the whole
     background on mobile where the clip is never fetched. */
  background: linear-gradient(135deg, #1A0509 0%, #000 65%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(70px, 9vw, 128px);
}
.cta-band__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* The clip is brightest exactly where the copy sits, so the scrim is heaviest
   on the left and releases hard toward the right where nothing overlaps it —
   that right-hand third is the only place the artwork is really legible. */
.cta-band__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10,8,5,.64) 0%, rgba(10,8,5,.50) 30%,
                           rgba(10,8,5,.08) 62%, rgba(10,8,5,0) 100%),
    linear-gradient(180deg, rgba(10,8,5,.14) 0%, rgba(10,8,5,0) 45%,
                            rgba(10,8,5,.18) 100%);
}
@media (max-width: 760px) {
  /* Narrow screens put the copy over the whole frame, so the scrim has to be
     even rather than directional — but light enough that the clip is still
     worth playing here. Measured, not guessed: see the contrast note below. */
  .cta-band__scrim { background: rgba(10,8,5,.58); }
}
/* Small text over a moving clip, everywhere it happens.
   --ink-3 and --ink-2 are tuned against a flat page ground; over video they land
   between 4.2 and 4.5 on the brightest frame, just under AA, and every one of
   these lines is small enough to need the full 4.5. Brightening the text rather
   than darkening the scrim is what keeps the clip visible, which is the point of
   having it. Each surface measured across 12-16 frames of its own clip. */
.inds .sechead__idx,
.cta-band .sechead__idx,
.cta-band__mail,
.page-head .sechead__idx,
.page-head .lede { color: var(--ink); }
.cta-band h2 { max-width: 18ch; }
/* Same reason as the two above: --ink-2 measured 3.99:1 here once the scrim
   came down. The lede is the longest thing to read on the band. */
.cta-band .lede { color: var(--ink); }
.cta-band .lede { margin-top: 16px; }
.cta-band__row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; align-items: center; }
/* This line measured 4.25:1 over the brightest frame of the clip even at full
   --ink, which is already the lightest ink in the system - the only remaining
   lever was darkening the whole band for one short line. It gets its own ground
   instead, which also pairs it with the button beside it. */
.cta-band__mail {
  font-size: 13.5px;
  background: var(--void); border-radius: var(--r-pill);
  padding: 13px 20px; display: inline-flex; align-items: center; gap: 6px;
}

/* Modal */
.modal { position: fixed; inset: 0; z-index: 120; display: none; }
.modal.is-open { display: block; }
.modal__scrim { position: absolute; inset: 0; background: rgba(5, 4, 2, .8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal__panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: min(88vh, 760px); overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line-2); border-top: 2px solid var(--orange);
  padding: 30px clamp(22px, 4vw, 38px) 32px;
}
.modal__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.modal__close:hover { color: var(--ink); }
.form { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); }
.field input, .field textarea, .field select {
  font-family: var(--f-body); font-size: 14.5px; color: var(--ink);
  background: var(--void); border: 1px solid var(--line); padding: 12px 14px;
  transition: border-color var(--dur) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--orange);
}
.field textarea { resize: vertical; min-height: 104px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .form__row { grid-template-columns: 1fr; } }
.form__note { font-size: 12px; color: var(--ink-3); }
.hp { position: absolute; left: -9999px; }

/* ── Contact page ───────────────────────────────────────── */
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

.contact__form { border: 1px solid var(--line); border-top: 2px solid var(--orange);
  background: var(--bg-2); padding: clamp(24px, 3.4vw, 42px); }

.contact__side { display: flex; flex-direction: column; gap: 1px;
  background: var(--line); border: 1px solid var(--line); }
.contact__block { background: var(--void); padding: 24px 26px 26px;
  display: flex; flex-direction: column; gap: 10px; }
.contact__big {
  font-family: var(--f-display); font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: clamp(17px, 1.6vw, 21px); color: var(--peach); letter-spacing: -.01em;
  word-break: break-word; transition: color var(--dur) var(--ease);
}
.contact__big:hover { color: var(--orange); }
.contact__note { font-size: 13px; color: var(--ink-3); }
.contact__note a { color: var(--ink-2); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.contact__note a:hover { color: var(--orange); }
.contact__block address { font-style: normal; font-size: 13.5px;
  color: var(--ink-2); line-height: 1.7; }

.contact__block--steps { background: var(--bg-2); }
.contact__steps { list-style: none; display: flex; flex-direction: column; gap: 18px;
  margin-top: 6px; padding: 0; }
.contact__steps li { display: flex; gap: 14px; }
.contact__steps .n { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--orange); flex-shrink: 0; padding-top: 2px; }
.contact__steps .k { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.contact__steps p { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 5px; }

/* ── Page head ──────────────────────────────────────────── */
.page-head {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--nav-h) + clamp(56px, 8vw, 110px)) 0 clamp(40px, 5vw, 70px);
  border-bottom: 1px solid var(--line); background: var(--void);
}
.page-head__video {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Same treatment as the home page CTA band: heaviest on the left under the
   copy, released toward the right where nothing overlaps the artwork. The
   head runs taller than the band, so the vertical layer is gentler here. */
.page-head__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(10,8,5,.64) 0%, rgba(10,8,5,.50) 30%,
                           rgba(10,8,5,.08) 62%, rgba(10,8,5,0) 100%),
    linear-gradient(180deg, rgba(10,8,5,.14) 0%, rgba(10,8,5,0) 45%,
                            rgba(10,8,5,.18) 100%);
}
@media (max-width: 760px) { .page-head__scrim { background: rgba(10,8,5,.58); } }
.page-head__rules {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(242,238,228,.05) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
}
.page-head h1 { max-width: 16ch; margin-top: 14px; font-size: clamp(38px, 6.4vw, 84px); }
.page-head .lede { margin-top: 20px; }

/* ── 12 · Footer ────────────────────────────────────────── */
.site-footer { background: var(--void); padding: clamp(46px, 6vw, 72px) 0 clamp(30px, 4vw, 48px); }
.footer__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(28px, 4vw, 60px);
  padding-bottom: 38px; border-bottom: 1px solid var(--line); }
@media (max-width: 820px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }
.footer__logo img { height: 26px; width: auto; margin-bottom: 18px; }
.site-footer address { font-style: normal; font-size: 13px; color: var(--ink-3); line-height: 1.7; }
.footer__col h4 { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--line-2); margin-bottom: 14px; }
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer__col a { font-size: 13.5px; color: var(--ink-2); }
.footer__col a:hover { color: var(--orange); }
.footer__bottom { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding-top: 24px; font-size: 12.5px; color: var(--ink-3); }