/* W111: EHO360 static site. Tokens follow EHO_Brand_Basics_June2021.pdf; names and scales follow Tailwind
   so classes read the same as csweb (www/tailwind). */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --container-pad: 1rem;
  --color-reflex-blue: #000099;
  --color-reflex-blue-dark: #00006b;
  --color-brand-blue: #0079c1;
  --color-brand-blue-dark: #006aa8;
  --color-brand-green: #00946e;
  --color-brand-green-dark: #007d5d;
  --color-pantone-7710: #00a5b5;
  --color-pantone-7488: #70d44b;
  --color-green-hl: #d7f7c4;
  --color-cyan-hl: #caefef;
  --color-blue-hl: #e6f1f9;
  --color-eho-gray: #a7a8a9;
  --color-eho-charcoal: #4d4d4f;
  --color-white: #fff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  --font-sans: "Avenir Next", Avenir, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.75rem;   --leading-xs: 1rem;
  --text-sm: 0.875rem;  --leading-sm: 1.25rem;
  --text-base: 1rem;    --leading-base: 1.5rem;
  --text-lg: 1.125rem;  --leading-lg: 1.75rem;
  --text-xl: 1.25rem;   --leading-xl: 1.75rem;
  --text-2xl: 1.5rem;   --leading-2xl: 2rem;
  --text-3xl: 1.875rem; --leading-3xl: 2.25rem;
  --text-4xl: 2.25rem;  --leading-4xl: 2.5rem;
  --text-5xl: 3rem;     --leading-5xl: 1.1;

  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  --header-height: 4.5rem;
}

/* ── Preflight (trimmed Tailwind base) ──────────────────── */
*, ::before, ::after { box-sizing: border-box; border: 0 solid var(--color-gray-200); }
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}
body { margin: 0; color: var(--color-gray-700); background: var(--color-white); }
h1, h2, h3, h4, p, blockquote, dl, dd, figure, ul, ol { margin: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; color: var(--color-gray-900); text-wrap: balance; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: inherit; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; cursor: pointer; padding: 0; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-brand-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { transition: none !important; animation: none !important; }
}

/* ── Utilities ──────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}
.container { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--container-pad); }
.container-narrow { max-width: 48rem; }
.block { display: block; }
.hidden { display: none; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.col-span-full { grid-column: 1 / -1; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mx-auto { margin-inline: auto; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.text-center { text-align: center; }
.text-sm { font-size: var(--text-sm); line-height: var(--leading-sm); }
.text-base { font-size: var(--text-base); line-height: var(--leading-base); }
.text-lg { font-size: var(--text-lg); line-height: var(--leading-lg); }
.text-xl { font-size: var(--text-xl); line-height: var(--leading-xl); }
.font-semibold { font-weight: 600; }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-600 { color: var(--color-gray-600); }
.text-reflex-blue { color: var(--color-reflex-blue); }
.text-white { color: var(--color-white); }
.bg-white { background: var(--color-white); }
.bg-gray-50 { background: var(--color-gray-50); }
.nowrap { white-space: nowrap; }

@media (min-width: 640px) {
  :root { --container-pad: 1.5rem; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:flex-row { flex-direction: row; }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:block { display: block; }
}
@media (min-width: 1024px) {
  :root { --container-pad: 2rem; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── Glyphs: single-color SVG masks that take currentColor ─ */
.glyph {
  display: inline-block; flex-shrink: 0; width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
}
.glyph-phone { --glyph: url(/img/glyphs/phone.svg); }
.glyph-mail { --glyph: url(/img/glyphs/mail.svg); }
.glyph-fax { --glyph: url(/img/glyphs/fax.svg); }
.glyph-pin { --glyph: url(/img/glyphs/pin.svg); }
.glyph-lock { --glyph: url(/img/glyphs/lock.svg); }
.glyph-external { --glyph: url(/img/glyphs/external.svg); }
.glyph-arrow-right { --glyph: url(/img/glyphs/arrow-right.svg); }
.glyph-download { --glyph: url(/img/glyphs/download.svg); }
.glyph-document { --glyph: url(/img/glyphs/document.svg); }
.glyph-menu { --glyph: url(/img/glyphs/menu.svg); }
.glyph-close { --glyph: url(/img/glyphs/close.svg); }
.glyph-chevron-down { --glyph: url(/img/glyphs/chevron-down.svg); }
.glyph-check { --glyph: url(/img/glyphs/check.svg); }
.glyph-key { --glyph: url(/img/glyphs/key.svg); }

