/* ============================================================
   Luxury Management — Homepage Preview
   style.css

   Composition order:
     1. @font-face (self-hosted Urbanist from design-export)
     2. Tokens (color, type, spacing, radii, elevation, motion)
     3. Global element mapping
     4. Component kit (.lm-btn, .glass-card, .lift, .eyebrow-rule, etc.)
     5. Section styles (utility bar → floating widget)
     6. Responsive overrides
   ============================================================ */

/* ---------- 1. FONTS ---------- */
@font-face {
  font-family: "Urbanist";
  src: url("../02-claude-design-export/design-system-original/fonts/Urbanist-VariableFont_wght.ttf") format("truetype-variations"),
       url("../02-claude-design-export/design-system-original/fonts/Urbanist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../02-claude-design-export/design-system-original/fonts/Urbanist-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("../02-claude-design-export/design-system-original/fonts/Urbanist-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- 2. TOKENS ---------- */
:root {
  /* Palette */
  --lm-authority-navy:  #071628;
  --lm-heritage-navy:   #0B2239;
  --lm-deep-navy:       #050F1C;
  --lm-midnight:        #122B45;
  --lm-champagne-gold:  #C9A34E;
  --lm-champagne-soft:  #D9B97A;
  --lm-champagne-deep:  #A8852F;
  --lm-warm-ivory:      #F7F2EC;
  --lm-soft-stone:      #E7E0D4;
  --lm-stone-deep:      #C9BFAE;
  --lm-slate-text:      #637084;
  --lm-slate-deep:      #3F4A5C;
  --lm-brooklyn-brick:  #A4635F;
  --lm-white:           #FFFFFF;
  --lm-black:           #000000;

  /* Surfaces */
  --color-surface-ivory:      var(--lm-warm-ivory);
  --color-surface-stone:      var(--lm-soft-stone);
  --color-surface-white:      var(--lm-white);
  --color-surface-navy:       var(--lm-authority-navy);
  --color-surface-navy-2:     var(--lm-heritage-navy);
  --color-surface-navy-deep:  var(--lm-deep-navy);

  /* Foreground */
  --color-fg-1: #0E1B2C;
  --color-fg-2: var(--lm-slate-deep);
  --color-fg-3: var(--lm-slate-text);
  --color-fg-inv-1: var(--lm-warm-ivory);
  --color-fg-inv-2: #C8D1DD;
  --color-fg-inv-3: #8895A8;

  /* Accent */
  --color-accent:        var(--lm-champagne-gold);
  --color-accent-hover:  var(--lm-champagne-soft);
  --color-accent-press:  var(--lm-champagne-deep);
  --color-accent-soft:   rgba(201,163,78,0.14);
  --color-accent-line:   rgba(201,163,78,0.32);

  /* Borders */
  --color-border-ivory:       #E2DACA;
  --color-border-stone:       var(--lm-stone-deep);
  --color-border-navy:        rgba(255,255,255,0.08);
  --color-border-navy-strong: rgba(255,255,255,0.16);
  --color-hairline-gold:      var(--color-accent-line);

  /* States */
  --color-success: #3E7C5A;
  --color-warning: #B88B2A;
  --color-danger:  #9A3F3A;
  --color-info:    var(--lm-slate-deep);
  --color-focus:        var(--lm-champagne-gold);
  --color-focus-shadow: 0 0 0 3px rgba(201,163,78,0.35);

  /* Scrims */
  --scrim-hero:         linear-gradient(180deg, rgba(7,22,40,0.55) 0%, rgba(7,22,40,0.70) 55%, rgba(5,15,28,0.92) 100%);
  --scrim-hero-side:    linear-gradient(90deg, rgba(7,22,40,0.78) 0%, rgba(7,22,40,0.45) 55%, rgba(7,22,40,0.20) 100%);
  --scrim-image-card:   linear-gradient(180deg, rgba(7,22,40,0.00) 40%, rgba(7,22,40,0.65) 100%);

  /* Typography */
  --font-sans:    "Urbanist", "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Urbanist", "Manrope", "Inter", system-ui, sans-serif;
  --font-serif-accent: "Cormorant Garamond", "Georgia", serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;

  --fs-display-1: clamp(48px, 6.2vw, 88px);
  --fs-display-2: clamp(40px, 5.0vw, 68px);
  --fs-h1: clamp(36px, 4.0vw, 56px);
  --fs-h2: clamp(28px, 3.0vw, 44px);
  --fs-h3: clamp(22px, 1.8vw, 28px);
  --fs-h4: 18px;
  --fs-lead: clamp(18px, 1.3vw, 22px);
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;
  --fs-utility: 12px;

  --lh-display: 1.04; --lh-heading: 1.12; --lh-subhead: 1.30;
  --lh-body: 1.62; --lh-tight: 1.20;

  --ls-display: -0.018em; --ls-heading: -0.012em; --ls-body: 0em;
  --ls-eyebrow: 0.16em; --ls-button: 0.06em;

  /* Spacing */
  --sp-0: 0; --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px;
  --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 32px;
  --sp-9: 40px; --sp-10: 48px; --sp-11: 64px; --sp-12: 80px;
  --sp-13: 96px; --sp-14: 120px; --sp-15: 160px;

  --section-y-desktop: 120px;
  --section-y-tablet: 88px;
  --section-y-mobile: 64px;

  --container-max: 1320px;
  --container-px: max(24px, 5vw);
  --gutter: 32px;

  /* Radii */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* Shadows */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(7,22,40,0.06), 0 1px 1px rgba(7,22,40,0.04);
  --shadow-2: 0 8px 24px -12px rgba(7,22,40,0.18), 0 2px 6px rgba(7,22,40,0.06);
  --shadow-3: 0 24px 60px -28px rgba(7,22,40,0.34), 0 6px 16px -8px rgba(7,22,40,0.10);
  --shadow-hero: 0 40px 100px -40px rgba(0,0,0,0.6);

  /* Glass */
  --glass-bg-on-navy:  linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0.10) 100%);
  --glass-bg-on-light: linear-gradient(180deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.45) 55%, rgba(255,255,255,0.55) 100%);
  --glass-border-on-navy:  rgba(255,255,255,0.18);
  --glass-border-on-light: rgba(7,22,40,0.08);
  --glass-blur: 40px;
  --glass-saturate: 180%;
  --glass-brightness: 1.05;
  --glass-shadow: 0 24px 60px -28px rgba(0,0,0,0.55),
                  inset 0 1px 0 rgba(255,255,255,0.55),
                  inset 0 -1px 0 rgba(255,255,255,0.06),
                  inset 0 0 0 0.5px rgba(255,255,255,0.18);
  --glass-shadow-light: 0 18px 40px -22px rgba(7,22,40,0.20),
                        inset 0 1px 0 rgba(255,255,255,0.95),
                        inset 0 -1px 0 rgba(7,22,40,0.04);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-linear: linear;
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms; --dur-4: 720ms;

  /* Z-index */
  --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-modal: 500; --z-toast: 800;
}

/* ---------- 3. GLOBAL ELEMENT MAPPING ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html {
  /* Allow sticky positioning to reference the html scroll context;
     overflow-x: hidden on <body> was blocking sticky on services page. */
  overflow-x: clip;
}
body {
  font-family: var(--font-sans);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-fg-1);
  background: var(--color-surface-ivory);
  /* overflow-x: hidden removed — broke position: sticky on descendants.
     Use clip on <html> above if a wide element ever needs horizontal containment. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
img { max-width: 100%; display: block; }
button { font-family: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  color: var(--color-fg-1);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-display); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-subhead); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-subhead); font-weight: var(--fw-semibold); }
p  { color: var(--color-fg-2); text-wrap: pretty; }
a  { color: var(--lm-heritage-navy); text-decoration: none; transition: color var(--dur-2) var(--ease-out); }
a:hover { color: var(--color-accent-press); }

.eyebrow {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--color-accent);
}
.editorial-accent {
  font-family: var(--font-serif-accent); font-style: italic;
  font-weight: 400; letter-spacing: 0; color: var(--color-accent);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: var(--color-focus-shadow);
  border-radius: 4px;
}
::selection { background: rgba(201,163,78,0.30); color: var(--lm-authority-navy); }

/* ---------- 4. KIT ---------- */

/* Buttons */
.lm-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; border: none; cursor: pointer; overflow: hidden; isolation: isolate;
  font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out),
              background 220ms var(--ease-out), color 220ms var(--ease-out),
              border-color 220ms var(--ease-out);
  height: 50px; padding: 0 28px; font-size: 14.5px;
}
.lm-btn--sm { height: 42px; padding: 0 22px; font-size: 13px; }
.lm-btn--lg { height: 58px; padding: 0 36px; font-size: 15px; }
.lm-btn--block { width: 100%; }

.lm-btn:not(.lm-btn--flat)::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-size: 220% 100%; background-position: 0% 50%;
  transition: background-position 700ms var(--ease-out);
}
.lm-btn:not(.lm-btn--flat)::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%; z-index: -1;
  background: linear-gradient(110deg, transparent 0%, transparent 35%, rgba(255,255,255,0.32) 50%, transparent 65%, transparent 100%);
  transform: skewX(-18deg);
  animation: lmBtnSheen 5.4s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  pointer-events: none;
}
@keyframes lmBtnSheen {
  0% { left: -60%; }
  60% { left: 130%; }
  100% { left: 130%; }
}

.lm-btn--primary { color: #0E1B2C; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 28px -10px rgba(168,133,47,0.55); }
.lm-btn--primary::before {
  background-image: linear-gradient(96deg, #A8852F 0%, #C9A34E 26%, #E6CB8A 50%, #C9A34E 74%, #A8852F 100%);
}
.lm-btn--primary:hover { transform: translateY(-1px); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 12px 32px -10px rgba(168,133,47,0.65); }
.lm-btn--primary:hover::before { background-position: 100% 50%; }

.lm-btn--dark { color: var(--lm-warm-ivory); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
.lm-btn--dark::before {
  background-image: linear-gradient(96deg, #050F1C 0%, #0B2239 35%, #1B3558 55%, #0B2239 75%, #050F1C 100%);
}
.lm-btn--dark:hover { transform: translateY(-1px); }

.lm-btn--ghost { background: transparent; color: var(--lm-warm-ivory); border: 1px solid rgba(201,163,78,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lm-btn--ghost:hover { background: rgba(201,163,78,0.12); border-color: var(--lm-champagne-gold); }

.lm-btn--outline { background: transparent; color: var(--lm-authority-navy); border: 1px solid var(--lm-stone-deep); }
.lm-btn--outline:hover { border-color: var(--lm-champagne-gold); color: var(--lm-champagne-deep); }

/* Nav link */
.lm-navlink { position: relative; padding: 6px 0; }
.lm-navlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--lm-champagne-gold); transition: width 260ms var(--ease-out);
}
.lm-navlink:hover::after { width: 100%; }

/* Glass cards */
.glass-card {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.08) 100%);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 28px 60px -28px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(255,255,255,0.04);
  transition: transform 320ms var(--ease-out), border-color 320ms var(--ease-out), background 320ms var(--ease-out);
  overflow: hidden;
}
.glass-card:hover { transform: translateY(-3px); border-color: rgba(201,163,78,0.32); }
.glass-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.10) 45%, rgba(201,163,78,0.18) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.glass-card--white {
  background: linear-gradient(180deg, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.34) 50%, rgba(255,255,255,0.39) 100%);
  backdrop-filter: blur(50px) saturate(160%) brightness(1.15);
  -webkit-backdrop-filter: blur(50px) saturate(160%) brightness(1.15);
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 32px 70px -30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.78), inset 0 -1px 0 rgba(255,255,255,0.08);
}
.glass-card--white::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.26) 45%, rgba(255,255,255,0.34) 100%);
}
.glass-card--shine { isolation: isolate; }
.glass-card--shine::after {
  content: ""; position: absolute; top: 0; left: -40%; width: 35%; height: 100%; z-index: 1;
  background: linear-gradient(110deg, transparent 0%, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%, transparent 100%);
  transform: skewX(-14deg);
  animation: lmGlassShine 6.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none; border-radius: inherit;
}
@keyframes lmGlassShine {
  0%, 8%   { left: -45%; opacity: 0; }
  18%      { opacity: 1; }
  70%      { left: 120%; opacity: 1; }
  72%, 100%{ opacity: 0; }
}
.glass-card--shine > * { position: relative; z-index: 2; }

/* Lift hover */
.lift {
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }

/* Eyebrow rule */
.eyebrow-rule {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lm-champagne-gold);
}
.eyebrow-rule::before {
  content: ""; width: 32px; height: 1px; background: var(--lm-champagne-gold);
}

/* Marquee */
.marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
}
.marquee__track {
  display: flex; gap: 64px; width: max-content;
  animation: lmMarquee 80s linear infinite;
}
@keyframes lmMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Form fields */
.field-input, .field-select, .field-textarea {
  font-family: var(--font-sans); font-size: 15px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--color-border-ivory);
  border-radius: 10px; color: var(--color-fg-1); outline: none; width: 100%;
  transition: border-color 180ms, box-shadow 180ms;
  appearance: none; -webkit-appearance: none;
}
.field-input:focus, .field-select:focus, .field-textarea:focus {
  border-color: var(--lm-champagne-gold);
  box-shadow: 0 0 0 3px rgba(201,163,78,0.22);
}
.field-textarea { min-height: 110px; resize: vertical; font-family: var(--font-sans); }
.field-select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-fg-3) 50%),
    linear-gradient(135deg, var(--color-fg-3) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 40px;
}
.field-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--color-fg-1);
  display: block; margin-bottom: 8px;
}

/* Reveal-on-scroll */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   5. SECTIONS
   ============================================================ */

/* Container shorthand */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* ---------- Utility bar ---------- */
.utility-bar {
  position: sticky; top: 0; z-index: 201;
  background: var(--lm-deep-navy);
  color: var(--lm-warm-ivory);
  font-size: 12.5px; letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 0 var(--container-px);
}
.utility-bar__inner {
  max-width: var(--container-max); margin: 0 auto; height: 40px;
  display: flex; align-items: center; justify-content: space-between;
}
.utility-bar__left { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.utility-bar__left a {
  color: inherit; display: inline-flex; align-items: center; gap: 8px;
}
.utility-bar__dot {
  width: 5px; height: 5px; background: var(--lm-champagne-gold); border-radius: 999px;
}
.utility-bar__sep { opacity: 0.25; }
.utility-bar__addr { display: inline-flex; align-items: center; gap: 8px; color: var(--color-fg-inv-2); }
.utility-bar__right {
  font-size: 11.5px; color: var(--color-fg-inv-3);
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 40px; z-index: 200;
  background: rgba(7,22,40,0.86);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--lm-warm-ivory);
  padding: 0 var(--container-px);
  transition: all 260ms var(--ease-out);
}
.site-header.scrolled {
  background: rgba(247,242,236,0.82);
  border-bottom-color: var(--color-border-ivory);
  color: var(--lm-authority-navy);
}
.site-header__inner {
  max-width: var(--container-max); margin: 0 auto;
  height: 92px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; transition: height 260ms var(--ease-out);
}
.site-header.scrolled .site-header__inner { height: 72px; }

.brand-lockup {
  display: flex; align-items: center; gap: 16px;
  color: inherit; text-decoration: none; flex: 0 0 auto;
}
.brand-lockup img {
  height: 68px; width: auto; transition: height 260ms var(--ease-out);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
}
.site-header.scrolled .brand-lockup img {
  height: 52px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.10));
}
.brand-lockup__txt { display: flex; flex-direction: column; line-height: 1; }
.brand-lockup__name {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.brand-lockup__tagline {
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--lm-champagne-gold); font-weight: 600; margin-top: 6px;
}

.nav-main { display: flex; align-items: center; gap: 28px; }
.nav-main a {
  color: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
  text-decoration: none;
}

.header-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.portal-pill {
  color: var(--lm-warm-ivory);
  background: rgba(201,163,78,0.10);
  border: 1px solid rgba(201,163,78,0.45);
  border-radius: 999px; padding: 8px 14px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.10em;
  text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 220ms var(--ease-out); white-space: nowrap;
}
.site-header.scrolled .portal-pill {
  color: var(--lm-authority-navy);
  border-color: rgba(201,163,78,0.50);
}
.portal-pill:hover {
  background: var(--lm-champagne-gold) !important;
  color: var(--lm-authority-navy) !important;
  border-color: var(--lm-champagne-gold) !important;
}

.nav-toggle {
  display: none;
  background: transparent; border: 1px solid currentColor;
  border-radius: 8px; width: 42px; height: 42px;
  color: inherit; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 4px; padding: 0;
}
.nav-toggle span { width: 18px; height: 1.5px; background: currentColor; display: block; }

/* ---------- Hero ---------- */
.hero {
  position: relative; background: var(--lm-authority-navy);
  color: var(--lm-warm-ivory); overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; overflow: hidden;
}
.hero-bg__panel {
  position: absolute; inset: 0;
  /* Placeholder when no hero image/video: layered navy gradient that suggests architecture */
  background:
    radial-gradient(ellipse at 30% 20%, rgba(201,163,78,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(11,34,57,0.6) 0%, transparent 60%),
    linear-gradient(155deg, #050F1C 0%, #071628 35%, #0B2239 65%, #050F1C 100%);
  filter: saturate(0.85) brightness(0.92) contrast(1.06);
}
.hero-bg video, .hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 50%;
  display: block;
  /* Sit above the navy fallback panel but below the scrims (DOM order handles z) */
  filter: saturate(0.85) brightness(0.72) contrast(1.06);
}
/* Hide via JS-set [hidden] when the video errors or reduced motion is set. */
.hero-bg__video[hidden] { display: none; }
.hero-bg__scrim-1 { position: absolute; inset: 0; background: var(--scrim-hero); }
.hero-bg__scrim-2 {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,22,40,0.85) 0%, rgba(7,22,40,0.50) 45%, rgba(7,22,40,0.20) 100%);
}
.hero-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(201,163,78,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,163,78,0.05) 1px, transparent 1px);
  background-size: 140px 140px;
}

.hero-content {
  position: relative; z-index: 2;
  padding: 72px var(--container-px) 130px;
}
.hero-content > .container { padding-left: 0; padding-right: 0; }

.hero-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  align-items: stretch;
}
.hero-headcol { grid-column: 1 / 3; padding-right: 24px; }
.hero-bodycol { grid-column: 1 / 3; padding-right: 24px; }
.hero-side    { grid-column: 3 / 4; grid-row: 1 / 3; align-self: start; }

.hero-tag {
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
}
.hero-tag__line { width: 36px; height: 1px; background: var(--lm-champagne-gold); }
.hero-tag__label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--lm-champagne-gold);
}

.hero-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(44px, 5.6vw, 86px); line-height: 1.04; letter-spacing: -0.020em;
  color: var(--lm-warm-ivory); max-width: 1100px;
}
.hero-h1__accent {
  font-family: var(--font-serif-accent); font-style: italic;
  font-weight: 400; color: var(--lm-champagne-gold);
}

.hero-lead {
  font-size: 19.5px; line-height: 1.6; color: var(--lm-warm-ivory);
  max-width: 720px; font-weight: 400; margin-top: 22px;
}
.hero-sub {
  font-size: 15.5px; line-height: 1.65; color: var(--color-fg-inv-2);
  max-width: 720px; margin-top: 16px;
}
.hero-ctas { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }

.hero-trust-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px;
  margin-top: 28px; list-style: none; padding: 0; max-width: 560px;
}
.hero-trust-list li {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13.5px; color: var(--lm-warm-ivory); font-weight: 500; letter-spacing: 0.03em;
}
.hero-trust-list li::before {
  content: ""; width: 6px; height: 6px; background: var(--lm-champagne-gold);
  border-radius: 999px; box-shadow: 0 0 12px rgba(201,163,78,0.6);
}

/* Hero side: founders glass card */
.hero-founder-card {
  padding: 28px 26px 28px 52px;
  display: flex; flex-direction: column; gap: 24px;
}
.hero-founder-quote {
  font-family: var(--font-serif-accent); font-style: italic;
  font-size: 17px; color: #000; line-height: 1.45;
}
.hero-founder-row { display: flex; gap: 16px; align-items: flex-start; }
.hero-founder-item { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.hero-founder-item img {
  width: 120px; height: 120px; border-radius: 999px; object-fit: cover;
  border: 1.5px solid rgba(201,163,78,0.55); flex: 0 0 auto;
}
.hero-founder-name {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: #000; letter-spacing: 0.01em;
}
.hero-founder-role {
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; margin-top: 4px; color: rgb(36,54,77);
}
.hero-founder-stat {
  padding-top: 18px; border-top: 1px solid rgba(0,0,0,0.14);
  display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center;
}
.hero-founder-stat__num {
  font-family: var(--font-display); font-weight: 700; font-size: 48px;
  color: #000; letter-spacing: -0.04em; line-height: 0.9;
}
.hero-founder-stat__lbl {
  font-size: 13px; line-height: 1.4; color: #000; font-weight: 500;
}

/* Hero trust glass cards (3 below hero text) */
.hero-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 80px;
}
.hero-cards .glass-card { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.hero-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
}
.hero-card-icon {
  width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
}
.hero-card-icon img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(7,22,40,0.18)); }
.hero-card-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--lm-champagne-gold); margin-top: 16px;
}
.hero-card-title {
  font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.25;
  color: var(--lm-warm-ivory);
}
.hero-card-body {
  font-size: 13.5px; line-height: 1.6; color: var(--color-fg-inv-2);
}

/* ---------- Trust marquee ---------- */
.trust-marquee {
  background: var(--lm-champagne-gold);
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 22px 0;
}
.trust-marquee__item {
  display: inline-flex; align-items: center; gap: 24px;
  font-size: 13.5px; letter-spacing: 0.10em; text-transform: uppercase;
  font-weight: 600; color: #FFFFFF;
}
.trust-marquee__diamond {
  width: 6px; height: 6px; transform: rotate(45deg); background: var(--lm-authority-navy);
}

/* ---------- Section shared ---------- */
.section { padding: var(--section-y-desktop) var(--container-px); position: relative; }
.section__head { margin-bottom: 64px; max-width: 820px; }
.section__head .eyebrow-rule { color: var(--lm-champagne-deep); }
.section--dark .section__head .eyebrow-rule { color: var(--lm-champagne-gold); }
.section__h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 3.4vw, 50px); line-height: 1.10; letter-spacing: -0.014em;
  color: var(--color-fg-1); margin-top: 18px; max-width: 880px;
}
.section--dark .section__h2 { color: var(--lm-warm-ivory); }
.section__intro {
  font-size: 18px; line-height: 1.65; color: var(--color-fg-2);
  margin-top: 22px; max-width: 720px;
}
.section--dark .section__intro { color: var(--color-fg-inv-2); }

/* ---------- Trust factors ---------- */
.trust-factors { background: var(--color-surface-ivory); }
.trust-factors__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch;
}
.trust-card {
  background: #fff; border: 1px solid var(--color-border-ivory); border-radius: 14px;
  padding: 30px 28px 32px; box-shadow: var(--shadow-1);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
}
.trust-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 22px;
}
.trust-card__icon { width: 64px; height: 64px; }
.trust-card__num {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--lm-champagne-deep); letter-spacing: -0.02em; line-height: 1;
}
.trust-card__rule { width: 28px; height: 1px; background: var(--lm-champagne-gold); margin: 0 0 16px; }
.trust-card__title {
  font-family: var(--font-display); font-weight: 600; font-size: 18.5px; line-height: 1.3;
  color: var(--color-fg-1);
}
.trust-card__body { font-size: 14px; line-height: 1.65; color: var(--color-fg-2); margin-top: 12px; }

/* ---------- About ---------- */
.about { background: var(--color-surface-stone); overflow: hidden; }
.about__decor {
  position: absolute; top: 0; right: 0; width: 480px; height: 480px;
  background: radial-gradient(closest-side, rgba(201,163,78,0.10), transparent);
}
.about__grid {
  max-width: var(--container-max); margin: 0 auto;
  display: grid; grid-template-columns: 5fr 6fr; gap: 80px;
  align-items: center; position: relative;
}
.about__media {
  position: relative; border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-3); aspect-ratio: 4/5;
}
.kenburns {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: var(--lm-deep-navy); /* fallback while images load */
}
.kenburns__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1100ms var(--ease-in-out);
  will-change: opacity;
}
.kenburns__slide.is-active { opacity: 1; }
.kenburns__slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
  /* Slight color treatment so images sit consistently in the navy/gold palette */
  filter: saturate(0.92) brightness(0.95) contrast(1.02);
}
/* Subtle full-image navy tint for readability, deepening toward the caption */
.kenburns__overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(7,22,40,0.22) 0%,
    rgba(7,22,40,0.32) 45%,
    rgba(7,22,40,0.78) 100%
  );
}
/* Brand mark — bottom-left of the carousel panel.
   Decorative (the brand is already announced in the header/footer),
   sized restrained so the imagery leads. */
