/*
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
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;
    --space-xl:  40px;
    --space-xxl: 80px;

    /* Type scale — t-shirt sized. */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 28px;
    --text-h3: 32px;
    --text-h2: 44px;
    --text-h1: 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 scale */
@media (max-width: 768px) {
    :root {
        --text-h1: 40px;
        --text-h2: 32px;
        --text-h3: 24px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   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);
    overflow: hidden;  /* keep decorations/dividers contained */
}

/* 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%);
}

/* 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 ── */
.cpt-loop { background: 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 ── */
.cta-banner {
    background: 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);
        background: var(--mobile-menu-bg, var(--nav-bg, var(--color-1)));
        color: var(--mobile-menu-fg, var(--nav-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); }
    body.mobile-menu-open { overflow: hidden; }
}

/* ── 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; }
.layerly-copyright a { color: inherit; 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);
    background: 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); }
}


/* Layerly — CHART design tokens + bespoke chrome + all 11 homepage section styles — 2026-07-20 19:13:54 */
/* ── CHART design tokens (from Figma) ── */
:root {
    --color-1: #1F1F1F;
    --color-2: #5F6368;
    --color-3: #E8E8E8;
    --color-4: #FFFFFF;
    --color-5: #2E4A3B;
    --color-6: #D2DDCD;
    --color-7: #73AF68;
    --color-8: #95A297;
    --color-primary: #2E4A3B;
    --color-text: #1F1F1F;
    --color-text-muted: #5F6368;
    --color-bg: #FFFFFF;
    --color-surface: #E8E8E8;
    --color-border: #95A297;
    --font-1: 'Libre Franklin', sans-serif;
    --font-display: var(--font-1);
    --font-body: var(--font-1);
    --space-xxxl: 120px;
    --footer-copyright-bg: var(--color-1);
    --footer-copyright-fg: var(--color-6);
}

/* ── Chrome: nav/chart (transparent-over-hero, solidifies on scroll) ── */
.nav--chart{--nav-bg:transparent;--nav-fg:var(--color-4);--nav-height:67px;--nav-link-weight:var(--weight-bold);--nav-link-hover:var(--color-6);--nav-gap:var(--space-sm);position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--nav-bg);transition:background-color .2s,box-shadow .2s;}
.nav--chart .nav__inner{padding-block:var(--space-sm);}
.nav--chart.is-scrolled{--nav-bg:var(--color-4);--nav-fg:var(--color-1);--nav-link-hover:var(--color-5);box-shadow:var(--sh-sm);}
.nav--chart .nav__logo-img{max-height:40px;}
.nav--chart .nav__list a{padding:var(--space-xs) var(--space-md);}
.btn--nav-cta{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-md) var(--space-xl);background:var(--color-4);color:var(--color-1);border-radius:var(--radius-sm);font-weight:var(--weight-bold);text-decoration:none;white-space:nowrap;}
.btn--nav-cta:hover{background:var(--color-6);}

/* ── Chrome: footers/chart ── */
.footer--chart{background:var(--color-3);padding-block:var(--space-xxl) var(--space-lg);}
.footer--chart .footer__inner{display:flex;flex-direction:column;gap:var(--space-lg);padding-block:0;}
.footer__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xl);padding-bottom:var(--space-lg);flex-wrap:wrap;}
.footer__logo-img{max-height:40px;}
.footer__tagline{margin:0;font-size:var(--text-md);font-weight:var(--weight-bold);color:var(--color-1);text-align:center;max-width:420px;}
.footer__nav-list{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-xs);flex-wrap:wrap;}
.footer__nav-list a{display:inline-flex;padding:var(--space-xs) var(--space-md);color:var(--color-2);text-decoration:none;font-size:var(--text-sm);}
.footer__nav-list a:hover{color:var(--color-5);}
.footer__divider{height:1px;background:var(--color-6);width:100%;}
.footer__legal-and-social{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--space-lg);flex-wrap:wrap;}
.footer__legal-list{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-xs);}
.footer__legal-list a{display:inline-flex;padding:var(--space-xs) var(--space-md);color:var(--color-8);text-decoration:none;font-size:var(--text-sm);}
.footer__social{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-sm);}
.footer__social a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-full);background:var(--color-5);color:var(--color-6);}
.footer__social a:hover{background:var(--color-1);}

/* ── heroes/image-bottom-aligned ── */
.hero--image-bottom-aligned{position:relative;min-height:800px;display:flex;overflow:hidden;padding:0;}
.hero--image-bottom-aligned .hero__bg{position:absolute;inset:0;z-index:0;}
.hero--image-bottom-aligned .hero__bg img{width:100%;height:100%;object-fit:cover;}
.hero--image-bottom-aligned .hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(31,31,31,.15) 0%, rgba(31,31,31,.8) 100%);}
.hero--image-bottom-aligned .hero__inner{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-lg);padding:var(--space-xxxl) var(--space-xl) var(--space-xxl) var(--space-xl);max-width:none;}
.hero--image-bottom-aligned .hero__title{font-size:93px;line-height:1;font-weight:var(--weight-bold);color:var(--color-4);margin:0;max-width:1064px;}
.hero--image-bottom-aligned .hero__meta{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-sm);}
.hero--image-bottom-aligned .hero__subtitle{margin:0;font-size:18px;line-height:25px;font-weight:var(--weight-reg);color:var(--color-6);max-width:600px;}
.hero--image-bottom-aligned .hero__meta-icon{color:var(--color-5);flex-shrink:0;}
.hero--image-bottom-aligned .hero__divider{height:1px;background:var(--color-6);width:100%;}
@media (max-width:768px){.hero--image-bottom-aligned{min-height:640px;}.hero--image-bottom-aligned .hero__inner{padding:var(--space-xl) var(--space-lg);}.hero--image-bottom-aligned .hero__title{font-size:var(--text-h1);}}

/* ── intro-blocks/two-col-cta ── */
.intro-block--two-col-cta{background:var(--color-3);padding-block:var(--space-xxxl) var(--space-xxl);}
.intro-block__inner{display:flex;flex-direction:column;gap:var(--space-xl);}
.intro-block__title{font-size:var(--text-h2);line-height:1.09;color:var(--color-1);margin:0;max-width:900px;}
.intro-block__divider{height:1px;background:var(--color-7);width:100%;}
.intro-block__row{display:flex;align-items:flex-start;gap:var(--space-xxl);}
.intro-block__col{margin:0;color:var(--color-2);}
.intro-block__col--left{font-size:var(--text-md);line-height:22px;font-weight:var(--weight-reg);flex:1;max-width:510px;}
.intro-block__col--right{font-size:var(--text-lg);line-height:28px;font-weight:var(--weight-bold);flex:1;max-width:530px;}
.intro-block__vline{width:1px;align-self:stretch;background:var(--color-7);}
.intro-block__cta{align-self:flex-start;}
@media (max-width:880px){.intro-block__row{flex-direction:column;gap:var(--space-lg);}.intro-block__vline{display:none;}}

