@charset "utf-8";
/* ============================================================================
   SILENT WATCH CAPITAL, LLC — silentwatchservices.com
   brand.css — the whole design system. One stylesheet, seven pages + 404.

   ONE STYLESHEET. Every page loads this file and nothing else. Page authors
   must not add a rule, a <style> block, an inline style attribute, a second
   stylesheet or a third-party request — if a page needs something that is not
   here, report it. (The one page-scoped file that briefly existed,
   assets/_additions.css, was folded into section 13 at final assembly and
   deleted; nothing loads it any more.)

   ---------------------------------------------------------------------------
   CONTENTS
     01  Fonts — self-hosted @font-face (woff2, ttf fallback)
     02  Custom properties — palette, type scale, spacing, measure, layout
     03  Reset and document base
     04  Layout primitives — .shell, .section, .stack, .rule
     05  Typography — display, prose, lede, eyebrow, mono, quiet note
     06  Links, buttons, focus
     07  Header and navigation
     08  Hero
     09  The three doors
     10  Capability lists and capability blocks
     11  Prose blocks, reason list, delivers/excludes lists
     12  The deliverables menu
     13  Form controls (including the .reveal box folded in from
         the former _additions.css)
     14  Close block
     15  Footer
     16  404
     17  Utilities
     18  Motion policy (there is none) and print
   ---------------------------------------------------------------------------
   THREE RULES THAT GOVERN EVERYTHING
     · Navy #0D1B2A is the ground and it never alternates.
     · Silver does the structural work. Gold MARKS; gold never FILLS.
     · No motion. A color or underline change on hover is the whole budget.
   ========================================================================= */


/* ============================================================================
   01  FONTS
   Self-hosted on purpose: no Google Fonts, no CDN, no third-party request on
   page load. woff2 first, ttf as the fallback source for anything that cannot
   read woff2. font-display: swap so text paints immediately in the fallback.
   Fallback stacks are real, metric-sympathetic families — the page must still
   read correctly when the faces do not load (e.g. Chrome over file://, which
   refuses cross-origin font requests from an opaque origin).
   ========================================================================= */

