/* ==========================================================================
   MAVORIX MEDIA design system
   Ported from the MAV-Web build (app/globals.css), which is the reviewed
   original for the 2026-07 rebrand: charcoal M monogram with gold counter-seams
   on white. The class catalog below is the contract the page templates build
   against, and it is registered in MAV-Web's CONVENTIONS.md. A class added here
   is added there in the same change, or the two properties drift.

   This file is NOT loaded by coming_soon.html. The holding page is finished and
   live and keeps main.css and coming-soon.css. Leave both of those alone.

   Concept: "dress uniform." Parade-white field, charcoal wool ink, gold worn
   as insignia: sparse, earned, never wallpaper. The brand's one repeated
   device is the SEAM, the thin gold stroke that runs inside the monogram's
   charcoal strokes. It appears at three scales only: as a small slanted
   marker glyph in lists and labels, as a slanted chip holding a number or
   initials, and as the paired charcoal-and-gold rule. Each page gets at most
   one charcoal "dress panel" band (.sec--deep), which is where the site puts
   its chest out; everything else stays light. Nothing else in the system is
   decorative.

   Rules for anyone extending this file:
     1. Mobile first. Media queries live inside the section they modify, never
        collected at the bottom.
     2. No new hex literals in a template. If a color is needed, it is a token
        here. The CSP on this origin is style-src 'self' with no
        'unsafe-inline', so an inline style attribute is dropped outright: a
        style that is not in this file does not exist.
     3. Contrast: every ink token clears WCAG AA (4.5:1) on every surface in
        this file, at any size, on the light set and on the dress panel set.
        --gold-ink is the tightest light-side pairing at 5.01 on --bg-3. Raw
        --gold (#d4af37) is a GRAPHIC color on light surfaces: fills, rules,
        plates with dark ink on top. It is never text on a light surface
        (2.03 on --bg). It becomes text-safe only inside .sec--deep, where
        the panel remaps the ink tokens. Ratios are tabulated in the token
        block below; a new ink token or a new surface joins that table,
        computed, in the same change.

   Section index
     01  Tokens
     02  Reset and base elements
     03  Layout primitives
     04  Typography and section heads
     05  Seam system
     06  Buttons and links
     07  Header and navigation
     08  Hero
     09  Cards and grids
     10  Pillars (why us)
     11  Steps (process)
     12  Marker lists
     13  Proof, testimonials, honest empty states
     14  FAQ
     15  Lead section and forms
     16  Booking CTA
     17  Insights: post grid and article
     18  Breadcrumbs and small parts
     19  Footer
     20  Mobile call bar
     21  Focus, motion, forced colors, print
   ========================================================================== */

/* ==========================================================================
   01  TOKENS
   Brand constants are fixed. Everything below the brand block is this site's
   own scale and may be tuned, but only here.
   ========================================================================== */

