/* Intelligena company site — self-hosted, no CDN, CSP-tight. */

:root {
    --ink:        #0b1220;
    --ink-soft:   #38455f;
    --ink-mute:   #667691;
    --paper:      #ffffff;
    --paper-alt:  #f4f6fa;
    --line:       #dde3ee;
    --brand:      #1f4fd8;
    --brand-dk:   #17389c;
    --brand-lt:   #eaf0ff;
    --accent:     #17c0a8;
    /* The mark carries its own two colours rather than borrowing --brand: the lockup
       is deliberately not the same blue as every link and button on the page. */
    --mark-triangle: #8b1a1a;
    --mark-eye:      #10265e;
    --dark:       #090e1a;
    --dark-soft:  #141c30;
    --danger:     #b3261e;
    --danger-bg:  #fdecea;
    --ok:         #10714f;
    --ok-bg:      #e6f6ef;
    --radius:     14px;
    --radius-sm:  8px;
    --shadow:     0 2px 6px rgba(11,18,32,.06), 0 12px 28px rgba(11,18,32,.08);
    --wrap:       1180px;
    --font:       system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.62;
    color: var(--ink);
    background: var(--paper);
}

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

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.015em; }
h2 { font-size: 2rem; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
a { color: var(--brand); }

.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

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

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--brand); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; }

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

/* --- Header ---------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.94);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand, .brand-lockup { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); }

/* The mark: an eye inside a triangle. Sized in `em` so it tracks the wordmark
   rather than needing a second edit whenever the lockup is rescaled. */
.brand-mark { width: 1.62em; height: 1.62em; flex-shrink: 0; overflow: visible; }
.brand-mark-triangle {
    fill: none; stroke: var(--mark-triangle); stroke-width: 2.4;
    stroke-linejoin: round;
}
/* Outline and pupil are one eye and take one colour — a navy ring around a
   differently-coloured dot reads as two shapes, not as an eye. */
.brand-mark-eye { fill: none; stroke: var(--mark-eye); stroke-width: 2; stroke-linejoin: round; }
.brand-mark-pupil { fill: var(--mark-eye); }

