@layer tokens, reset, base, layout, components, motion, utilities, responsive, a11y, vendors;


@layer tokens {

  @property --scroll-progress {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  :root {
    color-scheme: light dark;

    --bl-primary:    var(--theme-palette-color-1);
    --bl-navy:       var(--theme-palette-color-2);
    --bl-gold:       var(--theme-palette-color-3);
    --bl-gold-light: var(--theme-palette-color-4);
    --bl-teal:       var(--theme-palette-color-5);
    --bl-cream:      var(--theme-palette-color-6);
    --bl-grey:       var(--theme-palette-color-7);
    --bl-navy-mid:   var(--theme-palette-color-8);

    --palette-primary:     var(--bl-primary);
    --palette-primary-700: #1341b0;
    --palette-gold-400:    var(--bl-gold);
    --palette-gold-300:    var(--bl-gold-light);
    --palette-navy-900:    var(--bl-navy);
    --palette-navy-700:    var(--bl-navy-mid);
    --palette-cream:       var(--bl-cream);
    --palette-text:        var(--bl-navy);
    --palette-text-muted:  var(--bl-grey);
    --palette-ink:         var(--bl-navy);
    --palette-white:       #ffffff;

    --palette-hero-1: var(--bl-navy);
    --palette-hero-2: var(--bl-primary);
    --palette-hero-3: #1870ff;
    --palette-hero-4: var(--bl-teal);

    --color-bg-section-blue: #eef3ff;

    --color-bg-page:        var(--palette-cream);
    --color-bg-surface:     var(--palette-white);
    --color-bg-surface-alt: var(--bl-cream);
    --color-bg-inset:       rgba(255 255 255 / .06);
    --color-bg-overlay:     rgba(10 22 40 / .6);

    --color-accent:         var(--palette-primary);
    --color-accent-dark:    var(--palette-primary-700);
    --color-brand:          var(--palette-gold-400);
    --color-brand-light:    var(--palette-gold-300);

    --color-text-primary:   var(--palette-ink);
    --color-text-secondary: var(--palette-text-muted);
    --color-text-inverse:   var(--palette-white);
    --color-text-inverse-muted: rgba(255 255 255 / .75);
    --color-text-inverse-dim:   rgba(255 255 255 / .88);

    --color-border:         rgba(0 0 0 / .08);
    --color-border-strong:  rgba(0 0 0 / .14);
    --color-border-inverse: rgba(255 255 255 / .18);
    --color-border-gold:    rgba(212 168 67 / .3);
    --color-line:           rgba(0 0 0 / .07);

    --step--1: clamp(0.8rem,    0.85vw,  0.875rem);
    --step-0:  clamp(0.9375rem, 1vw,     1.0625rem);
    --step-1:  clamp(1.0625rem, 1.25vw,  1.25rem);
    --step-2:  clamp(1.25rem,   1.75vw,  1.5rem);
    --step-3:  clamp(1.5rem,    2.25vw,  2rem);
    --step-4:  clamp(2rem,      3.5vw,   3.625rem);

    --sp-1: clamp(4px,   0.5vw,  6px);
    --sp-2: clamp(8px,   1vw,    10px);
    --sp-3: clamp(12px,  1.5vw,  16px);
    --sp-4: clamp(18px,  2vw,    22px);
    --sp-5: clamp(24px,  2.5vw,  32px);
    --sp-6: clamp(40px,  4vw,    60px);

    --sp-xs: var(--sp-1);
    --sp-sm: var(--sp-2);
    --sp-md: var(--sp-4);
    --sp-lg: var(--sp-5);
    --sp-xl: var(--sp-6);

    --gap-sm: clamp(12px, 1.5vw, 20px);
    --gap-md: clamp(20px, 2.5vw, 32px);
    --gap-lg: clamp(28px, 3.5vw, 48px);
    --gap-xl: clamp(40px, 5vw,   72px);

    --content-reading: 65ch;
    --content-narrow:  720px;
    --content-mid:     clamp(280px, 92vw, 1200px);
    --content-wide:    clamp(280px, 95vw, 1800px);
    --content-full:    clamp(280px, 90vw, 960px);

    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   18px;
    --r-xl:   26px;
    --r-full: 9999px;

    --sh-sm: 0 4px  12px rgba(0 0 0 / .06);
    --sh-md: 0 12px 28px rgba(0 0 0 / .09);
    --sh-lg: 0 24px 60px rgba(0 0 0 / .13);

    --ease:        cubic-bezier(.4, .2, .2, 1);
    --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
    --ease-out:    cubic-bezier(.0,  .0,  .2,  1);

    --dur-fast: .15s;
    --dur-med:  .25s;
    --dur-slow: .4s;

    --transition-card:      transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
    --transition-icon:      transform var(--dur-med) var(--ease);
    --transition-btn:       transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
    --transition-fade:      opacity var(--dur-med) var(--ease), filter var(--dur-med) var(--ease);
    --transition-color:     color var(--dur-fast) var(--ease);
    --transition-border:    border-color var(--dur-fast) var(--ease);
    --transition-accordion: grid-template-rows var(--dur-slow) var(--ease);

    --lh:       1.65;
    --lh-tight: 1.25;

    --section-space: clamp(72px, 8vw, 120px);

    --header-sticky-height: 75px;

    --font-body:    "DM Sans", system-ui, -apple-system, sans-serif;
    --font-heading: "Playfair Display", Georgia, serif;
  }

  html[data-theme="light"] {
    --color-bg-page:        #faf8f4;
    --color-bg-surface:     #ffffff;
    --color-bg-surface-alt: #faf8f4;
    --color-text-primary:   #0a1628;
    --color-text-secondary: #aeaeae;
    --color-border:         rgba(0 0 0 / .08);
    --color-border-strong:  rgba(0 0 0 / .14);
    --color-line:           rgba(0 0 0 / .07);
  }

  html[data-theme="dark"] {
    --color-bg-page:        #0c0f14;
    --color-bg-surface:     #141820;
    --color-bg-surface-alt: #1a1f2a;
    --color-bg-inset:       rgba(255 255 255 / .06);
    --color-text-primary:   rgba(255 255 255 / .92);
    --color-text-secondary: rgba(255 255 255 / .6);
    --color-border:         rgba(255 255 255 / .1);
    --color-border-strong:  rgba(255 255 255 / .18);
    --color-line:           rgba(255 255 255 / .07);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --color-bg-page:        #0c0f14;
      --color-bg-surface:     #141820;
      --color-bg-surface-alt: #1a1f2a;
      --color-bg-inset:       rgba(255 255 255 / .06);
      --color-text-primary:   rgba(255 255 255 / .92);
      --color-text-secondary: rgba(255 255 255 / .6);
      --color-border:         rgba(255 255 255 / .1);
      --color-border-strong:  rgba(255 255 255 / .18);
      --color-line:           rgba(255 255 255 / .07);
    }
  }
}


