/* ============================================
   ESLANCER — Private Equity & Corporate Advisory
   Editorial design system: ivory · navy · gold
   ============================================ */

/* ===== Tokens ===== */
:root {
    /* Palette */
    --ivory: #F4F1EA;
    --ivory-soft: #ECE7DA;
    --ink: #14181F;
    --ink-soft: #20262F;
    --navy: #16243B;
    --navy-mid: #1F3350;
    --navy-deep: #0E1A2E;
    --gold: #B68A4E;
    --gold-soft: #D8B97E;
    --gold-deep: #946B33;
    --rule: #DBD4C4;
    --rule-strong: #C2B89F;
    --muted: #6A6759;
    --secondary: #E7E1D2;
    --white: #FFFFFF;

    /* Semantic */
    --background: var(--white);
    --surface: var(--white);
    --hover: rgba(22, 36, 59, 0.04);
    --foreground: var(--ink);
    --muted-foreground: var(--muted);
    --border: var(--rule);

    /* Typography */
    --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 0.18s var(--ease);
    --t: 0.36s var(--ease);
    --t-slow: 0.7s var(--ease);

    /* Layout */
    --edge: clamp(20px, 5vw, 56px);
    --container-max: 1320px;
    --section-y: clamp(80px, 12vw, 168px);
    --section-y-sm: clamp(56px, 8vw, 112px);
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "kern";
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--foreground);
    background: var(--background);
    overflow-x: hidden;
    font-weight: 400;
}

::selection { background: var(--navy); color: var(--ivory); }

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* Display heading defaults */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--foreground);
}

em, .italic { font-style: italic; font-family: var(--font-display); }

/* ===== Container ===== */
.container-edit {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--edge);
    padding-right: var(--edge);
}

/* ===== Eyebrow label (— Tag / Subtitle) ===== */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    font-weight: 500;
    display: inline-block;
}

/* ===== Buttons ===== */
.btn-primary,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1;
    transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
    border-radius: 0;
    white-space: nowrap;
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--navy);
    color: var(--ivory);
}
.btn-primary:hover { background: var(--gold); color: var(--ink); }
.btn-primary:active { transform: translateY(1px); }

.btn-ghost {
    background: transparent;
    color: var(--navy);
    border-color: var(--navy);
}
.btn-ghost:hover { background: var(--navy); color: var(--ivory); }

/* Link with arrow underline */
.link-underline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--navy);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--navy);
    transition: color var(--t-fast), border-color var(--t-fast);
}
.link-underline:hover { color: var(--gold-deep); border-bottom-color: var(--gold); }

/* ===== Rules / dividers ===== */
.rule-top { border-top: 1px solid var(--rule); }
.rule-bottom { border-bottom: 1px solid var(--rule); }

/* ===== Header (two-tier: navy utility bar + white main bar) ===== */
:root {
    --topbar-h: 0px;                 /* utility bar hidden on mobile */
    --mainbar-h: 82px;
    --header-h: calc(var(--topbar-h) + var(--mainbar-h));
    --logo-indent: 50px;             /* aligns the slogan under the wordmark */
}
@media (min-width: 880px) {
    :root {
        --topbar-h: 44px;
        --mainbar-h: 98px;
        --logo-indent: 60px;
    }
}

body { padding-top: var(--header-h); }

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: transform var(--t);
}
.site-header.header-hidden { transform: translateY(-100%); }

/* --- Utility bar (desktop only) --- */
.site-topbar {
    display: none;
    height: var(--topbar-h);
    background: var(--navy-deep);
}
@media (min-width: 880px) { .site-topbar { display: block; } }
.site-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: var(--topbar-h);
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--edge);
    padding-right: var(--edge);
}
.topbar-links {
    display: flex;
    align-items: center;
    gap: 30px;
}
.topbar-links a {
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0.03em;
    color: rgba(244, 241, 234, 0.82);
    transition: color var(--t-fast);
}
.topbar-links a:hover { color: var(--gold-soft); }

/* --- Main bar --- */
.site-header-main {
    background: var(--white);
    border-bottom: 1px solid var(--rule);
}
.site-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    height: var(--mainbar-h);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--edge);
    padding-right: var(--edge);
}

.site-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    grid-column: 1;
    justify-self: start;
    color: var(--navy);
}
.site-logo-img {
    display: block;
    height: 40px;
    width: auto;
}
@media (min-width: 880px) {
    .site-logo-img { height: 48px; }
}
.site-logo-slogan {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.01em;
    color: var(--gold-deep);
    white-space: nowrap;
}
@media (min-width: 880px) {
    .site-logo-slogan { font-size: 13px; }
}

.site-nav {
    display: none;
    align-items: center;
    grid-column: 2;
    justify-self: center;
    gap: clamp(20px, 2.2vw, 38px);
}
@media (min-width: 880px) {
    .site-nav { display: flex; }
}
.site-nav a {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--navy);
    transition: color var(--t-fast);
    position: relative;
    white-space: nowrap;
}
.site-nav a:hover { color: var(--gold-deep); }
.site-nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    background: var(--gold);
}