.brand-name { font-weight: 700; font-size: 1.45rem; letter-spacing: -.025em; }
.site-nav { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.site-nav a {
    text-decoration: none; color: var(--ink-soft); font-weight: 500; font-size: .93rem;
    padding: 6px 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.header-portal { flex-shrink: 0; }

/* --- Buttons --------------------------------------------------------- */
.btn {
    display: inline-block; padding: 12px 22px; border-radius: 999px;
    font-weight: 600; font-size: .97rem; text-decoration: none; cursor: pointer;
    border: 1.5px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dk); }
.btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-sm { padding: 8px 16px; font-size: .9rem; }
.btn-lg { padding: 15px 30px; font-size: 1.03rem; }
.hero .btn-ghost { color: #fff; }
.header-portal.btn-ghost { color: var(--brand); border-color: var(--brand); }
.header-portal.btn-ghost:hover { background: var(--brand-lt); }

/* --- Hero (one large hero per page) ---------------------------------- */
.hero {
    background-color: var(--dark);
    background-size: cover;
    background-position: center;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero-inner { padding: 104px 24px 96px; max-width: 860px; }
/* A hero that is a photograph of people, shown WITHOUT a scrim.
   The width is constrained on the CHILDREN, not on .hero-inner — that element also
   carries .container, whose `margin: 0 auto` would centre a narrowed block and push
   the text right, straight onto the faces it is meant to avoid. */
.hero-photo .hero-eyebrow,
.hero-photo .hero-title,
.hero-photo .hero-subtitle,
.hero-photo .hero-actions { max-width: 520px; }

/* With no gradient underneath, the type carries its own contrast. Still LAYERED — a
   single shadow at any radius either greys the whole backdrop or draws a hard outline —
   but deliberately diffuse: the old build used two tight 3-4px layers at .92/.95 alpha,
   which reads as an ink outline traced round every letter rather than as light.
   Three wide, low-alpha layers do the same job as atmosphere instead.

   What made that safe to soften is upstream, in content.py: the two slides whose left
   third is a large bright field (the blank whiteboard, the ocean horizon) now carry
   SCRIM_PHOTO_SOFT, so the shadow is no longer the only thing standing between white
   type and a white background. */
.hero-photo .hero-eyebrow,
.hero-photo .hero-title,
.hero-photo .hero-subtitle {
    text-shadow:
        0 1px 14px rgba(9,14,26,.62),
        0 4px 30px rgba(9,14,26,.5),
        0 10px 60px rgba(9,14,26,.42);
}
/* The eyebrow is the one element a halo alone cannot rescue: small, tracked-out teal
   over a daylit window is unreadable with no scrim beneath it. It goes white HERE only
   — the accent stays the accent on every other hero and everywhere else on the site. */
.hero-photo .hero-eyebrow { color: #fff; font-weight: 800; letter-spacing: .16em; }
.hero-eyebrow {
    text-transform: uppercase; letter-spacing: .14em; font-size: .76rem;
    font-weight: 700; color: var(--accent); margin-bottom: 18px;
}
.hero-title { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 20px; }
.hero-subtitle { font-size: clamp(1.05rem, 2vw, 1.28rem); color: rgba(255,255,255,.86); max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* --- Home hero rotator ------------------------------------------------
   Slide 0 is the SECTION's own background-image, so there are only n-1 layers and
   returning to the first slide means every layer is off. That is what makes the whole
   thing degrade: with no JavaScript the section still paints slide 0 under the first
   copy panel, and nothing here is required for that to be a correct hero. */
.hero-rotator { position: relative; overflow: hidden; }
.hero-layers { position: absolute; inset: 0; }
.hero-layer {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity .9s ease-in-out;
}
.hero-layer.is-active { opacity: 1; }
/* The copy has to sit above the layers, and .hero-inner is the only positioned
   ancestor it can take a stacking context from. */
.hero-rotator .hero-inner { position: relative; z-index: 1; }

/* Grid-stacked, not absolutely positioned: every panel occupies the same cell, so the
   TALLEST one sets the hero's height once. Absolute positioning would collapse the
   height to the actions block and make the page jump on every slide change. */
.hero-copies { display: grid; }
.hero-copy {
    grid-area: 1 / 1;
    opacity: 0; visibility: hidden;
    transition: opacity .55s ease-in-out, visibility 0s linear .55s;
}
.hero-copy.is-active {
    opacity: 1; visibility: visible;
    transition: opacity .55s ease-in-out, visibility 0s;
}

.hero-dots { display: flex; gap: 10px; margin-top: 34px; flex-wrap: wrap; }
.hero-dot {
    width: 34px; height: 5px; padding: 0; border: 0; border-radius: 999px;
    background: rgba(255,255,255,.34);
    cursor: pointer; transition: background .25s ease, transform .25s ease;
    /* A 5px-tall control is far under the 24px minimum target size, so the hit area is
       extended with padding the eye never sees. */
    box-sizing: content-box;
    border-top: 10px solid transparent; border-bottom: 10px solid transparent;
    background-clip: content-box;
}
.hero-dot:hover { background: rgba(255,255,255,.62); background-clip: content-box; }
.hero-dot.is-active { background: var(--accent); background-clip: content-box; }
.hero-dot:focus-visible {
    outline: 2px solid #fff; outline-offset: 3px;
}

/* An auto-advancing hero is precisely what this preference is about. The timer is
   stopped in hero.js as well — stripping the transition alone would still move the
   content, just abruptly. */
@media (prefers-reduced-motion: reduce) {
    .hero-layer,
    .hero-copy { transition: none; }
}

/* --- Bands ----------------------------------------------------------- */
.band { padding: 76px 0; }
.band-alt { background: var(--paper-alt); }
.band-intro { padding: 56px 0 12px; }
.band-dark { background: var(--dark); color: rgba(255,255,255,.86); }
.band-dark h2, .band-dark h3 { color: #fff; }
.lede { font-size: 1.24rem; line-height: 1.6; color: var(--ink-soft); max-width: 68ch; }
.lede-sm { font-size: 1.08rem; color: var(--ink-soft); font-weight: 500; }
.section-title { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.section-sub { color: var(--ink-mute); max-width: 62ch; margin-bottom: 36px; }
.band-dark .section-sub { color: rgba(255,255,255,.68); }
.mini-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); margin-top: 22px; }
.footnote-inline { color: var(--ink-mute); font-size: .95rem; margin-top: 24px; max-width: 66ch; }

/* --- Practice cards -------------------------------------------------- */
/* Four practices, so two columns rather than three — three left the fourth card
   stranded alone on its own row at a third of the width. */
/* min(400px, 100%) — a bare 400px minimum cannot shrink below the track and
   overflows a 390px phone horizontally. */
.practice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 26px; }
.practice-card {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.practice-image { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
/* The body grows so every card's "in detail" link lands on the same baseline —
   otherwise the four links stagger by however long each summary happens to be. */
.practice-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.practice-cta { margin: auto 0 0; padding-top: 18px; }
.ticks { list-style: none; padding: 0; margin: 14px 0 0; }
.ticks li { position: relative; padding-left: 26px; margin-bottom: 9px; font-size: .95rem; color: var(--ink-soft); }
.ticks li::before {
    content: ""; position: absolute; left: 4px; top: .55em;
    width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}
.band-dark .ticks li { color: rgba(255,255,255,.8); }

/* --- Stats ----------------------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 34px; }
.stat-value { font-size: 2.6rem; font-weight: 700; color: var(--accent); margin: 0 0 8px; letter-spacing: -.02em; }
.stat-label { color: rgba(255,255,255,.74); font-size: .95rem; margin: 0; }

/* --- Markets --------------------------------------------------------- */
.market-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.market-card {
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    background: var(--paper); box-shadow: var(--shadow);
}
.market-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.market-body { padding: 22px 24px 26px; }
.text-link { font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

.market-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 52px; align-items: center; }
.market-detail.is-reversed .market-detail-media { order: 2; }
.market-detail-media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; object-fit: cover; }

/* --- Frameworks / callout -------------------------------------------- */
.framework-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-bottom: 40px; }
.framework-card { background: var(--dark-soft); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius); padding: 24px; }
.framework-role { color: var(--accent); font-size: .87rem; font-weight: 600; margin-bottom: 10px; }
.framework-card p { font-size: .95rem; color: rgba(255,255,255,.76); }
.callout { border-left: 4px solid var(--accent); padding: 22px 26px; border-radius: var(--radius-sm); background: var(--brand-lt); }
.callout-onDark { background: rgba(23,192,168,.09); }
.callout p { margin: 0; }

/* --- Glossary chips -------------------------------------------------- */
.glossary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.glossary-group h3 { font-size: .84rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
    background: var(--paper-alt); border: 1px solid var(--line); border-radius: 999px;
    padding: 6px 14px; font-size: .87rem; color: var(--ink-soft);
}
.chips-lg li { font-size: .95rem; padding: 9px 18px; }
.jump-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip-link {
    background: var(--brand-lt); border: 1px solid #c9d8ff; color: var(--brand-dk);
    border-radius: 999px; padding: 8px 16px; font-size: .9rem; font-weight: 600; text-decoration: none;
}
.chip-link:hover { background: #dbe6ff; }

/* --- Security ladders ------------------------------------------------ */
.ladder-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 44px; align-items: center; margin-bottom: 40px; }
.ladder-image { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; aspect-ratio: 9 / 5; object-fit: cover; }
.ladder-scope, .ladder-basis { font-size: .95rem; color: var(--ink-soft); margin-bottom: 6px; }
.level-list { list-style: none; counter-reset: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.level-item {
    display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 24px; align-items: start;
    background: var(--paper); border: 1px solid var(--line); border-left: 5px solid var(--brand);
    border-radius: var(--radius-sm); padding: 22px 26px; box-shadow: var(--shadow);
}
.tier-badge {
    display: inline-block; background: var(--brand); color: #fff; font-weight: 700;
    border-radius: 999px; padding: 7px 16px; font-size: .95rem; text-align: center;
    letter-spacing: .01em;
}
.level-body h3 { margin-bottom: 6px; font-size: 1.08rem; }
.level-body p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.practice-plain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.practice-plain p { color: rgba(255,255,255,.76); font-size: .96rem; }

/* --- CTA ------------------------------------------------------------- */
.band-cta { background: linear-gradient(120deg, var(--brand-dk) 0%, var(--brand) 60%, #2f6bf0 100%); color: #fff; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-inner h2 { margin-bottom: 6px; }
.cta-inner p { margin: 0; color: rgba(255,255,255,.86); }
.band-cta .btn-primary { background: #fff; color: var(--brand-dk); }
.band-cta .btn-primary:hover { background: #eaf0ff; }

/* --- Partner form ---------------------------------------------------- */
.partner-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 60px; align-items: start; }
.form-title { font-size: 1.7rem; }
.form-intro { color: var(--ink-mute); margin-bottom: 26px; }
.partner-form .field { margin-bottom: 20px; }
.partner-form label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: 7px; }
.req { color: var(--danger); margin-left: 3px; }
.partner-form input[type="text"],
.partner-form input[type="email"],
.partner-form select,
.partner-form textarea {
    width: 100%; padding: 12px 14px; font: inherit; font-size: .98rem; color: var(--ink);
    background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
}
.partner-form textarea { resize: vertical; min-height: 140px; }
.partner-form input:focus, .partner-form select:focus, .partner-form textarea:focus {
    border-color: var(--brand); outline: 3px solid rgba(31,79,216,.16); outline-offset: 0;
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); background: var(--danger-bg); }
.field-help { font-size: .85rem; color: var(--ink-mute); margin: 6px 0 0; }
.field-error { font-size: .88rem; color: var(--danger); font-weight: 600; margin: 7px 0 0; }
.form-error {
    background: var(--danger-bg); border: 1px solid #f3c2bd; border-left: 5px solid var(--danger);
    color: #7d1c16; border-radius: var(--radius-sm); padding: 16px 20px; margin-bottom: 26px;
}
.form-actions { margin-top: 30px; }
.form-note { font-size: .87rem; color: var(--ink-mute); margin: 12px 0 0; }
/* Honeypot. `display:none` (not off-screen positioning) so the field is out of the
   visual tree, the a11y tree AND the tab order — an off-screen input is still
   "visible" to assistive tech and to a keyboard user. Hidden inputs are still
   submitted, which is the whole point; it is never `required`, so it cannot block
   a submit. */
.hp-wrap { display: none; }

.confirmation {
    background: var(--ok-bg); border: 1px solid #b9e3d0; border-left: 5px solid var(--ok);
    border-radius: var(--radius); padding: 34px 36px;
}
.confirmation h2 { color: var(--ok); font-size: 1.5rem; }

.partner-aside { background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 32px; }
.aside-title { font-size: 1.12rem; margin-top: 26px; }
.aside-title:first-child { margin-top: 0; }
.engagement-list { list-style: none; padding: 0; margin: 0 0 10px; }
.engagement-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.engagement-list li:last-child { border-bottom: 0; }
.engagement-list h3 { font-size: 1rem; margin-bottom: 2px; }
.engagement-duration { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.engagement-list p { font-size: .93rem; color: var(--ink-soft); margin: 0; }

/* --- Footer ---------------------------------------------------------- */
.site-footer { background: var(--dark); color: rgba(255,255,255,.7); padding: 56px 0 30px; margin-top: 0; }
.footer-inner { display: flex; justify-content: space-between; gap: 34px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand .brand-name { color: #fff; font-size: 1.45rem; }
/* Both mark colours are dark by design and neither survives --dark: the whole mark
   goes white here so the lockup reads at speed. (Before the recolour the eye kept
   its --accent teal; a navy eye on near-black is simply not visible.) */
.footer-brand .brand-mark-triangle { stroke: #fff; }
.footer-brand .brand-mark-eye { stroke: #fff; }
.footer-brand .brand-mark-pupil { fill: #fff; }
.footer-brand p { margin: 6px 0 0; font-size: .95rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.footer-nav a { color: rgba(255,255,255,.78); text-decoration: none; font-size: .94rem; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.footer-legal { padding-top: 22px; }
.footer-legal p { font-size: .82rem; color: rgba(255,255,255,.5); margin: 0 0 6px; max-width: 90ch; }
.env-badge {
    display: inline-block; background: var(--accent); color: var(--dark);
    border-radius: 6px; padding: 3px 12px; font-weight: 700; font-size: .76rem !important;
    letter-spacing: .06em;
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
    .market-detail, .ladder-head, .partner-layout { grid-template-columns: 1fr; gap: 32px; }
    .market-detail.is-reversed .market-detail-media { order: 0; }
    .hero-inner { padding: 72px 24px 64px; }
    .band { padding: 56px 0; }
}
@media (max-width: 680px) {
    .header-inner { flex-wrap: wrap; min-height: 0; padding-top: 12px; padding-bottom: 12px; }
    .site-nav { order: 3; width: 100%; margin-left: 0; gap: 16px; }
    .header-portal { margin-left: auto; }
    .level-item { grid-template-columns: 1fr; gap: 12px; }
    .tier-badge { justify-self: start; }
    .cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}