/*
Theme Name:   Really Resourceful Group (Layerly)
Template:     layerly-base
Version:      1.0.0
Layerly Site: reallyresourceful-layerly-dev
Description:  Per-site theme for Really Resourceful Group. Holds ONLY this site's own CSS, bespoke sections and page templates. The framework lives in the parent and is updated fleet-wide — never copy a framework file in here without recording it as a fork.
*/

/* Per-site tokens and CSS below. Override the NUMBERED tokens; never edit the framework's own table. */
:root {
}

/* ==== MIGRATED FROM THE FRAMEWORK STYLESHEET (child-theme migration 2026-09-04) ==== */
/* Token values that differ from published r31. PROVENANCE UNRESOLVED: this site is on an
   older framework, so these may be per-site choices OR values the framework has since
   changed. Carried over so the render does not shift; flagged for a human. */
:root {
    --space-xl: 40px;
    --space-xxl: 80px;
    --text-h3: 32px;
    --text-h2: 44px;
    --text-h1: 64px;
}

/* Layerly — Really Resourceful Group — Figma design tokens (colors, fonts, type scale, spacing) — 2026-07-27 18:43:15 */
:root {
    /* Colors — exact, Figma-derived (Really Resourceful Group) */
    --color-1: #222222;
    --color-2: #EAECF0;
    --color-3: #76ABAE;
    --color-4: #303841;
    --color-5: #FFFFFF;
    --color-6: #FF5E1A;
    --color-7: #000000;
    --color-8: #64748B;

    /* Functional aliases */
    --color-primary: #FF5E1A;       /* bold orange — CTAs, accents */
    --color-text: #000000;
    --color-text-muted: #64748B;
    --color-bg: #FFFFFF;
    --color-surface: #EAECF0;
    --color-border: #EAECF0;

    /* Fonts — exact families (auto-loaded via Google Fonts) */
    --font-1: 'Cascadia Mono', monospace;
    --font-2: 'Bungee Inline', sans-serif;
    --font-3: 'Abril Fatface', serif;
    --font-display: var(--font-2);
    --font-body: var(--font-1);

    /* Type scale overrides — exact Figma sizes, fluid for headings */
    --text-h1: clamp(2.5rem, 5vw + 1rem, 5.8125rem); /* 93px desktop */
    --text-h2: clamp(2rem, 4vw + 1rem, 4rem);        /* 64px desktop */
    --text-h3: clamp(1.375rem, 2vw + 1rem, 2rem);    /* 32px desktop */
    --text-xl: 1.5rem;   /* 24px */
    --text-lg: 1.25rem;  /* 20px */
    --text-md: 1rem;     /* 16px */
    --text-sm: 0.875rem; /* 14px */
    --text-xs: 0.75rem;  /* 12px */

    /* Spacing — matches t-shirt defaults; xxl fluid up to the design's 120px max */
    --space-xxl: clamp(3rem, 6vw + 1rem, 7.5rem); /* 120px desktop */

    /* Grain/halftone texture overlay — used across dark + light section fills in the Figma */
    --texture-grain: url('/wp-content/uploads/2026/07/layerly-1785189395.webp');
}


/* Layerly — Bespoke section CSS for RRG homepage: heroes/photo-strip, intros/framed-split, service-grids/framed-cta, benefit-grids/cards — 2026-07-27 19:41:16 */
/* heroes/photo-strip — dark hero with bg lines + big Bungee headline + photo carousel strip */
.hero-photo-strip {
    background: var(--section-bg-color, var(--color-4));
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-lg);
    text-align: center;
}
.hero-photo-strip__lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: repeating-linear-gradient(90deg, var(--color-3) 0 2px, transparent 2px 80px);
    opacity: .15;
    pointer-events: none;
}
.hero-photo-strip__title { position: relative; z-index: 1; max-width: 900px; }
.hero-photo-strip__heading {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-6);
    text-shadow: 0px 7px 0px var(--color-1);
    margin: 0 0 var(--space-lg);
}
.hero-photo-strip__sub {
    font-family: var(--font-3);
    font-size: var(--text-md);
    color: var(--color-surface);
    max-width: 320px;
    margin: 0 auto var(--space-lg);
}
.hero-photo-strip__ctas { display: flex; justify-content: center; }
.hero-photo-strip__cta { border-radius: var(--radius-full); background: var(--color-5); color: var(--color-1); border-color: var(--color-1); }
.hero-photo-strip__carousel {
    position: relative;
    z-index: 1;
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    align-items: center;
    margin-top: var(--space-lg);
    overflow-x: auto;
    padding: 0 var(--space-md);
}
.hero-photo-strip__frame {
    flex: 0 0 auto;
    width: 280px;
    height: 277px;
    border: 4px solid var(--color-1);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.hero-photo-strip__frame img { width: 100%; height: 100%; object-fit: cover; background: var(--color-1); display: block; }
@media (max-width: 767px) {
    .hero-photo-strip__frame { width: 160px; height: 158px; }
}

/* intros/framed-split — statement card left, photo right */
.intro-framed-split { background: var(--section-bg-color, var(--color-4)); }
.intro-framed-split__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: stretch;
}
.intro-framed-split__card {
    background: var(--color-3);
    border: 3px solid var(--color-7);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
.intro-framed-split__frame {
    border: 2px solid var(--color-4);
    border-radius: var(--radius-sm);
    padding: var(--space-xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    height: 100%;
    justify-content: center;
}
.intro-framed-split__quote-box {
    background: var(--color-4);
    border: 4px solid var(--color-7);
    border-radius: var(--radius-sm);
    padding: var(--space-lg);
}
.intro-framed-split__quote {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.2;
    color: var(--color-3);
    text-align: center;
    margin: 0;
}
.intro-framed-split__body {
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--color-1);
    text-align: center;
    margin: 0;
}
.intro-framed-split__media { border: 4px solid var(--color-7); border-radius: var(--radius-md); overflow: hidden; }
.intro-framed-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
    .intro-framed-split__inner { grid-template-columns: 1fr; }
}

/* service-grids/framed-cta — 3-up cards alternating fill + closing statement */
.service-grid--framed-cta { position: relative; }
.service-grid--framed-cta .service-grid__lines {
    position: absolute; inset: 0; z-index: 0;
    background-image: repeating-linear-gradient(90deg, var(--color-4) 0 2px, transparent 2px 80px);
    opacity: .12; pointer-events: none;
}
.service-grid--framed-cta .wrap { position: relative; z-index: 1; }
.service-grid--framed-cta .service-grid__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}
.service-card--framed {
    background: var(--color-surface);
    border: 4px solid var(--color-4);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
}
.service-card--framed.service-card--alt { background: var(--color-3); }
.service-card--framed .service-card__frame {
    border: 3px solid var(--color-3);
    border-radius: var(--radius-sm);
    padding: var(--space-xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xxl);
    text-align: center;
}
.service-card--framed.service-card--alt .service-card__frame { border-color: var(--color-surface); }
.service-card--framed .service-card__media { width: 100%; aspect-ratio: 3 / 2; }
.service-card--framed .service-card__title {
    font-family: var(--font-1);
    font-weight: var(--weight-bold);
    font-size: var(--text-h3);
    color: var(--color-1);
}
.service-card--framed .service-card__excerpt { color: var(--color-1); }
.service-card--framed .service-card__cta { width: 100%; border-radius: var(--radius-full); }
.service-grid__closing {
    text-align: center;
    max-width: 640px;
    margin: var(--space-xl) auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}
.service-grid__closing-body { color: var(--color-1); margin: 0; }
.service-grid__closing-statement { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-1); margin: 0; }
.service-grid__closing-cta { border-radius: var(--radius-full); background: var(--color-3); color: var(--color-surface); }
@media (max-width: 900px) {
    .service-grid--framed-cta .service-grid__list { grid-template-columns: 1fr; }
}

/* benefit-grids/cards — bordered card containing a 4-up grid */
.benefit-grid { position: relative; background: var(--section-bg-color, var(--color-1)); }
.benefit-grid__lines {
    position: absolute; inset: 0; z-index: 0;
    background-image: repeating-linear-gradient(90deg, var(--color-surface) 0 2px, transparent 2px 80px);
    opacity: .1; pointer-events: none;
}
.benefit-grid .wrap { position: relative; z-index: 1; }
.benefit-grid__card {
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    padding: var(--space-xl);
}
.benefit-grid__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}
.benefit-grid__item {
    border: 2px solid var(--color-6);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.benefit-grid__title {
    font-family: var(--font-1);
    font-weight: 600;
    font-size: var(--text-xl);
    color: var(--color-1);
    padding: var(--space-sm);
    margin: 0;
}
.benefit-grid__body-box {
    background: var(--color-3);
    border: 3px solid var(--color-4);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    flex: 1;
}
.benefit-grid__body { color: var(--color-surface); margin: 0; }
.benefit-grid__closing { text-align: center; color: var(--color-1); max-width: 700px; margin: var(--space-xl) auto 0; }
@media (max-width: 900px) {
    .benefit-grid__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .benefit-grid__list { grid-template-columns: 1fr; }
}



/* Layerly — CSS for pre-existing custom sections (philosophy-band, about-split, locations-band, cta-form) matching RRG Figma geometry — 2026-07-27 19:41:38 */
/* philosophy-bands/three-point — dark statement band */
.philosophy-band { background: var(--section-bg-color, var(--color-4)); text-align: center; }
.philosophy-band__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); }
.philosophy-band__head { max-width: 900px; }
.philosophy-band__heading {
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--color-primary);
    text-shadow: 0px 6px 0px var(--color-1);
    margin: 0 0 var(--space-md);
}
.philosophy-band__sub { font-family: var(--font-3); color: var(--color-surface); margin: 0; }
.philosophy-band__intro { font-weight: var(--weight-bold); color: var(--color-3); margin: 0; }
.philosophy-band__points {
    display: flex;
    list-style: none;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
    background: var(--color-3);
    border: 4px solid var(--color-1);
    box-shadow: 0px 12px 0px var(--color-1);
    padding: var(--space-md) var(--space-xxl);
    margin: 0;
    width: 100%;
    max-width: 1200px;
}
.philosophy-band__point {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--text-h3);
    color: var(--color-1);
}
.philosophy-band__divider { color: var(--color-2); font-size: var(--text-xl); }
.philosophy-band__statement { max-width: 750px; display: flex; flex-direction: column; gap: var(--space-md); }
.philosophy-band__statement-lead { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-3); margin: 0; }
.philosophy-band__statement-body { color: var(--color-surface); margin: 0; }
@media (max-width: 767px) {
    .philosophy-band__points { flex-direction: column; padding: var(--space-lg); }
}

