/* ───────────────────────────────────────────────────────────────────
   Spectrum Land Services
   Institutional design system. Inter variable, navy + white, restrained.
   Reference frame: Bechtel, AECOM, McKinsey — sober corporate confidence.
   ─────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Palette: navy + white + greys. Single accent. ─── */
  --ink-950:   #0A1623;   /* deepest — for dark surfaces */
  --ink-900:   #0F1E2E;   /* corporate navy, primary */
  --ink-800:   #1A2939;
  --ink-700:   #1F2937;   /* charcoal */
  --ink-600:   #374151;
  --ink-500:   #4B5563;
  --ink-400:   #6B7280;   /* muted grey for secondary text */
  --ink-300:   #9CA3AF;
  --ink-200:   #D1D5DB;
  --ink-100:   #E5E7EB;   /* hairlines */
  --ink-50:    #F3F4F6;
  --surface:   #FFFFFF;
  --surface-alt: #F8F9FB; /* softest off-white */
  --surface-warm: #F5F4F0; /* almost imperceptible warm grey for breaks */

  /* Accent — used MINIMALLY. Logo, small underlines, focus rings only. */
  --accent:     #B8924A;  /* aged brass, used as 1px hairlines and logo arc */
  --accent-dim: #8C6F38;

  /* Legacy aliases (so old class refs don't break — point them to the new system) */
  --navy-900:  var(--ink-900);
  --navy-800:  var(--ink-800);
  --navy-700:  var(--ink-700);
  --navy-100:  var(--ink-50);
  --navy-50:   var(--surface-alt);
  --copper-700: var(--accent);
  --copper-600: var(--accent);
  --copper-500: var(--accent);
  --copper-100: var(--ink-100);
  --copper-50:  var(--surface-alt);
  --slate-900: var(--ink-900);
  --slate-700: var(--ink-600);
  --slate-500: var(--ink-400);
  --slate-300: var(--ink-300);
  --slate-200: var(--ink-100);
  --slate-100: var(--ink-50);
  --slate-50:  var(--surface-alt);
  --cream:     var(--surface-alt);
  --pearl:     var(--surface);
  --white:     #FFFFFF;
  --black:     #000000;
  --gold-500:  var(--accent);
  --gold-700:  var(--accent-dim);
  --gold-100:  var(--ink-100);
  --gold-50:   var(--surface-alt);
  --stone-700: var(--ink-600);
  --stone-500: var(--ink-400);
  --stone-200: var(--ink-100);
  --stone-100: var(--ink-50);

  /* ─── Type ─── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* ─── Layout ─── */
  --container: 1320px;
  --container-tight: 920px;

  /* ─── Motion ─── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Shadows — extremely subtle ─── */
  --shadow-sm: 0 1px 2px rgba(15, 30, 46, 0.04);
  --shadow:    0 6px 20px -10px rgba(15, 30, 46, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(15, 30, 46, 0.25);
}

/* ───────────────────── Reset + base ───────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03';  /* Inter alt forms */
}
img, svg { max-width: 100%; display: block; }
a {
  color: var(--ink-900);
  text-decoration: none;
  transition: color 0.2s, opacity 0.2s;
}
a:hover { color: var(--accent-dim); }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--ink-900); color: white; }

/* ───────────────────── Typography ───────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-900);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.5rem, 6.2vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
h2 {
  font-size: clamp(1.875rem, 3.8vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.06;
}
h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.018em;
}
h4 { font-size: 1rem; font-weight: 600; }

/* Brand accent — used to color key value words inside headlines and copy.
   Upright sans (no italics, no weight change) — just colored, so it reads
   institutional rather than editorial. */
em, .accent {
  font-style: normal;
  color: var(--accent);
  font-weight: inherit;
}
.section--ink em, .section--ink .accent,
.hero em, .hero .accent,
.pageheader em, .pageheader .accent,
.cta-band em, .cta-band .accent,
.footer em, .footer .accent {
  color: #D4B274;  /* brighter brass for legibility on dark surfaces */
}

p { margin: 0 0 1em; text-wrap: pretty; }
.lead {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  color: var(--ink-500);
  max-width: 62ch;
  line-height: 1.65;
  font-weight: 400;
}

/* Eyebrow — small caps treatment, single weight */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 1.25rem;
}

/* ───────────────────── Layout ───────────────────── */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.container--tight {
  max-width: var(--container-tight);
  margin: 0 auto;
  padding: 0 32px;
}
.section { padding: clamp(96px, 11vw, 160px) 0; }
.section--alt   { background: var(--surface-alt); }
.section--warm  { background: var(--surface-warm); }
.section--ink {
  background: var(--ink-900);
  color: white;
  position: relative;
  overflow: hidden;
}
.section--ink h1, .section--ink h2, .section--ink h3 { color: white; }
.section--ink p, .section--ink .lead { color: rgba(255, 255, 255, 0.72); }
.section--ink .eyebrow { color: rgba(255, 255, 255, 0.55); }
.section--ink a { color: white; }

/* Section head */
.section-head {
  max-width: 720px;
  margin-bottom: 64px;
}
.section-head--centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ───────────────────── Nav ───────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #FFFFFF;
  border-bottom: 1px solid transparent;
  transition: none;
  isolation: isolate; /* contain logo's mix-blend-mode */
}
.nav.is-scrolled {
  background: #FFFFFF;
  border-bottom-color: var(--ink-100);
  box-shadow:
    0 1px 0 rgba(15, 30, 46, 0.04),
    0 12px 28px -16px rgba(15, 30, 46, 0.16);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav.is-scrolled .nav__inner { padding: 16px 32px; }
.nav__logo { display: flex; align-items: center; text-decoration: none; }
.nav__logo-img {
  width: auto;
  height: 56px;
  display: block;
}
.nav.is-scrolled .nav__logo-img { height: 42px; }
@media (max-width: 480px) {
  .nav__logo-img { height: 44px; }
  .nav.is-scrolled .nav__logo-img { height: 38px; }
}

/* ───────────────────── Premium SVG nav brand ───────────────────── */
.nav__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  padding: 6px 8px;
  margin-left: -8px;
  transition: transform 0.4s var(--ease-out);
}
.nav__brand-svg {
  width: 240px;
  height: 52px;
  display: block;
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out);
  overflow: visible;
}
.nav.is-scrolled .nav__brand-svg { width: 204px; height: 44px; }

