/* ==========================================================================
   Thunderbird Safety Consulting Inc. - site.css
   Final build, 2026-10-31. One stylesheet for every page.
   Pure ASCII: typographic characters in content are HTML entities.

   BRAND. Built on the Thunderbird Safety Consulting design system
   (claude.ai design system "Thunderbird Safety Consulting Inc.", 2026-10-30):
     - Inlet Navy, Burnished Copper, Granite Slate, Abalone Teal,
       Driftwood and Mist White
     - Barlow Semi Condensed 500/600/700 for display, headings, buttons, nav
     - IBM Plex Sans 400/500/600 for everything else
     - square corners (0, 2px at most), no drop shadows, 4px Copper accent
       rules, 3px Teal focus rings, motion limited to colour and fills
   The layout and the class names are the merged site's (2026-10-28), so
   every page keeps its structure.

   CONTRAST. Every text pairing is 4.5:1 or better (WCAG 2 formula),
   except Copper display type, which is only ever set at 24px or larger
   (3:1 rule). Ratios are noted beside the tokens.

   BAND MODEL. A section's band class sets role tokens (--bg, --fg,
   --accent ...). Components read only role tokens, so they work in every
   band. Raised components (.card, .notice, .table-wrap ...) reset the role
   tokens to the light set, so a card on a navy band is light with navy text.

   --------------------------------------------------------------------------
   COMPONENT INDEX (the class names page files use)
   --------------------------------------------------------------------------
   Page frame (copy from _template.html, do not restyle per page)
     .skip-link              first element in <body>, targets #main
     .topbar                 slim strip above the header (location, email)
     .site-header            sticky navy masthead: nav.masthead > .masthead-inner
       .nav-list.nav-left    links left of the centred brand
       .brand > .brand-plate the centred wordmark medallion (crown)
       .nav-list.nav-right   links right of the brand, .nav-cta last
       .has-mega             Services item: link + .mega-toggle + .mega panel
       .menu-toggle          phone menu button
     .site-footer            .footer-grid + .footer-legal; .footer-brand wordmark
   Layout
     .wrap                   centred container, max 1200px
     .section                vertical padding for a band; .section-tight = less
     (no class)              Mist band, the default
     .band-alt               Driftwood band
     .band-navy              navy band (navy-800), light text
     .band-deep              deepest navy band with granite texture (heroes, CTA)
     .sec-head               section heading: h2 (short title) + .standfirst + p
                             title left, standfirst right on desktop
       .sec-head-stack       single column variant
     .cols-2 / .cols-3       grids; one column at 940px and below
       .align-center  .cards-even
     .media-split            text + .photo side by side; .is-reversed
     .prose                  long-form reading column (privacy page)
   Type
     .standfirst             the sentence under a section title
     .eyebrow                small label INSIDE cards only (never a section head)
     .lead  .muted  .visually-hidden
   Heroes
     .hero                   home hero (with .band-deep): .hero-split >
                             .hero-copy + figure.hero-media (photo, .hero-stamps)
     .page-hero              interior hero (with .band-deep); .has-media adds
                             the same split as the home hero
       .page-hero-grid       two columns (text + art), stacks at 940px
     .stamp                  tag label; .stamp-blue, .stamp-tilt
   Actions
     .btn-row                row of buttons (wraps)
     .btn .btn-primary       Copper cut-corner button, Mist label
     .btn .btn-secondary     outline cut-corner button; adapts to the band
     .btn .btn-light         Mist button for dark bands
     .btn-sm  .btn-block     size modifiers
     .section-end            closing row of a section: text + button
   Content blocks (solid light surface in every band)
     .card (+ .card-plain without the Copper rule)  h3, .card-tag, p, .checks
       .card-lift  .card-stack > .card-foot
     .rows                   stacked title / text rows (<ul>)
     .steps (.steps-3)       numbered step cards
     .fit-grid > .fit-card > .fit-band (.fit-count, .fit-unit) + .fit-body
     .checks  .spec  .notice  .faq  .creds  .timeline  .toc
     .manual-cover (.manual-cover-label/-title/-rule/-sub)
     .photo                  figure with a photo (+ figcaption); .photo-portrait
     .slot                   dashed placeholder for a photo still to come
     .cta                    centred closing call to action
   Tables
     .table-wrap  .table-hint  .data-table (.is-wide)  tr.group-row
     .compare  th.tier > .tier-name + .tier-sub  td.yes > .tick  td.no > .dash
     td.note  .chip (.chip-red, .chip-outline)
   Contact form (field names must match contact.php)
     .contact-grid  .form-card  .form-row  .form-hint  .hp-field
     .form-msg (.form-msg-ok / .form-msg-err) > .form-msg-title
     .contact-aside  .next-list
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Design system palette */
  --navy-900:      #13263F;   /* Inlet Navy. Mist on it 14.11 */
  --navy-800:      #1C3150;   /* proposed: navy band, raised dark. Mist 12.10, slate-200 7.46 */
  --navy-700:      #26406A;   /* proposed: dark table header. Mist 9.60 */
  --copper-500:    #B4572E;   /* Burnished Copper: rules, icons, type 24px+ only (Mist 4.47) */
  --copper-600:    #A5502A;   /* proposed: button fill. Mist on it 5.14; on Driftwood 4.38 */
  --copper-700:    #984A27;   /* small Copper text: Mist 5.81, Driftwood 4.96 */
  --granite-600:   #4A4F55;   /* Granite Slate: secondary text. Mist 7.64, Driftwood 6.52 */
  --slate-400:     #8A93A0;   /* proposed: hover rules on navy */
  --slate-200:     #C9C3B6;   /* proposed: secondary text on navy 8.69, navy-800 7.46 */
  --teal-600:      #1F7068;   /* Abalone Teal: links, focus, status. Mist 5.43, Driftwood 4.64 */
  --teal-300:      #5FBDB2;   /* Teal on navy: 6.83 (navy-900), 5.86 (navy-800) */
  --driftwood-100: #E9E4DA;   /* Driftwood: cards, alternate band, zebra rows */
  --mist-50:       #F7F6F2;   /* Mist White: page background */
  --line:          #CFCAC0;   /* hairlines on Mist and Driftwood (decorative) */
  --line-dark:     rgba(201, 195, 182, .22);

  /* Granite texture for navy bands, at the design system's 8% ceiling */
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='square'%3E%3Cpath d='M3 12h16M13 6l6 6-6 6'/%3E%3C/svg%3E");

  /* Type */
  --font-body:    "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --font-display: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;

  /* Space and shape */
  --wrap-max:  1200px;
  --gutter:    clamp(1rem, 4vw, 1.5rem);
  --section-y: clamp(3.5rem, 7vw, 6rem);
  --cut:       12px;          /* the cut corner on buttons and tags */
  --header-h:  4.75rem;
  --anchor-offset: 6.5rem;
  --motion:    180ms ease-out;

  /* Role tokens: light context (Mist band, the default) */
  --bg:         var(--mist-50);
  --bg-raised:  var(--driftwood-100);
  --fg:         var(--navy-900);
  --fg-soft:    var(--granite-600);
  --heading:    var(--navy-900);
  --accent:     var(--copper-700);   /* small Copper text: card tags, labels */
  --em:         var(--copper-600);   /* emphasised words in headings (large) */
  --numeral:    var(--copper-500);   /* step numbers, 2rem and up */
  --marker:     var(--copper-500);   /* list markers, rules */
  --link:       var(--teal-600);
  --link-hover: var(--navy-900);
  --rule:       var(--line);
  --rule-strong: var(--granite-600);
  --focus-ring: var(--teal-600);
  --on-fg:      var(--mist-50);      /* text on a --fg fill */
  --btn-sweep:  var(--navy-900);     /* primary button hover fill */
  --btn-sweep-label: var(--mist-50);
}

