/* =============================================================
 * Vlasov & Partners — Design System Tokens
 * Extracted via naksha /design-system (Mode C — from existing code)
 * Three-tier architecture: Primitives → Semantic → Component
 * Brand: premium legal, trust & authority
 * ============================================================= */

:root {

  /* ═══════════════════════════════════════════════════════════
   * TIER 1 — PRIMITIVES
   * Raw values. Never reference directly from components.
   * ═══════════════════════════════════════════════════════════ */

  /* Gold scale (primary brand) */
  --gold-50:  #faf5e4;
  --gold-100: #f1e4b4;
  --gold-200: #e6d28a;
  --gold-300: #dcc06a;
  --gold-400: #d4b65c;   /* gold-light (highlight) */
  --gold-500: #c9a84c;   /* gold (display / dark bg) */
  --gold-600: #b8953f;   /* gold-deep (hover) */
  --gold-700: #a88638;   /* gold-darker (pressed) */
  --gold-800: #8f7332;   /* gold-ink (AA on cream) */
  --gold-900: #6b5525;

  /* Navy / Ink scale */
  --navy-900: #0b0b15;
  --navy-800: #12121f;
  --navy-700: #141428;   /* bg deepest */
  --navy-600: #1a1a2e;   /* bg standard */
  --navy-500: #23233a;   /* card elevated */
  --navy-400: #3a3530;
  --ink-900:  #2a2520;   /* body */
  --ink-700:  #3a3530;
  --ink-600:  #4a4540;
  --ink-500:  #5a544f;
  --ink-400:  #6a635c;
  --ink-300:  #8a8078;
  --ink-200:  #b0a898;
  --ink-100:  #e8e4dc;

  /* Cream scale (warm neutrals) */
  --cream-50:  #faf7f2;
  --cream-100: #f9f6f0;
  --cream-200: #f5f0e8;
  --cream-300: #f2ece2;
  --cream-400: #ebe5d9;
  --cream-500: #e4ddd0;
  --foam-0:    #ffffff;
  --foam-50:   #faf5ed;
  --foam-100:  #f0e8d4;

  /* Status colors */
  --success-500: #2e7d32;
  --success-50:  #e8f5e9;
  --danger-500:  #c0392b;
  --danger-50:   #fdecea;

  /* Alpha overlays — dark surface */
  --overlay-dark-92: rgba(12,12,25,0.92);
  --overlay-dark-72: rgba(20,18,15,0.72);
  --overlay-dark-60: rgba(12,12,25,0.6);
  --overlay-dark-35: rgba(20,18,15,0.35);

  /* Alpha overlays — on dark (for text) */
  --on-dark-100: rgba(255,255,255,1);
  --on-dark-90:  rgba(240,236,228,1);
  --on-dark-75:  rgba(255,255,255,0.75);
  --on-dark-65:  rgba(255,255,255,0.65);
  --on-dark-60:  rgba(255,255,255,0.6);
  --on-dark-55:  rgba(255,255,255,0.55);

  /* Alpha overlays — on light (for borders) */
  --on-light-12: rgba(42,37,32,0.12);
  --on-light-08: rgba(42,37,32,0.08);
  --on-light-06: rgba(42,37,32,0.06);

  /* Gold alphas */
  --gold-a-35: rgba(201,168,76,0.35);
  --gold-a-25: rgba(201,168,76,0.25);
  --gold-a-18: rgba(201,168,76,0.18);
  --gold-a-12: rgba(201,168,76,0.12);
  --gold-a-06: rgba(201,168,76,0.06);

  /* Spacing scale — 4pt base */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   40px;
  --space-10:  48px;
  --space-12:  64px;
  --space-14:  80px;
  --space-16:  96px;
  --space-20:  112px;

  /* Type scale — T-shirt + display sizes */
  --fs-caption:  11px;
  --fs-overline: 12px;
  --fs-small:    13px;
  --fs-body-sm:  14px;
  --fs-body:     15px;
  --fs-body-lg:  16px;
  --fs-lead:     17px;
  --fs-h6:       18px;
  --fs-h5:       20px;
  --fs-h4:       24px;
  --fs-h3:       28px;
  --fs-h2:       clamp(28px, 4vw, 44px);
  --fs-h1:       clamp(34px, 5vw, 56px);
  --fs-display:  clamp(40px, 5.5vw, 72px);

  /* Font families */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-base:    1.5;
  --lh-relaxed: 1.7;
  --lh-loose:   1.75;

  /* Letter spacing */
  --ls-tight:   -0.5px;
  --ls-normal:  0;
  --ls-wide:    1px;
  --ls-wider:   2px;
  --ls-widest:  3px;

  /* Radii */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-3xl:  24px;
  --r-full: 9999px;

  /* Shadows (elevation scale) */
  --shadow-xs:  0 1px 2px rgba(42,37,32,0.04);
  --shadow-sm:  0 4px 12px rgba(42,37,32,0.06);
  --shadow-md:  0 8px 24px rgba(42,37,32,0.08);
  --shadow-lg:  0 16px 40px rgba(42,37,32,0.1);
  --shadow-xl:  0 24px 60px rgba(42,37,32,0.12);
  --shadow-2xl: 0 40px 80px rgba(0,0,0,0.35);
  --shadow-gold: 0 8px 30px rgba(201,168,76,0.35);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   300ms;
  --dur-slow:   400ms;

  /* Z-index scale */
  --z-base:   1;
  --z-sticky: 10;
  --z-nav:    100;
  --z-modal:  200;
  --z-toast:  300;

  /* Legacy aliases — short names used before Phase 1 migration */
  --gold:     var(--gold-500);
  --gold-ink: var(--gold-800);
  --gold-deep: var(--gold-600);
  --gold-light: var(--gold-400);
  --ink:      var(--ink-900);
  --ink-soft: var(--ink-500);
  --ink-muted: var(--ink-300);
  --cream:    var(--cream-200);
  --cream-2:  var(--cream-300);
  --cream-3:  var(--cream-400);
  --cream-4:  var(--cream-50);
  --navy:     var(--navy-600);
  --navy-deep: var(--navy-700);
  --on-dark-hi: var(--on-dark-90);
  --on-dark-md: var(--on-dark-75);
  --on-dark-lo: var(--on-dark-60);


  /* ═══════════════════════════════════════════════════════════
   * TIER 2 — SEMANTIC
   * Purpose-mapped tokens. Use these in components.
   * ═══════════════════════════════════════════════════════════ */

  /* Surfaces */
  --surface-canvas:    var(--cream-200);
  --surface-raised:    var(--cream-50);
  --surface-sunken:    var(--cream-400);
  --surface-dark:      var(--navy-600);
  --surface-dark-deep: var(--navy-700);
  --surface-elevated:  var(--foam-0);

  /* Text on light */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-400);
  --text-caption:   var(--ink-300);
  --text-accent:    var(--gold-800);   /* AA-safe on cream */
  --text-link:      var(--gold-800);

  /* Text on dark */
  --text-on-dark-primary:   var(--on-dark-90);
  --text-on-dark-secondary: var(--on-dark-75);
  --text-on-dark-muted:     var(--on-dark-60);
  --text-on-dark-accent:    var(--gold-500);

  /* Borders */
  --border-subtle:  var(--on-light-06);
  --border-default: var(--on-light-08);
  --border-strong:  var(--on-light-12);
  --border-gold:    var(--gold-a-35);
  --border-focus:   var(--gold-500);

  /* Actions */
  --action-primary-bg:       var(--gold-500);
  --action-primary-bg-hover: var(--gold-600);
  --action-primary-text:     var(--foam-0);
  --action-secondary-bg:     transparent;
  --action-secondary-border: var(--border-strong);
  --action-secondary-text:   var(--ink-900);

  /* Status */
  --status-success-bg:   var(--success-50);
  --status-success-text: var(--success-500);
  --status-danger-bg:    var(--danger-50);
  --status-danger-text:  var(--danger-500);

  /* Focus ring */
  --focus-ring:       0 0 0 3px var(--gold-a-25);
  --focus-ring-dark:  0 0 0 3px rgba(42,37,32,0.25);


  /* ═══════════════════════════════════════════════════════════
   * TIER 3 — COMPONENT
   * Fine-grained tokens for specific components.
   * ═══════════════════════════════════════════════════════════ */

  /* Button */
  --btn-radius-pill: var(--r-full);
  --btn-radius:      var(--r-lg);
  --btn-pad-sm:      10px 20px;
  --btn-pad-md:      14px 28px;
  --btn-pad-lg:      18px 40px;

  /* Card */
  --card-bg:       var(--surface-elevated);
  --card-radius:   var(--r-2xl);
  --card-padding:  var(--space-7);
  --card-border:   1px solid var(--border-default);
  --card-shadow:   var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);

  /* Input */
  --input-bg:     var(--cream-100);
  --input-border: var(--border-strong);
  --input-radius: var(--r-lg);
  --input-pad:    14px 16px;

  /* Section */
  --section-pad-y: 110px;
  --section-pad-x: 48px;
  --section-pad-y-mobile: 56px;
  --section-pad-x-mobile: 24px;

  /* Nav */
  --nav-height:    68px;
  --nav-bg:        rgba(255,255,255,0.95);
  --nav-bg-hero:   transparent;
  --nav-blur:      blur(16px);
}


