/*
Theme Name:        Layerly Base
Theme URI:         https://layerly.io
Author:            Layerly
Author URI:        https://layerly.io
Description:       Layerly Base Theme — the v1.0 reference implementation of the Layerly Conventions Framework. Fork this theme per client; do not edit in place. Requires the Layerly Bridge plugin for runtime helpers and admin chat.
Version: 1.0.0-r39-923999f6
Requires at least: 6.0
Requires PHP:      8.0
Layerly Bridge:    >=4.7.0
Layerly Conventions: v1.0
Text Domain:       layerly-base
License:           Proprietary
Tags:              layerly, layerly-v1
*/

/* ════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — numbered (variable per site) + functional aliases.
   Override values per site. Add --color-N or --font-N as the design needs.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --color-success: #059669;
  --color-error: #DC2626;
  --color-warning: #F59E0B;
  --font-3: system-ui, -apple-system, sans-serif;
  --sh-sm: 0 1px 2px rgba(0,0,0,.08);
  --sh-md: 0 4px 12px rgba(0,0,0,.12);
  --sh-lg: 0 12px 32px rgba(0,0,0,.18);
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --color-1: #FFFFFF;
  --color-2: #042451;
  --color-3: #C08A28;
  --color-4: #F6F5F3;
  --color-5: #02183A;
  --color-6: #E7E4DF;
  --color-7: rgba(4,36,81,.62);
  --color-primary: var(--color-2);
  --color-text: var(--color-2);
  --color-text-muted: var(--color-7);
  --color-bg: var(--color-1);
  --color-surface: var(--color-4);
  --color-border: var(--color-6);
  --color-accent: var(--color-3);
  --color-highlight: var(--color-3);
  --color-shade: var(--color-5);
  --font-1: 'EB Garamond', Georgia, serif;
  --font-2: 'Source Sans 3', system-ui, sans-serif;
  --font-display: var(--font-1);
  --font-body: var(--font-1);
  --font-subheading: var(--font-2);
  --font-utility: var(--font-2);
  --text-xs: 13px;
  --text-sm: 15px;
  --text-md: 18px;
  --text-lg: 21px;
  --text-xl: 25px;
  --text-h3: clamp(28px, 3vw, 38px);
  --text-h2: clamp(34px, 4vw, 48px);
  --text-h1: clamp(38px, 4.6vw, 56px);
  --leading-tight: 1.08;
  --leading-heading: 1.12;
  --leading-body: 1.5;
  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.1em;
  --tracking-label: 0.02em;
  --weight-reg: 400;
  --weight-med: 500;
  --weight-semi: 600;
  --weight-bold: 700;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: clamp(28px, 4vw, 40px);
  --space-xxl: clamp(48px, 7vw, 80px);
  --space-block: clamp(40px, 6vw, 50px);
  --space-section: clamp(64px, 9vw, 120px);
  --space-section-lg: clamp(80px, 11vw, 160px);
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-full: 999px;
  --container-max: 1200px;
  --gutter: 50px;
  --color-accent-ink: #8A6117;
}

/* ════════════════════════════════════════════════════════════════════
   2. RESET + ROOT
   ════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size:   var(--text-md);
    color:       var(--color-text);
    background:  var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--color-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════
   3. TYPOGRAPHY
   ════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: 1.15;
    margin: 0 0 var(--space-md);
    color: var(--color-text);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); font-weight: var(--weight-med); }
h6 { font-size: var(--text-md); font-weight: var(--weight-med); text-transform: uppercase; letter-spacing: .05em; }

.eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

/* (Responsive type is now handled fluidly by the clamp() heading tokens in :root —
   no hard 768px breakpoint needed.) */

/* ════════════════════════════════════════════════════════════════════
   4. LAYOUT PRIMITIVES
   ════════════════════════════════════════════════════════════════════ */
.wrap {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

@media (min-width: 768px) {
    .wrap { padding-inline: var(--space-lg); }
}

/* Base section — every page section uses this anatomy.
   Sets up the position, background, overlay, decoration, divider hooks. */
.section {
    position: relative;
    /* --section-pad-y: the ONE vertical-rhythm knob, on every section. It replaces six
       per-component `--*-pad-y` knobs that were declared in manifests and wired to nothing:
       vertical padding is section anatomy, not a property of the component inside it. */
    padding-block: var(--section-pad-y, var(--space-xxl));
    /* `clip` contains decorations/dividers exactly like `hidden`, but does NOT create a
       scroll container — so `position: sticky` descendants (e.g. the sticky-stack section)
       can pin against the viewport instead of against this box. `overflow: hidden` silently
       broke sticky for EVERY section (Aveya, 2026-07-24). The `hidden` line is the fallback
       for engines without `clip`; both contain the decorations. */
    overflow: hidden;
    overflow: clip;
}

/* Section background variants — emitted by layerly_section_classes() */
.section--bg-color {
    background-color: var(--section-bg-color, transparent);
}
.section--bg-image {
    background-image: var(--section-bg-image);
    background-size: cover;
    background-position: center;
}
.section--bg-gradient {
    background-image: var(--section-bg-gradient);
}

/* Color overlay on backgrounds (for legibility over images) */
.section--with-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--section-overlay-color, transparent);
    opacity: var(--section-overlay-opacity, 0);
    pointer-events: none;
    z-index: 1;
}
.section--with-overlay > * { position: relative; z-index: 2; }

/* Decoration slot — pseudo-element for background design accents */
.section--decorated::before {
    content: '';
    position: absolute;
    pointer-events: none;
    background-color: var(--decoration-color, var(--color-1));
    opacity: var(--decoration-opacity, .15);
    z-index: 0;
}
/* Default decoration: a circle */
.section--decorated::before {
    width: 240px;
    height: 240px;
    border-radius: 50%;
}
.section--decorated[style*="--decoration-size: sm"]::before { width: 120px; height: 120px; }
.section--decorated[style*="--decoration-size: md"]::before { width: 240px; height: 240px; }
.section--decorated[style*="--decoration-size: lg"]::before { width: 360px; height: 360px; }
.section--decorated[style*="--decoration-size: xl"]::before { width: 480px; height: 480px; }

