@font-face {
  font-family: 'TradecueDisplay';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/tradecue-display.woff2?v=1') format('woff2');
}

@font-face {
  font-family: 'TradecueDisplay';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/tradecue-display-italic.woff2?v=1') format('woff2');
}

/* =========================================================================
   Tradecue — site stylesheet

   Tailwind (Play CDN) handles layout: grid, flex, spacing, breakpoints. This
   file handles everything Tailwind has no opinion about — the typography, the
   palette, the rules, the textures and the motion. Keeping the split that way
   means the art direction lives in one readable place rather than being spread
   across four hundred utility classes in the markup.

   The page alternates deep navy and warm paper. That rhythm is the whole
   design: navy is where the product asserts something, paper is where it
   explains itself. A site that is dark the whole way down reads as a dashboard,
   and this is meant to read as a publication.
   ========================================================================= */

:root {
  /* Ink through navy. Four steps, because three was not enough to separate a
     raised card from the section behind it without resorting to a border. */
  --ink: #06111c;
  --navy: #0a1b2b;
  --navy-raised: #0f2436;
  --navy-line: #1b3348;

  /* Paper. Warm, not white — a cool white next to this navy goes blue and the
     whole page looks like a login screen. */
  --paper: #f2eee6;
  --paper-raised: #fbf8f2;
  --paper-line: #ddd5c6;

  /* One gold, one lift for hover and small text where the base is too dim. */
  --gold: #c8a24a;
  --gold-lift: #e4c782;
  --gold-dim: rgba(200, 162, 74, 0.28);

  /* The same gold, taken down for use on paper. #c8a24a is pitched to glow on
     navy, which leaves it at about 2:1 against a warm off-white — fine for a
     rule, unreadable as an eyebrow. This one clears 5:1 and still reads as the
     same colour, because it is: the hue is unchanged and only the value moves. */
  --gold-on-paper: #8a6a1f;

  --on-dark: #edf2f7;
  --on-dark-muted: #93a7b9;
  --on-paper: #16232e;
  --on-paper-muted: #53677a;

  --measure: 34rem; /* Reading width for body copy. */
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  /* The header is fixed, so an anchor landing at the very top of the viewport
     lands underneath it. Every in-page jump on the site is corrected here
     rather than with a spacer element inside each section. */
  scroll-padding-top: 6.5rem;
  -webkit-text-size-adjust: 100%;
}

#what-you-get { scroll-margin-top: 6.5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--navy);
  color: var(--on-dark);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* Belt and braces: nothing may cause a sideways scroll. */
}

::selection { background: var(--gold); color: var(--ink); }

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
  font-synthesis: none;
}

.display {
  font-family: 'TradecueDisplay', ui-serif, Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.04;
  letter-spacing: -0.022em;
  /* Default opsz matches mid-size headlines. Hero (.d1) and small titles
     (.d3) override: locking 144 on every .display made 1.5rem titles hairline
     and fuzzy on navy. */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 36, 'wght' 400;
}

/* Fluid display sizes. clamp() rather than breakpoints so a headline never
   sits one pixel over the edge on the one phone width nobody tested. */
.d1 {
  font-size: clamp(2.6rem, 7.2vw, 5.1rem);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144, 'wght' 400;
}
.d2 {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 48, 'wght' 400;
}
.d3 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.18;
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 14, 'wght' 400;
}

.serif-italic {
  font-style: italic;
  font-variation-settings: 'SOFT' 8, 'WONK' 1, 'opsz' 36, 'wght' 400;
}
.d1 .serif-italic,
.d1.serif-italic {
  font-variation-settings: 'SOFT' 8, 'WONK' 1, 'opsz' 144, 'wght' 400;
}
.d3 .serif-italic,
.d3.serif-italic {
  font-variation-settings: 'SOFT' 8, 'WONK' 1, 'opsz' 14, 'wght' 400;
}

/* The eyebrow. Small caps, wide tracking, a gold rule to its left. It marks a
   section the way a standfirst marks a column. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: '';
  width: 2.2rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.85;
}
.eyebrow--center::after {
  content: '';
  width: 2.2rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.85;
}

/* Section numerals — 01 / 02 / 03. Editorial furniture; they tell you how long
   the page is without a progress bar. */
.numeral {
  font-family: 'TradecueDisplay', serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  opacity: 0.75;
}

.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.6; }
.measure { max-width: var(--measure); }

