/* ─────────────────────────────────────────────────────────────
   GTD Desco — homepage hero.
   Ported from site/_hero-prototype.html. Every rule is scoped under
   .gtd-hero so nothing leaks into the pages this stylesheet is not
   loaded on, and nothing in sass/style.css is overridden by accident.

   Fonts are unchanged: the theme's own Eurostile, inherited.

   Not a Sass partial on purpose — the theme compiles through Compass
   (config.rb, Ruby), which nobody has confirmed still runs on this
   machine. Fold it into the Sass tree once that is settled.
   ───────────────────────────────────────────────────────────── */

.gtd-hero{
  --red:#c60000;
  --red-lift:#e11414;
  --ink:#101d1d;
  --line:rgba(255,255,255,.22);
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:92px;                  /* #header-outter is fixed at 92px */

  position:relative;
  min-height:100svh;
  min-height:100vh;
  display:grid;
  overflow:clip;
  isolation:isolate;
  background:var(--ink);
  color:#fff;
}

/* The theme clears its fixed header with `main{padding-top:90px}`.
   The hero runs under the bar instead, so that padding is cancelled —
   only on the page that actually carries a hero. */
main:has(> .gtd-hero){padding-top:0}
body.home main{padding-top:0}          /* fallback for :has() */

.gtd-hero *,
.gtd-hero *::before,
.gtd-hero *::after{box-sizing:border-box}
.gtd-hero img,
.gtd-hero svg,
.gtd-hero video{display:block;max-width:100%}
.gtd-hero a{color:inherit;text-decoration:none}

.gtd-hero__video{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  /* The still behind the video, and the same file the <video> carries as its
     poster. It was a 1,436 KB PNG loaded on every homepage view whether the
     video played or not; the WebP is 52 KB and identical to look at. */
  background:var(--ink) url(/wp-content/uploads/2026/02/homepage-banner-background.webp) center/cover;
}

.gtd-hero__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(10,20,20,.96) 0%, rgba(10,20,20,.88) 26%, rgba(10,20,20,.56) 48%, rgba(10,20,20,.12) 72%, rgba(10,20,20,.45) 100%),
    linear-gradient(to top, rgba(10,20,20,.8) 0%, transparent 38%),
    radial-gradient(120% 90% at 8% 62%, rgba(10,20,20,.55) 0%, transparent 60%);
}

.gtd-hero__inner{
  width:min(1496px, 100% - 2 * clamp(1.5rem,5vw,5.5rem));
  margin-inline:auto;
  align-self:center;
  padding-block:calc(var(--nav-h) + clamp(3.5rem,9vh,5.5rem)) clamp(4rem,10vh,6rem);
}
.gtd-hero__col{max-width:56rem}

.gtd-hero__mark{width:76px;height:auto}

.gtd-hero__eyebrow{
  display:flex;align-items:center;gap:1rem;
  margin:2rem 0 1.6rem;
  font-size:.76rem !important;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.gtd-hero__eyebrow::before{content:"";width:44px;height:2px;background:var(--red);flex:none}

.gtd-hero h1{
  /* !important only to answer the theme's own: global.scss carries
     `main h1 { margin-bottom: 35px !important }`, which otherwise adds 35px
     under the headline and pushes the spec plate below the fold on a phone. */
  margin:0 !important;
  font-weight:900;
  /* !important: css/type.css sets the site-wide h1 with !important, and a
     bare `h1` selector with !important beats `.gtd-hero h1` without it. */
  font-size:clamp(2.6rem,5.6vw,4.5rem) !important;
  line-height:.92;letter-spacing:-.035em;text-transform:uppercase;text-wrap:balance;
  color:#fff;text-shadow:none;                 /* the theme shadows banner h1s */
}
.gtd-hero h1 em{font-style:normal;color:var(--red)}

.gtd-hero__lede{
  margin:1.7rem 0 0;max-width:34rem;
  font-size:clamp(1rem,1.35vw,1.16rem) !important;   /* see the h1 note above */
  line-height:1.65;
  color:rgba(255,255,255,.86);
}

.gtd-hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}

/* ── button ──────────────────────────────────────────────── */
.gtd-btn{
  --pad:1.05rem 1.9rem;
  display:inline-flex;align-items:center;gap:1rem;
  padding:var(--pad);
  font:700 .82rem/1 "eurostile",sans-serif;
  font-size:.82rem !important;                        /* see the h1 note above */
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.gtd-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.gtd-btn__chev{width:20px;height:15px;flex:none;transition:transform .25s var(--ease)}
.gtd-btn:hover .gtd-btn__chev{transform:translateX(4px)}
.gtd-btn--primary{background:var(--red);color:#fff}
.gtd-btn--primary:hover{background:var(--red-lift);color:#fff;transform:translateY(-2px)}
.gtd-btn--ghost{border-color:var(--line);color:#fff;backdrop-filter:blur(2px)}
.gtd-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff;transform:translateY(-2px)}

/* ── spec plate ──────────────────────────────────────────── */
.gtd-hero__plate{
  /* <dl> carries a 1em block margin by default; the plate is the last thing
     in the hero and does not want one. */
  margin:clamp(3rem,7vh,4.5rem) 0 0;padding-top:1.5rem;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:min(64rem,100%);
}
.gtd-hero__plate > div{padding:0 1.6rem;border-left:1px solid var(--line)}
.gtd-hero__plate > div:first-child{padding-left:0;border-left:0}
.gtd-hero__plate dt{
  margin:0 0 .45rem;font-size:.66rem !important;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700;
}
.gtd-hero__plate dd{
  margin:0;font-size:clamp(.95rem,1.5vw,1.15rem) !important;font-weight:700;letter-spacing:-.01em;
}

/* ── motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .gtd-hero .rise{animation:gtd-rise .9s var(--ease) both}
  .gtd-hero .rise:nth-child(1){animation-delay:.05s}
  .gtd-hero .rise:nth-child(2){animation-delay:.13s}
  .gtd-hero .rise:nth-child(3){animation-delay:.21s}
  .gtd-hero .rise:nth-child(4){animation-delay:.29s}
  .gtd-hero .rise:nth-child(5){animation-delay:.37s}
  .gtd-hero .rise:nth-child(6){animation-delay:.45s}
  @keyframes gtd-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:900px){
  .gtd-hero__plate{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.3rem}
  .gtd-hero__plate > div{padding-right:1rem}
  .gtd-hero__plate > div:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:560px){
  .gtd-hero{--nav-h:72px}
  .gtd-hero__inner{padding-block:calc(var(--nav-h) + clamp(2.5rem,7vh,4rem)) clamp(2rem,6vh,3rem)}
  .gtd-hero h1{font-size:clamp(2.4rem,10.5vw,3.1rem);line-height:.95}
  .gtd-hero__eyebrow{margin:1.4rem 0 1.1rem;font-size:.7rem;letter-spacing:.18em}
  .gtd-hero__lede{margin-top:1.2rem;font-size:.95rem;line-height:1.55}
  .gtd-hero__cta{margin-top:1.6rem;gap:.7rem}
  .gtd-hero__plate{grid-template-columns:1fr 1fr;margin-top:2rem;padding-top:1.1rem;row-gap:1.15rem}
  .gtd-hero__plate > div{padding:0 1rem}
  .gtd-btn{--pad:.95rem 1.35rem;font-size:.74rem;flex:1 1 auto;justify-content:center}
  .gtd-hero__mark{width:52px}
}

@media (prefers-reduced-motion:reduce){
  .gtd-hero *{animation:none !important;transition:none !important}
}