.section--decorated[style*="--decoration-position: top-left"]::before     { top: -60px; left: -60px; }
.section--decorated[style*="--decoration-position: top-right"]::before    { top: -60px; right: -60px; }
.section--decorated[style*="--decoration-position: bottom-left"]::before  { bottom: -60px; left: -60px; }
.section--decorated[style*="--decoration-position: bottom-right"]::before { bottom: -60px; right: -60px; }
.section--decorated[style*="--decoration-position: center"]::before {
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* ── Sticky-stack — a REGISTERED behavioural primitive (v1.0, 2026-07-24) ─────────────
   Any section can opt a direct child list into a scroll-driven stacked-card effect: each
   card pins to the vertical centre as it scrolls up, the next card slides over it leaving a
   small "peek" of the one beneath, and covered cards tilt slightly. This is composed, never
   hand-built (rulebook: behaviours come from the library). It is why the Aveya request
   failed as bespoke CSS — the list was flex (no sticky runway) and `.section{overflow:hidden}`
   killed sticky outright (now `overflow:clip`, above).

   Compose:  add class `sticky-stack` to the SECTION, and `sticky-stack__list` / `sticky-stack__item`
             to the repeating list + cards. Knobs via inline style on the section:
               --stack-peek   (px between pinned cards; default 16)
               --stack-card-h (approx card height, to centre the pin; default 480px)
               --stack-tilt   (max rotation of a covered card; default 2.5deg)
   Below --stack-bp (default 900px) it degrades to normal flow — a pinned 480px card is worse
   than a simple stack on a phone. Motion is OFF under prefers-reduced-motion (a11y floor). */
.sticky-stack { --stack-peek: 16px; --stack-card-h: 480px; --stack-tilt: 2.5deg; --stack-bp: 900px; }

@media (min-width: 900px) {
  .sticky-stack .sticky-stack__list {
    display: block;                              /* out of flex → normal flow gives sticky its runway */
    max-width: 560px; margin-inline: auto; padding: 0; list-style: none;
  }
  .sticky-stack .sticky-stack__item {
    position: sticky;
    top: max(96px, calc(50vh - var(--stack-card-h) / 2));   /* pin to centre, never under the nav */
    margin-bottom: 26vh;                                     /* the scroll distance between pins */
    transform-origin: 50% 0%;
    box-shadow: var(--sh-lg);
  }
  .sticky-stack .sticky-stack__item:last-child { margin-bottom: 0; }
  /* each card pins one --stack-peek lower than the previous, so a sliver stays visible */
  .sticky-stack .sticky-stack__item:nth-child(1) { z-index: 1; }
  .sticky-stack .sticky-stack__item:nth-child(2) { z-index: 2; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 1)); }
  .sticky-stack .sticky-stack__item:nth-child(3) { z-index: 3; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 2)); }
  .sticky-stack .sticky-stack__item:nth-child(4) { z-index: 4; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 3)); }
  .sticky-stack .sticky-stack__item:nth-child(5) { z-index: 5; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 4)); }
  .sticky-stack .sticky-stack__item:nth-child(6) { z-index: 6; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 5)); }

  /* Scroll-driven tilt via native CSS scroll timelines — no JS to enqueue or break. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .sticky-stack .sticky-stack__item {
        animation: layerly-stack-tilt linear both;
        animation-timeline: view();
        animation-range: contain 35% exit 100%;
      }
      @keyframes layerly-stack-tilt {
        from { transform: rotate(0deg) scale(1); }
        to   { transform: rotate(calc(-1 * var(--stack-tilt))) scale(.94); }
      }
    }
  }
  /* No scroll-timeline support → a static alternating tilt still reads as a hand-placed stack. */
  @supports not (animation-timeline: view()) {
    .sticky-stack .sticky-stack__item:nth-child(odd)  { transform: rotate(calc(-0.5 * var(--stack-tilt))); }
    .sticky-stack .sticky-stack__item:nth-child(even) { transform: rotate(calc(0.5 * var(--stack-tilt))); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-stack .sticky-stack__list { display: flex; flex-direction: column; gap: var(--space-lg); }
  .sticky-stack .sticky-stack__item { position: static; transform: none; animation: none; margin-bottom: 0; }
}

/* Section dividers — emitted on the section element. SVGs live in assets/dividers/. */
.section[class*="section--divider-top-"] {
    /* Top divider rendered via ::before override below — sections with both
       a decoration AND a divider need careful ordering. v1 keeps it simple. */
}

/* Section header — used by every section that has a heading area */
.section-head {
    margin-bottom: var(--space-xl);
}
.section-head--center { text-align: center; }
.section-head--center .section-head__inner { max-width: 720px; margin-inline: auto; }

/* ════════════════════════════════════════════════════════════════════
   5. BUTTONS
   ════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: 1;
    text-decoration: none;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s, transform .1s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--color-primary);
    color: var(--color-surface);
}
.btn--primary:hover { filter: brightness(.92); }

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

.btn--link {
    background: transparent;
    color: var(--color-primary);
    padding: 0;
    border: none;
}

/* ════════════════════════════════════════════════════════════════════
   6. SHAPE UTILITIES (used by layerly_image's `shape` arg)
   Each emits a `.shape-*` class.
   ════════════════════════════════════════════════════════════════════ */
.shape-square      { border-radius: 0; }
.shape-rounded-sm  { border-radius: var(--radius-sm); }
.shape-rounded-md  { border-radius: var(--radius-md); }
.shape-rounded-lg  { border-radius: var(--radius-lg); }
.shape-circle      { border-radius: 9999px; aspect-ratio: 1; object-fit: cover; }
.shape-arch        { border-radius: 9999px 9999px 0 0; }
.shape-tilt        { transform: rotate(-3deg); }
/* Custom shapes (e.g. blob, squiggle) — drop SVG into assets/shapes/ and
   add .shape-<name> using mask-image: url(/wp-content/themes/<slug>/assets/shapes/<name>.svg) */

/* ════════════════════════════════════════════════════════════════════
   7. ICONS
   ════════════════════════════════════════════════════════════════════ */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    color: currentColor;
}
.icon svg { width: 100%; height: 100%; fill: currentColor; }
.icon--sm { font-size: var(--text-sm); }
.icon--md { font-size: var(--text-md); }
.icon--lg { font-size: var(--text-lg); }
.icon--xl { font-size: var(--text-xl); }
.icon--missing {
    width: 1em; height: 1em;
    background: var(--color-border);
    border-radius: var(--radius-sm);
    display: inline-block;
}

/* ════════════════════════════════════════════════════════════════════
   8. ACCESSIBILITY
   ════════════════════════════════════════════════════════════════════ */
.screen-reader-text,
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-text);
    color: var(--color-surface);
    padding: var(--space-sm) var(--space-md);
    z-index: 999999;
}
.skip-link:focus { left: var(--space-md); top: var(--space-md); }

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   9. COMPONENT STYLES — each component owns its own block, scoped by BEM.
   New families append below as the catalog grows.
   ════════════════════════════════════════════════════════════════════ */

/* ── Section header (used inside other sections) ── */
.section-head__heading { margin-bottom: var(--space-md); }
.section-head__sub {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 720px;
    margin: 0;
}
.section-head--center .section-head__sub { margin-inline: auto; }

/* ── Site header (template-parts/headers/standard.php) ── */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.site-header--sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--sh-sm);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-md);
}
.site-header__logo img { max-height: 48px; width: auto; }
.site-header__logo-text { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); text-decoration: none; }
.site-header__nav { display: flex; align-items: center; gap: var(--space-lg); }
.site-header__nav-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; gap: var(--space-lg);
}
.site-header__nav-list a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--weight-med);
}
.site-header__nav-list a:hover { color: var(--color-primary); }
.site-header__menu-toggle {
    display: none;
    background: transparent; border: none; padding: var(--space-sm); cursor: pointer; color: var(--color-text);
}

@media (max-width: 767px) {
    .site-header__menu-toggle { display: inline-flex; }
    .site-header__nav {
        position: fixed;
        inset: 60px 0 0 0;
        background: var(--color-surface);
        padding: var(--space-lg);
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
        transform: translateX(100%);
        transition: transform .25s ease-out;
        z-index: 99;
    }
    .site-header__nav.is-open { transform: translateX(0); }
    .site-header__nav-list { flex-direction: column; gap: var(--space-md); }
}

/* ── Site footer (template-parts/footers/multi-column.php) ── */
.site-footer {
    background: var(--color-2);
    color: var(--color-surface);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { opacity: .85; }
.site-footer__inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-xl);
    padding-block: var(--space-xxl);
}
.site-footer__tagline { color: rgba(255,255,255,.7); margin-top: var(--space-md); }
.site-footer__social { list-style: none; padding: 0; display: flex; gap: var(--space-md); margin-top: var(--space-md); }
.site-footer__social a { display: inline-flex; }
.site-footer__nav-list { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.site-footer__column-heading { font-size: var(--text-md); margin-bottom: var(--space-md); color: var(--color-surface); }
.site-footer__contact p { margin-bottom: var(--space-sm); }
.site-footer__bar {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-block: var(--space-md);
    font-size: var(--text-sm);
    color: rgba(255,255,255,.7);
}
.site-footer__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.site-footer__legal-list { list-style: none; padding: 0; display: flex; gap: var(--space-md); margin: 0; }

@media (max-width: 767px) {
    .site-footer__inner { grid-template-columns: 1fr; }
}

/* ── Hero (template-parts/heroes/centered.php) ── */
.hero { padding-block: var(--space-xxl); }
.hero__inner { text-align: center; max-width: 800px; margin-inline: auto; }
.hero__eyebrow { margin-bottom: var(--space-sm); }
.hero__title { margin-bottom: var(--space-md); font-size: var(--hero-title-size, var(--text-h1)); }
.hero__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}
.hero__ctas {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}
.hero__ctas:not(:last-child) { margin-bottom: var(--space-xl); }
.hero__media { margin-top: var(--space-xl); }
.hero__media img { display: block; margin-inline: auto; }

/* ── Intro split (template-parts/intro-splits/image-left.php) ── */
.intro-split__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--intro-gap, var(--space-xxl));
    align-items: center;
}
/* If there's no media slot rendered, collapse to one column */
.intro-split__inner:has(> .intro-split__content:only-child) {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-inline: auto;
}
.intro-split--image-right .intro-split__inner > .intro-split__media:first-child { order: 2; }
.intro-split__media img { width: 100%; height: auto; }
.intro-split__title { margin-bottom: var(--space-md); }
.intro-split__cta { margin-top: var(--space-lg); }

