@charset "UTF-8";
/* ==========================================================================
   LoCave — site styles
   Brand: violet #6b46e0 on limestone greys. Rajdhani for headings and Open Sans
   for body, matching the house style of the other IRNAS sites; the violet is
   what tells LoCave apart from the cyan and the oranges already in use across
   the portfolio.

   Light theme only. The one dark surface is the hero, where the cave
   cross-section lives — the drawing is built for that background and an
   inverted page would fight it.
   ========================================================================== */

:root {
    /* Brand */
    --brand:       #6b46e0;
    --brand-dark:  #5433c4;
    --brand-light: #f1ecfd;
    --brand-glow:  rgba(107, 70, 224, .26);
    --brand-lift:  #9b7cf5;   /* legible on dark surfaces */

    /* Neutrals — warmed slightly towards limestone rather than blue-grey */
    --ink:         #1a1720;
    --graphite:    #35303f;
    --body:        #5c5567;
    /* --muted must stay at or above 4.5:1 against both #ffffff and
       --surface-alt, because it carries real body text: form hints, figure
       captions, breadcrumbs and the legal effective-date line. The previous
       #8d8699 measured 3.50:1 and failed WCAG 2.2 AA. This is 5.36:1 on white
       and 5.00:1 on --surface-alt. Re-measure if you change it. */
    --muted:       #6e6780;
    --line:        #e2ddea;
    --line-soft:   #f0edf5;
    --surface:     #ffffff;
    --surface-alt: #f8f6fb;
    --surface-deep:#14111c;

    /* Status */
    --good:        #12996b;
    --warn:        #c77700;
    --bad:         #cc3344;

    /* Type */
    --font-head: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Open Sans', system-ui, -apple-system, sans-serif;

    /* Rhythm */
    --wrap:    1180px;
    --wrap-sm: 820px;
    --gap:     clamp(1.5rem, 4vw, 3rem);
    --section: clamp(3.5rem, 8vw, 6.5rem);

    --radius:    10px;
    --radius-sm: 6px;
    --shadow:    0 2px 4px rgba(26, 23, 32, .04), 0 12px 32px rgba(26, 23, 32, .08);
    --shadow-sm: 0 1px 2px rgba(26, 23, 32, .05), 0 4px 12px rgba(26, 23, 32, .05);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */

*, *::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;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--body);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 .6em;
    letter-spacing: -.005em;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
li { margin-bottom: .4rem; }

strong { color: var(--graphite); font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .88em;
    background: var(--surface-alt);
    padding: .1rem .35rem;
    border-radius: 4px;
}

:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    border-radius: 2px;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 50%; top: 0;
    transform: translate(-50%, -120%);
    background: var(--brand); color: #fff;
    padding: .7rem 1.4rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-weight: 600; z-index: 200; transition: transform .18s;
}
.skip-link:focus { transform: translate(-50%, 0); text-decoration: none; }

/* ── Layout ─────────────────────────────────────────────────────────────── */

.wrap    { width: min(100% - 2.5rem, var(--wrap));    margin-inline: auto; }
.wrap-sm { width: min(100% - 2.5rem, var(--wrap-sm)); margin-inline: auto; }

.section { padding-block: var(--section); }
.section--alt   { background: var(--surface-alt); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 1.075rem; color: var(--body); margin-bottom: 0; }

.eyebrow {
    font-family: var(--font-head);
    font-size: .82rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--brand-dark);
    margin: 0 0 .75rem;
    display: block;
}

.lede { font-size: 1.15rem; line-height: 1.65; color: var(--graphite); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-head);
    font-size: 1.02rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    padding: .78rem 1.6rem;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color .16s, border-color .16s, color .16s, transform .16s;
    text-decoration: none;
    line-height: 1.2;
}
.btn:hover  { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.btn--ghost { background: transparent; color: var(--brand-dark); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-light); }

.btn--onDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn--onDark:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--sm    { font-size: .88rem; padding: .5rem 1rem; }
.btn--block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    width: min(100% - 2.5rem, var(--wrap));
    margin-inline: auto;
    display: flex; align-items: center; gap: 1.25rem;
    min-height: 72px;
}

