@layer reset, tokens, base, layout, components, animations;


@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; scrollbar-gutter: stable; }
  body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { border: none; background: none; cursor: pointer; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  a { color: inherit; text-decoration: inherit; }
  ul, ol { list-style: none; }
}

@layer tokens {
  :root {
    /* Neutral baselines — the build overrides these per site from site.config.js#fonts
       (--font-sans from `body`, --font-heading from `heading`). --font-heading
       falls back to --font-sans so a single-font site needs no heading override. */
    --font-sans: system-ui, sans-serif;
    --font-heading: var(--font-sans);

    /* Leading scale — unitless (line-height inherits as a multiplier; <length> would coerce to px) */
    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-loose: 1.75;

    /* Type scale — fluid via clamp() with logical viewport units */
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vi, 0.875rem);
    --font-size-sm: clamp(0.875rem, 0.8rem + 0.4vi, 1rem);
    --font-size-base: clamp(1rem, 0.9rem + 0.5vi, 1.125rem);
    --font-size-lg: clamp(1.125rem, 1rem + 0.6vi, 1.25rem);
    --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vi, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 1.3rem + 1vi, 2rem);
    --font-size-3xl: clamp(2rem, 1.6rem + 2vi, 3rem);
    --font-size-4xl: clamp(2.5rem, 2rem + 2.5vi, 4rem);

    /* Spacing scale — non-linear rem, Tailwind-shaped muscle memory */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --space-12: 12rem;
    --space-16: 16rem;

    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    --section-padding: 5rem;
    --navbar-height: 4rem;
    --focus-ring-color: var(--color-brand-500);

    --duration-fast: 200ms;

    /* Brand palette derived from --color-brand-600. The anchor is declared
       per-site via site.config.js#brand.color; build/build.js emits it as a
       :root override into each site's bundled CSS. */
    --color-brand-50:  oklch(from var(--color-brand-600) calc(l + 0.425) calc(c * 0.063) h);
    --color-brand-100: oklch(from var(--color-brand-600) calc(l + 0.386) calc(c * 0.147) h);
    --color-brand-200: oklch(from var(--color-brand-600) calc(l + 0.336) calc(c * 0.265) h);
    --color-brand-400: oklch(from var(--color-brand-600) calc(l + 0.168) calc(c * 0.667) h);
    --color-brand-500: oklch(from var(--color-brand-600) calc(l + 0.077) calc(c * 0.873) h);
    --color-brand-700: oklch(from var(--color-brand-600) calc(l - 0.058) calc(c * 1.009) h);
    --color-brand-900: oklch(from var(--color-brand-600) calc(l - 0.287) calc(c * 0.456) h);
    --color-brand-950: oklch(from var(--color-brand-600) calc(l - 0.346) calc(c * 0.288) h);

    --color-surface-50:  oklch(98.42% 0.0034 247.86);
    --color-surface-100: oklch(95.65% 0.0080 251.69);
    --color-surface-200: oklch(92.88% 0.0126 255.51);
    --color-surface-300: oklch(87.20% 0.0100 258.34);
    --color-surface-400: oklch(70.70% 0.0150 256.80);
    --color-surface-500: oklch(55.10% 0.0140 264.36);
    --color-surface-600: oklch(44.60% 0.0140 257.28);
    --color-surface-700: oklch(37.30% 0.0130 256.80);
    --color-surface-800: oklch(29.15% 0.0095 260.66);
    --color-surface-900: oklch(21.00% 0.0060 264.53);
    --color-surface-950: oklch(13.00% 0.0050 264.53);

    --color-safe-500: oklch(72.27% 0.1920 149.58);
    --color-safe-600: oklch(45% 0.1699 149.21);

    --color-white: oklch(100% 0 0);

    --shadow-sm: 0 1px 2px oklch(from black l c h / 0.05);
    --shadow-md: 0 4px 6px -1px oklch(from black l c h / 0.1);
    --shadow-lg: 0 10px 15px -3px oklch(from black l c h / 0.1);
    --shadow-brand-lg: 0 10px 15px -3px oklch(from var(--color-brand-600) l c h / 0.25);
    --shadow-brand-xl: 0 20px 25px -5px oklch(from var(--color-brand-600) l c h / 0.15);
    --shadow-xl: 0 20px 25px -5px oklch(from black l c h / 0.1);
  }
}

