/* =====================================================================
   CAVENAUGH MEDIA — v5 "Editorial Marketing" (refined)
   - SINGLE warm-paper background throughout (no hard section cuts)
   - Skinnier floating glass nav with CTA breathing room
   - Subtle gradient pulse on italic em accents
   - Uniform testimonial grid (equal columns, no masonry)
   - Floating navy gradient CTA card on paper
   - Footer SEO row de-emphasized
   - Inter + Instrument Serif italic + JetBrains Mono
   ===================================================================== */

:root {
  /* === Surfaces ===
     Body is white. Hero gradients from a subtle warm paper into white. */
  --paper:        #FAFAF7;          /* hero warm top — subtle, not beige-y */
  --paper-2:      #F4F3EE;          /* used only when explicitly tinted */
  --bone:         #EFEDE6;
  --white:        #FFFFFF;
  --soft-blue:    #F1F5FA;

  /* === Cavenaugh navy === */
  --navy:         #235c87;          /* exact live-site brand navy */
  --navy-deep:    #1B4868;
  --navy-ink:     #133252;
  --navy-bright:  #3D7CB0;
  --navy-soft:    rgba(35, 92, 135, 0.08);

  /* === Ink (type on paper) === */
  --ink:          #0E1B2C;
  --ink-soft:     #1F2D40;
  --slate:        #475569;
  --steel:        #6E7889;
  --mute:         #9AA3B2;

  --rule-light:   rgba(14, 27, 44, 0.06);
  --rule:         rgba(14, 27, 44, 0.10);
  --rule-strong:  rgba(14, 27, 44, 0.18);

  /* === Accent — was orange; Cody: NO orange, use a popping blue (brand). ===
     Tokens kept (many components reference them) but remapped to bright azure. */
  --orange-1:     #5BB3F0;
  --orange-2:     #2E97DE;
  --orange-3:     #1A7CC4;
  --orange:       #2E97DE;
  --orange-soft:  rgba(46, 151, 222, 0.10);

  /* === Typography === */
  /* Single humanist typeface site-wide — DM Sans (Cody: one font, human, not aggressive) */
  --font-display: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif:   'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --t-eyebrow:  0.7rem;
  --t-mono:     0.75rem;
  --t-xs:       0.8125rem;
  --t-sm:       0.9375rem;
  --t-base:     1rem;
  --t-lg:       clamp(1.0625rem, 1.2vw, 1.1875rem);
  --t-xl:       clamp(1.1875rem, 1.6vw, 1.5rem);
  --t-2xl:      clamp(1.5rem, 2.4vw, 2.25rem);
  --t-3xl:      clamp(2rem, 4vw, 3.25rem);
  --t-4xl:      clamp(2.375rem, 5.2vw, 4.25rem);
  --t-5xl:      clamp(2.75rem, 6.5vw, 5.25rem);
  --t-display:  clamp(3rem, 8vw, 7.25rem);

  /* === Layout === */
  --max-w:        1440px;
  --max-w-tight:  1240px;
  --max-w-narrow: 920px;
  --max-w-prose:  58ch;
  --gutter:       clamp(1.25rem, 4vw, 2.75rem);
  --header-h:     80px;

  /* Section padding — consistent across the whole site.
     Mobile floor is generous enough to breathe but not waste vertical space. */
  --section-py:    clamp(1.9rem, 3.4vw, 3.4rem);   /* R4: tighter still — Cody: still too much white space */
  --section-py-sm: clamp(1.5rem, 2.6vw, 2.4rem);

  /* === Motion === */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.83, 0, 0.17, 1);
  --d-fast:       240ms;
  --d-base:       500ms;
  --d-slow:       900ms;

  /* === Shape === */
  --r-sm:         8px;
  --r-md:         14px;
  --r-lg:         24px;
  --r-xl:         32px;
  --r-pill:       999px;

  /* === Shadow === */
  --sh-rest:      0 1px 2px rgba(14, 27, 44, 0.04);
  --sh-card:      0 8px 28px rgba(14, 27, 44, 0.06), 0 1px 2px rgba(14, 27, 44, 0.04);
  --sh-lift:      0 24px 48px rgba(14, 27, 44, 0.10), 0 2px 6px rgba(14, 27, 44, 0.04);
  --sh-nav:       0 10px 30px rgba(14, 27, 44, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --sh-cta:       0 40px 80px rgba(19, 50, 82, 0.30), 0 8px 24px rgba(19, 50, 82, 0.15);
}

/* =====================================================================
   Reset + base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--white);              /* body is white — hero handles the warm fade */
  line-height: 1.55;
  font-weight: 400;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'ss01' 1, 'cv11' 1;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; transition: color var(--d-fast) var(--ease-out); }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
::selection { background: var(--navy); color: var(--white); }

.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--ink); color: var(--white);
  padding: 0.75rem 1.25rem; z-index: 999;
  font-family: var(--font-mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.skip-link:focus { top: 0; }

/* =====================================================================
   Typography — italic em gets subtle gradient pulse on major titles
   ===================================================================== */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--t-5xl); font-weight: 700; letter-spacing: -0.045em; line-height: 0.96; }
h2, .h2 { font-size: var(--t-4xl); font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; }
h3, .h3 { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.025em; }
h4 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
}

/* Italic serif accent + gradient pulse on every major title em */
em, .italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--navy);
}

/* PULSE — visible navy gradient shift, 5s cycle, wider hue range */
h1 em, h2 em, h3 em,
.pulse-text {
  background: linear-gradient(120deg,
    #1B4868  0%,    /* deepest navy */
    #235c87  20%,   /* brand navy */
    #5B9CD6  50%,   /* bright sky navy — adds visible contrast */
    #235c87  80%,
    #1B4868  100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: pulseShift 5s var(--ease-in-out) infinite;
}
@keyframes pulseShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* CTA card override — keep orange pulse on the navy gradient card */
.cta-card h2 em {
  background: linear-gradient(120deg,
    var(--orange-1) 0%,
    var(--orange-2) 25%,
    var(--orange-3) 50%,
    var(--orange-2) 75%,
    var(--orange-1) 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Service "All five under one roof" tile sits on dark ink — keep orange pulse there too */
.service--text .service__media-text span {
  background: linear-gradient(120deg,
    var(--orange-1),
    var(--orange-2),
    var(--orange-3),
    var(--orange-2),
    var(--orange-1));
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: pulseShift 8s var(--ease-in-out) infinite;
}

p {
  color: var(--slate);
  max-width: var(--max-w-prose);
  line-height: 1.6;
}
p + p { margin-top: 1rem; }
p.lead {
  font-size: var(--t-xl);
  line-height: 1.42;
  color: var(--ink);
  max-width: 56ch;
}

/* Eyebrow — clean mono text, no leading line, no slashes */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--steel);
  margin-bottom: 1.5rem;
}
.eyebrow.is-centered { display: block; text-align: center; }
.eyebrow.is-white { color: rgba(255, 255, 255, 0.6); }

.mono {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--steel);
}

/* =====================================================================
   Layout primitives
   ===================================================================== */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--tight { max-width: var(--max-w-tight); }
.container--narrow { max-width: var(--max-w-narrow); }

.section {
  padding-block: var(--section-py);
  position: relative;
  background: var(--white);            /* all sections white by default */
}
.section--sm { padding-block: var(--section-py-sm); }

.section-head { max-width: 920px; margin-bottom: clamp(1.9rem, 3vw, 2.85rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { display: block; text-align: center; }
.section-head p {
  color: var(--slate);
  font-size: var(--t-lg);
  max-width: 58ch;
  margin-top: 1.5rem;
}
.section-head--center p { margin-inline: auto; }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1.05rem 1.7rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.005em;
  line-height: 1;
  border: 1px solid transparent;
  transition: all 380ms var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
}
.btn .arrow { width: 16px; height: 16px; flex-shrink: 0; transition: transform 380ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--navy);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--navy-deep);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(35, 92, 135, 0.25);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  transform: translateY(-2px);
}

.btn--ghost-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.32);
}
.btn--ghost-white:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
  transform: translateY(-2px);
}

.btn--white {
  background: var(--white);
  color: var(--ink);
}
.btn--white:hover {
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.btn--lg { padding: 1.2rem 2.1rem; font-size: 0.98rem; }
.btn--sm { padding: 0.75rem 1.25rem; font-size: 0.85rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--navy);
  transition: gap 380ms var(--ease-out), color 380ms var(--ease-out);
}
.link-arrow:hover { color: var(--navy); gap: 0.85rem; }
.link-arrow .arrow { width: 14px; height: 14px; transition: transform 380ms var(--ease-out); }

/* =====================================================================
   FLOATING GLASS NAV — skinnier, CTA breathing room
   ===================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.1rem var(--gutter);
  transition: padding 380ms var(--ease-out);
  pointer-events: none;
}
.site-header.scrolled { padding-top: 0.55rem; padding-bottom: 0.55rem; }

.nav-shell {
  pointer-events: auto;
  max-width: 900px;                       /* was 1100 — skinnier */
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 0.85rem 0 1.4rem;            /* MORE right space — CTA pulled inward */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-nav);
  transition: background 380ms var(--ease-out), border-color 380ms var(--ease-out), max-width 380ms var(--ease-out);
}
.site-header.scrolled .nav-shell {
  background: rgba(255, 255, 255, 0.93);
  border-color: var(--rule);
  box-shadow: 0 14px 36px rgba(14, 27, 44, 0.12);
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-logo img {
  height: 64px;          /* Cody: logo must be PROMINENT, it's the brand */
  width: auto;
  display: block;
}
.nav-logo:hover { opacity: 0.85; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0;
}
.nav-menu__item { position: relative; }
.nav-menu a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--ink);
  border-radius: var(--r-pill);
  transition: color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.nav-menu a:hover { color: var(--navy); background: var(--navy-soft); }
.nav-menu a[aria-current="page"] { color: var(--navy); }
.nav-menu .caret {
  width: 10px; height: 10px;
  transition: transform var(--d-fast) var(--ease-out);
}
.nav-menu__item:hover .caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 270px;
  padding: 0.55rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lift);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10;
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out), visibility 380ms;
}
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
}
.nav-menu__item:hover .nav-dropdown,
.nav-menu__item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0.7rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  border-radius: var(--r-sm);
  width: 100%;
}
.nav-dropdown a small {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--steel);
  font-weight: 400;
  text-transform: uppercase;
}
.nav-dropdown a:hover { background: var(--soft-blue); color: var(--navy); }
.nav-dropdown a:hover small { color: var(--navy); }

.nav-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-cta {
  padding: 0.62rem 1.05rem !important;
  font-size: 0.82rem !important;
  background: var(--navy) !important;
  color: var(--white) !important;
  border-radius: var(--r-pill);
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(35, 92, 135, 0.14);
  transition: background 380ms var(--ease-out), transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
  animation: navCtaFloat 4s ease-in-out infinite;
}
.nav-cta:hover {
  background: linear-gradient(135deg, #2f7ab4 0%, var(--navy) 100%) !important;
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(35, 92, 135, 0.42);
  animation-play-state: paused;
}
@keyframes navCtaFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.nav-cta .arrow { width: 13px; height: 13px; }

.nav-burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: transparent;
  align-items: center;
  justify-content: center;
}
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after {
  position: relative;
  display: block;
  width: 16px; height: 1.5px;
  background: var(--ink);
  transition: all 380ms var(--ease-out);
}
.nav-burger span::before, .nav-burger span::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-burger span::before { top: -5px; }
.nav-burger span::after { top: 5px; }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 980px) {
  .nav-menu, .nav-cta { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-shell { padding: 0 0.55rem 0 1.1rem; max-width: 100%; }
}

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--white);
  transform: translateX(100%);
  transition: transform 380ms var(--ease-out);
  padding: 6rem 2rem 2rem;
  overflow-y: auto;
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer > ul > li { border-bottom: 1px solid var(--rule); }
.nav-drawer a {
  display: block;
  padding: 1rem 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.nav-drawer .nav-dropdown {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 0 1rem 1rem;
  min-width: 0;
}
.nav-drawer .nav-dropdown a {
  padding: 0.5rem 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--slate);
}
.nav-drawer .nav-dropdown a small {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.nav-drawer__cta { padding-top: 1.5rem; display: grid; gap: 0.65rem; }
@media (min-width: 981px) { .nav-drawer { display: none; } }

/* =====================================================================
   HERO — minimal, gradual paper→white fade + subtle aurora motion
   ===================================================================== */
.hero,
.page-hero {
  position: relative;
  background: linear-gradient(
    to bottom,
    var(--paper) 0%,
    var(--paper) 30%,
    #FCFCFA 60%,
    var(--white) 100%
  );
  padding-top: clamp(8rem, 14vw, 12rem);
  padding-bottom: clamp(5rem, 10vw, 9rem);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* Aurora blobs — soft tinted ovals drifting behind the hero content.
   Shared between homepage .hero and every inner-page .page-hero. */
.hero::before, .hero::after,
.page-hero::before, .page-hero::after,
.hero__aurora {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(58px);
  pointer-events: none;
  opacity: 0.5;
  will-change: transform;
}
.hero::before,
.page-hero::before {
  width: 40vw;
  height: 40vw;
  top: -8vw;
  left: -6vw;
  background: radial-gradient(circle, rgba(35, 92, 135, 0.42), transparent 68%);
  opacity: 0.95;
  animation: heroDrift1 19s ease-in-out infinite;
}
.hero::after,
.page-hero::after {
  width: 42vw;
  height: 42vw;
  top: 4vw;
  right: -10vw;
  background: radial-gradient(circle, rgba(91, 156, 214, 0.40), transparent 68%);
  opacity: 0.95;
  animation: heroDrift2 23s ease-in-out infinite;
}
.hero__aurora {
  width: 34vw;
  height: 34vw;
  bottom: -8vw;
  left: 24vw;
  background: radial-gradient(circle, rgba(35, 92, 135, 0.30), transparent 68%);
  opacity: 0.85;
  animation: heroDrift3 27s ease-in-out infinite;
}

/* Bigger, more organic travel so the blobs are noticeable but still calm */
@keyframes heroDrift1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(14vw, 7vw) scale(1.15); }
  66%  { transform: translate(6vw, 14vw) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes heroDrift2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-12vw, 9vw) scale(1.12); }
  66%  { transform: translate(-16vw, -3vw) scale(1.04); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes heroDrift3 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(10vw, -9vw) scale(1.14); }
  66%  { transform: translate(-8vw, -5vw) scale(1.06); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Subtle dotted grid wash — sits over the gradient for depth */
.hero__grid-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(35, 92, 135, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center top, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center top, black 0%, transparent 75%);
  opacity: 0.5;
  pointer-events: none;
}

/* Bottom-fade overlay — bleeds the hero's color into the next section's white.
   Sits above the aurora blobs but behind the headline content. Kept short so it
   never reaches the CTAs (~bottom 18% only). */
.hero__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18%;
  background: linear-gradient(to bottom, transparent 0%, var(--white) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Hero inner content sits on its own stacking layer above the fade overlay
   so headline + CTAs are always crisp, never washed by the fade. */
.hero .container,
.page-hero .container { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after,
  .page-hero::before, .page-hero::after,
  .hero__aurora { animation: none; }
}

/* =====================================================================
   CUSTOM CURSOR — REMOVED (Cody Loom 06/15). Default OS cursor site-wide.
   ===================================================================== */
.hero__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.hero h1 {
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.94;
  margin-bottom: 1.75rem;
}
.hero h1 em {
  /* inherit the pulse from h1 em rule above */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.hero__sub {
  font-size: var(--t-xl);
  color: var(--slate);
  max-width: 60ch;
  margin: 0 auto 2.75rem;
  line-height: 1.45;
  font-weight: 400;
}
.hero__ctas {
  display: inline-flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* =====================================================================
   HERO SPLIT — copy left, founder imagery right (Stryker pattern)
   ===================================================================== */
.hero--split { text-align: left; padding-top: clamp(7rem, 11vw, 10rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.hero__split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 880px) {
  .hero__split { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
}
.hero--split .hero__copy h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.04; }
/* homepage hero image bigger — fill column height, no longer cramped 1:1 */
.hero--split .hero__split { grid-template-columns: 1fr 1.05fr; align-items: stretch; }
.hero--split .hero__copy { align-self: center; }
.hero--split .hero__visual { display: flex; }
.hero--split .hero__photo { aspect-ratio: auto; width: 100%; height: 100%; min-height: clamp(380px, 38vw, 580px); }
@media (max-width: 880px) {
  .hero--split .hero__split { grid-template-columns: 1fr; }
  .hero--split .hero__photo { min-height: clamp(300px, 75vw, 440px); }
}
.hero--split .hero__sub { margin-left: 0; margin-right: 0; max-width: 46ch; }
@media (max-width: 880px) { .hero--split .hero__sub { margin-left: auto; margin-right: auto; } }
.hero--split .hero__ctas { justify-content: flex-start; }
@media (max-width: 880px) { .hero--split .hero__ctas { justify-content: center; } }

.hero__trust {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  font-size: 0.92rem;
  color: var(--slate);
}
@media (max-width: 880px) { .hero__trust { justify-content: center; } }
.hero__stars { color: #F5A623; letter-spacing: 1px; }
.hero__trust strong { color: var(--ink); }

.hero__visual { position: relative; }
.hero__photo {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: 0 30px 70px rgba(14, 27, 44, 0.28);
  border: 1px solid rgba(255,255,255,0.6);
  background: linear-gradient(135deg, var(--navy), var(--navy-ink));
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.hero__badge {
  position: absolute;
  left: -18px; bottom: 26px;
  background: var(--navy-ink);
  color: #fff;
  padding: 0.9rem 1.25rem;
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px rgba(14, 27, 44, 0.4);
  border: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 880px) { .hero__badge { left: 50%; transform: translateX(-50%); bottom: -18px; } }
.hero__badge-num { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.hero__badge-lbl { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 0.15rem; }

/* page-hero split variant (About + service/work/contact) */
.page-hero--split { text-align: left; padding-top: clamp(7.5rem, 11vw, 10rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-hero--split .hero__split { grid-template-columns: 1fr 1.1fr; align-items: stretch; }   /* image bigger + matches copy height */
/* match the bolder homepage hero (Cody: all page heroes should look like the home hero) */
.page-hero--split .hero__copy h1 { font-size: clamp(2.4rem, 4.6vw, 3.7rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
.page-hero--split .hero__copy { align-self: center; }
.page-hero--split .hero__ctas { margin-top: 1.75rem; justify-content: flex-start; gap: 0.65rem; }   /* CTAs under subtext, left-aligned, side-by-side */
.page-hero--split .hero__ctas .btn { font-size: 0.92rem; padding: 0.92rem 1.4rem; white-space: nowrap; }   /* fit two buttons in the narrower copy column */
.page-hero--split .hero__visual { display: flex; }
.hero__photo--wide { aspect-ratio: auto; width: 100%; height: 100%; min-height: clamp(380px, 40vw, 600px); }  /* bigger, fills the column */
@media (max-width: 880px) {
  .page-hero--split .hero__split { grid-template-columns: 1fr; }
  .page-hero--split .hero__ctas { justify-content: center; }
  .hero__photo--wide { min-height: clamp(280px, 70vw, 420px); }
}

/* =====================================================================
   ABOUT — owner spotlight + achievements + action gallery
   ===================================================================== */
.owner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 820px) { .owner { grid-template-columns: 1fr; } }
.owner__portrait {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(14,27,44,0.22);
  aspect-ratio: 4 / 5;
}
.owner__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.owner__tag {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(255,255,255,0.94); color: var(--navy-ink);
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.5rem 0.8rem; border-radius: var(--r-pill); box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.owner__copy h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.02em; margin-bottom: 1rem; }
.owner__copy h3 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--navy); }
.owner__copy p { color: var(--slate); line-height: 1.7; margin-bottom: 1rem; }
/* clean credential grid (replaced the checkmark-chip list) */
.owner__creds { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.75rem; }
@media (max-width: 480px) { .owner__creds { grid-template-columns: 1fr; } }
.owner__cred {
  border-left: 3px solid var(--navy);
  padding: 0.35rem 0 0.35rem 0.9rem;
}
.owner__cred strong { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; color: var(--navy-ink); }
.owner__cred span { font-size: 0.9rem; color: var(--slate); }

/* action-shot gallery — larger, rounded, no text overlays */
.owner__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 820px) { .owner__gallery { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.owner__shot { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 16px 38px rgba(14,27,44,0.18); aspect-ratio: 4/5; }
.owner__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.section--soft { background: var(--soft-blue); }

/* Hero eyebrow — niche flag above the H1 */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(35, 92, 135, 0.08);
  border: 1px solid rgba(35, 92, 135, 0.18);
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  margin-bottom: 1.5rem;
}

/* Hero proof row — real client results under the CTAs */
.hero__proof {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  margin-top: 2.25rem;
  font-size: 0.92rem;
  color: var(--slate);
}
.hero__proof-item strong { color: var(--navy-ink); font-weight: 700; }
.hero__proof-sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--rule-strong);
}
@media (max-width: 640px) { .hero__proof-sep { display: none; } .hero__proof { flex-direction: column; gap: 0.5rem; } }
.hero__terms {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}

/* =====================================================================
   MANIFESTO — extra breathing room from title to body
   ===================================================================== */
.manifesto {
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(35, 92, 135, 0.06), transparent 55%),
    var(--soft-blue);
  padding-block: clamp(5rem, 10vw, 9rem);
}
/* Kill pure-white on the FAQ block too (Cody: brand it, don't leave it airy white) */
#faq.section { background: var(--soft-blue); }

/* Manifesto split — copy + job-site image */
.manifesto__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 820px) { .manifesto__split { grid-template-columns: 1fr; } }
.manifesto__media { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 56px rgba(14,27,44,0.20); aspect-ratio: 1/1; }
.manifesto__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.manifesto__text h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -0.025em; margin-bottom: 1.5rem; max-width: 20ch; line-height: 1.1; }
.manifesto__text p { color: var(--slate); line-height: 1.7; margin-bottom: 1.05rem; }
.manifesto__text p strong { color: var(--ink); }
.manifesto__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(3rem, 8vw, 7rem);     /* generous gap title↔body */
  align-items: start;
}
.manifesto h2 {
  font-size: var(--t-3xl);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0;
}
.manifesto__body p {
  font-size: var(--t-lg);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: none;
}
.manifesto__body p + p { margin-top: 1.5rem; }
@media (max-width: 880px) {
  .manifesto__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* =====================================================================
   SERVICES — 3-col, image-forward, stock imagery
   ===================================================================== */
.services { background: var(--white); }
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.service {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-decoration: none;
}
.service__media {
  position: relative;
  width: 100%;
  aspect-ratio: 5/4;
  background: var(--bone);
  border-radius: var(--r-md);
  overflow: hidden;
}
.service__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.service:hover .service__media img { transform: scale(1.05); }
.service__media__tag {
  position: absolute;
  top: 1rem; left: 1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  padding: 0.3rem 0.7rem;
  background: rgba(14, 27, 44, 0.7);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
}
.service__num {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.service h3 {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
}
.service p {
  font-size: 1rem;
  color: var(--slate);
  margin: 0;
  line-height: 1.55;
  max-width: 42ch;
}
.service__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--navy);
  margin-top: 0.5rem;
  width: max-content;
  transition: gap 380ms var(--ease-out), color 380ms var(--ease-out);
}
.service__link:hover { color: var(--navy); gap: 0.8rem; }
.service__link .arrow { width: 13px; height: 13px; }

/* "Full stack" tile — text-only with serif italic */
.service--text .service__media {
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.service--text .service__media-text {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--white);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.05;
  text-align: center;
  letter-spacing: -0.02em;
}
.service--text .service__media-text span {
  background: linear-gradient(120deg, var(--orange-1), var(--orange-2), var(--orange-3), var(--orange-1));
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: pulseShift 8s var(--ease-in-out) infinite;
}

@media (max-width: 960px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .services__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   FEATURED WORK — alternating image-forward
   ===================================================================== */
.work { background: var(--white); }
.work__list {
  display: grid;
  gap: clamp(3rem, 6vw, 5.5rem);
}
.work-item {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.work-item:nth-child(even) { grid-template-columns: 1fr 1.4fr; }
.work-item:nth-child(even) .work-item__media { order: 2; }

.work-item__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--soft-blue);
  display: block;
}
.work-item__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 1200ms var(--ease-out);
}
.work-item__media:hover img { transform: scale(1.04); }
.work-item__tag {
  position: absolute;
  top: 1.25rem; left: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  padding: 0.4rem 0.85rem;
  background: rgba(14, 27, 44, 0.72);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
}
.work-item__copy .mono {
  display: block;
  margin-bottom: 1rem;
  color: var(--navy);
}
.work-item__copy h3 {
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 1.25rem;
}
.work-item__copy p {
  font-size: var(--t-lg);
  color: var(--slate);
  line-height: 1.55;
  margin: 0 0 1.5rem;
  max-width: 50ch;
}
.work-item__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 1.5rem 0;
}
.work-item__meta small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 0.4rem;
}
.work-item__meta strong {
  display: block;
  font-size: 0.98rem;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.35;
}

@media (max-width: 880px) {
  .work-item, .work-item:nth-child(even) { grid-template-columns: 1fr; }
  .work-item:nth-child(even) .work-item__media { order: 0; }
}

/* =====================================================================
   STATS — hairline-bordered row on paper
   ===================================================================== */
.stats {
  background: var(--white);
  border-block: 1px solid var(--rule);
  padding: 0;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  text-align: center;
  padding: clamp(2.75rem, 4.5vw, 3.75rem) 1rem;
  position: relative;
}
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 1px;
  background: var(--rule);
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.045em;
  margin-bottom: 0.5rem;
}
.stat__num .accent { color: var(--navy); }
.stat__label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--steel);
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3)::before { display: none; }
}

/* =====================================================================
   PROCESS — minimal 4 step
   ===================================================================== */
.process { background: var(--white); }
.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}
.process__step {
  position: relative;
  padding-top: 2rem;
  border-top: 1px solid var(--rule-strong);
}
.process__step::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 36px; height: 1px;
  background: var(--navy);
}
.process__step .mono {
  display: block;
  margin-bottom: 1rem;
  color: var(--navy);
}
.process__step h3 {
  font-size: var(--t-xl);
  font-weight: 600;
  margin-bottom: 0.65em;
  letter-spacing: -0.02em;
}
.process__step p { font-size: 0.96rem; color: var(--slate); margin: 0; line-height: 1.55; max-width: none; }
@media (max-width: 880px) { .process__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }
@media (max-width: 540px) { .process__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   WHY US — image-paired
   ===================================================================== */
.why { background: var(--white); }
.why__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.why__media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--soft-blue);
}
.why__media img { width: 100%; height: 100%; object-fit: cover; }
.why__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(14, 27, 44, 0.35) 100%);
}
.why__media-tag {
  position: absolute;
  bottom: 1.5rem; left: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  z-index: 2;
}

.why__items { display: grid; gap: 0; }
.why-card {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.why-card:first-child { padding-top: 0; }
.why-card:last-child { border-bottom: 0; padding-bottom: 0; }
.why-card .mono { display: block; margin-bottom: 0.65rem; color: var(--navy); }
.why-card h4 {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
}
.why-card p { font-size: 0.98rem; color: var(--slate); margin: 0; line-height: 1.55; max-width: none; }
@media (max-width: 880px) { .why__layout { grid-template-columns: 1fr; } }

/* =====================================================================
   TESTIMONIALS — UNIFORM grid (no masonry, equal heights per row)
   ===================================================================== */
.testimonials { background: var(--white); }
.testimonials__rating {
  text-align: center;
  margin-bottom: 3.5rem;
}
.testimonials__rating-stars {
  display: inline-block;
  color: var(--navy);
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  margin-bottom: 0.5rem;
}
.testimonials__rating strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.testimonials__rating .mono { display: inline-block; }

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;       /* equal row heights */
}
@media (max-width: 980px) { .testimonials__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .testimonials__grid { grid-template-columns: 1fr; } }

.testimonial {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  transition: all 380ms var(--ease-out);
  height: 100%;               /* fill grid row */
}
.testimonial:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--sh-card);
  transform: translateY(-2px);
}
.testimonial-stars { color: var(--navy); letter-spacing: 0.1em; font-size: 0.88rem; margin-bottom: 0.85rem; }
.testimonial p {
  font-size: 0.97rem;
  color: var(--ink);
  margin: 0 0 1.1rem;
  line-height: 1.55;
  max-width: none;
  flex: 1;                    /* push attribution to bottom */
}
.testimonial__attr {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  margin-top: auto;
}
.testimonial__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-bright));
  color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 0.78rem;
  flex: 0 0 36px;
}
.testimonial__attr strong { display: block; color: var(--ink); font-size: 0.9rem; font-weight: 600; }
.testimonial__attr span { color: var(--steel); font-size: 0.76rem; font-family: var(--font-mono); letter-spacing: 0.04em; }

/* =====================================================================
   FINAL CTA — FLOATING navy gradient card on paper
   ===================================================================== */
