/* ═══════════════════════════════════════════════════════════════════════════
   StraightArc Technologies — product site system

   This is a product site, not a document. Sans-serif throughout, information in
   cards and tables, short scannable copy. Serif appears in exactly one place:
   the body of a long-form Insights article, where it belongs.

   Colour encodes something real: the two product families. Skyvirt (range, TTX,
   HCI, KUBE) is the navy infrastructure line; Secsphere (SOC, BAS) is the
   orange security-operations line. That is the only decorative use of hue.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
    /* surfaces */
    --ground: #eef1f4;
    --surface: #ffffff;
    --surface-2: #f7f9fb;
    --surface-3: #e8edf2;

    /* ink */
    --ink: #101720;
    --ink-2: #2c3644;
    --muted: #5b6675;
    --faint: #646e7f;

    /* structure */
    --line: #dbe2e9;
    --line-2: #c2cdd8;

    /* the two product families */
    --navy: #16233a;
    --navy-2: #24365a;
    --navy-wash: #eaeff7;
    --accent: #c2410c;
    --accent-2: #9a3412;
    --accent-wash: #fdf1ea;

    --good: #15803d;

    /* long-form article aliases — blog.css reads these */
    --paper: var(--surface);
    --soft: var(--surface-2);
    --rule: var(--line);
    --rule-2: var(--line-2);
    --term-bg: #131a24;
    --term-fg: #d6dce6;
    --term-dim: #7d8a9b;

    --display: 'IBM Plex Sans Condensed', 'IBM Plex Sans', Arial Narrow, sans-serif;
    --sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
    --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

    --gut: clamp(18px, 3.5vw, 48px);
    --inner: 1660px;
    --r: 3px;
}

*, *::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: .001ms !important; transition-duration: .001ms !important; }
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: #ffdcc8; color: var(--ink); }

h1, h2, h3, h4 { color: var(--ink); margin: 0; }

/* ── layout ─────────────────────────────────────────────────────────────── */

.band { width: 100%; padding: clamp(64px, 7.5vw, 116px) var(--gut); }
.band--surface { background: var(--surface); }
.band--ground { background: var(--ground); }
.band--navy { background: var(--navy); color: #cbd5e4; }
.band__inner { max-width: var(--inner); margin: 0 auto; }

/* section opener: index number, label, heading */
.sec-head { margin-bottom: clamp(34px, 4.5vw, 58px); max-width: 68ch; }

.sec-head .idx {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

.sec-head .idx::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--accent);
}

.band--navy .sec-head .idx { color: #f0955f; }
.band--navy .sec-head .idx::before { background: #f0955f; }

.sec-head h2 {
    font-family: var(--display);
    font-size: clamp(1.7rem, 1rem + 2.2vw, 2.6rem);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.band--navy .sec-head h2 { color: #fff; }

.sec-head p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 1rem;
    text-wrap: pretty;
}

.band--navy .sec-head p { color: #9fb0c8; }

/* ── navbar ─────────────────────────────────────────────────────────────── */

.navbar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--line);
}

.navbar.scrolled { border-bottom-color: var(--line-2); }

.nav-container {
    /* border-box means padding eats into max-width, so the nav's CONTENT would
       sit var(--gut) inboard of every .band__inner below it. The bands put the
       gutter on the outer element and the cap on the inner one; matching that
       here means widening the cap by both gutters. */
    max-width: calc(var(--inner) + var(--gut) * 2);
    margin: 0 auto;
    padding: 0 var(--gut);
    height: 62px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--ink);
    flex: none;
    margin-right: auto;
}

.nav-logo-icon { height: 30px; width: auto; }

.logo-text { font-weight: 600; font-size: .98rem; letter-spacing: -.01em; }
.logo-highlight { color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: 2px; }

.nav-link {
    font-size: .84rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    padding: 7px 11px;
    border-radius: var(--r);
    transition: background .15s, color .15s;
}

.nav-link:hover { background: var(--surface-3); color: var(--ink); }
.nav-link.active { color: var(--accent); background: var(--accent-wash); }

.nav-cta {
    font-size: .84rem;
    font-weight: 600;
    color: #fff;
    background: var(--ink);
    padding: 8px 16px;
    border-radius: var(--r);
    text-decoration: none;
    flex: none;
    transition: background .15s;
}

.nav-cta:hover { background: var(--accent); }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 0 8px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    cursor: pointer;
}

