/* ==========================================================================
   Bramcott LLC — component and chrome layer

   A document-first identity: the site reads as the published output of a
   research and consulting office, not as a marketing brochure.

   All values come from tokens.css. This file defines the shared vocabulary:
   the publisher's masthead, hairline tables and schedules, the document
   register, numbered observations with margin notes, native disclosures, the
   form controls every workflow page uses, and the publication footer.

   Principles carried through every rule
     · Surfaces are flat and square. Rules do the separating — no shadows, no
       glass, no decorative fills.
     · Evergreen is the identity colour and the scarce signal: headings,
       primary actions, the masthead rule, focus rings.
     · Ordinary hyperlinks are ink blue and stay underlined, with a visible
       visited state, because a reference already opened should say so.
     · Oxblood means exactly one thing: a Bramcott note or a document marker.
       It is never a status colour, and status colours are never annotation.
     · Tinos reads — headings, prose, document text. Inter is chrome —
       navigation, controls, labels, table headers. JetBrains Mono is reserved
       for document references and machine identifiers.
     · Sage, mist and blush are grounds, never text colours, and only at the
       contrast ratios the tokens document.
     · Nothing here requires JavaScript.
   ========================================================================== */

/* -------------------------------------------------------------------------
   RESET & BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
       scroll-padding-top: calc(var(--nav-h) + var(--space-4)); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-size: var(--type-body-ui);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 768px) { body { font-size: var(--type-body-read); } }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: 400; color: var(--evergreen);
  letter-spacing: -0.012em; margin: 0 0 var(--space-4);
  font-optical-sizing: auto;
}
h1 { font-size: var(--type-h1); line-height: var(--type-h1-lh); }
h2 { font-size: var(--type-h2); line-height: var(--type-h2-lh); }
h3 { font-size: var(--type-h3); line-height: var(--type-h3-lh); }
h4 { font-size: var(--type-body-read); line-height: var(--type-body-read-lh); font-weight: 400; }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
img, svg { max-width: 100%; height: auto; }

/* Ordinary hyperlinks are references in a document: ink blue, underlined all
   the time, with a visible visited state so a reader can see what they have
   already opened. :where() keeps the visited rule at (0,1,0) so that every
   component class — .btn, .textlink, .nav-list a, the footer — outranks it and
   keeps its own colour instead of turning plum after a click. */
a { color: var(--link); text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
    text-decoration-thickness: 1px; text-underline-offset: 3px;
    transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease; }
:where(a):visited { color: var(--link-visited); }
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.2em; max-width: var(--measure); }
li { margin-bottom: var(--space-2); }
li::marker { color: var(--rule); }

hr { border: 0; border-top: 1px solid var(--rule-soft); margin: var(--space-12) 0; }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: var(--type-data); }
code { background: var(--recessed); padding: 0.1em 0.35em; border-radius: 0; color: var(--evergreen); }
pre { background: var(--recessed); border: 0; border-left: 1px solid var(--rule);
      color: var(--evergreen); padding: var(--space-4); overflow-x: auto;
      line-height: 1.6; max-width: none; }
pre code { background: none; padding: 0; }

blockquote { margin: var(--space-6) 0; padding: 0 0 0 var(--space-4);
             border-left: 1px solid var(--rule); color: var(--ink);
             font-family: var(--font-heading); font-style: italic; }

table { border-collapse: collapse; width: 100%; }
caption { text-align: left; font-family: var(--font-grotesk); font-size: var(--type-small);
          color: var(--ink-muted); padding-bottom: var(--space-2); }

/* -------------------------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--z-toast);
             background: var(--evergreen); color: var(--paper);
             padding: var(--space-3) var(--space-6); font-size: var(--type-small);
             font-weight: 500; text-decoration: none; }
.skip-link:focus { left: 0; color: var(--paper); }

:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.site-footer :focus-visible, .closing :focus-visible, .panel--dark :focus-visible,
.password-display :focus-visible { outline: var(--focus-ring-on-field); }

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

/* -------------------------------------------------------------------------
   CONTAINERS
   border-box folds padding into max-width, so add the gutters back: at a
   1440px viewport this yields exactly 1280px of content with 80px margins.
   ------------------------------------------------------------------------- */
.wrap, .frame {
  width: 100%;
  max-width: calc(var(--canvas) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow, .frame--narrow { max-width: calc(var(--text-column) + (var(--gutter) * 2)); }
main.wrap, main.frame { padding-block: var(--space-6) var(--space-16); min-height: 40vh; }

.grid { display: grid; gap: var(--space-8); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .grid--sidebar { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: var(--space-16); }
}

/* -------------------------------------------------------------------------
   MASTHEAD — a publisher's letterhead: mark, wordmark, and the subject
   classification of the document being read. The rule below it is the opening
   rule of the page; only a page title shares that weight.
   ------------------------------------------------------------------------- */
.site-header { background: var(--paper);
               border-bottom: var(--rule-w-masthead) solid var(--evergreen); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); min-height: var(--nav-h-mobile); padding-block: var(--space-3);
}
@media (min-width: 1024px) { .site-header__inner { min-height: var(--nav-h); padding-block: 0; } }

/* Identity and subject sit together, separated by a hairline so the subject
   reads as a classification of this page and not as part of the wordmark.
   Below 560px it is dropped rather than wrapped: it restates what the page
   title already says, and the wordmark must not be squeezed to fit it. */
.masthead__id { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none;
         flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 40px; height: 40px; display: block; }
.brand__name {
  font-family: var(--font-brand); font-size: 1.0625rem; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--evergreen); line-height: 1;
}
.masthead__subject {
  margin: 0; padding-left: var(--space-4);
  border-left: var(--rule-w-fine) solid var(--rule);
  font-family: var(--font-grotesk); font-size: var(--type-micro); line-height: 1.4;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted);
}
@media (max-width: 559px) { .masthead__subject { display: none; } }

.site-nav { display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px);
            list-style: none; margin: 0; padding: 0; }
.nav-list a {
  font-family: var(--font-grotesk); font-size: 13px; font-weight: 400;
  color: var(--ink); text-decoration: none; min-height: 44px;
  display: inline-flex; align-items: center;
  transition: color var(--duration-fast) ease;
}
.nav-list a:hover { color: var(--evergreen); }
.nav-list a[aria-current="page"] { color: var(--evergreen); text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: 6px; }
/* The request action is an underlined text link, not a button, per the concept. */
.nav-list .nav-cta a { color: var(--evergreen); text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: 6px; font-weight: 500; }
.nav-list .nav-cta a:hover { text-decoration-color: var(--evergreen); }

