/* =====================================================================
   naegler.hamburg – Design system (TYPO3 v14)
   Build-less, modern CSS: custom properties, grid, clamp(), dark-only.
   Per-facet accent colours via body class.
   ===================================================================== */

/* ---------- Fonts (self-hosted, GDPR-friendly) ---------- */
@font-face {
    font-family: "Space Grotesk";
    font-style: normal; font-weight: 500; font-display: optional;
    src: url("../Fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal; font-weight: 700; font-display: optional;
    src: url("../Fonts/space-grotesk-700.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal; font-weight: 400; font-display: optional;
    src: url("../Fonts/inter-400.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal; font-weight: 500; font-display: optional;
    src: url("../Fonts/inter-500.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal; font-weight: 600; font-display: optional;
    src: url("../Fonts/inter-600.woff2") format("woff2");
}

/* ---------- Theme tokens (dark only) ---------- */
:root {
    color-scheme: dark;

    --bg:          #080b10;
    --bg-subtle:   #0d131a;
    --surface:     #111922;
    --surface-2:   #18222c;
    --border:      #233039;
    --border-soft: #18222b;

    --text:        #dfe8ee;
    --text-muted:  #93a6b1;
    --heading:     #f4fafc;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow:    0 4px 12px rgba(0,0,0,.55),
                 0 1px 3px rgba(0,0,0,.5);
    --shadow-lg: 0 18px 48px rgba(0,0,0,.65);

    /* default accent (brand teal) */
    --accent:     #2dd4bf;
    --accent-2:   #14b8a6;
    --accent-fg:  #5eead4;
    --accent-soft: #0c2926;
    --on-accent:  #04140f;

    /* Tech glow – accent-tinted ambient light for focal elements */
    --glow-soft: 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent);
    --glow:      0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent),
                 0 10px 34px color-mix(in srgb, var(--accent) 24%, transparent);

    --font-head: "Space Grotesk", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;

    --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
    --step-0:  clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
    --step-1:  clamp(1.1rem, 1.05rem + 0.25vw, 1.22rem);
    --step-2:  clamp(1.3rem, 1.2rem + 0.45vw, 1.55rem);
    --step-3:  clamp(1.55rem, 1.4rem + 0.8vw, 2rem);
    --step-4:  clamp(1.85rem, 1.6rem + 1.2vw, 2.5rem);
    --step-5:  clamp(2.1rem, 1.75rem + 1.8vw, 3.1rem);

    --space-2xs: .4rem; --space-xs: .65rem; --space-s: 1rem;
    --space-m: 1.6rem; --space-l: 2.75rem; --space-xl: 4.5rem;

    --radius-sm: .5rem; --radius: .9rem; --radius-lg: 1.4rem;
    --container: 74rem; --container-narrow: 46rem;
}

/* ---------- Per-facet accents (set via body class) ---------- */
.facet-software {
    --accent: #2dd4bf; --accent-2: #14b8a6;
    --accent-fg: #5eead4; --accent-soft: #0f2b29;
    --on-accent: #08201d;
}
.facet-podcast {
    --accent: #fbbf24; --accent-2: #f59e0b;
    --accent-fg: #fcd34d; --accent-soft: #2c2008;
    --on-accent: #261a02;
}
.facet-drk {
    --accent: #f87171; --accent-2: #ef4444;
    --accent-fg: #fca5a5; --accent-soft: #2c1414;
    --on-accent: #2a0a0a;
}
.facet-mediation {
    --accent: #60a5fa; --accent-2: #3b82f6;
    --accent-fg: #93c5fd; --accent-soft: #0f1f38;
    --on-accent: #04122a;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65;
    color: var(--text); background: var(--bg);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, picture, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    font-family: var(--font-head); line-height: 1.08; color: var(--heading);
    margin: 0 0 var(--space-s); font-weight: 700; letter-spacing: -.02em; text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 var(--space-s); }
p, li { text-wrap: pretty; }
a { color: var(--accent-fg); text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-2); }
ul, ol { padding-inline-start: 1.2em; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-m) 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 1000;
    background: var(--accent); color: var(--on-accent); padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }
.site-main { flex: 1 0 auto; padding-block: clamp(var(--space-l), 6vw, var(--space-xl)); }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 14%, transparent);
}
.site-header__inner {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-m); padding-block: .85rem; flex-wrap: wrap;
}
.site-header__brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--heading); text-decoration: none; letter-spacing: -.02em; }
.site-header__brand::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); box-shadow: var(--glow-soft); flex: none; }
.site-header__brand:hover { color: var(--accent-fg); }
.site-header__logo { width: clamp(150px, 18vw, 210px); height: auto; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-s); }

/* ---------- Navigation ---------- */
.nav { display: flex; align-items: center; gap: var(--space-m); }
.nav__toggle {
    display: none; align-items: center; gap: .5rem; cursor: pointer;
    padding: .5rem .85rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); font: inherit; font-weight: 600; color: var(--heading);
}
.nav__toggle-bar { width: 20px; height: 2px; background: currentColor; position: relative; display: inline-block; }
.nav__toggle-bar::before, .nav__toggle-bar::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; }
.nav__toggle-bar::before { top: -6px; } .nav__toggle-bar::after { top: 6px; }
.nav__list { display: flex; gap: clamp(.4rem, 1.6vw, 1.4rem); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav__link {
    display: inline-block; padding: .4rem .2rem; color: var(--text); text-decoration: none;
    font-weight: 500; border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--accent-fg); }
.nav__link--active { color: var(--heading); border-bottom-color: var(--accent); font-weight: 600; }

/* Second-level dropdown (sub pages, e.g. Mediation areas) */
.nav__item { position: relative; }
.nav__sub {
    position: absolute; top: 100%; left: 0; min-width: 15rem; z-index: 60;
    display: none; flex-direction: column; gap: .1rem; list-style: none; margin: 0; padding: .45rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.nav__item:hover > .nav__sub, .nav__item:focus-within > .nav__sub { display: flex; }
.nav__sublink { display: block; padding: .5rem .7rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-weight: 500; white-space: nowrap; }
.nav__sublink:hover { background: var(--surface-2); color: var(--accent-fg); }
.nav__sublink--active, .nav__sublink--active:hover { background: var(--accent); color: var(--on-accent); }

.language-menu { display: flex; gap: .4rem; list-style: none; margin: 0; padding: 0; font-size: var(--step--1); }
.language-menu__link { text-decoration: none; color: var(--text-muted); padding: .2rem .5rem; border-radius: var(--radius-sm); font-weight: 600; }
.language-menu__item--active .language-menu__link { background: var(--surface-2); color: var(--heading); }

@media (max-width: 56rem) {
    /* Collapsed by default (not JS-gated) so the header height never changes
       when scripts load late – keeps CLS at zero. <noscript> restores it. */
    .nav__toggle { display: inline-flex; }
    .nav {
        display: none; position: absolute; right: 0; top: calc(100% + .5rem);
        flex-direction: column; align-items: stretch; gap: var(--space-s);
        background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow-lg); padding: var(--space-s); min-width: 15rem; z-index: 60;
    }
    .nav.is-open { display: flex; }
    .nav__list { flex-direction: column; gap: .25rem; }
    .nav__link { display: block; padding: .55rem .25rem; }
    /* On mobile the dropdown is shown inline, indented under its parent. */
    .nav__sub { position: static; display: flex; min-width: 0; margin: .1rem 0 .3rem; padding: 0 0 0 .85rem; gap: .1rem; background: transparent; border: 0; box-shadow: none; }
    .nav__sublink { padding: .45rem .35rem; }
    .nav__sublink--active, .nav__sublink--active:hover { background: transparent; color: var(--accent-fg); font-weight: 600; }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.5rem;
    border-radius: 999px; font-family: var(--font-head); font-weight: 600; font-size: var(--step-0);
    text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.1;
    transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow-soft); }
.btn--primary:hover { background: var(--accent-2); color: var(--on-accent); box-shadow: var(--glow); }
.btn--ghost { border-color: var(--border); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-fg); }
/* legacy bootstrap classes still found in rich text */
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-2); color: var(--on-accent); }
.btn-block { display: flex; width: 100%; justify-content: center; }

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: clip;
    padding-block: clamp(var(--space-l), 9vw, calc(var(--space-xl) * 1.4));
    background:
        radial-gradient(120% 120% at 85% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
        var(--bg-subtle);
}
.hero__inner { max-width: 54rem; display: grid; gap: var(--space-m); }
.hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-fg); margin: 0; }
.hero__title { font-size: var(--step-5); margin: 0; }
.hero__title .accent { color: var(--accent-fg); }
.hero__roles { font-size: var(--step-2); color: var(--text-muted); margin: 0; font-family: var(--font-head); font-weight: 500; }
.hero__lead { font-size: var(--step-1); color: var(--text); margin: 0; max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-xs); }