:root {
  /* --- Brand surfaces (fixed): parade white, warm-neutral, never cream --- */
  --bg: #fbfbf9;
  --bg-2: #f3f3ee;
  --bg-3: #ebebe4;
  --card: #ffffff;
  --card-2: #f6f6f2;
  --ink: #1d1e23;
  --ink-2: #45464e;
  --ink-3: #5f6169;
  --line: rgba(29, 30, 35, 0.12);

  /* Contrast ratios, sRGB relative luminance. AA body text needs 4.5:1.
     Every ink row clears it on every light surface:

                 --bg    --bg-2   --bg-3   --card  --card-2
       --ink      16.06   14.95    13.89    16.64   15.36
       --ink-2     9.05    8.43     7.83     9.38    8.66
       --ink-3     5.96    5.55     5.16     6.18    5.70
       --gold-ink  5.79    5.39     5.01     5.99    5.53

     Raw --gold measures 2.03 on --bg: graphic use only on light surfaces.
     --gold-ink is the gold that is allowed to speak. The dress panel set is
     tabulated beside the .sec--deep block below. */

  /* --- Brand metals (fixed): the monogram's gold, unchanged by the rebrand --- */
  --gold: #d4af37;
  --gold-hi: #f5d67a;
  --gold-lo: #a9791a;
  --gold-grad: linear-gradient(135deg, #a9791a 0%, #f5d67a 42%, #d4af37 66%, #8f6410 100%);
  --gold-soft: rgba(212, 175, 55, 0.16);

  /* Bullion: gold darkened until it may be text on the light surfaces.
     Worst pairing 5.01 on --bg-3, so it is safe everywhere, like the inks. */
  --gold-ink: #7c5f13;

  /* The bullion gradient, for LARGE text only (3:1 large-text floor: the
     brightest stop, #a17820, measures 3.36 on --bg-3). Display lines and the
     big figures use it; nothing at body size does. Inside .sec--deep it is
     remapped to the bright brand gradient. */
  --gold-ink-grad: linear-gradient(135deg, #5e4708 0%, #a17820 45%, #8a6a15 72%, #4f3c06 100%);

  /* Dark ink for text sitting ON a gold plate, immune to the panel remap. */
  --ink-on-gold: #1d1e23;

  --silver: #6c737e;
  --silver-grad: linear-gradient(135deg, #565b63 0%, #a7adb8 50%, #6c737e 100%);
  /* Steel: the quiet structural grey (pillar spines, rails, separators). */
  --steel: #b9bbc2;

  /* --- The dress panel (fixed): the one charcoal band per page --- */
  --panel: #1e1f26;
  --panel-2: #262730;
  --panel-card: #2a2b33;

  /* --- The signature shape (fixed): the slanted seam chip --- */
  --chip-clip: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);

  /* --- Derived structure tones (this site's own) --- */
  --line-2: rgba(29, 30, 35, 0.2);
  --line-gold: rgba(169, 121, 26, 0.45);
  --scrim: rgba(29, 30, 35, 0.5);

  /* --- Type stacks. MAV-Web loads Cinzel and Public Sans through next/font.
         This origin runs a CSP with font-src 'self' and there is no self-hosted
         copy of either face, so there is no webfont to load and no external
         escape hatch: both stacks resolve on the machine. The named families
         stay at the head so an installed copy is used where there is one, and
         the fallbacks hold the register, a glyphic serif for the display face
         and the system sans for body. Self-hosting the two families under
         static/fonts/ with @font-face is a licensing decision for the owner;
         the day it lands, these two declarations are the only change. --- */
  --font: "Public Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Cinzel", "Times New Roman", Georgia, serif;

  /* --- Type scale. Cinzel runs wide in caps, so the display sizes sit a
         step under the old condensed-face scale. --- */
  --t-display: clamp(2.15rem, 5.4vw, 3.7rem);
  --t-h1: clamp(1.85rem, 4.4vw, 2.9rem);
  --t-h2: clamp(1.45rem, 3.1vw, 2.1rem);
  --t-h2-sub: clamp(1.4rem, 2.8vw, 1.8rem);
  --t-h3: clamp(1.08rem, 2vw, 1.3rem);
  --t-lede: clamp(1.05rem, 1.6vw, 1.25rem);
  --t-body: 1rem;
  --t-body-lg: 1.05rem;
  --t-small: 0.875rem;
  --t-label-lg: 0.95rem;
  --t-micro: 0.75rem;
  --t-label: 0.8rem;
  --t-stat: 1.6rem;
  --t-stat-lg: clamp(1.6rem, 4.5vw, 2.2rem);
  /* Tracking registers (2026-07-31 typography pass): label register wide
     (--track-label), control register moderate (--track-btn), heading
     registers subtle. Identity lockup (.brand, .crest__motto) and numeric
     tracks keep their own literals on purpose. */
  --track-label: 0.17em;
  --track-btn: 0.09em;
  --track-heading: 0.015em;
  --track-display: 0.02em;
  /* Line-height roles (2026-07-31 typography pass). */
  --lh-body: 1.65;
  --lh-article: 1.7;
  --lh-heading: 1.12;
  --lh-display: 1.08;
  --lh-label: 1.15;

  /* --- Space --- */
  --container: 1180px;
  --container-narrow: 760px;
  --pad-x: clamp(1.15rem, 4vw, 2.25rem);
  --section-y: clamp(3.25rem, 7.5vw, 6.5rem);
  --section-y-tight: clamp(2.25rem, 5vw, 4rem);
  --gap: clamp(1rem, 2.2vw, 1.5rem);
  --gap-lg: clamp(1.75rem, 4vw, 3rem);
  --flow: 1rem;

  /* Card and box padding registers (2026-07-31 spacing pass). */
  --pad-card: clamp(1.25rem, 2.6vw, 1.75rem);
  --pad-card-lg: clamp(1.25rem, 3vw, 2rem);
  --pad-box: 1.1rem 1.25rem;
  --pad-note: 0.85rem 1rem;
  --section-y-hero: clamp(2.75rem, 7vw, 5.5rem);
  --gap-split: clamp(2rem, 5vw, 4.5rem);

  /* --- Shape and depth. Light theme: shadows are soft charcoal, not black. --- */
  --radius: 8px;
  --radius-sm: 5px;
  --radius-lg: 12px;
  --shadow: 0 18px 44px -26px rgba(29, 30, 35, 0.35);
  --shadow-lift: 0 24px 54px -26px rgba(29, 30, 35, 0.42);
  --shadow-gold: 0 12px 30px -16px rgba(169, 121, 26, 0.45);
  --ring: 0 0 0 3px rgba(124, 95, 19, 0.25);

  /* --- Motion. --dur is the interaction beat; --dur-2 the slower reveal
         beat (seam grows). The crest keyframes keep literal timings: they
         are the one orchestrated sequence, recorded in CONVENTIONS 6.4,
         choreography rather than system values. (2026-07-31 motion pass) --- */
  --ease: cubic-bezier(0.22, 0.68, 0.36, 1);
  --dur: 180ms;
  --dur-2: 260ms;

  /* --- Fixed chrome heights, used for scroll offsets and call bar spacing --- */
  --hdr-h: 68px;
  --callbar-h: 60px;
}

@media (min-width: 900px) {
  :root {
    --hdr-h: 76px;
    --callbar-h: 0px;
  }
}

/* ==========================================================================
   02  RESET AND BASE ELEMENTS
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored headings clear the sticky header instead of hiding under it. */
  scroll-padding-top: calc(var(--hdr-h) + 1rem);
}

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, not hidden: hidden on body silently disables position: sticky. */
  overflow-x: clip;
}

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

a {
  color: var(--gold-ink);
  text-decoration: none;
}

a:hover {
  color: var(--ink);
}

/* Inline prose links keep an underline so they are not color-only signals. */
p a,
li a,
dd a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--line-gold);
}

p a:hover,
li a:hover,
dd a:hover {
  text-decoration-color: var(--gold-lo);
}

/* color is declared here, not inherited: an element resolves var(--ink) at
   its own level, which is what lets the .sec--deep token remap reach every
   heading inside the panel. Inherited color would freeze at the body value. */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  text-wrap: balance;
  color: var(--ink);
}

h1 {
  font-size: var(--t-h1);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
}

h2 {
  font-size: var(--t-h2);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
}

h3 {
  font-size: var(--t-h3);
}