/* ── checklists/five-item-bordered ── */
.checklist--five-item-bordered{background:var(--color-6);padding-top:var(--space-xxxl);}
.checklist__head{display:flex;flex-direction:column;gap:var(--space-lg);margin-bottom:var(--space-xl);}
.checklist__title{font-size:var(--text-h2);line-height:1.09;color:var(--color-1);margin:0;max-width:600px;}
.checklist__meta{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-sm);}
.checklist__subtitle{margin:0;font-size:18px;line-height:25px;color:var(--color-2);max-width:400px;}
.checklist__meta-icon{color:var(--color-8);}
.checklist__divider{height:1px;background:var(--color-8);width:100%;}
.checklist__body{display:flex;flex-direction:column;gap:var(--space-xl);}
.checklist__intro{margin:0;font-size:var(--text-lg);line-height:28px;font-weight:var(--weight-bold);color:var(--color-1);max-width:660px;}
.checklist__list{list-style:none;margin:0;padding:var(--space-lg) 0;display:flex;border-top:1px solid var(--color-8);border-bottom:1px solid var(--color-8);}
.checklist__item{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-lg);padding:var(--space-sm) var(--space-lg);border-left:1px solid var(--color-8);}
.checklist__item:first-child{border-left:none;padding-left:0;}
.checklist__item:last-child{padding-right:0;}
.checklist__check{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-full);border:3px solid var(--color-2);color:var(--color-2);}
.checklist__text{color:var(--color-2);font-size:18px;line-height:25px;}
.checklist__outro{margin:0;font-size:var(--text-lg);line-height:28px;font-weight:var(--weight-bold);color:var(--color-1);max-width:660px;}
@media (max-width:900px){.checklist__list{flex-direction:column;border:none;}.checklist__item{border-left:none;border-top:1px solid var(--color-8);padding-left:0;}.checklist__item:first-child{border-top:none;}}

/* ── process-steps/label-rows ── */
.process-steps--label-rows{background:var(--color-3);padding-top:var(--space-xxxl);}
.process-label__head{display:flex;flex-direction:column;gap:var(--space-lg);margin-bottom:var(--space-xl);}
.process-label__title{font-size:var(--text-h2);line-height:1.09;color:var(--color-1);margin:0;max-width:600px;}
.process-label__meta{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-sm);}
.process-label__subtitle{margin:0;font-size:18px;line-height:25px;color:var(--color-2);max-width:400px;}
.process-label__meta-icon{color:var(--color-7);}
.process-label__divider{height:1px;background:var(--color-7);width:100%;}
.process-label__body{display:flex;flex-direction:column;gap:var(--space-xl);}
.process-label__intro{margin:0;font-size:var(--text-lg);font-weight:var(--weight-bold);line-height:28px;color:var(--color-2);max-width:660px;}
.process-label__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-lg);}
.process-label__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding-block:var(--space-lg);border-top:1px solid var(--color-8);}
.process-label__label{flex:0 0 240px;font-size:var(--text-h3);font-weight:var(--weight-bold);color:var(--color-1);}
.process-label__desc{flex:1;max-width:680px;font-size:18px;line-height:25px;color:var(--color-2);}
.process-label__close{display:flex;flex-direction:column;gap:var(--space-xl);padding-top:var(--space-lg);}
.process-label__outro{margin:0;font-size:var(--text-h3);font-weight:var(--weight-med);line-height:38px;color:var(--color-7);max-width:660px;}
@media (max-width:768px){.process-label__row{flex-direction:column;align-items:flex-start;gap:var(--space-sm);}.process-label__label{flex:none;}}

/* ── split-panels (dark-image-right / -badges) ── */
.split-panel--dark-image-right{background:var(--color-3);padding-top:var(--space-md);padding-bottom:0;}
.split-panel--dark-image-right-badges{background:var(--color-3);padding-top:var(--space-xl);padding-bottom:0;}
.split-panel__grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.split-panel__content{background:var(--color-5);display:flex;flex-direction:column;gap:var(--space-xxl);padding-top:var(--space-xxl);padding-bottom:var(--space-xxl);padding-right:var(--space-xl);padding-left:max(var(--space-lg), calc((100vw - var(--container-max)) / 2 + var(--space-lg)));}
.split-panel__title{font-size:var(--text-h2);line-height:1.09;color:var(--color-4);margin:0;max-width:560px;}
.split-panel__meta{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-sm);}
.split-panel__subtitle{margin:0;font-size:18px;line-height:25px;color:var(--color-7);max-width:400px;}
.split-panel__meta-icon{color:var(--color-8);}
.split-panel__divider{height:1px;background:var(--color-8);width:100%;}
.split-panel__body{display:flex;flex-direction:column;gap:var(--space-md);}
.split-panel__intro{margin:0;font-size:var(--text-lg);font-weight:var(--weight-bold);line-height:28px;color:var(--color-7);}
.split-panel__text{margin:0;font-size:var(--text-md);line-height:22px;color:var(--color-3);}
.split-panel__closing{margin:0;font-size:var(--text-lg);font-weight:var(--weight-bold);line-height:28px;color:var(--color-4);}
.split-panel__media{position:relative;min-height:100%;}
.split-panel__media img{width:100%;height:100%;object-fit:cover;display:block;}
.split-panel__badges{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-sm);flex-wrap:wrap;}
.split-panel__badge{background:var(--color-1);color:var(--color-4);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.5px;text-transform:uppercase;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);}
@media (max-width:900px){.split-panel__grid{grid-template-columns:1fr;min-height:auto;}.split-panel__content{padding:var(--space-xxl) var(--space-lg);}.split-panel__media{min-height:360px;}}

/* ── split-panels/twin-overlay-cards ── */
.split-panel--twin-overlay-cards{background:var(--color-3);padding:0;}
.twin-panel__grid{display:grid;grid-template-columns:1fr 1fr;min-height:384px;}
.twin-panel__card{position:relative;overflow:hidden;}
.twin-panel__bg{position:absolute;inset:0;z-index:0;}
.twin-panel__bg img{width:100%;height:100%;object-fit:cover;}
.twin-panel__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(31,31,31,.55) 0%, rgba(31,31,31,.85) 100%);}
.twin-panel__content{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-xl) var(--space-xl) var(--space-xxl) var(--space-xxxl);height:100%;}
.twin-panel__card:nth-child(2) .twin-panel__content{padding:var(--space-xl) var(--space-xxxl) var(--space-xxl) var(--space-xl);}
.twin-panel__head{display:flex;flex-direction:column;gap:var(--space-md);}
.twin-panel__title{margin:0;font-size:var(--text-xl);line-height:36px;color:var(--color-7);}
.twin-panel__divider{height:1px;background:var(--color-7);width:100%;}
.twin-panel__text{margin:0;color:var(--color-4);font-size:var(--text-md);line-height:22px;}
.twin-panel__text--bold{font-size:var(--text-lg);font-weight:var(--weight-bold);line-height:28px;}
@media (max-width:900px){.twin-panel__grid{grid-template-columns:1fr;}.twin-panel__content,.twin-panel__card:nth-child(2) .twin-panel__content{padding:var(--space-xl) var(--space-lg);}}

/* ── section-banners/dark-title ── */
.section-banner--dark-title{background:var(--color-5);padding-top:var(--space-xxxl);}
.section-banner__inner{display:flex;flex-direction:column;gap:var(--space-lg);}
.section-banner__title{font-size:var(--text-h2);line-height:1.09;color:var(--color-4);margin:0;max-width:660px;}
.section-banner__meta{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-sm);}
.section-banner__subtitle{margin:0;font-size:18px;line-height:25px;color:var(--color-7);max-width:420px;}
.section-banner__meta-icon{color:var(--color-8);}
.section-banner__divider{height:1px;background:var(--color-8);width:100%;}