/* ---------- Facet cards ---------- */
.cards-section { margin-block: 0 var(--space-l); }
.cards { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
/* "Maximal 2 nebeneinander" option */
@media (min-width: 40rem) { .cards--two { grid-template-columns: repeat(2, 1fr); } }
.card {
    position: relative; display: flex; flex-direction: column; gap: var(--space-s);
    padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    text-decoration: none; color: var(--text); overflow: clip;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); opacity: .9; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--glow-soft); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.card__head { display: flex; align-items: center; gap: var(--space-s); }
.card__icon { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-fg); }
.card__icon svg { width: 1.6rem; height: 1.6rem; }
.card__title { font-size: var(--step-1); margin: 0; color: var(--heading); }
.card__text { margin: 0; color: var(--text-muted); }
.card__more { margin-top: auto; font-family: var(--font-head); font-weight: 600; color: var(--accent-fg); }
.card__more::after { content: " \2192"; }

/* Inverted card – accent fill, used to set a card apart (e.g. a CTA tile) */
.card--invert { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.card--invert::before { background: var(--on-accent); opacity: .25; }
.card--invert .card__icon { background: color-mix(in srgb, var(--on-accent) 16%, transparent); color: var(--on-accent); }
.card--invert .card__title { color: var(--on-accent); }
.card--invert .card__text { color: color-mix(in srgb, var(--on-accent) 82%, transparent); }
.card--invert .card__more { color: var(--on-accent); }
.card--invert:hover { border-color: var(--accent); box-shadow: var(--shadow-lg), 0 0 30px color-mix(in srgb, var(--accent) 40%, transparent); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(var(--space-l), 6vw, var(--space-xl)); }
.section--subtle { background: var(--bg-subtle); }
.section__head { max-width: var(--container-narrow); margin-bottom: var(--space-l); }
.section__eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: var(--step--1); letter-spacing: .02em; color: var(--accent-fg); }

/* =====================================================================
   Content – Fluid Styled Content
   ===================================================================== */
.frame { margin-block: 0 var(--space-l); }
.frame:last-child { margin-bottom: 0; }
.ce-bodytext > :last-child { margin-bottom: 0; }
.ce-bodytext img { border-radius: var(--radius); }
.ce-gallery figure { margin: 0; }
.ce-gallery img { border-radius: var(--radius); box-shadow: var(--shadow); }
/* Text + image side by side ("im Text"): clean two columns, top-aligned –
   the text no longer wraps beside and then under the image (was a float). */
.ce-intext { display: grid; gap: var(--space-m); align-items: start; grid-template-columns: 1fr; }
.ce-intext .ce-gallery { max-width: none; margin: 0; }
.ce-intext .ce-bodytext { min-width: 0; }
@media (min-width: 40rem) {
    .ce-intext.ce-right { grid-template-columns: 1fr minmax(12rem, 20rem); }
    .ce-intext.ce-left  { grid-template-columns: minmax(12rem, 20rem) 1fr; }
    .ce-intext.ce-right .ce-gallery { order: 2; }
}
.ce-bodytext table, table.contenttable { width: 100%; border-collapse: collapse; margin-bottom: var(--space-s); }
.ce-bodytext th, .ce-bodytext td { border: 1px solid var(--border); padding: .6rem .8rem; text-align: left; }
.ce-bodytext thead th { background: var(--surface-2); }
.site-main .ce-bodytext { max-width: 70ch; }
.layout-sidebar .ce-bodytext { max-width: none; }

.lead { font-size: var(--step-1); line-height: 1.5; color: var(--text-muted); max-width: 62ch; margin-bottom: var(--space-m); }

