/* ═══════════════════════════════════════════════════════════════
 ASCENDRA FINANCIAL | BRAND STYLES
 Palette: Electric Purple #7B00FF · Vivid Green #00E88F
 Dark Navy #0B0E1F · Warm Cream #F5F3EE
 Type: Poppins (300, 400, 500, 600, 700, 800)
 ═══════════════════════════════════════════════════════════════ */

:root {
 --purple: #7B00FF;
 --purple-deep: #5A00BD;
 --purple-glow: #A560FF;
 --green: #00E88F;
 --green-dim: #00C27A;
 --navy: #0B0E1F;
 --navy-2: #141833;
 --navy-3: #1E2347;
 --cream: #F5F3EE;
 --cream-2: #EBE8DE;
 --white: #FFFFFF;
 --black: #000000;
 --text: #0B0E1F;
 --text-mute: #5D6280;
 --text-on-dark: #E8E9F4;
 --text-on-dark-mute: #A3A8C4;

 --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 --radius: 18px;
 --radius-lg: 28px;
 --shadow: 0 24px 60px -24px rgba(11,14,31,.30);
 --shadow-hi: 0 40px 90px -30px rgba(11,14,31,.45);
 --container: 1200px;
 --nav-h: 76px;
 --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ───── Reset ───── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
 margin: 0;
 font-family: var(--font);
 font-weight: 400;
 color: var(--text);
 background: var(--cream);
 line-height: 1.55;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
sup { font-size: .55em; }

.container { width: min(100%, var(--container)); margin-inline: auto; padding-inline: 24px; }

/* ───── Buttons ───── */
.btn {
 --bg: var(--navy);
 --fg: var(--white);
 display: inline-flex; align-items: center; justify-content: center; gap: 8px;
 padding: 13px 22px;
 background: var(--bg); color: var(--fg);
 font-weight: 600; font-size: 15px; letter-spacing: .01em;
 border-radius: 999px;
 transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
 white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0,0,0,.35); }
