/* ==============================================
   base.css — variables, reset, base typography, utilities
   Loaded first. Split from style.css.
   ============================================== */


/* ─── CUSTOM PROPERTIES ─────────────────────── */
:root {
  --color-primary:    #FF7A00;
  --color-secondary:  #241F20;
  --color-teal:       #3E525A;
  --color-green:      #5AA900;
  --color-bg-gray:    #F4F4F4;
  --color-border:     #DFDFDF;
  --color-border-light: #E9E9E9;

  --font: 'Open Sans', sans-serif;

  /* ─── TYPOGRAPHY SCALE ───────────────────── */
  --fs-xs:   0.8125rem;  /* 13px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.25rem;    /* 20px */
  --fs-lg:   1.3125rem;  /* 21px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  1.75rem;    /* 28px */
  --fs-3xl:  2rem;       /* 32px */
  --fs-4xl:  2.5rem;     /* 40px */
  --fs-5xl:  3rem;       /* 48px */
  --fs-6xl:  4rem;       /* 64px */

  /* Semantic aliases */
  --font-size-h1:      var(--fs-6xl);
  --font-size-h2:      var(--fs-5xl);
  --font-size-h3:      var(--fs-4xl);
  --font-size-h4:      var(--fs-3xl);
  --font-size-h5:      var(--fs-2xl);
  --font-size-h6:      var(--fs-xl);
  --font-size-lead:    var(--fs-lg);
  --font-size-desc:    var(--fs-md);
  --font-size-body:    var(--fs-base);
  --font-size-small:   var(--fs-sm);
  --font-size-caption: var(--fs-xs);

  /* ─── FONT WEIGHTS ───────────────────────── */
  --fw-regular:   400;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --font-weight-heading: var(--fw-bold);
  --font-weight-body:    var(--fw-regular);
  --font-weight-ui:      var(--fw-semibold);
  --font-weight-button:  var(--fw-semibold);
  --font-weight-nav:     var(--fw-bold);

  /* ─── LINE HEIGHTS ───────────────────────── */
  --lh-heading: 1.1;
  --lh-subhead: 1.2;
  --lh-body:    1.6;
  --lh-ui:      normal;

  --line-height-h1:   var(--lh-heading);
  --line-height-h2:   var(--lh-heading);
  --line-height-h3:   var(--lh-subhead);
  --line-height-body: var(--lh-body);
  --line-height-ui:   var(--lh-ui);

  /* ─── LETTER SPACING ─────────────────────── */
  --ls-heading: -0.02em;
  --ls-body:    -0.02em;
  --ls-caps:     0.08em;

  --container-max:   1728px;
  --content-width:   1428px;
  --section-px:      150px;
  --section-py:      96px;
  --wide-section-px: 144px;
  --footer-section-px: 145px;
  --page-gutter: max(var(--section-px), calc((100vw - var(--container-max)) / 2 + var(--section-px)));
  --wide-page-gutter: max(var(--wide-section-px), calc((100vw - var(--container-max)) / 2 + var(--wide-section-px)));
  --footer-page-gutter: max(var(--footer-section-px), calc((100vw - var(--container-max)) / 2 + var(--footer-section-px)));
  --frame-gutter-10: max(10px, calc((100vw - var(--container-max)) / 2 + 10px));
  --frame-gutter-24: max(24px, calc((100vw - var(--container-max)) / 2 + 24px));
  --frame-gutter-64: max(64px, calc((100vw - var(--container-max)) / 2 + 64px));
  --frame-gutter-132: max(132px, calc((100vw - var(--container-max)) / 2 + 132px));
  --frame-gutter-140: max(140px, calc((100vw - var(--container-max)) / 2 + 140px));
  --frame-gutter-142: max(142px, calc((100vw - var(--container-max)) / 2 + 142px));
  --frame-gutter-149: max(149px, calc((100vw - var(--container-max)) / 2 + 149px));
  --frame-gutter-150: max(150px, calc((100vw - var(--container-max)) / 2 + 150px));
  --frame-gutter-153: max(153px, calc((100vw - var(--container-max)) / 2 + 153px));
  --frame-gutter-161: max(161px, calc((100vw - var(--container-max)) / 2 + 161px));
}

/* ─── RESET & BASE ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; zoom: 0.93; }
body {
  font-family: var(--font);
  color: var(--color-secondary);
  background: #fff;
  margin: 0;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Visually-hidden utility for screen-reader-only labels (used by tracking input) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}