.kenburns__logo {
  position: absolute; left: 28px; bottom: 28px;
  z-index: 2; pointer-events: none;
  filter:
    drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.kenburns__logo img {
  height: 60px; width: auto; display: block;
}
@media (max-width: 640px) {
  .kenburns__logo { left: 20px; bottom: 20px; }
  .kenburns__logo img { height: 48px; }
}
.kenburns__dots {
  position: absolute; right: 24px; bottom: 24px;
  display: flex; gap: 6px; z-index: 3;
}
.kenburns__dot {
  width: 8px; height: 4px; padding: 0; border-radius: 999px; border: none;
  background: rgba(255,255,255,0.45); cursor: pointer;
  transition: all 400ms var(--ease-out);
}
.kenburns__dot.is-active { width: 22px; background: var(--lm-champagne-gold); }

.about__body strong { color: var(--color-fg-1); }
.about__body p { font-size: 17.5px; line-height: 1.7; color: var(--color-fg-2); margin-top: 24px; }
.about__body p + p { font-size: 16px; margin-top: 16px; }

.about__stats {
  margin-top: 36px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding-top: 28px; border-top: 1px solid var(--lm-stone-deep);
}
.about__stat-num {
  font-family: var(--font-display); font-weight: 700; font-size: 42px;
  color: var(--lm-champagne-deep); letter-spacing: -0.03em; line-height: 1;
}
.about__stat-lbl {
  font-size: 12.5px; color: var(--color-fg-3); margin-top: 8px;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.about__cta { margin-top: 36px; }

/* ---------- Services ---------- */
.services { background: var(--color-surface-ivory); overflow: hidden; }
.services__decor {
  position: absolute; top: 60px; left: -100px; width: 280px; height: 280px;
  background: radial-gradient(closest-side, rgba(201,163,78,0.08), transparent);
}
.services__head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 24px; margin-bottom: 64px;
}
.services__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch;
}
.service-card {
  background: #fff; border: 1px solid var(--color-border-ivory); border-radius: 14px;
  padding: 32px 30px; box-shadow: var(--shadow-1);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
}
.service-card__head {
  display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px;
}
.service-card__icon { width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(7,22,40,0.18)); }
.service-card__num {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--color-fg-3); letter-spacing: 0.16em; margin-top: 6px;
}
.service-card__title {
  font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.25;
  color: var(--color-fg-1); letter-spacing: -0.005em;
}
.service-card__body { font-size: 14.5px; line-height: 1.65; color: var(--color-fg-2); margin-top: 14px; }
.service-card__more {
  margin-top: auto; padding-top: 22px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lm-champagne-deep);
}

/* ============================================================
   HOMEPAGE — Ethereal-shadow service cards (6-card services grid).
   Layered visual stack:
     0. .ethereal-service-card__bg     navy base + soft radials
     1. .ethereal-service-card__shader thick gradient field, run through
                                       the SVG turbulence filter
                                       (#lm-ethereal-shadow)
     2. .ethereal-service-card__orb    three drifting light-blue orbs
     3. .ethereal-service-card__shine  diagonal sheen sweep
     4. .ethereal-service-card__grain  editorial grid grain
        + ::after readability darken
     6. .home-service-card__content    text + glass-gold CTA
   No photos, no icons. Brand palette only.
   ============================================================ */
.home-service-card,
.ethereal-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 360px;
  border-radius: 32px;
  overflow: hidden;
  isolation: isolate;
  background: #020b16;
  border: 1px solid rgba(201, 162, 74, 0.18);
  color: #F8F5EC;
  text-decoration: none;
  box-shadow:
    0 32px 90px rgba(2, 11, 22, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    transform 0.45s var(--ease-soft),
    border-color 0.45s var(--ease-soft),
    box-shadow 0.45s var(--ease-soft);
}
.home-service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 74, 0.45);
  box-shadow:
    0 38px 100px rgba(2, 11, 22, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Layer 0 — base navy backdrop with light-blue & deep-navy radial accents */
.ethereal-service-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(146, 195, 236, 0.22), transparent 28%),
    radial-gradient(circle at 82% 74%, rgba(20, 75, 125, 0.55), transparent 38%),
    linear-gradient(135deg, #020b16 0%, #061525 46%, #0b2b4a 100%);
}

/* Layer 1 — SHADER passed through SVG turbulence filter */
.ethereal-service-card__shader {
  position: absolute;
  inset: -34%;
  z-index: 1;
  background:
    radial-gradient(circle at 28% 34%, rgba(230, 245, 255, 0.42), transparent 18%),
    radial-gradient(circle at 70% 26%, rgba(108, 170, 224, 0.34), transparent 24%),
    radial-gradient(circle at 62% 76%, rgba(22, 75, 124, 0.66), transparent 34%),
    radial-gradient(circle at 38% 62%, rgba(201, 162, 74, 0.10), transparent 22%),
    conic-gradient(
      from 140deg at 50% 50%,
      rgba(2, 11, 22, 0.98),
      rgba(12, 52, 88, 0.88),
      rgba(166, 215, 255, 0.30),
      rgba(6, 21, 37, 0.96),
      rgba(2, 11, 22, 0.98)
    );
  filter: url(#lm-ethereal-shadow) blur(10px);
  opacity: 0.92;
  mix-blend-mode: screen;
  animation: lmEtherealDrift 18s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Layer 2 — three drifting orbs, each with its own cycle */
.ethereal-service-card__orb {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 999px;
  filter: blur(46px);
  mix-blend-mode: screen;
  opacity: 0.58;
  will-change: transform;
}
.ethereal-service-card__orb--one {
  width: 58%;
  aspect-ratio: 1 / 1;
  left: -18%;
  top: -16%;
  background: rgba(172, 218, 255, 0.24);
  animation: lmEtherealOrbOne 14s ease-in-out infinite alternate;
}
.ethereal-service-card__orb--two {
  width: 64%;
  aspect-ratio: 1 / 1;
  right: -22%;
  top: 12%;
  background: rgba(40, 110, 172, 0.42);
  animation: lmEtherealOrbTwo 17s ease-in-out infinite alternate;
}
.ethereal-service-card__orb--three {
  width: 54%;
  aspect-ratio: 1 / 1;
  left: 32%;
  bottom: -28%;
  background: rgba(245, 248, 255, 0.16);
  animation: lmEtherealOrbThree 21s ease-in-out infinite alternate;
}

/* Layer 3 — Diagonal sheen sweep across the entire card on a long cycle */
.ethereal-service-card__shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(255, 255, 255, 0.16) 44%,
    rgba(137, 190, 235, 0.10) 52%,
    transparent 70%
  );
  transform: translateX(-140%) skewX(-14deg);
  animation: lmCardSheen 8s ease-in-out infinite;
}

/* Layer 4 — editorial grid grain */
.ethereal-service-card__grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.11;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* Readability darken at the bottom (above orbs, below grain/content) */
.ethereal-service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(2, 11, 22, 0.16) 0%,
    rgba(2, 11, 22, 0.26) 42%,
    rgba(2, 11, 22, 0.58) 100%
  );
}

/* Content above every animated layer */
.home-service-card__content {
  position: relative;
  z-index: 6;
  height: 100%;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(30px, 3vw, 44px);
}

/* "01 / 06" counter in the top-right corner */
.home-service-card__index {
  position: absolute;
  top: 28px;
  right: 32px;
  color: rgba(247, 244, 235, 0.45);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 500;
}

.home-service-card__title,
.home-service-card h3 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(25px, 2vw, 36px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #F8F5ED;
  max-width: 520px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.26);
}
.home-service-card__body,
.home-service-card p {
  margin: 0 0 30px;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.62;
  font-weight: 400;
  color: rgba(248, 245, 237, 0.72);
  max-width: 560px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}

/* Glass + gold CTA — smaller, lighter, with backdrop-filter and sheen */
.home-service-card__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: fit-content;
  min-height: 42px;
  padding: 0 24px;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.06)),
    linear-gradient(135deg, rgba(201, 162, 74, 0.34), rgba(201, 162, 74, 0.14));
  border: 1px solid rgba(225, 198, 112, 0.52);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #F7F1DB;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    0 12px 34px rgba(2, 11, 22, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transition:
    transform 280ms ease,
    box-shadow 280ms ease,
    border-color 280ms ease,
    background 280ms ease;
}
.home-service-card__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 72%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  transform: skewX(-18deg);
  animation: lmButtonSheen 4.6s ease-in-out infinite;
  pointer-events: none;
}
.home-service-card__cta span {
  position: relative;
  z-index: 2;
  font-size: 13px;
  line-height: 1;
}
.home-service-card__cta:hover {
  transform: translateY(-2px);
  border-color: rgba(230, 205, 128, 0.78);
  box-shadow:
    0 16px 44px rgba(201, 162, 74, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

/* Card hover — shader runs faster, orbs intensify */
.ethereal-service-card:hover .ethereal-service-card__shader {
  opacity: 1;
  animation-duration: 12s;
}
.ethereal-service-card:hover .ethereal-service-card__orb {
  opacity: 0.74;
}

@keyframes lmEtherealDrift {
  0%   { transform: translate3d(-5%, -4%, 0) scale(1)    rotate(0deg); }
  35%  { transform: translate3d( 5%,  3%, 0) scale(1.10) rotate(7deg); }
  70%  { transform: translate3d(-2%,  7%, 0) scale(1.15) rotate(-6deg); }
  100% { transform: translate3d( 6%, -5%, 0) scale(1.08) rotate(4deg); }
}
@keyframes lmEtherealOrbOne {
  0%   { transform: translate3d(0, 0, 0)      scale(1); }
  100% { transform: translate3d(34%, 24%, 0)  scale(1.28); }
}
@keyframes lmEtherealOrbTwo {
  0%   { transform: translate3d(0, 0, 0)      scale(1.08); }
  100% { transform: translate3d(-28%, 20%, 0) scale(1.36); }
}
@keyframes lmEtherealOrbThree {
  0%   { transform: translate3d(0, 0, 0)      scale(1); }
  100% { transform: translate3d(14%, -38%, 0) scale(1.26); }
}
@keyframes lmCardSheen {
  0%   { transform: translateX(-140%) skewX(-14deg); opacity: 0; }
  22%  { opacity: 0; }
  38%  { opacity: 0.65; }
  58%  { transform: translateX(140%) skewX(-14deg); opacity: 0; }
  100% { transform: translateX(140%) skewX(-14deg); opacity: 0; }
}
@keyframes lmButtonSheen {
  0%   { left: -120%; }
  42%  { left: -120%; }
  68%  { left:  140%; }
  100% { left:  140%; }
}

/* Responsive grid override for homepage cards */
@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 980px) {
  .home-service-card,
  .ethereal-service-card { min-height: 330px; }
  .home-service-card__content { min-height: 330px; }
}
@media (max-width: 640px) {
  .services__grid { grid-template-columns: 1fr !important; gap: 18px; }
  .home-service-card,
  .ethereal-service-card {
    min-height: 310px;
    border-radius: 24px;
  }
  .home-service-card__content {
    min-height: 310px;
    padding: 26px;
  }
  .home-service-card__index {
    top: 22px;
    right: 24px;
    font-size: 11px;
  }
  .home-service-card__cta {
    min-height: 40px;
    padding: 0 22px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ethereal-service-card__shader,
  .ethereal-service-card__orb,
  .ethereal-service-card__shine,
  .home-service-card__cta::before {
    animation: none !important;
  }
  /* Drop the SVG-turbulence filter so the shader reads as a soft still */
  .ethereal-service-card__shader {
    filter: blur(10px);
  }
}

/* ---------- Operations ---------- */
.operations {
  background: var(--lm-authority-navy); color: var(--lm-warm-ivory);
  overflow: hidden;
}
.operations__bg {
  position: absolute; inset: 0; opacity: 0.16;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(11,34,57,0.7) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(7,22,40,0.6) 0%, transparent 60%),
    linear-gradient(180deg, #050F1C 0%, #071628 100%);
}
.operations__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,22,40,0.85) 0%, rgba(7,22,40,0.96) 100%);
}
.operations__grid-bg {
  position: absolute; inset: 0; opacity: 0.35; pointer-events: none;
  background-image:
    linear-gradient(rgba(201,163,78,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,163,78,0.05) 1px, transparent 1px);
  background-size: 120px 120px;
}
.operations__inner { position: relative; max-width: var(--container-max); margin: 0 auto; }

.ops-statusbar {
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
  padding: 14px 22px; border: 1px solid rgba(201,163,78,0.28); border-bottom: none;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgba(201,163,78,0.06), rgba(201,163,78,0.01));
}
.ops-statusbar__pill { display: flex; align-items: center; gap: 10px; }
.ops-statusbar__dot { position: relative; width: 8px; height: 8px; display: inline-block; }
.ops-statusbar__dot span {
  position: absolute; inset: 0; border-radius: 999px; background: #7BBF92;
  box-shadow: 0 0 0 3px rgba(123,191,146,0.18), 0 0 10px rgba(123,191,146,0.55);
}
.ops-statusbar__pill-text {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--lm-champagne-gold);
  font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
}
.ops-statusbar__center {
  font-size: 12.5px; color: var(--color-fg-inv-2); letter-spacing: 0.02em; text-align: center;
}
.ops-statusbar__right {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--color-fg-inv-3);
  font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
}

.ops-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid rgba(201,163,78,0.28); margin-bottom: 18px;
}
.ops-stats__cell { padding: 22px 24px; border-right: 1px solid rgba(201,163,78,0.18); }
.ops-stats__cell:last-child { border-right: none; }
.ops-stats__label {
  font-family: var(--font-mono); font-size: 10px; color: var(--lm-champagne-gold);
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.ops-stats__value {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  color: var(--lm-warm-ivory); margin-top: 10px; letter-spacing: -0.005em;
}
.ops-stats__sub { font-size: 12px; color: var(--color-fg-inv-3); margin-top: 6px; line-height: 1.5; }

.ops-grid {
  display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 18px; align-items: stretch;
}
.ops-panel {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px; padding: 26px 26px 22px; position: relative;
  display: flex; flex-direction: column; height: 100%;
}
/* Priority panel — kept distinct but balanced with the other two.
   Faint gold breath at the top fading to the standard panel tone;
   border drops from 30% → 14% gold so it reads as a sibling, not a tab. */
.ops-panel--accent {
  background: linear-gradient(180deg, rgba(201, 163, 78, 0.035), rgba(255, 255, 255, 0.018));
  border-color: rgba(201, 163, 78, 0.14);
}
/* Priority chip — outlined gold pill instead of a filled corner tab.
   Smaller, lighter, sits inline with the eyebrow tag on the top-right. */
.ops-panel__badge {
  position: absolute;
  top: 14px;
  right: 16px;
  padding: 3px 10px;
  background: transparent;
  color: var(--lm-champagne-gold);
  border: 1px solid rgba(201, 163, 78, 0.30);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ops-panel__tag {
  font-family: var(--font-mono); font-size: 11px; color: var(--lm-champagne-gold);
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 6px;
}
.ops-panel__title {
  font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.25;
  color: var(--lm-warm-ivory); letter-spacing: -0.005em;
}
.ops-panel__intro { font-size: 13px; line-height: 1.55; color: var(--color-fg-inv-3); margin-top: 8px; }
.ops-panel__rows { margin-top: 18px; }

.ops-row {
  display: grid; grid-template-columns: 56px 1fr auto auto; gap: 14px; align-items: center;
  padding: 14px 0; border-top: 1px solid rgba(201,163,78,0.18);
}
.ops-row__code {
  font-family: var(--font-mono); font-size: 12px; color: var(--lm-champagne-gold);
  font-weight: 500; letter-spacing: 0.08em;
}
.ops-row__label-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ops-row__label { font-size: 14.5px; font-weight: 500; color: var(--lm-warm-ivory); letter-spacing: 0.005em; }
.ops-row__meta { font-size: 11.5px; color: var(--color-fg-inv-3); letter-spacing: 0.04em; }
.ops-row__status {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-fg-inv-2); font-weight: 600;
}
.status-dot {
  position: relative; width: 8px; height: 8px; display: inline-block; flex: 0 0 auto;
}
.status-dot span {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--c, #7BBF92);
  box-shadow: 0 0 0 3px rgba(123,191,146,0.13), 0 0 8px rgba(123,191,146,0.33);
}
.status-dot[data-kind="scheduled"] { --c: #E6C173; }
.status-dot[data-kind="scheduled"] span { box-shadow: 0 0 0 3px rgba(230,193,115,0.13), 0 0 8px rgba(230,193,115,0.33); }
.status-dot[data-kind="cycle"] { --c: #8895A8; }
.status-dot[data-kind="cycle"] span { box-shadow: 0 0 0 3px rgba(136,149,168,0.13), 0 0 8px rgba(136,149,168,0.33); }
.status-dot[data-kind="open"] { --c: #D9B97A; }
.status-dot[data-kind="open"] span { box-shadow: 0 0 0 3px rgba(217,185,122,0.13), 0 0 8px rgba(217,185,122,0.33); }

.routing-row {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  padding: 16px 0; border-top: 1px solid rgba(201,163,78,0.18);
}
.routing-row__code {
  font-family: var(--font-mono); font-size: 11px; color: var(--lm-champagne-gold);
  font-weight: 500; letter-spacing: 0.08em;
}
.routing-row__head { display: flex; align-items: center; gap: 10px; }
.routing-row__trigger { font-size: 14px; font-weight: 600; color: var(--lm-warm-ivory); }
.routing-row__level {
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-fg-inv-3); font-weight: 700; margin-left: auto;
}
.routing-row__level--critical { color: var(--lm-champagne-gold); }
.routing-row__chain {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px;
  padding-left: 18px;
}
.routing-row__step {
  font-size: 12px; color: var(--color-fg-inv-2);
  padding: 4px 10px; border: 1px solid rgba(201,163,78,0.22);
  border-radius: 999px; background: rgba(255,255,255,0.02);
}
.routing-row__arrow { font-size: 11px; color: var(--lm-champagne-gold); opacity: 0.6; }
.ops-panel__note {
  font-size: 11.5px; color: var(--color-fg-inv-3); line-height: 1.6;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(201,163,78,0.18);
}

.ops-cta {
  margin-top: 48px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
  justify-content: space-between; padding: 28px 32px;
  border: 1px solid rgba(201,163,78,0.28); border-radius: 14px;
  background: linear-gradient(180deg, rgba(201,163,78,0.05), rgba(201,163,78,0.01));
}
.ops-cta__eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--lm-champagne-gold);
  font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase;
}
.ops-cta__title {
  font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.3;
  color: var(--lm-warm-ivory); margin-top: 10px; letter-spacing: -0.005em;
}
.ops-cta__body { font-size: 13.5px; line-height: 1.6; color: var(--color-fg-inv-3); margin-top: 8px; }
.ops-cta__buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Who We Serve ---------- */
.who-we-serve { background: var(--color-surface-ivory); }
.who-we-serve__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.serve-card {
  background: #fff; border: 1px solid var(--color-border-ivory); border-radius: 14px;
  padding: 32px 28px 30px; box-shadow: var(--shadow-1);
}
.serve-card__icon {
  width: 78px;
  max-height: 70px;
  object-fit: contain;
  display: block;
  opacity: 0.95;
  margin-bottom: 6px;
  /* No filter / drop-shadow / box-shadow — clean and subtle */
}
@media (max-width: 1100px) {
  .serve-card__icon { width: 68px; max-height: 62px; }
}
@media (max-width: 640px) {
  .serve-card__icon { width: 58px; max-height: 54px; }
}
.serve-card__title {
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  color: var(--color-fg-1); margin-top: 22px; letter-spacing: -0.005em;
}
.serve-card__rule { width: 24px; height: 1px; background: var(--lm-champagne-gold); margin: 14px 0 16px; }
.serve-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.serve-card__list li {
  font-size: 14px; color: var(--color-fg-2); line-height: 1.45;
  display: flex; align-items: center; gap: 10px;
}
.serve-card__list li::before {
  content: ""; width: 4px; height: 4px; background: var(--lm-champagne-gold);
  border-radius: 999px; flex: 0 0 auto;
}

/* ---------- Founder ---------- */
.founder {
  background: var(--color-surface-stone);
  padding: clamp(72px, 9vw, 130px) var(--container-px);
  position: relative; overflow: hidden;
}
.founder__decor {
  position: absolute; top: 40px; right: -80px; width: 280px; height: 280px;
  background: radial-gradient(closest-side, rgba(201,163,78,0.10), transparent);
}
.founder__inner { max-width: 1180px; margin: 0 auto; position: relative; }
.founder__head { margin-bottom: 36px; max-width: 720px; }
.founder__h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 2.4vw, 36px); line-height: 1.12; letter-spacing: -0.012em;
  color: var(--color-fg-1); margin-top: 14px;
}
.founder__intro { font-size: 15px; line-height: 1.6; color: var(--color-fg-2); margin-top: 12px; }
.founder__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch;
}
.founder-card { display: flex; flex-direction: column; height: 100%; }
.founder-card__photo-wrap {
  position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 5/4;
}
.founder-card__photo {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
}
.founder-card__corner-h {
  position: absolute; left: 0; bottom: 0; width: 56px; height: 1px;
  background: var(--lm-champagne-gold);
}
.founder-card__corner-v {
  position: absolute; left: 0; bottom: 0; width: 1px; height: 56px;
  background: var(--lm-champagne-gold);
}
.founder-card__info {
  margin-top: 16px; padding: 20px 22px 22px; background: #fff;
  border: 1px solid var(--color-border-ivory); border-radius: 12px;
  box-shadow: var(--shadow-1); flex: 1; display: flex; flex-direction: column;
}
.founder-card__name {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--color-fg-1); letter-spacing: -0.01em; line-height: 1.1;
}
.founder-card__role {
  margin-top: 6px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lm-champagne-deep); font-weight: 700;
}
.founder-card__rule { width: 24px; height: 1px; background: var(--lm-champagne-gold); margin: 14px 0; }
.founder-card__quote {
  font-family: var(--font-serif-accent); font-style: italic; font-size: 15.5px;
  line-height: 1.5; color: var(--color-fg-1); margin-bottom: 10px;
}
.founder-card__bio { font-size: 13.5px; line-height: 1.6; color: var(--color-fg-2); }
.founder__cta-row { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Recommendations carousel — JS-driven infinite slider ----------
   12 unique cards + 2 × `perView` cloned cards (added at runtime as
   start- and end-padding) so prev/next can step past either boundary
   and the JS instantly snaps to the equivalent real position with no
   visible jump. Arrows + paginated dots provide manual nav; autoplay
   advances by one card every 5 s, pauses on hover, resumes on leave. */
.recommendations { background: var(--color-surface-ivory); }

.recos {
  --reco-gap: 24px;
  --reco-per-view: 3;
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
}
/* Stage row: prev arrow · viewport · next arrow — arrows sit OUTSIDE the cards */
.recos__stage {
  display: flex;
  align-items: center;
  gap: 22px;
}
.recos__viewport {
  flex: 1 1 auto;
  min-width: 0;             /* allow the flex item to shrink, prevents overflow */
  position: relative;
  overflow: hidden;         /* clip the wide track */
  padding: 12px 0;
  /* No edge mask / fade — clean hard edges per spec */
}
.recos__track {
  display: flex;
  gap: var(--reco-gap);
  will-change: transform;
  /* JS sets `transition` and `transform` inline */
}

.reco-card {
  flex: 0 0 calc((100% - var(--reco-gap) * (var(--reco-per-view) - 1)) / var(--reco-per-view));
  background: #fff;
  border: 1px solid var(--color-border-ivory);
  border-radius: 14px;
  padding: 32px 30px 28px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 320px;
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}

/* Arrows — circular, white card, dark navy icon, subtle border and shadow.
   Flex siblings of the viewport, so they sit beside the card group, never over it. */
.recos__arrow {
  flex: 0 0 auto;
  z-index: 3;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--lm-stone-deep);
  color: var(--lm-authority-navy);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(7, 22, 40, 0.10), 0 1px 2px rgba(7, 22, 40, 0.05);
  transition:
    background 220ms var(--ease-out),
    border-color 220ms var(--ease-out),
    color 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out),
    transform 220ms var(--ease-out);
}
.recos__arrow:hover {
  background: var(--lm-champagne-gold);
  border-color: var(--lm-champagne-gold);
  color: var(--lm-authority-navy);
  box-shadow: 0 6px 18px rgba(168, 133, 47, 0.30);
  transform: scale(1.04);
}
.recos__arrow:active {
  transform: scale(0.98);
}
.recos__arrow:focus-visible {
  outline: 2px solid var(--lm-champagne-gold);
  outline-offset: 3px;
}

