/* ==========================================================================
   Stouf Communications — site styles
   Layered on top of css/modernist.css (the Modernist design system tokens
   and component classes). Everything brand-specific lives here.
   ========================================================================== */

/* --- Brand tokens: overrides the Modernist defaults --------------------- */
:root {
  --brand-purple: #6e3a82;
  --brand-blue: #1f9fd8;
  --brand-blue-ink: #1176a3;
  --brand-pink: #e5127f;
  --brand-green: #a3c617;
  --brand-green-ink: #6f8a0e;

  --color-accent: #e5127f;
  --color-accent-100: #fdeaf3;
  --color-accent-200: #fbd2e4;
  --color-accent-300: #f8a8ca;
  --color-accent-400: #f26ba9;
  --color-accent-500: #e5127f;
  --color-accent-600: #c60e6d;
  --color-accent-700: #9d0a56;
  --color-accent-800: #700a3e;
  --color-accent-900: #460a29;

  --color-accent-2: #6e3a82;
  --color-accent-2-100: #f3edf7;
  --color-accent-2-200: #e4d6ec;
  --color-accent-2-300: #cbb0da;
  --color-accent-2-400: #a97fbe;
  --color-accent-2-500: #8b54a6;
  --color-accent-2-600: #6e3a82;
  --color-accent-2-700: #572d67;
  --color-accent-2-800: #3f2149;
  --color-accent-2-900: #29162f;

  --color-text: #241a2b;
  --color-bg: #f5f3f7;
  --color-surface: #eae5ef;
  --color-divider: color-mix(in srgb, #241a2b 40%, transparent);
  --color-neutral-100: #faf8fb;
  --color-neutral-200: #ebe7ee;
  --color-neutral-300: #d8d2dc;
  --color-neutral-500: #9a92a0;

  /* layout rhythm */
  --gutter: clamp(20px, 5vw, 64px);
  --shell: 1440px;
  --section-y: clamp(52px, 7vw, 110px);
  --header-h: clamp(64px, 7vw, 84px);
}

/* --- Base -------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); }
input, textarea, button, select { font-family: var(--font-body); }
[hidden] { display: none !important; }

.shell { max-width: var(--shell); margin: 0 auto; }
/* The client pages arrive as index.html#clients etc., so native hash scrolling
   has to clear the sticky header the same way the JS jump() offset does. */
#channels, #coverage, #clients, #quote { scroll-margin-top: calc(var(--header-h) + 8px); }
.section { padding: var(--section-y) var(--gutter); }
.section--ruled { border-top: 2px solid var(--color-divider); }
.section--tint { background: var(--color-neutral-100); }

.kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}
.live-dot {
  width: 8px; height: 8px;
  background: var(--color-accent);
  animation: pulseDot 1.8s ease-out infinite;
}
.arrow { display: inline-block; width: 18px; height: 2px; background: currentColor; }