@media (max-width: 767px) {
    .intro-split__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* ── Service grid — cards ── */
.service-grid__list {
    display: grid;
    grid-template-columns: repeat(var(--services-cols, auto-fill), minmax(280px, 1fr));
    gap: var(--services-gap, var(--space-lg));
}
.service-card {
    background: var(--services-card-bg, var(--color-surface));
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: transform .15s, box-shadow .15s;
}
.service-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.service-card__link { display: block; text-decoration: none; color: inherit; }
.service-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.service-card__image { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { padding: var(--space-lg); }
.service-card__title { margin-bottom: var(--space-sm); font-size: var(--text-xl); }
.service-card__excerpt { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.service-card__more { color: var(--color-primary); font-weight: var(--weight-bold); font-size: var(--text-sm); }

/* ── Generic CPT loop (cpt-loop/grid) — any custom post type ── */
/* Consumes --section-bg-color first (F17/B18) — a bg_type:color prop on this
   section must win over the component's own default, not lose to it. */
.cpt-loop { background: var(--section-bg-color, var(--cpt-loop-bg, var(--color-bg))); }
.cpt-loop__list {
    display: grid;
    grid-template-columns: repeat(var(--cpt-loop-cols, 3), 1fr);
    gap: var(--cpt-loop-gap, var(--space-lg));
}
@media (max-width: 900px) { .cpt-loop__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cpt-loop__list { grid-template-columns: 1fr; } }
.cpt-loop__card {
    background: var(--cpt-loop-card-bg, var(--color-surface));
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: transform .15s, box-shadow .15s;
}
.cpt-loop__card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.cpt-loop__link { display: block; text-decoration: none; color: inherit; }
.cpt-loop__media { aspect-ratio: 4 / 3; overflow: hidden; }
.cpt-loop__image { width: 100%; height: 100%; object-fit: cover; }
.cpt-loop__body { padding: var(--space-lg); }
.cpt-loop__title { margin-bottom: var(--space-sm); font-size: var(--text-xl); }
.cpt-loop__excerpt { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.cpt-loop__more { color: var(--color-primary); font-weight: var(--weight-bold); font-size: var(--text-sm); }

/* ── Radio group field ── */
.field--radio .field__radios { display: flex; flex-direction: column; gap: var(--space-sm); }
.field--radio .field__radio { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; }

/* ── Testimonial — single large ── */
.testimonial-large__figure {
    color: var(--testimonials-fg, inherit);
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
}
.testimonial-large__rating { font-size: var(--text-xl); color: var(--color-warning); margin-bottom: var(--space-md); letter-spacing: .1em; }
.testimonial-large__quote {
    font-size: var(--testimonials-quote-size, var(--text-xl));
    font-family: var(--font-display);
    line-height: 1.35;
    margin: 0 0 var(--space-xl);
    quotes: '"' '"';
}
.testimonial-large__quote::before { content: open-quote; }
.testimonial-large__quote::after  { content: close-quote; }
.testimonial-large__author { display: inline-flex; align-items: center; gap: var(--space-md); }
.testimonial-large__photo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.testimonial-large__author-text { text-align: left; }
.testimonial-large__name { display: block; font-weight: var(--weight-bold); }
.testimonial-large__role { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ── CTA banner ── */
/* Consumes --section-bg-color first (F17/B18) — see .cpt-loop above. */
.cta-banner {
  background: var(--section-bg-color, var(--color-primary));
  color: var(--cta-fg, var(--color-surface));
  text-align: var(--cta-align, initial);
  --cta-fg: var(--color-1);
  --cta-align: left;
}
.cta-banner .cta-banner__inner {
  flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-lg);
  max-width: 1440px;
  padding-inline: var(--gutter);
  text-align: left;
  min-height: 440px;
  padding-block: 80px;
}
.cta-banner__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-semi);
  line-height: 52px;
  letter-spacing: var(--tracking-display);
  color: var(--color-1);
  margin: 0;
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-accent);
  width: min(580px, 100%);
}
.cta-banner__body { margin: 0; opacity: .9; max-width: 560px; }
.cta-banner__ctas {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: flex-start;
}
.cta-banner .btn--primary {
    background: var(--color-surface);
    color: var(--color-primary);
}
.cta-banner .btn--ghost { border-color: var(--color-surface); color: var(--color-surface); }

@media (max-width: 767px) {
    .cta-banner .cta-banner__inner { flex-direction: column; align-items: flex-start; }
}

/* ── Trust bar ── */
.trust-bar { padding-block: var(--trust-pad-y, var(--space-xl)); }
.trust-bar__heading {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}
.trust-bar__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--trust-gap, var(--space-xl));
}
.trust-bar__item { opacity: .75; transition: opacity .2s; }
.trust-bar__item:hover { opacity: 1; }
.trust-bar__logo { max-height: 40px; width: auto; filter: grayscale(1); }
.trust-bar__item:hover .trust-bar__logo { filter: grayscale(0); }
.trust-bar__label { color: var(--color-text-muted); font-weight: var(--weight-med); }

/* ── Reveal-on-scroll ── */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease-out, transform .5s ease-out;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════════════
   M4 APPENDIX — new variants, families, dividers, eyebrow-with-lines
   ════════════════════════════════════════════════════════════════════ */

/* ── Section dividers (wave / slant / curve) ──
   Templates add `section--divider-top-<shape>` and/or
   `section--divider-bottom-<shape>` via layerly_section_classes(). The SVG
   is masked using --divider-fill from the section's background so the
   divider blends into whatever sits behind it. */
.section[class*="section--divider-top-"]    { padding-top:    calc(var(--space-xxl) + 60px); }
.section[class*="section--divider-bottom-"] { padding-bottom: calc(var(--space-xxl) + 60px); }

.section[class*="section--divider-top-"]::after,
.section[class*="section--divider-bottom-"]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1;
    pointer-events: none;
    background-color: var(--color-surface);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
}
.section[class*="section--divider-top-"]::after    { top: 0;    transform: scaleY(-1); }
.section[class*="section--divider-bottom-"]::before { bottom: 0; }

/* Note: divider colour defaults to --color-surface; override per-section by
   setting --color-divider on the section element. */
.section[class*="section--divider-"][style*="--color-divider"]::after,
.section[class*="section--divider-"][style*="--color-divider"]::before {
    background-color: var(--color-divider);
}

.section--divider-top-wave::after,    .section--divider-bottom-wave::before    { -webkit-mask-image: url(/wp-content/themes/layerly-base/assets/dividers/wave.svg);  mask-image: url(/wp-content/themes/layerly-base/assets/dividers/wave.svg); }
.section--divider-top-slant::after,   .section--divider-bottom-slant::before   { -webkit-mask-image: url(/wp-content/themes/layerly-base/assets/dividers/slant.svg); mask-image: url(/wp-content/themes/layerly-base/assets/dividers/slant.svg); }
.section--divider-top-curve::after,   .section--divider-bottom-curve::before   { -webkit-mask-image: url(/wp-content/themes/layerly-base/assets/dividers/curve.svg); mask-image: url(/wp-content/themes/layerly-base/assets/dividers/curve.svg); }

/* ── Hero — split variant ── */
.hero__inner--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hero-gap, var(--space-xxl));
    align-items: center;
}
.hero--image-left .hero__inner--split > .hero__media   { order: 1; }
.hero--image-left .hero__inner--split > .hero__content { order: 2; }
.hero--split .hero__title    { font-size: var(--text-xxl); line-height: 1.1; margin-bottom: var(--space-md); }
.hero--split .hero__subtitle { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: var(--space-xl); }
.hero--split .hero__ctas     { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.hero--split .hero__media img { width: 100%; height: auto; display: block; }

@media (max-width: 880px) {
    .hero__inner--split { grid-template-columns: 1fr; gap: var(--space-xl); }
    .hero--image-left .hero__inner--split > .hero__media,
    .hero--image-left .hero__inner--split > .hero__content { order: initial; }
}

/* ── Section head — left variant + with-line-side eyebrow ── */
.section-head--left              { text-align: left; }
.section-head--left .section-head__inner { max-width: none; margin-inline: 0; }

.eyebrow--with-lines {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    justify-content: center;
}
.eyebrow--with-lines .eyebrow__line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
    max-width: 80px;
}
.eyebrow--with-lines .eyebrow__label { white-space: nowrap; }

/* ── Testimonials — carousel variant ── */
.testimonial-carousel {
  --testimonials-fg: var(--color-1);
  padding-block: 80px;
}
.tcarousel {
    color: var(--testimonials-fg, inherit);
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-md);
}
.tcarousel__track {
    grid-column: 2;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
.tcarousel__track::-webkit-scrollbar { display: none; }

.tcarousel__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    padding: var(--space-xl);
    text-align: center;
    box-sizing: border-box;
}
.tcarousel__rating { color: var(--color-accent, var(--color-primary)); letter-spacing: 2px; margin-bottom: var(--space-md); }
.tcarousel__quote {
    font-size: var(--text-lg);
    line-height: 1.5;
    margin: 0 0 var(--space-lg);
    max-width: 720px;
    margin-inline: auto;
}
.tcarousel__author {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    text-align: left;
}
.tcarousel__photo img { width: 56px; height: 56px; }
.tcarousel__author-text { display: flex; flex-direction: column; }
.tcarousel__name { font-weight: var(--weight-bold); }
.tcarousel__role { color: var(--color-text-muted); font-size: var(--text-sm); }

.tcarousel__nav {
    grid-row: 1;
    appearance: none;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.tcarousel__nav:hover  { background: var(--color-bg-alt); }
.tcarousel__nav:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tcarousel__nav--prev { grid-column: 1; }
.tcarousel__nav--next { grid-column: 3; }

.tcarousel__dots {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}
.tcarousel__dot, .carousel__dot {
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    border: none;
    background: var(--color-border);
    cursor: pointer;
    padding: 0;
    transition: background-color .15s, transform .15s;
}
.tcarousel__dot.is-active, .carousel__dot.is-active {
    background: var(--color-primary);
    transform: scale(1.2);
}

@media (max-width: 720px) {
    .tcarousel { grid-template-columns: 1fr; }
    .tcarousel__nav { display: none; }
    .tcarousel__track { grid-column: 1; }
}

/* ── Disclosures — accordion ── */
.accordion { border-top: 1px solid var(--accordion-border, var(--color-border)); }
.accordion__item {
    border-bottom: 1px solid var(--accordion-border, var(--color-border));
}
.accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--accordion-pad, var(--space-lg)) 0;
    cursor: pointer;
    list-style: none;
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.accordion__question { flex: 1; font-size: var(--accordion-q-size, var(--text-md)); }
.accordion__icon {
    color: var(--color-text-muted);
    transition: transform .25s ease;
    display: inline-flex;
}
.accordion__item[open] > .accordion__summary .accordion__icon { transform: rotate(180deg); }
.accordion__answer {
    padding: 0 0 var(--space-lg);
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* ── Team — grid ── */
.team__list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--team-cols, auto-fit), minmax(220px, 1fr));
    gap: var(--team-gap, var(--space-xl));
}
.team__member { text-align: center; }
.team__photo { margin-bottom: var(--space-md); }
.team__photo-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 9999px;
}
.team__name { margin: 0 0 var(--space-xs); font-size: var(--text-lg); }
.team__role { color: var(--color-text-muted); margin: 0 0 var(--space-md); }
.team__bio  { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-md); }
.team__social {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
}
.team__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    color: var(--color-text-muted);
    transition: color .15s, background-color .15s;
}
.team__social a:hover { color: var(--color-primary); background: var(--color-bg-alt); }