/* Bands. The default band is Mist and needs no class. */
.band-paper {
  --bg: var(--mist-50);
  --bg-raised: var(--driftwood-100);
  background: var(--bg);
  color: var(--fg);
}

.band-alt {
  --bg: var(--driftwood-100);
  --bg-raised: var(--mist-50);
  --em: var(--copper-700);
  background: var(--bg);
  color: var(--fg);
}

.band-navy,
.band-deep,
.topbar,
.site-header,
.site-footer {
  --bg-raised:  var(--driftwood-100);   /* cards on dark bands are solid light */
  --fg:         var(--mist-50);
  --fg-soft:    var(--slate-200);
  --heading:    var(--mist-50);
  --accent:     var(--teal-300);
  --em:         var(--teal-300);
  --numeral:    var(--teal-300);
  --marker:     var(--copper-500);
  --link:       var(--mist-50);
  --link-hover: var(--teal-300);
  --rule:       var(--line-dark);
  --rule-strong: var(--slate-400);
  --focus-ring: var(--teal-300);
  --on-fg:      var(--navy-900);
  --btn-sweep:  var(--mist-50);
  --btn-sweep-label: var(--navy-900);
  color: var(--fg);
}
.band-navy { --bg: var(--navy-800); background: var(--bg); }
.band-deep,
.topbar,
.site-header,
.site-footer { --bg: var(--navy-900); background-color: var(--bg); }
.band-deep { --em: var(--copper-500); background-image: var(--texture); }   /* Copper on navy 3.15: display sizes only */

/* Raised surfaces: always the light token set, whatever band they sit in. */
.card,
.steps > li,
.fit-card,
.notice,
.faq details,
.creds li,
.table-wrap,
.form-card,
.form-msg,
.slot,
.mega {
  --fg:         var(--navy-900);
  --fg-soft:    var(--granite-600);
  --heading:    var(--navy-900);
  --accent:     var(--copper-700);
  --em:         var(--copper-700);
  --numeral:    var(--copper-500);
  --marker:     var(--copper-500);
  --link:       var(--teal-600);
  --link-hover: var(--navy-900);
  --rule:       var(--line);
  --rule-strong: var(--granite-600);
  --focus-ring: var(--teal-600);
  --on-fg:      var(--mist-50);
  --btn-sweep:  var(--navy-900);
  --btn-sweep-label: var(--mist-50);
  color: var(--fg);
}


/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* No smooth scrolling: jumps are instant, for people who get motion-sick. */

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.0625rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

main { display: block; flex: 1 0 auto; }
main:focus { outline: none; }

[id] { scroll-margin-top: var(--anchor-offset); }
a, button, input, select, textarea, summary, [tabindex] {
  scroll-margin-top: var(--anchor-offset);
  scroll-margin-bottom: 1.5rem;
}

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

h1, h2, h3, h4 {
  margin: 0 0 .55em;
  color: var(--heading);
  font-family: var(--font-display);
  text-wrap: balance;
}
h1 { font-weight: 700; font-size: clamp(2.4rem, 3.2vw + 1.2rem, 3.5rem); line-height: 1.04; letter-spacing: -.005em; max-width: 18em; }
h2 { font-weight: 700; font-size: clamp(2rem, 1.9vw + 1.2rem, 2.75rem); line-height: 1.05; letter-spacing: -.005em; max-width: 22em; }
h3 { font-weight: 600; font-size: 1.375rem; line-height: 1.22; }
h4 { font-weight: 600; font-size: 1.15rem; line-height: 1.3; }

h1 em, h2 em { font-style: normal; color: var(--em); }

p { margin: 0 0 1rem; max-width: 68ch; }
ul, ol { margin: 0 0 1rem; padding-left: 1.35rem; }
li { margin-bottom: .35rem; }
li > ul, li > ol { margin-top: .35rem; }

strong, b { font-weight: 600; }
small { font-size: .9em; }
code, kbd, samp, pre { font-family: var(--font-body); font-size: 1em; }
button, input, select, textarea { font: inherit; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color var(--motion), text-decoration-color var(--motion);
}
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

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


/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section       { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }

/* Section heading. A short title (h2) on the left, the standfirst and any
   intro text on the right; one column on phones. A hairline with a short
   Copper tab sits above it, like an index tab on a binder divider. */