.cta-section {
  background: var(--white);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.cta-card {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 6rem) clamp(2rem, 5vw, 4rem);
  background: linear-gradient(135deg, var(--navy-ink) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  border-radius: var(--r-xl);
  text-align: center;
  color: var(--white);
  overflow: hidden;
  box-shadow: var(--sh-cta);
}
.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 20% 30%, rgba(255, 255, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 80%, rgba(91, 179, 240, 0.14), transparent 55%);
  pointer-events: none;
}
.cta-card > * { position: relative; }
.cta-card h2 {
  font-size: var(--t-5xl);
  letter-spacing: -0.045em;
  color: var(--white);
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: 1.25rem;
  line-height: 0.96;
}
.cta-card h2 em {
  /* matches global gradient pulse */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.cta-card p {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--t-lg);
  max-width: 54ch;
  margin: 0 auto 2.5rem;
}
.cta-card__ctas {
  display: inline-flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* =====================================================================
   FOOTER — navy ink, SEO row de-emphasized
   ===================================================================== */
.footer {
  background: var(--navy-ink);
  color: rgba(255, 255, 255, 0.6);
  padding-block: 4.5rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.footer__brand img {
  height: 72px;
  width: auto;
  margin-bottom: 1.5rem;
  filter: brightness(0) invert(1);
}
.footer__brand p { color: rgba(255, 255, 255, 0.5); font-size: 0.93rem; max-width: 32ch; line-height: 1.55; }
.footer__social { display: flex; gap: 0.55rem; margin-top: 1.5rem; }
.footer__social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: all 380ms var(--ease-out);
}
.footer__social a:hover {
  background: var(--white);
  color: var(--navy-ink);
  transform: translateY(-2px);
}
.footer__social svg { width: 16px; height: 16px; }

.footer__col h4 {
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.footer__col ul { display: grid; gap: 0.7rem; }
.footer__col a, .footer__col li { color: rgba(255, 255, 255, 0.55); font-size: 0.92rem; }
.footer__col a:hover { color: var(--white); }

.footer__bottom {
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.32);
  text-transform: uppercase;
}
.footer__bottom-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer__bottom a { color: rgba(255, 255, 255, 0.42); font-weight: 400; }
.footer__bottom a:hover { color: var(--white); }

/* SEO/AI resources — quiet, non-bolded, low-contrast */
.footer__seo {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  font-weight: 400;
}
.footer__seo a {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.18);
  padding-bottom: 1px;
}
.footer__seo a:hover {
  color: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 1100px) {
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer__col:nth-child(4), .footer__col:nth-child(5) { display: none; }
}
@media (max-width: 720px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: span 2; }
}

/* =====================================================================
   Inner page hero (services / about / contact etc.)
   ===================================================================== */
.page-hero .container { max-width: 1100px; }
.page-hero h1 { margin-bottom: 1rem; }
.page-hero p { color: var(--slate); font-size: var(--t-xl); max-width: 60ch; margin: 0 auto; }
.page-hero .eyebrow { margin-bottom: 1.5rem; }
.page-hero .breadcrumb {
  display: inline-flex;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}
.page-hero .breadcrumb a { color: var(--ink); }
.page-hero .breadcrumb a:hover { color: var(--navy); }

/* =====================================================================
   WORK PAGE — filter chips + grid + modal
   ===================================================================== */
.chips {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: nowrap;        /* single row, never multi-line */
  overflow-x: auto;
  padding: 0.25rem 0;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  padding: 0.65rem 1.2rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
  cursor: pointer;
  transition: all 280ms var(--ease-out);
  white-space: nowrap;
}
.chip:hover {
  border-color: var(--navy);
  color: var(--ink);
}
.chip.is-active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2rem);
}
@media (max-width: 960px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .work-grid { grid-template-columns: 1fr; } }

.proj {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all 380ms var(--ease-out);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.proj:hover {
  border-color: var(--rule-strong);
  transform: translateY(-4px);
  box-shadow: var(--sh-card);
}
.proj__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--soft-blue);
}
.proj__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 900ms var(--ease-out);
}
.proj:hover .proj__media img { transform: scale(1.05); }
.proj__media__tag {
  position: absolute;
  top: 1rem; left: 1rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  padding: 0.3rem 0.7rem;
  background: rgba(14, 27, 44, 0.72);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
}
.proj__body { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.proj__body h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.proj__body p { font-size: 0.92rem; color: var(--slate); margin: 0; max-width: none; flex: 1; }
.proj__footer {
  margin-top: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.proj__footer .mono { font-size: 0.7rem; color: var(--steel); }
.proj__footer .view {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* === Modal === */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 27, 44, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 2vw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out), visibility 320ms;
}
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.modal {
  background: var(--white);
  border-radius: var(--r-xl);
  max-width: 980px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
  transform: translateY(20px);
  transition: transform 380ms var(--ease-out);
}
.modal-overlay.is-open .modal { transform: translateY(0); }

.modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 1.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  z-index: 5;
  cursor: pointer;
  transition: background 280ms var(--ease-out);
}
.modal__close:hover { background: var(--navy); }

.modal { position: relative; }
/* Generous top padding so the floating close button never overlaps content */
.modal__body { padding: clamp(3.5rem, 4.5vw, 3.5rem) clamp(1.5rem, 4.5vw, 3.5rem) clamp(2.25rem, 4.5vw, 3.5rem); }

/* Image now lives INSIDE the body, between meta and phases — rounded, contained */
.modal__image {
  margin: 2rem auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(14, 27, 44, 0.18);
  border: 1px solid var(--rule);
  background: var(--soft-blue);
  max-width: 100%;
  aspect-ratio: 16/10;
}
.modal__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.modal__tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--soft-blue);
  border-radius: var(--r-pill);
  margin-bottom: 1rem;
}
.modal__body h2 {
  font-size: var(--t-3xl);
  letter-spacing: -0.035em;
  margin-bottom: 1rem;
}
.modal__body > p {
  font-size: var(--t-lg);
  color: var(--ink-soft);
  max-width: 60ch;
  margin-bottom: 2rem;
}
.modal__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2rem;
}
.modal__meta small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 0.4rem;
}
.modal__meta strong { font-size: 0.98rem; color: var(--ink); font-weight: 500; line-height: 1.35; }

.modal__phases h3 {
  font-size: var(--t-xl);
  margin-bottom: 1.5rem;
}
.modal__phase {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.modal__phase:last-child { border-bottom: 0; padding-bottom: 0.5rem; }
.modal__phase .mono { color: var(--navy); margin-top: 4px; }
.modal__phase h4 { margin-bottom: 0.35em; font-size: 1.1rem; }
.modal__phase p { font-size: 0.95rem; color: var(--slate); margin: 0; }

.modal__cta {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .modal__close { margin: 0.75rem 0.75rem -3rem auto; }
  .modal__phase { grid-template-columns: 1fr; gap: 0.5rem; }
  .modal__meta { grid-template-columns: 1fr; }
}

/* =====================================================================
   CONTENT VIDEO HERO — autoplay aerial brand cinematic
   ===================================================================== */
.content-video {
  background: var(--white);
  padding-block: 0 clamp(2rem, 5vw, 4rem);
}
.content-video__shell {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--soft-blue);
  aspect-ratio: 21/9;
  box-shadow: var(--sh-lift);
}
.content-video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.content-video__overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem 2.25rem 1.75rem;
  background: linear-gradient(180deg, transparent, rgba(14, 27, 44, 0.7));
  color: var(--white);
}
.content-video__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0.35rem;
}
.content-video__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}
@media (max-width: 720px) {
  .content-video__shell { aspect-ratio: 4/3; border-radius: var(--r-md); }
  .content-video__overlay { padding: 1.25rem 1.25rem 1.1rem; }
}

/* =====================================================================
   CONTENT GALLERY — Pinterest-style grid with rich hover + lightbox
   ===================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 1rem;
}
.gallery__item {
  position: relative;
  background: var(--soft-blue);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: zoom-in;
  border: 0;
  padding: 0;
  display: block;
  transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
  grid-row: span 1;
}
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out), filter 380ms var(--ease-out);
}
.gallery__item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(14, 27, 44, 0.6) 100%);
  opacity: 0.85;
  transition: opacity 380ms var(--ease-out);
}
.gallery__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lift);
}
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item:hover::after { opacity: 1; }
.gallery__tag {
  position: absolute;
  top: 1rem; left: 1rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  padding: 0.3rem 0.7rem;
  background: rgba(14, 27, 44, 0.7);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  z-index: 2;
}
.gallery__caption {
  position: absolute;
  bottom: 1rem; left: 1rem; right: 1rem;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  z-index: 2;
  text-align: left;
}
@media (max-width: 880px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .gallery__item--wide { grid-column: span 2; }
}
@media (max-width: 540px) {
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery__item--wide, .gallery__item--tall { grid-column: span 1; grid-row: span 1; }
}

/* === LIGHTBOX === */
.lightbox-modal { padding: 4vh 4vw; align-items: center; }
.lightbox {
  position: relative;
  max-width: 1200px;
  /* No max-height clip — let image + caption flow naturally */
  width: auto;
  background: var(--navy-ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  transform: scale(0.96);
  transition: transform 380ms var(--ease-out);
  display: flex;
  flex-direction: column;
}
.modal-overlay.is-open .lightbox { transform: scale(1); }
.lightbox img {
  display: block;
  max-width: 100%;
  /* Reserve room for the caption — was 80vh; now leaves space below */
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__caption {
  padding: 1.5rem 1.75rem 1.75rem;
  background: var(--navy-ink);
  color: var(--white);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.lightbox__caption strong { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; }
.lightbox__caption span { display: block; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 4px; }
.lightbox-modal .modal__close {
  background: var(--white);
  color: var(--ink);
}
.lightbox-modal .modal__close:hover { background: var(--navy); color: var(--white); }

/* =====================================================================
   LIVE DEMO MODAL — iframe-loaded software showcase (custom-software page)
   ===================================================================== */
.demo-modal { padding: 2vh 1vw; }
.demo-modal__shell {
  max-width: 1440px;
  width: 98vw;
  height: 92vh;
  padding: 0;
  background: var(--white);
  overflow: hidden;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
}
.demo-modal__shell iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--white);
}
.demo-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1rem;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.demo-modal__bar-dots { display: inline-flex; gap: 6px; align-items: center; }
.demo-modal__bar-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.demo-modal__bar-title { color: rgba(255,255,255,0.78); font-weight: 500; }
.demo-modal__bar-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--white);
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 280ms var(--ease-out);
}
.demo-modal__bar-close:hover { background: var(--white); color: var(--ink); }
@media (max-width: 720px) {
  .demo-modal { padding: 0; }
  .demo-modal__shell { width: 100vw; height: 100vh; border-radius: 0; }
}

/* === DEMO GALLERY CARDS (on custom-software page) === */
.demos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: start;        /* size cards to content — no orphan whitespace below */
}
@media (max-width: 720px) { .demos-grid { grid-template-columns: 1fr; } }

.demo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: all 380ms var(--ease-out);
}
.demo-card:hover {
  transform: translateY(-6px);
  border-color: var(--navy);
  box-shadow: var(--sh-lift);
}
.demo-card__preview {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
/* Iframe sized 200%/200% then scaled 0.5 so the demo fills the preview area
   (transform-origin top-left → without 200% it would only fill one quadrant). */
.demo-card__preview iframe {
  width: 200%;
  height: 200%;
  border: 0;
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;
  background: var(--white);
  overflow: hidden;
  scrollbar-width: none;
}
.demo-card__preview iframe::-webkit-scrollbar { display: none; width: 0; height: 0; }
.demo-card__preview::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(14, 27, 44, 0.4) 100%);
  opacity: 0;
  transition: opacity 380ms var(--ease-out);
}
.demo-card:hover .demo-card__preview::after { opacity: 1; }
.demo-card__launch {
  position: absolute;
  bottom: 1rem; right: 1rem;
  padding: 0.55rem 1rem;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  opacity: 0;
  transform: translateY(8px);
  transition: all 380ms var(--ease-out);
  z-index: 2;
}
.demo-card:hover .demo-card__launch {
  opacity: 1;
  transform: translateY(0);
}
.demo-card__body {
  padding: 1.5rem 1.75rem 1.75rem;
}
.demo-card__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.demo-card h3 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 0.4em;
  color: var(--ink);
}
.demo-card p {
  font-size: 0.94rem;
  color: var(--slate);
  margin: 0;
  max-width: none;
  line-height: 1.55;
}

/* =====================================================================
   Variants for inner-page elements
   ===================================================================== */

/* Testimonials without avatars (used on inner pages) */
.testimonials--no-avatars .testimonial__avatar { display: none; }
.testimonials--no-avatars .testimonial__attr { padding-top: 0.75rem; }

/* Hide work item category chip overlays on the homepage Recent Work section
   (user wants the clean screenshot without the floating label). The .work-item__tag
   class is still defined for other contexts; the .work .work-item__tag selector
   only hides them on the homepage's .work block. */
.work .work-item__tag,
section.work .work-item__tag { display: none; }

/* =====================================================================
   ABOUT PAGE — Featured founder card (single, not grid)
   ===================================================================== */
.founder {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
}
.founder__photo {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
}
.founder__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.founder__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(14, 27, 44, 0.35) 100%);
  pointer-events: none;
}
.founder__photo-tag {
  position: absolute;
  bottom: 1.25rem; left: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  z-index: 2;
}

.founder__copy .eyebrow { margin-bottom: 0.85rem; }
.founder__copy h3 {
  font-size: clamp(2rem, 3.4vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0 0 0.5em;
  line-height: 1.05;
}
.founder__copy h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.founder__role {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1.5rem;
}
.founder__copy > p {
  font-size: var(--t-lg);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: none;
  margin-bottom: 1.5rem;
}
.founder__copy > p + p { margin-top: 0; }
.founder__highlights {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.founder__highlights li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.96rem;
  color: var(--ink-soft);
}
.founder__highlights li::before {
  content: "→";
  color: var(--navy);
  font-weight: 700;
  flex: 0 0 16px;
  margin-top: 1px;
}
.founder__socials {
  display: flex;
  gap: 0.5rem;
  margin-top: 2rem;
}
.founder__socials a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  transition: all 280ms var(--ease-out);
}
.founder__socials a:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.founder__socials svg { width: 14px; height: 14px; }

@media (max-width: 880px) {
  .founder { grid-template-columns: 1fr; padding: clamp(1.5rem, 4vw, 2.5rem); }
  .founder__photo { max-width: 380px; margin: 0 auto; }
}

/* Cleanly bound icon sizes for any inline SVG inside cards (catches old class leakage) */
.why-card__icon,
.include-card__icon,
.service-card__icon {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--soft-blue);
  color: var(--navy);
  flex-shrink: 0;
}
.why-card__icon svg,
.include-card__icon svg,
.service-card__icon svg {
  width: 22px !important;
  height: 22px !important;
}

/* Services index — clickable white card widgets */
.service-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid rgba(19,50,82,0.08);
  border-radius: 20px;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  text-decoration: none;
  box-shadow: 0 14px 40px -28px rgba(8,20,36,0.5);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 30px 64px -32px rgba(8,20,36,0.62); border-color: rgba(242,101,34,0.28); }
.service-card__num { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.14em; color: var(--mute); margin-bottom: 0.9rem; }
.service-card__icon { margin-bottom: 1.1rem; }
.service-card h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 0.6rem; color: var(--navy-ink); }
.service-card p { color: var(--slate); line-height: 1.55; margin: 0 0 1.3rem; font-size: 1rem; }
.service-card .link-arrow { margin-top: auto; }

/* =====================================================================
   Reveal animations
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="100"] { transition-delay: 100ms; }
.reveal[data-delay="200"] { transition-delay: 200ms; }
.reveal[data-delay="300"] { transition-delay: 300ms; }
.reveal[data-delay="400"] { transition-delay: 400ms; }
.reveal[data-delay="500"] { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  h1 em, h2 em, h3 em, .pulse-text {
    animation: none !important;
    color: var(--navy) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
  }
  .cta-card h2 em, .service--text .service__media-text span {
    color: var(--orange-1) !important;
  }
}

/* =====================================================================
   MOBILE — final polish
   ===================================================================== */
@media (max-width: 720px) {
  .hero { padding-top: clamp(7rem, 16vw, 9rem); padding-bottom: 3rem; }
  .hero h1 { font-size: clamp(2.5rem, 9vw, 3.6rem); }
  .hero__sub { font-size: 1.05rem; }
  .hero__ctas { gap: 0.6rem; }
  .hero__ctas .btn { padding: 0.95rem 1.4rem; font-size: 0.9rem; }

  .page-hero { padding-top: clamp(6.5rem, 16vw, 9rem); padding-bottom: 2.5rem; }
  .page-hero h1 { font-size: clamp(2.2rem, 8vw, 3.2rem); }
  .page-hero p { font-size: 1.05rem; }

  .manifesto__grid { gap: 1.5rem; }
  .manifesto h2 { font-size: clamp(1.7rem, 6vw, 2.4rem); }

  .service h3 { font-size: 1.3rem; }
  .services__grid { gap: 1.5rem; }

  .work-item__copy h3 { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .work__list { gap: 2.5rem; }

  .why__media { max-width: 100%; aspect-ratio: 5/4; }

  .founder { padding: 0; }
  .founder__photo { max-width: 100%; aspect-ratio: 4/5; }
  .founder__copy h3 { font-size: clamp(1.7rem, 6.5vw, 2.3rem); }
  .founder__socials { flex-wrap: wrap; }

  .cta-card { padding: 3rem 1.5rem; }
  .cta-card h2 { font-size: clamp(2rem, 8vw, 3rem); }
  .cta-card p { font-size: 1rem; }
  .cta-card__ctas { gap: 0.6rem; flex-direction: column; align-items: stretch; }
  .cta-card__ctas .btn { width: 100%; justify-content: center; }

  .footer__top { gap: 2rem; padding-bottom: 2rem; }
  .footer__brand p { max-width: none; }

  .modal { border-radius: var(--r-md); }
  .modal__body h2 { font-size: clamp(1.5rem, 6.5vw, 2rem); }
  .modal__image { aspect-ratio: 16/11; }
  .modal__cta { flex-direction: column; align-items: stretch; }
  .modal__cta .btn { width: 100%; justify-content: center; }

  .includes-grid { gap: 0.8rem; }
  .include-card { padding: 1.4rem; }

  .deliverable { padding: 0.95rem 1.1rem; font-size: 0.92rem; }

  .chips { gap: 0.4rem; padding: 0 0.5rem; }
  .chip { padding: 0.55rem 0.95rem; font-size: 0.72rem; }

  .stat { padding: 2rem 0.75rem; }
  .stat__num { font-size: clamp(2rem, 8vw, 2.8rem); }

  /* Contact page tiles */
  .contact-tile { padding: 1.15rem 1.25rem; gap: 0.3rem; }
  .contact-tile__icon { width: 34px; height: 34px; margin-bottom: 0.35rem; }
  .contact-tile strong { font-size: 0.96rem; }
  .contact-tile__sub { font-size: 0.78rem; }

  /* Contact page embed frames — shrink min-height so they fit phone viewport */
  .embed-frame { padding: 0.6rem; border-radius: var(--r-md); }
  .embed-frame iframe { border-radius: var(--r-sm); }
  #fI738hjFz9HzZuCgWiru_booking { min-height: 600px !important; }
  #inline-OJrsLsroU01TLcMKWPGA { height: 620px !important; }

  /* About 4-col principles — make 2-col cards tighter on phones */
  .includes-grid--four { gap: 0.75rem; }

  /* Testimonials — slightly tighter padding inside cards on mobile */
  .testimonial { padding: 1.4rem 1.35rem; }
  .testimonial p { font-size: 0.94rem; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: 2.3rem; line-height: 1; }
  .nav-shell { padding: 0 0.5rem 0 0.85rem; }
  .nav-logo img { height: 40px; }

  /* Even smaller contact tile + tighter embed */
  .contact-tile { padding: 1rem 1.1rem; }
  #fI738hjFz9HzZuCgWiru_booking { min-height: 560px !important; }
  #inline-OJrsLsroU01TLcMKWPGA { height: 580px !important; }
}

/* =====================================================================
   Utility + inner page support
   ===================================================================== */
.text-center { text-align: center; }
.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;
}

.service-detail__intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.service-detail__intro img { border-radius: var(--r-md); box-shadow: var(--sh-card); }
@media (max-width: 880px) { .service-detail__intro { grid-template-columns: 1fr; } }

.includes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);     /* fixed 3-col so 6 items = clean 2x3 */
  gap: 1.1rem;
}
@media (max-width: 880px) { .includes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .includes-grid { grid-template-columns: 1fr; } }

.include-card {
  padding: 1.85rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  transition: all 380ms var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.include-card:hover {
  border-color: var(--navy);
  transform: translateY(-3px);
  box-shadow: var(--sh-card);
}
/* Numbered chip at top of each card (used by service pages) */
.include-card__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
}
.include-card h4 {
  font-size: 1.1rem;
  margin: 0;
  color: var(--ink);
  display: block;                              /* not flex — icon removed */
  letter-spacing: -0.02em;
}
.include-card h4 svg {
  display: none !important;                     /* kill stray inline svgs */
}
.include-card p { color: var(--slate); font-size: 0.92rem; margin: 0; line-height: 1.55; max-width: none; }

/* === Founder section — un-carded (plain layout, no background/border) === */
.founder {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Old bullet style — kept for back-compat. New pages use .deliverables-grid */
.deliverables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-top: 1.5rem;
}
.deliverables li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.45rem 0;
  color: var(--ink);
  font-size: 0.95rem;
}
.deliverables li::before {
  content: "—";
  color: var(--navy);
  font-weight: 700;
  flex: 0 0 16px;
}
@media (max-width: 600px) { .deliverables { grid-template-columns: 1fr; } }

/* === New deliverables-grid — card-style items with check chips === */
.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}
@media (max-width: 720px) { .deliverables-grid { grid-template-columns: 1fr; } }
.deliverable {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.35rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-size: 0.96rem;
  color: var(--ink);
  font-weight: 500;
  transition: all 280ms var(--ease-out);
}
.deliverable:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: var(--sh-card);
}
.deliverable::before {
  content: "✓";
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
}

/* === Service detail intro — TEXT FLAT, image in a rounded shadowed frame === */
.service-detail__intro {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.service-detail__intro > div:first-child {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
/* Only the image-containing column gets the rounded/shadow treatment */
.service-detail__intro > div:nth-child(2) {
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}
.service-detail__intro > div:nth-child(2) img,
.service-detail__media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 900ms var(--ease-out);
}
.service-detail__intro > div:nth-child(2):hover img,
.service-detail__media:hover img {
  transform: scale(1.04);
}

/* === Principles grid (4 items, balanced) — used on About page === */
.includes-grid--four {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px) {
  .includes-grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .includes-grid--four { grid-template-columns: 1fr; }
}

/* === GLOBAL HOVER SCALE on flat images ===
   Founder photo, modal image, why media, hero rating image — anywhere
   imagery sits without an existing hover effect, give it the subtle bounce. */
.founder__photo,
.modal__image,
.why__media {
  overflow: hidden;
}
.founder__photo img,
.modal__image img,
.why__media img,
.hero__rating-card img {
  transition: transform 900ms var(--ease-out);
}
.founder__photo:hover img,
.modal__image:hover img,
.why__media:hover img {
  transform: scale(1.04);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.team-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all 380ms var(--ease-out);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--sh-card); }
.team-card__photo { aspect-ratio: 1; background: linear-gradient(135deg, var(--navy), var(--navy-deep)); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__body { padding: 1.25rem; }

.blog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.2vw, 1.75rem); }
@media (max-width: 880px) { .blog-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .blog-list { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
.blog-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; transition: all 380ms var(--ease-out); }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--sh-card); }
.blog-card__media { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--navy), var(--navy-bright)); }
.blog-card__body { padding: 1.6rem 1.5rem 1.75rem; }
.blog-card__meta { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.85rem; }
.blog-card__meta span { color: var(--orange-1); }
.blog-card__body h3 { font-size: 1.3rem; line-height: 1.22; letter-spacing: -0.02em; margin: 0 0 0.7rem; }
.blog-card__body p { color: var(--slate); line-height: 1.6; margin: 0; font-size: 0.96rem; }

.legal-prose { max-width: 760px; margin: 0 auto; }
.legal-prose h2 { font-size: 1.4rem; margin-top: 2.5rem; }
.legal-prose p, .legal-prose li { color: var(--slate); }

/* =====================================================================
   SECTION BANDS — branded color alternation so the page isn't all white.
   No beige. Alternating: white ↔ navy gradient. */
.section--band-paper,
.section--band-blue   { /* legacy class names → redirect to navy gradient */
  position: relative;
  background: linear-gradient(135deg, var(--navy-ink) 0%, var(--navy) 55%, var(--navy-deep, #0c2740) 100%) !important;
  color: var(--white);
  overflow: hidden;
}
.section--band-paper::before,
.section--band-blue::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 20% 25%, rgba(255, 255, 255, 0.07), transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 75%, rgba(91, 156, 214, 0.22), transparent 60%);
  pointer-events: none;
}
.section--band-paper > .container,
.section--band-blue > .container { position: relative; z-index: 1; }

/* Typography swap on navy-gradient bands */
.section--band-paper h1, .section--band-paper h2, .section--band-paper h3, .section--band-paper h4,
.section--band-blue h1, .section--band-blue h2, .section--band-blue h3, .section--band-blue h4 { color: var(--white); }
.section--band-paper p, .section--band-blue p { color: rgba(255, 255, 255, 0.82); }
.section--band-paper .eyebrow, .section--band-blue .eyebrow,
.section--band-paper .mono, .section--band-blue .mono { color: rgba(255, 255, 255, 0.7); }

/* Light-pulse override for em on ANY dark/navy band (replaces invisible navy-on-navy) */
.section--band-paper :is(h1, h2, h3, h4) em,
.section--band-blue :is(h1, h2, h3, h4) em,
.section--demos-band :is(h1, h2, h3, h4) em,
.section--band-ink :is(h1, h2, h3, h4) em {
  background: linear-gradient(120deg,
    #BFE0FF 0%,
    #FFFFFF 25%,
    #7FC4FF 50%,
    #FFFFFF 75%,
    #BFE0FF 100%) !important;
  background-size: 220% 100% !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: pulseShift 4s var(--ease-in-out) infinite !important;
}
@keyframes pulseLightEm {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Service cards on the dark band — equal-height white cards */
.section--band-paper .services__grid,
.section--band-blue .services__grid {
  align-items: stretch;
}
.section--band-paper .service,
.section--band-blue .service {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Push the "Learn more" arrow to the bottom of every card so they align */
.section--band-paper .service .service__link,
.section--band-blue .service .service__link { margin-top: auto; }
.section--band-paper .service .service__media,
.section--band-blue .service .service__media {
  border-radius: var(--r-md);
  margin-bottom: 0.25rem;
}

/* Process steps on dark band — clean numbered cards, no random dark border lines */
.section--band-paper .process__step,
.section--band-blue .process__step {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 2rem 1.5rem 1.75rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  border-top: 0 !important;   /* kill the dark accent line */
  position: relative;
  height: 100%;
}
.section--band-paper .process__step::before,
.section--band-blue .process__step::before {
  display: none !important;
}
.section--band-paper .process__step .mono,
.section--band-blue .process__step .mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: 36px;
  padding: 0 1rem;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-ink) 100%);
  color: var(--white) !important;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 1.25rem;
  box-shadow: 0 6px 16px rgba(35, 92, 135, 0.32);
}
.section--band-paper .process__step h3,
.section--band-blue .process__step h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.55rem;
  letter-spacing: -0.015em;
}
.section--band-paper .process__step p,
.section--band-blue .process__step p {
  color: var(--slate);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

/* Stat cards / why cards on the dark band */
.section--band-paper .why-card,
.section--band-blue .why-card,
.section--band-paper .stat-card,
.section--band-blue .stat-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

/* Equal-height services grid on white background too */
.services__grid { align-items: stretch; }
.service { height: 100%; display: flex; flex-direction: column; }
.service .service__link { margin-top: auto; }
.section--band-paper .service h3, .section--band-blue .service h3,
.section--band-paper .process__step h3, .section--band-blue .process__step h3,
.section--band-paper .why-card h4, .section--band-blue .why-card h4 { color: var(--ink); }
.section--band-paper .service p, .section--band-blue .service p,
.section--band-paper .process__step p, .section--band-blue .process__step p,
.section--band-paper .why-card p, .section--band-blue .why-card p { color: var(--slate); }
.section--band-paper .service em, .section--band-blue .service em,
.section--band-paper .process__step em, .section--band-blue .process__step em,
.section--band-paper .why-card em, .section--band-blue .why-card em {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--orange);
  animation: none;
}

.section--band-ink    { background: var(--navy-ink) !important; color: var(--paper); }
.section--band-ink h2, .section--band-ink h3, .section--band-ink h4 { color: var(--white); }
.section--band-ink p  { color: rgba(255, 255, 255, 0.78); }

/* Live Demos band — same gradient feel as the floating CTA card */
.section--demos-band {
  position: relative;
  background: linear-gradient(135deg, var(--navy-ink) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color: var(--paper);
  overflow: hidden;
}
.section--demos-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 20% 25%, rgba(255, 255, 255, 0.07), transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 75%, rgba(35, 92, 135, 0.35), transparent 60%);
  pointer-events: none;
}
.section--demos-band > .container { position: relative; }

/* Demo card on dark gradient — keep white card body, tighten footer whitespace */
.section--demos-band .demo-card {
  background: var(--white);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
.section--demos-band .demo-card__body {
  padding: 1.25rem 1.5rem 1.4rem;
}
.section--demos-band .demo-card__body p { margin-bottom: 0; }

/* =====================================================================
   DUAL FOUNDER GRID (Cody + Jack on About page)
   ===================================================================== */
.team-grid--dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 880px) { .team-grid--dual { grid-template-columns: 1fr; } }
.team-grid--solo { grid-template-columns: 1fr; max-width: 560px; }
/* Team members render visibly smaller than the owner card (~60%) */
.team-grid--compact { max-width: 700px; }
.team-grid--compact .team-card__body h3 { font-size: 1.1rem; }
.team-grid--compact .team-card__body p { font-size: 0.86rem; line-height: 1.55; }
.team-grid--compact .team-card__role { font-size: 0.66rem; }
@media (max-width: 880px) { .team-grid--compact { max-width: 340px; } }
.team-card__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-ink) 100%);
}
.team-card__initials {
  display: none;
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.85);
}
.team-card__photo--placeholder .team-card__initials { display: block; }
.team-card--big {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
}
.team-card--big:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.team-card--big .team-card__photo {
  aspect-ratio: 5/6;
  overflow: hidden;
}
.team-card--big .team-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 900ms var(--ease-out);
}
.team-card--big:hover .team-card__photo img { transform: scale(1.04); }
.team-card--big .team-card__body { padding: 1.5rem 1.75rem 1.75rem; }
.team-card--big h3 { font-size: 1.4rem; margin-bottom: 0.3em; color: var(--ink); }
.team-card--big .team-card__role {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
  margin-bottom: 0.85rem;
  display: block;
}
.team-card--big p { font-size: 0.95rem; color: var(--slate); margin: 0 0 1rem; max-width: none; }

