/* ============================================================
   NDA Aurora Design System — locked 2026-06-24
   Namespaced (--au-* tokens, .au-* classes) so it is fully
   additive and cannot collide with the existing site CSS.
   Apply by wrapping a region in an `.aurora` element.
   ============================================================ */

.aurora{
  --au-ground:#070B14; --au-ground-2:#0A1122;
  --au-ink:#EAF1F8; --au-ink-soft:#9FB2C6; --au-ink-faint:#5E7186;
  --au-mag:#E0459A; --au-cyan:#19AAD6; --au-blue:#2C7BE5;
  --au-grad:linear-gradient(118deg,var(--au-mag),var(--au-cyan));
  --au-glass:rgba(18,30,50,.40); --au-glass-brd:rgba(255,255,255,.10);
  --au-glass-sh:rgba(0,0,0,.5); --au-sheen:rgba(150,210,255,.22);
  --au-good:#38D08A;
  /* reserved action color — CTAs ONLY */
  --au-cta:#31D68C; --au-cta-ink:#042A1E; --au-cta-glow:rgba(49,214,140,.40);
  --au-blur:20px; --au-ease:cubic-bezier(.16,1,.3,1);
  color:var(--au-ink);
  font-family:"Iowan Old Style",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.aurora .au-serif{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}

/* ===== STAGE / BACKGROUND (video/image layer drops into .au-bg) ===== */
/* .au-grain and .au-wordmark were removed on 2026-09-22 (see blocks/hero-aurora.njk).
   The grain was a 130x130 turbulence tile whose repeat read as a grid on a full-bleed
   hero; the wordmark competed with the headline. Both rules are gone rather than
   disabled, so nothing re-enables them by accident. */
.au-stage{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--au-ground),var(--au-ground-2))}
.au-bg{position:absolute;inset:0;z-index:-4;overflow:hidden}
.au-bg video,.au-bg img{width:100%;height:100%;object-fit:cover;opacity:.9}

/* ── Frame-scrub hero background (Phase D) ─────────────────────────────
   Poster <img> and <canvas> both sit absolute/inset:0 so they stack (not
   flow) inside `.au-bg`; the canvas is later in the DOM so it paints over
   the poster once hero-scrub.js has decoded and drawn a frame. Until then
   — or if the engine is disabled/absent — the poster alone is the hero. */
.au-scrub-poster,.au-scrub-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.au-scrub-poster{opacity:.9}
.au-scrub-canvas{opacity:1}
/* Unit-toned wash over the frame sequence — CSS-only, no JS color logic.
   Phase D2: literal hex (not var(--au-mag) etc.) — `.au-bg` now lives inside
   `.hero-scrub-bg`, OUTSIDE `.aurora`, on pages using the pinned-region
   pattern below, so it can no longer rely on `.aurora`'s local custom
   properties. Values match --au-mag/--au-cyan/--au-good exactly. */