/* ── Process steps — numbered ── */
.process-steps__list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-xl);
    counter-reset: layerly-step;
}
.process-steps__item {
    position: relative;
    padding: var(--space-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: left;
}
.process-steps__number {
    font-size: var(--text-xxl);
    line-height: 1;
    font-weight: var(--weight-bold);
    color: var(--process-accent, var(--color-primary));
    opacity: .35;
    margin-bottom: var(--space-md);
}
.process-steps__icon { color: var(--color-primary); margin-bottom: var(--space-md); font-size: 32px; }
.process-steps__title { margin: 0 0 var(--space-sm); font-size: var(--text-lg); }
.process-steps__desc  { margin: 0; color: var(--color-text-muted); line-height: 1.6; }

/* ── Feature blocks — alternating ── */
.feature-blocks__list {
    display: flex;
    flex-direction: column;
    gap: var(--features-gap, var(--space-xxl));
}
.feature-blocks__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xxl);
    align-items: center;
}
.feature-blocks__row--image-right > .feature-blocks__media   { order: 2; }
.feature-blocks__row--image-right > .feature-blocks__content { order: 1; }
.feature-blocks__media img { width: 100%; height: auto; display: block; }
.feature-blocks__title { margin: 0 0 var(--space-md); font-size: var(--text-xl); }
.feature-blocks__body  { color: var(--color-text-muted); line-height: 1.65; }
.feature-blocks__body p:last-child { margin-bottom: 0; }

@media (max-width: 880px) {
    .feature-blocks__row,
    .feature-blocks__row--image-right { grid-template-columns: 1fr; }
    .feature-blocks__row > *,
    .feature-blocks__row--image-right > * { order: initial; }
}

/* ── Site footer — minimal ── */
.site-footer--minimal { padding-block: var(--space-lg); border-top: 1px solid var(--color-border); }
.site-footer--minimal .site-footer__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.site-footer--minimal .site-footer__minimal-right {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.site-footer--minimal .site-footer__copyright { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.site-footer--minimal .site-footer__legal-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: var(--space-md);
}
.site-footer--minimal .site-footer__legal-list a {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
}
.site-footer--minimal .site-footer__legal-list a:hover { color: var(--color-text); }

/* ════════════════════════════════════════════════════════════════════
   COMPONENT LIBRARY (P1) — nav · footer · form · fields
   Structure/behavior LOCKED. Per-site look = override the --knobs below.
   ════════════════════════════════════════════════════════════════════ */

/* ── Component: nav/primary ── */
.nav {
    --nav-bg: var(--color-surface);
    --nav-fg: var(--color-text);
    --nav-height: 72px;
    --nav-link-weight: var(--weight-med);
    --nav-link-hover: var(--color-primary);
    --nav-gap: var(--space-lg);
    background: var(--nav-bg);
    color: var(--nav-fg);
}
[data-nav-sticky] { position: sticky; top: 0; z-index: 1000; transition: box-shadow .2s; }
[data-nav-sticky].is-scrolled { box-shadow: var(--sh-sm); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--nav-gap); min-height: var(--nav-height); }
.nav__logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.nav__logo-img { max-height: calc(var(--nav-height) - var(--space-lg)); width: auto; }
.nav__logo-text { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: inherit; }
.nav__menu { display: flex; align-items: center; gap: var(--nav-gap); }
.nav__list { display: flex; align-items: center; gap: var(--nav-gap); list-style: none; margin: 0; padding: 0; }
.nav__list a { color: inherit; text-decoration: none; font-weight: var(--nav-link-weight); }
.nav__list a:hover { color: var(--nav-link-hover); }
.nav__cta { white-space: nowrap; }

/* ── Chrome behavior — LOCKED, attribute-driven ───────────────────────────
   Works on nav/primary AND any bespoke header/footer that uses the data hooks.
   Design the LOOK on your own classes / the --mobile-menu-* vars; the BEHAVIOR
   (full-screen drawer, hamburger→X, body-lock) comes from here — never rebuilt.
   Hooks: [data-mobile-menu-toggle] (the hamburger button, 3 <span> bars),
   [data-mobile-menu] (the drawer), [data-nav-sticky] (above). */
/* ── The toggle: knob-driven, and the X is DERIVED from the knobs ────────────────────
   The travel used to be a hardcoded translateY(9px), which is only correct for 3px bars
   with a 6px gap. That made the icon impossible to make configurable: any knob touching
   bar height or gap would leave the two arms missing each other, silently, on every site
   that set it. Measured while designing the replacement — the "thin" option was 4px out
   and the two-bar option 1.25px out. calc(bar + gap) is exactly the distance an outer bar
   must travel to reach the centre, so EVERY combination of knobs lands a true X.

   DEFAULT CHANGED 2026-09-08 (Alexander: "the thin look looks the best… let's go with b"):
   30x1.5 square-ended bars, replacing 26x3 rounded. Sites that want the old look set the
   knobs; nobody has to fork the component.

   44x44 is the tap target and is deliberately NOT a knob — it is an accessibility floor
   (COMMAND 07-standards/theme-knobs.md §4). */