/* --- Native disclosure below 1024px --------------------------------------- */
.nav-disclosure { display: none; position: relative; }
.nav-list--disclosure { display: none; }
@media (max-width: 1023px) {
  .nav-list--full { display: none; }
  .nav-disclosure { display: block; }
  .nav-disclosure__toggle {
    min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-grotesk); font-size: 13px; font-weight: 400; color: var(--ink);
    background: none; border: 0; padding: 0 4px; cursor: pointer; list-style: none;
  }
  .nav-disclosure__toggle::-webkit-details-marker { display: none; }
  .nav-disclosure__toggle::after { content: ''; width: 7px; height: 7px;
    border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px); transition: transform var(--duration-fast) ease; }
  .nav-disclosure[open] .nav-disclosure__toggle::after { transform: rotate(-135deg) translateY(-2px); }
  .nav-disclosure[open] .nav-list--disclosure {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; right: 0; top: calc(100% + 8px); z-index: var(--z-nav);
    min-width: 220px; background: var(--paper); border: 1px solid var(--rule-soft);
    padding: var(--space-3) var(--space-6); box-shadow: var(--elev-2-shadow);
  }
  .nav-list--disclosure a { min-height: 44px; padding: var(--space-2) 0; }
}
@media (min-width: 1024px) { .nav-list--full { display: flex; } }

/* -------------------------------------------------------------------------
   HEADINGS AND RULES — three weights, each with one job

   The short tick that used to sit under every heading made the hierarchy look
   mechanical, so a rule now means something: 3px evergreen opens a document
   (the page title), 1px separates a section, and 2px marks a major analytical
   division or a total. The heavy rule is deliberately rare. Below h3 the
   hierarchy is carried by size, weight, indentation and space alone.
   ------------------------------------------------------------------------- */
.rule-under { display: block; padding-bottom: var(--space-3);
              margin-bottom: var(--space-6);
              border-bottom: var(--rule-w-fine) solid var(--rule); }
h1.rule-under { border-bottom: var(--rule-w-masthead) solid var(--evergreen); }
.rule-under--major { border-bottom: var(--rule-w-division) solid var(--evergreen); }
h3.rule-under, h4.rule-under { border-bottom: 0; padding-bottom: 0;
                               margin-bottom: var(--space-3); }

/* Labels are routine, so they carry modest tracking. Wide letterspacing is
   reserved for the masthead wordmark and the occasional publication label. */
.eyebrow, .rule-label, .section-head__eyebrow {
  font-family: var(--font-grotesk); font-size: var(--type-micro); line-height: 1.7;
  font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 var(--space-4);
}
/* A statement of purpose is prose, so it reads in the serif like the rest of the
   document. Only labels, controls and data stay in Inter. */
.lede { font-size: var(--type-lede); line-height: 1.6;
        color: var(--ink); max-width: 58ch; }
.section-title { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap;
                 margin-bottom: var(--space-3); }
.section-title .count { font-family: var(--font-grotesk); font-size: var(--type-small);
                        color: var(--ink-muted); }

/* Page head used by every inner page: underlined H1 plus lede. */
.page-head { padding-block: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 40px); }
.page-head h1 { margin-bottom: var(--space-6); }
.page-head .lede { margin: 0; }
/* Legacy alias so existing templates keep working. */
.page-hero { padding-block: clamp(32px, 4vw, 56px) clamp(16px, 2vw, 24px);
             background: var(--paper); border-bottom: 0; }
.page-hero--tinted { background: var(--paper); }
.page-hero h1 { margin-bottom: var(--space-6); display: block;
                padding-bottom: var(--space-3);
                border-bottom: var(--rule-w-masthead) solid var(--evergreen); }
.page-hero p { font-size: var(--type-lede); color: var(--ink); }
/* The service-detail concept's underlined title, available anywhere. These sit
   at (0,1,1), so they must restate the rule system rather than the old tick —
   a repeat of the previous values here silently overrode it. */
h1.rule-under { display: block; padding-bottom: var(--space-3);
  border-bottom: var(--rule-w-masthead) solid var(--evergreen); }
h2.rule-under { display: block; padding-bottom: var(--space-3);
  border-bottom: var(--rule-w-fine) solid var(--rule); }
h2.rule-under--major { border-bottom: var(--rule-w-division) solid var(--evergreen); }
h3.rule-under, h4.rule-under { display: block; padding-bottom: 0; border-bottom: 0; }
.page-hero .eyebrow { margin-bottom: var(--space-4); }

/* -------------------------------------------------------------------------
   LINKS AND BUTTONS
   ------------------------------------------------------------------------- */
.textlink, .link-arrow {
  font-family: var(--font-grotesk); font-size: var(--type-small); font-weight: 500;
  color: var(--evergreen); text-decoration: underline; text-decoration-color: var(--rule);
  text-underline-offset: 5px; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
}
.textlink:hover, .link-arrow:hover { text-decoration-color: var(--evergreen); }
.link-arrow .btn__arrow { transition: transform var(--duration-fast) ease; }
.link-arrow:hover .btn__arrow { transform: translateX(3px); }

.btn, .magie-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 22px; border-radius: var(--r-2);
  font-family: var(--font-grotesk); font-size: var(--type-small); font-weight: 500;
  background: var(--evergreen); color: var(--paper) !important;
  border: 1px solid var(--evergreen); text-decoration: none !important; cursor: pointer;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.btn:hover { background: var(--ink-900); border-color: var(--ink-900); }
.btn--sm { min-height: 44px; padding: 6px 16px; font-size: var(--type-micro); }
.btn--lg { min-height: 52px; padding: 12px 28px; font-size: var(--type-body-ui); }
/* Secondary actions are underlined text links, not outlined pills: the
   concepts show no bordered ghost buttons anywhere in content areas. */
.btn--ghost, .magie-btn-quiet, .magie-btn-ghost {
  background: transparent; color: var(--evergreen) !important; border: 0;
  padding-inline: 0; min-height: 44px; text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: 5px;
}
.btn--ghost:hover, .magie-btn-quiet:hover, .magie-btn-ghost:hover {
  background: transparent; text-decoration-color: var(--evergreen); }
