/* ==========================================================================
   ROYCE CAPITALS — homepage aviation hero
   File: css/royce-home-hero.css   (loaded by index.html only)

   Ported September 2026 from update/heroSection/css/royce-home-hero.css.
   Depends on the tokens declared in css/royce-header.css. Nothing here
   applies outside .rz-hero, so the shared .hero used by js/hero.js on the
   internal pages is untouched. The headline is Marcellus (the package's
   face, self-hosted under assets/font/marcellus/ since the 20 September 2026
   review — Latin only, so the Arabic title stays on Ping AR + LT); everything
   else inherits Ping AR + LT. The desktop copy column, title size and lede
   measure are set from the two faces' real advance widths so the English
   headline is one line and the lede about three at 1400px and up. The
   header tokens the package overrode from this file at 600px now live in
   css/royce-header.css, where header sizing belongs. Entrance motion keeps
   the site's .anim class names but runs the package's rz-rise curve (900ms,
   22px, 80-620ms stagger) — CSS-driven from first paint, where the package
   gates it behind .rz-js/.rz-ready. CTA geometry is the package's rz-btn--lg,
   expressed as css/buttons.css token overrides on the CTA row (September 2026
   re-sync from update/heroSection/royce-header-hero-master.html).
   ========================================================================== */

.rz-container {
  width: 100%;
  max-width: var(--rz-max-w, 1240px);
  margin-inline: auto;
  padding-inline: var(--rz-gutter, 40px);
}

:root {
  --rz-hero-focal-desktop: 65% 50%; /* ≥1025px                         */
  --rz-hero-focal-tablet: 66% 50%; /* 768-1024px — narrower crop      */
  --rz-hero-focal-mobile: 63% 48%; /* ≤600px — holds skyline + nose   */
  --rz-hero-min-h: 0px;
  --rz-hero-pad-top: 64px; /* added to the header height */
  --rz-hero-pad-bottom: 64px;
  --rz-hero-eyebrow-gap: 24px;
  --rz-hero-title-gap: 26px;
  --rz-hero-lede-gap: 32px; /* paragraph -> CTA row */
  /* "Trade in a Different Class." is 11.5em in Marcellus (with the -0.01em
     tracking below, 11.3em). The cap is what keeps it on one line inside the
     760px copy column: 66px x 11.3 = 745px. Every height tier further down
     stays under this cap for the same reason. */
  --rz-hero-title-size: clamp(2.6rem, 4.6vw, 4.125rem); /* 42-66px */
  --rz-hero-title-lh: 1.06;
}

.rz-hero {
  position: relative;
  isolation: isolate;
  /* The header is fixed and overlays the hero, so the hero owns the whole
     viewport and reserves the header height as internal top padding —
     rather than the old `header + full-height hero`, which overflowed.
     min-height, not height: if the content genuinely cannot fit (extreme
     zoom, tiny landscape) the hero grows and the page scrolls instead of
     clipping. */
  box-sizing: border-box;
  min-height: 100vh; /* fallback */
  min-height: 100dvh; /* active dynamic viewport */
  min-height: max(var(--rz-hero-min-h), 100dvh);
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Charcoal underlay sitting behind the image — visible only for the
     moment before it decodes, and behind any transparent edge. */
  background: radial-gradient(120% 86% at 78% 26%, #1e222a 0%, rgba(30, 34, 42, 0) 60%), linear-gradient(155deg, #1a1d23 0%, var(--rz-charcoal) 44%, #0c1015 100%);
}

.rz-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.rz-hero__picture {
  display: contents;
}

.rz-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills, never stretches */
  object-position: var(--rz-hero-focal-desktop); /* per-breakpoint focal   */
  display: block;
  /* The image is absolutely positioned inside a fixed-height hero, so it
     reserves no flow space and cannot cause layout shift as it decodes. */
}

.rz-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* horizontal scrim — dense behind the headline column, clearing
       almost completely across the skyline and the aircraft */
    linear-gradient(90deg, rgba(8, 11, 16, 0.9) 0%, rgba(8, 11, 16, 0.78) 26%, rgba(8, 11, 16, 0.5) 46%, rgba(8, 11, 16, 0.22) 64%, rgba(8, 11, 16, 0.08) 82%, rgba(8, 11, 16, 0.16) 100%),
    /* vertical scrim — seats the header, and a soft foot along the
       bottom edge so the brand signature reads over the apron */ linear-gradient(180deg, rgba(6, 9, 13, 0.58) 0%, rgba(6, 9, 13, 0.06) 24%, rgba(6, 9, 13, 0) 52%, rgba(6, 9, 13, 0.34) 82%, rgba(6, 9, 13, 0.72) 100%);
}

.rz-hero__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(78% 58% at 8% 76%, rgba(214, 166, 28, 0.075) 0%, rgba(214, 166, 28, 0) 62%);
}

