/*
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-r27-6980af6
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 {
    /* Numbered colors — count varies per site. Document in LAYERLY.md. */
    --color-1: #6366F1;   /* Default brand primary (override per site) */
    --color-2: #1E293B;   /* Default brand secondary */
    --color-3: #F8FAFC;   /* Default page background */
    --color-4: #FFFFFF;   /* Default surface */
    --color-5: rgba(0,0,0,.08);
    --color-6: #0EA5E9;   /* Default brand accent */
    --color-7: #FACC15;   /* Default brand highlight */

    /* Functional color aliases — fixed vocabulary, mapped per site. */
    --color-primary:    var(--color-1);
    --color-text:       var(--color-2);
    --color-text-muted: rgba(30,41,59,.65);
    --color-bg:         var(--color-3);
    --color-surface:    var(--color-4);
    --color-border:     var(--color-5);
    --color-success:    #059669;
    --color-error:      #DC2626;
    --color-warning:    #F59E0B;
    --color-accent:     var(--color-6);
    --color-highlight:  var(--color-7);

    /* Numbered fonts — add --font-N as needed. */
    --font-1: system-ui, -apple-system, sans-serif;
    --font-2: system-ui, -apple-system, sans-serif;
    --font-3: system-ui, -apple-system, sans-serif;   /* subheading / accent */

    /* Functional font aliases — fixed vocabulary. */
    --font-display:    var(--font-1);
    --font-subheading: var(--font-3);
    --font-body:       var(--font-2);

    /* Spacing scale — t-shirt sized, 8-pt grid. */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    /* xl/xxl are the block + SECTION spacing — fluid so sections aren't 80/120px tall on a
       phone (the recurring "super tall section" bug). clamp max = the old fixed value, so
       desktop is unchanged; it scales down toward the min on small screens. */
    --space-xl:  clamp(28px, 4vw, 40px);
    --space-xxl: clamp(48px, 7vw, 80px);

    /* Type scale — t-shirt sized. */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 28px;
    /* Headings scale FLUIDLY (clamp max = the old fixed value, so desktop is unchanged) —
       replaces the hard 768px breakpoint below, which no longer jumps at one width. */
    --text-h3: clamp(22px, 3vw, 32px);
    --text-h2: clamp(30px, 4vw, 44px);
    --text-h1: clamp(38px, 5.5vw, 64px);

    /* Font weights — t-shirt sized. */
    --weight-reg:  400;
    --weight-med:  500;
    --weight-bold: 700;

    /* Radii. */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-full: 9999px;

    /* Shadows. */
    --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);

    /* Layout. */
    --container-max: 1200px;

    /* Breakpoints (reference only — used in @media). */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
}

/* ════════════════════════════════════════════════════════════════════
   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;
    padding-block: 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); }
.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(--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(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
}
.service-card {
    background: 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 {
    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(--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(--color-surface);
}
.cta-banner .cta-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    padding-block: var(--space-xl);
    flex-wrap: wrap;
}
.cta-banner__heading { color: var(--color-surface); margin: 0 0 var(--space-sm); }
.cta-banner__body { margin: 0; opacity: .9; max-width: 560px; }
.cta-banner__ctas { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.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(--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(--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(--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 { padding-block: var(--space-xxl); }
.tcarousel {
    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(--color-border); }
.accordion__item {
    border-bottom: 1px solid var(--color-border);
}
.accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 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; }
.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(auto-fit, minmax(220px, 1fr));
    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(--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(--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). */
[data-mobile-menu-toggle] { display: none; position: relative; z-index: 1002; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
[data-mobile-menu-toggle] > span { display: block; width: 26px; height: 3px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
[data-mobile-menu-toggle][aria-expanded="true"] > span:nth-child(1) { transform: translateY(9px) 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(-9px) rotate(-45deg); }

@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; }
}

/* ── Component: forms/contact + field primitives ── */
.form {
    --form-gap: var(--space-md);
    --form-cols: 2;
    --field-bg: var(--color-surface);
    --field-fg: var(--color-text);
    --field-border: var(--color-border);
    --field-radius: var(--radius-md);
    --field-pad: var(--space-md);
    --field-focus: var(--color-primary);
    --label-color: var(--color-text);
}
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__fields { display: grid; grid-template-columns: repeat(var(--form-cols), 1fr); gap: var(--form-gap); }
.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); }
.form__submit { margin-top: var(--form-gap); }
.form__status { margin-top: var(--space-sm); font-size: var(--text-sm); min-height: 1.2em; }
.form__status.is-error { color: var(--color-error); }
.form__status.is-success { color: var(--color-success); }
@media (max-width: 600px) {
    .form__fields { grid-template-columns: 1fr; }
}

/* ── Component: heroes/full-bg (knob-driven) ── */
.hero--full-bg {
    --hero-bg: var(--color-1);
    --hero-fg: var(--color-surface);
    --hero-overlay: rgba(0,0,0,.45);
    --hero-min-h: 80vh;
    --hero-pad-y: var(--space-xxl);
    --hero-align: left;
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--hero-min-h);
    padding-block: var(--hero-pad-y);
    /* Consumes --section-bg-color first (F17/B18) — hero_bg_type:color must win
       over this component's own default, not silently lose to it. */
    background: var(--section-bg-color, var(--hero-bg));
    color: var(--hero-fg);
    overflow: hidden;
}
.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; background: var(--hero-overlay); pointer-events: none; }
.hero--full-bg .hero__inner { position: relative; z-index: 2; text-align: var(--hero-align); width: 100%; }
.hero--full-bg .hero__title { color: var(--hero-fg); font-size: var(--text-h1); margin-bottom: var(--space-md); }
.hero--full-bg .hero__subtitle { color: var(--hero-fg); font-size: var(--text-lg); opacity: .92; max-width: 56ch; margin-bottom: var(--space-xl); }
.hero--full-bg .hero__eyebrow { color: var(--hero-fg); }
.hero--full-bg .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); }
/* 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; }


/* Layerly — r26->r27 migration: replay every per-site write — 2026-08-21 19:40:36 */

/* ═══════════════════════════════════════════════════════════════════════════
   REPLAYED PER-SITE EDITS — base theme migration r26 → r27, 2026-08-21
   ═══════════════════════════════════════════════════════════════════════════
   N43: per-site CSS lives in the ACTIVE THEME'S style.css, and installing a new
   base theme unzips straight over it. This site lost 12 writes that way on
   2026-08-12. So this migration was done by hand: style.css was read and backed
   up first, the r26→r27 base delta was diffed, and every per-site divergence is
   replayed HERE rather than edited back into the base block above.

   Replayed as an appended block on purpose. These were originally in-place edits
   inside the base theme's own :root and rules; re-declaring them at the end has
   the identical cascade effect (same specificity, later wins) and leaves the base
   block pristine — so the NEXT migration is a clean diff instead of an
   archaeology exercise.

   Every declaration below was in the live file before the migration. Nothing is
   new, nothing is dropped, and the reasons are carried with them because most of
   them are contrast fixes that look like preferences until you measure them. */

:root {
    --color-1: #2196F3;   /* primary — light blue; the CTA button fill throughout the design */
    --color-2: #2A2A2A;   /* text — body copy on light sections */
    --color-3: #F5F5F5;   /* page background — the light grey the design opens on */
    --color-4: #FFFFFF;   /* surface — cards and white sections */
    --color-5: #E2E8F0;   /* border / hairline rules */
    --color-6: #0B1849;   /* accent — the dark blue section band */
    --color-7: #003049;   /* highlight — the deep grey-blue CTA banner + headings */
    /* Accessible variant of --color-1 (same Material blue family, 800 vs 500). #2196F3 is
       only 3.12:1 on white — it FAILS the 4.5:1 text floor as small text or as a white-text
       button fill. Use this for text + fills on light; --color-1 stays the brand light blue
       for icons/decoration (3:1 non-text) and for headings on the dark-blue bands. */
    --color-1-strong: #1565C0;
    --color-primary:    var(--color-1-strong);
    /* darkened from #DC2626: on the page grey the original was 4.43:1 — just under the
       4.5:1 text floor used by required-field asterisks. */
    --color-error:      #C81E1E;
    /* Design fonts. 'Stack Sans Headline' is NOT on Google Fonts — it needs a licensed
       @font-face source. Until it lands, headings fall back to Libre Franklin (the
       design's own body face) so the site stays on-brand rather than on system-ui. */
    --font-1: 'Stack Sans Headline', 'Libre Franklin', system-ui, sans-serif;
    --font-2: 'Libre Franklin', system-ui, -apple-system, sans-serif;
    --font-3: 'Libre Franklin', system-ui, sans-serif;   /* subheading / accent */
    /* Design type scale (1440 frame): h1 44/48, h2 28/36, h3 24/31.
       clamp max = the design value so desktop matches exactly; scales down on phones. */
    --text-h3: clamp(20px, 2.4vw, 24px);
    --text-h2: clamp(24px, 3vw, 28px);
    --text-h1: clamp(30px, 4.2vw, 44px);
}

body { line-height: var(--leading-body); }   /* design body is 16/22 = 1.375, not 1.5 */
h5 { font-size: var(--text-base-lg); font-weight: var(--weight-med); }   /* was --text-lg = h4's size */
.site-footer a:hover { color: var(--color-accent-hover); opacity: 1; }   /* the standard: a real color change, not a fade */
.site-footer--minimal .site-footer__copyright { margin: 0; color: var(--color-text-muted-on-dark); font-size: var(--text-sm); }   /* muted ON DARK — the light-bg muted was 2.35:1 here */
.site-footer--minimal .site-footer__legal-list a:hover { color: var(--color-bg); }   /* was --color-text on a dark bg = 1.00:1, invisible */

/* Layerly —  — 2026-08-13 04:47:56 */
/* ── Header — Trustbridge (design: 65px cream bar, nav LEFT, wordmark CENTRE, CTA RIGHT) ──
   Composed from the LOCKED nav/primary component: hamburger, [data-mobile-menu] drawer and
   sticky behaviour all come from the library. Only the declared style knobs + flex order
   are set here — no bespoke header, so the mobile drawer and admin-bar offset cannot go
   missing (Burke D10/D11). */
:root {
  --nav-bg: var(--color-3);
  --nav-fg: var(--color-7);
  --nav-height: 65px;
  --nav-link-weight: var(--weight-bold);
  --nav-link-hover: var(--color-1);
  --nav-gap: var(--space-lg);
}
.nav__inner { display: flex; align-items: center; gap: var(--nav-gap); }
/* Design order: menu (left) · wordmark (centre) · CTA (right). The component's DOM order
   is logo → hamburger → menu, so this is a presentation-only reorder. */
.nav__logo { order: 1; flex: 0 0 auto; margin-inline: 0; }
.nav__menu { order: 2; flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: var(--nav-gap); }
.nav__logo-text { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md);
  color: var(--color-1-strong); letter-spacing: -0.01em; white-space: nowrap; }
.nav__list { display: flex; align-items: center; gap: var(--nav-gap); list-style: none; margin: 0; padding: 0; }
.nav__list a { color: var(--nav-fg); font-size: var(--text-sm); font-weight: var(--nav-link-weight); text-decoration: none; }
.nav__list a:hover { color: var(--nav-link-hover); }
.nav__cta { order: 3; margin-left: 0; font-size: var(--text-sm); padding: 10px 18px; white-space: nowrap; }
.nav.is-scrolled { box-shadow: 0 1px 0 var(--color-border), 0 6px 18px rgba(0,0,0,.06); }

@media (max-width: 768px) {
  /* The drawer is the LOCKED library panel; only its skin is set here. */
  .nav__logo { order: 1; margin-inline: 0; }
  .nav__menu { order: 3; flex-direction: column; align-items: flex-start; gap: var(--space-md);
    background: var(--color-3); padding: var(--space-xl); }
  .nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .nav__list a { font-size: var(--text-lg); }
  .nav__cta { margin-left: 0; }
  /* a11y: a CLOSED drawer must not be keyboard-focusable off-screen (WCAG 2.4.3).
     The base theme leaves it visible+tabbable at translateX(100%) — fixed here. */
  .nav__menu[data-mobile-menu]:not(.is-open) { visibility: hidden; }
  .nav__menu[data-mobile-menu].is-open { visibility: visible; }
}


/* Layerly —  — 2026-08-13 04:47:56 */
/* ── Header fixes (Gate G review, 2026-08-12) ───────────────────────────────────
   1. --nav-bg is declared ON .nav in the component, so a :root value never wins.
      Set it at the same selector, not higher up.
   2. The CTA lives INSIDE .nav__menu, so ordering it against .nav__logo did nothing.
      The logo is centred by absolute positioning instead — no DOM assumptions, and
      the <nav> landmark is left intact (display:contents would have removed it).
   3. .btn's pill is set HERE, scoped, after my earlier edit_file matched BOTH .btn and
      .service-card — the bridge's edit_file replaces EVERY occurrence, not the first. */
.nav { --nav-bg: var(--color-3); --nav-fg: var(--color-7); --nav-height: 65px;
       --nav-link-weight: var(--weight-bold); --nav-link-hover: var(--color-1);
       border-bottom: 1px solid transparent; }
.nav__inner { position: relative; display: flex; align-items: center; gap: var(--nav-gap); }
.nav__logo { position: static; transform: none; margin: 0; order: 1; }
.nav__menu { flex: 1 1 auto; display: flex; align-items: center; }
.nav__list { margin-left: auto; margin-right: 0; }
.nav__cta { margin-left: 0; border-radius: var(--radius-full); }
.btn { border-radius: var(--radius-full); }

@media (max-width: 768px) {
  /* Drawer: logo returns to the flow, CTA stacks. */
  .nav__logo { position: static; transform: none; }
  .nav__menu { flex: 0 0 auto; }
  .nav__list { margin-right: 0; margin-left: 0; }
  .nav__cta { margin-left: 0; }
}


/* Layerly —  — 2026-08-13 04:47:56 */
/* ── Buttons: radius + hover pairs (Gate G review round 2) ─────────────────────
   RADIUS: the Figma "Button" node is 16px (13 uses). The 9999 pill in the file belongs
   to "Frame 18" (the step chips), NOT to buttons — my earlier pill was an inference from
   a raw radius count, and the design data says otherwise.
   HOVER: every variant now sets BOTH background and text explicitly, so the label can
   never inherit an unreadable colour. Each pair is a deliberate dark-or-light move. */
.btn { border-radius: var(--radius-lg); transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.nav__cta { border-radius: var(--radius-lg); }

/* primary: green → darker green, white label (6.4:1) */
.btn--primary { background: var(--color-1-strong); color: #fff; border-color: var(--color-1-strong); }
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; }

/* ghost: transparent → DARK maroon, cream label (13:1) */
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--color-7); border-color: var(--color-7); color: var(--color-3); }