.site-header-right {
    display: flex;
    align-items: center;
    grid-column: 3;
    justify-self: end;
    gap: 16px;
}

.site-cta {
    display: none;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--navy);
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 0;
    padding: 11px 22px;
    line-height: 1;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.site-cta:hover { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
@media (min-width: 880px) {
    .site-cta { display: inline-flex; }
}

/* Mobile hamburger — plain three-line icon morphing to a close (X). */
.menu-toggle-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.menu-toggle-icon {
    position: relative;
    display: block;
    width: 30px;
    height: 2px;
    background: var(--navy);
    transition: background var(--t-fast);
}
.menu-toggle-icon::before,
.menu-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--navy);
    transition: transform var(--t-fast), top var(--t-fast);
}
.menu-toggle-icon::before { top: -9px; }
.menu-toggle-icon::after { top: 9px; }
.menu-toggle-mobile.active .menu-toggle-icon { background: transparent; }
.menu-toggle-mobile.active .menu-toggle-icon::before { top: 0; transform: rotate(45deg); }
.menu-toggle-mobile.active .menu-toggle-icon::after { top: 0; transform: rotate(-45deg); }
@media (min-width: 880px) {
    .menu-toggle-mobile { display: none; }
}

/* Mobile menu (overlay panel) */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--surface);
    z-index: 45;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--t), transform var(--t), visibility var(--t);
    pointer-events: none;
    overflow-y: auto;
}
.mobile-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.mobile-menu-list {
    display: flex;
    flex-direction: column;
    padding: 120px var(--edge) 48px;
    gap: 8px;
}
.mobile-menu-list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: 23px;
    color: var(--ink);
    transition: color var(--t-fast);
}
.mobile-menu-list a:hover { color: var(--gold-deep); }
.mobile-menu-list a::after {
    content: "→";
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--muted);
}

/* ===== Hero ===== */
.hero {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;      /* anchor the headline to the lower band */
    isolation: isolate;
    background: var(--navy-deep);
    border-bottom: 1px solid var(--rule);
}
/* Legibility scrim — light at the top so the glass header stays readable over
   the sky, deepening toward the headline anchored at the bottom. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(14, 26, 46, 0.22) 0%,
        rgba(14, 26, 46, 0.00) 24%,
        rgba(14, 26, 46, 0.34) 52%,
        rgba(14, 26, 46, 0.72) 76%,
        rgba(14, 26, 46, 0.93) 100%
    );
}
.hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: clamp(120px, 18vh, 220px);
    padding-bottom: clamp(44px, 7vh, 84px);
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: end;
}
@media (min-width: 880px) {
    .hero-grid {
        grid-template-columns: repeat(12, 1fr);
        gap: 40px;
    }
}
.hero-main { grid-column: 1 / -1; }
.hero-side {
    grid-column: 1 / -1;
}
@media (min-width: 880px) {
    .hero-main { grid-column: 1 / span 9; }
    .hero-side {
        grid-column: 10 / span 3;
        padding-left: 24px;
        border-left: 1px solid var(--rule);
    }
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(42px, 8vw, 100px);
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--foreground);
    margin-top: 28px;
}
.hero-title em {
    font-style: italic;
    color: var(--gold-deep);
}
.hero-subtitle {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 36px);
    line-height: 1.14;
    letter-spacing: -0.005em;
    color: rgba(20, 24, 31, 0.62);
    margin-top: 28px;
    max-width: 56ch;
}
.hero-subtitle strong { color: var(--foreground); font-weight: 400; }

.hero-side p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted-foreground);
}
.hero-actions {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ===== Hero — reversed-out treatment over the full-bleed photograph ===== */
.hero .eyebrow { color: rgba(244, 241, 234, 0.82); }
.hero-title { color: var(--ivory); }
.hero-title em { color: var(--gold-soft); }
.hero-subtitle { color: rgba(244, 241, 234, 0.74); }
.hero-subtitle strong { color: var(--ivory); }
.hero-side { border-left-color: rgba(244, 241, 234, 0.22); }
.hero-side p { color: rgba(244, 241, 234, 0.74); }

.hero .btn-primary { background: var(--ivory); color: var(--navy); }
.hero .btn-primary:hover { background: var(--gold); color: var(--ink); }
.hero .btn-ghost { color: var(--ivory); border-color: rgba(244, 241, 234, 0.5); }
.hero .btn-ghost:hover { background: var(--ivory); color: var(--navy); border-color: var(--ivory); }

