/* Public site components. Colours, fonts and radii come from brand-tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
/* hard guarantee: the page never grows a horizontal scrollbar, whatever overflows */
html, body { overflow-x: hidden; overflow-x: clip; }
body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}
::selection { background: var(--plum); color: var(--cream); }

/* Inline illustrations use semantic colour roles so they follow the nearest theme context. */
.theme-illustration {
    --art-ink: var(--ink);
    --art-paper: var(--cream);
    --art-accent: var(--plum);
    --art-accent-soft: var(--plum-soft);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Letterkracht: condensed uppercase display for titles, DM Sans for everything that is read. */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
}
/* Caps only where titles are short and curated. Titles from the CMS and sentence-length
   headings stay in regular case, as the brand pack asks. */
.hero h1, .big-cta h2 { text-transform: uppercase; }
.blog-article-hero h1, .case-hero h1, .dictionary-term-hero h1, .connector-detail-page .hero h1 { text-transform: none; }
h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
}
h1 { font-size: clamp(52px, 5.7vw, 87px); }
h2 { font-size: clamp(38px, 4vw, 60px); }
h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; }
h4 { font-size: clamp(18px, 1.6vw, 21px); }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
/* Emphasis in a heading is carried by colour alone: same face, same weight.
   A second typeface plus italics plus colour is three signals on one word. */
h1 em, h2 em, h3 em, h4 em, .accent {
    font-style: normal;
    color: var(--plum);
}
p { margin: 0 0 1em; }
/* Kept as a no-op alias so existing markup keeps inheriting the heading accent. */
.serif-italic { font-style: normal; }
.lead, .hero-lede, .section-head p { font-family: var(--font-body); font-weight: 400; }

/* prose (used by blog articles, case studies, dictionary) */
.prose { font-size: 18px; line-height: 1.7; color: var(--ink); max-width: 68ch; }
.prose p { margin: 0 0 1.2em; }
.prose h2 { font-size: clamp(32px, 3.5vw, 44px); line-height: 1.05; letter-spacing: -0.015em; text-transform: none; margin: 1.8em 0 0.5em; }
.prose h3 { font-size: clamp(25px, 2.6vw, 30px); line-height: 1.1; letter-spacing: -0.01em; margin: 1.6em 0 0.4em; }
.prose h4 { font-size: 19px; margin: 1.4em 0 0.4em; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.4em; }
.prose a { color: var(--plum); border-bottom: 1px solid var(--plum-soft); transition: border-color .2s; }
.prose a:hover { border-bottom-color: var(--plum); }
.prose blockquote { border-left: 3px solid var(--plum); padding: 0.4em 1em; margin: 1.5em 0; font-family: var(--font-body); font-style: italic; font-size: 1.1em; color: var(--ink-soft); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--cream-deep); padding: 2px 6px; border-radius: var(--radius-control); }
.prose pre { background: var(--ink); color: var(--cream); padding: 20px 24px; border-radius: var(--radius-card); overflow-x: auto; margin: 1.5em 0; font-size: 14px; line-height: 1.5; }
.prose pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.prose img { border-radius: var(--radius-card); margin: 1.5em 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 15px; }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { font-weight: 700; background: var(--cream-deep); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap-narrow { max-width: 860px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap-wide { max-width: 1480px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.sap-table-wrap { width: 100%; }
.sap-table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: auto; }
.sap-table-wrap th, .sap-table-wrap td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.sap-table-wrap thead th { background: var(--cream-deep); font-weight: 700; white-space: nowrap; }
@media (max-width: 1024px) {
    .sap-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sap-table-wrap table { min-width: 900px; }
}
section { padding-top: clamp(56px, 7.8vw, 112px); padding-bottom: clamp(56px, 7.8vw, 112px); }
.section-sm { padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 96px); }
/* the nav is sticky, so an anchor that lands at y=0 lands underneath it */
:where(section, div, article, aside)[id] { scroll-margin-top: 92px; }

/* NAV */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    transition: background .25s ease, box-shadow .25s ease;
}
.nav.is-scrolled {
    background: rgba(246, 241, 234, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 3px 20px rgba(22, 18, 16, 0.03);
}
[data-theme="dark"] .nav.is-scrolled { background: rgba(21, 18, 24, 0.9); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; }
.nav-logo { display: inline-flex; align-items: center; color: var(--ink); flex-shrink: 0; }
.nav-logo img { height: 25px; width: auto; max-width: none; display: block; }
.nav-links { display: flex; gap: 8px; align-items: center; }
.nav-item { position: relative; }
.nav-item > a, .nav-item > button {
    font-family: var(--font-body);
    font-size: 13px; font-weight: 600; color: var(--ink);
    padding: 10px 12px;
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    border-radius: var(--radius-control);
    transition: background .2s, color .2s;
}
.nav-item > a:hover, .nav-item > button:hover,
.nav-item.is-open > button { color: var(--plum); }
.nav-caret { width: 10px; height: 10px; transition: transform .2s ease; opacity: 0.6; }
.nav-item.is-open .nav-caret { transform: rotate(180deg); opacity: 1; }
.nav-dropdown {
    position: absolute;
    top: calc(100% + 8px); left: 0;
    min-width: 260px;
    padding: 12px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: 0 24px 48px -24px rgba(22,18,16,0.22), 0 4px 12px -4px rgba(22,18,16,0.06);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 60;
}
.nav-item.is-open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 14px;
    border-radius: var(--radius-control);
    font-size: 14px; font-weight: 500;
    color: var(--ink);
    transition: background .18s, color .18s;
}
.nav-dropdown a .nav-sub { font-family: var(--font-body); font-weight: 400; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); letter-spacing: 0; }
.nav-dropdown a:hover { background: var(--plum-soft); color: var(--plum-deep); }
.nav-dropdown a:hover .nav-sub { color: var(--plum); }
.nav-dropdown.nav-dropdown-right { left: auto; right: 0; }
.nav-dropdown.nav-dropdown-wide { min-width: 340px; }
.nav-right { display: flex; gap: 8px; align-items: center; }
.nav-lang-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 10px 14px; background: none; border: none; cursor: pointer; border-radius: var(--radius-control); transition: background .2s; text-decoration: none; }
.nav-lang-btn:hover { color: var(--plum); }
.nav-lang-btn svg { width: 14px; height: 14px; }
.nav-login { padding: 11px 17px; }
.theme-toggle {
    display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center;
    padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-control);
    background: transparent; color: var(--ink); cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s;
}
.theme-toggle:hover { background: var(--cream-deep); border-color: var(--plum); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 3px solid var(--plum-soft); outline-offset: 2px; }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
.nav-burger { display: none; background: none; border: 1px solid var(--line-strong); padding: 10px; border-radius: var(--radius-control); cursor: pointer; color: var(--ink); }
.nav-burger svg { width: 20px; height: 20px; display: block; }
.nav-burger:hover { background: rgba(22,18,16,0.06); }

