/* ════════════════════════════════════════════════════════════════
   BRADLEY LAY — styles.css
   Distinct personal brand identity.
   Palette: warm cream / ink-black / bronze.
   Fonts:   Cormorant Garamond display + DM Sans body.
   Nav:     transparent → warm white on scroll.
   Hero:    full-bleed editorial portrait, huge bottom-anchored name.
   ════════════════════════════════════════════════════════════════ */

:root {
    --cream:   #F5F3EE;
    --ink:     #0E0C08;
    --bronze:  #0db292;
    --muted:   #7A7469;
    --border:  #E2DDD5;
    --white:   #FFFFFF;
    --ink-dark: #090806;

    --serif: 'Playfair Display', Georgia, serif;
    --sans:  'DM Sans', system-ui, sans-serif;

    --nav-h:    76px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --max:      1600px;
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }

html.lenis              { height: auto; }
.lenis.lenis-smooth     { scroll-behavior: auto; }
.lenis.lenis-stopped    { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

::selection { background: rgba(13, 178, 146, 0.18); }

/* ── Noise overlay ──────────────────────────────────────────────── */
.noise {
    position: fixed; inset: 0; z-index: 9999; pointer-events: none;
    background: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E');
    opacity: 0.03;
}

/* ── Custom cursor ──────────────────────────────────────────────── */
@media (pointer: fine) { * { cursor: none !important; } }

.cursor {
    position: fixed; top: 0; left: 0;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--bronze); pointer-events: none; z-index: 9999;
    transform: translate(-50%,-50%);
    transition: width .25s, height .25s, opacity .25s;
    will-change: transform;
}
.cursor-ring {
    position: fixed; top: 0; left: 0;
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid rgba(13,178,146,0.3);
    pointer-events: none; z-index: 9998;
    transform: translate(-50%,-50%);
    will-change: transform;
}