/* --- Cinzel: display only. Caps. Never body text. ------------------------ */
@font-face {
  font-family: "Cinzel";
  src: url("fonts/Cinzel-Regular.woff2") format("woff2"),
       url("fonts/Cinzel-Regular.ttf")   format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("fonts/Cinzel-Bold.woff2") format("woff2"),
       url("fonts/Cinzel-Bold.ttf")   format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Barlow: everything a person actually reads. 16px floor. ------------- */
@font-face {
  font-family: "Barlow";
  src: url("fonts/Barlow-Light.woff2") format("woff2"),
       url("fonts/Barlow-Light.ttf")   format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/Barlow-Regular.woff2") format("woff2"),
       url("fonts/Barlow-Regular.ttf")   format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/Barlow-Italic.woff2") format("woff2"),
       url("fonts/Barlow-Italic.ttf")   format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/Barlow-Medium.woff2") format("woff2"),
       url("fonts/Barlow-Medium.ttf")   format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/Barlow-SemiBold.woff2") format("woff2"),
       url("fonts/Barlow-SemiBold.ttf")   format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/Barlow-Bold.woff2") format("woff2"),
       url("fonts/Barlow-Bold.ttf")   format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Space Mono: figures, dates, band strings, labels. ------------------- */
@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Regular.woff2") format("woff2"),
       url("fonts/SpaceMono-Regular.ttf")   format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Italic.woff2") format("woff2"),
       url("fonts/SpaceMono-Italic.ttf")   format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Bold.woff2") format("woff2"),
       url("fonts/SpaceMono-Bold.ttf")   format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}


/* ============================================================================
   02  CUSTOM PROPERTIES
   ========================================================================= */

:root {

  /* --- Palette ---------------------------------------------------------
     Measured WCAG 2.1 contrast ratios against the navy ground #0D1B2A are
     recorded beside each ink. AA body text needs 4.5:1; large text and
     non-text UI components need 3:1. Every ink below clears its bar.        */

  --navy:          #0D1B2A;   /* the ground. Never alternates.              */
  --navy-field:    #132433;   /* form fields only. 1.10:1 vs ground —
                                 a field, not a panel; never used to
                                 stripe or alternate a section.             */

  --paper:         #E8EAEC;   /* primary reading ink      14.42:1  AA / AAA */
  --cream:         #E2DED7;   /* the mark's own cream     12.97:1  AA / AAA */
  --silver:        #C7CCD1;   /* structural ink, headings 10.76:1  AA / AAA */
  --silver-mute:   #9AA4AE;   /* labels, mono, captions    6.87:1  AA / AAA */
  --silver-dim:    #8A949E;   /* least-loud legible ink    5.64:1  AA        */

  --gold:          #C5A253;   /* the mark                  7.18:1  AA / AAA */
  --gold-deep:     #A9863B;   /* gold's deeper companion   5.10:1  AA        */

  --rule:          #26374A;   /* hairlines. Decorative — no contrast bar.   */
  --rule-strong:   #33475E;   /* hairlines that carry a section break.      */
  --control-edge:  #6B7783;   /* input borders             3.80:1  UI  AA   */

  /* --- Type families ---------------------------------------------------
     Display is Cinzel and only Cinzel. It is set in caps, at one weight
     (400), and only at display sizes. The single sanctioned small use is
     the masthead logotype, which is a mark rather than type.               */
  --font-display: "Cinzel", "Trajan Pro", "Optima", Palatino, Georgia, "Times New Roman", serif;
  --font-body:    "Barlow", "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Space Mono", "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, ui-monospace, monospace;

  /* --- Type scale ------------------------------------------------------
     Fluid between 360px and 1440px. Body sits at 17px and never goes below
     the 16px floor at any viewport. Mono labels are labels, not body copy;
     the floor governs Barlow reading text.                                 */
  --fs-hero:   clamp(2.375rem, 1.30rem + 4.75vw, 4.5rem);   /* 38 → 72 */
  --fs-d1:     clamp(2.00rem, 1.42rem + 2.60vw, 3.375rem);  /* 32 → 54 */
  --fs-d2:     clamp(1.50rem, 1.24rem + 1.16vw, 2.125rem);  /* 24 → 34 */
  --fs-d3:     clamp(1.1875rem, 1.09rem + 0.42vw, 1.4375rem); /* 19 → 23 */

  --fs-lede:   clamp(1.1875rem, 1.07rem + 0.52vw, 1.5rem);  /* 19 → 24 */
  --fs-sub:    clamp(1.0625rem, 1.02rem + 0.21vw, 1.1875rem); /* 17 → 19 */
  --fs-body:   1.0625rem;                                    /* 17      */
  --fs-min:    1rem;                                         /* 16 floor */
  /* One mono label size for the whole site. --fs-label and --fs-tag are
     deliberately equal: a label and a stamp are the same voice, and 13px
     letterspaced mono is the smallest type on the site. Barlow reading text
     never goes below the 16px floor. */
  --fs-label:  0.8125rem;                                    /* 13, mono */
  --fs-tag:    0.8125rem;                                    /* 13, mono */

  --lh-display: 1.08;
  --lh-tight:   1.28;
  --lh-body:    1.66;
  --lh-lede:    1.44;

  --track-display: 0.06em;   /* Cinzel caps want air between letters */
  --track-mark:    0.12em;   /* masthead logotype                    */
  --track-label:   0.18em;   /* mono eyebrow labels                  */
  --track-body:    0.005em;

  /* --- Spacing rhythm — 4px base, named steps -------------------------- */
  --sp-1: 0.25rem;   /*   4 */
  --sp-2: 0.5rem;    /*   8 */
  --sp-3: 0.75rem;   /*  12 */
  --sp-4: 1rem;      /*  16 */
  --sp-5: 1.5rem;    /*  24 */
  --sp-6: 2rem;      /*  32 */
  --sp-7: 3rem;      /*  48 */
  --sp-8: 4rem;      /*  64 */
  --sp-9: 6rem;      /*  96 */
  --sp-10: 8rem;     /* 128 */

  /* Whitespace is the budget line. These are already a fifth thinner than
     they first were. Do not close them up further on a page.               */
  --section-pad:       clamp(3.5rem, 7.5vw, 6.5rem);
  --section-pad-wide:  clamp(4.5rem, 10vw, 9rem);
  --flow:              1.05em;   /* default gap inside a .stack            */

  /* --- Measure ---------------------------------------------------------- */
  --measure:       34em;   /* prose: ~66–72 characters at 17px             */
  --measure-tight: 26em;   /* lede and hero sub-line                       */
  --measure-wide:  44em;

  /* --- Layout ----------------------------------------------------------- */
  --shell-max:    72.5rem;   /* 1160px                                     */
  --shell-narrow: 52rem;     /*  832px — single-column reading pages       */
  --gutter:       clamp(1.5rem, 5vw, 4rem);
  --hair:         1px;
}


/* ============================================================================
   03  RESET AND DOCUMENT BASE
   ========================================================================= */

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

html {
  /* Explicitly auto. Smooth scrolling is motion and this site has none. */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  /* Belt and braces against a rogue wide child: the page never scrolls
     sideways at any width. */
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* The UA draws a border and a notched legend on every fieldset. Radio groups
   are fieldsets, so this reset is load-bearing, not cosmetic. */
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; display: block; width: 100%; }

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

/* Every <img> on this site carries explicit width and height attributes, so
   the browser derives the aspect ratio and reserves the box before the
   bitmap arrives. Nothing shifts on load. */

hr { border: 0; height: var(--hair); background: var(--rule); margin: 0; }

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


/* ============================================================================
   04  LAYOUT PRIMITIVES
   ========================================================================= */

/* .shell — the horizontal container. Everything sits in one.               */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: calc(var(--shell-narrow) + 2 * var(--gutter)); }