/* MOBILE DRAWER */
.mobile-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(380px, 88vw);
    background: var(--cream);
    padding: 96px 28px 32px;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.2,.7,.2,1);
    z-index: 55; overflow-y: auto;
    box-shadow: -20px 0 60px -20px rgba(22,18,16,0.25);
    visibility: hidden;
}
.mobile-drawer.is-open { transform: none; visibility: visible; }
.mobile-drawer-backdrop {
    position: fixed; inset: 0; background: rgba(22,18,16,0.45); z-index: 54;
    opacity: 0; visibility: hidden; transition: opacity .32s, visibility .32s;
}
.mobile-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.mobile-drawer-close {
    position: absolute; top: 24px; right: 24px; width: 40px; height: 40px;
    border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.mobile-drawer-close:hover { background: rgba(22,18,16,0.06); }
.mobile-drawer-close svg { width: 16px; height: 16px; }
.mobile-drawer a:not(.btn) { display: block; font-family: var(--font-body); font-size: 22px; font-weight: 700; color: var(--ink); text-decoration: none; }
.mobile-drawer a:not(.btn):hover { color: var(--plum); }
.mobile-drawer .m-primary { display: flex; flex-direction: column; padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.mobile-drawer .m-primary a { padding: 12px 0; }
.mobile-drawer .m-section { padding: 20px 0 8px; border-bottom: 1px solid var(--line); }
.mobile-drawer .m-section:last-of-type { border-bottom: none; }
.mobile-drawer .m-group { font-family: var(--font-display); font-size: 11px; color: var(--plum); margin: 0 0 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.mobile-drawer .m-sublist { padding-left: 16px; border-left: 2px solid var(--plum-soft); margin-left: 2px; }
.mobile-drawer a.m-sub { font-size: 16px; font-weight: 500; padding: 8px 0; color: var(--ink-soft); }
.mobile-drawer a.m-sub:hover { color: var(--plum); }
.mobile-drawer .m-login { margin-top: 24px; }
.mobile-drawer .m-lang { margin-top: 20px; display: flex; gap: 8px; }
.mobile-drawer .m-lang a { flex: 1; text-align: center; font-size: 14px; font-weight: 600; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); color: var(--ink); display: block; }
.mobile-drawer .m-lang a.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* BUTTONS */
.btn {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 22px;
    min-height: 56px; padding: 15px 22px; border-radius: var(--radius-control);
    font-family: var(--font-body); font-weight: 600; font-size: 14px;
    line-height: 1.4;
    transition: background .2s, color .2s, box-shadow .25s;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
}
.btn svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }
.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: var(--plum); color: var(--cream); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-plum { background: var(--plum); color: var(--cream); }
.btn-plum:hover { background: var(--plum-deep); color: var(--cream); }
.btn-sm { min-height: 44px; padding: 11px 17px; font-size: 13px; }
.btn-xs { min-height: 32px; padding: 6px 12px; font-size: 12px; gap: 6px; }
.btn-lg { min-height: 60px; padding: 18px 28px; font-size: 15px; }
.btn-block { width: 100%; justify-content: center; }
/* One focus ring for every interactive element that is not a form control.
   Plum reads on the light surfaces; the dark bands swap it for cream below. */
.btn:focus-visible,
.link-arrow:focus-visible,
.service-cta:focus-visible,
.nav-item > a:focus-visible,
.nav-item > button:focus-visible,
.nav-lang-btn:focus-visible,
.nav-burger:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; border-radius: var(--radius-control); }

.metrics .link-arrow:focus-visible,
.big-cta .btn:focus-visible,
.lk-proof a:focus-visible,
.lk-contact a:focus-visible { outline-color: var(--plum-soft); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; position: relative; padding-bottom: 3px; text-decoration: none; }
.link-arrow svg { width: 14px; height: 14px; transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: currentColor; transform-origin: left center;
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.link-arrow:hover::after { animation: drawLine .6s cubic-bezier(.2,.7,.2,1); }
@keyframes drawLine {
    0% { transform-origin: right center; transform: scaleX(1); }
    49% { transform-origin: right center; transform: scaleX(0); }
    50% { transform-origin: left center; transform: scaleX(0); }
    100% { transform-origin: left center; transform: scaleX(1); }
}

/* FORMS */
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 8px; }
.form-control, input[type="text"].form-control, input[type="email"].form-control, input[type="password"].form-control, input[type="search"].form-control, textarea.form-control, select.form-control {
    width: 100%;
    font-family: var(--font-body);
    font-size: 15px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    color: var(--ink);
    transition: border-color .2s, box-shadow .2s;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] input.form-control,
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] select.form-control { background: var(--cream-deep); }
.form-control:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px var(--plum-soft); }
textarea.form-control { min-height: 120px; resize: vertical; }
.form-help { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.form-error { font-size: 13px; color: var(--danger); margin-top: 6px; }

/* HERO */
.hero { padding-top: clamp(60px, 8vw, 120px); padding-bottom: clamp(40px, 6vw, 80px); position: relative; overflow: hidden; }
.hero-sm { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero-sm h1 { max-width: 20ch; font-size: clamp(40px, 5.5vw, 72px); margin-bottom: 24px; }
.hero-sm .hero-lede { margin-bottom: 32px; }

/* BREADCRUMB */
.breadcrumb { padding: 20px 0 0; font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--plum); }
.breadcrumb-sep { opacity: 0.4; }
.breadcrumb-current { color: var(--ink); font-weight: 600; }
/* Only survives where the label carries information the heading does not:
   a blog tag, a case sector, an HTTP status. Never as a section eyebrow. */
.eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--plum); display: inline-block; margin-bottom: 20px; }
.hero .wrap > .reveal { position: relative; z-index: 2; }
.hero h1 { max-width: 16ch; margin-bottom: 32px; }
.hero h1 em { font-style: normal; color: var(--plum); }
.hero-lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 52ch; color: var(--ink-soft); margin-bottom: 48px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-cta-note { display: block; margin-top: 16px; font-size: 13px; color: var(--ink-soft); }
.hero-deco { position: absolute; right: -40px; top: 80px; width: 420px; opacity: 0.9; pointer-events: none; }
.hero-deco svg { width: 100%; height: auto; }

/* HERO FLOW (homepage pipeline illustration) */

