/* Quinine Cybersecurity public site: base elements and site chrome.
   Load order on every public marketing page: tokens.css (palette, type, fonts, aliases) →
   site-nav.css (this file: base elements, header, navigation, mobile drawer, footer) → home.css
   (layout, type, buttons, forms, sections) → q-anim.css → cyber-bg.css → page stylesheets.
   Colours come only from tokens.css variables. Light is the default; dark applies on
   :root[data-theme="dark"]. Every transition/animation is removed under prefers-reduced-motion. */

/* The chrome relies on the UA drawing scrollbars and form controls in the active theme. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html.nav-open, html.nav-open body { overflow: hidden; }
img, svg, video { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, h4 { color: var(--color-ink); margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
a { color: var(--color-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-link-hover); }
address { font-style: normal; }
button { font: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-xs); }
main:focus { outline: none; }
::selection { background: var(--color-selection); color: var(--color-ink); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link, .skip {
  position: absolute; left: 16px; top: -100px; z-index: 300;
  padding: 10px 16px; border-radius: var(--radius-s);
  background: var(--color-accent); color: var(--color-on-accent);
  font-weight: var(--weight-strong); text-decoration: none;
}
.skip-link:focus, .skip:focus { top: 12px; color: var(--color-on-accent); }

/* Icon-only controls in the bar (theme toggle, menu). Text buttons live in home.css. */
.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  background: transparent; color: var(--color-ink); cursor: pointer;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.icon-btn:hover { border-color: var(--color-line-strong); background: var(--color-surface); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .theme-toggle__moon { fill: currentColor; stroke: none; }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

/* ------------------------------------------------------------------ header bar */

/* Two states, same geometry: at the top of the page the bar blends into the page (translucent
   header tint, no rule); once scrolled it settles onto a slightly more opaque surface with a fine
   rule and a whisper of --shadow-1. Only paint properties change, so the height never moves.
   Without backdrop-filter support the bar is opaque so content never shows through unblurred. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background-color: var(--color-header-bg);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  backdrop-filter: saturate(1.3) blur(10px);
}
.site-header[data-scrolled="true"] {
  background-color: color-mix(in srgb, var(--color-bg) 96%, transparent);
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: saturate(1.3) blur(16px);
  backdrop-filter: saturate(1.3) blur(16px);
}
.site-header[data-scrolled="true"], .site-header[data-menu="open"] { border-bottom-color: var(--color-line); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header, .site-header[data-scrolled="true"] { background-color: var(--color-bg); }
}
@media (prefers-reduced-motion: no-preference) {
  .site-header {
    transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out);
  }
}
.site-header__inner {
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 28px);
  max-width: calc(var(--max) + 2 * var(--gutter)); height: var(--header-h);
  margin: 0 auto; padding: 0 var(--gutter);
}

/* Brand lock-up: the animated Q (q-anim.css) + QUININE wordmark + smaller CYBERSECURITY. */
.site-brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  min-height: 44px; color: var(--color-ink); text-decoration: none;
}
.site-brand:hover { color: var(--color-ink); }
.site-brand__mark, .site-brand > .qmark { width: 32px; font-size: 32px; color: var(--color-ink); }
.site-brand img { width: 34px; height: 34px; }
.site-brand__word {
  display: grid; font-weight: var(--weight-display); font-size: 1rem; line-height: 1.02;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.site-brand__word span {
  margin-top: 4px; font-family: var(--font-mono); font-size: 0.56rem; font-weight: var(--weight-label);
  letter-spacing: 0.26em; color: var(--color-text-muted);
}

/* ------------------------------------------------------------------ primary navigation (desktop) */

.site-nav { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.2vw, 20px); min-width: 0; }
.site-nav__drawer-label { display: none; }
.site-nav__list { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.site-nav__item { position: relative; }
.site-nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 40px; padding: 8px clamp(8px, 0.9vw, 13px);
  border: 0; border-radius: var(--radius-s); background: none;
  color: var(--color-text); font-family: var(--font-body); font-size: 0.875rem; font-weight: var(--weight-strong);
  letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color var(--dur-fast) ease;
}
.site-nav__link:hover, .site-nav__trigger[aria-expanded="true"] { color: var(--color-ink); }
.site-nav__link[aria-current="page"], .site-nav__group[data-active="true"] > .site-nav__trigger { color: var(--color-ink); }

