/* =================================================================
   ALZA — styles.css
   Sections in order:
   01 Tokens · 02 Reset & base · 03 Layout helpers · 04 Buttons & links
   05 Header & nav · 06 Hero · 07 Proof strip · 08 Services
   09 Client work · 10 Marquee · 11 Pricing · 12 Add-ons
   13 Credibility · 14 Contact & form · 15 Footer
   16 Responsive · 17 Reduced motion
   ================================================================= */

/* ------------------------- 01 TOKENS ------------------------- */
:root {
  /* Color */
  --color-black:            #080A09;
  --color-near-black:       #0C0E0D;
  --color-white:            #FFFFFF;
  --color-offwhite:         #F7F7F5;
  --color-emerald:          #009B67;
  --color-emerald-bright:   #00B978;
  --color-emerald-dark:     #006B4A;
  --color-text:             #0C0E0D;
  --color-text-muted:       #666A68;
  --color-border:           #E4E6E4;
  --color-border-dark:      rgba(255, 255, 255, 0.12);
  --color-text-on-dark:     rgba(255, 255, 255, 0.68);

  /* Type */
  --font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-hero:    clamp(2.5rem, 5.4vw, 4.5rem);
  --fs-h2:      clamp(2rem, 3.6vw, 3.25rem);
  --fs-h3:      clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-stat:    clamp(2.25rem, 3.4vw, 3rem);
  --fs-lead:    clamp(1.0625rem, 1.25vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-label:   0.8125rem;

  /* Space */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --section-y: clamp(3.25rem, 5.4vw, 5.25rem);

  /* Layout */
  --container: 1360px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 76px;
  --card-pad: 1.75rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Motion */
  --t-fast:  200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-base:  320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-slow:  500ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-scroll: 9000ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------- 02 RESET & BASE ---------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--color-emerald);
  color: var(--color-white);
  padding: var(--space-3) var(--space-6);
  font-size: var(--fs-small);
  font-weight: 600;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* --------------------- 03 LAYOUT HELPERS --------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-emerald);
  margin-bottom: var(--space-6);
}

.section-title {
  font-size: var(--fs-h2);
  max-width: 20ch;
}
.work .section-title,
.contact .section-title { max-width: 22ch; }

/* The brief sets these headlines in caps; Client Work stays sentence case. */
.services .section-title,
.pricing .section-title,
.addons .section-title,
.contact .section-title { text-transform: uppercase; }

.section-sub {
  margin-top: var(--space-6);
  max-width: 58ch;
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}

.center { margin-inline: auto; text-align: center; }
.center.section-sub { max-width: 52ch; }

/* -------------------- 04 BUTTONS & LINKS -------------------- */
.btn {
  --btn-bg: var(--color-emerald);
  min-height: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0 var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              background-color var(--t-fast), border-color var(--t-fast),
              color var(--t-fast);
}

.btn .arrow { transition: transform var(--t-fast); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-emerald {
  background: var(--btn-bg);
  color: var(--color-white);
}
.btn-emerald:hover {
  background: var(--color-emerald-bright);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(0, 155, 103, 0.75);
}

/* Subtle light pass across the button on hover */
.btn-emerald::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: translateX(0);
  opacity: 0;
  pointer-events: none;
}
.btn-emerald:hover::after {
  opacity: 1;
  animation: lightpass 700ms ease-out;
}
@keyframes lightpass {
  from { transform: translateX(0); }
  to   { transform: translateX(420%); }
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-outline:hover {
  border-color: var(--color-emerald);
  color: var(--color-emerald);
  transform: translateY(-2px);
}

.link-emerald {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-emerald);
  transition: color var(--t-fast);
}
.link-emerald .arrow { transition: transform var(--t-fast); }
.link-emerald:hover { color: var(--color-emerald-bright); }
.link-emerald:hover .arrow { transform: translateX(4px); }

/* --------------------- 05 HEADER & NAV --------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-black);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.site-header.is-stuck {
  border-bottom-color: var(--color-border-dark);
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.9);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; }
.brand img { height: 26px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
}
.nav-list a {
  display: inline-block;
  padding-block: var(--space-2);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--t-fast);
}
.nav-list a:hover,
.nav-list a.is-current { color: var(--color-white); }

.lang { display: inline-flex; align-items: center; gap: var(--space-3); }
.lang-btn {
  min-width: 32px;
  padding: 6px 2px;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.11em;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: color var(--t-fast);
}
.lang-btn:hover { color: var(--color-white); }
.lang-btn.is-active { color: var(--color-emerald-bright); }
.lang-divider {
  width: 1px;
  height: 12px;
  background: var(--color-border-dark);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.menu-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-white);
  transition: transform var(--t-base), opacity var(--t-fast);
}
.menu-toggle[aria-expanded="true"] .menu-bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-bar:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* --------------------------- 06 HERO --------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, calc(100svh - var(--header-h)), 900px);
  background: var(--color-black);
  overflow: hidden;
}

/* Dark field behind the hero copy. The aurora covers the full width but is
   masked to nothing on the left, so it builds up as it moves right. */