/* Hover — gentle lift, subtle glow under the wordmark */
.nav__brand:hover { transform: translateY(-1px); }
.nav__brand::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 6px;
  height: 18px;
  background: radial-gradient(ellipse at center, rgba(184,146,74,0.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}
.nav__brand:hover::after { opacity: 1; }

/* The brass swoosh draws itself in once on load */
.nav__brand-arc {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: navArcDraw 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
  filter: drop-shadow(0 1px 2px rgba(184, 146, 74, 0.25));
}
@keyframes navArcDraw {
  to { stroke-dashoffset: 0; }
}

/* Mobile sizing */
@media (max-width: 640px) {
  .nav__brand-svg { width: 196px; height: 42px; }
  .nav.is-scrolled .nav__brand-svg { width: 168px; height: 36px; }
}
@media (max-width: 380px) {
  .nav__brand-svg { width: 168px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__brand-arc { animation: none; stroke-dashoffset: 0; }
  .nav__brand, .nav__brand-svg { transition: none; }
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__menu a {
  color: var(--ink-500);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.005em;
  position: relative;
  padding: 10px 0;
  transition: color 0.2s;
}
.nav__menu a:hover { color: var(--ink-900); }
.nav__menu a[aria-current="page"] {
  color: var(--ink-900);
  font-weight: 600;
}
.nav__menu a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
}
/* Contact tab — identical to other nav links. Plain text, no border, no bg. */
.nav__cta {
  background: transparent !important;
  border: none !important;
  padding: 10px 0 !important;
  margin-left: 0 !important;
  border-radius: 0 !important;
  /* Inherits color/weight/size from .nav__menu a — same active underline rule applies */
}
.nav__cta:hover { background: transparent !important; }
.nav__toggle {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  color: var(--ink-900);
}

@media (max-width: 820px) {
  .nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    background: white;
    padding: 16px 32px 28px;
    border-bottom: 1px solid var(--ink-100);
    gap: 0;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu a { width: 100%; padding: 14px 0; font-size: 1rem; }
  .nav__menu li:not(:last-child) { border-bottom: 1px solid var(--ink-100); }
  .nav__toggle { display: block; }
  .nav__cta {
    border-left: none;
    padding: 14px 0;
    margin-left: 0;
  }
  .nav__cta[aria-current="page"]::before { left: 0; }
}

/* ───────────────────── Buttons ───────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 0;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0;
  border: 1px solid transparent;
  transition: background 0.25s var(--ease), color 0.25s, border-color 0.25s;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-sans);
}
.btn .btn-arrow { transition: transform 0.3s var(--ease-out); display: inline-block; font-size: 1.1em; }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn--primary {
  background: var(--ink-900);
  color: white !important;
  border-color: var(--ink-900);
}
.btn--primary:hover { background: var(--ink-700); border-color: var(--ink-700); }
.btn--ghost {
  background: transparent;
  color: white !important;
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
}
.btn--outline {
  background: transparent;
  color: var(--ink-900) !important;
  border-color: var(--ink-900);
}
.btn--outline:hover { background: var(--ink-900); color: white !important; }

/* ───────────────────── Hero ───────────────────── */

.hero {
  position: relative;
  min-height: clamp(640px, 88vh, 840px);
  display: flex;
  align-items: flex-end;
  color: white;
  overflow: hidden;
  background: var(--ink-900);
}
.hero__bg {
  position: absolute; inset: 0;
  background-image:
    /* darker upper-left/right corners — keeps focus on the sun */
    radial-gradient(ellipse 80% 60% at 55% 78%, transparent 0%, rgba(10,22,35,0.25) 55%, rgba(10,22,35,0.7) 100%),
    linear-gradient(to bottom, rgba(10, 22, 35, 0.35) 0%, rgba(10, 22, 35, 0.45) 60%, rgba(10, 22, 35, 0.85) 100%),
    url('https://images.unsplash.com/photo-1466611653911-95081537e5b7?auto=format&fit=crop&w=2880&q=85');
  background-size: cover;
  background-position: center 35%;
  animation: heroBreathe 32s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroBreathe {
  from { transform: scale(1.0); }
  to   { transform: scale(1.06); }
}

/* Subtle grid line texture on dark hero — adds depth without ornament */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 1;
}

/* ─────────── Cinematic sun ─────────── */
.hero__sun {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Wide horizon glow — illuminates the sky band where the sun sits */
.hero__sun-horizon {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: 56%;
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%,
      rgba(255, 195, 110, 0.55) 0%,
      rgba(232, 152, 70, 0.32) 18%,
      rgba(180, 100, 50, 0.18) 38%,
      rgba(40, 25, 35, 0) 70%);
  mix-blend-mode: screen;
  filter: blur(8px);
  animation: heroHorizon 9s ease-in-out infinite alternate;
}
@keyframes heroHorizon {
  from { opacity: 0.85; }
  to   { opacity: 1; }
}

/* Large soft outer halo */
.hero__sun-halo {
  position: absolute;
  left: 50%;
  top: 64%;
  width: 1200px;
  height: 1200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center,
    rgba(255, 220, 150, 0.6) 0%,
    rgba(255, 180, 90, 0.32) 12%,
    rgba(220, 130, 60, 0.18) 26%,
    rgba(140, 70, 40, 0.05) 50%,
    transparent 70%);
  mix-blend-mode: screen;
  filter: blur(4px);
  animation: heroHalo 7s ease-in-out infinite alternate;
}
@keyframes heroHalo {
  from { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
  to   { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* Rotating god-rays — long conic gradient spokes */
.hero__sun-rays {
  position: absolute;
  left: 50%;
  top: 64%;
  width: 1800px;
  height: 1800px;
  transform: translate(-50%, -50%);
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(255, 210, 140, 0.10) 6deg, transparent 14deg,
      transparent 38deg, rgba(255, 210, 140, 0.08) 44deg, transparent 52deg,
      transparent 78deg, rgba(255, 210, 140, 0.12) 84deg, transparent 92deg,
      transparent 118deg, rgba(255, 210, 140, 0.06) 124deg, transparent 132deg,
      transparent 158deg, rgba(255, 210, 140, 0.10) 164deg, transparent 172deg,
      transparent 198deg, rgba(255, 210, 140, 0.07) 204deg, transparent 212deg,
      transparent 238deg, rgba(255, 210, 140, 0.11) 244deg, transparent 252deg,
      transparent 278deg, rgba(255, 210, 140, 0.06) 284deg, transparent 292deg,
      transparent 318deg, rgba(255, 210, 140, 0.09) 324deg, transparent 332deg,
      transparent 358deg);
  mix-blend-mode: screen;
  filter: blur(2px);
  mask-image: radial-gradient(circle at center, black 8%, rgba(0,0,0,0.7) 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at center, black 8%, rgba(0,0,0,0.7) 30%, transparent 70%);
  animation: heroRays 60s linear infinite;
  opacity: 0.85;
}
@keyframes heroRays {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* The sun disc itself */
.hero__sun-core {
  position: absolute;
  left: 50%;
  top: 64%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%,
    #FFF6E0 0%,
    #FFD98A 22%,
    #F2A85A 45%,
    #C5743A 62%,
    rgba(140, 70, 40, 0.6) 80%,
    transparent 92%);
  box-shadow:
    0 0 80px 40px rgba(255, 200, 120, 0.5),
    0 0 200px 80px rgba(220, 130, 60, 0.35);
  mix-blend-mode: screen;
  animation: heroCore 5.5s ease-in-out infinite alternate;
  filter: blur(0.5px);
}
@keyframes heroCore {
  from {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 80px 40px rgba(255, 200, 120, 0.5), 0 0 200px 80px rgba(220, 130, 60, 0.35);
  }
  to {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 0 110px 55px rgba(255, 210, 130, 0.65), 0 0 260px 110px rgba(230, 140, 65, 0.45);
  }
}

/* Sharp horizontal lens-flare line that bisects the sun */
.hero__sun-flare {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 64%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 220, 150, 0) 25%,
    rgba(255, 230, 170, 0.7) 48%,
    rgba(255, 245, 200, 1) 50%,
    rgba(255, 230, 170, 0.7) 52%,
    rgba(255, 220, 150, 0) 75%,
    transparent 100%);
  transform: translateY(-50%);
  mix-blend-mode: screen;
  filter: blur(1px);
  animation: heroFlareBreath 6.5s ease-in-out infinite alternate;
}
@keyframes heroFlareBreath {
  from { opacity: 0.85; }
  to   { opacity: 1; transform: translateY(-50%) scaleY(1.5); }
}

/* Three drifting chromatic flare specs — vintage lens character */
.hero__sun-spec {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(2px);
  pointer-events: none;
}
.hero__sun-spec--1 {
  width: 14px; height: 14px;
  left: 38%; top: 50%;
  background: radial-gradient(circle, rgba(255,180,140,0.7) 0%, transparent 70%);
  animation: heroSpec1 14s ease-in-out infinite alternate;
}
.hero__sun-spec--2 {
  width: 24px; height: 24px;
  left: 62%; top: 56%;
  background: radial-gradient(circle, rgba(140,180,255,0.5) 0%, transparent 70%);
  animation: heroSpec2 17s ease-in-out infinite alternate;
}
.hero__sun-spec--3 {
  width: 10px; height: 10px;
  left: 72%; top: 48%;
  background: radial-gradient(circle, rgba(255,230,180,0.8) 0%, transparent 70%);
  animation: heroSpec3 12s ease-in-out infinite alternate;
}
@keyframes heroSpec1 {
  from { transform: translate(0, 0); opacity: 0.5; }
  to   { transform: translate(60px, -30px); opacity: 0.9; }
}
@keyframes heroSpec2 {
  from { transform: translate(0, 0); opacity: 0.4; }
  to   { transform: translate(-60px, 25px); opacity: 0.75; }
}
@keyframes heroSpec3 {
  from { transform: translate(0, 0); opacity: 0.55; }
  to   { transform: translate(-40px, -20px); opacity: 0.9; }
}

/* Film-grain noise — barely-there cinematic texture */
.hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  animation: heroGrain 1.6s steps(6) infinite;
}
@keyframes heroGrain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%, 3%); }
  40%  { transform: translate(2%, -2%); }
  60%  { transform: translate(-1%, -3%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__sun-rays, .hero__sun-core, .hero__sun-halo, .hero__sun-horizon,
  .hero__sun-flare, .hero__sun-spec, .hero__grain { animation: none !important; }
  .hero__bg { animation: none !important; }
}
.hero__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px 96px;
  width: 100%;
  z-index: 2;
}
.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 1.75rem;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.hero h1 {
  color: white;
  font-size: clamp(2.5rem, 6.4vw, 5rem);
  max-width: 1100px;
  margin-bottom: 1.5rem;
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.hero p {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  max-width: min(560px, 100%);
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}
.hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* Cinematic scroll indicator — vertical, brass tracer + drifting bead */
.hero__scroll {
  position: absolute;
  right: 40px;
  bottom: 36px;
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s, transform 0.4s var(--ease-out);
  padding: 8px 0;
}
.hero__scroll:hover {
  color: white;
  transform: translateY(2px);
}
.hero__scroll-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBE7B6 50%, #E0B96A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(184, 146, 74, 0.0);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
}
.hero__scroll-track {
  position: relative;
  width: 1px;
  height: 78px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.35) 18%,
    rgba(184, 146, 74, 0.65) 50%,
    rgba(255,255,255,0.35) 82%,
    rgba(255,255,255,0.05) 100%);
  overflow: visible;
}
/* Bead that drifts down the rail like a tracer */
.hero__scroll-bead {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF6E0 0%, #FBE7B6 35%, #B8924A 75%, #6B4F1F 100%);
  box-shadow:
    0 0 0 1px rgba(255, 240, 200, 0.35),
    0 0 14px 3px rgba(255, 200, 120, 0.75),
    0 0 30px 8px rgba(220, 160, 80, 0.35);
  transform: translate(-50%, -50%);
  animation: scrollBead 2.6s cubic-bezier(0.55, 0, 0.45, 1) infinite;
  will-change: top, opacity, transform;
}
@keyframes scrollBead {
  0%   { top: 0;     opacity: 0;   transform: translate(-50%, -50%) scale(0.6); }
  18%  { opacity: 1;                transform: translate(-50%, -50%) scale(1);   }
  82%  { opacity: 1;                transform: translate(-50%, -50%) scale(1);   }
  100% { top: 100%;  opacity: 0;   transform: translate(-50%, -50%) scale(0.6); }
}
/* Subtle brass after-glow that fills the rail */
.hero__scroll-track-fill {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 200, 120, 0.7) 40%,
    rgba(255, 200, 120, 0.7) 60%,
    transparent 100%);
  animation: scrollFill 2.6s cubic-bezier(0.55, 0, 0.45, 1) infinite;
  filter: blur(0.5px);
}
@keyframes scrollFill {
  0%   { height: 0;    top: 0; opacity: 0; }
  20%  { opacity: 0.8; }
  100% { height: 0;    top: 100%; opacity: 0; }
}
/* Chevron below — a quiet "go this way" cue */
.hero__scroll-chev {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: rgba(255, 240, 200, 0.7);
  animation: scrollChev 2.6s ease-in-out infinite;
}
.hero__scroll-chev svg { width: 100%; height: 100%; }
@keyframes scrollChev {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-bead, .hero__scroll-track-fill, .hero__scroll-chev { animation: none; }
}
@media (max-width: 640px) {
  .hero { min-height: 600px; align-items: flex-end; }
  .hero__inner { padding: 0 24px 64px; }
  .hero__scroll { display: none; }
}

/* ───────────────────── Page header (inner pages) ───────────────────── */

.pageheader {
  padding: clamp(160px, 17vw, 220px) 0 clamp(112px, 12vw, 156px);
  background: var(--ink-900);
  color: white;
  position: relative;
  overflow: hidden;
}
.pageheader__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.pageheader__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(10, 22, 35, 0.55) 0%,
    rgba(10, 22, 35, 0.75) 65%,
    rgba(10, 22, 35, 0.92) 100%);
}
.pageheader .container { position: relative; z-index: 2; }
.pageheader h1 {
  color: white;
  max-width: 980px;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: pretty;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.pageheader .lead {
  color: rgba(255, 255, 255, 0.85);
  max-width: 680px;
  margin-top: 1.5rem;
  overflow-wrap: break-word;
  word-wrap: break-word;
  text-wrap: pretty;
}
@media (max-width: 720px) {
  .pageheader { padding: clamp(120px, 22vw, 160px) 0 clamp(72px, 10vw, 96px); }
}
.pageheader .eyebrow {
  color: rgba(255, 255, 255, 0.72);
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  margin-bottom: 1.75rem;
}

/* ───────────────────── Sectors — quiet list, no marquee ───────────────────── */

.sectors {
  padding: clamp(64px, 7vw, 96px) 0;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--ink-100);
}
.sectors__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: center;
}
.sectors__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.sectors__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sectors__list li {
  font-size: 0.95rem;
  color: var(--ink-700);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sectors__list svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
  color: var(--accent);
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .sectors__inner { grid-template-columns: 1fr; gap: 32px; }
  .sectors__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .sectors__list { grid-template-columns: 1fr; }
}