/* about-splits/image-left */
.about-split { background: var(--section-bg-color, var(--color-surface)); }
.about-split__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl); align-items: center; }
.about-split__media { border-radius: var(--radius-md); overflow: hidden; }
.about-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-split__content { text-align: center; }
.about-split__title {
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--color-6);
    text-shadow: 0px 6px 0px var(--color-1);
    margin: 0 0 var(--space-md);
}
.about-split__subheading { font-family: var(--font-3); color: var(--color-4); margin: 0 0 var(--space-lg); }
.about-split__body { margin: 0 0 var(--space-md); }
.about-split__body--emphasis { color: var(--color-6); font-weight: var(--weight-bold); }
.about-split__cta { margin-top: var(--space-md); }
.about-split__cta .btn { background: var(--color-6); color: var(--color-surface); border-radius: var(--radius-full); }
@media (max-width: 900px) {
    .about-split__inner { grid-template-columns: 1fr; }
}

/* locations/offices */
.locations-band { background: var(--section-bg-color, var(--color-4)); }
.locations-band__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); }
.locations-band__head { text-align: center; max-width: 900px; }
.locations-band__heading {
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--color-6);
    text-shadow: 0px 6px 0px var(--color-1);
    margin: 0 0 var(--space-md);
}
.locations-band__sub { font-family: var(--font-3); color: var(--color-surface); margin: 0; }
.locations-band__offices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); width: 100%; max-width: 1200px; }
.locations-band__office {
    border: 4px solid var(--color-7);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    text-align: center;
}
.locations-band__office--mke { background: var(--color-surface); }
.locations-band__office--chi { background: var(--color-1); }
.locations-band__office-name {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--text-h3);
    color: var(--color-3);
    margin: 0 0 var(--space-md);
}
.locations-band__office--mke .locations-band__office-address { color: var(--color-1); }
.locations-band__office--chi .locations-band__office-address { color: var(--color-surface); }
.locations-band__office-address { margin: 0; }
.locations-band__other {
    background: var(--color-3);
    border: 4px solid var(--color-7);
    border-radius: var(--radius-md);
    padding: var(--space-xl) var(--space-xxl);
    text-align: center;
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}
.locations-band__other-heading { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-1); margin: 0; }
.locations-band__other-body { color: var(--color-1); margin: 0; }
.locations-band__badge {
    display: inline-flex;
    background: var(--color-6);
    color: var(--color-surface);
    border: 3px solid var(--color-1);
    border-radius: var(--radius-full);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-xs);
    letter-spacing: .05em;
    text-transform: uppercase;
}
.locations-band__statement {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-3);
    max-width: 800px;
    text-align: center;
    margin: 0;
}
@media (max-width: 767px) {
    .locations-band__offices { grid-template-columns: 1fr; }
}

/* ctas/contact-form */
.cta-form { background: var(--section-bg-color, var(--color-6)); text-align: center; }
.cta-form__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); }
.cta-form__head { max-width: 900px; }
.cta-form__heading {
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--color-surface);
    text-shadow: 0px 6px 0px var(--color-1);
    margin: 0 0 var(--space-md);
}
.cta-form__sub { font-family: var(--font-3); color: var(--color-surface); margin: 0; }
.cta-form__intro { color: var(--color-1); max-width: 480px; margin: 0; }
.cta-form__form { width: 100%; max-width: 480px; }
.cta-form__calendly {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}
.cta-form__calendly-text {
    background: var(--color-3);
    border: 4px solid var(--color-1);
    box-shadow: 0px 12px 0px var(--color-1);
    font-family: var(--font-display);
    color: var(--color-1);
    padding: var(--space-md) var(--space-xxl);
    width: 100%;
    text-align: center;
    margin: 0;
}
.cta-form__calendly .btn { border-radius: var(--radius-full); background: var(--color-5); color: var(--color-1); }



/* Layerly — nav real links, heading weight fix, hero h1 clamp fix, global texture overlay — 2026-07-27 20:06:27 */
/* Fix: h1/h2/h3 render browser-bold; Figma display font (Bungee Inline) is weight 400 */
h1, h2, h3, .hero-photo-strip__heading, .philosophy-band__heading, .service-grid--framed-cta h2, .benefit-grid h2, .locations-band__heading, .about-split__title, .intro-split__title {
    font-weight: var(--weight-reg);
}
/* Fix: --text-h1 clamp preferred slope was too shallow, never reaching the 93px
   Figma max at normal desktop widths (1280-1440) — bump the vw multiplier so it
   saturates at the max within the real desktop range. */
:root {
    --text-h1: clamp(2.5rem, 4vw + 3rem, 5.8125rem); /* hits 93px max by ~1200px viewport */
}
/* Global subtle halftone texture overlay — matches the repeated Figma
   background image instance used across sections (bg-transition). Applied as
   a fixed, low-opacity overlay so every section reads as having that texture,
   without re-importing the same asset into each section's markup. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('/wp-content/uploads/2026/07/layerly-1785189395.webp');
    background-repeat: repeat;
    background-size: 1200px auto;
    opacity: .075;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 9999;
}


/* Layerly — Apply the Figma halftone-grain texture overlay (imageRef 8edba1...) across all sections that use it as a fill image, matching Figma's textured backgrounds — 2026-07-27 20:22:44 */
.nav,
.footer,
.layerly-copyright,
.hero-photo-strip,
.intro-framed-split,
.philosophy-band,
.benefit-grid,
.benefit-grid__card,
.locations-band,
.cta-form {
    background-image: var(--texture-grain);
    background-repeat: repeat;
    background-size: 640px auto;
    background-blend-mode: overlay;
}

/* benefit-grid: torn-paper seam strips (Figma "bg-transition" instances) top + bottom of the card */
.benefit-grid__card::before,
.benefit-grid__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 16px;
    background-image: var(--texture-grain);
    background-repeat: repeat;
    background-size: 640px auto;
    background-blend-mode: overlay;
    background-color: var(--color-surface);
    pointer-events: none;
}
.benefit-grid__card::before { top: 0; }
.benefit-grid__card::after { bottom: 0; }


/* Layerly — Fluid nav padding + hero/benefit decorative image slots matching Figma — 2026-07-27 20:36:30 */
/* nav: apply Figma exact horizontal padding (120px desktop) using fluid clamp so it scales down on mobile */
.nav__inner {
    padding-inline: clamp(var(--space-md), 8vw, 120px);
}

/* hero photo-strip: decorative TV/cassette images positioned like the Figma, exact fixed icon sizes */
.hero-photo-strip__title { position: relative; z-index: 1; max-width: 900px; }
.hero-photo-strip__decor { position: absolute; pointer-events: none; z-index: 2; }
.hero-photo-strip__decor img { display: block; }
.hero-photo-strip__decor--left {
    left: clamp(var(--space-md), 4vw, 80px);
    top: -8px;
    width: 143px;
}
.hero-photo-strip__decor--right {
    right: clamp(var(--space-md), 4vw, 60px);
    top: -12px;
    width: 168px;
}
@media (max-width: 900px) {
    .hero-photo-strip__decor { display: none; }
}

/* benefit-grid: small cassette decor image top-right of the card, matching Figma "img 3" */
.benefit-grid__card { position: relative; }
.benefit-grid__decor { position: absolute; top: -20px; right: 40px; width: 90px; z-index: 2; }
.benefit-grid__decor img { display: block; }
@media (max-width: 700px) {
    .benefit-grid__decor { display: none; }
}



/* Layerly — Style the second benefit-grid decorative image (bottom-left cassette photo) per Figma img 3 node — 2026-07-27 20:47:35 */
.benefit-grid__decor--bottom-left {
    position: absolute;
    bottom: -20px;
    left: 40px;
    top: auto;
    right: auto;
    width: 120px;
    z-index: 2;
}
.benefit-grid__decor--bottom-left img {
    border: 3px solid var(--color-text);
    border-radius: var(--radius-sm);
}
@media (max-width: 700px) {
    .benefit-grid__decor--bottom-left { display: none; }
}


/* Layerly — Fix mobile horizontal overflow: the fallback site-title logo text (full domain name) was too wide at 375px, pushing nav to 470px scrollWidth; constrain + truncate on small screens — 2026-07-27 20:50:55 */
@media (max-width: 480px) {
    .nav__logo-text {
        font-size: var(--text-sm);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55vw;
        display: inline-block;
    }
}


/* Layerly — Fix mobile horizontal overflow (scrollWidth 406/470 > 375 viewport): the off-canvas mobile drawer (position:fixed, translateX(100%) when closed) was extending the document's scrollable width with no overflow-x guard on html/body. Standard fix, doesn't touch locked drawer behavior. — 2026-07-27 20:52:57 */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }

/* ── Fix pass 2026-07-27 — post-build defects (Alexander review) ──────────────
   The hero decor images were stacked ABOVE the headline (.decor z-index:2 vs
   .title z-index:1), so the leading "M" of "MEDIA BUYING" rendered behind a
   cassette. The Figma intent is decor peeking AROUND the display type, not
   covering it — text must win. Raise the title above the decor; decor stays
   fully visible everywhere the letterforms do not cover it. */
.hero-photo-strip__heading, .hero-photo-strip__sub, .hero-photo-strip__cta { position: relative; z-index: 4; }

/* Anchor targets sit under a sticky/overlapping header — offset so a jump to
   #about / #services / #contact does not hide the heading behind the chrome. */
