/* ==========================================================================
   Immersive Royal Hero — Vertical Intelligence
   DESIGN.md correction pass 3. Consumed by index.html.

   Governance
   ----------
   This file defines NO custom properties and contains NO hex literals. Every
   colour is a token, a color-mix() derivation of a token, or a plain
   white/black keyword. Every duration and easing resolves to a token, with no
   var() fallbacks — the six hero motion tokens now live in css/tokens.css:

     --duration-hero-carousel   800ms
     --duration-hero-hold      3200ms
     --duration-hero-signal    1600ms
     --duration-mesh-a        26000ms
     --duration-mesh-b        35000ms
     --duration-mesh-c        44000ms

   Motion hierarchy (highest first)
   --------------------------------
     1. The connector signal — crisp, 2px, full opacity, finite.
     2. The carousel state exchange — opacity / border-colour / scale only.
     3. Infrastructure line luminance — blurred, never brighter than (1).
     4. The mesh fields — very slow transform + opacity.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section 6 — Sticky navigation
   Transparent over the Royal hero, Royal-derived translucent after ~32px of
   scroll, warm-neutral once the page reaches the light sections. Never a pill.
   Full-bleed in every state. Scrolling also compacts the bar 96 -> 72px
   (76 -> 64px on mobile) with the logo and links scaling with it.
   -------------------------------------------------------------------------- */

/* Self-sufficiency: this sheet is consumed by pages that do not load
   luminous-theme.css, so it owns the hero's box model, link reset and header
   layout rather than inheriting them. Scoped to the hero and its navigation. */
:root { color-scheme: light; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--brand-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Header entrance fades only — reveal-up animates transform with fill:both,
   which would outrank the hidden-header translate forever. */
.reveal-nav { animation: header-fade-in .65s .15s both; }
.reveal-eyebrow { animation: reveal-up .6s .3s both; }
.reveal-title { animation: reveal-up .75s .45s both; }
.reveal-support { animation: reveal-up .7s .65s both; }

@keyframes header-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes reveal-up {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.hr-hero,
.hr-hero *,
.hr-hero *::before,
.hr-hero *::after,
.hr-page .lum-header,
.hr-page .lum-header *,
.hr-page .mobile-nav,
.hr-page .mobile-nav * { box-sizing: border-box; }

.hr-hero a,
.hr-page .lum-header a,
.hr-page .mobile-nav a { text-decoration: none; }

/* Keyboard users can bypass the repeated navigation without adding a visible
   control to the resting composition. */
.skip-link {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 1000;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: var(--weight-semibold) 14px/1 var(--font-body);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-8)));
  transition: transform var(--duration-micro) var(--ease-standard);
}

.skip-link:focus-visible { transform: none; }

#main-content:focus { outline: none; }

.hr-page .lum-header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  max-width: none;
  height: 96px;                       /* 96px desktop at rest, 72px compact */
  margin: 0;
  /* Gutters come from .container-page, which the header carries in the markup
     alongside .hr-inner and the sections below — one definition, so the logo
     cannot drift off the H1's line. The surface itself stays full-bleed.
     Nothing here may set padding-inline: this rule outranks the container. */
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: var(--space-6);
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;                   /* no floating pill container */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transform: translateY(0);
  transition:
    transform var(--duration-normal) var(--ease-standard),
    height var(--duration-normal) var(--ease-standard),
    background var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    backdrop-filter var(--duration-normal) var(--ease-standard);
}

/* Compact height applies to both scrolled states — over the Royal hero and
   over the light sections below it. The header is fixed, so the page content
   below cannot shift when it resizes. */
.hr-page .lum-header.is-royal-scrolled,
.hr-page .lum-header.is-light { height: 72px; }

/* Scrolling down past the hero moves the bar out of the way; scrolling up
   brings it straight back. Transform only — height, opacity and layout are
   untouched by the hide/show. */
.hr-page .lum-header.is-hidden { transform: translateY(-100%); }

/* Both scrolled states carry the same bar. The header is the brand primary at
   every scroll position — over the Royal hero and over the light sections
   below it — so .is-light no longer changes how the bar looks, only how tall
   it is and where the mobile drawer hangs from.

   No backdrop-filter: the fill is opaque, so there is nothing to see through
   it, and the blur only cost compositing on every scroll frame. */
.hr-page .lum-header.is-royal-scrolled,
.hr-page .lum-header.is-light {
  background: var(--brand-primary);
  border-bottom-color: rgba(255, 255, 255, .1);
}

.hr-page .lum-logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  /* Sized for HEIGHT, which is what the 96px bar is tuned around — roughly
     30-32px of mark. The width that produces it moves with the lockup:

       5.92 ratio -> 180px wide rendered ~30px tall
       3.39 ratio -> 108px wide rendered ~32px tall   (set 11 Oct)
       4.67 ratio -> 108px wide renders  23.1px tall  <- the new lockup

     The 11 Oct width was kept through the 17 Oct lockup change, so the mark
     lost a third of its height and read small in the bar. 160px restores it at
     34.3px, on the 8px scale. One width across every breakpoint: the two
     overrides below repeat it rather than scale. */
  width: 160px;
  min-height: 44px;
  line-height: 0;
}   /* The mark remains 28px; the link owns a full 44px target. */

/* display:block is load-bearing, not cosmetic. As an inline replaced element
   the logo sits on the text baseline and the mark shifts. The hero was
   borrowing this from Tailwind Preflight's img/svg reset; Preflight is off, so
   it is declared here. See the element resets at the foot of this file. */
