/* =====================================================
   The Portal Guys, www-new
   Light agency style. Refined, premium, generous whitespace.
   Montserrat throughout; italic + accent color for emphasis.
   TPG brand blue used sparingly as accent. Subtle 1px borders.
   ===================================================== */

:root {
    /* Surfaces */
    --paper:        #FFFFFF;
    --paper-2:      #F7F8FC;
    --paper-3:      #EEF2FB;
    --tint-blue:    #F1F4FF;
    --tint-sky:     #EAF6FD;

    /* Brand */
    --blue:         #5E87DE;
    --blue-strong:  #4862C9;
    --blue-deep:    #3955B8;
    --sky:          #76BFE9;
    --blue-tint:    #DFE7F8;

    /* Ink */
    --ink:          #0F1B38;
    --ink-soft:     #3D4659;
    --ink-mute:     #6E7791;
    --ink-faint:    #9CA3B8;

    /* Lines */
    --line:         rgba(15, 27, 56, 0.08);
    --line-strong:  rgba(15, 27, 56, 0.14);

    /* Radii */
    --r-sm: 10px;
    --r:    14px;
    --r-md: 20px;
    --r-lg: 28px;

    /* Shadow: refined, layered */
    --sh-xs: 0 1px 2px rgba(15, 27, 56, 0.05);
    --sh-sm: 0 4px 14px rgba(15, 27, 56, 0.06), 0 1px 2px rgba(15, 27, 56, 0.04);
    --sh:    0 12px 40px rgba(15, 27, 56, 0.08), 0 2px 6px rgba(15, 27, 56, 0.04);
    --sh-lg: 0 30px 80px rgba(15, 27, 56, 0.12), 0 6px 14px rgba(15, 27, 56, 0.06);

    /* Fonts */
    --font-sans:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif:   Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ---------- Layout container ----------
   Replaces Bootstrap's .container (it was the only Bootstrap class used).
   Responsive max-widths mirror Bootstrap 5.3 so existing layout is unchanged. */
.container {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

body.tpg-body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--blue-deep); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--blue-strong); }

/* Inline knowledge-base term links auto-inserted in body prose (see partials/kb-autolink.php). */
.kb-ref { color: inherit; border-bottom: 1px dotted var(--blue-tint); text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.kb-ref:hover { color: var(--blue-deep); border-bottom-color: var(--blue); }

::selection { background: var(--blue-tint); color: var(--ink); }

.tpg-skip { position: absolute; left: -9999px; top: -9999px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 6px; }
.tpg-skip:focus { left: 12px; top: 12px; z-index: 9999; }
.tpg-visually-hidden {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important; border: 0 !important;
}

/* ---------- Typography ---------- */

h1, h2, h3, h4, h5 {
    font-family: var(--font-sans);
    color: var(--ink);
    font-weight: 600;
    margin: 0;
    line-height: 1.06;
    letter-spacing: -0.025em;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); letter-spacing: -0.035em; font-weight: 600; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.25; letter-spacing: -0.02em; }
h5 { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }

.serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--blue-deep);
}

.lede {
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 620px;
}
.lede--sm { font-size: 16px; }

p { color: var(--ink-soft); margin: 0; }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14.5px;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--sh-xs);
}
.btn:hover { background: #1A2745; color: var(--paper); transform: translateY(-1px); box-shadow: var(--sh-sm); }
.btn--primary { background: var(--blue); }
.btn--primary:hover { background: var(--blue-deep); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink-mute); box-shadow: none; }
.btn--ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink); }
.btn--lg { padding: 14px 26px; font-size: 15px; }
.btn i { font-size: 1em; transition: transform .2s ease; }
.btn:hover i { transform: translate(1px, -1px); }

.btn-text {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink);
    font-weight: 500;
    font-size: 14.5px;
    transition: gap .2s ease, color .2s ease;
}
.btn-text:hover { gap: 10px; color: var(--blue-deep); }

/* ---------- Header / nav ---------- */

.tpg-header {
    position: sticky; top: 0; z-index: 70;
    padding: 18px 0;
    background: rgba(255, 255, 255, 0);
    transition: background-color .25s ease, border-color .25s ease, padding .25s ease, box-shadow .25s ease;
    border-bottom: 1px solid transparent;
}
.tpg-header.is-scrolled {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-color: var(--line);
    padding: 12px 0;
    box-shadow: 0 1px 0 rgba(15,27,56,0.02), 0 8px 24px rgba(15,27,56,0.04);
}
.tpg-header__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; }

.tpg-logo { display: inline-flex; color: var(--ink); transition: opacity .2s ease; }
.tpg-logo:hover { opacity: 0.75; }
.tpg-logo svg { width: 142px; height: auto; }

.tpg-nav { display: flex; align-items: center; gap: 32px; }
.tpg-nav__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 4px; align-items: center;
}

/* Top-level link */
.tpg-nav__item { position: relative; }
.tpg-nav__link {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink-soft);
    border-radius: 999px;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.tpg-nav__link::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: 999px;
    background: var(--paper-2);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1);
    z-index: -1;
}
.tpg-nav__link > * { position: relative; z-index: 1; }
.tpg-nav__link:hover { color: var(--ink); }
.tpg-nav__link:hover::before {
    opacity: 1;
    transform: scale(1);
}
.tpg-nav__item.is-active > .tpg-nav__link {
    color: var(--blue-deep);
    font-weight: 600;
}
.tpg-nav__item.is-active > .tpg-nav__link::before {
    opacity: 1;
    transform: scale(1);
    background: var(--tint-blue);
}

/* Home icon-style item */
.tpg-nav__link--icon {
    padding: 9px 12px;
    color: var(--ink-mute);
}
.tpg-nav__link--icon i { font-size: 16px; }
.tpg-nav__link--icon span {
    font-size: 14.5px;
    font-weight: 500;
}
.tpg-nav__item--icon.is-active .tpg-nav__link--icon i { color: var(--blue-deep); }
@media (min-width: 992px) {
    .tpg-nav__link--icon span {
        display: none;
    }
    .tpg-nav__link--icon {
        padding: 9px 11px;
    }
    .tpg-nav__link--icon i { font-size: 17px; }
}

.tpg-nav__chevron {
    font-size: 11px;
    transition: transform .25s ease;
    color: var(--ink-mute);
}
.tpg-nav__item--has-mega:hover .tpg-nav__chevron,
.tpg-nav__item--has-mega:focus-within .tpg-nav__chevron {
    transform: rotate(180deg);
    color: var(--ink);
}

/* Mega panel */
.tpg-mega {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: min(720px, calc(100vw - 40px));
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: 0 24px 60px rgba(15,27,56,0.12), 0 4px 14px rgba(15,27,56,0.06);
    padding: 22px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .2s ease, transform .25s ease, visibility 0s linear .25s;
    z-index: 80;
}
.tpg-mega::before {
    content: "";
    position: absolute;
    top: -10px; left: 0; right: 0;
    height: 10px;
}
.tpg-nav__item--has-mega:hover .tpg-mega,
.tpg-nav__item--has-mega:focus-within .tpg-mega {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity .2s ease, transform .25s ease, visibility 0s linear 0s;
}
.tpg-mega__inner { display: flex; flex-direction: column; gap: 14px; }
.tpg-mega__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-mute);
    font-weight: 500;
    padding: 0 8px;
}
.tpg-mega__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.tpg-mega__card {
    display: grid;
    grid-template-columns: 36px 1fr 16px;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 12px;
    color: var(--ink);
    transition: background-color .2s ease;
    border: 1px solid transparent;
}
.tpg-mega__card:hover,
.tpg-mega__card:focus-visible {
    background: var(--paper-2);
    outline: none;
}
.tpg-mega__card.is-active { background: var(--tint-blue); border-color: var(--blue-tint); }
.tpg-mega__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--tint-blue);
    color: var(--blue-deep);
    border-radius: 10px;
    font-size: 16px;
}
.tpg-mega__card h5 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; }
.tpg-mega__card p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-mute); line-height: 1.4; }
.tpg-mega__arrow {
    color: var(--ink-faint);
    font-size: 14px;
    transition: transform .2s ease, color .2s ease;
}
.tpg-mega__card:hover .tpg-mega__arrow { color: var(--blue-deep); transform: translateX(2px); }
.tpg-mega__all {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 4px 8px 4px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    font-weight: 500;
    color: var(--blue-deep);
}
.tpg-mega__all i { transition: transform .2s ease; }
.tpg-mega__all:hover i { transform: translateX(3px); }

/* Meta (lang switcher + CTA) */
.tpg-nav__meta { display: flex; align-items: center; gap: 16px; }
.tpg-lang {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
}
.tpg-lang__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-decoration: none;
    opacity: 0.5;
    transition: opacity .15s ease, background-color .15s ease, transform .15s ease;
    overflow: hidden;
}
.tpg-lang__option img {
    width: 18px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
    box-shadow: 0 0 0 1px rgba(15, 27, 56, 0.08);
}
.tpg-lang__option:hover { opacity: 1; background: var(--paper-2); transform: scale(1.06); }
.tpg-lang__option.is-active {
    opacity: 1;
    background: var(--paper-2);
    box-shadow: inset 0 0 0 1.5px var(--ink-mute);
}
.tpg-nav__cta {
    padding: 10px 20px;
    font-size: 13.5px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
    color: var(--paper);
    box-shadow: 0 4px 12px rgba(72, 98, 201, 0.25), inset 0 1px 0 rgba(255,255,255,0.18);
    transition: box-shadow .25s ease, transform .15s ease, filter .25s ease;
}
.tpg-nav__cta:hover {
    background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%);
    box-shadow: 0 8px 20px rgba(72, 98, 201, 0.32), inset 0 1px 0 rgba(255,255,255,0.22);
    transform: translateY(-1px);
    filter: brightness(1.05);
}
.tpg-nav__cta:hover i { transform: translate(1px, -1px); }

.tpg-nav__toggle {
    display: none;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    width: 40px; height: 40px;
    cursor: pointer;
    align-items: center; justify-content: center;
    color: var(--ink);
    font-size: 18px;
    transition: background-color .2s ease, border-color .2s ease;
}
.tpg-nav__toggle:hover { background: var(--paper-2); border-color: var(--ink-mute); }

@media (max-width: 991px) {
    .tpg-nav__toggle { display: inline-flex; }
    .tpg-nav {
        position: absolute; top: calc(100% + 8px); left: 16px; right: 16px;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        box-shadow: var(--sh);
        flex-direction: column; align-items: stretch;
        gap: 4px;
        padding: 0 14px;
        max-height: 0; overflow: hidden;
        transition: max-height .3s ease, padding .3s ease;
    }
    .tpg-header.is-open .tpg-nav { max-height: 720px; padding: 18px 14px; overflow: auto; }
    .tpg-nav__list { flex-direction: column; gap: 2px; align-items: stretch; }
    .tpg-nav__item { width: 100%; }
    .tpg-nav__link {
        padding: 12px 12px;
        font-size: 15px;
        justify-content: space-between;
    }
    .tpg-nav__link span::after { display: none; }
    .tpg-nav__item.is-active > .tpg-nav__link { color: var(--blue-deep); }
    .tpg-nav__chevron { display: none; }

    /* Mobile: mega panel inline, always expanded under "Wat we doen" */
    .tpg-mega {
        position: static;
        transform: none;
        width: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        padding: 4px 4px 10px;
        box-shadow: none;
        border: none;
        background: transparent;
    }
    .tpg-mega::before { display: none; }
    .tpg-mega__grid { grid-template-columns: 1fr; }
    .tpg-mega__card { padding: 10px 12px; }
    .tpg-mega__label { padding: 0 12px; }

    .tpg-nav__meta {
        justify-content: space-between;
        padding-top: 14px;
        margin-top: 6px;
        border-top: 1px solid var(--line);
    }
    .tpg-nav__cta { flex: 1; justify-content: center; }
}

/* ---------- Hero ---------- */

.tpg-hero {
    position: relative;
    padding: 70px 0 110px;
    overflow: hidden;
    isolation: isolate;
}
@media (min-width: 992px) {
    .tpg-hero { padding: 100px 0 140px; }
}
.tpg-hero::before {
    content: "";
    position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(900px 500px at 50% -10%, var(--tint-sky), transparent 60%),
        radial-gradient(700px 400px at 80% 30%, var(--tint-blue), transparent 65%);
}
.tpg-hero::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 90px;
    background: linear-gradient(180deg, rgba(255,255,255,0), var(--paper));
    z-index: -1; pointer-events: none;
}

.tpg-hero__inner { text-align: center; max-width: 920px; margin: 0 auto; }
.tpg-hero--page { padding: 60px 0 80px; }
@media (min-width: 992px) { .tpg-hero--page { padding: 90px 0 100px; } }
.tpg-hero h1 { margin: 26px 0 22px; }
.tpg-hero .lede { margin: 0 auto; }
.tpg-hero__actions {
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: center;
    margin-top: 34px;
}
.tpg-hero__hint {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 22px;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--ink-mute);
}
.tpg-hero__hint i { color: var(--blue); }

/* Hero UI mockup */
.tpg-hero__mockup {
    margin: 72px auto 0;
    max-width: 1080px;
    position: relative;
}
.tpg-hero__mockup-frame {
    position: relative;
    border-radius: var(--r-lg);
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}
.tpg-hero__mockup-frame::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent 60%);
    pointer-events: none;
}

/* Floating chip pills around the mockup */
.tpg-chip {
    position: absolute;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 14px 8px 10px;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--sh-sm);
    z-index: 5;
    color: var(--ink);
}
.tpg-chip__ico {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--tint-blue);
    color: var(--blue-deep);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.tpg-chip__ico--good { background: #DCFCE7; color: #047857; }
.tpg-chip__ico--alert { background: #FEF3C7; color: #B45309; }
.tpg-chip strong { font-weight: 600; }
.tpg-chip small { color: var(--ink-mute); font-weight: 400; }

.tpg-chip--a { top: 6%; left: -3%; animation: float-a 7s ease-in-out infinite; }
.tpg-chip--b { top: 18%; right: -3%; animation: float-b 8s ease-in-out infinite; }
.tpg-chip--c { bottom: 14%; left: -2%; animation: float-c 9s ease-in-out infinite; }
@keyframes float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes float-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes float-c { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 767px) { .tpg-chip { display: none; } }

/* ---------- Logo cloud ---------- */

.tpg-logos {
    padding: 60px 0 80px;
    text-align: center;
}
.tpg-logos__label {
    font-family: var(--font-sans);
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 32px;
}
.tpg-logos__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px 40px;
    align-items: center;
    justify-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 991px) { .tpg-logos__grid { grid-template-columns: repeat(4, 1fr); gap: 22px 30px; } }
@media (max-width: 575px) { .tpg-logos__grid { grid-template-columns: repeat(3, 1fr); gap: 18px 20px; } }
.tpg-logos__grid img {
    max-height: 32px; width: auto;
    opacity: 0.55;
    filter: grayscale(1);
    transition: opacity .25s ease, filter .25s ease;
}
.tpg-logos__grid a:hover img { opacity: 0.85; filter: grayscale(0.5); }

/* ── Scrolling client marquee ("Deze bedrijven gingen je voor") ── */
.tpg-marquee {
    padding: 52px 0;
    text-align: center;
    overflow: hidden;
}
.tpg-marquee--tint {
    background: var(--paper-2);
    border-top: 1px solid var(--blue-tint);
    border-bottom: 1px solid var(--blue-tint);
}
.tpg-marquee__label {
    font-family: var(--font-sans);
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 28px;
}
.tpg-marquee__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.tpg-marquee__track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 64px;
    animation: tpg-marquee-scroll 45s linear infinite;
}
.tpg-marquee:hover .tpg-marquee__track { animation-play-state: paused; }
.tpg-marquee__track a { flex: 0 0 auto; display: inline-flex; }
.tpg-marquee__track img {
    max-height: 34px; width: auto;
    opacity: 0.55;
    filter: grayscale(1);
    transition: opacity .25s ease, filter .25s ease;
}
.tpg-marquee__track img:hover { opacity: 0.9; filter: grayscale(0); }
@keyframes tpg-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (max-width: 575px) { .tpg-marquee__track { gap: 44px; } .tpg-marquee__track img { max-height: 28px; } }
@media (prefers-reduced-motion: reduce) {
    .tpg-marquee__viewport { -webkit-mask-image: none; mask-image: none; }
    .tpg-marquee__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 28px 52px;
    }
    .tpg-marquee__track a[aria-hidden="true"] { display: none; }
}

/* "See all FAQs" link under an on-page FAQ block */
.tpg-faq__more { text-align: center; margin-top: 30px; }
.tpg-faq__more a { font-weight: 600; }
.tpg-faq__more i { font-size: .9em; vertical-align: -1px; }

/* ── Knowledge base (kennisbank) ── */
.tpg-kb-def {
    max-width: 760px; margin: 0 auto;
    background: var(--tint-blue);
    border-left: 4px solid var(--blue);
    border-radius: 12px;
    padding: 24px 28px;
}
.tpg-kb-def__label {
    display: block;
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--blue-deep); font-weight: 700; margin-bottom: 8px;
}
.tpg-kb-def__text { font-size: 19px; line-height: 1.55; color: var(--ink); margin: 0; }
.tpg-kb-toc {
    max-width: 760px;
    margin: 22px auto 0;
    padding: 18px 20px;
    border: 1px solid var(--blue-tint);
    border-radius: 12px;
    background: var(--paper);
}
.tpg-kb-toc__label {
    display: block;
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-mute); margin-bottom: 10px;
}
.tpg-kb-toc__list {
    display: flex; flex-wrap: wrap; gap: 8px 14px;
    margin: 0; padding: 0; list-style: none;
}
.tpg-kb-toc__list a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    color: var(--blue-deep);
    font-size: 14px;
    font-weight: 600;
}
.tpg-kb-body { max-width: 760px; margin: 40px auto 0; }
.tpg-kb-body h2 { font-size: 24px; margin: 36px 0 12px; }
.tpg-kb-body h2[id] { scroll-margin-top: 110px; }
.tpg-kb-body h2:first-child { margin-top: 0; }
.tpg-kb-body p { margin: 0 0 16px; color: var(--ink-soft); line-height: 1.7; }
.tpg-kb-body ul { margin: 0 0 16px; padding-left: 20px; color: var(--ink-soft); line-height: 1.7; }
.tpg-kb-body li { margin-bottom: 6px; }
.tpg-kb-terms { max-width: 760px; margin: 36px auto 0; }
.tpg-kb-terms__label {
    display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-mute); margin-bottom: 12px;
}
.tpg-kb-terms__list { display: flex; flex-wrap: wrap; gap: 10px; }
.tpg-kb-chip {
    display: inline-block; padding: 7px 14px; border-radius: 999px;
    background: var(--paper-2); border: 1px solid var(--blue-tint);
    color: var(--blue-deep); font-size: 14px; font-weight: 600;
    transition: background .2s ease, border-color .2s ease;
}
.tpg-kb-chip:hover { background: var(--tint-blue); border-color: var(--blue); }

