/*
Theme Name: Stinger Studios
Theme URI: https://stingerstudios.com
Description: Stinger Studios custom theme by Meredith Ragsdale. Hand-coded PHP templates, no page builder.
Author: Stinger Studios
Author URI: https://stingerstudios.com
Version: 11.7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: stinger-studios
*/

/* ==========================================================
   Tokens
   ========================================================== */
:root {
  --honey: #febb1a;
  --honey-wash: #f4e6b8;
  --honey-deep: #a37d0a;
  --cream: #faf6ec;
  --cream-warm: #f4eee0;
  --ink: #1a1a1a;
  --ink-black: #000;
  --ink-mute: #6a6155;
  --rule: #ece6d6;
  --font-bee: "bee", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pad-x: clamp(24px, 5vw, 56px);
  --max-w: 1100px;
}

/* ==========================================================
   Base
   ========================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  /* Double ring: honey inner + ink outer, so the indicator hits 3:1
     against every background mood (honey alone fails on cream). */
  outline: 3px solid var(--honey);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--ink);
  border-radius: 0;
}
.screen-reader-text, .sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  width: auto; height: auto; clip: auto; white-space: normal;
  background: var(--ink); color: var(--cream);
  padding: 10px 16px; border-radius: 0; font-size: 14px;
}
.wrap { max-width: var(--max-w); margin: 0 auto; }

/* ==========================================================
   Header (ported from coming-soon: wordmark to bee crossfade)
   ========================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px var(--pad-x);
  background: transparent;
  transition: background-color 300ms ease, backdrop-filter 300ms ease, box-shadow 300ms ease;
}
.site-header.scrolled {
  background: rgba(250, 246, 236, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.site-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
}
.brand-lockup {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.brand-bee {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 60px;
  margin-right: 13px;
  overflow: hidden;
  opacity: 1;
  transition: opacity 300ms ease, max-width 450ms var(--ease), margin-right 450ms var(--ease);
}
.brand-bee svg {
  height: 38px;
  width: auto;
  display: block;
  /* Nudged UP a few pixels so the bee's optical center aligns with the
     letter caps of the wordmark. The bee artwork has more weight toward
     the bottom of its viewBox (large hex + body), so pure flex-center
     leaves it visually low next to STINGER STUDIOS. */
  transform: translateY(-3px);
}
/* Give .brand-bee a bit of headroom so the nudged SVG doesn't get
   clipped by overflow: hidden (needed for the max-width collapse over
   the dark hero). Increasing padding accommodates the translate. */
.brand-bee { padding-top: 3px; padding-bottom: 3px; }
/* Over the dark hero the natural-color bee stays hidden (and takes no
   space) until the cream header background arrives on scroll. */
body:not(.no-hero) .site-header:not(.scrolled) .brand-bee {
  opacity: 0;
  max-width: 0;
  margin-right: 0;
}
.brand-word {
  font-family: var(--font-bee);
  /* Desktop cap at 40px per Meredith 2026-08-04. line-height:1 collapses
     the wordmark's box to actual glyph height so the flex `align-items:
     center` genuinely centers the bee alongside it (rather than centering
     the bee against a taller line-box). */
  font-size: clamp(30px, 2.8vw, 40px);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  max-width: 460px;
  transition: color 300ms ease, opacity 160ms linear, max-width 450ms var(--ease);
}
.site-header.scrolled .brand-word { color: var(--ink); }
/* .brand-collapsed rule retired 2026-08-04 — wordmark stays visible in
   all states. Class no longer toggled from JS either. Left as a comment
   in case a future variant wants to opt back into the crossfade. */
.header-meta {
  color: var(--cream);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 300ms ease;
  white-space: nowrap;
}
.site-header.scrolled .header-meta { color: var(--ink-mute); }

/* Header navigation */
.header-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.header-nav-list { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 34px); list-style: none; }
.header-nav-list a {
  color: var(--cream);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 300ms ease, border-color 160ms ease;
  white-space: nowrap;
}
.header-nav-list a:hover { border-bottom-color: var(--honey); }
.site-header.scrolled .header-nav-list a { color: var(--ink); }
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 4px;
  flex-direction: column;
  gap: 6px;
}
.nav-toggle-bar {
  display: block;
  width: 26px; height: 2px;
  background: var(--cream);
  transition: background 300ms ease, transform 200ms ease;
}
.site-header.scrolled .nav-toggle-bar,
.site-header.nav-open .nav-toggle-bar { background: var(--ink); }
.site-header.nav-open .nav-toggle-bar:first-child { transform: translateY(4px) rotate(45deg); }
.site-header.nav-open .nav-toggle-bar:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .header-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(250, 246, 236, 0.98);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    padding: 18px var(--pad-x) 26px;
  }
  .site-header.nav-open { background: rgba(250, 246, 236, 0.98); }
  .site-header.nav-open .brand-word { color: var(--ink); }
  .site-header.nav-open .header-nav { display: block; }
  .header-nav-list { flex-direction: column; align-items: flex-start; gap: 4px; }
  .header-nav-list a { color: var(--ink); font-size: 16px; padding: 10px 0; display: block; }
  .site-header.scrolled .header-nav-list a { color: var(--ink); }
  .header-nav .header-meta { display: none; }
}

/* ==========================================================
   Hero (locked)
   ========================================================== */
.hero {
  position: relative;
  width: 100%;
  min-height: 72vh;
  min-height: 72svh;
  overflow: hidden;
  background: var(--ink-black);
}
.hero-video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  z-index: 1;
}
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 28%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.85) 100%);
  z-index: 2;
}
.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 72vh;
  min-height: 72svh;
  padding: 110px var(--pad-x) 56px;
  display: grid;
  grid-template-rows: 1fr auto;
  max-width: var(--max-w);
  margin: 0 auto;
}
.hero-middle { display: flex; align-items: center; justify-content: flex-start; }
.hero-headline {
  font-family: var(--font-bee);
  font-size: clamp(40px, 7.4vw, 118px);
  font-weight: 600;
  line-height: 0.95;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(18px);
  animation: riseIn 700ms var(--ease) 500ms forwards;
}
.hero-headline .accent { color: var(--honey); }
.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}
.hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--cream);
  max-width: 460px;
  opacity: 0;
  animation: subIn 500ms ease-out 1000ms forwards;
}
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  opacity: 0;
  animation: ctaIn 500ms ease-out 1300ms forwards;
}

/* Hero video pause/play toggle — WCAG 2.2.2 requires a control to stop
   auto-playing motion content. Tucked in the bottom-left corner of the hero,
   nearly invisible at rest, gets more visible on hover or keyboard focus so
   sighted keyboard users can find it. */
.hero-video-toggle {
  position: absolute;
  left: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 4;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(250, 246, 236, 0.32);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.28);
  color: var(--cream);
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.hero-video-toggle:hover,
.hero-video-toggle:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(250, 246, 236, 0.7);
  transform: scale(1.08);
}
.hero-video-toggle:focus-visible {
  outline: 2px solid var(--honey);
  outline-offset: 2px;
}
.hero-video-icon {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
/* Swap which icon shows based on the state attribute set by main.js. */
.hero-video-toggle .hero-video-icon-play { display: none; }
.hero-video-toggle[data-paused="true"] .hero-video-icon-pause { display: none; }
.hero-video-toggle[data-paused="true"] .hero-video-icon-play { display: inline; }
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 16px 30px;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 140ms, background 140ms, color 140ms;
  white-space: nowrap;
}
.btn-honey { background: var(--honey); color: var(--ink); }
.btn-honey:hover { background: #ffc83d; transform: translateY(-1px); }
.btn-ghost { border: 1px solid rgba(250,246,236,0.5); color: var(--cream); }
.btn-ghost:hover { border-color: var(--cream); transform: translateY(-1px); }
.hero-trust {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250,246,236,0.85);
  font-weight: 500;
}
.hero-trust .star { color: var(--honey); }

@keyframes riseIn { to { opacity: 1; transform: translateY(0); } }
@keyframes subIn { to { opacity: 0.78; } }
@keyframes ctaIn { to { opacity: 1; } }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* ==========================================================
   Sections (cream body)
   ========================================================== */
.band { padding: clamp(64px, 9vw, 120px) var(--pad-x); }
.band-warm { background: var(--cream-warm); }
.eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 18px;
}
.band-heading {
  font-family: var(--font-bee);
  font-size: clamp(44px, 7vw, 92px);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 600;
  margin: 0 0 36px;
}
.band-heading .uline {
  background: linear-gradient(180deg, transparent 72%, var(--honey) 72%, var(--honey) 90%, transparent 90%);
  padding: 0 4px;
}

/* Intro manifesto */
/* Explicit font-family with !important so plugins (AIOSEO, Typekit
   auto-CSS, etc.) can't sneak a serif in on archive templates. Same
   family on both intro-lede and intro-follow — Work and Services were
   rendering with a different font than About and Contact until this
   was forced. */
.intro-lede {
  font-family: var(--font-body) !important;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.35;
  max-width: 900px;
  color: var(--ink);
  font-weight: 300;
}
.intro-lede strong { font-weight: 600; }
.intro-follow {
  font-family: var(--font-body) !important;
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.65;
  max-width: 680px;
  color: var(--ink-mute);
}

/* ==========================================================
   Work ledger (services woven into real work, no cards)
   ========================================================== */
.ledger { border-top: 1px solid var(--rule); }
.ledger-row {
  display: grid;
  grid-template-columns: 64px 1.15fr 1.5fr 0.9fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(24px, 3.4vw, 40px) 0;
  border-bottom: 1px solid var(--rule);
}
.ledger-num {
  font-family: var(--font-bee);
  font-size: clamp(26px, 2.8vw, 38px);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
}
.ledger-client {
  font-family: var(--font-bee);
  font-size: clamp(20px, 2.4vw, 28px);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-weight: 600;
  line-height: 1.1;
}
.ledger-client small {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--ink-mute);
  margin-top: 7px;
}
.ledger-body { font-size: 16px; line-height: 1.6; color: #3d382f; }
.ledger-proof {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
}
.ledger-proof .stat {
  display: block;
  font-family: var(--font-bee);
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 4px;
}
/* Text-decoration underline (rather than a linear-gradient background)
   guarantees the highlight is exactly text-width — the gradient version
   was drawing to the element's inline box, which could visually extend
   past the letters. Thick + negative offset overlaps the bottom of each
   letter, keeping the "highlighter" look. */
.ledger-proof .stat .hl {
  background: none;
  padding: 0;
  text-decoration-line: underline;
  text-decoration-color: var(--honey);
  text-decoration-thickness: 0.28em;
  text-underline-offset: -0.12em;
  text-decoration-skip-ink: none;
}
.ledger-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 0; align-items: baseline; }
.tag {
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  white-space: nowrap;
}
/* Middle-dot separator between tags. Ink-mute color for contrast
   (honey on cream fails WCAG and violates the "gold never text on
   cream" rule). Slightly larger dot for visibility. */