/* =====================================================================
   VIDEO TESTIMONIALS — featured video cards
   ===================================================================== */
.video-test-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
@media (max-width: 880px) { .video-test-grid { grid-template-columns: 1fr; } }

.video-test {
  position: relative;
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: var(--sh-card);
  transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
}
.video-test:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lift);
}
.video-test video, .video-test img.video-test__poster {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--ink);
  display: block;
}
.video-test__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 36px rgba(14, 27, 44, 0.25);
  transition: transform 280ms var(--ease-out), background 280ms;
  z-index: 2;
}
.video-test__play:hover {
  background: var(--navy);
  color: var(--white);
  transform: translate(-50%, -50%) scale(1.06);
}
.video-test__play svg { width: 26px; height: 26px; margin-left: 4px; }
.video-test.is-playing .video-test__play { opacity: 0; pointer-events: none; }
.video-test__body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.video-test__client {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
  margin-bottom: 0.4rem;
  display: block;
}
.video-test__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 0.3em;
}
.video-test__role {
  font-size: 0.86rem;
  color: var(--slate);
  margin: 0;
}

/* =====================================================================
   FAQ ACCORDION — pre-objection handling
   ===================================================================== */
.faq-list {
  max-width: 880px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--rule);
}
.faq-item:first-child { border-top: 1px solid var(--rule); }
.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.4rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color 200ms;
}
.faq-item__q:hover { color: var(--navy); }
.faq-item__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--soft-blue);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform 280ms var(--ease-out), background 200ms;
  font-size: 1.05rem;
  font-weight: 700;
}
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); background: var(--navy); color: var(--white); }
.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 380ms var(--ease-out), padding 380ms var(--ease-out);
}
.faq-item.is-open .faq-item__a {
  max-height: 400px;
  padding-bottom: 1.4rem;
}
.faq-item__a p {
  margin: 0;
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.6;
  max-width: 70ch;
}

/* =====================================================================
   LEAD-MAGNET POPUP
   ===================================================================== */
.lm-pop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(14, 27, 44, 0.72);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms, visibility 320ms;
}
.lm-pop.is-open { opacity: 1; visibility: visible; }
.lm-pop__shell {
  border-radius: var(--r-lg);
  max-width: 560px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
  transform: scale(0.96);
  transition: transform 380ms var(--ease-out);
  position: relative;
}
.lm-pop.is-open .lm-pop__shell { transform: scale(1); }
.lm-pop__panel {
  background: linear-gradient(135deg, var(--navy-ink) 0%, var(--navy) 55%, var(--navy-deep, #0c2740) 100%);
  color: var(--white);
  padding: clamp(2.25rem, 5vw, 3rem);
  position: relative;
  overflow: hidden;
  text-align: left;
}
.lm-pop__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 15%, rgba(91, 156, 214, 0.30), transparent 60%),
    radial-gradient(ellipse 50% 60% at 15% 90%, rgba(255, 255, 255, 0.08), transparent 60%);
  pointer-events: none;
}
.lm-pop__panel > * { position: relative; }
.lm-pop__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 1rem;
  display: inline-block;
}
.lm-pop__panel h3 {
  font-size: clamp(1.7rem, 3.2vw, 2.25rem);
  color: var(--white);
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
  line-height: 1.1;
}
.lm-pop__panel h3 em {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(90deg, #BFE0FF, #FFFFFF, #BFE0FF);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pulseLight 3s ease-in-out infinite;
}
.lm-pop__panel p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.5rem;
  font-size: 0.98rem;
  line-height: 1.55;
}
.lm-pop__bullets { display: grid; gap: 0.5rem; padding: 0; margin: 0 0 1.75rem; list-style: none; }
.lm-pop__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.94rem;
}
.lm-pop__bullets li::before {
  content: "✓";
  color: #7FC4FF;
  flex: 0 0 18px;
  font-weight: 700;
}
.lm-pop__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  cursor: pointer;
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms, transform 200ms;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
}
.lm-pop__close:hover { background: rgba(255, 255, 255, 0.28); transform: rotate(90deg); }
.lm-pop__ctas { display: flex; flex-direction: column; gap: 0.85rem; }
.lm-pop__bookcall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem 1.4rem;
  background: var(--white) !important;
  color: var(--navy-ink) !important;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--r-pill);
  transition: transform 220ms cubic-bezier(.34,1.56,.64,1), box-shadow 220ms;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.lm-pop__bookcall:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32);
}
.lm-pop__altcta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  transition: transform 220ms cubic-bezier(.34,1.56,.64,1), text-decoration-color 200ms;
}
.lm-pop__altcta:hover { transform: translateY(-2px); text-decoration-color: var(--white); }
@keyframes pulseLight {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (max-width: 540px) {
  .lm-pop__panel { padding: 2rem 1.5rem; }
}

.booking-card { padding: 2rem; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--sh-card); }
.booking-placeholder { min-height: 460px; background: var(--paper); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; border: 1px dashed var(--rule-strong); }

/* === Contact page tiles + embed frames === */
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 880px) { .contact-info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .contact-info-grid { grid-template-columns: 1fr; } }

.contact-tile {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.4rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: all 280ms var(--ease-out);
}
a.contact-tile:hover {
  border-color: var(--navy);
  transform: translateY(-3px);
  box-shadow: var(--sh-card);
}
.contact-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--soft-blue);
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.contact-tile__icon svg { width: 18px; height: 18px; }
.contact-tile__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}
.contact-tile strong {
  font-size: 1.02rem;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.contact-tile__sub { color: var(--mute); font-size: 0.85rem; }

.embed-frame {
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(1rem, 2vw, 1.5rem);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.embed-frame iframe {
  width: 100%;
  border: 0;
  display: block;
  border-radius: var(--r-md);
}

.contact-info ul { margin-top: 2rem; display: grid; gap: 1.25rem; }
.contact-info li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-info__icon { width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--soft-blue); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; }
.contact-info__icon svg { width: 18px; height: 18px; }
.contact-info strong { display: block; color: var(--ink); font-weight: 600; }
.contact-info span { color: var(--slate); font-size: 0.92rem; }
.contact-info a { color: var(--ink); font-weight: 500; }
.contact-info a:hover { color: var(--navy); }

/* =====================================================================
   COMPARISON SECTION — Stryker-style Them vs Us
   ===================================================================== */
.compare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 880px) { .compare__grid { grid-template-columns: 1fr; } }

.compare__col {
  position: relative;
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  overflow: hidden;
  border: 1px solid var(--rule);
}
.compare__col--them {
  background: linear-gradient(180deg, #1a1a1f 0%, #0c0c10 100%);
  color: rgba(255,255,255,0.78);
  border-color: rgba(216, 65, 65, 0.25);
}
.compare__col--them::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(216, 65, 65, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(216, 65, 65, 0.10), transparent 60%);
  pointer-events: none;
}
.compare__col--us {
  background: linear-gradient(180deg, #103a5e 0%, #061a30 100%);
  color: rgba(255,255,255,0.92);
  border-color: rgba(91, 156, 214, 0.30);
}
.compare__col--us::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(91, 156, 214, 0.20), transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(255, 255, 255, 0.06), transparent 60%);
  pointer-events: none;
}
.compare__col > * { position: relative; }

.compare__head { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.10); position: relative; }
.compare__tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.compare__col--them .compare__tag { color: #FF8585; }
.compare__col--us .compare__tag { color: #BFE0FF; }
.compare__col--them .compare__x { color: #FF8585; font-size: 0.85rem; }
.compare__col--us .compare__tag .compare__check { color: #BFE0FF; font-size: 0.85rem; }

.compare__head h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.compare__col--them h3 { color: #ffffff; }
.compare__col--us h3 {
  background: linear-gradient(90deg, #BFE0FF, #FFFFFF, #BFE0FF);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: pulseShift 5s ease-in-out infinite;
}
.compare__head p { color: rgba(255,255,255,0.65); font-size: 0.95rem; margin: 0; }
.compare__corner {
  position: absolute; top: 0; right: 0;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.compare__rows { display: grid; gap: 1.1rem; margin: 0; padding: 0; }
.compare__row dt {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.compare__col--them dt { color: rgba(255, 133, 133, 0.85); }
.compare__col--us dt   { color: rgba(191, 224, 255, 0.85); }
.compare__row dd { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.4; display: flex; align-items: flex-start; gap: 0.55rem; }
.compare__col--them dd s { color: rgba(255,255,255,0.55); }
.compare__col--us dd .compare__check { color: #7FC4FF; flex-shrink: 0; font-weight: 700; }

/* =====================================================================
   CODY BAND — homepage founder section, simple 2-col, full-bleed
   (named .cody-band on purpose to avoid colliding with the about-page
    .founder card styles at line ~2030)
   ===================================================================== */
.cody-band { padding: clamp(5rem, 9vw, 7rem) 0; }
.cody-band__row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.cody-band__photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}
.cody-band__text h2 {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 1rem 0 1.5rem;
}
.cody-band__text p {
  color: var(--slate);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 2rem;
}
/* light variant (breaks blue-on-blue before testimonials) */
.cody-band--light { background: var(--soft-blue); }
.cody-band--light .cody-band__text { color: var(--ink); }
.cody-band--light .cody-band__text h2 { color: var(--ink); }
.cody-band--light .cody-band__photo { box-shadow: 0 24px 56px rgba(14,27,44,0.18); }
@media (max-width: 880px) {
  .cody-band__row { grid-template-columns: 1fr; gap: 2rem; }
  .cody-band__photo { max-width: 320px; margin: 0 auto; }
}

/* =====================================================================
   VIDEO TESTIMONIAL WIDGETS (placeholders)
   ===================================================================== */
.video-testi__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
@media (max-width: 880px) { .video-testi__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .video-testi__grid { grid-template-columns: 1fr; } }

.video-testi {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(15, 39, 64, 0.10);
  transition: transform 280ms, border-color 280ms, box-shadow 280ms;
}
.video-testi:hover {
  transform: translateY(-4px);
  border-color: var(--navy);
  box-shadow: 0 18px 40px rgba(15, 39, 64, 0.18);
}
.video-testi__media {
  position: relative; aspect-ratio: 9/14;
  background: linear-gradient(180deg, var(--navy-ink) 0%, var(--navy) 100%);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.85rem;
}
.video-testi__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--navy-ink);
  display: block;
}
.video-testi__placeholder {
  width: 64px; height: 64px;
  background: rgba(255,255,255,0.18); color: var(--white);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; padding-left: 4px;
  backdrop-filter: blur(8px);
  transition: background 200ms, transform 200ms;
}
.video-testi:hover .video-testi__placeholder {
  background: rgba(255,255,255,0.32);
  transform: scale(1.08);
}
.video-testi__pending {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.video-testi__body {
  padding: 1rem 1.1rem 1.1rem;
  color: var(--ink);
  background: var(--white);
  border-top: 1px solid var(--rule);
}
.video-testi__body strong {
  display: block; font-weight: 600; font-size: 0.98rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.video-testi__role {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy);
}

/* Service-page intro h2 — give the headline breathing room and balanced wrapping */
.service-detail__h2 {
  text-wrap: balance;
  line-height: 1.1;
  margin-bottom: 1.5rem !important;
}
.service-detail__sub { margin-top: 0; }

.written-divider {
  display: flex; align-items: center; gap: 1rem;
  margin: 2rem 0 2.5rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--steel);
}
.written-divider::before, .written-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
/* On the navy testimonials band the divider must read light, not dark */
.section--band-blue .written-divider { color: rgba(255, 255, 255, 0.72); }
.section--band-blue .written-divider::before,
.section--band-blue .written-divider::after { background: rgba(255, 255, 255, 0.22); }

/* =====================================================================
   CASE STUDY CARDS — marketing results first (work page)
   ===================================================================== */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
@media (max-width: 960px) { .case-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

.case-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 2rem 1.75rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.30);
}
.case-card__stat {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.case-card__num {
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(120deg, var(--navy) 0%, #5B9CD6 60%, var(--navy) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pulseShift 5s var(--ease-in-out) infinite;
}
.case-card__statlabel {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  max-width: 9rem;
  line-height: 1.4;
}
.case-card__tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.35rem;
}
.case-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.case-card__rows { display: grid; gap: 0.9rem; margin-bottom: 1.5rem; }
.case-card__row span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.25rem;
}
.case-card__row p { font-size: 0.92rem; color: var(--slate); line-height: 1.55; margin: 0; }
.case-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--navy);
  transition: gap 200ms;
}
.case-card__link:hover { gap: 0.85rem; color: var(--navy-ink); }
.case-card__link .arrow { width: 14px; height: 14px; }

/* About — "What We Believe" stacking reveal principle cards */
.principles { display: grid; gap: 1rem; max-width: 940px; margin: 0 auto; }
.principle {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.1rem, 4vw, 2.5rem);
  align-items: center;
  background: #fff;
  border: 1px solid rgba(19,50,82,0.08);
  border-radius: 16px;
  padding: clamp(1.4rem, 3vw, 2.15rem) clamp(1.5rem, 3.5vw, 2.75rem);
  overflow: hidden;
  box-shadow: 0 8px 22px -16px rgba(8,20,36,0.45);
  transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out), box-shadow 350ms ease, border-color 350ms ease;
}
.principle:hover { box-shadow: 0 26px 54px -30px rgba(8,20,36,0.62); border-color: rgba(242,101,34,0.30); }
.principle:hover .principle__num { opacity: 0.55; }
/* orange accent bar fills left-to-right as each card reveals, staggered 01→04 */
.principle__bar {
  position: absolute; top: 0; left: 0; height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--orange-1), var(--orange-2));
  transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--ease-out);
  transition-delay: 250ms;
}
.principle[data-delay="100"] .principle__bar { transition-delay: 400ms; }
.principle[data-delay="200"] .principle__bar { transition-delay: 550ms; }
.principle[data-delay="300"] .principle__bar { transition-delay: 700ms; }
.principle.is-visible .principle__bar { transform: scaleX(1); }
.principle__num {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 3.3rem); line-height: 1; letter-spacing: -0.02em;
  color: var(--navy); opacity: 0.28;
  transition: opacity 350ms ease;
}
.principle__body h4 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); letter-spacing: -0.01em; margin-bottom: 0.4rem; }
.principle__body p { color: var(--slate); line-height: 1.6; margin: 0; max-width: 62ch; }
@media (max-width: 600px) {
  .principle { grid-template-columns: 1fr; gap: 0.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .principle__bar { transition: none; transform: scaleX(1); }
}

/* Content-production filterable work grid */
.cp-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; margin: 0 auto clamp(2rem, 4vw, 2.75rem); }
.cp-chip {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.6rem 1.25rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.28);
  background: transparent; color: rgba(255,255,255,0.82); cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.cp-chip:hover { border-color: rgba(255,255,255,0.65); color: #fff; }
.cp-chip.is-active { background: #fff; color: var(--navy-ink); border-color: #fff; }
.cp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 1.6vw, 1.25rem); }
.cp-tile {
  position: relative; cursor: pointer; padding: 0; border: 0;
  background: var(--navy-ink); border-radius: 14px; overflow: hidden;
  box-shadow: 0 14px 34px -22px rgba(0,0,0,0.6);
  transition: transform .3s ease, box-shadow .3s ease;
}
.cp-tile:hover { transform: translateY(-4px); box-shadow: 0 24px 52px -26px rgba(0,0,0,0.78); }
.cp-tile__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--navy-ink); }
.cp-tile__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; transition: transform .5s var(--ease-out); }
.cp-tile:hover .cp-tile__media img { transform: scale(1.06); }
.cp-tile__play {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(242,101,34,0.94); color: #fff; border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.cp-tile__play svg { width: 24px; height: 24px; margin-left: 3px; }
/* meta hidden by default, revealed on hover/focus as an overlay */
.cp-tile__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 1.6rem 1rem 0.9rem; text-align: left;
  background: linear-gradient(to top, rgba(8,16,28,0.92), rgba(8,16,28,0));
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.cp-tile:hover .cp-tile__meta, .cp-tile:focus-visible .cp-tile__meta { opacity: 1; transform: none; }
.cp-tile__name { font-weight: 600; color: #fff; font-size: 0.96rem; line-height: 1.25; }
.cp-tile__cat { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
@media (max-width: 880px) { .cp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cp-grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; } }

/* Content-production gallery masonry (lookbook) */
.cp-masonry { columns: 3 280px; column-gap: 1rem; }
.cp-ms-item { display: block; width: 100%; margin: 0 0 1rem; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 14px; overflow: hidden; break-inside: avoid; box-shadow: 0 12px 30px -22px rgba(8,20,36,0.5); }
.cp-ms-item img { width: 100%; display: block; transition: transform .5s var(--ease-out); }
.cp-ms-item:hover img { transform: scale(1.05); }
@media (max-width: 560px) { .cp-masonry { columns: 2 150px; } }

/* Shared image lightbox */
.cp-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(8,16,28,0.93); display: flex; align-items: center; justify-content: center; padding: 4vw; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.cp-lightbox.is-open { opacity: 1; visibility: visible; }
.cp-lightbox__img { max-width: 92vw; max-height: 88vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.cp-lightbox__video { max-width: 92vw; max-height: 88vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); background: #000; }
.cp-lightbox__close { position: absolute; top: 24px; right: 28px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.92); color: #0e1b2c; font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* Recent-work case cards on service pages */
.svc-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2vw, 1.6rem);
}
.svc-case {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 18px 44px -26px rgba(8,20,36,0.65);
  transition: transform .3s ease, box-shadow .3s ease;
}
.svc-case:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -28px rgba(8,20,36,0.8); }
.svc-case__img { aspect-ratio: 3/4; overflow: hidden; background: var(--navy-ink); }
.svc-case__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); }
.svc-case:hover .svc-case__img img { transform: scale(1.05); }
.svc-case__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
}
.svc-case__logo { height: 30px; max-width: 130px; width: auto; object-fit: contain; }
.svc-case__link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy); white-space: nowrap; font-weight: 600;
}
.svc-case__link .arrow { width: 14px; height: 14px; transition: transform .25s ease; }
.svc-case:hover .svc-case__link .arrow { transform: translateX(4px); }
@media (max-width: 860px) {
  .svc-cases { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; }
}

/* Logo above case-panel titles (homepage) — white chip so any logo reads on navy */
.case-panel__logo {
  display: inline-block;
  height: 30px; width: auto; max-width: 150px; object-fit: contain;
  background: #fff; padding: 6px 10px; border-radius: 8px;
  margin-bottom: 0.85rem;
}

/* Work-page infographic case cards */
.cwgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 860px) { .cwgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cwgrid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
.cwcard {
  border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left;
  background: var(--white); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 16px 38px rgba(0,0,0,0.22);
  display: flex; flex-direction: column;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.cwcard:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(0,0,0,0.32); }
.cwcard__img { aspect-ratio: 3/4; overflow: hidden; background: var(--navy-ink); }
.cwcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); }
.cwcard:hover .cwcard__img img { transform: scale(1.04); }
.cwcard__stat {
  aspect-ratio: 3/4; display: flex; flex-direction: column; justify-content: center; gap: 0.4rem;
  padding: 1.75rem; color: #fff;
  background: linear-gradient(150deg, var(--navy-ink) 0%, var(--navy) 60%, var(--navy-deep,#0c2740) 100%);
}
.cwcard__num { font-size: clamp(3rem,6vw,4.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; }
.cwcard__statlbl { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.cwcard__tag { margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.cwcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1.1rem; border-top: 1px solid var(--rule); }
.cwcard__logo { height: 26px; width: auto; max-width: 130px; object-fit: contain; }
.cwcard__foot strong { font-size: 0.95rem; color: var(--ink); }
.cwcard__watch { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); white-space: nowrap; }
.cwcard__watch .arrow { width: 12px; height: 12px; }

/* Case-study modal: logo + google-review proof */
.cs__logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; margin-bottom: 0.75rem; }

/* Image magnetic + pop — applies to flagged media wrappers site-wide */
.img-pop { transition: transform 320ms cubic-bezier(.34,1.56,.64,1), box-shadow 320ms; will-change: transform; }
.img-pop:hover { box-shadow: 0 30px 60px rgba(14,27,44,0.30); }

/* Wide case card with proof image (HealthShield heatmap) */
.case-card--wide { grid-column: span 2; }
@media (max-width: 960px) { .case-card--wide { grid-column: span 1; } }
.case-card__split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center; }
@media (max-width: 760px) { .case-card__split { grid-template-columns: 1fr; } }
.case-card__proof {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: 0 12px 30px rgba(14, 27, 44, 0.16);
}
.case-card__proof img { width: 100%; height: auto; display: block; }
.case-card__proof figcaption {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  padding: 0.6rem 0.85rem;
  background: var(--paper);
  text-align: center;
}

/* =====================================================================
   180-DAY TIMELINE — live engagement preview (homepage process section)
   ===================================================================== */
.timeline {
  background: rgba(5, 14, 26, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  max-width: 880px;
  margin: 0 auto;
  backdrop-filter: blur(6px);
}
.timeline__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.timeline__live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #6EE7A0;
}
.timeline__live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6EE7A0;
  animation: timelinePulse 2s ease-in-out infinite;
}
@keyframes timelinePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110, 231, 160, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(110, 231, 160, 0); }
}

.timeline__row {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid;
  margin-bottom: 0.7rem;
  transition: transform 260ms var(--ease-out), background 260ms;
}
.timeline__row:hover { transform: translateX(6px); }
.timeline__day {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.timeline__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.timeline__task { color: var(--white); font-size: 1.02rem; font-weight: 500; line-height: 1.35; }
.timeline__status {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* status themes */
.timeline__row.is-done {
  background: rgba(110, 231, 160, 0.06);
  border-color: rgba(110, 231, 160, 0.22);
}
.timeline__row.is-done .timeline__day,
.timeline__row.is-done .timeline__status { color: #6EE7A0; }
.timeline__row.is-done .timeline__dot { background: #6EE7A0; }

.timeline__row.is-active {
  background: rgba(127, 196, 255, 0.07);
  border-color: rgba(127, 196, 255, 0.26);
}
.timeline__row.is-active .timeline__day,
.timeline__row.is-active .timeline__status { color: #7FC4FF; }
.timeline__row.is-active .timeline__dot {
  background: #7FC4FF;
  animation: timelinePulse 2.4s ease-in-out infinite;
}

.timeline__row.is-pending {
  background: rgba(245, 185, 92, 0.06);
  border-color: rgba(245, 185, 92, 0.24);
}
.timeline__row.is-pending .timeline__day,
.timeline__row.is-pending .timeline__status { color: #F5B95C; }
.timeline__row.is-pending .timeline__dot { background: #F5B95C; }

/* outcome footer card */
.timeline__outcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.4rem;
  padding: 1.4rem 1.5rem;
  border-radius: 14px;
  border: 1px solid rgba(127, 196, 255, 0.30);
  background: rgba(127, 196, 255, 0.06);
}
.timeline__outcome-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(127, 196, 255, 0.85);
  margin-bottom: 0.4rem;
}
.timeline__outcome-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1.05;
}
.timeline__outcome-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(120deg, #BFE0FF 0%, #FFFFFF 50%, #BFE0FF 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pulseShift 5s var(--ease-in-out) infinite;
}
.timeline__outcome-arrow { width: 38px; height: 38px; color: #7FC4FF; flex-shrink: 0; }

@media (max-width: 680px) {
  .timeline__row { grid-template-columns: 1fr; gap: 0.4rem; padding: 0.9rem 1rem; }
  .timeline__status { justify-self: start; }
  .timeline__row:hover { transform: none; }
}

/* CTA-card trust row — Stryker end-CTA pattern */
.cta-card__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.cta-card__trust span::before {
  content: "✓ ";
  color: #7FC4FF;
  font-weight: 700;
}

/* =====================================================================
   CASE STACK — sticky stacking case-study panels (homepage)
   ===================================================================== */
.case-stack { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.case-panel {
  position: sticky;
  top: calc(var(--header-h) + 24px + (var(--stack-i) * 18px));
  background: linear-gradient(135deg, var(--navy-ink) 0%, var(--navy) 60%, var(--navy-deep, #0c2740) 100%);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(14, 27, 44, 0.30);
  color: var(--white);
}
.case-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 18% 20%, rgba(255, 255, 255, 0.07), transparent 60%),
    radial-gradient(ellipse 45% 55% at 88% 80%, rgba(91, 156, 214, 0.22), transparent 60%);
  pointer-events: none;
}
.case-panel__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) 1.4fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2rem, 4.5vw, 3.5rem);
}
@media (max-width: 760px) {
  .case-panel__inner { grid-template-columns: 1fr; gap: 1.25rem; }
  .case-panel { position: static; }
}
.case-panel__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(191, 224, 255, 0.85);
  margin-bottom: 0.85rem;
}
.case-panel__stat {
  font-size: clamp(4.5rem, 9vw, 7.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.95;
  color: var(--white);
}
.case-panel__stat .accent { color: var(--orange); }
.case-panel__statlabel {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
/* Testimonial card image in the left of each home case-panel */
.case-panel__img { width: 100%; max-width: 264px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 22px 34px rgba(8,20,36,0.5)); transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), filter 0.3s var(--ease-out); cursor: pointer; }
.case-panel__img:hover { transform: translateY(-9px) scale(1.03); filter: drop-shadow(0 32px 46px rgba(8,20,36,0.58)); }
.case-panel__right h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 0.85rem;
}
.case-panel__right p {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.65;
  margin-bottom: 1.25rem;
  font-size: 0.98rem;
}
.case-panel__right blockquote {
  border-left: 3px solid var(--orange);
  padding-left: 1rem;
  margin: 0 0 1.5rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--white);
  line-height: 1.5;
}
.case-panel__right blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(191, 224, 255, 0.8);
}
.case-panel__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.3rem;
  background: var(--white);
  color: var(--navy-ink);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--r-pill);
  transition: transform 220ms cubic-bezier(.34,1.56,.64,1), box-shadow 220ms;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
}
.case-panel__link:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28); color: var(--navy-ink); }
.case-panel__link .arrow { width: 13px; height: 13px; }

/* =====================================================================
   TIMELINE BOOT-UP — rows start dormant, light to status color in sequence
   ===================================================================== */
.timeline.js-boot .timeline__row {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  transition: background 420ms var(--ease-out), border-color 420ms var(--ease-out), transform 260ms var(--ease-out);
}
.timeline.js-boot .timeline__row .timeline__day,
.timeline.js-boot .timeline__row .timeline__status { color: rgba(255, 255, 255, 0.35); transition: color 420ms var(--ease-out); }
.timeline.js-boot .timeline__row .timeline__dot { background: rgba(255, 255, 255, 0.25); transition: background 420ms var(--ease-out); }
.timeline.js-boot .timeline__row .timeline__dot { animation: none; }