.hero-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-black);
  --aurora-strength: 1;   /* 0.6 = barely there · 1.6 = much stronger */
}

/* The ombré. Softest at the far left so the headline sits on clean black,
   but the movement now carries across the whole width. */
.aurora-wrap {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: aurora-in 2000ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms forwards;
  -webkit-mask-image: linear-gradient(94deg, transparent 0%, rgba(0,0,0,0.35) 14%, rgba(0,0,0,0.8) 32%, #000 52%, #000 100%);
          mask-image: linear-gradient(94deg, transparent 0%, rgba(0,0,0,0.35) 14%, rgba(0,0,0,0.8) 32%, #000 52%, #000 100%);
}
@keyframes aurora-in { to { opacity: 1; } }

/* Three bands of light that travel the full width. Each band is a repeating
   gradient scrolled by exactly one tile, so the loop has no seam, and the
   three speeds never line up. Far less green than before. */
.aurora {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  filter: blur(58px);
  mix-blend-mode: screen;
  pointer-events: none;
  background-repeat: repeat-x;
  will-change: background-position;
}

.aurora-a {
  top: -12%;
  height: 62%;
  background-image: linear-gradient(101deg,
    rgba(0, 185, 120, 0) 0%,
    rgba(0, 185, 120, calc(0.16 * var(--aurora-strength))) 28%,
    rgba(0, 205, 135, calc(0.20 * var(--aurora-strength))) 44%,
    rgba(0, 185, 120, 0) 72%);
  background-size: 940px 100%;
  animation: flow-a 34s linear infinite;
}
.aurora-b {
  top: 22%;
  height: 66%;
  background-image: linear-gradient(86deg,
    rgba(0, 155, 103, 0) 0%,
    rgba(0, 175, 115, calc(0.15 * var(--aurora-strength))) 33%,
    rgba(0, 155, 103, 0) 66%);
  background-size: 1240px 100%;
  animation: flow-b 53s linear infinite;
}
.aurora-c {
  top: 46%;
  height: 70%;
  background-image: linear-gradient(94deg,
    rgba(0, 185, 120, 0) 0%,
    rgba(0, 165, 110, calc(0.10 * var(--aurora-strength))) 40%,
    rgba(0, 185, 120, 0) 78%);
  background-size: 1680px 100%;
  animation: flow-c 77s linear infinite reverse;
}

/* Exactly one tile per cycle: the loop is mathematically seamless. */
@keyframes flow-a { from { background-position: 0 0; } to { background-position: 940px 0; } }
@keyframes flow-b { from { background-position: 0 0; } to { background-position: 1240px 0; } }
@keyframes flow-c { from { background-position: 0 0; } to { background-position: 1680px 0; } }

/* A slow vertical swell on top of the horizontal flow, so it breathes
   like water instead of sliding like a conveyor belt. */
.aurora-wrap > .aurora-a { animation: flow-a 34s linear infinite, swell-a 23s ease-in-out infinite alternate; }
.aurora-wrap > .aurora-b { animation: flow-b 53s linear infinite, swell-b 31s ease-in-out infinite alternate; }
.aurora-wrap > .aurora-c { animation: flow-c 77s linear infinite reverse, swell-c 41s ease-in-out infinite alternate; }

@keyframes swell-a {
  from { transform: translate3d(0, -3%, 0) scaleY(1); }
  to   { transform: translate3d(0, 5%, 0) scaleY(1.22); }
}
@keyframes swell-b {
  from { transform: translate3d(0, 4%, 0) scaleY(1.16); }
  to   { transform: translate3d(0, -5%, 0) scaleY(0.92); }
}
@keyframes swell-c {
  from { transform: translate3d(0, 2%, 0) scaleY(1.1); }
  to   { transform: translate3d(0, -4%, 0) scaleY(0.95); }
}

/* Stars. Drawn on a canvas so they can drift and twinkle independently:
   small and sparse over the headline, larger and brighter to the right. */
.hero-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Light veil over the copy side. Weaker than before, so the aurora is
   visible behind the headline instead of being cut off at the edge. */
.hero-field::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(96deg, rgba(8, 10, 9, 0.66) 0%, rgba(8, 10, 9, 0.4) 34%, rgba(8, 10, 9, 0.06) 70%, rgba(8, 10, 9, 0) 100%);
}

/* Battery: everything stops while the hero is off screen or the tab is hidden. */
.hero-media.is-paused .aurora,
.hero-media.is-paused .aurora-wrap { animation-play-state: paused; }

.hero-inner { position: relative; z-index: 1; width: 100%; }
.hero-copy { max-width: 44rem; padding-block: var(--space-16); }

.hero-title {
  font-size: var(--fs-hero);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: -0.015em;
}
.hero-title em {
  font-style: normal;
  color: var(--color-emerald-bright);
}

.hero-sub {
  margin-top: var(--space-8);
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.78);
}