.hr-page .lum-logo img { display: block; width: 100%; filter: brightness(0) invert(1); }

.hr-page .lum-nav {
  display: flex;
  justify-self: center;
  gap: var(--space-8);
}

.hr-page .lum-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--space-3);
}

.hr-page .lum-nav a,
.hr-page .lum-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                   /* 44x44 minimum touch target */
  /* Never wraps. Between 1100px — where the desktop nav appears — and roughly
     1240px the three header columns are tight enough that "Sign In" broke onto
     two lines inside its 44px target, which read as a layout fault rather than
     a label. Measured wrapping at 1180. */
  white-space: nowrap;
  font: var(--weight-medium) 15px/1 var(--font-body);
  letter-spacing: normal;
  color: rgba(255, 255, 255, .78);
  transition: color var(--duration-micro) var(--ease-standard);
}


.hr-page .lum-nav a:hover,
.hr-page .lum-text-link:hover { color: white; }

.hr-page .lum-text-link {
  padding-inline: var(--space-4);
  color: white;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: color var(--duration-micro) var(--ease-standard);
}

.hr-page .lum-text-link:hover {
  color: color-mix(in srgb, white 76%, var(--brand-primary));
}

/* The bar is Royal on every section now, so the logo stays knocked out to
   white, the navigation keeps its white-on-Royal treatment, and none of the
   warm-neutral overrides this state used to carry apply. */

/* ---- Mobile navigation: fade + translateY(-8px -> 0), never a height change */

.hr-page .nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .06);
  color: white;
}

.hr-page .nav-toggle span,
.hr-page .nav-toggle::before,
.hr-page .nav-toggle::after {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform var(--duration-micro) var(--ease-standard), opacity var(--duration-micro) var(--ease-standard);
}

.hr-page .nav-toggle::before,
.hr-page .nav-toggle::after { content: ""; position: absolute; }
.hr-page .nav-toggle::before { transform: translateY(-6px); }
.hr-page .nav-toggle::after { transform: translateY(6px); }
.hr-page .nav-toggle[aria-expanded="true"] span { opacity: 0; }
.hr-page .nav-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.hr-page .nav-toggle[aria-expanded="true"]::after { transform: rotate(-45deg); }

/* The toggle keeps its Royal-bar treatment at every scroll position. */

.hr-page .mobile-nav {
  position: fixed;
  top: 96px;
  left: auto;
  right: var(--space-4);
  width: calc(100% - var(--space-8));
  max-width: 360px;
  z-index: 99;
  display: none;
  flex-direction: column;
  padding: var(--space-3);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-inverse) 94%, transparent);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.hr-page .lum-header.is-royal-scrolled ~ .mobile-nav,
.hr-page .lum-header.is-light ~ .mobile-nav { top: 72px; }

.hr-page .mobile-nav.is-open {
  display: flex;
  animation: hr-drawer var(--duration-normal) var(--ease-standard) both;
}

@keyframes hr-drawer { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }

.hr-page .mobile-nav a {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: 0 var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font: var(--weight-medium) 15px/1 var(--font-body);
  color: rgba(255, 255, 255, .82);
}

.hr-page .mobile-nav a:last-child { border-bottom: 0; }
.hr-page .mobile-nav a:hover { color: white; }

@media (max-width: 1099px) {
  .hr-page .lum-header {
    display: flex;
  }
  .hr-page .lum-nav { display: none; }
  .hr-page .lum-logo { width: 160px; flex: none; }
  .hr-page .lum-actions { margin-left: auto; }
  .hr-page .nav-toggle { display: flex; }
}

/* Tablet already keeps authentication and conversion actions in the header;
   the drawer carries only primary navigation there. Compact mobile restores
   both actions because the header intentionally removes them below 480px. */
@media (min-width: 481px) and (max-width: 1099px) {
  .hr-page .mobile-nav a.mobile-nav__auth,
  .hr-page .mobile-nav a.mobile-nav__cta { display: none; }
}

@media (max-width: 480px) {
  .hr-page .lum-logo { width: 160px; }
  /* The mobile drawer owns authentication and conversion actions at this
     width. Keeping them in the bar left four controls fighting for 390px. */
  .hr-page .lum-actions { display: none; }
  .hr-page .nav-toggle { margin-left: auto; }
}

/* A Royal ring is the default on light sections. Dark and Royal surfaces
   switch to white below so focus always keeps strong local contrast. */
.hr-page :is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.hr-page :is(.lum-header, .mobile-nav, .hr-hero, .industry-tabs, .start, .site-footer)
  :is(a, button, [tabindex]):focus-visible {
  outline-color: white;
}

/* --------------------------------------------------------------------------
   Section 1 + Section 7 — Hero shell
   58 / 38 editorial split, 72px major gap, 92vh so the next section's top
   edge is visible at rest.
   -------------------------------------------------------------------------- */

.hr-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--brand-primary);
  color: white;
  min-height: 92vh;                   /* the Natural Canvas edge stays visible */
  display: flex;
  align-items: center;
  padding: calc(96px + var(--space-16) * 2) 0 calc(var(--space-24) * 2);
}

.hr-inner {
  /* Width and gutters come from .container-page in the markup. */
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 38fr);
  column-gap: calc(var(--space-16) + var(--space-2));       /* 72px */
  align-items: center;
}

/* Section 7 — the hero ends on a decisive edge, not a bloom.

   The ambient mesh settles into flat --brand-primary across the last
   --space-16 so the boundary is one uniform colour at every x, then the Royal
   field simply stops and --bg-canvas begins. The run stays inside the Royal
   family the whole way — it never interpolates toward white, so there is no
   desaturated grey-lavender zone and nothing can exceed the surface it
   transitions into. No fade into canvas, no glow, no blur, no shadow. */
