/* ==========================================================================
   Global: base, typography, layout primitives, motion states
   ========================================================================== */
html{scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--white);
  background:var(--black);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body.is-locked{overflow:hidden}

::selection{background:var(--red);color:#fff}

/* Focus */
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.theme-light{--focus:var(--red)}
.theme-red{--focus:#fff}

.skip-link{
  position:fixed;top:12px;left:12px;z-index:1000;
  padding:14px 20px;background:var(--red);color:#fff;
  font-weight:600;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  transform:translateY(-200%);transition:transform var(--t-fast);
}
.skip-link:focus{transform:none;--focus:#fff}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Layout */
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--section-y)}
.theme-dark{background:var(--charcoal);color:var(--white)}
.theme-black{background:var(--black);color:var(--white)}
.theme-light{background:var(--paper);color:var(--black)}
.theme-white{background:var(--white);color:var(--black)}
.theme-red{background:var(--red);color:var(--white)}
.theme-white,.theme-light{--focus:var(--red)}

/* Typography */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:.92;text-transform:uppercase;letter-spacing:.002em}
.h1{font-size:var(--fs-h1);font-weight:900;line-height:.86}
.h2{font-size:var(--fs-h2);font-weight:900;line-height:.88}
.h3{font-size:var(--fs-h3)}
.lead{font-size:var(--fs-lead);line-height:1.55;max-width:56ch}
.muted{color:var(--muted-dark)}
.theme-light .muted,.theme-white .muted{color:var(--muted-light)}
.text-red{color:var(--red)}
.theme-black .text-red,.theme-dark .text-red{color:var(--red-lift)}
p{max-width:68ch}

/* Section label: index number + red rule + name */
.label{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--font-body);font-size:var(--fs-label);font-weight:600;line-height:1;
  letter-spacing:.22em;text-transform:uppercase;color:var(--red);
}
.label::before{content:"";width:44px;height:2px;background:currentColor;flex:none}
.label__num{font-family:var(--font-display);font-size:1.375rem;font-weight:800;letter-spacing:.04em;color:inherit;order:-1}
.theme-black .label,.theme-dark .label,.on-dark .label,.hero .label,.page-hero .label,.perf .label{color:var(--red-lift)}
.theme-red .label{color:#fff}

/* Section head: title block left, action right */
.section-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:32px 48px;margin-bottom:clamp(40px,5vw,80px)}
.section-head__title{display:flex;flex-direction:column;gap:clamp(18px,2vw,28px)}
.section-head__copy{margin-top:clamp(4px,1vw,12px)}

/* --------------------------------------------------------------------------
   Motion states (GSAP takes over; everything is visible without JS,
   with reduced motion, or if GSAP fails to load)
   -------------------------------------------------------------------------- */
html.js:not(.no-anim) [data-reveal]{opacity:0;transform:translateY(28px)}
html.js:not(.no-anim) [data-lines]{visibility:hidden}
html.js:not(.no-anim) [data-hero]{opacity:0;transform:translateY(22px)}
html.js:not(.no-anim) .site-header{opacity:0}
html.js:not(.no-anim) [data-image-reveal]{clip-path:inset(0 0 100% 0)}
.mask-line{display:block;overflow:hidden;padding-block:.03em;margin-block:-.03em}
.mask-line__inner{display:block;will-change:transform}
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal],html.js [data-hero],html.js .site-header{opacity:1!important;transform:none!important}
  html.js [data-lines]{visibility:visible!important}
  html.js [data-image-reveal]{clip-path:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Hero-specific initial states (GSAP timeline reveals these) */
html.js:not(.no-anim) .hero__title{visibility:hidden}
html.js:not(.no-anim) .hero .trust li{opacity:0}

/* Placeholder marker (only when CONFIG.SHOW_PLACEHOLDERS is true) */
.is-placeholder{outline:1px dashed var(--red-lift);outline-offset:4px;opacity:.85;cursor:not-allowed}