.sec-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule);
}
.sec-head::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 4rem;
  height: 4px;
  background: var(--marker);
}
.sec-head > h2 { margin-bottom: .85rem; }
.sec-head > :last-child { margin-bottom: 0; }
.sec-head > p:not(.standfirst) { color: var(--fg-soft); }
@media (min-width: 941px) {
  .sec-head {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
  }
  .sec-head > h2 { grid-row: 1 / span 6; margin-bottom: 0; }
  .sec-head > :not(h2) { grid-column: 2; }
}
.sec-head-stack { max-width: 48rem; }
@media (min-width: 941px) {
  .sec-head.sec-head-stack { grid-template-columns: minmax(0, 1fr); }
  .sec-head.sec-head-stack > h2 { grid-row: auto; margin-bottom: .85rem; }
  .sec-head.sec-head-stack > :not(h2) { grid-column: 1; }
}

.cols-2,
.cols-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
}
.cols-2 { align-items: start; }
.cols-3 { align-items: stretch; gap: 1.25rem; }
@media (min-width: 941px) {
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3.5rem; }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .cols-2.align-center { align-items: center; }
}
.cols-2.cards-even { align-items: stretch; }

/* Text beside a photo */
.media-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}
@media (min-width: 941px) {
  .media-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; }
  .media-split.is-reversed { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .media-split.is-reversed > .photo { order: -1; }
}


/* --------------------------------------------------------------------------
   4. Type helpers
   -------------------------------------------------------------------------- */

.standfirst {
  margin: 0 0 1rem;
  font: 500 clamp(1.15rem, .45vw + 1.02rem, 1.375rem)/1.45 var(--font-body);
  color: var(--heading);
  max-width: 34em;
  text-wrap: pretty;
}

/* Small label. Inside cards and heroes only, never as a section heading. */
.eyebrow {
  display: block;
  margin: 0 0 .6rem;
  font: 600 .875rem/1.35 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  max-width: none;
}

.lead {
  font-size: clamp(1.125rem, .5vw + 1rem, 1.25rem);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 40em;
}

.muted { color: var(--fg-soft); }


/* --------------------------------------------------------------------------
   5. Skip link and top strip
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: 0;
  left: 1rem;
  z-index: 100;
  transform: translateY(-120%);
  padding: .75rem 1.1rem;
  background: var(--mist-50);
  color: var(--navy-900);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { transform: none; outline: 3px solid var(--teal-600); outline-offset: 0; }

.topbar {
  border-bottom: 1px solid var(--line-dark);
  font: 500 .875rem/1.4 var(--font-body);
}
.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1.5rem;
  min-height: 2.5rem;
  padding-block: .35rem;
}
.topbar p { margin: 0; max-width: none; color: var(--slate-200); }
.topbar a { color: var(--mist-50); text-decoration-color: rgba(247, 246, 242, .4); }
.topbar a:hover { color: var(--teal-300); }
@media (max-width: 640px) {
  .topbar-note { display: none; }
  .topbar-inner { justify-content: center; }
}


/* --------------------------------------------------------------------------
   6. Header: the crown
   A navy masthead with the menu split either side of a centred wordmark
   medallion. The medallion hangs below the bar on a Copper edge; its cut
   lower corners repeat the cut corner of the buttons. The logo slot waits
   for the mark from the Nuxalk artist (design system: logo PENDING).
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line-dark);
}

.masthead-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  max-width: 1280px;
  min-height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
  transition: min-height var(--motion);
}

/* The medallion */
.brand {
  --plate-cut: 22px;
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: block;
  margin-bottom: -1.9rem;               /* hangs below the bar */
  padding-bottom: 4px;                  /* the Copper edge */
  background: var(--copper-500);
  color: var(--mist-50);
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--plate-cut)), calc(100% - var(--plate-cut)) 100%, var(--plate-cut) 100%, 0 calc(100% - var(--plate-cut)));
}
.brand:hover { color: var(--mist-50); }
.brand-plate {
  display: grid;
  justify-items: center;
  padding: 1.15rem 2.1rem 1.5rem;
  background: var(--navy-900) var(--texture);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--plate-cut) + 2px), calc(100% - var(--plate-cut) + 2px) 100%, calc(var(--plate-cut) - 2px) 100%, 0 calc(100% - var(--plate-cut) + 2px));
  transition: padding var(--motion);
}
.brand-name {
  display: block;
  font: 700 2.125rem/1 var(--font-display);
  letter-spacing: .005em;
  white-space: nowrap;
  transition: font-size var(--motion);
}
.brand-name::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  margin: .55rem auto .5rem;
  background: var(--copper-500);
}
.brand-sub {
  display: block;
  font: 600 .7rem/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--slate-200);
  white-space: nowrap;
}
.brand:focus-visible { outline-offset: -6px; }

/* Condensed once the top strip has scrolled away (site.js adds the class) */
.site-header.is-condensed .masthead-inner { min-height: 4rem; }
.site-header.is-condensed .brand-plate { padding: .7rem 1.75rem 1rem; }
.site-header.is-condensed .brand-name { font-size: 1.7rem; }
.site-header.is-condensed .brand { margin-bottom: -1.25rem; }

/* Menu links */
.nav-list {
  display: flex;
  align-items: center;
  gap: .25rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* DOM order is brand, Menu button, left list, right list (so phones read
   top to bottom); the desktop grid places the lists either side. */
.nav-left  { grid-column: 1; grid-row: 1; justify-content: flex-end; padding-right: 2.5rem; }
.nav-right { grid-column: 3; grid-row: 1; justify-content: flex-start; padding-left: 2.5rem; }
.nav-list li { margin: 0; }
.nav-right .nav-cta { margin-left: auto; }

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--header-h);
  color: var(--mist-50);
  font: 600 1.0625rem/1 var(--font-display);
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: inset 0 -4px 0 transparent;
  transition: box-shadow var(--motion), color var(--motion), min-height var(--motion);
  white-space: nowrap;
}
.nav-link:hover { color: var(--mist-50); box-shadow: inset 0 -4px 0 var(--slate-400); }
.nav-link[aria-current="page"],
.has-mega.is-current > .nav-link { box-shadow: inset 0 -4px 0 var(--copper-500); }
.site-header.is-condensed .nav-link { min-height: 4rem; }
.nav-link:focus-visible { outline-offset: -3px; }