/* ── Layout ─────────────────────────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 60px; }
@media (max-width: 768px) { .wrap { padding: 0 24px; } }


/* ══════════════════════════════════════════════════════════════════
   NAV — transparent / warm-white on scroll
══════════════════════════════════════════════════════════════════ */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    transition: background .55s var(--ease-out),
                box-shadow .55s var(--ease-out),
                backdrop-filter .55s var(--ease-out);
}
.nav.scrolled {
    background: rgba(245,243,238,.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(14,12,8,.08);
}

.nav-inner {
    max-width: var(--max); margin: 0 auto;
    padding: 0 60px; height: var(--nav-h);
    display: flex; align-items: center; justify-content: space-between;
}
@media (max-width: 768px) { .nav-inner { padding: 0 24px; } }

.nav-brand { display: flex; align-items: center; flex-shrink: 0; }

.nav-logo {
    width: 160px;
    height: auto;
    display: block;
    /* White over dark hero — CSS filter, no separate image needed */
    filter: brightness(0) invert(1);
    transition: width .5s var(--ease-out), filter .5s ease;
}
/* On scroll: shrink + reveal full colour */
.nav.scrolled .nav-logo {
    width: 110px;
    filter: none;
}

.nav-links { list-style: none; gap: 36px; align-items: center; }

/* Links — no expanding underline (that's TrueNorth).
   Instead: weight 500, looser colour fade, small teal dot above on hover. */
.nav-link {
    font-family: var(--sans); font-size: 12px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.72); transition: color .3s;
    position: relative; padding-bottom: 6px;
}
/* Small bar below — appears on hover */
.nav-link::before {
    content: '';
    position: absolute; bottom: -2px; left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 16px; height: 2px;
    background: var(--bronze); border-radius: 2px;
    transition: transform .35s var(--ease-out);
}
.nav-link:hover::before { transform: translateX(-50%) scaleX(1); }
.nav-link:hover { color: #fff; }
.nav.scrolled .nav-link { color: var(--muted); }
.nav.scrolled .nav-link:hover { color: var(--ink); }

/* CTA — solid filled pill (distinct from TrueNorth's bordered ghost button) */
.nav-enquire {
    font-family: var(--sans); font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: #fff;
    background: var(--bronze);
    padding: 10px 22px;
    border-radius: 3px;
    border: none;
    transition: background .3s, opacity .3s;
}
.nav-enquire:hover { opacity: .85; }
/* On warm-white nav: slightly different so it reads against the light bg */
.nav.scrolled .nav-enquire { background: var(--ink); color: #fff; }
.nav.scrolled .nav-enquire:hover { background: var(--bronze); }

/* Hamburger */
.nav-hamburger {
    background: none; border: none; padding: 4px;
    display: flex; flex-direction: column; gap: 6px;
}
.ham-line {
    display: block; width: 22px; height: 1px;
    background: rgba(255,255,255,.8);
    transition: transform .4s var(--ease-out), opacity .3s;
}
.nav.scrolled .ham-line { background: var(--ink); }
.nav-hamburger.is-open .ham-line:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-hamburger.is-open .ham-line:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu {
    background: rgba(245,243,238,.98);
    backdrop-filter: blur(20px); overflow: hidden;
    max-height: 0; transition: max-height .5s var(--ease-out);
    display: flex; flex-direction: column;
}
.mobile-menu[data-open="true"] { max-height: 340px; }
.mob-link {
    display: block; font-family: var(--sans); font-size: 11px;
    font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    transition: color .3s, background .3s;
}
.mob-link:hover { color: var(--ink); background: rgba(13,178,146,.06); }
.mob-link--accent { color: var(--bronze); font-weight: 600; }


/* ══════════════════════════════════════════════════════════════════
   HERO — Full-bleed editorial, huge name at bottom
══════════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    width: 100%; height: 100vh; min-height: 700px;
    overflow: hidden; background: var(--ink-dark);
    display: flex; flex-direction: column; justify-content: flex-end;
}

.hero-bg { position: absolute; inset: 0; }
.hero-bg-img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 20%;
    will-change: transform;
}
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        170deg,
        rgba(14,12,8,.04)  0%,
        rgba(14,12,8,.0)   30%,
        rgba(14,12,8,.18)  55%,
        rgba(14,12,8,.72)  78%,
        rgba(14,12,8,.90)  100%
    );
}

/* Hero body — must match nav-inner exactly: same max-width, centering and padding */
.hero-body {
    position: relative; z-index: 2;
    max-width: var(--max);  /* 1600px — same as nav-inner and .wrap */
    margin: 0 auto;          /* centres on wide screens, same as nav */
    width: 100%;
    padding: 0 60px 56px;   /* same 60px inset as nav logo */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
}
@media (max-width: 900px) {
    .hero-body { padding: 0 24px 48px; }
}

.hero-name {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(44px, 6.5vw, 88px);
    line-height: 1.05; letter-spacing: -.025em; color: #fff;
}
.h-line { display: block; overflow: hidden; padding-bottom: .18em; }
.h-inner { display: block; transform: translateY(105%); will-change: transform; }

/* Directly below the headline — capped width so text stays readable */
.hero-desc-col {
    max-width: 480px;
    opacity: 0; transform: translateY(14px);
    will-change: opacity, transform;
}
.hero-eyebrow {
    display: block; font-family: var(--sans); font-size: 10px;
    font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
    color: var(--bronze); margin-bottom: 16px;
}
.hero-sub {
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(13px,1.2vw,15px); line-height: 1.85;
    color: rgba(255,255,255,.65); margin-bottom: 28px;
}
.hero-cta {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--sans); font-size: 11px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase;
    color: #fff; padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.2);
    transition: border-color .4s, color .4s;
}
.hero-cta:hover { color: var(--bronze); border-color: rgba(13,178,146,.4); }
.hero-cta svg { transition: transform .4s var(--ease-out); }
.hero-cta:hover svg { transform: translateX(5px); }

/* Stat strip — full-width background, but inner grid centres like the nav */
.hero-strip {
    position: relative; z-index: 3;
    background: rgba(14,12,8,.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,.07);
    opacity: 0; will-change: opacity;
}

/* Inner grid matches nav-inner / .wrap centering exactly */
.hero-strip-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 60px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
@media (max-width: 768px) {
    .hero-strip-inner { grid-template-columns: 1fr 1fr; padding: 0 24px; }
    .hero-bg-img { object-position: center 20%; }
    .hero-overlay {
        background: linear-gradient(
            170deg,
            rgba(14,12,8,.3)  0%,
            rgba(14,12,8,.1)  30%,
            rgba(14,12,8,.4)  55%,
            rgba(14,12,8,.85) 78%,
            rgba(14,12,8,.95) 100%
        );
    }
}

.hs-item {
    padding: 18px 40px 18px 0;
    border-right: 1px solid rgba(255,255,255,.06);
    display: flex; flex-direction: column; gap: 4px;
}
.hs-item:first-child { padding-left: 0; }  /* wrap already provides the 60px */
.hs-item:last-child { border-right: none; }
@media (max-width: 768px) {
    .hs-item { padding: 16px 20px; }
    .hs-item:nth-child(odd) { padding-left: 0; }
    .hs-item:nth-child(2) { border-right: none; }
    .hs-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,.06); }
}

.hs-num {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(20px, 2.2vw, 28px);
    color: var(--bronze); letter-spacing: -.02em; line-height: 1;
    font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
}
.hs-label {
    font-family: var(--sans); font-size: 9px;
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.35);
}
.hs-divider { display: none; }