/* Dated entries (CV) become a clean vertical timeline */
.ce-bodytext h3 {
    margin-top: var(--space-l); margin-bottom: var(--space-2xs); padding-left: var(--space-s);
    font-size: var(--step-1); color: var(--accent-fg); border-left: 3px solid var(--accent); line-height: 1.2;
}
.ce-bodytext h3:first-child { margin-top: 0; }
.ce-bodytext h3 + p, .ce-bodytext h3 + ul { padding-left: var(--space-s); border-left: 1px solid var(--border); }

/* ---------- Sidebar layout ---------- */
.layout-sidebar { display: grid; gap: var(--space-l); grid-template-columns: 1fr; }
/* Two columns only when the aside actually has content (submenu or elements);
   an empty sidebar must never leave a blank column. */
@media (min-width: 56rem) {
    .layout-sidebar:has(.layout-sidebar__aside :is(.sidebar-nav__item, .frame)) { grid-template-columns: minmax(0,1fr) 18rem; }
}
.layout-sidebar:not(:has(.layout-sidebar__aside :is(.sidebar-nav__item, .frame))) .layout-sidebar__aside { display: none; }
.layout-sidebar__aside { display: flex; flex-direction: column; gap: var(--space-m); }
.sidebar-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.sidebar-nav__link { display: block; padding: .6rem .85rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); background: var(--surface); font-weight: 500; border: 1px solid var(--border-soft); }
.sidebar-nav__link:hover { border-color: var(--accent); color: var(--accent-fg); }
.sidebar-nav__link--active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---------- Section layout (head · content + sticky nav · contact) ---------- */
.section-layout { display: grid; gap: var(--space-l); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 56rem) { .section-layout { grid-template-columns: minmax(0,1fr) 16rem; } }
.section-layout__main > :last-child { margin-bottom: 0; }
/* The sticky nav lives inside the content grid, so it travels only between the
   page head (above the grid) and the contact box (below the grid). */
@media (min-width: 56rem) {
    .section-nav { position: sticky; top: 5.5rem; }
}
.section-nav__title { font-family: var(--font-mono); font-weight: 500; font-size: var(--step--1); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-fg); margin: 0 0 var(--space-s); }
.section-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.section-nav__link { display: block; padding: .55rem .85rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border-soft); font-weight: 500; }
.section-nav__link:hover { border-color: var(--accent); color: var(--accent-fg); }
.section-nav__link--active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.section-nav__link--active:hover { color: var(--on-accent); }

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--space-xl); background: var(--bg-subtle); border-top: 1px solid var(--border); box-shadow: 0 -1px 0 color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text-muted); }
.site-footer__inner { display: grid; gap: var(--space-l); padding-block: var(--space-l); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .site-footer__inner { grid-template-columns: 1.4fr 1fr; } }
.site-footer a { color: var(--accent-fg); }
.site-footer__title { font-family: var(--font-mono); font-weight: 500; font-size: var(--step--1); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-fg); margin-bottom: var(--space-s); }
.site-footer__copy { margin-bottom: var(--space-xs); }
.site-footer__legal { display: flex; gap: var(--space-s); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-footer__contact { font-style: normal; line-height: 1.9; }
.site-footer__badge { margin: var(--space-m) 0 0; }
.site-footer__badge img { height: 72px; width: auto; }

/* =====================================================================
   Content Blocks
   ===================================================================== */
/* Hero CB – shared */
.cb-hero { margin-block: 0 var(--space-xl); }
.cb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-m); }

/* Split – light, portrait beside text */
.cb-hero--split .cb-hero__inner { display: grid; gap: clamp(var(--space-m), 5vw, var(--space-xl)); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .cb-hero--split .cb-hero__inner { grid-template-columns: 1.05fr .95fr; } }
.cb-hero--split .cb-hero__eyebrow { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .14em; font-size: var(--step--1); font-weight: 600; color: var(--accent-fg); margin: 0 0 var(--space-xs); }
.cb-hero--split .cb-hero__title { font-size: var(--step-5); margin: 0 0 var(--space-s); }
.cb-hero--split .cb-hero__subtitle { font-size: var(--step-1); color: var(--text-muted); margin: 0; max-width: 38ch; }
.cb-hero__media { position: relative; isolation: isolate; max-width: 26rem; margin-inline: auto; }
.cb-hero__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.cb-hero__media::before { content: ""; position: absolute; z-index: -1; inset: auto -7% -7% auto; width: 62%; aspect-ratio: 1/1; background: var(--accent-soft); border-radius: var(--radius-lg); }
.cb-hero__media::after { content: ""; position: absolute; z-index: -1; inset: -7% auto auto -7%; width: 38%; aspect-ratio: 1/1; border: 2px solid var(--accent); border-radius: var(--radius-lg); opacity: .55; }
.cb-hero__media--placeholder { display: grid; place-items: center; gap: .6rem; aspect-ratio: 4/5; background: var(--accent-soft); color: var(--accent-fg); border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--radius-lg); box-shadow: none; }
.cb-hero__media--placeholder svg { width: 3.25rem; height: 3.25rem; }
.cb-hero__media--placeholder span { font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); letter-spacing: .04em; }
.cb-hero__media--placeholder::before, .cb-hero__media--placeholder::after { content: none; }