/* ── Buttons: same shape as csweb .btn (rounded-md, shadow-sm, semibold), sized up for a public site ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600;
  color: var(--color-white); background: var(--color-brand-blue);
  border: 1px solid var(--color-brand-blue); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: background-color 150ms, border-color 150ms, color 150ms;
}
.btn:hover { background: var(--color-brand-blue-dark); border-color: var(--color-brand-blue-dark); }
.btn:focus-visible { outline: 2px solid var(--color-brand-blue); outline-offset: 2px; }
.btn .glyph { font-size: 1rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: var(--text-base); line-height: var(--leading-base); }
.btn-green { background: var(--color-brand-green); border-color: var(--color-brand-green); }
.btn-green:hover { background: var(--color-brand-green-dark); border-color: var(--color-brand-green-dark); }
.btn-gray {
  color: var(--color-gray-800); background: var(--color-white); border-color: var(--color-gray-300);
}
.btn-gray:hover { background: var(--color-gray-50); border-color: var(--color-gray-400); }
.btn-inverse {
  color: var(--color-reflex-blue); background: var(--color-white); border-color: var(--color-white);
}
.btn-inverse:hover { background: var(--color-blue-hl); border-color: var(--color-blue-hl); }
.btn-ghost-inverse {
  color: var(--color-white); background: transparent; border-color: rgb(255 255 255 / 0.6); box-shadow: none;
}
.btn-ghost-inverse:hover { background: rgb(255 255 255 / 0.1); border-color: var(--color-white); }
/* Light frosted glass: brighter and more saturated than the hero paragraph's dark glass */
.btn-glass {
  color: var(--color-white);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.06));
  border-color: rgb(255 255 255 / 0.45);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 6px 18px -8px rgb(0 0 40 / 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}
.btn-glass:hover {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.1));
  border-color: var(--color-white);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 0 0 3px rgb(0 165 181 / 0.25), 0 8px 22px -8px rgb(0 0 40 / 0.6);
}
/* White frosted glass: the same gloss, edge and shadow as .btn-glass, mostly white so it stays the primary action */
.btn-glass-white {
  color: var(--color-reflex-blue);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.68));
  border-color: rgb(255 255 255 / 0.9);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 1), inset 0 -1px 0 rgb(0 0 80 / 0.12), 0 6px 18px -8px rgb(0 0 40 / 0.55);
}
.btn-glass-white:hover {
  background: linear-gradient(180deg, rgb(255 255 255 / 1), rgb(255 255 255 / 0.82));
  border-color: var(--color-white);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 1), 0 0 0 3px rgb(0 165 181 / 0.25), 0 8px 22px -8px rgb(0 0 40 / 0.6);
}
/* On light backgrounds the glass sits on the colour it shows over the hero, so it reads as the same button */
.btn-glass-blue { background: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.06)), #2430d0; }
.btn-glass-blue:hover { background: linear-gradient(180deg, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.1)), #2430d0; }
.btn-glass-green { background: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.06)), var(--color-brand-green); }
.btn-glass-green:hover { background: linear-gradient(180deg, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.1)), var(--color-brand-green-dark); }
/* White glass on a light band needs an edge to read */
.section .btn-glass-white { border-color: rgb(0 0 80 / 0.16); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn-row-center { justify-content: center; }

.link {
  color: var(--color-brand-blue); font-weight: 600;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color 150ms;
}
.link:hover { text-decoration-color: currentColor; }
.prose a { color: var(--color-brand-blue); text-decoration: underline; text-underline-offset: 3px; }

/* ── Utility bar + header ──────────────────────────────── */
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  padding: 0.5rem 1rem; background: var(--color-reflex-blue); color: var(--color-white);
  border-radius: var(--radius-md); font-weight: 600;
}
.skip-link:focus { top: 0.5rem; }

