/*
Theme Name: ADS Building & Remodeling
Theme URI: https://adsbuildingandremodeling.com/
Author: Pavel Popravkin
Description: Custom theme for ADS Building & Remodeling. PHP-driven, JetEngine-powered, no page builder. Design adapted from OnePack.
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: ads
License: GPL-2.0-or-later
*/

/* ==================================================================== */
/* CASCADE LAYERS — explicit precedence (later wins, !important agnostic) */
/* Order: base → passes → theme-dark (theme-dark filled by dark.css)      */
/* ==================================================================== */
@layer base, passes, theme-dark;

/* ==================================================================== */
/* DESIGN TOKENS — consolidated from 5 historical :root blocks            */
/* Tokens live outside any layer so they keep maximum cascade priority.   */
/* Last-write-wins semantics applied to historical duplicates.            */
/* ==================================================================== */
:root {
    /* --- block 1 (was line 2) --- */

    /* RAW PALETTE */
    --c-white:           #FFFFFF;
    --c-cream-50:        #FBF9F5;
    --c-cream-100:       #F5F0E8;
    --c-cream-200:       #E8DFCE;
    --c-stone-100:       #F5F5F4;
    --c-stone-200:       #EBEBE8;
    --c-stone-400:       #999;
    --c-stone-500:       #666;
    --c-stone-600:       #4A4A4A;
    --c-stone-900:       #1A1A1A;
    --c-stone-950:       #0F0F0F;

    /* GREEN — replaces brown accent from OnePack */
    --c-green-50:        #F0F7F2;
    --c-green-100:       #E0EFE5;
    --c-green-200:       #B8DCC2;
    --c-green-500:       #5B9C6E;
    --c-green-600:       #3D7B4C;
    --c-green-700:       #2D5A3A;
    --c-green-900:       #1A3825;

    --c-red-600:         #C44545;

    /* WARM — secondary accent for sprinkled color (numbers, eyebrows, hover) */
    --c-warm-50:         #FAF6EE;
    --c-warm-100:        #F2E9D6;
    --c-warm-200:        #E5D2A8;
    --c-warm-500:        #C9A461;   /* cream-gold */
    --c-warm-600:        #A8872E;   /* deep gold-bronze */
    --c-warm-700:        #7D6620;

    /* SEMANTIC */
    --color-bg:           var(--c-white);
    --color-bg-cream:     var(--c-cream-100);
    --color-bg-cream-soft:var(--c-cream-50);
    --color-bg-dark:      var(--c-stone-900);
    --color-bg-tint:      var(--c-green-50);
    --color-bg-warm:      var(--c-warm-50);
    --color-bg-warm-soft: #FDFAF3;

    --color-accent-warm:        var(--c-warm-600);
    --color-accent-warm-strong: var(--c-warm-700);
    --color-accent-warm-tint:   var(--c-warm-100);

    --color-text:         var(--c-stone-900);
    --color-text-muted:   var(--c-stone-500);
    --color-text-soft:    var(--c-stone-600);
    --color-text-on-dark: var(--c-cream-50);

    --color-primary:      var(--c-green-600);
    --color-primary-hover:var(--c-green-700);
    --color-primary-tint: var(--c-green-100);

    --color-accent:       var(--c-green-600);
    --color-accent-hover: var(--c-green-700);

    --color-border:       var(--c-stone-200);
    --color-border-soft:  rgba(26, 26, 26, 0.08);

    --color-success:      var(--c-green-600);
    --color-error:        var(--c-red-600);

    /* TYPOGRAPHY — single Inter family */
    --font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:    ui-monospace, "SF Mono", Menlo, Monaco, monospace;

    /* Fluid type — editorial hero scale */
    --fs-hero:   clamp(2.75rem, 6.5vw, 5.5rem);   /* 44-88px */
    --fs-h1:     clamp(2.25rem, 5vw, 4.25rem);    /* 36-68px */
    --fs-h2:     clamp(2rem, 4vw, 3.5rem);        /* 32-56px */
    --fs-h3:     clamp(1.25rem, 1.8vw, 1.5rem);
    --fs-h4:     1.125rem;
    --fs-lead:   clamp(1.0625rem, 1.3vw, 1.25rem);
    --fs-body:   1rem;
    --fs-small:  0.875rem;
    --fs-tiny:   0.75rem;
    --fs-mega:   clamp(4rem, 14vw, 16rem);  /* footer watermark text */

    --lh-tight:  0.95;
    --lh-snug:   1.15;
    --lh-base:   1.6;
    --lh-loose:  1.8;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    900;

    --tracking-tight:    -0.025em;
    --tracking-tighter:  -0.04em;
    --tracking-normal:   0;
    --tracking-wide:     0.02em;
    --tracking-caps:     0.08em;

    /* SPACING */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2.5rem;
    --space-xl:  4rem;
    --space-2xl: 6rem;
    --space-3xl: 8rem;
    --space-4xl: 12rem;

    /* LAYOUT */
    --max-width-prose:    65ch;
    --max-width-narrow:   720px;
    --max-width-content:  1320px;
    --max-width-wide:     1440px;
    --padding-x:          clamp(1.25rem, 4vw, 3rem);

    /* BORDERS / RADII */
    --border-width:    1px;
    /* Set --radius-scale to 0 for fully sharp UI; 1 = default rounded; 1.5 = chunky */
    --radius-scale:    0;
    --radius-none:     0;
    --radius-sm:       calc(4px  * var(--radius-scale));
    --radius-md:       calc(12px * var(--radius-scale));
    --radius-lg:       calc(20px * var(--radius-scale));
    --radius-pill:     calc(999px * var(--radius-scale));

    /* SHADOWS — minimal, no Material/iOS look */
    --shadow-none:  none;
    --shadow-sm:    0 1px 3px rgba(26,26,26,0.06);
    --shadow-md:    0 8px 32px rgba(26,26,26,0.08);
    --shadow-focus: 0 0 0 3px rgba(61,123,76,0.25);

    /* MOTION */
    --duration-fast:    150ms;
    --duration-base:    250ms;
    --duration-slow:    400ms;
    --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);

    /* COMPONENT-SPECIFIC */
    --button-height:   3rem;
    --button-padding-x:1.75rem;
    --header-height:   5rem;

    /* --- block 2 (was line 6086) --- */

    /* Dark squares — for use on light blocks (rating, quote) */
    --v3-mark-dark: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%231A1A1A'%3E%3Crect x='0' y='0' width='10' height='10'/%3E%3Crect x='14' y='0' width='10' height='10'/%3E%3Crect x='0' y='14' width='10' height='10'/%3E%3Crect x='14' y='14' width='10' height='10'/%3E%3C/g%3E%3C/svg%3E");
    /* Cream squares — for use on dark blocks (badge) */
    --v3-mark-cream: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23FAF6EE'%3E%3Crect x='0' y='0' width='10' height='10'/%3E%3Crect x='14' y='0' width='10' height='10'/%3E%3Crect x='0' y='14' width='10' height='10'/%3E%3Crect x='14' y='14' width='10' height='10'/%3E%3C/g%3E%3C/svg%3E");

    /* --- block 3 (was line 7567) --- */
 --page-mx: 0; --page-my: 0; 

    /* --- block 4 (was line 8590) --- */

    --v3-bg:        #FAF6EE;
    --v3-bg-white:  #FFFFFF;
    --v3-bg-cream:  #F2E9D6;
    --v3-bg-dark:   #0E1F15;
    --v3-text:      #141414;
    --v3-text-mid:  #4A4A4A;
    --v3-text-soft: #595959;
    --v3-border:    #E8DFCE;
    --v3-accent:    #1a7e31;
    --v3-accent-2:  #1c9538;

    /* --- block 5 (was line 8611) --- */

    --c-cream-50:    #FFFFFF;
    --c-cream-100:   #F5F5F4;
    --c-cream-200:   #E5E5E2;
    --v3-bg:         #FFFFFF;
    --v3-bg-cream:   #F4F4F2;
}


@layer base {


/* ========================================================== */
/* 2. RESET / BASE                                             */
/* ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text-soft);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    font-weight: var(--fw-regular);
    -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-primary-hover); }
a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

/* ========================================================== */
/* 3. TYPOGRAPHY                                               */
/* ========================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tighter);
    margin: 0 0 var(--space-md);
    color: var(--color-text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
.hero-headline { font-size: var(--fs-hero); }

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

.lead       { font-size: var(--fs-lead); color: var(--color-text-soft); }
.muted      { color: var(--color-text-muted); }
.eyebrow    {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--fs-tiny);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}
.eyebrow::before {
    content: "+";
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}
.prose { max-width: var(--max-width-prose); }

/* ========================================================== */
/* 4. LAYOUT                                                   */
/* ========================================================== */
.container {
    width: 100%;
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding-left: var(--padding-x);
    padding-right: var(--padding-x);
}
.container--wide   { max-width: var(--max-width-wide); }
.container--narrow { max-width: var(--max-width-narrow); }

.section { padding: var(--space-3xl) 0; }
.section--alt { background: var(--color-bg-cream-soft); }
.section--cream { background: var(--color-bg-cream); }
.section--dark { background: var(--color-bg-dark); color: var(--color-text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark .eyebrow { color: var(--color-text-on-dark); }
.section--dark .eyebrow::before { color: var(--color-primary); }

.section__head { margin-bottom: var(--space-2xl); }
.section__head h2 { max-width: 28ch; }

/* ========================================================== */
/* 5. HEADER (with top bar)                                    */
/* ========================================================== */
.topbar {
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
    font-size: var(--fs-small);
    padding: 0.625rem 0;
}
.topbar__inner {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    padding: 0 var(--padding-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}
.topbar__left::before {
    content: "+ ";
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}
.topbar__right { color: var(--c-stone-400); }
@media (max-width: 720px) {
    .topbar__right { display: none; }
}

.site-header {
    background: #0A0B0D;
    border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.06);
    height: var(--header-height);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header__inner {
    width: 100%;
    max-width: var(--max-width-wide);
    margin: 0 auto;
    padding: 0 var(--padding-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}
.site-logo {
    text-decoration: none;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.site-logo__img {
    display: block !important;
    height: 60px !important;
    width: auto !important;
    max-height: 60px;
    max-width: 280px;
    transition: opacity 0.2s ease;
}
/* When the wrapper holds an <img> (dark-page webp variant) instead of an
 * inline <svg>, the size constraint above lives on the span — propagate it
 * to the inner <img> so it doesn't render at its natural 400×228 dimensions. */
.site-logo__img > img {
    display: block;
    height: 60px;
    width: auto;
    max-height: 60px;
    max-width: 280px;
}
.site-logo:hover .site-logo__img { opacity: 0.85; }
.site-logo--footer .site-logo__img {
    height: 76px !important;
    max-height: 76px;
    max-width: 320px;
}
.site-logo--footer .site-logo__img > img {
    height: 76px;
    max-height: 76px;
    max-width: 320px;
}
.site-nav ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: var(--space-lg);
}
.site-nav a {
    color: #EFEAE0;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
}
.site-nav a:hover { color: #6FA572; }
.header-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.625rem 1rem;
    border: var(--border-width) solid rgba(239, 234, 224, 0.4);
    border-radius: var(--radius-pill);
    color: #EFEAE0;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.header-cta:hover {
    color: #0A0B0D;
    background: #EFEAE0;
    border-color: #EFEAE0;
}
@media (max-width: 880px) {
    .site-nav { display: none; }
}

.site-main { min-height: 60vh; }
.bare-page-wrap, .bare-page-wrap > .entry-content {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: var(--space-2xl) var(--padding-x);
}

/* ========================================================== */
/* 6. BUTTONS                                                  */
/* ========================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    height: var(--button-height);
    padding: 0 var(--button-padding-x);
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
    border: var(--border-width) solid transparent;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
    white-space: nowrap;
    line-height: 1;
}
.btn:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
.btn--primary {
    background: var(--color-primary);
    color: var(--color-text-on-dark);
    border-color: var(--color-primary);
}
.btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-text-on-dark); }
.btn--dark {
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
    border-color: var(--color-bg-dark);
}
.btn--dark:hover { background: var(--c-stone-950); color: var(--color-text-on-dark); }
.btn--outline {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-text);
}
.btn--outline:hover { background: var(--color-text); color: var(--color-text-on-dark); }
.btn--outline-light {
    background: transparent;
    color: var(--color-text-on-dark);
    border-color: var(--color-text-on-dark);
}
.btn--outline-light:hover { background: var(--color-text-on-dark); color: var(--color-text); }

/* ========================================================== */
/* 7. HERO (split layout, overlapping image cards)             */
/* ========================================================== */
/* === HERO UPGRADE — 3-photo collage + floating elements === */
.hero {
    position: relative;
    background: var(--color-bg);
    padding: var(--space-2xl) 0 var(--space-3xl);
    overflow: hidden;
}
.hero__bg-pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100%;
    background-image: radial-gradient(circle at 1px 1px, rgba(61,123,76,0.18) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse 80% 70% at 90% 30%, #000, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 90% 30%, #000, transparent 70%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}
.hero__grid {
    position: relative;
    z-index: 1;
    max-width: var(--max-width-wide);
    margin: 0 auto;
    padding: 0 var(--padding-x);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: center;
}
@media (max-width: 880px) {
    .hero__grid { grid-template-columns: 1fr; }
}

.hero__copy h1 {
    margin-bottom: var(--space-lg);
}
.hero__sub {
    font-size: var(--fs-lead);
    max-width: 38ch;
    margin-bottom: var(--space-lg);
    color: var(--color-text-soft);
    line-height: var(--lh-base);
}
.hero__cta {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.hero__trust {
    display: flex;
    gap: 0.625rem 1.25rem;
    flex-wrap: wrap;
    margin-top: var(--space-lg);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    align-items: center;
}
.hero__trust span { white-space: nowrap; }
.hero__trust strong { color: var(--color-text); font-weight: var(--fw-semibold); }
.hero__trust span { display: inline-flex; align-items: center; gap: 0.4em; }

/* === 3-PHOTO COLLAGE === */
.hero__images {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.85rem;
    height: clamp(540px, 65vw, 720px);
    isolation: isolate;
}
.hero__image {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    text-decoration: none;
    display: block;
    transition: transform 0.6s var(--ease-out, cubic-bezier(0.2,0.9,0.3,1));
    will-change: transform;
    background: var(--color-bg-cream);
}
.hero__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--ease-out, ease-out);
}
.hero__image:hover { transform: translateY(-3px); }
.hero__image:hover img { transform: scale(1.04); }

.hero__image--main   { grid-column: 1; grid-row: 1 / span 2; }
.hero__image--accent { grid-column: 2; grid-row: 1; }
.hero__image--small  { grid-column: 2; grid-row: 2; }

/* Caption tag on main image */


/* === FLOATING: RATING PILL === */
.hero-pill {
    position: absolute;
    z-index: 4;
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    padding: 0.4rem 0.75rem 0.4rem 0.45rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: var(--radius-md);
    max-width: 200px;
}
.hero-pill--rating {
    top: 1.25rem;
    left: 1.25rem;
}
.hero-pill__avatars {
    display: flex;
    flex: 0 0 auto;
}
.hero-pill__avatars span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-primary-tint);
    color: var(--color-primary-hover);
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    margin-left: -6px;
}
.hero-pill__avatars span:first-child { margin-left: 0; }
.hero-pill__avatars span:nth-child(2n) { background: var(--c-cream-200); color: var(--color-text); }
.hero-pill__copy { display: flex; flex-direction: column; gap: 0; line-height: 1.1; }
.hero-pill__copy strong {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
}
.hero-pill__copy strong em {
    color: var(--color-text);
    font-style: normal;
    font-weight: var(--fw-bold);
    margin-left: 0.25em;
    letter-spacing: -0.01em;
}
.hero-pill__copy small {
    font-size: 0.68rem;
    color: var(--color-text-muted);
}

/* === FLOATING: SINCE 2010 STAMP === */
.hero-stamp {
    position: absolute;
    z-index: 4;
    top: -1.25rem;
    right: -1.25rem;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    line-height: 1;
    text-align: center;
    box-shadow: 0 6px 20px rgba(61,123,76,0.35);
    transform: rotate(-8deg);
    border: 3px solid #fff;
}
.hero-stamp__top, .hero-stamp__bot {
    font-size: 0.5rem;
    letter-spacing: var(--tracking-caps);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    opacity: 0.85;
}
.hero-stamp__big {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: var(--fw-black);
    letter-spacing: -0.02em;
    margin: 0.1rem 0;
}

/* === LIVE-PULSE INDICATOR === */
.hero-pulse {
    position: absolute;
    z-index: 4;
    bottom: -1.25rem;
    right: 1rem;
    background: var(--color-bg-dark);
    color: #fff;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    font-weight: var(--fw-medium);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.hero-pulse__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-green-500);
    flex: 0 0 auto;
}
.hero-pulse__dot::before,
.hero-pulse__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--c-green-500);
    animation: hero-pulse 2.2s ease-out infinite;
}
.hero-pulse__dot::after { animation-delay: 1.1s; }
@keyframes hero-pulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    100% { transform: scale(3.2); opacity: 0; }
}
.hero-pulse__text strong {
    color: var(--c-green-200);
    font-weight: var(--fw-semibold);
}
.hero__video {
    position: relative;
    background: #000;
    overflow: hidden;
}
.hero__video iframe {
    /* Oversize the iframe so YouTube UI lives outside slot overflow:hidden bounds,
       AND the inner 9:16 content fills the slot fully — no black letterbox bars
       above/below the video frame. */
    position: absolute;
    top: -22%;
    left: -8%;
    width: 116%;
    height: 144%;
    border: 0;
    pointer-events: none;
}
.hero__video::before {
    content: "";
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.45));
    pointer-events: none;
}
.hero__video-link {
    position: absolute; inset: 0; z-index: 4;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    transition: background 0.2s;
}
.hero__video-link:hover { background: rgba(0,0,0,0.06); }

@media (max-width: 880px) {
    .hero__images { height: 560px; }
    .hero-stamp { width: 78px; height: 78px; top: -0.5rem; right: -0.5rem; }
    .hero-stamp__big { font-size: 1.3rem; }
    .hero-pulse { right: 0.5rem; bottom: -0.85rem; font-size: 0.72rem; }
    .hero-pill--rating { bottom: 0.75rem; left: 0.75rem; padding: 0.5rem 0.85rem 0.5rem 0.5rem; }
    .hero-pill__avatars span { width: 26px; height: 26px; }
}
@media (max-width: 480px) {
    .hero__images { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: 320px 200px 200px; gap: 0.55rem; }
    .hero__image--main   { grid-column: 1 / span 2; grid-row: 1; }
    .hero__image--accent { grid-column: 1; grid-row: 2; }
    .hero__image--small  { grid-column: 2; grid-row: 2; }
    .hero-pill--rating, .hero-pulse, .hero-stamp { display: none; }
}

/* ========================================================== */
/* 8. EDITORIAL SECTION (oversized H2 left, content right)     */
/* ========================================================== */
.editorial {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
}
@media (max-width: 880px) {
    .editorial { grid-template-columns: 1fr; gap: var(--space-lg); }
}
.editorial__title h2 { font-size: var(--fs-h1); max-width: 8ch; line-height: var(--lh-tight); }
.editorial__copy p { color: var(--color-text-soft); font-size: var(--fs-lead); max-width: 50ch; }

/* ========================================================== */
/* 9. STATS (oversized numbers)                                */
/* ========================================================== */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-2xl);
}
@media (max-width: 880px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
    border-top: 2px solid var(--color-border);
    padding-top: var(--space-md);
}
.stat__value {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--color-text);
}
.stat__value--accent { color: var(--color-primary); }
.stat__label {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    margin-top: var(--space-2xs);
}

/* ========================================================== */
/* 10. EXPERTISE GRID (mixed-color service cards)              */
/* ========================================================== */
.expertise {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: var(--space-md);
    min-height: 600px;
}
@media (max-width: 1024px) { .expertise { grid-template-columns: repeat(2, 1fr); min-height: auto; } }
.expertise > * { border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-md); min-height: 280px; }
.expertise-card {
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.expertise-card:hover { transform: translateY(-4px); border-color: var(--color-primary); }
.expertise-card--accent { background: var(--color-primary); color: var(--color-text-on-dark); border-color: var(--color-primary); }
.expertise-card--accent:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-text-on-dark); }
.expertise-card--dark { background: var(--color-bg-dark); color: var(--color-text-on-dark); border-color: var(--color-bg-dark); }
.expertise-card--dark:hover { background: var(--c-stone-950); color: var(--color-text-on-dark); }
.expertise-card--cream { background: var(--color-bg-cream); border-color: var(--color-bg-cream); }
.expertise-card__icon { width: 48px; height: 48px; opacity: 0.85; }
.expertise-card h3 { margin: 0; font-size: 1.5rem; line-height: var(--lh-snug); }
.expertise-card p { font-size: var(--fs-small); margin: 0; opacity: 0.85; }
.expertise-card__cta { font-size: var(--fs-small); font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: 0.4em; }

.expertise-card--dark h3, .expertise-card--dark p { color: var(--color-text-on-dark); }
.expertise-card--accent h3, .expertise-card--accent p { color: var(--color-text-on-dark); }
.expertise-card__cta::after { content: "→"; transition: transform var(--duration-fast) var(--ease-out); }
.expertise-card:hover .expertise-card__cta::after { transform: translateX(4px); }
.expertise-image {
    grid-column: span 2; grid-row: span 2;
    background-size: cover; background-position: center;
    border-radius: var(--radius-md);
    min-height: 0;
}
@media (max-width: 1024px) { .expertise-image { grid-column: span 2; grid-row: auto; min-height: 320px; } }

/* ========================================================== */
/* 11. PROJECT GRID (huge titles + image)                      */
/* ========================================================== */
.project-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: stretch;
}
@media (max-width: 880px) { .project-grid { grid-template-columns: 1fr; } }
.project-list { display: flex; flex-direction: column; gap: 0; background: var(--color-bg-dark); color: var(--color-text-on-dark); border-radius: var(--radius-md); overflow: hidden; }
.project-list__item {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: var(--border-width) solid rgba(255,255,255,0.08);
    display: flex; flex-direction: column; gap: var(--space-2xs);
    text-decoration: none;
    color: var(--color-text-on-dark);
    transition: background var(--duration-fast) var(--ease-out);
}
.project-list__item:hover { background: rgba(255,255,255,0.03); color: var(--color-text-on-dark); }
.project-list__item:last-child { border-bottom: none; }
.project-list__num { font-family: var(--font-display); font-size: var(--fs-small); color: var(--color-primary); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); }
.project-list__title { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
.project-list__meta { font-size: var(--fs-small); color: var(--c-stone-400); margin-top: var(--space-xs); display: flex; gap: var(--space-md); flex-wrap: wrap; }
.project-image {
    background-size: cover; background-position: center;
    border-radius: var(--radius-md);
    min-height: 480px;
    position: relative;
}
.project-image__caption {
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-md);
    right: var(--space-md);
    background: rgba(255,255,255,0.95);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(8px);
}
.project-image__caption h3 { margin: 0 0 var(--space-3xs); font-size: 1.125rem; }
.project-image__caption p { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); }

/* ========================================================== */
/* 12. PROCESS FLOW (3 cards + dark CTA card)                  */
/* ========================================================== */
.process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}
@media (max-width: 1024px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .process { grid-template-columns: 1fr; } }
.process-card {
    background: var(--color-bg-cream-soft);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    display: flex; flex-direction: column; gap: var(--space-md);
    min-height: 280px;
}
.process-card__icon {
    width: 40px; height: 40px;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
}
.process-card h3 { margin: 0; font-size: 1.25rem; }
.process-card p  { margin: 0; font-size: var(--fs-small); color: var(--color-text-soft); }
.process-cta {
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    display: flex; flex-direction: column; gap: var(--space-md); justify-content: space-between;
    min-height: 280px;
}
.process-cta h3 { color: var(--color-text-on-dark); margin: 0; font-size: 1.25rem; }
.process-cta p  { color: rgba(251,249,245,0.7); font-size: var(--fs-small); margin: 0; }

/* ========================================================== */
/* 13. LOCATIONS (3-col)                                       */
/* ========================================================== */
.locations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}
@media (max-width: 880px) { .locations { grid-template-columns: 1fr; } }
.location-card {
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    display: flex; flex-direction: column; gap: var(--space-sm);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color var(--duration-fast) var(--ease-out);
}
.location-card:hover { border-color: var(--color-primary); }
.location-card__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--fw-bold); }
.location-card__meta { font-size: var(--fs-small); color: var(--color-text-muted); display: flex; flex-direction: column; gap: var(--space-3xs); }

/* ========================================================== */
/* 14. CTA BANNER + FORMS                                      */
/* ========================================================== */
.cta-banner {
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
    padding: var(--space-3xl) 0;
    text-align: center;
}
.cta-banner h2 { color: var(--color-text-on-dark); max-width: 18ch; margin-left: auto; margin-right: auto; }
.cta-banner p  { color: rgba(251,249,245,0.75); font-size: var(--fs-lead); max-width: 50ch; margin: 0 auto var(--space-lg); }

.form-field { margin-bottom: var(--space-md); }
.form-label { display: block; font-weight: var(--fw-medium); font-size: var(--fs-small); margin-bottom: var(--space-3xs); }
.form-input, .form-textarea, .form-select {
    width: 100%;
    height: var(--button-height);
    padding: 0 var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text);
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
}
.form-textarea { height: auto; min-height: 7rem; padding: var(--space-sm); resize: vertical; }
.form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); }

/* ========================================================== */
/* 15. FOOTER (with watermark)                                 */
/* ========================================================== */
.site-footer {
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
    padding: var(--space-3xl) 0 0;
    margin-top: var(--space-3xl);
    overflow: hidden;
    position: relative;
}
.site-footer__inner {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    padding: 0 var(--padding-x);
    position: relative;
    z-index: 2;
}
.footer-cols {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-3xl);
}
@media (max-width: 880px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
.footer-col h4 { color: var(--color-text-on-dark); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-bottom: var(--space-md); font-weight: var(--fw-semibold); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.footer-col a { color: rgba(251,249,245,0.65); font-size: var(--fs-small); }
.footer-col a:hover { color: var(--color-text-on-dark); }
.footer-brand p { color: rgba(251,249,245,0.65); font-size: var(--fs-small); max-width: 36ch; }
.footer-watermark {
    font-family: var(--font-display);
    font-size: var(--fs-mega);
    font-weight: var(--fw-black);
    line-height: 0.85;
    letter-spacing: var(--tracking-tighter);
    color: rgba(251,249,245,0.06);
    text-align: center;
    margin: var(--space-2xl) auto 0;
    user-select: none;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
.footer-bottom {
    border-top: var(--border-width) solid rgba(251,249,245,0.1);
    padding: var(--space-md) 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    font-size: var(--fs-small);
    color: rgba(251,249,245,0.6);
}
.footer-bottom a { color: rgba(251,249,245,0.6); }

/* ========================================================== */
/* 16. UTILITIES                                               */
/* ========================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ========================================================== */
/* 17. TAG CLOUD (service category pills with counts)          */
/* ========================================================== */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: flex-start;
}
.tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    text-decoration: none;
    color: var(--color-text);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    background: var(--color-bg);
    transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.tag-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.tag-pill__count {
    color: var(--color-text-muted);
    margin-left: 0.5em;
    font-variant-numeric: tabular-nums;
}
.tag-pill:hover .tag-pill__count { color: var(--color-primary); }

/* About + tag cloud 2-col layout */
.about-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
}
@media (max-width: 880px) { .about-2col { grid-template-columns: 1fr; } }

.review-stack {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--space-md);
}
.review-stack__avatars {
    display: flex;
}
.review-stack__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary-tint);
    border: 2px solid var(--color-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-semibold);
    font-size: 0.75rem;
    color: var(--color-primary);
    margin-left: -10px;
}
.review-stack__avatar:first-child { margin-left: 0; }
.review-stack__count {
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}
.review-stack__count small { color: var(--color-text-muted); font-weight: var(--fw-regular); margin-left: 0.5em; font-size: var(--fs-small); }

/* ========================================================== */
/* 18. CINEMATIC MOMENT (massive editorial title on dark)      */
/* ========================================================== */
.cinematic {
    background: var(--color-bg-dark);
    position: relative;
    padding: clamp(6rem, 14vw, 12rem) 0;
    overflow: hidden;
    text-align: center;
}
.cinematic::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(61,123,76,0.15), transparent 70%);
}
.cinematic__inner { position: relative; z-index: 2; padding: 0 var(--padding-x); }
.cinematic__title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 14vw, 13rem);
    line-height: 0.85;
    color: var(--color-text-on-dark);
    letter-spacing: -0.06em;
    font-weight: var(--fw-black);
    margin: 0;
}
.cinematic__sub {
    color: rgba(251,249,245,0.65);
    font-size: var(--fs-lead);
    max-width: 50ch;
    margin: var(--space-lg) auto 0;
}

/* ========================================================== */
/* 19. FEATURED HIGHLIGHT CARD (project with stats inside)     */
/* ========================================================== */
.highlight-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    max-width: 720px;
    margin: 0 auto;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform var(--duration-base) var(--ease-out);
}
.highlight-card:hover { transform: translateY(-4px); }
.highlight-card__image {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--color-bg-cream);
}
.highlight-card__body { padding: var(--space-lg); }
.highlight-card__title { font-size: var(--fs-h2); margin-bottom: var(--space-sm); line-height: var(--lh-snug); }
.highlight-card__desc  { color: var(--color-text-soft); margin-bottom: var(--space-md); }
.highlight-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-md);
}
.highlight-card__stat {
    font-family: var(--font-display);
}
.highlight-card__stat strong {
    display: block;
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    color: var(--color-text);
}
.highlight-card__stat span {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    font-family: var(--font-body);
}
.highlight-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}
.highlight-card__tag {
    font-size: var(--fs-tiny);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-pill);
}

/* ========================================================== */
/* 20. MARQUEE BAND (infinite scroll pills, 2 directions)      */
/* ========================================================== */
.marquee-band {
    background: var(--color-bg-cream);
    padding: var(--space-2xl) 0;
    overflow: hidden;
    border-top: var(--border-width) solid var(--color-border-soft);
    border-bottom: var(--border-width) solid var(--color-border-soft);
    position: relative;
}
.marquee-band__head {
    text-align: center;
    margin-bottom: var(--space-xl);
    padding: 0 var(--padding-x);
}
.marquee-band__head h2 {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    margin: 0;
    max-width: none;
}

.marquee {
    display: flex;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee + .marquee { margin-top: var(--space-md); }

.marquee__track {
    display: flex;
    gap: var(--space-md);
    flex-shrink: 0;
    white-space: nowrap;
    animation: marquee-rtl 50s linear infinite;
    will-change: transform;
}
.marquee--reverse .marquee__track {
    animation: marquee-ltr 45s linear infinite;
}
.marquee:hover .marquee__track {
    animation-play-state: paused;
}

/* Bigger pill for marquee — more cinematic */
.marquee-pill {
    display: inline-flex;
    align-items: baseline;
    padding: 1rem 1.75rem;
    border: 1px solid rgba(26,26,26,0.12);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 1.5vw, 1.625rem);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}
.marquee-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.marquee-pill__count {
    color: var(--color-text-muted);
    font-weight: var(--fw-regular);
    margin-left: 0.6em;
    font-variant-numeric: tabular-nums;
    font-size: 0.85em;
}
.marquee-pill--accent {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-dark);
}
.marquee-pill--accent:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-text-on-dark);
}
.marquee-pill--accent .marquee-pill__count {
    color: rgba(251,249,245,0.7);
}
.marquee-pill--dark {
    background: var(--color-bg-dark);
    border-color: var(--color-bg-dark);
    color: var(--color-text-on-dark);
}
.marquee-pill--dark:hover {
    background: var(--c-stone-950);
    border-color: var(--c-stone-950);
    color: var(--color-text-on-dark);
}
.marquee-pill--dark .marquee-pill__count {
    color: rgba(251,249,245,0.55);
}

@keyframes marquee-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes marquee-ltr {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
}

/* ========================================================== */
/* 21. BENTO GRID (testimonials + proof, varied cards)         */
/* ========================================================== */
.bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(280px, auto) minmax(360px, auto);
    grid-template-areas:
        "rating  proj1  quotes"
        "proj2   testi  stat";
    gap: var(--space-md);
}
@media (max-width: 880px) {
    .bento { grid-template-columns: 1fr; grid-template-areas: "rating" "proj1" "quotes" "proj2" "testi" "stat"; grid-template-rows: auto; }
}
.bento > * {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

/* Rating card */
.bento-rating {
    grid-area: rating;
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-md);
}
.bento-rating__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.bento-rating__stars { color: var(--color-primary); font-size: 1.125rem; letter-spacing: 0.1em; }
.bento-rating__value { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: var(--fw-black); line-height: 1; letter-spacing: var(--tracking-tighter); }
.bento-rating__desc { color: var(--color-text-soft); font-size: var(--fs-small); margin: 0; }

