/* ============================================================================
   SHILI Accounting and Consultants — INNER PAGES kit  (v2 — Pearl Trust light)
     About    (The Manifesto)        — .am-*
     Services (The Engagement Atlas) — .sv-*
     Industries (The Sector Switcher)— .in-*
     Contact  (The Engagement Brief) — .ct-*
   ----------------------------------------------------------------------------
   Scoped under .skb-immersive. Loaded AFTER home-immersive.css (which defines
   the Pearl Trust tokens, .skb-shell, .skb-eyebrow, .btn-glow/.btn-ghost,
   .immersive-cta, .energy-beam, glass-* utilities and the reveal hooks).
   ========================================================================== */


/* ============================================================================
   SHARED — .imm-page wrapper, beam offset, page-identity hooks
   ========================================================================== */
.skb-immersive.imm-page .energy-beam {
    left: 40px;
    transform: none;
}

.skb-immersive.imm-page .beam-dot-el {
    left: 40px;
}

@media (max-width: 1100px) {
    .skb-immersive.imm-page .energy-beam {
        display: none;
    }
}

/* Page identity hooks (intentionally empty — content classes style each page) */
.am-page, .sv-page, .in-page, .ct-page, .is-page, .id-page {
}


/* ============================================================================
   DATA VIZ UTILITIES  (drop-in classes for metric blocks, tooltips, badges)
   ----------------------------------------------------------------------------
   .metric-tile          — premium card for any KPI / accounting metric block
   .metric-tile .nad     — Namibian Dollar (N$) currency prefix styling
   [data-tooltip="..."]  — hover tooltip on any element (great for data points)
   .pulse-dot            — small animated indicator for "live" data hints
   ========================================================================== */
.metric-tile {
    padding: 28px 26px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    transition: transform 0.28s cubic-bezier(.22,1,.36,1), box-shadow 0.28s, border-color 0.28s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .metric-tile:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lift);
        border-color: rgba(94, 193, 145, 0.40);
    }

    .metric-tile .metric-value {
        font-family: var(--font-d);
        font-size: clamp(2rem, 3.4vw, 2.6rem);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
        background: linear-gradient(160deg, var(--ink), var(--blue-deep));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

        .metric-tile .metric-value .nad {
            font-size: 0.62em;
            font-weight: 700;
            color: var(--muted);
            -webkit-text-fill-color: var(--muted);
            background: none;
            margin-right: 4px;
            vertical-align: 0.15em;
        }

    .metric-tile .metric-label {
        font-size: 0.82rem;
        color: var(--muted);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 600;
    }

    .metric-tile .metric-meta {
        font-size: 0.82rem;
        color: var(--muted-2);
    }

    .metric-tile .metric-delta {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--mint-deep);
    }

        .metric-tile .metric-delta.down {
            color: #d97a8a;
        }

/* Hover tooltip — opens above any element with data-tooltip */
[data-tooltip] {
    position: relative;
}

    [data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%) translateY(6px);
        padding: 9px 13px;
        border-radius: 9px;
        background: var(--ink);
        color: #ffffff;
        font-family: var(--font-b);
        font-size: 0.78rem;
        font-weight: 500;
        letter-spacing: 0.01em;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s cubic-bezier(.22,1,.36,1), transform 0.22s cubic-bezier(.22,1,.36,1);
        z-index: 100;
        box-shadow: 0 8px 24px rgba(14, 26, 53, 0.18);
    }

    [data-tooltip]::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 4px);
        left: 50%;
        transform: translateX(-50%) translateY(6px);
        border: 6px solid transparent;
        border-top-color: var(--ink);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s, transform 0.22s;
        z-index: 100;
    }

    [data-tooltip]:hover::after,
    [data-tooltip]:hover::before {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

/* Pulse-dot — for "live" / status indicators */
.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint-deep);
    box-shadow: 0 0 0 0 rgba(94, 193, 145, 0.6);
    animation: pulseDot 1.8s ease-out infinite;
}

@keyframes pulseDot {
    0% {
        box-shadow: 0 0 0 0 rgba(94, 193, 145, 0.55);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(94, 193, 145, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(94, 193, 145, 0);
    }
}


/* ============================================================================
   ABOUT — The Manifesto  (.am-*)
   ============================================================================ */

/* --- hero (typographic, no bg image) -------------------------------------- */
.am-hero {
    position: relative;
    padding: 180px 0 100px;
    min-height: 56vh;
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    background: var(--pearl);
}

    .am-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(60% 50% at 20% 30%, rgba(168, 212, 255, 0.45), transparent 65%), radial-gradient(50% 50% at 90% 90%, rgba(158, 229, 192, 0.30), transparent 65%);
    }

    .am-hero .skb-shell {
        position: relative;
        z-index: 2;
    }

/* Reconciliation-orbit canvas — fills the hero, above the gradient wash and
   below the copy. pointer-events:none so clicks pass through to the section's
   click handler (which speeds the rings toward alignment). */
#orbit-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
    pointer-events: none;
}

.am-hero-inner {
    max-width: 920px;
}

.am-hero-title {
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-weight: 800;
    line-height: 1;
    margin: 22px 0 26px;
    color: var(--ink);
}

    .am-hero-title .hero-line {
        display: block;
        overflow: hidden;
    }

    .am-hero-title .accent {
        background: var(--flow);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.am-hero-sub {
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    color: var(--muted);
    max-width: 640px;
    line-height: 1.6;
}

.am-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
}

    .am-hero-meta span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 100px;
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid var(--line-2);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--ink);
    }

    .am-hero-meta i {
        color: var(--mint-deep);
    }

/* --- three commitments ---------------------------------------------------- */
.am-commitments {
    padding: 110px 0;
    background: var(--surface);
    position: relative;
}

.am-commit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.am-commit {
    padding: 40px 0 0;
    position: relative;
    border-top: 1px solid var(--line-2);
}

    .am-commit::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        width: 60px;
        height: 1px;
        background: var(--mint-deep);
    }

.am-commit-num {
    font-family: var(--font-d);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--mint-deep);
    margin-bottom: 24px;
}

.am-commit h3 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 18px;
    color: var(--ink);
}

.am-commit p {
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0;
}

/* --- founder magazine spreads --------------------------------------------- */
.am-founder {
    padding: 100px 0;
    position: relative;
    background: var(--pearl);
}

    .am-founder + .am-founder {
        padding-top: 30px;
    }

.am-founder-grid {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 70px;
    align-items: center;
}

.am-founder.reverse .am-founder-grid {
    grid-template-columns: 1fr 0.85fr;
}

.am-founder-portrait {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

    .am-founder-portrait img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: contrast(1.02);
        transition: transform .8s cubic-bezier(.4,0,.2,1);
    }

    .am-founder-portrait:hover img {
        transform: scale(1.04);
    }

    .am-founder-portrait::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(180deg, transparent 55%, rgba(14, 26, 53, 0.55));
    }