/* ═══════════════════════════════════════════════════════════
 * BASE RESET & TYPOGRAPHY
 * ═══════════════════════════════════════════════════════════ */

* { margin:0; padding:0; box-sizing:border-box; }
::selection { background:var(--gold-a-25); color:var(--text-primary); }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Global focus */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, details summary:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Gold-button dark focus */
.btn-primary:focus-visible, .cta-gold:focus-visible {
  outline-color: var(--ink-900);
}

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


/* ═══════════════════════════════════════════════════════════
 * TEXTURE & GRAIN
 * Paper feel for warm cream sections + global film grain.
 * ═══════════════════════════════════════════════════════════ */

/* Global film grain overlay — fixed, blended with everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px;
  background-repeat: repeat;
}

/* Paper texture — adds organic depth to warm cream sections */
.paper-texture {
  position: relative;
  isolation: isolate;
}
.paper-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0 0.3 0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='turbulence' baseFrequency='0.6' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0 0.2 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  background-size: 300px, 400px;
  background-repeat: repeat, repeat;
  background-blend-mode: multiply;
}

/* Disable grain for reduced-motion users on principle */
@media (prefers-reduced-motion: reduce) {
  body::after { opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════
 * HERO ORCHESTRATED REVEAL
 * Staggered entrance: label → title (per line) → divider →
 * description → buttons → phone → scroll hint
 * ═══════════════════════════════════════════════════════════ */

@keyframes heroRise {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes heroLineRise {
  from { opacity: 0; transform: translateY(110%) skewY(2deg); }
  to   { opacity: 1; transform: translateY(0) skewY(0); }
}
@keyframes heroDividerDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes heroVideoBloom {
  from { opacity: 0; transform: scale(1.06); filter: brightness(0.6); }
  to   { opacity: 1; transform: scale(1);    filter: brightness(1); }
}
@keyframes goldFlicker {
  0%, 100% { color: var(--gold-500); text-shadow: 0 0 0 transparent; }
  50%      { color: var(--gold-400); text-shadow: 0 0 16px rgba(201,168,76,0.4); }
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
  50%      { opacity: 1;   transform: scaleY(1); }
}

/* Hero video entrance */
#hero video {
  animation: heroVideoBloom 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Label pill */
#hero .fade-in:first-of-type {
  animation: heroRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
  opacity: 0;
}

/* Hero title — split lines rise one after another */
.hero-title {
  overflow: visible;
}
.hero-title .hero-line {
  display: block;
  overflow: hidden;
  /* Wrap inner content for clip-reveal */
}
.hero-title .hero-line {
  opacity: 0;
  animation: heroLineRise 1s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) both;
}
.hero-title .hero-gold-flicker {
  animation: heroLineRise 1s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) both,
             goldFlicker 2.6s ease-in-out 1.3s 1;
}