/* ══════════════════════════════════════════════════════════════════
   ABOUT
══════════════════════════════════════════════════════════════════ */
.about-section { background: var(--cream); }

/* Two-col grid — image left, text right, both from top of section */
.about-grid {
    display: grid;
    grid-template-columns: 45fr 55fr;
    gap: 0 72px;
    align-items: start;
    padding-top: 96px;
    padding-bottom: 96px;
}
@media (max-width: 900px) {
    .about-grid { grid-template-columns: 1fr; gap: 48px 0; padding-top: 64px; padding-bottom: 64px; }
}

/* Image column — sticky so it stays visible while text scrolls */
.about-img-wrap {
    height: 70vh; min-height: 520px; overflow: hidden;
    position: sticky; top: 96px;
}
.about-img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: top center;
    transition: transform .9s var(--ease-out);
}
.about-img-col:hover .about-img { transform: scale(1.03); }
@media (max-width: 900px) {
    .about-img-wrap { position: relative; top: auto; height: 60vw; min-height: 280px; }
}

/* Text column */
.about-text-col { padding-bottom: 0; }

/* Compact statement — hook above body copy */
.about-intro {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(24px, 3vw, 37px);
    line-height: 1.45; letter-spacing: -.01em;
    color: var(--ink); margin-bottom: 36px;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}
.about-intro em { color: var(--bronze); font-style: italic; }

.about-label-row {
    display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
}
.about-rule {
    display: block; width: 28px; height: 1px;
    background: var(--bronze); flex-shrink: 0;
    transform-origin: left;
}
.about-label {
    font-family: var(--sans); font-size: 10px;
    letter-spacing: .28em; text-transform: uppercase; color: var(--muted);
}

.about-body { display: flex; flex-direction: column; gap: 20px; margin-bottom: 48px; }
.about-body p {
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(14px,1.25vw,16px); line-height: 1.9; color: var(--muted);
}

.about-stats-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px; background: var(--border);
    border: 1px solid var(--border);
}
.about-stat {
    background: var(--cream); padding: 28px 24px;
    display: flex; flex-direction: column; gap: 8px;
}
.about-stat-num {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(32px,3.5vw,48px);
    color: var(--ink); letter-spacing: -.025em; line-height: 1;
    font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
}
.about-stat-label {
    font-family: var(--sans); font-size: 10px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}

/* ── Press / media logos scroller ──────────────────────────── */
.press-section {
    background: var(--white);
    border-top: 1px solid var(--border);
    padding: 60px 0;
}

/* "Featured In" centred label with flanking rules */
.press-header {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    margin-bottom: 48px;
}
.press-rule {
    flex: 1;
    max-width: 80px;
    height: 1px;
    background: var(--border);
    display: block;
}
.press-label {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

/* Scrolling track — edge fades give the premium soft-clip effect */
.press-track-outer {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.press-track {
    display: flex;
    align-items: center;
    gap: 72px;
    width: max-content;
    padding: 4px 0;
    animation: pressScroll 32s linear infinite;
}
.press-track:hover { animation-play-state: paused; }
@keyframes pressScroll { to { transform: translateX(-50%); } }

.press-logo {
    height: 48px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}

/* Pull quote — dark, left-aligned, two-tone */
.about-pull-quote {
    background: var(--ink-dark);
    padding: 100px 0;
}
.pull-quote-inner {
    max-width: 1060px;
    text-align: left;
}
/* Thin teal rule above — signals the quote elegantly */
.pull-quote-inner::before {
    content: '';
    display: block;
    width: 36px; height: 1px;
    background: var(--bronze);
    margin-bottom: 32px;
}
.pull-quote-text {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(24px, 3.2vw, 46px);
    line-height: 1.45; letter-spacing: -.02em;
    color: #fff;
    margin-bottom: 36px;
}
.pull-quote-text .q-accent { color: var(--bronze); font-style: italic; }
.pull-quote-cite {
    font-family: var(--sans); font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase;
    color: rgba(255,255,255,.35); display: block;
}


/* ══════════════════════════════════════════════════════════════════
   MILESTONE MARQUEE STRIP
══════════════════════════════════════════════════════════════════ */
.milestone-strip {
    background: var(--ink-dark); overflow: hidden; padding: 18px 0;
}
.milestone-track {
    display: flex; align-items: center; gap: 18px;
    width: max-content;
    animation: msScroll 50s linear infinite;
    white-space: nowrap;
}
.milestone-track:hover { animation-play-state: paused; }
@keyframes msScroll { to { transform: translateX(-50%); } }

.ms-item {
    font-family: var(--sans); font-size: 10px; font-weight: 400;
    letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,255,255,.28);
}
.ms-item--accent { color: var(--bronze); }
.ms-sep { font-size: 5px; color: rgba(255,255,255,.12); flex-shrink: 0; }


/* ══════════════════════════════════════════════════════════════════
   MASTERCLASS — Light cream, clean
══════════════════════════════════════════════════════════════════ */
.masterclass-section {
    background: var(--white);
    border-top: 1px solid var(--border);
    padding: 112px 0;
}
@media (max-width: 768px) { .masterclass-section { padding: 72px 0; } }

.mc-header {
    max-width: 720px; margin: 0 auto 64px; text-align: center;
}
.mc-title {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(32px,5vw,64px);
    line-height: 1.1; letter-spacing: -.025em; color: var(--ink);
    margin: 14px 0 18px;
}
.mc-title em { color: var(--bronze); font-style: italic; }
.mc-sub {
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(14px,1.2vw,15px); line-height: 1.85; color: var(--muted);
}

.mc-pillars {
    display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: start; gap: 0;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    margin-bottom: 56px;
}
@media (max-width: 768px) {
    .mc-pillars { grid-template-columns: 1fr; }
    .mc-divider  { display: none; }
}

.mc-pillar { padding: 40px 36px; }
.mc-divider { width: 1px; background: var(--border); margin: 24px 0; align-self: stretch; }

.mc-num {
    font-family: var(--sans); font-size: 9px;
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--bronze); display: block; margin-bottom: 14px;
}
.mc-pillar-title {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(20px,2vw,26px);
    color: var(--ink); line-height: 1.2; margin-bottom: 12px;
}
.mc-pillar-body {
    font-family: var(--sans); font-weight: 300;
    font-size: 13px; line-height: 1.8; color: var(--muted);
}