/* KB listing */
.tpg-kb-search { max-width: 520px; margin: 0 auto; position: relative; }
.tpg-kb-search input {
    width: 100%; padding: 14px 18px 14px 46px; border-radius: 999px;
    border: 1px solid var(--blue-tint); background: var(--paper);
    font-family: var(--font-sans); font-size: 15px; color: var(--ink);
}
.tpg-kb-search input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(94, 135, 222, .18);
}
.tpg-kb-search__ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink-mute); }
.tpg-kb-group { margin-top: 48px; }
.tpg-kb-group__title { font-size: 22px; margin-bottom: 18px; }
.tpg-kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 991px) { .tpg-kb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .tpg-kb-grid { grid-template-columns: 1fr; } }
.tpg-kb-card {
    display: block; padding: 20px 22px; border-radius: 12px;
    background: var(--paper); border: 1px solid var(--blue-tint);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tpg-kb-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,27,56,.06); }
.tpg-kb-card h3 { font-size: 17px; margin: 0 0 6px; color: var(--ink); font-family: var(--font-sans); }
.tpg-kb-card p { font-size: 14px; line-height: 1.55; color: var(--ink-mute); margin: 0; }
.tpg-kb-empty { text-align: center; color: var(--ink-mute); margin-top: 32px; display: none; }
.kb-ref:focus-visible,
.tpg-kb-chip:focus-visible,
.tpg-kb-card:focus-visible,
.tpg-kb-toc__list a:focus-visible {
    outline: 2px solid var(--blue-deep);
    outline-offset: 3px;
}
.tpg-kb-card:focus-visible {
    border-color: var(--blue);
    box-shadow: 0 8px 24px rgba(15,27,56,.06);
}

/* ---------- Legal text ---------- */

.tpg-legal {
    max-width: 860px;
    margin: 0 auto;
}
.tpg-legal__meta {
    margin-bottom: 26px;
    color: var(--ink-mute);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tpg-legal section {
    padding: 28px 0;
    border-top: 1px solid var(--line);
}
.tpg-legal section:first-of-type { padding-top: 0; border-top: 0; }
.tpg-legal h2 {
    margin-bottom: 14px;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: 0;
}
.tpg-legal p,
.tpg-legal li {
    color: var(--ink-soft);
    font-size: 15.5px;
    line-height: 1.75;
}
.tpg-legal p { margin: 0 0 12px; }
.tpg-legal p:last-child { margin-bottom: 0; }
.tpg-legal ul {
    margin: 0 0 12px;
    padding-left: 20px;
}
.tpg-legal li { margin-bottom: 8px; }
.tpg-legal strong { color: var(--ink); font-weight: 650; }
@media (max-width: 575px) {
    .tpg-legal h2 { font-size: 19px; }
    .tpg-legal p,
    .tpg-legal li { font-size: 15px; }
}

/* ---------- Sections ---------- */

.section { padding: 110px 0; position: relative; }
@media (max-width: 767px) { .section { padding: 80px 0; } }
.section--tint  { background: var(--paper-2); }
.section--ink   { background: var(--ink); color: var(--paper); }
.section--ink h2, .section--ink h3, .section--ink h5 { color: var(--paper); }
.section--ink .lede, .section--ink p { color: rgba(255, 255, 255, 0.72); }
.section--ink .serif { color: var(--sky); }

.section__head { max-width: 720px; margin-bottom: 64px; }
.section__head h2 { margin-top: 20px; }
.section__head .lede { margin-top: 20px; }

.section__head--split {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap;
    max-width: none;
}
.section__head--split > div { max-width: 720px; }

/* ---------- Problem grid (refined) ---------- */

.tpg-pain {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 16px;
}
@media (max-width: 991px) { .tpg-pain { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .tpg-pain { grid-template-columns: 1fr; } }

.tpg-pain__card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 28px 26px;
    box-shadow: var(--sh-xs);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.tpg-pain__card:hover {
    box-shadow: var(--sh-sm);
    border-color: var(--line-strong);
    transform: translateY(-2px);
}
.tpg-pain__before {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-sans);
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-mute);
}
.tpg-pain__before::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.tpg-pain__text {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.5;
    margin-top: 12px;
}
.tpg-pain__after {
    color: var(--ink);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--line-strong);
    display: flex; align-items: flex-start; gap: 10px;
}
.tpg-pain__after i { color: var(--blue); margin-top: 3px; }

/* ---------- Approach (numbered list) ---------- */

.tpg-approach {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--line);
}
.tpg-approach__step {
    display: grid;
    grid-template-columns: 80px 1fr 1fr;
    gap: 40px;
    padding: 38px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
}
@media (max-width: 767px) {
    .tpg-approach__step { grid-template-columns: 64px 1fr; }
    .tpg-approach__step p { grid-column: 2; }
}
.tpg-approach__num {
    font-style: italic;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--blue);
    font-weight: 500;
    letter-spacing: -0.02em;
}
.tpg-approach__title { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.tpg-approach__step p { color: var(--ink-soft); font-size: 15.5px; }

/* ---------- Services ---------- */

.tpg-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 991px) { .tpg-services { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .tpg-services { grid-template-columns: 1fr; } }

.tpg-service {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 30px;
    box-shadow: var(--sh-xs);
    transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
    display: flex; flex-direction: column; gap: 14px;
}
.tpg-service:hover {
    box-shadow: var(--sh-sm);
    transform: translateY(-3px);
    border-color: var(--line-strong);
}
.tpg-service__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--tint-blue);
    color: var(--blue-deep);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px;
    border: 1px solid var(--blue-tint);
}
.tpg-service h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; }
.tpg-service p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }
.tpg-service__tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 6px;
}
.tpg-service__tags span {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--ink-mute);
    padding: 4px 10px;
    background: var(--paper-2);
    border-radius: 999px;
    border: 1px solid var(--line);
}

/* ---------- Stats row ---------- */

.tpg-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-top: 16px;
}
@media (max-width: 767px) { .tpg-stats { grid-template-columns: repeat(2, 1fr); } }

.tpg-stat {
    padding: 36px 28px;
    border-right: 1px solid var(--line);
}
.tpg-stat:last-child { border-right: none; }
@media (max-width: 767px) {
    .tpg-stat:nth-child(2) { border-right: none; }
    .tpg-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.tpg-stat__num {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    letter-spacing: -0.04em;
    color: var(--ink);
    line-height: 1;
    display: block;
}
.tpg-stat__num .serif { color: var(--blue); }
.tpg-stat__label {
    margin-top: 10px;
    font-size: 13.5px;
    color: var(--ink-mute);
    display: block;
}

/* ---------- Cases ---------- */

.tpg-cases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
@media (max-width: 991px) { .tpg-cases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .tpg-cases { grid-template-columns: 1fr; } }

.tpg-case {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-xs);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.tpg-case:hover {
    box-shadow: var(--sh);
    border-color: var(--line-strong);
    transform: translateY(-4px);
}
.tpg-case--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.tpg-case--link:hover,
.tpg-case--link:focus { color: inherit; }
.tpg-case--link:hover h3 { color: var(--blue-deep); }
.tpg-case--link:focus-visible {
    outline: 2px solid var(--blue-deep);
    outline-offset: 3px;
}
.tpg-case__shot {
    aspect-ratio: 4 / 3;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    position: relative;
}
.tpg-case__shot--with-logo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.32) 100%);
    pointer-events: none;
    z-index: 2;
}
.tpg-case__shot-logo {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(18px, 9%, 36px);
    z-index: 3;
    pointer-events: none;
}
.tpg-case__shot-logo-pill {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    padding: clamp(12px, 4%, 18px) clamp(18px, 6%, 26px);
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(0,0,0,0.18);
    max-width: 76%; max-height: 52%;
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box;
    transition: transform .3s ease;
}
.tpg-case__shot-logo-pill img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    display: block;
}
.tpg-case:hover .tpg-case__shot-logo-pill { transform: scale(1.04); }
.tpg-case__shot img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .6s ease;
}
.tpg-case:hover .tpg-case__shot img { transform: scale(1.03); }
.tpg-case__shot--logo {
    display: flex; align-items: center; justify-content: center;
    padding: 38px;
    background:
        radial-gradient(420px 240px at 70% 30%, var(--tint-blue), transparent 65%),
        linear-gradient(180deg, var(--paper-2), var(--paper));
}
.tpg-case__shot--logo img {
    width: auto; height: auto;
    max-width: 62%; max-height: 56%;
    object-fit: contain;
    filter: saturate(1) contrast(1.02);
}
.tpg-case:hover .tpg-case__shot--logo img { transform: none; }
.tpg-case__shot--wordmark {
    display: flex; align-items: center; justify-content: center;
    padding: 32px;
    background:
        radial-gradient(420px 220px at 70% 30%, rgba(118,191,233,0.32), transparent 65%),
        linear-gradient(135deg, var(--blue-deep), var(--blue));
    color: var(--paper);
    position: relative;
}
.tpg-case__shot--wordmark::before {
    content: "";
    position: absolute; top: 14px; left: 14px;
    width: 28px; height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.75)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5L12 4l9 5.5'/%3E%3Cpath d='M5 8.5v8.5l7 4 7-4V8.5'/%3E%3Cpath d='M12 11.5v8.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
}
.tpg-case__shot--wordmark span {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-align: center;
    line-height: 1.15;
    max-width: 80%;
}
.tpg-case__client-text {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.tpg-case__tag {
    position: absolute; top: 14px; left: 14px;
    z-index: 4;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.04em;
}
.tpg-case__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tpg-case__client { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; min-height: 40px; }
.tpg-case__client img { height: 36px; max-width: 160px; width: auto; object-fit: contain; }
.tpg-case h3 { font-size: 1.15rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
.tpg-case p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; flex: 1; }
.tpg-case__cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 500;
    color: var(--blue-deep);
    margin-top: 4px;
}
.tpg-case__cta i { transition: transform .2s ease; }
.tpg-case:hover .tpg-case__cta i { transform: translateX(3px); }

/* ---------- Integrations grid ---------- */

.tpg-int-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    overflow: hidden;
    margin-top: 12px;
    box-shadow: var(--sh-xs);
}
@media (max-width: 991px) { .tpg-int-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575px) { .tpg-int-grid { grid-template-columns: repeat(3, 1fr); } }

.tpg-int {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 22px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transition: background-color .2s ease;
}
.tpg-int:hover { background: var(--paper-2); }
.tpg-int img { max-height: 40%; max-width: 80%; object-fit: contain; opacity: 0.7; filter: grayscale(0.6); transition: opacity .2s ease, filter .2s ease; }
.tpg-int:hover img { opacity: 1; filter: none; }

/* clean right/bottom edges */
@media (min-width: 992px) {
    .tpg-int:nth-child(8n) { border-right: none; }
    .tpg-int:nth-last-child(-n+8) { border-bottom: none; }
}
@media (max-width: 991px) and (min-width: 576px) {
    .tpg-int:nth-child(4n) { border-right: none; }
}
@media (max-width: 575px) {
    .tpg-int:nth-child(3n) { border-right: none; }
}

/* ---------- Testimonial / pull quote ---------- */

.tpg-quote {
    background: var(--paper-2);
    padding: 110px 0;
    text-align: center;
}
.tpg-quote blockquote {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.3;
    letter-spacing: -0.02em;
    max-width: 880px;
    margin: 24px auto 28px;
    color: var(--ink);
}
.tpg-quote blockquote .serif { color: var(--blue-deep); }
.tpg-quote cite {
    font-style: normal;
    font-size: 13px;
    color: var(--ink-mute);
    font-family: var(--font-sans);
    letter-spacing: 0.04em;
}

/* ---------- Final CTA ---------- */

.tpg-cta { padding: 110px 0; }
.tpg-cta__inner {
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--r-lg);
    padding: clamp(48px, 6vw, 80px);
    position: relative;
    overflow: hidden;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}
.tpg-cta__inner::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(500px 280px at 100% 0%, rgba(118, 191, 233, 0.20), transparent 60%),
        radial-gradient(400px 220px at 0% 100%, rgba(94, 135, 222, 0.18), transparent 60%);
}
.tpg-cta__inner > * { position: relative; z-index: 2; }
.tpg-cta__inner h2 { color: var(--paper); margin: 18px auto; max-width: 720px; }
.tpg-cta__inner .lede { color: rgba(255,255,255, 0.72); margin: 0 auto 32px; }
.tpg-cta__inner .serif { color: var(--sky); }
.tpg-cta__inner .btn:not(.btn--ghost) { background: var(--paper); color: var(--ink); }
.tpg-cta__inner .btn--ghost {
    background: transparent;
    color: var(--paper);
    border-color: var(--paper);
}
.tpg-cta__inner .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--paper);
    border-color: var(--paper);
}
.tpg-cta__inner .btn:hover { background: var(--tint-blue); color: var(--ink); }
.tpg-cta__actions { display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Footer ---------- */

.tpg-footer {
    background: var(--paper-2);
    color: var(--ink-soft);
    padding: 80px 0 30px;
    border-top: 1px solid var(--line);
}
.tpg-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 991px) { .tpg-footer__top { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 575px) { .tpg-footer__top { grid-template-columns: 1fr; } }

.tpg-footer__logo { color: var(--ink); display: inline-block; margin-bottom: 16px; }
.tpg-footer__logo svg { width: 160px; height: auto; }
.tpg-footer__lede { color: var(--ink-soft); max-width: 360px; font-size: 14.5px; }

.tpg-footer h5 {
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 11.5px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 18px;
}
.tpg-footer ul { list-style: none; padding: 0; margin: 0; }
.tpg-footer li { margin-bottom: 10px; }
.tpg-footer a { color: var(--ink-soft); font-size: 14.5px; }
.tpg-footer a:hover { color: var(--ink); }

.tpg-footer__contact li {
    display: flex; gap: 12px; align-items: flex-start;
    line-height: 1.5;
}
.tpg-footer__contact i { color: var(--blue); margin-top: 4px; }

.tpg-footer__bottom {
    margin-top: 56px; padding-top: 22px;
    border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--ink-mute);
}
.tpg-footer__bottom a { color: var(--ink-mute); padding: 0 4px; }
.tpg-footer__bottom a:hover, .tpg-footer__bottom a.is-active { color: var(--ink); }

/* ---------- Reveal ---------- */

[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s ease; }
[data-reveal].is-in { opacity: 1; transform: translateY(0); }

/* ---------- Mockup internals (reusable shapes) ---------- */

.ui-mockup {
    background: var(--paper);
    overflow: hidden;
}
.ui-mockup__bar {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--paper-2);
}
.ui-mockup__bar-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.ui-mockup__bar-dot:nth-child(1) { background: #FF6B5C; }
.ui-mockup__bar-dot:nth-child(2) { background: #FACC15; }
.ui-mockup__bar-dot:nth-child(3) { background: #86EFAC; }
.ui-mockup__bar-url {
    margin-left: 14px;
    padding: 5px 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--ink-mute);
    flex: 1; max-width: 340px;
}
.ui-mockup__bar-actions { display: flex; gap: 6px; margin-left: auto; }
.ui-mockup__bar-action {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: var(--paper);
    border: 1px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-mute);
    font-size: 12px;
}

.ui-mockup__body { display: grid; grid-template-columns: 220px 1fr; min-height: 460px; }
@media (max-width: 767px) { .ui-mockup__body { grid-template-columns: 1fr; min-height: 380px; } .ui-mockup__sidebar { display: none; } }

.ui-mockup__sidebar {
    background: var(--paper-2);
    border-right: 1px solid var(--line);
    padding: 22px 18px;
}
.ui-mockup__nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--ink-soft);
    font-size: 13px;
    margin-bottom: 4px;
}
.ui-mockup__nav-item--active { background: var(--paper); color: var(--ink); font-weight: 500; box-shadow: var(--sh-xs); border: 1px solid var(--line); }
.ui-mockup__nav-item i { font-size: 14px; color: var(--ink-mute); }
.ui-mockup__nav-item--active i { color: var(--blue); }
.ui-mockup__nav-label {
    font-family: var(--font-sans);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 20px 12px 8px;
}

.ui-mockup__main { padding: 26px 28px; }
.ui-mockup__heading {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 22px;
    flex-wrap: wrap; gap: 10px;
}
.ui-mockup__heading h4 {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.015em;
}
.ui-mockup__heading-actions { display: flex; gap: 8px; }
.ui-mockup__chip-btn {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid var(--line);
    font-size: 12px;
    color: var(--ink-soft);
}
.ui-mockup__chip-btn--primary { background: var(--blue); color: var(--paper); border-color: var(--blue); }

.ui-mockup__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.ui-mockup__kpi {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    background: var(--paper);
}
.ui-mockup__kpi-label { font-family: var(--font-sans); font-size: 10.5px; text-transform: uppercase; color: var(--ink-mute); letter-spacing: 0.06em; }
.ui-mockup__kpi-value { font-size: 22px; font-weight: 600; color: var(--ink); margin-top: 4px; letter-spacing: -0.02em; }
.ui-mockup__kpi-delta { font-size: 11px; color: #047857; margin-top: 2px; font-weight: 500; }
.ui-mockup__kpi-delta--down { color: #B45309; }

.ui-mockup__chart {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 16px 8px;
    background: var(--paper);
    height: 170px;
    position: relative;
}
.ui-mockup__chart-bars {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px;
    align-items: end; height: 100%;
}
.ui-mockup__chart-bars span {
    background: var(--tint-blue);
    border-radius: 6px 6px 2px 2px;
    border: 1px solid var(--blue-tint);
}
.ui-mockup__chart-bars span:nth-child(4n) { background: var(--blue); border-color: var(--blue-deep); }

@media (max-width: 575px) {
    .ui-mockup__kpis { grid-template-columns: 1fr; }
    .ui-mockup__main { padding: 20px; }
}

/* ---------- Two-column split (text + text / text + image) ---------- */
.tpg-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}
.tpg-split--top { align-items: start; }
@media (max-width: 991px) {
    .tpg-split { grid-template-columns: 1fr; gap: 40px; }
    .tpg-split__media--right { order: -1; }
}
.tpg-split h2 { margin-bottom: 18px; }
.tpg-split h3 { margin-bottom: 14px; }
.tpg-split p { color: var(--ink-soft); margin-bottom: 14px; line-height: 1.65; }
.tpg-split p:last-child { margin-bottom: 0; }
.tpg-split__media {
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--sh-sm);
    background: var(--paper-2);
    aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
}
.tpg-split__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.tpg-split__media--contain img { object-fit: contain; padding: 28px; }