.am-letterform {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-d);
    font-size: clamp(9rem, 22vw, 17rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(45, 108, 223, 0.30);
    pointer-events: none;
    user-select: none;
    z-index: 3;
    mix-blend-mode: overlay;
}

.am-founder-stamp {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(94, 193, 145, 0.40);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink);
}

    .am-founder-stamp i {
        color: var(--mint-deep);
        font-size: 1rem;
    }

.am-founder-body h2 {
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 800;
    margin: 18px 0 24px;
    line-height: 1.04;
    color: var(--ink);
}

.am-founder-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
    padding: 18px 22px;
    border-radius: var(--r);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
}

    .am-founder-meta span {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.94rem;
        color: var(--ink);
    }

    .am-founder-meta i {
        color: var(--mint-deep);
        font-size: 1rem;
        width: 18px;
    }

    .am-founder-meta a {
        color: var(--blue-deep);
    }

        .am-founder-meta a:hover {
            color: var(--mint-deep);
        }

.am-founder-body p {
    color: var(--muted);
    font-size: 1.04rem;
    line-height: 1.75;
    margin-bottom: 16px;
}

.am-pull {
    margin-top: 30px;
    padding: 22px 0 22px 26px;
    border-left: 2px solid var(--mint-deep);
    font-family: var(--font-d);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ink);
}

/* --- articles of practice (ledger rows) ----------------------------------- */
.am-ledger {
    padding: 120px 0;
    position: relative;
    background: var(--surface);
}

.am-ledger-head {
    max-width: 760px;
    margin: 0 0 56px;
}

.am-ledger-title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    margin: 18px 0 16px;
    line-height: 1.08;
    color: var(--ink);
}

.am-ledger-lead {
    color: var(--muted);
    font-size: 1.06rem;
    line-height: 1.7;
}

.am-ledger-list {
    border-top: 1px solid var(--line-2);
}

.am-ledger-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 32px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
}

.am-ledger-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.am-ledger-label {
    font-family: var(--font-d);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.am-ledger-col:first-child .am-ledger-label {
    color: var(--blue-deep);
}

.am-ledger-col:last-child .am-ledger-label {
    color: var(--mint-deep);
}

.am-ledger-col p {
    color: var(--ink);
    font-size: 1.08rem;
    line-height: 1.55;
    margin: 0;
    max-width: 460px;
}

/* --- things we won't do --------------------------------------------------- */
.am-wontdo {
    padding: 100px 0 130px;
    position: relative;
    background: var(--pearl-2);
}

.am-wontdo-head {
    max-width: 720px;
    margin: 0 0 50px;
}

    .am-wontdo-head h2 {
        font-size: clamp(2rem, 4vw, 3.2rem);
        font-weight: 800;
        margin: 18px 0 16px;
        line-height: 1.08;
        color: var(--ink);
    }

    .am-wontdo-head p {
        color: var(--muted);
        font-size: 1.06rem;
        line-height: 1.7;
    }

.am-wontdo-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 22px;
}

    .am-wontdo-list li {
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: 22px;
        align-items: start;
        padding: 26px 30px;
        border-radius: var(--r-lg);
        background: var(--surface);
        border: 1px solid var(--line);
        box-shadow: var(--shadow-card);
        transition: border-color .3s, transform .3s, box-shadow .3s;
    }

        .am-wontdo-list li:hover {
            border-color: rgba(217, 122, 138, 0.40);
            transform: translateX(4px);
            box-shadow: var(--shadow-lift);
        }

        .am-wontdo-list li > i {
            width: 56px;
            height: 56px;
            display: grid;
            place-items: center;
            border-radius: 14px;
            background: rgba(217, 122, 138, 0.10);
            color: #d97a8a;
            font-size: 1.5rem;
        }

        .am-wontdo-list li > div {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

    .am-wontdo-list strong {
        font-family: var(--font-d);
        font-size: 1.15rem;
        color: var(--ink);
    }

    .am-wontdo-list span {
        color: var(--muted);
        font-size: 0.96rem;
        line-height: 1.65;
    }


/* ============================================================================
   SERVICES — The Engagement Atlas  (.sv-*)
   ============================================================================ */

/* --- hero (3 words stacked) ----------------------------------------------- */
.sv-hero {
    position: relative;
    padding: 180px 0 110px;
    min-height: 60vh;
    isolation: isolate;
    background: var(--pearl);
}

    .sv-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(70% 50% at 10% 10%, rgba(168, 212, 255, 0.40), transparent 60%), radial-gradient(60% 50% at 90% 100%, rgba(168, 212, 255, 0.30), transparent 65%);
    }

    .sv-hero .skb-shell {
        position: relative;
        z-index: 2;
    }

/* Autonomous snake canvas — fills the hero, sits above the gradient wash and
   below the copy. pointer-events:none so clicks pass through to the section's
   click handler (which steers the snake toward the cursor). */
#snake-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
    pointer-events: none;
}

.sv-hero-inner {
    max-width: 1100px;
}

.sv-hero-stack {
    font-size: clamp(3.5rem, 11vw, 9rem);
    font-weight: 900;
    line-height: 0.92;
    margin: 22px 0 26px;
    letter-spacing: -0.04em;
    color: var(--ink);
}

    .sv-hero-stack .hero-line {
        display: block;
        overflow: hidden;
    }

    .sv-hero-stack .accent {
        background: var(--flow);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.sv-hero-sub {
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    color: var(--muted);
    max-width: 620px;
    line-height: 1.6;
}

.sv-hero-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 38px;
}

    .sv-hero-jump a {
        display: inline-flex;
        align-items: baseline;
        gap: 8px;
        padding: 10px 18px;
        border-radius: 100px;
        background: rgba(255, 255, 255, 0.75);
        border: 1px solid var(--line-2);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        font-size: 0.86rem;
        font-weight: 600;
        color: var(--ink);
        transition: background .25s, border-color .25s, color .25s, transform .25s;
    }

        .sv-hero-jump a span {
            font-family: var(--font-d);
            font-weight: 800;
            color: var(--mint-deep);
            font-size: 0.78rem;
            letter-spacing: 0.1em;
        }

        .sv-hero-jump a:hover {
            background: rgba(158, 229, 192, 0.20);
            border-color: var(--mint-deep);
            color: var(--mint-deep);
            transform: translateY(-2px);
        }

/* --- practice spread ------------------------------------------------------ */
.sv-practice {
    padding: 110px 0;
    border-top: 1px solid var(--line);
    position: relative;
    background: var(--surface);
}

    .sv-practice.alt {
        background: var(--pearl-2);
    }

.sv-practice-marker {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 36px;
}