/* Hero divider — draws in from left */
.hero-divider {
  width: 60px;
  height: 2px;
  background: var(--gold-500);
  transform-origin: left center;
  animation: heroDividerDraw 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
  opacity: 0;
  animation-fill-mode: both;
}
.hero-divider {
  animation: heroDividerDraw 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both,
             heroRise 0.01s linear 0.55s both;
}

/* Description */
#hero .hero-desc, #hero p.fade-in {
  animation: heroRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
  opacity: 0;
  transition: none !important;
}

/* Buttons row */
#hero .fade-in[style*="transition-delay:0.5s"],
#hero div[style*="display:flex;gap:16px;margin-top:40px"] {
  animation: heroRise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both;
  opacity: 0;
  transition: none !important;
}

/* Phone */
#hero .fade-in[style*="transition-delay:0.6s"],
#hero div[style*="margin-top:48px;transition-delay:0.6s"] {
  animation: heroRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.15s both;
  opacity: 0;
  transition: none !important;
}

/* Scroll indicator */
#hero .fade-in[style*="transition-delay:0.8s"] {
  animation: heroRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.5s both,
             scrollPulse 2s ease-in-out 2.4s infinite;
  opacity: 0;
  transition: none !important;
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #hero video,
  .hero-title .hero-line,
  .hero-divider,
  #hero .fade-in,
  #hero p {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
 * COMPONENT CLASSES
 * Use these instead of inline styles.
 * ═══════════════════════════════════════════════════════════ */

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-wide);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  min-height: 44px;
  padding: var(--btn-pad-md);
}
.btn-primary {
  background: var(--action-primary-bg);
  color: var(--action-primary-text);
  border-radius: var(--btn-radius);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
  background: var(--action-primary-bg-hover);
  transform: translateY(-1px);
}
.btn-pill {
  border-radius: var(--btn-radius-pill);
}
.btn-ghost {
  background: var(--action-secondary-bg);
  color: var(--action-secondary-text);
  border: 1px solid var(--action-secondary-border);
  border-radius: var(--btn-radius-pill);
}
.btn-ghost:hover {
  border-color: var(--border-focus);
  color: var(--text-accent);
}