/* ===== Stats strip ===== */
.stats-strip {
    border-top: 1px solid var(--rule);
}
.stats-strip-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 880px) {
    .stats-strip-inner { grid-template-columns: repeat(4, 1fr); }
}
.stat-cell {
    padding: 32px clamp(16px, 2vw, 32px);
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
@media (min-width: 880px) {
    .stat-cell { border-bottom: 0; }
    .stat-cell:last-child { border-right: 0; }
}
.stat-cell:nth-child(even) {
    border-right: 0;
}
@media (min-width: 880px) {
    .stat-cell:nth-child(even) { border-right: 1px solid var(--rule); }
    .stat-cell:last-child { border-right: 0; }
}
.stat-number {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--navy);
}
.stat-label {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted-foreground);
}

/* ===== Ticker ===== */
.ticker {
    background: var(--navy);
    color: var(--ivory);
    border-top: 1px solid var(--navy-deep);
    border-bottom: 1px solid var(--navy-deep);
    overflow: hidden;
}
.ticker-inner {
    display: flex;
    align-items: center;
    gap: 56px;
    padding: 20px var(--edge);
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    animation: tickerScroll 38s linear infinite;
}
.ticker-inner span {
    display: inline-flex;
    align-items: center;
    gap: 56px;
    opacity: 0.9;
}
.ticker-inner .dot { color: var(--gold-soft); opacity: 1; }

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ===== Section common ===== */
.section {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
}
.section-sm {
    padding-top: var(--section-y-sm);
    padding-bottom: var(--section-y-sm);
}

.section-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 56px;
}
@media (min-width: 880px) {
    .section-head { grid-template-columns: repeat(12, 1fr); gap: 40px; }
    .section-head-left { grid-column: 1 / span 6; }
    .section-head-right { grid-column: 8 / span 5; align-self: end; }
    .section-head-wide { grid-column: 1 / span 8; }
}
.display-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(34px, 5.4vw, 66px);
    line-height: 1.04;
    letter-spacing: -0.02em;
}
.display-title em { font-style: italic; color: var(--foreground); }

.section-lede {
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.65;
    color: var(--muted-foreground);
}

/* ===== Section background modifiers ===== */
.section-white {
    background: var(--surface);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.section-white .pain-cell { background: var(--surface); }
.section-white .pain-cell:hover { background: var(--hover); }

/* ===== Pain / capability points grid (6 cells) ===== */
.pain-grid {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}
@media (min-width: 640px) { .pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pain-grid { grid-template-columns: repeat(3, 1fr); } }
.pain-cell {
    padding: 32px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    transition: background var(--t-fast);
}
.pain-cell:hover { background: var(--hover); }
.pain-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 18px;
}
.pain-num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--gold-deep);
    letter-spacing: 0.1em;
}
.pain-title {
    font-family: var(--font-display);
    font-size: 23px;
    letter-spacing: -0.005em;
    line-height: 1.15;
}
.pain-text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted-foreground);
}

/* ===== Navy feature block (philosophy / approach) ===== */
.dark-block {
    background: var(--navy);
    color: var(--ivory);
    position: relative;
    border-top: 1px solid var(--navy-deep);
    border-bottom: 1px solid var(--navy-deep);
}
.dark-block .eyebrow { color: rgba(244, 241, 234, 0.7); }
.dark-block h2 { color: var(--ivory); }
.dark-block em { color: var(--gold-soft); font-style: italic; }
.dark-block p { color: rgba(244, 241, 234, 0.88); }
.dark-block .link-underline {
    color: var(--ivory);
    border-bottom-color: rgba(244, 241, 234, 0.55);
}
.dark-block .link-underline:hover { color: var(--gold-soft); border-bottom-color: var(--gold-soft); }
.grain::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: overlay;
    background-image:
        radial-gradient(rgba(255,255,255,0.65) 0.6px, transparent 0.7px),
        radial-gradient(rgba(0,0,0,0.35) 0.6px, transparent 0.7px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1.5px 2px;
}

/* Reveal modifier — opacity-only fade for whole blocks/sections */
.reveal-up.reveal-block {
    transform: none;
    transition: opacity 1.6s var(--ease);
}
.reveal-up.reveal-block.revealed {
    opacity: 1;
    transform: none;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 880px) {
    .philosophy-grid { grid-template-columns: repeat(12, 1fr); gap: 40px; align-items: end; }
    .philosophy-main { grid-column: 1 / span 7; }
    .philosophy-side { grid-column: 9 / span 4; }
}
.philosophy-title {
    font-family: var(--font-display);
    font-size: clamp(34px, 6vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.02em;
}
.philosophy-claim {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.25;
    color: var(--gold-soft);
    margin-top: 36px;
    max-width: 28ch;
}
.philosophy-side p { font-size: 15px; line-height: 1.7; margin-bottom: 18px; }
.philosophy-side .link-underline { margin-top: 12px; }

/* ===== Practice / Services (S/01..) cards ===== */
.practice-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
@media (min-width: 880px) {
    .practice-grid { grid-template-columns: repeat(2, 1fr); }
}
.practice-card {
    background: var(--surface);
    padding: 36px clamp(28px, 3vw, 48px);
    display: flex;
    flex-direction: column;
    transition: background var(--t-fast);
}
.practice-card:hover { background: var(--hover); }
.practice-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}
.practice-tag {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--gold-deep);
    letter-spacing: 0.08em;
}
.practice-kind {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.practice-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    max-width: 18ch;
}
.practice-dl {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}
.practice-dl-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 540px) {
    .practice-dl-row { grid-template-columns: 1fr; gap: 6px; }
}
.practice-dt {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    padding-top: 3px;
}
.practice-dd {
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted-foreground);
}
.practice-dd.outcome { color: var(--foreground); }
.practice-cta {
    margin-top: 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--navy);
    transition: color var(--t-fast);
    align-self: flex-start;
}
.practice-cta:hover { color: var(--gold-deep); }