.btn--dark, .btn--teal { background: var(--evergreen); border-color: var(--evergreen); color: var(--paper) !important; }
.btn--danger { background: transparent; color: var(--warn) !important; border-color: var(--rule); }
.btn--danger:hover { border-color: var(--warn); background: var(--warn-wash); }
.btn--on-field { background: var(--paper); color: var(--evergreen) !important; border-color: var(--paper); }
.btn--on-field:hover { background: var(--surface); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn__arrow { font-family: var(--font-grotesk); }

/* -------------------------------------------------------------------------
   PANELS — flat colour fields, no borders, no shadows
   ------------------------------------------------------------------------- */
/* A neutral panel is a hairline and air, not a box: on paper ground a
   near-white rectangle reads as an empty floating shape. Tinted and inverse
   variants below keep their colour fields. */
.panel, .magie-panel { background: transparent; border: 0; border-top: 1px solid var(--rule-soft);
  border-radius: 0; padding: var(--space-8) 0 0; }
.panel--tint, .svc-panel { background: var(--sage); border-top: 0;
  padding: clamp(24px, 3vw, 48px); }
.panel--mist { background: var(--mist); border-top: 0; padding: clamp(24px, 3vw, 48px); }
.panel--blush { background: var(--blush); border-top: 0; padding: clamp(24px, 3vw, 48px); }
.panel--dark, .magie-toast { background: var(--evergreen); color: var(--field-muted);
  border-top: 0; padding: clamp(24px, 3vw, 48px); }
.panel--dark h2, .panel--dark h3, .panel--dark h4, .panel--dark strong { color: var(--paper); }
.panel--dark a { color: var(--paper); text-decoration-color: var(--field-rule); }
.panel--dark .rule-label, .panel--dark .eyebrow { color: var(--field-muted); }
.magie-well, .well { background: var(--recessed); border: 0; padding: var(--space-4); }
.magie-sheet { background: var(--surface); padding: var(--space-8); box-shadow: var(--elev-3-shadow); max-width: 560px; }

/* Cards become flat editorial blocks: a hairline above, no box. */
.card, .magie-card {
  background: transparent; border: 0; border-top: 1px solid var(--rule-soft);
  border-radius: 0; padding: var(--space-6) 0; box-shadow: none;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.card:hover { box-shadow: none; }
.card__code { font-family: var(--font-grotesk); font-size: var(--type-micro); letter-spacing: 0.05em;
              text-transform: uppercase; color: var(--ink-muted); }
.card__title { font-family: var(--font-heading); font-weight: 400; font-size: var(--type-h3);
               line-height: 1.25; margin: 0; color: var(--evergreen); }
.card__title a { color: var(--evergreen); text-decoration: underline;
                 text-decoration-color: var(--rule); text-underline-offset: 5px; }
.card__title a:hover { text-decoration-color: var(--evergreen); }
.card__text { font-size: var(--type-small); line-height: 1.65; color: var(--ink); margin: 0; flex: 1 0 auto; }
.card__foot { margin-top: auto; padding-top: var(--space-4); border-top: 0;
              display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.card--feature, .card--teal { border-top-color: var(--rule); }

/* -------------------------------------------------------------------------
   TAGS AND STATUS PILLS — flat, hairline only
   ------------------------------------------------------------------------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; padding: 0; margin: 0; }
.tag-list li { margin: 0; }
.tag { display: inline-block; padding: 2px 0; background: none; border: 0; border-radius: 0;
       font-family: var(--font-grotesk); font-size: var(--type-micro); color: var(--ink-muted); }
.tag--copper, .tag--teal { color: var(--evergreen); }

.pill { display: inline-block; padding: 2px 8px; border-radius: 0;
        font-family: var(--font-grotesk); font-size: var(--type-micro); font-weight: 500;
        letter-spacing: 0.04em; white-space: nowrap; border: 1px solid var(--rule);
        background: none; color: var(--ink); }
.pill--new      { border-color: var(--evergreen); color: var(--evergreen); }
.pill--review   { border-color: var(--care); color: var(--care); }
.pill--quoted   { border-color: var(--ink-muted); color: var(--ink-muted); }
.pill--done     { border-color: var(--ok); color: var(--ok); }
.pill--rejected { border-color: var(--warn); color: var(--warn); }
.pill--muted    { border-color: var(--rule-soft); color: var(--ink-muted); }

/* -------------------------------------------------------------------------
   NOTES AND ALERTS — flat tinted fields with a hairline
   ------------------------------------------------------------------------- */
.note, .magie-provenance {
  padding: var(--space-4) var(--space-6); margin: var(--space-6) 0;
  background: var(--recessed); border: 0; border-left: 2px solid var(--rule);
  font-size: var(--type-small); line-height: 1.65; color: var(--ink); }
.note strong { color: var(--evergreen); }
.note--warn { background: var(--care-wash); border-left-color: var(--care); }
.note--info { background: var(--mist); border-left-color: var(--evergreen); }
.note--ok   { background: var(--ok-wash); border-left-color: var(--ok); }

.alert { padding: var(--space-4) var(--space-6); margin-bottom: var(--space-6);
         border: 0; border-left: 2px solid var(--rule); background: var(--recessed);
         font-size: var(--type-small); line-height: 1.65; }
.alert--success { background: var(--ok-wash); border-left-color: var(--ok); color: var(--ink); }
.alert--error   { background: var(--warn-wash); border-left-color: var(--warn); color: var(--ink); }
.alert--notice  { background: var(--mist); border-left-color: var(--evergreen); color: var(--ink); }
.alert strong { color: var(--evergreen); }

/* -------------------------------------------------------------------------
   TABLES — editorial: hairline rows, no header fill, no outer box
   ------------------------------------------------------------------------- */
.data-table, .magie-table {
  margin: var(--space-6) 0; font-family: var(--font-grotesk);
  font-size: var(--type-small); line-height: 1.65; background: transparent; border: 0; }
.data-table caption, .magie-table caption { padding-bottom: var(--space-4); color: var(--ink-muted);
  font-family: var(--font-grotesk); font-size: var(--type-small); }
.data-table th, .data-table td, .magie-table th, .magie-table td {
  padding: var(--space-4) var(--space-4) var(--space-4) 0; text-align: left;
  border: 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.data-table thead th, .magie-table thead th {
  background: none; color: var(--ink-muted); font-weight: 500;
  font-family: var(--font-grotesk);
  font-size: var(--type-micro); letter-spacing: 0.05em; text-transform: uppercase;
  border-bottom: 1px solid var(--rule); padding-bottom: var(--space-3); white-space: normal; }
.data-table tbody tr:hover td { background: transparent; }
.data-table tbody tr:last-child td { border-bottom: 1px solid var(--rule-soft); }
.data-table td.num, .data-table th.num, .magie-table .num {
  text-align: right; font-family: var(--font-grotesk); font-weight: 500;
  font-variant-numeric: tabular-nums; }
.data-table tfoot td, .magie-table tfoot td {
  background: none; font-weight: 600; color: var(--evergreen);
  border-top: 1px solid var(--rule); border-bottom: 0; padding-top: var(--space-3); }
.table-scroll, .magie-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space-6) 0; }
.table-scroll .data-table { margin: 0; min-width: 560px; }

/* The sage service/scope table from the service-detail concept. */
.svc-panel { padding: clamp(24px, 3vw, 48px); }
.svc-table { margin: 0; }
.svc-table th, .svc-table td { padding: var(--space-6) var(--space-6) var(--space-6) 0; text-align: left; font-weight: 400; }
.svc-table thead th { padding-left: var(--space-6); }
.svc-table tbody td:first-child, .svc-table tbody th { padding-left: var(--space-6); }
.svc-table a { color: var(--evergreen); text-decoration: underline;
               text-decoration-color: var(--rule); text-underline-offset: 5px;
               font-size: var(--type-body-ui); }
.svc-table a:hover { text-decoration-color: var(--evergreen); }
.svc-table tbody th[scope="row"] { font-weight: 400; text-align: left; }

/* -------------------------------------------------------------------------
   SPEC LIST — hairline two-column definition rows
   ------------------------------------------------------------------------- */
dl.spec { margin: var(--space-6) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
          background: transparent; border: 0; }
@media (min-width: 620px) { dl.spec { grid-template-columns: minmax(180px, 0.6fr) minmax(0, 2fr); } }
dl.spec dt { padding: var(--space-3) 0; font-family: var(--font-grotesk); font-weight: 500;
             font-size: var(--type-micro); letter-spacing: 0.05em; text-transform: uppercase;
             color: var(--ink-muted); border-bottom: 1px solid var(--rule-soft); }
dl.spec dd { padding: var(--space-3) 0; margin: 0; border-bottom: 1px solid var(--rule-soft);
             font-size: var(--type-small); line-height: 1.65; color: var(--ink); }
dl.spec dt:last-of-type, dl.spec dd:last-of-type { border-bottom: 0; }

/* -------------------------------------------------------------------------
   STATS — flat hairline rows rather than boxed tiles
   ------------------------------------------------------------------------- */
.kpi-grid { display: grid; gap: 0; margin: var(--space-6) 0;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.kpi { background: transparent; border: 0; border-top: 1px solid var(--rule-soft);
       padding: var(--space-4) var(--space-6) var(--space-4) 0; }
.kpi strong { display: block; font-family: var(--font-heading); font-weight: 400;
              font-size: var(--type-h2); line-height: 1.1; color: var(--evergreen);
              font-variant-numeric: tabular-nums; }
.kpi span { display: block; font-family: var(--font-grotesk); font-size: var(--type-micro);
            letter-spacing: 0.045em; text-transform: uppercase; color: var(--ink-muted);
            margin-top: var(--space-2); }

/* -------------------------------------------------------------------------
   CHARTS — pure CSS bars in evergreen tints
   ------------------------------------------------------------------------- */
.chart { margin: var(--space-6) 0; background: transparent; border: 0; border-top: 1px solid var(--rule-soft);
         padding: var(--space-6) 0; }
.chart figcaption { font-family: var(--font-grotesk); font-weight: 500; font-size: var(--type-small);
                    color: var(--evergreen); margin-bottom: var(--space-4); }
.chart__row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 3fr) auto;
              align-items: center; gap: var(--space-4); margin-bottom: var(--space-2); }
.chart__label { font-size: var(--type-small); color: var(--ink); }
.chart__bar { display: block; height: 10px; min-width: 2px; background: var(--evergreen); }
.chart__value { font-family: var(--font-grotesk); font-weight: 500; font-size: var(--type-small); color: var(--evergreen);
                font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart__row:nth-child(3) .chart__bar { background: var(--data-seq-2); }
.chart__row:nth-child(4) .chart__bar { background: var(--data-seq-3); }
.chart__row:nth-child(5) .chart__bar { background: var(--data-seq-4); }
.chart--copper .chart__bar { background: var(--bronze); }
@media (max-width: 560px) {
  .chart__row { grid-template-columns: minmax(0, 1fr) auto; }
  .chart__bar { grid-column: 1 / -1; }
}
.w-0{width:0}.w-5{width:5%}.w-10{width:10%}.w-15{width:15%}.w-20{width:20%}
.w-25{width:25%}.w-30{width:30%}.w-35{width:35%}.w-40{width:40%}.w-45{width:45%}
.w-50{width:50%}.w-55{width:55%}.w-60{width:60%}.w-65{width:65%}.w-70{width:70%}
.w-75{width:75%}.w-80{width:80%}.w-85{width:85%}.w-90{width:90%}.w-95{width:95%}
.w-100{width:100%}

/* -------------------------------------------------------------------------
   DISCLOSURES — native details/summary, the only "interaction" on the site
   ------------------------------------------------------------------------- */
.disclosure { border: 0; margin: var(--space-6) 0; }
.disclosure > summary {
  list-style: none; cursor: pointer; min-height: 44px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-grotesk); font-size: var(--type-small); font-weight: 500;
  color: var(--ink); padding: var(--space-2) 0;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: ''; width: 8px; height: 8px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform var(--duration-fast) ease; }
.disclosure[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.disclosure > summary:hover { color: var(--evergreen); }
.disclosure__body { padding-top: var(--space-6); }

/* -------------------------------------------------------------------------
   FORMS
   ------------------------------------------------------------------------- */
.form { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.form__fieldset { border: 0; padding: 0; margin: 0 0 var(--space-12); }
.form__legend { font-family: var(--font-grotesk); font-size: var(--type-micro); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
  padding: 0 0 var(--space-3); margin-bottom: var(--space-6); width: 100%;
  border-bottom: 1px solid var(--rule-soft); }
.form__row { display: grid; gap: var(--space-6); margin-bottom: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__field > label, .form__label { font-family: var(--font-grotesk); font-size: var(--type-small);
  font-weight: 500; color: var(--evergreen); }
.form__req { color: var(--warn); }
.form__hint { font-size: var(--type-micro); line-height: 1.6; color: var(--ink-muted); max-width: 52ch; }
.form__error { font-size: var(--type-micro); color: var(--warn); font-weight: 500; }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], input[type="date"],
select, textarea {
  width: 100%; padding: 12px 14px; font-family: var(--font-grotesk);
  font-size: var(--type-body-ui); line-height: 1.5; color: var(--evergreen);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 0;
  transition: border-color var(--duration-fast) ease;
}
textarea { min-height: 140px; resize: vertical; line-height: 1.65; }
input::placeholder, textarea::placeholder { color: var(--ink-muted); }
select { appearance: none; padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
                    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
input:focus, select:focus, textarea:focus { outline: var(--focus-ring); outline-offset: 2px;
  border-color: var(--evergreen); }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--warn); }
input:disabled, select:disabled, textarea:disabled { background: var(--recessed); color: var(--ink-muted); cursor: not-allowed; }
input[readonly] { background: var(--recessed); }

.form__check { display: flex; gap: var(--space-3); align-items: flex-start;
               font-size: var(--type-small); color: var(--ink); }
.form__check input[type="checkbox"], .form__check input[type="radio"] {
  width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--evergreen); }
.form__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center;
                 padding-top: var(--space-8); margin-top: var(--space-3);
                 border-top: 1px solid var(--rule-soft); }

