/* ==========================================================================
   Clear Braille Solutions
   Brand colours are locked in CLAUDE.md s.3 and are untouched.

   Every component reads semantic tokens (--bg, --text, --link ...), never a
   brand colour directly. The three display modes - light, dark, and yellow on
   black - only remap those tokens, so no component needs a per-mode rule.
   All ratios below were computed with the WCAG luminance formula.
   ========================================================================== */

@font-face {
  font-family: "Inter var";
  src: url("../fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- brand: locked, CLAUDE.md s.3 ---- */
  --navy:        #16365C;
  --navy-deep:   #0E2440;
  --signal:      #3E9BC6;   /* graphic use only - never carries words */
  --signal-deep: #26728F;
  --paper:       #F7F7F5;
  --white:       #FFFFFF;
  --slate:       #5A6B7D;
  --rule:        #D9DEE4;   /* hairlines only - 1.35:1, never a control border */
  --mist:        #CBD8E4;   /* muted text on navy - 8.44:1 */

  /* ---- light mode (default) ---- */
  --bg:        var(--paper);
  --surface:   var(--white);
  --raised:    var(--white);      /* panels and the braille proof sheet */
  --field:     var(--paper);      /* form control fill */
  --text:      var(--navy);       /* 11.41:1 on paper, 12.24:1 on white */
  --muted:     var(--slate);      /* 5.11:1 on paper, 5.48:1 on white */
  --link:      var(--signal-deep);/* 5.04:1 on paper, 5.40:1 on white */
  --link-hover: var(--navy-deep);
  --line:      var(--rule);
  --control:   var(--slate);      /* control borders: SC 1.4.11, 5.11:1 */
  --focus:     var(--signal-deep);
  --btn-bg:    var(--navy);
  --btn-text:  var(--white);
  --btn-hover: var(--navy-deep);
  --icon:      var(--signal-deep);/* 5.40:1 on white */
  --dot:       var(--signal-deep);/* raised braille dots, 5.40:1 on white */
  --guide:     var(--rule);       /* unraised dot positions - decorative */
  --error:     #A32A1E;           /* 7.22:1 on white - always named in words too */
  --shadow:    var(--rule);

  /* the inverse band: navy sections and the footer */
  --inv-bg:     var(--navy);
  --inv-text:   var(--white);     /* 12.24:1 */
  --inv-muted:  var(--mist);      /* 8.44:1 */
  --inv-line:   rgba(255, 255, 255, 0.24);
  --inv-focus:  var(--white);     /* signal-deep would be only 2.26:1 on navy */
  --inv-btn-bg: var(--paper);
  --inv-btn-text: var(--navy);
  --inv-btn-hover: var(--white);

  /* ---- spacing scale: every gap on the page comes from this ---- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --section-y:   clamp(var(--s-8), 7vw, var(--s-9)); /* identical on every section */
  --heading-gap: var(--s-6);
  --block-gap:   var(--s-7);

  --measure: 68ch;             /* CLAUDE.md s.3: measure caps at ~68 characters */
  --shell:   1220px;

  color-scheme: light;
}

/* ---- dark mode ----------------------------------------------------------
   Same brand hues, deeper ground. Text paper on navy-deep 14.56:1, on navy
   11.41:1. #8CC8E2 is a tint of the logo blue, used for links and buttons:
   8.53:1 on navy-deep, 6.69:1 on navy.                                      */
:root[data-theme="dark"] {
  --bg:        var(--navy-deep);
  --surface:   var(--navy-deep);
  --raised:    var(--navy);
  --field:     var(--navy-deep);
  --text:      var(--paper);
  --muted:     var(--mist);       /* 10.77:1 / 8.44:1 */
  --link:      #8CC8E2;
  --link-hover: var(--paper);
  --line:      rgba(255, 255, 255, 0.18);
  --control:   #8FA3B8;           /* 6.02:1 / 4.72:1 */
  --focus:     var(--paper);
  --btn-bg:    #8CC8E2;
  --btn-text:  var(--navy-deep);  /* 8.53:1 */
  --btn-hover: var(--paper);
  --icon:      #8CC8E2;
  --dot:       #8CC8E2;
  --guide:     rgba(255, 255, 255, 0.22);
  --error:     #F2A99F;           /* 8.14:1 / 6.38:1 */
  --shadow:    rgba(0, 0, 0, 0.35);

  --inv-bg:     var(--navy);
  --inv-btn-bg: #8CC8E2;
  --inv-btn-text: var(--navy-deep);
  --inv-btn-hover: var(--paper);

  color-scheme: dark;
}

/* ---- yellow on black ----------------------------------------------------
   The combination many low-vision readers set on their own devices.
   #FFFF00 on #000000 is 19.56:1. One colour for everything that carries
   meaning; boundaries come from yellow rules, never from tone alone.       */
:root[data-theme="contrast"] {
  --bg:        #000000;
  --surface:   #000000;
  --raised:    #000000;
  --field:     #000000;
  --text:      #FFFF00;
  --muted:     #FFFF00;
  --link:      #FFFF00;
  --link-hover: #FFFFFF;
  --line:      #FFFF00;
  --control:   #FFFF00;
  --focus:     #FFFFFF;
  --btn-bg:    #FFFF00;
  --btn-text:  #000000;
  --btn-hover: #FFFFFF;
  --icon:      #FFFF00;
  --dot:       #FFFF00;
  --guide:     rgba(255, 255, 0, 0.35);
  --error:     #FFFF00;           /* errors are prefixed "Error:" in words */
  --shadow:    transparent;

  --inv-bg:     #000000;
  --inv-text:   #FFFF00;
  --inv-muted:  #FFFF00;
  --inv-line:   #FFFF00;
  --inv-focus:  #FFFFFF;
  --inv-btn-bg: #FFFF00;
  --inv-btn-text: #000000;
  --inv-btn-hover: #FFFFFF;

  color-scheme: dark;
}

/* Inverse bands remap the same tokens, so buttons, links, placeholders and
   focus rings inside them need no special cases. */
.on-navy {
  --surface: var(--inv-bg);
  --text:    var(--inv-text);
  --muted:   var(--inv-muted);
  --link:    var(--inv-text);
  --link-hover: var(--inv-text);
  --line:    var(--inv-line);
  --focus:   var(--inv-focus);
  --btn-bg:  var(--inv-btn-bg);
  --btn-text: var(--inv-btn-text);
  --btn-hover: var(--inv-btn-hover);
  --icon:    var(--inv-text);
  background: var(--surface);
  color: var(--text);
}
:root[data-theme="contrast"] .on-navy { border-top: 2px solid #FFFF00 !important; }

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

html {
  font-size: 112.5%;              /* 18px at default settings, still user-scalable */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter var", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  overflow-wrap: anywhere;
}

/* ---- type scale: h1 58 / h2 40 / h3 24 / body 18 / caption 16 ----------
   overflow-wrap is the SC 1.4.12 safety net at 320px with the text-spacing
   override. Breaking a word is not hyphenation, which CLAUDE.md rules out. */
h1, h2, h3 { margin: 0; text-wrap: balance; overflow-wrap: break-word; }
h1 {
  font-size: clamp(2.1rem, 1.05rem + 4.6vw, 3.222rem);   /* 38 -> 58px */
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
}
h2 {
  font-size: clamp(1.667rem, 1.15rem + 2.3vw, 2.222rem); /* 30 -> 40px */
  font-weight: 600; letter-spacing: -0.022em; line-height: 1.12;
}
h3 {
  font-size: 1.333rem;                                    /* 24px */
  font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
}

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

/* Focus: 3px, offset, 3:1 or better against every ground it can sit on. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 clamp(var(--s-5), 5vw, var(--s-7)); }

/* --------------------------------------------------------------- skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--surface); color: var(--text); font-weight: 600;
  padding: var(--s-3) var(--s-5); border: 3px solid var(--text);
}
.skip:focus { left: var(--s-3); top: var(--s-3); }

/* ------------------------------------------------------ display settings bar
   Native radio buttons in a fieldset: the browser supplies the keyboard
   model and the screen reader announcements, so there is no ARIA to get
   wrong. Hidden until theme.js has loaded, because without script the
   choice could not take effect.                                           */
.display-bar { background: var(--bg); border-bottom: 1px solid var(--line); }
.theme-picker {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 0 var(--s-2); border: 0; margin: 0; padding: var(--s-1) 0;
  font-size: 0.889rem;
}
.theme-picker legend {
  float: left; padding: 0; margin-right: var(--s-2);
  font-size: inherit; font-weight: 600; color: var(--text);
}
.theme-picker label {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 36px; padding: 0 var(--s-2); cursor: pointer; color: var(--text);
}
.theme-picker input {
  width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0;
  accent-color: var(--text);
}

/* ------------------------------------------------------------------ header */
.masthead { background: var(--surface); border-bottom: 1px solid var(--line); }
.masthead-row { padding-block: var(--s-4); }
.masthead-row {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7);
  align-items: center; justify-content: space-between;
}
.brand { display: block; width: 168px; max-width: 50vw; }
.brand img { display: block; width: 100%; height: auto; }
/* Two logo files, one shown per mode. display:none removes the other from
   the accessibility tree too, so the name is never read twice. */
.brand .logo-rev { display: none; }
:root[data-theme="dark"] .brand .logo-std,
:root[data-theme="contrast"] .brand .logo-std { display: none; }
:root[data-theme="dark"] .brand .logo-rev,
:root[data-theme="contrast"] .brand .logo-rev { display: block; }

.nav ul { display: flex; flex-wrap: wrap; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.nav a {
  display: flex; align-items: center; min-height: 44px; padding: var(--s-1) var(--s-3);
  color: var(--text); font-weight: 500; text-decoration: none; border-radius: 4px;
}
.nav a:hover { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; }
/* Current page: bold plus a thick underline, never colour alone. */
.nav a[aria-current="page"] {
  font-weight: 700; color: var(--text);
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.35em;
}
.nav .nav-contact {
  background: var(--btn-bg); color: var(--btn-text); border: 2px solid var(--btn-bg);
  padding-inline: var(--s-5); margin-left: var(--s-4); font-weight: 600;
}
.nav .nav-contact:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-text); }
.nav .nav-contact[aria-current="page"] { color: var(--btn-text); text-decoration-color: currentColor; }

