/* ════════════════════════════════════════════════════════════════════
   HERO — hero section + quote bar
   Part of the rene-kurzok stylesheet. Load order matters (cascade).
   ════════════════════════════════════════════════════════════════════ */

/* ── HERO ────────────────────────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy);
}

/* Photo panel – right half */
.hero-photo-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 52%;
  overflow: hidden;
}

.hero-photo-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    var(--navy) 0%,
    rgba(12, 27, 46, .55) 35%,
    rgba(12, 27, 46, .1) 100%
  );
}

.hero-photo-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, var(--navy) 0%, transparent 25%);
}

.hero-photo-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: brightness(.85) saturate(.9);
}

/* Gradient overlay */
.hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 80% at 0% 50%,
    rgba(12, 27, 46, 1) 0%,
    rgba(12, 27, 46, .7) 50%,
    transparent 75%
  );
}

/* Subtle grid */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(238, 132, 32, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 132, 32, .03) 1px, transparent 1px);
  background-size: 72px 72px;
}

/* Ambient glow */
.hero-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 132, 32, .055) 0%, transparent 70%);
  top: -180px;
  right: -200px;
  animation: glowPulse 9s ease-in-out infinite;
}

/* Decorative geometric SVG */
.hero-deco {
  position: absolute;
  right: clamp(-80px, -2vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(280px, 35vw, 500px);
  opacity: .35;
  pointer-events: none;
}

/* Override container centering – hero text anchors to the left */
/* Full-width, left-anchored — overrides the centered base .container so the
   hero text hugs the left edge instead of being centered as a flex item. */
#hero .container {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: clamp(32px, 5vw, 96px);
}

/* Content */
.hero-content {
  position: relative;
  z-index: 2;
  padding: 150px 0 110px;
  max-width: 820px;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  animation: fadeUp .8s var(--ease) .15s both;
}

.hero-eyebrow-rule {
  width: 36px;
  height: 1px;
  background: var(--accent);
}

.hero-eyebrow-text {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-h1 {
  font-family: var(--serif);
  /* Reduced max size – was too large on wide screens */
  font-size: clamp(2.4rem, 4.2vw, 4.6rem);
  font-weight: 300;
  line-height: 1.05;
  color: #fff;
  letter-spacing: -.01em;
  margin-bottom: 30px;
  animation: fadeUp .9s var(--ease) .35s both;
}

.hero-h1 .hl {
  color: var(--accent);
  font-style: italic;
}

.hero-sub {
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, .55);
  max-width: 480px;
  margin-bottom: 44px;
  animation: fadeUp .9s var(--ease) .55s both;
}

.hero-creds {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 50px;
  animation: fadeUp .9s var(--ease) .65s both;
}

.hero-cred {
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.hero-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .6;
}

.hero-btns {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  animation: fadeUp .9s var(--ease) .75s both;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: .25;
  pointer-events: none;
}

.hero-scroll-label {
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  writing-mode: vertical-rl;
}

.hero-scroll-bar {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.8);
  animation: scrollDrop 2.2s ease-in-out infinite;
}

/* Side rule */
.hero-rule {
  position: absolute;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: .25;
}

.hero-rule-line {
  width: 1px;
  height: 110px;
  background: linear-gradient(to bottom, transparent, var(--accent), transparent);
}

.hero-rule-year {
  font-family: var(--serif);
  font-size: .65rem;
  font-weight: 300;
  letter-spacing: .18em;
  color: #fff;
  writing-mode: vertical-lr;
}

/* ── QUOTE BAR ───────────────────────────────────────────────────────── */
#quote-bar {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  background: var(--navy);
}

/* Background photo – top-aligned so mountain peak is visible */
#quote-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 60%, rgba(238, 132, 32, .10) 0%, transparent 55%),
    linear-gradient(150deg, var(--teal) 0%, var(--navy) 60%, #07101b 100%);
  pointer-events: none;
}

/* Light uniform overlay – readable but not heavy */
#quote-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(7, 16, 27, .28);
}

.quote-wrap {
  text-align: center;
  position: relative;
  z-index: 2;
}

.quote-mark-big {
  font-family: var(--serif);
  font-size: 8rem;
  line-height: .4;
  color: rgba(238, 132, 32, .45);
  display: block;
  margin-bottom: 10px;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}

.quote-text {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 300;
  font-style: italic;
  color: #fff;
  line-height: 1.45;
  max-width: 860px;
  margin: 0 auto;
  text-shadow: 0 2px 32px rgba(0, 0, 0, .8);
  letter-spacing: .01em;
}

.quote-attr {
  display: block;
  margin-top: 28px;
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(238, 132, 32, .8);
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}