/* lit state restores the status theme */
.timeline.js-boot .timeline__row.is-lit.is-done { background: rgba(110, 231, 160, 0.06); border-color: rgba(110, 231, 160, 0.22); }
.timeline.js-boot .timeline__row.is-lit.is-done .timeline__day,
.timeline.js-boot .timeline__row.is-lit.is-done .timeline__status { color: #6EE7A0; }
.timeline.js-boot .timeline__row.is-lit.is-done .timeline__dot { background: #6EE7A0; }
.timeline.js-boot .timeline__row.is-lit.is-active { background: rgba(127, 196, 255, 0.07); border-color: rgba(127, 196, 255, 0.26); }
.timeline.js-boot .timeline__row.is-lit.is-active .timeline__day,
.timeline.js-boot .timeline__row.is-lit.is-active .timeline__status { color: #7FC4FF; }
.timeline.js-boot .timeline__row.is-lit.is-active .timeline__dot { background: #7FC4FF; animation: timelinePulse 2.4s ease-in-out infinite; }
.timeline.js-boot .timeline__row.is-lit.is-pending { background: rgba(245, 185, 92, 0.06); border-color: rgba(245, 185, 92, 0.24); }
.timeline.js-boot .timeline__row.is-lit.is-pending .timeline__day,
.timeline.js-boot .timeline__row.is-lit.is-pending .timeline__status { color: #F5B95C; }
.timeline.js-boot .timeline__row.is-lit.is-pending .timeline__dot { background: #F5B95C; }

/* =====================================================================
   SCROLL PROGRESS BAR
   ===================================================================== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--navy) 0%, var(--orange) 100%);
  z-index: 12000;
  pointer-events: none;
}

/* =====================================================================
   VIDEO TESTIMONIAL CAROUSEL (vcar) — Cody's "Don't take our word for it" format
   Uniform portrait cards, horizontal scroll-snap, arrow nav.
   ===================================================================== */
.vcar {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.vcar__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.5rem 0.25rem 1.25rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.vcar__track::-webkit-scrollbar { display: none; }

.vcard {
  flex: 0 0 clamp(240px, 78vw, 290px);
  scroll-snap-align: center;
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
}
@media (min-width: 700px) { .vcard { flex-basis: 290px; scroll-snap-align: start; } }

.vcard {
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.vcard:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(0,0,0,0.34); }
.vcard__media {
  position: relative;
  aspect-ratio: 3 / 4;   /* matches the case-study infographic thumbnails */
  background: var(--navy-ink);
  overflow: hidden;
}
.vcard__poster {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 600ms var(--ease-out);
}
.vcard:hover .vcard__poster { transform: scale(1.05); }
.vcard__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--navy-ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  transition: transform 220ms var(--ease-out), background 220ms;
}
.vcard__play svg { width: 26px; height: 26px; margin-left: 3px; }
.vcard:hover .vcard__play { transform: scale(1.12); background: #fff; }
.vcard__body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-top: 3px solid var(--navy);
}
.vcard__body strong {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.vcard__company { font-size: 0.9rem; color: var(--navy); font-weight: 600; }
.vcard__site {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--slate);
  margin-top: 0.1rem;
}

.vcar__nav {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--white);
  color: var(--navy-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
  transition: transform 200ms, background 200ms;
}
.vcar__nav svg { width: 22px; height: 22px; }
.vcar__nav:hover { transform: translateY(-50%) scale(1.08); background: var(--orange); color: #fff; }
.vcar__nav--prev { left: -10px; }
.vcar__nav--next { right: -10px; }
.vcar__nav[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .vcar__nav { display: none; } }

/* ===== Video testimonial modal ===== */
.vmodal {
  position: fixed; inset: 0; z-index: 13000;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  background: rgba(8, 16, 28, 0.86);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity 280ms, visibility 280ms;
}
.vmodal.is-open { opacity: 1; visibility: visible; }
.vmodal__shell {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  max-width: 480px; width: 100%;
  transform: scale(0.96);
  transition: transform 320ms var(--ease-out);
}
.vmodal.is-open .vmodal__shell { transform: scale(1); }
.vmodal__videowrap {
  width: 100%;
  max-height: 80vh;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 90px rgba(0,0,0,0.55);
}
.vmodal__video {
  width: 100%;
  max-height: 80vh;
  display: block;
  object-fit: contain;   /* any aspect ratio looks clean, letterboxed */
  background: #000;
}
.vmodal__caption { text-align: center; color: #fff; }
.vmodal__caption strong { display: block; font-size: 1.05rem; }
.vmodal__caption span { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(191,224,255,0.85); }
.vmodal__close {
  position: absolute; top: 1.25rem; right: 1.5rem; z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: #fff; color: #0e1b2c;
  font-size: 1.7rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  transition: background 200ms, transform 200ms;
}
.vmodal__close:hover { background: #f0f0f0; transform: rotate(90deg); }
@media (max-width: 600px) {
  .vmodal__close { top: max(0.85rem, env(safe-area-inset-top)); right: 0.9rem; width: 48px; height: 48px; }
  .vmodal__videowrap, .vmodal__video { max-height: 72vh; }
}

/* When any modal is open, restore the normal cursor (custom cursor is hard to see over modals) */
body.modal-active.has-custom-cursor,
body.modal-active.has-custom-cursor * { cursor: auto !important; }
body.modal-active .cursor-dot,
body.modal-active .cursor-ring { opacity: 0 !important; }

/* ===== Case study modal ===== */
.csmodal {
  position: fixed; inset: 0; z-index: 13000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 4vw;
  background: rgba(8, 16, 28, 0.82);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity 280ms, visibility 280ms;
  overflow-y: auto;
}
.csmodal.is-open { opacity: 1; visibility: visible; }
.csmodal__shell {
  position: relative;
  background: var(--white);
  border-radius: var(--r-lg);
  max-width: 720px; width: 100%;
  box-shadow: 0 40px 90px rgba(0,0,0,0.5);
  transform: translateY(18px);
  transition: transform 320ms var(--ease-out);
  margin: auto;
}
.csmodal.is-open .csmodal__shell { transform: translateY(0); }
.csmodal__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--paper); color: var(--ink);
  font-size: 1.5rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.16);
  transition: background 200ms, transform 200ms;
}
.csmodal__close:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }
.csmodal__body { padding: clamp(1.75rem, 4vw, 2.75rem); }
.cs__tag {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--orange);
}
.csmodal__body h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.025em;
  margin: 0.6rem 0 1.1rem; color: var(--ink);
}
.csmodal__body h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--navy); }
.cs__meta { display: flex; flex-wrap: wrap; gap: 1rem 2rem; padding: 1rem 0; border-block: 1px solid var(--rule); margin-bottom: 1.5rem; }
.cs__meta span { display: flex; flex-direction: column; font-size: 0.95rem; color: var(--ink); }
.cs__meta strong { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.25rem; font-weight: 600; }
.cs__video { border-radius: var(--r-md); overflow: hidden; background: #000; margin-bottom: 1.5rem; box-shadow: 0 14px 34px rgba(0,0,0,0.2); }
.cs__video video { width: 100%; max-height: 60vh; display: block; object-fit: contain; background:#000; }
.cs__proof { margin: 0 0 1.5rem; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--rule); }
.cs__proof img { width: 100%; display: block; }
.cs__proof figcaption { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); padding: 0.6rem; background: var(--paper); text-align: center; }
.cs__rows { display: grid; gap: 1.1rem; margin-bottom: 1.5rem; }
.cs__rows h4 { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.3rem; }
.cs__rows p { color: var(--slate); line-height: 1.6; margin: 0; }
.cs__quote {
  border-left: none; padding-left: 0; margin: 0;
  border-top: 3px solid var(--orange-1); padding-top: 1rem;
  font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--ink); line-height: 1.5;
  text-align: left;
}
.cs__quote cite { display: block; margin-top: 0.5rem; font-family: var(--font-mono); font-style: normal; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
/* case-panel link is now a button */
/* case-panel link is a <button> but must keep the white pill look */
button.case-panel__link { border: 0; cursor: pointer; font: inherit; background: var(--white); color: var(--navy-ink); }

/* =====================================================================
   CREDIBILITY BAND — HighLevel 7-figure trust signal
   ===================================================================== */
.cred {
  background:
    radial-gradient(ellipse 60% 80% at 85% 0%, rgba(35, 92, 135, 0.07), transparent 60%),
    var(--soft-blue);
}
.cred__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.cred__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  border: 1px solid rgba(35, 92, 135, 0.20);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border-radius: var(--r-pill);
  box-shadow: 0 8px 20px rgba(14, 27, 44, 0.08);
  margin-bottom: 1.5rem;
}
.cred__badge svg { width: 16px; height: 16px; color: var(--orange); }
.cred__inner h2 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  letter-spacing: -0.025em;
  margin: 0 0 1.1rem;
  color: var(--ink);
}
.cred__inner h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.cred__inner > p {
  color: var(--slate);
  line-height: 1.7;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  margin: 0 auto 2.25rem;
  max-width: 64ch;
}
.cred__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 660px;
  margin: 0 auto;
}
@media (max-width: 560px) { .cred__stats { grid-template-columns: 1fr; gap: 1rem; } }
.cred__stat {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 1.25rem 1rem;
  box-shadow: 0 10px 24px rgba(14, 27, 44, 0.06);
}
.cred__stat strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy-ink);
  margin-bottom: 0.3rem;
}
.cred__stat span {
  font-size: 0.84rem;
  color: var(--slate);
  line-height: 1.4;
}

/* =====================================================================
   IN THE FIELD — action-shot gallery (placeholders until Cody sends photos)
   ===================================================================== */
.infield__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 760px) { .infield__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; } }
@media (max-width: 460px) { .infield__grid { grid-template-columns: 1fr; } }
.infield__tile {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}
.infield__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.infield__ph--wide { grid-column: span 2; }
@media (max-width: 460px) { .infield__ph--wide { grid-column: span 1; } }
/* Placeholder styling — intentional, branded, never looks broken */
.infield__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px dashed rgba(255, 255, 255, 0.28);
}
.infield__label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  padding: 0 1rem;
  max-width: 18ch;
  line-height: 1.5;
}
.infield__label::before {
  content: "+";
  display: block;
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
  color: rgba(255, 255, 255, 0.5);
}

/* GHL Google-reviews embed shell */
.reviews-embed {
  max-width: 1100px;
  margin: 0 auto;
}
.reviews-embed iframe { display: block; min-height: 380px; border: 0; }

/* Modal image — clickable to client site, with hover overlay */
.modal__image-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  cursor: pointer;
}
.modal__image-link img {
  display: block;
  width: 100%;
  transition: transform 600ms var(--ease-out);
}
.modal__image-link:hover img { transform: scale(1.04); }
.modal__image-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(15, 39, 64, 0.65), rgba(19, 50, 82, 0.78));
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 280ms;
  backdrop-filter: blur(2px);
}
.modal__image-link:hover .modal__image-overlay { opacity: 1; }

/* =====================================================================
   MOBILE-ONLY REFINEMENTS (Cody round) — phones only, desktop untouched
   ===================================================================== */
/* Drawer bottom CTAs: full-width, centered text, white "Book a Call" (wherever drawer shows) */
@media (max-width: 980px) {
  .nav-drawer__cta .btn {
    display: flex !important;
    width: 100%;
    justify-content: center !important;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    font-size: 1.02rem;
    letter-spacing: 0;
  }
  .nav-drawer__cta .btn svg { flex: 0 0 auto; }
  .nav-drawer__cta .btn--primary, .nav-drawer__cta .btn--primary * { color: #fff !important; }
}
/* Phone-only: slimmer nav, more breathing room under it, equal stacked hero CTAs */
@media (max-width: 600px) {
  .nav-shell { height: 58px; padding: 0 0.5rem 0 1rem; }
  .site-header { padding-top: 0.55rem; padding-bottom: 0.55rem; }
  .nav-logo img { height: 32px; width: auto; }
  /* keep the main heading clear of the floating nav */
  .hero, .page-hero { padding-top: 7.75rem; }
  .page-hero--split { padding-top: 7.75rem; }
  /* CTAs: same width, stacked */
  .hero__ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 0.6rem; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
}

/* ===================== BLOG / ARTICLE PAGES ===================== */
.blog-card__media { aspect-ratio: 16/10; background: var(--navy-ink); overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out); }
.blog-card a:hover .blog-card__media img { transform: scale(1.04); }
.post-hero { padding-top: clamp(8rem, 12vw, 11rem); padding-bottom: clamp(2rem, 4vw, 3.25rem); text-align: center; }
.post-hero .breadcrumb { margin-bottom: 1.1rem; justify-content: center; }
.post__cat { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-1); }
.post__title { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -0.03em; line-height: 1.1; margin: 0.7rem auto 1rem; max-width: 24ch; }
.post__byline { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.post__body { max-width: 44rem; margin: 0 auto; }
.post__body > p { font-size: 1.08rem; line-height: 1.75; color: var(--ink); margin: 0 0 1.4rem; }
.post__body h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); letter-spacing: -0.02em; margin: 2.4rem 0 0.9rem; }
.post__body h3 { font-size: 1.2rem; margin: 1.8rem 0 0.6rem; }
.post__body ul, .post__body ol { margin: 0 0 1.4rem; padding-left: 1.3rem; }
.post__body li { font-size: 1.05rem; line-height: 1.7; color: var(--ink); margin-bottom: 0.55rem; }
.post__body strong { color: var(--navy-ink); }
.post__body blockquote { margin: 1.8rem 0; padding: 0.4rem 0 0.4rem 1.3rem; border-left: 3px solid var(--orange-1); font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; color: var(--navy-ink); }
.post__keytakeaway { background: var(--soft-blue); border-radius: var(--r-md); padding: 1.5rem 1.6rem; margin: 2rem 0; }
.post__keytakeaway h4 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.5rem; }

/* =====================================================================
   ROUND 2 — Cody review fixes (2026-06-15)
   Appended overrides (win by cascade order). Grouped by concern.
   ===================================================================== */

/* --- Nav: wider bar + more prominent brand logo --------------------- */
.nav-shell { max-width: 1080px; height: 86px; padding-left: 1.6rem; }
.nav-logo img { height: 78px; }
.site-header.scrolled .nav-shell { height: 76px; }
.site-header.scrolled .nav-logo img { height: 66px; }

/* --- Footer: bigger brand logo + larger social icons ---------------- */
.footer__brand img { height: 108px; margin-bottom: 1.25rem; }
.footer__social { gap: 0.7rem; }
.footer__social a { width: 46px; height: 46px; }
.footer__social svg { width: 20px; height: 20px; }

/* --- Mobile: keep logo readable but not oversized ------------------- */
@media (max-width: 600px) {
  .nav-shell { height: 66px; }
  .nav-logo img { height: 48px; }
}

/* --- Accent font: swap cursive Instrument Serif italic for a bolder,
       cleaner display face (Space Grotesk). Cody: "different font, legible,
       not too cursive, similar to Stryker." Imported at top of file. -------- */
h1 em, h2 em, h3 em, h4 em,
.hero h1 em, .cta-card h2 em, .owner__copy h3 em, .founder__copy h3 em,
.section--band-ink :is(h1,h2,h3,h4) em, .pulse-text {
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* --- Home hero: bolder headline + pic-on-pic composition (light theme) --- */
.hero--split .hero__copy h1 { font-size: clamp(2.3rem, 3.8vw, 3.2rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }  /* sized to hold 2 lines (Cody: titles 2 lines max) */
.hero--split .hero__sub { font-size: clamp(1.02rem, 1.3vw, 1.18rem); max-width: 44ch; }

.hero__stack { position: relative; width: 100%; min-height: clamp(420px, 44vw, 600px); }
.hero--split .hero__photo--primary {
  position: relative; width: 100%; height: 100%; min-height: clamp(380px, 40vw, 560px);
  margin-left: auto; aspect-ratio: auto;
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lift);
}
.hero--split .hero__photo--primary img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero--split .hero__photo--secondary {
  position: absolute; left: 0; bottom: -1.6rem; width: 46%; aspect-ratio: 4/3;
  border-radius: var(--r-md); overflow: hidden; border: 6px solid var(--white);
  box-shadow: var(--sh-lift); margin: 0;
}
.hero--split .hero__photo--secondary img { width: 100%; height: 100%; object-fit: cover; }
.hero__metric {
  position: absolute; top: 1.1rem; right: -0.5rem; z-index: 3;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: 0.7rem 1.05rem; box-shadow: var(--sh-lift); text-align: center;
}
.hero__metric-num { display: block; font-size: 1.55rem; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; line-height: 1; }
.hero__metric-lbl { display: block; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); margin-top: 0.25rem; }

@media (max-width: 980px) {
  .hero__stack { min-height: 0; margin-top: 1rem; }
  .hero--split .hero__photo--primary { width: 100%; min-height: clamp(300px, 70vw, 460px); }
  .hero--split .hero__photo--secondary { width: 40%; bottom: -1rem; }
}
@media (max-width: 600px) {
  .hero--split .hero__photo--secondary { display: none; }   /* keep mobile hero clean */
  .hero__metric { right: 0.4rem; top: 0.6rem; padding: 0.55rem 0.8rem; }
  .hero__metric-num { font-size: 1.2rem; }
}

/* --- Manifesto: add breathing room for the new CTA button ---------------- */
.manifesto__cta { margin-top: 1.9rem; }

/* --- Contact page: reach-us rail + GHL form (Cody's reference layout) ----- */
.contact-layout { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.contact-rail { display: flex; flex-direction: column; gap: 1rem; }
/* desktop: rail follows the (taller) form so there's no dead space under it */
@media (min-width: 881px) { .contact-rail { position: sticky; top: 100px; align-self: start; } }
.contact-card {
  display: block; background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 1.5rem 1.6rem; box-shadow: var(--sh-card);
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
a.contact-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.contact-card__icon { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; background: var(--navy-soft); color: var(--navy); margin-bottom: 0.9rem; }
.contact-card__icon svg { width: 20px; height: 20px; }
.contact-card__kicker { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.35rem; }
.contact-card h3 { font-size: 1.3rem; letter-spacing: -0.02em; margin-bottom: 0.35rem; }
.contact-card p { color: var(--slate); font-size: 0.93rem; line-height: 1.55; margin-bottom: 0.6rem; }
.contact-card__val { font-weight: 700; color: var(--navy-ink); }
.contact-card--feature { background: linear-gradient(155deg, var(--navy) 0%, var(--navy-ink) 100%); border: none; color: #fff; }
.contact-card--feature .contact-card__icon { background: rgba(255,255,255,0.14); color: #fff; }
.contact-card--feature .contact-card__kicker { color: rgba(255,255,255,0.7); }
.contact-card--feature h3 { color: #fff; }
.contact-card--feature p { color: rgba(255,255,255,0.82); }
.contact-card__cta {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.3rem;
  background: var(--white); color: var(--navy-ink); font-weight: 700; font-size: 0.92rem;
  padding: 0.75rem 1.25rem; border-radius: var(--r-pill); transition: transform var(--d-fast) var(--ease-out);
}
.contact-card__cta:hover { transform: translateY(-2px); }
.contact-card__cta .arrow { width: 16px; height: 16px; }
.contact-form-wrap { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(1.4rem, 2.5vw, 2.2rem); box-shadow: var(--sh-card); }
.contact-form-head { margin-bottom: 1.4rem; }
.contact-form-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.025em; margin: 0.3rem 0 0.6rem; }
.contact-form-head p { color: var(--slate); max-width: 46ch; }
@media (max-width: 880px) {
  .contact-layout { grid-template-columns: 1fr; }
}

/* --- Book-a-call MODAL (GHL calendar in a popup, site-wide) --------------- */
.bookmodal {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: flex-start; justify-content: center;
  background: rgba(14, 27, 44, 0.62); backdrop-filter: blur(4px);
  padding: clamp(1rem, 5vh, 4rem) 1rem; overflow-y: auto;
}
.bookmodal.is-open { display: flex; }
.bookmodal__shell {
  position: relative; width: 100%; max-width: 720px; background: var(--white);
  border-radius: var(--r-lg); box-shadow: var(--sh-cta); overflow: hidden;
  animation: bookPop 360ms var(--ease-out);
}
@keyframes bookPop { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.bookmodal__head { padding: 1.4rem 1.6rem 0.4rem; }
.bookmodal__eyebrow { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.3rem; }
.bookmodal__head h3 { font-size: 1.45rem; letter-spacing: -0.02em; }
.bookmodal__body { padding: 0.5rem 0.6rem 0.6rem; }
.bookmodal__body iframe { display: block; width: 100%; border: none; min-height: 700px; }
.bookmodal__close {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; background: var(--white);
  border: 1px solid var(--rule); color: var(--ink); font-size: 1.5rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--sh-card);
}
.bookmodal__close:hover { background: var(--navy); color: #fff; }

/* --- Work project detail pages (R4 Pass C) --- */
.proj-page__meta { margin: 0 0 2.25rem; }
.proj-page__meta .modal__meta { display: flex; flex-wrap: wrap; gap: 1.25rem 3rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 1.25rem 0; }
.proj-page__meta .modal__meta small { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.25rem; }
.proj-page__meta .modal__meta strong { color: var(--ink-soft); font-size: 1.02rem; }

/* =====================================================================
   ROUND 5 — Cody walkthrough #2: hero consistency, intro flip, spacing
   ===================================================================== */
/* Every hero image the SAME shape across pages (fixed 3:2, not stretched to copy height) */
.hero--split .hero__split, .page-hero--split .hero__split { align-items: center; }
.hero--split .hero__photo--primary, .hero__photo--wide {
  aspect-ratio: 3 / 2; height: auto; min-height: 0; width: 100%;
}
.hero--split .hero__photo--primary img, .hero__photo--wide img, .hero__photo--wide video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 760px) {
  .hero--split .hero__photo--primary, .hero__photo--wide { aspect-ratio: 16 / 10; }
}

/* Service intro ("second section") — image LEFT, copy RIGHT + breathing room + CTA space */
.service-detail__intro { align-items: center; grid-template-columns: 1.05fr 1fr; }
.service-detail__intro > div:last-child { order: -1; }          /* image div moves to the left */
.service-detail__intro .eyebrow { margin-bottom: 0.85rem; }
.service-detail__intro h2 { margin-bottom: 1.3rem; }
.service-detail__intro p + p { margin-top: 1rem; }
.service-intro__cta { margin-top: 1.6rem; }
@media (max-width: 880px) {
  .service-detail__intro { grid-template-columns: 1fr; }
  .service-detail__intro > div:last-child { order: 0; }         /* stack normally on mobile */
}

/* Manifesto + intro heading-to-subtext spacing (Cody: too close) */
.manifesto__text h2 { margin-bottom: 1.9rem; max-width: 26ch; }

/* R5: page-hero image rounded (project pages showcase the website screenshot as a rounded landscape) */
.hero__photo--wide { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lift); }
.hero__photo--wide img { object-position: top; }

/* R5: Paid-ads hero animation — platform icons pulsing around a "daily monitoring" core */
.adsring-box { background: radial-gradient(circle at 50% 45%, var(--navy) 0%, var(--navy-ink) 72%); display: flex; align-items: center; justify-content: center; }
.adsring { position: relative; width: 80%; aspect-ratio: 1; max-width: 360px; }
.adsring__core { position: absolute; top: 50%; left: 50%; width: 33%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; color: var(--navy-ink); display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 0.74rem; line-height: 1.15; box-shadow: 0 0 0 10px rgba(255,255,255,0.07), 0 18px 40px rgba(0,0,0,0.3); z-index: 3; }
.adsring__ring { position: absolute; top: 50%; left: 50%; width: 33%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; border: 1.5px solid var(--orange-1); opacity: 0; animation: adsPulse 3.2s ease-out infinite; }
.adsring__ring--2 { animation-delay: 1.6s; }
@keyframes adsPulse { 0% { opacity: 0.55; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(2.7); } }
.adsring__node { position: absolute; transform: translate(-50%,-50%); background: #fff; color: var(--navy-ink); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.01em; padding: 0.42rem 0.68rem; border-radius: 999px; box-shadow: 0 8px 18px rgba(0,0,0,0.28); animation: adsNode 3s ease-in-out infinite; }
@keyframes adsNode { 0%,100% { transform: translate(-50%,-50%) scale(0.9); opacity: 0.5; } 50% { transform: translate(-50%,-50%) scale(1.08); opacity: 1; box-shadow: 0 0 0 4px var(--orange-soft), 0 8px 18px rgba(0,0,0,0.28); } }
.adsring__node--1 { top: 9%;  left: 50%;   animation-delay: 0s; }
.adsring__node--2 { top: 30%; left: 86%;   animation-delay: 0.5s; }
.adsring__node--3 { top: 70%; left: 86%;   animation-delay: 1s; }
.adsring__node--4 { top: 91%; left: 50%;   animation-delay: 1.5s; }
.adsring__node--5 { top: 70%; left: 14%;   animation-delay: 2s; }
.adsring__node--6 { top: 30%; left: 14%;   animation-delay: 2.5s; }
@media (prefers-reduced-motion: reduce) { .adsring__ring, .adsring__node { animation: none; } .adsring__ring { opacity: 0.3; } }

/* =====================================================================
   ROUND 6 — Cody walkthrough #3
   ===================================================================== */
/* Home hero: image fills the copy column height (no floating gap) */
.hero--split .hero__split { align-items: stretch; }
.hero--split .hero__photo--primary { aspect-ratio: auto; height: 100%; min-height: clamp(360px, 36vw, 500px); }
/* Home hero Google rating widget (Stryker-style, floats on the image) */
.hero__rating { position: absolute; left: -0.6rem; bottom: 1.1rem; z-index: 3; display: flex; align-items: center; gap: 0.6rem; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 0.6rem 0.9rem; box-shadow: var(--sh-lift); }
.hero__rating svg { width: 26px; height: 26px; flex-shrink: 0; }
.hero__rating-stars { display: block; color: #F5A623; font-size: 0.82rem; letter-spacing: 1.5px; line-height: 1; }
.hero__rating-text { display: block; font-size: 0.72rem; color: var(--steel); margin-top: 0.18rem; }
.hero__rating-text strong { color: var(--ink); }
@media (max-width: 600px) { .hero__rating { left: 0.4rem; bottom: 0.5rem; padding: 0.45rem 0.7rem; } }

/* R6: Content Production hero — vertical ShootSmart reel framed beside the copy */
.hero__reel { width: 100%; max-width: 320px; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lift); background: #000; }
.hero__reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero--split .hero__visual { justify-content: center; }
@media (max-width: 880px) { .hero__reel { max-width: 280px; } }

/* R6: Paid-ads ring — flat on the hero (no box), BLUE nodes with WHITE text */
.adsring--flat { width: 92%; max-width: 430px; aspect-ratio: 1; margin: 0 auto; }
.adsring--flat .adsring__node { background: var(--navy); color: #fff; box-shadow: 0 8px 18px rgba(19,50,82,0.25); }
.adsring--flat .adsring__node--wide { white-space: nowrap; }
.adsring--flat .adsring__core { background: var(--navy-ink); color: #fff; box-shadow: 0 0 0 10px var(--navy-soft), 0 18px 40px rgba(19,50,82,0.22); }
@keyframes adsNode { 0%,100% { transform: translate(-50%,-50%) scale(0.9); opacity: 0.62; } 50% { transform: translate(-50%,-50%) scale(1.08); opacity: 1; box-shadow: 0 0 0 5px var(--navy-soft), 0 8px 18px rgba(19,50,82,0.3); } }

/* R6b: Paid-ads dashed-orbit ring (matches Cody's reference) — flat on hero, real logos */
.adsorbit { position: relative; width: 96%; max-width: 460px; aspect-ratio: 1; margin: 0 auto; }
.adsorbit__path { position: absolute; top: 50%; left: 50%; width: 74%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 1.5px dashed var(--rule-strong); border-radius: 50%; }
.adsorbit__core { position: absolute; top: 50%; left: 50%; width: 44%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; background: #fff; box-shadow: 0 24px 60px rgba(14,27,44,0.10); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.9rem; color: var(--steel); line-height: 1.25; }
.adsorbit__core strong { color: var(--navy); font-weight: 700; font-size: 1.05rem; }
.adsorbit__node { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: max-content; }
.adsorbit__icon { width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 1px solid var(--rule); box-shadow: 0 8px 20px rgba(14,27,44,0.10); display: flex; align-items: center; justify-content: center; animation: adsFloat 3s ease-in-out infinite; }
.adsorbit__icon svg { width: 26px; height: 26px; }
.adsorbit__cap { font-size: 0.66rem; font-weight: 600; color: var(--slate); white-space: nowrap; }
@keyframes adsFloat { 0%,100% { transform: scale(0.96); box-shadow: 0 8px 20px rgba(14,27,44,0.10); } 50% { transform: scale(1.06); box-shadow: 0 0 0 4px var(--navy-soft), 0 8px 20px rgba(14,27,44,0.12); } }
.adsorbit__node--1 { top: 6%;  left: 50%; } .adsorbit__node--1 .adsorbit__icon { animation-delay: 0s; }
.adsorbit__node--2 { top: 28%; left: 88%; } .adsorbit__node--2 .adsorbit__icon { animation-delay: .5s; }
.adsorbit__node--3 { top: 72%; left: 88%; } .adsorbit__node--3 .adsorbit__icon { animation-delay: 1s; }
.adsorbit__node--4 { top: 94%; left: 50%; } .adsorbit__node--4 .adsorbit__icon { animation-delay: 1.5s; }
.adsorbit__node--5 { top: 72%; left: 12%; } .adsorbit__node--5 .adsorbit__icon { animation-delay: 2s; }
.adsorbit__node--6 { top: 28%; left: 12%; } .adsorbit__node--6 .adsorbit__icon { animation-delay: 2.5s; }
@media (prefers-reduced-motion: reduce) { .adsorbit__icon { animation: none; } }
@media (max-width: 880px) { .adsorbit { max-width: 360px; } .adsorbit__icon { width: 46px; height: 46px; } .adsorbit__cap { font-size: 0.58rem; } }

/* R6b: "Your case study could be here" invite card — fills the empty grid cells */
.cwinvite { grid-column: span 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.5rem; padding: clamp(1.25rem, 2.2vw, 1.75rem); border-radius: var(--r-lg); background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)); border: 1.5px dashed rgba(255,255,255,0.35); color: #fff; transition: border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); }
.cwinvite:hover { border-color: var(--orange-1); transform: translateY(-3px); }
.cwinvite__eyebrow { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.65); }
.cwinvite h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.15; color: #fff; }
.cwinvite h3 em { color: var(--orange-2); }
.cwinvite p { color: rgba(255,255,255,0.8); font-size: 0.88rem; max-width: 28ch; }
.cwinvite__btn { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; background: #fff; color: var(--navy-ink); font-weight: 700; font-size: 0.88rem; padding: 0.65rem 1.1rem; border-radius: var(--r-pill); }
.cwinvite__btn .arrow { width: 16px; height: 16px; }
@media (max-width: 860px) { .cwinvite { grid-column: span 1; } }
@media (max-width: 560px) { .cwinvite { grid-column: span 1; } }

/* R7: Content reel — client chip + audio toggle */
.hero__reel { position: relative; }
.hero__reel-chip { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2; background: rgba(14,27,44,0.72); color: #fff; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em; padding: 0.32rem 0.7rem; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero__reel-audio { position: absolute; bottom: 0.7rem; right: 0.7rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(14,27,44,0.72); color: #fff; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background var(--d-fast) var(--ease-out); }
.hero__reel-audio:hover { background: var(--navy); }
.hero__reel-audio svg { width: 18px; height: 18px; }
.hero__reel-audio .hero__reel-audio-on { display: none; }
.hero__reel-audio.is-unmuted .hero__reel-audio-off { display: none; }
.hero__reel-audio.is-unmuted .hero__reel-audio-on { display: block; }

/* R7: paid-ads core 2-line centered + lift Google (top) caption off the orbit line */
.adsorbit__core { flex-direction: column; gap: 0.1rem; }
.adsorbit__core span { display: block; }
.adsorbit__node--1 { flex-direction: column-reverse; }
.adsorbit__node--1 .adsorbit__cap { margin-bottom: 0.15rem; }

/* =====================================================================
   R8 (Cody Loom 06/15) — brand-navy play buttons + SHARP CTA BUTTONS
   Cody's "sharp like a box, better than rounded edges" was about the CTA
   BUTTONS — NOT the photos/videos. Photos/videos keep their original
   rounded corners. Only the call-to-action buttons get squared off.
   ===================================================================== */
/* Off-brand orange play buttons -> brand navy (Cody: "not part of our color scheme") */
.cp-tile__play { background: rgba(35,92,135,0.95) !important; }

/* CTA buttons: sharp box corners instead of the full pill */
.btn, .nav-cta, .lm-pop__bookcall { border-radius: 4px; }

/* =====================================================================
   R9 (Cody Loom 06/15) — NAVBAR stuck to top, full-width (not floating)
   "No longer floating — just stick it on top like most normal sites."
   ===================================================================== */
.site-header {
  padding: 0;
  pointer-events: auto;
  background: #fff;
  border-bottom: 1px solid var(--rule);
}
.site-header.scrolled { padding: 0; }
.nav-shell {
  max-width: var(--max-w);
  width: 100%;
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.site-header.scrolled .nav-shell {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.site-header.scrolled { box-shadow: 0 4px 18px rgba(14,27,44,0.07); }

/* R9: Home case-study cards — logo LEFT of org name (kills empty space to the
   right of the logo). Cody Loom 06/15. */
.case-panel__brand { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; }
.case-panel__brand .case-panel__logo { margin: 0; flex: 0 0 auto; }
.case-panel__brand h3 { margin: 0; }

/* =====================================================================
   R10 (Cody Loom 06/15, rev) — EVERY page hero matches the HOME hero size.
   Hamza: "The home hero is a good size — make that the SAME size hero on
   every page." Mirror .hero--split exactly: same padding, 1fr/1.05fr split,
   image stretched to copy height, same h1/subtext scale. Main titles are
   kept to 2 lines max in the markup.
   ===================================================================== */
.page-hero--split {
  padding-top: clamp(7rem, 11vw, 10rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.page-hero--split .container { max-width: var(--max-w); }
.page-hero--split .hero__split {
  grid-template-columns: 1fr 1fr;            /* equal: big image, roomier copy for 2-line titles */
  align-items: stretch;
  gap: clamp(2rem, 4vw, 4rem);
}
.page-hero--split .hero__copy { align-self: center; }
.page-hero--split .hero__copy h1 {
  font-size: clamp(2.3rem, 3.8vw, 3.2rem);   /* matches home; sized so headings hold to 2 lines */
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.page-hero--split .hero__copy p {
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  color: var(--slate);
  max-width: 44ch;
  margin: 0;
}
.page-hero--split .hero__visual { display: flex; }
.page-hero--split .hero__photo--wide { width: 100%; height: 100%; min-height: clamp(380px, 38vw, 580px); }
.page-hero--split .hero__photo--wide img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) {
  .page-hero--split .hero__split { grid-template-columns: 1fr; }
  .page-hero--split .hero__copy p { max-width: 100%; margin: 0 auto; }
  .page-hero--split .hero__photo--wide { min-height: clamp(300px, 75vw, 440px); }
}

/* =====================================================================
   R11 (Cody Loom 06/15) — SIMPLE CONTACT PAGE.
   Cody dislikes the split/rail layout. Centered header + quick contact
   line + one prominent form. "Give them info, then an easy form."
   ===================================================================== */
.contact-hero-simple { padding-top: clamp(6.5rem, 9vw, 8.5rem); padding-bottom: clamp(1.25rem, 2.5vw, 2rem); text-align: center; }
.contact-section { padding-top: clamp(2rem, 4vw, 3rem); }
.contact-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.7rem; margin-top: 1.6rem; }
.contact-quick a, .contact-quick span { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--slate); font-size: 0.98rem; font-weight: 500; }
.contact-quick a { color: var(--navy); }
.contact-quick a:hover { color: var(--navy-ink); }
.contact-quick svg { width: 17px; height: 17px; flex: 0 0 auto; }
.contact-section .contact-form-head { margin-bottom: 1.6rem; }
.contact-form-simple { max-width: 720px; margin: 1.5rem auto 0; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-card); }
.contact-form-simple iframe { display: block; }

/* =====================================================================
   R12 (Cody Loom 06/15) — home hero VIDEO fill + paid-ads orbit hover bounce
   ===================================================================== */
/* Home hero video fills the primary photo frame just like the image did */
.hero--split .hero__photo--primary .hero__video,
.hero__photo--primary .hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* Paid-ads orbit nodes "bounce" on hover, like the feature images do */
.adsorbit__node:hover .adsorbit__icon {
  animation: adsPop 0.55s cubic-bezier(.34,1.56,.64,1) both;
  box-shadow: 0 14px 30px rgba(14,27,44,0.18);
}
.adsorbit__node:hover .adsorbit__cap { color: var(--navy); }
@keyframes adsPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.24); }
  100% { transform: scale(1.12); }
}

/* =====================================================================
   R13 (Hamza 06/15) — LEGAL PAGES tighter padding (too much white space).
   Hero clears the fixed navbar but no more; body section starts close.
   ===================================================================== */
.page-hero--legal { padding-top: clamp(7rem, 9vw, 8.5rem); padding-bottom: 1.25rem; }   /* AUDIT 07/13: R13 value went stale after R14 grew the header to ~107px; breadcrumb was ~5px under the fixed nav */
.section--legal { padding-top: 1.25rem; padding-bottom: clamp(3rem, 5vw, 4rem); }

/* =====================================================================
   R14 (Cody/Hamza 06/15) — navbar: NO size jump on scroll + BIGGER logos.
   The header shrank 80->76px (+logo resize) on scroll, causing a jump.
   Keep it constant; only the shadow changes. Logos enlarged per Cody.
   ===================================================================== */
.site-header.scrolled .nav-shell { height: var(--header-h); }   /* was 76px — the jump */
.nav-logo img { height: 72px; }                                  /* bigger (was 64) */
.site-header.scrolled .nav-logo img { height: 72px; }            /* constant on scroll */
@media (max-width: 980px) { .nav-logo img, .site-header.scrolled .nav-logo img { height: 44px; } }
.footer__brand img { height: 132px; }                            /* bigger footer logo (was 108) */

/* R14: Contact — center the form-head subtext block under its title */
.contact-section .contact-form-head.text-center p { margin-left: auto; margin-right: auto; }

/* =====================================================================
   R15 (Cody 06/15) — paid-ads: center "always on monitoring" pops on
   hover too, and enlarge the core to cut the empty gap to the nodes.
   ===================================================================== */
.adsorbit__core { width: 52%; }
.adsorbit__core:hover {
  animation: adsCorePop 0.55s cubic-bezier(.34,1.56,.64,1) both;
  box-shadow: 0 28px 64px rgba(14,27,44,0.16);
}
@keyframes adsCorePop {
  0%   { transform: translate(-50%,-50%) scale(1); }
  45%  { transform: translate(-50%,-50%) scale(1.1); }
  100% { transform: translate(-50%,-50%) scale(1.05); }
}
@media (max-width: 880px) { .adsorbit__core { width: 54%; } }

/* R15: home 2nd-section image — show the FULL tablet (no crop, no stretch)
   and make it BIGGER by widening its column. Natural aspect ratio, centered. */
.manifesto__split { align-items: center; grid-template-columns: 1.3fr 1fr; }
.manifesto__media { aspect-ratio: auto; height: auto; min-height: 0; }
.manifesto__media img { width: 100%; height: auto; object-fit: contain; display: block; }

/* =====================================================================
   R16 (Cody 06/15) — hero CHIP above the title + inline rating below CTAs
   (Stryker-style; fills the left-column whitespace on the home + service
   heroes). Chip used on every hero; inline rating on the home hero.
   ===================================================================== */
.hero__chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--navy); background: var(--navy-soft);
  border: 1px solid rgba(35,92,135,0.18);
  padding: 0.42rem 0.9rem; border-radius: 999px;
  margin-bottom: 1.15rem;
}
.hero__chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); }
.hero__rating-inline { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.6rem; font-size: 0.95rem; color: var(--slate); }
.hero__rating-inline .hero__rating-stars { color: #FFC107; letter-spacing: 0.04em; font-size: 1.05rem; }
.hero__rating-inline .hero__rating-text strong { color: var(--ink); }

/* R17 (Hamza 06/15, rev) — legal pages: text stays LEFT-aligned, but the
   prose column is centered on the page (Hamza: "left aligned, centered on the page"). */
.legal-prose { text-align: left; margin-left: auto; margin-right: auto; }

/* =====================================================================
   R18 (06/15) — FORCE inner/service heroes to home width so titles hold
   to 2 lines (they were capped at a 1100px container -> 445px copy column
   -> 3-line wraps). Higher specificity than the .page-hero .container cap.
   ===================================================================== */
.page-hero.page-hero--split .container { max-width: 1340px; }
.page-hero.page-hero--split .hero__split { grid-template-columns: 1fr 1fr; }
.page-hero.page-hero--split .hero__copy h1 { font-size: clamp(2.2rem, 3.3vw, 3rem); line-height: 1.05; }

/* R19 (06/15) — FORCE equal hero columns so the copy column is wide enough
   for 2-line titles. The image's intrinsic min-width was blowing out its
   1fr track (1fr = minmax(auto,1fr)); minmax(0,1fr) keeps the split even. */
.page-hero.page-hero--split .hero__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
.page-hero.page-hero--split .hero__copy { min-width: 0; }
.page-hero.page-hero--split .hero__visual { min-width: 0; }

/* =====================================================================
   R20 (Cody 06/15) — process "How we build" steps now carry an image
   (like the home services cards). Image on top, then label/title/text.
   ===================================================================== */
.process__step { border-top: 0; padding-top: 0; }
.process__step::before { display: none; }
.process__step__img { aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; margin-bottom: 1.25rem; box-shadow: 0 14px 32px -20px rgba(8,20,36,0.55); }
.process__step__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--ease-out); }
.process__step:hover .process__step__img img { transform: scale(1.04); }

/* =====================================================================
   R21 (Cody 06/15) — contact data points in rounded boxes below the form
   ===================================================================== */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 720px; margin: 1.5rem auto 0; }