.hero .btn { margin-top: var(--space-12); }

/* ----------------------- 07 PROOF STRIP ----------------------- */
.proof {
  position: relative;
  background: #101312;                       /* a step lighter than the hero */
  border-top: 1px solid rgba(0, 155, 103, 0.45);
  padding-block: clamp(2rem, 3.2vw, 2.75rem);
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.proof-item { position: relative; }
.proof-item + .proof-item { padding-left: clamp(2rem, 5vw, 5rem); }
.proof-item + .proof-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--color-emerald), transparent);
  opacity: 0.55;
}

.proof-value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-emerald-bright);
  text-transform: uppercase;
}
.proof-value-text {
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  max-width: 14ch;
}
.proof-label {
  margin-top: var(--space-3);
  max-width: 34ch;
  font-size: var(--fs-small);
  color: var(--color-text-on-dark);
}

/* ------------------------- 08 SERVICES ------------------------- */
.services { background: var(--color-white); }

.svc-grid {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.svc {
  text-align: center;
  padding: var(--space-2) clamp(1rem, 2vw, 2rem) var(--space-6);
  border-left: 1px solid var(--color-border);
  transition: transform var(--t-base);
}
.svc:first-child { border-left: 0; }
.svc:hover { transform: translateY(-4px); }

.svc-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-emerald);
  margin-bottom: var(--space-3);
  transition: color var(--t-base);
}
.svc:hover .svc-num { color: var(--color-emerald-bright); }
.svc-title {
  font-size: 1.0625rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--t-base);
}
.svc:hover .svc-title { color: var(--color-emerald); }

.svc-rule {
  display: block;
  width: 26px;
  height: 2px;
  margin: var(--space-4) auto;
  background: var(--color-emerald);
  transition: width var(--t-slow);
}
.svc:hover .svc-rule { width: 58px; }

.svc-body {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  max-width: 30ch;
  margin-inline: auto;
}

/* ------------------------ 09 CLIENT WORK ------------------------ */
.work { background: var(--color-offwhite); }

.work-grid {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
}

.project { display: flex; flex-direction: column; }

.laptop { transition: transform var(--t-slow); }
.project:hover .laptop { transform: translateY(-7px); }

.laptop-screen {
  position: relative;
  background: var(--color-near-black);
  border: 1px solid rgba(12, 14, 13, 0.14);
  border-radius: var(--radius-lg) var(--radius-lg) 2px 2px;
  padding: 10px 10px 12px;
  box-shadow: 0 22px 44px -30px rgba(8, 10, 9, 0.55);
  transition: box-shadow var(--t-slow);
}
.project:hover .laptop-screen {
  box-shadow: 0 34px 60px -30px rgba(8, 10, 9, 0.62);
}

.laptop-bar {
  display: flex;
  gap: 6px;
  padding: 2px 4px 10px;
}
.laptop-bar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

/* Two screenshot modes.
   Default: a viewport-height capture. It fills the screen, anchored to the top.
   .is-tall: a full-page capture. It shows the top and scrolls down on hover.
   Add class="laptop-viewport is-tall" once you have full-page screenshots. */
.laptop-viewport {
  position: relative;
  aspect-ratio: 1.9;
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-white);
}
.laptop-viewport img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: translateY(0);
  transition: transform var(--t-scroll);
}
.laptop-viewport.is-tall img {
  height: auto;
  object-fit: fill;
}
.project:hover .laptop-viewport.is-tall img { transform: translateY(-62%); }