/* light (on dark bands): cream → white, maroon label stays readable (13:1) */
.btn--light { background: var(--color-3); color: var(--color-7); border-color: var(--color-3); }
.btn--light:hover, .btn--light:focus-visible {
  background: #fff; border-color: #fff; color: var(--color-7); }

/* ── Mobile drawer: accent background that stands out (Alexander, 2026-08-12) ── */
@media (max-width: 768px) {
  .nav__menu[data-mobile-menu] { background: var(--color-6); justify-content: flex-start;
    padding-block: calc(var(--nav-height) + var(--space-xl)); }
  .nav__menu[data-mobile-menu] .nav__list a { color: var(--color-3); font-size: var(--text-xl);
    display: block; padding-block: var(--space-md); min-height: 44px; }
  .nav__menu[data-mobile-menu] .nav__list a:hover { color: var(--color-1); }
  .nav__menu[data-mobile-menu] .nav__cta { background: var(--color-3); color: var(--color-7);
    border-color: var(--color-3); margin-top: var(--space-lg); }
  .nav.is-open .ly-burger > span { background: var(--color-3); }
}


/* Layerly —  — 2026-08-13 04:47:57 */
@media (max-width: 768px) {
  .nav__menu[data-mobile-menu] .nav__list a:hover { color: #FFFFFF; }
}


/* Layerly —  — 2026-08-13 04:48:18 */
/* Restored after a build pre-flight reinstalled the base theme and wiped every per-site
   write (see the build log — starting a build destroyed the site's CSS). These are the
   design-derived tokens the theme has no defaults for. */
:root {
  --text-base-lg: 18px;          /* the design's 18/25 step */
  --text-xxl: clamp(34px, 5vw, 56px);   /* used by hero--split + process numbers; theme never defined it */
  --leading-h1: 1.09;
  --leading-h2: 1.29;
  --leading-h3: 1.29;
  --leading-lg: 1.3;
  --leading-body: 1.375;         /* design body is 16/22, not 1.5 */
  --color-primary-hover:   color-mix(in srgb, var(--color-1) 78%, #000);
  --color-accent-hover:    color-mix(in srgb, var(--color-6) 82%, #fff);
  --color-highlight-hover: color-mix(in srgb, var(--color-7) 80%, #000);
  --color-on-light-hover:  color-mix(in srgb, var(--color-3) 88%, #000);
  --color-bg-alt: color-mix(in srgb, var(--color-3) 92%, #000);
  --color-text-muted: color-mix(in srgb, var(--color-2) 72%, var(--color-3));
  --color-text-muted-on-dark: color-mix(in srgb, var(--color-3) 72%, var(--color-6));
}
html { line-height: var(--leading-body); }
h1 { line-height: var(--leading-h1); }
h2 { line-height: var(--leading-h2); }
h3 { line-height: var(--leading-h3); }
h1, h2, h3 { font-weight: 600; }   /* the design's headings are 600, not the theme's 700 */
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base-lg); }


/* Layerly —  — 2026-08-13 04:55:12 */
/* ── Trustbridge homepage sections (design 6002:432) ───────────────────────────
   Unprefixed BEM on functional families, every value a token. */
.hero { padding-block: var(--space-xxl); }
.hero__inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-xxl); align-items: start; }
.hero__title { font-size: var(--text-h1); color: var(--color-7); margin: 0; max-width: 22ch; }
.hero__aside { padding-top: var(--space-md); }
.hero__body { color: var(--color-2); margin-bottom: var(--space-lg); }
.hero-band { line-height: 0; }
.hero-band__img { width: 100%; height: clamp(220px, 39vw, 560px); object-fit: cover; display: block; }

.intro { color: var(--color-3); }
.intro__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl); align-items: center; }
.intro__title { font-size: var(--text-h2); color: var(--color-3); margin: 0 0 var(--space-md); }
.intro__body { color: var(--color-5); margin-bottom: var(--space-lg); }
.intro__media img { width: 100%; border-radius: var(--radius-md); display: block; }

.problem-framing { color: var(--color-3); }
.problem-framing__title { font-size: var(--text-h2); color: var(--color-3); margin: 0 0 var(--space-md); max-width: 24ch; }
.problem-framing__lede { color: var(--color-5); margin-bottom: var(--space-xl); max-width: 46ch; }
.problem-framing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
.problem-framing__media img { width: 100%; border-radius: var(--radius-md); display: block; }
.problem-framing__card { background: var(--color-4); color: var(--color-2); border-radius: var(--radius-md); padding: var(--space-xl); }
.problem-framing__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin: var(--space-lg) 0;
  padding-block: var(--space-lg); border-block: 1px solid var(--color-border); }
.problem-framing__pair p { margin: 0; color: var(--color-7); font-size: var(--text-sm); }
.problem-framing__close { margin: 0; font-weight: var(--weight-bold); }
.problem-framing__outro { margin-top: var(--space-xl); font-size: var(--text-lg); color: var(--color-3); max-width: 44ch; }

.service-grid__head { margin-bottom: var(--space-xl); }
.service-grid__head h2 { font-size: var(--text-h2); color: var(--color-7); margin: 0 0 var(--space-sm); max-width: 26ch; }
.service-grid__lede { color: var(--color-2); margin: 0; }
.service-grid__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.service-grid__card { background: var(--color-4); border-radius: var(--radius-md); padding: var(--space-xl); }
.service-grid__icon { display: inline-block; font-size: var(--text-xl); color: var(--color-1); margin-bottom: var(--space-md); }
.service-grid__card-title { font-size: var(--text-lg); margin: 0 0 var(--space-sm); color: var(--color-2); }
.service-grid__card-body { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

.process-steps__head { margin-bottom: var(--space-xl); }
.process-steps__head h2 { font-size: var(--text-h2); color: var(--color-7); margin: 0 0 var(--space-sm); }
.process-steps__lede { color: var(--color-2); margin: 0; }
.process-steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.process-steps__card { background: var(--color-4); border-radius: var(--radius-md); padding: var(--space-xl); }
.process-steps__chip { display: inline-block; background: var(--color-7); color: var(--color-3); font-size: var(--text-xs);
  font-weight: var(--weight-bold); padding: 4px 12px; border-radius: var(--radius-full); margin-bottom: var(--space-md); }
.process-steps__card-title { font-size: var(--text-base-lg); margin: 0 0 var(--space-sm); color: var(--color-1-strong); }
.process-steps__card-body { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

.industries__top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl); margin-bottom: var(--space-xl); }
.industries__top h2 { font-size: var(--text-h2); color: var(--color-7); margin: 0 0 var(--space-sm); max-width: 18ch; }
.industries__lede { color: var(--color-2); margin: 0; }
.industries__body { color: var(--color-2); }
.industries__accent { color: var(--color-1-strong); font-size: var(--text-lg); }
.industries__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--color-border); padding-top: var(--space-xl); }
.industries__col h3 { font-size: var(--text-base-lg); margin: 0 0 var(--space-sm); color: var(--color-2); }
.industries__col p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

.cta__card { background: var(--color-7); color: var(--color-3); border-radius: var(--radius-md);
  padding: var(--space-xxl); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl); }
.cta__left h2 { font-size: var(--text-h2); color: var(--color-3); margin: 0 0 var(--space-md); max-width: 18ch; }
.cta__left p { margin: 0; color: var(--color-5); }
.cta__lead { font-weight: var(--weight-bold); margin: 0 0 var(--space-sm); }
.cta__body { color: var(--color-5); margin: 0 0 var(--space-lg); }

@media (max-width: 900px) {
  .hero__inner, .intro__inner, .problem-framing__grid, .industries__top, .cta__card { grid-template-columns: 1fr; gap: var(--space-xl); }
  .service-grid__grid, .process-steps__grid, .industries__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .service-grid__grid, .process-steps__grid, .industries__grid, .problem-framing__pair { grid-template-columns: 1fr; }
}


/* Layerly —  — 2026-08-13 04:55:56 */
/* The catalog hero centres by default; this design is LEFT-aligned throughout. */
.hero, .hero__title, .hero__aside, .hero__body { text-align: left; }
.hero__inner { align-items: center; }
.hero { padding-block: var(--space-xxl) var(--space-xl); }


/* Layerly —  — 2026-08-13 05:00:03 */
.hero__inner { text-align: left; max-width: var(--container-max); margin-inline: auto; }
.hero__title, .hero__aside, .hero__body { text-align: left; }


/* Layerly —  — 2026-08-13 05:01:42 */
/* ── Contact block (design: maroon band, cream card, note left / fields right) ── */
.contact-block { color: var(--color-3); }
.contact-block__head { margin-bottom: var(--space-xl); }
.contact-block__title { font-size: var(--text-h2); color: var(--color-3); margin: 0 0 var(--space-sm); }
.contact-block__lede { color: var(--color-5); margin: 0; }
.contact-block__card { background: var(--color-3); color: var(--color-2); border-radius: var(--radius-md);
  padding: var(--space-xxl); display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-xxl); align-items: start; }
.contact-block__note-text { color: var(--color-2); margin: 0; }
.contact-block { --field-bg: transparent; --field-border: var(--color-2); --field-radius: 0;
  --field-focus: var(--color-1); --label-color: var(--color-2); --form-cols: 2; }
.contact-block input:not([type=checkbox]), .contact-block select, .contact-block textarea {
  border: 0; border-bottom: 1px solid var(--color-2); border-radius: 0; background: transparent; padding-inline: 0; }
.contact-block .btn { background: var(--color-1-strong); color: #fff; }

/* ── Footer (design: dark green, wordmark + tagline left, link columns right) ── */
.site-footer { background: var(--color-6); color: var(--color-3); }
.site-footer a { color: var(--color-5); }
.site-footer a:hover { color: var(--color-3); }
.site-footer__logo, .site-footer .site-footer__brand { color: var(--color-3); font-family: var(--font-display); font-weight: 600; }
.site-footer__tagline { color: var(--color-5); max-width: 34ch; }
.site-footer__copyright, .layerly-copyright { color: var(--color-text-muted-on-dark); }

@media (max-width: 900px) { .contact-block__card { grid-template-columns: 1fr; gap: var(--space-xl); } }


/* Layerly —  — 2026-08-13 05:02:23 */
/* Footer — the rendered class is .footer (not .site-footer); design is the dark-green band. */
.footer { background: var(--color-6); color: var(--color-3); padding-block: var(--space-xxl); }
.footer__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-xxl); align-items: start; }
.footer__logo-text { color: var(--color-3); font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
.footer__tagline { color: var(--color-5); max-width: 34ch; margin-top: var(--space-md); }
.footer__columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
.footer__col-heading { color: var(--color-1); font-weight: var(--weight-bold); font-size: var(--text-sm); margin: 0 0 var(--space-md); }
.footer__col-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.footer__col-list a { color: var(--color-5); text-decoration: none; font-size: var(--text-sm); }
.footer__col-list a:hover { color: var(--color-3); }
.layerly-copyright { background: var(--color-6); color: var(--color-text-muted-on-dark); }
.layerly-copyright a { color: var(--color-text-muted-on-dark); }
@media (max-width: 900px) { .footer__inner { grid-template-columns: 1fr; gap: var(--space-xl); } }


/* Layerly —  — 2026-08-13 14:18:18 */
/* ── Angled section transitions (design: 1440x109 diagonal bands) ──────────────
   A clip-path on the section, so there is no extra element to keep in sync and it scales
   fluidly. --angle is the band height as a % of the section. */
.section--angle-top { clip-path: polygon(0 var(--angle, 5%), 100% 0, 100% 100%, 0 100%); }
.section--angle-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--angle, 5%)), 0 100%); }
.section--angle-both { clip-path: polygon(0 var(--angle, 5%), 100% 0, 100% calc(100% - var(--angle, 5%)), 0 100%); }
/* The dark band that opens under the hero image, and the problem section that follows it. */
@media (max-width: 700px) {
}
/* Real vector icons from the design — sized by token, colored by the brand token. */
.service-grid__icon { display: inline-block; width: 40px; height: 40px; color: var(--color-1); margin-bottom: var(--space-md); }
.service-grid__icon-svg { width: 100%; height: 100%; display: block; }


/* Layerly —  — 2026-08-13 14:20:49 */
/* ── Dividers, corrected ───────────────────────────────────────────────────────
   The first pass cut between .intro and .problem-framing — both #17433F, so the diagonal
   was invisible. A divider only reads where the COLOUR changes. Real boundaries here:
     hero-band (image) → intro (dark green)
     problem-framing (dark green) → service-grid (cream)
     cta (cream) → contact-block (maroon)
   Cuts are on the LOWER section's top edge, pulled up over the section above it. */
         padding-top: calc(var(--space-xxl) + 60px); position: relative; z-index: 1; }
.problem-framing { clip-path: none; margin-top: 0; padding-top: var(--space-xxl); }
                padding-top: calc(var(--space-xxl) + 60px); position: relative; z-index: 1; }
                 padding-top: calc(var(--space-xxl) + 60px); position: relative; z-index: 1; }

/* Icons: the design's frames are 82px wide inside the cards — 40px read as tiny. */
.service-grid__icon { width: 56px; height: 56px; }

@media (max-width: 700px) {
    margin-top: -28px; padding-top: calc(var(--space-xl) + 28px); }
  .service-grid__icon { width: 44px; height: 44px; }
}


/* Layerly —  — 2026-08-13 14:28:02 */
/* ── Dividers + backgrounds, corrected against the design's own fills ────────── */

/* 1. Top of the hero image — the cream hero cuts diagonally into the photo. */

/* 2. Below "How We Walk You Across" — the design's second divider band (#FFFFFF),
      i.e. the white industries section cutting up into the cream steps section. */
              padding-top: calc(var(--space-xxl) + 60px); position: relative; z-index: 1; }

/* 3. The CTA band is WHITE in the design, not beige — the maroon card sits on white,
      continuous with the industries section above it. */
.cta { --section-bg-color: var(--color-4); background: var(--color-4); }

@media (max-width: 700px) {
  .industries { padding-top: calc(var(--space-xl) + 28px); }
}


/* Layerly —  — 2026-08-13 14:28:12 */
/* Green slant above the footer — the dark-green footer (#17433F) cuts up into the
   maroon contact block, matching the intro/service-grid/industries transitions. */
          padding-top: calc(var(--space-xxl) + 60px); position: relative; z-index: 1; }
@media (max-width: 700px) {
            padding-top: calc(var(--space-xl) + 28px); }
}


/* Layerly —  — 2026-08-13 14:31:02 */
/* ── Breathing room around the diagonals ──────────────────────────────────────
   Two sides to fix, not one: the angled section needs clearance BELOW its cut, and the
   section it overlaps needs clearance ABOVE the incoming diagonal — otherwise the last
   line of the section above sits under the slant. One token drives both. */
:root { --angle: 60px; --angle-pad: 40px; }

/* the angled sections: clear the cut before content starts */
.intro, .service-grid, .industries, .contact-block, .footer {
  padding-top: calc(var(--space-xxl) + var(--angle) + var(--angle-pad));
}
/* the sections being overlapped: keep their last line clear of the incoming slant */
.hero, .problem-framing, .process-steps, .cta, .contact-block {
  padding-bottom: calc(var(--space-xxl) + var(--angle));
}

@media (max-width: 700px) {
  :root { --angle: 28px; --angle-pad: 20px; }
}


/* Layerly —  — 2026-08-13 14:40:30 */
/* Problem framing — two equal columns, both starting at the section top so the white
   card top-aligns with the heading; the closing line sits under the card, right column. */
.problem-framing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl); align-items: start; }
.problem-framing__col { display: flex; flex-direction: column; gap: var(--space-lg); }
.problem-framing__title { margin: 0; }
.problem-framing__lede { margin: 0; }
.problem-framing__media { margin: 0; }
.problem-framing__media img { width: 100%; border-radius: var(--radius-md); display: block; }
.problem-framing__outro { margin: 0; font-size: var(--text-lg); color: var(--color-3); max-width: none; }
@media (max-width: 900px) { .problem-framing__grid { grid-template-columns: 1fr; } }


/* Layerly —  — 2026-08-13 14:43:03 */
/* ── About page — built from the rendered design (6028:1462) ─────────────────── */
.page-hero { padding-block: calc(var(--space-xxl) + 20px) var(--space-xxl); }
.page-hero__title { font-size: var(--text-h1); color: var(--color-7); margin: 0 0 var(--space-md); max-width: 24ch; }
.page-hero__sub { color: var(--color-1-strong); font-weight: var(--weight-bold); font-size: var(--text-sm); margin: 0; }

.statement__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl); align-items: start; }
.statement__lead { color: var(--color-1); font-size: var(--text-h3); font-weight: 600; margin: 0; line-height: var(--leading-h3); }
.statement__body { color: var(--color-2); margin: 0; }