/* Pagination dots — small, gold for active, muted stone for inactive */
.recos__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.recos__dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--lm-stone-deep);
  border: none; padding: 0;
  cursor: pointer;
  transition: width 280ms var(--ease-out), background 280ms var(--ease-out);
}
.recos__dot:hover { background: var(--lm-champagne-soft); }
.recos__dot.is-active {
  width: 28px;
  background: var(--lm-champagne-gold);
}
.reco-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.reco-card__category {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lm-champagne-deep);
}
.reco-card__quote-mark {
  font-family: var(--font-serif-accent); font-style: italic;
  font-size: 84px; line-height: 0.7; color: var(--lm-champagne-gold);
  margin-top: 8px; margin-bottom: 4px; display: block;
}
.reco-card__quote {
  font-size: 15.5px; line-height: 1.65; color: var(--color-fg-1);
  flex: 1; font-weight: 400;
}
.reco-card__divider {
  width: 32px; height: 1px; background: var(--lm-champagne-gold); margin: 20px 0 14px;
}
.reco-card__attribution {
  font-size: 13px; color: var(--color-fg-3); font-weight: 500;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.reco-card__attribution strong { color: var(--color-fg-1); font-weight: 600; }
.reco-card__attribution-sep { color: var(--lm-champagne-gold); }

/* ---------- Articles preview — 3 featured categories ----------
   Homepage shows three top-level topic cards. Full 10-category list
   lives in CLIENT_APPROVED_INFO.md § 10 for the dedicated /articles/ page. */
.articles-preview { background: var(--color-surface-stone); }
.articles-preview__head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 24px; margin-bottom: 56px;
}
.articles-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-items: stretch;
}
.article-cat-card {
  background: #fff; border: 1px solid var(--color-border-ivory); border-radius: 14px;
  padding: 36px 32px 30px;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--color-fg-1);
  position: relative; overflow: hidden;
  min-height: 220px;
  transition:
    transform 280ms var(--ease-out),
    border-color 280ms var(--ease-out),
    box-shadow 280ms var(--ease-out);
  cursor: pointer;
}
.article-cat-card:hover {
  transform: translateY(-3px);
  border-color: var(--lm-champagne-gold);
  box-shadow: var(--shadow-3);
}
.article-cat-card__num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--lm-champagne-deep); letter-spacing: 0.16em; font-weight: 600;
  text-transform: uppercase;
}
.article-cat-card__title {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  line-height: 1.25; color: var(--color-fg-1); margin-top: 16px;
  letter-spacing: -0.005em;
}
.article-cat-card__more {
  font-size: 12px; color: var(--lm-champagne-deep); letter-spacing: 0.10em;
  text-transform: uppercase; font-weight: 600;
  margin-top: auto; padding-top: 32px;
  display: inline-flex; align-items: center; gap: 4px;
}

/* ---------- Proposal form ---------- */
.proposal {
  background: #061525; color: var(--lm-warm-ivory);
  overflow: hidden;
  isolation: isolate;
}
.proposal__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.65;
  filter: brightness(1.05) contrast(1.04) saturate(1.04);
  pointer-events: none;
}
.proposal__video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(2, 11, 22, 0.58) 0%,
      rgba(2, 11, 22, 0.50) 45%,
      rgba(2, 11, 22, 0.42) 100%),
    radial-gradient(circle at 22% 45%,
      rgba(12, 52, 88, 0.20),
      rgba(2, 11, 22, 0.52) 72%);
}
.proposal__decor {
  position: absolute; top: -80px; left: 30%; width: 600px; height: 600px;
  z-index: 2;
  background: radial-gradient(closest-side, rgba(201,163,78,0.10), transparent);
  pointer-events: none;
}
.proposal__grid {
  position: relative;
  z-index: 3;
  max-width: var(--container-max); margin: 0 auto;
  display: grid; grid-template-columns: 5fr 7fr; gap: 80px;
  align-items: flex-start;
}
@media (max-width: 768px) {
  .proposal__video {
    opacity: 0.50;
  }
  .proposal__video-overlay {
    background:
      linear-gradient(180deg,
        rgba(2, 11, 22, 0.55) 0%,
        rgba(2, 11, 22, 0.70) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .proposal__video { display: none; }
}
.proposal__pitch .eyebrow-rule { color: var(--lm-champagne-gold); }
.proposal__h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 3.3vw, 48px); line-height: 1.10; letter-spacing: -0.014em;
  color: var(--lm-warm-ivory); margin-top: 18px;
}
.proposal__body { font-size: 17.5px; line-height: 1.7; color: var(--color-fg-inv-2); margin-top: 22px; }
.proposal__list {
  list-style: none; padding: 0; margin-top: 36px;
  display: flex; flex-direction: column; gap: 16px;
}
.proposal__list li {
  display: flex; gap: 14px; align-items: center;
  font-size: 15px; color: var(--lm-warm-ivory);
}
.proposal__list li svg { width: 40px; height: 40px; flex: 0 0 auto; }
.proposal__talk {
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.proposal__talk-eyebrow {
  font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--lm-champagne-gold); font-weight: 700; margin-bottom: 14px;
}
.proposal__talk-phone {
  font-family: var(--font-display); font-weight: 600; font-size: 28px;
  color: var(--lm-warm-ivory); letter-spacing: -0.01em;
}
.proposal__talk-note {
  font-size: 13px; color: var(--color-fg-inv-3); margin-top: 22px;
  line-height: 1.55; font-style: italic;
}
.proposal__form {
  background: #fff; border-radius: 18px; padding: 44px;
  box-shadow: 0 40px 100px -28px rgba(0,0,0,0.5), 0 16px 40px -16px rgba(0,0,0,0.3);
  color: var(--color-fg-1); position: relative; overflow: hidden;
}
.proposal__form-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #A8852F, #C9A34E 30%, #E6CB8A 50%, #C9A34E 70%, #A8852F);
}
.proposal__form-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px;
}
.proposal__form-title {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  color: var(--color-fg-1); letter-spacing: -0.005em;
}
.proposal__form-time {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-fg-3); font-weight: 700;
}
.proposal__form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 18px;
}
.proposal__form-grid .full { grid-column: 1 / -1; }
.proposal__form-cta { margin-top: 28px; }
.proposal__form-disclaimer {
  font-size: 12px; color: var(--color-fg-3); margin-top: 16px;
  text-align: center; line-height: 1.55;
}
.proposal__success { padding: 60px 24px; text-align: center; }
.proposal__success-icon { width: 80px; height: 80px; margin: 0 auto; }
.proposal__success h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 24px;
  color: var(--color-fg-1); line-height: 1.3; margin-top: 24px;
}
.proposal__success p {
  font-size: 16px; line-height: 1.6; color: var(--color-fg-2); margin-top: 14px;
  max-width: 460px; margin-left: auto; margin-right: auto;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--lm-deep-navy); color: var(--lm-warm-ivory);
  padding: 120px var(--container-px) 36px; position: relative; overflow: hidden;
}
.site-footer__bg {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
  background-image:
    linear-gradient(rgba(201,163,78,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,163,78,0.5) 1px, transparent 1px);
  background-size: 160px 160px;
}
.site-footer__inner { max-width: var(--container-max); margin: 0 auto; position: relative; }
.site-footer__top {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 56px; flex-wrap: wrap;
}
.site-footer__top h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 38px;
  line-height: 1.12; color: var(--lm-warm-ivory);
  margin-top: 14px; letter-spacing: -0.012em;
}
.site-footer__top-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 56px;
}
.footer-brand .brand-lockup img { height: 78px; }
.footer-brand p {
  font-size: 14px; line-height: 1.65; color: var(--color-fg-inv-2);
  margin-top: 22px; max-width: 380px;
}
.footer-brand__info {
  margin-top: 28px; font-size: 13.5px; line-height: 1.75; color: var(--color-fg-inv-2);
}
.footer-brand__info-label {
  color: var(--lm-champagne-gold); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 6px;
}
.footer-brand__info-label + .footer-brand__info-label { margin-top: 16px; }
.footer-brand__info a { color: inherit; }

.footer-col h3 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--lm-champagne-gold); margin-bottom: 20px;
}
.footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.footer-col a {
  color: var(--color-fg-inv-2); font-size: 13.5px; text-decoration: none;
  transition: color 220ms;
}
.footer-col a:hover { color: var(--lm-champagne-gold); }

.site-footer__hairline {
  margin-top: 88px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,163,78,0.4), transparent);
}
.site-footer__bottom {
  margin-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.site-footer__bottom p { font-size: 12px; color: var(--color-fg-inv-3); }
.site-footer__bottom ul {
  display: flex; gap: 24px; list-style: none; padding: 0; margin: 0;
}
.site-footer__bottom a { font-size: 12px; color: var(--color-fg-inv-3); text-decoration: none; }
.site-footer__bottom a:hover { color: var(--lm-champagne-gold); }

/* ---------- Floating widget ---------- */
.floating-widget {
  position: fixed; right: 28px; bottom: 28px; z-index: 800;
  font-family: var(--font-sans);
}
.floating-widget__panel {
  position: absolute; right: 0; bottom: 84px; width: 380px;
  background: #fff; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--color-border-ivory);
  box-shadow: 0 36px 100px -28px rgba(7,22,40,0.50), 0 12px 32px -12px rgba(7,22,40,0.18);
  display: none; flex-direction: column;
}
.floating-widget.is-open .floating-widget__panel { display: flex; }
.floating-widget__head {
  background: linear-gradient(140deg, #050F1C 0%, #0B2239 60%, #122B45 100%);
  padding: 22px 24px; color: var(--lm-warm-ivory);
  position: relative; overflow: hidden;
}
.floating-widget__head::before {
  content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
  background: radial-gradient(closest-side, rgba(201,163,78,0.20), transparent);
}
.floating-widget__head-row {
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
}
.floating-widget__head-eyebrow {
  font-size: 10.5px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--lm-champagne-gold); font-weight: 700;
}
.floating-widget__head-name {
  font-family: var(--font-display); font-weight: 600; font-size: 17px; margin-top: 6px;
}
.floating-widget__status {
  font-size: 12.5px; color: var(--color-fg-inv-2); margin-top: 4px;
}
.floating-widget__status span {
  display: inline-block; width: 6px; height: 6px; background: #3E7C5A;
  border-radius: 999px; margin-right: 6px;
}
.floating-widget__close {
  background: transparent; border: 1px solid rgba(255,255,255,0.18);
  color: inherit; cursor: pointer; font-size: 18px; line-height: 1;
  width: 32px; height: 32px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.floating-widget__body {
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
  max-height: 340px; overflow-y: auto; background: var(--lm-warm-ivory);
}
.fw-msg {
  max-width: 86%; padding: 11px 15px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.55;
}
.fw-msg--bot {
  align-self: flex-start; background: #fff; color: var(--color-fg-1);
  border: 1px solid var(--color-border-ivory); box-shadow: 0 1px 2px rgba(7,22,40,0.05);
}
.fw-msg--user {
  align-self: flex-end; background: var(--lm-authority-navy); color: var(--lm-warm-ivory);
}
.floating-widget__chips {
  padding: 0 14px 12px; display: flex; gap: 6px; flex-wrap: wrap;
  background: var(--lm-warm-ivory);
}
.floating-widget__chip {
  background: #fff; border: 1px solid var(--color-border-ivory);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer;
  color: var(--color-fg-2); font-family: inherit;
}
.floating-widget__input-row {
  padding: 14px; display: flex; gap: 8px;
  border-top: 1px solid var(--color-border-ivory); background: #fff;
}
.floating-widget__input {
  flex: 1; background: var(--lm-warm-ivory); border: 1px solid var(--color-border-ivory);
  border-radius: 999px; padding: 11px 16px; font-size: 13.5px; outline: none;
  font-family: inherit;
}
.floating-widget__send.lm-btn {
  height: 40px; padding: 0 20px; font-size: 13px;
}
.floating-widget__toggle {
  width: 68px; height: 68px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #050F1C 0%, #0B2239 55%, #1B3558 100%);
  color: var(--lm-warm-ivory);
  animation: pulseGold 2.4s ease-out infinite;
  display: flex; align-items: center; justify-content: center;
  transition: transform 280ms var(--ease-out);
}
.floating-widget__toggle:hover { transform: translateY(-2px) scale(1.04); }
.floating-widget__toggle svg { color: var(--lm-champagne-gold); }
@keyframes pulseGold {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 1px rgba(201,163,78,0.34), 0 0 0 0 rgba(201,163,78,0.4); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 1px rgba(201,163,78,0.50), 0 0 0 14px rgba(201,163,78,0); }
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .nav-main { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-headcol, .hero-bodycol { grid-column: 1; padding-right: 0; }
  .hero-side { grid-column: 1; grid-row: auto; }
  .hero-cards { grid-template-columns: 1fr; }
  .trust-factors__grid { grid-template-columns: 1fr 1fr; }
  .about__grid { grid-template-columns: 1fr; gap: 48px; }
  .services__grid { grid-template-columns: 1fr 1fr; }
  .ops-stats { grid-template-columns: 1fr 1fr; }
  .ops-stats__cell:nth-child(2) { border-right: none; }
  .ops-stats__cell:nth-child(1),
  .ops-stats__cell:nth-child(2) { border-bottom: 1px solid rgba(201,163,78,0.18); }
  .ops-grid { grid-template-columns: 1fr; }
  .who-we-serve__grid { grid-template-columns: 1fr 1fr; }
  .recos { --reco-per-view: 2; }
  .recos__stage { gap: 14px; }
  .articles-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .proposal__grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --section-y-desktop: var(--section-y-mobile); }
  .section { padding: var(--section-y-mobile) var(--container-px); }
  .utility-bar__inner { height: auto; padding: 8px 0; flex-direction: column; gap: 8px; align-items: flex-start; }
  .utility-bar__left { gap: 12px; }
  .utility-bar__sep { display: none; }
  .utility-bar__right { display: none; }
  .site-header { top: 0; }
  .site-header__inner { height: 72px; }
  .brand-lockup img { height: 48px; }
  .site-header.scrolled .brand-lockup img { height: 44px; }
  .brand-lockup__txt { display: none; }
  .header-right .portal-pill { display: none; }
  .hero-content { padding: 48px var(--container-px) 80px; }
  .hero-trust-list { grid-template-columns: 1fr; }
  .hero-founder-row { flex-direction: column; gap: 20px; }
  .hero-founder-card { padding: 24px 22px; }
  .trust-factors__grid { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: 1fr; }
  .who-we-serve__grid { grid-template-columns: 1fr; }
  .ops-stats { grid-template-columns: 1fr; }
  .ops-stats__cell { border-right: none !important; border-bottom: 1px solid rgba(201,163,78,0.18); }
  .ops-stats__cell:last-child { border-bottom: none; }
  .ops-statusbar { grid-template-columns: 1fr; gap: 10px; }
  .ops-statusbar__center, .ops-statusbar__right { text-align: left; }
  .ops-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
  .founder__grid { grid-template-columns: 1fr; }
  .recos { --reco-per-view: 1; }
  /* Mobile: arrows wrap to a centered row BELOW the card, above the dots */
  .recos__stage { flex-wrap: wrap; justify-content: center; gap: 0; }
  .recos__viewport { flex: 1 1 100%; order: 1; }
  .recos__arrow { width: 40px; height: 40px; margin-top: 18px; }
  .recos__arrow--prev { order: 2; margin-right: 8px; }
  .recos__arrow--next { order: 3; margin-left: 8px; }
  .articles-grid { grid-template-columns: 1fr; gap: 16px; }
  .article-cat-card { min-height: 0; padding: 28px 24px 26px; }
  .article-cat-card__title { font-size: 20px; }
  .proposal__form { padding: 28px 22px; }
  .proposal__form-grid { grid-template-columns: 1fr; }
  .site-footer { padding: 80px var(--container-px) 32px; }
  .site-footer__top { flex-direction: column; align-items: flex-start; }
  .site-footer__top h3 { font-size: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .site-footer__hairline { margin-top: 56px; }
  .floating-widget { right: 16px; bottom: 16px; }
  .floating-widget__panel { width: calc(100vw - 32px); right: 0; }
}

/* ============================================================
   LM MOTION SYSTEM — reusable across pages
   Soft cubic-bezier (no bounce). IntersectionObserver in JS adds
   .is-visible. All effects are CSS-only past that toggle.
   ============================================================ */

:root {
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Single-element reveal (text, image, block) — fade + slide up */
.lm-fx-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 900ms var(--ease-soft), transform 900ms var(--ease-soft);
  will-change: opacity, transform;
}
.lm-fx-up.is-visible { opacity: 1; transform: translateY(0); }

/* Soft fade only (no Y) — for ambient elements, captions, fine type */
.lm-fx-fade {
  opacity: 0;
  transition: opacity 1100ms var(--ease-soft);
}
.lm-fx-fade.is-visible { opacity: 1; }

/* Soft zoom-in — for image placeholders and photo containers.
   The CONTAINER gets the class; its first child does the scaling. */
.lm-fx-zoom { overflow: hidden; }
.lm-fx-zoom > * {
  transform: scale(1.08);
  transition: transform 1400ms var(--ease-soft);
  will-change: transform;
}
.lm-fx-zoom.is-visible > * { transform: scale(1); }

/* Stagger container — children fade+slide in sequentially (80ms apart) */
.lm-fx-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-soft), transform 900ms var(--ease-soft);
  will-change: opacity, transform;
}
.lm-fx-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.lm-fx-stagger.is-visible > *:nth-child(1)  { transition-delay:   0ms; }
.lm-fx-stagger.is-visible > *:nth-child(2)  { transition-delay:  80ms; }
.lm-fx-stagger.is-visible > *:nth-child(3)  { transition-delay: 160ms; }
.lm-fx-stagger.is-visible > *:nth-child(4)  { transition-delay: 240ms; }
.lm-fx-stagger.is-visible > *:nth-child(5)  { transition-delay: 320ms; }
.lm-fx-stagger.is-visible > *:nth-child(6)  { transition-delay: 400ms; }
.lm-fx-stagger.is-visible > *:nth-child(7)  { transition-delay: 480ms; }
.lm-fx-stagger.is-visible > *:nth-child(8)  { transition-delay: 560ms; }
.lm-fx-stagger.is-visible > *:nth-child(9)  { transition-delay: 640ms; }
.lm-fx-stagger.is-visible > *:nth-child(10) { transition-delay: 720ms; }
.lm-fx-stagger.is-visible > *:nth-child(n+11) { transition-delay: 800ms; }

/* ============================================================
   AMBIENT GLOW — slow drifting orbs for dark sections
   ============================================================ */
.ambient-glow-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform, opacity;
  opacity: 0.55;
  animation: ambientDrift 26s ease-in-out infinite alternate;
}
.ambient-glow--gold {
  background: radial-gradient(circle, rgba(201, 163, 78, 0.22), transparent 60%);
}
.ambient-glow--navy {
  background: radial-gradient(circle, rgba(28, 70, 110, 0.55), transparent 60%);
}
.ambient-glow--1 {
  width: 620px; height: 620px;
  top: -180px; left: -120px;
  animation-duration: 24s;
}
.ambient-glow--2 {
  width: 720px; height: 720px;
  bottom: -260px; right: -140px;
  animation-duration: 30s;
  animation-delay: -10s;
}
.ambient-glow--3 {
  width: 480px; height: 480px;
  top: 40%; left: 55%;
  animation-duration: 34s;
  animation-delay: -16s;
  opacity: 0.35;
}
@keyframes ambientDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(40px, -28px, 0) scale(1.08); }
  100% { transform: translate3d(-32px, 36px, 0) scale(0.94); }
}

/* ============================================================
   LM ACCORDION — smooth open/close (JS sets max-height to scrollHeight)
   ============================================================ */
.lm-accordion {
  border-top: 1px solid var(--color-border-ivory);
}
.lm-accordion__item { border-bottom: 1px solid var(--color-border-ivory); }
.lm-accordion__trigger {
  width: 100%;
  background: transparent; border: none;
  padding: 22px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px; color: var(--color-fg-1);
  letter-spacing: -0.005em;
  text-align: left;
}
.lm-accordion__trigger-code {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--lm-champagne-deep); letter-spacing: 0.16em; text-transform: uppercase;
  margin-right: 14px; min-width: 44px;
  font-weight: 600;
}
.lm-accordion__trigger-label { flex: 1; }
.lm-accordion__icon {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-ivory);
  border-radius: 999px;
  color: var(--lm-champagne-deep);
  background: transparent;
  transition:
    transform 380ms var(--ease-soft),
    background 220ms var(--ease-out),
    color 220ms var(--ease-out),
    border-color 220ms var(--ease-out);
}
.lm-accordion__icon::before {
  content: ""; width: 10px; height: 1.5px; background: currentColor;
  position: absolute; border-radius: 1px;
}
.lm-accordion__icon::after {
  content: ""; width: 1.5px; height: 10px; background: currentColor;
  position: absolute; border-radius: 1px;
  transition: opacity 320ms var(--ease-soft);
}
.lm-accordion__icon { position: relative; }
.lm-accordion__item.is-open .lm-accordion__icon {
  transform: rotate(180deg);
  background: var(--lm-champagne-gold);
  border-color: var(--lm-champagne-gold);
  color: var(--lm-authority-navy);
}
.lm-accordion__item.is-open .lm-accordion__icon::after {
  opacity: 0;
}
.lm-accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 460ms var(--ease-soft);
}
.lm-accordion__panel-inner {
  padding: 0 0 22px;
  font-size: 14.5px; line-height: 1.65; color: var(--color-fg-2);
}
.lm-accordion__panel-inner > p { margin-bottom: 8px; }
.lm-accordion__panel-inner > p:last-child { margin-bottom: 0; }

/* ============================================================
   SERVICES PAGE
   ============================================================ */

/* Page hero — full-screen photo background with layered navy overlay.
   The photo is positioned right-of-center so the people stay visible
   on the right while text on the left rides over a darker wash. */
.services-hero {
  position: relative; overflow: hidden;
  background: var(--lm-authority-navy); /* fallback if the photo fails */
  color: var(--lm-warm-ivory);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px var(--container-px);
  isolation: isolate;
}
.services-hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.services-hero__bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Slightly right of center — keeps the consultation trio framed nicely
     while leaving the left brownstone facade under the dark overlay */
  object-position: 60% center;
  display: block;
  /* Subtle treatment so the photo sits with the brand palette */
  filter: saturate(0.92) brightness(0.95) contrast(1.04);
}
.services-hero__bg-overlay {
  position: absolute; inset: 0;
  /* Strong on the left for text readability, soft on the right so people show through */
  background: linear-gradient(
    90deg,
    rgba(4, 17, 31, 0.92) 0%,
    rgba(4, 17, 31, 0.78) 42%,
    rgba(4, 17, 31, 0.48) 72%,
    rgba(4, 17, 31, 0.34) 100%
  );
}
.services-hero__bg-bottom {
  position: absolute; inset: 0;
  /* Very soft fade into the next section */
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 78%,
    rgba(5, 15, 28, 0.55) 92%,
    rgba(5, 15, 28, 0.78) 100%
  );
}
.services-hero__inner {
  position: relative; z-index: 1;
  max-width: var(--container-max); margin: 0 auto;
  width: 100%;
  text-align: left;
}
.services-hero__content {
  max-width: 760px;
}
.services-hero__eyebrow {
  color: var(--lm-champagne-gold);
}
.services-hero__h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 5.0vw, 76px); line-height: 1.06; letter-spacing: -0.018em;
  color: var(--lm-warm-ivory); margin-top: 20px; max-width: 980px;
}
.services-hero__h1-accent {
  font-family: var(--font-serif-accent); font-style: italic;
  font-weight: 400; color: var(--lm-champagne-gold);
}
.services-hero__lead {
  font-size: 18.5px; line-height: 1.65;
  color: var(--lm-warm-ivory);
  margin-top: 28px; max-width: 760px;
}
.services-hero__sub {
  font-size: 15.5px; line-height: 1.65;
  color: var(--color-fg-inv-2);
  margin-top: 16px; max-width: 760px;
}
.services-hero__ctas {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px;
}

/* Service section — split layout, alternating image side */
.service-section {
  padding: 100px var(--container-px);
  position: relative; overflow: hidden;
  isolation: isolate;
}
.service-section--ivory { background: var(--color-surface-ivory); }
.service-section--stone { background: var(--color-surface-stone); }
.service-section--navy {
  background: var(--lm-authority-navy);
  color: var(--lm-warm-ivory);
}
.service-section--navy .section__h2 { color: var(--lm-warm-ivory); }
.service-section--navy .service-section__lead,
.service-section--navy .service-section__sub { color: var(--color-fg-inv-2); }
.service-section--navy .subservice-list li { color: var(--lm-warm-ivory); }
.service-section--navy .subservice-list li::before { background: var(--lm-champagne-gold); }

.service-section__layout {
  max-width: var(--container-max); margin: 0 auto;
  display: grid; grid-template-columns: 5fr 6fr; gap: 72px;
  align-items: center;
  position: relative; z-index: 1;
}
.service-section--flip .service-section__layout {
  grid-template-columns: 6fr 5fr;
}
.service-section--flip .service-section__media { order: 2; }

