/* ==========================================================================
   Canada Bridge — base.css : reset, design tokens, typography, utilities
   ========================================================================== */

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100vh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,picture,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px}

/* ---- Design tokens ---- */
:root{
  --bg:#EEF2F2;
  --ink:#313432;
  --body:#595C66;
  --teal:#529CB0;
  --teal-dark:#3F8296;
  --teal-deep:#2C6F82;      /* white small-text passes 4.5:1 */
  --navy:#0A3248;
  --navy-2:#0d3e59;
  --ember:#DA6F4D;          /* bright accent — fills, badges, sun (non-text/large only) */
  --ember-ink:#A8442A;      /* ember text on light bg (>=4.5:1) */
  --ember-lite:#E68A66;     /* ember text/links on navy (>=4.5:1) */
  --ember-dark:#c25b3b;
  --card:#FFFFFF;
  --line:rgba(49,52,50,.16);
  --line-light:rgba(238,242,242,.16);

  --font-display:'Agdasima',sans-serif;
  --font-body:'Geist','Geist Fallback',system-ui,sans-serif;

  --maxw:1200px;
  --gutter:24px;
  --nav-h:90px;

  --space-section:clamp(64px,9vw,128px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- Base typography ---- */
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--body);
  background:var(--bg);
}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  color:var(--ink);
  line-height:.92;
  letter-spacing:-.02em;
}
h1{font-size:clamp(52px,10.5vw,150px);line-height:.82;letter-spacing:-.028em}
h2{font-size:clamp(34px,5.4vw,70px);letter-spacing:-.02em}
h3{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.01em}
h4{font-size:clamp(20px,2.2vw,28px)}
p{max-width:62ch}
strong{color:var(--ink);font-weight:600}

/* ---- Utilities ---- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--space-section)}
.eyebrow{
  font-family:var(--font-body);font-weight:600;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ember-ink);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--ember);display:inline-block}
.lead{font-size:clamp(17px,1.4vw,19px);color:var(--body)}
.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}
.text-center{text-align:center}
.dark{background:var(--navy);color:rgba(238,242,242,.78)}
.dark h1,.dark h2,.dark h3,.dark h4{color:#EEF2F2}
.dark .eyebrow{color:#EEF2F2}
.dark .eyebrow::before{background:var(--ember)}

/* Reveal (JS toggles .in) */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{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}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}