.laptop-base {
  height: 12px;
  margin-inline: auto;
  width: 104%;
  max-width: 104%;
  background: linear-gradient(180deg, #161A18 0%, #0C0E0D 100%);
  border-radius: 0 0 10px 10px;
  transform: translateX(-1.92%);
  box-shadow: 0 12px 22px -16px rgba(8, 10, 9, 0.7);
}

.project-body {
  margin-top: var(--space-6);
  max-width: 44ch;
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}
.project .link-emerald { margin-top: var(--space-4); align-self: flex-start; }
.project:hover .link-emerald { color: var(--color-emerald-bright); }

/* -------------------------- 10 MARQUEE -------------------------- */
.marquee {
  background: var(--color-near-black);
  border-block: 1px solid var(--color-border-dark);
  overflow: hidden;
  padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 22s linear infinite;
}
.marquee-group {
  display: flex;
  align-items: center;
  flex: none;
}
.marquee-group span {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.375rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  padding-inline: clamp(1.5rem, 3vw, 3rem);
  white-space: nowrap;
}
.marquee-group i {
  display: block;
  width: 1px;
  height: 20px;
  background: var(--color-emerald);
  opacity: 0.8;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------- 11 PRICING + 12 ADD-ONS ------------------- */
.pricing { background: var(--color-white); }

.pricing-layout {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
  align-items: stretch;      /* both cards are the same height */
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 var(--card-pad) clamp(1.75rem, 2.4vw, 2.25rem);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.price-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 50px -34px rgba(8, 10, 9, 0.45);
}
.price-card-featured {
  border-color: var(--color-emerald);
  box-shadow: 0 18px 44px -30px rgba(0, 155, 103, 0.5);
}
.price-card-featured:hover { box-shadow: 0 30px 56px -32px rgba(0, 155, 103, 0.55); }

/* Both cards carry a banner row so their contents line up. Only the
   featured card's banner is filled in. */
.price-banner {
  margin: 0 calc(var(--card-pad) * -1) clamp(1.25rem, 2vw, 1.75rem);
  padding: 9px var(--space-6);
  background: var(--color-emerald);
  color: var(--color-white);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}
.price-banner-empty { background: transparent; }

.price-name {
  font-size: var(--fs-h3);
  text-transform: uppercase;
}
.price-amount {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-emerald);
}
.price-body {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.price-list {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: 10px;
  font-size: var(--fs-small);
}
.price-list li { position: relative; padding-left: var(--space-6); }
.price-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 1px;
  background: var(--color-emerald);
}

.price-card .btn {
  margin-top: auto;          /* buttons align across both cards */
  width: 100%;
}
.price-card .price-list { margin-bottom: var(--space-8); }

/* Add-on rail */
.addon-rail {
  display: grid;
  gap: 0;
  align-content: start;
  padding-top: calc(9px + 1.25rem + 1.5rem);
}
.addon-rail-title {
  font-size: 0.875rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}
.addon {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--color-border);
  transition: transform var(--t-base);
}
.addon:last-child { border-bottom: 0; }
.addon:hover { transform: translateX(3px); }

