/* IOT Pay Africa design system: tokens, foundations and components */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;

  --color-navy-950: #031126;
  --color-navy-900: #071b3a;
  --color-navy-800: #0b274f;
  --color-green-700: #2f7f32;
  --color-green-600: #3f963f;
  --color-green-500: #43a047;
  --color-green-100: #e5f2e4;
  --color-gold-500: #f5b335;
  --color-orange-600: #e76f00;
  --color-sand-100: #f8f5ef;
  --color-sand-200: #efe9df;
  --color-white: #ffffff;
  --color-charcoal: #1e1e1e;
  --color-ink: #101828;
  --color-muted: #667085;
  --color-border: #d8ddd7;
  --color-dark-border: rgba(255, 255, 255, 0.14);
  --color-dark-muted: rgba(255, 255, 255, 0.72);
  --color-glass: rgba(255, 255, 255, 0.09);
  --color-shadow: rgba(3, 17, 38, 0.14);
  --color-shadow-strong: rgba(3, 17, 38, 0.24);
  --color-focus: rgba(67, 160, 71, 0.32);
  --color-error-bg: #fff0e5;
  --color-hero-header-bg: rgba(3, 17, 38, 0.3);
  --color-hero-card: rgba(3, 17, 38, 0.86);
  --color-on-accent: rgba(255, 255, 255, 0.84);
  --color-hero-overlay-start: rgba(3, 17, 38, 0.98);
  --color-hero-overlay-mid: rgba(3, 17, 38, 0.82);
  --color-hero-overlay-end: rgba(3, 17, 38, 0.08);
  --color-image-caption: rgba(3, 17, 38, 0.9);
  --color-pattern-green: rgba(67, 160, 71, 0.12);

  --font-sans: Manrope, Inter, "Segoe UI", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 650;
  --font-weight-bold: 750;
  --font-size-xs: 0.75rem;
  --font-size-meta: clamp(0.42rem, 2.1vw, 0.75rem);
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: clamp(1.05rem, 1.2vw, 1.125rem);
  --font-size-lg: clamp(1.2rem, 1.8vw, 1.35rem);
  --font-size-xl: clamp(1.65rem, 2.4vw, 2.2rem);
  --font-size-2xl: clamp(2.15rem, 4vw, 4rem);
  --font-size-hero: clamp(2.45rem, 4.4vw, 4.25rem);
  --line-height-tight: 0.98;
  --line-height-heading: 1.08;
  --line-height-body: 1.65;
  --line-height-copy: 1.6;
  --letter-spacing-tight: -0.045em;
  --letter-spacing-label: 0.13em;
  --letter-spacing-meta: clamp(0.04em, 0.1vw, var(--letter-spacing-label));

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-section: clamp(4.5rem, 8vw, 7rem);
  --space-gutter: clamp(1.25rem, 4vw, 3rem);
  --space-layout-gap: clamp(var(--space-10), 6vw, var(--space-20));
  --space-meta-gap: clamp(var(--space-2), 3vw, var(--space-8));
  --space-meta-bleed: calc(var(--space-gutter) * 0.75);

  --size-container: 80rem;
  --size-copy: 40rem;
  --size-heading-wide: 52rem;
  --measure-heading: 18ch;
  --measure-hero-title: 15ch;
  --size-header: 5rem;
  --size-icon: 3.5rem;
  --size-line: 2rem;
  --size-dot: 0.55rem;
  --size-control: 3.5rem;
  --size-cycle-text-block: 2.55rem;
  --size-hero-content: 30rem;
  --size-hero-min: 38rem;
  --size-hero-max: 46rem;
  --size-back-to-top: var(--size-control);
  --size-letter-perspective: 20rem;
  --size-capability-title-block: 2.35em;
  --size-capability-message-block: 2.6em;
  --size-iot-detail-media: 18rem;
  --size-iot-mobile-detail: 10rem;
  --size-iot-mobile-media: 7.5rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.4rem;
  --radius-xl: 2rem;
  --radius-round: 999rem;
  --border-thin: 0.0625rem;
  --border-strong: 0.125rem;
  --shadow-card: 0 1.5rem 4rem var(--color-shadow);
  --shadow-float: 0 0.75rem 2rem var(--color-shadow-strong);
  --shadow-pill: 0 var(--space-1) var(--space-4) var(--color-shadow);
  --transition-fast: 160ms ease;
  --transition-base: 280ms ease;
  --transition-letter: 460ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-reduced: 0.01ms;
  --delay-letter: 28ms;
  --rotation-letter-start: -90deg;
  --z-header: 20;
  --z-floating: 30;
  --z-content: 2;
  --z-skip: 100;
}