.gap-block__title { font-size: var(--text-h2); color: var(--color-7); margin: 0 0 var(--space-sm); }
.gap-block__lede { color: var(--color-1-strong); font-weight: var(--weight-bold); font-size: var(--text-sm); margin: 0 0 var(--space-xl); max-width: 40ch; }
.gap-block__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl); align-items: start; }
.gap-block__col { display: flex; flex-direction: column; gap: var(--space-lg); }
.gap-block__small { color: var(--color-2); font-size: var(--text-sm); margin: 0; }
.gap-block__statement { color: var(--color-2); font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-h3); margin: 0; }
.gap-block__media img { width: 100%; border-radius: var(--radius-md); display: block; }

.standards__title { font-size: var(--text-h2); color: var(--color-7); margin: 0 0 var(--space-sm); }
.standards__lede { color: var(--color-1-strong); font-weight: var(--weight-bold); font-size: var(--text-sm); margin: 0 0 var(--space-xl); }
.standards__panel { list-style: none; margin: 0; padding: var(--space-xl); display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 0; background: color-mix(in srgb, var(--color-3) 45%, #fff);
  border-radius: var(--radius-md); }
.standards__col { padding-inline: var(--space-lg); border-left: 1px solid var(--color-border); }
.standards__col:first-child { border-left: 0; padding-left: 0; }
.standards__icon { display: block; width: 40px; height: 40px; color: var(--color-1); margin-bottom: var(--space-md); }
.standards__icon-svg { width: 100%; height: 100%; display: block; }
.standards__col-title { font-size: var(--text-base-lg); color: var(--color-2); margin: 0 0 var(--space-sm); }
.standards__col-body { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

.security-first__title { font-size: var(--text-h2); color: var(--color-7); margin: 0 0 var(--space-sm); max-width: 20ch; }
.security-first__lede { color: var(--color-1-strong); font-weight: var(--weight-bold); font-size: var(--text-sm); margin: 0 0 var(--space-xl); }
.security-first__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl); align-items: start; }
.security-first__media img { width: 100%; border-radius: var(--radius-md); display: block; }
.security-first__statement { color: var(--color-1-strong); font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-h3); margin: 0 0 var(--space-lg); }
.security-first__body { color: var(--color-2); font-size: var(--text-sm); margin: 0; }

/* the design's only angled cuts on About: under the hero image, and into the white
   standards section — everything else is a flat colour change. */
             padding-top: calc(var(--space-xxl) + var(--angle-pad)); }
             padding-top: calc(var(--space-xxl) + var(--angle) + var(--angle-pad)); }
.gap-block { padding-bottom: calc(var(--space-xxl) + var(--angle)); }

@media (max-width: 900px) {
  .statement__grid, .gap-block__grid, .security-first__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .standards__panel { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .standards__col { border-left: 0; padding-left: 0; }
}
@media (max-width: 600px) { .standards__panel { grid-template-columns: 1fr; } }


/* Layerly —  — 2026-08-13 14:43:21 */
/* ── Footer — rebuilt from the rendered design ────────────────────────────────
   Design: two-line cream wordmark top-left · full-width hairline · tagline left with the
   link columns right · muted legal row beneath. The two menu columns are kept (Alexander,
   2026-08-13) rather than the design's single list. */
.footer__inner { display: block; }
.footer__brand { margin-bottom: var(--space-xl); }
.footer__logo-text { font-size: var(--text-lg); line-height: 1.15; display: inline-block; max-width: 8ch; }
.footer__brand::after { content: ""; display: block; height: 1px; background: rgba(245,245,245,.18);
  margin-top: var(--space-xl); }
.footer__tagline { margin-top: 0; }
.footer__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: var(--space-xl);
  justify-content: end; }
.footer__inner { display: grid; grid-template-columns: 1fr auto; gap: var(--space-xxl); align-items: start; }
.footer__brand { grid-column: 1 / -1; margin-bottom: 0; }
.footer__col-heading { color: var(--color-1); }
.layerly-copyright { padding-block: var(--space-lg); font-size: var(--text-xs); }
@media (max-width: 900px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__columns { justify-content: start; grid-template-columns: repeat(2, 1fr); }
}


/* Layerly —  — 2026-08-13 14:44:23 */
/* "Start the Conversation" — the design is a photographic background under a maroon
   overlay, not a flat fill. Uses an ALREADY-UPLOADED image (the desk detail) rather than a
   new one, so the Starter 10-image allowance still holds; the overlay is the brand maroon
   at 88%, which keeps the cream card and white text well clear of AA. */
.contact-block {
  background-color: var(--color-7);
  background-image: linear-gradient(color-mix(in srgb, var(--color-7) 88%, transparent),
                                    color-mix(in srgb, var(--color-7) 88%, transparent)),
                    url("/wp-content/uploads/2026/08/set-home-intro-b.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* Layerly —  — 2026-08-13 14:50:22 */
/* ── About fixes, read off the design (6028:1462) ──────────────────────────────
   · divider bands are 109px in the file, not 60 — the shallow cut read as "missing"
   · gap image is 560x320 LANDSCAPE; the source asset is portrait, so it must be cropped
   · standards cards are #FFFFFF on a #FFFFFF section with GREEN titles (mine were cream/dark)
   · icon frames are 82px in the design; 40 was far too small */
:root { --angle: 100px; }

.statement { clip-path: polygon(0 var(--angle), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--angle) * -1);
             padding-top: calc(var(--space-xxl) + var(--angle)); }
.standards { clip-path: polygon(0 var(--angle), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--angle) * -1);
             padding-top: calc(var(--space-xxl) + var(--angle) + var(--angle-pad)); }

.gap-block__media img { aspect-ratio: 560 / 320; object-fit: cover; height: auto; }

.standards__panel { background: var(--color-4); padding: 0; gap: 0; }
.standards__col { padding: var(--space-lg) var(--space-lg) var(--space-md); }
.standards__col-title { color: var(--color-1-strong); }
.standards__icon { width: 64px; height: 64px; }

@media (max-width: 700px) { :root { --angle: 44px; } .standards__icon { width: 48px; height: 48px; } }


/* Layerly —  — 2026-08-13 14:52:05 */
/* ── Services page (6040:1856) ─────────────────────────────────────────────── */
.offer__title { font-size: var(--text-h2); color: var(--color-7); margin: 0 0 var(--space-sm); }
.offer__lede { color: var(--color-1-strong); font-weight: var(--weight-bold); font-size: var(--text-sm); margin: 0 0 var(--space-lg); max-width: 42ch; }
.offer__intro { color: var(--color-2); font-size: var(--text-sm); max-width: 68ch; margin: 0 0 var(--space-xl);
  padding-bottom: var(--space-xl); border-bottom: 1px solid var(--color-border); }
.offer__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl) var(--space-lg); }
.offer__item-title { color: var(--color-1-strong); font-size: var(--text-base-lg); margin: 0 0 var(--space-sm); }
.offer__item-body { color: var(--color-2); font-size: var(--text-sm); margin: 0; }

.protect { color: var(--color-3); }
.protect__top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl); margin-bottom: var(--space-xl); }
.protect__title { font-size: var(--text-h2); color: var(--color-3); margin: 0 0 var(--space-md); max-width: 20ch; }
.protect__lede { color: var(--color-5); margin: 0; }
.protect__statement { color: var(--color-3); font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-h3); margin: 0 0 var(--space-md); }
.protect__body { color: var(--color-5); font-size: var(--text-sm); margin: 0; }
.protect__grid { list-style: none; margin: 0 0 var(--space-xxl); padding: var(--space-xl) 0 0; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); border-top: 1px solid rgba(245,245,245,.2); }
.protect__col { padding-left: var(--space-lg); border-left: 1px solid rgba(245,245,245,.2); }
.protect__col:first-child { border-left: 0; padding-left: 0; }
.protect__col h3 { color: var(--color-3); font-size: var(--text-base-lg); margin: 0 0 var(--space-sm); }
.protect__col p { color: var(--color-5); font-size: var(--text-sm); margin: 0; }
.protect__steps { margin-top: var(--space-xxl); }

.faqs__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-xxl); align-items: start; }
.faqs__title { font-size: var(--text-h2); color: var(--color-7); margin: 0 0 var(--space-sm); max-width: 14ch; }
.faqs__lede { color: var(--color-1-strong); font-weight: var(--weight-bold); font-size: var(--text-sm); margin: 0 0 var(--space-xl); }
.faqs__card { background: var(--color-4); border-radius: var(--radius-md); padding: var(--space-xl); }
.faqs__card h3 { font-size: var(--text-base-lg); color: var(--color-2); margin: 0 0 var(--space-sm); }
.faqs__card p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.faqs { --accordion-border: var(--color-border); --accordion-q-size: var(--text-sm); }

@media (max-width: 900px) {
  .offer__grid { grid-template-columns: repeat(2, 1fr); }
  .protect__top, .faqs__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .protect__grid { grid-template-columns: repeat(2, 1fr); }
  .protect__col { border-left: 0; padding-left: 0; }
}
@media (max-width: 600px) { .offer__grid, .protect__grid { grid-template-columns: 1fr; } }


/* Layerly —  — 2026-08-13 14:53:38 */
/* Steps — one column of rows beside an image (breaks up the text-heavy middle). */
.process-steps__split { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-xxl); align-items: start; }
.process-steps__media img { width: 100%; border-radius: var(--radius-md); display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.process-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); }
.process-steps__row { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: start;
  background: var(--color-4); border-radius: var(--radius-md); padding: var(--space-lg); }
.process-steps__row .process-steps__chip { margin: 0; }

/* About: cut the IMAGE's bottom edge so the divider reads against the cream below it —
   clipping the cream section alone was invisible where both sides are light. */
.hero-band { clip-path: polygon(0 var(--angle), 100% 0, 100% 100%, 0 calc(100% - var(--angle))); }

@media (max-width: 900px) { .process-steps__split { grid-template-columns: 1fr; } }


/* Layerly —  — 2026-08-13 14:55:27 */
/* Step rows: stack the chip above the text instead of sitting beside it, so each card
   reads top-to-bottom (Alexander, 2026-08-13). */
.process-steps__row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.process-steps__row .process-steps__chip { margin: 0 0 var(--space-xs); }
.process-steps__row .process-steps__card-title { margin: 0 0 var(--space-xs); }
.process-steps__row .process-steps__card-body { margin: 0; }


/* Layerly —  — 2026-08-13 14:56:07 */
/* ── One cut per boundary ──────────────────────────────────────────────────────
   The image band now owns BOTH of its edges (top into the hero, bottom into whatever
   follows). The section directly after it must NOT also clip, or two diagonals stack at
   different angles — which is exactly what happened. Sections that follow a FLAT colour
   still own their own top cut. */
.hero-band { clip-path: polygon(0 var(--angle), 100% 0, 100% 100%, 0 calc(100% - var(--angle)));
             margin-top: calc(var(--angle) * -1); }
.intro, .statement { clip-path: none; margin-top: 0; padding-top: var(--space-xxl); }


/* Layerly —  — 2026-08-13 14:56:34 */
/* Higher specificity so this cannot be merged into an earlier .intro/.statement rule —
   write_css merges by selector, and the merged declaration was losing to a later duplicate.
   One diagonal per boundary: the image band owns its own top AND bottom edges. */
section.section.intro { clip-path: none; margin-top: 0; padding-top: var(--space-xxl); }
section.section.statement { clip-path: none; margin-top: 0; padding-top: var(--space-xxl); }


/* Layerly —  — 2026-08-13 14:59:37 */
/* ════════════════════════════════════════════════════════════════════════════
   DIVIDERS — the single authoritative block. Supersedes every earlier rule (14 had
   accumulated across passes, mixing hardcoded 60/28px with --angle, which is why angles
   disagreed and boundaries doubled up). High specificity so nothing earlier can win.

   RULES:  one cut per boundary · one angle everywhere (--angle) · the cut always belongs
   to the LOWER section, EXCEPT the image band, which owns only its BOTTOM edge.
   ════════════════════════════════════════════════════════════════════════════ */
:root { --angle: 100px; }

/* every angled section: identical polygon, identical direction, identical depth */
section.section.service-grid,
section.section.industries,
section.section.contact-block,
section.section.standards,
section.section.problem-framing,
.site-content .footer, footer.footer {
  clip-path: polygon(0 var(--angle), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(var(--angle) * -1);
  padding-top: calc(var(--space-xxl) + var(--angle));
  position: relative; z-index: 1;
}
/* the image band: NO top cut (the hero above it ends flat, per the design) — bottom only */
section.hero-band {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--angle)));
  margin-top: 0;
}
/* sections that sit directly under the band never cut — the band already did */
section.section.intro, section.section.statement {
  clip-path: none; margin-top: 0; padding-top: var(--space-xxl);
}
@media (max-width: 700px) { :root { --angle: 44px; } }


/* Layerly —  — 2026-08-13 15:02:31 */
/* ════════════════════════════════════════════════════════════════════════════
   DIVIDERS v3 — corrected against the design, and against how clip-path actually paints.
   THE BUG in v2: cutting the IMAGE BAND's bottom edge reveals whatever is BEHIND it —
   the page background — not the next section. So the wedge under the hero came out cream
   instead of the following section's colour. A cut only shows the right colour when the
   LOWER section owns it and is pulled up over the one above.
   So: the band carries only its TOP cut (against the cream hero, which is also the body
   colour, so that one is safe), and EVERY lower section carries its own top cut.
   Direction flipped to match the design: the edge drops toward the RIGHT.
   ════════════════════════════════════════════════════════════════════════════ */
:root { --angle: 100px; }

section.hero-band {
  clip-path: polygon(0 0, 100% var(--angle), 100% 100%, 0 100%);
  margin-top: calc(var(--angle) * -1);
  position: relative; z-index: 1;
}
section.section.intro, section.section.statement,
section.section.problem-framing, section.section.service-grid,
section.section.industries, section.section.contact-block,
section.section.standards, footer.footer {
  clip-path: polygon(0 0, 100% var(--angle), 100% 100%, 0 100%);
  margin-top: calc(var(--angle) * -1);
  padding-top: calc(var(--space-xxl) + var(--angle));
  position: relative; z-index: 1;
}
@media (max-width: 700px) { :root { --angle: 44px; } }


/* Layerly —  — 2026-08-13 15:04:37 */
/* ── DIVIDERS v4 — mirrored horizontally ───────────────────────────────────────
   v3 dropped the edge toward the RIGHT; the design drops it toward the LEFT. Same depth,
   same owner (the lower section), only the polygon's first two points swap. */
section.hero-band,
section.section.intro, section.section.statement,
section.section.problem-framing, section.section.service-grid,
section.section.industries, section.section.contact-block,
section.section.standards, footer.footer {
  clip-path: polygon(0 var(--angle), 100% 0, 100% 100%, 0 100%);
}

/* The CTA band is WHITE in the design. The template sets --section-bg-color inline to the
   cream token, so overriding the VARIABLE cannot win — override the background property
   itself at higher specificity instead. */
section.section.cta { background: var(--color-4); }


/* Layerly —  — 2026-08-13 15:07:03 */
/* ── Services fixes (Alexander, 2026-08-13) ───────────────────────────────────── */
/* 2nd section: the button was sitting hard against the paragraph above it */
.statement .btn { margin-top: var(--space-lg); }

/* Services list: the design separates every item with a hairline and gives each real
   internal padding — mine had neither, so the grid read as loose floating text. */
.offer__grid { border-top: 1px solid var(--color-border); }
.offer__item { padding: var(--space-xl) var(--space-lg) var(--space-xl) 0;
  border-bottom: 1px solid var(--color-border); }
.offer__grid > .offer__item + .offer__item { border-left: 1px solid var(--color-border); padding-left: var(--space-lg); }

/* "What working with us looks like": the heading block and the cards had collapsed
   together — give the steps their own top rhythm inside the dark band. */