/* Phones: a deliberate two-column menu under a hairline rather than four
   links wrapping by accident. No hamburger - for four links it only adds an
   interactive surface to get wrong. */
@media (max-width: 599px) {
  .masthead-row { padding-bottom: 0; gap: var(--s-4) 0; }
  .brand { width: 168px; max-width: 56vw; }
  .nav { width: 100%; border-top: 1px solid var(--line); }
  .nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); }
  .nav li { display: flex; }
  .nav a { width: 100%; min-height: 52px; padding: var(--s-1) 0; }
  .nav .nav-contact { margin-left: 0; padding-inline: var(--s-2); margin-block: var(--s-1); justify-content: center; }
  .theme-picker { justify-content: flex-start; }
  .theme-picker legend { width: 100%; float: none; }
}

/* ---------------------------------------------------------------- sections */
.band, .hero { padding: var(--section-y) 0; }
.band { background: var(--surface); }
.band + .band, .hero + .band { border-top: 1px solid var(--line); }
.on-navy { border-top: 0 !important; }
.band-quiet { background: var(--bg); }

/* Heading rail on the left, reading column on the right, on wide screens.
   Content keeps its reading order when the columns stack. */
.split > h2, .split > .head { margin-bottom: var(--heading-gap); }
@media (min-width: 960px) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: var(--s-8);
    align-items: start;
  }
  .split > h2, .split > .head { margin-bottom: 0; }
  .split > h2, .split .head h2 { max-width: 14ch; }
}
.head p { color: var(--muted); margin-top: var(--s-4); max-width: 30ch; }