*, *::before, *::after { box-sizing: border-box; }
.sr-only { position: absolute; width: var(--border-thin); height: var(--border-thin); padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--size-header); }
body { margin: 0; background: var(--color-white); color: var(--color-ink); font-family: var(--font-sans); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-body); text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd { margin-top: 0; }
h1, h2, h3 { color: var(--color-navy-900); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-heading); }
h1 { font-size: var(--font-size-hero); line-height: var(--line-height-tight); }
h2 { margin-bottom: var(--space-5); font-size: var(--font-size-2xl); }
h3 { margin-bottom: var(--space-4); font-size: var(--font-size-xl); }
p { margin-bottom: var(--space-5); }
::selection { background: var(--color-green-500); color: var(--color-white); }
:focus-visible { outline: var(--border-strong) solid var(--color-green-500); outline-offset: var(--space-1); }

.skip-link { position: fixed; top: var(--space-4); left: var(--space-4); z-index: var(--z-skip); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-navy-900); transform: translateY(-200%); transition: transform var(--transition-fast); }
.skip-link:focus { transform: translateY(0); }
.container { width: min(calc(100% - (var(--space-gutter) * 2)), var(--size-container)); margin-inline: auto; }
.section { padding-block: var(--space-section); }
.section-sand { background: var(--color-sand-100); }
.section-dark, .tad-section, .contact, .site-footer { background: var(--color-navy-900); color: var(--color-white); }
.section-dark h1, .section-dark h2, .section-dark h3, .tad-section h2, .tad-section h3, .contact h2 { color: var(--color-white); }
.text-accent-green { color: var(--color-green-500); }
.text-accent-gold { color: var(--color-gold-500); }
.text-accent-orange { color: var(--color-orange-600); }

.site-header { position: absolute; top: 0; right: 0; left: 0; z-index: var(--z-header); min-height: var(--size-header); border-bottom: var(--border-thin) solid var(--color-dark-border); background: var(--color-hero-header-bg); backdrop-filter: blur(var(--space-2)); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-white); font-weight: var(--font-weight-semibold); }
.brand img { width: var(--space-10); height: var(--space-10); object-fit: contain; }
.brand strong { color: var(--color-green-500); }
.site-nav a:not(.button) { color: var(--color-white); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.site-nav a:not(.button)::after { display: block; width: 100%; height: var(--border-strong); background: var(--color-green-500); content: ""; transform: scaleX(0); transform-origin: right; transition: transform var(--transition-fast); }
.site-nav a:not(.button):hover::after { transform: scaleX(1); transform-origin: left; }

.button { display: inline-flex; min-height: var(--size-control); align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-3) var(--space-6); border: var(--border-thin) solid var(--color-green-500); border-radius: var(--radius-round); background: var(--color-green-500); color: var(--color-white); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); line-height: 1; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.button:hover { border-color: var(--color-green-700); background: var(--color-green-700); transform: translateY(calc(var(--border-thin) * -2)); }
.button-small { min-height: calc(var(--size-control) - var(--space-3)); padding-inline: var(--space-5); }
.button-ghost { border-color: var(--color-dark-border); background: transparent; }
.button-ghost:hover { border-color: var(--color-white); background: var(--color-white); color: var(--color-navy-900); }
.button-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: auto; color: var(--color-green-700); font-weight: var(--font-weight-bold); }
.text-link span { transition: transform var(--transition-fast); }
.text-link:hover span { transform: translateX(var(--space-1)); }
.hero-secondary-link { justify-content: center; margin-top: 0; color: var(--color-white); font-size: var(--font-size-sm); }

.eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); color: var(--color-green-700); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-label); line-height: 1; text-transform: uppercase; }
.eyebrow > span { display: none; }
.eyebrow-light { color: var(--color-green-500); }
.section-heading > p, .heading-row > p { max-width: var(--size-copy); color: var(--color-muted); }
.heading-row > p { font-size: var(--font-size-md); line-height: var(--line-height-copy); }
.prose { max-width: var(--size-copy); }
.prose .lead { color: var(--color-navy-900); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: 1.5; }
.principle { margin-top: var(--space-8); padding: var(--space-6); border-left: var(--space-1) solid var(--color-green-500); background: var(--color-sand-100); color: var(--color-navy-900); font-weight: var(--font-weight-semibold); }
.principle span { display: block; margin-bottom: var(--space-2); color: var(--color-green-700); font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; }

.hero { position: relative; min-height: clamp(var(--size-hero-min), 82svh, var(--size-hero-max)); overflow: hidden; padding: calc(var(--size-header) + var(--space-12)) 0 var(--space-12); background-color: var(--color-navy-900); background-image: linear-gradient(90deg, var(--color-hero-overlay-start) 0%, var(--color-hero-overlay-mid) 43%, var(--color-hero-overlay-end) 72%), url("../images/hero-edge-technology.jpg"); background-position: center; background-size: cover; }
.hero-copy, .section-heading, .prose, .tad-intro, .tad-visual, .tad-possibilities, .why-copy, .contact-copy, .contact-form { min-width: 0; }
.hero-copy .button-group { align-items: center; }
.hero h1 { max-width: var(--measure-hero-title); margin-bottom: var(--space-6); }
.hero h1 em { font-style: normal; }
.hero-cycle-feature { min-height: var(--size-cycle-text-block); margin-top: var(--space-8); }
.hero-cycle { display: inline-block; color: var(--color-green-500); transition: color var(--transition-base), opacity var(--transition-fast), transform var(--transition-fast); }
.hero-cycle[data-accent="gold"] { color: var(--color-gold-500); }
.hero-cycle[data-accent="orange"] { color: var(--color-orange-600); }
.hero-cycle.is-changing { opacity: 0; transform: translateY(var(--space-2)); }
[data-hero-cycle-text] { display: inline-flex; white-space: pre; perspective: var(--size-letter-perspective); }
.hero-cycle-letter { display: inline-block; opacity: 0; transform-origin: center bottom; animation: hero-letter-enter var(--transition-letter) both; animation-delay: calc(var(--letter-index) * var(--delay-letter)); }
.hero-cycle-line { min-height: var(--size-cycle-text-block); margin: 0; color: var(--color-dark-muted); font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: var(--font-weight-semibold); line-height: 1.35; }

@keyframes hero-letter-enter {
  from { opacity: 0; transform: translateY(var(--space-3)) rotateX(var(--rotation-letter-start)); }
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}
.hero-lead { max-width: 34rem; margin-bottom: var(--space-8); color: var(--color-dark-muted); font-size: var(--font-size-md); }
.hero-lead, .tad-intro > p, .contact-copy > p { overflow-wrap: anywhere; }
.company-meta { padding-bottom: var(--space-8); margin-bottom: var(--space-16); border-bottom: var(--border-thin) solid var(--color-border); }
.company-meta p { flex: 0 1 auto; margin: 0; color: var(--color-muted); font-size: var(--font-size-meta); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-meta); line-height: var(--line-height-heading); text-align: center; text-transform: uppercase; white-space: nowrap; }
.company-meta p:first-child { text-align: left; }
.company-meta p:last-child { text-align: right; }
.intro { padding-top: var(--space-8); }

.back-to-top { position: fixed; right: var(--space-gutter); bottom: var(--space-6); z-index: var(--z-floating); display: grid; width: var(--size-back-to-top); height: var(--size-back-to-top); place-items: center; border: var(--border-thin) solid var(--color-green-500); border-radius: var(--radius-round); background: var(--color-navy-900); box-shadow: var(--shadow-float); color: var(--color-white); opacity: 0; pointer-events: none; transform: translateY(var(--space-4)) scale(0.92); visibility: hidden; transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base), background var(--transition-fast); }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); visibility: visible; }
.back-to-top:hover { background: var(--color-green-700); }
.back-to-top svg { width: var(--space-6); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: var(--border-strong); }