/* Project image cards */
.bento-proj1 { grid-area: proj1; }
.bento-proj2 { grid-area: proj2; min-height: 360px; }
.bento-proj1, .bento-proj2 {
    background-size: cover;
    background-position: center;
    background-color: var(--color-bg-cream);
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    padding: var(--space-md);
    color: var(--color-text-on-dark);
}
.bento-proj1::before, .bento-proj2::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7));
    z-index: 1;
}
.bento-proj1__caption, .bento-proj2__caption {
    position: relative;
    z-index: 2;
}
.bento-proj1__caption strong, .bento-proj2__caption strong { display: block; font-family: var(--font-display); font-size: 1.125rem; font-weight: var(--fw-bold); }
.bento-proj1__caption small, .bento-proj2__caption small { color: rgba(255,255,255,0.7); font-size: var(--fs-small); }

/* Quote list card (accent green) */
.bento-quotes {
    grid-area: quotes;
    background: var(--color-primary);
    color: var(--color-text-on-dark);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.bento-quotes__item {
    background: rgba(255,255,255,0.95);
    color: var(--color-text);
    padding: 0.625rem 1rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    line-height: 1.4;
}
.bento-quotes__item strong { font-weight: var(--fw-bold); }

/* Dark testimonial card */
.bento-testi {
    grid-area: testi;
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-md);
    position: relative;
}
.bento-testi__stars { color: var(--color-primary); letter-spacing: 0.1em; font-size: 1rem; }
.bento-testi__quote {
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--color-text-on-dark);
    margin: 0;
}
.bento-testi__author { display: flex; flex-direction: column; gap: 0.125rem; }
.bento-testi__name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: var(--fw-bold); }
.bento-testi__role { font-size: var(--fs-small); color: rgba(255,255,255,0.55); }
.bento-testi__quotemark {
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-md);
    font-family: var(--font-display);
    font-size: 4rem;
    line-height: 0.8;
    color: rgba(255,255,255,0.15);
    pointer-events: none;
}

/* Stat card */
.bento-stat {
    grid-area: stat;
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-sm);
}
.bento-stat__label { color: var(--color-text-soft); font-size: var(--fs-small); margin: 0; }
.bento-stat__value {
    font-family: var(--font-display);
    font-size: clamp(4rem, 9vw, 8rem);
    line-height: 0.85;
    font-weight: var(--fw-black);
    letter-spacing: var(--tracking-tighter);
    color: transparent;
    -webkit-text-stroke: 2px var(--color-primary);
            text-stroke: 2px var(--color-primary);
    display: block;
}
.bento-stat__sub { color: var(--color-text-muted); font-size: var(--fs-small); margin: 0; }

/* Avatar stack reused */
.bento-rating .review-stack { margin-bottom: 0; }

/* ========================================================== */
/* 22. EXPERTISE CINEMATIC (full-bleed dramatic listing)       */
/* ========================================================== */
.expertise-cinematic {
    position: relative;
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
    padding: var(--space-3xl) 0 var(--space-2xl);
    overflow: hidden;
    isolation: isolate;
}
.expertise-cinematic::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    height: 70%;
    background: radial-gradient(ellipse at center top, rgba(61,123,76,0.45) 0%, rgba(61,123,76,0.18) 35%, transparent 65%);
    pointer-events: none;
    z-index: -1;
}
.expertise-cinematic::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: radial-gradient(ellipse at center bottom, rgba(0,0,0,0.7), transparent 70%);
    pointer-events: none;
    z-index: -1;
}
.expertise-cinematic__inner {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    padding: 0 var(--padding-x);
    position: relative;
}
.expertise-cinematic__title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 14vw, 13rem);
    font-weight: var(--fw-black);
    line-height: 0.9;
    letter-spacing: var(--tracking-tighter);
    color: var(--color-text-on-dark);
    margin: 0 0 var(--space-md);
}
.expertise-cinematic__sub {
    font-size: var(--fs-lead);
    color: rgba(251,249,245,0.65);
    margin: 0 0 var(--space-2xl);
    max-width: 50ch;
}

.expertise-cinematic__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.expertise-cinematic__item {
    display: grid;
    grid-template-columns: 80px 1fr 1.5fr;
    gap: var(--space-md);
    padding: var(--space-xl) 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    align-items: baseline;
    text-decoration: none;
    color: var(--color-text-on-dark);
    transition: padding var(--duration-base) var(--ease-out);
    position: relative;
}
.expertise-cinematic__item:hover {
    padding-left: var(--space-md);
    color: var(--color-text-on-dark);
}
.expertise-cinematic__item:hover .expertise-cinematic__name { color: var(--color-primary); }
@media (max-width: 880px) {
    .expertise-cinematic__item {
        grid-template-columns: 50px 1fr;
        grid-template-areas: "num name" ". desc";
        gap: var(--space-xs) var(--space-md);
    }
    .expertise-cinematic__num { grid-area: num; }
    .expertise-cinematic__name { grid-area: name; }
    .expertise-cinematic__desc { grid-area: desc; }
}
.expertise-cinematic__num {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-wide);
}
.expertise-cinematic__name {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-on-dark);
    margin: 0;
    transition: color var(--duration-fast) var(--ease-out);
}
.expertise-cinematic__desc {
    color: rgba(251,249,245,0.7);
    font-size: var(--fs-small);
    line-height: 1.6;
    margin: 0;
    max-width: 50ch;
}
.expertise-cinematic__cta {
    margin-top: var(--space-2xl);
    text-align: center;
}

/* Side floating tags column */
.expertise-cinematic__tags {
    position: absolute;
    right: var(--padding-x);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--fs-small);
    color: rgba(251,249,245,0.4);
    font-weight: var(--fw-medium);
    pointer-events: none;
    z-index: 1;
}
@media (max-width: 1100px) { .expertise-cinematic__tags { display: none; } }

/* Scroll-driven reveal — modern browsers */
@supports (animation-timeline: view()) {
    .expertise-cinematic__item {
        opacity: 0;
        transform: translateY(40px);
        animation: ec-fade-up linear both;
        animation-timeline: view();
        animation-range: cover 5% cover 35%;
    }
}
@keyframes ec-fade-up {
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .expertise-cinematic__item { animation: none; opacity: 1; transform: none; }
}

/* ========================================================== */
/* 23. PORTFOLIO STRIP (animated horizontal scroll of cards)   */
/* ========================================================== */
.portfolio-strip {
    background: var(--color-bg);
    padding: var(--space-2xl) 0;
    overflow: hidden;
    border-top: var(--border-width) solid var(--color-border-soft);
    border-bottom: var(--border-width) solid var(--color-border-soft);
}
.portfolio-strip__head {
    text-align: center;
    margin-bottom: var(--space-xl);
    padding: 0 var(--padding-x);
}
.portfolio-strip__head h2 {
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    margin-bottom: var(--space-sm);
}
.portfolio-strip__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.portfolio-strip__track {
    display: flex;
    gap: var(--space-md);
    animation: portfolio-scroll 60s linear infinite;
    will-change: transform;
}
.portfolio-strip:hover .portfolio-strip__track { animation-play-state: paused; }

.portfolio-strip__card {
    flex-shrink: 0;
    width: clamp(280px, 30vw, 420px);
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: var(--color-bg-cream);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text-on-dark);
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: var(--space-md);
    transition: transform var(--duration-base) var(--ease-out);
}
.portfolio-strip__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.75));
    z-index: 1;
}
.portfolio-strip__card:hover { transform: scale(1.02); }
.portfolio-strip__card-meta {
    position: relative;
    z-index: 2;
}
.portfolio-strip__card-meta strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}
.portfolio-strip__card-meta small {
    color: rgba(255,255,255,0.7);
    font-size: var(--fs-small);
}

@keyframes portfolio-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .portfolio-strip__track { animation: none; }
}

/* ========================================================== */
/* 24. BLEED VIDEO (escapes container right, off-screen)       */
/* ========================================================== */
.bleed-video {
    margin-top: var(--space-md);
    /* Container has max-width 1320px centered. This trick extends element
       from current left edge to the right viewport edge — even past the
       container's natural right boundary. */
    margin-right: calc(50% - 50vw);
    aspect-ratio: 21 / 9;
    max-height: 380px;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    overflow: hidden;
    position: relative;
    background: var(--color-bg-dark);
}
.bleed-video__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Ken Burns motion — applies to poster image until <source src> is added */
.bleed-video__pan {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: ken-burns 28s ease-in-out infinite alternate;
}
.bleed-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.55), transparent 55%);
    z-index: 1;
    pointer-events: none;
}
.bleed-video__caption {
    position: absolute;
    left: var(--space-lg);
    bottom: var(--space-lg);
    z-index: 2;
    color: var(--color-text-on-dark);
    max-width: 28rem;
}
.bleed-video__caption .eyebrow {
    color: rgba(251,249,245,0.6);
    margin-bottom: var(--space-xs);
}
.bleed-video__caption .eyebrow::before {
    color: var(--color-primary);
}
.bleed-video__caption h3 {
    color: var(--color-text-on-dark);
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
}
@keyframes ken-burns {
    0%   { transform: scale(1)    translate(0, 0); }
    100% { transform: scale(1.12) translate(-3%, -2%); }
}
@media (prefers-reduced-motion: reduce) {
    .bleed-video__pan { animation: none; }
}
@media (max-width: 720px) {
    .bleed-video { aspect-ratio: 4 / 3; }
}

/* Expertise cinematic — hover image reveal on right with gradient mask */
.expertise-cinematic__item::before {
    content: "";
    position: absolute;
    top: 0;
    right: -30vw;
    bottom: 0;
    width: 90%;
    background-image: var(--hover-image, none);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out);
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 25%, rgba(0,0,0,0.85) 55%, #000 75%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 25%, rgba(0,0,0,0.85) 55%, #000 75%);
    transform: scale(1.02) translateX(0);
}
.expertise-cinematic__item:hover::before {
    opacity: 0.5;
    transform: scale(1) translateX(0);
}
.expertise-cinematic__item > * {
    position: relative;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    .expertise-cinematic__item::before { transition: opacity 250ms; transform: none; }
    .expertise-cinematic__item:hover::before { transform: none; }
}
/* ========================================================== */
/* 25. TRUST STRIP (under hero)                                */
/* ========================================================== */
.trust-strip {
    padding: clamp(1rem, 2vw, 1.5rem) 0;
    background: var(--color-bg-cream-soft);
    border-top: 1px solid var(--color-border-soft);
    border-bottom: 1px solid var(--color-border-soft);
}
.trust-strip__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.75rem, 2vw, 2rem);
    align-items: center;
}
.trust-strip__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.trust-strip__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    color: var(--color-primary);
    display: inline-flex;
}
.trust-strip__icon svg {
    width: 100%;
    height: 100%;
}
.trust-strip__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.trust-strip__title {
    font-weight: var(--fw-semibold);
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.trust-strip__sub {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    margin-top: 1px;
}
@media (max-width: 720px) {
    .trust-strip__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 0.75rem;
    }
    .trust-strip__icon { width: 26px; height: 26px; }
    .trust-strip__title { font-size: 0.875rem; }
    .trust-strip__sub { font-size: 0.72rem; }
}

/* ========================================================== */
/* 26. RISK REVERSAL                                           */
/* ========================================================== */
.risk-reversal {
    padding: clamp(4rem, 8vw, 7rem) 0;
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
}
.section__head--centered {
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.eyebrow--accent {
    color: var(--c-green-200);
}
/* risk-reversal is dark — use the lighter accent for AA contrast */
.risk-reversal .eyebrow--accent,
.about-single .risk-reversal .eyebrow--accent { color: var(--v3-accent-2); }
.risk-reversal__title {
    color: var(--c-cream-50);
    margin-top: 0.5rem;
    font-weight: var(--fw-medium);
}
.risk-reversal__sub {
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--fs-lead);
    margin-top: 1rem;
    line-height: var(--lh-base);
}
.risk-grid {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.risk-card {
    background: var(--color-bg-dark);
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: background 0.3s ease;
}
.risk-card:hover {
    background: #1F1F1F;
}
.risk-card__icon {
    width: 48px;
    height: 48px;
    color: var(--c-green-200);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}
.risk-card__icon svg {
    width: 100%;
    height: 100%;
}
.risk-card__title {
    color: var(--c-cream-50);
    font-size: 1.125rem;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
}
.risk-card__desc {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    line-height: var(--lh-base);
    margin: 0;
}
.risk-reversal__footer {
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2.5rem;
    font-size: var(--fs-small);
    font-style: italic;
}
@media (max-width: 960px) {
    .risk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .risk-grid { grid-template-columns: 1fr; }
}

/* ========================================================== */
/* 27. BEFORE / AFTER SLIDER                                   */
/* ========================================================== */
.ba-section { padding: clamp(4rem, 7vw, 6rem) 0; }
.ba {
    margin-top: clamp(2rem, 4vw, 3rem);
}
.ba__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #111;
}
.ba__pair {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.ba__pair.is-active {
    opacity: 1;
    pointer-events: auto;
}
.ba__layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.ba__layer--after {
    background-image: var(--after);
}
.ba__layer--before {
    background-image: var(--before);
    clip-path: inset(0 50% 0 0);
}
.ba__tag {
    position: absolute;
    top: 1rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.7rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    background: rgba(0,0,0,0.7);
    color: #fff;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
    pointer-events: none;
}
.ba__tag--before { left: 1rem; }
.ba__tag--after  { right: 1rem; }

.ba__slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    z-index: 3;
}
.ba__handle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}
.ba__handle-line {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 0 12px rgba(0,0,0,0.35);
}
.ba__handle-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.ba__info {
    position: relative;
    margin-top: 1.5rem;
    min-height: 4rem;
}
.ba__caption {
    display: none;
    text-decoration: none;
    color: var(--color-text);
}
.ba__caption.is-active {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.ba__caption strong {
    font-size: 1.125rem;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
}
.ba__caption small {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.ba__rail {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.ba__rail::-webkit-scrollbar { display: none; }
.ba__chip {
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: 0.5rem 0.85rem 0.5rem 0.5rem;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: var(--fw-medium);
    color: var(--color-text);
    transition: all 0.2s ease;
}
.ba__chip:hover { border-color: var(--color-text); }
.ba__chip.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-tint);
    color: var(--color-primary-hover);
}
.ba__chip-thumb {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .ba__stage { aspect-ratio: 4 / 5; }
    .ba__handle-dot { width: 38px; height: 38px; }
    .ba__tag { font-size: 0.65rem; padding: 0.25rem 0.6rem; }
}

/* ========================================================== */
/* 28. FAQ                                                     */
/* ========================================================== */
.faq-section { padding: clamp(4rem, 7vw, 6rem) 0; }
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
.faq-grid__head {
    position: sticky;
    top: 6rem;
}
.faq-grid__head h2 {
    margin-top: 0.5rem;
}
.faq-grid__sub {
    color: var(--color-text-muted);
    font-size: var(--fs-lead);
    line-height: var(--lh-base);
    margin-top: 1rem;
}
.faq-grid__cta {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--fw-semibold);
    font-size: 0.95rem;
    border-bottom: 1px solid var(--color-primary);
    padding-bottom: 2px;
}
.faq-grid__cta:hover {
    color: var(--color-primary-hover);
}

.faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
}
.faq-item {
    border-bottom: 1px solid var(--color-border);
}
.faq-item details {
    padding: 0;
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 0;
    transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover {
    color: var(--color-primary);
}
.faq-item__q {
    font-size: 1.0625rem;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    line-height: 1.4;
    flex: 1;
}
.faq-item__icon {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    transition: transform 0.3s ease;
}
.faq-item details[open] summary .faq-item__icon {
    transform: rotate(180deg);
    color: var(--color-primary);
}
.faq-item__a {
    padding: 0 0 1.5rem;
    color: var(--color-text-soft);
    font-size: 1rem;
    line-height: var(--lh-base);
    max-width: 60ch;
}
.faq-item__a p { margin: 0; }

@media (max-width: 880px) {
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .faq-grid__head {
        position: static;
    }
}

/* ========================================================== */
/* 29. PHOTO BREAK (full-bleed 100vw)                          */
/* ========================================================== */
.photo-break {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    overflow: hidden;
    background: var(--c-stone-950);
}
.photo-break__row {
    display: grid;
    gap: 2px;
    background: var(--c-stone-950);
    width: 100%;
}
/* Aspect ratios — applied via height fallback for older browsers + aspect-ratio modern */
.photo-break--wide    .photo-break__cell { aspect-ratio: 21 / 9; }
.photo-break--classic .photo-break__cell { aspect-ratio: 16 / 9; }
.photo-break--tall    .photo-break__cell { aspect-ratio: 4 / 5;  }

/* Solo */
.photo-break--n1 .photo-break__row { grid-template-columns: 1fr; }
/* Diptych */
.photo-break--n2 .photo-break__row { grid-template-columns: 1fr 1fr; }
.photo-break--n2.photo-break--wide    .photo-break__cell { aspect-ratio: 4 / 5; }
.photo-break--n2.photo-break--classic .photo-break__cell { aspect-ratio: 1 / 1; }
/* Triptych */
.photo-break--n3 .photo-break__row { grid-template-columns: 1fr 1fr 1fr; }
.photo-break--n3.photo-break--wide    .photo-break__cell { aspect-ratio: 3 / 4; }
.photo-break--n3.photo-break--classic .photo-break__cell { aspect-ratio: 1 / 1; }

.photo-break__cell {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    transition: transform 1.2s var(--ease-out, ease-out);
    will-change: transform;
}
a.photo-break__cell:hover {
    transform: scale(1.025);
}
a.photo-break__cell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55));
    z-index: 1;
    transition: background 0.4s ease;
}
a.photo-break__cell:hover::before {
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.7));
}

.photo-break__label {
    position: relative;
    z-index: 2;
    padding: clamp(1rem, 2vw, 1.75rem);
    font-size: clamp(0.95rem, 1.4vw, 1.125rem);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}

/* Solo with overlay */
.photo-break__cell.has-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15,15,15,0.78) 0%, rgba(15,15,15,0.35) 60%, rgba(15,15,15,0.6) 100%);
    z-index: 1;
}
.photo-break__overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
.photo-break__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1;
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
    color: #fff;
    margin: 0;
    max-width: 22ch;
    text-wrap: balance;
}
.photo-break__sub {
    font-size: var(--fs-lead);
    color: rgba(255,255,255,0.82);
    margin: 0.5rem 0 0;
    max-width: 50ch;
    line-height: var(--lh-base);
}

@media (max-width: 720px) {
    .photo-break--n3 .photo-break__row { grid-template-columns: 1fr; }
    .photo-break--n3 .photo-break__cell { aspect-ratio: 4 / 3; }
    .photo-break--n2 .photo-break__row { grid-template-columns: 1fr; }
    .photo-break--n2 .photo-break__cell { aspect-ratio: 4 / 3; }
    .photo-break__title { font-size: clamp(2rem, 8vw, 3rem); }
}

/* ========================================================== */
/* 30. CONTACT PAGE                                            */
/* ========================================================== */
.contact-hero {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(1rem, 2vw, 1.5rem);
    background: var(--color-bg-cream-soft);
    border-bottom: 1px solid var(--color-border-soft);
}
.contact-hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.05;
    margin: 0.5rem 0 1rem;
    max-width: 24ch;
    text-wrap: balance;
}
.contact-hero__sub {
    font-size: var(--fs-lead);
    color: var(--color-text-soft);
    line-height: var(--lh-base);
    max-width: 56ch;
    margin: 0;
}
.contact-section {
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 7vw, 6rem);
    background: var(--color-bg-cream-soft);
}
.contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

/* ============ Form ============ */
.contact-form-wrap {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
.ads-form { display: flex; flex-direction: column; gap: 1.25rem; }
.ads-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 560px) {
    .ads-form__row { grid-template-columns: 1fr; }
}
.ads-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.ads-form__label {
    font-size: 0.85rem;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.ads-form__label em {
    color: var(--color-error);
    font-style: normal;
    margin-left: 0.15rem;
}
.ads-form input[type="text"],
.ads-form input[type="email"],
.ads-form input[type="tel"],
.ads-form select,
.ads-form textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    padding: 0.75rem 0.9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}
.ads-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23666' stroke-width='1.5'><path d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 12px 8px;
    padding-right: 2.25rem;
}
.ads-form textarea {
    resize: vertical;
    min-height: 100px;
    line-height: var(--lh-base);
}
.ads-form input:focus,
.ads-form select:focus,
.ads-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(61, 123, 76, 0.15);
}
.ads-form input::placeholder,
.ads-form textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}
.ads-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ads-form__footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.ads-form__submit {
    position: relative;
    align-self: flex-start;
    padding: 0.95rem 1.75rem;
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, opacity 0.2s;
}
.ads-form__submit:hover { transform: translateY(-1px); }
.ads-form__submit:disabled,
.ads-form__submit.is-loading {
    cursor: wait;
    opacity: 0.75;
    transform: none;
}
.ads-form__submit.is-loading .ads-form__submit-label { opacity: 0; }
.ads-form__spinner {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s;
}
.ads-form__submit.is-loading .ads-form__spinner {
    opacity: 1;
    animation: ads-spin 0.7s linear infinite;
}
@keyframes ads-spin { to { transform: rotate(360deg); } }

.ads-form__legal {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0;
    max-width: 60ch;
}
.ads-form__legal strong { color: var(--color-text); }

.ads-form__status {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    line-height: var(--lh-base);
}
.ads-form__status:empty { display: none; }
.ads-form__status.is-success {
    color: var(--color-primary);
    background: var(--color-primary-tint);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm, 6px);
    border-left: 3px solid var(--color-primary);
}
.ads-form__status.is-success a { color: var(--color-primary-hover); }
.ads-form__status.is-error {
    color: var(--color-error);
    background: rgba(196,69,69,0.06);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm, 6px);
    border-left: 3px solid var(--color-error);
}
.ads-form__status.is-loading { color: var(--color-text-muted); }

/* Required note + inline field errors + no-JS / native-submit banner */
.ads-form__reqnote {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}
.ads-form__reqnote span { color: var(--color-error); }
.ads-form input[aria-invalid="true"],
.ads-form select[aria-invalid="true"],
.ads-form textarea[aria-invalid="true"] {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(196,69,69,0.12);
}
.ads-form__error {
    display: block;
    margin-top: 0.35rem;
    color: var(--color-error);
    font-size: 0.8rem;
    line-height: 1.4;
}
.ads-form__banner {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.95rem;
    line-height: var(--lh-base);
}
.ads-form__banner.is-success {
    color: var(--color-primary);
    background: var(--color-primary-tint);
    border-left: 3px solid var(--color-primary);
}
.ads-form__banner.is-error {
    color: var(--color-error);
    background: rgba(196,69,69,0.06);
    border-left: 3px solid var(--color-error);
}
@media (prefers-reduced-motion: reduce) {
    .ads-form__submit.is-loading .ads-form__spinner { animation: none; }
}

/* ============ Side panel ============ */
.contact-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 6rem;
}
.contact-card {
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--radius-md);
}
.contact-card .eyebrow {
    color: rgba(255,255,255,0.55);
    margin-bottom: 0.75rem;
}
.contact-card__phone {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
    color: #fff;
    text-decoration: none;
    margin-bottom: 1rem;
}
.contact-card__phone:hover { color: var(--c-green-200); }
.contact-card__hours {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: rgba(255,255,255,0.78);
    font-size: 0.9rem;
}
.contact-card__hours strong { color: #fff; }
.contact-card__address {
    color: rgba(255,255,255,0.65);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.contact-card__address strong { color: #fff; }

.contact-trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
}
.contact-trust li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.contact-trust strong {
    font-size: 0.95rem;
    color: var(--color-text);
}
.contact-trust span {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.contact-promise {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
}
.contact-promise h3 {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    font-weight: var(--fw-semibold);
}
.contact-promise ol {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--color-text-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}

@media (max-width: 880px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-side { position: static; }
}

/* ========================================================== */
/* 31. SINGLE-PORTFOLIO                                        */
/* ========================================================== */
.portfolio-single { background: var(--color-bg); }
.port-hero {
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.25rem);
    background: var(--color-bg-cream-soft);
}
.port-hero__breadcrumb {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.8rem; color: var(--color-text-muted);
    margin-bottom: 0.75rem; letter-spacing: -0.01em;
}
.port-hero__breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.port-hero__breadcrumb a:hover { color: var(--color-primary); }
.port-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: var(--fw-bold);
    line-height: 1.05;
    letter-spacing: var(--tracking-tight);
    margin: 0 0 1.5rem;
    max-width: 22ch;
    text-wrap: balance;
}
.port-hero__meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    list-style: none; margin: 0; padding: 0;
    border-top: 1px solid var(--color-border-soft);
    padding-top: 1.25rem;
}
.port-hero__meta li { display: flex; flex-direction: column; gap: 0.15rem; }
.port-hero__meta span { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.port-hero__meta strong { font-size: 0.95rem; color: var(--color-text); font-weight: var(--fw-semibold); }
@media (max-width: 720px) { .port-hero__meta { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }

.port-hero-img {
    width: 100vw; margin-left: calc(50% - 50vw);
    background: var(--c-stone-950);
}
.port-hero-img img {
    display: block; width: 100%; height: auto;
    max-height: 80vh; object-fit: cover;
}

.port-body { padding: clamp(3rem, 5vw, 5rem) 0; }
.port-body__grid {
    display: grid; grid-template-columns: 1.5fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
.port-body__lead {
    font-size: var(--fs-lead);
    color: var(--color-text);
    line-height: var(--lh-base);
    font-weight: var(--fw-medium);
    margin: 1rem 0 2rem;
    max-width: 60ch;
}
.port-body__content { max-width: 60ch; line-height: var(--lh-base); color: var(--color-text-soft); }
.port-body__content p { margin: 0 0 1.25rem; }

.port-facts {
    background: var(--color-bg-cream-soft);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    position: sticky; top: 6rem;
}
.port-facts__title { margin: 0 0 1.25rem; font-size: 1rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.port-facts__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.port-facts__list li { display: flex; flex-direction: column; gap: 0.1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--color-border-soft); }
.port-facts__list li:last-child { border-bottom: none; padding-bottom: 0; }
.port-facts__list span { font-size: 0.7rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.port-facts__list strong { font-size: 0.92rem; color: var(--color-text); font-weight: var(--fw-semibold); }
.port-facts__cta { display: inline-flex; width: 100%; }
.port-facts__note { color: var(--color-text-muted); font-size: 0.78rem; margin-top: 0.85rem; line-height: 1.4; }
@media (max-width: 880px) {
    .port-body__grid { grid-template-columns: 1fr; }
    .port-facts { position: static; }
}

.port-gallery { padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--color-bg-cream-soft); }
.port-gallery__title { margin: 0.5rem 0 1.5rem; }
.port-gallery__grid {
    width: 100vw; margin-left: calc(50% - 50vw);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    background: var(--c-stone-950);
}
.port-gallery__item {
    aspect-ratio: 4 / 3;
    background-size: cover; background-position: center;
    transition: transform 0.6s var(--ease-out, ease-out);
}
.port-gallery__item:hover { transform: scale(1.025); z-index: 2; position: relative; }
@media (max-width: 880px) { .port-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .port-gallery__grid { grid-template-columns: 1fr; } }

.port-mid-cta {
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
    padding: clamp(3rem, 5vw, 4.5rem) 0;
}
.port-mid-cta__inner {
    display: grid; grid-template-columns: 1.5fr 1fr;
    gap: 2rem; align-items: center;
}
.port-mid-cta h2 { color: #fff; margin: 0.5rem 0 0.75rem; max-width: 22ch; }
.port-mid-cta p { color: rgba(255,255,255,0.72); font-size: var(--fs-lead); max-width: 50ch; margin: 0; }
.port-mid-cta__btns { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.btn--outline-light {
    background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.4);
    padding: 0.85rem 1.5rem; border-radius: var(--radius-sm, 6px);
    text-decoration: none; font-weight: var(--fw-semibold); transition: all 0.2s;
}
.btn--outline-light:hover { background: rgba(255,255,255,0.08); border-color: #fff; color: #fff; }
@media (max-width: 720px) { .port-mid-cta__inner { grid-template-columns: 1fr; } }

.port-related { padding: clamp(3rem, 5vw, 5rem) 0; }
.port-related__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.port-related__card {
    aspect-ratio: 4 / 3;
    background-size: cover; background-position: center;
    border-radius: var(--radius-md);
    position: relative; overflow: hidden;
    text-decoration: none; color: #fff;
    display: flex; align-items: flex-end;
    transition: transform 0.4s var(--ease-out, ease-out);
}
.port-related__card::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7));
    transition: background 0.3s;
}
.port-related__card:hover { transform: translateY(-3px); }
.port-related__card:hover::before { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.8)); }
.port-related__caption { position: relative; z-index: 2; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.15rem; }
.port-related__caption strong { font-size: 1.05rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.port-related__caption small { font-size: 0.85rem; opacity: 0.8; }
@media (max-width: 880px) { .port-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .port-related__grid { grid-template-columns: 1fr; } }

/* ========================================================== */
/* 32. SINGLE SERVICE-AREA + GEO-PAGE shared                   */
/* ========================================================== */
.sa-hero {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
    background: var(--color-bg-cream-soft);
    border-bottom: 1px solid var(--color-border-soft);
}
.sa-hero__crumbs {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem;
    font-size: 0.8rem; color: var(--color-text-muted);
    margin-bottom: 1rem;
}
.sa-hero__crumbs a { color: var(--color-text-muted); text-decoration: none; }
.sa-hero__crumbs a:hover { color: var(--color-primary); }
.sa-hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    line-height: 1.05;
    letter-spacing: var(--tracking-tight);
    margin: 0.5rem 0 1.25rem;
    max-width: 22ch;
    text-wrap: balance;
}
.sa-hero__sub {
    font-size: var(--fs-lead);
    color: var(--color-text-soft);
    line-height: var(--lh-base);
    max-width: 60ch;
    margin: 0 0 1.75rem;
}
.sa-hero__cta {
    display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.75rem;
}
.sa-hero__facts {
    list-style: none; margin: 0; padding: 1.25rem 0 0;
    border-top: 1px solid var(--color-border-soft);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
}
.sa-hero__facts li { display: flex; flex-direction: column; gap: 0.15rem; }
.sa-hero__facts strong { font-size: 1.0625rem; font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.sa-hero__facts span { font-size: 0.78rem; color: var(--color-text-muted); }
@media (max-width: 720px) { .sa-hero__facts { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }

.sa-story { padding: clamp(3rem, 5vw, 5rem) 0; }
.sa-story__grid {
    display: grid; grid-template-columns: 1.5fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
.sa-story__body {
    margin-top: 1.25rem;
    color: var(--color-text-soft);
    line-height: var(--lh-base);
    max-width: 60ch;
}
.sa-story__body p { margin: 0 0 1.25rem; }
.sa-pin {
    background: var(--color-bg-cream-soft);
    border-radius: var(--radius-md);
    padding: 2rem 1.75rem;
    display: flex; flex-direction: column; gap: 0.4rem;
    text-align: center;
    position: sticky; top: 6rem;
}
.sa-pin__icon {
    width: 56px; height: 56px;
    margin: 0 auto 0.75rem;
    color: var(--color-primary);
}
.sa-pin__icon svg { width: 100%; height: 100%; }
.sa-pin__map-embed {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    margin: 0 0 1.1rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-cream-soft);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.sa-pin__map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.sa-pin strong { font-size: 1.125rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.sa-pin small { color: var(--color-text-muted); font-size: 0.85rem; }
.sa-pin__map {
    margin-top: 0.75rem; color: var(--color-primary);
    font-weight: var(--fw-semibold); font-size: 0.85rem;
    text-decoration: none;
}
.sa-pin__map:hover { color: var(--color-primary-hover); }
@media (max-width: 880px) {
    .sa-story__grid { grid-template-columns: 1fr; }
    .sa-pin { position: static; }
}

.sa-services { padding: clamp(3rem, 5vw, 5rem) 0; }
.sa-services__grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.sa-service-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.5rem 1.25rem;
    text-decoration: none; color: var(--color-text);
    display: flex; flex-direction: column; gap: 0.65rem;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.sa-service-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary);
    box-shadow: 0 6px 24px rgba(61,123,76,0.08);
}
.sa-service-card h3 { margin: 0; font-size: 1.0625rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; line-height: 1.3; }
.sa-service-card p { margin: 0; color: var(--color-text-soft); font-size: 0.9rem; line-height: 1.5; }
.sa-service-card__cta { color: var(--color-primary); font-weight: var(--fw-semibold); font-size: 0.85rem; margin-top: auto; padding-top: 0.5rem; }
@media (max-width: 880px) { .sa-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sa-services__grid { grid-template-columns: 1fr; } }

.sa-projects { padding: clamp(3rem, 5vw, 5rem) 0; }
.sa-projects__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.sa-project-card {
    aspect-ratio: 4 / 3;
    background-size: cover; background-position: center;
    border-radius: var(--radius-md);
    position: relative; overflow: hidden;
    text-decoration: none; color: #fff;
    display: flex; align-items: flex-end;
    transition: transform 0.4s var(--ease-out, ease-out);
}
.sa-project-card::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7));
    transition: background 0.3s;
}
.sa-project-card:hover { transform: translateY(-3px); }
.sa-project-card:hover::before { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.8)); }
.sa-project-card__caption { position: relative; z-index: 2; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.1rem; }
.sa-project-card__caption strong { font-size: 1rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.sa-project-card__caption small { font-size: 0.8rem; opacity: 0.85; }
@media (max-width: 880px) { .sa-projects__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sa-projects__grid { grid-template-columns: 1fr; } }

/* ========================================================== */
/* 33. GEO-CROSS — same-service-other-towns / other-services   */
/* ========================================================== */
.geo-cross { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.geo-cross__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.geo-cross__card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    text-decoration: none; color: var(--color-text);
    display: flex; flex-direction: column; gap: 0.2rem;
    transition: border-color 0.2s, transform 0.2s;
}
.geo-cross__card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}
.geo-cross__card strong { font-size: 0.95rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.geo-cross__card small { font-size: 0.78rem; color: var(--color-text-muted); }
@media (max-width: 880px) { .geo-cross__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .geo-cross__grid { grid-template-columns: 1fr; } }

/* ========================================================== */
/* 34. ARCHIVE HERO (shared)                                   */
/* ========================================================== */
.archive-hero {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
    background: var(--color-bg-cream-soft);
    border-bottom: 1px solid var(--color-border-soft);
}
.archive-hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    line-height: 1.05;
    letter-spacing: var(--tracking-tight);
    margin: 0.5rem 0 1.25rem;
    max-width: 24ch;
    text-wrap: balance;
}
.archive-hero__sub {
    font-size: var(--fs-lead);
    color: var(--color-text-soft);
    line-height: var(--lh-base);
    max-width: 60ch;
    margin: 0;
}