/* --- Motion ------------------------------------------------------------ */
@keyframes rise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes riseSm { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 60%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}
.anim-rise { animation: rise .9s cubic-bezier(.16, 1, .3, 1) both; }
.anim-rise-sm { animation: riseSm .8s both; }
.anim-fade { animation: fadeIn .6s both; }
/* Scroll-linked reveals where supported; harmless elsewhere. */
@supports (animation-timeline: view()) {
  .reveal {
    animation: riseSm .7s both;
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
}

/* --- Header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 2px solid var(--color-divider);
}
.site-header__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--header-h);
  display: flex; align-items: center; gap: clamp(16px, 4vw, 48px);
}
.brand { background: none; border: 0; padding: 0; cursor: pointer; flex: 0 0 auto; display: flex; align-items: center; }
.brand img { height: clamp(34px, 4.4vw, 48px); width: auto; mix-blend-mode: multiply; }

.site-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
.nav-link {
  background: none; border: 0; padding: 10px 0; cursor: pointer; min-height: 44px;
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: 0.06em; color: var(--color-text);
  transition: color .18s ease;
}
.nav-link:hover { color: var(--color-accent); }
.btn-cta { font-size: 13px; letter-spacing: .02em; padding: 11px 20px; gap: 10px; }

.burger {
  margin-left: auto; width: 44px; height: 44px; padding: 0 4px;
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: 0; cursor: pointer;
}
.burger span { display: block; height: 2px; width: 100%; background: var(--color-text); }
.burger span:last-child { width: 70%; background: var(--color-accent); }

/* --- Mobile menu ------------------------------------------------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 70;
  background: var(--color-text); color: var(--color-bg);
  display: flex; flex-direction: column; padding: 20px;
  animation: fadeIn .2s both;
}
.mobile-menu__close {
  align-self: flex-end; width: 44px; height: 44px;
  background: none; border: 0; color: var(--color-bg);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
.mobile-menu nav button {
  text-align: left; background: none; border: 0;
  border-bottom: 2px solid color-mix(in srgb, #f3f2f2 25%, transparent);
  color: var(--color-bg);
  font-family: var(--font-heading); font-weight: 800; font-size: 30px;
  letter-spacing: -0.02em; padding: 18px 0; cursor: pointer; min-height: 44px;
}
.mobile-menu__cta { margin-top: 32px; justify-content: flex-start; font-size: 15px; padding: 18px 20px; min-height: 44px; }
.mobile-menu__meta {
  margin-top: auto; padding-top: 24px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: .6;
}

@media (max-width: 900px) {
  .site-nav { display: none; }
  .burger { display: flex; }
}

/* --- Hero -------------------------------------------------------------- */
.hero { padding: clamp(40px, 6vw, 88px) var(--gutter) 0; }
.hero__grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.hero__kicker { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(20px, 3vw, 34px); }
.hero h1 {
  font-size: clamp(42px, 7.2vw, 102px); line-height: .96; letter-spacing: -0.038em;
  margin: 0 0 clamp(20px, 2.4vw, 30px); max-width: 13ch;
}
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero h1 .line > span { display: block; }
.hero h1 .line:nth-child(2) > span { animation-delay: .09s; }
.hero h1 .line:nth-child(3) > span { animation-delay: .18s; color: var(--color-accent); }
.hero__lede {
  font-size: clamp(16px, 1.5vw, 21px); line-height: 1.5; max-width: 46ch;
  margin: 0 0 clamp(26px, 3vw, 38px); animation-delay: .34s;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; animation-delay: .44s; }
.hero__actions .btn { font-size: 15px; padding: 16px 24px; min-height: 48px; }
.hero__actions .btn-primary { gap: 14px; }

/* --- Stat row ---------------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 2px;
  margin-top: clamp(36px, 5vw, 60px);
  border-top: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
  animation-delay: .54s;
}
.stat { background: var(--color-bg); outline: 1px solid var(--color-divider); padding: 18px 16px 16px; }
.stat__n {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.03em; line-height: 1;
}
.stat__l { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .6; margin-top: 6px; }

/* --- Live map panel ---------------------------------------------------- */
.map-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 2px solid var(--color-divider); padding-bottom: 10px; margin-bottom: 18px;
}
.map-head__live {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: .6;
}
.map-head__live .live-dot { width: 7px; height: 7px; }
.map-frame { border: 2px solid var(--color-text); background: var(--color-bg); box-shadow: var(--shadow-md); }
.map-frame iframe { display: block; width: 100%; height: clamp(340px, 44vw, 500px); border: 0; }
.map-note { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: .55; margin-top: 12px; }

/* --- Ticker ------------------------------------------------------------ */
.ticker {
  margin-top: clamp(44px, 6vw, 80px);
  border-top: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
  background: var(--color-text); color: var(--color-bg);
  overflow: hidden; padding: 11px 0;
}
.ticker__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.ticker__run {
  display: flex; gap: 44px; padding-right: 44px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}

/* --- Section heads ----------------------------------------------------- */
.section-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.section-head h2 { font-size: clamp(30px, 4.6vw, 64px); letter-spacing: -0.035em; margin: 0; max-width: 18ch; }
.section-head--ruled { border-bottom: 2px solid var(--color-divider); padding-bottom: 16px; gap: 16px; }