@layer reset {

  *, *::before, *::after { box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-sticky-height) + 16px);
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  img, svg, video, canvas { display: block; max-width: 100%; }

  button {
    font: inherit;
    color: inherit;
    line-height: 1;
    border: 0;
    background: none;
    cursor: pointer;
  }

  input, textarea, select { font: inherit; }
}


@layer base {

  :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: var(--lh-tight);
    margin: 0;
    letter-spacing: -.01em;
    overflow-wrap: break-word;
    word-break: keep-all;
    hyphens: none;
    color: var(--palette-navy-900);
    text-align: center;
  }

  :where(h1) { font-size: var(--step-4); }
  :where(h2) { font-size: var(--step-3); }
  :where(h3) { font-size: var(--step-2); }
  :where(h4) { font-size: var(--step-1); }

  :where(h1, h2) em {
    color: var(--color-brand);
    font-style: normal;
  }

  p {
    font-size: var(--step-0);
    line-height: var(--lh);
    margin: 0 0 var(--sp-3);
    text-wrap: pretty;
    color: var(--color-text-secondary);
    text-align: center;
  }

  .section-tag {
    display: block;
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-block-end: var(--sp-3);
    text-align: center;
  }

  .section-intro {
    max-width: var(--content-narrow);
    margin-inline: auto;
    margin-block-start: var(--sp-5);
  }
}


@layer layout {

  .container {
    max-width: var(--content-wide);
    margin-inline: auto;
    padding-inline: var(--sp-5);
    container-type: inline-size;
    container-name: layout-wide;
  }

  .container-medium {
    max-width: var(--content-mid);
    margin-inline: auto;
    container-type: inline-size;
    container-name: layout-mid;
  }

  .container-narrow {
    max-width: var(--content-full);
    margin-inline: auto;
    container-type: inline-size;
    container-name: layout-narrow;
  }

  .dl-section {
    padding-block: var(--section-space);
    position: relative;
    overflow: hidden;
  }

  .section-light,  .dl-section-light  { background: #ffffff; }
  .section-cream,  .dl-section-cream  { background: #faf8f4; }
  .section-blue,   .dl-section-blue   { background: #eef3ff; }
  .section-dark,   .dl-section-dark   { background: linear-gradient(135deg, #0a1628, #112240); }

  .stack > * + * { margin-block-start: var(--stack-space, var(--sp-3)); }
  .stack-sm { --stack-space: var(--sp-2); }
  .stack-md { --stack-space: var(--sp-4); }
  .stack-lg { --stack-space: var(--sp-5); }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--gap-sm));
    align-items: center;
    justify-content: center;
  }

  .cover {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-block-size: 88vh;
  }

  .sidebar-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: var(--gap-xl);
    align-items: center;
  }

  .grid       { display: grid; gap: var(--gap-md); }
  .grid-2     { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3     { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid-auto  { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

  .flex-center      { display: flex; align-items: center; justify-content: center; }
  .flex-center-wrap { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }

  .inline-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--inline-gap, var(--gap-sm));
    min-width: 0;
  }

  .mx-auto     { margin-inline: auto; }
  .text-center { text-align: center; }
  .text-left   { text-align: left; }

  .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-sm);
  }

  .wp-block-button { display: flex; justify-content: center; }

  .dl-mobile-cta { display: none; }
}