.service-section__media {
  position: relative; aspect-ratio: 4/5;
  border-radius: 14px; overflow: hidden;
  background: var(--lm-deep-navy);
  box-shadow: var(--shadow-3);
}
.service-section__media-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(201, 163, 78, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(11, 34, 57, 0.55) 0%, transparent 60%),
    linear-gradient(155deg, #050F1C 0%, #071628 50%, #0B2239 100%);
}
.service-section__media-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201, 163, 78, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 163, 78, 0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.6;
}
.service-section__media-label {
  position: absolute; left: 24px; bottom: 24px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--lm-champagne-gold);
  letter-spacing: 0.20em; text-transform: uppercase; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  z-index: 1;
}
.service-section__media-label::before {
  content: ""; width: 5px; height: 5px; background: var(--lm-champagne-gold);
  border-radius: 999px;
}
.service-section__media-icon {
  position: absolute; top: 26px; right: 26px;
  width: 88px; height: auto; opacity: 0.92;
}

/* The unnamed wrapper <div> inside .service-section__media must fill its
   parent. Reason: .lm-fx-zoom > * applies transform: scale(1.08) to this
   div for the reveal, which creates a containing block for absolutely-
   positioned descendants. Without explicit dimensions, the div is 0px
   tall (no in-flow content), so the absolute img inside renders at 0
   height and the photo is invisible. */
.service-section__media > div:first-child {
  position: absolute;
  inset: 0;
}

/* Service-specific photo. Inherits .lm-fx-zoom scale 1.08 → 1.0 reveal
   via .lm-fx-zoom > * parent rule. On top of that, the image itself
   breathes scale(1) ⇄ scale(1.25) on an 18s ease-in-out alternate loop.
   Transform-origin: center so faces / centered subjects stay framed. */
.service-section__media-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transform-origin: center center;
  animation: serviceImageBreathe 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes serviceImageBreathe {
  from { transform: scale(1); }
  to   { transform: scale(1.25); }
}

/* Reduced-amplitude variant swapped in at the 720px breakpoint */
@keyframes serviceImageBreatheMobile {
  from { transform: scale(1); }
  to   { transform: scale(1.15); }
}

/* Hover slows the motion for a more deliberate read of the photo */
.service-section__media:hover .service-section__media-image {
  animation-duration: 28s;
}

/* Subtle navy treatment over the photo so it harmonizes with the site's
   dark palette without obscuring the subject. */
.service-section__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(2, 11, 22, 0.34)  0%,
      rgba(2, 11, 22, 0.10) 35%,
      rgba(2, 11, 22, 0.22) 70%,
      rgba(2, 11, 22, 0.58) 100%),
    linear-gradient(135deg,
      rgba(7, 26, 51, 0.18) 0%,
      transparent 40%,
      rgba(2, 11, 22, 0.14) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Label sits above the overlay */
.service-section__media-label { z-index: 2; }

.service-section__content {
  display: flex; flex-direction: column;
}
.service-section__index {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--lm-champagne-deep); letter-spacing: 0.20em; text-transform: uppercase; font-weight: 600;
}
.service-section--navy .service-section__index { color: var(--lm-champagne-gold); }
.service-section__h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.0vw, 44px); line-height: 1.10;
  letter-spacing: -0.014em; color: var(--color-fg-1); margin-top: 14px;
}
.service-section--navy .service-section__h2 { color: var(--lm-warm-ivory); }
.service-section__lead {
  font-size: 17px; line-height: 1.65; color: var(--color-fg-2); margin-top: 18px;
}
.service-section__sub {
  font-size: 14.5px; line-height: 1.6; color: var(--color-fg-3); margin-top: 12px;
}

/* Subservice bullet list */
.subservice-list {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
}
.subservice-list--single { grid-template-columns: 1fr; }
.subservice-list li {
  position: relative; padding-left: 22px;
  font-size: 14.5px; line-height: 1.5; color: var(--color-fg-2);
}
.subservice-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; background: var(--lm-champagne-gold);
  border-radius: 999px;
}

.service-section__cta {
  margin-top: 32px;
  display: flex; flex-wrap: wrap; gap: 12px;
}

/* Services nav grid (TOC under hero) */
.services-toc {
  padding: 96px var(--container-px);
  background: var(--color-surface-ivory);
  position: relative;
}
.services-toc__head { text-align: center; margin-bottom: 56px; }
.services-toc__head .eyebrow-rule {
  color: var(--lm-champagne-deep);
  justify-content: center;
}
.services-toc__h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 2.8vw, 40px); line-height: 1.12;
  letter-spacing: -0.012em; color: var(--color-fg-1); margin-top: 16px;
}
.services-toc__intro {
  font-size: 17px; line-height: 1.6; color: var(--color-fg-2);
  margin-top: 18px; max-width: 720px; margin-left: auto; margin-right: auto;
}
/* ================================
   SERVICES OVERVIEW — ANIMATED SHADER CARDS
================================ */

.services-grid {
  /* container guard — parent .services-toc has no max-width */
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.service-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 400px;
  padding: 32px;
  border-radius: 28px;
  background: #061525;
  border: 1px solid rgba(201, 162, 74, 0.22);
  color: #F8F5EC;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* content anchors to bottom over the photo */
  transform: translateY(32px);
  opacity: 0;
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}

.service-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 162, 74, 0.65);
  box-shadow: 0 28px 80px rgba(2, 11, 22, 0.36);
}

/* Full-bleed service photo — fills the card. */
.service-card-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.02);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-card:hover .service-card-photo {
  transform: scale(1.08);
}

/* Bottom-heavy navy gradient — keeps photo readable at the top, fades
   to dense navy at the bottom for clean text legibility behind the
   number / title / description / CTA. */
.service-card-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(2, 11, 22, 0.06) 0%,
    rgba(2, 11, 22, 0.18) 32%,
    rgba(2, 11, 22, 0.58) 62%,
    rgba(2, 11, 22, 0.88) 100%
  );
}

/* Content layer — anchors to bottom of the card via the parent's flex layout */
.service-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.service-card-number {
  display: block;
  margin-bottom: 14px;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1;
  font-weight: 500;
  color: #C9A24A;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(2, 11, 22, 0.55);
}

.service-card-title {
  margin: 0 0 14px;
  font-size: clamp(20px, 1.45vw, 26px);
  line-height: 1.2;
  font-weight: 600;
  color: #F8F5EC;
  letter-spacing: -0.014em;
  text-shadow: 0 2px 18px rgba(2, 11, 22, 0.55);
}

.service-card-divider {
  width: 36px;
  height: 1px;
  margin-bottom: 16px;
  background: #C9A24A;
  opacity: 0.9;
}

.service-card-text {
  max-width: 480px;
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.62;
  color: rgba(248, 245, 236, 0.86);
  text-shadow: 0 1px 10px rgba(2, 11, 22, 0.45);
}

/* Pill CTA — gold-filled with a swept sheen on hover */
.service-card-link {
  align-self: flex-start;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: 999px;
  background: rgba(201, 162, 74, 0.20);
  border: 1px solid rgba(201, 162, 74, 0.55);
  color: #F2D88F;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    color 0.4s ease;
}
.service-card-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 70%
  );
  transform: translateX(-110%);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.service-card:hover .service-card-link {
  background: rgba(201, 162, 74, 0.34);
  border-color: rgba(201, 162, 74, 0.88);
  color: #F8F5EC;
}
.service-card:hover .service-card-link::before {
  transform: translateX(110%);
}
.service-card-link > span {
  display: inline-flex;
  transition: transform 0.4s var(--ease-soft);
}
.service-card:hover .service-card-link > span {
  transform: translateX(4px);
}

/* responsive */
@media (max-width: 1100px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-card {
    min-height: 380px;
    padding: 28px;
  }
}

@media (max-width: 720px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .service-card {
    border-radius: 22px;
    min-height: 360px;
    padding: 26px;
  }

  .service-card-number {
    margin-bottom: 10px;
    font-size: 28px;
  }

  .service-card-title {
    font-size: 22px;
  }

  /* Softer breathe amplitude on small screens (peak 1.15 instead of 1.25) */
  .service-section__media-image {
    animation-name: serviceImageBreatheMobile;
  }
}

/* reduced motion — canvas loop is short-circuited in JS, this freezes the reveal */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card-link {
    transition: none !important;
  }

  .service-card {
    opacity: 1;
    transform: none;
  }
}

/* Mid-page proposal CTA */
.services-cta {
  padding: 100px var(--container-px);
  background: var(--lm-authority-navy);
  color: var(--lm-warm-ivory);
  position: relative; overflow: hidden;
  isolation: isolate;
}

/* Background video — sits at the back, behind the dark overlay.
   Bumped opacity + subtle filter so the live video reads clearly
   while the ivory/gold text + form still hold contrast. */
.services-cta__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  filter: brightness(1.04) contrast(1.04) saturate(1.04);
  pointer-events: none;
}

/* Dark navy overlay — sits above the video, below the content.
   Lightened so the live video reads through clearly while the
   ivory/gold text + form card hold contrast. */
.services-cta__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(2, 11, 22, 0.52), rgba(7, 26, 51, 0.38)),
    radial-gradient(circle at 50% 35%, rgba(201, 162, 74, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(2, 11, 22, 0.18), rgba(2, 11, 22, 0.48));
}

.services-cta__inner {
  max-width: 980px; margin: 0 auto;
  text-align: center; position: relative; z-index: 3;
}
.services-cta__eyebrow { color: var(--lm-champagne-gold); justify-content: center; display: inline-flex; }
.services-cta__h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1.10;
  letter-spacing: -0.014em; color: var(--lm-warm-ivory); margin-top: 18px;
}
.services-cta__h2-accent {
  font-family: var(--font-serif-accent); font-style: italic;
  color: var(--lm-champagne-gold); font-weight: 400;
}
.services-cta__body {
  font-size: 17px; line-height: 1.65; color: var(--color-fg-inv-2);
  margin-top: 22px; max-width: 680px; margin-left: auto; margin-right: auto;
}
.services-cta__row {
  margin-top: 36px;
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}

/* Responsive — services page */
@media (max-width: 1100px) {
  .service-section__layout,
  .service-section--flip .service-section__layout {
    grid-template-columns: 1fr; gap: 48px;
  }
  .service-section--flip .service-section__media { order: 0; }
  .subservice-list { grid-template-columns: 1fr; }
  .service-section { padding: 72px var(--container-px); }
  .services-toc { padding: 72px var(--container-px); }
  .services-cta { padding: 80px var(--container-px); }
  /* Tablet: keep full-bleed photo background; shift framing left so people
     stay on screen as the viewport narrows; deepen overlay slightly so the
     buttons remain readable when the image takes more relative weight. */
  .services-hero {
    min-height: 88vh;
    padding: 96px var(--container-px) 112px;
  }
  .services-hero__bg-img { object-position: 55% center; }
  .services-hero__bg-overlay {
    background: linear-gradient(
      180deg,
      rgba(4, 17, 31, 0.86) 0%,
      rgba(4, 17, 31, 0.62) 45%,
      rgba(4, 17, 31, 0.78) 100%
    );
  }
}
@media (max-width: 640px) {
  .service-section { padding: 56px var(--container-px); }
  .services-toc { padding: 56px var(--container-px); }
  .services-cta { padding: 56px var(--container-px); }
  .service-section__media-icon { width: 64px; top: 18px; right: 18px; }
  /* Mobile: shift framing further left to keep faces in view;
     overlay is uniformly darker so text + buttons stay readable across the
     whole width once the layout is single-column. */
  .services-hero {
    min-height: 78vh;
    padding: 72px var(--container-px) 96px;
  }
  .services-hero__bg-img { object-position: 50% center; }
  .services-hero__bg-overlay {
    background: linear-gradient(
      180deg,
      rgba(4, 17, 31, 0.92) 0%,
      rgba(4, 17, 31, 0.78) 60%,
      rgba(4, 17, 31, 0.90) 100%
    );
  }
}

/* Active nav link state (used to mark current page in header) */
.lm-navlink.is-current { color: var(--lm-champagne-gold); }
.lm-navlink.is-current::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .lm-btn::after { display: none; }
  .marquee__track { animation: none !important; }
  .glass-card--shine::after { display: none; }
  .floating-widget__toggle { animation: none; }
  .ambient-glow { animation: none !important; }
  /* Motion utilities — render immediately rather than animate */
  .lm-fx-up, .lm-fx-fade, .lm-fx-stagger > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .lm-fx-zoom > * { transform: none !important; transition: none !important; }
  /* Recommendations slider remains functional — autoplay is disabled in JS,
     transitions clamped to 50ms. No special CSS override needed here. */
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ============================================================
   SERVICES — 3D CIRCULAR GALLERY (after hero, before detail blocks).
   Auto-rotating ring of 9 cards. Each card has a service photo,
   dark gradient overlay, index, title, blurb, and a glass-gold
   CTA pill that anchors down to the matching detail section.
   ============================================================ */
.services-circular-section {
  position: relative;
  padding: clamp(56px, 6vw, 90px) 0 clamp(70px, 6vw, 96px);
  background: #f3efe6;
  overflow: hidden;
}
.services-circular-section::before,
.services-circular-section::after {
  content: none;
}
.services-circular-section__header {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto clamp(20px, 2.4vw, 40px);
  text-align: center;
}
.services-circular-section__eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a7a52;
  margin-bottom: 16px;
}
.services-circular-section__h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.08;
  color: #0a1a2b;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.services-circular-section__sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: rgba(10, 26, 43, 0.65);
  max-width: 620px;
  margin: 0 auto;
}
.services-circular-gallery {
  position: relative;
  width: 100%;
  perspective: 1600px;
  user-select: none;
  touch-action: pan-y;
}
.services-circular-gallery__stage {
  position: relative;
  width: 100%;
  height: clamp(440px, 32vw, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.services-circular-gallery__ring {
  position: relative;
  width: 1px;
  height: 1px;
  transform-style: preserve-3d;
  transition: transform 80ms linear;
  will-change: transform;
}
.services-circular-card {
  --card-w: clamp(290px, 22vw, 340px);
  --card-h: clamp(400px, 30vw, 460px);
  position: absolute;
  top: calc(var(--card-h) / -2);
  left: calc(var(--card-w) / -2);
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 26px;
  overflow: hidden;
  background: #061525;
  border: 1px solid rgba(201, 162, 74, 0.22);
  box-shadow:
    0 22px 56px rgba(2, 11, 22, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  /* Card is now the link — pure anchor styling */
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 280ms ease,
    box-shadow 280ms ease;
}
.services-circular-card:hover {
  border-color: rgba(215, 182, 85, 0.55);
  box-shadow:
    0 30px 70px rgba(2, 11, 22, 0.28),
    inset 0 0 0 1px rgba(215, 182, 85, 0.18);
}
.services-circular-card:hover .services-circular-card__bg {
  background:
    linear-gradient(180deg,
      rgba(2, 11, 22, 0.12) 0%,
      rgba(2, 11, 22, 0.42) 45%,
      rgba(2, 11, 22, 0.82) 100%),
    radial-gradient(circle at 50% 35%,
      rgba(12, 52, 88, 0.14),
      rgba(2, 11, 22, 0.46) 70%);
}
.services-circular-card:focus-visible {
  outline: 2px solid #d7b655;
  outline-offset: 4px;
}
.services-circular-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  z-index: 0;
  pointer-events: none;
}
.services-circular-card__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(2, 11, 22, 0.20) 0%,
      rgba(2, 11, 22, 0.48) 46%,
      rgba(2, 11, 22, 0.88) 100%),
    radial-gradient(circle at 50% 35%,
      rgba(12, 52, 88, 0.12),
      rgba(2, 11, 22, 0.42) 70%);
}
.services-circular-card__content {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  color: #f8f5ed;
}
.services-circular-card__index {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #c9a24a;
  margin-bottom: 14px;
}
.services-circular-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(24px, 1.9vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  color: #f8f5ed;
}
.services-circular-card p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(248, 245, 237, 0.76);
  margin: 0 0 22px;
}
/* Decorative layers inside the card must NOT capture pointer events —
   the entire card (the <a>) is the click target. */
.services-circular-card__img,
.services-circular-card__bg,
.services-circular-card__content,
.services-circular-card__index,
.services-circular-card h3,
.services-circular-card p,
.services-circular-card::before,
.services-circular-card::after {
  pointer-events: none;
}

/* TABLET ONLY (769-980px) — collapse 3D ring into a vertical grid.
   Mobile (≤768px) is intentionally excluded — it gets the 3D carousel
   via a separate @media (max-width: 768px) block further below + JS. */
@media (min-width: 769px) and (max-width: 980px) {
  .services-circular-gallery {
    perspective: none;
  }
  .services-circular-gallery__stage {
    height: auto;
    display: block;
  }
  .services-circular-gallery__ring {
    width: min(1100px, calc(100% - 32px));
    height: auto;
    margin: 0 auto;
    transform: none !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    transform-style: flat;
  }
  .services-circular-card {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-circular-gallery__ring {
    transition: none;
  }
  .services-circular-card {
    transition: none;
  }
}

/* ============================================================
   SERVICES — DETAIL BLOCKS (normal vertical flow, NO sticky)
   Sticky stacking was removed per request. Each .service-stack-card
   is now a regular block with comfortable margin between them.
   Class names kept to minimize churn; CSS overrides any sticky
   behavior from earlier iterations.
   ============================================================ */
.service-details-section,
.service-details-section * {
  box-sizing: border-box;
}
.service-details-section {
  position: relative;
  background: #f3efe6;
  padding: 0 0 clamp(80px, 8vw, 130px);
  overflow: visible;
}
.service-details-section__inner {
  position: relative;
  width: min(1500px, calc(100% - 48px));
  margin: 0 auto;
}

/* Step wrapper — neutralized; just a normal block */
.service-stack-step {
  position: relative;
  min-height: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
}
.service-stack-step:not(:last-child) {
  margin-bottom: clamp(80px, 7vw, 120px);
}

/* The detail card — normal flow, no sticky, no z-index ladder */
.service-stack-card {
  position: relative;
  top: auto;
  z-index: auto;
  width: 100%;
  min-height: 0;
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(2, 11, 22, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  opacity: 1;
  transition: box-shadow 400ms ease;
}
.service-stack-card.is-visible {
  opacity: 1;
}

/* Universal: no internal hover-scroll on service section content */
.service-section .service-section__content {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

/* Compliance — neutralize old scroll-driven wrappers (now plain divs) */
.service-stack-card--compliance .service-compliance-sticky {
  position: static;
  top: auto;
  height: auto;
  overflow: visible;
  display: block;
}
.service-stack-card--compliance .compliance-scroll-content {
  transform: none !important;
  will-change: auto;
  transition: none !important;
}
.service-stack-card--compliance .service-section__media {
  height: auto;
  max-height: none;
  aspect-ratio: 4/5;
}
.service-stack-card--compliance .lm-accordion__trigger {
  padding: 16px 0;
  font-size: 16px;
}
.service-stack-card--compliance .lm-accordion__panel-inner {
  padding-top: 4px;
  padding-bottom: 18px;
}
.service-stack-card--compliance .service-section__lead,
.service-stack-card--compliance .service-section__sub {
  font-size: 15.5px;
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .service-details-section { padding: 0 0 clamp(60px, 7vw, 90px); }
  .service-stack-step:not(:last-child) {
    margin-bottom: clamp(48px, 6vw, 72px);
  }
  .service-stack-card {
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(2, 11, 22, 0.08);
  }
  .service-stack-card--compliance .lm-accordion__trigger {
    padding: 22px 0;
    font-size: 17px;
  }
}

@media (max-width: 640px) {
  .service-details-section__inner { width: calc(100% - 28px); }
  .service-stack-step:not(:last-child) {
    margin-bottom: 40px;
  }
  .service-stack-card { border-radius: 20px; }
}

/* ============================================================
   ABOUT PAGE — section components (about.html)
   ============================================================ */

/* --------------------------------------------------
   01 · About hero — dark cinematic placeholder
   -------------------------------------------------- */
.about-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 760px;
  padding: 150px var(--container-px) 110px;
  display: flex;
  align-items: center;
  background: var(--lm-deep-navy);
  color: var(--lm-warm-ivory);
}
.about-hero__media {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
/* Background photo for the entire hero section.
   opacity 0.48 (was 0.34) so the people in the photo are clearly noticeable
   while the navy overlay still preserves headline readability.
   background-position: 58% 26% shifts the group slightly left + up within
   the visible crop so upper bodies and faces sit in view. */
.about-hero__media-base {
  position: absolute; inset: 0;
  background-image: url("../01-assets/about/about-hero-background.png");
  background-size: cover;
  background-position: 38% 18%;
  opacity: 0.48;
  transform: scale(1.04);
}
.about-hero__media-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201, 163, 78, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 163, 78, 0.05) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.4; /* lighter than before so the image isn't lost */
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
/* Navy darken on the LEFT (where text sits), lighter toward the RIGHT
   where the video panel sits. Overlay reduced ~13% from the prior pass so
   the people in the background photo become clearly visible while the
   headline + lead still hold contrast against the navy wash. */
.about-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(2, 11, 22, 0.80) 0%,
      rgba(2, 11, 22, 0.66) 48%,
      rgba(2, 11, 22, 0.58) 100%),
    radial-gradient(circle at 76% 42%, rgba(201, 162, 74, 0.12), transparent 34%);
}

/* Editorial 2-column layout — content left, media panel right.
   Text column is dominant; media block has a min width so it doesn't
   collapse, max behavior so it doesn't overpower the headline. */
.about-hero__layout {
  position: relative; z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.75fr);
  gap: clamp(56px, 6vw, 96px);
  align-items: center;
}
.about-hero__content {
  max-width: 820px;
  text-align: left;
}
.about-hero__eyebrow {
  color: var(--lm-champagne-gold);
  justify-content: flex-start;
  display: inline-flex;
}
.about-hero__h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(36px, 5.2vw, 70px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--lm-warm-ivory);
  margin: 20px 0 0;
}
.about-hero__h1-accent {
  font-family: var(--font-serif-accent);
  font-style: italic; font-weight: 400;
  color: var(--lm-champagne-gold);
}
.about-hero__lead {
  margin: 24px 0 0;
  max-width: 540px;
  font-size: 18px; line-height: 1.65;
  color: var(--color-fg-inv-2);
}
.about-hero__ctas {
  margin-top: 36px;
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: flex-start;
}

/* Right-side media panel — holds the autoplay loop video.
   Navy gradient remains as a fallback under the video (opacity 0.78). */
.about-hero__panel {
  position: relative;
  width: 100%;
  height: clamp(440px, 42vw, 540px);
  max-height: 560px;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(201, 163, 78, 0.28);
  background:
    radial-gradient(ellipse at 25% 25%, rgba(201, 163, 78, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(11, 34, 57, 0.55) 0%, transparent 65%),
    linear-gradient(155deg, #050F1C 0%, #071628 50%, #020B16 100%);
  box-shadow: var(--shadow-3);
}
/* Autoplay/muted/loop video sits below the inner content layer */
.about-hero__video {
  position: absolute; inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  opacity: 0.78;
  pointer-events: none;
}
/* Subtle dark/gold overlay on top of the video so the monogram + label
   keep contrast and the panel matches the rest of the dark hero treatment. */
.about-hero__panel::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(2, 11, 22, 0.36), rgba(7, 26, 51, 0.26)),
    radial-gradient(circle at 50% 40%, rgba(201, 162, 74, 0.08), transparent 42%);
}
.about-hero__panel-inner {
  position: absolute; inset: 0;
  z-index: 2;
  padding: 28px;
  display: flex; flex-direction: column;
  justify-content: space-between;
}
.about-hero__panel-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201, 163, 78, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 163, 78, 0.06) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.28; /* very subtle over the live video */
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
}
.about-hero__panel-mono {
  position: relative;
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-size: clamp(80px, 9vw, 140px);
  font-weight: 500;
  color: rgba(201, 163, 78, 0.22); /* softer over the live video */
  line-height: 1;
  margin: auto;
  letter-spacing: -0.02em;
}
.about-hero__panel-label {
  position: relative;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--lm-champagne-gold);
  letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.about-hero__panel-label > span {
  width: 5px; height: 5px;
  background: var(--lm-champagne-gold);
  border-radius: 999px;
}

/* --------------------------------------------------
   02 · Story + Stats — compact editorial two-column
   Left column: eyebrow → headline → 2 paragraphs → 2×2 stats
   Right column: square media placeholder
   -------------------------------------------------- */
.about-story {
  padding: 96px var(--container-px);
  background: var(--color-surface-ivory);
  color: var(--color-fg-1);
}
.about-story__layout {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  /* Right column sized to fit the larger circular placeholder.
     clamp() drives the circle size; left column takes the remainder. */
  grid-template-columns: 1fr clamp(380px, 38vw, 560px);
  gap: clamp(48px, 5vw, 80px);
  align-items: center; /* vertically center circle against the column copy */
}
.about-story__col {
  min-width: 0;
}
.about-story__h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.14; letter-spacing: -0.014em;
  margin: 14px 0 0;
  color: var(--color-fg-1);
  max-width: 640px;
}
.about-story__p {
  font-size: 17px; line-height: 1.72;
  color: var(--color-fg-2);
  margin: 22px 0 0;
  max-width: 580px;
}
.about-story__p:first-of-type {
  margin-top: 22px; /* tight: eyebrow + h2 + 22px → para 1 */
}