/* --- Channel cards ---------------------------------------------------- */
.channel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 2px; border: 2px solid var(--color-divider);
}
.channel {
  text-align: left; background: var(--color-bg); border: 0;
  outline: 1px solid var(--color-divider); cursor: pointer;
  padding: clamp(22px, 2.6vw, 34px);
  display: flex; flex-direction: column; gap: 12px; min-height: 260px;
  transition: background .25s ease, transform .25s ease;
  color: var(--color-text);
}
.channel:hover { background: var(--color-accent-100); transform: translateY(-4px); }
.channel__kicker {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--channel-color, var(--color-accent-700));
}
.channel__title {
  display: block; margin-top: 6px;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(21px, 2.2vw, 28px); letter-spacing: -0.025em; line-height: 1.05;
}
.channel__body { display: block; font-size: 14px; line-height: 1.55; opacity: .78; }
.channel__more {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.08em;
  color: var(--channel-color, var(--color-accent-700));
}
.channel__more .arrow { width: 20px; }

/* --- Coverage --------------------------------------------------------- */
.split {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.coverage h2 { font-size: clamp(30px, 4.4vw, 60px); letter-spacing: -0.035em; margin: 0 0 20px; max-width: 16ch; }
.coverage p { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; max-width: 44ch; opacity: .8; }
.operators {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 2px;
  border: 2px solid var(--color-divider); margin-top: 28px;
}
.operator { background: var(--color-neutral-100); outline: 1px solid var(--color-divider); padding: 16px 14px; }
.operator__n { font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.operator__s { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .55; margin-top: 4px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

.routing__head {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: .6;
  border-bottom: 2px solid var(--color-divider); padding-bottom: 12px;
}
.step {
  display: flex; gap: clamp(14px, 2vw, 28px); align-items: baseline;
  padding: clamp(18px, 2vw, 24px) 0; border-bottom: 2px solid var(--color-divider);
}
.step__no {
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: 0.1em; color: var(--color-accent-700); flex: 0 0 auto;
}
.step__title {
  display: block; font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(18px, 1.9vw, 23px); letter-spacing: -0.02em; line-height: 1.15;
}
.step__body { display: block; font-size: 14px; line-height: 1.55; opacity: .78; margin-top: 7px; max-width: 44ch; }

/* --- Clients + case studies ------------------------------------------- */
.client-carousel {
  border: 2px solid var(--color-divider);
  overflow: hidden;
}
.client-track {
  display: flex; width: max-content;
  animation: client-marquee var(--client-marquee-time, 70s) linear infinite;
}
.client-carousel:hover .client-track,
.client-carousel:focus-within .client-track { animation-play-state: paused; }
.client {
  flex: 0 0 clamp(132px, 20vw, 170px);
  background: var(--color-bg); border-right: 2px solid var(--color-divider);
  height: 112px; padding: 14px;
  display: grid; place-items: center;
  text-decoration: none;
}
/* Tiles that link out. Hovering one also pauses the marquee, so the target
   holds still long enough to click. The outline is drawn inside the tile
   because the carousel clips anything past its edge. */
a.client:hover { background: var(--color-surface); }
a.client:focus-visible { background: var(--color-surface); outline-offset: -2px; }
/* min-*: 0 matters — as a grid item the logo's automatic minimum size is its
   intrinsic size, which beats max-height and pushes tall logos out of the tile. */
.client img {
  max-height: 100%; max-width: 100%;
  min-height: 0; min-width: 0;
  object-fit: contain;
}
@keyframes client-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
/* No auto-scroll: the strip becomes a plain horizontal scroller and the
   duplicate run of logos is dropped. Must stay after the rules above so it
   wins on source order. */
@media (prefers-reduced-motion: reduce) {
  .client-carousel { overflow-x: auto; }
  .client-track { animation: none; }
  .client[aria-hidden="true"] { display: none; }
}
.case-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 2vw, 24px); margin-top: clamp(28px, 4vw, 44px);
}
.case { padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 10px; }
.case__n {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(36px, 4vw, 52px); letter-spacing: -0.04em; line-height: 1;
}
.case__body { font-size: 14px; line-height: 1.55; opacity: .8; }
.case__meta {
  margin-top: auto; padding-top: 14px; border-top: 2px solid var(--color-divider);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .55;
}
.card-kicker { color: var(--color-accent-700); }

/* --- Named clients ----------------------------------------------------- */
/* The marquee above carries client names in alt text only, which reads as
   nothing to a crawler and scrolls past a human. This repeats them as text. */
.clients-detail {
  display: grid; gap: clamp(20px, 2.6vw, 30px);
  margin-top: clamp(26px, 3.4vw, 40px);
}
.clients-lede { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; opacity: .82; max-width: 74ch; margin: 0; }

/* --- Brand marks (shared: homepage feature + campaign page) ------------ */
.brand-marks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 2px; border: 2px solid var(--color-divider);
}
.brand-mark {
  background: var(--color-bg); outline: 1px solid var(--color-divider);
  padding: clamp(18px, 2.4vw, 28px);
  display: grid; gap: 14px; justify-items: center; align-content: center;
}
.brand-mark img { max-height: 84px; width: auto; object-fit: contain; }
.brand-mark__label {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: .6; text-align: center; line-height: 1.5;
}
.brand-mark__label a { color: inherit; }
.brand-mark__label a:hover { color: var(--color-accent); }

