/* ─── Growthius Color Tokens ─────────────────────────────────────────────── */

:root {

  /* ── Brand Purple (Primary) ────────────────────────────────────────────── */
  --color-purple-900:  #1A0C73;
  --color-purple-800:  #231096;
  --color-purple-700:  #2D14B4;
  --color-purple-600:  #3B1ECC;   /* ← logo anchor */
  --color-purple-500:  #5035D9;
  --color-purple-400:  #7258E6;
  --color-purple-300:  #9B84EE;
  --color-purple-200:  #C5B7F6;
  --color-purple-100:  #E5DFFE;
  --color-purple-50:   #F2EFFE;

  /* ── Teal (Secondary) ──────────────────────────────────────────────────── */
  --color-teal-900:    #083832;
  --color-teal-800:    #0A5049;
  --color-teal-700:    #0D6B61;
  --color-teal-600:    #0D8A7E;
  --color-teal-500:    #10A99B;   /* ← primary teal */
  --color-teal-400:    #2EC4B4;
  --color-teal-300:    #6EDDD3;
  --color-teal-200:    #A8EDE9;
  --color-teal-100:    #D4F5F3;
  --color-teal-50:     #EDFAF9;

  /* ── Growth Green (Accent) ─────────────────────────────────────────────── */
  --color-green-900:   #0A3E22;
  --color-green-800:   #10562F;
  --color-green-700:   #157A42;
  --color-green-600:   #1AAA5F;   /* ← primary green */
  --color-green-500:   #22C870;
  --color-green-400:   #42DD8C;
  --color-green-300:   #7DEAAD;
  --color-green-200:   #B0F1CC;
  --color-green-100:   #D8F9E8;
  --color-green-50:    #EDFCF3;

  /* ── Amber (Warm Accent — use sparingly) ───────────────────────────────── */
  --color-amber-600:   #B45309;
  --color-amber-500:   #D97706;
  --color-amber-400:   #F59E0B;
  --color-amber-100:   #FEF3C7;
  --color-amber-50:    #FFFBEB;

  /* ── Neutrals ──────────────────────────────────────────────────────────── */
  --color-neutral-950: #0A0A12;
  --color-neutral-900: #0E0E1A;   /* ← primary text */
  --color-neutral-800: #1E1E30;
  --color-neutral-700: #2E2E46;
  --color-neutral-600: #4A4A63;   /* ← secondary text */
  --color-neutral-500: #6B6B84;
  --color-neutral-400: #9494B0;   /* ← muted text */
  --color-neutral-300: #BEBEDA;
  --color-neutral-200: #D4D4E6;   /* ← border default */
  --color-neutral-150: #E2E2EF;   /* ← border subtle */
  --color-neutral-100: #EBEBF5;
  --color-neutral-75:  #F0F0F8;
  --color-neutral-50:  #F7F7FB;   /* ← surface */
  --color-neutral-0:   #FFFFFF;

  /* ── Semantic Aliases ──────────────────────────────────────────────────── */

  /* Text */
  --text-primary:      var(--color-neutral-900);
  --text-secondary:    var(--color-neutral-600);
  --text-muted:        var(--color-neutral-400);
  --text-inverse:      var(--color-neutral-0);
  --text-brand:        var(--color-purple-600);
  --text-accent:       var(--color-green-600);
  --text-link:         var(--color-purple-600);
  --text-link-hover:   var(--color-purple-700);

  /* Backgrounds */
  --bg-page:           var(--color-neutral-0);
  --bg-surface:        var(--color-neutral-50);
  --bg-surface-alt:    var(--color-neutral-75);
  --bg-brand:          var(--color-purple-600);
  --bg-brand-dark:     var(--color-purple-800);
  --bg-brand-tint:     var(--color-purple-50);
  --bg-teal-tint:      var(--color-teal-50);
  --bg-green-tint:     var(--color-green-50);
  --bg-dark:           var(--color-neutral-900);

  /* Surfaces / Cards */
  --surface-card:      var(--color-neutral-0);
  --surface-card-alt:  var(--color-neutral-50);
  --surface-overlay:   rgba(14, 14, 26, 0.6);

  /* Borders */
  --border-subtle:     var(--color-neutral-150);
  --border-default:    var(--color-neutral-200);
  --border-strong:     var(--color-neutral-300);
  --border-brand:      var(--color-purple-400);
  --border-accent:     var(--color-green-500);

  /* States */
  --color-success:     var(--color-green-600);
  --color-success-bg:  var(--color-green-50);
  --color-warning:     var(--color-amber-500);
  --color-warning-bg:  var(--color-amber-50);
  --color-error:       #DC2626;
  --color-error-bg:    #FFF1F1;
  --color-info:        var(--color-teal-500);
  --color-info-bg:     var(--color-teal-50);

  /* Interactive */
  --interactive-brand:        var(--color-purple-600);
  --interactive-brand-hover:  var(--color-purple-700);
  --interactive-brand-active: var(--color-purple-800);
  --interactive-accent:       var(--color-green-600);
  --interactive-accent-hover: var(--color-green-700);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(59, 30, 204, 0.22);
}

