/* forterisrisk.com — shared stylesheet, v5 look (November 2026).

   Carries the Forteris Platform v5 design onto the public site: the always-ink
   masthead with the guilloche mark, a sticky pill navbar, the turning
   guilloche rings fixed behind the content, ruled strips, open hover lists,
   raised tiles with seals, pill buttons and soft corners.

   Tokens follow the Platform v5 stylesheet (forteris-platform app/globals.css)
   with these differences from brand/brand-tokens.md, called out on purpose:
     --surface-2 #E6ECE8   (site had #E1E8E3; that value is now --hover, as on the Platform)
     --mute-2    #6E7D74   new; decoration and large text only (3.8:1 on paper, below AA for body text)
     --field     #728078   new; form-control borders, 3.6:1 or better on every surface (WCAG 1.4.11)
     --ok/--warn/--info and their -bg tints: new on the site, from the Platform
     --err       #A3341F   kept from the site (the Platform's --crit #B23B2E is lighter)
     radii 10/16/20px and pill buttons replace the site's 2px corners.
   No dark mode: the site stays light; dark surfaces are the masthead, the
   footer and the technology band, as before.

   The comparison, guide and answer pages carry the same chrome rules inline
   (forteris-leadgen lib/styles.js); keep the two in step. */

:root {
  --paper: #edf1ee;
  --surface: #f6f8f6;
  --surface-2: #e6ece8;
  --hover: #e1e8e3;
  --line: #bdc7c1;
  --line-soft: #d2dad5;
  --line-strong: #a9b6af;
  --field: #728078;
  --ink: #0e231a;
  --ink-2: #2b3d35;
  --mute: #47574f;
  --mute-2: #6e7d74;
  --accent: #007654;
  --accent-soft: #e2eee8;
  --accent-line: #b7d4c6;

  --ok: #2f6b46;
  --ok-bg: #e2eee7;
  --warn: #8a5a00;
  --warn-bg: #f3eddc;
  --err: #a3341f;
  --err-bg: #f6e4e1;
  --info: #41629f;
  --info-bg: #e5eaf2;
  --gold: #edb25a;

  /* Always-dark surfaces (masthead, footer, technology band). */
  --night: #0e231a;
  --night-2: #15291f;
  --night-line: #2e4439;
  --night-mute: #acbcb3;
  --night-green: #88d0b0;
  --night-blue: #a5bfec;
  --night-accent: #4fb98c;

  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 10px;
  --radius-card: 16px;
  --radius-tile: 20px;
  --pill: 999px;
  --shadow: 0 1px 2px rgba(14, 35, 26, 0.06);
  --shadow-raise: 0 14px 32px rgba(14, 35, 26, 0.12);
  --nav-glass: rgba(237, 241, 238, 0.9);

  --wrap: 1360px;
  --gutter: clamp(20px, 3vw, 40px);
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
/* Below 1,080 px the navbar is not sticky, so nothing covers a focused element. */
@media (max-width: 1080px) { html { scroll-padding-top: 12px; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; }
/* Scripts hide things with the hidden attribute (the MSB check's calendar
   fields, its result); a component's own display must never undo that. */
[hidden] { display: none !important; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--info); outline-offset: 3px; }
::selection { background: var(--accent-line); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  padding: 12px 20px; border-radius: var(--pill);
  background: var(--ink); color: var(--paper);
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--paper); }

main { position: relative; z-index: 1; display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 68ch; }

/* ---------- The guilloche rings ----------
   Fixed in the centre of the screen, behind the content, at a strength that
   keeps text readable; reading pages (guides, answers, legal) take them
   fainter. Decorative only, and still for anyone who asks for reduced motion. */

