/* ================================================================
   KUBIT'S — 2026 theme layer
   Floating pill nav (all pages) and the light homepage hero with the
   3D logo. Loaded after styles.css and content.css.
   Contrast notes: navy text on orange = 5.1:1; white on orange fails,
   so orange buttons carry navy text. Orange text on cream fails, so
   orange is used only as an accent underline, never as text.
   ================================================================ */

:root {
  --cream: #F7F3EC;
  --navy-text: #2C3E57;
  --navy-muted: #4A5A70;
  --orange-ink: #B84A00;   /* orange for text on light backgrounds: 5.2:1 on white */
  --teal-ink: #00796B;     /* 5.3:1 on white */
  --hairline: rgba(15, 43, 78, .14);
  --on-navy-muted: rgba(255, 255, 255, .8);
  --on-navy-line: rgba(255, 255, 255, .18);
}

/* Breadcrumbs used to sit hidden under the full-width nav; place them
   below the pill and let the page hero start right after them. */
.breadcrumbs { padding-top: calc(var(--nav-top) + var(--nav-h) + var(--space-2)); }
.breadcrumbs + .page-hero { padding-top: 0; }
/* ── Buttons used in the light hero ──────────────────── */
.btn-accent {
  background: var(--orange);
  color: var(--blue-d);
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(255, 111, 0, .28);
}
.btn-accent:hover { background: var(--amber); transform: translateY(-2px); }
.btn-accent:active { transform: translateY(0); background: var(--orange); }

.btn-outline-navy {
  background: transparent;
  color: var(--blue-d);
  border: 1.5px solid var(--blue-d);
  font-weight: 600;
}
.btn-outline-navy:hover { background: rgba(15, 43, 78, .06); transform: translateY(-2px); }
.btn-outline-navy:active { transform: translateY(0); background: rgba(15, 43, 78, .12); }

/* ── Light hero ──────────────────────────────────────── */
.hero-light {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--nav-top) + var(--nav-h) + var(--space-12)) 0 var(--space-16);
  background:
    radial-gradient(45% 55% at 80% 40%, rgba(24, 120, 241, .10), transparent 70%),
    radial-gradient(40% 50% at 68% 72%, rgba(255, 111, 0, .10), transparent 70%),
    var(--cream);
}
/* Twisting ribbon of fine strands (images/hero-waves.svg). The wrapper
   fades it out behind the text column so it only shows beside the logo. */
.hero-waves-wrap {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 46%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 46%, #000 70%);
}
/* lift the strings clear of the proof row */
.hero-light:has(.hero-proof) .hero-waves-wrap { bottom: 150px; }
.hero-waves {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  min-width: 100%;   /* very wide screens: fill edge to edge */
  height: 100%;
  max-width: none;
  object-fit: cover; /* only trims the empty margin above and below the ribbon */
  opacity: .8;
  transform: translate3d(-50%, 0, 0);
  animation: hero-drift 18s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(calc(-50% - 20px), 6px, 0); }
}

/* Override the old banner's 1440px container so the hero aligns with the nav */
.hero-light .container {
  max-width: var(--max-w);
  padding: 0 var(--space-8);
}
/* Type-led hero: headline across the width, proof facts on a ruled row. */
.hero-light .hero-content { max-width: 980px; }
.hero-light .hero-badge {
  color: var(--blue-d);
  background: #fff;
  border: 1px solid rgba(15, 43, 78, .12);
  backdrop-filter: none;
}
.hero-light .hero-badge-dot { background: var(--orange); }
.hero-light .hero-title {
  max-width: 15ch;
  margin-top: var(--space-6);
  color: var(--blue-d);
  font-size: var(--step-5);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}