.protect__steps { margin-top: calc(var(--space-xxl) * 1.5); }
.protect__steps .protect__lede { margin-bottom: var(--space-xl); }
.protect__steps .process-steps__grid { margin-top: var(--space-xl); }


/* Layerly —  — 2026-08-13 15:08:50 */
/* ── Services: the dark band's dividers + the CTA background ──────────────────
   `.protect` was never in the divider set, so the green band had no cut above it and
   none below into the FAQs. Both boundaries now use the same shape as every other. */
section.section.protect, section.section.faqs {
  clip-path: polygon(0 var(--angle), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(var(--angle) * -1);
  padding-top: calc(var(--space-xxl) + var(--angle));
  position: relative; z-index: 1;
}
/* "Ready to find the right protection?" sits on BEIGE on Services (the design's cta fill
   there is #F7F1DE, unlike Home's #FFFFFF) — set per page, not globally. */
.page-template-page-services section.section.cta,
body.page-services section.section.cta { background: var(--color-3); }


/* Layerly —  — 2026-08-13 15:08:58 */
body.page-id-9 section.section.cta { background: var(--color-3); }


/* Layerly —  — 2026-08-13 15:09:36 */
/* Services list: each card carries ONLY a left border — no top rule on the grid, no
   bottom rules, and the first card in each row has none (Alexander, 2026-08-13). */
.offer__grid { border-top: 0; }
.offer__item { border: 0; border-left: 1px solid var(--color-border);
  padding: 0 var(--space-lg) var(--space-xl) var(--space-lg); }
.offer__grid > .offer__item + .offer__item { border-left: 1px solid var(--color-border); padding-left: var(--space-lg); }
/* first item of each row of four starts the row, so it gets no rule */
.offer__grid > .offer__item:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
@media (max-width: 900px) {
  .offer__grid > .offer__item:nth-child(4n + 1) { border-left: 1px solid var(--color-border); padding-left: var(--space-lg); }
  .offer__grid > .offer__item:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 600px) {
  .offer__item, .offer__grid > .offer__item + .offer__item { border-left: 0; padding-left: 0; }
}


/* Layerly —  — 2026-08-13 15:10:40 */
/* ── Clearance around every diagonal ──────────────────────────────────────────
   Measured on the Services green band: content began 180px from the section top, but the
   cut is 100px deep on its low side, leaving only 80px — and the last line had just 20px
   before the NEXT section's diagonal overlapped it. Both sides now clear the cut by a
   full --angle-pad. */
:root { --angle-pad: 56px; }

section.hero-band,
section.section.intro, section.section.statement,
section.section.problem-framing, section.section.service-grid,
section.section.industries, section.section.contact-block,
section.section.standards, section.section.protect, section.section.faqs,
footer.footer {
  padding-top: calc(var(--space-xxl) + var(--angle) + var(--angle-pad));
}
/* any section that the NEXT one cuts into needs matching room at its foot */
section.section.protect, section.section.problem-framing, section.section.service-grid,
section.section.process-steps, section.section.industries, section.section.cta,
section.section.gap-block, section.section.security-first, section.section.contact-block {
  padding-bottom: calc(var(--space-xxl) + var(--angle) + var(--angle-pad));
}
section.hero-band { padding-top: 0; }
@media (max-width: 700px) { :root { --angle-pad: 28px; } }


/* Layerly — Homepage hero band: anchor the cover-crop to the bottom so the building entrance is visible — 2026-08-17T22:17:26.296Z */
.home .hero-band__img {
  object-position: center 75%;
}


/* Layerly — problem-framing: when only one point remains, let it span the full card width — 2026-08-18T20:01:57.805Z */
.problem-framing__pair--one {
  grid-template-columns: 1fr;
}



/* Layerly — Home 2026 measured design — section-scoped tokens + the seven bespoke home sections (desktop rules only; @media appended separately) — 2026-08-21T20:11:44.333Z */
.hero-overlay, .brand-band, .media-split, .photo-mosaic, .approach, .step-list, .cta-band {
  --color-8: #000000;
  --color-9: #F9F3EF;
  --color-10: #FFFFFF;
  --color-11: #333333;
  --color-12: #FF8040;
  --color-13: #2CA5F4;
  --font-4: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --overlay-dark: rgba(0, 0, 0, .6);
  --font-display: var(--font-4);
  --font-body: var(--font-4);
  --text-xs: 12px;
  --text-sm: 15px;
  --text-md: 16px;
  --text-base-lg: 18px;
  --text-lg: 22px;
  --text-h3: clamp(22px, 2.4vw, 32px);
  --text-h2: clamp(30px, 4.2vw, 48px);
  --text-h1: clamp(38px, 5.6vw, 70px);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --space-lg: 20px;
  --space-xl: clamp(24px, 3vw, 30px);
  --space-xxl: clamp(40px, 6vw, 60px);
  font-family: var(--font-4);
  color: var(--color-text);
}

.hero-overlay, .brand-band, .media-split, .cta-band {
  --color-text: var(--color-8);
  --color-text-muted: var(--color-11);
  background-color: var(--section-bg-color, var(--color-10));
}

.photo-mosaic, .approach, .step-list {
  --color-text: var(--color-8);
  --color-text-muted: var(--color-11);
  background-color: var(--section-bg-color, var(--color-9));
}

.hero-overlay .btn, .cta-band .btn {
  background: var(--color-12);
  border-color: var(--color-12);
  color: var(--color-8);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  padding: var(--space-md) var(--space-xl);
}

.hero-overlay .btn:hover, .hero-overlay .btn:focus-visible, .cta-band .btn:hover, .cta-band .btn:focus-visible {
  background: var(--color-10);
  border-color: var(--color-10);
  color: var(--color-8);
}

.hero-overlay .btn:focus-visible, .cta-band .btn:focus-visible {
  outline: 2px solid var(--color-10);
  outline-offset: 3px;
}

.hero-overlay {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 800px;
  padding-block: var(--space-xxl);
}

.hero-overlay__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-overlay__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--overlay-dark);
}

.hero-overlay__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-overlay__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: var(--weight-bold);
  line-height: 1.06;
  color: var(--color-text);
  margin: 0 0 var(--space-lg);
  max-width: 38ch;
}

.hero-overlay__lede {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
  max-width: 52ch;
}

.hero-overlay__body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xl);
  max-width: 62ch;
}

.hero-overlay__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.brand-band {
  display: flex;
  align-items: center;
  min-height: 89px;
  padding-block: var(--space-lg);
}

.brand-band__inner {
  width: 100%;
  text-align: center;
}

.brand-band__wordmark {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: .01em;
  color: var(--color-text);
}

.media-split {
  display: flex;
  align-items: center;
  min-height: 516px;
  padding-block: var(--space-xxl);
}

.media-split__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-xxl);
  align-items: center;
  width: 100%;
}

.media-split__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.media-split__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-split__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.14;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
  max-width: 20ch;
}

.media-split__lede {
  font-size: var(--text-base-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.media-split__body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.photo-mosaic {
  padding-block: var(--space-xxl);
}

.photo-mosaic__head {
  max-width: 74ch;
  margin-bottom: var(--space-xxl);
}

.photo-mosaic__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.14;
  margin: 0 0 var(--space-md);
  max-width: 24ch;
}

.photo-mosaic__lede {
  font-size: var(--text-base-lg);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-md);
}

.photo-mosaic__body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.photo-mosaic__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-lg);
}

.photo-mosaic__cell {
  grid-column: span 2;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-10);
}

.photo-mosaic__cell:first-child {
  grid-column: span 4;
  aspect-ratio: 16 / 9;
}

.photo-mosaic__cell:nth-child(n + 3) {
  aspect-ratio: 4 / 3;
}

.photo-mosaic__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.approach {
  padding-block: var(--space-xxl);
}

.approach__head {
  max-width: 62ch;
  margin-bottom: var(--space-xxl);
}

.approach__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.14;
  margin: 0 0 var(--space-md);
  max-width: 22ch;
}

.approach__lede {
  font-size: var(--text-base-lg);
  font-weight: var(--weight-bold);
  margin: 0;
}

.approach__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-xxl);
}

.approach__item {
  border-top: 2px solid var(--color-8);
  padding-top: var(--space-md);
}

.approach__item-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

.approach__item-body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.step-list {
  padding-block: var(--space-xxl);
}

.step-list__head {
  max-width: 62ch;
  margin-bottom: var(--space-xxl);
}

.step-list__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.14;
  margin: 0 0 var(--space-md);
}

.step-list__lede {
  font-size: var(--text-base-lg);
  font-weight: var(--weight-bold);
  margin: 0;
}

.step-list__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: var(--space-xxl);
  align-items: start;
}

.step-list__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.step-list__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.step-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
}

.step-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  align-items: start;
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  background: var(--color-9);
}

.step-list__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-12);
  color: var(--color-8);
  font-size: var(--text-base-lg);
  font-weight: var(--weight-bold);
}

.step-list__item-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

.step-list__item-body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.cta-band {
  display: flex;
  align-items: center;
  min-height: 600px;
  padding-block: var(--space-xxl);
  text-align: center;
}

.cta-band__inner {
  width: 100%;
}

.cta-band__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: 1.06;
  color: color-mix(in srgb, var(--color-13) 90%, #000);
  margin: 0 auto var(--space-lg);
  max-width: 20ch;
}

.cta-band__lede {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0 auto var(--space-md);
  max-width: 46ch;
}

.cta-band__body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 auto var(--space-xl);
  max-width: 58ch;
}

.cta-band__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* ── Home 2026 — responsive. Written with edit_file, not write_css: write_css
   strips the @media wrapper and writes the inner rules unconditionally, which
   applied every mobile override at desktop (verified 2026-08-21). ── */
@media (max-width: 900px) {
  .hero-overlay { min-height: 620px; }
  .media-split { display: block; min-height: 0; }
  .media-split__inner, .step-list__grid { grid-template-columns: 1fr; }
  .approach__list { grid-template-columns: 1fr; }
  .photo-mosaic__grid { grid-template-columns: repeat(2, 1fr); }
  .photo-mosaic__cell, .photo-mosaic__cell:first-child { grid-column: span 1; aspect-ratio: 4 / 3; }
  .cta-band { min-height: 460px; }
}
@media (max-width: 600px) {
  .hero-overlay { min-height: 560px; }
  .photo-mosaic__grid { grid-template-columns: 1fr; }
  .step-list__item { grid-template-columns: 1fr; gap: var(--space-md); }
}


/* Layerly — Keep the sticky nav off the CTA band heading when /#contact is followed — 2026-08-21T20:17:54.715Z */
#contact.cta-band {
  scroll-margin-top: var(--nav-height, 65px);
}


/* Layerly — Home sections 4 + 5: CPT-driven approach card grid and the no-imagery audience list band, on the measured home palette — 2026-08-22T02:04:37.475Z */
.approach-cards, .audience-band {
  --color-8: #000000;
  --color-9: #F9F3EF;
  --color-10: #FFFFFF;
  --color-11: #333333;
  --color-12: #FF8040;
  --color-13: #2CA5F4;
  --font-4: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-4);
  --font-body: var(--font-4);
  --text-xs: 12px;
  --text-sm: 15px;
  --text-md: 16px;
  --text-base-lg: 18px;
  --text-lg: 22px;
  --text-h3: clamp(22px, 2.4vw, 32px);
  --text-h2: clamp(30px, 4.2vw, 48px);
  --text-h1: clamp(38px, 5.6vw, 70px);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --space-lg: 20px;
  --space-xl: clamp(24px, 3vw, 30px);
  --space-xxl: clamp(40px, 6vw, 60px);
  --color-text: var(--color-11);
  --color-text-muted: rgba(51, 51, 51, .74);
  font-family: var(--font-4);
  color: var(--color-text);
  background-color: var(--section-bg-color, var(--color-9));
}

.approach-cards {
  padding-block: var(--space-xxl);
}

.approach-cards__head {
  max-width: 62ch;
  margin-bottom: var(--space-xxl);
}

.approach-cards__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.14;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
  max-width: 22ch;
}

.approach-cards__lede {
  font-size: var(--text-base-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
}

.approach-cards__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}

.approach-cards__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 276px;
  padding: var(--space-xl);
  background: var(--color-10);
  border: 4px solid var(--color-10);
  border-radius: var(--radius-md);
}

.approach-cards__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-12);
  color: var(--color-8);
}

.approach-cards__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.approach-cards__card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--color-text);
  margin: 0;
}

.approach-cards__card-body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.approach-cards__actions {
  margin-top: var(--space-xxl);
}

.approach-cards .btn {
  background: var(--color-8);
  border-color: var(--color-8);
  color: var(--color-10);
  border-radius: var(--radius-md);
  font-family: var(--font-4);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  padding: var(--space-md) var(--space-xl);
}

.approach-cards .btn:hover, .approach-cards .btn:focus-visible {
  background: var(--color-12);
  border-color: var(--color-12);
  color: var(--color-8);
}

.approach-cards .btn:focus-visible {
  outline: 2px solid var(--color-8);
  outline-offset: 3px;
}

.audience-band {
  display: flex;
  align-items: center;
  min-height: 625px;
  padding-block: var(--space-xxl);
}

.audience-band__inner {
  width: 100%;
}

.audience-band__head {
  max-width: 74ch;
  margin-bottom: var(--space-xxl);
}

.audience-band__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.14;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
  max-width: 24ch;
}

.audience-band__lede {
  font-size: var(--text-base-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.audience-band__body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.audience-band__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-xxl);
}

.audience-band__item {
  border-top: 4px solid var(--color-12);
  padding-top: var(--space-md);
}

.audience-band__item-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

.audience-band__item-body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 900px) {
.approach-cards__list {
  grid-template-columns: 1fr;
}
}

@media (max-width: 900px) {
.audience-band__list {
  grid-template-columns: 1fr;
}
}

@media (max-width: 900px) {
.audience-band {
  min-height: 0;
}
}


/* Layerly — Sitewide chrome restyled to the home design: 131px transparent header overlaid on the hero, tall black footer — 2026-08-22T02:05:09.110Z */
.nav, .footer, .layerly-copyright {
  --color-8: #000000;
  --color-9: #F9F3EF;
  --color-10: #FFFFFF;
  --color-11: #333333;
  --color-12: #FF8040;
  --color-13: #2CA5F4;
  --font-4: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
}

body .nav {
  --nav-bg: transparent;
  --nav-fg: var(--color-11);
  --nav-height: var(--nav-h, 131px);
  --nav-link-weight: var(--weight-bold);
  --nav-link-hover: var(--color-12);
  --nav-gap: 30px;
  background: var(--nav-bg);
  color: var(--nav-fg);
  font-family: var(--font-4);
}

body .nav__inner {
  min-height: var(--nav-height);
}

body .nav__logo-text {
  font-family: var(--font-4);
  font-size: var(--text-lg, 22px);
  font-weight: var(--weight-bold);
  color: var(--nav-fg);
  letter-spacing: 0;
}

body .nav__list a {
  font-family: var(--font-4);
  font-size: 16px;
  font-weight: var(--weight-bold);
  color: var(--nav-fg);
}

body .nav__list a:hover, body .nav__list a:focus-visible {
  color: var(--nav-link-hover);
}

body .nav .nav__cta {
  background: var(--color-12);
  border-color: var(--color-12);
  color: var(--color-8);
  border-radius: 10px;
  font-family: var(--font-4);
  font-size: 16px;
  font-weight: var(--weight-bold);
  padding: 14px 30px;
}

body .nav .nav__cta:hover, body .nav .nav__cta:focus-visible {
  background: var(--color-8);
  border-color: var(--color-8);
  color: var(--color-10);
}

body.home .nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  --nav-fg: var(--color-10);
}

body.home .nav.is-scrolled {
  box-shadow: none;
}