.addon-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.addon-title {
  font-size: 0.875rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.addon-num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-emerald);
  margin-right: 4px;
}
.addon-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  white-space: nowrap;
}
.addon-price .was {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.addon-price .now { font-size: 1.0625rem; color: var(--color-emerald); }
.addon-price .now-sm {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.addon-price .per {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.addon-flag {
  margin-top: 5px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-emerald);
}
.addon-note {
  margin-top: 5px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.addon .link-emerald {
  min-height: 30px;
  margin-top: 2px;
  font-size: 0.75rem;
  letter-spacing: 0.07em;
}

/* ------------------------ 13 CREDIBILITY ------------------------ */
.credibility {
  background: var(--color-black);
  color: var(--color-white);
  padding-block: var(--section-y);
}
.credibility-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.credibility-title {
  font-size: var(--fs-h2);
  max-width: 20ch;
}
/* The white half slides in as one piece, then the emerald half types. */
.type-static {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
}
.type-static.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.type-line { color: var(--color-emerald-bright); }
.type-caret {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  margin-left: 4px;
  translate: 0 0.06em;
  background: var(--color-emerald-bright);
  animation: caret 900ms steps(1) infinite;
}
.type-caret.is-done { animation: none; opacity: 0; }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.credibility-title em {
  font-style: normal;
  color: var(--color-emerald-bright);
}
.credibility-copy {
  display: grid;
  gap: var(--space-4);
  padding-top: 0.6rem;
  font-size: var(--fs-lead);
  color: var(--color-text-on-dark);
  max-width: 52ch;
}
.credibility-line {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-dark);
  color: var(--color-white);
}

/* --------------------- 14 CONTACT & FORM --------------------- */
.contact { background: var(--color-white); }
.contact-grid { display: block; }

/* Two cards: heading left, form right. */
.contact-cards {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.contact-intro { max-width: 22ch; }
.contact-intro .section-sub { max-width: 34ch; }
.contact-main { max-width: 620px; }

/* What to expect — a row under the form instead of a third column */
.contact-expect {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: clamp(1.75rem, 2.6vw, 2.25rem);
  border-top: 1px solid var(--color-border);
}
.expect-title {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-emerald);
  margin-bottom: var(--space-6);
}
.expect-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

/* Each item gets a ring that draws itself, then a check that writes in. */
.expect-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.check {
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: 1px;
}
.check svg { width: 100%; height: 100%; overflow: visible; }
.check-ring,
.check-mark {
  fill: none;
  stroke: var(--color-emerald);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.check-ring {
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  opacity: 0.85;
}
.check-mark {
  stroke: var(--color-emerald-bright);
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}
.expect-item.is-checked .check-ring {
  transition: stroke-dashoffset 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  stroke-dashoffset: 0;
}
.expect-item.is-checked .check-mark {
  transition: stroke-dashoffset 320ms cubic-bezier(0.22, 0.61, 0.36, 1) 420ms;
  stroke-dashoffset: 0;
}
.expect-copy { min-width: 0; }

.form { display: grid; gap: 11px; }

.field { display: grid; gap: 3px; }
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.form label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text);
}

.form input,
.form select,
.form textarea {
  font-size: 0.9375rem;
  width: 100%;
  min-height: 40px;
  padding: 8px 13px;
  background: var(--color-white);
  border: 1px solid rgba(0, 155, 103, 0.45);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form textarea { min-height: 62px; resize: vertical; line-height: 1.6; }

.form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
                    linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
  background-position: calc(100% - 21px) 18px, calc(100% - 16px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.form input:hover,
.form select:hover,
.form textarea:hover { border-color: rgba(0, 155, 103, 0.75); }

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--color-emerald);
  box-shadow: 0 0 0 3px rgba(0, 155, 103, 0.16);
}

.form input[aria-invalid="true"],
.form select[aria-invalid="true"],
.form textarea[aria-invalid="true"] {
  border-color: #B3261E;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.1);
}

.error {
  min-height: 0;
  font-size: var(--fs-label);
  color: #B3261E;
}
.error:empty { display: none; }

/* Honeypot — visually removed, still reachable by bots */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.btn-submit { margin-top: 4px; justify-self: start; min-width: 230px; min-height: 46px; }
.btn-loading { display: none; }
.btn-submit.is-loading { pointer-events: none; opacity: 0.85; }
.btn-submit.is-loading .btn-label { display: none; }
.btn-submit.is-loading .btn-loading { display: inline-flex; align-items: center; gap: 0.5em; }
.btn-submit.is-loading .btn-loading::after {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-status {
  padding: var(--space-4) var(--space-6);
  border-left: 2px solid;
  font-size: var(--fs-small);
}
.form-success {
  border-color: var(--color-emerald);
  background: rgba(0, 155, 103, 0.06);
  color: var(--color-emerald-dark);
}
.form-failure {
  border-color: #B3261E;
  background: rgba(179, 38, 30, 0.05);
  color: #B3261E;
}

.side-block {
  padding-top: var(--space-3);
  border-top: 2px solid var(--color-emerald);
}
.expect-item .side-title { margin-top: 2px; }
.side-block:first-child { border-top-color: var(--color-emerald); }
.side-title {
  font-size: 0.9375rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.side-body {
  margin-top: 6px;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  max-width: 40ch;
}

/* ---------------------------- 15 FAQ ---------------------------- */
.faq {
  background: var(--color-near-black);
  color: var(--color-white);
  border-top: 1px solid rgba(0, 155, 103, 0.45);
  padding-block: var(--section-y);
}
.faq-head { margin-bottom: clamp(1.25rem, 2vw, 1.75rem); }
.faq .eyebrow { color: var(--color-emerald-bright); }
.faq-title {
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  text-transform: uppercase;
  max-width: 18ch;
}
.faq-list {
  max-width: 900px;
  border-top: 1px solid var(--color-border-dark);
}
.faq-item { border-bottom: 1px solid var(--color-border-dark); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 14px 0;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color var(--t-fast);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--color-emerald-bright); }
.faq-q:focus-visible { outline-offset: -2px; }

/* thin plus that becomes a minus, drawn with two rules */
.faq-sign {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.faq-sign::before,
.faq-sign::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 1.5px;
  background: var(--color-emerald-bright);
  transition: transform var(--t-base);
}
.faq-sign::after { transform: rotate(90deg); }
.faq-item[open] .faq-sign::after { transform: rotate(0deg); }

.faq-a {
  padding-bottom: 16px;
  max-width: 74ch;
  color: var(--color-text-on-dark);
  font-size: var(--fs-small);
}

/* --------------------------- 16 FOOTER --------------------------- */
.site-footer {
  background: var(--color-black);
  color: var(--color-white);
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: clamp(2rem, 3vw, 3rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.25rem, 3.5vw, 3.25rem);
  border-bottom: 1px solid var(--color-border-dark);
}

.footer-brand img { height: 28px; width: auto; }
.footer-blurb {
  margin-top: var(--space-4);
  max-width: 34ch;
  color: var(--color-text-on-dark);
}
.footer-disciplines {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.footer-disciplines .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-emerald);
}

.footer-metrics {
  display: grid;
  gap: clamp(2rem, 3vw, 2.75rem);
}
.fm-value {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fm-label {
  margin-top: var(--space-3);
  max-width: 46ch;
  font-size: var(--fs-small);
  color: var(--color-text-on-dark);
}

.footer-utility {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  justify-items: start;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  font-size: var(--fs-small);
}
.footer-links a {
  color: var(--color-text-on-dark);
  transition: color var(--t-fast);
}
.footer-links a:hover { color: var(--color-white); }

.footer-bottom {
  padding-top: clamp(2rem, 3vw, 2.75rem);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.5);
}

/* --------------------- 17 BLOG POST COMPONENTS --------------------- */

/* Cover photo: full width, clean, nothing on top of it. The title lives
   underneath so the photo is never fighting the type. */
.post-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 620px;
  background: var(--color-offwhite);
  position: relative;
  overflow: hidden;
}
.post-cover img { width: 100%; height: 100%; object-fit: cover; }