/* brand orange deepened just enough for large text on cream: 3.4:1 */
.hero-light .hero-accent { color: #E05A00; }
.hero-light .hero-desc {
  max-width: 50ch;
  margin-top: var(--space-6);
  color: var(--navy-text);
  font-size: var(--step-1);
  line-height: 1.55;
}
.hero-light .hero-actions { margin-top: var(--space-8); }
.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}
.hero-proof li {
  padding: var(--space-4) var(--space-8) 0;
  border-left: 1px solid var(--hairline);
  color: var(--navy-muted);
  font-size: .9375rem;
  line-height: 1.5;
}
.hero-proof li:first-child { padding-left: 0; border-left: 0; }
.hero-light .btn { font-size: 1rem; padding: 14px 28px; }


/* ── System: section labels ──────────────────────────── */
/* Plain labels replace the pill tags. --navy-muted on white,
   cream and #F5F5F5 is ≥ 6.4:1. */
.section-tag,
.section-tag-blue,
.section-tag-orange {
  display: block;
  padding: 0;
  margin-bottom: var(--space-3);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--navy-muted);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── System: section header ──────────────────────────── */
/* Left-aligned everywhere; on desktop the intro sits beside the heading.
   FAQ is the one centred header. */
.section-header { text-align: left; margin-bottom: var(--space-12); }
.section-header p { margin-inline: 0; max-width: 52ch; }
.section-header:has(+ .faq-list) { text-align: center; }
.section-header:has(+ .faq-list) p { margin-inline: auto; }
@media (min-width: 1024px) {
  .section-header:not(:has(+ .faq-list)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-16);
    align-items: end;
  }
  .section-header > .section-tag { grid-column: 1 / -1; }
  .section-header > h2 { grid-column: 1; }
  .section-header:not(:has(+ .faq-list)) > p:not(.section-tag) { grid-column: 2; margin-top: 0; }
}

/* ── System: buttons ─────────────────────────────────── */
/* Primary = orange with navy text (5.1:1); secondary = navy outline;
   everything else is a text link. No lifts, no glow. */
.btn-primary,
.form-submit {
  background: var(--orange);
  color: var(--blue-d);
  font-weight: 700;
  box-shadow: none;
}
.btn-primary:hover,
.form-submit:hover { background: var(--amber); box-shadow: none; }
.btn-primary:active,
.form-submit:active { background: var(--orange); box-shadow: none; }
.btn-outline {
  color: var(--blue-d);
  border-color: var(--blue-d);
  font-weight: 600;
}
.btn-accent { box-shadow: none; }
.btn-white, .btn-ghost { box-shadow: none; }
.btn:hover, .btn:active,
.form-submit:hover, .form-submit:active { transform: none; }

/* ── System: one hover treatment ─────────────────────── */
/* Cards no longer lift or gain shadows; the border darkens instead. */
.srv-card:hover, .team-card:hover, .why-pillar:hover, .stat-card:hover,
.cta-audience-card:hover, .story-stat-row:hover, .cred-item:hover,
.founder-card:hover, .hybrid-card:hover, .why-card:hover,
.logo-strip-item:hover, .usecase-card:hover, .related-card:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(15, 43, 78, .4);
}
.team-card, .founder-card, .why-card, .stat-card, .story-stat-row { box-shadow: none; }

/* Mobile: < 768px */
@media (max-width: 767px) {
  .hero-light {
    min-height: 100svh;
    padding: calc(var(--nav-top) + var(--nav-h) + var(--space-6)) 0 var(--space-12);
  }
  .hero-light .container { padding: 0 var(--space-4); }
  .hero-light .hero-title { font-size: var(--step-4); margin-top: var(--space-4); }
  .hero-light .hero-desc { font-size: var(--step-0); }
  .hero-proof { margin-top: var(--space-12); }
  .hero-proof li,
  .hero-proof li:first-child { padding: var(--space-3) 0; border-left: 0; border-bottom: 1px solid var(--hairline); font-size: .875rem; }
  /* no room beside the text on a phone */
  .hero-waves-wrap { display: none; }
}

