/* ==========================================================================
   schiffel.sk — design system layer on top of Bootstrap 5.3 (grid, reboot, forms)
   Bootstrap stays the only utility system; this file adds tokens + components.

   Breakpoints (match Bootstrap, custom properties cannot be used in @media):
     sm 576px · md 768px · lg 992px · xl 1200px · xxl 1400px
   Navigation collapses below xl (1200px).
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    /* Color */
    --color-primary: #0052ff;          /* white text on it: 5.7:1 (AA) */
    --color-primary-hover: #003ecc;    /* white text on it: 8.5:1 */
    --color-primary-soft: #eaf0ff;
    --color-primary-disabled: #a8b8cc; /* disabled CTA fill (exempt from contrast rules) */
    --color-primary-on-dark: #5c8dff;  /* derived: text/links on dark, 6.4:1 on --color-hero */

    --color-hero: #05070a;
    --color-dark-elevated: #16181c;

    --color-heading: #0a0b0d;
    --color-body: #5b616e;             /* 6.2:1 on white */
    --color-muted: #7c828a;            /* 3.9:1 — large text / non-essential meta only */

    --color-on-dark: #f8fafc;
    --color-on-dark-muted: #a8acb3;    /* 8.9:1 on --color-hero */

    --color-canvas: #ffffff;
    --color-canvas-soft: #f7f7f7;
    --color-surface-strong: #eef0f3;   /* secondary button fill, tags */
    --color-border: #dee1e6;
    --color-border-soft: #eef0f3;
    --color-border-control: #868c95;   /* form control outline: 3.4:1 on white (WCAG 1.4.11) */
    --color-border-on-dark: rgba(248, 250, 252, 0.12);

    --color-success: #0a7a4b;
    --color-danger: #c4291c;

    /* Typography — system stack only, no webfont */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto,
        "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* Fluid type scale (min @ 375px → max @ 1440px) */
    --text-display: clamp(2.5rem, 1.71rem + 3.38vw, 4.75rem);   /* 40 → 76 */
    --text-h1: clamp(2.25rem, 1.72rem + 2.25vw, 3.75rem);       /* 36 → 60 */
    --text-h2: clamp(1.875rem, 1.52rem + 1.5vw, 2.875rem);      /* 30 → 46 */
    --text-h3: clamp(1.375rem, 1.26rem + 0.49vw, 1.75rem);      /* 22 → 28 */
    --text-h4: clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem);      /* 18 → 20 */
    --text-lead: clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem);   /* 18 → 22 */
    --text-body: 1.0625rem;                                     /* 17 */
    --text-sm: 0.9375rem;                                       /* 15 */
    --text-xs: 0.8125rem;                                       /* 13 — eyebrow, meta */

    --leading-tight: 1.05;
    --leading-heading: 1.15;
    --leading-body: 1.65;

    --tracking-display: -0.035em;
    --tracking-heading: -0.022em;
    --tracking-eyebrow: 0.08em;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;   /* wordmark + H2 */

    /* Spacing — 4px base */
    --space-1: 0.25rem;   /* 4 */
    --space-2: 0.5rem;    /* 8 */
    --space-3: 0.75rem;   /* 12 */
    --space-4: 1rem;      /* 16 */
    --space-5: 1.5rem;    /* 24 */
    --space-6: 2rem;      /* 32 */
    --space-7: 3rem;      /* 48 */
    --space-8: 4rem;      /* 64 */
    --space-9: 6rem;      /* 96 */
    --space-10: 8rem;     /* 128 */
    --section-y: clamp(4.5rem, 3.2rem + 5.6vw, 8.5rem);
    --gutter: 1rem;       /* mobile side gutter */
    --frame-gap: clamp(0.5rem, 0.2rem + 1.2vw, 1.25rem); /* outer margin around inset dark frames: 8 → 20 */

    /* Widths */
    --container-max: 1248px;  /* 1200px content + 2 × 24px gutter */
    --measure: 68ch;       /* long-form prose */
    --measure-lead: 40rem; /* leads, section intros */
    --measure-title: 22ch; /* headings */

    /* Shape — no pill shapes; buttons use a restrained radius */
    --radius-xs: 4px;      /* tags, badges, status */
    --radius-sm: 8px;      /* inputs, compact rows, skip link (= --radius-btn) */
    --radius-md: 12px;     /* reserved */
    --radius-lg: 16px;     /* mid-size panels */
    --radius-xl: 24px;     /* cards, pricing, media */
    --radius-btn: 8px;     /* all buttons / CTAs */
    --radius-hero: 28px;   /* inset black hero / CTA frames */

    --border: 1px solid var(--color-border);
    --border-on-dark: 1px solid var(--color-border-on-dark);

    /* Depth: flat + hairline by default; one soft tier for hover; float only for hero media */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-float: 0 30px 60px -12px rgba(0, 0, 0, 0.5), 0 18px 36px -18px rgba(0, 0, 0, 0.55);

    /* Focus */
    --focus-color: var(--color-primary);
    /* rings are written as `outline: 2px solid var(--focus-color)` so surfaces can override the color */
    --focus-offset: 3px;

    /* Motion */
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 150ms;
    --dur-base: 240ms;
    --dur-slow: 640ms;
    --reveal-distance: 16px;

    --header-h: 64px;

    /* Bootstrap bridge — Bootstrap reads these, so its components follow our tokens */
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--text-body);
    --bs-body-line-height: var(--leading-body);
    --bs-body-color: var(--color-body);
    --bs-body-bg: var(--color-canvas);
    --bs-emphasis-color: var(--color-heading);
    --bs-heading-color: var(--color-heading);
    --bs-font-monospace: var(--font-mono);
    --bs-primary: #0052ff;
    --bs-primary-rgb: 0, 82, 255;
    --bs-link-color: #0052ff;
    --bs-link-color-rgb: 0, 82, 255;
    --bs-link-hover-color: #003ecc;
    --bs-link-hover-color-rgb: 0, 62, 204;
    --bs-border-color: var(--color-border);
    --bs-border-radius: var(--radius-sm);
    --bs-focus-ring-color: rgba(0, 82, 255, 0.35);
}