@layer components {

  .hero,
  #hero {
    position: relative;
    min-block-size: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block:  clamp(40px,7vh,60px);
    padding-inline: var(--sp-4);
    color: #ffffff;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(135deg, #0a1628, #112240);
  }

  #contact {
    text-align: center;
    background: linear-gradient(135deg, #0a1628, #112240);
  }

  .hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      270deg,
      var(--palette-hero-1),
      var(--palette-hero-2),
      var(--palette-hero-3),
      var(--palette-hero-4),
      var(--palette-hero-2),
      var(--palette-hero-1)
    );
    background-size: 200% 200%;
    animation: hero-gradient 45s linear infinite;
    will-change: background-position;
  }

  @keyframes hero-gradient {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
  }

  .hero-content {
    position: relative;
    z-index: 3;
    max-inline-size: 1100px;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    text-align: center;
  }

  .hero-headline {
    max-inline-size: 18ch;
    color: #ffffff;
    text-align: center;
  }

  .hero-subtext {
    font-size: var(--step-1);
    color: rgba(255 255 255 / .88);
    margin: 0;
    text-align: center;
  }

  .hero-badge,
  .hero-savings,
  .hero-location {
    color: rgba(255 255 255 / .75);
    font-size: var(--step--1);
    margin: 0;
    text-align: center;
  }

  .hero-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-sm);
  }

  .trust-item {
    font-size: var(--step--1);
    color: rgba(255 255 255 / .75);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    white-space: nowrap;
  }

  .check { color: var(--color-brand); }

  .wp-block-button__link,
  .calc-button,
  .testimonial-arrow {
    transition: var(--transition-btn);
  }

  .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    font-weight: 700;
    font-size: var(--step--1);
    color: var(--palette-navy-900);
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-light));
    box-shadow: var(--sh-md);
    text-decoration: none;
    white-space: nowrap;
  }

  @media (hover: hover) {
    .wp-block-button__link:hover,
    .calc-button:hover {
      transform: translateY(-2px);
      box-shadow: var(--sh-lg);
    }
  }

  .wp-block-button__link:active,
  .calc-button:active {
    transform: translateY(0);
    box-shadow: var(--sh-sm);
  }

  .wp-block-button__link:disabled,
  .calc-button:disabled {
    opacity: .6;
    cursor: not-allowed;
    pointer-events: none;
  }

  .trust-strip {
    background: #ffffff;
    padding-block: var(--sp-5);
    padding-inline: var(--sp-5);
    border-block-start: 1px solid rgba(0 0 0 / .04);
    border-block-end:   1px solid #ece8e0;
    box-shadow: var(--sh-sm);
  }

  .trust-strip-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-md);
    flex-wrap: wrap;
  }

  .trust-pill {
    background: #f7f5f0;
    padding-block:  9px;
    padding-inline: 16px;
    border-radius: var(--r-full);
    font-size: var(--step--1);
    font-weight: 600;
    color: #0a1628;
    white-space: nowrap;
    border: 1px solid rgba(212 168 67 / .25);
    transition: var(--transition-card);
  }

  @media (hover: hover) {
    .trust-pill:hover {
      transform: translateY(-3px);
      box-shadow: var(--sh-md);
    }
  }

  .card {
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    transition: var(--transition-card);
    min-width: 0;
  }

  .card--surface {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--sh-md);
  }

  .card--glass {
    background: var(--color-bg-inset);
    border: 1px solid var(--color-border-inverse);
  }

  @supports (backdrop-filter: blur(12px)) {
    .card--glass {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
  }

  @media (hover: hover) {
    .card--hover:hover {
      transform: translate3d(0,-6px,0);
      box-shadow: var(--sh-lg);
    }
    .card--glass.card--hover:hover {
      border-color: var(--color-border-gold);
      transform: translateY(-4px);
    }
  }

  :where(.service-card, .benefit-card, .result-card, .stat-card, .testimonial-card) {
    background: #ffffff;
    border: 1px solid rgba(0 0 0 / .08);
    box-shadow: var(--sh-md);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    transition: var(--transition-card);
    min-width: 0;
  }

  @media (hover: hover) {
    :where(.service-card, .benefit-card, .result-card,
           .stat-card, .testimonial-card):hover {
      transform: translate3d(0,-6px,0);
      box-shadow: var(--sh-lg);
    }
  }

  .pain-card {
    background: rgba(255 255 255 / .05);
    border: 1px solid rgba(255 255 255 / .15);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    transition: var(--transition-card);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
  }

  @supports (backdrop-filter: blur(12px)) {
    .pain-card {
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
  }

  @media (hover: hover) {
    .pain-card:hover {
      border-color: var(--color-border-gold);
      transform: translateY(-4px);
    }
  }

  .card-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26 86 219 / .08);
    margin: 0 auto var(--sp-3);
    font-size: var(--step-1);
    transition: var(--transition-icon);
  }

  .pain-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212 168 67 / .12);
    transition: var(--transition-icon);
  }

  @media (hover: hover) {
    :is(.benefit-card, .service-card, .pain-card):hover :is(.card-icon, .pain-icon) {
      transform: translateY(-4px) scale(1.1);
    }
  }

  .stat-card { text-align: center; }

  .stat-number {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-1);
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 700;
    color: #0a1628;
    line-height: 1;
  }

  .stat-label {
    font-size: var(--step--1);
    color: #0a1628;
    margin-block-start: var(--sp-1);
  }

  .cards-container,
  .stats-grid,
  .benefits-grid,
  .results-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: var(--gap-md);
    margin-block-start: var(--sp-5);
    container-type: inline-size;
  }

  @container (max-width: 680px) {
    .cards-container,
    .stats-grid,
    .benefits-grid,
    .results-grid {
      grid-template-columns: 1fr;
    }
  }

  .result-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--sp-1);
    border-block-end: 1px solid var(--color-line);
    font-size: var(--step--1);
  }

  .result-metric span   { color: #0a1628; }
  .result-metric strong { color: #0a1628; font-weight: 700; }
  .result-location      { font-size: var(--step--1); color: var(--color-text-secondary); margin-block-end: var(--sp-3); text-align: center; }
  .result-savings       { margin-block-start: var(--sp-3); font-size: var(--step-0); color: #0a1628; text-align: center; }
  .result-savings strong { color: #0a1628; }

  .testimonial-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-lg);
    margin-block-start: var(--sp-5);
  }

  .testimonial-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-inline-size: 1520px;
    margin-inline: auto;
  }

  .testimonial-viewport::-webkit-scrollbar { display: none; }

  .testimonial-slider {
    display: flex;
    gap: var(--gap-md);
    min-width: 0;
  }

  .testimonial-card {
    flex: 0 0 clamp(280px, 38vw, 440px);
    min-width: 0;
    scroll-snap-align: start;
  }

  .testimonial-stars { color: var(--color-brand); display: block; margin-block-end: var(--sp-1); }

  .testimonial-author {
    color: #0a1628;
    font-weight: 600;
    font-size: var(--step--1);
    display: block;
    margin-block-start: var(--sp-3);
    text-align: start;
  }

  .testimonial-arrow {
    background: var(--palette-navy-900);
    color: #ffffff;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--step-0);
    box-shadow: var(--sh-sm);
    cursor: pointer;
  }

  @media (hover: hover) {
    .testimonial-arrow:hover {
      background: var(--color-accent);
      transform: scale(1.08);
    }
  }

  .about-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
    align-items: center;
    text-align: start;
  }

  .founder-quote blockquote { margin: 0; padding: 0; }

  .founder-quote blockquote p {
    font-size: var(--step-1);
    font-style: italic;
    color: #d4a843;
    border-inline-start: 3px solid #d4a843;
    padding-inline-start: var(--sp-4);
    margin: 0 0 var(--sp-1);
    text-align: start;
  }

  .about-byline {
    color: rgba(255 255 255 / .65);
    font-size: var(--step--1);
    font-style: normal;
    display: block;
    padding-inline-start: calc(var(--sp-4) + 3px);
    margin-block-end: var(--sp-4);
  }

  .about-pillars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--gap-md);
  }

  .pillar {
    background: var(--color-bg-inset);
    border: 1px solid rgba(255 255 255 / .18);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    text-align: center;
    transition: var(--transition-border);
    min-width: 0;
  }

  @media (hover: hover) {
    .pillar:hover { border-color: var(--color-border-gold); }
  }

  .pillar-icon { font-size: var(--step-2); display: block; margin-block-end: var(--sp-1); }

  .how-it-works {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 0;
    margin-block-start: var(--sp-6);
    position: relative;
  }

  @media not all and (max-width: 900px) {
    .how-it-works::before {
      content: "";
      position: absolute;
      top: 28px;
      inset-inline: 12.5%;
      block-size: 2px;
      background: linear-gradient(90deg, var(--color-accent), var(--color-brand));
      opacity: .4;
      pointer-events: none;
      z-index: 0;
    }
  }

  .how-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: var(--gap-sm);
    gap: var(--gap-sm);
    position: relative;
    z-index: 1;
    min-width: 0;
  }

  .step-number {
    width: 56px;
    height: 56px;
    border-radius: var(--r-full);
    background: var(--palette-navy-900);
    color: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--step-1);
    border: 3px solid var(--color-brand);
    box-shadow: var(--sh-md);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }

  .city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
    gap: var(--gap-md);
    margin-block: var(--sp-6);
    margin-inline: auto;
    max-inline-size: 860px;
  }

  .city {
    padding-block:  var(--sp-4);
    padding-inline: var(--sp-3);
    background: rgba(255 255 255 / .08);
    border: 1px solid rgba(212 168 67 / .2);
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: var(--step--1);
    color: #ffffff;
    text-align: center;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    white-space: normal;
    line-height: var(--lh-tight);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 52px;
    transition: var(--transition-card);
  }

  @media (hover: hover) {
    .city:hover {
      background: rgba(255 255 255 / .14);
      border-color: var(--color-border-gold);
      transform: translateY(-3px);
      box-shadow: var(--sh-md);
      color: var(--color-brand);
    }
  }

  .local-points {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--gap-lg);
    margin-block-start: var(--sp-6);
    margin-inline: auto;
    max-inline-size: 1000px;
  }

  .local-point {
    color: rgba(255 255 255 / .85);
    font-size: var(--step--1);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    white-space: nowrap;
  }

  .logo-category { margin-block-start: var(--sp-6); }

  .logo-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
    align-items: center;
    justify-items: center;
    gap: var(--gap-xl);
    max-inline-size: 1520px;
    margin-inline: auto;
  }

  .logo-row img {
    block-size: 60px;
    opacity: .5;
    filter: grayscale(100%);
    transition: var(--transition-fade), transform var(--dur-med) var(--ease);
  }

  @media (hover: hover) {
    .logo-row img:hover {
      opacity: 1;
      filter: none;
      transform: scale(1.05);
    }
  }

  .calculator-box {
    background: #ffffff;
    color: #0a1628;
    padding: var(--sp-6);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    border: 1px solid var(--color-border);
    max-inline-size: 780px;
    margin-block-start: var(--sp-6);
    margin-inline: auto;
    display: grid;
    gap: var(--gap-md);
    container-type: inline-size;
  }

  .calc-field { display: grid; gap: var(--sp-1); }

  .calc-field label {
    font-weight: 600;
    font-size: var(--step-0);
    color: #0a1628;
    text-align: start;
  }

  .calc-field input {
    width: 100%;
    padding-block:  12px;
    padding-inline: var(--sp-4);
    border-radius: var(--r-sm);
    border: 1px solid var(--color-border);
    font-size: var(--step-0);
    color: #0a1628;
    background: var(--color-bg-surface-alt);
    transition: var(--transition-border);
    outline: none;
  }

  .calc-field input:focus-visible {
    border-color: var(--color-accent);
    background: #ffffff;
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }

  .calc-hint { font-size: var(--step--1); color: var(--color-text-secondary); text-align: start; }

  .calc-button {
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-light));
    color: #0a1628;
    font-weight: 700;
    padding-block:  14px;
    padding-inline: var(--sp-5);
    border-radius: var(--r-md);
    font-size: var(--step-0);
    box-shadow: var(--sh-md);
    cursor: pointer;
    border: none;
    display: block;
    margin-inline: auto;
    width: fit-content;
    min-inline-size: 240px;
  }

  .calc-result {
    background: #fdf9ee;
    color: #0a1628;
    border: 1px solid rgba(212 168 67 / .25);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    font-size: var(--step-0);
    min-block-size: 48px;
  }

  .calc-cta { display: flex; justify-content: center; }

  .faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    max-inline-size: 820px;
    margin-inline: auto;
    margin-block-start: var(--sp-5);
  }

  .faq-item {
    background: #ffffff;
    border: 1px solid rgba(0 0 0 / .08);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition:
      border-color var(--dur-med) var(--ease),
      box-shadow   var(--dur-med) var(--ease);
  }

  .faq-item + .faq-item { margin-block-start: var(--sp-3); }

  .faq-item.active {
    border-color: rgba(212 168 67 / .5);
    box-shadow: var(--sh-md);
    border-inline-start: 3px solid #d4a843;
  }

  @media (hover: hover) {
    .faq-item:not(.active):hover {
      border-color: rgba(0 0 0 / .14);
      box-shadow: var(--sh-md);
    }
  }

  .faq-question {
    width: 100%;
    text-align: start;
    padding-block:      var(--sp-5);
    padding-inline:     var(--sp-6);
    padding-inline-end: calc(var(--sp-6) + 12px);
    font-size: var(--step-0);
    font-weight: 600;
    cursor: pointer;
    position: relative;
    color: #0a1628;
    line-height: var(--lh-tight);
    background: none;
    border: none;
    display: block;
    transition: var(--transition-color);
  }

  @media (hover: hover) {
    .faq-item:not(.active) .faq-question:hover { color: var(--bl-primary); }
  }

  .faq-question::after {
    content: "+";
    position: absolute;
    inset-inline-end: var(--sp-6);
    top: 50%;
    translate: 0 -50%;
    font-size: 22px;
    line-height: 1;
    color: #d4a843;
    font-weight: 300;
    transition:
      transform var(--dur-med) var(--ease),
      color     var(--dur-med) var(--ease);
    transform-origin: center;
  }

  .faq-item.active .faq-question::after {
    transform: rotate(45deg);
    color: var(--bl-navy);
  }

  .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-slow) var(--ease);
    overflow: hidden;
  }

  .faq-item.active .faq-answer { grid-template-rows: 1fr; }

  .faq-answer-inner {
    overflow: hidden;
    padding-block-end: 0;
    transition: padding-block-end var(--dur-slow) var(--ease);
    min-height: 0;
  }

  .faq-item.active .faq-answer-inner { padding-block-end: var(--sp-5); }

  .faq-answer:not(:has(.faq-answer-inner)) {
    max-height: 0;
    overflow: hidden;
    display: block;
    transition:
      max-height        var(--dur-slow) var(--ease),
      padding-block-end var(--dur-slow) var(--ease);
    padding-block-end: 0;
  }

  .faq-item.active .faq-answer:not(:has(.faq-answer-inner)) {
    max-height: 800px;
    padding-block-end: var(--sp-5);
  }

  .faq-answer p,
  .faq-answer-inner p {
    color: #0a1628;
    text-align: start;
    padding-inline: var(--sp-6);
    padding-block-end: var(--sp-3);
    margin-block-end: 0;
    border-block-start: 1px solid rgba(0 0 0 / .06);
    padding-block-start: var(--sp-5);
  }

  .faq-answer p + p,
  .faq-answer-inner p + p {
    border-block-start: none;
    padding-block-start: 0;
  }

  .faq-answer p:last-child,
  .faq-answer-inner p:last-child { padding-block-end: var(--sp-5); }

  .faq-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-md);
    margin-block-start: var(--sp-6);
    padding-block-start: var(--sp-5);
    border-block-start: 1px solid rgba(0 0 0 / .08);
    max-inline-size: 820px;
    margin-inline: auto;
    text-align: center;
  }

  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 9999;
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease);
    pointer-events: none;
  }

  .scroll-progress.is-visible { opacity: 1; }

  .scroll-progress-bar {
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--bl-primary), var(--bl-teal));
    transition: transform 0.08s linear;
  }

  .cta-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-sm);
    margin-block-start: var(--sp-5);
  }

  .cta-phone { margin-block-start: var(--sp-4); font-size: var(--step--1); }
  .cta-phone a { color: var(--color-brand); font-weight: 600; text-decoration: none; }
  .cta-phone a:hover { text-decoration: underline; }

  .local-heading { text-align: center; }

  .local-body {
    text-align: center;
    max-inline-size: var(--content-narrow);
    margin-block-start: clamp(48px,6vw,80px);
    margin-inline: auto;
    width: 100%;
  }
}