/* ---------- Check list ---------- */
.tpg-checks {
    list-style: none; padding: 0; margin: 20px 0 0;
    display: flex; flex-direction: column; gap: 12px;
}
.tpg-checks li {
    display: flex; align-items: flex-start; gap: 12px;
    color: var(--ink-soft); font-size: 15.5px; line-height: 1.55;
}
.tpg-checks li::before {
    content: "";
    flex: 0 0 22px; width: 22px; height: 22px;
    margin-top: 1px;
    background: var(--tint-blue);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234862C9'%3E%3Cpath d='M13.485 4.122a.75.75 0 0 1 .15 1.05l-5.5 7a.75.75 0 0 1-1.115.08L3.27 8.45a.75.75 0 1 1 1.06-1.06l3.16 3.16 4.945-6.288a.75.75 0 0 1 1.05-.14z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
}

/* ---------- Contact ---------- */
.tpg-contact-grid {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start;
}
@media (max-width: 991px) { .tpg-contact-grid { grid-template-columns: 1fr; } }

.tpg-form {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 36px;
    box-shadow: var(--sh-xs);
}
.tpg-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 767px) { .tpg-form__row { grid-template-columns: 1fr; } }
.tpg-form__field { margin-bottom: 16px; }
.tpg-form__field--full { grid-column: 1 / -1; }
.tpg-form label {
    display: block; font-size: 12.5px;
    color: var(--ink-mute); margin-bottom: 6px;
    font-weight: 500; letter-spacing: 0.02em;
}
.tpg-form input, .tpg-form textarea {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--ink);
    background: var(--paper);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.tpg-form input::placeholder, .tpg-form textarea::placeholder { color: var(--ink-faint); }
.tpg-form input:focus, .tpg-form textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-tint);
}
.tpg-form textarea { resize: vertical; min-height: 140px; }
.tpg-form__actions { margin-top: 8px; display: flex; justify-content: flex-end; }
.tpg-form__error { color: #B91C1C; font-size: 13px; min-height: 18px; margin-bottom: 8px; }

.tpg-info {
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--r-md);
    padding: 36px;
    position: relative;
    overflow: hidden;
}
.tpg-info::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(420px 220px at 90% 0%, rgba(118,191,233,0.18), transparent 60%);
    pointer-events: none;
}
.tpg-info > * { position: relative; z-index: 1; }
.tpg-info__item { margin-bottom: 26px; display: flex; gap: 14px; align-items: flex-start; }
.tpg-info__item:last-child { margin-bottom: 0; }
.tpg-info__ico {
    flex: 0 0 36px; width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    color: var(--sky);
    font-size: 16px;
}
.tpg-info__body { flex: 1; }
.tpg-info h5 {
    color: var(--ink-faint);
    margin: 0 0 6px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}
.tpg-info p, .tpg-info a {
    color: var(--paper);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
}
.tpg-info a:hover { color: var(--sky); }
.tpg-info dl {
    display: grid; grid-template-columns: 60px 1fr;
    gap: 4px 12px;
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
}
.tpg-info dt { color: var(--ink-faint); }

/* ---------- Product hero (logo / wordmark headlining) ---------- */
.tpg-product-hero__brand {
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 28px;
}
.tpg-product-hero__brand img { max-height: 64px; width: auto; }

/* ---------- Modules grid (compact textual cards) ---------- */
.tpg-modules {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 991px) { .tpg-modules { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .tpg-modules { grid-template-columns: 1fr; } }
.tpg-module {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 26px;
    transition: border-color .25s ease, transform .25s ease;
}
.tpg-module:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.tpg-module__ico {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--tint-blue);
    color: var(--blue-deep);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px;
    margin-bottom: 14px;
}
.tpg-module h4 { font-size: 1.02rem; margin: 0 0 6px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.tpg-module p { font-size: 14.5px; color: var(--ink-soft); margin: 0; line-height: 1.55; }
.tpg-module p.tpg-module__link { margin-top: 12px; }
.tpg-module__link a { font-weight: 600; }
.tpg-module__link i { font-size: .9em; vertical-align: -1px; }

/* ---------- Portal type cards ---------- */
.tpg-portal-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
@media (max-width: 991px) { .tpg-portal-types { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .tpg-portal-types { grid-template-columns: 1fr; } }

.tpg-portal-type {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    display: flex; flex-direction: column;
}
.tpg-portal-type:hover {
    border-color: var(--line-strong);
    box-shadow: var(--sh);
    transform: translateY(-3px);
}
.tpg-portal-type__viz {
    position: relative;
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(420px 200px at 60% 30%, var(--tint-blue), transparent 60%),
        linear-gradient(160deg, var(--paper-2), var(--paper-3));
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    overflow: hidden;
}
.tpg-portal-type__viz svg { width: 100%; height: 100%; }
.tpg-portal-type__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tpg-portal-type h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; }
.tpg-portal-type p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; margin: 0; }
.tpg-portal-type ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tpg-portal-type li {
    background: var(--paper-2);
    border: 1px solid var(--line);
    color: var(--ink-mute);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11.5px;
    letter-spacing: 0.02em;
}

/* ---------- Hub & spoke architecture diagram ---------- */
.tpg-hub {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 480px;
    margin: 0 auto;
}
.tpg-hub__svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.tpg-hub__center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 170px; height: 170px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-deep), var(--blue));
    color: var(--paper);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    box-shadow: 0 24px 48px rgba(72, 98, 201, 0.35);
    z-index: 2;
}
.tpg-hub__center i { font-size: 36px; margin-bottom: 8px; opacity: 0.95; }
.tpg-hub__center span { font-weight: 600; font-size: 13.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.tpg-hub__node {
    position: absolute;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--ink);
    display: inline-flex; align-items: center; gap: 8px;
    z-index: 1;
    white-space: nowrap;
}
.tpg-hub__node i { color: var(--blue); font-size: 15px; }
.tpg-hub__node small { color: var(--ink-mute); font-size: 11px; letter-spacing: 0.02em; }
.tpg-hub__node--n  { top: 0;        left: 50%; transform: translate(-50%, -10%); }
.tpg-hub__node--ne { top: 14%;      right: -4%; }
.tpg-hub__node--e  { top: 50%;      right: -6%; transform: translateY(-50%); }
.tpg-hub__node--se { bottom: 14%;   right: -4%; }
.tpg-hub__node--s  { bottom: 0;     left: 50%; transform: translate(-50%, 10%); }
.tpg-hub__node--sw { bottom: 14%;   left: -4%; }
.tpg-hub__node--w  { top: 50%;      left: -6%; transform: translateY(-50%); }
.tpg-hub__node--nw { top: 14%;      left: -4%; }
@media (max-width: 575px) {
    .tpg-hub__center { width: 140px; height: 140px; }
    .tpg-hub__center i { font-size: 28px; }
    .tpg-hub__node { font-size: 11.5px; padding: 7px 10px; }
}

/* ---------- Before / After comparison ---------- */
.tpg-compare {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 22px;
}
@media (max-width: 767px) { .tpg-compare { grid-template-columns: 1fr; } }
.tpg-compare__col {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 28px 30px;
    background: var(--paper);
}
.tpg-compare__col--before {
    background: var(--paper-2);
}
.tpg-compare__col--after {
    border-color: var(--blue-tint);
    background: linear-gradient(180deg, var(--paper) 0%, var(--tint-blue) 280%);
}
.tpg-compare__head {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 22px;
}
.tpg-compare__col--after .tpg-compare__head { color: var(--blue-deep); }
.tpg-compare__head i { font-size: 16px; }
.tpg-compare ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.tpg-compare li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.tpg-compare li i { flex: 0 0 18px; font-size: 16px; margin-top: 2px; color: var(--ink-faint); }
.tpg-compare__col--after li i { color: var(--blue); }

/* ---------- Security feature blocks (used on --ink section) ---------- */
.tpg-security {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
@media (max-width: 991px) { .tpg-security { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .tpg-security { grid-template-columns: 1fr; } }
.tpg-security__card {
    padding: 26px 22px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-md);
    transition: background .25s ease, border-color .25s ease;
}
.tpg-security__card:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); }
.tpg-security__card i {
    color: var(--sky);
    font-size: 22px;
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 42px; height: 42px;
    background: rgba(118,191,233,0.12);
    border-radius: 10px;
}
.tpg-security__card h4 { color: var(--paper); font-size: 1rem; margin: 0 0 6px; font-weight: 600; letter-spacing: -0.01em; }
.tpg-security__card p { color: rgba(255,255,255,0.72); font-size: 14px; line-height: 1.55; margin: 0; }

/* ---------- Numbered steps (process timeline) ---------- */
.tpg-steps { display: grid; gap: 0; }
.tpg-step {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 30px;
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
}
.tpg-step:last-child { border-bottom: none; }
.tpg-step__num {
    font-style: italic; font-weight: 500;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--blue);
    letter-spacing: -0.02em;
}
.tpg-step__body h4 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 8px; }
.tpg-step__body p { color: var(--ink-soft); margin: 0; line-height: 1.6; max-width: 580px; }
.tpg-step__meta {
    color: var(--ink-mute); font-size: 12.5px;
    letter-spacing: 0.04em; text-transform: uppercase;
    border: 1px solid var(--line);
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--paper-2);
    white-space: nowrap;
}
@media (max-width: 767px) {
    .tpg-step { grid-template-columns: 64px 1fr; }
    .tpg-step__num { font-size: 1.8rem; }
    .tpg-step__meta { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
}

/* ---------- FAQ (native <details>/<summary> accordion) ---------- */
.tpg-faq { display: flex; flex-direction: column; max-width: 880px; }
.tpg-faq__item {
    border-bottom: 1px solid var(--line);
    padding: 0;
}
.tpg-faq__item[open] { background: transparent; }
.tpg-faq__q {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px;
    padding: 22px 4px 22px 0;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    user-select: none;
    transition: color .2s ease;
}
.tpg-faq__q::-webkit-details-marker { display: none; }
.tpg-faq__q:hover { color: var(--blue-deep); }
.tpg-faq__q:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.tpg-faq__icon {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-mute);
    font-size: 14px;
    background: var(--paper);
    transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.tpg-faq__item[open] .tpg-faq__icon {
    transform: rotate(45deg);
    background: var(--blue);
    color: var(--paper);
    border-color: var(--blue);
}
.tpg-faq__a {
    color: var(--ink-soft);
    line-height: 1.65;
    font-size: 15.5px;
    margin: 0;
    padding: 0 48px 22px 0;
    animation: tpg-faq-fade .25s ease;
}
@keyframes tpg-faq-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Mini stack badges (used inline) ---------- */
.tpg-badges {
    display: inline-flex; flex-wrap: wrap; gap: 8px;
    margin-top: 18px;
}
.tpg-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    box-shadow: var(--sh-xs);
}
.tpg-badge i { color: var(--blue); font-size: 13px; }

/* ---------- Pricing packages ---------- */
.tpg-packages {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 991px) { .tpg-packages { grid-template-columns: 1fr; } }
.tpg-package {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 32px 28px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: var(--sh-xs);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tpg-package:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: var(--line-strong); }
.tpg-package--featured {
    background: linear-gradient(180deg, var(--paper) 0%, var(--tint-blue) 320%);
    border-color: var(--blue-tint);
    box-shadow: var(--sh-sm);
    position: relative;
}
.tpg-package--featured::before {
    content: attr(data-featured);
    position: absolute; top: -10px; right: 22px;
    background: var(--blue);
    color: var(--paper);
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
}
.tpg-package__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
}
.tpg-package__head h3 {
    font-size: 1.15rem; margin: 0;
    font-weight: 600; letter-spacing: -0.015em;
}
.tpg-package__badge {
    font-size: 10.5px; padding: 4px 10px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    color: var(--ink-mute);
    border-radius: 999px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
}
.tpg-package__price {
    display: flex; align-items: baseline; gap: 8px;
    margin: 0;
}
.tpg-package__price strong {
    font-size: 2.4rem; font-weight: 600;
    color: var(--blue-deep);
    letter-spacing: -0.03em;
    line-height: 1;
}
.tpg-package__price small {
    font-size: 13px; color: var(--ink-mute);
    font-weight: 400; font-style: italic;
    line-height: 1.3;
}
.tpg-package__tagline {
    font-size: 14.5px; color: var(--ink-soft);
    line-height: 1.55; margin: 0 0 6px;
}
.tpg-package ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
    flex: 1;
}
.tpg-package li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: var(--ink-soft); line-height: 1.5;
}
.tpg-package li i { color: var(--blue); font-size: 15px; flex: 0 0 16px; margin-top: 2px; }
.tpg-package__foot {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 12.5px; color: var(--ink-mute);
}
.tpg-pricing-note {
    margin-top: 22px;
    padding: 16px 20px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-size: 13px;
    color: var(--ink-mute);
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
.tpg-pricing-note strong { color: var(--ink); font-weight: 600; }
.tpg-pricing-note i { color: var(--blue); }

/* ---------- Horizontal flow (e.g. SAN process) ---------- */
.tpg-flow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    align-items: stretch;
}
@media (max-width: 1199px) { .tpg-flow { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 767px)  { .tpg-flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .tpg-flow { grid-template-columns: 1fr; } }
.tpg-flow__step {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 20px 18px;
    position: relative;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.tpg-flow__step:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.tpg-flow__step::after {
    content: "";
    position: absolute;
    right: -16px; top: 50%;
    width: 18px; height: 2px;
    background: var(--blue-tint);
    transform: translateY(-50%);
    z-index: 2;
}
.tpg-flow__step::before {
    content: "";
    position: absolute;
    right: -16px; top: 50%;
    width: 0; height: 0;
    border-left: 6px solid var(--blue);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transform: translateY(-50%);
    z-index: 3;
}
.tpg-flow__step:last-child::after,
.tpg-flow__step:last-child::before { display: none; }
@media (max-width: 1199px) {
    .tpg-flow__step:nth-child(3n)::after,
    .tpg-flow__step:nth-child(3n)::before { display: none; }
}
@media (max-width: 767px) {
    .tpg-flow__step::after,
    .tpg-flow__step::before { display: none; }
}
.tpg-flow__num {
    color: var(--blue);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}
.tpg-flow__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--tint-blue);
    color: var(--blue-deep);
    border-radius: 10px;
    font-size: 16px;
    margin-bottom: 14px;
}
.tpg-flow__step h5 {
    font-size: 0.98rem; margin: 0 0 6px;
    font-weight: 600; letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.3;
}
.tpg-flow__step p {
    font-size: 13px; line-height: 1.5;
    color: var(--ink-soft); margin: 0;
}
.tpg-flow__step code {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 6px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--ink-mute);
}

/* ---------- Inline metric row (trust strip) ---------- */
.tpg-metric-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
@media (max-width: 575px) { .tpg-metric-row { grid-template-columns: 1fr 1fr; } }
.tpg-metric { display: flex; flex-direction: column; gap: 2px; }
.tpg-metric strong {
    font-size: 1.7rem; color: var(--blue-deep);
    font-weight: 600; letter-spacing: -0.025em;
}
.tpg-metric strong .serif { color: var(--blue-deep); }
.tpg-metric span { font-size: 13px; color: var(--ink-mute); letter-spacing: 0.01em; }

/* ---------- Industry cards (photo + content) ---------- */
.tpg-industries {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
@media (max-width: 991px) { .tpg-industries { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .tpg-industries { grid-template-columns: 1fr; } }
.tpg-industry {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex; flex-direction: column;
}
.tpg-industry:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh);
    border-color: var(--line-strong);
}
.tpg-industry__photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
    background: var(--paper-2);
}
.tpg-industry__photo img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.tpg-industry:hover .tpg-industry__photo img { transform: scale(1.05); }
.tpg-industry__photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,27,56,0) 70%, rgba(15,27,56,0.18) 100%);
}
.tpg-industry__tag {
    position: absolute; top: 14px; left: 14px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    color: var(--ink); font-size: 11px; font-weight: 500;
    padding: 5px 12px; border-radius: 999px;
    letter-spacing: 0.04em;
    z-index: 2;
    border: 1px solid var(--line);
}
.tpg-industry__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tpg-industry h4 { font-size: 1.05rem; margin: 0; font-weight: 600; letter-spacing: -0.015em; }
.tpg-industry p { font-size: 14px; color: var(--ink-soft); margin: 0; line-height: 1.55; flex: 1; }
.tpg-industry__clients {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 6px;
}
.tpg-industry__clients span {
    background: var(--paper-2);
    border: 1px solid var(--line);
    color: var(--ink-mute);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    letter-spacing: 0.02em;
}

/* ---------- Testimonials ---------- */
.tpg-testimonials {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 991px) { .tpg-testimonials { grid-template-columns: 1fr; } }
/* A single (real) testimonial: center it instead of leaving it narrow on the left. */
.tpg-testimonial:only-child { grid-column: 1 / -1; max-width: 720px; margin-inline: auto; }
.tpg-testimonial {
    padding: 32px 30px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-xs);
    display: flex; flex-direction: column;
    position: relative;
}
.tpg-testimonial::before {
    content: "\201C";
    position: absolute;
    top: 22px; right: 26px;
    font-family: 'Montserrat', sans-serif;
    color: var(--tint-blue);
    font-size: 4rem;
    line-height: 0.6;
    pointer-events: none;
}
.tpg-testimonial__quote {
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--ink);
    letter-spacing: -0.005em;
    margin: 0 0 24px;
    flex: 1;
    position: relative;
}
.tpg-testimonial__person { display: flex; align-items: center; gap: 14px; }
.tpg-testimonial__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--paper-2);
    border: 1px solid var(--line);
    flex: 0 0 44px;
}
.tpg-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpg-testimonial__person strong {
    font-size: 14px; font-weight: 600;
    display: block; color: var(--ink);
    letter-spacing: -0.005em;
}
.tpg-testimonial__person small {
    font-size: 12.5px;
    color: var(--ink-mute);
    letter-spacing: 0.01em;
}

