/* ====================================================================
   Angle & Co. — Premium muted dark editorial palette
   ==================================================================== */

:root, [data-theme='light'] {
  /* Surfaces — warm bone / oat */
  --color-bg: #efeae1;
  --color-surface: #f3eee5;
  --color-surface-2: #f7f2e9;
  --color-surface-3: #ece4d3;       /* deeper oat — sand */
  --color-surface-warm: #f0e7d2;    /* warmer cream */
  --color-surface-offset: #e6e0d3;
  --color-surface-dynamic: #d9d1bf;
  --color-divider: #d6cdba;
  --color-border: #c8bda6;

  /* Text — espresso */
  --color-text: #2a241b;
  --color-text-muted: #5a544a;
  --color-text-faint: #948c7e;
  --color-text-inverse: #f5efe3;

  /* Primary — muted antique gold / bronze */
  --color-primary: #8a6f3a;
  --color-primary-hover: #6e5829;
  --color-primary-active: #4d3d1c;
  --color-primary-soft: #d8c9a8;

  /* Hero overlay tint */
  --hero-overlay: linear-gradient(180deg, rgba(20,16,12,0.42) 0%, rgba(20,16,12,0.55) 55%, rgba(20,16,12,0.72) 100%);

  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.625rem, 1.25rem + 1.5vw, 2.5rem);
  --text-2xl: clamp(2.25rem, 1.4rem + 2.8vw, 4rem);
  --text-3xl: clamp(2.75rem, 1.2rem + 4.4vw, 5.75rem);
  --text-hero: clamp(3.25rem, 0.6rem + 8vw, 9rem);

  /* Spacing */
  --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-32: 8rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  --transition-interactive: 280ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(30,22,12,0.08);
  --shadow-md: 0 6px 18px rgba(30,22,12,0.10);
  --shadow-lg: 0 18px 48px rgba(30,22,12,0.18);

  --content-narrow: 720px;
  --content-default: 1100px;
  --content-wide: 1400px;

  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-display-italic: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme='dark'] {
  /* Deep, muted, almost film-like dark — never black */
  --color-bg: #14110d;
  --color-surface: #1b1814;
  --color-surface-2: #221e18;
  --color-surface-3: #1f1a13;       /* deeper coffee */
  --color-surface-warm: #25201a;    /* warmer espresso */
  --color-surface-offset: #2a2519;
  --color-surface-dynamic: #322c1f;
  --color-divider: #2c271e;
  --color-border: #3a3326;

  --color-text: #e8e1cf;
  --color-text-muted: #aaa28c;
  --color-text-faint: #6c6555;
  --color-text-inverse: #14110d;

  --color-primary: #c9a86a;
  --color-primary-hover: #d9bd80;
  --color-primary-active: #b89352;
  --color-primary-soft: #3a3122;

  --hero-overlay: linear-gradient(180deg, rgba(10,7,4,0.70) 0%, rgba(10,7,4,0.80) 60%, rgba(10,7,4,0.92) 100%);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 22px rgba(0,0,0,0.45);
  --shadow-lg: 0 22px 56px rgba(0,0,0,0.55);
}

/* default to dark for the premium muted feel */
:root { color-scheme: dark; }

/* ============================== Layout ============================== */
.wrap {
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding-inline: clamp(var(--space-5), 4vw, var(--space-12));
}
.wrap--narrow { max-width: var(--content-narrow); }
.wrap--default { max-width: var(--content-default); }

section { padding-block: clamp(var(--space-16), 10vw, var(--space-32)); }

/* ============================== Header ============================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding: var(--space-5) clamp(var(--space-5), 4vw, var(--space-12));
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  background: color-mix(in oklab, var(--color-bg) 70%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  transition: transform .35s cubic-bezier(.16,1,.3,1), background .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  border-bottom-color: color-mix(in oklab, var(--color-border) 55%, transparent);
}
.site-header.is-hidden { transform: translateY(-110%); }

.brand {
  display: flex; align-items: baseline; gap: var(--space-3);
  text-decoration: none; color: var(--color-text);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}
.brand__mark {
  font-size: clamp(1.5rem, 1.1rem + 0.9vw, 2rem);
  font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase;
}
.brand__by {
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}

.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--color-text);
  position: relative; padding-block: 4px;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor;
  transition: right var(--transition-interactive);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--color-primary); }

.header-right { display: flex; align-items: center; gap: var(--space-4); }
.theme-toggle {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  color: var(--color-text);
}
.theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.78rem 1.5rem; border-radius: var(--radius-full);
  font-family: var(--font-body); font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em; text-decoration: none;
  border: 1px solid var(--color-border); color: var(--color-text);
  background: transparent;
}
.btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--primary {
  background: var(--color-primary); color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-hover); border-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
}

/* ============================== Mobile nav ============================== */
.menu-toggle { display: none; }
.mobile-panel { display: none; }