/* The Q stroke: the lower bowl of a Q with its short diagonal tail, drawn left→right under the
   current page (accent) and on hover (brass). Pure CSS: ::after is the bowl, ::before the tail. */
.site-nav__link::after, .site-nav__link::before {
  content: ""; position: absolute; pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-base) var(--ease-trace);
}
.site-nav__link::after {
  left: 50%; bottom: 3px; width: 18px; height: 6px; margin-left: -9px;
  border: 1.5px solid var(--color-detail); border-top: 0; border-radius: 0 0 10px 10px;
}
.site-nav__link::before {
  left: calc(50% + 5px); bottom: 0; width: 7px; height: 1.5px; border-radius: 1px;
  background: var(--color-detail); transform: rotate(38deg); transform-origin: left center;
  transition-delay: 0s;
}
.site-nav__link:hover::after, .site-nav__link:hover::before { clip-path: inset(0 0 0 0); }
.site-nav__link:hover::before { transition-delay: 120ms; }
/* One indicator at a time: an open trigger shows its state with the darker label and the turned
   chevron, so it does not also draw the stroke beside the current page's (the active group's
   trigger keeps its accent stroke via the rules below). */
.site-nav__trigger[aria-expanded="true"]:not(:hover)::after, .site-nav__trigger[aria-expanded="true"]:not(:hover)::before { clip-path: inset(0 100% 0 0); }
.site-nav__link[aria-current="page"]::after, .site-nav__group[data-active="true"] > .site-nav__trigger::after,
.site-nav__link[aria-current="page"]::before, .site-nav__group[data-active="true"] > .site-nav__trigger::before { clip-path: inset(0 0 0 0); }
.site-nav__link[aria-current="page"]::after, .site-nav__group[data-active="true"] > .site-nav__trigger::after { border-color: var(--color-accent); border-width: 2px; border-top: 0; }
.site-nav__link[aria-current="page"]::before, .site-nav__group[data-active="true"] > .site-nav__trigger::before { background: var(--color-accent); height: 2px; }
/* Trigger strokes sit under the label, not under the chevron. */
.site-nav__trigger::after { left: calc(50% - 7px); }
.site-nav__trigger::before { left: calc(50% - 2px); }

.site-nav__chevron { flex: none; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast) ease; }
.site-nav__trigger[aria-expanded="true"] .site-nav__chevron { transform: rotate(180deg); }

/* Small status tag inside a menu item (e.g. Early access). */
.site-nav__tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; vertical-align: 1px;
  border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted);
}

/* Dropdown panels */
.site-nav__panel {
  position: absolute; top: calc((var(--header-h) + 100%) / 2 + 1px); left: 50%; z-index: 10;
  width: 320px; padding: 10px;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop);
  transform: translate(-50%, 0);
}
.site-nav__panel--services { width: min(580px, calc(100vw - 2 * var(--gutter))); }
.site-nav__panel--product { width: 340px; left: 0; transform: none; }
.site-nav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
/* Open: fade in and settle 6px over --dur-base with the decelerating curve; close: quicker
   (--dur-fast), then hidden once faded (visibility waits for the fade, so it never flickers).
   The panel's top edge sits on the header's bottom edge (the trigger is centred in the bar), so it
   never cuts the scrolled-state rule; the ::before bridge spans that gap and, with the 180ms hover
   grace in site-nav.js, keeps the menu open while the pointer crosses it. */