/* Services: link + disclosure button + mega panel */
.has-mega { display: flex; align-items: center; }
.mega-toggle {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2.75rem;
  margin-left: .1rem;
  padding: 0;
  background: transparent;
  color: var(--mist-50);
  border: 0;
  cursor: pointer;
}
.mega-toggle::before {
  content: "";
  width: .5rem;
  height: .5rem;
  margin-top: -.25rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform var(--motion), margin var(--motion);
}
.mega-toggle[aria-expanded="true"]::before { transform: rotate(-135deg); margin-top: .25rem; }
.mega-toggle:hover { color: var(--teal-300); }

.mega {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 3;
  background: var(--mist-50);
  border-top: 4px solid var(--copper-500);
  border-bottom: 1px solid var(--granite-600);
}
.has-mega.is-open .mega { display: block; }
.mega-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 2.5rem;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding: 2.75rem var(--gutter) 2.25rem;
}
.mega-h {
  margin: 0 0 .75rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
  font: 600 .875rem/1.3 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--copper-700);
}
.mega ul { margin: 0; padding: 0; list-style: none; }
.mega li { margin: 0; }
.mega-col a {
  display: block;
  padding: .7rem .85rem;
  margin-inline: -.85rem;
  color: var(--navy-900);
  text-decoration: none;
  transition: background-color var(--motion);
}
.mega-col a:hover { background: var(--driftwood-100); color: var(--navy-900); }
.mega-col a strong {
  display: flex;
  align-items: center;
  gap: .5rem;
  font: 600 1.15rem/1.25 var(--font-display);
}
.mega-col a strong::after {
  content: "";
  width: .95em;
  height: .95em;
  background: var(--copper-600);
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--motion), transform var(--motion);
}
.mega-col a:hover strong::after,
.mega-col a:focus-visible strong::after { opacity: 1; transform: none; }
.mega-col a span { display: block; margin-top: .15rem; font-size: .9375rem; color: var(--granite-600); }
.mega-col a[aria-current="page"] strong { color: var(--copper-700); }
.mega-all { margin-top: .9rem; font-weight: 600; }
.mega-feature {
  --fg: var(--mist-50);
  --fg-soft: var(--slate-200);
  --heading: var(--mist-50);
  --link: var(--mist-50);
  --link-hover: var(--teal-300);
  --focus-ring: var(--teal-300);
  --on-fg: var(--navy-900);
  --btn-sweep: var(--mist-50);
  --btn-sweep-label: var(--navy-900);
  padding: 1.6rem 1.75rem 1.75rem;
  background: var(--navy-900) var(--texture);
  color: var(--mist-50);
}
.mega-feature .mega-h { color: var(--teal-300); border-bottom-color: var(--line-dark); }
.mega-feature p { color: var(--slate-200); font-size: 1rem; }
.mega-feature .mega-title {
  margin: 0 0 .5rem;
  font: 700 1.6rem/1.1 var(--font-display);
  color: var(--mist-50);
}

/* Phone menu button */
.menu-toggle {
  display: none;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .5rem .9rem;
  background: transparent;
  color: var(--mist-50);
  border: 1.5px solid var(--mist-50);
  border-radius: 2px;
  font: 600 1rem/1 var(--font-display);
  letter-spacing: .02em;
  cursor: pointer;
}
.menu-toggle:hover { background: rgba(247, 246, 242, .1); }
.menu-icon,
.menu-icon::before,
.menu-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.menu-icon { position: relative; }
.menu-icon::before,
.menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -6px; }
.menu-icon::after  { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after  { top: 0; transform: rotate(-45deg); }

/* Phones and tablets: brand left, Menu right, both link lists in a drawer. */
@media (max-width: 1120px) {
  .masthead-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    min-height: 4rem;
    column-gap: 1rem;
  }
  .brand { order: -1; align-self: center; margin: .5rem 0; padding-bottom: 3px; --plate-cut: 12px; }
  .brand-plate { justify-items: start; padding: .55rem .9rem .7rem; }
  .brand-name { font-size: 1.5rem; }
  .brand-name::after { margin: .35rem 0 .35rem; width: 1.75rem; }
  .brand-sub { font-size: .6rem; letter-spacing: .2em; }
  .site-header.is-condensed .brand { margin-bottom: 0; }
  .site-header.is-condensed .brand-plate { padding: .45rem .8rem .55rem; }
  .site-header.is-condensed .brand-name { font-size: 1.3rem; }
  .site-header.is-condensed .masthead-inner { min-height: 3.5rem; }

  .js .menu-toggle { display: inline-flex; }
  .nav-left, .nav-right { padding: 0; }
  .js .nav-list {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .js .site-header.nav-open .nav-list { display: flex; }
  .js .site-header.nav-open .nav-right { padding-bottom: 1.25rem; }
  .js .site-header.nav-open .masthead-inner { max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
  .js .nav-list > li { border-top: 1px solid var(--line-dark); }
  .js .nav-list > li.nav-cta { border-top: 0; margin: 1rem 0 0; }
  .js .nav-cta .btn { width: 100%; }
  .nav-link,
  .site-header.is-condensed .nav-link { min-height: 3.25rem; font-size: 1.15rem; }
  .nav-link[aria-current="page"],
  .has-mega.is-current > .nav-link { box-shadow: inset 4px 0 0 var(--copper-500); padding-left: .9rem; }
  .nav-link:hover { box-shadow: none; color: var(--teal-300); }

  .has-mega { flex-wrap: wrap; justify-content: space-between; }
  .mega-toggle { width: 3rem; height: 3.25rem; }
  .mega {
    position: static;
    flex-basis: 100%;
    background: var(--navy-800);
    border: 0;
    border-left: 4px solid var(--copper-500);
  }
  .mega-inner { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1rem 1rem 1.25rem; }
  .mega-h { color: var(--teal-300); border-bottom-color: var(--line-dark); }
  .mega-col a { color: var(--mist-50); margin-inline: 0; padding-inline: 0; }
  .mega-col a:hover { background: transparent; color: var(--teal-300); }
  .mega-col a span { color: var(--slate-200); }
  .mega-col a[aria-current="page"] strong { color: var(--teal-300); }
  .mega-all a { color: var(--mist-50); }
  .mega-feature { display: none; }

  html:not(.js) .site-header { position: relative; }
  html:not(.js) .nav-list { flex-basis: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 0 1.25rem; }
}
@media (max-width: 380px) {
  .brand-name { font-size: 1.3rem; }
  .menu-toggle { padding: .5rem .7rem; }
}


/* --------------------------------------------------------------------------
   7. Buttons
   A cut-corner tag: square, with the top-right corner sliced off like an
   equipment tag. The fill sweeps across on hover and the arrow steps
   forward. The shape lives on ::before, so the focus ring is never clipped.
   -------------------------------------------------------------------------- */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1rem;
  margin-top: 1.75rem;
}

.btn {
  --fill: transparent;
  --edge: transparent;
  --sweep: var(--btn-sweep);
  --label: var(--mist-50);
  --label-hover: var(--btn-sweep-label);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 52px;
  padding: .8rem 1.35rem .8rem 1.55rem;
  background: none;
  border: 0;
  color: var(--label);
  font: 600 1.0625rem/1.15 var(--font-display);
  letter-spacing: .015em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--motion);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  background:
    linear-gradient(to bottom left, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 2px), transparent calc(50% + 2px)) right top / var(--cut) var(--cut) no-repeat,
    linear-gradient(var(--sweep), var(--sweep)) left top / 0% 100% no-repeat,
    var(--fill);
  box-shadow: inset 0 0 0 2px var(--edge);
  transition: background-size 240ms ease-out;
}
.btn::after {
  content: "";
  flex: none;
  width: 1.05em;
  height: 1.05em;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  transition: transform var(--motion);
}
.btn:hover { color: var(--label-hover); text-decoration: none; }
.btn:hover::before { background-size: var(--cut) var(--cut), 100% 100%, auto; }
.btn:hover::after { transform: translateX(3px); }
.btn:focus-visible { outline-offset: 3px; }