@media (max-width: 820px) {
  .mobile-panel { display: flex; }
  .nav, .header-right .btn { display: none; }
  .menu-toggle {
    display: grid; place-items: center; width: 38px; height: 38px;
    border: 1px solid var(--color-border); border-radius: var(--radius-full);
    color: var(--color-text);
  }
  .mobile-panel {
    position: fixed; inset: 0; z-index: 70;
    background: var(--color-bg);
    padding: var(--space-20) var(--space-6) var(--space-8);
    transform: translateY(-100%); transition: transform .45s cubic-bezier(.16,1,.3,1);
    display: flex; flex-direction: column; gap: var(--space-6);
  }
  .mobile-panel.is-open { transform: translateY(0); }
  .mobile-panel a {
    font-family: var(--font-display); font-size: var(--text-2xl);
    color: var(--color-text); text-decoration: none;
  }
  .mobile-panel a[aria-current="page"] { color: var(--color-primary); font-style: italic; }
  .mobile-close {
    position: absolute; top: var(--space-5); right: var(--space-5);
    width: 38px; height: 38px; display: grid; place-items: center;
    border: 1px solid var(--color-border); border-radius: var(--radius-full);
    color: var(--color-text);
  }
}

/* ============================== Hero ============================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--space-32) clamp(var(--space-5), 4vw, var(--space-12)) var(--space-20);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: url('./assets/ai-on-the-phone.webp');
  background-size: cover; background-position: center 35%;
  filter: saturate(0.7) contrast(0.95) brightness(0.88);
  transform: scale(1.08);
  animation: heroDrift 24s ease-in-out infinite alternate;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--hero-overlay);
}
@keyframes heroDrift {
  from { transform: scale(1.08) translate3d(0,0,0); }
  to   { transform: scale(1.14) translate3d(-1.2%, -1.4%, 0); }
}

.hero__inner { max-width: 1200px; }

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  opacity: 0.85;
  margin-bottom: var(--space-8);
}

.hero__title {
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-hero);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  color: var(--color-primary-soft);
  font-weight: 400;
}

.hero__sub {
  margin-top: var(--space-8);
  color: rgba(245,239,227,0.85);
  font-family: var(--font-body);
  font-size: var(--text-base);
  letter-spacing: 0.01em;
  max-width: 60ch;
  margin-inline: auto;
}

.hero__cta { margin-top: var(--space-10); display: inline-flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.hero__cta .btn { color: var(--color-text-inverse); border-color: rgba(245,239,227,0.55); }
.hero__cta .btn:hover { color: var(--color-primary-soft); border-color: var(--color-primary-soft); }
.hero__cta .btn--primary {
  background: rgba(245,239,227,0.95); color: #2a241b; border-color: rgba(245,239,227,0.95);
}
.hero__cta .btn--primary:hover { background: var(--color-primary-soft); border-color: var(--color-primary-soft); color: #2a241b; }

/* Scroll cue */
.hero__scroll {
  position: absolute; left: 50%; bottom: var(--space-8);
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.625rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(245,239,227,0.7);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
}
.hero__scroll::after {
  content: ''; width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(245,239,227,0.7), transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity: 0.4; transform: scaleY(0.6); transform-origin: top; }
  50%     { opacity: 1;   transform: scaleY(1); }
}

/* ============================== Marquee (moving banner) ============================== */
.marquee {
  position: relative;
  border-block: 1px solid var(--color-border);
  background: var(--color-surface);
  padding-block: var(--space-6);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; gap: var(--space-16);
  width: max-content;
  animation: marqueeSlide 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  color: var(--color-text-muted);
  white-space: nowrap;
  letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: var(--space-16);
}
.marquee__item::after {
  content: '✦';
  color: var(--color-primary);
  font-size: 0.7em;
  opacity: 0.7;
  font-style: normal;
}
@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee__label {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding-block: var(--space-4) var(--space-2);
  background: var(--color-surface);
}