/* -------------------------------------------------------------------------
   Sections: the navy / paper alternation
   ------------------------------------------------------------------------- */

.sec { position: relative; padding: clamp(4.5rem, 9vw, 8rem) 0; }
.sec--navy { background: var(--navy); color: var(--on-dark); }
.sec--ink { background: var(--ink); color: var(--on-dark); }
.sec--paper { background: var(--paper); color: var(--on-paper); }

/* Muted body copy. The default is the dark-background value, because the hero
   and the footer are dark but are not .sec--* sections — without a base rule
   they would inherit full-strength text and lose the hierarchy. */
.muted { color: var(--on-dark-muted); }
.sec--paper .muted { color: var(--on-paper-muted); }
.sec--navy .muted, .sec--ink .muted { color: var(--on-dark-muted); }
.card--paper .muted { color: var(--on-paper-muted); }
/* Navy cards on a paper section keep the dark-section type colours.
   Without this, .sec--paper .muted paints charcoal on navy and the copy
   disappears. */
.sec--paper .card:not(.card--paper),
.sec--paper .card:not(.card--paper) .display {
  color: var(--on-dark);
}
.sec--paper .card:not(.card--paper) .muted {
  color: var(--on-dark-muted);
}

/* Every gold thing on a paper section, moved to the readable gold in one
   place. Two classes beats Tailwind's single-class .text-gold on specificity,
   so this wins wherever it applies without any !important. */
.sec--paper .numeral,
.sec--paper .eyebrow,
.sec--paper .text-gold,
.sec--paper .tick,
.sec--paper .field__label { color: var(--gold-on-paper); }
.sec--paper .numeral { opacity: 1; }
.sec--paper .eyebrow::before,
.sec--paper .eyebrow::after { background: var(--gold-on-paper); }

/* The seam between two sections. A single gold hairline that fades out at both
   ends, so the join reads as a printed rule rather than a border. */
.seam {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 18%, var(--gold-dim) 82%, transparent);
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink);
  overflow: visible;
  isolation: isolate;
}

/* Blueprint grid. Two repeating-linear-gradients, masked to fade toward the
   bottom so the copy never has to fight it. This is the only texture on the
   site and it earns its place: the product is drawings and site plans. */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    repeating-linear-gradient(0deg, rgba(200, 162, 74, 0.09) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(200, 162, 74, 0.09) 0 1px, transparent 1px 64px);
  -webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000 15%, transparent 78%);
  mask-image: radial-gradient(120% 85% at 50% 0%, #000 15%, transparent 78%);
}

/* A single warm glow behind the headline, off-centre. Centred glows look like a
   stock gradient; off-centre reads as light coming from somewhere. */
.hero__glow {
  position: absolute;
  z-index: -1;
  top: -18%;
  left: 58%;
  width: min(70rem, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(200, 162, 74, 0.16), transparent 62%);
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
  border-bottom: 1px solid transparent;
}
/* Transparent over the hero, solid once you have left it. The class is added by
   site.js on scroll. */
.masthead.is-stuck {
  background: rgba(6, 17, 28, 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--gold-dim);
}

.wordmark {
  font-family: 'TradecueDisplay', serif;
  font-weight: 500;
  font-size: 1.16rem;
  letter-spacing: 0.005em;
  color: var(--on-dark);
  line-height: 1;
}
.wordmark b { font-weight: 500; color: var(--gold); }

/* Nav links get a gold rule that draws in from the left on hover. The current
   page keeps it drawn. */
.navlink {
  position: relative;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--on-dark-muted);
  padding: 0.35rem 0;
  transition: color 0.25s ease;
}
.navlink::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.navlink:hover { color: var(--on-dark); }
.navlink:hover::after, .navlink[aria-current='page']::after { transform: scaleX(1); }
.navlink[aria-current='page'] { color: var(--on-dark); }

/* The mobile drawer. A panel rather than a full-screen takeover, because the
   nav is six items and a takeover for six items is theatre. */
.drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
  background: rgba(6, 17, 28, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.drawer.is-open { max-height: 32rem; }

.burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--on-dark);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: 2px; /* Near-square. Rounded pills read as consumer app. */
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease, box-shadow 0.25s ease;
}
.btn:active { transform: translateY(1px); }

.btn--gold {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
.btn--gold:hover { background: var(--gold-lift); }

.btn--ghost {
  border-color: rgba(200, 162, 74, 0.45);
  color: var(--on-dark);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--gold); background: rgba(200, 162, 74, 0.09); }

