/* TTL Operations — shell and tokens.
 *
 * SOURCE FILE. Edited by hand. scripts/ttl-assemble.mjs concatenates this with
 * every section's own <style> block into site/assets/css/index.css.
 * Never edit site/assets/css/index.css — it is regenerated and your edits die.
 *
 * The palette is sampled from the client's own logo, not invented:
 *   #24486C  the brushed steel blue of the TTL letterforms
 *   #6C181E  the red of the arrow sweeping under them
 *   #EAE4D2  the cream of the word OPERATIONS
 * Everything else is derived from those three. The lit blue (#5A9BD8) exists
 * because #24486C on a dark ground fails contrast for anything a person has to
 * read or click; it is the same hue opened up, not a second brand colour.
 */

:root {
  /* grounds — navy-biased, never neutral grey */
  --ink:        #0B141E;
  --ink-raised: #11202F;
  --ink-edge:   #1B3049;

  /* light plane, for the reading sections below the hero */
  --paper:      #F3EFE6;
  --paper-edge: #DED7C7;

  /* brand */
  --steel:      #24486C;
  --steel-lit:  #5A9BD8;
  --cream:      #EAE4D2;
  --arrow:      #6C181E;
  --arrow-lit:  #C4434A;

  /* type on dark */
  --on-ink:       #EAE4D2;
  --on-ink-muted: #93A4B5;
  --mute:         #8397AA;   /* footer base line, on #071019 */

  /* type on light */
  --on-paper:       #14212E;
  --on-paper-muted: #51657A;

  --font-display: Archivo, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body:    Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-data:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* one spacing scale, used everywhere */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --gutter: clamp(20px, 5vw, 64px);
  --measure: 66ch;

  --mo-dur: .5s;
  --mo-ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* An anchor jump should land with air above the heading, not weld it to the
 * top edge of the window. */
section[id] { scroll-margin-top: clamp(16px, 4vh, 40px); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--steel-lit);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--cream);
  color: var(--ink);
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-data);
  font-size: 13px;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- shell --- */

.shell { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------- wordmark --- */
/* Their supplied logo is a JPEG of blue letters on a stock night skyline. The
 * skyline has nothing to do with the business and cannot sit in a header, so
 * the wordmark is rebuilt in type: the same two-tone relationship, no backdrop.
 */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .055em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: .38em;
}
.wordmark__ttl  { color: var(--steel-lit); }
.wordmark__ops  { color: var(--cream); font-weight: 600; letter-spacing: .12em; }

/* --------------------------------------------------------------- header --- */

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  padding-block: var(--s-5);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.site-header .wordmark { font-size: clamp(17px, 1.5vw, 21px); }

.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }

/* The links were inline inside a plain span, so the only thing separating them
 * was a collapsed text space and they read as one run-on string. */
.site-nav__links { display: flex; align-items: center; gap: clamp(16px, 1.9vw, 30px); }

/* Scoped to the link list on purpose. `.site-nav a` also matches the phone
 * button, and at (0,1,1) it outranks `.site-nav__phone` at (0,1,0) — which
 * wiped out the button's bottom border at rest and turned it red on hover. */
.site-nav__links a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--on-ink);
  text-decoration: none;
  padding-block: var(--s-2);
  border-bottom: 1px solid transparent;
  transition: border-color var(--mo-dur) var(--mo-ease), color var(--mo-dur) var(--mo-ease);
}
.site-nav__links a:hover { border-bottom-color: var(--arrow-lit); }

.site-nav__phone {
  font-family: var(--font-data);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--cream);
  text-decoration: none;
  border: 1px solid rgba(234, 228, 210, .32);
  padding: 9px 16px;
  white-space: nowrap;
  transition: background var(--mo-dur) var(--mo-ease), border-color var(--mo-dur) var(--mo-ease);
}
.site-nav__phone:hover { background: rgba(234, 228, 210, .1); border-color: var(--cream); }

/* Phones get the number and a menu button; the anchor list collapses.
 * The checkbox is hidden with opacity, not display:none — display:none takes
 * it out of the focus order and makes the menu unreachable from a keyboard. */