/* ── Contrast (WCAG AA) on inner pages ───────────────── */
.text-orange { color: var(--orange-ink); }
.text-teal { color: var(--teal-ink); }
.fc-role-blue,
.fc-tag-blue { color: var(--blue); }
.fc-role-orange,
.team-role { color: var(--orange-ink); }
.fc-loc { color: var(--navy-muted); }
.story-stat-val { background: none; color: var(--orange-ink); -webkit-text-fill-color: currentColor; font-weight: 600; }

/* ── Inner-page hero ─────────────────────────────────── */
/* Same language as the homepage hero: cream, navy type and a short,
   faded run of the ribbon on the right. Replaces the photo/gradient banners. */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--nav-top) + var(--nav-h) + var(--space-8));
  padding-bottom: var(--space-16);
  background:
    radial-gradient(35% 45% at 85% 55%, rgba(24, 120, 241, .08), transparent 70%),
    radial-gradient(35% 45% at 72% 80%, rgba(255, 111, 0, .08), transparent 70%),
    var(--cream);
}
.breadcrumbs { position: relative; z-index: 1; }
/* Full-bleed cream behind the breadcrumbs so they join the hero */
.breadcrumbs:has(+ .page-hero) {
  background: var(--cream);
  box-shadow: 0 0 0 100vmax var(--cream);
  clip-path: inset(0 -100vmax);
}
.breadcrumbs + .page-hero { padding-top: var(--space-6); }
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 0 50%;
  z-index: -1;
  background: url("/images/hero-waves.svg") right center / auto 100% no-repeat;
  opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  pointer-events: none;
}
.page-hero .container {
  max-width: var(--max-w);
  padding: 0 var(--space-8);
}
.page-hero .container > div[style] { padding-top: 0 !important; }
.page-hero-banner,
.svc-hero-banner {
  background: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
.page-hero-banner::before { content: none; }
.page-hero-content { max-width: 720px; }
.page-hero-eyebrow,
.svc-hero-banner .page-hero-eyebrow {
  color: var(--navy-muted);
  font-size: .8125rem;
  letter-spacing: .12em;
}
.page-hero-title {
  color: var(--blue-d);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
}
.page-hero-desc { color: var(--navy-text); font-size: var(--step-0); line-height: 1.65; }

/* Hero buttons were built for a dark banner: map them to the system styles */
.page-hero .btn-white {
  background: var(--orange);
  color: var(--blue-d);
  font-weight: 700;
}
.page-hero .btn-white:hover { background: var(--amber); }
.page-hero .btn-ghost {
  background: transparent;
  color: var(--blue-d);
  border: 1.5px solid var(--blue-d);
  font-weight: 600;
}
.page-hero .btn-ghost:hover { background: rgba(15, 43, 78, .06); transform: none; }
.page-hero .btn-white:active,
.page-hero .btn-ghost:active { transform: none; }
.page-hero .hero-badge-item {
  background: #fff;
  border-color: rgba(15, 43, 78, .12);
  color: var(--blue-d);
}
.page-hero .hero-badge-item a { color: inherit; }

@media (max-width: 1023px) {
  .page-hero { padding-bottom: var(--space-12); }
  .page-hero::before { inset: 0 0 0 20%; opacity: .35; }
}
@media (max-width: 767px) {
  .page-hero { padding-bottom: var(--space-8); }
  .page-hero .container { padding: 0 var(--space-4); }
  .page-hero::before { inset: 0; opacity: .25; background-position: 70% bottom; background-size: auto 60%; }
}

/* ── /products status panel and small-type fixes ─────── */
/* styles.css declares the base 2-column .tech-grid after its mobile override,
   so the panel never stacked and overflowed narrow screens. */
@media (max-width: 1023px) {
  .tech-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}
.arch-title { font-size: .875rem; color: rgba(255, 255, 255, .8); }
.ms-item { font-size: .875rem; }
.ms-tech { font-size: .875rem; color: rgba(255, 255, 255, .7); }
.arch-legend { font-size: .875rem; color: rgba(255, 255, 255, .75); }
.iphone-screen-labels .screen-label { font-size: .875rem; }
@media (max-width: 767px) {
  .hero-badge { font-size: .875rem; }
}
/* Inline links in badges and stat rows: keep the look, widen the tap area */
.hero-badge-item a,
.story-stat-desc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0;
}