/* --- Featured client campaign (homepage) ------------------------------- */
.client-feature {
  border: 2px solid var(--color-text);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 2px; background: var(--color-divider);
}
.client-feature__body {
  background: var(--color-bg); padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.client-feature__body h3 {
  font-size: clamp(24px, 3vw, 38px); letter-spacing: -0.03em; line-height: 1.05;
  margin: 0; max-width: 20ch;
}
.client-feature__body p { font-size: 15px; line-height: 1.6; opacity: .82; margin: 0; max-width: 54ch; }
.client-feature__marks { background: var(--color-neutral-100); padding: clamp(20px, 2.6vw, 32px); display: grid; align-content: center; }

/* --- What we do: page head + accordion ------------------------------- */
.page-head { padding: clamp(40px, 6vw, 86px) var(--gutter) clamp(32px, 4vw, 54px); }
.page-head h1 {
  font-size: clamp(40px, 6.6vw, 92px); line-height: .98; letter-spacing: -0.038em;
  margin: 0 0 24px; max-width: 15ch;
}
.page-head .kicker { display: block; margin-bottom: 20px; }
.page-head p { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.5; max-width: 52ch; opacity: .82; animation-delay: .15s; }

.services { padding: 0 var(--gutter); }
.svc { border-bottom: 2px solid var(--color-divider); }
.svc__toggle {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: clamp(20px, 2.6vw, 32px) 0;
  display: flex; align-items: center; gap: clamp(14px, 2.5vw, 32px);
  min-height: 64px; color: var(--color-text);
  transition: opacity .2s ease;
}
.svc__toggle:hover { opacity: .62; }
.svc__no { font-size: 11px; letter-spacing: 0.1em; color: var(--color-accent-700); flex: 0 0 auto; width: 34px; }
.svc__title {
  flex: 1; font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(22px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1.05;
}
.svc__tag { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .55; flex: 0 0 auto; }
.svc__icon {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-divider);
  font-family: var(--font-heading); font-weight: 800; font-size: 18px; line-height: 1;
  transition: transform .3s ease, background .2s ease, color .2s ease;
}
.svc__panel { display: none; }
.svc.is-open .svc__panel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 3vw, 48px); padding: 0 0 clamp(28px, 3.4vw, 44px);
  animation: riseSm .45s both;
}
.svc.is-open .svc__icon { transform: rotate(135deg); background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.svc__blurb { font-size: clamp(15px, 1.4vw, 19px); line-height: 1.55; margin: 0; max-width: 46ch; opacity: .85; }
.svc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; }
.svc__list li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--color-divider);
  font-size: 14px; line-height: 1.5;
}
.svc__list li::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 auto;
  background: var(--color-accent); transform: translateY(-1px);
}
@media (max-width: 900px) { .svc__tag { display: none; } }