@keyframes flowDraw { to { stroke-dashoffset: 0; } }
@keyframes flowIn { to { opacity: 1; transform: none; } }
@keyframes barRise { to { transform: scaleY(1); } }
@keyframes gearTurn { to { transform: rotate(360deg); } }
@keyframes tickLoop {
    0%, 6% { stroke-dashoffset: 1; opacity: 0; }
    10% { opacity: 1; }
    18% { stroke-dashoffset: 0; opacity: 1; }
    78% { stroke-dashoffset: 0; opacity: 1; }
    88%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* SECTION HEADING */
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 64px; }
.section-head p { font-size: 19px; color: var(--ink-soft); max-width: 44ch; }
.section-head.center { grid-template-columns: 1fr; text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.section-head.center p { margin-left: auto; margin-right: auto; }

/* TRUSTED LOGOS */
.trusted { padding-top: 40px; padding-bottom: 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trusted-inner { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; justify-content: space-between; }
.trusted-label { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); flex-shrink: 0; }
.trusted-logos { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.trusted-logos img { max-height: 36px; width: auto; opacity: 0.75; filter: grayscale(100%) contrast(0.9); transition: opacity .2s, filter .2s; }
.trusted-logos img:hover { opacity: 1; filter: grayscale(0%); }

@keyframes marquee { to { transform: translateX(-50%); } }
/* Without hover there is no way to stop the loop and read a logo, so on touch
   the marquee becomes a plain row the visitor can swipe. */

/* SERVICES CARDS */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service {
    border-radius: var(--radius-card);
    padding: 40px 36px 36px;
    display: flex; flex-direction: column;
    min-height: 440px;
    border: 1px solid var(--line);
    position: relative;
    transition: transform .3s, box-shadow .3s;
    text-decoration: none; color: inherit;
}
.service:hover { transform: translateY(-4px); box-shadow: 0 20px 60px -20px rgba(22,18,16,0.18); color: inherit; }
.service-plum { background: var(--plum-soft); }
.service-sand { background: var(--sand); }
.service-sage { background: var(--sage); }
.service-peach { background: var(--peach); }
.service-cream { background: var(--cream-deep); }
.service-label { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); margin-bottom: 20px; }
.service h3 { font-size: 32px; margin-bottom: 16px; max-width: 14ch; line-height: 1.05; }
.service p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin-bottom: 32px; }
.service-art { margin-top: auto; margin-bottom: 20px; height: 140px; display: flex; align-items: center; justify-content: center; }
.service-art svg { max-height: 100%; width: auto; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.service:hover .service-art svg { transform: translateY(-4px) rotate(-.5deg); }
.service-cta { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--ink); }
.service-cta svg { width: 14px; height: 14px; transition: transform .2s; }
.service:hover .service-cta svg { transform: translateX(4px); }
.service:has(.service-cta) { cursor: pointer; }
.service .service-cta::before { content: ""; position: absolute; inset: 0; }
/* the whole card is the click target, so the whole card takes the focus ring */
.service:has(.service-cta:focus-visible) { outline: 3px solid var(--plum); outline-offset: 4px; }
.service .service-cta:focus-visible { outline: none; }

/* SERVICE CARD ART (animates once the card scrolls into view) */
.js .service .sbar { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; }
.js .service.in .sbar { animation: barRise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.js .service .sline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .service.in .sline { animation: flowDraw .8s cubic-bezier(.2,.7,.2,1) forwards; }
.js .service .sfade { opacity: 0; }
.js .service.in .sfade { animation: flowIn .6s ease forwards; }
.service.in .sgear { animation: gearTurn 26s linear infinite; transform-box: fill-box; transform-origin: center; }
.service.in .spulse { animation: dotPulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.service.in .scursor { animation: cursorBlink 1.1s steps(1) infinite; }
@keyframes dotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }
@keyframes cursorBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* TRAINING BAND (slim row under the service pillars) */
.training-band {
    margin-top: 24px;
    background: var(--sage);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 32px 36px;
    display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.training-band .service-label { margin-bottom: 8px; }
.training-band h3 { font-size: clamp(20px, 2vw, 25px); margin-bottom: 6px; }
.training-band p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.training-copy { flex: 1 1 340px; }
.training-topics { display: flex; gap: 8px; flex-wrap: wrap; }
.training-topics .pill { background: var(--cream); color: var(--ink); }
.training-band .btn { flex-shrink: 0; }

/* METRICS */
.metrics { background: var(--ink); color: var(--cream); border-radius: var(--radius-card); margin: 0 var(--gutter); padding: clamp(60px, 8vw, 120px) clamp(40px, 6vw, 80px); }
.metrics-wrap { max-width: var(--maxw); margin: 0 auto; }
.metrics-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 80px; }
.metrics-head h2 { color: var(--cream); }
.metrics-head p { color: rgba(246, 241, 234, 0.7); font-size: 19px; max-width: 44ch; }
.metrics .section-head p { color: rgba(246, 241, 234, 0.85); }
.metrics .section-head h2 { color: var(--cream); }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.metric { padding-top: 32px; border-top: 1px solid rgba(246, 241, 234, 0.2); }
.metric-value { font-family: var(--font-display); font-weight: 800; font-size: clamp(64px, 9vw, 112px); line-height: 1; margin-bottom: 24px; color: var(--cream); letter-spacing: -0.02em; }
.metric-value em { font-style: normal; color: #B39CEB; }
.metric-title { font-size: 20px; font-weight: 600; margin-bottom: 12px; color: var(--cream); }
.metric-body { color: rgba(246, 241, 234, 0.7); font-size: 15px; line-height: 1.55; margin-bottom: 28px; }
.metric .link-arrow { color: var(--cream); opacity: 0.85; }
.metric .link-arrow:hover { opacity: 1; }

/* APPROACH */
.approach { background: var(--cream-deep); }
.approach-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 80px; }
.approach-head p { color: var(--ink-soft); font-size: 19px; max-width: 44ch; }
.approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-strong); position: relative; }
@supports selector(:has(*)) {
    .js .approach-grid { border-top-color: transparent; }
    .js .approach-grid::before {
        content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 1px;
        background: var(--line-strong);
        transform: scaleX(0); transform-origin: left center;
        transition: transform 1.2s cubic-bezier(.2,.7,.2,1) .15s;
    }
    .js .approach-grid:has(.reveal.in)::before { transform: scaleX(1); }
}
.approach-step { padding: 48px 32px 32px 0; border-right: 1px solid var(--line-strong); }
.approach-step:last-child { border-right: none; padding-right: 0; }
.approach-step:not(:first-child) { padding-left: 32px; }
.approach-step .step-num { font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: -0.02em; color: var(--plum); margin-bottom: 24px; line-height: 1; }
.approach-step h3 { font-size: 28px; margin-bottom: 16px; }
.approach-step p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 0; }

/* TESTIMONIAL */
.testimonial { background: var(--plum-soft); }
.testimonial-inner { max-width: 960px; margin: 0 auto; text-align: center; position: relative; }
.testimonial blockquote { font-family: var(--font-body); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.2; color: var(--ink); margin: 0 0 48px; font-style: italic; }
.testimonial-cite { display: inline-flex; align-items: center; gap: 16px; font-size: 15px; color: var(--ink-soft); }
.testimonial-cite strong { color: var(--ink); font-weight: 600; }
.testimonial-cite-dot { width: 4px; height: 4px; background: var(--ink-soft); border-radius: 50%; display: inline-block; }

/* INSIGHTS (blog cards) */
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.insight { display: flex; flex-direction: column; }
.insight-img { aspect-ratio: 4 / 3; background: var(--cream-deep); border-radius: var(--radius-card); overflow: hidden; margin-bottom: 24px; }
.insight-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.insight:hover .insight-img img { transform: scale(1.04); }
.insight-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--plum); margin-bottom: 12px; }
.insight h3 { font-size: 26px; margin-bottom: 12px; line-height: 1.15; }
.insight p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin-bottom: 16px; }
.insight a { color: inherit; text-decoration: none; }
.insight a:hover h3 { color: var(--plum); }