@media (min-width: 576px) {
    :root { --gutter: 1.5rem; }
}
/* Mobile: tighter radii so frames and cards don't eat the narrow viewport */
@media (max-width: 575.98px) {
    :root { --radius-xl: 16px; --radius-hero: 18px; }
}

/* 2. Base ------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-4)); scrollbar-gutter: stable; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

.container {
    --bs-gutter-x: calc(var(--gutter) * 2);
    max-width: var(--container-max);
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: var(--font-display);
    color: var(--color-heading);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    text-wrap: balance;
    margin-bottom: var(--space-4);
}
h1, .h1 { font-size: var(--text-h1); }
h2, .h2 { font-size: var(--text-h2); font-weight: var(--weight-extrabold); }
h3, .h3 { font-size: var(--text-h3); }
h4, .h4 { font-size: var(--text-h4); }
p { text-wrap: pretty; }

a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

::selection { background: var(--color-primary); color: #fff; }

/* Focus: one visible ring everywhere, keyboard only */
:focus-visible { outline: 2px solid var(--focus-color); outline-offset: var(--focus-offset); }
:focus:not(:focus-visible) { outline: none; }

.skip-link {
    position: absolute; left: var(--space-4); top: -100px; z-index: 2000;
    padding: var(--space-3) var(--space-5);
    background: var(--color-canvas); color: var(--color-heading);
    border-radius: var(--radius-sm); font-weight: var(--weight-semibold); text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }

/* 3. Surfaces ---------------------------------------------------------------- */
.surface-dark {
    --focus-color: var(--color-primary-on-dark);
    --bs-link-color-rgb: 92, 141, 255;
    --bs-link-hover-color-rgb: 248, 250, 252;
    background: var(--color-hero);
    color: var(--color-on-dark-muted);
}
.surface-dark :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) { color: var(--color-on-dark); }
.surface-soft { background: var(--color-canvas-soft); }

.section { padding-block: var(--section-y); }
/* two consecutive white sections share one gap */
.section:not(.surface-soft):not(.surface-dark) + .section:not(.surface-soft):not(.surface-dark) { padding-top: 0; }

/* 4. Typography components --------------------------------------------------- */
.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-body);
    margin-bottom: var(--space-4);
}
.surface-dark .eyebrow { color: var(--color-on-dark-muted); }

.display {
    font-size: var(--text-display);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    font-weight: var(--weight-semibold);
}

.lead, .section-lead {
    font-size: var(--text-lead);
    line-height: 1.5;
    font-weight: var(--weight-regular);
    max-width: var(--measure-lead);
}
.prose { max-width: var(--measure); }

.section-head { max-width: 48rem; margin-bottom: var(--space-8); }
.section-title { max-width: var(--measure-title); }

/* 5. Buttons (Bootstrap .btn, re-skinned via its own variables) ----------- */
.btn {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: var(--weight-semibold);
    --bs-btn-line-height: 1.25;
    --bs-btn-border-radius: var(--radius-btn);
    --bs-btn-focus-box-shadow: none;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 44px;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--focus-color); outline-offset: var(--focus-offset); box-shadow: none; }
.btn-sm { --bs-btn-padding-x: 1rem; --bs-btn-padding-y: 0.5rem; --bs-btn-font-size: 0.9375rem; min-height: 40px; } /* dense UI only; not for touch-critical CTAs */
.btn-lg { --bs-btn-padding-x: 2rem; --bs-btn-padding-y: 1rem; min-height: 56px; }

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-primary-disabled);
    --bs-btn-disabled-border-color: var(--color-primary-disabled);
    --bs-btn-disabled-opacity: 1;
}
.btn-secondary {
    --bs-btn-color: var(--color-heading);
    --bs-btn-bg: var(--color-surface-strong);
    --bs-btn-border-color: var(--color-surface-strong);
    --bs-btn-hover-color: var(--color-heading);
    --bs-btn-hover-bg: var(--color-border);
    --bs-btn-hover-border-color: var(--color-border);
    --bs-btn-active-color: var(--color-heading);
    --bs-btn-active-bg: var(--color-border);
    --bs-btn-active-border-color: var(--color-border);
}
.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-primary-hover);
    --bs-btn-hover-bg: var(--color-primary-soft);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-active-color: var(--color-primary-hover);
    --bs-btn-active-bg: var(--color-primary-soft);
    --bs-btn-active-border-color: var(--color-primary-hover);
}
.btn-outline-light {
    --bs-btn-color: var(--color-on-dark);
    --bs-btn-border-color: rgba(248, 250, 252, 0.4); /* 3.6:1 on --color-hero (WCAG 1.4.11) */
    --bs-btn-hover-color: var(--color-on-dark);
    --bs-btn-hover-bg: rgba(248, 250, 252, 0.08);
    --bs-btn-hover-border-color: var(--color-on-dark);
    --bs-btn-active-color: var(--color-on-dark);
    --bs-btn-active-bg: rgba(248, 250, 252, 0.12);
    --bs-btn-active-border-color: var(--color-on-dark);
}
.btn:disabled, .btn.disabled { cursor: not-allowed; pointer-events: auto; }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }

.link-arrow {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-weight: var(--weight-semibold); text-decoration: none;
}
.link-arrow .icon { transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(3px); }
.link-arrow:hover span { text-decoration: underline; }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
@media (max-width: 575.98px) {
    .btn-lg { --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: 1rem; }
    .cta-row { flex-direction: column; align-items: stretch; }
    .cta-row .btn { text-wrap: balance; text-align: center; }
}

