:root {
  --bg: #F7F8FC;
  --surface: #FFFFFF;
  --surface-2: #F0F2F9;
  --surface-3: #E8EBF5;
  --blue: #1A3A8F;
  --blue-mid: #2554C7;
  --blue-light: #D6E0FB;
  --blue-pale: #EEF2FF;
  --blue-glow: rgba(37,84,199,0.15);
  --teal: #0B7285;
  --teal-light: #C3F0FA;
  --teal-pale: #F0FDFF;
  --gold: #B45309;
  --gold-light: #FEF3C7;
  --emerald: #047857;
  --emerald-light: #D1FAE5;
  --violet: #5B21B6;
  --violet-light: #EDE9FE;
  /* Darkened from the original #D97706 - at that value, .icon-blue's amber
     icon on --amber-light measured 2.86:1, under the 3:1 WCAG 2.2 AA minimum
     for graphical objects. */
  --amber: #A05A0A;
  --amber-light: #FEF3C7;
  --amber-pale: #FFFBEB;
  /* Darkened from the original #059669 - at that value, .dim-tags text on
     --sage-pale measured 3.58:1, under the 4.5:1 WCAG 2.2 AA minimum for
     text. */
  --sage: #046C5A;
  --sage-light: #D1FAE5;
  --sage-pale: #ECFDF5;
  --coral: #92400E;
  --coral-light: #FEF3C7;
  --coral-pale: #FFFBEB;
  --warm-gray: #78716C;
  --warm-gray-light: #F5F5F4;
  --text-1: #0D1B3E;
  --text-2: #2D3A5A;
  --text-3: #4B5E77;
  --text-4: #60738B;
  --border: #DDE2EF;
  --border-2: #C8CFE4;
  /* Form-control boundaries must reach 3:1 against both page backgrounds. */
  --control-border: #7A879D;
  --radius: 18px;
  --radius-sm: 10px;
  --trans: 0.24s cubic-bezier(0.4,0,0.2,1);
  --shadow-sm: 0 1px 4px rgba(13,27,62,0.07);
  --shadow-md: 0 4px 18px rgba(13,27,62,0.09);
  --shadow-lg: 0 12px 40px rgba(13,27,62,0.12);
  --shadow-xl: 0 24px 64px rgba(13,27,62,0.14);
}
/* ─── DARK MODE (Accessibility panel "Dark" option) ───
   accessibility-widget.js toggles html.a11y-mode-dark and sets a base
   background and colour on body and .section, .card, .doc-card, .action-card,
   but every component in this file reads its actual text colour from the
   text and accent tokens above, not from inherited body colour. Without
   redefining those tokens here, every heading and paragraph kept rendering
   its light-mode near-black colour on the new dark background - effectively
   unreadable (verified: --text-1 on the widget's dark background measured
   about 1.07:1, --text-2 about 1.61:1, both far under the WCAG 2.2 AA 4.5:1
   minimum for text). Redefining the tokens here means every existing rule
   that already uses var(--text-1) etc. picks up a compliant dark-mode value
   automatically, with no per-component changes needed. All pairs below are
   verified at 4.5:1 or higher for text, 3:1 or higher for icons and other
   graphical objects, against both --bg and --surface. */
html.a11y-mode-dark{
  --bg:#12161F;
  --surface:#1B212E;
  --surface-2:#232A3A;
  --surface-3:#2B3244;
  --text-1:#F4F6FB;
  --text-2:#D3D9E8;
  --text-3:#A9B3C7;
  --text-4:#838EA6;
  --border:#333C50;
  --border-2:#454F66;
  --control-border:#76839D;
  --blue:#9DB8F5;
  --blue-mid:#7DA2FF;
  --blue-light:#1E2C4D;
  --blue-pale:#171F35;
  --teal:#6FD6E8;
  --teal-light:#123138;
  --teal-pale:#0F272C;
  --gold:#F0B429;
  --gold-light:#3A2C0E;
  --emerald:#34D399;
  --emerald-light:#0F3D2C;
  --violet:#B4A6F5;
  --violet-light:#241D45;
  --amber:#F0B429;
  --amber-light:#3A2C0E;
  --amber-pale:#241C09;
  --sage:#4ADE94;
  --sage-light:#0F3324;
  --sage-pale:#0C2A1D;
  --coral:#FDBA74;
  --coral-light:#3D2712;
  --coral-pale:#291A0C;
  --warm-gray:#AEB7CC;
  --warm-gray-light:#232A3A;
}
/* A few components set translucent white directly (glass/blur effects) rather
   than reading a token, so redefining the tokens above does not reach them.
   Same 4.5:1 text / 3:1 UI verification as the token block above, checked
   against whatever sits behind each: the dark --bg/--surface page background
   or (for the nav) the sticky bar's own blurred backdrop. */
html.a11y-mode-dark .navbar{background:rgba(18,22,31,0.9);}
html.a11y-mode-dark .navbar.scrolled{background:rgba(27,33,46,0.97);}
@media(max-width:1250px){
  html.a11y-mode-dark .nav-links{background:rgba(27,33,46,0.97);}
}
/* The hero's bottom wave is an inline SVG with a literal fill="#FFFFFF" -
   meant to match the light section it flows into, not a fixed design choice
   - so in dark mode it needs to match that section's new, dark background
   instead, or it reads as a stray white bar. */
html.a11y-mode-dark .hero-wave svg path{fill:var(--bg);}

/* Framework Library's frosted-glass cards: same reasoning as above, redone
   in dark-appropriate tones (--surface/--border/--blue-mid at their dark
   values) rather than fixed light-mode whites, so .doc-body h3/p - which do
   read var(--text-1)/var(--text-2) - land on a card that is actually dark
   instead of a translucent white one their now-light text would disappear
   into. */
html.a11y-mode-dark .library-section{
  background:radial-gradient(circle at top left,rgba(125,162,255,.10),transparent 30%),radial-gradient(circle at top right,rgba(111,214,232,.08),transparent 28%),linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
}
html.a11y-mode-dark .library-section::before{
  background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 24%,transparent 76%,rgba(255,255,255,.03));
}
html.a11y-mode-dark .doc-card{background:rgba(27,33,46,.85);border-color:rgba(69,79,102,.9);}
html.a11y-mode-dark .doc-card::before{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(125,162,255,.16));}
html.a11y-mode-dark .doc-cover-frame{background:var(--surface-2);}
html.a11y-mode-dark .meta-chip{background:rgba(43,50,68,.9);border-color:rgba(69,79,102,.95);}
html.a11y-mode-dark .doc-btn-ghost{background:rgba(43,50,68,.85);border-color:rgba(69,79,102,.95);}
html.a11y-mode-dark .doc-btn-ghost:hover{background:rgba(23,31,53,.95);}
html.a11y-mode-dark .doc-btn-audio{background:rgba(43,50,68,.9);border-color:rgba(125,162,255,.25);}
html.a11y-mode-dark .doc-btn-audio:hover{background:rgba(23,31,53,1);}
html.a11y-mode-dark .audio-player-inline{background:linear-gradient(180deg,rgba(23,31,53,.9),rgba(27,33,46,.85));border-color:rgba(69,79,102,.9);}
html.a11y-mode-dark .audio-progress-bar{background:rgba(43,50,68,.9);border-color:rgba(69,79,102,.9);}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:'Sora',sans-serif;background:var(--bg);color:var(--text-1);overflow-x:hidden;line-height:1.65;}
h1,h2,h3,h4{font-family:'Lora',serif;line-height:1.2;}

/* Justified body copy, inherited from the original static site. It works for
   long-form prose in a wide measure, where a line holds enough words to absorb
   the extra space.

   It fails badly everywhere else. Justification stretches the gaps between
   words until the line reaches both edges, so a short sentence in a narrow or
   centred column comes out as "Ministry    of    Information    Technology" -
   one rule, one defect, in every such block. The exceptions below are the
   layouts where that happens; they are switched back to normal alignment
   rather than patched word by word.

   hyphens is reset with them: automatic hyphenation exists to give justified
   text somewhere to break, and once the text is no longer justified it only
   introduces stray hyphens. */
p{text-align:justify;hyphens:auto;}

/* .section-desc   the single-sentence description under a section heading
                   ("Meet the experts driving Mauritius' AI strategy...").
                   Capped at 600px, so its lines are always short.
   .page-subtitle  centred inside .page-header - the blanket rule above was
                   silently overriding that text-align:center.
   .contact-block  address, phone and email sit in the narrow left column of
                   .contact-grid, less an icon: the tightest measure on the
                   site, and the worst affected. */
.section-desc,
.contact-block p{text-align:left;hyphens:manual;}

.page-subtitle{text-align:center;hyphens:manual;}
/* Headings are split into a plain half and an <em> half ("Driving Mauritius" /
   "AI Future"). The em used to be forced to --blue-mid, which made every such
   heading two-tone. `inherit` collapses each one to a single colour by taking
   whatever its heading already uses: near-black on the light sections, white
   on the dark ones - so the same rule covers both cases and any section added
   later. The italic is kept; only the colour split is removed. */
h1 em,h2 em{font-style:italic;color:inherit;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
ul{list-style:none;}
button{font-family:'Sora',sans-serif;}
.container{max-width:1180px;margin:0 auto;padding:0 28px;}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--blue-mid);border-radius:3px;}
/* ─── KEYBOARD FOCUS ───────────────────────────────────────────────────────
   The site-wide default: a 3px ring held 2px clear of the control, so it reads
   as a ring around the component rather than as part of its border. Both
   exceed the 2px minimum.

   --blue-mid measures 6.24:1 on the page background, 6.62:1 on white and
   5.92:1 on the tinted surfaces - comfortably past the 3:1 that WCAG 1.4.11
   asks of a non-text indicator, so the existing token is used everywhere the
   control sits on a light surface. The one place it does not work is the DIVA
   panel header, handled separately below.

   :focus-visible, not :focus, so a ring appears for keyboard and programmatic
   focus without framing every button the moment it is clicked. */
:focus-visible{outline:3px solid var(--blue-mid);outline-offset:2px;border-radius:4px;}

/* The rule above is a bare pseudo-class, so ANY component rule that also sets
   outline overrides it simply by being more specific or later in the file -
   which is exactly how the DIVA trigger lost its ring to `all:unset` plus an
   `outline:none !important`. Naming these controls explicitly puts them out of
   reach of that: each selector here carries a class, so it outranks the
   component rule it belongs to and cannot be silently undone again. */
.diva-trigger:focus-visible,
.diva-close:focus-visible,
.diva-clear:focus-visible,
.diva-suggestion-btn:focus-visible,
.diva-input-row input:focus-visible,
.diva-mic:focus-visible,
.diva-send:focus-visible,
.diva-speak:focus-visible,
.diva-read-aloud:focus-visible,
.hamburger:focus-visible,
.nav-right .a11y-trigger-wrap:focus-visible,
.simple-toggle:focus-visible,
.nav-link:focus-visible,
.team-tab:focus-visible,
.doc-btn:focus-visible,
.btn-booklet:focus-visible,
.btn-sm:focus-visible{
  outline:3px solid var(--blue-mid);
  outline-offset:2px;
}

