/* ==========================================================================
   Photography system.
   Images are a primary design element: cinematic hero, editorial crops,
   full-bleed bands, reveal masks. A unified restraint keeps them premium
   (no heavy filters); scrims exist only for text legibility.
   ========================================================================== */

.figure {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: var(--gray-100);
}

.figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Unified grade: seven photos from seven sources read as one
     art-directed set. Deliberately subtle — barely perceptible alone. */
  filter: saturate(0.95) contrast(1.03);
}

/* Reveal: image scales back from a slight zoom behind a clip (anim.js).
   Initial state is applied by JS only, so images are visible without it. */
[data-img-reveal] {
  will-change: clip-path;
}

/* ==========================================================================
   Cinematic hero (home, and reusable for any dark image hero)
   ========================================================================== */
.cinematic-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(96vh, 920px);
  /* Clear the fixed overlay header so the headline never sits under the nav. */
  padding-block: calc(var(--header-h) + clamp(1.5rem, 4vw, 3.5rem))
    clamp(3rem, 2rem + 5vw, 6rem);
  overflow: hidden;
  background-color: var(--gray-900);
  isolation: isolate;
  /* The hero is a drag/swipe target (hero-carousel.js) — without this,
     dragging over the headline/lede selects text instead of changing
     the slide. Buttons/links inside stay clickable; only text selection
     is disabled. */
  -webkit-user-select: none;
  user-select: none;
}

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

.cinematic-hero__media .figure,
.cinematic-hero__media img {
  width: 100%;
  height: 100%;
}

/* Static zoom gives parallax headroom so edges never reveal on drift. */
.cinematic-hero__media img,
.fullbleed__media img,
.image-hero__media img {
  scale: 1.08;
}

/* Slow idle Ken Burns — the hero breathes. `scale` is independent of
   `transform`, so it composes with the GSAP scroll parallax. */
@media (prefers-reduced-motion: no-preference) {
  .cinematic-hero__media img {
    animation: kenburns 26s ease-in-out infinite alternate;
  }
}

@keyframes kenburns {
  from { scale: 1.08; }
  to { scale: 1.17; }
}

/* Hero carousel: six destination photos crossfading in the background,
   in place of one static image. JS-driven (static/js/hero-carousel.js):
   it toggles `.is-active` on one slide/caption at a time — auto-advancing
   on a timer, or on drag/swipe (mouse or touch, via Pointer Events) —
   and the opacity transition below does the actual crossfade. Ken Burns
   (the slow zoom) is unrelated and keeps running on every slide via the
   base `.cinematic-hero__media img` rule above.
   Selectors are scoped as `.hero-carousel .hero-carousel__slide` (two
   classes) so they reliably outrank the older `.cinematic-hero__media
   img` rules above, which would otherwise win on specificity.
   No-JS fallback: the first slide shows statically (see `:first-child`
   below) so the hero is never blank if the script fails to load. */
.hero-carousel .hero-carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
}

.hero-carousel__slide:first-child {
  opacity: 1;
}

.hero-carousel .hero-carousel__slide.is-active {
  opacity: 1;
}

.hero-carousel .hero-carousel__slide:not(.is-active) {
  opacity: 0;
}

/* Grabbable affordance while the pointer is down over the hero. */
.hero-carousel {
  touch-action: pan-y;
  cursor: grab;
}

.hero-carousel.is-dragging {
  cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel .hero-carousel__slide {
    transition: none;
  }
}

/* Scrim: legibility for the overlay header (top) and headline (bottom). */
.cinematic-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgb(20 19 17 / 0.58) 0%,
      rgb(20 19 17 / 0.14) 30%,
      rgb(20 19 17 / 0.32) 62%,
      rgb(20 19 17 / 0.82) 100%
    );
}

.cinematic-hero__content {
  color: #fff;
  width: 100%;
}

.cinematic-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-block-end: var(--space-6);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.72);
}

.cinematic-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.cinematic-hero__meta span:not(:last-child)::after {
  content: "";
  width: 2rem;
  height: 1px;
  background: rgb(255 255 255 / 0.35);
}

.cinematic-hero h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-mega);
  line-height: 1.0;
  letter-spacing: -0.022em;
  max-width: 15em;
  text-wrap: balance;
}