/* ───────────────────── Split (two-col) ───────────────────── */

.split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 96px;
  align-items: center;
}
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }
.split__image {
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ink-50);
  position: relative;
}
.split__image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.split__image:hover img { transform: scale(1.03); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 56px; }
  .split__image { aspect-ratio: 16/10; }
  .split--reverse { direction: ltr; }
}

/* ───────────────────── Capability list (no icons — plain rule) ───────────────────── */

.caps {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  max-width: 540px;
}
.caps li {
  font-size: 1rem;
  color: var(--ink-700);
  padding: 18px 0;
  border-top: 1px solid var(--ink-100);
  display: flex;
  align-items: center;
  gap: 16px;
}
.caps li:last-child { border-bottom: 1px solid var(--ink-100); }
.caps__icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex-shrink: 0;
}
.caps__icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.caps__num {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-400);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  min-width: 24px;
}

/* ───────────────────── Practice rows (services on home) ───────────────────── */

.practice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 64px;
}
.practice__item {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s, border-color 0.5s;
  position: relative;
}
.practice__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.practice__image {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--ink-50);
  position: relative;
}
.practice__image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease-out), filter 0.5s var(--ease-out);
}
.practice__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 22, 35, 0.7) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  z-index: 1;
  pointer-events: none;
}
.practice__item:hover .practice__image img {
  transform: scale(1.05);
}
.practice__item:hover .practice__image::after { opacity: 1; }
.practice__num {
  position: absolute;
  top: 24px; left: 24px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: white;
  background: rgba(15, 30, 46, 0.85);
  padding: 6px 12px;
  z-index: 3;
}
.practice__cta {
  position: absolute;
  left: 24px; bottom: 24px;
  z-index: 2;
  color: white;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), gap 0.3s var(--ease-out);
}
.practice__cta::after { content: "→"; font-size: 1.1em; }
.practice__item:hover .practice__cta {
  opacity: 1;
  transform: translateY(0);
}
.practice__item:hover .practice__cta:hover { gap: 14px; }
.practice__body {
  padding: 36px 36px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.practice__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.practice__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-600);
}
.practice__bullets li {
  padding: 10px 0;
  border-top: 1px solid var(--ink-100);
  line-height: 1.5;
}
.practice__bullets li:first-child { border-top: none; padding-top: 0; }

/* Inherit svc__bullets style for inner pages */
.svc__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  color: var(--ink-600);
}
.svc__bullets li {
  padding: 14px 0;
  border-top: 1px solid var(--ink-100);
  line-height: 1.55;
}
.svc__bullets li:first-child { border-top: none; padding-top: 0; }
.svc__bullets li:last-child { border-bottom: 1px solid var(--ink-100); padding-bottom: 14px; }

@media (max-width: 900px) {
  .practice { grid-template-columns: 1fr; gap: 24px; }
}

/* ───────────────────── Engagements — anonymized project credibility ───────────────────── */

.engagements {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 64px;
  border-top: 1px solid var(--ink-200);
}
.engagement {
  display: grid;
  grid-template-columns: 88px 240px 1fr auto;
  gap: 36px;
  padding: 44px 0;
  align-items: center;
  border-bottom: 1px solid var(--ink-200);
  position: relative;
  transition: padding 0.5s var(--ease-out), background 0.5s var(--ease-out);
}
.engagement::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(180deg, #E0B96A 0%, #B8924A 50%, #6B4F1F 100%);
  transition: width 0.5s var(--ease-out);
}
.engagement:hover {
  padding-left: 28px;
  padding-right: 28px;
  background: var(--surface-alt);
}
.engagement:hover::before { width: 3px; }

/* Brass-gradient numeral — echoes the journey on services */
.engagement__num {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  background: linear-gradient(180deg, #E0B96A 0%, #B8924A 50%, #6B4F1F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(184, 146, 74, 0.18));
  transition: transform 0.5s var(--ease-out);
}
.engagement:hover .engagement__num { transform: translateX(4px); }

/* Animated icon — large and dramatic */
.engagement__sector {
  display: flex;
  align-items: center;
  gap: 18px;
}
.engagement__icon {
  width: 44px;
  height: 44px;
  color: var(--accent);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.engagement__icon svg { width: 100%; height: 100%; overflow: visible; }
.engagement__sector-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  transition: color 0.3s;
}
.engagement:hover .engagement__sector-label { color: var(--accent); }

.engagement__copy { min-width: 0; }
.engagement__title {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.engagement__scope {
  font-size: 0.95rem;
  color: var(--ink-500);
  margin: 0;
  line-height: 1.55;
}
.engagement__arrow {
  font-size: 1.5rem;
  color: var(--ink-300);
  transition: color 0.3s, transform 0.3s var(--ease-out);
}
.engagement:hover .engagement__arrow {
  color: var(--accent);
  transform: translateX(6px);
}
@media (max-width: 1000px) {
  .engagement {
    grid-template-columns: 64px 200px 1fr auto;
    gap: 24px;
  }
  .engagement__num { font-size: 1.85rem; }
  .engagement__icon { width: 36px; height: 36px; }
}
@media (max-width: 800px) {
  .engagement {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num sector"
      "copy copy";
    gap: 14px 18px;
    padding: 32px 0;
    align-items: start;
  }
  .engagement__num { grid-area: num; align-self: center; font-size: 1.75rem; }
  .engagement__sector { grid-area: sector; }
  .engagement__copy { grid-area: copy; }
  .engagement:hover { padding-left: 16px; padding-right: 16px; }
  .engagement__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .engagement__icon svg * { animation: none !important; }
}

/* ───────────────────── Process — restrained ───────────────────── */

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px 32px;
  margin-top: 64px;
}
.process__step {
  padding-top: 32px;
  border-top: 1px solid var(--ink-200);
  position: relative;
}
.process__step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.process__icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
  margin-bottom: 24px;
}
.process__icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.process__num {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.process__title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 14px;
  letter-spacing: -0.018em;
}
.process__desc {
  font-size: 0.95rem;
  color: var(--ink-500);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) {
  .process { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
}
@media (max-width: 540px) {
  .process { grid-template-columns: 1fr; gap: 32px; }
}

/* ───────────────────── Capability grid (company page) ───────────────────── */

.cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--ink-200);
}
.cap-cell {
  padding: 48px 48px 48px 0;
  border-bottom: 1px solid var(--ink-200);
  position: relative;
}
.cap-cell:nth-child(odd) { border-right: 1px solid var(--ink-200); padding-right: 48px; }
.cap-cell:nth-child(even) { padding-left: 48px; padding-right: 0; }
.cap-cell:nth-last-child(-n+2) { border-bottom: none; }
.cap-cell__icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
  margin-bottom: 24px;
  stroke-width: 1.5;
}
.cap-cell__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 14px;
}
.cap-cell__title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.cap-cell__body {
  color: var(--ink-500);
  margin: 0;
  line-height: 1.65;
}
@media (max-width: 800px) {
  .cap-grid { grid-template-columns: 1fr; }
  .cap-cell, .cap-cell:nth-child(odd), .cap-cell:nth-child(even) {
    padding: 40px 0;
    border-right: none !important;
  }
  .cap-cell:last-child { border-bottom: none; }
}

/* ───────────────────── Principles (replaces fake-number stats) ───────────────────── */

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  margin-top: 64px;
}
.principle {
  padding-top: 28px;
  border-top: 1px solid var(--ink-100);
}
.principle__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 18px;
}
.principle__title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 18px;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.principle__body {
  font-size: 1rem;
  color: var(--ink-500);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 820px) {
  .principles { grid-template-columns: 1fr; gap: 40px; }
}

/* ───────────────────── Quiet credentials strip (single line) ───────────────────── */

.creds {
  border-top: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
  background: var(--surface);
}
.creds__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  align-items: center;
}
.creds__item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.creds__icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
  flex-shrink: 0;
  stroke-width: 1.5;
}
.creds__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.creds__value {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-900);
  margin-top: 4px;
  letter-spacing: -0.005em;
}
@media (max-width: 900px) {
  .creds__inner { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}
@media (max-width: 540px) {
  .creds__inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ───────────────────── Testimonials — restrained ───────────────────── */

.testimonials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 64px;
}
.tst {
  background: transparent;
  border: none;
  padding: 36px 0 0;
  border-top: 1px solid var(--ink-200);
  position: relative;
}
.tst__quote {
  font-family: var(--font-sans);
  font-size: 1.075rem;
  line-height: 1.7;
  color: var(--ink-700);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.005em;
}
.tst__attr {
  margin-top: 24px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  font-weight: 600;
}
@media (max-width: 800px) {
  .testimonials { grid-template-columns: 1fr; gap: 32px; }
}

/* ───────────────────── Pull-quote ───────────────────── */

.pullquote {
  background: var(--surface-alt);
  padding: clamp(96px, 12vw, 160px) 0;
  text-align: left;
}
.pullquote__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 32px;
}
.pullquote blockquote {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin: 0;
}
.pullquote__attr {
  margin-top: 32px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  font-weight: 600;
}

/* ───────────────────── CTA band ───────────────────── */

.cta-band {
  background: var(--ink-900);
  color: white;
}
.cta-band__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(80px, 9vw, 120px) 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.cta-band h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  color: white;
  margin: 0;
  letter-spacing: -0.025em;
  max-width: 700px;
}
.cta-band p {
  color: rgba(255, 255, 255, 0.7);
  margin: 12px 0 0;
  max-width: 600px;
  font-size: 1.05rem;
}
.cta-band .btn--primary {
  background: white;
  color: var(--ink-900) !important;
  border-color: white;
}
.cta-band .btn--primary:hover { background: var(--surface-alt); border-color: var(--surface-alt); }

/* ───────────────────── Contact card ───────────────────── */