/* ============================== Tagline strip ============================== */
.tagline-strip {
  background: var(--color-bg);
  padding: var(--space-16) 0;
  text-align: center;
  border-bottom: 1px solid var(--color-divider);
}
.tagline-strip p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.875rem, 1.2rem + 2.8vw, 3.75rem);
  line-height: 1.12;
  color: var(--color-text);
  max-width: 22ch;
  margin: 0 auto;
}
.tagline-strip p span { color: var(--color-primary); }

/* ============================== Stages section ============================== */
.stages {
  background: var(--color-surface);
  border-block: 1px solid var(--color-divider);
}
.stages__intro {
  display: grid; gap: var(--space-6);
  max-width: 800px; margin: 0 auto var(--space-20);
  text-align: center;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--color-primary);
}
.h2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
}
.h2 em { font-style: italic; color: var(--color-primary); }

.stages__grid {
  display: grid; gap: var(--space-12);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .stages__grid { grid-template-columns: 1fr; } }

.stage {
  display: grid; gap: var(--space-5);
  padding: var(--space-10) var(--space-6) var(--space-8);
  border-top: 1px solid var(--color-border);
  position: relative;
}
.stage__num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}
.stage__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  letter-spacing: -0.008em;
  line-height: 1.08;
}
.stage__copy { color: var(--color-text-muted); font-size: var(--text-base); }

/* ============================== Manifesto ============================== */
.manifesto {
  background: var(--color-bg);
  text-align: center;
  padding-block: clamp(var(--space-20), 12vw, var(--space-32));
}
.manifesto__lede {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.1rem + 2.6vw, 3.75rem);
  line-height: 1.12;
  max-width: 22ch;
  margin: 0 auto var(--space-6);
  color: var(--color-text);
}
.manifesto__lede em { font-style: italic; color: var(--color-primary); }
.manifesto__body {
  max-width: 56ch; margin: 0 auto var(--space-10);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1.55;
}
.manifesto__list {
  list-style: none; padding: 0;
  max-width: 56ch; margin: 0 auto var(--space-10);
  display: grid; gap: var(--space-3);
  text-align: left;
}
.manifesto__list li {
  position: relative;
  padding-left: 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  line-height: 1.45;
  color: var(--color-text);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.005em;
}
.manifesto__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 0.55rem; height: 1px;
  background: var(--color-primary);
}
.manifesto__close {
  max-width: 60ch; margin: 0 auto;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.6;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
}
@media (max-width: 600px) {
  .manifesto__list { max-width: 90%; }
}

/* ============================== Services list ============================== */
.services {
  background: var(--color-surface);
  border-block: 1px solid var(--color-divider);
}
.services__head {
  display: flex; align-items: end; justify-content: space-between;
  gap: var(--space-8); margin-bottom: var(--space-16);
  flex-wrap: wrap;
}
.services__head .h2 { max-width: 18ch; }

.svc-list {
  display: grid; gap: 0;
  border-top: 1px solid var(--color-border);
}
.svc {
  display: grid;
  grid-template-columns: 140px 1.1fr 1.6fr;
  gap: var(--space-8);
  align-items: start;
  padding: var(--space-10) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-interactive);
  cursor: default;
  text-decoration: none;
  color: inherit;
}
a.svc { cursor: pointer; }
.svc:hover { background: var(--color-surface-2); }

/* Home services list: staggered reveal + animated gold accent line */
.svc-list .svc {
  --svc-delay: 0ms;
  position: relative;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1) var(--svc-delay),
              transform .8s cubic-bezier(.16,1,.3,1) var(--svc-delay),
              background var(--transition-interactive);
}
.svc-list .svc.is-in { opacity: 1; transform: translateY(0); }
.svc-list .svc:nth-child(1) { --svc-delay: 0ms; }
.svc-list .svc:nth-child(2) { --svc-delay: 90ms; }
.svc-list .svc:nth-child(3) { --svc-delay: 180ms; }
.svc-list .svc:nth-child(4) { --svc-delay: 270ms; }
.svc-list .svc:nth-child(5) { --svc-delay: 360ms; }

/* Animated gold underline that slides in on hover */
.svc-list .svc::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.svc-list .svc:hover::after { transform: scaleX(1); }