.nav-toggle span { display: block; height: 1.5px; background: var(--ink); transition: transform .2s, opacity .2s; }
.nav-toggle.active span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-overlay { display: none; }

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: .9rem;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: var(--r);
    border: 1px solid var(--ink);
    background: var(--ink);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.btn:hover { background: var(--accent); border-color: var(--accent); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--surface); color: var(--accent); border-color: var(--accent); }

.btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── product cards ──────────────────────────────────────────────────────── */

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.pcard {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    border-top: 3px solid var(--navy-2);
    padding: 30px 28px 26px;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.pcard--sec { border-top-color: var(--accent); }

.pcard:hover {
    border-color: var(--line-2);
    box-shadow: 0 10px 26px -14px rgba(16, 23, 32, .28);
    transform: translateY(-2px);
}

.pcard__fam {
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--navy-2);
    margin-bottom: 10px;
}

.pcard--sec .pcard__fam { color: var(--accent); }

.pcard h3 { font-family: var(--display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.pcard__role { font-size: .85rem; color: var(--muted); margin: 0 0 14px; }
.pcard__body { font-size: .92rem; line-height: 1.7; color: var(--ink-2); margin: 0 0 20px; }

.pcard__figs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 16px; }
.pcard__figs div { flex: 1 1 90px; padding: 9px 12px; }
.pcard__figs div + div { border-left: 1px solid var(--line); }
.pcard__figs b { display: block; font-family: var(--mono); font-size: .95rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pcard__figs span { display: block; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }

.pcard ul { list-style: none; margin: 0 0 18px; padding: 0; }
.pcard li { position: relative; padding-left: 17px; margin-bottom: 10px; font-size: .87rem; line-height: 1.6; color: var(--ink-2); }
.pcard li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 1.5px; background: var(--navy-2); }
.pcard--sec li::before { background: var(--accent); }

.pcard__go { margin-top: auto; font-size: .84rem; font-weight: 600; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.pcard__go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.pcard__go:hover svg { transform: translateX(3px); }

/* ── services ───────────────────────────────────────────────────────────── */

.scard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px; }
.scard h3 { font-size: 1rem; font-weight: 600; margin-bottom: 7px; }
.scard p { margin: 0; font-size: .88rem; color: var(--muted); }
.scard .n { font-family: var(--mono); font-size: .68rem; color: var(--accent); display: block; margin-bottom: 9px; }

/* ── partners / clients ─────────────────────────────────────────────────── */

.tags { display: flex; flex-wrap: wrap; gap: 7px; }

.tag {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 5px 10px;
}

.band--navy .tag { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #cbd5e4; }

.ccard { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r); padding: 26px 24px; }
.ccard h3 { font-family: var(--mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: #f0955f; margin-bottom: 13px; }
.ccard ul { list-style: none; margin: 0; padding: 0; }
.ccard li { font-size: .87rem; padding: 4px 0; color: #cbd5e4; }

/* ── people ─────────────────────────────────────────────────────────────── */

.person { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px; }
.person__head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
    /* A long title (Tarun's wraps to three lines) otherwise pushes that card's
       body 23px below the others. Reserve the tallest case so every card in a
       row starts its text on the same line. */
    min-height: 76px;
}
.person__init { font-family: var(--mono); font-size: .78rem; font-weight: 600; color: #fff; background: var(--navy); border-radius: var(--r); padding: 6px 9px; }
.person h3 { font-size: 1.02rem; font-weight: 600; }
.person__role { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 2px 0 0; }
.person p { margin: 0; font-size: .87rem; color: var(--muted); }

/* ── contact ────────────────────────────────────────────────────────────── */

/* The form gets a fixed, sensible width — a 900px-wide dropdown for "Secsphere
   SOC" looks broken. The details column takes the remaining space and lays its
   items out two-up, so the hairline rules aren't running 700px under a phone
   number. */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
    gap: clamp(24px, 4vw, 72px);
    align-items: start;
}

.contact-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 clamp(20px, 3vw, 48px);
}

.contact-details .contact-item:nth-child(2) { border-top: 1px solid var(--line); }

.contact-item { display: grid; gap: 3px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.contact-item:first-of-type { border-top: 1px solid var(--line); }
.contact-label { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.contact-item a { color: var(--accent); text-decoration: none; font-size: .95rem; }
.contact-item a:hover { text-decoration: underline; }
.contact-item span:not(.contact-label) { font-size: .95rem; color: var(--ink-2); }

.form { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 5px; }
.field label { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.field input, .field select, .field textarea {
    font-family: var(--sans);
    font-size: .95rem;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    padding: 10px 12px;
    width: 100%;
}

.field textarea { resize: vertical; min-height: 118px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--surface); }

/* ── footer ─────────────────────────────────────────────────────────────── */

.footer { background: var(--navy); color: #9fb0c8; padding: clamp(40px, 5vw, 64px) var(--gut) 24px; }
.footer .container { max-width: var(--inner); margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 48px); }
.footer-brand .nav-logo { color: #fff; margin-bottom: 12px; }
.footer-brand .logo-highlight { color: #f0955f; }
.footer-brand p { margin: 0; font-size: .87rem; max-width: 40ch; }
.footer-links h4 { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: #f0955f; margin-bottom: 11px; }
.footer-links a { display: block; font-size: .87rem; color: #b8c5d8; text-decoration: none; padding: 4px 0; }
.footer-links a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 36px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); }
.footer-bottom p { margin: 0; font-size: .8rem; color: #8797ae; }

/* ── narrow ─────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
    .contact-grid { grid-template-columns: minmax(0, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .nav-toggle { display: flex; }
    .nav-cta { display: none; }

    .nav-links {
        position: fixed;
        inset: 62px 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        padding: 8px var(--gut) 16px;
        transform: translateY(-130%);
        transition: transform .24s ease;
        z-index: 59;
    }

    .nav-links.active { transform: translateY(0); }
    .nav-link { padding: 12px 10px; border-radius: var(--r); }

    .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(16, 23, 32, .4);
        opacity: 0;
        visibility: hidden;
        transition: opacity .24s;
        z-index: 58;
    }

    .nav-overlay.active { opacity: 1; visibility: visible; }
}

@media (max-width: 720px) {
    .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

@media print {
    .navbar, .nav-toggle, .hero__cta, .hero__stage, .hero__rail, .form { display: none; }
    body { background: #fff; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION + SHOWCASE
   Reveals are gated on html.js, which the script sets before paint. Without
   JS — or with reduced motion — nothing is ever hidden, so content can't be
   trapped invisible. That's the one rule that matters here.
   ═════════════════════════════════════════════════════════════════════════ */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
                transform .6s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
}

.js [data-reveal].in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@keyframes ping {
    0% { transform: scale(.6); opacity: .9; }
    70%, 100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {

}

/* the platform panel rows light up in sequence on load */


@keyframes rowIn { from { opacity: 0; transform: translateX(-8px) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {

}

/* ── product cards: a real lift, and the family bar draws across ────────── */

.pcard { position: relative; overflow: hidden; }

.pcard::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -3px;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.pcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(16, 23, 32, .38); }
.pcard:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
    .pcard:hover { transform: none; }
    .pcard::after { transition: none; }
}

/* ── product showcase ───────────────────────────────────────────────────── */

.show { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }

.show__tabs { display: grid; gap: 6px; }

.show__tab {
    display: grid;
    gap: 2px;
    text-align: left;
    padding: 13px 15px;
    background: transparent;
    border: 1px solid transparent;
    border-left: 2px solid var(--line-2);
    border-radius: 0 var(--r) var(--r) 0;
    cursor: pointer;
    font-family: var(--sans);
    transition: background .18s, border-color .18s;
}

.show__tab b { font-size: .92rem; font-weight: 600; color: var(--ink); }
.show__tab span { font-size: .76rem; color: var(--muted); }

.show__tab:hover { background: var(--surface); }

.show__tab[aria-selected="true"] {
    background: var(--surface);
    border-color: var(--line);
    border-left-color: var(--accent);
}

.show__tab[aria-selected="true"] b { color: var(--accent); }

/* browser chrome around the screenshot, so it reads as a real product */
.show__frame {
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 24px 50px -28px rgba(16, 23, 32, .45);
}

.show__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    background: var(--surface-3);
    border-bottom: 1px solid var(--line);
}

.show__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); flex: none; }

.show__url {
    margin-left: 8px;
    font-family: var(--mono);
    font-size: .68rem;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 3px 10px;
}

.show__stage { position: relative; aspect-ratio: 2100 / 1188; background: var(--surface-2); }

.show__stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    transition: opacity .45s ease;
}

.show__stage img.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .show__stage img { transition: none; } }

@media (max-width: 900px) {
    .show { grid-template-columns: minmax(0, 1fr); }
    .show__tabs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .show__tab { border-left: 0; border-top: 2px solid var(--line-2); border-radius: 0 0 var(--r) var(--r); }
    .show__tab[aria-selected="true"] { border-left-color: transparent; border-top-color: var(--accent); }
}

/* ── partner marquee ────────────────────────────────────────────────────── */

.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; width: max-content; gap: 8px; animation: slide 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee .tag { white-space: nowrap; }

@keyframes slide { from { transform: translateX(0) } to { transform: translateX(-50%) } }

@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
    .marquee { mask-image: none; -webkit-mask-image: none; }
}

/* ── credentials row (Customers band) ───────────────────────────────────── */

.creds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }

.cred {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .02em;
    color: #cbd5e4;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r);
    padding: 6px 12px;
}

.cred b { color: #f0955f; font-weight: 600; }

/* ── article width: the reading column was leaving huge dead margins ───── */

/* Article layout.
   One grid for the whole article, not two. The cover and the body used to be
   separate grids, which meant the contents menu could only begin *after* the
   header block — leaving 433px of empty left column above it. Now the menu is
   a single grid item spanning both rows, so it starts level with the kicker.

   The reading column IS the measure (100ch), so prose, headings, terminal
   captures, tables and figures all share the same left AND right edge. */

.article {
    display: grid;
    grid-template-columns: minmax(0, 330px) minmax(0, 100ch);
    justify-content: center;
    column-gap: clamp(28px, 4vw, 84px);
    row-gap: 0;
    padding: 0 var(--gut) clamp(64px, 8vw, 110px);
}

.article > .toc {
    grid-column: 1;
    grid-row: 1 / span 2;      /* beside the cover AND the body */
    align-self: start;
}

.article > .cover { grid-column: 2; grid-row: 1; }
.article > .ed { grid-column: 2; grid-row: 2; }

/* these were their own centred blocks before the merge */
.cover, .wrap { max-width: none; width: auto; margin: 0; padding-inline: 0; }

@media (max-width: 1040px) {
    .article {
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        max-width: 100ch;
        margin-inline: auto;
    }
    /* header first, then contents, then the article */
    .article > .cover { grid-column: 1; grid-row: 1; }
    .article > .toc { grid-column: 1; grid-row: 2; }
    .article > .ed { grid-column: 1; grid-row: 3; }
}

/* page header band: no need for a full band's bottom padding under a lone heading */
.band--tight { padding-bottom: clamp(16px, 2vw, 28px); }
.band--tight .sec-head { margin-bottom: 0; }

/* ── team photos ────────────────────────────────────────────────────────────
   A photo and the initials monogram occupy exactly the same footprint, so a
   card looks deliberate whether or not a photo exists. Drop a file into
   assets/images/team/<first-last>.jpg and swap the <span> for an <img>. */

.person__photo {
    width: 46px;
    height: 46px;
    border-radius: var(--r);
    object-fit: cover;
    flex: none;
    background: var(--surface-3);
    border: 1px solid var(--line);
}

.person__init {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    padding: 0;
}

.person__head { align-items: center; }

/* ── contact form: honeypot + status ────────────────────────────────────── */

/* Off-screen rather than display:none — some bots skip hidden inputs. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.form-status {
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
}

.form-status.ok { color: var(--good); }
.form-status.err { color: var(--accent); }

#cf-turnstile:empty { display: none; }


/* ── positioning band: what kind of organisation this is ────────────────── */

.band--slogan {
    background: var(--navy);
    color: #cbd5e4;
    padding-top: clamp(56px, 6.5vw, 96px);
    padding-bottom: clamp(56px, 6.5vw, 96px);
}

.slogan {
    font-family: var(--display);
    font-size: clamp(1.8rem, 1rem + 2.8vw, 3.1rem);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.015em;
    color: #fff;
    margin: 0 0 clamp(34px, 4vw, 56px);
    max-width: 20ch;
    text-wrap: balance;
}

.slogan span { color: #f0955f; }

.slogan__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .12);
}