@media (max-width: 860px) {
  .site-nav__links { display: none; }

  /* Wordmark + phone button + burger measured 480px inside a 350px well at
   * 390. The number does not disappear — it moves into the panel, where it is
   * a full-width call button instead of a cramped chip. */
  .site-nav__phone { display: none; }
  .site-header .wordmark { font-size: 16px; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .005em;
  padding: 15px 26px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--mo-dur) var(--mo-ease),
              border-color var(--mo-dur) var(--mo-ease),
              color var(--mo-dur) var(--mo-ease);
}
.btn--primary {
  background: var(--steel-lit);
  border-color: var(--steel-lit);
  color: #07121C;
}
.btn--primary:hover { background: #7DB3E4; border-color: #7DB3E4; }

.btn--ghost {
  border-color: rgba(234, 228, 210, .5);
  color: var(--cream);
}
.btn--ghost:hover { background: rgba(234, 228, 210, .11); border-color: var(--cream); }

/* ---------------------------------------------------------------- rules --- */
/* The kicker rule is red because the arrow under their logo is red. It is the
 * only place red appears above the fold, which is what keeps it an accent. */

.kicker {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--steel-lit);
}
.kicker::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--arrow-lit);
  flex: none;
}

/* ------------------------------------------------------------- reveal ----- */
/* Sections start visible and settle, never parked at opacity 0 waiting on an
 * observer — a page that renders blank to a crawler or a screenshot is a bug,
 * not an animation. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------- shared section heading --- */
/* Five sections were each defining the same heading rules. One definition, so
 * the scale cannot drift section to section. */

.sec-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  margin: 0;
  text-wrap: balance;
}

.sec-lede {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.62;
}

/* ------------------------------------------------------------ mobile nav --- */
/* A checkbox, not a script: the panel has to open on a phone whose JS failed
 * to load as readily as on one where it did. Matches the pattern the generated
 * sites already use. */

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.nav-burger {
  display: none;
  align-items: center;
  gap: 9px;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
  border: 1px solid rgba(234, 228, 210, .32);
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}
.nav-burger__bars { display: grid; gap: 3px; }
.nav-burger__bars i { display: block; width: 16px; height: 1.5px; background: currentColor; }

.nav-panel {
  display: none;
  position: absolute;
  inset: 100% var(--gutter) auto var(--gutter);
  margin-top: var(--s-3);
  background: var(--ink-raised);
  border: 1px solid var(--ink-edge);
  padding: var(--s-4) var(--s-5) var(--s-5);
}
.nav-panel a {
  display: block;
  padding: var(--s-3) 0;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: var(--cream);
  border-bottom: 1px solid var(--ink-edge);
}
.nav-panel a:last-child { border-bottom: 0; }

.nav-panel__call {
  display: block;
  margin-top: var(--s-4);
  padding: 14px 0 !important;
  text-align: center;
  font-family: var(--font-data);
  font-size: 15px;
  letter-spacing: .04em;
  color: #07121C !important;
  background: var(--steel-lit);
  border-bottom: 0 !important;
}

.nav-toggle:checked ~ .nav-panel { display: block; }
.nav-toggle:focus-visible + .nav-burger { outline: 2px solid var(--steel-lit); outline-offset: 3px; }

@media (max-width: 860px) {
  .nav-burger { display: inline-flex; }
}

/* ---------------------------------------------------------------- footer --- */

.site-footer {
  background: #071019;
  color: var(--on-ink);
  padding-block: clamp(48px, 6vw, 80px) clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--ink-edge);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--ink-edge);
}
.site-footer .wordmark { font-size: 22px; margin-bottom: var(--s-4); display: inline-flex; }
.site-footer__blurb { margin: 0; max-width: 34ch; font-size: 15px; color: var(--on-ink-muted); }

.site-footer h3 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.site-footer li { font-size: 15px; color: var(--on-ink-muted); }
.site-footer a { color: var(--cream); text-decoration: none; border-bottom: 1px solid transparent; }
.site-footer a:hover { border-bottom-color: var(--arrow-lit); }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-5);
}
.site-footer__legal a { font-size: 14px; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-5);
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--mute);
}

