/* Homepage Hero owner. Mobile overrides are split by layout concern. */

:root {
  --hero-green: #00351f;
  --hero-green-story: #11563d;
  --hero-green-soft: #315d4a;
  --hero-gold: #c58b2a;
  --hero-gold-deep: #a96f13;
  --hero-gold-soft: #e2bd70;
}

body[data-nav="home"] {
  overflow-x: clip;
}

body[data-nav="home"] .hero-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 520px;
  max-height: 82vh;
  align-items: center;
  overflow: hidden;
  background-color: #fefaf4;
  aspect-ratio: 1663 / 632;
}

body[data-nav="home"] .hero-bgs {
  position: absolute;
  z-index: 0;
  inset: 0;
}

body[data-nav="home"] .hero-bg {
  position: absolute;
  inset: 0;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}

body[data-nav="home"] .hero-bg.is-active {
  opacity: 1;
}

body[data-nav="home"] .hero-bg--1 {
  background-image: url('/assets/images/hero/hero-1.webp?v=20260731hero');
}

body[data-nav="home"] .hero-bg--2 {
  background-image: url('/assets/images/hero/hero-2.webp?v=20260731hero');
}

body[data-nav="home"] .hero-bg--3 {
  background-image: url('/assets/images/hero/hero-3.webp?v=20260731hero');
}

body[data-nav="home"] .hero-bg--4 {
  background-image: url('/assets/images/hero/hero-4.webp?v=20260731hero');
}

body[data-nav="home"] .hero-scrim {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
    96deg,
    rgba(254, 250, 244, 0.97) 0%,
    rgba(254, 250, 244, 0.93) 26%,
    rgba(254, 250, 244, 0.72) 44%,
    rgba(254, 250, 244, 0.18) 56%,
    rgba(254, 250, 244, 0) 66%
  );
  pointer-events: none;
}

body[data-nav="home"] .hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

body[data-nav="home"] .hero-eyebrow {
  margin-bottom: 16px;
}

body[data-nav="home"] .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

body[data-nav="home"] .hero-actions .btn {
  font-size: 14px;
}

body[data-nav="home"] .hero-btn-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body[data-nav="home"] .hero-banner .btn-primary-orange {
  border: 1px solid rgba(212, 175, 55, 0.42);
  background: linear-gradient(135deg, #14603f, #0b4a31);
  color: #fff;
}

body[data-nav="home"] .hero-banner .btn-primary-orange:hover {
  background: linear-gradient(135deg, #18734b, #0e5a3a);
}

@media (max-width: 900px) {
  body[data-nav="home"] .hero-banner {
    min-height: 0;
    max-height: 92vh;
    align-items: flex-start;
    aspect-ratio: 941 / 1672;
  }

  body[data-nav="home"] .hero-bg {
    background-position: center bottom;
  }

  body[data-nav="home"] .hero-bg--1 {
    background-image: url('/assets/images/hero/hero-1-mobile.webp');
  }

  body[data-nav="home"] .hero-bg--2 {
    background-image: url('/assets/images/hero/hero-2-mobile.webp');
  }

  body[data-nav="home"] .hero-bg--3 {
    background-image: url('/assets/images/hero/hero-3-mobile.webp');
  }

  body[data-nav="home"] .hero-bg--4 {
    background-image: url('/assets/images/hero/hero-4-mobile.webp');
  }

  body[data-nav="home"] .hero-scrim {
    background: linear-gradient(
      184deg,
      rgba(254, 250, 244, 0.97) 0%,
      rgba(254, 250, 244, 0.92) 30%,
      rgba(254, 250, 244, 0.62) 46%,
      rgba(254, 250, 244, 0.1) 58%,
      rgba(254, 250, 244, 0) 68%
    );
  }

  body[data-nav="home"] .hero-inner {
    padding-block: 26px 0;
  }

  body[data-nav="home"] .hero-copy {
    max-width: none;
  }
}

@media (max-width: 560px) {
  body[data-nav="home"] .hero-banner {
    max-height: 94vh;
  }
}

@media (min-width: 901px) {
  body[data-nav="home"] .hero-banner {
    aspect-ratio: auto;
    min-height: clamp(570px, 43vw, 650px);
    max-height: none;
  }

  body[data-nav="home"] .hero-bg {
    background-position: right bottom;
    filter: none;
  }

  body[data-nav="home"] .hero-inner {
    padding-block: clamp(38px, 4.2vw, 66px);
  }

  body[data-nav="home"] .hero-scrim {
    background: linear-gradient(90deg,
      rgba(254, 250, 244, .99) 0%,
      rgba(254, 250, 244, .97) 23%,
      rgba(254, 250, 244, .84) 34%,
      rgba(254, 250, 244, .46) 43%,
      rgba(254, 250, 244, .10) 50%,
      rgba(254, 250, 244, 0) 56%);
  }
}

@media (min-width: 1180px) {
  body[data-nav="home"] .hero-bg {
    background-size: auto 100%;
  }
}

body[data-nav="home"] .hero-copy {
  width: min(100%, 710px);
  min-width: 0;
  max-width: 560px;
}

body[data-nav="home"] .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 10px 18px 10px 15px;
  border: 1px solid rgba(200, 137, 34, .47);
  border-radius: 999px;
  background: rgba(255, 252, 245, .91);
  color: #064b34;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .075em;
  text-transform: uppercase;
  box-shadow:
    0 10px 26px rgba(100, 67, 15, .055),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

body[data-nav="home"] .hero-eyebrow i {
  color: #c88922;
  font-size: 15px;
  filter: drop-shadow(0 3px 7px rgba(169, 111, 19, .18));
}

body[data-nav="home"] .hero-title {
  max-width: 650px;
  margin-bottom: 21px;
  overflow: visible;
  padding-bottom: .16em;
  font-family: var(--font-serif);
  font-size: clamp(43px, 3.72vw, 59px);
  font-weight: 600;
  line-height: 1.11;
  letter-spacing: -.034em;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "kern" 1;
}

body[data-nav="home"] .hero-title-green,
body[data-nav="home"] .hero-title-gold {
  display: block;
  max-width: 100%;
  overflow: visible;
  padding-block: .03em .13em;
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: -.034em;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

body[data-nav="home"] .hero-title-green {
  margin-bottom: -.07em;
  color: var(--hero-green);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .50),
    0 10px 24px rgba(0, 53, 31, .10);
}

body[data-nav="home"] .hero-title-gold {
  width: fit-content;
  margin-top: .015em;
  margin-bottom: -.06em;
  color: var(--hero-gold);
  font-size: .95em;
  text-shadow:
    0 1px 0 rgba(255, 247, 221, .76),
    0 9px 20px rgba(169, 111, 19, .14);
}

@media (min-width: 1101px) {
  body[data-nav="home"] .hero-copy {
    transform: translate3d(-14px, -28px, 0);
  }
}

body[data-nav="home"] .hero-story {
  position: relative;
  width: min(100%, 560px);
  min-width: 0;
  margin: 0 0 9px;
}

body[data-nav="home"] .hero-story-rule {
  display: grid;
  grid-template-columns: minmax(46px, 1fr) auto minmax(46px, 1fr);
  align-items: center;
  gap: 11px;
  width: min(100%, 430px);
  margin: 0 0 15px;
  color: #d19a31;
}

body[data-nav="home"] .hero-story-rule::before,
body[data-nav="home"] .hero-story-rule::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, rgba(193, 132, 23, .10), rgba(202, 142, 35, .88));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .72);
}