/* ── service-grids/bordered-cards-with-cta-tile ── */
.service-grid--bordered-cards-with-cta-tile{background:var(--color-6);padding-block:var(--space-xxxl);}
.service-cta-grid__head{display:flex;flex-direction:column;gap:var(--space-lg);margin-bottom:var(--space-xxl);}
.service-cta-grid__title{font-size:var(--text-h2);line-height:1.09;color:var(--color-1);margin:0;max-width:660px;}
.service-cta-grid__meta{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-sm);}
.service-cta-grid__subtitle{margin:0;font-size:18px;line-height:25px;color:var(--color-2);max-width:400px;}
.service-cta-grid__meta-icon{color:var(--color-8);}
.service-cta-grid__divider{height:1px;background:var(--color-8);width:100%;}
.service-cta-grid__note{display:flex;gap:var(--space-xl);padding-bottom:var(--space-lg);border-bottom:1px solid var(--color-2);margin-bottom:var(--space-xxl);}
.service-cta-grid__note-col{margin:0;flex:1;font-size:18px;line-height:25px;color:var(--color-2);}
.service-cta-grid__note-divider{width:1px;align-self:stretch;background:var(--color-2);}
.service-cta-grid__heading{font-size:var(--text-xl);line-height:36px;color:var(--color-1);margin:0 0 var(--space-xxl);max-width:600px;}
.service-cta-grid__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg);}
.service-cta-grid__card{border:1px solid var(--color-2);padding:var(--space-lg);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-lg);min-height:360px;}
.service-cta-grid__card-title{font-size:var(--text-xl);line-height:31px;color:var(--color-1);margin:0;}
.service-cta-grid__card-desc{font-size:var(--text-md);line-height:22px;color:var(--color-2);margin:0;}
.service-cta-grid__card--cta{background:var(--color-1);border-color:var(--color-2);}
.service-cta-grid__cta-link{display:flex;flex-direction:column;justify-content:space-between;height:100%;text-decoration:none;gap:var(--space-lg);}
.service-cta-grid__cta-label{font-size:var(--text-h2);line-height:1.09;color:var(--color-6);font-weight:var(--weight-bold);}
.service-cta-grid__cta-arrow{display:inline-flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:var(--radius-full);background:var(--color-6);color:var(--color-5);align-self:flex-end;}
@media (max-width:1100px){.service-cta-grid__list{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.service-cta-grid__list{grid-template-columns:1fr;}.service-cta-grid__note{flex-direction:column;}.service-cta-grid__note-divider{display:none;}}

/* ── testimonials/carousel-bordered ── */
.testimonial-carousel--bordered{background:var(--color-3);padding-top:var(--space-xxxl);}
.tcb__head{display:flex;flex-direction:column;gap:var(--space-lg);margin-bottom:var(--space-xxl);}
.tcb__title{font-size:var(--text-h2);line-height:1.09;color:var(--color-1);margin:0;max-width:600px;}
.tcb__meta{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-sm);}
.tcb__subtitle{margin:0;font-size:18px;line-height:25px;color:var(--color-2);max-width:400px;}
.tcb__meta-icon{color:var(--color-7);}
.tcb__divider{height:1px;background:var(--color-7);width:100%;}
.tcb__intro{margin:0 0 var(--space-xxl);font-size:var(--text-lg);font-weight:var(--weight-bold);line-height:28px;color:var(--color-2);max-width:700px;}
.tcb__carousel{position:relative;}
.tcb__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;}
.tcb__track::-webkit-scrollbar{display:none;}
.tcb__slide{flex:0 0 100%;scroll-snap-align:start;border-top:1px solid var(--color-8);padding-top:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-xl);box-sizing:border-box;}
.tcb__quote{margin:0;font-size:var(--text-h3);font-weight:var(--weight-reg);line-height:38px;color:var(--color-1);max-width:900px;}
.tcb__foot{border-top:1px solid var(--color-8);padding-top:var(--space-lg);padding-right:160px;position:relative;}
.tcb__name{margin:0;font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--color-7);}
.tcb__nav{position:absolute;right:0;bottom:0;display:flex;gap:var(--space-sm);}
.tcb__nav-btn{appearance:none;width:48px;height:48px;border-radius:var(--radius-full);border:2px solid var(--color-2);background:transparent;color:var(--color-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.tcb__nav-btn:hover{background:var(--color-2);color:var(--color-4);}
@media (max-width:640px){.tcb__foot{padding-right:0;}.tcb__nav{position:static;justify-content:flex-end;margin-top:var(--space-md);}}

/* ── ctas/banner-photo ── */
.cta-banner--photo{position:relative;overflow:hidden;padding-top:var(--space-xxxl);}
.cta-banner-photo__bg{position:absolute;inset:0;z-index:0;}
.cta-banner-photo__bg img{width:100%;height:100%;object-fit:cover;}
.cta-banner-photo__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.8) 100%);}
.cta-banner-photo__inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--space-xl);}
.cta-banner-photo__head{display:flex;flex-direction:column;gap:var(--space-lg);}
.cta-banner-photo__title{font-size:var(--text-h2);line-height:1.09;color:var(--color-1);margin:0;max-width:520px;}
.cta-banner-photo__meta{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-sm);}
.cta-banner-photo__subtitle{margin:0;font-size:18px;line-height:25px;color:var(--color-5);max-width:500px;}
.cta-banner-photo__meta-icon{color:var(--color-1);}
.cta-banner-photo__divider{height:1px;background:var(--color-1);width:100%;}
.cta-banner-photo__body{display:flex;flex-direction:column;gap:var(--space-xl);}
.cta-banner-photo__text{margin:0;font-size:var(--text-lg);font-weight:var(--weight-bold);line-height:28px;color:var(--color-1);max-width:840px;}
.cta-banner-photo__cta{align-self:flex-start;background:var(--color-4);color:var(--color-1);border:1px solid var(--color-3);}
.cta-banner-photo__cta:hover{background:var(--color-3);}



/* Layerly — Fix hero CRITICAL padding + button text color + card title size + outro weight — 2026-07-20 19:17:30 */
/* ── Fidelity fixes ── */
.hero--image-bottom-aligned{padding:var(--space-xxxl) var(--space-xxxl) var(--space-xxl) var(--space-xxxl);}
.hero--image-bottom-aligned .hero__inner{padding:0;}
.intro-block__cta.btn--primary,
.process-label__cta.btn--primary{color:var(--color-4);}
.service-cta-grid__card-title{font-size:24px;}
.process-label__outro{font-weight:600;}



/* Layerly — Fix pass: reverted the per-section 120px gutter override (2026-07-20 19:18:11 commit)
   so every section's content sits inside the SAME shared .wrap container (max-width: var(--container-max),
   default padding-inline) as nav/footer/hero — content edges now align site-wide instead of each
   bespoke section carving its own wider/narrower gutter. */



/* Layerly — New CSS for About page bespoke sections: intro single-col-quote, comparisons/definition-cards, section-banner tight variant, twin-photo-quotes text fix — 2026-07-20 20:41:06 */

/* ── intro-blocks/single-col-quote (About: founder statement) ── */
.intro-block--single-col-quote{background:var(--color-6);padding-top:var(--space-xxxl);}
.intro-single__inner{display:flex;flex-direction:column;gap:var(--space-xl);}
.intro-single__title{font-size:var(--text-h2);line-height:1.09;color:var(--color-1);margin:0;max-width:900px;}
.intro-single__body{display:flex;flex-direction:column;gap:var(--space-xl);align-items:flex-start;}
.intro-single__paragraph{margin:0;font-size:18px;line-height:25px;color:var(--color-1);max-width:720px;}
.intro-single__divider{height:1px;background:var(--color-8);width:100%;}
.intro-single__quote{margin:0;font-size:24px;font-weight:var(--weight-bold);line-height:31px;color:var(--color-1);max-width:760px;}
.intro-single__cta.btn--primary{color:var(--color-4);}
@media (max-width:768px){.intro-single__title{max-width:none;}}