.ledger-tags .tag + .tag::before,
.client-tags .tag + .tag::before {
  content: "·";
  display: inline-block;
  color: var(--ink-mute);
  margin: 0 10px;
  font-weight: 700;
  font-size: 1.4em;
  line-height: 0;
  transform: translateY(2px);
}
.tag-lead {
  /* Lead discipline used to get a honey-wash bubble. Retired with the
     rest of the pill treatment; leaving the class as a no-op so existing
     markup doesn't break. */
  color: var(--ink-mute);
}
.more-brands { margin-top: 34px; font-size: 15px; line-height: 1.7; color: var(--ink-mute); max-width: 760px; }
.more-brands strong { color: var(--ink); font-weight: 500; }

/* Client roster band — typographic list of every client, in Bee font
   all-caps, centered on a cream band. Middle-dot separators in honey.
   Wraps naturally on narrow viewports. No logos, no cards. */
.client-roster {
  margin-top: 24px;
  text-align: center;
  font-family: var(--font-bee);
  text-transform: uppercase;
  font-weight: 600;
  /* Bee font needs to stay readable on mobile; low end lifted to 32px
     so the roster reads with the same weight as headlines elsewhere.
     Desktop cap raised to 50px per Meredith 2026-08-04 — gives the
     roster row real presence at wider viewports. */
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--ink);
  max-width: none;
}
.client-roster .roster-name {
  display: inline;
  white-space: nowrap;
}
.client-roster .roster-dot {
  color: var(--honey);
  margin: 0 clamp(10px, 1.6vw, 22px);
  font-weight: 900;
  display: inline-block;
  transform: translateY(-2px);
}
.client-roster-cta {
  margin-top: 32px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
}
.client-roster-cta a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--honey);
  padding-bottom: 3px;
  transition: border-color 200ms ease;
}
.client-roster-cta a:hover,
.client-roster-cta a:focus-visible {
  border-bottom-color: var(--ink);
  outline: none;
}
@media (max-width: 560px) {
  .client-roster .roster-dot { margin: 0 8px; }
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================
   Advertising band
   ========================================================== */
.adv-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.adv-copy p { font-size: 17px; line-height: 1.7; color: #3d382f; margin: 0 0 18px; max-width: 520px; }
.adv-list { list-style: none; border-top: 1px solid var(--rule); }
.adv-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 17px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
}
.adv-list .what { font-weight: 500; }
.adv-list .note { font-size: 13.5px; color: var(--ink-mute); text-align: right; }
.portal-note {
  margin-top: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1.65;
  color: #3d382f;
  max-width: 640px;
}
.portal-note strong { color: var(--ink); }

/* ==========================================================
   Practice index (type ledger, not cards)
   ========================================================== */
.practices { list-style: none; border-top: 1px solid var(--rule); max-width: 860px; }
.practices li {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding: 19px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.practices .p-name {
  font-family: var(--font-bee);
  font-size: clamp(20px, 1.8vw, 24px);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}
.practices .p-name .new {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.1em;
  background: var(--honey);
  color: var(--ink);
  padding: 2px 7px;
  border-radius: 0;
  margin-left: 8px;
  vertical-align: 2px;
  font-weight: 700;
}
.practices .p-desc { font-size: 15.5px; line-height: 1.55; color: #3d382f; }

/* ==========================================================
   CTA
   ========================================================== */
.cta-band { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; max-width: var(--max-w); margin: 0 auto; }
.cta-head {
  font-family: var(--font-bee);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 600;
  margin: 0 0 8px;
}
.cta-head .uline {
  background: linear-gradient(180deg, transparent 72%, var(--honey) 72%, var(--honey) 92%, transparent 92%);
  padding: 0 4px;
}
.cta-sub { font-size: 16px; color: var(--ink-mute); margin: 0; }
.cta-btn {
  background: var(--ink);
  color: var(--cream);
  padding: 15px 26px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 150ms;
  white-space: nowrap;
}
.cta-btn:hover { background: var(--ink-black); }

/* ==========================================================
   Footer (dark, SEO build-out + reviews)
   ========================================================== */
.site-footer { background: var(--ink-black); color: var(--cream); }
.foot-reviews { padding: clamp(56px, 7vw, 88px) var(--pad-x) 8px; }
.foot-reviews-inner { max-width: var(--max-w); margin: 0 auto; }
.foot-eyebrow {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(250,246,236,0.55);
  margin: 0 0 14px;
}
.reviews-summary { display: flex; align-items: baseline; gap: 10px; margin-bottom: 22px; }
.scs-stars { color: var(--honey); letter-spacing: 2px; font-size: 17px; }
.scs-star-empty { color: rgba(250,246,236,0.25); }
.reviews-score { font-family: var(--font-bee); font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; }
.reviews-count { font-size: clamp(12px, 1.4vw, 14px); color: rgba(250,246,236,0.6); }
.rot { position: relative; min-height: 150px; }
.rot-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
.rot-slide.is-active { opacity: 1; pointer-events: auto; position: relative; }
.rot-quote {
  /* Reviews read oversized at 18px on mobile; low end trimmed to 15px so
     the quote sits comfortably in a phone column. */
  font-size: clamp(15px, 1.9vw, 20px);
  line-height: 1.55;
  font-weight: 300;
  max-width: 860px;
  color: var(--cream);
}
.rot-author { margin-top: 14px; font-size: 13.5px; color: rgba(250,246,236,0.6); letter-spacing: 0.04em; }
.reviews-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  color: var(--honey);
  text-decoration: none;
  border-bottom: 1px solid rgba(254,187,26,0.4);
}
.reviews-link:hover { border-color: var(--honey); }

.foot-main {
  padding: clamp(48px, 6vw, 72px) var(--pad-x);
  border-top: 1px solid rgba(250,246,236,0.12);
}
/* Only space .foot-main when the reviews rotator sits above it. As the
   footer's first child its top margin would collapse out through the
   footer, opening a cream gap on pages where the rotator is suppressed
   (Work, Contact). */
.foot-reviews + .foot-main { margin-top: clamp(40px, 5vw, 64px); }
.foot-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
}
.foot-brand .foot-wordmark {
  font-size: 15px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cream);
  text-decoration: none;
}
.foot-brand p {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(250,246,236,0.65);
  max-width: 300px;
}
.foot-col h2 {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(250,246,236,0.5);
  margin: 0 0 16px;
}
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 4px; }
/* Inline-block + vertical padding gives every nav link a proper tap
   target (min-height ~40px) without changing the visual layout. Meets
   WCAG 2.5.8 target-size guidance for touch. */
.foot-col a {
  display: inline-block;
  padding: 8px 0;
  font-size: 15px;
  color: rgba(250,246,236,0.85);
  text-decoration: none;
  transition: color 140ms;
}
.foot-col a:hover { color: var(--honey); }
.foot-contact address { font-style: normal; font-size: 14.5px; line-height: 1.8; color: rgba(250,246,236,0.85); }
.foot-contact a { color: rgba(250,246,236,0.85); text-decoration: none; }
.foot-contact a:hover { color: var(--honey); }
.foot-social { margin-top: 14px; display: flex; gap: 16px; }
.foot-social a { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.foot-legal {
  border-top: 1px solid rgba(250,246,236,0.12);
  padding: 22px var(--pad-x);
}
.foot-legal-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(250,246,236,0.55);
  text-transform: uppercase;
}

/* ==========================================================
   Proof strip (count-up stats under hero)
   ========================================================== */
.proof-strip { padding: clamp(48px, 6vw, 80px) var(--pad-x); border-bottom: 1px solid var(--rule); }
.proof-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 3vw, 48px);
}
.proof-item .proof-num {
  font-family: var(--font-bee);
  font-size: clamp(48px, 6.5vw, 88px);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  display: block;
}
.proof-item .proof-num .hl { background: linear-gradient(180deg, transparent 72%, var(--honey) 72%, var(--honey) 92%, transparent 92%); padding: 0 3px; }
.proof-item .proof-label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
}

/* ==========================================================
   Featured case studies (large type-led features)
   ========================================================== */
.feature-case {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding: clamp(44px, 6vw, 72px) 0;
  border-bottom: 1px solid var(--rule);
}
.feature-case:last-of-type { border-bottom: 0; }
.fc-kicker {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
  margin: 0 0 14px;
}
.fc-client {
  font-family: var(--font-bee);
  font-size: clamp(40px, 5.6vw, 72px);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 0.98;
  margin: 0 0 18px;
}
.fc-outcome { font-size: clamp(17px, 1.8vw, 20px); line-height: 1.6; color: #3d382f; max-width: 520px; margin: 0 0 22px; }
.fc-link {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--honey);
  padding-bottom: 3px;
}
.fc-link:hover { color: var(--ink-black); }
.fc-stats { display: grid; gap: clamp(20px, 3vw, 36px); }
.fc-stat {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: clamp(22px, 3vw, 34px);
}
.fc-stat .n {
  font-family: var(--font-bee);
  font-size: clamp(52px, 6vw, 84px);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  display: block;
}
.fc-stat .n .hl { background: linear-gradient(180deg, transparent 72%, var(--honey) 72%, var(--honey) 92%, transparent 92%); padding: 0 3px; }
.fc-stat .l {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
}

/* ==========================================================
   Process strip
   ========================================================== */