/* ========================================================== */
/* 35. ARCHIVE-PORTFOLIO                                       */
/* ========================================================== */
.archive-filter {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.archive-filter__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: var(--fw-medium);
    letter-spacing: -0.005em;
    transition: all 0.2s;
}
.archive-filter__chip span {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: var(--fw-regular);
}
.archive-filter__chip:hover { border-color: var(--color-text); }
.archive-filter__chip.is-active {
    background: var(--color-text);
    color: #fff;
    border-color: var(--color-text);
}
.archive-filter__chip.is-active span { color: rgba(255,255,255,0.7); }

.archive-grid-wrap { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.archive-grid {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 clamp(0.5rem, 1.5vw, 1.25rem);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(160px, 17vw, 240px);
    grid-auto-flow: dense;
    gap: 0.75rem;
}
.archive-grid__item {
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: flex-end;
    transition: transform 0.5s var(--ease-out, cubic-bezier(0.2,0.9,0.3,1));
    grid-row: span 2;  /* default = 1 col × 2 rows ≈ square */
    will-change: transform;
}
.archive-grid__item::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.85));
    transition: background 0.4s, opacity 0.4s;
    z-index: 1;
}
.archive-grid__item::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(20, 28, 22, 0);
    transition: background 0.4s;
    z-index: 1;
}
.archive-grid__item:hover { transform: translateY(-4px) scale(1.005); }
.archive-grid__item:hover::before { background: linear-gradient(180deg, transparent 15%, rgba(0,0,0,0.92)); }
.archive-grid__item:hover::after { background: rgba(20, 28, 22, 0.06); }

/* Variants — placement rhythm */
.archive-grid__item--feature { grid-column: span 2; grid-row: span 4; }   /* big square hero, top-left */
.archive-grid__item--wide    { grid-column: span 2; grid-row: span 2; }   /* 16:9 wide block */
.archive-grid__item--tall    { grid-column: span 1; grid-row: span 4; }   /* portrait card */
.archive-grid__item--short   { grid-column: span 1; grid-row: span 2; }   /* default-equivalent (square) */

/* Caption + reveal */
.archive-grid__caption {
    position: relative; z-index: 2;
    padding: 1.25rem 1.35rem;
    display: flex; flex-direction: column; gap: 0.2rem;
    transform: translateY(8px);
    transition: transform 0.4s var(--ease-out, ease-out);
    width: 100%;
}
.archive-grid__item:hover .archive-grid__caption { transform: translateY(0); }
.archive-grid__cat {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--c-green-200);
    font-weight: var(--fw-semibold);
    margin-bottom: 0.15rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.archive-grid__caption strong {
    font-size: 1.0625rem;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.archive-grid__caption small {
    font-size: 0.78rem;
    opacity: 0.88;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Feature card gets bigger title */
.archive-grid__item--feature .archive-grid__caption strong { font-size: 1.5rem; }
.archive-grid__item--feature .archive-grid__caption { padding: 1.75rem 2rem; }
.archive-grid__item--feature .archive-grid__cat { font-size: 0.72rem; }

/* "View" arrow chip — appears on hover */
.archive-grid__caption::after {
    content: "View →";
    position: absolute;
    top: 50%;
    right: 1.35rem;
    transform: translateY(-50%);
    background: var(--color-primary);
    color: #fff;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.005em;
    opacity: 0;
    transition: opacity 0.3s;
}
.archive-grid__item:hover .archive-grid__caption::after {
    opacity: 1;
}

.archive-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1rem;
    padding: 4rem 0;
}
.archive-empty a { color: var(--color-primary); }

@media (max-width: 1024px) {
    .archive-grid { grid-template-columns: repeat(3, 1fr); }
    .archive-grid__item--feature { grid-column: span 2; grid-row: span 3; }
    .archive-grid__item--wide    { grid-column: span 2; grid-row: span 2; }
    .archive-grid__item--tall    { grid-row: span 3; }
}
@media (max-width: 720px) {
    .archive-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
    .archive-grid__item--feature { grid-column: span 2; grid-row: span 3; }
    .archive-grid__item--wide    { grid-column: span 2; grid-row: span 2; }
    .archive-grid__item--tall    { grid-column: span 1; grid-row: span 3; }
    .archive-grid__item--short   { grid-row: span 2; }
}
@media (max-width: 480px) {
    .archive-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
    .archive-grid__item,
    .archive-grid__item--feature,
    .archive-grid__item--wide,
    .archive-grid__item--tall,
    .archive-grid__item--short { grid-column: span 1; grid-row: span 1; aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
    .archive-grid { grid-template-columns: 1fr; }
    .archive-grid__item--large { grid-column: span 1; aspect-ratio: 4 / 3; }
}

/* ========================================================== */
/* 36. ARCHIVE-SERVICE                                         */
/* ========================================================== */
.services-archive { padding: clamp(3rem, 5vw, 5rem) 0; }
.service-row {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem, 4vw, 4rem);
    padding: clamp(2.5rem, 4vw, 4rem) 0;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
}
.service-row:last-child { border-bottom: none; }
.service-row--reverse .service-row__copy { order: 2; }
.service-row__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.05;
    margin: 0.5rem 0 1rem;
    max-width: 16ch;
    text-wrap: balance;
}
.service-row__lead {
    font-size: var(--fs-lead);
    color: var(--color-text-soft);
    line-height: var(--lh-base);
    margin: 0 0 1.5rem;
    max-width: 50ch;
}
.service-row__facts {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--color-border-soft);
    border-bottom: 1px solid var(--color-border-soft);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
}
.service-row__facts li { display: flex; flex-direction: column; gap: 0.15rem; }
.service-row__facts span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-text-muted);
}
.service-row__facts strong { font-size: 0.92rem; font-weight: var(--fw-semibold); }
.service-row__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.service-row__img {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: block;
}
.service-row__img::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.6));
    z-index: 1;
}
.service-row__img-tag {
    position: absolute; bottom: 1rem; left: 1rem; right: 1rem;
    z-index: 2; color: #fff;
    display: flex; flex-direction: column; gap: 0.1rem;
}
.service-row__img-tag span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    opacity: 0.85;
}
.service-row__img-tag strong { font-size: 0.95rem; font-weight: var(--fw-semibold); }
@media (max-width: 880px) {
    .service-row { grid-template-columns: 1fr; }
    .service-row--reverse .service-row__copy { order: 0; }
}

/* ========================================================== */
/* 37. ARCHIVE-SERVICE_AREA (suburbs grid)                     */
/* ========================================================== */
.suburbs-archive { padding: clamp(3rem, 5vw, 5rem) 0; }
.suburbs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.suburb-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem 1.5rem;
    text-decoration: none;
    color: var(--color-text);
    display: flex; flex-direction: column; gap: 0.85rem;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.suburb-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(61,123,76,0.08);
}
.suburb-card__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
}
.suburb-card__name {
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.suburb-card__years {
    font-size: 0.7rem;
    color: var(--c-green-700, #14532a);
    font-weight: var(--fw-semibold);
    background: var(--color-primary-tint);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-pill);
    flex: 0 0 auto;
}
.suburb-card__meta {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.4rem;
    font-size: 0.8rem; color: var(--color-text-soft);
}
.suburb-card__meta li {
    display: flex; justify-content: space-between; gap: 0.5rem;
    border-bottom: 1px solid var(--color-border-soft);
    padding-bottom: 0.4rem;
}
.suburb-card__meta li:last-child { border-bottom: none; padding-bottom: 0; }
.suburb-card__meta span { color: var(--color-text-muted); }
.suburb-card__meta strong { font-weight: var(--fw-semibold); color: var(--color-text); }
.suburb-card__cta {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: var(--fw-semibold);
    margin-top: auto;
    padding-top: 0.5rem;
}
@media (max-width: 1024px) { .suburbs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .suburbs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .suburbs-grid { grid-template-columns: 1fr; } }

/* ========================================================== */
/* 38. PAGE-ABOUT                                              */
/* ========================================================== */
.about-hero {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
    background: var(--color-bg-cream-soft);
}
.about-hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
.about-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.05;
    margin: 0.75rem 0 1.25rem;
    max-width: 20ch;
    text-wrap: balance;
}
.about-hero__sub {
    font-size: var(--fs-lead);
    color: var(--color-text-soft);
    line-height: var(--lh-base);
    margin: 0 0 1.75rem;
    max-width: 50ch;
}
.about-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.about-hero__images {
    position: relative;
    aspect-ratio: 4 / 5;
}
.about-hero__img-main {
    width: 80%;
    height: 80%;
    object-fit: cover;
    border-radius: var(--radius-md);
    position: absolute;
    top: 0; left: 0;
}
.about-hero__img-accent {
    width: 55%;
    height: 50%;
    object-fit: cover;
    border-radius: var(--radius-md);
    position: absolute;
    bottom: 0; right: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
@media (max-width: 880px) {
    .about-hero__grid { grid-template-columns: 1fr; }
    .about-hero__images { aspect-ratio: 16 / 10; max-width: 600px; margin: 0 auto; }
}

.about-story { padding: clamp(3rem, 5vw, 5rem) 0; }
.about-story__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
.about-story__title { margin: 0.5rem 0 1.5rem; max-width: 16ch; }
.about-story__body {
    color: var(--color-text-soft);
    line-height: var(--lh-base);
    max-width: 60ch;
}
.about-story__body p { margin: 0 0 1.25rem; }
.about-story__quotes { display: flex; flex-direction: column; gap: 1.5rem; }
.about-story__quotes blockquote {
    background: var(--color-bg-cream-soft);
    border-left: 3px solid var(--color-primary);
    padding: 1.25rem 1.5rem;
    margin: 0;
    border-radius: 4px;
}
.about-story__quotes blockquote p {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text);
    font-style: italic;
}
.about-story__quotes cite {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-style: normal;
    font-weight: var(--fw-semibold);
}
@media (max-width: 880px) { .about-story__grid { grid-template-columns: 1fr; } }

.about-pillars { padding: clamp(3rem, 5vw, 5rem) 0; }
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.pillar-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 2rem 1.75rem;
    display: flex; flex-direction: column; gap: 0.75rem;
}
.pillar-card h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
}
.pillar-card p {
    margin: 0;
    color: var(--color-text-soft);
    line-height: 1.55;
    font-size: 0.92rem;
}
@media (max-width: 880px) { .pillars-grid { grid-template-columns: 1fr; } }

.about-team { padding: clamp(3rem, 5vw, 5rem) 0; }
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.team-card { display: flex; flex-direction: column; gap: 0.5rem; }
.team-card__photo {
    aspect-ratio: 1 / 1;
    background-size: cover; background-position: center;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-cream-soft);
}
.team-card__photo--initials {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--color-primary);
    background: var(--color-primary-tint);
    font-weight: var(--fw-bold);
}
.team-card h3 { margin: 0.5rem 0 0; font-size: 1.05rem; font-weight: var(--fw-semibold); }
.team-card__role {
    font-size: 0.8rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: var(--fw-semibold);
}
.team-card__bio {
    margin: 0.5rem 0 0;
    color: var(--color-text-soft);
    font-size: 0.85rem;
    line-height: 1.5;
}
@media (max-width: 880px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; } }

/* ========================================================== */
/* 39. HEADER NAV LIST + MOBILE DRAWER                         */
/* ========================================================== */
.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
    align-items: center;
}
.site-nav__list a {
    color: #EFEAE0;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: var(--fw-medium);
    transition: color 0.2s;
}
.site-nav__list a:hover { color: #6FA572; }

.site-nav__toggle {
    display: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.site-nav__toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #EFEAE0;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}
.site-nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.site-nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav-mobile {
    position: fixed;
    /* Sit BELOW the sticky header (z-index:100) instead of inset:0 under it — the
     * drawer used to tuck under the header bar on mobile. z-index:99 keeps the
     * header's logo + close (X) toggle on top and clickable. */
    top: var(--header-height);
    left: 0; right: 0; bottom: 0;
    background: var(--color-bg);
    z-index: 99;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease-out, cubic-bezier(0.2,0.9,0.3,1));
    overflow-y: auto;
    overscroll-behavior: contain;
}
.site-nav-mobile.is-open { transform: translateX(0); }
.site-nav-mobile__inner {
    padding: 2rem 1.5rem;
    display: flex; flex-direction: column; gap: 1.5rem;
}
.site-nav-mobile__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0;
}
.site-nav-mobile__list li { border-bottom: 1px solid var(--color-border); }
.site-nav-mobile__list a {
    display: block;
    padding: 1rem 0;
    color: var(--color-text);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
}
.site-nav-mobile__list a:hover { color: var(--color-primary); }
.site-nav-mobile__cta {
    display: flex; flex-direction: column; gap: 0.75rem;
    padding-top: 1.5rem;
}
.site-nav-mobile__cta .btn { display: flex; align-items: center; justify-content: center; width: 100%; }

@media (max-width: 880px) {
    .site-nav,
    .header-cta { display: none; }
    .site-nav__toggle { display: flex; }
}

/* ========================================================== */
/* 40. BLOG ARCHIVE                                            */
/* ========================================================== */
.blog-archive { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 7vw, 6rem); }
.blog-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.blog-archive__item {
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s var(--ease-out, ease-out), border-color 0.2s, box-shadow 0.3s;
}
.blog-archive__item:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: 0 10px 32px rgba(0,0,0,0.08);
}
.blog-archive__img {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--color-bg-cream);
}
.blog-archive__body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.blog-archive__date {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: var(--fw-semibold);
}
.blog-archive__body h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.blog-archive__body p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--color-text-soft);
    line-height: 1.55;
}
.blog-archive__cta {
    margin-top: auto;
    padding-top: 0.5rem;
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: var(--fw-semibold);
}

/* Feature card — first post takes full width on desktop */
.blog-archive__item--feature {
    grid-column: span 3;
    flex-direction: row;
    align-items: stretch;
}
.blog-archive__item--feature .blog-archive__img {
    flex: 1.2;
    aspect-ratio: auto;
    min-height: 300px;
}
.blog-archive__item--feature .blog-archive__body {
    flex: 1;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    justify-content: center;
}
.blog-archive__item--feature .blog-archive__body h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.15;
}
.blog-archive__item--feature .blog-archive__body p {
    font-size: 1rem;
    max-width: 60ch;
}

@media (max-width: 880px) {
    .blog-archive__grid { grid-template-columns: repeat(2, 1fr); }
    .blog-archive__item--feature {
        grid-column: span 2;
        flex-direction: column;
    }
    .blog-archive__item--feature .blog-archive__img { aspect-ratio: 16 / 9; min-height: auto; }
}
@media (max-width: 560px) {
    .blog-archive__grid { grid-template-columns: 1fr; }
    .blog-archive__item--feature { grid-column: span 1; }
}

/* ========================================================== */
/* 41. SINGLE BLOG POST                                        */
/* ========================================================== */
.blog-single { background: var(--color-bg); }
.blog-hero {
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.25rem);
    background: var(--color-bg-cream-soft);
}
.blog-hero__crumbs {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.8rem; color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}
.blog-hero__crumbs a { color: var(--color-text-muted); text-decoration: none; }
.blog-hero__crumbs a:hover { color: var(--color-primary); }
.blog-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    margin: 0 0 1.5rem;
    max-width: 22ch;
    text-wrap: balance;
}
.blog-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    list-style: none; margin: 0; padding: 1.25rem 0 0;
    border-top: 1px solid var(--color-border-soft);
}
.blog-hero__meta li { display: flex; flex-direction: column; gap: 0.15rem; }
.blog-hero__meta span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-text-muted);
}
.blog-hero__meta strong { font-size: 0.9rem; font-weight: var(--fw-semibold); }

.blog-hero-img {
    width: 100vw; margin-left: calc(50% - 50vw);
    background: var(--c-stone-950);
}
.blog-hero-img img {
    display: block; width: 100%; height: auto;
    max-height: 60vh; object-fit: cover;
}

.blog-body { padding: clamp(3rem, 5vw, 5rem) 0; }
.blog-body__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
.blog-body__lead {
    font-size: var(--fs-lead);
    color: var(--color-text);
    line-height: var(--lh-base);
    font-weight: var(--fw-medium);
    margin: 0 0 2rem;
    max-width: 60ch;
}
.blog-body__content {
    max-width: 64ch;
    color: var(--color-text);
    line-height: 1.7;
    font-size: 1.05rem;
}
.blog-body__content p { margin: 0 0 1.25rem; }
.blog-body__content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.2vw, 1.75rem);
    font-weight: var(--fw-bold);
    margin: 2.25rem 0 0.85rem;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.blog-body__content h3 {
    font-size: 1.15rem;
    font-weight: var(--fw-semibold);
    margin: 1.75rem 0 0.5rem;
    letter-spacing: -0.005em;
}
.blog-body__content ul,
.blog-body__content ol {
    margin: 0 0 1.5rem 1.5rem;
    padding: 0;
    color: var(--color-text-soft);
}
.blog-body__content li { margin-bottom: 0.5rem; line-height: 1.65; }
.blog-body__content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: rgba(61,123,76,0.4);
    text-underline-offset: 2px;
}
.blog-body__content a:hover { text-decoration-color: currentColor; }
.blog-body__content strong { color: var(--color-text); font-weight: var(--fw-semibold); }
.blog-body__content blockquote {
    border-left: 3px solid var(--color-primary);
    padding: 0.5rem 1.25rem;
    margin: 1.5rem 0;
    color: var(--color-text-soft);
    font-style: italic;
}

.blog-body__aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 6rem;
}
.blog-aside-card {
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
    padding: 1.75rem;
    border-radius: var(--radius-md);
}
.blog-aside-card .eyebrow { color: rgba(255,255,255,0.55); margin-bottom: 0.5rem; }
.blog-aside-card h3 {
    color: #fff;
    margin: 0 0 0.65rem;
    font-size: 1.1rem;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
}
.blog-aside-card p {
    color: rgba(255,255,255,0.72);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
}
.blog-aside-card__note {
    color: rgba(255,255,255,0.6);
    font-size: 0.78rem;
    margin: 0.85rem 0 0;
}
.blog-aside-card__note a { color: #fff; }

.blog-aside-list {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.75rem;
}
.blog-aside-list h3 {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    font-weight: var(--fw-semibold);
}
.blog-aside-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.blog-aside-list a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.4;
    display: block;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--color-border-soft);
    transition: color 0.2s;
}
.blog-aside-list li:last-child a { border-bottom: none; padding-bottom: 0; }
.blog-aside-list a:hover { color: var(--color-primary); }

@media (max-width: 880px) {
    .blog-body__grid { grid-template-columns: 1fr; }
    .blog-body__aside { position: static; }
}

/* ========================================================== */
/* 42. RELATED POSTS                                           */
/* ========================================================== */
.blog-related { padding: clamp(3rem, 5vw, 5rem) 0; }
.blog-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.blog-card {
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.3s, border-color 0.2s;
}
.blog-card:hover { transform: translateY(-3px); border-color: var(--color-primary); }
.blog-card__img {
    aspect-ratio: 16 / 9;
    background-size: cover; background-position: center;
}
.blog-card__body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; }
.blog-card__body small {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: var(--fw-semibold);
}
.blog-card__body strong { font-size: 0.95rem; font-weight: var(--fw-semibold); line-height: 1.35; letter-spacing: -0.01em; }
@media (max-width: 880px) { .blog-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .blog-related__grid { grid-template-columns: 1fr; } }

/* ========================================================== */
/* 43. ERROR / 404 PAGE                                        */
/* ========================================================== */
.error-page {
    padding: clamp(4rem, 8vw, 6rem) 0;
    background: var(--color-bg-cream-soft);
}
.error-page__head { text-align: center; max-width: 700px; margin: 0 auto; }
.error-page__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: var(--fw-bold);
    line-height: 1.05;
    letter-spacing: var(--tracking-tight);
    margin: 0.5rem 0 1rem;
    text-wrap: balance;
}
.error-page__sub {
    font-size: var(--fs-lead);
    color: var(--color-text-soft);
    line-height: var(--lh-base);
    margin: 0 auto 1.75rem;
    max-width: 56ch;
}
.error-page__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
.error-page__projects { margin-top: clamp(3rem, 5vw, 5rem); }
.error-page__projects .eyebrow { display: block; text-align: center; margin-bottom: 1.5rem; }
.error-page__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.error-card {
    aspect-ratio: 4 / 5;
    background-size: cover; background-position: center;
    border-radius: var(--radius-md);
    position: relative; overflow: hidden;
    text-decoration: none; color: #fff;
    display: flex; align-items: flex-end;
    transition: transform 0.3s var(--ease-out, ease-out);
}
.error-card::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.78));
}
.error-card:hover { transform: translateY(-3px); }
.error-card__caption {
    position: relative; z-index: 2;
    padding: 1rem 1.25rem;
    display: flex; flex-direction: column; gap: 0.15rem;
}
.error-card__caption small {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    opacity: 0.85;
}
.error-card__caption strong { font-size: 0.95rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
@media (max-width: 880px) { .error-page__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .error-page__grid { grid-template-columns: 1fr; } }

/* ========================================================== */
/* 44. SEARCH RESULTS                                          */
/* ========================================================== */
.search-form-large {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.5rem;
    max-width: 600px;
}
.search-form-large input[type="search"] {
    flex: 1;
    font-size: 1rem;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font-body);
}
.search-form-large input[type="search"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(61,123,76,0.15);
}

.search-results { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 7vw, 6rem); }
.search-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.search-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.3s;
}
.search-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}
.search-item__img {
    background-size: cover; background-position: center;
    background-color: var(--color-bg-cream);
    text-decoration: none;
    display: block;
}
.search-item__body {
    padding: 1.25rem 1.5rem 1.25rem 0;
    display: flex; flex-direction: column; gap: 0.4rem;
    min-width: 0;
}
.search-item__body small {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-text-muted);
    font-weight: var(--fw-semibold);
}
.search-item__body h2 { margin: 0; font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.01em; }
.search-item__body h2 a { color: var(--color-text); text-decoration: none; }
.search-item__body h2 a:hover { color: var(--color-primary); }
.search-item__body p { margin: 0; color: var(--color-text-soft); font-size: 0.92rem; line-height: 1.5; }
.search-item__cta {
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: var(--fw-semibold);
    margin-top: auto;
    padding-top: 0.5rem;
    text-decoration: none;
}
@media (max-width: 720px) {
    .search-item { grid-template-columns: 1fr; }
    .search-item__img { aspect-ratio: 16 / 9; }
    .search-item__body { padding: 1.25rem 1.5rem; }
}

.search-empty {
    background: var(--color-bg-cream-soft);
    border-radius: var(--radius-md);
    padding: 2rem 2.5rem;
    color: var(--color-text-soft);
    line-height: 1.6;
}
.search-empty p { margin: 0 0 1rem; }
.search-empty ul {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.search-empty a { color: var(--color-primary); }

/* ========================================================== */
/* 45. HOVER FIX — cards with caption over image gradient      */
/* Global a:hover turns text green; these cards have white     */
/* text on dark gradient and must stay white on hover.         */
/* ========================================================== */
.portfolio-strip__card:hover,
.portfolio-strip__card:hover *,
.archive-grid__item:hover,
.archive-grid__item:hover *,
.bento-proj1:hover,
.bento-proj1:hover *,
.bento-proj2:hover,
.bento-proj2:hover *,
.sa-project-card:hover,
.sa-project-card:hover *,
.port-related__card:hover,
.port-related__card:hover *,
.error-card:hover,
.error-card:hover *,
.project-image:hover,
.project-image:hover *,
.expertise-image:hover,
.expertise-image:hover * {
    color: #fff;
}
/* But preserve the accent eyebrow / category tag color */
.archive-grid__item:hover .archive-grid__cat {
    color: var(--c-green-200);
}

/* ========================================================== */
/* MOBILE TUNING (2026-05-11)                                  */
/* Fixes: service tiles 2->1 col, hero video letterbox,        */
/* excessive section padding on phones.                        */
/* ========================================================== */

@media (max-width: 720px) {
    /* Vertical rhythm: 8rem desktop padding feels desert-empty on phone */
    .section { padding: var(--space-xl) 0; }
    .hero    { padding: var(--space-lg) 0 var(--space-xl); }
}

@media (max-width: 540px) {
    /* Service tiles read better 1-per-row at this width */
    .expertise { grid-template-columns: 1fr; }
    .expertise > * { min-height: auto; }
    .expertise-card { padding: var(--space-md); }
}

@media (max-width: 480px) {
    /* Hero video slot becomes 4:5 (taller) so vertical Short fills width.
       Pair with iframe height:200% so YouTube fits-by-width then top/bottom
       overflow is cropped by slot overflow:hidden -- no more black side bars. */
    .hero__images { grid-template-rows: auto 200px; }
    .hero__image--main {
        aspect-ratio: 4 / 5;
        height: auto;
    }
    .hero__video iframe {
        top: -50%;
        left: 0;
        width: 100%;
        height: 200%;
    }
}

/* ========================================================== */
/* GENERIC ARCHIVE TEMPLATE (taxonomy + CPT archives)         */
/* Used by archive.php fallback — service-category etc.       */
/* ========================================================== */

.archive-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}
.archive-list-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.archive-list-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.archive-list-card__thumb {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: var(--color-bg-cream);
}
.archive-list-card__body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}
.archive-list-card__type {
    font-size: 0.7rem;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
}
.archive-list-card__title {
    font-size: 1.125rem;
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--color-text);
}
.archive-list-card__excerpt {
    font-size: var(--fs-small);
    color: var(--color-text-soft);
    margin: 0;
    line-height: var(--lh-base);
}
.archive-list-card__loc {
    margin-top: auto;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.archive-list-card--no-thumb { background: var(--color-bg-cream-soft); }

.archive-empty-state {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-xl) var(--padding-x);
}
.archive-empty-state__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-md);
}
.archive-empty-state__copy {
    color: var(--color-text-soft);
    font-size: var(--fs-lead);
    margin-bottom: var(--space-lg);
}
.archive-empty-state__cta {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.archive-pagination {
    margin-top: var(--space-xl);
    display: flex;
    justify-content: center;
}
.archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    font-weight: var(--fw-semibold);
    margin: 0 0.2rem;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.archive-pagination .page-numbers.current,
.archive-pagination .page-numbers:hover {
    background: var(--color-primary);
    color: var(--color-text-on-dark);
    border-color: var(--color-primary);
}

/* ========================================================== */
/* /process/ PAGE                                              */
/* ========================================================== */

.process-hero {
    padding: var(--space-2xl) 0 var(--space-xl);
    background: var(--color-bg);
}
.process-hero .sa-hero__crumbs { margin-bottom: var(--space-md); }
.process-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4.5vw, 4rem);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tighter);
    max-width: 20ch;
    margin-bottom: var(--space-md);
}
.process-hero__sub {
    font-size: var(--fs-lead);
    max-width: 58ch;
    color: var(--color-text-soft);
    margin-bottom: var(--space-lg);
}
.process-hero__cta {
    display: flex; gap: var(--space-sm); flex-wrap: wrap;
}

.process-phases {
    padding: var(--space-2xl) 0;
}
.process-phase {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: center;
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--color-border-soft);
}
.process-phase:first-child { border-top: 0; padding-top: 0; }
.process-phase--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.process-phase--reverse .process-phase__copy  { order: 2; }
.process-phase--reverse .process-phase__photo { order: 1; }

.process-phase__copy {
    max-width: 52ch;
}
.process-phase__num {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: var(--fw-black);
    line-height: 1;
    color: var(--color-primary);
    letter-spacing: var(--tracking-tighter);
    margin-bottom: var(--space-sm);
}
.process-phase__duration {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-md);
}
.process-phase__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-md);
}
.process-phase__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.process-phase__bullets li {
    position: relative;
    padding-left: 1.4em;
    font-size: 1rem;
    line-height: var(--lh-base);
    color: var(--color-text-soft);
}
.process-phase__bullets li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}
.process-phase__bullets li strong { color: var(--color-text); }
.process-phase__photo {
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    background-color: var(--color-bg-cream);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 48px rgba(0,0,0,0.08);
}

@media (max-width: 880px) {
    .process-phase,
    .process-phase--reverse {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: var(--space-lg) 0;
    }
    .process-phase--reverse .process-phase__copy { order: 2; }
    .process-phase--reverse .process-phase__photo { order: 1; }
    .process-phase__photo { aspect-ratio: 4 / 3; max-height: 360px; }
}

/* ========================================================== */
/* OWNER / FOUNDER CARD (home about section, can be reused)   */
/* ========================================================== */
.owner-card {
    display: grid;
    grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: center;
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: 0 8px 28px rgba(0,0,0,0.06);
}
.owner-card__photo {
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center top;
    background-color: var(--color-bg-cream);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.owner-card__copy { display: flex; flex-direction: column; gap: 0.4rem; }
.owner-card__name {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: var(--fw-black);
    margin: 0.25rem 0 0;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-tight);
}
.owner-card__role {
    font-size: 0.85rem;
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.owner-card__quote {
    font-style: italic;
    color: var(--color-text-soft);
    font-size: 1rem;
    line-height: var(--lh-base);
    margin: 0.5rem 0 0;
    border-left: 3px solid var(--color-primary);
    padding-left: var(--space-md);
}

@media (max-width: 640px) {
    .owner-card {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .owner-card__photo { aspect-ratio: 4 / 3; max-height: 360px; }
}

/* ========================================================== */
/* BEFORE/AFTER TAGS — beefed up for clearer visual signal     */
/* ========================================================== */
.ba__tag {
    top: 0.85rem;
    padding: 0.5rem 0.95rem;
    font-size: 0.85rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.ba__tag--before {
    background: rgba(15, 20, 17, 0.82);
    color: #fff;
}
.ba__tag--after {
    background: var(--color-primary);
    color: #fff;
}
@media (max-width: 540px) {
    .ba__tag { font-size: 0.72rem; padding: 0.4rem 0.75rem; }
}

/* ========================================================== */
/* HERO OWNER PILL — face of the business in hero (Dima)       */
/* ========================================================== */
.hero-pill--owner {
    /* Override --rating positioning; this one sits bottom-right of hero images */
    top: auto;
    left: auto;
    bottom: 1.25rem;
    right: 1.25rem;
    max-width: 230px;
    padding: 0.45rem 0.85rem 0.45rem 0.45rem;
}
.hero-pill--owner .hero-pill__photo {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-size: cover;
    background-position: center top;
    background-color: var(--color-bg-cream);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    border: 2px solid #fff;
}
.hero-pill--owner .hero-pill__copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.hero-pill--owner .hero-pill__copy strong {
    font-size: 0.85rem;
    font-weight: var(--fw-bold);
    line-height: 1.1;
    color: var(--color-text);
}
.hero-pill--owner .hero-pill__copy small {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    line-height: 1.2;
}

@media (max-width: 880px) {
    .hero-pill--owner {
        bottom: 0.75rem;
        right: 0.75rem;
        max-width: 200px;
        padding: 0.35rem 0.6rem 0.35rem 0.35rem;
    }
    .hero-pill--owner .hero-pill__photo { width: 36px; height: 36px; }
    .hero-pill--owner .hero-pill__copy strong { font-size: 0.75rem; }
    .hero-pill--owner .hero-pill__copy small { font-size: 0.65rem; }
}
@media (max-width: 480px) {
    /* On smallest phones the rating + owner + stamp + pulse fight for space —
       move rating pill to top-right and owner pill stays bottom-right. */
    .hero-pill--rating { display: none; }
}

/* ========================================================== */
/* HERO OWNER SLOT — replaces hero__image--small with a portrait
/* card carrying name + role tag at the bottom.                */
/* ========================================================== */
.hero__image--owner {
    position: relative;
    background: var(--color-bg-cream);
}
.hero__image--owner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;  /* portrait composition — keep face in frame */
}
.hero__image-tag {
    position: absolute;
    left: 0.85rem;
    bottom: 0.85rem;
    right: 0.85rem;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(6px);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.hero__image-tag strong {
    font-size: 0.95rem;
    font-weight: var(--fw-bold);
    color: var(--color-text);
    line-height: 1.1;
}
.hero__image-tag small {
    font-size: 0.72rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--fw-semibold);
}

@media (max-width: 480px) {
    .hero__image-tag {
        left: 0.6rem;
        bottom: 0.6rem;
        right: 0.6rem;
        padding: 0.4rem 0.6rem;
    }
    .hero__image-tag strong { font-size: 0.85rem; }
    .hero__image-tag small  { font-size: 0.65rem; }
}

/* Hide the now-duplicate hero-pill--owner (still in CSS from previous step) */
.hero-pill--owner { display: none; }

/* ============================================================ */
/* ===== HOME V2 — Onepack-inspired editorial premium ========= */
/* ============================================================ */

.v2 {
    --v2-bg:        #FAF6EE;
    --v2-bg-white:  #FFFFFF;
    --v2-bg-dark:   #1A3825;
    --v2-bg-cream:  #F2E9D6;
    --v2-text:      #1A1A1A;
    --v2-text-mid:  #4A4A4A;
    --v2-text-soft: #6B6B6B;
    --v2-border:    #E8DFCE;
    --v2-accent:    #3D7B4C;
    --v2-accent-2:  #5B9C6E;

    color: var(--v2-text);
    background: var(--v2-bg);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
}

.v2 * { box-sizing: border-box; }

.v2-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp( 1.25rem, 4vw, 3rem );
}

/* --- Typography ----------------------------------------------- */
.v2-display {
    font-family: "Inter Tight", "Inter", sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.0;
    margin: 0;
    color: var(--v2-text);
}
.v2-display--xl { font-size: clamp( 44px, 7.5vw, 112px ); line-height: 0.95; }
.v2-display--lg { font-size: clamp( 32px, 4.5vw, 64px ); line-height: 1.02; }
.v2-display--md { font-size: clamp( 24px, 3vw, 40px ); line-height: 1.1; }

.v2-eyebrow {
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v2-accent);
    margin-bottom: 1.25rem;
}
.v2-eyebrow--light { color: var(--v2-accent-2); }