/* ------------------------------------------------------------------- hero */
.hero h1 { max-width: 20ch; }
.lead {
  font-size: 1.222rem;                /* 22px */
  color: var(--muted); margin-top: var(--s-5); max-width: 52ch;
}
.lead-top { margin-top: 0; margin-bottom: var(--s-6); max-width: 56ch; }
.hero .actions { margin-top: var(--s-7); }
.actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }
.hero-grid { display: grid; gap: var(--s-8); align-items: center; }
.hero-home h1 { max-width: 16ch; font-size: clamp(2.3rem, 1rem + 5.4vw, 3.778rem); } /* 41 -> 68px */
.hero-home .draft-tag { margin-bottom: var(--s-5); }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-8); }
  .hero-split .shell {
    display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: var(--s-8); align-items: start;
  }
  .hero-split .lead { margin-top: 0; }
}

/* ---- the braille proof ---------------------------------------------------
   The one expressive element on the site: a transcriber's interlined proof,
   each print word set above its braille. The braille is real contracted UEB,
   drawn dot by dot in tools/braille-svg.mjs. On load the dots emboss cell by
   cell - a single sequence, switched off under reduced motion.            */
.proof {
  margin: 0; position: relative;
  background: var(--raised);
  border: 1px solid var(--line);
  padding: clamp(var(--s-5), 3.5vw, var(--s-7));
  box-shadow: 12px 12px 0 var(--shadow);
}
.proof-lines { display: grid; gap: var(--s-5); }
.proof-line { display: grid; gap: var(--s-2); justify-items: start; }
.proof-print { font-size: 0.889rem; font-weight: 600; color: var(--muted); }
.braille-line { display: block; width: 100%; max-width: 100%; height: auto; overflow: visible; }
.braille-line .dot { fill: var(--dot); }
.braille-line .guide { fill: var(--guide); }
/* Scale by cell count so every line shares one dot size. The widest line
   (8 cells) fills the sheet; shorter lines keep proportion. */