/* Single-row stats block — all 4 stats in one horizontal line on desktop */
.about-story__stats {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-accent-line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: 100%;
}
.about-story-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* allow long labels to wrap inside the column */
}
.about-story-stat__num {
  font-family: var(--font-display);
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lm-champagne-gold);
}
.about-story-stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-fg-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.45;
}

/* Circular media placeholder — premium, intentional, video/photo-ready */
.about-story__media {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 560px;
  margin-left: auto; /* keeps the circle anchored to the right side of its column */
  border-radius: 50%;
  overflow: hidden;
  background: var(--lm-deep-navy);
  border: 1px solid rgba(201, 163, 78, 0.22);
  box-shadow: var(--shadow-3);
}
/* Story circle photo carousel — fade between 8 slides, autoplay loop.
   Lives inside .about-story__media (the existing circular container), so the
   circle's border, border-radius, background, and shadow are inherited. */
.story-carousel { isolation: isolate; }
.story-carousel__track {
  position: absolute; inset: 0;
}
.story-carousel__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 900ms ease,
    transform 1600ms ease;
}
.story-carousel__slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}
.story-carousel__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Cool navy cinematic overlay over the photos — neutralizes the warm cast
   of the source images without crushing skin tones or whites. Light enough
   that subjects stay natural; just adds a subtle blue-smoke premium tone. */
.story-carousel__overlay {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 23, 48, 0.14) 0%,
    rgba(6, 18, 38, 0.20) 100%
  );
}

/* --------------------------------------------------
   03 · Stats / trust strip — light
   -------------------------------------------------- */
.about-stats {
  padding: 56px var(--container-px) 96px;
  background: var(--color-surface-ivory);
  color: var(--color-fg-1);
}
.about-stats__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 56px 48px;
  border-top: 1px solid var(--color-border-ivory);
  border-bottom: 1px solid var(--color-border-ivory);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.about-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.about-stat__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lm-champagne-gold);
}
.about-stat__divider {
  width: 38px; height: 1px;
  background: var(--color-accent-line);
  margin: 16px 0;
}
.about-stat__label {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-fg-2);
}

/* --------------------------------------------------
   04 · Mission — dark
   -------------------------------------------------- */
.about-mission {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 120px var(--container-px);
  background:
    linear-gradient(180deg, var(--lm-deep-navy) 0%, var(--lm-authority-navy) 100%);
  background-color: var(--lm-deep-navy);
  color: var(--lm-warm-ivory);
}
/* z 0 — photo layer */
.about-mission__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../01-assets/articles/article-04-hpd-registration.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* z 1 — dark navy overlay */
.about-mission__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(2, 11, 22, 0.82) 0%,
      rgba(2, 11, 22, 0.74) 45%,
      rgba(2, 11, 22, 0.68) 100%),
    linear-gradient(180deg,
      rgba(2, 11, 22, 0.18) 0%,
      rgba(7, 26, 51, 0.26) 50%,
      rgba(2, 11, 22, 0.50) 100%);
}
/* z 2 — content layer (inner wrapper + head + cards) sits above overlay */
.about-mission__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.about-mission .ambient-glow-field { z-index: 2; }
.about-mission__head { position: relative; z-index: 2; }
.about-mission__cards { position: relative; z-index: 2; }
.about-mission__head {
  max-width: 820px;
  text-align: left;
  margin: 0 0 64px;
}
.about-mission__eyebrow {
  color: var(--lm-champagne-gold);
  justify-content: flex-start;
  display: inline-flex;
}
.about-mission__h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: var(--lm-warm-ivory);
  margin-top: 18px;
}
.about-mission__h2-accent {
  font-family: var(--font-serif-accent);
  font-style: italic; font-weight: 400;
  color: var(--lm-champagne-gold);
}
.about-mission__lead {
  max-width: 680px; margin: 22px 0 0;
  font-size: 17px; line-height: 1.7;
  color: var(--color-fg-inv-2);
}
.about-mission__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.about-mission-card {
  position: relative;
  overflow: hidden;
  padding: 36px 32px;
  border-radius: 22px;
  background: #061525;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 28px 80px rgba(2, 11, 22, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  isolation: isolate;
  transition:
    transform 0.45s var(--ease-soft),
    border-color 0.45s var(--ease-soft),
    box-shadow 0.45s var(--ease-soft);
}
.about-mission-card:hover {
  transform: translateY(-4px);
  border-color: rgba(135, 190, 255, 0.22);
  box-shadow:
    0 34px 100px rgba(2, 11, 22, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.about-mission-card:hover .about-mission-card__beams {
  opacity: 1;
}
.about-mission-card__beams {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  filter: blur(14px);
  opacity: 0.85;
  transition: opacity 0.6s var(--ease-soft);
}
.about-mission-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(2, 11, 22, 0.18) 0%,
      rgba(2, 11, 22, 0.38) 50%,
      rgba(2, 11, 22, 0.62) 100%),
    radial-gradient(circle at 30% 20%,
      rgba(110, 180, 255, 0.14),
      rgba(2, 11, 22, 0) 55%);
}
.about-mission-card__content {
  position: relative;
  z-index: 2;
}
.about-mission-card__title {
  margin: 0 0 12px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 20px; line-height: 1.25;
  color: #f8f5ed;
}
.about-mission-card__text {
  margin: 0;
  font-size: 15px; line-height: 1.65;
  color: rgba(248, 245, 237, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  .about-mission-card {
    transition: none;
  }
  .about-mission-card__beams {
    display: none;
  }
}

/* --------------------------------------------------
   05 · Values — light, asymmetric grid
   -------------------------------------------------- */
.about-values {
  padding: 120px var(--container-px);
  background: var(--color-surface-stone);
  color: var(--color-fg-1);
}
.about-values__head {
  max-width: var(--container-max);
  margin: 0 auto 56px;
  text-align: left;
}
.about-values__h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.014em;
  margin-top: 16px;
  max-width: 720px;
}
.about-values__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 24px;
}
.about-value-card {
  position: relative;
  padding: 32px 30px;
  background: var(--lm-warm-ivory);
  border: 1px solid var(--color-border-ivory);
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  transition: transform 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft);
}
.about-value-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent-line);
  box-shadow: var(--shadow-3);
}
.about-value-card__tag {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--lm-champagne-gold);
  letter-spacing: 0.20em; font-weight: 600;
}
.about-value-card__title {
  margin: 14px 0 12px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 19px; line-height: 1.25;
  color: var(--color-fg-1);
}
.about-value-card__text {
  font-size: 14.5px; line-height: 1.65;
  color: var(--color-fg-2);
}
.about-value-card--featured {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  padding: 44px 40px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(201, 163, 78, 0.10) 0%, transparent 55%),
    var(--lm-warm-ivory);
  border-color: var(--color-accent-line);
}
.about-value-card--featured .about-value-card__title {
  font-size: 26px;
  margin-top: 18px;
}
.about-value-card--featured .about-value-card__text {
  font-size: 16px;
  max-width: 460px;
}
.about-value-card__chips {
  margin-top: auto;
  padding-top: 28px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.about-value-card__chips > span {
  font-family: var(--font-mono); font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-accent-line);
  background: var(--color-accent-soft);
  color: var(--lm-champagne-deep);
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
}

/* --------------------------------------------------
   06 · Leadership intro — light editorial w/ portrait placeholders
   -------------------------------------------------- */
.about-leadership {
  padding: 120px var(--container-px);
  background: var(--color-surface-ivory);
  color: var(--color-fg-1);
}
.about-leadership__head {
  max-width: 880px;
  margin: 0 auto 56px;
  text-align: center;
}
.about-leadership__h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.014em;
  margin-top: 16px;
}
.about-leadership__lead {
  margin-top: 18px;
  font-size: 17px; line-height: 1.7;
  color: var(--color-fg-2);
}
.about-leadership__panel {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 36px;
  align-items: center;
}
.about-leadership__portrait {
  aspect-ratio: 4/5;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--lm-deep-navy) 0%, var(--lm-authority-navy) 100%);
  border: 1px solid var(--color-accent-line);
  position: relative;
  isolation: isolate;
  box-shadow: var(--shadow-2);
}

/* Real founder photo — fills the card edge-to-edge. object-position
   biased toward the top so faces don't get cropped at the chin. */
.about-leadership__portrait-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

/* Soft navy overlay — keeps the photo cohesive with the site palette
   without burying the face. Lighter at the top (where the face sits),
   heavier at the bottom to give the gold caption a readable pad. */
.about-leadership__portrait-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(2, 11, 22, 0.18) 0%,
      rgba(2, 11, 22, 0.22) 45%,
      rgba(2, 11, 22, 0.68) 100%
    ),
    /* very subtle cool-navy tint across the whole photo */
    linear-gradient(
      135deg,
      rgba(11, 41, 71, 0.10),
      rgba(2, 11, 22, 0.04)
    );
}

/* Bottom name caption — sits above the overlay, gold + uppercase mono */
.about-leadership__portrait-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--lm-champagne-gold);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 2px 8px rgba(2, 11, 22, 0.45);
}
.about-leadership__center {
  padding: 0 12px;
  text-align: center;
}
.about-leadership__center > p {
  font-size: clamp(19px, 1.4vw, 22px);
  line-height: 1.6;
  color: var(--color-fg-2);
  font-style: italic;
  font-family: var(--font-serif-accent);
}

/* --------------------------------------------------
   07 · Founder cards — dark cinematic
   -------------------------------------------------- */
.about-founders {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(70px, 7vw, 100px) var(--container-px);
  background: linear-gradient(180deg, var(--lm-authority-navy) 0%, var(--lm-deep-navy) 100%);
  color: var(--lm-warm-ivory);
}
.about-founders__brand {
  position: relative; z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto clamp(24px, 3vw, 40px);
}
.about-founders__logo {
  width: clamp(120px, 11vw, 170px);
  height: auto;
  object-fit: contain;
  opacity: 0.92;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.about-founders__head {
  position: relative; z-index: 1;
  max-width: 760px;
  margin: 0 auto clamp(36px, 4vw, 60px);
  text-align: center;
}
.about-founders__head .about-founders__eyebrow {
  justify-content: center;
}
.about-founders__eyebrow {
  color: var(--lm-champagne-gold);
  display: inline-flex;
}
.about-founders__h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: var(--lm-warm-ivory);
  margin: 18px 0 0;
}
.about-founders__lead {
  margin: 18px auto 0;
  max-width: 640px;
  font-size: clamp(15.5px, 1.05vw, 17.5px);
  line-height: 1.62;
  color: rgba(248, 245, 237, 0.72);
}
.about-founders__grid {
  position: relative; z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 56px);
}

/* New founder card: transparent, vertical portrait + content stack */
.about-founder-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.45s var(--ease-soft);
}
.about-founder-card:hover {
  transform: translateY(-3px);
}

/* Portrait wrapper holds both the rotating ring SVG and the circular photo */
.about-founder-card__portrait-wrap {
  position: relative;
  width: clamp(240px, 22vw, 320px);
  aspect-ratio: 1 / 1;
  margin-bottom: clamp(20px, 2.2vw, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Rotating SVG ring with circular text */
.about-founder-card__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: founderRingSpin 26s linear infinite;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.about-founder-card--semyon .about-founder-card__ring {
  animation-duration: 30s;
  animation-direction: reverse;
}
.about-founder-card__ring-text {
  fill: var(--lm-champagne-gold);
  font-family: var(--font-mono), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
@keyframes founderRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Circular portrait */
.about-founder-card__portrait {
  position: relative;
  width: 72%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--lm-deep-navy);
  box-shadow:
    0 22px 60px rgba(2, 11, 22, 0.36),
    0 0 0 1px rgba(201, 162, 74, 0.32);
}
.about-founder-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  transition: transform 0.6s var(--ease-soft);
}
.about-founder-card:hover .about-founder-card__portrait img {
  transform: scale(1.04);
}
.about-founder-card--semyon .about-founder-card__portrait img {
  object-position: center 18%;
}

/* Body — stacked center-aligned typography under the portrait */
.about-founder-card__body {
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-founder-card__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 1.7vw, 28px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--lm-warm-ivory);
  margin: 0;
}
.about-founder-card__role {
  margin: 10px 0 18px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--lm-champagne-gold);
  letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
}
.about-founder-card__bio {
  margin: 0;
  font-size: clamp(14.5px, 0.95vw, 15.5px);
  line-height: 1.62;
  color: rgba(248, 245, 237, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  .about-founder-card__ring { animation: none; }
}

/* --------------------------------------------------
   08 · How we work — dark rhythm rail
   -------------------------------------------------- */
.about-rhythm {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 120px var(--container-px);
  background-color: var(--lm-deep-navy);
  background-image:
    linear-gradient(180deg,
      rgba(2, 11, 22, 0.78) 0%,
      rgba(2, 11, 22, 0.82) 50%,
      rgba(2, 11, 22, 0.86) 100%),
    radial-gradient(circle at 50% 35%,
      rgba(12, 52, 88, 0.22),
      rgba(2, 11, 22, 0) 65%),
    url("../01-assets/about/about-hero-background.png");
  background-size: cover, cover, cover;
  background-position: center center, center center, center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: scroll, scroll, fixed;
  color: var(--lm-warm-ivory);
}
@media (max-width: 768px) {
  .about-rhythm {
    background-attachment: scroll, scroll, scroll;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-rhythm {
    background-attachment: scroll, scroll, scroll;
  }
}
.about-rhythm__head {
  position: relative; z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto 72px;
  text-align: left;
}
.about-rhythm__eyebrow {
  color: var(--lm-champagne-gold);
  justify-content: flex-start;
  display: inline-flex;
}
.about-rhythm__h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.014em;
  color: var(--lm-warm-ivory);
  margin-top: 18px;
}
.about-rhythm__steps {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
}
.about-rhythm__steps::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 163, 78, 0.35) 10%,
    rgba(201, 163, 78, 0.35) 90%,
    transparent 100%);
  z-index: 0;
}
.about-rhythm__step {
  position: relative;
  padding: 0 8px;
  text-align: left;
}
.about-rhythm__step::before {
  content: "";
  position: absolute;
  left: 50%; top: 30px;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--lm-champagne-gold);
  box-shadow: 0 0 0 4px var(--lm-deep-navy), 0 0 0 5px rgba(201, 163, 78, 0.45);
}
.about-rhythm__num {
  display: block;
  text-align: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--lm-champagne-gold);
  letter-spacing: 0.22em; font-weight: 600;
  margin-bottom: 38px;
}
.about-rhythm__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px; line-height: 1.28;
  color: var(--lm-warm-ivory);
  margin: 18px 0 12px;
}
.about-rhythm__text {
  font-size: 14px; line-height: 1.65;
  color: var(--color-fg-inv-2);
}

/* --------------------------------------------------
   09 · Who we serve — light pain/support cards
   -------------------------------------------------- */
.about-serve {
  padding: 120px var(--container-px);
  background: var(--color-surface-ivory);
  color: var(--color-fg-1);
}
.about-serve__head {
  max-width: var(--container-max);
  margin: 0 auto 56px;
  text-align: left;
}
.about-serve__h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.014em;
  margin-top: 16px;
  max-width: 760px;
}
.about-serve__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.about-serve-card {
  padding: 32px 30px;
  border-radius: 16px;
  background: var(--lm-warm-ivory);
  border: 1px solid var(--color-border-ivory);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  transition: transform 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft);
}
.about-serve-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent-line);
  box-shadow: var(--shadow-3);
}
.about-serve-card__head {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-ivory);
  margin-bottom: 20px;
}
.about-serve-card__tag {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--lm-champagne-gold);
  letter-spacing: 0.20em; font-weight: 600;
}
.about-serve-card__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 20px; line-height: 1.2;
}
.about-serve-card__block {
  margin-top: 14px;
}
.about-serve-card__block:first-of-type { margin-top: 0; }
.about-serve-card__lbl {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.about-serve-card__lbl--pain {
  color: var(--color-danger);
  background: rgba(154, 63, 58, 0.10);
  border: 1px solid rgba(154, 63, 58, 0.24);
}
.about-serve-card__lbl--support {
  color: var(--lm-champagne-deep);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-line);
}
.about-serve-card__block > p {
  font-size: 14.5px; line-height: 1.65;
  color: var(--color-fg-2);
}

/* --------------------------------------------------
   10 · Service areas — dark, map + content
   -------------------------------------------------- */
.about-areas {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 120px var(--container-px);
  background: linear-gradient(180deg, var(--lm-authority-navy) 0%, var(--lm-deep-navy) 100%);
  color: var(--lm-warm-ivory);
}
.about-areas__layout {
  position: relative; z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 64px;
  align-items: center;
}
.about-areas__eyebrow {
  color: var(--lm-champagne-gold);
  display: inline-flex;
}
.about-areas__h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: var(--lm-warm-ivory);
  margin-top: 18px;
}
.about-areas__lead {
  margin-top: 22px;
  font-size: 17px; line-height: 1.7;
  color: var(--color-fg-inv-2);
  max-width: 560px;
}
.about-areas__borough { margin-top: 40px; }
.about-areas__borough-label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--lm-champagne-gold);
  letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  margin-bottom: 14px;
}
.about-areas__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.about-area-chip {
  font-family: var(--font-mono); font-size: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(201, 163, 78, 0.12);
  border: 1px solid var(--color-accent-line);
  color: var(--lm-warm-ivory);
  letter-spacing: 0.08em;
  font-weight: 500;
  transition: background 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft);
}
.about-area-chip:hover {
  background: rgba(201, 163, 78, 0.22);
  border-color: var(--lm-champagne-gold);
}
/* ============================================================
   SERVICE AREAS — premium animated map card.
   NYC service-area map fills the right card; a soft navy overlay
   blends the edges into the dark card frame; a slow gold radar
   sweep + center ping rings layer on top for a premium animated
   coverage-panel feel.
   Map asset: 01-assets/service-areas/nyc-service-areas-map.png
   ============================================================ */
.about-areas__map {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 560px;
  border-radius: 34px;
  background: linear-gradient(180deg, #061525 0%, #020b16 100%);
  border: 1px solid rgba(248, 245, 237, 0.08);
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.about-areas__map-inner { position: absolute; inset: 0; }

/* The map image — fills the card edge-to-edge.
   The asset is already dark navy with ivory street grid, so we only
   nudge the brightness slightly down to match the site's deep navy. */
.about-areas__map-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../01-assets/service-areas/nyc-service-areas-map.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.92) saturate(0.95);
}

/* Soft overlay — light vertical wash + corner vignette, keeps the map
   crisply readable while blending the edges into the dark card frame. */
.about-areas__map-image-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(2, 11, 22, 0.10) 0%,
      rgba(6, 21, 37, 0.18) 60%,
      rgba(2, 11, 22, 0.30) 100%),
    radial-gradient(ellipse 95% 80% at 50% 50%,
      transparent 0%,
      transparent 62%,
      rgba(2, 11, 22, 0.30) 100%);
}

/* Radar sweep — slow rotating gold wedge that "scans" the map.
   Conic-gradient with a bright leading edge + soft fading trail.
   `mix-blend-mode: screen` makes the gold add to the dark navy
   underneath, so the beam reads as glowing radar light. */
.about-areas__map-radar {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 220deg,
    rgba(201, 162, 74, 0.05) 280deg,
    rgba(201, 162, 74, 0.16) 335deg,
    rgba(201, 162, 74, 0.30) 358deg,
    rgba(201, 162, 74, 0) 360deg
  );
  mix-blend-mode: screen;
  will-change: transform;
  animation: radarSweep 7s linear infinite;
}
@keyframes radarSweep {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Ping rings — soft expanding circles from the map center.
   Two staggered rings so the pulse feels continuous. */
.about-areas__map-ping {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 74, 0.45);
  pointer-events: none;
  animation: radarPing 5s ease-out infinite;
}
.about-areas__map-ping--delayed { animation-delay: 2.5s; }
@keyframes radarPing {
  0%   { transform: scale(0.4); opacity: 0.75; }
  90%  { opacity: 0; }
  100% { transform: scale(8);   opacity: 0;    }
}

@media (max-width: 980px) {
  .about-areas__map { min-height: 460px; }
}
@media (max-width: 640px) {
  .about-areas__map { min-height: 360px; border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-areas__map-radar,
  .about-areas__map-ping { animation: none; }
  .about-areas__map-radar { opacity: 0.15; }
  .about-areas__map-ping { opacity: 0; }
}

/* --------------------------------------------------
   11 · Founder quote — light split editorial
   -------------------------------------------------- */
.about-quote {
  padding: 120px var(--container-px);
  background: var(--color-surface-ivory);
  color: var(--color-fg-1);
}
.about-quote__layout {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: center;
}
.about-quote__media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--lm-deep-navy), var(--lm-authority-navy));
  box-shadow: var(--shadow-3);
}
.about-quote__media > div:first-child {
  position: absolute; inset: 0;
}
.about-quote__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.about-quote__media::after { content: none; }
.about-quote__media-label {
  position: absolute; left: 24px; bottom: 24px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--lm-champagne-gold);
  letter-spacing: 0.20em; text-transform: uppercase; font-weight: 600;
  z-index: 2;
  text-shadow: 0 1px 6px rgba(2, 11, 22, 0.85), 0 0 12px rgba(2, 11, 22, 0.55);
}
.about-quote__h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.014em;
  margin-top: 16px;
  color: var(--color-fg-1);
}
.about-quote__text {
  position: relative;
  margin: 28px 0 0;
  padding-left: 20px;
  font-family: var(--font-serif-accent);
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.5;
  font-style: italic;
  color: var(--color-fg-1);
  max-width: 640px;
}
.about-quote__mark {
  font-family: var(--font-serif-accent);
  position: absolute;
  left: -8px; top: -14px;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  color: var(--lm-champagne-gold);
  opacity: 0.85;
  font-style: normal;
}
.about-quote__cite {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--color-accent-line);
  max-width: 320px;
}
.about-quote__cite-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px;
  color: var(--color-fg-1);
}
.about-quote__cite-role {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--lm-champagne-deep);
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  margin-top: 4px;
}
.about-quote__cta { margin-top: 30px; }

/* ============================================================
   ABOUT PAGE — responsive
   ============================================================ */
@media (max-width: 1100px) {
  .about-hero {
    min-height: auto;
    padding: 130px var(--container-px) 80px;
  }
  .about-hero__layout {
    grid-template-columns: 1fr;
    gap: 42px;
    align-items: start;
  }
  .about-hero__panel {
    height: 380px;
    max-height: none;
  }

  .about-story__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-story__media {
    max-width: 420px;
    margin: 0 auto; /* center circle when stacked */
  }
  .about-story__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 28px;
  }

  .about-mission__cards { grid-template-columns: 1fr; gap: 18px; }

  .about-values__grid { grid-template-columns: repeat(2, 1fr); }
  .about-value-card--featured {
    grid-column: 1 / span 2;
    grid-row: auto;
  }

  .about-leadership__panel {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "left right"
      "center center";
    gap: 28px;
  }
  .about-leadership__portrait--elena  { grid-area: left; }
  .about-leadership__portrait--semyon { grid-area: right; }
  .about-leadership__center { grid-area: center; padding-top: 8px; }

  .about-founders__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    gap: 44px;
  }
  .about-founder-card__portrait-wrap {
    width: clamp(240px, 60vw, 300px);
  }

  .about-rhythm__steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .about-rhythm__steps::before { display: none; }
  .about-rhythm__step {
    padding: 24px 24px 24px 70px;
    background: rgba(11, 34, 57, 0.45);
    border: 1px solid var(--color-border-navy);
    border-radius: 14px;
  }
  .about-rhythm__step::before {
    left: 28px; top: 30px;
    transform: none;
  }
  .about-rhythm__num {
    text-align: left;
    margin: 0 0 10px;
  }
  .about-rhythm__title { margin-top: 4px; }

  .about-serve__grid { grid-template-columns: repeat(2, 1fr); }

  .about-areas__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-areas__map { max-width: 480px; margin: 0 auto; width: 100%; }

  .about-quote__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-quote__media { max-width: 420px; margin: 0 auto; width: 100%; }
}