.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 56px); }
.process-step { border-top: 3px solid var(--honey); padding-top: 20px; }
.process-step .p-num {
  font-family: var(--font-bee);
  font-size: clamp(34px, 3.8vw, 56px);
  color: var(--ink);
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
  line-height: 1;
}
.process-step h3 {
  font-family: var(--font-bee);
  font-size: clamp(32px, 3.6vw, 50px);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 10px;
  line-height: 1;
}
.process-step p { font-size: 15.5px; line-height: 1.6; color: #3d382f; }

/* ==========================================================
   Supersized ledger overrides (variant B)
   ========================================================== */
.ledger-xl .ledger-row {
  /* Trimmed row padding: shorter rhythm makes the list read as a
     scannable index rather than a long scroll. */
  padding: clamp(28px, 4vw, 56px) 0;
  grid-template-columns: 80px 1.2fr 1.3fr 1fr;
}
/* Row number bumped: bee is a condensed face, so the ledger number
   was reading undersized against the client name at every viewport.
   Lifting the whole clamp brings the "01/02/03" into balance with
   the client-name headline. */
.ledger-xl .ledger-num { font-size: clamp(44px, 5vw, 62px); }
/* Client name bumped: low end lifted from 32 to 42 so the name reads as
   a proper scanning anchor on mobile, not a heading-among-body-text. */
.ledger-xl .ledger-client { font-size: clamp(42px, 5vw, 62px); line-height: 1.02; }
.ledger-xl .ledger-client small { font-size: 14.5px; margin-top: 8px; }
/* Body copy tightened: smaller font + snugger line-height so the
   summary paragraph reads as supporting detail under the strong name. */
.ledger-xl .ledger-body { font-size: 15.5px; line-height: 1.5; }
.ledger-xl .ledger-proof .stat { font-size: clamp(40px, 5vw, 68px); }
.ledger-xl .ledger-proof { font-size: 15px; line-height: 1.5; }

@media (max-width: 900px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-case { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .ledger-xl .ledger-row { grid-template-columns: 48px 1fr; }
  .hero-actions { align-items: flex-start; }
  /* Inline the proof stat with the note on mobile so the pair reads as
     one sentence ("50% of Noah's Arc Welding..."), not a floating
     number stacked above unrelated body text. Bumped from 1.4em → 2.4em
     so the stat reads as the payoff of the row, not as small inline
     text. At 15.5px note × 2.4em = ~37px stat — legible and prominent. */
  .ledger-xl .ledger-proof .stat {
    display: inline;
    font-size: 2.4em;
    line-height: 1;
    font-weight: 600;
    margin: 0;
    margin-right: 6px;
    vertical-align: -0.12em;
  }
  .ledger-xl .ledger-proof {
    font-size: 15.5px;
    line-height: 1.65;
  }
  /* .ledger-more already goes block+top-margin via the global rule
     down in this file — no override needed here. */
}
@media (max-width: 560px) {
  .fc-client { font-size: clamp(36px, 11vw, 52px); }
}

/* ==========================================================
   Inner pages (About, Contact, posts)
   ========================================================== */
.page-shell { padding: 140px var(--pad-x) clamp(64px, 9vw, 110px); }
.page-shell-inner { max-width: 760px; margin: 0 auto; }

/* 404 page — two-column layout: copy on the left, bees photograph
   (natural silhouette on black) on the right, parallel to the
   honeycomb on /portal/. Reuses .page-shell layout underneath. */
.four-oh-four-inner {
  max-width: none;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
}
.four-oh-four-lead {
  margin-top: 18px;
  max-width: 520px;
}
.four-oh-four-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* Bees are a transparent-background PNG on purpose — sits directly on
   the cream so the natural honey-and-black bees float on the page. No
   background fill, no crop, no chrome. */
.four-oh-four-bees {
  margin: 0;
  background: transparent;
}
.four-oh-four-bees img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 900px) {
  .four-oh-four-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .four-oh-four-bees { order: -1; max-width: 480px; }
}
.page-title {
  font-family: var(--font-bee);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.02;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 32px;
}
.page-content { font-size: 17px; line-height: 1.75; }
.page-content p, .page-content ul, .page-content ol { margin-bottom: 20px; }
.page-content ul, .page-content ol { padding-left: 24px; }
.page-content h2, .page-content h3 {
  font-family: var(--font-bee);
  text-transform: uppercase;
  font-weight: 600;
  margin: 36px 0 14px;
  line-height: 1.1;
}
.page-content h2 { font-size: 28px; }
.page-content h3 { font-size: 21px; }
.page-content a { color: var(--ink); text-decoration-color: var(--honey); text-decoration-thickness: 2px; }
.page-content a:hover { color: var(--ink); }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 900px) {
  .ledger-row { grid-template-columns: 40px 1fr; }
  .ledger-body { grid-column: 2; }
  .ledger-proof { grid-column: 2; }
  .adv-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hero-headline { font-size: clamp(48px, 14.5vw, 90px); white-space: normal; }
  /* Bumped from clamp(34,9.5vw,50) → clamp(50,13vw,68) so the page H1
     always reads bigger than the client-name row headlines below it
     (.ledger-client is clamp 42-62 on mobile). H1 has to visually
     dominate its content, not compete with it. */
  .band-heading { font-size: clamp(50px, 13vw, 68px); }
  .practices li { grid-template-columns: 1fr; gap: 6px; }
  .cta-head { font-size: clamp(30px, 9vw, 44px); }
  .rot { min-height: 220px; }
}
@media (max-width: 480px) {
  .header-meta { display: none; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-delay: 0ms !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; }
  .hero-headline, .hero-sub { opacity: 1 !important; transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================
   Story variant (v3): scroll moods + chapters
   ========================================================== */
:root {
  --mood-cream: #faf6ec;
  --mood-warm: #f2ead8;
  --mood-honey: #f6e3b4;
  --mood-amber: #efd489;   /* keeps the page warming instead of resetting to cream */
  --mood-ink: #231f20;     /* the bee logo's ink, not a cold neutral black */
}
/* Each chapter owns its colour, so the room arrives with the section as
   you scroll into it. Previously a scroll observer flipped a class on
   <body> and cross-faded the whole page 900ms after the fact, which
   lurched and could double-fire between neighbouring sections. */
body.story-mode { background: var(--mood-cream); }
.story-band { position: relative; }
.story-band[data-mood="cream"] { background: var(--mood-cream); }
.story-band[data-mood="warm"]  { background: var(--mood-warm); }
.story-band[data-mood="honey"] { background: var(--mood-honey); }
.story-band[data-mood="amber"] { background: var(--mood-amber); }
.story-band[data-mood="ink"]   { background: var(--mood-ink); }


/* ---- Honeycomb seams -------------------------------------------------
   A seam sits on the boundary, painted in the OUTGOING room's colour and
   standing on the INCOMING one, so the comb reads as the room above
   crumbling into the room below. The band is generated (inc/honeycomb.php)
   rather than one of the licensed combs: those are 450x460 corner artworks
   and turn to specks at this scale.
   Sized by HEIGHT, never width. A 100vw-wide comb is a 600px-tall comb. */
.story-seam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(38px, 4.4vw, 60px);
  transform: translateY(-100%);
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.story-seam svg {
  display: block;
  width: 100%;
  height: 100%;
}
.story-seam path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

/* The seam belongs to the room ABOVE it, so it takes that room's ink. */
.story-band[data-mood="warm"]  .story-seam { color: var(--honey-deep); opacity: 0.55; }
.story-band[data-mood="honey"] .story-seam { color: var(--honey-deep); opacity: 0.5; }
.story-band[data-mood="amber"] .story-seam { color: var(--honey-deep); opacity: 0.45; }
/* Standing on amber, so it takes amber's ink like the others rather than
   flaring gold. Keeps all four seams reading as one system. */
.story-band[data-mood="ink"]   .story-seam { color: var(--honey-deep); opacity: 0.5; }

/* ---- Comb accents ----------------------------------------------------
   The licensed SVGs, at the size they were drawn for: big enough to read as
   artwork, bleeding off a corner so they feel like structure rather than a
   sticker. Behind the content, always.

   Each accent is its own clipping window pinned to a corner, and the SVG is
   offset INSIDE that window. This is what buys the bleed without putting
   overflow:hidden on the section, which would eat the seam (the seam sits
   outside the section box, above its top edge). It also means a comb can
   never push the page sideways into a horizontal scrollbar. */
.comb-accent {
  position: absolute;
  width: clamp(200px, 26vw, 380px);
  height: clamp(190px, 24vw, 340px);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}
.comb-accent svg {
  position: absolute;
  display: block;
  height: clamp(230px, 30vw, 420px);
  width: auto;
}
.comb-accent path,
.comb-accent polygon,
.comb-accent polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.comb-tr { top: 0; right: 0; }
.comb-tr svg { top: -46px; right: -70px; }
.comb-br { bottom: 0; right: 0; }
.comb-br svg { bottom: -56px; right: -70px; }
.comb-bl { bottom: 0; left: 0; }
.comb-bl svg { bottom: -56px; left: -80px; }
.comb-tl { top: 0; left: 0; }
.comb-tl svg { top: -46px; left: -80px; }

.story-band[data-mood="cream"] .comb-accent,
.story-band[data-mood="warm"]  .comb-accent,
.story-band[data-mood="honey"] .comb-accent { color: var(--honey-deep); }
.story-band[data-mood="amber"] .comb-accent { color: var(--honey-deep); opacity: 0.32; }
.story-band[data-mood="ink"]   .comb-accent { color: var(--honey); opacity: 0.22; }

/* Content sits above the accent. */
.story-band > .wrap { position: relative; z-index: 2; }

@media (max-width: 860px) {
  .comb-accent { display: none; } /* no room for it, and it fights the copy */
}


/* Chapters */
.chapter-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 6px; }
.chapter-num {
  font-family: var(--font-bee);
  font-size: clamp(48px, 6vw, 96px);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  opacity: 0.16;
}
.chapter-client {
  font-family: var(--font-bee);
  font-size: clamp(40px, 5.4vw, 76px);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin: 0 0 34px;
}
.chapter-client small {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-top: 12px;
}
.chapter-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.chapter-flip .chapter-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.chapter-flip .chapter-copy { order: 2; }
.chapter-flip .chapter-shot { order: 1; }
.chapter-copy p { font-size: 17px; line-height: 1.65; color: #3d382f; max-width: 46ch; }
.chapter-shot { margin: 0; }
.chapter-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(26, 20, 5, 0.16);
}
.chapter-stat { margin: 26px 0 0; }
.chapter-stat .stat-line {
  display: block;
  font-family: var(--font-bee);
  /* Bee is condensed: it reads small at a given px. Matches the case
     study's welded stat rather than sitting a whole step below it.
     Low end of clamp bumped to 35px so mobile stays readable. */
  font-size: clamp(35px, 4.4vw, 42px);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
}
.chapter-stat .stat-line .hl {
  background: linear-gradient(180deg, transparent 72%, var(--honey) 72%, var(--honey) 92%, transparent 92%);
  padding: 0 3px;
}
.chapter-stat .stat-src {
  display: block;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 6px;
}
.chapter-quote {
  margin: 26px 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--honey);
  font-size: 16px;
  line-height: 1.6;
  font-style: italic;
  color: #4a4436;
}
.todo-quote, .todo-stat .stat-src { outline: 2px dashed rgba(200, 138, 0, 0.55); outline-offset: 6px; }
.chapter-link {
  display: inline-block;
  margin-top: 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--honey);
  padding-bottom: 4px;
}
.chapter-link:hover { color: var(--ink-black); border-bottom-color: var(--ink); }