.utility-bar { background: var(--color-reflex-blue); color: var(--color-white); font-size: var(--text-xs); }
.utility-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.25rem; }
.utility-bar a { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; }
.utility-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.utility-phone { opacity: 0.9; }
.utility-links { display: flex; align-items: center; gap: 1rem; }
.utility-reset { font-weight: 500 !important; opacity: 0.85; }
@media (max-width: 479px) { .utility-reset { display: none !important; } }
/* Same glass as the hero Contact us (.btn-glass), at utility-bar size; the green lock is the only accent */
.utility-login { gap: 0.4375rem; padding: 0.25rem 0.75rem 0.25rem 0.625rem; border-width: 1px; border-style: solid; border-radius: var(--radius-md); }
.utility-login .glyph { color: var(--color-pantone-7488); }
.utility-login:hover { text-decoration: none !important; }
.utility-login:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / 0.97);
  border-bottom: 1px solid var(--color-brand-blue);
  transition: box-shadow 200ms;
}
.site-header[data-scrolled] { box-shadow: var(--shadow-md); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); }
.site-logo img { width: 6.5rem; height: auto; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md);
  color: var(--color-reflex-blue); font-size: 1.5rem;
}
.nav-toggle:hover { background: var(--color-gray-100); }
.nav-toggle .glyph-close { display: none; }
.nav-toggle[aria-expanded="true"] .glyph-menu { display: none; }
.nav-toggle[aria-expanded="true"] .glyph-close { display: inline-block; }

.main-nav {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--color-white); border-bottom: 1px solid var(--color-gray-200); box-shadow: var(--shadow-lg);
}
.main-nav[data-open] { display: block; }
.main-nav ul { display: flex; flex-direction: column; padding: 0.5rem 1rem 1rem; }
.main-nav a {
  display: block; padding: 0.75rem 0.5rem;
  font-weight: 600; color: var(--color-gray-800); border-bottom: 1px solid var(--color-gray-100);
}
.main-nav a:hover { color: var(--color-reflex-blue); }
.main-nav a[aria-current="page"] { color: var(--color-reflex-blue); }

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .main-nav, .main-nav[data-open] { display: block; position: static; background: none; border: 0; box-shadow: none; }
  .main-nav ul { flex-direction: row; gap: 0.25rem; padding: 0; }
  .main-nav a {
    position: relative; padding: 0.5rem 0.875rem; border: 0;
    font-size: var(--text-sm); border-radius: var(--radius-md);
  }
  .main-nav a:hover { background: var(--color-gray-100); }
  .main-nav a[aria-current="page"]::after {
    content: ""; position: absolute; left: 0.875rem; right: 0.875rem; bottom: -0.875rem;
    height: 3px; background: var(--color-reflex-blue); border-radius: 3px 3px 0 0;
  }
}

/* ── Sections ──────────────────────────────────────────── */
.section { padding-block: 4rem; }
.section-sm { padding-block: 2.5rem; }
.section-gray { background: var(--color-gray-50); border-block: 1px solid var(--color-gray-100); }
.section-blue { background: var(--color-reflex-blue); color: rgb(255 255 255 / 0.85); }
.section-blue h2, .section-blue h3 { color: var(--color-white); }
/* Same dot grid as the home claims panel */
.section-dots {
  background:
    radial-gradient(circle at 1px 1px, rgb(160 210 255 / 0.18) 1px, transparent 0) 0 0 / 22px 22px,
    var(--color-reflex-blue);
}
@media (min-width: 768px) { .section { padding-block: 5.5rem; } }

.section-header { max-width: 48rem; margin: 0 auto 3rem; text-align: center; }
.section-header-left { margin-inline: 0; text-align: left; }
.eyebrow {
  display: block; margin-bottom: 0.75rem;
  font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-brand-blue);
}
.section-blue .eyebrow { color: var(--color-pantone-7488); }
.section-title {
  font-size: var(--text-3xl); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em;
  color: var(--color-reflex-blue);
}
.section-lede { margin-top: 1rem; font-size: var(--text-lg); line-height: var(--leading-lg); color: var(--color-gray-600); }
.section-blue .section-lede { color: rgb(255 255 255 / 0.8); }
@media (min-width: 768px) { .section-title { font-size: var(--text-4xl); } }