.sv-practice-num {
    font-family: var(--font-d);
    font-size: clamp(2.6rem, 4.4vw, 3.6rem);
    font-weight: 900;
    background: var(--flow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    letter-spacing: -0.04em;
}

.sv-practice-tag {
    font-family: var(--font-d);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mint-deep);
}

.sv-practice-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    align-items: start;
}

.sv-practice-title {
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 24px;
    max-width: 720px;
    color: var(--ink);
}

.sv-practice-narrative > p {
    color: var(--muted);
    font-size: 1.06rem;
    line-height: 1.75;
    margin-bottom: 18px;
}

.sv-practice-list {
    margin-top: 30px;
}

.sv-practice-list-label {
    font-family: var(--font-d);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mint-deep);
    margin-bottom: 16px;
}

.sv-practice-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.sv-practice-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 500;
}

    .sv-practice-list li i {
        color: var(--mint-deep);
        font-size: 1.6rem;
        line-height: 1;
    }

/* deliverables sidecar — now glass-panel feel */
.sv-deliverables {
    padding: 34px 30px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    position: sticky;
    top: 100px;
}

.sv-deliv-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

    .sv-deliv-head i {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: rgba(45, 108, 223, 0.10);
        color: var(--blue-deep);
        font-size: 1.15rem;
    }

    .sv-deliv-head span {
        font-family: var(--font-d);
        font-weight: 700;
        font-size: 1.02rem;
        color: var(--ink);
    }

.sv-deliv-list {
    counter-reset: deliv;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

    .sv-deliv-list li {
        counter-increment: deliv;
        position: relative;
        padding-left: 38px;
        color: var(--ink);
        font-size: 0.96rem;
        line-height: 1.55;
    }

        .sv-deliv-list li::before {
            content: counter(deliv, decimal-leading-zero);
            position: absolute;
            left: 0;
            top: 0;
            font-family: var(--font-d);
            font-size: 0.78rem;
            font-weight: 800;
            color: var(--mint-deep);
            letter-spacing: 0.04em;
            padding: 3px 7px;
            border-radius: 6px;
            background: rgba(158, 229, 192, 0.18);
            border: 1px solid rgba(94, 193, 145, 0.35);
        }

.sv-deliv-foot {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 0.86rem;
}

    .sv-deliv-foot i {
        color: var(--mint-deep);
    }

/* --- engagement lifecycle (6-stage horizontal flow) ----------------------- */
.sv-lifecycle {
    padding: 120px 0;
    background: var(--pearl-2);
    position: relative;
}

.sv-life-head {
    max-width: 700px;
    margin: 0 auto 64px;
    text-align: center;
}

    .sv-life-head h2 {
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 800;
        margin: 18px 0 16px;
        color: var(--ink);
    }

    .sv-life-head p {
        color: var(--muted);
        font-size: 1.04rem;
        line-height: 1.7;
    }

.sv-life-flow {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    position: relative;
}

    .sv-life-flow::before {
        content: "";
        position: absolute;
        top: 28px;
        left: 4%;
        right: 4%;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, var(--baby-deep) 12%, var(--mint-deep) 50%, var(--baby-deep) 88%, transparent 100%);
        opacity: 0.45;
        z-index: 0;
    }

.sv-life-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

.sv-life-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--line-2);
    font-family: var(--font-d);
    font-size: 0.96rem;
    font-weight: 800;
    color: var(--mint-deep);
    letter-spacing: 0.04em;
    margin-bottom: 22px;
    box-shadow: 0 0 0 6px var(--pearl-2), 0 6px 18px rgba(14, 26, 53, 0.06);
    transition: border-color .3s, color .3s, box-shadow .3s, transform .3s;
}

.sv-life-step:hover .sv-life-num {
    border-color: var(--mint-deep);
    color: var(--blue-deep);
    box-shadow: 0 0 0 6px var(--pearl-2), 0 10px 24px rgba(94, 193, 145, 0.30);
    transform: translateY(-3px);
}

.sv-life-step h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ink);
}

.sv-life-step p {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
}

/* --- supplementary services row ------------------------------------------- */
.sv-support {
    padding: 100px 0 120px;
    background: var(--surface);
}

.sv-support-head {
    max-width: 640px;
    margin: 0 0 50px;
}

    .sv-support-head h2 {
        font-size: clamp(1.8rem, 3vw, 2.4rem);
        font-weight: 800;
        margin: 18px 0 14px;
        color: var(--ink);
    }

    .sv-support-head p {
        color: var(--muted);
        font-size: 1rem;
        line-height: 1.65;
    }

.sv-support-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.sv-support-card {
    padding: 28px 24px;
    border-radius: var(--r);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    transition: border-color .25s, transform .25s, box-shadow .25s;
}

    .sv-support-card:hover {
        border-color: rgba(94, 193, 145, 0.40);
        transform: translateY(-4px);
        box-shadow: var(--shadow-lift);
    }

.sv-support-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(45, 108, 223, 0.10);
    color: var(--blue-deep);
    font-size: 1.2rem;
    margin-bottom: 18px;
}

.sv-support-card h4 {
    font-size: 1.08rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ink);
}

.sv-support-card p {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}


/* ============================================================================
   INDUSTRIES — The Sector Switcher  (.in-*)
   ============================================================================ */

/* --- hero with abstract pattern bg ---------------------------------------- */
.in-hero {
    position: relative;
    padding: 180px 0 110px;
    min-height: 60vh;
    isolation: isolate;
    overflow: hidden;
    background: var(--pearl);
}

.in-hero-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(168, 212, 255, 0.18) 0% 20%, rgba(158, 229, 192, 0.14) 20% 40%, rgba(168, 212, 255, 0.22) 40% 60%, rgba(158, 229, 192, 0.12) 60% 80%, rgba(168, 212, 255, 0.18) 80% 100%);
}

    .in-hero-pattern::before {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(180deg, transparent 0 79px, rgba(45, 108, 223, 0.06) 79px 80px);
        mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
        -webkit-mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
    }

    .in-hero-pattern::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent 19.5%, rgba(45, 108, 223, 0.14) 20%, transparent 20.5%, transparent 39.5%, rgba(45, 108, 223, 0.14) 40%, transparent 40.5%, transparent 59.5%, rgba(45, 108, 223, 0.14) 60%, transparent 60.5%, transparent 79.5%, rgba(45, 108, 223, 0.14) 80%, transparent 80.5%);
    }

.in-hero-grade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(60% 50% at 50% 110%, rgba(168, 212, 255, 0.35), transparent 70%), linear-gradient(180deg, rgba(247, 249, 252, 0.40), transparent 30%, transparent 70%, var(--pearl));
}

.in-hero .skb-shell {
    position: relative;
    z-index: 2;
}

.in-hero-inner {
    max-width: 900px;
}