/* Close and Clear sit on the panel's blue-to-teal header, where the blue token
   drops to 1.55:1 against the gradient's light end and 1.19:1 against its dark
   end - invisible. White measures 10.27:1 and 5.59:1 across the same gradient,
   so the ring inverts here rather than disappearing. */
.diva-close:focus-visible,
.diva-clear:focus-visible{
  outline-color:#fff;
}

/* ─── SKIP LINK ─── */
.skip-link{position:absolute;top:-40px;left:16px;background:var(--blue);color:white;padding:8px 16px;border-radius:8px;font-size:0.875rem;font-weight:600;z-index:9999;transition:top 0.2s;}
.skip-link:focus{top:16px;}

/* ─── TWEMOJI ───
   Twemoji replaces each emoji with <img class="emoji" ...>. Left unstyled it
   arrives at its natural 72px and blows the line apart, so it is pinned to the
   surrounding text size.

   1em square: the image scales with whatever font-size it sits in, so the same
   rule works in a heading, a button and body copy.
   vertical-align:-0.1em drops it onto the text baseline instead of the
   bottom of the line box, which is where an inline image otherwise sits.
   The asymmetric margin reproduces the side bearing a real glyph would have
   had, so surrounding words keep their spacing.
   display:inline-block keeps the box from affecting line-height.

   Because the size is relative and the box is exactly 1em, the substitution
   causes no reflow: the image occupies the space the character did. */
img.emoji{
  height:1em;
  width:1em;
  margin:0 .05em 0 .1em;
  vertical-align:-0.1em;
  display:inline-block;
}

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

/* ─── SIMPLE LANGUAGE: TIME-SAVINGS NOTE ───
   Visually hidden (see .visually-hidden) - present for screen readers only,
   not shown next to the toggle on screen. */



/* ─── LANGUAGE BAR ─── */
.lang-bar{background:var(--blue);color:rgba(255,255,255,0.85);font-size:0.75rem;padding:6px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.lang-bar-left{display:flex;align-items:center;gap:10px;}
.lang-bar-right{display:flex;align-items:center;gap:10px;}
.lang-btn{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);color:white;padding:3px 10px;border-radius:100px;font-size:0.72rem;font-weight:600;cursor:pointer;transition:background var(--trans);font-family:'Sora',sans-serif;}
.lang-btn:hover,.lang-btn.active{background:rgba(255,255,255,0.3);}
.lang-bar a{color:rgba(255,255,255,0.8);font-size:0.75rem;transition:color var(--trans);}
.lang-bar a:hover{color:white;}

/* ─── NAVBAR ─── */
.navbar{position:sticky;top:0;left:0;right:0;z-index:1000;background:rgba(247,248,252,0.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:box-shadow var(--trans),background var(--trans);}
.navbar.scrolled{background:rgba(255,255,255,0.97);box-shadow:var(--shadow-md);}
/* The header row carries more than the 1180px content container can hold:
   logo + six links + two utility controls measured 1225px against 1124px of
   usable width, so it escaped the container at every desktop width and
   clipped the accessibility trigger below about 1330px. The row is trimmed
   below and given its own slightly wider ceiling. 1280px, not more, so the
   header still reads as aligned with the page beneath it. */
.nav-inner{max-width:1280px;margin:0 auto;padding:0 28px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.nav-logo-img{width:75px;height:75px;object-fit:contain;}
.logo-text-wrap{display:flex;flex-direction:column;line-height:1.1;}
.logo-main{font-family:'Lora',serif;font-size:1.1rem;font-weight:700;color:var(--text-1);}
.logo-sub{font-size:0.75rem;font-weight:500;color:var(--text-3);letter-spacing:0.04em;}
.nav-links{display:flex;align-items:center;gap:0;}
.nav-link{padding:7px 11px;font-size:0.845rem;font-weight:500;color:var(--text-2);border-radius:8px;transition:all var(--trans);white-space:nowrap;cursor:pointer;}
/* [aria-current="page"] marks a whole-page nav target (Highlights); .active
   is set by the homepage scroll spy. Both render identically. */
.nav-link:hover,.nav-link.active,.nav-link[aria-current="page"]{color:var(--blue-mid);background:var(--blue-pale);}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.btn-search{background:none;border:1px solid var(--border);color:var(--text-3);padding:0 12px;height:36px;border-radius:100px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all var(--trans);font-size:0.8rem;font-weight:500;}
.btn-search span{color:var(--text-3);}
.btn-search:hover{border-color:var(--blue-mid);color:var(--blue-mid);background:var(--blue-pale);}
.btn-search:hover span{color:var(--blue-mid);}
.simple-toggle{background:var(--surface);border:1px solid var(--blue-light);color:var(--blue);padding:0 12px;min-height:44px;border-radius:100px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all var(--trans);font-size:0.82rem;font-weight:700;font-family:'Sora',sans-serif;box-shadow:var(--shadow-sm);}
.simple-toggle svg{flex-shrink:0;}
.simple-toggle span{color:inherit;display:inline;}
.simple-toggle:hover{border-color:var(--blue-mid);color:var(--blue-mid);background:var(--blue-pale);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.simple-toggle[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:white;box-shadow:0 8px 20px rgba(26,58,143,0.24);}
.simple-toggle[aria-pressed="true"] span{color:white;}
/* The accessibility trigger is injected into .nav-right by
   accessibility-widget.js, which also injects its own stylesheet - and that
   arrives after this file, so an equally specific rule here would lose. The
   widget sizes it at height:36px, and 38px wide once the label is dropped
   below 900px; both are under the 44x44 target.
   .nav-right + two classes outranks the widget's two-class rule, so the size
   is corrected from here without editing the widget itself. */
.nav-right .a11y-trigger-wrap.a11y-trigger-navbar{
  height:auto;
  min-height:44px;
  min-width:44px;
  justify-content:center;
}

/* 44x44 rather than the 34x28 the 6px padding used to give it. The three bars
   are still 22px wide and 5px apart - only the hit area grew, so the icon looks
   identical while becoming a comfortable touch target. The rotate transforms
   below still use the same 7px offset (5px gap + 2px bar), so the X animation
   is unaffected. Set on the base rule because the button only ever appears
   below 1250px, where it is always a touch target. */
.hamburger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:0;width:44px;height:44px;}
.hamburger span{display:block;width:22px;height:2px;background:var(--text-1);border-radius:2px;transition:all var(--trans);}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ─── HERO ─── */
.hero{
    position:relative;
    min-height:calc(100vh - 100px);
    display:flex;
    align-items:center;
    overflow:hidden;
    background:linear-gradient(140deg,#1A3A8F 0%,#12295e 60%,#0B7285 100%);
}

.hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
	transform: scaleX(-1);
}

.hero-video.is-unavailable{
    display:none;
}

.hero-video-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(
        0deg,
        rgba(8,15,38,.82) 0%,
        rgba(8,15,38,.55) 35%,
        rgba(8,15,38,.35) 65%,
        rgba(8,15,38,.50) 100%
    );
}

.hero-inner{
    position:relative;
    z-index:2;
    max-width:1180px;
    margin:0 auto;
    padding:60px 28px 84px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
    width:100%;
    flex-wrap:wrap;
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:560px;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 14px 6px 10px;
    border:1px solid rgba(255,255,255,.30);
    border-radius:100px;
    font-size:.76rem;
    font-weight:600;
    color:#fff;
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(6px);
    margin-bottom:20px;
}

.badge-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#5EEAD4;
    animation:pulseDot 2s infinite;
}

@keyframes pulseDot{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.4;transform:scale(.7)}
}

.hero-title{
    font-family:'Lora',serif;
    font-size:clamp(2rem,4.4vw,3.2rem);
    font-weight:700;
    color:#fff;
    letter-spacing:-.02em;
    margin-bottom:16px;
    line-height:1.12;
    animation:fadeUp .8s .08s ease both;
}

/* Needs its own reset: this selector is more specific than the `h1 em, h2 em`
   rule above, so it would keep the hero's "Intelligence" cyan while every
   other heading unified. The hero title is white, so the em inherits white. */
.hero-title em{
    color:inherit;
    font-style:italic;
}

.hero-subtitle{
    font-size:1rem;
    color:rgba(255,255,255,.82);
    line-height:1.7;
    margin-bottom:28px;
    max-width:440px;
    animation:fadeUp .9s .16s ease both;
}

.hero-cta{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    animation:fadeUp 1s .24s ease both;
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 26px;
    background:#2554C7;
    color:#fff;
    border:1px solid #2554C7;
    border-radius:100px;
    font-weight:600;
    font-size:.9rem;
    cursor:pointer;
    transition:all var(--trans);
    box-shadow:0 4px 20px rgba(0,0,0,.25);
}

.btn-primary:hover{
    background:#fff;
    color:#2554C7;
    transform:translateY(-2px);
}

.btn-ghost{
    display:inline-flex;
    align-items:center;
    padding:13px 26px;
    border:1.5px solid rgba(255,255,255,.40);
    color:#fff;
    border-radius:100px;
    font-weight:500;
    font-size:.9rem;
    cursor:pointer;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(8px);
    transition:all var(--trans);
}

.btn-ghost:hover{
    border-color:#fff;
    background:rgba(255,255,255,.18);
    color:#fff;
}

/* ─── Back to homepage ───
   A quiet, light-surface counterpart to .btn-ghost (which is white-on-dark for
   the homepage's video hero and unreadable on a white page).

   Defined here in the shared stylesheet rather than in each page's own CSS so
   the Highlights and AI Lab pages cannot drift into two different back
   buttons - both load style.css, so both get this one definition.

   Sized below .btn-primary deliberately: it is a way back, not the page's
   call to action, and must not compete with the main heading. */
.btn-back{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    gap:8px;
    padding:8px 16px 8px 13px;
    background:var(--surface);
    color:var(--text-2);
    border:1px solid var(--border);
    border-radius:100px;
    font-family:'Sora',sans-serif;
    font-size:0.82rem;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
    transition:all var(--trans);
}

.btn-back:hover{
    border-color:var(--blue-mid);
    color:var(--blue-mid);
    background:var(--blue-pale);
}

/* Nudges toward the arrow's direction on hover - a small confirmation of where
   the link goes, and it stays still under prefers-reduced-motion below. */
.btn-back svg{flex-shrink:0;transition:transform var(--trans);}
.btn-back:hover svg{transform:translateX(-2px);}



.hero-wave{
    position:absolute;
    bottom:-1px;
    left:0;
    right:0;
    z-index:3;
}

.hero-wave svg{
    display:block;
    width:100%;
}