/* More-work line */
/* flow-root contains the child's top margin. Without it, .more-brands'
   margin collapses out through this padding-less top edge and leaks a
   stripe of body colour between two same-mood sections. */
.story-more { padding-top: 0; display: flow-root; }

/* Practices bar */
.story-practices { list-style: none; margin-top: 18px; }
.story-practices li {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.14);
  align-items: baseline;
}
.story-practices .sp-name {
  font-family: var(--font-bee);
  /* Low end lifted to 35px so the practice name reads with the same
     weight as headline bee-font elsewhere on mobile. */
  font-size: clamp(35px, 4vw, 44px);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.05;
}
.story-practices .sp-note { font-size: 15.5px; color: #55503f; }

/* Dark room: process + CTA share the ink mood at page end */
.story-dark { color: var(--cream); }
.story-dark .eyebrow { color: rgba(250, 246, 236, 0.6); }
.story-dark .band-heading { color: var(--cream); }
.story-dark .process-step { border-top-color: var(--honey); }
.story-dark .process-step .p-num { color: var(--honey); }
.story-dark .process-step h3 { color: var(--cream); }
.story-dark .process-step p { color: rgba(250, 246, 236, 0.78); }

@media (max-width: 860px) {
  .chapter-grid, .chapter-flip .chapter-grid { grid-template-columns: 1fr; }
  .chapter-flip .chapter-copy { order: 1; }
  .chapter-flip .chapter-shot { order: 2; }
  .chapter-copy p { max-width: none; }
  .story-practices li { grid-template-columns: 1fr; gap: 6px; }
}

/* Chapter quote attribution */
.chapter-quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ==========================================================
   Work index (/work/) + single case study
   Inner pages: the header is solid cream from the top, so the
   first band needs clearance under the fixed header.
   ========================================================== */
.work-intro,
.cs-hero,
.services-intro,
.svc-hero,
.about-hero,
.contact-hero,
.portal-hero { padding-top: clamp(120px, 15vh, 172px); }

/* ---- Work index ledger tweaks ---- */
.work-ledger-band .ledger { border-top: 0; }
.ledger-client a { text-decoration: none; color: inherit; border-bottom: 2px solid transparent; transition: border-color 140ms ease; }
.ledger-client a:hover { border-bottom-color: var(--honey); }
.ledger-more {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--honey);
  padding-bottom: 3px;
  white-space: nowrap;
}
.ledger-more:hover { border-bottom-color: var(--ink); }
.cs-cta { border-top: 1px solid var(--rule); }

/* ---- Work index: bee rhythm ----
   Cream stays the base. Every other row gets a soft honey wash so the
   page warms and cools as you scroll, the numerals carry a deep gold
   (bright honey on cream fails contrast and breaks the gold-on-cream
   rule), a honeycomb mark signs the intro, and the CTA is the one ink
   moment. Honey stays a shape: hexes, underlines, the button. */
.work-ledger-band {
  overflow-x: clip;
  /* Trim the top padding so the honey-wash on row #1 rises up close to
     the intro's bottom edge; the gap was reading as awkward empty cream. */
  padding-top: clamp(0px, 1vw, 16px);
}
/* Matching trim on the intro's bottom padding so the two bands meet
   without a big cream void between them. */
.work-intro { padding-bottom: clamp(16px, 3vw, 40px); }
.work-ledger-band .ledger-row { position: relative; }
.work-ledger-band .ledger-row > * { position: relative; z-index: 1; }
/* Flipped from :nth-child(even) to :nth-child(odd): project #1 now
   carries the honey wash. Visually anchors the transition from intro to
   ledger (no more floating cream gap) and puts the flagship project on
   the warm row rather than the runner-up. */
.work-ledger-band .ledger-row:nth-child(odd)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--honey-wash);
  z-index: 0;
}
.work-ledger-band .ledger-num { color: var(--honey-deep); }
.work-intro-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.work-intro-copy { flex: 1; min-width: 0; }
.work-hex { flex: none; margin-top: 6px; }
.work-cta { background: var(--ink); border-top: 0; }
.work-cta .cta-head { color: var(--cream); }
.work-cta .cta-sub { color: #b8b09a; }
@media (max-width: 700px) { .work-hex { display: none; } }

/* ---- Single case study ---- */
.cs-title {
  font-family: var(--font-bee);
  font-size: clamp(44px, 6.4vw, 88px);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin: 6px 0 0;
}
.cs-location {
  margin-top: 16px;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.cs-tagline { margin-top: 26px; }

.cs-shot { margin: 0; padding: 0 var(--pad-x); }
.cs-shot .wrap { margin-top: clamp(-40px, -4vw, -20px); }
.cs-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;                        /* device chrome exception */
  box-shadow: 0 28px 64px rgba(26, 20, 5, 0.18);
}

/* Framed case-study hero. A small browser-chrome mockup wraps the
   screenshot so a plain jpg reads as a designed asset rather than a
   floating image. Works for real screenshots and stand-in placeholders
   equally well, so the case study page reads polished until final
   client work images land. */
.cs-shot-framed { padding: 0 var(--pad-x); }
.cs-shot-framed .wrap { margin-top: clamp(-40px, -4vw, -20px); }
.browser-frame {
  background: #fff;
  /* Flat corners per geometric brand rule — was 12px, blended into cream
     body which lost the "device" read. */
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 32px 72px rgba(26, 20, 5, 0.22), 0 4px 12px rgba(26, 20, 5, 0.08);
  transform: translateZ(0);              /* smooth hover transition */
  transition: transform 420ms cubic-bezier(.2,.7,.2,1), box-shadow 420ms cubic-bezier(.2,.7,.2,1);
}
.browser-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 88px rgba(26, 20, 5, 0.26), 0 6px 16px rgba(26, 20, 5, 0.1);
}
.browser-frame-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  /* Dark ink chrome so the browser bar reads as distinct from the cream
     body background (previous warm-cream #f4efe4 was too close to the
     site cream and disappeared). Dots and address bar re-styled below
     for legibility on the darker background. */
  background: var(--ink);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
}
.browser-frame-dots {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.browser-frame-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;                       /* browser chrome dots */
  display: inline-block;
}
.browser-frame-dots .dot-r { background: #f18578; }
.browser-frame-dots .dot-y { background: #f6cd6f; }
.browser-frame-dots .dot-g { background: #77c88b; }
.browser-frame-address {
  flex: 1;
  font-family: var(--font-body);
  font-size: 13px;
  /* Light text on dark chrome — was dark text (invisible on new dark bg). */
  color: rgba(250, 246, 236, 0.65);
  background: rgba(250, 246, 236, 0.08);
  text-align: center;
  padding: 4px 12px;
  background: #fff;
  border-radius: 4px;                       /* browser URL bar */
  border: 1px solid rgba(26, 20, 5, 0.08);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-frame-viewport {
  position: relative;
  overflow: hidden;
}
.browser-frame-viewport img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  transform: scale(1);
  transition: transform 1200ms cubic-bezier(.2,.7,.2,1);
}
.browser-frame:hover .browser-frame-viewport img {
  transform: scale(1.02);                /* very subtle hover zoom */
}
@media (max-width: 560px) {
  .browser-frame-address { font-size: 12px; padding: 3px 8px; }
  .browser-frame-chrome { padding: 8px 12px; gap: 10px; }
}

/* Before / after: two full-page screenshots cropped to a matching
   height (top-anchored) so they line up, each with a corner label. */
.cs-ba-band { margin: 0; padding: 0 var(--pad-x); }
.cs-ba-band .wrap { margin-top: clamp(-40px, -4vw, -20px); }
.cs-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.4vw, 26px);
}
.cs-ba-item {
  position: relative;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(26, 20, 5, 0.18);
}
.cs-ba-item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
}
.cs-ba-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 0;
  z-index: 2;
}
.cs-ba-before { background: var(--ink); color: var(--cream); }
.cs-ba-after { background: var(--honey); color: var(--ink); }
@media (max-width: 700px) {
  .cs-ba { grid-template-columns: 1fr; }
  .cs-ba-item img { aspect-ratio: 4 / 3; }
}

/* Welded stat line in the hero. Compact, left-aligned, part of the
   client's story rather than a separate stat band. Wraps gracefully
   for one stat or several, and is simply absent when there is no data. */
.cs-stats {
  list-style: none;
  margin: 30px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 52px);
}
.cs-stat { max-width: 220px; }
.cs-stat-v {
  display: block;
  font-family: var(--font-bee);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.cs-stat-v .hl {
  background: linear-gradient(180deg, transparent 72%, var(--honey) 72%, var(--honey) 92%, transparent 92%);
  padding: 0 3px;
}
.cs-stat-l {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--ink-mute);
}

/* Gallery band: interior page shot (browser frame) + mobile shot
   (phone frame) side by side. Placeholders render when the source
   images do not exist yet so the layout is visible during the
   capture-and-drop-in phase. */