.in-hero-title {
    font-size: clamp(2.6rem, 6.5vw, 5.4rem);
    font-weight: 800;
    line-height: 1;
    margin: 22px 0 26px;
    color: var(--ink);
}

    .in-hero-title .hero-line {
        display: block;
        overflow: hidden;
    }

    .in-hero-title .accent {
        background: var(--flow);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.in-hero-sub {
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    color: var(--muted);
    max-width: 640px;
    line-height: 1.6;
}

/* --- tab bar -------------------------------------------------------------- */
.in-sectors {
    padding: 70px 0 120px;
    position: relative;
    background: var(--surface);
}

.in-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 12px;
    margin-bottom: 36px;
    background: var(--pearl-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
}

.in-tab {
    display: grid;
    grid-template-areas:
        "num ico"
        "name ico";
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 12px;
    padding: 16px 20px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r);
    cursor: pointer;
    text-align: left;
    transition: background .25s, border-color .25s, transform .25s;
    color: var(--ink);
    font-family: var(--font-b);
}

.in-tab-num {
    grid-area: num;
    font-family: var(--font-d);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--muted-2);
}

.in-tab-name {
    grid-area: name;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
}

.in-tab-ico {
    grid-area: ico;
    font-size: 1.35rem;
    color: var(--muted-2);
    transition: color .25s;
}

.in-tab:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--line-2);
}

    .in-tab:hover .in-tab-ico {
        color: var(--blue-deep);
    }

.in-tab.is-active {
    background: linear-gradient(140deg, rgba(168, 212, 255, 0.38), rgba(158, 229, 192, 0.22));
    border-color: rgba(94, 193, 145, 0.50);
    box-shadow: 0 6px 24px rgba(79, 135, 224, 0.18);
}

    .in-tab.is-active .in-tab-num {
        color: var(--mint-deep);
    }

    .in-tab.is-active .in-tab-ico {
        color: var(--mint-deep);
    }

/* --- the panel ------------------------------------------------------------ */
.in-panel {
    padding: 44px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    animation: inPanelIn 0.45s cubic-bezier(.2,.7,.2,1);
}

@keyframes inPanelIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.in-panel-head {
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--line);
}

.in-panel-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.in-panel-num {
    font-family: var(--font-d);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mint-deep);
}

.in-panel-title {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
    max-width: 900px;
    color: var(--ink);
}

.in-panel-lead {
    color: var(--muted);
    font-size: 1.04rem;
    line-height: 1.7;
    margin: 0;
    max-width: 900px;
}

.in-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 36px;
}

.in-panel-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.in-panel-col-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

    .in-panel-col-head i {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: rgba(45, 108, 223, 0.10);
        color: var(--blue-deep);
        font-size: 0.95rem;
    }

    .in-panel-col-head span {
        font-family: var(--font-d);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--ink);
    }

/* lists */
.in-reg-list, .in-help-list, .in-pit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

    .in-reg-list li {
        padding: 12px 14px;
        border-radius: 10px;
        background: var(--pearl-2);
        border: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        gap: 4px;
        transition: border-color .2s, transform .2s;
    }

        .in-reg-list li:hover {
            border-color: rgba(94, 193, 145, 0.40);
            transform: translateX(3px);
        }

    .in-reg-list strong {
        font-family: var(--font-d);
        font-size: 0.84rem;
        font-weight: 800;
        color: var(--mint-deep);
        letter-spacing: 0.02em;
    }

    .in-reg-list span {
        color: var(--muted);
        font-size: 0.86rem;
        line-height: 1.45;
    }

    .in-help-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: var(--ink);
        font-size: 0.94rem;
        line-height: 1.55;
    }

        .in-help-list li i {
            color: var(--mint-deep);
            font-size: 1.3rem;
            line-height: 1;
            margin-top: -2px;
            flex-shrink: 0;
        }

    .in-pit-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        color: var(--ink);
        font-size: 0.93rem;
        line-height: 1.55;
        padding-left: 4px;
    }

.in-pit-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f29b6c;
    box-shadow: 0 0 0 3px rgba(242, 155, 108, 0.20);
    flex-shrink: 0;
    margin-top: 6px;
}

.in-panel-foot {
    padding-top: 28px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* --- why specialisation matters ------------------------------------------ */
.in-why {
    padding: 110px 0;
    background: var(--pearl-2);
}

.in-why-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 70px;
    align-items: start;
}

    .in-why-grid h2 {
        font-size: clamp(2rem, 3.6vw, 2.8rem);
        font-weight: 800;
        margin: 18px 0 0;
        line-height: 1.1;
        color: var(--ink);
    }

.in-why-body p {
    color: var(--muted);
    font-size: 1.06rem;
    line-height: 1.8;
    margin-bottom: 18px;
}

    .in-why-body p:last-child {
        margin-bottom: 0;
    }


/* ============================================================================
   CONTACT — The Engagement Brief  (.ct-*)
   ============================================================================ */

.ct-shell {
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

/* --- hero ----------------------------------------------------------------- */
.ct-hero {
    position: relative;
    padding: 180px 0 80px;
    isolation: isolate;
    background: var(--pearl);
}

    .ct-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(60% 50% at 80% 20%, rgba(158, 229, 192, 0.30), transparent 65%), radial-gradient(50% 50% at 20% 80%, rgba(168, 212, 255, 0.36), transparent 65%);
    }

    .ct-hero .skb-shell {
        position: relative;
        z-index: 2;
    }

.ct-hero-inner {
    max-width: 880px;
}

.ct-hero-title {
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1;
    margin: 22px 0 26px;
    color: var(--ink);
}

    .ct-hero-title .hero-line {
        display: block;
        overflow: hidden;
    }

    .ct-hero-title .accent {
        background: var(--flow);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.ct-hero-sub {
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    color: var(--muted);
    max-width: 620px;
    line-height: 1.6;
}

/* --- intake form card ----------------------------------------------------- */
.ct-intake {
    padding: 30px 0 120px;
    background: var(--pearl);
}

.ct-form-card {
    padding: 50px 56px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 30px 80px rgba(14, 26, 53, 0.10);
}

.ct-form {
    display: flex;
    flex-direction: column;
    gap: 42px;
}

.ct-section {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ct-section-bar {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.ct-section-num {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, rgba(168, 212, 255, 0.40), rgba(158, 229, 192, 0.28));
    border: 1px solid rgba(94, 193, 145, 0.35);
    font-family: var(--font-d);
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--mint-deep);
    letter-spacing: 0.04em;
}

.ct-section-title {
    font-family: var(--font-d);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
}

.ct-section-sub {
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 2px;
}

.ct-row.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.ct-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .ct-field label {
        font-size: 0.86rem;
        font-weight: 600;
        color: var(--ink);
    }

    .ct-field .req {
        color: var(--mint-deep);
        margin-left: 2px;
    }

    .ct-field .opt {
        color: var(--muted-2);
        font-weight: 400;
        margin-left: 4px;
        font-size: 0.82rem;
    }

.ct-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--pearl);
    border: 1px solid var(--line-2);
    color: var(--ink);
    font-family: var(--font-b);
    font-size: 0.96rem;
    transition: border-color .25s, box-shadow .25s, background .25s;
}

    .ct-input::placeholder {
        color: var(--muted-2);
    }

    .ct-input:focus {
        outline: none;
        border-color: var(--mint-deep);
        box-shadow: 0 0 0 3px rgba(94, 193, 145, 0.22);
        background: var(--surface);
    }

    .ct-input.error {
        border-color: #d97a8a;
        box-shadow: 0 0 0 3px rgba(217, 122, 138, 0.15);
    }