.hr-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--space-16);            /* 64px */
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, var(--brand-primary) 100%);
}

/* The first light section opens directly on the Natural Canvas — no haze. */
.hr-page .hr-hero + * {
  position: relative;
  background: var(--bg-canvas);
}

/* --------------------------------------------------------------------------
   Section 5 — Ambient field: mesh, infrastructure lines, grain
   Atmospheric, never competing with the connector.
   -------------------------------------------------------------------------- */

.hr-atmos {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* A deepening scrim across the editorial column. It holds AA contrast for the
   headline and lede no matter where the mesh drifts. */
.hr-atmos::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--brand-primary) 34%, black) 0%,
    color-mix(in srgb, var(--brand-primary) 62%, black) 26%,
    transparent 58%
  );
  opacity: .72;
}

/* Three Royal-derived fields with real tonal separation: a light lift behind
   the product story, a deep field under the editorial column, and a mid
   lavender that keeps the centre from flattening. Blur is static — only
   transform and opacity animate. */
.hr-mesh {
  position: absolute;
  border-radius: 50%;
  filter: blur(96px);
  will-change: transform, opacity;
}

/* A — the lift. Sits over the carousel side only; the cards are opaque, so it
   never sits behind body copy. */
.hr-mesh-a {
  width: 52vw; height: 52vw;
  top: -26%; right: -16%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 44%, white) 0%, transparent 66%);
  opacity: .46;
  animation: hr-drift-a var(--duration-mesh-a) var(--ease-standard) infinite alternate;
}

/* B — the depth. */
.hr-mesh-b {
  width: 64vw; height: 64vw;
  bottom: -34%; left: -18%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 32%, black) 0%, transparent 70%);
  opacity: .8;
  animation: hr-drift-b var(--duration-mesh-b) var(--ease-standard) infinite alternate;
}

/* C — the mid lavender. */
.hr-mesh-c {
  width: 44vw; height: 44vw;
  top: 30%; left: 38%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 8%, white) 0%, transparent 72%);
  opacity: .16;
  animation: hr-drift-c var(--duration-mesh-c) var(--ease-standard) infinite alternate;
}

@keyframes hr-drift-a { from { transform: translate3d(0, 0, 0) scale(1);    opacity: .34 } to { transform: translate3d(-5%,  6%, 0) scale(1.12); opacity: .54 } }
@keyframes hr-drift-b { from { transform: translate3d(0, 0, 0) scale(1.06); opacity: .62 } to { transform: translate3d( 6%, -5%, 0) scale(1);    opacity: .88 } }
@keyframes hr-drift-c { from { transform: translate3d(0, 0, 0) scale(.94);  opacity: .09 } to { transform: translate3d(-4%,  7%, 0) scale(1.14); opacity: .24 } }

/* Seven sparse vertical infrastructure lines — texture, never a grid. */
.hr-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 11%, black 89%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 11%, black 89%, transparent 100%);
}

.hr-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .11);
}

.hr-line:nth-child(1) { left: 7% }
.hr-line:nth-child(2) { left: 19% }
.hr-line:nth-child(3) { left: 31% }
.hr-line:nth-child(4) { left: 44% }
.hr-line:nth-child(5) { left: 58% }
.hr-line:nth-child(6) { left: 72% }
.hr-line:nth-child(7) { left: 87% }

/* Ambient animation stops consuming compositor time once the hero leaves the
   viewport. Its state is preserved, so returning does not restart the scene. */
.hr-hero.is-offscreen .hr-mesh,
.hr-hero.is-offscreen .hr-line-pulse,
.hr-hero.is-offscreen .hr-type-caret { animation-play-state: paused; }

/* Only three lines carry a travelling luminance at any moment. Blurred and
   soft — it must never read as brighter than the connector signal. */
.hr-line-pulse {
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 190px;
  opacity: 0;
  filter: blur(6px);
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .5) 50%, transparent);
  will-change: transform, opacity;
  animation: hr-line-travel calc(var(--duration-ambient) * 2) linear infinite;
}

.hr-line:nth-child(2) .hr-line-pulse { animation-duration: calc(var(--duration-ambient) * 2.4); animation-delay: calc(var(--duration-ambient) * -1.1) }
.hr-line:nth-child(5) .hr-line-pulse { animation-duration: calc(var(--duration-ambient) * 1.8); animation-delay: calc(var(--duration-ambient) * -.4) }
.hr-line:nth-child(7) .hr-line-pulse { animation-duration: calc(var(--duration-ambient) * 2.9); animation-delay: calc(var(--duration-ambient) * -1.8) }

@keyframes hr-line-travel {
  0%        { opacity: 0;   transform: translate3d(0, -32vh, 0) }
  12%, 86%  { opacity: .62 }
  100%      { opacity: 0;   transform: translate3d(0, 132vh, 0) }
}

/* Fine, static grain. */
.hr-grain {
  position: absolute;
  inset: 0;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Section 1 — Editorial column
   -------------------------------------------------------------------------- */

.hr-copy {
  min-width: 0;
  max-width: 880px;                   /* explicit cap: the H1 cannot escape it */
}

/* A stable, complete H1 remains available to assistive technology while the
   visible rotating treatment is excluded from the accessibility tree. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hr-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  font: var(--weight-semibold) 13px/1.4 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Lavender rather than white so it stays subordinate to the H1. 6.59:1. */
  color: color-mix(in srgb, var(--brand-primary) 24%, white);
}