/* RTL: the composition is authored for a left-hand headline column — the
   scrim is dense on the left and the aircraft sits on the right. Mirror the
   photo and its overlay together so the copy, now on the right, still lands
   over the calm skyline and the jet still faces the text. The overlay is a
   sibling of the media, not a child, so it needs its own flip; the focal
   tokens are applied before the transform and mirror with it. */
[dir='rtl'] .rz-hero__media,
[dir='rtl'] .rz-hero__overlay {
  transform: scaleX(-1);
}

/* RTL: the copy column, headline and lede run to the full column width. The
   pixel and em measures below were set for the English line breaks and box the
   Arabic text into a narrow ragged column; (0,1,1) also outranks the
   per-width max-widths in the media queries further down. */
/* [dir='rtl'] .rz-hero__content,
[dir='rtl'] .rz-hero__title{
  max-width: none;
} */

/* Marcellus has no Arabic glyphs and its @font-face is Latin-ranged, so the
   Arabic title would fall back glyph by glyph anyway; say so outright. */
[dir='rtl'] .rz-hero__title {
  font-family: inherit;
}

.rz-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  /* The bar is fixed and transparent over the hero, so the copy reserves its
     tall resting height plus the tier's own gap. Without this the flex
     centring puts the eyebrow straight under the nav. */
  padding-top: calc(var(--rz-header-h) + var(--rz-hero-pad-top));
  padding-bottom: var(--rz-hero-pad-bottom);
}

.rz-hero__content {
  /* 760 of the 1240 container: what the one-line headline and a three-line
     lede need in these faces; the scrim is dense to about the same point. */
  max-width: 760px;
}

.rz-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rz-gold);
}

.rz-hero__eyebrow {
  margin-bottom: var(--rz-hero-eyebrow-gap);
}

.rz-hero__eyebrow::before {
  content: '';
  width: 42px;
  height: 1px;
  background: var(--rz-gold);
  flex: 0 0 auto;
}

.rz-hero__title {
  font-family: 'Marcellus', 'Ping AR + LT', serif;
  font-weight: 400;
  font-size: var(--rz-hero-title-size);
  line-height: var(--rz-hero-title-lh);
  letter-spacing: -0.01em;
  margin: 0 0 var(--rz-hero-title-gap);
  color: var(--rz-ivory);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55);
}

.rz-hero__lede {
  /* Bounded by the copy column, not a ch measure: the English lede is 126em
     in Ping AR + LT, and 17px x 126 / 760px is 2.8 lines. */
  margin: 0 0 var(--rz-hero-lede-gap);
  font-size: clamp(16px, 1.2vw, 17px);
  line-height: 1.72;
  color: rgba(248, 248, 248, 0.8);
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.5);
}

/* Two ledes, one visible: the desktop sentence runs five or six lines on a
   phone, so under 768px the shorter hero_desc_sm takes its place (the swap
   sits in the 767.98 block below). display:none also keeps the hidden copy
   out of the accessibility tree. */
.rz-hero__lede--sm {
  display: none;
}

.rz-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  /* The package's rz-btn--lg (17px 34px pad, 15px type, .04em tracking) on
     the site's button system: geometry stays in css/buttons.css, only the
     tokens change here — the same way .rz-actions narrows the header pair.
     Height is left at the shared 52px, which is what that padding resolves
     to; the package's 48px is a floor, not a target. */
  --btn-pad-x: 34px;
  --btn-font-size: 15px;
  --btn-tracking: 0.04em;
}

/* buttons.css zeroes tracking for Arabic on html.rtl; the row above would
   re-raise it, so zero it again one level down. */
.rtl .rz-hero__cta {
  --btn-tracking: 0px;
}

/* Package labels are sentence case ("Open an Account"). (0,2,0) outranks the
   (0,1,0) uppercase rule in buttons.css whatever the stylesheet order. */
.rz-hero__cta .rz-btn {
  text-transform: none;
}

.rz-hero__signature {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  z-index: 2;
}

.rz-hero__signature-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: rgba(248, 248, 248, 0.62);
}

.rz-hero__signature-inner::before {
  content: '';
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, var(--rz-gold), rgba(214, 166, 28, 0));
  flex: 0 0 auto;
}

/* Staggered entrance — the package's rz-rise curve on the same .anim class
   names the internal-page hero uses (css/style.css keeps its own heroFadeUp
   for those). CSS-driven from first paint, so nothing waits for a script to
   add a ready class; `both` holds the from-state through each delay. */
@keyframes rzHeroRise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.rz-hero .anim {
  animation: rzHeroRise 900ms var(--rz-ease) both;
}

.rz-hero .anim-1 {
  animation-delay: 80ms;
}

.rz-hero .anim-2 {
  animation-delay: 200ms;
}

.rz-hero .anim-3 {
  animation-delay: 320ms;
}

.rz-hero .anim-4 {
  animation-delay: 440ms;
}

.rz-hero .anim-5 {
  animation-delay: 620ms;
}