/* Video */
.video-wrap {
    position: relative; width: 100%; max-width: 880px; margin: 0 auto 40px;
    aspect-ratio: 16/9; background: var(--ink-dark);
    border: 1px solid var(--border); overflow: hidden;
}
.video-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--ink-dark); overflow: hidden;
}
.video-thumb {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s var(--ease-out);
}
.video-placeholder:hover .video-thumb { transform: scale(1.03); }
.video-thumb-overlay {
    position: absolute; inset: 0;
    background: rgba(14,12,8,.35);
}
.video-play-btn, .video-duration { position: relative; z-index: 2; }
.video-play-btn {
    width: 80px; height: 80px; border-radius: 50%;
    border: 1px solid rgba(13,178,146,.4);
    display: flex; align-items: center; justify-content: center;
    background: none; color: var(--bronze);
    cursor: pointer; margin-bottom: 18px;
    transition: background .4s, border-color .4s;
}
.video-play-btn:hover { background: rgba(13,178,146,.1); border-color: var(--bronze); }
.video-play-btn svg { width: 24px; height: 24px; margin-left: 4px; }
.video-duration {
    font-family: var(--sans); font-size: 10px;
    letter-spacing: .18em; text-transform: uppercase;
    color: #fff;
}
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

.mc-cta { text-align: center; }
.text-cta {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--sans); font-size: 11px; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--bronze); background: none; border: none;
    cursor: pointer; padding-bottom: 8px;
    border-bottom: 1px solid rgba(13,178,146,.3);
    transition: color .35s, border-color .35s;
}
.text-cta:hover { color: var(--ink); border-color: rgba(14,12,8,.3); }
.text-cta svg { transition: transform .4s var(--ease-out); }
.text-cta:hover svg { transform: translateX(5px); }


/* ══════════════════════════════════════════════════════════════════
   THREE WAYS — Interactive split: accordion left / image right
══════════════════════════════════════════════════════════════════ */
.engage-section {
    background: var(--cream);
    border-top: 1px solid var(--border);
    padding: 112px 0 128px;
}
@media (max-width: 768px) { .engage-section { padding: 72px 0 80px; } }

.engage-header { padding-bottom: 64px; }
.engage-title {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(32px,4.5vw,60px);
    line-height: 1.1; letter-spacing: -.02em; color: var(--ink);
    margin-top: 14px;
}

/* Two-column split */
.engage-split {
    display: grid;
    grid-template-columns: 52fr 48fr;
    gap: 0 72px;
    align-items: start;
}
@media (max-width: 900px) { .engage-split { grid-template-columns: 1fr; gap: 56px 0; } }

/* ── Accordion list (left) ─────────────────────────────────── */
.engage-list { border-top: 1px solid var(--border); }

.engage-item {
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    position: relative;
    transition: border-color .4s;
}
/* Teal left-edge accent — grows on active */
.engage-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--bronze);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform .55s var(--ease-out);
}
.engage-item.is-active::before { transform: scaleY(1); }