.pillar-card { position: relative; display: flex; min-height: 25rem; flex-direction: column; overflow: hidden; padding: var(--space-10); border-radius: var(--radius-lg); }
.pillar-card-light { border: var(--border-thin) solid var(--color-border); background: var(--color-white); }
.pillar-card-dark { background: var(--color-navy-900); color: var(--color-white); }
.pillar-card h3 { min-height: var(--size-capability-title-block); }
.pillar-card-dark h3 { color: var(--color-white); }
.pillar-card-dark .text-link, .pillar-card-dark .card-kicker { color: var(--color-green-500); }
.card-kicker { margin-bottom: var(--space-4); color: var(--color-green-700); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; }
.pillar-card > p:not(.card-kicker) { max-width: 34rem; color: var(--color-muted); }
.pillar-card-dark > p:not(.card-kicker) { color: var(--color-dark-muted); }
.pillar-card > p.capability-message { min-height: var(--size-capability-message-block); max-width: 30rem; margin-bottom: var(--space-4); color: var(--color-green-700); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); }
.pillar-card-dark > p.capability-message { color: var(--color-green-500); }
.outcome-list { margin: var(--space-12) 0 0; padding: 0; list-style: none; }
.outcome-list li { display: flex; min-height: var(--size-control); align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-round); background: var(--color-white); color: var(--color-navy-900); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); box-shadow: var(--shadow-pill); }
.outcome-list li::before { width: var(--size-dot); height: var(--size-dot); border-radius: 50%; background: var(--color-green-500); content: ""; }
.outcome-list li:nth-child(3n + 2)::before { background: var(--color-gold-500); }
.outcome-list li:nth-child(3n)::before { background: var(--color-orange-600); }