.au-bg[data-scrub-unit]{position:absolute}
.au-bg[data-scrub-unit]::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.5}
.au-bg[data-scrub-unit="growth"]::after{background:linear-gradient(180deg,color-mix(in oklab,#E0459A 55%,transparent),transparent 60%)}
.au-bg[data-scrub-unit="innovation"]::after{background:linear-gradient(180deg,color-mix(in oklab,#19AAD6 55%,transparent),transparent 60%)}
.au-bg[data-scrub-unit="home"]::after{background:linear-gradient(180deg,color-mix(in oklab,#38D08A 45%,transparent),transparent 60%)}

/* ============================================================
   Phase D2 — scroll-pinned landing region
   ============================================================
   `.hero-scrub-region` wraps TWO things: the hero (`.aurora`/`.au-stage`)
   and the section the footage "lands" in below it (Home: #units; Growth/
   Innovation: the #process intro). Structure (built by each page template,
   see hero-scrub-bg.njk's header comment for the exact markup):

     .hero-scrub-region                 (position:relative; isolation:isolate)
       .hero-scrub-bg                   (position:sticky; top:0; height:100svh)
         .au-bg > poster + canvas       (the existing Phase D scrub engine)
       .hero-scrub-fg                   (margin-top:-100svh — cancels .hero-scrub-bg's
                                          own flow height so it starts overlapping
                                          from y:0, a standard sticky-bg/
                                          negative-margin-fg overlap technique)
         .aurora > .au-stage            (hero content, background made transparent
                                          via .au-stage--scrub-fg so the sticky bg
                                          shows through)
         #units / #process-intro        (landing section content, ALSO given a
                                          transparent background + confined to a
                                          left column so the pinned footage's own
                                          empty right side stays visible)

   Net effect: `.hero-scrub-bg` stays pinned to the viewport for exactly the
   combined height of the hero + landing section, then scrolls away normally
   once `.hero-scrub-region`'s bottom edge is reached. No transform/scale is
   applied to the canvas itself — the footage's own frames already do the
   "shrink and move right" choreography (see docs/decisions.md → Design, Phase D2).
   hero-scrub.js reads `.hero-scrub-region` for scroll-progress and
   `.hero-scrub-bg` for the canvas's actual rendered box (two different
   measurements — see that file's comments). ============================ */
.hero-scrub-region{position:relative;isolation:isolate}
/* Client feedback 2026-09-03: nav bar, ticker, and the top-right status
   chip float over raw footage with only their own local translucency —
   the vertical scrim below only darkens the bottom (where the proof/
   system cards live), so a bright/saturated frame under the fixed header
   had nothing behind it. Richer glass here (vs. the base .au-glass tuned
   for calmer non-video heroes) gives .au-glass elements in this region
   real contrast against moving footage. Targets `.hero-scrub-region .aurora`
   specifically (not just `.hero-scrub-region`) because `.aurora` redeclares
   these same custom properties on itself — a rule matching the element
   directly always wins over one inherited from an ancestor, so overriding
   only the ancestor would have been silently ignored. */
.hero-scrub-region .aurora{--au-glass:rgba(8,13,22,.58); --au-blur:28px;}
.hero-scrub-bg{position:sticky;top:0;left:0;right:0;height:100svh;overflow:hidden;pointer-events:none}
.hero-scrub-fg{position:relative;z-index:1;margin-top:-100svh}
.au-stage--scrub-fg{background:transparent}
/* Client feedback 2026-08-06: text/cards over the footage had no
   separation from a busy, still-moving background. Dark scrim, strongest
   where copy always sits (left ~60%), fading out by the right side so the
   footage's own detail stays visible there. Painted above the canvas/poster
   (both children of `.au-bg`, default stacking order) but still inside
   `.hero-scrub-bg`, well below `.hero-scrub-fg`'s z-index:1 text layer. */
/* Client feedback 2026-08-06: fade the scrim out on scroll, same duration
   as the hero's own [data-au-fx] cards (aurora.js writes --au-scroll-fade
   to :root using the identical `scrollY / (innerHeight * .6)` formula that
   already drives those cards' blur/opacity — see aurora.js's scroll
   listener). Defaults to 0 (fully visible) if aurora.js hasn't run yet
   (e.g. reduced-motion, where aurora.js no-ops entirely) or on pages
   without a hero `.aurora` at all. */
.hero-scrub-bg::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:calc(1 - var(--au-scroll-fade,0));
  background:
    linear-gradient(90deg,rgba(4,6,10,.74) 0%,rgba(4,6,10,.5) 34%,rgba(4,6,10,.14) 60%,transparent 76%),
    linear-gradient(0deg,rgba(4,6,10,.5) 0%,transparent 26%),
    /* Client feedback 2026-09-03: the fixed #nav/ticker + the top-right
       .au-chip live in the top ~180px, outside both scrims above (the 90deg
       one is left-anchored, the 0deg one only reaches up from the bottom) —
       so a bright/saturated frame passing underneath had nothing darkening
       it. Mirrors the bottom scrim's falloff, capped to roughly the header's
       own height so it doesn't wash out the hero art below it. */
    linear-gradient(180deg,rgba(4,6,10,.55) 0%,transparent 22%);
}
/* Same feedback: the decorative aurora glow blobs were designed for pages
   with no video background — with real footage now providing its own color
   and motion, the blobs just add competing noise. Dimmed rather than
   removed outright (still gives the hero's own text a soft backdrop). */
.hero-scrub-region .au-field{opacity:.35}

/* Mobile: pinning is explicitly out of scope (design doc flags it as a
   follow-up needing its own simpler interaction) — degrade to the same
   "poster stacked behind the hero's own content, scrolls away normally"
   look the pre-D2 single-section engine already had. `.hero-scrub-bg`
   becomes a normal (non-sticky) absolutely-positioned layer confined to the
   hero's own ~100svh box instead of pinning across the combined region;
   hero-scrub.js's own max-width:768px check independently disables the
   canvas itself (poster-only fallback either way). */
@media(max-width:768px){
  .hero-scrub-bg{position:absolute;height:100svh}
  .hero-scrub-fg{margin-top:0}
}
/* 2026-09-23 responsive pass. `.hero-scrub-bg` must be its own stacking context: without
   one, its ::after scrim (z-index:2) competed with `.hero-scrub-fg` (z-index:1) inside
   `.hero-scrub-region` and painted OVER the headline, buttons and cards once the layer
   went position:absolute (≤768px) — the "grey text, muddy CTA" look on phones/tablets. */
.hero-scrub-bg{z-index:0}
/* Stacked layout (≤860px): copy spans the full width, so the desktop scrim — dark on
   the left, clear from 76% — left a bright strip on the right and darkened unevenly.
   Use an even top-to-bottom scrim, and fade the footage into the page at the bottom so
   the stacked cards below one screen height don't sit on a hard edge. */
@media(max-width:860px){
  .hero-scrub-bg::after{
    background:
      linear-gradient(180deg,rgba(4,6,10,.62) 0%,rgba(4,6,10,.46) 30%,rgba(4,6,10,.58) 62%,var(--bg,#090d14) 100%);
  }
}
.au-field{position:absolute;inset:-10%;z-index:-3;filter:blur(6px)}
.au-blob{position:absolute;border-radius:50%;filter:blur(64px);will-change:transform}
.au-b1{width:50vw;height:50vw;top:-6vw;right:-4vw;background:radial-gradient(circle,var(--au-mag),transparent 62%);opacity:.72;animation:auD1 26s ease-in-out infinite}
.au-b2{width:46vw;height:46vw;bottom:-12vw;left:-8vw;background:radial-gradient(circle,var(--au-cyan),transparent 62%);opacity:.58;animation:auD2 32s ease-in-out infinite}
.au-b3{width:34vw;height:34vw;top:26%;left:42%;background:radial-gradient(circle,var(--au-blue),transparent 60%);opacity:.38;animation:auD3 30s ease-in-out infinite}
@keyframes auD1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,5%) scale(1.08)}}
@keyframes auD2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-4%) scale(1.06)}}
@keyframes auD3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,-6%) scale(1.12)}}
/* Client feedback 2026-08-06: header text (this wordmark + the H1 below)
   should use the site's actual design-system font, not this file's own
   locked "Iowan Old Style" serif default (`.aurora{font-family:...}` above)
   - that serif is reserved for the deliberate `.au-serif` accent-word
   treatment used inside headings (e.g. the italicized word in "built to
   compound"), not the base heading typeface. */

/* ===== 2-COL (70/30) × 3-ROW FRAME =====
   Client feedback 2026-09-03: the prior 3-col x 2-row layout squeezed the
   title/description/CTA column to ~36% width (1.15fr of ~3.15fr total),
   which broke the H1 ugly at in-between widths, and crammed au-bottom into
   the same row as au-copy/au-stack, fighting them for vertical space.
   Row 1: au-top (status chip), spans the 30% column only.
   Row 2: au-copy (70% column, room to breathe) + au-stack (30% column).
   Row 3: au-bottom, its own row, spanning both columns so it stays centered
   on the full frame width like before (was centered in the old middle
   column of three). */
.au-frame{flex:1;position:relative;z-index:2;display:grid;grid-template-columns:7fr 3fr;grid-template-rows:auto 1fr auto;gap:18px;width:min(1280px,100%);margin:0 auto;
  /* top padding clears the fixed site nav (~112px); bottom opened up
     (was clamp(26px,4vh,48px) - client feedback: hero read too cramped
     against the section below it) */
  padding:clamp(124px,14vh,150px) clamp(20px,4vw,56px) clamp(48px,7vh,84px)}
.au-copy{grid-column:1;grid-row:2;align-self:end;max-width:56ch}
.au-top{grid-column:2;grid-row:1;justify-self:end;align-self:start}
.au-stack{grid-column:2;grid-row:2;justify-self:end;align-self:end;display:flex;flex-direction:column;gap:12px;width:min(300px,86%)}
.au-bottom{grid-column:1 / -1;grid-row:3;justify-self:center;align-self:end}

/* ===== COPY ===== */
.au-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--au-ink-soft)}
.au-eyebrow .au-dot{width:7px;height:7px;border-radius:50%;background:var(--au-good);box-shadow:0 0 0 4px color-mix(in oklab,var(--au-good) 25%,transparent)}
/* Client feedback 2026-08-06: base heading text should use the site's
   design-system font (var(--display)), not this file's locked Iowan Old
   Style default. The `em` accent word inside headings (e.g. "built" in
   "solutions, *built* to compound") keeps that serif explicitly - it's an
   intentional emphasis treatment already used the same way elsewhere on
   the site (e.g. home's #philosophy word accents), not a deviation. */