/* ================================================================
   Inner pages on the homepage system
   Same surfaces (white and cream), same heading scale, one process
   style, one icon style, one navy closing band. No gradients, no
   purple or teal.
   ================================================================ */

/* ── Surfaces: cream replaces grey; cards are white with a hairline ── */
.section-alt { background: var(--cream); }
.info-card, .srv-card, .work-card, .related-card, .cred-item, .value-item,
.tech-item, .team-card, .story-stat-row, .usecase-card {
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: none;
}
.tech-item:hover, .value-item:hover, .info-card:hover, .work-card:hover {
  background: #fff;
  border-color: rgba(15, 43, 78, .4);
  transform: none;
  box-shadow: none;
}

/* ── Headings: same scale as the homepage ─────────────── */
.section-header h2 {
  font-size: var(--step-4);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.08;
  text-wrap: balance;
}
.srv-card h3 { font-size: var(--step-1); letter-spacing: -.01em; }

/* ── Links inside cards: navy text, orange arrow or underline ── */
.svc-link, .text-link { color: var(--blue-d); text-decoration-color: var(--orange); }
.svc-link svg { color: var(--orange-ink); }
.svc-link:hover, .text-link:hover { color: var(--blue-d); text-decoration-thickness: 2px; }
/* A link inside running text stays inline so lines keep an even rhythm */
p:not(.work-links):not(.center-link) > .text-link { display: inline; min-height: 0; }
p:not(.work-links):not(.center-link) > .text-link + .text-link { margin-left: 0; }
.container-narrow > h2 { font-size: var(--step-3); letter-spacing: -.02em; line-height: 1.15; margin-bottom: var(--space-4); }
.container-narrow > p { color: var(--navy-text); font-size: var(--step-0); line-height: 1.7; max-width: 65ch; }
.container-narrow > p + p { margin-top: var(--space-4); }
.srv-badge { align-self: flex-start; }

/* ── Icons: orange stroke on cream, one style everywhere ── */
.story-stat-icon, .tech-item-icon, .value-icon, .cred-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--cream) !important;   /* overrides inline tints */
  border: 1px solid var(--hairline);
  color: var(--orange-ink);
}
.story-stat-icon svg, .tech-item-icon svg, .value-icon svg, .cred-icon svg,
.story-stat-icon svg [stroke], .tech-item-icon svg [stroke],
.value-icon svg [stroke], .cred-icon svg [stroke] { stroke: var(--orange-ink); }

/* ── Process: the homepage numerals, on every page ─────── */
.proc-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}
.proc-steps::before { display: none; }
.proc-step { align-items: flex-start; text-align: left; max-width: none; }
.proc-step:hover { transform: none; filter: none; }
.proc-num {
  width: auto;
  height: auto;
  margin-bottom: var(--space-3);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--orange-ink);
  justify-content: flex-start;
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.proc-step:hover .proc-num { transform: none; box-shadow: none; }
.proc-step .proc-title { font-size: var(--step-0); color: var(--blue-d); font-weight: 600; margin-bottom: var(--space-2); }
.proc-step p { max-width: 30ch; margin: 0; padding: 0; color: var(--navy-text); font-size: .95rem; line-height: 1.6; }

/* ── Figures: left-aligned, hairline above, no boxes ───── */
.market-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.prob-stats { gap: var(--space-8); }
.market-card, .prob-stat {
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  padding: var(--space-6) 0 0;
  text-align: left;
}
.market-card:hover, .prob-stat:hover { transform: none; box-shadow: none; border-color: var(--hairline); }
.market-card .market-val, .prob-stat .prob-stat-num {
  color: var(--blue-d);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: var(--space-2);
}
.market-label, .prob-stat .stat-label { color: var(--navy-text); font-size: .95rem; }