.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { width: 132px; height: auto; }

.nav-toggle {
    margin-left: auto;
    display: none;
    flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px;
    background: none; border: 1px solid var(--line);
    border-radius: var(--radius-sm); cursor: pointer;
    padding: 0 11px;
}
.nav-toggle span {
    display: block; height: 2px; width: 100%;
    background: var(--graphite); border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
    margin-left: auto;
    display: flex; align-items: center; gap: .25rem;
}

.site-nav a.nav-link {
    font-family: var(--font-head);
    font-size: .97rem; font-weight: 600;
    letter-spacing: .02em;
    color: var(--graphite);
    padding: .5rem .7rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    position: relative;
}
.site-nav a.nav-link:hover  { color: var(--brand-dark); background: var(--surface-alt); text-decoration: none; }
.site-nav a.nav-link.active { color: var(--brand-dark); }
.site-nav a.nav-link.active::after {
    content: ""; position: absolute;
    left: .7rem; right: .7rem; bottom: -1px;
    height: 2px; background: var(--brand); border-radius: 2px;
}

.lang-switcher {
    display: flex; align-items: center; gap: 2px;
    margin-left: .6rem; padding-left: .85rem;
    border-left: 1px solid var(--line);
}
.lang-switcher a {
    font-family: var(--font-head);
    font-size: .84rem; font-weight: 700; letter-spacing: .06em;
    color: var(--muted);
    padding: .3rem .45rem; border-radius: 4px;
}
.lang-switcher a:hover  { color: var(--graphite); background: var(--surface-alt); text-decoration: none; }
.lang-switcher a.active { color: #fff; background: var(--brand); }

.site-nav .btn { margin-left: .6rem; }

@media (max-width: 1040px) {
    .nav-toggle { display: flex; }
    .site-nav {
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
        padding: .6rem 1.25rem 1.25rem;
        margin-left: 0;
        display: none;
    }
    .site-nav.open { display: flex; }
    .site-nav a.nav-link { padding: .8rem .4rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
    .site-nav a.nav-link.active::after { display: none; }
    .site-nav a.nav-link.active { background: var(--brand-light); }
    .lang-switcher { margin: .9rem 0 0; padding: .9rem 0 0; border-left: 0; border-top: 1px solid var(--line-soft); }
    .site-nav .btn { margin: .9rem 0 0; justify-content: center; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    background: linear-gradient(155deg, #14111c 0%, #1d1730 52%, #2a1f52 100%);
    color: #fff;
    overflow: hidden;
}
/* A soft pool of light off to one side — a headlamp in a chamber, not a spotlight. */
.hero::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 72% 56% at 78% 40%, var(--brand-glow), transparent 64%);
    pointer-events: none;
}

.hero__inner {
    position: relative; z-index: 1;
    width: min(100% - 2.5rem, var(--wrap));
    margin-inline: auto;
    padding-block: clamp(3.5rem, 9vw, 6.5rem);
    display: grid; grid-template-columns: 1.02fr .98fr;
    gap: clamp(2rem, 5vw, 4rem); align-items: center;
}

.hero h1 { color: #fff; margin-bottom: 1.1rem; }
.hero .eyebrow { color: var(--brand-lift); }
.hero__sub {
    font-size: 1.12rem; line-height: 1.65;
    color: rgba(255,255,255,.84);
    margin-bottom: 1.9rem; max-width: 54ch;
}
/* Direct child only: a figure.photo in the hero brings its own frame, and
   rounding the image inside it too leaves a visible notch above the caption. */
.hero__media > img {
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0,0,0,.46);
}

.hero__stats {
    display: flex; flex-wrap: wrap; gap: 2.2rem;
    margin-top: 2.6rem; padding-top: 1.8rem;
    border-top: 1px solid rgba(255,255,255,.16);
}
.hero__stat-value {
    font-family: var(--font-head); font-weight: 700;
    font-size: 1.85rem; line-height: 1; color: #fff;
}
.hero__stat-label {
    font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.62); margin-top: .35rem;
}

@media (max-width: 900px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__media { order: -1; }
}

/* Numbered key beneath the cross-section. The numbers are drawn into the SVG,
   so the wording can be translated without redrawing the illustration. */
.figure-key {
    list-style: none;
    margin: 1.2rem 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .5rem 1.4rem;
    font-size: .89rem;
}
.figure-key li {
    display: flex; gap: .6rem; align-items: baseline;
    margin: 0;
}
.figure-key b {
    flex-shrink: 0;
    display: inline-grid; place-items: center;
    width: 1.35rem; height: 1.35rem;
    border-radius: 50%;
    background: var(--brand); color: #fff;
    font-family: var(--font-head); font-size: .8rem;
    align-self: center;
}
.hero .figure-key { color: rgba(255,255,255,.78); }
.hero .figure-key strong { color: #fff; }

/* ── Page header (interior pages) ───────────────────────────────────────── */

.page-head {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line);
    padding-block: clamp(2.5rem, 6vw, 4rem);
}
.page-head h1 { margin-bottom: .5rem; }
.page-head p  { font-size: 1.075rem; margin-bottom: 0; }

.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: .9rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brand-dark); }
.breadcrumb span { margin: 0 .4rem; opacity: .55; }