@layer motion {

  .reveal {
    opacity: 0;
    translate: 0 40px;
    transition:
      opacity  .8s var(--ease),
      translate .8s var(--ease);
  }

  .reveal.visible {
    opacity: 1;
    translate: 0 0;
  }
}


@layer utilities {

  .u-block        { display: block; }
  .u-flex         { display: flex; }
  .u-grid         { display: grid; }
  .u-inline-flex  { display: inline-flex; }
  .u-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; }

  .u-flex-center  { display: flex; align-items: center; justify-content: center; }
  .u-flex-between { display: flex; align-items: center; justify-content: space-between; }
  .u-flex-start   { display: flex; align-items: flex-start; }
  .u-flex-col     { flex-direction: column; }
  .u-flex-wrap    { flex-wrap: wrap; }
  .u-flex-nowrap  { flex-wrap: nowrap; }
  .u-items-center { align-items: center; }
  .u-justify-center { justify-content: center; }

  .u-grid-2    { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap-md); }
  .u-grid-3    { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap-md); }
  .u-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--gap-md); }

  .u-gap-sm { gap: var(--gap-sm); }
  .u-gap-md { gap: var(--gap-md); }
  .u-gap-lg { gap: var(--gap-lg); }
  .u-gap-xl { gap: var(--gap-xl); }

  .u-mt-sm  { margin-block-start: var(--sp-3); }
  .u-mt-md  { margin-block-start: var(--sp-5); }
  .u-mt-lg  { margin-block-start: var(--sp-6); }
  .u-mb-sm  { margin-block-end: var(--sp-3); }
  .u-mb-md  { margin-block-end: var(--sp-5); }
  .u-mx-auto { margin-inline: auto; }
  .u-p-sm   { padding: var(--sp-3); }
  .u-p-md   { padding: var(--sp-5); }
  .u-p-lg   { padding: var(--sp-6); }

  .u-w-full     { width: 100%; }
  .u-max-prose  { max-inline-size: var(--content-reading); }
  .u-max-narrow { max-inline-size: var(--content-narrow); }

  .u-text-center  { text-align: center; }
  .u-text-left    { text-align: start; }
  .u-text-sm      { font-size: var(--step--1); }
  .u-text-base    { font-size: var(--step-0); }
  .u-text-lg      { font-size: var(--step-1); }
  .u-font-bold    { font-weight: 700; }
  .u-font-semi    { font-weight: 600; }
  .u-uppercase    { text-transform: uppercase; letter-spacing: .08em; }

  .u-text-inverse { color: #ffffff; }
  .u-text-gold    { color: var(--color-brand); }
  .u-text-navy    { color: #0a1628; }
  .u-text-muted   { color: var(--color-text-secondary); }

  .u-rounded-sm   { border-radius: var(--r-sm); }
  .u-rounded-md   { border-radius: var(--r-md); }
  .u-rounded-lg   { border-radius: var(--r-lg); }
  .u-rounded-full { border-radius: var(--r-full); }

  .u-overflow-hidden { overflow: hidden; }
  .u-relative        { position: relative; }
  .u-z-1             { z-index: 1; }
}


@layer responsive {

  @media (max-width: 900px) {
    .how-it-works {
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: var(--gap-lg);
    }
    .city-grid {
      grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
    }
  }

  @media (max-width: 768px) {

    .container { padding-inline: var(--sp-4); }

    .grid-2,
    .grid-3,
    .how-it-works,
    .about-inner,
    .about-pillars,
    .sidebar-layout {
      grid-template-columns: 1fr;
    }

    .how-it-works { gap: var(--gap-md); }
    .how-it-works::before { display: none; }

    .about-inner { text-align: center; }

    .about-text :is(h1,h2,h3,h4),
    .about-text p,
    .founder-quote blockquote p { text-align: center; }

    .about-byline { padding-inline-start: 0; text-align: center; }

    .hero,
    #hero {
      min-block-size: auto;
      padding-block:  50px;
      padding-inline: var(--sp-4);
    }

    .hero-headline { font-size: clamp(24px,5vw,40px); }
    .hero-gradient { animation: none; }

    .local-points { flex-wrap: wrap; gap: var(--gap-sm); }

    .testimonial-card { flex: 0 0 clamp(280px,80vw,400px); }

    .dl-mobile-cta {
      display: flex;
      position: fixed;
      inset-block-end: 0;
      inset-inline: 0;
      z-index: 999;
      background: var(--palette-navy-900);
      border-block-start: 2px solid var(--color-brand);
      box-shadow: 0 -4px 20px rgba(0 0 0 / .25);
    }

    .dl-mobile-cta a {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-2);
      padding-block:  14px;
      padding-inline: var(--sp-3);
      font-size: var(--step--1);
      font-weight: 700;
      text-decoration: none;
      text-align: center;
    }

    .cta-call {
      color: #ffffff;
      background: rgba(255 255 255 / .06);
      border-inline-end: 1px solid rgba(255 255 255 / .12);
    }

    .cta-review {
      color: #0a1628;
      background: linear-gradient(135deg, var(--color-brand), var(--color-brand-light));
    }

    #contact { padding-block-end: calc(var(--sp-6) + 64px); }
  }

  @media (max-width: 600px) {
    .cards-container,
    .stats-grid,
    .benefits-grid,
    .results-grid {
      grid-template-columns: 1fr;
    }
  }
}


