/* Firebird Products — styles.css */

/* ---------- Fonts ---------- */
@font-face{font-family:"Nunito";src:url(../fonts/nunito-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url(../fonts/nunito-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Bebas Neue";src:url(../fonts/bebas-neue-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* Metric-matched fallbacks: no layout shift when the web fonts swap in */
@font-face{font-family:"Nunito Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:101.3%;ascent-override:99.8%;descent-override:34.8%;line-gap-override:0%}
@font-face{font-family:"Bebas Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:56.7%;ascent-override:158.7%;descent-override:52.9%;line-gap-override:0%}

/* ---------- Tokens ---------- */
:root{
  --orange:#ff671d;        /* brand orange: on dark backgrounds */
  --orange-ink:#d9500f;    /* AA-safe orange: on white */
  --ink:#222;
  --stone:#6e6a61;
  --muted:#b6b6b6;
  --text:#333;
  --white:#fff;

  --font-body:"Nunito","Nunito Fallback",ui-rounded,system-ui,sans-serif;
  --font-display:"Bebas Neue","Bebas Fallback",Impact,sans-serif;

  --fw-regular:400;
  --fw-bold:700;

  --fs-small:.9375rem;
  --fs-body:1rem;
  --fs-lead:clamp(1rem,.9rem + .35vw,1.2rem);
  --fs-h3:1.375rem;
  --fs-h2-alt:clamp(1.5rem,1.3rem + .8vw,1.875rem);
  --fs-h2:clamp(2.25rem,1.9rem + 1.2vw,2.75rem);
  --fs-display:clamp(3.5rem,1rem + 6.4vw,7rem);

  --s1:.5rem;
  --s2:1rem;
  --s3:1.5rem;
  --s4:2.5rem;
  --s5:clamp(3.5rem,2rem + 4vw,5.5rem);

  --radius:0;
  --max:62.5rem;           /* 1000px content width */
  --gutter:clamp(1rem,.5rem + 2vw,1.5rem);
  --measure:70ch;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:1.7;color:var(--text);background:var(--white)}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ol,ul{margin:0}
p+p{margin-top:1.25em}
a{color:var(--link,var(--orange-ink));text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus,var(--orange-ink));outline-offset:3px;border-radius:var(--radius)}
.display{font-family:var(--font-display);font-weight:400;line-height:1;letter-spacing:.01em;text-transform:uppercase}
.h2{font-size:var(--fs-h2);color:var(--orange-ink)}
.container{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s2);top:-4rem;z-index:10;padding:var(--s1) var(--s2);background:var(--ink);color:var(--white);font-weight:var(--fw-bold)}
.skip:focus{top:var(--s2)}
.dark{--link:var(--orange);--focus:var(--orange);background:var(--ink);color:var(--muted)}

/* ---------- Header ---------- */
.site-header{background:var(--white);padding:clamp(1rem,.6rem + 1.6vw,2.25rem) var(--gutter)}
.site-header .brand{display:inline-block}
.site-header img{width:clamp(13.5rem,10rem + 10vw,18.25rem)}
.site-header--dark{--focus:var(--orange);background:var(--ink);padding-block:clamp(.875rem,.5rem + 1vw,1.5rem);text-align:center}
.site-header--dark img{width:clamp(12rem,9rem + 8vw,15.5rem)}

/* ---------- Footer ---------- */
.site-footer{padding-block:var(--s5) var(--s4);text-align:center;color:var(--white);font-size:var(--fs-small)}
.site-footer__logo{width:11.25rem;margin-inline:auto}
.site-footer__info{margin-top:var(--s5);display:grid;gap:var(--s1)}
.site-footer address{font-style:normal}
.inline-list{list-style:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.inline-list a{color:var(--white);text-decoration:none}
.inline-list a:hover{text-decoration:underline}
.inline-list a[href^="mailto"]{color:var(--orange)}
.inline-list a[aria-current]{text-decoration:underline}

/* ---------- Hero ---------- */
.hero{position:relative;display:grid;align-items:center;height:min(120vw,36rem);background:var(--ink);color:var(--white);overflow:hidden}
.hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__copy{position:relative;padding-inline:var(--gutter);text-shadow:0 1px 12px rgb(0 0 0 / .5)}
.hero h1{font-size:var(--fs-display)}
.hero p{margin-top:var(--s1);max-width:47rem;font-size:var(--fs-lead);line-height:1.45}

/* ---------- Logo marquee ---------- */
.logos{position:relative;background:var(--ink);overflow:hidden;padding-block:.875rem}
.logos__track{display:flex;width:max-content;animation:marquee 45s linear infinite}
.logos ul{display:flex;align-items:center;gap:0;padding:0;list-style:none}
.logos img{width:9rem}
.logos:hover .logos__track,.logos:has(:checked) .logos__track{animation-play-state:paused}
.logos__toggle{position:absolute;right:var(--s1);top:50%;translate:0 -50%;background:var(--ink);color:var(--white);font-size:.8125rem;padding:.25rem .625rem;border:1px solid var(--muted);cursor:pointer;opacity:0}
.logos__toggle:focus-within,.logos:hover .logos__toggle{opacity:1}
.logos__toggle:has(:focus-visible){outline:3px solid var(--orange);outline-offset:2px}
.logos__toggle input{position:absolute;opacity:0;pointer-events:none}
.logos__toggle .on,.logos:has(:checked) .logos__toggle .off{display:none}
.logos:has(:checked) .logos__toggle .on{display:inline}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{padding-block:var(--s5)}
.split{display:grid;gap:var(--s4);align-items:center}
.split .h2{margin-bottom:var(--s3)}
.prose{max-width:var(--measure)}

/* Brands */
.brands__intro h2{font-size:var(--fs-h2-alt);font-weight:var(--fw-regular);color:var(--white);line-height:1.3}
.brands__intro p{margin-top:var(--s1);max-width:13rem;line-height:1.45}
.cards{display:grid;gap:var(--s4) 2.5rem;list-style:none;padding:0;margin-top:var(--s4)}
.card img{width:100%;aspect-ratio:640/936;object-fit:cover}
.card h3{margin-top:var(--s2);font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--white);line-height:1.3}
.card p{margin-top:var(--s1);line-height:1.6}
.card .card__more{margin-top:0}
.card__more a{text-decoration:none}
.card__more a:hover{text-decoration:underline}

/* Portfolio */
.portfolio .h2{margin-bottom:var(--s3)}
.gallery{columns:2;column-gap:1rem;margin-top:var(--s4);padding:0;list-style:none}
.gallery li{break-inside:avoid;margin-bottom:1rem}
.gallery img{width:100%}

/* Team */
.team{--link:var(--white);--focus:var(--white);background:var(--stone);color:var(--white);overflow:hidden}
.team__inner{display:grid;gap:var(--s4);padding-block:var(--s5)}
.team__media img{width:min(100%,28rem);margin-inline:auto}
.team h2{font-size:var(--fs-h2-alt);font-weight:var(--fw-regular);line-height:1.3;margin-bottom:var(--s2)}
.team p{line-height:1.6}
.team a{font-weight:var(--fw-bold);text-decoration:underline}

/* ---------- Legal pages ---------- */
.legal{padding-block:var(--s5)}
.legal h1{font-size:var(--fs-h2);color:var(--ink);margin-bottom:var(--s3)}
.legal h2{font-size:1.125rem;font-weight:var(--fw-bold);color:var(--ink);margin:2em 0 .5em}
.legal ol{padding-left:1.5em;margin-top:1.25em}
.legal li+li{margin-top:.25em}

/* ---------- Breakpoints ---------- */
@media (min-width:40em){
  .cards{grid-template-columns:1fr 1fr}
}
@media (min-width:48em){
  .hero{height:calc(clamp(20rem,38.3vw,40rem) + 100px)}
  .hero__copy{padding-inline:4.2vw}
  .split{grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem)}
  .gallery{columns:3;column-gap:1.25rem}
  .gallery li{margin-bottom:1.25rem}
 .team__inner{grid-template-columns:41% minmax(0,1fr);gap:clamp(1.5rem,4.8vw,4.5rem);align-items:center;max-width:90rem;padding:5rem 5.5vw 5rem 0}
  .team__media img{width:100%;max-width:44.75rem;margin:0}
  .team__copy{max-width:43rem}
  .inline-list{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0}
  .inline-list li+li::before{content:"|";margin-inline:1rem;color:var(--white)}
}
@media (min-width:64em){
  .brands__grid{display:grid;grid-template-columns:1fr 2fr;gap:2.5rem}
  .brands__intro{padding-top:6.5rem}
  .cards{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .logos__track{animation:none;width:auto}
  .logos ul{flex-wrap:wrap;justify-content:center;gap:1.25rem 2.5rem;padding:0 var(--gutter)}
  .logos ul[aria-hidden],.logos__toggle{display:none}
}