[data-mobile-menu-toggle] {
    --nav-toggle-bar-w: 30px;
    --nav-toggle-bar-h: 1.5px;
    --nav-toggle-gap: 6px;
    --nav-toggle-radius: 0;
    --nav-toggle-color: currentColor;
    /* --nav-toggle-align is deliberately NOT declared here. A variant supplies its own DEFAULT
       through the var() fallback below, so a site that sets the knob still wins. Declaring it
       on the base rule is what broke the staggered variant: its attribute selector (0,2,0)
       outranked any class or rule a site would realistically use to override it, so
       --nav-toggle-align:flex-end had no effect and left- and right-aligned rendered
       identically. A variant must default a knob, never set it. */
    /* The tap target. Kept in a variable so the padding maths below can read it — NOT a knob,
       and never below 44px (accessibility floor, theme-knobs.md §4). */
    --nav-toggle-size: 44px;
    display: none; position: relative; z-index: 1002;
    flex-direction: column; justify-content: center; align-items: var(--nav-toggle-align, center);
    gap: var(--nav-toggle-gap);
    width: var(--nav-toggle-size); height: var(--nav-toggle-size);
    /* The content box is exactly ONE BAR wide and centred inside the tap target. That is what
       lets --nav-toggle-align line up the ragged edge of the staggered variant WITHOUT shoving
       the whole icon off-centre: with plain flex-start the bars sat flush against the button's
       left edge, 7px left of every other icon in the header. Measured, not guessed. For the
       default (all bars equal) this changes nothing — the box is the bar width either way. */
    padding-block: 0;
    padding-inline: max(0px, calc((var(--nav-toggle-size) - var(--nav-toggle-bar-w)) / 2));
    background: none; border: 0; color: inherit; cursor: pointer;
}
[data-mobile-menu-toggle] > span {
    display: block;
    width: var(--nav-toggle-bar-w);
    height: var(--nav-toggle-bar-h);
    border-radius: var(--nav-toggle-radius);
    background: var(--nav-toggle-color);
    transition: transform .25s ease, opacity .2s ease, width .25s ease;
}
[data-mobile-menu-toggle][aria-expanded="true"] > span:nth-child(1) { transform: translateY(calc(var(--nav-toggle-bar-h) + var(--nav-toggle-gap))) rotate(45deg); }
[data-mobile-menu-toggle][aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
[data-mobile-menu-toggle][aria-expanded="true"] > span:nth-child(3) { transform: translateY(calc(-1 * (var(--nav-toggle-bar-h) + var(--nav-toggle-gap)))) rotate(-45deg); }

/* Variants, selected by DATA ATTRIBUTE so a bespoke header opts in without new CSS —
   the same contract the drawer itself uses. Both are shapes, not values, which is why
   they are variants rather than knobs (07-standards/theme-knobs.md §2). */

/* two — drops the middle bar; each remaining bar travels HALF the distance. */
[data-mobile-menu-toggle][data-nav-toggle="two"] > span:nth-child(3) { display: none; }
[data-mobile-menu-toggle][data-nav-toggle="two"][aria-expanded="true"] > span:nth-child(1) { transform: translateY(calc((var(--nav-toggle-bar-h) + var(--nav-toggle-gap)) / 2)) rotate(45deg); }
/* the 3-bar rule above hides the middle bar; this variant NEEDS it, so put it back.
   (Caught by eye, not by measurement: both arms measured dead centre while the icon
   still drew a single stroke, because opacity is not position.) */
[data-mobile-menu-toggle][data-nav-toggle="two"][aria-expanded="true"] > span:nth-child(2) { opacity: 1; transform: translateY(calc(-1 * (var(--nav-toggle-bar-h) + var(--nav-toggle-gap)) / 2)) rotate(-45deg); }

/* stagger — uneven bar widths that square up on open. Ragged edge follows
   --nav-toggle-align, so it reads left- or right-aligned rather than centred. */
[data-mobile-menu-toggle][data-nav-toggle="stagger"] { align-items: var(--nav-toggle-align, flex-start); }
[data-mobile-menu-toggle][data-nav-toggle="stagger"] > span:nth-child(2) { width: calc(var(--nav-toggle-bar-w) * .68); }
[data-mobile-menu-toggle][data-nav-toggle="stagger"] > span:nth-child(3) { width: calc(var(--nav-toggle-bar-w) * .84); }
[data-mobile-menu-toggle][data-nav-toggle="stagger"][aria-expanded="true"] > span { width: var(--nav-toggle-bar-w); }

@media (max-width: 768px) {
    [data-mobile-menu-toggle] { display: inline-flex; }
    [data-mobile-menu] {
        position: fixed; inset: 0; z-index: 1001;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: var(--space-lg); padding: var(--space-xxl) var(--space-lg);
        /* Solid brand fallback — NOT --nav-bg, which is often transparent on a
           transparent-over-hero header and would make the whole drawer invisible. */
        background: var(--mobile-menu-bg, var(--color-1));
        color: var(--mobile-menu-fg, var(--color-surface));
        transform: translateX(100%); transition: transform .3s ease; overflow-y: auto;
    }
    [data-mobile-menu].is-open { transform: translateX(0); }
    [data-mobile-menu] ul { flex-direction: column; align-items: center; gap: var(--space-md); width: 100%; margin: 0; padding: 0; list-style: none; }
    [data-mobile-menu] a { font-size: var(--text-lg); color: var(--mobile-menu-fg, var(--color-surface)); }
    body.mobile-menu-open { overflow: hidden; }
    /* When the drawer is open the hamburger→X sits OVER the drawer — force it to the
       drawer's fg so it's always visible even if the header's own color is dark/transparent. */
    [data-mobile-menu-toggle][aria-expanded="true"] { color: var(--mobile-menu-fg, var(--color-surface)); }
}

/* ── WP admin-bar offset — LOCKED (FIX 80: generalized from 3 hardcoded selectors + a
   duplicated 782px override block into ONE custom property, so NEW fixed chrome is
   covered automatically instead of needing to be added to this rule by name every time —
   a pre-header added 2026-07-29 was never added here and slid under the bar). The 32px
   admin bar (46px ≤782px) is fixed to the viewport top and only shown to logged-in users.
   WordPress shifts NORMAL-flow content for it, but NOT position:fixed/sticky/absolute
   chrome — so any top-anchored fixed element (header, pre-header, announcement bar, ...)
   renders UNDER the bar for a logged-in visitor unless its OWN `top` consumes
   --wp-adminbar-offset. The property only EXISTS under body.admin-bar, so
   `var(--wp-adminbar-offset, 0px)` correctly falls back to 0 for the far-more-common
   logged-out visitor — which is exactly why this bug class is invisible without an admin
   session. Any bespoke top-anchored fixed component MUST write its own `top` as
   `calc(<its own stacking offset — 0, or a sibling chrome element's height> +
   var(--wp-adminbar-offset, 0px))` so it stacks additively instead of one fixed element's
   hardcoded top clobbering another's — see admin-rulebook.js "FIXED CHROME". ── */
body.admin-bar { --wp-adminbar-offset: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --wp-adminbar-offset: 46px; }
}
body.admin-bar [data-nav-sticky],
body.admin-bar [data-nav-overlay],
body.admin-bar .site-header--overlay { top: var(--wp-adminbar-offset); }

/* ── Standard copyright line (footer.php, every site — themeable) ── */
.layerly-copyright { background: var(--footer-copyright-bg, var(--color-2)); color: var(--footer-copyright-fg, var(--color-surface)); text-align: center; padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); }
.layerly-copyright__line { margin: 0; }
.layerly-copyright__sep { opacity: .5; margin: 0 .35em; }
/* FIX 47 (Alexander, 2026-07-24) — the "Made by Layerly" credit is NEVER underlined, on
   every site we build. Two selectors on purpose: `.layerly-copyright` covers footer.php's
   fallback strip, `.layerly-copyright__line` covers a BESPOKE footer template-part that calls
   layerly_footer_credit() directly — the case that shipped underlined on Aveya, because the
   theme's other `text-decoration:none` rule is scoped to `.site-footer`, which bespoke
   footers don't have. Underline returns on hover/focus so the link stays discoverable and
   keyboard-visible (a resting state with neither underline nor colour contrast would fail
   WCAG 1.4.1). */
.layerly-copyright a,
.layerly-copyright__line a { color: inherit; text-decoration: none; }
.layerly-copyright a:hover,
.layerly-copyright a:focus-visible,
.layerly-copyright__line a:hover,
.layerly-copyright__line a:focus-visible { text-decoration: underline; }

/* ── Component: footers/columns ── */
.footer {
    --footer-bg: var(--color-2);
    --footer-fg: var(--color-surface);
    --footer-heading: var(--color-surface);
    --footer-link: rgba(255,255,255,.7);
    --footer-link-hover: var(--color-surface);
    --footer-pad-y: var(--space-xxl);
    --footer-cols: 4;
    background: var(--footer-bg);
    color: var(--footer-fg);
}
.footer__inner {
    display: grid; gap: var(--space-xl);
    grid-template-columns: 1.4fr repeat(var(--footer-cols), 1fr);
    padding-block: var(--footer-pad-y);
}
.footer__logo { display: inline-flex; text-decoration: none; color: inherit; }
.footer__logo-img { max-height: 44px; width: auto; }
.footer__logo-text { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); }
.footer__tagline { color: var(--footer-link); margin-top: var(--space-md); max-width: 32ch; }
.footer__columns { display: contents; }
.footer__col-heading { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--footer-heading); margin-bottom: var(--space-md); }
.footer__col-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.footer__col-list a, .footer__legal-list a { color: var(--footer-link); text-decoration: none; }
.footer__col-list a:hover, .footer__legal-list a:hover { color: var(--footer-link-hover); }
.footer__legal { border-top: 1px solid rgba(255,255,255,.12); }
.footer__legal-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; padding-block: var(--space-lg); }
.footer__copyright { margin: 0; color: var(--footer-link); font-size: var(--text-sm); }
.footer__legal-list { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
@media (max-width: 768px) {
    .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .footer__inner { grid-template-columns: 1fr; }
}

/* ── Field primitives (fields/*) ──
 * The `.form*` rules that used to sit here moved into the bridge plugin as
 * assets/layerly-forms.css (LAYERLY-FORMS-PLAN.md §11, bridge 4.85.0), because the plugin is
 * now what RENDERS the form — including on sites that have no Layerly theme under it. They are
 * not duplicated here.
 *
 * The field primitives stay: they style fields anywhere on a Layerly site, not only inside a
 * form, and they read the `--field-*` knobs the moved `.form` rule declares. A site whose bridge
 * predates 4.85.0 gets the moved rules back from assets/css/forms-fallback.css, enqueued by
 * functions.php under the same function_exists( 'layerly_render_form' ) check the template uses.
 */
.field--full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: var(--space-xs); }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-med); color: var(--label-color); }
.field__req { color: var(--color-error); }
.field__input {
    width: 100%; box-sizing: border-box;
    background: var(--field-bg); color: var(--field-fg);
    border: 1px solid var(--field-border); border-radius: var(--field-radius);
    padding: var(--field-pad); font: inherit; font-size: var(--text-md);
    transition: border-color .15s, box-shadow .15s;
}
.field__input:focus-visible { outline: none; border-color: var(--field-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-focus) 25%, transparent); }
.field__textarea { resize: vertical; min-height: 120px; }
.field--checkbox .field__check { flex-direction: row; align-items: center; gap: var(--space-sm); cursor: pointer; }
.field__checkbox { width: 18px; height: 18px; accent-color: var(--field-focus); }