.choice-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.choice span { display: block; padding: var(--space-4); border: 1px solid var(--rule);
  background: var(--surface); font-size: var(--type-small); color: var(--ink); }
.choice span strong { display: block; color: var(--evergreen); font-weight: 500; margin-bottom: 2px; }
.choice input:checked + span { border-color: var(--evergreen); background: var(--signal-soft); }
.choice input:focus-visible + span { outline: var(--focus-ring); outline-offset: 2px; }

/* -------------------------------------------------------------------------
   QUOTE / REPORT DOCUMENT
   ------------------------------------------------------------------------- */
.report, .quote { background: transparent; border: 0; border-radius: 0; padding: 0; }
.report__meta, .quote__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8);
  padding-bottom: var(--space-4); margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-grotesk); font-size: var(--type-data); color: var(--ink-muted); }
.report__meta span strong, .quote__meta span strong { color: var(--evergreen); font-weight: 500; }
.report h2, .quote h2 { font-size: var(--type-h2); margin-top: var(--space-12);
  padding-top: var(--space-6); border-top: 1px solid var(--rule-soft); }
.report h2:first-of-type, .quote h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.report h3, .quote h3 { font-size: var(--type-h3); margin-top: var(--space-8); }
.report h4, .quote h4 { font-family: var(--font-grotesk); font-size: var(--type-micro);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted);
  margin-top: var(--space-6); font-weight: 500; }
.report p, .quote p, .report li, .quote li { font-size: var(--type-body-read); line-height: 1.65; }