/* 6. Header & navigation (light, sticky) -------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 1030;
    height: var(--header-h);
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) {
    .site-header { background: rgba(255, 255, 255, 0.8); backdrop-filter: saturate(180%) blur(16px); }
}
.site-header.is-scrolled, .site-header.is-open { border-bottom-color: var(--color-border); }
.site-header.is-open { background: var(--color-canvas); }
.site-header-inner { height: 100%; display: flex; align-items: center; gap: var(--space-5); }

.site-brand {
    margin-right: auto;
    font-family: var(--font-display);
    font-weight: var(--weight-extrabold);
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-heading);
    text-decoration: none;
    white-space: nowrap;
}
.site-brand:hover { color: var(--color-heading); }

.nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; border-radius: var(--radius-sm); color: var(--color-heading);
}
.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle-close, .nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: inline-flex; }

.site-nav-list { list-style: none; margin: 0; padding: 0; }
.site-nav-link {
    display: block;
    color: var(--color-body);
    text-decoration: none;
    font-weight: var(--weight-medium);
    transition: color var(--dur-fast) var(--ease-out);
}
.site-nav-link:hover, .site-nav-link[aria-current="page"] { color: var(--color-heading); }

/* Header CTA: visible from sm up; on phones it lives in the menu panel */
.site-header-cta { display: none; }
@media (min-width: 576px) { .site-header-cta { display: block; } .site-nav-cta { display: none; } }

/* Menu panel (< xl) */
@media (max-width: 1199.98px) {
    .site-nav {
        position: fixed; top: var(--header-h); left: 0; right: 0;
        height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
        padding: var(--space-4) var(--gutter) var(--space-6);
        background: var(--color-canvas);
        visibility: hidden; opacity: 0; transform: translateY(-8px);
        transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
    }
    .site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
    .site-nav-link { padding: var(--space-4) 0; font-size: 1.125rem; color: var(--color-heading); border-bottom: var(--border); }
    .site-nav-link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--color-primary); padding-left: var(--space-4); }
    .site-nav-cta { margin-top: var(--space-5); }
    .site-nav-cta .btn { width: 100%; min-height: 52px; }
    body.nav-open { overflow: hidden; }
    .site-header-cta { order: 2; }
    .nav-toggle { order: 3; }
}

/* Desktop (≥ xl) */
@media (min-width: 1200px) {
    .nav-toggle { display: none; }
    .site-nav { display: flex; align-items: center; }
    .site-nav-list { display: flex; gap: var(--space-5); }
    .site-nav-link { font-size: 0.875rem; padding: var(--space-2) 0; position: relative; white-space: nowrap; }
    .site-nav-link[aria-current="page"]::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
        background: var(--color-primary); border-radius: 2px;
    }
}

/* 7. Heroes: inset black frame with a visible outer margin --------------------- */
.hero-frame { padding-inline: var(--frame-gap); padding-top: var(--space-2); }
.hero-card {
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: var(--radius-hero);
}

/* Subpage hero */
.page-hero { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.page-hero-inner { max-width: 52rem; }
.page-hero-title {
    font-size: var(--text-h1);
    font-weight: var(--weight-semibold);
    line-height: 1.08;
    letter-spacing: var(--tracking-display);
    margin-bottom: var(--space-5);
}
.page-hero-lead { font-size: var(--text-lead); line-height: 1.5; max-width: var(--measure-lead); margin-bottom: var(--space-6); }

/* Quiet technical texture on subpage heroes only: faint grid fading out */
.page-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(248, 250, 252, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(248, 250, 252, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 75% 0%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 70% at 75% 0%, #000 20%, transparent 75%);
}

/* Homepage hero. Mobile/tablet: text, then portrait anchored to the bottom edge.
   Desktop: text left (7/12), portrait bleeds to the top/right/bottom edge of the frame. */
.home-hero-content { padding-block: clamp(3rem, 2.2rem + 3.5vw, 5rem) var(--space-7); }
.home-hero-title {
    font-size: clamp(2.375rem, 1.55rem + 2.9vw, 4rem);     /* 38 → 64 */
    font-weight: var(--weight-extrabold);
    line-height: 1.04;
    letter-spacing: var(--tracking-display);
    /* one measure shared by every rotating headline: 2–3 lines, no reflow between them */
    max-width: 18ch;
    margin-bottom: var(--space-4);
}

/* Rotating headline. JS replaces the H1 text with this stack; the H1 keeps a
   static aria-label with the primary headline, so heading semantics never move.
   All variants share one grid cell, so the hero height is the tallest variant
   and stays fixed for the whole loop. */
.hero-rotator { display: grid; }
.hero-rotator-line {
    grid-area: 1 / 1;
    visibility: hidden;   /* also keeps offscreen variants out of text selection */
}
.hero-rotator-line.is-current,
.hero-rotator-line.is-leaving { visibility: visible; }

/* Words enter from below with a short focus-pull; they leave upward. */
.hero-rotator-word {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 0.32em, 0);
    filter: blur(8px);
    transition:
        opacity 700ms var(--ease-out),
        transform 900ms var(--ease-out),
        filter 700ms var(--ease-out);
    transition-delay: calc(var(--word-index, 0) * 60ms + 200ms);
}
.hero-rotator-line.is-current .hero-rotator-word {
    opacity: 1; transform: none; filter: none;
}
.hero-rotator-line.is-leaving .hero-rotator-word {
    opacity: 0;
    transform: translate3d(0, -0.22em, 0);
    filter: blur(6px);
    transition-duration: 420ms;
    transition-delay: calc(var(--word-index, 0) * 28ms);
}
/* second half of the headline: visually part of it, semantically outside H1 */
.home-hero-tagline {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: var(--weight-medium);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    color: var(--color-on-dark-muted);
    max-width: 26ch;
    margin-bottom: var(--space-5);
}
.home-hero-lead { font-size: var(--text-lead); line-height: 1.5; max-width: 36rem; margin-bottom: var(--space-6); }
.home-hero .cta-row { margin-bottom: var(--space-6); }

.hero-proof {
    --sep: 1.5rem; /* space between items; the dot sits in its middle */
    display: flex; flex-wrap: wrap; row-gap: var(--space-2);
    list-style: none; margin: 0 0 0 calc(-1 * var(--sep)); padding: 0;
    font-size: var(--text-sm); color: var(--color-on-dark-muted);
    /* hides the separator of whichever item starts a line, so wrapped lines never begin with a dot */
    clip-path: inset(0 0 0 var(--sep));
}
/* CTA row + proof share one width: years flush left, cities flush right under the buttons */
.hero-actions { display: inline-grid; max-width: 100%; }
@media (max-width: 575.98px) { .hero-actions { display: grid; } }
.hero-proof-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-5); font-weight: var(--weight-semibold); }
.hero-proof-years { margin: 0; font-size: var(--text-sm); color: var(--color-on-dark-muted); white-space: nowrap; }
.hero-proof li { position: relative; padding-left: var(--sep); white-space: nowrap; }
.hero-proof li::before {
    content: ""; position: absolute; left: calc(var(--sep) / 2 - 2px); top: 50%;
    width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--color-primary-on-dark);
}