.contact-card-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; padding: 1.5rem 1rem; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--sh-card); transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out); }
a.contact-card-box:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(8,20,36,0.5); }
.contact-card-box__icon { width: 42px; height: 42px; border-radius: 50%; background: var(--navy-soft); color: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: 0.3rem; }
.contact-card-box__icon svg { width: 19px; height: 19px; }
.contact-card-box__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mute); font-weight: 600; }
.contact-card-box__val { font-size: 0.95rem; font-weight: 600; color: var(--navy-ink); word-break: break-word; }
@media (max-width: 620px) { .contact-cards { grid-template-columns: 1fr; } }

/* =====================================================================
   R22 (Cody/Hamza 06/15) — cut hero + section whitespace; match feature
   images to their text block height (top of image = top of text, bottom
   of image = bottom of CTA).
   ===================================================================== */
/* Tighter hero vertical padding (home + all inner/service heroes) */
.hero--split { padding-top: clamp(6rem, 8vw, 8rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.page-hero--split { padding-top: clamp(6rem, 8vw, 8rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); }

/* Home 2nd section — bigger image matched to the text height; less section padding */
.manifesto { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.manifesto__split { align-items: stretch; grid-template-columns: 1.2fr 1fr; }
.manifesto__media { aspect-ratio: auto; height: 100%; min-height: 0; }
.manifesto__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Service intro (incl. content "The Brief") — image matches the text height */
.service-detail__intro { align-items: stretch; }
.service-detail__intro > div:last-child { display: flex; }
.service-detail__intro img { height: 100%; width: 100%; object-fit: cover; }

/* Chip used on about/work/case-studies heroes too (already styled via .hero__chip) */

/* =====================================================================
   R23 (Cody Loom 06/15) — Work page: Facebook Ads / Google Ads alternating
   feature rows (image left, then image right), with check-list + CTA.
   ===================================================================== */
.alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.alt-row + .alt-row { margin-top: clamp(3rem, 6vw, 5.5rem); }
.alt-row__media { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-card); aspect-ratio: 11 / 8; }
.alt-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alt-row--right .alt-row__media { order: 2; }
.alt-row__list { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: grid; gap: 0.65rem; }
.alt-row__list li { display: flex; align-items: flex-start; gap: 0.55rem; color: var(--slate); font-size: 0.98rem; line-height: 1.45; }
.alt-row__list svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--navy); margin-top: 1px; }
@media (max-width: 880px) { .alt-row { grid-template-columns: 1fr; } .alt-row--right .alt-row__media { order: 0; } }

/* R24 (Cody 06/15) — remove the inner category chips on website cards */
.proj__media__tag { display: none !important; }

/* R25 (Cody 06/15) — dedicated work pages: show the FULL website screenshot
   (16:9, not cropped), keeping the split balanced (text left, shot right). */
.page-hero--split .hero__photo--shot { aspect-ratio: 16 / 9; min-height: 0 !important; height: auto; }
.page-hero--split .hero__photo--shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* R26 (Cody 06/15) — content-production hero: bring the vertical reel closer
   to the copy (kills the big center whitespace). Wider copy, tighter gap,
   slightly larger reel. */
.page-hero--reel.page-hero--split .hero__split { grid-template-columns: 1.45fr 1fr !important; gap: clamp(1.5rem, 3vw, 2.75rem); }
.page-hero--reel .hero__reel { max-width: 360px; margin-left: 0; }
@media (max-width: 880px) {
  .page-hero--reel.page-hero--split .hero__split { grid-template-columns: 1fr !important; }
  .page-hero--reel .hero__reel { margin-left: auto; }
}

/* =====================================================================
   R27 (06/16) — CRITICAL MOBILE FIX: page-hero--split must STACK on mobile.
   R19's `!important` 2-column rule was keeping split heroes side-by-side on
   phones (about/work/case-studies/all service + dedicated pages). Force
   single column under 880px.
   ===================================================================== */
@media (max-width: 880px) {
  .page-hero.page-hero--split .hero__split { grid-template-columns: 1fr !important; }
  .page-hero.page-hero--split .hero__copy p { max-width: 100%; }
  .page-hero--split .hero__photo--shot { aspect-ratio: 16 / 9; }
}

/* =====================================================================
   R28 (Cody 06/16) — fixes:
   1) website cards inside dark band sections had white-on-white (invisible)
      title/desc — force them dark again.
   2) Work FB/Google ad sections: more breathing room title -> subtext.
   ===================================================================== */
.section--band-paper .proj__body h3, .section--band-blue .proj__body h3 { color: var(--ink); }
.section--band-paper .proj__body p, .section--band-blue .proj__body p { color: var(--slate); }
.section--band-paper .proj__body .view, .section--band-blue .proj__body .view { color: var(--navy); }

.alt-row__copy .eyebrow { display: inline-block; margin-bottom: 0.9rem; }
.alt-row__copy h2 { margin-bottom: 1.1rem; }
.alt-row__copy h2 + p { margin-top: 0; }

/* =====================================================================
   R29 (Cody 06/16) — service intro image (incl. content "Brief") matches
   the text-block height exactly. The image was taller than the copy and
   overflowed below the CTA; absolute-position it so the copy drives the
   height and the image fills it (no whitespace). Desktop only.
   ===================================================================== */
@media (min-width: 881px) {
  .service-detail__intro { align-items: stretch; }
  .service-detail__intro > div:last-child { position: relative; display: block; }
  .service-detail__intro > div:last-child img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); }
}

/* =====================================================================
   R30 (Cody 06/16) — bigger navbar CTA; FIX mobile home 2nd section stack
   ===================================================================== */
.nav-cta { padding: 0.85rem 1.5rem !important; font-size: 0.95rem !important; }

@media (max-width: 820px) {
  /* home 2nd section was staying 2-column on mobile (image squished to a sliver) */
  .manifesto__split { grid-template-columns: 1fr !important; align-items: stretch; }
  .manifesto__media { aspect-ratio: 3 / 2 !important; height: auto !important; }
  .manifesto__media img { height: 100% !important; object-fit: cover !important; }
}

/* =====================================================================
   R31 (Cody 06/16) — INTERACTIVE SCROLL ROADMAP (home "No mystery" section).
   Dotted white spine that fills as you scroll, white milestone dots that
   bounce on hover, brand icons where Google/Facebook are mentioned.
   ===================================================================== */
.roadmap { position: relative; max-width: 720px; margin: clamp(2.5rem,5vw,4rem) auto 0; }
.roadmap__spine { position: absolute; left: 19px; top: 10px; bottom: 18px; border-left: 2px dotted rgba(255,255,255,0.4); }
.roadmap__fill { position: absolute; left: -2px; top: 0; width: 2px; height: 0; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.7); transition: height 150ms linear; }
.roadmap__item { position: relative; padding: 0 0 clamp(1.4rem,3vw,2.2rem) 58px; opacity: 0; transform: translateY(26px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.roadmap__item.is-shown { opacity: 1; transform: none; }
.roadmap__item:last-child { padding-bottom: 0; }
.roadmap__dot { position: absolute; left: 9px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,0.12); cursor: pointer; transition: box-shadow 300ms var(--ease-out); z-index: 2; }
.roadmap__dot:hover { animation: adsPop 0.55s cubic-bezier(.34,1.56,.64,1) both; box-shadow: 0 0 0 9px rgba(255,255,255,0.2); }
.roadmap__card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--r-md); padding: 0.95rem 1.2rem; }
.roadmap__day { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 0.3rem; }
.roadmap__task { color: #fff; margin: 0; font-size: 0.98rem; line-height: 1.45; }
.roadmap__icons { display: flex; gap: 0.45rem; margin-top: 0.7rem; }
.roadmap__icons svg { width: 28px; height: 28px; background: #fff; border-radius: 50%; padding: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.roadmap__item--goal .roadmap__dot { background: var(--orange-2); box-shadow: 0 0 0 6px rgba(91,179,240,0.32); }
.roadmap__item--goal .roadmap__card { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.32); }
@media (prefers-reduced-motion: reduce) { .roadmap__item { opacity: 1; transform: none; transition: none; } }

/* R32 (Cody 06/16) — roadmap goal: "service area" em = the goal dot's orange
   (was a dull low-contrast gradient). Solid orange, overriding gradient text. */
.roadmap__item--goal .roadmap__task em {
  color: var(--orange-2) !important;
  -webkit-text-fill-color: var(--orange-2);
  background: none;
  font-style: italic;
}

/* R33 — lion watermark removed (Cody: didn't look good). */

/* R34 (Cody Loom2 06/17) — contact email must not get cut off */
.contact-card-box__val { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; line-height: 1.35; }
.contact-card-box { min-width: 0; }
/* Email must stay on one line */
.contact-card-box--email .contact-card-box__val { white-space: nowrap; word-break: normal; overflow-wrap: normal; font-size: 0.8rem; }
@media (max-width: 620px){ .contact-cards { grid-template-columns: 1fr; } }

/* =====================================================================
   R35 (Cody Loom2 06/17) — individual case-study pages: sleek video player
   (poster + play -> autoplays, object-fit cover so NO black bars) + detail layout
   ===================================================================== */
.cs-detail-hero { padding-top: clamp(7rem, 11vw, 10rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.cs-d__split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 880px){ .cs-d__split { grid-template-columns: 1fr; } }
.cs-d__logo { height: 38px; width: auto; background:#fff; padding:6px 10px; border-radius:8px; margin-bottom:1rem; display:inline-block; box-shadow:var(--sh-card); }
.cs-d__tag { display:block; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--navy); margin-bottom:0.8rem; }
.cs-detail-hero h1 { font-size: clamp(2rem,3.6vw,3rem); line-height:1.08; margin-bottom:1.2rem; }
.cs-d__meta { display:flex; flex-wrap:wrap; gap:1.5rem; margin-bottom:1.6rem; }
.cs-d__meta span { display:flex; flex-direction:column; font-size:0.95rem; color:var(--slate); }
.cs-d__meta strong { font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--mute); margin-bottom:0.2rem; }
.cs-player { position:relative; overflow:hidden; border-radius:var(--r-lg); background:#0e1b2c; cursor:pointer; box-shadow:var(--sh-lift); }
.cs-player--vertical { aspect-ratio:9/16; max-width:380px; margin:0 auto; }
.cs-player--wide { aspect-ratio:16/9; width:100%; }
.cs-player__poster, .cs-player video { width:100%; height:100%; object-fit:cover; display:block; }
.cs-player__play { position:absolute; inset:0; margin:auto; width:74px; height:74px; border-radius:50%; border:0; background:rgba(255,255,255,0.94); color:var(--navy); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 34px rgba(0,0,0,0.45); transition:transform 300ms var(--ease-out); cursor:pointer; }
.cs-player:hover .cs-player__play { transform:scale(1.09); }
.cs-player__play svg { width:30px; height:30px; margin-left:3px; }
.cs-d__rows { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); margin-bottom:clamp(2rem,4vw,3rem); }
@media (max-width:760px){ .cs-d__rows { grid-template-columns:1fr; } }
.cs-d__rows h4 { font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--navy); margin-bottom:0.5rem; }
.cs-d__rows p { color:var(--slate); margin:0; line-height:1.55; }
.cs-d__proof { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-bottom:clamp(2rem,4vw,3rem); }
@media (max-width:760px){ .cs-d__proof { grid-template-columns:1fr; } }
.cs-d__proof figure { margin:0; }
.cs-d__proof img { width:100%; border-radius:var(--r-md); box-shadow:var(--sh-card); }
.cs-d__proof figcaption { font-size:0.85rem; color:var(--mute); margin-top:0.5rem; text-align:center; }
.cs-d__quote { max-width:60ch; margin:0 auto; text-align:center; font-size:clamp(1.2rem,2vw,1.6rem); font-weight:600; color:var(--navy-ink); line-height:1.4; }
.cs-d__quote cite { display:block; margin-top:1rem; font-style:normal; font-size:0.95rem; font-weight:500; color:var(--slate); }

/* ================================================================
   R36 (Cody Loom2 06/17) — CASE-STUDY PAGES, full redesign
   Fixes: poster cutoff (morphing player), toppled CTAs, floating
   quote, giant proof image. Adds real structure + per-page polish.
   ================================================================ */

/* --- back link --- */
.csx-back { display:inline-flex; align-items:center; gap:0.5rem; font-size:var(--t-sm); font-weight:600; color:var(--slate); margin-bottom:clamp(1.4rem,3vw,2.2rem); transition:color var(--d-fast) var(--ease-out), gap var(--d-fast) var(--ease-out); }
.csx-back svg { width:18px; height:18px; transform:rotate(180deg); }
.csx-back:hover { color:var(--navy); gap:0.75rem; }

/* --- hero --- */
.csx-hero { padding-top:calc(var(--header-h) + clamp(1.5rem,4vw,2.8rem)); overflow:hidden; }
.csx-hero__grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.csx-hero__brand { display:flex; align-items:center; gap:0.9rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.csx-logo { height:44px; width:auto; max-width:170px; object-fit:contain; background:var(--white); padding:7px 12px; border-radius:var(--r-sm); box-shadow:var(--sh-card); }
.csx-tag { font-family:var(--font-mono); font-size:var(--t-mono); font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--navy); background:var(--navy-soft); padding:0.4rem 0.8rem; border-radius:var(--r-pill); }
.csx-hero__copy h1 { font-size:var(--t-4xl); line-height:1.04; letter-spacing:-0.02em; color:var(--ink); margin:0 0 1rem; }
.csx-hero__copy h1 em { font-style:normal; color:var(--navy); }
.csx-deck { font-size:var(--t-lg); color:var(--slate); line-height:1.55; max-width:46ch; margin:0 0 1.6rem; }

/* stat strip */
.csx-stats { list-style:none; margin:0 0 1.8rem; padding:0; display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; background:var(--white); box-shadow:var(--sh-rest); }
.csx-stats li { flex:1 1 0; min-width:110px; padding:1rem 1.15rem; border-right:1px solid var(--rule); }
.csx-stats li:last-child { border-right:0; }
.csx-stats strong { display:block; font-size:clamp(1.4rem,2.6vw,1.85rem); font-weight:700; letter-spacing:-0.02em; color:var(--navy); line-height:1; }
.csx-stats span { display:block; margin-top:0.35rem; font-size:var(--t-xs); color:var(--steel); line-height:1.3; }

.csx-cta { display:flex; flex-wrap:wrap; gap:0.85rem; margin-bottom:1.6rem; }
.csx-meta { display:flex; flex-wrap:wrap; gap:1.6rem 2rem; padding-top:1.4rem; border-top:1px solid var(--rule-light); }
.csx-meta span { display:flex; flex-direction:column; font-size:var(--t-sm); color:var(--ink-soft); font-weight:600; max-width:34ch; }
.csx-meta strong { font-size:var(--t-eyebrow); font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--mute); margin-bottom:0.3rem; }

/* --- morphing video player (poster shows FULL, no cutoff; morphs to video ratio on play) --- */
.csx-hero__media { position:relative; }
.csx-player { position:relative; width:100%; max-width:420px; margin:0 auto; aspect-ratio:var(--poster-ar,4/5); border-radius:var(--r-lg); overflow:hidden; background:var(--ink); cursor:pointer; box-shadow:var(--sh-lift); transition:aspect-ratio var(--d-base) var(--ease-in-out), transform var(--d-fast) var(--ease-out); }
.csx-player.is-playing { aspect-ratio:var(--video-ar,9/16); }
.csx-player--wide { max-width:560px; }
.csx-player__poster, .csx-player video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.csx-player.is-playing .csx-player__poster { opacity:0; }
.csx-player::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,27,44,0) 45%, rgba(14,27,44,0.55) 100%); opacity:1; transition:opacity var(--d-fast) var(--ease-out); pointer-events:none; }
.csx-player.is-playing::after { opacity:0; }
.csx-player__play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; border:0; background:rgba(255,255,255,0.95); color:var(--navy); display:flex; align-items:center; justify-content:center; box-shadow:0 14px 36px rgba(0,0,0,0.4); transition:transform var(--d-fast) var(--ease-out); cursor:pointer; z-index:2; }
.csx-player:hover .csx-player__play { transform:translate(-50%,-50%) scale(1.1); }
.csx-player.is-playing .csx-player__play { opacity:0; pointer-events:none; }
.csx-player__play svg { width:30px; height:30px; margin-left:3px; }
.csx-player__badge { position:absolute; left:14px; bottom:14px; z-index:2; font-family:var(--font-mono); font-size:0.72rem; font-weight:600; letter-spacing:0.06em; color:var(--white); background:rgba(14,27,44,0.55); backdrop-filter:blur(6px); padding:0.35rem 0.7rem; border-radius:var(--r-pill); transition:opacity var(--d-fast) var(--ease-out); }
.csx-player.is-playing .csx-player__badge { opacity:0; }
/* floating accent behind player */
.csx-hero__media::before { content:""; position:absolute; width:64%; height:64%; right:-6%; top:-8%; background:radial-gradient(circle at 50% 50%, rgba(46,151,222,0.16), transparent 70%); filter:blur(10px); z-index:-1; }

/* --- breakdown: stepped cards --- */
.csx-section-head { text-align:center; max-width:50ch; margin:0 auto clamp(2rem,4vw,3rem); }
.csx-eyebrow { display:block; font-family:var(--font-mono); font-size:var(--t-mono); font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--navy); margin-bottom:0.7rem; }
.csx-h2 { font-size:var(--t-2xl); letter-spacing:-0.02em; color:var(--ink); margin:0; }
.csx-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.2vw,1.6rem); }
.csx-step { position:relative; background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg); padding:clamp(1.5rem,2.6vw,2rem); box-shadow:var(--sh-card); overflow:hidden; }
.csx-step__num { font-family:var(--font-mono); font-size:0.8rem; font-weight:700; letter-spacing:0.1em; color:var(--mute); }
.csx-step__icon { width:46px; height:46px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; margin:0.9rem 0 1.1rem; background:var(--soft-blue); color:var(--navy); }
.csx-step__icon svg { width:24px; height:24px; }
.csx-step h3 { font-size:var(--t-lg); color:var(--ink); margin:0 0 0.6rem; letter-spacing:-0.01em; }
.csx-step p { font-size:var(--t-sm); color:var(--slate); line-height:1.6; margin:0; }
.csx-step--win { background:linear-gradient(160deg, var(--navy) 0%, var(--navy-ink) 100%); border-color:transparent; }
.csx-step--win .csx-step__num { color:rgba(255,255,255,0.55); }
.csx-step--win .csx-step__icon { background:rgba(255,255,255,0.14); color:var(--white); }
.csx-step--win h3 { color:var(--white); }
.csx-step--win p { color:rgba(255,255,255,0.82); }
@media (max-width:820px){ .csx-steps { grid-template-columns:1fr; } }

/* --- proof shots (browser-framed, constrained) --- */
.csx-proof { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.4rem,3vw,2.2rem); max-width:920px; margin:0 auto; align-items:start; }
@media (max-width:760px){ .csx-proof { grid-template-columns:1fr; } }
.csx-shot { margin:0; border-radius:var(--r-md); overflow:hidden; background:var(--white); border:1px solid var(--rule); box-shadow:var(--sh-card); }
.csx-shot__bar { display:flex; align-items:center; gap:6px; padding:0.6rem 0.85rem; background:var(--paper-2); border-bottom:1px solid var(--rule-light); }
.csx-shot__bar span { width:9px; height:9px; border-radius:50%; background:var(--rule-strong); }
.csx-shot img { display:block; width:100%; height:auto; }
.csx-shot figcaption { font-size:var(--t-xs); color:var(--steel); padding:0.8rem 1rem; text-align:center; }

/* --- testimonial quote card --- */
.csx-quote { position:relative; max-width:760px; margin:0 auto; background:var(--white); border:1px solid var(--rule); border-radius:var(--r-xl); padding:clamp(2.2rem,4vw,3.4rem); box-shadow:var(--sh-card); text-align:center; }
.csx-quote__mark { font-family:Georgia, serif; font-size:5rem; line-height:0.5; color:var(--navy); opacity:0.16; display:block; height:2.2rem; }
.csx-quote p { font-size:clamp(1.25rem,2.2vw,1.7rem); font-weight:600; line-height:1.42; letter-spacing:-0.01em; color:var(--navy-ink); margin:0 0 1.6rem; }
.csx-quote__by { display:inline-flex; align-items:center; gap:0.9rem; }
.csx-quote__logo { height:40px; width:auto; max-width:120px; object-fit:contain; }
.csx-quote__by div { text-align:left; }
.csx-quote__by strong { display:block; font-size:var(--t-sm); color:var(--ink); }
.csx-quote__by small { display:block; font-size:var(--t-xs); color:var(--steel); margin-top:0.15rem; }