.btn-primary { --fill: var(--copper-600); --label: var(--mist-50); }
.btn-secondary { --edge: var(--fg); --sweep: var(--fg); --label: var(--fg); --label-hover: var(--on-fg); }
.btn-light { --fill: var(--mist-50); --sweep: var(--copper-600); --label: var(--navy-900); --label-hover: var(--mist-50); }

.btn-sm { --cut: 10px; min-height: 44px; padding: .6rem 1.05rem .6rem 1.2rem; font-size: 1rem; gap: .55rem; }
.btn-block { display: flex; width: 100%; }

/* Closing row of a section: a line of text and the action for it */
.section-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.section-end p {
  margin: 0;
  font: 600 clamp(1.2rem, .6vw + 1rem, 1.45rem)/1.25 var(--font-display);
  color: var(--heading);
}
.section-end .btn-row { margin-top: 0; }


/* --------------------------------------------------------------------------
   8. Heroes and stamps
   -------------------------------------------------------------------------- */

.hero,
.page-hero { border-bottom: 4px solid var(--copper-500); }

/* Home hero: text on navy, a photo beside it running to the window edge.
   Photos never sit behind text (design system). */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.hero-copy {
  padding: clamp(3rem, 8vw, 5.5rem) var(--gutter) clamp(2.75rem, 6vw, 4.5rem);
}
.hero h1 {
  margin-bottom: .4em;
  font-size: clamp(2.6rem, 4.4vw + 1rem, 4.25rem);
  line-height: 1;
  max-width: 13em;
}
.hero .lead { margin-bottom: 0; }
.hero-media {
  position: relative;
  min-width: 0;
  margin: 0;
  aspect-ratio: 16 / 10;            /* no min-height here: with aspect-ratio it would widen the photo past a phone screen */
  background: var(--navy-800);
}
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 941px) {
  .hero-split {
    grid-template-columns:
      minmax(var(--gutter), 1fr)
      minmax(0, calc(var(--wrap-max) * .54 - var(--gutter)))
      minmax(0, calc(var(--wrap-max) * .46 - var(--gutter)))
      minmax(var(--gutter), 1fr);
  }
  .hero-copy {
    grid-column: 2;
    padding: clamp(5rem, 9vw, 7.5rem) clamp(2rem, 4vw, 4rem) clamp(4rem, 7vw, 6rem) 0;
  }
  .hero-media {
    grid-column: 3 / 5;
    aspect-ratio: auto;
    min-height: 22rem;
    clip-path: polygon(4.5rem 0, 100% 0, 100% 100%, 0 100%, 0 4.5rem);
  }
}

.hero-stamps {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 1rem;
}

/* Tag label, with the button's cut corner */
.stamp {
  display: inline-block;
  padding: .5em 1.2em .5em .85em;
  background: var(--mist-50);
  color: var(--navy-900);
  font: 600 .8125rem/1.2 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.stamp-blue { background: var(--navy-900); color: var(--mist-50); }
.stamp-tilt { transform: none; }

/* Interior page hero */
.page-hero { padding-block: clamp(3rem, 7vw, 5.25rem) clamp(2.75rem, 6vw, 4.25rem); }
@media (min-width: 1121px) { .page-hero { padding-top: clamp(4.25rem, 7vw, 6rem); } }
.page-hero h1 { max-width: 17em; }
.page-hero .lead { margin-bottom: 0; }
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 941px) {
  .page-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3.5rem; }
}
/* Page hero with a photo: the home hero's split */
.page-hero.has-media { padding-block: 0; }
.page-hero.has-media .hero-copy { padding-block: clamp(3rem, 7vw, 5.25rem) clamp(2.75rem, 6vw, 4.25rem); }
@media (min-width: 941px) {
  .page-hero.has-media .hero-copy { padding-block: clamp(4.5rem, 7vw, 6rem) clamp(3.5rem, 6vw, 4.5rem); }
  .page-hero.has-media .hero-media { min-height: 24rem; }
}