/* Title slides slightly on hover */
.svc-list .svc .svc__title,
.svc-list .svc .svc__num,
.svc-list .svc .svc__copy {
  transition: transform .5s cubic-bezier(.16,1,.3,1), color var(--transition-interactive);
}
.svc-list .svc:hover .svc__title { transform: translateX(8px); color: var(--color-primary); }
.svc-list .svc:hover .svc__num { color: var(--color-text); }
.svc-list .svc:hover .svc__copy { transform: translateX(4px); }

/* Animated arrow that appears on hover */
.svc-list .svc .svc__arrow {
  position: absolute;
  right: var(--space-2); top: 50%;
  transform: translateY(-50%) translateX(-12px);
  opacity: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--color-primary);
  transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.svc-list .svc:hover .svc__arrow {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
@media (max-width: 760px) {
  .svc-list .svc .svc__arrow { display: none; }
}

/* ============================== Quotes marquee ============================== */
.quote-marquee {
  position: relative;
  background: var(--color-bg);
  padding-block: var(--space-12);
  overflow: hidden;
  border-block: 1px solid var(--color-divider);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.quote-marquee__track {
  display: flex;
  gap: clamp(var(--space-12), 6vw, var(--space-24));
  width: max-content;
  animation: quoteSlide 56s linear infinite;
  align-items: center;
}
.quote-marquee:hover .quote-marquee__track { animation-play-state: paused; }
.quote-marquee__item {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 0.95rem + 1.2vw, 2rem);
  color: var(--color-text);
  white-space: nowrap;
  letter-spacing: 0.005em;
  display: inline-flex; align-items: center;
  gap: clamp(var(--space-12), 6vw, var(--space-24));
}
.quote-marquee__item::after {
  content: '◆';
  color: var(--color-primary);
  font-size: 0.5em;
  font-style: normal;
  opacity: 0.7;
}
@keyframes quoteSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.svc__num {
  font-family: var(--font-mono);
  color: var(--color-primary);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  padding-top: 0.4em;
}
.svc__title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.2rem + 2vw, 3rem);
  letter-spacing: -0.012em;
  line-height: 1.04;
}
.svc__title em { font-style: italic; color: var(--color-primary); }
.svc__copy { color: var(--color-text-muted); padding-top: 0.4em; }

@media (max-width: 760px) {
  .svc { grid-template-columns: 1fr; gap: var(--space-3); padding-block: var(--space-8); }
  .svc__num { padding-top: 0; }
}

/* Disclaimer */
.svc-disclaimer {
  margin: var(--space-10) auto 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-muted);
  text-align: center;
  font-size: var(--text-base);
  max-width: 60ch;
}

/* Industries woven into the services flow (home + services page) */
.svc-context {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.85rem + 0.45vw, 1.25rem);
  color: var(--color-text-muted);
  text-align: center;
  letter-spacing: 0.005em;
  max-width: 70ch;
  margin-inline: auto;
  line-height: 1.55;
}
.svc-context em {
  font-style: italic;
  color: var(--color-primary);
}
.svc-context-block {
  margin-top: var(--space-12);
  padding: var(--space-8) var(--space-6);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  text-align: center;
  display: grid; gap: var(--space-3);
}
.svc-context-block p {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem);
  color: var(--color-text);
  max-width: 70ch;
  margin-inline: auto;
  line-height: 1.55;
}
.svc-context-block em {
  font-style: italic;
  color: var(--color-primary);
}

/* ============================== Founder section ============================== */
.founder {
  background: var(--color-bg);
  padding-block: clamp(var(--space-20), 12vw, var(--space-32));
}
.founder__grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(var(--space-8), 5vw, var(--space-20));
  align-items: start;
}
@media (max-width: 860px) { .founder__grid { grid-template-columns: 1fr; } }
.founder__col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-content: start;
  position: relative;
}
.founder__img {
  aspect-ratio: 4/5;
  background-image: url('./assets/ai-on-the-phone.webp');
  background-size: cover; background-position: center top;
  border-radius: var(--radius-sm);
  filter: saturate(0.9) contrast(0.98);
  position: relative;
  overflow: hidden;
}
.founder__headshot {
  aspect-ratio: 3/4;
  background-image: url('./assets/ai-about-headshot.webp');
  background-size: cover; background-position: center 28%;
  border-radius: var(--radius-sm);
  filter: saturate(0.92) contrast(0.98);
  width: 58%;
  margin-left: auto;
  margin-top: calc(-1 * var(--space-16));
  border: 6px solid var(--color-bg);
  box-shadow: 0 18px 40px rgba(20,16,12,0.18);
  position: relative;
  z-index: 2;
}
@media (max-width: 860px) {
  .founder__headshot { width: 70%; margin-top: calc(-1 * var(--space-12)); }
}
.founder__name {
  font-family: var(--font-display); font-style: italic;
  color: var(--color-primary);
  font-size: var(--text-base);
  margin-top: var(--space-4);
  letter-spacing: 0.02em;
}
.founder__copy {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin-top: var(--space-6);
  display: grid; gap: var(--space-4);
}
.founder__sign {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  color: var(--color-primary);
  margin-top: var(--space-3);
  letter-spacing: 0.01em;
}