/* ─── SECTION BASE ─── */
.section{padding:96px 0;}
.section-eyebrow{font-size:0.75rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue-mid);margin-bottom:12px;}
.section-title{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:700;color:var(--text-1);letter-spacing:-0.02em;margin-bottom:16px;}
.section-desc{font-size:1.02rem;color:var(--text-2);line-height:1.78;max-width:600px;margin-bottom:56px;}
.doc-instructions{font-size:0.85rem;color:var(--text-3);line-height:1.6;max-width:640px;margin-top:-40px;margin-bottom:40px;}

/* ─── ABOUT ─── */
.about-section{background:linear-gradient(180deg,var(--surface) 0%,var(--amber-pale) 100%);}

/* ─── AI LAB (compact homepage promo) ───
   Bridges About (ends on --amber-pale) and Framework (opens on --bg), so the
   three read as one continuous run rather than three stacked bands. Padding is
   deliberately 56px against the section default of 96px: this is a short
   pointer to /ai-lab, not a full section. */
.ailab-section{padding:56px 0;background:linear-gradient(180deg,var(--amber-pale) 0%,var(--bg) 100%);}
.ailab-promo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px 36px;box-shadow:var(--shadow-sm);transition:box-shadow var(--trans),border-color var(--trans);}
.ailab-promo:hover{border-color:var(--blue-light);box-shadow:var(--shadow-md);}
/* Smaller than a full .section-title - this heading sits inside a card. */
.ailab-promo-title{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:12px;}
.ailab-promo-desc{font-size:0.96rem;color:var(--text-2);line-height:1.75;margin-bottom:16px;max-width:56ch;}
.ailab-promo-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;}
.ailab-promo-tags li{padding:4px 12px;background:var(--blue-pale);border:1px solid var(--blue-light);border-radius:100px;font-size:0.74rem;font-weight:600;color:var(--blue);}
.ailab-promo-action{display:flex;flex-direction:column;align-items:flex-start;gap:10px;flex-shrink:0;}
.ailab-promo-note{font-size:0.78rem;color:var(--text-3);margin:0;}
/* Launch flag - one line above the eyebrow inside the existing promo card.
   Uses --blue on --blue-pale (the same pairing as .ailab-promo-tags) so it
   reads as part of the card rather than a separate banner. */
.ailab-launch-flag{display:inline-flex;align-items:center;gap:7px;margin:0 0 10px;padding:4px 12px;background:var(--blue-pale);border:1px solid var(--blue-light);border-radius:100px;font-size:0.74rem;font-weight:700;letter-spacing:0.02em;color:var(--blue);}
.ailab-launch-dot{width:6px;height:6px;border-radius:50%;background:var(--blue-mid);flex-shrink:0;}

@media(max-width:900px){
    /* Stack before the button column gets squeezed narrower than its label. */
    .ailab-promo{grid-template-columns:1fr;gap:24px;padding:28px 24px;}
    .ailab-promo-action{align-items:stretch;}
    .ailab-promo-action .btn-primary{justify-content:center;}
    .ailab-promo-note{text-align:center;}
}

@media(max-width:480px){
    .ailab-section{padding:44px 0;}
    .ailab-promo{padding:24px 18px;}
}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.about-right{display:flex;flex-direction:column;gap:20px;}
.card{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);padding:28px;position:relative;overflow:hidden;transition:all var(--trans);box-shadow:var(--shadow-sm);}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-2);}
.card-accent{position:absolute;top:0;left:0;width:4px;height:100%;border-radius:2px 0 0 2px;}
.accent-blue{background:var(--amber);}
.accent-teal{background:var(--teal);}
.accent-gold{background:var(--coral);}
.card-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.icon-blue{background:var(--amber-light);color:var(--amber);}
.icon-teal{background:var(--teal-light);color:var(--teal);}
.icon-gold{background:var(--coral-light);color:var(--coral);}
.card h3{font-size:1.05rem;font-weight:600;color:var(--text-1);margin-bottom:8px;}
.card p{font-size:0.9rem;color:var(--text-2);line-height:1.7;}
.objectives-list{list-style:none;display:flex;flex-direction:column;gap:6px;padding-left:0;}
.objectives-list li{font-size:0.875rem;color:var(--text-2);display:flex;align-items:center;gap:8px;}
.objectives-list li::before{content:'';flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--blue-mid);}
.about-mission-text{font-size:1.1rem;font-family:'Lora',serif;font-style:italic;color:var(--text-1);line-height:1.75;margin-bottom:24px;padding-left:20px;border-left:3px solid var(--blue-mid);}
.about-body{font-size:1rem;color:var(--text-2);line-height:1.78;margin-bottom:20px;}
.diva-callout{background:linear-gradient(135deg,var(--sage-pale),var(--teal-pale));border:1.5px solid var(--sage-light);border-radius:var(--radius);padding:24px;display:flex;gap:16px;align-items:flex-start;margin-top:32px;}
.diva-icon{width:75px;height:75px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;padding:0;overflow:hidden;}
.diva-icon img{width:100%;height:100%;object-fit:contain;}
.diva-callout h3{font-size:0.95rem;font-weight:700;color:var(--blue);margin-bottom:4px;font-family:'Sora',sans-serif;}
.diva-callout p{font-size:0.84rem;color:var(--text-2);line-height:1.65;}
.diva-callout .btn-sm{display:inline-flex;align-items:center;min-height:44px;gap:5px;padding:6px 14px;background:var(--blue);color:white;border-radius:100px;font-size:0.78rem;font-weight:600;cursor:pointer;border:none;margin-top:10px;transition:all var(--trans);}
.diva-callout .btn-sm:hover{background:var(--blue-mid);}

/* ─── FRAMEWORK ─── */
.framework-section{background:linear-gradient(180deg,var(--bg) 0%,var(--sage-pale) 100%);}
.dimensions-list{display:flex;flex-direction:column;gap:28px;margin-bottom:56px;}
.dimension-item{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:28px 28px 32px;}
.dimension-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;}
.dim-index{font-family:'Lora',serif;font-size:clamp(2.4rem,1.9rem + 2vw,3.6rem);font-weight:700;line-height:0.85;letter-spacing:-0.02em;color:transparent;-webkit-text-stroke:1.5px var(--blue-mid);user-select:none;}
.dim-title{font-family:'Lora',serif;font-size:1.3rem;font-weight:700;color:var(--text-1);line-height:1.3;margin-bottom:12px;}
.dimension-content p{font-size:0.93rem;color:var(--text-2);line-height:1.75;margin-bottom:14px;}
.dim-tags{display:flex;flex-wrap:wrap;gap:8px;}
.dim-tags span{padding:4px 12px;background:var(--sage-pale);border:1px solid var(--sage-light);border-radius:100px;font-size:0.75rem;font-weight:600;color:var(--sage);}
@media(max-width:640px){.dimension-grid{grid-template-columns:1fr;gap:6px;}.dim-index{font-size:2.2rem;}}

/* ─── AI IN ACTION ─── */
.action-section{background:linear-gradient(180deg,var(--surface) 0%,#FFF8F0 100%);}
.action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;}
.action-card{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);padding:28px;transition:all var(--trans);box-shadow:var(--shadow-sm);}
.action-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-2);}
.action-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:100px;font-size:0.72rem;font-weight:700;margin-bottom:14px;}
.chip-blue{background:var(--blue-light);color:var(--blue);}
.chip-teal{background:var(--teal-light);color:var(--teal);}
.action-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.action-card h3{font-size:1.05rem;font-weight:600;margin-bottom:8px;}
.action-card p{font-size:0.875rem;color:var(--text-2);line-height:1.7;margin-bottom:16px;}
.action-description{font-size:0.85rem;color:var(--text-2);margin-bottom:20px;padding-top:4px;border-top:1px dashed var(--border);}
.video-list{margin-top:20px;display:flex;flex-direction:column;gap:10px;}
.video-item{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--surface-2);border-radius:12px;cursor:pointer;transition:background var(--trans);}
.video-item:hover{background:var(--blue-pale);}
.video-icon{width:32px;height:32px;background:var(--blue-light);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:12px;}
.ai-for-all-box{background:#EFF6FF;border-radius:16px;padding:16px;margin-bottom:16px;transition:all 0.2s ease;}
.ai-for-all-box:last-child{margin-bottom:0;}
.ai-for-all-box strong{display:block;margin-bottom:4px;font-size:0.9rem;}
.ai-for-all-box em{font-size:0.8rem;color:var(--text-3);display:block;margin-bottom:12px;}
/* text-decoration:none because the two "AI for All" controls are <a> elements,
   not <button>s - without it they would render underlined. Everything else
   here is unchanged, so the pill looks exactly as it did. */
.btn-redesign{display:inline-flex;align-items:center;gap:6px;min-height:44px;background:white;border:1.5px solid var(--blue-mid);color:var(--blue-mid);padding:8px 18px;border-radius:40px;font-weight:600;font-size:0.8rem;font-family:'Sora',sans-serif;text-decoration:none;cursor:pointer;transition:all 0.2s ease;}
.btn-redesign:hover{background:var(--blue-mid);color:white;transform:translateY(-2px);box-shadow:var(--shadow-sm);}
@media(max-width:768px){.action-grid{grid-template-columns:1fr;}}

/* ─── MARKETPLACE TICKER (between AI in Action and Marketplace sections) ─── */
.marketplace-wave-top{
	display:block;
	margin-bottom:-40px;
    position:relative;
    margin:0;
    padding:0;
    line-height:0;
    overflow:hidden;
	background:transparent;
}

.marketplace-wave-top svg{
    display:block;
	vertical-align:bottom;
    width:100%;
    height:85px;
    margin:0;
    padding:0;
	margin-bottom:-2px;
}

.marketplace-ticker-text{
    font-family:'Sora',sans-serif;
    font-size:14px;
    font-weight:700;
    letter-spacing:.04em;
    dominant-baseline:middle;
    text-anchor:start;
}

/* ─── MARKETPLACE ─── */
.marketplace-section{
    position:relative;
    overflow:hidden;
    margin-top:-2px;
    padding:70px 0 80px;   /* slightly smaller top padding */
    /* Two layers, top-most first.
       The wave above is a single flat SVG fill (#284773) spanning the full
       width, but the 135deg gradient below runs toward the bottom-right, so
       along the section's top edge it has already shifted toward #2C4A96 -
       progressively more so the wider the viewport. Flat colour meeting a
       horizontally-varying one drew a hard seam right under the ticker.
       The first layer restates that flat colour edge-to-edge at the join and
       fades it out vertically, so the wave dissolves into the diagonal
       gradient instead of butting against it. Percentages, not pixels, keep
       the blend proportional as the section reflows. */
    background:
        linear-gradient(
            180deg,
            #284773 0%,
            rgba(40,71,115,0.72) 26%,
            rgba(40,71,115,0) 58%
        ),
        linear-gradient(
            135deg,
            #284773 0%,
            #2C4A96 45%,
            #236C9A 100%
        );
}

.marketplace-section::before{
    content:'';
    position:absolute;
    inset:0;
    background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.07)'/%3E%3C/svg%3E");
}