/* ---------- Comparison (custom vs SaaS) ---------- */
.tpg-comparison {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 767px) { .tpg-comparison { grid-template-columns: 1fr; } }
.tpg-comparison__col {
    padding: 32px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--paper);
}
.tpg-comparison__col--custom {
    background: linear-gradient(180deg, var(--paper) 0%, var(--tint-blue) 320%);
    border-color: var(--blue-tint);
    box-shadow: var(--sh-sm);
}
.tpg-comparison__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 22px;
    gap: 12px;
}
.tpg-comparison__head h3 {
    font-size: 1.1rem; margin: 0;
    font-weight: 600; letter-spacing: -0.015em;
}
.tpg-comparison__col--custom .tpg-comparison__head .tpg-badge {
    background: var(--blue); color: var(--paper); border-color: transparent;
}
.tpg-comparison__col--custom .tpg-comparison__head .tpg-badge i { color: var(--paper); }
.tpg-comparison ul {
    list-style: none; padding: 0; margin: 0 0 18px;
    display: flex; flex-direction: column; gap: 11px;
}
.tpg-comparison li {
    display: flex; align-items: flex-start; gap: 10px;
    color: var(--ink-soft);
    font-size: 14.5px; line-height: 1.5;
}
.tpg-comparison li i {
    flex: 0 0 16px; font-size: 15px;
    margin-top: 2px;
}
.tpg-comparison li.is-yes i { color: var(--blue-deep); }
.tpg-comparison li.is-no i { color: var(--ink-faint); }
.tpg-comparison__verdict {
    font-size: 13px;
    color: var(--ink-mute);
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-style: italic;
    line-height: 1.55;
}

/* ---------- Photo media variant (cover) for split layout ---------- */
.tpg-split__media--photo { aspect-ratio: 4 / 3; }
.tpg-split__media--photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(1.1);
}
.tpg-split__media { position: relative; }
.tpg-industry__photo img { filter: saturate(1.1); }

/* =====================================================
   Homepage visual refresh: more depth, less flat
   ===================================================== */

/* Subtle dotted texture for section backgrounds */
.section--dots { position: relative; }
.section--dots::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(72,98,201,0.07) 1px, transparent 1.5px);
    background-size: 22px 22px;
    background-position: 0 0;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    opacity: 0.6;
    z-index: 0;
}
.section--dots > .container { position: relative; z-index: 1; }

/* Soft glow blob behind a section */
.section--glow { position: relative; overflow: hidden; }
.section--glow::after {
    content: ""; position: absolute;
    top: -120px; right: -120px;
    width: 460px; height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(118,191,233,0.22) 0%, rgba(94,135,222,0.10) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.section--glow::before {
    content: ""; position: absolute;
    bottom: -160px; left: -100px;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(118,191,233,0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.section--glow > .container { position: relative; z-index: 1; }

/* Enhanced service-card icon (used on homepage) */
.tpg-service__icon {
    background: linear-gradient(135deg, var(--tint-sky) 0%, var(--tint-blue) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        0 4px 14px rgba(72,98,201,0.12);
    transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, background .35s ease;
}
.tpg-service:hover .tpg-service__icon {
    transform: scale(1.05) rotate(-3deg);
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%) !important;
    color: var(--paper) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 10px 24px rgba(72,98,201,0.32);
}
.tpg-service:hover .tpg-service__icon i { color: var(--paper); }
.tpg-service {
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.tpg-service:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh);
    border-color: var(--blue-tint);
}

/* Approach steps: bigger numbers, connecting line on desktop */
.tpg-approach { position: relative; }
@media (min-width: 768px) {
    .tpg-approach::before {
        content: "";
        position: absolute;
        top: 36px;
        left: 12%; right: 12%;
        height: 2px;
        background: repeating-linear-gradient(to right, var(--blue-tint) 0 6px, transparent 6px 14px);
        z-index: 0;
        pointer-events: none;
    }
}
.tpg-approach__step { position: relative; z-index: 1; }
.tpg-approach__num {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
    font-weight: 600;
    letter-spacing: -0.04em;
    font-size: 2.6rem;
    line-height: 1;
    position: relative;
    z-index: 1;
}
.tpg-approach__step {
    background: var(--paper);
    padding-left: 22px;
    padding-right: 22px;
    border-radius: var(--r);
    transition: background .25s ease;
}
@media (min-width: 768px) {
    .tpg-approach__step { padding-top: 14px; padding-bottom: 14px; }
}

/* Stats: bigger, gradient numbers */
.tpg-stat__num {
    background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 70%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    letter-spacing: -0.04em;
}
.tpg-stat {
    transition: transform .3s ease;
}
.tpg-stat:hover { transform: translateY(-3px); }

/* Pain cards: more depth */
.tpg-pain__card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: 0 1px 3px rgba(15,27,56,0.04);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tpg-pain__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15,27,56,0.08), 0 2px 6px rgba(15,27,56,0.04);
    border-color: var(--blue-tint);
}
.tpg-pain__after i {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 24px !important;
}

/* Quote section: richer */
.tpg-quote {
    background: linear-gradient(180deg, var(--paper-2) 0%, var(--tint-blue) 100%);
    position: relative;
    overflow: hidden;
}
.tpg-quote::before {
    content: "\201C";
    position: absolute;
    top: 30px; left: 50%;
    transform: translateX(-50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 8rem;
    color: var(--blue-tint);
    line-height: 1;
    opacity: 0.6;
    pointer-events: none;
}
.tpg-quote > .container { position: relative; z-index: 1; }

/* Hero: subtle floating dots decoration */
.tpg-hero {
    isolation: isolate;
}
.tpg-hero__inner {
    position: relative;
}
.tpg-hero__inner::before {
    content: "";
    position: absolute;
    top: -40px; left: 8%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--blue);
    opacity: 0.5;
    box-shadow: 0 0 0 10px rgba(94,135,222,0.08);
    animation: tpg-hero-pulse-a 3.5s ease-in-out infinite;
}
.tpg-hero__inner::after {
    content: "";
    position: absolute;
    top: -20px; right: 6%;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--sky);
    opacity: 0.4;
    box-shadow: 0 0 0 14px rgba(118,191,233,0.08);
    animation: tpg-hero-pulse-b 4.5s ease-in-out infinite;
}
@keyframes tpg-hero-pulse-a {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(-12px); opacity: 0.85; }
}
@keyframes tpg-hero-pulse-b {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(14px); opacity: 0.75; }
}
@media (max-width: 991px) {
    .tpg-hero__inner::before,
    .tpg-hero__inner::after { display: none; }
}

/* Section dividers: subtle gradient between adjacent sections */
.section + .section:not(.section--tint):not(.section--ink),
.section--tint + .section--tint {
    position: relative;
}

/* Logos: nicer treatment */
.tpg-logos {
    padding: 60px 0;
    position: relative;
}
.tpg-logos__grid img {
    transition: filter .3s ease, transform .3s ease, opacity .3s ease;
}
.tpg-logos__grid a:hover img {
    transform: scale(1.06);
    filter: grayscale(0);
}

/* Section head with optional accent badge */
.section__head__badge {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 14px;
    padding: 4px 12px;
    background: var(--tint-blue);
    color: var(--blue-deep);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.section__head__badge i { font-size: 13px; }

/* Final CTA: extra glow */
.tpg-cta__inner {
    position: relative;
    overflow: hidden;
}
.tpg-cta__inner::after {
    content: "";
    position: absolute;
    width: 600px; height: 600px;
    bottom: -300px; right: -200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(118,191,233,0.18) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* =====================================================
   Bento grid system (Apple / Linear marketing style)
   ===================================================== */
.tpg-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
    align-items: stretch;
}
.tpg-bento__tile {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 30px;
    display: flex;
    flex-direction: column;
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
    overflow: hidden;
    position: relative;
    min-width: 0;
}
.tpg-bento__tile--hover { cursor: pointer; }
.tpg-bento__tile--hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh);
    border-color: var(--line-strong);
}

/* Color variants */
.tpg-bento__tile--blue {
    background:
        radial-gradient(420px 220px at 80% -20%, rgba(118,191,233,0.32), transparent 60%),
        linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
    color: var(--paper);
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(72,98,201,0.18);
}
.tpg-bento__tile--blue h2,
.tpg-bento__tile--blue h3,
.tpg-bento__tile--blue h4 { color: var(--paper); }
.tpg-bento__tile--blue p { color: rgba(255,255,255,0.85); }

.tpg-bento__tile--tint {
    background: linear-gradient(160deg, var(--paper) 0%, var(--tint-blue) 220%);
    border-color: var(--blue-tint);
}

.tpg-bento__tile--ink {
    background: var(--ink);
    color: var(--paper);
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(15,27,56,0.22);
}
.tpg-bento__tile--ink h2,
.tpg-bento__tile--ink h3,
.tpg-bento__tile--ink h4 { color: var(--paper); }
.tpg-bento__tile--ink p { color: rgba(255,255,255,0.78); }

.tpg-bento__tile--photo {
    padding: 0;
    min-height: 240px;
}
.tpg-bento__tile--photo > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}

/* Span helpers, desktop first */
@media (min-width: 992px) {
    .tpg-bento__tile--c3  { grid-column: span 3; }
    .tpg-bento__tile--c4  { grid-column: span 4; }
    .tpg-bento__tile--c5  { grid-column: span 5; }
    .tpg-bento__tile--c6  { grid-column: span 6; }
    .tpg-bento__tile--c7  { grid-column: span 7; }
    .tpg-bento__tile--c8  { grid-column: span 8; }
    .tpg-bento__tile--c9  { grid-column: span 9; }
    .tpg-bento__tile--c12 { grid-column: span 12; }
    .tpg-bento__tile--r2  { grid-row: span 2; }
    .tpg-bento__tile--r3  { grid-row: span 3; }
}
@media (max-width: 991px) {
    .tpg-bento { grid-template-columns: repeat(6, 1fr); gap: 14px; }
    .tpg-bento__tile { grid-column: span 6; padding: 24px; }
    .tpg-bento__tile--c3 { grid-column: span 3; }
}
@media (max-width: 575px) {
    .tpg-bento { grid-template-columns: 1fr; }
    .tpg-bento__tile { grid-column: span 1 !important; }
}

/* Tile content primitives */
.tpg-bento__label {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0 0 14px;
    display: inline-flex; align-items: center; gap: 8px;
}
.tpg-bento__tile--blue .tpg-bento__label,
.tpg-bento__tile--ink .tpg-bento__label { color: rgba(255,255,255,0.7); }
.tpg-bento__label::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 4px var(--tint-blue);
}
.tpg-bento__tile--blue .tpg-bento__label::before,
.tpg-bento__tile--ink .tpg-bento__label::before {
    background: var(--sky);
    box-shadow: 0 0 0 4px rgba(118,191,233,0.2);
}

.tpg-bento__bignum {
    font-size: clamp(2.6rem, 4.5vw, 3.8rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 0.95;
    background: linear-gradient(135deg, var(--blue-deep), var(--blue) 80%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}
.tpg-bento__tile--blue .tpg-bento__bignum,
.tpg-bento__tile--ink .tpg-bento__bignum {
    background: none;
    -webkit-text-fill-color: var(--paper);
    color: var(--paper);
}

.tpg-bento__caption {
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.45;
    margin: 10px 0 0;
}
.tpg-bento__tile--blue .tpg-bento__caption,
.tpg-bento__tile--ink .tpg-bento__caption { color: rgba(255,255,255,0.78); }

.tpg-bento__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--tint-sky), var(--tint-blue));
    color: var(--blue-deep);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.tpg-bento__tile--blue .tpg-bento__icon {
    background: rgba(255,255,255,0.16);
    color: var(--paper);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}

/* Mini sparkline / chart */
.tpg-bento__spark {
    display: flex; gap: 4px; align-items: flex-end;
    height: 56px;
    margin-top: 20px;
}
.tpg-bento__spark span {
    flex: 1;
    background: rgba(255,255,255,0.25);
    border-radius: 3px 3px 0 0;
}
.tpg-bento__spark span.is-peak {
    background: var(--paper);
}
.tpg-bento__tile--tint .tpg-bento__spark span,
.tpg-bento__tile:not(.tpg-bento__tile--blue):not(.tpg-bento__tile--ink) .tpg-bento__spark span {
    background: var(--tint-blue);
    border: 1px solid var(--blue-tint);
}
.tpg-bento__tile--tint .tpg-bento__spark span.is-peak,
.tpg-bento__tile:not(.tpg-bento__tile--blue):not(.tpg-bento__tile--ink) .tpg-bento__spark span.is-peak {
    background: var(--blue);
    border-color: var(--blue-deep);
}

/* Status row inside a tile */
.tpg-bento__status {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    margin-top: auto;
}
.tpg-bento__tile:not(.tpg-bento__tile--blue):not(.tpg-bento__tile--ink) .tpg-bento__status {
    background: var(--tint-blue);
    border-color: var(--blue-tint);
    color: var(--blue-deep);
}
.tpg-bento__status i {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #86EFAC;
    box-shadow: 0 0 0 3px rgba(134,239,172,0.25);
    animation: tpg-pulse-dot 2s ease-in-out infinite;
}
@keyframes tpg-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(134,239,172,0.25); }
    50% { box-shadow: 0 0 0 6px rgba(134,239,172,0.12); }
}

/* Tile "logos" cluster */
.tpg-bento__logos {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.tpg-bento__logos img {
    width: 100%; height: 28px;
    object-fit: contain;
    opacity: 0.7;
    filter: grayscale(0.5);
    transition: opacity .25s ease, filter .25s ease;
}
.tpg-bento__logos img:hover { opacity: 1; filter: none; }
.tpg-bento__tile--blue .tpg-bento__logos,
.tpg-bento__tile--ink .tpg-bento__logos {
    border-top-color: rgba(255,255,255,0.16);
}
.tpg-bento__tile--blue .tpg-bento__logos img,
.tpg-bento__tile--ink .tpg-bento__logos img {
    filter: brightness(0) invert(1);
    opacity: 0.6;
}
.tpg-bento__tile--blue .tpg-bento__logos img:hover,
.tpg-bento__tile--ink .tpg-bento__logos img:hover { opacity: 1; }

/* CTA cluster inside tile */
.tpg-bento__actions {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-top: 24px;
}

/* Bento tile inner content helpers */
.tpg-bento__tile p {
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
}
.tpg-bento__tile--blue p,
.tpg-bento__tile--ink p { color: rgba(255,255,255,0.85); }

.tpg-bento__chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: auto;
    padding-top: 18px;
}
.tpg-bento__chip {
    background: var(--paper-2);
    border: 1px solid var(--line);
    color: var(--ink-mute);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11.5px;
    letter-spacing: 0.02em;
}
.tpg-bento__tile--blue .tpg-bento__chip,
.tpg-bento__tile--ink .tpg-bento__chip {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.92);
}
.tpg-bento__tile--tint .tpg-bento__chip {
    background: rgba(255,255,255,0.6);
    border-color: var(--blue-tint);
    color: var(--blue-deep);
}

/* =====================================================
   Products section (3 cards, pricing-tier style)
   ===================================================== */
.tpg-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 48px;
}
@media (max-width: 991px) { .tpg-products { grid-template-columns: 1fr; } }

.tpg-product {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 36px 32px;
    display: flex; flex-direction: column;
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
    box-shadow: var(--sh-xs);
    text-decoration: none;
    color: inherit;
}
.tpg-product:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh);
    border-color: var(--line-strong);
    color: inherit;
}
.tpg-product--featured {
    background: linear-gradient(180deg, var(--paper) 0%, var(--tint-blue) 280%);
    border-color: var(--blue-tint);
    box-shadow: var(--sh-sm);
}
.tpg-product--featured::before {
    content: attr(data-featured);
    position: absolute; top: -12px; left: 28px;
    background: linear-gradient(135deg, var(--blue), var(--blue-deep));
    color: var(--paper);
    font-size: 11px;
    padding: 5px 14px;
    border-radius: 999px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(72,98,201,0.25);
}

.tpg-product__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}
.tpg-product__icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--tint-sky), var(--tint-blue));
    color: var(--blue-deep);
    font-size: 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.tpg-product__type {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
    padding: 4px 10px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.tpg-product--featured .tpg-product__type {
    background: var(--paper);
    border-color: var(--blue-tint);
    color: var(--blue-deep);
}

.tpg-product h3 {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0 0 8px;
    color: var(--ink);
}
.tpg-product__tagline {
    font-size: 14.5px;
    color: var(--ink-soft);
    margin: 0 0 22px;
    line-height: 1.55;
}

.tpg-product ul {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    display: flex; flex-direction: column;
    gap: 10px;
    flex: 1;
}
.tpg-product li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: var(--ink-soft);
    line-height: 1.45;
}
.tpg-product li i { color: var(--blue); font-size: 15px; flex: 0 0 16px; margin-top: 2px; }

.tpg-product__cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 500;
    color: var(--blue-deep);
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}
.tpg-product__cta i { transition: transform .25s ease; }
.tpg-product:hover .tpg-product__cta i { transform: translateX(4px); }

/* Bento hero typography */
.tpg-bento__tile h1 {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 0 0 18px;
}
.tpg-bento__tile h2 {
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin: 0 0 12px;
}
.tpg-bento__tile h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 8px;
    letter-spacing: -0.015em;
}

/* Service-tile in bento context */
.tpg-bento .tpg-service__icon {
    margin-bottom: 16px;
}

/* Photo tile overlay */
.tpg-bento__tile--photo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(15,27,56,0.55));
    pointer-events: none;
}
.tpg-bento__tile--photo .tpg-bento__overlay {
    position: absolute; bottom: 22px; left: 24px; right: 24px;
    color: var(--paper);
    z-index: 1;
}
.tpg-bento__tile--photo .tpg-bento__overlay h3 { color: var(--paper); }
.tpg-bento__tile--photo .tpg-bento__overlay p {
    color: rgba(255,255,255,0.85);
    font-size: 13.5px; line-height: 1.45;
    margin: 4px 0 0;
}

/* Featured case tile with screenshot inset */
.tpg-bento__case-shot {
    margin: 18px -30px -30px;
    margin-top: auto;
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
}
.tpg-bento__case-shot img {
    width: 100%; height: 100%; object-fit: cover; object-position: top;
    transition: transform .6s ease;
}
.tpg-bento__tile--hover:hover .tpg-bento__case-shot img { transform: scale(1.03); }