.proof-line:nth-child(1) .braille-line { width: 61.7%; }
.proof-caption {
  margin: var(--s-6) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line);
  font-size: 0.889rem; color: var(--muted);
}

/* Each dot waits for its cell (60ms apart) and its line (200ms apart). */
.cell:nth-child(2) { --c: 1; } .cell:nth-child(3) { --c: 2; } .cell:nth-child(4) { --c: 3; }
.cell:nth-child(5) { --c: 4; } .cell:nth-child(6) { --c: 5; } .cell:nth-child(7) { --c: 6; }
.cell:nth-child(8) { --c: 7; }
.proof-line:nth-child(2) { --l: 1; } .proof-line:nth-child(3) { --l: 2; }
@media (prefers-reduced-motion: no-preference) {
  .braille-line .dot {
    animation: emboss 420ms cubic-bezier(.2, .7, .3, 1.3) both;
    animation-delay: calc(var(--c, 0) * 60ms + var(--l, 0) * 200ms);
  }
}
@keyframes emboss {
  from { opacity: 0; transform: scale(0.2); }
  to   { opacity: 1; transform: scale(1); }
}
.braille-line .dot { transform-box: fill-box; transform-origin: center; }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: var(--s-3) var(--s-6);
  border: 2px solid var(--btn-bg); border-radius: 6px;
  background: var(--btn-bg); color: var(--btn-text);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-text); }

/* A link on its own line is not covered by the SC 2.5.8 inline exception,
   so it gets a full 44px target. */