/* ============================== Testimonials ============================== */
.testimonials {
  background: var(--color-surface);
  border-block: 1px solid var(--color-divider);
}
.testimonials__head {
  text-align: center;
  display: grid; gap: var(--space-4);
  max-width: 720px; margin: 0 auto var(--space-16);
}
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 1200px; margin: 0 auto;
}
@media (max-width: 820px) { .testimonials__grid { grid-template-columns: 1fr; } }

.quote {
  display: grid; gap: var(--space-6);
  padding: clamp(var(--space-8), 4vw, var(--space-12));
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
}
.quote::before {
  content: '“';
  position: absolute;
  top: 0.2em; left: 0.4em;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.35;
}

/* Feature quote — slightly more prominent than the rest */
.quote--feature {
  background: color-mix(in oklab, var(--color-primary) 5%, var(--color-surface-2));
  border-color: color-mix(in oklab, var(--color-primary) 25%, var(--color-border));
}
.quote--feature::before {
  opacity: 0.55;
}
.quote--feature .quote__text {
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.65rem);
}
.quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.4;
  color: var(--color-text);
  position: relative;
}
.quote__attr {
  display: grid; gap: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.quote__name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
}
.quote__role {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ============================== Closing CTA ============================== */
.closing {
  background: var(--color-surface-2);
  border-block: 1px solid var(--color-divider);
  text-align: center;
}
.closing__title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.2rem + 4.8vw, 6rem);
  line-height: 1.03;
  letter-spacing: -0.014em;
  margin-bottom: var(--space-8);
}
.closing__title em { font-style: italic; color: var(--color-primary); }
.closing__sub {
  color: var(--color-text-muted);
  max-width: 50ch; margin: 0 auto var(--space-10);
}

/* ============================== Footer ============================== */
.site-footer {
  background: var(--color-bg);
  padding: var(--space-16) clamp(var(--space-5), 4vw, var(--space-12)) var(--space-8);
  border-top: 1px solid var(--color-divider);
}
.site-footer__grid {
  display: flex; align-items: end; justify-content: space-between;
  gap: var(--space-8); flex-wrap: wrap; max-width: var(--content-wide); margin: 0 auto;
}
.site-footer__brand .brand__mark { font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); }
.site-footer__nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.site-footer__nav a {
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--color-text-muted); text-decoration: none;
}
.site-footer__nav a:hover { color: var(--color-primary); }
.site-footer__legal {
  margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  max-width: var(--content-wide); margin-inline: auto;
  font-size: var(--text-xs); color: var(--color-text-faint);
  letter-spacing: 0.06em;
}

/* ============================== Reveal animation ============================== */
.reveal {
  opacity: 0; transform: translateY(48px);
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: translateY(0) translateX(0) scale(1); }

/* Directional variants */
.reveal--left  { transform: translateX(-64px); }
.reveal--right { transform: translateX(64px); }
.reveal--up    { transform: translateY(72px); }
.reveal--scale { transform: translateY(32px) scale(0.94); }

/* Auto-stagger inside a group */
.reveal-group > .reveal:nth-child(1) { --reveal-delay: 0ms; }
.reveal-group > .reveal:nth-child(2) { --reveal-delay: 90ms; }
.reveal-group > .reveal:nth-child(3) { --reveal-delay: 180ms; }
.reveal-group > .reveal:nth-child(4) { --reveal-delay: 260ms; }
.reveal-group > .reveal:nth-child(5) { --reveal-delay: 340ms; }
.reveal-group > .reveal:nth-child(6) { --reveal-delay: 420ms; }