.section-foot {
    margin-top: 40px;
    display: flex;
    justify-content: flex-end;
}

/* ===== Engagement / transaction rows (C/01..) ===== */
.engagements {
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--rule);
}
.engagement-row {
    background: var(--surface);
    padding: 30px clamp(20px, 3vw, 40px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: center;
    transition: background var(--t-fast);
}
.engagement-row:hover { background: var(--hover); }
@media (min-width: 880px) {
    .engagement-row {
        grid-template-columns: 50px 200px 1fr auto;
        gap: 28px;
    }
}
.engagement-num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--gold-deep);
    letter-spacing: 0.08em;
}
.engagement-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.engagement-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.engagement-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}
@media (min-width: 880px) {
    .engagement-tags { justify-content: flex-end; }
}
.engagement-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 5px 10px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--foreground);
    background: var(--surface);
}

/* ===== Insights cards ===== */
.insights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
@media (min-width: 700px) { .insights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .insights-grid { grid-template-columns: repeat(3, 1fr); } }
.insight-card {
    background: var(--surface);
    padding: 32px clamp(28px, 2.8vw, 40px) 36px;
    transition: background var(--t-fast);
    display: flex;
    flex-direction: column;
    min-height: 280px;
}
.insight-card:hover { background: var(--hover); }
.insight-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 44px;
}
.insight-category {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.insight-time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted-foreground);
}
.insight-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 1.9vw, 26px);
    line-height: 1.18;
    letter-spacing: -0.01em;
}
.insight-excerpt {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted-foreground);
}
.insight-cta {
    margin-top: auto;
    padding-top: 28px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--navy);
}

/* ===== Begin (CTA navy block) ===== */
.begin {
    background: var(--navy);
    color: var(--ivory);
    text-align: center;
    border-top: 1px solid var(--navy-deep);
}
.begin-inner {
    padding-top: clamp(96px, 14vw, 192px);
    padding-bottom: clamp(96px, 14vw, 192px);
}
.begin .eyebrow { color: rgba(244, 241, 234, 0.6); }
.begin-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(36px, 7vw, 88px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--ivory);
    max-width: 22ch;
    margin: 32px auto 0;
}
.begin-title em { font-style: italic; color: var(--gold-soft); }
.begin-text {
    margin: 36px auto 0;
    max-width: 56ch;
    color: rgba(244, 241, 234, 0.75);
    line-height: 1.7;
}
.begin-actions {
    margin-top: 44px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.begin .btn-primary { background: var(--ivory); color: var(--ink); }
.begin .btn-primary:hover { background: var(--gold); color: var(--ink); }
.begin .btn-ghost {
    color: var(--ivory);
    border-color: rgba(244, 241, 234, 0.4);
}
.begin .btn-ghost:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }

/* ===== Footer ===== */
.site-footer {
    background: var(--navy-deep);
    color: var(--ivory);
    margin-top: 0;
}
.footer-main {
    padding: clamp(56px, 8vw, 96px) 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 880px) {
    .footer-main { grid-template-columns: repeat(12, 1fr); gap: 40px; }
    .footer-brand-col { grid-column: 1 / span 5; }
    .footer-nav-col { grid-column: 6 / span 3; }
    .footer-contact-col { grid-column: 9 / span 4; }
}
.footer-brand-mark {
    display: inline-flex;
    align-items: center;
}
.footer-brand-img {
    display: block;
    height: 36px;
    width: auto;
    /* reverse the dark two-tone mark to ivory for the dark footer */
    filter: brightness(0) invert(1);
    opacity: 0.92;
}
.footer-desc {
    margin-top: 22px;
    color: rgba(244, 241, 234, 0.66);
    font-size: 14px;
    max-width: 40ch;
    line-height: 1.7;
}
.footer-heading {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.55);
    margin-bottom: 18px;
    font-weight: 500;
}
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-links a {
    font-size: 14px;
    color: var(--ivory);
    transition: color var(--t-fast);
}
.footer-links a:hover { color: var(--gold-soft); }
.footer-contact-link {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--ivory);
    transition: color var(--t-fast);
    display: inline-block;
}
.footer-contact-link:hover { color: var(--gold-soft); }
.footer-contact-extra {
    margin-top: 20px;
    color: rgba(244, 241, 234, 0.58);
    font-size: 14px;
    line-height: 1.6;
}
.footer-bottom {
    border-top: 1px solid rgba(244, 241, 234, 0.14);
}
.footer-bottom-inner {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: rgba(244, 241, 234, 0.5);
}
@media (min-width: 700px) {
    .footer-bottom-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer-bottom-inner a:hover { color: var(--gold-soft); }

/* ===== Page header (sub-pages) ===== */
.page-header {
    padding-top: clamp(96px, 12vw, 168px);
    padding-bottom: clamp(56px, 7vw, 96px);
    border-bottom: 1px solid var(--rule);
}
.page-eyebrow { margin-bottom: 28px; }
.page-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(40px, 7vw, 92px);
    line-height: 1.0;
    letter-spacing: -0.025em;
    max-width: 22ch;
}
.page-title em { color: var(--gold-deep); font-style: italic; }
.page-lede {
    margin-top: 28px;
    max-width: 56ch;
    color: var(--muted-foreground);
    line-height: 1.7;
    font-size: clamp(16px, 1.4vw, 18px);
}