.hr-eyebrow::before {
  content: "";
  width: var(--space-8);
  height: 1px;
  flex: none;
  background: color-mix(in srgb, var(--brand-primary) 30%, white);
}

/* Sized against the LONGEST vertical in the rotation ("Manufacturing."), not
   the shortest, so no value can overrun the column. With the vertical set
   inline on the first line, that line is the widest thing in the column and
   it is what fixes the scale. Measured: "Private AI Built for Manufacturing."
   clears the carousel by the required 48px at 3.74vw (1680), 3.69vw (1440)
   and 3.64vw (1280), so 3.6vw holds at every width with a little margin, and
   the 60px cap keeps it honest past ~1667px where the content stops widening
   but vw does not. Below 1280px the hero stacks and the override at the foot
   of this file takes over — there is no right column left to overrun. */
.hr-title {
  max-width: 100%;
  margin: 0 0 var(--space-8);
  font-family: var(--font-display);
  font-size: clamp(44px, 3.6vw, 60px);
  font-weight: var(--weight-bold);
  color: white;                       /* first sentence carries full white */
  line-height: 1.02;
  letter-spacing: -.062em;
  overflow-wrap: break-word;
}

/* "Built for" carries the dynamic vertical on its own line. */
/* A clean two-sentence colour split: the first sentence is full white for its
   whole length, rotating vertical included, and the second carries the brand
   colour. Held at a richer
   mix than the eyebrow: at the eyebrow's 24% the two were the same value, so
   the second sentence read as a repeat of the label rather than the louder
   half of the headline. 5.52:1 — large text needs 3:1. */
.hr-title-line { display: block; }

/* The desktop composition has three authored lines. Keep those lines intact
   across browser zoom levels and small font-metric differences; narrower
   layouts retain natural wrapping below the split breakpoint. */
@media (min-width: 1280px) {
  .hr-title-line { white-space: nowrap; }

  /* Only the first line is measured against the carousel, because only it
     carries the vertical; the scale on .hr-title is set by the longest value
     that line can receive. The second sentence has no such constraint — it is
     the same two short lines whatever is rotating — so it keeps the larger
     scale the headline used before the vertical moved inline, and the split
     becomes the hierarchy: a quieter qualifying line over a louder claim.

     Scoped to the two full accent LINES, not .hr-title-accent, which also
     wraps the vertical inside line one and must stay at line one's size.
     Desktop only: below 1280px the hero stacks, the first line is no longer
     measured against anything, and one uniform scale is correct again. */
  .hr-title-line.hr-title-accent { font-size: clamp(60px, 5vw, 96px); }
}

.hr-title-accent {
  color: color-mix(in srgb, var(--brand-primary) 32%, white);
}

/* The vertical sits inline at the end of the first line, so the slot no
   longer reserves a measure. On its own line the reservation fixed the wrap
   once so a rotation could not move the lede or the actions; inline, with the
   line held by white-space:nowrap, there is no wrap to fix and the reservation
   only pushed the line's right edge out by its slack. Width follows the value. */
.hr-type {
  display: inline-block;
}

/* A hairline caret in the accent's own colour — currentColor, never Gold.
   The blink is the only motion here: no glow, no bloom, no scale. */
.hr-type-caret {
  display: inline-block;
  width: 2px;
  height: .78em;
  margin-left: .06em;
  vertical-align: -.04em;
  background: currentColor;
  animation: hr-caret 1.1s linear infinite;
}

.hr-type-word {
  transition: opacity var(--duration-micro) var(--ease-standard);
}

.hr-type-word.is-changing { opacity: 0; }

@keyframes hr-caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }


/* 18px at 74% white — 6.39:1 on the Royal field, passes WCAG AA. Lit against
   the larger headline above it: at 66% the supporting line sagged grey under
   the H1 instead of carrying it. */
.hr-lede {
  max-width: 560px;
  margin: 0 0 var(--space-10);
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .74);
}

.hr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   Section 2 — Vertical intelligence carousel: three complete cards
   Active card centred and full strength; flanking cards complete in structure
   but receded. Only opacity, border-colour and scale animate — never layout.
   -------------------------------------------------------------------------- */

/* One containing frame so the column reads as a single object. Hairline plus a
   barely-there Royal-derived lift; no shadow, glow or blur, never animates. */
.hr-stage {
  min-width: 0;
  max-width: 544px;                   /* the frame is narrower than its column */
  margin-inline: auto;                /* and centred in what is left of it */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;                             /* the connector owns the whole run */
  /* Deeper top and bottom than the sides: the run needs air above the first
     card and below the foundation, while every pixel taken off the sides goes
     straight into card width, which is where the vertical names need it. */
  padding: var(--space-16) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--border-default) 22%, transparent);
  border-radius: var(--radius-xl);
  overflow: hidden;                   /* the frame cuts the tilted flanking pair */
  background: color-mix(in srgb, color-mix(in srgb, var(--brand-primary) 30%, white) 9%, transparent);
}

.hr-carousel {
  width: 100%;
  display: grid;
  /* The flanking columns take a larger share than they did: the run is three
     cards, not one card with two markers. The active card stays the widest
     and the tallest, which is what carries the hierarchy. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;                             /* the fan's own outward shift is the spacing */
}