/* BIG CTA */
.big-cta {
    background: var(--plum-deep);
    background-image: linear-gradient(115deg, #2A175C 0%, var(--plum-deep) 42%, #3E2A7E 72%, #2A175C 100%);
    background-size: 220% 220%;
    animation: ctaDrift 24s ease-in-out infinite alternate;
    color: var(--cream); text-align: center;
}
@keyframes ctaDrift { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
.big-cta h2 { color: var(--cream); max-width: 22ch; margin: 0 auto 28px; font-size: clamp(48px, 6.5vw, 88px); }
.big-cta h2 em { color: #C8B1F0; font-style: normal; }
.big-cta p { color: rgba(246, 241, 234, 0.75); font-size: 19px; max-width: 52ch; margin: 0 auto 40px; }
.big-cta .btn-dark { background: var(--cream); color: var(--ink); }
.big-cta .btn-dark:hover { background: #fff; color: var(--plum-deep); }

/* FOOTER */
.site-footer { background: var(--cream); color: var(--muted); border-top: 1px solid var(--line); padding: 72px 0 32px; }
.footer-newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; padding-bottom: 56px; border-bottom: 1px solid var(--line); margin-bottom: 56px; }
.footer-newsletter-copy h3 { color: var(--ink); font-size: clamp(24px, 3vw, 32px); margin-bottom: 10px; }
.footer-newsletter-copy p { color: var(--muted); font-size: 15px; margin: 0; }
.footer-newsletter-input { display: flex; gap: 10px; margin-bottom: 10px; }
.footer-newsletter-input .formkit-input { flex: 1; padding: 14px 16px; border-radius: var(--radius-control); border: 1px solid var(--line); background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 15px; }
.footer-newsletter-input .formkit-input::placeholder { color: var(--muted); }
.footer-newsletter-input .formkit-input:focus { outline: none; border-color: var(--plum); background: transparent; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.footer-brand { display: inline-block; margin-bottom: 20px; }
.footer-brand img { height: 28px; width: auto; }
.footer-brand-tag { font-size: 14px; line-height: 1.55; max-width: 40ch; color: var(--muted); margin-bottom: 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--radius-control); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); transition: background .2s, border-color .2s, color .2s; }
.footer-social a:hover { background: var(--plum); border-color: var(--plum); color: var(--cream); }
.footer-social svg { width: 16px; height: 16px; }
.footer-col h4 { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 20px; }
.footer-col h4 a { font-size: inherit; color: inherit; transition: color .2s; }
.footer-col h4 a:hover { color: var(--plum); }
.footer-col ul { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 1.55; }
.footer-col li { margin-bottom: 10px; font-size: 14px; color: var(--muted); }
.footer-col a { font-size: 14px; color: var(--muted); transition: color .2s; text-decoration: none; }
.footer-col a:hover { color: var(--ink); }
.footer-address-city { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.footer-address-icon { width: 16px; height: 16px; flex-shrink: 0; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; flex-wrap: wrap; gap: 16px; }
.footer-bottom-links a { margin: 0 8px; color: var(--muted); text-decoration: none; }
.footer-bottom-links a:hover { color: var(--ink); }

/* FLASH MESSAGES */
.flash-container { padding-top: 24px; }
.flash { background: var(--cream-deep); border: 1px solid var(--line); border-left: 4px solid var(--plum); border-radius: var(--radius-card); padding: 14px 20px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.flash p { margin: 0; font-size: 15px; }
.impersonation-notice { flex-wrap: wrap; border-left-width: 1px; }
.impersonation-notice p { flex: 1 1 32rem; min-width: 0; overflow-wrap: anywhere; }
.impersonation-notice form { margin: 0; }
.flash-success { border-left-color: var(--success); }
.flash-error, .flash-danger { border-left-color: var(--danger); }
.flash-warning { border-left-color: var(--warning); }
.flash-info { border-left-color: var(--info); }
.flash-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-soft); padding: 4px 8px; }
.flash-close:hover { color: var(--ink); }

/* UTILITY */
.text-center { text-align: center; }
.text-muted { color: var(--ink-soft); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; } .mt-5 { margin-top: 64px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 40px; } .mb-5 { margin-bottom: 64px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-control); background: var(--plum-soft); color: var(--plum-deep); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px; }
[data-theme="dark"] .card { background: var(--cream-deep); }
.divider { height: 1px; background: var(--line); margin: 48px 0; }

/* WEBSITE REDESIGN — homepage art direction inspired by bold editorial product pages */

/* the source marquee is max-content wide, so the columns have to be told
   they may shrink below it or the illustration widens the whole hero */

/* Rotating headline. The verb and its object swap as one pair, so the
   sentence is always grammatical. The verb stays on the first line with
   the fixed opening; the object takes the second. The reserved height on
   the heading keeps the buttons below still when a longer use case
   comes round. */

/* The generic .hero-deco drift was written for a single decorative drawing.
   This illustration is several SVGs sitting between HTML blocks, so drifting
   them would slide the wires off the blocks they are wired to. It holds still. */

/* HERO STACK — the argument the page makes, drawn once.
   Your systems run past at the bottom, we pull them into one engine,
   and reporting and AI are what you put on top of the result. */

/* The two outputs share one frame, so their centres land on exactly 25% and
   75% of the illustration. A gutter would push them off by a fraction of the
   gap and the wires below would never quite line up. */

/* The connectors scale uniformly with their viewBox, so their port dots stay
   round, and they tuck under the neighbouring borders so every line visibly
   lands on the block it connects to instead of stopping near it. */
/* flex-shrink would letterbox the drawing inside a shorter box, which slides
   the ports away from the edges they are supposed to land on */
/* A wire box spans exactly the gap between two blocks: its top edge IS the
   block above, its bottom edge IS the block below. Everything inside is in
   viewBox units, so the ports stay welded to those edges at every width
   rather than drifting as a fixed pixel margin meets a scaling drawing. */
/* Above the blocks, so a port dot sitting on a block's edge reads as a node
   soldered onto that line instead of a half circle tucked behind it. The
   lines themselves never leave the gap, so nothing else overlaps. */

/* The hero already has a moving band of source logos directly above. These
   are client names, which are evidence and want reading, so they hold still. */

/* The three cards are stages, not options, so the grid carries the handoff
   between them instead of an even gutter. */

.services-chain-link { display: flex; align-items: center; justify-content: center; width: clamp(30px, 3.2vw, 56px); }
.services-chain-link svg { width: 22px; height: 22px; color: var(--ink); opacity: .5; }

/* Custom software and training are not stages in that chain; they sit under it. */

.also-item { padding: 28px 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.also-item + .also-item { border-left: 1px solid var(--line-strong); }
.also-item h3 { font-size: clamp(19px, 1.8vw, 23px); }
.also-item p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.also-item .link-arrow { margin-top: 10px; font-size: 13px; }
@media (max-width: 760px) {
    
    .also-item + .also-item { border-left: 0; border-top: 1px solid var(--line-strong); }
}

/* The three results are not equally impressive, so they do not get equal cells.
   The freed cash carries the section; the other two are evidence beside it. */

/* The approach is a sequence, so it reads as a rail with nodes rather than as
   three more cards. No section head either: the sentence is the whole opening. */

/* A timeline, so it carries time: each stop is marked by when it happens
   rather than by its position in a numbered list. The rail draws left to
   right as the section arrives and the stops land on it in order. */
.timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 52px); padding-top: 46px; }
.timeline-rail { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--line-strong); }
@supports selector(:has(*)) {
    .js .timeline-rail { transform: scaleX(0); transform-origin: left center; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
    .js .timeline:has(.reveal.in) .timeline-rail { transform: scaleX(1); }
}
.timeline-stop { position: relative; padding-right: clamp(0px, 2vw, 28px); }
.timeline-stop::before {
    content: '';
    position: absolute; top: -46px; left: 0;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--plum); border: 1px solid var(--line-strong);
    transform: translateY(-50%);
}
.timeline-when {
    display: block;
    font-family: var(--font-display);
    font-weight: 700; font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--plum);
    margin-bottom: 10px;
}
.timeline-stop h3 { font-size: clamp(23px, 2.2vw, 29px); margin: 0 0 12px; }
.timeline-stop p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 34ch; }
@media (max-width: 760px) {
    /* the rail turns vertical and runs down the left edge */
    .timeline { grid-template-columns: 1fr; gap: 0; padding-top: 0; padding-left: 30px; }
    .timeline-rail { top: 0; left: 0; width: 2px; height: 100%; }
    @supports selector(:has(*)) {
        .js .timeline-rail { transform: scaleY(0); transform-origin: center top; }
        .js .timeline:has(.reveal.in) .timeline-rail { transform: scaleY(1); }
    }
    .timeline-stop { padding: 0 0 34px 0; }
    .timeline-stop:last-child { padding-bottom: 0; }
    .timeline-stop::before { top: 6px; left: -30px; transform: none; }
    .timeline-stop p { max-width: none; }
}

