/*
  Design tokens — map 1:1 into theme.json / global style.css later.
  Source: Shine Master File (Figma) — Header + mega menu.
*/

:root {
  /* Colors — named by role */
  --color-primary: #cc092f; /* Shine Red */
  --color-text: #191919; /* Shine Grey */
  --color-text-inverse: #ffffff;
  --color-bg: #ffffff;
  --color-bg-utility: #191919; /* Top utility bar — Figma 485:851 */
  --color-divider: #e5e5e5;

  /* Typography */
  --font-heading: "Prompt", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --font-body-alt: "Inter", sans-serif;

  --fs-nav: 1.125rem; /* 18px */
  --fs-cta: 1.125rem; /* 18px */
  --fs-mega-label: 2rem; /* 32px */
  --fs-mega-link: 1.5rem; /* 24px */
  --fs-mega-body: 1.125rem; /* 18px */
  --fs-hero-eyebrow: 1rem; /* 16px */
  --fs-hero-title: 4rem; /* 64px */
  --fs-hero-title-mobile: 1.5rem; /* 24px */
  --fs-hero-text: 1.125rem; /* 18px */
  --fs-hero-text-mobile: 1rem; /* 16px */
  --fs-hero-rating: 0.75rem; /* 12px */

  --font-eyebrow: "Poppins", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --lh-nav: 1.4375rem; /* 23px */
  --lh-mega-label: 2.25rem; /* 36px */
  --lh-mega-link: 1.875rem; /* 30px */
  --lh-mega-body: 1.875rem; /* 30px */

  --ls-cta: -0.02em;
  --ls-mega-label: 0.3em; /* 9.6px at 32px */
  --ls-mega-link: -0.02em;
  --ls-mega-body: -0.02em;

  /* Spacing scale */
  --space-2xs: 0.25rem; /* 4px */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 0.625rem; /* 10px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3.5rem; /* 56px */
  --space-3xl: 3.75rem; /* 60px */

  /* Layout */
  --header-pad-y: 0.625rem; /* 10px — utility bar */
  --header-bar-pad-y: 0.375rem; /* 6px — white main bar */
  /*
    Side padding matches Figma (220px at 1920) only when the viewport can spare it.
    Uses a ~1280px content band: spare width is split left/right, capped at 220px.
    Below that band, padding collapses toward 24px so the nav can stay on one line
    instead of forcing empty side gutters.
    At ≥1280px, narrower gutters — same as shine/src/css/tokens.css (block after :root).
  */
  --header-content-band: 80rem; /* 1280px — min comfortable desktop content width */
  --header-pad-x: clamp(1.5rem, calc((100vw - var(--header-content-band)) / 2), 13.75rem);
  --header-frame-max: 120rem; /* 1920px — Figma desktop frame */
  --layout-frame-gutter: max(
    var(--header-pad-x),
    calc((100vw - var(--header-frame-max)) / 2 + var(--header-pad-x))
  );
  --layout-section-copy-inset: calc(var(--layout-frame-gutter) + var(--header-pad-x));
  --header-logo-w: 8rem; /* 128px */
  --header-logo-h: 4.473rem; /* ~71px */
  --header-logo-w-mobile: 4.125rem; /* 66px */
  --header-logo-h-mobile: 2.3125rem; /* 37px */
  --fs-mobile-submenu: 1rem; /* 16px */
  --lh-mobile-submenu: 1.875rem; /* 30px */
  --ls-mobile-submenu: -0.02em;
  --shadow-mobile-submenu-inset: inset 0 16px 20px 0 rgba(67, 0, 0, 0.14);
  --nav-gap: 2rem; /* 32px */
  --nav-cta-gap: 3.75rem; /* 60px */
  --mega-content-max: 92.5rem; /* 1480px */
  --mega-content-gap: 3.75rem; /* 60px */
  --mega-col-links: 41rem; /* 656px */
  --mega-col-feature: 35.75rem; /* 572px */
  --mega-feature-img-h: 15.875rem; /* 254px */
  --mega-divider-w: 20.9375rem; /* 335px */
  --mega-border-b: 0.5rem; /* 8px */

  /* hero-image — demo-location desktop band (746px) */
  --hero-min-h: 46.625rem; /* 746px */
  --hero-content-w: 41rem; /* 656px */
  --hero-content-top: 11.125rem; /* 178px */
  --hero-eyebrow-ls: 0.3em; /* 4.8px at 16px */
  --hero-title-lh: 4rem; /* 64px */
  --hero-title-ls: -0.02em;
  --hero-title-lh-mobile: 1.8125rem; /* 29px */
  --hero-portrait-left: 876px; /* Figma px — lateral media pin */
  --hero-portrait-w: 1042px;
  --hero-diagonal-w: 1425px;
  --hero-diagonal-h: 925px;
  /*
    Red wedge clip-path — Figma 170:3112 slope (--hero-diagonal-h 925px).
    Bottom X for shorter live band: top − run × (--hero-min-h / ref height).
  */
  --hero-wedge-top-x: 65.3%;
  --hero-wedge-run-x: 22.35%; /* 88% of Figma (~12% narrower red wash) */
  --hero-wedge-ref-h: 925;
  --hero-wedge-h-scale: 0.806486; /* 746px / 925px — desktop --hero-min-h band */
  /* Shine+ instance (Figma 229:1689) — H1 overflows the 656px column */
  --hero-title-max: 52.6875rem; /* 843px */
  /* Service page detail (Figma 267:47) — H1 overflows the 656px column */
  --hero-title-max-detail: 47.1875rem; /* 755px */
  --hero-content-top-detail: 9.875rem; /* 158px */

  /* local-hero — Figma 344:47 (desktop) / 344:503 (mobile) */
  --local-hero-min-h: 46.625rem; /* 746px — demo-location desktop band */
  --local-hero-min-h-mobile: 32.875rem; /* 526px */
  --local-hero-copy-w: 41rem; /* 656px */
  --local-hero-title-max: 47.375rem; /* 758px — H1 overflows the 656px column */
  --local-hero-content-top: 6.8125rem; /* 109px — symmetric inset (demo-location) */
  --local-hero-form-w: 29.6875rem; /* 475px */
  --local-hero-form-h: 33rem; /* 528px */
  --local-hero-form-top: 11.5rem; /* 184px */
  --local-hero-form-pad: 1.5rem; /* 24px */
  --local-hero-form-col-gap: 2rem; /* 32px between field columns */
  --local-hero-field-h: 3.5rem; /* 56px */
  --local-hero-field-w: 12.5rem; /* 200px */
  --fs-local-hero-label: 1rem; /* 16px — Inter Medium */
  --lh-local-hero-label: 1.5rem; /* 24px */
  --ls-local-hero-label: -0.011em; /* -0.176px at 16px */
  --fs-local-hero-placeholder: 0.875rem; /* 14px */
  --ls-local-hero-placeholder: -0.02em;
  --color-local-hero-muted: #a1a1a1; /* field border + select placeholder */
  --local-hero-copy-gap: 2rem; /* 32px desktop heading stack */
  --local-hero-copy-gap-mobile: 1.125rem; /* 18px */
  --local-hero-pad-y-mobile: 1.75rem; /* 28px — matches demo-location mobile band */
  --radius-local-hero-field: 0.5rem; /* 8px */
  --local-hero-form-panel-pad-y: 3.5rem; /* 56px — Figma 346:2888 */
  --local-hero-form-stack-gap: 2rem; /* 32px — title / fields / button */
  --local-hero-form-btn-w-mobile: 17.8125rem; /* 285px */
  --radius-local-hero-form-panel: 0.5rem; /* 8px — mobile sparkle panel */

  /* hero-image contact instance — Figma 325:2689 */
  --hero-content-top-contact: 20.1875rem; /* 323px — copy sits lower than the default hero */
  --hero-contact-text-w: 32.1875rem; /* 515px — body is narrower than the 656px title */

  /* contact-form — Figma 325:2642 (desktop) / 325:3117 (mobile) */
  --contact-form-pad-y: 7.5rem; /* 120px */
  --contact-form-pad-y-mobile: 3.5rem; /* 56px */
  --contact-form-card-pad: 4.5rem; /* 72px */
  --contact-form-fields-w: 78.5rem; /* 1256px — two 612px columns + 32px gap */
  --contact-form-progress-h: 0.625rem; /* 10px — GF default fill is 21px; theme overrides both track + fill */
  --contact-form-col-w: 38.25rem; /* 612px */
  --contact-form-select-w: 14.4375rem; /* 231px — service dropdown is shorter than a column */
  --contact-form-field-h: 3.5rem; /* 56px */
  --contact-form-btn-w-mobile: 17.8125rem; /* 285px */
  --fs-contact-form-title: 3.375rem; /* 54px — Prompt Black */
  --fs-contact-form-title-mobile: 1.5rem; /* 24px */
  --lh-contact-form-title: 3.375rem; /* 54px */
  --lh-contact-form-title-mobile: 1.8125rem; /* 29px */

  /* contact-steps — Figma 325:2880 (desktop) / 325:3170 (mobile) */
  --contact-steps-pad-y: 7.5rem; /* 120px */
  --contact-steps-pad-y-mobile: 3.5rem; /* 56px */
  --contact-steps-content-max: 92.5rem; /* 1480px */
  --contact-steps-copy-w: 42rem; /* 672px */
  --contact-steps-title-w: 41rem; /* 656px */
  --contact-steps-media-w: 46.75rem; /* 748px */
  --contact-steps-media-h: 34.1875rem; /* 547px */
  --contact-steps-media-w-mobile: 17.875rem; /* 286px */
  --contact-steps-steps-w-mobile: 15.25rem; /* 244px */
  --contact-steps-row-gap: 3.75rem; /* 60px — image / copy */
  --contact-steps-stack-gap: 2rem; /* 32px — title / steps / rating */
  --contact-steps-step-gap: 1rem; /* 16px desktop badge → text */
  --contact-steps-step-gap-mobile: 1.5rem; /* 24px */
  --contact-steps-list-gap-mobile: 2.25rem; /* 36px between stacked steps */
  --contact-steps-badge: 3.375rem; /* 54px */
  --fs-contact-steps-title: 3.375rem; /* 54px — Prompt Black */
  --fs-contact-steps-title-mobile: 1.5rem; /* 24px */
  --lh-contact-steps-title: 3.375rem; /* 54px */
  --lh-contact-steps-title-mobile: 1.8125rem; /* 29px */
  --fs-contact-steps-body: 1rem; /* 16px — Inter Regular */
  --fs-contact-steps-badge: 2.5rem; /* 40px — Inter Black */
  --lh-contact-steps-badge: 2.25rem; /* 36px */
  --fs-contact-steps-rating: 0.75rem; /* 12px */

  /* brand-intro-shine-template — Shine+ intro — Figma 229:1717 (desktop) / 229:2051 (mobile) */
  --fs-brand-intro-shine-title: 3.375rem; /* 54px — Prompt Black */
  --fs-brand-intro-shine-title-mobile: 1.5rem; /* 24px */
  --lh-brand-intro-shine-title: 3.375rem; /* 54px */
  --lh-brand-intro-shine-title-mobile: 1.8125rem; /* 29px */
  --fs-brand-intro-shine-body: 1.125rem; /* 18px — Inter Regular, both breakpoints */
  --lh-brand-intro-shine-body: 1.875rem; /* 30px */
  --ls-brand-intro-shine: -0.02em;
  --fs-brand-intro-shine-breadcrumb: 1.125rem; /* 18px */
  --fs-brand-intro-shine-breadcrumb-mobile: 0.75rem; /* 12px */
  --lh-brand-intro-shine-breadcrumb: 1.875rem; /* 30px */
  --brand-intro-shine-pad-y: 8.75rem; /* 140px desktop */
  --brand-intro-shine-pad-y-mobile: 3.5rem; /* 56px */
  --brand-intro-shine-content-max: 92.5rem; /* 1480px */
  --brand-intro-shine-copy-w: 42rem; /* 672px — desktop text column */
  --brand-intro-shine-title-w: 41rem; /* 656px */
  --brand-intro-shine-media-w: 46.75rem; /* 748px */
  --brand-intro-shine-media-h: 34.1875rem; /* 547px */
  --brand-intro-shine-media-w-mobile: 17.875rem; /* 286px */
  --brand-intro-shine-row-gap: 3.75rem; /* 60px — column gap / mobile stack */
  --brand-intro-shine-stack-gap: 2rem; /* 32px — breadcrumb → content */
  --brand-intro-shine-text-gap: 2rem; /* 32px desktop title → body → logo */
  --brand-intro-shine-text-gap-mobile: 1.5rem; /* 24px title → body */
  --brand-intro-shine-logo-w: 21.1875rem; /* 339px */
  --brand-intro-shine-logo-h: 11.875rem; /* 190px */
  --brand-intro-shine-logo-w-mobile: 10.875rem; /* 174px */
  --brand-intro-shine-logo-h-mobile: 6.0625rem; /* 97px */

  /* brand-intro-service-page — Figma 237:2054 (desktop; mobile follows sibling intros) */
  --fs-brand-intro-service-title: 3.375rem; /* 54px — Prompt Black */
  --fs-brand-intro-service-title-mobile: 1.5rem; /* 24px */
  --lh-brand-intro-service-title: 3.375rem; /* 54px */
  --lh-brand-intro-service-title-mobile: 1.8125rem; /* 29px */
  --fs-brand-intro-service-body: 1.125rem; /* 18px — Inter Regular */
  --fs-brand-intro-service-body-mobile: 1rem; /* 16px */
  --lh-brand-intro-service-body: 1.875rem; /* 30px */
  --ls-brand-intro-service: -0.02em;
  --fs-brand-intro-service-breadcrumb: 1.125rem; /* 18px */
  --fs-brand-intro-service-breadcrumb-mobile: 0.75rem; /* 12px */
  --lh-brand-intro-service-breadcrumb: 1.875rem; /* 30px */
  --brand-intro-service-pad-y: 7.5rem; /* 120px */
  --brand-intro-service-pad-y-mobile: 3.5rem; /* 56px */
  --brand-intro-service-content-max: 92.5rem; /* 1480px */
  --brand-intro-service-copy-w: 42rem; /* 672px */
  --brand-intro-service-title-w: 41rem; /* 656px */
  --brand-intro-service-media-w: 46.75rem; /* 748px */
  --brand-intro-service-media-h: 34.1875rem; /* 547px */
  --brand-intro-service-media-w-mobile: 17.875rem; /* 286px */
  --brand-intro-service-row-gap: 3.75rem; /* 60px — column gap / mobile text→image */
  --brand-intro-service-stack-gap: 2rem; /* 32px — row 1 → row 2 / mobile breadcrumb */
  --brand-intro-service-text-gap: 2rem; /* 32px desktop title → body */
  --brand-intro-service-text-gap-mobile: 1.5rem; /* 24px */

  /* local-intro — Figma 344:77 (desktop) / 344:461 (mobile) */
  --local-intro-pad-y: 7.5rem; /* 120px */
  --local-intro-pad-y-mobile: 3.5rem; /* 56px */
  --local-intro-content-max: 92.5rem; /* 1480px */
  --local-intro-copy-w: 42rem; /* 672px */
  --local-intro-title-w: 41rem; /* 656px */
  --local-intro-media-w: 46.75rem; /* 748px */
  --local-intro-media-h: 43.4375rem; /* 695px */
  --local-intro-media-w-mobile: 17.875rem; /* 286px */
  --local-intro-media-h-mobile: 11.0625rem; /* 177px */
  --local-intro-row-gap: 3.75rem; /* 60px — column gap / mobile media→copy */
  --local-intro-stack-gap: 2rem; /* 32px — mobile copy sections / desktop text stack */
  --local-intro-text-gap-mobile: 1.5rem; /* 24px — mobile title → lead */
  --local-intro-body-gap-mobile: 3.75rem; /* 60px — mobile body paragraphs */
  --fs-local-intro-title: 3.375rem; /* 54px — Prompt Black */
  --fs-local-intro-title-mobile: 1.5rem; /* 24px */
  --lh-local-intro-title: 3.375rem; /* 54px */
  --lh-local-intro-title-mobile: 1.8125rem; /* 29px */
  --fs-local-intro-body: 1.125rem; /* 18px */
  --fs-local-intro-lead-mobile: 1rem; /* 16px — mobile intro paragraph */
  --lh-local-intro-body: 1.875rem; /* 30px */
  --ls-local-intro: -0.02em;

  /* local-service-template-service-intro — Figma 371:74 (desktop) / 371:495 (mobile) */
  --local-service-intro-pad-y: 7.5rem; /* 120px */
  --local-service-intro-pad-y-mobile: 3.5rem; /* 56px */
  --local-service-intro-content-max: 92.5rem; /* 1480px */
  --local-service-intro-copy-w: 42rem; /* 672px */
  --local-service-intro-title-w: 41rem; /* 656px */
  --local-service-intro-media-w: 46.75rem; /* 748px */
  --local-service-intro-media-h: 37.0625rem; /* 593px */
  --local-service-intro-media-w-mobile: 17.875rem; /* 286px */
  --local-service-intro-row-gap: 3.75rem; /* 60px — desktop columns / mobile image → copy */
  --local-service-intro-stack-gap: 2rem; /* 32px — section bands */
  --local-service-intro-text-gap: 2rem; /* 32px desktop lead title → body */
  --local-service-intro-text-gap-mobile: 1.5rem; /* 24px */
  --local-service-intro-story-gap: 3.75rem; /* 60px desktop eyebrow → title → body */
  --fs-local-service-intro-title: 3.375rem; /* 54px — Prompt Black */
  --fs-local-service-intro-title-mobile: 1.5rem; /* 24px */
  --lh-local-service-intro-title: 3.375rem; /* 54px */
  --lh-local-service-intro-title-mobile: 1.8125rem; /* 29px */
  --fs-local-service-intro-body: 1.125rem; /* 18px — Inter Regular */
  --fs-local-service-intro-body-mobile: 1rem; /* 16px */
  --lh-local-service-intro-body: 1.875rem; /* 30px */
  --ls-local-service-intro: -0.02em;
  --fs-local-service-intro-breadcrumb: 1.125rem; /* 18px */
  --fs-local-service-intro-breadcrumb-mobile: 0.625rem; /* 10px */
  --lh-local-service-intro-breadcrumb: 1.875rem; /* 30px */
  --fs-local-service-intro-quote-title: 2.25rem; /* 36px */
  --fs-local-service-intro-quote-title-mobile: 1.125rem; /* 18px */
  --lh-local-service-intro-quote-title-mobile: 1.875rem; /* 30px */
  --fs-local-service-intro-quote-body-mobile: 0.8125rem; /* 13px */
  --lh-local-service-intro-quote-body-mobile: 1.25rem; /* 20px */
  --local-service-intro-quote-pad: 2.25rem; /* 36px */
  --local-service-intro-quote-pad-mobile: 1.5rem; /* 24px */
  --local-service-intro-quote-bar: 10px; /* desktop left accent */
  --local-service-intro-quote-bar-mobile: 5px; /* mobile top accent */
  --local-service-intro-quote-w-mobile: 17.75rem; /* 284px */
  --local-service-intro-quote-body-w-mobile: 12.875rem; /* 206px */
  --local-service-intro-quote-cta-w-mobile: 16.25rem; /* 260px */
  --color-local-service-intro-quote-bg: #fcfcfc;
  --shadow-local-service-intro-quote: 0 4px 10px 0 rgba(0, 0, 0, 0.05);
  --shadow-local-service-intro-quote-mobile: 0 4px 20px 0 rgba(0, 0, 0, 0.05);

  /* local-service-template-service-copy — Figma 371:912 (desktop) / 371:1306 (mobile) */
  --local-service-copy-pad-y: 3.5rem; /* 56px — both breakpoints */
  --local-service-copy-content-max: 92.5rem; /* 1480px */
  --local-service-copy-header-max: 93.6875rem; /* 1499px */
  --local-service-copy-copy-w: 42rem; /* 672px — process column */
  --local-service-copy-title-w: 41rem; /* 656px */
  --local-service-copy-media-w: 46.75rem; /* 748px */
  --local-service-copy-media-h: 34.1875rem; /* 547px */
  --local-service-copy-media-w-mobile: 17.875rem; /* 286px */
  --local-service-copy-row-gap: 3.75rem; /* 60px — desktop columns / mobile image → copy */
  --local-service-copy-stack-gap: 2rem; /* 32px */
  --local-service-copy-header-gap: 1.875rem; /* 30px eyebrow → title stack */
  --local-service-copy-text-gap: 2rem; /* 32px title → body / process title → steps */
  --local-service-copy-text-gap-mobile: 1.5rem; /* 24px */
  --local-service-copy-step-gap: 1rem; /* 16px desktop dot → copy */
  --local-service-copy-step-stack-mobile: 2.25rem; /* 36px body → steps / between steps */
  --local-service-copy-dot: 1.75rem; /* 28px desktop bullet */
  --local-service-copy-badge: 3.375rem; /* 54px mobile numbered circle */
  --fs-local-service-copy-step-num: 2.5rem; /* 40px — Inter Black */
  --lh-local-service-copy-step-num: 2.25rem; /* 36px */
  --fs-local-service-copy-step: 1rem; /* 16px */
  --local-service-copy-cta-w-mobile: 17.5rem; /* 280px */
  --color-local-service-copy-badge: var(--color-process-surface); /* #c52233 */

  /* local-service-hero — Figma 371:47 (desktop) / 371:472 (mobile) */
  --local-service-hero-title-max: 47.375rem; /* 758px — H1 overflows the 656px column */
  --local-service-hero-content-top: 14rem; /* 224px */
  --local-service-hero-min-h-mobile: 41.125rem; /* 658px */

  /* local-service-page-template-service-why — Figma 371:295 (desktop) / 371:743 (mobile) */
  --local-service-why-pad-y: 7.5rem; /* 120px */
  --local-service-why-pad-y-mobile: 3.5rem; /* 56px */
  --local-service-why-header-max: 93.6875rem; /* 1499px */
  --local-service-why-title-max-mobile: 20rem; /* 320px */
  --local-service-why-card-w: 21.5625rem; /* 345px */
  --local-service-why-card-w-mobile: 18.0625rem; /* 289px */
  --local-service-why-card-h: 32.5rem; /* 520px */
  --local-service-why-card-h-mobile: 21.75rem; /* 348px */
  --local-service-why-card-pad-mobile: 1.25rem; /* 20px */
  --local-service-why-card-gap-mobile: 1.5625rem; /* 25px */
  --local-service-why-card-title-max: 21.125rem; /* 338px */
  --local-service-why-card-text-max: 18.75rem; /* 300px */
  --local-service-why-icon: 6.5625rem; /* 105px */
  --local-service-why-icon-mobile: 3.1875rem; /* 51px */
  --local-service-why-cta-w-mobile: 18.8125rem; /* 301px */
  --shadow-local-service-why-card: var(--shadow-local-shine-plus-card);
  --shadow-local-service-why-card-mobile: var(--shadow-local-shine-plus-card-mobile);

  /* local-shine-plus — Figma 344:307 (desktop) / 346:4840 (mobile) */
  --local-shine-plus-pad-y: 7.5rem; /* 120px */
  --local-shine-plus-pad-y-mobile: 3.5rem; /* 56px */
  --local-shine-plus-header-max: 93.6875rem; /* 1499px */
  --local-shine-plus-title-max-mobile: 20rem; /* 320px */
  --local-shine-plus-subtitle-max: 60.8125rem; /* 973px — Prompt Black restatement */
  --local-shine-plus-lead-max: 47.8125rem; /* 765px */
  --local-shine-plus-body-max: 56.0625rem; /* 897px */
  --local-shine-plus-card-w: 21.5625rem; /* 345px */
  --local-shine-plus-card-w-mobile: 18.0625rem; /* 289px */
  --local-shine-plus-card-h: 32.5rem; /* 520px */
  --local-shine-plus-card-h-mobile: 21.75rem; /* 348px */
  --local-shine-plus-card-pad-mobile: 1.25rem; /* 20px */
  --local-shine-plus-card-gap-mobile: 1.5625rem; /* 25px icon → title → body */
  --local-shine-plus-card-title-max: 21.125rem; /* 338px — fits “Consistent Seasonal Care” on one line */
  --local-shine-plus-card-text-max: 18.75rem; /* 300px */
  --local-shine-plus-icon: 6.5625rem; /* 105px */
  --local-shine-plus-icon-mobile: 3.1875rem; /* 51px */
  --local-shine-plus-cta-w-mobile: 18.8125rem; /* 301px */
  --local-shine-plus-cta-pad-y: 1.25rem; /* 20px */
  --local-shine-plus-cta-pad-x: 2.5rem; /* 40px */
  --shadow-local-shine-plus-card: 0 4px 10px 0 rgba(58, 58, 58, 0.05);
  --shadow-local-shine-plus-card-mobile: 0 4px 25px 0 rgba(0, 0, 0, 0.08);

  /* local-team — Figma 346:301 (desktop) / 344:626 (mobile team + spotlight) */
  --local-team-pad-y: 8.75rem; /* 140px */
  --local-team-pad-y-mobile: 3.5rem; /* 56px */
  --local-team-content-max: 92.5rem; /* 1480px */
  --local-team-copy-w: 42rem; /* 672px */
  --local-team-title-w: 41rem; /* 656px */
  --local-team-card-w: 46.75rem; /* 748px */
  --local-team-card-w-mobile: 18.375rem; /* 294px */
  --local-team-card-min-h: 49.0625rem; /* 785px */
  --local-team-card-pad-x: 2.75rem; /* 44px */
  --local-team-card-pad-y: 2.5rem; /* 40px */
  --local-team-card-gap: 1.5625rem; /* 25px */
  --local-team-photo: 20.3125rem; /* 325px */
  --local-team-photo-mobile: 14.5625rem; /* 233px */
  --local-team-bio-max: 25rem; /* 400px desktop */
  --local-team-linkedin-icon: 1.5625rem; /* 25px */
  --local-team-cta-w-mobile: 14.25rem; /* 228px */
  --local-team-eyebrow-fs-mobile: 0.625rem; /* 10px */
  --shadow-local-team-card: 0 4px 10px 0 rgba(0, 0, 0, 0.05);

  /* service-detail-v1-service-detail — Figma 267:852 (desktop) / 289:221 (mobile) */
  --fs-service-detail-v1-title: 3.375rem; /* 54px — Prompt Black */
  --fs-service-detail-v1-title-mobile: 1.5rem; /* 24px */
  --lh-service-detail-v1-title: 3.375rem; /* 54px */
  --lh-service-detail-v1-title-mobile: 1.8125rem; /* 29px */
  --fs-service-detail-v1-body: 1.125rem; /* 18px — Inter Regular, both breakpoints */
  --lh-service-detail-v1-body: 1.875rem; /* 30px */
  --ls-service-detail-v1: -0.02em;
  --fs-service-detail-v1-breadcrumb: 1.125rem; /* 18px */
  --fs-service-detail-v1-breadcrumb-mobile: 0.75rem; /* 12px */
  --lh-service-detail-v1-breadcrumb: 1.875rem; /* 30px */
  --service-detail-v1-pad-y: 7.5rem; /* 120px */
  --service-detail-v1-pad-y-mobile: 3.5rem; /* 56px */
  --service-detail-v1-copy-w: 44rem; /* 704px — desktop headline column */
  --service-detail-v1-body-w: 37.875rem; /* 606px — desktop body */
  --service-detail-v1-media-w: 61.375rem; /* 982px */
  --service-detail-v1-media-h: 61.3125rem; /* 981px */
  --service-detail-v1-col-gap: 0.875rem; /* 14px — copy → media */
  --service-detail-v1-stack-gap: 2rem; /* 32px — mobile breadcrumb → content */
  --service-detail-v1-stack-gap-desktop: 1.5rem; /* 24px — breadcrumb → copy */
  --service-detail-v1-content-gap-mobile: 1.25rem; /* 20px — image → headline */
  --service-detail-v1-text-gap: 1.5rem; /* 24px title → body */

  /* service-detail-v2-service-detail — Figma 267:868 (desktop) / 497:15 (mobile) */
  --fs-service-detail-v2-title: 3.375rem; /* 54px — Prompt Black */
  --fs-service-detail-v2-title-mobile: 1.5rem; /* 24px */
  --lh-service-detail-v2-title: 3.375rem; /* 54px */
  --lh-service-detail-v2-title-mobile: 1.8125rem; /* 29px */
  --fs-service-detail-v2-intro: 1.125rem; /* 18px — Inter Regular */
  --lh-service-detail-v2-intro: 1.875rem; /* 30px */
  --ls-service-detail-v2: -0.02em;
  --fs-service-detail-v2-card-title: 1.5rem; /* 24px — Inter SemiBold desktop */
  --lh-service-detail-v2-card-title: 2.25rem; /* 36px */
  --fs-service-detail-v2-card-title-mobile: 1.125rem; /* 18px — Prompt Bold */
  --lh-service-detail-v2-card-title-mobile: 1.875rem; /* 30px */
  --fs-service-detail-v2-card-body: 1rem; /* 16px — Inter Regular */
  --lh-service-detail-v2-card-body: 1.25rem; /* 20px */
  --fs-service-detail-v2-note: 0.75rem; /* 12px */
  --color-service-detail-v2-note: #a6a6a6;
  --service-detail-v2-pad-y: 7.5rem; /* 120px */
  --service-detail-v2-pad-y-mobile: 3.5rem; /* 56px */
  --service-detail-v2-stack-gap: 2rem; /* 32px */
  --service-detail-v2-intro-gap: 2rem; /* 32px desktop title → intro */
  --service-detail-v2-intro-gap-mobile: 1.5rem; /* 24px */
  --service-detail-v2-card-h: 48.75rem; /* 780px desktop photo panels */
  --service-detail-v2-card-copy-w: 23.9375rem; /* 383px desktop overlay */
  --service-detail-v2-card-copy-gap: 0.9375rem; /* 15px desktop title → body */
  --service-detail-v2-card-pad-x: 2.5rem; /* 40px */
  --service-detail-v2-card-pad-y: 3.75rem; /* 60px */
  --service-detail-v2-card-media-h-mobile: 14.25rem; /* 228px */
  --service-detail-v2-card-body-h-mobile: 13.625rem; /* 218px */
  --service-detail-v2-card-pad-mobile: 1.5rem; /* 24px */
  --service-detail-v2-card-copy-gap-mobile: 0.5rem; /* 8px */
  --service-detail-v2-card-copy-w-mobile: 12.875rem; /* 206px body */
  --service-detail-v2-note-w: 51.5625rem; /* 825px */
  --service-detail-v2-title-w-mobile: 16.375rem; /* 262px */
  --shadow-service-detail-v2-card: 0 4px 20px 0 rgba(0, 0, 0, 0.05);

  /* service-detail-v3-service-page-detail — Figma 278:919 (desktop) / 289:254 (mobile) */
  /* Same 4-card + carousel scale as service-hub-v3. Intro is 18px on mobile too. */
  --color-service-detail-v3-icon: var(--color-service-hub-v3-icon); /* #c52233 badge fill */
  --fs-service-detail-v3-title: var(--fs-service-hub-v3-title); /* 54px — Prompt Black */
  --fs-service-detail-v3-title-mobile: var(--fs-service-hub-v3-title-mobile); /* 24px */
  --lh-service-detail-v3-title: var(--lh-service-hub-v3-title); /* 54px */
  --lh-service-detail-v3-title-mobile: var(--lh-service-hub-v3-title-mobile); /* 29px */
  --fs-service-detail-v3-intro: var(--fs-service-hub-v3-intro); /* 18px — Inter Regular */
  --lh-service-detail-v3-intro: var(--lh-service-hub-v3-intro); /* 30px */
  --ls-service-detail-v3: var(--ls-service-hub-v3); /* -0.02em */
  --fs-service-detail-v3-card-title: var(--fs-service-hub-v3-card-title); /* 24px */
  --lh-service-detail-v3-card-title: var(--lh-service-hub-v3-card-title); /* 29px */
  --fs-service-detail-v3-card-body: var(--fs-service-hub-v3-card-body); /* 16px */
  --lh-service-detail-v3-card-body: var(--lh-service-hub-v3-card-body); /* 20px */
  --service-detail-v3-pad-y: var(--service-hub-v3-pad-y); /* 120px */
  --service-detail-v3-pad-y-mobile: var(--service-hub-v3-pad-y-mobile); /* 56px */
  --service-detail-v3-header-max: var(--service-hub-v3-header-max); /* 1499px */
  --service-detail-v3-intro-max: var(--service-hub-v3-intro-max); /* 973px */
  --service-detail-v3-cards-gap: var(--service-hub-v3-cards-gap); /* 34px */
  --service-detail-v3-card-w: var(--service-hub-v3-card-w); /* 345px */
  --service-detail-v3-card-w-mobile: var(--service-hub-v3-card-w-mobile); /* 289px */
  --service-detail-v3-card-h: var(--service-hub-v3-card-h); /* 520px */
  --service-detail-v3-card-h-mobile: var(--service-hub-v3-card-h-mobile); /* 344px */
  --service-detail-v3-card-pad: var(--service-hub-v3-card-pad); /* 24px */
  --service-detail-v3-card-pad-mobile: var(--service-hub-v3-card-pad-mobile); /* 20px */
  --service-detail-v3-card-gap: var(--service-hub-v3-card-gap); /* 32px */
  --service-detail-v3-card-gap-mobile: var(--service-hub-v3-card-gap-mobile); /* 25px */
  --service-detail-v3-card-text-max: var(--service-hub-v3-card-text-max); /* 300px */
  --service-detail-v3-icon: var(--service-hub-v3-icon); /* 105px */
  --service-detail-v3-icon-mobile: var(--service-hub-v3-icon-mobile); /* 51px */
  --service-detail-v3-cta-pad-y: var(--service-hub-v3-cta-pad-y); /* 20px */
  --service-detail-v3-cta-pad-x: var(--service-hub-v3-cta-pad-x); /* 40px */
  --radius-service-detail-v3-card-mobile: 0.625rem; /* 10px — Figma mobile cards */
  --shadow-service-detail-v3-card: var(--shadow-service-hub-v3-card);
  --shadow-service-detail-v3-card-mobile: var(--shadow-service-hub-v3-card-mobile);

  /* service-gallery-service-page-detail — Figma 278:989 (desktop) / 292:359 (mobile) */
  --fs-service-gallery-title: 3.375rem; /* 54px — Prompt Black */
  --fs-service-gallery-title-mobile: 1.5rem; /* 24px */
  --lh-service-gallery-title: 3.375rem; /* 54px */
  --lh-service-gallery-title-mobile: 1.8125rem; /* 29px */
  --fs-service-gallery-intro: 1.125rem; /* 18px — Inter Regular */
  --lh-service-gallery-intro: 1.875rem; /* 30px */
  --ls-service-gallery: -0.02em;
  --service-gallery-pad-y: 7.5rem; /* 120px */
  --service-gallery-pad-y-mobile: 3.5rem; /* 56px */
  --service-gallery-header-max: 93.6875rem; /* 1499px */
  --service-gallery-intro-max: 60.8125rem; /* 973px */
  --service-gallery-gap-x: 1.5rem; /* 24px desktop column gap */
  --service-gallery-gap-y: 1.5625rem; /* 25px desktop row gap */
  --service-gallery-gap-mobile: 0.5rem; /* 8px */
  --shadow-service-gallery-item-mobile: 0 4px 50px 0 rgba(0, 0, 0, 0.08);

  /* process-service-page — Figma 237:2898 (desktop) / 246:3247 (mobile) */
  --fs-process-service-title: 3.375rem; /* 54px — Prompt Black */
  --fs-process-service-title-mobile: 1.5rem; /* 24px */
  --lh-process-service-title: 3.375rem; /* 54px */
  --lh-process-service-title-mobile: 1.625rem; /* 26px — mobile Figma */
  --fs-process-service-subtitle: 2.25rem; /* 36px */
  --fs-process-service-subtitle-mobile: 1.25rem; /* 20px */
  --lh-process-service-subtitle: 2.75rem; /* 44px — Figma 84px is a leftover style */
  --lh-process-service-subtitle-mobile: 1.5rem; /* 24px */
  --fs-process-service-intro: 1.125rem; /* 18px — Inter */
  --lh-process-service-intro: 1.875rem; /* 30px */
  --fs-process-service-point-title: 1.5rem; /* 24px */
  --lh-process-service-point-title: 1.8125rem; /* 29px */
  --ls-process-service: -0.02em;
  --process-service-pad-y: 7.5rem; /* 120px */
  --process-service-pad-y-mobile: 3.5rem; /* 56px */
  --process-service-header-max: 93.6875rem; /* 1499px */
  --process-service-header-max-mobile: 20rem; /* 320px */
  --process-service-intro-max: 61.8125rem; /* 989px */
  --process-service-col-w: 44.3125rem; /* 709px */
  --process-service-col-gap: 2.5rem; /* 40px between copy and pricing */
  --process-service-board-w-mobile: 18rem; /* 288px */
  --process-service-board-pad: 2rem; /* 32px desktop pricing card */
  --process-service-board-pad-mobile: 1.25rem; /* 20px white board */
  --process-service-pricing-pad-mobile: 1.5rem; /* 24px */
  --process-service-pricing-gap-mobile: 1.875rem; /* 30px title → body */
  --process-service-cta-pad-y: 1.25rem; /* 20px */
  --process-service-cta-pad-x: 2.5rem; /* 40px */
  --radius-process-service-board: 0.625rem; /* 10px — mobile white board */
  --shadow-process-service-card: 0 4px 10px 0 rgba(0, 0, 0, 0.05);

  /* seasonal-services-shine-template — Figma 229:2459 (desktop) / 389:101 (mobile) */
  --fs-seasonal-services-title: 3.375rem; /* 54px — Prompt Black */
  --fs-seasonal-services-title-mobile: 1.5rem; /* 24px */
  --lh-seasonal-services-title: 3.375rem; /* 54px */
  --lh-seasonal-services-title-mobile: 1.8125rem; /* 29px */
  --fs-seasonal-services-intro: 1.125rem; /* 18px */
  --fs-seasonal-services-intro-mobile: 0.875rem; /* 14px */
  --lh-seasonal-services-intro: 1.875rem; /* 30px */
  --ls-seasonal-services: -0.02em;
  --fs-seasonal-services-trigger: 1.5rem; /* 24px — Prompt Black */
  --fs-seasonal-services-trigger-mobile: 1.25rem; /* 20px */
  --fs-seasonal-services-card-title: 1.5rem; /* 24px */
  --fs-seasonal-services-card-title-mobile: 1.5rem; /* 24px */
  --lh-seasonal-services-card-title: 2.25rem; /* 36px */
  --fs-seasonal-services-meta: 1.125rem; /* 18px */
  --lh-seasonal-services-meta: 1.4375rem; /* 23px */
  --fs-seasonal-services-point-title: 1rem; /* 16px */
  --fs-seasonal-services-point-title-mobile: 0.875rem; /* 14px */
  --fs-seasonal-services-point-text: 1rem; /* 16px */
  --fs-seasonal-services-point-text-mobile: 0.75rem; /* 12px */
  --lh-seasonal-services-point: 1.25rem; /* 20px */
  --seasonal-services-pad-y: 7.5rem; /* 120px */
  --seasonal-services-pad-y-mobile: 3.5rem; /* 56px */
  --seasonal-services-content-max: 92.5rem; /* 1480px */
  --seasonal-services-header-max: 93.6875rem; /* 1499px */
  --seasonal-services-stack-gap: 2rem; /* 32px */
  --seasonal-services-intro-gap: 2rem; /* 32px */
  --seasonal-services-intro-gap-mobile: 1.5rem; /* 24px */
  --seasonal-services-card-gap: 2rem; /* 32px */
  --seasonal-services-card-gap-mobile: 1.25rem; /* 20px */
  --seasonal-services-card-w: 29.5rem; /* 472px */
  --seasonal-services-card-w-mobile: 18rem; /* 288px */
  --seasonal-services-icon: 2.0625rem; /* 33px */
  --seasonal-services-trigger-pad-y: 1.25rem; /* 20px */
  --seasonal-services-trigger-pad-x: 2.5rem; /* 40px */
  --seasonal-services-panel-pad-mobile: 1.25rem; /* 20px */
  --seasonal-services-panel-pad-bottom: 3.5rem; /* 56px desktop */
  --seasonal-services-body-gap: 2rem; /* 32px */
  --seasonal-services-body-gap-mobile: 1.5625rem; /* 25px */
  --seasonal-services-point-gap: 1.5rem; /* 24px */
  --seasonal-services-point-gap-mobile: 1.75rem; /* 28px */
  --seasonal-services-foot-h: 4rem; /* 64px */
  --shadow-seasonal-services-card: 0 4px 10px 0 rgba(0, 0, 0, 0.05);
  --shadow-seasonal-services-card-mobile: 0 4px 25px 0 rgba(0, 0, 0, 0.08);

  /* pricing-shine-template — Figma 234:354 (desktop) / 237:726 (mobile) */
  --fs-pricing-shine-title: 3.375rem; /* 54px — Prompt Black */
  --fs-pricing-shine-title-mobile: 1.5rem; /* 24px */
  --lh-pricing-shine-title: 3.375rem; /* 54px */
  --lh-pricing-shine-title-mobile: 1.8125rem; /* 29px */
  --fs-pricing-shine-intro: 1.125rem; /* 18px */
  --fs-pricing-shine-intro-mobile: 0.9375rem; /* 15px */
  --lh-pricing-shine-intro: 1.875rem; /* 30px */
  --ls-pricing-shine: -0.02em;
  --fs-pricing-shine-eyebrow: 1rem; /* 16px — Poppins SemiBold */
  --lh-pricing-shine-eyebrow: 2.25rem; /* 36px */
  --ls-pricing-shine-eyebrow: 0.3em; /* 4.8px at 16px */
  --fs-pricing-shine-card-title: 1.5rem; /* 24px */
  --lh-pricing-shine-card-title: 1.8125rem; /* 29px */
  --fs-pricing-shine-card-body: 1.125rem; /* 18px */
  --lh-pricing-shine-card-body: 1.4375rem; /* 23px */
  --fs-pricing-shine-point: 1rem; /* 16px */
  --lh-pricing-shine-point: 1.25rem; /* 20px */
  --pricing-shine-pad-y: 7.5rem; /* 120px */
  --pricing-shine-pad-y-mobile: 3.5rem; /* 56px */
  --pricing-shine-content-max: 92.5rem; /* 1480px */
  --pricing-shine-header-max: 93.6875rem; /* 1499px */
  --pricing-shine-intro-max: 61.8125rem; /* 989px */
  --pricing-shine-stack-gap: 2rem; /* 32px */
  --pricing-shine-intro-gap: 2rem; /* 32px */
  --pricing-shine-intro-gap-mobile: 1.5rem; /* 24px */
  --pricing-shine-card-gap: 2rem; /* 32px between desktop cards */
  --pricing-shine-card-gap-desktop: 3.75rem; /* 60px copy → bullets */
  --pricing-shine-card-gap-mobile: 1.5625rem; /* 25px inner stack */
  --pricing-shine-card-w-mobile: 18rem; /* 288px */
  --pricing-shine-card-h: 33.875rem; /* 542px desktop */
  --pricing-shine-card-pad-y: 3.75rem; /* 60px */
  --pricing-shine-card-pad-x: 2.5rem; /* 40px */
  --pricing-shine-card-pad-mobile: 1.25rem; /* 20px */
  --pricing-shine-point-gap: 1.75rem; /* 28px */
  --shadow-pricing-shine-card: 0 4px 10px 0 rgba(0, 0, 0, 0.05);
  --shadow-pricing-shine-card-mobile: 0 4px 25px 0 rgba(0, 0, 0, 0.08);

  /* pricing-v2-shine-template — estimate CTA + related services — Figma 304:524 (desktop) / 246:3495 (mobile) */
  --fs-pricing-v2-shine-title: 1.5rem; /* 24px — Prompt Black */
  --lh-pricing-v2-shine-title: 1.8125rem; /* 29px */
  --fs-pricing-v2-shine-body: 1.125rem; /* 18px — Inter Medium */
  --lh-pricing-v2-shine-body: 1.4375rem; /* 23px */
  --fs-pricing-v2-shine-btn: 1rem; /* 16px — Prompt Medium */
  --fs-pricing-v2-shine-service: 1rem; /* 16px */
  --lh-pricing-v2-shine-service: 1.25rem; /* 20px */
  --ls-pricing-v2-shine: -0.02em;
  --pricing-v2-shine-pad-y: 7.5rem; /* 120px */
  --pricing-v2-shine-pad-y-mobile: 3.5rem; /* 56px */
  --pricing-v2-shine-content-max: 92.5rem; /* 1480px */
  --pricing-v2-shine-card-w-mobile: 18rem; /* 288px */
  --pricing-v2-shine-card-h: 25.1875rem; /* 403px */
  --pricing-v2-shine-card-pad-y: 3.75rem; /* 60px */
  --pricing-v2-shine-card-pad-x: 2.5rem; /* 40px */
  --pricing-v2-shine-card-pad-mobile: 1.25rem; /* 20px */
  --pricing-v2-shine-copy-gap: 1.5625rem; /* 25px */
  --pricing-v2-shine-cta-gap: 3.75rem; /* 60px copy → button */
  --pricing-v2-shine-service-gap: 1.75rem; /* 28px */
  --pricing-v2-shine-service-icon-gap: 1.1875rem; /* 19px */
  --pricing-v2-shine-btn-pad-y: 1.25rem; /* 20px */
  --pricing-v2-shine-btn-pad-x: 2.5rem; /* 40px */
  --shadow-pricing-v2-shine-card: 0 4px 10px 0 rgba(0, 0, 0, 0.05);
  --shadow-pricing-v2-shine-card-mobile: 0 4px 25px 0 rgba(0, 0, 0, 0.08);

  /* pricing-service-page — aliases of pricing-v2-shine-template (Figma 304:524 / 246:3495) */
  --fs-pricing-service-title: var(--fs-pricing-v2-shine-title);
  --lh-pricing-service-title: var(--lh-pricing-v2-shine-title);
  --fs-pricing-service-body: var(--fs-pricing-v2-shine-body);
  --lh-pricing-service-body: var(--lh-pricing-v2-shine-body);
  --fs-pricing-service-btn: var(--fs-pricing-v2-shine-btn);
  --fs-pricing-service-service: var(--fs-pricing-v2-shine-service);
  --lh-pricing-service-service: var(--lh-pricing-v2-shine-service);
  --ls-pricing-service: var(--ls-pricing-v2-shine);
  --pricing-service-pad-y: var(--pricing-v2-shine-pad-y);
  --pricing-service-pad-y-mobile: var(--pricing-v2-shine-pad-y-mobile);
  --pricing-service-content-max: var(--pricing-v2-shine-content-max);
  --pricing-service-card-w-mobile: var(--pricing-v2-shine-card-w-mobile);
  --pricing-service-card-h: var(--pricing-v2-shine-card-h);
  --pricing-service-card-pad-y: var(--pricing-v2-shine-card-pad-y);
  --pricing-service-card-pad-x: var(--pricing-v2-shine-card-pad-x);
  --pricing-service-card-pad-mobile: var(--pricing-v2-shine-card-pad-mobile);
  --pricing-service-copy-gap: var(--pricing-v2-shine-copy-gap);
  --pricing-service-cta-gap: var(--pricing-v2-shine-cta-gap);
  --pricing-service-service-gap: var(--pricing-v2-shine-service-gap);
  --pricing-service-service-icon-gap: var(--pricing-v2-shine-service-icon-gap);
  --pricing-service-btn-pad-y: var(--pricing-v2-shine-btn-pad-y);
  --pricing-service-btn-pad-x: var(--pricing-v2-shine-btn-pad-x);
  --shadow-pricing-service-card: var(--shadow-pricing-v2-shine-card);
  --shadow-pricing-service-card-mobile: var(--shadow-pricing-v2-shine-card-mobile);

  /* process-v2-shine-template — Why Choose Shine — Figma 656:188 (desktop) / 246:3431 (mobile) */
  --fs-process-v2-shine-title: 3.375rem; /* 54px — Prompt Black */
  --fs-process-v2-shine-title-mobile: 1.5rem; /* 24px */
  --lh-process-v2-shine-title: 3.375rem; /* 54px */
  --lh-process-v2-shine-title-mobile: 1.8125rem; /* 29px */
  --fs-process-v2-shine-intro: 1.125rem; /* 18px — Inter */
  --lh-process-v2-shine-intro: 1.875rem; /* 30px */
  --ls-process-v2-shine: -0.02em;
  --fs-process-v2-shine-card-title: 1.25rem; /* 20px — Prompt Black */
  --fs-process-v2-shine-card-title-mobile: 1rem; /* 16px — Prompt SemiBold */
  --fs-process-v2-shine-card-body: 1rem; /* 16px */
  --lh-process-v2-shine-card-body: 1.25rem; /* 20px */
  --fs-process-v2-shine-card-body-mobile: 0.625rem; /* 10px */
  --lh-process-v2-shine-card-body-mobile: 0.9375rem; /* 15px */
  --process-v2-shine-pad-y: 8.75rem; /* 140px */
  --process-v2-shine-pad-y-mobile: 3.5rem; /* 56px */
  --process-v2-shine-header-max: 93.6875rem; /* 1499px */
  --process-v2-shine-title-max-mobile: 20rem; /* 320px */
  --process-v2-shine-intro-max: 60.8125rem; /* 973px */
  --process-v2-shine-card-w: 32.75rem; /* 524px */
  --process-v2-shine-card-w-mobile: 9.25rem; /* 148px */
  --process-v2-shine-card-h: 16.5rem; /* 264px */
  --process-v2-shine-card-h-mobile: 10.75rem; /* 172px */
  --process-v2-shine-card-pad: 3.375rem; /* 54px */
  --process-v2-shine-card-pad-mobile: 0.875rem; /* 14px */
  --process-v2-shine-card-gap: 1.5625rem; /* 25px icon → copy */
  --process-v2-shine-copy-max: 20.375rem; /* 326px */
  --process-v2-shine-icon: 4.0625rem; /* 65px */
  --process-v2-shine-icon-mobile: 1.5rem; /* 24px */
  --process-v2-shine-cta-pad-y: 1.25rem; /* 20px */
  --process-v2-shine-cta-pad-x: 2.5rem; /* 40px */
  --shadow-process-v2-shine-card: 0 4px 10px 0 rgba(0, 0, 0, 0.05);
  --shadow-process-v2-shine-card-mobile: 0 4px 50px 0 rgba(0, 0, 0, 0.08);

  /* brand-intro — Figma 170:1895 (desktop) / 172:3878 (mobile) */
  --color-border-subtle: #ebebeb;
  --fs-brand-intro-title: 3.375rem; /* 54px */
  --fs-brand-intro-title-mobile: 1.5rem; /* 24px */
  --fs-brand-intro-body: 1.125rem; /* 18px */
  --fs-brand-intro-body-mobile: 1rem; /* 16px */
  --lh-brand-intro-title-mobile: 1.625rem; /* 26px */
  --lh-brand-intro-body: 1.875rem; /* 30px */
  --ls-brand-intro: -0.02em;
  --brand-intro-pad-y: 7.5rem; /* 120px */
  --brand-intro-pad-y-mobile: 3.5rem; /* 56px */
  --brand-intro-content-max: 92.5rem; /* 1480px */
  --brand-intro-media-w: 46.75rem; /* 748px */
  --brand-intro-media-h: 34.1875rem; /* 547px */
  --brand-intro-media-h-mobile: 11.0625rem; /* 177px */
  --brand-intro-row-gap: 3.75rem; /* 60px — desktop column gap + copy/CTA gap */
  --brand-intro-stack-gap: 2rem; /* 32px */
  --brand-intro-intro-gap: 2rem; /* 32px desktop text-block */
  --brand-intro-intro-gap-mobile: 1.5rem; /* 24px */

  /* service-hub-1 — Figma 223:282 (desktop) / 223:545 (mobile) */
  --fs-service-hub-1-breadcrumb: 1.125rem; /* 18px */
  --fs-service-hub-1-breadcrumb-mobile: 0.75rem; /* 12px */
  --lh-service-hub-1-breadcrumb: 1.875rem; /* 30px */
  --fs-service-hub-1-title: 3.375rem; /* 54px */
  --fs-service-hub-1-title-mobile: 1.5rem; /* 24px */
  --lh-service-hub-1-title: 3.375rem; /* 54px */
  --lh-service-hub-1-title-mobile: 1.8125rem; /* 29px */
  --fs-service-hub-1-body: 1.125rem; /* 18px */
  --fs-service-hub-1-body-mobile: 1rem; /* 16px */
  --lh-service-hub-1-body: 1.875rem; /* 30px */
  --ls-service-hub-1: -0.02em;
  --service-hub-1-pad-y: 7.5rem; /* 120px */
  --service-hub-1-pad-y-mobile: 3.5rem; /* 56px */
  --service-hub-1-content-max: 92.5rem; /* 1480px */
  --service-hub-1-copy-w: 42rem; /* 672px */
  --service-hub-1-title-w: 41rem; /* 656px */
  --service-hub-1-media-w: 46.75rem; /* 748px */
  --service-hub-1-media-h: 34.1875rem; /* 547px */
  --service-hub-1-media-w-mobile: 17.875rem; /* 286px */
  --service-hub-1-row-gap: 3.75rem; /* 60px — column gap / mobile text→image */
  --service-hub-1-stack-gap: 2rem; /* 32px — mobile breadcrumb→content */
  --service-hub-1-text-gap: 2rem; /* 32px desktop title→body */
  --service-hub-1-text-gap-mobile: 1.5rem; /* 24px */
  /* Local services hub intro — Figma 364:98 (media 748×695, italic tagline) */
  --service-hub-1-media-h-hub: 43.4375rem; /* 695px */
  --fs-service-hub-1-tagline: 1rem; /* 16px */
  --lh-service-hub-1-tagline: 1.875rem; /* 30px */

  /* hub-services — Figma 670:2004 (tabs) + 364:192 (grid) */
  --hub-services-tab-bar-pad-y: 1rem; /* 16px */
  --hub-services-tab-gap: 1.4375rem; /* 23px */
  --hub-services-tab-w: 14.875rem; /* 238px */
  --hub-services-tab-pad-y: 1.5rem; /* 24px */
  --hub-services-tab-border: 3px;
  --hub-services-header-max: 93.6875rem; /* 1499px */
  --hub-services-title-max: 93.6875rem;
  --hub-services-grid-max: 92.3125rem; /* 1477px */
  --hub-services-card-img-h: 16.25rem; /* 260px */
  --hub-services-card-body-h: 16.25rem; /* 260px */
  --hub-services-card-text-max: 23rem; /* 368px */
  --shadow-hub-services-card: 0 4px 20px 0 rgba(0, 0, 0, 0.05);

  /* process-v2 — Figma 389:80 (desktop) / 175:4560 (mobile) */
  --fw-extrabold: 800;
  --fs-process-v2-title: 3.375rem; /* 54px */
  --fs-process-v2-title-mobile: 1.5rem; /* 24px */
  --lh-process-v2-title: 3.375rem; /* 54px */
  --lh-process-v2-title-mobile: 1.8125rem; /* 29px */
  --fs-process-v2-body: 1.125rem; /* 18px */
  --fs-process-v2-body-mobile: 1rem; /* 16px */
  --lh-process-v2-body: 1.875rem; /* 30px */
  --fs-process-v2-highlight: 2.5rem; /* 40px */
  --fs-process-v2-highlight-mobile: 1.25rem; /* 20px */
  --lh-process-v2-highlight: 2.625rem; /* 42px */
  --ls-process-v2: -0.02em;
  --process-v2-pad-y: 7.5rem; /* 120px */
  --process-v2-pad-y-mobile: 3.5rem; /* 56px */
  --process-v2-content-max: 92.5rem; /* 1480px */
  --process-v2-media-w: 46.75rem; /* 748px */
  --process-v2-copy-max: 42.25rem; /* 676px */
  --process-v2-row-gap: 3.75rem; /* 60px — image / copy column gap */
  --process-v2-stack-gap: 2rem; /* 32px */
  --process-v2-copy-gap: 2.25rem; /* 36px — text-block to CTA on desktop */
  --process-v2-intro-gap-mobile: 1.5rem; /* 24px — title/body/highlight */

  /* services-v1 — Figma 170:2844 (desktop) / 182:45 (mobile) */
  --color-border-card: #e9e9e9;
  --color-border-tab: #a1a1a1;
  --color-tab-inactive: #f0f0f0;
  --color-text-muted: #a1a1a1;
  --color-text-heading: #212529;
  --fs-services-title: 3.375rem; /* 54px */
  --fs-services-title-mobile: 1.5rem; /* 24px */
  --lh-services-title: 3.375rem; /* 54px */
  --lh-services-title-mobile: 1.8125rem; /* 29px */
  --fs-services-intro: 1.125rem; /* 18px */
  --fs-services-intro-mobile: 1rem; /* 16px */
  --fs-services-card-title: 1.5rem; /* 24px */
  --fs-services-card-title-mobile: 1rem; /* 16px */
  --lh-services-card-title: 2.25rem; /* 36px */
  --lh-services-card-title-mobile: 1.875rem; /* 30px */
  --fs-services-card-body: 1rem; /* 16px */
  --fs-services-card-body-mobile: 0.8125rem; /* 13px */
  --lh-services-card-body: 1.25rem; /* 20px */
  --fs-services-tab: 1rem; /* 16px */
  --fs-services-tab-mobile: 0.875rem; /* 14px */
  --fs-services-disclaimer: 1rem; /* 16px */
  --fs-services-disclaimer-mobile: 0.75rem; /* 12px */
  --services-content-max: 92.3125rem; /* 1477px — card grid width */
  --services-gap: 2.125rem; /* 34px — card gap */
  --services-pad-y: 7.5rem; /* 120px */
  --services-pad-y-mobile: 3.5rem; /* 56px */
  --services-card-img-h-lg: 22.25rem; /* 356px */
  --services-card-img-h-md: 16.25rem; /* 260px */
  --services-card-img-h-mobile: 10.125rem; /* 162px */
  --services-card-body-h: 16.25rem; /* 260px */
  --services-card-body-h-mobile: 10.125rem; /* 162px */
  --radius-tab: 0.5rem; /* 8px */
  --radius-service-card: 0;
  --radius-faq: 0.5rem; /* 8px */
  --radius-card: var(--radius-faq);
  --fw-semibold: 600;

  /* testimonials — Figma 656:47 (desktop) / 172:3926 (mobile) */
  --fs-testimonials-title: 3.375rem; /* 54px */
  --fs-testimonials-title-mobile: 1.5rem; /* 24px */
  --lh-testimonials-title: 3.375rem; /* 54px */
  --lh-testimonials-title-mobile: 1.8125rem; /* 29px */
  --ls-testimonials-title-mobile: -0.02em;
  --fs-testimonials-lead: 1.125rem; /* 18px */
  --lh-testimonials-lead: 1.875rem; /* 30px */
  --ls-testimonials: -0.02em;
  --fs-testimonials-name: 1.5rem; /* 24px */
  --fs-testimonials-name-mobile: 1.25rem; /* 20px */
  --fs-testimonials-date: 0.8125rem; /* 13px */
  --fs-testimonials-quote: 1rem; /* 16px */
  --fs-testimonials-quote-mobile: 0.9375rem; /* 15px */
  --lh-testimonials-quote: 1.25rem; /* 20px */
  --fs-testimonials-summary: 1.125rem; /* 18px */
  --fs-testimonials-summary-mobile: 0.75rem; /* 12px */
  --testimonials-pad-y: 7.5rem; /* 120px */
  --testimonials-pad-y-mobile: 3.5rem; /* 56px */
  --testimonials-content-max: 92.4375rem; /* 1479px — card row width */
  --testimonials-card-gap: 2rem; /* 32px */
  --testimonials-card-stack-mobile: 2.5rem; /* 40px */
  --testimonials-avatar: 5.9375rem; /* 95px */
  --testimonials-avatar-mobile: 4.0625rem; /* 65px */

  /* testimonials-shine-template — red plate — Figma 656:649 (desktop) / 794:2017 (mobile) */
  /* Layout sizes reuse --testimonials-* above. Active pager dot is white on red. */
  --color-testimonials-shine-dot-active: var(--color-text-inverse);

  /* testimonials-v2 — same red plate as testimonials-shine-template (Figma 656:649 / 794:2017) */
  --color-testimonials-v2-dot-active: var(--color-testimonials-shine-dot-active);

  /* process — Figma 172:3574 (desktop) / 175:4529 (mobile) */
  --color-process-surface: #c52233; /* section fallback + step badge */
  --fs-process-title: 3.375rem; /* 54px */
  --fs-process-title-mobile: 1.5rem; /* 24px */
  --lh-process-title: 3.375rem; /* 54px */
  --lh-process-title-mobile: 1.8125rem; /* 29px */
  --fs-process-intro: 1.125rem; /* 18px */
  --fs-process-card-title: 1.5rem; /* 24px */
  --lh-process-card-title: 1.8125rem; /* 29px */
  --fs-process-card-body: 1rem; /* 16px */
  --lh-process-card-body: 1.25rem; /* 20px */
  --fs-process-badge: 4rem; /* 64px */
  --lh-process-badge: 2.25rem; /* 36px — Figma optical center in circle */
  --fs-process-badge-mobile: 1.5rem; /* 24px */
  --ls-process-title: -0.02em;
  --ls-process-body: -0.02em;
  --process-pad-y: 3.5rem; /* 56px */
  --process-header-max: 93.6875rem; /* 1499px — Figma heading band */
  --process-header-max-mobile: 20rem; /* 320px */
  --process-steps-gap: 2.125rem; /* 34px */
  --process-card-w: 22rem; /* 352px */
  --process-card-w-mobile: 18.0625rem; /* 289px */
  --process-card-text-max: 18.6875rem; /* 299px */
  --process-card-pad-mobile: 1.25rem; /* 20px */
  --process-card-gap-mobile: 1.5625rem; /* 25px */
  --process-badge-size: 5.6875rem; /* 91px */
  --process-badge-size-mobile: 3.1875rem; /* 51px */
  --process-cta-min-w-mobile: 16.625rem; /* 266px */
  --process-cta-pad-y: 1.25rem; /* 20px */
  --process-cta-pad-x: 2.5rem; /* 40px */
  --shadow-process-card: 0 4px 10px 0 rgba(58, 58, 58, 0.05);
  --shadow-process-card-mobile: 0 4px 25px 0 rgba(0, 0, 0, 0.08);
  /* process--service-page-detail — lighting steps, Figma 391:485 (no mobile frame) */
  --process-pad-y-detail: 7.5rem; /* 120px desktop */
  --process-card-h-detail: 25.1875rem; /* 403px desktop cards */

  /* process--local — Figma 346:1700 (desktop; mobile reuses 175:4529 stack) */
  --process-local-card-w: 29.4375rem; /* 471px */
  --process-local-card-h: 32.5rem; /* 520px */
  --process-local-badge: 8.625rem; /* 138px */
  --fs-process-local-badge: 6rem; /* 96px — Inter Black */
  --process-local-card-text-max: 24.6875rem; /* 395px */

  /* local-guarantee — Figma 346:1738 (desktop) / 344:696 (mobile) */
  --local-guarantee-pad-y: 7.5rem; /* 120px */
  --local-guarantee-pad-y-mobile: 3.5rem; /* 56px */
  --local-guarantee-copy-max: 60.8125rem; /* 973px */
  --local-guarantee-card-w: 13.6875rem; /* 219px */
  --local-guarantee-card-h: 15.5625rem; /* 249px */
  --local-guarantee-card-gap: 2.5rem; /* 40px */
  --local-guarantee-card-inner-gap: 1.5rem; /* 24px icon → title */
  --local-guarantee-icon: 4.625rem; /* 74px */
  --local-guarantee-card-title-fs: 1rem; /* 16px Prompt ExtraBold */
  --local-guarantee-lh-card-title: 1.25rem; /* 20px */
  --local-guarantee-grid-max-mobile: 19rem; /* 304px */
  --local-guarantee-card-w-mobile: 9.25rem; /* 148px */
  --local-guarantee-card-h-mobile: 10.75rem; /* 172px */
  --local-guarantee-card-pad-mobile: 0.875rem; /* 14px */
  --local-guarantee-icon-mobile: 1.5rem; /* 24px */
  --local-guarantee-card-title-fs-mobile: 0.8125rem; /* 13px */
  --local-guarantee-section-gap: 4rem; /* 64px desktop band spacing */
  --local-guarantee-section-gap-mobile: 2rem; /* 32px mobile band spacing */
  --shadow-local-guarantee-card: var(--shadow-card);
  --shadow-local-guarantee-card-mobile: 0 4px 50px 0 rgba(0, 0, 0, 0.08);

  /* local-blog — Figma 346:2008 (desktop) / 360:259 (mobile) */
  --local-blog-pad-y: 7.5rem; /* 120px */
  --local-blog-pad-y-mobile: 3.5rem; /* 56px */
  --local-blog-bg-h: 280.01%; /* sparkle plate crop — desktop */
  --local-blog-layout-gap: 2rem; /* 32px image → copy */
  --local-blog-media-w: 54.625rem; /* 874px */
  --local-blog-media-h: 35.9375rem; /* 575px */
  --local-blog-copy-w: 35.9375rem; /* 575px */
  --local-blog-copy-h: 22.1875rem; /* 355px */
  --local-blog-copy-gap: 0.9375rem; /* 15px */
  --fs-local-blog-title: 3.375rem; /* 54px — Prompt Black */
  --fs-local-blog-title-mobile: 1.5rem; /* 24px */
  --lh-local-blog-title: 3.375rem; /* 54px */
  --lh-local-blog-title-mobile: 1.8125rem; /* 29px */
  --ls-local-blog-title-mobile: -0.02em; /* -0.48px at 24px */
  --fs-local-blog-post-title: 2.5rem; /* 40px — Prompt Black */
  --fs-local-blog-post-title-mobile: 1.5rem; /* 24px */
  --lh-local-blog-post-title-mobile: 1.8125rem; /* 29px */
  --ls-local-blog-post-title: -0.02em; /* -0.8px at 40px */
  --ls-local-blog-post-title-mobile: -0.02em;
  --fs-local-blog-excerpt: 1rem; /* 16px — Inter */
  --lh-local-blog-excerpt: 1.25rem; /* 20px */
  --ls-local-blog-excerpt: -0.02em; /* -0.32px at 16px */
  --local-blog-card-w-mobile: 18rem; /* 288px */
  --local-blog-card-pad-mobile: 1.5rem; /* 24px */
  --local-blog-card-gap-mobile: 1.5rem; /* 24px */
  --local-blog-media-w-mobile: 15.3125rem; /* 245px */
  --local-blog-media-h-mobile: 10.25rem; /* 164px */

  /* process-v3 — Figma 170:2196 (desktop) / 172:4168 (mobile) */
  --fs-process-v3-title: 3.375rem; /* 54px */
  --fs-process-v3-title-mobile: 1.5rem; /* 24px */
  --lh-process-v3-title: 3.375rem; /* 54px */
  --lh-process-v3-title-mobile: 1.8125rem; /* 29px */
  --fs-process-v3-body: 1.125rem; /* 18px */
  --fs-process-v3-body-mobile: 1rem; /* 16px */
  --lh-process-v3-body: 1.875rem; /* 30px */
  --ls-process-v3-title-mobile: -0.02em;
  --ls-process-v3-body: -0.02em;
  --process-v3-pad-y: 7.5rem; /* 120px */
  --process-v3-pad-y-mobile: 3.5rem; /* 56px */
  --process-v3-header-max: 93.6875rem; /* 1499px — Figma heading band */
  --process-v3-video-w: 71.0625rem; /* 1137px */
  --process-v3-video-w-mobile: 17.875rem; /* 286px */
  --process-v3-video-ratio: 1137 / 711; /* desktop frame; mobile 286/177 is nearly identical */
  --process-v3-play: 10.4375rem; /* 167px */
  --process-v3-play-mobile: 4.4375rem; /* 71px */

  /* cta-v1 — Figma 170:2180 (desktop) / 172:4264 (mobile) */
  --color-cta-v1-surface: #c52233; /* red plate fallback */
  --fs-cta-v1-title: 3.375rem; /* 54px */
  --fs-cta-v1-title-mobile: 1.5rem; /* 24px */
  --lh-cta-v1-title: 3.375rem; /* 54px */
  --lh-cta-v1-title-mobile: 1.8125rem; /* 29px */
  --ls-cta-v1-title-mobile: -0.02em; /* -0.48px at 24px */
  --fs-cta-v1-body: 1.125rem; /* 18px */
  --fs-cta-v1-body-mobile: 1.0625rem; /* 17px */
  --lh-cta-v1-body: 1.875rem; /* 30px */
  --ls-cta-v1-body: -0.02em;
  --cta-v1-pad-y: 7.5rem; /* 120px */
  --cta-v1-pad-y-mobile: 3.5rem; /* 56px */
  --cta-v1-stack-gap-mobile: 2.5rem; /* 40px — header → actions */
  --cta-v1-header-max: 93.6875rem; /* 1499px — Figma heading band */
  --cta-v1-actions-w: 35.9375rem; /* 575px — desktop button row */
  --cta-v1-actions-w-mobile: 16.125rem; /* 258px */
  --cta-v1-btn-pad-y: 1.25rem; /* 20px */
  --cta-v1-btn-pad-x: 2.5rem; /* 40px */
  /* cta-v1--about — Figma 321:297 (single blog about band) */
  --cta-v1-about-pad-y: 8.75rem; /* 140px */
  --cta-v1-about-stack-gap: 3.75rem; /* 60px — heading → buttons */
  --cta-v1-about-body-max: 64.9375rem; /* 1039px */
  --cta-v1-about-actions-w: 59.4375rem; /* 951px — three 300px pills */
  --cta-v1-about-btn-w: 18.75rem; /* 300px */

  /* cta-v2 — Figma 223:1212 (desktop) / 229:1646 (mobile) */
  --fs-cta-v2-title: 3.375rem; /* 54px — Prompt Black */
  --fs-cta-v2-title-mobile: 1.5rem; /* 24px — Inter Black */
  --lh-cta-v2-title: 3.375rem; /* 54px */
  --lh-cta-v2-title-mobile: normal;
  --ls-cta-v2-title-mobile: -0.02em; /* -0.48px at 24px */
  --cta-v2-pad-y: 7.5rem; /* 120px */
  --cta-v2-pad-y-mobile: 3.5rem; /* 56px */
  --cta-v2-title-max: 93.6875rem; /* 1499px — Figma heading band */
  --cta-v2-title-max-mobile: 20rem; /* 320px — Figma mobile content width */
  --cta-v2-body-max: 60.8125rem; /* 973px — Shine+ supporting copy (Figma 229:1850) */
  --fs-cta-v2-body: 1.125rem; /* 18px */
  --fs-cta-v2-body-mobile: 1rem; /* 16px */
  --lh-cta-v2-body: 1.875rem; /* 30px */
  --cta-v2-btn-pad-y: 1.25rem; /* 20px */
  --cta-v2-btn-pad-x: 2.5rem; /* 40px */
  --cta-v2-local-actions-gap: 1rem; /* 16px — dual button row */
  --cta-v2-local-phone-icon: 1.4375rem; /* 23px */
  --cta-v2-local-bg-h: 762.53%; /* tall star plate — Figma 346:1915 */

  /* cta-v3 — Figma 371:1211 (desktop) / 371:1517 (mobile) */
  --fs-cta-v3-title: 1.5rem; /* 24px — Prompt Black, both breakpoints */
  --lh-cta-v3-title: 1.8125rem; /* 29px */
  --fs-cta-v3-body: 1.125rem; /* 18px — Inter Medium */
  --lh-cta-v3-body: 1.4375rem; /* 23px */
  --cta-v3-pad-y: 7.5rem; /* 120px */
  --cta-v3-pad-y-mobile: 3.5rem; /* 56px */
  --cta-v3-card-h: 25.1875rem; /* 403px — desktop card floor */
  --cta-v3-card-w-mobile: 18rem; /* 288px */
  --cta-v3-card-gap: 2rem; /* 32px — gutter between cards */
  --cta-v3-card-pad-x: 2.5rem; /* 40px — desktop card */
  --cta-v3-card-pad-y: 3.75rem; /* 60px — desktop card */
  --cta-v3-card-pad-mobile: 1.25rem; /* 20px */
  --cta-v3-card-inner-gap: 3.75rem; /* 60px — desktop title → buttons */
  --cta-v3-text-gap: 1.5625rem; /* 25px — title → body / mobile stacks */
  --cta-v3-btn-stack-gap: 1rem; /* 16px */
  --cta-v3-btn-pad: 1.25rem; /* 20px */
  --cta-v3-btn-icon: 0.625rem; /* 10px arrow */
  --cta-v3-phone-icon: 1.4375rem; /* 23px */
  --cta-v3-bg-h: 732.38%; /* tall star plate — Figma 371:1211 */
  --cta-v3-bg-top: 0.04%;
  --shadow-cta-v3-card: 0 4px 10px 0 rgba(0, 0, 0, 0.05);
  --shadow-cta-v3-card-mobile: 0 4px 25px 0 rgba(0, 0, 0, 0.08);

  /* service-hub-v3 + proces-shine-template — Shine+ benefits — Figma 223:1231 (desktop) / 229:1620 (mobile) */
  --color-service-hub-v3-icon: #c52233; /* red badge fill behind icons */
  --fs-service-hub-v3-title: 3.375rem; /* 54px — Prompt Black */
  --fs-service-hub-v3-title-mobile: 1.5rem; /* 24px */
  --lh-service-hub-v3-title: 3.375rem; /* 54px */
  --lh-service-hub-v3-title-mobile: 1.8125rem; /* 29px */
  --fs-service-hub-v3-intro: 1.125rem; /* 18px — Inter */
  --fs-service-hub-v3-intro-mobile: 0.875rem; /* 14px */
  --lh-service-hub-v3-intro: 1.875rem; /* 30px */
  --ls-service-hub-v3: -0.02em;
  --fs-service-hub-v3-card-title: 1.5rem; /* 24px */
  --lh-service-hub-v3-card-title: 1.8125rem; /* 29px */
  --fs-service-hub-v3-card-body: 1rem; /* 16px */
  --lh-service-hub-v3-card-body: 1.25rem; /* 20px */
  --service-hub-v3-pad-y: 7.5rem; /* 120px */
  --service-hub-v3-pad-y-mobile: 3.5rem; /* 56px */
  --service-hub-v3-header-max: 93.6875rem; /* 1499px — Figma heading band */
  --service-hub-v3-header-max-mobile: 20rem; /* 320px */
  --service-hub-v3-intro-max: 60.8125rem; /* 973px */
  --service-hub-v3-cards-gap: 2.125rem; /* 34px */
  --service-hub-v3-card-w: 21.5625rem; /* 345px */
  --service-hub-v3-card-w-mobile: 18.0625rem; /* 289px */
  --service-hub-v3-card-h: 32.5rem; /* 520px desktop */
  --service-hub-v3-card-h-mobile: 21.5rem; /* 344px */
  --service-hub-v3-card-pad: 1.5rem; /* 24px desktop */
  /* Shared desktop icon start. Cards used to justify-center, so a 2-line
     title pulled that icon up vs 1-line neighbors (visible ~1536px). */
  --service-hub-v3-card-pad-top: 6.75rem; /* 108px */
  --service-hub-v3-card-title-min: 3.625rem; /* 58px — two title lines */
  --service-hub-v3-card-pad-mobile: 1.25rem; /* 20px */
  --service-hub-v3-card-gap: 2rem; /* 32px desktop inner stack */
  --service-hub-v3-card-gap-mobile: 1.5625rem; /* 25px */
  --service-hub-v3-card-text-max: 18.75rem; /* 300px */
  --service-hub-v3-icon: 6.5625rem; /* 105px desktop */
  --service-hub-v3-icon-mobile: 3.1875rem; /* 51px */
  --service-hub-v3-cta-pad-y: 1.25rem; /* 20px */
  --service-hub-v3-cta-pad-x: 2.5rem; /* 40px */
  --shadow-service-hub-v3-card: 0 4px 10px 0 rgba(58, 58, 58, 0.05);
  --shadow-service-hub-v3-card-mobile: 0 4px 25px 0 rgba(0, 0, 0, 0.08);

  /* proces-shine-template — aliases of the service-hub-v3 tokens above (same Figma) */
  --color-proces-shine-icon: var(--color-service-hub-v3-icon);
  --fs-proces-shine-title: var(--fs-service-hub-v3-title);
  --fs-proces-shine-title-mobile: var(--fs-service-hub-v3-title-mobile);
  --lh-proces-shine-title: var(--lh-service-hub-v3-title);
  --lh-proces-shine-title-mobile: var(--lh-service-hub-v3-title-mobile);
  --fs-proces-shine-intro: var(--fs-service-hub-v3-intro);
  --fs-proces-shine-intro-mobile: var(--fs-service-hub-v3-intro-mobile);
  --lh-proces-shine-intro: var(--lh-service-hub-v3-intro);
  --ls-proces-shine: var(--ls-service-hub-v3);
  --fs-proces-shine-card-title: var(--fs-service-hub-v3-card-title);
  --lh-proces-shine-card-title: var(--lh-service-hub-v3-card-title);
  --fs-proces-shine-card-body: var(--fs-service-hub-v3-card-body);
  --lh-proces-shine-card-body: var(--lh-service-hub-v3-card-body);
  --proces-shine-pad-y: var(--service-hub-v3-pad-y);
  --proces-shine-pad-y-mobile: var(--service-hub-v3-pad-y-mobile);
  --proces-shine-header-max: var(--service-hub-v3-header-max);
  --proces-shine-header-max-mobile: var(--service-hub-v3-header-max-mobile);
  --proces-shine-intro-max: var(--service-hub-v3-intro-max);
  --proces-shine-cards-gap: var(--service-hub-v3-cards-gap);
  --proces-shine-card-w: var(--service-hub-v3-card-w);
  --proces-shine-card-w-mobile: var(--service-hub-v3-card-w-mobile);
  --proces-shine-card-h: var(--service-hub-v3-card-h);
  --proces-shine-card-h-mobile: var(--service-hub-v3-card-h-mobile);
  --proces-shine-card-pad: var(--service-hub-v3-card-pad);
  --proces-shine-card-pad-mobile: var(--service-hub-v3-card-pad-mobile);
  --proces-shine-card-gap: var(--service-hub-v3-card-gap);
  --proces-shine-card-gap-mobile: var(--service-hub-v3-card-gap-mobile);
  --proces-shine-card-text-max: var(--service-hub-v3-card-text-max);
  --proces-shine-icon: var(--service-hub-v3-icon);
  --proces-shine-icon-mobile: var(--service-hub-v3-icon-mobile);
  --proces-shine-cta-pad-y: var(--service-hub-v3-cta-pad-y);
  --proces-shine-cta-pad-x: var(--service-hub-v3-cta-pad-x);
  --shadow-proces-shine-card: var(--shadow-service-hub-v3-card);
  --shadow-proces-shine-card-mobile: var(--shadow-service-hub-v3-card-mobile);

  /* benefits-services-shine-template — 3 benefit cards — Figma 246:3054 (desktop) / 246:3450 (mobile) */
  /* Shares the v3 card/icon scale. Title leading is 64px (not 54px). No CTA or carousel. */
  --color-benefits-services-icon: var(--color-service-hub-v3-icon); /* #c52233 badge fill */
  --fs-benefits-services-title: var(--fs-service-hub-v3-title); /* 54px */
  --fs-benefits-services-title-mobile: var(--fs-service-hub-v3-title-mobile); /* 24px */
  --lh-benefits-services-title: 4rem; /* 64px — Figma desktop heading */
  --lh-benefits-services-title-mobile: var(--lh-service-hub-v3-title-mobile); /* 29px */
  --ls-benefits-services: var(--ls-service-hub-v3); /* -0.02em */
  --fs-benefits-services-card-title: var(--fs-service-hub-v3-card-title); /* 24px */
  --lh-benefits-services-card-title: var(--lh-service-hub-v3-card-title); /* 29px */
  --fs-benefits-services-card-body: var(--fs-service-hub-v3-card-body); /* 16px */
  --lh-benefits-services-card-body: var(--lh-service-hub-v3-card-body); /* 20px */
  --benefits-services-pad-y: var(--service-hub-v3-pad-y); /* 120px */
  --benefits-services-pad-y-mobile: var(--service-hub-v3-pad-y-mobile); /* 56px */
  --benefits-services-header-max: var(--service-hub-v3-header-max); /* 1499px */
  --benefits-services-header-max-mobile: var(--service-hub-v3-header-max-mobile); /* 320px */
  --benefits-services-cards-gap: var(--service-hub-v3-cards-gap); /* 34px desktop */
  --benefits-services-card-w: var(--service-hub-v3-card-w); /* 345px */
  --benefits-services-card-w-mobile: var(--service-hub-v3-card-w-mobile); /* 289px */
  --benefits-services-card-h: var(--service-hub-v3-card-h); /* 520px */
  --benefits-services-card-h-mobile: 21.75rem; /* 348px — Figma mobile card */
  --benefits-services-card-pad: var(--service-hub-v3-card-pad); /* 24px */
  --benefits-services-card-pad-mobile: var(--service-hub-v3-card-pad-mobile); /* 20px */
  --benefits-services-card-gap: var(--service-hub-v3-card-gap); /* 32px */
  --benefits-services-card-gap-mobile: var(--service-hub-v3-card-gap-mobile); /* 25px */
  --benefits-services-card-text-max: var(--service-hub-v3-card-text-max); /* 300px */
  --benefits-services-icon: var(--service-hub-v3-icon); /* 105px */
  --benefits-services-icon-mobile: var(--service-hub-v3-icon-mobile); /* 51px */
  --shadow-benefits-services-card: var(--shadow-service-hub-v3-card);
  --shadow-benefits-services-card-mobile: var(--shadow-service-hub-v3-card-mobile);

  /* service-hub-v4 — getting-started process — Figma 389:42 (desktop) / 223:636 (mobile) */
  --color-service-hub-v4-surface: #c52233; /* section fallback + step badge */
  --fs-service-hub-v4-title: 3.375rem; /* 54px */
  --fs-service-hub-v4-title-mobile: 1.5rem; /* 24px */
  --lh-service-hub-v4-title: 3.375rem; /* 54px */
  --lh-service-hub-v4-title-mobile: 1.8125rem; /* 29px */
  --fs-service-hub-v4-intro: 1.125rem; /* 18px */
  --fs-service-hub-v4-card-title: 1.5rem; /* 24px */
  --lh-service-hub-v4-card-title: 1.8125rem; /* 29px */
  --fs-service-hub-v4-card-body: 1rem; /* 16px */
  --lh-service-hub-v4-card-body: 1.25rem; /* 20px */
  --fs-service-hub-v4-badge: 4rem; /* 64px */
  --lh-service-hub-v4-badge: 2.25rem; /* 36px — Figma optical center in circle */
  --fs-service-hub-v4-badge-mobile: 1.5rem; /* 24px */
  --ls-service-hub-v4-title: -0.02em;
  --ls-service-hub-v4-body: -0.02em;
  --service-hub-v4-pad-y: 7.5rem; /* 120px desktop */
  --service-hub-v4-pad-y-mobile: 3.5rem; /* 56px */
  --service-hub-v4-header-max: 93.6875rem; /* 1499px — Figma heading band */
  --service-hub-v4-header-max-mobile: 20rem; /* 320px */
  --service-hub-v4-steps-gap: 2.125rem; /* 34px */
  --service-hub-v4-card-w: 22rem; /* 352px */
  --service-hub-v4-card-w-mobile: 18.0625rem; /* 289px */
  --service-hub-v4-card-text-max: 18.6875rem; /* 299px */
  --service-hub-v4-card-pad-mobile: 1.25rem; /* 20px */
  --service-hub-v4-card-gap-mobile: 1.5625rem; /* 25px */
  --service-hub-v4-badge-size: 5.6875rem; /* 91px */
  --service-hub-v4-badge-size-mobile: 3.1875rem; /* 51px */
  --service-hub-v4-cta-min-w-mobile: 16.625rem; /* 266px */
  --service-hub-v4-cta-pad-y: 1.25rem; /* 20px */
  --service-hub-v4-cta-pad-x: 2.5rem; /* 40px */
  --shadow-service-hub-v4-card: 0 4px 10px 0 rgba(58, 58, 58, 0.05);
  --shadow-service-hub-v4-card-mobile: 0 4px 25px 0 rgba(0, 0, 0, 0.08);

  /* process-v4 — Figma 170:2165 (desktop) / 172:4174 (mobile) */
  --fs-process-v4-title: 3.375rem; /* 54px */
  --fs-process-v4-title-mobile: 1.5rem; /* 24px */
  --lh-process-v4-title: 3.375rem; /* 54px */
  --lh-process-v4-title-mobile: 1.8125rem; /* 29px */
  --ls-process-v4-title-mobile: -0.02em; /* -0.48px at 24px */
  --fs-process-v4-body: 1.125rem; /* 18px */
  --fs-process-v4-body-mobile: 1.125rem; /* 18px — same as desktop in Figma */
  --lh-process-v4-body: 1.875rem; /* 30px */
  --ls-process-v4-body: -0.02em; /* -0.36px at 18px */
  --process-v4-pad-y: 8.75rem; /* 140px */
  --process-v4-pad-y-mobile: 3.5rem; /* 56px */
  --process-v4-content-max: 92.5rem; /* 1480px */
  --process-v4-media-w: 46.75rem; /* 748px */
  --process-v4-media-w-mobile: 17.875rem; /* 286px */
  --process-v4-media-ratio: 748 / 547;
  --process-v4-media-ratio-mobile: 286 / 177;
  --process-v4-copy-max: 42.25rem; /* 676px */
  --process-v4-row-gap: 3.75rem; /* 60px — title↔row / image↔copy */
  --process-v4-stack-gap-mobile: 2rem; /* 32px — image → heading group */
  --process-v4-copy-gap: 2.25rem; /* 36px — body → CTA on desktop */
  --process-v4-copy-gap-mobile: 3.75rem; /* 60px — text-block → CTA on mobile */
  --process-v4-cta-w-mobile: 17.125rem; /* 274px */
  --process-v4-cta-pad-y: 1.25rem; /* 20px */
  --process-v4-cta-pad-x: 2.5rem; /* 40px */

  /* faq-v1 — Figma 170:2205 (desktop) / 175:4752 (mobile) */
  --fs-faq-title: 3.375rem; /* 54px */
  --fs-faq-title-mobile: 1.5rem; /* 24px */
  --lh-faq-title: 3.375rem; /* 54px */
  --lh-faq-title-mobile: 1.8125rem; /* 29px */
  --ls-faq-title-mobile: -0.02em; /* -0.48px at 24px */
  --fs-faq-question: 0.99375rem; /* 15.9px — Figma Inter Medium */
  --fs-faq-answer: 1rem; /* 16px */
  --lh-faq-body: 1.5rem; /* 24px */
  --ls-faq-body: -0.011em; /* -0.176px at ~16px */
  --fs-faq-icon: 1.5rem; /* 24px desktop +/− */
  --fs-faq-icon-mobile: 0.99375rem; /* 15.9px — matches question on mobile */
  --faq-pad-y: 7.5rem; /* 120px */
  --faq-pad-y-mobile: 3.5rem; /* 56px */
  --faq-content-max: 93.5625rem; /* 1497px — accordion list width */
  --faq-item-gap: 2rem; /* 32px between cards */
  --faq-item-gap-inner: 1rem; /* 16px question → answer (desktop) */
  --faq-item-gap-inner-mobile: 0.625rem; /* 10px (mobile) */
  --faq-answer-pad: 0.625rem; /* 10px */
  --faq-question-gap: 1.25rem; /* 20px question ↔ icon */

  /* site-footer — Figma 733:55 (desktop) / 788:2011 (mobile) */
  --color-footer-bg: #191919; /* Shine Grey — footer surface */
  --color-footer-text: #f7f7ee; /* tagline cream */
  --color-footer-link-hover: #ff9692; /* coral hover / active link */
  --color-footer-divider: #2e4e73;
  --fs-footer-heading: 1.125rem; /* 18px */
  --fs-footer-link: 1rem; /* 16px */
  --fs-footer-tagline: 0.9375rem; /* 15px */
  --lh-footer-link: 1.25rem; /* 20px */
  --lh-footer-tagline: 1.875rem; /* 30px */
  --ls-footer: -0.02em;
  --footer-pad-y-top: 8.75rem; /* 140px desktop */
  --footer-pad-y-bottom: 2rem; /* 32px */
  --footer-pad-y-mobile: 3.5rem; /* 56px */
  --footer-content-max: 92.5rem; /* 1480px */
  --footer-col-gap: 6.25rem; /* 100px — desktop column gap */
  --footer-stack-gap: 6.25rem; /* 100px — info ↔ bottom row */
  --footer-stack-gap-mobile: 5rem; /* 80px — logo ↔ nav groups */
  --footer-nav-gap: 1rem; /* 16px — heading ↔ links / link stack */
  --footer-nav-gap-tight: 0.9375rem; /* 15px — Services stack */
  /*
    Legal/meta row gap: Figma uses 60px at the 1480px content band.
    Clamp so legal links + copyright + social stay on one line from ~1024px up.
  */
  --footer-legal-gap: clamp(0.75rem, 2.2vw, 3.75rem);
  --footer-social-gap: 2rem; /* 32px */
  --footer-logo-w: 100%; /* fills brand column */
  --footer-logo-w-mobile: 9.9375rem; /* 159px */
  --footer-logo-h-mobile: 5.5625rem; /* 89px */
  --footer-tagline-max: 15rem; /* 240px desktop */
  --footer-badge-ifa-w: 10.5rem; /* 168px */
  --footer-badge-ifa-h: 7.375rem; /* 118px */
  --footer-badge-vetfran-w: 10rem; /* 160px */
  --footer-badge-vetfran-h: 4.625rem; /* 74px */
  --footer-badge-w-mobile: 6.375rem; /* 102px */
  --footer-badge-gap: 1.4375rem; /* 23px desktop */
  --footer-badge-gap-mobile: 0.75rem; /* 12px */

  /* blog — single post article (Figma 321:537) */
  --color-blog-text: #212529;
  --color-blog-muted: #a1a1a1;
  --color-blog-link: #167c30;
  --color-blog-callout-bg: rgba(204, 255, 191, 0.7);
  --color-blog-callout-border: #0f4a00;
  --color-blog-card-border: #ebebeb;
  --fs-blog-title: 3.75rem; /* 60px — Prompt Bold */
  --fs-blog-title-mobile: 1.75rem; /* 28px */
  --fs-blog-h2: 3.75rem; /* 60px */
  --fs-blog-h2-mobile: 1.75rem; /* 28px */
  --fs-blog-h3: 3rem; /* 48px */
  --fs-blog-h3-mobile: 1.5rem; /* 24px */
  --fs-blog-lead: 1.25rem; /* 20px — TL;DR Inter Bold */
  --fs-blog-body: 1.125rem; /* 18px */
  --fs-blog-body-mobile: 1rem; /* 16px */
  --fs-blog-meta: 1.125rem; /* 18px */
  --fs-blog-meta-mobile: 0.875rem; /* 14px */
  --fs-blog-breadcrumb: 1.125rem; /* 18px */
  --fs-blog-breadcrumb-mobile: 0.75rem; /* 12px */
  --fs-blog-box-title: 2.5rem; /* 40px — Inter Bold */
  --fs-blog-box-title-mobile: 1.25rem; /* 20px */
  --fs-blog-quote: 2.5rem; /* 40px */
  --fs-blog-quote-mobile: 1.375rem; /* 22px */
  --lh-blog-body: 1.875rem; /* 30px */
  --lh-blog-quote: 2.9375rem; /* 47px */
  --lh-blog-quote-mobile: 1.75rem; /* 28px */
  --lh-blog-breadcrumb: 1.875rem; /* 30px */
  --ls-blog: -0.02em;
  --blog-content-max: 92.5rem; /* 1480px */
  --blog-pad-y: 8.75rem; /* 140px */
  --blog-pad-y-mobile: 3.5rem; /* 56px */
  --blog-stack-gap: 1.5rem; /* 24px */
  --blog-hero-h: 33rem; /* 528px */
  --blog-hero-h-mobile: 13.5rem; /* 216px */
  --blog-box-pad: 2.25rem; /* 36px */
  --blog-box-pad-mobile: 1.25rem; /* 20px */
  --blog-icon-meta: 1.5625rem; /* 25px */
  --blog-icon-callout: 2.375rem; /* 38px */
  --blog-icon-quote: 5.625rem; /* 90px */
  --blog-icon-quote-mobile: 3rem; /* 48px */
  --blog-author-max: 47.8125rem; /* 765px */
  --blog-author-photo: 4.3125rem; /* 69px */
  --radius-blog-faq: 1.25rem; /* 20px */
  --shadow-blog-card: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
  --shadow-blog-author: 0 4px 10px 0 rgba(0, 0, 0, 0.05);

  /* Radii / shadows / transitions */
  --radius-pill: 6.25rem; /* 100px */
  --shadow-mega: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
  --transition-base: 0.2s ease;

  /* Breakpoints (documented — custom props can't hold media queries)
     --bp-sm: 640px
     --bp-md: 768px
     --bp-lg: 1024px
     --bp-xl: 1280px
     --bp-2xl: 1536px
  */
}

/* Desktop-only horizontal gutters — must repeat when this kit overrides :root (loads after parent). */
@media (min-width: 1280px) {
  :root {
    --header-pad-x: clamp(0.75rem, calc((100vw - var(--header-content-band)) / 4), 6.875rem);
  }
}