.sec--paper .btn--ghost { color: var(--on-paper); border-color: rgba(22, 35, 46, 0.28); }
.sec--paper .btn--ghost:hover { border-color: var(--ink); background: rgba(22, 35, 46, 0.05); }

/* An inline text link that ends in an arrow. The arrow moves, the text does
   not — cheaper to read than a whole element sliding. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gold);
  transition: color 0.2s ease;
}
.tlink svg { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1); }
.tlink:hover { color: var(--gold-lift); }
.tlink:hover svg { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */

.card {
  position: relative;
  padding: 1.9rem;
  border: 1px solid var(--navy-line);
  background: var(--navy-raised);
  color: var(--on-dark);
  border-radius: 3px;
  transition: border-color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}
.card:hover { border-color: var(--gold-dim); transform: translateY(-3px); }

/* A gold rule that grows along the card's top edge on hover. One gesture,
   repeated everywhere something is hoverable, so the site has a single idea
   about what "live" looks like. */
.card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.card:hover::before { transform: scaleX(1); }

.card--paper {
  background: var(--paper-raised);
  border-color: var(--paper-line);
  color: var(--on-paper);
}
.card--paper:hover { border-color: rgba(200, 162, 74, 0.6); }

/* Documentary stills on the three public records. Kept off the hero. */
.still {
  margin: 0 0 2.5rem;
}
.still__frame {
  position: relative;
  aspect-ratio: 2.2 / 1;
  overflow: hidden;
  border-radius: 3px;
  background: var(--ink);
  border: 1px solid var(--navy-line);
}
.sec--paper .still__frame {
  border-color: var(--paper-line);
}
.still__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(1.06);
}
.still__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(6, 17, 28, 0.28) 100%);
}
.sec--navy .still__frame::after {
  background: linear-gradient(180deg, transparent 55%, rgba(6, 17, 28, 0.4) 100%);
}
.still__caption {
  margin: 0.7rem 0 0;
  font-size: 0.88rem;
  color: var(--on-dark-muted);
}
.sec--paper .still__caption {
  color: var(--on-paper-muted);
}
.still__caption::before {
  content: '— ';
  color: var(--gold);
}
.sec--paper .still__caption::before {
  color: var(--gold-on-paper);
}
@media (max-width: 640px) {
  .still__frame { aspect-ratio: 16 / 10; }
}

/* A + B + C in the hero. Plus signs are painted with ::after on desktop so
   they never take a grid track (five children on three columns wraps C). */
.triple {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 2.25rem;
  align-items: stretch;
}
.triple__item {
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--navy-line);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
}
.triple--tight {
  margin-top: 2rem;
}
.triple--tight .triple__item {
  padding: 1rem 1.15rem;
}
.triple--tight .muted {
  font-size: 0.92rem;
  line-height: 1.45;
}
.triple__label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}
.triple__join {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'TradecueDisplay', serif;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--gold);
}
@media (min-width: 780px) {
  .triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(2.75rem, 4vw, 3.75rem);
  }
  .triple__join { display: none; }
  .triple__item { position: relative; }
  .triple__item:not(:last-of-type)::after {
    content: '+';
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: calc(clamp(2.75rem, 4vw, 3.75rem) / 2);
    transform: translate(-50%, -50%);
    font-family: 'TradecueDisplay', serif;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--gold);
    pointer-events: none;
  }
}