@layer a11y {

  :focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 3px;
    border-radius: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .hero-gradient,
    .hero .hero-gradient { animation: none; }

    .reveal {
      opacity: 1;
      translate: 0 0;
      transition: none;
    }

    .faq-answer,
    .faq-answer-inner { transition: none; }

    .scroll-progress-bar { transition: none; }

    *,
    *::before,
    *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
}


@layer vendors {

  .cmplz-cookiebanner {
    border-radius: var(--r-lg) !important;
    box-shadow: 0 20px 48px rgba(0 0 0 / .14) !important;
  }

  .cmplz-btn {
    border-radius: var(--r-sm) !important;
    font-weight: 600 !important;
    padding-block:  10px !important;
    padding-inline: 18px !important;
  }

  .cmplz-btn.cmplz-accept {
    background: var(--color-brand) !important;
    border: none !important;
    color: var(--palette-navy-900) !important;
  }
}



.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4, .section-dark h5, .section-dark h6,
.dl-section-dark h1, .dl-section-dark h2, .dl-section-dark h3,
.dl-section-dark h4, .dl-section-dark h5, .dl-section-dark h6,
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6,
#hero h1, #hero h2, #hero h3, #hero h4, #hero h5, #hero h6,
#contact h1, #contact h2, #contact h3, #contact h4,
#local-trust h1, #local-trust h2, #local-trust h3, #local-trust h4 {
  color: #ffffff;
}