.marketplace-inner{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}
.marketplace-text{color:white;}
.marketplace-text .section-eyebrow{color:rgba(255,255,255,0.7);}
.marketplace-text .section-title{color:white;margin-bottom:16px;}
.marketplace-text p{color:rgba(255,255,255,0.8);font-size:1rem;line-height:1.8;margin-bottom:28px;}
.marketplace-cards{display:flex;flex-direction:column;gap:14px;}
.mkt-card{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);border-radius:14px;padding:18px 22px;display:flex;align-items:center;gap:16px;backdrop-filter:blur(10px);transition:all var(--trans);cursor:pointer;}
.mkt-card:hover{background:rgba(255,255,255,0.18);transform:translateX(4px);}
.mkt-card-icon{width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;color:white;flex-shrink:0;}
.mkt-card h3{font-size:0.92rem;font-weight:600;color:white;margin-bottom:3px;font-family:'Sora',sans-serif;}
.mkt-card p{font-size:0.8rem;color:rgba(255,255,255,0.7);}
.btn-white{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;background:white;color:var(--blue);border-radius:100px;font-weight:700;font-size:0.95rem;cursor:pointer;border:none;transition:all var(--trans);box-shadow:0 4px 20px rgba(0,0,0,0.15);}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,0.2);}
.btn-outline-white{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;background:transparent;color:white;border:1.5px solid rgba(255,255,255,0.4);border-radius:100px;font-weight:600;font-size:0.95rem;cursor:pointer;transition:all var(--trans);}
.btn-outline-white:hover{background:rgba(255,255,255,0.1);border-color:white;}

/* ─── STRATEGY / LIBRARY ─── */
.library-section{position:relative;overflow:hidden;background:radial-gradient(circle at top left,rgba(37,84,199,.10),transparent 30%),radial-gradient(circle at top right,rgba(11,114,133,.08),transparent 28%),linear-gradient(180deg,var(--surface) 0%,#f4f7ff 100%);}
.library-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.26),transparent 24%,transparent 76%,rgba(255,255,255,.12));opacity:.7;}
.doc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px;}
@media(max-width:900px){.doc-grid{grid-template-columns:1fr;}}
.doc-card{position:relative;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.72);border:1px solid rgba(221,226,239,.9);box-shadow:0 14px 40px rgba(13,27,62,.10);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;isolation:isolate;}
.doc-card::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(37,84,199,.12));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.9;}
.doc-card:hover{transform:translateY(-8px);box-shadow:0 22px 60px rgba(13,27,62,.16);border-color:rgba(37,84,199,.24);}
.doc-cover{padding:16px 16px 0;display:flex;justify-content:center;align-items:center;background:transparent;} 
.doc-cover-frame{width:150%;max-width:300px;border-radius:12px;overflow:hidden;background:#eef3ff;box-shadow:0 8px 18px rgba(20,30,60,.08);transition:.3s ease;} 
.doc-card:hover .doc-cover-frame{transform:translateY(-2px);} 
.doc-cover-frame img{width:100%;height:auto;display:block;object-fit:contain;} 
.doc-badge{position:absolute;top:12px;left:12px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(26,58,143,.88);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 8px 18px rgba(26,58,143,.24);}
.doc-body{padding:12px 18px 18px;display:flex;flex-direction:column;flex:1;}
.doc-kicker{display:inline-flex;align-items:center;width:max-content;margin-bottom:10px;padding:5px 10px;border-radius:999px;background:rgba(37,84,199,.08);color:var(--blue-mid);font-size:.72rem;font-weight:700;letter-spacing:.08em;}
.doc-body h3{font-size:0.98rem;line-height:1.25;font-weight:800;color:var(--text-1);margin-bottom:8px;letter-spacing:-.02em;}
.doc-body p{font-size:.80rem;line-height:1.62;color:var(--text-2);margin-bottom:12px;flex:1;}
.doc-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.meta-chip{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid rgba(201,207,224,.95);color:var(--text-3);font-size:.72rem;font-weight:700;white-space:nowrap;}
.doc-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px;}
.doc-btn{appearance:none;border:none;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;font-size:.78rem;font-weight:700;cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease,color .22s ease;white-space:nowrap;}
.doc-btn svg{flex-shrink:0;}
.doc-btn-primary{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-mid) 100%);color:#fff;box-shadow:0 10px 24px rgba(26,58,143,.22);}
.doc-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(26,58,143,.30);}
.doc-btn-ghost{background:rgba(255,255,255,.82);border:1px solid rgba(201,207,224,.95);color:var(--text-2);}
.doc-btn-ghost:hover{transform:translateY(-2px);border-color:rgba(37,84,199,.35);color:var(--blue-mid);background:rgba(238,242,255,.95);}
.doc-btn-audio{background:rgba(255,255,255,.9);border:1px solid rgba(37,84,199,.18);color:var(--blue-mid);}
.doc-btn-audio:hover{transform:translateY(-2px);border-color:rgba(37,84,199,.35);background:rgba(238,242,255,1);}
.audio-player-inline{margin-top:auto;padding:14px;border-radius:18px;background:linear-gradient(180deg,rgba(238,242,255,.95),rgba(255,255,255,.9));border:1px solid rgba(201,207,224,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.75);}
.audio-time-row{display:flex;justify-content:space-between;gap:10px;font-size:.76rem;font-weight:700;color:var(--blue);margin-bottom:10px;}
.audio-progress-bar{width:100%;height:14px;padding:2px;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid rgba(201,207,224,.9);overflow:hidden;}
.audio-progress-fill{position:relative;width:0%;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue) 0%,var(--blue-mid) 100%);transition:width .2s linear;}
.audio-progress-thumb{position:absolute;right:-7px;top:50%;width:16px;height:16px;border-radius:50%;transform:translateY(-50%);background:#fff;border:3px solid var(--blue);box-shadow:0 4px 12px rgba(13,27,62,.18);}
.doc-card:hover .audio-progress-bar{border-color:rgba(37,84,199,.22);}
@media(max-width:640px){.doc-cover-frame{width:55%;max-width:150px;}}
.doc-actions{grid-template-columns:1fr;}.audio-time-row{font-size:.72rem;}

/* ─── FOUNDATIONAL PRINCIPLES ─── */
.principles-section{background:var(--bg);padding:96px 0;position:relative;overflow:hidden;}
.principles-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 10% 60%,rgba(37,84,199,0.05) 0%,transparent 55%),radial-gradient(ellipse at 90% 30%,rgba(11,114,133,0.05) 0%,transparent 55%);pointer-events:none;}
.principles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:8px;}
.principle-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:32px;position:relative;overflow:hidden;transition:all var(--trans);box-shadow:var(--shadow-sm);cursor:default;}
.principle-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--amber),var(--coral));transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease;}
.principle-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--blue-light);}
.principle-card:hover::before{transform:scaleX(1);}
.principle-card-head{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.principle-icon-wrap{width:60px;height:60px;border-radius:16px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--bg);transition:all var(--trans);color:var(--amber);}
.principle-card:hover .principle-icon-wrap{background:var(--amber-pale);border-color:var(--amber);}
.principle-title{font-family:'Lora',serif;font-size:1.35rem;font-weight:700;color:var(--text-1);line-height:1.2;}
.principle-body{font-size:0.9rem;color:var(--text-2);line-height:1.78;padding-left:76px;}
@media(max-width:768px){.principles-grid{grid-template-columns:1fr;}.principle-body{padding-left:0;}}

/* ─── TEAM ─── */
.team-section{background:linear-gradient(180deg,var(--surface) 0%,var(--blue-pale) 100%);padding:96px 0;position:relative;overflow:hidden;}
.team-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 20% 50%,rgba(26,58,143,0.04) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(11,114,133,0.04) 0%,transparent 60%);pointer-events:none;}
.team-tabs{display:flex;gap:8px;margin-bottom:48px;flex-wrap:wrap;}
.team-tab{min-height:44px;display:inline-flex;align-items:center;padding:10px 24px;border-radius:100px;font-size:0.875rem;font-weight:600;font-family:'Sora',sans-serif;cursor:pointer;border:1.5px solid var(--border);background:var(--bg);color:var(--text-3);transition:all var(--trans);}
.team-tab:hover{border-color:var(--blue-mid);color:var(--blue-mid);background:var(--blue-pale);}
.team-tab.active{background:var(--blue);color:white;border-color:var(--blue);box-shadow:0 4px 16px rgba(26,58,143,0.25);}
.team-member-panel{display:none;grid-template-columns:340px 1fr;gap:56px;align-items:center;animation:fadeUp 0.4s ease both;}
.team-member-panel.active{display:grid;}
.team-photo-wrap{position:relative;display:flex;justify-content:center;}
.team-photo-img{width:100%;max-width:340px;height:auto;aspect-ratio:1/1.2;object-fit:cover;border-radius:24px;box-shadow:var(--shadow-xl);background:var(--surface-2);}
.team-bio{padding-top:0;}
.team-focus-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;background:var(--blue-pale);border:1px solid var(--blue-light);border-radius:100px;font-size:0.72rem;font-weight:700;color:var(--blue);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:16px;}
.team-name{font-family:'Lora',serif;font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--text-1);line-height:1.1;margin-bottom:6px;}
.team-role{font-size:0.9rem;font-weight:600;color:var(--blue-mid);margin-bottom:32px;}
.team-quote{font-family:'Lora',serif;font-size:1.08rem;font-style:italic;color:var(--text-2);line-height:1.85;padding-left:22px;border-left:3px solid var(--blue-mid);margin-bottom:36px;text-align:justify;}
.team-stats-strip{display:flex;gap:0;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface);}
.team-stat{flex:1;padding:18px 20px;display:flex;flex-direction:column;gap:3px;border-right:1px solid var(--border);}
.team-stat:last-child{border-right:none;}
.team-stat-value{font-family:'Lora',serif;font-size:1.3rem;font-weight:700;color:var(--blue);}
.team-stat-label{font-size:0.72rem;font-weight:500;color:var(--text-3);text-transform:uppercase;letter-spacing:0.06em;}

/* ─── CONTACT ─── */
.contact-section{background:linear-gradient(180deg,var(--surface) 0%,var(--coral-pale) 100%);}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:64px;align-items:start;}
.contact-grid>*{min-width:0;max-width:100%;}
.contact-info{display:flex;flex-direction:column;gap:26px;}
.contact-block{display:flex;gap:14px;align-items:flex-start;}
.contact-icon{width:42px;height:42px;border-radius:12px;background:var(--blue-light);display:flex;align-items:center;justify-content:center;color:var(--blue);flex-shrink:0;}
.contact-block h3{font-size:0.74rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:3px;font-family:'Sora',sans-serif;}
.contact-block p{font-size:0.9rem;color:var(--text-2);line-height:1.6;}
.contact-form{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);padding:36px 32px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow-md);min-width:0;max-width:100%;box-sizing:border-box;}
/* Honeypot spam trap: must be display:none, not just off-screen. Browser
   autofill/password managers do NOT skip position:absolute;left:-9999px
   fields (they're still rendered) and will fill them with the same value
   as a nearby real email field, which false-triggers the spam guard for
   genuine users. display:none is reliably excluded by both. */