#about, #services, #contact { scroll-margin-top: 96px; }

/* ── Figma fill-stack fidelity — 2026-07-27 (Alexander: "same overlays that are in Figma")
   Hero node 8077:2598 carries FIVE fills; the build reproduced only one of them:
     [0] SOLID                       base colour            -> was already correct
     [1] IMAGE  DARKEN      op .20   visible:FALSE          -> correctly omitted
     [2] IMAGE  MULTIPLY    op .25   TILE  (8edba11…)       -> was applied, but as
                                                               blend:overlay at full strength
     [3] IMAGE  COLOR_DODGE op .30   TILE  (beca19a7…)      -> MISSING
     [4] IMAGE  HARD_LIGHT  op .25   TILE  (9a37a5f2…)      -> MISSING
   CSS has no per-background-layer opacity, so [2] is corrected with a base-colour scrim
   (base*.75 + multiplied*.25 == the texture at 25%), and [3]/[4] ride ::before/::after
   where real `opacity` + `mix-blend-mode` apply. Both pseudos were unused on these
   selectors. z-index:-1 + isolation keeps them above the section fill and below content. */

.hero-photo-strip,
.intro-framed-split,
.philosophy-band,
.locations-band,
.benefit-grid,
.cta-form {
    position: relative;
    isolation: isolate;
}

/* [2] MULTIPLY @ .25 — scrim in the same stack restores the missing per-layer opacity */
.hero-photo-strip,
.intro-framed-split,
.philosophy-band,
.locations-band {
    background-image: linear-gradient(rgba(48,56,65,.75), rgba(48,56,65,.75)), var(--texture-grain);
    background-repeat: repeat, repeat;
    background-size: auto, 640px auto;
    background-blend-mode: normal, multiply;
}
.benefit-grid {
    background-image: linear-gradient(rgba(34,34,34,.75), rgba(34,34,34,.75)), var(--texture-grain);
    background-repeat: repeat, repeat;
    background-size: auto, 640px auto;
    background-blend-mode: normal, multiply;
}
.cta-form {
    background-image: linear-gradient(rgba(255,94,26,.75), rgba(255,94,26,.75)), var(--texture-grain);
    background-repeat: repeat, repeat;
    background-size: auto, 640px auto;
    background-blend-mode: normal, multiply;
}

/* [3] COLOR_DODGE @ .30 and [4] HARD_LIGHT @ .25 */
.hero-photo-strip::before,
.intro-framed-split::before,
.philosophy-band::before,
.locations-band::before,
.benefit-grid::before,
.cta-form::before,
.hero-photo-strip::after,
.intro-framed-split::after,
.philosophy-band::after,
.locations-band::after,
.benefit-grid::after,
.cta-form::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    background-size: 640px auto;
    pointer-events: none;
    z-index: -1;
}
.hero-photo-strip::before,
.intro-framed-split::before,
.philosophy-band::before,
.locations-band::before,
.benefit-grid::before,
.cta-form::before {
    background-image: url("/wp-content/uploads/2026/07/layerly-1785188988.webp");
    opacity: .30;
    mix-blend-mode: color-dodge;
}
.hero-photo-strip::after,
.intro-framed-split::after,
.philosophy-band::after,
.locations-band::after,
.benefit-grid::after,
.cta-form::after {
    background-image: url("/wp-content/uploads/2026/07/layerly-1785188989.webp");
    opacity: .25;
    mix-blend-mode: hard-light;
}





/* ── Buttons: black border with a weighted black base that lifts on hover ──────
   (Alexander, 2026-07-27; revised — the first attempt animated border-bottom-width,
   which changes the element's box height and shifted the page on hover. A negative
   margin does not fully compensate on an inline-flex element, so the slab is now a
   box-shadow: it paints outside the box and NEVER participates in layout.)
   Geometry: at rest the face sits at y=0 with a 5px slab to y=+5. On hover the face
   rises 5px and the slab grows to 10px, so its bottom edge lands at exactly y=+5
   again — the base stays anchored while the face lifts. Zero reflow by construction. */
.btn {
    border: 4px solid #000;
    border-bottom-width: 4px;
    margin-bottom: 0;
    box-shadow: 0 5px 0 #000;
    transition: background-color .15s, color .15s, border-color .15s,
                box-shadow .12s ease-out, transform .12s ease-out;
}
.btn:hover {
    box-shadow: 0 10px 0 #000;
    transform: translateY(-5px);
    margin-bottom: 0;
    border-bottom-width: 4px;
}
.btn:active {
    box-shadow: 0 2px 0 #000;
    transform: translateY(3px);
    margin-bottom: 0;
}
/* ghost/link variants keep the black edge rather than the old border tokens */
.btn--ghost { border-color: #000; }
.btn--ghost:hover { border-color: #000; }
@media (prefers-reduced-motion: reduce) {
    .btn { transition: background-color .15s, color .15s, border-color .15s; }
    .btn:hover, .btn:active { transform: none; }
}

/* ── Section divider: torn seam (dividers/torn) — REVISED 2026-07-27 ────────────
   First attempt rebuilt the strip from the section textures + a solid fill, which
   read as "a gap between sections" — wrong, because the Figma divider's whole point
   is its ROUGH TORN EDGE. Rendering the node (8006:901 / 8077:2692) showed the real
   shape: 2912x72 with an ALPHA channel and irregular edges that extend BEYOND the
   node's nominal 1440x20 box.
   So the strip is now the rendered asset itself (FIX 50a doctrine: render the design
   node, never invent it), placed transparent and STRADDLING the boundary via equal
   negative margins — its torn edges bite into both neighbouring sections instead of
   sitting in a gutter. Net layout cost is zero. */
.divider-torn {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    height: var(--divider-h, 34px);
    margin-top: calc(var(--divider-h, 34px) / -2);
    margin-bottom: calc(var(--divider-h, 34px) / -2);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
}
.divider-torn[data-tone="dark"],
.divider-torn[data-tone="teal"],
.divider-torn[data-tone="accent"] {
    background-image: url("/wp-content/uploads/2026/07/layerly-1785190073.webp");
}
.divider-torn[data-tone="light"] {
    background-image: url("/wp-content/uploads/2026/07/layerly-1785190074.webp");
}

/* ── Content images: black frame with a weighted base (Alexander, 2026-07-27) ───
   4px black border, bottom doubled to 8px so images share the buttons' weighted-
   base language. Global `box-sizing: border-box` means the border draws INSIDE the
   element's box, so nothing reflows and no layout compensation is needed.
   Deliberately scoped to CONTENT images. The cutout decor (hero cassette/TV,
   benefit-grid cassette) is excluded — those are transparent PNG objects sitting
   over the design, and a rectangular frame around them would be wrong. */
.hero-photo-strip__frame img,
.intro-framed-split__media img,
.about-split__media img {
    border: 4px solid #000;
    border-bottom-width: 8px;
    display: block;
}

.service-card__media img {
    border: none;
    display: block;
}


/* Layerly — Contact form: visually hide field labels (a11y-preserved) and give inputs a 4px black border — 2026-07-27 22:24:35 */
/* Really Resourceful — contact form: hide visible labels (kept for a11y), add bold border to inputs */
.form--contact .field__label {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.form--contact .field__input {
    border: 4px solid var(--color-7);
}

/* ── Figma fidelity pass 2 (Alexander, 2026-07-27) ─────────────────────────────
   Five corrections, each traced to the Figma nodes: why=8037:107, story=8008:38. */

/* 1. benefit heading -> orange. Figma "section title" TEXT fill is rgb(255,94,26);
      the build rendered it black. Subheading is rgb(34,34,34). */
.benefit-grid .section-head__title,
.benefit-grid__card .section-head__title,
.benefit-grid h2 {
    color: var(--color-primary);
}
.benefit-grid .section-head__sub,
.benefit-grid__card .section-head__sub {
    color: #222222;
}

/* 2. card icons — inline SVG from the Figma VECTOR nodes (P21/FIX 55). 20px tall to
      match the design (18-26 x 20), inheriting colour via currentColor. */
.benefit-grid__icon {
    display: inline-flex;
    align-items: center;
    height: 20px;
    margin-bottom: var(--space-sm);
    color: var(--color-primary);
}
.benefit-grid__icon svg { height: 20px; width: auto; display: block; }

/* 3. the 4 benefit cards carry a DASHED orange stroke in Figma:
      stroke rgb(255,94,26), strokeWeight 2, strokeDashes [6,6]. */
.benefit-grid__item {
    border: 2px dashed var(--color-primary);
    padding: var(--space-md);
}

/* 4. torn seam on the TOP AND BOTTOM of the white panel. Figma: contents FRAME
      (fill rgb(234,236,240)) has a "borders" frame holding TWO bg-transition
      instances. Replaces the earlier flat texture strips with the real rendered
      asset (light tone), straddling the panel edge so the tear bites into it. */
.benefit-grid__card { position: relative; }
.benefit-grid__card::before,
.benefit-grid__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 26px;
    background-color: transparent;
    background-image: url("/wp-content/uploads/2026/07/layerly-1785190074.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-blend-mode: normal;
    pointer-events: none;
    z-index: 2;
}
.benefit-grid__card::before { top: -13px; }
.benefit-grid__card::after  { bottom: -13px; transform: scaleY(-1); }

/* 5. "Resourceful By Design" = a FULL-BLEED split. Figma story frame is 1440x781
      with an `img` FRAME occupying the full left half (720x781, its bitmap 721x1526
      overflowing = cropped fill) and `contents` the right half. The build put the
      image inside the centred .wrap, so it was inset instead of bleeding. */
.about-split__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    max-width: none;
    width: 100%;
    padding: 0;
}
.about-split__media {
    position: relative;
    min-height: 100%;
    margin: 0;
}
.about-split__media img {
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
    border-radius: 0;
    border: 0;
    display: block;
}
.about-split__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-xl) var(--space-lg);
    max-width: 660px;
}
@media (max-width: 860px) {
    .about-split__inner { grid-template-columns: 1fr; }
    .about-split__media img { min-height: 320px; }
    .about-split__content { padding: var(--space-lg) var(--space-md); max-width: none; }
}