@media (max-width: 1199.98px) {
  .rz-hero__image {
    object-position: var(--rz-hero-focal-tablet);
  }
  .rz-hero__content {
    max-width: 640px;
  }
  /* Two lines by design from here down — "Trade in a / Different Class." —
     so the headline stays inside the dense side of the scrim, over the
     skyline rather than the aircraft. 8em sits between the first line
     (4.6em) and the two together (11.5em) in Marcellus. */
  .rz-hero__title {
    max-width: 8em;
  }
}

@media (max-width: 991.98px) {
  .rz-hero__overlay {
    background: linear-gradient(90deg, rgba(8, 11, 16, 0.66) 0%, rgba(8, 11, 16, 0.42) 60%, rgba(8, 11, 16, 0.3) 100%), linear-gradient(180deg, rgba(6, 9, 13, 0.8) 0%, rgba(6, 9, 13, 0.58) 34%, rgba(6, 9, 13, 0.34) 62%, rgba(6, 9, 13, 0.74) 100%);
  }
  .rz-hero__inner {
    padding-top: calc(var(--rz-header-h) + 118px);
    padding-bottom: 110px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --rz-hero-min-h: 600px;
  }
  .rz-hero__image {
    object-position: var(--rz-hero-focal-mobile);
  }
  .rz-hero__eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.26em;
    margin-bottom: 20px;
  }
  .rz-hero__eyebrow::before {
    width: 28px;
  }
  .rz-hero__title {
    font-size: clamp(2.15rem, 9.4vw, 3rem);
    margin-bottom: 20px;
  }
  .rz-hero__lede {
    margin-bottom: 34px;
  }
  .rz-hero__lede--lg {
    display: none;
  }
  .rz-hero__lede--sm {
    display: block;
  }
  .rz-hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .rz-hero__cta .rz-btn {
    width: 100%;
  }
  .rz-hero__signature {
    bottom: 30px;
  }
  .rz-hero__signature-inner {
    font-size: 13px;
    letter-spacing: 0.12em;
  }
  .rz-hero__signature-inner::before {
    width: 34px;
  }
}

@media (min-width: 1200px) and (max-height: 900px) {
  :root {
    --rz-hero-pad-top: 52px;
    --rz-hero-pad-bottom: 56px;
    --rz-hero-eyebrow-gap: 22px;
    --rz-hero-title-gap: 22px;
    --rz-hero-lede-gap: 30px;
    --rz-hero-title-size: clamp(3.4rem, 4.4vw, 4rem); /* 54-64px */
    --rz-hero-title-lh: 1.05;
  }
}

@media (min-width: 1200px) and (max-height: 800px) {
  :root {
    --rz-hero-pad-top: 44px;
    --rz-hero-pad-bottom: 48px;
    --rz-hero-eyebrow-gap: 18px;
    --rz-hero-title-gap: 20px;
    --rz-hero-lede-gap: 28px;
    --rz-hero-title-size: clamp(3.2rem, 4.2vw, 3.75rem); /* 51-60px */
    --rz-hero-title-lh: 1.04;
  }
  .rz-hero__lede {
    font-size: 16.5px;
    line-height: 1.66;
  }
  .rz-hero__signature {
    bottom: 34px;
  }
}

@media (min-width: 1200px) and (max-height: 720px) {
  :root {
    --rz-hero-pad-top: 36px;
    --rz-hero-pad-bottom: 40px;
    --rz-hero-eyebrow-gap: 16px;
    --rz-hero-title-gap: 18px;
    --rz-hero-lede-gap: 28px;
    --rz-hero-title-size: clamp(3rem, 4vw, 3.5rem); /* 48-56px */
    --rz-hero-title-lh: 1.03;
  }
  .rz-hero__lede {
    font-size: 16px;
    line-height: 1.6;
  }
  /* The package fixes the CTAs at 56px here (min-height, no vertical pad) */
  .rz-hero__cta {
    --btn-height: 56px;
  }
  .rz-hero__signature {
    bottom: 26px;
  }
}

/* Was two tiers (640 and 580); the ladder has no 580, so the tighter one
   now starts at 640 and the two are merged. */
@media (min-width: 1200px) and (max-height: 640px) {
  :root {
    --rz-hero-pad-top: 24px;
    --rz-hero-pad-bottom: 28px;
    --rz-hero-eyebrow-gap: 12px;
    --rz-hero-title-gap: 14px;
    --rz-hero-lede-gap: 24px;
    --rz-hero-title-size: clamp(2.6rem, 3.6vw, 3.1rem); /* 42-50px */
    --rz-hero-title-lh: 1.02;
  }
  .rz-hero__lede {
    font-size: 15px;
    line-height: 1.5;
    max-width: 66ch;
  }
  .rz-hero__signature {
    display: none;
  }
}

@media (min-width: 1200px) and (max-height: 480px) {
  .rz-hero {
    min-height: 0;
  }
}

@media (max-width: 991.98px) and (max-height: 560px) and (orientation: landscape) {
  .rz-hero {
    min-height: 560px;
  }
  .rz-hero__signature {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rz-hero .anim {
    animation: none;
    opacity: 1;
    transform: none;
  }
}