.cover-slot {
  position: absolute;
  inset: clamp(0.75rem, 1.5vw, 1.25rem);
  display: grid;
  place-content: center;
  align-content: center;
  gap: 6px;
  text-align: center;
  border: 1px dashed rgba(0, 155, 103, 0.5);
  border-radius: var(--radius-md);
}
.cover-slot strong {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-emerald);
}
.cover-slot span { font-size: var(--fs-small); color: var(--color-text-muted); }

/* Title block, on white, under the photo. */
.post-head { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.post-kicker {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-emerald);
  margin-bottom: var(--space-4);
}
.post-h1 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  max-width: 20ch;
}
.post-standfirst {
  margin-top: var(--space-6);
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}
.post-byline {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.breadcrumb a { transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--color-emerald); }

/* Numbers band. Real figures, one source, stated underneath. */
.stat-band {
  margin-block: clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-md);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}
.stat-item { position: relative; }
.stat-item + .stat-item { padding-left: clamp(1.25rem, 2.4vw, 2.25rem); }
.stat-item + .stat-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--color-emerald), transparent);
  opacity: 0.6;
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-emerald-bright);
}
.stat-label {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-on-dark);
}
.stat-source {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-dark);
  font-size: var(--fs-label);
  color: rgba(255, 255, 255, 0.55);
}
.stat-source a { color: var(--color-emerald-bright); text-decoration: underline; text-underline-offset: 3px; }

/* Sources list at the foot of the article */
.sources {
  margin-top: clamp(2rem, 3vw, 2.75rem);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.sources-label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.sources ol {
  list-style: none;
  counter-reset: src;
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.sources li { counter-increment: src; padding-left: var(--space-8); position: relative; }
.sources li::before {
  content: counter(src, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-emerald);
}

/* Author card */
.author-card {
  margin-top: clamp(2rem, 3vw, 2.75rem);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: flex-start;
}
.author-mark {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-content: center;
  background: var(--color-black);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-emerald-bright);
}
.author-name {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.author-role {
  margin-top: 4px;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.author-meta {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-emerald);
}

/* Post footer: tags, date, copy link */
.post-foot {
  margin-top: clamp(2rem, 3vw, 2.75rem);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.copy-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 40px;
  padding: 0 var(--space-6);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.copy-link:hover { border-color: var(--color-emerald); color: var(--color-emerald); }
.copy-link.is-copied { border-color: var(--color-emerald); color: var(--color-emerald); }

/* Related posts */
.related { background: var(--color-offwhite); }
.related-label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-emerald);
  margin-bottom: var(--space-6);
}

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .stat-item:nth-child(3) { padding-left: 0; }
  .stat-item:nth-child(3)::before { display: none; }
}
@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr; }
  .stat-item + .stat-item { padding-left: 0; padding-top: var(--space-4); }
  .stat-item + .stat-item::before { display: none; }
  .author-card { flex-direction: column; }
}

/* The short answer. This is the block AI assistants lift, so it sits
   first and states the whole argument in one paragraph. */
.answer-box {
  margin-block: clamp(2rem, 3.4vw, 3rem);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--color-offwhite);
  border-left: 3px solid var(--color-emerald);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.answer-label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-emerald);
  margin-bottom: var(--space-3);
}
.answer-box p { font-size: 1.0625rem; }

/* Contents */
.toc {
  margin-block: clamp(2rem, 3vw, 2.75rem);
  padding: var(--space-6) 0;
  border-block: 1px solid var(--color-border);
}
.toc-label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.toc ol {
  list-style: none;
  counter-reset: toc;
  display: grid;
  gap: 10px;
  font-size: var(--fs-small);
}
.toc li { counter-increment: toc; }
.toc li::before {
  content: counter(toc, decimal-leading-zero);
  margin-right: var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-emerald);
}
.toc a { transition: color var(--t-fast); }
.toc a:hover { color: var(--color-emerald); }