/* ---------- Case detail: De Klok / Vortex ---------- */
.case-new-hero {
    position: relative;
    overflow: hidden;
    padding: 86px 0 72px;
    background:
        radial-gradient(900px 520px at 84% 18%, rgba(118,191,233,0.24), transparent 68%),
        linear-gradient(180deg, var(--paper), var(--paper-2));
}
.case-new-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: 56px;
    align-items: center;
}
.case-new-back {
    display: flex;
    width: fit-content;
    margin-bottom: 28px;
}
.case-new-hero h1 { margin: 18px 0 22px; }
.case-new-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}
.case-new-hero__media {
    position: relative;
    min-height: 560px;
    border-radius: var(--r-lg);
}
.case-new-hero__media > img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
}
.case-new-logo-card {
    position: absolute;
    left: -18px;
    right: auto;
    bottom: -22px;
    display: inline-flex;
    align-items: center;
    gap: 22px;
    width: auto;
    padding: 22px 30px;
    border: 1px solid rgba(255,255,255,0.78);
    border-radius: 18px;
    background: rgba(255,255,255,0.97);
    box-shadow:
        0 24px 48px rgba(15, 27, 56, 0.18),
        0 4px 10px rgba(15, 27, 56, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.case-new-logo-card img {
    display: block;
    height: 46px;
    max-width: none;
    width: auto;
    object-fit: contain;
}
.case-new-logo-card img + img {
    height: 42px;
    padding-left: 22px;
    border-left: 1px solid var(--line);
}

.case-new-facts-wrap {
    padding-top: 46px;
    padding-bottom: 70px;
}
.case-new-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    box-shadow: var(--sh-sm);
}
.case-new-facts > div {
    position: relative;
    min-height: 124px;
    padding: 24px;
    border-right: 1px solid var(--line);
}
.case-new-facts > div:last-child { border-right: 0; }
.case-new-facts i {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 18px;
    border-radius: 13px;
    background: var(--tint-blue);
    color: var(--blue-deep);
    font-size: 18px;
}
.case-new-facts span {
    display: block;
    margin-bottom: 10px;
    color: var(--ink-mute);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.case-new-facts strong {
    display: block;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: -0.015em;
}
.case-new-story {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
}
.case-new-story-section {
    padding-top: 42px;
    padding-bottom: 112px;
}
.case-new-story h2,
.case-new-impact h2 { margin-top: 14px; margin-bottom: 22px; }
.case-new-impact .lede { margin-bottom: 8px; }
.case-new-copy {
    display: grid;
    gap: 18px;
}
.case-new-copy p {
    font-size: 17px;
    line-height: 1.75;
}

.case-new-photo-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.case-new-photo-strip figure,
.case-new-gallery figure,
.case-new-quote-layout figure {
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--paper-3);
    box-shadow: var(--sh-xs);
}
.case-new-photo-strip figure {
    aspect-ratio: 4 / 3;
    position: relative;
}
.case-new-photo-strip img {
    transition: transform .5s ease;
}
.case-new-photo-strip figure:hover img {
    transform: scale(1.04);
}

.case-new-screenshot {
    margin: 0 auto;
    max-width: 1100px;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--paper);
    box-shadow:
        0 30px 60px rgba(15, 27, 56, 0.16),
        0 8px 18px rgba(15, 27, 56, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);
}
.case-new-screenshot > .ui-mockup__bar {
    border-bottom: 1px solid var(--line);
}
.case-new-screenshot img {
    display: block;
    width: 100%;
    height: auto;
}
.case-new-photo-strip img,
.case-new-gallery img,
.case-new-quote-layout figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-new-build-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.case-new-card {
    min-height: 100%;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    box-shadow: var(--sh-xs);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.case-new-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh);
    border-color: var(--line-strong);
}
.case-new-card i {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 24px;
    border-radius: 14px;
    background: var(--tint-blue);
    color: var(--blue-deep);
    font-size: 21px;
}
.case-new-card p {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.6;
}

.case-new-impact__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
    gap: 78px;
    align-items: center;
}
.case-new-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.case-new-results div {
    min-height: 128px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--r);
    background: rgba(255,255,255,0.06);
}
.case-new-results strong,
.case-new-results span {
    display: block;
}
.case-new-results strong {
    color: var(--paper);
    font-size: clamp(1.65rem, 3vw, 2.45rem);
    line-height: 1;
    letter-spacing: -0.04em;
}
.case-new-results span {
    margin-top: 10px;
    color: rgba(255,255,255,0.72);
    font-size: 14px;
}

.case-new-quote-section {
    padding: 72px 0 52px;
    background: var(--paper);
}
.case-new-quote-layout {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: 54px;
    align-items: center;
}
.case-new-quote-layout figure {
    width: 300px;
    min-height: 300px;
    aspect-ratio: 1 / 1;
}
.case-new-quote {
    align-self: center;
    margin: 0;
    padding: 36px 40px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background:
        radial-gradient(620px 320px at 80% 20%, rgba(94,135,222,0.12), transparent 62%),
        var(--paper-2);
}
.case-new-quote p {
    color: var(--ink);
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.15rem, 1.7vw, 1.55rem);
    line-height: 1.4;
    letter-spacing: -0.005em;
    margin: 0;
}
.case-new-quote cite {
    display: block;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-style: normal;
}
.case-new-quote strong,
.case-new-quote span {
    display: block;
}
.case-new-quote strong { color: var(--ink); }
.case-new-quote span {
    margin-top: 4px;
    color: var(--ink-mute);
    font-size: 14px;
}
@media (max-width: 767px) {
    .case-new-quote-section {
        padding: 56px 0 40px;
    }
}

.case-new-gallery {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr 1fr;
    grid-auto-rows: 220px;
    gap: 18px;
}
.case-new-gallery figure:nth-child(1),
.case-new-gallery figure:nth-child(6) { grid-row: span 2; }
.case-new-gallery figure:nth-child(4) { grid-column: span 2; }

@media (max-width: 991px) {
    .case-new-hero__grid,
    .case-new-story,
    .case-new-impact__grid,
    .case-new-quote-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .case-new-hero__media,
    .case-new-hero__media > img { min-height: auto; height: auto; }
    .case-new-facts,
    .case-new-build-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .case-new-facts > div:nth-child(2) { border-right: 0; }
    .case-new-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .case-new-photo-strip,
    .case-new-gallery {
        grid-template-columns: 1fr 1fr;
    }
    .case-new-photo-strip figure:nth-child(2) { transform: none; }
    .case-new-gallery figure:nth-child(4) { grid-column: auto; }
    .case-new-quote-layout figure {
        justify-self: center;
        width: min(300px, 100%);
    }
}

@media (max-width: 575px) {
    .case-new-hero { padding-top: 56px; }
    .case-new-logo-card {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        margin-top: 14px;
        justify-content: center;
    }
    .case-new-facts,
    .case-new-build-grid,
    .case-new-photo-strip,
    .case-new-results,
    .case-new-gallery {
        grid-template-columns: 1fr;
    }
    .case-new-facts > div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .case-new-facts > div:last-child { border-bottom: 0; }
    .case-new-gallery {
        grid-auto-rows: auto;
    }
    .case-new-gallery figure,
    .case-new-gallery figure:nth-child(1),
    .case-new-gallery figure:nth-child(6) {
        grid-row: auto;
        aspect-ratio: 4 / 3;
    }
    .case-new-quote { padding: 28px; }
}

/* ---------- Case detail: Compass / FoodBook ---------- */
.case-new-hero--compass {
    padding: 68px 0 64px;
    background:
        linear-gradient(135deg, rgba(47, 122, 89, 0.12) 0%, rgba(47, 122, 89, 0) 42%),
        linear-gradient(180deg, #FCFDF8 0%, #F1F8F1 100%);
}
.case-new-hero--compass::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(47, 122, 89, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 135, 222, 0.07) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.78), transparent 78%);
}
.case-new-hero--compass .container {
    position: relative;
    z-index: 1;
}
.case-new-hero--compass .case-new-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 42px;
}
.case-new-hero--compass .serif,
.case-new-hero--compass .btn-text:hover {
    color: #2F7A59;
}
.case-new-hero--compass h1 {
    max-width: 620px;
    font-size: clamp(2.35rem, 4.6vw, 3.8rem);
}
.case-new-hero--compass .btn--primary {
    background: #2F7A59;
}
.case-new-hero--compass .btn--primary:hover {
    background: #215D43;
}
.case-new-hero--compass .case-new-hero__media {
    isolation: isolate;
}
.case-new-hero--compass .case-new-hero__media::after {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    z-index: -1;
    border: 1px solid rgba(47, 122, 89, 0.18);
    border-radius: var(--r-lg);
    background: #E8F3E8;
}
.case-new-hero--compass .case-new-hero__media > img {
    filter: saturate(1.04) contrast(1.02);
}

.case-compass-menu-card {
    position: absolute;
    top: 26px;
    right: -26px;
    width: min(320px, 54%);
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 22px 48px rgba(15, 27, 56, 0.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.case-compass-menu-card__top,
.case-compass-menu-card__item,
.case-compass-menu-card__footer {
    display: flex;
    align-items: center;
}
.case-compass-menu-card__top {
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.case-compass-menu-card__top span,
.case-compass-menu-card__item small,
.case-compass-menu-card__footer span {
    color: var(--ink-mute);
    font-size: 12px;
}
.case-compass-menu-card__top strong,
.case-compass-menu-card__item strong,
.case-compass-menu-card__footer strong {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.2;
}
.case-compass-menu-card__item {
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.case-compass-menu-card__item > span {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(47, 122, 89, 0.88), rgba(118, 191, 233, 0.78)),
        #2F7A59;
}
.case-compass-menu-card__item:nth-child(3) > span {
    background:
        linear-gradient(135deg, rgba(250, 204, 21, 0.95), rgba(255, 107, 92, 0.68)),
        #FACC15;
}
.case-compass-menu-card__item small {
    display: block;
    margin-top: 4px;
}
.case-compass-menu-card__footer {
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
}
.case-compass-menu-card__footer strong {
    color: #2F7A59;
    font-size: 34px;
}

.case-compass-showcase {
    padding-top: 34px;
}
.case-compass-showcase__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 22px;
    align-items: stretch;
}
.case-compass-showcase figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--paper-3);
    box-shadow: var(--sh-sm);
}
.case-compass-showcase img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-compass-showcase__wide {
    min-height: clamp(340px, 42vw, 560px);
}
.case-compass-showcase__wide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(15, 27, 56, 0.62));
}
.case-compass-showcase figcaption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 1;
}
.case-compass-showcase figcaption span,
.case-compass-showcase__note span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.case-compass-showcase figcaption strong {
    color: #fff;
    font-size: clamp(1.45rem, 2.5vw, 2.35rem);
    font-weight: 600;
    line-height: 1.08;
}
.case-compass-showcase__stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 22px;
}
.case-compass-showcase__stack figure {
    min-height: 300px;
}
.case-compass-showcase__note {
    min-height: 190px;
    padding: 26px;
    border-radius: var(--r-lg);
    background:
        linear-gradient(145deg, #12223F 0%, #163B34 100%);
    box-shadow: var(--sh-sm);
}
.case-compass-showcase__note span {
    color: rgba(255, 255, 255, 0.62);
}
.case-compass-showcase__note strong {
    display: block;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.18;
    font-weight: 600;
}

.case-new-screenshot--foodbook {
    max-width: 1120px;
}

/* ============ De Klok / Vortex case treatment ============ */
.case-new-hero--deklok {
    padding: 68px 0 64px;
    background:
        linear-gradient(135deg, rgba(30, 77, 140, 0.14) 0%, rgba(30, 77, 140, 0) 44%),
        linear-gradient(180deg, #F8FBFF 0%, #EEF3FB 100%);
}
.case-new-hero--deklok::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(30, 77, 140, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 77, 140, 0.06) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.78), transparent 78%);
}
.case-new-hero--deklok .container {
    position: relative;
    z-index: 1;
}
.case-new-hero--deklok .case-new-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 42px;
}
.case-new-hero--deklok .serif,
.case-new-hero--deklok .btn-text:hover { color: #1E4D8C; }
.case-new-hero--deklok h1 {
    max-width: 620px;
    font-size: clamp(2.35rem, 4.6vw, 3.8rem);
}
.case-new-hero--deklok .btn--primary { background: #1E4D8C; }
.case-new-hero--deklok .btn--primary:hover { background: #143868; }
.case-new-hero--deklok .case-new-hero__media { isolation: isolate; }
.case-new-hero--deklok .case-new-hero__media::after {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    z-index: -1;
    border: 1px solid rgba(30, 77, 140, 0.2);
    border-radius: var(--r-lg);
    background: #E4ECFA;
}
/* Shared Insight-dashboard widget used on De Klok + MolCargo hero. */
.case-stats-card {
    position: absolute;
    top: 22px;
    right: -28px;
    width: min(360px, 64%);
    padding: 14px 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 24px 50px rgba(15, 27, 56, 0.18),
        0 6px 14px rgba(15, 27, 56, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.case-stats-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 6px 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
}
.case-stats-card__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-size: 13px;
}
.case-stats-card__brand i {
    color: var(--blue-deep);
    font-size: 14px;
}
.case-stats-card__brand strong { font-weight: 600; }
.case-stats-card__breadcrumb {
    color: var(--ink-mute);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.case-stats-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.case-stats-card__tile {
    position: relative;
    padding: 12px 12px 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
}
.case-stats-card__tile i {
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    font-size: 15px;
}
.case-stats-card__tile small {
    grid-column: 2;
    color: var(--ink-mute);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.1;
}
.case-stats-card__tile strong {
    grid-column: 2;
    color: var(--ink);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.case-stats-card__tile--in i {
    background: rgba(244, 183, 60, 0.18);
    color: #C58A18;
}
.case-stats-card__tile--out i {
    background: rgba(244, 183, 60, 0.18);
    color: #C58A18;
}
.case-stats-card__tile--booked-in i,
.case-stats-card__tile--booked-out i {
    background: rgba(43, 182, 115, 0.18);
    color: #1F8E55;
}

.case-deklok-showcase { padding-top: 34px; }
.case-deklok-showcase__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 22px;
    align-items: stretch;
}
.case-deklok-showcase figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--paper-3);
    box-shadow: var(--sh-sm);
}
.case-deklok-showcase img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-deklok-showcase__wide { min-height: clamp(340px, 42vw, 560px); }
.case-deklok-showcase__wide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(15, 27, 56, 0.62));
}
.case-deklok-showcase figcaption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 1;
}
.case-deklok-showcase figcaption span,
.case-deklok-showcase__note span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.case-deklok-showcase figcaption strong {
    color: #fff;
    font-size: clamp(1.45rem, 2.5vw, 2.35rem);
    font-weight: 600;
    line-height: 1.08;
}
.case-deklok-showcase__stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 22px;
}
.case-deklok-showcase__stack figure { min-height: 300px; }
.case-deklok-showcase__note {
    min-height: 190px;
    padding: 26px;
    border-radius: var(--r-lg);
    background:
        linear-gradient(145deg, #0E2347 0%, #1E4D8C 100%);
    box-shadow: var(--sh-sm);
}
.case-deklok-showcase__note span { color: rgba(255, 255, 255, 0.66); }
.case-deklok-showcase__note strong {
    display: block;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.18;
    font-weight: 600;
}

.case-new-impact--deklok {
    background:
        linear-gradient(135deg, rgba(30, 77, 140, 0.32), transparent 44%),
        linear-gradient(180deg, #0F1B38 0%, #142F58 100%);
}

/* ============ MolCargo case treatment ============ */
.case-new-hero--molcargo {
    padding: 68px 0 64px;
    background:
        linear-gradient(135deg, rgba(32, 58, 115, 0.12) 0%, rgba(32, 58, 115, 0) 44%),
        linear-gradient(180deg, #F7F9FE 0%, #EDF1FB 100%);
}
.case-new-hero--molcargo::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(32, 58, 115, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 58, 115, 0.06) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.78), transparent 78%);
}
.case-new-hero--molcargo .container {
    position: relative;
    z-index: 1;
}
.case-new-hero--molcargo .case-new-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 42px;
}
.case-new-hero--molcargo .serif,
.case-new-hero--molcargo .btn-text:hover { color: #203A73; }
.case-new-hero--molcargo h1 {
    max-width: 620px;
    font-size: clamp(2.35rem, 4.6vw, 3.8rem);
}
.case-new-hero--molcargo .btn--primary { background: #203A73; }
.case-new-hero--molcargo .btn--primary:hover { background: #142555; }
.case-new-hero--molcargo .case-new-hero__media { isolation: isolate; }
.case-new-hero--molcargo .case-new-hero__media::after {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    z-index: -1;
    border: 1px solid rgba(32, 58, 115, 0.2);
    border-radius: var(--r-lg);
    background: #E4EAFA;
}
.case-molcargo-showcase { padding-top: 34px; }
.case-molcargo-showcase__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 22px;
    align-items: stretch;
}
.case-molcargo-showcase figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--paper-3);
    box-shadow: var(--sh-sm);
}
.case-molcargo-showcase img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-molcargo-showcase__wide { min-height: clamp(340px, 42vw, 560px); }
.case-molcargo-showcase__wide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(15, 27, 56, 0.62));
}
.case-molcargo-showcase figcaption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 1;
}
.case-molcargo-showcase figcaption span,
.case-molcargo-showcase__note span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.case-molcargo-showcase figcaption strong {
    color: #fff;
    font-size: clamp(1.45rem, 2.5vw, 2.35rem);
    font-weight: 600;
    line-height: 1.08;
}
.case-molcargo-showcase__stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 22px;
}
.case-molcargo-showcase__stack figure { min-height: 300px; }
.case-molcargo-showcase__note {
    min-height: 190px;
    padding: 26px;
    border-radius: var(--r-lg);
    background:
        linear-gradient(145deg, #0E1A3E 0%, #203A73 100%);
    box-shadow: var(--sh-sm);
}
.case-molcargo-showcase__note span { color: rgba(255, 255, 255, 0.66); }
.case-molcargo-showcase__note strong {
    display: block;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.18;
    font-weight: 600;
}

.case-new-impact--molcargo {
    background:
        linear-gradient(135deg, rgba(32, 58, 115, 0.32), transparent 44%),
        linear-gradient(180deg, #0F1B38 0%, #152858 100%);
}

/* ============ NedCargo case treatment ============ */
.case-new-hero--nedcargo {
    padding: 68px 0 64px;
    background:
        linear-gradient(135deg, rgba(255, 81, 0, 0.13) 0%, rgba(255, 81, 0, 0) 44%),
        linear-gradient(180deg, #FFFAF6 0%, #FFF1E5 100%);
}
.case-new-hero--nedcargo::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 81, 0, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 81, 0, 0.07) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.78), transparent 78%);
}
.case-new-hero--nedcargo .container {
    position: relative;
    z-index: 1;
}
.case-new-hero--nedcargo .case-new-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 42px;
}
.case-new-hero--nedcargo .serif,
.case-new-hero--nedcargo .btn-text:hover { color: #FF5100; }
.case-new-hero--nedcargo h1 {
    max-width: 620px;
    font-size: clamp(2.35rem, 4.6vw, 3.8rem);
}
.case-new-hero--nedcargo .btn--primary { background: #FF5100; }
.case-new-hero--nedcargo .btn--primary:hover { background: #D43F00; }
.case-new-hero--nedcargo .case-new-hero__media { isolation: isolate; }
.case-new-hero--nedcargo .case-new-hero__media::after {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    z-index: -1;
    border: 1px solid rgba(255, 81, 0, 0.22);
    border-radius: var(--r-lg);
    background: #FFE7D6;
}

.case-nedcargo-showcase { padding-top: 34px; }
.case-nedcargo-showcase__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 22px;
    align-items: stretch;
}
.case-nedcargo-showcase figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--paper-3);
    box-shadow: var(--sh-sm);
}
.case-nedcargo-showcase img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-nedcargo-showcase__wide { min-height: clamp(340px, 42vw, 560px); }
.case-nedcargo-showcase__wide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(15, 27, 56, 0.62));
}
.case-nedcargo-showcase figcaption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 1;
}
.case-nedcargo-showcase figcaption span,
.case-nedcargo-showcase__note span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.case-nedcargo-showcase figcaption strong {
    color: #fff;
    font-size: clamp(1.45rem, 2.5vw, 2.35rem);
    font-weight: 600;
    line-height: 1.08;
}
.case-nedcargo-showcase__stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 22px;
}
.case-nedcargo-showcase__stack figure { min-height: 300px; }
.case-nedcargo-showcase__note {
    min-height: 190px;
    padding: 26px;
    border-radius: var(--r-lg);
    background: linear-gradient(145deg, #FF5100 0%, #FF7028 100%);
    box-shadow: var(--sh-sm);
}
.case-nedcargo-showcase__note span { color: rgba(255, 255, 255, 0.7); }
.case-nedcargo-showcase__note strong {
    display: block;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.18;
    font-weight: 600;
}

.case-new-impact--nedcargo {
    background:
        linear-gradient(135deg, rgba(255, 81, 0, 0.32), transparent 44%),
        linear-gradient(180deg, #0F1B38 0%, #142F58 100%);
}

/* ============ AES International case treatment (brand blue #233a7b) ============ */
.case-new-hero--aes-international {
    padding: 68px 0 64px;
    background:
        linear-gradient(135deg, rgba(35, 58, 123, 0.12) 0%, rgba(35, 58, 123, 0) 44%),
        linear-gradient(180deg, #F7F9FE 0%, #EDF1FB 100%);
}
.case-new-hero--aes-international::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(35, 58, 123, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35, 58, 123, 0.06) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.78), transparent 78%);
}
.case-new-hero--aes-international .container {
    position: relative;
    z-index: 1;
}
.case-new-hero--aes-international .case-new-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 42px;
}
.case-new-hero--aes-international .serif,
.case-new-hero--aes-international .btn-text:hover { color: #233a7b; }
.case-new-hero--aes-international h1 {
    max-width: 620px;
    font-size: clamp(2.35rem, 4.6vw, 3.8rem);
}
.case-new-hero--aes-international .btn--primary { background: #233a7b; }
.case-new-hero--aes-international .btn--primary:hover { background: #16264f; }
.case-new-hero--aes-international .case-new-hero__media { isolation: isolate; }
.case-new-hero--aes-international .case-new-hero__media::after {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    z-index: -1;
    border: 1px solid rgba(35, 58, 123, 0.2);
    border-radius: var(--r-lg);
    background: #E4EAFA;
}
.case-aes-international-showcase { padding-top: 34px; }
.case-aes-international-showcase__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 22px;
    align-items: stretch;
}
.case-aes-international-showcase figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--paper-3);
    box-shadow: var(--sh-sm);
}
.case-aes-international-showcase img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-aes-international-showcase__wide { min-height: clamp(340px, 42vw, 560px); }
.case-aes-international-showcase__wide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(15, 27, 56, 0.62));
}
.case-aes-international-showcase figcaption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 1;
}
.case-aes-international-showcase figcaption span,
.case-aes-international-showcase__note span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.case-aes-international-showcase figcaption strong {
    color: #fff;
    font-size: clamp(1.45rem, 2.5vw, 2.35rem);
    font-weight: 600;
    line-height: 1.08;
}
.case-aes-international-showcase__stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 22px;
}
.case-aes-international-showcase__stack figure { min-height: 300px; }
.case-aes-international-showcase__note {
    min-height: 190px;
    padding: 26px;
    border-radius: var(--r-lg);
    background:
        linear-gradient(145deg, #0E1A3E 0%, #233a7b 100%);
    box-shadow: var(--sh-sm);
}
.case-aes-international-showcase__note span { color: rgba(255, 255, 255, 0.66); }
.case-aes-international-showcase__note strong {
    display: block;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.18;
    font-weight: 600;
}

.case-new-impact--aes-international {
    background:
        linear-gradient(135deg, rgba(35, 58, 123, 0.32), transparent 44%),
        linear-gradient(180deg, #0F1B38 0%, #152858 100%);
}

@media (max-width: 992px) {
    .case-new-hero--molcargo .case-new-hero__grid,
    .case-new-hero--deklok   .case-new-hero__grid,
    .case-new-hero--aes-international .case-new-hero__grid,
    .case-new-hero--nedcargo .case-new-hero__grid { grid-template-columns: 1fr; }
    .case-stats-card { right: 16px; top: 16px; width: min(280px, 62%); }
    .case-molcargo-showcase__grid,
    .case-deklok-showcase__grid,
    .case-aes-international-showcase__grid,
    .case-nedcargo-showcase__grid { grid-template-columns: 1fr; }
    .case-molcargo-showcase__stack,
    .case-deklok-showcase__stack,
    .case-aes-international-showcase__stack,
    .case-nedcargo-showcase__stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
}
@media (max-width: 600px) {
    .case-molcargo-showcase__stack,
    .case-deklok-showcase__stack,
    .case-aes-international-showcase__stack,
    .case-nedcargo-showcase__stack { grid-template-columns: 1fr; }
    .case-stats-card { display: none; }
}

/* ============ Hovens Collin case treatment (brand yellow #f7dd00, dark text for contrast) ============ */
.case-new-hero--hovens {
    padding: 68px 0 64px;
    background:
        linear-gradient(135deg, rgba(247, 221, 0, 0.20) 0%, rgba(247, 221, 0, 0) 46%),
        linear-gradient(180deg, #FFFEF6 0%, #FBF4CF 100%);
}
.case-new-hero--hovens::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(60, 54, 0, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60, 54, 0, 0.045) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.78), transparent 78%);
}
.case-new-hero--hovens .container {
    position: relative;
    z-index: 1;
}
.case-new-hero--hovens .case-new-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 42px;
}
/* Yellow is unreadable as text on a light hero, so the accent word stays dark
   and gets a yellow highlighter; the back-link hover follows the same dark ink. */