/* Loop slider: every selection is one left-to-right pass of the whole run.
   The current set leaves to the right, the run is placed off the left edge,
   and the incoming vertical travels back in and settles. The two halves are
   joined at the exact instant the cards sit at their lowest opacity and the
   content is rewritten, so the jump is never visible and the pass reads as
   one continuous slide. The frame's overflow keeps the travel inside the box. */
.hr-stage.is-sliding .hr-carousel {
  animation: hr-slide var(--duration-hero-carousel) var(--ease-standard) 1 both;
}

/* The run travels LEFT TO RIGHT: the outgoing vertical leaves towards the
   right edge and the incoming one enters from the left.

   This only reads as ordered because render() feeds it to match — the LEFT
   card holds the vertical that is coming next, so the thing entering from the
   left is genuinely the next one in the list. Reverse this animation without
   swapping those two fills and every advance reads as a step backwards while
   the sequence underneath moves forwards, which is how this looked before.

   The mid-point flip is deliberate and has to stay aligned with the script:
   select() swaps the card content at exactly half the carousel duration, which
   is the same instant this jumps the row to the far side. Change one and the
   content will appear to fly in from the wrong edge. */
@keyframes hr-slide {
  0%    { transform: translateX(0);    animation-timing-function: var(--ease-exit) }
  49.9% { transform: translateX(26%) }
  50%   { transform: translateX(-26%); animation-timing-function: var(--ease-enter) }
  100%  { transform: translateX(0) }
}

.hr-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;            /* content stack centred in the card */
  gap: var(--space-4);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-xl);    /* hero/product field radius */
  /* A Royal-derived tone DEEPER than the hero field. Depth on a saturated
     ground comes from deepening, not from a lighter translucent veil. */
  background: color-mix(in srgb, var(--brand-primary) 58%, black);
  color: white;
  text-align: center;
  transition:
    opacity calc(var(--duration-hero-carousel) / 2) var(--ease-standard),
    border-color calc(var(--duration-hero-carousel) / 2) var(--ease-standard),
    transform calc(var(--duration-hero-carousel) / 2) var(--ease-standard);
}

.hr-card-active {
  position: relative;                 /* containing block for the arrival trace */
  isolation: isolate;                 /* and for the arrival bloom's z-index: -1 */
  height: clamp(284px, 17.4vw, 292px);
  padding: clamp(var(--space-4), 1.2vw, var(--space-6));
  border-color: var(--border-emphasis);     /* strongest border in the composition */
  background: color-mix(in srgb, var(--brand-primary) 52%, black);
  opacity: 1;
  transform: scale(1);
}

/* Arrival state: when the finite signal lands, the active card's border
   brightens once over --duration-micro, then settles back to its resting
   border over --duration-normal. Border-colour only — no scale, size,
   position or box-shadow — and one pass per selection, never a pulse or a
   loop during the hold. It stays quieter than the connector signal. */
.hr-stage.is-arriving .hr-card-active {
  border-color: rgba(255, 255, 255, .9);
  transition-property: border-color;
  transition-duration: var(--duration-micro);
}

.hr-stage.is-arrived .hr-card-active {
  transition-property: border-color;
  transition-duration: var(--duration-normal);
}

/* Arrival bloom — the one place the composition carries light, and it is
   never lit at rest: it comes up as the signal lands, settles to a quiet
   lift while the vertical is held, and goes out again as the next vertical
   takes over. It is what separates the connected card from the flanking pair,
   which share its fill.

   The light sits behind the icon, the card's focal point, and is out before
   it reaches the IMPACT block, so the Gold keeps its contrast against the
   card's own fill. Royal-derived and white only: Gold stays on the signal and
   the outcome. Inside the card, never a halo around it — the field behind the
   card stays flat.

   z-index: -1 puts the bloom above the card's fill and below its text; the
   card's isolation is what makes that layer local to the card. */
.hr-card-active::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(72% 46% at 50% 32%,
    color-mix(in srgb, var(--brand-primary) 58%, white) 0%,
    color-mix(in srgb, var(--brand-primary) 74%, white) 42%,
    transparent 78%);
  transition: opacity var(--duration-normal) var(--ease-standard);
}

/* Up on the same beat as the border brightening and IMPACT... */
.hr-stage.is-arriving .hr-card-active::before {
  opacity: .55;
  transition-duration: var(--duration-micro);
}

/* ...then down to the level it holds for the rest of the selection. High
   enough that the connected card is unmistakably the lit one next to the
   flanking pair it shares a fill with, low enough that every value on it
   keeps its measured contrast. */
.hr-stage.is-arrived .hr-card-active::before {
  opacity: .32;
  transition-duration: var(--duration-story);
}

/* Arrival trace — one luminous segment runs the card's perimeter once, from
   the connector's contact point at bottom centre and back to it.

   An SVG stroke with pathLength="100" keeps the geometry exact at the
   card radius (--radius-xl) — real arcs, no stacked pseudo-element
   rotations, no corner artefacts. Three co-leading dashes give the Royal -> lavender -> Gold ramp
   with Gold as the head: each dash shares a leading edge (offset = its own
   length minus the shared travel), and the shortest is painted last.
   Border only — no filter, no glow, no shadow. */
.hr-trace {
  position: absolute;
  inset: -1px;                        /* the card's 1px border box */
  overflow: visible;
  pointer-events: none;
  opacity: 0;
}

.hr-card-active .hr-trace path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.hr-trace-tail { stroke: color-mix(in srgb, var(--brand-primary) 42%, white); stroke-dasharray: 25 100; }
.hr-trace-mid  { stroke: color-mix(in srgb, var(--brand-primary) 22%, white); stroke-dasharray: 15 100; }
.hr-trace-head { stroke: var(--brand-accent);                                 stroke-dasharray:  5 100; }