/* ===== About / generic two-column content ===== */
.split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 880px) {
    .split-grid { grid-template-columns: repeat(12, 1fr); gap: 56px; }
    .split-left { grid-column: 1 / span 5; }
    .split-right { grid-column: 7 / span 6; }
}
.split-right p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--muted-foreground);
    margin-bottom: 18px;
}
.split-right p strong { color: var(--foreground); font-weight: 500; }

/* Quote block */
.editorial-quote {
    padding: clamp(56px, 8vw, 112px) 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.editorial-quote blockquote {
    font-family: var(--font-display);
    font-size: clamp(28px, 4.5vw, 54px);
    line-height: 1.12;
    letter-spacing: -0.015em;
    max-width: 24ch;
}
.editorial-quote blockquote em { font-style: italic; color: var(--gold-deep); }
.editorial-quote cite {
    display: block;
    margin-top: 28px;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

/* ===== Team grid ===== */
.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    margin-top: 48px;
}
@media (min-width: 700px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.team-card {
    background: var(--surface);
    padding: 32px;
    transition: background var(--t-fast);
}
.team-card:hover { background: var(--hover); }
.team-avatar {
    aspect-ratio: 1 / 1;
    background: var(--navy);
    margin-bottom: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-avatar-initials {
    font-family: var(--font-display);
    font-size: 48px;
    color: var(--gold-soft);
    letter-spacing: 0.02em;
}
.team-name {
    font-family: var(--font-display);
    font-size: 25px;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.team-role {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.team-bio {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted-foreground);
}

/* ===== Team roster (named profiles, no photos) ===== */
.team-roster {
    margin-top: 56px;
    border-top: 1px solid var(--rule);
}
.team-member {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: clamp(32px, 4vw, 48px) 0;
    border-bottom: 1px solid var(--rule);
}
@media (min-width: 880px) {
    .team-member {
        grid-template-columns: repeat(12, 1fr);
        gap: 48px;
        align-items: start;
    }
    .team-member-head { grid-column: 1 / span 4; }
    .team-member-bio { grid-column: 6 / span 7; }
}
.team-member-head {
    display: flex;
    align-items: center;
    gap: 20px;
}
.team-initials {
    flex: none;
    width: 60px;
    height: 60px;
    background: var(--navy);
    color: var(--gold-soft);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.04em;
}
.team-member-name {
    font-family: var(--font-display);
    font-size: clamp(23px, 2.2vw, 28px);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.team-member-role {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.team-member-bio {
    font-size: 15px;
    line-height: 1.72;
    color: var(--muted-foreground);
}

/* ===== Service detail (private equity / consultancy pages) ===== */
.service-detail-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
@media (min-width: 880px) { .service-detail-list { grid-template-columns: repeat(2, 1fr); } }

.service-detail-card {
    background: var(--surface);
    padding: 36px clamp(28px, 3vw, 48px) 40px;
    transition: background var(--t-fast);
}
.service-detail-card:hover { background: var(--hover); }
.service-detail-tag {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--gold-deep);
}
.service-detail-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.4vw, 32px);
    letter-spacing: -0.01em;
    line-height: 1.12;
    margin-top: 20px;
    max-width: 18ch;
}
.service-detail-desc {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted-foreground);
}
.service-features {
    margin-top: 24px;
    border-top: 1px solid var(--rule);
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.service-features li {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--foreground);
    padding-left: 18px;
    position: relative;
}
.service-features li::before {
    content: "◆";
    position: absolute;
    left: 0;
    color: var(--gold);
    font-size: 8px;
    top: 4px;
}

/* Process timeline */
.process-timeline {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--rule);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.process-timeline-item {
    background: var(--surface);
    padding: 32px;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 32px;
    align-items: start;
    transition: background var(--t-fast);
}
.process-timeline-item:hover { background: var(--hover); }
.process-timeline-marker {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--gold-deep);
    letter-spacing: 0.1em;
}
.process-timeline-content h3 {
    font-family: var(--font-display);
    font-size: 25px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin-bottom: 10px;
}
.process-timeline-content p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted-foreground);
    max-width: 64ch;
}

