/* CADOpt base styles — resets, type, links, focus, layout primitives */

*, *::before, *::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Clears the sticky header (and sub-nav, where present) so in-page anchor
     links never land underneath it — the most-missed line in a hand-built
     sticky header. */
  scroll-padding-top:calc(var(--header-h-scrolled) + 52px + var(--space-4));
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:var(--fw-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

img, svg, video{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{
  font-family:var(--font-brand);
  color:var(--text-strong);
  margin:0 0 var(--space-4);
  letter-spacing:var(--tracking-headline);
}
h1{ font-size:var(--fs-h1); font-weight:var(--fw-h1); line-height:var(--lh-h1); }
h2{ font-size:var(--fs-h2); font-weight:var(--fw-h2); line-height:var(--lh-h2); }
h3{ font-size:var(--fs-h3); font-weight:var(--fw-h3); line-height:var(--lh-h3); }
h4{ font-size:var(--fs-h4); font-weight:var(--fw-h4); line-height:var(--lh-h4); }

p{ margin:0 0 var(--space-4); max-width:var(--measure); }
p.lead{ font-size:var(--fs-lead); font-weight:var(--fw-lead); line-height:var(--lh-lead); color:var(--text-body); }

/* Century Gothic ships no italic — use weight for emphasis, never font-style */
em, i{ font-style:normal; font-weight:var(--fw-h4); }
strong, b{ font-weight:700; }

a{ color:var(--blue-600); text-decoration:none; }
a:hover{ text-decoration:underline; }

code, kbd, samp, .mono{
  font-family:var(--font-mono);
  font-size:0.9em;
}

.eyebrow{
  display:inline-block;
  font-family:var(--font-brand);
  font-size:14px;
  font-weight:600;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--brand-bright);
}
.on-dark .eyebrow{ color:var(--brand-on-dark); }

.container{
  width:100%;
  max-width:var(--container-lg);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--md{ max-width:var(--container-md); }

.section{ padding-block:var(--section-rhythm); }
.section.on-dark{ background:var(--grad-ink); color:var(--white); }
.section.on-dark h1, .section.on-dark h2, .section.on-dark h3, .section.on-dark h4{ color:var(--white); }
.section.on-dark p{ color:var(--blue-100); }
.section.on-tint{ background:var(--grad-blade-soft); }

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

/* Focus ring — always visible, never removed, matches motion spec */
:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:var(--radius-xs);
}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--graphite-900); color:#fff;
  padding:var(--space-3) var(--space-4);
  z-index:1000;
  border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left:0; }

/* Breadcrumb */
.breadcrumb{ padding-block:var(--space-4); border-bottom:1px solid var(--border-subtle); }
.breadcrumb ol{ list-style:none; display:flex; align-items:center; gap:var(--space-2); margin:0; padding:0; font-size:13px; color:var(--text-muted); }
.breadcrumb li + li::before{ content:"/"; margin-right:var(--space-2); color:var(--border-strong); }
.breadcrumb a{ color:var(--text-muted); }
.breadcrumb a:hover{ color:var(--brand); }
.breadcrumb li[aria-current="page"]{ color:var(--text-strong); font-weight:600; }

/* Sub-nav (anchor tabs) — sticky chip row below the header on long pages */
.subnav{ position:sticky; top:var(--header-h-scrolled); z-index:90; background:rgba(255,255,255,.95); backdrop-filter:blur(6px); border-bottom:1px solid var(--border-subtle); }
.subnav .container{ display:flex; gap:var(--space-2); overflow-x:auto; padding-block:var(--space-3); scrollbar-width:none; }
.subnav .container::-webkit-scrollbar{ display:none; }
.subnav a{
  flex:none; display:inline-flex; align-items:center; height:36px; padding-inline:var(--space-4);
  font-family:var(--font-brand); font-size:13px; font-weight:600; color:var(--text-body);
  border-radius:var(--radius-pill); border:1px solid var(--border-subtle); white-space:nowrap;
}
.subnav a:hover{ color:var(--brand); border-color:var(--border-brand,var(--blue-300)); text-decoration:none; }

/* Reveal-on-scroll — fires once via IntersectionObserver in main.js.
   Never applied above the fold (a delayed hero is a self-inflicted LCP hit). */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.reveal[data-revealed="true"]{ opacity:1; transform:none; }