@media (max-width: 860px) {
  .site-footer__top { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ---- section: hero ---- */
#hero {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    display: grid;
    grid-template-rows: 1fr auto;
    overflow: hidden;
    background: var(--ink);
  }

  #hero .hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }
  #hero .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The path enters bottom-centre and the tent line runs across the upper
     * third. Holding the focal point just above centre keeps both in shot when
     * the hero goes tall on a phone and the sides get cropped away. */
    object-position: 50% 46%;
  }

  /* Two scrims, not one. The vertical pass keeps the header and the dispatch
   * strip legible at the edges; the horizontal pass opens a reading well on
   * the left without flattening the sky the headline sits against. */
  #hero .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(11,20,30,.56) 0%, rgba(11,20,30,.10) 24%, rgba(11,20,30,.16) 56%, rgba(11,20,30,.88) 100%),
      linear-gradient(96deg, rgba(11,20,30,.84) 0%, rgba(11,20,30,.46) 44%, rgba(11,20,30,.04) 76%);
  }

  #hero .hero__inner {
    align-self: center;
    padding-block: clamp(120px, 16vh, 190px) clamp(40px, 6vh, 72px);
  }

  /* Width is set on the elements that own a font-size, not on the wrapper.
   * A ch on the wrapper resolves against the BODY size, which squeezed the
   * display headline to about 170px and wrapped it one word per line. */
  #hero .hero__copy { max-width: min(720px, 62%); }

  #hero h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.75rem, 6.4vw, 5.1rem);
    line-height: .98;
    letter-spacing: -.03em;
    margin: 0 0 var(--s-5);
    max-width: 12ch;
    color: #FFFFFF;
    text-wrap: balance;
    text-shadow: 0 2px 28px rgba(4, 10, 18, .5);
  }

  /* Their logo is a wordmark with a red arrow driving out from under it. That
   * arrow is the one piece of their identity worth keeping, so it becomes the
   * page's punctuation: it closes the headline instead of a full stop. */
  #hero .arrow-mark {
    display: inline-block;
    width: .92em;
    height: .34em;
    margin-left: .14em;
    vertical-align: baseline;
    color: var(--arrow-lit);
    flex: none;
  }

  #hero .kicker { white-space: nowrap; }

  #hero .hero__sub {
    max-width: 46ch;
    margin: 0 0 var(--s-6);
    font-size: clamp(16.5px, 1.35vw, 19px);
    line-height: 1.58;
    color: #D9E1EA;
  }

  #hero .hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

  /* ------------------------------------------------------- dispatch strip --- */
  /* The four facts a caller asks for before anything else: what it costs, when
   * they work, whether the quote is free, and whether they come to you. They
   * are set as a dispatch sheet rather than floated in a card, because this is
   * an operations company and a strip of hard facts is what one looks like. */

  #hero .dispatch {
    position: relative;
    z-index: 2;
    margin: 0;
    border-top: 1px solid rgba(90, 155, 216, .4);
    background: linear-gradient(180deg, rgba(11,20,30,.55), rgba(11,20,30,.88));
    backdrop-filter: blur(3px);
  }
  #hero .dispatch__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  #hero .dispatch__cell {
    padding: var(--s-5) 0;
    border-left: 1px solid rgba(234, 228, 210, .16);
    padding-left: clamp(16px, 2vw, 28px);
  }
  #hero .dispatch__cell:first-child { border-left: 0; padding-left: 0; }

  #hero .dispatch dt {
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
    margin-bottom: var(--s-2);
  }
  #hero .dispatch dd {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(17px, 1.5vw, 21px);
    letter-spacing: -.012em;
    color: var(--cream);
    font-variant-numeric: tabular-nums;
  }
  #hero .dispatch dd span {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13.5px;
    letter-spacing: 0;
    color: var(--on-ink-muted);
    margin-top: 2px;
  }

  @media (max-width: 860px) {
    #hero { min-height: 100svh; }
    #hero .hero__copy { max-width: none; }
    #hero h1 { max-width: none; }
    #hero .kicker { white-space: normal; }
    #hero .hero__inner { padding-block: clamp(96px, 14vh, 130px) var(--s-6); }
    #hero .hero__cta { flex-direction: column; align-items: stretch; }
    #hero .hero__cta .btn { width: 100%; }

    #hero .dispatch__grid { grid-template-columns: repeat(2, 1fr); }
    #hero .dispatch__cell {
      padding-block: var(--s-4);
      border-top: 1px solid rgba(234, 228, 210, .16);
    }
    #hero .dispatch__cell:nth-child(-n+2) { border-top: 0; }
    #hero .dispatch__cell:nth-child(odd) { border-left: 0; padding-left: 0; }
  }

