/*
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); background-color: color-mix(in srgb, var(--color-3) 95%, transparent); }
.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;
  quotes: "\201C" "\201D";
}
.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);
}
.nav[data-nav-sticky] { position: sticky; top: 0; z-index: 100; transition: box-shadow .2s; }
.nav[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; }
.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; color: inherit; cursor: pointer; padding: var(--space-sm); }
.nav__toggle-bar { display: block; width: 24px; height: 2px; background: currentColor; }
@media (max-width: 768px) {
    .nav__toggle { display: flex; }
    .nav__menu {
        position: fixed; inset: var(--nav-height) 0 0 auto; width: min(320px, 82vw);
        background: var(--nav-bg); flex-direction: column; align-items: flex-start;
        padding: var(--space-lg); gap: var(--space-md);
        transform: translateX(100%); transition: transform .25s ease; box-shadow: var(--sh-lg);
        overflow-y: auto;
    }
    .nav__menu.is-open { transform: translateX(0); }
    .nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-md); width: 100%; }
    body.mobile-menu-open { overflow: hidden; }
}

/* ── 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 — Phase 3 — exact design-system tokens (brutalist palette + type/spacing scale) from Figma Connections file, brand colors honored — 2026-07-13 18:58:20 */
:root {
  /* Colors — exact brand hexes from brief + Figma */
  --color-1: #1E293B; /* deep slate — text / primary button ink */
  --color-2: #FF94E1; /* candy pink */
  --color-3: #1800AC; /* deep blue */
  --color-4: #FFFFFF; /* white */
  --color-5: #FFFDA0; /* soft yellow */
  --color-6: #64748B; /* muted slate text */
  --color-7: #6CFF64; /* neon green */
  --color-8: #ADAABF; /* neutral gray */

  /* Functional aliases */
  --color-primary: #1800AC;
  --color-text: #1E293B;
  --color-text-muted: #64748B;
  --color-bg: #FFFFFF;
  --color-surface: #FFFDA0;
  --color-border: #1E293B;

  /* Fonts — exact families (auto-loaded) */
  --font-1: 'Mozilla Headline', sans-serif;
  --font-2: 'Climate Crisis', sans-serif;
  --font-3: 'BBH Bartle', sans-serif;
  --font-display: var(--font-2);
  --font-body: var(--font-3);

  /* Type scale — exact px from design */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-h3: 44px;
  --text-h2: 64px;
  --text-h1: 96px;
  --text-display: 148px;

  /* Weights */
  --weight-reg: 400;
  --weight-med: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing scale — exact px, extended with 120 for full-bleed brutalist blocks */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-sm2: 10px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 80px;
  --space-xxxl: 120px;

  /* Radius — brutalist: square edges */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-full: 9999px;
}


/* Layerly — Chrome — brutalist nav bar knobs + scoped nav polish (Connections) — 2026-07-13 19:02:17 */
.nav{--nav-bg:var(--color-surface);--nav-height:84px;border-bottom:3px solid var(--color-2);}
.nav__inner{display:flex;align-items:center;justify-content:space-between;min-height:var(--nav-height);}
.nav__logo-text{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-xl);text-transform:uppercase;letter-spacing:.02em;color:var(--color-text);}
.nav__list{display:flex;gap:var(--space-xl);list-style:none;margin:0;padding:0;}
.nav__list a{font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.04em;font-size:var(--text-sm);text-decoration:none;color:var(--color-text);}
.nav__list a:hover{color:var(--color-primary);}
.nav[data-nav-sticky]{position:sticky;top:0;z-index:50;}


/* Layerly — Chrome — brutalist footer layout + oversized type (Connections) — 2026-07-13 19:02:17 */
.footer--brutalist{background:var(--color-2);color:var(--color-surface);padding-block:var(--space-xxl) 0;}
.footer--brutalist a{color:var(--color-surface);}
.footer--brutalist .footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-xxl);padding-bottom:var(--space-xxl);border-bottom:2px solid rgba(255,255,255,.2);}
.footer--brutalist .footer__wordmark{display:block;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:clamp(48px, 9vw, 128px);line-height:.9;text-transform:uppercase;letter-spacing:-.02em;text-decoration:none;}
.footer--brutalist .footer__tagline{font-size:var(--text-lg);margin-top:var(--space-md);max-width:32ch;color:rgba(255,255,255,.75);}
.footer--brutalist .footer__contact{margin-top:var(--space-lg);font-size:var(--text-md);}
.footer--brutalist .footer__contact p{margin:0 0 var(--space-xs);color:rgba(255,255,255,.85);}
.footer--brutalist .footer__signup{min-width:320px;flex:0 1 420px;}
.footer--brutalist .footer__signup-heading{font-size:var(--text-h3);font-weight:var(--weight-bold);text-transform:uppercase;margin-bottom:var(--space-lg);}
.footer--brutalist .form__fields{display:flex;flex-direction:column;gap:var(--space-md);}
.footer--brutalist .field{width:100%;}
.footer--brutalist .footer__columns{display:flex;flex-wrap:wrap;gap:var(--space-xxl);padding-block:var(--space-xxl);border-bottom:2px solid rgba(255,255,255,.2);}
.footer--brutalist .footer__col-heading{font-size:var(--text-sm);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.6);margin-bottom:var(--space-md);}
.footer--brutalist .footer__col-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-sm);}
.footer--brutalist .footer__col-list a{font-size:var(--text-lg);font-weight:var(--weight-bold);text-decoration:none;}
.footer--brutalist .footer__col-list a:hover{color:var(--color-primary);}
.footer--brutalist .footer__legal-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-md);padding-block:var(--space-lg);font-size:var(--text-xs);color:rgba(255,255,255,.6);}
.footer--brutalist .footer__legal-list{list-style:none;display:flex;gap:var(--space-lg);margin:0;padding:0;}
.footer--brutalist .footer__legal-list a{color:rgba(255,255,255,.6);text-decoration:underline;}
@media (max-width:768px){.footer--brutalist .footer__top{flex-direction:column;}}


/* Layerly — Add 4th font token for the script accent used in hero/CTA sections — 2026-07-13 19:06:25 */
:root{ --font-4: 'Sedgwick Ave Display', cursive; }


/* Layerly — Bespoke CSS for homepage brutalist sections (hero-belong, schedule-bands, manifesto-stack, welcome-split, instagram-cta, location-map, contact-cta, closing-cta) + testimonials/carousel knob overrides, matching Figma geometry/colors/type exactly — 2026-07-13 19:24:51 */