/* --- Section --- */
.section {
  padding: var(--section-pad-y) var(--section-pad-x);
}
@media (max-width: 720px) {
  .section { padding: var(--section-pad-y-mobile) var(--section-pad-x-mobile); }
}
.section-inner { max-width: 1320px; margin: 0 auto; }
.section-label {
  font-size: var(--fs-overline);
  color: var(--text-accent);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* --- Card --- */
.card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  transition: all var(--dur-base) var(--ease-out);
}
.card--interactive { cursor: pointer; }
.card--interactive:hover {
  border-color: var(--border-gold);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-4px);
}
.card--dark {
  background: var(--surface-dark);
  border-color: rgba(201,168,76,0.18);
  color: var(--text-on-dark-primary);
}

/* --- Input --- */
.input, .textarea {
  width: 100%;
  padding: var(--input-pad);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  background: var(--input-bg);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  min-height: 44px;
}
.input:focus, .textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger-500);
  box-shadow: 0 0 0 3px var(--danger-50);
}
.input-label {
  display: block;
  font-size: var(--fs-overline);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
}
.input-label span[aria-hidden="true"] { color: var(--gold-800); margin-left: 2px; }
.form-field { margin-bottom: 18px; }
.form-field--last { margin-bottom: var(--space-2); }
.textarea { resize: vertical; min-height: 90px; }