.slogan__grid > div { background: var(--navy); padding: 28px 26px; }

.slogan__grid h3 {
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #f0955f;
    margin: 0 0 12px;
}

.slogan__grid p { margin: 0; font-size: .93rem; line-height: 1.75; color: #b8c5d8; }

@media (max-width: 900px) {
    .slogan__grid { grid-template-columns: minmax(0, 1fr); }
}


/* ══ HERO ═══════════════════════════════════════════════════════════════════
   A rotating statement on the left, a real product screenshot on the right.
   The old hero was the stock template — pill badge, one accent word, grey deck,
   dark+ghost button pair, stat run-on, all-over grid. None of that survives.
   Slides are stacked in ONE grid cell rather than absolutely positioned, so the
   container takes the height of the tallest and nothing jumps as it rotates. */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: clamp(34px, 4.2vw, 62px) var(--gut) clamp(22px, 2.6vw, 34px);
}

.hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--inner);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.04fr);
    grid-template-areas: "lede stage" "foot foot";
    column-gap: clamp(30px, 4.2vw, 74px);
    row-gap: clamp(26px, 3.2vw, 44px);
    /* top-aligned, not centred: the text column is much shorter than the
       screenshot, and centring dropped the kicker 94px below the image edge */
    align-items: start;
}

.hero__lede  { grid-area: lede; min-width: 0; }
.hero__stage { grid-area: stage; min-width: 0; }
.hero__foot  { grid-area: foot; }