.more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------------------------------------------------------------- services
   Three services, each a real, different thing, so each gets its own icon.
   Separated by rules, not boxed as identical cards.                       */
.services { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: 0; }
.services-more { margin-top: var(--s-5); }
.services > li { padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.services > li:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 900px) {
  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-7); }
  .services > li:last-child { border-bottom: 0; }
}
.services h3 { margin: var(--s-4) 0 var(--s-3); }
.services p { color: var(--muted); }
.icon { display: block; width: 40px; height: 40px; color: var(--icon); }
.icon * { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon .fill { fill: currentColor; stroke: none; }

/* detailed service entries on the services page */
.service + .service { margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--line); }
.service h3 { margin: var(--s-4) 0 var(--s-3); }
.service ul { max-width: var(--measure); padding-left: 1.25em; margin: 0 0 1.15em; }
.service li + li { margin-top: var(--s-2); }
.service .sub { font-size: 1.111rem; font-weight: 600; margin: var(--s-6) 0 var(--s-3); }

/* ------------------------------------------------------ positioning statement
   The client's answer to "how are you different". Set large, left aligned,
   no quotation marks: it is the business speaking, not a testimonial.     */
.statement {
  font-size: clamp(1.444rem, 1.1rem + 1.6vw, 2rem);   /* 26 -> 36px */
  font-weight: 500; line-height: 1.3; letter-spacing: -0.015em;
  max-width: 34ch; margin: 0;
}

/* the lived-experience line: one short line, set apart, never a big pull quote */
.experience {
  margin: var(--s-7) 0 0; padding: var(--s-1) 0 var(--s-1) var(--s-5);
  border-left: 3px solid var(--icon); max-width: var(--measure);
}
.experience p { margin: 0; font-size: 1.222rem; }
.experience blockquote { margin: 0; }
.experience figcaption { margin-top: var(--s-4); font-weight: 600; }
.experience figcaption span { display: block; color: var(--muted); font-size: 0.889rem; font-weight: 400; }

/* ------------------------------------------------------- photograph of work */
.work-photo { margin: var(--s-6) 0 0; }
.work-photo img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); background: var(--white);
}
.work-photo figcaption { margin-top: var(--s-3); font-size: 0.889rem; color: var(--muted); max-width: 56ch; }
:root[data-theme="dark"] .work-photo img { filter: brightness(0.92); }

/* ------------------------------------------- ruled list: sectors, doc types */
.ruled-list { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 720px) {
  .ruled-list { grid-template-columns: 1fr 1fr; column-gap: clamp(var(--s-6), 6vw, var(--s-9)); }
}
.ruled-list li { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.ruled-list b { display: block; font-weight: 600; font-size: 1.111rem; }
.ruled-list span { color: var(--muted); font-size: 0.944rem; }

/* ------------------------------------------------------------------ pricing */
.pricing {
  margin-top: var(--block-gap); padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.pricing p { font-size: 1.222rem; max-width: 52ch; }
.pricing:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pricing-feature strong { display: block; font-size: 3.111rem; line-height: 1.15; margin: var(--s-2) 0; letter-spacing: -0.035em; }
.pricing-feature strong span { font-size: 1.222rem; font-weight: 400; letter-spacing: normal; }
.pricing-feature p + p { font-size: 1rem; color: var(--muted); }

/* ------------------------------------------------------------ proactive list
   Plain ticks would be decoration; these are bullets with a braille dot. */
.dot-list { list-style: none; margin: 0 0 1.15em; padding: 0; max-width: var(--measure); }
.dot-list li { position: relative; padding-left: var(--s-6); }
.dot-list li + li { margin-top: var(--s-4); }
.dot-list li::before {
  content: ""; position: absolute; left: 4px; top: 0.55em;
  width: 10px; height: 10px; border-radius: 50%; background: var(--icon);
}
@media (forced-colors: active) { .dot-list li::before { background: CanvasText; } }

/* ---------------------------------------------------------------------- FAQ
   Native <details>: keyboard and screen-reader support come from the
   browser, and every answer stays findable with the browser's own search. */
.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  min-height: 64px; padding: var(--s-4) 0; cursor: pointer; list-style: none;
  font-size: 1.111rem; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: 0 0 auto; display: grid; place-items: center;
  width: 32px; height: 32px; border: 2px solid var(--control); border-radius: 50%;
  font-size: 1.333rem; font-weight: 500; line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--link); }