.js .site-nav__panel { visibility: hidden; opacity: 0; translate: 0 -6px; }
.js .site-nav__group[data-open="true"] > .site-nav__panel { visibility: visible; opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .site-nav__panel { transition: opacity var(--dur-fast) ease, translate var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); }
  .js .site-nav__group[data-open="true"] > .site-nav__panel { transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out), visibility 0s; }
}
html:not(.js) .site-nav__panel { display: none; }
html:not(.js) .site-nav__group:hover > .site-nav__panel, html:not(.js) .site-nav__group:focus-within > .site-nav__panel { display: block; }
.site-nav__panel-label {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 10px 8px; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted);
}
.site-nav__panel-label::after { content: ""; flex: 1; height: 1px; background: var(--color-line-fine); opacity: 0.6; }
.site-nav__menu { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.site-nav__panel--services .site-nav__menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-nav__menu a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 1px;
  min-height: 44px; padding: 9px 10px; border-radius: var(--radius-s);
  color: var(--color-ink); text-decoration: none;
  transition: background-color var(--dur-instant) ease;
}
.site-nav__menu a > :not(.site-nav__item-index) { grid-column: 2; }
.site-nav__menu a:not(:has(.site-nav__item-index)) { grid-template-columns: minmax(0, 1fr); }
.site-nav__menu a:not(:has(.site-nav__item-index)) > * { grid-column: 1; }
.site-nav__menu a:hover, .site-nav__menu a:focus-visible { background: var(--color-surface-2); color: var(--color-ink); }
.site-nav__menu a[aria-current="page"] { background: var(--color-accent-soft); }
.site-nav__menu a[aria-current="page"] .site-nav__item-title { color: var(--color-ink); }
.site-nav__item-index { grid-row: 1 / span 2; padding-top: 2px; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: var(--weight-label); color: var(--color-detail-ink); }
.site-nav__item-title { font-weight: var(--weight-strong); font-size: 0.9rem; line-height: 1.35; }
.site-nav__item-meta { font-size: 0.78rem; line-height: 1.4; color: var(--color-text-muted); }
.site-nav__menu-all { grid-column: 1 / -1; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-line); }
.site-nav__mobile-cta { display: none; }

/* Right-hand actions */
.site-header__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.site-signin {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 10px;
  border-radius: var(--radius-s);
  color: var(--color-text); font-size: 0.875rem; font-weight: var(--weight-strong); text-decoration: none; white-space: nowrap;
}
.site-signin:hover { color: var(--color-ink); text-decoration: underline; }
.site-cta { white-space: nowrap; }
.site-menu-toggle { display: none; }

/* Tight desktop (1025–1279px): narrow the spacing before anything wraps. */
@media (max-width: 1279px) and (min-width: 1025px) {
  .site-nav__link { padding-inline: 8px; }
  .site-header__inner { gap: 10px; }
  .site-brand__word { font-size: 0.92rem; letter-spacing: 0.15em; }
}
@media (max-width: 1139px) and (min-width: 1025px) {
  .site-signin { padding-inline: 6px; }
  .site-header__actions { gap: 6px; }
}

/* ------------------------------------------------------------------ mobile & tablet bar + drawer
   Designed for touch first: a 64px bar keeping the animated Q, a theme toggle and a labelled menu
   button; the drawer slides in from the right over a scrim, holds large (≥48px) targets, both
   menus, the primary CTA and sign-in. Focus is trapped while it is open (site-nav.js). */

