/* The Garrett Company · hero footage + Our Roots backdrop */

/* Hero shell */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--ivory); overflow: hidden; background: var(--ink); isolation: isolate; }
.hero__bg { position: absolute; inset: -6% 0; z-index: 0; will-change: transform; }
.hero__media { position: absolute; inset: 0; transform-origin: 58% 42%; animation: kenburns 38s ease-in-out infinite alternate; }
.hero__still, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__still { z-index: 0; filter: saturate(1.05) sepia(.12) contrast(1.04); }
.hero__video { z-index: 1; opacity: 0; transition: opacity 1.4s ease; filter: saturate(1.12) sepia(.14) contrast(1.06) brightness(.96); }
.hero__video { transition: opacity 1.6s ease; }
.hero__media.is-playing .hero__video.is-on { opacity: 1; }
.hero__media.is-still .hero__video { display: none; }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.1) translate(-1.6%, 1.2%); } }

/* Golden-hour grade: warm top-right glow, amber mid, cool ink shadows */
.hero__grade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 80% 18%, rgba(255,196,120,.55), rgba(255,170,80,0) 55%),
    linear-gradient(180deg, rgba(255,184,100,.25) 0%, rgba(184,145,79,.18) 45%, rgba(15,27,45,.35) 100%);
  mix-blend-mode: soft-light; }
.hero__grade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,214,150,.22), rgba(47,93,69,.12) 60%, rgba(15,27,45,.3)); mix-blend-mode: overlay; }

/* Film grain: tiny inline SVG noise, tiled and jittered */
.hero__grain { position: absolute; inset: -40px; z-index: 2; pointer-events: none; opacity: .075; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px; animation: grain .7s steps(6) infinite; }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-14px, 9px); } 40% { transform: translate(9px, -16px); }
  60% { transform: translate(-6px, 18px); } 80% { transform: translate(16px, 4px); } 100% { transform: translate(0, 0); } }

/* Legibility gradient */
.hero__veil { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .92;
  background: linear-gradient(180deg, rgba(15,27,45,.32) 0%, rgba(15,27,45,.02) 30%, rgba(15,27,45,.46) 60%, rgba(15,27,45,.92) 100%); }

/* Hero copy */
.hero__content { position: relative; z-index: 4; width: 100%; max-width: var(--container); margin: 0 auto; padding: calc(var(--nav-h) + 24px) var(--gutter) clamp(72px, 11vh, 140px); }
.hero__badge { display: inline-flex; align-items: center; gap: 10px; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--ivory); border: 1px solid rgba(247,242,232,.35); padding: 8px 14px 8px 12px; border-radius: 999px; backdrop-filter: blur(8px); background: rgba(15,27,45,.25); margin-bottom: 1.6rem; }
.hero__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass-light); box-shadow: 0 0 0 0 rgba(217,188,124,.6); animation: badgePulse 2.6s ease-out infinite; }
@keyframes badgePulse { 0% { box-shadow: 0 0 0 0 rgba(217,188,124,.6); } 100% { box-shadow: 0 0 0 10px rgba(217,188,124,0); } }
.hero__eyebrow { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; color: var(--brass-light); margin-bottom: 1.1rem; }
.hero__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.5rem, 6vw, 5.2rem); line-height: 1.02; letter-spacing: -.015em; max-width: 17ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(15,27,45,.35); }
@media (max-height: 760px) { .hero__title { font-size: clamp(2.2rem, 5vw, 4rem); } .hero__content { padding-bottom: 72px; } }
.hero__sub { margin-top: 1.4rem; max-width: 54ch; font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 300; color: rgba(247,242,232,.88); }
.hero__ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__scroll { position: absolute; right: var(--gutter); bottom: 28px; z-index: 4; display: none; align-items: center; gap: 12px; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(247,242,232,.7); }
.hero__scroll-line { width: 48px; height: 1px; background: rgba(247,242,232,.5); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; inset: 0; background: var(--brass-light); transform: translateX(-100%); animation: scrollHint 2.2s var(--ease) infinite; }
@keyframes scrollHint { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@media (min-width: 768px) { .hero__scroll { display: flex; } }

/* Our Roots backdrop: drone farmland, heavily dimmed and graded, behind the story */
.roots { overflow: hidden; isolation: isolate; }
.roots__bg { position: absolute; inset: -10% 0; z-index: 0; background-size: cover; background-position: center; will-change: transform; }
.roots__bg::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(15,27,45,.94) 0%, rgba(15,27,45,.78) 40%, rgba(15,27,45,.86) 100%); }
.roots__bg::after { content: ""; position: absolute; inset: 0; z-index: 3; background: radial-gradient(80% 60% at 20% 20%, rgba(184,145,79,.22), transparent 60%); mix-blend-mode: screen; pointer-events: none; }
.roots__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity 1.6s ease; filter: saturate(.85) sepia(.25) contrast(1.05); }
.roots__bg.is-playing .roots__video { opacity: 1; }
.roots .container { position: relative; z-index: 1; }

/* Pull quote */
.pullquote { margin: 2.2rem 0 1.4rem; padding: 0 0 0 22px; border-left: 2px solid var(--brass); }
.pullquote p { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.3; font-style: italic; color: var(--ivory); text-wrap: balance; }
.pullquote footer { margin-top: .8rem; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-light); }

/* Reduced motion: still image only, no drift or grain flicker */
@media (prefers-reduced-motion: reduce) {
  .hero__media, .hero__grain, .hero__badge-dot, .hero__scroll-line::after { animation: none !important; }
  .hero__video, .roots__video { display: none !important; }
}