/* ── Component: heroes/full-bg (knob-driven) ── */
.hero--full-bg {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--hero-min-h);
  padding-block: var(--hero-pad-y);
  background: var(--section-bg-color, var(--hero-bg));
  color: var(--hero-fg);
  overflow: hidden;
  --hero-bg: var(--color-5);
  --hero-fg: var(--color-1);
  --hero-overlay: transparent;
  --hero-min-h: 840px;
  --hero-align: left;
  --hero-pad-y: 0;
}
.hero--full-bg .hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero--full-bg .hero__bg-img { width: 100%; height: 100%; object-fit: cover; }
.hero--full-bg .hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(53deg, var(--color-5) 0%, rgba(2, 24, 58, 0.25) 100%);
}
.hero--full-bg .hero__inner {
  position: relative;
  z-index: 2;
  text-align: var(--hero-align);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 840px;
  padding: 160px var(--gutter) 50px;
  gap: var(--space-lg);
  max-width: 1440px;
}
.hero--full-bg .hero__title {
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-med);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-1);
  max-width: 580px;
  margin: 0;
}
.hero--full-bg .hero__subtitle {
  opacity: .92;
  margin-bottom: var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-reg);
  line-height: 27px;
  color: var(--color-1);
  max-width: 479px;
  margin: 0;
}
.hero--full-bg .hero__eyebrow {
  font-family: var(--font-utility);
  font-size: var(--text-xs);
  font-weight: var(--weight-med);
  line-height: 16px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-accent);
  width: 120px;
  margin: 0;
}
.hero--full-bg .hero__ctas {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}
/* Center alignment: set --hero-align:center; the inner is centered + content too. */
.hero--full-bg[style*="--hero-align: center"] .hero__inner { margin-inline: auto; }
.hero--full-bg[style*="--hero-align: center"] .hero__subtitle { margin-inline: auto; }
.hero--full-bg[style*="--hero-align: center"] .hero__ctas { justify-content: center; }
@media (max-width: 768px) {
    .hero--full-bg { --hero-min-h: 60vh; }
    .hero--full-bg .hero__title { font-size: var(--text-h2); }
}

/* ── chrome/topbar (E2c, 2026-08-11) ──────────────────────────────────────────────
   The utility bar above the site header. Renders only when topbar_enabled='1', so
   these rules are inert on every site that hasn't switched it on.

   TWO MODES, because a top bar means different things depending on the header:
     • default — a solid strip in normal document flow, above the header.
     • .topbar--over-hero — the site's header draws OVER the hero
       (.site-header--overlay / nav_overlay). A solid strip there would push the hero
       down and break the design, so the bar goes transparent and sits over the hero
       with the header. This is the D10/D11 bespoke-chrome failure class, handled once
       here instead of per site.

   The over-hero mode is position:fixed, so per the LOCKED admin-bar block above it
   writes its own `top` additively as calc(0px + var(--wp-adminbar-offset, 0px)) —
   it is the TOPMOST fixed element, hence 0px, and the sticky header below it offsets
   by --topbar-height in turn. */
.topbar {
  --topbar-bg:     var(--color-1);
  --topbar-fg:     var(--color-surface);
  --topbar-height: 36px;
  --topbar-size:   var(--text-sm);
  --topbar-gap:    var(--space-md);

  background: var(--topbar-bg);
  color: var(--topbar-fg);
  font-size: var(--topbar-size);
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--topbar-gap);
  width: 100%;
  min-height: var(--topbar-height);
}
.topbar__text { margin: 0; margin-right: auto; }
.topbar__phone,
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--topbar-gap) / 3);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.topbar__phone:hover,
.topbar__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar__icon { width: 1em; height: 1em; flex: none; }

/* Over-hero: transparent, fixed above the overlay header, stacked above it. */
.topbar--over-hero {
  background: transparent;
  position: fixed;
  top: calc(0px + var(--wp-adminbar-offset, 0px));
  left: 0;
  right: 0;
  z-index: 101;   /* one above the overlay header's own stacking */
}
.topbar--over-hero + .site-header,
.topbar--over-hero ~ [data-nav-sticky] { top: calc(var(--topbar-height) + var(--wp-adminbar-offset, 0px)); }

/* On phones the bar earns its space only if it is short. Text drops first, the
   phone number — the reason most sites want this bar — stays. */
@media (max-width: 640px) {
  .topbar__text { display: none; }
  .topbar__inner { justify-content: center; }
}

/* ── Prose blocks (layerly_prose, E2e) ──
   When body/description copy carries real structure (multi-paragraph, lists),
   layerly_prose wraps it in a div carrying the part's own class + .is-prose;
   these rules give the inner paragraphs and lists their rhythm. Single-
   paragraph copy never enters this path — it renders exactly as before. */
.is-prose > p { margin: 0 0 var(--space-md); }
.is-prose > p:last-child { margin-bottom: 0; }
.is-prose ul,
.is-prose ol { margin: 0 0 var(--space-md); padding-left: 1.25em; }
.is-prose ul:last-child,
.is-prose ol:last-child { margin-bottom: 0; }
.is-prose li { margin: 0 0 var(--space-xs); }
.is-prose li > ul,
.is-prose li > ol { margin: var(--space-xs) 0 0; }

/* ── Popup — modal (template-parts/popups/modal.php) ──
   A native <dialog>, so the browser supplies the top layer and ::backdrop. There is no
   z-index here on purpose: the top layer sits above every stacking context on the page,
   which is precisely the bug hand-rolled modals hit behind sticky headers.
   The entrance animation is opt-in via prefers-reduced-motion, never the popup itself. */
.popup {
    max-width: min(var(--popup-max-w, 560px), calc(100vw - 2 * var(--space-lg)));
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--popup-radius, var(--radius-lg));
    background: var(--popup-bg, var(--color-surface));
    color: var(--popup-fg, var(--color-text));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    overflow: hidden;
}
.popup::backdrop { background: var(--popup-backdrop, rgba(0, 0, 0, .55)); }
.popup__inner { position: relative; }
.popup__media { margin: 0; line-height: 0; }
.popup__image { width: 100%; height: auto; display: block; }
.popup__content { padding: var(--popup-pad, var(--space-xl)); }
.popup__heading { margin: 0 0 var(--space-md); }
.popup__body { margin: 0 0 var(--space-lg); }
.popup__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); }
/* The close control sits above the media, so it needs its own contrast rather than
   inheriting the surface colour — an X over a photo is invisible often enough to matter. */
.popup__close {
    position: absolute;
    top: var(--space-md);
    inset-inline-end: var(--space-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    cursor: pointer;
}
.popup__close:hover { filter: brightness(.94); }
.popup__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
    .popup[open] { animation: layerly-popup-in .18s ease-out; }
    @keyframes layerly-popup-in {
        from { opacity: 0; transform: translateY(8px) scale(.98); }
        to   { opacity: 1; transform: none; }
    }
}

/* ── Social — Facebook Page feed (template-parts/social/facebook-page.php) ──
   Two columns: our copy, then Meta's iframe. The embed column is capped at Meta's own
   500px maximum — the plugin will not render wider, so a wider column would only add
   empty space beside it. Below the breakpoint the columns stack and the embed centres. */
/* The embed column MUST be definite. With `auto` it sizes to its content — and its content
   is an iframe whose width main.js sets from the column, so the two size each other and
   settle at the 180px floor. Caught in the harness before this shipped: the column measured
   exactly 180px on a 1280px viewport. minmax() breaks the loop by giving the column a real
   width first, which is then what the script measures. */
.fb-feed__inner {
    display: grid;
    grid-template-columns: 1fr minmax(0, var(--fb-feed-embed-max-w, 500px));
    gap: var(--fb-feed-gap, var(--space-xl));
    align-items: start;
}
.fb-feed__body { margin: 0 0 var(--space-lg); }
.fb-feed__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.fb-feed__embed {
    width: 100%;
    max-width: var(--fb-feed-embed-max-w, 500px);
    border-radius: var(--fb-feed-radius, var(--radius-md));
    overflow: hidden;
}
/* The iframe has no src until main.js sets one, so it must not collapse to nothing and
   shift the layout when the embed arrives. The inline height from PHP holds the space. */
.fb-feed__iframe { display: block; width: 100%; border: 0; background: var(--color-border); }
.fb-feed__fallback { margin: 0; }
@media (max-width: 860px) {
    .fb-feed__inner { grid-template-columns: 1fr; }
    .fb-feed__embed { justify-self: center; }
}


/* Layerly — Phase 4: bespoke NorthStar header (nav/northstar) + footer (footers/northstar) to Figma 2232:1463 / 2232:1366 — 2026-09-14T19:14:34.028Z */
.nav--northstar {
  --nav-bg: var(--color-5);
  --nav-fg: var(--color-1);
  --nav-height: 80px;
  --nav-gap: 40px;
  --nav-link-hover: var(--color-3);
  --nav-plate-w: 153px;
  --nav-plate-h: 136px;
  --mobile-menu-bg: var(--color-5);
  --mobile-menu-fg: var(--color-1);
  position: relative;
  z-index: 100;
  background: transparent;
  color: var(--nav-fg);
}

.nav--northstar .nav__utility {
  background: var(--color-2);
  color: var(--color-1);
}

.nav--northstar .nav__utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 30px;
  padding-block: 4px;
}

.nav--northstar .nav__claims {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.nav--northstar .nav__claim {
  font-family: var(--font-2);
  font-size: 12px;
  line-height: 14px;
  font-weight: var(--weight-med);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.nav--northstar .nav__claims-sep {
  font-family: var(--font-1);
  font-size: 15px;
  line-height: 22px;
  color: var(--color-3);
}

.nav--northstar .nav__phone {
  font-family: var(--font-1);
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--weight-bold);
  color: var(--color-1);
  text-decoration: none;
  white-space: nowrap;
}

.nav--northstar .nav__phone:hover {
  color: var(--color-3);
}

.nav--northstar .nav__bar {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--color-3);
  box-shadow: 0 16px 20px color-mix(in srgb, var(--color-5) 10%, transparent);
}