@media (max-width: 1024px) {
  :root { --header-h: 64px; }
  /* backdrop-filter would make the header the containing block of the fixed drawer. */
  .site-header, .site-header[data-scrolled="true"] { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--color-bg); border-bottom-color: var(--color-line); }
  .site-header__inner { gap: 10px; }
  .site-header__actions { margin-left: auto; gap: 8px; }
  .icon-btn { width: 44px; height: 44px; }
  .site-header__actions .site-signin, .site-header__actions .site-cta { display: none; }
  .site-menu-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    width: auto; height: 44px; padding: 0 14px 0 16px;
    font-size: 0.875rem; font-weight: var(--weight-strong);
  }
  .site-menu-toggle__bars { display: grid; gap: 5px; width: 18px; }
  .site-menu-toggle__bars span { display: block; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform var(--dur-fast) ease; }
  .site-menu-toggle__bars span:nth-child(2) { width: 12px; justify-self: end; }
  .site-menu-toggle[aria-expanded="true"] .site-menu-toggle__bars span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
  .site-menu-toggle[aria-expanded="true"] .site-menu-toggle__bars span:nth-child(2) { width: 18px; transform: translateY(-3.25px) rotate(-45deg); }
  .site-menu-toggle[aria-expanded="true"] { background: var(--color-surface); border-color: var(--color-line-strong); }

  /* Scrim behind the drawer (a click on it closes the menu). */
  .js .site-header::before {
    content: ""; position: fixed; inset: var(--header-h) 0 0 0; z-index: 0;
    background: color-mix(in srgb, var(--color-band-deep) 46%, transparent);
    opacity: 0; visibility: hidden; transition: opacity var(--dur-base) ease, visibility 0s linear var(--dur-base);
  }
  .js .site-header[data-menu="open"]::before { opacity: 1; visibility: visible; transition: opacity var(--dur-base) ease, visibility 0s; }

  .js .site-nav {
    position: fixed; top: var(--header-h); right: 0; bottom: 0; z-index: 1;
    width: min(100%, 440px);
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 20px var(--gutter) calc(28px + env(safe-area-inset-bottom));
    background: var(--color-bg); border-left: 1px solid var(--color-line);
    visibility: hidden; transform: translateX(16px); opacity: 0;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) ease, visibility 0s linear var(--dur-base);
  }
  .js .site-header[data-menu="open"] .site-nav { visibility: visible; transform: none; opacity: 1; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) ease, visibility 0s; }
  html:not(.js) .site-nav { display: none; }

  .site-nav__drawer-label {
    display: flex; align-items: center; gap: 12px; margin: 0 0 6px;
    font-family: var(--font-mono); font-size: 0.6875rem; font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted);
  }
  .site-nav__drawer-label::after { content: ""; flex: 1; height: 1px; background: var(--color-line-fine); opacity: 0.7; }

  .site-nav__list { display: grid; align-items: stretch; counter-reset: nav; }
  .site-nav__item {
    counter-increment: nav;
    display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: center;
    border-bottom: 1px solid var(--color-line);
  }
  .site-nav__item::before {
    content: counter(nav, decimal-leading-zero);
    font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-detail-ink);
  }
  .site-nav__link {
    width: 100%; justify-content: space-between;
    min-height: 56px; padding: 12px 0; border-radius: 0;
    font-size: 1.25rem; font-weight: var(--weight-heading); letter-spacing: -0.015em; color: var(--color-ink);
  }
  .site-nav__chevron { width: 16px; height: 16px; }
  /* Mobile Q stroke: no hover, only the current page, set at the start of the label. */
  .site-nav__link:hover::after, .site-nav__link:hover::before { clip-path: inset(0 100% 0 0); }
  .site-nav__link::after { left: 0; margin-left: 0; bottom: 8px; }
  .site-nav__link::before { left: 13px; bottom: 5px; }
  .site-nav__trigger::after { left: 0; }
  .site-nav__trigger::before { left: 13px; }
  .site-nav__trigger[aria-expanded="true"]::after, .site-nav__trigger[aria-expanded="true"]::before { clip-path: inset(0 100% 0 0); }
  .site-nav__link[aria-current="page"]::after, .site-nav__group[data-active="true"] > .site-nav__trigger::after,
  .site-nav__link[aria-current="page"]::before, .site-nav__group[data-active="true"] > .site-nav__trigger::before { clip-path: inset(0 0 0 0); }

  /* Accordions */
  .js .site-nav__panel, .js .site-nav__group[data-open="true"] > .site-nav__panel {
    position: static; grid-column: 1 / -1; width: auto; padding: 0 0 14px; border: 0; box-shadow: none; background: none;
    transform: none; translate: none; opacity: 1; visibility: visible; transition: none;
  }
  .js .site-nav__panel { display: none; }
  .js .site-nav__group[data-open="true"] > .site-nav__panel { display: block; }
  .site-nav__panel::before { display: none; }
  .site-nav__panel-label { margin: 0 0 6px 2.25rem; }
  .site-nav__panel-label::after { display: none; }
  .site-nav__panel--services .site-nav__menu { grid-template-columns: minmax(0, 1fr); }
  .site-nav__menu { padding-left: 2.25rem; }
  .site-nav__menu a { min-height: 48px; padding: 10px 12px 10px 0; align-content: center; }
  .site-nav__menu a:hover { background: none; }
  .site-nav__menu a[aria-current="page"] { background: none; box-shadow: inset 2px 0 0 var(--color-accent); padding-left: 12px; }
  .site-nav__menu-all { border-top-color: var(--color-line); }

  .site-nav__mobile-cta { display: grid; gap: 10px; margin-top: 22px; }
  .site-nav__mobile-cta .btn { width: 100%; min-height: 52px; }
  .site-nav__mobile-meta { margin: 8px 0 0; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--color-text-muted); }
}
@media (min-width: 640px) and (max-width: 1024px) {
  .site-header__actions .site-cta { display: inline-flex; }
}
/* Drawer accordions: an opening section fades in and settles 4px instead of snapping open.
   Its starting frame only holds while the animation runs, so content is never left hidden. */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .js .site-nav__group[data-open="true"] > .site-nav__panel { animation: site-nav-accordion var(--dur-base) var(--ease-out); }
}
@keyframes site-nav-accordion { from { opacity: 0; translate: 0 -4px; } }
@media (max-width: 400px) {
  .site-header__inner { gap: 6px; }
  .site-menu-toggle { padding: 0 12px; gap: 8px; }
  .site-brand { gap: 8px; }
  .site-brand__mark, .site-brand > .qmark { width: 28px; font-size: 28px; }
  .site-brand__word { font-size: 0.86rem; letter-spacing: 0.14em; }
  .site-brand__word span { font-size: 0.5rem; letter-spacing: 0.2em; }
}
@media (max-width: 350px) {
  /* Visually hidden, still the button's accessible name. */
  .site-menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-menu-toggle { width: 44px; padding: 0; justify-content: center; }
}