/* Portrait. Photo background is ~#000 and meets --color-hero; soft edge masks
   remove any seam. A faint blue glow sits behind the head and is revealed only
   in the dark background via mix-blend-mode: lighten (skin tones untouched). */
.hero-portrait {
    /* Very faint: lighten only affects pixels darker than the glow (background, deepest shadows) */
    --glow: radial-gradient(closest-side circle at 50% var(--glow-y, 30%), rgba(0, 82, 255, 0.14), rgba(0, 82, 255, 0.05) 60%, transparent 100%);
    position: relative; margin: 0; isolation: isolate;
    /* hero color under the glow: lighten lifts the photo's pure black (#000) to exactly
       --color-hero, so there is no seam; mid-tones and skin are brighter and stay untouched */
    background: var(--glow), var(--color-hero);
}
.hero-portrait picture { display: block; height: 100%; }
.hero-portrait img {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
    mix-blend-mode: lighten;
}
/* Edge masks sit on the figure, so photo and glow fade out together (no visible box) */

/* Mobile (< 576): square crop anchored at the top — full head, chin and neck */
.hero-portrait {
    width: min(100%, 26rem); margin-inline: auto;
    aspect-ratio: 1 / 1;
    --glow-y: 26%;
}
.hero-portrait img { object-position: 50% 4%; }
.hero-portrait {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%), linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent 0, #000 22%), linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
    mask-composite: intersect;
}

/* Tablet (576–991): taller 5:6 portrait, right-aligned under the text */
@media (min-width: 576px) {
    .hero-portrait { width: min(100%, 29rem); aspect-ratio: 5 / 6; margin-right: 0; --glow-y: 24%; }
    .hero-portrait img { object-position: 50% 8%; }
}

/* Desktop (≥ 992): portrait lives inside the 1248px container (aligned with header and text),
   spans the full hero height and sits on the container's right content edge */
@media (min-width: 992px) {
    .home-hero { min-height: clamp(36rem, calc(100svh - var(--header-h) - var(--space-5)), 50rem); display: flex; }
    .home-hero > .container { position: relative; display: flex; align-items: center; }
    .home-hero-content { position: relative; z-index: 1; max-width: 58%; padding-block: var(--space-9); }
    .hero-portrait {
        position: absolute; top: 0; bottom: 0; z-index: 0;
        right: calc(var(--bs-gutter-x) * 0.5);
        width: min(44%, 34rem); aspect-ratio: auto; margin: 0;
        --glow-y: 22%;
    }
    .hero-portrait img { object-position: 50% 18%; }
    .hero-portrait {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%, #000 90%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 24%, #000 90%, transparent 100%);
    }
}
@media (min-width: 1400px) {
    .home-hero-content { max-width: 60%; }
}

/* 8. Breadcrumbs ------------------------------------------------------------- */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-6); padding: 0; font-size: var(--text-sm); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-on-dark-muted); opacity: 0.6; }
.breadcrumbs a { color: var(--color-on-dark-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-on-dark); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--color-on-dark); }

/* 9. Cards & panels ---------------------------------------------------------- */
.panel {
    background: var(--color-canvas);
    border: var(--border);
    border-radius: var(--radius-xl);
    padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    height: 100%;
}
.surface-soft .panel { border-color: transparent; }
a.panel { display: block; text-decoration: none; color: inherit; transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
a.panel:hover { box-shadow: var(--shadow-soft); border-color: var(--color-heading); }
.surface-dark .panel { background: var(--color-dark-elevated); border: var(--border-on-dark); }
.panel-title { font-size: var(--text-h4); margin-bottom: var(--space-3); }
.panel > :last-child { margin-bottom: 0; }

.social-link { display: inline-flex; align-items: center; gap: var(--space-2); }
.social-link .icon { width: 1.125em; height: 1.125em; }

.check-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }
.check-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.check-list .icon { color: var(--color-primary); margin-top: 0.2em; width: 1.1em; height: 1.1em; }

/* Price card */
.price-card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    background: var(--color-canvas); border: var(--border); border-radius: var(--radius-xl);
    padding: var(--space-6);
}
/* Featured tier = dark inversion, no ribbon colors */
.price-card.is-featured {
    --focus-color: var(--color-primary-on-dark);
    background: var(--color-hero); border-color: var(--color-hero); color: var(--color-on-dark-muted);
}
.price-card.is-featured :is(.price-card-name, .price-card-amount) { color: var(--color-on-dark); }
.price-card.is-featured .price-card-capacity { border-bottom: var(--border-on-dark); }
.price-card.is-featured .check-list .icon { color: var(--color-primary-on-dark); }
.price-card.is-featured .price-card-note { color: var(--color-on-dark-muted); }
.price-card-badge {
    align-self: flex-start; margin-bottom: var(--space-4);
    font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--color-on-dark); background: var(--color-dark-elevated); padding: var(--space-1) var(--space-3); border-radius: var(--radius-xs);
}
/* Desktop 3-up: badge out of flow, top-right beside the tier name, so prices align across cards */
@media (min-width: 992px) {
    .price-card-badge { position: absolute; top: var(--space-6); right: var(--space-6); margin: 0; }
}
.price-card-name { font-size: var(--text-h4); margin-bottom: var(--space-4); }
.price-card-price { margin-bottom: var(--space-2); color: var(--color-body); }
.price-card-amount {
    font-family: var(--font-display); font-size: clamp(2rem, 1.8rem + 0.8vw, 2.5rem); font-weight: var(--weight-bold);
    color: var(--color-heading); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums;
}
.price-card-capacity { font-size: var(--text-sm); margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: var(--border); }
.price-card-desc { font-size: var(--text-sm); }
.price-card-excludes-title { margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-heading); }
.price-card.is-featured .price-card-excludes-title { color: var(--color-on-dark); }
.price-card-excludes { margin: 0 0 var(--space-5); padding-left: 1.1em; font-size: var(--text-sm); display: grid; gap: var(--space-1); }
.price-card-note { margin-top: auto; margin-bottom: 0; font-size: var(--text-xs); color: var(--color-body); }
.price-card-cta { margin-top: auto; padding-top: var(--space-6); }
@media (max-width: 575.98px) { .price-card-cta .btn { width: 100%; } }