/* .section — the vertical rhythm unit. A section carries its own top rule
   so that the page reads as a set of ruled bands with a great deal of air
   between them, the way an annual report is set.                          */
.section { padding-block: var(--section-pad); }
.section--wide  { padding-block: var(--section-pad-wide); }
.section--ruled { border-top: var(--hair) solid var(--rule); }
.section--last  { padding-bottom: var(--section-pad-wide); }

/* .stack — vertical flow. Override the gap per instance with --flow.       */
.stack > * + * { margin-top: var(--flow); }
.stack--tight  { --flow: 0.7em; }
.stack--loose  { --flow: 1.6em; }

/* .rule — a standalone hairline.
   .rule--marked adds the gold segment. This is the site's principal use of
   gold: a short bar that MARKS the start of something. It never fills.     */
.rule { position: relative; height: var(--hair); background: var(--rule); }
.rule--marked::before {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 2.5rem; height: 2px; margin-block-start: -1px;
  background: var(--gold);
}

/* .marked — put the gold tick on any block that starts on a hairline.      */
.marked { position: relative; border-top: var(--hair) solid var(--rule); }
.marked::before {
  content: "";
  position: absolute; inset-block-start: -1px; inset-inline-start: 0;
  width: 2.5rem; height: 2px;
  background: var(--gold);
}


/* ============================================================================
   05  TYPOGRAPHY
   ========================================================================= */

/* --- Display. Cinzel. Caps. One weight. Display sizes only. ------------- */
.display,
.hero__title,
.page-title,
.door__name,
.deliverable__name,
.capability__name,
.block-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  color: var(--paper);
  /* Cinzel's caps are wide; hyphenation would break them badly. */
  hyphens: none;
}

.page-title {
  font-size: var(--fs-d1);
  line-height: var(--lh-display);
}

.block-title {          /* an in-page heading that is real copy, e.g.
                           "What an engagement delivers" */
  font-size: var(--fs-d2);
  line-height: var(--lh-tight);
  color: var(--silver);
}

/* --- Reading type ------------------------------------------------------- */
.lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--silver);
  max-width: var(--measure-tight);
  text-transform: none;
  letter-spacing: 0;
}
.lede--wide { max-width: var(--measure); }

.prose {
  max-width: var(--measure);
  color: var(--paper);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.prose > * + * { margin-top: 1.05em; }
.prose strong { font-weight: 600; color: var(--paper); }
.prose em { font-style: italic; }
.prose--wide { max-width: var(--measure-wide); }

/* A first paragraph that should carry a little more weight than the rest.  */
.prose__open { font-size: var(--fs-sub); color: var(--paper); }

/* --- Mono. The tell that this firm measures things. --------------------- */
/* .eyebrow is a LABEL, not body copy. The 16px floor governs Barlow
   reading text; a letterspaced 13px mono label is a caption face.          */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: 1.5;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--silver-mute);
}
.eyebrow--gold { color: var(--gold); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* .tag — the division stamp on a deliverable. Outlined, never filled.      */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--silver-mute);
  padding: 0.45rem 0.6rem 0.4rem;
  border: var(--hair) solid var(--rule-strong);
}

/* .quiet-note — for a line that must be present and must not be a badge.
   "Veteran-owned." is set with this and nothing else.                      */
.quiet-note {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: 0.03em;
  color: var(--silver-dim);
  margin-top: var(--sp-8);
}

/* .tagline — "Everywhere and nowhere." Hero and footer only.              */
.tagline {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  font-weight: 400;
}


/* ============================================================================
   06  LINKS, BUTTONS, FOCUS
   The entire permitted interaction budget is a color or underline change.
   Nothing moves, nothing fades, nothing scales.
   ========================================================================= */

a { color: inherit; }