/* --- Buttons -------------------------------------------------- */
.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter Tight", sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    padding: 0.95rem 1.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.v2-btn--primary {
    background: var(--v2-text);
    color: var(--v2-bg);
}
.v2-btn--primary:hover { background: var(--v2-accent); color: #fff; transform: translateY(-1px); }
.v2-btn--ghost {
    background: transparent;
    color: var(--v2-text);
    border-color: var(--v2-text);
}
.v2-btn--ghost:hover { background: var(--v2-text); color: var(--v2-bg); }
.v2-btn--ghost-on-dark { color: #fff; border-color: rgba(255,255,255,0.4); }
.v2-btn--ghost-on-dark:hover { background: #fff; color: var(--v2-bg-dark); border-color: #fff; }
.v2-btn--lg { padding: 1.15rem 2rem; font-size: 16px; }

.v2-cta-row {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.v2-cta-row--center { justify-content: center; }

/* --- Arrow link ----------------------------------------------- */
.v2-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: "Inter Tight", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--v2-text);
    text-decoration: none;
    transition: gap .25s ease, color .25s ease;
}
.v2-arrow-link:hover { gap: 0.75rem; color: var(--v2-accent); }
.v2-arrow-link--lg { font-size: 16px; }

/* --- Section heads -------------------------------------------- */
.v2-section-head { max-width: 720px; margin-bottom: 3.5rem; }
.v2-section-head--row {
    display: flex;
    gap: 3rem;
    justify-content: space-between;
    align-items: flex-end;
    max-width: none;
    flex-wrap: wrap;
}
.v2-section-head__sub {
    font-size: 17px;
    line-height: 1.55;
    color: var(--v2-text-mid);
    max-width: 420px;
    margin: 0;
}

/* --- Reveal animation ---------------------------------------- */
[data-anim-in] {
    opacity: 0;
    transform: translateY( 32px );
    transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
[data-anim-in].is-visible { opacity: 1; transform: translateY( 0 ); }
@media (prefers-reduced-motion: reduce) {
    [data-anim-in] { opacity: 1; transform: none; transition: none; }
}

/* ===== HERO =================================================== */
.v2-hero {
    background: var(--v2-bg);
    padding: clamp( 4rem, 8vw, 7rem ) 0 clamp( 3rem, 6vw, 5rem );
    border-bottom: 1px solid var(--v2-border);
}
.v2-hero__inner {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp( 1.25rem, 4vw, 3rem );
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp( 2rem, 5vw, 4.5rem );
    align-items: center;
}
.v2-hero__copy { max-width: 640px; }
.v2-hero__lede {
    font-size: clamp( 16px, 1.4vw, 19px );
    line-height: 1.55;
    color: var(--v2-text-mid);
    margin: 1.75rem 0 0;
    max-width: 560px;
}
.v2-hero__badges {
    display: flex;
    gap: 0.75rem 2rem;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 2.5rem 0 0;
    font-family: "Inter Tight", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v2-text-mid);
}
.v2-hero__badges li { position: relative; }
.v2-hero__badges li + li::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 50%;
    width: 4px; height: 4px;
    border-radius: 999px;
    background: var(--v2-text-soft);
    transform: translateY( -50% );
}
.v2-hero__visual {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    overflow: hidden;
    background: var(--v2-bg-cream);
}
.v2-hero__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.v2-hero__stat-overlay {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    background: rgba(26,56,37, 0.92);
    backdrop-filter: blur( 10px );
    color: #fff;
    padding: 1.1rem 1.4rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.18);
}
.v2-hero__stat-overlay strong {
    font-family: "Inter Tight", sans-serif;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}
.v2-hero__stat-overlay span {
    font-size: 13px;
    line-height: 1.3;
    color: rgba(255,255,255,0.85);
}

/* ===== TRUST PILLARS ========================================= */
.v2-pillars {
    background: var(--v2-bg-white);
    padding: clamp( 4rem, 7vw, 6rem ) 0;
}
.v2-pillars__grid {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    gap: 0;
    border-top: 1px solid var(--v2-border);
    border-bottom: 1px solid var(--v2-border);
}
.v2-pillar {
    padding: 2.25rem 1.75rem 2.25rem 0;
    border-right: 1px solid var(--v2-border);
}
.v2-pillar:last-child { border-right: none; }
.v2-pillar__title {
    font-family: "Inter Tight", sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
}
.v2-pillar__desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--v2-text-mid);
}

/* ===== EXPERTISE ============================================= */
.v2-expertise {
    background: var(--v2-bg);
    padding: clamp( 5rem, 8vw, 7rem ) 0;
}
.v2-expertise__grid {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: 0;
    border-top: 1px solid var(--v2-border);
    border-left: 1px solid var(--v2-border);
}
.v2-expertise__card {
    display: flex;
    flex-direction: column;
    padding: 2.5rem 2rem;
    border-right: 1px solid var(--v2-border);
    border-bottom: 1px solid var(--v2-border);
    color: var(--v2-text);
    text-decoration: none;
    background: transparent;
    transition: background .35s ease;
    position: relative;
    min-height: 280px;
}
.v2-expertise__card:hover { background: var(--v2-bg-cream); }
.v2-expertise__icon {
    color: var(--v2-accent);
    margin-bottom: 1.25rem;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.v2-expertise__icon svg { width: 56px; height: 56px; }
.v2-expertise__name {
    font-family: "Inter Tight", sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.6rem;
}
.v2-expertise__desc {
    font-size: 15px;
    line-height: 1.55;
    color: var(--v2-text-mid);
    margin: 0 0 1.5rem;
    flex-grow: 1;
}
.v2-expertise__card .v2-arrow-link {
    font-size: 13px;
    color: var(--v2-accent);
}

/* ===== STATS ================================================= */
.v2-stats {
    background: var(--v2-bg-dark);
    color: #fff;
    padding: clamp( 4rem, 7vw, 6rem ) 0;
}
.v2-stats__grid {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    gap: 0;
}
.v2-stat {
    padding: 1rem 1.5rem;
    border-right: 1px solid rgba( 255,255,255, 0.15 );
}
.v2-stat:last-child { border-right: none; }
.v2-stat strong {
    display: block;
    font-family: "Inter Tight", sans-serif;
    font-size: clamp( 48px, 6vw, 88px );
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.95;
    margin-bottom: 0.6rem;
}
.v2-stat strong small {
    font-size: 0.5em;
    font-weight: 700;
    color: var(--v2-accent-2);
}
.v2-stat span {
    font-size: 14px;
    color: rgba(255,255,255, 0.7);
    letter-spacing: 0.02em;
}

/* ===== PROJECTS ============================================== */
.v2-projects {
    background: var(--v2-bg-white);
    padding: clamp( 5rem, 8vw, 7rem ) 0;
}
.v2-projects__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.25rem;
}
.v2-project {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    text-decoration: none;
    color: var(--v2-text);
    background: var(--v2-bg-cream);
    aspect-ratio: 4 / 3;
}
.v2-project--feature {
    grid-row: span 2;
    aspect-ratio: auto;
    min-height: 100%;
}
.v2-project__photo {
    position: absolute; inset: 0;
}
.v2-project__photo img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.v2-project:hover .v2-project__photo img { transform: scale( 1.05 ); }
.v2-project__meta {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1.5rem;
    color: #fff;
    background: linear-gradient( to top, rgba(0,0,0,0.85), rgba(0,0,0,0) );
}
.v2-project__loc {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255, 0.85);
    margin-bottom: 0.4rem;
}
.v2-project__title {
    font-family: "Inter Tight", sans-serif;
    font-size: clamp( 18px, 1.6vw, 22px );
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
    color: #fff;
}
.v2-project__cat {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255, 0.7);
    margin-top: 0.3rem;
}
.v2-project--feature .v2-project__title { font-size: clamp( 24px, 2.2vw, 32px ); }

/* ===== MARQUEE =============================================== */
.v2-marquee {
    background: var(--v2-bg-dark);
    color: #fff;
    overflow: hidden;
    padding: 2rem 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.v2-marquee__track {
    display: flex;
    gap: 2.5rem;
    white-space: nowrap;
    align-items: center;
    animation: v2-marquee-scroll 35s linear infinite;
    will-change: transform;
}
.v2-marquee__item {
    font-family: "Inter Tight", sans-serif;
    font-size: clamp( 32px, 4vw, 56px );
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}
.v2-marquee__sep {
    color: var(--v2-accent-2);
    font-size: clamp( 24px, 3vw, 40px );
    flex-shrink: 0;
}
@keyframes v2-marquee-scroll {
    from { transform: translateX( 0 ); }
    to   { transform: translateX( -50% ); }
}

/* ===== OWNERS ================================================ */
.v2-owners {
    background: var(--v2-bg);
    padding: clamp( 5rem, 8vw, 7rem ) 0;
}
.v2-owners__grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
    gap: 2rem;
    max-width: 960px;
}
.v2-owner { text-align: left; }
.v2-owner__photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    background-color: var(--v2-bg-cream);
    margin-bottom: 1.25rem;
    transition: transform .5s ease;
}
.v2-owner__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter Tight", sans-serif;
    font-size: 88px;
    font-weight: 800;
    color: var(--v2-accent);
    background: var(--v2-bg-cream);
}
.v2-owner:hover .v2-owner__photo { transform: translateY( -4px ); }
.v2-owner__name {
    font-family: "Inter Tight", sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 0.3rem;
}
.v2-owner__role {
    font-size: 14px;
    color: var(--v2-text-mid);
    letter-spacing: 0.04em;
}

/* ===== PROCESS =============================================== */
.v2-process {
    background: var(--v2-bg-white);
    padding: clamp( 5rem, 8vw, 7rem ) 0;
}
.v2-process__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: 0;
    border-top: 1px solid var(--v2-border);
}
.v2-process__step {
    padding: 2.5rem 2rem 2.5rem 0;
    border-right: 1px solid var(--v2-border);
    border-bottom: 1px solid var(--v2-border);
}
.v2-process__step:last-child { border-right: none; }
.v2-process__num {
    display: inline-block;
    font-family: "Inter Tight", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-accent);
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}
.v2-process__step h3 {
    font-family: "Inter Tight", sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
    color: var(--v2-text);
}
.v2-process__step p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--v2-text-mid);
}

/* ===== ARTICLES ============================================== */
.v2-articles {
    background: var(--v2-bg);
    padding: clamp( 5rem, 8vw, 7rem ) 0;
}
.v2-articles__grid {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: 1.5rem;
}
.v2-article {
    color: var(--v2-text);
    text-decoration: none;
    display: block;
    transition: transform .35s ease;
}
.v2-article:hover { transform: translateY( -4px ); }
.v2-article__photo {
    width: 100%;
    aspect-ratio: 16 / 11;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    background-color: var(--v2-bg-cream);
    margin-bottom: 1.25rem;
}
.v2-article__meta {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-accent);
    margin-bottom: 0.5rem;
}
.v2-article__title {
    font-family: "Inter Tight", sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0;
}

/* ===== FINAL CTA ============================================= */
.v2-final-cta {
    background: var(--v2-bg-dark);
    color: #fff;
    padding: clamp( 6rem, 10vw, 9rem ) 0;
    text-align: center;
}
.v2-final-cta .v2-display { color: #fff; }
.v2-final-cta__sub {
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255,255,255, 0.75);
    margin: 1.5rem auto 0;
    max-width: 580px;
}
.v2-final-cta .v2-btn--primary { background: #fff; color: var(--v2-bg-dark); }
.v2-final-cta .v2-btn--primary:hover { background: var(--v2-accent-2); color: var(--v2-bg-dark); }

/* ===== MOBILE ================================================ */
@media ( max-width: 960px ) {
    .v2-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .v2-hero__visual { aspect-ratio: 5 / 4; }
    .v2-pillars__grid,
    .v2-expertise__grid,
    .v2-projects__grid,
    .v2-process__list,
    .v2-articles__grid,
    .v2-stats__grid {
        grid-template-columns: repeat( 2, 1fr );
    }
    .v2-projects__grid { grid-template-rows: auto; }
    .v2-project--feature { grid-row: span 1; aspect-ratio: 4 / 3; }
    .v2-section-head--row { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}
@media ( max-width: 600px ) {
    .v2-pillars__grid,
    .v2-expertise__grid,
    .v2-projects__grid,
    .v2-process__list,
    .v2-articles__grid {
        grid-template-columns: 1fr;
    }
    .v2-stats__grid { grid-template-columns: repeat( 2, 1fr ); }
    .v2-pillar,
    .v2-process__step { border-right: none; padding-right: 0; }
    .v2-expertise__card { min-height: 220px; }
}

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */

/* =================================================================== */
/* ===== V3.1 HOME — Awwwards-style cinematic ====================== */
/* =================================================================== */

.v3 {
    --v3-bg:        #FAF6EE;
    --v3-bg-white:  #FFFFFF;
    --v3-bg-cream:  #F2E9D6;
    --v3-bg-dark:   #0E1F15;
    --v3-text:      #141414;
    --v3-text-mid:  #4A4A4A;
    --v3-text-soft: #595959;
    --v3-border:    #E8DFCE;
    --v3-accent:    #1a7e31;
    --v3-accent-2:  #1c9538;
    --v3-gold:      #C9A461;

    color: var(--v3-text);
    background: var(--v3-bg);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
    line-height: 1.55;
    cursor: auto;
}
.v3 *, .v3 *::before, .v3 *::after { box-sizing: border-box; }

.v3-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp( 1.25rem, 4vw, 3rem );
}

/* === Typography ============================================ */
.v3-display {
    font-family: "Inter Tight", "Inter", sans-serif;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.98;
    margin: 0;
    color: var(--v3-text);
}
.v3-display--xl { font-size: clamp( 60px, 11vw, 180px ); line-height: 0.9; }
.v3-display--lg { font-size: clamp( 36px, 5.2vw, 84px ); line-height: 1.0; }
.v3-display--md { font-size: clamp( 24px, 3vw, 40px ); line-height: 1.1; }

.v3-eyebrow {
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--v3-accent);
    margin-bottom: 1rem;
}
.v3-eyebrow--on-dark { color: var(--v3-accent-2); }

.v3-tag {
    font-family: "Inter Tight", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v3-text-mid);
}
.v3-tag--right { text-align: right; }

/* === Section numbering "01/06" ============================ */
.v3-numbered {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: clamp( 2rem, 5vw, 4rem );
    font-family: "Inter Tight", sans-serif;
}
.v3-num {
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--v3-accent);
}
.v3-num small {
    font-weight: 500; opacity: 0.55;
    margin-left: 0.15rem;
}
.v3-num-line {
    flex-shrink: 0;
    width: clamp( 40px, 8vw, 80px );
    height: 1px;
    background: currentColor;
    opacity: 0.3;
}
.v3-num-label {
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--v3-text-soft);
}
.v3-numbered--on-dark .v3-num { color: var(--v3-accent-2); }
.v3-numbered--on-dark .v3-num-label { color: rgba( 255,255,255, 0.7 ); }
.v3-numbered--on-dark .v3-num-line { background: rgba( 255,255,255, 0.4 ); }

/* === Buttons =============================================== */
.v3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter Tight", sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 1rem 1.75rem;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .25s, color .25s, border-color .25s;
    will-change: transform;
}
.v3-btn--primary {
    background: linear-gradient(105deg, var(--v3-accent) 0%, var(--v3-accent) 50%, var(--v3-text) 50.1%, var(--v3-text) 100%);
    background-size: 220% 100%;
    background-position: 100% 0;
    color: var(--v3-bg);
    position: relative;
    overflow: hidden;
    transition: background-position 0.55s cubic-bezier(0.65, 0, 0.35, 1), color 0.25s ease;
}
.v3-btn--primary:hover {
    background-position: 0 0;
}
.v3-btn--ghost  { background: transparent; color: var(--v3-text); border-color: var(--v3-text); }
.v3-btn--ghost:hover { background: var(--v3-text); color: var(--v3-bg); }
.v3-btn--white {
    background-color: #fff;
    background-image: url("/wp-content/themes/ads/assets/btn-mask.png?v=brand");
    background-size: 7100% 100%;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    color: var(--v3-bg-dark);
    transition: background-color 0.35s ease 0.35s, color 0.3s ease 0.4s;
}
.v3-btn--white:hover {
    background-color: var(--v3-accent);
    color: #fff;
    animation: v3-btn-ink 0.7s steps(70) forwards;
}
@keyframes v3-btn-ink {
    from { background-position: 100% 50%; }
    to   { background-position: 0% 50%; }
}
@keyframes v3-btn-ink-soft {
    from { background-position: 100% 50%; }
    to   { background-position: 62% 50%; }
}
.v3-btn--ghost-light { background: transparent; color: var(--v3-text); border-color: rgba(0,0,0,0.18); }
.v3-btn--ghost-light:hover { background: var(--v3-text); color: #fff; border-color: var(--v3-text); }
/* On dark sections (final CTA, hero photo overlay), ghost-light needs white text */
.v3-final .v3-btn--ghost-light,
.v3-stats .v3-btn--ghost-light {
    color: #fff;
    border-color: rgba( 255, 255, 255, 0.35 );
}
.v3-final .v3-btn--ghost-light:hover,
.v3-stats .v3-btn--ghost-light:hover {
    background: #fff; color: var(--v3-bg-dark); border-color: #fff;
}
.v3-btn--lg { padding: 1.2rem 2.1rem; font-size: 16px; }

.v3-cta-row { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 2.25rem; align-items: center; }
.v3-cta-row--center { justify-content: center; }

/* === Arrow link =========================================== */
.v3-arrow {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: "Inter Tight", sans-serif; font-weight: 600;
    font-size: 14px; color: var(--v3-text); text-decoration: none;
    transition: gap .25s, color .25s;
}
.v3-arrow:hover { gap: 0.75rem; color: var(--v3-accent); }
.v3-arrow--lg { font-size: 15.5px; }

/* === Section heads ======================================== */
.v3-section-head { max-width: 920px; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.v3-section-head--row {
    display: flex; gap: 2.5rem; justify-content: space-between;
    align-items: flex-end; max-width: none; flex-wrap: wrap;
}
.v3-section-head__sub {
    font-size: 16px; line-height: 1.6; color: var(--v3-text-mid);
    max-width: 420px; margin: 0;
}

/* === Reveal animation ===================================== */
[data-anim] {
    opacity: 0; transform: translateY( 32px );
    transition: opacity .9s cubic-bezier(.2,.7,.2,1),
                transform .9s cubic-bezier(.2,.7,.2,1);
}
[data-anim].is-in { opacity: 1; transform: translateY( 0 ); }
/* Resilience: if JS is disabled/blocked the reveal never fires — show content
   instead of leaving it permanently invisible. The no-js→js swap runs
   synchronously in <head>, so JS-enabled visitors still get the animation. */
html.no-js [data-anim],
html.no-js [data-anim-in],
html.no-js [data-tilt-in] { opacity: 1; transform: none; }
html.no-js [data-curtain] { clip-path: none; }

/* Stagger word reveal */
[data-stagger] { opacity: 1; }
.v3-stag {
    display: inline-block;
    overflow: hidden;
    line-height: inherit;
    vertical-align: top;
    /* Breathing room so tall letters (b, d, h, l, t) AND descenders (g, y, p, j)
     * don't get clipped by overflow:hidden. Negative margin cancels it so the
     * heading's line-box doesn't grow / shift the next line. */
    padding: 0.08em 0 0.12em;
    margin: -0.08em 0 -0.12em;
}
.v3-stag i {
    display: inline-block;
    font-style: inherit;
    transform: translateY( 115% ) skewY( 6deg );
    transition: transform .95s cubic-bezier(.2,.8,.2,1);
}

/* Accent word — green highlight inside hero/section titles */
.v3-accent-word {
    color: var(--v3-accent);
    font-style: inherit;
    white-space: nowrap;
}
[data-stagger].is-staggered .v3-stag i {
    transform: translateY( 0 ) skewY( 0 );
}
/* Stagger delay via :nth-child cascading */
[data-stagger].is-staggered .v3-stag:nth-child(1) i { transition-delay: 0.04s; }
[data-stagger].is-staggered .v3-stag:nth-child(2) i { transition-delay: 0.08s; }
[data-stagger].is-staggered .v3-stag:nth-child(3) i { transition-delay: 0.12s; }
[data-stagger].is-staggered .v3-stag:nth-child(4) i { transition-delay: 0.16s; }
[data-stagger].is-staggered .v3-stag:nth-child(5) i { transition-delay: 0.2s; }
[data-stagger].is-staggered .v3-stag:nth-child(6) i { transition-delay: 0.24s; }
[data-stagger].is-staggered .v3-stag:nth-child(7) i { transition-delay: 0.28s; }
[data-stagger].is-staggered .v3-stag:nth-child(8) i { transition-delay: 0.32s; }
[data-stagger].is-staggered .v3-stag:nth-child(9) i { transition-delay: 0.36s; }
[data-stagger].is-staggered .v3-stag:nth-child(n+10) i { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    [data-anim] { opacity: 1; transform: none; transition: none; }
    .v3-stag i { transform: none; transition: none; }
}

/* === Tilt + Magnet smoothing =============================== */
[data-tilt], [data-tilt-soft] {
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
    transform-style: preserve-3d;
    will-change: transform;
}
.v3-magnet { transition: background .25s, color .25s, border-color .25s, transform .35s cubic-bezier(.2,.7,.2,1); }

/* === Section-specific entrance animations ====================== */

/* CURTAIN reveal — clip-path animates from closed to open (top→bottom) */
[data-curtain] {
    clip-path: inset( 100% 0 0 0 );
    transition: clip-path 1.35s cubic-bezier(.7,0,.2,1);
    will-change: clip-path;
}
[data-curtain].is-in {
    clip-path: inset( 0 0 0 0 );
}

/* TILT-IN entrance for service cards (rotate from -side, fade in) */
[data-tilt-in] {
    opacity: 0;
    transform: perspective( 1000px ) rotateY( -22deg ) translateY( 30px );
    transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1);
    transform-origin: left center;
}
[data-tilt-in].is-in {
    opacity: 1;
    transform: perspective( 1000px ) rotateY( 0 ) translateY( 0 );
}

/* CHAR-by-char reveal (for massive final CTA title) */
.v3-char {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    line-height: inherit;
}
.v3-char i {
    display: inline-block;
    font-style: inherit;
    transform: translateY( 105% );
    transition: transform 0.85s cubic-bezier(.2,.8,.2,1);
}
[data-split-chars].is-chars-in .v3-char i {
    transform: translateY( 0 );
}

/* FLIP-on-hover for article cards */
.v3-articles .v3-article {
    perspective: 1200px;
}
.v3-articles .v3-article__photo {
    transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
    transform-origin: center bottom;
}
.v3-articles .v3-article:hover .v3-article__photo {
    transform: rotateY( -6deg ) rotateX( 3deg ) translateZ( 18px );
    box-shadow: 0 30px 60px -25px rgba( 0, 0, 0, 0.3 );
}

/* DRIFT — review cards subtly follow mouse (set via JS via --dx/--dy) */
.v3-reviews__grid[data-drift] .v3-review {
    transition: transform .9s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}
.v3-reviews__grid[data-drift] .v3-review {
    transform: translate3d( var( --dx, 0 ), var( --dy, 0 ), 0 );
}

/* === Counter span — force font inheritance (FOUT fix) ===== */
[data-count] {
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
}
.v3-stat strong > *,
.v3-hero__meta strong > * {
    font: inherit;
    color: inherit;
}

/* =================================================================== */
/* ===== HERO — full viewport cinematic ============================ */
/* =================================================================== */
.v3-hero {
    position: relative;
    min-height: 100vh;
    background: var(--v3-bg);
    overflow: hidden;
    padding: 5rem 0 2rem;
    display: flex;
    flex-direction: column;
}
.v3-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--v3-bg-cream);
}
.v3-hero__bg-video {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate( -50%, -50% );
    /* 16:9 cover formula — both dimensions scale to cover any aspect */
    width: max( 100%, calc( 100vh * 16 / 9 ) );
    height: max( 100%, calc( 100vw * 9 / 16 ) );
    min-width: 100%; min-height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.v3-hero__bg-overlay {
    position: absolute; inset: 0;
    /* Light top — video shows through prominently. Heavier bottom to keep CTAs readable. */
    background:
        linear-gradient( 180deg,
            rgba( 250, 246, 238, 0.18 ) 0%,
            rgba( 250, 246, 238, 0.32 ) 35%,
            rgba( 250, 246, 238, 0.62 ) 70%,
            rgba( 250, 246, 238, 0.85 ) 100%
        );
}
@media (prefers-reduced-motion: reduce) {
    .v3-hero__bg-video { display: none; }
}
.v3-hero__inner {
    position: relative; z-index: 2;
    flex-grow: 1;
    display: flex; flex-direction: column;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 2rem;
}
.v3-hero__top {
    display: flex; justify-content: space-between; gap: 2rem;
    align-items: flex-start;
    margin-bottom: clamp( 2rem, 4vw, 4rem );
}
.v3-hero__title {
    font-family: "Inter Tight", sans-serif;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.88;
    font-size: clamp( 48px, 9.5vw, 168px );
    margin: 0;
    color: var(--v3-text);
    max-width: 14ch;
}
.v3-hero__bottom {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp( 2rem, 5vw, 5rem );
    align-items: end;
    margin-top: clamp( 2rem, 4vw, 4rem );
}
.v3-hero__lede p {
    font-size: clamp( 17px, 1.6vw, 22px );
    line-height: 1.45;
    margin: 0 0 1.5rem;
    color: var(--v3-text);
    max-width: 28ch;
    font-weight: 500;
}
.v3-hero__meta {
    display: flex; align-items: center; gap: 1.25rem;
    border-top: 1px solid var(--v3-text);
    padding-top: 1.25rem;
    max-width: 320px;
    margin-left: auto;
}
.v3-hero__meta strong {
    font-family: "Inter Tight", sans-serif;
    font-size: clamp( 56px, 6vw, 96px );
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.9;
    color: var(--v3-text);
}
.v3-hero__meta > span {
    font-size: 13px;
    color: var(--v3-text-mid);
    line-height: 1.4;
}
.v3-hero__meta strong span {
    font: inherit; color: inherit;
}

.v3-scroll-cue {
    position: absolute;
    top: 50%; right: clamp( 1.25rem, 3vw, 2.5rem );
    transform: translateY( -50% );
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    text-decoration: none;
    color: var(--v3-text);
    font-family: "Inter Tight", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.55;
    animation: v3-bob 2.4s ease-in-out infinite;
}
.v3-scroll-cue:hover { opacity: 1; }
.v3-scroll-cue svg { width: 12px; height: 30px; }
@media (max-width: 960px) { .v3-scroll-cue { display: none; } }
.v3-scroll-cue svg { display: block; }
@keyframes v3-bob {
    0%, 100% { transform: translateY( 0 ); }
    50%      { transform: translateY( 6px ); }
}

/* =================================================================== */
/* ===== HERO V2 — framed split ==================================== */
/* =================================================================== */
.v3-hero--v2 {
    min-height: auto;
    padding: clamp( 4rem, 7vw, 7rem ) 0 clamp( 3rem, 5vw, 5rem );
    background: var(--v3-bg);
    display: block;
    overflow: visible;
}
.v3-hero-v2__top {
    display: flex; justify-content: space-between; gap: 2rem;
    margin-bottom: clamp( 2rem, 4vw, 3.5rem );
}
.v3-hero-v2__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp( 2.5rem, 6vw, 6rem );
    align-items: center;
}
.v3-hero-v2__copy { max-width: 640px; }

.v3-hero-v2__title {
    font-family: "Inter Tight", sans-serif;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.94;
    font-size: clamp( 40px, 6.5vw, 96px );
    margin: 0;
    color: var(--v3-text);
}
.v3-hero-v2__lede {
    font-size: clamp( 17px, 1.4vw, 20px );
    line-height: 1.5;
    margin: 1.75rem 0 0;
    color: var(--v3-text-mid);
    max-width: 36ch;
    font-weight: 500;
}
.v3-hero-v2__badges {
    list-style: none; padding: 0;
    margin: 2.5rem 0 0;
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: 1.5rem 1rem;
    border-top: 1px solid var(--v3-border);
    padding-top: 1.5rem;
    max-width: 540px;
}
.v3-hero-v2__badges strong {
    display: block;
    font-family: "Inter Tight", sans-serif;
    font-size: clamp( 30px, 3vw, 44px );
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--v3-text);
    margin-bottom: 0.35rem;
}
.v3-hero-v2__badges strong small {
    font-size: 0.55em; color: var(--v3-accent); font-weight: 700;
}
.v3-hero-v2__badges span {
    display: block;
    font-size: 12px; color: var(--v3-text-mid);
    line-height: 1.3; letter-spacing: 0.04em;
}

.v3-hero-v2__visual {
    position: relative;
    will-change: transform;
}
.v3-hero-v2__frame {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 22px;
    overflow: hidden;
    background: var(--v3-bg-cream);
    box-shadow:
        0 40px 100px -30px rgba(0,0,0,0.25),
        0 8px 20px -8px rgba(0,0,0,0.1);
}
.v3-hero-v2__video {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate( -50%, -50% );
    width: max( 100%, calc( 100% * 16 / 9 ) );
    height: max( 100%, calc( 100% * 9 / 16 ) );
    min-width: 100%; min-height: 100%;
    object-fit: cover;
}
.v3-hero-v2__sticker {
    position: absolute;
    top: 1.25rem; left: 1.25rem;
    background: rgba( 26, 56, 37, 0.92 );
    backdrop-filter: blur( 8px );
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    display: flex; flex-direction: column; gap: 0.15rem;
}
.v3-hero-v2__sticker .v3-tag {
    color: var(--v3-accent-2);
    font-size: 10.5px;
    letter-spacing: 0.18em;
}
.v3-hero-v2__sticker strong {
    font-family: "Inter Tight", sans-serif;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

@media ( max-width: 960px ) {
    .v3-hero-v2__top { flex-direction: column; gap: 0.5rem; }
    .v3-hero-v2__top .v3-tag--right { text-align: left; }
    .v3-hero-v2__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .v3-hero-v2__visual { max-width: 480px; }
}
@media ( max-width: 600px ) {
    .v3-hero-v2__badges { grid-template-columns: 1fr 1fr; }
    .v3-hero-v2__badges li:last-child { grid-column: 1 / -1; }
}

/* =================================================================== */
/* ===== HERO V3 — floating cards + grow intro + parallax ============ */
/* =================================================================== */
.v3-hero--v3 {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--v3-bg-dark);
    color: #fff;
    padding: 0;
}
.v3-hero-v3__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.v3-hero-v3__bg-video {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate( -50%, -50% );
    width: max( 100vw, calc( 100vh * 16 / 9 ) );
    height: max( 100vh, calc( 100vw * 9 / 16 ) );
    min-width: 100%; min-height: 100%;
    object-fit: cover;
    filter: contrast(1.1) saturate(1.05);
}
.v3-hero-v3__title-mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
    transform-origin: center center;
    transform: scale( var( --scroll-scale, 1 ) );
    will-change: transform, opacity;
}
.v3-hero-v3__video {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate( -50%, -50% );
    width: max( 100vw, calc( 100vh * 16 / 9 ) );
    height: max( 100vh, calc( 100vw * 9 / 16 ) );
    min-width: 100%; min-height: 100%;
    object-fit: cover;
    z-index: 1;
    /* Light filter to enhance contrast inside letter shapes */
    filter: contrast(1.1) saturate(1.1);
}
.v3-hero-v3__mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity;
}
.v3-hero-v3__reveal {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}
.v3-hero-v3__reveal > * { pointer-events: auto; }
.v3-hero-v3__hint {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX( -50% );
    z-index: 6;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    color: rgba( 255, 255, 255, 0.75 );
    font-family: "Inter Tight", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: opacity .6s, transform .6s;
    animation: v3-bob 2.4s ease-in-out infinite;
}
.v3-hero-v3__hint.is-hidden {
    opacity: 0;
    transform: translateX( -50% ) translateY( 20px );
    pointer-events: none;
}
.v3-hero-v3__grain {
    position: absolute; inset: 0;
    z-index: 3;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.025) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.02) 0%, transparent 60%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.v3-hero-v3__top {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 6;
    padding: 1.75rem 0;
}
.v3-hero-v3__top-inner {
    display: flex; justify-content: space-between; gap: 2rem;
}
.v3-tag--light { color: rgba( 255,255,255, 0.7 ); }
.v3-tag--light.v3-tag--right { color: rgba( 255,255,255, 0.85 ); }

