/* ─────────────────────────────────────────────────────────────
   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(var(--gtd-cols,4),minmax(0,1fr));
  max-width:min(64rem,100%);
}
.gtd-hero__plate > div{padding:0 1.15rem;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;
}

/* ── partner marks, in the strip ──────────────────────────── */
/*
   The marks stand in the second cell, where the power figure was.

   They render white, and that is the position deciding rather than taste: the
   strip is white type on near-black with hairline rules, and a full-colour
   logo dropped into that row reads as a sticker on an instrument panel. The
   filter also normalises anything uploaded through the settings screen, so a
   full-colour file cannot break the rule by arriving later.

   Height is set here and nowhere else. Each file is a mark centred in a canvas
   120px tall at the height its own weight earns, so one height renders all
   three at their correct relative sizes — no per-logo rule, which is what the
   partner carousel had to be rescued from. */

.gtd-hero__marks{
  display:flex;flex-wrap:wrap;align-items:center;
  /*
     Spread across the column, not bunched at its left edge.

     The gaps were already identical to the pixel — what read as uneven is that
     three marks 30, 63 and 112px wide with a fixed gap leave all the slack in
     one lump on the right, and the eye reads the whitespace, not the gaps.
     Distributing it puts the first mark on the column's own left margin and
     the last on its right, which is where every other value in the strip
     starts, and the marks come out evenly pitched across the width.

     Equal slots would be the other way to do it and is wrong here: Mincon is
     nearly four times the width of Cummins, so a third of the column each
     would squeeze one and strand the other in air.

     column-gap stays as the floor — with space-between it is the minimum, so
     a narrow column packs them tight rather than overlapping them. */
  justify-content:space-between;
  column-gap:.7rem;row-gap:.5rem;
  /* Holds the row on the line its neighbours' values sit on. */
  min-height:3.1rem;
}

.gtd-hero__marks img{
  /* 2.8rem, not the 1.75 this started at. Eurodrill's lockup stacks EURO over
     DRILL, so at the height of the text beside it the wordmark was two 8px
     lines and unreadable — the smallest mark in the set sets the floor for all
     of them, and a logo nobody can read is not a partnership anyone is
     claiming.

     The ceiling is the column, and the column is set by the widest LABEL in
     the strip rather than by any value in it: "On-board rods" wants 165px on
     one line, and a spec column narrower than that wraps its own heading. So
     the marks grow by taking back gutter — 1.15rem of cell padding instead of
     1.6 — and, above 1200px where there is genuinely slack, by taking a wider
     track. Below that the columns stay equal, because a strip whose dividers
     fall at uneven intervals reads as an accident rather than a decision. */
  display:block;width:auto;height:3.1rem;
  filter:brightness(0) invert(1);
  /* A shade under the values beside them: these identify a supplier, they are
     not the number the reader came for. */
  opacity:.88;
}

/* ── 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 (min-width:1200px){
  /* The marks column carries three logos; its neighbours carry three words.
     1.35fr against 1fr is the difference in what they are holding, and at this
     width it costs the spec columns nothing they need. */
  .gtd-hero__plate{grid-template-columns:1fr 1.35fr 1fr 1fr}
  .gtd-hero__marks{min-height:3.5rem}
  .gtd-hero__marks img{height:3.5rem}
}

@media (max-width:900px){
  /*
     Two columns, and the marks take both.

     Three logos cannot sit in half a phone width at any size worth reading —
     they wrapped to a second line and the whole row fell apart. A logo row is
     not the same kind of content as "up to 1,200 ft" and does not owe the spec
     columns its width, so here it gets its own full-width row at the foot of
     the strip, separated by the same hairline the strip opens with.

     The dividing rules come off at this width too. They were already carrying
     an :nth-child(3) exception to reset the first cell of the second row, and
     a full-width cell in the mix turns that one exception into three. Column
     spacing does the same job with no rules to get wrong. */
  .gtd-hero__plate{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.3rem;column-gap:1.6rem}
  .gtd-hero__plate > div{padding:0;border-left:0}

  .gtd-hero__plate > .gtd-hero__cell--marks{
    grid-column:1 / -1;
    order:99;                       /* last, whatever its place in the source */
    padding-top:1.25rem;
    border-top:1px solid var(--line);
  }
  /* The room the full width buys is spent on the marks, not left as margin. */
  .gtd-hero__marks{column-gap:1.5rem;min-height:3.4rem}
  .gtd-hero__marks img{height:3.4rem}
}
@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__marks{column-gap:1.2rem;min-height:3.1rem}
  .gtd-hero__marks img{height:3.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}
}