/* Coos Medford Enterprise — site styles.
   Ported from docs/reference/navy-airmail-site.html (canonical); extended with
   the endorsement ticker, letter sheet, video enclosure, and pricing grid. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--body);
  font-family: "Public Sans", system-ui, "Segoe UI", Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  padding: var(--frame);
}

/* ============ THE AIRMAIL FRAME ============ */
/* Painted as a masked background, not border-image: Safari/WebKit does not
   render repeating gradients inside border-image. Shared by the page frame
   and the video enclosure (README §5.3).
   How the mask works: paint the stripes over the WHOLE element, then compose
   two mask layers — one covering everything, one covering only the content
   box (inside the padding) — with XOR/exclude. Overlap cancels, leaving only
   the padding ring visible: a rectangular donut. The `padding` is therefore
   the stripe thickness. */
.airmail-border {
  background: repeating-linear-gradient(
    45deg,
    var(--navy)  0 18px,
    var(--paper) 18px 32px,
    var(--slate) 32px 50px,
    var(--paper) 50px 64px
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.airmail-frame {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  padding: var(--frame);
}

/* ============ TYPE ============ */
.display {
  font-family: "Archivo", "Arial Black", Arial, sans-serif;
  color: var(--obsidian);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.04;
}
.mono {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow {
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.eyebrow::after {
  content: "";
  height: 1px;
  width: 56px;
  background: var(--slate);
  opacity: 0.6;
}

.container {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 28px;
}

section { padding: 88px 0; }

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

.skip-link {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -200%);
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: transform 0.15s ease;
}
.skip-link:focus-visible { transform: translate(-50%, var(--frame)); }

/* ============ HEADER ============ */
/* sticky vs fixed: sticky participates in layout (content below starts after
   it) and pins only when scrolled to its offset; fixed leaves layout entirely.
   top uses var(--frame) so the pinned header sits inside the envelope. The
   translucent paper + backdrop-filter blurs whatever scrolls beneath. */
header {
  position: sticky;
  top: var(--frame);
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mist);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  max-width: 1060px;
  margin: 0 auto;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.wordmark img { display: block; width: 140px; height: auto; }
nav.links { display: flex; gap: 26px; align-items: center; }
nav.links a {
  text-decoration: none;
  color: var(--body);
  font-size: 14.5px;
  font-weight: 500;
}
nav.links a:hover { color: var(--navy); }
/* Specificity lesson learned the hard way: `nav.links a` (0,1,2) beats
   `.btn-solid` (0,1,0), silently painting the CTA's text dark-on-navy.
   This rule restates the winner at equal-or-higher specificity. Lighthouse's
   contrast audit is what caught it — budgets as regression tests. */
nav.links a.btn-solid { color: #fff; }
nav.links a[aria-current="page"] {
  color: var(--navy);
  border-bottom: 2px solid var(--slate);
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-block;
  font-family: "Public Sans", system-ui, Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1.5px solid var(--navy);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-solid { background: var(--navy); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(11, 21, 38, 0.18); }
:focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 3px;
}
.btn-sm { padding: 9px 16px; font-size: 14px; }

/* ============ HERO: THE ENVELOPE FACE ============ */
.hero { padding: 104px 0 96px; position: relative; }
.hero-grid {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  align-items: flex-start;
}
.hero h1 { font-size: clamp(40px, 6.2vw, 72px); font-weight: 800; }
.hero .to-line {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--slate);
  display: block;
  margin-bottom: 10px;
}
.hero p.lede {
  max-width: 560px;
  margin: 26px 0 34px;
  font-size: 18px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-ref {
  margin-top: 56px;
  color: var(--muted);
}

/* ---- Site notice (the courier's "delivery in progress" card) ---- */
/* Navy stationery, slate lettering — the same on-navy tints the bands and the
   platform CTA already use (§5.1 proportions, no new colours). Sits between
   the header and main so it is read before the hero but never covers it. */
.site-notice {
  background: var(--navy);
  color: var(--paper);
}
.site-notice-inner {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  flex-wrap: wrap;
}
.site-notice-mark {
  color: #9FB4D8;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-notice-text {
  margin: 0;
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.55;
}
.site-notice-text a {
  color: #C9D6EC;
  text-underline-offset: 3px;
}
.site-notice-text a:hover { color: var(--paper); }

/* ---- The stamp (signature element) ---- */
.stamp-wrap {
  position: relative;
  flex-shrink: 0;
  margin-top: 8px;
  animation: stamp-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: 0.25s;
}
@keyframes stamp-in {
  from { transform: rotate(-9deg) scale(1.12); opacity: 0; }
  to   { transform: rotate(-3deg) scale(1); opacity: 1; }
}
.stamp {
  width: 148px;
  height: 182px;
  padding: 12px;
  /* perforated edges: half-circle "bites" painted in the page colour */
  background:
    radial-gradient(circle 4.5px at 9px 0,    var(--paper) 4.6px, transparent 4.7px) top    / 18px 9px repeat-x,
    radial-gradient(circle 4.5px at 9px 9px,  var(--paper) 4.6px, transparent 4.7px) bottom / 18px 9px repeat-x,
    radial-gradient(circle 4.5px at 0 9px,    var(--paper) 4.6px, transparent 4.7px) left   / 9px 18px repeat-y,
    radial-gradient(circle 4.5px at 9px 9px,  var(--paper) 4.6px, transparent 4.7px) right  / 9px 18px repeat-y,
    #fff;
  box-shadow: 0 10px 28px rgba(11, 21, 38, 0.14);
}
.stamp-inner {
  background: var(--navy);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  overflow: hidden;
}
.stamp-inner .stamp-mark {
  width: 64px;
  height: auto;
}
.stamp-inner .stamp-name {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-align: center;
  color: #A9BCDD;
}
.stamp-inner .value {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #C9D6EC;
}
.postmark-svg {
  position: absolute;
  top: -34px;
  left: -110px;
  color: var(--slate);
  opacity: 0.85;
  pointer-events: none;
}

/* ============ SERVICES CARDS ============ */
.services-cards { border-top: 1px solid var(--mist); }
.section-title { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; }
.card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
}
.card {
  background: #fff;
  border: 1px solid var(--mist);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(11, 21, 38, 0.1); }
.card .tag { color: var(--slate); display: block; margin-bottom: 14px; }
.card h3 {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--obsidian);
  margin-bottom: 10px;
}
.card p { font-size: 15.5px; }

/* ============ VIDEO ENCLOSURE (README §5.5) ============ */
/* Base layout = static centered player (all browsers, and reduced motion). */
.enclosure-note { color: var(--muted); font-size: 13px; margin-top: 6px; }
.enclosure-stage { margin-top: 44px; }
.enclosure-pin {
  display: grid;
  place-items: center;
  padding: 0 28px;
}
.enclosure-frame {
  position: relative;
  width: min(720px, 100%);
  padding: 10px;
}
.enclosure-frame > .airmail-border {
  position: absolute;
  inset: 0;
  padding: 10px;
  pointer-events: none;
  /* The one sanctioned red on the site (ADR-0009): the enclosure wears the
     authentic airmail livery — an artifact from the outside world, enclosed
     in our navy-and-slate stationery. */
  background: repeating-linear-gradient(
    45deg,
    var(--airmail-blue) 0 18px,
    #FFFFFF 18px 32px,
    var(--airmail-red) 32px 50px,
    #FFFFFF 50px 64px
  );
}
.enclosure-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #0F1B33;
}
.enclosure-caption { margin-top: 16px; color: var(--slate); text-align: center; }

/* Scroll-grow: the stage becomes a tall runway, the frame pins to screen
   center, and its size is keyed to scroll progress until it engulfs the
   viewport. Pure CSS scroll-driven animation — zero JS; browsers without
   support (and prefers-reduced-motion) keep the static layout above.
   The mechanism, in one breath: a normal @keyframes animation whose clock is
   NOT time but scroll progress. `view-timeline-name` on the stage defines a
   timeline measuring the stage's journey through the viewport;
   `animation-timeline` binds animations to it; `animation-range: contain X%
   contain Y%` maps keyframe 0%→100% onto that slice of the journey ("contain"
   spans while the stage fully contains the viewport — exactly the pinned
   stretch, because the sticky pin is 100vh inside a 300vh stage, giving 200vh
   of scrubbing). Scrubbing backwards runs everything in reverse for free —
   state is a pure function of scroll position, the same idea as UI = f(state). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Lift the enclosure's timeline to body so the header can ride it too. */
    body:has(.enclosure-stage) { timeline-scope: --enclosure-stage; }
    .enclosure-stage {
      height: 300vh;
      view-timeline-name: --enclosure-stage;
    }
    /* The nav yields only while the video is actually near/at fullscreen:
       pushed away as the growing video approaches it, pulled back down as the
       video shrinks again on the far side. Scroll-linked, so scrubbing in
       either direction plays it correctly. */
    body:has(.enclosure-stage) header {
      animation: header-push-away linear both;
      animation-timeline: --enclosure-stage;
      animation-range: contain 0% contain 100%;
    }
    @keyframes header-push-away {
      0%, 15%   { transform: translateY(0); }
      30%, 70%  { transform: translateY(calc(-100% - var(--frame) - 2px)); }
      85%, 100% { transform: translateY(0); }
    }
    .enclosure-pin {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      padding: 0;
      /* Above the header (50) only during the cinematic window; under it while
         entering and leaving, so the shrunken player scrolls beneath the nav.
         z-index interpolates discretely, so these are step changes. */
      z-index: 40;
      animation: enclosure-pin-z linear both;
      animation-timeline: --enclosure-stage;
      animation-range: contain 0% contain 100%;
    }
    @keyframes enclosure-pin-z {
      0%, 12%   { z-index: 40; }
      18%, 82%  { z-index: 60; }
      88%, 100% { z-index: 40; }
    }
    .enclosure-frame {
      width: min(720px, 92vw);
      height: min(560px, 69vw);
      animation: enclosure-engulf linear both;
      animation-timeline: --enclosure-stage;
      /* grow → hold fullscreen → shrink back, across the whole pinned scroll */
      animation-range: contain 0% contain 100%;
    }
    /* The stripe dissolves as the cinema takes over, and returns on the way out. */
    .enclosure-frame > .airmail-border {
      animation: enclosure-border-fade linear both;
      animation-timeline: --enclosure-stage;
      animation-range: contain 0% contain 100%;
    }
    .enclosure-frame video {
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
      object-fit: contain;
    }
    @keyframes enclosure-engulf {
      0%, 100%  { width: min(720px, 92vw); height: min(560px, 69vw); padding: 10px; }
      35%, 65%  { width: 100vw; height: 100vh; padding: 0; }
    }
    @keyframes enclosure-border-fade {
      0%, 100%  { opacity: 1; }
      25%, 75%  { opacity: 0; }
    }
  }
}