/* One pass per selection. The travel spans 125 units so the tail clears the
   end point and the segment is consumed exactly where it started. */
.hr-stage.is-tracing .hr-card-active .hr-trace { opacity: 1; }
.hr-stage.is-tracing .hr-card-active .hr-trace-tail { animation: hr-trace-tail calc(var(--duration-hero-signal) * .75) linear 1 both; }
.hr-stage.is-tracing .hr-card-active .hr-trace-mid  { animation: hr-trace-mid  calc(var(--duration-hero-signal) * .75) linear 1 both; }
.hr-stage.is-tracing .hr-card-active .hr-trace-head { animation: hr-trace-head calc(var(--duration-hero-signal) * .75) linear 1 both; }

@keyframes hr-trace-tail { from { stroke-dashoffset: 25 } to { stroke-dashoffset: -100 } }
@keyframes hr-trace-mid  { from { stroke-dashoffset: 15 } to { stroke-dashoffset: -110 } }
@keyframes hr-trace-head { from { stroke-dashoffset:  5 } to { stroke-dashoffset: -120 } }

/* Complete structure, receded presence, vertically centred and slightly
   inset against the active card.

   Recession comes from the fill, the border and the scale — not from dimming
   the text. The fill sits between the hero field and the active card, so the
   card falls back toward the field while the active card stays the deepest
   surface in the composition. Element opacity is reserved for the icon
   container, which carries no reading burden. */
.hr-card-flank {
  height: clamp(208px, 14.4vw, 232px);
  padding: clamp(var(--space-3), .9vw, var(--space-4));
  background: color-mix(in srgb, var(--brand-primary) 70%, black);
  border-color: rgba(255, 255, 255, .13);
  opacity: 1;
  transform: scale(.92);
}

/* 9.54:1 against the flank fill — legible, and still well below the active
   card's 11.43:1 so the active card stays clearly dominant. */
.hr-card-flank .hr-vertical,
.hr-card-flank .hr-intel { color: rgba(255, 255, 255, .8); }

.hr-card-flank .hr-icon { opacity: .55; }

/* Impact belongs only to the active state. */
.hr-card-flank .hr-impact { display: none; }

/* The state exchange itself: opacity, border-colour and scale only. */
.hr-stage.is-swapping .hr-card-active {
  opacity: .3;
  border-color: rgba(255, 255, 255, .2);
  transform: scale(.975);
}

.hr-stage.is-swapping .hr-card-flank {
  opacity: .14;
  transform: scale(.9);
}

.hr-vertical {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: -.028em;
}

.hr-card-active .hr-vertical { font-size: clamp(19px, 1.45vw, 24px); }
.hr-card-flank  .hr-vertical { font-size: clamp(13px, .95vw, 15px); letter-spacing: -.02em; }

/* A 48px circular container so the vertical icon reads as a deliberate element
   rather than a floating glyph. Fill is a Royal-derived tone lighter than the
   card body. One rule for all three cards — the flanking pair inherits its
   recession from the card's own opacity rather than being styled separately.
   The container is a fixed-size flex item, so it needs an explicit centre;
   the card's text-align cannot place it on the shared axis. */
.hr-icon {
  width: 48px;
  height: 48px;
  flex: none;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 76%, white);
  color: white;
}

.hr-icon svg { display: block; width: 24px; height: 24px; stroke-width: 1.5; }

/* Two lines are always reserved, whether the label needs them or not. The
   intelligence titles are not the same length — "Risk Intelligence" sets on one
   line, "Care Operations Intelligence" takes two — and with the card content
   centred, a one-line label pulls everything below it up and the icon with it.
   Reserving the taller case makes the icon's position a property of the card
   rather than of whichever vertical happens to be showing, so the icons hold
   still through the rotation instead of stepping up and down. min-height, not
   height: a third line would still be shown rather than clipped. */
.hr-intel {
  margin: 0;
  min-height: 2.7em;                  /* 2 lines at line-height 1.35 */
  line-height: 1.35;
  color: rgba(255, 255, 255, .82);
}

.hr-card-active .hr-intel { font-size: clamp(13px, 1.02vw, 16px); }
.hr-card-flank  .hr-intel { font-size: 13px; }

/* Just above the 1280px breakpoint the flanking column is at its narrowest
   (~103px of text) and the longest title breaks to three lines — "Care" /
   "Operations" / "Intelligence" — where every other vertical still takes two.
   Two lines is the reservation everywhere else; here the tallest case is three,
   so the reservation follows it and the icons stay on one line through the
   rotation. The band ends at 1360px, where the column is wide enough to set
   "Care Operations" together again. */
@media (min-width: 1280px) and (max-width: 1359px) {
  .hr-card-flank .hr-intel { min-height: 4.05em; }   /* 3 lines at 1.35 */
}

/* Impact is hidden until the finite signal arrives. Gold is legitimate here:
   it is the outcome signal, not an action. */
.hr-impact {
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, .18);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--duration-normal) var(--ease-enter),
    transform var(--duration-normal) var(--ease-enter);
}

/* IMPACT reveals the moment the signal lands — on is-arriving, alongside the
   border brightening — not after the trace has run the card's perimeter. The
   outcome is the point of the arrival; it does not queue behind the border. */
.hr-stage.is-arriving .hr-card-active .hr-impact,
.hr-stage.is-arrived .hr-card-active .hr-impact { opacity: 1; transform: none; }

