@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Open+Sans:wght@300;400;500;600&display=swap');
:root {
    /* ── Signal Brand Palette ── */
    --dark-wine:       #721817;
    --dry-sage:        #A9B18F;
    --twilight-indigo: #223554;
    --rust:            #C3703D;
    --stormy-teal:     #2C6671;
    --bright-teal:     #4FB8C8;
    --warm-white:      #F5F2EC;
    --black-navy:      #1A1A2E;
    --eggplant:        #523759;
    --warm-white-light:  #FAF8F4;
    /* ── Functional aliases ── */
    --primary-color:     #1A1A2E;
    --accent-color:      #721817;
    --text-color:        #1A1A2E;
    --background-color:  #F5F2EC;
    --border-color:      #D6D0C8;
    --hover-color:       #721817;
    /* ── Legacy palette (mapped to brand colors) ── */
    --white:      #FFFFFF;
    --gray-100:   #F5F2EC;
    --gray-200:   #D6D0C8;
    --off-black:  #1A1A2E;
    --green-100:  #E8EDE3;
    --green-200:  #A9B18F;
    --green-300:  #A9B18F;
    --green-400:  #223554;
    --green-500:  #1A1A2E;
    --rust-100:   #F5EDE8;
    --rust-200:   #C3703D;
    --rust-300:   #721817;
    --rust-400:   #721817;
    --rust-500:   #1A1A2E;
    --brown-100:  #F5F2EC;
    --brown-200:  #A9B18F;
    --brown-300:  #2C6671;
    --blue-100:   #E3EAF0;
    --blue-200:   #2C6671;
    --blue-300:   #223554;
    --blue-400:   #223554;
    --blue-500:   #1A1A2E;
    /* ── Neon (remapped to brand) ── */
    --neon-pink:   #721817;
    --neon-lime:   #A9B18F;
    --neon-indigo: #223554;
    --neon-sky:    #2C6671;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    background-color: var(--background-color);
}

html {
    overflow-x: hidden; /* iOS Safari: prevents rubber-band horizontal scroll when body alone isn't enough */
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 2rem;
    z-index: 10001;
}

.nav-light {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.nav-dark {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 0.65rem 2rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

nav .logo img {
    height: 26px !important;
}

.logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: 'Libre Baskerville', serif;
    font-size: calc(1.1rem + 4px);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--warm-white);
    transition: opacity 0.3s ease;
}

.logo:hover {
    opacity: 0.8;
}

.logo-image {
    display: none;
}

.nav-light .logo { color: var(--primary-color); }
.nav-dark .logo  { color: var(--warm-white); }

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
    margin-left: auto;
}

.nav-links a {
    text-decoration: none;
    color: var(--warm-white);
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    position: relative;
    padding: 0.5rem 0;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--warm-white);
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a.active {
    /* color override removed -- handled globally later */
}

.nav-links .contact-link {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    background-color: var(--warm-white);
    color: var(--text-color);
    transition: all 0.3s ease;
}

.nav-links .contact-link:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--text-color);
}

.nav-links .contact-link::after {
    display: none;
}

.video-hero {
    position: relative;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.video-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.4) 100%
    );
    z-index: 0;
}

.video-hero .hero-content {
    position: relative;
    z-index: 1;
}

.hero {
    height: calc(100vh + 300px);
    display: flex;
    align-items: center;
    padding: 0 2rem;
    position: relative;
    margin: 0;
    width: 100%;
    margin-top: -80px;
    padding-top: 80px;
    margin-bottom: 0;
}

/* Original hero with background image */
.hero:not(.video-hero) {
    background: none;
    position: relative;
    overflow: hidden;
    transform: translateZ(0); /* iOS Safari: force compositing layer so overflow:hidden clips scaled ::after */
    --scroll-position: 0;
}

.hero:not(.video-hero)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--hero-bg, url('./images/hero/joshua-earle.jpg')) center center/cover no-repeat;
    z-index: 0;
    transform: scale(calc(1.0 + var(--scroll-position) * 0.12));
    transform-origin: center center;
    will-change: transform;
}

.hero:not(.video-hero)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.1) 30%,

        rgba(0, 0, 0, 0.4) 60%,
        rgba(0, 0, 0, 0.55) 100%
    );
    z-index: 1;
}

/* Ensure hero content stays above the moving background */
.hero-content {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 2;
    color: var(--warm-white);
    padding-bottom: 200px;
    transform: translateY(80px);
    padding-left: 40px;
}

.hero-content h1 {
    color: var(--warm-white);
}

.hero-subtext {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    max-width: 620px;
}

.hero-label {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(2.4rem, 4.5vw, 4.5rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--warm-white);
    display: block;
    text-transform: none;
    margin-bottom: 0;
}

.hero-ctas {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

/* ── Large button (primary) ── */
.btn-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.5rem;
    border-radius: 10px;
    background: var(--primary-color);
    color: var(--warm-white);
    border: 1px solid var(--primary-color);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.btn-lg:hover {
    background: var(--hover-color);
    border-color: var(--hover-color);
}

/* ── Large button (secondary / outline) ── */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.5rem;
    border-radius: 10px;
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: var(--warm-white);
}

/* Hero context — invert for dark background */
.hero .btn-lg {
    background: var(--warm-white);
    color: var(--black-navy);
    border-color: var(--warm-white);
}

.hero .btn-lg:hover {
    background: rgba(255,255,255,0.88);
    border-color: var(--warm-white);
}

.hero .btn-secondary {
    background: transparent;
    color: var(--warm-white);
    border-color: rgba(255,255,255,0.45);
}

.hero .btn-secondary:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--warm-white);
    color: var(--warm-white);
}

/* Legacy alias — keep in case referenced elsewhere */
.hero-apply-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.9rem 2.5rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.45);
    background: transparent;
    color: var(--warm-white);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.hero-apply-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--warm-white);
}

.hero-text {
    color: rgba(255, 255, 255, 0.9);
}

h1 {
    font-family: 'Libre Baskerville', serif;
    font-size: 4.5rem;  /* DS: Display */
    line-height: 1.0;
    color: var(--text-color);
    margin-bottom: 2rem;
    font-weight: 500;
    letter-spacing: -0.03em;
}

.program-card {
    padding: 0 2rem;
    margin-top: 0;
    background-color: black;
    position: relative;
    z-index: 10;
    margin-top: -100px; /* Pull up slightly to ensure no gap */
}

.card {
    max-width: calc(1600px - 4rem - 124px);
    margin: 0 auto;
    padding: 6rem;
    position: relative;
    background-color: #1A1A1A;
    border: none;
    border-radius: 16px;
    color: var(--warm-white);
    box-shadow: 0 8px 50px rgba(0, 0, 0, 0.3);
    transform: translateY(-150px);
}

.card h2 {
    color: rgba(255, 255, 255, 0.8);
}

.card h3 {
    color: var(--warm-white);
}

.card p {
    color: rgba(255, 255, 255, 0.9);
}

h2 {
    font-family: 'Libre Baskerville', serif;
    font-size: 3rem;  /* DS: Heading 1 */
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text-color);
    margin-bottom: 2rem;
    text-transform: none;
}

h3 {
    font-family: 'Libre Baskerville', serif;
    font-size: 2.2rem;  /* DS: Heading 2 */
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text-color);
    margin-bottom: 1.5rem;
}

/* DS: Eyebrow / Label — use this class instead of abusing h2 */
.eyebrow {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-200);
    margin-bottom: 1rem;
}

.sphere-icon {
    width: 320px;
    height: 320px;
    position: absolute;
    right: 6rem;
    top: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sphere-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.sphere-image:hover {
    opacity: 1;
}

/* Remove old wave lines and animations */
.wave-lines,
.wave-line,
.sphere-icon::after {
    display: none;
}

p {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--hover-color);
}

footer {
    padding: 4rem 2rem;
    background-color: var(--text-color);
    color: var(--warm-white);
    border-top: none;
}

.footer-content {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    padding: 0 6rem;
    align-items: start;
    direction: rtl;
}

.footer-content > * {
    direction: ltr;
}

.footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
}

.footer-left p {
    color: rgba(245, 242, 236, 0.8);
    font-size: 0.9rem;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
}

.footer-right a {
    text-decoration: none;
    color: rgba(245, 242, 236, 0.8);
    font-size: 0.9rem;
    transition: color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.footer-right a:hover {
    color: var(--warm-white);
}

/* Footer newsletter */
.footer-newsletter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.footer-nl-heading {
    font-family: 'Libre Baskerville', serif;
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--warm-white);
    text-transform: none;
}

.footer-nl-desc {
    font-size: 0.9rem;
    color: rgba(245, 242, 236, 0.55);
    line-height: 1.6;
    max-width: 340px;
}

.footer-nl-form {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 320px;
    margin-top: 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.footer-nl-form:focus-within {
    border-color: rgba(255, 255, 255, 0.4);
}

.footer-nl-form input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--warm-white);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    outline: none;
}

.footer-nl-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.footer-nl-form button {
    flex: 0 0 44px;
    width: 44px;
    padding: 0;
    background: var(--warm-white);
    color: var(--text-color);
    border: none;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.footer-nl-form button:hover {
    opacity: 0.85;
}

.footer-logo {
    height: 24px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    margin-top: 0;
}

.footer-bottom {
    max-width: 1600px;
    margin: 3rem auto 0;
    padding-top: 1.5rem;
    padding-left: 6rem;
    padding-right: 6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p,
.footer-bottom a {
    font-size: 0.8rem;
    color: rgba(245, 242, 236, 0.4);
    text-decoration: none;
}

.footer-bottom a:hover {
    color: rgba(245, 242, 236, 0.7);
}

@media (max-width: 768px) {
    .footer-bottom {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        flex-wrap: nowrap;
        gap: 1rem;
    }
    .footer-bottom p,
    .footer-bottom a {
        font-size: 0.72rem;
        white-space: nowrap;
    }
}


.scroll-prompt {
    display: inline-block;
    margin-top: 2rem;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--warm-white);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid white;
    transition: all 0.3s ease;
}

.scroll-prompt:hover {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.8);
}

.program-link, .text-link {
    display: inline-block;
    margin-top: 2rem;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--warm-white);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    transition: color 0.3s ease;
}

.program-link::after, .text-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--warm-white);
    transition: width 0.3s ease;
}

.program-link:hover::after, .text-link:hover::after {
    width: 100%;
}

.philosophy {
    padding: 8rem 2rem;
    background-color: var(--background-color);
}

.content-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 6rem;
}

.text-content {
    max-width: 800px;
}

/* =====================
   CONTACT FORM CARD
   ===================== */

.contact-section {
    padding: 4rem 2rem 3rem;
    background-color: #fff;
}

/* Shared card layout */
.cf-card {
    display: flex;
    border-radius: 16px;
    overflow: hidden;
    min-height: 620px;
}

/* Modal version: glass — inset border sits over image as a soft transparent ring */
.connect-modal-card .cf-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: none;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        0 24px 80px rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    height: 100%;
}

.connect-modal-card .cf-image {
    height: 100%;
}

.connect-modal-card .cf-body {
    overflow-y: auto;
}

/* Inline version: solid white, thin white border */
.cf-card--inline {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.cf-image {
    width: 38%;
    flex-shrink: 0;
    overflow: hidden;
}

.cf-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cf-body {
    flex: 1;
    padding: 3rem 3.5rem;
    overflow-y: auto;
}

.cf-eyebrow {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a855b5;
    margin-bottom: 1rem;
}

.cf-title {
    font-family: 'Libre Baskerville', serif;
    font-size: 2.2rem;
    line-height: 1.1;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.cf-subtitle {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 2rem;
    max-width: 440px;
}

.cf-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.cf-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cf-field label {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.45);
}

.cf-field input,
.cf-field select,
.cf-field textarea {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--primary-color);
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 0.7rem 1rem;
    outline: none;
    transition: border-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.cf-field input::placeholder,
.cf-field textarea::placeholder {
    color: rgba(0, 0, 0, 0.3);
}

.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
    border-color: rgba(0, 0, 0, 0.35);
    background: rgba(0, 0, 0, 0.02);
}

.cf-field textarea {
    resize: vertical;
    min-height: 120px;
}

.cf-submit {
    align-self: flex-start;
    margin-top: 0.5rem;
    padding: 0.85rem 2.5rem;
    background: var(--primary-color);
    color: var(--warm-white);
    border: none;
    border-radius: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cf-submit:hover {
    background: var(--hover-color);
}

.cf-error {
    font-size: 0.85rem;
    color: var(--rust-300);
    margin-bottom: 0.75rem;
    max-width: 100%;
}

/* Newsletter checkbox */
.cf-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    margin-top: 0.25rem;
}

.cf-checkbox-row input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cf-checkbox-box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    background: #fff;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.cf-checkbox-box::after {
    content: '';
    width: 4px;
    height: 8px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
    opacity: 0;
    transition: opacity 0.15s;
}