/* ─── Growthius Typography Tokens ─────────────────────────────────────────── */

/* Google Fonts — Space Grotesk (display/headings) + DM Sans (body/UI) */


:root {

  /* ── Font Families ─────────────────────────────────────────────────────── */
  --font-display:   'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-heading:   'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:      'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-ui:        'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* ── Font Weights ──────────────────────────────────────────────────────── */
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ── Type Scale — Desktop ──────────────────────────────────────────────── */
  /* Display / Hero */
  --text-display-2xl: clamp(3rem, 5.5vw, 4.5rem);   /* 72px → 48px */
  --text-display-xl:  clamp(2.5rem, 4.5vw, 3.75rem); /* 60px → 40px */
  --text-display-lg:  clamp(2rem,   3.5vw, 3rem);    /* 48px → 32px */

  /* Headings */
  --text-h1:   clamp(1.875rem, 3vw, 2.5rem);  /* 40px → 30px */
  --text-h2:   clamp(1.5rem,   2.5vw, 2rem);  /* 32px → 24px */
  --text-h3:   clamp(1.25rem,  2vw,  1.5rem); /* 24px → 20px */
  --text-h4:   clamp(1.125rem, 1.5vw, 1.25rem); /* 20px → 18px */
  --text-h5:   1.125rem;  /* 18px */
  --text-h6:   1rem;      /* 16px */

  /* Body */
  --text-body-xl:  1.25rem;   /* 20px — lead/intro paragraph */
  --text-body-lg:  1.125rem;  /* 18px — large body */
  --text-body-md:  1rem;      /* 16px — default body */
  --text-body-sm:  0.9375rem; /* 15px — compact body */
  --text-body-xs:  0.875rem;  /* 14px — captions, labels */
  --text-body-2xs: 0.8125rem; /* 13px — fine print */

  /* UI */
  --text-label-lg: 0.9375rem; /* 15px */
  --text-label-md: 0.875rem;  /* 14px */
  --text-label-sm: 0.8125rem; /* 13px */
  --text-btn-lg:   1.0625rem; /* 17px */
  --text-btn-md:   0.9375rem; /* 15px */
  --text-btn-sm:   0.875rem;  /* 14px */
  --text-overline: 0.75rem;   /* 12px — uppercase labels */
  --text-code:     0.9375rem; /* 15px */

  /* ── Line Heights ──────────────────────────────────────────────────────── */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.25;
  --leading-heading: 1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* ── Letter Spacing ────────────────────────────────────────────────────── */
  --tracking-tight:   0em;
  --tracking-normal:  0em;
  --tracking-wide:    0.03em;
  --tracking-wider:   0.06em;
  --tracking-widest:  0.12em;  /* for overline / ALL-CAPS labels */

  /* ── Semantic Type Aliases ─────────────────────────────────────────────── */
  --type-hero:          var(--text-display-2xl);
  --type-hero-weight:   var(--font-weight-bold);
  --type-hero-leading:  var(--leading-tight);
  --type-hero-tracking: 0em;
  --type-hero-font:     var(--font-display);

  --type-section-label-size:    var(--text-overline);
  --type-section-label-weight:  var(--font-weight-semibold);
  --type-section-label-tracking: var(--tracking-widest);
  --type-section-label-transform: uppercase;

  --type-body-size:     var(--text-body-md);
  --type-body-weight:   var(--font-weight-regular);
  --type-body-leading:  var(--leading-relaxed);
  --type-body-font:     var(--font-body);

  --type-btn-size:      var(--text-btn-md);
  --type-btn-weight:    var(--font-weight-semibold);
  --type-btn-tracking:  var(--tracking-wide);
  --type-btn-font:      var(--font-ui);
}

/* ─── Growthius Spacing & Layout Tokens ───────────────────────────────────── */

