/* ============================================================
   base.css — reset, typography defaults, layout primitives
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.05;
  letter-spacing:-.02em;margin:0;color:var(--ink)}
p{margin:0}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:4px}

/* layout primitives */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--tint{background:var(--grad-soft)}          /* A1: soft, no hard cut */
.section--tint-rev{background:var(--grad-soft-rev)}
.section--dark{background:var(--grad-dark);color:#dfe7f2}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}

/* typography helpers */
.eyebrow{font-family:var(--font-display);font-weight:600;font-size:var(--fs-eyebrow);
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.section--dark .eyebrow{color:var(--cyan)}
.lead{font-size:var(--fs-lead);color:var(--ink-2);line-height:1.5}
.section--dark .lead{color:#aebbcd}
.accent-text{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--grey)}
.center{text-align:center}
.measure{max-width:54ch}
.mx-auto{margin-inline:auto}

/* scroll-reveal (B3) — JS adds .in */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important}
}

/* top scroll progress bar */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:var(--grad-accent);transition:width .1s linear}

/* utilities */
.grid{display:grid;gap:var(--s-5)}
.flex{display:flex}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}