.hr-impact small {
  display: block;
  font: var(--weight-semibold) 12px/1.3 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}

.hr-impact strong {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.12vw, 18px);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: var(--brand-accent);
}

/* --------------------------------------------------------------------------
   Sections 3 + 4 — The connector
   A 64px run with no dead space at either end, and the most legible motion
   in the hero.
   -------------------------------------------------------------------------- */

.hr-connector {
  position: relative;
  width: 2px;
  height: var(--space-16);            /* 64px, card bottom to pill top */
  flex: none;
}

/* Royal → lavender → Gold, at full opacity along its whole path. The Royal
   end is lightened from the token so it stays legible on a Royal field. */
.hr-track {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--brand-primary) 42%, white) 0%,
    color-mix(in srgb, var(--brand-primary) 26%, white) 55%,
    var(--brand-accent) 100%
  );
}

/* The travelling segment: foundation → card, once per selection, never loops. */
.hr-signal {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 44%;
  opacity: 0;
  transform: translateY(0);           /* resting position = the card edge */
  background: linear-gradient(to top, transparent 0%, white 45%, var(--brand-accent) 100%);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--brand-accent) 55%, transparent));
  transition: opacity var(--duration-normal) var(--ease-standard);
}

.hr-stage.is-signalling .hr-signal {
  animation: hr-travel var(--duration-hero-signal) var(--ease-standard) 1 both;
}

/* Travels the full run: from the foundation pill up to the card edge, where
   its Gold tip stops. --space-16 is the connector's own height. */
@keyframes hr-travel {
  0%   { transform: translateY(var(--space-16)); opacity: 0 }
  12%  { opacity: 1 }
  100% { transform: translateY(0);               opacity: 1 }
}

/* Gold arrival endpoint at the card edge. */
.hr-endpoint {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--brand-accent);
  opacity: 0;
  transform: scale(.4);
  transition:
    opacity var(--duration-micro) var(--ease-enter),
    transform var(--duration-micro) var(--ease-enter);
}

.hr-stage.is-arriving .hr-endpoint,
.hr-stage.is-arrived .hr-endpoint { opacity: 1; transform: none; }

/* ---- Fixed ROIzor foundation (Royal, never Gold) ------------------ */

.hr-foundation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--space-6);
  /* Deeper than the frame and than the active card, with a hairline stronger
     than the frame's — the anchor should read as the most solid object here,
     while the active card keeps the strongest border. */
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 46%, black);
}

/* 101px, set 11 Oct, scaled by the header's own 118/180 factor so the three
   logo placements stay in proportion. The new mark is a 3.39 aspect ratio
   against the old 5.92, so 154px rendered 45px tall inside a node built for
   26px. The old "24px mark" note no longer applies: the mark is square now
   and fills the full height of the artwork. */
.hr-foundation img { width: 101px; height: auto; filter: brightness(0) invert(1); }

.hr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Responsive — 1280px split boundary, then 1100px, 768px, 390px
   -------------------------------------------------------------------------- */

/* Below 1280px the editorial split would squeeze the three cards, so the
   story stacks and the carousel takes the full content width. */
@media (max-width: 1279px) {
  .hr-hero { min-height: 0; padding: calc(96px + var(--space-12) * 2) 0 calc(var(--space-20) * 2); }
  .hr-inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-16); }
  .hr-copy { max-width: 720px; }
  .hr-title { font-size: clamp(56px, 6.8vw, 88px); }
  .hr-stage { width: min(100%, 720px); margin-inline: auto; }
  .hr-card-active { height: 276px; }
  .hr-card-flank { height: 212px; }
  .hr-card-active .hr-vertical { font-size: 24px }
  .hr-card-flank .hr-vertical { font-size: 15px }
  .hr-card-active .hr-intel { font-size: 15px }
  .hr-card-flank .hr-intel { font-size: 13px }
  .hr-impact strong { font-size: 18px }

}

@media (max-width: 767px) {
  .hr-page .lum-header { height: 76px; }
  .hr-page .lum-header.is-royal-scrolled,
  .hr-page .lum-header.is-light { height: 64px; }
  .hr-page .mobile-nav { top: 76px; }
  .hr-page .lum-header.is-royal-scrolled ~ .mobile-nav,
  .hr-page .lum-header.is-light ~ .mobile-nav { top: 64px; }
  .hr-hero { padding: calc(76px + var(--space-10) * 2) 0 calc(var(--space-16) * 2); }
  .hr-title { font-size: clamp(44px, 8.2vw, 64px); }
  .hr-stage { width: 100%; }
  .hr-carousel { gap: var(--space-1); }
  .hr-card-active { height: 272px; padding: var(--space-4); }
  .hr-card-flank { height: 200px; padding: var(--space-3); }
  .hr-card-active .hr-vertical { font-size: 20px }
  .hr-card-flank .hr-vertical { font-size: 13px }
  .hr-card-active .hr-intel { font-size: 13px }
  .hr-card-flank .hr-intel { font-size: 13px }
  .hr-impact strong { font-size: 16px }
  .hr-foundation img { width: 98px; }
}