.compare {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
  align-items: stretch;
}
@media (min-width: 800px) {
  .compare {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 1.5rem;
    align-items: stretch;
  }
}
.compare__col {
  padding: 1.8rem;
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--on-paper);
}
.sec--navy .compare__col {
  border-color: var(--navy-line);
  background: var(--navy-raised);
  color: var(--on-dark);
}
.compare__col--theirs {
  background: transparent;
  opacity: 0.88;
}
.compare__col--ours {
  background: var(--ink);
  color: var(--on-dark);
  border: 1px solid var(--gold);
  box-shadow:
    0 0 0 1px rgba(200, 162, 74, 0.18),
    0 22px 48px rgba(6, 17, 28, 0.22);
  padding: 2rem 1.9rem 1.85rem;
  display: flex;
  flex-direction: column;
}
.compare__kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-paper-muted);
}
.sec--navy .compare__kicker { color: var(--on-dark-muted); }
.compare__col--ours .compare__kicker { color: var(--gold); }
.sec--paper .compare__col--ours .compare__kicker { color: var(--gold); }
.sec--navy .compare__col--ours .compare__kicker { color: var(--gold); }
.compare__heading {
  font-family: 'TradecueDisplay', serif;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.2;
  margin: 0.75rem 0 0;
}
.compare__col--ours .compare__heading { color: var(--on-dark); }
.compare__list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  font-size: 0.95rem;
  color: var(--on-paper-muted);
}
.sec--navy .compare__list { color: var(--on-dark-muted); }
.compare__col--ours .compare__list { color: var(--on-dark-muted); }
.compare__list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.compare__mark {
  flex: none;
  opacity: 0.55;
}
.compare__col--ours .compare__mark {
  color: var(--gold);
  opacity: 1;
}
.sec--navy .compare__col--ours .compare__mark { color: var(--gold); }
.compare__price {
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gold-dim);
  font-family: 'TradecueDisplay', serif;
  font-size: 1.55rem;
  line-height: 1.2;
  color: var(--gold-lift);
}
.compare__price span {
  display: block;
  margin-top: 0.35rem;
  font-family: Inter, sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--on-dark-muted);
}

.week {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--paper-line);
}
.sec--navy .week { border-top-color: var(--navy-line); }
.week__grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
@media (min-width: 800px) {
  .week__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .week__beat .display.d3 {
    min-height: 2.4rem;
  }
  .week__note {
    min-height: 4.6em;
  }
  .week__beat > .ex-mail,
  .week__beat > .ex-job,
  .week__beat > .ex-letter-scale {
    margin-top: 1.1rem;
    width: 100%;
    height: 34rem;
    overflow: hidden;
  }
  .week__beat > .shot {
    margin-top: 1.1rem;
    width: 100%;
    height: 34rem;
    position: relative;
    display: block;
    overflow: hidden;
  }
  .week__beat > .ex-mail,
  .week__beat > .ex-job {
    display: flex;
    flex-direction: column;
  }
  .week__beat > .ex-mail .ex-card {
    flex: 1;
  }
  .week__beat > .ex-job .ex-map {
    flex: 0 0 13rem;
    height: 13rem;
  }
  .week__beat > .ex-letter-scale {
    overflow: hidden;
    background: #06111c;
  }
}
.week__label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-on-paper);
}
.sec--navy .week__label { color: var(--gold); }
.week__note {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
}
.week__beat .display.d3 { margin: 0.4rem 0 0; }

.shot {
  margin-top: 1.1rem;
  border: 1px solid var(--navy-line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--navy-raised);
}
.sec--paper .shot { border-color: var(--paper-line); }
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 800px) {
  .week__beat > .shot img,
  .shot-row .shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
  }
  .week__beat > .shot--page img,
  .shot-row .shot--page img {
    object-fit: cover;
    object-position: top center;
  }
}
.shot-row {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
@media (min-width: 800px) {
  .shot-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot-row .shot {
    position: relative;
    height: 28rem;
    display: block;
    overflow: hidden;
  }
}
.letter-still {
  margin-top: 1.1rem;
  height: 34rem;
  overflow: hidden;
  padding: 1.35rem 1.4rem 1.5rem;
  border-radius: 3px;
  background: #fbf8f2;
  color: #16232e;
  border: 1px solid var(--paper-line);
}
.sec--navy .letter-still {
  border-color: var(--navy-line);
}
.letter-still__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: 'TradecueDisplay', serif;
  font-size: 1.15rem;
  margin: 0 0 1.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--paper-line);
}
.letter-still__brand img { display: block; }
.letter-still__to {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #53677a;
}
.letter-still__date {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  color: #53677a;
}
.letter-still__subject {
  margin: 0.85rem 0 0;
  font-weight: 600;
  font-size: 0.95rem;
}
.letter-still__body {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
}