/* Reference card */
.reference-card { background: var(--color-canvas); border: var(--border); border-radius: var(--radius-xl); padding: var(--space-6); height: 100%; }
.reference-card-title { font-size: var(--text-h3); }
.reference-card-body { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: var(--space-2) var(--space-5); margin: var(--space-5) 0 0; }
.reference-card-body dt { font-weight: var(--weight-semibold); color: var(--color-heading); font-size: var(--text-sm); }
.reference-card-body dd { margin: 0; }
.reference-card-stack { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: var(--border); font-family: var(--font-mono); font-size: var(--text-xs); }
@media (max-width: 575.98px) { .reference-card-body { grid-template-columns: 1fr; } .reference-card-body dd { margin-bottom: var(--space-3); } }

/* Numbered steps (process) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps > li { counter-increment: step; padding-top: var(--space-5); border-top: 1px solid var(--color-heading); }
.steps > li::before {
    content: counter(step, decimal-leading-zero);
    display: block; margin-bottom: var(--space-4);
    font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-primary); letter-spacing: var(--tracking-eyebrow);
}

/* Data matrix (capability mapping, stack) */
.matrix { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.matrix th, .matrix td { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: var(--border); vertical-align: top; text-align: left; }
.matrix thead th { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: var(--weight-medium); color: var(--color-body); }
.matrix tbody th { color: var(--color-heading); font-weight: var(--weight-semibold); }
.matrix tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
.matrix tbody tr:hover { background: var(--color-canvas-soft); }
.matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* FAQ */
.faq { border-top: var(--border); }
.faq details { border-bottom: var(--border); }
.faq summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-5);
    padding: var(--space-5) 0; font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--weight-semibold); color: var(--color-heading);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 400; color: var(--color-primary); transition: transform var(--dur-base) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > :not(summary) { max-width: var(--measure); padding-bottom: var(--space-5); margin: 0; }

/* Pending skeleton block (visible only until content lands) */
.pending {
    border: 1px dashed var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-5); background: repeating-linear-gradient(135deg, var(--color-canvas-soft) 0 1px, transparent 1px 12px);
}
.surface-dark .pending { border-color: var(--color-border-on-dark); background: transparent; }
.pending-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-2); }
.surface-dark .pending-label { color: var(--color-primary-on-dark); }
.pending-title { font-weight: var(--weight-semibold); color: var(--color-heading); margin-bottom: var(--space-1); }
.surface-dark .pending-title { color: var(--color-on-dark); }
.pending-intent { font-size: var(--text-sm); margin: 0; }

/* 9b. Homepage sections ------------------------------------------------------- */
/* Shared two-column editorial split (heading left, content right) */
.split { display: grid; gap: var(--space-6); }
@media (min-width: 992px) {
    .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
    .split > :first-child { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
    /* Right column starts level with the heading, not the eyebrow above it */
    .split > .section-head:has(> .eyebrow) + * { padding-top: calc(var(--text-xs) * var(--leading-body) + var(--space-4)); }
}
.split .section-head { margin-bottom: 0; }

/* 02 · Statement + proof facts */
.statement {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem);
    font-weight: var(--weight-semibold);
    line-height: 1.22;
    letter-spacing: var(--tracking-heading);
    color: var(--color-heading);
    max-width: 30em;
    margin-bottom: var(--space-8);
    text-wrap: balance;
}
.statement span { color: var(--color-body); }
.facts { display: grid; gap: var(--space-5) var(--space-6); margin: 0; }
@media (min-width: 576px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts > div { padding-top: var(--space-4); border-top: 1px solid var(--color-heading); }
.facts dt {
    font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-heading); color: var(--color-heading); margin-bottom: var(--space-2);
}
.facts dd { margin: 0; font-size: var(--text-sm); max-width: 22rem; }

/* 03 · Problems — numbered editorial rows, no cards */
.problem-list { list-style: none; margin: 0; padding: 0; counter-reset: problem; border-top: 1px solid var(--color-heading); }
.problem { counter-increment: problem; display: grid; gap: var(--space-3) var(--space-8); padding-block: var(--space-6); border-bottom: var(--border); }
@media (min-width: 992px) { .problem { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding-block: var(--space-7); } }
.problem-title { font-size: var(--text-h3); margin: 0; max-width: 20ch; }
.problem-title::before {
    content: counter(problem, decimal-leading-zero);
    display: block; margin-bottom: var(--space-3);
    font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-eyebrow); color: var(--color-primary);
}
.problem-body p { max-width: 36rem; margin-bottom: var(--space-4); }

/* 04 · Offers — one dark feature block + a quiet list */
.offer-feature {
    display: grid; gap: var(--space-7);
    border-radius: var(--radius-xl);
    padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}
@media (min-width: 992px) { .offer-feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-9); align-items: center; } }
.offer-feature-title { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); letter-spacing: var(--tracking-display); margin-bottom: var(--space-3); }
.offer-feature-price {
    font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--weight-semibold);
    color: var(--color-on-dark); font-variant-numeric: tabular-nums; margin-bottom: var(--space-4);
}
.offer-feature-price span { font-weight: var(--weight-regular); color: var(--color-on-dark-muted); }
.offer-feature-summary { max-width: 34rem; margin-bottom: var(--space-6); }