/* ── the rotating statement ───────────────────────────────────────────────── */

.hero__slides { display: grid; }

.hslide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s ease, visibility .45s;
}

.hslide.is-live { opacity: 1; visibility: visible; pointer-events: auto; }

/* mono kicker on an accent rule — the same device the OG cards use, and not a pill */
.hslide__kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: clamp(14px, 1.8vw, 20px);
}

.hslide__kicker i { width: 34px; height: 2px; background: var(--accent); flex: none; }

.hslide__title {
    font-family: var(--display);
    font-size: clamp(2.05rem, .85rem + 3.85vw, 3.7rem);
    line-height: 1.04;
    font-weight: 600;
    letter-spacing: -.022em;
    margin: 0 0 clamp(16px, 2vw, 22px);
    text-wrap: balance;
}

.hslide__title span { color: var(--accent); }

.hslide__deck {
    font-size: 1.06rem;
    line-height: 1.65;
    color: var(--muted);
    max-width: 54ch;
    margin: 0;
}

/* Staggered entrance, only once JS has taken over the rotation.
   Deliberately a TRANSITION, not a keyframe animation with fill-mode: both.
   An animation that stalls, is throttled, or never starts leaves the element
   pinned at its `from` state — i.e. a hero with no headline. A transition always
   settles on the class's resting value, so the worst case here is that the text
   appears instantly instead of sliding in. Base state is scoped to .js so that
   with scripting off every slide renders plainly rather than invisibly. */
.js .hslide__kicker,
.js .hslide__title,
.js .hslide__deck {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}

.js .hslide.is-live .hslide__kicker { opacity: 1; transform: none; transition-delay: .02s; }
.js .hslide.is-live .hslide__title  { opacity: 1; transform: none; transition-delay: .09s; }
.js .hslide.is-live .hslide__deck   { opacity: 1; transform: none; transition-delay: .16s; }

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: clamp(22px, 2.6vw, 32px);
}