.cf-checkbox-row input:checked ~ .cf-checkbox-box {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.cf-checkbox-row input:checked ~ .cf-checkbox-box::after {
    opacity: 1;
}

.cf-checkbox-label {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1.45;
}

/* Direct email line */
.cf-direct-email {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.78rem;
    color: rgba(0, 0, 0, 0.35);
    margin-top: 0.5rem;
    max-width: 100%;
}

.cf-direct-email a {
    color: rgba(0, 0, 0, 0.5);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}

.cf-direct-email a:hover {
    color: var(--primary-color);
}

.cf-submit:disabled,
.cf-submit.disabled,
.contact-link:disabled,
.contact-link.disabled {
    opacity: 0.32;
    cursor: not-allowed;
    pointer-events: none;
}

/* Thank you state */
.cf-thanks {
    display: none;
}

.cf-card.cf-submitted .cf-image,
.cf-card.cf-submitted .cf-body {
    display: none;
}

.cf-card.cf-submitted {
    background: #1A1A1A;
    align-items: center;
    justify-content: center;
    min-height: 480px;
}

.cf-card.cf-submitted .cf-thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem;
    text-align: center;
    animation: modal-drop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.cf-thanks-heading {
    font-family: 'Libre Baskerville', serif;
    font-size: 4rem;
    font-weight: 500;
    color: var(--warm-white);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
}

.cf-thanks-sub {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 300;
    letter-spacing: 0.02em;
    margin: 0;
}

@media (max-width: 900px) {
    .cf-image {
        display: none;
    }
    .cf-body {
        padding: 2.5rem 2rem;
    }
    .cf-row {
        grid-template-columns: 1fr;
    }
    .cf-title {
        font-size: 2.2rem;
    }
}

/* =====================
   CONNECT MODAL
   ===================== */

.connect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10500;
    align-items: flex-start;
    justify-content: center;
    /* match header padding so card left/right edges line up with nav pill */
    padding: 0 2rem;
    overflow: hidden;
}

.connect-modal.open {
    display: flex;
}

.connect-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: -1;
}