.cs-gallery-band {
  /* Horizontal padding matches .cs-shot at the top of the case study so
     the detail + phone gallery is inset with the same margin as the hero
     screenshot rather than bleeding to the viewport edge on mobile. */
  padding: clamp(48px, 7vw, 88px) var(--pad-x);
}
.cs-gallery {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: clamp(24px, 4vw, 60px);
  align-items: end;
}
@media (max-width: 720px) {
  .cs-gallery {
    grid-template-columns: 1fr;
    gap: 32px;
    justify-items: center;
  }
  /* Phone frame reads oversized against the browser-frame detail shot
     above it on phones; trim the max-width and force centering. Grid
     `justify-items: center` handles the grid-item positioning; explicit
     max-width and margin auto handle the .phone-frame inside. */
  .cs-gallery .cs-gallery-mobile {
    max-width: 220px;
    width: 100%;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
  }
  .cs-gallery .cs-gallery-mobile .phone-frame {
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
  }
}
.cs-gallery-detail,
.cs-gallery-mobile {
  margin: 0;
}
.cs-gallery-caption {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute, #6a6154);
  text-align: center;
}

/* Phone frame: mimics an iPhone silhouette. Rounded corners, small
   notch, dark bezel. Content sits inside the viewport. */
.phone-frame {
  position: relative;
  background: #1a1a1a;
  border-radius: 32px;                       /* device chrome exception */
  padding: 10px;
  box-shadow: 0 24px 48px rgba(26, 20, 5, 0.22), 0 4px 10px rgba(26, 20, 5, 0.08);
  max-width: 280px;
  margin: 0 auto;
  transition: transform 420ms cubic-bezier(.2,.7,.2,1), box-shadow 420ms cubic-bezier(.2,.7,.2,1);
}
.phone-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 64px rgba(26, 20, 5, 0.28), 0 6px 14px rgba(26, 20, 5, 0.1);
}
.phone-frame-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 22px;
  background: #1a1a1a;
  border-radius: 0 0 14px 14px;              /* notch curve, device chrome */
  z-index: 2;
}
.phone-frame-viewport {
  position: relative;
  border-radius: 22px;                       /* device chrome exception */
  overflow: hidden;
  background: #f4efe4;
  aspect-ratio: 9 / 19.5;                /* iPhone 14 Pro aspect */
}
.phone-frame-viewport img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Placeholders that show when files are missing. Dashed border,
   dimension label centered inside. Same slot dimensions as real
   images so the layout is honest. */
