/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* flex-start + an explicit padding-top, rather than justify-content:center,
     so the logo's vertical position is precisely controllable: it needs to
     land in the calm, low-detail band near the top of the photo rather than
     drift with however tall the rest of the hero copy happens to be. */
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding-top: calc(var(--header-h) + 356px);
  padding-bottom: var(--space-9);
  overflow: hidden;
}
.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 1;
  /* The source photo's raw left/right margins are near-black and low-detail
     by composition. At wide desktop aspect ratios, plain object-fit:cover
     is width-constrained and reveals those dead edges as flat dark bands.
     A permanent extra zoom (well beyond cover's own fit) crops them out on
     every viewport, regardless of aspect ratio. */
  transform: scale(1.38);
  /* Lifts shadow detail so whatever dark margin the crop can't fully avoid
     on ultra-wide viewports still reads as textured atmosphere, not a flat
     dead zone. */
  filter: brightness(1.3) saturate(1.08);
  animation: hero-zoom 16s var(--ease-out) forwards;
}
@keyframes hero-zoom{
  from{ transform: scale(1.38); }
  to{ transform: scale(1.22); }
}
/* Overlay stays light (~35-40%) where the arch/architectural detail of the
   photo reads best, near the top, and deepens toward the lower half where
   the tagline, CTAs and trust row need strong contrast to stay legible. */
.hero-bg::after{
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(20,20,15,0.38) 0%, rgba(20,20,15,0.42) 30%, rgba(20,20,15,0.6) 62%, var(--color-bg) 97%),
    radial-gradient(ellipse at 50% 24%, rgba(212,175,106,0.1), transparent 55%);
}
@media (prefers-reduced-motion: reduce){
  .hero-bg img{ animation: none; transform: none; }
}

.hero-content{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  padding: 0 var(--space-5);
}

.hero-logo{
  /* Sized (and the hero vertically re-anchored via .hero's padding-top) so
     this lands at roughly 70% of the arch's inner opening width, measured
     empirically against the photo: the arch is a dominant element of the
     shot, so the logo should read as the dominant element inside it. */
  /* Fixed rather than vw-scaled for most of the desktop range: the arch's
     own rendered width stays roughly constant across ~950-1440px+ (the
     hero background is height-constrained by object-fit:cover here, not
     width-constrained), so scaling the logo by vw would shrink it at
     narrower desktop widths even though the arch itself isn't shrinking.
     The vw fallback only matters below ~580px, where the background
     genuinely becomes width-constrained.
     Measured directly (pixel analysis of the source photo's light-line arch,
     cross-checked against getBoundingClientRect of the rendered hero-bg at
     1200/1440/1920px): the arch's inner opening is ~582px on screen and, per
     object-fit:cover, that figure holds constant across desktop widths since
     it's the hero's (content-driven) height, not the viewport width, that
     drives the cover scale. 568px keeps a ~7px clearance on each side of the
     gold lines, comfortably inside that 582px ceiling. */
  width: min(568px, 90vw);
  height: auto;
  margin-bottom: var(--space-5);
  opacity: 0;
  /* Keeps the transparent PNG genuinely transparent (no boxed background)
     while still standing out against whatever busy part of the photo
     happens to sit behind it. */
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6)) drop-shadow(0 0 28px rgba(0,0,0,0.35));
  animation: hero-rise var(--dur-slow) var(--ease-out) 120ms forwards;
}
.hero-logo--iso{ display: none; width: 88px; }
@media (max-width: 480px){
  .hero-logo--full{ display: none; }
  .hero-logo--iso{ display: block; }
}

.hero-tagline{
  /* Deliberately subordinate to the logo now that the logo has grown to
     fill the arch: smaller size and a dimmer (not pure-white) base color
     so the eye lands on the logo first. */
  font-size: clamp(1.3rem, 2.6vw + 0.75rem, 2.2rem);
  color: var(--color-text-dim);
  margin-bottom: var(--space-4);
  opacity: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
  animation: hero-rise var(--dur-slow) var(--ease-out) 260ms forwards;
}
.hero-sub{
  font-size: clamp(1rem, 1.2vw + 0.7rem, 1.15rem);
  color: var(--color-text-dim);
  max-width: 560px;
  margin-bottom: var(--space-5);
  opacity: 0;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  animation: hero-rise var(--dur-slow) var(--ease-out) 380ms forwards;
}

.hero-ctas{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-4);
  opacity: 0;
  animation: hero-rise var(--dur-slow) var(--ease-out) 500ms forwards;
}
@media (min-width: 560px){
  .hero-ctas{
    flex-direction: row;
    width: auto;
  }
  .hero-ctas .btn{ min-width: 220px; }
}

.hero-trust-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-6);
  opacity: 0;
  animation: hero-rise var(--dur-slow) var(--ease-out) 620ms forwards;
}
.hero-trust-item{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-mute);
}
.hero-trust-item svg{
  width: 16px; height: 16px;
  color: var(--gold-500);
  flex-shrink: 0;
}

@keyframes hero-rise{
  from{ opacity: 0; transform: translateY(22px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-logo, .hero-tagline, .hero-sub, .hero-ctas, .hero-trust-row{
    animation: none !important; opacity: 1 !important;
  }
}

.scroll-cue{
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-mute);
  opacity: 0;
  animation: hero-rise var(--dur-slow) var(--ease-out) 800ms forwards, scroll-bob 2.4s ease-in-out 1.5s infinite;
}
.scroll-cue span{
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.scroll-cue svg{ width: 16px; height: 16px; }
@keyframes scroll-bob{
  0%, 100%{ transform: translate(-50%, 0); }
  50%{ transform: translate(-50%, 6px); }
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue{ animation: none; opacity: 1; }
}
@media (max-width: 767px){
  .scroll-cue{ display: none; }
}