.ex[hidden] { display: none !important; }
.ex-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.ex-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, currentColor 42%, transparent);
}
.ex-pill--pending { color: #1f5b9e; background: #e9f0f8; }
.ex-pill--permitted { color: #1f6b3f; background: #e8f4ec; }
.ex-pill--refused { color: #a32720; background: #fbeceb; }
.ex-pill--withdrawn,
.ex-pill--unknown { color: #53677a; background: #eef1f4; }
.ex-pill--now { color: #06111c; background: var(--gold); font-weight: 700; }
.ex-pill--fresh { color: #16232e; background: #ddd5c6; }
.ex-pill--stale { color: #53677a; background: #eeeae2; }
.ex-card,
.ex-record {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--on-paper);
  display: grid;
  gap: 0.65rem;
}
.ex-mail {
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--on-paper);
  overflow: hidden;
}
.ex-mail__bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-on-paper);
  background: #ebe6dc;
  border-bottom: 1px solid var(--paper-line);
}
.ex-mail__from {
  margin: 1rem 1.15rem 0;
  font-size: 0.82rem;
  color: var(--on-paper-muted);
}
.ex-mail__subject {
  margin: 0.2rem 1.15rem 0.9rem;
  font-family: 'TradecueDisplay', serif;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--on-paper);
}
.ex-mail .ex-card {
  margin: 0 0.85rem 0.85rem;
  border-color: var(--paper-line);
  box-shadow: 0 8px 24px rgba(6, 17, 28, 0.08);
}
.ex-job {
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--on-paper);
  overflow: hidden;
}
.ex-map {
  position: relative;
  height: 11.5rem;
  overflow: hidden;
  background: #d5cfc4;
}
.ex-map__tiles {
  position: absolute;
  inset: -10% -10% -28% -10%;
  pointer-events: none;
}
.ex-map__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100%;
}
.ex-map__grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ex-map iframe {
  display: none;
}
.ex-map__pin {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -18px 0 0 -8px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--gold);
  border: 2px solid #06111c;
  pointer-events: none;
  z-index: 1;
}
.ex-map__facts {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 0.55rem 0.8rem 0.65rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  font-size: 0.78rem;
  color: var(--on-paper);
  background: color-mix(in srgb, var(--paper-raised) 94%, transparent);
  border-top: 1px solid var(--paper-line);
  pointer-events: none;
}
.ex-map__facts div { margin: 0; }
.ex-map__facts dt { display: inline; }
.ex-map__facts dd { display: inline; margin: 0; }
.ex-job__body {
  padding: 1.15rem 1.25rem 1.25rem;
  display: grid;
  gap: 0.65rem;
}
.sec--navy .ex-job {
  border-color: rgba(221, 213, 198, 0.2);
}
.sec--navy .ex-card,
.sec--navy .ex-record {
  border-color: var(--navy-line);
  background: var(--navy-raised);
  color: var(--on-dark);
}
.sec--navy .ex-mail .ex-card {
  border-color: var(--paper-line);
  background: #fff;
  color: var(--on-paper);
}
.ex-card__address,
.ex-record__address {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.ex-card__desc,
.ex-record__desc {
  margin: 0;
  font-size: 0.94rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ex-card__meta {
  margin: 0;
  display: flex;
  gap: 6px 16px;
  flex-wrap: wrap;
  font-size: 0.85rem;
}
.ex-card__meta div { margin: 0; }
.ex-card__meta dt { display: inline; }
.ex-card__meta dd { display: inline; margin: 0; }
.ex-constraints {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
  font-size: 0.88rem;
}
.ex-letter-scale {
  overflow: auto;
  background: #ddd5c6;
  border-radius: 3px;
  padding: 0;
}
.sec--navy .ex-letter-scale { background: #06111c; }
.ex-letter {
  width: 210mm;
  min-height: 297mm;
  padding: 20mm 20mm 24mm;
  background: #fff;
  color: #14161a;
  font-size: 11pt;
  line-height: 1.55;
  border: none;
  color-scheme: light;
  transform-origin: top left;
}
.ex-letter__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16mm;
  min-height: 25mm;
}
.ex-letter__logo {
  width: 30px;
  height: 30px;
  display: block;
  margin-bottom: 3mm;
}
.ex-letter__company {
  font-size: 13pt;
  font-weight: 640;
  letter-spacing: -0.01em;
}
.ex-letter__sender {
  text-align: right;
  font-size: 9.5pt;
  line-height: 1.5;
  color: #4a4f57;
  white-space: nowrap;
}
.ex-letter__recipient {
  min-height: 25mm;
  margin: 6mm 0;
  font-size: 11pt;
}
.ex-letter__date {
  margin-bottom: 6mm;
  font-size: 10.5pt;
  color: #4a4f57;
}
.ex-letter__subject {
  font-weight: 640;
  margin-bottom: 6mm;
}
.ex-letter__body { white-space: pre-wrap; }

.ex-showcase { margin-top: 3.5rem; }
.ex-showcase__panel {
  margin-top: 1.75rem;
  padding: 1.5rem;
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  background: var(--paper-raised);
  display: grid;
  gap: 1.25rem;
}
.ex-showcase__step {
  margin: 0;
  font-size: 0.95rem;
}

/* -------------------------------------------------------------------------
   Stat band
   ------------------------------------------------------------------------- */

.stat__n {
  font-family: 'TradecueDisplay', serif;
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  line-height: 1;
  color: var(--gold);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 96, 'wght' 400;
  letter-spacing: -0.02em;
}
.stat__l {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

/* -------------------------------------------------------------------------
   The timeline (the life of an application)
   ------------------------------------------------------------------------- */

.rail { position: relative; }
/* The vertical rule the stages hang from. Drawn on the list, not on each item,
   so it is continuous and does not gap between them. */
.rail::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: linear-gradient(180deg, var(--gold), rgba(200, 162, 74, 0.15));
}
@media (min-width: 768px) { .rail::before { left: 10.5rem; } }

.node {
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--paper);
  display: grid;
  place-items: center;
}
.node::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--gold);
}
@media (min-width: 768px) { .node { left: 10rem; } }