.cs-gallery-placeholder {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #eee6d4;
  color: var(--ink-mute, #6a6154);
  border: 2px dashed #cfc7b6;
  border-radius: 0;
  text-align: center;
  padding: 24px 16px;
  min-height: 100%;
}
.cs-gallery-placeholder-desktop {
  aspect-ratio: 16 / 9;
}
.cs-gallery-placeholder-mobile {
  aspect-ratio: 9 / 19.5;
}
.cs-gallery-placeholder .placeholder-label {
  font-family: var(--font-bee);
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.cs-gallery-placeholder .placeholder-spec {
  font-family: monospace;
  font-size: 11px;
  color: var(--ink-mute, #6a6154);
  opacity: 0.75;
}

/* The site, live: looping video. Flat (no border-radius) so it matches
   .cs-ba-item at the top of the case study — same geometric treatment
   throughout instead of rounded on mobile only. */
.cs-loop { margin: 0; border-radius: 0; overflow: hidden; box-shadow: 0 24px 56px rgba(26, 20, 5, 0.18); }
.cs-loop-video { display: block; width: 100%; height: auto; }

/* Full-bleed client photo interlude */
.cs-photo-band { margin: 0; }
.cs-photo-band img {
  display: block;
  width: 100%;
  height: clamp(320px, 52vh, 620px);
  object-fit: cover;
}

/* Narrative — reads like a magazine feature: each chapter gets a short
   honey rule at the top to signal a section break, and the eyebrow sits
   on its own line above the copy. */
.cs-body-inner { max-width: 760px; }
.cs-chapter {
  margin-bottom: clamp(36px, 5vw, 60px);
  padding-top: clamp(28px, 4vw, 44px);
  position: relative;
}
.cs-chapter:first-child { padding-top: 0; }
.cs-chapter:first-child::before { display: none; }
.cs-chapter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--honey);
  border-radius: 2px;
}
.cs-chapter:last-child { margin-bottom: 0; }
.cs-chapter .eyebrow { margin-bottom: 14px; }
.cs-prose { font-size: 17px; line-height: 1.75; color: #3d382f; }
.cs-prose p { margin-bottom: 18px; }
.cs-prose p:last-child { margin-bottom: 0; }
.cs-prose ul, .cs-prose ol { margin: 0 0 18px 24px; }
.cs-prose li { margin-bottom: 8px; }
.cs-prose a { color: var(--ink); text-decoration-color: var(--honey); text-decoration-thickness: 2px; }
.cs-prose strong { font-weight: 600; color: var(--ink); }

/* Case study growth chart chapter (currently Mad Co Tubing only).
   Lives INSIDE .cs-body-inner as another .cs-chapter so it inherits the
   same eyebrow, prose treatment, honey rule at the top, and 760px column
   width as The Challenge / What We Did / The Result. The chart itself
   is a small SVG figure below the paragraph, on the same cream canvas. */
.cs-growth-chapter .cs-growth-figure {
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
}
.cs-growth-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.cs-growth-baseline {
  stroke: var(--rule, #ece6d6);
  stroke-width: 1.5;
}

.cs-growth-bar {
  transform-origin: bottom;
  transform-box: fill-box;
  transform: scaleY(0);
  transition: transform 900ms cubic-bezier(.2,.7,.2,1);
  rx: 3;
}
.cs-growth-bar-prior   { fill: #cfc7b6; }                   /* muted warm gray */
.cs-growth-bar-current { fill: var(--honey, #febb1a); }     /* honey only, no deep-honey */

/* Bar grow-in works for any number of months via CSS custom
   properties. Each :nth-of-type staggers by 160ms so the whole
   chart tells a left-to-right story. */
.cs-growth-chapter.is-drawn .cs-growth-bar { transform: scaleY(1); }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(1) .cs-growth-bar { transition-delay: 80ms; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(1) .cs-growth-bar-current { transition-delay: 220ms; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(2) .cs-growth-bar { transition-delay: 240ms; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(2) .cs-growth-bar-current { transition-delay: 380ms; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(3) .cs-growth-bar { transition-delay: 400ms; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(3) .cs-growth-bar-current { transition-delay: 540ms; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(4) .cs-growth-bar { transition-delay: 560ms; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(4) .cs-growth-bar-current { transition-delay: 700ms; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(5) .cs-growth-bar { transition-delay: 720ms; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(5) .cs-growth-bar-current { transition-delay: 860ms; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(6) .cs-growth-bar { transition-delay: 880ms; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(6) .cs-growth-bar-current { transition-delay: 1020ms; }

.cs-growth-label {
  font-family: var(--font-bee);
  /* SVG text scales with the SVG's viewBox-to-viewport ratio, so px
     values render smaller than they appear here on narrow viewports.
     Bumped aggressively so the +119% payoff number is legible on mobile
     (was rendering at ~20 physical px even though CSS said 38). */
  font-size: clamp(72px, 12vw, 88px);
  font-weight: 600;
  fill: var(--ink);
  opacity: 0;
  transition: opacity 420ms cubic-bezier(.2,.7,.2,1);
}
/* General rule: labels fade in for every row once the chart is drawn.
   Per-row stagger keeps the left-to-right rhythm. */
.cs-growth-chapter.is-drawn .cs-growth-label { opacity: 1; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(1) .cs-growth-label { transition-delay: 500ms; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(2) .cs-growth-label { transition-delay: 660ms; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(3) .cs-growth-label { transition-delay: 820ms; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(4) .cs-growth-label { transition-delay: 980ms; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(5) .cs-growth-label { transition-delay: 1140ms; }
.cs-growth-chapter.is-drawn .cs-growth-month:nth-of-type(6) .cs-growth-label { transition-delay: 1300ms; }

.cs-growth-month-label {
  font-family: var(--font-body);
  /* Bumped for SVG scale-down — was rendering at ~6 physical px on
     mobile. New floor makes JUN/JUL readable. */
  font-size: clamp(22px, 3vw, 26px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  fill: var(--ink-mute, #6a6154);
}

.cs-growth-swatch { rx: 2; }
.cs-growth-legend-text {
  font-family: var(--font-body);
  /* Bumped for SVG scale-down — the 2025 / 2026 legend labels were
     rendering at ~6 physical px on mobile at a 12px SVG value. */
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  fill: var(--ink-mute, #6a6154);
  dominant-baseline: middle;
}

.cs-growth-caption {
  font-size: 13px;
  color: var(--ink-mute, #6a6154);
  letter-spacing: 0.02em;
  margin-top: 12px;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .cs-growth-bar,
  .cs-growth-label {
    transition: none;
  }
  .cs-growth-bar { transform: scaleY(1); }
  .cs-growth-label { opacity: 1; }
}

/* Testimonial */
.cs-quote { max-width: 860px; }
.cs-quote p {
  font-family: var(--font-body);
  /* Trimmed a step down; the quote is one voice in the story, not the
     hero, so it doesn't need to shout at the reader. */
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.5;
  font-weight: 300;
  color: var(--ink);
}
.cs-quote cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
}

/* CTA */
.cs-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cs-cta .btn-ghost { border-color: rgba(26,26,26,0.35); color: var(--ink); }
.cs-cta .btn-ghost:hover { border-color: var(--ink); }
.cs-back { max-width: var(--max-w); margin: 26px auto 0; }
.cs-back a {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
  text-decoration: none;
}
.cs-back a:hover { color: var(--ink); }

@media (max-width: 860px) {
  .cs-cta .cta-band, .work-cta .cta-band { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ==========================================================
   Services (/services/ overview + single practice)
   ========================================================== */
/* Alternating full-bleed honey wash, same rhythm as the /work/ ledger.
   Rows here are shorter, so this is the one to eyeball for "too much". */
.services-list-band {
  overflow-x: clip;
  /* Trim the top padding so the honey-washed row #1 sits close to the
     intro — matches the same tightening done on .work-ledger-band. */
  padding-top: clamp(0px, 1vw, 16px);
}
/* Matching trim on the intro band's bottom padding so intro and first
   service row meet without a big cream void, same rhythm as /work/. */
.services-intro { padding-bottom: clamp(16px, 3vw, 40px); }
.services-list-band .svc-row { position: relative; }
.services-list-band .svc-row > * { position: relative; z-index: 1; }
/* Flipped from :nth-child(even) to :nth-child(odd) so service #1
   (Website Design & Development) carries the honey wash. Same rhythm
   as the /work/ ledger — flagship row is the warm one. */
.services-list-band .svc-row:nth-child(odd)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--honey-wash);
  z-index: 0;
}
.svc-list { border-top: 1px solid var(--rule); }
.svc-row {
  display: grid;
  /* Column proportions matched to .ledger-xl .ledger-row so Services and
     Work read as siblings, not different-scale layouts. */
  grid-template-columns: 80px 1.2fr 1.3fr 40px;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: padding-left 180ms var(--ease);
}
.svc-row:hover { padding-left: 10px; }
.svc-row:hover .svc-arrow { transform: translateX(5px); color: var(--ink-black); }
.svc-row:hover .svc-name { border-bottom-color: var(--honey); }
.svc-num {
  font-family: var(--font-bee);
  /* Matches .ledger-xl .ledger-num — same weight, same honey-deep color,
     no opacity dim. Services numbers now carry as much visual weight as
     their case study equivalents. */
  font-size: clamp(44px, 5vw, 62px);
  font-weight: 600;
  color: var(--honey-deep);
  line-height: 1;
}
.svc-name {
  font-family: var(--font-bee);
  /* Matches .ledger-xl .ledger-client so service names read at the same
     scale as case study names — same headline weight across both indexes. */
  font-size: clamp(42px, 5vw, 62px);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0.01em;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  justify-self: start;
  transition: border-color 140ms ease;
}
.svc-lede { font-size: 15.5px; line-height: 1.5; color: #3d382f; }
.svc-arrow {
  font-size: 24px;
  color: var(--ink-mute);
  justify-self: end;
  transition: transform 160ms ease, color 160ms ease;
}

/* Single practice */
.svc-title {
  font-family: var(--font-bee);
  font-size: clamp(40px, 6vw, 84px);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: 0.01em;
  margin: 6px 0 0;
}
.svc-hero-lede { margin-top: 26px; max-width: 760px; }
.svc-body {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.svc-body-copy p { font-size: 17px; line-height: 1.7; color: #3d382f; margin: 0 0 18px; max-width: 560px; }
/* Proof line: no callout box (that reads as an AI-flavored info card).
   Just a slightly emphasized line of prose sitting in the copy flow,
   with a small uppercase "RECENT BUILDS" prefix in ink-mute so the
   client names carry the visual weight. */
.svc-proof {
  margin-top: 32px !important;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink) !important;
  font-weight: 400;
  max-width: 620px;
}
.svc-proof strong,
.svc-proof b {
  font-weight: 600;
}
.svc-includes { list-style: none; border-top: 1px solid var(--rule); }
.svc-includes li {
  padding: 14px 0 14px 26px;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
  position: relative;
}
.svc-includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 12px;
  height: 2px;
  background: var(--honey);
}
.svc-single-cta { border-top: 1px solid var(--rule); }

@media (max-width: 860px) {
  .svc-row { grid-template-columns: 44px 1fr; }
  .svc-row .svc-lede { grid-column: 2; }
  .svc-row .svc-arrow { display: none; }
  .svc-body { grid-template-columns: 1fr; }
  .svc-single-cta .cta-band, .services-cta .cta-band { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ==========================================================
   About + Contact
   ========================================================== */
.about-lede { max-width: 820px; }
.about-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}
.about-prose p { font-size: 17px; line-height: 1.75; color: #3d382f; margin: 0 0 18px; }
.about-prose p:last-child { margin-bottom: 0; }
.about-cause-line {
  font-family: var(--font-bee);
  font-size: clamp(26px, 3.6vw, 46px);
  line-height: 1.35;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  font-weight: 600;
  max-width: 940px;
  border-left: 4px solid var(--honey);
  padding-left: clamp(18px, 3vw, 32px);
}
.about-cta { border-top: 1px solid var(--rule); }

/* Contact */
.contact-lede { max-width: 640px; }
.contact-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}
.contact-fallback p { font-size: 17px; line-height: 1.7; color: #3d382f; margin-bottom: 18px; }
.contact-details .eyebrow { margin-bottom: 14px; }
.contact-details address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 17px;
  line-height: 1.6;
}
.contact-details .contact-place { color: var(--ink); font-weight: 500; }
.contact-details address a { color: var(--ink); text-decoration-color: var(--honey); text-decoration-thickness: 2px; }
.contact-social { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 16px; }
.contact-social a {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--honey);
  padding-bottom: 2px;
}
.contact-hours { margin-top: 24px; font-size: 14px; color: var(--ink-mute); }

@media (max-width: 860px) {
  .about-body, .contact-body { grid-template-columns: 1fr; }
  .about-cta .cta-band { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ==========================================================
   Legal pages (Privacy, and any future single-column legal page).
   Single-column, generous line-height, honey rule under H2s.
   ========================================================== */
.legal-page .privacy-lede { max-width: 820px; }
.legal-body { display: grid; grid-template-columns: 1fr; }
.legal-col { max-width: 780px; }
.legal-col h2 {
  font-family: var(--font-bee);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin: 44px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--honey);
}
.legal-col h2:first-child { margin-top: 0; }
.legal-col h3 {
  font-family: var(--font-bee);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin: 28px 0 10px;
}
.legal-col p {
  font-size: 17px;
  line-height: 1.75;
  color: #3d382f;
  margin: 0 0 16px;
  max-width: 720px;
}
.legal-col a {
  color: var(--ink);
  text-decoration-color: var(--honey);
  text-decoration-thickness: 2px;
}

/* Footer legal row: Privacy link sits next to the copyright items. */
.foot-legal-inner a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--honey);
  padding-bottom: 1px;
}
.foot-legal-inner a:hover { border-bottom-color: currentColor; }

/* ==========================================================
   Client portal (/portal/)
   ========================================================== */
.portal-hero { padding-bottom: clamp(32px, 5vw, 56px); }
.portal-actions { margin-top: 30px; }

/* The Hive login page (/the-hive/). Two-column layout parallel to the
   portal login screen: form on the left, honeycomb on the right. Uses
   wp_login_form() for the form — style the WP-generated fields to match
   the theme's typography. */
.the-hive-hero { padding-top: clamp(120px, 15vh, 172px); padding-bottom: clamp(48px, 6vw, 80px); }
.the-hive-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  max-width: var(--max-w);
  margin: 0 auto;
}
.the-hive-copy { max-width: 520px; }
.the-hive-copy .band-heading { margin-bottom: 14px; }
.the-hive-copy .intro-follow { max-width: 460px; }
.the-hive-comb { margin: 0; }
.the-hive-comb img { display: block; width: 100%; height: auto; }

/* WP-rendered login form. Style each field row to sit on cream cleanly. */
#thehiveLogin { margin-top: 32px; display: flex; flex-direction: column; gap: 18px; max-width: 460px; }
#thehiveLogin .login-username label,
#thehiveLogin .login-password label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
#thehiveLogin input[type="text"],
#thehiveLogin input[type="email"],
#thehiveLogin input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--ink);
  background: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  border-radius: 0;
}
#thehiveLogin input[type="text"]:focus,
#thehiveLogin input[type="email"]:focus,
#thehiveLogin input[type="password"]:focus {
  outline: 2px solid var(--honey);
  outline-offset: 2px;
}
#thehiveLogin .login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink);
}
#thehiveLogin .login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--honey);
}
#thehiveLogin .login-submit { margin-top: 6px; }
#thehiveLogin input[type="submit"] {
  display: inline-block;
  padding: 14px 28px;
  background: var(--honey);
  color: var(--ink);
  border: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: background-color 180ms ease, transform 180ms ease;
}
#thehiveLogin input[type="submit"]:hover,
#thehiveLogin input[type="submit"]:focus {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-1px);
  outline: none;
}

.the-hive-error {
  margin-top: 20px;
  padding: 12px 16px;
  background: rgba(220, 60, 60, 0.08);
  border-left: 3px solid #b93030;
  color: #7a1e1e;
  font-size: 14.5px;
  max-width: 460px;
}
.the-hive-links {
  margin-top: 24px;
  font-size: 13px;
  color: var(--ink-mute);
}
.the-hive-links a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--honey);
  padding-bottom: 1px;
  margin-right: 6px;
}
.the-hive-links a:hover,
.the-hive-links a:focus-visible {
  border-bottom-color: var(--ink);
  outline: none;
}
.the-hive-links span { margin: 0 4px; color: var(--ink-mute); }

@media (max-width: 860px) {
  .the-hive-inner { grid-template-columns: 1fr; }
  .the-hive-comb { max-width: 420px; margin: 0 auto; order: -1; }
}
/* Login screen: copy left, honeycomb right. The comb is the hive, and
   this is the one page where warmth beats restraint (nothing is being
   sold here). It is decorative, so alt="" keeps it out of the a11y tree. */
.portal-hero-inner.has-comb {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}
.portal-comb { margin: 0; }
.portal-comb img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
  .portal-hero-inner.has-comb { grid-template-columns: 1fr; }
  .portal-comb { max-width: 380px; margin-top: 8px; }
}
.portal-frame-band { padding: 0 var(--pad-x) clamp(48px, 6vw, 80px); }
.portal-frame {
  max-width: var(--max-w);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(26, 20, 5, 0.10);
}
.portal-frame iframe {
  display: block;
  width: 100%;
  height: clamp(680px, 88vh, 1500px);
}
.portal-signout {
  max-width: var(--max-w);
  margin: 18px auto 0;
  text-align: right;
}
.portal-signout a {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
  text-decoration: none;
}
.portal-signout a:hover { color: var(--ink); }

/* Persistent portal top bar for logged-in clients — small strip above
   the welcome hero showing who is signed in and a Sign Out link.
   Understated so it never competes with the dashboard content. */
.portal-topbar {
  background: rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.portal-topbar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 10px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.portal-signed-in-as {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.portal-signout-btn {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  transition: background-color 180ms ease, color 180ms ease;
}
.portal-signout-btn:hover,
.portal-signout-btn:focus-visible {
  background: var(--ink);
  color: var(--cream);
  outline: none;
}
.portal-signout-btn:focus-visible {
  outline: 2px solid var(--honey);
  outline-offset: 2px;
}
@media (max-width: 560px) {
  .portal-topbar-inner { padding: 8px var(--pad-x); }
  .portal-signed-in-as { font-size: 12px; }
  .portal-signout-btn { padding: 6px 12px; font-size: 11px; }
}

/* ==========================================================
   In-page reviews section (Contact, Work index)
   ========================================================== */
.reviews-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 38px); }
.reviews-head .scs-stars { color: var(--honey); font-size: 20px; letter-spacing: 2px; }
.reviews-score-lg { font-family: var(--font-bee); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; color: var(--ink); }
.reviews-count-lg { font-size: clamp(12px, 1.4vw, 14px); color: var(--ink-mute); }
.reviews-section .scs-star-empty { color: rgba(26, 26, 26, 0.15); }
/* Light rotator: reuses the footer .rot mechanics, recoloured for cream */
.reviews-rot { min-height: 160px; max-width: 860px; }
.reviews-section .rot-quote { color: var(--ink); }
.reviews-section .rot-author { color: var(--ink-mute); }
.reviews-link-page {
  display: inline-block;
  margin-top: clamp(24px, 3vw, 32px);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--honey);
  padding-bottom: 3px;
}
.reviews-link-page:hover { border-bottom-color: var(--ink); }

/* ==========================================================
   Story honeycomb backdrop
   One SVG (Meredith's hand-drawn hex pattern) sits behind ALL story
   bands as a single continuous canvas. Each band's mood colour still
   paints the section; the honeycomb rides on top of the mood colour but
   BEHIND the content, drawing itself row by row on scroll.

   Structure:
     .story-scroll                  wraps every story band
       .story-honeycomb-canvas      absolute, covers wrapper, z-index 0
         svg.story-honeycomb-svg    scales to canvas width, keeps ratio
           g.hex-row                one bucket of shapes per y-band
             polygon.hex-cell       stroked hexagon
             path.hex-cell.hex-shape  cluster outline
       section.band.story-band      z-index 1, content stays above
   ========================================================== */

.story-scroll {
  position: relative;
  isolation: isolate;
}

.story-honeycomb-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;                   /* above band backgrounds */
  pointer-events: none;
  overflow: hidden;
}

.story-honeycomb-svg {
  display: block;
  width: 100%;
  height: auto;
}

.hex-cell {
  fill: none;
  /* Opacity lowered from 0.18 → 0.10 and stroke thinned so the honeycomb
     reads as ambient texture behind content rather than a competing
     pattern. The client-roster band especially had client names fighting
     the hex pattern for the eye. */
  stroke: rgba(254, 187, 26, 0.10);
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* main.js primes strokeDasharray/strokeDashoffset per shape from its
     real path length, so both hexes and cluster outlines draw cleanly. */
}

/* Bands paint their own mood colour via existing rules. They stay
   unpositioned (natural document flow) so the absolute canvas layers
   above them. Overflow set to visible so the continuous pattern reads
   across seams. */
.story-scroll > .story-band {
  overflow: visible;
}

/* Content sits ABOVE the honeycomb canvas via z-index 2. */
.story-band > .wrap {
  position: relative;
  z-index: 2;
}

/* Process (ink) band: hide the honeycomb entirely. We elevate the band
   above the canvas so its solid ink background covers the pattern. */
.story-scroll > .story-band[data-mood="ink"] {
  position: relative;
  z-index: 2;
}
.story-scroll > .story-band[data-mood="ink"] > .wrap {
  z-index: 3;
}

/* Reduced motion: skip the draw-in, just show the pattern static. */
@media (prefers-reduced-motion: reduce) {
  .hex-cell {
    stroke-dashoffset: 0;
    transition: none;
  }
}


/* ---- Contact form: header, brand button, reviews separation ---- */
.contact-form-heading {
  font-family: var(--font-bee);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 24px;
}

/* Contact form styled to match The Hive login form: same eyebrow-style
   labels, same 1.5px ink borders on cream inputs, same focus outline,
   same honey submit button. Gravity Forms' framework theme uses high
   specificity, so several rules force with !important. */
.contact-form-col .gform_wrapper form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 460px;
}
.contact-form-col .gform_wrapper .gform_fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-form-col .gform_wrapper .gfield {
  padding: 0 !important;
  margin: 0 !important;
}
.contact-form-col .gform_wrapper .gfield_label,
.contact-form-col .gform_wrapper legend.gfield_label {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--ink-mute) !important;
  margin-bottom: 6px !important;
}
.contact-form-col .gform_wrapper .gfield_required {
  color: var(--honey) !important;
  margin-left: 4px !important;
}
.contact-form-col .gform_wrapper input[type="text"],
.contact-form-col .gform_wrapper input[type="email"],
.contact-form-col .gform_wrapper input[type="tel"],
.contact-form-col .gform_wrapper input[type="url"],
.contact-form-col .gform_wrapper input[type="number"],
.contact-form-col .gform_wrapper input[type="password"],
.contact-form-col .gform_wrapper select,
.contact-form-col .gform_wrapper textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1.5px solid var(--ink) !important;
  background: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.contact-form-col .gform_wrapper textarea {
  min-height: 140px;
  resize: vertical;
}
.contact-form-col .gform_wrapper input[type="text"]:focus,
.contact-form-col .gform_wrapper input[type="email"]:focus,
.contact-form-col .gform_wrapper input[type="tel"]:focus,
.contact-form-col .gform_wrapper input[type="url"]:focus,
.contact-form-col .gform_wrapper input[type="number"]:focus,
.contact-form-col .gform_wrapper input[type="password"]:focus,
.contact-form-col .gform_wrapper select:focus,
.contact-form-col .gform_wrapper textarea:focus {
  outline: 2px solid var(--honey) !important;
  outline-offset: 2px !important;
  border-color: var(--ink) !important;
}
.contact-form-col .gform_wrapper .gfield_description,
.contact-form-col .gform_wrapper .gform_description {
  font-size: 13px !important;
  color: var(--ink-mute) !important;
  margin-top: 6px !important;
}
.contact-form-col .gform_wrapper .gform_footer {
  margin: 6px 0 0 !important;
  padding: 0 !important;
}
.contact-form-col .gform_wrapper .gform_footer input[type="submit"],
.contact-form-col .gform_wrapper .gform_footer button.gform_button,
.contact-form-col .gform_wrapper .gform_button {
  display: inline-block !important;
  padding: 14px 28px !important;
  background-color: var(--honey) !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease !important;
}
.contact-form-col .gform_wrapper .gform_footer input[type="submit"]:hover,
.contact-form-col .gform_wrapper .gform_footer input[type="submit"]:focus,
.contact-form-col .gform_wrapper .gform_button:hover,
.contact-form-col .gform_wrapper .gform_button:focus {
  background-color: var(--ink) !important;
  color: var(--cream) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}
/* Validation + error states — soften Gravity Forms' default red boxes to
   match the Hive login's inline error treatment. */
.contact-form-col .gform_wrapper .gfield_error input,
.contact-form-col .gform_wrapper .gfield_error textarea,
.contact-form-col .gform_wrapper .gfield_error select {
  border-color: #b93030 !important;
  background: rgba(220, 60, 60, 0.03) !important;
}
.contact-form-col .gform_wrapper .validation_message,
.contact-form-col .gform_wrapper .gfield_validation_message {
  color: #7a1e1e !important;
  font-size: 13px !important;
  margin-top: 6px !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.contact-form-col .gform_wrapper .gform_validation_errors,
.contact-form-col .gform_wrapper .validation_error {
  background: rgba(220, 60, 60, 0.08) !important;
  border: 0 !important;
  border-left: 3px solid #b93030 !important;
  color: #7a1e1e !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
  border-radius: 0 !important;
}
.contact-form-col .gform_wrapper .gform_confirmation_message {
  padding: 16px 20px !important;
  background: rgba(254, 187, 26, 0.12) !important;
  border-left: 3px solid var(--honey) !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Separate the reviews band from the warm form band above it. */
.contact-page .reviews-section {
  background: var(--cream);
  border-top: 1px solid var(--rule);
}

/* ---- Work page: light-tier client cards ("More clients we work with") ---- */
.work-clients-band { border-top: 1px solid var(--rule); }
.work-clients-band .eyebrow { margin-bottom: clamp(28px, 4vw, 44px); }
.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 34px);
}
.client-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 0;
  overflow: hidden;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms ease;
}
.client-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(26, 26, 26, 0.09);
  border-color: var(--honey);
}
/* Padding-top aspect-ratio trick — reliable in flex columns where
   aspect-ratio can drift because of min-height: auto on flex items.
   10/16 = 0.625 (62.5%) locks the shot to a true 16:10 no matter what
   the parent does. */
.client-shot {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 62.5%;
  background: var(--cream-warm);
  overflow: hidden;
}
.client-shot img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.client-shot.is-placeholder {
  padding-top: 62.5%;
  background: var(--mood-warm);
}
.client-shot.is-placeholder .client-shot-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 18px;
}
.client-shot-fallback {
  font-family: var(--font-bee);
  text-transform: uppercase;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.02;
  color: var(--ink);
  text-align: center;
}
.client-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  padding: 18px 20px 0;
}
.client-industry {
  font-size: 14px;
  color: var(--ink-mute);
  padding: 5px 20px 0;
}
.client-visit {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  padding: 14px 20px 20px;
  margin-top: auto;
}
.client-card:hover .client-visit {
  text-decoration: underline;
  text-decoration-color: var(--honey);
  text-underline-offset: 3px;
}

/* ---- Work page: light-tier as a swipeable slider (kills the orphan row, better on mobile) ---- */
.client-carousel-wrap {
  position: relative;
}
.work-clients-band .client-grid {
  display: flex;
  grid-template-columns: none;
  gap: clamp(16px, 2.5vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--honey) transparent;
  /* Peek: last visible card bleeds slightly off the right edge so the
     eye reads "there's more here" without needing to touch anything. */
  scroll-padding-inline: clamp(20px, 4vw, 48px);
}

/* Carousel controls sit below the tiles, centered. Reads as pagination.
   Small honey chevrons, no background, don't touch any client info.
   Visible on mobile too (touch users still get swipe, but the buttons
   also work as a clear affordance). */
.client-carousel-controls {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: clamp(20px, 3vw, 32px);
}
/* Chevrons live on cream and were failing "gold never text on cream"
   plus WCAG contrast at honey. Ink instead — reads at any size,
   passes AA, honors the brand rule. Honey shows up on focus only
   (as an outline, not as text). */
.client-carousel-nav {
  background: transparent;
  border: 0;
  padding: 0 8px;
  font-family: var(--font-body);
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: color 180ms ease, transform 180ms ease, opacity 180ms ease;
}
.client-carousel-nav:hover,
.client-carousel-nav:focus-visible {
  color: var(--ink);
  transform: translateY(-1px);
  outline: none;
}
.client-carousel-nav:focus-visible {
  outline: 2px solid var(--honey);
  outline-offset: 4px;
  border-radius: 2px;
}
.client-carousel-nav[disabled] {
  opacity: 0.3;
  cursor: default;
  color: var(--ink);
  transform: none;
}
.work-clients-band .client-grid::-webkit-scrollbar { height: 8px; }
.work-clients-band .client-grid::-webkit-scrollbar-track { background: var(--rule); border-radius: 0; }
.work-clients-band .client-grid::-webkit-scrollbar-thumb { background: var(--honey); border-radius: 0; }
.work-clients-band .client-card {
  flex: 0 0 auto;
  width: clamp(230px, 72vw, 280px);
  scroll-snap-align: start;
}
@media (min-width: 900px) {
  .work-clients-band .client-card { width: clamp(240px, 23vw, 280px); }
}

/* Work page: keep "Read the case study" on its own line under the proof note */
/* Block + fit-content keeps the link on its own line (as a block would)
   while shrinking the box to text width (so the honey border-bottom
   hugs the copy instead of spanning the full column). */
.ledger-proof .ledger-more { display: block; width: fit-content; margin-top: 12px; }

/* Work page client tiles: flat, editorial look (no bubble), no hover clip */
.work-clients-band .client-grid { padding-top: 14px; }
.work-clients-band .client-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  transition: none;
}
.work-clients-band .client-card:hover {
  transform: none;
  box-shadow: none;
}
.work-clients-band .client-shot {
  /* aspect-ratio removed so the base .client-shot padding-top: 62.5%
     (a true 16:10 lock) governs the container. Matches the 1600x1000
     capture spec. */
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--cream-warm);
  transition: border-color 180ms ease;
}
.work-clients-band .client-shot.is-placeholder { background: var(--mood-warm); }
.work-clients-band .client-name { padding: 16px 2px 0; }
.work-clients-band .client-industry { padding: 4px 2px 0; }
.work-clients-band .client-visit { padding: 12px 2px 18px; }
.work-clients-band .client-card:hover .client-shot { border-color: var(--honey); }
.work-clients-band .client-card:hover .client-visit {
  text-decoration: underline;
  text-decoration-color: var(--honey);
  text-underline-offset: 3px;
}

/* Work page client tiles: statement + work tags, larger tiles */
.work-clients-band .client-card { width: clamp(270px, 80vw, 320px); }
@media (min-width: 900px) { .work-clients-band .client-card { width: clamp(300px, 27vw, 344px); } }
.work-clients-band .client-statement {
  font-size: 15px;
  line-height: 1.5;
  color: #3d382f;
  padding: 12px 2px 0;
}
.work-clients-band .client-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 2px 0;
}
.work-clients-band .client-tags { gap: 0; align-items: baseline; }
.work-clients-band .client-tags .tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

/* Case study hero: prominent live-site link */
.cs-hero-live { margin-top: 22px; }
.cs-hero-live a {
  font-size: 15px;
  letter-spacing: 0.03em;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--honey);
  padding-bottom: 2px;
}
.cs-hero-live a:hover { border-bottom-color: var(--ink); }

/* Service page: related case studies (flat mini-ledger) */
/* Breadcrumbs — small typographic strip near the top of service and
   case study pages. Cream background, ink-mute text, honey separator. */
.stinger-crumbs {
  padding: clamp(90px, 12vh, 130px) var(--pad-x) 0;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
}
.stinger-crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: baseline;
}
.stinger-crumbs li {
  display: inline-flex;
  align-items: baseline;
}
.stinger-crumbs a {
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
  transition: color 180ms ease, border-color 180ms ease;
}
.stinger-crumbs a:hover,
.stinger-crumbs a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--honey);
  outline: none;
}
.stinger-crumbs [aria-current="page"] {
  color: var(--ink);
}
.stinger-crumbs-sep {
  margin: 0 10px;
  color: var(--honey);
  font-weight: 700;
}