.tier-list { list-style: none; margin: 0; padding: 0; border-top: var(--border-on-dark); }
.tier {
    display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4);
    padding: var(--space-5) 0; border-bottom: var(--border-on-dark);
}
.tier p { margin: 0; }
.tier-name { font-weight: var(--weight-semibold); color: var(--color-on-dark); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tier-price { font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--color-on-dark); font-variant-numeric: tabular-nums; text-align: right; }
.tier-capacity { grid-column: 1 / -1; font-size: var(--text-sm); }

.offer-list { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; gap: 0 var(--space-8); }
@media (min-width: 768px) { .offer-list { grid-template-columns: repeat(2, 1fr); } }
.offer {
    position: relative;
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "desc desc";
    gap: var(--space-2) var(--space-4);
    padding-block: var(--space-5); border-top: var(--border);
    transition: border-color var(--dur-base) var(--ease-out);
}
.offer:hover { border-top-color: var(--color-heading); }
.offer-name { grid-area: name; font-size: var(--text-h4); margin: 0; }
.offer-name a { color: var(--color-heading); text-decoration: none; }
.offer-name a::after { content: ""; position: absolute; inset: 0; } /* whole row is the link target */
.offer:hover .offer-name a { text-decoration: underline; }
.offer-list-no-underline .offer:hover .offer-name a { text-decoration: none; }
.offer-desc { grid-area: desc; margin: 0; font-size: var(--text-sm); max-width: 32rem; }
.offer-price { grid-area: price; margin: 0; font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--color-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricing-foot { margin-top: var(--space-6); font-size: var(--text-sm); }
.pricing-foot p { margin-bottom: var(--space-2); }

/* 05 · AI as part of the system (dark inset frame) */
.section-system .system-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
@media (min-width: 992px) { .section-system .system-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: end; } }
.section-system .section-head { margin-bottom: 0; }
.section-system .section-title { max-width: 18ch; }
.section-system .section-lead { margin: 0; }
.matrix-dark { font-size: var(--text-sm); }
.matrix-dark th, .matrix-dark td { border-bottom: var(--border-on-dark); }
.matrix-dark thead th { color: var(--color-on-dark-muted); }
.matrix-dark tbody th { color: var(--color-on-dark); width: 28%; }
.matrix-dark td { color: var(--color-on-dark-muted); }
.matrix-dark td:last-child { color: var(--color-on-dark); }
.matrix-dark tbody tr:hover { background: rgba(248, 250, 252, 0.03); }
/* Phones: each row becomes a small labelled block */
@media (max-width: 767.98px) {
    .matrix-dark thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .matrix-dark, .matrix-dark tbody, .matrix-dark tr, .matrix-dark th, .matrix-dark td { display: block; width: 100%; }
    .matrix-dark tr { padding-block: var(--space-4); border-bottom: var(--border-on-dark); }
    .matrix-dark tbody th, .matrix-dark td { border: 0; padding: 0; }
    .matrix-dark tbody th { width: auto; font-size: 1rem; margin-bottom: var(--space-2); }
    .matrix-dark td + td { margin-top: var(--space-2); }
    .matrix-dark td::before {
        content: attr(data-label); display: block;
        font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-on-dark-muted);
    }
}
.system-foot { margin: var(--space-6) 0 0; }

/* 06 · Industries fallback */
/* Client logos — horizontal scroller, original brand colors, heights tuned for equal optical weight */
.client-scroller {
    display: flex; align-items: center; gap: var(--space-4);
    margin-top: var(--space-7); padding-top: var(--space-6); border-top: var(--border);
}
.client-logos {
    --visible: 2;
    flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0;
    display: flex; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
}
.client-logos::-webkit-scrollbar { display: none; }
.client-logos.is-end { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 768px) { .client-logos { --visible: 4; } }
.client-logos li {
    flex: 0 0 calc((100% - (var(--visible) - 1) * var(--space-5)) / var(--visible));
    display: flex; align-items: center; justify-content: center; min-height: 3rem; scroll-snap-align: start;
}
.client-scroller-controls { display: flex; gap: var(--space-2); flex-shrink: 0; }
.client-scroller-controls[hidden] { display: none; }
.scroller-btn {
    display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
    border: var(--border); border-radius: var(--radius-btn); background: var(--color-canvas); color: var(--color-heading);
    transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.scroller-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.scroller-btn:disabled { color: var(--color-border-control); cursor: default; opacity: 0.5; }
.client-logos img { display: block; width: auto; max-width: 100%; height: 1.5rem; }
.client-logos .client-logo-satur img { height: 2.5rem; }
@media (min-width: 992px) {
    .client-logos img { height: 1.875rem; }
    .client-logos .client-logo-satur img { height: 3rem; }
}

.industries { display: grid; gap: var(--space-6); }
@media (min-width: 992px) { .industries { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; } }
.industries .section-head { margin-bottom: 0; }
.industry-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-6); }
.industry-list li {
    padding-block: var(--space-5); border-top: var(--border);
    font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-heading); color: var(--color-heading);
}

/* 08 · Why me */
.why-points { margin-block: var(--space-6); }
.why-points li { color: var(--color-heading); }

/* Stack map (/developer/, /solution-architect/) */
.stack-map { margin: 0; border-top: 1px solid var(--color-heading); }
.stack-row { display: grid; gap: var(--space-3) var(--space-6); padding-block: var(--space-5); border-bottom: var(--border); }
@media (min-width: 768px) { .stack-row { grid-template-columns: 14rem 1fr; align-items: baseline; } }
.stack-row dt { font-weight: var(--weight-semibold); color: var(--color-heading); }
.stack-row dd { margin: 0; }
.stack-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.stack-row li {
    font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-heading);
    background: var(--color-canvas); border: var(--border); border-radius: var(--radius-xs); padding: 3px var(--space-2);
}