/* ============================== Scroll progress bar ============================== */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 80;
  background: color-mix(in oklab, var(--color-primary) 8%, transparent);
  pointer-events: none;
}
.scroll-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--color-primary) 40%, transparent) 0%,
    var(--color-primary) 55%,
    color-mix(in oklab, var(--color-primary) 90%, white) 100%);
  box-shadow: 0 0 18px color-mix(in oklab, var(--color-primary) 70%, transparent);
  transition: width .08s linear, opacity .4s ease;
  opacity: 1;
}

/* ============================== Section tonal variations & transitions ============================== */
/* Each section gets its own tonal identity — alternating bone / cream / sand */

/* Tagline strip — slightly cooler bone */
.tagline-strip {
  background:
    radial-gradient(800px 400px at 50% 50%, color-mix(in oklab, var(--color-primary) 7%, transparent) 0%, transparent 70%),
    var(--color-bg) !important;
}

/* Manifesto — warm cream, gold halo top */
.manifesto {
  background:
    radial-gradient(1200px 700px at 50% 0%, color-mix(in oklab, var(--color-primary) 15%, transparent) 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 100%, color-mix(in oklab, var(--color-primary) 9%, transparent) 0%, transparent 70%),
    var(--color-surface-warm);
}

/* Stages — deeper sand, soft glow upper-left */
.stages {
  background:
    radial-gradient(900px 600px at 10% 0%, color-mix(in oklab, var(--color-primary) 11%, transparent) 0%, transparent 60%),
    radial-gradient(700px 500px at 95% 100%, color-mix(in oklab, var(--color-primary) 6%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, var(--color-surface-3) 0%, var(--color-surface-offset) 100%);
}

/* Services — lightest cream, side-lit */
.services {
  background:
    radial-gradient(1000px 600px at 95% 5%, color-mix(in oklab, var(--color-primary) 12%, transparent) 0%, transparent 60%),
    radial-gradient(700px 500px at 5% 95%, color-mix(in oklab, var(--color-primary) 7%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, var(--color-surface-2) 0%, var(--color-surface) 100%);
}

/* Stack — returns to base bone with diagonal warmth */
.stack {
  background:
    radial-gradient(900px 600px at 15% 10%, color-mix(in oklab, var(--color-primary) 13%, transparent) 0%, transparent 55%),
    radial-gradient(700px 500px at 85% 90%, color-mix(in oklab, var(--color-primary) 8%, transparent) 0%, transparent 60%),
    var(--color-bg);
}

/* Founder — deep oat, glow upper-right behind portrait */
.founder {
  background:
    radial-gradient(1100px 700px at 100% 0%, color-mix(in oklab, var(--color-primary) 13%, transparent) 0%, transparent 65%),
    radial-gradient(800px 500px at 0% 100%, color-mix(in oklab, var(--color-primary) 7%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--color-surface-warm) 0%, var(--color-surface-3) 100%);
}

/* Testimonials — surface, glow left */
.testimonials {
  background:
    radial-gradient(1000px 600px at 0% 50%, color-mix(in oklab, var(--color-primary) 11%, transparent) 0%, transparent 60%),
    radial-gradient(700px 400px at 100% 0%, color-mix(in oklab, var(--color-primary) 6%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
}

/* Closing — deepest sand with warm gold pool at bottom */
.closing {
  background:
    radial-gradient(1200px 700px at 50% 100%, color-mix(in oklab, var(--color-primary) 18%, transparent) 0%, transparent 60%),
    radial-gradient(800px 500px at 50% 0%, color-mix(in oklab, var(--color-primary) 7%, transparent) 0%, transparent 70%),
    var(--color-surface-3);
}

/* Thin gold hairline divider that fades in between sections */
.section-divider {
  position: relative;
  height: 1px;
  background: transparent;
  overflow: visible;
}
.section-divider::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 1200px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--color-primary) 25%, transparent) 20%,
    color-mix(in oklab, var(--color-primary) 45%, transparent) 50%,
    color-mix(in oklab, var(--color-primary) 25%, transparent) 80%,
    transparent 100%);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.section-divider.is-in::before { opacity: 1; }

/* ============================== Scroll-linked parallax helpers ============================== */
.parallax {
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}

/* Hero parallax — scroll moves bg slower than foreground */
.hero__bg {
  will-change: transform;
  transform: translate3d(0, var(--hero-parallax, 0px), 0) scale(1.08);
}
/* When hero parallax is active, disable the keyframe drift to avoid conflict */
[data-parallax-active] .hero__bg { animation: none; }

/* ============================== Interior page hero ============================== */
.page-hero {
  padding: clamp(var(--space-32), 18vh, 12rem) 0 clamp(var(--space-12), 8vw, var(--space-24));
  text-align: center;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.2rem + 5.6vw, 7rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
}
.page-hero__title em { font-style: italic; color: var(--color-primary); }
.page-hero__image {
  width: min(1200px, 92vw);
  margin: clamp(var(--space-12), 6vw, var(--space-20)) auto 0;
  aspect-ratio: 16/9;
  background-image: url('./assets/ai-walking-notebook.webp');
  background-size: cover; background-position: center;
  border-radius: var(--radius-md);
  filter: saturate(0.9) contrast(0.98);
  box-shadow: 0 24px 60px rgba(20,16,12,0.15);
}
.page-hero__sub {
  margin-top: var(--space-6); color: var(--color-text-muted);
  max-width: 56ch; margin-inline: auto;
}

/* ============================== Contact form ============================== */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(var(--space-8), 5vw, var(--space-20));
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-side dt {
  font-family: var(--font-body); font-size: var(--text-xs);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-text-faint); margin-top: var(--space-6);
}
.contact-side dd {
  font-family: var(--font-display); font-size: var(--text-lg);
  margin-top: var(--space-1);
}
.contact-side dd a { color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-border); }
.contact-side dd a:hover { color: var(--color-primary); border-color: var(--color-primary); }