.cinematic-hero h1 em {
  font-style: italic;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--warm-air);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}

/* A hairline flourish under the accent word */
.cinematic-hero h1 .u-underline {
  position: relative;
  white-space: nowrap;
}

/* Phones: the mega serif is too wide for the forced line breaks, so let
   each masked line wrap and scale the type down to fit small screens. */
@media (max-width: 40em) {
  .cinematic-hero h1 {
    font-size: clamp(2.4rem, 1.4rem + 5vw, 3.25rem);
    max-width: 100%;
  }

  .cinematic-hero .line-mask {
    overflow: visible;
  }

  .cinematic-hero .line {
    white-space: normal;
  }
}

.cinematic-hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-block-start: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  max-width: 62rem;
}

.cinematic-hero__lede {
  font-size: var(--text-lede);
  line-height: 1.6;
  color: rgb(255 255 255 / 0.86);
  max-width: 34rem;
}

.cinematic-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Light hero context: secondary button reads on dark */
.cinematic-hero .btn--secondary {
  border-color: rgb(255 255 255 / 0.4);
  color: #fff;
}

.cinematic-hero .btn--secondary:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 0.08);
}

/* Scroll cue */
.cinematic-hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  translate: -50% 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
}

.cinematic-hero__cue span {
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0.6), transparent);
  animation: cue 2.4s var(--ease-out) infinite;
  transform-origin: top;
}

@keyframes cue {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(2.5rem); opacity: 0; }
}

@media (max-width: 48em) {
  .cinematic-hero__cue { display: none; }
}

/* Attribution, unobtrusive */
/* Caption badge: names whichever hero-carousel photo is currently on
   screen. JS toggles `.is-active` on the caption matching the active
   slide's index, in lockstep — see static/js/hero-carousel.js. */
.hero-carousel__captions {
  position: absolute;
  right: var(--gutter);
  top: 65%;
  translate: 0 -50%;
  z-index: 1;
}

.hero-carousel__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  white-space: nowrap;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  background-color: rgb(20 19 17 / 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 900ms ease;
}

.hero-carousel__caption:first-child {
  opacity: 1;
}

.hero-carousel__captions .hero-carousel__caption.is-active {
  opacity: 1;
}

.hero-carousel__captions .hero-carousel__caption:not(.is-active) {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel__caption {
    transition: none;
  }
}

@media (max-width: 60em) {
  .hero-carousel__captions { display: none; }
}

/* ==========================================================================
   Overlay header (transparent over dark hero, solid on scroll)
   ========================================================================== */
/* Fixed and transparent over the hero. The mobile drawer is now a
   sibling of the header (not a child), so a fixed header no longer traps
   it — the earlier iOS nested-fixed problem is gone. */
.has-overlay-header .site-header {
  position: fixed;
  inset: 0 0 auto 0;
  background-color: transparent;
  border-block-end-color: transparent;
}

.has-overlay-header .site-header .brand,
.has-overlay-header .site-header .nav__toggle,
.has-overlay-header .site-header .nav-burger {
  color: #fff;
}

/* Transparent header over a dark hero → show the light lockup. */
.has-overlay-header .site-header .brand__logo--dark {
  display: none;
}

.has-overlay-header .site-header .brand__logo--light {
  display: block;
}

.has-overlay-header .site-header .nav__toggle:hover,
.has-overlay-header .site-header .nav__toggle[aria-expanded="true"] {
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}

/* The secondary button needs the same dark-hero treatment as the
   brand/nav — otherwise "Partner Login" renders near-black text on a
   photo. The primary button is already accent-colored with white text
   by default, so it needs no override here. */
.has-overlay-header .site-header .site-header__actions .btn--secondary {
  border-color: var(--gray-300);
  color: #fff;
}

.has-overlay-header .site-header .site-header__actions .btn--secondary:hover {
  border-color: #fff;
  color: #fff;
}

/* Scrolled (or drawer open): solidify to paper with dark text.
   Stays position:fixed (never re-enters flow) so there is no layout jump.
   No backdrop-filter — it would trap the fixed drawer's containing block. */