.faq details > div { padding: 0 0 var(--s-5); }
.faq details > div p { color: var(--muted); }

/* ---------------------------------------------------------------- CTA band */
.contact-band { background: var(--bg); }

/* -------------------------------------------------------------------- form */
.panel {
  background: var(--raised); border: 1px solid var(--line); border-top: 4px solid var(--icon);
  padding: clamp(var(--s-6), 4vw, var(--s-7));
}
.page-contact .band { background: var(--bg); padding-top: 0; border-top: 0; }
.page-contact .panel { max-width: 900px; }
form { max-width: none; }
fieldset { border: 0; margin: 0; padding: 0; }
fieldset + fieldset { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line); }
legend { font-size: 1.333rem; font-weight: 600; padding: 0; }
.pair { display: grid; gap: 0 var(--s-6); }
@media (min-width: 660px) {
  .pair { grid-template-columns: 1fr 1fr; }
  /* One field in a pair has a hint and the other does not; push both
     controls to the bottom so they always share a baseline. */
  .pair > .field { display: flex; flex-direction: column; }
  .pair > .field > input,
  .pair > .field > select,
  .pair > .field > textarea { margin-top: auto; }
}
.field { margin-top: var(--s-5); }
.field label { display: block; font-weight: 600; margin-bottom: var(--s-2); }
.opt, .req { font-weight: 400; color: var(--muted); }
.hint { display: block; font-size: 0.889rem; color: var(--muted); margin-bottom: var(--s-3); }

/* Filled fields: the fill differs from the panel, and the border is the
   --control token, which clears SC 1.4.11 in every mode. */
.field input, .field select, .field textarea {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: var(--s-4);
  font: inherit;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--control);
  border-bottom-width: 2px;
  border-radius: 6px;
}
.field input:hover, .field select:hover, .field textarea:hover,
.field input:focus, .field select:focus, .field textarea:focus { background: var(--raised); border-color: var(--text); }
.field textarea { min-height: 168px; resize: vertical; line-height: 1.6; }
.field select { appearance: auto; padding-right: var(--s-6); }

[aria-invalid="true"],
[aria-invalid="true"]:hover,
[aria-invalid="true"]:focus { border-color: var(--error) !important; border-width: 2px; border-bottom-width: 3px; }

.err {
  display: block; margin: var(--s-2) 0 0; font-weight: 600;
  color: var(--error);      /* always prefixed "Error:" in text */
  max-width: var(--measure);
}
.actions { margin-top: var(--s-7); }
.send-status { margin-top: var(--s-4); }
.send-status:empty { margin: 0; }
.btn[aria-disabled="true"] { cursor: wait; }

/* Status boxes use h2 (they sit under the page h1) but at h3 size. */
.summary h2, .done h2 { font-size: 1.333rem; line-height: 1.3; letter-spacing: -0.01em; }
.summary { border: 3px solid var(--error); border-radius: 8px; padding: var(--s-5) var(--s-6); margin-bottom: var(--s-6); }
.summary h2 { color: var(--error); margin-bottom: var(--s-2); }
.summary ul { margin: var(--s-3) 0 0; padding-left: var(--s-5); }
.summary li { margin-bottom: var(--s-2); }
.summary a { color: var(--error); font-weight: 600; }
.done { border: 3px solid var(--text); border-radius: 8px; background: var(--bg); padding: var(--s-5) var(--s-6); margin-bottom: var(--s-6); }
.done h2 { margin-bottom: var(--s-2); }