/* Layerly — Make email field span full width of the contact form grid — 2026-07-27 22:26:44 */
.form--contact .field--email { grid-column: 1 / -1; }

/* ══ CHROME — header + footer, built to Figma 8077:2719 / 8077:2980 ═════════════
   Phase 4 of the staged build wrote ZERO files across two attempts because its
   prompt asks the agent to "use get_figma_section on the header/footer nodes" and
   never supplies those node ids — and chrome is filtered out of the scaffold's
   section list, so it could not find them. Built here from the real nodes. */

/* ── HEADER (1440x67, fill rgb(234,236,240) + texture) ─────────────────────── */
.rrg-header {
    position: sticky; top: 0; z-index: 100;
    background-color: var(--color-2);
    background-image: linear-gradient(rgba(234,236,240,.75), rgba(234,236,240,.75)), var(--texture-grain);
    background-repeat: repeat, repeat;
    background-size: auto, 640px auto;
    background-blend-mode: normal, multiply;
    border-bottom: none;
    padding-block: var(--space-sm);
}
.rrg-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-lg); min-height: 67px;
}
.rrg-header__logo {
    font-family: 'Zalando Sans Expanded', var(--font-display), sans-serif;
    font-weight: 900; font-size: 28px; line-height: 1;
    color: var(--color-primary); text-decoration: none; letter-spacing: .01em;
}
.rrg-header__nav { display: flex; align-items: center; gap: var(--space-lg); }
.rrg-header__menu { display: flex; align-items: center; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.rrg-header__menu a {
    font-family: var(--font-body); font-size: var(--text-md); font-weight: 400;
    color: #222222; text-decoration: none;
}
.rrg-header__menu a:hover { color: var(--color-primary); }
.rrg-header__cta { font-family: var(--font-body); font-size: 16px; font-weight: 700; }

/* ── FOOTER (1440x403, ground rgb(48,56,65) + vertical lines + texture) ─────── */
.rrg-footer {
    position: relative; isolation: isolate;
    background-color: var(--color-4);
    background-image: linear-gradient(rgba(48,56,65,.75), rgba(48,56,65,.75)), var(--texture-grain);
    background-repeat: repeat, repeat;
    background-size: auto, 640px auto;
    background-blend-mode: normal, multiply;
    padding-block: var(--space-xl);
}
/* the "bg lines" frame: 18 x 40px bars in rgb(34,34,34) */
.rrg-footer__lines {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: repeating-linear-gradient(90deg, #222222 0 40px, transparent 40px 80px);
    opacity: .28;
}
.rrg-footer .wrap { position: relative; z-index: 1; }
/* the teal panel: 1200x323, fill rgb(118,171,174), 4px black stroke */
.rrg-footer__panel {
    background: var(--color-3);
    border: 4px solid #000;
    padding: var(--space-lg);
    display: flex; flex-direction: column; gap: var(--space-lg);
}
.rrg-footer__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.rrg-footer__logo {
    font-family: 'Zalando Sans Expanded', var(--font-display), sans-serif;
    font-weight: 900; font-size: 28px; line-height: 1;
    color: #222222; text-decoration: none;
}
.rrg-footer__navwrap { display: flex; align-items: center; gap: var(--space-lg); }
.rrg-footer__menu { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.rrg-footer__menu a { color: #222222; text-decoration: none; font-family: var(--font-body); font-size: var(--text-md); }
.rrg-footer__menu a:hover { color: var(--color-surface); }
.rrg-footer__cta--primary { background: var(--color-primary); color: #fff; border: 4px solid #222222; border-radius: var(--radius-full); }
.rrg-footer__cta--ghost   { background: #fff; color: #222222; border: 2px solid #222222; border-radius: var(--radius-full); }
.rrg-footer__row--pitch { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.rrg-footer__tagline {
    font-family: 'Bungee Inline', var(--font-display), sans-serif;
    font-size: 20px; color: #222222; margin: 0;
}
.rrg-footer__talk { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: #222222; margin: 0; }
.rrg-footer__legal { display: flex; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.rrg-footer__legal a { font-family: var(--font-body); font-size: 12px; color: var(--color-4); text-decoration: none; }
.rrg-footer__legal a:hover { text-decoration: underline; }
/* the locked copyright strip that footer.php always appends — themed to the footer */
:root { --footer-copyright-bg: var(--color-4); --footer-copyright-fg: var(--color-2); }

@media (max-width: 860px) {
    .rrg-header__nav { gap: var(--space-md); }
    .rrg-footer__row { flex-direction: column; align-items: flex-start; }
    .rrg-footer__navwrap { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
}

/* ── Header CTA: inherit the site button, don't re-specify it ──────────────────
   (Alexander, 2026-07-27) The header CTA had been given its own border colour,
   radius and padding, so it drifted from every other button on the site. Now it
   only sets its COLOURS and lets .btn own the geometry — 4px black border, the
   5px black slab, and the hover lift all come for free and stay in sync. */
.rrg-header__cta {
    background: var(--color-primary);
    color: #fff;
    border-color: #000;
    border-radius: var(--radius-full);   /* every CTA on the site is a pill */
}
/* the header's own torn seam sits outside the sticky bar so it scrolls away */
.divider-torn--header { margin-top: -10px; z-index: 4; }

/* ══ ABOUT PAGE — built from Figma about 8043:511 ══════════════════════════════
   Sections reuse the site's texture/blend language; colours taken from the nodes. */

/* hero — heroes/page-lead (8043:513, bg #303841) */
.page-lead { position: relative; isolation: isolate; padding-block: var(--space-xxl);
  background-color: var(--color-4);
  background-image: linear-gradient(rgba(48,56,65,.75), rgba(48,56,65,.75)), var(--texture-grain);
  background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply; }
.page-lead__lines { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, var(--color-3) 0 2px, transparent 2px 80px); opacity: .15; }
.page-lead__inner { text-align: center; }
.page-lead__title { font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: var(--text-h1);
  line-height: 1; text-transform: uppercase; color: var(--color-primary); margin: 0 0 var(--space-md); }
.page-lead__sub { font-family: 'Abril Fatface', serif; font-size: 18px; color: var(--color-2); margin: 0 auto; max-width: 62ch; }

/* intro — intros/panel-note (8043:850): dark ground, light panel */
.panel-note { padding-block: var(--space-xxl); background-color: var(--color-4);
  background-image: linear-gradient(rgba(48,56,65,.75), rgba(48,56,65,.75)), var(--texture-grain);
  background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply; }
.panel-note__kicker { font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 32px;
  color: #fff; margin: 0 0 var(--space-lg); }
.panel-note__panel { background: var(--color-2); border: 4px solid #000; padding: var(--space-xl);
  display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--space-xl); align-items: center; }
.panel-note__lead { font-family: var(--font-body); font-size: 20px; font-weight: 700; color: #222222; margin: 0 0 var(--space-md); }
.panel-note__body { font-family: var(--font-body); font-size: 16px; color: #222222; margin: 0 0 var(--space-md); }
.panel-note__accent { font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 24px;
  color: var(--color-primary); margin: var(--space-md) 0; }
.panel-note__media img { width: 100%; height: auto; border: 4px solid #000; border-bottom-width: 8px; display: block; }

/* philosophy — philosophy-bands/three-block (8043:916, bg #eaecf0) */
.phil-blocks { padding-block: var(--space-xxl); background-color: var(--color-2);
  background-image: linear-gradient(rgba(234,236,240,.75), rgba(234,236,240,.75)), var(--texture-grain);
  background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply; }
.phil-blocks__title { font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 64px; line-height: 1;
  color: var(--color-primary); margin: 0 0 var(--space-sm); }
.phil-blocks__sub { font-family: 'Abril Fatface', serif; font-size: 18px; color: #222222; margin: 0 0 var(--space-xl); }
.phil-blocks__list { display: grid; gap: var(--space-lg); }
.phil-blocks__item { border: 4px solid #000; padding: var(--space-lg); }
.phil-blocks__item[data-tone="light"] { background: var(--color-3); }
.phil-blocks__item[data-tone="dark"]  { background: var(--color-4); }
.phil-blocks__item[data-tone="navy"]  { background: var(--color-2); }
.phil-blocks__item-title { font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 24px; margin: 0 0 var(--space-sm); }
.phil-blocks__item[data-tone="light"] .phil-blocks__item-title { color: #222222; }
.phil-blocks__item[data-tone="dark"]  .phil-blocks__item-title { color: #ffffff; }
.phil-blocks__item[data-tone="navy"]  .phil-blocks__item-title { color: var(--color-4); }
.phil-blocks__item-body { font-family: var(--font-body); font-size: 16px; margin: 0; }
.phil-blocks__item[data-tone="light"] .phil-blocks__item-body { color: #1c2b2c; }
.phil-blocks__item[data-tone="dark"]  .phil-blocks__item-body { color: var(--color-3); }
.phil-blocks__item[data-tone="navy"]  .phil-blocks__item-body { color: #303841; }

/* story — founders/profile (8054:1010, bg #76abae teal) */
.profile { padding-block: var(--space-xxl); background-color: var(--color-3);
  background-image: linear-gradient(rgba(118,171,174,.75), rgba(118,171,174,.75)), var(--texture-grain);
  background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply; }
.profile__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-xxl); align-items: center; }
.profile__media { position: relative; }
.profile__media img { width: 100%; height: auto; border: 4px solid #000; border-bottom-width: 8px; display: block; }
.profile__badge { position: absolute; right: -12px; bottom: -18px; display: inline-block;
  font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 28px; color: var(--color-2);
  background: var(--color-1); border: 3px solid var(--color-primary); border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-md); }
.profile__title { font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 64px; line-height: 1;
  color: var(--color-2); margin: 0 0 var(--space-sm); }
.profile__sub { font-family: 'Abril Fatface', serif; font-size: 18px; color: var(--color-4); margin: 0 0 var(--space-lg); }
.profile__lead { font-family: var(--font-body); font-size: 20px; font-weight: 700; color: #222222; margin: 0 0 var(--space-md); }
.profile__body { font-family: var(--font-body); font-size: 16px; color: #000; margin: 0 0 var(--space-md); }
.profile__cta-text { font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 24px; color: var(--color-2); margin: var(--space-lg) 0 var(--space-sm); }
.profile__cta { background: var(--color-4); color: #fff; border-radius: var(--radius-full); }

/* steps — process-steps/four-up (8054:1029, bg #303841) */
.steps { position: relative; isolation: isolate; padding-block: var(--space-xxl); background-color: var(--color-4);
  background-image: linear-gradient(rgba(48,56,65,.75), rgba(48,56,65,.75)), var(--texture-grain);
  background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply; }
.steps__lines { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, var(--color-3) 0 2px, transparent 2px 80px); opacity: .12; }
.steps__title { font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 64px; line-height: 1;
  color: var(--color-primary); margin: 0 0 var(--space-sm); }
.steps__sub { font-family: 'Abril Fatface', serif; font-size: 18px; color: var(--color-2); margin: 0 0 var(--space-xl); }
.steps__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps__item { background: var(--color-2); border: 4px solid #000; padding: var(--space-lg); position: relative; }
.steps__num { font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 20px; color: var(--color-primary); display: block; margin-bottom: var(--space-xs); }
.steps__item-title { font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 28px; color: #000; margin: 0 0 var(--space-sm); }
.steps__item-body { font-family: var(--font-body); font-size: 14px; color: var(--color-4); margin: 0; }

@media (max-width: 900px) {
  .panel-note__panel, .profile__inner { grid-template-columns: 1fr; }
  .steps__list { grid-template-columns: repeat(2, 1fr); }
  .phil-blocks__title, .profile__title, .steps__title { font-size: 40px; }
}
@media (max-width: 560px) { .steps__list { grid-template-columns: 1fr; } }

/* ── Footer revision (Alexander, 2026-07-27) ───────────────────────────────────
   1. teal panel + its border removed — content sits straight on the footer ground
   2. the ground now carries the SAME three-layer treatment as every section
      (grain multiply .25 + dodge .30 + hard-light .25), keeping the dark colour
   3. the locked copyright strip is styled to read as part of the footer rather
      than a separate band. It is NOT moved into the component: footer.php renders
      it there on purpose so a build can never drop, duplicate or restyle it. Same
      look, invariant intact. */
.rrg-footer {
    padding-bottom: var(--space-xl);
}
.rrg-footer__panel {
    background: transparent;
    border: 0;
    padding: 0;
}
/* match the section texture stack exactly */
.rrg-footer::before,
.rrg-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    background-size: 640px auto;
    pointer-events: none;
    z-index: -1;
}
.rrg-footer::before {
    background-image: url("/wp-content/uploads/2026/07/layerly-1785188988.webp");
    opacity: .30;
    mix-blend-mode: color-dodge;
}
.rrg-footer::after {
    background-image: url("/wp-content/uploads/2026/07/layerly-1785188989.webp");
    opacity: .25;
    mix-blend-mode: hard-light;
}
/* content now sits on the dark ground, so flip the type to light */
.rrg-footer__logo { color: var(--color-primary); }
.rrg-footer__menu a { color: var(--color-2); }
.rrg-footer__menu a:hover { color: var(--color-primary); }
.rrg-footer__tagline { color: var(--color-2); }
.rrg-footer__talk { color: var(--color-3); }
.rrg-footer__cta--ghost { background: transparent; color: var(--color-2); border-color: var(--color-2); }
.rrg-footer__legal a { color: var(--color-3); }

/* the locked copyright strip, made continuous with the footer above it */
.layerly-copyright {
    /* identical ground to .rrg-footer so the strip reads as one continuous block */
    background-color: var(--color-4);
    background-image: linear-gradient(rgba(48,56,65,.75), rgba(48,56,65,.75)), var(--texture-grain);
    background-repeat: repeat, repeat;
    background-size: auto, 640px auto;
    background-blend-mode: normal, multiply;
    margin: 0;
    padding: var(--space-lg) 0 var(--space-xl);
    border: 0;
    position: relative;
    z-index: 1;
}
.layerly-copyright__line { color: var(--color-2); font-family: var(--font-body); font-size: 12px; margin: 0; text-align: center; }
.layerly-copyright__line a { color: var(--color-2); }

/* ── Footer credit: locked TEXT, designed PLACEMENT (Alexander, 2026-07-27) ─────
   Corrects my earlier reading. The wording — "Copyright © {year} {owner} | Made by
   Layerly." — is locked and identical on every Layerly site. Its POSITION is not:
   it belongs wherever the design puts it. layerly_footer_credit() (functions.php,
   shipped in ed910e9) exists precisely for this and is now called from the footer
   component's legal row, so footer.php's fallback strip never fires.
   Also per Alexander: the Layerly link is NOT underlined. */
.rrg-footer__row--legal {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-md); flex-wrap: wrap;
    padding-top: var(--space-md);
}
.rrg-footer__row--legal .layerly-copyright__line {
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-2);
}
.rrg-footer__row--legal .layerly-copyright__line a,
.layerly-copyright__line a {
    color: inherit;
    text-decoration: none;          /* Alexander: no underline on "Made by Layerly" */
}
.rrg-footer__row--legal .layerly-copyright__line a:hover,
.layerly-copyright__line a:hover { text-decoration: none; color: var(--color-primary); }
.layerly-copyright__sep { opacity: .6; }
/* the standalone fallback strip should now never render; neutralise its old styling */
.rrg-footer + .layerly-copyright { display: none; }

/* ══ ABOUT — layout corrections against Figma (Alexander review, 2026-07-27) ════
   Earlier pass built structure + copy but shipped NO images and got two layouts
   backwards. Corrected from the node geometry, not from eyeballing. */

/* hero: decorative frames the design lays over the type (img 3 / img 4) */
.page-lead__inner { position: relative; }
.page-lead__decor { position: absolute; pointer-events: none; z-index: 2; }
.page-lead__decor img { display: block; width: 100%; height: auto; border: 0; }
.page-lead__decor--a { left: 4%;  top: 34%;  width: 160px; }
.page-lead__decor--b { left: 12%; top: 62%;  width: 200px; }
.page-lead__title, .page-lead__sub { position: relative; z-index: 3; }
@media (max-width: 900px) { .page-lead__decor { display: none; } }

/* intro: contents is HORIZONTAL — img 588 LEFT, details 588 RIGHT (was a 1.3/.7 panel) */
.panel-note { position: relative; isolation: isolate; }
.panel-note__lines { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, var(--color-3) 0 2px, transparent 2px 80px); opacity: .12; }
.panel-note__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: stretch; }
.panel-note__media { position: relative; }
.panel-note__media img { width: 100%; height: 100%; object-fit: cover; border: 4px solid #000; border-bottom-width: 8px; display: block; }
.panel-note__media-2 { position: absolute; right: -18px; bottom: -22px; width: 42%; }
.panel-note__media-2 img { border-width: 4px 4px 8px; }
.panel-note__details { background: var(--color-2); border: 4px solid #000; padding: var(--space-xl);
  display: flex; flex-direction: column; justify-content: center; }
.panel-note__kicker { color: #222222; font-size: 32px; margin: 0 0 var(--space-md); }

/* story: contents LEFT, image RIGHT and FULL-BLEED (was media-left, no image) */
.profile__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch;
  max-width: none; width: 100%; padding: 0; }
.profile__content { padding: var(--space-xxl) var(--space-xl); max-width: 660px; margin-left: auto;
  display: flex; flex-direction: column; justify-content: center; }
.profile__media { position: relative; min-height: 100%; }
.profile__media img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; border: 0; border-radius: 0; display: block; }
.profile__badge { position: absolute; left: -46px; top: 16%; z-index: 3; }

/* philosophy: 3 FULL-WIDTH bands (1200x114 each), not tall stacked cards */
.phil-blocks__list { grid-template-columns: 1fr; }
.phil-blocks__item { display: grid; grid-template-columns: minmax(220px, 34%) 1fr;
  gap: var(--space-lg); align-items: center; padding: var(--space-md) var(--space-lg); }
.phil-blocks__item-title { margin: 0; }
.phil-blocks__item-body { margin: 0; }

@media (max-width: 900px) {
  .panel-note__inner, .profile__inner { grid-template-columns: 1fr; }
  .profile__content { max-width: none; margin: 0; padding: var(--space-xl) var(--space-md); }
  .profile__media img { min-height: 320px; }
  .profile__badge { left: auto; right: 16px; top: auto; bottom: -18px; }
  .phil-blocks__item { grid-template-columns: 1fr; }
  .panel-note__media-2 { display: none; }
}

/* ══ ABOUT — full pass against the Figma RENDERS (Alexander review 2, 2026-07-27) ══
   Rendered every About section from Figma and compared side by side. The page was
   missing a design language that runs through ALL of it, not just isolated bugs:
     · rounded corners on every panel/card
     · a hard offset shadow (6px 6px 0 #000), not a soft blur
     · a dark text-shadow on the Bungee display headings
     · centre-aligned copy in the hero / intro / philosophy / story / steps heads
   Those are applied here as shared rules, then the per-section corrections follow. */

.page-lead__title, .phil-blocks__title, .steps__title, .profile__title,
.panel-note__kicker, .profile__cta-text {
    text-shadow: 4px 4px 0 rgba(0,0,0,.55);
}
.panel-note__details, .phil-blocks__item, .steps__item, .panel-note__media img {
    border-radius: 14px;
    box-shadow: 6px 6px 0 #000;
}

/* ── intro: teal panel, TWO borders, white headline, dark orange-text box ───────
   Was a light #eaecf0 panel with a dark heading — wrong on every count. */
.panel-note__inner { align-items: stretch; }
.panel-note__media img { border: 4px solid #000; border-bottom-width: 4px; height: 100%; object-fit: cover; }
.panel-note__details {
    background: var(--color-3);              /* #76abae teal */
    border: 3px solid #000;                  /* border 1 */
    padding: var(--space-md);
    display: flex;
}
.panel-note__frame {
    border: 2px solid var(--color-4);        /* border 2 — #303841 */
    border-radius: 10px;
    padding: var(--space-lg);
    width: 100%;
    display: flex; flex-direction: column; justify-content: center; gap: var(--space-md);
    text-align: center;
}
.panel-note__kicker { font-family: 'Bungee Inline', var(--font-display), sans-serif;
    font-size: 32px; color: #fff; margin: 0; }
.panel-note__lead { font-family: var(--font-body); font-size: 20px; font-weight: 700; color: #222222; margin: 0; }
.panel-note__body { font-family: var(--font-body); font-size: 16px; color: #222222; margin: 0; }
.panel-note__accentbox {
    background: #222222;
    border: 2px solid var(--color-4);
    border-radius: 8px;
    padding: var(--space-md) var(--space-lg);
}
.panel-note__accent { font-family: 'Bungee Inline', var(--font-display), sans-serif;
    font-size: 24px; color: var(--color-primary); margin: 0; text-shadow: none; }

/* ── philosophy: rounded bands with a hard shadow; centred head ─────────────── */
.phil-blocks__head { text-align: center; margin-bottom: var(--space-xl); }
.phil-blocks__item { border-width: 4px; }
.phil-blocks__item[data-tone="light"], .phil-blocks__item[data-tone="navy"] { background: #f4f6f8; }
.phil-blocks__item[data-tone="dark"] { background: var(--color-4); }
.phil-blocks__item[data-tone="light"] .phil-blocks__item-title,
.phil-blocks__item[data-tone="navy"]  .phil-blocks__item-title { color: #222222; }
.phil-blocks__item[data-tone="dark"]  .phil-blocks__item-title { color: #ffffff; }
.phil-blocks__item-title { font-size: 24px; text-shadow: none; }
.phil-blocks__item-body  { color: var(--color-3); }
.phil-blocks__item[data-tone="light"] .phil-blocks__item-body,
.phil-blocks__item[data-tone="navy"]  .phil-blocks__item-body { color: #5f8f92; }

/* ── story: centre the left column (Figma centres all of it) ────────────────── */
.profile__content { text-align: center; align-items: center; }
.profile__cta { box-shadow: 6px 6px 0 #000; }
.profile__badge {
    background: #222222; color: #fff; border: 3px solid var(--color-primary);
    border-radius: 999px; padding: 6px 22px; font-size: 20px; text-shadow: none;
    box-shadow: 4px 4px 0 rgba(0,0,0,.5);
}

/* ── steps: rounded light cards, flip-clock number, rule, body at the foot ──── */
.steps__head { text-align: center; }
.steps__item {
    background: #f4f6f8; border: 4px solid #000; border-radius: 14px;
    display: flex; flex-direction: column; gap: var(--space-sm);
    padding: var(--space-lg); min-height: 380px;
}
.steps__num { display: inline-flex; gap: 6px; }
.steps__digit {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 46px; border-radius: 8px;
    background: #222222; color: #fff;
    font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 26px;
}
.steps__item-title {
    font-size: 28px; color: #000; margin: 0; text-shadow: none;
    padding-top: var(--space-sm); border-top: 1px solid rgba(0,0,0,.25);
}
.steps__item-body { margin-top: auto; color: #303841; font-size: 14px; }

@media (max-width: 900px) {
    .panel-note__frame { padding: var(--space-md); }
    .steps__item { min-height: 0; }
}

/* ── Alexander review 3 (2026-07-27) ───────────────────────────────────────────
   1. starburst badge sits INSIDE the band (his call — the Figma overlaps the
      corner, inside is simpler and reads the same)
   2. "NO BS" circle removed from the founder section
   3. founder image capped so the section is not so tall
   4. the LinkedIn CTA had a WEIRD HOVER: my .profile__cta rule set
      `box-shadow: 6px 6px 0` while .btn animates its shadow 0 5px 0 -> 0 10px 0,
      so hovering jumped the slab diagonally. Override removed — the button now
      behaves exactly like every other button on the site. */
.phil-blocks__item {
    grid-template-columns: 92px minmax(200px, 30%) 1fr;
    gap: var(--space-md);
}
.phil-blocks__badge { display: inline-flex; align-items: center; justify-content: center; width: 78px; }
.phil-blocks__badge img { width: 78px; height: auto; display: block; border: 0; box-shadow: none; }

.profile__badge { display: none; }               /* NO BS circle removed */

.profile__media img { min-height: 0; max-height: 620px; height: 100%; object-fit: cover; }
.profile__inner { align-items: center; }
.profile__content { padding-block: var(--space-xl); }

.profile__cta { box-shadow: 0 5px 0 #000; }      /* back to the standard button slab */

@media (max-width: 900px) {
    .phil-blocks__item { grid-template-columns: 78px 1fr; }
    .phil-blocks__badge { width: 62px; }
    .phil-blocks__badge img { width: 62px; }
    .profile__media img { max-height: 380px; }
}


/* Layerly — Tint the divider immediately above the contact-form section orange (matches section bg) per request "divider at top of section should be orange" — 2026-07-27 23:16:55 */
.divider-torn:has(+ .cta-form) { background-color: var(--color-6); background-image: none; }


/* Layerly — Add gap between the steps section subtitle/header and the card list below it (child margin on .steps__sub was collapsing to 0) — 2026-07-27 23:19:35 */
.section--steps .steps__head { margin-bottom: var(--space-xl); }

/* ── CTA seams: identical on every page, by construction (Alexander, 2026-07-27) ─
   The contact-form section previously relied on a `dividers/torn` entry placed
   BEFORE it in each page's section list, and nothing after — so the homepage and
   About differed, and the tone came from a position-numbered prop that shifts as
   soon as a section is reordered. The seams now live INSIDE the component, so every
   instance of ctas/contact-form gets the same top and bottom edge automatically and
   reordering cannot break them. Same rendered torn asset as dividers/torn. */
.cta-form { position: relative; isolation: isolate; }
.cta-form__seam {
    position: absolute;
    left: 0; right: 0;
    height: 34px;
    z-index: 4;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-image: url("/wp-content/uploads/2026/07/layerly-1785190073.webp");
}
.cta-form__seam--top    { top: -17px; }
.cta-form__seam--bottom { bottom: -17px; transform: scaleY(-1); }

/* ── Mobile drawer: orange ground, white type, white close (Alexander, 2026-07-27) ─
   Two separate bugs were making it unusable:
   1. --mobile-menu-bg / --mobile-menu-fg were never set, so the drawer fell back to
      --color-1 (#222222) — the "gray" Alexander saw.
   2. WORSE, and mine: `.rrg-header__menu a { color: #222222 }` is a plain class rule
      that also applies inside the drawer, so the links painted DARK ON DARK and the
      menu looked empty. The header bar and the drawer need different link colours;
      the earlier rule assumed only the bar.
   The toggle's bars are `background: currentColor`, so colouring the button white is
   what turns the close "X" white too. */
:root {
    --mobile-menu-bg: var(--color-primary);
    --mobile-menu-fg: #ffffff;
}
@media (max-width: 860px) {
    [data-mobile-menu] {
        background: var(--color-primary);
        color: #ffffff;
        gap: var(--space-lg);
    }
    /* beat the bar-scoped link colour inside the drawer */
    [data-mobile-menu] .rrg-header__menu a,
    [data-mobile-menu] a {
        color: #ffffff;
        font-size: var(--text-lg);
        font-weight: 700;
    }
    [data-mobile-menu] .rrg-header__menu a:hover,
    [data-mobile-menu] a:hover { color: #ffffff; text-decoration: underline; }
    /* the CTA inside the drawer: white pill so it stays legible on orange */
    [data-mobile-menu] .rrg-header__cta {
        background: #ffffff;
        color: var(--color-primary);
        border-color: #000;
    }
    /* hamburger + close X — currentColor drives the three bars */
    [data-mobile-menu-toggle] { color: #222222; }
    [data-mobile-menu-toggle][aria-expanded="true"] { color: #ffffff; }
}

/* ── Mobile drawer open-state, stated unambiguously ────────────────────────────
   The theme opens the drawer with `[data-mobile-menu].is-open { transform:
   translateX(0) }`. On this site the drawer was staying at translateX(100%) with
   the class applied and the media query active — a state the cascade alone should
   not produce, and one I could not read reliably through the preview pane.
   Rather than leave it ambiguous, the open state is restated here at higher
   specificity (id-free, no !important) so it cannot lose to the base rule, and the
   closed state is pinned to the same axis. */
@media (max-width: 860px) {
    .rrg-header .rrg-header__nav[data-mobile-menu] {
        transform: translateX(100%);
        transition: transform .3s ease;
    }
    .rrg-header .rrg-header__nav[data-mobile-menu].is-open {
        transform: translateX(0);
    }
}

/* ══ SERVICES PAGE — built from the Figma renders (8056:1641) ══════════════════
   Uses the site's established language: rounded panels, hard 6px offset shadow,
   dark text-shadow on Bungee display type, centred section heads. */

/* intro statement (8056:1692, dark ground) */
.statement { position: relative; isolation: isolate; padding-block: var(--space-xl);
  background-color: var(--color-4);
  background-image: linear-gradient(rgba(48,56,65,.75), rgba(48,56,65,.75)), var(--texture-grain);
  background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply; }
.statement__lines { position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(90deg, var(--color-3) 0 2px, transparent 2px 80px); opacity: .12; }
.statement__inner { text-align: center; max-width: 860px; margin-inline: auto; }
.statement__lead { font-family: var(--font-body); font-size: 18px; color: var(--color-2); margin: 0 0 var(--space-md); }
.statement__body { font-family: var(--font-body); font-size: 16px; color: var(--color-3); margin: 0; }

/* services grid (8066:2248, teal ground) */
.explore { position: relative; isolation: isolate; padding-block: var(--space-xxl);
  background-color: var(--color-3);
  background-image: linear-gradient(rgba(118,171,174,.75), rgba(118,171,174,.75)), var(--texture-grain);
  background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply; }
.explore__lines { position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(90deg, #ffffff 0 18px, transparent 18px 80px); opacity: .10; }
.explore__head { text-align: center; margin-bottom: var(--space-xl); }
.explore__title { font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 56px; line-height: 1;
  color: #fff; margin: 0 0 var(--space-sm); text-shadow: 4px 4px 0 rgba(0,0,0,.55); }
.explore__sub { font-family: 'Abril Fatface', serif; font-size: 18px; color: #222222; margin: 0 0 var(--space-lg); }
.explore__intro { font-family: var(--font-body); font-size: 16px; color: #222222; margin: 0 auto; max-width: 70ch; }
.explore__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.explore__card { border: 4px solid #000; border-radius: 14px; box-shadow: 6px 6px 0 #000; padding: var(--space-sm); }
.explore__card[data-tone="light"] { background: #eaecf0; }
.explore__card[data-tone="teal"]  { background: var(--color-3); }
.explore__card-inner { border: 2px solid rgba(0,0,0,.35); border-radius: 10px; padding: var(--space-lg);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-md); height: 100%; text-align: center; }
.explore__media img { width: 190px; height: auto; border: 0; box-shadow: none; display: block; }
.explore__card-title { font-family: var(--font-body); font-weight: 700; font-size: 30px; color: #222222; margin: 0; }
.explore__card-body { font-family: var(--font-body); font-size: 15px; color: #222222; margin: 0; }
.explore__cta { margin-top: auto; background: #fff; color: #222222; border-radius: var(--radius-full); }
.explore__footnote { text-align: center; margin: var(--space-lg) 0 0; font-family: var(--font-body); font-size: 15px; color: #222222; }

/* service detail splits (planning / buying / attribution) — image side ALTERNATES */
.svc-split { position: relative; }
.svc-split__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.svc-split[data-img="right"] .svc-split__media  { order: 2; }
.svc-split[data-img="right"] .svc-split__content{ order: 1; }
.svc-split__media img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; border: 0; display: block; }
.svc-split__content { padding: var(--space-xxl) var(--space-xl); text-align: center;
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-md); }
.svc-split[data-tone="light"] .svc-split__content { background-color: var(--color-2);
  background-image: linear-gradient(rgba(234,236,240,.75), rgba(234,236,240,.75)), var(--texture-grain);
  background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply; }
.svc-split[data-tone="teal"] .svc-split__content { background-color: var(--color-3);
  background-image: linear-gradient(rgba(118,171,174,.75), rgba(118,171,174,.75)), var(--texture-grain);
  background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply; }
.svc-split__title { font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 52px; line-height: 1;
  color: var(--color-primary); margin: 0; text-shadow: 4px 4px 0 rgba(0,0,0,.5); }
.svc-split__sub { font-family: 'Abril Fatface', serif; font-size: 18px; color: #222222; margin: 0; }
.svc-split__lead { font-family: var(--font-body); font-size: 18px; color: var(--color-primary); margin: 0; }
.svc-split__body { font-family: var(--font-body); font-size: 16px; color: #222222; margin: 0; }
.svc-split__band { background: var(--color-3); border-top: 3px solid #000; border-bottom: 3px solid #000;
  margin-inline: calc(var(--space-xl) * -1); padding: var(--space-md) var(--space-lg); }
.svc-split[data-tone="teal"] .svc-split__band { background: var(--color-2); }
.svc-split__band p { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: #222222; margin: 0; text-transform: uppercase; }
.svc-split__note { background: #fff; border: 4px solid #000; border-radius: 14px; box-shadow: 6px 6px 0 #000; padding: var(--space-lg); }
.svc-split__note p { font-family: var(--font-body); font-size: 15px; color: #222222; margin: 0; }

/* FAQ accordion (8072:2400, near-black ground) */
.faq { position: relative; isolation: isolate; padding-block: var(--space-xxl);
  background-color: var(--color-1);
  background-image: linear-gradient(rgba(34,34,34,.75), rgba(34,34,34,.75)), var(--texture-grain);
  background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply; }
.faq__lines { position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(90deg, var(--color-3) 0 2px, transparent 2px 80px); opacity: .12; }
.faq__head { text-align: center; margin-bottom: var(--space-xl); }
.faq__title { font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 56px; line-height: 1;
  color: var(--color-primary); margin: 0 0 var(--space-sm); text-shadow: 4px 4px 0 rgba(0,0,0,.6); }
.faq__sub { font-family: 'Abril Fatface', serif; font-size: 18px; color: var(--color-2); margin: 0; }
.faq__list { display: flex; flex-direction: column; gap: var(--space-md); max-width: 900px; margin-inline: auto; }
.faq__item { background: #eaecf0; border: 4px solid #000; border-radius: 14px; box-shadow: 6px 6px 0 #000; overflow: hidden; }
.faq__q { cursor: pointer; list-style: none; padding: var(--space-md) var(--space-lg);
  font-family: var(--font-body); font-weight: 700; font-size: 18px; color: #222222;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; font-family: 'Bungee Inline', var(--font-display), sans-serif;
  font-size: 26px; color: var(--color-primary); line-height: 1; }
.faq__item[open] .faq__q::after { content: "–"; }
.faq__a { padding: 0 var(--space-lg) var(--space-lg); }
.faq__a p { font-family: var(--font-body); font-size: 15px; color: #303841; margin: 0; }

@media (max-width: 900px) {
  .explore__grid { grid-template-columns: 1fr; }
  .svc-split__inner { grid-template-columns: 1fr; }
  .svc-split[data-img="right"] .svc-split__media,
  .svc-split[data-img="right"] .svc-split__content { order: initial; }
  .svc-split__media img { min-height: 320px; }
  .svc-split__content { padding: var(--space-xl) var(--space-md); }
  .svc-split__band { margin-inline: calc(var(--space-md) * -1); }
  .explore__title, .faq__title { font-size: 38px; }
}


/* Layerly — Make the 'Three Ways We Move Your Media' services section heading white instead of orange, scoped to #services so other section-head__heading instances stay unaffected — 2026-07-27 23:44:02 */
#services .section-head__heading {
    color: var(--color-5);
}

/* ══ SERVICE SINGLE — /services/<slug>/ ═══════════════════════════════════════
   No Figma for this one. Built from the site's existing vocabulary, with the six
   body sections cycling through SIX different treatments so the page has rhythm
   instead of six identical stacked blocks (the CPT-single rule). Grounds alternate
   dark → teal → light so the torn seams have something to punctuate. */

.svc-single__lead { position: relative; isolation: isolate; padding-block: var(--space-xxl);
  background-color: var(--color-4);
  background-image: linear-gradient(rgba(48,56,65,.75), rgba(48,56,65,.75)), var(--texture-grain);
  background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply; }
.svc-single__lines { position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(90deg, var(--color-3) 0 2px, transparent 2px 80px); opacity: .14; }
.svc-single__lead-inner { text-align: center; }
.svc-single__eyebrow { font-family: var(--font-body); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--color-3); margin: 0 0 var(--space-sm); }
.svc-single__title { font-family: 'Bungee Inline', var(--font-display), sans-serif;
  font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1; color: var(--color-primary);
  margin: 0 0 var(--space-md); text-shadow: 4px 4px 0 rgba(0,0,0,.55); }
.svc-single__excerpt { font-family: 'Abril Fatface', serif; font-size: 20px; color: var(--color-2);
  margin: 0 auto; max-width: 62ch; }
.svc-single__hero-img { margin-top: var(--space-xl); }
.svc-single__hero-img img { width: 100%; max-height: 420px; object-fit: cover;
  border: 4px solid #000; border-bottom-width: 8px; border-radius: 14px; box-shadow: 6px 6px 0 #000; display: block; }

/* shared section chrome */
.svc-sec { padding-block: var(--space-xxl); }
.svc-sec__label { font-family: 'Bungee Inline', var(--font-display), sans-serif; line-height: 1.05; margin: 0; }
.svc-sec__body { font-family: var(--font-body); font-size: 16px; margin: 0; }

/* 0 — statement: centred lead on the dark ground */
.svc-sec--statement { background-color: var(--color-4);
  background-image: linear-gradient(rgba(48,56,65,.78), rgba(48,56,65,.78)), var(--texture-grain);
  background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply; }
.svc-sec--statement .svc-sec__inner { text-align: center; max-width: 820px; margin-inline: auto; }
.svc-sec--statement .svc-sec__label { font-size: 40px; color: var(--color-primary); margin-bottom: var(--space-md);
  text-shadow: 3px 3px 0 rgba(0,0,0,.5); }
.svc-sec--statement .svc-sec__body { color: var(--color-2); font-size: 18px; }

/* 1 — split: label left, copy right, on teal */
.svc-sec--split { background-color: var(--color-3);
  background-image: linear-gradient(rgba(118,171,174,.75), rgba(118,171,174,.75)), var(--texture-grain);
  background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply; }
.svc-sec--split .svc-sec__inner { display: grid; grid-template-columns: minmax(240px, 38%) 1fr;
  gap: var(--space-xl); align-items: start; }
.svc-sec--split .svc-sec__label { font-size: 34px; color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.45); }
.svc-sec--split .svc-sec__body { color: #222222; }

/* 2 — band: light ground, label and copy side by side, rule between */
.svc-sec--band { background-color: var(--color-2);
  background-image: linear-gradient(rgba(234,236,240,.75), rgba(234,236,240,.75)), var(--texture-grain);
  background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply; }
.svc-sec--band .svc-sec__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl);
  align-items: center; border-top: 4px solid #000; border-bottom: 4px solid #000; padding-block: var(--space-xl); }
.svc-sec--band .svc-sec__label { font-size: 32px; color: #222222; }
.svc-sec--band .svc-sec__body { color: #303841; }

/* 3 — accent: dark box on the light ground, orange label */
.svc-sec--accent { background: var(--color-2); }
.svc-sec--accent .svc-sec__box { background: #222222; border: 4px solid #000; border-radius: 14px;
  box-shadow: 6px 6px 0 rgba(0,0,0,.55); padding: var(--space-xl); text-align: center;
  max-width: 900px; margin-inline: auto; }
.svc-sec--accent .svc-sec__label { font-size: 30px; color: var(--color-primary); margin-bottom: var(--space-md); }
.svc-sec--accent .svc-sec__body { color: var(--color-2); }

/* 4 — panel: teal panel with the double border, centred */
.svc-sec--panel { background-color: var(--color-4);
  background-image: linear-gradient(rgba(48,56,65,.78), rgba(48,56,65,.78)), var(--texture-grain);
  background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply; }
.svc-sec--panel .svc-sec__box { background: var(--color-3); border: 3px solid #000; border-radius: 14px;
  box-shadow: 6px 6px 0 #000; padding: var(--space-md); max-width: 940px; margin-inline: auto; }
.svc-sec--panel .svc-sec__box > * { }
.svc-sec--panel .svc-sec__box { position: relative; }
.svc-sec--panel .svc-sec__label { font-size: 30px; color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.4);
  border: 2px solid var(--color-4); border-bottom: 0; border-radius: 10px 10px 0 0;
  padding: var(--space-lg) var(--space-lg) var(--space-sm); margin: 0; text-align: center; }
.svc-sec--panel .svc-sec__body { color: #222222; border: 2px solid var(--color-4); border-top: 0;
  border-radius: 0 0 10px 10px; padding: 0 var(--space-lg) var(--space-lg); text-align: center; }

/* 5 — closing: light, centred, sits straight above the CTA */
.svc-sec--closing { background: var(--color-2); padding-bottom: var(--space-xxl); }
.svc-sec--closing .svc-sec__inner { text-align: center; max-width: 820px; margin-inline: auto; }
.svc-sec--closing .svc-sec__label { font-size: 36px; color: var(--color-primary); margin-bottom: var(--space-md); }
.svc-sec--closing .svc-sec__body { color: #222222; font-size: 17px; }

/* sibling services */
.svc-single__more { background: var(--color-1); padding-block: var(--space-xxl); }
.svc-single__more-title { font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 32px;
  color: #fff; text-align: center; margin: 0 0 var(--space-xl); text-shadow: 3px 3px 0 rgba(0,0,0,.5); }
.svc-single__more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.svc-single__more-card { display: block; text-decoration: none; border: 4px solid #000; border-radius: 14px;
  box-shadow: 6px 6px 0 #000; padding: var(--space-lg); transition: transform .12s ease-out, box-shadow .12s ease-out; }
.svc-single__more-card[data-tone="light"] { background: #eaecf0; }
.svc-single__more-card[data-tone="teal"]  { background: var(--color-3); }
.svc-single__more-card:hover { transform: translateY(-5px); box-shadow: 6px 11px 0 #000; }
.svc-single__more-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 24px; color: #222222; margin: 0 0 var(--space-sm); }
.svc-single__more-card p { font-family: var(--font-body); font-size: 15px; color: #303841; margin: 0 0 var(--space-md); }
.svc-single__more-go { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--color-primary);
  text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 900px) {
  .svc-sec--split .svc-sec__inner, .svc-sec--band .svc-sec__inner,
  .svc-single__more-grid { grid-template-columns: 1fr; }
  .svc-single__title { font-size: 2.5rem; }
}

/* ── Service splits: one ground, capped image, real padding (Alexander) ─────────
   Three faults, one root cause. The generic `.section` class applies ~93px of
   VERTICAL padding, but the tone background sat on `.svc-split__content` — so the
   section's padding bands rendered a DIFFERENT (transparent) ground above and below
   the panel. That is the "two backgrounds". It also inflated the grid row, and the
   image, stretching to fill it, hit 960px tall.
   Fix: the SECTION owns the single background, the split runs edge-to-edge with no
   section padding, the media is capped, and the text gets generous padding of its own. */
.svc-split {
    padding: 0;                       /* kill the inherited .section vertical padding */
    background-color: transparent;
}
.svc-split[data-tone="light"] {
    background-color: var(--color-2);
    background-image: linear-gradient(rgba(234,236,240,.75), rgba(234,236,240,.75)), var(--texture-grain);
    background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply;
}
.svc-split[data-tone="teal"] {
    background-color: var(--color-3);
    background-image: linear-gradient(rgba(118,171,174,.75), rgba(118,171,174,.75)), var(--texture-grain);
    background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply;
}
/* the content no longer paints its own ground — that was the second background */
.svc-split[data-tone="light"] .svc-split__content,
.svc-split[data-tone="teal"]  .svc-split__content { background: none; }

.svc-split__inner { align-items: stretch; }
.svc-split__media { overflow: hidden; max-height: 620px; }
.svc-split__media img { width: 100%; height: 100%; min-height: 0; max-height: 620px; object-fit: cover; display: block; }

.svc-split__content {
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 3.5rem);
    max-width: 620px;
    margin-inline: auto;
    gap: var(--space-md);
}
/* the callout band spans the content's padding, so keep it tied to that padding scale */
.svc-split__band { margin-inline: calc(clamp(1.75rem, 4vw, 3.5rem) * -1); }

@media (max-width: 900px) {
    .svc-split__media, .svc-split__media img { max-height: 340px; }
    .svc-split__content { max-width: none; padding: var(--space-xl) var(--space-md); }
    .svc-split__band { margin-inline: calc(var(--space-md) * -1); }
}

/* ── Split media fills the section height (Alexander) ──────────────────────────
   The earlier `max-height: 620px` cap was solving a DIFFERENT problem: the generic
   `.section` padding was inflating the grid row and stretching the image to 960px.
   With that padding removed (P33) the row height is simply the content height —
   651–956px here — so the cap only clipped the image and left a gap of up to 336px.
   Cap dropped; the media now stretches the full row and crops with object-fit. */
.svc-split__media { max-height: none; height: 100%; align-self: stretch; }
.svc-split__media img { max-height: none; height: 100%; width: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
    .svc-split__media { height: auto; max-height: 340px; }
    .svc-split__media img { max-height: 340px; }
}

/* ── Service single: two-up pairs + an image-paired split ──────────────────────
   (Alexander: "these layouts are lame… lets mix this up.") The six body sections
   are grouped instead of stacked — two card pairs and an image split — reusing
   layouts that already exist elsewhere on the site. */

/* two cards side by side */
.svc-duo { padding-block: var(--space-xxl); }
.svc-duo[data-tone="light"] {
    background-color: var(--color-2);
    background-image: linear-gradient(rgba(234,236,240,.75), rgba(234,236,240,.75)), var(--texture-grain);
    background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply;
}
.svc-duo[data-tone="dark"] {
    background-color: var(--color-4);
    background-image: linear-gradient(rgba(48,56,65,.78), rgba(48,56,65,.78)), var(--texture-grain);
    background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply;
}
.svc-duo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: stretch; }
.svc-duo__card { border: 4px solid #000; border-radius: 14px; box-shadow: 6px 6px 0 #000;
    padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); }
.svc-duo[data-tone="light"] .svc-duo__card { background: #f4f6f8; }
.svc-duo[data-tone="dark"]  .svc-duo__card { background: var(--color-3); }
.svc-duo[data-tone="dark"] .svc-duo__card:nth-child(2) { background: #f4f6f8; }
.svc-duo__label { font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 26px;
    line-height: 1.1; color: #222222; margin: 0; }
.svc-duo[data-tone="dark"] .svc-duo__card:first-child .svc-duo__label { color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.4); }
.svc-duo__body { font-family: var(--font-body); font-size: 15px; color: #303841; margin: 0; }
.svc-duo[data-tone="dark"] .svc-duo__card:first-child .svc-duo__body { color: #16302f; }

/* image paired with text — full-bleed, side alternates per service */
.svc-imgsplit { padding: 0;
    background-color: var(--color-3);
    background-image: linear-gradient(rgba(118,171,174,.75), rgba(118,171,174,.75)), var(--texture-grain);
    background-repeat: repeat, repeat; background-size: auto, 640px auto; background-blend-mode: normal, multiply;
}
.svc-imgsplit__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.svc-imgsplit[data-img="right"] .svc-imgsplit__media   { order: 2; }
.svc-imgsplit[data-img="right"] .svc-imgsplit__content { order: 1; }
.svc-imgsplit__media { align-self: stretch; }
.svc-imgsplit__media img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.svc-imgsplit__content { display: flex; flex-direction: column; justify-content: center; gap: var(--space-md);
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 3.5rem); max-width: 620px; margin-inline: auto; }
.svc-imgsplit__label { font-family: 'Bungee Inline', var(--font-display), sans-serif; font-size: 34px;
    line-height: 1.05; color: #fff; margin: 0; text-shadow: 3px 3px 0 rgba(0,0,0,.45); }
.svc-imgsplit__body { font-family: var(--font-body); font-size: 16px; color: #222222; margin: 0; }

/* sibling cards gain their thumbnail */
.svc-single__more-media img { width: 100%; height: 150px; object-fit: cover; display: block;
    border: 3px solid #000; border-radius: 10px; margin-bottom: var(--space-md); }

@media (max-width: 900px) {
    .svc-duo__grid, .svc-imgsplit__inner { grid-template-columns: 1fr; }
    .svc-imgsplit[data-img="right"] .svc-imgsplit__media,
    .svc-imgsplit[data-img="right"] .svc-imgsplit__content { order: initial; }
    .svc-imgsplit__media img { height: 320px; }
    .svc-imgsplit__content { max-width: none; padding: var(--space-xl) var(--space-md); }
}


/* Layerly - Asset URLs made root-relative. The build engine had written 10 absolute
   https://reallyresourceful.layerly.dev/wp-content/uploads/... URLs into this
   stylesheet. Self-referencing, so they worked on the build subdomain - but every one
   of them would have kept pointing at layerly.dev after this site moved to its real
   domain, leaving the live site loading its images from a build host (or from nothing,
   once that host is retired). Only the scheme+host prefix was removed; no filename,
   rule or property was changed. - 2026-07-28 */