/* ============ NAVY BAND ============ */
.band {
  background: var(--navy);
  color: #E8EDF6;
  border-radius: 10px;
  padding: 72px 56px;
  position: relative;
  overflow: hidden;
}
.band::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  pointer-events: none;
}
.band .eyebrow { color: #9FB4D8; }
.band .eyebrow::after { background: #9FB4D8; }
.band blockquote, .band .band-statement {
  font-family: "Archivo", "Arial Black", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.25;
  color: #fff;
  max-width: 760px;
}
.band p { max-width: 640px; margin-top: 22px; color: #C4D0E5; }
.band .signoff { margin-top: 34px; color: #9FB4D8; }

/* ============ ENDORSEMENT TICKER ============ */
/* A rolling franking-tape of a client's own words. Pure CSS; the whole strip is
   one link to the full letter. Static under prefers-reduced-motion.
   Marquee mechanics: the track holds the SAME content twice and slides
   translateX(0 → -50%) on an infinite loop — the instant it wraps, copy #2
   sits exactly where copy #1 started, so the seam is invisible. The tape's
   soft edges are another mask trick: transparent→opaque→transparent gradient
   as the mask. Visible copies are aria-hidden; screen readers get the
   .sr-only sentence instead of a moving target. */
.ticker-section { padding: 0; }
.ticker {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  border-top: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* On hover the tape stops and the strip lifts — that's the "this is clickable" cue. */
.ticker:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(11, 21, 38, 0.12);
}
.ticker:hover .ticker-tape-track { animation-play-state: paused; }
.ticker-stamp {
  flex-shrink: 0;
  width: 76px;
  padding: 10px 14px;
  border-right: 1.5px dashed var(--mist);
  background:
    radial-gradient(circle 3.5px at 7px 7px, var(--paper) 3.6px, transparent 3.7px) right / 7px 14px repeat-y,
    #fff;
}
.ticker-stamp img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--mist);
  border-radius: 3px;
  transform: rotate(-3deg);
}
.ticker-tape {
  overflow: hidden;
  flex: 1;
  white-space: nowrap;
  -webkit-mask: linear-gradient(90deg, transparent, #000 40px calc(100% - 40px), transparent);
  mask: linear-gradient(90deg, transparent, #000 40px calc(100% - 40px), transparent);
}
.ticker-tape-track {
  display: inline-flex;
  animation: tape-roll 28s linear infinite;
}
.ticker-tape-track > span {
  display: inline-block;
  padding: 20px 0;
  padding-right: 64px;
  color: var(--body);
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 13.5px;
  letter-spacing: 0.1em;
}
@keyframes tape-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============ LETTER SHEET (full endorsement page) ============ */
.letter-sheet {
  position: relative;
  background: #fff;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(11, 21, 38, 0.08);
  padding: 64px 60px;
  max-width: 760px;
  margin: 0 auto;
}
.letter-sheet .letter-stamp {
  display: block;
  position: absolute;
  top: 28px;
  right: 32px;
  width: 92px;
  height: auto;
  padding: 7px;
  background:
    radial-gradient(circle 3.5px at 7px 0,   #fff 3.6px, transparent 3.7px) top    / 14px 7px repeat-x,
    radial-gradient(circle 3.5px at 7px 7px, #fff 3.6px, transparent 3.7px) bottom / 14px 7px repeat-x,
    radial-gradient(circle 3.5px at 0 7px,   #fff 3.6px, transparent 3.7px) left   / 7px 14px repeat-y,
    radial-gradient(circle 3.5px at 7px 7px, #fff 3.6px, transparent 3.7px) right  / 7px 14px repeat-y,
    var(--mist);
  transform: rotate(3deg);
  box-shadow: 0 6px 18px rgba(11, 21, 38, 0.12);
}
.letter-sheet .letter-stamp img { display: block; width: 100%; height: auto; }
.letter-sheet .postmark-svg {
  top: 4px;
  left: auto;
  right: 96px;
}
.letter-meta {
  color: var(--muted);
  margin-bottom: 36px;
}
.letter-body p { margin-bottom: 18px; max-width: 560px; }
.letter-signature {
  margin-top: 32px;
  font-family: "Archivo", Arial, sans-serif;
  font-weight: 700;
  color: var(--obsidian);
  font-size: 19px;
}
.letter-lang {
  margin-top: 44px;
  border: 1px solid var(--mist);
  border-left: 4px solid var(--slate);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.letter-lang[open] { box-shadow: 0 10px 28px rgba(11, 21, 38, 0.08); }
.letter-lang summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  color: var(--navy);
  font-weight: 700;
  list-style: none;
}
.letter-lang summary::-webkit-details-marker { display: none; }
.letter-lang summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.letter-lang[open] summary::after { transform: rotate(225deg); }
.letter-lang summary:hover { color: var(--obsidian); }
.letter-lang-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.letter-lang-label { line-height: 1.35; }
.letter-lang-label small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-family: "Public Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.letter-lang .letter-body {
  border-top: 1px dashed var(--mist);
  padding: 28px 24px 10px;
  font-family: "Leelawadee UI", Tahoma, sans-serif;
  font-size: 16.5px;
  line-height: 1.9;
}
.letter-backlink {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px dashed var(--mist);
}
.letter-backlink a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--navy);
  padding: 11px 16px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.letter-backlink a:hover {
  border-color: var(--slate);
  box-shadow: 0 6px 18px rgba(11, 21, 38, 0.08);
  transform: translateY(-1px);
}
.letter-backlink-arrow {
  color: var(--slate);
  font-size: 20px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.letter-backlink a:hover .letter-backlink-arrow { transform: translateX(-3px); }

/* ============ PRICING (Services page, README §11) ============ */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 44px;
}
.plan {
  background: #fff;
  border: 1px solid var(--mist);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
}
.plan .tag { color: var(--slate); display: block; margin-bottom: 12px; }
.plan h3 {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 21px;
  font-weight: 800;
  color: var(--obsidian);
}
.plan .price {
  font-family: "Archivo", Arial, sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--navy);
  margin: 10px 0 4px;
}
.plan .price small { font-size: 15px; font-weight: 600; color: var(--body); }
.plan .perfect-for { font-size: 14.5px; color: var(--muted); margin-bottom: 16px; }
.plan ul { list-style: none; margin: 0 0 18px; }
.plan ul li {
  font-size: 15px;
  padding-left: 22px;
  position: relative;
  margin-bottom: 7px;
}
.plan ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--slate);
  font-weight: 700;
}
.plan .inherits { font-weight: 600; color: var(--obsidian); }
.plan .typical {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 14px;
}
.plan .setup-fee { margin-top: auto; color: var(--slate); }

.development-intro { max-width: 700px; margin-top: 20px; }
.rate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}
.rate-card {
  background: #fff;
  border: 1px solid var(--mist);
  border-top: 3px solid var(--slate);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.rate-card .tag { color: var(--slate); }
.rate-card .rate {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 25px;
  font-weight: 800;
  color: var(--navy);
  margin-top: 12px;
}
.rate-card .rate small { font-size: 14px; color: var(--body); }
.billable-work {
  background: var(--mist);
  border-radius: var(--radius);
  padding: 30px;
  margin-top: 22px;
}
.billable-work h3 {
  font-family: "Archivo", Arial, sans-serif;
  color: var(--obsidian);
  font-size: 20px;
  margin-bottom: 16px;
}
.billable-work ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
  list-style-position: inside;
}
.trust-section { padding-top: 24px; }
.trust-panel {
  background: #fff;
  border: 1px solid var(--mist);
  border-left: 5px solid var(--slate);
  border-radius: var(--radius);
  padding: 52px 48px;
}
.trust-panel h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; }
.trust-panel > p { max-width: 620px; margin-top: 18px; }
.ownership-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin-top: 22px;
}
.ownership-list li {
  background: var(--mist);
  border-radius: 999px;
  color: var(--navy);
  font-weight: 700;
  padding: 8px 14px;
}
.platform-cta-panel {
  background: var(--navy);
  border-radius: 10px;
  color: #C4D0E5;
  padding: 64px 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.platform-cta-panel .eyebrow { color: #9FB4D8; }
.platform-cta-panel .eyebrow::after { background: #9FB4D8; }
.platform-cta-panel h2 {
  color: #fff;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
}
.platform-services {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin-top: 22px;
}
.platform-services li { color: #E8EDF6; font-weight: 600; }
.platform-cta-panel p { margin-top: 18px; }
.platform-cta-panel .btn-solid { background: #fff; color: var(--navy); }
.platform-cta-panel .reply-actions .mono a { color: #C9D6EC; }

/* ============ CONTACT: REPLY CARD ============ */
.reply {
  border: 1.5px dashed var(--slate);
  border-radius: var(--radius);
  background: #fff;
  padding: 56px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}
.reply h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; }
.reply p { max-width: 440px; margin-top: 12px; }
.reply-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.reply-actions .mono a { color: var(--navy); text-decoration: none; letter-spacing: 0.08em; }

.section-tight { padding-top: 24px; }
.section-flush { padding-top: 0; }

/* ============ PAGE INTRO (inner pages) ============ */
.page-intro { padding: 88px 0 24px; }
.page-intro h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 800; }
.page-intro p.lede { max-width: 620px; margin-top: 22px; font-size: 18px; }
.prose { max-width: 640px; }
.prose p { margin-bottom: 18px; }
.prose h2 {
  font-family: "Archivo", Arial, sans-serif;
  color: var(--obsidian);
  font-size: 22px;
  margin: 34px 0 12px;
}

/* ============ FOOTER ============ */
footer {
  background: var(--obsidian);
  color: #8D9BB5;
  border-radius: 10px 10px 0 0;
  margin-top: 88px;
}
.foot-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 40px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
}
.foot-motto { color: #C9D6EC; font-weight: 600; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stamp-wrap { animation: none; transform: rotate(-3deg); }
  .btn, .card, .skip-link, .ticker, .letter-lang, .letter-lang summary::after, .letter-backlink a, .letter-backlink-arrow { transition: none; }
  .btn:hover, .card:hover, .ticker:hover, .letter-backlink a:hover, .letter-backlink a:hover .letter-backlink-arrow { transform: none; }
  .ticker-tape-track { animation: none; }
  .ticker-tape {
    -webkit-mask: none;
    mask: none;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .ticker-tape-track > span:nth-child(n+2) { display: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  section { padding: 64px 0; }
  .hero { padding: 64px 0; }
  .hero-grid { flex-direction: column-reverse; align-items: flex-start; }
  .stamp-wrap { align-self: flex-end; margin-right: 8px; }
  .postmark-svg { left: auto; right: -18px; top: -40px; }
  .card-row { grid-template-columns: 1fr; }
  .plan-grid, .rate-grid { grid-template-columns: 1fr; }
  .billable-work ul { grid-template-columns: 1fr; }
  .band { padding: 48px 28px; }
  .trust-panel, .platform-cta-panel { padding: 40px 26px; }
  .reply { padding: 40px 26px; }
  .letter-sheet { padding: 44px 26px; }
  .letter-sheet .letter-stamp { position: static; margin-bottom: 20px; }
  .letter-sheet .postmark-svg { display: none; }
  nav.links { gap: 16px; }
  nav.links a:not(.btn) { display: none; }
  /* The notice costs vertical space on the one screen where it is scarcest:
     on a phone the header, the notice and the postage stamp together push the
     headline almost to the fold. Tighten type and padding here so the notice
     still reads first without spending more of the hero than it has to.
     Paper-on-navy is 13.7:1, so 14px stays comfortably inside §5.8's AA bar. */
  .site-notice-inner { padding: 10px 0; gap: 4px; }
  .site-notice-text { font-size: 14px; line-height: 1.45; }
}

/* ============ ERROR PAGES (404 / 500) ============ */
.error-page { padding: 96px 0 120px; text-align: center; }
.error-page .container { max-width: 640px; }
.error-page .empty-envelope { color: var(--slate); margin: 0 auto 32px; display: block; }
.error-page .eyebrow { justify-content: center; }
.error-page .eyebrow::after { display: none; }
.error-page h1 { font-size: clamp(30px, 4.6vw, 48px); font-weight: 800; }
.error-page .lede { margin: 22px auto 34px; max-width: 520px; font-size: 17px; }
.error-page .hero-ctas { justify-content: center; }