.engage-item-head {
    display: grid;
    grid-template-columns: 44px 1fr 20px;
    align-items: center;
    gap: 0 16px;
    padding: 32px 0 32px 20px;
}

.ei-num {
    font-family: var(--sans); font-size: 10px;
    letter-spacing: .2em; text-transform: uppercase;
    color: rgba(14,12,8,.2);
    transition: color .4s;
}
.engage-item.is-active .ei-num,
.engage-item:hover .ei-num { color: var(--bronze); }

.ei-title {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(16px, 2vw, 28px);
    line-height: 1.1; letter-spacing: -.02em;
    color: rgba(14,12,8,.3);
    transition: color .5s var(--ease-out);
}
.engage-item.is-active .ei-title  { color: var(--ink); }
.engage-item:hover:not(.is-active) .ei-title { color: rgba(14,12,8,.6); }

.ei-chevron {
    color: rgba(14,12,8,.2);
    justify-self: end;
    transition: color .4s, transform .5s var(--ease-out);
}
.engage-item.is-active .ei-chevron { color: var(--bronze); transform: rotate(180deg); }

/* Expanding body */
.ei-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .65s var(--ease-out);
    padding-left: 60px;
    padding-right: 20px;
}
.engage-item.is-active .ei-body { max-height: 360px; }

.ei-body-text {
    font-family: var(--sans); font-weight: 300;
    font-size: 14px; line-height: 1.85; color: var(--muted);
    padding-top: 4px; padding-bottom: 20px;
}

.ei-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.ei-tag {
    font-family: var(--sans); font-size: 9px;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--bronze); padding: 4px 10px;
    border: 1px solid rgba(13,178,146,.3);
}

.ei-link {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--sans); font-size: 11px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink); padding-bottom: 16px;
    border-bottom: 1px solid rgba(14,12,8,.12);
    transition: color .3s, border-color .3s;
}
.ei-link:hover { color: var(--bronze); border-color: rgba(13,178,146,.3); }
.ei-link svg { transition: transform .4s var(--ease-out); }
.ei-link:hover svg { transform: translateX(5px); }

/* ── Sticky image panel (right) ────────────────────────────── */
.engage-img-panel {
    position: sticky;
    top: 96px;
    height: 65vh;
    min-height: 460px;
    overflow: hidden;
    background: var(--ink-dark);
}
@media (max-width: 900px) {
    .engage-img-panel { position: relative; top: auto; height: 55vw; min-height: 300px; }
}

/* Each image layer — crossfade */
.ei-img-wrap {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .85s var(--ease-out);
}
.ei-img-wrap.is-active { opacity: 1; }

.ei-img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.05);
    transition: transform 1.1s var(--ease-out);
}
.ei-img-wrap.is-active .ei-img { transform: scale(1.0); }

.ei-img-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        160deg,
        rgba(14,12,8,.15) 0%,
        rgba(14,12,8,.05) 40%,
        rgba(14,12,8,.55) 100%
    );
}

/* Progress dots */
.ei-dots {
    position: absolute; bottom: 24px; left: 24px;
    display: flex; gap: 8px; z-index: 2;
}
.ei-dot {
    display: block; width: 16px; height: 1px;
    background: rgba(255,255,255,.25);
    cursor: pointer;
    transition: width .4s var(--ease-out), background .4s;
}
.ei-dot.is-active { width: 28px; background: var(--bronze); }

/* Counter */
.ei-counter {
    position: absolute; bottom: 20px; right: 24px;
    display: flex; align-items: center; gap: 10px; z-index: 2;
}
.ei-counter-cur, .ei-counter-tot {
    font-family: var(--sans); font-size: 9px;
    letter-spacing: .22em; color: rgba(255,255,255,.35);
    font-variant-numeric: lining-nums;
}
.ei-counter-cur { color: rgba(255,255,255,.75); }
.ei-counter-sep { width: 18px; height: 1px; background: rgba(255,255,255,.2); }


/* ══════════════════════════════════════════════════════════════════
   ECOSYSTEM — Light editorial cards
══════════════════════════════════════════════════════════════════ */
.ecosystem-section {
    background: var(--cream);
    border-top: 1px solid var(--border);
    padding: 112px 0;
}
.eco-header { margin-bottom: 64px; }
.eco-title {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(32px,4.5vw,60px);
    line-height: 1.1; letter-spacing: -.025em; color: var(--ink);
    margin: 14px 0 18px;
}
.eco-title em { color: var(--bronze); font-style: italic; }
.eco-sub {
    font-family: var(--sans); font-weight: 300;
    font-size: 15px; line-height: 1.8; color: var(--muted);
    max-width: 440px;
}

.eco-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 768px) { .eco-grid { grid-template-columns: 1fr; } }