.hp-field{display:none;}
.form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;min-width:0;}
.form-group{display:flex;flex-direction:column;gap:7px;min-width:0;}
.form-group label{font-size:0.84rem;font-weight:600;color:var(--text-2);}
.form-group input,.form-group select,.form-group textarea{background:var(--surface);border:1.5px solid var(--control-border);border-radius:10px;padding:11px 15px;color:var(--text-1);font-size:0.9rem;font-family:'Sora',sans-serif;transition:all var(--trans);resize:none;appearance:none;width:100%;min-width:0;min-height:44px;max-width:100%;box-sizing:border-box;}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-4);}
/* :focus:not(:focus-visible) so the soft tinted ring stays for pointer focus
   while KEYBOARD focus keeps the real outline. Previously this suppressed the
   outline for both, leaving only a 10%-opacity ring. */
.form-group input:focus:not(:focus-visible),.form-group select:focus:not(:focus-visible),.form-group textarea:focus:not(:focus-visible){outline:none;border-color:var(--blue-mid);background:white;box-shadow:0 0 0 3px rgba(37,84,199,0.1);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--blue-mid);background:white;}
.btn-full{width:100%;justify-content:center;border-radius:10px;}

/* ─── FOOTER ─── */
.footer{background:var(--surface);padding:64px 0 28px;border-top:1px solid var(--border);}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;}
.footer-logo{display:flex;align-items:center;gap:10px;font-family:'Lora',serif;font-size:1.1rem;font-weight:700;color:var(--text-1);margin-bottom:12px;}
.footer-brand p{font-size:0.84rem;color:var(--text-3);line-height:1.65;margin-bottom:18px;}
.footer-col .footer-col-title{font-size:0.74rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:14px;font-family:'Sora',sans-serif;}
.footer-col ul{display:flex;flex-direction:column;gap:9px;}
.footer-col ul li a{font-size:0.875rem;color:var(--text-2);transition:color var(--trans);}
.footer-col ul li a:hover{color:var(--blue-mid);}
/* justify-content is "center", not "space-between": this row holds a single
   copyright paragraph, and space-between pushes a lone flex item to the left
   edge. text-align keeps the copy centred once it wraps on narrow viewports. */
.footer-bottom{border-top:1px solid var(--border);padding-top:22px;display:flex;justify-content:center;align-items:center;text-align:center;gap:16px;flex-wrap:wrap;}
.footer-bottom p{font-size:0.78rem;color:var(--text-3);}
.footer-disclaimer{border-top:1px solid var(--border);padding:22px 0;margin-bottom:0;}
.footer-disclaimer p{font-size:0.78rem;color:var(--text-3);line-height:1.7;text-align:justify;max-width:900px;margin:0 auto;}

/* ─── SEARCH MODAL ─── */
.search-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding-top:100px;opacity:0;pointer-events:none;transition:opacity var(--trans);}
.search-modal.open{opacity:1;pointer-events:all;}
.search-backdrop{position:absolute;inset:0;background:rgba(13,27,62,0.55);backdrop-filter:blur(8px);}
.search-box{position:relative;z-index:1;display:flex;gap:10px;width:100%;max-width:560px;padding:0 24px;}
.search-box input{flex:1;min-width:0;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:15px 20px;color:var(--text-1);font-size:1rem;font-family:'Sora',sans-serif;box-shadow:var(--shadow-lg);}
.search-box input:focus{outline:none;border-color:var(--blue-mid);}
.search-close{background:var(--surface);border:1.5px solid var(--border);color:var(--text-2);width:50px;height:50px;border-radius:12px;font-size:0.9rem;cursor:pointer;transition:all var(--trans);flex-shrink:0;box-shadow:var(--shadow-md);}
.search-close:hover{border-color:var(--blue-mid);color:var(--blue-mid);}

/* ─── VIDEO MODAL ─── */
.video-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.95);z-index:9999;align-items:center;justify-content:center;backdrop-filter:blur(8px);}
.video-modal.active{display:flex;}
.modal-content{position:relative;max-width:90%;max-height:90%;background:#000;border-radius:24px;overflow:hidden;box-shadow:0 30px 50px rgba(0,0,0,0.4);}
.modal-content video{width:100%;max-height:80vh;display:block;}
.close-modal{position:absolute;top:16px;right:24px;color:white;font-size:36px;font-weight:bold;cursor:pointer;background:rgba(0,0,0,0.6);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:0.2s;z-index:10;border:none;font-family:monospace;}
.close-modal:hover{background:#e74c3c;transform:scale(1.05);}
.video-title-modal{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);padding:20px;color:white;font-weight:500;font-family:'Sora',sans-serif;}

/* ─── DIVA CHATBOT WIDGET ─── */
.diva-widget{position:fixed;bottom:28px;right:28px;z-index:1500;}
/* outline:none !important removed - it suppressed the keyboard focus ring on
   the one control that opens DIVA, and !important meant nothing could restore
   it. `all:unset` still resets outline to none, so the focus ring is put back
   explicitly in the focus block near the top of this file. */
.diva-trigger{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform var(--trans);position:relative;background:none !important;border:none !important;padding:0 !important;margin:0 !important;box-shadow:none !important;-webkit-appearance:none !important;appearance:none !important;border-radius:0 !important;}
.diva-trigger:hover{transform:scale(1.1);}

/* ---- DIVA unavailable (DIVA_API_URL unset or unusable) ----
   The assistant stays on the page, dimmed and disabled, rather than
   disappearing: a missing feature and a broken one look identical to a visitor
   otherwise, and only one of them is worth reporting.

   The widget switches to a column so the notice sits above the icon instead of
   beside it, which keeps it clear of the site's bottom-right corner at every
   width. */
.diva-widget--unavailable{display:flex;flex-direction:column;align-items:flex-end;gap:10px;max-width:min(280px,calc(100vw - 56px));}

/* Greyed and inert. The hover lift is cancelled too - a control that responds
   to the pointer reads as usable however faint it looks. */
.diva-widget--unavailable .diva-trigger{opacity:0.45;filter:grayscale(1);cursor:not-allowed;}
.diva-widget--unavailable .diva-trigger:hover{transform:none;}

.diva-unavailable{
  margin:0;
  padding:10px 14px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
  color:var(--text-2);
  font-family:'Sora',sans-serif;
  font-size:0.8rem;
  font-weight:600;
  line-height:1.5;
  /* Overrides the site-wide p{text-align:justify}, which would stretch this
     short sentence across the pill. */
  text-align:left;
  hyphens:manual;
}
.diva-trigger img{display:block;width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.22));background:none;border:none;box-shadow:none;}

/* The panel is anchored to the BOTTOM of the viewport and grows upward, so
   without a ceiling its top edge simply leaves the screen: header + messages +
   input row + footer came to roughly 558px, and on a 1366x568 window that put
   the title bar and the close button about 30px above the top of the viewport,
   unreachable. Nothing about that is visible on a tall desktop monitor, which
   is why it survived so long.

   max-height ties the panel to the viewport instead of to its contents. The
   56px is the existing 28px bottom offset mirrored at the top, so the panel
   keeps the same visual margin at both ends.

   The vh line first, then dvh: dvh tracks the viewport as mobile browser
   chrome slides in and out, so the panel does not get clipped when the address
   bar reappears. Browsers that do not know dvh discard that line and keep the
   vh value, which is the same number minus that refinement.

   max-width is the horizontal counterpart - a guard for narrow-but-not-mobile
   widths where the fixed 560px plus the 120px right offset would otherwise
   push the left edge off screen. */
.diva-panel{
  position:fixed;
  bottom:28px;
  right:120px;
  width:560px;
  max-width:calc(100vw - 32px);
  max-height:calc(100vh - 56px);
  max-height:calc(100dvh - 56px);
  background:var(--surface);
  border-radius:24px;
  border:1.5px solid var(--border);
  box-shadow:0 24px 64px rgba(13,27,62,0.18);
  overflow:hidden;
  display:none;
  flex-direction:column;
  animation:popIn 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.diva-panel.open{display:flex;}
@keyframes popIn{from{opacity:0;transform:scale(0.92) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}

.diva-panel-header{
  background:linear-gradient(135deg,var(--blue),var(--teal));
  padding:16px 20px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}
.diva-panel-header img{width:56px;height:56px;object-fit:contain;flex-shrink:0;background:none;border:none;padding:0;border-radius:0;}
/* min-width:0 for the same reason .diva-messages needs min-height:0 - a flex
   item will not shrink below its content's intrinsic width by default. The
   avatar, close button and Clear button are all fixed-width and unshrinkable,
   so on a 320px screen this column is the only one that can yield; without
   this it holds itself at the width of "Interactive" and pushes the row wider
   than the panel. */
.diva-panel-header-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.diva-panel-header h2{color:white;font-size:1.05rem;font-weight:700;margin:0;letter-spacing:0.01em;}
.diva-panel-header p{color:rgba(255,255,255,0.8);font-size:0.78rem;margin:0;}
.diva-online{display:flex;align-items:center;gap:5px;color:rgba(255,255,255,0.85);font-size:0.72rem;font-weight:500;margin-top:2px;}
.diva-online-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 2px rgba(74,222,128,0.3);animation:pulseDot 2s infinite;}
.diva-close{
  margin-left:auto;
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.25);
  color:white;
  cursor:pointer;
  width:44px;height:44px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
  transition:background 0.2s;
}
.diva-close:hover{background:rgba(255,255,255,0.3);}

/* The one part of the panel that is allowed to give way when space runs out.
   Header, input row and footer all carry flex-shrink:0, so a capped panel
   takes the space it needs from here and from nowhere else - the close button,
   the text field and the send button stay exactly where they are however long
   the conversation gets.

   min-height:0 is what makes that work. A flex item's automatic minimum size
   is its content, so without this the message list refuses to shrink, the
   panel is pushed past its max-height, and the overflow reappears - the
   scrollbar below would never engage. It replaces the previous 280px floor,
   which was the same obstruction with a smaller number on it; the opening
   welcome message and its three suggestion buttons come to roughly that height
   on their own, so the panel still opens at the size it always did.

   max-height keeps the desktop proportions: on a tall screen the panel stays
   the size it has always been rather than stretching to fill the viewport now
   that it is allowed to. */