.au-h1{font-family:var(--display);font-size:clamp(2.1rem,1.6vw + 1.4rem,3.7rem);line-height:1.05;letter-spacing:-.025em;font-weight:600;margin:14px 0 0;text-wrap:balance;color:var(--au-ink)}
.au-h1 em{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;font-weight:500;background:var(--au-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.au-sub{margin-top:16px;font-size:clamp(.95rem,1.2vw,1.08rem);line-height:1.55;color:var(--au-ink-soft)}
.au-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:24px}

/* ===== CTA — the reserved Signal color lives ONLY here ===== */
/* Client feedback 2026-08-06: this button rendered as a distinct pill shape
   in a different green from the site's actual locked Primary CTA (.btn-cta
   in base.css — 6px radius, --lime fill, Space Grotesk). Aurora had its own
   separate --au-cta token (#31D68C, "Signal-green") that was never
   reconciled with the main design system when Aurora was integrated.
   Matched to .btn-cta exactly rather than keeping a second CTA style. */
.au-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);padding:15px 26px;border-radius:6px;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer;background:var(--lime);color:#090D14;transition:opacity .15s var(--au-ease)}
.au-cta:hover{opacity:.88}
.au-cta .au-arr{transition:transform .2s}.au-cta:hover .au-arr{transform:translateX(3px)}
.au-cta:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.au-ghost{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;font-size:.95rem;font-weight:600;text-decoration:none;color:var(--au-ink);background:var(--au-glass);border:1px solid var(--au-glass-brd);-webkit-backdrop-filter:blur(var(--au-blur));backdrop-filter:blur(var(--au-blur));transition:transform .2s}
.au-ghost:hover{transform:translateY(-2px)}

