/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior: smooth}
/* Reserve the JS-injected header's height before partials.js runs, so a deep-link
   to a #section lands in the right place and the page doesn't lurch when the
   header is injected after load. (Placeholder is replaced by the real header.) */
[data-site-header]{display: block; min-height: var(--header-h, 77px)}
html,body{
  font-family: var(--ff-primary);
  font-size:   var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color:       var(--c-navy);
  background:  var(--c-paper);
  -webkit-font-smoothing: antialiased;
}
a{color: inherit; text-decoration: none; transition: color .15s ease}
/* all clickable text links go red on hover (buttons, logo and card-links keep their own styling).
   Guarded so the colour doesn't "stick" on touch devices. */
@media (hover: hover){
  a:not(.btn):not(.logo):not(.ref-card):not([data-opt]):hover{color: var(--c-red)}
}
button{font-family: inherit; border: none; background: none; cursor: pointer; color: inherit}
img,svg{display: block; max-width: 100%}
ul{list-style: none}
h1,h2,h3,h4,h5{font-weight: var(--fw-semibold)}


/* ============================================================
   TYPOGRAPHY UTILITIES — 1:1 с typography.* из Figma
   ============================================================ */
/* Each class is the single source of truth for a Figma text style:
   family + weight + size + line-height + letter-spacing (+ transform). */
/* display text style = 64px (var --t-display-size), NOT fontSize.display=88px */
.t-display    {font-family: var(--ff-primary); font-weight: var(--fw-semibold); font-size: var(--t-display-size); line-height: var(--t-display-line); letter-spacing: -0.025em}
.t-h1         {font-family: var(--ff-primary); font-weight: var(--fw-semibold); font-size: var(--t-h1-size);   line-height: var(--lh-h1);      letter-spacing: -0.02em}
.t-h2         {font-family: var(--ff-primary); font-weight: var(--fw-semibold); font-size: var(--t-h2-size);   line-height: var(--lh-h2);      letter-spacing: -0.02em}
.t-h3         {font-family: var(--ff-primary); font-weight: var(--fw-semibold); font-size: var(--t-h3-size);   line-height: var(--lh-h3);      letter-spacing: -0.01em}
.t-h4         {font-family: var(--ff-primary); font-weight: var(--fw-semibold); font-size: var(--fs-h4);      line-height: var(--lh-h4)}
.t-lead       {font-family: var(--ff-primary); font-weight: var(--fw-regular);  font-size: var(--t-lead-size); line-height: var(--lh-lead)}
.t-body       {font-family: var(--ff-primary); font-weight: var(--fw-regular);  font-size: var(--fs-body);    line-height: var(--lh-body)}
.t-body-medium{font-family: var(--ff-primary); font-weight: var(--fw-medium);   font-size: var(--fs-body);    line-height: var(--lh-body)}
.t-small      {font-family: var(--ff-primary); font-weight: var(--fw-regular);  font-size: var(--fs-small);   line-height: var(--lh-small)}
.t-eyebrow    {font-family: var(--ff-primary); font-weight: var(--fw-medium);   font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: 0.18em; text-transform: uppercase}
.t-micro      {font-family: var(--ff-primary); font-weight: var(--fw-medium);   font-size: var(--fs-micro);   line-height: var(--lh-micro);   letter-spacing: 0.04em}
/* phone: eyebrow can wrap to 2 lines; the Figma line-height (1.0) makes them touch, so give it air */
@media (max-width: 599.98px){ .t-eyebrow{line-height: 1.4} }


/* ============================================================
   LAYOUT
   ============================================================ */
/* Horizontal spacing is owned by the SECTION via --section-px. Inner containers
   only cap width + centre — they must NOT add side padding (avoids double inset). */
.section{padding: var(--section-pt) var(--section-px) var(--section-pb)}
.wrap   {max-width: var(--container-max); margin: 0 auto; width: 100%}
.inner  {width: 100%}

/* ---- intrinsic responsive grids — collapse with NO media queries ----
   Children wrap automatically when they can't keep their min width.
   Add .cq on a wrapper to make its children respond to the CONTAINER
   width (its slot on the page), not the viewport — ideal for reusable
   components placed in different column counts across pages. */
.grid        {display: grid; gap: var(--grid-gap)}
.grid.cols-2 {grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr))}
.grid.cols-3 {grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr))}
.grid.cols-4 {grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr))}
.cq          {container-type: inline-size}