@keyframes fx-turn { to { transform: rotate(360deg); } }
@keyframes fx-turn-rev { to { transform: rotate(-360deg); } }
.page-rings {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(100vw, 1180px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: 0.24;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, transparent 0, transparent 22%, #000 58%);
  mask-image: radial-gradient(circle, transparent 0, transparent 22%, #000 58%);
}
.page-rings > div { position: absolute; inset: 0; }
.page-rings img { width: 100%; height: 100%; display: block; }
.fx-turn { animation: fx-turn 420s linear infinite; }
.fx-turn-rev { animation: fx-turn-rev 300s linear infinite; }
.reading .page-rings { opacity: 0.12; }
@media (prefers-reduced-motion: reduce) { .fx-turn, .fx-turn-rev { animation: none !important; } }
@media print { .page-rings { display: none !important; } }

/* ---------- Masthead: always ink ---------- */

.masthead { position: relative; z-index: 40; background: var(--night); color: #edf1ee; }
.masthead-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 12px 18px;
}
.masthead-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; color: #edf1ee; text-decoration: none; }
.masthead-brand:hover { color: #edf1ee; }
.masthead-brand img { width: 38px; height: 38px; display: block; flex: none; }
.masthead-brand:focus-visible, .masthead a:focus-visible, .masthead button:focus-visible { outline-color: var(--night-blue); }
/* The wordmark: Archivo at 125% width, weight 700, 0.16em tracking, as text. */
.wordmark { display: block; font-family: var(--sans); font-size: 17px; font-weight: 700; font-stretch: 125%; letter-spacing: 0.16em; line-height: 1; white-space: nowrap; }
.wordmark span { color: var(--night-accent); }
.masthead-sub { display: block; margin-top: 6px; font-size: 11.5px; letter-spacing: 0.03em; line-height: 1; color: var(--night-mute); white-space: nowrap; }
.masthead-right { display: flex; align-items: center; gap: 10px; }

.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 84px;
  padding: 0 18px;
  border: 1px solid var(--night-line);
  border-radius: var(--pill);
  background: transparent;
  color: #edf1ee;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.menu-btn:hover { border-color: var(--night-accent); }

/* ---------- Sticky pill navbar ---------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--nav-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.navbar-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 9px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 2px;
}
.navlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: var(--pill);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.navlink:hover { color: var(--ink); background: var(--hover); }
.navlink[aria-current] { color: var(--paper); background: var(--ink); }
.nav-sep { width: 1px; height: 22px; margin: 0 10px; background: var(--line); flex: none; }
.nav-only-menu { display: none; }

@media (max-width: 1180px) {
  .navlink { padding: 7px 11px; font-size: 14px; }
  .nav-sep { margin: 0 6px; }
}
/* Phone and tablet: the links fold behind the Menu button. Without
   JavaScript (no .js on <html>) they stay visible as a wrapped pill row. */
@media (max-width: 1080px) {
  .js .menu-btn { display: inline-flex; }
  .masthead-right .btn.chrome { display: none; }
  .navbar { position: static; }
  .js .navbar { display: none; }
  .js .navbar.is-open { display: block; }
  .js .navbar-inner { flex-direction: column; align-items: stretch; gap: 2px; padding: 12px var(--gutter) 20px; }
  .js .navlink { min-height: 48px; padding: 10px 16px; font-size: 17px; }
  .js .nav-sep { width: auto; height: 1px; margin: 8px 0; }
  .js .nav-only-menu { display: flex; }
  .nav-only-menu .btn { width: 100%; }
}
@media (max-width: 720px) {
  .masthead-inner { padding: 12px var(--gutter); }
  .masthead-brand img { width: 34px; height: 34px; }
  .wordmark { font-size: 15px; }
  .masthead-sub { font-size: 10.5px; }
  .masthead-right .btn { display: none; }
}
@media (max-width: 360px) {
  .masthead-sub { display: none; }
}

/* ---------- Type ---------- */

.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--accent);
}
.display {
  margin: 0;
  font-weight: 400;
  font-size: clamp(42px, 6.2vw, 88px);
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.h-page {
  margin: 0;
  font-weight: 400;
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.h-section {
  margin: 0;
  font-weight: 400;
  font-size: clamp(30px, 3.5vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lede { margin: 0; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
/* The short green rule: the signature separator, never a full-width hr. */
.rule-mark { display: block; width: 48px; height: 2px; background: var(--accent); margin: 18px 0 0; border: 0; }

/* ---------- Buttons: pills ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.ghost { background: rgba(246, 248, 246, 0.7); color: var(--ink); border-color: var(--field); }
.btn.ghost:hover { background: var(--hover); color: var(--ink); border-color: var(--ink); }
.btn.lg { min-height: 52px; padding: 0 26px; font-size: 15.5px; }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn.chrome { background: transparent; color: var(--night-mute); border-color: var(--night-line); }
.btn.chrome:hover { color: #edf1ee; border-color: var(--night-accent); background: transparent; }
.btn.light { background: #edf1ee; border-color: #edf1ee; color: var(--ink); }
.btn.light:hover { background: var(--night-green); border-color: var(--night-green); color: var(--ink); }
.btn.light-ghost { background: transparent; border-color: #edf1ee; color: #edf1ee; }
.btn.light-ghost:hover { background: #edf1ee; color: var(--ink); }
.btn[disabled] { cursor: progress; opacity: 0.72; }
.btn[disabled]:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.primary[disabled]:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  cursor: pointer;
}
.btn-text:hover { color: var(--accent); text-decoration-color: currentColor; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
/* Narrow phones: long labels wrap inside their pills instead of overflowing. */
@media (max-width: 480px) { .btn { white-space: normal; padding-top: 10px; padding-bottom: 10px; } }
/* Sending: a small turning ring inside the disabled submit button. */
form[aria-busy="true"] button[type="submit"]::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: fx-turn 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { form[aria-busy="true"] button[type="submit"]::before { animation: none; border-right-color: currentColor; opacity: 0.6; } }

/* ---------- Cards, tiles, strips, lists ---------- */

.card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-card); box-shadow: var(--shadow); }

/* Raised tiles: no border, the seal, and a lift on hover. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 20px;
  border: 0;
  border-radius: var(--radius-tile);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.tile:hover, button.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-raise); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { a.tile:hover, button.tile:hover { transform: none; } }
.tile-head { display: flex; align-items: center; gap: 14px; width: 100%; }
.tile-head img { width: 56px; height: 56px; display: block; flex: none; }
.tile-name { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.tile-go { margin-left: auto; font-size: 18px; color: var(--accent); }
.tile p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }

/* Ruled strip (the Platform's KPI strip): hairlines above, below and between,
   the label above the value. */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.strip > * { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; box-shadow: -1px 0 0 var(--line-soft); }
.strip .l { font-size: 13px; font-weight: 500; color: var(--mute); }
.strip .n { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }

/* Open hover lists: hairline rows that take a soft fill under the pointer. */
.olist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.olist > li { border-bottom: 1px solid var(--line-soft); }
.olist a.row, a.olist-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 24px;
  padding: 16px 14px;
  margin: 0 -14px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s;
}
.olist a.row:hover, a.olist-row:hover { background: var(--hover); color: var(--ink); }

/* Section heads */
.sec-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 20px 64px; align-items: end; }
.sec-head .lede { max-width: 60ch; }

/* ---------- Notices ---------- */

.notice {
  margin: 0;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}
.notice strong { color: var(--ink); font-weight: 650; }
.notice[data-tone="ok"] { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.notice[data-tone="warn"] { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.notice[data-tone="err"] { background: var(--err-bg); border-color: transparent; color: var(--err); }
.notice[data-tone="info"] { background: var(--info-bg); border-color: transparent; color: var(--info); }

/* ---------- FAQ ---------- */

.faq details { border-bottom: 1px solid var(--line-soft); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 2px;
  list-style: none;
  cursor: pointer;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--hover);
  color: var(--accent);
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; background: var(--ink); color: var(--paper); }
.faq summary:hover { color: var(--accent); }

/* ---------- Forms (contact-form.js and msb-check.js drive the states) ---------- */

.inquiry {
  position: relative;
  padding: clamp(22px, 3vw, 40px);
  border-radius: var(--radius-tile);
  background: var(--surface);
  box-shadow: var(--shadow-raise);
  scroll-margin-top: 80px;
}
.inquiry-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 10px 48px; align-items: baseline; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.inquiry h2, .inquiry h3 { margin: 0; font-weight: 500; font-size: clamp(23px, 2.2vw, 30px); line-height: 1.12; letter-spacing: -0.02em; }
.inquiry-intro p, .inquiry-done p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 56ch; text-wrap: pretty; }
.inquiry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.inquiry-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.inquiry-field.wide { grid-column: 1 / -1; }
.inquiry-field label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.inquiry-field label .opt { font-weight: 400; color: var(--mute); }
.inquiry-field input, .inquiry-field select, .inquiry-field textarea {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 11px 14px;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background-color: #fbfcfb;
  border: 1px solid var(--field);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.inquiry-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  text-overflow: ellipsis;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.inquiry-field textarea { min-height: 108px; resize: vertical; }
.inquiry-field ::placeholder { color: var(--mute); opacity: 0.85; }
.inquiry-field input:hover, .inquiry-field select:hover, .inquiry-field textarea:hover { border-color: var(--ink); }
.inquiry-field input:focus-visible, .inquiry-field select:focus-visible, .inquiry-field textarea:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
  border-color: var(--ink);
}
/* Field error: red border and an inset second line, so it is not colour alone
   (the status line under the form names the problem in words). */
.inquiry-field [aria-invalid="true"] { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); background-color: #fff8f6; }
.inquiry-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Room for Cloudflare's bot check: contact-form.js puts the widget here,
   just above the submit row, when a site key is set. */
.inquiry-turnstile { margin-top: 22px; min-height: 65px; }
.inquiry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 26px; }
.inquiry-note { margin: 0; flex: 1 1 280px; max-width: 60ch; font-size: 13.5px; line-height: 1.55; color: var(--mute); }
.inquiry-status { margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.inquiry-status:empty { margin: 0; }
.inquiry-status.is-error {
  padding: 12px 16px 12px 44px;
  border-radius: 12px;
  background: var(--err-bg);
  color: var(--err);
  font-weight: 500;
  position: relative;
}
.inquiry-status.is-error::before {
  content: "!";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--err);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.inquiry-done {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 22px 70px;
  border-radius: var(--radius-card);
  background: var(--ok-bg);
  position: relative;
}
.inquiry-done::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 24px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.inquiry-done h3 { margin: 0; font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); }
.inquiry-done p { color: var(--ink-2); }
.inquiry-done:focus { outline: none; }
.inquiry-done:focus-visible { outline: 2px solid var(--info); outline-offset: 3px; }
@media (max-width: 640px) {
  .inquiry-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .inquiry-actions .btn { width: 100%; }
  .inquiry-done { padding: 70px 20px 20px; }
  .inquiry-done::before { left: 20px; top: 22px; }
}

/* ---------- Footer: always ink ---------- */

.site-foot { position: relative; z-index: 1; background: var(--night); color: #edf1ee; }
.site-foot-inner { max-width: var(--wrap); margin: 0 auto; padding: clamp(48px, 5vw, 72px) var(--gutter) 36px; display: flex; flex-direction: column; gap: 36px; }
.site-foot-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px 48px; align-items: start; }
.site-foot-brand { display: flex; align-items: center; gap: 14px; }
.site-foot-brand img { width: 52px; height: 52px; display: block; flex: none; }
.site-foot-brand .wordmark { font-size: 19px; }
.site-foot-sub { display: block; margin-top: 7px; font-size: 12px; letter-spacing: 0.03em; color: var(--night-mute); line-height: 1; }
.site-foot-addr { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.55; color: #edf1ee; font-style: normal; }
.site-foot-addr a { color: #edf1ee; }
.site-foot-addr a:hover { color: var(--night-green); }
.site-foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; align-content: start; }
.site-foot-links a { display: block; padding: 6px 10px; margin: 0 -10px; border-radius: 8px; color: #edf1ee; font-size: 15px; text-decoration: none; }
.site-foot-links a:hover { background: var(--night-2); color: var(--night-green); }
.site-foot p.disclaimer, .site-foot-disclaimer { margin: 0; max-width: 92ch; font-size: 13.5px; line-height: 1.65; color: var(--night-mute); }
.site-foot-disclaimer a, .site-foot p.disclaimer a { color: #edf1ee; }
.site-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 22px; border-top: 1px solid var(--night-line); font-size: 13.5px; color: var(--night-mute); }
.site-foot-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-foot-legal a { color: var(--night-mute); text-decoration: none; }
.site-foot-legal a:hover { color: #edf1ee; text-decoration: underline; }
.site-foot a:focus-visible { outline-color: var(--night-blue); }
@media (max-width: 960px) { .site-foot-top { grid-template-columns: 1fr; } }

/* ---------- Print ---------- */

@media print {
  .masthead, .navbar, .skip-link, .menu-btn { display: none !important; }
  body { background: #fff; }
  .site-foot { background: #fff; color: #000; }
  .site-foot-links, .site-foot-legal { display: none; }
  .site-foot p.disclaimer, .site-foot-disclaimer, .site-foot-bottom { color: #333; }
}