.ct-textarea {
    resize: vertical;
    min-height: 150px;
}

.ct-select {
    appearance: none;
    cursor: pointer;
    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 d='M1 1l5 5 5-5' stroke='%235cc191' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

    .ct-select option {
        background: var(--surface);
        color: var(--ink);
    }

.ct-err {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d97a8a;
    font-size: 0.82rem;
}

.ct-server-err {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(217, 122, 138, 0.10);
    border: 1px solid rgba(217, 122, 138, 0.35);
    color: #b96275;
    font-size: 0.9rem;
}

.ct-captcha {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ct-captcha-q {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    color: var(--ink);
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--pearl);
    border: 1px dashed var(--line-2);
}

    .ct-captcha-q i {
        color: var(--mint-deep);
        margin-right: 4px;
    }

    .ct-captcha-q strong {
        color: var(--blue-deep);
        font-weight: 800;
        font-family: var(--font-d);
    }

    .ct-captcha-q .req {
        color: var(--mint-deep);
        margin-left: 4px;
    }

.ct-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    background: var(--blue);
    color: #ffffff;
    font-family: var(--font-d);
    font-weight: 800;
    font-size: 1rem;
    box-shadow: var(--glow-blue);
    transition: transform .25s, box-shadow .25s, background .25s, opacity .25s;
}

    .ct-submit:hover:not(:disabled) {
        transform: translateY(-2px);
        background: var(--blue-2);
        box-shadow: 0 14px 40px rgba(79, 135, 224, 0.45);
    }

    .ct-submit:disabled {
        opacity: 0.7;
        cursor: progress;
    }

.ct-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: ctSpin 0.7s linear infinite;
}

@keyframes ctSpin {
    to {
        transform: rotate(360deg);
    }
}

.ct-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-2);
    font-size: 0.82rem;
    margin: 0;
}

    .ct-foot i {
        color: var(--mint-deep);
    }

/* success state */
.ct-success {
    text-align: center;
    padding: 50px 20px;
}

.ct-success-ico {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 24px;
    background: rgba(158, 229, 192, 0.22);
    border: 1px solid rgba(94, 193, 145, 0.40);
    color: var(--mint-deep);
    font-size: 2.8rem;
}

.ct-success h3 {
    font-size: 1.8rem;
    margin-bottom: 14px;
    color: var(--ink);
}

.ct-success p {
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.65;
    max-width: 460px;
    margin: 0 auto;
}

    .ct-success p strong {
        color: var(--ink);
    }

    .ct-success p em {
        color: var(--blue-deep);
        font-style: normal;
    }

/* --- horizontal contact band ---------------------------------------------- */
.ct-band {
    padding: 90px 0;
    background: var(--surface);
}

.ct-band-head {
    max-width: 640px;
    margin: 0 0 50px;
}

    .ct-band-head h2 {
        font-size: clamp(1.8rem, 3vw, 2.4rem);
        font-weight: 800;
        margin-top: 18px;
        color: var(--ink);
    }

.ct-band-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.ct-band-item {
    padding: 32px 28px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}

    .ct-band-item:not(.static):hover {
        border-color: rgba(94, 193, 145, 0.40);
        transform: translateY(-4px);
        box-shadow: var(--shadow-lift);
    }

    .ct-band-item > i {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: rgba(45, 108, 223, 0.10);
        color: var(--blue-deep);
        font-size: 1.3rem;
    }

.ct-band-label {
    font-family: var(--font-d);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mint-deep);
}

.ct-band-value {
    font-size: 1rem;
    color: var(--ink);
    line-height: 1.5;
    font-weight: 600;
}

.ct-band-cue {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--muted);
}

    .ct-band-cue i {
        color: var(--mint-deep);
        font-size: 0.88rem;
    }

.ct-band-item.static .ct-band-cue {
    color: var(--muted-2);
}

    .ct-band-item.static .ct-band-cue i {
        display: none;
    }

/* --- map ------------------------------------------------------------------ */
.ct-map {
    padding: 60px 0 120px;
    background: var(--pearl-2);
}

.ct-map-head {
    max-width: 560px;
    margin: 0 0 30px;
}

    .ct-map-head h2 {
        font-size: clamp(1.6rem, 2.6vw, 2rem);
        font-weight: 800;
        margin-top: 16px;
        color: var(--ink);
    }

.ct-map-frame {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    aspect-ratio: 16/7;
    box-shadow: var(--shadow-lift);
}

    .ct-map-frame iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

.ct-map-overlay {
    position: absolute;
    left: 22px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    border-radius: var(--r);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(94, 193, 145, 0.40);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    max-width: calc(100% - 44px);
    box-shadow: var(--shadow-card);
}

    .ct-map-overlay i {
        color: var(--mint-deep);
        font-size: 1.5rem;
    }

    .ct-map-overlay div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .ct-map-overlay strong {
        font-family: var(--font-d);
        font-weight: 800;
        font-size: 0.96rem;
        color: var(--ink);
    }

    .ct-map-overlay span {
        color: var(--muted);
        font-size: 0.86rem;
    }