.v3-hero-v3__content {
    position: absolute;
    bottom: 14vh;
    left: 0; right: 0;
    z-index: 5;
    text-align: center;
    pointer-events: none;
}
.v3-hero-v3__content > * { pointer-events: auto; }
.v3-hero-v3__content .v3-cta-row { justify-content: center; }
.v3-hero-v3__below {
    position: relative;
    z-index: 5;
    padding: 0 clamp( 1.25rem, 4vw, 3rem );
    margin-bottom: clamp( 2rem, 4vw, 4rem );
    margin-top: auto;
}
.v3-hero-v3__pill {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.9rem 0.5rem 0.7rem;
    background: rgba( 255, 255, 255, 0.08 );
    border: 1px solid rgba( 255, 255, 255, 0.15 );
    border-radius: 999px;
    font-family: "Inter Tight", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba( 255,255,255, 0.9 );
    letter-spacing: 0.02em;
    margin-bottom: 1.25rem;
    backdrop-filter: blur( 8px );
}
.v3-hero-v3__pill-dot {
    width: 8px; height: 8px;
    border-radius: 999px;
    background: var(--v3-accent-2);
    box-shadow: 0 0 0 4px rgba( 91, 156, 110, 0.25 );
    animation: v3-pulse 2s ease-in-out infinite;
}
@keyframes v3-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba( 91, 156, 110, 0.25 ); }
    50%      { box-shadow: 0 0 0 8px rgba( 91, 156, 110, 0.1 ); }
}
.v3-hero-v3__lede {
    font-size: clamp( 18px, 1.5vw, 22px );
    line-height: 1.5;
    color: rgba( 255, 255, 255, 0.85 );
    max-width: 38ch;
    margin: 0 0 1.75rem;
    font-weight: 500;
}
.v3-hero-v3__lede .v3-accent-word {
    color: var(--v3-accent-2);
}

.v3-hero-v3__bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 5;
    padding: 1.5rem 0;
    border-top: 1px solid rgba( 255, 255, 255, 0.12 );
    background: rgba( 14, 31, 21, 0.65 );
    backdrop-filter: blur( 8px );
}
.v3-hero-v3__bottom-inner {
    display: flex;
    gap: clamp( 1.5rem, 4vw, 3.5rem );
    align-items: center;
    flex-wrap: wrap;
}
.v3-hero-v3__metric {
    display: flex; flex-direction: column; gap: 0.2rem;
}
.v3-hero-v3__metric strong {
    font-family: "Inter Tight", sans-serif;
    font-size: clamp( 24px, 2.4vw, 36px );
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1;
    color: #fff;
}
.v3-hero-v3__metric strong small {
    font-size: 0.55em;
    color: var(--v3-accent-2);
}
.v3-hero-v3__metric > span {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba( 255, 255, 255, 0.5 );
    font-weight: 500;
}
.v3-hero-v3__scroll {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 0.6rem;
    color: rgba( 255, 255, 255, 0.7 );
    text-decoration: none;
    font-family: "Inter Tight", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: gap .3s, color .3s;
}
.v3-hero-v3__scroll:hover { color: #fff; gap: 1rem; }
.v3-hero-v3__scroll svg { display: block; }

/* === Cinema curtains intro ============================================= */
.v3-hero-v3__curtains {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}
.v3-hero-v3__curtain {
    flex: 1;
    background: var(--v3-bg-dark);
    transform: scaleX( 1 );
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(.78,0,.22,1);
}
/* Alternate direction per bar — odd bars exit left, even exit right */
.v3-hero-v3__curtain:nth-child(even) {
    transform-origin: right center;
}
.v3-hero-v3__curtain.is-closed { transform: scaleX( 1 ); }
.v3-hero-v3__curtain.is-open {
    transform: scaleX( 0 );
    /* Stagger delay via inline --i (1..6) */
    transition-delay: calc( ( var( --i, 1 ) - 1 ) * 90ms );
}

/* === Intro fade-in stagger ============================================== */
[data-intro-fade].is-pre {
    opacity: 0;
    transform: translateY( 18px );
    transition: opacity .8s cubic-bezier(.2,.7,.2,1),
                transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-intro-fade].is-pre.is-in {
    opacity: 1;
    transform: translateY( 0 );
}

/* === Floating project cards ============================================= */
.v3-hero-v3__card {
    position: absolute;
    z-index: 6;
    width: clamp( 130px, 13vw, 200px );
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    box-shadow:
        0 30px 60px -20px rgba( 0, 0, 0, 0.4 ),
        0 0 0 1px rgba( 255, 255, 255, 0.08 );
    /* Combined parallax (--scroll-x/y from JS) + intro scale (CSS class) */
    transform: translate3d( var( --scroll-x, 0 ), var( --scroll-y, 0 ), 0 );
    transition: transform 1.05s cubic-bezier(.2,.7,.2,1),
                opacity 1s cubic-bezier(.2,.7,.2,1),
                box-shadow .4s ease;
    will-change: transform;
    opacity: 1;
}
.v3-hero-v3__card:hover {
    box-shadow:
        0 45px 80px -25px rgba( 0, 0, 0, 0.5 ),
        0 0 0 1px rgba( 255, 255, 255, 0.18 );
}
.v3-hero-v3__card.is-in-init {
    opacity: 0;
    transform: translate3d( 0, 60px, 0 ) scale( 0.6 );
}
.v3-hero-v3__card.is-in {
    opacity: 1;
    transform: translate3d( var( --scroll-x, 0 ), var( --scroll-y, 0 ), 0 ) scale( 1 );
    transition-delay: var( --delay, 0ms );
}

/* Card corner positions */
.v3-hero-v3__card--tl { top: clamp( 6rem, 14vh, 10rem ); left: clamp( 1rem, 4vw, 3rem ); transform-origin: top left; }
.v3-hero-v3__card--tr { top: clamp( 7rem, 18vh, 12rem ); right: clamp( 1rem, 4vw, 3rem ); transform-origin: top right; }
.v3-hero-v3__card--bl { bottom: clamp( 7rem, 16vh, 10rem ); left: clamp( 1rem, 5vw, 4rem ); transform-origin: bottom left; }
.v3-hero-v3__card--br { bottom: clamp( 8rem, 18vh, 11rem ); right: clamp( 1rem, 5vw, 4rem ); transform-origin: bottom right; }

.v3-hero-v3__card img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.v3-hero-v3__card-meta {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0.85rem 0.9rem;
    background: linear-gradient( to top, rgba( 0, 0, 0, 0.85 ) 0%, rgba( 0, 0, 0, 0 ) 100% );
}
.v3-hero-v3__card-meta .v3-tag {
    display: block;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    color: rgba( 255, 255, 255, 0.85 );
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}
.v3-hero-v3__card-meta strong {
    display: block;
    font-family: "Inter Tight", sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: #fff;
}

@media ( max-width: 720px ) {
    /* On mobile, show only 2 cards (top-right + bottom-left) */
    .v3-hero-v3__card--tl,
    .v3-hero-v3__card--br { display: none; }
    .v3-hero-v3__card { width: 110px; }
}

/* On dark hero v3, ghost-on-dark variant override (white border) */
.v3-hero--v3 .v3-btn--ghost-on-dark {
    color: #fff;
    border-color: rgba( 255, 255, 255, 0.35 );
    background: transparent;
}
.v3-hero--v3 .v3-btn--ghost-on-dark:hover {
    background: #fff;
    color: var(--v3-bg-dark);
    border-color: #fff;
}

@media ( max-width: 960px ) {
    .v3-hero-v3__top-inner { flex-direction: column; gap: 0.4rem; }
    .v3-hero-v3__top-inner .v3-tag--right { text-align: left; }
    .v3-hero-v3__bottom {
        gap: 1.5rem 2rem;
    }
    .v3-hero-v3__scroll { margin-left: 0; flex-basis: 100%; }
    /* SVG mask viewBox already responsive — but on portrait/narrow it can crop badly.
       Bigger fontSize ratio via re-positioned viewBox. Use a switcher: */
    .v3-hero--v3 svg.v3-hero-v3__mask { /* mobile-tuned viewBox via inline override not needed if preserveAspect=slice */ }
}
@media ( max-width: 600px ) {
    .v3-hero-v3__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}


.v3-hero--v4 {
    position: relative;
    min-height: 100vh;
    background: var(--v3-bg);
    color: var(--v3-text);
    padding: 0;
    overflow: hidden;
}

/* === Aurora mouse-follow bg — FIXED layer across all cream sections === */
.v3-aurora-fixed {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.v3-aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur( 70px );
    mix-blend-mode: multiply;
    will-change: transform;
    transform: translate3d( var( --mx, 0 ), var( --my, 0 ), 0 );
    transition: transform 0.05s linear;
}
.v3-aurora-blob--1 {
    top: 15%; left: 12%;
    width: 24vw; height: 24vw;
    background: radial-gradient( circle, #3D7B4C 0%, transparent 65% );
    opacity: 0.12;
}
.v3-aurora-blob--2 {
    top: 38%; right: 8%;
    width: 26vw; height: 26vw;
    background: radial-gradient( circle, #5B9C6E 0%, transparent 65% );
    opacity: 0.10;
}
.v3-aurora-blob--3 {
    bottom: 18%; left: 32%;
    width: 22vw; height: 22vw;
    background: radial-gradient( circle, #C9A461 0%, transparent 65% );
    opacity: 0.09;
}
.v3-aurora-blob--4 {
    top: 28%; left: 55%;
    width: 20vw; height: 20vw;
    background: radial-gradient( circle, #3D7B4C 0%, transparent 65% );
    opacity: 0.07;
}

/* Cream sections — transparent so the fixed aurora bg shows through.
   NOTE: .v3-expertise was removed 2026-05-26 — Pavel moved it to the
   DARK rhythm group (see dark.css §44), and the !important transparent
   was beating theme-dark's surface assignment.                          */
.v3-hero--v4,
.v3-about,
.v3-process {
    background: transparent !important;
}
/* All sections sit above the fixed aurora */
.v3-hero--v4,
.v3-about,
.v3-expertise,
.v3-process,
.v3-reviews,
.v3-pillars,
.v3-stats,
.v3-projects,
.v3-marquee,
.v3-owners,
.v3-articles,
.v3-final {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .v3-aurora-blob { transition: none; transform: none !important; }
}
@media ( max-width: 720px ) {
    .v3-aurora-fixed { opacity: 0.7; }
}
.v3-hero-v4__layout {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    gap: clamp( 1rem, 2vw, 2rem );
}
.v3-hero-v4__top {
    position: relative;
    z-index: 6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.25rem;
    gap: 2rem;
}
.v3-hero-v4__top-meta { text-align: right; }

/* Center: title + content */
.v3-hero-v4__center {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem 0;
}
.v3-hero-v4__title {
    font-family: "Inter Tight", sans-serif;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.94;
    font-size: clamp( 44px, 7.5vw, 124px );
    margin: 0;
    color: var(--v3-text);
    max-width: 14ch;
}
.v3-hero-v4__center-bottom {
    margin-top: clamp( 2rem, 4vw, 3.5rem );
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}
.v3-hero-v4__pill {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.5rem 0.9rem 0.5rem 0.7rem;
    background: rgba( 61, 123, 76, 0.08 );
    border: 1px solid rgba( 61, 123, 76, 0.2 );
    border-radius: 999px;
    font-family: "Inter Tight", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v3-accent);
    letter-spacing: 0.02em;
}
.v3-hero-v4__pill-dot {
    width: 8px; height: 8px;
    border-radius: 999px;
    background: var(--v3-accent);
    box-shadow: 0 0 0 4px rgba( 61, 123, 76, 0.2 );
    animation: v3-pulse 2s ease-in-out infinite;
}
.v3-hero-v4__lede {
    font-size: clamp( 16px, 1.3vw, 19px );
    line-height: 1.5;
    color: var(--v3-text-mid);
    margin: 0;
    max-width: 42ch;
    font-weight: 500;
}

/* === FLOATING BLOCKS LAYER ============================================ */
.v3-hero-v4__floats {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}
.v3-float {
    position: absolute;
    top: 50%; left: 50%;
    pointer-events: auto;
    /* Static placement: translate from center by --x/--y, then add scroll-driven --scroll-x/--scroll-y, then rotate */
    transform:
        translate( -50%, -50% )
        translate( var( --x, 0 ), var( --y, 0 ) )
        translate( var( --scroll-x, 0 ), var( --scroll-y, 0 ) )
        rotate( var( --r, 0deg ) );
    transition:
        transform 1.05s cubic-bezier(.2,.7,.2,1),
        opacity 0.85s cubic-bezier(.2,.7,.2,1),
        box-shadow .35s ease;
    will-change: transform, opacity;
    text-decoration: none;
    color: var(--v3-text);
}
.v3-float.is-pre {
    opacity: 0;
    transform:
        translate( -50%, -50% )
        translate( var( --x, 0 ), calc( var( --y, 0 ) + 60px ) )
        rotate( calc( var( --r, 0deg ) + 8deg ) )
        scale( 0.5 );
}
.v3-float.is-pre.is-in {
    opacity: 1;
    transform:
        translate( -50%, -50% )
        translate( var( --x, 0 ), var( --y, 0 ) )
        translate( var( --scroll-x, 0 ), var( --scroll-y, 0 ) )
        rotate( var( --r, 0deg ) );
}

/* Photo cards */
.v3-float--photo {
    width: clamp( 140px, 14vw, 220px );
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 30px 60px -20px rgba( 0, 0, 0, 0.25 ),
        0 0 0 1px rgba( 0, 0, 0, 0.05 );
    display: block;
}
.v3-float--photo:hover {
    box-shadow:
        0 45px 80px -25px rgba( 0, 0, 0, 0.35 ),
        0 0 0 1px rgba( 0, 0, 0, 0.1 );
}
.v3-float--photo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.v3-float--photo .v3-tag {
    position: absolute;
    bottom: 0.75rem; left: 0.75rem; right: 0.75rem;
    background: rgba( 26, 26, 26, 0.85 );
    backdrop-filter: blur( 6px );
    color: #fff;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 9.5px;
    letter-spacing: 0.12em;
}

/* Circular EST 2010 badge */
.v3-float--badge {
    width: clamp( 130px, 11vw, 170px );
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--v3-text);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow:
        0 25px 50px -15px rgba( 0, 0, 0, 0.3 );
}
.v3-float-circle {
    position: absolute;
    width: 100%; height: 100%;
    fill: var(--v3-bg);
    animation: v3-spin 18s linear infinite;
}
.v3-float-circle-center {
    text-align: center;
    z-index: 2;
}
.v3-float-circle-center strong {
    display: block;
    font-family: "Inter Tight", sans-serif;
    font-size: clamp( 28px, 3vw, 40px );
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--v3-accent-2);
}
.v3-float-circle-center strong small {
    font-size: 0.6em;
    color: var(--v3-bg);
}
.v3-float-circle-center span {
    font-size: 9px;
    letter-spacing: 0.2em;
    color: rgba( 255, 255, 255, 0.6 );
}
@keyframes v3-spin {
    from { transform: rotate( 0deg ); }
    to   { transform: rotate( 360deg ); }
}

/* Rating card */
.v3-float--rating {
    position: relative;
    background: #fff;
    border: 1px solid var(--v3-border);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    box-shadow: 0 20px 40px -15px rgba( 0, 0, 0, 0.18 );
    text-align: center;
    width: 140px;
    box-sizing: border-box;
}
.v3-float--rating small {
    display: inline-block;
    line-height: 1.3;
}
.v3-float--rating strong {
    display: block;
    font-family: "Inter Tight", sans-serif;
    font-size: clamp( 28px, 3vw, 38px );
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--v3-text);
}
.v3-float__stars {
    display: block;
    color: var(--v3-gold);
    font-size: 14px;
    letter-spacing: 0.1em;
    margin: 0.2rem 0;
}
.v3-float--rating small {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--v3-text-soft);
    text-transform: uppercase;
}

/* Quote card */
.v3-float--quote {
    position: relative;
    background: var(--v3-bg-cream);
    border: 1px solid var(--v3-border);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    box-shadow: 0 20px 40px -15px rgba( 0, 0, 0, 0.15 );
    max-width: 240px;
}
.v3-float--quote p {
    font-family: "Inter Tight", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0 0 0.5rem;
    color: var(--v3-text);
}
.v3-float--quote small {
    font-size: 11px;
    color: var(--v3-text-soft);
    letter-spacing: 0.04em;
}

.v3-hero-v4__bottom {
    border-top: 1px solid var(--v3-border);
    padding-top: 1.25rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.v3-hero-v4__metrics {
    display: flex;
    gap: clamp( 1.5rem, 3vw, 3rem );
    flex-wrap: wrap;
    flex-grow: 1;
}
.v3-hero-v4__metric {
    display: flex; flex-direction: column; gap: 0.2rem;
}
.v3-hero-v4__metric strong {
    font-family: "Inter Tight", sans-serif;
    font-size: clamp( 22px, 2vw, 32px );
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--v3-text);
}
.v3-hero-v4__metric strong small {
    font-size: 0.55em;
    color: var(--v3-accent);
}
.v3-hero-v4__metric span {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v3-text-soft);
    font-weight: 500;
}
.v3-hero-v4__scroll {
    display: inline-flex; align-items: center; gap: 0.6rem;
    color: var(--v3-text);
    text-decoration: none;
    font-family: "Inter Tight", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: gap .3s, color .3s;
}
.v3-hero-v4__scroll:hover { gap: 1rem; color: var(--v3-accent); }

@media ( max-width: 960px ) {
    .v3-hero-v4__top { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .v3-hero-v4__top-meta { text-align: left; }
    /* On tablet: hide quote + badge (text-heavy), keep photo cards smaller */
    .v3-float--quote,
    .v3-float--badge,
    .v3-float--rating { display: none; }
    .v3-float--photo:nth-of-type(n+5) { display: none; }
    .v3-float--photo { width: 110px; }
    .v3-float { --x: clamp(-35vw, var(--x), 35vw) !important; }
}
@media ( max-width: 720px ) {
    /* On mobile: keep 4 photo floats but much smaller, tighter positions */
    .v3-float--photo { width: 78px; }
    .v3-float--photo .v3-tag { font-size: 8px; padding: 0.3rem 0.45rem; }
    /* Photos float at narrower offsets so they don't escape narrow viewport */
    .v3-float { --x: clamp(-30vw, var(--x), 30vw) !important; }
    .v3-hero-v4__title { font-size: clamp( 36px, 10vw, 56px ); }
    .v3-hero-v4__center-bottom { margin-top: 1.75rem; }
    .v3-hero-v4__metrics { gap: 1rem 1.5rem; }
    .v3-hero-v4__scroll { flex-basis: 100%; }
}
@media ( max-width: 480px ) {
    .v3-float--photo { width: 64px; }
    .v3-float--photo .v3-tag { display: none; }
    .v3-float { --x: clamp(-28vw, var(--x), 28vw) !important; }
}

/* =================================================================== */
/* ===== HERO V5 — Onepack-inspired editorial layout =============== */
/* =================================================================== */
.v3-hero--v5 {
    position: relative;
    min-height: 100vh;
    background: transparent;
    color: var(--v3-text);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding:
        clamp( 3rem, 7vw, 6rem )           /* top — extra breathing above info */
        clamp( 1.5rem, 4vw, 3rem )         /* right */
        clamp( 1.5rem, 3vw, 2.5rem )       /* bottom */
        clamp( 1.5rem, 4vw, 3rem );        /* left */
}

/* === Top info row (now inside right column, above title) ========= */
.v3-hero-v5__top-info {
    display: flex;
    gap: clamp( 1.25rem, 3vw, 2.5rem );
    flex-wrap: wrap;
    margin-bottom: clamp( 1.25rem, 3vw, 2rem );
}
.v3-hero-v5__tag-row {
    display: flex;
    flex-direction: column;
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    color: var(--v3-text-mid);
    line-height: 1.3;
}
.v3-hero-v5__tag-row span:first-child { color: var(--v3-text); font-weight: 600; }

/* === Body two-column ============================================== */
.v3-hero-v5__body {
    display: grid;
    grid-template-columns: 0.55fr 1.45fr;
    gap: clamp( 2rem, 5vw, 4rem );
    align-items: stretch;
}

.v3-hero-v5__left {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 0;
}

/* === Circular rotating badge ===================================== */
.v3-hero-v5__badge {
    position: relative;
    width: clamp( 140px, 14vw, 200px );
    aspect-ratio: 1;
    margin-top: clamp( 2rem, 5vw, 4rem );
}
.v3-hero-v5__badge-circle {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    color: var(--v3-text);
    fill: currentColor;
    animation: v3-spin 22s linear infinite;
}
.v3-hero-v5__badge-star {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate( -50%, -50% );
    font-size: clamp( 36px, 3.5vw, 50px );
    color: var(--v3-accent);
    font-weight: 900;
}

/* === Follow us ===================================================== */
.v3-hero-v5__follow {
    margin-top: auto;
}
.v3-hero-v5__follow-label {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: var(--v3-text-mid);
    margin-bottom: 0.75rem;
}
.v3-hero-v5__follow-icons {
    display: flex;
    gap: 0.85rem;
}
.v3-hero-v5__follow-icons a {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--v3-text);
    transition: color .25s, transform .25s;
}
.v3-hero-v5__follow-icons a:hover { color: var(--v3-accent); transform: translateY( -2px ); }
.v3-hero-v5__follow-icons svg { width: 22px; height: 22px; }

/* === Right column: title + projects =============================== */
.v3-hero-v5__right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 0;
    overflow: visible;
}

.v3-hero-v5__title {
    font-family: "Inter Tight", sans-serif;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.94;
    font-size: clamp( 44px, 7.5vw, 124px );
    margin: 0;
    color: var(--v3-text);
    text-align: left;
    max-width: 14ch;
    padding-right: 20px;
}

/* === Horizontal projects strip ==================================== */
.v3-hero-v5__projects {
    margin-top: clamp( 2rem, 4vw, 3rem );
    overflow: visible;
    width: 100%;
}
.v3-hero-v5__projects-track {
    display: flex;
    gap: 1.25rem;
    will-change: transform;
    transition: transform 0.08s linear;
    /* Track is wider than container — overflows right edge by design */
    width: max-content;
}
.v3-hero-v5__project {
    position: relative;
    flex-shrink: 0;
    width: clamp( 240px, 26vw, 380px );
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: var(--v3-bg-cream);
    box-shadow:
        0 30px 60px -25px rgba( 0, 0, 0, 0.25 ),
        0 0 0 1px rgba( 0, 0, 0, 0.05 );
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.v3-hero-v5__project:hover { transform: translateY( -4px ); }
.v3-hero-v5__project img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.v3-hero-v5__project:hover img { transform: scale( 1.05 ); }

.v3-hero-v5__project-tag {
    position: absolute;
    bottom: 1rem; left: 1rem;
    background: rgba( 26, 26, 26, 0.88 );
    backdrop-filter: blur( 6px );
    color: #fff;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.v3-hero-v5__project-tag span:first-child {
    font-family: "Inter Tight", sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.v3-hero-v5__project-tag span:last-child {
    font-size: 10.5px;
    color: rgba( 255, 255, 255, 0.75 );
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* === Scroll hint =================================================== */
.v3-hero-v5__scroll {
    margin-top: clamp( 1.5rem, 3vw, 2rem );
    text-align: center;
    color: var(--v3-text-mid);
    font-family: "Inter Tight", sans-serif;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .25s;
}
.v3-hero-v5__scroll:hover { color: var(--v3-accent); }

/* === V6 — WebGL noise-blob canvas (GPU mouse-tracking) ============ */
.v3-hero--v6 { isolation: isolate; }
.v3-hero-v6-canvas {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    /* mix-blend-mode: multiply; — handled by shader alpha */
}
.v3-hero--v6 .v3-hero-v5__body { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
    .v3-hero-v6-canvas { display: none; }
}

/* === Mobile ======================================================= */
@media ( max-width: 960px ) {
    .v3-hero-v5__body { grid-template-columns: 1fr; }
    .v3-hero-v5__left { flex-direction: row; justify-content: space-between; align-items: center; padding: 1.5rem 0; }
    .v3-hero-v5__badge { margin: 0; width: 90px; }
    .v3-hero-v5__follow-label { margin-bottom: 0.4rem; }
    .v3-hero-v5__title { font-size: clamp( 36px, 10vw, 64px ); }
    .v3-hero-v5__project { width: clamp( 200px, 60vw, 280px ); }
    .v3-hero-v5__top-info { flex-direction: column; gap: 0.5rem; }
    .v3-hero-v6-spot,
    .v3-hero-v6-glow { display: none; }
}

/* =================================================================== */
/* ===== BEFORE / AFTER slider ===================================== */
/* =================================================================== */
.v3-ba-section {
    background: transparent;
    padding: clamp( 4rem, 7vw, 7rem ) 0;
}
.v3-ba {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 22px;
    overflow: hidden;
    cursor: ew-resize;
    background: var(--v3-bg-cream);
    user-select: none;
    box-shadow:
        0 40px 100px -30px rgba( 0, 0, 0, 0.25 ),
        0 0 0 1px rgba( 0, 0, 0, 0.05 );
    --pos: 50%;
}
.v3-ba__after,
.v3-ba__before {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.v3-ba__before {
    clip-path: inset( 0 calc( 100% - var( --pos, 50% ) ) 0 0 );
}
.v3-ba__label {
    position: absolute;
    top: 1.25rem;
    padding: 0.4rem 0.8rem;
    background: rgba( 26, 26, 26, 0.78 );
    backdrop-filter: blur( 6px );
    color: #fff;
    font-family: "Inter Tight", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 999px;
    pointer-events: none;
    z-index: 2;
}
.v3-ba__label--before { left: 1.25rem; }
.v3-ba__label--after  { right: 1.25rem; color: #fff; background: rgba( 61, 123, 76, 0.92 ); }

.v3-ba__handle {
    position: absolute;
    top: 0; bottom: 0;
    left: var( --pos, 50% );
    width: 3px;
    background: #fff;
    transform: translateX( -50% );
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 20px rgba( 0, 0, 0, 0.3 );
}
.v3-ba__handle svg {
    position: absolute;
    top: 50%; left: 50%;
    width: 24px; height: 24px;
    transform: translate( -50%, -50% );
    color: var(--v3-text);
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    box-sizing: content-box;
    box-shadow:
        0 8px 24px rgba( 0, 0, 0, 0.25 ),
        0 0 0 1px rgba( 0, 0, 0, 0.05 );
}

.v3-ba__caption {
    margin: 1rem 0 0;
    font-size: 13px;
    color: var(--v3-text-mid);
    letter-spacing: 0.04em;
    text-align: center;
}
.v3-ba__caption strong {
    color: var(--v3-text);
    font-family: "Inter Tight", sans-serif;
    font-weight: 700;
}

/* === Thumbnail picker for B/A pairs ============================== */
.v3-ba__picker {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 120px, 1fr ) );
    gap: 0.6rem;
    margin-top: 2rem;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}
.v3-ba__thumb {
    position: relative;
    appearance: none;
    border: 2px solid transparent;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    aspect-ratio: 16 / 11;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
    will-change: transform;
}
.v3-ba__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: filter .3s, transform .5s;
}
.v3-ba__thumb:not(.is-active) img { filter: brightness( 0.65 ) saturate( 0.85 ); }
.v3-ba__thumb:hover:not(.is-active) img { filter: brightness( 0.8 ); transform: scale( 1.04 ); }
.v3-ba__thumb.is-active {
    border-color: var(--v3-accent);
    box-shadow:
        0 0 0 3px rgba( 61, 123, 76, 0.18 ),
        0 12px 30px -12px rgba( 0, 0, 0, 0.25 );
    transform: translateY( -2px );
}
.v3-ba__thumb-tag {
    position: absolute;
    bottom: 0.5rem; left: 0.5rem; right: 0.5rem;
    background: rgba( 26, 26, 26, 0.85 );
    backdrop-filter: blur( 6px );
    color: #fff;
    font-family: "Inter Tight", sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    text-align: center;
}
.v3-ba__thumb.is-active .v3-ba__thumb-tag {
    background: rgba( 61, 123, 76, 0.95 );
}

@media ( max-width: 600px ) {
    .v3-ba__picker {
        grid-template-columns: repeat( 2, 1fr );
        gap: 0.5rem;
    }
}

@media ( max-width: 720px ) {
    .v3-ba { aspect-ratio: 4 / 5; }
    .v3-ba__handle svg { width: 18px; height: 18px; padding: 9px; }
}

/* =================================================================== */
/* ===== MARQUEE (dual direction) ================================== */
/* =================================================================== */
.v3-marquee {
    overflow: hidden;
    padding: 1.5rem 0;
}
.v3-marquee--top {
    background: var(--v3-text);
    color: var(--v3-bg);
    border-top: 1px solid var(--v3-text);
    border-bottom: 1px solid var(--v3-text);
}
.v3-marquee--bottom {
    background: var(--v3-bg);
    color: var(--v3-text);
    border-top: 1px solid var(--v3-border);
    border-bottom: 1px solid var(--v3-border);
}
.v3-marquee__track {
    display: flex; gap: 2.5rem; white-space: nowrap;
    align-items: center;
    animation: v3-marq 38s linear infinite;
    will-change: transform;
    font-family: "Inter Tight", sans-serif;
    font-size: clamp( 32px, 4vw, 64px );
    font-weight: 900;
    letter-spacing: -0.03em;
}
.v3-marquee__track--reverse {
    animation-direction: reverse;
    animation-duration: 42s;
}
.v3-marquee__sep { color: var(--v3-accent-2); font-size: 0.55em; opacity: 0.75; flex-shrink: 0; }
@keyframes v3-marq {
    from { transform: translateX( 0 ); }
    to   { transform: translateX( -33.33% ); }
}

/* =================================================================== */
/* ===== ABOUT ===================================================== */
/* =================================================================== */
.v3-about {
    background: var(--v3-bg);
    padding: clamp( 4rem, 8vw, 8rem ) 0;
}
.v3-about__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp( 2rem, 5vw, 5rem );
    align-items: start;
}
.v3-about__copy h2 { margin-bottom: 1.5rem; }
.v3-about__copy > p {
    font-size: 17px; line-height: 1.65;
    color: var(--v3-text-mid);
    margin: 0 0 2rem;
    max-width: 50ch;
}
.v3-pillar-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
}
.v3-pillar-list li { padding-top: 1rem; border-top: 1px solid var(--v3-border); }
.v3-pillar-list strong {
    display: block;
    font-family: "Inter Tight", sans-serif;
    font-size: 17px; font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
}
.v3-pillar-list span {
    display: block;
    font-size: 13.5px; line-height: 1.55;
    color: var(--v3-text-mid);
}
.v3-about__visual {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 20px;
    overflow: hidden;
    background: var(--v3-bg-cream);
    box-shadow: 0 40px 80px -30px rgba(0,0,0,0.18);
}
.v3-about__visual img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.v3-about__visual:hover img { transform: scale( 1.04 ); }