@layer base {
  html { color-scheme: light; scroll-behavior: smooth; scroll-padding-block-start: calc(var(--navbar-height) + var(--space-4)); }
  body { font-family: var(--font-sans); font-synthesis: none; color: var(--color-brand-950); background-color: var(--color-white); text-wrap: pretty; }
  h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: var(--leading-tight); letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; }
  h1 { font-size: var(--font-size-4xl); }
  h2 { font-size: var(--font-size-3xl); }
  h3 { font-size: var(--font-size-2xl); }
  h4 { font-size: var(--font-size-xl); }
  h5 { font-size: var(--font-size-lg); }
  h6 { font-size: var(--font-size-base); }
  ::selection { background-color: var(--color-brand-100); color: var(--color-brand-900); }
  /* Library-level keyboard focus ring (links/summary/popovertargets fell back to
     a near-invisible UA ring on dark surfaces). :where() keeps specificity 0 so
     component rules — e.g. button's own ring — still win. Dark surfaces re-set
     --focus-ring-color (see footer) rather than re-declaring the selector. */
  :where(a, summary, button, [popovertarget]):focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto; }
  }
}

@layer tokens {
  :root {
    --color-brand-600: #1b5e3a;
    --font-sans: "Mulish", system-ui, sans-serif;
    --font-heading: "Saira", var(--font-sans);
  }
}

@layer base {
  @font-face {
    font-family: "Mulish";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("/fonts/Mulish.8d1d33d6.woff2") format("woff2");
  }
}

@layer base {
  @font-face {
    font-family: "Saira";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/Saira.7eb811eb.woff2") format("woff2");
  }
}

@layer components {
  .brand-mark { font-weight: 700; }
  .brand-mark-on-light .brand-mark-left  { color: var(--color-brand-600); }
  .brand-mark-on-light .brand-mark-right { color: var(--color-brand-950); }
  .brand-mark-on-dark  .brand-mark-left  { color: var(--color-brand-400); }
  .brand-mark-on-dark  .brand-mark-right { color: var(--color-white); }
}

/*! prefix: btn */
@layer components {
  .btn-primary, .btn-inverted {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding-inline: var(--space-6); padding-block: var(--space-4);
    border-radius: var(--radius-md); font-weight: 600; font-size: var(--font-size-lg);
    &:focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: 2px; }
  }
  .btn-primary {
    background-color: var(--color-brand-600); color: var(--color-white); box-shadow: var(--shadow-brand-lg);
    transition: background-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
    &:hover { background-color: oklch(from var(--color-brand-600) calc(l - 0.05) c h); box-shadow: var(--shadow-brand-xl); }
    &:active { transform: scale(0.98); }
  }
  .btn-inverted {
    background-color: var(--color-white); color: var(--color-brand-900); box-shadow: var(--shadow-lg);
    transition: background-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
    &:hover { background-color: var(--color-brand-50); box-shadow: var(--shadow-xl); }
    &:active { transform: scale(0.98); }
  }
}

@layer components {
  /* Cover modifier only — base img sizing lives in ui/styles/reset.css. */
  .responsive-image-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@layer components {
  .card {
    border-radius: var(--radius-lg); border: 1px solid var(--color-surface-200); background-color: var(--color-white);
    padding: var(--space-6); box-shadow: var(--shadow-sm); transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
    &:hover { border-color: oklch(from var(--color-brand-600) l c h / 0.3); box-shadow: var(--shadow-md); }
  }
  .card-title { font-size: var(--font-size-lg); font-weight: 600; }
  .card-description { font-size: var(--font-size-sm); line-height: var(--leading-normal); color: var(--color-surface-600); }
  .card-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full);
    background-color: var(--color-brand-600); color: var(--color-white);
  }
  .card-badge svg { width: 1.25rem; height: 1.25rem; }

  /* Photo card: the image is flush to the rounded top edges; the text gets the padding. */
  .card-with-media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
  /* overflow:hidden both clips the cover image AND resets the flex item's
     min-height:auto to 0, so the 16/10 box is enforced for tall photos too
     (otherwise a 4:3 or portrait image grows the box and rows misalign). */
  .card-media { aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--color-surface-100); }
  .card-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-6) var(--space-6); }
}