/* ===== Works / portfolio grid ===== */
.works-filter-bar {
    padding: 24px 0 0;
    border-bottom: 1px solid var(--rule);
}
.works-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 18px;
}
.filter-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid var(--rule);
    color: var(--muted-foreground);
    transition: all var(--t-fast);
}
.filter-btn:hover { color: var(--navy); border-color: var(--navy); }
.filter-btn.active { background: var(--navy); border-color: var(--navy); color: var(--ivory); }

.works-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
@media (min-width: 700px) { .works-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .works-grid { grid-template-columns: repeat(3, 1fr); } }
.work-card {
    background: var(--surface);
    display: flex;
    flex-direction: column;
    transition: background var(--t-fast);
}
.work-card:hover { background: var(--hover); }
.work-card-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--ivory-soft);
}
.work-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow);
}
.work-card:hover .work-card-image img { transform: scale(1.03); }
.work-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(20,24,31,0.2);
}
.work-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(14, 26, 46, 0);
    transition: background var(--t-fast);
    display: flex;
    align-items: flex-end;
    padding: 24px;
    pointer-events: none;
}
.work-card:hover .work-card-overlay { background: rgba(14, 26, 46, 0.36); }
.work-card-view {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ivory);
    opacity: 0;
    transition: opacity var(--t-fast);
}
.work-card:hover .work-card-view { opacity: 1; }
.work-card-info { padding: 24px 28px 32px; }
.work-card-category {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.work-card-title {
    margin-top: 14px;
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 26px);
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.work-card-desc {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted-foreground);
}

/* ===== Articles ===== */
.articles-featured-section { padding-top: clamp(48px, 6vw, 96px); }
.article-featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    border: 1px solid var(--rule);
    transition: background var(--t-fast);
}
@media (min-width: 880px) {
    .article-featured { grid-template-columns: repeat(12, 1fr); gap: 56px; }
    .article-featured-media { grid-column: 1 / span 6; }
    .article-featured-body { grid-column: 7 / span 6; padding-right: 40px; }
}
.article-featured { background: var(--surface); }
.article-featured:hover { background: var(--hover); }
.article-featured-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ivory-soft);
}
.article-featured-media img { width: 100%; height: 100%; object-fit: cover; }
.article-featured-placeholder { width: 100%; height: 100%; background: var(--ivory-soft); }
.article-featured-body { padding: 40px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.article-category-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    align-self: flex-start;
}
.article-category-badge-light { color: var(--gold-soft); }
.article-featured-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.4vw, 44px);
    letter-spacing: -0.015em;
    line-height: 1.1;
}
.article-featured-excerpt {
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted-foreground);
}
.article-featured-cta {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--navy);
}

.articles-filter-section { padding: 24px 0 0; border-bottom: 1px solid var(--rule); }
.articles-filter { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 18px; }

.articles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
@media (min-width: 700px) { .articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .articles-grid { grid-template-columns: repeat(3, 1fr); } }
.article-card {
    background: var(--surface);
    display: flex;
    flex-direction: column;
    transition: background var(--t-fast);
}
.article-card:hover { background: var(--hover); }
.article-card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ivory-soft); }
.article-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.article-card:hover .article-card-media img { transform: scale(1.04); }
.article-card-placeholder { width: 100%; height: 100%; background: var(--ivory-soft); }
.article-card-body { padding: 24px 28px 32px; }
.article-card-title {
    margin-top: 14px;
    font-family: var(--font-display);
    font-size: clamp(20px, 1.9vw, 24px);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.article-card-excerpt {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted-foreground);
}
.article-meta {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
}
.article-meta-small { font-size: 10px; }
.article-meta-dot { opacity: 0.5; }

.articles-empty { text-align: center; padding: 96px 24px; }
.articles-empty-title { font-family: var(--font-display); font-size: 25px; letter-spacing: -0.01em; }
.articles-empty-text { margin-top: 10px; color: var(--muted-foreground); }

/* Article hero / detail */
.article-hero {
    padding-top: clamp(80px, 10vw, 144px);
    padding-bottom: clamp(40px, 6vw, 64px);
    border-bottom: 1px solid var(--rule);
}
.article-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-bottom: 28px;
}
.article-breadcrumb a:hover { color: var(--gold-deep); }
.article-breadcrumb-sep { opacity: 0.5; }
.article-hero-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 6vw, 78px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    max-width: 22ch;
    margin-top: 16px;
}
.article-hero-excerpt {
    margin-top: 24px;
    max-width: 60ch;
    color: var(--muted-foreground);
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.7;
}
.article-hero-meta {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 32px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}
.article-author-inline { display: flex; align-items: center; gap: 14px; }
.article-author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--navy);
    color: var(--gold-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 18px;
}
.article-author-name { font-family: var(--font-display); font-size: 18px; line-height: 1; }
.article-author-role {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.article-meta-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
}