/* Photos inside the page */
.photo { position: relative; margin: 0; }
.photo img {
  width: 100%;
  height: auto;
  clip-path: polygon(0 0, calc(100% - 2.5rem) 0, 100% 2.5rem, 100% 100%, 0 100%);
}
.photo::after {                       /* Copper rule under the photo */
  content: "";
  display: block;
  height: 4px;
  background: var(--copper-500);
}
.photo figcaption {
  margin-top: .6rem;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--fg-soft);
}
.photo-tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.photo-portrait { max-width: 20rem; }
.photo-portrait img { aspect-ratio: 1; object-fit: cover; }


/* --------------------------------------------------------------------------
   9. Cards and lists
   -------------------------------------------------------------------------- */

.card {
  background: var(--bg-raised);
  border-top: 4px solid var(--copper-500);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.card-plain { border-top: 0; }
.card h3 { margin-bottom: .35rem; }
.card > :last-child { margin-bottom: 0; }
.card-tag {
  margin: 0 0 1rem;
  color: var(--accent);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.4;
}

.card-lift { transition: background-color var(--motion), box-shadow var(--motion); }
.card-lift:hover,
.card-lift:focus-within {
  background: var(--mist-50);
  box-shadow: inset 0 0 0 1px var(--granite-600);
}
.band-alt .card-lift:hover,
.band-alt .card-lift:focus-within { background: #FFFFFF; }

/* Stacked rows: title left, text right. A short item is just a short row. */
.rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-strong); }
.rows > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem 2.5rem;
  margin: 0;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.rows h3 { margin: 0; }
.rows p { margin-bottom: .5rem; color: var(--fg-soft); }
.rows > li > :last-child,
.rows > li > div > :last-child { margin-bottom: 0; }
@media (min-width: 720px) {
  .rows > li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: baseline; }
}

/* Numbered step cards */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
@media (min-width: 600px)  { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 941px)  { .steps.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps > li {
  counter-increment: step;
  margin: 0;
  padding: 1.5rem 1.5rem 1.6rem;
  background: var(--bg-raised);
  border-top: 4px solid var(--copper-500);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: .75rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--rule);
  font: 700 2.5rem/1 var(--font-display);
  color: var(--numeral);
}
.steps h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.steps p { margin-bottom: 0; color: var(--fg-soft); }

/* Find-your-fit cards */
.fit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 0 0 1.5rem;
}
@media (min-width: 720px) { .fit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fit-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
}
.fit-band {
  padding: 1.4rem 1.5rem 1.2rem;
  background: var(--navy-900) var(--texture);
  color: var(--mist-50);
  border-bottom: 4px solid var(--copper-500);
}
.fit-count {
  display: block;
  font: 700 clamp(2.75rem, 3vw + 1.4rem, 3.75rem)/1 var(--font-display);
  white-space: nowrap;
}
.fit-unit {
  display: block;
  margin-top: .5rem;
  font: 600 .875rem/1.3 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--slate-200);
}
.fit-body { padding: 1.35rem 1.5rem 1.5rem; }
.fit-body h3 { margin-bottom: .35rem; }
.fit-setup { margin: 0; color: var(--fg-soft); }

/* Square-bullet list with optional bold lead-ins */
.checks { margin: 0 0 1rem; padding: 0; list-style: none; }
.checks li { position: relative; margin-bottom: .65rem; padding-left: 1.6rem; }
.checks li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .6em;
  width: .5rem;
  height: .5rem;
  background: var(--marker);
}
.checks strong { color: var(--heading); }

/* Definition list */
.spec { margin: 0 0 1rem; border-top: 1px solid var(--rule); }
.spec dt { padding-top: .9rem; font: 600 1.125rem/1.3 var(--font-display); color: var(--heading); }
.spec dd { margin: .2rem 0 0; padding-bottom: .9rem; border-bottom: 1px solid var(--rule); color: var(--fg-soft); }

/* Callout: a hairline box with a short Copper tab at the top left */
.notice {
  position: relative;
  max-width: 78ch;
  margin: 1.5rem 0;
  padding: 1.2rem 1.4rem;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
}
.notice::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 3.5rem;
  height: 4px;
  background: var(--copper-500);
}
.notice p { max-width: none; }
.notice > :last-child { margin-bottom: 0; }

/* Questions and answers */
.faq { max-width: 52rem; }
.faq details {
  margin-bottom: .75rem;
  background: var(--bg-raised);
  border-top: 1px solid var(--rule);
}
.faq details[open] { border-top-color: var(--copper-500); box-shadow: inset 0 3px 0 var(--copper-500); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: 1rem 1.35rem;
  font: 600 1.2rem/1.3 var(--font-display);
  color: var(--heading);
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font: 600 1.6rem/1 var(--font-display);
  color: var(--copper-600);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > :not(summary) { margin-inline: 1.35rem; }
.faq details > :last-child { margin-bottom: 1.25rem; }

/* Credentials */
.creds { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.creds li {
  position: relative;
  margin-bottom: .6rem;
  padding: .9rem 1.1rem;
  background: var(--bg-raised);
}
.creds li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--copper-500);
}
.creds strong { display: block; font: 600 1.15rem/1.3 var(--font-display); color: var(--heading); }

/* Vertical process */
.timeline { max-width: 48rem; margin: 0; padding: 0; list-style: none; }
.timeline > li { position: relative; margin: 0; padding: 0 0 2rem 3.25rem; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: .7rem;
  bottom: -.3rem;
  width: 2px;
  background: var(--rule-strong);
}
.timeline > li:last-child::before { display: none; }
.timeline > li::after {
  content: "";
  position: absolute;
  left: .62rem;
  top: .4rem;
  width: .8rem;
  height: .8rem;
  background: var(--marker);
  transform: rotate(45deg);
}
.timeline h3 { margin-bottom: .3rem; font-size: 1.2rem; }
.timeline p { margin-bottom: 0; color: var(--fg-soft); }