/* -------------------------------------------------------------------------
   Quotes
   ------------------------------------------------------------------------- */

.quote {
  position: relative;
  padding-top: 2.6rem;
}
/* An oversized serif open-quote, set in the brand serif and clipped by the card
   edge. Decorative only, so it is hidden from assistive tech in the markup. */
.quote__mark {
  position: absolute;
  top: -0.9rem;
  left: -0.35rem;
  font-family: 'TradecueDisplay', serif;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.22;
}
.quote p { font-size: 1.02rem; line-height: 1.6; }

/* -------------------------------------------------------------------------
   Tables (pricing, coverage)
   ------------------------------------------------------------------------- */

.tbl { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tbl th, .tbl td { padding: 0.95rem 1rem; text-align: left; vertical-align: top; }
.tbl thead th {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  border-bottom: 1px solid var(--gold-dim);
}
.sec--paper .tbl thead th { color: var(--gold-on-paper); border-bottom-color: rgba(138, 106, 31, 0.4); }
.tbl tbody tr + tr td { border-top: 1px solid var(--navy-line); }
.sec--paper .tbl tbody tr + tr td { border-top: 1px solid var(--paper-line); }
.tbl tbody tr { transition: background-color 0.2s ease; }
.tbl tbody tr:hover { background: rgba(200, 162, 74, 0.05); }

/* Any table that could be wider than its column scrolls inside itself. The page
   body must never scroll sideways. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tick { color: var(--gold); }
.cross { color: var(--on-dark-muted); opacity: 0.55; }
.sec--paper .cross { color: var(--on-paper-muted); opacity: 0.75; }

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */

.field { display: block; }
.field__label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.input {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(6, 17, 28, 0.55);
  border: 1px solid var(--navy-line);
  border-radius: 2px;
  color: var(--on-dark);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.input::placeholder { color: rgba(147, 167, 185, 0.55); }
.input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 162, 74, 0.16);
  background: rgba(6, 17, 28, 0.75);
}
/* Native select arrows are grey and system-coloured; this draws a gold one. */
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23C8A24A' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.6rem;
}
textarea.input { resize: vertical; min-height: 7rem; }

/* Validation state is driven by a class from site.js, not by :invalid, so a
   field is only marked wrong after the user has had a go at it. */
.input.is-error { border-color: #e07a5f; box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.14); }
.field__error {
  display: none;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: #f0a58f;
}
.field.is-error .field__error { display: block; }

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status { font-size: 0.9rem; }
.form-status[data-state='ok'] { color: var(--gold-lift); }
.form-status[data-state='bad'] { color: #f0a58f; }

/* -------------------------------------------------------------------------
   Reveal on scroll
   ------------------------------------------------------------------------- */

/* Nothing here is required to read the page: the class only ever adds a
   transform, and if the observer never fires (or motion is reduced) the .reveal
   rule below is overridden to a plain visible state. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.footlink {
  font-size: 0.875rem;
  color: var(--on-dark-muted);
  transition: color 0.2s ease;
}
.footlink:hover { color: var(--gold); }

/* -------------------------------------------------------------------------
   Focus
   ------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--gold);
  color: var(--ink);
  padding: 0.7rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip:focus { top: 1rem; }