/* ── comparisons/definition-cards (About: what is a strategic bookkeeping consultant) ── */
.explainer--bookkeeping{background:var(--color-3);padding-top:var(--space-xxxl);}
.explainer__inner{display:flex;flex-direction:column;gap:var(--space-xxl);}
.explainer__head{display:flex;flex-direction:column;gap:var(--space-lg);}
.explainer__title{font-size:var(--text-h2);line-height:1.09;color:var(--color-1);margin:0;max-width:700px;}
.explainer__meta{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-sm);}
.explainer__subtitle{margin:0;font-size:18px;line-height:25px;color:var(--color-2);max-width:600px;}
.explainer__meta-icon{color:var(--color-7);}
.explainer__divider{height:1px;background:var(--color-7);width:100%;}
.explainer__body{display:flex;flex-direction:column;gap:var(--space-lg);}
.explainer__intro{margin:0;font-size:var(--text-lg);font-weight:var(--weight-bold);line-height:28px;color:var(--color-2);max-width:700px;}
.explainer__cards{display:grid;grid-template-columns:1fr 1fr;}
.explainer__card{border:1px solid var(--color-2);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-lg);}
.explainer__card + .explainer__card{border-left:none;}
.explainer__card-title{font-size:var(--text-xl);line-height:36px;color:var(--color-1);margin:0;}
.explainer__card-desc{margin:0;font-size:var(--text-md);line-height:22px;color:var(--color-2);}
.explainer__row{display:flex;align-items:flex-start;gap:var(--space-xl);padding-block:var(--space-lg);}
.explainer__row-col{margin:0;flex:1;max-width:560px;}
.explainer__row-col--left{font-size:var(--text-lg);line-height:28px;color:var(--color-1);}
.explainer__row-col--right{font-size:24px;font-weight:var(--weight-bold);line-height:31px;color:var(--color-1);}
.explainer__vline{width:1px;align-self:stretch;background:var(--color-7);}
.explainer__cta.btn--primary{align-self:flex-start;color:var(--color-4);}
@media (max-width:900px){.explainer__cards{grid-template-columns:1fr;}.explainer__card + .explainer__card{border-left:1px solid var(--color-2);border-top:none;}}
@media (max-width:880px){.explainer__row{flex-direction:column;gap:var(--space-lg);}.explainer__vline{display:none;}}

/* ── section-banners/lead-in (tighter bottom padding variant of dark-title) ── */
.section-banner--dark-title-tight{padding-bottom:var(--space-xl);}

/* ── split-panels/twin-photo-quotes (About: scope of work panels) ── */
.split-panel--twin-photo-quotes{background:var(--color-3);padding:0;}
.split-panel--twin-photo-quotes .twin-panel__grid{min-height:326px;}
.split-panel--twin-photo-quotes .twin-panel__content{justify-content:center;}
.split-panel--twin-photo-quotes .twin-panel__text:not(.twin-panel__text--bold){font-size:18px;line-height:25px;}



/* Layerly — Fix checklist item text color for About page's how-i-work section to match Figma exactly (scoped to this section only) — 2026-07-20 20:46:58 */

/* ── Fidelity fix: "how I work" values items are full-strength dark text (#1F1F1F) per Figma, not the muted color used by the symptoms checklist ── */
.section--how-i-work .checklist__text{color:var(--color-1);}



/* Layerly — CSS for the 3 bespoke Services-page sections (cleanup spotlight triple-body, full-catalogue grid, question-answer fit-guide rows) + the dark FAQ accordion reskin — 2026-07-20 20:56:58 */
/* ── split-panels/dark-image-right-triple-body (Services: cleanup spotlight) ── */
.split-panel--dark-image-right-triple-body{background:var(--color-3);padding:0;}
.split-panel--dark-image-right-triple-body .split-panel__intro{color:var(--color-4);}
.split-panel--dark-image-right-triple-body .split-panel__text--lg{font-size:var(--text-lg);line-height:28px;color:var(--color-4);}
.split-panel--dark-image-right-triple-body .split-panel__text:not(.split-panel__text--lg){color:var(--color-6);}

/* ── service-grids/full-catalogue (Services: full services grid, no cta tile) ── */
.service-grid--full-catalogue{background:var(--color-6);padding-block:var(--space-xxxl);}
.catalogue__inner{display:flex;flex-direction:column;gap:var(--space-xxl);}
.catalogue__head{display:flex;flex-direction:column;gap:var(--space-lg);}
.catalogue__title{font-size:var(--text-h2);line-height:1.09;color:var(--color-1);margin:0;max-width:700px;}
.catalogue__meta{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-sm);}
.catalogue__subtitle{margin:0;font-size:18px;line-height:25px;color:var(--color-2);max-width:500px;}
.catalogue__meta-icon{color:var(--color-8);}
.catalogue__body{display:flex;flex-direction:column;gap:var(--space-xl);}
.catalogue__intro-block{display:flex;flex-direction:column;gap:var(--space-sm);max-width:700px;}
.catalogue__intro{margin:0;font-size:var(--text-lg);font-weight:var(--weight-bold);line-height:28px;color:var(--color-1);}
.catalogue__lede{margin:0;font-size:18px;line-height:25px;color:var(--color-1);}
.catalogue__divider{height:1px;background:var(--color-8);width:100%;}
.catalogue__practice{display:flex;flex-direction:column;gap:var(--space-xl);}
.catalogue__heading{font-size:var(--text-xl);line-height:36px;color:var(--color-1);margin:0;max-width:800px;}
.catalogue__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg);}
.catalogue__card{border:1px solid var(--color-2);padding:var(--space-lg);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-lg);min-height:360px;}
.catalogue__card-title{font-size:24px;line-height:31px;color:var(--color-1);margin:0;}
.catalogue__card-desc{font-size:var(--text-md);line-height:22px;color:var(--color-2);margin:0;}
@media (max-width:1100px){.catalogue__grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.catalogue__grid{grid-template-columns:1fr;}}

/* ── process-steps/question-answer-rows (Services: which service fits) ── */
.process-steps--question-answer-rows{background:var(--color-3);padding-top:var(--space-xxxl);}
.fitguide__head{display:flex;flex-direction:column;gap:var(--space-lg);margin-bottom:var(--space-xl);}
.fitguide__title{font-size:var(--text-h2);line-height:1.09;color:var(--color-1);margin:0;max-width:760px;}
.fitguide__meta{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-sm);}
.fitguide__subtitle{margin:0;font-size:18px;line-height:25px;color:var(--color-2);max-width:400px;}
.fitguide__meta-icon{color:var(--color-7);}
.fitguide__divider{height:1px;background:var(--color-7);width:100%;}
.fitguide__body{display:flex;flex-direction:column;gap:var(--space-xl);}
.fitguide__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-lg);border-top:1px solid var(--color-8);}
.fitguide__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xl);padding-block:var(--space-lg);border-bottom:1px solid var(--color-8);}
.fitguide__question{flex:1 1 500px;max-width:520px;font-size:24px;font-weight:var(--weight-bold);line-height:31px;color:var(--color-1);}
.fitguide__answer{flex:1 1 500px;max-width:560px;font-size:var(--text-lg);line-height:28px;color:var(--color-2);}
.fitguide__close{display:flex;flex-direction:column;gap:var(--space-xl);}
.fitguide__outro{margin:0;font-size:var(--text-h3);font-weight:600;line-height:38px;color:var(--color-7);max-width:820px;}
.fitguide__cta.btn--primary{color:var(--color-4);align-self:flex-start;}
@media (max-width:768px){.fitguide__row{flex-direction:column;align-items:flex-start;gap:var(--space-sm);}.fitguide__question,.fitguide__answer{max-width:none;}}

/* ── disclosures/bordered-dark (Services: FAQ) ── */
.disclosures--bordered-dark{background:var(--color-5);padding-top:var(--space-xxxl);}
.faqd__inner{max-width:none;}
.faqd__head{display:flex;flex-direction:column;gap:var(--space-lg);margin-bottom:var(--space-xl);}
.faqd__title{font-size:var(--text-h2);line-height:1.09;color:var(--color-4);margin:0;max-width:700px;}
.faqd__meta{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-sm);}
.faqd__subtitle{margin:0;font-size:18px;line-height:25px;color:var(--color-7);max-width:420px;}
.faqd__meta-icon{color:var(--color-8);}
.faqd__divider{height:1px;background:var(--color-8);width:100%;}
.faqd__accordion{border-top:1px solid var(--color-2);max-width:900px;}
.faqd__item{border-bottom:1px solid var(--color-2);}
.faqd__summary{padding-block:var(--space-md);}
.faqd__question{color:var(--color-8);font-size:var(--text-md);font-weight:var(--weight-reg);transition:color .15s,font-size .15s;}
.faqd__icon{color:var(--color-8);}
.faqd__item[open] .faqd__question{color:var(--color-7);font-size:24px;font-weight:var(--weight-bold);}
.faqd__item[open] .faqd__icon{color:var(--color-7);}
.faqd__answer{color:var(--color-3);font-size:var(--text-lg);line-height:28px;padding-bottom:var(--space-lg);}