.iot-explorer { padding: var(--space-8); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-sand-100); }
.iot-tree { min-width: 0; }
.tree-root { position: relative; z-index: var(--z-content); display: flex; width: fit-content; align-items: center; gap: var(--space-4); margin: 0 auto var(--space-8); padding: var(--space-3) var(--space-5); border-radius: var(--radius-round); background: var(--color-navy-900); box-shadow: var(--shadow-float); color: var(--color-white); }
.tree-root-icon { display: grid; width: var(--space-10); height: var(--space-10); place-items: center; border-radius: 50%; background: var(--color-green-500); }
.tree-root-icon svg { width: var(--space-6); fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: var(--border-strong); }
.tree-root small, .tree-root strong { display: block; line-height: 1.25; }
.tree-root small { color: var(--color-green-500); font-size: var(--font-size-xs); text-transform: uppercase; }
.tree-root strong { font-size: var(--font-size-sm); }
.tree-branches { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-3); }
.tree-branches::before { position: absolute; top: 0; bottom: 0; left: 50%; width: var(--border-strong); background: linear-gradient(var(--color-green-500), var(--color-gold-500), var(--color-orange-600)); content: ""; transform: translateX(-50%); }
.tree-node { position: relative; display: flex; width: calc(50% - var(--space-6)); min-height: 6.5rem; align-items: center; gap: var(--space-4); padding: var(--space-4); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-navy-900); text-align: left; transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base); }
.tree-node:nth-child(even) { align-self: flex-end; }
.tree-node::before { position: absolute; top: 50%; width: var(--space-6); height: var(--border-strong); background: var(--color-border); content: ""; transition: background var(--transition-base); }
.tree-node:nth-child(odd)::before { left: 100%; }
.tree-node:nth-child(even)::before { right: 100%; }
.tree-node::after { position: absolute; top: 50%; width: var(--space-3); height: var(--space-3); border: var(--border-strong) solid var(--color-white); border-radius: 50%; background: var(--color-border); box-shadow: 0 0 0 var(--border-thin) var(--color-border); content: ""; transform: translateY(-50%); transition: background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); }
.tree-node:nth-child(odd)::after { left: calc(100% + var(--space-6) - (var(--space-3) / 2)); }
.tree-node:nth-child(even)::after { right: calc(100% + var(--space-6) - (var(--space-3) / 2)); }
.tree-node:hover { border-color: var(--color-green-500); box-shadow: var(--shadow-card); transform: translateY(calc(var(--space-1) * -1)); }
.tree-node.is-active { border-color: var(--color-green-500); background: var(--color-navy-900); box-shadow: var(--shadow-float); color: var(--color-white); }
.tree-node.is-active::before, .tree-node.is-active::after { background: var(--color-green-500); }
.tree-node.is-active::after { box-shadow: 0 0 0 var(--space-2) var(--color-focus); transform: translateY(-50%) scale(1.15); }
.tree-node-index { display: grid; width: var(--space-10); height: var(--space-10); flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--color-green-100); color: var(--color-green-700); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.tree-node.is-active .tree-node-index { background: var(--color-green-500); color: var(--color-white); }
.tree-node-copy strong, .tree-node-copy small { display: block; }
.tree-node-copy strong { margin-bottom: var(--space-1); font-size: var(--font-size-sm); }
.tree-node-copy small { color: var(--color-muted); font-size: var(--font-size-xs); }
.tree-node.is-active .tree-node-copy small { color: var(--color-dark-muted); }
.industry-detail { position: relative; display: grid; overflow: hidden; align-self: stretch; grid-template-rows: minmax(var(--size-iot-detail-media), 1fr) auto; border-radius: var(--radius-lg); background: var(--color-navy-900); box-shadow: var(--shadow-card); color: var(--color-white); }
.industry-detail.is-changing .industry-detail-copy { opacity: 0; transform: translateY(var(--space-2)); }
.industry-detail-media { position: relative; height: 100%; min-height: var(--size-iot-detail-media); overflow: hidden; }
.industry-detail-media::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--color-navy-900)); content: ""; }
.industry-detail-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity var(--transition-fast); }
.industry-detail.is-changing .industry-detail-media img { opacity: 0; }
.industry-detail-copy { padding: 0 var(--space-8) var(--space-8); transition: opacity var(--transition-fast), transform var(--transition-fast); }
.industry-detail-copy .card-kicker { color: var(--color-gold-500); }
.industry-detail-copy h3 { color: var(--color-white); }
.industry-detail-copy > p:not(.card-kicker) { color: var(--color-dark-muted); }
.industry-points { display: grid; gap: var(--space-3); margin: var(--space-6) 0 0; padding: var(--space-5) 0 0; border-top: var(--border-thin) solid var(--color-dark-border); list-style: none; }
.industry-points li { position: relative; padding-left: var(--space-6); color: var(--color-dark-muted); font-size: var(--font-size-sm); }
.industry-points li::before { position: absolute; top: 0; left: 0; color: var(--color-gold-500); content: "✓"; font-weight: var(--font-weight-bold); }

.tad-section { position: relative; overflow: hidden; background-image: linear-gradient(120deg, var(--color-navy-950), var(--color-navy-900)); }
.tad-intro, .tad-visual, .tad-possibilities { position: relative; z-index: var(--z-content); }
.tad-intro > p:not(.eyebrow) { max-width: var(--size-copy); color: var(--color-dark-muted); }
.tad-intro .eyebrow { color: var(--color-green-500); }
.tad-intro > .tad-size-note { margin: var(--space-6) 0 0; color: var(--color-white); font-weight: var(--font-weight-semibold); }
.proposition { display: grid; gap: var(--space-5); }
.proposition > div { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border: var(--border-thin) solid var(--color-dark-border); border-radius: var(--radius-md); background: var(--color-glass); }
.proposition strong { color: var(--color-green-500); font-size: var(--font-size-lg); }
.proposition > div:nth-child(2) strong { color: var(--color-gold-500); }
.proposition > div:nth-child(3) strong { color: var(--color-orange-600); }
.proposition span { color: var(--color-dark-muted); }
.tad-visual { margin: 0; overflow: hidden; border: var(--border-thin) solid var(--color-dark-border); border-radius: var(--radius-lg); background: var(--color-navy-950); }
.tad-visual img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.tad-possibilities { padding-top: var(--space-8); border-top: var(--border-thin) solid var(--color-dark-border); text-align: center; }
.tad-possibilities .card-kicker { margin-bottom: var(--space-5); color: var(--color-gold-500); }
.possibility-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.possibility-grid li { position: relative; display: flex; align-items: center; padding: var(--space-3) var(--space-5) var(--space-3) var(--space-10); border: var(--border-thin) solid var(--color-dark-border); border-radius: var(--radius-round); color: var(--color-dark-muted); font-size: var(--font-size-sm); text-align: left; }
.possibility-grid li::before { position: absolute; top: 50%; left: var(--space-5); color: var(--color-green-500); content: "✓"; font-weight: var(--font-weight-bold); transform: translateY(-50%); }
.possibility-grid li:nth-child(3n + 2)::before { color: var(--color-gold-500); }
.possibility-grid li:nth-child(3n)::before { color: var(--color-orange-600); }