.btn:active { transform: translateY(0); }
.btn--green { --bg: var(--green); --fg: var(--navy); }
.btn--green:hover { --bg: #00FF9D; }
.btn--purple { --bg: var(--purple); --fg: var(--white); }
.btn--purple:hover { --bg: #8B1FFF; }
.btn--ghost { --bg: transparent; --fg: var(--text); padding: 12px 16px; }
.btn--outline-light { --bg: transparent; --fg: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.btn--outline-light:hover { --bg: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }

/* ═══════════════════════════════════════════════════════════
 NAV
 ═══════════════════════════════════════════════════════════ */
.nav {
 position: fixed; top: 0; left: 0; right: 0;
 height: var(--nav-h);
 z-index: 100;
 transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
 border-bottom: 1px solid transparent;
}
.nav--scrolled {
 background: rgba(11,14,31,.85);
 backdrop-filter: saturate(160%) blur(16px);
 -webkit-backdrop-filter: saturate(160%) blur(16px);
 border-bottom-color: rgba(255,255,255,.08);
}
.nav__inner {
 height: 100%;
 display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__brand {
 display: inline-flex; align-items: center; gap: 10px;
 color: var(--white);
}
.nav__mark {
 width: 30px; height: 30px;
 color: var(--green);
 filter: drop-shadow(0 0 12px rgba(0,232,143,.35));
}
.nav__wordmark {
 display: inline-flex; align-items: baseline; gap: 6px;
 font-size: 18px; letter-spacing: -.01em;
}
.nav__wordmark-bold { font-weight: 700; color: var(--white); }
.nav__wordmark-light { font-weight: 300; color: var(--white); opacity: .85; }
.footer .nav__wordmark-bold,
.footer .nav__wordmark-light { color: var(--cream); }

.nav__links { display: flex; gap: 28px; }
.nav__links a {
 color: rgba(255,255,255,.78);
 font-size: 14.5px; font-weight: 500;
 position: relative;
 transition: color .2s var(--ease);
}
.nav__links a:hover { color: var(--white); }
.nav__links a::after {
 content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
 height: 2px; background: var(--green); border-radius: 2px;
 transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav .btn--ghost { color: rgba(255,255,255,.85); }
.nav .btn--ghost:hover { color: var(--white); background: rgba(255,255,255,.08); }

.nav__toggle {
 display: none;
 width: 44px; height: 44px;
 flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
 display: none;
 position: fixed; inset: var(--nav-h) 0 0 0;
 background: rgba(11,14,31,.98);
 backdrop-filter: blur(20px);
 padding: 32px 24px;
 flex-direction: column; gap: 16px;
 z-index: 99;
}
.nav__mobile a { color: var(--white); font-size: 22px; font-weight: 500; padding: 10px 0; }
.nav__mobile .btn { margin-top: 12px; font-size: 17px; }

/* ═══════════════════════════════════════════════════════════
 HERO | Electric Purple with animated mesh
 ═══════════════════════════════════════════════════════════ */
.hero {
 position: relative;
 min-height: clamp(720px, 100svh, 960px);
 padding: calc(var(--nav-h) + 40px) 0 100px;
 background: radial-gradient(120% 80% at 80% -10%, #9A2CFF 0%, #7B00FF 45%, #4A00A8 100%);
 color: var(--white);
 overflow: hidden;
 display: flex; align-items: center;
}

/* Animated blobs */
.hero__mesh, .cta__bg {
 position: absolute; inset: 0;
 overflow: hidden;
 pointer-events: none;
}
.hero__mesh .blob, .cta__bg .blob {
 position: absolute;
 border-radius: 50%;
 filter: blur(70px);
 opacity: .55;
 mix-blend-mode: screen;
 will-change: transform;
}
.blob--green { width: 620px; height: 620px; left: -120px; top: -100px; background: radial-gradient(circle, var(--green), transparent 70%); animation: float-a 18s ease-in-out infinite; }
.blob--navy { width: 680px; height: 680px; right: -150px; bottom: -200px; background: radial-gradient(circle, #2A0D6E, transparent 70%); animation: float-b 22s ease-in-out infinite; mix-blend-mode: normal; opacity: .7; }
.blob--white { width: 420px; height: 420px; left: 30%; top: 10%; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 70%); animation: float-c 20s ease-in-out infinite; }
.blob--pink { width: 520px; height: 520px; right: 5%; top: 30%; background: radial-gradient(circle, #FF5EC4, transparent 70%); animation: float-d 24s ease-in-out infinite; opacity: .35; }

@keyframes float-a { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(80px,120px) scale(1.12);} }
@keyframes float-b { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(-60px,-90px) scale(1.1);} }
@keyframes float-c { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(-100px,50px) scale(.92);} }
@keyframes float-d { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(-40px,80px) scale(1.08);} }

.hero__float {
 position: absolute;
 right: -80px; top: 60%;
 width: 540px; height: 540px;
 color: rgba(255,255,255,.06);
 transform: rotate(-8deg);
 pointer-events: none;
 animation: float-mark 14s ease-in-out infinite;
}
@keyframes float-mark { 0%,100% { transform: translateY(0) rotate(-8deg);} 50% { transform: translateY(-24px) rotate(-6deg);} }

.hero__inner {
 position: relative; z-index: 2;
}
.hero__badge {
 display: inline-flex; align-items: center; gap: 8px;
 padding: 7px 14px;
 background: rgba(255,255,255,.12);
 border: 1px solid rgba(255,255,255,.22);
 border-radius: 999px;
 font-size: 13px; font-weight: 500;
 backdrop-filter: blur(10px);
}
.hero__badge .dot {
 width: 8px; height: 8px; border-radius: 50%;
 background: var(--green);
 box-shadow: 0 0 0 0 rgba(0,232,143,.7);
 animation: pulse 2s infinite;
}
@keyframes pulse {
 0% { box-shadow: 0 0 0 0 rgba(0,232,143,.7); }
 70% { box-shadow: 0 0 0 10px rgba(0,232,143,0); }
 100% { box-shadow: 0 0 0 0 rgba(0,232,143,0); }
}

.hero__title {
 margin: 24px 0 20px;
 font-size: clamp(38px, 5vw, 72px);
 font-weight: 700;
 letter-spacing: -.03em;
 line-height: 1.04;
 text-wrap: balance;
}
.hero__title .hl {
 background: linear-gradient(100deg, var(--green) 0%, #A7FFD3 50%, var(--green) 100%);
 background-size: 200% 100%;
 -webkit-background-clip: text; background-clip: text; color: transparent;
 animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.hero__sub {
 max-width: 640px;
 font-size: clamp(17px, 1.3vw, 20px);
 color: rgba(255,255,255,.85);
 font-weight: 400;
}

.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }

.hero__proof {
 margin-top: 44px;
 display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
 font-size: 14.5px;
 color: rgba(255,255,255,.85);
}
.hero__proof .stars { color: var(--green); font-size: 17px; letter-spacing: 2px; }
.hero__proof strong { color: var(--white); font-weight: 600; }
.hero__proof-sep { display: inline-block; width: 1px; height: 20px; background: rgba(255,255,255,.25); }

.hero__scroll {
 position: absolute; bottom: 28px; left: 50%;
 transform: translateX(-50%);
 width: 26px; height: 42px;
 border: 1.5px solid rgba(255,255,255,.5);
 border-radius: 14px;
 display: flex; justify-content: center; padding-top: 7px;
 z-index: 2;
}
.hero__scroll span {
 width: 3px; height: 8px;
 background: var(--white); border-radius: 2px;
 animation: scroll-bob 1.8s ease-in-out infinite;
}
@keyframes scroll-bob { 0%,100% { transform: translateY(0); opacity: 1;} 50% { transform: translateY(10px); opacity: .3;} }

/* ═══════════════════════════════════════════════════════════
 LENDER STRIP
 ═══════════════════════════════════════════════════════════ */
.lenders {
 background: var(--navy);
 color: var(--text-on-dark-mute);
 padding: 38px 0 42px;
 overflow: hidden;
 position: relative;
}
.lenders__label {
 text-align: center;
 font-size: 12.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
 color: rgba(255,255,255,.55);
 margin-bottom: 24px;
}
.lenders__row {
 display: flex; gap: 56px;
 justify-content: center; flex-wrap: wrap;
}
.lenders__row span {
 font-size: 17px; font-weight: 600; color: rgba(255,255,255,.45);
 letter-spacing: .02em;
 transition: color .3s var(--ease);
}
.lenders__row span:hover { color: var(--white); }

/* ═══════════════════════════════════════════════════════════
 STATS
 ═══════════════════════════════════════════════════════════ */
.stats {
 /* Diana v53: back to original flat cream — no photo overlay here */
 background: var(--cream);
 padding: 90px 0 60px;
}
.stats__grid {
 display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.stats__item {
 text-align: center;
 display: flex; flex-direction: column; align-items: center;
 padding-inline: 24px;
 border-left: 1px solid rgba(11,14,31,.1);
}
.stats__item:first-child { border-left: 0; }
.stats__num {
 font-size: clamp(48px, 5vw, 76px);
 font-weight: 700;
 color: var(--navy);
 letter-spacing: -.04em;
 line-height: 1;
 background: linear-gradient(180deg, var(--navy), var(--purple));
 -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stats__label {
 margin-top: 12px;
 font-size: 15px; font-weight: 500; color: var(--text-mute); line-height: 1.4;
}
.stats__footnote {
 margin-top: 28px;
 font-size: 12px; color: var(--text-mute); opacity: .7;
}

/* ═══════════════════════════════════════════════════════════
 SECTION HEADS
 ═══════════════════════════════════════════════════════════ */
.eyebrow {
 display: inline-block;
 font-size: 13px; font-weight: 600; letter-spacing: .22em;
 text-transform: uppercase;
 color: var(--purple);
 margin-bottom: 14px;
}
.eyebrow--green { color: var(--green-dim); }
.eyebrow--cream { color: var(--green); }

.section-head {
 max-width: 720px;
 margin-bottom: 60px;
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 {
 font-size: clamp(30px, 3.4vw, 52px);
 margin-bottom: 18px;
 text-wrap: balance;
}
.section-head p {
 font-size: 17px; color: var(--text-mute); max-width: 620px;
}
.section-head--center p { margin-inline: auto; }

/* v53: On mobile, fall back to scroll attachment — fixed backgrounds
  are heavy on touch devices and can cause repaint jank. */
@media (max-width: 900px) {
 .section,
 .section--tinted,
 .architect,
 .video-stories,
 .reviews,
 .featured-video,
 .featured-podcast {
 background-attachment: scroll !important;
 }
}

/* v55: Comprehensive light-text override for content that sits directly on
  the dark-photo wash sections (no card background of its own).
  Covers section-heads, architect copy, who-are-we copy, .reviews chrome,
  and inverts outline buttons to the light variant on dark bg. */
.section .who-grid .who__copy h2,
.section .who-grid .who__copy p,
.section .who-grid .who__copy strong,
.section .who-grid .who__copy .eyebrow,
.architect .architect__copy h2,
.architect .architect__copy p,
.architect .architect__copy strong,
.architect .architect__copy .eyebrow {
 color: var(--white) !important;
}
/* Outline buttons on dark bg → swap dark outline for light outline */
.section .btn--outline,
.architect .btn--outline,
.video-stories .btn--outline,
.reviews .btn--outline,
.featured-video .btn--outline,
.featured-podcast .btn--outline,
.section--tinted .btn--outline {
 color: var(--white) !important;
 border-color: rgba(255,255,255,.55) !important;
 background: transparent !important;
}
.section .btn--outline:hover,
.architect .btn--outline:hover,
.video-stories .btn--outline:hover,
.reviews .btn--outline:hover,
.featured-video .btn--outline:hover,
.featured-podcast .btn--outline:hover,
.section--tinted .btn--outline:hover {
 background: rgba(255,255,255,.1) !important;
 border-color: var(--white) !important;
}

/* v52: Section-head text light for the cream-turned-dark sections.
  Cards inside these sections keep their own text colors via their own bg. */
.stats .section-head h2, .stats .section-head p, .stats .section-head .eyebrow,
.stats .stat__label, .stats .stat__value,
.architect .architect__copy h2, .architect .architect__copy p, .architect .architect__copy .eyebrow,
.architect .architect__punch strong,
.video-stories .section-head h2, .video-stories .section-head p, .video-stories .section-head .eyebrow,
.reviews .section-head h2, .reviews .section-head p, .reviews .section-head .eyebrow,
.section > .container > .section-head h2,
.section > .container > .section-head p,
.section > .container > .section-head .eyebrow,
.featured-video h2, .featured-video p, .featured-video .eyebrow,
.featured-podcast h2, .featured-podcast p, .featured-podcast .section-head h2,
.featured-podcast .section-head p, .featured-podcast .eyebrow {
 color: var(--white) !important;
}
.stats .section-head .eyebrow,
.architect .architect__copy .eyebrow,
.video-stories .section-head .eyebrow,
.reviews .section-head .eyebrow,
.section > .container > .section-head .eyebrow,
.featured-video .eyebrow,
.featured-podcast .eyebrow {
 color: rgba(255,255,255,.75) !important;
}

.hl-green {
 background: linear-gradient(110deg, var(--green) 0%, var(--purple) 100%);
 -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ═══════════════════════════════════════════════════════════
 SERVICES
 ═══════════════════════════════════════════════════════════ */
.services {
 padding: 110px 0 110px;
 background: var(--cream);
}
.services__grid {
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.service-card {
 position: relative;
 padding: 32px 28px 30px;
 background: var(--white);
 border-radius: var(--radius-lg);
 border: 1px solid rgba(11,14,31,.06);
 transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
 overflow: hidden;
}
.service-card::before {
 content: "";
 position: absolute; inset: 0;
 background: radial-gradient(80% 60% at 0% 0%, rgba(123,0,255,.08), transparent 60%);
 opacity: 0; transition: opacity .3s var(--ease);
 pointer-events: none;
}
.service-card:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow);
 border-color: rgba(123,0,255,.2);
}
.service-card:hover::before { opacity: 1; }
.service-card__icon {
 width: 52px; height: 52px; border-radius: 14px;
 background: linear-gradient(135deg, var(--purple) 0%, #4A00A8 100%);
 color: var(--green);
 display: grid; place-items: center;
 margin-bottom: 20px;
 transition: transform .3s var(--ease);
}
.service-card:hover .service-card__icon { transform: rotate(-4deg) scale(1.06); }
.service-card__icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 20px; margin-bottom: 8px; }
.service-card p { color: var(--text-mute); font-size: 15px; }

/* ═══════════════════════════════════════════════════════════
 WHY
 ═══════════════════════════════════════════════════════════ */
.why {
 background: var(--navy);
 color: var(--text-on-dark);
 padding: 120px 0 130px;
 position: relative;
}
.why__grid {
 display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center;
}
.why__copy h2 { color: var(--white); font-size: clamp(32px, 3.4vw, 50px); margin-bottom: 20px; }
.why__copy > p { color: var(--text-on-dark-mute); font-size: 17px; margin-bottom: 36px; max-width: 520px; }
.why__list { display: grid; gap: 18px; margin-bottom: 40px; }
.why__list li {
 display: grid; grid-template-columns: 28px 1fr; gap: 14px;
 padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08);
}
.why__list li:last-child { border-bottom: 1px solid rgba(255,255,255,.08); }
.why__list svg { width: 22px; height: 22px; color: var(--green); margin-top: 2px; }
.why__list strong { display: block; color: var(--white); font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.why__list span { color: var(--text-on-dark-mute); font-size: 14.5px; }

.why__visual {
 position: relative;
 height: 580px;
}
.why__card {
 position: absolute;
 border-radius: var(--radius-lg);
 overflow: hidden;
 box-shadow: var(--shadow-hi);
}
.why__card--1 {
 width: 85%; height: 72%;
 right: 0; top: 0;
 background: #1a1d36;
}
.why__card--1 img { width: 100%; height: 100%; object-fit: cover; }
.why__card-tag {
 position: absolute; left: 20px; bottom: 20px;
 background: rgba(11,14,31,.7);
 backdrop-filter: blur(12px);
 border: 1px solid rgba(255,255,255,.12);
 padding: 12px 16px; border-radius: 12px;
 color: var(--white);
 display: flex; flex-direction: column;
}
.why__card-tag span { font-size: 11.5px; color: var(--green); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.why__card-tag strong { font-weight: 600; font-size: 15px; }

.why__card--2 {
 width: 46%; padding: 28px;
 left: 0; bottom: 20px;
 background: linear-gradient(135deg, var(--purple) 0%, #4A00A8 100%);
 color: var(--white);
 border-radius: var(--radius-lg);
}
.why__stat span { display: block; font-size: 13px; color: rgba(255,255,255,.75); margin-bottom: 6px; }
.why__stat strong { font-size: clamp(36px, 3.5vw, 48px); font-weight: 700; color: var(--green); letter-spacing: -.02em; }

.why__card--3 {
 width: 120px; height: 120px;
 left: 35%; top: 18%;
 background: var(--green);
 display: grid; place-items: center;
 border-radius: 24px;
 box-shadow: 0 24px 60px -20px rgba(0,232,143,.6);
 animation: float-mark 8s ease-in-out infinite;
}
.why__card--3 svg { width: 70%; height: 70%; color: var(--navy); }

/* ═══════════════════════════════════════════════════════════
 PROCESS
 ═══════════════════════════════════════════════════════════ */
.process {
 background: var(--cream);
 padding: 120px 0;
 position: relative;
}
.process__list {
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
 margin-top: 20px;
}
.process__item {
 position: relative;
 padding: 32px 28px;
 background: var(--white);
 border-radius: var(--radius-lg);
 border: 1px solid rgba(11,14,31,.06);
 transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.process__item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.process__num {
 font-size: 42px; font-weight: 700;
 background: linear-gradient(135deg, var(--purple) 0%, var(--green) 100%);
 -webkit-background-clip: text; background-clip: text; color: transparent;
 letter-spacing: -.04em;
 margin-bottom: 14px;
 line-height: 1;
}
.process__body h3 { font-size: 19px; margin-bottom: 8px; }
.process__body p { color: var(--text-mute); font-size: 15px; }

/* ═══════════════════════════════════════════════════════════
 CALCULATOR
 ═══════════════════════════════════════════════════════════ */
.calc {
 background: linear-gradient(180deg, var(--navy) 0%, #141830 100%);
 color: var(--text-on-dark);
 padding: 120px 0;
 position: relative;
 overflow: hidden;
}
.calc::before {
 content: ""; position: absolute; inset: 0;
 background: radial-gradient(60% 60% at 80% 20%, rgba(123,0,255,.25), transparent 60%),
 radial-gradient(40% 40% at 10% 80%, rgba(0,232,143,.12), transparent 70%);
 pointer-events: none;
}
.calc__grid {
 display: grid; grid-template-columns: 1fr 1.15fr; gap: 70px; align-items: start;
 position: relative; z-index: 2;
}
.calc__copy h2 { color: var(--white); font-size: clamp(32px, 3.4vw, 50px); margin-bottom: 18px; }
.calc__copy > p { color: var(--text-on-dark-mute); font-size: 17px; margin-bottom: 28px; max-width: 460px; }
.calc__note { display: grid; gap: 10px; color: var(--text-on-dark-mute); font-size: 14.5px; }
.calc__note li { padding-left: 2px; }

.calc__form {
 background: rgba(255,255,255,.04);
 border: 1px solid rgba(255,255,255,.12);
 border-radius: var(--radius-lg);
 padding: 36px;
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 box-shadow: 0 40px 120px -30px rgba(0,0,0,.8);
}
.calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.calc__form label {
 display: block;
 font-size: 13px; font-weight: 500;
 color: var(--text-on-dark-mute);
 margin-bottom: 8px;
}
.calc__form select {
 width: 100%;
 padding: 14px 16px; margin-top: 6px;
 background: rgba(255,255,255,.05);
 border: 1px solid rgba(255,255,255,.15);
 border-radius: 12px;
 color: var(--white);
 font-family: inherit; font-size: 15px;
 appearance: none;
 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23A3A8C4' stroke-width='1.6' d='M1 1l5 5 5-5'/></svg>");
 background-repeat: no-repeat; background-position: right 16px center;
}
.calc__form select:focus { outline: 2px solid var(--green); outline-offset: 2px; }

.calc__slider { display: block; margin-bottom: 20px; }
.calc__slider-head {
 display: flex; align-items: center; gap: 16px; margin-top: 10px;
}
.calc__slider input[type="range"] {
 flex: 1; -webkit-appearance: none; appearance: none;
 height: 4px; background: rgba(255,255,255,.15); border-radius: 2px;
 outline: none;
}
.calc__slider input[type="range"]::-webkit-slider-thumb {
 -webkit-appearance: none; appearance: none;
 width: 22px; height: 22px; border-radius: 50%;
 background: var(--green); cursor: pointer;
 box-shadow: 0 0 0 4px rgba(0,232,143,.22), 0 4px 12px rgba(0,232,143,.4);
 transition: transform .2s var(--ease);
}
.calc__slider input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.calc__slider input[type="range"]::-moz-range-thumb {
 width: 22px; height: 22px; border: 0; border-radius: 50%;
 background: var(--green); cursor: pointer;
 box-shadow: 0 0 0 4px rgba(0,232,143,.22);
}
.calc__slider output {
 color: var(--white); font-weight: 600; font-size: 15px;
 font-variant-numeric: tabular-nums;
 min-width: 90px; text-align: right;
}

.calc__result {
 display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
 margin: 24px 0 20px;
 padding: 20px;
 background: rgba(0,232,143,.08);
 border: 1px solid rgba(0,232,143,.25);
 border-radius: 16px;
}
.calc__result-label { display: block; font-size: 12px; color: var(--text-on-dark-mute); margin-bottom: 4px; letter-spacing: .05em; text-transform: uppercase; font-weight: 500; }
.calc__result strong {
 display: block; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; color: var(--green);
 letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
 ABOUT
 ═══════════════════════════════════════════════════════════ */
.about {
 background: var(--cream);
 padding: 130px 0;
}
.about__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 80px; align-items: center; }
.about__visual {
 position: relative; height: 560px;
}
.about__photo {
 position: absolute;
 border-radius: var(--radius-lg); overflow: hidden;
 background: var(--navy);
 box-shadow: var(--shadow-hi);
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%) contrast(1.05); transition: filter .4s var(--ease); }
.about__photo:hover img { filter: grayscale(0) contrast(1); }
.about__photo figcaption {
 position: absolute; left: 16px; bottom: 16px; right: 16px;
 color: var(--white); font-size: 13px; font-weight: 500;
 background: rgba(11,14,31,.65); backdrop-filter: blur(10px);
 padding: 8px 12px; border-radius: 10px;
 border: 1px solid rgba(255,255,255,.1);
}
.about__photo--1 { width: 62%; height: 74%; top: 0; left: 0; z-index: 2; border: 6px solid var(--cream); }
.about__photo--2 { width: 56%; height: 62%; bottom: 0; right: 0; z-index: 1; }

.about__copy h2 { font-size: clamp(32px, 3.4vw, 50px); margin-bottom: 20px; }
.about__copy p { color: var(--text-mute); font-size: 16.5px; margin-bottom: 16px; }
.about__copy p strong { color: var(--navy); font-weight: 600; }
.about__signoffs {
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
 margin-top: 32px;
 padding-top: 28px;
 border-top: 1px solid rgba(11,14,31,.1);
}
.about__signoffs strong {
 display: block; font-size: 24px; font-weight: 700; color: var(--navy);
 background: linear-gradient(135deg, var(--purple), var(--navy));
 -webkit-background-clip: text; background-clip: text; color: transparent;
 letter-spacing: -.02em;
}
.about__signoffs span { display: block; font-size: 13px; color: var(--text-mute); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════
 TESTIMONIALS
 ═══════════════════════════════════════════════════════════ */
.testimonials {
 /* Diana v49: purple wash layered OVER a Diana photo so it doesn't feel flat */
 background:
  linear-gradient(135deg, rgba(123,0,255,.82) 0%, rgba(74,0,168,.9) 60%, rgba(11,14,31,.95) 120%),
  url('assets/media/diana-hero-58.jpg') center 30% / cover no-repeat;
 color: var(--white);
 padding: 120px 0;
 overflow: hidden;
 position: relative;
}
.testimonials .section-head h2 { color: var(--white); }
.testimonials .eyebrow--green { color: var(--green); }

.carousel {
 position: relative;
 max-width: 820px; margin: 0 auto;
}
.carousel__track {
 display: flex;
 transition: transform .55s var(--ease);
}
.testimonial {
 flex: 0 0 100%;
 padding: 0 8px;
 text-align: center;
}
.testimonial__stars { color: var(--green); font-size: 22px; letter-spacing: 4px; margin-bottom: 22px; }
.testimonial blockquote {
 margin: 0 auto 24px;
 font-size: clamp(19px, 2vw, 26px);
 font-weight: 400; line-height: 1.45;
 max-width: 760px;
 color: rgba(255,255,255,.95);
}
.testimonial footer { font-size: 14px; }
.testimonial footer strong { display: block; font-weight: 600; margin-bottom: 3px; font-size: 16px; color: var(--white); }
.testimonial footer span { color: rgba(255,255,255,.7); }

.carousel__arrow {
 position: absolute; top: 44%; transform: translateY(-50%);
 width: 50px; height: 50px; border-radius: 50%;
 background: rgba(255,255,255,.08);
 border: 1px solid rgba(255,255,255,.2);
 color: var(--white);
 font-size: 26px; line-height: 0;
 backdrop-filter: blur(12px);
 transition: background .2s var(--ease), transform .2s var(--ease);
 z-index: 3;
}
.carousel__arrow:hover { background: var(--green); color: var(--navy); transform: translateY(-50%) scale(1.05); }
.carousel__arrow--prev { left: -64px; }
.carousel__arrow--next { right: -64px; }

.carousel__dots {
 display: flex; justify-content: center; gap: 8px;
 margin-top: 36px;
}
.carousel__dots button {
 width: 10px; height: 10px; border-radius: 50%;
 background: rgba(255,255,255,.25);
 transition: background .3s var(--ease), width .3s var(--ease);
}
.carousel__dots button[aria-selected="true"] { background: var(--green); width: 28px; border-radius: 6px; }

/* ═══════════════════════════════════════════════════════════
 CTA
 ═══════════════════════════════════════════════════════════ */
.cta {
 background: var(--cream);
 padding: 100px 0;
}
.cta__inner {
 position: relative;
 padding: 84px 60px 76px;
 background: linear-gradient(135deg, var(--navy) 0%, #1B1F3A 60%, #3D1870 120%);
 color: var(--white);
 border-radius: 36px;
 overflow: hidden;
 text-align: center;
 box-shadow: var(--shadow-hi);
}
.cta__inner h2 { font-size: clamp(32px, 4vw, 56px); max-width: 780px; margin: 14px auto 18px; color: var(--white); }
.cta__inner > p { max-width: 560px; margin: 0 auto 30px; font-size: 17px; color: rgba(255,255,255,.8); }
.cta__mark {
 position: absolute; right: -60px; bottom: -100px;
 width: 440px; height: 440px;
 color: rgba(255,255,255,.04);
 pointer-events: none;
}
.cta__row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; position: relative; z-index: 2; }
.cta__small { font-size: 12.5px; color: rgba(255,255,255,.45); position: relative; z-index: 2; }

.cta .blob--green { width: 400px; height: 400px; left: -60px; top: -100px; opacity: .4; }
.cta .blob--pink { width: 460px; height: 460px; right: -80px; bottom: -160px; opacity: .25; }

/* ═══════════════════════════════════════════════════════════
 FOOTER
 ═══════════════════════════════════════════════════════════ */
.footer {
 background: var(--navy);
 color: var(--text-on-dark-mute);
 padding: 80px 0 40px;
}
.footer__grid {
 display: grid; grid-template-columns: 2fr 1fr 1.2fr 1fr; gap: 40px;
 padding-bottom: 48px;
 border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer__brand p { margin-top: 16px; max-width: 320px; font-size: 14.5px; color: rgba(255,255,255,.55); }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col h4 { color: var(--white); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 6px; }
.footer__col a, .footer__col span { color: rgba(255,255,255,.6); font-size: 14.5px; transition: color .2s var(--ease); }
.footer__col a:hover { color: var(--green); }
.footer__bottom {
 display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
 padding: 28px 24px 0;
 font-size: 12.5px; color: rgba(255,255,255,.4);
}
.footer__bottom a { color: var(--green); }
.footer__bottom a:hover { color: var(--white); }
.footer__disclaimer {
 margin-top: 20px;
 padding-inline: 24px;
 font-size: 11.5px;
 color: rgba(255,255,255,.3);
}

/* ═══════════════════════════════════════════════════════════
 STICKY CTA
 ═══════════════════════════════════════════════════════════ */
.sticky-cta {
 position: fixed;
 right: 22px; bottom: 22px;
 z-index: 95;
 display: inline-flex; align-items: center; gap: 10px;
 padding: 14px 22px;
 background: var(--green);
 color: var(--navy);
 font-weight: 600; font-size: 15px;
 border-radius: 999px;
 box-shadow: 0 20px 50px -15px rgba(0,232,143,.55);
 opacity: 0; transform: translateY(24px);
 transition: opacity .4s var(--ease), transform .4s var(--ease);
 pointer-events: none;
}
.sticky-cta svg { width: 18px; height: 18px; }
.sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sticky-cta:hover { background: #00FFA0; transform: translateY(-4px); }

/* ═══════════════════════════════════════════════════════════
 SCROLL-REVEAL
 ═══════════════════════════════════════════════════════════ */
.reveal {
 opacity: 0;
 transform: translateY(28px);
 transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in {
 opacity: 1;
 transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
 RESPONSIVE
 ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
 .services__grid { grid-template-columns: repeat(2, 1fr); }
 .process__list { grid-template-columns: repeat(2, 1fr); }
 .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
 .stats__item { padding-inline: 16px; }
 .stats__item:nth-child(odd) { border-left: 0; }
 .why__grid { grid-template-columns: 1fr; gap: 60px; }
 .why__visual { height: 500px; max-width: 560px; margin: 0 auto; width: 100%; }
 .calc__grid { grid-template-columns: 1fr; gap: 50px; }
 .about__grid { grid-template-columns: 1fr; gap: 50px; }
 .about__visual { max-width: 560px; margin: 0 auto; }
 .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
 .carousel__arrow--prev { left: 0; }
 .carousel__arrow--next { right: 0; }
}

@media (max-width: 760px) {
 :root { --nav-h: 64px; }
 .nav__links, .nav .btn--ghost { display: none; }
 .nav .nav__actions .btn--green { display: none; }
 .nav__toggle { display: flex; }
 .nav__mobile:not([hidden]) { display: flex; }

 .hero { padding: calc(var(--nav-h) + 32px) 0 80px; min-height: clamp(640px, 92svh, 840px); }
 .hero__title { font-size: clamp(38px, 10vw, 60px); }
 .hero__ctas .btn { flex: 1; justify-content: center; }
 .hero__proof { gap: 10px; }
 .hero__proof-sep { display: none; }
 .hero__float { width: 360px; height: 360px; right: -120px; top: 70%; }

 .stats { padding: 70px 0 40px; }
 .stats__grid { grid-template-columns: 1fr 1fr; gap: 32px 0; }
 .stats__num { font-size: 44px; }

 .services, .why, .process, .calc, .about, .testimonials, .cta, .footer { padding-block: 72px; }
 .services__grid { grid-template-columns: 1fr; }
 .process__list { grid-template-columns: 1fr; }

 .why__visual { height: 440px; }
 .why__card--3 { width: 90px; height: 90px; }

 .about__visual { height: 460px; }
 .calc__form { padding: 24px; }
 .calc__result { grid-template-columns: 1fr; }

 .cta__inner { padding: 56px 24px; border-radius: 24px; }
 .cta__row { flex-direction: column; gap: 10px; }
 .cta__row .btn { width: 100%; justify-content: center; }

 .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
 .footer__brand { grid-column: 1 / -1; }
 .footer__bottom { flex-direction: column; align-items: flex-start; }

 .sticky-cta { right: 14px; bottom: 14px; padding: 12px 18px; font-size: 14px; }
 .sticky-cta span { display: none; }
 .sticky-cta { padding: 14px; width: 56px; height: 56px; justify-content: center; }
 .sticky-cta svg { width: 22px; height: 22px; }
}

/* ───── Reduced motion ───── */
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 scroll-behavior: auto !important;
 }
 .reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════
 INNER PAGES | shared styles
 ═══════════════════════════════════════════════════════════ */

/* Compact inner-page hero: purple with mesh but shorter */
.page-hero {
 position: relative;
 min-height: 460px;
 padding: calc(var(--nav-h) + 80px) 0 90px;
 background: radial-gradient(120% 80% at 80% -10%, #9A2CFF 0%, #7B00FF 45%, #4A00A8 100%);
 color: var(--white);
 overflow: hidden;
 display: flex; align-items: center;
}
.page-hero .hero__mesh .blob { opacity: .45; }
.page-hero__inner { position: relative; z-index: 2; }
.page-hero .breadcrumb {
 display: flex; align-items: center; gap: 8px;
 font-size: 13px; color: rgba(255,255,255,.7);
 margin-bottom: 18px;
}
.page-hero .breadcrumb a { color: rgba(255,255,255,.7); transition: color .2s var(--ease); }
.page-hero .breadcrumb a:hover { color: var(--green); }
.page-hero .breadcrumb .sep { opacity: .4; }
.page-hero h1 {
 font-size: clamp(34px, 4.2vw, 60px);
 font-weight: 700; letter-spacing: -.03em;
 line-height: 1.06; margin: 0 0 18px;
 text-wrap: balance;
 max-width: 780px;
}
.page-hero h1 .hl {
 background: linear-gradient(100deg, var(--green) 0%, #A7FFD3 50%, var(--green) 100%);
 background-size: 200% 100%;
 -webkit-background-clip: text; background-clip: text; color: transparent;
 animation: shimmer 6s linear infinite;
}
.page-hero__lede {
 font-size: clamp(17px, 1.3vw, 20px);
 color: rgba(255,255,255,.85);
 max-width: 640px;
}
.page-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

.page-hero__float {
 position: absolute;
 right: -120px; top: 30%;
 width: 460px; height: 460px;
 color: rgba(255,255,255,.05);
 transform: rotate(-6deg);
 pointer-events: none;
 animation: float-mark 14s ease-in-out infinite;
}

/* Diana v60: no-photo variant — plain navy background instead of the
  Diana photo wash. Used on the About leadership section (and anywhere
  else the photo wash isn't wanted). */
.section.leadership,
.section--no-photo {
 background: linear-gradient(160deg, #0B0E1F 0%, #10142e 100%) !important;
 background-attachment: scroll !important;
}

/* v63: per-section photo variants so consecutive .section blocks on the same
  page don't repeat the base wash. Sam flagged home + services pages
  were reusing the same Diana photo. */
.section--photo-a { background:
 linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.7)) fixed,
 url('assets/media/diana-hero-51.jpg') center 25% / cover no-repeat fixed !important;
}
.section--photo-b { background:
 linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.7)) fixed,
 url('assets/media/diana-hero-53.jpg') center 25% / cover no-repeat fixed !important;
}
.section--photo-c { background:
 linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.7)) fixed,
 url('assets/media/diana-hero-56.jpg') center 25% / cover no-repeat fixed !important;
}
.section--photo-d { background:
 linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.7)) fixed,
 url('assets/media/diana-hero-60.jpg') center 25% / cover no-repeat fixed !important;
}
.section--photo-e { background:
 linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.7)) fixed,
 url('assets/media/diana-hero-62.jpg') center 25% / cover no-repeat fixed !important;
}
.section--photo-f { background:
 linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.7)) fixed,
 url('assets/media/diana-hero-63.jpg') center 25% / cover no-repeat fixed !important;
}
.section--photo-g { background:
 linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.7)) fixed,
 url('assets/media/diana-hero-64.jpg') center 25% / cover no-repeat fixed !important;
}
@media (max-width: 900px) {
 .section--photo-e, .section--photo-f, .section--photo-g {
 background-attachment: scroll !important;
 }
}
/* v65: Ed Hub Subscribe section photo variant — parallax fixed + head higher */
.edu-subscribe.edu-subscribe--photo {
 background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.7)) fixed,
   url('assets/media/diana-hero-51.jpg') center 12% / cover no-repeat fixed !important;
 color: var(--white);
}

/* v66: Contact page — hero + contact-grid share one photo bg */
.contact-hero-combined {
 position: relative;
 padding: 0 0 100px;
 background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.7)) fixed,
   url('assets/media/diana-hero-61.jpg') center 20% / cover no-repeat fixed;
 color: var(--white);
}
.contact-hero-combined > .container { position: relative; z-index: 1; }
.contact-hero-combined .page-hero__inner .breadcrumb,
.contact-hero-combined .page-hero__inner .breadcrumb a,
.contact-hero-combined .page-hero__inner h1,
.contact-hero-combined .page-hero__inner .page-hero__lede { color: var(--white); }
.contact-hero-combined .contact-grid h2 { color: var(--white); }
.contact-hero-combined .contact-grid > .reveal p[style*="text-mute"] { color: rgba(255,255,255,.85) !important; }
@media (max-width: 900px) {
 .contact-hero-combined { background-attachment: scroll !important; }
}
@media (max-width: 900px) {
 .section--photo-a, .section--photo-b, .section--photo-c, .section--photo-d {
 background-attachment: scroll !important;
 }
}