.connect-modal-card {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin-top: calc(1rem + 2px);
    /* fill remaining viewport height with a small bottom gap */
    height: calc(100dvh - 1rem - 2px - 1rem);
    height: calc(100vh - 1rem - 2px - 1rem); /* fallback */
    border-radius: 16px;
    overflow: hidden;
    animation: modal-drop 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modal-drop {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.connect-modal-close {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    z-index: 10;
    background: rgba(0, 0, 0, 0.08);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.connect-modal-close:hover {
    background: rgba(0, 0, 0, 0.15);
    color: var(--primary-color);
}

.contact-button {
    display: inline-block;
    margin-top: 2rem;
    padding: 1rem 2rem;
    background-color: var(--text-color);
    color: var(--background-color);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.contact-button:hover {
    background-color: var(--hover-color);
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    background-color: var(--text-color);
    color: var(--warm-white);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.contact-link::after {
    content: '→';
    font-size: 1em;
    letter-spacing: 0;
    transition: transform 0.2s ease;
}

.contact-link:hover {
    background-color: var(--hover-color);
    color: var(--warm-white);
}

.contact-link:hover::after {
    transform: translateX(2px);
}

@media (max-width: 768px) {
    header {
        top: 0.5rem;
        padding: 0.5rem;
    }

    nav {
        padding: 0.75rem 1rem;
    }

    .nav-links {
        display: none;
    }

    .hero {
        height: 100svh;
        padding: 0 1rem;
    }

    h1 {
        font-size: 3rem;
    }

    .program-card {
        padding: 0 1rem;
    }

    .card {
        padding: 2rem;
        transform: translateY(-75px);
    }

    h3 {
        font-size: 2.5rem;
    }

    p {
        max-width: 100%;
    }

    .sphere-icon {
        width: 200px;
        height: 200px;
        right: 2rem;
        top: 2rem;
    }

    .content-wrapper {
        padding: 0 1rem;
    }

    .text-content {
        max-width: 100%;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 0 1.5rem;
    }

    .footer-nl-form {
        max-width: 100%;
    }

    .hero-content {
        padding-bottom: 2rem;
        padding-left: 20px;
    }
}

/* Light mode styles */
.nav-light .nav-links a {
    color: var(--text-color);
}
/* .nav-light .nav-links a.active color override removed -- handled globally later */

.nav-light .nav-links a::after {
    background-color: var(--text-color);
}

.nav-light .nav-links .contact-link {
    background-color: var(--text-color);
    color: var(--warm-white);
}

/* Dark mode styles */
.nav-dark .nav-links a {
    color: var(--warm-white);
}
/* .nav-dark .nav-links a.active color override removed -- handled globally later */

.nav-dark .nav-links a::after {
    background-color: var(--warm-white);
}

.nav-dark .nav-links .contact-link {
    background-color: var(--warm-white);
    color: var(--text-color);
}

.articles-section {
    padding: 8rem 2rem;
    background-color: var(--background-color);
}

.articles-grid {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.article-card {
    position: relative;
    text-decoration: none;
    color: var(--text-color);
    transition: transform 0.3s ease;
}

.article-card:hover {
    transform: translateY(-10px);
}

.article-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    aspect-ratio: 1/1;
    transition: all 0.5s ease;
}

.article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

/* Unique shape-shifting hover effects for each article */
.article-card:nth-child(1):hover .article-image-container {
    border-radius: 50%;
}

.article-card:nth-child(2):hover .article-image-container {
    border-radius: 16px 50% 16px 50%;
}

.article-card:nth-child(3):hover .article-image-container {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* Remove old hover selectors and transform effects */
.article-card:nth-child(1) .article-image-container:hover,
.article-card:nth-child(2) .article-image-container:hover,
.article-card:nth-child(3) .article-image-container:hover,
.article-card:nth-child(1) .article-image-container:hover .article-image,
.article-card:nth-child(2) .article-image-container:hover .article-image,
.article-card:nth-child(3) .article-image-container:hover .article-image {
    transform: none;
}

.article-title {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    font-weight: 500;
}

.article-excerpt {
    font-size: 1rem;
    color: var(--hover-color);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.article-link {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-color);
    position: relative;
    padding-bottom: 0.25rem;
}

.article-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--text-color);
    transition: width 0.3s ease;
}

.article-card:hover .article-link::after {
    width: 100%;
}

@media (max-width: 768px) {
    .articles-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* Font declarations */
@font-face {
    font-family: 'ABC Marist';
    src: url('./font/ABCMarist-Medium-Trial.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
/* Inter loaded via Google Fonts */

/* Add after the logo styles */
.logo-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.logo-animation-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    will-change: transform, opacity, border-radius;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.shape-1 { background: linear-gradient(45deg, #FF6B6B, #FFE66D, #FF6B6B); }
.shape-2 { background: linear-gradient(45deg, #4ECDC4, #45B7D1, #4ECDC4); }
.shape-3 { background: linear-gradient(45deg, #96CEB4, #FFEEAD, #96CEB4); }
.shape-4 { background: linear-gradient(45deg, #D4A5A5, #FFCDB2, #D4A5A5); }
.shape-5 { background: linear-gradient(45deg, #9B5DE5, #FF5D8F, #9B5DE5); }

@keyframes shapeExpand {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg) translateY(0);
    }
    20% {
        opacity: 0.9;
        transform: scale(1) rotate(180deg) translateY(100px);
    }
    80% {
        opacity: 0.9;
        transform: scale(1.5) rotate(360deg) translateY(400px);
    }
    100% {
        opacity: 0;
        transform: scale(2) rotate(520deg) translateY(800px);
    }
}

@keyframes shapeMorph {
    0% { 
        border-radius: 50%;
        filter: hue-rotate(0deg);
    }
    25% { 
        border-radius: 70% 30% 50% 70% / 70% 40% 80% 30%;
        filter: hue-rotate(90deg);
    }
    50% { 
        border-radius: 40% 80% 90% 50% / 60% 80% 40% 70%;
        filter: hue-rotate(180deg);
    }
    75% { 
        border-radius: 50% 70% 40% 80% / 80% 90% 50% 40%;
        filter: hue-rotate(270deg);
    }
    100% { 
        border-radius: 50%;
        filter: hue-rotate(360deg);
    }
}

/* Below hero intro block */
.below-hero {
    padding: 5rem 2rem;
    background-color: var(--primary-color);
}

.below-hero-text {
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.4rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 300;
    text-align: center;
    font-family: 'Libre Baskerville', serif;
}

/* =============================================
   STATEMENT SECTION
   ============================================= */

.statement-section {
    background: var(--stormy-teal);
    padding: 10rem 2rem;
    text-align: center;
}

.statement-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 6rem;
}

.statement-headline {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(2.8rem, 5.5vw, 5.5rem);
    font-weight: 500;
    color: var(--warm-white);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 3rem;
    text-transform: none;
}

.statement-body {
    max-width: 720px;
    margin: 0 auto;
}

.statement-body p {
    font-size: 1.1rem;
    line-height: 1.85;
    color: rgba(245,242,236,0.8);
    margin: 0 0 1rem;
}

.statement-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 3.5rem;
    padding: 1rem 2.5rem;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    color: var(--warm-white);
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.statement-cta:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.55);
}

@media (max-width: 768px) {
    .statement-section {
        padding: 5rem 1.5rem;
    }
    .statement-inner {
        padding: 0;
    }
}

/* =============================================
   SIGNAL ATTRIBUTES
   ============================================= */

.signal-attrs {
    background: #fff;
    padding: 3rem 2rem;
    position: relative;
}

.signal-attrs.attrs-v2 {
    padding: 3rem 1.5rem;
}
.signal-attrs.attrs-v2 .attrs-inner {
    max-width: 100%;
}

/* ── Variant switcher ────────────────────────────────── */
.attrs-vsw-row {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 2rem;
}
.attrs-vsw {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: transparent;
    color: #aaa;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Open Sans', sans-serif;
}
.attrs-vsw.active,
.attrs-vsw:hover {
    background: var(--black-navy);
    border-color: var(--black-navy);
    color: #fff;
}

.signal-attrs .attrs-tiles-v5 { display: block; }

/* V3 section — full-bleed image, taller */
.signal-attrs.attrs-v3 {
    background-image: url('./images/ranch/field.jpg');
    background-size: cover;
    background-position: center 40%;
    padding: 5rem 1.5rem 5rem;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.signal-attrs.attrs-v3::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
}
.signal-attrs.attrs-v3 .attrs-inner {
    max-width: 100%;
    position: relative;
    z-index: 1;
}
/* Switcher readable on dark image */
.signal-attrs.attrs-v3 .attrs-vsw {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.5);
}
.signal-attrs.attrs-v3 .attrs-vsw.active,
.signal-attrs.attrs-v3 .attrs-vsw:hover {
    background: #fff;
    border-color: #fff;
    color: var(--black-navy);
}

/* ── V2 Floating tiles ───────────────────────────────── */
.attrs-tiles {
    display: none;
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding: 1rem 0 2rem;
    align-items: stretch;
    width: 100%;
}

.attr-tile {
    flex: 1 1 0;
    min-height: 260px;
    background: var(--tc, #111);
    border-radius: 22px;
    padding: 2.2rem 1.8rem;
    cursor: default;
    transform: rotate(var(--tr, 0deg));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transition:
        flex-grow   0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform   0.45s cubic-bezier(0.22, 1, 0.36, 1),
        min-height  0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow  0.35s ease,
        padding     0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hovered tile grows; siblings shrink (non-drag tiles only) */
.attr-tile:not(.attr-tile--drag):hover {
    flex-grow: 3.2;
    min-height: 320px;
    transform: rotate(0deg);
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2.8rem 2.4rem;
    box-shadow: 0 16px 48px rgba(0,0,0,0.18);
    z-index: 2;
}

.attrs-tiles:has(.attr-tile:hover) .attr-tile:not(:hover) {
    flex-grow: 0.55;
    transform: rotate(0deg);
    opacity: 0.7;
}

.tile-word {
    display: block;
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1.2rem, 2vw, 2.1rem);
    font-weight: 500;
    color: var(--ttc, #fff);
    letter-spacing: -0.025em;
    line-height: 1;
    white-space: nowrap;
    max-height: 80px;
    overflow: hidden;
    opacity: 1;
    transition:
        font-size  0.3s ease,
        max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        opacity    0.2s ease,
        margin     0.3s ease;
}

/* On hover: collapse the title (non-drag tiles only) */
.attr-tile:not(.attr-tile--drag):hover .tile-word {
    opacity: 0;
    max-height: 0;
    margin: 0;
}

.tile-desc {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.88rem;
    color: var(--ttc, #fff);
    opacity: 0;
    line-height: 1.6;
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity    0.3s ease 0.12s;
}

/* On hover: reveal only the description (non-drag tiles only) */
.attr-tile:not(.attr-tile--drag):hover .tile-desc {
    opacity: 0.85;
    max-height: 140px;
}

/* ── Scatter container (V3 only) ─────────────────────── */
.attrs-tiles-v3 {
    display: none;
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding: 1rem 0 0;
    align-items: flex-start;
    width: 100%;
    min-height: 380px;
}

.attrs-tiles-v3 .attr-tile {
    transform: rotate(var(--tr, 0deg)) translateY(var(--ty, 0));
}

.attrs-tiles-v3 .attr-tile:hover {
    transform: rotate(0deg) translateY(var(--ty, 0)) scale(1.06);
}

.attrs-tiles-v3:has(.attr-tile:hover) .attr-tile:not(:hover) {
    flex-grow: 0.55;
    opacity: 0.6;
}

/* ── Centered grid container (V4) ────────────────────── */
.attrs-tiles-v4 {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    padding: 1rem 0 2rem;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* Glass modifier — V3 only */
.attr-tile--glass {
    background: color-mix(in srgb, var(--tc, #111) 72%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--ttc, #fff) 15%, transparent);
}

/* V4: centered wrap grid */
.signal-attrs.attrs-v4 {
    padding-bottom: 4rem;
}
.attrs-tiles-v4 .attr-tile {
    align-items: center;
    text-align: center;
    /* size to content width, no grow/shrink — wraps naturally */
    flex: 0 0 auto;
    min-height: 150px;
    max-height: 200px;
    padding: 1.2rem 2rem;
    /* suppress vertical scatter — keep gentle rotation only */
    transform: rotate(var(--tr, 0deg));
}
.attrs-tiles-v4 .attr-tile:hover {
    min-height: 180px;
    max-height: 240px;
    transform: rotate(0deg) scale(1.05);
}
.attrs-tiles-v4 .tile-word {
    text-align: center;
    font-size: clamp(1.4rem, 2.2vw, 2.4rem);
    white-space: nowrap;
}
.attrs-tiles-v4:has(.attr-tile:hover) .attr-tile:not(:hover) {
    opacity: 0.6;
}

@media (max-width: 768px) {
    .attrs-tiles,
    .attrs-tiles-v3 {
        flex-wrap: wrap;
        min-height: auto;
    }
    .attrs-tiles-v3 .attr-tile {
        flex: 1 1 calc(50% - 0.5rem);
        min-height: 140px;
        transform: rotate(var(--tr, 0deg));
    }
    .attrs-tiles-v4 {
        gap: 0.5rem;
        padding: 0.75rem 1rem 1.5rem;
    }
    .attrs-tiles-v4 .attr-tile {
        min-height: 100px;
        max-height: none;
        padding: 1rem 1.4rem;
    }
    .attrs-tiles-v3:has(.attr-tile:hover) .attr-tile:not(:hover) {
        flex-grow: 1;
        opacity: 1;
    }
}

/* ── V5: Draggable cards ─────────────────────────────── */
.signal-attrs.attrs-v5 {
    min-height: 720px;
    padding-bottom: 3rem;
}

.attrs-tiles-v5 {
    position: relative;
    width: 100%;
    height: 600px;
}

.attr-tile--drag {
    position: absolute;
    cursor: grab;
    width: 220px;
    min-height: 160px;
    user-select: none;
    touch-action: none;
    align-items: center;
    text-align: center;
    justify-content: center;
    transform: rotate(var(--tr, 0deg));
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}

/* Both word and desc always visible */
.attr-tile--drag .tile-word {
    text-align: center;
    font-size: clamp(1.3rem, 2vw, 2.2rem);
    white-space: nowrap;
    opacity: 1;
    max-height: 80px;
}

.attr-tile--drag .tile-desc {
    opacity: 0.85;
    max-height: 140px;
    overflow: hidden;
    margin-top: 0.5rem;
    font-size: 0.88rem;
}

/* Hover: lift — scale up slightly, deepen shadow */
.attr-tile--drag:hover {
    transform: rotate(var(--tr, 0deg)) scale(1.06);
    box-shadow: 0 20px 56px rgba(0,0,0,0.22);
}

.attr-tile--drag.is-dragging {
    cursor: grabbing;
    box-shadow: 0 24px 60px rgba(0,0,0,0.28);
    transform: rotate(var(--tr, 0deg)) scale(1.07);
    transition: box-shadow 0.15s ease;
}

.v5-hint {
    position: absolute;
    bottom: -2.5rem;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    color: #bbb;
    letter-spacing: 0.04em;
    pointer-events: none;
}

/* ── V6: Stacked fan ─────────────────────────────────── */
.signal-attrs .attrs-tiles-v6              { display: none; }
.signal-attrs.attrs-v6 .attrs-tiles-v6    { display: flex; }

.attrs-tiles-v6 {
    flex-direction: column;
    align-items: center;
    padding: 3rem 0 6rem;
    /* cards overlap via negative margin-top */
}

.attr-tile--stack {
    width: 82%;
    height: 165px;
    margin-top: -45px;
    border-radius: 26px;
    padding: 1.4rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    position: relative;
    transform: rotate(var(--tr, 0deg));
    transition:
        transform   0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow  0.35s ease,
        z-index     0s;
    cursor: default;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.attr-tile--stack:first-child {
    margin-top: 0;
}

/* Hover: lift card out of the stack */
.attr-tile--stack:hover {
    transform: rotate(0deg) translateY(-22px) scale(1.02);
    z-index: 20;
    box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}

/* Non-hover siblings dim slightly */
.attrs-tiles-v6:has(.attr-tile--stack:hover) .attr-tile--stack:not(:hover) {
    opacity: 0.75;
}

/* word visible by default */
.attr-tile--stack .tile-word {
    text-align: left;
    font-size: clamp(1.5rem, 2.4vw, 2.8rem);
    white-space: nowrap;
    opacity: 1;
    max-height: 80px;
    transition:
        opacity    0.2s ease,
        max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        margin     0.2s ease;
}

/* desc hidden by default */
.attr-tile--stack .tile-desc {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    font-size: 0.9rem;
    text-align: left;
    transition:
        opacity    0.3s ease 0.12s,
        max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* on hover: swap word → desc */
.attr-tile--stack:hover .tile-word {
    opacity: 0;
    max-height: 0;
    margin: 0;
}

.attr-tile--stack:hover .tile-desc {
    opacity: 0.88;
    max-height: 120px;
}

.attrs-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.attr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
    border-bottom: 1px solid #e8e8e8;
    cursor: default;
    transition: background 0.22s ease, padding-left 0.22s ease;
    border-radius: 4px;
}

.attr-row:first-child { border-top: 1px solid #e8e8e8; }

.attr-row:hover {
    background: var(--green-100);
    padding-left: 1rem;
    padding-right: 1rem;
}

.attr-left {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
}

.attr-num {
    font-size: 0.7rem;
    color: #ccc;
    letter-spacing: 0.06em;
    min-width: 20px;
    font-variant-numeric: tabular-nums;
}

.attr-word {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    font-weight: 500;
    color: var(--black-navy);
    letter-spacing: -0.02em;
    transition: color 0.22s ease;
}

.attr-row:hover .attr-word { color: var(--green-300); }

.attr-desc {
    font-size: 0.95rem;
    color: #aaa;
    max-width: 320px;
    text-align: right;
    line-height: 1.5;
    transition: color 0.22s ease;
}

.attr-row:hover .attr-desc { color: #555; }

@media (max-width: 640px) {
    .attr-row { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
    .attr-desc { text-align: left; max-width: 100%; }
}

/* =============================================
   HOW WE WORK
   ============================================= */

.how-we-work {
    padding: 8rem 2rem;
    background: var(--warm-white);
}

.hww-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 3rem;
}

.hww-card {
    background: #FDFCF9;
    border-radius: 16px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.hww-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.hww-card:hover { box-shadow: 0 16px 48px rgba(0,0,0,0.06); }
.hww-card:nth-child(1):hover { box-shadow: inset 0 0 0 2px var(--eggplant), 0 16px 48px rgba(0,0,0,0.06); }
.hww-card:nth-child(2):hover { box-shadow: inset 0 0 0 2px var(--dark-wine), 0 16px 48px rgba(0,0,0,0.06); }
.hww-card:nth-child(3):hover { box-shadow: inset 0 0 0 2px var(--dry-sage), 0 16px 48px rgba(0,0,0,0.06); }
.hww-card:nth-child(4):hover { box-shadow: inset 0 0 0 2px var(--twilight-indigo), 0 16px 48px rgba(0,0,0,0.06); }

.hww-card:nth-child(2) { transition-delay: 0.1s; }
.hww-card:nth-child(3) { transition-delay: 0.15s; }
.hww-card:nth-child(4) { transition-delay: 0.25s; }

.hww-all-btn { margin-top: 4.5rem; margin-bottom: 1.5rem; display: block; text-align: center; width: fit-content; margin-left: auto; margin-right: auto; }

.hww-bar {
    width: 36px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 0.25rem;
}

.hww-teal  { background: var(--eggplant); }
.hww-sage  { background: var(--dark-wine); }
.hww-terra { background: var(--dry-sage); }
.hww-warm  { background: var(--twilight-indigo); }

.hww-card h4 {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--black-navy);
    letter-spacing: -0.01em;
    text-transform: none;
}

.hww-card p {
    font-size: 0.97rem;
    line-height: 1.75;
    color: #666;
    flex: 1;
    max-width: 100%;
}

.hww-link {
    color: var(--bright-teal);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: color 0.2s;
    margin-top: auto;
    display: inline-block;
}

.hww-link:hover { color: var(--stormy-teal); }

@media (max-width: 700px) {
    .hww-grid { grid-template-columns: 1fr; }
}

/* =============================================
   FOUNDER
   ============================================= */

.founder-section {
    padding: 8rem 2rem;
    background: var(--stormy-teal);
}

.founder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
}

.founder-image {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.founder-image.visible {
    opacity: 1;
    transform: translateY(0);
}

.founder-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 16px;
    display: block;
    position: sticky;
    top: 120px;
}

.founder-photo-placeholder {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 16px;
    background: #d8d8d8;
    position: sticky;
    top: 120px;
}

.founder-text {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease 0.12s, transform 0.7s ease 0.12s;
}

.founder-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.founder-eyebrow {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(245,242,236,0.6);
    margin-bottom: 0.75rem;
}

.founder-name {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    font-weight: 500;
    color: var(--warm-white);
    letter-spacing: -0.025em;
    margin-bottom: 1.75rem;
    text-transform: none;
    line-height: 1.1;
}

.founder-text p {
    font-size: 1.05rem;
    line-height: 1.82;
    color: rgba(245,242,236,0.85);
    margin-bottom: 1.25rem;
    max-width: 100%;
}

.founder-creds {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 2.5rem;
    border-top: 1px solid #f0f0f0;
}

.founder-creds li {
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(245,242,236,0.8);
    padding: 0.75rem 0 0.75rem 1.5rem;
    border-bottom: 1px solid rgba(245,242,236,0.2);
    position: relative;
}

.founder-creds li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: rgba(245,242,236,0.5);
}

.founder-text .btn-lg { display: inline-block; }
@media (max-width: 860px) {
    .founder-grid { grid-template-columns: 1fr; gap: 3rem; }
    .founder-image img { position: static; aspect-ratio: 3/4; width: 100%; max-width: 100%; }
    .founder-section .content-wrapper { padding: 0 1.5rem; }
}

/* =============================================
   TESTIMONIALS
   ============================================= */

.testimonials-section {
    background: var(--warm-white);
    padding: 8rem 2rem;
    overflow: hidden;
}

.testi-header {
    margin-bottom: 3.5rem;
}

.testi-header h2 {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 500;
    color: var(--black-navy);
    letter-spacing: -0.02em;
    text-transform: none;
}

.testi-stage { overflow: hidden; }

.testi-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.testi-card {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 4rem;
    align-items: center;
    padding: 3rem;
    background: #FDFCF9;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.07);
}

.testi-photo {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    background: linear-gradient(135deg, #d8d4cc 0%, #c8c4bc 100%);
    flex-shrink: 0;
    object-fit: cover;
    object-position: top center;
}

.testi-body blockquote {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(0.95rem, 1.4vw, 1.25rem);
    font-weight: 500;
    font-style: normal;
    color: var(--black-navy);
    line-height: 1.5;
    letter-spacing: -0.01em;
    margin-bottom: 2rem;
    border: none;
    padding: 0;
    quotes: none;
}

.testi-attr {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.testi-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--black-navy);
}

.testi-role {
    font-size: 0.82rem;
    color: rgba(26,26,46,0.45);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.testi-controls {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.testi-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(26,26,46,0.2);
    background: transparent;
    color: var(--black-navy);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.testi-btn:hover {
    background: rgba(26,26,46,0.06);
    border-color: rgba(26,26,46,0.3);
}

.testi-dots { display: flex; gap: 0.5rem; align-items: center; }

.testi-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(26,26,46,0.2);
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}

.testi-dot.active {
    background: var(--black-navy);
    transform: scale(1.4);
}

@media (max-width: 700px) {
    .testi-card { grid-template-columns: 1fr; gap: 2rem; }
    .testi-photo { width: 100px; height: 100px; border-radius: 50%; aspect-ratio: 1; }
}

/* =============================================
   STAY CONNECTED
   ============================================= */

.stay-connected {
    padding: 7rem 2rem;
    background: var(--gray-100);
}

.sc-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
}

.sc-text h2 {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    font-weight: 500;
    color: var(--black-navy);
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
    text-transform: none;
}

.sc-text p {
    font-size: 1rem;
    color: #777;
    line-height: 1.6;
    max-width: 420px;
}

.sc-fields {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ddd;
    background: var(--warm-white);
}

.sc-fields input {
    padding: 0.9rem 1.25rem;
    border: none;
    font-size: 0.95rem;
    color: var(--black-navy);
    background: transparent;
    outline: none;
    width: 260px;
    font-family: 'Open Sans', sans-serif;
}

.sc-fields button {
    padding: 0.9rem 1.5rem;
    background: var(--black-navy);
    color: var(--warm-white);
    border: none;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.05em;
    font-family: 'Open Sans', sans-serif;
    transition: background 0.2s;
    white-space: nowrap;
}

.sc-fields button:hover { background: #333; }

@media (max-width: 760px) {
    .sc-inner { flex-direction: column; gap: 2.5rem; align-items: flex-start; }
    .sc-fields input { width: 200px; }
}

/* ── (legacy) ── */
.content-cards {
    padding: 8rem 2rem;
    background-color: var(--background-color);
}

.section-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.section-header-row h2,
.section-header-row h3 {
    margin-bottom: 0;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.cards-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1400px) {
    .cards-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.content-card {
    border-radius: 24px;
    overflow: hidden;
    height: 640px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.5s ease;
    display: flex;
    flex-direction: column;
}

.content-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Card Colors and Hover States — Signal palette */
.content-card.teal  { background-color: var(--blue-100); }
.content-card.sage  { background-color: var(--green-100); }
.content-card.terra { background-color: var(--rust-100); }
.content-card.warm  { background-color: var(--brown-100); }

.content-card.teal:hover  { background-color: var(--blue-400); }
.content-card.sage:hover  { background-color: var(--green-400); }
.content-card.terra:hover { background-color: var(--rust-400); }
.content-card.warm:hover  { background-color: var(--brown-300); }

.card-placeholder {
    width: calc(100% - 4rem);
    height: 200px;
    flex-shrink: 0;
    margin: 2rem 2rem 0 2rem;
    background-color: rgba(0, 0, 0, 0.1);
    transition: background-color 0.5s ease;
    border-radius: 12px;
}

.content-card:hover .card-placeholder {
    background-color: rgba(0, 0, 0, 0.15);
}

/* Remove old image styles */
.card-image,
.card-image img {
    display: none;
}

.card-inner {
    height: 100%;
    padding: 2rem;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
}

.content-card h4 {
    font-family: 'Libre Baskerville', serif;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--text-color);
    font-weight: 500;
}

.content-card p {
    font-size: 0.975rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: var(--text-color);
    max-width: 100%;
}

.card-link {
    margin-top: auto;
    color: var(--text-color);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    align-self: flex-start;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.card-link:hover {
    border-color: var(--text-color);
}

/* Update text colors on hover for dark backgrounds */
.content-card:hover .card-inner,
.content-card:hover h4,
.content-card:hover p,
.content-card:hover .card-link {
    color: var(--warm-white);
}

.content-card:hover .card-link {
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.content-card:hover .card-link:hover {
    border-bottom-color: var(--warm-white);
}

/* Responsive styles */
@media (max-width: 768px) {
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .cards-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-card {
        height: 550px;
    }

    .card-placeholder {
        width: calc(100% - 4rem);
        height: 250px;
        margin: 2rem 2rem 0 2rem;
        border-radius: 12px;
    }

    .card-inner {
        padding: 2rem;
    }

    .content-card h4 {
        font-size: 1.75rem;
    }
}

/* Secret hero bg cycle button */
.hero-bg-cycle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
}

/* Hero YouTube layer */
.hero-yt-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hero-yt-wrap.yt-visible {
    opacity: 1;
}

.hero-yt-wrap iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Maintain 16:9 and cover the container */
    width: calc(100vh * (16/9) + 200px);
    height: calc(100vw * (9/16) + 200px);
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* When video is active, suppress the parallax image layer */
.hero.yt-active:not(.video-hero)::after {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hero:not(.video-hero)::after {
    transition: opacity 0.6s ease, transform 0.1s ease-out;
}

/* Hero background toggle pill */
.hero-bg-toggle {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    z-index: 10;
    display: flex;
    background: rgba(0,0,0,0.45);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    backdrop-filter: blur(6px);
}

.hbt-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.65);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.hbt-btn.hbt-active {
    background: rgba(255,255,255,0.18);
    color: #fff;
}

.hbt-btn:hover:not(.hbt-active) {
    color: rgba(255,255,255,0.9);
}

/* Mobile Navigation Styles */
.mobile-nav-toggle {
    display: none;
    margin-left: auto;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
}

.hamburger {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--warm-white);
    position: relative;
    transition: all 0.3s ease;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: var(--warm-white);
    transition: all 0.3s ease;
}

.nav-light .hamburger,
.nav-light .hamburger::before,
.nav-light .hamburger::after {
    background-color: var(--black-navy, #1A1A2E);
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    bottom: -8px;
}

.mobile-nav {
    display: none;
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: calc(100% - 2rem);
    height: calc(100vh - 2rem);
    background-color: var(--warm-white);
    padding: 2rem;
    transform: translateX(calc(100% + 2rem)); /* slides off-screen right when closed */
    transition: transform 0.3s ease;
    z-index: 1000;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.mobile-nav.active {
    transform: translateX(0);
}

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.mobile-nav-close {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
}

.close-icon {
    display: block;
    width: 24px;
    height: 24px;
    position: relative;
}

.close-icon::before,
.close-icon::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: var(--text-color);
    top: 50%;
    left: 0;
}

.close-icon::before {
    transform: rotate(45deg);
}

.close-icon::after {
    transform: rotate(-45deg);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mobile-nav-links a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 1.2rem;
    padding: 0.5rem 0;
}

.mobile-nav-links .contact-link {
    color: var(--warm-white);
    background-color: var(--text-color);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-align: center;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }


    .mobile-nav-toggle {
        display: block;
    }

    .mobile-nav {
        display: block;
    }
}

/* Ready Section Styles */
.ready-section {
    position: relative;
    width: 100%;
    height: 65vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0a1a1f;
}

.ready-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: translateZ(0);
}

/* Section edge fades ─────────────────────────────────── */
.section-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 220px;
    pointer-events: none;
    z-index: 3;
}

.section-fade--black {
    background: linear-gradient(to bottom, transparent 0%, black 100%);
}

.section-fade--white {
    background: linear-gradient(to bottom, transparent 0%, white 100%);
}

.section-fade--top {
    bottom: auto;
    top: 0;
    background: linear-gradient(to top, transparent 0%, black 100%);
}

.ready-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.3) 100%
    );
    z-index: 1;
}

.ready-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.ready-content h2 {
    font-family: 'Libre Baskerville', serif;
    font-size: 6rem;
    color: #FFE15B;
    text-transform: none;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    font-weight: 300;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
    .ready-content h2 {
        font-size: 3.5rem;
    }
}

/* =====================
   PULSE SECTION
   ===================== */

.pulse-section {
    position: relative;
    width: 100%;
    height: 55vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stormy-teal);
}

.pulse-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: translateZ(0); /* forces GPU compositing in Safari — prevents blue band bleed-through */
}

/* Teal color overlay — more consistent than mix-blend-mode on <video> across Safari/Chrome */
.pulse-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--stormy-teal);
    mix-blend-mode: color;
    z-index: 1;
    pointer-events: none;
}

.pulse-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.pulse-glitch-text {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(4rem, 10vw, 9rem);
    font-weight: 300;
    color: var(--warm-white);
    text-transform: none;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
}

@keyframes pulse-glitch {
    0%, 74%, 100% {
        text-shadow: none;
        transform: none;
        opacity: 1;
    }
    /* burst 1 — sharp chromatic split */
    75% {
        text-shadow: -5px 0 var(--neon-pink), 5px 0 var(--neon-sky);
        transform: translateX(4px);
        opacity: 0.92;
    }
    75.5% {
        text-shadow: 4px 0 var(--neon-indigo), -3px 0 var(--neon-pink);
        transform: translateX(-2px);
    }
    76% {
        text-shadow: none;
        transform: none;
        opacity: 1;
    }
    /* burst 2 — softer stutter */
    82% {
        text-shadow: -2px 0 var(--neon-sky), 2px 0 var(--neon-pink);
        transform: translateX(-1px) skewX(0.8deg);
        opacity: 0.95;
    }
    82.4% {
        text-shadow: none;
        transform: none;
        opacity: 1;
    }
    /* burst 3 — big rip */
    88% {
        text-shadow: -7px 0 var(--neon-pink), 7px 0 var(--neon-sky);
        transform: translateX(-5px);
        opacity: 0.88;
    }
    88.5% {
        text-shadow: 5px -1px var(--neon-indigo), -5px 1px var(--neon-lime);
        transform: translateX(3px);
    }
    89% {
        text-shadow: -2px 0 var(--neon-sky);
        transform: translateX(-1px);
        opacity: 0.95;
    }
    89.5% {
        text-shadow: none;
        transform: none;
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .pulse-glitch-text {
        font-size: 3.5rem;
    }
}

/* =====================
   SIGNAL INTRO SECTION
   ===================== */

/* =============================================
   WHAT IS SIGNAL
   ============================================= */

.what-is-signal {
    padding: 8rem 0;
    background: var(--warm-white);
}

.wis-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.wis-header {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 5rem;
}

.wis-header-left-align {
    text-align: left;
    max-width: none;
    margin: 0 0 5rem;
}

.wis-header-left-align .wis-lead {
    max-width: none;
}

.wis-header-left-align .wis-desc {
    max-width: none;
}

.wis-header-left-align .wis-desc p {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

.wis-tag {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--green-300);
    margin-bottom: 1.25rem;
}

.wis-lead {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(2.4rem, 4vw, 4rem);
    font-weight: 500;
    color: var(--black-navy);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 2rem;
    max-width: none;
}

.wis-desc p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.wis-desc p:last-child { margin-bottom: 0; }

/* ── Variant switcher ── */
.wis-vsw-row {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-bottom: 3rem;
}

.wis-vsw {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.18);
    background: transparent;
    color: #888;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.wis-vsw.active,
.wis-vsw:hover {
    background: var(--black-navy);
    color: var(--warm-white);
    border-color: var(--black-navy);
}

/* V2 switcher — light buttons on dark bg */
.wis-v2 .wis-vsw {
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.5);
}
.wis-v2 .wis-vsw.active,
.wis-v2 .wis-vsw:hover {
    background: rgba(255,255,255,0.15);
    color: var(--warm-white);
    border-color: rgba(255,255,255,0.6);
}

/* ── Show / hide per variant ── */
.what-is-signal .wis-flip-grid { display: none; }
.what-is-signal.wis-v3 .wis-pillars { display: none; }
.what-is-signal.wis-v3 .wis-flip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* ── V2: Rust 400 dark background ── */
.what-is-signal.wis-v2 {
    background: var(--rust-400);
}
.wis-v2 .wis-tag { color: rgba(255,255,255,0.5); }
.wis-v2 .wis-lead { color: var(--warm-white); }
.wis-v2 .wis-desc p { color: rgba(255,255,255,0.6); }
.wis-v2 .wis-pillars { border-top-color: rgba(255,255,255,0.15); }
.wis-v2 .wis-pillar { border-right-color: rgba(255,255,255,0.15); }
.wis-v2 .wis-pillar:hover { background: rgba(255,255,255,0.05); }
.wis-v2 .wis-num { color: rgba(255,255,255,0.4); }
.wis-v2 .wis-pillar:hover .wis-num { color: rgba(255,255,255,0.9); }
.wis-v2 .wis-title { color: var(--warm-white); }
.wis-v2 .wis-body { color: rgba(255,255,255,0.58); }

/* ── V3: Flip cards ── */
.wis-fc-teal  { --fc-color: var(--blue-300);  --fc-color-rgb: 75,88,88; }
.wis-fc-sage  { --fc-color: var(--green-300); --fc-color-rgb: 88,93,70; }
.wis-fc-terra { --fc-color: var(--rust-300);  --fc-color-rgb: 122,88,80; }
.wis-fc-warm  { --fc-color: var(--brown-300); --fc-color-rgb: 91,82,73; }

.wis-flip-card {
    perspective: 1200px;
    min-height: 300px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Resting tilt per card */
.wis-flip-card:nth-child(1) { transform: rotate(-2.5deg); }
.wis-flip-card:nth-child(2) { transform: rotate(1.5deg); }
.wis-flip-card:nth-child(3) { transform: rotate(-1.5deg); }
.wis-flip-card:nth-child(4) { transform: rotate(2deg); }

.wis-flip-card:hover { transform: rotate(0deg) translateY(-6px); z-index: 2; }

.wis-fc-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.wis-flip-card:hover .wis-fc-inner {
    transform: rotateY(180deg);
}

.wis-fc-front,
.wis-fc-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wis-fc-front {
    background: var(--fc-color);
}

.wis-fc-back {
    background: var(--warm-white);
    border: 2px solid var(--fc-color);
    transform: rotateY(180deg);
}

.wis-fc-num {
    font-family: 'Libre Baskerville', serif;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1;
    color: rgba(255,255,255,0.22);
    letter-spacing: -0.03em;
}

.wis-fc-title {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: none;
    line-height: 1.25;
}

.wis-fc-front .wis-fc-title { color: var(--warm-white); }
.wis-fc-back .wis-fc-title { color: var(--fc-color); margin-bottom: 0.75rem; }

.wis-fc-back p {
    font-size: 0.93rem;
    line-height: 1.7;
    color: #444;
    flex: 1;
    max-width: 100%;
}

.wis-fc-arrow {
    font-size: 1rem;
    align-self: flex-end;
    transition: transform 0.2s ease;
}

.wis-fc-front .wis-fc-arrow { color: rgba(255,255,255,0.55); }
.wis-fc-back .wis-fc-arrow  { color: var(--fc-color); opacity: 0.6; }

.wis-flip-card:hover .wis-fc-front .wis-fc-arrow { transform: translateX(3px); }

@media (max-width: 900px) {
    .what-is-signal.wis-v3 .wis-flip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .what-is-signal.wis-v3 .wis-flip-grid { grid-template-columns: 1fr; }
    .wis-flip-card { transform: none !important; }
}

.wis-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(26,26,46,0.15);
}

.wis-pillar {
    padding: 2.5rem 2.5rem 2.5rem 0;
    border-right: 1px solid rgba(26,26,46,0.15);
    position: relative;
    cursor: default;
}
.wis-icon {
    width: 32px;
    height: 32px;
    display: block;
    margin-bottom: 1.25rem;
}

.wis-pillar:last-child { border-right: none; }
.wis-pillar:not(:first-child) { padding-left: 2.5rem; }

.wis-num {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    color: #999;
    margin-bottom: 0.35rem;
}

.wis-pillar:nth-child(1) .wis-num { color: var(--neon-lime); }
.wis-pillar:nth-child(2) .wis-num { color: var(--neon-sky); }
.wis-pillar:nth-child(3) .wis-num { color: var(--neon-pink); }
.wis-pillar:nth-child(4) .wis-num { color: var(--neon-indigo); }

.wis-title {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.9rem;
    font-weight: 500;
    color: var(--black-navy);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 0.75rem;
    text-transform: none;
}

.wis-body {
    font-size: 0.92rem;
    line-height: 1.7;
    color: #666;
    max-width: 100%;
}

/* Scroll-in animations */
.wis-header,
.wis-pillar {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.wis-header.visible,
.wis-pillar.visible {
    opacity: 1;
    transform: translateY(0);
}

.wis-pillar:nth-child(2) { transition-delay: 0.1s; }
.wis-pillar:nth-child(3) { transition-delay: 0.2s; }
.wis-pillar:nth-child(4) { transition-delay: 0.3s; }

@media (max-width: 900px) {
    .wis-pillars {
        grid-template-columns: repeat(2, 1fr);
    }
    .wis-pillar:nth-child(2) { border-right: none; padding-right: 0; }
    .wis-pillar:nth-child(3),
    .wis-pillar:nth-child(4) { border-top: 1px solid rgba(26,26,46,0.15); padding-left: 0; }
    .wis-pillar:nth-child(4) { border-right: none; padding-right: 0; }
    .wis-pillar:nth-child(3) { border-right: 1px solid rgba(26,26,46,0.15); padding-right: 2.5rem; }
}

@media (max-width: 540px) {
    .wis-pillars { grid-template-columns: 1fr; }
    .wis-pillar { border-right: none !important; border-top: 1px solid rgba(26,26,46,0.15); padding: 2rem 0 !important; }
    .wis-pillar:first-child { border-top: none; }
}

/* ── */

.signal-intro {
    background-color: black;
    position: relative;
    z-index: 10;
    margin-top: -100px;
    padding-bottom: 8rem;
}

.signal-intro-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 1rem 2rem 0 40px;
}

.signal-intro-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 2rem;
}

.signal-intro-inner p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: 680px;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

@media (max-width: 768px) {
    .signal-intro-inner {
        padding: 5rem 1.5rem 0;
    }
}

/* =============================================
   HERO SUN FLARE
   ============================================= */

.hero-flare {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
    opacity: 0;
    animation: none;
    will-change: opacity;
    background:
        radial-gradient(ellipse 50% 42% at 100% 0%, rgba(255,255,210,0.55) 0%, transparent 48%),
        radial-gradient(ellipse 72% 58% at 100% 0%, rgba(255,165,55,0.32) 0%, transparent 62%),
        radial-gradient(ellipse 90% 74% at 100% 0%, rgba(255,70,120,0.18) 0%, transparent 68%),
        radial-gradient(ellipse 100% 92% at 100% 0%, rgba(130,65,240,0.1) 0%, transparent 76%);
}

.hero-flare.flare-active {
    animation: flare-appear 1.5s ease forwards, flare-breathe 14s ease-in-out 1.5s infinite;
}

/* Near-corner lens glow */
.hero-flare::before {
    content: '';
    position: absolute;
    top: 4%;
    right: 6%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,240,155,0.22) 0%, transparent 65%);
    animation: none;
}

.hero-flare.flare-active::before {
    animation: flare-orb 14s ease-in-out 1.5s infinite;
}

/* Scatter orb — bleeds toward hero content */
.hero-flare::after {
    content: '';
    position: absolute;
    top: 38%;
    left: 12%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,190,90,0.14) 0%, transparent 65%);
    animation: none;
}

.hero-flare.flare-active::after {
    animation: flare-orb 14s ease-in-out 1.5s infinite reverse;
}

@keyframes flare-appear {
    from { opacity: 0; }
    to   { opacity: 0.42; }
}

@keyframes flare-breathe {
    0%   { opacity: 0.42; }
    18%  { opacity: 0.48; }
    /* burst — flares up over ~2s */
    44%  { opacity: 1; }
    52%  { opacity: 0.95; }
    /* settle back */
    64%  { opacity: 0.48; }
    100% { opacity: 0.42; }
}

@keyframes flare-orb {
    0%   { opacity: 0.4;  transform: scale(1); }
    18%  { opacity: 0.45; transform: scale(1); }
    44%  { opacity: 1;    transform: scale(1.35); }
    52%  { opacity: 0.9;  transform: scale(1.2); }
    64%  { opacity: 0.4;  transform: scale(1); }
    100% { opacity: 0.4;  transform: scale(1); }
}

/* =====================
   SIGNAL GLITCH EFFECT
   ===================== */

/* Screen-edge color bleed */
body.signal-glitch::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    box-shadow:
        inset 20px 0 100px color-mix(in srgb, var(--neon-pink) calc(var(--ge-r, 0) * 100%), transparent),
        inset -20px 0 100px color-mix(in srgb, var(--neon-sky) calc(var(--ge-c, 0) * 100%), transparent),
        inset 0 20px 100px color-mix(in srgb, var(--neon-lime) calc(var(--ge-y, 0) * 100%), transparent),
        inset 0 -20px 100px color-mix(in srgb, var(--neon-indigo) calc(var(--ge-p, 0) * 100%), transparent);
}

/* Scanline curtain */
body.signal-glitch::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, var(--scan-alpha, 0.04)) 3px,
        rgba(0, 0, 0, var(--scan-alpha, 0.04)) 4px
    );
}

/* Chromatic aberration on headings — 3D comic / anaglyph split */
body.signal-glitch h1,
body.signal-glitch h2,
body.signal-glitch h3,
body.signal-glitch .hero-label,
body.signal-glitch .hero-subtext {
    text-shadow:
        calc(var(--gr-x, 0) * 1px) calc(var(--gr-y, 0) * 1px) 0 color-mix(in srgb, var(--neon-pink) 85%, transparent),
        calc(var(--gb-x, 0) * 1px) calc(var(--gb-y, 0) * 1px) 0 color-mix(in srgb, var(--neon-sky) 85%, transparent);
    filter: contrast(var(--glitch-contrast, 1));
    transition: none;
}

/* Horizontal glitch bar */
body.signal-glitch .hero::after {
    outline: var(--bar-h, 0px) solid rgba(var(--bar-r, 255), var(--bar-g, 0), var(--bar-b, 100), 0.35);
    outline-offset: calc(var(--bar-y, 50) * 1vh - 50vh);
}

/* ── About page: text-only soft glitch — no full-page overlays ── */
body.about-page.signal-glitch::before,
body.about-page.signal-glitch::after { display: none; }

body.about-page.signal-glitch .hero::after { outline: none; }

body.about-page.signal-glitch h1,
body.about-page.signal-glitch h2:not(.vr-title),
body.about-page.signal-glitch h3 {
    text-shadow:
        calc(var(--gr-x, 0) * 0.4px) calc(var(--gr-y, 0) * 0.4px) 0 color-mix(in srgb, var(--neon-pink) 55%, transparent),
        calc(var(--gb-x, 0) * 0.4px) calc(var(--gb-y, 0) * 0.4px) 0 color-mix(in srgb, var(--neon-sky) 55%, transparent);
    filter: contrast(var(--glitch-contrast, 1));
    transition: none;
}

body.about-page.signal-glitch .vr-title {
    text-shadow: none;
    filter: none;
}

/* =============================================
   THEME SWITCHER
   ============================================= */

.theme-switcher {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 19999;
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 100px;
    padding: 4px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}

.ts-btn {
    height: 36px;
    padding: 0 1rem;
    border-radius: 100px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.6);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.ts-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.ts-btn.active {
    background: var(--warm-white);
    color: var(--black-navy);
}

/* Dark bg pages — switcher adjusts */
body.theme-3 .theme-switcher {
    background: rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.12);
}