.btn--hero { padding: 13px 22px; font-size: .95rem; }

.hero__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink);
    text-decoration: none;
    padding: 5px 0;
}

.hero__link i { width: 16px; height: 1px; background: currentColor; position: relative; transition: width .25s; }

.hero__link i::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}

.hero__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: var(--accent);
    transition: width .3s ease;
}

.hero__link:hover { color: var(--accent); }
.hero__link:hover::after { width: calc(100% - 26px); }
.hero__link:hover i { width: 24px; }

/* ── the graphical stage ──────────────────────────────────────────────────── */

.hero__stage { position: relative; display: grid; --off: clamp(14px, 1.6vw, 26px); }

/* solid navy slab offset behind the screenshot: this is what gives the hero
   depth and a deliberate composition instead of a floating card */
.hero__block {
    position: absolute;
    top: var(--off);
    left: var(--off);
    right: calc(var(--off) * -1);
    bottom: calc(var(--off) * -1);
    border-radius: var(--r);
    background-color: var(--navy);
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 34px 34px;
}

.shot {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    margin: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 28px 62px -30px rgba(16, 35, 58, .55), 0 4px 14px -6px rgba(16, 35, 58, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.988);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1), visibility .55s;
}

.shot.is-live { opacity: 1; visibility: visible; transform: none; }

/* One aspect for all three so the stage never changes height mid-rotation.
   contain, not cover: these are 1.60 and 1.78 sources, and cover was slicing the
   right-hand panel off the SOC and HCI consoles. The letterbox colour is sampled
   from each screenshot's own edge, so the bars read as app chrome, not as bars. */
.shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    background: var(--shot-bg, #fff);
}

.shot figcaption {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mono);
    font-size: .67rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}

.shot figcaption::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: none;
    background: var(--accent);
}

.shot__scan { display: none; }

.js .shot.is-live .shot__scan {
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 0;
    height: 24%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(194, 65, 12, .085), transparent);
    animation: shotScan 6s linear infinite;
}

@keyframes shotScan {
    from { transform: translateY(-40%); }
    to   { transform: translateY(400%); }
}

/* ── index rail and metrics ───────────────────────────────────────────────── */

.hero__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 34px;
    padding-top: clamp(18px, 2.2vw, 26px);
    border-top: 1px solid var(--line);
}

.hero__rail { display: flex; align-items: center; gap: 18px; }

.rail {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.rail__n {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .1em;
    color: var(--faint);
    transition: color .25s;
}

.rail__bar { position: relative; display: block; width: 40px; height: 2px; background: var(--line-2); overflow: hidden; }
.rail__bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }

.rail:hover .rail__n { color: var(--ink-2); }
.rail[aria-selected="true"] .rail__n { color: var(--ink); }
.js .rail[aria-selected="true"] .rail__bar i { animation: railFill var(--dwell, 6400ms) linear forwards; }
.js .hero.is-held .rail[aria-selected="true"] .rail__bar i { animation-play-state: paused; }

/* with no JS the rotator never advances, so show the first bar filled */
.rail[aria-selected="true"] .rail__bar i { transform: scaleX(1); }
.js .rail[aria-selected="true"] .rail__bar i { transform: scaleX(0); }

@keyframes railFill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.hero__metrics { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 0; }
.hero__metrics div { display: flex; align-items: baseline; gap: 7px; }

.hero__metrics dt {
    margin: 0;
    font-family: var(--display);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.hero__metrics dd { margin: 0; font-size: .81rem; color: var(--faint); }

/* ── hero, narrow ─────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lede" "stage" "foot"; }
    .hero__stage { --off: clamp(10px, 2vw, 16px); }
    .hslide__deck { max-width: none; }
}

@media (max-width: 620px) {
    .hero__foot { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .js .hslide__kicker,
    .js .hslide__title,
    .js .hslide__deck { opacity: 1; transform: none; transition: none; }
    .js .shot.is-live .shot__scan { animation: none; display: none; }
    .js .rail[aria-selected="true"] .rail__bar i { animation: none; transform: scaleX(1); }
    .shot { transition: none; }
    .hslide { transition: none; }
}