/* Generic section spacing for inner pages */
.section {
 /* Diana v52: 50% black overlay on Diana photo, light text on top */
 position: relative;
 padding: 110px 0;
 color: var(--white);
 background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.7)) fixed,
   url('assets/media/diana-hero-58.jpg') center 25% / cover no-repeat fixed;
 color: var(--white);
}
.section > .container { position: relative; z-index: 1; }
/* Section-level headings/copy on the dark overlay stay light; cards inside
  keep their own text colors thanks to their opaque backgrounds. */
.section > .container > .section-head h2,
.section > .container > .section-head h3,
.section > .container > .section-head p,
.section > .container > .section-head span,
.section > .container > .section-head .eyebrow { color: var(--white); }
.section--navy { background: var(--navy); color: var(--text-on-dark); }
.section--navy h2 { color: var(--white); }
.section--navy .section-head p { color: var(--text-on-dark-mute); }

/* ───── Feature row: alternating image/text ───── */
.feature-row {
 display: grid;
 grid-template-columns: 1.1fr 1fr;
 gap: 72px;
 align-items: center;
 margin-bottom: 90px;
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row--flip { grid-template-columns: 1fr 1.1fr; }
.feature-row--flip .feature-row__visual { order: 2; }

.feature-row h3 {
 font-size: clamp(26px, 2.6vw, 40px);
 margin-bottom: 16px;
 letter-spacing: -.02em;
}
.feature-row > div:not(.feature-row__visual) > p {
 color: var(--text-mute);
 font-size: 16.5px;
 margin-bottom: 18px;
}
.section--navy .feature-row > div:not(.feature-row__visual) > p { color: var(--text-on-dark-mute); }

.feature-row__visual {
 position: relative;
 aspect-ratio: 4 / 3;
 border-radius: var(--radius-lg);
 overflow: hidden;
 background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 100%);
 box-shadow: var(--shadow-hi);
}
.feature-row__visual img { width: 100%; height: 100%; object-fit: cover; }
.feature-row__visual .tag {
 position: absolute; top: 16px; left: 16px;
 background: rgba(11,14,31,.75);
 backdrop-filter: blur(10px);
 color: var(--green);
 font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
 padding: 6px 12px; border-radius: 999px;
 border: 1px solid rgba(255,255,255,.12);
}

.feature-row__bullets {
 display: grid; gap: 10px;
 margin-top: 22px;
 padding-top: 20px;
 border-top: 1px solid rgba(11,14,31,.1);
}
.section--navy .feature-row__bullets { border-top-color: rgba(255,255,255,.1); }
.feature-row__bullets li {
 display: grid; grid-template-columns: 22px 1fr; gap: 10px;
 font-size: 15px;
}
.feature-row__bullets svg { width: 20px; height: 20px; color: var(--green); margin-top: 2px; }