/* ---- section: what-we-run ---- */
#what-we-run {
    background: var(--paper);
    color: var(--on-paper);
    padding-block: clamp(64px, 9vw, 128px);
  }

  #what-we-run .wwr__grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(32px, 5vw, 88px);
    align-items: start;
  }

  #what-we-run .wwr__intro { display: grid; gap: var(--s-5); align-content: start; }

  /* The photo belongs in this column and not beside the ledger: it shows the
   * check-in table, which is the second row of that ledger, and it fills the
   * run of dead space a short intro leaves under itself next to five rows. */
  #what-we-run .wwr__shot {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper-edge);
  }
  #what-we-run .wwr__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #what-we-run .kicker { color: var(--steel); }

  #what-we-run h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.02;
    letter-spacing: -.028em;
    margin: 0;
    max-width: 14ch;
    text-wrap: balance;
  }

  #what-we-run .wwr__lede {
    margin: 0;
    max-width: 42ch;
    font-size: clamp(16px, 1.2vw, 17.5px);
    line-height: 1.62;
    color: var(--on-paper-muted);
  }

  /* A ledger, not a card grid. These five are an inventory of what can be
   * bought, not a sequence and not five equal tiles — so they get one shared
   * set of hairlines and no borders, fills or shadows of their own. The
   * sequence treatment is reserved for "How a job runs", where order is real
   * information. */
  #what-we-run .wwr__list { margin: 0; }

  #what-we-run .wwr__row {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: clamp(16px, 3vw, 40px);
    padding-block: clamp(20px, 2.6vw, 30px);
    border-top: 1px solid var(--paper-edge);
  }
  #what-we-run .wwr__row:last-child { border-bottom: 1px solid var(--paper-edge); }

  #what-we-run .wwr__row dt {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(18px, 1.55vw, 21px);
    line-height: 1.24;
    letter-spacing: -.014em;
    color: var(--on-paper);
    text-wrap: balance;
  }

  #what-we-run .wwr__row dd {
    margin: 0;
    font-size: clamp(15.5px, 1.15vw, 16.5px);
    line-height: 1.62;
    color: var(--on-paper-muted);
    max-width: 52ch;
  }

  /* The rate line closes the ledger the way a quote closes a job sheet. */
  #what-we-run .wwr__rate {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-3) var(--s-5);
    margin: var(--s-6) 0 0;
    padding-top: var(--s-5);
    font-family: var(--font-data);
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--on-paper-muted);
  }
  #what-we-run .wwr__rate b {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -.01em;
    color: var(--on-paper);
  }

  @media (max-width: 860px) {
    #what-we-run .wwr__grid { grid-template-columns: 1fr; gap: var(--s-6); }
    #what-we-run .wwr__intro { position: static; }
    #what-we-run h2 { max-width: none; }
    #what-we-run .wwr__row { grid-template-columns: 1fr; gap: var(--s-2); }
  }