.form-note { margin: var(--s-7) 0 0; color: var(--muted); font-size: 0.944rem; }

/* ------------------------------------------- placeholders and draft copy ---
   Deliberately quiet. Unmistakable, but a page covered in dashed slabs
   reads as broken rather than unfinished.                                  */
.ph {
  margin: var(--s-5) 0 0; padding: var(--s-3) 0 0;
  border-top: 1px dashed var(--muted);
  color: var(--muted); font-size: 0.889rem; line-height: 1.55;
  max-width: 56ch;
}
.ph b { color: var(--text); font-weight: 700; }
.ph-inline {
  font-weight: 700; color: var(--text); background: var(--surface);
  border: 1px dashed var(--muted); border-radius: 3px; padding: 0 6px;
}

.draft-tag {
  display: inline-block; margin-bottom: var(--s-4);
  font-size: 0.889rem; font-weight: 600;
  color: var(--text); background: transparent;
  border: 2px solid var(--text); border-radius: 4px; padding: 1px 10px;
}

/* ------------------------------------------------------------------ footer */
.site-foot { padding: var(--section-y) 0 var(--s-7); box-shadow: inset 0 1px 0 var(--inv-line); }
.foot-grid { display: grid; gap: var(--s-7); }
@media (min-width: 780px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.4fr); }
}
.foot-brand { display: block; width: 172px; }
.foot-brand img { display: block; width: 100%; height: auto; }
.site-foot .ph { margin-top: 0; }
.site-foot p { color: var(--muted); font-size: 0.944rem; }
.site-foot .foot-formats { color: var(--text); font-size: 1rem; margin-bottom: var(--s-5); }

/* Footer list of every page: with the main nav, this is SC 2.4.5 Multiple Ways. */
.foot-nav ul { list-style: none; margin: 0; padding: 0; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-nav a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 3px; }
.foot-note {
  margin-top: var(--block-gap); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

/* ------------------------------------------ long-form: privacy, accessibility */
.prose h2 {
  font-size: 1.444rem; line-height: 1.25; letter-spacing: -0.01em;
  margin: var(--s-8) 0 var(--s-4);
}
.prose > :first-child { margin-top: 0; }
.prose ul { max-width: var(--measure); margin: 0 0 1.15em; padding-left: 1.25em; }
.prose li + li { margin-top: var(--s-2); }

/* -------------------------------------------------------------------- misc */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
[hidden] { display: none !important; }

/* grid items default to min-width:auto, so one long word can widen a track */
.pair > *, .foot-grid > *, .split > *, .hero-grid > *, .services > * { min-width: 0; }

@media (max-width: 599px) {
  :root { --section-y: var(--s-7); }
  .proof { box-shadow: 6px 6px 0 var(--shadow); }
  .panel { padding: var(--s-5) var(--s-4); }
  .summary, .done { padding: var(--s-4); }
}

/* Windows high-contrast themes: keep boundaries and let the system colours win. */
@media (forced-colors: active) {
  .btn, .nav .nav-contact, .proof, .panel { border: 2px solid ButtonText; }
  .braille-line .dot { fill: CanvasText; }
  .braille-line .guide { fill: GrayText; }
  .brand img { forced-color-adjust: none; background: #FFFFFF; border: 4px solid #FFFFFF; }
  .brand .logo-rev { display: none !important; }
  .brand .logo-std { display: block !important; }
  :focus-visible { outline-color: Highlight; }
  .on-navy { --focus: Highlight; }
}

:target { scroll-margin-top: var(--s-5); }
section[id] { scroll-margin-top: var(--s-5); }

/* main has tabindex="-1" only so the skip link moves focus. It is not in the
   tab order, so hiding its ring is not a 2.4.7 concern. */
main:focus, main:focus-visible { outline: none; }

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