body.theme-3 .ts-btn {
    color: rgba(0,0,0,0.4);
}

body.theme-3 .ts-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

body.theme-3 .ts-btn.active {
    background: var(--black-navy);
    color: var(--warm-white);
}

/* =============================================
   THEME 2 — Sticky Video Hero
   ============================================= */

/* Hidden by default */
.hero-video-sticky { display: none; }

/* Hide normal hero children; reveal sticky wrap */
body.theme-2 .hero-content,
body.theme-2 .hero-flare,
body.theme-2 .hero-image-card,
body.theme-2 .hero-globe-glyph,
body.theme-2 .hero .section-fade { display: none !important; }

body.theme-2 .hero-video-sticky { display: block !important; }

body.theme-2 .ready-section { display: none !important; }

/* Suppress base hero background image + overlay */
body.theme-2 .hero:not(.video-hero)::after,
body.theme-2 .hero:not(.video-hero)::before { display: none !important; }

/* Tall hero creates scroll space */
body.theme-2 .hero:not(.video-hero) {
    height: 250vh;
    background: #000;
    display: block;
    position: relative;
    overflow: visible;
}

/* Sticky frame pins to viewport top for the full hero scroll */
body.theme-2 .hero-video-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

/* Full-bleed video with scroll-driven scale */
body.theme-2 .hero-sticky-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(var(--sticky-scale, 1.05));
    transform-origin: center center;
    will-change: transform;
    transition: transform 0.08s linear;
    z-index: 0;
}