/* ───── FAQ accordion ───── */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq__item {
 background: var(--white);
 border: 1px solid rgba(11,14,31,.08);
 border-radius: 16px;
 overflow: hidden;
 transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.section--navy .faq__item {
 background: rgba(255,255,255,.04);
 border-color: rgba(255,255,255,.1);
}
.faq__item[open] {
 border-color: rgba(123,0,255,.3);
 box-shadow: var(--shadow);
}
.section--navy .faq__item[open] {
 border-color: rgba(0,232,143,.35);
 box-shadow: 0 20px 50px -20px rgba(0,232,143,.15);
}
.faq__item summary {
 cursor: pointer;
 padding: 20px 24px;
 font-weight: 600; font-size: 16.5px;
 display: flex; align-items: center; justify-content: space-between; gap: 16px;
 list-style: none;
 color: var(--text);
}
.section--navy .faq__item summary { color: var(--white); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
 content: "+";
 font-size: 24px; font-weight: 300; line-height: 1;
 color: var(--purple);
 transition: transform .3s var(--ease);
 flex-shrink: 0;
}
.section--navy .faq__item summary::after { color: var(--green); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p {
 padding: 0 24px 22px;
 font-size: 15px;
 color: var(--text-mute);
 line-height: 1.6;
}
.section--navy .faq__item p { color: var(--text-on-dark-mute); }

/* ───── Comparison table ───── */
.compare {
 overflow: hidden;
 border-radius: var(--radius-lg);
 background: var(--white);
 box-shadow: var(--shadow);
 border: 1px solid rgba(11,14,31,.06);
}
.compare__row {
 display: grid;
 grid-template-columns: 1.5fr 1fr 1fr 1fr;
 padding: 18px 24px;
 border-bottom: 1px solid rgba(11,14,31,.06);
 font-size: 15px;
 align-items: center;
}
.compare__row:last-child { border-bottom: 0; }
.compare__row--head {
 background: linear-gradient(135deg, var(--navy) 0%, #171B38 100%);
 color: var(--white);
 font-weight: 600;
 padding-block: 22px;
}
.compare__row--head > div:nth-child(2) {
 color: var(--green);
 font-weight: 700;
}
.compare__row > div:first-child { font-weight: 500; color: var(--text); }
.compare__row > div { display: flex; align-items: center; gap: 6px; }
.compare__row > div:not(:first-child) { justify-content: center; color: var(--text-mute); font-size: 14px; }
.compare__row--head > div:not(:first-child) { color: rgba(255,255,255,.85); font-size: 13.5px; }
.compare__check { color: var(--green); font-weight: 700; font-size: 18px; }
.compare__cross { color: #D74A4A; font-weight: 700; font-size: 18px; }
.compare__partial { color: #E0A43A; font-weight: 700; font-size: 15px; }

/* ───── Values/pillars cards ───── */
.pillars {
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
 margin-top: 20px;
}
.pillar {
 padding: 32px 28px;
 background: var(--white);
 border-radius: var(--radius-lg);
 border: 1px solid rgba(11,14,31,.06);
 transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.section--navy .pillar {
 background: rgba(255,255,255,.04);
 border-color: rgba(255,255,255,.1);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pillar__icon {
 width: 52px; height: 52px; border-radius: 14px;
 background: linear-gradient(135deg, var(--purple) 0%, #4A00A8 100%);
 color: var(--green);
 display: grid; place-items: center;
 margin-bottom: 18px;
}
.pillar__icon svg { width: 26px; height: 26px; }
.pillar h3 { font-size: 20px; margin-bottom: 8px; }
.section--navy .pillar h3 { color: var(--white); }
.pillar p { color: var(--text-mute); font-size: 15px; }
.section--navy .pillar p { color: var(--text-on-dark-mute); }

/* ───── Founder cards (About page) ───── */
.founders {
 display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
 margin-top: 20px;
}
.founder {
 background: var(--white);
 border-radius: var(--radius-lg);
 overflow: hidden;
 border: 1px solid rgba(11,14,31,.06);
 box-shadow: var(--shadow);
 transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.founder:hover { transform: translateY(-4px); box-shadow: var(--shadow-hi); }
.founder__photo {
 aspect-ratio: 4 / 5;
 background: var(--cream-2);
 overflow: hidden;
 position: relative;
}
.founder__photo img {
 width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
 filter: grayscale(8%) contrast(1.03);
 transition: filter .4s var(--ease), transform .5s var(--ease);
}
.founder:hover .founder__photo img { filter: grayscale(0); transform: scale(1.03); }
.founder__body { padding: 28px 28px 32px; }
.founder__role {
 display: inline-block;
 font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
 color: var(--purple);
 margin-bottom: 8px;
}
.founder__name {
 font-size: 28px; font-weight: 700;
 letter-spacing: -.02em;
 margin-bottom: 14px;
}
.founder__bio {
 color: var(--text-mute); font-size: 15.5px; line-height: 1.6;
 margin-bottom: 16px;
}
.founder__meta {
 display: flex; gap: 20px; flex-wrap: wrap;
 padding-top: 18px;
 border-top: 1px solid rgba(11,14,31,.08);
 font-size: 13px; color: var(--text-mute);
}
.founder__meta strong { color: var(--navy); display: block; font-weight: 600; }

/* ───── Process timeline (dedicated page) ───── */
.timeline { position: relative; max-width: 820px; margin: 0 auto; }
.timeline::before {
 content: "";
 position: absolute; left: 27px; top: 0; bottom: 0;
 width: 2px;
 background: linear-gradient(180deg, var(--purple) 0%, var(--green) 100%);
 border-radius: 2px;
}
.timeline__item {
 position: relative;
 padding-left: 80px;
 padding-bottom: 48px;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
 position: absolute; left: 0; top: 0;
 width: 56px; height: 56px;
 background: var(--white);
 border: 2px solid var(--purple);
 border-radius: 50%;
 display: grid; place-items: center;
 font-weight: 700; color: var(--purple);
 font-size: 18px;
 box-shadow: 0 0 0 6px var(--cream), 0 10px 24px -8px rgba(123,0,255,.3);
}
.section--navy .timeline__dot { background: var(--navy); box-shadow: 0 0 0 6px var(--navy), 0 10px 24px -8px rgba(0,232,143,.4); border-color: var(--green); color: var(--green); }
.timeline__body {
 padding: 22px 26px;
 background: var(--white);
 border-radius: var(--radius);
 border: 1px solid rgba(11,14,31,.06);
 transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.section--navy .timeline__body { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.timeline__body:hover { transform: translateX(4px); box-shadow: var(--shadow); }
.timeline__body h3 { font-size: 20px; margin-bottom: 6px; }
.section--navy .timeline__body h3 { color: var(--white); }
.timeline__body p { color: var(--text-mute); font-size: 15px; line-height: 1.6; }
.section--navy .timeline__body p { color: var(--text-on-dark-mute); }
.timeline__body .timeline__meta {
 display: inline-block;
 margin-top: 10px;
 font-size: 12px; font-weight: 500; color: var(--purple);
 letter-spacing: .08em; text-transform: uppercase;
}
.section--navy .timeline__body .timeline__meta { color: var(--green); }

/* ───── Contact form + contact details ───── */
.contact-grid {
 display: grid; grid-template-columns: 1fr 1fr; gap: 50px;
 align-items: start;
}
.contact-form {
 background: var(--white);
 border-radius: var(--radius-lg);
 padding: 36px;
 border: 1px solid rgba(11,14,31,.08);
 box-shadow: var(--shadow);
}
.contact-form h3 { font-size: 22px; margin-bottom: 6px; }
.contact-form > p { color: var(--text-mute); font-size: 14.5px; margin-bottom: 24px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form label {
 display: block;
 font-size: 13px; font-weight: 500; color: var(--text-mute);
 margin-bottom: 16px;
}
.contact-form input, .contact-form select, .contact-form textarea {
 width: 100%;
 margin-top: 6px;
 padding: 12px 14px;
 background: var(--cream);
 border: 1px solid rgba(11,14,31,.1);
 border-radius: 10px;
 color: var(--text);
 font: inherit; font-size: 15px;
 transition: border-color .2s var(--ease), background .2s var(--ease);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
 outline: 0; border-color: var(--purple); background: var(--white);
}
.contact-form__check {
 display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
 font-size: 13.5px; color: var(--text-mute);
 margin-top: 0; margin-bottom: 20px;
}
.contact-form__check input { width: auto; margin-top: 2px; }

.contact-details { display: grid; gap: 20px; }
.contact-detail {
 display: grid; grid-template-columns: 56px 1fr; gap: 16px;
 align-items: center;
 padding: 22px;
 background: var(--white);
 border: 1px solid rgba(11,14,31,.06);
 border-radius: var(--radius);
 transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.contact-detail:hover { border-color: rgba(123,0,255,.25); transform: translateY(-2px); }
.contact-detail__icon {
 width: 56px; height: 56px; border-radius: 14px;
 background: linear-gradient(135deg, var(--purple), var(--navy));
 color: var(--green);
 display: grid; place-items: center;
}
.contact-detail__icon svg { width: 24px; height: 24px; }
.contact-detail strong { display: block; font-weight: 600; color: var(--navy); margin-bottom: 2px; font-size: 15px; }
.contact-detail a, .contact-detail span { font-size: 14.5px; color: var(--text-mute); }
.contact-detail a:hover { color: var(--purple); }

.contact-map {
 position: relative;
 margin-top: 64px;
 aspect-ratio: 16 / 7;
 background: var(--navy);
 border-radius: var(--radius-lg);
 overflow: hidden;
 border: 1px solid rgba(11,14,31,.12);
 box-shadow: var(--shadow);
}
.contact-map__svg {
 position: absolute; inset: 0;
 width: 100%; height: 100%;
 display: block;
}
.contact-map__pin {
 position: absolute; left: 50%; top: 58%;
 transform: translate(-50%, -50%);
 background: rgba(11,14,31,.88);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 color: var(--white);
 padding: 14px 20px; border-radius: 16px;
 display: inline-flex; align-items: center; gap: 12px;
 border: 1px solid rgba(0,232,143,.35);
 box-shadow: 0 20px 50px -15px rgba(0,0,0,.6), 0 0 0 4px rgba(0,232,143,.08);
}
.contact-map__pin-dot {
 width: 10px; height: 10px; border-radius: 50%;
 background: var(--green);
 box-shadow: 0 0 0 4px rgba(0,232,143,.25);
 flex-shrink: 0;
}
.contact-map__pin strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--white); letter-spacing: -.005em; }
.contact-map__pin small { display: block; font-size: 12px; color: rgba(255,255,255,.65); margin-top: 2px; }

.contact-map__chip {
 position: absolute; top: 18px; left: 18px;
 display: inline-flex; align-items: center; gap: 6px;
 padding: 6px 12px;
 background: rgba(11,14,31,.75);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 color: var(--green);
 font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
 border: 1px solid rgba(255,255,255,.1);
 border-radius: 999px;
}
.contact-map__chip svg { width: 14px; height: 14px; }

@media (max-width: 760px) {
 .contact-map { margin-top: 40px; aspect-ratio: 4 / 3; }
 .contact-map__pin { padding: 10px 14px; font-size: 13px; }
 .contact-map__pin strong { font-size: 13.5px; }
}

/* ───── Responsive overrides for inner pages ───── */
@media (max-width: 1024px) {
 .feature-row { grid-template-columns: 1fr; gap: 40px; margin-bottom: 60px; }
 .feature-row--flip .feature-row__visual { order: 0; }
 .founders { grid-template-columns: 1fr; }
 .pillars { grid-template-columns: 1fr 1fr; }
 .contact-grid { grid-template-columns: 1fr; gap: 36px; }
 .compare__row { grid-template-columns: 1.3fr 1fr 1fr 1fr; font-size: 13.5px; padding: 14px 16px; }
}
@media (max-width: 760px) {
 .page-hero { min-height: 380px; padding: calc(var(--nav-h) + 50px) 0 60px; }
 .page-hero__float { width: 300px; height: 300px; right: -120px; }
 .section { padding: 72px 0; }
 .pillars { grid-template-columns: 1fr; }
 .timeline::before { left: 18px; }
 .timeline__item { padding-left: 56px; }
 .timeline__dot { width: 38px; height: 38px; font-size: 14px; }
 .compare__row { grid-template-columns: 1fr; gap: 6px; text-align: left; padding: 14px 16px; }
 .compare__row > div { justify-content: flex-start !important; }
 .compare__row > div:not(:first-child)::before {
 content: attr(data-label) ": "; font-weight: 600; color: var(--text-mute); margin-right: 6px;
 }
 .compare__row--head { display: none; }
 .contact-form__row { grid-template-columns: 1fr; }
 .contact-form { padding: 24px; }
}

/* Tighten gap when a .section sits directly above a .cta */
/* Keep .cta padding symmetric, no top-collapse when following another section */

/* ═══════════════════════════════════════════════════════════
 VIDEO TESTIMONIALS (homepage)
 ═══════════════════════════════════════════════════════════ */
.video-stories {
 /* Diana v47: no more flat cream — Diana photo bg with a heavy cream wash
  so the video cards still pop but the space feels alive. */
 position: relative;
 color: var(--white);
 background:
  radial-gradient(700px 400px at 20% 25%, rgba(123,0,255,.55), transparent 62%),
  radial-gradient(700px 400px at 82% 78%, rgba(0,232,143,.35), transparent 62%),
  linear-gradient(160deg, #0B0E1F 0%, #12183a 55%, #0B0E1F 100%);
 padding: 110px 0 90px;
}
.video-stories > .container { position: relative; z-index: 1; }
.video-grid,
.video-stories__grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 240px));
 gap: 20px;
 max-width: 780px;
 margin: 0 auto;
 justify-content: center;
}
.video-card {
 position: relative;
 border-radius: var(--radius-lg);
 overflow: hidden;
 background: var(--navy);
 box-shadow: var(--shadow);
 transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hi); }
.video-card__frame {
 position: relative;
 aspect-ratio: 9 / 16;
 background: #000;
 max-height: 420px;
}
.video-card__frame iframe {
 position: absolute; inset: 0;
 width: 100%; height: 100%;
 border: 0;
}

@media (max-width: 900px) {
 .video-grid,
 .video-stories__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 100%; gap: 10px; }
 .video-stories { padding: 70px 0 50px; }
}
@media (max-width: 560px) {
 .video-grid,
 .video-stories__grid { grid-template-columns: 1fr; max-width: 300px; }
}

/* Google reviews badge: make it look clickable */
.hero__proof-link {
 display: inline-flex; align-items: center; gap: 4px;
 color: inherit; text-decoration: none;
 border-bottom: 1px dashed rgba(255,255,255,0);
 transition: border-color .2s var(--ease);
}
.hero__proof-link:hover { border-bottom-color: rgba(255,255,255,.45); }

/* ═══════════════════════════════════════════════════════════
 HERO, SPLIT LAYOUT WITH TEAM PHOTOS (updated home)
 ═══════════════════════════════════════════════════════════ */
.hero__inner--split {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
 gap: 60px;
 align-items: center;
 /* inherits .container width + padding, same edges as the nav above */
}
.hero__col { position: relative; z-index: 2; }

/* Team photo cluster in hero */
.hero__team {
 position: relative;
 min-height: 500px;
 margin: 0;
 z-index: 2;
}
.hero__team-photo {
 position: absolute;
 margin: 0;
 border-radius: 24px;
 overflow: hidden;
 background: var(--cream-2);
 box-shadow: 0 30px 60px -20px rgba(11,14,31,.55), 0 0 0 6px rgba(255,255,255,.06);
 transition: transform .35s var(--ease);
}
.hero__team-photo img {
 width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
 display: block;
 transition: transform .5s var(--ease);
}
.hero__team-photo:hover { transform: translateY(-4px); }
.hero__team-photo:hover img { transform: scale(1.03); }

.hero__team-photo figcaption {
 position: absolute; left: 14px; bottom: 14px; right: 14px;
 padding: 10px 14px;
 background: rgba(11,14,31,.78);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border: 1px solid rgba(255,255,255,.12);
 border-radius: 12px;
 color: var(--white);
 font-size: 13.5px;
 line-height: 1.2;
}
.hero__team-photo figcaption strong { display: block; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.hero__team-photo figcaption span { display: block; color: rgba(255,255,255,.65); font-size: 12px; margin-top: 2px; }

/* Diana and Jaff, balanced portrait ratio; Jaff shifted right so more of him is visible */
.hero__team-photo--diana {
 width: 55%; height: 78%;
 left: 0; top: 0;
 z-index: 3;
 border: 5px solid var(--cream);
}
.hero__team-photo--jaff {
 width: 55%; height: 78%;
 right: -4%; bottom: 0;
 z-index: 2;
}

/* Responsive: stack on tablet+ mobile */
@media (max-width: 1024px) {
 .hero__inner--split {
 grid-template-columns: 1fr;
 gap: 40px;
 }
 .hero__team { min-height: 460px; max-width: 480px; margin-inline: auto; width: 100%; }
}
@media (max-width: 760px) {
 .hero__team { min-height: 380px; }
 .hero__team-photo figcaption { padding: 8px 12px; font-size: 12.5px; }
 .hero__team-photo figcaption strong { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════
 CONTACT, BOOK A CALL BLOCK (replaces form/Calendly until real URL is provided)
 ═══════════════════════════════════════════════════════════ */
/* Live Calendly wrapper (matches contact-book look for brand consistency) */
.contact-calendly {
 background: var(--navy);
 border-radius: var(--radius-lg);
 padding: 32px 24px 20px;
 border: 1px solid rgba(255,255,255,.08);
 box-shadow: var(--shadow);
 overflow: hidden;
 position: relative;
}
.contact-calendly::before {
 content: '';
 position: absolute; inset: 0;
 background:
 radial-gradient(600px 260px at 90% 0%, rgba(123,0,255,.18), transparent 60%),
 radial-gradient(500px 240px at 0% 100%, rgba(0,232,143,.12), transparent 60%);
 pointer-events: none;
 opacity: .5;
}
.contact-calendly > * { position: relative; z-index: 1; }
.contact-calendly__header {
 padding: 0 8px 20px;
 border-bottom: 1px solid rgba(255,255,255,.08);
 margin-bottom: 18px;
}
.contact-calendly__header h3 { color: var(--white); font-size: 24px; margin-bottom: 6px; letter-spacing: -.01em; }
.contact-calendly__header p { color: var(--text-on-dark-mute); font-size: 14.5px; }
.calendly-inline-widget {
 background: var(--navy) !important;
 border-radius: 12px;
 overflow: hidden;
 min-height: 720px;
}
.contact-calendly__fallback {
 font-size: 13px;
 color: var(--text-on-dark-mute);
 text-align: center;
 margin-top: 12px;
 padding-top: 12px;
 border-top: 1px solid rgba(255,255,255,.06);
}
.contact-calendly__fallback a { color: var(--green); text-decoration: underline; }

.contact-book {
 background: var(--navy);
 border-radius: var(--radius-lg);
 padding: 32px 28px 26px;
 border: 1px solid rgba(255,255,255,.08);
 box-shadow: var(--shadow);
 overflow: hidden;
 position: relative;
}
.contact-book::before {
 content: '';
 position: absolute; inset: 0;
 background:
 radial-gradient(600px 260px at 90% 0%, rgba(123,0,255,.18), transparent 60%),
 radial-gradient(500px 240px at 0% 100%, rgba(0,232,143,.12), transparent 60%);
 pointer-events: none;
 opacity: .6;
}
.contact-book > * { position: relative; z-index: 1; }
.contact-book__header {
 padding: 0 4px 20px;
 border-bottom: 1px solid rgba(255,255,255,.08);
 margin-bottom: 22px;
}
.contact-book__header h3 { color: var(--white); font-size: 24px; margin-bottom: 6px; letter-spacing: -.01em; }
.contact-book__header p { color: var(--text-on-dark-mute); font-size: 14.5px; }

.contact-book__actions {
 display: grid;
 gap: 12px;
}
.contact-book__action {
 display: flex;
 align-items: center;
 gap: 16px;
 padding: 16px 18px;
 border-radius: 14px;
 background: rgba(255,255,255,.04);
 border: 1px solid rgba(255,255,255,.08);
 color: var(--white);
 text-decoration: none;
 transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.contact-book__action:hover {
 transform: translateY(-2px);
 background: rgba(255,255,255,.07);
 border-color: rgba(0,232,143,.35);
}
.contact-book__action-icon {
 flex: 0 0 44px;
 width: 44px; height: 44px;
 border-radius: 12px;
 background: linear-gradient(135deg, rgba(0,232,143,.18), rgba(123,0,255,.18));
 display: grid; place-items: center;
 color: var(--green);
 border: 1px solid rgba(0,232,143,.25);
}
.contact-book__action-icon svg { width: 20px; height: 20px; }
.contact-book__action-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-book__action-text strong { color: var(--white); font-weight: 600; font-size: 15px; }
.contact-book__action-text span { color: var(--text-on-dark-mute); font-size: 13.5px; word-break: break-word; }

.contact-book__action--primary {
 background: linear-gradient(135deg, rgba(0,232,143,.14), rgba(0,232,143,.06));
 border-color: rgba(0,232,143,.4);
}
.contact-book__action--primary .contact-book__action-icon {
 background: var(--green);
 color: var(--navy);
 border-color: transparent;
}

.contact-book__note {
 margin-top: 18px;
 padding: 14px 16px;
 background: rgba(11,14,31,.4);
 border: 1px dashed rgba(255,255,255,.12);
 border-radius: 12px;
 display: flex; gap: 12px;
 align-items: flex-start;
}
.contact-book__note svg {
 flex: 0 0 18px; width: 18px; height: 18px; color: var(--green);
 margin-top: 2px;
}
.contact-book__note p {
 color: var(--text-on-dark-mute);
 font-size: 13px;
 line-height: 1.55;
}

/* If Calendly gets uncommented later, keep it dark-themed */
.calendly-inline-widget {
 background: transparent;
 border-radius: 12px;
 overflow: hidden;
}

/* Branded skeleton loader that sits behind the Calendly iframe while it boots */
.calendly-wrap {
 position: relative;
 min-height: 760px;
 border-radius: 14px;
 overflow: hidden;
 background: linear-gradient(180deg, rgba(11,14,31,.9), rgba(11,14,31,.7));
}
.calendly-wrap .calendly-inline-widget {
 position: relative;
 z-index: 2;
 transition: opacity .35s ease;
 opacity: 0;
}
.calendly-wrap.is-loaded .calendly-inline-widget { opacity: 1; }
.calendly-wrap.is-loaded .calendly-skeleton { opacity: 0; pointer-events: none; }

.calendly-skeleton {
 position: absolute; inset: 0;
 z-index: 1;
 display: grid;
 place-items: center;
 grid-auto-rows: min-content;
 gap: 14px;
 padding: 40px 20px;
 text-align: center;
 background:
 radial-gradient(500px 240px at 50% 40%, rgba(0,232,143,.10), transparent 65%),
 radial-gradient(500px 240px at 50% 90%, rgba(123,0,255,.14), transparent 65%),
 #0B0E1F;
 transition: opacity .4s ease;
}
.calendly-skeleton__spinner {
 width: 48px; height: 48px;
 border-radius: 50%;
 border: 3px solid rgba(255,255,255,.12);
 border-top-color: var(--green);
 animation: calSpin .9s linear infinite;
}
@keyframes calSpin { to { transform: rotate(360deg); } }
.calendly-skeleton__label {
 color: var(--white);
 font-weight: 500;
 font-size: 15px;
 letter-spacing: -.01em;
}
.calendly-skeleton__sub {
 color: rgba(255,255,255,.5);
 font-size: 12.5px;
 letter-spacing: .04em;
 text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
 .calendly-skeleton__spinner { animation: none; border-top-color: rgba(255,255,255,.4); }
}

/* ═══════════════════════════════════════════════════════════
 WHY US, APPROACH + SOCIAL BLOCK
 ═══════════════════════════════════════════════════════════ */
.approach-grid {
 display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px;
 align-items: start;
 margin-top: 20px;
}
.approach-copy { display: grid; gap: 26px; }
.approach-point {
 display: grid; grid-template-columns: 52px 1fr; gap: 18px;
 padding-bottom: 26px;
 border-bottom: 1px solid rgba(11,14,31,.08);
}
.approach-point:last-child { border-bottom: 0; padding-bottom: 0; }
.approach-point__icon {
 width: 52px; height: 52px; border-radius: 14px;
 background: linear-gradient(135deg, var(--purple) 0%, #4A00A8 100%);
 color: var(--green);
 display: grid; place-items: center;
}
.approach-point__icon svg { width: 26px; height: 26px; }
.approach-point h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.01em; }
.approach-point p { color: var(--text-mute); font-size: 15.5px; line-height: 1.55; }

.approach-social {
 background: var(--navy);
 border-radius: var(--radius-lg);
 padding: 24px;
 color: var(--text-on-dark);
 box-shadow: var(--shadow);
 position: sticky; top: 100px;
}
.approach-social__photo {
 position: relative;
 aspect-ratio: 4 / 5;
 background: var(--cream-2);
 border-radius: var(--radius);
 overflow: hidden;
 margin-bottom: 20px;
}
.approach-social__photo img {
 width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
}
.approach-social__tag {
 position: absolute; left: 12px; bottom: 12px;
 padding: 8px 14px;
 background: rgba(11,14,31,.85);
 backdrop-filter: blur(10px);
 color: var(--white);
 border-radius: 999px;
 font-size: 12.5px; font-weight: 500;
 border: 1px solid rgba(255,255,255,.1);
}
.approach-social__label {
 color: var(--text-on-dark-mute);
 font-size: 12.5px; text-transform: uppercase; letter-spacing: .15em;
 margin-bottom: 12px; font-weight: 500;
}
.approach-social__links { display: grid; gap: 8px; }
.social-link {
 display: flex; align-items: center; gap: 12px;
 padding: 12px 16px;
 background: rgba(255,255,255,.04);
 border: 1px solid rgba(255,255,255,.1);
 border-radius: 12px;
 color: var(--white);
 font-size: 14.5px; font-weight: 500;
 transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.social-link svg { width: 20px; height: 20px; color: var(--green); flex-shrink: 0; }
.social-link:hover {
 background: rgba(0,232,143,.08);
 border-color: rgba(0,232,143,.3);
 transform: translateY(-2px);
}

@media (max-width: 1024px) {
 .approach-grid { grid-template-columns: 1fr; gap: 40px; }
 .approach-social { position: static; max-width: 460px; margin: 0 auto; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
 CALCULATORS PAGE
 ═══════════════════════════════════════════════════════════ */
.calc-nav {
 background: var(--navy);
 padding: 26px 0;
 border-bottom: 1px solid rgba(255,255,255,.05);
}
.calc-nav__row {
 display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.calc-nav__link {
 display: inline-flex; align-items: center; gap: 8px;
 padding: 10px 18px;
 background: rgba(255,255,255,.05);
 border: 1px solid rgba(255,255,255,.12);
 border-radius: 999px;
 color: rgba(255,255,255,.85);
 font-size: 14px; font-weight: 500;
 transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.calc-nav__link:hover {
 background: rgba(0,232,143,.15);
 color: var(--green);
 border-color: rgba(0,232,143,.3);
}
.calc-nav__link svg { width: 16px; height: 16px; color: var(--green); }

.calc-block {
 padding: 110px 0;
 background: var(--cream);
 scroll-margin-top: 100px;
}
.calc-block--navy { background: var(--navy); color: var(--text-on-dark); }
.calc-block__grid {
 display: grid; grid-template-columns: 1fr 1.2fr;
 gap: 70px;
 align-items: start;
}
.calc-block__copy .eyebrow {
 display: inline-block;
 font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
 color: var(--purple);
 margin-bottom: 14px;
}
.calc-block__copy .eyebrow--green { color: var(--green); }
.calc-block__copy h2 {
 font-size: clamp(28px, 3vw, 42px);
 margin-bottom: 18px;
 letter-spacing: -.02em;
}
.calc-block--navy .calc-block__copy h2 { color: var(--white); }
.calc-block__copy p {
 color: var(--text-mute); font-size: 16.5px; margin-bottom: 22px; max-width: 460px;
}
.calc-block--navy .calc-block__copy p { color: var(--text-on-dark-mute); }
.calc-block__note { display: grid; gap: 10px; font-size: 14.5px; color: var(--text-mute); }
.calc-block--navy .calc-block__note { color: var(--text-on-dark-mute); }

/* Form card */
.calc-form {
 padding: 32px;
 background: var(--white);
 border-radius: var(--radius-lg);
 border: 1px solid rgba(11,14,31,.08);
 box-shadow: var(--shadow);
}
.calc-block--navy .calc-form {
 background: rgba(255,255,255,.04);
 border-color: rgba(255,255,255,.12);
 color: var(--white);
 backdrop-filter: blur(20px);
}
.calc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.calc-form label {
 display: block;
 font-size: 13px; font-weight: 500;
 color: var(--text-mute);
 margin-bottom: 16px;
}
.calc-block--navy .calc-form label { color: var(--text-on-dark-mute); }
.calc-form select, .calc-form input[type="text"], .calc-form input[type="number"] {
 width: 100%;
 padding: 12px 14px; margin-top: 6px;
 background: var(--cream);
 border: 1px solid rgba(11,14,31,.1);
 border-radius: 10px;
 color: var(--text);
 font: inherit; font-size: 15px;
 appearance: none;
 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235D6280' stroke-width='1.6' d='M1 1l5 5 5-5'/></svg>");
 background-repeat: no-repeat; background-position: right 14px center;
}
.calc-block--navy .calc-form select {
 background: rgba(255,255,255,.05);
 border-color: rgba(255,255,255,.15);
 color: var(--white);
 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23A3A8C4' stroke-width='1.6' d='M1 1l5 5 5-5'/></svg>");
 background-repeat: no-repeat; background-position: right 14px center;
}
.calc-form input[type="text"], .calc-form input[type="number"] {
 background-image: none;
}

.calc-slider { display: block; margin-bottom: 18px; }
.calc-slider__head { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.calc-slider input[type="range"] {
 flex: 1; -webkit-appearance: none; appearance: none;
 height: 4px; background: rgba(11,14,31,.15); border-radius: 2px;
 outline: none;
}
.calc-block--navy .calc-slider input[type="range"] { background: rgba(255,255,255,.15); }
.calc-slider input[type="range"]::-webkit-slider-thumb {
 -webkit-appearance: none; appearance: none;
 width: 20px; height: 20px; border-radius: 50%;
 background: var(--green); cursor: pointer;
 box-shadow: 0 0 0 4px rgba(0,232,143,.2), 0 4px 10px rgba(0,232,143,.35);
 transition: transform .15s var(--ease);
}
.calc-slider input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.calc-slider input[type="range"]::-moz-range-thumb {
 width: 20px; height: 20px; border: 0; border-radius: 50%;
 background: var(--green); cursor: pointer;
 box-shadow: 0 0 0 4px rgba(0,232,143,.2);
}
.calc-slider output {
 font-weight: 600; font-size: 15px;
 min-width: 90px; text-align: right;
 color: var(--text); font-variant-numeric: tabular-nums;
}
.calc-block--navy .calc-slider output { color: var(--white); }

.calc-result {
 display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
 margin: 22px 0 14px;
 padding: 20px;
 background: rgba(123,0,255,.08);
 border: 1px solid rgba(123,0,255,.2);
 border-radius: 14px;
}
.calc-block--navy .calc-result {
 background: rgba(0,232,143,.08);
 border-color: rgba(0,232,143,.25);
}
.calc-result--tri { grid-template-columns: repeat(3, 1fr); }
.calc-result > div { text-align: left; }
.calc-result span {
 display: block; font-size: 11.5px; color: var(--text-mute);
 letter-spacing: .06em; text-transform: uppercase; font-weight: 500; margin-bottom: 4px;
}
.calc-block--navy .calc-result span { color: var(--text-on-dark-mute); }
.calc-result strong {
 display: block; font-size: clamp(20px, 2.2vw, 28px);
 font-weight: 700; color: var(--purple);
 letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.calc-block--navy .calc-result strong { color: var(--green); }

.calc-fine-print {
 margin-top: 14px;
 font-size: 11.5px;
 color: var(--text-mute);
 opacity: .7;
}
.calc-block--navy .calc-fine-print { color: var(--text-on-dark-mute); }

@media (max-width: 1024px) {
 .calc-block__grid { grid-template-columns: 1fr; gap: 40px; }
 .calc-block { padding: 72px 0; }
 .calc-form { padding: 24px; }
 .calc-result--tri { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
 NAV, push the right-side actions further right (tighter to edge)
 ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
 .nav__inner.container {
 padding-right: 8px;
 }
 .nav__actions { margin-right: -12px; }
}

/* ═══════════════════════════════════════════════════════════
 STATS, tabular digits + wider anti-shift so counters glide
 ═══════════════════════════════════════════════════════════ */
.stats__num {
 font-variant-numeric: tabular-nums;
 font-feature-settings: "tnum" 1;
 will-change: contents;
}

/* ═══════════════════════════════════════════════════════════
 REDESIGN v8, NEW SECTION STYLES
 Home: video-bg hero, architect block, reviews grid.
 About: who-grid, literacy, leadership, socials-live.
 What we do: featured-video, specialise, edu-banner, gallery, roles, mini-process, compare, dark section.
 Education Hub: featured-podcast, edu grid, subscribe.
 ═══════════════════════════════════════════════════════════ */

/* --- utility: sections --- */
.section--pad { padding-block: clamp(72px, 8vw, 120px); }
.section--tinted {
 /* Diana v49: photo wash instead of flat cream-2 */
 color: var(--white);
 background:
  radial-gradient(700px 400px at 20% 25%, rgba(123,0,255,.55), transparent 62%),
  radial-gradient(700px 400px at 82% 78%, rgba(0,232,143,.35), transparent 62%),
  linear-gradient(160deg, #0B0E1F 0%, #12183a 55%, #0B0E1F 100%);
}
.section--dark { background: var(--navy); color: var(--white); }
.section-head--center { text-align: center; max-width: 780px; margin: 0 auto 60px; }
.section-head--on-dark h2, .section-head--on-dark p { color: var(--white); }
.section-head--on-dark p { color: var(--text-on-dark-mute); }

/* --- shared button variants --- */
.btn--dark {
 background: var(--navy); color: var(--white);
 padding: 14px 26px; border-radius: 999px;
 font-weight: 500; letter-spacing: -.01em;
 transition: transform .25s var(--ease), background .25s var(--ease);
}
.btn--dark:hover { transform: translateY(-2px); background: #1a1e35; }
.btn--outline {
 background: transparent; color: var(--navy);
 border: 1.5px solid var(--navy);
 padding: 12px 24px; border-radius: 999px;
 font-weight: 500;
 transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn--outline:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════════
 HOME | Video-background hero
 ═══════════════════════════════════════════════════════════ */
.hero--video { min-height: min(92vh, 820px); position: relative; overflow: hidden; }
.hero__video {
 position: absolute; inset: 0; z-index: 0;
 overflow: hidden;
}
.hero__video-el {
 width: 100%; height: 100%; object-fit: cover;
 position: absolute; inset: 0;
 filter: grayscale(20%) brightness(0.7);
}
.hero__video-overlay {
 position: absolute; inset: 0;
 background:
 radial-gradient(1000px 500px at 20% 20%, rgba(123,0,255,.55), transparent 60%),
 radial-gradient(900px 500px at 80% 80%, rgba(0,232,143,.35), transparent 65%),
 linear-gradient(180deg, rgba(11,14,31,.35) 0%, rgba(11,14,31,.75) 100%);
}
.hero--video .hero__mesh { z-index: 1; }
.hero--video .hero__inner { position: relative; z-index: 2; }
.hero__inner--center {
 max-width: 900px; margin: 0 auto;
 text-align: center;
 display: flex; flex-direction: column; align-items: center;
 gap: 24px;
 padding-block: clamp(80px, 12vh, 160px);
}
.hero__inner--center .hero__badge { justify-content: center; }
.hero__inner--center .hero__title { max-width: 820px; }
.hero__inner--center .hero__sub { max-width: 640px; margin-inline: auto; }
.hero__inner--center .hero__ctas { justify-content: center; }

/* ═══════════════════════════════════════════════════════════
 HOME | The Mortgage Architect & Team
 ═══════════════════════════════════════════════════════════ */
.architect {
 padding-block: clamp(72px, 8vw, 120px);
 /* Diana v47: photo wash background so the section isn't flat cream */
 color: var(--white);
 background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.7)) fixed,
   url('assets/media/diana-hero-56.jpg') center 30% / cover no-repeat fixed;
 position: relative;
}
.architect__grid {
 display: grid;
 grid-template-columns: 1.3fr 1fr;
 gap: 80px;
 align-items: center;
}
.architect__copy .eyebrow { margin-bottom: 14px; }
.architect__copy h2 {
 font-size: clamp(36px, 4vw, 56px);
 line-height: 1.05;
 letter-spacing: -.02em;
 margin-bottom: 26px;
}
.architect__copy p {
 color: var(--text-mute);
 font-size: 16.5px;
 line-height: 1.65;
 margin-bottom: 18px;
}
.architect__punch {
 background: linear-gradient(135deg, rgba(0,232,143,.16), rgba(0,232,143,.05));
 padding: 16px 22px;
 border-left: 3px solid var(--green);
 border-radius: 4px;
 color: var(--navy) !important;
}
.architect__closer {
 font-style: italic;
 color: var(--navy) !important;
 font-size: 17px !important;
}
.architect__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

.architect__photos {
 position: relative;
 min-height: 620px;
}
.architect__photo {
 position: absolute;
 margin: 0;
 border-radius: 22px;
 overflow: hidden;
 background: var(--cream-2);
 box-shadow: 0 30px 60px -20px rgba(11,14,31,.35);
 transition: transform .35s var(--ease);
}
.architect__photo img {
 width: 100%; height: 100%;
 object-fit: cover; object-position: center 20%;
 display: block;
 transition: transform .5s var(--ease);
}
.architect__photo:hover { transform: translateY(-4px); }
.architect__photo:hover img { transform: scale(1.03); }
.architect__photo figcaption {
 position: absolute; left: 14px; bottom: 14px; right: 14px;
 padding: 12px 16px;
 background: rgba(11,14,31,.82);
 backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
 border-radius: 12px; color: var(--white);
 font-size: 13.5px; line-height: 1.2;
}
.architect__photo figcaption strong { display: block; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.architect__photo figcaption span { display: block; color: rgba(255,255,255,.7); font-size: 12px; margin-top: 3px; }
.architect__photo--diana {
 width: 55%; height: 78%;
 left: 0; top: 0; z-index: 3;
 border: 5px solid var(--cream);
}
.architect__photo--jaff {
 width: 55%; height: 78%;
 right: -4%; bottom: 0; z-index: 2;
}
@media (max-width: 900px) {
 .architect__grid { grid-template-columns: 1fr; gap: 50px; }
 .architect__photos { min-height: 480px; max-width: 480px; margin: 0 auto; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
 HOME | Google Reviews grid
 ═══════════════════════════════════════════════════════════ */
.reviews {
 padding-block: clamp(72px, 8vw, 120px);
 /* Diana v47: swap flat cream for a different Diana still with cream wash */
 position: relative;
 color: var(--white);
 background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.7)) fixed,
   url('assets/media/diana-hero-53.jpg') center 20% / cover no-repeat fixed;
}
.reviews > .container { position: relative; z-index: 1; }
.reviews__google-icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.reviews__meta {
 display: flex; align-items: center; gap: 18px;
 justify-content: center;
 margin: -20px 0 40px;
 padding: 16px 24px;
 background: var(--white);
 border: 1px solid rgba(11,14,31,.08);
 border-radius: 16px;
 max-width: 520px; margin-inline: auto;
 box-shadow: 0 10px 30px -18px rgba(11,14,31,.25);
}
.reviews__meta-score { display: flex; align-items: center; gap: 10px; }
.reviews__meta-num { font-size: 32px; font-weight: 700; color: var(--navy); line-height: 1; }
.reviews__meta-stars { color: #F5B301; font-size: 20px; letter-spacing: 2px; }
.reviews__meta-copy { display: flex; flex-direction: column; text-align: left; }
.reviews__meta-copy strong { font-size: 14px; color: var(--navy); }
.reviews__meta-copy span { font-size: 12.5px; color: var(--text-mute); }

.reviews__grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 gap: 20px;
 margin-top: 40px;
}
.review-skeleton {
 min-height: 200px;
 border-radius: 16px;
 background: linear-gradient(90deg, rgba(11,14,31,.05) 0%, rgba(11,14,31,.09) 50%, rgba(11,14,31,.05) 100%);
 background-size: 200% 100%;
 animation: reviewShimmer 1.6s linear infinite;
}
@keyframes reviewShimmer {
 0% { background-position: 200% 0; }
 100% { background-position: -200% 0; }
}
.review-card {
 background: var(--white);
 border: 1px solid rgba(11,14,31,.08);
 border-radius: 16px;
 padding: 20px 22px;
 display: flex; flex-direction: column; gap: 14px;
 transition: transform .25s var(--ease), box-shadow .25s var(--ease);
 min-height: 200px;
}
.review-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(11,14,31,.25); }
.review-card__head { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; }
.review-card__avatar {
 width: 44px; height: 44px;
 border-radius: 50%;
 background: var(--purple);
 color: var(--white);
 display: grid; place-items: center;
 font-weight: 600; font-size: 15px;
}
.review-card__head strong { display: block; font-weight: 600; font-size: 14.5px; color: var(--navy); }
.review-card__head span { display: block; font-size: 12px; color: var(--text-mute); }
.review-card__stars { color: #F5B301; font-size: 14px; letter-spacing: 1px; grid-column: 1 / -1; margin-top: 2px; }
.review-card__text { color: var(--text-mute); font-size: 14.5px; line-height: 1.6; flex-grow: 1; }
.review-card__foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-mute); padding-top: 12px; border-top: 1px solid rgba(11,14,31,.05); }
.review-card__g { width: 14px; height: 14px; }

.reviews__actions {
 margin-top: 40px;
 display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.reviews__external {
 display: inline-flex; align-items: center; gap: 6px;
 /* Diana v55: reviews section now dark — link needs to be white */
 color: var(--white); text-decoration: underline; text-underline-offset: 3px;
 font-size: 14px;
}
.reviews__external svg { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════════════
 ABOUT | Who-grid, literacy, leadership, socials-live
 ═══════════════════════════════════════════════════════════ */
.who-grid {
 display: grid;
 grid-template-columns: 1.15fr 1fr;
 gap: 80px;
 align-items: center;
}
.who__copy .eyebrow { margin-bottom: 14px; }
.who__copy h2 { font-size: clamp(32px, 3.5vw, 46px); line-height: 1.1; margin-bottom: 22px; letter-spacing: -.02em; }
.who__copy p { color: var(--text-mute); font-size: 16px; line-height: 1.65; margin-bottom: 16px; }
.who__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.who__photos {
 position: relative; min-height: 560px;
}
.who__photo {
 position: absolute; margin: 0;
 border-radius: 22px; overflow: hidden;
 background: var(--cream-2);
 box-shadow: 0 25px 55px -22px rgba(11,14,31,.4);
 transition: transform .35s var(--ease);
}
.who__photo img,
.who__photo video { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.who__photo figcaption {
 position: absolute; left: 12px; right: 12px; bottom: 12px;
 padding: 10px 14px; border-radius: 10px;
 background: rgba(11,14,31,.82);
 color: var(--white); font-size: 12.5px;
 backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.who__photo figcaption strong { display: block; font-size: 14px; font-weight: 600; }
.who__photo figcaption span { display: block; color: rgba(255,255,255,.65); font-size: 11.5px; margin-top: 2px; }
.who__photo--diana { width: 58%; height: 78%; left: 0; top: 0; z-index: 3; border: 5px solid var(--cream); }
.who__photo--jaff { width: 55%; height: 68%; right: -4%; bottom: 0; z-index: 2; }
@media (max-width: 900px) {
 .who-grid { grid-template-columns: 1fr; gap: 40px; }
 .who__photos { min-height: 460px; max-width: 460px; margin: 0 auto; width: 100%; }
}

.literacy {
 background: linear-gradient(135deg, var(--navy) 0%, #12172d 100%);
 color: var(--white);
 padding-block: clamp(72px, 9vw, 130px);
 position: relative;
 overflow: hidden;
}
.literacy::before {
 content: ''; position: absolute; inset: 0;
 background:
 radial-gradient(600px 300px at 10% 20%, rgba(123,0,255,.35), transparent 60%),
 radial-gradient(600px 300px at 90% 80%, rgba(0,232,143,.22), transparent 60%);
 pointer-events: none;
}
.literacy__grid {
 position: relative; z-index: 1;
 display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; align-items: center;
}
.literacy__copy h2 { color: var(--white); font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 22px; }
.literacy__copy p { color: var(--text-on-dark-mute); font-size: 16px; line-height: 1.65; margin-bottom: 16px; }
.literacy__pillars { display: grid; gap: 18px; margin-top: 30px; }
.literacy__pillar { display: flex; gap: 16px; align-items: flex-start; }
.literacy__pillar-icon {
 flex: 0 0 46px; width: 46px; height: 46px;
 background: linear-gradient(135deg, rgba(0,232,143,.16), rgba(0,232,143,.05));
 border-radius: 12px;
 display: grid; place-items: center;
 color: var(--green);
 border: 1px solid rgba(0,232,143,.25);
}
.literacy__pillar-icon svg { width: 22px; height: 22px; }
.literacy__pillar strong { display: block; color: var(--white); font-weight: 600; font-size: 15.5px; margin-bottom: 3px; }
.literacy__pillar span { display: block; color: var(--text-on-dark-mute); font-size: 14px; line-height: 1.5; }

.literacy__reel {
 position: relative; aspect-ratio: 9 / 14;
 border-radius: 22px; overflow: hidden;
 background: var(--cream-2);
 box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.literacy__reel-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.literacy__reel-badge {
 position: absolute; left: 12px; bottom: 12px; right: 12px;
 padding: 10px 14px;
 background: rgba(11,14,31,.85);
 backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
 border-radius: 10px;
 color: var(--white);
 font-size: 13px; font-weight: 500;
 display: flex; align-items: center; gap: 8px;
}
.literacy__reel-badge svg { width: 16px; height: 16px; color: var(--green); }
@media (max-width: 900px) {
 .literacy__grid { grid-template-columns: 1fr; gap: 40px; }
 .literacy__reel { max-width: 340px; margin: 0 auto; }
}

.leadership__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.leader-card {
 background: var(--white);
 border: 1px solid rgba(11,14,31,.08);
 border-radius: 22px; overflow: hidden;
 display: grid; grid-template-columns: 220px 1fr;
 transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.leader-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -20px rgba(11,14,31,.25); }
.leader-card__img { background: var(--cream-2); overflow: hidden; }
.leader-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.leader-card__body { padding: 26px 28px; }
.leader-card__body h3 { font-size: 22px; margin-bottom: 4px; letter-spacing: -.01em; }
.leader-card__role { color: var(--green); font-weight: 500; font-size: 13.5px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .04em; }
.leader-card__body p { color: var(--text-mute); font-size: 14.5px; line-height: 1.6; margin-bottom: 18px; }
.leader-card__socials { display: flex; gap: 10px; }
.leader-card__socials a {
 width: 38px; height: 38px; border-radius: 10px;
 border: 1px solid rgba(11,14,31,.12);
 display: grid; place-items: center;
 color: var(--navy);
 transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.leader-card__socials a:hover { background: var(--navy); color: var(--green); transform: translateY(-2px); }
.leader-card__socials a svg { width: 18px; height: 18px; }
.leader-card__socials--placeholder { color: var(--text-mute); font-size: 13px; font-style: italic; align-items: center; }
@media (max-width: 900px) {
 .leadership__grid { grid-template-columns: 1fr; }
 .leader-card { grid-template-columns: 1fr; }
 .leader-card__img { aspect-ratio: 16/10; }
}

/* Socials live grid */
.socials-live { padding-block: clamp(72px, 8vw, 120px); background: var(--cream-2); }
.socials-live__grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 24px;
 max-width: 880px;
 margin: 0 auto;
}
/* When 3 tiles present, LinkedIn wraps to a centered second row */
.socials-live__grid > *:nth-child(3) { grid-column: 1 / -1; max-width: 428px; justify-self: center; }
.social-preview {
 display: block;
 background: var(--white);
 border-radius: 20px;
 overflow: hidden;
 border: 1px solid rgba(11,14,31,.08);
 text-decoration: none;
 color: var(--navy);
 transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.social-preview:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -20px rgba(11,14,31,.25); }
.social-preview__frame { padding: 12px; background: linear-gradient(180deg, #f7f5ef 0%, #ecebe4 100%); }
.social-preview__browser {
 display: flex; align-items: center; gap: 6px;
 padding: 8px 12px;
 background: var(--white);
 border-radius: 10px 10px 0 0;
 border-bottom: 1px solid rgba(11,14,31,.06);
}
.social-preview__browser span {
 width: 10px; height: 10px; border-radius: 50%;
 background: rgba(11,14,31,.15);
}
.social-preview__browser span:nth-child(1) { background: #FF5F57; }
.social-preview__browser span:nth-child(2) { background: #FEBC2E; }
.social-preview__browser span:nth-child(3) { background: #28C840; }
.social-preview__url {
 flex: 1; margin-left: 8px;
 padding: 4px 10px; background: var(--cream-2);
 border-radius: 6px;
 font-size: 11.5px; color: var(--text-mute);
 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.social-preview__body {
 background: var(--white);
 border-radius: 0 0 10px 10px;
 padding: 16px;
 min-height: 340px;
}
.social-preview__handle { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(11,14,31,.06); }
.social-preview__avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--cream-2); }
.social-preview__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.social-preview__handle strong { display: block; font-size: 14px; color: var(--navy); }
.social-preview__handle span { display: block; font-size: 12px; color: var(--text-mute); }
.social-preview__reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.social-preview__reel {
 aspect-ratio: 9/16;
 background: linear-gradient(135deg, #E1306C 0%, #F77737 50%, #FCAF45 100%);
 border-radius: 4px;
 opacity: .85;
}
.social-preview__reel:nth-child(2) { background: linear-gradient(135deg, #833AB4 0%, #C13584 50%, #E1306C 100%); }
.social-preview__reel:nth-child(3) { background: linear-gradient(135deg, #F56040 0%, #FCAF45 50%, #FFDC80 100%); }
.social-preview__reel:nth-child(4) { background: linear-gradient(135deg, #405DE6 0%, #833AB4 50%, #C13584 100%); }
.social-preview__reel:nth-child(5) { background: linear-gradient(135deg, #5851DB 0%, #833AB4 50%, #C13584 100%); }
.social-preview__reel:nth-child(6) { background: linear-gradient(135deg, #E1306C 0%, #C13584 50%, #833AB4 100%); }
.social-preview__videos { display: grid; grid-template-columns: 1fr; gap: 10px; }
.social-preview__video {
 aspect-ratio: 16/9;
 background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
 border-radius: 6px;
 display: grid; place-items: center;
 color: var(--white); font-size: 24px;
}
.social-preview__posts { display: grid; gap: 8px; }
.social-preview__post {
 padding: 14px 16px;
 background: var(--cream-2);
 border-radius: 8px;
 color: var(--text-mute); font-size: 13px;
 border-left: 3px solid #0A66C2;
}
.social-preview__foot {
 padding: 14px 18px;
 display: flex; align-items: center; justify-content: space-between;
 border-top: 1px solid rgba(11,14,31,.06);
 background: var(--white);
}
.social-preview__label { font-weight: 600; font-size: 13.5px; color: var(--navy); text-transform: uppercase; letter-spacing: .05em; }
.social-preview__cta { display: inline-flex; align-items: center; gap: 4px; color: var(--navy); font-size: 13px; font-weight: 500; }
.social-preview__cta svg { width: 13px; height: 13px; }
.socials-live__note {
 max-width: 720px; margin: 30px auto 0;
 padding: 14px 18px;
 background: rgba(123,0,255,.06);
 border: 1px dashed rgba(123,0,255,.3);
 border-radius: 12px;
 font-size: 13px; color: var(--text-mute); text-align: center;
}
@media (max-width: 900px) {
 .socials-live__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
 WHAT WE DO | Featured video, specialise, edu banner, gallery, roles, mini process, compare table
 ═══════════════════════════════════════════════════════════ */
.page-hero--center .page-hero__inner {
 text-align: center; margin: 0 auto;
}
.page-hero--center .page-hero__inner h1 { max-width: 900px; margin-inline: auto; }
.page-hero--center .page-hero__inner .page-hero__lede { max-width: 700px; margin-inline: auto; }
.page-hero--center .breadcrumb { justify-content: center; }

.featured-video {
 padding-block: 40px 60px;
 /* Diana v49: photo wash instead of cream */
 position: relative;
 color: var(--white);
 background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.7)) fixed,
   url('assets/media/diana-hero-53.jpg') center 25% / cover no-repeat fixed;
}
.featured-video > .container { position: relative; z-index: 1; }
.featured-video__frame {
 aspect-ratio: 16/9;
 max-width: 960px; margin: 0 auto;
 border-radius: 20px; overflow: hidden;
 box-shadow: 0 30px 60px -20px rgba(11,14,31,.3);
 background: var(--navy);
}
.featured-video__frame iframe { width: 100%; height: 100%; border: 0; }
.featured-video__caption {
 max-width: 960px; margin: 14px auto 0;
 font-size: 12.5px; color: var(--text-mute); text-align: center;
 padding: 8px 14px; background: rgba(123,0,255,.06);
 border: 1px dashed rgba(123,0,255,.3);
 border-radius: 10px;
}

.specialise__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.specialise-card {
 background: var(--white);
 border: 1px solid rgba(11,14,31,.08);
 border-radius: 20px;
 padding: 32px 28px;
 position: relative; overflow: hidden;
 transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.specialise-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -20px rgba(11,14,31,.25); }
.specialise-card__num {
 position: absolute; top: 20px; right: 24px;
 font-size: 52px; font-weight: 700;
 color: rgba(0,232,143,.15);
 line-height: 1; letter-spacing: -.03em;
}
.specialise-card__icon {
 width: 54px; height: 54px;
 background: linear-gradient(135deg, rgba(0,232,143,.16), rgba(123,0,255,.12));
 border-radius: 14px;
 display: grid; place-items: center;
 color: var(--navy);
 margin-bottom: 20px;
}
.specialise-card__icon svg { width: 26px; height: 26px; }
/* Diana v61: bigger, easier-to-read card text with more contrast */
.specialise-card h3 { font-size: 24px; margin-bottom: 12px; letter-spacing: -.01em; color: var(--purple); }
.specialise-card p { color: var(--navy); font-size: 17px; line-height: 1.55; font-weight: 500; }
@media (max-width: 900px) { .specialise__grid { grid-template-columns: 1fr; } }

.edu-banner {
 background: var(--navy); color: var(--white);
 padding-block: clamp(60px, 7vw, 100px);
 position: relative; overflow: hidden;
}
.edu-banner__inner { position: relative; display: grid; grid-template-columns: 200px 1fr; gap: 50px; align-items: center; }
.edu-banner__mark { color: var(--green); opacity: .6; }
.edu-banner__mark svg { width: 100%; height: auto; }
.edu-banner__copy h2 { color: var(--white); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; margin-bottom: 14px; letter-spacing: -.02em; }
.edu-banner__copy p { color: var(--text-on-dark-mute); font-size: 16px; margin-bottom: 22px; line-height: 1.6; }
@media (max-width: 900px) {
 .edu-banner__inner { grid-template-columns: 1fr; gap: 30px; text-align: center; }
 .edu-banner__mark { max-width: 120px; margin: 0 auto; }
}

.diana-gallery {
 display: grid;
 grid-template-columns: 1.3fr 1fr 1fr;
 grid-template-rows: 400px;
 gap: 16px;
}
.diana-gallery__item {
 margin: 0; border-radius: 20px; overflow: hidden;
 position: relative;
 background: var(--cream-2);
 box-shadow: 0 20px 40px -18px rgba(11,14,31,.25);
}
.diana-gallery__item img {
 width: 100%; height: 100%; object-fit: cover; object-position: center 15%;
 transition: transform .5s var(--ease);
}
.diana-gallery__item:hover img { transform: scale(1.04); }
.diana-gallery__item figcaption {
 position: absolute; left: 12px; bottom: 12px; right: 12px;
 padding: 8px 14px; background: rgba(11,14,31,.85);
 backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
 border-radius: 10px; color: var(--white);
 font-size: 12.5px;
}
.diana-gallery__item--tall { grid-row: span 1; }
@media (max-width: 900px) {
 .diana-gallery { grid-template-columns: 1fr; grid-template-rows: repeat(3, 280px); }
}

.roles__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.role-card {
 background: var(--white);
 border-radius: 18px;
 padding: 28px 24px;
 border: 1px solid rgba(11,14,31,.06);
 transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.role-card:hover { transform: translateY(-4px); border-color: rgba(0,232,143,.4); }
.role-card__badge {
 width: 48px; height: 48px;
 background: var(--navy); color: var(--green);
 border-radius: 12px;
 display: grid; place-items: center;
 margin-bottom: 18px;
}
.role-card__badge svg { width: 22px; height: 22px; }
/* Diana v67: bolder + larger role heading so each part reads as a clear role name */
.role-card h3 { font-size: 20px; margin-bottom: 12px; letter-spacing: -.01em; line-height: 1.2; font-weight: 700; color: var(--purple); }
.role-card p { color: var(--navy); font-size: 15.5px; line-height: 1.55; font-weight: 500; }
@media (max-width: 900px) { .roles__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .roles__grid { grid-template-columns: 1fr; } }

.mini-process {
 list-style: none; padding: 0; margin: 0;
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
 counter-reset: none;
}
.mini-process__step {
 padding: 26px 24px;
 background: var(--white);
 border: 1px solid rgba(11,14,31,.08);
 border-radius: 18px;
 position: relative;
 transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.mini-process__step:hover { transform: translateY(-4px); border-color: rgba(0,232,143,.4); }
.mini-process__num {
 display: inline-block;
 font-weight: 700; font-size: 14px;
 color: var(--green);
 letter-spacing: .04em;
 margin-bottom: 12px;
 padding: 4px 10px; background: rgba(0,232,143,.1); border-radius: 999px;
}
/* Diana v61: larger, higher-contrast six-step card text */
.mini-process__step h3 { font-size: 22px; margin-bottom: 10px; letter-spacing: -.01em; color: var(--navy); }
.mini-process__step p { color: var(--navy); font-size: 16px; line-height: 1.55; font-weight: 500; }
@media (max-width: 900px) { .mini-process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mini-process { grid-template-columns: 1fr; } }

/* Compare table */
.compare-table {
 /* Diana v67: lighter contrasting bg so the table stands out from the section */
 background: rgba(255,255,255,.06);
 border: 1px solid rgba(255,255,255,.18);
 border-radius: 20px; overflow: hidden;
 max-width: 1100px; margin: 0 auto;
}
.compare-table__head,
.compare-table__row {
 display: grid; grid-template-columns: 1.2fr 1.2fr 1.2fr;
 padding: 0;
}
.compare-table__row { border-top: 1px solid rgba(255,255,255,.06); }
.compare-table__cell {
 padding: 22px 26px;
 color: var(--white);
 font-size: 16px;
 line-height: 1.5;
}
.compare-table__head .compare-table__cell {
 padding-top: 26px; padding-bottom: 22px;
 font-size: 17px;
}
.compare-table__head .compare-table__cell strong { display: block; font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.compare-table__head .compare-table__cell span { display: block; color: var(--text-on-dark-mute); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
/* Diana v67: tick + cross indicators before the Ascendra / other-broker cell values */
.compare-table__row .compare-table__cell--us::before {
 content: "✓ "; color: var(--green); font-weight: 700; font-size: 20px; margin-right: 6px; vertical-align: -1px;
}
.compare-table__row .compare-table__cell:last-child::before {
 content: "✗ "; color: #FF5A6E; font-weight: 700; font-size: 20px; margin-right: 6px; vertical-align: -1px;
}
.compare-table__head .compare-table__cell::before { content: none !important; }
.compare-table__cell--us { background: rgba(0,232,143,.06); border-left: 3px solid var(--green); border-right: 3px solid transparent; }
.compare-table__head .compare-table__cell--us strong { color: var(--green); }
.compare-table__row .compare-table__cell:first-child { color: var(--text-on-dark-mute); font-weight: 500; }
@media (max-width: 700px) {
 .compare-table__head,
 .compare-table__row { grid-template-columns: 1fr; }
 .compare-table__cell { border-bottom: 1px solid rgba(255,255,255,.05); }
 .compare-table__cell--us { border-left: 3px solid var(--green); }
}

/* ═══════════════════════════════════════════════════════════
 EDUCATION HUB | Featured podcast, edu grid, subscribe
 ═══════════════════════════════════════════════════════════ */
.featured-podcast {
 padding-block: clamp(60px, 7vw, 100px);
 /* Diana v49: photo wash instead of cream */
 position: relative;
 color: var(--white);
 background:
  radial-gradient(700px 400px at 20% 25%, rgba(123,0,255,.55), transparent 62%),
  radial-gradient(700px 400px at 82% 78%, rgba(0,232,143,.35), transparent 62%),
  linear-gradient(160deg, #0B0E1F 0%, #12183a 55%, #0B0E1F 100%);
}
.featured-podcast > .container { position: relative; z-index: 1; }
.featured-podcast__inner { max-width: 960px; margin: 0 auto; text-align: center; }
.featured-podcast__badge {
 display: inline-flex; align-items: center; gap: 8px;
 padding: 8px 16px;
 background: rgba(123,0,255,.1); border: 1px solid rgba(123,0,255,.25);
 border-radius: 999px;
 font-size: 13px; font-weight: 500; color: var(--purple);
 margin-bottom: 20px;
}
.featured-podcast__badge svg { width: 16px; height: 16px; }
.featured-podcast__inner h2 { font-size: clamp(32px, 3.5vw, 46px); line-height: 1.1; margin-bottom: 16px; letter-spacing: -.02em; }
.featured-podcast__inner p { color: var(--text-mute); font-size: 16px; line-height: 1.6; max-width: 640px; margin: 0 auto 32px; }
.featured-podcast__frame {
 aspect-ratio: 16/9;
 border-radius: 20px; overflow: hidden;
 box-shadow: 0 30px 60px -20px rgba(11,14,31,.3);
 background: var(--navy);
}
.featured-podcast__frame iframe { width: 100%; height: 100%; border: 0; }
.featured-podcast__todo {
 margin-top: 14px;
 font-size: 12.5px; color: var(--text-mute);
 padding: 8px 14px; background: rgba(123,0,255,.06);
 border: 1px dashed rgba(123,0,255,.3);
 border-radius: 10px; display: inline-block;
}

.edu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.edu-card {
 background: var(--white);
 border: 1px solid rgba(11,14,31,.08);
 border-radius: 18px; overflow: hidden;
 transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.edu-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -20px rgba(11,14,31,.25); }
.edu-card__frame { aspect-ratio: 16/9; background: var(--navy); }
.edu-card__frame iframe { width: 100%; height: 100%; border: 0; }
.edu-card h3 { font-size: 17px; padding: 18px 20px 6px; letter-spacing: -.01em; }
.edu-card p { padding: 0 20px 20px; color: var(--text-mute); font-size: 13.5px; line-height: 1.5; }
.edu-note {
 max-width: 780px; margin: 40px auto 0;
 padding: 16px 20px;
 background: rgba(0,232,143,.08);
 border: 1px dashed rgba(0,232,143,.35);
 border-radius: 12px;
 font-size: 14px; color: var(--text-mute); text-align: center;
}
.edu-note strong { color: var(--navy); }
@media (max-width: 900px) { .edu-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .edu-grid { grid-template-columns: 1fr; } }

.edu-subscribe {
 padding-block: clamp(60px, 7vw, 100px);
 background: linear-gradient(135deg, var(--navy) 0%, #12172d 100%);
 color: var(--white);
 position: relative; overflow: hidden;
}
.edu-subscribe::before {
 content: ''; position: absolute; inset: 0;
 background:
 radial-gradient(600px 300px at 20% 30%, rgba(0,232,143,.25), transparent 60%),
 radial-gradient(600px 300px at 80% 70%, rgba(123,0,255,.3), transparent 60%);
 pointer-events: none;
}
.edu-subscribe__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center; }
.edu-subscribe__copy h2 { color: var(--white); font-size: clamp(32px, 3.5vw, 46px); line-height: 1.1; margin-bottom: 14px; letter-spacing: -.02em; }
.edu-subscribe__copy p { color: var(--text-on-dark-mute); font-size: 16px; margin-bottom: 24px; }
.edu-subscribe__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════
 REDESIGN v8, REAL ASSET PATTERNS
 Reels-alongside-copy, native video features, vertical edu cards
 ═══════════════════════════════════════════════════════════ */

/* Specialise section with reel on the left of the copy */
.specialise-with-reel {
 display: grid; grid-template-columns: 320px 1fr;
 gap: 60px; align-items: center;
 margin-bottom: 50px;
}
.specialise-with-reel__reel {
 aspect-ratio: 9/16;
 border-radius: 20px; overflow: hidden;
 background: var(--navy);
 box-shadow: 0 25px 60px -20px rgba(11,14,31,.35);
 position: relative;
}
.specialise-with-reel__reel video {
 width: 100%; height: 100%;
 object-fit: cover;
 display: block;
}
/* removed: AUTOPLAY badge overlay was not part of Diana's brief */
.specialise-with-reel__copy .section-head { max-width: none; margin: 0; text-align: left; }
.specialise-with-reel__copy h2 { margin-top: 8px; }
@media (max-width: 900px) {
 .specialise-with-reel { grid-template-columns: 1fr; gap: 30px; }
 .specialise-with-reel__reel { max-width: 280px; margin: 0 auto; }
 .specialise-with-reel__copy .section-head { text-align: center; }
}

/* Native <video> in featured slots (was <iframe>) */
.featured-video__video {
 width: 100%; height: 100%;
 object-fit: cover; display: block;
 background: var(--navy);
}

/* Vertical edu card for reel-format videos */
.edu-card--vertical .edu-card__frame--vertical {
 aspect-ratio: 9/16;
 max-height: 620px;
 background: var(--navy);
 display: flex; align-items: center; justify-content: center;
}
.edu-card--vertical video {
 width: 100%; height: 100%; object-fit: cover;
 display: block;
}
.edu-card--vertical { grid-column: span 1; }

/* Featured podcast placeholder card (image + play button until video arrives) */
.featured-podcast__frame--placeholder {
 position: relative;
 background: var(--navy);
}
.featured-podcast__frame--placeholder img {
 width: 100%; height: 100%;
 object-fit: cover; display: block;
 opacity: .82;
}
.featured-podcast__play {
 position: absolute; top: 50%; left: 50%;
 transform: translate(-50%, -50%);
 width: 92px; height: 92px;
 border-radius: 50%;
 background: var(--green);
 color: var(--navy);
 display: grid; place-items: center;
 box-shadow: 0 12px 40px -8px rgba(0,232,143,.6);
 transition: transform .3s var(--ease);
 text-decoration: none;
}
.featured-podcast__play:hover { transform: translate(-50%, -50%) scale(1.08); }
.featured-podcast__play svg { width: 38px; height: 38px; }

/* ═══════════════════════════════════════════════════════════
 v9: Featured reel (vertical) with copy alongside
 ═══════════════════════════════════════════════════════════ */
.featured-reel {
 padding-block: clamp(60px, 7vw, 100px);
 background: var(--cream-2);
}
.featured-reel__inner {
 display: grid;
 grid-template-columns: 320px 1fr;
 gap: 60px;
 align-items: center;
}
.featured-reel__video {
 aspect-ratio: 9/16;
 max-height: 620px;
 border-radius: 20px; overflow: hidden;
 background: var(--navy);
 box-shadow: 0 25px 60px -20px rgba(11,14,31,.35);
}
.featured-reel__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-reel__copy h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 18px; }
.featured-reel__copy p { color: var(--text-mute); font-size: 16px; line-height: 1.6; margin-bottom: 14px; }
.featured-reel__copy .btn { margin-top: 12px; }
.featured-reel__copy .eyebrow { margin-bottom: 12px; }
@media (max-width: 900px) {
 .featured-reel__inner { grid-template-columns: 1fr; gap: 30px; text-align: center; }
 .featured-reel__video { max-width: 280px; margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════
 v9: Live YouTube playlist embed on Education Hub
 ═══════════════════════════════════════════════════════════ */
.edu-playlist {
 aspect-ratio: 16/9;
 max-width: 1080px;
 margin: 0 auto;
 border-radius: 20px; overflow: hidden;
 background: var(--navy);
 box-shadow: 0 30px 60px -20px rgba(11,14,31,.3);
}
.edu-playlist iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ═══════════════════════════════════════════════════════════
 v9: Live-embed variant of social preview (About page YouTube tile)
 ═══════════════════════════════════════════════════════════ */
.social-preview--live {
 background: var(--white);
}
.social-preview__frame--live { padding: 12px 12px 0; background: linear-gradient(180deg, #f7f5ef 0%, #ecebe4 100%); }
.social-preview__live-embed {
 aspect-ratio: 16/9;
 background: #000;
 border-radius: 0 0 10px 10px;
 overflow: hidden;
}
.social-preview__live-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.social-preview--live .social-preview__foot { display: flex; }

/* v11: real photos in Instagram mockup reels */
.social-preview__reels--real .social-preview__reel {
 background: var(--cream-2);
 overflow: hidden;
 opacity: 1;
}
.social-preview__reels--real .social-preview__reel img {
 width: 100%; height: 100%; object-fit: cover;
 display: block;
 transition: transform .35s var(--ease);
}
.social-preview__reels--real .social-preview__reel:hover img { transform: scale(1.05); }

/* ═══════════════════════════════════════════════════════════
 v12: real profile screenshot Instagram tile + branded LinkedIn card
 ═══════════════════════════════════════════════════════════ */
.social-preview__frame--shot { padding: 12px 12px 0; }
.social-preview__shot {
 aspect-ratio: 4/5;
 overflow: hidden;
 border-radius: 0 0 10px 10px;
 background: #000;
}
.social-preview__shot img {
 width: 100%; height: 100%;
 object-fit: cover; object-position: top center;
 display: block;
 transition: transform .5s var(--ease);
}
.social-preview--shot:hover .social-preview__shot img { transform: scale(1.02); }

/* LinkedIn: clean 'connect' card, no fake mockup */
.social-preview--card { background: var(--white); }
.li-card {
 position: relative;
 padding-bottom: 22px;
}
.li-card__cover {
 position: relative;
 height: 90px;
 overflow: hidden;
 background: linear-gradient(135deg, #0A66C2 0%, #004182 100%);
}
.li-card__cover svg {
 width: 100%; height: 100%;
 display: block;
}
.li-card__logo {
 position: absolute;
 top: 12px; right: 14px;
 width: 34px; height: 34px;
 border-radius: 6px;
 background: var(--white);
 color: #0A66C2;
 display: grid; place-items: center;
 font-weight: 700; font-size: 20px;
 font-family: 'Poppins', system-ui, sans-serif;
}
.li-card__avatar {
 width: 128px; height: 128px;
 border-radius: 50%;
 border: 5px solid var(--white);
 background: var(--cream-2);
 overflow: hidden;
 margin: -64px auto 14px auto;
 box-shadow: 0 10px 24px -8px rgba(11,14,31,.25);
}
.li-card__avatar img {
 width: 100%; height: 100%;
 object-fit: cover; object-position: center 22%;
 display: block;
}
.li-card__cover { height: 110px; }
.li-card__body { padding: 4px 22px 6px; text-align: center; align-items: center; }
.li-card__connect { align-self: center; }
.li-card__body {
 padding: 4px 22px 6px;
 display: flex; flex-direction: column; gap: 4px;
}
.li-card__body strong {
 font-size: 20px; color: var(--navy); font-weight: 600; letter-spacing: -.01em;
}
.li-card__body > span { font-size: 14px; color: var(--text-mute); }
.li-card__meta { font-size: 12.5px !important; color: rgba(11,14,31,.55) !important; }
.li-card__connect {
 display: inline-flex; align-items: center; gap: 8px;
 margin-top: 14px;
 padding: 10px 16px;
 background: #0A66C2; color: var(--white);
 border-radius: 999px;
 font-weight: 500; font-size: 14px;
 align-self: flex-start;
 transition: background .2s var(--ease);
}
.li-card__connect svg { width: 16px; height: 16px; }
.social-preview--card:hover .li-card__connect { background: #004182; }

/* ═══════════════════════════════════════════════════════════
 v13: compact horizontal social rows (About page)
 Each row: thumb (left) + platform/handle/meta (middle) + CTA (right).
 Stacks vertically, no tall-and-empty tiles.
 ═══════════════════════════════════════════════════════════ */
.social-strip {
 max-width: 720px;
 margin: 0 auto;
 display: grid; gap: 16px;
}
.social-row {
 display: grid;
 grid-template-columns: 130px 1fr auto;
 gap: 22px;
 align-items: center;
 padding: 14px 22px 14px 14px;
 background: var(--white);
 border: 1px solid rgba(11,14,31,.08);
 border-radius: 18px;
 text-decoration: none;
 color: var(--navy);
 transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.social-row:hover {
 transform: translateY(-3px);
 box-shadow: 0 22px 40px -22px rgba(11,14,31,.25);
 border-color: rgba(0,232,143,.4);
}
.social-row__thumb {
 width: 130px; height: 130px;
 border-radius: 12px;
 overflow: hidden;
 background: #000;
 flex-shrink: 0;
}
.social-row__thumb img {
 width: 100%; height: 100%;
 object-fit: cover; object-position: center top;
 display: block;
}
/* LinkedIn thumb: show the whole portrait (head + shoulders) not tight face crop */
.social-row__thumb--li {
 background: linear-gradient(135deg, #0A66C2 0%, #004182 100%);
 padding: 0;
}
.social-row__thumb--li img {
 object-position: center 18%;
 object-fit: cover;
}
/* YouTube thumb: iframe fills the square */
.social-row__thumb--yt {
 background: #000;
 position: relative;
}
.social-row__thumb--yt iframe {
 position: absolute; inset: 0;
 width: 100%; height: 100%;
 border: 0;
 /* Zoom the iframe slightly so the video content fills without YouTube UI dominating */
 transform: scale(1.4);
 transform-origin: center;
}

.social-row__body {
 display: flex; flex-direction: column; gap: 4px;
 min-width: 0;
}
.social-row__platform {
 display: inline-flex; align-items: center; gap: 6px;
 font-size: 11.5px; font-weight: 600;
 color: var(--text-mute);
 letter-spacing: .06em;
 text-transform: uppercase;
}
.social-row__platform svg { width: 14px; height: 14px; }
.social-row__body strong {
 font-size: 18px; color: var(--navy);
 font-weight: 600; letter-spacing: -.01em;
 margin-top: 2px;
}
.social-row__meta {
 font-size: 13.5px; color: var(--text-mute);
 line-height: 1.4;
 overflow: hidden; text-overflow: ellipsis;
}
.social-row__cta {
 display: inline-flex; align-items: center; gap: 4px;
 font-weight: 500; font-size: 13.5px;
 color: var(--navy);
 white-space: nowrap;
}
.social-row__cta svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.social-row:hover .social-row__cta svg { transform: translate(2px, -2px); }

/* Platform-specific accents */
.social-row--ig .social-row__platform { color: #E1306C; }
.social-row--yt .social-row__platform { color: #FF0000; }
.social-row--li .social-row__platform { color: #0A66C2; }

@media (max-width: 620px) {
 .social-row { grid-template-columns: 96px 1fr; gap: 14px; padding: 12px; }
 .social-row__thumb { width: 96px; height: 96px; }
 .social-row__cta { grid-column: 2; margin-top: 4px; }
}

/* ═══════════════════════════════════════════════════════════
 v14: Spotify episode embed + taller video library
 ═══════════════════════════════════════════════════════════ */
.featured-podcast__frame--spotify {
 aspect-ratio: 16 / 5;
 min-height: 232px;
 max-height: 300px;
 background: #191414;
 border-radius: 12px;
}
.featured-podcast__frame--spotify iframe {
 width: 100%; height: 100%;
 border-radius: 12px;
 display: block;
}
@media (max-width: 700px) {
 .featured-podcast__frame--spotify { aspect-ratio: auto; height: 352px; }
}

.edu-playlist--tall {
 aspect-ratio: 16 / 10;
 max-width: 1180px;
}

/* ═══════════════════════════════════════════════════════════
 v14: HERO, split layout with Diana talking video (right)
 Replaces the video-background hero. Diana wants HER face front.
 ═══════════════════════════════════════════════════════════ */
.hero--split-diana {
 min-height: min(90vh, 780px);
 padding-block: clamp(90px, 12vh, 150px);
 position: relative;
 background:
 radial-gradient(1200px 600px at 20% 20%, rgba(123,0,255,.35), transparent 55%),
 radial-gradient(900px 500px at 80% 80%, rgba(0,232,143,.22), transparent 60%),
 linear-gradient(180deg, var(--navy) 0%, #12172d 100%);
 color: var(--white);
 overflow: hidden;
}
.hero__inner--split-diana {
 display: grid;
 grid-template-columns: 1.15fr .85fr;
 gap: 60px;
 align-items: center;
 position: relative; z-index: 2;
}
.hero__col--copy { position: relative; z-index: 2; }
.hero__col--copy .hero__title { color: var(--white); }
.hero__col--copy .hero__sub { color: rgba(255,255,255,.75); max-width: 500px; }

.hero__col--video { position: relative; z-index: 2; display: flex; justify-content: center; }
.hero-video-card {
 position: relative;
 width: 100%;
 max-width: 380px;
 aspect-ratio: 9/16;
 max-height: 640px;
 border-radius: 26px;
 overflow: hidden;
 background: #000;
 box-shadow: 0 40px 80px -20px rgba(0,0,0,.7), 0 0 0 8px rgba(255,255,255,.06);
 border: 3px solid rgba(255,255,255,.1);
}
.hero-video-card video {
 width: 100%; height: 100%;
 object-fit: cover;
 display: block;
}
.hero-video-card__meta {
 position: absolute; left: 16px; right: 16px; bottom: 16px;
 padding: 12px 16px;
 background: rgba(11,14,31,.78);
 backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
 border: 1px solid rgba(255,255,255,.12);
 border-radius: 14px;
 color: var(--white);
}
.hero-video-card__meta strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.hero-video-card__meta span { display: block; color: rgba(255,255,255,.65); font-size: 12.5px; margin-top: 3px; }

@media (max-width: 900px) {
 .hero__inner--split-diana { grid-template-columns: 1fr; gap: 44px; }
 .hero-video-card { max-width: 300px; margin: 0 auto; }
}

/* Make the socials section bigger + grander on About */
.socials-live { padding-block: clamp(90px, 10vw, 140px); }
.socials-live .section-head--center h2 { font-size: clamp(36px, 4.5vw, 60px); }
.social-strip { max-width: 820px; gap: 20px; }
.social-row {
 grid-template-columns: 160px 1fr auto;
 gap: 28px;
 padding: 20px 26px 20px 20px;
 border-radius: 22px;
}
.social-row__thumb { width: 160px; height: 160px; border-radius: 14px; }
.social-row__body strong { font-size: 22px; }
.social-row__platform { font-size: 12.5px; }
.social-row__meta { font-size: 14.5px; }
.social-row__cta { font-size: 15px; font-weight: 600; }
@media (max-width: 620px) {
 .social-row { grid-template-columns: 110px 1fr; gap: 16px; padding: 14px; }
 .social-row__thumb { width: 110px; height: 110px; }
}

/* ═══════════════════════════════════════════════════════════
 v15: Hero video card, YouTube (landscape 16:9) variant
 ═══════════════════════════════════════════════════════════ */
.hero-video-card--yt {
 max-width: 560px;
 aspect-ratio: 16 / 9;
 max-height: none;
 border-radius: 20px;
}
.hero-video-card--yt iframe {
 width: 100%; height: 100%;
 border: 0;
 display: block;
}
.hero-video-card--yt .hero-video-card__meta {
 /* Push meta below the iframe so it doesn't cover YouTube controls */
 position: static;
 margin-top: 12px;
 background: rgba(11,14,31,.55);
}
/* Re-balance the split grid now that the video is landscape (wider), copy narrower */
.hero__inner--split-diana { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
 .hero__inner--split-diana { grid-template-columns: 1fr; }
 .hero-video-card--yt { max-width: 480px; margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════
 v16: Jaff reels wall (home page, between Team and Stats)
 Three vertical reels side by side, silent, looping, muted.
 Overlay heading + follow CTA sits on top.
 ═══════════════════════════════════════════════════════════ */
.reels-wall {
 position: relative;
 background: var(--navy);
 overflow: hidden;
 isolation: isolate;
}
.reels-wall__row {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 height: clamp(320px, 42vw, 520px);
}
.reels-wall__tile {
 position: relative;
 overflow: hidden;
 background: #000;
}
.reels-wall__tile video {
 width: 100%; height: 100%;
 object-fit: cover;
 display: block;
 filter: brightness(0.72);
}
.reels-wall__overlay {
 position: absolute;
 inset: 0;
 z-index: 2;
 display: flex; flex-direction: column;
 align-items: center; justify-content: center;
 text-align: center;
 gap: 14px;
 padding: 40px 24px;
 background:
 radial-gradient(700px 420px at 50% 50%, rgba(11,14,31,.35), rgba(11,14,31,.55) 60%, transparent 90%);
 pointer-events: none;
}
.reels-wall__overlay > * { pointer-events: auto; }
.reels-wall__overlay h3 {
 color: var(--white);
 font-size: clamp(28px, 3.6vw, 46px);
 font-weight: 700;
 line-height: 1.05;
 letter-spacing: -.02em;
 max-width: 560px;
}
.reels-wall__overlay .eyebrow--cream { color: rgba(255,255,255,.75); }
.reels-wall__overlay .btn { margin-top: 4px; }
@media (max-width: 700px) {
 .reels-wall__row { grid-template-columns: repeat(3, 1fr); height: 280px; }
 .reels-wall__overlay h3 { font-size: 22px; }
}

/* v16: 6-item Diana Recognition gallery on What We Do */
.diana-gallery--6 {
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: 320px 320px;
 gap: 16px;
}
.diana-gallery--6 .diana-gallery__item--tall {
 grid-row: span 2;
 grid-template-rows: 656px;
}
@media (max-width: 900px) {
 .diana-gallery--6 {
 grid-template-columns: 1fr 1fr;
 grid-template-rows: repeat(auto, 260px);
 }
 .diana-gallery--6 .diana-gallery__item--tall { grid-row: span 1; grid-column: span 2; }
}
@media (max-width: 560px) {
 .diana-gallery--6 { grid-template-columns: 1fr; }
 .diana-gallery--6 .diana-gallery__item--tall { grid-column: span 1; }
}

/* ═══════════════════════════════════════════════════════════
 v17: HERO, full-width video background variant
 Diana video loops behind heading + CTAs. Content overlays.
 ═══════════════════════════════════════════════════════════ */
.hero--bg-video {
 position: relative;
 min-height: min(92vh, 820px);
 padding-block: clamp(90px, 12vh, 160px);
 background: var(--navy);
 color: var(--white);
 overflow: hidden;
 isolation: isolate;
}
.hero__video-bg {
 position: absolute; inset: 0; z-index: 0;
 overflow: hidden;
}
.hero__video-bg video {
 width: 100%; height: 100%;
 object-fit: cover; object-position: center;
 display: block;
 filter: brightness(0.85);
}
.hero__video-tint {
 position: absolute; inset: 0;
 background:
 linear-gradient(180deg, rgba(11,14,31,.35) 0%, rgba(11,14,31,.65) 65%, rgba(11,14,31,.85) 100%),
 radial-gradient(700px 400px at 18% 30%, rgba(123,0,255,.45), transparent 60%),
 radial-gradient(700px 400px at 80% 80%, rgba(0,232,143,.28), transparent 60%);
}
.hero--bg-video .hero__inner--center {
 position: relative; z-index: 2;
 max-width: 820px; margin: 0 auto;
 text-align: center;
 display: flex; flex-direction: column; align-items: center;
 gap: 22px;
}
.hero--bg-video .hero__title { color: var(--white); font-size: clamp(44px, 6vw, 84px); }
.hero--bg-video .hero__sub { color: rgba(255,255,255,.85); max-width: 620px; margin: 0 auto; }
.hero--bg-video .hero__ctas { justify-content: center; }

/* ═══════════════════════════════════════════════════════════
 v17: Photo-background banner (infinity.com.au pattern)
 Full-width, dark overlay, content on top.
 ═══════════════════════════════════════════════════════════ */
.bg-banner {
 position: relative;
 padding-block: clamp(90px, 12vw, 160px);
 background-image: var(--bg-img);
 background-size: cover;
 background-position: center 30%;
 background-attachment: scroll; /* fixed can cause perf issues on mobile */
 color: var(--white);
 overflow: hidden;
 isolation: isolate;
}
.bg-banner__tint {
 position: absolute; inset: 0; z-index: 0;
 background:
 linear-gradient(180deg, rgba(11,14,31,.55) 0%, rgba(11,14,31,.75) 100%),
 radial-gradient(700px 400px at 20% 30%, rgba(123,0,255,.35), transparent 60%);
}
.bg-banner__inner {
 position: relative; z-index: 1;
 max-width: 820px; margin: 0 auto;
 text-align: center;
 display: flex; flex-direction: column; align-items: center;
 gap: 16px;
}
.bg-banner__inner h2 {
 color: var(--white);
 font-size: clamp(32px, 4.5vw, 56px);
 line-height: 1.05;
 letter-spacing: -.02em;
}
.bg-banner__inner .eyebrow--cream { color: rgba(255,255,255,.7); }
.bg-banner__inner p {
 color: rgba(255,255,255,.8);
 font-size: 17px; line-height: 1.55;
 max-width: 640px;
}
.bg-banner__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }

/* v46: Video-background banner variant — silent looping <video> replaces
  the static bg-image. Uses the same tint + copy layout. */
.bg-banner--video { background-image: none; }
.bg-banner--video .bg-banner__video {
 position: absolute; inset: 0;
 width: 100%; height: 100%;
 object-fit: cover;
 object-position: center 40%;
 z-index: -1;
 pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
 v18: HERO, YouTube iframe as full-bleed background
 Scale iframe larger than viewport so YouTube UI + black bars
 hide off-screen.
 ═══════════════════════════════════════════════════════════ */
.hero--bg-yt .hero__video-bg {
 position: absolute; inset: 0;
 overflow: hidden;
 pointer-events: none;
}
.hero__yt-bg {
 position: absolute;
 top: 50%; left: 50%;
 /* Cover: whichever axis is bigger, iframe scales to fill.
 Using calc so 16:9 iframe always covers a 21:9 or 9:16 viewport. */
 width: 177.78vh; /* 100vh * (16/9) */
 min-width: 100vw;
 height: 56.25vw; /* 100vw * (9/16) */
 min-height: 100vh;
 /* v34: scale back up to 1.5 so YouTube's title/author bar and progress bar are
  pushed off the top/bottom of the viewport. Chrome shows in the first few
  seconds and there's no URL param that reliably kills it. Feathered mask
  handles horizontal edges. */
 transform: translate(-50%, -50%) scale(1.5);
 border: 0;
 pointer-events: none;
 /* v34: mask only feathers the sides gently (95% wide inner solid) — keeps the
  video full-bleed top/bottom while softening vertical seams into the tint. */
 -webkit-mask-image: radial-gradient(ellipse 92% 100% at 50% 50%, #000 70%, transparent 100%);
 mask-image: radial-gradient(ellipse 92% 100% at 50% 50%, #000 70%, transparent 100%);
 /* v35: iframe visible from load; poster overlay hides YouTube chrome */
 opacity: 1;
}
.hero__yt-bg.is-ready { opacity: 1; }
/* v46: self-hosted <video> variant — native element, no chrome to hide */
.hero__bg-mp4 {
 position: absolute;
 top: 50%; left: 50%;
 width: 100%; height: 100%;
 min-width: 100vw; min-height: 100vh;
 object-fit: cover;
 object-position: center 30%;
 transform: translate(-50%, -50%);
 border: 0;
 pointer-events: none;
 opacity: 1;
 mask-image: none;
 -webkit-mask-image: none;
}
/* v51: zoom-in variant for biz brother clip so Diana is bigger in frame.
  If Diana ends up on the wrong side, tweak object-position X value. */
.hero__bg-mp4--zoom {
 transform: translate(-50%, -50%) scale(1.35);
 object-position: 60% center;
}
/* v63: shift the visible frame up so we see above the subject's head */
.hero__bg-mp4--top {
 object-position: center top;
}
/* Diana v70: real fix. object-position was a no-op (video and container
  share aspect ratio so cover crops nothing). Translate the video element
  DOWN so Diana's face sits lower in the visible frame. The container has
  overflow:hidden so the extra spilling above/below is clipped. */
.hero__bg-mp4--face {
 /* Base has: transform: translate(-50%, -50%). Adding translateY(15%)
    after moves the video down by 15% of its own height. */
 transform: translate(-50%, -50%) translateY(15%) !important;
 /* Also stretch the height so shifting down doesn't reveal empty space
    above the video. */
 min-height: 130vh !important;
}

/* Diana v67: Home page FAQ block (moved from Contact) */
.home-faq {
 padding-block: clamp(80px, 10vw, 130px);
}
.home-faq__inner {
 max-width: 900px !important;
 text-align: left !important;
 align-items: stretch !important;
}
.home-faq__inner .eyebrow--cream { text-align: center; }
.home-faq__inner h2 { text-align: center; margin-bottom: 30px; }
.home-faq__list {
 display: flex; flex-direction: column; gap: 14px;
 width: 100%; margin-top: 10px;
}
.home-faq__item {
 background: rgba(255,255,255,.06);
 border: 1px solid rgba(255,255,255,.15);
 border-radius: 14px;
 padding: 4px 22px;
 transition: background .2s var(--ease);
}
.home-faq__item[open] { background: rgba(255,255,255,.1); }
.home-faq__item summary {
 cursor: pointer; list-style: none;
 padding: 18px 34px 18px 0;
 position: relative;
 color: var(--white); font-weight: 600; font-size: 17px;
 letter-spacing: -.01em;
}
.home-faq__item summary::-webkit-details-marker { display: none; }
.home-faq__item summary::after {
 content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
 font-size: 24px; color: var(--green); font-weight: 300;
 transition: transform .2s var(--ease);
}
.home-faq__item[open] summary::after { content: "−"; }
.home-faq__body {
 padding: 4px 0 18px;
 color: rgba(255,255,255,.85);
}
.home-faq__body p {
 font-size: 15px; line-height: 1.6; margin-bottom: 10px;
 color: rgba(255,255,255,.85);
}
.home-faq__body p:last-child { margin-bottom: 0; }
.home-faq .bg-banner__ctas { margin-top: 30px; justify-content: center; }

/* Diana v68: YouTube thumbnail tile with a small play badge */
.diana-gallery__item--yt {
 display: block; position: relative;
 text-decoration: none; color: inherit;
}
.diana-gallery__yt-play {
 position: absolute; top: 50%; left: 50%;
 transform: translate(-50%, -50%);
 width: 60px; height: 60px; border-radius: 50%;
 background: rgba(255,0,51,.92); color: #fff;
 display: flex; align-items: center; justify-content: center;
 box-shadow: 0 14px 34px -10px rgba(0,0,0,.55);
 transition: transform .3s var(--ease);
}
.diana-gallery__item--yt:hover .diana-gallery__yt-play { transform: translate(-50%, -50%) scale(1.08); }
.diana-gallery__yt-play svg { width: 26px; height: 26px; margin-left: 3px; }

/* Diana v68: plain text-only award placeholder card (until real badges arrive) */
.diana-gallery__item--award-plain {
 display: flex; align-items: center; justify-content: center;
 background: linear-gradient(160deg, #0B0E1F 0%, #12183a 100%);
}
.diana-gallery__item--award-plain .award-plain {
 padding: 30px 26px; text-align: center; color: var(--white);
 display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.diana-gallery__item--award-plain .eyebrow--award {
 font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
 color: rgba(255,255,255,.6);
}
.diana-gallery__item--award-plain strong {
 display: block; font-size: 22px; font-weight: 700; line-height: 1.15;
 letter-spacing: -.01em; color: var(--white);
}

/* Diana v67: award-badge tiles in the Recognition gallery */
.diana-gallery__item--award {
 display: flex; align-items: center; justify-content: center;
 background: linear-gradient(135deg, var(--purple) 0%, #4A00A8 60%, var(--navy) 100%);
 color: var(--white);
}
.diana-gallery__item--award-b { background: linear-gradient(135deg, #00E88F 0%, #00A468 60%, var(--navy) 100%); }
.diana-gallery__item--award-c { background: linear-gradient(135deg, #F5F3EE 0%, #C9C1AC 60%, var(--navy) 100%); color: var(--navy); }
.diana-gallery__item--award .award-badge {
 display: flex; flex-direction: column; align-items: center; text-align: center;
 padding: 30px 20px;
}
.diana-gallery__item--award .award-badge svg {
 width: 62px; height: 62px; margin-bottom: 12px;
 opacity: .95;
}
.diana-gallery__item--award .award-badge strong {
 display: block; font-size: 20px; font-weight: 700; letter-spacing: -.01em;
 line-height: 1.15; margin-bottom: 4px;
}
.diana-gallery__item--award .award-badge span {
 font-size: 12px; text-transform: uppercase; letter-spacing: .18em; opacity: .85;
}
/* v55: object-position had no effect because the video and container
  are the same aspect ratio, so cover crops nothing. Instead, use an
  explicit horizontal translate AFTER scale to shift the visible frame.
  translateX positive → video moves RIGHT → exposes LEFT of source
  (where Diana is). */
.hero__bg-mp4--shift-left {
 transform: translate(-50%, -50%) scale(1.4) translateX(18%);
 object-position: center center;
}
.hero--bg-yt .hero__video-tint {
 /* v43: fix z-index so tint actually sits ABOVE the poster (poster is z:1).
  Heavy all-over darkening + brand radials for the fallback overlay, plus
  an extra dark radial in the vertical centre-band where YouTube's pause
  controls appear — so even during the video reveal, controls are muted. */
 position: absolute; inset: 0;
 z-index: 3;
 pointer-events: none;
 background:
 radial-gradient(700px 380px at 50% 55%, rgba(11,14,31,.92), transparent 70%),
 linear-gradient(180deg, rgba(11,14,31,.9) 0%, rgba(11,14,31,.55) 22%, rgba(11,14,31,.7) 55%, rgba(11,14,31,.95) 100%),
 radial-gradient(760px 460px at 18% 28%, rgba(123,0,255,.55), transparent 60%),
 radial-gradient(760px 460px at 82% 82%, rgba(0,232,143,.4), transparent 60%),
 radial-gradient(500px 320px at 50% 100%, rgba(123,0,255,.35), transparent 65%);
}

/* ═══════════════════════════════════════════════════════════
 v19: What We Do "Specialise", big primary, small subhead
 Diana asked (08:04): make "What we specialise in" the huge
 heading, decade line becomes small paragraph subhead.
 ═══════════════════════════════════════════════════════════ */
/* Diana v61: heading a touch smaller, subhead a touch larger */
.specialise__hero-title {
 font-size: clamp(38px, 5vw, 64px) !important;
 line-height: 1;
 letter-spacing: -.02em;
 margin-bottom: 16px !important;
}
.specialise__hero-sub {
 font-size: clamp(15px, 1.6vw, 20px) !important;
 color: var(--white) !important;
 max-width: 720px;
 margin: 0 auto !important;
}
@media (max-width: 720px) {
 .specialise__hero-sub { white-space: normal !important; }
}

/* Featured video iframe */
.featured-video__iframe {
 width: 100%; height: 100%;
 border: 0; display: block;
 background: var(--navy);
}

/* Compact page hero (Education Hub asked to shrink) */
.page-hero--compact {
 min-height: auto !important;
 padding-block: clamp(60px, 8vh, 100px) !important;
}
.page-hero--compact .page-hero__inner { padding-block: 0 !important; }
.page-hero--compact h1 { font-size: clamp(40px, 5vw, 68px); margin-bottom: 8px; }

/* v19: photo badge variant (Jaff photo instead of svg icon on role card) */
.role-card__badge--photo {
 padding: 0; overflow: hidden;
 background: var(--cream-2);
 border: 2px solid var(--green);
}
.role-card__badge--photo img {
 width: 100%; height: 100%;
 object-fit: cover; object-position: center 20%;
 display: block;
}

/* ═══════════════════════════════════════════════════════════
 v20: Reels wall, 5 tiles + darker overlay so text pops
 ═══════════════════════════════════════════════════════════ */
.reels-wall--5 .reels-wall__row { grid-template-columns: repeat(5, 1fr); }
.reels-wall--6 .reels-wall__row { grid-template-columns: repeat(6, 1fr); }
.reels-wall__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.reels-wall--dark .reels-wall__tile video { filter: brightness(0.75); }
.reels-wall--dark .reels-wall__overlay {
 /* v56: overlay reduced by ~50% so reels show through more clearly */
 background:
 radial-gradient(900px 500px at 50% 50%, rgba(11,14,31,.08), rgba(11,14,31,.28) 55%, rgba(11,14,31,.4) 90%),
 linear-gradient(180deg, rgba(11,14,31,.18) 0%, rgba(11,14,31,.28) 100%);
}
@media (max-width: 900px) {
 .reels-wall--5 .reels-wall__row { grid-template-columns: repeat(3, 1fr); }
 /* Hide the extra two tiles on smaller screens to keep them from feeling squished */
 .reels-wall--5 .reels-wall__tile:nth-child(n+4) { display: none; }
 /* 6-tile variant: mobile shows 3, hiding the second row */
 .reels-wall--6 .reels-wall__row { grid-template-columns: repeat(3, 1fr); }
 .reels-wall--6 .reels-wall__tile:nth-child(n+4) { display: none; }
}

/* ═══════════════════════════════════════════════════════════
 v20: BG-banner PARALLAX (image stays as content scrolls)
 Uses background-attachment: fixed with a mobile fallback.
 ═══════════════════════════════════════════════════════════ */
.bg-banner {
 background-position: var(--bg-pos, center 30%);
}
.bg-banner--parallax {
 background-attachment: fixed;
}
/* iOS/mobile don't reliably support background-attachment: fixed, fall back to normal scroll */
@media (max-width: 900px), (hover: none) {
 .bg-banner--parallax { background-attachment: scroll; }
}

/* ═══════════════════════════════════════════════════════════
 v20: Ed Hub compact hero, MORE nav gap (Sam ask)
 ═══════════════════════════════════════════════════════════ */
.page-hero--compact {
 padding-block: clamp(96px, 12vh, 140px) clamp(50px, 6vh, 80px) !important;
}

/* ═══════════════════════════════════════════════════════════
 v20: Diana gallery, 5 items (was 6, removed orphan "events")
 Layout: tall left (span 2 rows) + 4 tiles in 2 rows of 2.
 ═══════════════════════════════════════════════════════════ */
.diana-gallery--6 {
 /* v56: clean 3×2 grid, all cells equal so all 6 tiles line up */
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: 320px 320px;
}
.diana-gallery--6 .diana-gallery__item--tall {
 grid-row: auto;
 grid-column: auto;
}
@media (max-width: 900px) {
 .diana-gallery--6 {
 grid-template-columns: 1fr 1fr;
 grid-template-rows: repeat(3, 260px);
 }
 .diana-gallery--6 .diana-gallery__item--tall { grid-row: auto; grid-column: auto; }
}

/* ═══════════════════════════════════════════════════════════
 v21: Live YouTube grid, Education Hub
 Auto-populated from Diana's channel RSS via rss2json.
 ═══════════════════════════════════════════════════════════ */
.yt-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
 min-height: 400px;
}
@media (max-width: 900px) { .yt-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .yt-grid { grid-template-columns: 1fr; } }

.yt-tile {
 display: flex; flex-direction: column;
 background: var(--white);
 border: 1px solid rgba(11,14,31,.08);
 border-radius: 16px;
 overflow: hidden;
 text-decoration: none;
 color: var(--navy);
 transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.yt-tile:hover {
 transform: translateY(-4px);
 box-shadow: 0 24px 46px -22px rgba(11,14,31,.28);
}
.yt-tile__thumb {
 position: relative;
 aspect-ratio: 16/9;
 background: #000;
 overflow: hidden;
}
.yt-tile__thumb img {
 width: 100%; height: 100%;
 object-fit: cover; display: block;
 transition: transform .5s var(--ease);
}
.yt-tile:hover .yt-tile__thumb img { transform: scale(1.05); }
.yt-tile__play {
 position: absolute;
 top: 50%; left: 50%;
 transform: translate(-50%, -50%);
 width: 62px; height: 62px;
 border-radius: 50%;
 background: rgba(255,0,0,.92);
 color: var(--white);
 display: grid; place-items: center;
 box-shadow: 0 12px 30px -10px rgba(0,0,0,.55);
 transition: transform .25s var(--ease);
}
.yt-tile:hover .yt-tile__play { transform: translate(-50%, -50%) scale(1.08); }
.yt-tile__play svg { width: 24px; height: 24px; margin-left: 3px; }

.yt-tile__body {
 padding: 16px 18px 18px;
 display: flex; flex-direction: column; gap: 6px;
 flex-grow: 1;
}
.yt-tile__body h3 {
 font-size: 15.5px; font-weight: 600;
 letter-spacing: -.005em;
 line-height: 1.35;
 color: var(--navy);
 /* Clamp to 3 lines */
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
 margin: 0;
}
.yt-tile__body span {
 font-size: 12.5px; color: var(--text-mute);
 margin-top: auto;
}

/* Skeleton placeholder while grid loads */
.yt-tile--skeleton {
 pointer-events: none;
 background: linear-gradient(90deg, rgba(11,14,31,.03) 0%, rgba(11,14,31,.08) 50%, rgba(11,14,31,.03) 100%);
 background-size: 200% 100%;
 animation: ytShimmer 1.6s linear infinite;
 border: 1px solid rgba(11,14,31,.04);
}
.yt-tile--skeleton .yt-tile__thumb { background: rgba(11,14,31,.05); }
.yt-tile--skeleton h3, .yt-tile--skeleton span {
 background: rgba(11,14,31,.06); border-radius: 4px;
 min-height: 12px;
}
.yt-tile--skeleton h3 { height: 34px; margin: 0; }
.yt-tile--skeleton span { width: 60%; height: 10px; }
@keyframes ytShimmer {
 0% { background-position: 200% 0; }
 100% { background-position: -200% 0; }
}

.yt-grid__note {
 max-width: 780px; margin: 40px auto 0;
 padding: 14px 18px;
 background: rgba(0,232,143,.08);
 border: 1px dashed rgba(0,232,143,.35);
 border-radius: 12px;
 font-size: 13.5px; color: var(--text-mute); text-align: center;
}
.yt-grid__note { color: var(--white); border-color: rgba(0,232,143,.55); background: rgba(0,232,143,.14); }
.yt-grid__note strong { color: var(--green); }
.yt-grid__fallback {
 grid-column: 1 / -1;
 text-align: center; padding: 40px;
 color: var(--text-mute);
}
.yt-grid__fallback a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* v34: "See more on YouTube" filler tile so the 12-tile grid is always full */
.yt-tile--channel .yt-tile__thumb--channel {
 background: linear-gradient(135deg, #0B0E1F 0%, #1a1f42 100%);
 display: flex; align-items: center; justify-content: center;
}
.yt-tile--channel .yt-tile__channel-icon {
 width: 62px; height: 62px;
 border-radius: 50%;
 background: #FF0033;
 color: #fff;
 display: flex; align-items: center; justify-content: center;
 box-shadow: 0 12px 32px -12px rgba(255,0,51,.6);
}
.yt-tile--channel .yt-tile__channel-icon svg { width: 34px; height: 34px; margin-left: 2px; }
.yt-tile--channel .yt-tile__body h3 { color: var(--navy); }
.yt-tile--channel .yt-tile__body span { color: var(--text-mute); font-size: 12.5px; }

/* ═══════════════════════════════════════════════════════════
   v22: Page-hero YouTube video background variant
   Replaces the coloured gradient banner on inner pages with a
   Diana YouTube video looping behind the heading + copy.
   Sam ask: "on coloured sections she wants a youtube video
   looping behind her as the banner image".
   ═══════════════════════════════════════════════════════════ */
.page-hero--yt {
 position: relative;
 background: var(--navy);
 color: var(--white);
 overflow: hidden;
 isolation: isolate;
 padding-block: clamp(110px, 14vh, 180px) clamp(80px, 10vh, 130px);
}
.page-hero--yt .page-hero__yt-bg {
 position: absolute; inset: 0; z-index: 0;
 overflow: hidden;
 pointer-events: none;
}
.page-hero--yt .page-hero__yt-iframe {
 position: absolute;
 top: 50%; left: 50%;
 width: 177.78vh;
 min-width: 100vw;
 height: 56.25vw;
 min-height: 100vh;
 /* v34: scale up to 1.5 so YouTube's title bar (top) and progress bar (bottom)
  are pushed off the viewport — no URL param reliably hides them.
  v38: --yt-y-offset lets a single page shift the video content up/down so
  Diana's face lands where we want (positive vh = face appears lower). */
 transform: translate(-50%, calc(-50% + var(--yt-y-offset, 0px))) scale(1.5);
 border: 0;
 pointer-events: none;
 /* v34: gentle side feather only, kept full-bleed vertically */
 -webkit-mask-image: radial-gradient(ellipse 92% 100% at 50% 50%, #000 70%, transparent 100%);
 mask-image: radial-gradient(ellipse 92% 100% at 50% 50%, #000 70%, transparent 100%);
 /* v35: iframe visible from load; poster overlay hides YouTube chrome */
 opacity: 1;
}
.page-hero--yt .page-hero__yt-iframe.is-ready { opacity: 1; }

/* v35: Poster overlay — a Diana still that COVERS the iframe until we
  confirm the YouTube video is playing. If autoplay is blocked
  (Safari, low-power mode, ad blocker), the poster stays forever
  so users never see YouTube's title bar or pause controls.
  z-index sits above iframe (z 0) and below tint (which has no z but
  is drawn after in DOM). We add it before the tint in HTML so tint
  covers it. Overrides the tint underneath by opacity fade. */
.page-hero--yt .page-hero__yt-poster {
 position: absolute; inset: 0;
 background-color: #0B0E1F; /* v45: opaque navy under the image so div is
   never transparent, even if the image hasn't loaded yet */
 background-size: cover;
 background-position: center 25%;
 background-repeat: no-repeat;
 z-index: 1;
 opacity: 1;
 transition: opacity 800ms ease-out;
 pointer-events: none;
}
.page-hero--yt .page-hero__yt-poster.is-hidden { opacity: 0; }

/* v38: Branded poster fallback — Ascendra navy with green + purple accents,
  used on pages where a Diana still doesn't crop nicely. */
.page-hero--yt .page-hero__yt-poster--brand {
 background:
 radial-gradient(circle at 22% 32%, rgba(123,0,255,.55), transparent 55%),
 radial-gradient(circle at 78% 72%, rgba(0,232,143,.42), transparent 55%),
 radial-gradient(circle at 50% 100%, rgba(123,0,255,.35), transparent 60%),
 linear-gradient(160deg, #0B0E1F 0%, #11143a 55%, #0B0E1F 100%);
 background-color: #0B0E1F;
}
.hero__video-bg .hero__yt-poster {
 position: absolute; inset: 0;
 background-color: #0B0E1F; /* v45: opaque navy under the image so div is
   never transparent, even if the image hasn't loaded yet */
 background-size: cover;
 background-position: center 25%;
 z-index: 1;
 opacity: 1;
 transition: opacity 800ms ease-out;
 pointer-events: none;
}
.hero__video-bg .hero__yt-poster.is-hidden { opacity: 0; }
.page-hero--yt .page-hero__yt-tint {
 position: absolute; inset: 0;
 /* v43: z-index above the poster (which is z:1) + centre darkening radial
  to obscure YouTube pause controls when the video reveals.
  v45: centre radial bumped to .92 opacity — Sam still saw the pause
  button flash at reveal. */
 z-index: 3;
 pointer-events: none;
 background:
 radial-gradient(600px 320px at 50% 55%, rgba(11,14,31,.65), transparent 65%),
 linear-gradient(180deg, rgba(11,14,31,.9) 0%, rgba(11,14,31,.45) 20%, rgba(11,14,31,.75) 60%, rgba(11,14,31,.9) 100%),
 radial-gradient(700px 400px at 20% 30%, rgba(123,0,255,.4), transparent 60%),
 radial-gradient(700px 400px at 80% 80%, rgba(0,232,143,.24), transparent 60%);
}
.page-hero--yt .page-hero__inner { position: relative; z-index: 2; }
.page-hero--yt h1 { color: var(--white); }
.page-hero--yt .page-hero__lede { color: rgba(255,255,255,.85); }
.page-hero--yt .breadcrumb,
.page-hero--yt .breadcrumb a { color: rgba(255,255,255,.6); }
.page-hero--yt .breadcrumb a:hover { color: var(--white); }

/* ═══════════════════════════════════════════════════════════
   LMG COMPLIANCE (v74): legal pages, calculator disclaimer,
   individual credit-rep line on team profiles
   ═══════════════════════════════════════════════════════════ */
.legal-page__body {
 max-width: 820px; margin: 0 auto;
 color: var(--white);
}
.legal-page__body h2 {
 font-size: clamp(22px, 2.4vw, 30px);
 line-height: 1.2; letter-spacing: -.01em;
 color: var(--white);
 margin: 42px 0 14px;
}
.legal-page__body h2:first-of-type { margin-top: 8px; }
.legal-page__body p,
.legal-page__body li {
 font-size: 16px; line-height: 1.65;
 color: rgba(255,255,255,.86);
}
.legal-page__body p { margin-bottom: 14px; }
.legal-page__body ul { margin: 0 0 20px 0; padding-left: 22px; }
.legal-page__body li { margin-bottom: 6px; }
.legal-page__body a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.legal-page__body a:hover { color: var(--white); }
.legal-page__body strong { color: var(--white); }
.legal-page__body em { color: rgba(255,255,255,.7); font-style: italic; }
.legal-page__meta {
 font-size: 13.5px !important;
 color: rgba(255,255,255,.6) !important;
 letter-spacing: .02em;
 margin-bottom: 24px !important;
}

/* Calculator disclaimer block */
.calc-disclaimer {
 padding: 40px 0 60px;
 background: var(--cream);
}
.calc-disclaimer__box {
 max-width: 960px; margin: 0 auto;
 padding: 28px 32px;
 background: rgba(11,14,31,.04);
 border: 1px dashed rgba(11,14,31,.2);
 border-radius: 14px;
}
.calc-disclaimer__box h3 {
 font-size: 18px; margin-bottom: 12px;
 letter-spacing: -.01em; color: var(--navy);
}
.calc-disclaimer__box p {
 font-size: 14px; line-height: 1.6; color: var(--text-mute);
 margin-bottom: 10px;
}
.calc-disclaimer__box p:last-child { margin-bottom: 0; }
.calc-disclaimer__warning {
 padding: 12px 14px; margin-top: 6px !important;
 background: rgba(255,90,110,.08);
 border-left: 3px solid #FF5A6E;
 border-radius: 4px;
}
.calc-disclaimer__warning strong { color: #E13B4E; }

/* Individual credit representative disclosure line on About team cards */
.leader-card__cra {
 font-size: 12px !important;
 line-height: 1.5 !important;
 color: rgba(255,255,255,.55) !important;
 margin-top: 12px !important;
 margin-bottom: 12px !important;
 padding-top: 12px;
 border-top: 1px dashed rgba(255,255,255,.15);
}


/* V2 variants */
.bg-banner--brand { background: radial-gradient(700px 400px at 20% 25%, rgba(123,0,255,.55), transparent 62%), radial-gradient(700px 400px at 82% 78%, rgba(0,232,143,.35), transparent 62%), linear-gradient(160deg, #0B0E1F 0%, #12183a 55%, #0B0E1F 100%) !important; background-attachment: scroll !important; }
.bg-banner--brand .bg-banner__tint { display: none; }
.featured-video--brand { background: radial-gradient(700px 400px at 20% 25%, rgba(123,0,255,.55), transparent 62%), radial-gradient(700px 400px at 82% 78%, rgba(0,232,143,.35), transparent 62%), linear-gradient(160deg, #0B0E1F 0%, #12183a 55%, #0B0E1F 100%) !important; }