.article-cover { padding: 40px 0; }
.article-cover-figure {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ivory-soft);
}
.article-cover-figure img { width: 100%; height: 100%; object-fit: cover; }

.article-body-section { padding-bottom: clamp(56px, 8vw, 112px); }
.article-body-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
@media (min-width: 980px) {
    .article-body-container { grid-template-columns: 60px minmax(0, 1fr); gap: 64px; }
}
.article-share {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
@media (min-width: 980px) {
    .article-share { flex-direction: column; align-items: flex-start; position: sticky; top: 88px; align-self: start; }
}
.article-share-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.article-share-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--rule);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    transition: all var(--t-fast);
}
.article-share-btn:hover { background: var(--navy); color: var(--ivory); border-color: var(--navy); }

.article-body {
    font-size: 17px;
    line-height: 1.75;
    color: var(--foreground);
    max-width: 68ch;
}
.article-body p { margin-bottom: 22px; color: rgba(20,24,31,0.85); }
.article-body h2 {
    margin-top: 56px;
    margin-bottom: 18px;
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 36px);
    letter-spacing: -0.015em;
    line-height: 1.15;
}
.article-body h3 {
    margin-top: 40px;
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 26px);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.article-body ul, .article-body ol { margin: 0 0 22px 22px; list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote {
    border-left: 2px solid var(--gold);
    padding: 6px 0 6px 22px;
    margin: 28px 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.3;
    color: var(--foreground);
}
.article-body a { color: var(--gold-deep); border-bottom: 1px solid var(--gold); }
.article-body a:hover { color: var(--navy); border-bottom-color: var(--navy); }
.article-body img { margin: 32px 0; }
.article-body strong { color: var(--ink); font-weight: 600; }

.article-share-inline-section { padding: 24px 0 64px; border-top: 1px solid var(--rule); }
.article-share-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; justify-content: space-between; }
.article-share-inline-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.article-share-inline-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.article-share-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--navy);
    transition: all var(--t-fast);
}
.article-share-pill:hover { background: var(--navy); color: var(--ivory); border-color: var(--navy); }

/* ===== Work detail ===== */
.work-detail-hero {
    padding-top: clamp(80px, 10vw, 144px);
    padding-bottom: clamp(40px, 6vw, 72px);
    border-bottom: 1px solid var(--rule);
}
.work-detail-category {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.work-detail-title {
    margin-top: 18px;
    font-family: var(--font-display);
    font-size: clamp(36px, 6vw, 78px);
    line-height: 1.0;
    letter-spacing: -0.02em;
    max-width: 22ch;
}
.work-detail-lead {
    margin-top: 24px;
    max-width: 60ch;
    color: var(--muted-foreground);
    line-height: 1.7;
    font-size: clamp(16px, 1.3vw, 18px);
}
.work-detail-meta {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (min-width: 700px) { .work-detail-meta { grid-template-columns: repeat(4, 1fr); } }
.work-detail-meta-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-bottom: 8px;
}
.work-detail-meta-value {
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: -0.01em;
}
.work-detail-cta {
    margin-top: 36px;
    display: inline-flex;
}
.work-detail-cover-section { padding: 40px 0; }
.work-detail-cover {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--ivory-soft);
    position: relative;
}
.work-detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.work-detail-body-section { padding-bottom: clamp(56px, 8vw, 112px); }
.work-detail-body { max-width: 68ch; }
.work-detail-section-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 36px);
    letter-spacing: -0.015em;
    margin-bottom: 24px;
}
.work-detail-paragraph {
    font-size: 17px;
    line-height: 1.75;
    color: var(--muted-foreground);
    margin-bottom: 18px;
}
.work-detail-gallery-section { padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(56px, 8vw, 112px); border-top: 1px solid var(--rule); }
.work-detail-gallery-header { margin-bottom: 48px; }
.work-detail-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 700px) { .work-detail-gallery { grid-template-columns: repeat(2, 1fr); } }
.work-detail-gallery-item { background: var(--ivory-soft); }
.work-detail-gallery-link img { width: 100%; height: auto; }
.work-detail-gallery-caption {
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

/* ===== Contact ===== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
}
@media (min-width: 880px) {
    .contact-grid { grid-template-columns: repeat(12, 1fr); gap: 64px; }
    .contact-form-wrapper { grid-column: 1 / span 7; }
    .contact-info-wrapper { grid-column: 9 / span 4; }
}
.contact-form-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.4vw, 40px);
    letter-spacing: -0.015em;
    line-height: 1.08;
}
.contact-form-subtitle {
    margin-top: 14px;
    color: var(--muted-foreground);
    line-height: 1.65;
    max-width: 52ch;
}
.contact-form {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.form-label .optional { opacity: 0.7; text-transform: none; letter-spacing: 0.04em; }
.form-input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule-strong);
    padding: 12px 0;
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--foreground);
    transition: border-color var(--t-fast);
    width: 100%;
}
.form-input:focus { outline: none; border-bottom-color: var(--navy); }
.form-input::placeholder { color: rgba(20, 24, 31, 0.35); }
.form-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 14px) center, calc(100% - 8px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 28px; }
.form-textarea { min-height: 140px; resize: vertical; }
.btn-full { width: 100%; justify-content: center; }

.contact-alert {
    margin-bottom: 28px;
    padding: 16px 20px;
    background: var(--navy);
    color: var(--ivory);
    font-size: 14px;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.contact-alert i { color: var(--gold-soft); font-size: 18px; line-height: 1.4; }

.contact-info-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    padding: 32px;
    margin-bottom: 16px;
}
.contact-info-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-bottom: 24px;
}
.contact-details-list, .collaborate-list { display: flex; flex-direction: column; gap: 18px; }
.contact-details-list li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.contact-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
}
.contact-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-bottom: 6px;
}
.contact-value {
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.4;
    color: var(--foreground);
    letter-spacing: -0.005em;
}
.contact-value:hover { color: var(--gold-deep); }
.collaborate-list li {
    padding-left: 20px;
    position: relative;
    font-size: 14px;
    color: var(--foreground);
}
.collaborate-list li::before {
    content: "◆";
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--gold);
    font-size: 8px;
}

/* ===== Page loader ===== */
.page-loader {
    position: fixed;
    inset: 0;
    background: var(--background);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--t-slow), visibility var(--t-slow);
}
.page-loader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-content { width: 220px; }
.loader-bar {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent 0%, var(--navy) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: loaderShimmer 1.4s linear infinite;
}
@keyframes loaderShimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ===== Back to top ===== */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--navy);
    background: var(--surface);
    color: var(--navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: all var(--t);
    z-index: 30;
}
.back-to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--navy); color: var(--ivory); }