.section-dark p, .dl-section-dark p,
.hero p, #hero p, #contact p, #local-trust p {
  color: rgba(255, 255, 255, 0.88);
}

.section-dark .section-tag, .dl-section-dark .section-tag,
.hero .section-tag, #hero .section-tag, #local-trust .section-tag {
  color: rgba(255, 255, 255, 0.88);
}

.section-dark h1 em, .section-dark h2 em, .section-dark h3 em,
.dl-section-dark h1 em, .dl-section-dark h2 em, .dl-section-dark h3 em,
.hero h1 em, .hero h2 em, #hero h1 em, #hero h2 em {
  color: #d4a843;
  font-style: normal;
}

.section-light h1, .section-light h2, .section-light h3,
.section-light h4, .section-light h5, .section-light h6,
.dl-section-light h1, .dl-section-light h2, .dl-section-light h3,
.dl-section-light h4, .dl-section-light h5, .dl-section-light h6,
.section-cream h1, .section-cream h2, .section-cream h3,
.section-cream h4, .section-cream h5, .section-cream h6,
.dl-section-cream h1, .dl-section-cream h2, .dl-section-cream h3,
.dl-section-cream h4, .dl-section-cream h5, .dl-section-cream h6,
.section-blue h1, .section-blue h2, .section-blue h3,
.section-blue h4, .section-blue h5, .section-blue h6,
.dl-section-blue h1, .dl-section-blue h2, .dl-section-blue h3,
.dl-section-blue h4, .dl-section-blue h5, .dl-section-blue h6 {
  color: #0a1628;
}