/* ── Cards & grids ──────────────────────────────────────────────────────── */

.grid { display: grid; gap: clamp(1.15rem, 2.5vw, 1.9rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.7rem;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.card--hover:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-3px); }
.card h3 { margin-bottom: .55rem; }
.card p  { color: var(--body); margin-bottom: 0; }
.card__icon { width: 42px; height: 42px; margin-bottom: 1.1rem; color: var(--brand); }
.card__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; }

.card__title-sm { font-size: 1.08rem; }
.card ul.tight { margin: 0; padding-left: 1.1rem; font-size: .92rem; }

/* ── Split feature rows ─────────────────────────────────────────────────── */

.split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
    margin-bottom: clamp(3rem, 7vw, 5.5rem);
}
.split:last-child { margin-bottom: 0; }
.split--flip .split__media { order: 2; }
.split__media img {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface-alt);
    padding: 1.5rem;
    width: 100%;
}
.split__media--bleed img { padding: 0; border: 0; background: none; }
@media (max-width: 820px) {
    .split { grid-template-columns: 1fr; }
    .split--flip .split__media { order: 0; }
}

/* ── Component cards (the parts of the system) ──────────────────────────── */

/*
 * The cards must line up row for row — name, tagline, description, spec list,
 * footer — even though each card's copy is a different length. Card-level
 * flexbox can only distribute space inside one card, so a longer description
 * still pushes its spec list below the others. Subgrid is what actually solves
 * it: each card adopts the parent's row tracks. The flex rules stay as the
 * fallback for browsers without subgrid and for narrow viewports, where the
 * cards wrap onto several lines and shared row tracks stop being meaningful.
 */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(1.15rem, 2.5vw, 1.9rem);
    align-items: stretch;
}

.product {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.product:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-3px); }

.product__icon {
    width: 40px; height: 40px; color: var(--brand);
    margin: 1.6rem 1.6rem 0;
}
.product__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; }
.product__name {
    font-family: var(--font-head); font-weight: 700;
    font-size: 1.4rem; color: var(--ink);
    margin: 0; padding: 1rem 1.6rem 0;
}
.product__tagline {
    font-size: .88rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--brand-dark); font-weight: 600;
    padding: .2rem 1.6rem 0;
}
.product__desc {
    font-size: .95rem; margin: 0;
    padding: 1rem 1.6rem 0;
    flex: 1;                      /* fallback: absorb slack so specs sit low */
}
.product__specs {
    list-style: none;
    margin: 1.1rem 1.6rem 1.3rem;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--line-soft);
    font-size: .9rem;
    align-self: start;            /* sit at the top of its own row track */
}
.product__specs li {
    display: flex; justify-content: space-between; gap: 1rem;
    margin-bottom: .45rem;
}
.product__specs li:last-child { margin-bottom: 0; }
.product__specs .k { color: var(--muted); }
.product__specs .v { color: var(--graphite); font-weight: 600; text-align: right; }