:root {

  /* ── Base Spacing Scale (4px base unit) ────────────────────────────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-28:  7rem;      /* 112px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */
  --space-48:  12rem;     /* 192px */

  /* ── Section Vertical Rhythm ───────────────────────────────────────────── */
  --section-padding-y:          5rem;     /* 80px desktop */
  --section-padding-y-lg:       6.5rem;   /* 104px — hero/feature sections */
  --section-padding-y-sm:       3.5rem;   /* 56px — compact sections */
  --section-padding-y-mobile:   3rem;     /* 48px mobile */
  --section-padding-x:          1.5rem;   /* 24px — default side gutter */

  /* ── Content Widths ────────────────────────────────────────────────────── */
  --content-max-width:          1200px;   /* primary content container */
  --content-max-width-wide:     1400px;   /* full-bleed / hero */
  --content-max-width-narrow:   780px;    /* prose / single-column */
  --content-max-width-xs:       560px;    /* forms / modals */

  /* ── Grid System ───────────────────────────────────────────────────────── */
  --grid-columns:               12;   /* @kind other */
  --grid-gap:                   var(--space-6);   /* 24px — default col gap */
  --grid-gap-lg:                var(--space-8);   /* 32px — wide layouts */
  --grid-gap-sm:                var(--space-4);   /* 16px — tight layouts */

  /* ── Breakpoints (for reference — use in media queries) ───────────────── */
  /* sm:  640px  — large phones */
  /* md:  768px  — tablets */
  /* lg:  1024px — small desktop */
  /* xl:  1280px — standard desktop */
  /* 2xl: 1536px — wide desktop */

  /* ── Semantic Spacing Aliases ──────────────────────────────────────────── */

  /* Card internals */
  --card-padding:       var(--space-6);    /* 24px */
  --card-padding-lg:    var(--space-8);    /* 32px */
  --card-gap:           var(--space-4);    /* 16px — between card items */

  /* Nav */
  --nav-height:         72px;
  --nav-height-mobile:  60px;
  --nav-padding-y:      var(--space-4);    /* 16px */
  --nav-padding-x:      var(--space-6);    /* 24px */

  /* Buttons */
  --btn-padding-y-lg:   0.875rem;  /* 14px */
  --btn-padding-x-lg:   2rem;      /* 32px */
  --btn-padding-y-md:   0.6875rem; /* 11px */
  --btn-padding-x-md:   1.5rem;    /* 24px */
  --btn-padding-y-sm:   0.5rem;    /* 8px */
  --btn-padding-x-sm:   1rem;      /* 16px */

  /* Form fields */
  --input-padding-y:    0.6875rem; /* 11px */
  --input-padding-x:    var(--space-4);    /* 16px */
  --input-height:       2.75rem;   /* 44px — mobile-safe */
  --field-gap:          var(--space-5);    /* 20px — between fields */
  --label-gap:          var(--space-2);    /* 8px — label to input */

  /* ── Z-Index Scale ─────────────────────────────────────────────────────── */
  --z-below:    -1;    /* @kind other */
  --z-base:      0;    /* @kind other */
  --z-raised:   10;    /* @kind other */
  --z-nav:      100;   /* @kind other */
  --z-overlay:  200;   /* @kind other */
  --z-modal:    300;   /* @kind other */
  --z-toast:    400;   /* @kind other */
}

/* ─── Growthius Effects Tokens — Shadows, Radii, Transitions ─────────────── */