/* Body links inside prose */
.prose a,
.link {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--silver-dim);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.prose a:hover, .link:hover {
  color: var(--gold);
  text-decoration-color: var(--gold);
}

/* .link-strong — a named, deliberate destination inside a close block.     */
.link-strong {
  display: inline-block;
  font-weight: 600;
  font-size: var(--fs-sub);
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--silver-dim);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.link-strong:hover { color: var(--gold); text-decoration-color: var(--gold); }

/* .link-mail — an address, set in mono because it is a string, not prose.  */
.link-mail {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  color: var(--silver);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  overflow-wrap: anywhere;
}
.link-mail:hover { color: var(--gold); text-decoration-color: var(--gold); }

/* .btn — outlined. Never filled, and never gold.
   One per page at most: the ask. */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sub);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--paper);
  background: transparent;
  border: var(--hair) solid var(--silver);
  padding: 0.95rem 1.9rem;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.btn:hover { color: var(--gold); border-color: var(--gold); }

/* Focus. Visible, gold, and offset clear of the element. Never removed.    */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* Older engines that only understand :focus still get a ring. */
a:focus, button:focus, input:focus, select:focus, textarea:focus { outline-color: var(--gold); }

/* Skip link — hidden until it takes focus, then a real, solid target.      */
.skip-link {
  position: absolute;
  inset-inline-start: var(--sp-4);
  inset-block-start: -6rem;
  z-index: 50;
  background: var(--navy);
  color: var(--paper);
  border: var(--hair) solid var(--gold);
  padding: var(--sp-3) var(--sp-5);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { inset-block-start: var(--sp-4); }

/* The skip link's destination. <main> carries tabindex="-1" so that following
   the link moves FOCUS into the content, not just the scroll position — some
   engines only move the caret otherwise and the next Tab returns to the nav.
   The ring is suppressed on this one element because it is not reachable by
   Tab and a 2px box drawn around the entire page body is noise, not feedback.
   No interactive control loses its indicator: the :focus-visible rule above
   still governs every link, button and field. */
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible { outline: none; }


/* ============================================================================
   07  HEADER AND NAVIGATION
   Static masthead. Not sticky — a masthead that follows you down the page is
   a device, and this firm does not use devices.
   ========================================================================= */

.masthead {
  border-bottom: var(--hair) solid var(--rule);
}
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5) var(--sp-7);
  padding-block: clamp(1.25rem, 2.4vw, 2rem);
}

/* --- The mark ----------------------------------------------------------- */
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  text-decoration: none;
  min-width: 0;
}
.brand__crest {
  flex: none;
  width: auto;
  height: clamp(1.5rem, 2.6vw, 2rem);   /* 24 → 32px */
}
/* The masthead logotype. The one place Cinzel is set small — it is a mark
   rather than reading type. It wraps to two lines on a narrow screen
   rather than shrinking below legibility. */
.brand__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.8125rem, 0.66rem + 0.42vw, 1.0625rem);
  line-height: 1.2;
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--paper);
  min-width: 0;
}
.brand:hover .brand__name { color: var(--gold); }

/* --- Nav ---------------------------------------------------------------- */
.nav { min-width: 0; }
.nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) clamp(1.1rem, 2.2vw, 2rem);
}
.nav__link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-min);
  letter-spacing: 0.02em;
  color: var(--silver);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--paper); border-bottom-color: var(--rule-strong); }

/* Current page. Gold marks it — one 2px rule, nothing else. */
.nav__link[aria-current="page"] {
  color: var(--paper);
  border-bottom-color: var(--gold);
}


/* ============================================================================
   08  HERO
   A navy field, a lot of air, one line of type.
   ========================================================================= */