@media (max-width: 720px) {
  .about-hero {
    padding: 110px var(--container-px) 64px;
    min-height: auto;
  }
  .about-hero__h1 { font-size: clamp(30px, 8vw, 44px); }
  .about-hero__lead { font-size: 16px; }
  .about-hero__panel {
    height: 320px;
    border-radius: 22px;
  }

  .about-story,
  .about-mission,
  .about-values,
  .about-leadership,
  .about-founders,
  .about-rhythm,
  .about-serve,
  .about-areas,
  .about-quote {
    padding: 72px var(--container-px);
  }

  .about-story__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
  }
  .about-story__media { max-width: 300px; }

  .about-values__grid { grid-template-columns: 1fr; }
  .about-value-card--featured { grid-column: 1; padding: 32px 28px; }
  .about-value-card--featured .about-value-card__title { font-size: 22px; }

  .about-leadership__panel {
    grid-template-columns: 1fr;
    grid-template-areas: "left" "center" "right";
    gap: 22px;
  }
  .about-leadership__portrait { max-width: 280px; margin: 0 auto; width: 100%; }

  .about-founder-card__name { font-size: 22px; }
  .about-founder-card__bio { font-size: 14.5px; }
  .about-founder-card__ring-text { font-size: 10px; letter-spacing: 0.24em; }
  .about-founders__logo { width: clamp(110px, 28vw, 140px); }

  .about-serve__grid { grid-template-columns: 1fr; }

  .about-quote__text { font-size: 18px; padding-left: 16px; }
  .about-quote__mark { left: -4px; top: -10px; font-size: 44px; }
}

/* ============================================================
   SERVICES PAGE — Client Recommendations (3D vertical marquee)
   4 columns inside a perspective-tilted plane. Columns 1 + 3 scroll
   UP, columns 2 + 4 scroll DOWN (reverse). Each column's 4 cards are
   duplicated 2× so the CSS @keyframes can translate by -50% (minus
   one gap) for a seamless loop. Pure CSS, no JS, no libraries.
   ============================================================ */
.services-testimonials-3d {
  position: relative;
  padding: clamp(90px, 10vw, 150px) 0;
  background: #f3efe6;
  overflow: hidden;
}
.services-testimonials-3d__header {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto clamp(48px, 6vw, 76px);
}
.services-testimonials-3d__header .section-eyebrow {
  display: inline-flex;
  margin-bottom: 24px;
}
.services-testimonials-3d__header h2 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 600;
  color: #061525;
  font-size: clamp(44px, 5vw, 82px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.services-testimonials-3d__header p {
  max-width: 820px;
  color: rgba(6, 21, 37, 0.68);
  font-size: clamp(18px, 1.35vw, 24px);
  line-height: 1.55;
  margin: 0;
}

/* Stage holds the 3D perspective + edge fades */
.testimonials-3d-stage {
  position: relative;
  width: min(1100px, calc(100% - 48px));
  height: clamp(520px, 58vw, 720px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(6, 21, 37, 0.08);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.65), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(235, 229, 217, 0.82));
  box-shadow: 0 34px 100px rgba(2, 11, 22, 0.10);
  perspective: 420px;
}

/* The 3D-rotated plane inside the stage holds the 4 columns */
.testimonials-3d-plane {
  position: absolute;
  inset: -120px -80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transform:
    translateX(-40px)
    translateY(0)
    translateZ(-90px)
    rotateX(18deg)
    rotateY(-10deg)
    rotateZ(16deg);
  transform-style: preserve-3d;
}

.testimonials-3d-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: clamp(220px, 21vw, 300px);
  animation: testimonialsVerticalMarquee 42s linear infinite;
  will-change: transform;
}
.testimonials-3d-column--reverse {
  animation-name: testimonialsVerticalMarqueeReverse;
}

/* Pause all 4 columns when the user hovers the stage */
.testimonials-3d-stage:hover .testimonials-3d-column {
  animation-play-state: paused;
}

.testimonial-3d-card {
  min-height: 210px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(6, 21, 37, 0.10);
  box-shadow:
    0 18px 50px rgba(2, 11, 22, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.testimonial-3d-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.testimonial-3d-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #061525;
  color: #d7b75a;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.testimonial-3d-card__name {
  color: #061525;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
}
.testimonial-3d-card__role {
  margin-top: 4px;
  color: rgba(6, 21, 37, 0.52);
  font-size: 12px;
  line-height: 1.35;
}
.testimonial-3d-card__category {
  color: #a9842d;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.testimonial-3d-card__text {
  color: rgba(6, 21, 37, 0.78);
  font-size: 14px;
  line-height: 1.58;
  margin: 0;
}

/* Edge fades — feathered ivory wash so the cards melt out at all 4 sides */
.testimonials-3d-fade {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}
.testimonials-3d-fade--top {
  top: 0; left: 0; right: 0;
  height: 26%;
  background: linear-gradient(to bottom, #f3efe6 0%, rgba(243, 239, 230, 0) 100%);
}
.testimonials-3d-fade--bottom {
  bottom: 0; left: 0; right: 0;
  height: 28%;
  background: linear-gradient(to top, #f3efe6 0%, rgba(243, 239, 230, 0) 100%);
}
.testimonials-3d-fade--left {
  left: 0; top: 0; bottom: 0;
  width: 22%;
  background: linear-gradient(to right, #f3efe6 0%, rgba(243, 239, 230, 0) 100%);
}
.testimonials-3d-fade--right {
  right: 0; top: 0; bottom: 0;
  width: 22%;
  background: linear-gradient(to left, #f3efe6 0%, rgba(243, 239, 230, 0) 100%);
}

@keyframes testimonialsVerticalMarquee {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-50% - 9px)); }
}
@keyframes testimonialsVerticalMarqueeReverse {
  from { transform: translateY(calc(-50% - 9px)); }
  to   { transform: translateY(0); }
}

@media (max-width: 980px) {
  .testimonials-3d-stage {
    height: 560px;
    perspective: 360px;
  }
  .testimonials-3d-plane {
    inset: -120px -160px;
    gap: 18px;
    transform:
      translateX(-20px)
      translateY(0)
      translateZ(-80px)
      rotateX(16deg)
      rotateY(-8deg)
      rotateZ(12deg);
  }
  .testimonials-3d-column { width: 250px; }
}
@media (max-width: 640px) {
  .services-testimonials-3d { padding: 72px 0; }
  .testimonials-3d-stage {
    width: calc(100% - 32px);
    height: 520px;
    border-radius: 26px;
  }
  .testimonials-3d-plane {
    inset: -120px -220px;
    gap: 14px;
    transform:
      translateX(-10px)
      translateY(0)
      translateZ(-80px)
      rotateX(14deg)
      rotateY(-6deg)
      rotateZ(10deg);
  }
  .testimonials-3d-column {
    width: 230px;
    gap: 14px;
    animation-duration: 48s;
  }
  .testimonial-3d-card {
    min-height: 200px;
    padding: 18px;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-3d-column { animation: none !important; }
  .testimonials-3d-plane {
    transform: none;
    position: relative;
    inset: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .testimonials-3d-fade { display: none; }
}


/* ============================================================
   ARTICLE PAGE — editorial layout for individual posts
   (article-how-to-choose-property-management-nyc.html and similar)
   ============================================================ */
.article-page {
  background: #F3EFE6;
  color: #061525;
}

/* --- Hero plate: title overlaid on photo --- */
.article-hero {
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(42px, 5vw, 72px) 0 clamp(42px, 5vw, 70px);
}
.article-hero__media {
  position: relative;
  min-height: clamp(480px, 48vw, 690px);
  border-radius: clamp(28px, 3vw, 44px);
  overflow: hidden;
  background: #061525;
  box-shadow: 0 34px 100px rgba(2, 11, 22, 0.18);
  display: flex;
}
.article-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.02);
  display: block;
  z-index: 0;
}
.article-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(2, 11, 22, 0.86) 0%,
      rgba(2, 11, 22, 0.68) 42%,
      rgba(2, 11, 22, 0.28) 72%,
      rgba(2, 11, 22, 0.54) 100%),
    linear-gradient(180deg,
      rgba(2, 11, 22, 0.18) 0%,
      rgba(2, 11, 22, 0.30) 56%,
      rgba(2, 11, 22, 0.72) 100%);
}
.article-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 900px;
  padding: clamp(42px, 6vw, 84px);
}
.article-hero__eyebrow {
  color: #C9A24A;
  font-family: var(--font-mono), system-ui, sans-serif;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0 0 clamp(24px, 3vw, 34px);
}
.article-hero__h1 {
  margin: 0;
  max-width: 980px;
  font-family: var(--font-display);
  font-weight: 500;
  color: #F8F5ED;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.article-hero__label {
  margin-top: clamp(28px, 3vw, 42px);
  color: #C9A24A;
  font-family: var(--font-mono), system-ui, sans-serif;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.article-hero__lead {
  margin: clamp(36px, 4vw, 60px) 0 0;
  max-width: 880px;
  color: rgba(6, 21, 37, 0.68);
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1.58;
}

/* --- Body grid: content + sticky sidebar --- */
.article-body {
  padding: 0 0 clamp(80px, 9vw, 140px);
}
.article-body__layout {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(56px, 6vw, 96px);
  align-items: start;
}
.article-content {
  max-width: 820px;
}
.article-content .article-lead {
  color: rgba(6, 21, 37, 0.82);
  font-size: clamp(20px, 1.4vw, 25px);
  line-height: 1.58;
  margin: 0 0 36px;
}
.article-content p {
  color: rgba(6, 21, 37, 0.72);
  font-size: clamp(17px, 1.15vw, 20px);
  line-height: 1.75;
  margin: 0 0 24px;
}
.article-content h2 {
  font-family: var(--font-display);
  font-weight: 500;
  color: #061525;
  font-size: clamp(30px, 2.8vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: clamp(48px, 5vw, 76px) 0 20px;
  scroll-margin-top: 110px;
}
.article-content ul {
  margin: 18px 0 30px;
  padding: 0;
  list-style: none;
}
.article-content li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  color: rgba(6, 21, 37, 0.72);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.6;
}
.article-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #C9A24A;
}

/* --- Sidebar (sticky on desktop, stacked on mobile) --- */
.article-sidebar {
  position: sticky;
  top: 120px;
  display: grid;
  gap: 20px;
}
.article-sidebar__card,
.article-sidebar__cta {
  border-radius: 24px;
  padding: 28px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(6, 21, 37, 0.10);
  box-shadow: 0 20px 60px rgba(2, 11, 22, 0.06);
  backdrop-filter: blur(6px);
}
.article-sidebar__label {
  color: #A9842D;
  font-family: var(--font-mono), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.article-sidebar__card a {
  display: block;
  color: #061525;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.35;
  padding: 12px 0;
  border-bottom: 1px solid rgba(6, 21, 37, 0.08);
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.article-sidebar__card a:last-of-type {
  border-bottom: none;
}
.article-sidebar__card a:hover {
  color: #A9842D;
  padding-left: 6px;
}
.article-sidebar__cta {
  background: #061525;
  color: #F8F5ED;
  border-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
}
.article-sidebar__cta .article-sidebar__label {
  color: #C9A24A;
}
.article-sidebar__cta p {
  margin: 0 0 18px;
  color: rgba(248, 245, 237, 0.72);
  font-size: 15px;
  line-height: 1.55;
}
.article-sidebar__cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  background: #C9A24A;
  color: #061525;
  font-family: var(--font-mono), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.article-sidebar__cta a:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(201, 162, 74, 0.34);
}

/* --- In-content callout (dark navy card) --- */
.article-callout {
  margin-top: clamp(56px, 6vw, 96px);
  padding: clamp(32px, 4vw, 56px);
  border-radius: 28px;
  background: linear-gradient(180deg, #061525 0%, #020B16 100%);
  color: #F8F5ED;
  box-shadow: 0 34px 80px rgba(2, 11, 22, 0.20);
}
.article-callout h3 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 2.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #F8F5ED;
}
.article-callout p {
  margin: 0 0 22px;
  color: rgba(248, 245, 237, 0.72);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.65;
}
.article-callout__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  background: #C9A24A;
  color: #061525;
  font-family: var(--font-mono), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.article-callout__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(201, 162, 74, 0.36);
}

/* --- Responsive --- */
@media (max-width: 980px) {
  .article-body__layout {
    grid-template-columns: 1fr;
  }
  .article-sidebar {
    position: relative;
    top: auto;
    order: 2;
    max-width: 520px;
  }
  .article-content {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .article-hero__media {
    min-height: 560px;
  }
  .article-hero__overlay {
    background: linear-gradient(180deg,
      rgba(2, 11, 22, 0.78) 0%,
      rgba(2, 11, 22, 0.68) 42%,
      rgba(2, 11, 22, 0.86) 100%);
  }
  .article-hero__content {
    justify-content: flex-end;
    padding: 30px;
  }
}

@media (max-width: 640px) {
  .article-hero {
    width: calc(100% - 28px);
    padding-top: 28px;
  }
  .article-hero__media {
    min-height: 520px;
    border-radius: 22px;
  }
  .article-hero__h1 {
    font-size: clamp(34px, 11vw, 56px);
    line-height: 1;
    letter-spacing: -0.035em;
  }
  .article-hero__eyebrow,
  .article-hero__label {
    font-size: 10px;
    letter-spacing: 0.22em;
  }
  .article-hero__lead {
    font-size: 17px;
  }
  .article-body__layout {
    width: calc(100% - 28px);
    gap: 40px;
  }
  .article-content h2 {
    margin-top: 44px;
  }
  .article-callout {
    padding: 28px 22px;
    border-radius: 22px;
  }
}

/* ============================================================
   ARTICLE FAQ — sits below the body sections, before the callout
   ============================================================ */
.article-faq {
  margin-top: clamp(48px, 5vw, 76px);
  padding-top: clamp(36px, 4vw, 60px);
  border-top: 1px solid rgba(6, 21, 37, 0.12);
}
.article-faq__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #061525;
  margin: 0 0 28px;
}
.article-faq__item {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(6, 21, 37, 0.08);
}
.article-faq__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.article-faq__q {
  font-family: var(--font-display);
  font-weight: 600;
  color: #061525;
  font-size: clamp(17px, 1.2vw, 20px);
  line-height: 1.35;
  margin: 0 0 10px;
}
.article-faq__a {
  margin: 0;
  color: rgba(6, 21, 37, 0.72);
  font-size: clamp(15.5px, 1.05vw, 17px);
  line-height: 1.65;
}

/* ============================================================
   PROPOSAL FORM — additions for the unified Home/Services/About
   form (required asterisk, SMS consent block, consent text).
   The base .proposal__form / .proposal__form-grid rules are
   already defined above; these only add what's new.
   ============================================================ */
.field-required {
  color: var(--lm-champagne-gold);
  margin-left: 3px;
  font-weight: 700;
}

.proposal__form-sms {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.proposal__form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.proposal__form-checkbox input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.proposal__form-checkbox-mark {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 6px;
  border: 1.5px solid rgba(6, 21, 37, 0.30);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 200ms ease, background 200ms ease;
}
.proposal__form-checkbox input:focus-visible + .proposal__form-checkbox-mark {
  outline: 2px solid var(--lm-champagne-gold);
  outline-offset: 2px;
}
.proposal__form-checkbox input:checked + .proposal__form-checkbox-mark {
  border-color: var(--lm-champagne-gold);
  background: var(--lm-champagne-gold);
}
.proposal__form-checkbox input:checked + .proposal__form-checkbox-mark::after {
  content: '';
  width: 6px;
  height: 11px;
  border: solid #061525;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -2px);
}
.proposal__form-checkbox-label {
  font-size: 15px;
  font-weight: 600;
  color: #061525;
  letter-spacing: 0.01em;
}
.proposal__form-consent {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(6, 21, 37, 0.62);
}
.proposal__form-consent a {
  color: rgba(6, 21, 37, 0.82);
  text-decoration: underline;
  text-decoration-color: rgba(6, 21, 37, 0.3);
  text-underline-offset: 2px;
}
.proposal__form-consent a:hover {
  color: var(--lm-champagne-gold);
  text-decoration-color: var(--lm-champagne-gold);
}

/* Services / About CTA — wrapper for the form sitting below the
   eyebrow + heading + buttons in the dark video CTA sections */
.services-cta__form-wrap {
  width: min(760px, calc(100% - 32px));
  margin: clamp(36px, 5vw, 60px) auto 0;
  text-align: left;
}
@media (max-width: 640px) {
  .services-cta__form-wrap {
    width: calc(100% - 16px);
    margin-top: 32px;
  }
}

/* ============================================================
   ARTICLES — expanding cards (homepage Articles & Insights).
   Six cards in a row; active one expands (5fr), others narrow
   (1fr) with a vertical-rail title. JS toggles `is-active`
   on the card and sets `data-active="<index>"` on the container.
   On mobile the grid stacks vertically and every card opens.
   ============================================================ */
.articles-expanding {
  display: grid;
  gap: 12px;
  width: 100%;
  height: clamp(440px, 50vw, 540px);
  margin-top: clamp(32px, 4vw, 52px);
  grid-template-columns: 5fr 1fr 1fr 1fr 1fr 1fr; /* default: card 0 active */
  transition: grid-template-columns 540ms cubic-bezier(0.4, 0, 0.2, 1);
}
.articles-expanding[data-active="0"] { grid-template-columns: 5fr 1fr 1fr 1fr 1fr 1fr; }
.articles-expanding[data-active="1"] { grid-template-columns: 1fr 5fr 1fr 1fr 1fr 1fr; }
.articles-expanding[data-active="2"] { grid-template-columns: 1fr 1fr 5fr 1fr 1fr 1fr; }
.articles-expanding[data-active="3"] { grid-template-columns: 1fr 1fr 1fr 5fr 1fr 1fr; }
.articles-expanding[data-active="4"] { grid-template-columns: 1fr 1fr 1fr 1fr 5fr 1fr; }
.articles-expanding[data-active="5"] { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 5fr; }

.articles-expanding__card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border-radius: 20px;
  background: #061525;
  color: #f8f5ed;
  text-decoration: none;
  display: block;
  cursor: pointer;
  isolation: isolate;
  box-shadow: 0 22px 60px rgba(2, 11, 22, 0.22);
  outline: none;
}
.articles-expanding__card:focus-visible {
  box-shadow:
    0 22px 60px rgba(2, 11, 22, 0.22),
    0 0 0 2px var(--lm-champagne-gold);
}

.articles-expanding__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
  filter: brightness(0.50) saturate(0.85);
  transition: transform 600ms ease-out, filter 500ms ease-out;
  z-index: 0;
}
.articles-expanding__card.is-active .articles-expanding__img {
  transform: scale(1.02);
  filter: brightness(0.78) saturate(1);
}

.articles-expanding__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(2, 11, 22, 0.10) 0%,
    rgba(2, 11, 22, 0.45) 50%,
    rgba(2, 11, 22, 0.92) 100%);
}

/* Inactive state — small number top + vertical rotated category bottom */
.articles-expanding__inactive {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  opacity: 1;
  transition: opacity 220ms ease-out;
  pointer-events: none;
}
.articles-expanding__card.is-active .articles-expanding__inactive {
  opacity: 0;
}
.articles-expanding__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--lm-champagne-gold);
}
.articles-expanding__rotated-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: rgba(248, 245, 237, 0.78);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Active state — number + category top, title + description + meta bottom */
.articles-expanding__active {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: clamp(22px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 380ms ease-out 120ms;
  pointer-events: none;
}
.articles-expanding__card.is-active .articles-expanding__active {
  opacity: 1;
  pointer-events: auto;
}
.articles-expanding__top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.articles-expanding__num-small {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--lm-champagne-gold);
}
.articles-expanding__category {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(248, 245, 237, 0.78);
}
.articles-expanding__bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
}
.articles-expanding__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #f8f5ed;
  margin: 0;
}
.articles-expanding__desc {
  margin: 0;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.55;
  color: rgba(248, 245, 237, 0.78);
}
.articles-expanding__meta {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(248, 245, 237, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.articles-expanding__time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(248, 245, 237, 0.6);
}
.articles-expanding__cta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lm-champagne-gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 200ms ease;
}
.articles-expanding__card:hover .articles-expanding__cta,
.articles-expanding__card:focus-visible .articles-expanding__cta {
  gap: 12px;
}

/* Tablet / mobile — stack vertically, every card fully open */
@media (max-width: 768px) {
  .articles-expanding,
  .articles-expanding[data-active="0"],
  .articles-expanding[data-active="1"],
  .articles-expanding[data-active="2"],
  .articles-expanding[data-active="3"],
  .articles-expanding[data-active="4"],
  .articles-expanding[data-active="5"] {
    grid-template-columns: 1fr;
    height: auto;
    gap: 14px;
  }
  .articles-expanding__card {
    height: 300px;
    border-radius: 18px;
  }
  .articles-expanding__inactive { display: none; }
  .articles-expanding__active {
    opacity: 1;
    pointer-events: auto;
  }
  .articles-expanding__img {
    transform: scale(1);
    filter: brightness(0.62) saturate(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .articles-expanding,
  .articles-expanding__img,
  .articles-expanding__inactive,
  .articles-expanding__active,
  .articles-expanding__cta { transition: none; }
}

/* ============================================================
   ARTICLES INDEX PAGE — Articles & Insights catalog
   ============================================================ */
.articles-page {
  background: #F3EFE6;
  color: #061525;
}

.articles-page-hero {
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 4vw, 64px) clamp(36px, 4vw, 60px);
}
.articles-page-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(6, 21, 37, 0.7);
  text-decoration: none;
  margin-bottom: clamp(28px, 3.5vw, 44px);
  transition: gap 200ms ease, color 200ms ease;
}
.articles-page-hero__back:hover { gap: 12px; color: #061525; }
.articles-page-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono), system-ui, sans-serif;
  color: #A9842D;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.articles-page-hero__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.038em;
  color: #061525;
  max-width: 1000px;
}
.articles-page-hero__subtitle {
  margin: 22px 0 0;
  max-width: 760px;
  font-size: clamp(16.5px, 1.2vw, 19px);
  line-height: 1.62;
  color: rgba(6, 21, 37, 0.65);
}

/* Filter chips */
.articles-page-filter {
  width: min(1320px, 100%);
  margin: 0 auto clamp(36px, 4vw, 56px);
  padding: 0 clamp(24px, 4vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 12px;
}
/* Forces a tidy 4 + 4 two-row layout on desktop/tablet by breaking the
   line before "Board Education". Hidden on mobile so chips wrap naturally. */
.articles-filter-break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}
@media (max-width: 640px) {
  .articles-filter-break { display: none; }
}
.articles-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(6, 21, 37, 0.18);
  color: rgba(6, 21, 37, 0.72);
  font-family: var(--font-mono), system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.articles-filter-chip:hover {
  color: #061525;
  border-color: rgba(6, 21, 37, 0.4);
}
.articles-filter-chip.is-active {
  background: #061525;
  color: #F2D88F;
  border-color: #061525;
}

/* Card grid */
.articles-page-grid {
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px) clamp(72px, 8vw, 120px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 34px);
}

/* Card */
.articles-page-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: #061525;
  border: 1px solid rgba(6, 21, 37, 0.08);
  box-shadow: 0 18px 50px rgba(2, 11, 22, 0.08);
  transition: transform 320ms ease, box-shadow 320ms ease;
}
.articles-page-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(2, 11, 22, 0.14);
}
.articles-page-card:focus-visible {
  outline: 2px solid #C9A34E;
  outline-offset: 3px;
}
.articles-page-card.is-hidden { display: none; }

.articles-page-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #061525;
}
.articles-page-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  transition: transform 600ms ease;
  display: block;
}
.articles-page-card:hover .articles-page-card__img { transform: scale(1.08); }
.articles-page-card__media-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 11, 22, 0.18) 0%, transparent 35%, transparent 70%, rgba(2, 11, 22, 0.30) 100%);
}
.articles-page-card__num {
  position: absolute;
  top: 16px;
  left: 18px;
  font-family: var(--font-mono), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #F8F5ED;
  text-shadow: 0 1px 8px rgba(2, 11, 22, 0.85);
}