body { --nav-h: clamp(64px, 10vw, 131px); }
body.home .hero-overlay__inner {
  padding-top: var(--nav-h);
}

body:not(.home) .nav {
  background: var(--color-9);
}

body .footer__brand { grid-column: auto; }
body footer.footer {
  clip-path: none;
  margin-top: 0;
  padding-top: var(--footer-pad-y, 60px);
}
body .footer {
  margin-top: 0;
  --footer-bg: var(--color-10);
  --footer-fg: var(--color-11);
  --footer-heading: var(--color-8);
  --footer-link: var(--color-11);
  --footer-link-hover: var(--color-8);
  --footer-pad-y: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 714px;
  padding-block: var(--footer-pad-y);
  background: var(--footer-bg);
  color: var(--footer-fg);
  font-family: var(--font-4);
}

body .footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 60px;
  align-items: start;
  padding-block: 0;
}

body .footer__logo-text {
  display: block;
  font-family: var(--font-4);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  color: var(--color-8);
}
body .footer__logo { display: block; overflow: visible; }

body .footer__tagline {
  font-family: var(--font-4);
  font-size: 18px;
  line-height: 1.5;
  color: var(--footer-link);
  max-width: 30ch;
  margin-top: 20px;
}

body .footer__columns {
  display: contents;
}

body .footer__col-heading {
  font-family: var(--font-4);
  font-size: 16px;
  font-weight: var(--weight-bold);
  color: var(--footer-heading);
  margin: 0 0 20px;
}

body .footer__col-list {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body .footer__col-list a {
  font-family: var(--font-4);
  font-size: 16px;
  color: var(--footer-link);
  text-decoration: none;
}

body .footer__col-list a:hover, body .footer__col-list a:focus-visible {
  color: var(--footer-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body .layerly-copyright {
  background: var(--color-10);
  color: var(--color-11);
  font-family: var(--font-4);
  font-size: 15px;
  text-align: center;
  padding-block: 30px;
}

body .layerly-copyright a {
  color: var(--color-8);
}

@media (max-width: 900px) {
body .footer {
  min-height: 0;
}
}

@media (max-width: 900px) {
body .footer__inner {
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
}

@media (max-width: 768px) {
body.home .nav__menu {
  background: var(--color-8);
}
}

@media (max-width: 768px) {
body.home .nav__menu .nav__list a {
  color: var(--color-10);
}
}

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


/* Layerly — Home measured design: light grounds for all seven bands (#000 headings / #333 body), hero type stays white over its tint, CTA hover darkened, 55px curve dividers on sections 3 and 6 — 2026-08-22T03:51:48.266Z */
section.approach-cards, section.audience-band {
  --color-text: var(--color-8);
  --color-text-muted: var(--color-11);
}

section.hero-overlay {
  --color-text: var(--color-10);
  --color-text-muted: rgba(255, 255, 255, .88);
}

.cta-band .btn:hover, .cta-band .btn:focus-visible {
  background: var(--color-8);
  border-color: var(--color-8);
  color: var(--color-10);
}

.cta-band .btn:focus-visible {
  outline: 2px solid var(--color-8);
  outline-offset: 3px;
}

.media-split.section--divider-bottom-curve::before, .step-list.section--divider-bottom-curve::before {
  height: var(--divider-h, 55px);
}

.media-split.section--divider-bottom-curve::before {
  background-color: var(--color-9);
}

.step-list.section--divider-bottom-curve::before {
  height: var(--divider-h, 55px);
  background-color: var(--color-10);
}

.media-split.section--divider-bottom-curve, .step-list.section--divider-bottom-curve {
  --divider-h: clamp(28px, 4.3vw, 55px);
  padding-bottom: calc(var(--space-xxl) + var(--divider-h));
}


/* Layerly — services band: two-column split + text-only hairline cards + orange closing panel (scoped to .service-cards) — 2026-08-24T14:00:58.296Z */
.service-cards {
  --color-8: #000000;
  --color-9: #F9F3EF;
  --color-10: #FFFFFF;
  --color-11: #333333;
  --color-12: #FF8040;
  --color-13: #2CA5F4;
  --font-4: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-4);
  --font-body: var(--font-4);
  --text-xs: 12px;
  --text-sm: 15px;
  --text-md: 16px;
  --text-base-lg: 18px;
  --text-lg: 22px;
  --text-h3: clamp(22px, 2.4vw, 32px);
  --text-h2: clamp(30px, 4.2vw, 48px);
  --text-h1: clamp(38px, 5.6vw, 70px);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --space-lg: 20px;
  --space-xl: clamp(24px, 3vw, 30px);
  --space-xxl: clamp(40px, 6vw, 60px);
  --color-text: var(--color-11);
  --color-text-muted: rgba(51, 51, 51, .74);
  --card-hairline: color-mix(in srgb, var(--color-8) 16%, transparent);
  font-family: var(--font-4);
  color: var(--color-text);
  background-color: var(--section-bg-color, var(--color-9));
  padding-block: var(--space-xxl);
}

.service-cards__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
}

.service-cards__cols {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-xxl);
  align-items: start;
}

.service-cards__head {
  max-width: 34ch;
}

.service-cards__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.14;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.service-cards__lede {
  font-size: var(--text-base-lg);
  line-height: 1.5;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
}

.service-cards__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}

.service-cards__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 190px;
  padding: var(--space-xl);
  background: var(--color-9);
  border: 4px solid var(--card-hairline);
  border-radius: var(--radius-md);
  transition: border-color 160ms ease;
}

/* Hover/focus: brand orange (--color-12 #FF8040). Non-text border, so the 3:1
   non-text threshold applies — #FF8040 is fine here, but it is only 2.50:1 on
   white and must NOT be reused as card text (see note at the Step-N labels). */
.service-cards__card:hover,
.service-cards__card:focus-within {
  border-color: var(--color-12);
}

@media (prefers-reduced-motion: reduce) {
  .service-cards__card { transition: none; }
}

.service-cards__card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--color-8);
  margin: 0;
}

.service-cards__card-body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.service-cards__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-xxl);
  background: var(--color-12);
  border-radius: var(--radius-lg);
}

.service-cards__panel-copy {
  max-width: none;
}

.service-cards__panel-title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--color-8);
  margin: 0 0 var(--space-xs);
}

.service-cards__panel-body {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-8);
  margin: 0;
}

.service-cards__panel-actions {
  flex: 0 0 auto;
}

/* Match the site's other bespoke buttons (.hero-overlay .btn, .cta-band .btn,
   .approach-cards .btn): --radius-md, 2px border, inline-flex, and a
   :focus-visible outline. This one was the odd one out — a 1px pill with no
   focus ring. Colours stay white-on-orange, which is correct for this ground. */
.service-cards .btn.service-cards__panel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-10);
  border: 2px solid var(--color-10);
  color: var(--color-8);
  border-radius: var(--radius-md);
  font-family: var(--font-4);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  padding: var(--space-md) var(--space-xl);
  text-decoration: none;
  white-space: nowrap;
}

.service-cards .btn.service-cards__panel-btn:focus-visible {
  outline: 2px solid var(--color-8);
  outline-offset: 3px;
}

.service-cards .btn.service-cards__panel-btn:hover, .service-cards .btn.service-cards__panel-btn:focus-visible {
  background: var(--color-8);
  border-color: var(--color-8);
  color: var(--color-10);
}

@media (max-width: 1024px) {
  .service-cards__cols {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .service-cards__head {
    max-width: 62ch;
  }
}

@media (max-width: 700px) {
  .service-cards__list {
    grid-template-columns: 1fr;
  }

  .service-cards__panel {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-xl);
  }
}


/* Layerly — hero: heading sized to two lines; outlined white secondary CTA beside the orange primary — 2026-08-24T16:24:50.232Z */
.hero-overlay .btn.hero-overlay__cta-secondary {
  background: transparent;
  border-color: var(--color-10);
  color: var(--color-10);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  padding: var(--space-md) var(--space-xl);
}

.hero-overlay .btn.hero-overlay__cta-secondary:hover, .hero-overlay .btn.hero-overlay__cta-secondary:focus-visible {
  background: var(--color-10);
  border-color: var(--color-10);
  color: var(--color-8);
}


/* Layerly — media split: add the design's orange CTA button — 2026-08-24T16:24:51.190Z */
.media-split__actions {
  margin-top: var(--space-xl);
}

.media-split .btn.media-split__cta {
  display: inline-flex;
  background: var(--color-12);
  border-color: var(--color-12);
  color: var(--color-8);
  border-radius: var(--radius-md);
  font-family: var(--font-4);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  padding: var(--space-md) var(--space-xl);
  text-decoration: none;
}

.media-split .btn.media-split__cta:hover, .media-split .btn.media-split__cta:focus-visible {
  background: var(--color-8);
  border-color: var(--color-8);
  color: var(--color-10);
}

.media-split .btn.media-split__cta:focus-visible {
  outline: 2px solid var(--color-8);
  outline-offset: 3px;
}


/* Layerly — service cards: blue line icons, cream card fill, compact orange CTA strip with black copy — 2026-08-24T16:24:52.113Z */
.service-cards__icon {
  display: inline-flex;
  color: var(--color-13);
  margin-bottom: var(--space-xs);
}

/* The .icon wrapper defaults to 1em (16px) while the svg was set to 34px, so the
   svg overflowed its box. Size the WRAPPER and let the svg fill it — same pattern
   already proven on .icon-cards__icon (see ~line 4435). */
.service-cards__icon .icon {
  display: block;
  width: 40px;
  height: 40px;
  font-size: 40px;
}

/* .icon svg (line ~394) sets fill: currentColor, and CSS beats the SVG's own
   fill="none" presentation attribute — which turned these stroke-drawn outline
   icons into solid silhouettes (shield filled, checkmark invisible). These are
   stroke icons: keep fill none and let the stroke draw them. */
.service-cards__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
}


/* Layerly — section 5: rounded taupe panel, centred white copy, inline check-mark tags — 2026-08-24T16:25:25.084Z */
.audience-panel {
  --color-8: #000000;
  --color-9: #F9F3EF;
  --color-10: #FFFFFF;
  --color-11: #333333;
  --color-12: #FF8040;
  --color-13: #2CA5F4;
  --color-14: #74716F;
  --panel-inset: 30px;
  --panel-hairline: color-mix(in srgb, var(--color-10) 40%, transparent);
  --font-4: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-4);
  --font-body: var(--font-4);
  --text-xs: 12px;
  --text-sm: 15px;
  --text-md: 16px;
  --text-base-lg: 18px;
  --text-lg: 22px;
  --text-h3: clamp(22px, 2.4vw, 32px);
  --text-h2: clamp(30px, 4.2vw, 48px);
  --text-h1: clamp(38px, 5.6vw, 70px);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --space-lg: 20px;
  --space-xl: clamp(24px, 3vw, 30px);
  --space-xxl: clamp(40px, 6vw, 60px);
  --color-text: var(--color-8);
  --color-text-muted: var(--color-11);
  font-family: var(--font-4);
  color: var(--color-text);
  background-color: var(--section-bg-color, var(--color-9));
  padding-block: var(--panel-inset);
  /* Inset the band so the bg image is not full-bleed, and round it. The image
     and the overlay (.section--with-overlay::after, inset:0) both paint on THIS
     element, so overflow:hidden is what makes the radius clip the overlay too —
     without it the tint keeps square corners. Fluid clamp handles small screens
     without a media query. */
  --panel-outset: clamp(16px, 4vw, 56px);
  margin-inline: var(--panel-outset);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.audience-panel__inner {
  width: 100%;
  padding-inline: var(--panel-inset);
}

/* No veil on the box itself — the section's own overlay (.section--with-overlay
   ::after, inset:0) tints the WHOLE band uniformly. A second veil here stacked
   on top of it and made the inset box read darker than its 30px frame. */
.audience-panel__box {
  border-radius: var(--radius-lg);
  padding: clamp(48px, 6vw, 88px) var(--space-xl);
  text-align: center;
  background: transparent;
}

.audience-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.14;
  color: var(--color-10);
  margin: 0 auto var(--space-md);
  max-width: 26ch;
}

.audience-panel__lede {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  color: var(--color-10);
  margin: 0 auto var(--space-md);
  max-width: 52ch;
}

.audience-panel__body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-10);
  margin: 0 auto;
  max-width: 74ch;
}

.audience-panel__tags {
  list-style: none;
  margin: var(--space-xl) auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--space-md);
  column-gap: var(--space-xl);
  max-width: 80ch;
}

.audience-panel__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-10);
  font-size: var(--text-md);
  font-weight: var(--weight-med);
}

.audience-panel__tag-icon {
  display: inline-flex;
  color: var(--color-12);
}

.audience-panel__tag-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

@media (max-width: 700px) {
  .audience-panel__inner { padding-inline: var(--space-md); }
  .audience-panel__box { padding: var(--space-xxl) var(--space-lg); }
}


/* Layerly — section 6: full-width row of step tiles with orange Step N labels — 2026-08-24T16:25:26.026Z */
.step-row {
  /* Same hue as --color-12 (#FF8040) but dark enough for text on the white
     card: 5.08:1 vs #FFFFFF. #FF8040 itself is only 2.50:1 and fails as text. */
  --step-row-label-ink: #B84E0E;
  --color-8: #000000;
  --color-9: #F9F3EF;
  --color-10: #FFFFFF;
  --color-11: #333333;
  --color-12: #FF8040;
  --color-13: #2CA5F4;
  --font-4: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-4);
  --font-body: var(--font-4);
  --text-xs: 12px;
  --text-sm: 15px;
  --text-md: 16px;
  --text-base-lg: 18px;
  --text-lg: 22px;
  --text-h3: clamp(22px, 2.4vw, 32px);
  --text-h2: clamp(30px, 4.2vw, 48px);
  --text-h1: clamp(38px, 5.6vw, 70px);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --space-lg: 20px;
  --space-xl: clamp(24px, 3vw, 30px);
  --space-xxl: clamp(40px, 6vw, 60px);
  --color-text: var(--color-8);
  --color-text-muted: var(--color-11);
  font-family: var(--font-4);
  color: var(--color-text);
  background-color: var(--section-bg-color, var(--color-9));
  padding-block: var(--space-xxl);
}

.step-row__head {
  max-width: 68ch;
  margin-bottom: var(--space-xxl);
}

.step-row__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: var(--weight-bold);
  line-height: 1.08;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
  max-width: 16ch;
}

.step-row__lede {
  font-size: var(--text-base-lg);
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

.step-row__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--step-row-cols, 4), minmax(0, 1fr));
  gap: var(--space-xl);
}

.step-row__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  background: var(--color-10);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

.step-row__label {
  display: block;
  color: var(--step-row-label-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
}

.step-row__item-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--color-text);
  margin: 0;
}

.step-row__item-body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.step-row.section--divider-bottom-curve::before {
  height: var(--divider-h, 55px);
  background-color: var(--color-10);
}

.step-row.section--divider-bottom-curve {
  --divider-h: clamp(28px, 4.3vw, 55px);
  padding-bottom: calc(var(--space-xxl) + var(--divider-h));
}

@media (max-width: 1000px) {
  .step-row__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .step-row__list { grid-template-columns: 1fr; }
}


/* Layerly — closing band: huge blue headline + secondary text link — 2026-08-24T16:25:27.142Z */
.cta-band .btn.cta-band__link {
  background: transparent;
  border-color: transparent;
  color: var(--color-8);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: var(--space-md) var(--space-sm);
}