.hero {
  padding-block: clamp(4.5rem, 13vw, 10rem) clamp(3rem, 7vw, 6rem);
}
.hero__title {
  font-size: var(--fs-hero);
  color: var(--paper);
  max-width: 16ch;          /* keeps the line from running long on a wide screen */
}
.hero__rule {
  width: 5rem; height: 2px;
  background: var(--gold);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.hero__sub {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 34ch;
}

/* A division page opens with the page title, not the tagline. */
.pagehead { padding-block: clamp(3.25rem, 8vw, 6.5rem) clamp(2.25rem, 5vw, 4rem); }
.pagehead__sub { margin-top: clamp(1.5rem, 3vw, 2.25rem); }


/* ============================================================================
   09  THE THREE DOORS
   Identical weight. One column or three columns — never two, because two
   would put one door on a line of its own and that is an argument the
   architecture does not make.
   ========================================================================= */

.doors {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

.door {
  position: relative;               /* anchors the gold tick and .door__go  */
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-top: var(--sp-5);
  /* .marked supplies the hairline and the gold tick. */
}
.door__name  {
  font-size: var(--fs-d2);
  color: var(--paper);
  /* Sits inside the first subgrid row, so it lifts the lede away from the
     Cinzel caps in every column at once without breaking the shared rows. */
  padding-bottom: var(--sp-3);
}

/* .door__go — the door name IS the link. Its ::after stretches over the
   whole card so the entire door is a target, while the accessible name
   stays exactly the division name and nothing is invented in the copy. */
.door__go { color: inherit; text-decoration: none; }
.door__go::after { content: ""; position: absolute; inset: 0; }
.door:hover .door__go { color: var(--gold); }

/* Three columns from 992px. Subgrid puts every door on the same three row
   lines, so the name, the lede and the capability list start at the same
   height in each column however long the copy in each one runs. Identical
   weight, measurably — not identical only when the sentences happen to
   match. */
@media (min-width: 62rem) {           /* 992px */
  .doors {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: var(--sp-6);
    row-gap: var(--sp-5);
  }
  .door {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;
  }
}

.door__lede  {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-sub);
  line-height: 1.5;
  color: var(--silver);
  max-width: 30ch;
}


/* ============================================================================
   10  CAPABILITY LISTS AND CAPABILITY BLOCKS
   ========================================================================= */

/* .caplist — the middot-separated capability string, set as a real list.
   The middot is kept as the marker so the rendering matches the copy.      */
.caplist { display: flex; flex-direction: column; gap: 0.5rem; }
.caplist li {
  position: relative;
  padding-inline-start: 1.1rem;
  font-size: var(--fs-min);
  line-height: 1.5;
  color: var(--silver);
}
.caplist li::before {
  content: "·";
  position: absolute; inset-inline-start: 0;
  color: var(--silver-dim);
  font-weight: 700;
}

/* .capability — a named capability on a division page: heading, a promise
   line, then the paragraphs. Used by data / industrial / marketing.        */
.capabilities {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}
@media (min-width: 56rem) {           /* 896px */
  .capabilities--two { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-7); }
}
.capability { padding-top: var(--sp-5); }        /* pair with .marked */
.capability__name {
  font-size: var(--fs-d3);
  color: var(--paper);
  margin-bottom: var(--sp-4);
}
.capability__promise {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sub);
  line-height: 1.45;
  color: var(--gold);          /* gold MARKS the promise line. One line only. */
  max-width: 32ch;
  margin-bottom: var(--sp-4);
}
.capability .prose { color: var(--silver); }

/* .bullets — a plain evidence list. Silver rule marker, never a glyph. */
.bullets { display: flex; flex-direction: column; gap: 0.65rem; max-width: var(--measure); }
.bullets li {
  position: relative;
  padding-inline-start: 1.35rem;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--paper);
}
.bullets li::before {
  content: "";
  position: absolute; inset-inline-start: 0; inset-block-start: 0.72em;
  width: 0.6rem; height: 1px;
  background: var(--silver-dim);
}
.bullets--mute li { color: var(--silver); }


/* ============================================================================
   11  PROSE BLOCKS — the repeating page furniture
   ========================================================================= */

/* .block — a titled band of copy inside a section.                         */
.block { display: grid; gap: var(--sp-5); }
@media (min-width: 56rem) {
  .block--split {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--sp-6) var(--sp-8);
    align-items: start;
  }
  /* A side heading is a label for the column beside it, not a page heading. */
  .block--split > .block-title { font-size: var(--fs-d3); }
}

/* .reason — the "Why this firm" item: a bold lead sentence and its body,
   in one paragraph, exactly as the copy sets it.                           */
.reasons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 48rem) {           /* 768px */
  .reasons { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-8); }
}
.reason {
  padding-top: var(--sp-4);
  border-top: var(--hair) solid var(--rule);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--silver);
  max-width: 42ch;
}
.reason strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 0.35rem;
}

/* .pairs — "What an engagement delivers" / "What this does not cover".
   Short standalone statements, each on its own hairline.                   */
.pairs { display: flex; flex-direction: column; }
.pairs li {
  border-top: var(--hair) solid var(--rule);
  padding-block: var(--sp-4);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--silver);
  max-width: var(--measure-wide);
}
.pairs li:last-child { border-bottom: var(--hair) solid var(--rule); }


/* ============================================================================
   12  THE DELIVERABLES MENU
   The page that does the converting. One card per named document.
   ========================================================================= */

.menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}
@media (min-width: 52rem) {           /* 832px */
  .menu { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-7); }
}