.eco-card { background: var(--white); border: 1px solid var(--border); overflow: hidden; }

.eco-card-img { height: 300px; overflow: hidden; position: relative; }
.eco-img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1s var(--ease-out);
    filter: grayscale(20%);
}
.eco-card:hover .eco-img { transform: scale(1.04); filter: grayscale(0%); }
.eco-img-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(14,12,8,.12) 100%);
}

.eco-card-body { padding: 36px 40px 44px; }
.eco-type {
    font-family: var(--sans); font-size: 9px;
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--bronze); display: block; margin-bottom: 12px;
}
.eco-name {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(22px, 2.5vw, 30px);
    color: var(--ink); letter-spacing: -.015em; margin-bottom: 14px;
}
.eco-desc {
    font-family: var(--sans); font-weight: 300;
    font-size: 14px; line-height: 1.85; color: var(--muted); margin-bottom: 24px;
}
.eco-link {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--sans); font-size: 11px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--bronze);
    padding-bottom: 6px; border-bottom: 1px solid rgba(13,178,146,.25);
    transition: color .35s, border-color .35s;
}
.eco-link:hover { color: var(--ink); border-color: rgba(14,12,8,.2); }
.eco-link svg { transition: transform .4s var(--ease-out); }
.eco-link:hover svg { transform: translateX(5px); }


/* ══════════════════════════════════════════════════════════════════
   NEWSLETTER — Warm dark strip
══════════════════════════════════════════════════════════════════ */
.newsletter-section {
    background: var(--ink-dark);
    padding: 96px 0;
    border-top: 1px solid rgba(255,255,255,.04);
}
.newsletter-inner { max-width: 600px; margin: 0 auto; text-align: center; }
.newsletter-title {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(28px, 4vw, 52px);
    line-height: 1.1; letter-spacing: -.02em; color: #fff;
    margin: 14px 0 16px;
}
.newsletter-title em { color: var(--bronze); font-style: italic; }
.newsletter-sub {
    font-family: var(--sans); font-weight: 300;
    font-size: 14px; line-height: 1.85;
    color: rgba(255,255,255,.4); margin-bottom: 36px;
}
.newsletter-form { display: flex; max-width: 440px; margin: 0 auto; }
.nl-input {
    flex: 1; background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1); border-right: none;
    padding: 15px 18px;
    font-family: var(--serif); font-size: 16px; color: #fff;
    outline: none; transition: border-color .3s;
}
.nl-input::placeholder { color: rgba(255,255,255,.25); }
.nl-input:focus { border-color: rgba(13,178,146,.5); }
.nl-btn {
    padding: 15px 24px; background: var(--bronze); border: 1px solid var(--bronze);
    color: #fff; font-family: var(--sans); font-size: 11px;
    font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
    cursor: pointer; white-space: nowrap;
    transition: background .35s;
}
.nl-btn:hover { background: #0a9478; border-color: #0a9478; }
@media (max-width: 480px) {
    .newsletter-form { flex-direction: column; }
    .nl-input { border-right: 1px solid rgba(255,255,255,.1); border-bottom: none; }
}


/* ══════════════════════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════════════════════ */
.testimonials-section { background: var(--cream); padding: 112px 0 0; }

.test-header { margin-bottom: 48px; }
.test-title {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(28px,3.8vw,50px);
    line-height: 1.1; letter-spacing: -.02em; color: var(--ink);
    margin-top: 12px;
}

.linkedin-wrap { max-width: 840px; margin: 0 auto 72px; }
.linkedin-placeholder {
    border: 1px solid var(--border); padding: 56px 32px;
    text-align: center; background: var(--white);
}
.lp-title { font-family: var(--serif); font-size: 18px; font-weight: 300; color: var(--muted); margin-bottom: 8px; }
.lp-sub   { font-family: var(--sans); font-size: 11px; letter-spacing: .06em; color: var(--border); }

/* Marquee */
.tm-outer {
    overflow: hidden; padding: 40px 0 112px;
    border-top: 1px solid var(--border);
}
.tm-track {
    display: flex; gap: 16px;
    width: max-content;
    animation: tmScroll 60s linear infinite;
}
.tm-track:hover { animation-play-state: paused; }
@keyframes tmScroll { to { transform: translateX(-50%); } }

.tm-item {
    flex-shrink: 0; width: 360px;
    padding: 36px; background: var(--white);
    border: 1px solid var(--border);
    border-left: 2px solid var(--bronze);
    transition: transform .5s var(--ease-out);
}
.tm-item:hover { transform: translateY(-4px); }

.tm-quote {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    font-size: 17px; line-height: 1.65; color: var(--ink); margin-bottom: 24px;
}
.tm-byline {
    display: flex; flex-direction: column; gap: 3px;
    padding-top: 18px; border-top: 1px solid var(--border);
}
.tm-name {
    font-family: var(--sans); font-size: 10px;
    font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.tm-role {
    font-family: var(--sans); font-size: 10px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}


/* ══════════════════════════════════════════════════════════════════
   MEDIA / PR
══════════════════════════════════════════════════════════════════ */
.media-section {
    background: var(--cream);
    border-top: 1px solid var(--border); padding: 80px 0;
}
.media-inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: center;
}
@media (max-width: 768px) { .media-inner { grid-template-columns: 1fr; gap: 48px; } }

.media-text .section-eyebrow { margin-bottom: 16px; display: block; }
.media-title {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(22px,2.5vw,32px);
    color: var(--ink); letter-spacing: -.01em; margin-bottom: 14px;
}
.media-body {
    font-family: var(--sans); font-weight: 300;
    font-size: 14px; line-height: 1.85; color: var(--muted);
}
.media-card {
    background: var(--white); border: 1px solid var(--border); padding: 40px;
}
.media-card-label {
    font-family: var(--sans); font-size: 9px;
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--bronze); display: block; margin-bottom: 12px;
}
.media-card-name {
    font-family: var(--serif); font-weight: 300;
    font-size: 26px; color: var(--ink); margin-bottom: 4px;
}
.media-card-co {
    font-family: var(--sans); font-size: 12px;
    letter-spacing: .06em; color: var(--muted); margin-bottom: 20px;
}
.media-card-email {
    font-family: var(--sans); font-size: 14px;
    font-weight: 400; color: var(--bronze); transition: color .3s;
}
.media-card-email:hover { color: var(--ink); }