/* --- more wins --- */
.csx-more__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.2vw,1.5rem); margin-top:clamp(1.6rem,3vw,2.4rem); }
@media (max-width:760px){ .csx-more__grid { grid-template-columns:1fr; } }
.csx-mini { display:flex; gap:1rem; align-items:center; background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg); padding:1rem; box-shadow:var(--sh-rest); transition:transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out); }
.csx-mini:hover { transform:translateY(-3px); box-shadow:var(--sh-card); }
.csx-mini img { width:64px; height:80px; object-fit:cover; border-radius:var(--r-sm); flex-shrink:0; }
.csx-mini__txt strong { display:block; font-size:var(--t-sm); color:var(--ink); line-height:1.2; }
.csx-mini__txt span { display:block; font-size:var(--t-xs); color:var(--navy); font-weight:600; margin-top:0.3rem; }

/* --- hero responsive --- */
@media (max-width:900px){
  .csx-hero__grid { grid-template-columns:1fr; gap:clamp(2rem,6vw,3rem); }
  .csx-hero__media { order:-1; }
  .csx-player { max-width:340px; }
  .csx-player--wide { max-width:100%; }
  .csx-cta .btn { flex:1 1 auto; justify-content:center; }
}
@media (max-width:480px){
  .csx-stats li { flex:1 1 100%; min-width:0; border-right:0; border-bottom:1px solid var(--rule); }
  .csx-stats li:last-child { border-bottom:0; }
}

/* ================================================================
   R37 (Cody Loom2 06/17) — HOME hero floating service orbit
   Replaces the hero video with a fitted, hover-bouncing cluster of
   the things we run for home-service businesses.
   ================================================================ */
.orbit { position:relative; width:100%; max-width:460px; aspect-ratio:1/1.3; margin:0 auto; }
.orbit__halo { position:absolute; left:50%; top:50%; width:78%; height:78%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 50% 45%, rgba(46,151,222,0.18), rgba(35,92,135,0.06) 55%, transparent 72%); z-index:0; }
.orbit__core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:84px; height:84px; border-radius:50%; background:var(--white); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-lift); z-index:2; animation:orbit-pulse 4s var(--ease-in-out) infinite; }
.orbit__core img { width:40px; height:40px; object-fit:contain; }
.orbit__core::after { content:""; position:absolute; inset:-8px; border-radius:50%; border:1px dashed rgba(35,92,135,0.25); }

.orbit__node { position:absolute; left:var(--x); top:var(--y); width:35%; aspect-ratio:1/1; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.35rem; text-align:center; padding:0.6rem; z-index:3;
  animation:orbit-float 6s var(--ease-in-out) infinite; animation-delay:var(--d);
  transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s var(--ease-out); cursor:default; }
.orbit__node svg { width:28%; height:28%; max-width:32px; }
.orbit__node span { font-size:clamp(0.64rem,1.2vw,0.82rem); font-weight:600; line-height:1.12; letter-spacing:-0.01em; }
.orbit__node--lg { width:35%; }
.orbit__node--fill { background:linear-gradient(155deg, var(--navy) 0%, var(--navy-ink) 100%); color:var(--white); box-shadow:0 18px 40px rgba(19,50,82,0.28); }
.orbit__node--fill svg { color:rgba(255,255,255,0.92); }
.orbit__node--soft { background:var(--soft-blue); color:var(--navy-ink); box-shadow:0 14px 32px rgba(14,27,44,0.10); border:1px solid rgba(35,92,135,0.10); }
.orbit__node--soft svg { color:var(--navy); }
.orbit__node:hover { transform:translateY(-14px) scale(1.06); animation-play-state:paused; box-shadow:0 28px 56px rgba(19,50,82,0.30); z-index:5; }

.orbit__chip { position:absolute; z-index:4; background:var(--white); border:1px solid var(--rule); border-radius:var(--r-pill); padding:0.5rem 0.85rem; font-size:0.78rem; color:var(--slate); box-shadow:var(--sh-card); white-space:nowrap; animation:orbit-float 7s var(--ease-in-out) infinite; }
.orbit__chip strong { color:var(--navy); font-size:0.95rem; }
.orbit__chip--a { left:-4%; top:40%; animation-delay:.3s; }
.orbit__chip--b { right:-3%; top:26%; animation-delay:1.2s; }

@keyframes orbit-float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@keyframes orbit-pulse { 0%,100%{ box-shadow:var(--sh-lift); } 50%{ box-shadow:0 24px 54px rgba(19,50,82,0.20); } }
@media (prefers-reduced-motion:reduce){ .orbit__node,.orbit__chip,.orbit__core{ animation:none; } }

@media (max-width:980px){ .orbit { max-width:440px; } }
@media (max-width:620px){
  .orbit { max-width:360px; }
  .orbit__node span { font-size:0.62rem; }
  .orbit__chip { font-size:0.68rem; padding:0.4rem 0.65rem; }
  .orbit__chip--a { left:-2%; } .orbit__chip--b { right:-1%; }
}

/* ================================================================
   R38 (Cody Loom2 06/17) — ABOUT hero floating trust widgets
   Replaces the team photo with hover-bouncing trust cards.
   ================================================================ */
.trust-cloud { position:relative; width:100%; max-width:560px; aspect-ratio:1/0.96; margin:0 auto; }
.tcard { position:absolute; left:var(--x); top:var(--y); width:47%; display:flex; align-items:center; gap:0.85rem; padding:1.05rem 1.2rem; border-radius:var(--r-md); z-index:2;
  animation:orbit-float 6.5s var(--ease-in-out) infinite; animation-delay:var(--d);
  transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s var(--ease-out); }