.deliverable {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  /* pair with .marked for the hairline + gold tick */
}
.deliverable__name { font-size: var(--fs-d3); color: var(--paper); }
.deliverable__what {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--silver);
  max-width: 40ch;
}
.deliverable__stake {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--gold);
  max-width: 40ch;
}
.deliverable__foot { margin-top: auto; padding-top: var(--sp-2); }


/* ============================================================================
   13  FORM CONTROLS
   Short, specific, and legible. Every control has a real <label>. Required
   fields say so in words, not with an asterisk.
   ========================================================================= */

.form { max-width: 40rem; }
.form__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }

.field { display: block; }
.field__label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--paper);
  margin-bottom: var(--sp-2);
}
.field__req {
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--silver-dim);
  margin-inline-start: 0.6rem;
  white-space: nowrap;
}
.field__hint {
  display: block;
  font-size: var(--fs-min);
  line-height: 1.5;
  color: var(--silver-mute);
  margin-bottom: var(--sp-3);
  max-width: 46ch;
}

.input, .select, .textarea {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--paper);
  background: var(--navy-field);
  border: var(--hair) solid var(--control-edge);
  border-radius: 0;
  padding: 0.8rem 0.95rem;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--silver-dim); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--silver-dim); }
.input, .textarea { caret-color: var(--gold); }

/* Chrome paints autofilled inputs pale blue, which would punch a light panel
   into the navy. The inset shadow is the only way to override it. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--paper);
  -webkit-box-shadow: 0 0 0 100vmax var(--navy-field) inset;
  caret-color: var(--gold);
}

.textarea { min-height: 9.5rem; resize: vertical; }

/* Native select, restyled. The caret is drawn in CSS — no image request,
   no script, no library. */
.select {
  padding-inline-end: 2.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--silver) 50%),
    linear-gradient(135deg, var(--silver) 50%, transparent 50%);
  background-position:
    calc(100% - 1.25rem) calc(50% + 1px),
    calc(100% - 0.85rem) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
/* The dropdown list itself is drawn by the OS; give it legible colors. */
.select option { background: var(--navy-field); color: var(--paper); }

/* Radio group — used for division, budget band, timeline, source.          */
.choices { display: flex; flex-direction: column; gap: var(--sp-1); }
@media (min-width: 40rem) {
  .choices--wrap { flex-direction: row; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); }
}
.choice {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: 0.45rem;
  font-size: var(--fs-body);
  color: var(--silver);
  cursor: pointer;
}
 /* Drawn here rather than left to the UA: the platform default is a solid
    white disc on a dark scheme, which reads as though every option were
    already chosen. Unchosen is an empty silver ring; chosen is a small gold
    dot inside it — gold marking, not gold filling. */
.choice input[type="radio"],
.choice input[type="checkbox"] {
  position: relative;
  top: 0.2rem;
  flex: none;
  width: 0.95rem; height: 0.95rem;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: var(--navy-field);
  border: 1px solid var(--control-edge);
  accent-color: var(--gold);       /* fallback for engines ignoring the above */
}
.choice input[type="radio"] { border-radius: 50%; }
.choice input[type="radio"]:checked {
  border-color: var(--gold);
  background: radial-gradient(circle at 50% 50%, var(--gold) 0 40%, transparent 42%);
}
.choice input[type="checkbox"]:checked {
  border-color: var(--gold);
  background: linear-gradient(var(--gold), var(--gold)) center / 55% 55% no-repeat,
              var(--navy-field);
}
.choice:hover input[type="radio"],
.choice:hover input[type="checkbox"] { border-color: var(--silver); }
.choice:hover { color: var(--paper); }

/* The line that sits directly under the submit control. */
.form__terms {
  font-size: var(--fs-min);
  line-height: 1.55;
  color: var(--silver-mute);
  max-width: 46ch;
  margin-top: var(--sp-4);
}
.form__actions { margin-top: var(--sp-7); }

/* Counter / cap statement beside a capped field. */
/* No text-transform here: this label carries a figure written in the copy,
   and the copy's casing is the copy's business. */
.field__cap {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  letter-spacing: 0.04em;
  color: var(--silver-dim);
  margin-top: var(--sp-2);
}

/* --- .reveal — the short box that belongs to "Other" -------------------- */
/* The frozen intake copy sets this hint under "How did you hear about us?":
       One click. Other opens a short box.
   The site carries no JavaScript, so the box is revealed with a sibling
   selector keyed on the radio's own :checked state.

   Written as :not(:has(…)) rather than :has(…) on purpose. An engine that
   does not understand :has() drops the whole rule as invalid, which leaves
   the box VISIBLE — a spare optional text field, which is harmless. The
   inverse form would fail the other way and hide the box permanently, so an
   "Other" answer would have nowhere to go. Fail toward the visible.

   No motion and no color of its own: the box is either in the flow or it
   is not, and it borrows .field / .input for everything it looks like.     */
