/* ==========================================================
   BASE — reset, typography, accessibility primitives
   ========================================================== */

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

body{
  margin:0;
  background:var(--bg-light);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{max-width:100%;display:block;}
figure{margin:0;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,p{margin:0;}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer;padding:0;}
input,textarea{font:inherit;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--navy);
  line-height:var(--lh-heading);
  letter-spacing:-0.01em;
}

.mono{font-family:var(--font-mono);}

/* ---- Accessibility ---- */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--accent);color:var(--navy);
  padding:12px 20px;z-index:200;
  font-size:14px;font-weight:600;
}
.skip-link:focus{left:16px;top:16px;}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

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

/* ---- Containers ---- */
.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--outer-margin);
}
.container-content{
  max-width:var(--container-content);
  margin:0 auto;
  padding:0 var(--outer-margin);
}

/* ---- Section label (non-decorative eyebrow) ---- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-meta);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:var(--space-block);
}

/* ---- Scroll reveal (JS-gated; content visible without JS) ----
   Three variants: fade-up (default), clip (headline reveal),
   scale (image reveal). */
.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.in-view{opacity:1;transform:translateY(0);}

.js .reveal-clip{
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transition:opacity .1s linear, clip-path .8s var(--ease-soft);
}
.js .reveal-clip.in-view{opacity:1;clip-path:inset(0 0 0% 0);}

.js .reveal-scale{
  opacity:0;
  transform:scale(1.04);
  transition:opacity .8s var(--ease), transform 1s var(--ease-soft);
}
.js .reveal-scale.in-view{opacity:1;transform:scale(1);}

@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal-clip,.js .reveal-scale{opacity:1;transform:none;clip-path:none;transition:none;}
}

/* ---- Hero entrance choreography (fires once on load, staggered) ---- */
.js .hero-anim{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-soft), transform .6s var(--ease-soft);}
.js .hero-anim.in{opacity:1;transform:translateY(0);}
.js .hero-anim-clip{opacity:0;clip-path:inset(0 0 100% 0);transition:opacity .1s linear, clip-path .9s var(--ease-soft);}
.js .hero-anim-clip.in{opacity:1;clip-path:inset(0 0 0% 0);}
.js .hero-anim-scale{opacity:0;transform:scale(1.05);transition:opacity .9s var(--ease), transform 1.1s var(--ease-soft);}
.js .hero-anim-scale.in{opacity:1;transform:scale(1);}

@media (prefers-reduced-motion:reduce){
  .js .hero-anim,.js .hero-anim-clip,.js .hero-anim-scale{opacity:1;transform:none;clip-path:none;transition:none;}
}