/* -------------------------------
   1) Design Tokens (CSS Variables)
----------------------------------*/
:root {
  /* Brand */
  --brand-yellow: #ffcc00; /* Public brand accent */      /* IDEX brand listing */
  --brand-black:  #000000; /* Public brand black */       /* IDEX brand listing */
  --brand-white:  #ffffff; /* Public brand white */       /* IDEX brand listing */

  /* Core Neutrals (tune with a color extractor if you want 1:1 grays from site) */
  --gray-950: #0a0a0a;
  --gray-900: #111111;
  --gray-800: #1f1f1f;
  --gray-700: #2e2e2e;
  --gray-600: #4a4a4a;
  --gray-500: #6e6e6e;
  --gray-400: #9a9a9a;
  --gray-300: #c7c7c7;
  --gray-200: #e4e4e4;
  --gray-100: #f3f3f3;
  --gray-50:  #fafafa;

  /* Text */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-inverse: var(--brand-white);
  --text-on-yellow: var(--brand-black);

  /* Links & Buttons */
  --link: var(--brand-black);
  --link-hover: var(--gray-700);

  --btn-primary-bg: var(--brand-yellow);
  --btn-primary-text: var(--text-on-yellow);
  --btn-primary-hover-bg: #e6b800; /* ~10-12% darker than FFCC00 */
  --btn-outline-border: var(--gray-900);
  --btn-outline-text: var(--gray-900);
  --btn-outline-hover-bg: var(--gray-100);

  /* Backgrounds & Surfaces */
  --bg-body: var(--brand-white);
  --bg-muted: var(--gray-100);
  --surface: var(--brand-white);
  --surface-alt: var(--gray-50);

  /* Borders / Dividers */
  --border: var(--gray-200);
  --divider: var(--gray-200);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.12);

  /* Typography */
  /* Replace with corporate font stack if applicable (check licensing). */
  --font-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Type Scale (adjust after inspecting headings on idexcorp.com if desired) */
  --fs-900: clamp(40px, 4.2vw, 56px); /* H1 */
  --fs-800: clamp(32px, 3.2vw, 40px); /* H2 */
  --fs-700: 28px;  /* H3 */
  --fs-600: 22px;  /* H4 */
  --fs-500: 18px;  /* Subtitle / Lead */
  --fs-400: 16px;  /* Body */
  --fs-300: 14px;  /* Small text */

  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* Spacing Scale */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* --------------------------------
   2) Base Elements & Typography
-----------------------------------*/
html, body {
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: var(--lh-normal);
}

h1, .h1 { font-size: var(--fs-900); line-height: var(--lh-tight); font-weight: var(--font-weight-bold); margin: var(--space-7) 0 var(--space-4); }
h2, .h2 { font-size: var(--fs-800); line-height: var(--lh-tight); font-weight: var(--font-weight-bold); margin: var(--space-6) 0 var(--space-3); }
h3, .h3 { font-size: var(--fs-700); line-height: var(--lh-tight); font-weight: var(--font-weight-bold); margin: var(--space-5) 0 var(--space-3); }
h4, .h4 { font-size: var(--fs-600); line-height: var(--lh-tight); font-weight: var(--font-weight-medium); margin: var(--space-4) 0 var(--space-2); }

p { margin: 0 0 var(--space-4) 0; color: var(--text-primary); }
.small, small { font-size: var(--fs-300); color: var(--text-secondary); }

a {
  color: var(--link);
  text-decoration: none;
}
a:hover, a:focus {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Accessibility helpers */
:focus-visible {
  outline: 3px solid var(--brand-yellow);
  outline-offset: 2px;
}

/* ------------------------------
   3) Layout Containers / Cards
-------------------------------*/
.section {
  padding: var(--space-7) 0;
  background: var(--surface);
}
.section.alt {
  background: var(--surface-alt);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.card:hover {
  box-shadow: var(--shadow-md);
}

/* ------------------------------
   4) Header / Navigation
-------------------------------*/
.site-header {
  background: var(--brand-white);
  border-bottom: 1px solid var(--divider);
}
.site-header .logo img {
  max-height: 40px;
}
.site-nav a {
  color: var(--text-primary);
  padding: var(--space-4) var(--space-3);
  display: inline-block;
}
.site-nav a:hover {
  color: var(--gray-700);
  text-decoration: none;
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
}

/* ------------------------------
   5) Buttons
-------------------------------*/
button, .btn {
  font: inherit;
  font-weight: var(--font-weight-medium);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .05s ease;
  border: 1px solid transparent;
}

.btn-primary, button.primary, input[type="submit"].primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.btn-primary:hover,
button.primary:hover,
input[type="submit"].primary:hover {
  background: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-bg);
}

.btn-outline, .btn-secondary {
  background: transparent;
  color: var(--btn-outline-text);
  border-color: var(--btn-outline-border);
}
.btn-outline:hover, .btn-secondary:hover {
  background: var(--btn-outline-hover-bg);
}

/* Icon-only buttons */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
}
.btn-icon:hover { background: var(--bg-muted); }

/* ------------------------------
   6) Forms (Registration, etc.)
-------------------------------*/
form label {
  display: block;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1