.reveal { margin-top: var(--sp-5); }
.choices:not(:has(#source-other:checked)) + .reveal { display: none; }

/* --- The same form, four times ------------------------------------------
   The form lives on the inquiries page and again at the foot of each of the
   three division pages. It is ONE component: everything above dresses all
   four copies, and nothing below restyles a control. If a copy ever needs
   a rule the others do not have, the copies have drifted and that is the
   bug — fix the drift, not the sheet.

   Two things the four-copy arrangement depends on.

   1. The ids inside the form (#name, #email, #source-other, and the rest)
      repeat across pages but never within one. That is what keeps every
      <label for> and every aria-describedby pointing at its own control,
      and it is what keeps the .reveal rule above keyed to the right radio.
      Putting two of these forms on ONE page would duplicate every id and
      break both. Do not.

   2. On a division page the visitor has already chosen a division by being
      there, so that field is a hidden input rather than a radio group. An
      input[type="hidden"] is display:none in every UA sheet and therefore
      generates no box — but .form__grid is a grid with a row gap, and a
      grid gap is drawn around every item that does generate one. Pinning
      it here states the guarantee instead of inheriting it, so the hidden
      field can never open a silent hole in the middle of the form.       */
.form__grid > input[type="hidden"] { display: none; }


/* ============================================================================
   14  CLOSE BLOCK
   The ask, in plain words, at the bottom of a page. No floating button, no
   popup, no widget.
   ========================================================================= */

.close { display: grid; gap: var(--sp-6); }
.close__line {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--paper);
  max-width: 28ch;
}
.close__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5) var(--sp-7);
  margin-top: var(--sp-2);
}
.close__aside {
  font-size: var(--fs-body);
  color: var(--silver);
  max-width: 40ch;
}
.close__contact { margin-top: var(--sp-4); }


/* ============================================================================
   15  FOOTER
   ========================================================================= */

.footer {
  border-top: var(--hair) solid var(--rule);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
}
.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
}
@media (min-width: 48rem) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-8);
    align-items: start;
  }
}
.footer__ident {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: var(--fs-min);
  line-height: 1.6;
  color: var(--silver-mute);
}
.footer__name {
  font-family: var(--font-display);
  font-size: var(--fs-min);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--silver);
}
.footer__nav ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem var(--sp-7);
}
@media (min-width: 30rem) {
  .footer__nav ul {
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: none;
  }
}
.footer__nav a {
  font-size: var(--fs-min);
  color: var(--silver-mute);
  text-decoration: none;
}
.footer__nav a:hover { color: var(--gold); }
.footer__nav a[aria-current="page"] { color: var(--silver); }

.footer__base {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--sp-5);
  border-top: var(--hair) solid var(--rule);
}
/* The tagline closes the page. Cinzel, caps, at a display size — quiet,
   unexplained, and set nowhere on the site except here and the hero. */
.footer__tagline {
  font-size: clamp(1.125rem, 0.98rem + 0.65vw, 1.5rem);
  letter-spacing: 0.1em;
  line-height: 1.3;
  color: var(--silver-mute);
}


/* ============================================================================
   16  404
   Same system, one page short of a page.
   ========================================================================= */

.error { padding-block: clamp(5rem, 14vw, 11rem) clamp(4rem, 9vw, 8rem); }
.error__code {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(3rem, 2rem + 4.5vw, 5rem);
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--gold);
  line-height: 1;
}
.error__title { font-size: var(--fs-d1); margin-top: var(--sp-6); }
.error__body  { margin-top: var(--sp-6); }
.error__links {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-7);
}


/* ============================================================================
   17  UTILITIES
   ========================================================================= */