/* ── Custom: heroes/belong ── */
.hero-belong { background-color: color-mix(in srgb, var(--color-3) 95%, transparent); color: var(--color-4); text-align: center; padding-block: var(--space-xxxl) var(--space-xxl); }
.section--hero_belong.section--bg-image { background-size: cover; background-position: center; }
.section--hero_belong.section--bg-image .hero-belong__inner { position: relative; z-index: 2; }
.hero-belong__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); max-width: 1200px; margin-inline: auto; }
.hero-belong__eyebrow { font-family: var(--font-4); font-size: var(--text-xl); color: var(--color-5); margin: 0; }
.hero-belong__title-wrap { position: relative; display: grid; place-items: center; }
.hero-belong__title { grid-area: 1 / 1; font-family: var(--font-2); font-size: var(--text-display); line-height: .95; margin: 0; font-weight: 400; text-transform: uppercase; }
.hero-belong__title--shadow { color: var(--color-1); transform: translate(6px, 8px); z-index: 0; }
.hero-belong__title:not(.hero-belong__title--shadow) { color: var(--color-7); position: relative; z-index: 1; }
.hero-belong__tag-script { font-family: var(--font-4); font-size: var(--text-xl); color: var(--color-4); margin: 0; }
.hero-belong__statement { font-family: var(--font-3); font-size: var(--text-h3); color: var(--color-2); margin: 0; line-height: 1em; }
.hero-belong__intro { display: flex; flex-direction: column; gap: var(--space-md); max-width: 658px; }
.hero-belong__intro-heading { font-family: var(--font-1); font-weight: 600; font-size: 24px; color: var(--color-4); margin: 0; }
.hero-belong__intro-body { font-family: var(--font-1); font-weight: 400; font-size: var(--text-md); color: var(--color-4); margin: 0; }
.hero-belong__cta-wrap {
  margin-top: var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}
.hero-belong__cta { background: var(--color-5); border: 2px solid var(--color-4); color: var(--color-3); font-family: var(--font-2); font-size: var(--text-md); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); }

/* ── Custom: schedule/bands ── */
.schedule-bands { background-color: color-mix(in srgb, var(--color-3) 95%, transparent); color: var(--color-4); text-align: center; }
.schedule-bands__head { padding-block: var(--space-xxl) var(--space-md); }
.schedule-bands__heading { font-family: var(--font-2); font-size: var(--text-h1); color: var(--color-4); margin: 0; line-height: 1; text-transform: uppercase; }
.schedule-bands__tags { display: flex; width: 100%; }
.schedule-bands__tag { flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding-block: var(--space-lg); border: 3px solid var(--color-1); }
.schedule-bands__tag span { font-family: var(--font-3); font-size: var(--text-h3); color: var(--color-1); line-height: 1em; }
.schedule-bands__tag--0, .schedule-bands__tag--2 { background: var(--color-2); }
.schedule-bands__tag--1 { background: var(--color-4); border-color: var(--color-3); }
.schedule-bands__foot { padding-block: var(--space-xxl); display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); }
.schedule-bands__body { font-family: var(--font-1); font-size: var(--text-lg); color: var(--color-4); max-width: 800px; margin: 0; }
.schedule-bands__cta { background: var(--color-5); border: 2px solid var(--color-4); color: var(--color-3); font-family: var(--font-2); font-size: var(--text-md); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); }

/* ── Custom: manifestos/stack ── */
.manifesto-stack { background-color: color-mix(in srgb, var(--color-5) 97%, transparent); text-align: center; }
.manifesto-stack__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); padding-block: var(--space-xxl); }
.manifesto-stack__heading { font-family: var(--font-2); font-size: var(--text-h1); color: var(--color-3); margin: 0; line-height: 1; text-transform: uppercase; }
.manifesto-stack__bands { display: flex; flex-direction: column; gap: 0; width: 100%; max-width: 860px; }
.manifesto-stack__band { display: flex; align-items: center; justify-content: center; padding: var(--space-xl); border: 3px solid var(--color-2); background: var(--color-1); }
.manifesto-stack__band span { font-family: var(--font-3); font-size: var(--text-h3); color: var(--color-2); white-space: pre-line; line-height: 1em; }
.manifesto-stack__band--1 { background: var(--color-4); border-color: var(--color-1); }
.manifesto-stack__body { display: flex; flex-direction: column; gap: var(--space-md); max-width: 780px; }
.manifesto-stack__lead { font-family: var(--font-1); font-size: var(--text-md); color: var(--color-1); margin: 0; }
.manifesto-stack__strong { font-family: var(--font-1); font-weight: 700; font-size: var(--text-xl); color: var(--color-1); margin: 0; }
.manifesto-stack__cta { background: var(--color-2); border: 2px solid var(--color-4); color: var(--color-1); font-family: var(--font-2); font-size: var(--text-md); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); }

/* ── Custom: intro-splits/no-prerequisites ── */
.welcome-split { background: color-mix(in srgb, var(--color-2) 95%, transparent); }
.welcome-split__inner { display: flex; align-items: stretch; width: 100%; }
.welcome-split__media { flex: 0 0 50%; border-right: 3px solid var(--color-1); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-2); }
.welcome-split__media img { width: 100%; height: 100%; object-fit: cover; }
.welcome-split__content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-lg); padding: var(--space-xxl) max(var(--space-lg), calc((100vw - var(--container-max)) / 2 + var(--space-xl))) var(--space-xxl) var(--space-xl); }
.welcome-split__title { font-family: var(--font-2); font-size: var(--text-h2); color: var(--color-3); line-height: 1; margin: 0; text-transform: uppercase; }
.welcome-split__script { font-family: var(--font-4); font-size: var(--text-xl); color: var(--color-4); margin: 0; }
.welcome-split__badge { display: inline-flex; align-self: flex-start; padding: var(--space-md) var(--space-lg); background: var(--color-4); border: 3px solid var(--color-1); font-family: var(--font-3); font-size: var(--text-h3); color: var(--color-1); line-height: 1em; }
.welcome-split__body { font-family: var(--font-1); font-size: var(--text-md); color: var(--color-1); max-width: 650px; margin: 0; }
.welcome-split__cta { background: var(--color-5); border: 2px solid var(--color-4); color: var(--color-3); font-family: var(--font-2); font-size: var(--text-md); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); }
@media (max-width: 768px) {
  .welcome-split__inner { flex-direction: column; }
  .welcome-split__media { flex: none; width: 100%; aspect-ratio: 4/3; border-right: none; border-bottom: 3px solid var(--color-1); }
  .welcome-split__content { padding: var(--space-xl) var(--space-lg); }
}

/* ── Custom: galleries/instagram-cta ── */
.instagram-cta { background: color-mix(in srgb, var(--color-5) 97%, transparent); text-align: center; }
.instagram-cta__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); padding-block: var(--space-xxl); }
.instagram-cta__heading { font-family: var(--font-2); font-size: var(--text-h1); color: var(--color-2); margin: 0; line-height: 1; text-transform: uppercase; }
.instagram-cta__handle {
  font-family: var(--font-3);
  font-size: var(--text-h3);
  color: var(--color-1);
  margin: 0;
  line-height: 1em;
  letter-spacing: 0.02em;
}
.instagram-cta__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); width: 100%; padding-block: var(--space-sm); }
.instagram-cta__strip::-webkit-scrollbar { display: none; }
.instagram-cta__photo { width: 100%; aspect-ratio: 1; border: 3px solid var(--color-1); overflow: hidden; }
.instagram-cta__photo img { width: 100%; height: 100%; object-fit: cover; background: var(--color-4); }
.instagram-cta__intro { display: flex; flex-direction: column; gap: var(--space-md); max-width: 718px; }
.instagram-cta__intro-heading { font-family: var(--font-1); font-weight: 600; font-size: 24px; color: var(--color-1); margin: 0; }
.instagram-cta__intro-body { font-family: var(--font-1); font-size: var(--text-lg); color: var(--color-1); margin: 0; }
.instagram-cta__cta { background: var(--color-3); border: 2px solid var(--color-1); color: var(--color-5); font-family: var(--font-2); font-size: var(--text-md); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); }