/* Layerly — CSS for the 2 new Service Detail page bespoke sections (compact hero variant + dark two-col intro band); the CTA reuses cta-banner--photo styles as-is — 2026-07-20 21:06:07 */
/* ── heroes/service-detail (compact hero, reuses .hero--image-bottom-aligned base) ── */
.hero--service-detail{min-height:440px;padding:var(--space-xxxl) var(--space-xxxl) var(--space-xl) var(--space-xxxl);}
.hero--service-detail .hero__inner{padding:0;}
.hero--service-detail .hero__title{font-size:var(--text-h1);line-height:1;max-width:1100px;}
@media (max-width:768px){
    .hero--service-detail{min-height:360px;padding:var(--space-xl) var(--space-lg);}
    .hero--service-detail .hero__title{font-size:var(--text-h2);}
}

/* ── intro-blocks/two-col-dark (dark-green problem/fix band, no divider/CTA) ── */
.intro-block--two-col-dark{background:var(--color-5);padding-block:var(--space-xl);}
.intro-block--two-col-dark .intro-block__inner{gap:var(--space-xl);}
.intro-block--two-col-dark .intro-block__title{font-size:var(--text-h3);line-height:38px;color:var(--color-3);max-width:500px;margin:0;}
.intro-block--two-col-dark .intro-block__row{gap:var(--space-xxl);padding-block:var(--space-lg);}
.intro-block--two-col-dark .intro-block__col--left{font-size:var(--text-md);line-height:22px;font-weight:var(--weight-reg);color:var(--color-6);max-width:520px;flex:1;}
.intro-block--two-col-dark .intro-block__col--right{font-size:var(--text-lg);line-height:28px;font-weight:var(--weight-bold);color:var(--color-6);max-width:520px;flex:1;}
.intro-block--two-col-dark .intro-block__vline{background:var(--color-8);}
@media (max-width:880px){
    .intro-block--two-col-dark{padding:var(--space-xl) var(--space-lg);}
    .intro-block--two-col-dark .intro-block__row{flex-direction:column;gap:var(--space-lg);}
    .intro-block--two-col-dark .intro-block__vline{display:none;}
}


/* Layerly — Tighten minor measure_page deltas on the new Service Detail sections: match gap on the section root (measurement reads the paired selector directly) and widen hero subtitle to Figma's 686px — 2026-07-20 21:09:27 */
/* ── Fidelity tightening: Service Detail hero + intro gap/width nits ── */
.hero--service-detail{display:flex;flex-direction:column;gap:var(--space-lg);}
.hero--service-detail .hero__subtitle{max-width:686px;}
.intro-block--two-col-dark{display:flex;flex-direction:column;gap:var(--space-xl);}
.section--service-detail-cta{padding-top:var(--space-xxl);gap:var(--space-xxl);}
.section--service-detail-cta .cta-banner-photo__inner{gap:var(--space-xxl);}


/* Layerly —  — 2026-07-20 21:12:50 */
/* Gap B chrome fixes — mobile-menu visibility + admin-bar offset (2026-07-18) */
@media (max-width:768px){[data-mobile-menu]{background:var(--mobile-menu-bg,var(--color-1));}[data-mobile-menu] a{color:var(--mobile-menu-fg,var(--color-surface));}[data-mobile-menu-toggle][aria-expanded="true"]{color:var(--mobile-menu-fg,var(--color-surface));}
/* Fix pass: the generic "[data-mobile-menu] a" link-color rule (higher specificity than .btn--nav-cta)
   was overriding the CHART "Book a call" pill's text color to the light drawer fg, producing
   white-text-on-white-button. Force it back to its intended dark text on the white pill. */
[data-mobile-menu] .btn--nav-cta{color:var(--color-1);}
}
body.admin-bar [data-nav-sticky],body.admin-bar [data-nav-overlay],body.admin-bar .site-header--overlay{top:32px;}
@media screen and (max-width:782px){body.admin-bar [data-nav-sticky],body.admin-bar [data-nav-overlay],body.admin-bar .site-header--overlay{top:46px;}}



/* Layerly —  — 2026-07-20 21:54:32 */
/* Carousel nav fix — give the arrow buttons a real hit area + placement (were width:0) */
.tcb__nav{display:flex;gap:var(--space-sm);justify-content:flex-end;align-items:center;margin-top:var(--space-lg);position:relative;z-index:3;width:100%;}
.tcb__nav-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 48px;border:1px solid var(--color-border,rgba(0,0,0,.2));border-radius:999px;background:transparent;color:inherit;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s;}
.tcb__nav-btn:hover{background:var(--color-1);color:var(--color-surface);border-color:var(--color-1);}
.tcb__nav-btn svg{width:20px;height:20px;}



/* Layerly —  — 2026-07-20 21:56:50 */
/* Section width consistency — one content container (max-width + centered + gutter) site-wide */
.wrap{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--space-xl);width:100%;box-sizing:border-box;}
@media (max-width:768px){.wrap{padding-inline:var(--space-lg);}}



/* Layerly — Left-align hero text/content on the homepage centered hero variant — 2026-07-20 22:01:06 */
.hero--centered .hero__inner {
    text-align: left;
    margin-inline: 0;
}
.hero--centered .hero__ctas {
    justify-content: flex-start;
}


/* Layerly — Left-align hero content for the actual homepage hero variant (image-bottom-aligned), correcting the earlier centered-variant override — 2026-07-20 22:01:42 */
.hero--image-bottom-aligned .hero__inner {
    text-align: left;
    margin-inline: 0;
    align-items: flex-start;
}
.hero--image-bottom-aligned .hero__meta {
    justify-content: flex-start;
    gap: var(--space-sm);
}


/* Layerly — Constrain hero (image-bottom-aligned) inner content to --container-max to match site-wide content width — 2026-07-20 22:03:45 */
/* Cap the homepage hero's inner content to the site's standard max-width so it
   aligns with every other section (container-max), instead of the previous
   full-bleed max-width:none. */
.hero--image-bottom-aligned .hero__inner {
    max-width: var(--container-max);
    margin-inline: auto;
}


/* Layerly — split-panel: cap grid to container-max + cap media image height (manual FIX 21/23 pass) — 2026-07-20 22:43:57 */
.split-panel__grid, .twin-panel__grid { max-width: var(--container-max); margin-inline: auto; }
.split-panel--dark-image-right .split-panel__media, .split-panel--dark-image-right-badges .split-panel__media { align-self: center; height: clamp(360px, 40vw, 560px); }
.split-panel--dark-image-right .split-panel__media > img, .split-panel--dark-image-right-badges .split-panel__media > img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* Layerly — split-panel media: override min-height:100% so image height cap takes effect (FIX 21) — 2026-07-20 22:46:09 */
.split-panel--dark-image-right .split-panel__media, .split-panel--dark-image-right-badges .split-panel__media { min-height: 0; height: clamp(360px, 40vw, 560px); align-self: center; }
.split-panel--dark-image-right .split-panel__media > img, .split-panel--dark-image-right-badges .split-panel__media > img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* Layerly — Home fidelity pass 1: hero padding, scope one-bg dark-green, cta green gradient (Figma-matched) — 2026-07-20 23:06:49 */
/* ===== Home fidelity pass 1 — hero / scope / cta (Figma-matched 2026-07-20) ===== */

/* HERO — content was jammed to the left edge (padding:0). Cap to container + pad. */
.hero--image-bottom-aligned .hero__inner{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:clamp(24px,5vw,72px);padding-bottom:clamp(40px,6vw,80px);box-sizing:border-box;}