/* -------------------------------------------------------------------------
   BREADCRUMB
   ------------------------------------------------------------------------- */
.breadcrumb { font-family: var(--font-grotesk); font-size: var(--type-micro); color: var(--ink-muted);
              margin-bottom: var(--space-6); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; max-width: none; }
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb li + li::before { content: "/"; color: var(--rule); }
.breadcrumb a { color: var(--ink-muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.breadcrumb a:hover { color: var(--evergreen); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--evergreen); }

/* -------------------------------------------------------------------------
   SSL VERDICT
   ------------------------------------------------------------------------- */
.ssl-verdict { display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-6); border: 0; border-left: 2px solid var(--rule);
  background: var(--recessed); margin-bottom: var(--space-8); }
.ssl-verdict--ok       { border-left-color: var(--ok); background: var(--ok-wash); }
.ssl-verdict--expiring { border-left-color: var(--care); background: var(--care-wash); }
.ssl-verdict--expired, .ssl-verdict--self_signed, .ssl-verdict--untrusted,
.ssl-verdict--unreachable, .ssl-verdict--error { border-left-color: var(--warn); background: var(--warn-wash); }
.ssl-verdict__icon { font-size: var(--type-h3); line-height: 1; flex: none; color: var(--ink-muted); }
.ssl-verdict__body strong { display: block; font-family: var(--font-heading); font-weight: 400;
  font-size: var(--type-h3); color: var(--evergreen); margin-bottom: 4px; }
.ssl-verdict__body p { font-size: var(--type-small); color: var(--ink); margin: 0; max-width: none; }

/* -------------------------------------------------------------------------
   MISC
   ------------------------------------------------------------------------- */
.mono { font-family: var(--font-mono); font-size: 0.92em; word-break: break-all; font-variant-numeric: tabular-nums; }
.password-display { font-family: var(--font-mono); font-size: var(--type-h3); letter-spacing: 0.14em;
  padding: var(--space-4) var(--space-6); background: var(--evergreen); color: var(--paper);
  text-align: center; word-break: break-all; }
.empty { text-align: left; padding: var(--space-8) 0; color: var(--ink-muted);
         border-top: 1px solid var(--rule-soft); background: transparent; }
.empty strong { display: block; font-family: var(--font-heading); font-weight: 400;
                color: var(--evergreen); font-size: var(--type-h3); margin-bottom: var(--space-2); }

/* Certainty Law utilities. */
.magie-fact { font-style: normal; }
.magie-inference { font-style: italic; color: var(--ink); }
/* Separator utilities. */
.magie-sep-air { height: var(--space-8); }
.magie-sep-section { height: var(--section); }
.magie-hairline { border: 0; border-top: 1px solid var(--rule-soft); margin: var(--space-8) 0; }

/* Type registers. */
.magie-display { font-family: var(--font-heading); font-size: var(--type-display); font-weight: 400; color: var(--evergreen); }
.magie-lede { font-size: var(--type-lede); line-height: 1.65; color: var(--ink); max-width: var(--measure); }
.magie-body-read { font-size: var(--type-body-read); line-height: 1.65; max-width: var(--measure); }
.magie-micro { font-size: var(--type-micro); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }
.magie-data { font-family: var(--font-mono); font-size: var(--type-data); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   FOOTER — the closing information of a publication, on the same paper as the
   document rather than on a separate field. A division rule opens it, fine
   rules group its parts, and the qualifications are set in reading type because
   they are the part a reader may actually need to rely on.
   ------------------------------------------------------------------------- */
.site-footer { background: var(--paper); color: var(--ink); margin-top: 0;
               border-top: var(--rule-w-division) solid var(--evergreen); }
.site-footer .frame, .site-footer .wrap { padding-block: var(--space-12) var(--space-8); }
.site-footer__row { display: grid; gap: var(--space-8) var(--space-12);
                    grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 640px) {
  .site-footer__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .site-footer__row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
}
.site-footer__brand { font-family: var(--font-heading); font-size: var(--type-h3);
  line-height: 1.2; color: var(--evergreen); margin: 0; }
.site-footer__place { font-family: var(--font-grotesk); font-size: var(--type-small);
  color: var(--ink-muted); margin: var(--space-2) 0 0; }
.site-footer__head { font-family: var(--font-grotesk); font-size: var(--type-micro); font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted);
  margin: 0 0 var(--space-3); }
.site-footer nav ul { display: block; list-style: none; margin: 0; padding: 0; max-width: none; }
.site-footer nav li { margin: 0; }
/* Footer links are ordinary references, so they take the document link
   treatment; the explicit :visited keeps them at (0,2,1) over :where(a):visited. */
.site-footer a { color: var(--link); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 3px; font-size: var(--type-small);
  min-height: 44px; display: inline-flex; align-items: center; }
.site-footer a:visited { color: var(--link-visited); }
.site-footer a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
.site-footer__line { font-family: var(--font-grotesk); font-size: var(--type-small);
  color: var(--ink-muted); max-width: 34ch; margin: 0; }
.site-footer__copy { font-family: var(--font-grotesk); font-size: var(--type-micro);
  color: var(--ink-muted); margin: 0; }
/* The construction note stays subordinate to the service and document details. */
.site-footer__base { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8);
  justify-content: space-between; align-items: baseline;
  border-top: var(--rule-w-fine) solid var(--rule-soft);
  margin-top: var(--space-8); padding-top: var(--space-4);
  font-family: var(--font-grotesk); font-size: var(--type-micro); color: var(--ink-muted); }
.site-footer__base p { margin: 0; max-width: none; }
.site-footer__note { max-width: 62ch; }

/* -------------------------------------------------------------------------
   NOTICE BAR
   ------------------------------------------------------------------------- */
.notice-bar { background: var(--mist); border-bottom: 1px solid var(--rule-soft);
              color: var(--ink); font-size: var(--type-small); padding: var(--space-3) 0; }
.notice-bar--warn { background: var(--care-wash); }
.notice-bar a { color: var(--evergreen); }

/* -------------------------------------------------------------------------
   FOOTER QUALIFICATIONS
   These are the terms a reader may actually rely on — the engagement basis,
   what the samples are, and what the site does not create — so they are set in
   reading type at the same size as supporting text elsewhere, not in the
   smallest voice on the page. Width is capped for a comfortable measure.
   ------------------------------------------------------------------------- */
.site-footer__legal {
  border-top: var(--rule-w-fine) solid var(--rule); margin-top: var(--space-8);
  padding-top: var(--space-6); display: grid; gap: var(--space-4); max-width: 92ch;
}
.site-footer__legal p { font-size: var(--type-small); line-height: 1.7;
  color: var(--ink); margin: 0; max-width: none; }

/* -------------------------------------------------------------------------
   CONTACT MODAL — CSS :target only, so it works with JavaScript disabled.
   Opened by any link to #contact; closed by the Close link or the scrim.
   ------------------------------------------------------------------------- */