/* Floating credibility labels overlaid on the about photo */
.v3-about__badge {
    position: absolute;
    z-index: 2;
    background: rgba( 26, 56, 37, 0.9 );
    -webkit-backdrop-filter: blur( 10px );
    backdrop-filter: blur( 10px );
    color: #fff;
    border: 1px solid rgba( 255, 255, 255, 0.14 );
    border-radius: 14px;
    padding: 0.6rem 0.9rem;
    box-shadow: 0 18px 44px -18px rgba( 0, 0, 0, 0.55 );
    display: flex; flex-direction: column; gap: 0.1rem;
    line-height: 1.25;
    max-width: 62%;
}
.v3-about__badge strong { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; }
.v3-about__badge small  { font-size: 0.7rem; color: var( --v3-accent-2 ); letter-spacing: 0.02em; }
.v3-about__stars { color: #FFC83D; font-size: 0.8rem; letter-spacing: 2px; }
.v3-about__badge--rating { top: 1rem; left: 1rem; }
.v3-about__badge--cred   { bottom: 1rem; right: 1rem; text-align: right; }
@media ( max-width: 600px ) {
    .v3-about__badge { padding: 0.45rem 0.7rem; border-radius: 11px; }
    .v3-about__badge strong { font-size: 0.82rem; }
    .v3-about__stars { font-size: 0.7rem; }
}

/* =================================================================== */
/* ===== STATS — oversized counters ================================ */
/* =================================================================== */
.v3-stats {
    background: var(--v3-bg-dark);
    color: #fff;
    padding: clamp( 4rem, 7vw, 6rem ) 0;
}
.v3-stats .v3-numbered { color: #fff; margin-bottom: 3rem; }
.v3-stats__grid {
    display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 0;
}
.v3-stat {
    padding: 0.5rem 2rem 0.5rem 0;
    border-right: 1px solid rgba(255,255,255, 0.14);
}
.v3-stat:last-child { border-right: none; }
.v3-stat strong {
    display: block;
    font-family: "Inter Tight", sans-serif;
    font-size: clamp( 56px, 7vw, 112px );
    font-weight: 900; letter-spacing: -0.04em;
    line-height: 0.92; margin-bottom: 0.75rem;
    color: #fff;
}
.v3-stat strong small {
    font-size: 0.5em; font-weight: 700; color: var(--v3-accent-2);
}
.v3-stat > span {
    font-size: 13.5px; color: rgba(255,255,255,0.65);
    letter-spacing: 0.06em; text-transform: uppercase;
    font-weight: 500;
}
.v3-stat strong span {
    font-size: inherit; font-family: inherit;
    font-weight: inherit; color: inherit;
    letter-spacing: inherit; line-height: inherit;
    text-transform: none;
}

/* =================================================================== */
/* ===== EXPERTISE ================================================= */
/* =================================================================== */
.v3-expertise {
    background: var(--v3-bg);
    padding: clamp( 4rem, 8vw, 8rem ) 0;
}
.v3-expertise__grid {
    display: grid; grid-template-columns: repeat( 3, 1fr );
    gap: 1.25rem;
}
.v3-svc-card {
    position: relative;
    display: flex; flex-direction: column;
    padding: 2.5rem 2rem 2rem;
    background: var(--v3-bg-white);
    border-radius: 18px;
    color: var(--v3-text); text-decoration: none;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
    min-height: 320px;
    overflow: hidden;
}
.v3-svc-card:hover {
    box-shadow: 0 30px 60px -25px rgba(0,0,0,0.18);
}
.v3-svc-card__num {
    position: absolute;
    top: 1.25rem; right: 1.5rem;
    font-family: "Inter Tight", sans-serif;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--v3-text-soft);
    opacity: 0.5;
}
.v3-svc-card__icon {
    color: var(--v3-accent);
    margin-bottom: 1.25rem;
    width: 56px; height: 56px;
}
.v3-svc-card__icon svg { width: 48px; height: 48px; }
.v3-svc-card h3 {
    font-family: "Inter Tight", sans-serif;
    font-size: 24px; font-weight: 800; letter-spacing: -0.015em;
    margin: 0 0 0.7rem; line-height: 1.1;
}
.v3-svc-card p {
    font-size: 14.5px; line-height: 1.6;
    color: var(--v3-text-mid);
    margin: 0 0 1.5rem; flex-grow: 1;
}
.v3-svc-card .v3-arrow {
    font-size: 13px; color: var(--v3-accent);
}

/* =================================================================== */
/* ===== PROJECTS — bento ========================================== */
/* =================================================================== */
.v3-projects {
    background: var(--v3-bg-white);
    padding: clamp( 4rem, 8vw, 8rem ) 0;
}
.v3-projects__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.25rem;
}
.v3-proj {
    position: relative; overflow: hidden;
    border-radius: 18px; text-decoration: none;
    color: #fff; background: var(--v3-bg-cream);
    aspect-ratio: 4 / 3;
    display: block;
    isolation: isolate;
    /* Force a stable compositing layer so the rounded overflow clip survives the
     * child <img> scaling on hover. Without it Safari (WebKit) drops the
     * border-radius clip mid-hover and the corners snap square until a repaint. */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}
.v3-proj--feature { grid-row: span 2; aspect-ratio: auto; }
.v3-proj img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.v3-proj:hover img { transform: scale( 1.06 ); }
.v3-proj__meta {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1.5rem 1.75rem;
    background: linear-gradient( to top, rgba(0,0,0,0.9) 5%, rgba(0,0,0,0) 90% );
}
.v3-proj__loc {
    display: block; font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255, 0.9); margin-bottom: 0.4rem;
}
.v3-proj h3 {
    font-family: "Inter Tight", sans-serif;
    font-size: clamp( 18px, 1.6vw, 24px );
    font-weight: 800; letter-spacing: -0.015em; line-height: 1.15;
    margin: 0; color: #fff;
}
.v3-proj small {
    display: block; font-size: 12px;
    color: rgba(255,255,255,0.7); margin-top: 0.3rem;
}
.v3-proj--feature h3 { font-size: clamp( 28px, 2.6vw, 40px ); }

/* =================================================================== */
/* ===== PROCESS =================================================== */
/* =================================================================== */
.v3-process {
    background: var(--v3-bg);
    padding: clamp( 4rem, 8vw, 8rem ) 0;
}
.v3-process__list {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat( 3, 1fr );
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.v3-process__list li {
    padding: 2.25rem 2rem;
    background: var(--v3-bg-white);
    border-radius: 18px;
    transition: transform .35s, box-shadow .35s;
}
.v3-process__list li:hover {
    transform: translateY( -4px );
    box-shadow: 0 20px 40px -20px rgba(0,0,0,0.15);
}
.v3-process__num {
    display: inline-block;
    font-family: "Inter Tight", sans-serif;
    font-size: clamp( 56px, 6vw, 88px );
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--v3-accent);
    line-height: 0.85;
    margin-bottom: 1rem;
    -webkit-text-stroke: 1px var(--v3-accent);
    color: transparent;
}
.v3-process__list h3 {
    font-family: "Inter Tight", sans-serif;
    font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
    margin: 0 0 0.6rem;
}
.v3-process__list p {
    margin: 0; font-size: 15px; line-height: 1.6;
    color: var(--v3-text-mid);
}

/* =================================================================== */
/* ===== OWNERS — editorial split layout =========================== */
/* =================================================================== */
.v3-owners {
    background: var(--v3-bg-white);
    padding: clamp( 4rem, 8vw, 8rem ) 0;
}
.v3-owners .v3-container {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp( 2rem, 6vw, 6rem );
    align-items: start;
}
.v3-owners .v3-section-head {
    margin-bottom: 0;
    max-width: 100%;
    position: sticky;
    top: clamp( 2rem, 5vh, 5rem );
}
.v3-owners__grid {
    display: grid;
    grid-template-columns: repeat( 2, 1fr );
    gap: clamp( 1.5rem, 3vw, 2.5rem );
    max-width: none;
}
@media ( max-width: 960px ) {
    .v3-owners .v3-container { grid-template-columns: 1fr; gap: 2.5rem; }
    .v3-owners .v3-section-head { position: static; }
}
@media ( max-width: 600px ) {
    .v3-owners__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: none; margin: 0; }
}
.v3-owner__photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    background-size: cover;
    background-position: center;
    background-color: var(--v3-bg-cream);
    margin-bottom: 1rem;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.v3-owner__photo--ph {
    display: flex; align-items: center; justify-content: center;
    font-family: "Inter Tight", sans-serif;
    font-size: 100px; font-weight: 900; color: var(--v3-accent);
}
.v3-owner h3 {
    font-family: "Inter Tight", sans-serif;
    font-size: 22px; font-weight: 800;
    margin: 0 0 0.2rem; letter-spacing: -0.01em;
}
.v3-owner span {
    font-size: 13.5px; color: var(--v3-text-mid);
    letter-spacing: 0.04em;
}

/* =================================================================== */
/* ===== REVIEWS =================================================== */
/* =================================================================== */
.v3-reviews {
    background: var(--v3-bg);
    padding: clamp( 4rem, 8vw, 8rem ) 0;
}
.v3-reviews__grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.v3-review {
    background: var(--v3-bg-white);
    border-radius: 18px;
    padding: 2rem 1.75rem;
    transition: transform .35s, box-shadow .35s;
}
.v3-review:hover {
    transform: translateY( -4px );
    box-shadow: 0 20px 40px -20px rgba(0,0,0,0.15);
}
.v3-review__stars {
    color: var(--v3-gold); font-size: 18px;
    letter-spacing: 0.1em; margin-bottom: 1rem;
}
.v3-review__text {
    font-size: 15.5px; line-height: 1.65;
    color: var(--v3-text); margin: 0 0 1.5rem;
}
.v3-review__author strong {
    display: block;
    font-family: "Inter Tight", sans-serif;
    font-size: 15px; font-weight: 700;
}
.v3-review__author span {
    display: block;
    font-size: 13px; color: var(--v3-text-soft);
    margin-top: 0.15rem;
}

/* =================================================================== */
/* ===== ARTICLES ================================================== */
/* =================================================================== */
.v3-articles {
    background: var(--v3-bg-white);
    padding: clamp( 4rem, 8vw, 8rem ) 0;
}
.v3-articles__grid {
    display: grid; grid-template-columns: repeat( 3, 1fr );
    gap: 1.5rem;
}
.v3-article {
    color: var(--v3-text);
    text-decoration: none; display: block;
    transition: transform .35s;
}
.v3-article__photo {
    width: 100%; aspect-ratio: 16 / 11;
    background-size: cover; background-position: center;
    border-radius: 14px;
    background-color: var(--v3-bg-cream);
    margin-bottom: 1rem;
    transition: transform .5s;
}
.v3-article:hover .v3-article__photo { transform: scale( 1.02 ); }
.v3-article__meta {
    display: block; font-size: 12px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--v3-accent); margin-bottom: 0.4rem;
}
.v3-article h3 {
    font-family: "Inter Tight", sans-serif;
    font-size: 20px; font-weight: 800;
    letter-spacing: -0.01em; line-height: 1.25;
    margin: 0;
}

/* =================================================================== */
/* ===== FINAL CTA ================================================= */
/* =================================================================== */
.v3-final {
    background: var(--v3-bg-dark);
    color: #fff;
    padding: clamp( 5rem, 11vw, 10rem ) 0;
    text-align: center;
    overflow: hidden;
}
.v3-final .v3-display { color: #fff; }
.v3-final__title {
    font-size: clamp( 44px, 8vw, 144px );
    line-height: 0.92;
    letter-spacing: -0.04em;
    font-weight: 900;
    max-width: 18ch;
    margin: 0 auto;
}
.v3-final__sub {
    font-size: 17px; line-height: 1.6;
    color: rgba(255,255,255, 0.75);
    margin: 1.75rem auto 0; max-width: 580px;
}

/* =================================================================== */
/* ===== MOBILE ==================================================== */
/* =================================================================== */
@media ( max-width: 960px ) {
    .v3-hero__top { flex-direction: column; gap: 0.5rem; }
    .v3-tag--right { text-align: left; }
    .v3-hero__bottom { grid-template-columns: 1fr; gap: 1.5rem; }
    .v3-hero__meta { margin-left: 0; }
    .v3-about__grid { grid-template-columns: 1fr; }
    .v3-pillar-list { grid-template-columns: 1fr; }
    .v3-stats__grid,
    .v3-expertise__grid,
    .v3-projects__grid,
    .v3-process__list,
    .v3-articles__grid {
        grid-template-columns: repeat( 2, 1fr );
    }
    .v3-projects__grid { grid-template-rows: auto; }
    .v3-proj--feature { grid-row: span 1; aspect-ratio: 4 / 3; }
    .v3-section-head--row { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}
@media ( max-width: 600px ) {
    .v3-expertise__grid,
    .v3-projects__grid,
    .v3-process__list,
    .v3-articles__grid {
        grid-template-columns: 1fr;
    }
    .v3-stats__grid { grid-template-columns: repeat( 2, 1fr ); }
    .v3-stat { border-right: none; }
    .v3-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255, 0.14); }
    .v3-svc-card { min-height: 240px; }
}



/* ========================================================
 * === WOW-PASS v2 — AIR + EDITORIAL FX ===================
 * ======================================================== */

/* --- AIR: bump section vertical breathing ------------- */
.v3-about,
.v3-expertise,
.v3-projects,
.v3-reviews,
.v3-articles {
    padding: clamp(6rem, 13vw, 12rem) 0 !important;
}
.v3-stats { padding: clamp(5rem, 10vw, 8rem) 0 !important; }
.v3-final { padding: clamp(7rem, 16vw, 14rem) 0 !important; }

/* Slightly more space between section header and content grid */
.v3-section-head {
    margin-bottom: clamp(3rem, 6vw, 6rem) !important;
}


/* --- EDITORIAL BG NUMBERS: huge decorative section nums -- */
.v3-expertise,
.v3-projects,
.v3-reviews,
.v3-articles,
.v3-stats {
    position: relative;
    overflow: hidden;
}
.v3-expertise::before,
.v3-projects::before,
.v3-reviews::before,
.v3-articles::before,
.v3-stats::before {
    content: attr(data-bg-num);
    position: absolute;
    font-family: "Inter Tight", sans-serif;
    font-weight: 900;
    font-size: clamp(280px, 42vw, 720px);
    line-height: 0.78;
    letter-spacing: -0.06em;
    color: var(--v3-accent);
    opacity: 0.05;
    top: -3vw;
    right: -2vw;
    pointer-events: none;
    z-index: 0;
    user-select: none;
    will-change: transform;
}
.v3-stats::before {
    color: var(--v3-accent-2);
    opacity: 0.08;
}
.v3-expertise > .v3-container,
.v3-projects > .v3-container,
.v3-reviews > .v3-container,
.v3-articles > .v3-container,
.v3-stats > .v3-container {
    position: relative;
    z-index: 1;
}

/* --- PROJECT CARDS: image-zoom + caption-slide on hover -- */
.v3-proj {
    overflow: hidden;
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
    /* NO will-change: transform here — on a clipping parent it makes Chrome drop the
     * border-radius clip of the composited (scaling) child img → square corners on hover. */
}
.v3-proj img {
    transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.55s ease;
    will-change: transform;
    border-radius: inherit;   /* self-round the image so corners are rounded in EVERY state */
}
/* Do NOT transform the clip parent on hover — a transform on an element with
 * overflow:hidden+border-radius makes browsers square the corners of the zooming
 * child. Lift via shadow instead, so the rounded corners hold always. */
.v3-proj:hover { box-shadow: 0 20px 46px rgba(0,0,0,0.18); }
.v3-proj:hover img {
    transform: scale(1.08);
    filter: brightness(1.05) saturate(1.1);
}
/* (.v3-proj__meta hover lift removed — a transform on the bottom gradient overlay
 * made browsers square the card's lower corners on hover. Meta stays put now.) */

/* --- SECTION HEADERS: display-type tighter & bolder ------ */
.v3-display--lg {
    letter-spacing: -0.038em !important;
}
.v3-section-head__sub {
    max-width: 38ch !important;
}

/* --- REVIEWS cards: subtle hover lift -------------------- */
.v3-review {
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease;
}
.v3-review:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px -20px rgba(14, 31, 21, 0.18);
}

/* --- ARTICLES: bigger feel ------------------------------- */
.v3-article {
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.v3-article:hover {
    transform: translateY(-8px);
}

/* --- v3-display scroll-entry initial state (GSAP picks up) */
.v3-display[data-gsap-rise] {
    overflow: hidden;
}
.v3-display[data-gsap-rise] .v3-rise-line {
    display: inline-block;
    overflow: hidden;
    line-height: 1.05;
    vertical-align: top;
    padding: 0 0.05em;
    margin: 0 -0.05em;
}
.v3-display[data-gsap-rise] .v3-rise-line > span {
    display: inline-block;
    transform: translateY(120%);
    will-change: transform;
}

/* --- prefers-reduced-motion fallbacks -------------------- */
@media (prefers-reduced-motion: reduce) {
    .v3-marquee__track { animation: none !important; }
    .v3-display[data-gsap-rise] .v3-rise-line > span { transform: none; }
}


/* === Hero V5 mouse-tracking transforms (via CSS vars from wow.js) === */
.v3-hero--v5 {
    --hero-mx: 0;
    --hero-my: 0;
    perspective: 1400px;
}
.v3-hero-v5__badge {
    transform: rotate(calc(var(--hero-mx) * 18deg)) translate3d(calc(var(--hero-mx) * 12px), calc(var(--hero-my) * 8px), 0);
    transition: transform 0.05s linear;
    will-change: transform;
}
.v3-hero-v5__title {
    transform: rotateY(calc(var(--hero-mx) * 3.5deg)) rotateX(calc(var(--hero-my) * -2deg)) translate3d(calc(var(--hero-mx) * -6px), 0, 0);
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    will-change: transform;
}
.v3-hero-v5__projects {
    transform: translate3d(calc(var(--hero-mx) * 14px), calc(var(--hero-my) * 8px), 0);
    will-change: transform;
}
.v3-hero-v5__follow {
    transform: translate3d(calc(var(--hero-mx) * 6px), calc(var(--hero-my) * 4px), 0);
    will-change: transform;
}
.v3-hero-v5__top-info {
    transform: translate3d(calc(var(--hero-mx) * -4px), 0, 0);
    will-change: transform;
}
@media (max-width: 720px), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .v3-hero-v5__badge,
    .v3-hero-v5__title,
    .v3-hero-v5__projects,
    .v3-hero-v5__follow,
    .v3-hero-v5__top-info {
        transform: none !important;
    }
}


/* === Hero V5 — more breathing room (header→hero, title→projects) === */
.v3-hero--v5 {
    padding-top: clamp(5rem, 10vw, 9rem) !important;
}
.v3-hero-v5__projects {
    margin-top: clamp(4rem, 7vw, 6rem) !important;
}
.v3-hero-v5__top-info {
    margin-bottom: clamp(2rem, 5vw, 3.5rem) !important;
}



/* === Section BG patterns ================================ */
.v3-stats {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1.5px, transparent 0);
    background-size: 26px 26px;
}
.v3-expertise {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(20,20,20,0.045) 1px, transparent 0);
    background-size: 32px 32px;
}
.v3-projects {
    background-image:
        linear-gradient(rgba(20,20,20,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,20,20,0.022) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: 50% 50%;
}
.v3-articles {
    background-image:
        linear-gradient(90deg, rgba(20,20,20,0.05) 1px, transparent 1px);
    background-size: 220px 100%;
}
.v3-final {
    background-image:
        repeating-linear-gradient(45deg, rgba(91,156,110,0.045) 0 2px, transparent 2px 90px);
}

/* === Mouse-parallax on bg-numbers ======================= */
.v3-expertise::before,
.v3-projects::before,
.v3-articles::before,
.v3-stats::before {
    transform: translate3d(calc(var(--page-mx, 0) * 16px), calc(var(--page-my, 0) * 9px), 0);
}

/* === Reviews — REPLACE bg-num with massive quote mark === */
.v3-reviews::before {
    content: "\201C" !important;  /* “ left double quote */
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 400 !important;
    font-size: clamp(420px, 65vw, 1100px) !important;
    line-height: 0.65 !important;
    letter-spacing: 0 !important;
    color: var(--v3-accent) !important;
    opacity: 0.08 !important;
    top: -10vw !important;
    right: 2vw !important;
    transform: translate3d(calc(var(--page-mx, 0) * 12px), calc(var(--page-my, 0) * 8px), 0) !important;
}

/* === Vertical gutter labels (outside container, parallax) === */
.v3-stats::after,
.v3-expertise::after,
.v3-projects::after,
.v3-reviews::after,
.v3-articles::after {
    position: absolute;
    font-family: "Inter Tight", sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--v3-text-mid);
    opacity: 0.55;
    pointer-events: none;
    z-index: 2;
    left: 1.5rem;
    top: 50%;
    transform-origin: left top;
    white-space: nowrap;
    transform: rotate(-90deg) translate3d(0, calc(var(--page-my, 0) * 10px), 0);
}
.v3-stats::after     { content: "EST · 2010 · BUFFALO GROVE"; color: rgba(255,255,255,0.45); }
.v3-expertise::after { content: "OUR EXPERTISE · 6 SERVICES"; }
.v3-projects::after  { content: "SELECTED WORK · CHICAGOLAND"; }
.v3-reviews::after   { content: "TESTIMONIALS · 5 ★ AVERAGE"; }
.v3-articles::after  { content: "READING ROOM · INSIGHTS"; }
@media (max-width: 1400px) {
    .v3-stats::after, .v3-expertise::after, .v3-projects::after,
    .v3-reviews::after, .v3-articles::after { display: none; }
}

/* === Service cards — corner ink-blob reveal on hover ==== */
.v3-svc-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.v3-svc-card::after {
    content: "";
    position: absolute;
    top: -30px; right: -30px;
    width: 180px; height: 180px;
    background-image: url("/wp-content/themes/ads/assets/btn-mask.png?v=brand");
    background-size: 7100% 100%;
    background-position: 32% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transform: rotate(8deg) scale(0.55);
    transform-origin: 80% 20%;
    transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.v3-svc-card:hover::after {
    opacity: 0.42;
    transform: rotate(8deg) scale(1);
}
.v3-svc-card > * { position: relative; z-index: 1; }

/* === Article cards — diagonal sprite stroke on hover ==== */
.v3-article {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.v3-article::after {
    content: "";
    position: absolute;
    inset: -20% -40%;
    background-image: url("/wp-content/themes/ads/assets/btn-mask.png?v=brand");
    background-size: 7100% 100%;
    background-position: 45% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transform: rotate(-15deg) scale(0.6);
    transform-origin: 50% 50%;
    transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.v3-article:hover::after {
    opacity: 0.25;
    transform: rotate(-15deg) scale(1);
}
.v3-article > * { position: relative; z-index: 1; }

/* === Project cards — diagonal shimmer on hover ========== */
/* (Duplicate isolation:isolate dropped — already set on the main .v3-proj block;
 * the shimmer's mix-blend-mode: screen still isolates via that stacking context.) */
.v3-proj > .v3-proj__shimmer,
.v3-proj::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 35%,
        rgba(255,255,255,0.18) 48%,
        rgba(91,156,110,0.25) 52%,
        transparent 65%);
    transform: translateX(-110%);
    transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
}
.v3-proj:hover::before { transform: translateX(110%); }

/* === Review cards — perspective tilt on global mouse ==== */
.v3-review {
    transform-style: preserve-3d;
    transform: perspective(1400px)
               rotateY(calc(var(--page-mx, 0) * 2deg))
               rotateX(calc(var(--page-my, 0) * -1.5deg));
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease;
    will-change: transform;
}
.v3-review:hover {
    transform: perspective(1400px)
               rotateY(calc(var(--page-mx, 0) * 4deg))
               rotateX(calc(var(--page-my, 0) * -3deg))
               translateY(-8px) scale(1.02);
    box-shadow: 0 30px 60px -25px rgba(14, 31, 21, 0.22);
}

/* === Final CTA — twinkling decorative sparkles ========== */
.v3-final {
    position: relative;
    overflow: hidden;
}
.v3-final > .v3-final__spark,
.v3-final::before,
.v3-final::after {
    pointer-events: none;
    z-index: 1;
}
.v3-final::before {
    content: "\2726"; /* ✦ */
    position: absolute;
    top: 12%;
    left: 7%;
    font-size: 72px;
    color: var(--v3-accent-2);
    opacity: 0.4;
    animation: v3-twinkle 4.5s ease-in-out infinite;
    transform: translate3d(calc(var(--page-mx, 0) * 14px), calc(var(--page-my, 0) * 10px), 0);
}
.v3-final::after {
    content: "\2726";
    position: absolute;
    bottom: 14%;
    right: 9%;
    font-size: 54px;
    color: var(--v3-accent);
    opacity: 0.5;
    animation: v3-twinkle 5.2s ease-in-out infinite 1.2s;
    transform: translate3d(calc(var(--page-mx, 0) * -10px), calc(var(--page-my, 0) * -8px), 0);
}
@keyframes v3-twinkle {
    0%, 100% { opacity: 0.18; transform: scale(0.85) rotate(0deg) translate3d(calc(var(--page-mx, 0) * 14px), calc(var(--page-my, 0) * 10px), 0); }
    50%      { opacity: 0.55; transform: scale(1.15) rotate(180deg) translate3d(calc(var(--page-mx, 0) * 14px), calc(var(--page-my, 0) * 10px), 0); }
}
.v3-final > .v3-container { position: relative; z-index: 2; }

/* === About section — soft offset bg shape behind owners === */
.v3-about {
    position: relative;
    overflow: hidden;
}
.v3-about::before {
    content: "";
    position: absolute;
    width: 60vw;
    height: 60vw;
    max-width: 800px;
    max-height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(91,156,110,0.18), transparent 60%);
    top: -15vw;
    left: -15vw;
    transform: translate3d(calc(var(--page-mx, 0) * 18px), calc(var(--page-my, 0) * 12px), 0);
    pointer-events: none;
    z-index: 0;
    filter: blur(20px);
}
.v3-about > .v3-container { position: relative; z-index: 1; }

/* === Reduced motion fallbacks =========================== */
@media (max-width: 720px), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .v3-review { transform: none !important; }
    .v3-final::before, .v3-final::after { animation: none; transform: none !important; }
    .v3-about::before { transform: none !important; }
    .v3-expertise::before, .v3-projects::before,
    .v3-articles::before, .v3-stats::before,
    .v3-reviews::before { transform: none !important; }
    .v3-stats::after, .v3-expertise::after, .v3-projects::after,
    .v3-reviews::after, .v3-articles::after { display: none; }
}


/* =========================================================
 * === DOT-GRID + GUTTER LABELS — extend pattern to hero ===
 * =========================================================
 */

/* --- Hero V5: dot-grid on cream + vertical label on right gutter --- */
.v3-hero--v5 {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(20,20,20,0.11) 1.6px, transparent 0);
    background-size: 28px 28px;
}


/* --- Final CTA: swap diagonal stripes → dot-grid (matches stats) --- */
.v3-final {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.075) 1.5px, transparent 0) !important;
    background-size: 28px 28px !important;
}

/* --- Reduced motion / mobile: pattern stays, label transform reset --- */
@media (max-width: 720px), (pointer: coarse), (prefers-reduced-motion: reduce) {

}


/* === Service card hover — REPLACE green blob with editorial accent === */
/* Kill the old ink-blob ::after */
.v3-svc-card::after,
.v3-svc-card:hover::after {
    display: none !important;
}

/* New top-edge accent line draws on hover */
.v3-svc-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: var(--v3-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 2;
    pointer-events: none;
}
.v3-svc-card:hover::before {
    transform: scaleX(1);
}

/* Card lift + soft shadow on hover */
.v3-svc-card {
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.5s ease,
                background-color 0.4s ease;
}
.v3-svc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -30px rgba(14, 31, 21, 0.18);
}

/* Big number — color shift + slight scale */
.v3-svc-card__num {
    transition: color 0.4s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
    display: inline-block;
    transform-origin: left top;
}
.v3-svc-card:hover .v3-svc-card__num {
    color: var(--v3-accent);
    transform: scale(1.08);
}

/* Arrow slide right */
.v3-svc-card .v3-arrow {
    transition: letter-spacing 0.35s ease, color 0.3s ease;
    display: inline-block;
}
.v3-svc-card:hover .v3-arrow {
    letter-spacing: 0.06em;
    color: var(--v3-accent);
}


/* === /lab/ — line-mask container for SplitType reveals === */
body.page-lab .v3-rline-mask {
    display: block;
    overflow: hidden;
    line-height: 1.0;
    padding: 0.04em 0;
}
body.page-lab .v3-rline {
    display: block;
    will-change: transform;
}
/* Hide non-lab default char-stagger spans visibility if already wrapped before SplitType replaced them */
body.page-lab .v3-display .v3-char,
body.page-lab .v3-display .v3-char i {
    transform: none !important;
}

/* === Subtle lab-style background video for hero variant 5 === */
.v3-hero--v5 { position: relative; overflow: hidden; }
.v3-hero-v5__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.v3-hero-v5__bg-video {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, calc(100vh * 16 / 9));
    height: max(100%, calc(100vw * 9 / 16));
    min-width: 100%; min-height: 100%;
    object-fit: cover;
    opacity: 0.30;
    will-change: opacity;
    /* filter removed for perf — was: grayscale(0.15) contrast(0.94) */
    object-position: 70% 50%;
}
.v3-hero-v5__bg-veil {
    position: absolute; inset: 0;
    /* Base-layer veil — cream (legacy); overridden by dark.css theme-dark layer. */
    background:
        radial-gradient(ellipse at 75% 28%, transparent 0%, #FFFFFF 78%),
        linear-gradient(180deg, #FFFFFF 0%, transparent 18%, transparent 70%, #FFFFFF 100%);
}
.v3-hero-v5__body { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
    .v3-hero-v5__bg-video { display: none; }
}
/* .v3-hero--v5 background intentionally NOT forced here — dark.css owns it. */

/* === Background dot-grid canvas (shared with /lab/) === */
#lab-bg-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}
.v3-hero, .v3-hero--v5, .v3-section { position: relative; z-index: 1; }

/* =================================================================== */
/* ===== FULL-BLEED STATEMENT BREAK (v3-bleed) ===================== */
/* =================================================================== */
.v3-bleed {
    position: relative;
    width: 100vw;
    /* -1px top & bottom closes the sub-pixel seam above AND below; the 50% left
       keeps the full-bleed centering (a literal `margin:-1px 0` would clobber it
       and shift the band off-center). */
    margin: -1px 0 -1px 50%;
    transform: translateX(-50%);
    height: clamp(420px, 60vw, 720px);
    overflow: hidden;
    display: flex; align-items: center;
    background: #0F1410;
}
.v3-bleed__media { position: absolute; inset: 0; z-index: 0; }
.v3-bleed__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 12s linear;
}
.v3-bleed:hover .v3-bleed__media img { transform: scale(1.05); }
.v3-bleed__veil {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg, rgba(15,20,16,0.78) 0%, rgba(15,20,16,0.42) 60%, rgba(15,20,16,0.78) 100%);
}
.v3-bleed__copy {
    position: relative; z-index: 2;
    max-width: 1480px; width: 100%;
    margin: 0 auto;
    padding: 0 clamp(1.75rem, 4vw, 3.5rem);
    display: grid; gap: clamp(1rem, 2vw, 1.6rem);
    color: #fff;
}
.v3-bleed__copy--right { margin-left: auto; text-align: right; }
.v3-bleed__copy--right .v3-bleed__title,
.v3-bleed__copy--right .v3-bleed__sub { margin-left: auto; }
.v3-bleed__eyebrow {
    font-family: "Inter Tight", "Inter", sans-serif;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #C9D6CB;
}
.v3-bleed__title {
    margin: 0;
    font-family: "Inter Tight", "Inter", sans-serif;
    font-weight: 800;
    font-size: clamp(48px, 7vw, 116px);
    line-height: 0.98;
    letter-spacing: -0.04em;
    color: #fff;
    max-width: 18ch;
}
.v3-bleed__title em {
    font-style: italic;
    font-family: "Instrument Serif", "Georgia", serif;
    font-weight: 400;
    color: #9BB59E;
    letter-spacing: -0.01em;
}
.v3-bleed__sub {
    margin: 0;
    font-size: clamp(15px, 1.15vw, 18.5px);
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
    max-width: 52ch;
}
@media (max-width: 768px) {
    .v3-bleed { height: clamp(360px, 80vw, 520px); }
    .v3-bleed__title { font-size: clamp(40px, 11vw, 64px); }
    .v3-bleed__copy--right { text-align: left; margin-left: 0; }
    .v3-bleed__copy--right .v3-bleed__title,
    .v3-bleed__copy--right .v3-bleed__sub { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .v3-bleed__media img { transition: none; }
    .v3-bleed:hover .v3-bleed__media img { transform: none; }
}

/* =================================================================== */
/* ===== EXPERTISE CARD — XL variant with photo header ============= */
/* =================================================================== */
.v3-expertise__grid:has(.v3-svc-card--xl) {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}
.v3-svc-card--xl {
    padding: 0;
    min-height: 0;
    display: flex; flex-direction: column;
}
.v3-svc-card--xl .v3-svc-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #0F1410;
    border-radius: 18px 18px 0 0;
}
.v3-svc-card--xl .v3-svc-card__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}
.v3-svc-card--xl:hover .v3-svc-card__media img { transform: scale(1.05); }
.v3-svc-card--xl .v3-svc-card__body {
    position: relative;
    display: flex; flex-direction: column;
    padding: 2.25rem 2.25rem 2rem;
    flex-grow: 1;
}
.v3-svc-card--xl .v3-svc-card__num {
    position: absolute;
    top: 1.5rem; right: 1.75rem;
}
.v3-svc-card--xl .v3-svc-card__icon {
    color: var(--v3-accent);
    margin: -3.5rem 0 1.25rem;
    width: 64px; height: 64px;
    background: var(--v3-bg-white);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 14px 30px -14px rgba(0,0,0,0.22);
}
.v3-svc-card--xl .v3-svc-card__icon svg { width: 36px; height: 36px; }
.v3-svc-card--xl h3 {
    font-size: clamp(22px, 1.8vw, 28px);
    letter-spacing: -0.02em;
    margin: 0 0 0.85rem;
}
.v3-svc-card--xl p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}
/* Disable the diagonal-stroke ::after on XL variant so the media owns the visual */
.v3-svc-card--xl::after { display: none; }

