/* ==========================================================================
   HAZORGS MARKETING — base.css
   Design tokens, reset, typography.
   Every brand value lives here. Change it here, it changes everywhere.
   ========================================================================== */

:root {

  /* --- BRAND ------------------------------------------------------------
     Sampled directly from the supplied logo files.
     --brand-red is the LOGO red. Do not use it for text or button fills —
     it fails WCAG AA (4.00:1). Use --red for anything a user reads or taps.
     -------------------------------------------------------------------- */
  --brand-red:      #FF0000;   /* logo only */
  --red:            #D40000;   /* UI red — 5.53:1 on white, passes AA */
  --red-dark:       #A80000;   /* hover / pressed */
  --red-tint:       #FFF1F1;   /* pale wash for section backgrounds */

  /* --- NEUTRALS ---------------------------------------------------------
     Pure #000 is reserved for the logo. Body copy uses --ink: softer on
     screen across ~11 pages of long-form reading, still 16.9:1 on white.
     -------------------------------------------------------------------- */
  --black:          #000000;   /* logo only */
  --ink:            #141414;   /* headings + body */
  --ink-soft:       #4A4A4A;   /* secondary copy */
  --ink-mute:       #767676;   /* captions, meta — 4.54:1, passes AA */
  --line:           #E4E4E4;   /* borders, rules */
  --surface:        #F7F7F7;   /* alternating section background */
  --white:          #FFFFFF;

  /* --- TYPE -------------------------------------------------------------
     Archivo (variable, wdth axis) for display — expanded widths echo the
     wide rounded-square icon and the wide-set wordmark.
     IBM Plex Sans for body — engineered tone, holds up at small sizes on
     low-end screens across ~11 pages of dense copy.
     -------------------------------------------------------------------- */
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wide: 112%;   /* display width axis */

  /* Fluid type scale — 1.250 minor third, clamped for mobile → desktop */
  --t-xs:    0.8125rem;                            /* 13px  eyebrows, meta */
  --t-sm:    0.9375rem;                            /* 15px  captions */
  --t-base:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-lead:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);  /* intro paragraphs */
  --t-h4:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-h3:    clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --t-h2:    clamp(1.75rem, 1.45rem + 1.5vw, 2.75rem);
  --t-h1:    clamp(2.25rem, 1.7rem + 2.75vw, 4rem);

  --lh-tight: 1.08;
  --lh-head:  1.18;
  --lh-body:  1.65;

  /* --- SPACING — 4px base ---------------------------------------------- */
  --s-1:  0.25rem;   --s-2:  0.5rem;    --s-3:  0.75rem;
  --s-4:  1rem;      --s-5:  1.5rem;    --s-6:  2rem;
  --s-7:  3rem;      --s-8:  4rem;      --s-9:  6rem;
  --s-10: 8rem;

  --section-y: clamp(3.5rem, 2rem + 7vw, 7rem);   /* vertical section rhythm */

  /* --- LAYOUT ----------------------------------------------------------- */
  --wrap:       1200px;   /* standard content width */
  --wrap-text:  680px;    /* prose — capped for readable line length */
  --gutter:     clamp(1.25rem, 4vw, 2.5rem);

  --radius:    4px;
  --radius-lg: 8px;

  --shadow:    0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.10);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur:  200ms;
}

/* ==========================================================================
   RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  overflow-x: clip; /* prevents sideways scroll from the off-canvas drawer */
}

/* Applied by JS when the mobile nav drawer is open.
   overflow:hidden on <html> is the only lock that works across all mobile
   browsers when html already has overflow-x:clip.
   The !important on overflow-x ensures clip is not silently overridden when
   overflow shorthand is set to hidden by JS. */
html.nav-open {
  overflow-y: hidden !important;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  text-wrap: balance;          /* stops orphan words in headlines */
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--t-h1); line-height: var(--lh-tight);
  font-weight: 800; letter-spacing: -0.035em;
  font-stretch: var(--wide);
}
h2 {
  font-size: var(--t-h2); line-height: var(--lh-head);
  font-weight: 800; letter-spacing: -0.03em;
  font-stretch: var(--wide);
}
h3 { font-size: var(--t-h3); line-height: var(--lh-head); font-weight: 700; letter-spacing: -0.02em; }
h4 { font-size: var(--t-h4); line-height: 1.3;            font-weight: 600; letter-spacing: -0.01em; }

p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --- THE SLASH -----------------------------------------------------------
   The one distinctive idea in this identity is the red slash cut through
   the "o" of the wordmark. It is reused as the site's structural marker:
   eyebrows, list bullets, section rules, process steps. Nothing else is
   invented — the brand already had its device, this just extends it.
   ------------------------------------------------------------------------ */
.slash {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--red);
  transform: skewX(-18deg);
  flex: none;
}
.slash--lg { width: 5px; height: 1.6em; }

/* Eyebrow — small uppercase label above a heading, marked with the slash. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  font-stretch: 105%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before {
  content: "";
  width: 3px; height: 1.1em;
  background: var(--red);
  transform: skewX(-18deg);
}
.section--ink .eyebrow { color: var(--brand-red); }
.section--ink .eyebrow::before { background: var(--brand-red); }

/* Ticked list — slash instead of a disc. Used for the many benefit lists. */
.ticks li {
  position: relative;
  padding-left: var(--s-5);
  margin-bottom: var(--s-3);
  color: var(--ink-soft);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 3px; height: 0.85em;
  background: var(--red);
  transform: skewX(-18deg);
}
.section--ink .ticks li { color: rgba(255,255,255,.75); }

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.wrap      { width: 100%; max-width: var(--wrap);      margin-inline: auto; padding-inline: var(--gutter); }
.wrap-text { width: 100%; max-width: var(--wrap-text); margin-inline: auto; padding-inline: var(--gutter); }

.section          { padding-block: var(--section-y); }
.section--surface { background: var(--surface); }
.section--tint    { background: var(--red-tint); }
.section--ink     { background: var(--ink); color: var(--white); }
.section--ink h1, .section--ink h2,
.section--ink h3, .section--ink h4 { color: var(--white); }
.section--ink .lead { color: rgba(255,255,255,.72); }

.stack > * + * { margin-top: var(--s-4); }

/* ==========================================================================
   ACCESSIBILITY FLOOR
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100%;
  z-index: 999;
  padding: var(--s-3) var(--s-4);
  background: var(--ink); color: var(--white);
  text-decoration: none; border-radius: var(--radius);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}