.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.field label {
  font-family: var(--font-body); font-size: var(--text-xs);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: var(--space-3) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-base);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-bottom-color: var(--color-primary);
}
.field textarea { min-height: 120px; resize: vertical; }

.form-success {
  display: none;
  margin-top: var(--space-6); padding: var(--space-6);
  border: 1px solid var(--color-primary);
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
  font-family: var(--font-display); font-style: italic;
  color: var(--color-text);
}
.form-success.is-shown { display: block; }

/* ============================== Contact form polish ============================== */
.contact-form { display: block; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 720px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

.req {
  color: var(--color-primary);
  margin-left: 2px;
  font-weight: 400;
}

.field { position: relative; }

.field__hint {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-text-muted) 70%, transparent);
  transition: color var(--transition-interactive);
}
.field__hint.is-warn { color: var(--color-primary); }

.field__error {
  display: block;
  min-height: 1.2em;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: #c9533e;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--transition-interactive), transform var(--transition-interactive);
  pointer-events: none;
}
.field.is-invalid .field__error {
  opacity: 1;
  transform: translateY(0);
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-bottom-color: #c9533e;
}
.field.is-valid input,
.field.is-valid select,
.field.is-valid textarea {
  border-bottom-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
}

.form-foot {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}
.form-foot .btn { min-width: 180px; }
.form-foot .btn[disabled] { opacity: 0.7; cursor: progress; }

.form-fine {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

/* Honeypot hidden from users AND layout (screen readers still access via label) */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* Inline success state (alternative to thanks.html redirect) */
.form-success {
  margin-top: var(--space-6);
}

/* Submit button tiny spinner when sending */
.btn.is-sending { position: relative; color: transparent !important; }
.btn.is-sending::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--color-on-primary, #fff);
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-sending::after { animation: none; }
}

/* ============================== Accordion (services page) ============================== */
.accordion {
  display: grid; gap: 0;
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--space-12);
}
.acc {
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  transition: background var(--transition-interactive);
}
.acc[open] { background: var(--color-bg); }
.acc__head {
  list-style: none;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-2);
  cursor: pointer;
  font-family: var(--font-display);
  transition: color var(--transition-interactive);
}
.acc__head::-webkit-details-marker { display: none; }
.acc__head:hover .acc__title { color: var(--color-primary); }
.acc__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  color: var(--color-text-faint);
}
.acc__title {
  font-size: clamp(1.625rem, 1.05rem + 1.6vw, 2.5rem);
  line-height: 1.1;
  font-weight: 400;
  color: var(--color-text);
  transition: color var(--transition-interactive);
}
.acc__icon {
  width: 28px; height: 28px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: border-color var(--transition-interactive), transform .35s ease;
}
.acc__icon::before, .acc__icon::after {
  content: '';
  position: absolute;
  background: var(--color-text);
  transition: transform .35s ease, background var(--transition-interactive);
}
.acc__icon::before { top: 50%; left: 25%; right: 25%; height: 1px; transform: translateY(-50%); }
.acc__icon::after { left: 50%; top: 25%; bottom: 25%; width: 1px; transform: translateX(-50%); }
.acc[open] .acc__icon { border-color: var(--color-primary); transform: rotate(180deg); }
.acc[open] .acc__icon::before { background: var(--color-primary); }
.acc[open] .acc__icon::after { transform: translateX(-50%) scaleY(0); }
.acc[open] .acc__title { color: var(--color-primary); }