.nav--northstar .nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nav-gap);
  min-height: var(--nav-height);
}

.nav--northstar .nav__menu {
  gap: var(--nav-gap);
}

.nav--northstar .nav__list {
  gap: var(--nav-gap);
}

.nav--northstar .nav__list a {
  font-family: var(--font-2);
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--weight-med);
  letter-spacing: 0.3px;
  color: var(--color-1);
}

.nav--northstar .nav__list a:hover {
  color: var(--color-3);
}

.nav--northstar .nav__list a:focus-visible, .nav--northstar .nav__phone:focus-visible, .nav--northstar .nav__logo:focus-visible {
  outline: 2px solid var(--color-3);
  outline-offset: 3px;
}

.nav--northstar .nav__logo {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-plate-w);
  height: var(--nav-plate-h);
  padding: 40px 16px 24px;
  background: var(--color-2);
}

.nav--northstar .nav__logo-img {
  display: block;
  width: 121px;
  height: auto;
  max-height: none;
}

.nav--northstar .nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}

.nav--northstar .nav__cta {
  font-family: var(--font-2);
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--weight-med);
  letter-spacing: 0.3px;
  padding: 16px 24px;
  border-radius: 0;
  background: var(--color-3);
  color: var(--color-2);
  border: 0;
  white-space: nowrap;
}

.nav--northstar .nav__cta:hover {
  background: color-mix(in srgb, var(--color-3) 85%, var(--color-2));
  color: var(--color-2);
}

.nav--northstar .nav__cta--drawer {
  display: none;
}

.footer--northstar {
  --footer-copyright-bg: transparent;
  --footer-copyright-fg: var(--color-1);
  background: var(--color-5);
  color: var(--color-1);
}

.footer--northstar .footer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-block: 40px 24px;
}

.footer--northstar .footer__row {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}

.footer--northstar .footer__brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  width: 263px;
  flex: 0 0 auto;
}

.footer--northstar .footer__brand-line {
  margin: 0;
  font-family: var(--font-1);
  font-size: 15px;
  line-height: 21px;
  color: var(--color-1);
}

.footer--northstar .footer__cta {
  align-self: flex-start;
  font-family: var(--font-2);
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--weight-med);
  letter-spacing: 0.3px;
  padding: 16px 24px;
  border-radius: 0;
  border: 0;
  background: var(--color-3);
  color: var(--color-2);
}

.footer--northstar .footer__cta:hover {
  background: color-mix(in srgb, var(--color-3) 85%, var(--color-2));
  color: var(--color-2);
}

.footer--northstar .footer__columns {
  display: flex;
  gap: 80px;
}

.footer--northstar .footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer--northstar .footer__col-heading {
  margin: 0;
  font-family: var(--font-1);
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--weight-bold);
  color: var(--color-1);
}

.footer--northstar .footer__col-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer--northstar .footer__col-list a, .footer--northstar .footer__region {
  font-family: var(--font-2);
  font-size: 13px;
  line-height: 17px;
  letter-spacing: 0.26px;
  color: var(--color-1);
  text-decoration: none;
}

.footer--northstar .footer__col-list a:hover {
  color: var(--color-3);
}

.footer--northstar .footer__col-list a:focus-visible, .footer--northstar .footer__social:focus-visible, .footer--northstar .footer__logo:focus-visible, .footer--northstar .footer__cta:focus-visible {
  outline: 2px solid var(--color-3);
  outline-offset: 3px;
}

.footer--northstar .footer__social {
  display: inline-flex;
  padding-top: 8px;
  color: var(--color-1);
}

.footer--northstar .footer__social:hover {
  color: var(--color-3);
}

.footer--northstar .footer__rule {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: color-mix(in srgb, var(--color-3) 45%, transparent);
}

.footer--northstar .footer__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  height: 92px;
  padding: 16px 12px;
  background: var(--color-2);
  flex: 0 0 auto;
}

.footer--northstar .footer__logo-img {
  display: block;
  width: 101px;
  height: auto;
}

.footer--northstar .footer__legal-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  width: 344px;
}

.footer--northstar .footer__disclaimer {
  margin: 0;
  font-family: var(--font-1);
  font-size: 15px;
  line-height: 21px;
  color: var(--color-1);
}

.footer--northstar .footer__credit, .footer--northstar .footer__copyright {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: var(--font-1);
  font-size: 13px;
  line-height: 19px;
  color: var(--color-1);
  text-align: left;
}

.footer--northstar .footer__credit a, .footer--northstar .footer__copyright a {
  color: var(--color-3);
  text-decoration: none;
}

/* Chrome — responsive. MUST stay inside @media (write_css flattens at-rules). */
@media (max-width: 900px) {
  .footer--northstar .footer__columns { flex-wrap: wrap; gap: 40px; }
}
@media (max-width: 768px) {
  .nav--northstar { --nav-height: 64px; --nav-plate-w: 104px; --nav-plate-h: 92px; }
  .nav--northstar .nav__logo {
    position: static;
    left: auto;
    transform: none;
    order: 2;
    padding: 12px;
    margin-inline: auto;
  }
  .nav--northstar .nav__logo-img { width: 76px; }
  .nav--northstar [data-mobile-menu-toggle] { order: 1; }
  .nav--northstar .nav__actions { display: none; }
  .nav--northstar .nav__cta--drawer { display: inline-flex; }
  .nav--northstar .nav__claims { display: none; }
  .nav--northstar .nav__utility-inner { justify-content: center; }
  .footer--northstar .footer__row { flex-direction: column; gap: 40px; }
  .footer--northstar .footer__brand,
  .footer--northstar .footer__legal-block { width: 100%; }
  .footer--northstar .footer__columns { flex-direction: column; gap: 24px; }
}


/* Layerly — Homepage sections — hero, intro, start-here, four-questions (Figma 2147:283) — 2026-09-14T19:38:22.951Z */
.intro-split--image-right {
  padding: 50px 0 0;
}

.intro-split--image-right .intro-split__inner {
  display: grid;
  grid-template-columns: 588px 560px;
  gap: 80px;
  align-items: start;
  max-width: 1440px;
  padding-inline: var(--gutter);
}

.intro-split--image-right .intro-split__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.intro-split--image-right .intro-split__body p {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-reg);
  line-height: 27px;
  color: var(--color-1);
  margin: 0;
}

.intro-split--image-right .intro-split__body p:not(:last-child) {
  position: relative;
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  line-height: 27px;
  padding: 0 0 var(--space-md) 22px;
  border-bottom: 1px solid var(--color-accent);
}

.intro-split--image-right .intro-split__body p:not(:last-child)::before {
  content: "\2726";
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-med);
  line-height: 22px;
  color: var(--color-accent);
}

.intro-split--image-right .intro-split__media img {
  width: 100%;
  height: 501px;
  object-fit: cover;
  display: block;
}

.start-here {
  padding-block: 80px;
}

.start-here__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-block);
  max-width: 1440px;
  padding-inline: var(--gutter);
}

.start-here__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.start-here__eyebrow, .four-questions__eyebrow, .retained__eyebrow {
  font-family: var(--font-utility);
  font-size: var(--text-xs);
  font-weight: var(--weight-med);
  line-height: 16px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}

.start-here__rule, .four-questions__rule, .stats__rule, .retained__rule, .engagements__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
}

.start-here__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-med);
  line-height: 52px;
  letter-spacing: var(--tracking-display);
  color: var(--color-1);
  margin: 0;
}

.start-here__subheading {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-reg);
  line-height: 27px;
  color: var(--color-1);
  max-width: 622px;
  margin: 0 0 var(--space-lg);
}

.start-here__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--color-accent);
}

.start-here__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.start-here__card + .start-here__card {
  border-left: 1px solid var(--color-accent);
}

.start-here__card-title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: var(--weight-reg);
  line-height: 43px;
  letter-spacing: -0.19px;
  color: var(--color-1);
  margin: 0;
  padding: var(--space-lg) 20px;
}

.start-here__card-quote {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-reg);
  line-height: 25px;
  color: var(--color-1);
  margin: 0;
  padding-inline: 20px;
}

.start-here__card-media {
  margin-top: auto;
}

.start-here__card-media img, .start-here__card-media .layerly-placeholder {
  display: block;
  width: 100%;
  height: 288px;
  object-fit: cover;
}

.start-here__card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: var(--space-md) 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-med);
  line-height: 28px;
  color: var(--color-1);
  text-decoration: none;
  border-top: 1px solid var(--color-accent);
}

.start-here__card-link:hover, .start-here__card-link:focus-visible {
  background: var(--color-accent);
  color: var(--color-2);
}

.four-questions {
  padding-block: 80px;
}

.four-questions__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-block);
  max-width: 1440px;
  padding-inline: var(--gutter);
}