/* One article carries the image and the summary; the other two are a reading list. */

.recent-blog-articles { background: var(--cream); }

.recent-blog-articles .insights-grid { gap: 16px; }

/* a single published article would otherwise leave half the row empty */

.recent-blog-articles .insight > a {
    height: 100%;
    padding: 16px 16px 26px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    background: var(--cream-deep);
}

.recent-blog-articles .insight-img { border-radius: var(--radius-control); }

.recent-blog-articles .insight h3,
.recent-blog-articles .insight p,
.recent-blog-articles .insight .insight-tag,
.recent-blog-articles .insight .link-arrow { margin-left: 12px; margin-right: 12px; }
.recent-blog-articles .section-head { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); }
.recent-blog-articles .section-head h2 { max-width: 14ch; letter-spacing: -0.02em; }

@media (max-width: 960px) {
    
    
    
    
    .recent-blog-articles .section-head { grid-template-columns: 1fr; }
    
    
    .services-chain-link { width: auto; height: 46px; }
    .services-chain-link svg { transform: rotate(90deg); }
    /* One column: the rail becomes a vertical run of nodes down the left edge. */
    
    
    
    
    
    
}
@media (max-width: 640px) {
    
    
    /* the cookie banner sits at the bottom of the first screen, so the hero
       buttons are kept above where it lands */
    
    
    
    
    
    
    
    /* the logos get their own line rather than a narrow column beside the label */
    
    
}

/* SERVICES REDESIGN — carries the homepage system through the full service journey */
.services-page .breadcrumb { padding-top: 16px; padding-bottom: 16px; }
.services-page .hero {
    padding: clamp(60px, 6vw, 92px) 0;
    background-color: var(--plum);
    background-image:
        radial-gradient(circle at 86% 42%, transparent 0 150px, rgba(246, 241, 234, .14) 151px 152px, transparent 153px 228px, rgba(246, 241, 234, .08) 229px 230px, transparent 231px);
    color: var(--cream);
}
.service-detail-page .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: clamp(44px, 6vw, 88px);
    align-items: center;
}
.services-page .hero-sm h1 {
    max-width: 12ch;
    color: var(--cream);
    font-size: clamp(52px, 5.5vw, 80px);
    line-height: .96;
    letter-spacing: -0.02em;
    margin-bottom: 28px;
}
.service-detail-page .hero-sm h1 { max-width: 13ch; font-size: clamp(48px, 4.8vw, 70px); }
.services-index-page .hero-sm h1 { max-width: 10ch; font-size: clamp(60px, 6.6vw, 96px); }
.services-page .hero h1 em { color: var(--plum-soft); }
.services-page .hero-lede { color: rgba(246, 241, 234, .86); max-width: 54ch; margin-bottom: 34px; }
.services-index-page .hero-lede { max-width: 62ch; }
.services-page .hero .btn-dark { background: var(--cream); color: var(--ink); }
.services-page .hero .btn-dark:hover { background: #fff; color: var(--plum-deep); }
.services-page .hero .btn-ghost { color: var(--cream); border-color: rgba(246, 241, 234, .62); }
.services-page .hero .btn-ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.service-detail-page .hero-deco {
    position: relative;
    inset: auto;
    width: 100%;
    padding: clamp(14px, 1.8vw, 24px);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    background: var(--cream);
    box-shadow: none;
    transform: rotate(1.25deg);
    opacity: 1;
}

.services-page .section-head { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); }
.services-page .section-head h2 { max-width: 14ch; letter-spacing: -0.02em; }
.services-page .prose {
    max-width: none !important;
    padding: clamp(28px, 4vw, 52px);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    background: var(--cream-deep);
}
.services-page .prose > :last-child { margin-bottom: 0; }
.services-page .prose > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 36px;
    padding-left: 1.2em;
}

.services-page .services-grid { gap: 16px; }
.services-page .service {
    min-height: 500px;
    padding: 42px 38px 34px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    box-shadow: 0 0 0 var(--ink);
    transition: transform .25s ease, box-shadow .25s ease;
}
.services-page .service:hover { transform: translate(-4px, -4px); box-shadow: none; }
.services-page .service h3 { font-size: clamp(30px, 2.7vw, 40px); max-width: 12ch; }
.services-page .service-art { height: 170px; }

.services-page .approach { background: var(--plum-soft); }
.services-page .approach-grid { gap: 16px; border-top: 0; }
.services-page .approach-grid::before { display: none; }
.services-page .approach-grid + .approach-grid { margin-top: 16px !important; }
.services-page .approach-step,
.services-page .approach-step:not(:first-child),
.services-page .approach-step:last-child {
    padding: 36px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    background: var(--cream);
}
/* on the tinted band the cards are cream; on the plain page ground they need
   their own step up or the fill disappears into the background */
.services-page:not(.academy-page) section:not(.approach) .approach-step { background: var(--cream-deep); }
.services-page .approach-step .step-num {
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--plum);
    color: var(--cream);
    font-size: 30px;
}

.services-page .big-cta {
    background: var(--plum);
    background-image: none;
    animation: none;
    border-top: 1px solid var(--line-strong);
}
.services-page .big-cta h2 { max-width: 15ch; letter-spacing: -0.02em; }
.services-page .big-cta h2 em { color: var(--plum-soft); }