/* Text overlay */
body.theme-2 .hero-sticky-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 6rem;
    max-width: 800px;
    will-change: opacity, transform;
}

body.theme-2 .hero-sticky-content .hero-label {
    color: #ffffff;
    text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}

body.theme-2 .hero-sticky-content .hero-subtext {
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 12px rgba(0,0,0,0.3);
}

body.theme-2 .hero-sticky-content .btn-lg {
    background: #fff;
    color: var(--black-navy);
    border-color: #fff;
}

body.theme-2 .hero-sticky-content .btn-secondary {
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}

/* "Are you ready?" fades in after 50% scroll progress */
body.theme-2 .hero-sticky-ready {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
    will-change: opacity, transform;
}

body.theme-2 .hero-sticky-ready h2 {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 300;
    color: #FFE15B;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    text-shadow: 0 2px 24px rgba(0,0,0,0.2);
}

/* =============================================
   THEME 3 — Editorial / Floating
   ============================================= */

/* Base */
body.theme-3 {
    background: var(--warm-white);
}

/* Consistent content width on all sections for theme 2 — aligns with nav edges */
body.theme-3 .content-wrapper,
body.theme-3 .signal-intro-inner {
    max-width: 1660px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 4rem;
    padding-right: 4rem;
}

/* Nav — white with blur, no border on theme 2 */
body.theme-3 nav.nav-dark,
body.theme-3 nav.nav-light,
body.theme-4 nav.nav-dark,
body.theme-4 nav.nav-light {
    background: rgba(255,255,255,0.92) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
body.theme-3 .logo, body.theme-3 nav a,
body.theme-4 .logo, body.theme-4 nav a { color: var(--black-navy) !important; }

/* Nav pill CTA only — outlined style */
body.theme-3 nav .contact-link,
body.theme-4 nav .contact-link {
    background-color: transparent !important;
    border: 1px solid #111 !important;
    color: var(--black-navy) !important;
}
body.theme-3 nav .contact-link:hover,
body.theme-4 nav .contact-link:hover {
    background-color: var(--black-navy) !important;
    color: var(--warm-white) !important;
}

/* All other CTAs — black bg, white text */
body.theme-3 .contact-link,
body.theme-4 .contact-link {
    background-color: var(--black-navy);
    color: var(--warm-white);
}
body.theme-3 .contact-link:hover,
body.theme-4 .contact-link:hover {
    background-color: #333;
    color: var(--warm-white);
}

/* Hero — two-column grid, content starts below nav */
body.theme-3 .hero:not(.video-hero) {
    background: var(--warm-white);
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
    max-width: 1660px;
    margin: 0 auto;
    padding: 130px 4rem 0;
    overflow: visible;
}

body.theme-3 .hero:not(.video-hero)::after,
body.theme-3 .hero:not(.video-hero)::before {
    display: none !important;
}

body.theme-3 .hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    padding: 0;
    transform: none;
    max-width: 100%;
}

body.theme-3 .hero-content h1 {
    color: var(--black-navy);
    text-shadow: none;
    font-size: clamp(2.4rem, 4vw, 4.2rem);
}

body.theme-3 .hero-label {
    color: var(--black-navy);
}

body.theme-3 .hero-subtext {
    color: #555;
    max-width: 100%;
}

body.theme-3 .hero .btn-lg {
    background: var(--black-navy);
    color: var(--warm-white);
    border-color: var(--black-navy);
}
body.theme-3 .hero .btn-lg:hover {
    background: #333;
    border-color: #333;
}

body.theme-3 .hero .btn-secondary {
    color: var(--black-navy);
    border-color: rgba(0,0,0,0.35);
}
body.theme-3 .hero .btn-secondary:hover {
    background: var(--black-navy);
    color: var(--warm-white);
    border-color: var(--black-navy);
}

/* legacy */
body.theme-3 .hero-apply-btn { border-color: var(--black-navy); color: var(--black-navy); }
body.theme-3 .hero-apply-btn:hover { background: var(--black-navy); color: var(--warm-white); border-color: var(--black-navy); }

body.theme-4 .hero .btn-secondary,
body.theme-4 .hero-apply-btn {
    background: var(--black-navy) !important;
    border-color: var(--black-navy) !important;
    color: #fff !important;
}
body.theme-4 .hero-ctas .btn-secondary { display: none !important; }
body.theme-4 .hero .btn-secondary:hover,
body.theme-4 .hero-apply-btn:hover {
    background: #333 !important;
    border-color: #333 !important;
}

/* Floating image card — shared base */
.hero-image-card { display: none; }