.cta-band .btn.cta-band__link:hover, .cta-band .btn.cta-band__link:focus-visible {
  background: transparent;
  border-color: transparent;
  color: color-mix(in srgb, var(--color-13) 90%, #000);
}

.cta-band .btn.cta-band__link:focus-visible {
  outline: 2px solid var(--color-8);
  outline-offset: 3px;
}


/* Layerly — Section 6: staggered step cards (stepped row), scoped to .step-row only — 2026-08-24T17:04:05.701Z */
.step-row .step-row__list {
  align-items: stretch;
}

/* Stagger removed — all step tiles sit on one even baseline. */
.step-row .step-row__item {
  transform: none;
}

.step-row .step-row__item:nth-child(1) {
  --step-row-step: 0;
}

.step-row .step-row__item:nth-child(2) {
  --step-row-step: 1;
}

.step-row .step-row__item:nth-child(3) {
  --step-row-step: 2;
}

.step-row .step-row__item:nth-child(4) {
  --step-row-step: 3;
}

.step-row .step-row__item:nth-child(5) {
  --step-row-step: 4;
}

.step-row .step-row__item:nth-child(6) {
  --step-row-step: 5;
}

.step-row .step-row__item:nth-child(7) {
  --step-row-step: 6;
}

.step-row .step-row__item:nth-child(8) {
  --step-row-step: 7;
}

@media (max-width: 1000px) {
  .step-row .step-row__list {
    --step-row-stagger: 0px;
    padding-bottom: 0;
  }
}


/* Layerly — Services section 2: icon-card grid (CPT-driven), measured tokens — 2026-08-24T17:36:25.147Z */
.icon-cards {
  --color-8: #000000;
  --color-9: #F9F3EF;
  --color-10: #FFFFFF;
  --color-11: #333333;
  --color-12: #FF8040;
  --color-13: #2CA5F4;
  --font-4: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-4);
  --font-body: var(--font-4);
  --text-xs: 12px;
  --text-sm: 15px;
  --text-md: 16px;
  --text-base-lg: 18px;
  --text-lg: 22px;
  --text-h3: clamp(22px, 2.4vw, 32px);
  --text-h2: clamp(30px, 4.2vw, 48px);
  --text-h1: clamp(38px, 5.6vw, 70px);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --space-lg: 20px;
  --space-xl: clamp(24px, 3vw, 30px);
  --space-xxl: clamp(40px, 6vw, 60px);
  --color-text: var(--color-8);
  --color-text-muted: var(--color-11);
  font-family: var(--font-4);
  color: var(--color-text);
  background-color: var(--section-bg-color, var(--color-9));
  padding-block: var(--space-xxl);
}

.icon-cards__head {
  max-width: 78ch;
  margin-bottom: var(--space-xxl);
}

.icon-cards__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.14;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
  max-width: 22ch;
}

.icon-cards__lede {
  font-size: var(--text-base-lg);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.icon-cards__body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.icon-cards__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}

.icon-cards__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 276px;
  padding: var(--space-xl);
  background: transparent;
  /* --card-hairline is scoped to .service-cards and is NOT defined here; an
     undefined var invalidates the whole shorthand and border-style falls back
     to none (no border at all). Keep --color-5 as the fallback. */
  border: 4px solid var(--card-hairline, var(--color-5));
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: border-color 160ms ease;
}

/* Match the homepage service cards: brand orange (--color-12) hover border.
   Non-text, so the 3:1 threshold applies — #FF8040 passes as a border but is
   only 2.50:1 on white and must not be reused as text. */
.icon-cards__card:hover,
.icon-cards__card:focus-within {
  border-color: var(--color-12, #FF8040);
}

@media (prefers-reduced-motion: reduce) {
  .icon-cards__card { transition: none; }
}

.icon-cards__icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--color-13);
}

.icon-cards__icon svg {
  width: 34px;
  height: 34px;
  display: block;
}

.icon-cards__card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--color-8);
  margin: 0;
}

.icon-cards__card-body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}


/* Layerly — Services section 3: light media band (copy + one wide photo) — 2026-08-24T17:36:37.203Z */
.media-band {
  --color-8: #000000;
  --color-9: #F9F3EF;
  --color-10: #FFFFFF;
  --color-11: #333333;
  --color-12: #FF8040;
  --color-13: #2CA5F4;
  --font-4: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-4);
  --font-body: var(--font-4);
  --text-xs: 12px;
  --text-sm: 15px;
  --text-md: 16px;
  --text-base-lg: 18px;
  --text-lg: 22px;
  --text-h3: clamp(22px, 2.4vw, 32px);
  --text-h2: clamp(30px, 4.2vw, 48px);
  --text-h1: clamp(38px, 5.6vw, 70px);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --space-lg: 20px;
  --space-xl: clamp(24px, 3vw, 30px);
  --space-xxl: clamp(40px, 6vw, 60px);
  --color-text: var(--color-8);
  --color-text-muted: var(--color-11);
  font-family: var(--font-4);
  color: var(--color-text);
  background-color: var(--section-bg-color, var(--color-9));
  display: flex;
  align-items: center;
  min-height: 553px;
  padding-block: var(--space-xxl);
}

.media-band__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-xxl);
  align-items: center;
  width: 100%;
}

.media-band__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.7vw, 34px);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
  max-width: 26ch;
}

.media-band__lede {
  font-size: var(--text-base-lg);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.media-band__body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.media-band__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.media-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-band {
  display: block;
  min-height: 0;
}


/* Layerly — Services section 4: compact CTA band + 55px white curve divider — 2026-08-24T17:36:51.928Z */
.compact-cta {
  --color-8: #000000;
  --color-9: #F9F3EF;
  --color-10: #FFFFFF;
  --color-11: #333333;
  --color-12: #FF8040;
  --color-13: #2CA5F4;
  --font-4: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-4);
  --font-body: var(--font-4);
  --text-xs: 12px;
  --text-sm: 15px;
  --text-md: 16px;
  --text-base-lg: 18px;
  --text-lg: 22px;
  --text-h3: clamp(22px, 2.4vw, 32px);
  --text-h2: clamp(30px, 4.2vw, 48px);
  --text-h1: clamp(38px, 5.6vw, 70px);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --space-lg: 20px;
  --space-xl: clamp(24px, 3vw, 30px);
  --space-xxl: clamp(40px, 6vw, 60px);
  --color-text: var(--color-8);
  --color-text-muted: var(--color-11);
  font-family: var(--font-4);
  color: var(--color-text);
  background-color: var(--section-bg-color, var(--color-9));
  display: flex;
  align-items: center;
  min-height: 307px;
  padding-block: var(--space-xxl);
  text-align: center;
}

.compact-cta__inner {
  width: 100%;
}

.compact-cta__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  color: var(--color-text);
  margin: 0 auto var(--space-md);
  max-width: 22ch;
}

.compact-cta__lede {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  color: var(--color-text);
  margin: 0 auto var(--space-md);
  max-width: 48ch;
}

.compact-cta__body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 auto var(--space-xl);
  max-width: 62ch;
}

.compact-cta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.compact-cta .btn.compact-cta__cta {
  background: var(--color-12);
  border-color: var(--color-12);
  color: var(--color-8);
  border-radius: var(--radius-md);
  font-family: var(--font-4);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  padding: var(--space-md) var(--space-xl);
  text-decoration: none;
}

.compact-cta .btn.compact-cta__cta:hover, .compact-cta .btn.compact-cta__cta:focus-visible {
  background: var(--color-8);
  border-color: var(--color-8);
  color: var(--color-10);
}

.compact-cta .btn.compact-cta__cta:focus-visible {
  outline: 2px solid var(--color-8);
  outline-offset: 3px;
}

.compact-cta.section--divider-bottom-curve::before {
  height: var(--divider-h, 55px);
  background-color: var(--color-10);
}

.compact-cta.section--divider-bottom-curve {
  --divider-h: clamp(28px, 4.3vw, 55px);
  padding-bottom: calc(var(--space-xxl) + var(--divider-h));
}


/* Layerly — Services sections 5 + 6: step-row fill + curve divider, FAQ accordion on the measured palette — 2026-08-24T17:37:07.929Z */
.step-list.section--divider-bottom-curve {
  --divider-h: clamp(28px, 4.3vw, 55px);
  padding-bottom: calc(var(--space-xxl) + var(--divider-h));
}

.disclosures {
  --color-8: #000000;
  --color-9: #F9F3EF;
  --color-10: #FFFFFF;
  --color-11: #333333;
  --color-12: #FF8040;
  --color-13: #2CA5F4;
  --font-4: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-4);
  --font-body: var(--font-4);
  --text-xs: 12px;
  --text-sm: 15px;
  --text-md: 16px;
  --text-base-lg: 18px;
  --text-lg: 22px;
  --text-h3: clamp(22px, 2.4vw, 32px);
  --text-h2: clamp(30px, 4.2vw, 48px);
  --text-h1: clamp(38px, 5.6vw, 70px);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --space-lg: 20px;
  --space-xl: clamp(24px, 3vw, 30px);
  --space-xxl: clamp(40px, 6vw, 60px);
  --color-text: var(--color-8);
  --color-text-muted: var(--color-11);
  --color-border: color-mix(in srgb, var(--color-8) 16%, transparent);
  font-family: var(--font-4);
  color: var(--color-text);
  background-color: var(--section-bg-color, var(--color-10));
  min-height: 600px;
  padding-block: var(--space-xxl);
}

.disclosures .section-head {
  margin-bottom: var(--space-xxl);
}

.disclosures .section-head__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.14;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.disclosures .section-head__sub {
  font-size: var(--text-base-lg);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  color: var(--color-text);
  max-width: 62ch;
  margin-inline: auto;
}

.disclosures .accordion__summary {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  color: var(--color-text);
  padding-block: var(--space-lg);
}

.disclosures .accordion__icon {
  color: var(--color-12);
}

.disclosures .accordion__answer {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  padding-bottom: var(--space-lg);
}


/* Layerly — Header overlaid on the Services hero, matching the home treatment — 2026-08-24T17:37:19.478Z */
body.home .nav, body.page-id-9 .nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  --nav-fg: var(--color-10);
}

body.home .nav.is-scrolled, body.page-id-9 .nav.is-scrolled {
  box-shadow: none;
}

body.home .hero-overlay__inner, body.page-id-9 .hero-overlay__inner {
  padding-top: var(--nav-h);
}

body.page-id-9 .nav__menu {
  background: transparent;
}

body.page-id-9 .nav__menu .nav__list a {
  color: var(--color-10);
}


/* Layerly — Services hero: transparent nav over the photo (links centred, CTA far right), heavier dark tint, narrow half-width headline column — 2026-08-24T18:26:48.423Z */
body.page-id-9 .nav__list {
  margin-inline: auto;
}

body.page-id-9 .hero-overlay__tint {
  background: linear-gradient(90deg, rgba(0,0,0,.93) 0%, rgba(0,0,0,.87) 32%, rgba(0,0,0,.66) 64%, rgba(0,0,0,.48) 100%);
}

body.page-id-9 .hero-overlay__title {
  max-width: 16ch;
}

body.page-id-9 .hero-overlay__lede, body.page-id-9 .hero-overlay__body {
  max-width: 52ch;
}

@media (max-width: 768px) {
  body.page-id-9 .nav__menu {
    background: var(--color-8);
  }

  body.page-id-9 .nav__list {
    margin-inline: 0;
  }

  body.page-id-9 .hero-overlay__title {
    max-width: none;
  }

  body.page-id-9 .hero-overlay__tint {
    background: rgba(0,0,0,.86);
  }
}


/* Layerly — Services band 2: cards cream/transparent with a hairline border (no white panel or shadow); plain blue line icons with no filled chip; fixed 3-up grid — 2026-08-24T18:26:49.285Z */
@media (max-width: 900px) {
  .icon-cards__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .icon-cards__list {
    grid-template-columns: 1fr;
  }
}


/* Layerly — Services band 3: heading back to a moderate h2 size; audience-segment rows rendered beneath the copy/photo row — 2026-08-24T18:26:50.406Z */
.media-band__segments {
  margin-top: var(--space-xxl);
}

.media-band__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}

.media-band__item {
  border-top: 1px solid var(--color-5);
  padding-top: var(--space-md);
}

.media-band__item-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

.media-band__item-body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 700px) {
  .media-band__list {
    grid-template-columns: 1fr;
  }
}


/* Layerly — Services band 4: rounded #FF8040 CTA panel spanning the band — copy left, white button right — 2026-08-24T18:27:19.172Z */
.panel-cta {
  --color-8: #000000;
  --color-9: #F9F3EF;
  --color-10: #FFFFFF;
  --color-11: #333333;
  --color-12: #FF8040;
  --color-13: #2CA5F4;
  --font-4: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-4);
  --font-body: var(--font-4);
  --text-sm: 15px;
  --text-md: 16px;
  --text-base-lg: 18px;
  --text-lg: 22px;
  --text-h2: clamp(30px, 4.2vw, 48px);
  --radius-md: 10px;
  --radius-lg: 20px;
  --space-lg: 20px;
  --space-xl: clamp(24px, 3vw, 30px);
  --space-xxl: clamp(40px, 6vw, 60px);
  --color-text: var(--color-8);
  --color-text-muted: var(--color-11);
  font-family: var(--font-4);
  color: var(--color-text);
  background-color: var(--section-bg-color, var(--color-9));
  padding-block: var(--space-xxl);
}

.panel-cta__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xl);
  align-items: center;
  background: var(--color-12);
  border-radius: var(--radius-lg);
  padding: var(--space-xxl) var(--space-xl);
}

.panel-cta__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  color: var(--color-8);
  margin: 0 0 var(--space-md);
  max-width: 30ch;
}

.panel-cta__lede {
  font-size: var(--text-base-lg);
  font-weight: var(--weight-bold);
  line-height: 1.45;
  color: var(--color-8);
  margin: 0 0 var(--space-md);
  max-width: 62ch;
}

.panel-cta__body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-8);
  margin: 0;
  max-width: 70ch;
}

.panel-cta .btn.panel-cta__cta {
  background: var(--color-10);
  border-color: var(--color-10);
  color: var(--color-8);
  border-radius: var(--radius-md);
  font-family: var(--font-4);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  padding: var(--space-md) var(--space-xl);
  text-decoration: none;
  white-space: nowrap;
}

.panel-cta .btn.panel-cta__cta:hover, .panel-cta .btn.panel-cta__cta:focus-visible {
  background: var(--color-8);
  border-color: var(--color-8);
  color: var(--color-10);
}

.panel-cta .btn.panel-cta__cta:focus-visible {
  outline: 2px solid var(--color-8);
  outline-offset: 3px;
}

.panel-cta.section--divider-bottom-curve::before {
  height: var(--divider-h, 55px);
  background-color: var(--color-10);
}

.panel-cta.section--divider-bottom-curve {
  --divider-h: clamp(28px, 4.3vw, 55px);
  padding-bottom: calc(var(--space-xxl) + var(--divider-h));
}

@media (max-width: 820px) {
  .panel-cta__panel {
    grid-template-columns: 1fr;
    align-items: start;
  }
}


/* Layerly — Services band 5: right-aligned heading block over a 2x2 horizontal grid of split step cards with display-size headings — 2026-08-24T18:27:20.129Z */
.step-grid {
  --color-8: #000000;
  --color-9: #F9F3EF;
  --color-10: #FFFFFF;
  --color-11: #333333;
  --color-12: #FF8040;
  --color-13: #2CA5F4;
  --step-grid-label-ink: #B84E0E;
  --font-4: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-4);
  --font-body: var(--font-4);
  --text-sm: 15px;
  --text-md: 16px;
  --text-base-lg: 18px;
  --text-lg: 22px;
  --text-h2: clamp(30px, 4.2vw, 48px);
  --radius-md: 10px;
  --radius-lg: 20px;
  --space-lg: 20px;
  --space-xl: clamp(24px, 3vw, 30px);
  --space-xxl: clamp(40px, 6vw, 60px);
  --color-text: var(--color-8);
  --color-text-muted: var(--color-11);
  font-family: var(--font-4);
  color: var(--color-text);
  background-color: var(--section-bg-color, var(--color-10));
  padding-block: var(--space-xxl);
}