/* ---- section: how-a-job-runs ---- */
#how-a-job-runs {
    background: var(--ink);
    color: var(--on-ink);
    padding-block: 0 clamp(64px, 8vw, 112px);
  }

  /* The band is the empty street an hour before a market opens — the literal
   * state step 01 starts from, and the reason the four steps below read as a
   * day rather than a list. */
  #how-a-job-runs .hjr__band {
    position: relative;
    margin: 0 0 clamp(48px, 7vw, 96px);
    /* Height, not aspect-ratio. With `aspect-ratio` set, `max-height` shrinks
     * the BOX's width to preserve the ratio — the band rendered 966px wide
     * inside a 1536px section with black either side. */
    height: clamp(240px, 30vw, 440px);
    overflow: hidden;
    background: var(--ink-raised);
  }
  #how-a-job-runs .hjr__band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 58%;
  }
  #how-a-job-runs .hjr__band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,20,30,.72) 0%, rgba(11,20,30,.18) 34%, rgba(11,20,30,.82) 100%);
  }

  #how-a-job-runs .hjr__head {
    display: grid;
    gap: var(--s-5);
    max-width: 46ch;
    margin-bottom: clamp(36px, 5vw, 64px);
  }
  #how-a-job-runs .sec-lede { color: var(--on-ink-muted); }

  /* A rail, not four cards. One line runs across all four steps, so they read
   * as one sequence with stations on it, and the red arrow closes the rail the
   * way it closes the wordmark. */
  /* The markers are the numbering; the browser's own list markers were
   * rendering "1." beside "01". */
  #how-a-job-runs .hjr__rail { list-style: none; margin: 0; padding: 0; }

  #how-a-job-runs .hjr__rail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 3vw, 44px);
    position: relative;
    border-top: 1px solid var(--ink-edge);
    padding-top: var(--s-6);
  }

  #how-a-job-runs .hjr__step { position: relative; }
  #how-a-job-runs .hjr__step::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--s-6) - 1px);
    left: 0;
    width: 28px;
    height: 3px;
    background: var(--steel-lit);
  }

  #how-a-job-runs .hjr__num {
    display: block;
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2em;
    color: var(--steel-lit);
    margin-bottom: var(--s-3);
    font-variant-numeric: tabular-nums;
  }

  #how-a-job-runs .hjr__step h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(18px, 1.5vw, 20px);
    line-height: 1.2;
    letter-spacing: -.014em;
    margin: 0 0 var(--s-3);
    color: var(--cream);
    text-wrap: balance;
  }

  #how-a-job-runs .hjr__step p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--on-ink-muted);
  }

  #how-a-job-runs .hjr__close {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-top: clamp(36px, 5vw, 56px);
  }
  #how-a-job-runs .hjr__close p {
    margin: 0;
    font-size: 16.5px;
    color: var(--cream);
  }
  #how-a-job-runs .hjr__close svg { width: 52px; height: 19px; color: var(--arrow-lit); flex: none; }

  @media (max-width: 860px) {
    #how-a-job-runs .hjr__band { height: clamp(200px, 56vw, 300px); }

    #how-a-job-runs .hjr__rail {
      grid-template-columns: 1fr;
      gap: 0;
      border-top: 0;
      padding-top: 0;
    }
    #how-a-job-runs .hjr__step {
      padding: var(--s-5) 0 var(--s-5) var(--s-5);
      border-left: 1px solid var(--ink-edge);
    }
    #how-a-job-runs .hjr__step::before {
      top: var(--s-6);
      left: -1px;
      width: 3px;
      height: 22px;
    }
    #how-a-job-runs .hjr__close { padding-left: var(--s-5); }
  }

/* ---- section: a-day-we-ran ---- */
#a-day-we-ran {
    position: relative;
    isolation: isolate;
    background: var(--ink);
    color: var(--on-ink);
    min-height: clamp(440px, 62svh, 640px);
    display: grid;
    align-items: end;
    overflow: hidden;
  }

  #a-day-we-ran .adwr__media { position: absolute; inset: 0; z-index: -2; }
  #a-day-we-ran .adwr__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
  }
  #a-day-we-ran .adwr__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(11,20,30,.46) 0%, rgba(11,20,30,.40) 42%, rgba(11,20,30,.95) 100%),
      linear-gradient(92deg, rgba(11,20,30,.84) 0%, rgba(11,20,30,.52) 46%, rgba(11,20,30,.20) 84%);
  }

  /* The width cap lives on an inner box. Putting it on the element that also
   * carries .shell meant the shell's `margin-inline: auto` centred a 54ch
   * column in the middle of the section instead of setting it at the gutter. */
  #a-day-we-ran .adwr__copy { padding-block: clamp(48px, 8vw, 96px); }
  #a-day-we-ran .adwr__inner { max-width: 54ch; }

  #a-day-we-ran .kicker { margin-bottom: var(--s-5); }
  #a-day-we-ran .sec-h2 { color: #FFFFFF; margin-bottom: var(--s-5); }

  #a-day-we-ran p {
    margin: 0;
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.62;
    color: #D9E1EA;
  }
  #a-day-we-ran p + p { margin-top: var(--s-4); }

  #a-day-we-ran .adwr__stamp {
    margin-top: var(--s-6);
    font-family: var(--font-data);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
  }

  @media (max-width: 860px) {
    #a-day-we-ran { min-height: 72svh; }
    #a-day-we-ran .adwr__media img { object-position: 58% 42%; }
  }