/* Numbered foundation cards */
.foundation {
  margin-block: clamp(2rem, 3vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}
.foundation-item { background: var(--color-white); padding: clamp(1.25rem, 2vw, 1.75rem); }
.foundation-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-emerald);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.foundation-item h3 {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.foundation-item p { font-size: var(--fs-small); color: var(--color-text-muted); }

/* Says this / answers this */
.compare {
  margin-block: clamp(2rem, 3vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.compare-card {
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.compare-card.is-better { border-color: var(--color-emerald); background: rgba(0, 155, 103, 0.04); }
.compare-label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.compare-card.is-better .compare-label { color: var(--color-emerald); }
.compare-card p { font-size: var(--fs-small); }

/* Figures */
.post-figure { margin-block: clamp(2rem, 3.4vw, 3rem); }
.post-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}
.post-figure figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-label);
  color: var(--color-text-muted);
}

/* Placeholder shown until a real photo is dropped in. Remove the whole
   .is-placeholder div when you add the <img>. */
.figure-slot {
  aspect-ratio: 16 / 9;
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  padding: var(--space-6);
  border: 1px dashed rgba(0, 155, 103, 0.5);
  border-radius: var(--radius-md);
  background: var(--color-offwhite);
}
.figure-slot strong {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-emerald);
}
.figure-slot span { font-size: var(--fs-small); color: var(--color-text-muted); }

/* FAQ on a light page */
.faq-light .faq-list { border-top-color: var(--color-border); }
.faq-light .faq-item { border-bottom-color: var(--color-border); }
.faq-light .faq-a { color: var(--color-text-muted); }

/* Closing call to action */
.post-cta {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-md);
}
.post-cta h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  text-transform: uppercase;
  max-width: 20ch;
}
.post-cta p {
  margin-top: var(--space-4);
  max-width: 56ch;
  color: var(--color-text-on-dark);
  font-size: var(--fs-small);
}
.post-cta .btn { margin-top: var(--space-6); }

@media (max-width: 768px) {
  .foundation, .compare { grid-template-columns: 1fr; }
}

/* ------------------------- 18 RESPONSIVE ------------------------- */

/* 1200 — tighten the grid rhythm */
@media (max-width: 1200px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc { padding-bottom: var(--space-8); }
  .svc:nth-child(3) { border-left: 0; }
  .svc:nth-child(1), .svc:nth-child(2) { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-8); }
  .footer-grid { grid-template-columns: 1fr; }
}

/* 992 — collapse navigation and side-by-side layouts */
@media (max-width: 992px) {
  :root { --header-h: 68px; }

  .menu-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-6) var(--gutter) var(--space-12);
    background: var(--color-black);
    border-bottom: 1px solid var(--color-border-dark);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  }
  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }
  .nav-list li { width: 100%; border-bottom: 1px solid var(--color-border-dark); }
  .nav-list a {
    display: block;
    width: 100%;
    padding-block: var(--space-4);
    font-size: 1rem;
    min-height: 44px;
  }
  .lang { margin-top: var(--space-8); }
  .lang-btn { min-height: 44px; min-width: 44px; }

  .proof-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .proof-item + .proof-item {
    padding-left: 0;
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border-dark);
  }
  .proof-item + .proof-item::before { display: none; }
  .proof-value-text { max-width: none; }

  .work-grid { grid-template-columns: 1fr; }
  .project { max-width: 640px; }

  .pricing-layout { grid-template-columns: 1fr; }
  .price-grid { max-width: 720px; margin-inline: auto; }
  .addon-rail { padding-top: 0; max-width: 720px; margin-inline: auto; width: 100%; }

  .expect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-cards { grid-template-columns: 1fr; align-items: start; }
  .contact-intro { max-width: 30ch; }

  .credibility-inner { grid-template-columns: 1fr; }
  .credibility-title { max-width: 22ch; }
}

/* 768 — single-column content, larger touch targets */
@media (max-width: 768px) {
  .hero { min-height: 78vh; }
  .hero-copy { padding-block: var(--space-16) var(--space-24); }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(8, 10, 9, 0.55) 0%, rgba(8, 10, 9, 0.35) 40%, rgba(8, 10, 9, 0.9) 100%);
  }
  .hero-video { object-position: 74% bottom; }

  .svc-grid { grid-template-columns: 1fr; }
  .svc {
    padding: var(--space-6) 0;
    border-left: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .svc:first-child { padding-top: 0; }
  .svc:last-child { border-bottom: 0; }
  .svc:hover { transform: none; }

  .field-row { grid-template-columns: 1fr; }
  .btn-submit { width: 100%; }
  .expect-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .hero { min-height: clamp(520px, calc(100svh - var(--header-h)), 760px); }
  .aurora { filter: blur(40px); }
  .aurora-c { display: none; }
  .hero-field::before {
    background: linear-gradient(180deg, rgba(8, 10, 9, 0.45) 0%, rgba(8, 10, 9, 0.55) 60%, rgba(8, 10, 9, 0.9) 100%);
  }

  .marquee-group span { letter-spacing: 0.1em; }
}