.modal { display: none; }
.modal:target { display: block; position: fixed; inset: 0; z-index: var(--z-modal); overflow-y: auto; }
.modal__scrim { position: fixed; inset: 0; background: var(--scrim); }
.modal__sheet {
  position: relative; z-index: 1; margin: clamp(24px, 8vh, 96px) auto;
  width: min(560px, calc(100vw - 48px)); background: var(--paper);
  border: 1px solid var(--rule); padding: clamp(24px, 4vw, 48px);
  box-shadow: var(--elev-3-shadow);
}
.modal__close {
  position: absolute; top: 8px; right: 12px; min-height: 44px;
  display: inline-flex; align-items: center;
  font-family: var(--font-grotesk); font-size: var(--type-small); color: var(--ink-muted);
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px;
}
.modal__close:hover { color: var(--evergreen); text-decoration-color: var(--evergreen); }
.modal__intro { font-size: var(--type-small); line-height: 1.65; color: var(--ink);
  margin: var(--space-6) 0 var(--space-8); max-width: 46ch; }
.modal__form .form__fieldset { margin-bottom: 0; }
.modal__form .form__field { margin-bottom: var(--space-4); }
.modal__form .form__check { margin: var(--space-4) 0; }
.modal__form .form__actions { border-top: 0; padding-top: var(--space-4); margin-top: 0; }
@media print { .modal { display: none !important; } }

/* -------------------------------------------------------------------------
   HOW WE WORK — five illustrated stages
   ------------------------------------------------------------------------- */
.stages { list-style: none; margin: var(--space-8) 0 0; padding: 0; max-width: none; }
.stage {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6);
  padding: clamp(28px, 3.4vw, 48px) 0; border-top: 1px solid var(--rule-soft);
  align-items: start;
}
.stage:first-child { border-top: 0; padding-top: 0; }
.stage:last-child { padding-bottom: 0; }
@media (min-width: 900px) {
  .stage { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-12); }
  .stage:nth-child(even) .stage__art { order: 2; }
  .stage:nth-child(even) .stage__body { order: 1; }
}
.stage__art { width: 96px; height: 96px; color: var(--evergreen); display: block; }
.stage__art * { vector-effect: non-scaling-stroke; }
.stage__index { font-family: var(--font-grotesk); font-size: var(--type-micro);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-muted);
  margin: 0 0 var(--space-2); }
.stage__body h3 { font-family: var(--font-heading); font-weight: 400; font-size: var(--type-h3);
  line-height: 1.25; color: var(--evergreen); margin: 0 0 var(--space-3); }
.stage__body p { font-size: var(--type-body-ui); line-height: 1.65; color: var(--ink);
  margin: 0; max-width: 58ch; }

/* -------------------------------------------------------------------------
   CATALOGUE — capability strip, service tiles and icons
   Information density without prose: a hairline stat strip, one tile per
   service carrying its mark and two short facts, and a coverage matrix.
   ------------------------------------------------------------------------- */
.cap-strip { display: grid; gap: 0; margin: var(--space-8) 0 var(--space-12);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  border-top: 1px solid var(--rule-soft); }
.cap-strip > div { padding: var(--space-4) var(--space-6) var(--space-4) 0; }
.cap-strip strong { display: block; font-family: var(--font-heading); font-weight: 400;
  font-size: var(--type-h2); line-height: 1.1; color: var(--evergreen);
  font-variant-numeric: tabular-nums; }
.cap-strip span { display: block; font-family: var(--font-grotesk); font-size: var(--type-micro);
  letter-spacing: 0.045em; text-transform: uppercase; color: var(--ink-muted); margin-top: var(--space-2); }

.svc-tiles { display: grid; gap: 0 var(--space-12); margin: var(--space-8) 0 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.svc-tile { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-6) 0; border-top: 1px solid var(--rule-soft); align-items: start; }
.svc-icon { color: var(--evergreen); display: block; width: 32px; height: 32px; }
.svc-tile h3 { font-family: var(--font-heading); font-weight: 400; font-size: var(--type-body-read);
  line-height: 1.35; margin: 0 0 4px; }
.svc-tile h3 a { color: var(--evergreen); text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: 4px; }
.svc-tile h3 a:hover { text-decoration-color: var(--evergreen); }
.svc-tile dl { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3);
  margin: var(--space-2) 0 0; font-size: var(--type-micro); line-height: 1.6; }
.svc-tile dt { color: var(--ink-muted); letter-spacing: 0.05em; text-transform: uppercase; }
.svc-tile dd { margin: 0; color: var(--ink); }

.band-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6);
  align-items: end; margin-bottom: var(--space-4); }
@media (min-width: 1024px) {
  .band-head { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-16); }
}
.band-head img { width: 100%; max-width: 280px; height: auto; display: block; opacity: .9; }

/* -------------------------------------------------------------------------
   OPEN-SOURCE CARDS — small, flat, hairline-topped. A repo card states the
   name, what it is, and its public status line; nothing promotional.
   ------------------------------------------------------------------------- */
.oss-grid { display: grid; gap: var(--space-8) var(--space-12);
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
            margin-top: var(--space-8); }
.oss-card { border-top: 1px solid var(--rule-soft); padding-top: var(--space-6);
            display: flex; flex-direction: column; gap: var(--space-3); }
.oss-card__name { font-family: var(--font-heading); font-weight: 400;
                  font-size: var(--type-h3); line-height: 1.25; margin: 0; }
.oss-card__name a { color: var(--evergreen); text-decoration: underline;
                    text-decoration-color: var(--rule); text-underline-offset: 6px; }
.oss-card__name a:hover { text-decoration-color: var(--evergreen); }
.oss-card__desc { font-family: var(--font-grotesk); font-size: var(--type-small);
                  line-height: 1.65; color: var(--ink); margin: 0; max-width: 52ch; }
.oss-card__meta { font-family: var(--font-grotesk); font-size: var(--type-micro);
                  line-height: 1.6; letter-spacing: 0.04em; color: var(--ink-muted); margin: 0; }
.oss-card__link { margin-top: auto; padding-top: var(--space-2); }

/* -------------------------------------------------------------------------
   ABOUT — editorial splits with the supplied artwork
   ------------------------------------------------------------------------- */
.about-split { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .about-split { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
                 gap: var(--space-16); align-items: start; }
}
.about-fig { margin: 0; }
.about-fig img { display: block; width: 100%; height: auto; }
.about-fig--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.about-fig figcaption { margin-top: var(--space-3); font-family: var(--font-grotesk);
  font-size: var(--type-micro); line-height: 1.6; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-muted); }
.family-link { font-family: var(--font-heading); font-weight: 400; font-size: var(--type-h3);
  line-height: 1.25; color: var(--evergreen); text-decoration: none;
  display: inline-block; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.family-link:hover { border-bottom-color: var(--evergreen); }
.prose p + p { margin-top: var(--space-4); }
.oak-inset { background: var(--sage); padding: clamp(20px, 2.6vw, 40px); margin: 0; }
.oak-inset img { display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto; }
.oak-inset figcaption { margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--rule); font-family: var(--font-heading); font-style: italic;
  font-size: var(--type-body-ui); color: var(--evergreen); text-align: center;
  letter-spacing: 0; text-transform: none; }