/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
    /* ABOUT */
    .am-commit-grid {
        grid-template-columns: 1fr 1fr;
    }

    .am-founder-grid,
    .am-founder.reverse .am-founder-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .am-letterform {
        font-size: clamp(7rem, 28vw, 14rem);
    }

    /* SERVICES */
    .sv-practice-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sv-deliverables {
        position: static;
    }

    .sv-life-flow {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 40px;
    }

        .sv-life-flow::before {
            display: none;
        }

    /* INDUSTRIES */
    .in-tabbar {
        grid-template-columns: repeat(2, 1fr);
    }

    .in-panel-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .in-why-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* CONTACT */
    .ct-band-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 780px) {
    /* ABOUT */
    .am-hero {
        padding: 140px 0 70px;
    }

    .am-commit-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .am-founder, .am-founder.reverse {
        padding: 60px 0;
    }

        .am-founder + .am-founder {
            padding-top: 20px;
        }

        .am-founder-grid,
        .am-founder.reverse .am-founder-grid {
            grid-template-columns: 1fr;
            gap: 30px;
        }

        .am-founder.reverse .am-founder-portrait {
            order: -1;
        }

    .am-ledger-row {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 0;
    }

    .am-wontdo-list li {
        grid-template-columns: 44px 1fr;
        gap: 16px;
        padding: 22px;
    }

        .am-wontdo-list li > i {
            width: 44px;
            height: 44px;
            font-size: 1.2rem;
        }

    /* SERVICES */
    .sv-hero {
        padding: 140px 0 80px;
    }

    .sv-practice {
        padding: 70px 0;
    }

    .sv-practice-marker {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .sv-life-flow {
        grid-template-columns: 1fr 1fr;
    }

    .sv-support-row {
        grid-template-columns: 1fr 1fr;
    }

    /* INDUSTRIES */
    .in-hero {
        padding: 140px 0 80px;
    }

    .in-tabbar {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 8px;
    }

    .in-tab {
        padding: 14px 16px;
    }

    .in-panel {
        padding: 28px;
    }

    /* CONTACT */
    .ct-shell {
        padding: 0 24px;
    }

    .ct-hero {
        padding: 140px 0 60px;
    }

    .ct-form-card {
        padding: 32px 24px;
    }

    .ct-row.two {
        grid-template-columns: 1fr;
    }

    .ct-band {
        padding: 70px 0;
    }

    .ct-band-grid {
        grid-template-columns: 1fr;
    }

    .ct-band-item {
        padding: 24px 22px;
    }

    .ct-map-frame {
        aspect-ratio: 4/5;
    }

    .ct-map-overlay {
        left: 14px;
        right: 14px;
        bottom: 14px;
        max-width: none;
        padding: 12px 16px;
    }
}

@media (max-width: 460px) {
    .sv-life-flow {
        grid-template-columns: 1fr;
    }

    .sv-support-row {
        grid-template-columns: 1fr;
    }

    .am-letterform {
        font-size: clamp(5rem, 26vw, 9rem);
    }
}
/* ============================================================================
   INSIGHTS — The Publications Engine  (.is-*)
   ============================================================================
   Editorial card grid in the Big-Four idiom: featured lead article, topic
   filter chips, dated authored cards, newsletter signup. Pearl Trust light
   theme. Append to shili-pages.css.
   ----------------------------------------------------------------------------
   Accent gradient helpers (shared): is-grad-blue | is-grad-mint | is-grad-mixed
   ========================================================================== */

.is-grad-blue {
    background: linear-gradient(135deg, #7ab3ef 0%, #a8d4ff 100%);
}

.is-grad-mint {
    background: linear-gradient(135deg, #5cc191 0%, #9ee5c0 100%);
}

.is-grad-mixed {
    background: linear-gradient(135deg, #7ab3ef 0%, #5cc191 100%);
}

/* --- hero ----------------------------------------------------------------- */
.is-hero {
    position: relative;
    padding: 180px 0 70px;
    isolation: isolate;
    background: var(--pearl);
}

    .is-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(60% 50% at 20% 30%, rgba(168, 212, 255, 0.40), transparent 65%), radial-gradient(50% 50% at 88% 88%, rgba(158, 229, 192, 0.28), transparent 65%);
    }

    .is-hero .skb-shell {
        position: relative;
        z-index: 2;
    }

.is-hero-inner {
    max-width: 880px;
}

.is-hero-title {
    font-size: clamp(2.6rem, 6.5vw, 5.4rem);
    font-weight: 800;
    line-height: 1;
    margin: 22px 0 26px;
    color: var(--ink);
}

    .is-hero-title .hero-line {
        display: block;
        overflow: hidden;
    }

    .is-hero-title .accent {
        background: var(--flow);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.is-hero-sub {
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    color: var(--muted);
    max-width: 620px;
    line-height: 1.6;
}

/* --- featured article ----------------------------------------------------- */
.is-featured {
    padding: 30px 0 70px;
    background: var(--pearl);
}

.is-featured-card {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s, border-color 0.3s;
}

    .is-featured-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lift);
        border-color: rgba(94, 193, 145, 0.40);
    }

.is-featured-visual {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    padding: 26px;
    overflow: hidden;
}

    .is-featured-visual::after {
        /* subtle texture overlay on the gradient */
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.25) 1px, transparent 1.6px);
        background-size: 22px 22px;
        mask-image: radial-gradient(70% 70% at 70% 30%, black, transparent 80%);
        -webkit-mask-image: radial-gradient(70% 70% at 70% 30%, black, transparent 80%);
        opacity: 0.6;
    }

.is-featured-flag {
    position: absolute;
    top: 22px;
    left: 22px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    font-family: var(--font-d);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: var(--shadow-card);
    z-index: 1;
}

    .is-featured-flag i {
        color: #e6a93b;
    }

.is-featured-topic {
    position: relative;
    z-index: 1;
    font-family: var(--font-d);
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.02em;
    text-shadow: 0 2px 16px rgba(14, 26, 53, 0.18);
}

.is-featured-body {
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.is-featured-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.is-featured-body h2 {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.18;
    margin: 0 0 16px;
    color: var(--ink);
}

.is-featured-body p {
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0 0 26px;
}

.is-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.is-author-dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-d);
    font-weight: 800;
    font-size: 0.9rem;
    color: #ffffff;
    flex-shrink: 0;
}

.is-byline > div {
    display: flex;
    flex-direction: column;
}

.is-author-name {
    font-weight: 700;
    color: var(--ink);
    font-size: 0.94rem;
}

.is-author-role {
    font-size: 0.78rem;
    color: var(--mint-deep);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.is-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--blue-deep);
    transition: gap 0.25s;
}

.is-featured-card:hover .is-readmore {
    gap: 14px;
}

/* --- toolbar + filter chips ----------------------------------------------- */
.is-grid-section {
    padding: 80px 0 100px;
    background: var(--surface);
}

.is-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 44px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.is-grid-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    margin: 0;
    color: var(--ink);
}

.is-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.is-filter {
    padding: 9px 18px;
    border-radius: 100px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    color: var(--muted);
    font-family: var(--font-b);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.22s;
}

    .is-filter:hover {
        border-color: var(--mint-deep);
        color: var(--ink);
        transform: translateY(-1px);
    }

    .is-filter.is-active {
        background: linear-gradient(140deg, rgba(168, 212, 255, 0.40), rgba(158, 229, 192, 0.26));
        border-color: rgba(94, 193, 145, 0.45);
        color: var(--ink);
    }

/* --- article grid --------------------------------------------------------- */
.is-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.is-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transition: transform 0.28s cubic-bezier(.22,1,.36,1), box-shadow 0.28s, border-color 0.28s;
}

    .is-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lift);
        border-color: rgba(94, 193, 145, 0.40);
    }

