:root {
    --background:       #000000;
    --foreground:       #ffffff;

    --fg-90:            rgba(255, 255, 255, 0.94);
    --fg-80:            rgba(255, 255, 255, 0.86);
    --fg-70:            rgba(255, 255, 255, 0.80);
    --fg-60:            rgba(255, 255, 255, 0.72);
    --fg-45:            rgba(255, 255, 255, 0.56);
    --fg-30:            rgba(255, 255, 255, 0.38);

    --border:           rgba(255, 255, 255, 0.14);
    --border-2:         rgba(255, 255, 255, 0.26);
    --surface-1:        rgba(255, 255, 255, 0.055);
    --surface-2:        rgba(255, 255, 255, 0.095);
    --surface-3:        rgba(255, 255, 255, 0.14);

    /* Section terrain, alternating tints give the page a sense of landscape */
    --terrain-clearing: #000000;                          /* default sections */
    --terrain-grove:    #070808;                          /* tinted sections, faint cool charcoal */

    --emerald:          #a7f3d0;
    --emerald-950:      #022c22;

    /* ---------- Liquid Glass tokens (Apple HIG / WCAG 2.2 aligned) ---------- */
    /* Backdrop filter primitives */
    --glass-blur:           24px;
    --glass-saturate:       220%;
    --glass-contrast:       108%;
    /* Bone tint (regular material - default for most contexts) */
    --glass-bone-top:       rgba(246, 244, 237, 0.30);
    --glass-bone-bottom:    rgba(217, 213, 198, 0.22);
    /* Stabilizing scrim - dark plate behind tint, guarantees AAA contrast over any backdrop */
    --glass-scrim-top:      rgba(0, 0, 0, 0.20);
    --glass-scrim-bottom:   rgba(0, 0, 0, 0.30);
    /* Specular pearl highlight (catches light at top edge) */
    --glass-pearl:          rgba(255, 255, 255, 0.32);
    /* Inset highlights and rim (border, highlight, inner stroke - per Apple, do "readability heavy lifting") */
    --glass-highlight-top:  rgba(255, 255, 255, 0.65);
    --glass-shadow-bottom:  rgba(0, 0, 0, 0.10);
    --glass-rim:            rgba(255, 255, 255, 0.12);
    /* Emerald ambient (brand accent, grounds chip in surface) */
    --glass-glow-tight:     rgba(167, 243, 208, 0.34);
    --glass-glow-loose:     rgba(167, 243, 208, 0.50);

    --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 96px; }
  body {
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: -0.011em;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }
  section[id] { scroll-margin-top: 96px; }
  ::selection { background: var(--emerald); color: var(--emerald-950); }

  .font-sans { font-family: var(--font-sans); }
  .font-mono { font-family: var(--font-mono); }

  a { color: inherit; text-decoration: none; }
  button, input, textarea, select { font: inherit; color: inherit; }
  .tnum { font-variant-numeric: tabular-nums; }
  main { width: 100%; max-width: 100%; overflow-x: hidden; }

  /* Typography utilities (Floria system) */
  h1, h2, h3, h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.94;
    margin: 0;
    color: var(--foreground);
    text-wrap: balance;
  }
  h1 em, h2 em, h3 em {
    font-style: italic;
    font-weight: 400;
    color: var(--fg-70);
    letter-spacing: -0.03em;
    /* Trailing pad - prevents italic words crowding next word under tight tracking */
    padding-right: 0.06em;
  }

  /* Skip */
  .skip-link {
    position: absolute; top: -100px; left: 0; z-index: 100;
    background: var(--foreground); color: var(--background);
    padding: 10px 16px;
    font-family: var(--font-sans);
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
  }
  .skip-link:focus { top: 0; }

  :focus-visible {
    outline: 1px solid var(--foreground);
    outline-offset: 4px;
    border-radius: 2px;
  }

  /* Wrap */
  .wrap     { max-width: 1360px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
  .wrap-nar { max-width: 920px;  margin: 0 auto; padding-left: 32px; padding-right: 32px; }
  @media (max-width: 720px) {
    .wrap, .wrap-nar { padding-left: 20px; padding-right: 20px; }
  }

  /* ---------- Badge (Floria glassmorphism pill) ---------- */
  .badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 22px;
    border-radius: 9999px;
    border: 1px solid rgba(167, 243, 208, 0.45);
    background: rgba(2, 44, 34, 0.55);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 36px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 2px 14px rgba(0, 0, 0, 0.4),
      0 0 24px -6px rgba(167, 243, 208, 0.4);
  }
  .badge .pip {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--emerald);
    box-shadow: 0 0 10px rgba(167, 243, 208, 0.9);
    animation: pip-pulse 2.4s ease-in-out infinite;
  }
  @keyframes pip-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(167, 243, 208, 0.6); opacity: 0.85; }
    50%      { box-shadow: 0 0 14px rgba(167, 243, 208, 1);   opacity: 1; }
  }
  .badge .pip {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--emerald);
    display: inline-block;
    box-shadow: 0 0 10px rgba(167, 243, 208, 0.9);
    animation: pip-pulse 2.4s ease-in-out infinite;
  }

  /* ---------- Nav: single morphing header (Floria pattern) ---------- */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    padding: 24px 20px;
    transition: padding 520ms cubic-bezier(0.25, 1, 0.35, 1);
    will-change: padding;
  }
  /* Top-of-page scrim - a soft dark gradient sits behind the nav while we're
     unscrolled, so links + wordmark stay legible against busy hero imagery.
     Fades out once the user starts scrolling and the morphing chip takes over. */
  .nav::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.30) 50%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    transition: opacity 520ms cubic-bezier(0.25, 1, 0.35, 1);
    z-index: -1;
  }
  .nav.is-stuck::before { opacity: 0; }
  .nav-inner {
    width: 100%;
    max-width: 1360px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 8px 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: blur(0px) saturate(100%);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    border: 1px solid transparent;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition:
      max-width    520ms cubic-bezier(0.25, 1, 0.35, 1),
      padding      520ms cubic-bezier(0.25, 1, 0.35, 1),
      border-radius 520ms cubic-bezier(0.25, 1, 0.35, 1),
      background   520ms cubic-bezier(0.25, 1, 0.35, 1),
      border-color 520ms cubic-bezier(0.25, 1, 0.35, 1),
      box-shadow   520ms cubic-bezier(0.25, 1, 0.35, 1),
      backdrop-filter 520ms cubic-bezier(0.25, 1, 0.35, 1),
      -webkit-backdrop-filter 520ms cubic-bezier(0.25, 1, 0.35, 1);
    will-change: max-width, padding, border-radius, background, backdrop-filter;
  }
  .nav.is-stuck { padding: 14px 16px; }
  .nav.is-stuck .nav-inner {
    max-width: 1120px;
    padding: 8px 8px 8px 22px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
      0 10px 34px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  /* Slight size tightening in glass state */
  .nav-inner .btn {
    transition: height 420ms cubic-bezier(0.25, 1, 0.35, 1),
                padding 420ms cubic-bezier(0.25, 1, 0.35, 1),
                font-size 420ms cubic-bezier(0.25, 1, 0.35, 1),
                background 220ms, color 220ms, border-color 220ms;
  }
  .nav.is-stuck .nav-inner .btn {
    height: 40px;
    padding: 0 20px;
    font-size: 13px;
  }
  .nav-inner .wordmark {
    transition: font-size 420ms cubic-bezier(0.25, 1, 0.35, 1);
  }
  .nav.is-stuck .nav-inner .wordmark { font-size: 19px; }
  .nav-inner .nav-links { gap: 32px; transition: gap 420ms cubic-bezier(0.25, 1, 0.35, 1); }
  .nav.is-stuck .nav-inner .nav-links { gap: 26px; }
  .nav-inner .nav-link { transition: font-size 420ms cubic-bezier(0.25, 1, 0.35, 1), color 220ms; }
  .nav.is-stuck .nav-inner .nav-link { font-size: 13.5px; }

  @media (max-width: 860px) {
    .nav.is-stuck .nav-inner { padding: 8px 8px 8px 18px; gap: 12px; }
    .nav.is-stuck .nav-inner .nav-links { display: none !important; }
    .nav.is-stuck .nav-inner .wordmark { font-size: 17px; }
  }

  .nav-wrap { display: flex; align-items: center; justify-content: space-between; }
  .wordmark {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.035em;
    color: var(--foreground);
  }
  .nav-inner > .wordmark { justify-self: start; }
  .nav-inner > .btn { justify-self: end; }

  .nav-links {
    display: flex; align-items: center; gap: 32px;
  }
  .nav-link {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: color 220ms cubic-bezier(0.25, 1, 0.35, 1), text-shadow 220ms;
  }
  .nav-link:hover { color: #ffffff; }
  /* Once the chip is stuck the dark glass behind the links takes over;
     drop the shadow and use the regular muted token. */
  .nav.is-stuck .nav-inner .nav-link {
    color: var(--fg-70);
    text-shadow: none;
  }
  .nav.is-stuck .nav-inner .nav-link:hover { color: var(--foreground); }

  /* ---------- Services dropdown ---------- */
  /* Make the nav header itself the positioning context, so the menu
     centers under the whole bar instead of under the (off-center) trigger. */
  .nav { position: fixed; }
  .nav-dropdown {
    position: static;
    display: inline-flex;
    align-items: center;
  }
  /* The .nav-inner already has will-change which creates a containing block,
     so the menu (fixed) is anchored to .nav-inner. We use absolute positioning
     within .nav-inner and center to it instead, which centers harmoniously
     under the nav chip whether expanded or compact. */
  .nav-inner { position: relative; }
  .nav-link--trigger {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .nav-link--trigger .nav-chevron {
    width: 10px; height: 8px;
    transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1), color 220ms;
    color: currentColor;
    opacity: 0.7;
  }
  .nav-link--trigger[aria-expanded="true"] {
    color: var(--foreground);
  }
  .nav-link--trigger[aria-expanded="true"] .nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
  }

  .nav-menu {
    /* Centered to the nav chip itself, harmonious with the wordmark/CTA
       and the centered hero below, regardless of where the trigger sits.
       Width-aware margin trick (instead of translateX) so the menu always
       lands centered even with stacking-context quirks from ancestor
       will-change/backdrop-filter. */
    --nm-w: min(880px, calc(100vw - 32px));
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    width: var(--nm-w);
    margin-left: calc(var(--nm-w) / -2);
    /* Animate translateY/scale only; horizontal centering is handled by margin. */
    transform: translateY(-6px) scale(0.985);
    transform-origin: top center;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 240ms cubic-bezier(0.32, 0.72, 0, 1),
      transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 90;
  }
  .nav-dropdown.is-open .nav-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  /* Soft connector between the trigger and the menu, so the menu doesn't
     read as floating off in space. */
  .nav-menu::before {
    content: '';
    position: absolute;
    top: -7px; left: 50%;
    width: 14px; height: 14px;
    margin-left: -7px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    border-top-left-radius: 3px;
    z-index: 0;
    pointer-events: none;
  }
  /* Bezel shell - matches the comparison/glass shells throughout the site */
  .nav-menu-shell {
    position: relative;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.55),
      0 8px 24px rgba(0, 0, 0, 0.4);
  }
  .nav-menu-core {
    position: relative;
    border-radius: 17px;
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(167, 243, 208, 0.06) 0%, transparent 60%),
      linear-gradient(180deg, #0c0c0c 0%, #060606 100%);
    padding: 20px 22px 16px;
    overflow: hidden;
  }
  /* Faint top hairline that matches .sec-head dividers */
  .nav-menu-core::before {
    content: '';
    position: absolute;
    top: 0; left: 24px; right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 243, 208, 0.32), transparent);
  }
  .nav-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.05fr;
    gap: 8px 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav-menu-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .nav-menu-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-50);
    margin-bottom: 6px;
    padding-left: 10px;
  }
  .nav-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 200ms ease, transform 220ms cubic-bezier(0.25, 1, 0.35, 1);
    text-decoration: none;
  }
  .nav-menu-item:hover {
    background: rgba(255, 255, 255, 0.04);
  }
  .nav-menu-item:hover .nav-menu-icon {
    color: var(--emerald);
    border-color: rgba(167, 243, 208, 0.4);
    background: rgba(167, 243, 208, 0.08);
  }
  .nav-menu-icon {
    flex: 0 0 24px;
    width: 24px; height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--fg-70);
    transition: color 220ms, border-color 220ms, background 220ms;
  }
  .nav-menu-icon svg {
    width: 12px; height: 12px;
  }
  .nav-menu-title {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--foreground);
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
  }

  /* Right-side help panel */
  .nav-menu-help {
    grid-column: 4;
    position: relative;
    padding: 14px 14px 12px;
    border-radius: 12px;
    background:
      radial-gradient(ellipse 80% 100% at 100% 0%, rgba(167, 243, 208, 0.06), transparent 70%),
      rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .nav-menu-help-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--emerald);
  }
  .nav-menu-help-eyebrow .pip {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--emerald);
    box-shadow: 0 0 8px rgba(167, 243, 208, 0.6);
  }
  .nav-menu-help-title {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.022em;
    color: var(--foreground);
    margin: 2px 0 0;
    line-height: 1.15;
  }
  .nav-menu-help-body {
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.45;
    color: var(--fg-60);
    margin: 0 0 4px;
    text-wrap: balance;
  }
  .nav-menu-help-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--emerald);
    text-decoration: none;
    transition: gap 220ms cubic-bezier(0.32, 0.72, 0, 1), color 220ms;
  }
  .nav-menu-help-cta svg { width: 12px; height: 12px; }
  .nav-menu-help-cta:hover { gap: 10px; color: #d6f8e7; }

  /* Footer link beneath the grid */
  .nav-menu-foot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    padding: 3px 6px;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-70);
    text-decoration: none;
    transition: gap 220ms cubic-bezier(0.32, 0.72, 0, 1), color 220ms;
  }
  .nav-menu-foot svg { width: 12px; height: 12px; }
  .nav-menu-foot:hover { gap: 10px; color: var(--emerald); }

  @media (max-width: 980px) {
    .nav-menu { --nm-w: min(720px, calc(100vw - 32px)); width: var(--nm-w); margin-left: calc(var(--nm-w) / -2); }
    .nav-menu-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 8px 20px;
    }
    .nav-menu-help { grid-column: 1 / -1; margin-top: 8px; }
  }
  @media (max-width: 860px) {
    .nav-dropdown { display: none; }
  }

  /* ---------- Buttons (Floria pills) ---------- */
  .btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px;
    border-radius: 9999px;
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition:
      background 260ms cubic-bezier(0.32, 0.72, 0, 1),
      color 220ms cubic-bezier(0.32, 0.72, 0, 1),
      border-color 220ms cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 260ms cubic-bezier(0.32, 0.72, 0, 1),
      transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
    white-space: nowrap;
    border: 1px solid transparent;
  }
  .btn:active { transform: scale(0.98); }
  .btn-hero    { height: 56px; padding: 0 32px; font-size: 15px; }
  .btn-default { height: 48px; padding: 0 26px; font-size: 14.5px; }
  .btn-compact { height: 42px; padding: 0 20px; font-size: 13.5px; }

  /* Primary CTA: liquid-glass bone chip (heavy blur + low-opacity bone + emerald ambient) */
  /* Primary CTA - 3-layer liquid glass (pearl spec + bone tint + stabilizing scrim).
     Token-driven; scrim guarantees AAA contrast against ANY backdrop, eliminating
     the need for per-variant opacity tweaks. */
  .btn-primary {
    background:
      /* Layer 1 (top): pearl specular highlight - catches light, glass-chip illusion */
      radial-gradient(ellipse 80% 110% at 50% -10%, var(--glass-pearl) 0%, transparent 55%),
      /* Layer 2 (mid): bone tint - the warm machined-disc surface */
      linear-gradient(180deg, var(--glass-bone-top) 0%, var(--glass-bone-bottom) 100%),
      /* Layer 3 (bottom): stabilizing scrim - dims whatever bleeds through, locks contrast */
      linear-gradient(180deg, var(--glass-scrim-top) 0%, var(--glass-scrim-bottom) 100%);
    color: #0a0a0a;
    border-color: transparent;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
    box-shadow:
      inset 0 1.5px 0 var(--glass-highlight-top),
      inset 0 -1.5px 0 var(--glass-shadow-bottom),
      inset 0 0 0 1px var(--glass-rim),
      0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(167, 243, 208, 0.18),
      0 6px 18px rgba(0, 0, 0, 0.50);
  }
  .btn-primary:hover {
    /* Hover: lift bone, brighten pearl, tighten the emerald rim. Scrim stays - keeps contrast stable */
    background:
      radial-gradient(ellipse 80% 110% at 50% -10%, rgba(255, 255, 255, 0.44) 0%, transparent 55%),
      linear-gradient(180deg, rgba(253, 251, 245, 0.46) 0%, rgba(231, 227, 211, 0.36) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.24) 100%);
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
      inset 0 -1.5px 0 rgba(0, 0, 0, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
      0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 0 1.5px rgba(167, 243, 208, 0.30),
      0 0 16px -8px rgba(167, 243, 208, 0.45),
      0 8px 22px rgba(0, 0, 0, 0.56);
  }
  .btn-primary:active {
    background:
      radial-gradient(ellipse 80% 110% at 50% -10%, rgba(255, 255, 255, 0.22) 0%, transparent 55%),
      linear-gradient(180deg, rgba(232, 228, 211, 0.42) 0%, rgba(209, 205, 185, 0.32) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.32) 100%);
  }

  /* WCAG 2.2 - prefers-reduced-transparency fallback (mandatory per Apple HIG) */
  @media (prefers-reduced-transparency: reduce) {
    .btn-primary,
    .btn-primary:hover,
    .btn-primary:active {
      background: linear-gradient(180deg, #f4f2ec 0%, #d9d5c6 100%);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  .btn-ghost {
    background: transparent;
    color: var(--foreground);
    border-color: transparent;
  }
  .btn-ghost:hover { background: var(--surface-2); }

  .btn-outline {
    background: transparent;
    color: var(--foreground);
    border-color: var(--border-2);
  }
  .btn-outline:hover { border-color: var(--foreground); background: var(--surface-1); }

  /* Hero + Apply CTAs: high-contrast, attention-demanding pills */
  .hero .btn-primary,
  .hero .btn-primary:hover,
  .hero .btn-primary:active,
  .apply .btn-primary,
  .apply .btn-primary:hover,
  .apply .btn-primary:active {
    background: linear-gradient(180deg, #b9f8d6 0%, #7fe5b3 100%);
    color: #022c22;
    font-weight: 600;
    letter-spacing: -0.005em;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
      inset 0 -1.5px 0 rgba(2, 44, 34, 0.18),
      0 0 0 1px rgba(167, 243, 208, 0.55),
      0 10px 28px rgba(0, 0, 0, 0.45),
      0 0 36px -6px rgba(167, 243, 208, 0.55);
  }
  .hero .btn-primary:hover,
  .apply .btn-primary:hover {
    background: linear-gradient(180deg, #c8fbe0 0%, #8aedbe 100%);
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.7),
      inset 0 -1.5px 0 rgba(2, 44, 34, 0.18),
      0 0 0 1.5px rgba(167, 243, 208, 0.75),
      0 12px 32px rgba(0, 0, 0, 0.5),
      0 0 48px -4px rgba(167, 243, 208, 0.7);
    transform: translateY(-1px);
  }
  .hero .btn-primary:active,
  .apply .btn-primary:active {
    background: linear-gradient(180deg, #a4f0c9 0%, #6cd9a3 100%);
    transform: translateY(0) scale(0.99);
  }
  .hero .btn-primary .btn-icon,
  .apply .btn-primary .btn-icon {
    background: rgba(2, 44, 34, 0.18);
    color: #022c22;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }
  .hero .btn-primary:hover .btn-icon,
  .apply .btn-primary:hover .btn-icon { background: rgba(2, 44, 34, 0.28); }

  /* Secondary: solid dark glass with a clear border so it reads as a button */
  .hero .btn-outline,
  .apply .btn-outline {
    background: rgba(10, 10, 10, 0.62);
    color: #ffffff;
    font-weight: 500;
    border-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 6px 20px rgba(0, 0, 0, 0.45);
  }
  .hero .btn-outline:hover,
  .apply .btn-outline:hover {
    background: rgba(10, 10, 10, 0.78);
    border-color: #ffffff;
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 8px 24px rgba(0, 0, 0, 0.55);
  }

  /* ---------- HERO (centered horizontally, content anchored higher) ---------- */
  .hero {
    position: relative;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* Pushed lower to recover the vertical mass lost when the H1 went from 3 lines to 2.
       Sub + CTAs now sit at roughly the same absolute Y as before. */
    padding-top: clamp(180px, 22vh, 260px);
    padding-bottom: 72px;
    background: var(--background);
    overflow: hidden;
    z-index: 20;
    text-align: center;
  }
  .hero-bg {
    position: absolute; inset: 0; z-index: 0;
  }
  .hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Radial darken centered behind text, keeps image visible at edges */
  .hero-overlay-h {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 70% 70% at 50% 48%, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.72) 45%, rgba(0,0,0,0.45) 100%),
      linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.45) 100%);
    z-index: 1;
  }
  /* Bottom-to-top fade into next section */
  .hero-overlay-b {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 12rem;
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    z-index: 2; pointer-events: none;
  }
  .hero-inner {
    position: relative; z-index: 3;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  h1.hero-h1 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(3rem, 6.5vw, 6.25rem);
    letter-spacing: -0.052em;
    line-height: 0.96;
    color: #ffffff;
    margin: 0 0 56px;
    /* Auto width sized to its widest line ("Making the impossible") so the
       explicit <br> always produces 2 lines, never 3. */
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-wrap: nowrap;
    text-shadow: 0 1px 1px rgba(0,0,0,0.45), 0 2px 24px rgba(0,0,0,0.55);
  }
  /* On narrow viewports allow wrap so the H1 doesn't overflow. */
  @media (max-width: 720px) {
    h1.hero-h1 {
      width: auto;
      text-wrap: balance;
      max-width: 22ch;
    }
  }
  .hero-h1 em {
    font-style: italic;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: -0.035em;
  }
  .hero-sub {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(19px, 1.55vw, 23px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.96);
    max-width: 54ch;
    margin: 0 auto 44px;
    text-wrap: balance;
    text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.45);
  }
  .hero-ctas {
    display: flex; flex-direction: column; align-items: center; gap: 18px;
  }

  /* Compelling primary CTA: dark glass pill with an emerald shimmer that sweeps across */
  .hero-cta-main {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    height: 64px;
    padding: 0 38px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.005em;
    /* Static base, visible emerald rim + crisp dark glass so the button reads
       as part of the design even at the quiet phase of the breath cycle */
    border-color: rgba(167, 243, 208, 0.28) !important;
    /* Soft, breathing emerald halo so it pulses with quiet urgency */
    animation: cta-breathe 3.4s ease-in-out infinite;
  }
  /* Size variants for nav (compact) and inline (default) */
  .hero-cta-main.btn-compact {
    height: 42px;
    padding: 0 22px;
    font-size: 13.5px;
    font-weight: 600;
  }
  .hero-cta-main.btn-default {
    height: 52px;
    padding: 0 28px;
    font-size: 14.5px;
  }
  .hero-cta-main .cta-spark {
    position: absolute;
    top: 0; left: -40%;
    width: 35%; height: 100%;
    background: linear-gradient(
      105deg,
      transparent 0%,
      rgba(167, 243, 208, 0.0) 30%,
      rgba(167, 243, 208, 0.55) 50%,
      rgba(255, 255, 255, 0.35) 60%,
      transparent 80%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 1;
    animation: cta-sweep 3.6s ease-in-out infinite;
  }
  .hero-cta-main > *:not(.cta-spark) { position: relative; z-index: 2; }
  .hero-cta-main .btn-icon {
    background: rgba(167, 243, 208, 0.22);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(167, 243, 208, 0.55);
  }
  .hero-cta-main:hover {
    transform: translateY(-2px);
    border-color: rgba(167, 243, 208, 0.65) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 0 0 1px rgba(167, 243, 208, 0.35),
      0 14px 36px rgba(0, 0, 0, 0.55),
      0 0 48px -8px rgba(167, 243, 208, 0.55) !important;
  }
  .hero-cta-main:hover .btn-icon { background: rgba(167, 243, 208, 0.32); }

  @keyframes cta-sweep {
    0%   { left: -40%; opacity: 0; }
    20%  { opacity: 1; }
    60%  { left: 110%; opacity: 1; }
    100% { left: 110%; opacity: 0; }
  }
  @keyframes cta-breathe {
    0%, 100% {
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 6px 20px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(167, 243, 208, 0.28),
        0 0 32px -8px rgba(167, 243, 208, 0.42);
    }
    50% {
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 8px 26px rgba(0, 0, 0, 0.5),
        0 0 0 1.5px rgba(167, 243, 208, 0.42),
        0 0 48px -6px rgba(167, 243, 208, 0.62);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-cta-main, .hero-cta-main .cta-spark { animation: none; }
  }

  /* Nav-compact variant: keep the dark-glass styling but kill all animation,
     the header pill should sit quiet, not pulse. */
  .hero-cta-main--compact,
  .hero-cta-main--compact .cta-spark {
    animation: none !important;
  }
  .hero-cta-main--compact .cta-spark { display: none; }

  .cta-microcopy {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  }
  .cta-microcopy .cta-pip {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--emerald);
    box-shadow: 0 0 10px rgba(167, 243, 208, 0.9);
    animation: pip-pulse 2.4s ease-in-out infinite;
  }

  /* ---------- Section base (Floria py-24 md:py-32 bg-background) ---------- */
  .sec {
    position: relative;
    background: var(--background);
    padding: clamp(80px, 10vw, 128px) 0;
    z-index: 10;
  }
  /* Soft fading hairline between sections, feels like a horizon, not a wall.
     Replaces a flat 1px border with a centered gradient that fades at the edges. */
  .sec + .sec::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: min(1100px, 86%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.10) 30%,
      rgba(167, 243, 208, 0.22) 50%,
      rgba(255, 255, 255, 0.10) 70%,
      transparent 100%);
    pointer-events: none;
    z-index: 11;
  }

  /* Alternating terrain, every other "named" section gets a subtle elevation
     and a faint emerald ambient glow. Creates rhythm as you scroll without
     being garish. The glow is fixed to the section's top corners so it
     reads as light, not a panel. */
  #why,
  #process,
  #clients {
    background: var(--terrain-grove);
  }
  #why::before,
  #process::before,
  #clients::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 40% at 15% 0%, rgba(167, 243, 208, 0.045), transparent 60%),
      radial-gradient(ellipse 70% 50% at 90% 100%, rgba(255, 255, 255, 0.025), transparent 65%);
    pointer-events: none;
    z-index: 0;
  }
  #why > .wrap,
  #process > .wrap,
  #clients > .wrap {
    position: relative;
    z-index: 1;
  }

  .sec-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-60);
    margin-bottom: 20px;
  }
  .sec-eyebrow::before {
    content: ''; width: 20px; height: 1px; background: var(--fg-45); display: inline-block;
  }
  h2.sec-h2 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    letter-spacing: -0.05em;
    line-height: 0.95;
    color: var(--foreground);
    max-width: 20ch;
    margin: 0 0 20px;
    text-wrap: balance;
  }
  .sec-h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--fg-70);
    letter-spacing: -0.04em;
  }
  .sec-head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: end;
    margin-bottom: clamp(48px, 7vw, 88px);
  }
  .sec-head .sub {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--fg-60);
    max-width: 46ch;
    margin: 0;
    text-wrap: balance;
  }
  @media (max-width: 760px) {
    .sec-head { grid-template-columns: 1fr; gap: 20px; }
  }

  /* ---------- Stats row ---------- */
  .stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--border);
  }
  .stat-cell {
    padding: 40px 28px 12px;
    border-right: 1px solid var(--border);
  }
  .stat-cell:last-child { border-right: none; }
  .stat-fig {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(2.4rem, 4.8vw, 3.8rem);
    line-height: 1;
    letter-spacing: -0.055em;
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
  }
  .stat-label {
    display: block;
    margin-top: 20px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-60);
  }
  .stat-desc {
    margin-top: 12px;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--fg-60);
    max-width: 26ch;
  }
  @media (max-width: 900px) {
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .stat-cell:nth-child(2) { border-right: none; }
    .stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid var(--border); }
  }
  @media (max-width: 500px) {
    .stat-row { grid-template-columns: 1fr; }
    .stat-cell { border-right: none; border-bottom: 1px solid var(--border); }
    .stat-cell:last-child { border-bottom: none; }
  }

  /* ---------- Process ---------- */
  .process-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: start;
  }
  @media (max-width: 960px) {
    .process-grid { grid-template-columns: 1fr; gap: 48px; }
  }
  .process-image {
    position: sticky;
    top: 112px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 16px;
    background: var(--surface-1);
    isolation: isolate;
    /* Depth shadow so image feels embedded, not floating */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }
  .process-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* Shift focal point down so buildings dominate, sky compressed */
    object-position: center 70%;
    display: block;
    /* Darken + grade to match dark UI luminance and contrast */
    filter: brightness(0.75) contrast(1.15) saturate(0.9);
    /* Compress composition - trim airy edges, increase density */
    transform: scale(1.05);
    transition: transform 1400ms cubic-bezier(0.25, 1, 0.35, 1),
                filter 600ms cubic-bezier(0.25, 1, 0.35, 1);
  }
  /* Gradient overlay - unifies image into the dark UI */
  .process-image::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
    pointer-events: none;
    z-index: 1;
  }
  .process-image:hover img { transform: scale(1.08); }

  .step-list { display: flex; flex-direction: column; }
  .step-row {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 20px;
    padding: 32px 0;
    border-top: 1px solid var(--border);
  }
  .step-row:last-child { border-bottom: 1px solid var(--border); }
  .step-num {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: var(--fg-45);
    letter-spacing: 0.04em;
    padding-top: 6px;
  }
  .step-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--foreground);
    margin: 0 0 10px;
  }
  .step-desc {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--fg-60);
    max-width: 46ch;
    margin: 0;
  }
  @media (max-width: 600px) {
    .step-row { grid-template-columns: 60px 1fr; gap: 14px; }
  }

  /* ---------- Services (3-col grid like Floria products) ---------- */
  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  @media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .grid-3 { grid-template-columns: 1fr; } }

  /* ---------- Full instrument shelf (12-product grid) ---------- */
  .instrument-shelf {
    margin-top: 56px;
    padding: 32px 28px 24px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(167, 243, 208, 0.04) 0%, transparent 60%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, transparent 100%);
  }
  .instrument-shelf-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
  }
  .instrument-shelf-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--emerald);
    flex: 0 0 auto;
  }
  .instrument-shelf-rule {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(167, 243, 208, 0.32), transparent);
  }
  .instrument-shelf-meta {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-50);
  }
  .instrument-shelf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 32px;
  }
  @media (max-width: 960px) { .instrument-shelf-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .instrument-shelf-grid { grid-template-columns: 1fr; } }
  .instrument-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 8px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 220ms ease, padding 220ms cubic-bezier(0.32, 0.72, 0, 1);
    position: relative;
  }
  .instrument-row::after {
    content: '';
    position: absolute;
    left: 8px; right: 8px; bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.04);
  }
  .instrument-row:hover {
    background: rgba(167, 243, 208, 0.04);
  }
  .instrument-row:hover .instrument-row-icon {
    color: var(--emerald);
    border-color: rgba(167, 243, 208, 0.4);
    background: rgba(167, 243, 208, 0.10);
  }
  .instrument-row:hover .instrument-row-name {
    color: var(--foreground);
  }
  .instrument-row-icon {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--fg-70);
    transition: color 220ms, border-color 220ms, background 220ms;
  }
  .instrument-row-icon svg {
    width: 16px; height: 16px;
  }
  .instrument-row-name {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--fg-70);
    transition: color 220ms;
    line-height: 1.2;
  }

  .card {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 28px 26px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 240px;
    transition: background 280ms cubic-bezier(0.25, 1, 0.35, 1),
                border-color 280ms cubic-bezier(0.25, 1, 0.35, 1),
                transform 280ms cubic-bezier(0.25, 1, 0.35, 1);
  }
  .card:hover {
    background: var(--surface-2);
    border-color: var(--border-2);
    transform: translateY(-3px);
  }
  .card .card-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-45);
    margin-bottom: 18px;
  }
  .card h3 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1.35rem, 1.9vw, 1.6rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--foreground);
    margin: 0 0 12px;
  }
  .card p {
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--fg-60);
    margin: 0;
    max-width: 46ch;
  }
  .card .card-foot {
    margin-top: auto;
    padding-top: 26px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--fg-60);
  }
  .card .spec { color: var(--foreground); letter-spacing: 0.04em; }
  .card .quick-add {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--fg-60);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: none;
    transition: color 220ms;
  }
  .card:hover .quick-add { color: var(--foreground); }

  /* Flagship card: larger / spans 2 cols on desktop */
  .card-flag {
    grid-column: span 2;
    background: var(--surface-2);
    padding: 44px 40px;
    min-height: 320px;
  }
  .card-flag:hover { background: var(--surface-3); }
  .card-flag h3 {
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    letter-spacing: -0.05em;
    line-height: 0.98;
    max-width: 16ch;
  }
  .card-flag p { font-size: 16px; max-width: 52ch; margin-top: 4px; }
  .card-flag .card-foot { padding-top: 40px; font-size: 13px; }
  @media (max-width: 960px) {
    .card-flag { grid-column: span 2; padding: 36px 32px; }
  }
  @media (max-width: 560px) {
    .card-flag { grid-column: span 1; padding: 32px 28px; }
  }

  /* ---------- Philosophy (full-bleed w/ image) ---------- */
  .phil {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--background);
  }
  .phil-bg { position: absolute; inset: 0; z-index: 0; }
  .phil-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .phil-bg::after {
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.35) 100%),
      linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0) 100%);
  }
  .phil-inner { position: relative; z-index: 2; padding: clamp(96px, 12vw, 160px) 0; width: 100%; }
  .phil-h2 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(2.8rem, 6vw, 5.6rem);
    line-height: 0.94;
    letter-spacing: -0.055em;
    color: var(--foreground);
    max-width: 16ch;
    margin: 16px 0 28px;
    text-wrap: balance;
  }
  .phil-h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--fg-70);
    letter-spacing: -0.045em;
  }
  .phil-body {
    font-family: var(--font-sans);
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.65;
    color: var(--fg-80);
    max-width: 56ch;
    margin: 0 0 36px;
    text-wrap: balance;
  }

  /* ---------- Partners marquee ---------- */
  .partners {
    padding: clamp(48px, 7vw, 80px) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    background: var(--background);
  }
  .partners-header { display: flex; justify-content: center; margin-bottom: 32px; }
  .partners-rail {
    display: flex;
    gap: 3.5rem;
    white-space: nowrap;
    animation: partners-scroll 85s linear infinite;
    will-change: transform;
  }
  .partners-rail span {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(1.2rem, 1.8vw, 1.65rem);
    letter-spacing: -0.03em;
    color: var(--fg-45);
  }
  .partners-rail .dot {
    font-family: var(--font-mono);
    color: var(--fg-30);
    font-weight: 400;
  }
  @keyframes partners-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }

  /* ---------- Clients / testimonials ---------- */
  .carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  @media (max-width: 900px) { .carousel { grid-template-columns: 1fr; } }
  .quote-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 32px 28px;
    display: flex; flex-direction: column; gap: 22px;
    transition: background 280ms, border-color 280ms, transform 280ms;
  }
  .quote-card:hover {
    background: var(--surface-2);
    border-color: var(--border-2);
    transform: translateY(-3px);
  }
  .quote-top { display: flex; align-items: center; gap: 14px; }
  .initial {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 17px;
    color: var(--foreground);
    letter-spacing: -0.03em;
  }
  .client-name {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--foreground);
  }
  .client-role {
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--fg-45);
    margin-top: 2px;
    letter-spacing: -0.005em;
  }
  .quote-body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.62;
    color: var(--fg-80);
    margin: 0;
    text-wrap: balance;
  }
  .quote-stars {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--emerald);
    letter-spacing: 0.1em;
    opacity: 0.85;
  }

  /* ---------- Apply CTA ---------- */
  .apply {
    position: relative;
    background: var(--background);
    padding: clamp(96px, 12vw, 160px) 0;
    overflow: hidden;
    border-top: 1px solid var(--border);
  }
  .apply::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 60% 60% at 20% 20%, rgba(167,243,208,0.05), transparent 60%),
      radial-gradient(ellipse 50% 40% at 85% 85%, rgba(255,255,255,0.03), transparent 70%);
    pointer-events: none;
  }
  .apply-wrap {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: end;
  }
  @media (max-width: 820px) {
    .apply-wrap { grid-template-columns: 1fr; gap: 48px; }
  }
  .apply-h2 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(2.8rem, 6vw, 5.4rem);
    letter-spacing: -0.055em;
    line-height: 0.94;
    color: var(--foreground);
    max-width: 15ch;
    margin: 20px 0 26px;
    text-wrap: balance;
  }
  .apply-h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--fg-70);
    letter-spacing: -0.045em;
  }
  .apply-sub {
    font-family: var(--font-sans);
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.65;
    color: var(--fg-80);
    max-width: 46ch;
    margin: 0 0 40px;
  }
  .apply-meta { display: flex; flex-direction: column; gap: 0; }
  .apply-meta-row {
    display: flex; align-items: baseline; gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
  }
  .apply-meta-row:last-child { border-bottom: none; }
  .apply-meta-row .k {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--fg-45);
    min-width: 72px;
  }
  .apply-meta-row .v {
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--foreground);
    font-size: 15.5px;
    letter-spacing: -0.01em;
  }

  /* ---------- Footer ---------- */
  footer {
    background: var(--background);
    color: var(--foreground);
    border-top: 1px solid var(--border);
    padding-top: 72px;
    padding-bottom: 36px;
    overflow: hidden;
  }
  .footer-grid {
    display: grid;
    /* 5-col grid: brand (1.6) | company (1) | services-A (1) | services-B (1) | connect (1).
       Services occupies columns 3 + 4 via .footer-col--services-wide; the inner list
       splits into two columns so the long item names sit flush without cutoff. */
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap: 36px;
    align-items: start;
  }
  @media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  }
  @media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  }
  .footer-col--services-wide {
    grid-column: span 2;
  }
  @media (max-width: 900px) {
    .footer-col--services-wide { grid-column: span 2; }
  }
  @media (max-width: 520px) {
    .footer-col--services-wide { grid-column: span 1; }
  }
  .footer-col--services-wide .footer-link-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    row-gap: 0;
  }
  @media (max-width: 520px) {
    .footer-col--services-wide .footer-link-grid { grid-template-columns: 1fr; }
  }
  .footer-col-label {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-60);
    margin-bottom: 16px;
  }
  .footer-link {
    display: block;
    padding: 4px 0;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg-70);
    transition: color 220ms;
  }
  .footer-link:hover { color: var(--foreground); }
  .footer-tagline {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.015em;
    color: var(--fg-60);
    max-width: 34ch;
    margin-top: 14px;
    line-height: 1.5;
  }
  .footer-fine {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-45);
    letter-spacing: 0.06em;
  }

  /* ---------- Footer stage: giant wordmark sits BEHIND the link grid ---------- */
  .footer-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Compressed - footer is informational support, not a hero. Lower bound
       trimmed so the closing CTA above sits nice and tight against this block. */
    padding-top: clamp(28px, 3.5vw, 44px);
    padding-bottom: clamp(14px, 2vw, 24px);
  }
  .footer-stage-inner {
    position: relative;
    z-index: 2;
  }
  /* Background wordmark layer - full viewport width, anchored to the
     COLUMNS area (top of the footer), not the bottom. The columns sit
     over the wordmark glyphs; the legal/copyright line sits clear below. */
  .footer-mark-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 100vw;
    /* Height covers the column zone (top ~60% of footer) so the legal line
       at the very bottom is outside the wordmark band entirely. */
    height: 78%;
    z-index: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    line-height: 0.82;
  }
  .footer-mark-text {
    display: block;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: clamp(6rem, 22vw, 22rem);
    letter-spacing: -0.075em;
    line-height: 0.82;
    /* Subtle white-to-transparent gradient so the columns above remain readable. */
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.40) 0%,
      rgba(255, 255, 255, 0.26) 40%,
      rgba(255, 255, 255, 0.12) 75%,
      transparent 100%
    );
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    white-space: nowrap;
    /* Vertical mask: fade the TOP so the column eyebrows/labels start clean,
       and fade the BOTTOM so it doesn't bleed into the legal line. */
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      #000 18%,
      #000 78%,
      transparent 100%
    );
            mask-image: linear-gradient(
      180deg,
      transparent 0%,
      #000 18%,
      #000 78%,
      transparent 100%
    );
    /* Position cap-height to overlap the columns */
    transform: translateY(6%);
  }
  /* Soft emerald spotlight that sits under the wordmark to add brand depth */
  .footer-mark-glow {
    position: absolute;
    left: 50%; bottom: -10%;
    width: 90%; height: 75%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(167, 243, 208, 0.10), transparent 70%);
    pointer-events: none;
  }
  /* Footer grid sits over the wordmark with a faint dark wash so links stay legible */
  .footer-stage .footer-grid {
    position: relative;
  }
  .footer-stage .footer-grid::before {
    content: '';
    position: absolute;
    inset: -40px -24px -32px -24px;
    background: radial-gradient(ellipse 95% 110% at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 55%, transparent 90%);
    z-index: -1;
    pointer-events: none;
  }
  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: 22px 0 12px;
  }

  @media (max-width: 720px) {
    .footer-mark-text { font-size: clamp(6rem, 30vw, 14rem); }
    .footer-stage { padding-top: 40px; padding-bottom: 36px; }
  }

  /* ============================================================
     VANGUARD UPGRADES - Ethereal Glass + Double-Bezel + Physics
     ============================================================ */

  /* --- Fixed grain overlay (Editorial Luxury texture, Ethereal Glass intensity) --- */
  .noise {
    position: fixed; inset: 0; z-index: 60;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  }

  /* --- Hero radial mesh orbs (Ethereal Glass vibe) --- */
  .hero-mesh {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(38vw 38vw at 12% 20%, rgba(167,243,208,0.10), transparent 60%),
      radial-gradient(44vw 44vw at 85% 82%, rgba(255,255,255,0.06), transparent 65%),
      radial-gradient(30vw 30vw at 50% 110%, rgba(167,243,208,0.05), transparent 70%);
    filter: saturate(1.1);
    mix-blend-mode: screen;
  }

  /* --- Double-bezel nested architecture (Doppelrand) --- */
  .bezel {
    position: relative;
    padding: 6px;
    border-radius: 22px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 1px 0 rgba(255,255,255,0.03);
  }
  .bezel::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }
  .bezel > .bezel-inner {
    position: relative;
    border-radius: 16px;
    background: rgba(10,10,10,0.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
  }

  /* --- Button-in-button trailing icon (magnetic physics) --- */
  .btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.10);
    color: inherit;
    margin-left: 4px;
    margin-right: -8px;
    transition:
      transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
      background 220ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .btn-hero .btn-icon { width: 34px; height: 34px; margin-right: -12px; }
  .btn-compact .btn-icon { width: 24px; height: 24px; margin-right: -6px; }
  .btn:hover .btn-icon { transform: translate(3px, -1px) scale(1.05); }
  /* Primary (bone chip) -> dark tinted icon circle */
  .btn-primary .btn-icon {
    background: rgba(10, 10, 10, 0.10);
    color: #0a0a0a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  .btn-primary:hover .btn-icon { background: rgba(10, 10, 10, 0.18); }
  /* Outline / ghost (dark surface) -> light tinted icon circle */
  .btn-outline:hover .btn-icon,
  .btn-ghost:hover .btn-icon { background: rgba(255, 255, 255, 0.18); }
  .btn-icon svg { width: 14px; height: 14px; display: block; }
  .btn-hero .btn-icon svg { width: 16px; height: 16px; }

  /* --- Stat cells: sit in a bezel tray --- */
  .stat-tray {
    padding: 6px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    margin-top: 12px;
  }
  .stat-tray .stat-row {
    border-top: none;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(10,10,10,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .stat-tray .stat-cell { padding: 44px 30px 36px; }

  /* --- Cards upgraded to nested bezel --- */
  .card {
    padding: 0; background: transparent; border: 0; border-radius: 22px;
    min-height: 260px; overflow: visible;
  }
  .card::before { content: none; }
  .card > .card-shell {
    position: relative;
    height: 100%;
    padding: 6px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    transition: background 420ms cubic-bezier(0.32,0.72,0,1),
                transform 420ms cubic-bezier(0.32,0.72,0,1);
  }
  .card > .card-shell::before {
    content: '';
    position: absolute; inset: 0;
    padding: 1px; border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
    transition: background 420ms cubic-bezier(0.32,0.72,0,1);
  }
  .card > .card-shell > .card-core {
    position: relative;
    height: 100%;
    display: flex; flex-direction: column;
    padding: 28px 26px;
    border-radius: 16px;
    background: rgba(10,10,10,0.74);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
  }
  .card:hover > .card-shell {
    transform: translateY(-4px);
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  }
  .card:hover > .card-shell::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.06));
  }
  .card-flag { grid-column: span 2; min-height: 340px; }
  .card-flag > .card-shell > .card-core { padding: 44px 40px; background: rgba(14,14,14,0.82); }
  @media (max-width: 960px) { .card-flag { grid-column: span 2; } .card-flag > .card-shell > .card-core { padding: 36px 32px; } }
  @media (max-width: 560px) { .card-flag { grid-column: span 1; } .card-flag > .card-shell > .card-core { padding: 32px 28px; } }

  /* --- Process image gets bezel framing (tray + inner plate) --- */
  .process-image {
    padding: 6px; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border-radius: 22px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 28px 80px rgba(0,0,0,0.55);
  }
  .process-image > .process-image-inner {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 4 / 5;
    isolation: isolate;
  }
  .process-image img { border-radius: inherit; }
  .process-image::after { content: none; }
  .process-image > .process-image-inner::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.58));
    pointer-events: none;
    z-index: 1;
  }

  /* --- Testimonials upgraded to bezel + subtle z-axis --- */
  .quote-card {
    padding: 0; background: transparent; border: 0; border-radius: 22px;
  }
  .quote-card > .quote-shell {
    position: relative;
    padding: 6px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    transition: transform 420ms cubic-bezier(0.32,0.72,0,1),
                background 420ms cubic-bezier(0.32,0.72,0,1);
  }
  .quote-card > .quote-shell::before {
    content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
  }
  .quote-card > .quote-shell > .quote-core {
    padding: 32px 28px;
    border-radius: 16px;
    background: rgba(10,10,10,0.74);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    display: flex; flex-direction: column; gap: 22px;
  }
  .quote-card:hover > .quote-shell { transform: translateY(-4px); }
  @media (min-width: 960px) {
    .carousel .quote-card:nth-child(1) > .quote-shell { transform: rotate(-0.35deg); }
    .carousel .quote-card:nth-child(3) > .quote-shell { transform: rotate(0.35deg); }
    .carousel .quote-card:hover > .quote-shell { transform: translateY(-4px) rotate(0deg); }
  }

  /* --- Apply meta in a bezel tray --- */
  .apply-meta-bezel {
    padding: 6px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .apply-meta-bezel > .apply-meta {
    padding: 12px 22px;
    border-radius: 16px;
    background: rgba(10,10,10,0.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  }

  /* --- Eyebrow pill variant (Vanguard ethereal tag) --- */
  .eyebrow-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--fg-80);
    margin-bottom: 20px;
  }
  .eyebrow-pill .pip {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--emerald);
    box-shadow: 0 0 8px rgba(167, 243, 208, 0.7);
  }

  /* --- Reveal with blur + fluid lift --- */
  .reveal {
    opacity: 0;
    transform: translateY(32px);
    filter: blur(8px);
    transition:
      opacity 900ms cubic-bezier(0.32, 0.72, 0, 1),
      transform 900ms cubic-bezier(0.32, 0.72, 0, 1),
      filter 900ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .reveal.is-in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  /* Nav CTA button-in-button compact sizing */
  .nav.is-stuck .btn-icon { width: 22px; height: 22px; margin-right: -4px; }
  /* Note: per-variant button overrides removed - the stabilizing scrim now locks
     contrast across all hero backdrops via the same token-driven .btn-primary rule. */

  /* ============================================================
     CALCULATOR - eligibility tool, Credify-skinned port from Impruvu logic
     ============================================================ */
  .calc-sub {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.55;
    color: var(--fg-60);
    max-width: 60ch;
    margin: 16px auto 0;
    text-align: center;
    text-wrap: balance;
  }
  .calc-disclaimer {
    max-width: 920px;
    margin: 36px auto 56px;
    padding: 18px 22px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.65;
    color: var(--fg-45);
    text-wrap: pretty;
  }
  .calc-disclaimer strong { color: var(--fg-80); font-weight: 600; }
  .calc-disclaimer a {
    color: var(--emerald);
    border-bottom: 1px solid rgba(167, 243, 208, 0.4);
    transition: border-color 220ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .calc-disclaimer a:hover { border-bottom-color: var(--emerald); }
  .calc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    max-width: 1080px;
    margin: 0 auto;
    align-items: start;
  }
  @media (max-width: 860px) {
    .calc-grid { grid-template-columns: 1fr; gap: 40px; }
  }
  .calc-inputs { display: flex; flex-direction: column; gap: 28px; }
  .calc-field { display: flex; flex-direction: column; gap: 10px; }
  .calc-field > label {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    color: var(--foreground);
  }
  .calc-field-head {
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .calc-field-head label {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    color: var(--foreground);
  }
  .calc-value {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.02em;
    color: var(--emerald);
  }
  /* Range slider */
  .calc-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 9999px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(to right,
      var(--emerald) 0%, var(--emerald) 50%,
      rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.10) 100%);
  }
  .calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border-radius: 9999px;
    background: linear-gradient(180deg, #f6f4ed 0%, #d9d5c6 100%);
    border: none;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.65),
      0 2px 8px rgba(0, 0, 0, 0.6),
      0 0 0 3px rgba(167, 243, 208, 0.16);
    cursor: grab;
    transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .calc-slider::-webkit-slider-thumb:hover { transform: scale(1.08); }
  .calc-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(0.96); }
  .calc-slider::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 9999px;
    background: linear-gradient(180deg, #f6f4ed 0%, #d9d5c6 100%);
    border: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 2px 8px rgba(0, 0, 0, 0.6);
    cursor: grab;
  }
  .calc-range-labels {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--fg-45);
    margin-top: 4px;
  }
  /* Industry select */
  .calc-select {
    width: 100%;
    padding: 12px 36px 12px 14px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 14.5px;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23a7f3d0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    transition: border-color 220ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .calc-select:hover { border-color: rgba(255, 255, 255, 0.20); }
  .calc-select:focus { border-color: var(--emerald); }
  .calc-select option { background-color: #0a0a0a; color: var(--foreground); }
  /* Pill toggle group */
  .calc-pills { display: flex; gap: 8px; flex-wrap: wrap; }
  .calc-pill {
    padding: 9px 16px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--fg-70);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition:
      background 220ms cubic-bezier(0.32, 0.72, 0, 1),
      border-color 220ms cubic-bezier(0.32, 0.72, 0, 1),
      color 220ms cubic-bezier(0.32, 0.72, 0, 1),
      transform 180ms cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 220ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .calc-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.20);
    color: var(--foreground);
  }
  .calc-pill:active { transform: scale(0.98); }
  .calc-pill.is-active {
    background: linear-gradient(180deg, #f4f2ec 0%, #d9d5c6 100%);
    border-color: transparent;
    color: #0a0a0a;
    font-weight: 600;
    /* Solid pill, contained shadow only - no glow, no rim bleed */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.50),
      0 1px 2px rgba(0, 0, 0, 0.25);
  }
  /* Result card (bezel) */
  .calc-result {
    position: relative;
    padding: 6px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .calc-result::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
  }
  .calc-result-core {
    position: relative;
    padding: 32px 28px;
    border-radius: 18px;
    background: rgba(10, 10, 10, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex; flex-direction: column; gap: 24px;
  }
  .calc-total-label {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-60);
    margin: 0 0 6px;
  }
  .calc-total {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(2.6rem, 4.5vw, 3.8rem);
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--foreground);
  }
  .calc-breakdown-label {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-45);
    margin: 0;
  }
  .calc-breakdown { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .calc-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .calc-row:last-child { border-bottom: none; }
  .calc-row-label {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-sans);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
  }
  .calc-row-amount {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: -0.015em;
    color: var(--foreground);
  }
  .calc-row-icon {
    width: 16px; height: 16px;
    flex-shrink: 0;
    stroke: var(--emerald);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .calc-row.is-off .calc-row-icon { stroke: rgba(255, 255, 255, 0.20); }
  .calc-row.is-off .calc-row-label { color: rgba(255, 255, 255, 0.35); }
  .calc-row.is-off .calc-row-amount { color: rgba(255, 255, 255, 0.30); }
  .calc-cta { width: 100%; }
  /* Drop emerald ambient glow on the CTA when nested inside the result card -
     the bezel already frames it; the global glow bleeds past the card edge. */
  .calc-result-core .btn-primary {
    box-shadow:
      inset 0 1.5px 0 var(--glass-highlight-top),
      inset 0 -1.5px 0 var(--glass-shadow-bottom),
      inset 0 0 0 1px var(--glass-rim),
      0 1px 0 rgba(255, 255, 255, 0.08),
      0 4px 14px rgba(0, 0, 0, 0.45);
  }
  .calc-result-core .btn-primary:hover {
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
      inset 0 -1.5px 0 rgba(0, 0, 0, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
      0 1px 0 rgba(255, 255, 255, 0.12),
      0 6px 20px rgba(0, 0, 0, 0.55);
  }
  .calc-fine {
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.6;
    color: var(--fg-45);
    text-align: center;
    margin: 0;
    text-wrap: pretty;
  }

  /* ============================================================
     PATH - horizontal iconographic timeline (How It Works)
     ============================================================ */
  .sec-head-center {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    gap: 0;
    margin-bottom: clamp(64px, 9vw, 112px);
  }
  .sec-head-center .eyebrow-pill { margin-bottom: 24px; }
  .sec-sub-center {
    font-family: var(--font-sans);
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.55;
    color: var(--fg-60);
    max-width: 52ch;
    margin: 18px auto 0;
    text-align: center;
    text-wrap: balance;
  }

  /* ---------- Comparison table (Why Credify vs. banks/platforms) ---------- */
  .compare-shell {
    /* Liquid-glass treatment matching .card / .apply-banner / industry cards.
       Layered: ambient emerald wash bleeding from the right side (where the
       Credify column lives), subtle white-to-transparent gradient sheen,
       backdrop blur on the surface, and a masked white rim drawn via ::before.
       This gives the comparison its own atmosphere instead of reading as a
       flat utility table. */
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    padding: 6px;
    border-radius: 28px;
    background:
      radial-gradient(70% 100% at 100% 50%, rgba(16, 185, 129, 0.10) 0%, rgba(16, 185, 129, 0) 60%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%),
      rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    isolation: isolate;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 24px 60px rgba(0, 0, 0, 0.45),
      0 0 60px -20px rgba(16, 185, 129, 0.18),
      0 1px 2px rgba(0, 0, 0, 0.4);
  }
  /* Soft white rim, same vocabulary as cards, banner, hero bezel */
  .compare-shell::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
  }
  .compare-card {
    position: relative;
    border-radius: 22px;
    /* Inner card sits on the glass shell - a touch darker so the surface reads
       as recessed inside the rim. */
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.008) 100%),
      rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.03),
      inset 0 0 40px rgba(0, 0, 0, 0.18);
  }
  .compare-row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
  .compare-row + .compare-row {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  .compare-row {
    transition: background 220ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .compare-row:not(.head):hover {
    background: rgba(255, 255, 255, 0.012);
  }
  .compare-row.head {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .compare-cell {
    padding: 22px 28px;
    font-family: var(--font-sans);
  }
  .compare-cell.label {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-80);
  }
  .compare-cell.value {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
  }
  .compare-cell.value.muted {
    color: var(--fg-45);
    font-weight: 400;
  }
  .compare-cell.value.credify {
    color: var(--foreground);
    background: rgba(167, 243, 208, 0.035);
    border-left: 1px solid rgba(167, 243, 208, 0.10);
  }
  .compare-row.head .compare-cell.credify {
    background: rgba(167, 243, 208, 0.05);
    border-left: 1px solid rgba(167, 243, 208, 0.10);
  }
  .compare-cell .col-hdr {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-60);
  }
  .compare-cell .col-hdr.credify {
    color: var(--emerald);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .compare-cell .col-hdr.credify::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--emerald);
    box-shadow: 0 0 8px rgba(167, 243, 208, 0.6);
  }
  .compare-cell .highlight {
    color: var(--emerald);
    font-weight: 600;
  }
  .compare-cell .mark {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 22px; height: 22px;
  }
  .compare-cell .mark.x { color: var(--fg-30); }
  .compare-cell .mark.check { color: var(--emerald); }
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  @media (max-width: 860px) {
    .compare-cell { padding: 18px 18px; }
    .compare-cell.value { font-size: 15px; }
    .compare-cell.label { font-size: 10.5px; letter-spacing: 0.10em; }
    .compare-cell .col-hdr { font-size: 10.5px; letter-spacing: 0.12em; }
  }
  @media (max-width: 560px) {
    .compare-row { grid-template-columns: 1fr 1fr; }
    .compare-row.head { grid-template-columns: 1fr 1fr; }
    .compare-row .compare-cell.label {
      grid-column: 1 / -1;
      padding: 14px 18px 4px;
      background: rgba(255, 255, 255, 0.025);
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }
    .compare-row.head .compare-cell.label { display: none; }
  }
  h2.path-h2 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(2.8rem, 6vw, 5rem);
    letter-spacing: -0.052em;
    line-height: 0.96;
    color: var(--foreground);
    margin: 0;
    max-width: 18ch;
    text-wrap: balance;
  }
  .path-h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--fg-70);
    letter-spacing: -0.04em;
  }

  .path {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
  }
  /* Dotted connector running through icon centers */
  .path::before {
    content: '';
    position: absolute;
    top: 64px;
    left: 12.5%;
    right: 12.5%;
    height: 0;
    border-top: 1px dashed rgba(167, 243, 208, 0.32);
    z-index: 0;
  }
  .path-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 clamp(8px, 1.5vw, 20px);
  }
  .path-icon {
    width: 64px; height: 64px;
    border-radius: 9999px;
    background: #0a0a0a;
    border: 1px solid var(--border-2);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 8px 32px -8px rgba(167, 243, 208, 0.22),
      0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex; align-items: center; justify-content: center;
    color: var(--emerald);
    margin-bottom: 28px;
    transition:
      transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 320ms cubic-bezier(0.32, 0.72, 0, 1),
      border-color 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .path-step:hover .path-icon {
    transform: translateY(-3px);
    border-color: rgba(167, 243, 208, 0.40);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 14px 40px -8px rgba(167, 243, 208, 0.32),
      0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .path-icon svg {
    width: 26px; height: 26px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .path-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--foreground);
    margin: 0 0 12px;
  }
  .path-body {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fg-60);
    margin: 0;
    max-width: 28ch;
    text-wrap: balance;
  }

  /* Mobile: stack vertically with vertical dotted connector */
  @media (max-width: 760px) {
    .path { grid-template-columns: 1fr; gap: 36px; }
    .path::before {
      top: 32px;
      bottom: 32px;
      left: 50%;
      right: auto;
      width: 0;
      height: auto;
      border-top: none;
      border-left: 1px dashed rgba(167, 243, 208, 0.32);
      transform: translateX(-50%);
    }
  }

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

  /* ============================================================
     POLISH PASS, match hero fidelity across the rest of the site
     ============================================================ */

  /* --- Stat cells: emerald accent rule, hover lift, focal hierarchy --- */
  .stat-tray .stat-row {
    position: relative;
  }
  .stat-tray .stat-cell {
    position: relative;
    transition:
      background 320ms cubic-bezier(0.32, 0.72, 0, 1),
      transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .stat-tray .stat-cell::before {
    content: '';
    position: absolute;
    top: 24px; left: 28px;
    width: 24px; height: 1px;
    background: var(--emerald);
    opacity: 0.55;
    box-shadow: 0 0 8px rgba(167, 243, 208, 0.45);
  }
  .stat-tray .stat-cell:hover {
    background: rgba(167, 243, 208, 0.025);
  }
  .stat-fig {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.78) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* --- Comparison: Banks side dimmed, Credify side glows + win highlight --- */
  .compare-card { position: relative; }
  /* Emerald rail down the Credify column */
  .compare-card::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 69.7%;
    width: 1px;
    background: linear-gradient(180deg,
      rgba(167, 243, 208, 0) 0%,
      rgba(167, 243, 208, 0.55) 12%,
      rgba(167, 243, 208, 0.55) 88%,
      rgba(167, 243, 208, 0) 100%);
    pointer-events: none;
    box-shadow: 0 0 16px rgba(167, 243, 208, 0.4);
  }
  @media (max-width: 560px) { .compare-card::after { display: none; } }

  .compare-cell.value.muted {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.18);
    text-decoration-thickness: 1px;
  }
  .compare-cell.value.credify {
    background:
      linear-gradient(90deg, rgba(167, 243, 208, 0.06) 0%, rgba(167, 243, 208, 0.02) 100%);
    border-left: 1px solid rgba(167, 243, 208, 0.22);
    position: relative;
  }
  .compare-row:hover .compare-cell.value.credify {
    background:
      linear-gradient(90deg, rgba(167, 243, 208, 0.12) 0%, rgba(167, 243, 208, 0.04) 100%);
  }
  .compare-row.head .compare-cell.credify {
    border-left: 1px solid rgba(167, 243, 208, 0.30);
    background: rgba(167, 243, 208, 0.07);
  }

  /* --- Process timeline: connector animates in on view --- */
  .path::before {
    background-image: linear-gradient(90deg, var(--emerald) 0%, var(--emerald) 50%, transparent 50%);
    background-size: 12px 1px;
    background-repeat: repeat-x;
    border-top: 0;
    height: 1px;
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: left center;
    transition:
      opacity 900ms cubic-bezier(0.32, 0.72, 0, 1) 200ms,
      transform 1400ms cubic-bezier(0.32, 0.72, 0, 1) 100ms;
  }
  .path.is-drawn::before {
    opacity: 1;
    transform: scaleX(1);
  }
  /* Pulsing pip on each step icon */
  .path-icon::after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(167, 243, 208, 0.35);
    pointer-events: none;
    transition: box-shadow 800ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .path-step { position: relative; }
  .path-icon { position: relative; }
  .path-step:hover .path-icon::after {
    box-shadow: 0 0 0 14px rgba(167, 243, 208, 0);
    transition: box-shadow 1200ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  /* Step number above icon - editorial detail */
  .path-step::before {
    content: counter(step, decimal-leading-zero);
    counter-increment: step;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--fg-45);
    margin-bottom: 14px;
  }
  .path { counter-reset: step; }

  /* --- Service cards: hover shimmer matching CTA system --- */
  .card > .card-shell > .card-core::after {
    content: '';
    position: absolute;
    top: 0; left: -50%;
    width: 40%; height: 100%;
    background: linear-gradient(
      105deg,
      transparent 0%,
      rgba(167, 243, 208, 0) 30%,
      rgba(167, 243, 208, 0.18) 50%,
      rgba(255, 255, 255, 0.10) 60%,
      transparent 80%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    opacity: 0;
    transition: opacity 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .card:hover > .card-shell > .card-core::after {
    opacity: 1;
    animation: card-sweep 1.4s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }
  @keyframes card-sweep {
    0%   { left: -50%; }
    100% { left: 130%; }
  }
  /* Quick-add gets emerald arrow on hover */
  .card:hover .quick-add { color: var(--emerald); }
  .card:hover .quick-add .btn-icon {
    background: rgba(167, 243, 208, 0.22) !important;
    color: var(--emerald);
  }

  /* --- Testimonials: oversized quote glyph, emerald initial accent --- */
  .quote-card .quote-core { position: relative; }
  .quote-card .quote-core::before {
    content: '\201C';
    position: absolute;
    top: -14px;
    right: 22px;
    font-family: 'Geist', serif;
    font-size: 96px;
    line-height: 1;
    font-weight: 700;
    color: var(--emerald);
    opacity: 0.16;
    pointer-events: none;
    user-select: none;
  }
  .quote-card .initial {
    background: linear-gradient(180deg, rgba(167, 243, 208, 0.18) 0%, rgba(167, 243, 208, 0.06) 100%);
    border-color: rgba(167, 243, 208, 0.32);
    color: var(--emerald);
  }
  .quote-stars {
    display: inline-flex; align-items: center; gap: 4px;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 9999px;
    background: rgba(167, 243, 208, 0.08);
    border: 1px solid rgba(167, 243, 208, 0.18);
  }

  /* --- Partners marquee: dual-rail for density, faded edges --- */
  .partners {
    position: relative;
  }
  .partners::before,
  .partners::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
  }
  .partners::before {
    left: 0;
    background: linear-gradient(90deg, var(--background) 0%, transparent 100%);
  }
  .partners::after {
    right: 0;
    background: linear-gradient(270deg, var(--background) 0%, transparent 100%);
  }

  /* --- Calc total: emerald flash on change --- */
  .calc-total {
    transition: color 480ms cubic-bezier(0.32, 0.72, 0, 1),
                text-shadow 480ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .calc-total.is-flashing {
    color: var(--emerald);
    text-shadow: 0 0 24px rgba(167, 243, 208, 0.6);
  }

  /* --- Footer: live-status indicator + tighter typography --- */
  .footer-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 8px 14px;
    border-radius: 9999px;
    background: rgba(167, 243, 208, 0.06);
    border: 1px solid rgba(167, 243, 208, 0.18);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-80);
  }
  .footer-status .footer-pip {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--emerald);
    box-shadow: 0 0 10px rgba(167, 243, 208, 0.9);
    animation: pip-pulse 2.4s ease-in-out infinite;
  }
  .footer-link {
    position: relative;
    transition: color 220ms, padding-left 220ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .footer-link::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 0; height: 1px;
    background: var(--emerald);
    transform: translateY(-50%);
    transition: width 220ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .footer-link:hover {
    color: var(--emerald);
    padding-left: 16px;
  }
  .footer-link:hover::before {
    width: 10px;
  }
  /* --- APPLY BANNER (full-bleed CTA, primary page-bottom action) --- */
  .apply-banner {
    position: relative;
    /* Full-bleed banner treatment - spans the full page width with no rounded
       corners or rim. Sits as a wide horizontal band above the footer rather
       than a discrete rounded card. */
    padding: clamp(72px, 8vw, 112px) 32px clamp(56px, 6vw, 80px);
    margin: 0;
    max-width: none;
    /* When users land here via #apply or scroll the page fully down, keep the
       eyebrow + headline below the sticky nav header (~80px tall). */
    scroll-margin-top: 96px;
    border-radius: 0;
    overflow: hidden;
    text-align: center;
    isolation: isolate;
    background: var(--background);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  @media (max-width: 720px) {
    .apply-banner { margin: 0; padding: 56px 24px; border-radius: 0; max-width: none; }
  }
  /* Black base + asymmetric mesh orbs matching the hero (.hero-mesh).
     Eye-grabbing without rings or ornaments - same atmospheric vocabulary
     as the rest of the site. */
  .apply-banner-bg {
    position: absolute; inset: 0;
    z-index: 0;
    background:
      /* Asymmetric emerald + white mesh orbs (hero vocabulary) */
      radial-gradient(40vw 40vw at 18% 25%, rgba(167, 243, 208, 0.10), transparent 60%),
      radial-gradient(46vw 46vw at 88% 80%, rgba(255, 255, 255, 0.05), transparent 65%),
      radial-gradient(28vw 28vw at 50% 110%, rgba(167, 243, 208, 0.06), transparent 70%);
    filter: saturate(1.1);
    mix-blend-mode: screen;
  }
  /* Vertical light shaft centered behind the CTA - draws the eye down to the button */
  .apply-banner-bg::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 320px;
    transform: translateX(-50%);
    background:
      radial-gradient(ellipse 50% 60% at 50% 50%, rgba(167, 243, 208, 0.08), transparent 70%);
    pointer-events: none;
    mix-blend-mode: screen;
  }
  /* Hairline top + bottom rules - signature divider used in .sec-head throughout the site */
  .apply-banner-bg::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 243, 208, 0.32), transparent);
    pointer-events: none;
  }
  /* Soft white rim, not used in banner mode */
  .apply-banner::before {
    content: none;
  }
  .apply-banner-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* Eyebrow uses the same .eyebrow-pill spec used throughout the site */
  .apply-banner-eyebrow {
    margin-bottom: 10px;
  }
  /* Headline matches .sec-h2 / .apply-h2 vocabulary - white with translucent italic */
  .apply-banner-h2 {
    font-family: var(--font-sans);
    font-weight: 700;
    /* Reduced ceiling - the card is now narrower + shorter, so the previous
       4rem ceiling created cramped wraps. 3.4rem keeps two readable lines
       comfortably inside the new 960px max-width. */
    font-size: clamp(2rem, 3.8vw, 3.4rem);
    letter-spacing: -0.052em;
    line-height: 0.96;
    color: var(--foreground);
    margin: 0 0 12px;
    max-width: 18ch;
    text-wrap: balance;
  }
  .apply-banner-h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--fg-70);
    letter-spacing: -0.04em;
    padding-right: 0.06em;
  }
  /* Subheader: matches .sec-head .sub - mono-eyebrow style would be too small here,
     keep sans but use the same fg-60 / max-width / line-height as other section subs */
  .apply-banner-sub {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.5;
    color: var(--fg-60);
    max-width: 46ch;
    margin: 0 0 18px;
    text-wrap: balance;
  }
  .apply-banner-cta {
    margin-bottom: 10px;
  }
  /* Microcopy under the apply CTA, at full size + uppercase + tracked,
     it competes with the headline. Hush it: smaller, looser, lower contrast,
     real breathing room above the button. */
  .apply-banner-microcopy {
    margin: 18px 0 0;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--fg-60);
    text-shadow: none;
  }