/* Numbered contents list (manual page) */
.toc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
@media (min-width: 720px) { .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.toc > li {
  counter-increment: toc;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  padding: .95rem 0;
  border-bottom: 1px solid var(--rule);
}
.toc > li::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  min-width: 2rem;
  font: 700 1.125rem/1 var(--font-display);
  color: var(--accent);
}
.toc strong { display: block; font: 600 1.15rem/1.3 var(--font-display); color: var(--heading); }
.toc span { display: block; font-size: .9375rem; color: var(--fg-soft); }

/* Book-cover card (manual page, home). A Copper frame offset behind it. */
.manual-cover {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  padding: 3rem 2rem 2.5rem;
  background: var(--navy-900) var(--texture);
  color: var(--mist-50);
  text-align: center;
}
.manual-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(14px, 14px);
  border: 2px solid var(--copper-500);
}
.manual-cover::before {               /* document icon from the design system set */
  content: "";
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.5rem;
  background: var(--copper-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h7M9 17h5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h7M9 17h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.manual-cover img { display: none; }  /* the draft crest is not for use (design system) */
.manual-cover-label {
  display: block;
  font: 600 .875rem/1.3 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--teal-300);
}
.manual-cover-title {
  display: block;
  margin-top: .6rem;
  font: 700 1.9rem/1.05 var(--font-display);
  color: var(--mist-50);
}
.manual-cover-rule { width: 3rem; height: 4px; margin: 1.35rem auto; background: var(--copper-500); }
.manual-cover-sub { display: block; font-size: .9375rem; color: var(--slate-200); }

/* Placeholder for a photo or artwork still to be supplied */
.slot {
  display: grid;
  place-items: center;
  min-height: 16rem;
  margin: 0;
  padding: 1.5rem;
  text-align: center;
  background: var(--mist-50);
  border: 2px dashed var(--slate-400);
}
.slot figcaption { font: 600 1.15rem/1.3 var(--font-display); color: var(--navy-900); }
.slot figcaption span {
  display: block;
  max-width: 28ch;
  margin-top: .4rem;
  font: 400 .9375rem/1.45 var(--font-body);
  color: var(--granite-600);
}

/* Closing call to action */
.cta { text-align: center; }
.cta h2, .cta p, .cta .lead { margin-inline: auto; }
.cta .btn-row { justify-content: center; }


/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */

.table-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0 2rem;
  background: var(--mist-50);
  border: 1px solid var(--line);
  border-top: 4px solid var(--copper-500);
}

.table-hint {
  display: none;
  margin: 1.25rem 0 -.75rem;
  font-size: .9375rem;
  color: var(--fg-soft);
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.data-table caption {
  padding: 1rem 1.25rem;
  text-align: left;
  font: 600 1.2rem/1.3 var(--font-display);
  color: var(--navy-900);
  background: var(--mist-50);
  border-bottom: 1px solid var(--line);
}
.data-table th,
.data-table td {
  padding: .95rem 1.25rem;
  text-align: left;
  vertical-align: top;
  color: var(--navy-900);
  background: var(--mist-50);
  border-bottom: 1px solid var(--line);
}
.data-table thead th {
  vertical-align: bottom;
  padding-block: .9rem;
  background: var(--navy-900);
  color: var(--mist-50);
  font: 600 1rem/1.3 var(--font-display);
  letter-spacing: .02em;
  border-bottom: 0;
}
.data-table tbody tr:nth-child(even) > * { background: var(--driftwood-100); }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tbody th { font-weight: 600; }
.data-table .center { text-align: center; }
.data-table p { margin: 0 0 .5rem; }
.data-table p:last-child { margin-bottom: 0; }
.data-table a { color: var(--teal-600); }

/* Group heading row inside a table body (e.g. "Forms and Procedures") */
.data-table tr.group-row > * {
  padding-block: .7rem;
  background: var(--driftwood-100);
  color: var(--copper-700);
  font: 600 .9375rem/1.3 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  border-bottom: 1px solid var(--granite-600);
}

@media (max-width: 940px) {
  .table-hint { display: block; }
  .data-table th,
  .data-table td { padding: .8rem .9rem; }
  .data-table.is-wide { min-width: 40rem; }
  .data-table tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: inset -1px 0 0 var(--line);
  }
  .data-table thead tr > :first-child { z-index: 2; box-shadow: inset -1px 0 0 var(--navy-700); }
  .data-table tr.group-row > :first-child { position: static; box-shadow: none; }
  .data-table.is-wide tr > :first-child,
  .compare tr > :first-child { width: 10.5rem; min-width: 10.5rem; }
}
@media (max-width: 480px) {
  .data-table th,
  .data-table td { padding: .75rem .7rem; }
}

/* Three-tier comparison */
.compare { min-width: 42rem; }
.compare tbody th { width: 46%; font-weight: 600; }
.compare thead th.tier {
  width: 18%;
  padding: 0 .85rem 1rem;
  vertical-align: top;
  text-align: center;
  border-left: 1px solid var(--navy-700);
}
.compare thead th.tier::before {
  content: "";
  display: block;
  height: 4px;
  margin: 0 -.85rem 1rem;
  background: var(--copper-500);
}
.tier-name { display: block; font: 700 1.3rem/1.15 var(--font-display); color: var(--mist-50); }
.tier-sub  { display: block; margin-top: .35rem; font: 400 .875rem/1.35 var(--font-body); color: var(--slate-200); }
.compare td {
  text-align: center;
  vertical-align: middle;
  border-left: 1px solid var(--line);
}
.compare td.note { font-size: .9375rem; font-weight: 600; color: var(--granite-600); }
@media (max-width: 940px) {
  .compare { min-width: 39rem; }
  .compare thead th.tier { width: 9.5rem; min-width: 9.5rem; }
}