/* SCOPE ("We are not / We are") — Figma is ONE continuous dark-green background with
   two text columns, NOT two image tiles on gray. Make the section dark green, drop the
   per-card image+overlay tiles, and space the two text columns. */
.section--scope{background:var(--color-5);}
.split-panel--twin-overlay-cards .twin-panel__bg,
.split-panel--twin-overlay-cards .twin-panel__overlay{display:none;}
.split-panel--twin-overlay-cards .twin-panel__card{background:transparent;}
.split-panel--twin-overlay-cards .twin-panel__grid{gap:clamp(32px,6vw,88px);}

/* CTA ("Ready for a clear picture of your numbers") — Figma is a green gradient
   (medium-green -> light-sage), NOT the near-opaque white that washed the photo out. */
.cta-banner--photo .cta-banner-photo__overlay{background:linear-gradient(90deg,#5C8560 0%,#C7D6C0 100%);}


/* Layerly — footer chart: 3-col bottom row (copyright/legal/social) per Figma — 2026-07-20 23:14:12 */
/* Footer (chart) — Figma bottom row: copyright (left) · legal (center) · social (right), one line. */
.footer--chart .footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);width:100%;flex-wrap:wrap;}
.footer--chart .footer__credit{margin:0;flex:0 1 auto;text-align:left;}
.footer--chart .footer__credit .layerly-copyright__line{margin:0;font-size:var(--text-sm);color:var(--color-8);display:flex;gap:.4em;align-items:center;flex-wrap:wrap;}
.footer--chart .footer__credit a{color:var(--color-5);text-decoration:none;}
.footer--chart .footer__credit a:hover{text-decoration:underline;}
.footer--chart .footer__legal-nav{flex:1 1 auto;display:flex;justify-content:center;}


/* Layerly — mobile: reduce standard-section vertical padding 120/80 -> ~48-72 (&lt;=768px) — 2026-07-20 23:19:02 */
/* ===== Mobile padding fix — desktop sections carried 120/80px vertical padding onto
   phones (a huge empty band per section). Reduce on <=768px; dark split/scope panels
   already use small padding so they're excluded. ===== */
@media (max-width: 768px){
  .section--hero,.section--intro,.section--symptoms,.section--diagnostic,
  .section--services,.section--scopeintro,.section--testimonials,.section--cta{
    padding-top:clamp(48px,11vw,72px);padding-bottom:clamp(48px,11vw,72px);
  }
  .split-panel__content{padding-top:clamp(40px,9vw,56px);padding-bottom:clamp(40px,9vw,56px);}
  .twin-panel__content{padding-block:clamp(28px,7vw,40px);}
  .cta-banner-photo__inner{padding-block:clamp(8px,3vw,24px);}
}


/* Layerly — mobile hero: shrink title, min-height, clear header — 2026-07-20 23:20:14 */
/* Mobile hero — 40px title filled the hero and collided with the header. Scale it down
   and give the content room to clear the fixed header. */
@media (max-width: 768px){
  .hero__title{font-size:clamp(29px,7.4vw,38px);line-height:1.08;}
  .hero--image-bottom-aligned{min-height:88vh;}
  .hero--image-bottom-aligned .hero__inner{padding-bottom:clamp(32px,7vw,48px);}
}


/* Layerly — mobile hero title: override .hero--image-bottom-aligned specificity, shrink to clamp 28-34 — 2026-07-20 23:21:11 */
/* Mobile hero title — theme sets .hero--image-bottom-aligned .hero__title to --text-h1 (40px)
   on mobile, which fills the hero and collides with the header. Match specificity + shrink. */
@media (max-width: 768px){
  .hero--image-bottom-aligned .hero__title{font-size:clamp(28px,7vw,34px);line-height:1.08;}
}


/* Layerly — split panels: full-bleed image-right + full-bleed green-left, text contained to 1200 (Figma) — 2026-07-21 01:40:19 */
/* ===== Split panels (dark-image-right family) — FULL-BLEED split, Figma layout.
   Green content column bleeds to the LEFT edge; image bleeds to the RIGHT edge;
   ONLY the text is held to the --container-max (1200) width via a gutter-matched
   left pad. Overrides the earlier 1200-cap + height-clamp that squished them. ===== */
[class*="split-panel--dark-image-right"] .split-panel__grid{
  max-width:none;margin-inline:0;width:100%;gap:0;
}
/* left: green bleeds left; text aligns to the container's left edge (=(100vw-1200)/2, which
   is the design's 120px inset at 1440 and 40px at 1280) */
[class*="split-panel--dark-image-right"] .split-panel__content{
  padding-left:max(var(--space-lg,24px), calc((100vw - var(--container-max,1200px)) / 2));
  padding-right:clamp(24px,4vw,64px);
}
/* right: image bleeds to the right edge, full height of the panel */
[class*="split-panel--dark-image-right"] .split-panel__media{
  min-height:100%;height:auto;align-self:stretch;padding:0;
}
[class*="split-panel--dark-image-right"] .split-panel__media img{
  width:100%;height:100%;object-fit:cover;display:block;
}
@media (max-width:768px){
  /* stacked: image becomes a full-width band, text uses the normal gutter */
  [class*="split-panel--dark-image-right"] .split-panel__media{height:clamp(240px,62vw,360px);min-height:0;}
  [class*="split-panel--dark-image-right"] .split-panel__content{padding-left:var(--space-lg,24px);}
}


/* Layerly — align hero + split text to standard section content edge (x=80 @1280) — 2026-07-21 01:50:32 */
/* ===== Align hero + split-panel text to the STANDARD section content edge.
   Standard sections = .wrap (40px centering gutter + 40px padding) → content at x=80 @1280.
   Hero was at 184 (section had 120px inline padding + 64px inner); split text at 40. ===== */

/* HERO — drop the section's 120px inline padding; let .hero__inner behave like a normal .wrap */
.section--hero.hero--image-bottom-aligned{padding-inline:0;}
.hero--image-bottom-aligned .hero__inner{max-width:var(--container-max);margin-inline:auto;width:100%;padding-inline:40px;}
@media (max-width:768px){ .hero--image-bottom-aligned .hero__inner{padding-inline:24px;} }

/* SPLIT panels — text left edge = standard content edge (gutter + 40px), bg still bleeds to 0 */
[class*="split-panel--dark-image-right"] .split-panel__content{
  padding-left:max(40px, calc((100vw - var(--container-max,1200px)) / 2 + 40px));
}


/* Layerly — scope columns: align text to container edges (80/1200), center gutter 80 — 2026-07-21 01:54:55 */
/* Scope "We are not / We are" columns — align to the container edges (80 left / 1200 right),
   matching the other sections. Was inset 120px on the outer sides -> text at 160 / ended at 1120.
   gap:0 + 40px symmetric content padding => outer text at 80 & 1200, center gutter 80 (design). */
.split-panel--twin-overlay-cards .twin-panel__grid{gap:0;}
.split-panel--twin-overlay-cards .twin-panel__card:first-child .twin-panel__content,
.split-panel--twin-overlay-cards .twin-panel__card:last-child .twin-panel__content{padding-inline:40px;}
@media (max-width:768px){
  .split-panel--twin-overlay-cards .twin-panel__card:first-child .twin-panel__content,
  .split-panel--twin-overlay-cards .twin-panel__card:last-child .twin-panel__content{padding-inline:24px;}
}


/* Layerly — services grid: no-gap 1px dividers + linked cards + dark-green hover (Figma) — 2026-07-21 02:02:10 */
/* ===== Services grid — Figma "bordered cards, NO gap": cells touch, separated by 1px
   dividers; light-sage cards; dark "See All Services" tile. Was 24px gap + per-card
   gray borders. ===== */