/* Cover – full-bleed background image, text overlaid bottom-left */
body { overflow-x: clip; }
/* Pull the cover flush to the top – but only in the centred (non-sidebar)
   layout, where the cover bleeds edge to edge. */
.site-main:has(.cb-hero--cover):not(:has(.layout-sidebar)) { padding-top: 0; }
/* Full-bleed works only when the parent is centred in the viewport. Capped to
   100vw so a vertical scrollbar can never trigger horizontal overflow. */
.cb-hero--cover { width: 100vw; max-width: 100vw; margin: 0 0 var(--space-xl); margin-inline: calc(50% - 50vw); }
/* Sidebar layout: the content sits in an off-centre grid column (active from
   56rem), so a 100vw full-bleed would drag the overlaid text off-screen to the
   left. Keep the cover contained within its column – correct at every width. */
.layout-sidebar__content .cb-hero--cover {
    width: auto; max-width: 100%; margin-inline: 0;
    border-radius: var(--radius-lg); overflow: clip;
}
.cb-hero__cover {
    position: relative; isolation: isolate; display: flex; align-items: flex-end;
    min-height: clamp(18rem, 46vh, 30rem);
    background: linear-gradient(135deg, var(--accent-2), color-mix(in srgb, var(--accent) 55%, #04110f));
}
.cb-hero__cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; z-index: -2; }
.cb-hero__cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6,12,14,.9), rgba(6,12,14,.5) 38%, rgba(6,12,14,.08) 72%, rgba(6,12,14,0)); }
.cb-hero__cover-inner { min-width: 0; padding-block: clamp(var(--space-l), 6vw, var(--space-xl)); }
.cb-hero--cover .cb-hero__text { max-width: 48rem; }
.cb-hero--cover .cb-hero__eyebrow { color: #fff; opacity: .9; text-transform: uppercase; letter-spacing: .14em; font-family: var(--font-head); font-weight: 700; font-size: var(--step--1); margin: 0 0 var(--space-xs); }
.cb-hero--cover .cb-hero__title { color: #fff; margin: 0 0 var(--space-s); }
.cb-hero--cover .cb-hero__subtitle { color: #fff; opacity: .95; font-size: var(--step-1); margin: 0; max-width: 46ch; }
.cb-hero--cover .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.cb-hero--cover .btn--ghost:hover { background: rgba(255,255,255,.14); }
.cb-hero__cover-note { position: absolute; top: var(--space-s); right: var(--space-s); z-index: 0; background: rgba(255,255,255,.88); color: #1c252b; font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); padding: .3rem .75rem; border-radius: 999px; }

/* Banner – dark, image as background */
.cb-hero--banner { position: relative; border-radius: var(--radius-lg); overflow: clip; isolation: isolate; background: linear-gradient(135deg, var(--accent-2), color-mix(in srgb, var(--accent) 55%, #04110f)); color: #fff; }
.cb-hero--banner.cb-hero--has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(6,14,16,.82), rgba(6,14,16,.45)); z-index: -1; }
.cb-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cb-hero--banner .cb-hero__inner { padding: clamp(var(--space-l), 6vw, var(--space-xl)); max-width: var(--container-narrow); display: grid; gap: var(--space-s); }
.cb-hero--banner .cb-hero__eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: var(--step--1); font-weight: 700; color: #fff; opacity: .85; margin: 0; }
.cb-hero--banner .cb-hero__title { color: #fff; margin: 0; }
.cb-hero--banner .cb-hero__subtitle { font-size: var(--step-1); color: #fff; opacity: .92; margin: 0; }
.cb-hero--banner .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.cb-hero--banner .btn--ghost:hover { background: rgba(255,255,255,.14); }

/* Page head CB – contained card with facet accent glow, headline + subline */
.cb-pagehead {
    position: relative; isolation: isolate; overflow: clip;
    margin: 0 0 var(--space-xl); border-radius: var(--radius-lg);
    color: var(--heading);
    background:
        radial-gradient(90% 130% at 82% -20%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
        linear-gradient(180deg, var(--surface), var(--bg));
    border: 1px solid var(--border);
}
/* Faint accent grid fading toward the glow corner – subtle tech texture */
.cb-pagehead::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .6;
    background-image:
        linear-gradient(color-mix(in srgb, var(--accent) 10%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(120% 100% at 82% 0%, #000, transparent 72%);
    mask-image: radial-gradient(120% 100% at 82% 0%, #000, transparent 72%);
}
.cb-pagehead__inner { padding-block: clamp(var(--space-l), 6vw, var(--space-xl)); }
.cb-pagehead__eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--font-mono); font-weight: 500; letter-spacing: .02em; font-size: var(--step--1);
    color: var(--accent-fg); margin: 0 0 var(--space-s); padding: .3rem .7rem;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.cb-pagehead__eyebrow::before { content: "\203A"; color: var(--accent-fg); font-weight: 700; }
.cb-pagehead__title { color: var(--heading); font-size: var(--step-5); line-height: 1.05; margin: 0; max-width: 20ch; text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 22%, transparent); }
.cb-pagehead__subline { color: var(--text-muted); font-size: var(--step-1); line-height: 1.5; margin: var(--space-s) 0 0; max-width: 54ch; }

/* Intro CB – set-apart lead with portrait, sits right under the page head */
.cb-intro { margin-block: var(--space-xl) var(--space-xl); }
.site-main > .container > .cb-intro:first-child,
.layout-sidebar__content > .cb-intro:first-child { margin-top: var(--space-l); }
.cb-intro__panel {
    position: relative; overflow: clip;
    display: grid; gap: clamp(var(--space-m), 4vw, var(--space-l)); align-items: center;
    grid-template-columns: 1fr;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: clamp(var(--space-m), 4vw, var(--space-l));
}
.cb-intro__panel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); }
@media (min-width: 48rem) {
    .cb-intro--media-right .cb-intro__panel { grid-template-columns: 1.5fr .9fr; }
    .cb-intro--media-left .cb-intro__panel { grid-template-columns: .9fr 1.5fr; }
    .cb-intro--media-left .cb-intro__media { order: -1; }
}
.cb-intro__body { font-size: var(--step-1); line-height: 1.55; color: var(--text); }
.cb-intro__body > :first-child { margin-top: 0; }
.cb-intro__body > :last-child { margin-bottom: 0; }
.cb-intro__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Text CB */
.cb-text { margin-block: 0 var(--space-l); }
.cb-text__inner { max-width: 70ch; }
.cb-text--centered .cb-text__inner { margin-inline: auto; text-align: center; }
.cb-text__body > :last-child { margin-bottom: 0; }

/* Call-to-action / contact CB */
.cb-cta { margin-block: var(--space-l) var(--space-l); }
.cb-cta__inner {
    position: relative; overflow: clip;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background:
        radial-gradient(90% 150% at 85% -25%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%),
        var(--surface);
    padding: clamp(var(--space-m), 5vw, var(--space-xl));
}
.cb-cta__eyebrow { font-family: var(--font-mono); color: var(--accent-fg); font-size: var(--step--1); letter-spacing: .02em; margin: 0 0 var(--space-xs); }
.cb-cta__headline { margin: 0 0 var(--space-s); }
.cb-cta__text { color: var(--text-muted); max-width: 62ch; }
.cb-cta__text > :last-child { margin-bottom: 0; }
.cb-cta__actions { margin: var(--space-m) 0 0; }

/* Text + media CB */
.cb-textmedia { margin-block: 0 var(--space-l); }
.cb-textmedia__grid { display: grid; gap: var(--space-l); align-items: center; grid-template-columns: 1fr; }
.cb-textmedia__media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
.cb-textmedia__body > :last-child { margin-bottom: 0; }
@media (min-width: 48rem) {
    .cb-textmedia__grid { grid-template-columns: 1fr 1fr; }
    .cb-textmedia--media-right .cb-textmedia__media { order: 2; }
    .cb-textmedia--media-top .cb-textmedia__grid { grid-template-columns: 1fr; }
}

/* Process / timeline CB */
.cb-process { margin-block: 0 var(--space-l); }
.cb-process__header { max-width: var(--container-narrow); margin-bottom: var(--space-l); }
.cb-process__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-m); counter-reset: step; }
@media (min-width: 48rem) { .cb-process--columns .cb-process__list { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.cb-process__step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-m); padding-top: calc(var(--space-m) + 1.5rem); counter-increment: step; }
.cb-process__step::before { content: counter(step); position: absolute; top: calc(-1 * var(--space-s)); left: var(--space-m); width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-family: var(--font-head); font-weight: 700; font-size: var(--step-1); border-radius: 50%; box-shadow: var(--shadow); }
.cb-process__step-title { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.cb-process__step-body > :last-child { margin-bottom: 0; }

/* Quote / pull-quote CB */
.cb-quote { margin-block: var(--space-l); max-width: var(--container-narrow); }
.cb-quote__text { margin: 0; padding: var(--space-xs) 0 var(--space-xs) var(--space-m); border-left: 3px solid var(--accent); font-family: var(--font-head); font-weight: 500; font-size: var(--step-2); line-height: 1.32; color: var(--heading); text-wrap: balance; }
.cb-quote__text > :last-child { margin-bottom: 0; }
.cb-quote__cite { margin: var(--space-s) 0 0 var(--space-m); color: var(--accent-fg); font-family: var(--font-mono); font-size: var(--step--1); }
.cb-quote__cite::before { content: "— "; }

/* Stats / highlights CB */
.cb-stats { margin-block: 0 var(--space-l); }
.cb-stats__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .cb-stats__list { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.cb-stats__item { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: var(--space-m); }
.cb-stats__value { display: block; font-family: var(--font-head); font-weight: 700; font-size: var(--step-2); line-height: 1.1; color: var(--heading); }
.cb-stats__label { display: block; margin-top: .35rem; color: var(--text-muted); font-size: var(--step--1); }

/* Timeline CB – vertical timeline with accent markers */
.cb-timeline { margin-block: 0 var(--space-l); }
.cb-timeline__head { max-width: var(--container-narrow); margin-bottom: var(--space-l); }
.cb-timeline__list { list-style: none; margin: 0; padding: 0; position: relative; }
.cb-timeline__list::before { content: ""; position: absolute; left: 7px; top: .5rem; bottom: .5rem; width: 2px; background: var(--border); }
.cb-timeline__item { position: relative; padding: 0 0 var(--space-m) var(--space-l); }
.cb-timeline__item:last-child { padding-bottom: 0; }
.cb-timeline__item::before { content: ""; position: absolute; left: 0; top: .3rem; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg), 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }
.cb-timeline__date { display: block; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .02em; color: var(--accent-fg); margin-bottom: .1rem; }
.cb-timeline__body { color: var(--text); }
.cb-timeline__body > :last-child { margin-bottom: 0; }

/* =====================================================================
   Motion: hover depth + scroll-driven reveal
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* Subtle depth: gentle zoom on media when hovered */
    .cb-textmedia__media { overflow: clip; border-radius: var(--radius); }
    .cb-textmedia__media img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
    .cb-textmedia__media:hover img { transform: scale(1.04); }

    /* Scroll-driven reveal – composited (opacity/transform only), so it never
       causes a layout shift and needs no JavaScript. Only runs in browsers that
       support scroll timelines; others simply show the content. Elements above
       the fold are already at the end state (fill: both) → no FCP/LCP impact. */
    @supports (animation-timeline: view()) {
        .cb-text, .cb-intro__panel, .cb-process__step, .cb-stats__item, .cb-timeline__item,
        .cb-quote, .cards-section .card, .cb-cta, .ce-bodytext, .ce-gallery {
            animation: reveal-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }
        /* Transform-only (no opacity): keeps the motion but never affects colour
           contrast (axe samples partial opacity) or causes a layout shift. */
        @keyframes reveal-rise {
            from { transform: translateY(1.75rem); }
            to   { transform: none; }
        }
    }
}