.contact-card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 0;
  padding: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.contact-card h3 {
  font-size: 1.875rem;
  color: var(--ink-900);
  margin: 0 0 16px;
  letter-spacing: -0.025em;
}
.contact-card dt {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 32px;
}
.contact-card dt:first-of-type { margin-top: 0; }
.contact-card dd {
  margin: 0;
  font-size: 1.075rem;
  color: var(--ink-900);
  font-weight: 500;
}
.contact-card dd a {
  color: var(--ink-900);
  border-bottom: 1px solid var(--ink-200);
  padding-bottom: 1px;
  transition: border-color 0.2s;
}
.contact-card dd a:hover { border-bottom-color: var(--ink-900); }
@media (max-width: 800px) {
  .contact-card { grid-template-columns: 1fr; padding: 40px 28px; gap: 0; }
  .contact-card dt:not(:first-of-type) { margin-top: 28px; }
}

/* ───────────────────── Footer ───────────────────── */

.footer {
  background: var(--ink-950);
  color: rgba(255, 255, 255, 0.65);
  padding: 96px 0 36px;
}
.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 64px;
}
.footer__brand { margin: 0 0 20px; display: block; }
.footer__brand-img {
  width: auto;
  height: 60px;
  display: block;
}
.footer__tagline {
  font-size: 0.95rem;
  max-width: 320px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}
.footer h4 {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 20px;
  font-weight: 600;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 12px; font-size: 0.95rem; }
.footer ul a {
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s;
}
.footer ul a:hover { color: white; }
.footer__bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 800px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__brand-img { height: 52px; }
}
@media (max-width: 540px) {
  .footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ───────────────────── Reveal-on-scroll ───────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }
}

/* ───────────────────── Utility ───────────────────── */

.muted { color: var(--ink-400); }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 12px 22px;
  background: var(--ink-900);
  color: white !important;
  border-radius: 0;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: top 0.25s var(--ease-out);
}
.skip-link:focus {
  top: 16px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ───────────────────── A11y ───────────────────── */

:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
  border-radius: 1px;
}
.btn:focus-visible { outline-offset: 4px; }

/* ───────────────────── Reduced-motion ───────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ───────────────────── Mobile polish ───────────────────── */

@media (max-width: 640px) {
  .container, .container--tight { padding: 0 24px; }
  .hero__inner { padding: 0 24px 64px; }
  .footer__inner { padding: 0 24px; }
  .nav__inner { padding: 20px 24px; }
}

@media (pointer: coarse) {
  a, button, .btn, .nav__menu a, .nav__toggle { min-height: 44px; }
  .form-row input, .form-row textarea, .form-row select { min-height: 48px; }
}

/* ───────────────────────────────────────────────────────────────────
   OWNER FEEDBACK · Home Page Changes (2026-05-23)
   New components added per the client review.
   ─────────────────────────────────────────────────────────────────── */

/* ── Original logo (legacy PNG with cursive Spectrum wordmark) ── */
.nav__logo--original .nav__logo-img {
  width: auto;
  height: 64px;
  display: block;
  /* Blend the PNG's white background INTO the nav so there's no card-on-card seam.
     `multiply` keeps the blue wordmark + yellow swoosh fully opaque, but makes
     the white plaque blend with whatever's behind it. */
  mix-blend-mode: multiply;
}
.nav.is-scrolled .nav__logo--original .nav__logo-img { height: 48px; }
@media (max-width: 820px) {
  .nav__logo--original .nav__logo-img { height: 48px; }
  .nav.is-scrolled .nav__logo--original .nav__logo-img { height: 40px; }
}
@media (max-width: 480px) {
  .nav__logo--original .nav__logo-img { height: 40px; }
}