.step-grid__head {
  width: 50%;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-xxl);
  text-align: center;
}

.step-grid__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.14;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.step-grid__lede {
  font-size: var(--text-base-lg);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}

.step-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}

.step-grid__item {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--color-9);
}

.step-grid__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--step-grid-label-ink);
  margin: 0 0 var(--space-sm);
}

.step-grid__item-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  overflow-wrap: break-word;
  hyphens: auto;
  color: var(--color-text);
  margin: 0;
}

.step-grid__item-body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 1000px) {
  .step-grid__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .step-grid__head {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 620px) {
  .step-grid__item {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}


/* Layerly — Band 2: size the icon wrapper span so the blue line icon renders at 34px; hero headline narrowed to a half-width four-line block — 2026-08-24T18:31:32.960Z */
.icon-cards__icon .icon {
  display: block;
  width: 40px;
  height: 40px;
  font-size: 40px;
}

/* .icon svg sets fill: currentColor, and CSS beats the SVG's own fill="none"
   attribute — which renders these stroke-drawn glyphs as solid blobs. Same fix
   already applied to the homepage cards. */
.icon-cards__icon .icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
}


/* Layerly — step-grid: stop either column of a step card expanding past its grid track (min-width:auto default is what let the heading push into the body column) — 2026-08-24T18:49:44.410Z */
.step-grid__lead, .step-grid__detail {
  min-width: 0;
}


/* Layerly — About: measured-design token scope for the new bands + transparent overlaid nav on the About hero — 2026-08-24T19:16:23.509Z */
.gap-split, .standards-band, .photo-cta {
  --color-8: #000000;
  --color-9: #F9F3EF;
  --color-10: #FFFFFF;
  --color-11: #333333;
  --color-12: #FF8040;
  --color-13: #2CA5F4;
  --font-4: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-4);
  --font-body: var(--font-4);
  --text-xs: 12px;
  --text-sm: 15px;
  --text-md: 16px;
  --text-base-lg: 18px;
  --text-lg: 22px;
  --text-h3: clamp(22px, 2.4vw, 32px);
  --text-h2: clamp(30px, 4.2vw, 48px);
  --text-h1: clamp(38px, 5.6vw, 70px);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --space-lg: 20px;
  --space-xl: clamp(24px, 3vw, 30px);
  --space-xxl: clamp(40px, 6vw, 60px);
  --color-text: var(--color-8);
  --color-text-muted: var(--color-11);
  font-family: var(--font-4);
  color: var(--color-text);
  background-color: var(--section-bg-color, var(--color-10));
}

body.page-id-8 .nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  --nav-fg: var(--color-10);
}

body.page-id-8 .nav__menu {
  background: transparent;
}

body.page-id-8 .hero-overlay__inner {
  padding-top: var(--nav-h);
}

body.page-id-8 .hero-overlay {
  min-height: 647px;
}

body.page-id-8 .hero-overlay__title {
  max-width: 20ch;
}

body.page-id-8 .hero-overlay__lede, body.page-id-8 .hero-overlay__body {
  max-width: 62ch;
}


/* Layerly — About band 2: intro-splits/copy-two-photos — copy column + two offset portraits, white curve divider — 2026-08-24T19:16:24.487Z */
.gap-split {
  display: flex;
  align-items: center;
  min-height: 1044px;
  padding-block: var(--space-xxl);
}

.gap-split__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}

.gap-split__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  color: var(--color-8);
  margin: 0 0 var(--space-lg);
  max-width: 18ch;
}

.gap-split__lede {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  color: var(--color-8);
  margin: 0 0 var(--space-lg);
  max-width: 46ch;
}

.gap-split__body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-11);
  margin: 0 0 var(--space-md);
  max-width: 60ch;
}

.gap-split__body:last-child {
  margin-bottom: 0;
}

.gap-split__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.gap-split__figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.gap-split__figure--b {
  margin-top: clamp(24px, 5vw, 60px);
}

.gap-split__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.gap-split.section--divider-bottom-curve::before {
  height: var(--divider-h, 55px);
  background-color: var(--color-10);
}

.gap-split.section--divider-bottom-curve {
  --divider-h: clamp(28px, 4.3vw, 55px);
  padding-bottom: calc(var(--space-xxl) + var(--divider-h));
}








/* Layerly — About band 3: feature-blocks/standards-media — cream band, photo beside a 2x2 rule-topped standards grid — 2026-08-24T19:16:25.476Z */
.standards-band {
  display: flex;
  align-items: center;
  min-height: 807px;
  padding-block: var(--space-xxl);
}

.standards-band__inner {
  width: 100%;
}

.standards-band__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  color: var(--color-8);
  margin: 0 0 var(--space-md);
  max-width: 20ch;
}

/* Gap to the image/list split lives on .standards-band__head (below), not here,
   so it holds even when the lede is empty. */
.standards-band__lede {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  color: var(--color-8);
  margin: 0;
  max-width: 52ch;
}

.standards-band__body {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
}

.standards-band__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.standards-band__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.standards-band__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
}

.standards-band__item {
  border-top: 2px solid var(--color-12);
  padding-top: var(--space-lg);
}

.standards-band__item-title {
  font-family: var(--font-display);
  font-size: var(--text-base-lg);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  color: var(--color-8);
  margin: 0 0 var(--space-sm);
}

.standards-band__item-body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-11);
  margin: 0;
}








/* Layerly — About band 4: ctas/photo-band — veiled photo ground, centred CTA copy, orange button, white curve divider — 2026-08-24T19:16:26.511Z */
.photo-cta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 634px;
  padding-block: var(--space-xxl);
  overflow: hidden;
  text-align: center;
}

.photo-cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.photo-cta__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-cta__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(249, 243, 239, .9);
}

.photo-cta__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.photo-cta__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  color: var(--color-8);
  margin: 0 0 var(--space-lg);
  max-width: 20ch;
}

.photo-cta__lede {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  color: var(--color-8);
  margin: 0 0 var(--space-md);
  max-width: 46ch;
}

.photo-cta__body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-11);
  margin: 0 0 var(--space-xl);
  max-width: 62ch;
}

.photo-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

.photo-cta .btn {
  background: var(--color-12);
  border-color: var(--color-12);
  color: var(--color-8);
  border-radius: var(--radius-md);
  font-family: var(--font-4);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  padding: var(--space-md) var(--space-xl);
}

.photo-cta .btn:hover, .photo-cta .btn:focus-visible {
  background: var(--color-8);
  border-color: var(--color-8);
  color: var(--color-10);
}

.photo-cta .btn:focus-visible {
  outline: 2px solid var(--color-8);
  outline-offset: 3px;
}

.photo-cta.section--divider-bottom-curve::before {
  height: var(--divider-h, 55px);
  background-color: var(--color-10);
  z-index: 3;
}

.photo-cta.section--divider-bottom-curve {
  --divider-h: clamp(28px, 4.3vw, 55px);
  padding-bottom: calc(var(--space-xxl) + var(--divider-h));
}




/* Layerly — About bands 2-4: stack the two-column grids and drop the measured desktop min-heights below 900px — 2026-08-24T19:22:12.162Z */
@media (max-width: 900px) {
  .gap-split { min-height: 0; }
  .gap-split__inner { grid-template-columns: 1fr; }
  .gap-split__figure--b { margin-top: 0; }

  /* Bio split: single column on narrow screens, copy always above the photo
     (the media-left variant must not strand the image above its heading). */
  .bio-split { min-height: 0; }
  .bio-split__inner { grid-template-columns: 1fr; }
  .bio-split--media-left .bio-split__copy,
  .bio-split--media-left .bio-split__media {
    grid-column: 1;
    grid-row: auto;
  }
  .standards-band { min-height: 0; }
  .standards-band__body { grid-template-columns: 1fr; }
  .standards-band__list { grid-template-columns: 1fr; }
  .photo-cta { min-height: 0; }
}














/* Layerly — Item 1: make the whole service card a link target (stretched link) without changing its resting appearance — 2026-08-24T19:39:54.655Z */
.icon-cards__list .icon-cards__card {
  position: relative;
}

.icon-cards__card-link {
  color: inherit;
  text-decoration: none;
}

.icon-cards__card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

/* No hover underline — the orange border is the affordance (matches homepage). */
.icon-cards__card:hover .icon-cards__card-link {
  text-decoration: none;
}

.icon-cards__card-link:focus-visible {
  outline: 2px solid var(--color-8);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.icon-cards__card-link:focus-visible::after {
  outline: 2px solid var(--color-8);
  outline-offset: 3px;
}

.service-cards__list .service-cards__card {
  position: relative;
}

.service-cards__card-link {
  color: inherit;
  text-decoration: none;
}

.service-cards__card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

/* No underline on hover — the 4px orange border (--color-12) is this card's
   hover affordance, so the underline was a second, competing signal. */
.service-cards__card:hover .service-cards__card-link {
  text-decoration: none;
}

.service-cards__card-link:focus-visible {
  outline: 2px solid var(--color-8);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.service-cards__card-link:focus-visible::after {
  outline: 2px solid var(--color-8);
  outline-offset: 3px;
}


/* Layerly — single-service.php: hero (rounded-bottom dark photo band + nav over it), five varied body-band layouts, cream slant-top explore band — 2026-08-24T20:51:41.283Z */
.service-hero, .service-section, .service-explore {
  --color-8: #000000;
  --color-9: #F9F3EF;
  --color-10: #FFFFFF;
  --color-11: #333333;
  --color-12: #FF8040;
  --font-4: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --card-hairline: color-mix(in srgb, var(--color-8) 16%, transparent);
  --color-text: var(--color-8);
  --color-text-muted: var(--color-11);
  --text-sm: 15px;
  --text-md: 16px;
  --text-base-lg: 18px;
  --text-lg: 22px;
  --text-h3: clamp(22px, 2.4vw, 32px);
  --text-h2: clamp(28px, 3.2vw, 40px);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --space-lg: 20px;
  --space-xl: clamp(24px, 3vw, 30px);
  --font-display: var(--font-4);
  --font-body: var(--font-4);
  --service-band-pad: clamp(48px, 6vw, 88px);
  --service-gutter: clamp(32px, 5vw, 88px);
  --hero-corner: 48px;
  --explore-angle: 72px;
  font-family: var(--font-4);
}

.service-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 440px;
  padding-top: calc(var(--nav-h, 131px) + var(--space-xl));
  padding-bottom: clamp(32px, 4vw, 56px);
  overflow: hidden;
  border-bottom-left-radius: var(--hero-corner);
  border-bottom-right-radius: var(--hero-corner);
  background: var(--section-bg-color, var(--color-8));
}

.service-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.service-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.service-hero__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.76) 100%);
}

.service-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.service-hero__eyebrow {
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-10);
}

.service-hero__title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: var(--weight-bold);
  line-height: 1.08;
  color: var(--color-10);
}

body.single-service .nav {
  --color-8: #000000;
  --color-10: #FFFFFF;
  --color-12: #FF8040;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  --nav-bg: transparent;
  --nav-fg: var(--color-10);
}

body.single-service .nav.is-scrolled {
  box-shadow: none;
}

body.single-service .nav__menu {
  background: transparent;
}

body.single-service .nav__menu .nav__list a {
  color: var(--color-10);
}

.service-section {
  padding-block: var(--service-band-pad);
  background: var(--section-bg-color, var(--color-10));
  color: var(--color-11);
}

.service-section--cream {
  background: var(--section-bg-color, var(--color-9));
}

.service-section__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

.service-section__head {
  min-width: 0;
}

.service-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.14;
  color: var(--color-8);
}

.service-section__body {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.service-section__p {
  margin: 0;
  max-width: 68ch;
  font-size: var(--text-base-lg);
  line-height: 1.72;
  color: var(--color-11);
}

.service-section__p a {
  color: var(--color-8);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-decoration-color: var(--color-12);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.service-section__p a:hover {
  color: var(--color-12);
}

.service-section__p a:focus-visible {
  outline: 2px solid var(--color-8);
  outline-offset: 2px;
}

.service-section--split .service-section__inner {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--service-gutter);
}

.service-section--split .service-section__title {
  max-width: 17ch;
}

.service-section--stack .service-section__inner {
  justify-items: center;
}

.service-section--stack .service-section__head {
  max-width: 26ch;
  text-align: center;
}

.service-section--stack .service-section__body {
  max-width: 72ch;
}

.service-section--offset .service-section__head {
  width: 100%;
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--card-hairline);
}

.service-section--offset .service-section__title {
  max-width: 24ch;
}

.service-section--offset .service-section__body {
  width: min(100%, 64ch);
  margin-left: auto;
}

.service-section--checklist .service-section__inner {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--service-gutter);
}

.service-section--checklist .service-section__title {
  max-width: 17ch;
}

.service-checklist {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.service-checklist__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-lg);
  border: 1px solid var(--card-hairline);
  border-radius: var(--radius-md);
}

.service-section--light .service-checklist__item {
  background: var(--color-9);
}

.service-section--cream .service-checklist__item {
  background: var(--color-10);
}

.service-checklist__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--color-12);
  color: var(--color-8);
}

.service-checklist__mark .icon {
  display: block;
  width: 15px;
  height: 15px;
}

.service-checklist__mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.service-checklist__copy {
  display: grid;
  gap: var(--space-xs);
}

.service-checklist__label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  color: var(--color-8);
}

.service-checklist__text {
  font-size: var(--text-md);
  line-height: 1.62;
  color: var(--color-11);
}

.service-section--closing {
  padding-block: clamp(40px, 5vw, 72px);
}

.service-section--closing .service-section__head {
  max-width: 28ch;
  padding-top: var(--space-lg);
  border-top: 3px solid var(--color-12);
}

.service-section--closing .service-section__title {
  font-size: var(--text-h3);
}

.service-section--closing .service-section__body {
  max-width: 64ch;
}

.service-section__actions {
  margin: var(--space-sm) 0 0;
}

.service-section__contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-8);
  text-decoration: underline;
  text-decoration-color: var(--color-12);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.service-section__contact:hover {
  color: var(--color-12);
}

.service-section__contact:focus-visible {
  outline: 2px solid var(--color-8);
  outline-offset: 3px;
}

.service-section--last {
  padding-bottom: calc(var(--service-band-pad) + var(--explore-angle));
}

.service-explore {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--explore-angle) * -1);
  padding-top: calc(var(--service-band-pad) + var(--explore-angle));
  padding-bottom: var(--service-band-pad);
  clip-path: polygon(0 var(--explore-angle), 100% 0, 100% 100%, 0 100%);
  background: var(--section-bg-color, var(--color-9));
}

.service-hero + .service-explore {
  margin-top: 0;
  padding-top: var(--service-band-pad);
  clip-path: none;
}

.service-explore__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--service-gutter);
  align-items: start;
}

.service-explore__title {
  margin: 0 0 var(--space-lg);
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.14;
  color: var(--color-8);
}

.service-explore__cta {
  background: var(--color-12);
  border-color: var(--color-12);
  color: var(--color-8);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  padding: var(--space-md) var(--space-xl);
}

.service-explore__cta:hover, .service-explore__cta:focus-visible {
  background: var(--color-8);
  border-color: var(--color-8);
  color: var(--color-10);
}

.service-explore__cta:focus-visible {
  outline: 2px solid var(--color-8);
  outline-offset: 3px;
}

.service-explore__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
}

.service-explore__card {
  position: relative;
  padding: var(--space-xl);
  background: var(--color-9);
  border: 4px solid var(--card-hairline);
  border-radius: var(--radius-md);
  transition: border-color 160ms ease;
}

