/* ==========================================================================
   IZT TECH token layer + base element styles.

   Extracted from izt-tech-site.webflow.css so that the 270 KB Webflow export
   (84% of all CSS on the site) no longer blocks render on all 27 routes. Only
   /oldhome still uses Webflow utility classes, and it loads that file itself.

   This file is the single source of truth for brand values. See docs/DESIGN.md.
   ========================================================================== */

:root {
  /* ============================================================
     CANONICAL IZT BRAND PALETTE — single source of truth.
     HEX column of the brand guidelines (corroborated by Pantone).
     See IMPROVEMENT-PLAN.md § 3.2 / 3.3 / 3.4
     ============================================================ */
  --izt-classic-blue: #039BDB;  /* Pantone 2925 C  — accent/links; only brand color text-safe on dark (6.05:1) */
  --izt-antic-cuir:   #276190;  /* Pantone 647 C   — backgrounds & gradient endpoints ONLY (2.88:1 on dark) */
  --izt-navy:         #004C95;  /* Pantone 2945 C  — backgrounds & gradient endpoints ONLY (2.22:1 on dark) */
  --izt-charcoal:     #454444;  /* Pantone Black 7 C — body text on light, icon tiles; 9.70:1 on white */

  /* ============================================================
     NON-COLOUR TOKENS
     The token layer used to be 100% colour: no spacing, type, radius,
     shadow or motion tokens existed, which is why src/ accumulated 232
     literal font-sizes across 68 distinct values and 103 distinct
     spacing values. New and refactored CSS must use these.
     Existing literals are being migrated; do not add more.
     ============================================================ */

  /* type family */
  --font-heading: 'Poppins', 'Trebuchet MS', Arial, sans-serif;
  --font-body:    'Montserrat', 'Poppins', 'Trebuchet MS', Arial, sans-serif;

  /* type scale (fluid) */
  --fs-display: clamp(2.2rem, 4.8vw, 3.5rem);
  --fs-h2:      clamp(1.8rem, 3.4vw, 2.7rem);
  --fs-h3:      1.05rem;
  --fs-lede:    clamp(1.05rem, 1.5vw, 1.25rem);
  --fs-body:    1rem;
  --fs-body-lg: clamp(1rem, 1.25vw, 1.12rem);
  --fs-sm:      0.95rem;
  --fs-caption: 0.8rem;

  /* line-height + tracking */
  --lh-display: 1.05;
  --lh-heading: 1.1;
  --lh-body:    1.6;
  --tracking-display: -.03em;
  --tracking-heading: -.022em;
  --tracking-caption: .14em;

  /* spacing, 4px grid */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;
  --space-section: clamp(48px, 6vw, 88px);

  /* radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* elevation */
  --shadow-1: 0 1px 2px rgba(69, 68, 68, .06);
  --shadow-2: 0 1px 2px rgba(69, 68, 68, .06), 0 10px 28px -20px rgba(69, 68, 68, .4);
  --shadow-3: 0 2px 4px rgba(69, 68, 68, .07), 0 18px 38px -22px rgba(0, 76, 149, .5);

  /* hairlines. The old rgba(130,150,170,.18–.35) measured 1.13–1.93:1 against
     their surfaces, failing WCAG 1.4.11 (3:1) for meaningful borders. */
  --border-subtle: rgba(130, 150, 170, .30);
  --border-ui:     rgba(130, 150, 170, .62);  /* 3.05:1 on --background */

  /* motion */
  --dur-fast: .16s;
  --dur-med:  .28s;
  --ease-out: cubic-bezier(.2, .7, .3, 1);

  /* layout */
  --container: 1180px;
  --container-narrow: 820px;

  /* Hero decoration: schematic trace strokes and their junction nodes. Blue only,
     deliberately, because the asset this replaced carried an #FF8B3A gradient from the
     pre-2026 brand. Keeping them as tokens means the motif cannot drift off-palette, and
     both are overridden in the .theme-light scope. */
  --hero-ring: rgba(82, 177, 255, .26);
  --hero-node: rgba(82, 177, 255, .48);

  /* semantic states */
  --color-success: #2f9e5f;
  --color-error:   #c8452a;  /* 4.61:1 on white, 5.02:1 on --background */
  --color-warning: #9a6b00;
  --color-info:    var(--izt-classic-blue);

  /* On-dark tints of Classic Blue. Required for TEXT: the brand's darker colors
     (navy 2.22:1, antic cuir 2.88:1, charcoal 1.95:1) are unreadable on the dark
     background, so text-clipped gradients must use these instead. */
  --izt-classic-blue-300: #52b1ff;

  /* Primary-action fill + its label, kept as a pair so the label always has
     contrast against the fill in whichever theme is active.
     dark: dark ink on light blue (8.19:1) | light: white on Antic Cuir (6.56:1) */
  --btn-bg: #52b1ff;
  --btn-fg: #0d1117;  /* 8.19:1 on --background — the on-dark accent */
  --izt-classic-blue-200: #8ccbff;  /* 10.6:1 on --background — light end of text gradients */  /* Pantone Black 7 C — light surfaces + icon circles; never text on dark */

  /* Brand gradients — blue family only. Keep the 135deg axis; max two per viewport. */
  --izt-grad-primary: linear-gradient(135deg, var(--izt-classic-blue), var(--izt-antic-cuir));
  --izt-grad-deep:    linear-gradient(135deg, var(--izt-antic-cuir), var(--izt-navy));
  --izt-grad-hero:    linear-gradient(135deg, var(--izt-classic-blue) 0%, var(--izt-antic-cuir) 55%, var(--izt-navy) 100%);
  --izt-grad-glow:    radial-gradient(circle at 50% 50%, rgba(3, 155, 219, .45), transparent 70%);

  --background: #0d1117;
  --text: #a7b5c3;
  --titles-links: #ccdae7;
  --neutral-800: #171e25;
  --neutral-700: #1e252c;
  --primary-izt-blue: var(--izt-antic-cuir);
  --white: white;
  --primary-izt-dark-blue: var(--izt-navy);
  --neutral-600: #272e35;
  --navbar: transparent;
  --black: #0d1117;
  --primary-izt-blue-600: #1b4b72;
  --izt-white-gray: #f2f1f0;
  --izt-neon-blue: var(--izt-classic-blue-300);
  --blue-700: #1748d1;
  --purple-400: #b77cf1;
  --purple-200: #e0caf8;
  --purple-50: #f4eefa;
  --neutral-400: #646f7c;
  --red-500: #e23b3b;
  --blue-300: #89bcf5;
  --teal-200: #92f3e0;
  --accent: var(--izt-classic-blue-300);
  --yellow-300: #f1dc39;
  --purple-100: #eadcf8;
  --teal-100: #c5faf1;
  --blue-100: #d0e2f6;
  --green-100: #cbf3d9;
  --green-400: #3dd875;
  --teal-400: #26d5bf;
  --teal-50: #e9faf7;
  --blue-50: #e2ecf8;
  --green-50: #e3f6e9;
  --red-50: #f6e0e0;
  --yellow-50: #f5f2d4;
  --color: white;
  --slate-600: #3f4e61;
  --slate-200: #cfd9e4;
  --slate-50: #eff4f8;
  --slate-100: #e2e8ee;
  --border: #21262d;
  --neutral-500: #3f4852;
  --green-300: #7beca4;
  --neutral-200: #a5b4c2;
  --blue-500: #3077eb;
  --red-400: #ec6464;
  --red-300: #f09898;
  --red-200: #f1b5b5;
  --red-600: #d31919;
  --red-100: #f1cfcf;
  --green-200: #acf1c5;
  --blue-600: #1d59db;
  --blue-200: #b0cff7;
  --neutral-900: #101720;
  --amber-400: #f1b51a;
  --slate-300: #bcc9d8;
  --slate-400: #8597ad;
  --slate-500: #5b6d83;
  --slate-700: #2c3a4b;
  --slate-800: #1d2736;
  --slate-900: #131d31;
  --red-700: #ac1515;
  --red-800: #961313;
  --red-900: #770505;
  --orange-50: #f5e8d7;
  --orange-100: #f5dfc1;
  --orange-200: #f3ca9b;
  --orange-300: #f0ad68;
  --orange-400: #ee8733;
  --orange-500: #ec6a10;
  --orange-600: #db5008;
  --orange-700: #b43b09;
  --orange-800: #8a2d0f;
  --orange-900: #72260c;
  --yellow-100: #f3f1af;
  --yellow-200: #f5ed7b;
  --yellow-400: #eecc0b;
  --yellow-500: #d3a707;
  --yellow-600: #bb8b06;
  --yellow-700: #96630b;
  --yellow-800: #7e4c07;
  --yellow-900: #6d3e0b;
  --lime-50: #eef7da;
  --lime-100: #e2f5bc;
  --lime-200: #cff18f;
  --lime-300: #aedf58;
  --lime-400: #97db27;
  --lime-500: #77bd0c;
  --lime-600: #599208;
  --lime-700: #467508;
  --lime-800: #385a0c;
  --lime-900: #2c460d;
  --green-500: #17be55;
  --green-600: #0f9b42;
  --green-700: #117737;
  --green-800: #115f2f;
  --green-900: #0f4c28;
  --teal-300: #55e4d6;
  --teal-500: #0eb2a0;
  --teal-600: #089084;
  --teal-700: #097068;
  --teal-800: #0a5c57;
  --teal-900: #0c534a;
  --cyan-50: #e1fafc;
  --cyan-100: #c1f3f8;
  --cyan-200: #9bedf7;
  --cyan-300: #5ce5f6;
  --cyan-400: #1acee9;
  --cyan-500: #07b4d1;
  --cyan-600: #058aaa;
  --cyan-700: #096f8b;
  --cyan-800: #0f5a72;
  --cyan-900: #114a5f;
  --sky-50: #e7f2fa;
  --sky-100: #d3e8f6;
  --sky-200: #b5e6ff;
  --sky-300: #73cbf5;
  --sky-400: #31b3ec;
  --sky-500: #079de0;
  --sky-600: #037cbb;
  --sky-700: #06689e;
  --sky-800: #04547f;
  --sky-900: #064264;
  --blue-400: #559df5;
  --blue-800: #1335a7;
  --blue-900: rgba(10, 42, 136, 0.35);
  --indigo-50: #e6eaf6;
  --indigo-100: #d5dcf5;
  --indigo-200: #bcc6ee;
  --indigo-300: #a5b3f7;
  --indigo-400: #7f89ec;
  --indigo-500: #6668eb;
  --indigo-600: #524add;
  --indigo-700: #4036be;
  --indigo-800: #2e2799;
  --indigo-900: #0c0a53;
  --violet-50: #efedfa;
  --violet-100: #e4e0f5;
  --violet-200: #d7d1f3;
  --violet-300: #c0b3f3;
  --violet-400: #a38aee;
  --violet-500: #8d62ee;
  --violet-600: #7a3ee0;
  --violet-700: #6d2cd3;
  --violet-800: #5e26b8;
  --violet-900: #4b12a3;
  --purple-300: #d0acf6;
  --purple-500: #a355ee;
  --purple-600: #982ff7;
  --purple-700: #821eda;
  --purple-800: #6f1ab6;
  --purple-900: #5d1694;
  --pink-50: #faedf4;
  --pink-100: #f7dceb;
  --pink-200: #f6c8e3;
  --pink-300: #f39dcc;
  --pink-400: #ee6db1;
  --pink-500: #f34a9d;
  --pink-600: #e22a7c;
  --pink-700: #e60060;
  --pink-800: #a5144e;
  --pink-900: #8b1344;
  --rose-50: #fceced;
  --rose-100: #f5d7d9;
  --rose-200: #f3c3c9;
  --rose-300: #f89aa6;
  --rose-400: #ff7a8d;
  --rose-500: #f14563;
  --rose-600: #df2c53;
  --rose-700: #c71742;
  --rose-800: #ad113c;
  --amber-50: #f5efd6;
  --amber-100: #f3e6b1;
  --amber-200: #f5dc7a;
  --amber-300: #f1c73f;
  --amber-500: #e49106;
  --amber-600: #c96e05;
  --amber-700: #a84b05;
  --amber-800: #863707;
  --amber-900: #722e07;
  --rose-900: #97103a;
  --gray-50: #eff3f7;
  --gray-100: #ebeef3;
  --gray-200: #dbdfe7;
  --gray-300: #c9d0da;
  --gray-400: #909aa8;
  --gray-500: #636c7c;
  --gray-600: #465363;
  --gray-700: #313c4d;
  --gray-800: #222d3b;
  --gray-900: #1b2435;
  --neutral-50: #dfebf7;
  --neutral-100: #bbc8d5;
  --neutral-300: #7c8c9b;
  --izt-light-gray: #d7d4d2;
  --primary-izt-blue-300: #8dbde4;
  --izt-black: #0e0d0c;
  --hover: #475569;
  --navbar-shadow: rgba(64, 71, 82, .1);
  --nav-link: rgba(13, 17, 23, .25);
  --izt-gray: #3e3a36;
  --izt-gray-600: #2d2a28;
  --izt-gray-400: #6a635c;
  --izt-gray-300: #888077;
  --izt-gray-200: #bdb8b3;
  --primary-izt-blue-700: #102d45;
  --primary-izt-blue-400: var(--titles-links);
}