/* --- Compare table --------------------------------------------------- */
.compare h2 { font-size: clamp(28px, 4vw, 52px); letter-spacing: -0.035em; margin: 0 0 8px; }
.compare__lede { font-size: 16px; opacity: .75; margin: 0 0 clamp(22px, 3vw, 34px); max-width: 50ch; }
.table-scroll { overflow-x: auto; border: 2px solid var(--color-divider); background: var(--color-bg); }
.table-scroll .table { min-width: 640px; }
.table td:first-child { font-family: var(--font-heading); font-weight: 800; }
.table td:last-child { font-variant-numeric: tabular-nums; }
.usecases { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(24px, 3vw, 36px); }
.usecases .tag { font-size: 12px; }

/* --- Quote ------------------------------------------------------------ */
.quote {
  background: var(--brand-purple); color: var(--color-bg);
  border-top: 2px solid var(--color-text);
  padding: var(--section-y) var(--gutter);
}
.quote__grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.quote .kicker { color: inherit; opacity: .8; display: block; margin-bottom: 20px; }
.quote h2 {
  font-size: clamp(36px, 5.6vw, 84px); line-height: .98; letter-spacing: -0.04em;
  margin: 0 0 22px; max-width: 12ch;
}
.quote__lede { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; max-width: 40ch; opacity: .92; }
.quote__contact {
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 2px solid color-mix(in srgb, #f3f2f2 45%, transparent);
  padding-top: 20px; display: grid; gap: 6px; font-size: 15px;
}
.quote__contact a { color: var(--color-bg); }
.quote__contact a:hover { color: var(--brand-green); }
.quote__contact a:first-child {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.02em;
}

.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px; }
.form label, .form__legend {
  display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: .8; margin-bottom: 6px;
}
.form__legend { margin-bottom: 10px; }
.form input {
  width: 100%; background: transparent; border: 0;
  border-bottom: 2px solid color-mix(in srgb, #f3f2f2 55%, transparent);
  color: var(--color-bg); font-size: 17px; padding: 10px 0; min-height: 44px; outline: none;
}
.form input:focus { border-bottom-color: #f3f2f2; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  cursor: pointer; min-height: 44px; padding: 11px 16px;
  font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.06em;
  border: 2px solid color-mix(in srgb, #f3f2f2 55%, transparent);
  background: transparent; color: var(--color-bg);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover { border-color: #f3f2f2; }
.chip[aria-pressed="true"], .chip[aria-checked="true"] {
  background: #f3f2f2; border-color: #f3f2f2; color: var(--color-accent);
}
.form__error { border: 2px solid var(--color-bg); padding: 12px 14px; font-size: 13px; line-height: 1.45; }
.form__submit {
  background: var(--brand-green); color: var(--color-text); border: 0;
  padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: 0.04em;
  cursor: pointer; min-height: 52px; transition: transform .2s ease;
}
.form__submit:hover { transform: translateY(-2px); }
.form__submit .arrow { width: 22px; }
.form__fineprint { font-size: 12px; line-height: 1.5; opacity: .8; margin: 0; }

.thanks { border: 2px solid var(--color-bg); padding: clamp(28px, 4vw, 48px); animation: riseSm .5s both; }
.thanks__title {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 12px;
}
.thanks p { font-size: 15px; line-height: 1.55; opacity: .9; margin: 0 0 20px; }
.thanks button {
  background: none; border: 2px solid var(--color-bg); color: var(--color-bg);
  font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.08em;
  padding: 12px 18px; cursor: pointer; min-height: 44px;
}

/* --- Client pages: nav as real links ----------------------------------- */
/* index.html navigates in JS off <button>; the standalone client pages use
   real <a href> so crawlers can follow them. Both share the same look. */
.brand { text-decoration: none; }
a.nav-link { display: inline-flex; align-items: center; text-decoration: none; }
.mobile-menu nav a {
  display: block; text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, #f3f2f2 25%, transparent);
  color: var(--color-bg);
  font-family: var(--font-heading); font-weight: 800; font-size: 30px;
  letter-spacing: -0.02em; padding: 18px 0; min-height: 44px;
}
.mobile-menu nav a:hover { color: var(--color-bg); }

.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: .6; margin-bottom: clamp(18px, 2.4vw, 26px);
}
.crumb a { color: inherit; }
.crumb a:hover { color: var(--color-accent); }

/* --- Client pages: content -------------------------------------------- */
.prose-shell { max-width: 96ch; }
.section-lede { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; opacity: .82; max-width: 60ch; margin: 0 0 clamp(22px, 3vw, 32px); }
.subhead {
  font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -0.025em; margin: 0 0 16px;
  padding-bottom: 14px; border-bottom: 2px solid var(--color-divider);
}
.stack { display: grid; gap: clamp(30px, 4vw, 52px); }

.legal-note {
  border-left: 4px solid var(--color-accent);
  background: var(--color-neutral-100);
  padding: clamp(16px, 2vw, 24px);
  font-size: 14px; line-height: 1.6;
  display: grid; gap: 10px;
}
.legal-note strong { font-family: var(--font-heading); font-weight: 800; }
.legal-note p { margin: 0; }

/* Outbound references — the URL is shown as text so it reads as a citation
   to a human reviewer as well as a link to a crawler. */
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.link-list li { border-top: 1px solid var(--color-divider); }
.link-list li:last-child { border-bottom: 1px solid var(--color-divider); }
.link-list a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  padding: 15px 0; min-height: 44px; color: var(--color-text);
}
.link-list a:hover .link-list__t { color: var(--color-accent); }
.link-list__t { font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.link-list__u { font-size: 12px; opacity: .55; word-break: break-all; }

/* --- Terms page: numbered clauses -------------------------------------- */
/* Numbers are literal markup, not CSS counters, so the clause numbering
   survives the section headings that break the list up. */
.clauses { list-style: none; margin: 0; padding: 0; }
.clauses > li {
  display: grid; grid-template-columns: 46px 1fr; gap: clamp(10px, 2vw, 20px);
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 2px solid var(--color-divider);
  font-size: 15px; line-height: 1.6;
}
.clauses__no {
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  letter-spacing: 0.06em; color: var(--color-accent-700); padding-top: 5px;
}
.clauses p { margin: 0 0 var(--space-3); }
.clauses p:last-child { margin-bottom: 0; }
.clauses h3 { font-size: 15px; letter-spacing: 0; margin: 0 0 8px; }

.subclauses { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 2px; }
.subclauses li {
  display: grid; grid-template-columns: 44px 1fr; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--color-divider);
  font-size: 14px; line-height: 1.55;
}
.subclauses__no { font-family: var(--font-heading); font-weight: 800; font-size: 12px; color: var(--color-accent-700); }

.clause-head {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-700); margin: clamp(30px, 4vw, 44px) 0 0;
  padding-bottom: 12px; border-bottom: 2px solid var(--color-text);
}

/* --- Footer ----------------------------------------------------------- */
.site-footer {
  background: var(--color-text); color: var(--color-bg);
  padding: clamp(44px, 6vw, 80px) var(--gutter) 28px;
}
.site-footer__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 52px);
  border-bottom: 2px solid color-mix(in srgb, #f3f2f2 30%, transparent);
}
.footer-logo { background: var(--color-bg); padding: 14px 16px; display: inline-block; }
.footer-logo img { height: clamp(40px, 5vw, 58px); width: auto; mix-blend-mode: multiply; }
.site-footer p { font-size: 14px; line-height: 1.55; opacity: .75; margin-top: 18px; max-width: 32ch; }
.footer-head { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: .55; margin-bottom: 14px; }
.footer-list { display: grid; gap: 9px; font-size: 14px; }
.footer-list a, .footer-list button { color: var(--color-bg); opacity: .8; font-size: 14px; }
.footer-list button {
  text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
}
.footer-list a:hover, .footer-list button:hover { opacity: 1; color: var(--color-accent-400); }
.footer-list span { opacity: .6; }
.site-footer__cta { justify-content: space-between; width: 100%; font-size: 14px; padding: 15px 18px; min-height: 48px; }
.site-footer__legal {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  padding-top: 20px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: .5;
}