.why-copy { max-width: var(--size-heading-wide); margin-inline: auto; text-align: center; }
.why-copy > p:not(.eyebrow) { color: var(--color-muted); }
.why-copy > .why-goal { margin: var(--space-6) 0 0; color: var(--color-navy-900); font-size: var(--font-size-md); }
.why-goal strong { color: var(--color-green-700); }
.value-list { margin: 0; }
.value-list div { min-width: 0; padding: var(--space-8) var(--space-6); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-sand-100); text-align: center; }
.value-list dt { margin-bottom: var(--space-3); color: var(--color-navy-900); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.value-list dd { margin: 0; color: var(--color-muted); }

.vision { padding-block: var(--space-section); text-align: center; }
.vision .eyebrow { justify-content: center; color: var(--color-green-700); }
.vision h2 { max-width: 18ch; margin-inline: auto; }
.vision p:last-child { max-width: var(--size-copy); margin: 0 auto; color: var(--color-muted); font-size: var(--font-size-md); }

.contact { background-image: radial-gradient(circle at 10% 100%, var(--color-navy-800), transparent 36%), linear-gradient(135deg, var(--color-navy-950), var(--color-navy-900)); }
.contact .eyebrow { color: var(--color-gold-500); }
.contact-copy > p:not(.eyebrow, .contact-location) { max-width: 34rem; color: var(--color-dark-muted); font-size: var(--font-size-md); }
.contact-email { display: inline-flex; flex-direction: column; margin-top: var(--space-8); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.contact-email span { color: var(--color-green-500); font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; }
.contact-location { margin-top: var(--space-4); color: var(--color-dark-muted); font-size: var(--font-size-sm); }
.contact-form { padding: var(--space-10); border-radius: var(--radius-lg); background: var(--color-white); color: var(--color-ink); box-shadow: var(--shadow-card); }
.form-field { margin-bottom: var(--space-5); }
.form-field label { display: block; margin-bottom: var(--space-2); color: var(--color-navy-900); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.form-field label span { color: var(--color-muted); font-weight: var(--font-weight-regular); }
.form-field input, .form-field select, .form-field textarea { width: 100%; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-sand-100); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }
.form-field input, .form-field select { min-height: var(--size-control); padding-inline: var(--space-4); }
.form-field textarea { min-height: 9rem; padding: var(--space-4); resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--color-green-500); background: var(--color-white); box-shadow: 0 0 0 var(--space-1) var(--color-focus); outline: 0; }
.form-submit { width: 100%; border: 0; }
.form-note { margin: var(--space-4) 0 0; color: var(--color-muted); font-size: var(--font-size-xs); text-align: center; }
.form-honeypot { position: absolute; left: -9999rem; }
.form-feedback { display: none; margin: var(--space-4) 0 0; padding: var(--space-3); border-radius: var(--radius-sm); font-size: var(--font-size-sm); text-align: center; }
.form-feedback:target { display: block; }
.form-success { background: var(--color-green-100); color: var(--color-green-700); }
.form-error { background: var(--color-error-bg); color: var(--color-orange-600); }

.site-footer { padding-block: var(--space-8); border-top: var(--border-thin) solid var(--color-dark-border); }
.footer-brand { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: var(--font-weight-semibold); }
.footer-brand img { width: var(--space-10); height: var(--space-10); object-fit: contain; }
.footer-brand strong { color: var(--color-green-500); }
.site-footer p { margin: 0; color: var(--color-dark-muted); font-size: var(--font-size-xs); }

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