.diva-messages{
  padding:20px 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1 1 auto;
  min-height:0;
  max-height:360px;
  overflow-y:auto;
  background:var(--surface-2);
  scroll-behavior:smooth;
}
.diva-messages::-webkit-scrollbar{width:4px;}
.diva-messages::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:4px;}

.diva-msg{
  padding:14px 18px;
  border-radius:18px;
  font-size:1rem;
  line-height:1.7;
  max-width:88%;
  word-break:break-word;
}
.diva-msg.bot{
  background:var(--surface);
  color:var(--text-1);
  align-self:flex-start;
  border-bottom-left-radius:4px;
  box-shadow:0 2px 8px rgba(13,27,62,0.07);
  border:1px solid var(--border);
}
.diva-msg.user{
  background:linear-gradient(135deg,var(--blue),var(--blue-mid));
  color:white;
  align-self:flex-end;
  border-bottom-right-radius:4px;
  box-shadow:0 2px 10px rgba(26,58,143,0.25);
}

.diva-suggestions{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:4px;
  align-self:flex-start;
  width:100%;
  max-width:88%;
}
.diva-suggestion-btn{
  min-height:44px;
  background:var(--surface);
  border:1.5px solid var(--blue-light);
  color:var(--blue);
  border-radius:100px;
  padding:10px 16px;
  font-size:0.88rem;
  font-weight:600;
  font-family:'Sora',sans-serif;
  cursor:pointer;
  text-align:left;
  transition:all 0.2s;
  line-height:1.5;
}
.diva-suggestion-btn:hover{background:var(--blue);color:white;border-color:var(--blue);}

.diva-input-row{
  padding:14px 16px;
  border-top:1px solid var(--border);
  display:flex;
  gap:8px;
  align-items:center;
  background:var(--surface);
  flex-shrink:0;
}
.diva-input-row input{
  flex:1;
  min-width:0;
  border:1.5px solid var(--border);
  border-radius:100px;
  padding:13px 20px;
  font-size:1rem;
  /* outline:none removed - it stripped the keyboard focus ring from the one
     field a DIVA conversation is typed into. The border colour change below is
     a supplement, not a substitute. */
  font-family:'Sora',sans-serif;
  color:var(--text-1);
  background:var(--surface-2);
  transition:border-color 0.2s,background 0.2s;
}
.diva-input-row input::placeholder{color:var(--text-4);}
.diva-input-row input:focus{border-color:var(--blue);background:var(--surface);}
.diva-input-row input:disabled{opacity:0.55;cursor:not-allowed;}

.diva-mic{
  background:var(--surface);
  border:1.5px solid var(--border);
  color:var(--text-3);
  width:44px;height:44px;
  border-radius:50%;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:all 0.2s;
}
.diva-mic:hover{border-color:var(--blue-mid);color:var(--blue-mid);}
.diva-mic.preparing{border-color:#d97706;color:#d97706;background:#fffbeb;animation:micPulse 1.6s ease-in-out infinite;}
.diva-mic.listening{border-color:#e11d48;color:#e11d48;background:#fff1f4;animation:micPulse 1s ease-in-out infinite;}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(225,29,72,0.3);}50%{box-shadow:0 0 0 8px rgba(225,29,72,0);}}

.diva-send{
  background:linear-gradient(135deg,var(--blue),var(--blue-mid));
  border:none;
  color:white;
  width:44px;height:44px;
  border-radius:50%;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 3px 12px rgba(26,58,143,0.3);
  transition:transform 0.2s,box-shadow 0.2s,opacity 0.2s;
}
.diva-send:hover:not(:disabled){transform:scale(1.1);box-shadow:0 5px 18px rgba(26,58,143,0.4);}
.diva-send:disabled{opacity:0.45;cursor:not-allowed;transform:none;box-shadow:none;}

.diva-footer{
  padding:8px 16px;
  border-top:1px solid var(--border);
  background:var(--surface-2);
  text-align:center;
  font-size:0.68rem;
  /* --text-4 is reserved for placeholder text, which WCAG 2.2 AA exempts
     from contrast requirements. This is real content, so it needs a token
     that actually meets 4.5:1 - --text-4 on white only measures 4.16:1. */
  color:var(--text-3);
  flex-shrink:0;
}
.diva-footer span{color:var(--blue);font-weight:600;}

.diva-typing-dots{
  display:flex;gap:5px;align-items:center;
  padding:12px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;border-bottom-left-radius:4px;
  align-self:flex-start;
  box-shadow:0 2px 8px rgba(13,27,62,0.07);
}
.diva-typing-dots span{width:7px;height:7px;border-radius:50%;background:var(--blue-mid);animation:divaDotBounce 1.2s ease-in-out infinite;}
.diva-typing-dots span:nth-child(2){animation-delay:0.2s;}
.diva-typing-dots span:nth-child(3){animation-delay:0.4s;}
@keyframes divaDotBounce{0%,60%,100%{transform:translateY(0);opacity:0.3;}30%{transform:translateY(-6px);opacity:1;}}

/* ─── BOOKLET ─── */
.booklet-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px;background:var(--surface);border:1.5px solid var(--border);border-radius:14px;margin:18px 0 20px;transition:all var(--trans);}
.booklet-row:hover{border-color:var(--blue-light);box-shadow:var(--shadow-sm);}
.booklet-label{font-size:0.88rem;font-weight:500;color:var(--text-2);}
.btn-booklet{min-height:44px;display:inline-flex;align-items:center;display:inline-flex;align-items:center;gap:8px;padding:9px 20px;background:var(--blue);color:white;border-radius:100px;font-size:0.84rem;font-weight:600;font-family:'Sora',sans-serif;text-decoration:none;transition:all var(--trans);box-shadow:0 2px 10px rgba(26,58,143,0.22);border:none;cursor:pointer;}
.btn-booklet:hover{background:var(--blue-mid);transform:translateY(-2px);box-shadow:0 6px 20px rgba(26,58,143,0.32);}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.65s ease,transform 0.65s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ─── RESPONSIVE ─── */
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;}.marketplace-inner{grid-template-columns:1fr;gap:40px;}.team-member-panel{grid-template-columns:280px 1fr;gap:36px;}}
/* Navbar collapses before its full logo, six links and three utility controls
   exceed the row. The accessibility trigger keeps its text label until 900px,
   so the complete desktop header requires more room than the content grids. */
@media(max-width:1250px){
    /* The closed menu used to be hidden by appearance alone - slid off-screen
       and made transparent. Neither transform nor opacity takes an element out
       of the tab order or the accessibility tree, so all six links stayed
       reachable while invisible: tabbing across the header gave six stops with
       no focus ring anywhere on screen. The site's own screen reader announced
       them too - its filter (accessibility-widget.js, isHiddenOrCollapsed)
       tests visibility and display but not opacity.

       visibility:hidden is what removes them from both, and it is deliberately
       expressed HERE, inside the media query, rather than applied from
       JavaScript. Above 1250px the rule simply does not exist, so returning to
       a desktop width cannot leave the navigation stuck hidden - there is no
       state to clean up and no resize handler that could fail to run. */
    .nav-links{
      position:fixed;top:68px;left:0;right:0;
      background:rgba(255,255,255,0.97);
      border-bottom:1px solid var(--border);
      flex-direction:column;padding:16px 20px;gap:2px;
      transform:translateY(-110%);
      opacity:0;
      visibility:hidden;
      /* Explicit list, not `all`. visibility is a discrete property: under
         `all` it would flip at the halfway point of the 0.24s slide, leaving
         the menu invisible for the first half of its own opening animation.
         Instead it changes in zero time - delayed until the slide-out has
         finished when closing (below), immediate when opening. Only transform
         and opacity actually differ between the two states, so restricting the
         list changes nothing else. */
      transition:transform var(--trans),opacity var(--trans),visibility 0s linear 0.24s;
      backdrop-filter:blur(16px);
      box-shadow:var(--shadow-lg);
    }
    .nav-links.mobile-open{
      transform:translateY(0);
      opacity:1;
      visibility:visible;
      transition:transform var(--trans),opacity var(--trans),visibility 0s linear 0s;
    }
    .hamburger{display:flex;}
}
@media(max-width:768px){.lang-bar{display:none;}.hero-inner{padding:60px 24px 80px;}.about-grid{grid-template-columns:1fr;}.contact-grid{grid-template-columns:1fr;gap:36px;}.footer-grid{grid-template-columns:1fr 1fr;gap:28px;}.form-row{grid-template-columns:1fr;}.footer-bottom{flex-direction:column;text-align:center;}.section{padding:72px 0;}.diva-panel{width:290px;}.team-member-panel{grid-template-columns:1fr;gap:28px;align-items:center;}.team-photo-img{max-width:280px;margin:0 auto;}.team-stats-strip{flex-direction:column;}.team-stat{border-right:none;border-bottom:1px solid var(--border);}.team-stat:last-child{border-bottom:none;}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr;}.hero-cta{flex-direction:column;align-items:flex-start;}.team-tabs{gap:6px;}.team-tab{padding:8px 16px;font-size:0.8rem;}
    /* ---- Navbar on narrow phones ----
       The row is logo + Simple language + accessibility trigger + hamburger.
       At 320px there are 288px to fit them into, and it needed about 354:
       "Simple language" alone is ~106px of text, and BOTH .nav-logo and
       .nav-right carry flex-shrink:0, so nothing could give and the excess
       became page-wide horizontal scroll. The rule that made it inevitable was
       `.simple-toggle span{display:inline}` right here - it existed to force
       the label to stay visible at exactly the widths where it does not fit. */
    .nav-inner{padding:0 16px;gap:10px;}
    .nav-logo{gap:8px;}
    .nav-logo-img{width:40px;height:40px;}
    .logo-sub{display:none;}
    .nav-right{gap:6px;}

    /* Icon-only, 44x44. The label is moved out of view rather than removed:
       display:none would strip it from the accessibility tree and leave the
       button with no accessible name at all, since the name comes from this
       text. Clipping it keeps the name intact AND keeps it translated - the
       span carries data-i18n, so a hardcoded aria-label would have frozen the
       name in English while the interface switched to French or Kreol.

       This also makes the two controls consistent: the accessibility trigger
       beside it is already icon-only below 900px (see the widget's own CSS). */
    .simple-toggle{width:44px;min-height:44px;padding:0;gap:0;justify-content:center;}
    .simple-toggle span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

    /* Structural safety net, not a fix for anything currently broken. The
       overflow above was possible because neither side of the row could shrink;
       letting the wordmark give way means a future longer label degrades to a
       truncated logo rather than to a horizontally scrolling page. With the
       sizes above there is ~27px to spare at 320px, so it never engages. */
    .nav-logo{flex-shrink:1;min-width:0;}
    .logo-text-wrap{min-width:0;}
    .logo-main{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    /* DIVA panel: fixed width+right-offset clips off the left edge on narrow phones */
    .diva-panel{left:16px;right:16px;width:auto;}

    /* On a phone the panel spans the full width, so the 96px trigger - fixed at
       bottom:28px right:28px, and painted last - lands directly on top of the
       panel's own input row. It covers the send button and the right end of the
       text field, which is why the panel could look complete and still be
       unusable. On desktop there is no clash: the panel is offset to
       right:120px, clear of the trigger.

       Hiding it while the panel is open is what the .diva-widget.panel-open
       rule further down was written to do, except nothing ever applies that
       class. The sibling selector does it in CSS alone, with no change to the
       widget's behaviour: the trigger follows the panel in the markup, so
       "panel is open" is expressible directly.

       Closing is unaffected - the header's close button, the Escape-free
       outside-click handler in script.js and the panel's own controls are all
       still there; only the redundant toggle underneath the panel goes away. */
    .diva-panel.open ~ .diva-trigger{display:none;}

    /* The avatar is the largest fixed element in the header row. Trimming it
       gives the title and status text room to sit on fewer lines, which keeps
       the header short on a 320px screen where vertical space is scarcest. */
    .diva-panel-header{padding:14px 16px;gap:10px;}
    .diva-panel-header img{width:44px;height:44px;}
}