body.theme-3 .hero-image-card {
    display: block;
    position: relative;
    width: 100%;
    height: calc(100vh - 160px);
    border-radius: 28px;
    overflow: hidden;
    background: var(--hero-bg, url('./images/unsplash/sorb-cDAfugtK9lA-unsplash.jpg')) center/cover no-repeat;
    filter: grayscale(100%) contrast(1.05);
    box-shadow: 0 32px 80px rgba(0,0,0,0.15);
}

body.theme-3 .hero-image-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--neon-lime) 65%, transparent) 0%,
        color-mix(in srgb, var(--neon-sky) 45%, transparent) 30%,
        transparent 62%
    );
    mix-blend-mode: overlay;
}

/* Globe glyph — hidden by default, floats on theme 2 hero card */
.hero-globe-glyph { display: none; }

body.theme-3 .hero-globe-glyph {
    display: block;
    position: absolute;
    right: calc(-4% + 50px);
    top: 50%;
    transform: translateY(calc(-50% + 350px));
    width: clamp(180px, 22%, 300px);
    height: auto;
    pointer-events: none;
    z-index: 4;
    opacity: 0.95;
    filter: none;
}

/* WIS: hide variant switcher, show pillars */
body.theme-3 .wis-vsw-row { display: none !important; }
body.theme-3 .wis-flip-grid { display: none !important; }

/* Signal intro on theme 2 */
body.theme-3 .signal-intro {
    background: var(--warm-white);
    margin-top: 0;
}

body.theme-3 .signal-intro p { color: #333; }

/* Meet the team — black filled button */
body.theme-3 .program-link {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border: none;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--warm-white);
    text-decoration: none;
    background: var(--black-navy);
    transition: background 0.2s ease;
}
body.theme-3 .program-link::after { display: none; }
body.theme-3 .program-link:hover { background: #333; }

/* Content cards — white floating with shadow */
body.theme-3 .content-cards {
    background: #f7f6f3;
}

body.theme-3 .content-card {
    background-color: var(--warm-white) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.07);
}

body.theme-3 .content-card:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

body.theme-3 .content-card.teal:hover,
body.theme-3 .content-card.sage:hover,
body.theme-3 .content-card.terra:hover,
body.theme-3 .content-card.warm:hover {
    background-color: var(--warm-white) !important;
}

body.theme-3 .content-card h4,
body.theme-3 .content-card p,
body.theme-3 .content-card .card-link {
    color: var(--black-navy) !important;
}

/* Four Pillars — white bg */
body.theme-3 .content-cards {
    background: var(--warm-white) !important;
}

/* Video sections — contained, matching hero width */
body.theme-3 .ready-section {
    margin-top: 200px;
}
body.theme-3 .ready-section .section-fade--white { display: none; }
body.theme-3 .ready-section,
body.theme-3 .pulse-section {
    border-radius: 28px;
    width: calc(100% - 8rem);
    max-width: 1660px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

/* Contact section */
body.theme-3 .contact-section {
    background: var(--warm-white);
}

/* Footer */
body.theme-3 footer {
    background: var(--black-navy);
}

/* =============================================
   THEME 4 — Editorial / Image Card with Text Inside
   ============================================= */

body.theme-4 {
    background: var(--warm-white);
}

body.theme-4 nav,
body.theme-4 nav.nav-dark,
body.theme-4 nav.nav-light {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}
body.theme-4 .logo,
body.theme-4 nav a { color: var(--black-navy) !important; }
body.theme-4 .contact-link {
    border-color: var(--black-navy) !important;
    color: var(--black-navy) !important;
}

/* Hero — white bg with padding, image card fills the space, text inside */
body.theme-4 .hero:not(.video-hero) {
    background: transparent;
    height: calc(100vh + 100px);
    display: flex;
    align-items: stretch;
    padding: 1rem;
    padding-top: calc(1rem + 80px);
    overflow: hidden;
}

body.theme-4 .hero:not(.video-hero)::after,
body.theme-4 .hero:not(.video-hero)::before {
    display: none !important;
}

/* Full-bleed image card inside hero */
body.theme-4 .hero-image-card {
    display: block;
    position: absolute;
    inset: calc(80px + 100px) 1.5rem calc(1.5rem + 124px);
    border-radius: 28px;
    overflow: hidden;
    z-index: 0;
    background: #1A1A2E;
    box-shadow: none;
}

body.theme-4 .hero-image-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.10);
    pointer-events: none;
}

/* Text sits inside the card at the bottom-left */
body.theme-4 .hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 2;
    padding: 0 6rem;
    transform: translateY(60px);
    margin: auto 0;
    max-width: 100%;
    align-self: center;
    width: 100%;
}

body.theme-4 .hero-content h1 {
    color: #ffffff;
    text-shadow: none;
    font-size: clamp(calc(2.4rem + 2px), 4vw, calc(4.5rem + 2px));
}