/* Spacing utilities — keep templates free of inline style attributes. */
.sec-gap { margin-bottom: var(--space-16); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.measure-narrow { max-width: 640px; }
.band-tight { padding-block: 0 var(--space-16); }
.plain-link { color: inherit; text-decoration: none; }
.h-lede { font-size: var(--type-lede); line-height: 1.4; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }


/* -------------------------------------------------------------------------
   TRIADS — the consulting three-column capability block.
   Numbered, hairline-topped, no boxes: the structure carries the hierarchy.
   ------------------------------------------------------------------------- */
.triad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
         margin-top: var(--space-8); }
@media (min-width: 900px) {
  .triad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
}
.triad > div { border-top: 1px solid var(--rule); padding-top: var(--space-6); }
.triad__num { font-family: var(--font-grotesk); font-size: var(--type-micro);
  letter-spacing: 0.07em; color: var(--ink-muted); margin: 0 0 var(--space-3); }
.triad h3 { font-family: var(--font-heading); font-weight: 400; font-size: var(--type-h3);
  line-height: 1.25; color: var(--evergreen); margin: 0 0 var(--space-3); }
.triad p { font-family: var(--font-grotesk); font-size: var(--type-small); line-height: 1.65;
  color: var(--ink); margin: 0; max-width: 38ch; }

/* Engagement rail — four steps in a row at desktop, hairline-separated. */
.rail { list-style: none; margin: var(--space-8) 0 0; padding: 0; max-width: none;
        display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 900px) { .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); } }
.rail li { border-top: 1px solid var(--rule); padding: var(--space-6) var(--space-6) var(--space-6) 0; }
.rail__num { font-family: var(--font-grotesk); font-size: var(--type-micro); letter-spacing: 0.07em;
             color: var(--ink-muted); display: block; margin-bottom: var(--space-2); }
.rail h3 { font-family: var(--font-heading); font-weight: 400; font-size: var(--type-body-read);
           line-height: 1.35; color: var(--evergreen); margin: 0 0 var(--space-2); }
.rail p { font-size: var(--type-small); line-height: 1.6; color: var(--ink); margin: 0; }

/* Document list — a register of published samples, not a card grid. */
.on-field-link { color: var(--field-ink); text-decoration-color: var(--field-rule); }
.on-field-link:hover { color: var(--field-ink); text-decoration-color: var(--field-ink); }
.doclist { list-style: none; margin: var(--space-8) 0 0; padding: 0; max-width: none; }
.doclist li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2);
  padding: var(--space-6) 0; border-top: 1px solid var(--rule-soft); align-items: baseline; }
@media (min-width: 900px) {
  .doclist li { grid-template-columns: minmax(0, 1fr) 180px 90px; gap: var(--space-8); }
}
.doclist a { font-family: var(--font-heading); font-weight: 400; font-size: var(--type-body-read);
  line-height: 1.4; color: var(--evergreen); text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: 5px; }
.doclist a:hover { text-decoration-color: var(--evergreen); }
.doclist .doclist__meta { font-family: var(--font-grotesk); font-size: var(--type-micro);
  letter-spacing: 0.05em; color: var(--ink-muted); }
.doclist .doclist__go { font-size: var(--type-small); }

/* -------------------------------------------------------------------------
   PRINT
   ------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .site-header, .site-footer, .skip-link, .notice-bar, .btn, .form__actions,
  .breadcrumb, .report-actions, .alert, .nav-disclosure { display: none !important; }
  main.wrap, main.frame { padding: 0; max-width: none; }
  .report, .quote, .panel, .svc-panel { break-inside: avoid; padding: 0; background: none; }
  .data-table thead th { color: #000; border-bottom: 1px solid #000; }
  .data-table tr, .chart__row, .kpi { break-inside: avoid; }
  .chart__bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
  .password-display { background: #eee !important; color: #000 !important; border: 1px solid #999; }
  .disclosure > summary::after { display: none; }
  .disclosure__body { padding-top: 8px; }
}

/* -------------------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------------------- */
@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; }
  .link-arrow .btn__arrow, .link-arrow:hover .btn__arrow { transform: none; }
}

.quote-actions { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-8); }

/* -------------------------------------------------------------------------
   QUOTE SHEETS — a data-only quote body: a tab strip over the numbered
   sections, and fact lists where narrative prose used to be. Focus styling
   comes from the global :focus-visible rule; only the target size is set here.
   ------------------------------------------------------------------------- */
.sheet-nav { margin: 0 0 var(--space-8); border-top: 1px solid var(--rule);
             border-bottom: 1px solid var(--rule); }
.sheet-nav ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.sheet-nav li { margin: 0; }
.sheet-nav a { display: flex; align-items: center; min-height: 44px;
               padding: var(--space-2) var(--space-4);
               border-right: 1px solid var(--rule-soft);
               font-family: var(--font-grotesk); font-weight: 500; font-size: var(--type-micro);
               letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
               color: var(--ink-muted); }
.sheet-nav li:last-child a { border-right: 0; }
.sheet-nav a:hover { color: var(--evergreen); background: var(--recessed); }

/* The sheet the tab points at is marked rather than hidden: a quote is a
   document to be read straight through as well as jumped around in, and
   hiding sections would need script or :target sibling tricks that break print. */
.quote h2:target { color: var(--evergreen); box-shadow: inset 3px 0 0 var(--bronze);
                   padding-left: var(--space-4); }

.fact-list { margin: var(--space-4) 0 var(--space-6); padding: 0; list-style: none; }
.fact-list li { position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-6);
                border-bottom: 1px solid var(--rule-soft); }
.fact-list li:first-child { border-top: 1px solid var(--rule-soft); }
.fact-list li:last-child { border-bottom: 0; }
.fact-list li::before { content: ""; position: absolute; left: 0;
                        top: calc(var(--space-3) + 0.62em);
                        width: 12px; height: 1px; background: var(--bronze); }

@media print {
  .sheet-nav { display: none; }
  .fact-list li { break-inside: avoid; }
  .quote h2:target { box-shadow: none; padding-left: 0; }
}

/* ==========================================================================
   DOCUMENT GRAMMAR — the shape a published Bramcott document takes

   A narrow contents column beside the main text; a register of documents as
   aligned rows; numbered observations that may carry a Bramcott note in the
   margin; schedules with grouped bands; procedures as input/output pairs.
   Each form follows the work its content does, so no two sections on a page
   need to look alike.
   ========================================================================== */

/* --- Title block: compact, so the first register entry is in the fold ----- */
.doc-hero { padding-block: var(--space-10) var(--space-6); }
.doc-hero h1 { margin-bottom: var(--space-4); }
.doc-hero .lede { margin-bottom: var(--space-6); }
.doc-hero__actions { margin: 0; }
.doc-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8);
  margin: var(--space-6) 0 0; padding: var(--space-2) 0;
  border-top: var(--rule-w-fine) solid var(--rule-soft);
  border-bottom: var(--rule-w-fine) solid var(--rule-soft);
  font-family: var(--font-grotesk); font-size: var(--type-micro); color: var(--ink-muted);
  max-width: none;
}
.doc-meta span strong { color: var(--ink); font-weight: 500; margin-right: 0.4em; }