.articles-page-card__body {
  padding: 26px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.articles-page-card__cat {
  font-family: var(--font-mono), system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #A9842D;
}
.articles-page-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #061525;
}
.articles-page-card__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(6, 21, 37, 0.68);
}
.articles-page-card__meta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(6, 21, 37, 0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.articles-page-card__time {
  font-family: var(--font-mono), system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(6, 21, 37, 0.5);
}
.articles-page-card__cta {
  font-family: var(--font-mono), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #A9842D;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 200ms ease, color 200ms ease;
}
.articles-page-card:hover .articles-page-card__cta {
  gap: 12px;
  color: #061525;
}

/* Final CTA section */
.articles-page-cta {
  background: linear-gradient(180deg, #061525 0%, #020b16 100%);
  color: var(--lm-warm-ivory);
  padding: clamp(72px, 8vw, 120px) clamp(24px, 4vw, 64px);
  text-align: center;
}
.articles-page-cta__inner {
  width: min(820px, 100%);
  margin: 0 auto;
}
.articles-page-cta__eyebrow {
  font-family: var(--font-mono), system-ui, sans-serif;
  color: #F2D88F;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: inline-block;
}
.articles-page-cta__h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #F8F5ED;
}
.articles-page-cta__text {
  margin: 22px auto 0;
  max-width: 620px;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.6;
  color: rgba(248, 245, 237, 0.78);
}
.articles-page-cta__row {
  margin-top: clamp(28px, 3.5vw, 44px);
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Responsive */
@media (max-width: 1100px) {
  .articles-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .articles-page-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .articles-page-card { border-radius: 18px; }
  .articles-page-hero { padding-top: clamp(36px, 8vw, 48px); }
}

/* ============================================================
   RESPONSIVE SAFETY LAYER — tablet + mobile adaptation.
   APPENDED at the very end. All rules sit inside @media queries
   so desktop styles (1101px+) remain 100% unchanged.
   Breakpoints:
     ≤1100px = tablet / small laptop
     ≤768px  = mobile
     ≤480px  = small mobile
   ============================================================ */

/* ---------- GLOBAL OVERFLOW + MEDIA SAFETY ---------- */
html, body {
  overflow-x: clip;
  max-width: 100vw;
}
img, video, svg, canvas {
  max-width: 100%;
}
/* Re-allow absolute-positioned media elements (cover layers) to fill */
.proposal__video,
.services-cta__video,
.about-hero__media-video,
.about-quote__img,
.about-founder-card__portrait img,
.about-leadership__portrait-img,
.service-section__media-image,
.services-circular-card__img,
.articles-expanding__img,
.articles-page-card__img,
.about-mission__bg,
.about-areas__map-image,
.article-hero__media img {
  max-width: none;
  width: 100%;
  height: 100%;
}

/* ============================================================
   TABLET (≤1100px)
   ============================================================ */
@media (max-width: 1100px) {
  /* Generic section padding eases inward on tablet */
  .section,
  .about-mission,
  .about-rhythm,
  .about-quote,
  .articles-preview,
  .services-cta,
  .proposal,
  .recommendations,
  .about-hero,
  .about-story,
  .about-values,
  .about-leadership,
  .about-founders,
  .about-serve,
  .about-areas,
  .founder,
  .who-we-serve,
  .ops,
  .trust-strip,
  .services-hero,
  .services-circular-section,
  .service-details-section,
  .services-testimonials-3d {
    padding-left: clamp(20px, 4vw, 48px);
    padding-right: clamp(20px, 4vw, 48px);
  }

  /* 3-column homepage grids → 2 columns */
  .articles-grid,
  .who-we-serve__grid,
  .ops__grid,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  /* Hero side-by-side layouts shouldn't crowd */
  .proposal__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .proposal__pitch { max-width: 720px; }

  /* Header nav: shrink portal pills + nav links */
  .nav-main { gap: 16px; }
  .nav-main .lm-navlink { font-size: 13px; }
  .header-right .portal-pill { padding: 6px 12px; font-size: 11px; }
}

/* ============================================================
   MOBILE (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Section paddings tighten further */
  .section,
  .about-mission,
  .about-rhythm,
  .about-quote,
  .articles-preview,
  .services-cta,
  .proposal,
  .recommendations,
  .about-story,
  .about-values,
  .about-leadership,
  .about-founders,
  .about-serve,
  .about-areas,
  .founder,
  .who-we-serve,
  .ops,
  .services-hero,
  .services-circular-section,
  .service-details-section,
  .services-testimonials-3d {
    padding-top: clamp(48px, 10vw, 72px);
    padding-bottom: clamp(48px, 10vw, 72px);
  }

  /* All multi-column grids → single column */
  .articles-grid,
  .who-we-serve__grid,
  .ops__grid,
  .footer-grid,
  .about-mission__cards,
  .about-rhythm__steps,
  .about-founders__grid,
  .about-values__grid,
  .about-serve__grid,
  .services-cta__row,
  .about-areas__layout,
  .about-quote__layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* Hero h1 safety — make sure nothing overflows */
  .hero-h1 { font-size: clamp(28px, 8vw, 42px); line-height: 1.08; }
  .services-hero__h1 { font-size: clamp(28px, 8vw, 42px); line-height: 1.08; }
  .about-hero__h1 { font-size: clamp(28px, 8vw, 42px); line-height: 1.08; }
  .section__h2 { font-size: clamp(24px, 6.5vw, 36px); }

  /* Hero CTAs stack to full-width column */
  .hero-ctas,
  .services-cta__row,
  .articles-page-cta__row,
  .about-quote__cta,
  .founder__cta-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }
  .hero-ctas a,
  .services-cta__row a,
  .articles-page-cta__row a,
  .founder__cta-row a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Hero column layouts collapse */
  .hero-grid,
  .services-hero__grid,
  .about-hero__layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Card padding shrinks slightly so 1-col cards aren't huge */
  .about-mission-card,
  .articles-page-card__body,
  .about-founder-card__body {
    padding: 22px;
  }

  /* Footer top CTA row stacks */
  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .site-footer__top-cta {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .site-footer__top-cta a {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Footer legal row stacks */
  .site-footer__bottom {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }
  .site-footer__bottom ul {
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 0;
  }

  /* Utility bar — keep address row from overflowing */
  .utility-bar__inner {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    text-align: left;
    padding: 8px 16px;
  }
  .utility-bar__left {
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .utility-bar__addr { display: none; } /* address eats space on mobile */
  .utility-bar__right { font-size: 11px; }

  /* Trust marquee — speed up so it doesn't feel slow on narrow screens */
  .trust-marquee__row { animation-duration: 40s; }

  /* Form: full-width inputs + button (already mostly handled, defensive) */
  .proposal__form { padding: 28px 22px; border-radius: 16px; }
  .proposal__form-grid { grid-template-columns: 1fr; gap: 14px; }
  .field-input, .field-textarea, .field-select { font-size: 16px; } /* prevents iOS zoom */

  /* Article body sidebar drops below content (existing rule reinforced) */
  .article-body__layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* Buttons keep tap-target size */
  .lm-btn,
  .lm-btn--lg { min-height: 48px; padding-left: 22px; padding-right: 22px; }
}

/* ============================================================
   SMALL MOBILE (≤480px)
   ============================================================ */
@media (max-width: 480px) {
  /* Tighter padding to claw back precious width */
  .section,
  .about-mission,
  .about-rhythm,
  .about-quote,
  .articles-preview,
  .services-cta,
  .proposal,
  .recommendations,
  .about-story,
  .about-values,
  .about-leadership,
  .about-founders,
  .about-serve,
  .about-areas,
  .founder,
  .who-we-serve,
  .services-hero,
  .services-circular-section,
  .service-details-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Header tightens */
  .site-header__inner { padding: 10px 16px; }
  .brand-lockup img { width: 38px; height: 38px; }
  .brand-lockup__name { font-size: 13px; letter-spacing: 0.12em; }
  .brand-lockup__tagline { font-size: 9px; letter-spacing: 0.18em; }
  .header-right .portal-pill { display: none; } /* only burger + brand on small mobile */

  /* Card content slightly tighter */
  .about-mission-card,
  .articles-page-card__body,
  .about-founder-card__body { padding: 20px 18px; }

  /* Eyebrow + small mono labels get one notch smaller */
  .eyebrow-rule { font-size: 10px; letter-spacing: 0.18em; }

  /* h1/h2 safety bottom floor — never below 26px */
  .hero-h1,
  .services-hero__h1,
  .about-hero__h1,
  .article-hero__h1,
  .articles-page-hero__h1 { font-size: clamp(26px, 8.5vw, 36px); }

  /* Article body typography stays comfortable */
  .article-content p { font-size: 16px; }
  .article-content h2 { font-size: clamp(24px, 7vw, 30px); }

  /* Footer brand legal lockup tightens */
  .footer-brand__info { font-size: 13px; }
  .footer-col h3 { font-size: 13px; }
  .footer-col ul { font-size: 13px; }

  /* Floating widget panel size + position */
  .floating-widget__panel { width: calc(100vw - 24px); right: 12px; bottom: 76px; }
  .floating-widget__toggle { right: 16px; bottom: 16px; }
}

/* ============================================================
   REDUCED MOTION SUPPORT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   MOBILE FIXES — header polish, founder row, trust list,
   portal pill visibility. Strictly tablet/mobile only.
   ============================================================ */

@media (max-width: 1100px) {
  /* Sticky header — solid backdrop so content doesn't show through */
  .site-header {
    backdrop-filter: blur(14px) saturate(1.05);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
    background: rgba(248, 245, 237, 0.92);
    border-bottom: 1px solid rgba(6, 21, 37, 0.08);
  }
  .site-header.is-scrolled {
    background: rgba(248, 245, 237, 0.96);
    box-shadow: 0 8px 28px rgba(2, 11, 22, 0.08);
  }
}

@media (max-width: 768px) {
  /* Header inner: tighter horizontal space, single row */
  .site-header__inner {
    padding: 10px 16px;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
  }
  /* Hide the main nav on mobile — burger menu drives navigation */
  .nav-main { display: none; }

  /* Brand lockup tightens but stays clearly visible */
  .brand-lockup { gap: 8px; flex: 0 1 auto; min-width: 0; }
  .brand-lockup img { width: 38px; height: 38px; flex: 0 0 auto; }
  .brand-lockup__name { font-size: 13px; letter-spacing: 0.10em; }
  .brand-lockup__tagline { font-size: 9.5px; letter-spacing: 0.18em; margin-top: 2px; }

  /* Right side: pills + burger, no wrap, compact pills */
  .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  /* IMPORTANT: pills MUST be visible — override any earlier hide rule */
  .header-right .portal-pill,
  .site-header .portal-pill {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1;
  }
  .nav-toggle { flex: 0 0 auto; }
}

@media (max-width: 480px) {
  /* Even tighter on small phones, but pills STAY VISIBLE */
  .site-header__inner { padding: 9px 12px; gap: 6px; }
  .brand-lockup__txt { display: none; } /* only logo on smallest screens — saves room for pills */
  .brand-lockup img { width: 36px; height: 36px; }

  .header-right { gap: 6px; }
  .header-right .portal-pill,
  .site-header .portal-pill {
    display: inline-flex !important;
    padding: 6px 9px;
    font-size: 9.5px;
    letter-spacing: 0.04em;
  }
}

/* ============================================================
   HERO MOBILE — hide blue trust pills, force founder row
   horizontal, tighten gap between founder row and 25+ stat
   ============================================================ */
@media (max-width: 768px) {
  /* Hide the "blue card" trust list under the hero copy on mobile */
  .hero-trust-list { display: none !important; }

  /* Founder card layout: keep Elena + Semyon side by side, tighter */
  .hero-founder-card {
    padding: 22px 18px;
    gap: 14px;
  }
  .hero-founder-quote {
    font-size: 14.5px;
    line-height: 1.45;
    margin-bottom: 12px;
  }
  .hero-founder-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 0;
  }
  .hero-founder-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }
  .hero-founder-item img {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
  }
  .hero-founder-item > div { min-width: 0; }
  .hero-founder-name {
    font-size: 12.5px;
    line-height: 1.15;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hero-founder-role {
    font-size: 10px;
    letter-spacing: 0.10em;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 25+ stat sits CLOSE to the founder row — no big gap */
  .hero-founder-stat {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(6, 21, 37, 0.10);
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .hero-founder-stat__num {
    font-size: 36px;
    line-height: 1;
    margin: 0;
    flex: 0 0 auto;
  }
  .hero-founder-stat__lbl {
    font-size: 11.5px;
    line-height: 1.4;
    margin: 0;
  }
  .hero-founder-stat__lbl br { display: none; }
}

@media (max-width: 480px) {
  /* On very narrow phones, allow Elena/Semyon to wrap each into their own row
     ONLY if names would truncate awkwardly. Keep 2-column when it fits. */
  .hero-founder-row { gap: 8px; }
  .hero-founder-item img { width: 38px; height: 38px; }
  .hero-founder-name { font-size: 12px; }
  .hero-founder-role { font-size: 9.5px; }
  .hero-founder-stat__num { font-size: 32px; }
  .hero-founder-stat__lbl { font-size: 11px; }
}

/* Override the legacy @media (max-width: 640px) block that:
   - hides brand text (we want it shown 480-768)
   - hides portal pills (we want them visible)
   - stacks founder row vertically (we want it horizontal)
   The new rules use higher specificity / !important to take precedence. */
@media (min-width: 481px) and (max-width: 768px) {
  .site-header .brand-lockup__txt { display: flex !important; flex-direction: column; }
}
@media (max-width: 768px) {
  .hero-founder-row {
    flex-direction: row !important;
    display: grid !important;
  }
}

/* ============================================================
   MOBILE-ONLY REFINEMENTS (≤768px) — does NOT affect tablet/desktop
   1. Header: dark default like desktop, white when scrolled
   2. Hero CTAs moved up right after h1
   3. Founder photos much larger (~3× original)
   4. Hide hero glass cards on first screen
   ============================================================ */

/* -------- 1. Mobile header polish -------- */
@media (max-width: 768px) {
  /* Default state: transparent so the dark hero shows through,
     matching desktop look. Cancels the cream backdrop I added earlier
     in the broader tablet rule. */
  .site-header {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* Utility bar above header (no overlap when scrolling) */
  .utility-bar { position: relative; z-index: 60; }
  .site-header { z-index: 55; }

  /* Scrolled state: white with dark elements */
  .site-header.is-scrolled,
  .site-header.scrolled {
    background: rgba(255, 255, 255, 0.97) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
    box-shadow: 0 8px 26px rgba(2, 11, 22, 0.10) !important;
    border-bottom: 1px solid rgba(6, 21, 37, 0.06) !important;
  }
  .site-header.is-scrolled .brand-lockup__name,
  .site-header.scrolled .brand-lockup__name { color: #061525 !important; }
  .site-header.is-scrolled .brand-lockup__tagline,
  .site-header.scrolled .brand-lockup__tagline { color: rgba(6, 21, 37, 0.62) !important; }
  .site-header.is-scrolled .portal-pill,
  .site-header.scrolled .portal-pill {
    background: #061525 !important;
    color: #F8F5ED !important;
    border-color: #061525 !important;
  }
  .site-header.is-scrolled .nav-toggle span,
  .site-header.scrolled .nav-toggle span { background: #061525 !important; }

  /* Brand logo cleanup — remove any inherited filter/shadow smear */
  .brand-lockup img {
    filter: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* -------- 2. Hero CTAs right after h1 on mobile -------- */
@media (max-width: 768px) {
  /* Make hero-bodycol a flex column so we can reorder its children */
  .hero-bodycol {
    display: flex !important;
    flex-direction: column !important;
  }
  /* CTAs jump above the lead paragraph (so they sit right under the h1 +
     "with a personal approach" subtitle which lives in hero-h1col above) */
  .hero-bodycol > .hero-ctas {
    order: -1 !important;
    margin-top: 4px !important;
    margin-bottom: 22px !important;
  }
}

/* -------- 3. Bigger founder photos in hero card -------- */
@media (max-width: 768px) {
  .hero-founder-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .hero-founder-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }
  .hero-founder-item img {
    width: clamp(104px, 32vw, 136px) !important;
    height: clamp(104px, 32vw, 136px) !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex: 0 0 auto !important;
  }
  .hero-founder-name {
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
  }
  .hero-founder-role {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.10em !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
  }
  /* 25+ stat sits comfortably under the larger photos */
  .hero-founder-stat {
    margin-top: 18px !important;
    padding-top: 18px !important;
  }
}

/* -------- 4. Hide hero glass cards on mobile -------- */
@media (max-width: 768px) {
  .hero-cards { display: none !important; }
}

/* ============================================================
   MOBILE HEADER REWORK — second pass
   - Default the new .header-pills wrapper to display:contents so
     desktop/tablet layout sees no change (pills behave as direct
     children of .header-right as before).
   - At ≤768px the wrapper becomes a real flex group and the
     header lays out as: [logo left] [pills center] [burger right].
   - Logo dimensions explicitly locked so scroll state can't
     distort or scale them.
   - Two-state colours: dark navy before scroll, light cream
     with navy pills after scroll.
   ============================================================ */

/* === Default: wrapper disappears from layout (desktop/tablet untouched) === */
.header-pills { display: contents; }

@media (max-width: 768px) {
  /* -------- Header structure -------- */
  .site-header {
    background: #061525 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    position: sticky;
    top: 0;
    z-index: 55;
  }
  .utility-bar { position: relative; z-index: 60; }

  .site-header__inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px !important;
    height: auto !important;
  }

  /* Logo column (left) */
  .brand-lockup {
    grid-column: 1;
    justify-self: start;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
  }

  /* Hide desktop nav (burger drives mobile navigation) */
  .nav-main { display: none !important; }

  /* Header-right becomes transparent so pills + burger participate in
     the parent grid directly */
  .header-right {
    display: contents !important;
  }

  /* Pill wrapper becomes a real flex group at center column */
  .site-header .header-pills {
    display: flex !important;
    align-items: center;
    gap: 8px;
    grid-column: 2;
    justify-self: center;
    flex-wrap: nowrap;
  }

  /* Burger sits in right column */
  .site-header .nav-toggle {
    grid-column: 3;
    justify-self: end;
    flex: 0 0 auto;
  }

  /* -------- Logo: locked size so scroll can't distort it -------- */
  .site-header .brand-lockup img,
  .site-header.is-scrolled .brand-lockup img,
  .site-header.scrolled .brand-lockup img {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  .site-header .brand-lockup__txt {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
  }
  .site-header .brand-lockup__name { font-size: 13px; letter-spacing: 0.10em; }
  .site-header .brand-lockup__tagline { font-size: 9.5px; letter-spacing: 0.18em; margin-top: 2px; }

  /* -------- DEFAULT (before scroll): navy bar + gold pills -------- */
  .site-header:not(.is-scrolled):not(.scrolled) {
    background: #061525 !important;
  }
  .site-header:not(.is-scrolled):not(.scrolled) .brand-lockup__name {
    color: #F8F5ED !important;
  }
  .site-header:not(.is-scrolled):not(.scrolled) .brand-lockup__tagline {
    color: rgba(248, 245, 237, 0.65) !important;
  }
  .site-header:not(.is-scrolled):not(.scrolled) .portal-pill {
    background: linear-gradient(135deg, #c9a24a 0%, #e8cf7a 100%) !important;
    color: #061525 !important;
    border: 1px solid rgba(248, 245, 237, 0.18) !important;
    font-weight: 700;
    padding: 7px 12px;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(2, 11, 22, 0.25);
  }
  .site-header:not(.is-scrolled):not(.scrolled) .nav-toggle span {
    background: #c9a24a !important;
  }

  /* -------- SCROLLED: cream bar + navy-gradient pills -------- */
  .site-header.is-scrolled,
  .site-header.scrolled {
    background: rgba(247, 244, 236, 0.96) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.10) !important;
    backdrop-filter: blur(18px) saturate(1.10) !important;
    box-shadow: 0 8px 26px rgba(2, 11, 22, 0.10) !important;
    border-bottom: 1px solid rgba(6, 21, 37, 0.08) !important;
  }
  .site-header.is-scrolled .brand-lockup__name,
  .site-header.scrolled .brand-lockup__name { color: #061525 !important; }
  .site-header.is-scrolled .brand-lockup__tagline,
  .site-header.scrolled .brand-lockup__tagline { color: rgba(6, 21, 37, 0.62) !important; }
  .site-header.is-scrolled .portal-pill,
  .site-header.scrolled .portal-pill {
    background: linear-gradient(135deg, #061525 0%, #0b2947 55%, #164d75 100%) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    font-weight: 700;
    padding: 7px 12px;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(2, 11, 22, 0.18);
  }
  .site-header.is-scrolled .nav-toggle span,
  .site-header.scrolled .nav-toggle span { background: #061525 !important; }
}

/* Very small phones: hide tagline so pills always fit */
@media (max-width: 480px) {
  .site-header .brand-lockup img,
  .site-header.is-scrolled .brand-lockup img,
  .site-header.scrolled .brand-lockup img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
  }
  .site-header .brand-lockup__txt { display: none !important; }
  .site-header:not(.is-scrolled):not(.scrolled) .portal-pill,
  .site-header.is-scrolled .portal-pill,
  .site-header.scrolled .portal-pill {
    padding: 6px 10px;
    font-size: 10px;
    letter-spacing: 0.05em;
  }
  .site-header .header-pills { gap: 6px; }
  .site-header__inner { padding: 9px 12px !important; gap: 8px; }
}

/* ============================================================
   MOBILE-ONLY FIXES — third pass
   1. "All Services →" button moves below the service cards
   2. Disable service card reveal animations on mobile
   3. "View All Articles →" button moves below the article cards
   4. Footer logo dimension lock (no stretch)
   ============================================================ */

/* -------- 1. Services preview — button below cards on mobile -------- */
@media (max-width: 768px) {
  .services .container {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Wrapper of (text + button) becomes transparent so each becomes a
     direct flex child of .container with independently reorderable order */
  .services .services__head-row {
    display: contents !important;
  }
  /* Text block first */
  .services .services__head-row > div { order: 1; }
  /* Cards grid second */
  .services .services__grid { order: 2; }
  /* "All Services →" button below cards, centered, with breathing room */
  .services .services__head-row > .lm-btn,
  .services .services__head-row > a.lm-btn {
    order: 3 !important;
    align-self: center !important;
    margin-top: clamp(24px, 5vw, 36px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* -------- 2. Disable reveal animation on service cards (mobile only) -------- */
@media (max-width: 768px) {
  .services__grid .home-service-card,
  .services__grid .ethereal-service-card,
  .services__grid .lm-fx-up,
  .services__grid .lm-fx-up.is-visible,
  .services__grid .lm-fx-fade,
  .services__grid .lm-fx-fade.is-visible,
  .services__grid .lm-fx-zoom,
  .services__grid .lm-fx-zoom.is-visible,
  .services__grid .lm-fx-stagger > *,
  .services__grid .lm-fx-stagger.is-visible > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
  }
}

/* -------- 3. Articles preview — button below cards on mobile -------- */
@media (max-width: 768px) {
  .articles-preview .container {
    display: flex !important;
    flex-direction: column !important;
  }
  .articles-preview .articles-preview__head-row {
    display: contents !important;
  }
  .articles-preview .articles-preview__head-row > div { order: 1; }
  .articles-preview .articles-expanding { order: 2; }
  .articles-preview .articles-preview__head-row > .lm-btn,
  .articles-preview .articles-preview__head-row > a.lm-btn {
    order: 3 !important;
    align-self: center !important;
    margin-top: clamp(24px, 5vw, 36px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* -------- 4. Footer logo: lock dimensions, no stretch -------- */
@media (max-width: 768px) {
  .site-footer .footer-brand .brand-lockup img,
  .site-footer .footer-brand img {
    width: auto !important;
    height: 64px !important;
    max-width: 130px !important;
    max-height: 64px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    display: block;
  }
  /* The brand-lockup container in the footer can shrink-wrap the logo */
  .site-footer .footer-brand .brand-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .site-footer .footer-brand .brand-lockup img,
  .site-footer .footer-brand img {
    height: 56px !important;
    max-width: 110px !important;
    max-height: 56px !important;
  }
}

/* ============================================================
   MOBILE-ONLY FIXES — fourth pass (rhythm + animation kill)
   1. Bigger gap between subtitle and first service card
   2. Kill all reveal + internal animations on service cards
   3. Bigger, consistent vertical rhythm between sections
   ============================================================ */

/* -------- 1. Gap between Core Services subtitle and first card -------- */
@media (max-width: 768px) {
  .services .services__head-row > div {
    margin-bottom: clamp(48px, 11vw, 64px) !important;
  }
  /* Same treatment for Articles & Insights for visual consistency */
  .articles-preview .articles-preview__head-row > div {
    margin-bottom: clamp(48px, 11vw, 64px) !important;
  }
}

/* -------- 2. Kill ALL animations on service cards on mobile -------- */
@media (max-width: 768px) {
  .services__grid,
  .services__grid > *,
  .services__grid > *::before,
  .services__grid > *::after,
  .services__grid .home-service-card,
  .services__grid .home-service-card.lm-fx-up,
  .services__grid .home-service-card.lm-fx-up.is-visible,
  .services__grid .home-service-card.lm-fx-fade,
  .services__grid .home-service-card.lm-fx-fade.is-visible,
  .services__grid .home-service-card.lm-fx-zoom,
  .services__grid .home-service-card.lm-fx-zoom.is-visible,
  .services__grid .ethereal-service-card,
  .services__grid .ethereal-service-card__bg,
  .services__grid .ethereal-service-card__shader,
  .services__grid .ethereal-service-card__shader::before,
  .services__grid .ethereal-service-card__shader::after,
  .services__grid canvas {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
    will-change: auto !important;
    animation-play-state: paused !important;
  }
  /* And hover-state animations stay off too — no jitter on tap */
  .services__grid .home-service-card:hover,
  .services__grid .home-service-card:active,
  .services__grid .home-service-card:focus,
  .services__grid .home-service-card.is-hover {
    transform: none !important;
    transition: none !important;
  }
}

/* -------- 3. Bigger, consistent section padding on mobile -------- */
@media (max-width: 768px) {
  .section,
  .services,
  .articles-preview,
  .who-we-serve,
  .ops,
  .founder,
  .recommendations,
  .trust-strip,
  .proposal,
  .about-hero,
  .about-story,
  .about-mission,
  .about-values,
  .about-leadership,
  .about-founders,
  .about-rhythm,
  .about-serve,
  .about-areas,
  .about-quote,
  .services-hero,
  .services-circular-section,
  .service-details-section,
  .services-testimonials-3d,
  .services-cta {
    padding-top: clamp(72px, 14vw, 96px) !important;
    padding-bottom: clamp(72px, 14vw, 96px) !important;
  }

  /* Between section heading group and content: ~40-56px */
  .section__head,
  .section__head-row,
  .about-mission__head,
  .about-founders__head,
  .about-areas__content,
  .about-rhythm__head {
    margin-bottom: clamp(40px, 9vw, 56px) !important;
  }

  /* Card-to-card / grid-item gap */
  .services__grid {
    gap: clamp(28px, 6vw, 36px) !important;
  }
  .articles-expanding {
    gap: clamp(14px, 3vw, 18px) !important;
  }
  .about-mission__cards {
    gap: clamp(20px, 4vw, 28px) !important;
  }
}

/* ============================================================
   MOBILE-ONLY — 3D Services Carousel re-enabled
   Overrides the ≤980px grid-fallback at mobile widths (≤768px).
   Tablet (769-980) keeps the grid fallback unchanged.
   ============================================================ */
@media (max-width: 768px) {
  .services-circular-gallery {
    perspective: 1000px !important;
    width: 100%;
  }
  .services-circular-gallery__stage {
    height: clamp(380px, 100vw, 460px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .services-circular-gallery__ring {
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    max-width: none !important;
    display: block !important;
    grid-template-columns: none !important;
    transform-style: preserve-3d !important;
  }
  .services-circular-card {
    --card-w: clamp(220px, 62vw, 270px);
    --card-h: clamp(300px, 86vw, 380px);
    position: absolute !important;
    top: calc(var(--card-h) / -2) !important;
    left: calc(var(--card-w) / -2) !important;
    width: var(--card-w) !important;
    height: var(--card-h) !important;
    aspect-ratio: auto !important;
    border-radius: 22px !important;
  }
  /* Tighter inner padding so text fits */
  .services-circular-card__content { padding: 18px !important; }
  .services-circular-card h3 { font-size: clamp(18px, 4.6vw, 22px) !important; line-height: 1.1; }
  .services-circular-card p { font-size: 12.5px !important; line-height: 1.45; }
  .services-circular-card__index { font-size: 12px !important; margin-bottom: 8px !important; }
  .services-circular-card__cta {
    min-height: 34px !important;
    padding: 0 16px !important;
    font-size: 10px !important;
  }
}

/* ============================================================
   MOBILE-ONLY — Testimonials 3D simplified
   Removes the 3D tilt + multi-column marquee on mobile,
   shows a single-column readable card stack.
   ============================================================ */
@media (max-width: 768px) {
  .services-testimonials-3d { padding: clamp(64px, 12vw, 88px) 0 !important; }
  .services-testimonials-3d__header {
    width: min(560px, calc(100% - 32px)) !important;
    margin: 0 auto clamp(32px, 6vw, 48px) !important;
  }
  .services-testimonials-3d__header h2 {
    font-size: clamp(30px, 8.5vw, 42px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.025em !important;
  }
  .services-testimonials-3d__header p {
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.55 !important;
  }
  /* Flatten the 3D stage — single column scroll */
  .services-testimonials-3d__stage,
  .testimonials-3d-stage,
  .testimonials-3d__stage {
    perspective: none !important;
    transform: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 16px !important;
  }
  /* Replace multi-column 3D layout with a single column */
  .testimonials-3d-cols,
  .testimonials-3d__cols,
  .services-testimonials-3d__cols {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    transform: none !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    perspective: none !important;
  }
  /* Hide the duplicated halves used for marquee loop — show only first column,
     all other cols are duplicates that we don't need on mobile */
  .testimonials-3d-col,
  .testimonials-3d__col,
  .services-testimonials-3d__col {
    transform: none !important;
    animation: none !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .testimonials-3d-col:nth-child(n+2),
  .testimonials-3d__col:nth-child(n+2),
  .services-testimonials-3d__col:nth-child(n+2) {
    display: none !important;
  }
  /* Inside the first column, hide duplicated cards (used for marquee loop) */
  .testimonials-3d-col > .testimonial-3d-card:nth-child(n+5),
  .services-testimonials-3d__col > .testimonial-3d-card:nth-child(n+5) {
    display: none !important;
  }
  /* Card itself — readable, squarer */
  .testimonial-3d-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 22px 20px !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 18px 40px rgba(2, 11, 22, 0.08) !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .testimonial-3d-card__text {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    color: rgba(6, 21, 37, 0.78) !important;
  }
  .testimonial-3d-card__name { font-size: 13.5px !important; }
  .testimonial-3d-card__role { font-size: 11.5px !important; }
  .testimonial-3d-card__category { font-size: 10.5px !important; letter-spacing: 0.18em; }
  .testimonial-3d-card__avatar { width: 38px !important; height: 38px !important; font-size: 12.5px !important; }

  /* Edge fade overlays — disable on mobile (no horizontal marquee) */
  .testimonials-3d-fade,
  .testimonials-3d__fade { display: none !important; }
}

/* ============================================================
   MOBILE-ONLY — Services page section rhythm parity with Home
   Reuses the same rhythm values applied earlier; just lists
   Services-page sections so they get the bigger padding too.
   ============================================================ */
@media (max-width: 768px) {
  .services-hero,
  .services-circular-section,
  .service-details-section,
  .services-testimonials-3d,
  .services-cta {
    padding-top: clamp(72px, 14vw, 96px) !important;
    padding-bottom: clamp(72px, 14vw, 96px) !important;
  }
}

/* ============================================================
   MOBILE 3D CAROUSEL — refined geometry
   Overrides the previous mobile values so cards no longer overlap.
   - Smaller cards (180-210px) + larger radius (260-290px) = 3 clean
     visible cards: active center + 2 partial side cards.
   - Stronger perspective (1200) keeps the depth without warping.
   - Inner content tightened so an active 180-210px card still
     reads as readable, premium and clean.
   ============================================================ */
@media (max-width: 768px) {
  .services-circular-gallery {
    perspective: 1200px !important;
  }
  .services-circular-gallery__stage {
    height: clamp(360px, 95vw, 440px) !important;
  }
  .services-circular-card {
    --card-w: clamp(180px, 52vw, 210px) !important;
    --card-h: clamp(260px, 72vw, 300px) !important;
    border-radius: 22px !important;
  }
  /* Side cards: cap the blur so non-active cards stay clean.
     The JS writes inline `filter: blur(Xpx) brightness(Y)` per frame.
     We override to a softer max so the side cards never smear. */
  .services-circular-card[style*="blur("] {
    /* If the inline filter applies more than 0.8px blur, the cap below
       caches in via second filter declaration. CSS allows only one filter
       value, so instead we shrink the visible non-active blur using
       backdrop transparency. Use mask to fade rather than blur on mobile. */
  }
  /* Inner content tightened for 180-210px width */
  .services-circular-card__content {
    padding: 16px !important;
  }
  .services-circular-card h3 {
    font-size: clamp(15px, 4.2vw, 18px) !important;
    line-height: 1.12 !important;
    margin: 0 0 6px !important;
  }
  .services-circular-card p {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    margin: 0 0 12px !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
  .services-circular-card__index {
    font-size: 11px !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.18em;
  }
  .services-circular-card__cta {
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.12em !important;
  }
  /* Keep the section frame from getting a horizontal scrollbar */
  .services-circular-section { overflow: hidden !important; }
}

/* ============================================================
   ABOUT PAGE — MOBILE-ONLY REFINEMENTS
   1. "FOUNDER · LUXURY MANAGEMENT" label becomes a clean dark
      pill chip so the gold text reads cleanly over the light
      suit in the photo (no more smeared text-shadow look).
   2. Circular rotating text around the Elena + Semyon portraits
      bumped slightly so the text completes the full circle
      instead of looking cut off / unfinished.
   ============================================================ */

/* -------- 1. About Quote founder photo label — premium pill chip -------- */
@media (max-width: 768px) {
  .about-quote__media-label {
    /* Re-style the overlaid label as a small dark pill so it
       reads clearly regardless of the photo content underneath */
    background: rgba(6, 21, 37, 0.82) !important;
    backdrop-filter: blur(8px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
    border: 1px solid rgba(248, 245, 237, 0.12) !important;
    padding: 7px 13px !important;
    border-radius: 999px !important;
    left: 16px !important;
    bottom: 16px !important;
    /* The text-shadow that was creating the "dirty" smear is no
       longer needed — the dark pill backdrop owns the contrast */
    text-shadow: none !important;
    font-size: 10.5px !important;
    letter-spacing: 0.18em !important;
    box-shadow: 0 8px 20px rgba(2, 11, 22, 0.30);
  }
}

/* -------- 2. Founder portraits — circular rotating text fills the ring -------- */
@media (max-width: 768px) {
  /* Wrap a touch larger so the text isn't crammed at small widths */
  .about-founder-card__portrait-wrap {
    width: clamp(260px, 68vw, 300px) !important;
  }
  /* Bumped font + letter-spacing so the text spans the full circumference
     instead of ending early and looking "cut off". With 90-char content
     and a 150-radius path (~942 SVG-unit circumference), letter-spacing
     0.40em at 11px stretches each character to ~10.5 units → fills the
     ring cleanly. */
  .about-founder-card__ring-text {
    font-size: 11px !important;
    letter-spacing: 0.40em !important;
    font-weight: 700 !important;
  }
}

/* Very small phones — slightly tighter sizing so the text still completes */
@media (max-width: 480px) {
  .about-founder-card__portrait-wrap {
    width: clamp(240px, 70vw, 280px) !important;
  }
  .about-founder-card__ring-text {
    font-size: 10.5px !important;
    letter-spacing: 0.36em !important;
  }
}

/* ============================================================
   MOBILE HAMBURGER MENU — full-screen overlay, mobile only
   Built dynamically by initMobileNav() in script.js.
   ============================================================ */
.lm-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(6, 21, 37, 0.0);
  visibility: hidden;
  pointer-events: none;
  transition: background 280ms ease, visibility 0s linear 280ms;
}
.lm-mobile-menu.is-open {
  background: rgba(6, 21, 37, 0.92);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  visibility: visible;
  pointer-events: auto;
  transition: background 280ms ease, visibility 0s linear 0s;
}
.lm-mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(165deg, #061525 0%, #0a1f3a 100%);
  border-left: 1px solid rgba(201, 162, 74, 0.18);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
  padding: 28px 26px 32px;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 340ms cubic-bezier(0.32, 0.72, 0.24, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.lm-mobile-menu.is-open .lm-mobile-menu__panel {
  transform: translateX(0);
}

.lm-mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(247, 243, 232, 0.10);
  margin-bottom: 26px;
}
.lm-mobile-menu__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--lm-warm-ivory);
}
.lm-mobile-menu__close {
  position: relative;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(247, 243, 232, 0.20);
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.lm-mobile-menu__close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--lm-champagne-gold);
  transform-origin: center;
}
.lm-mobile-menu__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.lm-mobile-menu__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
.lm-mobile-menu__close:hover { border-color: var(--lm-champagne-gold); }

.lm-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 28px;
}
.lm-mobile-menu__link {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--lm-warm-ivory);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(247, 243, 232, 0.06);
  transition: color 200ms ease, padding-left 240ms ease;
}
.lm-mobile-menu__link:last-child { border-bottom: none; }
.lm-mobile-menu__link:hover,
.lm-mobile-menu__link:active {
  color: var(--lm-champagne-gold);
  padding-left: 8px;
}
.lm-mobile-menu__link.is-current {
  color: var(--lm-champagne-gold);
}
.lm-mobile-menu__link.is-current::before {
  content: '·';
  margin-right: 8px;
  color: var(--lm-champagne-gold);
}

.lm-mobile-menu__pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 26px;
}
.lm-mobile-menu__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #c9a24a 0%, #e8cf7a 100%);
  color: #061525;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.lm-mobile-menu__pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(201, 162, 74, 0.32);
}

.lm-mobile-menu__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid rgba(247, 243, 232, 0.10);
}
.lm-mobile-menu__contact {
  color: rgba(247, 243, 232, 0.80);
  font-size: 13.5px;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.lm-mobile-menu__contact:hover { color: var(--lm-champagne-gold); }
.lm-mobile-menu__area {
  color: rgba(201, 162, 74, 0.85);
  font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* Hamburger button visual feedback when active (transforms to X) */
.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}
.nav-toggle span {
  transition: transform 240ms ease, opacity 200ms ease;
  transform-origin: center;
}

/* Hide overlay above mobile breakpoint — safety net */
@media (min-width: 769px) {
  .lm-mobile-menu { display: none !important; }
}

@media (max-width: 480px) {
  .lm-mobile-menu__panel { padding: 22px 20px 26px; }
  .lm-mobile-menu__link { font-size: 23px; padding: 12px 0; }
  .lm-mobile-menu__brand { font-size: 16px; }
}

/* Offset anchored sections below the sticky header on in-page scroll */
#contact,
#who-we-serve,
#proposal {
  scroll-margin-top: 120px;
}

/* ============================================================
   SHARED MODAL HELPERS
   Request-a-Proposal is now an inline page section again (no modal).
   These two rules remain because the Book-a-Consultation modal still
   uses them — the entrance animation and the neutralized form card.
   ============================================================ */
@keyframes proposal-modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* The form inside a modal is no longer its own card — the dialog is. */
.proposal__form--modal {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

/* ============================================================
   BOOK-A-CONSULTATION MODAL
   A separate pop-up from the Request-a-Proposal modal, sharing
   the same premium card language but its own short form.
   ============================================================ */
.consultation-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.consultation-modal.is-open { display: flex; }

.consultation-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 16, 30, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.consultation-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 40px 100px -28px rgba(0,0,0,0.5), 0 16px 40px -16px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: proposal-modal-in 360ms var(--ease-out, cubic-bezier(0.22,0.61,0.36,1));
}

.consultation-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--lm-stone-deep);
  color: var(--lm-authority-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
}
.consultation-modal__close:hover {
  background: var(--lm-champagne-gold);
  border-color: var(--lm-champagne-gold);
  transform: scale(1.05);
}
.consultation-modal__close:focus-visible {
  outline: 2px solid var(--lm-champagne-gold);
  outline-offset: 3px;
}

.consultation-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 44px 40px 38px;
}

.consultation-modal__intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-fg-2);
  margin: -10px 0 24px;
}

/* Lock background scroll while the consultation modal is open */
body.consultation-modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .consultation-modal { padding: 16px; align-items: flex-start; }
  .consultation-modal__dialog { width: calc(100% - 32px); max-height: 92vh; margin: 2vh auto 0; }
  .consultation-modal__body { padding: 38px 20px 26px; }
  .consultation-modal__close { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .consultation-modal__dialog { animation: none; }
}

/* ============================================================
   REQUEST-A-PROPOSAL MODAL
   A compact pop-up version of the inline footer/CTA form (injected
   by script.js). The inline form is untouched; this is a separate,
   tighter layout sized to fit one screen. Reuses .field-* and
   .proposal__form-grid; .proposal__form--modal neutralizes the card.
   ============================================================ */
.proposal-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 24px;
}
.proposal-modal.is-open { display: flex; }

.proposal-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 16, 30, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.proposal-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  max-height: 90vh;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 40px 100px -28px rgba(0,0,0,0.5), 0 16px 40px -16px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: proposal-modal-in 360ms var(--ease-out, cubic-bezier(0.22,0.61,0.36,1));
}

.proposal-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--lm-stone-deep);
  color: var(--lm-authority-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
}
.proposal-modal__close:hover {
  background: var(--lm-champagne-gold);
  border-color: var(--lm-champagne-gold);
  transform: scale(1.05);
}
.proposal-modal__close:focus-visible {
  outline: 2px solid var(--lm-champagne-gold);
  outline-offset: 3px;
}

.proposal-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 38px 44px 34px;
}

/* Compact sizing so the 9-field form fits one screen */
.proposal-modal .proposal__form-head { margin-bottom: 18px; }
.proposal-modal .proposal__form-grid { gap: 12px 20px; }
.proposal-modal .field-input { padding: 11px 14px; }
.proposal-modal .field-textarea { min-height: 96px; }
.proposal-modal .proposal__form-cta { margin-top: 20px; }

/* Lock background scroll while the modal is open */
body.proposal-modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .proposal-modal { padding: 0; align-items: flex-start; }
  .proposal-modal__dialog { width: calc(100% - 28px); max-height: 90vh; margin: 2vh auto; }
  .proposal-modal__body { padding: 36px 18px 24px; }
  .proposal-modal__close { top: 12px; right: 12px; }
  .proposal-modal .field-input { padding: 13px 14px; }   /* comfortable ~48px touch target */
  .proposal-modal .proposal__form-grid { gap: 10px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .proposal-modal__dialog { animation: none; }
}

/* ============================================================
   COOKIE CONSENT — banner (z 3000) + Advanced Settings modal (z 3100)
   Injected by script.js on first visit. Independent of the proposal /
   consultation modals. Premium dark-navy banner; light card modal.
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  gap: 28px;
  background: #0b1b2e;
  color: #fff;
  padding: 20px clamp(20px, 5vw, 56px);
  padding-right: clamp(44px, 5vw, 56px);
  border-top: 1px solid rgba(201, 163, 78, 0.28);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
}
.cookie-banner.is-open { display: flex; }

.cookie-banner__close {
  position: absolute;
  top: 10px; right: 12px;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.8);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.cookie-banner__close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.cookie-banner__text {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 820px;
}
.cookie-banner__link { color: var(--lm-champagne-gold); text-decoration: underline; }
.cookie-banner__link:hover { color: #e6cb8a; }

.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.cookie-banner__settings {
  background: none; border: none; padding: 6px 4px;
  color: #fff; text-decoration: underline; cursor: pointer;
  font: inherit; font-size: 14px;
}
.cookie-banner__settings:hover { color: var(--lm-champagne-gold); }

.cookie-banner__btn {
  padding: 11px 26px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
  white-space: nowrap;
}
.cookie-banner__btn--solid { background: #fff; color: #0b1b2e; border: 1px solid #fff; }
.cookie-banner__btn--solid:hover { background: var(--lm-champagne-gold); border-color: var(--lm-champagne-gold); color: #0b1b2e; }
.cookie-banner__btn--outline { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); }
.cookie-banner__btn--outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.cookie-banner__btn:focus-visible,
.cookie-banner__settings:focus-visible {
  outline: 2px solid var(--lm-champagne-gold);
  outline-offset: 3px;
}

/* ---- Advanced Cookie Settings modal ---- */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 24px;
}
.cookie-modal.is-open { display: flex; }

.cookie-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 16, 30, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cookie-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 40px 100px -28px rgba(0,0,0,0.5), 0 16px 40px -16px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: proposal-modal-in 360ms var(--ease-out, cubic-bezier(0.22,0.61,0.36,1));
}
.cookie-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--lm-stone-deep);
  color: var(--lm-authority-navy);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.cookie-modal__close:hover { background: var(--lm-champagne-gold); border-color: var(--lm-champagne-gold); transform: scale(1.05); }
.cookie-modal__close:focus-visible { outline: 2px solid var(--lm-champagne-gold); outline-offset: 3px; }

.cookie-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 40px 44px 32px;
}
.cookie-modal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--color-fg-1);
  margin-bottom: 8px;
}