@layer layout {
  .center {
    margin-inline: auto;
    max-inline-size: 72rem;
    padding-inline: var(--space-5);
    inline-size: 100%;
  }
  .center-narrow { max-inline-size: 48rem; }
}

@layer layout {
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: flex-start;
  }
  .cluster-justify-center { justify-content: center; }
}

@layer components {
  .cta-banner {
    padding-block: var(--section-padding);
    background-color: var(--color-brand-600);
    color: var(--color-white);
    text-align: center;
  }
  .cta-banner-title { font-size: var(--font-size-3xl); line-height: var(--leading-tight); text-wrap: balance; }
  .cta-banner-description { font-size: var(--font-size-lg); line-height: var(--leading-loose); color: oklch(from var(--color-white) l c h / 0.85); }
}

@layer components {
  @scope (.faq-section) {
    :scope {
      padding-block: var(--section-padding);
      text-align: center;
      content-visibility: auto;
      contain-intrinsic-size: auto 500px;
    }
    .faq-title { font-size: var(--font-size-2xl); margin-block-end: var(--space-7); }
    .faq-item { border: 1px solid var(--color-surface-200); border-radius: var(--radius-md); overflow: hidden; }
    .faq-question {
      display: flex; justify-content: space-between; align-items: center;
      padding-block: var(--space-4); padding-inline: var(--space-5); font-weight: 600; cursor: pointer; list-style: none;
      &::-webkit-details-marker { display: none; }
      &::after { content: "+"; font-size: var(--font-size-xl); color: var(--color-surface-400); transition: transform var(--duration-fast); }
      details[open] &::after { transform: rotate(45deg); }
    }
    .faq-answer { padding-block: 0 var(--space-4); padding-inline: var(--space-5); font-size: var(--font-size-sm); line-height: var(--leading-loose); color: var(--color-surface-600); }
  }
}

@layer animations {
  .faq-item::details-content { opacity: 0; transition: opacity var(--duration-fast) ease-out, content-visibility var(--duration-fast) allow-discrete; }
  .faq-item[open]::details-content { opacity: 1; }
}

@layer components {
  .feature-split {
    padding-block: var(--section-padding);
  }
  .feature-split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: center;
  }
  @media (width >= 45rem) {
    .feature-split-grid {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-8);
    }
    .feature-split-reverse .feature-split-grid {
      direction: rtl;
    }
    .feature-split-reverse .feature-split-media,
    .feature-split-reverse .feature-split-text {
      direction: ltr;
    }
  }
  .feature-split-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-100);
  }
  .feature-split-eyebrow {
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-brand-600);
  }
  .feature-split-title {
    font-size: var(--font-size-3xl);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }
  .feature-split-description {
    font-size: var(--font-size-lg);
    line-height: var(--leading-loose);
    color: var(--color-surface-700);
    text-wrap: pretty;
  }
}

@property --link-cols { syntax: "<integer>"; inherits: false; initial-value: 0; }

@layer components {
  @scope (.footer) {
    /* Dark surface: re-set the focus-ring token to white for contrast (the base
       rule reads --focus-ring-color; no need to re-declare the selector here). */
    :scope { background-color: var(--color-surface-900); color: var(--color-surface-300); padding-block: var(--space-8); content-visibility: auto; contain-intrinsic-size: auto 500px; --focus-ring-color: var(--color-white); }
    .footer-grid { display: grid; gap: var(--space-6); @media (width >= 40rem) { grid-template-columns: 2fr repeat(var(--link-cols), 1fr); } }
    .footer-brand { font-size: var(--font-size-xl); }
    .footer-tagline { font-size: var(--font-size-sm); color: var(--color-surface-400); }
    .footer-heading { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-white); margin-block-end: var(--space-3); }
    .footer-links { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--font-size-sm); & a:hover { color: var(--color-white); } }
    .footer-bottom { margin-block-start: var(--space-7); padding-block-start: var(--space-6); border-block-start: 1px solid var(--color-surface-700); font-size: var(--font-size-xs); color: var(--color-surface-400); }
  }
}