.service-cta-grid__list{gap:1px;background:var(--color-8);}
.service-cta-grid__card{border:0;background:var(--color-6);min-height:clamp(240px,24vw,320px);transition:background .18s ease;}
.service-cta-grid__card--cta{background:var(--color-1);}
.service-cta-grid__card-title,.service-cta-grid__card-desc{transition:color .18s ease;}
/* whole card is a link: title top, desc bottom */
.service-cta-grid__card-link{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-md);height:100%;text-decoration:none;color:inherit;}
/* HOVER — dark-green fill + light text (matches the dark CTA tile) */
.service-cta-grid__card:not(.service-cta-grid__card--cta):hover{background:var(--color-5);}
.service-cta-grid__card:not(.service-cta-grid__card--cta):hover .service-cta-grid__card-title,
.service-cta-grid__card:not(.service-cta-grid__card--cta):hover .service-cta-grid__card-desc{color:var(--color-6);}
.service-cta-grid__card--cta .service-cta-grid__cta-link{transition:opacity .18s ease;}
.service-cta-grid__card--cta:hover .service-cta-grid__cta-link{opacity:.82;}


/* Layerly — services grid: outer border to frame the bordered block — 2026-07-21 02:09:47 */
/* Services grid — add the outer border (internal dividers came from gap:1px on the list bg;
   this frames the whole grid so it matches the Figma bordered block). */
.service-cta-grid__list{border:1px solid var(--color-8);}


/* Layerly — services catalogue grid: match home (no-gap dividers + outer border + hover + links + sage filler) — 2026-07-21 02:18:34 */
/* Services-page catalogue grid — MATCH the home service grid: no-gap bordered cells,
   1px dividers + outer border, light-sage cells, dark-green hover, linked service singles.
   7 services + 1 sage filler cell (design's 8th "all services" tile is hidden). */
.catalogue__grid{gap:1px;background:var(--color-8);border:1px solid var(--color-8);}
.catalogue__card{border:0;background:var(--color-6);min-height:clamp(240px,24vw,320px);padding:var(--space-lg);transition:background .18s ease;}
.catalogue__card-title,.catalogue__card-desc{transition:color .18s ease;}
.catalogue__card-link{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-md);height:100%;text-decoration:none;color:inherit;}
.catalogue__card:not(.catalogue__card--empty):hover{background:var(--color-5);}
.catalogue__card:not(.catalogue__card--empty):hover .catalogue__card-title,
.catalogue__card:not(.catalogue__card--empty):hover .catalogue__card-desc{color:var(--color-6);}
@media (max-width:640px){.catalogue__card--empty{display:none;}}


/* Layerly — FAQ master-detail: questions left / answer right (rebuilt from accordion, Figma) — 2026-07-21 02:25:49 */
/* ===== FAQ (disclosures--bordered-dark) — MASTER-DETAIL, matched to Figma:
   dark-green section, question list left (active=green+arrow, others muted),
   single answer panel right that updates on click. Rebuilt from an accordion. ===== */
.section--faqd{background:var(--color-5);}
.section--faqd .faqd__title{color:var(--color-4);}
.section--faqd .faqd__subtitle{color:var(--color-7);}
.section--faqd .faqd__divider{background:rgba(255,255,255,.2);}
.faqd__md{display:grid;grid-template-columns:52fr 60fr;gap:clamp(40px,6vw,80px);align-items:start;}
/* left: questions */
.faqd__questions{display:flex;flex-direction:column;}
.faqd__q{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);width:100%;text-align:left;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.16);padding:var(--space-lg) 0;margin:0;cursor:pointer;font-family:inherit;font-size:var(--text-md);font-weight:400;line-height:1.35;color:var(--color-8);transition:color .15s ease;}
.faqd__q:first-child{border-top:1px solid rgba(255,255,255,.16);}
.faqd__q-text{flex:1 1 auto;}
.faqd__q-arrow{flex:0 0 auto;display:inline-flex;color:var(--color-7);opacity:0;transition:opacity .15s ease;}
.faqd__q:hover{color:var(--color-6);}
.faqd__q.is-active{color:var(--color-7);font-weight:700;}
.faqd__q.is-active .faqd__q-arrow{opacity:1;}
/* right: answer panel */
.faqd__answers{padding-top:var(--space-lg);}
.faqd__a{color:var(--color-6);font-size:var(--text-lg);line-height:1.55;}
.faqd__a[hidden]{display:none;}
.faqd__a p{margin:0 0 1em;}
.faqd__a p:last-child{margin:0;}
@media (max-width:768px){
  .faqd__md{grid-template-columns:1fr;gap:var(--space-md);}
  .faqd__answers{padding-top:var(--space-md);}
}


/* Layerly — About: remove split-panel top strip (white gap) + scope-panels dark-green full-bleed w/ contained text (like home) — 2026-07-21 02:39:00 */
/* About issue 1 — WHITE GAP: dark-image-right split sections had a 16px top padding that
   showed the section bg as a strip above the green panel. Make them full-bleed top-to-bottom. */
[class*="split-panel--dark-image-right"]{padding-top:0;padding-bottom:0;}

/* About issue 2 — scope-panels ("Where my work starts and stops" panel) — match the HOMEPAGE
   scope: one continuous dark-green FULL-BLEED background + two text columns contained to the
   container (80/1200). Design is flat dark green (the twin "photos" are invisible under it). */
.section--scope-panels{background:var(--color-5);}
.split-panel--twin-photo-quotes .twin-panel__bg,
.split-panel--twin-photo-quotes .twin-panel__overlay{display:none;}
.split-panel--twin-photo-quotes .twin-panel__card{background:transparent;}
.split-panel--twin-photo-quotes .twin-panel__grid{gap:0;}
.split-panel--twin-photo-quotes .twin-panel__content{padding-block:clamp(48px,6vw,72px);}
.split-panel--twin-photo-quotes .twin-panel__card:first-child .twin-panel__content,
.split-panel--twin-photo-quotes .twin-panel__card:last-child .twin-panel__content{padding-inline:40px;}
.split-panel--twin-photo-quotes .twin-panel__text{color:var(--color-6);}
@media (max-width:768px){
  .split-panel--twin-photo-quotes .twin-panel__card:first-child .twin-panel__content,
  .split-panel--twin-photo-quotes .twin-panel__card:last-child .twin-panel__content{padding-inline:24px;}
}


/* Layerly — About CTA: semi-transparent green gradient so the accounting bg image shows — 2026-07-21 02:50:44 */
/* About CTA ("Let's talk about your numbers") — image behind a SEMI-TRANSPARENT green
   gradient (was opaque, hiding the photo). Left stays greener (dark text sits there),
   right lighter so the accounting photo shows through. */
.section--about-cta .cta-banner-photo__overlay{background:linear-gradient(90deg,rgba(92,133,96,0.88) 0%,rgba(184,203,178,0.60) 100%);}
.section--about-cta .cta-banner-photo__bg img{width:100%;height:100%;object-fit:cover;}


/* Layerly — all photo CTAs: semi-transparent green gradient so bg images show (home/services/svcdetail match About) — 2026-07-21 02:55:06 */
/* ALL photo CTAs — image behind a SEMI-TRANSPARENT green gradient (was opaque, hiding the
   photo). Greener on the left (dark text), lighter on the right so the accounting photo shows. */
.cta-banner--photo .cta-banner-photo__overlay{background:linear-gradient(90deg,rgba(92,133,96,0.88) 0%,rgba(184,203,178,0.60) 100%);}
.cta-banner--photo .cta-banner-photo__bg img{width:100%;height:100%;object-fit:cover;}


/* Layerly — all CTAs: consistent light-green gradient (higher opacity so different photos dont cast different colours) — 2026-07-21 03:03:43 */
/* ALL photo CTAs — consistent LIGHT-GREEN gradient. The previous 0.60 right-side alpha let
   each CTA's (different) photo cast a different colour, so the sections didn't match. Raise
   the opacity so the light-green dominates uniformly (photo = faint texture behind, like Figma). */