.diva-widget.panel-open{opacity:0;pointer-events:none;transform:translateY(20px);transition:all 0.3s ease;}
.audio-player-inline{
    display:none;
    margin-top:14px;
    padding:14px;
    border:1px solid var(--blue-light);
    border-radius:14px;
    background:var(--blue-pale);
    text-align:left;
}

.audio-player-inline.active{
    display:block;
}

.audio-time-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
    font-size:0.78rem;
    font-weight:700;
    color:var(--blue);
}

.audio-progress-bar{
    width:100%;
    height:14px;
    background:var(--surface);
    border-radius:100px;
    border:1px solid var(--blue-light);
    cursor:pointer;
    position:relative;
    overflow:visible;
}

.audio-progress-fill{
    height:100%;
    width:0%;
    background:var(--blue);
    border-radius:100px;
    position:relative;
    transition:width 0.08s linear;
}

.audio-progress-thumb{
    position:absolute;
    right:-9px;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    background:var(--blue);
    border:3px solid white;
    border-radius:50%;
    box-shadow:0 2px 8px rgba(0,0,0,0.25);
    cursor:grab;
}

.audio-progress-thumb:active{
    cursor:grabbing;
    transform:translateY(-50%) scale(1.15);
}

.btn-listen-audio{
    background:#EEF2FF!important;
    color:#1A3A8F!important;
    border-color:#C7D2FE!important;
}

.btn-listen-audio.is-playing{
    background:#1A3A8F!important;
    color:white!important;
    border-color:#1A3A8F!important;
}

.video-controls-extra{

  position:absolute;
  top:16px;
  left:20px;
  display:flex;
  gap:10px;
  z-index:10;

}

/* Microphone */
.diva-mic{
  width:44px;
  height:44px;
  border:none;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:18px;
  color:var(--text-2);
  transition:all .2s ease;
  flex-shrink:0;
}

.diva-mic:hover{
  background:#EEF2FF;
  color:var(--blue);
}

.diva-mic.preparing{
  background:#D97706;
  color:white;
  animation:pulseMic 1.8s infinite;
}

.diva-mic.listening{
  background:#EF4444;
  color:white;
  animation:pulseMic 1.2s infinite;
}

@keyframes pulseMic{
  0%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.12);
  }
  100%{
    transform:scale(1);
  }
}

/* Speak */

.diva-speak{
  width:36px;
  height:36px;
  border:none;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:18px;
  color:var(--text-2);
  transition:all .2s ease;
}

.diva-speak:hover{
  background:#EEF2FF;
  color:var(--blue);
}

.diva-speak.speaking{
  background:var(--blue);
  color:white;
}

/* Read-Aloud */

.diva-read-aloud{
  margin-top:8px;
  border:none;
  background:transparent;
  cursor:pointer;
  color:var(--text-3);
  font-size:16px;
  padding:4px;
  border-radius:8px;
  transition:.2s;
}

.diva-read-aloud:hover{
  background:#EEF2FF;
  color:var(--blue);
}
.diva-read-aloud.speaking{
  background:var(--blue);
  color:white;
  animation:speakPulse 1.2s ease-in-out infinite;
}
@keyframes speakPulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(26,58,143,0.4);}
  50%{transform:scale(1.15);box-shadow:0 0 0 8px rgba(26,58,143,0);}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(26,58,143,0);}
}

/* Copy */
.diva-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}

.diva-read-aloud,
.diva-copy-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:none;
  padding:4px;
  cursor:pointer;
  color:var(--text-3);
  transition:all 0.2s ease;
}

.diva-read-aloud:hover,
.diva-copy-btn:hover{
  color:var(--text-1);
}

.diva-read-aloud svg,
.diva-copy-btn svg{
  width:18px;
  height:18px;
}

/* Clear Chat */
.diva-clear{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  border:none;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.2);
  color:white;
  border-radius:6px;
  padding:4px 10px;
  font-size:0.72rem;
  font-weight:600;
  cursor:pointer;
  font-family:'Sora',sans-serif;
  letter-spacing:0.03em;
  transition:background 0.2s;
  opacity:.8;
}

.diva-clear:hover{
  background:rgba(255,255,255,0.25);
  opacity:1;
  transform:scale(1.05);
}

.field-error{display:none;font-size:0.78rem;color:#dc2626;margin-top:2px;font-weight:600;}
.field-error.show{display:block;}
.form-group input.invalid,.form-group select.invalid,.form-group textarea.invalid{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,0.1);}
.form-status{font-size:0.85rem;font-weight:600;padding:10px 14px;border-radius:10px;display:none;}
.form-status.show{display:block;}
.form-status.success{background:var(--emerald-light);color:var(--emerald);}
.form-status.error{background:var(--coral-light);color:var(--coral);}

/* SIMPLE CONTENT PAGES (privacy policy, disclaimer, cookie policy, accessibility statement) */
.main-content{min-height:calc(100vh - 200px);padding:64px 0 96px;}
.main-content .container{max-width:900px;}
.page-back{margin-top:40px;}
.page-header{text-align:center;margin-bottom:56px;padding-top:20px;}
.page-eyebrow{font-size:0.75rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue-mid);margin-bottom:12px;}
.page-title{font-family:'Lora',serif;font-size:clamp(1.9rem,4vw,2.8rem);font-weight:700;color:var(--text-1);letter-spacing:-0.02em;margin-bottom:16px;white-space:nowrap;overflow:visible;text-overflow:clip;}
@media(max-width:768px){.page-title{white-space:normal;word-break:keep-all;}}
.page-subtitle{font-size:1.02rem;color:var(--text-2);line-height:1.78;max-width:600px;margin:0 auto;}
.plain-policy{background:transparent;padding:0;border:none;box-shadow:none;}
.plain-policy h2{font-family:'Lora',serif;font-size:1.55rem;font-weight:700;color:var(--text-1);margin-top:40px;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--border);}
.plain-policy h2:first-of-type{margin-top:0;}
.plain-policy h3{font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:600;color:var(--text-1);margin-top:28px;margin-bottom:10px;}
.plain-policy p{font-size:1rem;color:var(--text-2);line-height:1.85;margin-bottom:14px;}
.plain-policy ul{list-style:disc;padding-left:24px;margin-bottom:16px;}
.plain-policy ul li{font-size:0.93rem;color:var(--text-2);line-height:1.85;margin-bottom:6px;}
.plain-policy a{color:var(--blue-mid);text-decoration:underline;text-underline-offset:3px;overflow-wrap:break-word;word-break:break-word;}
.plain-policy a:hover{color:var(--blue);}
.plain-policy strong{color:var(--text-1);font-weight:600;}

/* ACCESSIBILITY STATEMENT PAGE */
.a11y-statement .page-meta{font-size:0.82rem;color:var(--text-3);margin-bottom:8px;}
.a11y-statement .block{margin-bottom:40px;}
.a11y-statement .block p{text-align:justify;hyphens:auto;}
.a11y-statement hr{border:none;border-top:1px solid var(--border);margin:40px 0;}
.a11y-statement ul.plain{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;}
.a11y-statement ul.plain li{font-size:0.93rem;color:var(--text-2);padding-left:18px;position:relative;line-height:1.6;text-align:justify;hyphens:auto;}
.a11y-statement ul.plain li::before{content:'–';position:absolute;left:0;color:var(--text-3);}
.a11y-statement .tool-list{display:flex;flex-direction:column;gap:1px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:4px;}
.a11y-statement .tool-row{background:var(--surface);padding:14px 18px;border-bottom:1px solid var(--border);}
.a11y-statement .tool-row:last-child{border-bottom:none;}
.a11y-statement .tool-name{font-size:0.9rem;font-weight:600;color:var(--text-1);margin-bottom:3px;}
.a11y-statement .tool-desc{font-size:0.85rem;color:var(--text-2);line-height:1.55;text-align:justify;hyphens:auto;}
.a11y-statement .status-list{display:flex;flex-direction:column;gap:8px;}
.a11y-statement .status-row{display:flex;gap:10px;align-items:flex-start;font-size:0.9rem;color:var(--text-2);line-height:1.55;text-align:justify;hyphens:auto;padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);}
.a11y-statement .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px;}
.a11y-statement .dot-amber{background:#D97706;}
.a11y-statement .dot-green{background:var(--emerald);}
.a11y-statement .contact-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px;}
.a11y-statement .contact-line{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:0.9rem;}
.a11y-statement .contact-line:last-child{border-bottom:none;padding-bottom:0;}
.a11y-statement .contact-line:first-child{padding-top:0;}
.a11y-statement .contact-key{font-weight:600;color:var(--text-1);min-width:90px;flex-shrink:0;}
.a11y-statement .contact-val{color:var(--text-2);text-align:justify;hyphens:auto;}
.a11y-statement .contact-val a{color:var(--blue-mid);}
.a11y-statement .notice{background:var(--blue-pale);border-left:3px solid var(--blue-mid);padding:14px 18px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:0.9rem;color:var(--text-2);line-height:1.6;margin-bottom:16px;text-align:justify;hyphens:auto;}
.a11y-statement .footer-note{font-size:0.82rem;color:var(--text-3);line-height:1.7;}
/* ─── MOBILE TYPOGRAPHY FLOOR ───────────────────────────────────────────────
   Studio26 baseline: no text below 14 CSS pixels on mobile, ordinary body copy
   at least 16.

   Scoped to <=768px on purpose. The desktop sizes below 14px are a deliberate
   part of the visual hierarchy - eyebrows, chips, metadata, legal footnotes -
   and raising them everywhere would flatten it. On a phone, held further from
   the eye and often outdoors, the same sizes stop being legible, which is what
   the baseline is about.

   0.875rem = exactly 14px against the 16px root. Applied as a floor, not a
   reset: anything already at or above 14px is untouched, and the relative
   order of these elements is preserved because they were all below the floor
   to begin with.

   Generated from the stylesheet rather than hand-listed, so no small selector
   is missed.
   ======================================================================== */