@layer components {
  @scope (.form-section) {
    :scope { padding-block: var(--section-padding); }
    .form-title { font-size: var(--font-size-2xl); margin-block-end: var(--space-4); text-align: center; }
    .form-intro { color: var(--color-surface-600); margin-block-end: var(--space-6); text-align: center; }
    .form-field { display: flex; flex-direction: column; gap: var(--space-2); }
    .form-label { font-weight: 600; font-size: var(--font-size-sm); }
    .form-control {
      width: 100%;
      padding-block: var(--space-3); padding-inline: var(--space-4);
      font: inherit; color: inherit;
      background: var(--color-white);
      border: 1px solid var(--color-surface-300);
      border-radius: var(--radius-md);
      transition: border-color var(--duration-fast);
      &:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; border-color: var(--color-brand-500); }
    }
    textarea.form-control { resize: vertical; min-height: 8rem; }
    .form-submit {
      align-self: start;
      padding-block: var(--space-3); padding-inline: var(--space-6);
      font: inherit; font-weight: 600;
      color: var(--color-white); background: var(--color-brand-600);
      border: none; border-radius: var(--radius-full); cursor: pointer;
      transition: background var(--duration-fast);
      &:hover { background: var(--color-brand-700); }
      &:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
    }
  }
}

@layer components {
  .gallery-grid {
    padding-block: var(--section-padding);
  }
  .gallery-grid-heading {
    font-size: var(--font-size-2xl);
    line-height: var(--leading-tight);
    margin-block-end: var(--space-6);
  }
  .gallery-grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-4);
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .gallery-grid-item {
    margin: 0;
  }
  .gallery-grid-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .gallery-grid-frame {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-100);
  }
  .gallery-grid-caption {
    font-size: var(--font-size-sm);
    color: var(--color-surface-600);
  }
}

@layer layout {
  .grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  }
}

@layer components {
  @scope (.hero) {
    :scope { padding-block: var(--section-padding) var(--space-8); background: linear-gradient(to bottom, var(--color-brand-50), var(--color-white)); text-align: center; }
    .hero-badge {
      display: inline-block; border-radius: var(--radius-full); padding-block: var(--space-1); padding-inline: var(--space-3);
      font-size: var(--font-size-sm); font-weight: 500; background-color: oklch(from var(--color-safe-500) l c h / 0.15);
      color: var(--color-safe-600); border: 1px solid oklch(from var(--color-safe-500) l c h / 0.3);
    }
    .hero-title { font-size: var(--font-size-4xl); line-height: var(--leading-tight); }
    .hero-highlight { color: var(--color-brand-600); }
    .hero-description { font-size: var(--font-size-lg); line-height: var(--leading-loose); color: var(--color-surface-600); }
    .hero-trust { font-size: var(--font-size-sm); color: var(--color-surface-500); }
  }
}

@layer components {
  .hero-image {
    position: relative;
    isolation: isolate;
    min-height: clamp(20rem, 50vh, 32rem);
    display: grid;
    place-items: center;
    color: var(--color-white);
    overflow: hidden;
  }
  .hero-image-frame {
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  /* Center-weighted scrim: a guaranteed-dark plateau through the middle band
     where the (vertically centered) text sits. ≥0.6 black gives white body text
     ~6:1 over even a pure-white photo (e.g. a white TPO roof) — margin above the
     4.5:1 floor, since a mid-tone photo region at the bare minimum reads poorly.
     Edges fade lighter so the image stays vivid where no text overlaps. The
     scrim is what guarantees contrast; the text-shadow below is only a legibility
     backstop for busy photos (WCAG does not count it toward the ratio). */
  .hero-image-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
      oklch(from black l c h / 0.45) 0%,
      oklch(from black l c h / 0.62) 30%,
      oklch(from black l c h / 0.62) 70%,
      oklch(from black l c h / 0.45) 100%);
  }
  .hero-image-content {
    width: 100%;
    padding-block: var(--space-8);
    text-align: center;
  }
  .hero-image-title {
    font-size: var(--font-size-4xl);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }
  .hero-image-description {
    font-size: var(--font-size-lg);
    line-height: var(--leading-loose);
    text-wrap: pretty;
  }
  /* Legibility backstop over busy/mid-tone photos — not the contrast guarantee
     (that's the scrim); WCAG doesn't count text-shadow toward the ratio. */
  .hero-image-title,
  .hero-image-description {
    text-shadow: 0 1px 4px oklch(from black l c h / 0.6);
  }
}