/* ── Custom: locations/map-split ── */
.location-map { background: color-mix(in srgb, var(--color-5) 97%, transparent); text-align: center; }
.location-map__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); padding: var(--space-xxxl) var(--space-lg) var(--space-xl); }
.location-map__heading { font-family: var(--font-2); font-size: var(--text-h1); color: var(--color-3); margin: 0; line-height: 1; text-transform: uppercase; }
.location-map__subheading { font-family: var(--font-3); font-size: var(--text-h3); color: var(--color-2); margin: 0; line-height: 1em; }
.location-map__media { width: 100%; border-block: 3px solid var(--color-1); background: var(--color-5); overflow: hidden; }
.location-map__media img { width: 100%; height: auto; display: block; aspect-ratio: 1440/574; object-fit: cover; }
.location-map__foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding: var(--space-xl) var(--space-lg); }
.location-map__statement { font-family: var(--font-1); font-weight: 700; font-size: var(--text-h3); color: var(--color-1); margin: 0; max-width: 600px; }
.location-map__body { font-family: var(--font-1); font-size: var(--text-md); color: var(--color-1); margin: 0; max-width: 600px; }
.location-map__cta { background: var(--color-2); border: 2px solid var(--color-4); color: var(--color-1); font-family: var(--font-2); font-size: var(--text-md); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); }

/* ── Custom: contact-ctas/brutalist ── */
.contact-cta { background-color: color-mix(in srgb, var(--color-5) 97%, transparent); text-align: center; }
.contact-cta__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); padding-block: var(--space-xxxl); }
.contact-cta__heading { font-family: var(--font-2); font-size: var(--text-h1); color: var(--color-3); margin: 0; line-height: 1; text-transform: uppercase; }
.contact-cta__badge { display: inline-flex; padding: var(--space-lg) var(--space-xl); background: var(--color-4); border: 3px solid var(--color-1); font-family: var(--font-3); font-size: var(--text-h3); color: var(--color-1); line-height: 1em; }
.contact-cta__intro { display: flex; flex-direction: column; gap: var(--space-md); max-width: 636px; }
.contact-cta__intro-heading { font-family: var(--font-1); font-weight: 700; font-size: var(--text-xl); color: var(--color-1); margin: 0; }
.contact-cta__intro-body { font-family: var(--font-1); font-weight: 600; font-size: var(--text-lg); color: var(--color-1); margin: 0; }
.contact-cta__form { width: 100%; max-width: 640px; --field-bg: var(--color-5); --field-fg: var(--color-1); --field-border: var(--color-3); --field-radius: var(--radius-sm); --field-pad: var(--space-md); --form-gap: var(--space-lg); --form-cols: 1; --label-color: var(--color-3); --field-focus: var(--color-2); }
.contact-cta__form .form--contact { background: var(--color-5); border: 3px solid var(--color-1); padding: var(--space-xl); }
.contact-cta__form .field__label { font-family: var(--font-3); line-height: 1em; }
.contact-cta__form .field__input, .contact-cta__form .field__textarea { font-family: var(--font-1); }
.contact-cta__form .form__submit { background: var(--color-2); border: 2px solid var(--color-4); color: var(--color-1); font-family: var(--font-2); }

/* ── Custom: ctas/closing ── */
.closing-cta { background-color: color-mix(in srgb, var(--color-3) 95%, transparent); color: var(--color-4); text-align: center; }
.closing-cta__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); padding: var(--space-xxxl) var(--space-lg) var(--space-xxl); }
.closing-cta__heading { font-family: var(--font-2); font-size: var(--text-h1); color: var(--color-2); margin: 0; line-height: 1; text-transform: uppercase; }
.closing-cta__script { font-family: var(--font-4); font-size: var(--text-xl); color: var(--color-4); margin: 0; }
.closing-cta__subheading { font-family: var(--font-3); font-size: var(--text-h3); color: var(--color-5); margin: 0; line-height: 1em; }
.closing-cta__body { font-family: var(--font-1); font-weight: 600; font-size: 24px; color: var(--color-4); max-width: 838px; margin: 0; }
.closing-cta__cta { background: var(--color-5); border: 2px solid var(--color-4); color: var(--color-3); font-family: var(--font-2); font-size: var(--text-md); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); }

/* ── Knob overrides: testimonials/carousel (library component) to match Figma ── */
.section--testimonials { background: color-mix(in srgb, var(--color-3) 95%, transparent); color: var(--color-4); }
.section--testimonials .section-head__heading { font-family: var(--font-2); font-size: var(--text-h1); color: var(--color-2); text-transform: uppercase; line-height: 1; }
.section--testimonials .section-head__sub { font-family: var(--font-3); font-size: var(--text-h3); color: var(--color-5); line-height: 1em; }
.section--testimonials .tcarousel__quote { font-family: var(--font-1); font-weight: 700; font-size: var(--text-h3); line-height: 1.2; color: var(--color-3); background: var(--color-4); border: 3px solid var(--color-1); padding: var(--space-xl); border-radius: var(--radius-md); }
.section--testimonials .tcarousel__author { background: var(--color-2); border: 3px solid var(--color-1); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); }
.section--testimonials .tcarousel__name { font-family: var(--font-3); font-weight: 400; color: var(--color-1); line-height: 1em; }
.section--testimonials .tcarousel__nav { background: var(--color-4); border: 2px solid var(--color-1); border-radius: var(--radius-md); }
.section--testimonials .tcarousel__nav--next { background: var(--color-7); }
.section--testimonials .tcarousel__dot { background: var(--color-8); border-radius: 0; width: 8px; height: 8px; }
.section--testimonials .tcarousel__dot.is-active { background: var(--color-7); }

/* ── Responsive: giant type scale-down for brutalist sections on mobile ── */
@media (max-width: 768px) {
  .hero-belong__title { font-size: 64px; }
  .schedule-bands__heading, .manifesto-stack__heading, .instagram-cta__heading, .location-map__heading, .contact-cta__heading, .closing-cta__heading { font-size: var(--text-h2); }
  .schedule-bands__tags { flex-direction: column; }
  .location-map__head, .contact-cta__inner, .closing-cta__inner, .hero-belong__inner { padding-inline: var(--space-md); }
}