/* Stat list on /about and /products: a ruled list, not stacked boxes */
.story-stats { gap: 0; }
.story-stat-row {
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: none;
  padding: var(--space-6) 0;
}
.story-stat-row:last-child { border-bottom: 1px solid var(--hairline); }
.story-stat-row:hover { background: none; transform: none; border-color: var(--hairline); }
.story-stat-val { font-size: var(--step-2); letter-spacing: -.02em; line-height: 1.15; }
.story-stat-desc { color: var(--navy-text); font-size: .9375rem; }

/* Running text (story blocks, privacy, terms): body size, navy, one measure */
.story-text { max-width: 68ch; }
.story-text p, .story-text li { font-size: var(--step-0); color: var(--navy-text); line-height: 1.7; }
.story-text ul { line-height: 1.7 !important; }

/* ── Founder: portrait beside the text ─────────────────── */
.founder-grid { grid-template-columns: minmax(0, 1fr); }
.founder-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr;
  border: 1px solid var(--hairline);
}
.fc-photo { grid-row: 1 / span 2; height: 100%; min-height: 440px; }
.fc-body { padding: var(--space-12) var(--space-12) 0; }
.fc-foot { align-self: start; background: none; border-top: 0; padding: 0 var(--space-12) var(--space-12); }
.fc-bar, .fc-bar-blue { background: var(--orange); }
.fc-role-blue { color: var(--orange-ink); }
.fc-name { font-size: var(--step-3); color: var(--blue-d); }
.fc-bio { color: var(--navy-text); font-size: .9875rem; line-height: 1.7; }
.fc-tags { display: block; line-height: 1.9; }
.fc-tag, .fc-tag-blue {
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--navy-muted);
  font-weight: 500;
  font-size: .875rem;
  display: inline;
}
.fc-tag + .fc-tag::before { content: "·"; margin: 0 var(--space-2); color: var(--orange-ink); }
.fc-quote, .fc-quote-blue { border-color: var(--orange); color: var(--navy-text); font-weight: 400; }