/* Body pages that carry breadcrumbs don't need the huge hero top pad.
   Note: on case study pages the breadcrumbs are siblings of .cs-article
   (not of .cs-hero), so the selector reaches through the article to
   .cs-hero rather than using an adjacent-sibling combinator with it. */
.service-single .stinger-crumbs + .svc-hero,
.cs .stinger-crumbs + .cs-article > .cs-hero {
  padding-top: clamp(24px, 3vw, 44px);
}

/* Sibling nav on service pages: small list linking to the other five
   practices. Understated. Lets visitors hop between practices. */
.svc-siblings-band {
  border-top: 1px solid var(--rule);
}
.svc-siblings-band .eyebrow { margin-bottom: 16px; }
.svc-siblings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(12px, 2vw, 20px);
}
.svc-siblings-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  text-decoration: none;
  color: var(--ink);
  border-top: 1px solid var(--rule);
  transition: color 180ms ease, transform 180ms ease;
}
.svc-siblings-item:hover,
.svc-siblings-item:focus-visible {
  color: var(--ink);
  transform: translateX(2px);
  outline: none;
}
.svc-siblings-item:hover .svc-siblings-name,
.svc-siblings-item:focus-visible .svc-siblings-name {
  border-bottom-color: var(--honey);
}
.svc-siblings-name {
  font-family: var(--font-bee);
  /* Bee font needs headroom on mobile; low end lifted to 30px so the
     "Other services" list reads as its own beat rather than a small link. */
  font-size: clamp(30px, 3.4vw, 34px);
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color 180ms ease;
}
.svc-siblings-arrow {
  color: var(--ink-mute);
  font-size: 18px;
  line-height: 1;
  transition: transform 180ms ease, color 180ms ease;
}
.svc-siblings-item:hover .svc-siblings-arrow,
.svc-siblings-item:focus-visible .svc-siblings-arrow {
  transform: translateX(4px);
  color: var(--ink);
}