.product__foot {
    padding: 1.1rem 1.6rem;
    background: var(--surface-alt);
    border-top: 1px solid var(--line);
}

@supports (grid-template-rows: subgrid) {
    @media (min-width: 900px) {
        .product-grid { grid-template-rows: auto auto auto 1fr auto auto; }
        .product { display: grid; grid-template-rows: subgrid; grid-row: span 6; }
        .product__desc { flex: none; }
    }
}

.pill-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.pill {
    font-family: var(--font-head); font-weight: 700; font-size: .82rem;
    letter-spacing: .04em;
    padding: .25rem .6rem; border-radius: 100px;
    background: var(--brand-light); color: var(--brand-dark);
    border: 1px solid rgba(107, 70, 224, .22);
}

/* ── Photographs ────────────────────────────────────────────────────────── */

.photo {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-alt);
    border: 1px solid var(--line);
}
.photo img { width: 100%; display: block; }
.photo figcaption {
    padding: .7rem 1rem;
    font-size: .85rem; color: var(--muted);
    background: var(--surface);
    border-top: 1px solid var(--line);
}
/* On the dark hero the frame has to invert or it reads as a white slab. */
.hero .photo {
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    box-shadow: 0 24px 60px rgba(0,0,0,.46);
}
.hero .photo figcaption {
    background: rgba(255,255,255,.05);
    border-top-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.68);
}

/*
 * Concept illustrations.
 *
 * Every image in this pattern is a render of a deployment that has not
 * happened. The tag is not decoration — without it the gallery reads as a
 * portfolio of installations, which would be the one dishonest thing on a site
 * built around not overclaiming. Keep it visible.
 */
.concept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: clamp(1.15rem, 2.5vw, 1.9rem);
}
.concept {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.concept:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-3px); }
.concept__media { position: relative; background: var(--surface-alt); }
.concept__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.concept__tag {
    position: absolute; left: .7rem; bottom: .7rem;
    font-family: var(--font-head); font-weight: 700;
    font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    padding: .22rem .6rem; border-radius: 100px;
    background: rgba(20, 17, 28, .82); color: #fff;
    backdrop-filter: blur(4px);
}
.concept__body { padding: 1.2rem 1.35rem 1.4rem; }
.concept__body h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.concept__body p  { font-size: .93rem; margin: 0; }

/* ── Process steps ──────────────────────────────────────────────────────── */

ol.steps { counter-reset: step; list-style: none; padding-left: 0; margin-bottom: 1.5rem; }
ol.steps > li {
    counter-increment: step;
    position: relative;
    padding: .1rem 0 .1rem 2.6rem;
    margin-bottom: .7rem;
}
ol.steps > li::before {
    content: counter(step);
    position: absolute; left: 0; top: .05rem;
    width: 1.85rem; height: 1.85rem;
    display: grid; place-items: center;
    font-family: var(--font-head); font-weight: 700; font-size: .88rem;
    color: var(--brand-dark); background: var(--brand-light);
    border: 1px solid rgba(107, 70, 224, .24);
    border-radius: 50%;
}

.step { position: relative; padding-left: 3.6rem; }
.step__num {
    position: absolute; left: 0; top: .1rem;
    width: 2.5rem; height: 2.5rem;
    display: grid; place-items: center;
    font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
    color: #fff; background: var(--brand);
    border-radius: 50%;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */

.table-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--radius); border: 1px solid var(--line);
}

table.data {
    width: 100%; border-collapse: collapse;
    font-size: .93rem; background: var(--surface);
    min-width: 620px;
}
table.data th, table.data td {
    padding: .8rem 1rem; text-align: left;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
}
table.data thead th {
    font-family: var(--font-head); font-weight: 700;
    font-size: .88rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink); background: var(--surface-alt);
    border-bottom: 2px solid var(--line);
    white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-alt); }