/* Included: Teal square with a Mist check. Not included: Granite dash. */
.tick {
  position: relative;
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  vertical-align: middle;
  background: var(--teal-600);
}
.tick::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: .4rem;
  height: .78rem;
  border: solid var(--mist-50);
  border-width: 0 .17rem .17rem 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.dash {
  display: inline-block;
  width: 1rem;
  height: 2px;
  vertical-align: middle;
  background: var(--granite-600);
}

/* Chips: small square labels (billing units, rhythm "When" cells) */
.chip {
  display: inline-block;
  padding: .3rem .6rem .25rem;
  background: var(--navy-900);
  color: var(--mist-50);
  font: 600 .875rem/1.2 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip-red { background: var(--copper-600); color: var(--mist-50); }
.chip-outline { background: transparent; color: var(--navy-900); box-shadow: inset 0 0 0 1.5px var(--navy-900); }


/* --------------------------------------------------------------------------
   11. Contact form
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 941px) {
  .contact-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3.5rem; }
}

.form-card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--driftwood-100);
  border-top: 4px solid var(--copper-500);
}
.form-row { margin-bottom: 1.35rem; }
.form-row label {
  display: block;
  margin-bottom: .45rem;
  font-weight: 500;
  font-size: 1rem;
  color: var(--navy-900);
}
.form-hint { font-weight: 400; color: var(--granite-600); }
.form-row input,
.form-row select,
.form-row textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: .75rem 1rem;
  background: var(--mist-50);
  color: var(--navy-900);
  border: 1px solid var(--granite-600);
  border-radius: 0;
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--motion), box-shadow var(--motion);
}
.form-row textarea { min-height: 9rem; resize: vertical; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 2px var(--teal-600); }
.form-row ::placeholder { color: var(--granite-600); opacity: 1; }

.form-msg {
  margin-bottom: 1.5rem;
  padding: 1rem 1.15rem;
  background: var(--mist-50);
  border: 1px solid var(--line);
  border-top-width: 4px;
}
.form-msg:target { display: block; }
.form-msg:focus { outline: 3px solid var(--teal-600); outline-offset: 3px; }
.form-msg p { margin: 0; font-size: 1rem; color: var(--navy-900); }
.form-msg a { font-weight: 600; overflow-wrap: anywhere; }
.form-msg-title {
  display: block;
  margin-bottom: .35rem;
  font: 600 .875rem/1.3 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.form-msg-ok { border-top-color: var(--teal-600); }
.form-msg-ok .form-msg-title { color: var(--teal-600); }
.form-msg-err { border-top-color: var(--copper-600); }
.form-msg-err .form-msg-title { color: var(--copper-700); }

.hp-field { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

.contact-aside h3 { margin-bottom: .75rem; }
.contact-aside p:not(.eyebrow) { color: var(--fg-soft); overflow-wrap: anywhere; }
.contact-aside .eyebrow { margin-bottom: .35rem; }
.next-list { margin: .75rem 0 2rem; padding: 0; list-style: none; }
.next-list li {
  position: relative;
  margin: 0;
  padding: .75rem 0 .75rem 2rem;
  border-bottom: 1px solid var(--rule);
}
.next-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--marker);
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
}


/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: auto;
  padding-block: 3.5rem 1.5rem;
  color: var(--slate-200);
  border-top: 4px solid var(--copper-500);
  background-image: var(--texture);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
}
.footer-brand {
  display: inline-block;
  margin-bottom: 1.1rem;
  color: var(--mist-50);
  text-decoration: none;
}
.footer-brand:hover { color: var(--mist-50); }
.footer-brand .brand-name { font-size: 2rem; }
.footer-brand .brand-name::after { margin: .5rem 0 .45rem; }
.site-footer p { color: var(--slate-200); max-width: 36ch; }
.footer-h {
  margin: 0 0 .75rem;
  font: 600 .875rem/1.3 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--teal-300);
}
.footer-list { margin: 0; padding: 0; list-style: none; }
.footer-list li { margin: 0 0 .15rem; overflow-wrap: anywhere; }
.footer-list a {
  display: inline-block;
  padding: .3rem 0;
  color: var(--mist-50);
  text-decoration-color: rgba(247, 246, 242, .4);
}
.footer-list a:hover { color: var(--teal-300); text-decoration-color: currentColor; }
.footer-list a[aria-current="page"] { color: var(--teal-300); }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-dark);
  font-size: .9375rem;
}
.footer-legal p { margin: 0; max-width: none; }


/* --------------------------------------------------------------------------
   13. Motion preferences and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .btn:hover::after { transform: none; }
}

@media print {
  .skip-link, .topbar, .menu-toggle, .mega, .mega-toggle, .nav-list, .btn-row, .table-hint, .hero-media { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header { position: static; }
  .band-navy, .band-deep, .band-alt, .site-header, .site-footer, .hero, .page-hero, .brand-plate {
    background: #fff !important;
    color: #000 !important;
    --fg: #000; --fg-soft: #333; --heading: #000; --accent: #000; --link: #000;
  }
  .brand { background: none; clip-path: none; margin: 0; }
  .card, .steps > li, .fit-card, .notice, .table-wrap { break-inside: avoid; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .9em; }
}


/* --------------------------------------------------------------------------
   14. Page extras: services.html and safety-programs.html
   -------------------------------------------------------------------------- */

.card.card-stack { display: flex; flex-direction: column; }
.card-stack > .card-foot { margin-top: auto; padding-top: .35rem; }
.card-foot > :last-child { margin-bottom: 0; }

.steps > li > :last-child,
.steps .checks > li:last-child { margin-bottom: 0; }

.compare tbody th p + p { margin-top: -.25rem; font-weight: 400; }


/* --------------------------------------------------------------------------
   15. Page extras: privacy.html
   -------------------------------------------------------------------------- */

.prose { max-width: 48rem; }
.prose h3 { margin-top: 2.25rem; }
.prose .checks { max-width: 68ch; }