/* ===== Reveal animations ===== */
.reveal-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    will-change: opacity, transform;
}
.reveal-up.revealed { opacity: 1; transform: translateY(0); }

/* ===== Utility helpers ===== */
.text-mono { font-family: var(--font-mono); }
.text-display { font-family: var(--font-display); }
.text-gold { color: var(--gold-deep); }
.text-muted { color: var(--muted-foreground); }
.bg-ivory { background: var(--ivory); }
.bg-navy { background: var(--navy); color: var(--ivory); }

/* ===== Small fixes ===== */
main { display: block; }
section { position: relative; }

/* ============================================================
   Feature photography — drop-in photo frames.
   Add image files to static/images/photos/ and they fill the
   frame automatically; until then a branded navy empty-state
   shows (no broken images). The photo URL is passed per element
   via the --photo custom property in the template.
   ============================================================ */
.media-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--rule);
    background-color: var(--navy-deep);
    background-image:
        var(--photo, none),
        radial-gradient(120% 130% at 50% -10%, rgba(31, 51, 80, 0.65), transparent 60%),
        url('../images/logo/eslancer-emblem-light.png'),
        linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover, cover, 88px auto, cover;
}

/* Hero — full-bleed background photograph behind the overlaid headline. */
.hero-media {
    position: absolute;
    inset: 0;
    margin: 0;
    border: 0;
    z-index: 0;
}

/* Philosophy — band inside the navy block. */
.philosophy-media {
    margin-top: clamp(48px, 6vw, 80px);
    aspect-ratio: 16 / 5;
    border-color: rgba(244, 241, 234, 0.18);
}
@media (max-width: 760px) { .philosophy-media { aspect-ratio: 16 / 9; } }

/* Insights — image header on each card, bled to the card edges. */
.insight-card-media {
    aspect-ratio: 16 / 9;
    margin: -32px calc(-1 * clamp(28px, 2.8vw, 40px)) 28px;
    border: 0;
    border-bottom: 1px solid var(--rule);
}

/* Homepage philosophy — statement paired with a portrait image. */
.philosophy-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(36px, 5vw, 60px);
}
@media (min-width: 880px) {
    .philosophy-split {
        grid-template-columns: 1.4fr 1fr;
        align-items: center;
    }
}
.philosophy-copy { display: flex; flex-direction: column; }
.philosophy-copy .philosophy-side { margin-top: 32px; }
.philosophy-portrait {
    aspect-ratio: 3 / 4;
    border-color: rgba(244, 241, 234, 0.18);
}
@media (max-width: 760px) { .philosophy-portrait { aspect-ratio: 4 / 5; } }

/* Firm 'Who we are' — portrait beside the section heading. */
.split-media {
    margin-top: clamp(28px, 4vw, 40px);
    aspect-ratio: 3 / 4;
    max-width: 420px;
}

/* ===== Reduce motion ===== */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .ticker-inner { animation: none; }
}