/* --- Pill / Badge --- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-full);
  background: var(--gold-a-06);
  font-size: var(--fs-caption);
  color: var(--text-accent);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}
.badge-success {
  background: var(--status-success-bg);
  color: var(--status-success-text);
  padding: 5px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.5px;
}

/* --- Footer link (dark bg, gold hover) --- */
.footer-link {
  display: block;
  font-size: var(--fs-body-sm);
  color: var(--on-dark-60);
  text-decoration: none;
  margin-bottom: var(--space-3);
  transition: color var(--dur-base);
}
.footer-link:hover { color: var(--gold-500); }
.footer-link--phone {
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  color: var(--on-dark-90);
  margin-bottom: 14px;
}

/* --- Case card --- */
.case-card-new {
  background: var(--cream-50);
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
  cursor: pointer;
  transition: transform var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base);
}
.case-card-new:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold-500);
}

/* --- Office card (contact section) --- */
.office-card {
  background: var(--foam-0);
  border-radius: var(--r-2xl);
  padding: 28px 32px;
  border: var(--card-border);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.office-card:hover {
  border-color: var(--gold-a-35);
  box-shadow: 0 12px 32px var(--on-light-06);
}

/* --- Hero buttons CTA gold / ghost --- */
.btn-hero-gold {
  background: var(--gold-500);
  color: var(--foam-0);
  text-decoration: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  padding: 16px 36px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: background var(--dur-base);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-hero-gold:hover { background: var(--gold-400); }
.btn-hero-ghost {
  background: transparent;
  color: var(--foam-0);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  padding: 16px 36px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: border-color var(--dur-base);
}
.btn-hero-ghost:hover { border-color: rgba(201,168,76,0.6); }

/* --- Hero phone link --- */
.hero-phone {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color var(--dur-base);
}
.hero-phone:hover { color: rgba(255,255,255,0.7); }

/* --- Outline pill button (light bg) --- */
.btn-outline-pill {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 24px;
  background: transparent;
  color: var(--ink-900);
  border: 1px solid rgba(42,37,32,0.2);
  border-radius: var(--r-full);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: all var(--dur-base) var(--ease-out);
}
.btn-outline-pill:hover {
  border-color: var(--gold-500);
  background: var(--gold-500);
  color: var(--foam-0);
}

/* --- Form submit button (gold, large) --- */
.btn-submit {
  width: 100%;
  padding: var(--space-4);
  background: var(--gold-500);
  color: var(--foam-0);
  border: none;
  border-radius: var(--r-lg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--dur-base);
  margin-bottom: var(--space-4);
  box-shadow: 0 6px 20px rgba(201,168,76,0.3);
}
.btn-submit:hover:not(:disabled) {
  background: var(--gold-600);
  transform: translateY(-1px);
}
.btn-submit:disabled { cursor: default; opacity: 0.9; }

/* --- Contact action ghost button --- */
.btn-contact-ghost {
  flex: 1;
  text-align: center;
  padding: var(--space-3);
  background: transparent;
  color: var(--ink-900);
  text-decoration: none;
  border-radius: var(--r-lg);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  border: 1px solid var(--on-light-12);
  transition: all var(--dur-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.btn-contact-ghost:hover {
  border-color: var(--gold-500);
  color: var(--gold-500);
}

/* --- Modal close button --- */
.btn-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.08);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--fs-h6);
  color: var(--ink-900);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-base);
}
.btn-close:hover {
  background: var(--gold-500);
  color: var(--foam-0);
  border-color: var(--gold-500);
}

/* --- Services — clickable items (open in modal) --- */
.svc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: 20px 0;
  border-bottom: 1px solid var(--on-light-08);
  cursor: pointer;
  position: relative;
  transition: padding var(--dur-base) var(--ease-out);
  outline: none;
}
.svc-item:last-child { border-bottom: none; }
.svc-list-col.dark .svc-item { border-bottom-color: rgba(255,255,255,0.08); }
.svc-list-col.dark .svc-item:last-child { border-bottom: none; }