@media (max-width: 900px) {
    .v3-expertise__grid:has(.v3-svc-card--xl) {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* =================================================================== */
/* ===== STATS — compact pass ====================================== */
/* =================================================================== */
.v3-stats { padding: clamp(2.5rem, 5vw, 4rem) 0 !important; }
.v3-stats .v3-numbered { margin-bottom: 1.25rem; }
.v3-stat strong {
    font-size: clamp(40px, 4.5vw, 72px);
    margin-bottom: 0.35rem;
}
.v3-stat { padding: 0.25rem 1.5rem 0.25rem 0; }
.v3-stats::before {
    font-size: clamp(180px, 28vw, 460px);
    top: -2vw;
}

/* =================================================================== */
/* ===== Inline SVG logo sizing ==================================== */
/* =================================================================== */
.site-logo__img svg {
    display: block;
    height: 60px;
    width: auto;
    max-width: 100%;
}
.site-logo--footer .site-logo__img svg {
    height: 76px;
}

/* =================================================================== */
/* ===== Footer logo — flip dark fills to cream (white-on-dark) ==== */
/* =================================================================== */
/* Greens stay var(--v3-accent); cls-14 pale highlight left alone.    */
.site-logo--footer .site-logo__img .cls-1,
.site-logo--footer .site-logo__img .cls-2,
.site-logo--footer .site-logo__img .cls-3,
.site-logo--footer .site-logo__img .cls-5,
.site-logo--footer .site-logo__img .cls-6,
.site-logo--footer .site-logo__img .cls-7,
.site-logo--footer .site-logo__img .cls-8,
.site-logo--footer .site-logo__img .cls-10,
.site-logo--footer .site-logo__img .cls-11,
.site-logo--footer .site-logo__img .cls-12,
.site-logo--footer .site-logo__img .cls-13,
.site-logo--footer .site-logo__img .cls-15,
.site-logo--footer .site-logo__img .cls-16,
.site-logo--footer .site-logo__img .cls-17,
.site-logo--footer .site-logo__img .cls-18,
.site-logo--footer .site-logo__img .cls-19,
.site-logo--footer .site-logo__img .cls-20,
.site-logo--footer .site-logo__img .cls-22,
.site-logo--footer .site-logo__img .cls-23,
.site-logo--footer .site-logo__img .cls-24,
.site-logo--footer .site-logo__img .cls-25,
.site-logo--footer .site-logo__img .cls-26 {
    fill: #FBF9F5 !important;
}

/* =================================================================== */
/* ===== Hero background video — universal for inner pages ========= */
/* =================================================================== */
.about-hero,
.contact-hero,
.process-hero,
.archive-hero,
.port-hero,
.sa-hero,
.blog-hero,
.error-page {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.about-hero > .container,
.contact-hero > .container,
.process-hero > .container,
.archive-hero > .container,
.port-hero > .container,
.sa-hero > .container,
.blog-hero > .container,
.error-page > .container {
    position: relative;
    z-index: 2;
}
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.hero-bg__video {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, calc(100vh * 16 / 9));
    height: max(100%, calc(100vw * 9 / 16));
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    opacity: 0.4;
    object-position: 70% 50%;
    will-change: opacity;
}
.hero-bg__veil {
    position: absolute;
    inset: 0;
    /* Protect the LEFT (heading/sub) and the BOTTOM (facts row) for contrast, but
     * open up the upper-right empty zone so the video reads clearly there. */
    background:
        linear-gradient( 95deg, rgba(255,255,255,0.84) 0%, rgba(255,255,255,0.45) 45%, rgba(255,255,255,0.10) 100% ),
        linear-gradient( 180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.15) 55%, rgba(255,255,255,0.50) 100% );
}
@media (prefers-reduced-motion: reduce) {
    .hero-bg__video { display: none; }
}

/* =================================================================== */
/* ===== Footer logo override — light fills go transparent ========= */
/* =================================================================== */
/* Earlier rule flipped ALL non-green classes to cream → the SVG's    */
/* background-card fills (light-class paths) became a visible cream   */
/* rectangle on the dark footer. Force the light classes transparent. */
.site-logo--footer .site-logo__img .cls-5,
.site-logo--footer .site-logo__img .cls-6,
.site-logo--footer .site-logo__img .cls-8,
.site-logo--footer .site-logo__img .cls-13,
.site-logo--footer .site-logo__img .cls-16,
.site-logo--footer .site-logo__img .cls-17,
.site-logo--footer .site-logo__img .cls-18,
.site-logo--footer .site-logo__img .cls-20 {
    fill: transparent !important;
}

/* =================================================================== */
/* ===== Hero bg video — fade in on first playing event ============= */
/* =================================================================== */
.hero-bg__video,
.v3-hero-v5__bg-video {
    opacity: 0;
    transition: opacity 700ms cubic-bezier(.2,.7,.2,1);
}
.hero-bg__video.is-playing { opacity: 0.58; }
.v3-hero-v5__bg-video.is-playing { opacity: 0.62; }

/* =================================================================== */
/* ===== ABOUT PAGE — v3 style pass (CSS-only override) ============ */
/* =================================================================== */
/* Scope everything under .about-single so other pages stay untouched. */

/* ---- Eyebrow: mono-feel uppercase tag ---- */
.about-single .eyebrow {
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--v3-accent);
    margin-bottom: 1rem;
    position: relative;
    padding-left: 1.5rem;
}
.about-single .eyebrow::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 1rem; height: 1px;
    background: currentColor;
    transform: translateY(-50%);
}