.cookie-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border-ivory);
}
.cookie-row:last-of-type { border-bottom: none; }
.cookie-row__text { flex: 1 1 auto; }
.cookie-row__text h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-fg-1);
  margin-bottom: 6px;
}
.cookie-row__text p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-fg-2);
}

/* Toggle switch */
.cookie-toggle {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-top: 2px;
}
.cookie-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cookie-toggle__track {
  width: 46px; height: 26px;
  border-radius: 999px;
  background: var(--lm-stone-deep);
  transition: background 200ms ease;
  display: inline-block;
  position: relative;
}
.cookie-toggle__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 200ms ease;
}
.cookie-toggle input:checked + .cookie-toggle__track { background: var(--lm-champagne-gold); }
.cookie-toggle input:checked + .cookie-toggle__track .cookie-toggle__thumb { transform: translateX(20px); }
.cookie-toggle input:focus-visible + .cookie-toggle__track { outline: 2px solid var(--lm-champagne-gold); outline-offset: 2px; }
.cookie-toggle.is-disabled { opacity: 0.55; cursor: not-allowed; }

.cookie-modal__footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 24px;
  margin-top: 4px;
}
.cookie-modal__save { min-width: 140px; text-align: center; }

body.cookie-modal-open { overflow: hidden; }

@media (max-width: 760px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 20px 16px 18px;
  }
  .cookie-banner__text { max-width: none; padding-right: 28px; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__settings { order: 3; width: 100%; text-align: center; margin-top: 2px; }
  .cookie-banner__btn { flex: 1 1 auto; }
}

@media (max-width: 640px) {
  .cookie-modal { padding: 0; align-items: flex-start; }
  .cookie-modal__dialog { width: calc(100% - 28px); max-height: 90vh; margin: 2vh auto; }
  .cookie-modal__body { padding: 36px 18px 24px; }
  .cookie-modal__close { top: 12px; right: 12px; }
  .cookie-modal__title { font-size: 22px; }
  .cookie-row { gap: 16px; padding: 18px 0; }
  .cookie-modal__footer { justify-content: stretch; }
  .cookie-modal__save { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-modal__dialog { animation: none; }
}

/* Consent checkbox Privacy Policy link (proposal + consultation forms) */
.proposal__form-consent-link {
  color: var(--lm-champagne-deep, #8E6C25);
  text-decoration: underline;
  font-weight: 600;
}
.proposal__form-consent-link:hover { color: var(--lm-champagne-gold); }

/* ============================================================
   LEGAL / INFORMATIONAL PAGES
   Privacy Policy · Terms of Service · Accessibility · Fair Housing
   Reuses site tokens; dark navy hero + light readable body.
   ============================================================ */
.legal-hero {
  position: relative;
  background: var(--lm-authority-navy, #0b1b2e);
  color: var(--lm-warm-ivory, #f7f2e9);
  padding: clamp(120px, 16vh, 196px) var(--container-px, 24px) clamp(48px, 7vw, 88px);
  overflow: hidden;
}
.legal-hero .container { position: relative; z-index: 1; }
.legal-hero__eyebrow {
  display: inline-block;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--lm-champagne-gold, #c9a34e); font-weight: 700; margin-bottom: 16px;
}
.legal-hero__h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 66px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}
.legal-hero__intro {
  margin-top: 22px;
  max-width: 720px;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

.legal-body {
  background: var(--lm-warm-ivory, #f7f2e9);
  padding: clamp(56px, 8vw, 100px) var(--container-px, 24px);
}
.legal-body__inner { max-width: 860px; margin: 0 auto; }

.legal-block { margin-bottom: clamp(32px, 4vw, 50px); }
.legal-block:last-child { margin-bottom: 0; }
.legal-block h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 29px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-fg-1, #061525);
  margin-bottom: 14px;
}
.legal-block p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-fg-2, #2c3a48);
  margin-bottom: 14px;
}
.legal-block p:last-child { margin-bottom: 0; }
.legal-block ul { margin: 8px 0 16px; padding: 0; list-style: none; }
.legal-block li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-fg-2, #2c3a48);
}
.legal-block li::before {
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lm-champagne-gold, #c9a34e);
}
.legal-block a { color: var(--lm-champagne-deep, #8E6C25); text-decoration: underline; }
.legal-block a:hover { color: var(--lm-champagne-gold, #c9a34e); }

.legal-disclaimer {
  margin: clamp(22px, 3vw, 38px) 0;
  padding: 16px 20px;
  border-left: 3px solid var(--lm-champagne-gold, #c9a34e);
  background: rgba(201, 163, 78, 0.07);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-fg-3, #5a6573);
  font-style: italic;
}

.legal-contact {
  margin-top: clamp(36px, 5vw, 60px);
  padding: clamp(28px, 4vw, 40px);
  background: #fff;
  border: 1px solid var(--color-border-ivory, #e7e0d2);
  border-radius: 16px;
  box-shadow: var(--shadow-1, 0 14px 36px -22px rgba(0,0,0,0.28));
}
.legal-contact h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--color-fg-1, #061525);
  margin-bottom: 14px;
}
.legal-contact address {
  font-style: normal;
  font-size: 16px;
  line-height: 1.95;
  color: var(--color-fg-2, #2c3a48);
}
.legal-contact a { color: var(--lm-champagne-deep, #8E6C25); text-decoration: none; }
.legal-contact a:hover { text-decoration: underline; }
.legal-contact__name { font-weight: 600; color: var(--color-fg-1, #061525); }

@media (max-width: 640px) {
  .legal-hero { padding-top: clamp(96px, 14vh, 130px); }
  .legal-contact { padding: 24px 20px; }
}