/* ══════════════════════════════════════════════════════════════════
   SHARED ATOMS
══════════════════════════════════════════════════════════════════ */
.section-eyebrow {
    font-family: var(--sans); font-size: 10px; font-weight: 500;
    letter-spacing: .26em; text-transform: uppercase; color: var(--bronze);
    display: block; margin-bottom: 12px;
}
.section-eyebrow--light { color: rgba(13,178,146,.8); }


/* ══════════════════════════════════════════════════════════════════
   CONTACT + FOOTER — Warm dark
══════════════════════════════════════════════════════════════════ */
.site-footer { background: var(--ink-dark); }

.contact-block {
    padding: 120px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
@media (max-width: 768px) { .contact-block { padding: 72px 0; } }

.contact-grid {
    display: grid; grid-template-columns: 42fr 58fr;
    gap: 0 96px; align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 56px 0; } }

.contact-left { padding-top: 0; }
.contact-headline {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(40px,6vw,88px);
    line-height: .96; letter-spacing: -.03em; color: #fff;
    margin: 28px 0 20px;
}
.contact-headline em { color: var(--bronze); font-style: italic; }

.contact-desc {
    font-family: var(--sans); font-weight: 300;
    font-size: 14px; line-height: 1.85;
    color: rgba(255,255,255,.45); max-width: 320px; margin-bottom: 36px;
}

.acq-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px; background: rgba(255,255,255,.05); margin-bottom: 40px;
}
.acq-item {
    background: rgba(255,255,255,.02);
    padding: 22px 20px;
    display: flex; flex-direction: column; gap: 6px;
}
.acq-num {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(18px,2vw,26px);
    color: var(--bronze); letter-spacing: -.01em; line-height: 1;
}
.acq-label {
    font-family: var(--sans); font-size: 9px;
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.28);
}

.contact-details {
    padding-top: 32px; border-top: 1px solid rgba(255,255,255,.06);
    display: flex; flex-direction: column; gap: 18px;
}
.cd-item { display: flex; flex-direction: column; gap: 4px; }
.cd-label {
    font-family: var(--sans); font-size: 9px;
    letter-spacing: .26em; text-transform: uppercase; color: var(--bronze);
}
.cd-value {
    font-family: var(--sans); font-weight: 300; font-size: 13px; color: #fff;
    transition: color .3s;
}
a.cd-value:hover { color: var(--bronze); }