@layer components {
  .hero-video {
    position: relative;
    isolation: isolate;
    min-height: clamp(20rem, 50vh, 32rem);
    display: grid;
    place-items: center;
    color: var(--color-white);
    overflow: hidden;
  }
  .hero-video-frame {
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  /* Clip and poster both fill the frame, cover-cropped. */
  .hero-video-clip,
  .hero-video-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Pure-CSS reduced-motion handling: motion-OK users see the loop; reduced-motion
     users see the static poster. No client JS. */
  .hero-video-fallback {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-video-clip {
      display: none;
    }
    .hero-video-fallback {
      display: block;
    }
  }
  /* Same center-weighted scrim as hero-image — guarantees white text contrast
     over an arbitrary clip. */
  .hero-video-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
      oklch(from black l c h / 0.45) 0%,
      oklch(from black l c h / 0.62) 30%,
      oklch(from black l c h / 0.62) 70%,
      oklch(from black l c h / 0.45) 100%);
  }
  .hero-video-content {
    width: 100%;
    padding-block: var(--space-8);
    text-align: center;
  }
  .hero-video-title {
    font-size: var(--font-size-4xl);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }
  .hero-video-description {
    font-size: var(--font-size-lg);
    line-height: var(--leading-loose);
    text-wrap: pretty;
  }
  .hero-video-title,
  .hero-video-description {
    text-shadow: 0 1px 4px oklch(from black l c h / 0.6);
  }
}

@layer components {
  .logo-band {
    padding-block: var(--section-padding);
    background-color: var(--color-white);
    text-align: center;
  }
  .logo-band-img {
    display: inline-block;
    width: auto;
    height: auto;
    max-height: 200px;
    max-width: min(100%, 360px);
  }
  .logo-band-caption {
    margin-block-start: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-surface-600);
  }
}

@layer components {
  @scope (.navbar) {
    :scope {
      position: sticky; inset-block-start: 0; z-index: 50;
      background-color: oklch(from var(--color-white) l c h / 0.85);
      backdrop-filter: blur(12px);
      border-block-end: 1px solid var(--color-surface-200);
    }
    .navbar-inner { display: flex; align-items: center; justify-content: space-between; height: var(--navbar-height); }
    .navbar-logo { font-size: var(--font-size-xl); }
    .navbar-links { display: none; gap: var(--space-6); @media (width >= 40rem) { display: flex; } }
    .navbar-link {
      font-size: var(--font-size-sm); font-weight: 500; color: var(--color-surface-600); transition: color var(--duration-fast);
      &:hover { color: var(--color-brand-600); }
    }
    .navbar-link[aria-current="page"], .navbar-mobile-link[aria-current="page"] { color: var(--color-brand-600); }
    .navbar-hamburger {
      cursor: pointer; color: var(--color-surface-600);
      padding: var(--space-3);
      @media (width >= 40rem) { display: none; }
    }
    .navbar-mobile-menu {
      @media (width >= 40rem) { display: none; }
      inset: auto; inset-block-start: var(--navbar-height); inset-inline: 0;
      width: auto; margin: 0;
      background-color: var(--color-white); border-block-end: 1px solid var(--color-surface-200);
      padding-block: var(--space-4); padding-inline: var(--space-5);
      opacity: 0;
      transition: opacity var(--duration-fast), overlay var(--duration-fast) allow-discrete, display var(--duration-fast) allow-discrete;
    }
    .navbar-mobile-menu:popover-open { display: flex; flex-direction: column; gap: var(--space-3); opacity: 1; }
    @starting-style { .navbar-mobile-menu:popover-open { opacity: 0; } }
    .navbar-mobile-menu::backdrop {
      background-color: oklch(from black l c h / 0);
      transition: background-color var(--duration-fast), overlay var(--duration-fast) allow-discrete, display var(--duration-fast) allow-discrete;
    }
    .navbar-mobile-menu:popover-open::backdrop { background-color: oklch(from black l c h / 0.4); }
    @starting-style { .navbar-mobile-menu:popover-open::backdrop { background-color: oklch(from black l c h / 0); } }
    .navbar-mobile-link { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-surface-600); padding-block: var(--space-3); }
  }
}