/* ---- section: who-we-are ---- */
#who-we-are {
    background: var(--paper);
    color: var(--on-paper);
    padding-block: clamp(64px, 9vw, 128px);
  }

  #who-we-are .wwa__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
  }

  #who-we-are .kicker { color: var(--steel); }
  #who-we-are .wwa__head { display: grid; gap: var(--s-5); }
  #who-we-are .sec-h2 { max-width: 15ch; }

  #who-we-are .wwa__body p {
    margin: 0;
    font-size: clamp(16px, 1.2vw, 17.5px);
    line-height: 1.66;
    color: var(--on-paper-muted);
    max-width: 54ch;
  }
  #who-we-are .wwa__body p + p { margin-top: var(--s-4); }

  /* Their own two claims, set as a short ledger rather than dressed up as
   * testimonials. Nobody is quoted, because nobody has given us a quote. */
  #who-we-are .wwa__claims {
    display: grid;
    gap: var(--s-5);
    margin-top: var(--s-7);
    padding-top: var(--s-6);
    border-top: 1px solid var(--paper-edge);
  }
  #who-we-are .wwa__claim {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: var(--s-4);
    align-items: start;
  }
  #who-we-are .wwa__claim svg { width: 38px; height: 14px; margin-top: .42em; color: var(--arrow); }
  #who-we-are .wwa__claim p { margin: 0; color: var(--on-paper); font-size: 16.5px; }

  #who-we-are .wwa__facts {
    display: grid;
    gap: var(--s-4);
    margin-top: var(--s-7);
    padding-top: var(--s-6);
    border-top: 1px solid var(--paper-edge);
  }
  #who-we-are .wwa__fact {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: var(--s-4);
    align-items: baseline;
  }
  #who-we-are .wwa__fact dt {
    font-family: var(--font-data);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--on-paper-muted);
  }
  #who-we-are .wwa__fact dd {
    margin: 0;
    font-size: 16px;
    color: var(--on-paper);
  }

  @media (max-width: 860px) {
    #who-we-are .wwa__grid { grid-template-columns: 1fr; gap: var(--s-6); }
    #who-we-are .sec-h2 { max-width: none; }
    #who-we-are .wwa__fact { grid-template-columns: 1fr; gap: var(--s-1); }
  }

/* ---- section: common-questions ---- */
#common-questions {
    background: var(--paper);
    color: var(--on-paper);
    padding-block: 0 clamp(64px, 9vw, 128px);
  }

  #common-questions .cq__inner {
    border-top: 1px solid var(--paper-edge);
    padding-top: clamp(48px, 7vw, 96px);
  }

  #common-questions .kicker { color: var(--steel); }
  #common-questions .cq__head { margin-bottom: clamp(32px, 4vw, 56px); }

  #common-questions .cq__list {
    display: grid;
    gap: 0;
    max-width: 84ch;
  }

  #common-questions .cq__item {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 0 var(--s-4);
    padding-block: clamp(20px, 2.4vw, 28px);
    border-bottom: 1px solid var(--paper-edge);
  }
  #common-questions .cq__item:first-child { border-top: 1px solid var(--paper-edge); }

  #common-questions .cq__n {
    font-family: var(--font-data);
    font-size: 12px;
    letter-spacing: .12em;
    color: var(--steel);
    padding-top: .35em;
    font-variant-numeric: tabular-nums;
  }

  #common-questions dt {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(17px, 1.4vw, 19px);
    line-height: 1.3;
    letter-spacing: -.012em;
    color: var(--on-paper);
  }

  #common-questions dd {
    grid-column: 2;
    margin: var(--s-3) 0 0;
    font-size: 16px;
    line-height: 1.62;
    color: var(--on-paper-muted);
    max-width: 62ch;
  }

  @media (max-width: 860px) {
    #common-questions .cq__item { grid-template-columns: 1.9rem 1fr; }
  }