.case-new-hero--hovens .serif {
    color: #14130A;
    background: linear-gradient(transparent 58%, rgba(247, 221, 0, 0.65) 0);
}
.case-new-hero--hovens .btn-text:hover { color: #14130A; }
.case-new-hero--hovens h1 {
    max-width: 620px;
    font-size: clamp(2.35rem, 4.6vw, 3.8rem);
}
.case-new-hero--hovens .btn--primary { background: #f7dd00; color: #1A180A; }
.case-new-hero--hovens .btn--primary:hover { background: #E6CE00; color: #1A180A; }
.case-new-hero--hovens .case-new-hero__media { isolation: isolate; }
.case-new-hero--hovens .case-new-hero__media::after {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    z-index: -1;
    border: 1px solid rgba(247, 221, 0, 0.55);
    border-radius: var(--r-lg);
    background: #FBF1B8;
}
.case-hovens-showcase { padding-top: 34px; }
.case-hovens-showcase__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 22px;
    align-items: stretch;
}
.case-hovens-showcase figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--paper-3);
    box-shadow: var(--sh-sm);
}
.case-hovens-showcase img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-hovens-showcase__wide { min-height: clamp(340px, 42vw, 560px); }
.case-hovens-showcase__wide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(20, 18, 6, 0.66));
}
.case-hovens-showcase figcaption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 1;
}
.case-hovens-showcase figcaption span,
.case-hovens-showcase__note span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.case-hovens-showcase figcaption strong {
    color: #fff;
    font-size: clamp(1.45rem, 2.5vw, 2.35rem);
    font-weight: 600;
    line-height: 1.08;
}
.case-hovens-showcase__stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 22px;
}
.case-hovens-showcase__stack figure { min-height: 300px; }
.case-hovens-showcase__note {
    min-height: 190px;
    padding: 26px;
    border-radius: var(--r-lg);
    background:
        linear-gradient(145deg, #16150C 0%, #3A360A 100%);
    box-shadow: var(--sh-sm);
}
.case-hovens-showcase__note span { color: rgba(247, 221, 0, 0.92); }
.case-hovens-showcase__note strong {
    display: block;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.18;
    font-weight: 600;
}
.case-new-impact--hovens {
    background:
        linear-gradient(135deg, rgba(247, 221, 0, 0.22), transparent 46%),
        linear-gradient(180deg, #141308 0%, #2A2710 100%);
}
.case-new-visit--hovens .case-new-visit__cta.btn--primary  { background: #f7dd00; color: #1A180A; }
.case-new-visit--hovens .case-new-visit__cta.btn--primary:hover { background: #E6CE00; color: #1A180A; }
.case-new-collab__card--hovens p { border-left-color: rgba(247, 221, 0, 0.85); }
@media (max-width: 992px) {
    .case-new-hero--hovens .case-new-hero__grid { grid-template-columns: 1fr; }
    .case-hovens-showcase__grid { grid-template-columns: 1fr; }
    .case-hovens-showcase__stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
}
@media (max-width: 600px) {
    .case-hovens-showcase__stack { grid-template-columns: 1fr; }
}

/* ============ IJscuypje case treatment (brand magenta #E10E49, navy #0B2164) ============ */
.case-new-hero--ijscuypje {
    padding: 68px 0 64px;
    background:
        linear-gradient(135deg, rgba(225, 14, 73, 0.13) 0%, rgba(225, 14, 73, 0) 46%),
        linear-gradient(180deg, #FFF6F9 0%, #FCE7EF 100%);
}
.case-new-hero--ijscuypje::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(225, 14, 73, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(225, 14, 73, 0.06) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.78), transparent 78%);
}
.case-new-hero--ijscuypje .container {
    position: relative;
    z-index: 1;
}
.case-new-hero--ijscuypje .case-new-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 42px;
}
.case-new-hero--ijscuypje .serif,
.case-new-hero--ijscuypje .btn-text:hover { color: #E10E49; }
.case-new-hero--ijscuypje h1 {
    max-width: 620px;
    font-size: clamp(2.35rem, 4.6vw, 3.8rem);
}
.case-new-hero--ijscuypje .btn--primary { background: #E10E49; }
.case-new-hero--ijscuypje .btn--primary:hover { background: #C00B3E; }
.case-new-hero--ijscuypje .case-new-hero__media { isolation: isolate; }
.case-new-hero--ijscuypje .case-new-hero__media::after {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    z-index: -1;
    border: 1px solid rgba(225, 14, 73, 0.24);
    border-radius: var(--r-lg);
    background: #FBE0EA;
}
.case-ijscuypje-showcase { padding-top: 34px; }
.case-ijscuypje-showcase__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 22px;
    align-items: stretch;
}
.case-ijscuypje-showcase figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--paper-3);
    box-shadow: var(--sh-sm);
}
.case-ijscuypje-showcase img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-ijscuypje-showcase__wide { min-height: clamp(340px, 42vw, 560px); }
.case-ijscuypje-showcase__wide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(11, 19, 48, 0.66));
}
.case-ijscuypje-showcase figcaption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 1;
}
.case-ijscuypje-showcase figcaption span,
.case-ijscuypje-showcase__note span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.case-ijscuypje-showcase figcaption strong {
    color: #fff;
    font-size: clamp(1.45rem, 2.5vw, 2.35rem);
    font-weight: 600;
    line-height: 1.08;
}
.case-ijscuypje-showcase__stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 22px;
}
.case-ijscuypje-showcase__stack figure { min-height: 300px; }
.case-ijscuypje-showcase__note {
    min-height: 190px;
    padding: 26px;
    border-radius: var(--r-lg);
    background:
        linear-gradient(145deg, #0B2164 0%, #E10E49 100%);
    box-shadow: var(--sh-sm);
}
.case-ijscuypje-showcase__note span { color: rgba(255, 255, 255, 0.78); }
.case-ijscuypje-showcase__note strong {
    display: block;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.18;
    font-weight: 600;
}
.case-new-impact--ijscuypje {
    background:
        linear-gradient(135deg, rgba(225, 14, 73, 0.30), transparent 46%),
        linear-gradient(180deg, #0A1738 0%, #0B2164 100%);
}
.case-new-visit--ijscuypje .case-new-visit__cta.btn--primary  { background: #E10E49; }
.case-new-visit--ijscuypje .case-new-visit__cta.btn--primary:hover { background: #C00B3E; }
.case-new-collab__card--ijscuypje p { border-left-color: rgba(225, 14, 73, 0.45); }
@media (max-width: 992px) {
    .case-new-hero--ijscuypje .case-new-hero__grid { grid-template-columns: 1fr; }
    .case-ijscuypje-showcase__grid { grid-template-columns: 1fr; }
    .case-ijscuypje-showcase__stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
}
@media (max-width: 600px) {
    .case-ijscuypje-showcase__stack { grid-template-columns: 1fr; }
}

/* ============ Constellation Cold case treatment (cyan #00AEC7, navy #00263E) ============ */
.case-new-hero--constellation {
    padding: 68px 0 64px;
    background:
        linear-gradient(135deg, rgba(0, 174, 199, 0.14) 0%, rgba(0, 174, 199, 0) 46%),
        linear-gradient(180deg, #F4FBFC 0%, #E1F3F6 100%);
}
.case-new-hero--constellation::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0, 174, 199, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 174, 199, 0.07) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.78), transparent 78%);
}
.case-new-hero--constellation .container {
    position: relative;
    z-index: 1;
}
.case-new-hero--constellation .case-new-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 42px;
}
.case-new-hero--constellation .serif,
.case-new-hero--constellation .btn-text:hover { color: #008CA0; }
.case-new-hero--constellation h1 {
    max-width: 620px;
    font-size: clamp(2.35rem, 4.6vw, 3.8rem);
}
.case-new-hero--constellation .btn--primary { background: #00263E; }
.case-new-hero--constellation .btn--primary:hover { background: #001A2D; }
.case-new-hero--constellation .case-new-hero__media { isolation: isolate; }
.case-new-hero--constellation .case-new-hero__media::after {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    z-index: -1;
    border: 1px solid rgba(0, 174, 199, 0.30);
    border-radius: var(--r-lg);
    background: #DBF1F4;
}
.case-constellation-showcase { padding-top: 34px; }
.case-constellation-showcase__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 22px;
    align-items: stretch;
}
.case-constellation-showcase figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--paper-3);
    box-shadow: var(--sh-sm);
}
.case-constellation-showcase img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-constellation-showcase__wide { min-height: clamp(340px, 42vw, 560px); }
.case-constellation-showcase__wide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(0, 22, 38, 0.68));
}
.case-constellation-showcase figcaption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 1;
}
.case-constellation-showcase figcaption span,
.case-constellation-showcase__note span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.case-constellation-showcase figcaption strong {
    color: #fff;
    font-size: clamp(1.45rem, 2.5vw, 2.35rem);
    font-weight: 600;
    line-height: 1.08;
}
.case-constellation-showcase__stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 22px;
}
.case-constellation-showcase__stack figure { min-height: 300px; }
.case-constellation-showcase__note {
    min-height: 190px;
    padding: 26px;
    border-radius: var(--r-lg);
    background:
        linear-gradient(145deg, #00263E 0%, #00AEC7 100%);
    box-shadow: var(--sh-sm);
}
.case-constellation-showcase__note span { color: rgba(255, 255, 255, 0.82); }
.case-constellation-showcase__note strong {
    display: block;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.18;
    font-weight: 600;
}
.case-new-impact--constellation {
    background:
        linear-gradient(135deg, rgba(0, 174, 199, 0.26), transparent 46%),
        linear-gradient(180deg, #001A2E 0%, #00263E 100%);
}
.case-new-visit--constellation .case-new-visit__cta.btn--primary  { background: #00263E; }
.case-new-visit--constellation .case-new-visit__cta.btn--primary:hover { background: #001A2D; }
@media (max-width: 992px) {
    .case-new-hero--constellation .case-new-hero__grid { grid-template-columns: 1fr; }
    .case-constellation-showcase__grid { grid-template-columns: 1fr; }
    .case-constellation-showcase__stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
}
@media (max-width: 600px) {
    .case-constellation-showcase__stack { grid-template-columns: 1fr; }
}

/* ============ Blokland Coldstores case treatment (brand red #C01830, black) ============ */
.case-new-hero--blokland {
    padding: 68px 0 64px;
    background:
        linear-gradient(135deg, rgba(192, 24, 48, 0.12) 0%, rgba(192, 24, 48, 0) 46%),
        linear-gradient(180deg, #FFF7F8 0%, #FBE7EB 100%);
}
.case-new-hero--blokland::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(192, 24, 48, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(192, 24, 48, 0.06) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.78), transparent 78%);
}
.case-new-hero--blokland .container {
    position: relative;
    z-index: 1;
}
.case-new-hero--blokland .case-new-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 42px;
}
.case-new-hero--blokland .serif,
.case-new-hero--blokland .btn-text:hover { color: #C01830; }
.case-new-hero--blokland h1 {
    max-width: 620px;
    font-size: clamp(2.35rem, 4.6vw, 3.8rem);
}
.case-new-hero--blokland .btn--primary { background: #C01830; }
.case-new-hero--blokland .btn--primary:hover { background: #9E1428; }
.case-new-hero--blokland .case-new-hero__media { isolation: isolate; }
.case-new-hero--blokland .case-new-hero__media::after {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    z-index: -1;
    border: 1px solid rgba(192, 24, 48, 0.26);
    border-radius: var(--r-lg);
    background: #FADFE3;
}
.case-blokland-showcase { padding-top: 34px; }
.case-blokland-showcase__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 22px;
    align-items: stretch;
}
.case-blokland-showcase figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--paper-3);
    box-shadow: var(--sh-sm);
}
.case-blokland-showcase img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-blokland-showcase__wide { min-height: clamp(340px, 42vw, 560px); }
.case-blokland-showcase__wide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(18, 12, 13, 0.68));
}
.case-blokland-showcase figcaption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 1;
}
.case-blokland-showcase figcaption span,
.case-blokland-showcase__note span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.case-blokland-showcase figcaption strong {
    color: #fff;
    font-size: clamp(1.45rem, 2.5vw, 2.35rem);
    font-weight: 600;
    line-height: 1.08;
}
.case-blokland-showcase__stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 22px;
}
.case-blokland-showcase__stack figure { min-height: 300px; }
.case-blokland-showcase__note {
    min-height: 190px;
    padding: 26px;
    border-radius: var(--r-lg);
    background:
        linear-gradient(145deg, #1A1213 0%, #C01830 100%);
    box-shadow: var(--sh-sm);
}
.case-blokland-showcase__note span { color: rgba(255, 255, 255, 0.82); }
.case-blokland-showcase__note strong {
    display: block;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.18;
    font-weight: 600;
}
.case-new-impact--blokland {
    background:
        linear-gradient(135deg, rgba(192, 24, 48, 0.28), transparent 46%),
        linear-gradient(180deg, #160E10 0%, #2A1418 100%);
}
.case-new-visit--blokland .case-new-visit__cta.btn--primary  { background: #C01830; }
.case-new-visit--blokland .case-new-visit__cta.btn--primary:hover { background: #9E1428; }
@media (max-width: 992px) {
    .case-new-hero--blokland .case-new-hero__grid { grid-template-columns: 1fr; }
    .case-blokland-showcase__grid { grid-template-columns: 1fr; }
    .case-blokland-showcase__stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
}
@media (max-width: 600px) {
    .case-blokland-showcase__stack { grid-template-columns: 1fr; }
}

/* ============ Jumbo Diset case treatment (brand red #E00010) ============ */
.case-new-hero--jumbo {
    padding: 68px 0 64px;
    background:
        linear-gradient(135deg, rgba(224, 0, 16, 0.12) 0%, rgba(224, 0, 16, 0) 46%),
        linear-gradient(180deg, #FFF6F6 0%, #FCE6E7 100%);
}
.case-new-hero--jumbo::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(224, 0, 16, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(224, 0, 16, 0.06) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.78), transparent 78%);
}
.case-new-hero--jumbo .container {
    position: relative;
    z-index: 1;
}
.case-new-hero--jumbo .case-new-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 42px;
}
.case-new-hero--jumbo .serif,
.case-new-hero--jumbo .btn-text:hover { color: #E00010; }
.case-new-hero--jumbo h1 {
    max-width: 620px;
    font-size: clamp(2.35rem, 4.6vw, 3.8rem);
}
.case-new-hero--jumbo .btn--primary { background: #E00010; }
.case-new-hero--jumbo .btn--primary:hover { background: #B8000D; }
.case-new-hero--jumbo .case-new-hero__media { isolation: isolate; }
.case-new-hero--jumbo .case-new-hero__media::after {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    z-index: -1;
    border: 1px solid rgba(224, 0, 16, 0.26);
    border-radius: var(--r-lg);
    background: #FADFE0;
}
.case-jumbo-showcase { padding-top: 34px; }
.case-jumbo-showcase__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 22px;
    align-items: stretch;
}
.case-jumbo-showcase figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--paper-3);
    box-shadow: var(--sh-sm);
}
.case-jumbo-showcase img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-jumbo-showcase__wide { min-height: clamp(340px, 42vw, 560px); }
.case-jumbo-showcase__wide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(40, 6, 8, 0.68));
}
.case-jumbo-showcase figcaption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 1;
}
.case-jumbo-showcase figcaption span,
.case-jumbo-showcase__note span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.case-jumbo-showcase figcaption strong {
    color: #fff;
    font-size: clamp(1.45rem, 2.5vw, 2.35rem);
    font-weight: 600;
    line-height: 1.08;
}
.case-jumbo-showcase__stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 22px;
}
.case-jumbo-showcase__stack figure { min-height: 300px; }
.case-jumbo-showcase__note {
    min-height: 190px;
    padding: 26px;
    border-radius: var(--r-lg);
    background:
        linear-gradient(145deg, #2A0608 0%, #E00010 100%);
    box-shadow: var(--sh-sm);
}
.case-jumbo-showcase__note span { color: rgba(255, 255, 255, 0.82); }
.case-jumbo-showcase__note strong {
    display: block;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.18;
    font-weight: 600;
}
.case-new-impact--jumbo {
    background:
        linear-gradient(135deg, rgba(224, 0, 16, 0.28), transparent 46%),
        linear-gradient(180deg, #15100F 0%, #2A1112 100%);
}
.case-new-visit--jumbo .case-new-visit__cta.btn--primary  { background: #E00010; }
.case-new-visit--jumbo .case-new-visit__cta.btn--primary:hover { background: #B8000D; }
@media (max-width: 992px) {
    .case-new-hero--jumbo .case-new-hero__grid { grid-template-columns: 1fr; }
    .case-jumbo-showcase__grid { grid-template-columns: 1fr; }
    .case-jumbo-showcase__stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
}
@media (max-width: 600px) {
    .case-jumbo-showcase__stack { grid-template-columns: 1fr; }
}

/* ============ PackHero case treatment (brand yellow #f9ed55, dark text for contrast) ============ */
.case-new-hero--packhero {
    padding: 68px 0 64px;
    background:
        linear-gradient(135deg, rgba(249, 237, 85, 0.24) 0%, rgba(249, 237, 85, 0) 46%),
        linear-gradient(180deg, #FFFEF7 0%, #FBF7D2 100%);
}
.case-new-hero--packhero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(33, 32, 12, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(33, 32, 12, 0.045) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.78), transparent 78%);
}
.case-new-hero--packhero .container {
    position: relative;
    z-index: 1;
}
.case-new-hero--packhero .case-new-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 42px;
}
/* Same story as Hovens: this yellow is too light to carry text, so the accent
   word stays dark ink and the brand colour becomes a highlighter behind it. */
.case-new-hero--packhero .serif {
    color: #15181B;
    background: linear-gradient(transparent 58%, rgba(249, 237, 85, 0.7) 0);
}
.case-new-hero--packhero .btn-text:hover { color: #15181B; }
.case-new-hero--packhero h1 {
    max-width: 620px;
    font-size: clamp(2.35rem, 4.6vw, 3.8rem);
}
.case-new-hero--packhero .btn--primary { background: #f9ed55; color: #15181B; }
.case-new-hero--packhero .btn--primary:hover { background: #EBDC33; color: #15181B; }
.case-new-hero--packhero .case-new-hero__media { isolation: isolate; }
.case-new-hero--packhero .case-new-hero__media::after {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    z-index: -1;
    border: 1px solid rgba(249, 237, 85, 0.7);
    border-radius: var(--r-lg);
    background: #FCF6BE;
}
.case-packhero-showcase { padding-top: 34px; }
.case-packhero-showcase__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 22px;
    align-items: stretch;
}
.case-packhero-showcase figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--paper-3);
    box-shadow: var(--sh-sm);
}
.case-packhero-showcase img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-packhero-showcase__wide { min-height: clamp(340px, 42vw, 560px); }
.case-packhero-showcase__wide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(21, 24, 27, 0.68));
}
.case-packhero-showcase figcaption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 1;
}
.case-packhero-showcase figcaption span,
.case-packhero-showcase__note span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.case-packhero-showcase figcaption strong {
    color: #fff;
    font-size: clamp(1.45rem, 2.5vw, 2.35rem);
    font-weight: 600;
    line-height: 1.08;
}
.case-packhero-showcase__stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 22px;
}
.case-packhero-showcase__stack figure { min-height: 300px; }
.case-packhero-showcase__note {
    min-height: 190px;
    padding: 26px;
    border-radius: var(--r-lg);
    background:
        linear-gradient(145deg, #15181B 0%, #3B3A12 100%);
    box-shadow: var(--sh-sm);
}
.case-packhero-showcase__note span { color: rgba(249, 237, 85, 0.95); }
.case-packhero-showcase__note strong {
    display: block;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.18;
    font-weight: 600;
}
.case-new-impact--packhero {
    background:
        linear-gradient(135deg, rgba(249, 237, 85, 0.2), transparent 46%),
        linear-gradient(180deg, #15181B 0%, #2C2B12 100%);
}
.case-new-visit--packhero .case-new-visit__cta.btn--primary  { background: #f9ed55; color: #15181B; }
.case-new-visit--packhero .case-new-visit__cta.btn--primary:hover { background: #EBDC33; color: #15181B; }
.case-new-collab__card--packhero p { border-left-color: rgba(249, 237, 85, 0.9); }
@media (max-width: 992px) {
    .case-new-hero--packhero .case-new-hero__grid { grid-template-columns: 1fr; }
    .case-packhero-showcase__grid { grid-template-columns: 1fr; }
    .case-packhero-showcase__stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
}
@media (max-width: 600px) {
    .case-packhero-showcase__stack { grid-template-columns: 1fr; }
}

.case-new-impact--compass {
    background:
        linear-gradient(135deg, rgba(47, 122, 89, 0.26), transparent 44%),
        linear-gradient(180deg, #0F1B38 0%, #102A34 100%);
}
.case-new-impact--compass .case-new-results div {
    border-color: rgba(255, 255, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
}
@media (max-width: 991px) {
    .case-new-hero--compass .case-new-hero__grid {
        grid-template-columns: 1fr;
    }
    .case-compass-menu-card {
        right: 12px;
        width: min(310px, 58%);
    }
    .case-compass-showcase__grid {
        grid-template-columns: 1fr;
    }
    .case-compass-showcase__stack {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.75fr);
        grid-template-rows: auto;
    }
}

@media (max-width: 767px) {
    .case-new-hero--compass .case-new-hero__media::after {
        display: none;
    }
    .case-compass-menu-card {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin-top: 14px;
    }
    .case-compass-showcase__stack {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .case-new-hero--compass {
        padding-top: 56px;
        padding-bottom: 52px;
    }
    .case-compass-showcase {
        padding-top: 20px;
    }
    .case-compass-showcase figcaption {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }
}

/* =====================================================
   Homepage agency layout
   ===================================================== */
.tpg-hero--agency {
    padding: clamp(46px, 5.6vw, 76px) 0 44px;
    background:
        linear-gradient(115deg, rgba(15, 27, 56, 0.035) 0 1px, transparent 1px 120px),
        linear-gradient(180deg, #FFFFFF 0%, #F8FAFF 100%);
}
.tpg-hero--agency::before {
    background:
        linear-gradient(90deg, rgba(15, 27, 56, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(15, 27, 56, 0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.72), transparent 86%);
}
.tpg-hero--agency::after {
    height: 86px;
}
.tpg-agency-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(30px, 4.4vw, 56px);
    align-items: start;
}
.tpg-agency-hero__copy {
    position: relative;
    z-index: 2;
    padding-top: clamp(8px, 2vw, 24px);
}
.tpg-agency-hero__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--ink-mute);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tpg-agency-hero__label::before {
    content: "";
    width: 34px;
    height: 1px;
    background: var(--blue);
}
.tpg-agency-hero h1 {
    max-width: 670px;
    margin: 0 0 20px;
    font-size: clamp(2.65rem, 4.85vw, 4.25rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
}
.tpg-agency-hero .lede {
    max-width: 580px;
    margin: 0;
}
.tpg-agency-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}
.tpg-agency-hero__proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    max-width: 620px;
    margin-top: 34px;
    border-top: 1px solid var(--line);
}
.tpg-agency-hero__proof span {
    display: block;
    padding: 18px 18px 0 0;
    color: var(--ink-mute);
    font-size: 12.5px;
    line-height: 1.35;
}
.tpg-agency-hero__proof span + span {
    padding-left: 18px;
    border-left: 1px solid var(--line);
}
.tpg-agency-hero__proof strong {
    display: block;
    margin-bottom: 5px;
    color: var(--ink);
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    line-height: 1;
    letter-spacing: -0.04em;
}
.tpg-agency-hero__stage {
    position: relative;
    min-height: 540px;
}
.tpg-agency-hero__stage::before {
    content: "";
    position: absolute;
    inset: 12% -4% 0 12%;
    border: 1px solid rgba(15, 27, 56, 0.08);
    border-radius: 34px;
    transform: rotate(-3deg);
    background:
        linear-gradient(135deg, rgba(94,135,222,0.08), transparent 42%),
        rgba(255,255,255,0.5);
}
.tpg-agency-hero__mockup {
    position: absolute;
    top: 58px;
    left: 0;
    right: -34px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: var(--paper);
    box-shadow: 0 34px 90px rgba(15, 27, 56, 0.14), 0 8px 18px rgba(15, 27, 56, 0.06);
    transform: rotate(1.5deg);
}
.tpg-agency-hero__mockup .ui-mockup__body {
    min-height: 420px;
}
.tpg-agency-hero__panel {
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(255,255,255,0.72);
    border-radius: 18px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 20px 48px rgba(15, 27, 56, 0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.tpg-agency-hero__panel--top {
    top: 0;
    right: 4%;
    width: 210px;
    padding: 18px;
}
.tpg-agency-hero__panel--top span,
.tpg-agency-hero__panel--top small {
    display: block;
    color: var(--ink-mute);
    font-size: 12px;
}
.tpg-agency-hero__panel--top strong {
    display: block;
    margin: 0 0 4px;
    color: var(--ink);
    font-size: 2.35rem;
    line-height: 1;
    letter-spacing: -0.05em;
}
.tpg-agency-hero__panel--bottom {
    left: -22px;
    bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--blue-deep);
    font-size: 13px;
    font-weight: 700;
}
.tpg-agency-hero__panel--bottom i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 0 5px rgba(34,197,94,0.14);
}

.tpg-hero--sumedia {
    box-sizing: border-box;
    min-height: calc(100vh - 130px);
    padding: clamp(34px, 4vw, 54px) 0 clamp(8px, 1vw, 18px);
    background:
        linear-gradient(90deg, rgba(15, 27, 56, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(15, 27, 56, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
    background-size: 112px 112px, 112px 112px, auto;
    color: var(--ink);
}
.tpg-hero--sumedia::before {
    background:
        linear-gradient(115deg, transparent 0 54%, rgba(94,135,222,0.08) 54% 54.1%, transparent 54.1%),
        linear-gradient(180deg, rgba(118,191,233,0.13), transparent 54%);
}
.tpg-hero--sumedia::after {
    height: 70px;
    background: linear-gradient(180deg, rgba(255,255,255,0), var(--paper));
}
.tpg-hero--sumedia .container,
.tpg-hero--sumedia .tpg-agency-hero {
    min-height: 0;
}
.tpg-hero--sumedia .tpg-agency-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.72fr);
    grid-template-areas:
        "copy photo"
        "rail rail";
    gap: clamp(32px, 4vw, 52px) clamp(42px, 6vw, 88px);
    align-items: center;
}
.tpg-hero--sumedia .tpg-agency-hero__copy {
    grid-area: copy;
    max-width: 780px;
    padding-top: 0;
}
.tpg-hero--sumedia .tpg-agency-hero__label {
    color: var(--ink-mute);
}
.tpg-hero--sumedia .tpg-agency-hero__label::before {
    background: var(--blue);
}
.tpg-hero--sumedia .tpg-agency-hero h1 {
    max-width: 760px;
    color: var(--ink);
    font-size: clamp(2.65rem, 4.4vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
}
.tpg-hero--sumedia .tpg-agency-hero .serif {
    color: var(--blue-deep);
}
.tpg-hero--sumedia .tpg-agency-hero .lede {
    max-width: 640px;
    color: var(--ink-soft);
}
.tpg-agency-hero__photo {
    grid-area: photo;
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3.08;
    border: 1px solid rgba(15,27,56,0.08);
    border-radius: 8px;
    background: var(--paper-2);
    box-shadow: 0 24px 68px rgba(15, 27, 56, 0.13);
}
.tpg-agency-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(15,27,56,0.08));
    pointer-events: none;
}
.tpg-agency-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
}
.tpg-hero--sumedia .btn--primary {
    border-color: var(--blue);
    background: var(--blue);
    color: var(--paper);
    box-shadow: 0 12px 30px rgba(57,85,184,0.24);
}
.tpg-hero--sumedia .btn--primary:hover {
    background: var(--blue-deep);
    border-color: var(--blue-deep);
}
.tpg-hero--sumedia .btn--ghost {
    border-color: var(--line-strong);
    background: rgba(255,255,255,0.74);
    color: var(--ink);
}
.tpg-hero--sumedia .btn--ghost:hover {
    border-color: var(--blue-tint);
    background: var(--tint-blue);
    color: var(--blue-deep);
}
.tpg-agency-hero__rail {
    grid-area: rail;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
}
.tpg-agency-hero__tile {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 98px;
    padding: 18px 22px 16px;
    color: var(--ink);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transition: background-color .22s ease, border-color .22s ease, transform .22s ease;
}
.tpg-agency-hero__tile:first-child {
    border-left: 1px solid var(--line);
}
.tpg-agency-hero__tile span {
    grid-column: 1 / -1;
    color: var(--ink-mute);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tpg-agency-hero__tile strong {
    align-self: end;
    color: var(--ink);
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    font-weight: 600;
    line-height: 1.35;
}
.tpg-agency-hero__tile i {
    align-self: end;
    color: var(--blue);
    transition: transform .22s ease, color .22s ease;
}
.tpg-agency-hero__tile:hover {
    background: rgba(255,255,255,0.72);
    border-color: var(--blue-tint);
    transform: translateY(-2px);
}
.tpg-agency-hero__tile:hover i {
    color: var(--blue-deep);
    transform: translateX(4px);
}

.tpg-logos--agency {
    padding: 22px 0 72px;
    text-align: left;
}
.tpg-logos--agency .container {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.tpg-logos--agency .tpg-logos__label {
    margin: 0;
    line-height: 1.35;
}
.tpg-logos--agency .tpg-logos__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 22px 34px;
    max-width: none;
}
.tpg-logos--agency .tpg-logos__grid a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
}

.home-flow {
    padding-top: 72px;
    background: var(--paper);
}
.home-flow .container {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(36px, 6vw, 80px);
    align-items: start;
}
.home-flow .section__head {
    max-width: none;
    margin: 0;
}
.home-flow .section__head h2 {
    margin-top: 0;
}
.home-flow .tpg-pain {
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--line);
}
.home-flow .tpg-pain__card {
    display: grid;
    grid-template-columns: 72px minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 22px;
    align-items: start;
    padding: 24px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.home-flow .tpg-pain__card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line);
}
.home-flow .tpg-pain__text,
.home-flow .tpg-pain__after {
    margin: 0;
}
.home-flow .tpg-pain__after {
    padding: 0;
    border: 0;
}

.home-approach {
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.home-approach .tpg-approach {
    border-top: 0;
}
.home-approach .tpg-stats {
    margin-top: 54px;
    background: rgba(255,255,255,0.54);
    border-radius: 24px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.home-services {
    background: #101A33;
    color: var(--paper);
    overflow: hidden;
}
.home-services::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 130px),
        linear-gradient(180deg, rgba(118,191,233,0.08), transparent 40%);
    pointer-events: none;
}
.home-services .container {
    position: relative;
    z-index: 1;
}
.home-services h2,
.home-services h3 {
    color: var(--paper);
}
.home-services .serif {
    color: var(--sky);
}
.home-services .tpg-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 54px;
    border-top: 1px solid rgba(255,255,255,0.18);
}
.home-services .tpg-service {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 0 18px;
    padding: 28px 0;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.14);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.home-services .tpg-service:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(255,255,255,0.26);
}
.home-services .tpg-service__icon {
    grid-row: span 3;
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.18);
    color: var(--sky);
}
.home-services .tpg-service p {
    color: rgba(255,255,255,0.72);
}
.home-services .tpg-service__tags span {
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.68);
}