@media (max-width: 1080px) {
    .service-detail-page .hero .wrap { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
    .services-page .hero-sm h1 { font-size: clamp(48px, 5.6vw, 68px); }
}
@media (max-width: 960px) {
    .service-detail-page .hero .wrap { grid-template-columns: 1fr; }
    .service-detail-page .hero-deco { display: block; width: min(100%, 540px); margin: 10px auto 0; }
    .services-page .section-head { grid-template-columns: 1fr; }
    .services-page .service { min-height: 440px; }
    .services-page .approach-grid { gap: 14px; }
    .services-page .approach-step,
    .services-page .approach-step:not(:first-child),
    .services-page .approach-step:last-child { padding: 30px; border-bottom: 1px solid var(--line-strong); }
}
@media (max-width: 640px) {
    .services-page .hero { padding-top: 50px; padding-bottom: 56px; }
    .services-page .hero-sm h1,
    .services-index-page .hero-sm h1 { font-size: clamp(44px, 13vw, 60px); }
    .service-detail-page .hero-deco { padding: 10px; box-shadow: none; }
    .services-page .prose { padding: 28px 24px; }
    .services-page .prose > ul { grid-template-columns: 1fr; gap: 10px; }
    .services-page .service { padding: 32px 28px 28px; min-height: 0; }
}

/* The global section rhythm was tuned for the homepage, where six sections carry the
   whole page. A service page runs to eight or nine, and at that count the default
   padding alone adds several screens of empty scrolling on a phone. The academy
   pages borrow `.services-page` for its card styling but were not part of this
   pass, so they keep the original rhythm. */
.services-page:not(.academy-page) section { padding-top: clamp(64px, 6.5vw, 104px); padding-bottom: clamp(64px, 6.5vw, 104px); }
.services-page:not(.academy-page) .section-head { margin-bottom: clamp(36px, 3.4vw, 52px); }
.services-page:not(.academy-page) .service { min-height: 420px; }
@media (max-width: 640px) {
    .services-page:not(.academy-page) section { padding-top: 52px; padding-bottom: 52px; }
    /* the earlier mobile reset is less specific than the rule above, so repeat it */
    .services-page:not(.academy-page) .service { min-height: 0; }
}

/* OUTCOME BAND — the first thing after the hero on a service page: what the client
   walks away with, stated as a result rather than an activity. Deliberately cheap
   vertically so the value proposition lands before any scrolling commitment. */
.outcome-band { padding-top: clamp(44px, 5vw, 72px); padding-bottom: clamp(44px, 5vw, 72px); }
.outcome-band .wrap > .outcome-lead {
    max-width: 46ch;
    margin-bottom: clamp(28px, 3vw, 40px);
    font-family: var(--font-body);
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.5;
    color: var(--ink-soft);
}
.outcome-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--cream-deep);
}
.outcome {
    padding: clamp(24px, 2.4vw, 32px);
    border-right: 1px solid var(--line-strong);
}
.outcome:last-child { border-right: 0; }
.outcome-value {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(24px, 2.1vw, 30px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--plum);
}
.outcome p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* USE-CASE CARDS — a dense, scannable pattern menu. The old markup crammed
   Trigger / Build / Result into one <p> with <br>, which read as a wall on mobile
   and carried no structure; this is a real description list at a third of the height. */
.usecase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.usecase {
    display: block;
    padding: 28px 26px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    background: var(--cream);
    transition: transform .25s ease, box-shadow .25s ease;
}
.usecase:hover { transform: translate(-3px, -3px); box-shadow: none; }
/* On wide screens every card is open and the summary is inert: it is a heading, not
   a control. `usecase-collapse.js` only makes it interactive once the grid is a
   single column, where fifteen expanded cards would be an eight-screen wall. */
.usecase > summary { list-style: none; cursor: default; }
.usecase > summary::-webkit-details-marker { display: none; }
.usecase > summary::after { display: none; }
.usecase-tag {
    display: block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--plum);
}
.usecase h3 {
    margin-bottom: 16px;
    font-size: clamp(20px, 1.5vw, 23px);
    line-height: 1.12;
    letter-spacing: -.025em;
    max-width: 20ch;
}
/* a card can carry either a spec list or plain body copy, not usually both */
.usecase > p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.usecase > p:last-child { margin-bottom: 0; }
.usecase-spec { margin: 0 0 18px; display: grid; gap: 10px; }
.usecase-spec > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.usecase-spec dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    opacity: .75;
}
.usecase-spec dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.usecase-spec dd strong { color: var(--ink); font-weight: 700; }
.usecase-foot {
    padding-top: 14px;
    border-top: 1px solid var(--line-strong);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-soft);
}
.usecase-foot span { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.approach .usecase { background: var(--cream); }

/* FAQ — thirteen questions rendered as flat h3 + p made the reporting page
   roughly two thousand pixels longer than it needed to be. Native <details>
   keeps it keyboard-operable and searchable without any JavaScript. */
.faq-list { border: 1px solid var(--line-strong); border-radius: var(--radius-card); overflow: hidden; background: var(--cream); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item:last-child { border-bottom: 0; }
.faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px clamp(20px, 2.4vw, 30px);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(17px, 1.3vw, 19px);
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--ink);
    transition: background .2s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--cream-deep); }