/* 9c. Subpage building blocks ------------------------------------------------- */
.check-list-lg { font-size: var(--text-lead); gap: var(--space-4); }
.check-list-lg li { color: var(--color-heading); }
.check-list-cols { display: grid; gap: var(--space-4) var(--space-8); }
@media (min-width: 768px) { .check-list-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .check-list-cols { grid-template-columns: repeat(3, 1fr); } }
.check-list-cols li { color: var(--color-heading); padding-top: var(--space-4); border-top: var(--border); }
@media (min-width: 1200px) { .check-list-cols-2 { grid-template-columns: repeat(2, 1fr); } }
.terms { margin-top: var(--space-8); }
.terms .h4 { margin-bottom: var(--space-5); }
.terms .check-list-cols li { padding-top: 0; border-top: 0; }
.price-card .check-list { margin-bottom: 0; }
.note { margin: var(--space-6) 0 0; font-size: var(--text-sm); max-width: 44rem; }

.rate-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-heading); }
.rate { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); padding-block: var(--space-5); border-bottom: var(--border); }
.rate p { margin: 0; }
.rate-name { font-weight: var(--weight-semibold); color: var(--color-heading); }
.rate-price { font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--color-heading); font-variant-numeric: tabular-nums; }
.rate-price span { font-weight: var(--weight-regular); color: var(--color-body); }
.rate-min { grid-column: 1 / -1; font-size: var(--text-sm); }

.about { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 992px) { .about { grid-template-columns: 22.5rem minmax(0, 1fr); gap: var(--space-9); } }
.about-portrait { margin: 0; aspect-ratio: 4 / 5; max-width: 22.5rem; border-radius: var(--radius-xl); overflow: hidden; background: var(--color-hero); }
.about-portrait picture, .about-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.about .section-head { margin-bottom: var(--space-5); }

/* Technical depth (/o-mne/) — the stack as four delivery layers on a white section.
   Technologies are quiet mono lines under each layer's value, never badges. */
.depth-head { display: grid; gap: var(--space-5); margin-bottom: var(--space-8); }
@media (min-width: 992px) { .depth-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: end; } }
.depth-head .section-head { margin-bottom: 0; }
.depth-head .section-title { margin-bottom: 0; }
.depth-head .section-lead { margin: 0; }

.depth-grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .depth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }

.depth-card {
    display: flex; flex-direction: column; min-width: 0;
    padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
    background: var(--color-canvas); border: var(--border); border-radius: var(--radius-xl);
}
.depth-card-meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: clamp(var(--space-6), 2rem + 2vw, var(--space-8));
    font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-eyebrow); color: var(--color-primary);
}
/* Layer position: four hairlines, the card's own layer lit (top = AI, bottom = infrastructure) */
.depth-card-layers { display: grid; gap: 3px; width: 1.75rem; }
.depth-card-layers i { display: block; height: 3px; border-radius: 1px; background: var(--color-border); }
.depth-card-layers .is-current { background: var(--color-primary); }
.depth-card-title { font-size: var(--text-h3); margin-bottom: var(--space-3); }
.depth-card-text { max-width: 34rem; margin-bottom: var(--space-7); }
.depth-card-tech {
    list-style: none; margin: auto 0 0; padding: var(--space-5) 0 0;
    border-top: var(--border);
    font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.8;
}
/* Inline items break only between technologies; the separator ends a line, never starts one */
.depth-card-tech li { display: inline; white-space: nowrap; }
.depth-card-tech li:not(:last-child)::after { content: "·"; content: "·" / ""; margin-left: 0.55em; }

/* Layer 01 carries the single brand-blue moment of the section. White text on --color-primary: 5.7:1;
   tech line at 90 % white: 4.9:1 */
.depth-card.is-accent { --focus-color: var(--color-heading); background: var(--color-primary); border-color: var(--color-primary); }
.depth-card.is-accent :is(.depth-card-meta, .depth-card-title, .depth-card-text) { color: #fff; }
.depth-card.is-accent .depth-card-tech { color: rgba(255, 255, 255, 0.9); border-top-color: rgba(255, 255, 255, 0.3); }
.depth-card.is-accent .depth-card-layers i { background: rgba(255, 255, 255, 0.3); }
.depth-card.is-accent .depth-card-layers .is-current { background: #fff; }

.depth-principle {
    margin: var(--space-8) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--color-heading);
    font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.25rem);
    font-weight: var(--weight-semibold); line-height: 1.22; letter-spacing: var(--tracking-heading);
    color: var(--color-body); text-wrap: balance;
}
.depth-principle span { color: var(--color-heading); }

.legal h2 { margin-top: var(--space-7); }
.note-draft {
    font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--color-danger); border: 1px solid currentColor; border-radius: var(--radius-xs); padding: var(--space-2) var(--space-3); display: inline-block;
}