/* ---- HERO ---- */
.about-hero { padding: clamp(7rem, 14vw, 12rem) 0 clamp(4rem, 8vw, 7rem); }
.about-hero__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: center;
}
.about-hero__title {
    font-family: "Inter Tight", "Inter", sans-serif;
    font-weight: 800;
    font-size: clamp(44px, 6.6vw, 104px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.04em !important;
    color: var(--v3-text) !important;
    margin: 0 0 1.5rem !important;
    max-width: 18ch;
}
.about-hero__title em {
    font-style: italic;
    font-family: "Instrument Serif", "Georgia", serif;
    font-weight: 400;
    color: var(--v3-accent);
    letter-spacing: -0.01em;
}
.about-hero__sub {
    font-family: "Inter", sans-serif;
    font-size: clamp(16px, 1.25vw, 19px) !important;
    line-height: 1.55 !important;
    color: var(--v3-text-mid) !important;
    margin: 0 0 2rem !important;
    max-width: 52ch;
}
.about-hero__cta { gap: 0.75rem !important; }
.about-hero__images {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 60px -28px rgba(15,20,16,0.32);
}
.about-hero__img-main {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 18px;
}
.about-hero__img-accent {
    position: absolute; bottom: -1.5rem; right: -1.5rem;
    width: 42%; aspect-ratio: 1 / 1;
    border-radius: 18px; object-fit: cover;
    border: 6px solid #fff;
    box-shadow: 0 20px 40px -18px rgba(15,20,16,0.4);
}
@media (max-width: 900px) {
    .about-hero { padding: clamp(5rem, 14vw, 8rem) 0 clamp(3rem, 8vw, 5rem); }
    .about-hero__grid { grid-template-columns: 1fr; }
    .about-hero__images { aspect-ratio: 4 / 3; max-width: 600px; margin: 0 auto; }
    .about-hero__img-accent { width: 38%; bottom: -1rem; right: -1rem; }
}

/* ---- CTAs: v3-btn look ---- */
.about-single .btn--primary {
    background: var(--v3-text) !important;
    border-color: var(--v3-text) !important;
    color: #fff !important;
    padding: 0.95rem 1.6rem !important;
    font-family: "Inter Tight", sans-serif !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    letter-spacing: 0.02em !important;
    border-radius: 999px !important;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s !important;
}
.about-single .btn--primary:hover {
    background: var(--v3-accent) !important;
    border-color: var(--v3-accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -16px rgba(31,121,54,0.55);
}
.about-single .btn--outline {
    background: transparent !important;
    border: 1px solid rgba(15,20,16,0.18) !important;
    color: var(--v3-text) !important;
    padding: 0.95rem 1.6rem !important;
    font-family: "Inter Tight", sans-serif !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    border-radius: 999px !important;
    transition: all .35s cubic-bezier(.2,.7,.2,1) !important;
}
.about-single .btn--outline:hover {
    background: var(--v3-text) !important;
    border-color: var(--v3-text) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* ---- STORY section ---- */
.about-story {
    padding: clamp(5rem, 10vw, 8rem) 0 !important;
    background: var(--v3-bg-cream);
}
.about-story__grid {
    grid-template-columns: 1.3fr 1fr !important;
    gap: clamp(2.5rem, 5vw, 5rem) !important;
    align-items: start;
}
.about-story__title {
    font-family: "Inter Tight", sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(32px, 4.5vw, 64px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
    margin: 0.5rem 0 1.5rem !important;
    max-width: 18ch !important;
    color: var(--v3-text) !important;
}
.about-story__title em {
    font-style: italic;
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: var(--v3-accent);
}
.about-story__body {
    font-family: "Inter", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
    color: var(--v3-text-mid) !important;
}
.about-story__body p { margin: 0 0 1.25rem !important; }
.about-story__quotes blockquote {
    border-left: 3px solid var(--v3-accent) !important;
    padding: 0.25rem 0 0.25rem 1.5rem !important;
    margin: 0 !important;
    background: transparent !important;
}
.about-story__quotes blockquote p {
    font-family: "Inter Tight", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
    font-style: normal !important;
    color: var(--v3-text) !important;
    margin: 0 0 0.5rem !important;
}
.about-story__quotes cite {
    font-family: "Inter", sans-serif !important;
    font-size: 12.5px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    color: var(--v3-text-soft) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* ---- STATS / By the numbers section ---- */
.about-single .section.section--alt {
    background: var(--v3-bg-dark) !important;
    color: #fff !important;
    padding: clamp(5rem, 9vw, 7rem) 0 !important;
}
.about-single .section.section--alt .eyebrow {
    color: var(--v3-accent-2) !important;
}
.about-single .section.section--alt .section__head h2,
.about-single .section.section--alt h2 {
    font-family: "Inter Tight", sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(28px, 3.6vw, 52px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    color: #fff !important;
    margin: 0.5rem 0 1.25rem !important;
}
.about-single .section.section--alt p {
    color: rgba(255,255,255,0.72) !important;
}
.about-single .section.section--alt .stats-grid,
.about-single .section.section--alt [class*="stat"] {
    color: #fff !important;
}

/* ---- PILLARS — convert to v3-svc-card-like rhythm ---- */
.about-pillars {
    padding: clamp(5rem, 10vw, 8rem) 0 !important;
    background: #fff;
}
.about-pillars .section__head h2 {
    font-family: "Inter Tight", sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(32px, 4.5vw, 64px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
    margin: 0.5rem 0 0 !important;
    color: var(--v3-text) !important;
    max-width: 22ch;
}
.about-pillars .pillars-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
}
.pillar-card {
    background: var(--v3-bg-cream) !important;
    border: none !important;
    border-radius: 18px !important;
    padding: 2.25rem 1.85rem 1.85rem !important;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s !important;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.pillar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -25px rgba(15,20,16,0.2);
}
.pillar-card__num {
    font-family: "Inter Tight", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    color: var(--v3-accent) !important;
    margin-bottom: 1.5rem !important;
}
.pillar-card h3 {
    font-family: "Inter Tight", sans-serif !important;
    font-size: clamp(20px, 1.8vw, 26px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    margin: 0 0 0.65rem !important;
    color: var(--v3-text) !important;
}
.pillar-card p {
    font-family: "Inter", sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--v3-text-mid) !important;
    margin: 0 !important;
}
@media (max-width: 880px) {
    .about-pillars .pillars-grid { grid-template-columns: 1fr !important; }
}

/* ---- TEAM section ---- */
.about-team {
    padding: clamp(5rem, 10vw, 8rem) 0 !important;
    background: var(--v3-bg-cream) !important;
}
.about-team .section__head h2 {
    font-family: "Inter Tight", sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(32px, 4.5vw, 64px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
    margin: 0.5rem 0 0 !important;
    color: var(--v3-text) !important;
}
.team-card__photo {
    border-radius: 18px !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}
.team-card:hover .team-card__photo { transform: scale(1.03); }
.team-card__photo--initials {
    background: var(--v3-text) !important;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter Tight", sans-serif;
    font-weight: 900;
    font-size: clamp(48px, 6vw, 84px);
    letter-spacing: -0.04em;
}
.team-card h3 {
    font-family: "Inter Tight", sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 1rem 0 0.15rem !important;
    color: var(--v3-text) !important;
}
.team-card__role {
    font-family: "Inter", sans-serif !important;
    font-size: 12.5px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--v3-accent) !important;
    font-weight: 600 !important;
}
.team-card__bio {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    color: var(--v3-text-mid) !important;
    margin-top: 0.5rem !important;
}

/* ---- Section heads with eyebrow + display title pattern ---- */
.about-single .section__head {
    max-width: 920px !important;
    margin-bottom: clamp(2rem, 4vw, 3.5rem) !important;
}


.site-footer { margin-top: 0 !important; }
}


@layer passes {
/* =================================================================== */
/* ===== ABOUT PAGE — v3 pass #2 (tighten hero + bleed/marquee) ==== */
/* =================================================================== */

/* ---- Hero: half the vertical space, smaller display cap ---- */
.about-hero { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 4rem); }
.about-hero__grid {
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
}
.about-hero__title {
    font-size: clamp(34px, 4.2vw, 64px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    max-width: 20ch;
    margin: 0 0 1.1rem;
}
.about-hero__title em {
    font-style: italic;
    font-family: "Instrument Serif", "Georgia", serif;
    font-weight: 400;
    color: var(--v3-accent);
    letter-spacing: -0.01em;
}
.about-hero__sub {
    font-size: clamp(15px, 1.05vw, 17px);
    margin-bottom: 1.5rem;
}
.about-hero__images { aspect-ratio: 5 / 4; }
@media (max-width: 900px) {
    .about-hero__grid { grid-template-columns: 1fr; }
    .about-hero__images { aspect-ratio: 4 / 3; max-width: 580px; margin: 0 auto; }
}

/* ---- v3-numbered marker tightening on inner-page sections ---- */
.about-single .v3-numbered,
.about-single .v3-numbered--on-dark { margin-bottom: 2rem; }

/* ---- Display H2 em accents (story / stats / pillars / team) ---- */
.about-story__title em,
.about-single .section.section--alt h2 em,
.about-single .about-pillars h2 em,
.about-single .about-team h2 em {
    font-style: italic;
    font-family: "Instrument Serif", "Georgia", serif;
    font-weight: 400;
    color: var(--v3-accent);
    letter-spacing: -0.01em;
}
.about-single .section.section--alt h2 em {
    color: var(--v3-accent-2);
}

/* ---- v3-bleed: ensure on About page it renders right ---- */
.about-single .v3-bleed { margin: clamp(2rem, 5vw, 4rem) 0; }

/* ---- Marquee: small breathing room ---- */
.about-single + section,
.about-single .v3-marquee { background: var(--v3-text); }

/* ---- Hide redundant eyebrows that are replaced by v3-numbered ---- */
.about-story__copy .eyebrow,
.about-pillars .section__head .eyebrow,
.about-team .section__head .eyebrow,
.about-single .section.section--alt .section__head .eyebrow {
    display: none;
}

/* =================================================================== */
/* ===== ABOUT — pass #3 — proportions, bleed fix, polish ========== */
/* =================================================================== */

/* ---- HERO: better column ratio + narrower title for 2 cleaner lines ---- */
.about-hero__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
}
.about-hero__title {
    font-size: clamp(34px, 3.8vw, 56px);
    line-height: 1.02;
    max-width: 22ch;
}
.about-hero__images {
    aspect-ratio: 4 / 3;
}

/* ---- MARQUEE: scale down on inner pages (homepage marquee stays big) ---- */
.about-single .v3-marquee { padding: 0.75rem 0; }
.about-single .v3-marquee__track {
    font-size: clamp(18px, 2vw, 30px);
    gap: 1.75rem;
    letter-spacing: -0.02em;
}
.about-single .v3-marquee__sep { font-size: 0.45em; }

/* ---- v3-BLEED: fix the broken breakout ---- */
/* Previous rule used `margin: x 0` which clobbered the           */
/* `margin-left: 50%` that lets .v3-bleed span the full viewport width.    */
.about-single .v3-bleed {
    margin: 0;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* ---- TEAM: bigger photos, asymmetric feel, less empty space ---- */
.about-team {
    padding: clamp(4rem, 8vw, 7rem) 0 clamp(4rem, 8vw, 6rem);
}
.about-team .team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    max-width: 1000px;
    margin: 0 auto;
}
.about-team .team-card {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: center;
}
.about-team .team-card__photo {
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    width: 100%;
    height: auto;
}
.about-team .team-card > *:not(.team-card__photo) {
    /* nothing — children flow into second grid column naturally */
}
.about-team .team-card h3 {
    font-size: clamp(20px, 1.9vw, 26px);
    margin: 0 0 0.35rem;
}
.about-team .team-card__role {
    margin-bottom: 0.85rem;
    display: block;
}
.about-team .team-card__bio {
    font-size: 15px;
    line-height: 1.6;
}
@media (max-width: 880px) {
    .about-team .team-grid { grid-template-columns: 1fr; }
    .about-team .team-card { grid-template-columns: 1fr 1.2fr; }
}

/* ---- PORTFOLIO STRIP: 18px radius like .v3-proj on home ---- */
.portfolio-strip__card {
    border-radius: 18px;
}
.portfolio-strip__head h2 {
    font-family: "Inter Tight", sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 3.6vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

/* ---- CTA BANNER: switch black bg to dark-green (v3-bg-dark) ---- */
.cta-banner {
    background: var(--v3-bg-dark);
}
.cta-banner h2 {
    font-family: "Inter Tight", sans-serif;
    font-weight: 800;
    letter-spacing: -0.035em;
}
.cta-banner .eyebrow {
    color: var(--v3-accent-2);
}

/* =================================================================== */
/* ===== CTA Banner — v3-stats/v3-final styling (dark green) ======= */
/* =================================================================== */
.cta-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--v3-bg-dark);
    color: #fff;
    padding: clamp(5rem, 11vw, 9rem) 0;
    text-align: left;
}
/* Image-backed variant: real project photo behind a dark gradient veil.
 * --cta-bg-image is set inline on the section element by the template. */
.cta-banner--has-image {
    background-color: #0A0B0D;
    background-image:
        linear-gradient(115deg, rgba(10, 11, 13, 0.92) 0%, rgba(10, 11, 13, 0.62) 55%, rgba(10, 11, 13, 0.35) 100%),
        var(--cta-bg-image);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

/* Huge ghosted decoration number in the corner — matches v3-stats::before */
.cta-banner::before {
    content: attr(data-bg-num);
    position: absolute;
    font-family: "Inter Tight", sans-serif;
    font-weight: 900;
    font-size: clamp(280px, 42vw, 720px);
    line-height: 0.78;
    letter-spacing: -0.06em;
    color: var(--v3-accent-2);
    opacity: 0.08;
    top: -3vw;
    right: -2vw;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}
.cta-banner > .container {
    position: relative;
    z-index: 2;
    max-width: 1480px;
    padding: 0 clamp(1.75rem, 4vw, 3.5rem);
}

/* v3-numbered marker on dark bg */
.cta-banner .v3-numbered { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

/* Display title — matches v3-final scale */
.cta-banner__title,
.cta-banner h2 {
    font-family: "Inter Tight", sans-serif;
    font-size: clamp(40px, 6.5vw, 104px);
    line-height: 0.98;
    letter-spacing: -0.04em;
    font-weight: 800;
    color: #fff;
    margin: 0 0 1.5rem;
    max-width: 18ch;
    text-align: left;
}
.cta-banner h2 em,
.cta-banner__title em {
    font-style: italic;
    font-family: "Instrument Serif", "Georgia", serif;
    font-weight: 400;
    color: var(--v3-accent-2);
    letter-spacing: -0.01em;
}
.cta-banner__sub,
.cta-banner p {
    font-family: "Inter", sans-serif;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.6;
    color: rgba(255,255,255, 0.75);
    margin: 0 0 2.5rem;
    max-width: 56ch;
    text-align: left;
}

/* CTAs row — left aligned, larger buttons */
.cta-banner__ctas {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.cta-banner .btn--primary {
    background: #fff;
    color: var(--v3-text);
    border-color: #fff;
}
.cta-banner .btn--primary:hover {
    background: var(--v3-accent);
    border-color: var(--v3-accent);
    color: #fff;
}
.cta-banner .btn--outline-light {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
}
.cta-banner .btn--outline-light:hover {
    background: rgba(255,255,255,0.08);
    border-color: #fff;
}
.cta-banner .btn--primary,
.cta-banner .btn--outline-light {
    padding: 0.95rem 1.6rem;
    font-family: "Inter Tight", sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    border-radius: 999px;
    transition: all .35s cubic-bezier(.2,.7,.2,1);
}

/* Container narrow modifier loses centering on CTA — make wide-aware */
.cta-banner .container--narrow {
    max-width: 1480px;
    margin: 0 auto;
}

/* =================================================================== */
/* ===== ABOUT — pass #4 — dot patterns, gutter labels, team ====== */
/* =================================================================== */

/* ---- STATS section: dot pattern, big "02", side label like home ---- */
.about-single .section.section--alt {
    position: relative;
    overflow: hidden;
    background-color: var(--v3-bg-dark);
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1.5px, transparent 0);
    background-size: 26px 26px;
}
/* Huge ghosted "02" decoration in corner */
.about-single .section.section--alt::before {
    content: attr(data-bg-num);
    position: absolute;
    font-family: "Inter Tight", sans-serif;
    font-weight: 900;
    font-size: clamp(280px, 42vw, 720px);
    line-height: 0.78;
    letter-spacing: -0.06em;
    color: var(--v3-accent-2);
    opacity: 0.08;
    top: -3vw;
    right: -2vw;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}
/* Side rotated label like v3-stats::after */
.about-single .section.section--alt::after {
    content: "EST · 2010 · BUFFALO GROVE";
    position: absolute;
    font-family: "Inter Tight", sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(255,255,255, 0.45);
    pointer-events: none;
    z-index: 2;
    left: 1.5rem;
    top: 50%;
    transform-origin: left top;
    transform: rotate(-90deg);
    white-space: nowrap;
}
.about-single .section.section--alt > .container {
    position: relative;
    z-index: 1;
}
@media (max-width: 1400px) {
    .about-single .section.section--alt::after { display: none; }
}

/* ---- CTA banner: dot pattern + accent — only when no photo bg ----
 * The .cta-banner--has-image variant uses an image + gradient instead,
 * so we exclude it here to avoid the dot pattern fighting the photo. */
.cta-banner:not(.cta-banner--has-image) {
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1.5px, transparent 0);
    background-size: 26px 26px;
    background-color: var(--v3-bg-dark);
    background-repeat: repeat;
}
.cta-banner::after {
    content: "FREE IN-HOME ESTIMATE · CHICAGOLAND";
    position: absolute;
    font-family: "Inter Tight", sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(255,255,255, 0.45);
    pointer-events: none;
    z-index: 2;
    left: 1.5rem;
    top: 50%;
    transform-origin: left top;
    transform: rotate(-90deg);
    white-space: nowrap;
}
@media (max-width: 1400px) {
    .cta-banner::after { display: none; }
}

/* ---- TEAM section: redesigned vertical cards, big photos, dot pattern ---- */
.about-team {
    position: relative;
    overflow: hidden;
    background-color: var(--v3-bg);
    background-image: radial-gradient(circle at 1px 1px, rgba(20,20,20,0.045) 1px, transparent 0);
    background-size: 28px 28px;
    padding: clamp(5rem, 10vw, 8rem) 0;
}
.about-team > .container { position: relative; z-index: 1; }

.about-team .team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    max-width: 1100px;
    margin: 0 auto;
}
.about-team .team-card {
    display: block;
    position: relative;
}
.about-team .team-card__photo {
    aspect-ratio: 4 / 5;
    width: 100%;
    height: auto;
    border-radius: 18px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    margin: 0 0 1.5rem;
    transition: transform .9s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
    box-shadow: 0 18px 38px -22px rgba(15,20,16,0.25);
}
.about-team .team-card:hover .team-card__photo {
    transform: scale(1.025) translateY(-4px);
}
/* Numbered chip overlay on each photo */
.about-team .team-card::before {
    content: counter(team-num, decimal-leading-zero);
    counter-increment: team-num;
    position: absolute;
    top: 1.25rem; left: 1.25rem;
    z-index: 2;
    font-family: "Inter Tight", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #fff;
    background: rgba(0,0,0,0.45);
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.about-team .team-grid { counter-reset: team-num; }
.about-team .team-card h3 {
    font-family: "Inter Tight", sans-serif;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0 0 0.35rem;
    color: var(--v3-text);
}
.about-team .team-card__role {
    display: inline-block;
    font-family: "Inter Tight", sans-serif;
    font-size: 11.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--v3-accent);
    font-weight: 700;
    margin: 0 0 0.85rem;
}
.about-team .team-card__bio {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--v3-text-mid);
    margin: 0;
    max-width: 38ch;
}
/* Side gutter label for team section */
.about-team::after {
    content: "THE CREW · BUFFALO GROVE";
    position: absolute;
    font-family: "Inter Tight", sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--v3-text-mid);
    opacity: 0.45;
    pointer-events: none;
    z-index: 1;
    right: 1.5rem;
    top: 50%;
    transform-origin: right top;
    transform: rotate(90deg);
    white-space: nowrap;
}
@media (max-width: 1400px) {
    .about-team::after { display: none; }
}
@media (max-width: 880px) {
    .about-team .team-grid { grid-template-columns: 1fr; }
}

/* ---- About-pillars: also pick up dot pattern for consistency ---- */
.about-pillars {
    background-color: #fff;
    background-image: radial-gradient(circle at 1px 1px, rgba(20,20,20,0.04) 1px, transparent 0);
    background-size: 30px 30px;
}

/* ---- About-story: subtle dot pattern on cream too ---- */
.about-story {
    background-color: var(--v3-bg-cream);
    background-image: radial-gradient(circle at 1px 1px, rgba(20,20,20,0.045) 1px, transparent 0);
    background-size: 28px 28px;
}

/* =================================================================== */
/* ===== UNIVERSAL INNER-PAGE v3 PASS ============================== */
/* Apply v3 typography + decorations to every inner-page hero class. */
/* =================================================================== */

/* ---- Universal hero polish (about, contact, process, archive, sa, port, blog, error) ---- */
.about-hero,
.contact-hero,
.process-hero,
.archive-hero,
.port-hero,
.sa-hero,
.blog-hero,
.error-page {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
}

/* Display headlines on inner-page heroes */
.contact-hero__title,
.process-hero__title,
.archive-hero__title,
.port-hero__title,
.sa-hero__title,
.blog-hero__title,
.error-page__title {
    font-family: "Inter Tight", "Inter", sans-serif;
    font-weight: 800;
    font-size: clamp(34px, 4.2vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--v3-text);
    max-width: 22ch;
    margin: 0 0 1.25rem;
}
.contact-hero__title em,
.process-hero__title em,
.archive-hero__title em,
.port-hero__title em,
.sa-hero__title em,
.blog-hero__title em,
.error-page__title em {
    font-style: italic;
    font-family: "Instrument Serif", "Georgia", serif;
    font-weight: 400;
    color: var(--v3-accent);
    letter-spacing: -0.01em;
}

/* Sub-copy on inner-page heroes */
.contact-hero__sub,
.process-hero__sub,
.archive-hero__sub,
.port-hero__sub,
.sa-hero__sub,
.blog-hero__sub,
.error-page__sub {
    font-family: "Inter", sans-serif;
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.55;
    color: var(--v3-text-mid);
    max-width: 56ch;
    margin: 0 0 1.5rem;
}

/* Hide the legacy `.eyebrow` text inside heroes — replaced by v3-numbered */
.contact-hero > .container > .eyebrow,
.process-hero > .container > .eyebrow,
.archive-hero > .container > .eyebrow,
.port-hero > .container > .eyebrow,
.sa-hero > .container > .eyebrow,
.blog-hero > .container > .eyebrow,
.error-page > .container > .eyebrow,
.error-page > .container > .error-page__head > .eyebrow { display: none; }

/* CTAs in process-hero etc. — pill-shaped v3 buttons */
.process-hero .btn--primary,
.contact-hero .btn--primary,
.error-page .btn--primary {
    background: var(--v3-text);
    color: #fff;
    border-color: var(--v3-text);
    border-radius: 999px;
    padding: 0.95rem 1.6rem;
    font-weight: 700;
    font-family: "Inter Tight", sans-serif;
}
.process-hero .btn--outline,
.contact-hero .btn--outline,
.error-page .btn--outline {
    background: transparent;
    color: var(--v3-text);
    border: 1px solid rgba(15,20,16,0.18);
    border-radius: 999px;
    padding: 0.95rem 1.6rem;
    font-weight: 700;
    font-family: "Inter Tight", sans-serif;
}

/* ---- All dark .section.section--alt blocks get v3-stats treatment ---- */
.section.section--alt {
    position: relative;
    overflow: hidden;
    background-color: var(--v3-bg-dark);
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1.5px, transparent 0);
    background-size: 26px 26px;
    color: #fff;
    padding: clamp(5rem, 9vw, 7rem) 0;
}
.section.section--alt[data-bg-num]::before {
    content: attr(data-bg-num);
    position: absolute;
    font-family: "Inter Tight", sans-serif;
    font-weight: 900;
    font-size: clamp(280px, 42vw, 720px);
    line-height: 0.78;
    letter-spacing: -0.06em;
    color: var(--v3-accent-2);
    opacity: 0.08;
    top: -3vw;
    right: -2vw;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}
.section.section--alt > .container {
    position: relative;
    z-index: 1;
}
.section.section--alt h2 {
    font-family: "Inter Tight", sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 4.4vw, 60px);
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: #fff;
    margin: 0.5rem 0 1.5rem;
}
.section.section--alt h2 em {
    font-style: italic;
    font-family: "Instrument Serif", "Georgia", serif;
    font-weight: 400;
    color: var(--v3-accent-2);
}
.section.section--alt .eyebrow {
    color: var(--v3-accent-2);
    display: none; /* hidden — v3-numbered marker replaces it */
}
.section.section--alt p { color: rgba(255,255,255,0.72); }
/* Stats on the dark section: values were --color-text (dark) → invisible. */
.section.section--alt .stat__value { color: #FBF9F5; }
.section.section--alt .stat__value--accent { color: var(--v3-accent-2, #6fc18a); }
.section.section--alt .stat__label { color: rgba(255,255,255,0.64); }
.section.section--alt .stat { border-top-color: rgba(255,255,255,0.22); }
/* Process-flow light step cards on the dark section: restore dark text (the
   section's color:#fff was bleeding white onto the cream .process-card). */
.section.section--alt .process-card h3 { color: var(--color-text); }
.section.section--alt .process-card p { color: var(--color-text-soft); }

/* ---- Inner-page hero veil — keep video bg subtle so type pops ---- */
.contact-hero .hero-bg__video,
.process-hero .hero-bg__video,
.archive-hero .hero-bg__video,
.port-hero .hero-bg__video,
.sa-hero .hero-bg__video,
.blog-hero .hero-bg__video,
.error-page .hero-bg__video { opacity: 0.4; }

/* ---- Process phase cards — round corners + v3 typography ---- */
.process-phase__num {
    font-family: "Inter Tight", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--v3-accent);
}
.process-phase__title {
    font-family: "Inter Tight", sans-serif;
    font-weight: 800;
    font-size: clamp(24px, 2.8vw, 36px);
    letter-spacing: -0.025em;
    line-height: 1.1;
}
.process-phase__photo {
    border-radius: 18px;
}

/* ---- Contact form: cleaner type ---- */
.contact-card__phone {
    font-family: "Inter Tight", sans-serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #fff;
}
.contact-promise h3 {
    font-family: "Inter Tight", sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.contact-side .eyebrow {
    color: var(--v3-accent-2);
}

/* =================================================================== */
/* ===== GLOBAL ROUNDED-EVERYTHING PASS ============================ */
/* All images and buttons site-wide get v3-style rounded corners.    */
/* =================================================================== */

/* ----- BUTTONS: always pill-shaped (999px), v3-style ----- */
.btn,
.btn--primary,
.btn--outline,
.btn--outline-light,
.btn--dark,
.btn--ghost,
button.btn,
input[type="submit"].btn,
.ads-form__submit,
button.ads-form__submit {
    border-radius: 999px;
    font-family: "Inter Tight", "Inter", sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.95rem 1.6rem;
    height: auto;
    min-height: 48px;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s, color .35s, border-color .35s, box-shadow .35s;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary:hover { box-shadow: 0 18px 36px -16px rgba(31,121,54,0.45); }

/* ----- CONTENT IMAGES: rounded 18px by default ----- */
/* Card/photo classes site-wide */
.portfolio-strip__card,
.archive-grid__item,
.archive-grid__item img,
.svc-card,
.svc-card img,
.related-card img,
.post-card img,
.attachment-large,
.attachment-medium_large,
.attachment-full,
.entry-content img,
.post-thumbnail img,
.entry-thumbnail img,
.process-phase__photo,
.about-hero__img-main,
.about-hero__img-accent,
.team-card__photo,
.faq-block img,
.related-project img,
.proj img,
.review img,
.risk-card img,
.bleed-photo img,
.photo-break__cell img,
.bento-grid__cell img,
.cinematic-listing img,
.highlight-card img,
.geo-card img,
.service-area-card img,
.testimonial img,
article img,
.wp-block-image img,
.wp-block-image figure,
.wp-block-cover {
    border-radius: 18px;
    overflow: hidden;
}

/* Cover images & figures that contain rounded images */
figure.wp-block-image img,
figure img {
    border-radius: 18px;
}

/* Card wrappers — round the container so images + overlays both clip */
.portfolio-strip__card,
.archive-grid__item,
.svc-card,
.related-card,
.post-card,
.bento-grid__cell,
.highlight-card,
.geo-card,
.service-area-card,
.review,
.risk-card,
.faq-block,
.contact-card,
.contact-trust,
.contact-promise,
.process-phase__photo {
    border-radius: 18px;
    overflow: hidden;
}

/* Smaller chips and pills retain their pill shape */
.eyebrow,
.tag,
.chip,
.filter-chip,
.pill {
    border-radius: 999px;
}

/* ----- DO NOT ROUND (preserve original shape) ----- */
/* Site logo SVG (header + footer) should stay as-is */
.site-logo__img,
.site-logo__img svg,
.site-logo__img svg * { border-radius: 0; }

/* Icon SVGs should not get rounding */
svg.icon,
.icon svg,
.v3-svc-card__icon svg,
[class*="__icon"] svg { border-radius: 0; }

/* Round avatars / profile circles stay circular */
.avatar,
.user-avatar,
.review__avatar,
img[class*="-avatar"],
img.avatar { border-radius: 50%; }

/* Hero bg-video and hero-bg__video — section-wide, no card radius */
.hero-bg__video,
.v3-hero-v5__bg-video,
.v3-hero-v3__video,
.v3-hero__bg-video,
.v3-hero-v2__video,
.cta-banner__media img,
.hero-bg img,
.v3-hero-v5__bg img { border-radius: 0; }

/* Full-bleed sections shouldn't have rounded corners */
.v3-bleed__media img,
.v3-bleed { border-radius: 0; }

/* =================================================================== */
/* ===== TEAM — dark redesign ====================================== */
/* =================================================================== */
.about-team {
    position: relative;
    overflow: hidden;
    background-color: var(--v3-bg-dark);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1.5px, transparent 0),
        radial-gradient(ellipse 80% 60% at 75% 40%, rgba(31,121,54,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 10% 90%, rgba(91,156,110,0.10) 0%, transparent 60%);
    background-size: 28px 28px, 100% 100%, 100% 100%;
    color: #fff;
    padding: clamp(5rem, 11vw, 9rem) 0;
}

/* Huge ghost "04" number in corner */
.about-team::before {
    content: "04";
    position: absolute;
    font-family: "Inter Tight", sans-serif;
    font-weight: 900;
    font-size: clamp(280px, 42vw, 720px);
    line-height: 0.78;
    letter-spacing: -0.06em;
    color: var(--v3-accent-2);
    opacity: 0.07;
    top: -3vw;
    right: -2vw;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

/* Side gutter label */
.about-team::after {
    color: rgba(255,255,255, 0.45);
}

/* Title goes white with mint italic em */
.about-team .section__head h2,
.about-team h2 {
    color: #fff;
}
.about-team h2 em {
    color: var(--v3-accent-2);
}

/* v3-numbered on dark */
.about-team .v3-numbered .v3-num { color: var(--v3-accent); }
.about-team .v3-numbered .v3-num-label { color: var(--v3-text-soft); }
.about-team .v3-numbered .v3-num-line { background: var(--v3-text-soft); opacity: 0.35; }

/* Photos: keep rounded but add accent glow on hover */
.about-team .team-card__photo {
    box-shadow:
        0 24px 50px -22px rgba(0,0,0,0.65),
        0 0 0 1px rgba(255,255,255,0.04) inset;
    transition: transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .6s;
}
.about-team .team-card:hover .team-card__photo {
    box-shadow:
        0 30px 60px -22px rgba(0,0,0,0.75),
        0 0 0 2px var(--v3-accent) inset;
}

/* Number chip on photo: cleaner mint accent */
.about-team .team-card::before {
    background: rgba(31,121,54, 0.75);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
}

/* Card text on dark */
.about-team .team-card h3 {
    color: #fff;
}
.about-team .team-card__role {
    color: var(--v3-accent-2);
}
.about-team .team-card__bio {
    color: rgba(255,255,255, 0.72);
}

/* Optional accent line under role */
.about-team .team-card__role {
    position: relative;
    padding-bottom: 0.45rem;
}
.about-team .team-card__role::after {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    background: var(--v3-accent-2);
    margin-top: 0.45rem;
    opacity: 0.7;
}

}
/* ^ closes @layer passes { ... } opened at line ~8634 */

/* =================================================================== */
/* ===== TARGETED DARK SURFACES — UNLAYERED (no dark.css) ============ */
/* =================================================================== */
/* dark.css site-wide alternation is disabled (see functions.php). Only */
/* these three surfaces are dark; everything else inherits cream from   */
/* the base layer.                                                      */
/*   1. Hero v5 (home)                                                  */
/*   2. Archive hero (portfolio listing)                                */
/*   3. Expertise section                                               */
/* =================================================================== */

/* ---- 1. HERO v5 (home) ----------------------------------------- */
.v3-hero--v5 {
    background: #0A0B0D !important;
    color: #F5F1E6;
}
.v3-hero--v5 .v3-hero-v5__bg-veil {
    background:
        radial-gradient(ellipse 75% 60% at 60% 45%, rgba(10,11,13,0) 0%, rgba(10,11,13,0.35) 55%, rgba(10,11,13,0.88) 100%),
        linear-gradient(180deg, rgba(10,11,13,0.55) 0%, rgba(10,11,13,0.0) 25%, rgba(10,11,13,0.0) 70%, rgba(10,11,13,0.88) 100%);
}
.v3-hero--v5 .v3-hero-v5__bg-video.is-playing { opacity: 0.62; }
/* Cascade light tokens through the section */
.v3 .v3-hero--v5 {
    --v3-text:      #F5F1E6;
    --v3-text-mid:  rgba(245, 241, 230, 0.72);
    --v3-text-soft: rgba(245, 241, 230, 0.55);
}
.v3-hero--v5 .v3-hero-v5__title { color: #F5F1E6; }
.v3-hero--v5 .v3-accent-word { color: var(--v3-accent-2); }
.v3-hero--v5 .v3-hero-v5__tag-row { color: rgba(245, 241, 230, 0.62); }
.v3-hero--v5 .v3-hero-v5__tag-row span:first-child { color: #F5F1E6; }
.v3-hero--v5 .v3-hero-v5__badge-circle { color: rgba(245, 241, 230, 0.92); }
.v3-hero--v5 .v3-hero-v5__badge-star { color: var(--v3-accent-2); }
.v3-hero--v5 .v3-hero-v5__follow-label { color: rgba(245, 241, 230, 0.55); }
.v3-hero--v5 .v3-hero-v5__follow-icons a { color: rgba(245, 241, 230, 0.82); }
.v3-hero--v5 .v3-hero-v5__follow-icons a:hover { color: var(--v3-accent-2); }
.v3-hero--v5 .v3-hero-v5__scroll { color: rgba(245, 241, 230, 0.55); }

/* ---- 2. ARCHIVE hero (portfolio listing) ------------------------ */
.archive-hero {
    background: #0A0B0D !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #F5F1E6;
}
.archive-hero .hero-bg__video.is-playing { opacity: 0.58; }
.archive-hero .hero-bg__veil {
    background:
        radial-gradient(ellipse 75% 65% at 55% 50%, rgba(10,11,13,0) 0%, rgba(10,11,13,0.32) 55%, rgba(10,11,13,0.88) 100%),
        linear-gradient(180deg, rgba(10,11,13,0.55) 0%, rgba(10,11,13,0.0) 28%, rgba(10,11,13,0.0) 70%, rgba(10,11,13,0.92) 100%);
}
.archive-hero .eyebrow { color: var(--v3-accent-2); }
.archive-hero__title { color: #F5F1E6; }
.archive-hero__title em { color: var(--v3-accent-2); }
.archive-hero__sub { color: rgba(245, 241, 230, 0.72); }
.archive-hero .archive-filter__chip {
    background: transparent;
    color: rgba(245, 241, 230, 0.88);
    border-color: rgba(245, 241, 230, 0.22);
}
.archive-hero .archive-filter__chip span { color: rgba(245, 241, 230, 0.55); }
.archive-hero .archive-filter__chip:hover {
    border-color: #F5F1E6;
    color: #F5F1E6;
}
.archive-hero .archive-filter__chip.is-active {
    background: #F5F1E6;
    color: #0A0B0D;
    border-color: #F5F1E6;
}
.archive-hero .archive-filter__chip.is-active span { color: rgba(10, 11, 13, 0.62); }

/* ---- 3. EXPERTISE section --------------------------------------- */
.v3-expertise {
    background: #0A0B0D !important;
    color: #F5F1E6;
}
.v3 .v3-expertise {
    --v3-text:      #F5F1E6;
    --v3-text-mid:  rgba(245, 241, 230, 0.72);
    --v3-text-soft: rgba(245, 241, 230, 0.55);
}
/* Cover every text element including GSAP wrapper spans */
.v3-expertise h1,
.v3-expertise h2,
.v3-expertise h3,
.v3-expertise h4,
.v3-expertise .v3-display,
.v3-expertise .v3-display *,
.v3-expertise .v3-display .v3-stag,
.v3-expertise .v3-display .v3-stag i,
.v3-expertise .v3-display .v3-rise-line,
.v3-expertise .v3-display .v3-char { color: #F5F1E6; }
.v3-expertise .v3-accent-word,
.v3-expertise em,
.v3-expertise .v3-display .v3-accent-word { color: var(--v3-accent-2); }
.v3-expertise p,
.v3-expertise .v3-section-head__sub { color: rgba(245, 241, 230, 0.72); }
.v3-expertise .v3-num { color: var(--v3-accent-2); }
.v3-expertise .v3-num-label { color: rgba(245, 241, 230, 0.55); }
.v3-expertise .v3-num-line { background: rgba(255, 255, 255, 0.12); }
.v3-expertise .v3-eyebrow,
.v3-expertise .v3-eyebrow--on-dark { color: rgba(245, 241, 230, 0.55); }
.v3-expertise[data-bg-num]::before,
.v3-expertise::before { color: rgba(255, 255, 255, 0.04); }
.v3-expertise .underline-accent {
    background-image: linear-gradient(transparent 65%, rgba(91, 156, 110, 0.22) 65%);
}
/* Service cards — elevated dark surface */
.v3-expertise .v3-svc-card {
    background: linear-gradient(180deg, #15181D 0%, #101216 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #F5F1E6;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 20px 50px -30px rgba(0, 0, 0, 0.6);
}
.v3-expertise .v3-svc-card:hover {
    border-color: rgba(91, 156, 110, 0.35);
    box-shadow:
        0 1px 0 rgba(91, 156, 110, 0.15) inset,
        0 0 0 1px rgba(91, 156, 110, 0.22),
        0 30px 70px -25px rgba(91, 156, 110, 0.20);
}
.v3-expertise .v3-svc-card h3 { color: #F5F1E6; }
.v3-expertise .v3-svc-card p { color: rgba(245, 241, 230, 0.72); }
.v3-expertise .v3-svc-card .v3-arrow { color: var(--v3-accent-2); }
.v3-expertise .v3-svc-card__num { color: rgba(245, 241, 230, 0.35); opacity: 1; }
.v3-expertise .v3-svc-card__icon { color: var(--v3-accent-2); }
.v3-expertise .v3-svc-card--xl .v3-svc-card__icon {
    background: #fff;
    color: var(--v3-accent-2);
    box-shadow:
        0 14px 30px -14px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

/* ---- 4. REVIEWS section — promoted to DARK ----------------------- */
.v3-reviews {
    background: #0A0B0D !important;
    color: #F5F1E6;
}
.v3 .v3-reviews {
    --v3-text:      #F5F1E6;
    --v3-text-mid:  rgba(245, 241, 230, 0.72);
    --v3-text-soft: rgba(245, 241, 230, 0.55);
}
/* Cover every heading element including GSAP wrapper spans */
.v3-reviews h1,
.v3-reviews h2,
.v3-reviews h3,
.v3-reviews .v3-display,
.v3-reviews .v3-display *,
.v3-reviews .v3-display .v3-stag,
.v3-reviews .v3-display .v3-stag i,
.v3-reviews .v3-display .v3-rise-line,
.v3-reviews .v3-display .v3-char { color: #F5F1E6; }
.v3-reviews .v3-accent-word,
.v3-reviews em,
.v3-reviews .v3-display .v3-accent-word { color: var(--v3-accent-2); }
.v3-reviews p,
.v3-reviews .v3-section-head__sub { color: rgba(245, 241, 230, 0.72); }
/* Numbered eyebrow ("06/06 Reviews") */
.v3-reviews .v3-num { color: var(--v3-accent-2); }
.v3-reviews .v3-num-label { color: rgba(245, 241, 230, 0.55); }
.v3-reviews .v3-num-line { background: rgba(255, 255, 255, 0.12); }
.v3-reviews .v3-eyebrow,
.v3-reviews .v3-eyebrow--on-dark { color: rgba(245, 241, 230, 0.55); }
/* Decorative quote-mark glyph + gutter label */
.v3-reviews[data-bg-num]::before { color: rgba(255, 255, 255, 0.06) !important; }
.v3-reviews::before { color: rgba(255, 255, 255, 0.06) !important; opacity: 0.12 !important; }
.v3-reviews::after { color: rgba(245, 241, 230, 0.45); }
/* Review cards — elevated dark surface (mirrors expertise svc-card) */
.v3-review {
    background: linear-gradient(180deg, #15181D 0%, #101216 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #F5F1E6;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 20px 50px -30px rgba(0, 0, 0, 0.6);
}
.v3-review:hover {
    border-color: rgba(91, 156, 110, 0.35);
    box-shadow:
        0 1px 0 rgba(91, 156, 110, 0.15) inset,
        0 0 0 1px rgba(91, 156, 110, 0.22),
        0 30px 70px -25px rgba(91, 156, 110, 0.20);
}
.v3-review__stars { color: var(--v3-gold); }
.v3-review__text { color: rgba(245, 241, 230, 0.85); }
.v3-review__author strong { color: #F5F1E6; }
.v3-review__author span { color: rgba(245, 241, 230, 0.55); }

/* ---- 5. PROJECTS bento — UN-CAGED (full-width grid) ----------------
 * The intro (numbered marker + section head) stays inside .v3-container;
 * the bento grid breaks out to viewport width with a small edge gutter. */
.v3-projects--bleed .v3-projects__grid {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 0 clamp(1rem, 2vw, 2rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    max-width: none;
}

/* ---- 6. FULL-WIDTH PHOTO MARQUEE — auto-scrolling project strip ----
 * Pure CSS @keyframes loop. Track holds 2 copies of the photo set; the
 * animation translates -50% so the second copy lands where the first
 * was, making the seam invisible. */
.v3-photo-marquee {
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    height: clamp(320px, 42vw, 520px);
    overflow: hidden;
    background: #0F1410;
    /* Sandwich the strip between the cream sections above and below */
    margin-top: 0;
    margin-bottom: 0;
}
.v3-photo-marquee__track {
    display: flex;
    align-items: stretch;
    gap: clamp(0.75rem, 1.2vw, 1.25rem);
    height: 100%;
    width: max-content;
    padding: 0 clamp(0.5rem, 1vw, 1rem);
    animation: v3-photo-marquee-scroll 70s linear infinite;
    will-change: transform;
}
.v3-photo-marquee:hover .v3-photo-marquee__track { animation-play-state: paused; }
.v3-photo-marquee__slide {
    flex: 0 0 auto;
    height: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: #1A1F1B;
}
.v3-photo-marquee__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.v3-photo-marquee__slide:hover img { transform: scale(1.05); }
/* Subtle gradient bleed at the left & right edges so photos fade in/out
 * instead of being abruptly cut by the viewport edge. */
.v3-photo-marquee::before,
.v3-photo-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(40px, 6vw, 100px);
    pointer-events: none;
    z-index: 2;
}
.v3-photo-marquee::before { left: 0; background: linear-gradient(90deg, #0F1410 0%, transparent 100%); }
.v3-photo-marquee::after  { right: 0; background: linear-gradient(-90deg, #0F1410 0%, transparent 100%); }

@keyframes v3-photo-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .v3-photo-marquee__track { animation: none; }
}
@media (max-width: 720px) {
    .v3-photo-marquee { height: clamp(220px, 56vw, 360px); }
    .v3-photo-marquee__track { animation-duration: 45s; }
}
/* Interactive marquee — when JS is active it owns the transform (auto-scroll +
 * drag + horizontal wheel), so the CSS keyframe steps aside. touch-action: pan-y
 * keeps vertical page-scroll native while we capture horizontal drags. */
.v3-photo-marquee.is-js { touch-action: pan-y; }
.v3-photo-marquee.is-js .v3-photo-marquee__track { animation: none !important; }
.v3-photo-marquee.is-grab { cursor: grab; }
.v3-photo-marquee.is-grabbing { cursor: grabbing; }
.v3-photo-marquee.is-js .v3-photo-marquee__slide img { -webkit-user-drag: none; user-select: none; }
.v3-photo-marquee.is-grabbing .v3-photo-marquee__slide img { transition: none; }

/* Generic drag-to-scroll carousel (JS-enhanced, e.g. .portfolio-strip). When the
 * enhancer attaches it owns the transform, so the CSS keyframe steps aside; pan-y
 * keeps vertical page scroll native while horizontal drags are captured. */
.ads-cardrag { cursor: grab; touch-action: pan-y; }
.ads-cardrag.is-grabbing { cursor: grabbing; }
.ads-cardrag-track { animation: none !important; }
.ads-cardrag-track a, .ads-cardrag-track img { -webkit-user-drag: none; user-select: none; }
.ads-cardrag.is-grabbing .portfolio-strip__card { transition: none; }

/* ============================================================
   ACCESSIBILITY — appended (unlayered = highest precedence)
   Skip link (A11Y-02) + visible, forced-colors-safe focus (CSS-01).
   ============================================================ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 12px 20px;
    background: #16281d;
    color: #fff;
    font: 600 15px/1.2 var(--font-display, system-ui, sans-serif);
    text-decoration: none;
    border-radius: 0 0 8px 0;
}
.skip-link:focus {
    left: 0;
    outline: 3px solid #fff;
    outline-offset: -3px;
}
#main-content:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex="0"]:focus-visible,
.btn:focus-visible,
.v3-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}
@media (forced-colors: active) {
    a:focus-visible, button:focus-visible, input:focus-visible,
    select:focus-visible, textarea:focus-visible, .btn:focus-visible, .v3-btn:focus-visible {
        outline: 2px solid Highlight;
    }
}


/* =================================================================== */
/* ===== STICKY MOBILE CALL/TEXT BAR ================================ */
/* =================================================================== */
.ads-mobile-bar {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    gap: 8px;
    padding: 10px 12px calc( 10px + env( safe-area-inset-bottom, 0px ) );
    background: rgba( 14, 31, 21, 0.96 );
    backdrop-filter: blur( 12px );
    -webkit-backdrop-filter: blur( 12px );
    border-top: 1px solid rgba( 255, 255, 255, 0.08 );
}
.ads-mobile-bar__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    padding: 0 10px;
    border-radius: 12px;
    font-family: "Inter Tight", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: #F5F1E6;
    background: rgba( 255, 255, 255, 0.08 );
    border: 1px solid rgba( 255, 255, 255, 0.14 );
}
.ads-mobile-bar__btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.ads-mobile-bar__btn--primary {
    flex: 1.5;
    background: var( --v3-accent-2 );
    border-color: var( --v3-accent-2 );
    color: #fff;
}
@media ( max-width: 768px ) {
    .ads-mobile-bar { display: flex; }
    /* bar height + breathing room so the bar never covers the footer's last line */
    body.has-mobile-bar .site-footer { padding-bottom: calc( 78px + env( safe-area-inset-bottom, 0px ) ); }
}

/* =================================================================== */
/* ===== EXIT-INTENT MODAL ========================================== */
/* =================================================================== */
.ads-exit {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ads-exit[hidden] { display: none; }
.ads-exit__backdrop {
    position: absolute;
    inset: 0;
    background: rgba( 14, 31, 21, 0.55 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
}
.ads-exit__card {
    position: relative;
    max-width: 520px;
    width: 100%;
    background: var( --v3-bg, #FAF6EE );
    border-radius: 22px;
    padding: clamp( 2rem, 4vw, 3rem );
    box-shadow: 0 40px 80px -24px rgba( 0, 0, 0, 0.45 );
    animation: ads-exit-in 0.45s cubic-bezier( 0.2, 0.9, 0.25, 1 ) both;
}
@keyframes ads-exit-in {
    from { opacity: 0; transform: translateY( 18px ) scale( 0.97 ); }
    to   { opacity: 1; transform: none; }
}
@media ( prefers-reduced-motion: reduce ) {
    .ads-exit__card { animation: none; }
}
.ads-exit__close {
    position: absolute;
    top: 14px; right: 14px;
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba( 20, 20, 20, 0.14 );
    border-radius: 50%;
    background: transparent;
    color: var( --v3-text, #141414 );
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
}
.ads-exit__close:hover { background: var( --v3-text, #141414 ); color: #fff; }
.ads-exit__close svg { width: 16px; height: 16px; }
.ads-exit__eyebrow {
    display: block;
    font-family: "Inter Tight", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var( --v3-accent, #1a7e31 );
    margin-bottom: 0.9rem;
}
.ads-exit__title {
    font-family: "Inter Tight", "Inter", sans-serif;
    font-weight: 900;
    letter-spacing: -0.035em;
    font-size: clamp( 1.8rem, 4vw, 2.5rem );
    line-height: 1.02;
    margin: 0 0 1rem;
    color: var( --v3-text, #141414 );
}
.ads-exit__title em { font-style: normal; color: var( --v3-accent, #1a7e31 ); }
.ads-exit__sub {
    font-size: 15.5px;
    line-height: 1.6;
    color: var( --v3-text-mid, #4A4A4A );
    margin: 0 0 1.75rem;
}
.ads-exit__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.ads-exit__phone {
    font-family: "Inter Tight", sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var( --v3-text, #141414 );
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* =================================================================== */
/* ===== /reviews/ PAGE ============================================= */
/* =================================================================== */
.reviews-page__more {
    margin-top: 2.5rem;
    font-size: 15px;
    color: rgba( 245, 241, 230, 0.72 );
}
.reviews-page__more a {
    color: var( --v3-accent-2 );
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* =================================================================== */
/* ===== AI CHAT WIDGET ============================================= */
/* =================================================================== */
.ads-chat__bubble {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1100;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: var( --v3-accent, #1a7e31 );
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 30px -10px rgba( 14, 31, 21, 0.45 );
    transition: transform 0.25s, background 0.25s;
}
.ads-chat__bubble:hover { transform: scale( 1.06 ); background: var( --v3-accent-2, #1c9538 ); }
.ads-chat__bubble svg { width: 24px; height: 24px; }
.ads-chat__bubble-close { display: none; }
.ads-chat__bubble.is-open .ads-chat__bubble-open  { display: none; }
.ads-chat__bubble.is-open .ads-chat__bubble-close { display: block; }

.ads-chat__panel {
    position: fixed;
    right: 18px;
    bottom: 86px;
    z-index: 1100;
    width: min( 380px, calc( 100vw - 36px ) );
    height: min( 540px, calc( 100vh - 120px ) );
    display: flex;
    flex-direction: column;
    background: var( --v3-bg, #FAF6EE );
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 70px -25px rgba( 14, 31, 21, 0.5 );
}
.ads-chat__panel[hidden] { display: none; }

.ads-chat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    background: var( --v3-bg-dark, #0E1F15 );
    color: #F5F1E6;
}
.ads-chat__head strong {
    display: block;
    font-family: "Inter Tight", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.ads-chat__ai-tag {
    display: block;
    font-size: 11.5px;
    color: rgba( 245, 241, 230, 0.6 );
    margin-top: 1px;
}
.ads-chat__phone {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba( 255, 255, 255, 0.1 );
    color: #F5F1E6;
}
.ads-chat__phone svg { width: 16px; height: 16px; }
.ads-chat__phone:hover { background: var( --v3-accent-2, #1c9538 ); }

.ads-chat__log {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.ads-chat__msg {
    max-width: 85%;
    padding: 0.65rem 0.9rem;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.ads-chat__msg--assistant {
    align-self: flex-start;
    background: var( --v3-bg-white, #fff );
    color: var( --v3-text, #141414 );
    border-bottom-left-radius: 4px;
    box-shadow: 0 4px 12px -6px rgba( 14, 31, 21, 0.12 );
}
.ads-chat__msg--user {
    align-self: flex-end;
    background: var( --v3-accent, #1a7e31 );
    color: #fff;
    border-bottom-right-radius: 4px;
}
.ads-chat__msg.is-typing { color: var( --v3-text-soft, #595959 ); letter-spacing: 0.2em; }

.ads-chat__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 1rem 0.6rem;
}
.ads-chat__chips button {
    border: 1px solid rgba( 26, 126, 49, 0.35 );
    background: transparent;
    color: var( --v3-accent, #1a7e31 );
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.ads-chat__chips button:hover { background: var( --v3-accent, #1a7e31 ); color: #fff; }

.ads-chat__inputrow {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid rgba( 20, 20, 20, 0.08 );
    background: var( --v3-bg-white, #fff );
}
.ads-chat__inputrow input {
    flex: 1;
    border: 1.5px solid rgba( 20, 20, 20, 0.12 );
    border-radius: 12px;
    padding: 0.6rem 0.85rem;
    font-size: 14.5px;
    background: var( --v3-bg, #FAF6EE );
    color: var( --v3-text, #141414 );
}
.ads-chat__inputrow input:focus { outline: none; border-color: var( --v3-accent, #1a7e31 ); }
.ads-chat__inputrow button {
    flex: 0 0 auto;
    width: 42px;
    border: 0;
    border-radius: 12px;
    background: var( --v3-accent, #1a7e31 );
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ads-chat__inputrow button:hover { background: var( --v3-accent-2, #1c9538 ); }
.ads-chat__inputrow button svg { width: 17px; height: 17px; }

@media ( max-width: 768px ) {
    /* sit above the sticky call/text bar (it owns the bottom edge on mobile) */
    .ads-chat__bubble { bottom: calc( 84px + env( safe-area-inset-bottom, 0px ) ); right: 14px; }
    .ads-chat__panel {
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: min( 78vh, 560px );
        border-radius: 20px 20px 0 0;
        z-index: 1150; /* over the sticky bar while chatting */
    }
}

/* =================================================================== */
/* ===== /get/ PROMO LANDINGS ======================================= */
/* =================================================================== */
.get-hero__grid {
    display: grid;
    grid-template-columns: 1.25fr 0.85fr;
    gap: clamp( 2rem, 4vw, 4rem );
    align-items: center;
}
.get-form {
    background: var( --v3-bg, #FAF6EE );
    border-radius: 20px;
    padding: clamp( 1.5rem, 3vw, 2.25rem );
    box-shadow: 0 30px 60px -28px rgba( 0, 0, 0, 0.45 );
}
.get-form__title {
    font-family: "Inter Tight", sans-serif;
    font-weight: 900;
    letter-spacing: -0.025em;
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
    color: var( --v3-text, #141414 );
}
.get-form__sub { font-size: 14px; color: var( --v3-text-soft, #595959 ); margin: 0 0 1.1rem; }
.get-form form { display: flex; flex-direction: column; gap: 0.7rem; }
.get-form input {
    padding: 0.8rem 1rem;
    border: 1.5px solid rgba( 20, 20, 20, 0.14 );
    border-radius: 12px;
    font-size: 15px;
    background: #fff;
    color: var( --v3-text, #141414 );
}
.get-form input:focus { outline: none; border-color: var( --v3-accent, #1a7e31 ); }
.get-form__status { margin: 0; font-size: 14px; }
.get-form__status.is-error   { color: #b3261e; }
.get-form__status.is-success { color: var( --v3-accent, #1a7e31 ); }
.get-form__status.is-loading { color: var( --v3-text-soft, #595959 ); }
.get-form__alt { margin: 0.9rem 0 0; font-size: 13.5px; color: var( --v3-text-soft, #595959 ); }
.get-form__alt a { color: var( --v3-accent, #1a7e31 ); font-weight: 700; text-decoration: none; }

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

/* =================================================================== */
/* ===== /style-quiz/ — 4-step visual quiz ========================== */
/* =================================================================== */
.ads-quiz-section { background: var( --v3-bg ); padding: clamp( 3rem, 6vw, 5.5rem ) 0; }
.ads-quiz {
    max-width: 880px;
    margin: 0 auto;
    background: var( --v3-bg-white );
    border-radius: 24px;
    padding: clamp( 1.75rem, 4vw, 3.25rem );
    box-shadow: 0 30px 60px -30px rgba( 14, 31, 21, 0.18 );
}
.ads-quiz__progress { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.ads-quiz__bar { flex: 1; height: 4px; border-radius: 4px; background: rgba( 20, 20, 20, 0.08 ); overflow: hidden; }
.ads-quiz__bar i { display: block; height: 100%; width: 25%; border-radius: 4px; background: var( --v3-accent ); transition: width 0.45s cubic-bezier( 0.2, 0.8, 0.2, 1 ); }
.ads-quiz__progress-label {
    font-family: "Inter Tight", sans-serif;
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var( --v3-text-soft ); white-space: nowrap;
}
.ads-quiz__step { display: none; border: 0; padding: 0; margin: 0; }
.ads-quiz__step.is-active { display: block; animation: ads-quiz-in 0.4s cubic-bezier( 0.2, 0.8, 0.2, 1 ) both; }
@keyframes ads-quiz-in { from { opacity: 0; transform: translateY( 10px ); } to { opacity: 1; transform: none; } }
@media ( prefers-reduced-motion: reduce ) { .ads-quiz__step.is-active { animation: none; } }
.ads-quiz__q {
    font-family: "Inter Tight", sans-serif;
    font-weight: 900; letter-spacing: -0.025em;
    font-size: clamp( 1.5rem, 3.2vw, 2.1rem );
    color: var( --v3-text ); margin-bottom: 1.75rem; padding: 0;
}
.ads-quiz__options { display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 0.9rem; }
.ads-quiz__opt, .ads-quiz__photo {
    display: flex; flex-direction: column; gap: 0.45rem; text-align: left;
    padding: 1.2rem 1.25rem;
    border: 1.5px solid rgba( 20, 20, 20, 0.12 );
    border-radius: 16px;
    background: var( --v3-bg );
    cursor: pointer;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.ads-quiz__opt:hover, .ads-quiz__photo:hover {
    border-color: var( --v3-accent );
    transform: translateY( -2px );
    box-shadow: 0 14px 28px -18px rgba( 26, 126, 49, 0.45 );
}
.ads-quiz__opt strong, .ads-quiz__photo strong {
    font-family: "Inter Tight", sans-serif;
    font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; color: var( --v3-text );
}
.ads-quiz__opt span:not(.ads-quiz__swatch) { font-size: 13.5px; line-height: 1.45; color: var( --v3-text-soft ); }
.ads-quiz__swatch { display: flex; gap: 6px; margin-bottom: 0.25rem; }
.ads-quiz__swatch i {
    width: 34px; height: 34px; border-radius: 10px;
    border: 1px solid rgba( 20, 20, 20, 0.08 );
}
.ads-quiz__photo { padding: 0; overflow: hidden; }
.ads-quiz__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.ads-quiz__photo strong { padding: 0.8rem 1.1rem 1rem; }
.ads-quiz__back {
    margin-top: 1.5rem; background: none; border: 0; padding: 0;
    font-family: "Inter Tight", sans-serif; font-size: 14px; font-weight: 600;
    color: var( --v3-text-soft ); cursor: pointer;
}
.ads-quiz__back:hover { color: var( --v3-text ); }

/* Result */
.ads-quiz__result-eyebrow {
    display: block; font-family: "Inter Tight", sans-serif;
    font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var( --v3-accent ); margin-bottom: 0.75rem;
}
.ads-quiz__result-title {
    font-family: "Inter Tight", sans-serif;
    font-weight: 900; letter-spacing: -0.035em;
    font-size: clamp( 2rem, 5vw, 3.2rem ); line-height: 1.02;
    color: var( --v3-text ); margin: 0 0 0.75rem;
}
.ads-quiz__result-desc { font-size: 16px; line-height: 1.65; color: var( --v3-text-mid ); max-width: 620px; margin: 0 0 1.25rem; }
.ads-quiz__projects { margin-bottom: 1.75rem; }
.ads-quiz__projects-link { color: var( --v3-accent ); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.ads-quiz__form { border-top: 1px solid rgba( 20, 20, 20, 0.1 ); padding-top: 1.75rem; }
.ads-quiz__form-title { font-family: "Inter Tight", sans-serif; font-size: 16px; font-weight: 700; color: var( --v3-text ); margin: 0 0 1rem; }
.ads-quiz__fields { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 0.75rem; margin-bottom: 1rem; }
.ads-quiz__fields input {
    padding: 0.85rem 1rem;
    border: 1.5px solid rgba( 20, 20, 20, 0.14 );
    border-radius: 12px; font-size: 15px;
    background: #fff; color: var( --v3-text );
}
.ads-quiz__fields input:focus { outline: none; border-color: var( --v3-accent ); }
.ads-quiz__status { margin: 0.9rem 0 0; font-size: 14.5px; }
.ads-quiz__status.is-error   { color: #b3261e; }
.ads-quiz__status.is-success { color: var( --v3-accent ); }
.ads-quiz__status.is-loading { color: var( --v3-text-soft ); }

@media ( max-width: 520px ) {
    .ads-quiz__options, .ads-quiz__fields { grid-template-columns: 1fr; }
}