.is-card-visual {
    position: relative;
    height: 150px;
    display: flex;
    align-items: flex-end;
    padding: 18px;
    overflow: hidden;
}

    .is-card-visual::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.25) 1px, transparent 1.6px);
        background-size: 20px 20px;
        mask-image: radial-gradient(80% 80% at 75% 25%, black, transparent 85%);
        -webkit-mask-image: radial-gradient(80% 80% at 75% 25%, black, transparent 85%);
        opacity: 0.5;
    }

.is-card-topic {
    position: relative;
    z-index: 1;
    font-family: var(--font-d);
    font-size: 1.05rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.01em;
}

.is-card-icon {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 1;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.85);
}

.is-card-body {
    padding: 24px 24px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.is-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.is-tag {
    font-family: var(--font-d);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mint-deep);
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(158, 229, 192, 0.16);
}

.is-date {
    font-size: 0.8rem;
    color: var(--muted-2);
}

.is-card-body h3 {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
    color: var(--ink);
}

.is-card-body p {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.is-card-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.is-byline-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
}

.is-author-dot-mini {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-d);
    font-weight: 800;
    font-size: 0.66rem;
    color: #ffffff;
}

.is-card-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-2);
    color: var(--mint-deep);
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}

.is-card:hover .is-card-arrow {
    background: var(--mint-deep);
    color: #ffffff;
    border-color: var(--mint-deep);
    transform: translateX(3px);
}

/* empty state */
.is-empty {
    text-align: center;
    padding: 70px 20px;
    color: var(--muted);
}

    .is-empty i {
        font-size: 2rem;
        color: var(--muted-2);
        display: block;
        margin-bottom: 14px;
    }

    .is-empty p {
        font-size: 1rem;
        margin: 0;
    }

/* --- newsletter subscribe ------------------------------------------------- */
.is-subscribe {
    padding: 30px 0 120px;
    background: var(--surface);
}

.is-subscribe-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    padding: 50px 56px;
    border-radius: var(--r-lg);
    background: var(--pearl-2);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

    .is-subscribe-card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(50% 80% at 90% 50%, rgba(168, 212, 255, 0.30), transparent 65%), radial-gradient(40% 60% at 10% 0%, rgba(158, 229, 192, 0.22), transparent 60%);
    }

.is-subscribe-copy {
    position: relative;
    z-index: 1;
}

    .is-subscribe-copy h2 {
        font-size: clamp(1.6rem, 2.8vw, 2.2rem);
        font-weight: 800;
        margin: 16px 0 14px;
        line-height: 1.15;
        color: var(--ink);
    }

    .is-subscribe-copy p {
        color: var(--muted);
        font-size: 1rem;
        line-height: 1.65;
        margin: 0;
    }

.is-subscribe-form {
    position: relative;
    z-index: 1;
}

    .is-subscribe-form label {
        display: block;
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 8px;
    }

.is-sub-row {
    display: flex;
    gap: 10px;
}

.is-sub-input {
    flex: 1;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    color: var(--ink);
    font-family: var(--font-b);
    font-size: 0.96rem;
    transition: border-color .25s, box-shadow .25s;
}

    .is-sub-input::placeholder {
        color: var(--muted-2);
    }

    .is-sub-input:focus {
        outline: none;
        border-color: var(--mint-deep);
        box-shadow: 0 0 0 3px rgba(94, 193, 145, 0.22);
    }

    .is-sub-input.error {
        border-color: #d97a8a;
        box-shadow: 0 0 0 3px rgba(217, 122, 138, 0.15);
    }

.is-sub-btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 24px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    background: var(--blue);
    color: #ffffff;
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 0.92rem;
    white-space: nowrap;
    box-shadow: var(--glow-blue);
    transition: background 0.25s, box-shadow 0.25s, transform 0.25s;
}

    .is-sub-btn [data-magnetic-inner] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .is-sub-btn:hover {
        background: var(--blue-2);
        box-shadow: 0 12px 32px rgba(79, 135, 224, 0.40);
    }

.is-sub-err {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d97a8a;
    font-size: 0.82rem;
    margin-top: 10px;
}

.is-sub-fine {
    display: block;
    font-size: 0.78rem;
    color: var(--muted-2);
    margin-top: 12px;
}

.is-sub-success {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    border-radius: 12px;
    background: rgba(158, 229, 192, 0.18);
    border: 1px solid rgba(94, 193, 145, 0.40);
    color: var(--ink);
    font-size: 0.96rem;
    font-weight: 600;
}

    .is-sub-success i {
        color: var(--mint-deep);
        font-size: 1.4rem;
    }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
    .is-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 880px) {
    .is-featured-card {
        grid-template-columns: 1fr;
    }

    .is-featured-visual {
        min-height: 200px;
    }

    .is-featured-body {
        padding: 32px 28px;
    }

    .is-subscribe-card {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 36px 28px;
    }
}

@media (max-width: 680px) {
    .is-hero {
        padding: 140px 0 50px;
    }

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

    .is-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .is-sub-row {
        flex-direction: column;
    }

    .is-sub-btn {
        justify-content: center;
    }
}
/* ============================================================================
   EDITORIAL RESTRAINT LAYER  —  append to shili-pages.css
   ----------------------------------------------------------------------------
   Inspired by EY / PwC / Deloitte: the prestige is in whitespace, calm rhythm
   and restraint, not effects. This layer sits AFTER all inner-page rules and
   gently:
     1. increases vertical breathing room on inner-page sections (~25-35%)
     2. widens the measure of lead paragraphs for a more editorial column
     3. softens hover transforms so motion reads as "considered", not "techy"
     4. ensures only the primary element animates per viewport
   Scoped to .imm-page so the Home page (its own rhythm) is untouched.
   ========================================================================== */

/* --- 1. More generous section rhythm on inner pages ----------------------- */
.skb-immersive.imm-page .am-commitments,
.skb-immersive.imm-page .am-ledger,
.skb-immersive.imm-page .am-wontdo,
.skb-immersive.imm-page .sv-practice,
.skb-immersive.imm-page .sv-lifecycle,
.skb-immersive.imm-page .sv-support,
.skb-immersive.imm-page .in-sectors,
.skb-immersive.imm-page .in-why,
.skb-immersive.imm-page .is-grid-section,
.skb-immersive.imm-page .ct-band,
.skb-immersive.imm-page .ct-map {
    padding-top: 150px;
    padding-bottom: 150px;
}

.skb-immersive.imm-page .am-founder {
    padding-top: 130px;
    padding-bottom: 130px;
}

/* Slightly larger gap between a section eyebrow/heading and its body */
.skb-immersive.imm-page .am-commit-grid,
.skb-immersive.imm-page .sv-support-row,
.skb-immersive.imm-page .in-panel-grid {
    gap: 32px;
}