.home-products .tpg-products {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 34px;
    border-top: 1px solid var(--line);
}
.home-products .tpg-product {
    display: grid;
    grid-template-columns: 190px minmax(0, 0.86fr) minmax(0, 1.14fr);
    grid-template-areas:
        "head title list"
        "head tagline list"
        "head cta list";
    gap: 10px 44px;
    padding: 34px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.home-products .tpg-product:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line-strong);
}
.home-products .tpg-product--featured {
    padding-top: 58px;
}
.home-products .tpg-product--featured::before {
    top: 24px;
    left: 0;
}
.home-products .tpg-product__head {
    grid-area: head;
    align-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0;
    padding-top: 24px;
}
.home-products .tpg-product h3 {
    grid-area: title;
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
}
.home-products .tpg-product__tagline {
    grid-area: tagline;
    max-width: 460px;
    margin: 0;
}
.home-products .tpg-product ul {
    grid-area: list;
    margin: 0;
}
.home-products .tpg-product__cta {
    grid-area: cta;
    justify-self: flex-start;
    align-self: end;
    border-top: 0;
    margin: 12px 0 0;
    padding-top: 0;
}

.home-proof {
    background: var(--paper-2);
}
.home-proof .tpg-testimonials {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
}
.home-proof .tpg-testimonial {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 40px;
    padding: 26px 0 28px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    align-items: start;
}
.home-proof .tpg-testimonial::before {
    display: none;
}
.home-proof .tpg-testimonial__quote {
    margin: 0;
    font-size: clamp(0.98rem, 1.05vw, 1.08rem);
    line-height: 1.6;
    color: var(--ink-soft);
    font-weight: 400;
    quotes: "“" "”";
    max-width: 62ch;
}
.home-proof .tpg-testimonial__person {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding-top: 2px;
}
.home-proof .tpg-testimonial__person strong {
    font-size: 14px;
    line-height: 1.35;
    color: var(--ink);
}
.home-proof .tpg-testimonial__person small {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-mute);
}
.tpg-testimonial__cta {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--blue-deep);
    font-size: 13.5px; font-weight: 500;
    text-decoration: none;
    margin-top: 4px;
}
.tpg-testimonial__cta i { transition: transform .15s ease; font-size: 0.95em; }
.tpg-testimonial__cta:hover { color: var(--blue-deep); }
.tpg-testimonial__cta:hover i { transform: translateX(3px); }
@media (max-width: 767px) {
    .home-proof .tpg-testimonial { grid-template-columns: 1fr; gap: 18px; }
}