/* Sibling nav on case study pages: prev / next paginator. Two large
   type blocks with arrows, one on each side. */
.cs-siblings-band {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  /* Restore horizontal padding via --pad-x so the paginator items
     don't touch the viewport edge on mobile (this rule was previously
     overriding the .band rule's --pad-x with zeros). */
  padding: clamp(28px, 4vw, 48px) var(--pad-x);
}
.cs-siblings {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(16px, 3vw, 32px);
}
.cs-siblings-item {
  display: flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  color: var(--ink);
  max-width: 45%;
  transition: transform 220ms ease;
}
.cs-siblings-prev { justify-content: flex-start; text-align: left; }
.cs-siblings-next { justify-content: flex-end; text-align: right; margin-left: auto; }
.cs-siblings-item:hover,
.cs-siblings-item:focus-visible { outline: none; }
.cs-siblings-prev:hover,
.cs-siblings-prev:focus-visible { transform: translateX(-4px); }
.cs-siblings-next:hover,
.cs-siblings-next:focus-visible { transform: translateX(4px); }
.cs-siblings-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-siblings-eyebrow {
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
}
.cs-siblings-name {
  font-family: var(--font-bee);
  /* Bumped for mobile parity with .svc-siblings-name; the prev/next
     paginator carries the next client name and deserves the same weight
     as the "Other services" list. */
  font-size: clamp(28px, 3.2vw, 34px);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color 180ms ease;
}
.cs-siblings-item:hover .cs-siblings-name,
.cs-siblings-item:focus-visible .cs-siblings-name {
  border-bottom-color: var(--honey);
}
.cs-siblings-arrow {
  color: var(--ink-mute);
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 180ms ease;
}
.cs-siblings-item:hover .cs-siblings-arrow,
.cs-siblings-item:focus-visible .cs-siblings-arrow {
  color: var(--ink);
}
/* Paginator stacks and left-aligns on tablet-and-below (720px) rather
   than only on tiny phones — otherwise mid-width viewports show a
   staggered PREV-left / NEXT-right layout that reads broken. */
@media (max-width: 720px) {
  .cs-siblings-band .cs-siblings {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
  .cs-siblings-band .cs-siblings-item {
    max-width: 100%;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  /* Both arrows sit at the left so the pair reads as one vertical list.
     Arrows still point their own direction (← / →) inside the block. */
  .cs-siblings-band .cs-siblings-next {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
}

/* Related work now lives inline in the left column of the service body
   (below the proof line). Fills the dead space that appeared when the
   left col was short and the What's Included list was long. */
.svc-related-inline {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--rule);
}
.svc-related-inline .eyebrow { margin-bottom: 12px; }
.svc-related-band { border-top: 1px solid var(--rule); }
.svc-related-band .eyebrow { margin-bottom: 6px; }
.svc-related-list { list-style: none; margin: 0; padding: 0; }
.svc-related-list li { border-top: 1px solid var(--rule); }
.svc-related-card {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
  text-decoration: none;
  color: inherit;
  padding: 24px 0;
}
/* .svc-related-stat retired 2026-08-03 — the ledger proof stat read
   as an orphan number without its "in bookings" / "of new customer
   calls" context, so it was removed from the related-work list. */
.svc-related-meta { display: flex; flex-direction: column; gap: 3px; flex: 1; }
/* Bee font here (rather than default body bold) so the client name reads
   in the site's headline voice, matching the rest of the case-study links. */
.svc-related-name {
  font-family: var(--font-bee);
  font-size: clamp(28px, 3.2vw, 36px);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--ink);
  border-bottom: 2px solid transparent;
}
.svc-related-loc { font-size: 14px; color: var(--ink-mute); }
.svc-related-go {
  margin-left: auto;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
  white-space: nowrap;
}
.svc-related-card:hover .svc-related-name { border-bottom-color: var(--honey); }
.svc-related-card:hover .svc-related-go { color: var(--ink); }

/* Case study: "Experience the full site" link, after the write-up and images */
.cs-visit-band { text-align: center; padding: clamp(36px, 6vw, 68px) var(--pad-x); }
.cs-visit-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid var(--honey);
  padding-bottom: 4px;
  transition: border-color 160ms ease;
}
.cs-visit-link:hover { border-bottom-color: var(--ink); }