/* ── Video frame (16:9 YouTube embed) ── */
.video-frame {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  border: 1px solid var(--ink-100);
  background: var(--ink-900);
  box-shadow: var(--shadow-lg);
}
.video-frame__inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}
.video-frame__inner iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Who We Are section ── */
.who { margin-top: 96px; }
.who__intro {
  max-width: 880px;
  margin: 0 auto 56px;
  text-align: center;
}
.who__intro .eyebrow { justify-content: center; display: inline-flex; }
.who__lead {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  color: var(--ink-700);
  margin-top: 20px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.who__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.who-card {
  background: var(--surface, #fff);
  border: 1px solid var(--ink-100);
  padding: 36px 28px;
  text-align: left;
  position: relative;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, border-color 0.4s;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 220px;
}
.who-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.who-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.who-card:hover::before { transform: scaleX(1); }
.who-card__icon {
  width: 36px;
  height: 36px;
  color: var(--accent);
}
.who-card__icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.who-card__title {
  font-size: 1.075rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
@media (max-width: 900px) {
  .who__cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .who__cards { grid-template-columns: 1fr; }
}

/* ── Expertise list (14 items, 2 columns) ── */
.caps--expertise {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  margin-top: 32px;
  max-width: 100%;
}
.caps--expertise li {
  font-size: 0.975rem;
  color: var(--ink-700);
  padding: 12px 0;
  border-top: 1px solid var(--ink-100);
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.4;
}
.caps--expertise li:nth-child(-n+2) { border-top: none; padding-top: 4px; }
.caps__bullet {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .caps--expertise { grid-template-columns: 1fr; }
  .caps--expertise li:nth-child(2) { border-top: 1px solid var(--ink-100); padding-top: 12px; }
}

/* Practice image is now a real anchor — keep the same block-level overlay behavior */
a.practice__image {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.practice__image:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Inline-SVG variant: fill the container like an <img> would, keep all overlays + hover */
.practice__image--svg > svg,
.split__image--svg > svg {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
}
.practice__image--svg { position: relative; }
.split__image--svg {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
@media (max-width: 720px) {
  .split__image--svg { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .practice__image--svg svg *,
  .split__image--svg svg * { animation: none !important; }
}

/* ── STARS² section ── */
.stars-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.stars-grid__col h2 { line-height: 1.05; }
.stars-sup {
  font-size: 0.45em;
  vertical-align: super;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 1px;
}
.stars-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
  max-width: 540px;
}
.stars-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: rgba(247, 245, 238, 0.85);
}
.stars-list__dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.stars-fine-print {
  margin-top: 36px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.74rem;
  color: rgba(247, 245, 238, 0.42);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .stars-grid { grid-template-columns: 1fr; gap: 32px; }
  .stars-list { grid-template-columns: 1fr; }
}

/* ── Brief History section ── */
.history__body {
  font-size: 1.05rem;
  color: var(--ink-700);
  line-height: 1.7;
  margin-top: 20px;
}
.history__pull {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 500;
  color: var(--ink-900);
  margin: 56px 0 24px;
  padding-left: 24px;
  border-left: 3px solid var(--accent);
  letter-spacing: -0.02em;
  line-height: 1.35;
}
.history__pull em {
  font-style: italic;
  color: var(--accent-dim, #8C6F38);
  font-weight: 500;
}
.history__seal-wrap {
  margin-top: 64px;
  text-align: center;
}
.history__seal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2E5B8A 0%, #0F1E2E 70%);
  color: var(--white, #fff);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 12px 28px -10px rgba(15, 30, 46, 0.5), inset 0 0 0 1px rgba(255,255,255,0.18);
}

/* ── Anniversary seal (lives inside STARS² section, per image 6) ── */
.anniversary {
  margin-top: 96px;
  padding-top: 64px;
  border-top: 1px solid rgba(247, 245, 238, 0.08);
  text-align: center;
}
.anniversary__seal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--white, #fff);
  color: var(--ink-900);
  font-family: var(--font-sans);
  margin-bottom: 32px;
  box-shadow: 0 10px 32px -8px rgba(0, 0, 0, 0.35), inset 0 0 0 6px var(--white, #fff), inset 0 0 0 7px var(--accent);
  position: relative;
}
.anniversary__seal-top {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-700);
}
.anniversary__seal-year {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--accent-dim, #8C6F38);
  margin: 4px 0;
  text-align: center;
}
.anniversary__seal-bottom {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-700);
}
.anniversary__seal-stars {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--accent-dim, #8C6F38);
  margin-top: 6px;
}
.anniversary__line {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  color: var(--paper, #F7F5EE);
  margin: 0;
  letter-spacing: -0.02em;
}

/* ───────────────────────────────────────────────────────────────────
   MOBILE QA PASS · 2026-05-23
   Fix overflow on long compound words, tighten mobile headline scale,
   ensure logo blends with the nav surface.
   ─────────────────────────────────────────────────────────────────── */

/* ── Universal word-wrap defense ── */
h1, h2, h3, h4,
p, li, blockquote, a {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
h1, h2, h3 {
  hyphens: none;
  -webkit-hyphens: none;
}

/* ── Belt-and-suspenders for the PNG logo plaque ──
   The nav itself is solid white (defined earlier), which lets the PNG's
   white background blend invisibly via `mix-blend-mode: multiply`.
   This local override is the safety net: even if a future change makes
   the nav semi-transparent, the logo container still gives the PNG a
   pure-white surface to blend against — so it never tints muddy when
   scrolled over dark page content. */
.nav__logo--original {
  background: #FFFFFF;
  position: relative;
  z-index: 1;
}
.nav__logo--original .nav__logo-img {
  padding: 2px 0;
}

/* ── Mobile: hero headline must fit narrow viewports without clipping ── */
@media (max-width: 720px) {
  .hero h1 {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    letter-spacing: -0.02em;
    line-height: 1.12;
    text-wrap: pretty;
    max-width: 100%;
  }
  .hero p { font-size: 0.95rem; line-height: 1.55; max-width: 100%; }
  .hero__eyebrow { font-size: 0.68rem; letter-spacing: 0.16em; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { justify-content: center; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: 1.45rem; line-height: 1.18; }
  .hero p { font-size: 0.9rem; }
}

/* ── Mobile: keep all section H2/H3 inside the viewport ── */
@media (max-width: 720px) {
  h1 { font-size: clamp(1.5rem, 6vw, 2.5rem); text-wrap: pretty; }
  h2 { font-size: clamp(1.375rem, 5vw, 2rem); letter-spacing: -0.022em; line-height: 1.15; text-wrap: pretty; }
  h3 { font-size: clamp(1.05rem, 3.6vw, 1.3rem); text-wrap: pretty; }
  .lead { font-size: 0.95rem; line-height: 1.6; }
}

/* ── Who-We-Are cards: long titles must wrap, not clip ── */
.who-card {
  min-width: 0;            /* prevents flex/grid blow-out */
  overflow: hidden;
}
.who-card__title {
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}
@media (max-width: 720px) {
  .who-card {
    padding: 28px 24px;
    min-height: auto;
    gap: 18px;
  }
  .who-card__title { font-size: 1rem; line-height: 1.35; }
}

/* ── Practice card titles: protect long ones (Transportation) ── */
.practice__title {
  overflow-wrap: break-word;
  hyphens: none;
}
@media (max-width: 720px) {
  .practice__body { padding: 28px 24px 32px; }
  .practice__title { font-size: 1.35rem; }
}

/* ── Engagement layout: stop title/scope from clipping on small ── */
.engagement,
.engagement * {
  min-width: 0;
}
.engagement__title,
.engagement__scope {
  overflow-wrap: break-word;
  hyphens: none;
  max-width: 100%;
}
@media (max-width: 720px) {
  .engagement {
    padding: 24px 0;
    gap: 12px;
  }
  .engagement:hover { padding-left: 12px; padding-right: 12px; }
  .engagement__title { font-size: 1.125rem; line-height: 1.3; }
  .engagement__scope { font-size: 0.92rem; line-height: 1.5; }
}

/* ── About: protect the H2 and lead from clipping ── */
.split h2, .split .lead { max-width: 100%; }
@media (max-width: 720px) {
  .split { gap: 40px; }
  .caps--expertise li { font-size: 0.95rem; padding: 11px 0; }
}

/* ── STARS² section spacing on small screens ── */
@media (max-width: 720px) {
  .stars-grid { gap: 24px; }
  .stars-list { gap: 10px; }
  .stars-list li { font-size: 0.95rem; }
  .stars-fine-print { font-size: 0.68rem; }
}

/* ── Anniversary seal scales down for mobile so the disk stays a disk ── */
@media (max-width: 480px) {
  .anniversary__seal { width: 160px; height: 160px; }
  .anniversary__seal-year { font-size: 2rem; }
  .anniversary__seal-top, .anniversary__seal-bottom { font-size: 0.6rem; }
  .anniversary__line { font-size: 1.25rem; }
}

/* ── Brief History pull quote on mobile ── */
@media (max-width: 720px) {
  .history__pull { padding-left: 16px; font-size: 1.25rem; margin: 36px 0 16px; }
  .history__body { font-size: 1rem; }
  .history__seal { width: 110px; height: 110px; font-size: 0.78rem; }
}

/* ── CTA band: stack on mobile so the button isn't crushed ── */
@media (max-width: 720px) {
  .cta-band__inner { flex-direction: column; align-items: flex-start; gap: 24px; padding: 56px 0; }
  .cta-band h3 { font-size: 1.5rem; }
  .cta-band p { font-size: 0.95rem; }
}

/* ── Testimonials: tighter quote size on small screens ── */
@media (max-width: 720px) {
  .tst { padding: 28px 0 0; }
  .tst__quote { font-size: 1rem; line-height: 1.6; }
  .tst__attr { font-size: 0.7rem; }
}

/* ── Footer columns: stack cleanly on small screens ── */
@media (max-width: 540px) {
  .footer { padding: 56px 0 24px; }
  .footer__brand-img { height: 56px; }
  .footer__tagline { font-size: 0.9rem; }
  .footer ul li { margin-bottom: 8px; }
  .footer__bottom { font-size: 0.78rem; }
}

/* ── Demo banner: smaller text on phones so it stays on one line ── */
@media (max-width: 480px) {
  body > div[style*="Design preview"] {
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
    padding: 6px 12px !important;
  }
}

/* ── Hero scroll cue: hide on mobile (already in nav, also crowds the CTAs) ── */
@media (max-width: 720px) {
  .hero__scroll { display: none; }
}

/* ── Demo banner: class-based so responsive rules can target it ── */
.demo-banner {
  background: #0F1E2E;
  color: #fff;
  text-align: center;
  padding: 8px 16px;
  font-family: -apple-system, Inter, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid #B8924A;
  line-height: 1.3;
}
@media (max-width: 540px) {
  .demo-banner { font-size: 0.62rem; letter-spacing: 0.08em; padding: 6px 12px; }
}
@media (max-width: 400px) {
  .demo-banner { font-size: 0.56rem; letter-spacing: 0.06em; }
}

/* ── Page-level safety: no element should push the body past viewport ── */
html, body { overflow-x: clip; max-width: 100vw; }
img, video, iframe { max-width: 100%; height: auto; }

/* ── Grid children must allow shrinking past content size on mobile ── */
.split > *,
.hero__inner > *,
.who__cards > *,
.practice > *,
.engagements > *,
.testimonials > *,
.stars-grid > *,
.cap-grid > *,
.sectors__inner > * {
  min-width: 0;
}

/* ── On mobile, .lead can't be wider than its column ── */
@media (max-width: 720px) {
  .lead, p { max-width: 100%; }
}

/* ── Mobile overflow safety net — keep ALL section content inside viewport ── */
@media (max-width: 720px) {
  /* Tighter horizontal padding on mobile leaves more room for text */
  .container, .container--tight { padding: 0 20px; }
  .pageheader .container { padding: 0 20px; }
  /* Force every block-level descendant of pageheader to wrap inside its parent */
  .pageheader .container > * { max-width: 100%; }
  /* Pageheader headline: smaller font, normal word wrapping (no mid-word breaks) */
  .pageheader h1 {
    font-size: clamp(1.65rem, 7vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
    word-wrap: break-word;
    text-wrap: balance;
    max-width: 100%;
    /* No hyphens / no "anywhere" — keep words intact */
  }
  .pageheader .lead {
    font-size: 0.95rem;
    line-height: 1.55;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
  }
  /* Hero — same protection without word-shredding */
  .hero h1 {
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  .hero p { overflow-wrap: break-word; }
}
@media (max-width: 400px) {
  .pageheader h1 { font-size: clamp(1.4rem, 7vw, 1.85rem); }
}

/* ── Footer: legacy logo PNG has white background that conflicts with dark footer.
   Two-prong fix: (1) wrap it in a white plaque so it sits as an intentional badge,
   OR (2) use mix-blend-mode to drop the white. The plaque approach is more
   universally compatible. ── */
.footer__brand {
  /* If footer__brand-img is the new original PNG, give it a plaque background */
}
.footer__brand-img[src*="spectrum-logo-original"] {
  background: #fff;
  padding: 8px 12px;
  display: inline-block;
}

/* ───────────────────────────────────────────────────────────────────
   OWNER POLISH PASS · 2026-05-23
   New animated anniversary seal + smooth page transitions.
   ─────────────────────────────────────────────────────────────────── */

/* ───────────────────── Page transitions ─────────────────────
   View Transitions API (Chrome 126+, Safari 18+) gives smooth
   cross-document fades natively. Older browsers degrade to instant.
   ─────────────────────────────────────────────────────────── */

@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(root) {
  animation-name: vt-fade-out;
}
::view-transition-new(root) {
  animation-name: vt-fade-in;
}
@keyframes vt-fade-out {
  to { opacity: 0; transform: translateY(-4px); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* The nav itself shouldn't fade — keep it locked across transitions */
.nav { view-transition-name: site-nav; }
::view-transition-old(site-nav),
::view-transition-new(site-nav) {
  animation: none;
  height: 100%;
}

/* ── Page intro overlay (works on every browser, drives the "wow") ── */
.page-intro {
  position: fixed;
  inset: 0;
  background: var(--surface, #fff);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s var(--ease-out, ease) 0.25s;
}
.page-intro.is-fading { opacity: 0; }
.page-intro__logo {
  width: 360px;
  max-width: 70vw;
  height: auto;
  opacity: 0;
  transform: scale(0.94);
  animation: pageIntroLogo 0.7s var(--ease-out, ease) forwards;
}
@keyframes pageIntroLogo {
  0%   { opacity: 0; transform: scale(0.94); filter: blur(4px); }
  100% { opacity: 1; transform: scale(1);    filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-intro { display: none; }
}

/* ── Simple body fade-in on every navigation — no JS required ──
   Works even for users with reduced-motion (it's a single subtle fade,
   not animated movement). Combines with the View Transitions API + the
   logo overlay for layered smoothness. */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
main {
  animation: pageFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM POLISH PASS — 2026-05-23 (second round)
   Owner feedback: cheap-looking SVGs, broken seal, boring sectors,
   sticky nav, footer, scroll-to-top, parallax.
   ═══════════════════════════════════════════════════════════════════ */

/* ───── New commemorative seal ──────────────────────────────────── */
.anniv {
  margin-top: 112px;
  padding-top: 64px;
  border-top: 1px solid rgba(247, 245, 238, 0.10);
  text-align: center;
  position: relative;
}

/* Massive luxurious halo glow that surrounds the seal */
.anniv__halo {
  position: absolute;
  left: 50%;
  top: 96px;
  transform: translateX(-50%);
  width: 620px;
  height: 620px;
  background:
    radial-gradient(circle, rgba(255, 220, 150, 0.18) 0%,
                    rgba(184, 146, 74, 0.14) 18%,
                    rgba(184, 146, 74, 0.04) 45%,
                    transparent 70%);
  pointer-events: none;
  filter: blur(28px);
  z-index: 0;
  animation: annivHalo 6s ease-in-out infinite alternate;
}
@keyframes annivHalo {
  from { opacity: 0.8; transform: translateX(-50%) scale(1); }
  to   { opacity: 1;   transform: translateX(-50%) scale(1.06); }
}

/* Slow-rotating radiating beams behind the seal — premium presence */
.anniv__beams {
  position: absolute;
  left: 50%;
  top: 110px;
  transform: translate(-50%, 0);
  width: 760px;
  height: 760px;
  pointer-events: none;
  z-index: 0;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(184, 146, 74, 0.10) 4deg, transparent 12deg,
      transparent 36deg, rgba(184, 146, 74, 0.07) 42deg, transparent 50deg,
      transparent 72deg, rgba(184, 146, 74, 0.12) 78deg, transparent 86deg,
      transparent 108deg, rgba(184, 146, 74, 0.06) 114deg, transparent 122deg,
      transparent 144deg, rgba(184, 146, 74, 0.10) 150deg, transparent 158deg,
      transparent 180deg, rgba(184, 146, 74, 0.07) 186deg, transparent 194deg,
      transparent 216deg, rgba(184, 146, 74, 0.11) 222deg, transparent 230deg,
      transparent 252deg, rgba(184, 146, 74, 0.06) 258deg, transparent 266deg,
      transparent 288deg, rgba(184, 146, 74, 0.10) 294deg, transparent 302deg,
      transparent 324deg, rgba(184, 146, 74, 0.08) 330deg, transparent 338deg,
      transparent 360deg);
  mask-image: radial-gradient(circle at center, transparent 22%, rgba(0,0,0,0.5) 30%, black 45%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, transparent 22%, rgba(0,0,0,0.5) 30%, black 45%, transparent 80%);
  animation: annivBeams 120s linear infinite;
  filter: blur(1px);
  opacity: 0.85;
}
@keyframes annivBeams {
  from { transform: translate(-50%, 0) rotate(0deg); }
  to   { transform: translate(-50%, 0) rotate(360deg); }
}

.anniv__seal {
  width: 340px;
  height: 340px;
  display: inline-block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.55)) drop-shadow(0 0 30px rgba(184,146,74,0.18));
  overflow: visible;
}

/* Outer dashed ring rotates slowly clockwise */
.anniv__ring-rotate {
  transform-origin: 180px 180px;
  transform-box: view-box;
  animation: ringSpin 110s linear infinite;
  will-change: transform;
}
@keyframes ringSpin {
  to { transform: rotate(360deg); }
}

/* Inner ring counter-rotates for visual richness */
.anniv__ring-counter {
  transform-origin: 180px 180px;
  transform-box: view-box;
  animation: ringSpinReverse 140s linear infinite;
  will-change: transform;
}
@keyframes ringSpinReverse {
  to { transform: rotate(-360deg); }
}

/* The 1999 number glows softly on a slow cycle */
.anniv__num {
  animation: numGlow 5s ease-in-out infinite;
}
@keyframes numGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(184,146,74,0)); }
  50%      { filter: drop-shadow(0 0 16px rgba(255,210,130,0.65)); }
}

/* Laurel sprigs sway very gently — alive but not distracting */
.anniv__laurel {
  transform-box: view-box;
  animation: laurelSway 6s ease-in-out infinite alternate;
}
.anniv__laurel--left { transform-origin: 88px 188px; }
.anniv__laurel--right {
  transform-origin: 272px 188px;
  animation-delay: -3s;
}
@keyframes laurelSway {
  from { transform: rotate(-1.5deg); }
  to   { transform: rotate(1.5deg); }
}

.anniv__star {
  opacity: 0.35;
  transform-box: fill-box;
  transform-origin: center;
  animation: starTwinkle 4s ease-in-out infinite;
}
@keyframes starTwinkle {
  0%, 70%, 100% { opacity: 0.35; transform: scale(0.9); }
  20%, 50%      { opacity: 1;    transform: scale(1.15); }
}

/* Main caption — brass-gradient accent on "26 Years" */
.anniv__line {
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 600;
  color: var(--paper, #F7F5EE);
  margin: 40px 0 0;
  letter-spacing: -0.022em;
  position: relative;
  z-index: 1;
}
.anniv__line em {
  font-style: normal;
  background: linear-gradient(180deg, #F5D684 0%, #E0B96A 45%, #B8924A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(184, 146, 74, 0.25));
}
.anniv__sub {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(247, 245, 238, 0.45);
  margin: 14px 0 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .anniv__seal { width: 260px; height: 260px; }
  .anniv__halo { width: 420px; height: 420px; }
  .anniv__beams { width: 520px; height: 520px; }
  .anniv__line { font-size: 1.35rem; }
  .anniv__sub { font-size: 0.7rem; letter-spacing: 0.24em; }
}
@media (max-width: 480px) {
  .anniv__seal { width: 220px; height: 220px; }
  .anniv__halo { width: 340px; height: 340px; }
  .anniv__beams { width: 420px; height: 420px; }
  .anniv__line { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .anniv__ring-rotate, .anniv__ring-counter, .anniv__num, .anniv__star,
  .anniv__halo, .anniv__beams, .anniv__laurel { animation: none; }
  .anniv__star { opacity: 1; }
}

/* ───── Premium icon medallions (Who-We-Are cards) — INTERACTIVE ──────── */
.who-card {
  padding: 36px 28px 28px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform 0.55s var(--ease-out), box-shadow 0.5s, border-color 0.5s, background 0.5s;
}

/* Hover-revealing dotted background pattern */
.who-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(184,146,74,0.25) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
  z-index: -1;
  mask-image: radial-gradient(circle at 80% 20%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 80% 20%, black 0%, transparent 70%);
}
.who-card:hover::before { opacity: 1; }

/* Brass numeral in top-right — bold and unmistakable */
.who-card__num {
  position: absolute;
  top: 18px;
  right: 24px;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #E0B96A 0%, #B8924A 60%, #6B4F1F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.55;
  transition: opacity 0.4s, transform 0.5s var(--ease-out);
  filter: drop-shadow(0 2px 6px rgba(184, 146, 74, 0.18));
}
.who-card:hover .who-card__num {
  opacity: 1;
  transform: scale(1.08);
}

/* Brass corner accents — appear on hover */
.who-card__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
.who-card__corner::before,
.who-card__corner::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, #E0B96A, #B8924A);
}
.who-card__corner--tl { top: 8px; left: 8px; transform: translate(-4px, -4px); }
.who-card__corner--tr { top: 8px; right: 8px; transform: translate(4px, -4px); }
.who-card__corner--bl { bottom: 8px; left: 8px; transform: translate(-4px, 4px); }
.who-card__corner--br { bottom: 8px; right: 8px; transform: translate(4px, 4px); }
.who-card__corner::before { width: 100%; height: 1.5px; }
.who-card__corner::after  { width: 1.5px; height: 100%; }
.who-card__corner--tl::before { top: 0; left: 0; }
.who-card__corner--tl::after  { top: 0; left: 0; }
.who-card__corner--tr::before { top: 0; right: 0; }
.who-card__corner--tr::after  { top: 0; right: 0; }
.who-card__corner--bl::before { bottom: 0; left: 0; }
.who-card__corner--bl::after  { bottom: 0; left: 0; }
.who-card__corner--br::before { bottom: 0; right: 0; }
.who-card__corner--br::after  { bottom: 0; right: 0; }
.who-card:hover .who-card__corner {
  opacity: 1;
  transform: translate(0, 0);
}

/* Icon medallion */
.who-card__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--surface-alt, #F8F9FB);
  border: 1px solid rgba(184, 146, 74, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--accent);
  transition: transform 0.55s var(--ease-out), border-color 0.4s, background 0.5s, box-shadow 0.5s;
}
.who-card__icon::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(184, 146, 74, 0.2);
  transition: inset 0.5s var(--ease-out), border-color 0.4s;
}
.who-card__icon::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgba(184, 146, 74, 0.35);
  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.4s;
}
.who-card__icon svg {
  width: 38px;
  height: 38px;
  stroke-width: 1.5;
  position: relative;
  z-index: 1;
  transition: transform 0.6s var(--ease-out);
}
.who-card:hover .who-card__icon {
  background: linear-gradient(180deg, #102236 0%, #0F1E2E 100%);
  border-color: #B8924A;
  color: #F5D684;
  transform: scale(1.06);
  box-shadow: 0 12px 30px rgba(15, 30, 46, 0.25), 0 0 0 4px rgba(184,146,74,0.08);
}
.who-card:hover .who-card__icon::before {
  inset: 3px;
  border-color: rgba(245, 214, 132, 0.4);
}
.who-card:hover .who-card__icon::after {
  transform: scale(1);
  opacity: 1;
}
.who-card:hover .who-card__icon svg {
  transform: scale(1.08);
}

/* Title — gets brass accent underline on hover */
.who-card__title {
  font-size: 1.075rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.3;
  transition: color 0.3s;
  text-wrap: balance;
}
.who-card:hover .who-card__title { color: #0F1E2E; }

/* "Learn more →" CTA — slides up from below on hover */
.who-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.4s;
  padding-top: 10px;
  border-top: 1px solid rgba(184, 146, 74, 0.25);
}
.who-card:hover .who-card__cta {
  transform: translateY(0);
  opacity: 1;
}
.who-card__cta-arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}
.who-card:hover .who-card__cta-arrow {
  transform: translateX(6px);
}
.who-card__cta sup { font-size: 0.6em; vertical-align: super; }

/* ───── Sectors strip — interactive cards with dark-flip hover ─────── */
.sectors { padding: clamp(96px, 10vw, 140px) 0; background: var(--surface-alt, #F8F9FB); }
.sectors__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
}

.sectors__label {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sectors__label-text {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-900);
}
.sectors__label-rule {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.sectors__label-hint {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-style: italic;
  color: var(--ink-400);
  letter-spacing: 0.02em;
}

.sectors__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Interactive sector card */
.sector-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 14px;
  padding: 24px 22px 24px;
  background: var(--surface, #fff);
  border: 1px solid var(--ink-100);
  text-decoration: none;
  color: var(--ink-900);
  overflow: hidden;
  isolation: isolate;
  min-height: 156px;
  transition:
    background 0.5s var(--ease-out),
    border-color 0.5s,
    transform 0.5s var(--ease-out),
    box-shadow 0.5s,
    color 0.4s;
}

/* Brass top accent — slides in on hover */
.sector-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #E0B96A 30%, #F5D684 50%, #E0B96A 70%, transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.55s var(--ease-out);
}

/* Cinematic dark-flip background — fills from bottom on hover */
.sector-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #14283D 0%, #0F1E2E 100%);
  transform: translateY(101%);
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}

.sector-card__icon {
  width: 36px;
  height: 36px;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s var(--ease-out), color 0.4s;
}
.sector-card__icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
  overflow: visible;
}

.sector-card__name {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  transition: color 0.4s;
  line-height: 1.25;
}
.sector-card__meta {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-500);
  letter-spacing: 0.02em;
  transition: color 0.4s, transform 0.5s var(--ease-out);
  margin-top: auto;
}
.sector-card__arrow {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--accent);
  border: 1px solid rgba(184, 146, 74, 0.3);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-6px, 6px) scale(0.85);
  transition: opacity 0.4s, transform 0.5s var(--ease-out), background 0.4s, border-color 0.4s;
}

/* Hover — the card "flips" to navy with brass accents */
.sector-card:hover {
  border-color: transparent;
  color: #F5D684;
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 30, 46, 0.25);
}
.sector-card:hover::before { transform: scaleX(1); }
.sector-card:hover::after  { transform: translateY(0); }
.sector-card:hover .sector-card__icon {
  color: #F5D684;
  transform: scale(1.15) rotate(-6deg);
}
.sector-card:hover .sector-card__name { color: white; }
.sector-card:hover .sector-card__meta { color: rgba(245, 214, 132, 0.7); }
.sector-card:hover .sector-card__arrow {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  background: rgba(184, 146, 74, 0.15);
  border-color: rgba(245, 214, 132, 0.5);
  color: #F5D684;
}