/* ---- base element styles (were lines 402-486 of the Webflow export) ---- */

/* This MUST stay here. webflow.css set `box-sizing: border-box` globally, and it
   used to load on every page. When that file was scoped to /oldhome, every
   `.wrap` (width: 100% plus 18px horizontal padding) grew to viewport + 36px and
   produced horizontal scroll on every route at 320px. normalize.css does not set
   box-sizing globally, so this is the only thing providing it. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--background);
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  /* Was 1.333, which is below the WCAG 1.4.12 text-spacing target of 1.5 and
     governed every element that did not override it: all footer links, nav
     links and inline link lists. */
  line-height: 1.5;
}

h1 {
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3em;
  font-weight: 800;
  line-height: 1.2;
}

h2 {
  letter-spacing: -.01em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.25em;
  font-weight: 700;
  line-height: 1.2;
}

h3 {
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.875em;
  font-weight: 700;
  line-height: 1.2;
}

h4 {
  letter-spacing: -.01em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.2;
}

h5 {
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.2;
}

h6 {
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.2;
}

p {
  margin-bottom: 1em;
}

a {
  color: var(--titles-links);
  text-decoration: none;
  /* Was .3s, which desynced against the scoped --dur-fast (.16s) transitions on
     the same elements: colour lagged transform by 140ms on every card. */
  transition:
    opacity var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 40px;
}

blockquote {
  border-left: 4px solid var(--titles-links);
  color: var(--titles-links);
  margin-top: 2em;
  margin-bottom: 2em;
  padding: .25em 2em;