.four-questions__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.four-questions__heading p {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-med);
  line-height: 52px;
  letter-spacing: var(--tracking-display);
  color: var(--color-1);
  max-width: 584px;
  margin: 0;
}

.four-questions__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 120px;
  row-gap: var(--space-block);
}

.four-questions__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-accent);
}

.four-questions__question {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-med);
  line-height: 29px;
  color: var(--color-accent);
  margin: 0;
}

.four-questions__answer {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-reg);
  line-height: 25px;
  color: var(--color-1);
  margin: 0;
}


/* Layerly — Homepage sections — stats, retained, engagements, testimonials, faq, cta (Figma 2147:283) — 2026-09-14T19:39:29.972Z */
.stats {
  padding-block: 80px;
}

.stats__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 1440px;
  padding-inline: var(--gutter);
}

.stats__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.stats__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-med);
  line-height: 52px;
  letter-spacing: var(--tracking-display);
  color: var(--color-2);
  max-width: 423px;
  margin: 0;
}

.stats__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.stats__subheading {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-reg);
  line-height: 27px;
  color: var(--color-2);
  margin: 0;
}

.stats__figures {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gutter);
  margin: 0;
}

.stats__figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.stats__figure-value {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: var(--weight-reg);
  line-height: 43px;
  letter-spacing: -0.19px;
  color: var(--color-2);
  margin: 0;
}

.stats__figure-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-reg);
  line-height: 22px;
  color: var(--color-2);
  margin: 0;
}

.stats__footnote {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-reg);
  line-height: 22px;
  color: var(--color-2);
  margin: 0;
}

.retained {
  padding: 50px 0 80px;
}

.retained__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 1440px;
  padding-inline: var(--gutter);
}

.retained__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.retained__heading p {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-med);
  line-height: 52px;
  letter-spacing: var(--tracking-display);
  color: var(--color-2);
  max-width: 470px;
  margin: 0;
}

.retained__strip {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-accent);
  color: var(--color-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-med);
  line-height: 29px;
  padding: var(--space-md) var(--space-lg);
  margin: 0;
}

.retained__split {
  display: grid;
  grid-template-columns: 560px 560px;
  gap: 80px;
  align-items: start;
}

.retained__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.retained__body p {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-reg);
  line-height: 25px;
  color: var(--color-2);
  margin: 0;
}

.retained__emphasis {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-reg);
  line-height: 27px;
  margin: calc(var(--space-xl) * -1 + var(--space-sm)) 0 0;
  color: var(--color-accent-ink);
}

.retained__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.retained__point {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-med);
  line-height: 29px;
  color: var(--color-2);
}

.retained__point::before {
  content: "\2726";
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--text-sm);
  line-height: 29px;
  color: var(--color-accent);
}

.retained__note p {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-reg);
  line-height: 25px;
  color: var(--color-2);
  max-width: 482px;
  margin: 0;
}

.retained__cta {
  align-self: flex-start;
}

.retained__media img, .retained__media .layerly-placeholder {
  display: block;
  width: 100%;
  height: 560px;
  object-fit: cover;
}

.engagements {
  position: relative;
  padding-block: 80px;
  overflow: hidden;
}

.engagements__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 1440px;
  padding-inline: var(--gutter);
}

.engagements__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.engagements__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-med);
  line-height: 52px;
  letter-spacing: var(--tracking-display);
  color: var(--color-1);
  max-width: 612px;
  margin: 0;
}

.engagements__lead p {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  line-height: 25px;
  color: var(--color-1);
  max-width: 590px;
  margin: 0;
}

.engagements__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-lg);
}

.engagements__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 120px;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-accent);
  text-decoration: none;
}

.engagements__card:hover, .engagements__card:focus-visible {
  background: var(--color-accent);
}

.engagements__card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-reg);
  line-height: 27px;
  color: var(--color-1);
}

.engagements__card:hover .engagements__card-title, .engagements__card:focus-visible .engagements__card-title {
  color: var(--color-2);
}

.engagements__card-arrow {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-med);
  line-height: 29px;
  color: var(--color-accent);
}

.engagements__card:hover .engagements__card-arrow, .engagements__card:focus-visible .engagements__card-arrow {
  color: var(--color-2);
}

.engagements__note p {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-reg);
  line-height: 25px;
  color: var(--color-1);
  max-width: 570px;
  margin: 0;
}

.engagements__ctas {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding-top: var(--space-sm);
}

.engagements__cta-text {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-med);
  line-height: 28px;
  color: var(--color-accent);
}

.disclosures--accordion {
  padding-block: 80px;
  --accordion-border: var(--color-accent);
  --accordion-q-size: var(--text-xl);
}

/* Layerly — homepage sections, responsive.
   NOTE: written with edit_file, not write_css: write_css strips @media
   wrappers and promotes the rules to global, collapsing every desktop grid. */
@media (max-width: 1024px) {
  .start-here__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .start-here__card + .start-here__card {
    border-left: 0;
  }
  .start-here__card:nth-child(even) {
    border-left: 1px solid var(--color-accent);
  }
  .start-here__card:nth-child(n + 3) {
    border-top: 1px solid var(--color-accent);
  }
  .engagements__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats__figures {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--space-xl);
  }
  .intro-split--image-right .intro-split__inner,
  .retained__split {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .four-questions__grid {
    column-gap: var(--space-xxl);
  }
}

@media (max-width: 767px) {
  .hero--full-bg .hero__inner {
    min-height: 0;
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-xxl);
  }
  .hero--full-bg .hero__title,
  .start-here__heading,
  .four-questions__heading p,
  .stats__heading,
  .retained__heading p,
  .engagements__heading,
  .cta-banner__heading {
    line-height: var(--leading-heading);
  }
  .start-here__list,
  .engagements__list,
  .four-questions__grid {
    grid-template-columns: 1fr;
  }
  .start-here__card + .start-here__card,
  .start-here__card:nth-child(even) {
    border-left: 0;
  }
  .start-here__card + .start-here__card {
    border-top: 1px solid var(--color-accent);
  }
  .stats__figures {
    grid-template-columns: repeat(2, 1fr);
  }
  .retained__media img,
  .retained__media .layerly-placeholder,
  .intro-split--image-right .intro-split__media img {
    height: 360px;
  }
  .cta-banner .cta-banner__inner {
    min-height: 0;
    padding-block: var(--space-xxl);
  }
}


/* Layerly — Hero secondary button: white outline/label per Figma (was navy-on-navy, invisible) — 2026-09-14T19:41:19.041Z */
.hero--full-bg .btn--ghost {
  border-color: var(--color-1);
  color: var(--color-1);
  background: transparent;
}

.hero--full-bg .btn--ghost:hover, .hero--full-bg .btn--ghost:focus-visible {
  background: var(--color-1);
  color: var(--color-2);
  border-color: var(--color-1);
}

.hero--full-bg .btn--primary {
  background: var(--color-accent);
  color: var(--color-2);
  border-color: var(--color-accent);
}


/* Layerly — Fix prose selectors (layerly_prose renders single-para bare), gold contrast on light grounds, CTA height — 2026-09-14T19:43:25.113Z */
.four-questions__heading p, .four-questions__heading.is-prose p {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-med);
  line-height: 52px;
  letter-spacing: var(--tracking-display);
  color: var(--color-1);
  max-width: 584px;
  margin: 0;
}

.retained__heading p, .retained__heading.is-prose p {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-med);
  line-height: 52px;
  letter-spacing: var(--tracking-display);
  color: var(--color-2);
  max-width: 470px;
  margin: 0;
}

.retained__body, .retained__body p {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-reg);
  line-height: 25px;
  color: var(--color-2);
  margin: 0;
}

.retained__note, .retained__note p {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-reg);
  line-height: 25px;
  color: var(--color-2);
  max-width: 482px;
  margin: 0;
}

.engagements__lead, .engagements__lead p {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  line-height: 25px;
  color: var(--color-1);
  max-width: 590px;
  margin: 0;
}

.engagements__note, .engagements__note p {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-reg);
  line-height: 25px;
  color: var(--color-1);
  max-width: 570px;
  margin: 0;
}

.retained__eyebrow {
  color: var(--color-accent-ink);
}


/* Layerly — FAQ + stats section headers: Figma eyebrow type/colour (accessible gold on white) — 2026-09-14T19:43:43.698Z */
.disclosures--accordion .eyebrow {
  font-family: var(--font-utility);
  font-size: var(--text-xs);
  font-weight: var(--weight-med);
  line-height: 16px;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-accent-ink);
}

.disclosures--accordion .section-header, .disclosures--accordion .section-header__inner {
  text-align: left;
}


/* Layerly — Phase 6: CTA band photo + Figma gradient overlay; compass watermark placement — 2026-09-14T20:04:14.884Z */
section.cta-banner {
  background: linear-gradient(53deg, var(--color-5) 0%, rgba(2, 24, 58, 0.25) 100%),
    var(--section-bg-image, none) center / cover no-repeat,
    var(--section-bg-color, var(--color-5));
}

.engagements__watermark {
  position: absolute;
  top: -80px;
  right: -390px;
  width: 900px;
  height: 900px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.1;
}

.engagements__watermark-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}