body[data-nav="home"] .hero-story-rule::after {
  background: linear-gradient(90deg, rgba(202, 142, 35, .88), rgba(193, 132, 23, .10));
}

body[data-nav="home"] .hero-story-spark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #d49b2f;
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1;
  text-shadow:
    0 0 12px rgba(219, 171, 72, .32),
    0 2px 6px rgba(164, 102, 10, .16);
  transform-origin: center;
}

body[data-nav="home"] .hero-story-panels {
  position: relative;
  width: min(100%, 535px);
  min-width: 0;
  min-height: 105px;
}

body[data-nav="home"] .hero-story-panel {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px);
  filter: blur(3px);
}

body[data-nav="home"] .hero-story-panel.is-active {
  position: relative;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  filter: none;
  animation: heroStoryEnter .72s cubic-bezier(.18, .78, .24, 1) both;
}

body[data-nav="home"] .hero-story-title {
  max-width: 100%;
  margin: 0 0 7px;
  color: var(--hero-green-story);
  font-family: var(--font-serif);
  font-size: clamp(21px, 1.48vw, 25px);
  font-weight: 620;
  line-height: 1.25;
  letter-spacing: -.014em;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .58),
    0 7px 17px rgba(17, 86, 61, .075);
}

body[data-nav="home"] .hero-story-description {
  max-width: 520px;
  margin: 0;
  color: #4b5961;
  font-family: var(--font-body);
  font-size: clamp(15.5px, .98vw, 17px);
  font-weight: 430;
  line-height: 1.56;
  letter-spacing: -.006em;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

body[data-nav="home"] .hero-story-panel.is-active .hero-story-description {
  animation: heroStoryDescription .78s .08s cubic-bezier(.18, .78, .24, 1) both;
}

@keyframes heroStoryEnter {
  0% { opacity: 0; transform: translateY(17px); filter: blur(4px); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes heroStoryDescription {
  0% { opacity: 0; transform: translateY(9px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes heroStorySpark {
  0% { opacity: .55; transform: scale(.78) rotate(-14deg); }
  48% {
    opacity: 1;
    transform: scale(1.25) rotate(5deg);
    text-shadow:
      0 0 18px rgba(224, 178, 76, .60),
      0 3px 9px rgba(164, 102, 10, .24);
  }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

body[data-nav="home"] .hero-slider-dashes {
  position: static;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: min(100%, 535px);
  margin: 1px 0 17px;
  filter: drop-shadow(0 4px 9px rgba(27, 69, 49, .08));
}

body[data-nav="home"] .hero-slider-dash {
  position: relative;
  width: 48px;
  height: 7px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(117, 137, 127, .25);
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .64);
  transition: background .24s ease, transform .24s ease, box-shadow .24s ease;
}

body[data-nav="home"] .hero-slider-dash:hover {
  background: rgba(94, 122, 108, .38);
  transform: translateY(-1px);
}

body[data-nav="home"] .hero-slider-dash:focus-visible {
  outline: 2px solid rgba(182, 127, 22, .55);
  outline-offset: 3px;
}

body[data-nav="home"] .hero-slider-dash-fill {
  display: none;
}

body[data-nav="home"] .hero-slider-dash.is-active {
  background: linear-gradient(90deg, #086343, #0c7550);
  box-shadow:
    0 0 0 1px rgba(6, 83, 54, .07),
    0 5px 13px rgba(6, 83, 54, .16),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* ============================================================
   HERO ACTIONS
   ============================================================ */

body[data-nav="home"] .hero-actions {
  gap: 13px;
  margin-top: 3px;
}

body[data-nav="home"] .hero-actions .btn {
  height: 52px;
  padding: 0 23px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 650;
}

body[data-nav="home"] .hero-banner .btn-primary-orange {
  box-shadow:
    0 13px 28px rgba(7, 49, 32, .20),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

body[data-nav="home"] .hero-banner .btn-outline-brown {
  border: 1.5px solid #b68d40;
  background: rgba(255, 255, 255, .64);
  color: #0b6342;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(91, 66, 18, .055);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    border-color .24s ease,
    background .24s ease,
    color .24s ease,
    box-shadow .24s ease,
    transform .24s ease;
}

body[data-nav="home"] .hero-banner .btn-outline-brown > .hero-training-icon {
  color: #15563e;
}

body[data-nav="home"] .hero-btn-dot,
body[data-nav="home"] .hero-banner .btn-outline-brown .hero-btn-dot {
  width: auto;
  height: auto;
  margin-left: 5px;
  border-radius: 0;
  background: transparent;
  font-size: 10px;
}

body[data-nav="home"] .hero-banner .btn-outline-brown .hero-btn-dot {
  color: #0b6342;
}

body[data-nav="home"] .hero-banner .btn-outline-brown:hover,
body[data-nav="home"] .hero-banner .btn-outline-brown:focus-visible {
  border-color: #c58b2a !important;
  background: linear-gradient(135deg, #fffdf7 0%, #f6e7bd 100%) !important;
  color: #0b6342 !important;
  box-shadow:
    0 13px 27px rgba(164, 108, 15, .16),
    inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

body[data-nav="home"] .hero-banner .btn-outline-brown:hover::after,
body[data-nav="home"] .hero-banner .btn-outline-brown:focus-visible::after {
  color: #0b6342 !important;
}

body[data-nav="home"] .hero-banner .btn-outline-brown:hover > .hero-training-icon,
body[data-nav="home"] .hero-banner .btn-outline-brown:focus-visible > .hero-training-icon,
body[data-nav="home"] .hero-banner .btn-outline-brown:hover .hero-btn-dot,
body[data-nav="home"] .hero-banner .btn-outline-brown:focus-visible .hero-btn-dot {
  color: #a96f13 !important;
}

body[data-nav="home"] .hero-banner .btn-outline-brown:focus-visible {
  outline: 3px solid rgba(197, 139, 42, .24);
  outline-offset: 3px;
}

body[data-nav="home"] .hero-banner .btn-outline-brown:active {
  border-color: #b68027 !important;
  background: linear-gradient(135deg, #f8edcf 0%, #ecd59d 100%) !important;
  color: #0b573d !important;
  box-shadow: 0 7px 15px rgba(164, 108, 15, .13) !important;
  transform: translateY(0) scale(.98);
}

@media (min-width: 768px) {
  body[data-nav="home"] .hero-banner .btn-outline-brown:hover,
  body[data-nav="home"] .hero-banner .btn-outline-brown:focus-visible {
    transform: translateY(-2px);
  }
}

@media (max-width: 767px) {
  body[data-nav="home"] .hero-banner .btn-outline-brown:hover,
  body[data-nav="home"] .hero-banner .btn-outline-brown:focus-visible {
    transform: translateY(-1px);
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  body[data-nav="home"] .hero-copy { transform: translate3d(-8px, -18px, 0); }
  body[data-nav="home"] .hero-title { max-width: 565px; font-size: clamp(40px, 4.3vw, 47px); }
  body[data-nav="home"] .hero-story { width: min(100%, 520px); }
  body[data-nav="home"] .hero-story-rule { width: min(100%, 390px); }
  body[data-nav="home"] .hero-story-panels { min-height: 101px; }
  body[data-nav="home"] .hero-story-title { font-size: clamp(20px, 2vw, 23px); }
  body[data-nav="home"] .hero-story-description { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-nav="home"] .hero-bg {
    transition: none;
  }

  body[data-nav="home"] .hero-story-panel.is-active,
  body[data-nav="home"] .hero-story-panel.is-active .hero-story-description {
    animation: none !important;
  }

  body[data-nav="home"] .hero-slider-dash,
  body[data-nav="home"] .hero-slider-dash::before,
  body[data-nav="home"] .hero-banner .btn-outline-brown {
    transition: none !important;
  }
}