.section-light p, .dl-section-light p,
.section-cream p, .dl-section-cream p,
.section-blue p,  .dl-section-blue p {
  color: #0a1628;
}

.section-light h1 em, .section-light h2 em,
.dl-section-light h1 em, .dl-section-light h2 em,
.section-cream h1 em, .section-cream h2 em,
.dl-section-cream h1 em, .dl-section-cream h2 em,
.section-blue h1 em, .section-blue h2 em,
.dl-section-blue h1 em, .dl-section-blue h2 em {
  color: #d4a843;
  font-style: normal;
}

.service-card h2, .service-card h3, .service-card h4,
.benefit-card h2, .benefit-card h3, .benefit-card h4,
.result-card  h2, .result-card  h3, .result-card  h4,
.stat-card    h2, .stat-card    h3, .stat-card    h4,
.testimonial-card h2, .testimonial-card h3, .testimonial-card h4 { color: #0a1628; }

.service-card p, .benefit-card p, .result-card p,
.stat-card p, .testimonial-card p { color: #0a1628; }

.stat-number, .stat-label, .counter-value            { color: #0a1628; }
.result-metric span, .result-metric strong           { color: #0a1628; }
.result-location, .result-savings, .result-savings strong { color: #0a1628; }
.testimonial-author                                   { color: #0a1628; }

.pain-card h2, .pain-card h3, .pain-card h4 { color: #ffffff; }
.pain-card p                                 { color: rgba(255, 255, 255, 0.85); }

.pillar h3, .pillar h4 { color: #ffffff; }
.pillar p              { color: rgba(255, 255, 255, 0.75); }

.about-text h1, .about-text h2, .about-text h3, .about-text h4 { color: #ffffff; }
.about-text p                                                     { color: rgba(255, 255, 255, 0.88); }
.founder-quote blockquote p                                       { color: #d4a843; font-style: italic; }
.about-byline                                                     { color: rgba(255, 255, 255, 0.65); }

.how-step h3, .how-step p { color: #0a1628; }

.local-point { color: rgba(255, 255, 255, 0.85); }

#integrations h1, #integrations h2, #integrations h3,
#integrations h4, #integrations h5, #integrations h6 { color: #0a1628; }
#integrations p                                        { color: #0a1628; }

#faq h2, #faq p                    { color: #0a1628; }
.faq-question                      { color: #0a1628; }
.faq-answer p, .faq-answer-inner p { color: #0a1628; }
.faq-cta > p                       { color: #0a1628; }

#contact .trust-item { color: rgba(255, 255, 255, 0.75); }

#service-area h2, #service-area p { color: #0a1628; }
#service-area .local-body { color: #0a1628 !important; text-align: center !important; font-size: var(--step-0); line-height: var(--lh); }
.dl-local-text { color: #0a1628 !important; text-align: center !important; }
[data-prefix="single_page"] #service-area .local-body { color: #0a1628 !important; }

.local-body { text-align: center; margin-inline: auto; max-inline-size: var(--content-narrow); color: #0a1628; }

.section-light, .dl-section-light  { background: #ffffff; }
.section-cream, .dl-section-cream  { background: #faf8f4; }
.section-blue,  .dl-section-blue   { background: #eef3ff; }
.section-dark,  .dl-section-dark   { background: linear-gradient(135deg, #0a1628, #112240); }
#hero, .hero                        { background: linear-gradient(135deg, #0a1628, #112240); }
#contact                            { background: linear-gradient(135deg, #0a1628, #112240); }
#faq                                { background: #faf8f4; }
#integrations                       { background: #ffffff; }
#service-area                       { background: #ffffff; }

.service-card, .benefit-card, .result-card, .stat-card, .testimonial-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
}

.pain-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.calculator-box { background: #ffffff; color: #0a1628; }
.trust-strip    { background: #ffffff; }
.trust-pill     { background: #f7f5f0; color: #0a1628; }
.pillar         { border: 1px solid rgba(255, 255, 255, 0.18); }
.faq-item       { background: #ffffff; }