@media (max-width: 480px) {
  .hr-title { font-size: clamp(38px, 10vw, 50px); }
  .hr-lede { font-size: 17px; }
  .hr-actions { flex-direction: column; align-items: stretch; }
  .hr-actions .btn { width: 100%; }
  /* Below 480px all three cards stay on stage, but the flanking pair narrows
     to a name rail: the intelligence title has no legible width left, so it
     steps back rather than being clipped or broken to three lines. */
  .hr-carousel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-1); }
  .hr-card-flank { height: 152px; padding: var(--space-2); text-align: center; align-items: center; justify-content: center; }
  .hr-card-flank .hr-intel { display: none; }
  /* With the intelligence title stepped back, the vertical name becomes the
     title that wraps — "Manufacturing" takes two lines where "Retail" takes
     one — so the two-line reservation moves onto it at this width. */
  .hr-card-flank .hr-vertical { font-size: 13px; line-height: 1.3; letter-spacing: -.03em; white-space: normal; min-height: 2.6em; }
  .hr-stage { padding: var(--space-12) var(--space-3); }
  .hr-card-active { height: 284px; padding: var(--space-3); }
  .hr-card-active .hr-vertical { font-size: 15px }
  .hr-card-active .hr-intel { font-size: 13px }
  .hr-impact strong { font-size: 15px }
  .hr-foundation { padding: var(--space-3) var(--space-6); }
  .hr-foundation img { width: 87px; }
}

/* Users who ask for more contrast get the flanking cards lifted out of the
   receded state; structure still reads as secondary through scale and border. */
@media (prefers-contrast: more) {
  .hr-card-flank .hr-vertical,
  .hr-card-flank .hr-intel { color: white; }
  .hr-lede { color: rgba(255, 255, 255, .88); }
}

/* --------------------------------------------------------------------------
   Reduced motion — the hero renders in a static, resolved state
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal-nav,
  .reveal-eyebrow,
  .reveal-title,
  .reveal-support { animation: none !important; }

  .hr-hero *,
  .hr-hero *::before,
  .hr-hero *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }

  .hr-mesh { animation: none !important; }
  .hr-line-pulse { display: none; }
  .hr-signal { display: none; }
  .hr-trace { display: none; }
  /* Nothing here is in motion, so the bloom would be a glow at rest. The
     connected card still separates on border, fill, scale and IMPACT. */
  .hr-card-active::before { display: none; }
  /* The slot keeps the full line it shipped with; a caret with nothing typing
     into it would read as a stray mark. */
  .hr-type-caret { display: none; }
  .hr-page .lum-header.is-hidden { transform: translateY(-100%); }
  .hr-page .lum-header,
  .hr-page .lum-logo,
  .hr-page .lum-nav a,
  .hr-page .lum-text-link { transition: none !important; }

  /* The connection and its outcome are shown, not revealed. */
  .hr-stage .hr-endpoint { opacity: 1; transform: none; }
  .hr-stage .hr-card-active .hr-impact { opacity: 1; transform: none; }
  .hr-stage.is-swapping .hr-card-active,
  .hr-stage.is-swapping .hr-card-flank { opacity: 1; transform: scale(.92); }
}

/* ==========================================================================
   Element resets — Preflight is disabled (tailwind.config.js)

   The hero was built against Tailwind's Preflight, delivered by the CDN build,
   and silently depended on several of its declarations. With Preflight off,
   those defaults revert to the UA stylesheet. Every one below was found by
   applying each Preflight rule in turn and diffing computed styles across all
   104 header, drawer and hero elements — see the batch 23 report.

   Written with :where() so the whole block carries ZERO specificity, exactly
   like Preflight. It must never outrank a component or a hero rule; it only
   supplies the baseline those rules assume.
   ========================================================================== */

/* The roots are listed as well as their descendants: Preflight's `*` matches
   the hero and the header themselves, not only what is inside them. */
:where(.hr-page .lum-header, .hr-page .mobile-nav, .hr-hero),
:where(.hr-page .lum-header, .hr-page .mobile-nav, .hr-hero) :where(*, *::before, *::after) {
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

/* The logo is the active dependency. logo_roizor.svg carries its own
   width/height attributes — 501x148 since 11 Oct 2026, 296x50 before that —
   and with width:100% and no CSS height the attribute wins, so the mark
   renders at the attribute's height instead of its scaled one. Preflight's
   height:auto was overriding the attribute. Changing the artwork means
   changing those attributes in the markup too. */
:where(.hr-page .lum-header, .hr-page .mobile-nav, .hr-hero) :where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
  vertical-align: middle;
}

:where(.hr-page .lum-header, .hr-page .mobile-nav, .hr-hero) :where(img, video) {
  max-width: 100%;
  height: auto;
}

/* Without this the logo link takes the UA's default link blue, which anything
   using currentColor inside it would inherit. */
:where(.hr-page .lum-header, .hr-page .mobile-nav, .hr-hero) :where(a) {
  color: inherit;
  text-decoration: inherit;
}

:where(.hr-page .lum-header, .hr-page .mobile-nav, .hr-hero) :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre) {
  margin: 0;
}

:where(.hr-page .lum-header, .hr-page .mobile-nav, .hr-hero) :where(ol, ul, menu) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* .nav-toggle otherwise inherits the UA button's Arial 13.33px and 1px 6px
   padding rather than the page's own type. */
:where(.hr-page .lum-header, .hr-page .mobile-nav, .hr-hero) :where(button, input, optgroup, select, textarea) {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

:where(.hr-page .lum-header, .hr-page .mobile-nav, .hr-hero) :where(button, [type="button"], [type="reset"], [type="submit"]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

:where(.hr-page .lum-header, .hr-page .mobile-nav, .hr-hero) :where(button, select) {
  text-transform: none;
}

/* Preflight sets line-height:1.5 on html; the hero inherited it. Most hero
   text declares its own, but the containers did not. */
:where(.hr-page .lum-header, .hr-page .mobile-nav, .hr-hero) {
  line-height: 1.5;
}