table.data th[scope="row"] { font-weight: 600; color: var(--graphite); font-family: var(--font-body); }
table.data td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.badge {
    display: inline-block;
    font-size: .78rem; font-weight: 700; letter-spacing: .04em;
    padding: .18rem .6rem; border-radius: 100px;
    white-space: nowrap;
}
.badge--good  { background: #e3f6ee; color: #0b6e4d; }
.badge--ok    { background: var(--brand-light); color: var(--brand-dark); }
.badge--bad   { background: #fdeaec; color: #a5222f; }
.badge--new   { background: var(--brand); color: #fff; }
.badge--muted { background: var(--line-soft); color: var(--body); }

/* ── Callout / CTA band ─────────────────────────────────────────────────── */

.cta-band {
    background: linear-gradient(135deg, var(--surface-deep), #2a1f52);
    color: #fff;
    border-radius: var(--radius);
    padding: clamp(2rem, 5vw, 3.2rem);
    display: flex; flex-wrap: wrap; gap: 1.8rem;
    align-items: center; justify-content: space-between;
}
.cta-band h2 { color: #fff; margin-bottom: .4rem; }
.cta-band p  { color: rgba(255,255,255,.8); margin-bottom: 0; }

.note {
    border-left: 3px solid var(--brand);
    background: var(--brand-light);
    padding: 1rem 1.2rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: .93rem; color: var(--graphite);
}
.note--warn { border-left-color: var(--warn); background: #fdf6ea; }

/* ── Forms ──────────────────────────────────────────────────────────────── */

.field { margin-bottom: 1.15rem; }
.field label, .label {
    display: block;
    font-family: var(--font-head); font-weight: 600;
    font-size: .95rem; letter-spacing: .02em;
    color: var(--graphite); margin-bottom: .35rem;
}
.field .hint { font-size: .84rem; color: var(--muted); margin-top: .3rem; }
.field .opt  { color: var(--muted); font-weight: 400; font-size: .85rem; }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
    width: 100%;
    font-family: var(--font-body); font-size: .97rem;
    color: var(--ink); background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .62rem .8rem;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
}
textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235c5567' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: 11px;
    padding-right: 2.2rem;
}

.field--error input, .field--error textarea, .field--error select { border-color: var(--bad); }
.field-error { color: var(--bad); font-size: .86rem; margin-top: .3rem; font-weight: 600; }

/* Honeypot — hidden from people, reachable by naive bots. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

.alert {
    padding: .9rem 1.15rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    font-size: .95rem;
    border: 1px solid transparent;
}
.alert--error   { background: #fdeaec; border-color: #f4c3c9; color: #8f1d29; }
.alert--success { background: #e3f6ee; border-color: #b6e4d1; color: #0b6e4d; }
.alert--info    { background: var(--brand-light); border-color: #d6c9fa; color: #4a2cad; }
.alert--warn    { background: #fdf6ea; border-color: #f2ddb7; color: #8a5300; }
.alert p:last-child { margin-bottom: 0; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.15rem; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
    background: var(--surface-deep);
    color: rgba(255,255,255,.7);
    padding-block: clamp(2.8rem, 6vw, 4.2rem) 0;
    font-size: .92rem;
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.9fr 1fr 1fr;
    gap: 2.2rem;
    padding-bottom: 2.6rem;
}
.site-footer h4 {
    font-size: .84rem; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; margin-bottom: 1rem;
}
.site-footer a { color: rgba(255,255,255,.7); }
.site-footer a:hover { color: var(--brand-lift); text-decoration: none; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer__logo img { width: 128px; margin-bottom: 1.1rem; }
.site-footer__blurb { max-width: 34ch; margin-bottom: 1.3rem; }
.site-footer address { font-style: normal; line-height: 1.75; }

.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-block: 1.4rem;
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: center; justify-content: space-between;
    font-size: .86rem; color: rgba(255,255,255,.5);
}
.site-footer__bottom img { width: 132px; opacity: .85; }

@media (max-width: 820px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ── Stat tiles ─────────────────────────────────────────────────────────── */

.result-tiles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 1px; background: var(--line);
    border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden;
}
.tile { background: var(--surface); padding: 1.15rem 1.25rem; }
.tile__label {
    font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .35rem;
}
.tile__value {
    font-family: var(--font-head); font-weight: 700;
    font-size: 1.7rem; line-height: 1.1; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.tile--hero .tile__value { color: var(--brand-dark); }
.tile__note { font-size: .76rem; line-height: 1.5; color: var(--muted); margin-top: .5rem; }

/* ── Misc content ───────────────────────────────────────────────────────── */

/* 72ch is the measure for a .prose that shares its row with something else —
   a grid column beside a figure or a table. Where .prose is the whole content
   of its container, the container has already set the measure and capping it
   again only leaves a ragged gap on the right; see also .prose.legal below. */
.prose { max-width: 72ch; }
.wrap-sm > .prose { max-width: none; }
.prose h2 { margin-top: 2.4rem; font-size: 1.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.4rem; }

.contact-grid {
    display: grid; grid-template-columns: 1.4fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem;
}
.contact-card address { font-style: normal; line-height: 1.8; }
.contact-card h3 { font-size: 1.1rem; }

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 2rem; }

/* ── Cookie notice ──────────────────────────────────────────────────────── */

.cookie-notice {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem;
    z-index: 150;
    max-width: 720px; margin-inline: auto;
    display: flex; flex-wrap: wrap; gap: .9rem;
    align-items: center; justify-content: space-between;
    background: var(--surface-deep);
    color: rgba(255,255,255,.86);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0,0,0,.34);
    padding: .95rem 1.15rem;
    font-size: .9rem;
}
.cookie-notice p { margin: 0; flex: 1 1 340px; }
.cookie-notice a { color: var(--brand-lift); }

/* ── Legal pages ────────────────────────────────────────────────────────── */

.legal-meta { font-size: .88rem; color: var(--muted); margin: .9rem 0 0; }
.legal-meta span { margin: 0 .5rem; opacity: .5; }

/* The 72ch measure .prose sets is right for an article column sitting beside
   something else, and wrong here: a legal page is the only thing in its .wrap,
   so the cap left the text filling half the page and the identity and purpose
   tables cramped into the same half. These pages use the full container. */
.prose.legal { max-width: none; }

.prose.legal h2 {
    margin-top: 2.8rem; padding-top: 1.4rem;
    border-top: 1px solid var(--line);
    font-size: 1.35rem;
}
.prose.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.prose.legal .table-scroll { margin-bottom: 1.5rem; }
.prose.legal li { margin-bottom: .55rem; }

table.legal-table th[scope="row"] { width: 32%; min-width: 150px; }
table.legal-table thead { display: none; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

h2.faq-group {
    margin-top: 2.8rem; padding-top: 1.5rem;
    border-top: 2px solid var(--line);
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    scroll-margin-top: 92px;
}
h2.faq-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

details.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: .6rem;
    background: var(--surface);
    transition: border-color .15s;
    scroll-margin-top: 92px;
}
details.faq-item[open] { border-color: var(--brand); }
details.faq-item summary {
    display: flex; align-items: baseline; gap: .85rem;
    padding: .95rem 1.15rem;
    cursor: pointer;
    font-family: var(--font-head); font-weight: 600;
    font-size: 1.03rem; color: var(--ink);
    list-style: none;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
    content: "+";
    margin-left: auto; flex-shrink: 0;
    font-size: 1.25rem; font-weight: 400; color: var(--brand-dark);
    line-height: 1;
}
details.faq-item[open] summary::after { content: "\2212"; }
details.faq-item summary:hover { color: var(--brand-dark); }
.faq-item__n {
    font-size: .8rem; color: var(--muted);
    font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.faq-item__a { padding: 0 1.15rem 1.15rem 3.05rem; font-size: .95rem; }
.faq-item__a p:first-child { margin-top: 0; }
@media (max-width: 520px) { .faq-item__a { padding-left: 1.15rem; } }

/* Intro and section copy spans the container. The reading measure is kept only
   on .prose — the legal pages and the FAQ answers — where a 1180px line length
   would genuinely hurt readability. */

/* Photographs: the node gallery on /system and the wide figure on /technology (2026-09-28) */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.photo-grid .photo img { aspect-ratio: 1 / 1; object-fit: cover; }
.photo--wide { max-width: 900px; margin-inline: auto; }