/* Layerly —  — 2026-07-15 10:12:46 */
/* ============================================================
   CONNECTIONS — bespoke chrome (header + footer) + framework
   mobile-menu behavior. Appended by Layerly (2026-07-14).
   ============================================================ */

/* ── Framework: attribute-driven mobile menu + hamburger→X + sticky ── */
[data-nav-sticky] { position: sticky; top: 0; z-index: 1000; transition: box-shadow .2s; }
[data-nav-sticky].is-scrolled { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
[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: 32px; padding: 80px 24px;
    background: var(--mobile-menu-bg, #1800AC); color: var(--mobile-menu-fg, #FF94E1);
    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: 24px; width: 100%; margin: 0; padding: 0; list-style: none; }
  body.mobile-menu-open { overflow: hidden; }
}

/* ── Standard copyright line (footer.php) — matched to the blue footer ── */
.layerly-copyright { color: #FFF0F1; text-align: center; padding: 12px 24px 40px; font-family: 'Mozilla Headline', system-ui, sans-serif; font-size: 14px; }
.layerly-copyright__line { margin: 0; }
.layerly-copyright__sep { opacity: .5; margin: 0 .4em; }
.layerly-copyright a { color: inherit; text-decoration: underline; }

/* ── Header: transparent bar over the hero ── */
.masthead { position: absolute; top: 0; left: 0; right: 0; z-index: 1000; color: #FF94E1; }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.masthead__logo { display: inline-flex; align-items: center; text-decoration: none; }
.masthead__logo-img { max-height: 56px; width: auto; display: block; }
.masthead__logo-text { font-family: 'Climate Crisis', system-ui; font-size: 20px; color: #FF94E1; }
.masthead__menu { display: flex; align-items: center; gap: 32px; --mobile-menu-bg: #1800AC; --mobile-menu-fg: #FF94E1; }
.masthead__list { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.masthead__list a { font-family: 'BBH Bartle', system-ui, sans-serif; color: #FFFFFF; text-decoration: none; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; transition: color .15s ease; line-height: 1em; }
.masthead__list a:hover { color: #8FE86B; }
.masthead__cta { background: var(--color-5); color: var(--color-3); border: 2px solid var(--color-4); font-family: var(--font-2); font-size: var(--text-md); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); white-space: nowrap; }

/* ── Footer: blue band, nav row, newsletter, tagline ── */
.colophon { position: relative; background: color-mix(in srgb, #1800AC 95%, transparent); color: #FFFFFF; overflow: hidden; }
.colophon__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; padding-block: 48px; }
.colophon__nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.colophon__logo { display: inline-flex; align-items: center; text-decoration: none; }
.colophon__logo-img { max-height: 56px; width: auto; display: block; }
.colophon__logo-text { font-family: 'Climate Crisis', system-ui; font-size: 20px; color: #FF94E1; }
.colophon__list { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.colophon__list a { font-family: 'BBH Bartle', system-ui, sans-serif; color: #FF94E1; text-decoration: none; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; line-height: 1em; }
.colophon__list a:hover { color: #FFFDA0; }
.colophon__cta { display: inline-flex; align-items: center; justify-content: center; background: #FF94E1; color: #1E293B; border: 2px solid #FFFFFF; padding: 14px 32px; font-family: 'Climate Crisis', system-ui; font-size: 16px; text-decoration: none; white-space: nowrap; }
.colophon__newsletter { background: #FFFFFF; border: 3px solid #1E293B; width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 40px; }
.colophon__news-heading { margin: 0; font-family: 'BBH Bartle', system-ui, sans-serif; color: #1E293B; font-size: 20px; line-height: 1em; text-align: center; text-transform: uppercase; }
.colophon__form { display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: stretch; }
.colophon__email { flex: 1 1 240px; min-width: 0; border: 1.5px solid #1800AC; padding: 16px; font-family: 'Mozilla Headline', system-ui, sans-serif; font-size: 16px; color: #1E293B; background: #FFFFFF; }
.colophon__email::placeholder { color: #64748B; }
.colophon__submit { background: #FF94E1; color: #1E293B; border: 2px solid #FFFFFF; padding: 14px 32px; font-family: 'Climate Crisis', system-ui; font-size: 16px; cursor: pointer; white-space: nowrap; }
.colophon__submit:hover { filter: brightness(1.05); }
.colophon__status { flex-basis: 100%; margin: 0; text-align: center; color: #1E293B; }
.colophon__status.is-success { color: #059669; }
.colophon__status.is-error { color: #DC2626; }
.colophon__tagline { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.colophon__grace { margin: 0; font-family: 'BBH Bartle', system-ui, sans-serif; color: #FFFFFF; font-size: 24px; line-height: 1em; text-transform: uppercase; }
.colophon__whimsy { margin: 0; font-family: 'Sedgwick Ave Display', cursive; color: #FFFDA0; font-size: 28px; line-height: 1.15; }

@media (max-width: 768px) {
  .colophon__nav { flex-direction: column; gap: 20px; }
  .colophon__form { flex-direction: column; }
  .colophon__newsletter { padding: 24px; }
  .masthead__cta { padding: 12px 22px; }
}



/* Layerly —  — 2026-07-15 11:36:05 */
/* ================================================================
   CONNECTIONS — About + Events page sections. Appended by Layerly.
   Palette: blue #1800AC · pink #FF94E1 · yellow #FBF5DD · highlight #FFFDA0
   · green #8FE86B · cream #FFF0F1 · dark #1E293B. Fonts: Climate Crisis
   (display), BBH Bartle (eyebrow), Mozilla Headline (body), Sedgwick (script).
   ================================================================ */

/* Shared CTA pill (matches the header/footer button) */
.pill { display:inline-flex; align-items:center; justify-content:center; background:#FF94E1; color:#1E293B; border:2px solid #FFFFFF; padding:14px 34px; font-family:'Climate Crisis',system-ui; font-size:16px; text-decoration:none; white-space:nowrap; transition:transform .15s ease; }
.pill:hover { transform:translateY(-2px); }

/* ---- About: hero (blue, green giant title) ---- */
.about-hero { background:color-mix(in srgb, #1800AC 95%, transparent); color:#FFF0F1; padding:150px 0 96px; text-align:center; }
.about-hero__eyebrow { font-family:'Sedgwick Ave Display',cursive; color:#FF94E1; font-size:26px; margin:0 0 8px; transform:rotate(-3deg); }
.about-hero__title { font-family:'Climate Crisis',system-ui; color:#8FE86B; text-transform:uppercase; line-height:.92; margin:0; font-size:clamp(3rem,9vw,7rem); text-shadow:5px 6px 0 rgba(0,0,0,.35); }
.about-hero__sub { font-family:'BBH Bartle',system-ui; color:#FF94E1; text-transform:uppercase; letter-spacing:.03em; font-size:clamp(1.2rem,2.4vw,1.8rem); margin:28px 0 0; line-height: 1em; }
.about-hero__body { font-family:'Mozilla Headline',system-ui; font-size:18px; line-height:1.55; max-width:680px; margin:24px auto 32px; }

/* ---- About: what is connection (pink, split) ---- */
.about-whatis { background:color-mix(in srgb, #FF94E1 95%, transparent); color:#1E293B; padding:88px 0; }
.about-whatis__title { font-family:'Climate Crisis',system-ui; color:#1800AC; text-transform:uppercase; line-height:.98; font-size:clamp(2rem,5vw,3.6rem); margin:0 0 40px; }
.about-whatis__grid { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.about-whatis__sub { font-family:'BBH Bartle',system-ui; text-transform:uppercase; letter-spacing:.02em; font-size:1.15rem; margin:0 0 16px; line-height: 1em; }
.about-whatis__body { font-family:'Mozilla Headline',system-ui; font-size:18px; line-height:1.6; margin:0; }
.about-whatis__img { display:block; width:100%; height:100%; min-height:340px; object-fit:cover; border:3px solid #1E293B; }
.about-whatis__img.is-placeholder { background:#1800AC url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><rect width='40' height='40' fill='%231800AC'/><path d='M0 40L40 0M-10 10L10 -10M30 50L50 30' stroke='%238FE86B' stroke-width='2' opacity='.4'/></svg>"); }

/* ---- About: values (blue, striped rows) ---- */
.about-values { background:color-mix(in srgb, #1800AC 95%, transparent); color:#FFF0F1; padding:88px 0 0; }
.about-values__eyebrow { font-family:'Climate Crisis',system-ui; color:#8FE86B; text-transform:uppercase; font-size:clamp(2rem,5vw,3.4rem); margin:0; text-align:center; }
.about-values__title { font-family:'BBH Bartle',system-ui; color:#FF94E1; text-transform:uppercase; letter-spacing:.02em; font-size:1.5rem; margin:8px 0 16px; text-align:center; line-height: 1em; }
.about-values__body { font-family:'Mozilla Headline',system-ui; font-size:18px; line-height:1.55; max-width:640px; margin:0 auto 48px; text-align:center; }
.about-values__list { list-style:none; margin:0; padding:0; }
.about-values__row { padding:34px 0; }
.about-values__row-inner { display:flex; align-items:center; gap:28px; }
.about-values__num { font-family:'Climate Crisis',system-ui; font-size:2rem; opacity:.55; }
.about-values__stmt { font-family:'Climate Crisis',system-ui; text-transform:uppercase; line-height:1; font-size:clamp(1.4rem,3.4vw,2.6rem); }
.about-values__row--1 { background:color-mix(in srgb, #FF94E1 95%, transparent); color:#1E293B; }
.about-values__row--2 { background:color-mix(in srgb, #FFFFFF 95%, transparent); color:#1800AC; }
.about-values__row--3 { background:color-mix(in srgb, #FFFDA0 95%, transparent); color:#1E293B; }
.about-values__row--4 { background:color-mix(in srgb, #8FE86B 95%, transparent); color:#1E293B; }

/* ---- About: strive (yellow, big statement list) ---- */
.about-strive { background:color-mix(in srgb, #FBF5DD 97%, transparent); color:#1800AC; padding:96px 0; text-align:center; }
.about-strive__eyebrow { font-family:'Climate Crisis',system-ui; color:#1800AC; text-transform:uppercase; font-size:clamp(2rem,5vw,3.4rem); margin:0; }
.about-strive__script { font-family:'Sedgwick Ave Display',cursive; color:#FF94E1; font-size:2rem; margin:8px 0 0; }
.about-strive__lead { font-family:'Mozilla Headline',system-ui; color:#1E293B; font-size:18px; margin:20px 0 40px; }
.about-strive__list { list-style:none; margin:0 auto; padding:0; max-width:1000px; display:flex; flex-direction:column; gap:28px; }
.about-strive__item { font-family:'Climate Crisis',system-ui; color:#1800AC; text-transform:uppercase; line-height:1; font-size:clamp(1.6rem,4.4vw,3.4rem); }

/* ---- About: come as you are (yellow) ---- */
.about-welcome { background:color-mix(in srgb, #FBF5DD 97%, transparent); color:#1800AC; padding:0 0 96px; text-align:center; }
.about-welcome__inner { max-width:820px; }
.about-welcome__title { font-family:'Climate Crisis',system-ui; color:#1800AC; text-transform:uppercase; line-height:1; font-size:clamp(2rem,5.5vw,4rem); margin:0 0 28px; }
.about-welcome__note { display:inline-block; background:#FFFFFF; border:3px solid #1E293B; color:#1E293B; font-family:'BBH Bartle',system-ui; text-transform:uppercase; letter-spacing:.02em; font-size:1.2rem; padding:16px 28px; margin:0 0 32px; line-height: 1em; }
.about-welcome__script { font-family:'Sedgwick Ave Display',cursive; color:#FF94E1; font-size:1.8rem; margin:0; }
.about-welcome__stmt { font-family:'Climate Crisis',system-ui; color:#1800AC; text-transform:uppercase; font-size:clamp(1.4rem,3.4vw,2.4rem); margin:6px 0 20px; }
.about-welcome__body { font-family:'Mozilla Headline',system-ui; color:#1E293B; font-size:18px; line-height:1.6; max-width:640px; margin:0 auto; }

/* ---- About: closing (blue) — shared closing look ---- */
.about-closing, .events-closing { background:color-mix(in srgb, #1800AC 95%, transparent); color:#FFF0F1; padding:96px 0; text-align:center; }
.about-closing__title { font-family:'Climate Crisis',system-ui; color:#FF94E1; text-transform:uppercase; line-height:1; font-size:clamp(2.2rem,6vw,4.4rem); margin:0; }
.about-closing__sub { font-family:'BBH Bartle',system-ui; color:#8FE86B; text-transform:uppercase; letter-spacing:.02em; font-size:1.35rem; margin:20px 0 0; line-height: 1em; }
.about-closing__body { font-family:'Mozilla Headline',system-ui; font-size:18px; line-height:1.55; max-width:640px; margin:20px auto 32px; }

/* ---- Events: hero (blue) ---- */
.events-hero { background:color-mix(in srgb, #1800AC 95%, transparent); color:#FFF0F1; padding:150px 0 96px; text-align:center; }
.events-hero__eyebrow { font-family:'Sedgwick Ave Display',cursive; color:#FF94E1; font-size:26px; margin:0 0 8px; transform:rotate(-3deg); }
.events-hero__title { font-family:'Climate Crisis',system-ui; color:#8FE86B; text-transform:uppercase; line-height:.92; margin:0; font-size:clamp(3rem,10vw,8rem); text-shadow:5px 6px 0 rgba(0,0,0,.35); }
.events-hero__sub { font-family:'BBH Bartle',system-ui; color:#FF94E1; text-transform:uppercase; letter-spacing:.03em; font-size:clamp(1.2rem,2.4vw,1.8rem); margin:28px 0 0; line-height: 1em; }
.events-hero__body { font-family:'Mozilla Headline',system-ui; font-size:18px; line-height:1.55; max-width:700px; margin:24px auto 32px; }

/* ---- Events: upcoming grid (yellow, event cards) ---- */
.events-grid { background:color-mix(in srgb, #FBF5DD 95%, transparent); color:#1E293B; padding:88px 0; }
.events-grid__eyebrow { font-family:'Climate Crisis',system-ui; color:#1800AC; text-transform:uppercase; font-size:clamp(2rem,5.5vw,3.8rem); margin:0; text-align:center; }
.events-grid__title { font-family:'BBH Bartle',system-ui; color:#FF94E1; text-transform:uppercase; letter-spacing:.02em; font-size:1.35rem; margin:10px auto 16px; max-width:760px; text-align:center; line-height: 1em; }
.events-grid__body { font-family:'Mozilla Headline',system-ui; font-size:17px; line-height:1.55; max-width:640px; margin:0 auto 48px; text-align:center; }
.events-grid__cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.events-grid__card { border:3px solid #1E293B; padding:28px; display:flex; flex-direction:column; gap:14px; }
.events-grid__card--1 { background:#8FE86B; }
.events-grid__card--2 { background:#FFFFFF; }
.events-grid__card--3 { background:#FF94E1; }
.events-grid__card-title { font-family:'BBH Bartle',system-ui; color:#1E293B; text-transform:uppercase; font-size:1.35rem; line-height:1em; margin:0; }
.events-grid__card-blurb { font-family:'Mozilla Headline',system-ui; color:#1E293B; font-size:15px; line-height:1.5; margin:0; flex:1; }
.events-grid__card-cta { display:inline-block; align-self:flex-start; background:#FFFDA0; color:#1E293B; border:2px solid #1E293B; padding:8px 18px; font-family:'BBH Bartle',system-ui; text-transform:uppercase; font-size:.95rem; text-decoration:none; line-height: 1em; }
.events-grid__card-cta:hover { background:#FFFFFF; }

/* ---- Events: closing (blue) ---- */
.events-closing__script { font-family:'Sedgwick Ave Display',cursive; color:#FFFFFF; font-size:1.8rem; margin:0 0 6px; }
.events-closing__title { font-family:'Climate Crisis',system-ui; color:#FF94E1; text-transform:uppercase; line-height:1; font-size:clamp(2.2rem,6vw,4.4rem); margin:0; }
.events-closing__sub { font-family:'BBH Bartle',system-ui; color:#8FE86B; text-transform:uppercase; letter-spacing:.02em; font-size:1.3rem; margin:20px 0 0; line-height: 1em; }
.events-closing__body { font-family:'Mozilla Headline',system-ui; color:#FFF0F1; font-size:18px; line-height:1.55; max-width:660px; margin:20px auto 32px; }

/* ---- Single event ---- */
.event-single__hero { background:color-mix(in srgb, #1800AC 95%, transparent); color:#FFF0F1; padding:150px 0 88px; text-align:center; }
.event-single__eyebrow { font-family:'BBH Bartle',system-ui; color:#FF94E1; text-transform:uppercase; letter-spacing:.03em; margin:0 0 12px; line-height: 1em; }
.event-single__title { font-family:'Climate Crisis',system-ui; color:#8FE86B; text-transform:uppercase; line-height:.95; font-size:clamp(2.4rem,7vw,5rem); margin:0; text-shadow:4px 5px 0 rgba(0,0,0,.35); }
.event-single__when { font-family:'BBH Bartle',system-ui; color:#FFFDA0; text-transform:uppercase; font-size:1.2rem; margin:24px 0 0; line-height: 1em; }
.event-single__blurb { font-family:'Mozilla Headline',system-ui; font-size:19px; line-height:1.55; max-width:640px; margin:20px auto 32px; }
.event-single__body { background:color-mix(in srgb, #FBF5DD 95%, transparent); color:#1E293B; padding:72px 0; font-family:'Mozilla Headline',system-ui; font-size:18px; line-height:1.7; }
.event-single__body .wrap { max-width:760px; }
.event-single__back { background:color-mix(in srgb, #1800AC 95%, transparent); padding:0 0 64px; }
.event-single__back-link { font-family:'BBH Bartle',system-ui; color:#FF94E1; text-transform:uppercase; text-decoration:none; letter-spacing:.03em; line-height: 1em; }

/* ---- Responsive ---- */
@media (max-width:768px) {
  .about-whatis__grid { grid-template-columns:1fr; gap:28px; }
  .events-grid__cards { grid-template-columns:1fr; }
  .about-values__row-inner { gap:16px; }
  .about-hero, .events-hero, .event-single__hero { padding-top:120px; }
}



/* Layerly — Removed: legacy per-section triangle-texture ::before overlay (2026-07-15 12:07–12:10 passes). This was a duplicate pattern mechanism layered on top of each section's own background, independent of the single sitewide body pattern added later — it was the real cause of "pattern still showing" on solid-color sections like welcome-split. The sitewide body background pattern (below) is now the only pattern source. — 2026-07-15 15:45:00 */


/* Layerly —  — 2026-07-15 14:11:31 */
/* ---- Tweaks 2026-07-15 ---- */
/* 1. Bigger header logo (~100px) with negative bottom margin so the header height is unchanged */
.masthead__logo-img { width: 100px; height: auto; max-height: none; margin-bottom: -26px; }
/* 4. Buttons: looser letter-spacing + branded-green hover */
.pill, .masthead__cta, .colophon__cta { letter-spacing: .08em; transition: background-color .2s ease, color .2s ease, transform .15s ease, border-color .2s ease; }
.pill:hover, .masthead__cta:hover, .colophon__cta:hover { background: #8FE86B; color: #1E293B; transform: translateY(-2px); }
/* 5. Copyright bar: now nested as the last child inside <footer class="colophon"> (see footer.php), so it flows continuously with the footer's own blue background — no separate seam to patch. */
.layerly-copyright { background: none; }


/* Layerly —  — 2026-07-15 14:12:42 */
.img-carousel { background:#1800AC; }
.img-carousel__viewport { position:relative; }
.img-carousel__track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; }
.img-carousel__track::-webkit-scrollbar { display:none; }
.img-carousel__slide { flex:0 0 100%; scroll-snap-align:start; }
.img-carousel__img { display:block; width:100%; height:min(70vh,640px); object-fit:cover; }
.img-carousel__nav { position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:#FF94E1; color:#1E293B; border:2px solid #FFFFFF; cursor:pointer; z-index:2; transition:background-color .2s ease; }
.img-carousel__nav--prev { left:24px; } .img-carousel__nav--next { right:24px; }
.img-carousel__nav:hover { background:#8FE86B; }
.img-carousel__dots { position:absolute; bottom:20px; left:0; right:0; display:flex; justify-content:center; gap:10px; z-index:2; }
.img-carousel__dot { width:12px; height:12px; border-radius:50%; border:2px solid #FFFFFF; background:transparent; cursor:pointer; padding:0; }
.img-carousel__dot.is-active, .img-carousel__dot[aria-current="true"] { background:#8FE86B; }
@media (max-width:768px){ .img-carousel__img{ height:52vh; } .img-carousel__nav{ width:44px; height:44px; } }


/* Layerly —  — 2026-07-15 14:15:41 */
/* Copyright bar is transparent — let the footer blue show continuously behind it (body was white, which would hide the near-white text). */
body { background-color: #1800AC; }


/* Layerly — Set testimonials section-head max-width to 700px (was inheriting 720px default) per request — 2026-07-15 14:20:15 */
.section--testimonials .section-head__inner { max-width: 700px; }


/* Layerly — Widen testimonials section header max-width from 700px to 900px — 2026-07-15 14:21:32 */
.section--testimonials .section-head__inner { max-width: 1000px; }


/* Layerly — Widen testimonials section-head max-width to 1000px (from 900px) — 2026-07-15 14:24:45 */
.section--testimonials .section-head__inner { max-width: 1000px; }


/* Layerly — Buttons get brand-green hover background across the site — 2026-07-15 14:24:45 */
.btn:hover,
.btn:focus-visible {
    background-color: #8FE86B;
}


/* Layerly — Loosen letter-spacing on all buttons site-wide for readability — 2026-07-15 14:26:10 */
.btn { letter-spacing: 0.04em; }


/* Layerly — Make button text white on hover/focus across all button variants — 2026-07-15 14:27:01 */
.btn:hover,
.btn:focus-visible {
    color: #FFFFFF;
}


/* Layerly — Make .pill CTA buttons (About/Events pages) match the header/home button style; unify hover text to white across all button variants — 2026-07-15 14:37:29 */
/* Unify .pill buttons (About/Events hero + closing CTAs) with the site's primary button
   treatment used everywhere else (header, home hero, schedule, closing CTA, etc.):
   cream background, navy text, white border, Climate Crisis font. */
.pill {
    background: var(--color-5);
    color: var(--color-3);
    border: 2px solid var(--color-4);
    font-family: var(--font-2);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-md);
}
/* Hover text goes white on every button variant, matching the .btn convention. */
.pill:hover,
.colophon__cta:hover {
    color: var(--color-4);
}


/* Layerly — Tighten line-height for BBH Bartle text elements that lacked an explicit value (inherited the loose 1.5 body line-height) — matches the 1.15 already used on other BBH Bartle headings — 2026-07-15 14:40:16 */
.masthead__list a,
.colophon__list a,
.about-hero__sub,
.about-whatis__sub,
.about-values__title,
.about-welcome__note,
.about-closing__sub,
.events-hero__sub,
.events-grid__title,
.events-closing__sub,
.event-single__eyebrow,
.event-single__when,
.event-single__back-link,
.events-grid__card-cta {
    line-height: 1.15;
}


/* Layerly — Set line-height to 1em (from 1.15) on every element styled with the BBH Bartle font, per request — 2026-07-15 14:44:22 */
.masthead__list a,
.colophon__list a,
.colophon__news-heading,
.colophon__grace,
.about-hero__sub,
.about-whatis__sub,
.about-values__title,
.about-welcome__note,
.about-closing__sub,
.events-hero__sub,
.events-grid__title,
.events-grid__card-title,
.events-grid__card-cta,
.events-closing__sub,
.event-single__eyebrow,
.event-single__when,
.event-single__back-link {
    line-height: 1em;
}


/* Layerly — One sitewide repeating background pattern (was previously duplicated per-section as separate tiled bg-images); individual sections now use translucent colors over this single layer. NOTE: background-attachment:fixed removed — it interacted badly with sections that use `overflow:hidden` (section anatomy), causing the pattern to visibly bleed through fully-opaque solid-color sections in some render paths. Scroll-attached tiling still reads as one continuous sitewide pattern. — 2026-07-15 15:40:00 */
body {
    background-color: var(--color-bg);
    background-image: url('/wp-content/uploads/2026/07/7c7407e51df896e6a454256bd01bad28-1.webp');
    background-repeat: repeat;
    background-size: 800px 800px; /* enlarged per request */
}


/* Layerly — Turn Sedgwick Ave Display script tags into overlapping rotated "sticker" labels absolutely positioned over their adjacent headlines — 2026-07-15 16:56:04 */
/* Sedgwick Ave Display "sticker" treatment — script tags overlap their
   adjacent headline at a slight rotation, out of normal document flow. */

.hero-belong__title-group { position: relative; }
.hero-belong__tag-script {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%) rotate(-7deg);
    margin: 0;
    white-space: nowrap;
}

.welcome-split__heading-group { position: relative; }
.welcome-split__script {
    position: absolute;
    bottom: -0.35em;
    left: 2%;
    z-index: 3;
    transform: rotate(5deg);
    margin: 0;
    white-space: nowrap;
}

.closing-cta__heading-group { position: relative; display: inline-block; }
.closing-cta__script {
    position: absolute;
    bottom: -0.2em;
    right: -4%;
    z-index: 3;
    transform: rotate(-6deg);
    margin: 0;
    white-space: nowrap;
}

.about-hero__title-group { position: relative; display: inline-block; }
.about-hero__eyebrow {
    position: absolute !important;
    top: -0.35em;
    left: -2%;
    z-index: 3;
    transform: rotate(-8deg) !important;
    margin: 0 !important;
    white-space: nowrap;
}

.about-welcome__stmt-group { position: relative; display: inline-block; }
.about-welcome__script {
    position: absolute;
    top: -0.6em;
    right: -6%;
    z-index: 3;
    transform: rotate(7deg);
    margin: 0;
    white-space: nowrap;
}

.about-strive__eyebrow-group { position: relative; display: inline-block; }
.about-strive__script {
    position: absolute;
    bottom: -0.5em;
    right: -8%;
    z-index: 3;
    transform: rotate(-5deg);
    margin: 0;
    white-space: nowrap;
}

.events-closing__title-group { position: relative; display: inline-block; }
.events-closing__script {
    position: absolute;
    top: -0.5em;
    right: -2%;
    left: auto;
    z-index: 3;
    transform: rotate(6deg);
    margin: 0;
    white-space: nowrap;
}

.colophon__tagline-group { position: relative; display: inline-block; }
.colophon__whimsy {
    position: absolute;
    bottom: -0.55em;
    right: -12%;
    z-index: 3;
    transform: rotate(-6deg);
    margin: 0 !important;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .hero-belong__tag-script,
    .welcome-split__script,
    .closing-cta__script,
    .about-hero__eyebrow,
    .about-welcome__script,
    .about-strive__script,
    .events-closing__script,
    .colophon__whimsy {
        font-size: var(--text-lg);
    }
}


/* Layerly — Match footer logo size to header logo (100px) and footer nav link colors to header nav link colors — 2026-07-15 17:13:06 */
/* Footer logo matches header logo size (100px, matching .masthead__logo-img) */
.colophon__logo-img { width: 100px; height: auto; max-height: none; }

/* Footer nav links match header nav link colors exactly */
.colophon__list a { color: #FFFFFF; }
.colophon__list a:hover { color: #8FE86B; }


/* Layerly — Track E — mobile type-scale restore (fixes responsive scale clobbered by later :root) + hero fit — 2026-07-22 15:56:48 */
@media (max-width:768px){:root{--text-display:56px;--text-h1:44px;--text-h2:34px;--text-h3:26px;}.hero-belong__title{font-size:44px;}.hero-belong__statement{font-size:26px;line-height:1.06;}.hero-belong__eyebrow{font-size:22px;}html,body{overflow-x:hidden;}}@media (max-width:480px){:root{--text-display:40px;--text-h1:34px;--text-h2:26px;--text-h3:20px;}.hero-belong__title{font-size:34px;}.hero-belong__statement{font-size:20px;}.hero-belong__eyebrow{font-size:18px;}.section-head__heading{font-size:30px;}}


/* Layerly — Track E — hide decorative absolute-positioned hero script accent on mobile (was overlapping eyebrow/title; redundant with statement) — 2026-07-22 15:59:18 */
@media (max-width:768px){.hero-belong__tag-script{display:none;}}


/* Layerly — WCAG AA contrast: darken pink text on the white manifesto band (was #FF94E1 on #FFFFFF = 1.99:1). Ink-pink #A01860 = 7.5:1. band--0 (dark bg, bright pink) is untouched. — 2026-07-22 16:25:22 */
.manifesto-stack__band--1 span {
  color: var(--color-2);
}


/* Layerly — carousel drag affordance: grab cursor + disable snap while dragging — 2026-07-22 16:30:18 */
[data-carousel-track]{cursor:grab;} [data-carousel-track].is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none;}


/* Layerly — WP admin-bar offset — Connections .masthead is an absolute overlay header (top:0) which WP does not shift for the 32px/46px admin bar. Mirrors the base-theme LOCKED rule + adds .masthead. — 2026-07-22 16:52:02 */
body.admin-bar [data-nav-sticky],body.admin-bar [data-nav-overlay],body.admin-bar .site-header--overlay,body.admin-bar .masthead{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,body.admin-bar .masthead{top:46px;}}


/* Layerly — Responsive pass 2: fluid type >=769px (fixes oversized headings at tablet/small-laptop widths) + tighter vertical rhythm on mobile (sections used a flat 80px/120px padding-block at every size) — 2026-07-23 22:21:12 */
@media (min-width:769px){:root{--text-display:clamp(56px,9vw,148px);--text-h1:clamp(40px,6vw,96px);--text-h2:clamp(32px,4.4vw,64px);--text-h3:clamp(24px,2.8vw,44px);--text-xl:clamp(20px,1.8vw,28px);}} @media (max-width:768px){:root{--space-xxl:48px;--space-xxxl:64px;}} @media (max-width:480px){:root{--space-xxl:40px;--space-xxxl:52px;}}


/* Layerly — WCAG AA contrast pass 2 (color-mix backgrounds missed by first audit): instagram heading pink-on-yellow 1.87->7.09; welcome-split script and testimonial author white-on-pink 1.99->7.37 — 2026-07-23 22:24:42 */
.instagram-cta__heading{color:var(--color-3);} .welcome-split__script{color:var(--color-4);} .tcarousel__author-text,.tcarousel__name,.tcarousel__role{color:#1E293B;}


/* Layerly — Remove top/bottom section padding on welcome-split section for desktop only — 2026-07-28 16:37:35 */
@media (min-width: 769px) {
    .section--welcome_split { padding-block: 0; }
}


/* Layerly — Remove top padding on welcome-split section for mobile — 2026-07-28 16:40:58 */
@media (max-width: 768px) {
    .section--welcome_split { padding-top: 0; }
}


/* Layerly - Background pattern fix: the sitewide body pattern rule above (added
   2026-07-15) hotlinked its tile from claude2.layerly.dev, which is unreachable,
   so the pattern silently never rendered and the page fell back to flat white.
   The identical file already lives in this site's own media library, so the URL
   now points there - root-relative rather than absolute, so it keeps working
   after the site moves to the client's real domain. No other property of the
   rule was changed. - 2026-07-28 */


/* Layerly - Gallery strip: show every published photo, in a grid that divides evenly,
   at a usable size on phones. The 2026-07-28 edit that turned this strip from a
   horizontal scroller into a 3-up grid also dropped layerly_instagram_cta_limit from
   8 to 6 - hiding two published photos in answer to a request that all of them be
   visible - and set an unconditional repeat(3, 1fr), which renders ~104px thumbnails
   at 375px (they were 200px in the scroller). Limit is back to the template default
   of 8; 4-up on desktop is two clean rows of four, 2-up on phones. - 2026-07-28 */
.instagram-cta__strip { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
    .instagram-cta__strip { grid-template-columns: repeat(2, 1fr); }
}


/* Layerly - Sitewide background pattern doubled: 800px -> 1600px tile (100% larger,
   per request). Only the tile SCALE changed; the image, repeat and the 0.95-alpha
   section colors that let it read as a ~5% texture are untouched.
   NOTE the tile is still forced square from a 1920x1200 source, so each motif is
   compressed horizontally about 1.6x more than vertically - that predates this
   change. To render it undistorted instead, use 1600px 1000px. - 2026-07-28 */
body { background-size: 1600px 1600px; }


/* Layerly — Layout + secondary style for the new YouTube CTA alongside Get directions — 2026-07-28 20:21:12 */
.schedule-bands__cta-wrap { display: flex; align-items: center; justify-content: center; gap: var(--space-md); flex-wrap: wrap; }
.schedule-bands__cta--secondary { background: transparent; border: 2px solid var(--color-5); color: var(--color-5); }


/* Layerly — Add opening/closing quotation marks around testimonial carousel quotes — 2026-08-03T15:06:23.026Z */
.tcarousel__quote::before {
  content: open-quote;
}

.tcarousel__quote::after {
  content: close-quote;
}


/* Layerly — Client-approved: change background of the 2nd about-values row (item 02) to light blue — 2026-08-03T17:40:46.782Z */
.about-values__list > .about-values__row--2:nth-child(2) {
  background: color-mix(in srgb, #ADD8E6 95%, transparent);
}


/* Layerly — Featured image band on single event page, sits above the body copy on cream background — 2026-08-04T12:22:52.886Z */



/* Layerly — Restyle the event featured image to sit inside the hero, below the title, above date/blurb/CTA — 2026-08-04T17:05:38.658Z */
.event-single__hero .event-single__image {
  max-width: 900px;
  margin: var(--space-lg) auto var(--space-md);
}

.event-single__hero .event-single__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  border: 3px solid var(--color-text);
}


/* Layerly — Lay hero CTAs side by side; ghost styling for the secondary Watch us live button — 2026-08-28T18:03:46.007Z */
.hero-belong__cta--ghost {
  background: transparent;
  border: 2px solid var(--color-5);
  color: var(--color-5);
}