/* === base.css — Reset + typography + Roboto font import (shared) === */
/* Imported AFTER tokens.css. Brings in the ICOM fonts and base element styling. */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Roboto+Mono:wght@400;500;700&display=swap');

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:130px; }
body{ font-family:var(--font); color:var(--ink); background:var(--white); line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea{ font-family:inherit; }
h1,h2,h3,h4{ line-height:1.2; font-weight:500; color:var(--ink); letter-spacing:-.01em; }
:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }

/* ---- Skip link ---- */
.skip-link{ position:absolute; left:1rem; top:-4rem; z-index:200; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:var(--r); transition:top var(--t); }
.skip-link:focus{ top:1rem; }

/* ---- Layout utilities ---- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:5rem; }
.section--gray{ background:var(--gray); }
.section--white{ background:var(--white); }
.center-cta{ text-align:center; margin-top:3rem; }
.mt-3{ margin-top:3rem; }

/* ---- Section heading (ICOM style: red marker, medium weight) ---- */
.s-head{ margin-bottom:3rem; }
.s-head--center{ text-align:center; max-width:46rem; margin-inline:auto; }
.eyebrow{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin-bottom:.6rem; }
.s-head h2{ font-size:clamp(1.7rem,4vw,2.4rem); font-weight:500; }
.s-head--center h2::after{ content:""; display:block; width:46px; height:3px; background:var(--red); margin:1rem auto 0; }
.s-head p{ color:var(--ink-soft); margin-top:.9rem; font-size:1rem; }

/* ---- Scroll reveal (used on every page) ---- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s ease,transform .6s ease; }
.reveal.vis{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; } .reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; } .reveal[data-d="4"]{ transition-delay:.32s; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1; transform:none; }
}