@layer components {
  .process-steps-item { display: flex; flex-direction: column; gap: var(--space-2); }
  .process-steps-number { font-size: var(--font-size-3xl); font-weight: 700; line-height: 1; color: var(--color-brand-600); }
  .process-steps-title { font-size: var(--font-size-lg); font-weight: 600; }
  .process-steps-description { font-size: var(--font-size-sm); line-height: var(--leading-normal); color: var(--color-surface-600); }
}

@layer layout {
  @scope (.prose) {
    :scope {
      container-type: inline-size;
      max-inline-size: 65ch;
      line-height: var(--leading-normal);
      text-wrap: pretty;

      & :is(ul, ol) {
        padding-inline-start: var(--space-5);
      }
      & ul { list-style: disc; }
      & ol { list-style: decimal; }

      & > * + * {
        margin-block-start: var(--space-4);
      }

      & :is(h1, h2, h3, h4, h5, h6) {
        line-height: var(--leading-snug);
        text-wrap: balance;
      }
      & h1 { font-size: clamp(1.875rem, 1.5rem + 2cqi, 2.5rem); }
      & h2 { font-size: clamp(1.5rem, 1.25rem + 1.5cqi, 2rem); }
      & h3 { font-size: clamp(1.25rem, 1.1rem + 1cqi, 1.5rem); }
      & h4 { font-size: clamp(1.125rem, 1rem + 0.5cqi, 1.25rem); }
      & h5 { font-size: 1.125rem; }
      & h6 { font-size: 1rem; }
      & > * + :is(h1, h2, h3, h4, h5, h6) {
        margin-block-start: var(--space-7);
      }
      & > :is(h1, h2, h3, h4, h5, h6) + * {
        margin-block-start: var(--space-3);
      }

      & a {
        color: var(--color-brand-600);
        text-decoration: underline;
        text-underline-offset: 0.15em;
      }

      & blockquote {
        border-inline-start: 3px solid var(--color-brand-200);
        padding-inline-start: var(--space-4);
        font-style: italic;
        color: var(--color-surface-600);
      }

      & code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.9em;
        background: var(--color-surface-50);
        padding: 0.1em 0.3em;
        border-radius: 0.25em;
      }

      & pre {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        background: var(--color-surface-50);
        padding: var(--space-4);
        border-radius: 0.5em;
        overflow-x: auto;
        line-height: var(--leading-snug);
      }
      & pre code {
        background: transparent;
        padding: 0;
        font-size: inherit;
      }

      & hr {
        border: none;
        border-block-start: 1px solid var(--color-surface-300);
        margin-block: var(--space-6);
      }
    }
  }
}

@layer components {
  .section {
    padding-block: var(--section-padding);
    background-color: var(--section-bg, transparent);
    text-align: center;
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
  }
  .section-bg-surface-50 { --section-bg: var(--color-surface-50); }
  .section-eyebrow { font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-brand-600); }
  .section-title { font-size: var(--font-size-2xl); margin-block-start: var(--space-2); margin-block-end: var(--space-7); }
}

@layer components {
  @scope (.skip-link) {
    :scope {
      position: absolute; inset-inline-start: -9999px; inset-block-start: 0;
      background-color: var(--color-brand-600); color: var(--color-white);
      padding-block: var(--space-3); padding-inline: var(--space-5);
      font-weight: 600; font-size: var(--font-size-sm); z-index: 100;
      border-radius: 0 0 var(--radius-md) 0;
    }
    :scope:focus { inset-inline-start: 0; }
  }
}

@layer components {
  @scope (.social-links) {
    :scope { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; }
    .social-links-link {
      display: inline-flex; color: inherit;
      transition: color var(--duration-fast);
      &:hover { color: var(--color-white); }
    }
    .social-links-icon { width: 20px; height: 20px; }
  }
}

@layer layout {
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .stack-gap-2 { gap: var(--space-2); }
  .stack-gap-5 { gap: var(--space-5); }
}

@layer components {
  .video-embed {
    padding-block: var(--section-padding);
    text-align: center;
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
  }
  .video-embed-title {
    font-size: var(--font-size-2xl);
    margin-block-end: var(--space-7);
  }
  /* aspect-ratio (inline, per block) reserves space → no layout shift. */
  .video-embed-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-surface-100);
  }
  .video-embed-clip {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}