/* ── Home hero: photo with a screened box (trade dress mockup) ── */
/* Layered light: a glow where the orbits sit, shadowed corners, then the brand gradient */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* Stays in the Reflex Blue family: a cyan end read as tropical water and washed the city out */
  background:
    radial-gradient(ellipse 50% 60% at 76% 50%, rgb(60 72 220 / 0.32) 0%, transparent 70%),
    radial-gradient(ellipse 55% 70% at 100% 100%, rgb(0 0 60 / 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 0% 100%, rgb(0 0 60 / 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 0%, rgb(0 0 80 / 0.4) 0%, transparent 70%),
    linear-gradient(135deg, var(--color-reflex-blue) 0%, #0c10a6 55%, #1c24b4 100%);
}
/* City and orbits live in a box capped at 1600px and centred, so on wide screens the art stops growing and the plain
   gradient fills both sides, balancing the content column */
.hero-art {
  position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%;
  width: 100%; max-width: 100rem; transform: translateX(-50%);
  container-type: size;
}
/* Solid wedge between the city and the orbits: pointed left end (full hero height, 20cqh deep) whose tip sits on
   the solar system's centre, running past the viewport's right edge. The tip x mirrors .hero-orbits: its right offset
   plus 0.36 x art height (the SVG is 90% tall, 4:3, centre 30% in from its right). Oversized for parallax. */
.hero-wedge {
  position: absolute; z-index: 3; top: -8rem; bottom: -8rem; display: none; pointer-events: none;
  left: calc(100% + 9.25rem - 36cqh); right: calc((100% - 100vw) / 2 - 9rem);
  /* Edge x where the slant meets the oversized box: 20cqh deep plus the same slope through the 8rem overhang
     (20cqh x 16rem / 100cqh), pre-expanded because Firefox rejects length / length in calc */
  --edge: calc(20cqh + 3.2rem);
  /* Glass Contact us blue at the tip, easing to Reflex Blue by the viewport edge (the last 9rem is overhang) */
  background: linear-gradient(90deg, #2430d0 0%, var(--color-reflex-blue) calc(100% - 9rem));
  clip-path: polygon(0 50%, var(--edge) 0, 100% 0, 100% 100%, var(--edge) 100%);
}
/* Pinstripe: a chevron band along both slanted edges, from 6px outside the edge in to the edge (1px of overlap hides
   any seam; the wedge paints over it). Its box starts 8px left of the wedge, so the wedge tip is at x = 8px here. */
.hero-wedge-stripe {
  position: absolute; z-index: 3; top: -8rem; bottom: -8rem; display: none; pointer-events: none;
  --edge: calc(20cqh + 3.2rem);
  left: calc(100% + 9.25rem - 36cqh - 8px); right: calc((100% - 100vw) / 2 - 9rem);
  background: #3ee6f5;
  clip-path: polygon(2px 50%, calc(var(--edge) + 2px) 0, calc(var(--edge) + 9px) 0, 9px 50%,
    calc(var(--edge) + 9px) 100%, calc(var(--edge) + 2px) 100%);
}
@media (min-width: 640px) { .hero-wedge, .hero-wedge-stripe { display: block; } }
@media (min-width: 1024px) {
  .hero-wedge { left: calc(100% - 0.75rem - 36cqh); }
  .hero-wedge-stripe { left: calc(100% - 0.75rem - 36cqh - 8px); }
}
/* Orbits pass under the wedge (z 3), so the system looks like it spins beneath the panel */
.hero-orbit-layer { position: absolute; z-index: 2; inset: 0; }
/* Isometric "cyber city" under the orbits: translucent, sitting in the hero gradient, fading out at both sides.
   Oversized so parallax never shows its edge. */
.hero-city {
  position: absolute; z-index: 0; left: -6%; top: -8%; width: 112%; height: 116%;
  pointer-events: none; opacity: 0.6;
  /* Fades in from the "o" of "Your" to fully opaque at the "n" of "clients" (between the hero buttons). Canvas and
     container share a centre, so the headline's left edge is 50% minus half the container plus its padding */
  --hero-o: 2rem;
  --hero-n: 9.5rem;
  --headline-left: calc(50% - min(100vw, 72rem) / 2 + var(--container-pad));
  --city-fade: linear-gradient(to right, transparent calc(var(--headline-left) + var(--hero-o)),
    #000 calc(var(--headline-left) + var(--hero-n)), #000 82%, transparent 98%);
  -webkit-mask-image: var(--city-fade);
  mask-image: var(--city-fade);
}
.hero[data-grab-hover] { cursor: grab; }
.hero[data-grabbing] { cursor: grabbing; user-select: none; }
.hero[data-grabbing] .hero-content { pointer-events: none; }
/* Concentric ovals echo the EHO logo mark, with planets orbiting them (CSS motion paths, no JS).
   Phones skip them because they would sit behind the copy. */
.hero-orbits {
  position: absolute; z-index: 1; top: 50%; right: -9.25rem; display: none;
  height: 90%; width: auto; max-width: none; transform: translateY(-50%);
}
@media (min-width: 640px) { .hero-orbits { display: block; } }
/* Three-quarter-size system, kept centred where the full-size one sat */
@media (min-width: 1024px) { .hero-orbits { right: 0.75rem; } }
/* Outer rings run past the SVG box rather than being cut at its edge */
.hero-orbits { overflow: visible; }
.orbit-glow { fill: url(#orbit-core-glow); }
/* Opaque, crisp rings. Depth comes from brightness, not transparency: each ring shades from a deep tone at the back
   (top) to full brightness at the front. A thin navy halo keeps them sharp over both the wedge and the city. */
.orbit-rings ellipse { stroke: url(#ring-depth); stroke-width: 1.5; }
.orbit-rings { filter: drop-shadow(0 0 1px rgb(0 0 70 / 0.95)) drop-shadow(0 0 2px rgb(0 0 70 / 0.6)); }
.orbit-rings .orbit-ring-green { stroke: url(#ring-depth-green); stroke-width: 2; }
.orbit-rings .orbit-ring-teal { stroke: url(#ring-depth-teal); stroke-width: 2; }

/* Each path traces its ring (centre 560,300) as two arcs from the right-hand end, clockwise on screen:
   25% is the front (bottom), 75% the back (top), so planets swell and brighten at the front */
.planet {
  --r: 4px; r: var(--r);
  transform-box: view-box; offset-rotate: 0deg;
  animation: orbit linear infinite;
}
.planet-1 { --r: 5px; fill: var(--color-pantone-7488); animation-duration: 28s;
  offset-path: path("M700 300A140 70 0 1 1 420 300A140 70 0 1 1 700 300"); }
.planet-2 { --r: 5px; fill: var(--color-pantone-7710); animation-duration: 16s; animation-direction: reverse;
  offset-path: path("M640 300A80 40 0 1 1 480 300A80 40 0 1 1 640 300"); }
.planet-3 { --r: 4px; fill: var(--color-white); animation-duration: 40s; animation-delay: -12s;
  offset-path: path("M760 300A200 100 0 1 1 360 300A200 100 0 1 1 760 300"); }
.planet-4 { --r: 4px; fill: var(--color-white); animation-duration: 52s; animation-delay: -30s; animation-direction: reverse;
  offset-path: path("M820 300A260 130 0 1 1 300 300A260 130 0 1 1 820 300"); }
.planet-5 { --r: 3px; fill: var(--color-white); animation-duration: 66s; animation-delay: -8s;
  offset-path: path("M880 300A320 160 0 1 1 240 300A320 160 0 1 1 880 300"); }
.planet-6 { --r: 3px; fill: var(--color-white); animation-duration: 80s; animation-delay: -50s; animation-direction: reverse;
  offset-path: path("M940 300A380 190 0 1 1 180 300A380 190 0 1 1 940 300"); }
@keyframes orbit {
  /* Front (25%) swells and brightens, back (75%) shrinks and darkens; opaque throughout */
  0% { offset-distance: 0%; r: var(--r); filter: brightness(0.9) drop-shadow(0 0 3px currentColor); }
  25% { r: calc(var(--r) * 1.6); filter: brightness(1.15) drop-shadow(0 0 6px currentColor); }
  50% { r: var(--r); filter: brightness(0.9) drop-shadow(0 0 3px currentColor); }
  75% { r: calc(var(--r) * 0.55); filter: brightness(0.45) drop-shadow(0 0 0 currentColor); }
  100% { offset-distance: 100%; r: var(--r); filter: brightness(0.9) drop-shadow(0 0 3px currentColor); }
}
.hero .container { padding-block: 4.5rem 5rem; }
.hero-content { max-width: 40rem; color: rgb(255 255 255 / 0.9); }
.hero .eyebrow {
  /* Very faint dark glass behind the eyebrow; negative margin keeps the text on the headline's edge */
  display: inline-block; margin-inline: -0.625rem; padding: 0.3125rem 0.625rem;
  color: var(--color-pantone-7488);
  background: rgb(0 0 60 / 0.18); border: 1px solid rgb(255 255 255 / 0.06); border-radius: var(--radius-md);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero h1 {
  font-size: var(--text-4xl); line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; color: var(--color-white);
  /* White melting into the highlight cyan top to bottom, painted through the glyphs; drop-shadow because text-shadow
     would cover a text-clipped background */
  background: linear-gradient(180deg, var(--color-white) 15%, var(--color-cyan-hl) 78%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgb(0 0 50 / 0.35));
}
.hero h1 em { font-style: normal; }
/* Dark frosted glass so the paragraph reads over the city; negative margins keep the text on the headline's edge */
.hero-sub {
  margin: 1.25rem -1rem 0; padding: 0.875rem 1rem;
  font-size: var(--text-lg); line-height: var(--leading-lg);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(0 0 80 / 0.22));
  border: 1px solid rgb(255 255 255 / 0.12); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 8px 24px -12px rgb(0 0 40 / 0.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
@media (max-width: 639px) { .hero-sub { margin-inline: -0.5rem; padding-inline: 0.75rem; } }
.hero .btn-row { margin-top: 2rem; }
@media (min-width: 768px) {
  .hero .container { padding-block: 6.5rem 7rem; }
  .hero h1 { font-size: 3.5rem; }
  .hero-city { --hero-o: 3rem; --hero-n: 14.75rem; }
}

/* ── Inner page intro ─────────────────────────────────── */
.page-intro {
  background: linear-gradient(135deg, var(--color-reflex-blue) 0%, #0a1fa8 60%, var(--color-brand-blue) 100%);
  color: rgb(255 255 255 / 0.88);
}
.page-intro .container { padding-block: 3.5rem 4rem; }
.page-intro .eyebrow { color: var(--color-pantone-7488); }
.page-intro h1 {
  max-width: 48rem; font-size: var(--text-3xl); line-height: 1.1; font-weight: 700; letter-spacing: -0.025em;
  color: var(--color-white);
}
.page-intro p { max-width: 42rem; margin-top: 1rem; font-size: var(--text-lg); line-height: var(--leading-lg); }
.page-intro .btn-row { margin-top: 1.75rem; }
.page-intro-green { background: linear-gradient(135deg, #00604a 0%, var(--color-brand-green) 60%, var(--color-pantone-7710) 100%); }
.page-intro-green .eyebrow { color: var(--color-green-hl); }
/* White line illustration on the right of the intro; only where it clears the 48rem headline column */
.page-intro .container { position: relative; }
.page-intro-art {
  position: absolute; top: 50%; right: var(--container-pad); display: none; height: 76%; max-height: 18rem; width: auto;
  transform: translateY(-50%); pointer-events: none;
  stroke: rgb(255 255 255 / 0.75); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.page-intro-art * { vector-effect: non-scaling-stroke; }
.page-intro-art .art-faint { stroke: rgb(255 255 255 / 0.35); }
.page-intro-art .art-dot { fill: rgb(255 255 255 / 0.85); stroke: none; }
.page-intro-art .art-flow { stroke: rgb(255 255 255 / 0.55); stroke-dasharray: 3 7; animation: art-flow 1.4s linear infinite; }
@keyframes art-flow { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) { .page-intro-art .art-flow { animation: none; } }
@media (min-width: 1200px) { .page-intro-art { display: block; } }
@media (min-width: 768px) {
  .page-intro .container { padding-block: 4.5rem 5rem; }
  .page-intro h1 { font-size: var(--text-5xl); }
}

/* ── Stat strip ───────────────────────────────────────── */
.stat-strip { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Dividers sit between items only: none on phones, between columns once the strip is one row */
.stat { padding-left: 0; }
/* Each stat spans two strip rows via subgrid, so captions share a top line and values share a baseline row */
.stat { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0.125rem; }
.stat dt { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-gray-600); }
.stat dd { align-self: end; font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: 700; color: var(--color-reflex-blue); }
@media (min-width: 1024px) {
  .stat-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .stat { padding-inline: 1.25rem; }
  .stat:first-child { padding-left: 0; }
  .stat + .stat { border-left: 1px solid var(--color-gray-300); }
}

/* ── Cards ────────────────────────────────────────────── */
.card {
  background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 1.5rem;
}
.card h3 { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 700; color: var(--color-reflex-blue); }
.card p { margin-top: 0.5rem; font-size: var(--text-sm); line-height: 1.6; color: var(--color-gray-600); }
.card-icon {
  width: 4.5rem; height: 4.5rem; margin-bottom: 1.25rem; padding: 0.125rem;
  background: var(--color-blue-hl); border-radius: var(--radius-lg);
}
address { font-style: normal; }
.card-icon-tile {
  display: flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; flex-shrink: 0;
  background: var(--color-blue-hl); border-radius: var(--radius-lg);
}
.card-icon-tile img { width: 3.5rem; height: 3.5rem; }
.card-accent { border-top: 3px solid var(--color-eho-gray); }

a.card-link { display: flex; flex-direction: column; transition: border-color 150ms, box-shadow 150ms, transform 150ms; }
a.card-link:hover { border-color: var(--color-brand-blue); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card-link-cta {
  display: inline-flex; align-items: center; gap: 0.375rem; margin-top: auto; padding-top: 1rem;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-brand-blue);
}
.card-link-green:hover { border-color: var(--color-brand-green); }
.card-link-green .card-link-cta { color: var(--color-brand-green); }

/* Feature rows (icon + text) */
.feature { display: flex; gap: 1.25rem; align-items: flex-start; }
.feature img { width: 3.5rem; height: 3.5rem; flex-shrink: 0; }
.feature h3 { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 700; color: var(--color-reflex-blue); }
.feature p { margin-top: 0.375rem; color: var(--color-gray-600); }

/* Audience: trade-dress circle icons */
.audience { text-align: center; }
.audience img { width: 6.875rem; height: 6.875rem; margin: 0 auto 1.25rem; }
.audience h3 { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: 700; }
.audience p { margin-top: 0.75rem; font-size: var(--text-sm); line-height: 1.7; text-align: left; }
.section-blue .audience p { color: rgb(255 255 255 / 0.82); }

/* Platform stack */
.stack-card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.stack-card-header .eyebrow { margin-bottom: 0.125rem; color: var(--color-gray-500); }
.stack-card-header h3 { font-size: var(--text-xl); line-height: 1.25; }
.stack-card p { margin-top: 0; font-size: var(--text-base); line-height: 1.65; }
.stack-card-featured {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-blue-hl) 100%);
  border-color: #c7dff0; padding: 2rem;
}
.stack-card-featured .eyebrow { color: var(--color-brand-blue); }
.stack-card-featured h3 { font-size: var(--text-2xl); }
.stack-card-featured .card-icon-tile, .stack-card-featured .card-icon-tile img { width: 4.25rem; height: 4.25rem; }
.stack-note {
  max-width: 46rem; margin: 0.5rem auto 1rem; text-align: center; text-wrap: balance;
  font-size: var(--text-sm); line-height: 1.7; color: var(--color-gray-500);
}

/* Steps */
.steps { display: grid; gap: 1rem; counter-reset: step; }
.step { display: flex; gap: 1.25rem; align-items: flex-start; }
.step-num {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full);
  background: var(--color-brand-green); color: var(--color-white); font-weight: 700;
}
.step h3 { color: var(--color-gray-900); }
.step .btn { margin-top: 1rem; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }

/* Document lists */
.doc-list { display: grid; gap: 0.5rem; }
.doc-list a {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.875rem 1rem; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md);
  background: var(--color-white); font-weight: 600; color: var(--color-gray-800);
  transition: border-color 150ms, background-color 150ms, color 150ms;
}
.doc-list a:hover { border-color: var(--color-brand-blue); color: var(--color-brand-blue); background: var(--color-blue-hl); }
.doc-list .glyph { font-size: 1.125rem; color: var(--color-brand-blue); }
.doc-list .doc-meta { margin-left: auto; font-size: var(--text-xs); font-weight: 600; color: var(--color-gray-400); }
@media (min-width: 768px) { .doc-list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Disclosure (native <details>) */
.disclosure {
  margin-top: 2rem; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); background: var(--color-white);
}
.disclosure summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; font-weight: 700; color: var(--color-reflex-blue); list-style: none;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary .glyph { font-size: 1.25rem; transition: transform 200ms; }
.disclosure[open] summary .glyph { transform: rotate(180deg); }
.disclosure-sub { margin-left: 0.5rem; font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-500); }
.disclosure-body { padding: 0 1.25rem 1.25rem; }

/* Callouts */
.callout {
  padding: 1rem 1.25rem; border-radius: var(--radius-lg);
  background: var(--color-cyan-hl); color: var(--color-gray-800); font-size: var(--text-sm); line-height: 1.6;
}
.callout-green { background: var(--color-green-hl); }
.callout a { font-weight: 700; color: var(--color-reflex-blue); text-decoration: underline; text-underline-offset: 3px; }
.page-intro .callout { margin-top: 2rem; max-width: 42rem; background: rgb(255 255 255 / 0.12); color: var(--color-white); }
.page-intro .callout a { color: var(--color-white); }

/* Pull quote */
.pull-quote { text-align: center; }
.pull-quote p {
  font-size: var(--text-3xl); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--color-white);
}
.pull-quote cite { display: block; margin-top: 1rem; font-style: normal; color: var(--color-pantone-7488); font-weight: 600; }
@media (min-width: 768px) { .pull-quote p { font-size: var(--text-4xl); } }

/* Long-form story */
.story p { margin-top: 1.25rem; font-size: var(--text-lg); line-height: 1.75; }
.story p:first-child { margin-top: 0; }
.story .story-lead {
  margin-top: 2.5rem; padding-left: 1rem; border-left: 4px solid var(--color-pantone-7488);
  font-size: var(--text-xl); line-height: 1.6; font-weight: 600; color: var(--color-reflex-blue);
}
.story .story-lead:first-child { margin-top: 0; }

/* Long-form legal text (ported verbatim from the old site) */
.prose { font-size: var(--text-base); line-height: 1.75; color: var(--color-gray-700); }
.prose > * + * { margin-top: 1rem; }
.prose h2 {
  margin-top: 2.5rem; font-size: var(--text-xl); line-height: 1.3; font-weight: 700; color: var(--color-reflex-blue);
}
.prose > h2:first-child { margin-top: 0; }
.prose .lede { font-size: var(--text-lg); font-weight: 600; color: var(--color-gray-900); }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li, .prose li > ul { margin-top: 0.5rem; }
.prose strong { color: var(--color-gray-900); }
.prose figure img { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); }

/* Contact */
.contact-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-card { position: relative; padding-left: 5rem; }
.contact-card .contact-icon { position: absolute; left: 1.5rem; top: 1.5rem; }
a[href^="tel:"]:not(.card) { white-space: nowrap; }
.contact-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full);
  background: var(--color-reflex-blue); color: var(--color-white); font-size: 1.25rem;
}
.contact-card dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gray-500); }
.contact-card dd { margin-top: 0.25rem; font-size: var(--text-lg); font-weight: 600; color: var(--color-gray-900); }
.contact-card dd a { color: var(--color-reflex-blue); }
.contact-card dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-card .detail { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--color-gray-500); }
.contact-card-primary { border-color: var(--color-brand-blue); background: var(--color-blue-hl); }

/* Compliance tiles */
.tile h3 { display: flex; align-items: center; gap: 0.625rem; }
.tile h3 img { width: 1.75rem; height: 1.75rem; }
.tile-lead { border-color: #c7dff0; background: var(--color-blue-hl); }
@media (min-width: 1024px) { .tile-lead { grid-column: span 2; } }

/* CTA band */
.cta { background: var(--color-blue-hl); border-top: 1px solid #c7dff0; text-align: center; }
.cta .section-title { font-size: var(--text-3xl); }
.cta .btn-row { margin-top: 2rem; }

/* ── Footer ───────────────────────────────────────────── */
.site-footer { background: var(--color-eho-charcoal); color: rgb(255 255 255 / 0.78); font-size: var(--text-sm); }
.site-footer .container { padding-block: 3.5rem 2rem; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1.5fr; } }
.footer-logo img { width: 5.5rem; }
.footer-tagline { margin-top: 1rem; max-width: 22rem; line-height: 1.6; }
.footer-tagline strong { display: block; margin-top: 0.75rem; color: var(--color-white); font-weight: 600; }
.footer-heading {
  margin-bottom: 1rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-white);
}
.footer-links { display: grid; gap: 0.5rem; }
.site-footer a:hover { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; }
.footer-contact { display: grid; gap: 0.625rem; }
.footer-contact div { display: flex; gap: 0.625rem; align-items: flex-start; }
.footer-contact dt { padding-top: 0.2rem; color: var(--color-pantone-7488); }
.footer-bottom {
  display: flex; flex-direction: column; gap: 0.75rem; margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.15); font-size: var(--text-xs);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }

/* ── Print ────────────────────────────────────────────── */
@media print {
  .utility-bar, .nav-toggle, .main-nav, .skip-link, .cta .btn-row { display: none !important; }
  .site-header { position: static; border: 0; }
  .hero, .page-intro, .section-blue { background: none !important; color: #000; }
  .hero::before { display: none; }
  .hero h1, .page-intro h1, .section-blue h2, .section-blue h3, .pull-quote p { color: #000; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; font-weight: 400; }
}