/* ============================================================================
   X3WEB — BASE
   Reset, typography, layout primitives, section surfaces, utilities.
   Reads tokens.css. Declares no literal colours.
   ========================================================================== */

/* ── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + var(--space-4));
}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:var(--w-regular);
  line-height:1.65;
  color:var(--text);
  background:var(--frame);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
img,video{height:auto}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent-strong);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--accent)}

/* ── Typography ────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--ink);
  text-wrap:balance;
}
h1{
  font-size:var(--fs-h1);
  font-weight:var(--w-display);
  line-height:0.96;
  letter-spacing:var(--ls-display);
}
h2{
  font-size:var(--fs-h2);
  font-weight:var(--w-regular);
  line-height:1.1;
  letter-spacing:var(--ls-h2);
}
h3{
  font-size:var(--fs-h3);
  font-weight:var(--w-medium);
  line-height:1.25;
  letter-spacing:var(--ls-h3);
}
h4{
  font-size:var(--fs-h4);
  font-weight:var(--w-medium);
  line-height:1.35;
  letter-spacing:var(--ls-tight);
}
h5,h6{
  font-size:var(--fs-sm);
  font-weight:var(--w-semi);
  line-height:1.4;
  letter-spacing:var(--ls-tight);
}
p{color:var(--muted);line-height:1.72}
strong,b{font-weight:var(--w-semi);color:var(--ink)}
small{font-size:var(--fs-xs)}

/* ── Type roles ────────────────────────────────────────────────────────── *
   Named visual roles, decoupled from heading level. Use these when a heading
   must sit at a particular level for document structure but needs to *read*
   at a different size — a card title inside an h2 section is semantically an
   h3, but should still look like an h4. Correct the tag, then apply the role;
   never pick the wrong heading level to get a size.                          */
.t-h1{font-size:var(--fs-h1);font-weight:var(--w-display);line-height:0.96;letter-spacing:var(--ls-display)}
.t-h2{font-size:var(--fs-h2);font-weight:var(--w-regular);line-height:1.1;letter-spacing:var(--ls-h2)}
.t-h3{font-size:var(--fs-h3);font-weight:var(--w-medium);line-height:1.25;letter-spacing:var(--ls-h3)}
.t-h4{font-size:var(--fs-h4);font-weight:var(--w-medium);line-height:1.35;letter-spacing:var(--ls-tight)}
.t-label{
  font-size:var(--fs-2xs);
  font-weight:var(--w-semi);
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.t-body{font-size:var(--fs-body);font-weight:var(--w-regular);line-height:1.72}
.t-body-sm{font-size:var(--fs-sm);font-weight:var(--w-regular);line-height:1.6}
.t-caption{font-size:var(--fs-xs);font-weight:var(--w-regular);line-height:1.55;color:var(--muted-3)}

/* The accent underline. 104 headings across the site carry this; it is defined
   once here and nowhere else. Sub-headings sit tighter to their text. */
.u-accent{
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:2px;
  text-underline-offset:5px;
  text-decoration-skip-ink:auto;
}
h3 .u-accent,h4 .u-accent,h5 .u-accent{text-underline-offset:4px}

/* ── Layout ────────────────────────────────────────────────────────────── */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container-wide{max-width:var(--container-wide)}
.container-medium{max-width:var(--container-medium)}
.container-narrow{max-width:var(--container-narrow)}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-lg)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-md)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-md)}
.two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-xl);align-items:center}

/* ── Section surfaces ──────────────────────────────────────────────────── *
   Three backgrounds, each declaring the glass its cards will read. The
   .surface-* classes in tokens.css do the glass; these do the paint.        */
.section{padding:var(--section-pad) 0;background:var(--white)}
.section-alt{padding:var(--section-pad) 0;background:var(--frame)}
.section-blue{
  padding:var(--section-pad) 0;
  background:linear-gradient(168deg,var(--brand) 0%,var(--brand-deep) 100%);
  color:var(--on-dark);
}
.section-tight{padding:var(--section-pad-tight) 0}
.section-large{padding:calc(var(--section-pad) * 1.35) 0}

.section-blue h1,.section-blue h2,.section-blue h3,
.section-blue h4,.section-blue h5,.section-blue h6{color:var(--on-dark)}
.section-blue p{color:var(--on-dark-soft)}
.section-blue strong,.section-blue b{color:var(--on-dark)}

/* ── Section header ────────────────────────────────────────────────────── */
.section-header{margin-bottom:clamp(36px,4vw,56px)}
.section-header h2{margin-bottom:var(--space-4)}
.section-header p{font-size:var(--fs-lead);max-width:680px}
.section-header.text-center{text-align:center}
.section-header.text-center p{margin-inline:auto}

.section-label{
  display:inline-block;
  font-size:var(--fs-xs);
  font-weight:var(--w-medium);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-strong);
  margin-bottom:var(--space-4);
}
.section-blue .section-label{color:var(--accent)}

.section-bottom-note{
  margin-top:28px;
  text-align:center;
  font-size:var(--fs-sm);
  color:var(--muted-3);
}

/* ── Utilities ─────────────────────────────────────────────────────────── */
.text-center{text-align:center}
.text-body{font-size:var(--fs-body);color:var(--muted)}
.text-body-sm{font-size:var(--fs-sm);color:var(--muted)}
.text-body-xs{font-size:var(--fs-xs);color:var(--muted-3)}
.x3-orange{color:var(--accent-strong)}
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ── Focus ─────────────────────────────────────────────────────────────── */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  :root{--gutter:32px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  :root{--gutter:22px}
  .grid-2,.grid-3,.two-column{grid-template-columns:minmax(0,1fr)}
  .two-column{gap:var(--gap-lg)}
}
@media (max-width:560px){
  :root{--gutter:18px}
  .grid-4{grid-template-columns:minmax(0,1fr)}
}