/* ============================================================================
   TRIVOX DESIGN SYSTEM — v2.css
   Shared V2 polish for content/sub-pages so they match the redesigned home:
   - wider content container (less "margined/condensed" feel on big screens)
   - editorial 2-column section heads (headline left, supporting copy right)
   Load AFTER site.css. Pairs with ds/scroll.js (GSAP interactive reveals).
   ============================================================================ */

/* kill any horizontal overflow (mobile black-band bug) */
html,body{overflow-x:clip;max-width:100%}
.top,.rest{overflow-x:clip}
.marquee{max-width:100vw}
/* wider content — matches the home V2 breathing room */
.rest .wrap{max-width:min(1520px,94vw)}

/* section heads — editorial split across the full width (no left-huddle) */
.band .head{max-width:none;display:grid;grid-template-columns:1.15fr .85fr;
  column-gap:clamp(2rem,6vw,6rem);align-items:end}
.band .head .eyebrow{grid-column:1 / -1;margin-bottom:1.1rem}
.band .head h2{grid-column:1;margin:0}
.band .head p{grid-column:2;align-self:end;margin:0 0 .35rem;max-width:44ch}
@media(max-width:820px){
  .band .head{grid-template-columns:1fr;gap:0}
  .band .head p{grid-column:1;margin-top:1.1rem}
}

/* mobile hero legibility — the 3D "T" floats behind the copy; a soft scrim +
   text-shadow keep the headline and lede readable (matches the home V2 hero). */
@media(max-width:760px){
  .hero-copy{position:relative;z-index:2}
  .hero-copy::before{content:"";position:absolute;inset:-16% 0 -26%;z-index:-1;
    background:radial-gradient(72% 62% at 50% 42%,rgba(4,6,12,.86),rgba(4,6,12,.5) 55%,transparent 78%);
    filter:blur(10px);pointer-events:none}
  .hero .lede{text-shadow:0 2px 16px rgba(4,6,12,.72)}
  h1.hero-h{text-shadow:0 2px 26px rgba(4,6,12,.5)}
}