body.theme-4 .hero-label {
    color: #ffffff;
    font-size: clamp(calc(2.4rem + 2px), 4.5vw, calc(4.5rem + 2px));
}
body.theme-4 .hero-subtext { color: #ffffff; max-width: 800px; font-size: calc(1.1rem + 2px); }
body.theme-4 .hero-cta-row { justify-content: center; }

/* Rest of page — white bg */
/* Consistent content width on all sections for theme 3 */
body.theme-4 .content-wrapper,
body.theme-4 .signal-intro-inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

body.theme-4 .signal-intro { background: var(--warm-white); margin-top: 0; }
body.theme-4 .signal-intro p, body.theme-4 .signal-intro a { color: #333; }
/* WIS: hide variant switcher, show pillars */
body.theme-4 .wis-vsw-row { display: none !important; }
body.theme-4 .wis-flip-grid { display: none !important; }

/* Radial gradient fronts on flip cards (unused — kept for reference) */
body.theme-4 .wis-fc-teal .wis-fc-front {
    background: radial-gradient(ellipse at 35% 30%, #8ecae6 0%, #219ebc 45%, #023047 100%);
}
body.theme-4 .wis-fc-sage .wis-fc-front {
    background: radial-gradient(ellipse at 65% 28%, #b7e4c7 0%, #52b788 45%, #1b4332 100%);
}
body.theme-4 .wis-fc-terra .wis-fc-front {
    background: radial-gradient(ellipse at 30% 38%, #f4a261 0%, #e76f51 48%, #6b2a1a 100%);
}
body.theme-4 .wis-fc-warm .wis-fc-front {
    background: radial-gradient(ellipse at 62% 32%, #fde8c8 0%, #c9922a 50%, #5c3d11 100%);
}

/* Noise texture overlay at 50% opacity */
body.theme-4 .wis-flip-card .wis-fc-front::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: url('./images/hero/noise.png') center/cover no-repeat;
    opacity: 0.25;
    pointer-events: none;
    z-index: 1;
}

/* Keep text above the noise layer */
body.theme-4 .wis-flip-card .wis-fc-front > * {
    position: relative;
    z-index: 2;
}

/* Number → eyebrow style; title → H2 (2.2rem) */
body.theme-4 .wis-flip-card .wis-fc-front .wis-fc-num {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1;
}

body.theme-4 .wis-flip-card .wis-fc-front .wis-fc-title {
    font-family: 'Libre Baskerville', serif;
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #ffffff;
}

/* Content cards — unique spherical radial gradients */
body.theme-4 .content-cards { background: var(--warm-white); }

body.theme-4 .content-card.teal {
    background: radial-gradient(ellipse at 35% 30%, #8ecae6 0%, #219ebc 45%, #023047 100%) !important;
    box-shadow: 0 8px 32px rgba(2,48,71,0.25);
}
body.theme-4 .content-card.sage {
    background: radial-gradient(ellipse at 65% 28%, #b7e4c7 0%, #52b788 45%, #1b4332 100%) !important;
    box-shadow: 0 8px 32px rgba(27,67,50,0.25);
}
body.theme-4 .content-card.terra {
    background: radial-gradient(ellipse at 30% 38%, #f4a261 0%, #e76f51 48%, #6b2a1a 100%) !important;
    box-shadow: 0 8px 32px rgba(107,42,26,0.25);
}
body.theme-4 .content-card.warm {
    background: radial-gradient(ellipse at 62% 32%, #fde8c8 0%, #c9922a 50%, #5c3d11 100%) !important;
    box-shadow: 0 8px 32px rgba(92,61,17,0.25);
}

body.theme-4 .content-card.teal:hover,
body.theme-4 .content-card.sage:hover,
body.theme-4 .content-card.terra:hover,
body.theme-4 .content-card.warm:hover {
    background-color: unset !important;
    filter: brightness(1.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.22);
}

body.theme-4 .content-card h4,
body.theme-4 .content-card p,
body.theme-4 .content-card .card-link { color: #fff !important; }
body.theme-4 .pulse-section { display: none !important; }

body.theme-4 .statement-section {
    background: #0c0c0c;
    border-radius: 28px;
    margin: 0 1.5rem;
    overflow: hidden;
    padding: 10rem 2rem;
}

body.theme-4 .ready-section {
    border-radius: 0 !important;
    margin: -6rem 0 0 !important;
    height: calc(100vh + 200px);
    overflow: hidden;
}
body.theme-4 .ready-video {
    transform: scale(calc(1.0 + var(--ready-scroll, 0) * 0.07));
    will-change: transform;
    transition: transform 0.05s linear;
}
body.theme-4 .ready-section::before {
    background: linear-gradient(to bottom, white 0%, transparent 35%);
    z-index: 2;
}
body.theme-4 .ready-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, white 0%, transparent 35%);
    z-index: 2;
    pointer-events: none;
}
body.theme-4 .ready-content { z-index: 3; }
body.theme-4 .contact-section { background: var(--warm-white); }
body.theme-4 footer { background: var(--black-navy); }

body.theme-4 .theme-switcher { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.1); }
body.theme-4 .ts-btn { color: rgba(0,0,0,0.4); }
body.theme-4 .ts-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
body.theme-4 .ts-btn.active { background: var(--black-navy); color: var(--warm-white); }

/* Remove black section-fade shadows on themes 2 and 3 */
body.theme-3 .section-fade--black,
body.theme-4 .section-fade--black {
    display: none;
}

/* =============================================
   THEME 5 — Wireframe
   ============================================= */

body.theme-5 .theme-switcher {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.12);
}

body.theme-5 .ts-btn {
    color: rgba(0,0,0,0.45);
}

body.theme-5 .ts-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

body.theme-5 .ts-btn.active {
    background: var(--black-navy);
    color: var(--warm-white);
}

/* Strip all color — grayscale everything except the theme switcher itself.
   Applying filter to body breaks position:fixed children (new stacking context),
   so we target the three layout containers instead. */
body.theme-5 header,
body.theme-5 main,
body.theme-5 footer {
    filter: grayscale(1);
}

/* Hide images, let their containers show as gray blocks */
body.theme-5 img {
    opacity: 0;
}

body.theme-5 .article-image-container,
body.theme-5 .team-photo,
body.theme-5 .founder-photo-placeholder,
body.theme-5 .member-photo,
body.theme-5 .member-photo-placeholder,
body.theme-5 .cf-image {
    background: #c8c8c8 !important;
}

/* Hide the video, show gray block */
body.theme-5 .pulse-video {
    opacity: 0;
}

body.theme-5 .pulse-section {
    background: #c8c8c8 !important;
}

/* White background on all sections */
body.theme-5 section,
body.theme-5 .hero,
body.theme-5 .wis-section,
body.theme-5 .statement-section,
body.theme-5 .how-we-work,
body.theme-5 .founder-section,
body.theme-5 .contact-section,
body.theme-5 .signal-attrs {
    background: #fff !important;
    background-image: none !important;
}

/* Hero: remove background image, give it a light gray base so white text is replaced */
body.theme-5 .hero::before,
body.theme-5 .hero::after {
    display: none !important;
}

body.theme-5 .hero {
    background: #e8e8e8 !important;
}

body.theme-5 .hero-content,
body.theme-5 .hero-content h1,
body.theme-5 .hero-content p,
body.theme-5 .hero-label,
body.theme-5 .hero-subtext,
body.theme-5 .scroll-prompt {
    color: var(--black-navy) !important;
}

body.theme-5 .hero-apply-btn {
    border-color: var(--black-navy) !important;
    color: var(--black-navy) !important;
    background: transparent !important;
}

/* Hide the top ready-section; keep pulse-section at the bottom */
body.theme-5 .ready-section {
    display: none !important;
}

/* Nav — force dark text regardless of section data-nav */
body.theme-5 header nav {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: none !important;
}

body.theme-5 .logo,
body.theme-5 .nav-links a,
body.theme-5 .nav-dark .logo,
body.theme-5 .nav-dark .nav-links a,
body.theme-5 .contact-link {
    color: var(--black-navy) !important;
}

body.theme-5 .nav-dark .nav-links a::after,
body.theme-5 .contact-link::after {
    background-color: var(--black-navy) !important;
}

/* Colored section backgrounds → light gray */
body.theme-5 .about-split,
body.theme-5 .wis-inner,
body.theme-5 .statement-inner {
    background: #e8e8e8 !important;
}

/* Cards → white with gray border */
body.theme-5 .hww-card,
body.theme-5 .attr-tile,
body.theme-5 .attr-tile--glass,
body.theme-5 .attr-tile--stack {
    background: #f0f0f0 !important;
    border-color: #ddd !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Colored accent bars → gray */
body.theme-5 .hww-bar {
    background: #bbb !important;
}

/* Buttons → gray outline */
body.theme-5 .btn-lg,
body.theme-5 .contact-button,
body.theme-5 .submit-button,
body.theme-5 .hww-link {
    background: transparent !important;
    border: 1.5px solid #999 !important;
    color: #333 !important;
    box-shadow: none !important;
}

/* Footer → light gray instead of dark */
body.theme-5 footer {
    background: #e8e8e8 !important;
}

/* Nav → white */
body.theme-5 header {
    background: rgba(255,255,255,0.9) !important;
}

/* ── Transition orb layering ─────────────────────────────────────────────
   The scroll orb sits at z-index 1 (above section backgrounds).
   Lift all section content wrappers to z-index 2 so text/cards stay on top.
   ──────────────────────────────────────────────────────────────────────── */
.hero-content,
.wis-inner,
.statement-inner,
.attrs-inner,
.content-wrapper {
    position: relative;
    z-index: 2;
}

.coming-soon-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--warm-white);
    z-index: 19998;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem;
}

/* coming-soon overlay disabled — theme 4 is now the wireframe view */
/* body.theme-5 .coming-soon-overlay { display: flex; } */

.coming-soon-overlay h2 {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(3.5rem, 10vw, 9rem);
    font-weight: 500;
    color: var(--black-navy);
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0;
    text-transform: none;
}

/* =============================================
   OFFERING DETAIL PAGES (offerings/*.html)
   ============================================= */

.offering-detail-hero {
    background: var(--warm-white);
    padding: 7rem 6rem 8rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Top row: content + apply button */
.offering-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 3rem;
    padding-bottom: 3rem;
}

/* Color variants — 300-level background, white text */
.offering-detail-hero.hero--green { background: var(--green-300); border-bottom-color: transparent; }
.offering-detail-hero.hero--rust  { background: var(--rust-300);  border-bottom-color: transparent; }
.offering-detail-hero.hero--brown { background: var(--brown-300); border-bottom-color: transparent; }
.offering-detail-hero.hero--blue  { background: var(--blue-300);  border-bottom-color: transparent; }

/* Meta grid inside colored hero — invert colors */
.offering-detail-hero.hero--green .offering-meta-grid,
.offering-detail-hero.hero--rust  .offering-meta-grid,
.offering-detail-hero.hero--brown .offering-meta-grid,
.offering-detail-hero.hero--blue  .offering-meta-grid {
    border-color: rgba(255,255,255,0.2);
}

.offering-detail-hero.hero--green .offering-meta-item,
.offering-detail-hero.hero--rust  .offering-meta-item,
.offering-detail-hero.hero--brown .offering-meta-item,
.offering-detail-hero.hero--blue  .offering-meta-item {
    border-right-color: rgba(255,255,255,0.2);
}

.offering-detail-hero.hero--green .meta-label,
.offering-detail-hero.hero--rust  .meta-label,
.offering-detail-hero.hero--brown .meta-label,
.offering-detail-hero.hero--blue  .meta-label {
    color: rgba(255,255,255,0.5);
}

.offering-detail-hero.hero--green .meta-value,
.offering-detail-hero.hero--rust  .meta-value,
.offering-detail-hero.hero--brown .meta-value,
.offering-detail-hero.hero--blue  .meta-value {
    color: var(--warm-white);
}

/* Meta grid sits flush at the bottom of the hero */
.offering-detail-hero .offering-meta-grid {
    margin-bottom: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

/* 24px breathing room below the meta strip */
.offering-detail-hero {
    padding-bottom: 24px;
}

/* White text on colored heroes */
.offering-detail-hero.hero--green .eyebrow,
.offering-detail-hero.hero--rust  .eyebrow,
.offering-detail-hero.hero--brown .eyebrow,
.offering-detail-hero.hero--blue  .eyebrow { color: rgba(255,255,255,0.55); }

.offering-detail-hero.hero--green h1,
.offering-detail-hero.hero--rust  h1,
.offering-detail-hero.hero--brown h1,
.offering-detail-hero.hero--blue  h1 { color: var(--warm-white); }

.offering-detail-hero.hero--green .offering-detail-sub,
.offering-detail-hero.hero--rust  .offering-detail-sub,
.offering-detail-hero.hero--brown .offering-detail-sub,
.offering-detail-hero.hero--blue  .offering-detail-sub { color: rgba(255,255,255,0.7); }

.offering-detail-hero.hero--green .breadcrumb a,
.offering-detail-hero.hero--rust  .breadcrumb a,
.offering-detail-hero.hero--brown .breadcrumb a,
.offering-detail-hero.hero--blue  .breadcrumb a { color: rgba(255,255,255,0.55); }

.offering-detail-hero.hero--green .breadcrumb a:hover,
.offering-detail-hero.hero--rust  .breadcrumb a:hover,
.offering-detail-hero.hero--brown .breadcrumb a:hover,
.offering-detail-hero.hero--blue  .breadcrumb a:hover { color: var(--warm-white); }

.offering-detail-hero.hero--green .breadcrumb,
.offering-detail-hero.hero--rust  .breadcrumb,
.offering-detail-hero.hero--brown .breadcrumb,
.offering-detail-hero.hero--blue  .breadcrumb { color: rgba(255,255,255,0.4); }

.offering-hero-content {
    flex: 1;
}

/* Black apply button in hero */
.offering-hero-apply {
    display: inline-block;
    padding: 0.9rem 2rem;
    background: var(--black-navy);
    color: var(--warm-white);
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.offering-hero-apply:hover {
    opacity: 0.75;
}

.offering-detail-hero .eyebrow {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 2rem;
}

.offering-detail-hero h1 {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(2.8rem, 5vw, 5rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--text-color);
    margin: 0 0 1.5rem;
}

.offering-hero-statement {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.45;
    color: rgba(245, 242, 236, 0.85);
    max-width: 640px;
    margin: 0.5rem 0 1rem;
}

.offering-detail-sub {
    font-size: 1rem;
    font-weight: 400;
    color: rgba(26, 26, 46, 0.6);
    max-width: 560px;
    line-height: 1.65;
    margin: 0;
}

.offering-detail-body {
    background: var(--warm-white);
    width: 100%;
}

.offering-body-inner {
    max-width: 800px;
    padding: 5rem 6rem;
    margin: 0 auto 0 0;
}

/* Body color variants — 100-level tint */
.offering-detail-body.body--green { background: var(--green-100); }
.offering-detail-body.body--rust  { background: var(--rust-100);  }
.offering-detail-body.body--brown { background: var(--brown-100); }
.offering-detail-body.body--blue  { background: var(--blue-100);  }

.offering-detail-body p {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.82;
    color: rgba(26, 26, 46, 0.82);
    margin-bottom: 1.5rem;
}

.offering-detail-list {
    margin: 0.5rem 0 1.5rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.offering-detail-list li {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.72;
    color: rgba(26, 26, 46, 0.82);
    padding-left: 1.25rem;
    position: relative;
}

.offering-detail-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--stormy-teal, #2C6671);
    opacity: 0.5;
}

.offering-detail-cta {
    background: var(--warm-white);
    padding: 8rem 6rem;
    text-align: center;
}

.offering-detail-cta h2 {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--stormy-teal);
    margin: 0 0 1rem;
}

.offering-detail-cta p {
    font-size: 1rem;
    color: rgba(44,102,113,0.75);
    margin: 0 0 2.5rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.offering-detail-cta .btn-lg {
    background: var(--rust);
    color: var(--warm-white);
    border-color: var(--rust);
}

/* =============================================
   OFFERING DETAIL — META GRID, INSTANCES, BREADCRUMB, TESTIMONIALS
   ============================================= */

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    color: #999;
}

.breadcrumb a {
    color: #999;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--text-color);
}

/* Meta grid — who/where/when/cost */
.offering-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 4rem;
}

.offering-meta-item {
    padding: 1.5rem 2rem;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.offering-meta-item:last-child {
    border-right: none;
}

.meta-label {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #aaa;
}

.meta-value {
    font-family: 'Libre Baskerville', serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color);
}

/* Section title within body */
.offering-section-title {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--stormy-teal, #2C6671);
    margin: 3rem 0 0.75rem;
    letter-spacing: -0.01em;
}

.etr-schedule-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid rgba(44,102,113,0.18);
    border-radius: 16px;
    overflow: hidden;
    margin: 1.25rem 0 2.5rem;
}

.etr-col {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(44,102,113,0.18);
}

.etr-col:last-child {
    border-right: none;
}

.etr-col-header {
    background: var(--twilight-indigo, #223554);
    color: var(--warm-white, #F5F2EC);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 1rem 1.5rem;
}

.etr-row {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid rgba(44,102,113,0.1);
    gap: 0.1rem;
}

.etr-row:last-child {
    border-bottom: none;
    flex: 1;
}

.etr-time {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--stormy-teal, #2C6671);
    text-transform: uppercase;
    min-height: 0.9em;
}

.etr-activity {
    font-family: 'Libre Baskerville', serif;
    font-size: 0.95rem;
    color: var(--text-color, #1A1A2E);
    line-height: 1.35;
}

@media (max-width: 700px) {
    .etr-schedule-table {
        grid-template-columns: 1fr;
        border-radius: 12px;
    }
    .etr-col {
        border-right: none;
        border-bottom: 1px solid rgba(44,102,113,0.18);
    }
    .etr-col:last-child { border-bottom: none; }
}

.offering-inline-link {
    color: var(--stormy-teal);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(44,102,113,0.3);
    transition: border-color 0.2s, color 0.2s;
}
.offering-inline-link:hover {
    color: var(--twilight-indigo, #223554);
    border-color: var(--twilight-indigo, #223554);
}

/* Instances section */
.offering-instances-section {
    padding: 6rem;
    background: var(--warm-white);
    border-top: 1px solid var(--border-color);
}

.offering-instances-header {
    margin-bottom: 3rem;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.offering-instances-header .eyebrow {
    display: block;
    margin-bottom: 0.75rem;
}

.offering-instances-header h2 {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    color: var(--text-color);
    letter-spacing: -0.02em;
    margin: 0;
    text-transform: none;
}

.offering-instances-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.offering-instances-grid:has(> :nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
}

/* Single-column variant — always 1 col, ordered list */
.offering-instances-grid--single {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin: 0 auto;
}

.offering-instance-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 2.5rem;
    background: var(--warm-white);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.offering-instance-card:hover {
    border-color: var(--text-color);
    box-shadow: 0 12px 32px rgba(0,0,0,0.07);
    transform: translateY(-4px);
}

.instance-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.instance-date {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
}

.instance-badge {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.6rem;
    border-radius: 100px;
    background: #e8f5e8;
    color: #2a7a2a;
}

.offering-instance-card h3 {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--text-color);
}

.offering-instance-card p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: #555;
    margin: 0;
    flex: 1;
}

.instance-details {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.instance-details span {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: #888;
    position: relative;
    padding-right: 1rem;
}

.instance-details span::after {
    content: '·';
    position: absolute;
    right: 0;
    color: #ccc;
}

.instance-details span:last-child::after {
    display: none;
}

.instance-cta {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-color);
    margin-top: 0.25rem;
    transition: opacity 0.2s ease;
}

.offering-instance-card:hover .instance-cta {
    opacity: 0.5;
}

/* Evergreen inquiry card — warm tint, dashed border */
.offering-instance-card--inquiry {
    background: #F7F4F0;
    border-color: #E0D8CF;
    border-style: dashed;
}
.offering-instance-card--inquiry:hover {
    border-color: #b0a090;
    border-style: dashed;
}
.offering-instance-card--inquiry h3 { color: #5B5249; }
.offering-instance-card--inquiry p  { color: #7a7068; }

.instance-badge--inquiry {
    background: #EDE6DF;
    color: #7A5850;
}

/* Testimonials block */
.offering-testimonials {
    padding: 6rem;
    background: var(--warm-white);
    border-top: 1px solid var(--border-color);
}

.testimonials-inner {
    max-width: 800px;
}

.offering-testimonials .eyebrow {
    display: block;
    margin-bottom: 2rem;
}

.offering-quote {
    margin: 0;
    padding: 0;
    border: none;
}

.offering-quote p {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color);
    font-style: normal;
    margin: 0 0 1.5rem;
}

.offering-quote cite {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: #888;
    font-style: normal;
}

@media (max-width: 900px) {
    .offering-meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .offering-meta-item:nth-child(2) {
        border-right: none;
    }

    .offering-meta-item:nth-child(3) {
        border-top: 1px solid var(--border-color);
    }

    .offering-meta-item:nth-child(4) {
        border-top: 1px solid var(--border-color);
        border-right: none;
    }

    /* Colored hero — fix border colors when meta grid goes 2-col */
    .offering-detail-hero.hero--green .offering-meta-item:nth-child(3),
    .offering-detail-hero.hero--green .offering-meta-item:nth-child(4),
    .offering-detail-hero.hero--rust  .offering-meta-item:nth-child(3),
    .offering-detail-hero.hero--rust  .offering-meta-item:nth-child(4),
    .offering-detail-hero.hero--brown .offering-meta-item:nth-child(3),
    .offering-detail-hero.hero--brown .offering-meta-item:nth-child(4),
    .offering-detail-hero.hero--blue  .offering-meta-item:nth-child(3),
    .offering-detail-hero.hero--blue  .offering-meta-item:nth-child(4) {
        border-top-color: rgba(255,255,255,0.2);
    }

    .offering-detail-hero {
        padding: 8rem 2.5rem 0;
    }

    .offering-body-inner {
        padding: 3.5rem 2.5rem;
    }

    .offering-detail-cta {
        padding: 5rem 2.5rem;
    }

    .offering-instances-grid,
    .offering-instances-grid:has(> :nth-child(4)),
    .offering-instances-grid--single,
    .offering-instances-grid--three {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .offering-instances-section {
        padding: 3rem 1.5rem;
    }

    .offering-testimonials {
        padding: 4rem 1.5rem;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .offering-detail-hero {
        padding: 6rem 1.25rem 0;
    }

    /* Stack apply button below title, full width */
    .offering-hero-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.75rem;
        padding-bottom: 2.5rem;
    }

    .offering-hero-apply {
        width: 100%;
        text-align: center;
    }

    .offering-body-inner {
        padding: 2.5rem 1.25rem;
    }

    .offering-detail-cta {
        padding: 4rem 1.25rem;
    }

    .offering-instances-section {
        padding: 2.5rem 1.25rem;
    }

    .offering-testimonials {
        padding: 3rem 1.25rem;
    }

    .offering-meta-item {
        padding: 1rem 1.25rem;
    }
}
/* Signal Institute */

/* Hide green glow elements */
.hero-flare { display: none !important; }
.ready-section { display: none !important; }
body.theme-4 nav .logo img { filter: brightness(0); }

/* Simplify theme-2 hero video — no scroll zoom, just clean fullscreen loop */
body.theme-2 .hero-sticky-video {
    transform: scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
}
body.theme-2 .hero-video-sticky {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Forest video inside theme-4 card */
.hero-card-video {
    display: none;
}
body.theme-4 .hero-card-video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* ============================================================
   SITEWIDE BRAND OVERRIDES — footer, buttons, links
   ============================================================ */

footer {
    background-color: var(--stormy-teal);
}

.btn-lg {
    background: var(--rust);
    border-color: var(--rust);
}
.btn-lg:hover {
    background: var(--dark-wine);
    border-color: var(--dark-wine);
}

.category-see-all {
    color: var(--stormy-teal);
    border-bottom-color: var(--stormy-teal);
}
.category-see-all:hover {
    color: #4FB8C8;
    border-bottom-color: #4FB8C8;
    opacity: 1;
}

/* Allow data-nav="dark" pages to override theme-4's forced dark nav text */
body[data-nav="dark"] nav a,
body[data-nav="dark"] .logo {
    color: #fff !important;
}

/* Mobile nav panel is always warm-white — keep links and logo dark regardless of body data-nav */
body[data-nav="dark"] .mobile-nav-links a,
body[data-nav="dark"] .mobile-nav .logo {
    color: var(--black-navy, #1A1A2E) !important;
}


/* ============================================================
   OFFERING DETAIL HERO — Category-semantic color variants
   (sage/eggplant/dark-wine/indigo, tied to actual brand meaning)
   ============================================================ */

.offering-detail-hero.hero--sage { background: var(--dry-sage); border-bottom-color: transparent; }
.offering-detail-hero.hero--sage .offering-meta-grid { border-color: rgba(245,242,236,0.25); }
.offering-detail-hero.hero--sage .offering-meta-item { border-right-color: rgba(245,242,236,0.25); }
.offering-detail-hero.hero--sage .meta-label { color: rgba(245,242,236,0.6); }
.offering-detail-hero.hero--sage .meta-value { color: var(--warm-white); }
.offering-detail-hero.hero--sage .eyebrow { color: rgba(245,242,236,0.65); }
.offering-detail-hero.hero--sage h1 { color: var(--warm-white); }
.offering-detail-hero.hero--sage .offering-detail-sub { color: rgba(245,242,236,0.8); }
.offering-detail-hero.hero--sage .breadcrumb a { color: rgba(245,242,236,0.65); }
.offering-detail-hero.hero--sage .breadcrumb a:hover { color: var(--warm-white); }
.offering-detail-hero.hero--sage .breadcrumb { color: rgba(245,242,236,0.5); }
.offering-detail-body.body--sage { background: var(--warm-white-light, #FAF8F4); }

.offering-detail-hero.hero--eggplant { background: var(--eggplant); border-bottom-color: transparent; }
.offering-detail-hero.hero--eggplant .offering-meta-grid { border-color: rgba(245,242,236,0.2); }
.offering-detail-hero.hero--eggplant .offering-meta-item { border-right-color: rgba(245,242,236,0.2); }
.offering-detail-hero.hero--eggplant .meta-label { color: rgba(245,242,236,0.5); }
.offering-detail-hero.hero--eggplant .meta-value { color: var(--warm-white); }
.offering-detail-hero.hero--eggplant .eyebrow { color: rgba(245,242,236,0.55); }
.offering-detail-hero.hero--eggplant h1 { color: var(--warm-white); }
.offering-detail-hero.hero--eggplant .offering-detail-sub { color: rgba(245,242,236,0.7); }
.offering-detail-hero.hero--eggplant .breadcrumb a { color: rgba(245,242,236,0.55); }
.offering-detail-hero.hero--eggplant .breadcrumb a:hover { color: var(--warm-white); }
.offering-detail-hero.hero--eggplant .breadcrumb { color: rgba(245,242,236,0.4); }
.offering-detail-body.body--eggplant { background: var(--warm-white-light, #FAF8F4); }

.offering-detail-hero.hero--dark-wine { background: var(--dark-wine); border-bottom-color: transparent; }
.offering-detail-hero.hero--dark-wine .offering-meta-grid { border-color: rgba(245,242,236,0.2); }
.offering-detail-hero.hero--dark-wine .offering-meta-item { border-right-color: rgba(245,242,236,0.2); }
.offering-detail-hero.hero--dark-wine .meta-label { color: rgba(245,242,236,0.5); }
.offering-detail-hero.hero--dark-wine .meta-value { color: var(--warm-white); }
.offering-detail-hero.hero--dark-wine .eyebrow { color: rgba(245,242,236,0.55); }
.offering-detail-hero.hero--dark-wine h1 { color: var(--warm-white); }
.offering-detail-hero.hero--dark-wine .offering-detail-sub { color: rgba(245,242,236,0.7); }
.offering-detail-hero.hero--dark-wine .breadcrumb a { color: rgba(245,242,236,0.55); }
.offering-detail-hero.hero--dark-wine .breadcrumb a:hover { color: var(--warm-white); }
.offering-detail-hero.hero--dark-wine .breadcrumb { color: rgba(245,242,236,0.4); }
.offering-detail-body.body--dark-wine { background: var(--warm-white-light, #FAF8F4); }

.offering-detail-hero.hero--indigo { background: var(--twilight-indigo); border-bottom-color: transparent; }
.offering-detail-hero.hero--indigo .offering-meta-grid { border-color: rgba(245,242,236,0.2); }
.offering-detail-hero.hero--indigo .offering-meta-item { border-right-color: rgba(245,242,236,0.2); }
.offering-detail-hero.hero--indigo .meta-label { color: rgba(245,242,236,0.5); }
.offering-detail-hero.hero--indigo .meta-value { color: var(--warm-white); }
.offering-detail-hero.hero--indigo .eyebrow { color: rgba(245,242,236,0.55); }
.offering-detail-hero.hero--indigo h1 { color: var(--warm-white); }
.offering-detail-hero.hero--indigo .offering-detail-sub { color: rgba(245,242,236,0.7); }
.offering-detail-hero.hero--indigo .breadcrumb a { color: rgba(245,242,236,0.55); }
.offering-detail-hero.hero--indigo .breadcrumb a:hover { color: var(--warm-white); }
.offering-detail-hero.hero--indigo .breadcrumb { color: rgba(245,242,236,0.4); }
.offering-detail-body.body--indigo { background: var(--warm-white-light, #FAF8F4); }

/* ============================================================
   OFFERING TESTIMONIALS — black-navy, consistent across all pages
   ============================================================ */

/* All 4 main offering page testimonials: stormy-teal */
.offering-testimonials:is(.testimonials--sage, .testimonials--indigo, .testimonials--eggplant, .testimonials--dark-wine) {
    background: var(--stormy-teal, #2C6671);
    border-top-color: transparent;
}

.offering-testimonials:is(.testimonials--sage, .testimonials--indigo, .testimonials--eggplant, .testimonials--dark-wine) .eyebrow {
    color: rgba(245,242,236,0.55);
}

.offering-testimonials:is(.testimonials--sage, .testimonials--indigo, .testimonials--eggplant, .testimonials--dark-wine) .testimonial-item {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
}

.offering-testimonials:is(.testimonials--sage, .testimonials--indigo, .testimonials--eggplant, .testimonials--dark-wine) .testimonial-item blockquote {
    color: rgba(245,242,236,0.92);
}

.offering-testimonials:is(.testimonials--sage, .testimonials--indigo, .testimonials--eggplant, .testimonials--dark-wine) .testimonial-item cite {
    color: rgba(245,242,236,0.45);
}

.offering-testimonials:is(.testimonials--sage, .testimonials--indigo, .testimonials--eggplant, .testimonials--dark-wine) .offering-quote {
    color: rgba(245,242,236,0.9);
}

.offering-testimonials:is(.testimonials--sage, .testimonials--indigo, .testimonials--eggplant, .testimonials--dark-wine) .offering-quote cite {
    color: rgba(245,242,236,0.5);
}

/* No-photo variant: single-column card for anonymous testimonials */
.testi-card--no-photo { grid-template-columns: 1fr; }

/* Slider controls on dark (stormy-teal) offering-testimonials background */
.offering-testimonials .testi-stage { margin-top: 2rem; }
.offering-testimonials .testi-btn {
    border-color: rgba(245,242,236,0.4);
    color: var(--warm-white, #F5F2EC);
}
.offering-testimonials .testi-btn:hover {
    background: rgba(245,242,236,0.1);
    border-color: rgba(245,242,236,0.6);
}
.offering-testimonials .testi-dot { background: rgba(245,242,236,0.3); }
.offering-testimonials .testi-dot.active { background: var(--warm-white, #F5F2EC); }

/* Instances sections — plain warm white, no category tints */
.offering-instances-section.instances--eggplant,
.offering-instances-section.instances--dark-wine,
.offering-instances-section.instances--sage,
.offering-instances-section.instances--indigo {
    background: var(--warm-white);
    border-top-color: var(--border-color);
}

/* Three-column grid for intensives */
.offering-instances-grid--three {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    margin: 0 auto;
}

/* Multi-testimonial grid inside offering-testimonials */
.testimonials-inner {
    max-width: 1120px;
    margin: 0 auto;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    margin-top: 2.5rem;
}

.testimonial-item {
    background: rgba(255,255,255,0.5);
    border-radius: 12px;
    padding: 2rem 1.75rem;
    border: 1px solid rgba(255,255,255,0.65);
    display: flex;
    flex-direction: column;
}

.testimonial-item blockquote {
    font-family: 'Libre Baskerville', serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.72;
    font-style: normal;
    color: var(--black-navy);
    margin: 0 0 1.25rem;
    border: none;
    padding: 0;
    quotes: none;
    flex: 1;
}

.testimonial-item cite {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    font-style: normal;
    color: rgba(26,26,46,0.55);
    display: block;
}

.testimonial-person {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonial-avatar-placeholder {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    background: rgba(26, 26, 46, 0.12);
    flex-shrink: 0;
}

.offering-testimonials:is(.testimonials--sage, .testimonials--indigo, .testimonials--eggplant, .testimonials--dark-wine) .testimonial-avatar-placeholder {
    background: rgba(245, 242, 236, 0.2);
}

/* Tagline below category H1 on offering category-landing pages */
.offering-hero-tagline {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 0.5rem;
    color: rgba(245, 242, 236, 0.85);
}

/* Couples Intensive — two-button apply group (Partner 1 / Partner 2) */
.couples-apply-group {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.couples-apply-group--cta {
    justify-content: center;
}

/* Small helper text under a field, e.g. explaining why we're asking */
.field-hint {
    font-size: 0.8rem;
    color: var(--stormy-teal, #6b6b66);
    margin-top: 0.4rem;
    margin-bottom: 0;
}

/* Full-bleed homepage hero video (edgeless, no scroll-zoom) */
.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/* TEMP: Signal Attributes section hidden on homepage — moving to About page later.
   Remove this rule when ready to relocate. */
.signal-attrs.attrs-v5 {
    display: none;
}

/* ── Shared teal testimonial slider (Diana page + Couples Intensive) ─── */
.member-testimonials {
    padding: 6rem 4rem;
    background: var(--stormy-teal, #2C6671);
}
.member-testimonials-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.member-testimonials-eyebrow {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(245, 242, 236, 0.55);
    margin-bottom: 2.5rem;
}
.member-testimonials .testi-card {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.12);
}
.member-testimonials .testi-body blockquote {
    color: rgba(245, 242, 236, 0.92);
    font-style: normal;
}
.member-testimonials .testi-name { color: rgba(245, 242, 236, 0.95); }
.member-testimonials .testi-role { color: rgba(245, 242, 236, 0.5); }
.member-testimonials .testi-btn {
    color: var(--warm-white, #F5F2EC);
    border-color: rgba(245, 242, 236, 0.3);
}
.member-testimonials .testi-btn:hover {
    background: rgba(245, 242, 236, 0.1);
    border-color: rgba(245, 242, 236, 0.5);
}
.member-testimonials .testi-dot { background: rgba(245, 242, 236, 0.3); }
.member-testimonials .testi-dot.active { background: var(--warm-white, #F5F2EC); }
@media (max-width: 900px) {
    .member-testimonials { padding: 4rem 2rem; }
}

/* Mobile override — must come last to beat base rules defined below media queries */
@media (max-width: 860px) {
    .offering-instances-grid--three,
    .offering-instances-grid--single {
        grid-template-columns: 1fr;
        max-width: none;
    }
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}