h4 {
  font-size: var(--t-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

p {
  text-wrap: pretty;
}

ul,
ol {
  padding-left: 1.15rem;
}

strong,
b {
  color: var(--ink);
  font-weight: 600;
}

hr {
  border: 0;
  height: 1px;
  background: var(--line);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--gold-soft);
  color: var(--ink);
}

/* Accessibility helpers ---------------------------------------------------- */

.sr-only {
  position: absolute;
  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;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100vh;
  z-index: 200;
  background: var(--panel);
  color: #f4f4f6;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: 0.75rem;
  color: #f4f4f6;
}

/* ==========================================================================
   03  LAYOUT PRIMITIVES
   ========================================================================== */

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

.wrap--narrow {
  max-width: var(--container-narrow);
}

/* The main landmark. It carries no bottom reservation for the mobile call bar:
   the footer comes after it in the document, so padding here would open a gap
   above the footer and leave the footer itself under the bar. The reservation
   is on .ftr, in section 19. */
.site-main {
  display: block;
}

.sec {
  padding-block: var(--section-y);
}

.sec--tight {
  padding-block: var(--section-y-tight);
}

.sec--alt {
  background: var(--bg-2);
}

/* The dress panel: the one charcoal band a page is allowed. It remaps the
   surface and ink tokens for everything inside it, so any cataloged component
   dropped into the band re-skins itself without a variant class. The remapped
   set clears AA on every panel surface:

                    --panel  --panel-2  --panel-card
       ink (light)   14.95     13.51      12.82
       ink-2          9.34      8.45       8.01
       ink-3          5.80      5.24       4.97
       --gold         7.81      7.06       6.69
       --gold-ink     9.51      8.60       8.16   (remapped to #e3c265)

   Inside the panel, raw --gold IS text-safe, and --gold-ink-grad becomes the
   bright brand gradient, so the metal treatments light up exactly where the
   page is dark. Do not stack two panel bands on one page. */
.sec--deep {
  background: var(--panel);
  /* Re-anchor inherited color inside the panel: unclassed elements would
     otherwise inherit the light-theme ink computed at the body. */
  color: var(--ink);
  --bg: var(--panel);
  --bg-2: var(--panel-2);
  --bg-3: var(--panel-2);
  --card: var(--panel-card);
  --card-2: #31323b;
  --ink: #f4f4f6;
  --ink-2: #c2c3ca;
  --ink-3: #9899a2;
  --gold-ink: #e3c265;
  --gold-ink-grad: var(--gold-grad);
  --line: rgba(255, 255, 255, 0.14);
  --line-2: rgba(255, 255, 255, 0.24);
  --line-gold: rgba(212, 175, 55, 0.4);
  --steel: #4a4c56;
  --gold-soft: rgba(212, 175, 55, 0.12);
  --shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 24px 54px -24px rgba(0, 0, 0, 0.68);
  --ring: 0 0 0 3px rgba(227, 194, 101, 0.3);
}

/* A hairline between two same-colored sections. */
.sec--ruled {
  border-top: 1px solid var(--line);
}

/* Vertical flow: children get consistent spacing without margin guesswork. */
.stack > * + * {
  margin-top: var(--flow);
}

.stack--lg > * + * {
  margin-top: var(--gap);
}

.stack--xl > * + * {
  margin-top: var(--gap-lg);
}

.grid {
  display: grid;
  gap: var(--gap);
}

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--gap);
}

@media (min-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Asymmetric two-column: main content plus a narrower rail. */
.split {
  display: grid;
  gap: var(--gap-lg);
}

@media (min-width: 980px) {
  .split {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }

  .split--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split--rail-first > :first-child {
    order: 2;
  }
}

.center {
  text-align: center;
}

.measure {
  max-width: 68ch;
}

/* RESERVED: no consumer today. Kept as the centered pair of .measure for a
   future centered reading column. */
.measure--center {
  max-width: 68ch;
  margin-inline: auto;
}

/* ==========================================================================
   04  TYPOGRAPHY AND SECTION HEADS
   Labels (eyebrows, kickers, buttons, nav) are the utility voice: the body
   face at 600 with wide tracking. The display face is for headings and the
   big figures only, which is what keeps it special.
   ========================================================================== */

/* Small uppercase label. The ::before is the seam glyph: a charcoal stroke
   and a gold stroke, slanted like the monogram's counters. .eyebrow--plain
   drops it for places where a second glyph would be noise. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font);
  font-size: var(--t-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--gold-ink);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  transform: skewX(-16deg);
  background: linear-gradient(
    90deg,
    var(--ink) 0 5px,
    transparent 5px 8px,
    var(--gold) 8px 12px
  );
}

.eyebrow--plain::before {
  display: none;
}

.eyebrow--center {
  justify-content: center;
}

/* RESERVED: no consumer today. The secondary label tier below .eyebrow. */
.kicker {
  font-family: var(--font);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-3);
}

/* RESERVED: no consumer today. .hero__lede and .sec-head__sub cover the two
   places an intro paragraph currently appears. */
.lede {
  font-size: var(--t-lede);
  color: var(--ink-2);
  line-height: 1.6;
}

.body-2 {
  color: var(--ink-2);
}

.muted {
  color: var(--ink-3);
  font-size: var(--t-small);
}

/* Bullion text fill. LARGE TEXT ONLY on light surfaces: the gradient's
   brightest stop clears the 3:1 large-text floor, not the 4.5:1 body floor.
   Inside .sec--deep the variable remaps to the bright brand gradient and the
   restriction falls away. The gradient and the transparent text fill are
   guarded together so the solid bullion really is the fallback. */
.metal-text {
  color: var(--gold-ink);
}

.metal-text--silver {
  color: var(--silver);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .metal-text {
    background: var(--gold-ink-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .metal-text--silver {
    background: var(--silver-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* The seam rule: the signature device at rule scale. A charcoal stroke with
   the gold stroke running beneath it, machined cut at the trailing end. */
.rule {
  height: 5px;
  border: 0;
  width: 84px;
  background: linear-gradient(180deg, var(--ink) 0 2px, transparent 2px 3px, var(--gold) 3px 5px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

/* RESERVED: neither rule modifier has a consumer today. Both are kept because
   the hairline is part of the brand vocabulary and .rule itself is in use. */
.rule--full {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--line-gold) 0%, var(--line) 40%, transparent 100%);
  clip-path: none;
}

.rule--center {
  margin-inline: auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-lo) 50%, transparent 100%);
  clip-path: none;
}

/* Section head block: eyebrow, heading, optional supporting paragraph. */
.sec-head {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: var(--gap-lg);
  max-width: 62ch;
}

.sec-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.sec-head__title {
  font-size: var(--t-h2);
}

.sec-head__sub {
  color: var(--ink-2);
  font-size: var(--t-lede);
}

/* ==========================================================================
   05  SEAM SYSTEM
   The monogram's gold counter-stroke, at three scales, and nothing else uses
   the device:
     .seammark  inline glyph, list markers and label dots
     .seamchip  slanted number or initials plate, 40 to 72px
     .crest     the once-per-page monogram plate ornament
   ========================================================================== */

.seammark {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  transform: skewX(-16deg);
  background: linear-gradient(
    90deg,
    var(--ink) 0 5px,
    transparent 5px 8px,
    var(--gold) 8px 12px
  );
}

/* The slanted plate. clip-path rather than a transform, so the numeral inside
   stays upright while the plate leans like the monogram's strokes. The gold
   pinstripe rides the leading edge: the seam. */
.seamchip {
  display: grid;
  place-items: center;
  flex: none;
  width: 58px;
  height: 50px;
  padding-left: 4px;
  clip-path: var(--chip-clip);
  background:
    linear-gradient(104deg, transparent 0 8px, var(--gold) 8px 11px, transparent 11px),
    var(--panel);
  color: var(--gold-hi);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Filled variant: gold plate, charcoal seam, dark numerals. Used for the
   active or first item in a sequence so a scan finds the entry point. */
.seamchip--gold {
  background:
    linear-gradient(104deg, transparent 0 8px, var(--panel) 8px 11px, transparent 11px),
    var(--gold-grad);
  color: var(--ink-on-gold);
}

/* RESERVED: the small and large scales have no consumer today. They are the
   declared scale of the seam system, and the system is the brand signature:
   a later page that needs a quieter or a larger plate takes one of these
   rather than inventing a fourth size. */
.seamchip--sm {
  width: 42px;
  height: 38px;
  font-size: 0.85rem;
}

.seamchip--lg {
  width: 76px;
  height: 64px;
  font-size: 1.45rem;
}

/* The crest: the once-per-page ornament. The real monogram mounted on a
   plate, with the motto beneath it, the way a unit crest hangs on a wall.
   The hero hides it from assistive technology: the header lockup already
   carries the name and the motto as text.

   The plate sits on an offset charcoal backplate (the ::after), so it reads
   as a mounted placard rather than a white card on a white page.

   Page-load sequence, the site's one orchestrated moment (CSS only, per the
   Server Component rule): the placard rises, the monogram draws in with a
   slant-edged wipe that follows the stroke direction, the seam extends, the
   motto settles. Every animation uses `both` fill, so its end state IS the
   natural state: the global prefers-reduced-motion override collapses the
   whole sequence to the finished placard instantly. */
.crest {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: min(400px, 100%);
  margin-inline: auto;
  padding: clamp(2.25rem, 4.5vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  /* No animation and no z-index here, ever: either one creates a stacking
     context and repaints the ::after backplate over the white plate. The
     rise is on .hero__art (section 08). */
}

/* The plate wears its own seam across the top. Width animates from center
   because the rule is centered with translateX(-50%). */
.crest::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 5px;
  background: linear-gradient(180deg, var(--ink) 0 2px, transparent 2px 3px, var(--gold) 3px 5px);
  animation: mv-crest-seam 400ms 750ms var(--ease) both;
}

/* The backplate: charcoal, offset down-right, gold pinstripe edge. Negative
   z-index paints it behind the plate's own background; .crest deliberately
   creates no stacking context, so do not give .crest a z-index. */
.crest::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(18px, 18px);
  background: var(--panel);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-lg);
}

.crest__img {
  width: min(250px, 72%);
  animation: mv-crest-draw 850ms 250ms cubic-bezier(0.3, 0, 0.25, 1) both;
}

.crest__motto {
  font-family: var(--font);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  text-align: center;
  color: var(--ink-3);
  animation: mv-crest-motto 500ms 950ms var(--ease) both;
}

@keyframes mv-crest-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The wipe's leading edge leans like the monogram's strokes, so the reveal
   reads as the four strokes being laid down left to right. */
@keyframes mv-crest-draw {
  from {
    clip-path: polygon(-14% 0%, -4% 0%, -14% 100%, -24% 100%);
  }

  to {
    clip-path: polygon(-14% 0%, 114% 0%, 104% 100%, -24% 100%);
  }
}

@keyframes mv-crest-seam {
  from {
    width: 0;
  }

  to {
    width: 84px;
  }
}

@keyframes mv-crest-motto {
  from {
    opacity: 0;
    letter-spacing: 0.3em;
  }

  to {
    opacity: 1;
    letter-spacing: 0.22em;
  }
}

/* ==========================================================================
   06  BUTTONS AND LINKS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: var(--t-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-btn);
  line-height: var(--lh-label);
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Primary: the gold plate with dark ink, still the highest-contrast pair in
   the palette (7.91). The top-right corner takes the machined cut, the same
   angle the monogram's strokes end on. clip-path swallows box-shadow, so the
   glow is a drop-shadow filter instead. */
.btn--gold {
  background: var(--gold-grad);
  color: var(--ink-on-gold);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  filter: drop-shadow(0 10px 22px rgba(169, 121, 26, 0.35));
}

.btn--gold:hover {
  color: var(--ink-on-gold);
  filter: drop-shadow(0 14px 26px rgba(169, 121, 26, 0.5));
}

/* Secondary: outlined, sits on any surface. */
.btn--ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--gold-lo);
  color: var(--ink);
  background: var(--gold-soft);
}

/* Tertiary: reads as a link, keeps the tap target. */
.btn--quiet {
  min-height: 44px;
  padding: 0.35rem 0;
  background: none;
  color: var(--gold-ink);
  letter-spacing: var(--track-btn);
}

.btn--quiet::after {
  content: "\2192";
  transition: transform var(--dur) var(--ease);
}

.btn--quiet:hover::after {
  transform: translateX(3px);
}

/* Compact variant. 44px, not 40px: this is the header CTA, and the target rule
   is met by the control itself rather than by counting the gap around it. */
.btn--sm {
  min-height: 44px;
  padding: 0.45rem 1rem;
  font-size: var(--t-label);
}

.btn--wide {
  width: 100%;
}

@media (min-width: 560px) {
  .btn--wide {
    width: auto;
  }
}

/* Row of actions. Stacks full width on the smallest screens. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 419px) {
  .btn-row > .btn {
    width: 100%;
  }
}

/* RESERVED: no consumer today. The centered pair of .btn-row. */
.btn-row--center {
  justify-content: center;
}

/* ==========================================================================
   07  HEADER AND NAVIGATION
   DOM contract (Header.tsx must follow it or the CSS-only menu breaks):
     header.hdr > div.hdr__inner >
       a.brand, nav.nav, div.hdr__cta,
       input#mnav-toggle.mnav-toggle, label.nav-burger, nav.mnav
   The checkbox must be a SIBLING that precedes .nav-burger and .mnav.

   The checkbox is the real control and it is what takes focus. The label draws
   the three bars and is decoration: pressing Enter or Space on a focused label
   activates nothing in any browser, so a focusable label would leave the menu
   unreachable from the keyboard, and below 900px there is no other route to
   the navigation at all.
   ========================================================================== */

.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 251, 249, 0.92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.hdr__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: var(--hdr-h);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Brand lockup ------------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-right: auto;
  color: var(--ink);
}

.brand:hover {
  color: var(--ink);
}

.brand__mark {
  flex: none;
  width: 38px;
  height: 38px;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

/* The one place outside headings the display face appears at label size: the
   name, set the way the wordmark sets it. */
.brand__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink);
}

.brand__motto {
  display: none;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--gold-ink);
  margin-top: 0.3rem;
}

@media (min-width: 560px) {
  .brand__motto {
    display: block;
  }
}

/* Desktop nav -------------------------------------------------------------- */

.nav {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  position: relative;
}

/* text-decoration: none is load-bearing on the nav links: they sit inside
   list items, so the prose underline rule (li a) would catch them. */
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-btn);
  text-decoration: none;
  color: var(--ink-2);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav__link:hover {
  color: var(--ink);
  background: rgba(29, 30, 35, 0.05);
}

/* No [aria-current="page"] rule. Header is a Server Component with no access to
   the pathname, and getting one would mean reading request headers, which opts
   every page out of static prerendering, or a second client component. Neither
   is worth a color change: the breadcrumb trail and the page heading carry the
   current page. Revisit only if a client side nav ever ships. */

/* Dropdown. Opens on hover and on focus-within, so it is keyboard reachable
   without JavaScript. */
.nav-drop__panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  padding: 0.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}

.nav__item:hover > .nav-drop__panel,
.nav__item:focus-within > .nav-drop__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* text-decoration: none is load-bearing here too: the dropdown panel lives
   inside the nav <li>, so the prose underline rule (li a) catches these links
   without it. Missed in the 2026-07-29 sweep, caught by MC-BQR 2026-07-30. */
.nav-drop__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: var(--t-label-lg);
  text-decoration: none;
  color: var(--ink-2);
}

.nav-drop__link:hover {
  color: var(--ink);
  background: rgba(29, 30, 35, 0.05);
}

.hdr__cta {
  display: none;
}

@media (min-width: 900px) {
  .nav {
    display: block;
  }

  .hdr__cta {
    display: inline-flex;
    gap: 0.5rem;
  }
}

/* Mobile menu, CSS only ---------------------------------------------------- */

/* The control. Transparent, but a real 48px target stacked over the burger
   graphic, so it takes focus, toggles on Space, and reports its checked state
   to assistive technology with no JavaScript anywhere. Do not give this
   pointer-events: none and do not shrink it to a 1px box. */
.mnav-toggle {
  position: absolute;
  inset-inline-end: calc(var(--pad-x) * 0.65);
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.nav-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0 12px;
  margin-right: calc(var(--pad-x) * -0.35);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-burger__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.mnav-toggle:checked ~ .nav-burger .nav-burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mnav-toggle:checked ~ .nav-burger .nav-burger__bar:nth-child(2) {
  opacity: 0;
}

.mnav-toggle:checked ~ .nav-burger .nav-burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* The focus ring belongs on the graphic, because the control itself is
   transparent. Keyboard focus on the checkbox draws the outline on the bars. */
.mnav-toggle:focus-visible ~ .nav-burger {
  outline: 2px solid var(--gold-ink);
  outline-offset: -2px;
}

.mnav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  max-height: calc(100dvh - var(--hdr-h));
  overflow-y: auto;
  padding: 0.75rem var(--pad-x) 1.5rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.mnav-toggle:checked ~ .mnav {
  display: block;
}

.mnav__group + .mnav__group {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.mnav__label {
  display: block;
  font-family: var(--font);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-3);
  padding: 0.5rem 0.25rem 0.25rem;
}

.mnav__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.35rem 0.25rem;
  font-family: var(--font);
  font-size: var(--t-label-lg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-btn);
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

/* No [aria-current="page"] rule here either. See the note on .nav__link. */

.mnav__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

@media (min-width: 900px) {
  .mnav-toggle,
  .nav-burger,
  .mnav,
  .mnav-toggle:checked ~ .mnav {
    display: none;
  }
}

/* ==========================================================================
   08  HERO
   Two variants. .hero is the home treatment: copy column plus the crest.
   .hero--page is the interior page treatment: no ornament, the seam rule
   above the title, tighter block.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y-hero);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

/* Two offset washes: a warm one behind the crest, a cool one low left.
   Sized in vw so they never produce a hard edge on a wide monitor. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: min(720px, 85vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 66%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto auto -40% -20%;
  width: min(640px, 80vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(29, 30, 35, 0.05) 0%, transparent 68%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--gap-lg);
  align-items: center;
}

@media (min-width: 980px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--gap-split);
  }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  max-width: 34ch;
}

@media (min-width: 980px) {
  .hero__copy {
    max-width: none;
  }
}

.hero__title {
  font-size: var(--t-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
}

/* A line of the h1 rendered in bullion. Keeps the whole heading from
   shouting. Display size, so the large-text gradient is in bounds; the
   gradient and the transparent text fill are guarded together so the solid
   bullion really is the fallback. */
.hero__title-metal {
  display: block;
  color: var(--gold-ink);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero__title-metal {
    background: var(--gold-ink-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.hero__lede {
  font-size: var(--t-lede);
  color: var(--ink-2);
  max-width: 54ch;
}

/* The crest renders at every width (2026-08-29; it was desktop-only before,
   which left phones without the one orchestrated moment). Below the hero's
   two-column breakpoint it stands as a smaller centered plate under the copy.
   The rise leg of the crest sequence lives HERE, not on .crest: a running
   or filled transform would give .crest a stacking context, which flips
   the paint order of its negative z-index backplate on top of the plate.
   See the crest block in section 05. */
.hero__art {
  animation: mv-crest-rise 500ms var(--ease) both;
}

@media (max-width: 979.98px) {
  .hero__art .crest {
    width: min(300px, 100%);
  }
}

/* Credential chips under the hero actions. Not claims, just identity. */
.creds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cred {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-2);
}

/* Interior page hero ------------------------------------------------------- */

.hero--page {
  padding-block: var(--section-y-tight);
}

.hero--page::after {
  display: none;
}

.hero--page .hero__inner {
  display: block;
}

.hero--page .hero__title {
  font-size: var(--t-h1);
  max-width: 24ch;
}

.hero--page .hero__lede {
  margin-top: 1.1rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

@media (max-width: 419px) {
  .hero__actions > .btn {
    width: 100%;
  }
}

/* ==========================================================================
   09  CARDS AND GRIDS
   Card signature: the seam across the top-left, charcoal stroke over gold
   stroke, extending to the full width on hover. No corner ornaments, no
   glow, no border color change.
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: var(--pad-card);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 34%;
  background: linear-gradient(180deg, var(--ink) 0 2px, transparent 2px 3px, var(--gold) 3px 4px);
  transition: width var(--dur-2) var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-lift);
}

.card:hover::before {
  width: 100%;
}

/* Static variant for content panels that are not interactive. */
.card--flat {
  transition: none;
}

.card--flat:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}

.card--flat:hover::before {
  width: 34%;
}

/* Raised inner panel, one step off .card. */
.card--raised {
  background: var(--card-2);
}

.card__title {
  font-size: var(--t-h3);
  font-family: var(--font-display);
  color: var(--ink);
}

.card__body {
  color: var(--ink-2);
}

.card__foot {
  margin-top: auto;
  padding-top: 0.4rem;
}

/* Whole-card link: the anchor covers the card, so nested links are forbidden.
   Applied to the card's title anchor. */
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Services grid ------------------------------------------------------------ */

.svc-grid {
  display: grid;
  gap: var(--gap);
}

@media (min-width: 640px) {
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .svc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Five services in a three-up grid leaves a hole. The flagship card takes
     the full first row on wide screens so the row count reads deliberate. */
  .svc-grid > .svc-card--lead {
    grid-column: span 3;
  }

  .svc-card--lead {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gap-lg);
  }

  .svc-card--lead .svc-card__head {
    min-width: 34%;
  }
}

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: var(--pad-card);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.svc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 34%;
  background: linear-gradient(180deg, var(--ink) 0 2px, transparent 2px 3px, var(--gold) 3px 4px);
  transition: width var(--dur-2) var(--ease);
}

.svc-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-lift);
}

.svc-card:hover::before {
  width: 100%;
}

.svc-card__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.svc-card__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.svc-card__title a {
  color: inherit;
}

.svc-card__title a:hover {
  color: var(--gold-ink);
}

/* --ink-2 rather than --ink-3: a tagline sits directly under the card title and
   reads as part of it, so it takes the brighter of the two quiet inks. Both
   clear AA on --card; this is a hierarchy choice, not a contrast workaround. */
.svc-card__tagline {
  color: var(--ink-2);
  font-size: var(--t-small);
  margin-top: 0.2rem;
}

.svc-card__body {
  color: var(--ink-2);
}

.svc-card__more {
  margin-top: auto;
  font-family: var(--font);
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-btn);
  color: var(--gold-ink);
}

/* ==========================================================================
   10  PILLARS (why us)
   A steel spine on the inline-start edge that turns gold on hover. Flat,
   no card chrome, so the "why" block reads lighter than the services grid.
   ========================================================================== */

.pillars {
  display: grid;
  gap: var(--gap-lg);
}

@media (min-width: 700px) {
  .pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pillar {
  position: relative;
  padding-left: 1.4rem;
}

.pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 3px;
  border-radius: 3px;
  background: var(--steel);
  transition: background var(--dur) var(--ease);
}

.pillar:hover::before {
  background: var(--gold-grad);
}

.pillar__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin-bottom: 0.45rem;
}

.pillar__body {
  color: var(--ink-2);
}

/* ==========================================================================
   11  STEPS (process)
   Vertical rail on mobile, four columns on desktop with a connecting line
   drawn behind the chips. On the home page this list sits inside the dress
   panel, where the token remap does the dark styling.
   ========================================================================== */

.steps {
  position: relative;
  display: grid;
  gap: var(--gap-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.step__title {
  font-family: var(--font-display);
  font-size: var(--t-body-lg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.step__body {
  color: var(--ink-2);
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
  }

  /* The rail sits at the vertical center of the chips and stops short of
     both ends so it does not point at nothing. */
  .steps::before {
    content: "";
    position: absolute;
    top: 25px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--steel) 12%,
      var(--steel) 88%,
      transparent 100%
    );
  }

  .step {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
    text-align: left;
  }

  .step > .seamchip {
    position: relative;
    z-index: 1;
  }
}

/* ==========================================================================
   12  MARKER LISTS
   .marks  seam markers, the default bullet treatment site wide
   .checks chevrons, used where the items are qualifications or gets
   .numbered  bullion numerals for ordered instructions
   ========================================================================== */

.marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.marks > li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-2);
}

.marks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  transform: skewX(-16deg);
  background: linear-gradient(
    90deg,
    var(--ink) 0 4px,
    transparent 4px 6.5px,
    var(--gold) 6.5px 10px
  );
}

@media (min-width: 760px) {
  .marks--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
  }
}

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.checks > li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-2);
}

.checks > li::before {
  content: "\203A";
  position: absolute;
  left: 0.15rem;
  top: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--gold-ink);
}

/* Solid bullion, no gradient: these counters are body-size text and the
   gradient's floor is large text only. */
.numbered {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: mv-num;
  display: grid;
  gap: 1rem;
}

.numbered > li {
  counter-increment: mv-num;
  position: relative;
  padding-left: 2.6rem;
  color: var(--ink-2);
}

.numbered > li::before {
  content: counter(mv-num, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-size: var(--t-body-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-ink);
}

/* ==========================================================================
   13  PROOF, TESTIMONIALS, HONEST EMPTY STATES
   These surfaces render from real records only. There is no "nothing here yet"
   panel: components/ProofStrip and components/Testimonials return null while
   their arrays are empty, which says less than a dashed box announcing an
   absence, and saying less is the honest option.
   ========================================================================== */

.proof {
  display: grid;
  gap: var(--gap);
}

@media (min-width: 700px) {
  .proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.proof-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--pad-box);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* 1.6rem display type: large text, so the bullion gradient is in bounds. */
.proof-item__value {
  font-family: var(--font-display);
  font-size: var(--t-stat);
  line-height: 1.1;
  color: var(--gold-ink);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .proof-item__value {
    background: var(--gold-ink-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.proof-item__label {
  font-size: var(--t-small);
  color: var(--ink-2);
}

.quotes {
  display: grid;
  gap: var(--gap);
}

@media (min-width: 860px) {
  .quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.quote {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: var(--pad-card);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.quote__text {
  color: var(--ink);
  font-size: var(--t-body-lg);
  line-height: 1.6;
}

.quote__attr {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font);
  font-size: var(--t-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-btn);
  color: var(--ink-2);
  margin-top: auto;
}

/* ==========================================================================
   14  FAQ (native details / summary)
   ========================================================================== */

.faq {
  display: grid;
  gap: 0.75rem;
}

.faq__item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}

.faq__item[open] {
  border-color: var(--line-gold);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 0.95rem 1.15rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* Remove the default disclosure triangle in both engines. */
.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::marker {
  content: "";
}

.faq__q:hover {
  color: var(--gold-ink);
}

/* The plus turns into a minus. Two bars, one rotated. Bullion, not raw gold:
   the glyph is the only open/closed signal beside the border, so it keeps a
   3:1-clearing color on the card. */
.faq__icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--gold-ink);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__a {
  padding: 0 1.15rem 1.15rem;
  color: var(--ink-2);
}

.faq__a > * + * {
  margin-top: 0.75rem;
}

/* ==========================================================================
   15  LEAD SECTION AND FORMS
   ========================================================================== */

.lead-sec {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}

.lead-sec__inner {
  display: grid;
  gap: var(--gap-lg);
}

@media (min-width: 980px) {
  .lead-sec__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
}

.lead-copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-card {
  padding: var(--pad-card-lg);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.form {
  display: grid;
  gap: 1rem;
}

.form__row {
  display: grid;
  gap: 1rem;
}

@media (min-width: 620px) {
  .form__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.label {
  font-family: var(--font);
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-btn);
  color: var(--ink-2);
}

.label__req {
  color: var(--gold-ink);
  margin-left: 0.2rem;
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.textarea {
  min-height: 128px;
  resize: vertical;
}

.select {
  appearance: none;
  /* Inline SVG chevron in bullion, encoded so no external asset and no CSP
     exception. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%237c5f13' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  padding-right: 2.4rem;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--ink-3);
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--ink-3);
}

/* The bullion border and ring are the resting affordance for any focus,
   including a mouse click. The global 2px :focus-visible outline is NOT
   removed: it is dropped only for pointer focus, so a keyboard user still
   gets the site standard indicator on every control. Never put a bare
   `outline: none` on :focus here again. */
.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--gold-ink);
  box-shadow: var(--ring);
}

.input:focus:not(:focus-visible),
.textarea:focus:not(:focus-visible),
.select:focus:not(:focus-visible) {
  outline: none;
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: #b3473d;
}

/* Field level error. Paired with aria-describedby, never color-only: the
   leading glyph carries the meaning too. #a63528 clears AA on every light
   surface (5.55 on the worst, --bg-3). */
.field-error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-small);
  color: #a63528;
}

.field-error::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

/* Honeypot. Off screen rather than display:none so naive bots still fill it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --ink-2: this note carries the one thing a visitor needs before submitting and
   renders on every page through LeadSection, so it takes the brighter quiet ink
   rather than the quietest one. */
.form__note {
  font-size: var(--t-small);
  color: var(--ink-2);
}

.form__status {
  padding: var(--pad-note);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-size: var(--t-label-lg);
  color: var(--ink-2);
}

.form__status--ok {
  border-color: var(--line-gold);
  color: var(--ink);
}

.form__status--err {
  border-color: #c98b83;
  color: #a63528;
}

/* The G2 fallback: shown in place of the form until transactional email is
   verified. Same footprint as .form-card so the layout does not shift. */
.call-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: var(--pad-card-lg);
  background: var(--card);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.call-card__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* Display-size number: large text, so the bullion gradient is in bounds. */
.call-card__num {
  font-family: var(--font-display);
  font-size: var(--t-stat-lg);
  letter-spacing: 0.03em;
  color: var(--gold-ink);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .call-card__num {
    background: var(--gold-ink-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.contact-lines {
  display: grid;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink-2);
}

.contact-line__label {
  font-family: var(--font);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-2);
  min-width: 5.5rem;
}

/* ==========================================================================
   16  BOOKING CTA
   Full-bleed band. Gold hairlines top and bottom, a faint gold wash, so it
   punctuates without competing with the primary button.
   ========================================================================== */

.book {
  border-top: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.07) 0%, transparent 70%);
}

.book__inner {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: flex-start;
}

@media (min-width: 860px) {
  .book__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-lg);
  }
}

.book__title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  text-transform: uppercase;
  color: var(--ink);
}

.book__body {
  color: var(--ink-2);
  max-width: 56ch;
  margin-top: 0.5rem;
}

/* ==========================================================================
   17  INSIGHTS: POST GRID AND ARTICLE
   ========================================================================== */

.post-grid {
  display: grid;
  gap: var(--gap);
}

@media (min-width: 760px) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: var(--pad-card);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.post-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-lift);
}

.post-card__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--ink);
}

.post-card__title a {
  color: inherit;
}

.post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.post-card__desc {
  color: var(--ink-2);
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  align-items: center;
  margin-top: auto;
  font-size: var(--t-small);
  color: var(--ink-2);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-btn);
  /* --ink-2: 12px, and these sit inside .post-card on --card. */
  color: var(--ink-2);
}

/* Article ------------------------------------------------------------------ */

.article {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  font-size: var(--t-small);
  color: var(--ink-3);
  margin-top: 0.9rem;
}

.article__body {
  color: var(--ink-2);
  font-size: var(--t-body-lg);
  line-height: var(--lh-article);
}

.article__body > * + * {
  margin-top: 1.15rem;
}

.article__body h2 {
  font-size: var(--t-h2-sub);
  color: var(--ink);
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.article__body h3 {
  color: var(--ink);
  margin-top: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--t-h3);
}

.article__body ul,
.article__body ol {
  padding-left: 0;
}

/* Table of contents rail. Sticky on desktop, plain list on mobile. */
.toc {
  padding: var(--pad-box);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.toc__title {
  font-family: var(--font);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-2);
  margin-bottom: 0.6rem;
}

.toc__list {
  display: grid;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 44px target. The list is dense, so the height comes from min-height rather
   than from padding that would push the rail out of the viewport. */
.toc__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-label-lg);
  color: var(--ink-2);
  text-decoration: none;
}

.toc__link:hover {
  color: var(--gold-ink);
}

@media (min-width: 1100px) {
  .toc--sticky {
    position: sticky;
    top: calc(var(--hdr-h) + 1.25rem);
  }
}

/* Pull-aside inside an article: a note, a caution, a definition. */
.callout {
  padding: var(--pad-box);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-lo);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
}

.callout__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font);
  font-size: var(--t-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-btn);
  color: var(--ink);
  margin-bottom: 0.45rem;
}

/* How-to steps inside a guide. Heavier than .numbered, used once per guide.
   The counter plate is a small seam chip: gold plate, charcoal seam, dark
   numeral. */
.howto {
  display: grid;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: mv-howto;
}

.howto__step {
  counter-increment: mv-howto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: var(--pad-box);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.howto__step::before {
  content: counter(mv-howto);
  display: grid;
  place-items: center;
  width: 42px;
  height: 38px;
  padding-left: 3px;
  clip-path: var(--chip-clip);
  background:
    linear-gradient(104deg, transparent 0 6px, var(--panel) 6px 8px, transparent 8px),
    var(--gold-grad);
  color: var(--ink-on-gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-label-lg);
}

.howto__title {
  font-family: var(--font-display);
  font-size: var(--t-body-lg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.howto__body {
  color: var(--ink-2);
}

.howto__body > * + * {
  margin-top: 0.6rem;
}

/* ==========================================================================
   18  BREADCRUMBS AND SMALL PARTS
   ========================================================================== */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.4rem;
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  font-size: var(--t-small);
  color: var(--ink-3);
}

.crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Underlined, like every other in-content link. Without it the only difference
   between a link and the current page in this trail is a shade of grey, which
   is a color-only signal, and the link was the quieter of the two. */
.crumbs__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--line-gold);
}

.crumbs__link:hover {
  color: var(--gold-ink);
}

.crumbs__sep {
  color: var(--steel);
}

.crumbs__current {
  color: var(--ink-3);
  font-weight: 600;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--font);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-btn);
  color: var(--ink-2);
}

/* RESERVED: no consumer today. Every chip on the site is a statement of fact
   rather than an emphasis, so nothing has earned the gold treatment yet. */
.chip--gold {
  border-color: var(--line-gold);
  color: var(--gold-ink);
  background: var(--gold-soft);
}

.notice {
  padding: var(--pad-note);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: var(--t-small);
}

/* Any wide block (table, code) scrolls inside itself, never the page. */
/* RESERVED: no consumer today. No page ships a table, and when one does this
   is what keeps the page from scrolling sideways. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

.table-wrap th,
.table-wrap td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}

.table-wrap th {
  font-family: var(--font);
  font-size: var(--t-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-btn);
  color: var(--ink);
  background: var(--bg-2);
}

/* ==========================================================================
   19  FOOTER
   ========================================================================== */

/* The bottom padding is the reservation for the fixed mobile call bar, and it
   belongs here rather than on .site-main: the footer is the last thing in the
   document, so this is the only place that actually keeps the bar off the
   copyright line and the legal links. Those links are focusable, and a focused
   element sitting behind a fixed bar is a focus obscured failure. The token is
   0px from 900px up, so desktop is untouched. */
.ftr {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding-top: var(--section-y-tight);
  padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom));
}

.ftr__grid {
  display: grid;
  gap: var(--gap-lg);
}

@media (min-width: 700px) {
  .ftr__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .ftr__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }

  /* Soft-launch footprint. With both link columns gated off (the home + legal
     wave) only brand and contact render, and four tracks would leave two of
     them empty. The modifier is set by the footer template off ftr_link_cols,
     which core/context_processors.py computes from the same publication
     conditions the columns render under. */
  .ftr__grid--slim {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

.ftr__brand {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 40ch;
}

.ftr__motto {
  font-family: var(--font);
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--gold-ink);
}

.ftr__blurb {
  color: var(--ink-2);
  font-size: var(--t-label-lg);
}

.ftr__col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ftr__head {
  font-family: var(--font);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-3);
}

.ftr__links {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ftr__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  font-size: var(--t-label-lg);
  text-decoration: none;
}

.ftr__link:hover {
  color: var(--gold-ink);
}

/* Identity badges. Statements of fact about the company, not awards. */
.ftr__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ftr__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: var(--gap-lg);
  padding-block: 1.15rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--ink-3);
}

@media (min-width: 760px) {
  .ftr__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.ftr__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   20  MOBILE CALL BAR
   Fixed to the bottom below 900px. The footer reserves the space (section 19)
   so nothing at the end of the document sits under it.

   The two cells are deliberately unequal: a quiet fixed width contact cell,
   then the gold call cell taking the rest of the bar and carrying the number
   itself under a small label. On a phone the number is information, not just a
   target, and while gate G2 is open it is the primary conversion path.
   ========================================================================== */

.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1px;
  background: var(--line-2);
  border-top: 1px solid var(--line-2);
  padding-bottom: env(safe-area-inset-bottom);
}

.callbar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: var(--callbar-h);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-btn);
}

.callbar__btn--gold {
  background: var(--gold-grad);
  color: var(--ink-on-gold);
}

.callbar__label {
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  opacity: 0.75;
}

.callbar__num {
  font-size: var(--t-body-lg);
  letter-spacing: 0.04em;
}

.callbar__btn--gold:hover {
  color: var(--ink-on-gold);
}

@media (min-width: 900px) {
  .callbar {
    display: none;
  }
}

/* ==========================================================================
   21  FOCUS, MOTION, FORCED COLORS, PRINT
   ========================================================================== */

/* Bullion, not raw gold: the outline has to clear 3:1 on the light surfaces,
   and inside .sec--deep the token remap brightens it automatically. */
:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
  border-radius: 3px;
}

.faq__q:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: -2px;
}

/* Windows High Contrast Mode and similar forced palettes do not repaint a
   background image, so gradient clipped text can come out as the forced
   background color on the forced background: invisible. Every metal fill drops
   back to plain forced text here, including the phone number in the call card,
   which is the primary conversion path while gate G2 is open.

   The seam family opts out of the forced palette instead, because those
   gradient-built shapes ARE the marker: repainting them to CanvasText erases
   the seam that carries the meaning. */
@media (forced-colors: active) {
  .metal-text,
  .metal-text--silver,
  .hero__title-metal,
  .proof-item__value,
  .call-card__num {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
  }

  .seammark,
  .seamchip,
  .howto__step::before,
  .marks > li::before,
  .eyebrow::before,
  .rule,
  .crest::before {
    forced-color-adjust: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .card:hover,
  .svc-card:hover,
  .post-card:hover,
  .btn--quiet:hover::after {
    transform: none;
  }
}

@media print {
  .hdr,
  .callbar,
  .book,
  .lead-sec,
  .mnav {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}