/* Cookie consent (analytics only; equal-weight choices) */
.consent {
    position: fixed; z-index: 1050; left: var(--frame-gap); right: var(--frame-gap); bottom: var(--frame-gap);
    max-width: 36rem; margin-inline: auto;
    background: var(--color-hero); color: var(--color-on-dark-muted);
    border: var(--border-on-dark); border-radius: var(--radius-lg); padding: var(--space-5);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.45);
    --focus-color: var(--color-primary-on-dark);
}
.consent[hidden] { display: none; }
.consent-title { color: var(--color-on-dark); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.consent p { font-size: var(--text-sm); margin-bottom: var(--space-4); }
.consent a { color: var(--color-on-dark); }
.consent .cta-row { flex-direction: row; }
.consent .btn { flex: 1 1 auto; }
.link-button { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* 10. CTA band (inset dark frame, same geometry as the hero) ---------------- */
.cta-frame { padding: 0 var(--frame-gap) var(--frame-gap); }
.cta-band { padding-block: var(--section-y); }
.cta-band-inner { max-width: 48rem; }
.cta-band-title { font-size: var(--text-h2); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-display); margin-bottom: var(--space-4); }
.cta-band-lead { font-size: var(--text-lead); margin-bottom: var(--space-6); max-width: var(--measure-lead); }

/* 11. Forms ------------------------------------------------------------------ */
.form-label { font-weight: var(--weight-semibold); color: var(--color-heading); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.form-optional { font-weight: var(--weight-regular); color: var(--color-body); }
.form-control, .form-select {
    min-height: 48px; padding: 0.6875rem 0.875rem;
    font-size: 1rem; color: var(--color-heading);
    border-color: var(--color-border-control); border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-control:hover, .form-select:hover { border-color: var(--color-heading); }
/* Focus = 2px blue border without layout shift */
.form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.form-control:focus-visible, .form-select:focus-visible { outline: none; }
.form-control[aria-invalid="true"], .form-select[aria-invalid="true"] { border-color: var(--color-danger); }
.form-control[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--color-danger); }
/* Honeypot: not rendered at all — no tab stop, no screen reader, and browser autofill skips it */
.form-hp { display: none !important; }
.form-hint { font-size: var(--text-sm); margin: calc(-1 * var(--space-1)) 0 var(--space-2); }
/* Inline field error: the line is always reserved, so a message never pushes the form down */
.field-error { min-height: calc(var(--text-sm) * 1.45); margin: var(--space-1) 0 var(--space-3); font-size: var(--text-sm); line-height: 1.45; color: var(--color-danger); }
.form-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.form-legal { font-size: var(--text-sm); margin: 0; max-width: 32rem; }
.form-status:empty { display: none; }
.form-status { padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); margin-bottom: var(--space-5); border: var(--border); }
.form-status[data-state="success"] { border-color: var(--color-success); color: var(--color-success); background: #eefaf4; }
.form-status[data-state="error"] { border-color: var(--color-danger); color: var(--color-danger); background: #fdf1f0; }
.request-form-footer { display: grid; justify-items: start; gap: var(--space-4); }
@media (max-width: 575.98px) { .request-form-footer { justify-items: stretch; } }

/* 11b. Dialog (native <dialog> + showModal: focus trap, inert page, Esc) ------ */
.dialog {
    width: min(42rem, 100% - 2 * var(--frame-gap));
    max-width: none;
    max-height: calc(100dvh - 2 * var(--frame-gap));
    margin: auto; padding: 0; border: 0; border-radius: var(--radius-xl);
    background: var(--color-canvas); color: var(--color-body);
    box-shadow: var(--shadow-float);
    overflow: hidden; /* the body scrolls, corners stay rounded */
}
.dialog[open] { display: flex; flex-direction: column; animation: dialog-in var(--dur-base) var(--ease-out); }
.dialog::backdrop { background: rgba(5, 7, 10, 0.72); }
.dialog[open]::backdrop { animation: backdrop-in var(--dur-base) var(--ease-out); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(var(--reveal-distance)); } }
@keyframes backdrop-in { from { opacity: 0; } }
/* Background does not scroll; scrollbar-gutter on html keeps the page from shifting */
html:has(.dialog[open]) { overflow: hidden; }

.dialog-body { overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.dialog-close {
    position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1;
    display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: var(--radius-btn); background: var(--color-canvas); color: var(--color-heading);
    cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out);
}
.dialog-close:hover { background: var(--color-surface-strong); }
.dialog-close .icon { width: 22px; height: 22px; }
.dialog-head { padding-right: var(--space-6); margin-bottom: var(--space-6); } /* clears the close button */
.dialog-title { font-size: var(--text-h3); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-heading); margin-bottom: var(--space-3); }
/* Titles take focus only as a reading start point (tabindex=-1), they are not controls */
.dialog-title:focus-visible { outline: none; }
.dialog-lead { margin: 0; max-width: 34rem; }
.dialog[data-state="success"] .dialog-head { display: none; }
.dialog-success > .dialog-title { padding-right: var(--space-6); }
.dialog-success-next { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border); }
.dialog-success-question { font-weight: var(--weight-semibold); color: var(--color-heading); margin-bottom: var(--space-4); }

/* No JS (or no <dialog> support): the targeted dialog renders inline as a plain panel */
html:not(.has-dialogs) .dialog:target {
    display: block; position: static; max-height: none; overflow: visible;
    margin: var(--space-7) auto; border: var(--border); box-shadow: none;
}
html:not(.has-dialogs) .dialog-close { display: none; }

/* 12. Footer (light, follows the dark CTA band) ----------------------------- */
.site-footer { background: var(--color-canvas); padding-block: var(--space-8) var(--space-6); font-size: var(--text-sm); }
.site-footer-brand { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: 1.125rem; text-transform: uppercase; color: var(--color-heading); letter-spacing: 0.04em; margin-bottom: var(--space-3); }
.site-footer-tagline { max-width: 26rem; }
.site-footer-heading { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-heading); margin-bottom: var(--space-4); }
.site-footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.site-footer a { color: var(--color-body); text-decoration: none; }
.site-footer a:hover { color: var(--color-heading); text-decoration: underline; }
.site-footer-bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
    margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--border); font-size: var(--text-xs);
}
.site-footer-bottom p { margin: 0; }

/* 13. Motion ----------------------------------------------------------------- */
/* Reveal is opt-in per element and only hides content when JS is running. */
.js [data-reveal] {
    opacity: 0; transform: translateY(var(--reveal-distance));
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: calc(var(--reveal-index, 0) * 80ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important; transition-delay: 0s !important;
    }
    .js [data-reveal] { opacity: 1; transform: none; }
    /* rotation is not started at all under reduced motion; this covers a mid-session change */
    .hero-rotator-word { opacity: 1; transform: none; filter: none; }
}

/* 14. Style guide helpers (only used on /styleguide/) ------------------------ */
.swatch { border-radius: var(--radius-lg); border: var(--border); overflow: hidden; font-size: var(--text-xs); }
.swatch-color { height: 72px; }
.swatch-meta { padding: var(--space-3); font-family: var(--font-mono); }
.swatch-meta strong { display: block; color: var(--color-heading); font-family: var(--font-sans); font-size: var(--text-sm); }