/* ------------------------------------------------------------------ footer
   A graphite band in both themes; cyber-bg.js draws the Q motif behind the content. */

.site-footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--color-band); color: var(--color-on-band-muted);
  font-size: var(--text-small); line-height: var(--leading-small);
}
.site-footer__inner {
  position: relative; z-index: 1;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--gutter) 24px;
}
.site-footer a { color: var(--color-on-band); text-decoration: none; }
.site-footer a:hover { color: var(--color-on-band-signal); text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--color-on-band-signal); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); }
.site-brand--footer, .site-brand--footer:hover { color: var(--color-on-band); text-decoration: none; }
.site-footer .site-brand:hover { text-decoration: none; }
.site-brand--footer .site-brand__word span { color: var(--color-on-band-muted); }
.site-brand--footer .site-brand__mark, .site-brand--footer > .qmark { width: 34px; font-size: 34px; color: var(--color-on-band); }
.site-footer__summary { max-width: 44ch; margin: 16px 0 18px; font-size: 0.9375rem; color: var(--color-on-band-muted); }
.site-footer__details { display: flex; flex-wrap: wrap; gap: 4px 32px; }
.site-footer__label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-on-band-muted);
}
.site-footer__address { margin-bottom: 14px; line-height: 1.65; }
.site-footer__contact { margin: 0 0 14px; line-height: 1.65; overflow-wrap: anywhere; }
.site-footer__phone { color: var(--color-on-band); font-variant-numeric: tabular-nums; }
.site-footer__social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-footer__social a {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid color-mix(in srgb, var(--color-on-band) 26%, transparent); border-radius: var(--radius-pill);
}
.site-footer__social a:hover { border-color: var(--color-on-band-signal); }
.site-footer__social svg { width: 18px; height: 18px; fill: currentColor; }
.site-footer__social .icon-outline { fill: none; stroke: currentColor; stroke-width: 1.8; }
.site-footer__social .icon-outline .icon-dot { fill: currentColor; stroke: none; }
.site-footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; }
.site-footer__heading {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--color-on-band) 16%, transparent);
  color: var(--color-on-band); font-family: var(--font-mono); font-size: 0.75rem; font-weight: var(--weight-label);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.site-footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.site-footer__col a { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 0; color: var(--color-on-band-muted); }
.site-footer__col a:hover, .site-footer__col a[aria-current="page"] { color: var(--color-on-band); }
.site-footer__note {
  margin: clamp(28px, 4vw, 40px) 0 0; padding: 4px 0 4px 16px;
  border-left: 2px solid var(--color-line-fine);
  max-width: 110ch; font-size: 0.8125rem; line-height: 1.6; color: var(--color-on-band-muted);
}
.site-footer__note strong { color: var(--color-on-band); font-weight: var(--weight-strong); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  margin-top: 20px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--color-on-band) 16%, transparent);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em;
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-band-muted); }

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .site-footer__col a { min-height: 44px; }
}
@media (max-width: 360px) {
  .site-footer__nav { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ reveal motion */

@media (prefers-reduced-motion: no-preference) {
  /* Movement only: content keeps full opacity (and contrast) at every point of the reveal. */
  .reveal-ready [data-reveal]:not([data-revealed]) { transform: translateY(14px); }
  .reveal-ready [data-reveal] { transition: transform 0.6s var(--ease-out); }
}

@media print {
  .reveal-ready [data-reveal] { transform: none !important; }
  .site-header { position: static; }
  .site-header__actions, .site-nav { display: none !important; }
}

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

@media (forced-colors: active) {
  .btn, .icon-btn, .site-nav__panel { border: 1px solid CanvasText; }
  .site-nav__link[aria-current="page"]::after { border-color: Highlight; }
  .site-nav__link[aria-current="page"]::before { background: Highlight; }
}