.has-overlay-header .site-header.is-scrolled {
  background-color: var(--paper);
  border-block-end-color: var(--color-border);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.has-overlay-header .site-header.is-scrolled .brand,
.has-overlay-header .site-header.is-scrolled .nav__toggle,
.has-overlay-header .site-header.is-scrolled .nav-burger {
  color: var(--color-text);
}

/* Solid paper again → back to the dark lockup. */
.has-overlay-header .site-header.is-scrolled .brand__logo--dark {
  display: block;
}

.has-overlay-header .site-header.is-scrolled .brand__logo--light {
  display: none;
}

/* Once solid, restore the normal toggle hover/expanded treatment. */
.has-overlay-header .site-header.is-scrolled .nav__toggle:hover,
.has-overlay-header .site-header.is-scrolled .nav__toggle[aria-expanded="true"] {
  background: var(--gray-100);
}

/* Once solid, restore the secondary button's normal (light-header)
   colors. The primary button needs no reset — it never changed. */
.has-overlay-header .site-header.is-scrolled .site-header__actions .btn--secondary {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.has-overlay-header .site-header.is-scrolled .site-header__actions .btn--secondary:hover {
  border-color: var(--gray-900);
  color: var(--color-text);
}

/* On mobile the drawer is paper; force dark chrome when it is open. */
.has-overlay-header .site-header.nav-open .brand,
.has-overlay-header .site-header.nav-open .nav-burger {
  color: var(--color-text);
}

.has-overlay-header .site-header.nav-open .brand__logo--dark {
  display: block;
}

.has-overlay-header .site-header.nav-open .brand__logo--light {
  display: none;
}

/* ==========================================================================
   Region rows with photography (homepage regional split)
   ========================================================================== */
.region-row--media {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
}

.region-row--media > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.region-row--media .region-figure {
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  align-self: stretch;
  height: 100%;
}

.region-row--media .region-figure img {
  transition: scale 0.9s var(--ease-out);
}

.region-row--media:hover .region-figure img {
  scale: 1.04;
}

@media (max-width: 40em) {
  .region-row--media {
    grid-template-columns: 5rem 1fr;
    gap: var(--space-5);
  }
}

/* ==========================================================================
   Full-bleed immersive band (pinned image + editorial overlay)
   ========================================================================== */
.fullbleed {
  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--gray-900);
  isolation: isolate;
  color: #fff;
}

.fullbleed__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.fullbleed__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fullbleed__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(18 17 15 / 0.86) 0%, rgb(18 17 15 / 0.5) 55%, rgb(18 17 15 / 0.2) 100%);
}

.fullbleed__inner {
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  max-width: 44rem;
}

.fullbleed .eyebrow {
  color: rgb(255 255 255 / 0.6);
}

.fullbleed .statement {
  color: #fff;
}

.fullbleed .statement a {
  color: var(--accent-air);
}

.fullbleed__note {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid rgb(255 255 255 / 0.2);
  font-size: var(--text-small);
  line-height: 1.7;
  color: rgb(255 255 255 / 0.72);
  max-width: 40rem;
}

.fullbleed__note a {
  color: var(--accent-air);
}

/* ==========================================================================
   Page hero with image (destination pages)
   ========================================================================== */
.image-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(72vh, 640px);
  padding-block-end: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  overflow: hidden;
  background-color: var(--gray-900);
  isolation: isolate;
  color: #fff;
}

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

.image-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(20 19 17 / 0.5) 0%, rgb(20 19 17 / 0.1) 34%, rgb(20 19 17 / 0.4) 68%, rgb(20 19 17 / 0.84) 100%);
}

.image-hero__inner {
  max-width: 56rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.image-hero__inner h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.75rem, 1.9rem + 3.6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
}

.image-hero__inner .eyebrow {
  color: rgb(255 255 255 / 0.7);
}

.image-hero__inner .lede {
  color: rgb(255 255 255 / 0.86);
  max-width: 42rem;
}

.image-hero .breadcrumbs a,
.image-hero .breadcrumbs [aria-current="page"],
.image-hero .breadcrumbs li {
  color: rgb(255 255 255 / 0.7);
}

.image-hero .breadcrumbs a:hover {
  color: #fff;
}