.cta-banner--photo .cta-banner-photo__overlay{background:linear-gradient(90deg,rgba(115,175,104,0.86) 0%,rgba(210,221,205,0.82) 100%) !important;}


/* Layerly — CTAs: remove section-level grey ::after overlay so all CTAs match (green gradient only) — 2026-07-21 03:10:47 */
/* CTAs - kill the section-level --with-overlay ::after (grey #E8E8E8 @0.72) that some CTAs
   (home) carry and others do not. It sits UNDER the green gradient and grays those CTAs so
   they do not match. Now every photo CTA relies ONLY on the .cta-banner-photo__overlay green. */
.cta-banner--photo::after{display:none !important;}


/* Layerly — footer copyright: remove dark bg + padding pill, sit flat on light footer with readable text — 2026-07-21 03:13:30 */
/* Footer copyright / Made by Layerly - the global .layerly-copyright dark-strip style put a
   dark #1F1F1F bg + padding pill around the credit. Remove it so it sits flat on the light
   footer, aligned to the content edge, with readable muted-gray text. */
.footer--chart .footer__credit.layerly-copyright{background:transparent;padding:0;}
.footer--chart .footer__credit .layerly-copyright__line{color:var(--color-2);}
.footer--chart .footer__credit a{color:var(--color-5);}


/* Layerly — service single (CPT): hero eyebrow + section layout (label-left / body-right) — 2026-07-21 03:24:06 */
/* ===== Service single (CPT) — hero eyebrow + content sections (service_sections) ===== */
.service-single__hero{background:var(--color-5);}                 /* dark fallback if no hero image */
.service-single__eyebrow{font-size:var(--text-sm);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-7);margin:0 0 var(--space-sm);}
.service-single__section{padding-block:clamp(48px,7vw,88px);background:var(--color-3);}
.service-single__section--alt{background:var(--color-6);}
.service-single__section-inner{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start;}
.service-single__section-title{margin:0;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;color:var(--color-1);}
.service-single__section-body{color:var(--color-2);font-size:var(--text-md);line-height:1.7;max-width:68ch;}
.service-single__section-body p{margin:0 0 1em;}
.service-single__section-body p:last-child{margin:0;}
@media (max-width:768px){
  .service-single__section-inner{grid-template-columns:1fr;gap:var(--space-sm);}
}


/* Layerly — service single: varied section treatments (intro/split/statement/columns/split-sage) — 2026-07-21 03:30:47 */
/* ===== Service single — VARIED section treatments (reuse the site style, mix layouts) ===== */
.service-single__section{padding-block:clamp(56px,8vw,104px);}
.service-single__section-title{margin:0;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15;}
.service-single__section-body{font-size:var(--text-md);line-height:1.7;}
.service-single__section-body p{margin:0 0 1em;} .service-single__section-body p:last-child{margin:0;}

/* intro — dark green, label on top, body in two columns (strong opener) */
.service-single__section--intro{background:var(--color-5);}
.service-single__section--intro .service-single__section-inner{display:block;}
.service-single__section--intro .service-single__section-title{color:var(--color-4);max-width:640px;margin-bottom:var(--space-lg);}
.service-single__section--intro .service-single__section-body{color:var(--color-6);columns:2;column-gap:clamp(40px,5vw,80px);column-rule:1px solid rgba(255,255,255,.18);}

/* split — light gray, label LEFT / body RIGHT (editorial) */
.service-single__section--split{background:var(--color-3);}
.service-single__section--split .service-single__section-inner{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start;}
.service-single__section--split .service-single__section-title{color:var(--color-1);}
.service-single__section--split .service-single__section-body{color:var(--color-2);max-width:64ch;}

/* statement — sage, centered + larger (emphasis) */
.service-single__section--statement{background:var(--color-6);}
.service-single__section--statement .service-single__section-inner{display:block;max-width:820px;margin-inline:auto;text-align:center;}
.service-single__section--statement .service-single__section-title{color:var(--color-5);font-size:clamp(1.75rem,3vw,2.4rem);margin-bottom:var(--space-lg);}
.service-single__section--statement .service-single__section-body{color:var(--color-1);font-size:var(--text-lg);}

/* columns — light gray, label on top, body in two columns */
.service-single__section--columns{background:var(--color-3);}
.service-single__section--columns .service-single__section-inner{display:block;}
.service-single__section--columns .service-single__section-title{color:var(--color-1);max-width:640px;margin-bottom:var(--space-lg);}
.service-single__section--columns .service-single__section-body{color:var(--color-2);columns:2;column-gap:clamp(40px,5vw,80px);column-rule:1px solid var(--color-8);}

/* split-sage — sage, label LEFT / body RIGHT */
.service-single__section--split-sage{background:var(--color-6);}
.service-single__section--split-sage .service-single__section-inner{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start;}
.service-single__section--split-sage .service-single__section-title{color:var(--color-1);}
.service-single__section--split-sage .service-single__section-body{color:var(--color-2);max-width:64ch;}

@media (max-width:768px){
  .service-single__section-inner{grid-template-columns:1fr !important;max-width:none;}
  .service-single__section-body{columns:1 !important;max-width:none;}
}


/* Layerly — service single: 2-col-body sections span full width (remove 68ch cap) — 2026-07-21 03:34:37 */
/* Service single: the two-column-body sections (intro/columns) were capped to 68ch by an
   earlier rule, squeezing the columns narrow. Let them span the full container width. */
.service-single__section--intro .service-single__section-body,
.service-single__section--columns .service-single__section-body{max-width:none;}


/* Layerly — service single: image-split treatment (green panel + full-bleed image) — 2026-07-21 03:39:43 */
/* Service single — IMAGE treatment: dark-green text panel (text held to the page content
   edge) + full-bleed image on the right, matching the site's split panels. */
.service-single__section--image{padding-block:0;}
.service-single__image-grid{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(420px,42vw,560px);}
.service-single__image-panel{background:var(--color-5);color:var(--color-6);display:flex;flex-direction:column;justify-content:center;gap:var(--space-md);padding-block:clamp(48px,6vw,80px);padding-left:max(40px,calc((100vw - var(--container-max,1200px))/2 + 40px));padding-right:clamp(32px,4vw,64px);}
.service-single__image-panel .service-single__section-title{color:var(--color-4);margin:0;}
.service-single__image-panel .service-single__section-body{color:var(--color-6);max-width:52ch;}
.service-single__image-media{position:relative;overflow:hidden;}
.service-single__image-media img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:768px){
  .service-single__image-grid{grid-template-columns:1fr;}
  .service-single__image-media{min-height:260px;order:-1;}
  .service-single__image-panel{padding-inline:var(--space-lg);}
}


/* Layerly —  — 2026-07-21 04:08:14 */

/* ── Home CTA: contact form as right column beside the copy ── */
.cta-banner-photo__body--with-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
    gap: var(--space-xxl);
    align-items: start;
}
.cta-banner-photo__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}
.cta-banner-photo__body--with-form .cta-banner-photo__text { max-width: none; }
.cta-banner-photo__form {
    background: var(--color-4);
    border: 1px solid var(--color-3);
    border-radius: 16px;
    padding: var(--space-xl);
    box-shadow: 0 18px 44px -26px color-mix(in srgb, var(--color-1) 45%, transparent);
}
.cta-banner-photo__form-title {
    margin: 0 0 var(--space-md);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: 1.25;
    color: var(--color-1);
}
.cta-banner-photo__form .form__fields { --form-cols: 1; gap: var(--space-md); }
.cta-banner-photo__form .form__submit { display: block; width: 100%; }
.cta-banner-photo__form .form__status { text-align: left; }
@media (max-width: 900px) {
    .cta-banner-photo__body--with-form { grid-template-columns: 1fr; gap: var(--space-xl); }
    .cta-banner-photo__form { max-width: 560px; }
}