/* ===== GLASS ===== */
.au-glass{--mx:70%;--my:18%;background:radial-gradient(200px circle at var(--mx) var(--my),var(--au-sheen),transparent 58%),var(--au-glass);border:1px solid var(--au-glass-brd);-webkit-backdrop-filter:blur(var(--au-blur)) saturate(1.3);backdrop-filter:blur(var(--au-blur)) saturate(1.3);box-shadow:0 24px 60px -24px var(--au-glass-sh),inset 0 1px 0 rgba(255,255,255,.14);transition:box-shadow .35s,border-color .35s}
.au-glass:hover{box-shadow:0 34px 80px -26px var(--au-glass-sh);border-color:color-mix(in oklab,var(--au-cyan) 34%,var(--au-glass-brd))}
.au-card{padding:18px 20px;border-radius:30px 30px 9px 30px;text-decoration:none;color:inherit;display:block}
.au-card.au-alt{border-radius:34px 10px 34px 34px}
.au-ic{width:38px;height:38px;border-radius:12px 12px 5px 12px;display:grid;place-items:center;background:var(--au-grad);color:#fff;box-shadow:0 8px 20px -8px color-mix(in oklab,var(--au-cyan) 60%,transparent);font-size:.7rem;font-weight:700;letter-spacing:.06em}
.au-card h3{font-size:1.02rem;margin:14px 0 6px;letter-spacing:-.01em}
.au-card p{font-size:.85rem;line-height:1.5;color:var(--au-ink-soft)}
.au-metric{font-size:2.4rem;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;background:var(--au-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.au-metric-l{margin-top:8px;font-size:.8rem;line-height:1.45;color:var(--au-ink-soft)}
.au-chip{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:600;border-radius:999px;padding:9px 16px;color:var(--au-ink)}
.au-chip .au-dot{width:8px;height:8px;border-radius:50%;background:var(--au-good)}
/* Header/hero audit finding: heroProof is injected as one raw HTML string
   (e.g. "<b>AR</b> · VR · Mixed Reality<span class="au-div"></span>rest of
   phrase") via {{ heroProof | safe }} - it's meant to read as one
   continuous inline phrase with a thin divider partway through, not a row
   of separate items. `display:flex` on this container was wrapping each
   text run AND element as its own anonymous flex item (per the flexbox
   spec, contiguous text directly inside a flex container is auto-boxed),
   so `gap:14px` was inserting extra unwanted space at every text/element
   boundary - including in the middle of "AR · VR · Mixed Reality", which
   was never meant to have a gap there at all. Removed the flex/gap here;
   .au-div gets its own explicit horizontal margin instead so the divider
   still gets breathing room without affecting the surrounding text flow. */
.au-bottomcard{display:block;padding:12px 18px;border-radius:18px;font-size:.82rem;color:var(--au-ink-soft)}
.au-bottomcard b{color:var(--au-ink);font-variant-numeric:tabular-nums}
/* display:inline-block is required now that .au-bottomcard is no longer a
   flex container - a plain inline <span> ignores width/height entirely, so
   without this the divider would silently collapse to zero size. Margin
   replaces the gap that used to come from the parent's (now-removed)
   flex gap. */
.au-div{display:inline-block;vertical-align:middle;width:1px;height:22px;margin:0 8px;background:var(--au-glass-brd)}

.au-cue{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:3;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--au-ink-faint);display:flex;flex-direction:column;align-items:center;gap:8px}
.au-cue::after{content:"";width:1px;height:24px;background:linear-gradient(var(--au-ink-faint),transparent);animation:auCue 2s ease-in-out infinite}
@keyframes auCue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ===== COMPACT HERO (archives, interior pages) — centered, shorter ===== */
/* Archive heroes are one height, not one per headline. Measured 2026-09-22 at 1440x900 they
   ran 494px (Case Studies) to 578px (ES News) — an 84px spread driven purely by how long the
   copy happened to be, and Spanish runs longer than English, so a page changed height when
   you switched language.

   Jon wanted this as a viewport percentage: "60vh feels about right". It is 60svh, with a
   floor, because a bare 60svh does not hold: the tallest archive copy is 578px, so 60svh
   only contains it above ~963px of viewport height. On an ordinary 768-900px laptop 60svh
   is 461-540px, the copy overflows it, min-height gives way and the heights diverge again —
   which is the bug this rule exists to fix. The clamp keeps the 60% feel wherever there is
   room and holds the floor where there is not.

   Floors come from measurement, not taste: a first attempt at a flat 600px left a 4px
   spread at exactly 1512x1000, where 60svh lands on the floor, and a flat 640px made the
   hero 83% of a 1366x768 laptop. Re-measure with `min-height:0` forced if the copy changes.
   (svh not vh: the file already uses svh for the full hero, and it does not jump when a
   mobile URL bar hides.) */
.au-stage.au-stage--compact{min-height:clamp(610px,60svh,820px)}
/* The floor tracks viewport height because the hero's own padding does (18vh/8vh, capped at
   180/80). Measured natural maximums: 531px at 768 tall, 539 at 800, 578 at 900, 604 at 1000
   and above. Each floor sits just over the tallest copy at that size, so the heights stay
   identical without the hero swallowing a short laptop screen. */
@media(max-height:940px){.au-stage.au-stage--compact{min-height:clamp(600px,60svh,820px)}}
@media(max-height:840px){.au-stage.au-stage--compact{min-height:clamp(560px,60svh,820px)}}
@media(max-width:520px){.au-stage.au-stage--compact{min-height:clamp(580px,60svh,700px)}}
.au-compact{position:relative;z-index:2;width:min(880px,92vw);margin:0 auto;text-align:center;padding:clamp(128px,18vh,180px) clamp(20px,4vw,40px) clamp(52px,8vh,80px)}
.au-compact .au-eyebrow{justify-content:center}
.au-compact .au-h1{font-size:clamp(2.1rem,4.4vw,3.4rem);margin-top:16px}
.au-compact .au-sub{margin-left:auto;margin-right:auto;max-width:60ch}
.au-compact .au-actions{justify-content:center}
.au-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.au-chips .au-chip{background:var(--au-glass);border:1px solid var(--au-glass-brd);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.au-chips .au-dot--growth{background:var(--au-mag)}
.au-chips .au-dot--innovation{background:var(--au-cyan)}
@media(max-width:520px){.au-compact{padding-top:clamp(104px,20vw,132px)}}

/* motion elements start hidden; aurora.js drives enter + scroll-exit */
.aurora [data-au-fx]{opacity:0;will-change:transform,opacity,filter}

/* short viewports (laptops ~720px tall): compress so the hero fits without cutoff */
@media (max-height:820px){
  .au-h1{font-size:clamp(1.9rem,2.6vh + .6rem,2.9rem)}
  .au-sub{margin-top:12px;font-size:1rem;line-height:1.5}
  .au-actions{margin-top:18px}
  .au-frame{padding-top:clamp(120px,13vh,138px);padding-bottom:32px;gap:14px}
  .au-card{padding:15px 18px}
  .au-card p{font-size:.82rem}
  .au-stack{gap:10px}
}
/* tablet + phone: single column stack, clear the nav, hero may scroll */
@media(max-width:860px){
  /* Full heroes only. The compact archive hero holds its fixed height here, which is
     why its rule is written `.au-stage.au-stage--compact` — same-specificity and later
     in the file, this would otherwise win and the archives would go back to varying
     with their copy on every screen under 860px. */
  .au-stage{min-height:auto}
  .au-frame{grid-template-columns:1fr;grid-template-rows:auto;gap:16px;padding-top:clamp(104px,16vw,128px);padding-bottom:40px}
  .au-copy,.au-top,.au-stack,.au-bottom{grid-column:1;grid-row:auto;justify-self:stretch;align-self:auto;max-width:none;width:auto}
  .au-top{order:-1;justify-self:start}
  .au-stack{width:auto}
}
@media(max-width:520px){
  .au-frame{padding-left:20px;padding-right:20px}
  .au-h1{font-size:clamp(2rem,9vw,2.6rem)}
  .au-actions{gap:10px}
  .au-cta,.au-ghost{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .aurora *{animation:none!important}
  .aurora [data-au-fx]{opacity:1!important;transform:none!important;filter:none!important}
}