.vh {                       /* visually hidden, still read aloud */
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.measure       { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }
.measure-wide  { max-width: var(--measure-wide); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.silver { color: var(--silver); }
.mute   { color: var(--silver-mute); }


/* ============================================================================
   18  MOTION POLICY AND PRINT

   MOTION POLICY: this stylesheet declares no transition, no animation, no
   transform on any state, and no scroll-behavior other than auto. There is
   nothing for prefers-reduced-motion to switch off. The block below is a
   standing guarantee: if anything is ever added that moves, it stops here.
   ========================================================================= */

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

/* Forced-colors (Windows high contrast): let the OS palette through and
   keep the structural rules visible. */
@media (forced-colors: active) {
  .rule, .marked, .reason, .pairs li, .masthead, .footer { border-color: CanvasText; }
  .nav__link[aria-current="page"] { border-bottom-color: Highlight; }
  .btn { border-color: ButtonText; }
}


/* ----------------------------------------------------------------------------
   PRINT
   A dignified sheet: black on white, the dark mark, hairlines kept, chrome
   dropped, and the destination of every meaningful link printed after it.
   -------------------------------------------------------------------------- */
@media print {

  :root {
    /* The page declares color-scheme: dark for the screen. Left in place it
       makes Chrome paint the paper canvas near-black around the margin box. */
    color-scheme: light;

    --navy:        #FFFFFF;
    --navy-field:  #FFFFFF;
    --paper:       #111111;
    --cream:       #111111;
    --silver:      #333333;
    --silver-mute: #555555;
    --silver-dim:  #666666;
    --gold:        #6A5320;
    --gold-deep:   #6A5320;
    --rule:        #BBBBBB;
    --rule-strong: #999999;
    --control-edge:#999999;

    /* Screen display sizes are set in vw and would print at 54pt. Paper is a
       fixed width, so the whole scale is restated in points. */
    --fs-hero:     26pt;
    --fs-d1:       19pt;
    --fs-d2:       13.5pt;
    --fs-d3:       11.5pt;
    --fs-lede:     12pt;
    --fs-sub:      11pt;
    --fs-body:     10.5pt;
    --fs-min:      10pt;
    --fs-label:    8.5pt;
    --fs-tag:      8.5pt;
    --lh-display:  1.14;
    --lh-body:     1.45;
    --lh-lede:     1.32;

    --section-pad:      1.6rem;
    --section-pad-wide: 2rem;
  }

  html, body { background: #FFFFFF !important; color: #111111 !important; }
  body { font-size: 10.5pt; line-height: 1.45; overflow-x: visible; }

  /* Chrome the sheet does not need. */
  .skip-link,
  .nav,
  .footer__nav,
  .hero__rule,
  .form__actions,
  .btn { display: none !important; }

  /* Swap the cream mark for the navy one so it prints. */
  /* The crest is cream, drawn for a navy ground. brightness(0) maps it to
     black and leaves the alpha mask alone, so the same file prints as a
     black mark on white. (A `content: url()` swap to the navy variant is
     silently dropped by Chrome's print path — this is the mechanism that
     actually survives to paper.) */
  .brand__crest {
    height: 9mm; width: auto;
    filter: brightness(0);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .masthead { border-bottom: 1px solid #999999; }
  .masthead__inner { padding-block: 0 0.6rem; }
  .brand__name { color: #111111; }

  /* The screen footer carries 5rem of air above and below. On paper that is
     enough to push the imprint onto a sheet of its own. Tighten it so the
     sheet count is set by the copy, not by the chrome. */
  .footer { padding-block: 1.2rem 0.4rem; }
  .footer__base { margin-top: 1rem; padding-top: 0.7rem; }
  .footer__tagline { font-size: 12pt; letter-spacing: 0.08em; }
  .footer__ident { gap: 0.15rem; }

  .shell { max-width: none; padding-inline: 0; }
  .section { padding-block: 1.4rem; }
  .hero, .pagehead { padding-block: 1.2rem 1rem; }

  /* Gold becomes a dark ochre rule; it still marks, it never fills. */
  .marked::before, .rule--marked::before, .hero__rule { background: #6A5320; }
  .capability__promise, .deliverable__stake { color: #111111; font-weight: 600; }
  .error__code { color: #111111; }

  /* Print the destination of links inside running copy only. A heading, the
     masthead mark and a mailto: address are all worse for carrying a URL:
     the heading is a heading, and the address is already the visible text. */
  .prose a[href^="http"]::after,
  .prose a[href$=".html"]::after,
  .close a[href$=".html"]::after {
    content: " (" attr(href) ")";
    font-family: "Space Mono", monospace;
    font-size: 8.5pt;
    color: #555555;
    word-break: break-all;
  }
  a[href^="#"]::after, a[href^="mailto:"]::after, .brand::after { content: ""; }

  /* Keep blocks whole. The footer is on the list because a split imprint —
     the firm's name on one sheet and its address on the next — is the one
     break that actually looks careless. */
  .door, .capability, .deliverable, .reason, .pairs li, .field,
  .footer, .footer__top, .footer__base, .close { break-inside: avoid; }
  h1, h2, h3, .block-title, .page-title { break-after: avoid; }

  .doors      { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
  .menu       { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .capabilities--two { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }

  @page { margin: 18mm 16mm; }
}