.faq-item > summary:focus-visible { outline: 3px solid var(--plum); outline-offset: -3px; }
.faq-item > summary::after {
    content: "";
    flex: none;
    width: 13px;
    height: 13px;
    border-right: 2.5px solid var(--plum);
    border-bottom: 2.5px solid var(--plum);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform .25s ease;
}
.faq-item[open] > summary { background: var(--cream-deep); }
.faq-item[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq-answer { padding: 0 clamp(20px, 2.4vw, 30px) 24px; }
.faq-answer p { margin: 0 0 12px; font-size: 16px; line-height: 1.62; color: var(--ink-soft); max-width: 72ch; }
.faq-answer > :last-child { margin-bottom: 0; }

/* SERVICE PATHWAY — the index used to present six equal doors with no hint of how
   they connect, so a visitor who did not already know the vocabulary had no way in.
   This names the question each service answers, in the order they usually run. */
/* six items, so three columns give two full rows; auto-fit would find room for a
   fourth column and leave two orphans hanging on the second */
.pathway { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pathway-step {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    background: var(--cream);
    color: inherit;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.pathway-step:hover { transform: translate(-3px, -3px); box-shadow: none; background: var(--plum-wash); color: inherit; }
.pathway-q {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(19px, 1.5vw, 22px);
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.pathway-step p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.pathway-answer {
    margin-top: auto;
    padding-top: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--plum);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pathway-answer svg { width: 14px; height: 14px; transition: transform .2s ease; }
.pathway-step:hover .pathway-answer svg { transform: translateX(4px); }

/* An outcome line pinned to the bottom of each index card, so the grid answers
   "what do I get" and not only "what is it called". */
.service-outcome {
    margin-top: auto;
    padding-top: 16px;
    margin-bottom: 18px;
    border-top: 1px solid var(--line-strong);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
}
.service-outcome strong { font-weight: 700; }
.services-page .service .service-art + .service-outcome { margin-top: 0; }

@media (max-width: 1080px) {
    .usecase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pathway { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .pathway { grid-template-columns: 1fr; }
}
/* Below the desktop breakpoint the seamless strip becomes separate cards; sharing
   borders across a wrapping grid needs nth-child arithmetic that breaks the moment
   the item count changes, and these bands vary from three items to four. */
@media (max-width: 960px) {
    .outcome-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        border: 0;
        border-radius: 0;
        overflow: visible;
        background: none;
    }
    .outcome { border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--cream-deep); }
}
@media (max-width: 640px) {
    .usecase-grid { grid-template-columns: 1fr; }
    .usecase { padding: 24px 22px; }
    /* a two-column spec at 390px leaves the value 8ch wide; stacking the label above
       it costs a line per row instead, so the label runs into the value inline */
    .usecase-spec { gap: 8px; }
    .usecase-spec > div { display: block; }
    .usecase-spec dt { display: inline; }
    .usecase-spec dt::after { content: " "; }
    .usecase-spec dd { display: inline; }
    .outcome-grid { grid-template-columns: 1fr; gap: 12px; }
    .faq-item > summary { padding: 18px 20px; }

    /* one column: the summary becomes a real disclosure control */
    .usecase { padding: 0; }
    .usecase:hover { transform: none; box-shadow: none; }
    /* grid rather than flex: the tag belongs above the title, not beside it, and the
       chevron sits in its own column spanning both rows */
    .usecase > summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px;
        align-items: center;
        padding: 16px 20px;
        cursor: pointer;
    }
    .usecase-tag { grid-column: 1; grid-row: 1; }
    .usecase h3 { grid-column: 1; grid-row: 2; }
    .usecase > summary::after {
        content: "";
        display: block;
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        width: 12px;
        height: 12px;
        border-right: 2.5px solid var(--plum);
        border-bottom: 2.5px solid var(--plum);
        transform: rotate(45deg) translate(-3px, -3px);
        transition: transform .25s ease;
    }
    .usecase[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
    .usecase > summary:focus-visible { outline: 3px solid var(--plum); outline-offset: -3px; }
    .usecase-tag { margin-bottom: 4px; }
    .usecase h3 { margin-bottom: 0; max-width: none; font-size: 18px; }
    .usecase-body { padding: 0 20px 20px; }
    .usecase-spec { margin-bottom: 14px; }
}

/* ACADEMY REDESIGN — programme pages reuse the services system with a stronger learning identity */
.academy-index-page .hero { padding: clamp(48px, 5vw, 72px) 0; }
.academy-index-page .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    align-items: center;
    gap: clamp(48px, 6vw, 88px);
}
.academy-index-page .hero h1 {
    max-width: 12.5ch;
    color: var(--cream);
    font-size: clamp(48px, 4.5vw, 68px);
    line-height: .98;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}
.academy-index-page .hero-lede { max-width: 54ch; font-size: 18px; }
.academy-hero-offer {
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    background: var(--cream);
    color: var(--ink);
    box-shadow: none;
    transform: rotate(.75deg);
}
.academy-hero-photo { position: relative; aspect-ratio: 16 / 7; overflow: hidden; border-bottom: 1px solid var(--line-strong); }
.academy-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.academy-hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(22,18,16,.16)); }
.academy-hero-offer-body { padding: 20px; }
.academy-hero-offer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.academy-hero-offer-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.academy-hero-offer-size { padding: 5px 9px; border-radius: var(--radius-control); background: var(--plum-soft); color: var(--plum-deep); font-size: 12px; font-weight: 700; }
.academy-hero-offer h2 { max-width: 18ch; margin-bottom: 16px; font-size: 25px; line-height: 1.08; letter-spacing: -0.02em; }
.academy-hero-programmes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.academy-hero-programme { padding: 11px; border: 1px solid var(--ink); border-radius: var(--radius-control); background: var(--cream-deep); color: var(--ink); text-decoration: none; }
.academy-hero-programme span { display: block; margin-bottom: 4px; color: var(--plum); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.academy-hero-programme strong { font-size: 13px; }
.academy-hero-programme:hover { background: var(--plum-soft); color: var(--plum-deep); }
.academy-hero-format { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 16px; color: var(--ink-soft); font-size: 12px; }
.academy-hero-format span { position: relative; padding-left: 13px; }
.academy-hero-format span::before { content: ''; position: absolute; top: .45em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--plum); }
.academy-offer-strip { padding: 0; background: var(--plum-soft); border-bottom: 1px solid var(--line-strong); }
.academy-offer-strip .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.academy-offer-point { padding: 24px 28px; border-right: 1px solid rgba(22,18,16,.3); }
.academy-offer-point:first-child { padding-left: 0; }
.academy-offer-point:last-child { border-right: 0; }
.academy-offer-point strong { display: block; margin-bottom: 3px; font-size: 15px; }
.academy-offer-point span { color: var(--ink-soft); font-size: 13px; }
.academy-detail-page .hero-sm h1 { max-width: 14ch; font-size: clamp(44px, 4.2vw, 62px); }
.academy-detail-page .service:not(:has(.service-art)) { min-height: 340px; }
.academy-page .testimonial {
    background: var(--plum-deep);
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
}
.academy-page .testimonial blockquote { color: var(--cream); }
.academy-page .testimonial-cite { color: rgba(246, 241, 234, .72); }
.academy-page .testimonial-cite strong { color: var(--cream); }
.academy-page .testimonial-cite-dot { background: rgba(246, 241, 234, .62); }
@media (max-width: 1050px) {
    .academy-index-page .hero .wrap { grid-template-columns: 1fr; }
    .academy-hero-offer { width: min(100%, 680px); transform: none; }
}
@media (max-width: 640px) {
    .academy-index-page .hero h1 { font-size: clamp(44px, 12.5vw, 58px); }
    .academy-hero-offer { box-shadow: none; }
    .academy-hero-photo { aspect-ratio: 16 / 9; }
    .academy-hero-programmes { grid-template-columns: 1fr; }
    .academy-offer-strip .wrap { grid-template-columns: 1fr; }
    .academy-offer-point,
    .academy-offer-point:first-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid rgba(22,18,16,.3); }
    .academy-offer-point:last-child { border-bottom: 0; }
}