/* Form */
.contact-right { padding-top: 8px; }
.contact-form  { display: flex; flex-direction: column; position: relative; }
.form-row      { margin-bottom: 36px; }
.form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
@media (max-width: 480px) { .form-row--split { grid-template-columns: 1fr; gap: 36px 0; } }
.form-field { position: relative; }
.form-label {
    display: block; font-family: var(--sans); font-size: 9px;
    letter-spacing: .24em; text-transform: uppercase;
    color: var(--bronze); margin-bottom: 10px; transition: color .3s;
}
.form-field:focus-within .form-label { color: rgba(255,255,255,.7); }
.form-input {
    display: block; width: 100%; background: transparent; border: none; outline: none;
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(15px,1.4vw,18px); letter-spacing: -.01em;
    color: #fff; padding: 0 0 10px; caret-color: var(--bronze); line-height: 1.3;
}
.form-input::placeholder { color: rgba(255,255,255,.18); }
.form-line {
    display: block; height: 1px; background: rgba(255,255,255,.08);
    position: relative; overflow: hidden;
}
.form-line::after {
    content: ''; position: absolute; left: 0; top: 0;
    width: 0; height: 100%; background: var(--bronze);
    transition: width .5s var(--ease-out);
}
.form-field:focus-within .form-line::after { width: 100%; }
.form-textarea { resize: none; overflow: hidden; line-height: 1.7; }
.form-submit-row { margin-top: 4px; }
.form-submit-btn {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 14px 28px; border: 1px solid rgba(13,178,146,.4);
    background: transparent; color: var(--bronze);
    font-family: var(--sans); font-size: 11px; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase;
    cursor: pointer; transition: background .4s, gap .4s, border-color .4s;
}
.form-submit-btn:hover { background: rgba(13,178,146,.12); border-color: var(--bronze); gap: 20px; }

/* Footer bottom */
.footer-bottom { padding: 52px 0 40px; }
.footer-cols { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(4,1fr); gap: 24px; } }

.footer-bl-name { font-family: var(--serif); font-weight: 300; font-size: 1.1rem; color: #fff; margin-bottom: 4px; }
.footer-bl-sub  { font-family: var(--sans); font-size: 8px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.3); }
.footer-col-title { font-family: var(--sans); font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 14px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-link { font-family: var(--sans); font-size: 13px; font-weight: 300; color: rgba(255,255,255,.4); transition: color .3s; }
.footer-link:hover { color: #fff; }
.footer-legal-text { font-family: var(--sans); font-size: 11px; font-weight: 300; line-height: 1.8; color: rgba(255,255,255,.18); }
.footer-legal-link { display: inline-block; margin-top: 10px; font-family: var(--sans); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(13,178,146,.4); transition: color .3s; }
.footer-legal-link:hover { color: var(--bronze); }
.footer-bar { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(255,255,255,.05); margin-top: 44px; padding-top: 24px; }
@media (min-width: 768px) { .footer-bar { flex-direction: row; justify-content: space-between; align-items: center; } }
.footer-copy { font-family: var(--sans); font-size: 11px; color: rgba(255,255,255,.16); }
.footer-bar-links { display: flex; gap: 18px; }
.footer-bar-link { font-family: var(--sans); font-size: 11px; color: rgba(255,255,255,.16); transition: color .3s; }
.footer-bar-link:hover { color: rgba(255,255,255,.4); }


/* ══════════════════════════════════════════════════════════════════
   VIDEO MODAL
══════════════════════════════════════════════════════════════════ */
.video-modal {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; pointer-events: none;
    transition: opacity .4s ease;
}
.video-modal.is-open {
    opacity: 1; pointer-events: auto;
}

.video-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(9,8,6,.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.video-modal-inner {
    position: relative; z-index: 2;
    width: 100%; max-width: 960px;
    transform: translateY(24px) scale(.98);
    transition: transform .45s var(--ease-out);
}
.video-modal.is-open .video-modal-inner {
    transform: translateY(0) scale(1);
}

.video-modal-close {
    position: absolute; top: -44px; right: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%; color: #fff;
    cursor: pointer;
    transition: background .3s, border-color .3s;
}
.video-modal-close:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }

.video-modal-frame {
    position: relative; width: 100%; aspect-ratio: 16/9;
    background: #000;
    box-shadow: 0 40px 80px rgba(0,0,0,.6);
}
.video-modal-frame iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: none;
}

/* ══════════════════════════════════════════════════════════════════
   FLOATING SOCIAL
══════════════════════════════════════════════════════════════════ */
.social-float {
    position: fixed; top: 50%; right: 20px;
    transform: translateY(-50%); z-index: 90;
    display: flex; flex-direction: column; gap: 8px;
}
@media (max-width: 768px) { .social-float { display: none; } }

.sf-btn {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(245,243,238,.9);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); transition: background .35s, border-color .35s, color .35s;
}
.sf-btn:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.sf-btn svg { width: 13px; height: 13px; }


/* ══════════════════════════════════════════════════════════════════
   SCROLL REVEALS
══════════════════════════════════════════════════════════════════ */
[data-reveal="fade"]  { opacity: 0; transform: translateY(16px); }
[data-reveal="slide"] { opacity: 0; transform: translateY(26px); }
[data-reveal="card"]  { opacity: 0; transform: translateY(40px); }