.acc__body {
  padding: 0 var(--space-2) var(--space-10) calc(80px + var(--space-6));
  max-width: 70ch;
  display: grid; gap: var(--space-4);
  animation: accFade .5s cubic-bezier(.16,1,.3,1);
}
.acc__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.4;
  color: var(--color-primary);
}
.acc__body p { color: var(--color-text-muted); line-height: 1.65; }
.acc__list {
  list-style: none; padding: 0;
  display: grid; gap: var(--space-2);
  margin-top: var(--space-2);
}
.acc__list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.5;
}
.acc__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 0.55rem; height: 1px;
  background: var(--color-primary);
}
.acc__best {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}
.acc__best span {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-right: 0.5rem;
}
@keyframes accFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px) {
  .acc__head { grid-template-columns: 50px 1fr auto; gap: var(--space-3); padding: var(--space-6) var(--space-2); }
  .acc__body { padding-left: calc(50px + var(--space-3)); padding-right: var(--space-2); }
}

/* ============================== Audience split ============================== */
.audience {
  background: var(--color-bg);
  padding-block: clamp(var(--space-20), 12vw, var(--space-32));
  border-top: 1px solid var(--color-divider);
}
.audience__head {
  text-align: center;
  display: grid; gap: var(--space-3);
  margin-bottom: var(--space-12);
}
.audience__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .audience__grid { grid-template-columns: 1fr; gap: var(--space-12); }
}
.audience__col {
  padding: clamp(var(--space-8), 4vw, var(--space-12));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: grid; gap: var(--space-4);
}
.audience__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.audience__lede {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.05rem + 1vw, 2rem);
  line-height: 1.25;
  color: var(--color-text);
  font-weight: 400;
}
.audience__bring {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
  font-size: var(--text-base);
}
.audience__list {
  list-style: none; padding: 0;
  display: grid; gap: var(--space-3);
}
.audience__list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.5;
}
.audience__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 0.55rem; height: 1px;
  background: var(--color-primary);
}

/* ============================== Stack section (home) ============================== */
.stack {
  padding-block: clamp(var(--space-20), 12vw, var(--space-32));
  border-top: 1px solid var(--color-divider);
  background: var(--color-bg);
}
.stack__head {
  text-align: center;
  display: grid; gap: var(--space-3);
  margin-bottom: var(--space-12);
  max-width: 720px;
  margin-inline: auto;
}
.stack__head .h2 { margin: 0; }
.stack__lede {
  margin: var(--space-5) auto 0;
  max-width: 60ch;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.65;
}
.stack__copy {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.6;
}
.stack__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-10));
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .stack__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}
.stack__col {
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: grid; gap: var(--space-4);
}
.stack__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.stack__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.stack__list li {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
  color: var(--color-text);
  line-height: 1.3;
  position: relative;
  padding-right: 0.75rem;
}
.stack__list li:not(:last-child)::after {
  content: '·';
  position: absolute;
  right: -0.05rem; top: 0;
  color: var(--color-text-faint);
}

/* ============================== Editorial banner (services) ============================== */
.editorial {
  position: relative;
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
  background: var(--color-bg);
}
.editorial__img {
  height: clamp(280px, 40vw, 520px);
  width: min(1400px, calc(100% - var(--space-8)));
  margin: 0 auto;
  background-image: url('./assets/ai-team-meeting.webp');
  background-size: cover;
  background-position: center 35%;
  border-radius: var(--radius-sm);
  filter: saturate(0.9) contrast(0.98);
  position: relative;
}
.editorial__caption {
  text-align: center;
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  color: var(--color-text-muted);
}
.editorial__caption em {
  color: var(--color-primary);
  font-style: italic;
  margin-right: 0.4em;
}

/* Netlify Forms honeypot — hidden from humans */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }