/* ==========================================================================
   Proactive Management Group - design system
   --------------------------------------------------------------------------
   Direction: "blueprint and limestone". Deep navy ink pulled from the logo,
   warm limestone paper, one brass accent used sparingly. Architectural
   hairlines, technical mono labels and drawn-arc motifs echo the arrow in the
   mark. Everything is mobile-first fluid; nothing is gated on
   prefers-reduced-motion (PW standard, see force-motion drop-in in each head).
   ========================================================================== */

/* --------------------------------------------------------------- 01 FONTS */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-var-latin-ext.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrumentserif-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrumentserif-400i-latin.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/plexmono-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/plexmono-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* -------------------------------------------------------------- 02 TOKENS */
:root {
  /* ink - from the darkest navy in the mark */
  --ink-900: #061424;
  --ink-800: #0a1e33;
  --ink-700: #102b47;
  --navy-600: #16406b;
  --navy-500: #1e5490;
  --steel-400: #2e6dae;
  --azure-300: #5c9fdd;
  --azure-200: #9ac6ee;
  --sky-100: #dceaf7;

  /* brass - the single warm accent */
  --brass-600: #9c6f31;
  --brass-500: #b8843f;
  --brass-400: #c89a5b;
  --brass-300: #ddbb86;

  /* limestone paper */
  --stone-050: #faf8f4;
  --stone-100: #f3f0ea;
  --stone-200: #e7e2d8;
  --stone-300: #d6cfc2;
  --slate-500: #667485;
  --slate-600: #4c5867;
  --slate-700: #333e4c;

  /* semantic */
  --bg: var(--stone-050);
  --fg: var(--ink-900);
  --muted: var(--slate-500);
  --line: var(--stone-200);
  --accent: var(--brass-500);

  /* type */
  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: clamp(2.85rem, 1.05rem + 7.4vw, 7.25rem);
  --fs-h1: clamp(2.2rem, 1.32rem + 3.6vw, 4.35rem);
  --fs-h2: clamp(1.82rem, 1.28rem + 2.25vw, 3.15rem);
  --fs-h3: clamp(1.28rem, 1.09rem + 0.8vw, 1.78rem);
  --fs-h4: clamp(1.06rem, 0.99rem + 0.3vw, 1.22rem);
  --fs-lead: clamp(1.04rem, 0.96rem + 0.42vw, 1.32rem);
  --fs-body: clamp(0.97rem, 0.94rem + 0.16vw, 1.06rem);
  --fs-small: 0.86rem;
  --fs-mono: 0.715rem;

  /* space + layout */
  --shell: 1300px;
  --shell-narrow: 880px;
  --gut: clamp(1.15rem, 4.2vw, 3.75rem);
  --band-y: clamp(4.25rem, 8.5vw, 9rem);

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;

  --ease: cubic-bezier(.22, .74, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .55s;

  --shadow-sm: 0 1px 2px rgba(6, 20, 36, .05), 0 4px 14px -6px rgba(6, 20, 36, .10);
  --shadow-md: 0 2px 5px rgba(6, 20, 36, .06), 0 18px 44px -20px rgba(6, 20, 36, .28);
  --shadow-lg: 0 30px 80px -34px rgba(6, 20, 36, .52);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --header-h: 76px;
}

/* ---------------------------------------------------------------- 03 BASE */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-wrap: break-word;
  /* iOS paints a grey box on tap by default; a faint brand tint reads better */
  -webkit-tap-highlight-color: rgba(184, 132, 63, .18);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.06; letter-spacing: -0.022em; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
::selection { background: var(--brass-300); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--brass-500);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 999;
  background: var(--ink-900); color: #fff; padding: .8rem 1.2rem;
  border-radius: var(--r-sm); font: 500 var(--fs-small)/1 var(--sans);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* -------------------------------------------------------------- 04 LAYOUT */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.shell--narrow { max-width: var(--shell-narrow); }
.band { position: relative; padding-block: var(--band-y); }
.band--tight { padding-block: clamp(2.75rem, 5vw, 4.75rem); }
.band--stone { background: var(--stone-100); }
.band--ink,
.band--deep {
  background: var(--ink-800);
  color: var(--sky-100);
  --fg: var(--sky-100);
  --muted: #93a8be;
  --line: rgba(154, 198, 238, .17);
}
.band--deep { background: var(--ink-900); }
.band--ink::before,
.band--deep::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(154, 198, 238, .052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 198, 238, .052) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
.band--ink::after,
.band--deep::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: .16; mix-blend-mode: overlay;
}
.band > .shell { position: relative; z-index: 1; }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.18fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.18fr; }
  .split--sticky > :first-child { position: sticky; top: calc(var(--header-h) + 2.5rem); align-self: start; }
}

/* ---------------------------------------------------------- 05 TYPOGRAPHY */
.display { font-size: var(--fs-display); line-height: .93; letter-spacing: -0.038em; font-weight: 700; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; }
.h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.16; }
.h4 { font-size: var(--fs-h4); letter-spacing: -0.012em; line-height: 1.3; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.measure { max-width: 62ch; }
.measure-tight { max-width: 48ch; }

/* the one editorial gesture: a serif italic word inside a sans headline.
   No trailing padding: the accent often ends a sentence, and any right pad
   opens a visible gap before the full stop. */
em, .em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  /* brass-600 not -500: on limestone the lighter tone lands at 3.09:1, which
     only just clears the large-text threshold. This gives real margin. */
  color: var(--brass-600);
  letter-spacing: -0.005em;
}
.band--ink em, .band--deep em, .band--ink .em, .band--deep .em { color: var(--brass-300); }

.eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font: 500 var(--fs-mono)/1.45 var(--mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass-600); margin: 0 0 1.35rem;
}
.band--ink .eyebrow, .band--deep .eyebrow, .hero .eyebrow { color: var(--brass-300); }
.eyebrow::before {
  content: ''; width: 26px; height: 2px; background: currentColor; flex: none; opacity: .85;
}
.eyebrow--plain::before { display: none; }

.section-head { margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem); }
.section-head .h2 { max-width: 20ch; }
.section-head--split {
  display: grid; gap: clamp(1rem, 3vw, 3rem); align-items: end;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.25fr .85fr; }
  .section-head--split .lead { padding-bottom: .35rem; }
}

.mono-label {
  font: 500 var(--fs-mono)/1.5 var(--mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* --------------------------------------------------------------- 06 MOTION */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .40s; }

[data-stagger] > * {
  opacity: 0; transform: translate3d(0, 30px, 0);
  transition: opacity .75s var(--ease-out), transform .85s var(--ease-out);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > :nth-child(1) { transition-delay: .04s; }
[data-stagger].is-in > :nth-child(2) { transition-delay: .12s; }
[data-stagger].is-in > :nth-child(3) { transition-delay: .20s; }
[data-stagger].is-in > :nth-child(4) { transition-delay: .28s; }
[data-stagger].is-in > :nth-child(5) { transition-delay: .36s; }
[data-stagger].is-in > :nth-child(6) { transition-delay: .44s; }
[data-stagger].is-in > :nth-child(7) { transition-delay: .52s; }
[data-stagger].is-in > :nth-child(8) { transition-delay: .60s; }
[data-stagger].is-in > :nth-child(9) { transition-delay: .68s; }
[data-stagger].is-in > :nth-child(n+10) { transition-delay: .76s; }

/* headline lines that rise out of a mask */
.line-mask { display: block; overflow: hidden; padding-block: .06em; margin-block: -.06em; }
.line-mask > span {
  display: block;
  transform: translate3d(0, 108%, 0);
  transition: transform 1.05s var(--ease-out);
}
.is-loaded .line-mask > span,
[data-stagger].is-in .line-mask > span { transform: none; }
.line-mask:nth-of-type(2) > span { transition-delay: .10s; }
.line-mask:nth-of-type(3) > span { transition-delay: .20s; }

.scroll-progress {
  position: fixed; inset: 0 auto auto 0; height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--brass-500), var(--azure-300));
  z-index: 90; pointer-events: none;
}

/* --------------------------------------------------------------- 07 HEADER */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(250, 248, 244, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--stone-200);
  box-shadow: 0 10px 30px -24px rgba(6, 20, 36, .55);
}
/* min-height must NOT be var(--header-h): JS sets that variable FROM this
   element's measured height, so consuming it here formed a feedback loop that
   grew the header by its own padding on every measurement. iOS Safari fires
   `resize` on each URL-bar show/hide while scrolling, so on iPhone the bar
   ballooned to most of the screen. Android Chrome does not, which is why it
   only showed on iOS. --header-h is now output-only (scroll-padding, drawer). */
.header-inner {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 64px;
  padding-block: .7rem;
}
/* Horizontal lockup, 5.39:1. The client's stacked lockup is 1.42:1 and its
   wordmark goes unreadable at any workable header height. */
.brand { display: flex; align-items: center; flex: none; margin-right: auto; min-width: 0; min-height: 44px; }
.brand img { width: auto; height: 44px; transition: height .35s var(--ease); }
.site-header.is-stuck .brand img { height: 38px; }
@media (max-width: 480px) { .brand img, .site-header.is-stuck .brand img { height: 34px; } }
@media (max-width: 360px) { .brand img, .site-header.is-stuck .brand img { height: 30px; } }

.nav { display: none; }
@media (min-width: 1060px) {
  .nav { display: flex; align-items: center; gap: clamp(1.1rem, 1.9vw, 2.1rem); }
}
.nav a {
  position: relative; font-size: .92rem; font-weight: 500; letter-spacing: -0.005em;
  padding-block: .45rem; color: var(--slate-700); white-space: nowrap;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--brass-500); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .45s var(--ease-out);
}
.nav a:hover { color: var(--ink-900); }
.nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav a[aria-current="page"] { color: var(--ink-900); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* services dropdown */
.nav-drop { position: relative; }
.nav-drop > button {
  position: relative;
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; padding: .45rem 0; cursor: pointer;
  font-size: .92rem; font-weight: 500; color: var(--slate-700);
  transition: color .3s var(--ease);
}
/* The trigger is a <button>, so it cannot carry aria-current the way the other
   nav links do. ::after is already the chevron, so the active/hover underline
   rides on ::before, stopping short of the chevron. */
.nav-drop > button::before {
  content: ''; position: absolute; left: 0; right: 14px; bottom: 0; height: 2px;
  background: var(--brass-500); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .45s var(--ease-out);
}
.nav-drop:hover > button::before { transform: scaleX(1); transform-origin: 0 50%; }
.nav-drop > button[data-current] { color: var(--ink-900); }
.nav-drop > button[data-current]::before { transform: scaleX(1); }
.nav-drop > button::after {
  content: ''; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .35s var(--ease);
}
.nav-drop[data-open="true"] > button { color: var(--ink-900); }
.nav-drop[data-open="true"] > button::after { transform: rotate(-135deg) translate(-3px, -3px); }
.nav-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0;
  width: min(560px, 76vw); padding: 1rem;
  background: #fff; border: 1px solid var(--stone-200); border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .35s var(--ease-out), visibility .3s;
}
.nav-drop[data-open="true"] .nav-panel { opacity: 1; visibility: visible; transform: none; }
.nav-panel a {
  display: block; padding: .7rem .8rem; border-radius: var(--r-sm);
  font-size: .88rem; line-height: 1.35; transition: background .25s var(--ease);
}
.nav-panel a::after { display: none; }
.nav-panel a:hover { background: var(--stone-100); }
.nav-panel a[aria-current="page"] { background: var(--stone-100); color: var(--ink-900); font-weight: 600; }
.nav-panel a span {
  display: block; font: 400 var(--fs-mono)/1.4 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--brass-600); margin-bottom: .18rem;
}

/* Scoped so these beat the `.btn { display: inline-flex }` that follows in
   source order, otherwise the quote pill leaks into the mobile header and
   crushes the hamburger. */
.header-inner .header-cta { display: none; }
@media (min-width: 1060px) { .header-inner .header-cta { display: inline-flex; } }

/* hamburger */
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 11px; margin-right: -8px; flex: none;
  background: none; border: 0; cursor: pointer;
}
@media (min-width: 1060px) { .nav-toggle { display: none; } }
/* Explicit width: relying on flex `align-items: stretch` here left the outer
   two bars at 0px wide in Chromium, so only the middle bar drew. */
.nav-toggle span {
  display: block; width: 100%; height: 2px; background: var(--ink-900); border-radius: 2px;
  transition: transform .4s var(--ease-out), opacity .25s var(--ease), width .4s var(--ease-out), background-color .3s var(--ease);
}
.nav-toggle span:nth-child(2) { width: 70%; margin-left: auto; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 100%; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 79;
  background: var(--ink-900); color: var(--sky-100);
  padding: calc(var(--header-h) + 2rem) var(--gut) 2.5rem;
  overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .68s var(--ease-out);
  visibility: hidden;
}
.drawer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(154, 198, 238, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 198, 238, .055) 1px, transparent 1px);
  background-size: 60px 60px;
}
body.drawer-open .drawer { clip-path: inset(0 0 0 0); visibility: visible; }
body.drawer-open { overflow: hidden; }
/* The light header bar floating over the dark drawer reads as a broken strip,
   so it drops out and its marks invert while the drawer is open. */
body.drawer-open .site-header {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent; box-shadow: none;
}
body.drawer-open .nav-toggle span { background: var(--sky-100); }
.brand__light { display: none; }
body.drawer-open .brand__dark { display: none; }
body.drawer-open .brand__light { display: block; }
.drawer-inner { position: relative; max-width: 640px; }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav > a, .drawer-group > a {
  display: flex; align-items: baseline; gap: .85rem;
  padding: .62rem 0; border-bottom: 1px solid rgba(154, 198, 238, .13);
  font-size: clamp(1.5rem, 7vw, 2.2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15;
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), color .25s var(--ease);
}
body.drawer-open .drawer-nav > a, body.drawer-open .drawer-group > a { opacity: 1; transform: none; }
.drawer-nav > *:nth-child(1) { transition-delay: .14s; }
.drawer-nav > *:nth-child(2) { transition-delay: .19s; }
.drawer-nav > *:nth-child(3) { transition-delay: .24s; }
.drawer-nav > *:nth-child(4) { transition-delay: .29s; }
.drawer-nav > *:nth-child(5) { transition-delay: .34s; }
.drawer-nav > *:nth-child(6) { transition-delay: .39s; }
.drawer-nav > *:nth-child(7) { transition-delay: .44s; }
/* Not `.drawer-nav > a`: the Services entry is nested inside .drawer-group. */
.drawer-nav a:hover, .drawer-nav a[aria-current="page"] { color: var(--brass-300); }
.drawer-nav a[aria-current="page"] i { opacity: 1; }
/* Not `.drawer-nav > a i`: the Services entry is nested inside .drawer-group. */
.drawer-nav i {
  font: 400 var(--fs-mono)/1 var(--mono); font-style: normal;
  color: var(--brass-400); opacity: .75; flex: none;
}
.drawer-sub {
  display: grid; gap: .1rem; padding: .9rem 0 1.1rem 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s var(--ease-out) .42s, transform .6s var(--ease-out) .42s;
}
body.drawer-open .drawer-sub { opacity: 1; transform: none; }
.drawer-sub a {
  padding: .62rem 0; font-size: 1rem; color: #b7c8dc;
  border-bottom: 1px solid rgba(154, 198, 238, .08);
  transition: color .25s var(--ease), padding-left .3s var(--ease);
}
.drawer-sub a:hover, .drawer-sub a[aria-current="page"] { color: var(--brass-300); padding-left: .4rem; }
.drawer-foot {
  margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid rgba(154, 198, 238, .17);
  display: grid; gap: 1rem;
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s var(--ease-out) .5s, transform .6s var(--ease-out) .5s;
}
body.drawer-open .drawer-foot { opacity: 1; transform: none; }
.drawer-foot a[href^="tel"], .drawer-foot a[href^="mailto"] {
  font-size: 1.06rem; color: var(--sky-100);
  display: inline-flex; align-items: center; min-height: 44px;
}
.drawer-foot a:hover { color: var(--brass-300); }

/* -------------------------------------------------------------- 08 BUTTONS */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 50px; padding: .82rem 1.65rem;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--sans); font-size: .92rem; font-weight: 600; letter-spacing: -0.005em;
  cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease), transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--brass-500);
  transform: translateY(101%); transition: transform .5s var(--ease-out);
}
.btn:hover::before { transform: none; }
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; transition: transform .4s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary { background: var(--ink-900); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { color: var(--ink-900); }
.btn--ghost { border-color: var(--stone-300); color: var(--ink-900); }
.btn--ghost:hover { color: #fff; border-color: var(--brass-500); }
.btn--ghost::before { background: var(--ink-900); }
.btn--light { background: #fff; color: var(--ink-900); }
.btn--light:hover { color: var(--ink-900); }
.btn--outline-light { border-color: rgba(220, 234, 247, .38); color: var(--sky-100); }
.btn--outline-light:hover { color: var(--ink-900); border-color: var(--brass-400); }
.btn--outline-light::before { background: var(--brass-300); }
.btn--sm { min-height: 44px; padding: .55rem 1.15rem; font-size: .85rem; }  /* 44px = iOS touch target */
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* text link with an arrow that slides */
.tlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .92rem; color: var(--ink-900);
  padding-block: .2rem; min-height: 44px;   /* iOS touch target */
}
.band--ink .tlink, .band--deep .tlink { color: var(--sky-100); }
.tlink span { position: relative; }
.tlink span::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: var(--brass-500); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .45s var(--ease-out);
}
.tlink:hover span::after { transform: scaleX(1); transform-origin: 0 50%; }
.tlink svg { transition: transform .4s var(--ease-out); flex: none; }
.tlink:hover svg { transform: translateX(5px); }

/* ----------------------------------------------------------------- 09 HERO */
/* Light hero. The client asked for a lighter background and said the motion
   was hard to notice; navy ink on limestone fixes both at once, because the
   dial can now run at near-full strength instead of being a pale ghost. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--stone-050); color: var(--ink-900);
  min-height: 84vh;                 /* fallback: iOS < 15.4 has no svh unit */
  min-height: min(88svh, 860px);    /* svh = URL-bar-visible height, the safe one */
  display: flex; align-items: flex-end;
  padding-block: clamp(4.5rem, 12vh, 7rem) clamp(2.5rem, 6vh, 4rem);
}
/* The photo slot stays, but sits far back as texture so a real photo will read
   as a soft ground rather than fighting the dark type. */
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; opacity: .10;
  animation: heroDrift 26s var(--ease) infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.13) translate3d(-1.5%, -1.5%, 0); }
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(78% 62% at 82% 34%, rgba(92, 159, 221, .16), transparent 64%),
    linear-gradient(178deg, #fdfdfb 0%, var(--stone-050) 46%, var(--stone-100) 100%),
    /* faint blueprint grid, the same motif the dark bands use */
    linear-gradient(rgba(22, 64, 107, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 64, 107, .045) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: .07; mix-blend-mode: multiply;
}
/* --- hero instrument art -------------------------------------------------
   The logo's arc-and-arrow rebuilt as a dial: graduated bezel, layered rings,
   a gradient plot line with lit nodes, and a pulse that runs the path. All
   motion is transform / opacity / stroke-dashoffset, so it stays on the
   compositor. Nothing is gated on prefers-reduced-motion (PW standard). */
.hero__art {
  position: absolute; z-index: -1; pointer-events: none;
  right: clamp(-26vw, -9vw, -2rem); top: 50%;
  width: clamp(430px, 72vw, 1000px); aspect-ratio: 1;
  translate: 0 -52%;
  opacity: .95;
  /* Dissolve the art as it travels left, so it stays rich beside the headline
     and vanishes underneath it. Cheaper and far cleaner than trying to place
     the dial in the gap, and it holds at every viewport width. */
  -webkit-mask-image: linear-gradient(97deg, transparent 2%, rgba(0, 0, 0, .38) 24%, #000 54%);
  mask-image: linear-gradient(97deg, transparent 2%, rgba(0, 0, 0, .38) 24%, #000 54%);
  /* --px/--py are nudged by pointer parallax in main.js */
  transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
  transition: transform .9s cubic-bezier(.22, .74, .28, 1);
  animation: haFloat 14s ease-in-out infinite alternate;
}
@keyframes haFloat { from { translate: 0 -54%; } to { translate: 0 -49%; } }

.hero__bloom {
  position: absolute; inset: 12%;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(46, 109, 174, .17), rgba(46, 109, 174, .05) 46%, transparent 68%);
  transition: opacity 1.8s var(--ease-out) .2s;
  animation: haBreathe 9s ease-in-out infinite alternate;
}
.is-loaded .hero__bloom { opacity: 1; }
@keyframes haBreathe { from { scale: .94; } to { scale: 1.06; } }

.hero__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* graduated bezel */
.ha-bezel {
  transform-origin: 320px 320px;
  opacity: 0; transition: opacity 1.4s var(--ease-out) .15s;
  animation: haSpin 260s linear infinite;
}
.is-loaded .ha-bezel { opacity: .8; }
.ha-bezel .tk { stroke: var(--navy-600); stroke-width: 1.5; opacity: .30; }
.ha-bezel .tk--maj { stroke: var(--brass-500); stroke-width: 2.4; opacity: .75; }
@keyframes haSpin { to { rotate: 360deg; } }

/* rings */
.ha-ring { fill: none; stroke-linecap: round; }
.ha-ring--hair { stroke: var(--navy-600); stroke-width: 1.2; opacity: 0; transition: opacity 1.6s var(--ease-out) .5s; }
.is-loaded .ha-ring--hair { opacity: .22; }
.ha-ring--ghost { stroke: var(--steel-400); stroke-width: 15; opacity: 0; transition: opacity 1.6s var(--ease-out) .35s; }
.is-loaded .ha-ring--ghost { opacity: .09; }
.ha-ring--dash {
  stroke: var(--navy-600); stroke-width: 1.8; stroke-dasharray: 2 16;
  transform-origin: 320px 320px; opacity: 0;
  transition: opacity 1.6s var(--ease-out) .7s;
  animation: haSpinBack 150s linear infinite;
}
.is-loaded .ha-ring--dash { opacity: .5; }
@keyframes haSpinBack { to { rotate: -360deg; } }

.ha-ring--main {
  stroke: url(#ha-arc); stroke-width: 16;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2.6s cubic-bezier(.16, 1, .3, 1) .35s;
}
.is-loaded .ha-ring--main { stroke-dashoffset: 0; }

/* the rising plot */
.ha-area {
  fill: url(#ha-fill); stroke: none; opacity: 0;
  transition: opacity 1.4s var(--ease-out) 1.9s;
}
.is-loaded .ha-area { opacity: 1; }

.ha-glow, .ha-line {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2s cubic-bezier(.16, 1, .3, 1) .85s;
}
/* a wider, dimmer copy under the line reads as bloom without an SVG filter */
.ha-glow { stroke: var(--steel-400); stroke-width: 18; opacity: .12; }
.ha-line { stroke: url(#ha-line); stroke-width: 6; }
.is-loaded .ha-glow, .is-loaded .ha-line { stroke-dashoffset: 0; }

.ha-head {
  fill: none; stroke: var(--brass-500); stroke-width: 7;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform-origin: 588px 150px; scale: .4;
  transition: opacity .5s var(--ease-out) 2.5s, scale .7s cubic-bezier(.34, 1.56, .64, 1) 2.5s;
}
.is-loaded .ha-head { opacity: 1; scale: 1; }

.ha-node {
  fill: var(--stone-050); stroke: var(--navy-500); stroke-width: 3;
  opacity: 0; scale: .2; transform-box: fill-box; transform-origin: 50% 50%;
  transition: opacity .45s var(--ease-out), scale .6s cubic-bezier(.34, 1.56, .64, 1);
}
.is-loaded .ha-node { opacity: 1; scale: 1; }
.is-loaded .ha-node:nth-of-type(1) { transition-delay: 1.55s; }
.is-loaded .ha-node:nth-of-type(2) { transition-delay: 1.75s; }
.is-loaded .ha-node:nth-of-type(3) { transition-delay: 1.95s; }

/* a charge running the plot line, only where offset-path is supported */
.ha-pulse { fill: var(--brass-500); opacity: 0; }
@supports (offset-path: path('M0 0 L1 1')) {
  .is-loaded .ha-pulse {
    offset-path: path('M64 512 L214 372 L316 436 L470 232 L588 150');
    offset-rotate: 0deg;
    animation: haPulse 5.5s cubic-bezier(.5, 0, .5, 1) 3s infinite;
  }
}
@keyframes haPulse {
  0% { offset-distance: 0%; opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* On a phone the dial lands square behind the headline. Push it up and out,
   and drop the fine detail that would only read as noise at that size. */
@media (max-width: 760px) {
  .hero__art {
    top: 30%; right: -40vw; width: 122vw; opacity: .38;
    -webkit-mask-image: linear-gradient(120deg, transparent 2%, rgba(0, 0, 0, .3) 24%, #000 56%);
    mask-image: linear-gradient(120deg, transparent 2%, rgba(0, 0, 0, .3) 24%, #000 56%);
  }
  .is-loaded .ha-bezel { opacity: .3; }
  .ha-area, .ha-node { display: none; }
}

.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__title { font-size: var(--fs-display); line-height: .92; letter-spacing: -0.042em; max-width: 15ch; }
.hero .lead { color: var(--slate-600); max-width: 52ch; margin-top: clamp(1.15rem, 2.4vw, 1.75rem); }
.hero .btn-row { margin-top: clamp(1.75rem, 3.2vw, 2.6rem); }
.hero .lead, .hero .btn-row {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
}
.is-loaded .hero .lead { opacity: 1; transform: none; transition-delay: .55s; }
.is-loaded .hero .btn-row { opacity: 1; transform: none; transition-delay: .68s; }

/* facts strip that overlaps the hero's lower edge */
.hero-facts {
  position: relative; z-index: 5; margin-top: clamp(-3.5rem, -4vw, -2rem);
}
.hero-facts__inner {
  background: #fff; border: 1px solid var(--stone-200);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  display: grid; grid-template-columns: 1fr; overflow: hidden;
}
@media (min-width: 640px) { .hero-facts__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hero-facts__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero-fact {
  padding: clamp(1.35rem, 2.4vw, 1.9rem) clamp(1.25rem, 2.2vw, 1.85rem);
  border-bottom: 1px solid var(--stone-200);
}
.hero-fact:last-child { border-bottom: 0; }
@media (min-width: 640px) {
  .hero-fact { border-right: 1px solid var(--stone-200); }
  .hero-fact:nth-child(2n) { border-right: 0; }
  .hero-fact:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (min-width: 1000px) {
  .hero-fact { border-bottom: 0; border-right: 1px solid var(--stone-200); }
  .hero-fact:nth-child(2n) { border-right: 1px solid var(--stone-200); }
  .hero-fact:last-child { border-right: 0; }
}
.hero-fact dt { font: 500 var(--fs-mono)/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--brass-600); margin-bottom: .5rem; }
.hero-fact dd { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--slate-600); }
.hero-fact dd strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.85rem; line-height: 1.05; letter-spacing: -0.01em; color: var(--ink-900); margin-bottom: .2rem; }

/* interior page hero */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink-900); color: var(--sky-100);
  padding-block: clamp(3.75rem, 11vw, 7.5rem) clamp(3.25rem, 8vw, 5.5rem);
}
.page-hero__media { position: absolute; inset: 0; z-index: -3; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(80% 90% at 8% 0%, rgba(30, 84, 144, .42), transparent 60%),
    linear-gradient(180deg, rgba(6, 20, 36, .72), rgba(6, 20, 36, .93));
}
.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: .16; mix-blend-mode: overlay;
}
.page-hero .h1 { max-width: 17ch; letter-spacing: -0.036em; }
.page-hero .lead { color: #c3d4e6; margin-top: 1.15rem; }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  font: 400 var(--fs-mono)/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: #8ba2bb; margin-bottom: 1.5rem; list-style: none;
}
.crumbs li { display: flex; align-items: center; gap: .55rem; }
.crumbs li + li::before { content: '/'; color: var(--brass-400); opacity: .7; }
.crumbs a:hover { color: var(--brass-300); }
.crumbs [aria-current] { color: var(--sky-100); }

/* --------------------------------------------------------- 10 SERVICE INDEX */
.svc-index { position: relative; border-top: 1px solid var(--line); }
.svc-row {
  position: relative; display: grid; align-items: center;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'num name go' 'media media media' 'blurb blurb blurb';
  gap: .35rem 1rem;
  padding: clamp(1.35rem, 3vw, 2.05rem) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-inline .5s var(--ease-out);
}
.svc-num {
  grid-area: num; font: 500 var(--fs-mono)/1 var(--mono); letter-spacing: .1em;
  color: var(--brass-500); transition: color .35s var(--ease), transform .5s var(--ease-out);
}
.svc-name {
  grid-area: name; font-size: clamp(1.32rem, 1rem + 1.6vw, 2.35rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.1;
  transition: transform .55s var(--ease-out), color .35s var(--ease);
}
.svc-go {
  grid-area: go; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  color: var(--muted); flex: none;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease-out);
}
.svc-blurb { grid-area: blurb; margin: .35rem 0 0; color: var(--muted); font-size: .96rem; max-width: 56ch; }
.svc-media {
  grid-area: media; margin: .9rem 0 .35rem;
  border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line);
}
.svc-media img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }

@media (min-width: 900px) {
  .svc-row {
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr) clamp(104px, 11vw, 144px) auto;
    grid-template-areas: 'num name blurb media go';
    align-items: center; gap: 1.5rem;
  }
  .svc-blurb { margin: 0; }
  /* The preview has its own reserved column. It used to be absolutely
     positioned across the row, which meant that on hover it covered the very
     blurb text the visitor was reading. Reserving the space also means the
     reveal causes no layout shift. */
  .svc-media {
    grid-area: media; margin: 0; width: 100%;
    opacity: 0; scale: .9; rotate: -2deg;
    box-shadow: var(--shadow-md); pointer-events: none;
    transition: opacity .45s var(--ease), scale .55s var(--ease-out), rotate .55s var(--ease-out);
  }
  .svc-media img { aspect-ratio: 3 / 2; }
  .svc-row:hover .svc-media, .svc-row:focus-visible .svc-media { opacity: 1; scale: 1; rotate: 0deg; }
  .svc-row:hover .svc-name { transform: translateX(8px); }
  .svc-row:hover .svc-num { transform: translateX(4px); }
}
.svc-row:hover { background: color-mix(in srgb, var(--brass-400) 7%, transparent); }
.svc-row:hover .svc-go { background: var(--brass-500); border-color: var(--brass-500); color: #fff; transform: rotate(-45deg); }
.svc-row:hover .svc-name { color: var(--ink-900); }
.band--ink .svc-row:hover .svc-name,
.band--deep .svc-row:hover .svc-name { color: #fff; }

/* ---------------------------------------------------------------- 11 CARDS */
.card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--stone-200); border-radius: var(--r-md);
  padding: clamp(1.5rem, 2.6vw, 2.15rem);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .4s var(--ease);
}
.band--ink .card, .band--deep .card {
  background: rgba(255, 255, 255, .035); border-color: rgba(154, 198, 238, .16);
}
.card::after {
  content: ''; position: absolute; right: 0; top: 0; width: 26px; height: 26px;
  border-top: 2px solid var(--brass-500); border-right: 2px solid var(--brass-500);
  border-top-right-radius: var(--r-md);
  opacity: 0; transition: opacity .4s var(--ease), width .45s var(--ease-out), height .45s var(--ease-out);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--stone-300); }
.band--ink .card:hover, .band--deep .card:hover { border-color: rgba(200, 154, 91, .45); }
.card:hover::after { opacity: 1; width: 38px; height: 38px; }
.card .h3, .card .h4 { margin-bottom: .6rem; }
.card p { color: var(--muted); font-size: .95rem; }
.card__icon {
  width: 44px; height: 44px; margin-bottom: 1.15rem;
  display: grid; place-items: center; border-radius: 10px;
  background: linear-gradient(145deg, var(--navy-500), var(--ink-800)); color: var(--azure-200);
}
.card__icon svg { width: 22px; height: 22px; }
.card__num {
  font: 500 var(--fs-mono)/1 var(--mono); letter-spacing: .12em;
  color: var(--brass-500); margin-bottom: 1rem;
}
.card--link:hover .tlink svg { transform: translateX(5px); }
.card__foot { margin-top: auto; padding-top: 1.25rem; }

/* feature card with an image cap */
.fcard {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  border: 1px solid var(--stone-200); background: #fff;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease);
}
.fcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.fcard__media { overflow: hidden; }
.fcard__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s var(--ease-out); }
.fcard:hover .fcard__media img { transform: scale(1.06); }
.fcard__body { padding: clamp(1.35rem, 2.4vw, 1.85rem); display: flex; flex-direction: column; flex: 1; }
.fcard__body p { color: var(--muted); font-size: .95rem; }
.fcard__body .tlink { margin-top: auto; padding-top: 1.15rem; }

/* ---------------------------------------------------------------- 12 STATS */
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { padding: clamp(1.5rem, 3vw, 2.35rem) clamp(.5rem, 1.5vw, 1.5rem); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.stat:nth-child(2n) { border-right: 0; }
@media (min-width: 900px) {
  .stat { border-bottom: 0; border-right: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 1px solid var(--line); }
  .stat:last-child { border-right: 0; }
}
.stat__value {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 1.4rem + 4vw, 4.5rem); line-height: 1;
  letter-spacing: -0.02em; color: var(--ink-900);
  display: flex; align-items: baseline; gap: .05em;
}
.band--ink .stat__value, .band--deep .stat__value { color: #fff; }
.stat__value sup { font-size: .42em; color: var(--brass-500); top: -.65em; position: relative; }
.stat__label {
  margin-top: .7rem; font: 400 var(--fs-mono)/1.55 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

/* -------------------------------------------------------------- 13 MARQUEE */
.marquee {
  position: relative; overflow: hidden; padding-block: 1.1rem;
  border-block: 1px solid var(--line); background: var(--ink-900); color: var(--sky-100);
  --line: rgba(154, 198, 238, .16);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 1.6rem; padding-inline: .8rem;
  font: 500 .82rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: #a9bed4; white-space: nowrap;
}
.marquee__item::after { content: '◆'; color: var(--brass-400); font-size: .55rem; letter-spacing: 0; }

/* -------------------------------------------------------------- 14 PROCESS */
.process { position: relative; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .process { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { position: relative; padding-top: 2.35rem; }
.step::before {
  content: ''; position: absolute; left: 0; right: -1.2rem; top: 7px; height: 1px;
  background: var(--line);
}
.step:last-child::before { right: 0; }
.step::after {
  content: ''; position: absolute; left: 0; top: 1px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--stone-050); border: 2px solid var(--brass-500);
}
.band--ink .step::after, .band--deep .step::after { background: var(--ink-800); }
.step__num { font: 500 var(--fs-mono)/1 var(--mono); letter-spacing: .14em; color: var(--brass-500); margin-bottom: .85rem; }
.step h3 { font-size: var(--fs-h4); margin-bottom: .55rem; }
.step p { color: var(--muted); font-size: .94rem; }

/* ------------------------------------------------------------ 15 PORTFOLIO */
.filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.chip {
  display: inline-flex; align-items: center; min-height: 44px;   /* iOS touch target */
  padding: .55rem 1.1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--stone-300); background: transparent;
  font: 500 .82rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate-600);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip:hover { border-color: var(--ink-900); color: var(--ink-900); }
.chip[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

/* Uniform tiles on purpose. Mixed column spans tile beautifully until the
   category filter hides items and leaves ragged holes mid-grid, so the rhythm
   comes from the imagery and hover states instead of the geometry. */
.work-grid { display: grid; gap: clamp(.85rem, 1.6vw, 1.35rem); grid-template-columns: 1fr; }
@media (min-width: 560px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.work {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  background: var(--ink-800);
  transition: opacity .45s var(--ease), transform .45s var(--ease-out);
}
.work.is-hidden { display: none; }
.work img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .9s var(--ease-out), filter .6s var(--ease); }
.work:hover img { transform: scale(1.055); }
.work__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 20, 36, 0) 32%, rgba(6, 20, 36, .88) 100%);
  opacity: .92; transition: opacity .5s var(--ease);
}
.work__body {
  position: absolute; inset: auto 0 0 0; padding: clamp(1rem, 2vw, 1.5rem); color: #fff;
  transform: translateY(0); transition: transform .55s var(--ease-out);
}
/* These are spans (they live inside an <a>), so they need explicit blocks. */
.work__cat { display: block; font: 400 var(--fs-mono)/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-300); margin-bottom: .35rem; }
.work__title { display: block; font-size: clamp(1rem, .9rem + .55vw, 1.28rem); font-weight: 600; letter-spacing: -0.018em; line-height: 1.22; }
.work__meta {
  display: block; font-size: .86rem; color: #b4c6da; margin-top: .4rem;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .55s var(--ease-out), opacity .45s var(--ease);
}
.work:hover .work__meta { max-height: 5rem; opacity: 1; }
.work::after {
  content: ''; position: absolute; inset: 10px; border: 1px solid rgba(221, 187, 134, .55);
  border-radius: 6px; opacity: 0; transform: scale(1.02);
  transition: opacity .45s var(--ease), transform .5s var(--ease-out);
  pointer-events: none;
}
.work:hover::after { opacity: 1; transform: none; }

/* ---------------------------------------------------------- 16 TESTIMONIALS */
.quote-wrap { position: relative; }
.quote-mark {
  font-family: var(--serif); font-size: clamp(5rem, 12vw, 9rem); line-height: .7;
  color: var(--brass-400); opacity: .32; user-select: none;
}
.quote {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.45rem, 1rem + 2vw, 2.6rem); line-height: 1.24; letter-spacing: -0.012em;
  max-width: 24ch;
}
.band--ink .quote, .band--deep .quote { color: #fff; }
.quote-attr { margin-top: 1.6rem; }
.quote-attr strong { display: block; font-size: .98rem; font-weight: 600; }
.quote-attr span { font: 400 var(--fs-mono)/1.6 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }

.tcard {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(1.5rem, 2.6vw, 2.15rem);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: #fff;
}
.band--ink .tcard, .band--deep .tcard { background: rgba(255, 255, 255, .04); }
.tcard blockquote { margin: 0; font-size: 1.06rem; line-height: 1.68; color: var(--slate-600); }
.band--ink .tcard blockquote,
.band--deep .tcard blockquote { color: var(--sky-100); }
.tcard blockquote::before { content: '“'; font-family: var(--serif); font-size: 2.4rem; line-height: 0; color: var(--brass-400); vertical-align: -.32em; margin-right: .12em; }
.tcard footer { margin-top: auto; padding-top: .35rem; border-top: 1px solid var(--line); }
.tcard footer strong { display: block; font-size: .93rem; }
.tcard footer span { font: 400 var(--fs-mono)/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.band--ink .tcard footer span,
.band--deep .tcard footer span { color: #a8bdd4; }

/* ------------------------------------------------------------- 17 FEATURES */
.ticks { list-style: none; display: grid; gap: .75rem; }
.ticks li { position: relative; padding-left: 2rem; font-size: .97rem; line-height: 1.55; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .48em;
  width: 11px; height: 6px; border-left: 2px solid var(--brass-500); border-bottom: 2px solid var(--brass-500);
  transform: rotate(-45deg);
}
.ticks--2 { grid-template-columns: 1fr; }
@media (min-width: 680px) { .ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 2rem; } }

.spec-list { list-style: none; border-top: 1px solid var(--line); }
.spec-list li {
  display: grid; grid-template-columns: 1fr; gap: .15rem;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 620px) { .spec-list li { grid-template-columns: 13rem 1fr; gap: 1.5rem; align-items: baseline; } }
.spec-list dt, .spec-list .k {
  font: 500 var(--fs-mono)/1.6 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--brass-600);
}
.spec-list .v { color: var(--slate-600); font-size: .97rem; }
.band--ink .spec-list .v, .band--deep .spec-list .v { color: #b8cadd; }

.figure { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--ink-800); }
.figure img { width: 100%; }
.figure figcaption {
  padding: .85rem 1.1rem; font: 400 var(--fs-mono)/1.5 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  background: var(--stone-050); border-top: 1px solid var(--line);
}
.band--ink .figure figcaption, .band--deep .figure figcaption { background: rgba(255, 255, 255, .04); }
.figure--offset { position: relative; }
@media (min-width: 940px) {
  .figure--offset::before {
    content: ''; position: absolute; inset: 1.75rem -1.75rem -1.75rem 1.75rem; z-index: -1;
    border: 1px solid var(--brass-400); border-radius: var(--r-md); opacity: .5;
  }
}

/* ------------------------------------------------------------ 18 ACCORDION */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: clamp(1.02rem, .96rem + .4vw, 1.2rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.4;
  color: var(--fg); transition: color .3s var(--ease);
}
.acc-btn:hover { color: var(--brass-600); }
.acc-icon { position: relative; flex: none; width: 22px; height: 22px; margin-top: .22em; }
.acc-icon::before, .acc-icon::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: var(--brass-500);
  transition: transform .45s var(--ease-out), opacity .3s var(--ease);
}
.acc-icon::before { width: 15px; height: 2px; transform: translate(-50%, -50%); }
.acc-icon::after { width: 2px; height: 15px; transform: translate(-50%, -50%); }
.acc-btn[aria-expanded="true"] .acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.acc-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-out);
}
.acc-panel > div { overflow: hidden; }
/* Driven by a class on .acc-item, not by `.acc-btn[aria-expanded] + .acc-panel`:
   the button is wrapped in an <h2> for document outline, so it is not the
   panel's sibling and the adjacent selector never matches. A class also avoids
   depending on :has() support. JS keeps it in sync with aria-expanded. */
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel p { color: var(--muted); max-width: 72ch; padding-bottom: 1.5rem; }
.acc-panel p:first-child { padding-top: .1rem; }

/* ---------------------------------------------------------------- 19 FORMS */
.form { display: grid; gap: 1.15rem; }
.form-grid { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field > label, .fieldset > legend {
  font: 500 var(--fs-mono)/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate-600); padding: 0;
}
.field .req { color: var(--brass-600); }
.field .hint { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.field input, .field select, .field textarea {
  width: 100%; padding: .92rem 1.05rem; min-height: 52px;
  background: #fff; color: var(--ink-900);
  border: 1px solid var(--stone-300); border-radius: var(--r-sm);
  font-size: 1rem; line-height: 1.5;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
  appearance: none;
}
.field textarea { min-height: 148px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23667485' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.05rem center; padding-right: 2.6rem;
}
.field input::placeholder, .field textarea::placeholder { color: #9aa5b2; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--slate-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--ink-900);
  box-shadow: 0 0 0 3px rgba(184, 132, 63, .22);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #b4442f; }

.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .7rem; }
.choice-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  padding: .58rem 1.05rem; border: 1px solid var(--stone-300); border-radius: 999px;
  font-size: .88rem; cursor: pointer; background: #fff;
  transition: border-color .28s var(--ease), background-color .28s var(--ease), color .28s var(--ease);
}
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--stone-300); flex: none;
  transition: background-color .28s var(--ease), transform .35s var(--ease-out);
}
.choice:hover { border-color: var(--slate-500); }
.choice:has(input:checked) { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.choice:has(input:checked)::before { background: var(--brass-400); transform: scale(1.15); }
.choice:has(input:focus-visible) { outline: 2px solid var(--brass-500); outline-offset: 3px; }

.consent { display: flex; align-items: flex-start; gap: .75rem; font-size: .88rem; color: var(--muted); line-height: 1.55; }
.consent input { width: 20px; height: 20px; margin-top: .18em; flex: none; accent-color: var(--brass-500); }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: .84rem; color: var(--muted); line-height: 1.6; }
.form-status {
  display: none; align-items: flex-start; gap: .85rem;
  padding: 1.1rem 1.25rem; border-radius: var(--r-sm); font-size: .95rem; line-height: 1.6;
}
.form-status.is-visible { display: flex; }
.form-status--ok { background: #eef4ec; border: 1px solid #bfd6b8; color: #2c4a24; }
.form-status--err { background: #fbeeeb; border: 1px solid #e4c0b6; color: #7d2c17; }
.form-status strong { display: block; margin-bottom: .15rem; }
.btn.is-busy { pointer-events: none; }
.btn.is-busy::after {
  content: ''; width: 15px; height: 15px; margin-left: .1rem;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- 20 CTA BAND */
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink-900); color: var(--sky-100);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.cta__media { position: absolute; inset: 0; z-index: -3; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.cta::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(105deg, rgba(6, 20, 36, .96) 26%, rgba(22, 64, 107, .72) 100%);
}
.cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: .16; mix-blend-mode: overlay;
}
.cta__inner { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cta__inner { grid-template-columns: 1.35fr .65fr; } }
.cta .h2 { max-width: 18ch; color: #fff; }
.cta .lead { color: #b8cadd; }
.cta__actions { display: flex; flex-direction: column; gap: .8rem; }
@media (min-width: 900px) { .cta__actions { align-items: stretch; } }

/* --------------------------------------------------------------- 21 FOOTER */
.site-footer {
  position: relative; background: var(--ink-900); color: #b8cadd;
  padding-block: clamp(3.25rem, 6vw, 5rem) 1.75rem;
  --line: rgba(154, 198, 238, .15);
}
.site-footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(154, 198, 238, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 198, 238, .045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(100% 80% at 20% 0%, #000, transparent 75%);
}
.site-footer > .shell { position: relative; }
.footer-top {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr;
  padding-bottom: clamp(2.25rem, 4vw, 3.25rem); border-bottom: 1px solid var(--line);
}
@media (min-width: 700px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .footer-top { grid-template-columns: 1.5fr 1fr 1fr 1.15fr; } }
.footer-brand img { height: 76px; width: auto; margin-bottom: 1.35rem; }
.footer-brand p { font-size: .94rem; max-width: 34ch; color: #98adc4; }
.footer-col h3 {
  font: 500 var(--fs-mono)/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-300); margin-bottom: 1.15rem;
}
.footer-col ul { list-style: none; display: grid; gap: .62rem; }
.footer-col a { font-size: .93rem; transition: color .25s var(--ease), padding-left .3s var(--ease); }
.footer-col a:hover { color: #fff; padding-left: .3rem; }
.footer-contact { display: grid; gap: .85rem; font-size: .93rem; font-style: normal; }
.footer-contact a:hover { color: var(--brass-300); }
.footer-contact .k { display: block; font: 400 var(--fs-mono)/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: #7f95ad; margin-bottom: .1rem; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; align-items: center;
  padding-top: 1.6rem; font-size: .82rem; color: #7f95ad;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-left: auto; }
.footer-bottom a:hover { color: #fff; }
.footer-credit { color: #6f869f; }
.footer-credit a {
  color: #93a8be;
  border-bottom: 1px solid rgba(154, 198, 238, .28);
  padding-bottom: 1px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.footer-credit a:hover { color: var(--brass-300); border-bottom-color: var(--brass-400); }
@media (max-width: 720px) {
  /* keep the credit on its own line rather than crowding the legal links */
  .footer-bottom nav { margin-left: 0; }
  .footer-credit { flex-basis: 100%; }
}

/* --------------------------------------------------------------- 22 MISC */
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .95rem; border-radius: 999px; border: 1px solid var(--line);
  font: 500 var(--fs-mono)/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.pill--live { border-color: rgba(200, 154, 91, .5); color: var(--brass-500); }
.pill--live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--brass-500);
  animation: pulse 2.2s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 132, 63, .55); }
  60% { box-shadow: 0 0 0 8px rgba(184, 132, 63, 0); }
}

.area-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.area-list li {
  padding: .48rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .86rem; color: var(--muted);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.area-list li:hover { border-color: var(--brass-400); color: var(--fg); }

.rule-arc { position: relative; height: 1px; background: var(--line); margin-block: clamp(2.5rem, 5vw, 4rem); }
.rule-arc::after {
  content: ''; position: absolute; right: 0; top: 50%; translate: 0 -50%;
  width: 9px; height: 9px; border-top: 2px solid var(--brass-500); border-right: 2px solid var(--brass-500);
  transform: rotate(45deg);
}

.prose h2 { font-size: var(--fs-h3); margin: 2.5rem 0 .85rem; }
.prose h3 { font-size: var(--fs-h4); margin: 2rem 0 .6rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--slate-600); max-width: 74ch; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.35rem; display: grid; gap: .45rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--brass-600); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink-900); }

.jobcard {
  display: grid; gap: 1rem; align-items: center; grid-template-columns: 1fr;
  padding: clamp(1.35rem, 2.4vw, 1.85rem) 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) { .jobcard { grid-template-columns: 1.6fr 1fr auto; gap: 2rem; } }
.jobcard h3 { font-size: var(--fs-h4); margin-bottom: .3rem; }
.jobcard p { color: var(--muted); font-size: .93rem; margin: 0; }
.jobcard__meta { display: flex; flex-wrap: wrap; gap: .45rem; }
.jobcard__meta span {
  padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  font: 400 var(--fs-mono)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

.map-frame {
  border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line);
  background: var(--ink-800); aspect-ratio: 16 / 10; position: relative;
}
.map-frame iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; }
/* Sits behind the iframe. The embed is lazy-loaded and third party, so if it is
   slow or blocked by a privacy extension the panel still reads as intentional. */
.map-frame__fallback {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center; gap: .5rem; padding: 1.5rem; text-align: center;
  font: 400 var(--fs-mono)/1.7 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: #7f95ad;
}
.map-frame__fallback a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--brass-300); text-decoration: underline; text-underline-offset: 3px;
}

.notice {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem 1.15rem; border-radius: var(--r-sm);
  border: 1px dashed var(--brass-400); background: rgba(200, 154, 91, .08);
  font-size: .88rem; line-height: 1.6; color: var(--slate-600);
}
.notice svg { flex: none; margin-top: .18em; color: var(--brass-600); }

.center { text-align: center; }
.center .lead, .center .h2, .center .section-head .h2 { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: clamp(1rem, 2vw, 1.5rem); }
.mt-2 { margin-top: clamp(1.75rem, 3.2vw, 2.75rem); }
.mt-3 { margin-top: clamp(2.5rem, 5vw, 4rem); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- 23 PRINT */
@media print {
  .site-header, .drawer, .cta, .site-footer, .scroll-progress, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .line-mask > span { transform: none !important; }
}