/* Match the homepage service cards: brand orange (--color-12) hover border. */
.service-explore__card:hover,
.service-explore__card:focus-within {
  border-color: var(--color-12, #FF8040);
}

@media (prefers-reduced-motion: reduce) {
  .service-explore__card { transition: none; }
}

.service-explore__card-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  color: var(--color-8);
}

.service-explore__card-link {
  color: inherit;
  text-decoration: none;
}

.service-explore__card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

/* No hover underline — the orange border is the affordance (matches homepage). */
.service-explore__card:hover .service-explore__card-link {
  text-decoration: none;
}

.service-explore__card-link:focus-visible {
  outline: 2px solid var(--color-8);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.service-explore__card-body {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.62;
  color: var(--color-11);
}

@media (max-width: 900px) {
  .service-section--split .service-section__inner,
  .service-section--checklist .service-section__inner,
  .service-explore__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-checklist {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-section--split .service-section__title,
  .service-section--checklist .service-section__title,
  .service-section--offset .service-section__title,
  .service-explore__title {
    max-width: none;
  }

  .service-section--offset .service-section__body {
    margin-left: 0;
  }
}

@media (max-width: 700px) {
  .service-hero, .service-section, .service-explore {
    --hero-corner: 26px;
    --explore-angle: 32px;
  }

  .service-hero {
    min-height: 380px;
  }

  body.single-service .nav__menu {
    background: var(--color-8);
  }
}


/* Layerly — Standards band: add breathing room between the heading block and the image/list split — 2026-08-26T18:16:11.327Z */
.standards-band__head {
  margin-bottom: clamp(56px, 7vw, 96px);
}


/* Layerly — Comparison table section: heading block, semantic table with scrollable region, token-driven spacing/type — 2026-08-26T18:56:22.535Z */
.comparison {
  padding-block: var(--space-xxl);
  background-color: var(--section-bg-color, var(--color-bg));
  color: var(--color-text);
}

.comparison__head {
  margin-bottom: clamp(32px, 4vw, 56px);
}

.comparison__title {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.15;
}

.comparison__lede {
  margin: var(--space-md) 0 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  max-width: 60ch;
}

.comparison__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

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

.comparison__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}

.comparison__col-head {
  padding: var(--space-lg) var(--space-md);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  text-align: left;
  vertical-align: bottom;
  border-bottom: 2px solid var(--color-primary);
}

.comparison__cell {
  padding: var(--space-lg) var(--space-md);
  font-size: var(--text-md);
  line-height: 1.55;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.comparison__cell-body {
  margin: 0;
}

.comparison__cell-body + .comparison__cell-body {
  margin-top: var(--space-sm);
}

.comparison__col-head:first-child, .comparison__cell:first-child {
  padding-left: 0;
}

.comparison__col-head:last-child, .comparison__cell:last-child {
  padding-right: 0;
}


/* Layerly — Process steps (numbered): bring catalog card onto the site's house step-card pattern — scoped tokens, Cal Sans, white cards on cream, orange numeral badge — 2026-08-26T19:21:21.253Z */
.process-steps--numbered {
  --color-8: #000000;
  --color-9: #F9F3EF;
  --color-10: #FFFFFF;
  --color-11: #333333;
  --color-12: #FF8040;
  --color-13: #2CA5F4;
  --font-4: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-4);
  --font-body: var(--font-4);
  --text-xs: 12px;
  --text-sm: 15px;
  --text-md: 16px;
  --text-base-lg: 18px;
  --text-lg: 22px;
  --text-h2: clamp(30px, 4.2vw, 48px);
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --space-lg: 20px;
  --space-xl: clamp(24px, 3vw, 30px);
  --space-xxl: clamp(40px, 6vw, 60px);
  --color-text: var(--color-8);
  --color-text-muted: var(--color-11);
  font-family: var(--font-4);
  color: var(--color-text);
  background-color: var(--section-bg-color, var(--color-9));
  padding-block: var(--space-xxl);
}

.process-steps--numbered .process-steps__head {
  max-width: 68ch;
  margin-bottom: var(--space-xxl);
}

.process-steps--numbered .process-steps__head h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: var(--weight-bold);
  line-height: 1.08;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
  max-width: 16ch;
}

.process-steps--numbered .process-steps__lede {
  font-size: var(--text-base-lg);
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

.process-steps--numbered .process-steps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-xl);
  align-items: stretch;
}

.process-steps--numbered .process-steps__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  background: var(--color-10);
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  text-align: left;
}

.process-steps--numbered .process-steps__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--color-12);
  color: var(--color-8);
  font-family: var(--font-display);
  font-size: var(--text-base-lg);
  font-weight: var(--weight-bold);
  line-height: 1;
  opacity: 1;
  margin: 0 0 var(--space-sm);
}

.process-steps--numbered .process-steps__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--color-text);
  margin: 0;
}

.process-steps--numbered .process-steps__desc {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}


/* Layerly — Process steps (numbered): drop inherited legacy angled-divider bottom padding (216px of dead space) — 2026-08-26T19:22:24.994Z */
section.section.process-steps.process-steps--numbered {
  padding-bottom: var(--space-xxl);
}


/* Layerly — Process steps (numbered): white curve divider at the bottom, matching the site's 55px house pattern; padding override sized to clear the curve — 2026-08-26T19:26:57.152Z */
.process-steps--numbered.section--divider-bottom-curve::before {
  height: var(--divider-h, 55px);
  background-color: var(--color-10);
}

section.section.process-steps.process-steps--numbered.section--divider-bottom-curve {
  --divider-h: clamp(28px, 4.3vw, 55px);
  padding-bottom: calc(var(--space-xxl) + var(--divider-h));
}


/* Layerly — Audience panel: switch text from white (photo band) to dark tokens now the band is beige — 2026-08-26T19:29:45.582Z */
/* Panel carries the tinted photograph again, so panel text returns to white.
   (Dark-token override removed — it applied only while the panel was flat beige.) */
.audience-panel__box--media .audience-panel__title,
.audience-panel__box--media .audience-panel__lede,
.audience-panel__box--media .audience-panel__body,
.audience-panel__box--media .audience-panel__tag,
.audience-panel__box--media .audience-panel__tag-label {
  color: var(--color-10);
}

/* (Flat-beige muted-text override removed — panel is a tinted photo again.) */


/* Layerly — Audience panel: photo + dark tint on the panel box so the section's beige shows behind it — 2026-08-26T20:29:10.830Z */
.audience-panel__box--media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-8);
  background-image: var(--panel-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.audience-panel__box--media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgb(0 0 0 / var(--panel-overlay, 0.62));
  border-radius: inherit;
  pointer-events: none;
}


/* Layerly — Bio split: two-column copy+photo band, reversible media column, house tokens — 2026-08-26T21:10:31.836Z */
.bio-split {
  --color-8: #000000;
  --color-9: #F9F3EF;
  --color-10: #FFFFFF;
  --color-11: #333333;
  --color-12: #FF8040;
  --color-13: #2CA5F4;
  --font-4: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-4);
  --font-body: var(--font-4);
  --text-xs: 12px;
  --text-sm: 15px;
  --text-md: 16px;
  --text-base-lg: 18px;
  --text-lg: 22px;
  --text-h2: clamp(30px, 4.2vw, 48px);
  --radius-md: 10px;
  --radius-lg: 20px;
  --space-lg: 20px;
  --space-xl: clamp(24px, 3vw, 30px);
  --space-xxl: clamp(40px, 6vw, 60px);
  --color-text: var(--color-8);
  --color-text-muted: var(--color-11);
  font-family: var(--font-4);
  color: var(--color-text);
  background-color: var(--section-bg-color, var(--color-10));
  display: flex;
  align-items: center;
  padding-block: var(--space-xxl);
}

.bio-split__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}

.bio-split--media-left .bio-split__copy {
  grid-column: 2;
  grid-row: 1;
}

.bio-split--media-left .bio-split__media {
  grid-column: 1;
  grid-row: 1;
}

.bio-split__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  color: var(--color-8);
  margin: 0 0 var(--space-lg);
  max-width: 18ch;
}

.bio-split__lede {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  color: var(--color-8);
  margin: 0 0 var(--space-lg);
  max-width: 46ch;
}

.bio-split__body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-11);
  margin: 0 0 var(--space-md);
  max-width: 60ch;
}

.bio-split__body:last-child {
  margin-bottom: 0;
}

.bio-split__media {
  display: block;
}

.bio-split__figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.bio-split__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.bio-split__caption {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.bio-split.section--divider-bottom-curve::before {
  height: var(--divider-h, 55px);
  background-color: var(--color-10);
}

.bio-split.section--divider-bottom-curve {
  --divider-h: clamp(28px, 4.3vw, 55px);
  padding-bottom: calc(var(--space-xxl) + var(--divider-h));
}


/* Layerly — Service single: media-paired band (reversible), two-column text band, 3/4-up numbered card grid — 2026-08-27T16:01:31.172Z */
.service-section--media .service-section__inner {
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--service-gutter);
  align-items: center;
  align-content: center;
  grid-template-areas: "head media" "body media";
}

.service-section--media .service-section__head {
  grid-area: head;
  align-self: end;
}

.service-section--media .service-section__body {
  grid-area: body;
  align-self: start;
  padding-top: var(--space-md);
}

.service-section--media .service-section__media {
  grid-area: media;
}

.service-section--media.service-section--flip .service-section__inner {
  grid-template-areas: "media head" "media body";
}

.service-section--media .service-section__title {
  max-width: 18ch;
}

.service-section__media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.service-section__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.service-section--twocol .service-section__inner {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--service-gutter);
}

.service-section--twocol .service-section__title {
  max-width: 17ch;
}

.service-section--twocol .service-section__body {
  columns: 2;
  column-gap: var(--service-gutter);
}

.service-section--twocol .service-section__p {
  break-inside: avoid;
  max-width: none;
}

.service-section--cards .service-section__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.service-section--cards .service-section__title {
  max-width: 24ch;
}

.service-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}

.service-section--cols-4 .service-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  border-radius: var(--radius-md);
  border: 1px solid var(--card-hairline);
}

.service-section--light .service-grid__item {
  background: var(--color-9);
}

.service-section--cream .service-grid__item {
  background: var(--color-10);
}

.service-grid__num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--color-12);
}

.service-grid__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.service-grid__label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  color: var(--color-8);
}

.service-grid__text {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-11);
}


/* Layerly — Hero overlay CTA button on homepage: change background from brand orange to blue per approved client feedback — 2026-08-31T15:32:56.313Z */
body.home .hero-overlay .btn.hero-overlay__cta {
  background: var(--color-13);
  border-color: var(--color-13);
  color: var(--color-8);
}


/* Layerly — Hover/focus state for homepage hero overlay CTA button to pair with the new blue background — 2026-08-31T15:33:02.186Z */
body.home .hero-overlay .btn.hero-overlay__cta:hover, body.home .hero-overlay .btn.hero-overlay__cta:focus-visible {
  background: var(--color-10);
  border-color: var(--color-10);
  color: var(--color-8);
}


/* Layerly — Layout for the new footer contact form + card band (two-column, tokens only) — 2026-08-31T15:39:44.421Z */
.footer-contact {
  background: var(--color-bg);
  padding-block: var(--space-xxl);
}

.footer-contact__inner {
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
  flex-wrap: wrap;
}

.footer-contact__form {
  flex: 1 1 480px;
  min-width: 280px;
}

.footer-contact__card {
  flex: 1 1 320px;
  min-width: 260px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.footer-contact__card-heading {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-sm);
  color: var(--color-1);
}

.footer-contact__card-copy {
  color: var(--color-2);
  margin: 0 0 var(--space-md);
}

.footer-contact__card-phone {
  display: inline-block;
  font-weight: 600;
  color: var(--color-1);
  text-decoration: none;
}

.footer-contact__card-phone:hover {
  text-decoration: underline;
}


/* Layerly —  — 2026-09-01 14:10:03 */
/* ── Client revisions, 2026-09-01 ─────────────────────────────────────────────
   1. FILLED BUTTONS: one blue, white text, everywhere. Outline/secondary
      buttons are deliberately untouched — they were already right.
      The blue is --color-1-strong (#1565C0), NOT the lighter --color-13
      (#2CA5F4) the homepage hero was using. Reason, and it is the theme's own:
      the stylesheet already documents #2196F3 as "only 3.12:1 on white — it
      FAILS the 4.5:1 text floor", which is why --color-1-strong exists. White
      on #2CA5F4 measures 2.7:1 and would be unreadable; white on #1565C0 is
      5.7:1 and passes AA. Same blue family, one step darker.
      Selectors are specific enough to beat the mobile rule
      `.nav__menu[data-mobile-menu] .nav__cta` (0,3,0), which an earlier
      (0,2,1) attempt lost to.
   2. BEIGE -> LIGHT GREY sitewide: --color-9 was #F9F3EF (warm beige) and is
      redeclared here as --color-3's light grey on the same 16 selector groups
      the theme declares it on, so the change reaches every section at once
      instead of chasing 16 usages. */

.hero-overlay, .brand-band, .media-split, .photo-mosaic, .approach, .step-list,
.cta-band, .approach-cards, .audience-band, .nav, .footer, .layerly-copyright,
.service-cards, .audience-panel, .step-row, .icon-cards, .media-band,
.compact-cta, .disclosures, .panel-cta, .step-grid, .gap-split, .standards-band,
.photo-cta, .service-hero, .service-section, .service-explore,
.process-steps--numbered, .bio-split {
  --color-9: #F5F5F5;
}

body .btn.btn--primary,
body .nav .nav__menu .nav__cta,
body .nav .nav__menu[data-mobile-menu] .nav__cta,
body .hero-overlay .btn.hero-overlay__cta,
body .cta-band .btn.btn--primary {
  background: var(--color-1-strong);
  border-color: var(--color-1-strong);
  color: #FFFFFF;
}
body .btn.btn--primary:hover, body .btn.btn--primary:focus-visible,
body .nav .nav__menu .nav__cta:hover, body .nav .nav__menu .nav__cta:focus-visible,
body .nav .nav__menu[data-mobile-menu] .nav__cta:hover,
body .hero-overlay .btn.hero-overlay__cta:hover,
body .cta-band .btn.btn--primary:hover {
  background: var(--color-6);
  border-color: var(--color-6);
  color: #FFFFFF;
}


/* Layerly —  — 2026-09-01 14:11:04 */
/* Two filled CTAs the previous block's specificity did not reach (2026-09-01):
   the homepage hero button carries an inline-scoped `body.home .hero-overlay
   .btn.hero-overlay__cta` rule (0,4,1), and the media-split "About us" button is
   styled by its own `.media-split__cta` class rather than .btn--primary. Both are
   brought onto the same blue + white as every other filled CTA.
   Deliberately NOT changed: `.service-cards__panel-btn`, the white button on the
   dark panel — that is an inverse fill, the same category as the outline buttons,
   and blue on that panel would lose contrast rather than gain consistency. */
html body.home .hero-overlay .btn.btn--primary.hero-overlay__cta,
html body .hero-overlay .btn.btn--primary.hero-overlay__cta,
html body .media-split .btn.media-split__cta {
  background: var(--color-1-strong);
  border-color: var(--color-1-strong);
  color: #FFFFFF;
}
html body.home .hero-overlay .btn.btn--primary.hero-overlay__cta:hover,
html body .hero-overlay .btn.btn--primary.hero-overlay__cta:hover,
html body .media-split .btn.media-split__cta:hover {
  background: var(--color-6);
  border-color: var(--color-6);
  color: #FFFFFF;
}


/* Layerly —  — 2026-09-01 19:33:34 */

/* Street address in the footer contact card (client, 2026-09-01). <address> is
   italic by default in every browser, which would not match the card's other
   copy — reset it and inherit the card's own type rather than inventing a style. */
.footer-contact__card-address {
  font-style: normal;
  margin: 0 0 var(--space-sm, 12px);
  line-height: 1.55;
  color: inherit;
}