.svc-item::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  width: 8px;
  height: 1.5px;
  background: var(--gold-500);
  transition: transform var(--dur-base) var(--ease-out);
}
.svc-item:hover::before,
.svc-item:focus-visible::before { transform: translateY(-50%) scaleX(1); }
.svc-item:hover { padding-left: 14px; }
.svc-item:focus-visible { padding-left: 14px; outline: 2px solid var(--gold-500); outline-offset: 4px; border-radius: 4px; }

.svc-summary-text { flex: 1; min-width: 0; }
.svc-item .svc-list-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-900);
  margin-bottom: 4px;
  transition: color var(--dur-base);
}
.svc-item .svc-list-desc {
  font-size: 13px;
  color: var(--ink-300);
  line-height: 1.55;
}
.svc-list-col.dark .svc-item .svc-list-title { color: var(--on-dark-90); }
.svc-list-col.dark .svc-item .svc-list-desc { color: var(--on-dark-60); }

.svc-item:hover .svc-list-title,
.svc-item:focus-visible .svc-list-title { color: var(--gold-ink); }
.svc-list-col.dark .svc-item:hover .svc-list-title,
.svc-list-col.dark .svc-item:focus-visible .svc-list-title { color: var(--gold-500); }

/* Toggle icon (arrow) */
.svc-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--gold-a-35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-ink);
  flex-shrink: 0;
  transition: all var(--dur-base) var(--ease-out);
}
.svc-list-col.dark .svc-toggle { color: var(--gold-500); border-color: rgba(201,168,76,0.3); }
.svc-item:hover .svc-toggle,
.svc-item:focus-visible .svc-toggle {
  background: var(--gold-500);
  color: var(--foam-0);
  border-color: var(--gold-500);
  transform: translateX(4px);
}

/* Content inside practice modal — keep body/points/meta styles */
#practiceContent .svc-points {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#practiceContent .svc-points li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-500);
}
#practiceContent .svc-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 14px;
  height: 1.5px;
  background: var(--gold-500);
}

#practiceContent .svc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 14px 18px;
  border: 1px solid var(--on-light-08);
  border-radius: var(--r-md);
  background: var(--gold-a-06);
}
#practiceContent .svc-meta span {
  font-size: 12px;
  color: var(--ink-500);
  font-weight: 500;
  letter-spacing: 0.3px;
  position: relative;
}
#practiceContent .svc-meta span + span::before {
  content: "·";
  margin-right: 16px;
  margin-left: -14px;
  color: var(--gold-500);
}

@media (max-width: 720px) {
  .svc-item { padding: 16px 0; }
  .svc-item .svc-list-title { font-size: 17px; }
  .svc-toggle { width: 28px; height: 28px; }
}

/* --- Yandex link (underline bottom) --- */
.link-yandex {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--ink-900);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,168,76,0.4);
  padding-bottom: 4px;
  font-weight: var(--fw-medium);
  transition: all var(--dur-base);
}
.link-yandex:hover {
  color: var(--gold-500);
  border-bottom-color: var(--gold-500);
}


/* ═══════════════════════════════════════════════════════════
 * USAGE EXAMPLE
 * Replace inline styles with tokens like this:
 * ═══════════════════════════════════════════════════════════

  BEFORE (hardcoded):
  <div style="background:#c9a84c;color:#fff;padding:14px 32px;
              border-radius:28px;font-size:14px;font-weight:600">
    Консультация
  </div>

  AFTER (tokenized):
  <a class="btn btn-primary btn-pill">Консультация</a>

  BEFORE:
  <section style="background:#ebe5d9;padding:110px 48px">

  AFTER:
  <section class="section" style="background:var(--cream-400)">

 * ═══════════════════════════════════════════════════════════ */