.home-cases .tpg-cases--featured {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 22px;
}

/* Editorial card — strips the standard chrome (no border, no shadow,
   no radius, no pill tag, no centered logo). Photo + tracked eyebrow
   + headline + small description + underline link. */
.tpg-case--feature {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    transition: none;
}
.tpg-case--feature:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}
.tpg-case--feature .tpg-case__shot {
    aspect-ratio: 4 / 3;
    border-radius: 2px;
    border: 0;
    margin-bottom: 18px;
    overflow: hidden;
    background: var(--paper-2);
}
.tpg-case--feature .tpg-case__shot img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.tpg-case--feature:hover .tpg-case__shot img {
    transform: scale(1.035);
}
.tpg-case--feature .tpg-case__body {
    padding: 0;
    gap: 10px;
    display: flex;
    flex-direction: column;
}
.tpg-case--feature .tpg-case__eyebrow {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.tpg-case--feature .tpg-case__num {
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    border-right: 1px solid var(--line-strong);
    padding-right: 10px;
    letter-spacing: 0.08em;
}
.tpg-case--feature h3 {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.012em;
    margin: 0;
}
.tpg-case--feature h3 a {
    color: var(--ink);
    text-decoration: none;
}
.tpg-case--feature h3 a:hover {
    color: var(--blue-deep);
}
.tpg-case--feature p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-mute);
    margin: 0;
    flex: 0 0 auto;
}
.tpg-case--feature .tpg-case__cta {
    align-self: flex-start;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 3px;
    margin-top: 6px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.tpg-case--feature .tpg-case__cta:hover {
    color: var(--blue-deep);
    border-bottom-color: var(--blue-deep);
}
@media (max-width: 1199px) {
    .home-cases .tpg-cases--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .home-cases .tpg-cases--featured { grid-template-columns: 1fr; }
}

.home-cases .tpg-cases:not(.tpg-cases--featured) {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 24px;
}
.home-cases .tpg-cases:not(.tpg-cases--featured) .tpg-case:first-child {
    grid-row: span 2;
}
.home-cases .tpg-cases:not(.tpg-cases--featured) .tpg-case:first-child .tpg-case__shot {
    aspect-ratio: 16 / 10;
}
.home-cases .tpg-cases:not(.tpg-cases--featured) .tpg-case:not(:first-child) {
    display: grid;
    grid-template-columns: 0.92fr 1fr;
}
.home-cases .tpg-cases:not(.tpg-cases--featured) .tpg-case:not(:first-child) .tpg-case__shot {
    aspect-ratio: auto;
    min-height: 100%;
    border-bottom: 0;
    border-right: 1px solid var(--line);
}

.home-stack {
    background:
        linear-gradient(180deg, var(--paper-2) 0%, #fff 100%);
}
.home-stack .tpg-int-grid {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
}

@media (max-width: 991px) {
    .tpg-agency-hero,
    .home-flow .container,
    .home-products .tpg-product,
    .home-proof .tpg-testimonial,
    .home-cases .tpg-cases,
    .home-cases .tpg-case:not(:first-child) {
        grid-template-columns: 1fr;
    }
    .tpg-agency-hero__stage {
        min-height: 560px;
    }
    .tpg-agency-hero__mockup {
        right: 0;
    }
    .tpg-hero--sumedia .tpg-agency-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "photo"
            "rail";
    }
    .tpg-agency-hero__photo {
        max-width: 760px;
    }
    .tpg-agency-hero__rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .home-products .tpg-product {
        grid-template-areas:
            "head"
            "title"
            "tagline"
            "list"
            "cta";
        gap: 14px;
    }
    .home-products .tpg-product__head {
        padding-top: 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .home-cases .tpg-case:not(:first-child) .tpg-case__shot {
        aspect-ratio: 16 / 9;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}

@media (max-width: 767px) {
    .tpg-hero--agency {
        padding-top: 58px;
    }
    .tpg-hero--sumedia {
        min-height: auto;
        padding: 58px 0 34px;
        background-size: 86px 86px, 86px 86px, auto;
    }
    .tpg-hero--sumedia .tpg-agency-hero {
        gap: 34px;
    }
    .tpg-hero--sumedia .tpg-agency-hero__copy {
        padding-top: 0;
    }
    .tpg-agency-hero h1 {
        font-size: clamp(2.35rem, 11vw, 3.15rem);
        letter-spacing: -0.04em;
    }
    .tpg-hero--sumedia .tpg-agency-hero h1 {
        font-size: clamp(2.45rem, 11vw, 3.35rem);
        line-height: 1.04;
    }
    .tpg-agency-hero__photo {
        max-width: none;
        aspect-ratio: 16 / 10.5;
    }
    .tpg-agency-hero__photo img {
        object-position: center 42%;
    }
    .tpg-agency-hero__rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tpg-agency-hero__tile,
    .tpg-agency-hero__tile:first-child {
        min-height: 96px;
        padding: 16px 12px;
        border-left: 0;
        border-right: 0;
    }
    .tpg-agency-hero__tile:nth-child(odd) {
        border-right: 1px solid var(--line);
    }
    .home-services .tpg-services,
    .home-flow .tpg-pain__card {
        grid-template-columns: 1fr;
    }
    .tpg-agency-hero__proof {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .tpg-agency-hero__proof span {
        padding: 14px 10px 0 0;
        font-size: 11.5px;
    }
    .tpg-agency-hero__proof span + span {
        padding-left: 10px;
        border-left: 1px solid var(--line);
    }
    .tpg-agency-hero__proof strong {
        font-size: clamp(1.35rem, 6vw, 1.8rem);
    }
    .tpg-agency-hero__stage {
        display: none;
    }
    .tpg-agency-hero__stage::before,
    .tpg-agency-hero__panel {
        display: none;
    }
    .tpg-agency-hero__mockup {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
    }
    .tpg-agency-hero__mockup .ui-mockup__body {
        min-height: 380px;
    }
    .tpg-agency-hero__mockup .ui-mockup__main {
        padding: 18px;
    }
    .tpg-agency-hero__mockup .ui-mockup__heading {
        margin-bottom: 14px;
    }
    .tpg-agency-hero__mockup .ui-mockup__heading-actions {
        display: none;
    }
    .tpg-agency-hero__mockup .ui-mockup__kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 14px;
    }
    .tpg-agency-hero__mockup .ui-mockup__kpi {
        padding: 10px;
    }
    .tpg-agency-hero__mockup .ui-mockup__kpi-label {
        font-size: 9px;
        letter-spacing: 0.03em;
    }
    .tpg-agency-hero__mockup .ui-mockup__kpi-value {
        font-size: 18px;
    }
    .tpg-agency-hero__mockup .ui-mockup__chart {
        height: 118px;
        padding: 12px 12px 7px;
    }
    .tpg-logos--agency .container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .home-flow .tpg-pain__card {
        gap: 10px;
    }
    .home-services .tpg-services {
        gap: 0;
    }
    .home-services .tpg-service {
        grid-template-columns: 44px minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .tpg-agency-hero__actions .btn {
        width: 100%;
        justify-content: center;
    }
    .tpg-hero--sumedia .tpg-agency-hero__actions .btn {
        width: auto;
    }
    .tpg-agency-hero__proof {
        margin-top: 30px;
    }
}

/* ---- MolCargo case extras ---- */
.case-new-photo-strip--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-new-pullquote-section {
    padding-top: 36px;
    padding-bottom: 36px;
}
.case-new-pullquote {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    border: 0;
    padding: 0;
}
.case-new-pullquote p {
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 2.4vw, 1.95rem);
    line-height: 1.35;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin: 0 0 18px;
}
.case-new-pullquote cite {
    font-style: normal;
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}
.case-new-pullquote cite strong { color: var(--ink); }
.case-new-pullquote cite span { color: var(--ink-mute); }

.case-new-video {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}
.case-new-video__player {
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--ink);
    box-shadow:
        0 30px 60px rgba(15, 27, 56, 0.18),
        0 8px 18px rgba(15, 27, 56, 0.08);
    aspect-ratio: 16 / 9;
}
.case-new-video__player video,
.case-new-video__player iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}
.case-new-video__copy h2 {
    margin: 12px 0 14px;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
}
.case-new-video__copy p {
    color: var(--ink-mute);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

.case-new-collab__head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 40px;
}
.case-new-collab__head h2 {
    margin: 12px 0 0;
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
}
.case-new-collab__byline {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--ink-mute);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.case-new-collab__byline::before {
    content: "—";
    color: var(--ink-mute);
    font-weight: 400;
}
.case-new-collab__byline strong {
    color: var(--ink);
    font-weight: 600;
}
.case-new-collab__byline span::before {
    content: "·";
    margin-right: 6px;
    color: var(--ink-mute);
}
.case-new-collab__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.case-new-collab__card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--sh-xs);
}
.case-new-collab__card i {
    font-size: 22px;
    color: var(--blue-deep);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(32, 58, 115, 0.08);
}
.case-new-collab__card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--ink);
}
.case-new-collab__card p {
    position: relative;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink);
    font-style: italic;
    margin: 0;
    padding-left: 14px;
    border-left: 2px solid rgba(15, 27, 56, 0.08);
}
.case-new-collab__card--compass  p { border-left-color: rgba(47, 122, 89, 0.45); }
.case-new-collab__card--deklok   p { border-left-color: rgba(30, 77, 140, 0.45); }
.case-new-collab__card--molcargo p { border-left-color: rgba(32, 58, 115, 0.45); }
.case-new-collab__card--aes-international p { border-left-color: rgba(35, 58, 123, 0.45); }

@media (max-width: 900px) {
    .case-new-collab__grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .case-new-video {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

/* ============ Visit-client banner (used on all 3 case pages) ============ */
.case-new-visit {
    position: relative;
    padding: 56px 0;
    isolation: isolate;
    overflow: hidden;
}
.case-new-visit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.16), transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.10), transparent 55%);
}
.case-new-visit__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
    padding: 28px 36px;
    border-radius: var(--r-lg);
    background: rgba(255,255,255,0.94);
    box-shadow:
        0 30px 60px rgba(15, 27, 56, 0.20),
        0 6px 16px rgba(15, 27, 56, 0.08);
}
.case-new-visit__logo {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    min-width: 120px;
}
.case-new-visit__logo img {
    display: block;
    height: 38px;
    width: auto;
    object-fit: contain;
}
.case-new-visit__logo img + img {
    padding-left: 16px;
    border-left: 1px solid var(--line);
    height: 34px;
}
.case-new-visit__copy { min-width: 0; }
.case-new-visit__copy h2 {
    margin: 8px 0 6px;
    font-size: clamp(1.4rem, 2.2vw, 1.95rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
}
.case-new-visit__copy p {
    color: var(--ink-mute);
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}
.case-new-visit__cta { white-space: nowrap; }

/* Brand-tinted backgrounds per case */
.case-new-visit--compass {
    background:
        linear-gradient(135deg, rgba(47, 122, 89, 0.18), transparent 50%),
        linear-gradient(180deg, #163B34 0%, #1F5A48 100%);
}
.case-new-visit--compass .case-new-visit__cta.btn--primary  { background: #2F7A59; }
.case-new-visit--compass .case-new-visit__cta.btn--primary:hover { background: #215D43; }

.case-new-visit--deklok {
    background:
        linear-gradient(135deg, rgba(30, 77, 140, 0.22), transparent 50%),
        linear-gradient(180deg, #0E2347 0%, #1E4D8C 100%);
}
.case-new-visit--deklok .case-new-visit__cta.btn--primary  { background: #1E4D8C; }
.case-new-visit--deklok .case-new-visit__cta.btn--primary:hover { background: #143868; }

.case-new-visit--molcargo {
    background:
        linear-gradient(135deg, rgba(32, 58, 115, 0.22), transparent 50%),
        linear-gradient(180deg, #0E1A3E 0%, #203A73 100%);
}
.case-new-visit--molcargo .case-new-visit__cta.btn--primary  { background: #203A73; }
.case-new-visit--molcargo .case-new-visit__cta.btn--primary:hover { background: #142555; }

.case-new-visit--aes-international {
    background:
        linear-gradient(135deg, rgba(35, 58, 123, 0.22), transparent 50%),
        linear-gradient(180deg, #0E1A3E 0%, #233a7b 100%);
}
.case-new-visit--aes-international .case-new-visit__cta.btn--primary  { background: #233a7b; }
.case-new-visit--aes-international .case-new-visit__cta.btn--primary:hover { background: #16264f; }

.case-new-visit--nedcargo {
    background: linear-gradient(180deg, #FF5100 0%, #FF7028 100%);
}
.case-new-visit--nedcargo .case-new-visit__cta.btn--primary  { background: #1A1004; color: #fff; }
.case-new-visit--nedcargo .case-new-visit__cta.btn--primary:hover { background: #000; }

.case-new-visit--nedcargo {
    background:
        linear-gradient(135deg, rgba(226, 35, 26, 0.22), transparent 50%),
        linear-gradient(180deg, #4A0E0A 0%, #8B1410 100%);
}
.case-new-visit--nedcargo .case-new-visit__cta.btn--primary  { background: #C8202C; }
.case-new-visit--nedcargo .case-new-visit__cta.btn--primary:hover { background: #9F1822; }

/* ============ NedCargo showcase grid ============ */
.case-nedcargo-showcase { padding-top: 34px; }
.case-nedcargo-showcase__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 22px;
    align-items: stretch;
}
.case-nedcargo-showcase figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--paper-3);
    box-shadow: var(--sh-sm);
}
.case-nedcargo-showcase img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-nedcargo-showcase__wide { min-height: clamp(340px, 42vw, 560px); }
.case-nedcargo-showcase__wide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(15, 27, 56, 0.62));
}
.case-nedcargo-showcase figcaption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 1;
}
.case-nedcargo-showcase figcaption span,
.case-nedcargo-showcase__note span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.case-nedcargo-showcase figcaption strong {
    color: #fff;
    font-size: clamp(1.45rem, 2.5vw, 2.35rem);
    font-weight: 600;
    line-height: 1.08;
}
.case-nedcargo-showcase__stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 22px;
}
.case-nedcargo-showcase__stack figure { min-height: 300px; }
.case-nedcargo-showcase__note {
    min-height: 190px;
    padding: 26px;
    border-radius: var(--r-lg);
    background:
        linear-gradient(145deg, #4A0E0A 0%, #8B1410 100%);
    box-shadow: var(--sh-sm);
}
.case-nedcargo-showcase__note span { color: rgba(255, 255, 255, 0.66); }
.case-nedcargo-showcase__note strong {
    display: block;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.18;
    font-weight: 600;
}

@media (max-width: 992px) {
    .case-nedcargo-showcase__grid { grid-template-columns: 1fr; }
    .case-nedcargo-showcase__stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
}
@media (max-width: 600px) {
    .case-nedcargo-showcase__stack { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .case-new-visit__inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 22px;
        padding: 28px;
    }
    .case-new-visit__logo {
        justify-self: center;
    }
    .case-new-visit__cta {
        justify-self: center;
    }
}