/* --- Contents column beside the document ---------------------------------- */
.doc-layout { display: grid; gap: var(--space-10); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .doc-layout { grid-template-columns: 200px minmax(0, 1fr); align-items: start;
                gap: var(--space-12); }
  .doc-contents { position: sticky; top: calc(var(--nav-h) + var(--space-6)); }
}
.doc-body { min-width: 0; }
.doc-contents { font-family: var(--font-grotesk); font-size: var(--type-small); }
.doc-contents > p { font-size: var(--type-micro); font-weight: 500; letter-spacing: 0.05em;
                    text-transform: uppercase; color: var(--ink-muted);
                    margin: 0 0 var(--space-3); max-width: none; }
.doc-contents ol { list-style: none; margin: 0; padding: 0; max-width: none; }
.doc-contents li { margin: 0 0 var(--space-2); }
.doc-contents .num { font-family: var(--font-mono); font-size: 0.85em;
                     color: var(--ink-muted); margin-right: 0.5em; }
.doc-contents a { color: var(--link); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent);
  text-underline-offset: 3px; }
.doc-contents a:visited { color: var(--link-visited); }
.doc-contents a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

/* --- Document register: aligned rows, sample status on every entry -------- */
.register { list-style: none; margin: var(--space-6) 0 0; padding: 0; max-width: none;
            border-top: var(--rule-w-fine) solid var(--rule); }
.reg-entry { display: grid; gap: var(--space-2) var(--space-8); padding: var(--space-6) 0;
             border-bottom: var(--rule-w-fine) solid var(--rule-soft);
             grid-template-columns: minmax(0, 1fr); align-items: baseline; }
@media (min-width: 900px) {
  .reg-entry { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.6fr) minmax(0, 1.1fr) auto; }
}
.reg-title { margin: 0; }
.reg-title a { font-family: var(--font-heading); font-size: var(--type-body-read); line-height: 1.4;
  color: var(--link); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 3px; }
.reg-title a:visited { color: var(--link-visited); }
.reg-title a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
.reg-config { margin: 0; font-family: var(--font-grotesk); font-size: var(--type-small);
              color: var(--ink); }
.reg-term { margin: 0; font-family: var(--font-grotesk); font-size: var(--type-small);
            color: var(--ink-muted); }
/* Oxblood has one meaning on this site: a document marker or a Bramcott note. */
.reg-mark { margin: 0; justify-self: start; font-family: var(--font-grotesk);
  font-size: var(--type-micro); font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--oxblood); border: 1px solid var(--oxblood);
  padding: 2px 7px; white-space: nowrap; }
.reg-valid { grid-column: 1 / -1; margin: 0; font-family: var(--font-grotesk);
  font-size: var(--type-micro); color: var(--ink-muted); }
/* A register entry whose substance is a paragraph — a standard's scope, a
   contribution's content — carries it full-width at reading size. */
.reg-desc { grid-column: 1 / -1; margin: 0; max-width: var(--measure);
            font-size: var(--type-body-ui); line-height: 1.6; }

/* --- Numbered observations: variable length, consequence stated ----------- */
.obs { display: grid; gap: var(--space-4) var(--space-10); grid-template-columns: minmax(0, 1fr);
       padding: var(--space-8) 0; border-bottom: var(--rule-w-fine) solid var(--rule-soft); }
.obs:last-of-type { border-bottom: 0; }
@media (min-width: 1024px) {
  .obs--noted { grid-template-columns: minmax(0, 1fr) 240px; align-items: start; }
}
.obs__num { font-family: var(--font-mono); font-size: var(--type-small); color: var(--oxblood);
            margin: 0; }
.obs h3 { margin: var(--space-2) 0 var(--space-3); }
.obs p { max-width: var(--measure); }
.obs__consequence { border-left: 2px solid var(--rule); padding-left: var(--space-4);
                    font-size: var(--type-small); color: var(--ink); }
.obs__consequence strong { color: var(--evergreen); font-family: var(--font-grotesk);
                           font-size: var(--type-micro); letter-spacing: 0.05em;
                           text-transform: uppercase; }
.obs__ref { font-family: var(--font-grotesk); font-size: var(--type-small); }

/* --- Bramcott note: the margin annotation device -------------------------- */
.bh-note { background: var(--oxblood-wash); border-left: 2px solid var(--oxblood);
           padding: var(--space-4); font-size: var(--type-small); line-height: 1.6;
           color: var(--ink); }
.bh-note p { max-width: none; margin: 0; }
.bh-note__label { display: block; font-family: var(--font-grotesk); font-size: var(--type-micro);
  font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--oxblood);
  margin: 0 0 var(--space-2) !important; }
@media (max-width: 1023px) { .bh-note { margin-top: var(--space-4); } }

/* --- Schedule: a financial memorandum's discipline ------------------------ */
.schedule td { font-family: var(--font-serif); font-size: var(--type-body-ui); line-height: 1.6; }
.schedule td:first-child { font-family: var(--font-grotesk); font-size: var(--type-small);
                           font-weight: 500; color: var(--evergreen); }
.schedule__band th { background: var(--recessed); border-bottom: 0; padding: var(--space-2) var(--space-3);
  font-family: var(--font-grotesk); font-size: var(--type-micro); font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--evergreen); text-align: left; }
.schedule tbody tr:last-child td { border-bottom: var(--rule-w-division) solid var(--evergreen); }

/* --- Procedure: input and output stated at every step --------------------- */
.proc { list-style: none; margin: var(--space-6) 0 0; padding: 0; max-width: none; }
.proc > li { display: grid; gap: var(--space-3) var(--space-8); padding: var(--space-6) 0;
             border-bottom: var(--rule-w-fine) solid var(--rule-soft);
             grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .proc > li { grid-template-columns: 3ch minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
               align-items: start; }
}
.proc__num { font-family: var(--font-mono); font-size: var(--type-small); color: var(--oxblood); }
.proc h3 { margin: 0 0 var(--space-2); font-size: var(--type-body-read); }
.proc p { margin: 0; max-width: 46ch; }
.proc__give strong, .proc__get strong { display: block; font-family: var(--font-grotesk);
  font-size: var(--type-micro); font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2px; }
.proc__give, .proc__get { font-size: var(--type-small); color: var(--ink); }

/* --- Enquiry: what the first message needs to contain --------------------- */
.enquiry__needs { list-style: none; margin: var(--space-4) 0 0; padding: 0; max-width: var(--measure);
                  border-top: var(--rule-w-fine) solid var(--rule-soft); }
.enquiry__needs li { margin: 0; padding: var(--space-3) 0 var(--space-3) var(--space-6);
  position: relative; border-bottom: var(--rule-w-fine) solid var(--rule-soft); }
.enquiry__needs li::before { content: ""; position: absolute; left: 0;
  top: calc(var(--space-3) + 0.62em); width: 12px; height: 1px; background: var(--oxblood); }

/* --- Print: the document keeps its tables, notes and references ----------- */
@media print {
  .doc-contents, .doc-hero__actions .btn { display: none; }
  .obs, .reg-entry, .proc > li, .bh-note { break-inside: avoid; }
  .doc-layout { display: block; }
  .bh-note { background: none; border-left: 2px solid #000; }
}