@media(max-width:768px){
    .a11y-statement .footer-note,
    .a11y-statement .page-meta,
    .a11y-statement .tool-desc,
    .action-chip,
    .action-description,
    .ai-for-all-box em,
    .ailab-promo-note,
    .ailab-promo-tags li,
    .audio-time-row,
    .btn-back,
    .btn-booklet,
    .btn-redesign,
    .btn-search,
    .contact-block h3,
    .dim-tags span,
    .diva-callout .btn-sm,
    .diva-callout p,
    .diva-clear,
    .diva-footer,
    .diva-online,
    .diva-panel-header p,
    .diva-unavailable,
    .doc-badge,
    .doc-body p,
    .doc-btn,
    .doc-kicker,
    .field-error,
    .footer-bottom p,
    .footer-brand p,
    .footer-col .footer-col-title,
    .footer-disclaimer p,
    .form-group label,
    .form-status,
    .hero-badge,
    .lang-bar,
    .lang-bar a,
    .lang-btn,
    .logo-sub,
    .meta-chip,
    .mkt-card p,
    .nav-link,
    .page-eyebrow,
    .section-eyebrow,
    .simple-toggle,
    .team-focus-tag,
    .team-stat-label,
    .team-tab,
    .video-icon{font-size:0.875rem;}
}

/* ─── LINE LENGTH ───────────────────────────────────────────────────────────
   Studio26 baseline: roughly 75 characters per line maximum.

   These are the prose blocks that had no measure of their own and were
   constrained only by .container at 1180px - about 148 characters on a desktop
   window, roughly twice a comfortable line. .section-desc already caps at
   600px (~75 characters) and is left alone.

   Expressed in ch, which measures what the rule is actually about: 72ch is 72
   zero-widths of the current font, so the limit holds whatever the font size
   or the user's zoom. It is a maximum, not a width - narrow screens are
   unaffected, so nothing here can cause overflow at 320 or 360px.

   The policy pages keep their centring; .about-body and .page-subtitle sit in
   left-aligned columns and stay left-aligned. */
.plain-policy p,
.plain-policy ul li{max-width:72ch;}
.about-body{max-width:72ch;}
.page-subtitle{max-width:72ch;}
.footer-disclaimer p{max-width:72ch;}
.a11y-statement .block p,
.a11y-statement .tool-desc{max-width:72ch;}

/* NOTE: this block is deliberately the LAST thing in this file.
   It was originally placed mid-file, where it lost the cascade: rules
   like .reveal{opacity:0} and .diva-online-dot{animation:...} are
   defined further down at the SAME specificity, so they overrode it and
   reduced-motion users still got hidden .reveal content and a pulsing
   status dot. Browser testing during final QA caught it; a static check
   that the declarations exist could not. Keep it last. */
/* ─── REDUCED MOTION ────────────────────────────────────────────────────────
   Written against the motion this site actually contains, not as a blanket
   kill-switch: seven @keyframes, the .reveal scroll-in, two smooth-scroll
   declarations, and the transform-based hover lifts. Each is dealt with by
   name below so it is clear what is being stopped and what the user is left
   looking at.

   The governing rule throughout: reduced motion means the FINAL state
   immediately, never missing content. Nothing here hides anything.

   Two motion sources cannot be reached from CSS at all and are handled in
   assets/js/script.js instead - the marketplace ticker, which is an SVG SMIL
   <animate> element, and DIVA's word-by-word message typing, which is a
   JavaScript timer. Both are noted where they live. */
@media(prefers-reduced-motion:reduce){
    .btn-back:hover svg{transform:none;}

    /* 1. Smooth scrolling - both declarations, the page and the DIVA log. */
    html,
    .diva-messages{scroll-behavior:auto;}

    /* 2. Continuous decorative animation. The elements stay exactly where
       they are and keep their colour and size; only the looping stops. The
       status dots remain visible as dots, the listening/speaking states keep
       their border and colour change, and the typing indicator still shows
       three dots - it simply no longer bounces. */
    .badge-dot,
    .diva-online-dot,
    .diva-mic.preparing,
    .diva-mic.listening,
    .diva-typing-dots span,
    .diva-speak.speaking,
    .diva-read-aloud.speaking{animation:none;}

    /* 3. One-shot entrance animation. All of these use `both`, so their end
       state is the normal rendered state - removing the animation shows that
       state at once rather than sliding into it. The hero text, the team
       panel and the DIVA panel are all fully visible without them. */
    .hero-title,
    .hero-subtitle,
    .hero-cta,
    .team-member-panel,
    .diva-panel{animation:none;}

    /* 4. The scroll-triggered reveal. Forced to its finished state so the
       content does not depend on an IntersectionObserver callback, or on a
       transition completing, to become readable. */
    .reveal{opacity:1;transform:none;transition:none;}

    /* 5. Movement. Rather than switching every transition off - which would
       also remove the colour and shadow feedback that tells a user a control
       is interactive - the transition PROPERTY list is narrowed to the
       non-moving properties. Hover and focus still respond; nothing travels.
       The paired transform declarations below stop the movement itself. */
    *,*::before,*::after{
        transition-property:color,background-color,border-color,box-shadow,opacity,outline-color,fill,stroke;
    }
    .btn-primary:hover,
    .diva-clear:hover,
    .simple-toggle:hover,
    .card:hover,
    .action-card:hover,
    .btn-redesign:hover,
    .mkt-card:hover,
    .btn-white:hover,
    .doc-card:hover,
    .doc-btn-primary:hover,
    .doc-btn-ghost:hover,
    .doc-btn-audio:hover,
    .principle-card:hover,
    .close-modal:hover,
    .diva-trigger:hover,
    .btn-booklet:hover,
    .diva-send:hover:not(:disabled){transform:none;}
}

/* ─── JUSTIFICATION ON NARROW COLUMNS ───────────────────────────────────────
   Justified text works by stretching the spaces between words until the line
   reaches both edges. On a phone column there are only a handful of words per
   line to absorb that, so the gaps become rivers - visible in the 320px QA
   screenshots as "Welcome  to  the  AI  Unit  of".

   Individual offenders were switched to left alignment earlier; this addresses
   the cause for every narrow column at once, rather than waiting for each new
   prose block to be found. Desktop keeps the justified setting the design
   chose - the measure there is wide enough for it to work.

   Found by looking at the responsive QA screenshots, not by any automated
   check: nothing here is measurable as a failure, it is simply hard to read. */
@media(max-width:768px){
    p,
    .hero-subtitle,
    .about-body,
    .ailab-promo-desc,
    .doc-body p,
    .plain-policy p,
    .plain-policy ul li{text-align:left;hyphens:manual;}
}

/* ---- AI Marketplace button in the navbar --------------------------------
   The marketplace previously had two entry points, both on the homepage: the
   hero CTA and the card block partway down. Anyone who scrolled past the hero,
   or who landed on any other page, lost the route to it entirely. It is now a
   persistent primary action in the header on every page.

   Colour is .btn-primary's, so the header button and the hero CTA read as one
   destination. min-height:44px keeps it clear of the waived small-target list
   rather than adding a new entry to it. */
.nav-marketplace{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:0 16px;
  background:#2554C7;color:#fff;border:1px solid #2554C7;
  border-radius:100px;
  font-family:'Sora',sans-serif;font-size:0.82rem;font-weight:700;
  white-space:nowrap;text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:all var(--trans);
}
.nav-marketplace:hover{background:#1c44a8;border-color:#1c44a8;transform:translateY(-1px);box-shadow:var(--shadow-md);}
.nav-marketplace svg{flex-shrink:0;}
.nav-marketplace:focus-visible{outline:3px solid var(--blue-mid);outline-offset:2px;}

/* The Simple language toggle was removed from the site; its own rules above
   are now unused. Left in place so the control can be reinstated intact. */

@media(max-width:480px){
  /* Narrow phones: the bar is now logo + AI Marketplace + accessibility +
     hamburger. Moving Simple language into the menu is what buys the room. */
  .nav-marketplace{padding:0 12px;font-size:0.76rem;gap:5px;}
}

/* Practical booking details under the calendar (pages/ai-lab.php). h3 rather
   than h2 so the section keeps its single h2 ("Book the AI Lab") and the
   heading order stays valid for screen readers and the site's own reader.
   Sized to match .card h3, the nearest existing sub-heading in the type scale;
   without this the browser default lands oddly against the Lora heading font. */
.lab-booking h3{font-size:1.05rem;font-weight:600;color:var(--text-1);margin:26px 0 8px;}

/* Assembled email links (see email_link() and initEmailObfuscation()). The
   contact block previously carried an inline colour on its anchor; it lives
   here now that the markup is generated. */
.email-obf a{color:inherit;text-decoration:underline;}
.contact-block .email-obf a{color:var(--blue-mid);}

/* Click-to-load contact map. Occupies the .contact-grid column the form used
   to fill, so the two-column layout is unchanged. */
.contact-map{border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;min-height:360px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);}
.map-consent{padding:28px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;justify-content:center;flex:1;}
.map-title{font-size:1.05rem;font-weight:600;color:var(--text-1);margin:0;}
.map-address{margin:0;color:var(--text-1);font-weight:600;line-height:1.5;}
.map-note{margin:0;font-size:0.85rem;color:var(--text-2);max-width:48ch;line-height:1.5;}
.map-alt{margin:0;font-size:0.875rem;}
.contact-map-frame{border:0;width:100%;flex:1;min-height:360px;display:block;}
/* AI Lab opening-day video (pages/ai-lab.php).

   The footage is 9:16 portrait, so the player is capped and centred rather
   than run the full column width. At full width a vertical video would stand
   roughly 1.8 screens tall on desktop and push every heading below the fold.
   360px is the source's own short edge at 1x, so it never upscales.

   aspect-ratio with height:auto keeps the reserved box exactly on the file's
   ratio, so nothing letterboxes inside the frame and the text below does not
   shift once the poster loads. line-height:0 removes the inline descender gap
   that would otherwise show as a black strip under the video. */
.lab-figure{margin:0 0 30px;}
.lab-video{max-width:360px;margin:0 auto;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#000;line-height:0;}
.lab-video video{display:block;width:100%;height:auto;aspect-ratio:720/1280;}
.lab-figure figcaption{max-width:640px;margin:14px auto 0;font-size:.92rem;line-height:1.55;color:var(--text-2);text-align:center;}
/* The text alternative that satisfies WCAG 1.2.1 for this silent video. Set as
   its own block, and left-aligned, so it reads as a description of the footage
   rather than running on from the caption sentence. */
.lab-video-alt{display:block;margin-top:10px;font-size:.86rem;color:var(--text-3);text-align:left;}