@media (max-width: 1100px) {
  .sectors__inner { grid-template-columns: 1fr; gap: 32px; }
  .sectors__label { position: static; flex-direction: row; align-items: center; }
  .sectors__label-rule { width: 36px; }
}
@media (max-width: 900px) {
  .sectors__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .sectors__list { grid-template-columns: 1fr; }
  .sector-card { min-height: 120px; padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sector-card, .sector-card::before, .sector-card::after,
  .sector-card__icon, .sector-card__arrow { transition: none; }
}

/* ───── Engagement hover — premium, no layout shift ─────────────── */
.engagement {
  padding: 36px 24px;
  transition: background 0.45s var(--ease-out);
  overflow: hidden;
}
.engagement::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.55s var(--ease-out);
  height: 100%;
}
.engagement:hover {
  background: linear-gradient(90deg, rgba(184,146,74,0.04), rgba(184,146,74,0));
  padding-left: 24px;
  padding-right: 24px;
}
.engagement:hover::before { transform: scaleY(1); }
.engagement__title {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  padding-bottom: 4px;
  transition: background-size 0.65s var(--ease-out), color 0.3s;
}
.engagement:hover .engagement__title {
  background-size: 100% 1px;
}
.engagement__sector { transition: transform 0.4s var(--ease-out); }
.engagement:hover .engagement__sector { transform: translateX(4px); }
.engagement__sector-icon { transition: transform 0.4s var(--ease-out), color 0.3s; }
.engagement:hover .engagement__sector-icon {
  transform: rotate(-8deg) scale(1.12);
}
.engagement__arrow {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: color 0.3s, transform 0.4s var(--ease-out), border-color 0.4s, background 0.4s;
}
.engagement:hover .engagement__arrow {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateX(8px);
}

/* ───── Back-to-top floating button ─────────────────────────────── */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(15, 30, 46, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--paper, #F7F5EE);
  border: 1px solid rgba(184, 146, 74, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.85);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), background 0.25s, border-color 0.25s;
  z-index: 45;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.4);
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.back-to-top:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.back-to-top svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  transition: transform 0.3s var(--ease-out);
}
.back-to-top:hover svg { transform: translateY(-2px); }
@media (max-width: 540px) {
  .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* ───── Footer redesign — typographic wordmark, not a copy-paste plaque ──── */
.footer { background: var(--ink-950, #0A1623); padding: 88px 0 32px; }
.footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: 0.5;
}
.footer__inner { position: relative; }
.footer__brand-img {
  display: none !important;   /* hide the PNG */
}
/* Legacy ::before / ::after pseudo-elements that injected a duplicate
   wordmark have been removed — the real wordmark now lives in the HTML
   as `.footer__brand-wordmark` and is styled further down. */
.footer__brand {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
  position: relative;
}
.footer__brand-name,
.footer__brand-sub {
  display: block;
}
.footer__brand .footer__brand-img {
  display: none;
}
.footer__tagline {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  max-width: 340px;
  line-height: 1.6;
  font-style: italic;
  color: rgba(247, 245, 238, 0.7);
  margin: 0;
}
.footer h4 {
  color: var(--accent);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  font-weight: 600;
}
.footer ul a {
  color: rgba(247, 245, 238, 0.78);
  transition: color 0.2s, letter-spacing 0.25s var(--ease-out);
  display: inline-block;
}
.footer ul a:hover {
  color: var(--paper, #fff);
  letter-spacing: 0.02em;
}
.footer__bottom {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: rgba(247, 245, 238, 0.45);
  border-top: 1px solid rgba(247, 245, 238, 0.08);
  padding-top: 28px;
  margin-top: 24px;
}
.footer__bottom a:hover { color: var(--accent) !important; }

/* ───── Footer typographic wordmark — premium replacement for the plaque ──── */
.footer__brand-img { display: none; }
.footer__brand {
  display: block;
  margin: 0 0 22px;
  position: relative;
}
.footer__brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(184, 146, 74, 0.3);
  position: relative;
}
.footer__brand-wordmark::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 1px;
  background: var(--accent);
}
.footer__brand-name {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--paper, #F7F5EE);
  line-height: 1;
}
.footer__brand-rule {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--accent);
  transform: translateY(2px);
}
.footer__brand-sub {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.36em;
  color: rgba(247, 245, 238, 0.7);
  text-transform: uppercase;
}
.footer__brand-tagline {
  display: block;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(247, 245, 238, 0.55);
  letter-spacing: 0.06em;
}

/* ───── Hero parallax ─────────────────────────────────────────────── */
.hero { position: relative; }
.hero__bg {
  will-change: transform;
  transition: transform 0.05s linear;
}
/* Modern CSS scroll-driven animation for browsers that support it */
@supports (animation-timeline: scroll()) {
  .hero__bg {
    animation: heroParallax linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes heroParallax {
    0%   { transform: translateY(0)   scale(1.0); }
    100% { transform: translateY(20%) scale(1.05); }
  }
}

/* ───── Smoother scroll on the whole document ──────────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ═══════════════════════════════════════════════════════════════════
   METHOD JOURNEY — cinematic, animated, memorable.
   Dark surface · brass timeline rail · huge gradient numerals ·
   custom animated icons · scroll-triggered fill.
   ═══════════════════════════════════════════════════════════════════ */

.method {
  background: #0A1623;
  color: var(--paper, #F7F5EE);
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 12vw, 160px) 0;
}
.method__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(184,146,74,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(184,146,74,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(circle at center, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 80%);
}
.method .section-head { position: relative; z-index: 1; }

.journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 80px;
  position: relative;
  z-index: 1;
}

/* Continuous timeline rail crossing all four steps */
.journey__rail {
  position: absolute;
  top: 100px;             /* aligned with icon vertical center */
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgba(184, 146, 74, 0.18);
  z-index: 0;
  overflow: hidden;
}
.journey__rail-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent) 0%, #E0B96A 50%, var(--accent) 100%);
  transform: scaleX(0);
  transform-origin: left;
  animation: journeyRail 4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.2s;
  box-shadow: 0 0 12px rgba(212, 172, 92, 0.5);
}
@keyframes journeyRail {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Each step */
.journey__step {
  position: relative;
  text-align: center;
  padding: 0 8px;
  opacity: 0;
  transform: translateY(28px);
  animation: journeyStepIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.journey__step:nth-child(2) { animation-delay: 0.25s; }
.journey__step:nth-child(3) { animation-delay: 0.5s; }
.journey__step:nth-child(4) { animation-delay: 0.75s; }
.journey__step:nth-child(5) { animation-delay: 1.0s; }
@keyframes journeyStepIn {
  to { opacity: 1; transform: translateY(0); }
}

/* HUGE gradient number — the editorial moment */
.journey__num {
  font-family: var(--font-sans);
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
  background: linear-gradient(180deg, #E0B96A 0%, #B8924A 50%, #6B4F1F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 22px;
  filter: drop-shadow(0 4px 14px rgba(184, 146, 74, 0.18));
}

/* Animated icon — 80px centered */
.journey__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 14px;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.journey__icon svg { width: 100%; height: 100%; overflow: visible; }

/* Node dot — sits on the rail, marks each step */
.journey__node {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0A1623;
  border: 2px solid var(--accent);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 4px #0A1623, 0 0 16px rgba(212, 172, 92, 0.6);
  transition: transform 0.5s var(--ease-out), background 0.5s, box-shadow 0.5s;
}
.journey__step:hover .journey__node {
  background: var(--accent);
  transform: scale(1.3);
  box-shadow: 0 0 0 4px #0A1623, 0 0 24px rgba(212, 172, 92, 0.9);
}

.journey__title {
  margin: 28px 0 12px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--paper, #F7F5EE);
  letter-spacing: -0.02em;
  transition: color 0.3s;
}
.journey__step:hover .journey__title { color: var(--accent); }

.journey__desc {
  font-size: 0.95rem;
  color: rgba(247, 245, 238, 0.62);
  line-height: 1.6;
  margin: 0;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile: stack vertically with vertical rail */
@media (max-width: 820px) {
  .journey { grid-template-columns: 1fr; gap: 56px; }
  .journey__rail {
    top: 12%;
    bottom: 12%;
    left: 50%;
    right: auto;
    width: 1px;
    height: auto;
  }
  .journey__rail-fill {
    transform: scaleY(0);
    transform-origin: top;
    animation-name: journeyRailVert;
    background: linear-gradient(180deg, var(--accent) 0%, #E0B96A 50%, var(--accent) 100%);
  }
  @keyframes journeyRailVert { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .journey__num { font-size: 3rem; margin-bottom: 16px; }
  .journey__icon { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .journey__step { animation: none; opacity: 1; transform: none; }
  .journey__rail-fill { animation: none; transform: scaleX(1); }
  .journey__icon svg * { animation: none !important; }
}

/* ───────────────────── Credentials — cinematic fact-card row ───────────────────── */

.creds-cinema {
  position: relative;
  background: linear-gradient(180deg, #0A1623 0%, #0F1E2E 100%);
  padding: clamp(72px, 8vw, 112px) 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(184, 146, 74, 0.18);
}
.creds-cinema__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(184,146,74,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(184,146,74,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 90% 70% at center, black 0%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at center, black 0%, transparent 90%);
}
.creds-cinema__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(184, 146, 74, 0.14);
  border-top: 1px solid rgba(184, 146, 74, 0.2);
  border-bottom: 1px solid rgba(184, 146, 74, 0.2);
}

.cred-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.012) 0%, rgba(255,255,255,0.002) 100%);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 0.5s var(--ease-out);
  isolation: isolate;
}
.cred-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #E0B96A 30%, #F5D684 50%, #E0B96A 70%, transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.55s var(--ease-out);
}
.cred-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -30%;
  width: 80%;
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center top, rgba(184, 146, 74, 0.18) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.cred-card:hover { background: rgba(184, 146, 74, 0.045); }
.cred-card:hover::before { transform: scaleX(1); }
.cred-card:hover::after  { opacity: 1; }

.cred-card__num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #E0B96A 0%, #B8924A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.55;
  transition: opacity 0.4s, transform 0.5s var(--ease-out);
}
.cred-card:hover .cred-card__num { opacity: 1; transform: scale(1.1); }

.cred-card__icon {
  width: 48px;
  height: 48px;
  color: var(--accent);
  margin-bottom: 22px;
  transition: transform 0.5s var(--ease-out);
}
.cred-card__icon svg { width: 100%; height: 100%; overflow: visible; }
.cred-card:hover .cred-card__icon { transform: scale(1.08); }

.cred-card__label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(184, 146, 74, 0.78);
  margin-bottom: 6px;
}

.cred-card__value {
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: white;
  line-height: 1.15;
}
.cred-card__value--brass {
  background: linear-gradient(180deg, #FBE7B6 0%, #E0B96A 50%, #B8924A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 800;
  filter: drop-shadow(0 4px 14px rgba(184, 146, 74, 0.22));
}
.cred-card__value--states {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.cred-card__value--states span {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: white;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(184, 146, 74, 0.4);
  transition: color 0.3s, border-color 0.3s;
}
.cred-card:hover .cred-card__value--states span {
  color: #F5D684;
  border-bottom-color: #F5D684;
}

.cred-card__sub {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
  letter-spacing: 0.02em;
}

/* Certifications & Associations list — replaces the 5-state strip */
.cred-card__creds {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cred-card__creds li {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.35;
  letter-spacing: -0.005em;
  padding-left: 14px;
  border-left: 2px solid rgba(184, 146, 74, 0.55);
  transition: border-color 0.3s;
}
.cred-card:hover .cred-card__creds li {
  border-left-color: #F5D684;
}
.cred-card__creds-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 6px;
  vertical-align: 0.1em;
}

@media (max-width: 1100px) {
  .creds-cinema__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .creds-cinema__inner { grid-template-columns: 1fr; }
  .cred-card { padding: 28px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .cred-card, .cred-card::before, .cred-card::after, .cred-card__icon { transition: none; }
  .cred-card__icon svg * { animation: none !important; }
}

/* ───────────────────── Capabilities — cinematic dark surface ───────────────────── */

.capabilities {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 12vw, 160px) 0;
}
.capabilities__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(184,146,74,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(184,146,74,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 70% at center, black 0%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, black 0%, transparent 85%);
}
.capabilities .section-head { position: relative; z-index: 1; }

.cap-cinema {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 72px;
  position: relative;
  z-index: 1;
}

.cap-card {
  position: relative;
  padding: 40px 28px 36px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(184, 146, 74, 0.18);
  border-radius: 2px;
  transition: transform 0.5s var(--ease-out), border-color 0.5s, background 0.5s, box-shadow 0.5s;
  overflow: hidden;
}
/* Brass top accent that slides in on hover */
.cap-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #E0B96A 30%, #F5D684 50%, #E0B96A 70%, transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.6s var(--ease-out);
}
/* Soft brass glow that builds up on hover */
.cap-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -40%;
  width: 120%;
  height: 120%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center top, rgba(184, 146, 74, 0.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  pointer-events: none;
}
.cap-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 172, 92, 0.45);
  background: linear-gradient(180deg, rgba(184,146,74,0.06) 0%, rgba(255,255,255,0.015) 100%);
  box-shadow: 0 22px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(212, 172, 92, 0.15);
}
.cap-card:hover::before { transform: scaleX(1); }
.cap-card:hover::after  { opacity: 1; }

/* Huge brass-gradient numeral */
.cap-card__num {
  font-family: var(--font-sans);
  font-size: clamp(2.4rem, 3.6vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  background: linear-gradient(180deg, #F5D684 0%, #E0B96A 45%, #B8924A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 14px rgba(184, 146, 74, 0.22));
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

/* Large animated icon */
.cap-card__icon {
  width: 64px;
  height: 64px;
  color: var(--accent);
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
  transition: transform 0.6s var(--ease-out);
}
.cap-card__icon svg { width: 100%; height: 100%; overflow: visible; }
.cap-card:hover .cap-card__icon { transform: scale(1.05); }

.cap-card__label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(184, 146, 74, 0.85);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
  transition: color 0.3s, letter-spacing 0.4s var(--ease-out);
}
.cap-card:hover .cap-card__label {
  color: #F5D684;
  letter-spacing: 0.26em;
}

.cap-card__title {
  font-size: 1.2rem;
  font-weight: 600;
  color: white;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}
.cap-card:hover .cap-card__title { color: #FBE7B6; }

.cap-card__body {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin: 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 1100px) {
  .cap-cinema { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
  .cap-cinema { grid-template-columns: 1fr; gap: 20px; }
  .cap-card { padding: 32px 24px 28px; }
  .cap-card__icon { width: 56px; height: 56px; margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cap-card, .cap-card__icon { transition: none; }
  .cap-card__icon svg * { animation: none !important; }
}

/* ───────────────────── Practice areas — journey-style numerals ───────────────────── */

.practice-num {
  font-family: var(--font-sans);
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.85;
  background: linear-gradient(180deg, #E0B96A 0%, #B8924A 50%, #6B4F1F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 14px rgba(184, 146, 74, 0.18));
  display: inline-block;
}

/* Compact eyebrow that lives under the brass numeral */
.eyebrow--practice {
  margin-bottom: 18px;
  display: inline-flex;
  margin-left: 4px;
}

/* Subtle accent rule on the side of practice sections */
.practice-section {
  position: relative;
}
.practice-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100%);
  opacity: 0.4;
  pointer-events: none;
}
@media (max-width: 820px) {
  .practice-num { font-size: 3rem; }
  .practice-section::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .practice-num { filter: none; }
}

/* ───────────────────── Contact page — cinematic upgrade ───────────────────── */

/* Animated network overlay on the page header */
.pageheader--cinema { position: relative; }
.pageheader__network {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}
.pageheader__network svg { width: 100%; height: 100%; display: block; }

/* Response promise strip — sits below the lead in the page header */
.contact-promise {
  margin-top: 56px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding: 22px 34px;
  background: rgba(15, 30, 46, 0.55);
  border: 1px solid rgba(184, 146, 74, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
}
.contact-promise::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px;
  width: 18px; height: 18px;
  border-top: 1.5px solid #B8924A;
  border-left: 1.5px solid #B8924A;
}
.contact-promise::after {
  content: "";
  position: absolute;
  right: -1px; bottom: -1px;
  width: 18px; height: 18px;
  border-bottom: 1.5px solid #B8924A;
  border-right: 1.5px solid #B8924A;
}
.contact-promise__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-promise__num {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #FBE7B6 0%, #E0B96A 55%, #B8924A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.contact-promise__label {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.contact-promise__divider {
  width: 1px;
  height: 32px;
  background: rgba(184, 146, 74, 0.35);
}
@media (max-width: 720px) {
  .contact-promise { padding: 18px 22px; gap: 12px 20px; }
  .contact-promise__num { font-size: 1.2rem; }
  .contact-promise__divider { display: none; }
}

/* Form polish — brass focus rings, refined fields */
.contact-grid form {
  position: relative;
}
.form-row { position: relative; margin-bottom: 26px; }
.form-row label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 10px;
  transition: color 0.3s;
}
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink-900);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--ink-200);
  padding: 12px 0 14px;
  outline: none;
  transition: border-color 0.4s var(--ease-out);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.form-row textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
}
.form-row select {
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23B8924A' stroke-width='1.5'><path d='M3 5l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--ink-300); }

/* Brass underline that animates in on focus */
.form-row::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1.5px;
  background: linear-gradient(90deg, #E0B96A 0%, #F5D684 50%, #E0B96A 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
  pointer-events: none;
}
.form-row:focus-within::after { transform: scaleX(1); }
.form-row:focus-within label { color: var(--accent); }

/* Honeypot — visually + accessibly hidden from real users, but bots will see + fill it */
.form-row--hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none;
}
.form-row--hp::after { display: none; }

/* Submit button disabled state */
#contact-submit[disabled] {
  opacity: 0.65;
  cursor: progress;
}

/* Form status message — appears below the submit button */
.form-status {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-top: 18px;
  padding: 0;
  color: var(--ink-700);
  min-height: 0;
  transition: padding 0.3s, background 0.3s, border-left-width 0.3s;
  border-left: 0 solid transparent;
}
.form-status:empty { display: none; }
.form-status--success {
  padding: 14px 18px;
  background: rgba(46, 125, 50, 0.06);
  border-left: 3px solid #2E7D32;
  color: #1F5D24;
}
.form-status--error {
  padding: 14px 18px;
  background: rgba(184, 47, 47, 0.05);
  border-left: 3px solid #B82F2F;
  color: #8E1F1F;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; gap: 0; }
}

/* Contact grid — form on left, rail on right */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 80px;
  align-items: start;
}
@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; gap: 56px; }
}

/* Contact rail — premium card */
.contact-rail {
  position: relative;
  padding: 40px 32px;
  background: linear-gradient(180deg, #0F1E2E 0%, #0A1623 100%);
  color: white;
  overflow: hidden;
  isolation: isolate;
}
.contact-rail::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #E0B96A 30%, #F5D684 50%, #E0B96A 70%, transparent 100%);
}
.contact-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(184,146,74,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(184,146,74,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: -1;
  mask-image: radial-gradient(circle at 20% 0%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 20% 0%, black 0%, transparent 70%);
}
.contact-rail h2 {
  font-size: 1.35rem;
  font-weight: 600;
  color: white;
  margin: 0 0 28px;
  letter-spacing: -0.02em;
}
.contact-rail__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(184, 146, 74, 0.18);
}
.contact-rail__row:first-of-type { border-top: 0; padding-top: 0; }
.contact-rail__row:last-of-type { padding-bottom: 0; }

.contact-rail__icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  padding: 8px;
  border-radius: 50%;
  background: rgba(184, 146, 74, 0.1);
  border: 1px solid rgba(184, 146, 74, 0.3);
  color: var(--accent);
  stroke-width: 1.5;
  transition: background 0.4s, transform 0.5s var(--ease-out);
}
.contact-rail__row:hover .contact-rail__icon {
  background: rgba(184, 146, 74, 0.2);
  transform: scale(1.08) rotate(-4deg);
}
.contact-rail__label {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(184, 146, 74, 0.85);
  margin-bottom: 4px;
}
.contact-rail__value {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: white;
  line-height: 1.4;
}
.contact-rail__value a {
  color: white;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 1px;
  transition: color 0.3s, border-color 0.3s;
}
.contact-rail__value a:hover {
  color: #F5D684;
  border-bottom-color: #F5D684;
}
.contact-rail__addr {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pageheader__network svg * { animation: none !important; }
  .contact-rail__icon, .form-row::after { transition: none; }
}