/* Check marks and notes: orange on cream, not blue tints */
.check-list li { color: var(--navy-text); }
.check-list li::before {
  background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B84A00' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.note-box { background: #fff; border: 1px solid var(--hairline); border-left: 3px solid var(--orange); color: var(--navy-text); }

/* ── Closing band: solid brand orange, dark ink ──────── */
/* White text fails on #FF6F00 (2.8:1); the dark ink passes (5.1:1). */
.cta-banner { background: var(--orange); padding: var(--space-16) 0; }
.cta-inner h2 { color: var(--blue-d); }
.cta-banner::before { content: none; }
.cta-inner { max-width: none; text-align: left; }
.cta-inner h2 {
  font-size: var(--step-4);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.08;
  max-width: 18ch;
  text-wrap: balance;
}
.cta-inner p { color: var(--blue-d); max-width: 52ch; font-size: var(--step-0); }
.cta-actions { flex-direction: row; justify-content: flex-start; align-items: center; gap: var(--space-6); }
.cta-actions .btn { width: auto; }
.cta-banner .btn-white { background: #fff; color: var(--blue-d); font-weight: 700; }
.cta-banner .btn-white:hover { background: var(--cream); }
.cta-banner .btn-white:active { background: #fff; transform: translateY(1px); }
/* the orange focus ring vanishes on the orange band: use the dark ink */
.cta-banner a:focus-visible, .cta-banner .btn:focus-visible { outline-color: var(--blue-d); }
.cta-banner .btn-ghost {
  background: none;
  border: 0;
  padding-inline: 0;
  min-width: 0;
  color: var(--blue-d);
  text-decoration: underline;
  text-decoration-color: var(--blue-d);
  text-underline-offset: 4px;
}
.cta-banner .btn-ghost:hover { background: none; text-decoration-thickness: 2px; }
/* /products audience cards: plain white cards; one primary, two outline */
.cta-audience-card {
  background: #fff !important;
  border: 1px solid transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cta-audience-card:hover { animation: none; border-color: var(--orange) !important; }
.cta-audience-card .btn-white { background: transparent; color: var(--blue-d); border: 1.5px solid var(--blue-d); }
.cta-audience-card .btn-white:hover { background: var(--cream); }
.cta-grid > .cta-audience-card:first-child .btn-white { background: var(--orange); border-color: var(--orange); }
.cta-grid > .cta-audience-card:first-child .btn-white:hover { background: var(--amber); border-color: var(--amber); }

/* ── Layout fixes ─────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* An odd last card spans the row instead of sitting alone */
  .work-grid > :last-child:nth-child(odd),
  .related-grid > :last-child:nth-child(odd),
  .info-grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .team-faces { max-width: none; }
  .proc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
}
@media (max-width: 1023px) {
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founder-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .fc-photo { grid-row: auto; height: 420px; min-height: 0; }
  .fc-body { padding: var(--space-8) var(--space-8) 0; }
  .fc-foot { padding: 0 var(--space-8) var(--space-8); }
}
@media (max-width: 767px) {
  .proc-steps {
    flex-direction: initial;
    align-items: stretch;
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0;
  }
  .proc-step {
    max-width: none;
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: var(--space-4);
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--hairline);
  }
  .proc-step .proc-num { grid-row: 1 / span 2; font-size: var(--step-3); }
  .proc-step p { max-width: none; }
  .prob-stats { gap: var(--space-6); }
  .cta-banner { padding: var(--space-12) 0; }
  .cta-actions { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .cta-actions .btn { width: 100%; max-width: none; justify-content: center; }
  .fc-photo { height: 360px; }
  .fc-body { padding: var(--space-6) var(--space-6) 0; }
  .fc-foot { padding: 0 var(--space-6) var(--space-6); }
  /* Same full-width buttons in every hero and band */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; font-size: .9375rem; padding: 14px 24px; }
  /* Home hero pill: sentence case fits one line at 375px */
  .hero-light .hero-badge { text-transform: none; letter-spacing: .01em; padding: 6px 14px; }
}
@media (max-width: 479px) {
  .market-grid { grid-template-columns: 1fr; }
}

/* ── Services page: specialist card across the top, then 2 × 2 ── */
@media (min-width: 768px) {
  .services-grid-five { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .services-grid-five > .srv-card,
  .services-grid-five > .srv-card:nth-last-child(2),
  .services-grid-five > .srv-card:last-child { grid-column: auto; }
  .services-grid-five > .srv-card:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-12);
    background: var(--cream);
  }
  .services-grid-five > .srv-card:first-child > .srv-badge,
  .services-grid-five > .srv-card:first-child > h3 { grid-column: 1; }
  .services-grid-five > .srv-card:first-child > .srv-badge { justify-self: start; }
  .services-grid-five > .srv-card:first-child > h3 { grid-row: 2; font-size: var(--step-2); }
  .services-grid-five > .srv-card:first-child > p:not(.srv-badge),
  .services-grid-five > .srv-card:first-child > .svc-link { grid-column: 2; }
  .services-grid-five > .srv-card:first-child > p:not(.srv-badge) { grid-row: 1 / span 2; margin: 0; }
  .services-grid-five > .srv-card:first-child > .svc-link { grid-row: 3; }
  /* Sixth card closes the 2 × 2 grid as a full-width row */
  .services-grid-five > .srv-card:nth-child(6):last-child { grid-column: 1 / -1; }
}

/* Hero below desktop: proof facts as a ruled list; buttons stay side by side from 768px */
@media (max-width: 1023px) {
  .hero-proof { grid-template-columns: 1fr; }
  .hero-proof li,
  .hero-proof li:first-child { padding: var(--space-3) 0; border-left: 0; border-bottom: 1px solid var(--hairline); }
}
@media (min-width: 768px) {
  .hero-light .hero-actions { flex-direction: row; align-items: center; }
  .hero-light .hero-actions .btn { width: auto; }
}