:root {

  /* ── Border Radius ─────────────────────────────────────────────────────── */
  --radius-none:    0;
  --radius-sm:      4px;
  --radius-md:      6px;   /* ← default card radius */
  --radius-lg:      8px;   /* ← section/panel radius */
  --radius-xl:      12px;
  --radius-2xl:     16px;
  --radius-full:    9999px;  /* ← pill buttons / badges */

  /* Aliases */
  --radius-card:    var(--radius-md);   /* 6px */
  --radius-btn:     var(--radius-md);   /* 6px — no excessive pill on default */
  --radius-input:   var(--radius-md);   /* 6px */
  --radius-badge:   var(--radius-full);
  --radius-tag:     var(--radius-sm);

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  /* All shadows use the neutral-900 ink color with low opacity */
  --shadow-none:  none;

  --shadow-xs:    0 1px 2px 0 rgba(14, 14, 26, 0.05);
  --shadow-sm:    0 1px 3px 0 rgba(14, 14, 26, 0.08),
                  0 1px 2px -1px rgba(14, 14, 26, 0.06);
  --shadow-md:    0 4px 6px -1px rgba(14, 14, 26, 0.08),
                  0 2px 4px -2px rgba(14, 14, 26, 0.06);
  --shadow-lg:    0 10px 15px -3px rgba(14, 14, 26, 0.08),
                  0 4px 6px -4px rgba(14, 14, 26, 0.05);
  --shadow-xl:    0 20px 25px -5px rgba(14, 14, 26, 0.10),
                  0 8px 10px -6px rgba(14, 14, 26, 0.06);
  --shadow-2xl:   0 25px 50px -12px rgba(14, 14, 26, 0.18);

  /* Brand/colored shadow — use on hover states for brand cards */
  --shadow-brand: 0 8px 24px -4px rgba(59, 30, 204, 0.18);
  --shadow-green: 0 8px 24px -4px rgba(26, 170, 95, 0.18);

  /* Inset — used for pressed states */
  --shadow-inset: inset 0 2px 4px 0 rgba(14, 14, 26, 0.06);

  /* Aliases */
  --shadow-card:     var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --shadow-dropdown:   var(--shadow-lg);
  --shadow-modal:      var(--shadow-2xl);

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --border-width-default: 1px;
  --border-width-medium:  1.5px;
  --border-width-thick:   2px;

  --border-card:    1px solid var(--border-subtle);
  --border-input:   1px solid var(--border-default);
  --border-strong:  1px solid var(--border-strong);

  /* ── Transitions ───────────────────────────────────────────────────────── */
  --transition-fast:    100ms ease;   /* @kind other */
  --transition-base:    180ms ease;   /* @kind other */
  --transition-slow:    280ms ease;   /* @kind other */
  --transition-slower:  400ms ease;   /* @kind other */

  /* Property-specific defaults */
  --transition-color:      color var(--transition-base),
                           background-color var(--transition-base),
                           border-color var(--transition-base); /* @kind other */
  --transition-transform:  transform var(--transition-base); /* @kind other */
  --transition-shadow:     box-shadow var(--transition-base); /* @kind other */
  --transition-opacity:    opacity var(--transition-base);    /* @kind other */
  --transition-all:        all var(--transition-base);        /* @kind other */

  /* ── Backdrop / Blur ───────────────────────────────────────────────────── */
  --blur-sm:   blur(4px);  /* @kind other */
  --blur-md:   blur(8px);  /* @kind other */
  --blur-lg:   blur(16px); /* @kind other */
  --blur-xl:   blur(24px); /* @kind other */

  /* ── Gradients ─────────────────────────────────────────────────────────── */
  /* Used selectively — never as full-page backgrounds */
  --gradient-brand:     linear-gradient(135deg, var(--color-purple-600) 0%, var(--color-purple-800) 100%);
  --gradient-brand-soft: linear-gradient(135deg, var(--color-purple-50) 0%, var(--color-teal-50) 100%);
  --gradient-accent:    linear-gradient(135deg, var(--color-green-500) 0%, var(--color-teal-500) 100%);
  --gradient-dark:      linear-gradient(160deg, var(--color-neutral-900) 0%, var(--color-neutral-800) 100%);

  /* ── Dividers ──────────────────────────────────────────────────────────── */
  --divider-color:   var(--color-neutral-150);
  --divider:         1px solid var(--divider-color);
}

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  ::selection { background: var(--color-purple-200); color: var(--color-purple-900); }

  /* ── Layout primitives ── */
  .container { max-width: var(--content-max-width); margin: 0 auto; padding: 0 1.5rem; }
  .container-narrow { max-width: var(--content-max-width-narrow); margin: 0 auto; padding: 0 1.5rem; }
  .section { padding: 5.5rem 0; }
  .section-sm { padding: 3.5rem 0; }
  .section-alt { background: var(--bg-surface); }
  .section-dark { background: var(--color-neutral-900); color: #fff; }

  .overline {
    font-family: var(--font-ui); font-size: .75rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--color-purple-600);
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  }
  .overline::before {
    content: ""; width: 18px; height: 2px; background: var(--color-purple-400); border-radius: 2px;
  }
  .overline.center::before { display: none; }

  .section-title {
    font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; color: var(--text-primary);
  }
  .section-sub { font-size: 1.0625rem; color: var(--text-secondary); line-height: 1.65; max-width: 560px; }
  .section-header { margin-bottom: 3rem; }
  .section-header > .overline { margin-bottom: .9rem; }
  .section-header > .section-sub { margin-top: 1rem; }
  .section-header-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .section-header-center .section-sub { margin-left: auto; margin-right: auto; }

  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

  .eyebrow-link {
    display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui);
    font-size: .9375rem; font-weight: 600; color: var(--color-purple-600);
    text-decoration: none; transition: gap var(--transition-base), color var(--transition-base);
  }
  .eyebrow-link:hover { color: var(--color-purple-700); gap: 11px; }

  a { color: var(--color-purple-600); }

  /* ── Placeholder proof marker ── */
  .ph-marker {
    font-family: var(--font-ui); font-size: .6875rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--color-amber-600); background: var(--color-amber-50);
    border: 1px dashed var(--color-amber-400); border-radius: 4px; padding: 3px 8px;
    display: inline-flex; align-items: center; gap: 6px;
  }

  /* ── Mobile nav ── */
  .snav-hamburger { display: none; }
  @media (max-width: 920px) {
    .snav-desktop { display: none !important; }
    .snav-hamburger { display: inline-flex !important; }
  }

  /* ── Responsive ── */
  @media (max-width: 1040px) {
    .steps-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .timeline-grid { grid-template-columns: 1fr 1fr !important; }
  }
  @media (max-width: 960px) {
    .grid-3 { grid-template-columns: 1fr 1fr; }
    .picker-grid { grid-template-columns: 1fr !important; }
    .contact-grid { grid-template-columns: 1fr !important; }
    .incl-grid { grid-template-columns: 1fr 1fr !important; }
    .fulfill-row { grid-template-columns: 44px 1fr !important; row-gap: 6px !important; }
    .fulfill-row > div:last-child { grid-column: 1 / -1; }
    .flatplan-grid { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 880px) {
    /* stack all split/hero two-column sections */
    .container > div[style*="grid-template-columns"],
    .container[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .hero-visual { order: -1; }
    .steps-grid { grid-template-columns: 1fr 1fr !important; }
  }
  @media (max-width: 760px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr !important; }
    .incl-grid { grid-template-columns: 1fr !important; }
    .footer-top { grid-template-columns: 1fr !important; gap: 32px !important; }
    .footer-cols { grid-template-columns: 1fr 1fr !important; }
    .section { padding: 3.5rem 0; }
    .section-sm { padding: 2.5rem 0; }
  }
  @media (max-width: 560px) {
    .steps-grid { grid-template-columns: 1fr !important; }
    .timeline-grid { grid-template-columns: 1fr !important; }
    .footer-cols { grid-template-columns: 1fr !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    html { scroll-behavior: auto; }
  }
/* ── Static-build component CSS — replaces React hover/focus/active state ── */

/* Buttons (inline base styles are on the element; hover must win) */
.btn { will-change: transform; }
.btn-primary:hover { background: var(--color-purple-700) !important; border-color: var(--color-purple-700) !important; transform: translateY(-1px) !important; }
.btn-green:hover { background: var(--color-green-700) !important; border-color: var(--color-green-700) !important; transform: translateY(-1px) !important; }
.btn-outline:hover { background: var(--color-purple-50) !important; transform: translateY(-1px) !important; }
.btn-ghost:hover { background: var(--color-neutral-75) !important; border-color: var(--color-neutral-75) !important; transform: translateY(-1px) !important; }
.btn-dark:hover { background: var(--color-neutral-800) !important; border-color: var(--color-neutral-800) !important; transform: translateY(-1px) !important; }
.btn-white:hover { background: var(--color-purple-50) !important; border-color: var(--color-purple-50) !important; transform: translateY(-1px) !important; }
.btn-outline-light:hover { background: rgba(255,255,255,.12) !important; transform: translateY(-1px) !important; }

/* Cards */
.card-hover:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-3px) !important; border-color: var(--border-default) !important; }

/* Form fields */
.f-input:focus { box-shadow: var(--focus-ring) !important; border-color: var(--color-purple-400) !important; }
.f-input.f-error { border-color: var(--color-error) !important; }
.f-err-msg { font-family: var(--font-ui); font-size: .8125rem; color: var(--color-error); display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; }

/* Footer links */
.flink:hover { color: #fff !important; }

/* Services dropdown items */
.svc-item:hover { background: var(--color-neutral-50) !important; }

/* Sticky nav scrolled state */
[data-site-nav].scrolled { border-bottom-color: var(--border-subtle) !important; }

/* In-page nav active state */
.inpage-link.inpage-active { color: var(--color-purple-700) !important; font-weight: 600 !important; border-bottom-color: var(--color-purple-600) !important; }

/* Anchor targets clear the sticky nav + in-page nav */
main [id] { scroll-margin-top: 130px; }

/* Hero tile-cluster art — desktop only; hide before it can crowd the copy */
@media (max-width: 1080px) { .hero-art { display: none !important; } }

/* Internal "needs verified data" placeholders — hidden in production.
   Populate with approved proof content, then remove these rules. */
div:has(> .ph-marker) { display: none !important; }
.ph-marker { display: none !important; }