/* 480 — small phones */
@media (max-width: 640px) {
  .price-grid { grid-template-columns: 1fr; }
  .price-card-featured { order: -1; }
}

@media (max-width: 480px) {
  :root { --fs-body: 1rem; }
  .btn { width: 100%; padding-inline: var(--space-6); }
  .link-emerald { letter-spacing: 0.07em; }
  .laptop-screen { padding: 7px 7px 9px; }
  .addon { flex-direction: column; gap: var(--space-3); }
}

/* Hover effects only where hover actually exists */
@media (hover: none) {
  .project:hover .laptop { transform: none; }
  .project:hover .laptop-viewport.is-tall img { transform: none; }
  .svc:hover .svc-rule { width: 32px; }
  .price-card:hover { transform: none; }
}

/* ------------------------ 19 SCROLL REVEAL ------------------------ */
/* Blocks settle into place once as they enter the viewport. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 560ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------------------- 20 REDUCED MOTION ---------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .type-caret { display: none; }
  .type-static { opacity: 1 !important; transform: none !important; }
  .aurora { animation: none; }
  .check-ring, .check-mark { stroke-dashoffset: 0 !important; }
  .aurora-wrap { opacity: 1; animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .marquee-track { animation: none; transform: none; }
  .project:hover .laptop-viewport.is-tall img { transform: none; }
}

/* --------------------- 18 BLOG & LEGAL PAGES --------------------- */
.page-head {
  background: var(--color-black);
  color: var(--color-white);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.page-head .eyebrow { color: var(--color-emerald-bright); }
.page-title {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  max-width: 20ch;
}
.page-sub {
  margin-top: var(--space-6);
  max-width: 56ch;
  font-size: var(--fs-lead);
  color: var(--color-text-on-dark);
}

/* Blog index — card grid. Photo first, then category, date, title,
   excerpt and the link, in that order. */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.25rem);
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.post-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 155, 103, 0.45);
  box-shadow: 0 26px 50px -34px rgba(8, 10, 9, 0.45);
}

.post-thumb {
  position: relative;
  aspect-ratio: 74 / 51;
  overflow: hidden;
  background: var(--color-offwhite);
  border-bottom: 1px solid var(--color-border);
}
.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.post-card:hover .post-thumb img { transform: scale(1.04); }

/* Shown until a photo is added. Delete the div and uncomment the img. */
.thumb-slot {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 5px;
  text-align: center;
  padding: var(--space-4);
  border: 1px dashed rgba(0, 155, 103, 0.5);
  border-radius: var(--radius-sm);
  margin: 10px;
}
.thumb-slot strong {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-emerald);
}
.thumb-slot span { font-size: 0.75rem; color: var(--color-text-muted); }

.post-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 2vw, 1.6rem);
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.post-cat { color: var(--color-emerald); }
.post-date { color: var(--color-text-muted); }
.post-tags .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-border);
}

.post-title {
  font-size: 1.1875rem;
  line-height: 1.25;
  transition: color var(--t-fast);
}
.post-card:hover .post-title { color: var(--color-emerald); }

.post-excerpt {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.post-more {
  margin-top: auto;
  padding-top: var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-emerald);
}
.post-more .arrow { transition: transform var(--t-fast); }
.post-card:hover .post-more .arrow { transform: translateX(4px); }

/* The whole card is clickable, but only the title is a real link. */
.post-card .stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.post-card { position: relative; }

@media (max-width: 1100px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .post-grid { grid-template-columns: 1fr; }
  .post-card:hover { transform: none; }
}

.prose {
  max-width: 68ch;
  font-size: 1.125rem;
  line-height: 1.75;
}
.prose h2 {
  margin-top: var(--space-16);
  margin-bottom: var(--space-4);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.prose h3 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-3);
  font-size: var(--fs-h3);
}
.prose p { margin-bottom: var(--space-6); }
.prose ul {
  margin-bottom: var(--space-6);
  display: grid;
  gap: var(--space-3);
}
.prose li { position: relative; padding-left: var(--space-6); }
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 10px;
  height: 1px;
  background: var(--color-emerald);
}
.prose a { color: var(--color-emerald); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 768px) {
  .post-item { grid-template-columns: 1fr; gap: var(--space-3); }
  .post-item:hover { transform: none; }
}