/* --- 2. Editorial measure — calmer, wider lead paragraphs ----------------- */
.skb-immersive.imm-page .am-hero-sub,
.skb-immersive.imm-page .sv-hero-sub,
.skb-immersive.imm-page .in-hero-sub,
.skb-immersive.imm-page .ct-hero-sub,
.skb-immersive.imm-page .is-hero-sub {
    line-height: 1.72;
}

/* --- 3. Calmer hover transforms (less "spring", more "settle") ------------ */
.skb-immersive.imm-page .sv-support-card:hover,
.skb-immersive.imm-page .ct-band-item:not(.static):hover,
.skb-immersive.imm-page .is-card:hover,
.skb-immersive.imm-page .persona-card:hover {
    transform: translateY(-3px); /* was -4 / -5; gentler lift */
}

.skb-immersive.imm-page .am-wontdo-list li:hover,
.skb-immersive.imm-page .in-reg-list li:hover {
    transform: none; /* remove lateral nudge — calmer */
}

/* --- 4. Section eyebrows: subtle fade-slide just ahead of the heading ----- */
/* (GSAP reveals the parent; this gives the eyebrow a gentle lead-in feel
    without adding a second moving element to the viewport.) */
.skb-immersive.imm-page .skb-eyebrow {
    opacity: 0.95;
}

/* --- 5. Tighten the inner-page hero whitespace at the top ----------------- */
.skb-immersive.imm-page .am-hero,
.skb-immersive.imm-page .sv-hero,
.skb-immersive.imm-page .in-hero,
.skb-immersive.imm-page .ct-hero,
.skb-immersive.imm-page .is-hero {
    padding-top: 200px;
}

/* --- 6. Respect reduced motion — already global, reinforced here ---------- */
@media (prefers-reduced-motion: reduce) {
    .skb-immersive.imm-page * {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }
}

/* --- 7. Restraint scales back on small screens (whitespace is costly) ----- */
@media (max-width: 780px) {
    .skb-immersive.imm-page .am-commitments,
    .skb-immersive.imm-page .am-ledger,
    .skb-immersive.imm-page .am-wontdo,
    .skb-immersive.imm-page .am-founder,
    .skb-immersive.imm-page .sv-practice,
    .skb-immersive.imm-page .sv-lifecycle,
    .skb-immersive.imm-page .sv-support,
    .skb-immersive.imm-page .in-sectors,
    .skb-immersive.imm-page .in-why,
    .skb-immersive.imm-page .is-grid-section,
    .skb-immersive.imm-page .ct-band,
    .skb-immersive.imm-page .ct-map {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .skb-immersive.imm-page .am-hero,
    .skb-immersive.imm-page .sv-hero,
    .skb-immersive.imm-page .in-hero,
    .skb-immersive.imm-page .ct-hero,
    .skb-immersive.imm-page .is-hero {
        padding-top: 140px;
    }
}
/* ============================================================================
   INSIGHT DETAIL  (.id-*)  +  image-on-card overlay
   Append to shili-pages.css.
   ========================================================================== */

/* --- image fills the card/featured visual when present -------------------- */
.is-visual-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.is-card-visual.has-img::after,
.is-featured-visual.has-img::after {
    /* darken slightly so the topic label stays legible over any photo */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(14,26,53,0.10), rgba(14,26,53,0.55));
}

.is-card-visual.has-img .is-card-topic,
.is-card-visual.has-img .is-card-icon,
.is-featured-visual.has-img .is-featured-topic,
.is-featured-visual.has-img .is-featured-flag {
    position: relative;
    z-index: 2;
}

/* --- detail hero ---------------------------------------------------------- */
.id-hero {
    position: relative;
    padding: 170px 0 60px;
    isolation: isolate;
    background: var(--pearl);
    overflow: hidden;
}

.id-hero-grad {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.22;
    mask-image: linear-gradient(180deg, black, transparent 75%);
    -webkit-mask-image: linear-gradient(180deg, black, transparent 75%);
}

.id-hero .skb-shell {
    position: relative;
    z-index: 2;
}

.id-hero-inner {
    max-width: 820px;
}

.id-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--blue-deep);
    text-decoration: none;
    margin-bottom: 26px;
    transition: gap 0.25s;
}

    .id-back:hover {
        gap: 13px;
    }

.id-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.id-date {
    font-size: 0.85rem;
    color: var(--muted-2);
}

.id-title {
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 22px;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.id-excerpt {
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 30px;
    max-width: 700px;
}

.id-byline {
    display: flex;
    align-items: center;
    gap: 13px;
}

/* --- cover image ---------------------------------------------------------- */
.id-cover {
    padding: 10px 0 20px;
    background: var(--pearl);
}

.id-cover-frame {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
    aspect-ratio: 16 / 7;
    background: var(--surface);
}

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

/* --- body ----------------------------------------------------------------- */
.id-body-section {
    padding: 50px 0 80px;
    background: var(--pearl);
}

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

    .id-body p {
        font-size: 1.14rem;
        line-height: 1.85;
        color: var(--ink-2);
        margin: 0 0 26px;
    }

        .id-body p:first-child {
            /* gentle lead-paragraph emphasis */
            font-size: 1.24rem;
            color: var(--ink);
        }

.id-foot {
    max-width: 720px;
    margin: 50px auto 0;
    padding-top: 34px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.id-foot-author {
    display: flex;
    align-items: center;
    gap: 13px;
}

/* --- related -------------------------------------------------------------- */
.id-related {
    padding: 30px 0 110px;
    background: var(--surface);
}

.id-related-head {
    margin-bottom: 40px;
}

    .id-related-head h2 {
        font-size: clamp(1.6rem, 3vw, 2.2rem);
        font-weight: 800;
        margin: 16px 0 0;
        color: var(--ink);
    }

/* --- loading / not-found -------------------------------------------------- */
.id-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 40vh;
    color: var(--muted);
    font-size: 0.95rem;
}

.id-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(45,108,223,0.25);
    border-top-color: var(--blue);
    animation: idSpin .7s linear infinite;
}

@keyframes idSpin {
    to {
        transform: rotate(360deg);
    }
}

.id-notfound {
    max-width: 600px;
    padding: 60px 0;
}

    .id-notfound h1 {
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 800;
        margin: 16px 0 12px;
        color: var(--ink);
    }

    .id-notfound p {
        color: var(--muted);
        font-size: 1.05rem;
        margin: 0 0 28px;
    }

@media (max-width: 780px) {
    .id-hero {
        padding: 130px 0 40px;
    }

    .id-cover-frame {
        aspect-ratio: 4 / 3;
    }

    .id-body p {
        font-size: 1.06rem;
    }

        .id-body p:first-child {
            font-size: 1.14rem;
        }
}