/* FX */
.reveal { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal:not(.in) { opacity: 0; transform: translateY(22px); }
.js .hero .reveal > .eyebrow,
.js .hero .reveal > h1,
.js .hero .reveal > .hero-lede,
.js .hero .reveal > .hero-ctas { opacity: 0; transform: translateY(16px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .hero .reveal.in > .eyebrow { opacity: 1; transform: none; transition-delay: .05s; }
.js .hero .reveal.in > h1 { opacity: 1; transform: none; transition-delay: .18s; }
.js .hero .reveal.in > .hero-lede { opacity: 1; transform: none; transition-delay: .38s; }
.js .hero .reveal.in > .hero-ctas { opacity: 1; transform: none; transition-delay: .52s; }
.js .services-grid .reveal:nth-child(1) { transition-delay: .05s; }
.js .services-grid .reveal:nth-child(2) { transition-delay: .18s; }
.js .services-grid .reveal:nth-child(3) { transition-delay: .32s; }
.js .metrics-grid .reveal:nth-child(1) { transition-delay: .05s; }
.js .metrics-grid .reveal:nth-child(2) { transition-delay: .18s; }
.js .metrics-grid .reveal:nth-child(3) { transition-delay: .32s; }
.js .approach-grid .reveal:nth-child(1) { transition-delay: .05s; }
.js .approach-grid .reveal:nth-child(2) { transition-delay: .18s; }
.js .approach-grid .reveal:nth-child(3) { transition-delay: .32s; }
.js .insights-grid .reveal:nth-child(1) { transition-delay: .05s; }
.js .insights-grid .reveal:nth-child(2) { transition-delay: .18s; }
.js .insights-grid .reveal:nth-child(3) { transition-delay: .32s; }
.hero-deco svg { animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(-6px, -10px, 0) rotate(-1.2deg); }
    100% { transform: translate3d(4px, -4px, 0) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .hero-deco, .hero-deco svg, .service-art svg, .insight-img img, .timeline-rail, .big-cta { transition: none !important; animation: none !important; }
    .js .reveal:not(.in) { opacity: 1 !important; transform: none !important; }
    
    
    
    
    .service .sbar, .service .sline, .service .sfade, .sgear, .spulse, .scursor { animation: none !important; }
    .js .service .sbar { transform: none !important; }
    .js .service .sline { stroke-dashoffset: 0 !important; }
    .js .service .sfade { opacity: 1 !important; }
    
    
}

/* RESPONSIVE */
/* the full nav needs ~1190px (NL labels are widest) before it overflows; switch to the burger early enough */
@media (max-width: 1240px) {
    .nav-links { display: none; }
    .nav-right .nav-item[data-dropdown] { display: none; }
    .nav-right .btn { display: none; }
    .nav-burger { display: inline-flex; }
}
@media (max-width: 960px) {
    .services-grid, .metrics-grid, .approach-grid, .insights-grid { grid-template-columns: 1fr; }
    .services-head, .metrics-head, .approach-head, .insights-head, .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
    .approach-step { border-right: none; border-bottom: 1px solid var(--line-strong); padding: 32px 0; }
    .approach-step:not(:first-child) { padding-left: 0; }
    .approach-step:last-child { border-bottom: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer-newsletter { grid-template-columns: 1fr; gap: 24px; }
    .hero-deco { display: none; }
    
    .service { min-height: 0; }
}
@media (max-width: 640px) {
    :root { --gutter: 24px; }
    .nav-logo img { height: 21px; }
    .nav-inner { gap: 8px; min-height: 68px; }
    .nav-right { gap: 4px; }
    .nav-lang-btn { padding: 10px 8px; }
    .nav-burger { padding: 9px; }
    h1 { font-size: clamp(40px, 10vw, 60px); }
    section { padding-top: 64px; padding-bottom: 64px; }
    .hero { padding-top: 48px; padding-bottom: 32px; }
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .hero-ctas .btn { justify-content: center; }
    .hero-ctas .btn-ghost { border-color: transparent; }
    
    .training-band { padding: 28px 24px; }
    .trusted-inner { gap: 20px; }
    .trusted-logos { gap: 24px; }
    .trusted-logos img { max-height: 28px; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
    .footer-newsletter-input { flex-direction: column; }
    .metrics { padding: 56px 28px; border-radius: var(--radius-card); margin: 0 10px; }
    .metrics-grid { gap: 40px; }
}

/* Dark mode keeps branded accent panels intentionally purple, while neutral surfaces invert. */

[data-theme="dark"] .services-page .hero,
[data-theme="dark"] .blog-hero,
[data-theme="dark"] .blog-article-hero,
[data-theme="dark"] .cases-hero,
[data-theme="dark"] .case-hero,
[data-theme="dark"] .dictionary-hero,
[data-theme="dark"] .dictionary-term-hero,
[data-theme="dark"] .palette-hero,
[data-theme="dark"] .sap-hero,
[data-theme="dark"] .connector-index-page .hero,
[data-theme="dark"] .connector-detail-page .c-hero,
[data-theme="dark"] .big-cta,
[data-theme="dark"] .metrics,
[data-theme="dark"] .lk-proof,
[data-theme="dark"] .lk-contact,
[data-theme="dark"] .lk-data-platform,
[data-theme="dark"] .c-cta,
[data-theme="dark"] .c-pullquote,
[data-theme="dark"] .academy-page .testimonial,
[data-theme="dark"] .cookie-banner {
    --cream: #F6F1EA;
    --cream-deep: #EEE8E0;
    --ink: #161210;
    --ink-soft: #3A332F;
    --muted: #635D59;
    --plum: #5B3FA8;
    --plum-deep: #452D86;
    --plum-soft: #E8DAFA;
    --plum-wash: #EEE5F4;
    --line: #D5CEC6;
    --line-strong: #B6ADA3;
}
[data-theme="dark"] .nav-logo img,
[data-theme="dark"] .footer-brand img { filter: brightness(0) invert(1); }

[data-theme="dark"] .trusted-logos img { filter: grayscale(100%) invert(1) contrast(.8); }
[data-theme="dark"] main svg[stroke="#161210"],
[data-theme="dark"] main svg [stroke="#161210"] { stroke: var(--ink); }
[data-theme="dark"] main svg[fill="#161210"],
[data-theme="dark"] main svg [fill="#161210"] { fill: var(--ink); }
[data-theme="dark"] main svg[fill="#F6F1EA"],
[data-theme="dark"] main svg [fill="#F6F1EA"] { fill: var(--cream); }
[data-theme="dark"] main svg[fill="#E8DAFA"],
[data-theme="dark"] main svg [fill="#E8DAFA"] { fill: var(--plum-soft); }
[data-theme="dark"] main svg[stroke="#5B3FA8"],
[data-theme="dark"] main svg [stroke="#5B3FA8"] { stroke: var(--plum); }
[data-theme="dark"] main svg[fill="#5B3FA8"],
[data-theme="dark"] main svg [fill="#5B3FA8"] { fill: var(--plum); }
[data-theme="dark"] .nav-item > a:hover,
[data-theme="dark"] .nav-item > button:hover,
[data-theme="dark"] .nav-item.is-open > button,
[data-theme="dark"] .nav-lang-btn:hover,
[data-theme="dark"] .nav-burger:hover,
[data-theme="dark"] .mobile-drawer-close:hover { background: rgba(245, 240, 247, .08); }
[data-theme="dark"] .service:hover { box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .55); }
[data-theme="dark"] .dictionary-search-card .form-control,
[data-theme="dark"] .palette-control-card .form-control,
[data-theme="dark"] .sap-search-row .form-control { background: var(--cream-deep); }
[data-theme="dark"] .profile-card,
[data-theme="dark"] .c-track-card,
[data-theme="dark"] .c-usecase-tag,
[data-theme="dark"] .c-persona-card,
[data-theme="dark"] .c-auto-card,
[data-theme="dark"] .c-stack-item,
[data-theme="dark"] .c-path-card { background: var(--cream-deep); }
[data-theme="dark"] .c-datamodel,
[data-theme="dark"] .c-how,
[data-theme="dark"] .c-faq { background: var(--cream); }

/* Two-layer photos: see templates/components/photo_depth.html.twig. The scale keeps layer edges outside the frame. */
.photo-depth { position: relative; display: block; overflow: hidden; }
.photo-depth-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-focus, 50% 50%); transform: translate3d(0, var(--depth-y, 0px), 0) scale(1.08); will-change: transform; }