/* ============================================================
   TG BRAND LAYER
   Loads LAST, after styles.css -> golden.css -> bebas.css.

   Layout and structure only. It restyles three regions:
       1. the homepage hero
       2. the header — red bar and nav
       3. the footer

   It introduces NO fonts and NO colours. Type resolves to
   --font-display (Bebas Neue Pro) and --font-body (Inter); every
   hue resolves to a token already declared in styles.css. Content
   sits inside the existing .container, so the hero lines up with
   every other section on the site.
   ============================================================ */

:root{
  --tg-ease:cubic-bezier(.22,.61,.36,1);
  /* The hero is the one place the accent is red. Everywhere else on
     the site keeps --gold. This resolves to the red already declared
     for the top bar, so no new colour enters the palette. */
  --tg-hero-accent:var(--redbar-a);
}

/* ---------------------------------------------------------- 1. HEADER */
/* The red bar keeps --redbar-a/--redbar-b. Only the height and the
   wordmark change; .container still governs the horizontal edges. */
.topbar-inner{min-height:44px;}

.mainnav{
  background:var(--white);
  border-bottom:1px solid #e7e7e7;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.mainnav-inner{min-height:64px;gap:28px;}

/* TG monogram — Bebas, same face as the rest of the site */
.mainnav .brand{
  display:block;
  font-family:var(--font-display);font-weight:700;
  font-size:30px;line-height:1;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text);
}
.mainnav .brand:hover{color:var(--gold);}

.nav-left{gap:30px;}
.nav-right{gap:24px;}
.nav-left a,.nav-right a{
  font-family:var(--font-display);font-weight:400;
  font-size:20px;line-height:1;letter-spacing:.02em;text-transform:uppercase;
  color:var(--text);padding:6px 0;position:relative;
}
.nav-right a{color:var(--muted);}
.nav-left a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--gold);transition:width .28s var(--tg-ease);
}
.nav-left a:hover,.nav-left a[aria-current="page"],
.nav-right a:hover,.nav-right a[aria-current="page"]{color:var(--gold);}
.nav-left a:hover::after,.nav-left a[aria-current="page"]::after{width:100%;}
.nav-divider{height:20px;background:var(--gold);}

/* ---------------------------------------------------------- 2. HERO */
.hero{
  position:relative;overflow:hidden;background:#0B0B0B;
  min-height:min(92vh,860px);display:flex;align-items:center;
  background-image:none;background-attachment:scroll;
}
.hero::before{content:none;}

/* Footage sits right of the type. The panel is masked rather than
   clipped — a hard edge shows a vertical seam wherever the frame is
   lighter than the ground, and the clip is too close to the hero's own
   aspect ratio to move the subject across with object-position. */
.hero-media{
  position:absolute;inset:0 0 0 auto;width:64%;background:#0B0B0B;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.28) 14%,rgba(0,0,0,.82) 34%,#000 52%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.28) 14%,rgba(0,0,0,.82) 34%,#000 52%);
}
.hero-media .hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,11,11,.55) 0%,rgba(11,11,11,.18) 34%,rgba(11,11,11,0) 62%,rgba(11,11,11,.45) 100%);
}

.hero-arc{
  position:absolute;top:50%;left:56%;width:140vw;height:140vw;
  transform:translateY(-50%);pointer-events:none;opacity:.7;
}
.hero-arc circle{
  fill:none;stroke:var(--white);stroke-opacity:.13;stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.hero-arc .arc-in{stroke-opacity:.07;}

/* bebas.css pins .hero .container with position:absolute; top:66.6%;
   transform:translate(-50%,-50%). Resetting position alone leaves the
   offsets and the transform behind, so all four are cleared. Width and
   padding are left to .container — that is what aligns the hero copy
   with every other section on the site. */
.hero > .hero-copy{
  position:relative;top:auto;left:auto;transform:none;
  z-index:2;align-self:center;
  padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem);
}

.hero-title{margin:0;}
.hero-title .hero-first{
  display:block;
  font-family:var(--font-body);font-size:15px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:10px;
}
.hero-title .hero-last{display:block;}

/* record — Bebas, matching the figures on the record page */
.hero-rec{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;margin:18px 0 0;}
.hero-rec p{margin:0;}
.hero-figs{
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(38px,4.4vw,58px);line-height:1;letter-spacing:.01em;
  color:var(--white);
}
.hero-figs em{
  font-style:normal;width:26px;height:2px;
  background:rgba(255,255,255,.5);align-self:center;
}
.hero-zero{color:var(--tg-hero-accent);}
.hero-ticks{display:flex;align-items:flex-end;gap:5px;height:46px;padding-bottom:4px;}
.hero-ticks i{
  display:block;width:3px;background:var(--tg-hero-accent);opacity:0;
  transform-origin:bottom;transform:scaleY(.2);
  animation:tgTick .34s var(--tg-ease) forwards;
}
@keyframes tgTick{to{opacity:1;transform:scaleY(1);}}

.hero-tagline{margin:20px 0 0;color:var(--tg-hero-accent);}

/* ---------------------------------------------------------- 3. FOOTER */
/* Keeps the existing --foot-a -> --foot-b gradient and .container. */
.ftr-grid{
  grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));
  gap:clamp(2rem,5vw,4rem);
}
/* Scoped to .site-footer: bebas.css sets `.site-footer .ftr-brand` and
   golden.css sets `.site-footer a`, both of which out-specify a bare
   `.ftr-brand`. */
.site-footer .ftr-brand{
  display:block;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(44px,5vw,68px);line-height:.9;letter-spacing:.04em;
  text-transform:uppercase;color:var(--white);
}
.site-footer .ftr-brand:hover{color:var(--gold);}
.ftr-motto{margin-top:10px;}
.ftr-col ul{display:flex;flex-direction:column;gap:12px;}

/* ---------------------------------------------------------- MOTION */
@media (prefers-reduced-motion:reduce){
  .hero-arc{display:none;}
  .hero-ticks i{opacity:1;transform:scaleY(1);animation:none;}
}

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width:1180px){
  .hero-media{width:58%;}
}
@media (max-width:900px){
  .mainnav-inner{min-height:60px;}
  .mainnav .brand{font-size:26px;}

  .hero{min-height:0;flex-direction:column;align-items:stretch;padding-top:0;}
  .hero-media{
    position:relative;inset:auto;width:100%;height:64vw;max-height:400px;
    flex:0 0 auto;margin-bottom:2rem;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,0) 100%);
  }
  .hero-arc{opacity:.26;left:50%;transform:translate(-50%,-50%);}
  .hero > .hero-copy{padding-top:0;padding-bottom:2.5rem;}
  .hero-figs{font-size:38px;}
  .ftr-grid{grid-template-columns:minmax(0,1fr);gap:2.4rem;}
}