/* ---- section: tell-us-about-the-job ---- */
#tell-us-about-the-job {
    background: var(--ink);
    color: var(--on-ink);
    padding-block: clamp(64px, 9vw, 128px);
  }

  #tell-us-about-the-job .tuj__grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(36px, 6vw, 88px);
    align-items: start;
  }

  #tell-us-about-the-job .tuj__head { display: grid; gap: var(--s-5); }
  #tell-us-about-the-job .sec-h2 { color: #FFFFFF; max-width: 13ch; }
  #tell-us-about-the-job .sec-lede { color: var(--on-ink-muted); max-width: 42ch; }

  #tell-us-about-the-job .tuj__direct {
    display: grid;
    gap: var(--s-4);
    margin-top: var(--s-6);
    padding-top: var(--s-6);
    border-top: 1px solid var(--ink-edge);
  }
  #tell-us-about-the-job .tuj__direct div {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: var(--s-4);
    align-items: baseline;
  }
  #tell-us-about-the-job .tuj__direct dt {
    font-family: var(--font-data);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
  }
  #tell-us-about-the-job .tuj__direct dd { margin: 0; font-size: 16px; color: var(--cream); }
  #tell-us-about-the-job .tuj__direct a { text-decoration: none; border-bottom: 1px solid rgba(234,228,210,.32); }
  #tell-us-about-the-job .tuj__direct a:hover { border-bottom-color: var(--arrow-lit); }

  /* ------------------------------------------------------------------ form --- */

  #tell-us-about-the-job .tuj__form { display: grid; gap: var(--s-5); }

  #tell-us-about-the-job .field { display: grid; gap: var(--s-2); }
  #tell-us-about-the-job .field--pair { grid-template-columns: 1fr 1fr; gap: var(--s-5); display: grid; }

  #tell-us-about-the-job label {
    font-family: var(--font-data);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
  }

  #tell-us-about-the-job .field__input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--cream);
    /* --ink-edge on --ink-raised is 1.23:1 and --ink-raised on --ink is
     * 1.12:1: both far under the 3:1 WCAG floor for a UI boundary, which left
     * the only cue that these are inputs being the label above them. This is
     * the page's entire call to action, so the border carries it. */
    background: #16293C;
    border: 1px solid rgba(234, 228, 210, .42);
    border-radius: 0;
    padding: 13px 14px;
    transition: border-color var(--mo-dur) var(--mo-ease), background var(--mo-dur) var(--mo-ease);
  }
  #tell-us-about-the-job .field__input::placeholder { color: #8FA3B6; }
  #tell-us-about-the-job .field__input:focus {
    outline: none;
    border-color: var(--steel-lit);
    box-shadow: inset 0 0 0 1px var(--steel-lit);
    background: #16293C;
  }
  #tell-us-about-the-job textarea.field__input { resize: vertical; min-height: 132px; }

  #tell-us-about-the-job .tuj__submit { justify-self: start; }

  #tell-us-about-the-job .tuj__fine {
    margin: 0;
    font-size: 13.5px;
    color: var(--on-ink-muted);
  }

  @media (max-width: 860px) {
    #tell-us-about-the-job .tuj__grid { grid-template-columns: 1fr; }
    #tell-us-about-the-job .sec-h2 { max-width: none; }
    #tell-us-about-the-job .field--pair { grid-template-columns: 1fr; gap: var(--s-5); }
    #tell-us-about-the-job .tuj__submit { justify-self: stretch; }
    #tell-us-about-the-job .tuj__direct div { grid-template-columns: 1fr; gap: var(--s-1); }
  }