.tcard__ic { flex-shrink:0; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.tcard__ic svg { width:24px; height:24px; }
.tcard strong { display:block; font-size:1.6rem; font-weight:700; letter-spacing:-0.02em; line-height:1; }
.tcard small { display:block; font-size:0.82rem; line-height:1.2; margin-top:0.3rem; white-space:nowrap; }
.tcard--fill { background:linear-gradient(155deg, var(--navy) 0%, var(--navy-ink) 100%); color:var(--white); box-shadow:0 18px 40px rgba(19,50,82,0.26); }
.tcard--fill .tcard__ic { background:rgba(255,255,255,0.16); color:var(--white); }
.tcard--fill small { color:rgba(255,255,255,0.8); }
.tcard--soft { background:var(--soft-blue); color:var(--navy-ink); box-shadow:0 14px 32px rgba(14,27,44,0.10); border:1px solid rgba(35,92,135,0.10); }
.tcard--soft .tcard__ic { background:var(--white); color:var(--navy); }
.tcard--soft small { color:var(--slate); }
.tcard--white { background:var(--white); color:var(--ink); box-shadow:var(--sh-card); border:1px solid var(--rule); }
.tcard--white .tcard__ic { background:var(--soft-blue); color:var(--navy); }
.tcard--white small { color:var(--steel); }
.tcard:hover { transform:translateY(-12px) scale(1.05); animation-play-state:paused; box-shadow:0 28px 56px rgba(19,50,82,0.28); z-index:5; }
@media (prefers-reduced-motion:reduce){ .tcard { animation:none; } }
@media (max-width:980px){ .trust-cloud { max-width:430px; } }
@media (max-width:620px){ .trust-cloud { max-width:360px; } .tcard strong { font-size:1.15rem; } .tcard__ic { width:34px; height:34px; } .tcard__ic svg { width:18px; height:18px; } }

/* ================================================================
   R39 (Cody Loom2 06/17) — UNIQUE service hero diagrams
   Facebook Ads = social-feed ad · Google Ads = search results.
   Two distinct concepts so the two pages no longer share a visual.
   ================================================================ */

/* ---- Facebook Ads: scroll-stopping feed ---- */
.fbfeed { position:relative; width:100%; max-width:440px; margin:0 auto; padding:1.4rem 0; }
.fbfeed__glow { position:absolute; left:50%; top:50%; width:90%; height:90%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 50% 40%, rgba(8,102,255,0.14), rgba(214,41,118,0.08) 55%, transparent 74%); z-index:0; }
.fbfeed__card { position:relative; z-index:2; background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg); box-shadow:var(--sh-lift); overflow:hidden; }
.fbfeed__head { display:flex; align-items:center; gap:0.65rem; padding:0.9rem 1rem 0.6rem; }
.fbfeed__av { width:40px; height:40px; border-radius:50%; flex-shrink:0; background:linear-gradient(155deg,var(--navy),var(--navy-ink)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:700; letter-spacing:0.02em; }
.fbfeed__who { flex:1; min-width:0; }
.fbfeed__who strong { display:block; font-size:0.9rem; color:var(--ink); }
.fbfeed__who small { display:flex; align-items:center; gap:0.25rem; font-size:0.72rem; color:var(--steel); }
.fbfeed__dots { color:var(--mute); font-size:0.9rem; letter-spacing:1px; }
.fbfeed__copy { margin:0; padding:0 1rem 0.8rem; font-size:0.86rem; line-height:1.45; color:var(--ink-soft); }
.fbfeed__copy em { font-style:normal; font-weight:700; color:var(--navy); }
.fbfeed__media { position:relative; height:215px; background:#0e1b2c; overflow:hidden; }
.fbfeed__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.fbfeed__cta { position:absolute; right:0.9rem; bottom:0.9rem; background:var(--white); color:var(--navy); font-size:0.8rem; font-weight:700; padding:0.5rem 1rem; border-radius:var(--r-pill); box-shadow:0 8px 20px rgba(0,0,0,0.18); }
.fbfeed__bar { display:flex; gap:1.4rem; padding:0.7rem 1rem 0.9rem; }
.fbfeed__bar span { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.8rem; color:var(--steel); }
.fbfeed__chip { position:absolute; z-index:3; display:inline-flex; align-items:center; gap:0.4rem; background:var(--white); border:1px solid var(--rule); border-radius:var(--r-pill); padding:0.45rem 0.75rem; font-size:0.76rem; font-weight:600; color:var(--ink); box-shadow:var(--sh-card); white-space:nowrap; animation:orbit-float 6s var(--ease-in-out) infinite; transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s var(--ease-out); }
.fbfeed__chip:hover { transform:translateY(-8px) scale(1.06); animation-play-state:paused; box-shadow:var(--sh-lift); }
.fbfeed__chip--ig { top:2%; right:-6%; animation-delay:0s; }
.fbfeed__chip--fb { top:30%; left:-12%; animation-delay:.7s; }
.fbfeed__chip--re { bottom:16%; right:-9%; animation-delay:1.1s; }
.fbfeed__chip--ms { bottom:2%; left:-7%; animation-delay:.4s; }

/* ---- Google Ads: search results ---- */
.gserp { position:relative; width:100%; max-width:410px; margin:0 auto; padding:1.6rem 0; }
.gserp__glow { position:absolute; left:50%; top:48%; width:92%; height:90%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 50% 40%, rgba(66,133,244,0.14), rgba(52,168,83,0.07) 55%, transparent 74%); z-index:0; }
.gserp__search { position:relative; z-index:2; display:flex; align-items:center; gap:0.6rem; background:var(--white); border:1px solid var(--rule); border-radius:var(--r-pill); padding:0.75rem 1.1rem; box-shadow:var(--sh-card); }
.gserp__q { font-size:0.95rem; color:var(--ink); }
.gserp__cursor { width:2px; height:1.05rem; background:var(--navy); animation:gserp-blink 1.1s steps(1) infinite; }
@keyframes gserp-blink { 50%{ opacity:0; } }
.gserp__ad { position:relative; z-index:2; margin-top:0.9rem; background:var(--white); border:1px solid var(--rule); border-radius:var(--r-md); box-shadow:var(--sh-lift); padding:1rem 1.1rem; }
.gserp__line { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.35rem; }
.gserp__spon { font-size:0.7rem; font-weight:700; color:var(--ink); }
.gserp__url { font-size:0.78rem; color:#3a7d3a; }
.gserp__title { margin:0 0 0.3rem; font-size:1.02rem; font-weight:600; color:#1a56c4; letter-spacing:-0.01em; }
.gserp__desc { margin:0 0 0.7rem; font-size:0.8rem; line-height:1.45; color:var(--slate); }
.gserp__call { display:inline-flex; align-items:center; gap:0.4rem; background:var(--navy); color:#fff; font-size:0.78rem; font-weight:600; padding:0.4rem 0.9rem; border-radius:var(--r-pill); }
.gserp__lsa { position:relative; z-index:2; margin-top:0.7rem; display:flex; align-items:center; flex-wrap:wrap; gap:0.4rem 0.7rem; background:var(--white); border:1px solid var(--rule); border-radius:var(--r-md); box-shadow:var(--sh-card); padding:0.7rem 0.9rem; }
.gserp__gg { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.72rem; font-weight:600; color:#1a7f37; background:rgba(52,168,83,0.10); padding:0.2rem 0.5rem; border-radius:var(--r-sm); }
.gserp__lsa strong { font-size:0.85rem; color:var(--ink); }
.gserp__rev { font-size:0.76rem; color:#e8910b; }
.gserp__chip { position:absolute; z-index:3; background:var(--white); border:1px solid var(--rule); border-radius:var(--r-pill); padding:0.4rem 0.7rem; font-size:0.74rem; font-weight:600; color:var(--navy); box-shadow:var(--sh-card); white-space:nowrap; animation:orbit-float 6.5s var(--ease-in-out) infinite; transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s var(--ease-out); }
.gserp__chip:hover { transform:translateY(-8px) scale(1.06); animation-play-state:paused; box-shadow:var(--sh-lift); }
.gserp__chip--search { top:6%; right:-7%; animation-delay:0s; }
.gserp__chip--maps { top:40%; left:-11%; animation-delay:.6s; }
.gserp__chip--yt { bottom:20%; right:-8%; animation-delay:1s; }
.gserp__chip--pmax { bottom:1%; left:-6%; animation-delay:.3s; }
@media (prefers-reduced-motion:reduce){ .fbfeed__chip,.gserp__chip,.gserp__cursor { animation:none; } }
@media (max-width:620px){
  .fbfeed { max-width:320px; } .gserp { max-width:330px; }
  .fbfeed__chip--fb,.gserp__chip--maps { left:-4%; }
  .fbfeed__chip--ig,.fbfeed__chip--re,.gserp__chip--search,.gserp__chip--yt { right:-3%; }
}

/* ================================================================
   R40 (Cody Loom2 06/17) — BESPOKE service-page signature sections
   Replaces the identical 4-step "process" block on every page with a
   distinct format + service-specific copy + per-service accent (--svc).
   ================================================================ */
.sig__head { text-align:center; max-width:56ch; margin:0 auto clamp(2rem,4vw,3rem); }
.sig__eyebrow { display:block; font-family:var(--font-mono); font-size:var(--t-mono); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--svc); margin-bottom:0.6rem; }
.sig h2 { font-size:var(--t-2xl); letter-spacing:-0.02em; color:var(--ink); margin:0 0 0.6rem; }
.sig h2 em { font-style:normal; color:var(--svc); }
.sig__sub { font-size:var(--t-lg); color:var(--slate); margin:0; line-height:1.55; }
.section--band-blue .sig h2 { color:var(--white); }
.section--band-blue .sig__sub { color:rgba(255,255,255,0.8); }

/* SEO — the climb */
.sigrank__track { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(0.9rem,1.8vw,1.4rem); align-items:end; }
.sigrank__step { background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg); padding:clamp(1.1rem,2vw,1.5rem); box-shadow:var(--sh-card); }
.sigrank__step:nth-child(1){ margin-top:72px; } .sigrank__step:nth-child(2){ margin-top:48px; } .sigrank__step:nth-child(3){ margin-top:24px; }
.sigrank__rank { display:inline-block; font-family:var(--font-mono); font-size:1.7rem; font-weight:800; color:var(--svc); line-height:1; margin-bottom:0.7rem; }
.sigrank__step h3 { font-size:1.02rem; color:var(--ink); margin:0 0 0.45rem; }
.sigrank__step p { font-size:var(--t-sm); color:var(--slate); line-height:1.55; margin:0; }
.sigrank__step--win { border:2px solid var(--svc); box-shadow:0 22px 44px rgba(31,157,114,0.20); }
.sigrank__step--win .sigrank__rank { background:var(--svc); color:#fff; padding:0.1rem 0.6rem; border-radius:var(--r-sm); }
@media (max-width:820px){ .sigrank__track{ grid-template-columns:1fr 1fr; } .sigrank__step{ margin-top:0!important; } }
@media (max-width:480px){ .sigrank__track{ grid-template-columns:1fr; } }

/* Web Design — browser filmstrip */
.sigbrowser__strip { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(0.9rem,1.8vw,1.4rem); }
.sigwin { background:var(--white); border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-card); }
.sigwin__bar { display:flex; align-items:center; gap:5px; padding:0.55rem 0.7rem; background:var(--paper-2); border-bottom:1px solid var(--rule-light); }
.sigwin__bar span { width:8px; height:8px; border-radius:50%; background:var(--rule-strong); }
.sigwin__bar i { margin-left:auto; font-style:normal; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.04em; color:var(--mute); }
.sigwin__body { padding:1rem 1.1rem 1.3rem; }
.sigwin__body h3 { font-size:1rem; color:var(--ink); margin:0.9rem 0 0.4rem; }
.sigwin__body p { font-size:var(--t-sm); color:var(--slate); margin:0; line-height:1.5; }
.sigwin__wire { display:flex; flex-direction:column; gap:6px; height:58px; justify-content:center; }
.sigwin__wire span { height:8px; border-radius:3px; background:var(--rule); }
.sigwin__wire span:nth-child(1){ width:70%; } .sigwin__wire span:nth-child(2){ width:100%; } .sigwin__wire span:nth-child(3){ width:45%; }
.sigwin__art { height:58px; border-radius:6px; background:linear-gradient(135deg, var(--svc), #8a8aff); }
.sigwin__code { height:58px; border-radius:6px; background:#0e1b2c; display:flex; flex-direction:column; gap:5px; padding:9px 10px; justify-content:center; }
.sigwin__code span { height:5px; border-radius:2px; background:rgba(139,139,255,0.55); }
.sigwin__code span:nth-child(1){ width:55%; } .sigwin__code span:nth-child(2){ width:80%; margin-left:10px; } .sigwin__code span:nth-child(3){ width:65%; margin-left:10px; } .sigwin__code span:nth-child(4){ width:40%; }
.sigwin__live { height:58px; border-radius:6px; background:rgba(91,91,214,0.10); display:flex; align-items:center; justify-content:center; color:var(--svc); font-weight:800; letter-spacing:0.06em; font-size:0.9rem; }
.sigwin--win { outline:2px solid var(--svc); outline-offset:-1px; }
@media (max-width:820px){ .sigbrowser__strip{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .sigbrowser__strip{ grid-template-columns:1fr; } }

/* Custom Software — connected node blueprint (on dark band) */
.signode__flow { list-style:none; margin:0 auto; padding:0; max-width:700px; }
.signode__node { position:relative; display:flex; gap:1.2rem; padding-bottom:1.4rem; }
.signode__node:not(:last-child)::before { content:""; position:absolute; left:21px; top:46px; bottom:-2px; width:2px; background:rgba(255,255,255,0.16); }
.signode__dot { flex-shrink:0; width:44px; height:44px; border-radius:12px; background:var(--svc); color:#04303a; font-family:var(--font-mono); font-weight:800; display:flex; align-items:center; justify-content:center; z-index:2; }
.signode__card { flex:1; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:var(--r-md); padding:1.05rem 1.3rem; }
.signode__card h3 { color:var(--white); font-size:1.05rem; margin:0 0 0.4rem; }
.signode__card p { color:rgba(255,255,255,0.78); font-size:var(--t-sm); margin:0; line-height:1.55; }
.signode__node--win .signode__dot { box-shadow:0 0 0 4px rgba(25,178,191,0.25); }
.signode__node--win .signode__card { border-color:var(--svc); background:rgba(25,178,191,0.08); }

/* AI & Automation — live automation flow */
.sigflow__pipe { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0.55rem; margin:0 auto clamp(2rem,4vw,3rem); }
.sigflow__pill { background:var(--white); border:1px solid var(--rule); border-radius:var(--r-pill); padding:0.55rem 1rem; font-size:var(--t-sm); font-weight:600; color:var(--ink); box-shadow:var(--sh-rest); white-space:nowrap; }
.sigflow__pill--win { background:var(--svc); color:#fff; border-color:transparent; }
.sigflow__arr { width:20px; height:20px; color:var(--svc); flex-shrink:0; }
.sigflow__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(0.9rem,1.8vw,1.4rem); }
.sigflow__card { background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg); padding:clamp(1.1rem,2vw,1.5rem); box-shadow:var(--sh-card); }
.sigflow__num { font-family:var(--font-mono); font-weight:800; font-size:0.9rem; color:var(--svc); }
.sigflow__card h3 { font-size:1rem; color:var(--ink); margin:0.7rem 0 0.4rem; }
.sigflow__card p { font-size:var(--t-sm); color:var(--slate); margin:0; line-height:1.55; }
.sigflow__card--win { border-color:var(--svc); background:rgba(124,77,214,0.05); }
@media (max-width:820px){ .sigflow__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .sigflow__grid{ grid-template-columns:1fr; } .sigflow__pipe .sigflow__arr{ transform:rotate(90deg); } }

/* Content Production — storyboard filmstrip (on dark band) */
.sigboard__strip { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(0.9rem,1.8vw,1.4rem); }
.sigframe { position:relative; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:var(--r-md); padding:1.2rem; }
.sigframe__tag { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--svc); font-weight:700; }
.sigframe__win { aspect-ratio:16/10; border-radius:8px; background:rgba(255,255,255,0.06); border:1px dashed rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center; margin:0.8rem 0 1rem; }
.sigframe__win svg { width:34px; height:34px; color:var(--svc); }
.sigframe h3 { color:var(--white); font-size:1rem; margin:0 0 0.4rem; }
.sigframe p { color:rgba(255,255,255,0.76); font-size:var(--t-sm); margin:0; line-height:1.5; }
.sigframe--win { border-color:var(--svc); background:rgba(224,86,122,0.08); }
@media (max-width:820px){ .sigboard__strip{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .sigboard__strip{ grid-template-columns:1fr; } }

/* ================================================================
   R41 (Cody case-study detail rebuild 06/17) — clean hero like other
   pages (left-aligned, standard font, one CTA, chip not logo), morph
   player on the right aligned chip-to-CTA, and a full-width quote bar.
   ================================================================ */
.cs-hero .hero__split { align-items:center; }
.cs-hero .hero__visual { display:flex; align-items:center; justify-content:flex-end; }
/* Thumbnail stays its original full size (4:5 poster, no crop); elongates to the
   video's real ratio only once play is hit. */
.cs-hero .csx-player { width:100%; max-width:380px; margin:0 0 0 auto; }
@media (max-width:900px){
  .cs-hero .hero__visual { order:-1; justify-content:center; }
  .cs-hero .csx-player { max-width:340px; margin:0 auto; }
}

/* Full-width quote bar, sits tight under the breakdown cards */
.csx-quotebar { display:flex; align-items:center; gap:1.4rem; width:100%; margin-top:clamp(1rem,2vw,1.5rem);
  padding:clamp(1.3rem,2.6vw,1.9rem) clamp(1.5rem,3vw,2.4rem); border-radius:var(--r-lg);
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-ink) 100%); box-shadow:var(--sh-card); }
.csx-quotebar__mark { font-family:Georgia, serif; font-size:3.4rem; line-height:0; color:rgba(255,255,255,0.32); align-self:flex-start; margin-top:1.5rem; flex-shrink:0; }
.csx-quotebar p { flex:1; margin:0; font-size:clamp(1.05rem,1.6vw,1.32rem); font-weight:600; line-height:1.42; color:var(--white); letter-spacing:-0.01em; }
.csx-quotebar cite { flex-shrink:0; font-style:normal; text-align:right; font-size:var(--t-sm); font-weight:600; color:var(--white); max-width:20ch; }
.csx-quotebar cite span { display:block; font-size:var(--t-xs); font-weight:400; color:rgba(255,255,255,0.68); margin-top:0.2rem; }
@media (max-width:680px){
  .csx-quotebar { flex-direction:column; align-items:flex-start; gap:0.7rem; }
  .csx-quotebar__mark { margin-top:0; font-size:2.6rem; }
  .csx-quotebar cite { text-align:left; max-width:none; }
}

/* ================================================================
   R42 — Work detail "About the client" (replaces the generic
   "How we built it" phases; fills the right-side white space).
   ================================================================ */
.proj-about { display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (max-width:820px){ .proj-about { grid-template-columns:1fr; gap:1.6rem; } }
.proj-about__aside .eyebrow { display:block; font-family:var(--font-mono); font-size:var(--t-mono); font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--navy); margin-bottom:0.7rem; }
.proj-about__aside h2 { font-size:var(--t-2xl); letter-spacing:-0.02em; color:var(--ink); margin:0 0 1.2rem; line-height:1.1; }
.proj-about__built { display:flex; flex-direction:column; gap:0.2rem; margin:0 0 1.4rem; font-size:var(--t-base); font-weight:600; color:var(--ink-soft); padding-top:1rem; border-top:1px solid var(--rule-light); }
.proj-about__built span { font-size:var(--t-eyebrow); font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--mute); }
.proj-about__body p { color:var(--slate); line-height:1.75; font-size:1.04rem; margin:0 0 1.15rem; }
.proj-about__body p:last-child { margin-bottom:0; }

/* ================================================================
   R44 — ABOUT hero dashboard cascade (replaces floating trust cards).
   Cascading metric cards in the navy/azure theme. No other colors.
   ================================================================ */
.dash { position:relative; width:100%; max-width:468px; aspect-ratio:1/1.28; margin:0 auto; }
.dashcard { position:absolute; left:var(--x); top:var(--y); width:67%; display:flex; align-items:center; gap:0.85rem;
  padding:0.95rem 1.1rem; background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg); box-shadow:var(--sh-lift);
  animation:orbit-float 6.8s var(--ease-in-out) infinite; animation-delay:var(--d);
  transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s var(--ease-out); }
.dashcard:hover { transform:translateY(-9px) scale(1.04); box-shadow:0 30px 60px rgba(19,50,82,0.3); z-index:6; }
.dashcard__ic { flex-shrink:0; width:46px; height:46px; border-radius:12px; background:var(--soft-blue); color:var(--navy); display:flex; align-items:center; justify-content:center; }
.dashcard__ic svg { width:24px; height:24px; }
.dashcard__txt { min-width:0; }
.dashcard__txt strong { display:block; font-size:1.45rem; font-weight:800; letter-spacing:-0.02em; color:var(--ink); line-height:1; }
.dashcard__txt span { display:block; font-size:0.9rem; font-weight:600; color:var(--ink-soft); margin-top:0.2rem; }
.dashcard__txt small { display:block; font-size:0.72rem; color:var(--steel); margin-top:0.15rem; }
.dashcard__spark { width:58px; height:28px; margin-left:auto; flex-shrink:0; color:var(--navy-bright); }
.dashcard--dark { background:linear-gradient(155deg, var(--navy) 0%, var(--navy-ink) 100%); border-color:transparent; box-shadow:0 22px 46px rgba(19,50,82,0.32); }
.dashcard--dark .dashcard__ic { background:rgba(255,255,255,0.15); color:var(--white); }
.dashcard--dark .dashcard__txt strong { color:var(--white); }
.dashcard--dark .dashcard__txt strong.dashcard__title { font-size:1.02rem; font-weight:700; }
.dashcard--dark .dashcard__txt span { color:rgba(255,255,255,0.82); }
.dashcard--dark .dashcard__txt small { color:rgba(255,255,255,0.7); }
.dashcard__live { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--orange-1); margin-right:5px; vertical-align:middle; box-shadow:0 0 0 3px rgba(91,179,240,0.25); }
@media (prefers-reduced-motion:reduce){ .dashcard { animation:none; } }
@media (max-width:980px){ .dash { max-width:440px; } }
@media (max-width:620px){ .dash { max-width:360px; aspect-ratio:1/1.32; } .dashcard { width:72%; padding:0.85rem 0.95rem; } .dashcard__txt strong { font-size:1.25rem; } }

/* ================================================================
   R43 — WORK page showcases: Reels, Facebook Ads, SEO, Google Ads.
   Shows the actual work (like the websites grid) instead of plain copy.
   ================================================================ */

/* Hover bounce on the showcase widgets (FB ads, Google ads, SEO) */
.adcard, .gadcard, .seoshot { transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s var(--ease-out); }
.adcard:hover, .gadcard:hover, .seoshot:hover { transform:translateY(-8px) scale(1.02); box-shadow:var(--sh-lift); z-index:2; }

/* Reels */
.reelgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,3vw,2.2rem); max-width:760px; margin:0 auto; }
.reelgrid .csx-player { max-width:none; width:100%; }
@media (max-width:520px){ .reelgrid { max-width:380px; } }

/* SEO search-ranking mockup */
.serpmock { aspect-ratio:4/3; display:flex; flex-direction:column; justify-content:center; padding:0.9rem 1rem; }
.serpmock__q { display:flex; align-items:center; gap:0.45rem; font-size:0.82rem; color:var(--ink); background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r-pill); padding:0.5rem 0.85rem; margin-bottom:0.9rem; }
.serpmock__result { display:flex; align-items:center; gap:0.7rem; padding:0.55rem 0; border-top:1px solid var(--rule-light); }
.serpmock__result:first-of-type { border-top:0; }
.serpmock__rank { flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--paper-2); color:var(--steel); font-size:0.78rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.serpmock__title { font-size:0.85rem; font-weight:600; color:var(--slate); line-height:1.2; }
.serpmock__url { font-size:0.72rem; color:var(--mute); }
.serpmock__result--win .serpmock__rank { background:#1f9d72; color:#fff; }
.serpmock__result--win .serpmock__title { color:#1a56c4; }
.serpmock__result--win .serpmock__url { color:#3a7d3a; }

/* Facebook ad cards */
.adgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.2vw,1.6rem); }
@media (max-width:880px){ .adgrid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .adgrid { grid-template-columns:1fr; max-width:360px; margin:0 auto; } }
.adcard { background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-card); display:flex; flex-direction:column; }
.adcard__top { display:flex; align-items:center; gap:0.6rem; padding:0.8rem 0.9rem 0.5rem; }
.adcard__av { width:36px; height:36px; border-radius:50%; flex-shrink:0; background:linear-gradient(155deg,var(--navy),var(--navy-ink)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:700; }
.adcard__top strong { display:block; font-size:0.85rem; color:var(--ink); }
.adcard__top small { font-size:0.72rem; color:var(--steel); }
.adcard__copy { margin:0; padding:0 0.9rem 0.7rem; font-size:0.84rem; line-height:1.4; color:var(--ink-soft); }
/* keep ad copy dark even when the section sits on the navy band */
.adcard .adcard__copy { color:var(--ink-soft); }
.adcard .adcard__top strong { color:var(--ink); }
.adcard .adcard__top small { color:var(--steel); }
.adcard__media { position:relative; aspect-ratio:1/1; overflow:hidden; }
.adcard__media img { width:100%; height:100%; object-fit:cover; display:block; }
.adcard__cta { position:absolute; right:0.7rem; bottom:0.7rem; background:var(--white); color:var(--navy); font-size:0.74rem; font-weight:700; padding:0.4rem 0.85rem; border-radius:var(--r-pill); box-shadow:0 6px 16px rgba(0,0,0,0.2); }
.adcard__bar { display:flex; gap:1.1rem; padding:0.6rem 0.9rem 0.8rem; font-size:0.76rem; color:var(--steel); }
.adcard__bar span { display:inline-flex; align-items:center; gap:0.3rem; }

/* SEO showcase */
.seogrid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,1.8rem); align-items:stretch; }
@media (max-width:880px){ .seogrid { grid-template-columns:1fr; max-width:460px; margin:0 auto; } }
.seoshot { margin:0; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-card); }
.seoshot__bar { display:flex; align-items:center; gap:6px; padding:0.55rem 0.8rem; background:var(--paper-2); border-bottom:1px solid var(--rule-light); }
.seoshot__bar span { width:8px; height:8px; border-radius:50%; background:var(--rule-strong); }
.seoshot__bar i { margin-left:auto; font-style:normal; font-family:var(--font-mono); font-size:0.62rem; color:var(--mute); }
.seoshot__media { aspect-ratio:4/3; overflow:hidden; }
.seoshot__media img { width:100%; height:100%; object-fit:cover; display:block; }
.seoshot figcaption { font-size:0.82rem; color:var(--steel); padding:0.8rem 1rem; text-align:center; margin-top:auto; }
.seoshot--stat { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(1.8rem,4vw,3rem) 1.2rem; background:linear-gradient(160deg,var(--navy),var(--navy-ink)); border-color:transparent; }
.seoshot--stat strong { font-size:clamp(3rem,7vw,4.5rem); font-weight:800; letter-spacing:-0.03em; color:#fff; line-height:1; }
.seoshot--stat span { color:rgba(255,255,255,0.82); font-size:0.95rem; margin-top:0.6rem; max-width:22ch; }

/* Google ad cards */
.gadgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.2vw,1.5rem); }
@media (max-width:880px){ .gadgrid { grid-template-columns:1fr; max-width:480px; margin:0 auto; } }
.gadcard { background:var(--white); border:1px solid var(--rule); border-radius:var(--r-md); box-shadow:var(--sh-card); padding:1.1rem 1.2rem; }
.gadcard__line { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.4rem; }
.gadcard__spon { font-size:0.68rem; font-weight:700; color:var(--ink); }
.gadcard__url { font-size:0.76rem; color:#3a7d3a; }
.gadcard h3 { margin:0 0 0.35rem; font-size:1.02rem; font-weight:600; color:#1a56c4; letter-spacing:-0.01em; }
.gadcard p { margin:0 0 0.7rem; font-size:0.82rem; line-height:1.45; color:var(--slate); }
.gadcard__cta { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.78rem; font-weight:600; color:var(--navy); }
.gadcard__cta svg { width:13px; height:13px; }

/* R45 (06/18) — roadmap cards: title on its own line, subtext one step smaller
   and lighter beneath it. Clearer hierarchy than the inline bold lead-in. */
.roadmap__title {
  display: block;
  margin: 0 0 0.32rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.32;
  letter-spacing: -0.005em;
}
.roadmap__task {           /* now the subtext line */
  color: rgba(255,255,255,0.78);
  font-size: 0.9rem;
  line-height: 1.5;
}
.roadmap__title--goal {
  font-size: 1.2rem;
  margin: 0;
}
/* keep the goal highlight (azure #2E97DE) on the promoted goal title */
.roadmap__item--goal .roadmap__title em {
  color: var(--orange-2) !important;
  -webkit-text-fill-color: var(--orange-2);
  background: none;
  font-style: italic;
}

/* R46 (06/18) — About founder portrait travels with the story (sticky), so the
   tall first-person bio no longer leaves a massive whitespace column on the left. */
@media (min-width: 821px) {
  .owner { align-items: start; }
  .owner__portrait { position: sticky; top: 100px; align-self: start; }
}

/* R47 (06/18) — SEO page differentiation: wire in the bespoke "climb to #1"
   signature section (.sigrank) that replaces the generic 4-image process band.
   --svc was never defined globally; set it to brand azure (no new colors) and
   recolor the winning card's green shadow to azure to match. */
.sig--seo { --svc: #2E97DE; }
.sig--seo .sigrank__step--win { border-color: #2E97DE; box-shadow: 0 22px 44px rgba(46,151,222,0.24); }
.sig--seo .sig__eyebrow { color: #8FD0FF; }

/* R47b (06/23) — FIX the SEO climb: align-items:end + margin-top fought each
   other (dead void on top, collapsed staircase). Stretch = stepped tops with
   aligned bottoms = a real climb. Gentler offsets + tighter head gap + min-height. */
.sig--seo .sigrank__track { align-items: stretch; }
.sig--seo .sigrank__step { margin-top: 0; min-height: 168px; }
.sig--seo .sigrank__step:nth-child(1) { margin-top: 48px; }
.sig--seo .sigrank__step:nth-child(2) { margin-top: 32px; }
.sig--seo .sigrank__step:nth-child(3) { margin-top: 16px; }
.sig--seo .sigrank__step:nth-child(4) { margin-top: 0; }
.sig--seo .sig__head { margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }
.sig--seo .sigrank__rank { font-size: 1.5rem; margin-bottom: 0.55rem; }
@media (max-width: 820px) {
  .sig--seo .sigrank__step { min-height: 0; margin-top: 0 !important; }
}

/* R47c (06/23) — Cody found the descending ranks + uneven box sizes confusing.
   Renumbered to 01/02/03 -> #1 in HTML, and here make all four boxes equal:
   no staircase offsets, equal height via stretch. */
.sig--seo .sigrank__step,
.sig--seo .sigrank__step:nth-child(1),
.sig--seo .sigrank__step:nth-child(2),
.sig--seo .sigrank__step:nth-child(3),
.sig--seo .sigrank__step:nth-child(4) { margin-top: 0; }
.sig--seo .sigrank__track { align-items: stretch; }

/* R48 (06/23) — wire bespoke signature sections into Google Ads, Facebook Ads,
   and AI & Automation (replacing the generic 4-image process band). ALL azure
   (no new colors), ALL clean EQUAL boxes + even padding (no staircase). */
.sig--ads, .sig--ai { --svc: #2E97DE; }
.sig--ads .sig__eyebrow, .sig--ai .sig__eyebrow { color: #8FD0FF; }
/* AI: recolor sigflow's hardcoded purple win tint to azure */
.sig--ai .sigflow__card--win { border-color: #2E97DE; background: rgba(46,151,222,0.07); }

/* Google + Facebook: clean equal-box step grid */
.sigsteps { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(0.9rem,1.8vw,1.4rem); align-items: stretch; }
.sigstep { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(1.2rem,2vw,1.6rem); box-shadow: var(--sh-card); display: flex; flex-direction: column; }
.sigstep__num { font-family: var(--font-mono); font-weight: 800; font-size: 1.5rem; color: #2E97DE; line-height: 1; margin-bottom: 0.6rem; }
.sigstep h3 { font-size: 1.02rem; color: var(--ink); margin: 0 0 0.45rem; }
.sigstep p { font-size: var(--t-sm); color: var(--slate); line-height: 1.55; margin: 0; }
.sigstep--win { border: 2px solid #2E97DE; box-shadow: 0 22px 44px rgba(46,151,222,0.22); }
.sigstep--win .sigstep__num { background: #2E97DE; color: #fff; padding: 0.05rem 0.5rem; border-radius: var(--r-sm); display: inline-block; }
@media (max-width: 820px) { .sigsteps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .sigsteps { grid-template-columns: 1fr; } }

/* distinct header motifs (white, sit on the navy band) */
.sigbar { max-width: 520px; margin: 0 auto clamp(1.5rem,3vw,2.2rem); }
.sigbar--search { display: flex; align-items: center; gap: 0.6rem; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-pill); padding: 0.75rem 1.15rem; box-shadow: var(--sh-card); color: var(--ink-soft); font-size: 0.95rem; }
.sigbar--search svg { width: 18px; height: 18px; color: #2E97DE; flex-shrink: 0; }
.sigbar--feed { display: flex; align-items: center; gap: 0.7rem; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 0.75rem 0.95rem; box-shadow: var(--sh-card); }
.sigbar__dot { width: 34px; height: 34px; border-radius: 50%; background: var(--soft-blue); flex-shrink: 0; }
.sigbar__lines { flex: 1; }
.sigbar__l1 { height: 8px; width: 130px; max-width: 45%; background: var(--rule); border-radius: 4px; }
.sigbar__l2 { height: 7px; width: 84px; max-width: 30%; background: var(--rule-light); border-radius: 4px; margin-top: 5px; }
.sigbar__sp { margin-left: auto; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }

/* R48b (06/23) — signature-section fixes:
   1) h2 rendered BLACK on the navy band: `.sig h2{color:ink}` tied + won over
      `.section--band-blue h2`, and the existing `.section--band-blue .sig h2`
      used a descendant combinator while `.sig` sits ON the band element, so it
      never matched. Force white (keep the em azure).
   2) AI win card was nearly invisible (azure-rgba bg on navy) -> solid white + azure border.
   3) Google/Facebook win number was a full-width chip (flex stretch) -> just the number.
   4) Hover float on all signature cards. */
.section--band-blue.sig h2 { color: var(--white); }
.section--band-blue.sig h2 em { color: var(--svc); }
.sig--ai .sigflow__card--win { background: var(--white); border: 2px solid #2E97DE; }
.sigstep--win .sigstep__num { background: none; color: #2E97DE; padding: 0; border-radius: 0; }
.sigstep, .sigflow__card, .sigrank__step {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s var(--ease-out);
}
.sigstep:hover, .sigflow__card:hover, .sigrank__step:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 26px 52px rgba(0,0,0,0.26);
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .sigstep, .sigflow__card, .sigrank__step { transition: none; }
  .sigstep:hover, .sigflow__card:hover, .sigrank__step:hover { transform: none; }
}

/* R49 (Cody Loom 06/25) — top logo POP + bigger contact/book hero */
/* Logo bigger & more present (Stryker-style heavy branding) */
.nav-logo img { height: 82px; }
.site-header.scrolled .nav-logo img { height: 70px; }
@media (max-width: 980px) { .nav-logo img, .site-header.scrolled .nav-logo img { height: 46px; } }

/* Contact + Book hero felt small vs the other section heroes — give it real presence */
.contact-hero-simple { padding-top: clamp(8rem, 12vw, 11rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.contact-hero-simple h1 { font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.03em; }
.contact-hero-simple p { font-size: clamp(1.05rem, 1.8vw, 1.3rem); max-width: 62ch; margin-left: auto; margin-right: auto; }

/* R51 (Cody Loom 06/25) — homepage hero diagram: services orbiting a central
   "booked jobs" hub (slow rotation, hover-pop). Replaces the website wall. */
.bookorbit { position: relative; width: 100%; max-width: clamp(360px, 42vw, 540px); aspect-ratio: 1; margin: 0 auto; }
.bookorbit__path { position: absolute; inset: 12%; border-radius: 50%; border: 1.5px dashed rgba(19,50,82,0.16); }
.bookorbit__core { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: clamp(92px, 14vw, 130px); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(155deg, var(--navy), var(--navy-ink)); display: flex; align-items: center; justify-content: center; box-shadow: 0 22px 50px rgba(19,50,82,0.42); z-index: 4; }
.bookorbit__core > svg { width: 48%; height: 48%; color: #fff; }
.bookorbit__core-glow { position: absolute; inset: -16px; border-radius: 50%; background: radial-gradient(circle, rgba(91,179,240,0.45), transparent 68%); animation: borbit-pulse 3.2s var(--ease-in-out) infinite; z-index: -1; }
.bookorbit__ring { position: absolute; inset: 0; animation: borbit-spin 48s linear infinite; }
.bookorbit:hover .bookorbit__ring, .bookorbit:hover .bookorbit__node-in { animation-play-state: paused; }
.bookorbit__node { position: absolute; transform: translate(-50%,-50%); }
.bookorbit__node-in { animation: borbit-rev 48s linear infinite; }
.bookorbit__card { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; width: clamp(82px, 10.5vw, 104px); padding: 0.75rem 0.5rem; background: var(--white); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 12px 30px rgba(19,50,82,0.14); transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s var(--ease-out), border-color .3s; }
.bookorbit__node:hover .bookorbit__card { transform: scale(1.13); box-shadow: 0 24px 50px rgba(19,50,82,0.28); border-color: var(--navy-bright); }
.bookorbit__ic { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--soft-blue); color: var(--navy); }
.bookorbit__ic svg { width: 22px; height: 22px; }
.bookorbit__lbl { font-size: 0.8rem; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.15; }
@keyframes borbit-spin { to { transform: rotate(360deg); } }
@keyframes borbit-rev { to { transform: rotate(-360deg); } }
@keyframes borbit-pulse { 0%,100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.14); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bookorbit__ring, .bookorbit__node-in, .bookorbit__core-glow { animation: none; } }
@media (max-width: 980px) { .bookorbit { max-width: 440px; } }
@media (max-width: 620px) { .bookorbit { max-width: 330px; } .bookorbit__card { width: 72px; padding: 0.55rem 0.35rem; } .bookorbit__lbl { font-size: 0.68rem; } .bookorbit__ic { width: 36px; height: 36px; } }

/* R51b — kill the nav "jump" on scroll: keep the (bigger) logo + header padding
   constant between top and scrolled states (was shrinking 82->70 + padding). */
.site-header.scrolled { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.site-header.scrolled .nav-logo img { height: 82px; }



/* R53 (06/25) — low-key footer admin link (client editor at /admin/) */
.footer__seo .admin-link { color: rgba(255,255,255,0.66); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.footer__seo .admin-link:hover { color: var(--navy-bright, #5bb3f0); }

/* R54 (06/25) — nav must NOT widen on scroll. The .scrolled state set padding:0,
   which removed the side gutter and widened the shell. Keep padding = top state +
   drop the max-width transition so there is no width animation. */
.site-header, .site-header.scrolled { padding: 1.1rem var(--gutter) !important; }
.nav-shell { transition: background 380ms var(--ease-out), border-color 380ms var(--ease-out); }

/* R55 (06/25) — contact + book form section background white (Cody) */
.contact-section { background: var(--white); }

/* R56 (06/25) — nav logo a touch bigger (Cody); case-panel image hugs its column
   so there is far less empty navy to the left/right of it (container unchanged). */
.nav-logo img, .site-header.scrolled .nav-logo img { height: 90px; }
/* R58-fix (06/30) — gate the two-column rebalance to >760px ONLY. It was
   unconditional and (being later in the file) overrode the mobile stack at
   line 4093, crushing the body text into a sliver on phones. */
@media (min-width: 761px) {
  .case-panel__inner { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); }
  .case-panel__img { max-width: 320px; }
}

/* R57 (06/25) — case-study DETAIL pages were too sparse (big vertical gaps).
   Tighten the rhythm so each one reads concise. */
.cs-detail .section { padding-block: clamp(1.9rem, 3.2vw, 3rem); }
.cs-detail .page-hero--split { padding-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.cs-detail .csx-section-head { margin-bottom: clamp(1.1rem, 2.2vw, 1.8rem); }
.cs-detail .csx-quotebar { margin-top: clamp(1rem, 2vw, 1.6rem); }

/* R58 (06/25) — multi-paragraph bodies are ONE rich-text field (.cms-richtext);
   client can add/remove paragraphs and the section reflows fluidly. */
.cms-richtext > p:last-child { margin-bottom: 0; }


/* ===== R6x [fb-ads] Cody audit 07/13 ===== */
/* ===== R5: Facebook Ads page — feed bar filled with mock-post content (kills the skeleton/stuck-loading look) ===== */
.sigbar__dot--av { display:flex; align-items:center; justify-content:center; background:linear-gradient(155deg,var(--navy),var(--navy-ink)); color:#fff; font-size:0.72rem; font-weight:700; letter-spacing:0.02em; }
.sigbar--feed .sigbar__lines { min-width:0; }
.sigbar__name { display:block; font-size:0.86rem; font-weight:600; color:var(--ink); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sigbar__meta { display:block; font-size:0.72rem; color:var(--steel); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sigbar__cta { margin-left:auto; flex-shrink:0; background:var(--navy); color:#fff; font-size:0.74rem; font-weight:700; padding:0.42rem 0.9rem; border-radius:var(--r-pill); white-space:nowrap; }

/* R5: tighter "How we run it" band on Facebook Ads (Cody 22:50 — smaller footprint) */
.sig--ads.section { padding-block: var(--section-py-sm); }
.sig--ads .sig__head { margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem); }
.sig--ads .sigbar { margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); }


/* ===== R6x [google-ads] Cody audit 07/13 ===== */
/* ============================================================
   Cody audit 23:00–24:00 — Google Ads service page (surgical)
   ============================================================ */

/* 1) "How we run it" step cards: hover was a -8px bouncy pop with a
   heavy shadow — confusing. Subtle lift only (scoped to this page's
   .sig--ads so SEO/AI signature sections are untouched). */
.sig--ads .sigstep {
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.sig--ads .sigstep:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .sig--ads .sigstep { transition: none; }
  .sig--ads .sigstep:hover { transform: none; }
}

/* Hero SERP chips (Search / Maps & LSA / YouTube / PMax) are decorative,
   not clickable — remove the hover pop/pause; keep the gentle float. */
.gserp__chip:hover {
  transform: none;
  box-shadow: var(--sh-card);
  animation-play-state: running;
}

/* 2) Deliverables band read too white and empty — soft-blue tint so the
   white check chips sit on a surface, tighter vertical padding, and the
   head hugs the grid. Still a light band, so section rhythm holds.
   (Grid already stacks to 1 col under 720px via .deliverables-grid.) */
.gads-deliv { background: var(--soft-blue); padding-block: var(--section-py-sm); }
.gads-deliv .section-head { margin-bottom: 1.35rem; }
.gads-deliv .section-head p { margin-top: 0.85rem; }


/* ===== R6x [legal] Cody audit 07/13 ===== */
/* =====================================================================
   AUDIT 07/13 (Cody 10:42–10:56) — LEGAL PAGES (privacy/terms/refund):
   proper reading column. The global p{max-width:58ch} cap left the
   760px .legal-prose box only ~80% filled, so all three pages read as
   shoved LEFT with dead space on the right. One true ~72ch measure now,
   centered; paragraphs/lists fill it. Bullets restored on Terms §5
   (global reset had stripped ul indent + markers) and h2s get air below.
   Top clearance handled on the R13 .page-hero--legal line (went stale
   when R14 grew the header to ~107px).
   ===================================================================== */
.legal-prose { max-width: 72ch; }
.legal-prose p, .legal-prose li { max-width: none; }
.legal-prose h2 { margin-bottom: 0.65rem; }
.legal-prose ul { list-style: disc; padding-left: 1.35rem; margin: 0.85rem 0 1.1rem; }
.legal-prose li + li { margin-top: 0.45rem; }
.legal-prose li::marker { color: var(--navy); }


/* ===== R6x [fb-ads] Cody audit 07/13 ===== */
/* =====================================================================
   R45 (Cody audit 07/13, 24:00–25:24) — SEO page only:
   1) hero photo smaller / less visual weight
   2) intro section: smaller text block + more top/bottom air
   3) dedicated "Google vs AI Search" split section (.aivs)
   ===================================================================== */

/* --- 1) Hero photo: capped width, fixed 3:2, centered (was full column, up to 580px tall) --- */
.page-hero.page-hero--seo .hero__split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important; }
.page-hero--seo .hero__photo--wide {
  width: 100%;
  max-width: 430px;
  margin-left: auto;
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 0;
  align-self: center;
  box-shadow: var(--sh-card);
}
@media (max-width: 880px) {
  .page-hero.page-hero--seo .hero__split { grid-template-columns: 1fr !important; }
  .page-hero--seo .hero__photo--wide { margin: 0 auto; }
}

/* --- 2) Intro: reduce the oversized text block + let it breathe --- */
.section--seo-intro { padding-block: clamp(3.25rem, 6vw, 6rem); }
.section--seo-intro .service-detail__intro h2 { font-size: clamp(1.7rem, 2.6vw, 2.45rem); }
.section--seo-intro .service-detail__intro .cms-richtext p { font-size: 0.98rem; line-height: 1.65; max-width: 52ch; }

/* --- 3) Google vs AI Search — two EQUAL columns with CSS-built demos --- */
.aivs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
.aivs__col { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(1.25rem, 2.2vw, 1.75rem); box-shadow: var(--sh-card); }
.aivs__colhead { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.1rem; }
.aivs__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--navy-soft); color: var(--navy); display: flex; align-items: center; justify-content: center; }
.aivs__icon svg { width: 20px; height: 20px; }
.aivs__colhead h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; }
.aivs__colhead p { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--steel); }

/* demo panel — flex:1 keeps both cards' bullet rows bottom-aligned = equal boxes */
.aivs__demo { flex: 1; display: flex; flex-direction: column; gap: 0.7rem; background: var(--soft-blue); border: 1px solid var(--rule-light); border-radius: var(--r-md); padding: 1rem; }

/* mock SERP (Google column) — link/url/star colors mirror the shipped .gserp mock */
.aivs-serp__bar { display: flex; align-items: center; gap: 0.55rem; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-pill); padding: 0.55rem 0.9rem; box-shadow: var(--sh-rest); }
.aivs-serp__bar svg { flex: 0 0 auto; }
.aivs-serp__q { font-size: 0.85rem; color: var(--ink); }
.aivs-serp__hit { position: relative; background: var(--white); border: 1px solid rgba(46, 151, 222, 0.45); border-radius: var(--r-md); padding: 0.85rem 0.95rem; box-shadow: var(--sh-card); }
.aivs__you { position: absolute; top: -0.55rem; right: 0.75rem; z-index: 1; background: var(--navy); color: #fff; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: var(--r-pill); box-shadow: var(--sh-rest); }
.aivs-serp__line { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.3rem; }
.aivs-serp__fav { width: 18px; height: 18px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 0.6rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.aivs-serp__url { font-size: 0.74rem; color: #3a7d3a; }
.aivs-serp__title { display: block; font-size: 0.95rem; font-weight: 600; color: #1a56c4; letter-spacing: -0.01em; margin-bottom: 0.3rem; }
.aivs-serp__meta { display: block; font-size: 0.76rem; color: var(--slate); }
.aivs-serp__stars { color: #e8910b; letter-spacing: 1px; }
.aivs-serp__ghost { background: var(--white); border: 1px solid var(--rule-light); border-radius: var(--r-md); padding: 0.7rem 0.95rem; opacity: 0.65; }
.aivs-serp__ghost i { display: block; height: 8px; border-radius: 4px; background: var(--rule); }
.aivs-serp__ghost i + i { margin-top: 0.45rem; width: 62%; background: var(--rule-light); }

/* mock AI answer (AI column) */
.aivs-chat__q { display: flex; justify-content: flex-end; }
.aivs-chat__q span { background: var(--navy); color: #fff; font-size: 0.85rem; line-height: 1.45; padding: 0.6rem 0.9rem; border-radius: var(--r-md); border-bottom-right-radius: 4px; max-width: 85%; box-shadow: var(--sh-rest); }
.aivs-chat__a { position: relative; background: var(--white); border: 1px solid rgba(46, 151, 222, 0.45); border-radius: var(--r-md); border-top-left-radius: 4px; padding: 0.85rem 0.95rem; box-shadow: var(--sh-card); }
.aivs-chat__tag { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #2E97DE; }
.aivs-chat__tag svg { width: 12px; height: 12px; }
.aivs-chat__a p { margin: 0.4rem 0 0.6rem; font-size: 0.85rem; line-height: 1.55; color: var(--slate); }
.aivs-chat__a strong { color: var(--ink); }
.aivs-chat__cite { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 600; color: var(--navy); background: var(--navy-soft); padding: 0.22rem 0.6rem; border-radius: var(--r-pill); }

/* selling points + close row */
.aivs__points { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.aivs__points li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; line-height: 1.5; color: var(--slate); }
.aivs__points li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--navy); font-weight: 700; }
.aivs__close { margin-top: clamp(1.9rem, 3.2vw, 2.75rem); padding-top: 1.5rem; border-top: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; }
.aivs__close p { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }

@media (max-width: 880px) {
  .aivs__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .aivs__col { padding: 1.15rem; }
  .aivs__close { flex-direction: column; align-items: flex-start; }
}


/* ===== R6x [cs-index] Cody audit 07/13 ===== */
/* ===== Case Studies page — text-led hero (Cody audit: kill dead space, no site screenshots) ===== */
.page-hero--cases { text-align: left; padding-top: clamp(7.5rem, 11vw, 10rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-hero--cases .hero__copy { max-width: 760px; }
.page-hero--cases h1 { font-size: clamp(2.4rem, 4.6vw, 3.7rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
.page-hero--cases p { margin: 0; max-width: 56ch; }
.page-hero--cases .hero__ctas { justify-content: flex-start; margin-top: 1.75rem; }
@media (max-width: 760px) {
  .page-hero--cases { text-align: center; }
  .page-hero--cases p { margin-inline: auto; }
  .page-hero--cases .hero__ctas { justify-content: center; }
}

/* ===== Case Studies — by-the-numbers band (booked jobs + revenue, real clients only) ===== */
.cs-numbers { padding-top: clamp(1.75rem, 3.5vw, 3rem); }
.csnum-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: stretch; }
.csnum {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lift);
}
.csnum__big { font-size: clamp(2.3rem, 3.4vw, 3.2rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--navy); }
.csnum__what { font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.csnum__who { margin-top: auto; padding-top: 0.75rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-bright); }
@media (max-width: 1020px) { .csnum-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .csnum-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ===== Case Studies — alternating full-width result rows ===== */
.csrows { display: flex; flex-direction: column; gap: clamp(1.5rem, 2.6vw, 2.25rem); }
.csrow {
  display: grid; grid-template-columns: minmax(240px, 340px) 1fr; align-items: stretch;
  background: var(--white); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.25);
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.csrow:hover { transform: translateY(-4px); box-shadow: 0 26px 54px rgba(0, 0, 0, 0.32); }
.csrow__img { aspect-ratio: 3 / 4; overflow: hidden; background: var(--navy-ink); }
.csrow__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 600ms var(--ease-out); }
.csrow:hover .csrow__img img { transform: scale(1.03); }
.csrow:nth-child(even) { grid-template-columns: 1fr minmax(240px, 340px); }
.csrow:nth-child(even) .csrow__img { order: 2; }
.csrow:nth-child(even) .csrow__body { order: 1; }
.csrow__body {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.9rem;
  padding: clamp(1.6rem, 3vw, 2.75rem) clamp(1.5rem, 3.4vw, 3.25rem);
}
.csrow__client { display: inline-flex; align-items: center; min-height: 30px; }
.csrow__logo { height: 30px; width: auto; max-width: 160px; object-fit: contain; }
.csrow__client--text { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.csrow__title { font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin: 0; max-width: 24ch; }
.csrow__sum { font-size: 0.98rem; line-height: 1.55; margin: 0; max-width: 52ch; }
/* rows are white cards inside the navy band — undo the band's white-text swap */
.section--band-blue .csrow__title { color: var(--ink); }
.section--band-blue .csrow__sum { color: var(--ink-soft); }
.csrow__btn { margin-top: 0.4rem; }
.csrow:hover .csrow__btn { background: var(--navy-deep); box-shadow: 0 14px 30px rgba(35, 92, 135, 0.25); }
.csrow:hover .csrow__btn .arrow { transform: translateX(4px); }
@media (max-width: 760px) {
  .csrow, .csrow:nth-child(even) { grid-template-columns: 1fr; }
  .csrow:nth-child(even) .csrow__img { order: 0; }
  .csrow:nth-child(even) .csrow__body { order: 1; }
  .csrow__body { align-items: stretch; text-align: left; padding: 1.4rem 1.3rem 1.6rem; }
  .csrow__title, .csrow__sum { max-width: none; }
  .csrow__btn { justify-content: center; margin-top: 0.6rem; }
}

/* ===== Case Studies — full-width invite band under the rows ===== */
.cwinvite--wide {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  align-items: center; text-align: center;
  padding: clamp(1.9rem, 3.6vw, 3rem);
}
.cwinvite--wide p { max-width: 52ch; }


/* ===== R6x [services-index] Cody audit 07/13 ===== */
/* ===== Audit R5 — services index: 8-card equal grid (Google My Business added) ===== */
.services__grid.services__grid--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, 1.8vw, 1.6rem);
}
.services__grid--4 .service-card { padding: clamp(1.35rem, 1.9vw, 1.8rem); }
.services__grid--4 .service-card h3 { font-size: clamp(1.2rem, 1.5vw, 1.45rem); }
.services__grid--4 .service-card p { font-size: 0.95rem; }
@media (max-width: 1100px) {
  .services__grid.services__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .services__grid.services__grid--4 { grid-template-columns: 1fr; }
  .services__grid--4 .service-card h3 { font-size: 1.3rem; }
}

/* Audit R5 — services index: tighten white gap around the floating CTA card */
.cta-section--snug { padding-block: clamp(2.2rem, 4.5vw, 4rem); }

/* Audit R5 — content-production + custom-software: tighter offering sections (padding bloat) */
.section--offer-tight .section-head { margin-bottom: clamp(1.4rem, 2.2vw, 2rem); }
.section--offer-tight .include-card { padding: 1.4rem 1.35rem; gap: 0.7rem; }
@media (max-width: 760px) {
  .section--offer-tight .include-card { padding: 1.25rem 1.2rem; }
}


/* ===== R6x [homepage] Cody audit 07/13 ===== */
/* =====================================================================
   R60 (Cody audit 07/13) — homepage: hero scale/axis, #work spacing,
   case-panel de-overlap, founder-band balance
   ===================================================================== */

/* Hero: bigger + bolder headline, roomier rhythm, one clean left axis */
.hero--split { padding-top: clamp(7.5rem, 12vw, 11rem); padding-bottom: clamp(4.5rem, 8vw, 7.5rem); }
.hero--split .hero__chip { margin-bottom: 1.5rem; }
.hero--split .hero__copy h1 { font-size: clamp(2.7rem, 4.9vw, 4.1rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.032em; margin-bottom: 1.35rem; }
.hero--split .hero__sub { font-size: clamp(1.06rem, 1.4vw, 1.22rem); line-height: 1.55; max-width: 44ch; margin: 0 0 2.15rem; }
.hero--split .hero__ctas { justify-content: flex-start; align-items: center; gap: 0.9rem; }
.hero--split .hero__rating-inline { margin-top: 1.9rem; }
@media (max-width: 880px) {
  .hero--split .hero__copy h1 { font-size: clamp(2.4rem, 8.5vw, 3.4rem); }
  .hero--split .hero__sub { margin-left: auto; margin-right: auto; }
  .hero--split .hero__ctas { justify-content: center; }
  .hero--split .hero__rating-inline { justify-content: center; }
}

/* #work: header properly centered with breathing room above the panels */
.work .section-head--center { margin-inline: auto; text-align: center; margin-bottom: clamp(2.4rem, 4vw, 3.5rem); }
.work .section-head--center p { margin-top: 1rem; margin-inline: auto; }

/* R71 (07/17) — RESTORE the folder sticky slide-over (Cody liked it), but gentler
   so it doesn't cut over too much: bigger per-card offset + more scroll gap.
   Logo now sits ON TOP of the name and is a touch bigger. */
.case-panel__inner { padding: clamp(1.9rem, 4vw, 3rem); }
@media (min-width: 761px) {
  /* Original tight folder stack (Cody 07/18: the earlier animation flowed better).
     Small peek; the stack keeps scrolling down so the 3rd card (G3) fully reveals. */
  .case-panel { position: sticky; top: calc(var(--header-h, 76px) + 22px + (var(--stack-i) * 22px)); }
  .case-stack { gap: clamp(1.5rem, 3vw, 2.5rem); }
  .case-panel__img { max-width: 300px; }
}
.case-panel__brand { flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.case-panel__brand .case-panel__logo { height: 42px; max-width: 190px; padding: 7px 12px; margin: 0 0 0.15rem; }

/* Founder band: photo stretches to the copy height so side padding reads even */
@media (min-width: 881px) {
  .cody-band__row { align-items: stretch; }
  .cody-band__photo { height: 100%; object-fit: cover; }
  .cody-band__text { align-self: center; padding-block: 0.75rem; }
}


/* ===== R6x [cs-details] Cody audit 07/13 ===== */
/* ================================================================
   R58 (07/13) — Case-study detail pages rebuilt as sales pages
   (Cody 17:47: "one headline and one sentence is not a case study").
   Flow per page: hero → situation → what we built → what happened
   → quote → CTA. Components below are used only on those pages.
   ================================================================ */

/* Template fix: the detail pages referenced .section--alt but the class
   was never defined anywhere, so the alternating band never rendered.
   Scoped to .cs-detail so no other page changes. */
.cs-detail .section--alt { background: var(--white); }

/* Template spacing fix 1: front/top padding — the hero pushed the first
   fold too far down on detail pages (R57 only tightened the bottom). */
.cs-detail .page-hero--split { padding-top: clamp(5.25rem, 7.5vw, 6.75rem); }

/* Template spacing fix 2: the CTA band keeps its full-size card, but the
   section padding around it now matches the tightened R57 rhythm. */
.cs-detail .cta-section { padding-block: clamp(2.4rem, 4.5vw, 4rem); }

/* --- The situation: label column + story column --- */
.csx-split { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
.csx-split__head .csx-eyebrow { margin-bottom: 0.65rem; }
.csx-prose p { color: var(--slate); font-size: 1.04rem; line-height: 1.7; margin: 0 0 1rem; }
.csx-prose p:last-child { margin-bottom: 0; }
.csx-prose strong { color: var(--ink); font-weight: 700; }
.csx-prose--center { max-width: 62ch; margin-inline: auto; }

/* --- What we built: equal scope cards, sequential numbering --- */
.csx-lede { margin: 0.8rem auto 0; color: var(--slate); font-size: 1rem; line-height: 1.6; }
.csx-scope { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.2vw, 1.5rem); }
.csx-scope--2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }
.csx-scope--4 { grid-template-columns: repeat(2, 1fr); }
.csx-scope__card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(1.3rem, 2.4vw, 1.8rem); box-shadow: var(--sh-card); }
.csx-scope__num { display: block; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: var(--navy); margin-bottom: 0.55rem; }
.csx-scope__card h3 { font-size: var(--t-lg); color: var(--ink); letter-spacing: -0.01em; margin: 0 0 0.45rem; }
.csx-scope__card p { font-size: var(--t-sm); color: var(--slate); line-height: 1.6; margin: 0; }
.csx-scope__link { margin: clamp(1.4rem, 2.4vw, 2rem) 0 0; text-align: center; }

/* --- What happened: outcome tiles + supporting note --- */
.csx-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.2vw, 1.5rem); }
.csx-outcomes--4 { grid-template-columns: repeat(4, 1fr); }
.csx-outcome { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(1.4rem, 2.6vw, 1.9rem); box-shadow: var(--sh-card); }
.csx-outcome strong { display: block; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--navy); line-height: 1.08; }
.csx-outcome p { margin: 0.55rem 0 0; font-size: var(--t-sm); color: var(--slate); line-height: 1.55; }
.csx-outnote { max-width: 62ch; margin: clamp(1.2rem, 2.2vw, 1.7rem) auto 0; text-align: center; color: var(--slate); font-size: 1rem; line-height: 1.65; }

/* Proof screenshots keep their captions; the section now opens with a
   one-line context intro and the client quote closes it. */
.csx-proof-intro { max-width: 56ch; margin: -0.4rem auto clamp(1.4rem, 2.6vw, 2rem); text-align: center; color: var(--slate); font-size: 1rem; line-height: 1.6; }
.cs-detail .csx-proof + .csx-quotebar { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

@media (max-width: 1020px) {
  .csx-outcomes--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .csx-split { grid-template-columns: 1fr; gap: 1.2rem; }
  .csx-scope, .csx-scope--2, .csx-scope--4 { grid-template-columns: 1fr; }
  .csx-outcomes, .csx-outcomes--4 { grid-template-columns: 1fr; }
}


/* ===== R6x [contact-about] Cody audit 07/13 ===== */
/* =====================================================================
   R60 (Cody audit Loom 07/13, 11:01–11:29) — ABOUT hero rebalance.
   The copy column sat in a sea of white while the photo filled its whole
   track flush to the edge. Cap the photo and let it center in its column
   so both sides carry even air. Scoped to the About page only
   (.page-hero--about) — every other split hero is unchanged.
   Photo itself is a placeholder until Cody sends better shots. */
.page-hero--about .hero__split { align-items: center; }
.page-hero--about .hero__photo--wide {
  width: 100%;
  max-width: 540px;
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
  margin-inline: auto;
}
@media (max-width: 880px) {
  .page-hero--about .hero__photo--wide { max-width: 560px; }
}

/* =====================================================================
   R61 (Cody audit Loom 07/13, 14:20–14:42) — CONTACT: form reachable
   almost immediately + "dead simple and pretty". The hero keeps its copy
   (Cody likes it) but loses the oversized vertical padding — scoped to
   the new .contact-hero--tight modifier so book.html keeps its R49 size.
   Clean centered head over the card, extra air around the GHL embed,
   and a book-a-call row so the page still drives to the calendar. */
.contact-hero--tight { padding-top: clamp(6.5rem, 9vw, 8rem); padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.contact-section .section-head--center { margin-bottom: clamp(1.4rem, 2.5vw, 2rem); }
.contact-section .section-head--center h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }  /* form head stays below the hero h1 in hierarchy */
.contact-section .section-head--center p { margin-top: 0.85rem; }
.contact-form-simple--pretty {
  border-radius: var(--r-lg);
  border-color: rgba(35, 92, 135, 0.16);
  padding: clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.75rem);
  box-shadow: 0 28px 70px -34px rgba(8, 20, 36, 0.4);
}
.contact-book-row { text-align: center; margin-top: clamp(2.25rem, 4vw, 3rem); }
.contact-book-row p { color: var(--slate); margin-bottom: 1rem; }
@media (max-width: 760px) {
  .contact-form-simple--pretty { padding: 0.75rem 0.5rem 1rem; }
}

/* =====================================================================
   R62 (Cody audit Loom 07/13, 13:27–14:10) — ABOUT mid-page CTA sits
   tight under the operating principles (trust content -> frictionless
   booking). The principles section's own bottom padding provides the
   gap above; keep the normal air below before the reviews band. */
.cta-section--mid { padding-block: 0 clamp(3.5rem, 6vw, 5.5rem); }


/* ===== R6x [contact-about] Cody audit 07/13 ===== */
/* ================================================================
   Work project pages — Cody audit 26:01–27:09
   Tighter build section + hero clearance under the fixed header.
   Scoped to new classes only (page-hero--proj, section--build,
   proj-about--card) so no other page is affected.
   ================================================================ */
.page-hero--split.page-hero--proj { padding-top: clamp(10.5rem, 12.5vw, 12.25rem); }
@media (max-width: 720px) {
  .page-hero--split.page-hero--proj { padding-top: clamp(7.25rem, 17vw, 9.25rem); }
}

.section--build { padding-block: clamp(1.6rem, 3vw, 2.75rem); }
.proj-about--card {
  background: var(--soft-blue);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3.2vw, 2.75rem);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.proj-about--card .proj-about__aside h2 { margin-bottom: 0.9rem; }
.proj-about--card .proj-about__built { margin-bottom: 1.2rem; padding-top: 0.9rem; border-top-color: var(--rule); }
.proj-about--card .proj-about__body p { font-size: 1rem; line-height: 1.65; }
@media (max-width: 820px) {
  .proj-about--card { padding: 1.4rem 1.2rem; gap: 1.4rem; }
}
@media (max-width: 760px) {
  .proj-about--card .proj-about__aside .btn { width: 100%; justify-content: center; }
}

/* ===== R70 (re-audit 07/17) — folder cards rounded, 5-person team grid,
   book/contact straight-into-form ===== */

/* Case-panel cards: re-cropped inset past the baked corners; CSS rounds them
   so no black bleed shows at any size. */
.case-panel__img { border-radius: 18px; }

/* Team: five equal cards. Photos locked square via aspect-ratio (any swap stays
   even); flex-centered rows so a wrap never strands a lone left-aligned card. */
.team-five { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
/* widen just this grid so all five fit ONE row on desktop (no second line) */
.container--tight:has(.team-five) { max-width: 1300px; }
.team-five__card {
  flex: 1 1 224px; min-width: 205px; max-width: 300px;
  background: var(--white); border: 1px solid rgba(18,42,72,0.08);
  border-radius: 16px; padding: 1.4rem 1.4rem 1.5rem; text-align: center;
  box-shadow: 0 10px 26px rgba(8,20,36,0.06);
}
.team-five__photo { width: min(150px, 60%); aspect-ratio: 1 / 1; margin: 0 auto 1rem; border-radius: 50%; overflow: hidden; }
.team-five__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-five__card h3 { font-size: 1.12rem; margin: 0 0 0.15rem; color: var(--ink); }
.team-five__role { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--azure, #3e92cc); margin-bottom: 0.6rem; }
.team-five__card p { font-size: 0.92rem; line-height: 1.55; color: var(--slate); margin: 0; }
@media (max-width: 640px) { .team-five__card { flex-basis: 100%; max-width: 420px; } }

/* Book + contact: no big hero — first section clears the fixed header and the
   form/calendar is visible immediately. */
.contact-first { padding-top: clamp(8rem, 13vw, 10.5rem); }
.contact-first .section-head { margin-bottom: 1.4rem; }
.contact-first__h1 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.02em; }
.contact-first__h1--compact { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.contact-first__meta { display: inline-block; margin-left: 0.6rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; color: var(--slate); white-space: nowrap; }
@media (max-width: 640px) { .contact-first__meta { display: block; margin: 0.35rem 0 0; } }

/* ===== R72 (Cody re-audit 07/17) — nav sizing, header-height clearance,
   founder CTA padding, detail CTA font ===== */

/* --header-h was 80 but the header renders ~116 → sticky/scroll offsets tucked
   content under the nav. Set it realistic (calc-only; visual height set below). */
:root { --header-h: 112px; }

/* NAV: a touch bigger + spread out a little more; Book-a-Call nudged left.
   Desktop only — mobile keeps its compact 58px nav. */
@media (min-width: 761px) {
  .nav-shell { max-width: 1180px; height: 92px; }
  .site-header.scrolled .nav-shell { height: 84px; }
  .nav-menu a { font-size: 1.02rem; padding-left: 1.05rem; padding-right: 1.05rem; }
  .nav-actions { margin-right: clamp(0.4rem, 1.6vw, 1.4rem); }  /* moves the CTA left off the edge */
}

/* FOUNDER band: breathing room above the "Read Cody's story" CTA (was hugging copy) */
.cody-band__text > .btn { margin-top: clamp(1.5rem, 2.6vw, 2.2rem); }

/* DETAIL-page CTA card ("Want results like X?") reads too large — slightly smaller
   (shared .cta-card, so the home one comes down a touch too, which is fine) */
.cta-card h2 { font-size: clamp(1.9rem, 3.7vw, 2.95rem); line-height: 1.02; }

/* ===== R73 (07/17) — floating back button on book/contact ===== */
.back-fab { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--navy); background: var(--white); border: 1px solid var(--rule, #e1e8ef); border-radius: 999px; padding: 0.5rem 0.95rem 0.5rem 0.8rem; box-shadow: 0 6px 18px rgba(8,20,36,0.10); margin-bottom: 1.4rem; transition: transform .2s ease, box-shadow .2s ease, color .2s ease; }
.back-fab:hover { transform: translateX(-2px); box-shadow: 0 8px 22px rgba(8,20,36,0.16); color: var(--navy-ink); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ===== Agent-returned CSS (case-studies index, about, service pages, cs-detail) ===== */
/* ===== Case Studies index — split hero + 3-across card grid (agent B) ===== */
.page-hero--cases-split .cshero__split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.page-hero--cases-split .hero__copy { max-width: 640px; }
.cshero__visual { position: relative; z-index: 2; }
.cshero__photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--navy-ink); box-shadow: 0 30px 64px -24px rgba(14, 27, 44, 0.45); }
.cshero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
@media (max-width: 760px) {
  .page-hero--cases-split .cshero__split { grid-template-columns: 1fr; gap: 1.6rem; }
  .page-hero--cases-split .hero__copy { max-width: 100%; }
  .cshero__photo { aspect-ratio: 16 / 10; max-height: 340px; }
}
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.2vw, 1.9rem); align-items: stretch; }
.cs-card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22); transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out); }
.cs-card:hover { transform: translateY(-5px); box-shadow: 0 28px 56px rgba(0, 0, 0, 0.30); }
.cs-card__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy-ink); }
.cs-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 600ms var(--ease-out); }
.cs-card:hover .cs-card__img img { transform: scale(1.04); }
.cs-card__btn { display: flex; justify-content: center; margin: clamp(0.85rem, 1.5vw, 1.15rem); margin-top: auto; animation: csPulseBounce 2.6s var(--ease-out) infinite; will-change: transform; }
.cs-card__btn .arrow { transition: transform 380ms var(--ease-out); }
.cs-card:hover .cs-card__btn { animation: none; }
.cs-card:hover .cs-card__btn .arrow { transform: translateX(4px); }
@keyframes csPulseBounce { 0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(61, 124, 176, 0.45); } 50% { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(61, 124, 176, 0); } }
@media (max-width: 1020px) { .cs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .cs-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) {
  .cs-card__btn { animation: none; }
  .cs-card, .cs-card__img img, .cs-card__btn .arrow { transition: none; }
  .cs-card:hover { transform: none; }
  .cs-card:hover .cs-card__img img { transform: none; }
}
/* About — six operating principles: navy/azure accent bar (agent D) */
.principles--six .principle__bar { background: linear-gradient(90deg, var(--navy), var(--azure, #3e92cc)); }
.principles--six .principle:hover { border-color: rgba(35, 92, 135, 0.30); }
.principles--six .principle[data-delay="400"] .principle__bar { transition-delay: 850ms; }
.principles--six .principle[data-delay="500"] .principle__bar { transition-delay: 1000ms; }
/* Cody re-audit — Google Ads AI section + SEO hero + Web Design hero/heading (agent C) */
.gads-ai__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
.gads-ai__card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(1.35rem, 2.4vw, 1.9rem); box-shadow: var(--sh-card); }
.gads-ai__num { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 700; letter-spacing: 0.06em; color: var(--navy); margin-bottom: 0.8rem; }
.section--band-blue .gads-ai__card h3 { margin: 0 0 0.55rem; font-size: 1.18rem; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; }
.section--band-blue .gads-ai__card p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--slate); }
@media (max-width: 760px) { .gads-ai__grid { grid-template-columns: 1fr; } }
.page-hero.page-hero--seo .hero__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
.page-hero--seo .hero__photo--wide { max-width: none; margin-left: 0; width: 100%; height: 100%; min-height: clamp(380px, 38vw, 580px); aspect-ratio: auto; align-self: stretch; }
@media (max-width: 880px) { .page-hero.page-hero--seo .hero__split { grid-template-columns: 1fr !important; } .page-hero--seo .hero__photo--wide { min-height: clamp(300px, 75vw, 440px); margin: 0 auto; } }
.page-hero--webdesign .hero__split { align-items: center; }
.page-hero--webdesign .hero__photo--wide { width: 100%; max-width: 480px; height: auto; min-height: 0; aspect-ratio: 3 / 2; margin-inline: auto; }
@media (max-width: 880px) { .page-hero--webdesign .hero__photo--wide { max-width: 520px; } }
.section--webdesign-intro { padding-block: clamp(3.5rem, 6vw, 6rem); }
.section--webdesign-intro .service-detail__intro h2 { font-size: clamp(1.7rem, 2.6vw, 2.45rem); }
/* Case-study detail hero clearance — video was tucking under nav (agent A) */
.cs-detail .page-hero--split.cs-hero { padding-top: calc(var(--header-h) + clamp(2.75rem, 4.5vw, 3.75rem)); }
@media (max-width: 820px) { .cs-detail .page-hero--split.cs-hero { padding-top: calc(var(--header-h) + clamp(3.25rem, 10vw, 3.75rem)); } }

/* ===== R74 (07/17) — hero top-clearance. Nav grew to ~128px (bigger-nav change);
   heroes were still using ~115px pad → images tucked under the nav. Make
   --header-h accurate + responsive, and clear it on every page-hero variant. ===== */
:root { --header-h: 128px; }
@media (max-width: 760px) { :root { --header-h: 64px; } }
@media (min-width: 761px) {
  .page-hero--split, .page-hero--cases, .page-hero--about, .page-hero--legal {
    padding-top: calc(var(--header-h) + clamp(1.5rem, 3vw, 2.75rem));
  }
}

/* ===== R75 (07/17) — case-index: 'Watch X story' TEXT pulses + slow-bounces
   (not a button, per Cody); reviews section flipped off blue to a soft bg. ===== */
/* R77 (07/22): darker, more colorful, higher-contrast pulse — Cody wanted it to
   flash more and read as color, not a faint fade. Cycles navy -> azure. */
.cwcard__watch { animation: cwWatchPulse 1.9s ease-in-out infinite; }
.cwcard__watch .arrow { animation: cwWatchNudge 1.9s ease-in-out infinite; }
@keyframes cwWatchPulse {
  0%, 100% { opacity: 0.55; color: var(--navy-ink, #133252); transform: translateY(0); }
  50%      { opacity: 1;    color: var(--orange, #2E97DE);   transform: translateY(-2px); }
}
@keyframes cwWatchNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.cwcard:hover .cwcard__watch { animation: none; opacity: 1; color: var(--orange, #2E97DE); }
.cwcard:hover .cwcard__watch .arrow { animation: none; transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .cwcard__watch, .cwcard__watch .arrow { animation: none !important; } }

/* Reviews section is now .section--soft (light) — make the header read dark, not white */
.reviews-light .eyebrow { color: var(--navy); }
.reviews-light .section-head h2 { color: var(--ink); }
.reviews-light .section-head h2 em { color: var(--navy); -webkit-text-fill-color: var(--navy); }
.reviews-light .section-head p { color: var(--slate); }

/* ===== R76 (07/17) — About hero "one in-house team" diagram (replaced founder photo) ===== */
.abhero { position: relative; width: 100%; max-width: 450px; margin-inline: auto; aspect-ratio: 100/118; background: linear-gradient(150deg, var(--navy-ink) 0%, var(--navy) 62%, var(--navy-deep, #0c2740) 100%); border-radius: var(--r-lg); box-shadow: 0 30px 64px -24px rgba(14,27,44,0.5); color: #fff; overflow: hidden; }
.abhero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 47%, rgba(91,156,214,0.22), transparent 60%); pointer-events: none; }
.abhero__lines { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(150,193,226,0.55); }
.abhero__hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; text-align: center; width: 31%; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(160deg,#2c6ea0,#1b4d76); box-shadow: 0 12px 28px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(255,255,255,0.14); }
.abhero__hub-ey { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.82; }
.abhero__hub strong { font-size: clamp(0.72rem, 1.5vw, 0.92rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; margin-top: 3px; }
.abhero__node { position: absolute; transform: translate(-50%,-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 74px; text-align: center; }
.abhero__ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,0.97); color: var(--navy); box-shadow: 0 6px 15px rgba(0,0,0,0.3); }
.abhero__ic svg { width: 19px; height: 19px; }
.abhero__node > span:last-child { font-size: 0.63rem; font-weight: 700; line-height: 1.12; color: #eaf3fb; text-shadow: 0 1px 3px rgba(0,0,0,0.45); }
.abhero__frame { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); white-space: nowrap; }
@media (max-width: 880px) { .abhero { max-width: 380px; } .abhero__node { width: 64px; } .abhero__node > span:last-child { font-size: 0.58rem; } }
/* cs-detail editorial long-form rebuild (agent) */
.cs-detail main .section { padding-block: clamp(1.6rem, 3vw, 2.7rem); }
.cs-detail .csx-story { max-width: 720px; margin-inline: auto; }
.cs-detail .csx-story--wide { max-width: 920px; }
.cs-detail .csx-move__head { margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); }
.cs-detail .csx-move__head .csx-eyebrow { margin-bottom: 0.6rem; }
.cs-detail .csx-move__head .csx-h2 { text-align: left; }
.cs-detail .csx-story__body p { color: var(--slate); font-size: 1.08rem; line-height: 1.8; margin: 0 0 1.15rem; }
.cs-detail .csx-story__body p:last-child { margin-bottom: 0; }
.cs-detail .csx-story__body strong { color: var(--ink); font-weight: 700; }
.cs-detail .csx-inlist { list-style: none; margin: 1.4rem 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 0.7rem; }
.cs-detail .csx-inlist li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--navy); background: var(--navy-soft); border: 1px solid rgba(35, 92, 135, 0.16); border-radius: var(--r-pill); padding: 0.42rem 0.85rem; }
.cs-detail .csx-inlist li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); flex-shrink: 0; }
.cs-detail .csx-statstrip { display: flex; flex-wrap: wrap; margin: clamp(1.8rem, 3vw, 2.4rem) 0 0; border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; background: var(--white); box-shadow: var(--sh-card); }
.cs-detail .csx-statstrip .csx-stat { flex: 1 1 0; min-width: 150px; padding: 1.15rem 1.3rem; border-right: 1px solid var(--rule); }
.cs-detail .csx-statstrip .csx-stat:last-child { border-right: 0; }
.cs-detail .csx-statstrip strong { display: block; font-size: clamp(1.5rem, 2.8vw, 2.05rem); font-weight: 800; letter-spacing: -0.03em; color: var(--navy); line-height: 1.05; }
.cs-detail .csx-statstrip span { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--steel); line-height: 1.4; }
.cs-detail .csx-statstrip--solo { max-width: 320px; }
.cs-detail .csx-statstrip--solo .csx-stat { text-align: center; }
/* R77 (07/22): proof images were way too big (HealthShield Google review filled
   the column). Constrain to a small centered card so it reads as a screenshot. */
.cs-detail .csx-figure { margin: 0 auto clamp(1.4rem, 2.6vw, 2.1rem); max-width: 440px; }
.cs-detail .csx-figure:last-of-type { margin-bottom: 0; }
.cs-detail .csx-figure img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--rule); box-shadow: var(--sh-card); background: var(--white); }
.cs-detail .csx-figure figcaption { margin-top: 1rem; font-size: 0.98rem; line-height: 1.7; color: var(--slate); }
.cs-detail .csx-figure figcaption strong { color: var(--ink); font-weight: 700; }
.cs-detail .csx-proof-lead { font-size: 1.08rem; line-height: 1.8; color: var(--slate); margin: 0 0 clamp(1.6rem, 3vw, 2.2rem); }
.cs-detail .csx-close { margin: clamp(1.8rem, 3.2vw, 2.6rem) 0 0; padding-top: clamp(1.4rem, 2.4vw, 1.9rem); border-top: 1px solid var(--rule); font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.5; font-weight: 600; letter-spacing: -0.01em; color: var(--navy-ink); }
@media (max-width: 620px) { .cs-detail .csx-statstrip .csx-stat { flex: 1 1 100%; min-width: 0; border-right: 0; border-bottom: 1px solid var(--rule); } .cs-detail .csx-statstrip .csx-stat:last-child { border-bottom: 0; } }

/* ===================================================================
   R77 (07/22) — About "who runs Cavenaugh" team diagram.
   White design-system card, org/roster style (deliberately NOT the
   home-page radial service orbit). Roles, not disciplines.
   =================================================================== */
.abteam {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 22px;
  box-shadow: var(--sh-card, 0 24px 60px -32px rgba(14,27,44,0.32));
  padding: clamp(1.05rem, 2vw, 1.55rem);
}
.abteam__founder {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0.95rem;
  background: var(--soft-blue);
  border: 1px solid var(--rule-light);
  border-radius: 14px;
}
.abteam__spine {
  position: relative;
  margin-top: 0.85rem;
  padding-left: 1.45rem;
}
.abteam__spine::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: -0.55rem;
  bottom: 1.55rem;
  width: 2px;
  background: var(--rule);
}
.abteam__role {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.72rem 0;
  position: relative;
}
.abteam__role + .abteam__role { border-top: 1px solid var(--rule-light); }
.abteam__role::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 50%;
  width: 0.72rem;
  height: 2px;
  background: var(--rule);
}
.abteam__ic {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--navy-soft);
  color: var(--navy);
}
.abteam__ic svg { width: 20px; height: 20px; }
.abteam__ic--lead { background: var(--navy); color: #fff; }
.abteam__meta { display: flex; flex-direction: column; gap: 0.08rem; min-width: 0; text-align: left; }
.abteam__meta strong {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.2;
}
.abteam__meta span { font-size: 0.82rem; color: var(--steel); line-height: 1.35; }
.abteam__tag {
  margin-left: auto;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .abteam__tag { display: none; }
  .abteam__meta span { font-size: 0.78rem; }
  .abteam__ic { width: 36px; height: 36px; }
}

/* ===== R80 (Cody Slack 08/24): founder spacing + sticky offset + contact banner ===== */
/* About: barely any air between the "Meet the founder." head and the owner grid. */
.section-head--center + .owner { margin-top: clamp(3rem, 5vw, 4.25rem); }  /* 08/25: Cody wanted a touch more */
/* About: sticky portrait was pinned at 100px while the fixed header is 128px, so
   the image slid under the nav on scroll. Pin it below the real header height. */
@media (min-width: 821px) {
  .owner__portrait { top: calc(var(--header-h, 112px) + 20px); }
}
/* Contact: visible banner restored above the GHL form (h1 was sr-only). */
.contact-first .section-head h1 { font-size: clamp(2.1rem, 4.2vw, 3.1rem); line-height: 1.12; margin: 0.4rem 0 0.65rem; }
.contact-first .section-head { margin-bottom: clamp(1.6rem, 2.5vw, 2.2rem); }