/* Consent Leads - conversion-first design system v4 (2026-05-19 black-and-white)
   White background, near-black ink, monochrome (black accent, no colour).
   One font: Inter.
   Premium feel via: generous spacing, confident type, motion, subtle textures. */

:root {
  --bg: #FFFFFF;
  --bg-soft: #F7F7F5;          /* neutral grey-white */
  --bg-tint: #F4F4F2;          /* neutral light grey for hero accents */
  --bg-dark: #0A0A09;          /* slightly deeper for richer contrast */
  --ink: #0A0A09;
  --ink-2: #3F3F3D;
  --ink-3: #6B6B68;
  --ink-4: #9A9A95;            /* placeholder grey */
  --line: rgba(10, 10, 9, 0.07);
  --line-strong: rgba(10, 10, 9, 0.14);
  --accent: #0A0A09;           /* black - monochrome scheme */
  --accent-hover: #333330;     /* dark-grey lift for hover on black buttons */
  --accent-soft: #F0F0EE;      /* light grey for pills / eyebrow backgrounds */
  --accent-tint: rgba(10, 10, 9, 0.05);
  --green: #0A0A09;            /* alias kept so existing classes resolve - now black */
  --shadow-xs: 0 1px 2px rgba(10, 10, 9, 0.04);
  --shadow-sm: 0 2px 6px rgba(10, 10, 9, 0.05);
  --shadow-md: 0 6px 20px rgba(10, 10, 9, 0.07);
  --shadow-lg: 0 20px 60px rgba(10, 10, 9, 0.10);
  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 12px 32px rgba(10, 10, 9, 0.10);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'ss01', 'cv11', 'cv02', 'cv03', 'cv04';  /* nicer 'a', 'g', '1' etc. */
  font-variant-ligatures: common-ligatures contextual;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease-out); }
img { max-width: 100%; display: block; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 960px) {
  .container, .container-narrow { padding: 0 24px; }
}
section { padding: 120px 0; position: relative; }
@media (max-width: 700px) {
  .container, .narrow { padding: 0 20px; }
  section { padding: 72px 0; }
}

/* ---------- Motion ---------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.reveal {
  animation: fade-up 0.7s var(--ease-out) both;
}
.reveal-1 { animation-delay: 0.05s; }
.reveal-2 { animation-delay: 0.15s; }
.reveal-3 { animation-delay: 0.25s; }
.reveal-4 { animation-delay: 0.35s; }
.reveal-5 { animation-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-1, .reveal-2, .reveal-3, .reveal-4, .reveal-5 {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- Background textures ---------- */
.bg-dotted {
  background-image: radial-gradient(circle at 1px 1px, rgba(10, 10, 9, 0.08) 1px, transparent 0);
  background-size: 24px 24px;
}
.bg-noise {
  position: relative;
}
.bg-noise::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
}

/* Nav */
.nav {
  padding: 16px 0;
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  z-index: 100;
  border-bottom: 1px solid var(--line);
  transition: padding 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.028em;
  color: var(--ink);
  transition: opacity 0.2s var(--ease-out);
}
.logo:hover { opacity: 0.75; }
.logo .mark { color: var(--accent); }
.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  background: var(--ink);
  color: var(--bg) !important;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.15s ease;
}
.nav-cta:hover { background: var(--accent); }

/* Products dropdown */
.nav-item { position: relative; }
.nav-item .nav-toggle {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.nav-item .nav-toggle:hover { color: var(--ink); }
.nav-item .nav-toggle .caret {
  font-size: 10px;
  transition: transform 0.15s ease;
}
.nav-item:hover .nav-toggle .caret,
.nav-item:focus-within .nav-toggle .caret { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  min-width: 360px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  z-index: 200;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  transition: background 0.1s ease;
}
.nav-dropdown a:hover { background: var(--bg-soft); color: var(--ink); }
.nav-dropdown a strong {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.nav-dropdown a strong .price {
  color: var(--accent);
  font-weight: 600;
  margin-left: 6px;
}
.nav-dropdown a span {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.4;
}
.nav-dropdown .divider {
  height: 1px;
  background: var(--line);
  margin: 6px 4px;
}
@media (max-width: 900px) {
  .nav-links { gap: 18px; }
  .nav-links a:not(.nav-cta):not(.nav-mobile-keep) { display: none; }
  .nav-item { display: none; }
}

/* Hero */
.hero {
  padding: 40px 0 72px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.hero::before {
  /* Subtle dotted texture top-right, fades out toward centre. Reads as "designed". */
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  background-image: radial-gradient(circle at 1px 1px, rgba(10, 10, 9, 0.06) 1px, transparent 0);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 100% 0%, black 30%, transparent 70%);
          mask-image: radial-gradient(ellipse 80% 80% at 100% 0%, black 30%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  /* Very soft grey tint behind the right-hand tier cards. */
  content: '';
  position: absolute;
  top: -10%; right: -10%;
  width: 60%; height: 80%;
  background: radial-gradient(ellipse at center, var(--accent-tint) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 700px) {
  .hero { padding: 32px 0 56px; }
}
.hero-text { animation: fade-up 0.8s var(--ease-out) both; }
.hero-tiers { animation: fade-up 0.8s var(--ease-out) 0.15s both; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  border: 1px solid rgba(10, 10, 9, 0.12);
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(10, 10, 9, 0.18);
  animation: fade-in 1.2s var(--ease-out) both;
}
.hero h1 {
  font-size: clamp(42px, 5.8vw, 72px);
  font-weight: 700;
  letter-spacing: -0.034em;
  line-height: 1.02;
  margin-bottom: 26px;
  color: var(--ink);
}
.hero h1 .accent { color: var(--accent); }
.hero .lede {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--ink-2);
  max-width: 58ch;
  margin-bottom: 36px;
  line-height: 1.55;
}

/* Hero tier preview column */
.hero-tiers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-tier {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out),
              box-shadow 0.25s var(--ease-out);
  text-decoration: none;
  color: inherit;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-tier:hover {
  border-color: rgba(10, 10, 9, 0.3);
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
}
.hero-tier.featured {
  border: 2px solid var(--accent);
  background: linear-gradient(135deg, #FFFFFF 0%, #F4F4F2 100%);
  box-shadow: 0 8px 24px rgba(10, 10, 9, 0.10);
}
.hero-tier.featured:hover {
  box-shadow: 0 14px 36px rgba(10, 10, 9, 0.18);
  transform: translateX(6px);
}
.ht-left { display: flex; flex-direction: column; gap: 4px; }
.ht-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ht-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.ht-desc {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.ht-price {
  text-align: right;
  flex-shrink: 0;
}
.ht-price .big {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
  display: block;
}
.ht-price .unit {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 4px;
  display: block;
}
.hero-tier .arrow {
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  transition: transform 0.15s ease;
}
.hero-tier:hover .arrow { transform: translateX(3px); }
@media (max-width: 480px) {
  .hero-tier {
    grid-template-columns: 1fr auto;
    gap: 14px;
  }
  .hero-tier .arrow { display: none; }
}

/* Buttons */
.btn-primary {
  background: var(--accent);
  color: white;
  padding: 16px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s var(--ease-out), transform 0.15s var(--ease-out),
              box-shadow 0.2s var(--ease-out);
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(10, 10, 9, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
  position: relative;
  letter-spacing: -0.005em;
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(10, 10, 9, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  color: var(--ink);
  padding: 16px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  border: 1.5px solid var(--line-strong);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out),
              transform 0.15s var(--ease-out);
  letter-spacing: -0.005em;
}
.btn-secondary:hover {
  border-color: var(--ink);
  background: var(--bg-soft);
  transform: translateY(-2px);
}
.btn-secondary:active { transform: translateY(0); }
.btn-dark {
  background: var(--ink);
  color: var(--bg);
  padding: 16px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
}
.btn-dark:hover { background: var(--accent); }
.cta-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.cta-meta {
  margin-top: 16px;
  font-size: 14px;
  color: var(--ink-3);
}
.cta-meta strong { color: var(--ink); font-weight: 600; }

/* Trust bar / stats */
.trust-bar {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 44px 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 700px) { .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
.trust-item .num {
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.028em;
  line-height: 1;
  margin-bottom: 8px;
}
.trust-item .label {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
}

/* Section heads */
.section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  position: relative;
  padding-left: 22px;
}
.section-eyebrow::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 14px; height: 1.5px;
  background: var(--accent);
  transform: translateY(-50%);
}
.section-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.08;
  margin-bottom: 18px;
  max-width: 28ch;
  color: var(--ink);
}
.section-title .accent { color: var(--accent); }
.section-lede {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 64ch;
  margin-bottom: 56px;
  line-height: 1.6;
}
.section-head-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 40px;
}
.section-head-row .section-title,
.section-head-row .section-lede { margin-bottom: 0; }
.section-head-row .section-lede { max-width: none; }
@media (max-width: 800px) {
  .section-head-row { grid-template-columns: 1fr; gap: 16px; }
}

/* Service cards */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.service {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out),
              box-shadow 0.25s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.service::before {
  /* Subtle accent line at top, only visible on hover. */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.service:hover {
  border-color: rgba(10, 10, 9, 0.25);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}
.service:hover::before { transform: scaleX(1); }
.service-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.service h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.service p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
  flex-grow: 1;
}
.service-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-bottom: 16px;
}
.service-price .num { color: var(--accent); }
.service-link {
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}
.service-link:hover { color: var(--accent-hover); }

/* Process / how it works */
.process-bg {
  background: var(--bg-soft);
  position: relative;
}
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
@media (max-width: 900px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .process { grid-template-columns: 1fr; } }
.step {
  background: var(--bg);
  padding: 32px 26px;
  border-radius: 14px;
  border: 1px solid var(--line);
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out),
              box-shadow 0.25s var(--ease-out);
  position: relative;
}
.step:hover {
  border-color: rgba(10, 10, 9, 0.2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(10, 10, 9, 0.3);
}
.step h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin-bottom: 10px;
}
.step p {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Why list */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 40px; } }
.why-list {
  list-style: none;
}
.why-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
}
.why-list li:first-child { padding-top: 0; }
.why-list li:last-child { border-bottom: none; }
.check-box {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--accent-soft);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.check-box svg { width: 14px; height: 14px; stroke: var(--accent); }
.why-list strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.015em;
}
.why-list span {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

/* Pull quote */
.pull-quote {
  background:
    radial-gradient(ellipse at 0% 100%, rgba(10, 10, 9, 0.12) 0%, transparent 50%),
    var(--bg-dark);
  color: var(--bg);
  padding: 56px 48px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.pull-quote::before {
  content: '"';
  position: absolute;
  top: 20px;
  left: 32px;
  font-size: 120px;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.15;
  line-height: 1;
  font-family: Georgia, serif;
}
.pull-quote .q {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  position: relative;
}
.pull-quote .who {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  font-weight: 600;
}

/* CTA band */
.cta-band {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(10, 10, 9, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 100%, rgba(10, 10, 9, 0.10) 0%, transparent 50%),
    var(--bg-dark);
  color: var(--bg);
  padding: 120px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  /* Subtle noise texture for depth. */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
  opacity: 0.6;
}
.cta-band > .container { position: relative; z-index: 1; }
.cta-band h2 {
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.08;
  max-width: 24ch;
  margin: 0 auto 18px;
  color: var(--bg);
}
.cta-band h2 .accent { color: inherit; }  /* band is dark; accent must inherit white, not force black */
.cta-band .sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  margin-bottom: 36px;
}

/* Footer */
footer {
  background: var(--bg-dark);
  color: rgba(255, 255, 255, 0.55);
  padding: 80px 0 40px;
  font-size: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 56px;
}
@media (max-width: 700px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.foot-col h5 {
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 12px; }
.foot-col a {
  transition: color 0.2s var(--ease-out);
}
.foot-col a:hover { color: var(--accent); }
.foot-col p { max-width: 32ch; line-height: 1.65; }
.foot-base {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
}
footer .logo { color: var(--bg); font-size: 20px; }
footer .logo .mark { color: var(--accent); }
.foot-base .logo { color: var(--bg); font-size: 14px; font-weight: 600; }

/* Pricing tiers */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
@media (max-width: 560px) { .tiers { grid-template-columns: 1fr; } }
.tier {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
              transform 0.25s var(--ease-out);
  position: relative;
}
.tier:hover {
  border-color: rgba(10, 10, 9, 0.3);
  box-shadow: var(--shadow-glow);
  transform: translateY(-4px);
}
.tier.featured {
  border: 2px solid var(--accent);
  position: relative;
  background: linear-gradient(180deg, var(--bg) 0%, var(--accent-tint) 100%);
  box-shadow: 0 12px 40px rgba(10, 10, 9, 0.12);
}
.tier.featured:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(10, 10, 9, 0.18);
}
.tier.featured::before {
  content: 'Most popular';
  position: absolute;
  top: -14px;
  left: 26px;
  background: var(--accent);
  color: white;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(10, 10, 9, 0.3);
}
.tier-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.tier h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.tier-blurb {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.tier-price {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  margin-bottom: 24px;
}
.tier-price .big {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.tier-price .unit {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 6px;
}
.tier-features {
  list-style: none;
  margin-bottom: 28px;
  flex-grow: 1;
}
.tier-features li {
  padding: 10px 0;
  font-size: 14px;
  color: var(--ink-2);
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}
.tier-features li:last-child { border-bottom: none; }
.tier-features .check {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}
.tier-cta {
  background: var(--accent);
  color: white !important;
  padding: 14px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  transition: background 0.15s ease;
}
.tier-cta:hover { background: var(--accent-hover); }
.tier-cta.alt {
  background: var(--bg);
  color: var(--ink) !important;
  border: 1.5px solid var(--line-strong);
}
.tier-cta.alt:hover { border-color: var(--ink); background: var(--bg-soft); }

/* Add-ons */
.addons {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.addon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 700px) { .addon-grid { grid-template-columns: 1fr; } }
.addon {
  background: var(--bg);
  padding: 22px;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.addon-name { font-weight: 600; font-size: 16px; }
.addon-desc { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.addon-price {
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}

/* Terms strip */
.terms-strip {
  background: var(--bg-dark);
  color: var(--bg);
}
.terms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 700px) { .terms-grid { grid-template-columns: 1fr; gap: 24px; } }
.term h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.term p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.55;
}

/* FAQ */
details {
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  transition: opacity 0.2s var(--ease-out);
}
details[open] {
  opacity: 1;
}
details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 18px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: -0.018em;
  gap: 24px;
  color: var(--ink);
  transition: color 0.2s var(--ease-out);
}
details summary:hover { color: var(--accent); }
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: '+';
  color: var(--accent);
  font-size: 24px;
  font-weight: 400;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
details[open] summary::after { transform: rotate(45deg); }
details p {
  color: var(--ink-2);
  font-size: 15px;
  margin-top: 12px;
  line-height: 1.6;
  max-width: 60ch;
}

/* Page head */
.page-head {
  padding: 40px 0 56px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  animation: fade-up 0.7s var(--ease-out) both;
}
.page-head::before {
  /* Subtle dotted accent in the top-right of inner pages, matches hero */
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40%; height: 100%;
  background-image: radial-gradient(circle at 1px 1px, rgba(10, 10, 9, 0.05) 1px, transparent 0);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, black 20%, transparent 70%);
          mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, black 20%, transparent 70%);
  pointer-events: none;
}
.page-head > .container { position: relative; z-index: 1; }
.page-head h1 {
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 700;
  letter-spacing: -0.034em;
  line-height: 1.04;
  margin-bottom: 20px;
  max-width: 26ch;
}
.page-head h1 .accent { color: var(--accent); }
.page-head .lede {
  font-size: 19px;
  color: var(--ink-2);
  max-width: 64ch;
  line-height: 1.6;
}

/* Pills (clinics page) */
.pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.pill {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pill .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }

/* Math band */
.math-band {
  background: var(--bg-dark);
  color: var(--bg);
  padding: 56px 0;
}
.math-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}
@media (max-width: 700px) { .math-grid { grid-template-columns: 1fr; gap: 24px; } }
.math-num {
  font-size: 36px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 8px;
}
.math-label {
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
}
.math-foot {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin-top: 32px;
}

/* Capabilities */
.caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .caps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .caps { grid-template-columns: 1fr; } }
.cap {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 24px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cap:hover { border-color: var(--accent); transform: translateY(-2px); }
.cap-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 14px;
}
.cap h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.cap p {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 48px;
  max-width: 720px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--line);
}
.t-item {
  position: relative;
  padding: 12px 0 28px;
}
.t-item::before {
  content: '';
  position: absolute;
  left: -42px;
  top: 22px;
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--bg);
}
.t-item .t-day {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.t-item h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.t-item p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
  max-width: 56ch;
}

/* Offer card */
.offer-card {
  background: var(--bg-dark);
  color: var(--bg);
  padding: 48px 40px;
  border-radius: 16px;
  max-width: 720px;
  margin: 0 auto;
}
.offer-card .label {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.offer-card h2 {
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 24px;
}
.offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px 0;
  margin-bottom: 24px;
}
@media (max-width: 600px) { .offer-grid { grid-template-columns: 1fr; gap: 16px; } }
.offer-line .big {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.offer-line .unit {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
}
.offer-terms {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  margin-bottom: 24px;
}
.offer-terms strong { color: var(--bg); font-weight: 600; }
.offer-card .btn-primary {
  background: var(--accent);
  width: 100%;
  justify-content: center;
}

/* ---------- Scope-request form ---------- */
.scope-form,
.scope-form * { box-sizing: border-box; }

.scope-form {
  display: block;
  max-width: 520px;
  width: 100%;
  margin: 36px auto 0;
  padding: 28px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  text-align: left;
  position: relative;
}

.scope-form .honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.scope-form .field {
  display: block;
  margin-bottom: 16px;
}
.scope-form .field:last-of-type { margin-bottom: 0; }

.scope-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}

.scope-form input[type="email"],
.scope-form input[type="text"],
.scope-form textarea {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.45;
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  outline: none;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
  resize: vertical;
}
.scope-form textarea {
  min-height: 112px;
  font-family: inherit;
}
.scope-form input::placeholder,
.scope-form textarea::placeholder {
  color: rgba(255,255,255,0.40);
}
.scope-form input:hover,
.scope-form textarea:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.24);
}
.scope-form input:focus,
.scope-form textarea:focus {
  background: rgba(255,255,255,0.09);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(10, 10, 9, 0.28);
}

.scope-form .scope-submit {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 16px 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color .15s ease, transform .05s ease;
}
.scope-form .scope-submit:hover { background: var(--accent-hover); }
.scope-form .scope-submit:active { transform: translateY(1px); }
.scope-form .scope-submit:disabled { opacity: 0.55; cursor: not-allowed; }

.scope-form .form-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  font-size: 14px;
  color: rgba(255,255,255,0.55);
}
.scope-form .form-meta a {
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 1px;
}
.scope-form .form-meta a:hover { border-bottom-color: var(--accent); }
.scope-form .copy-email {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.scope-form .copy-email:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.05);
}

.scope-form .form-status {
  min-height: 22px;
  margin-top: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.80);
  text-align: center;
}
.scope-form .form-status a { color: var(--accent); border-bottom: 1px solid var(--accent); }

@media (max-width: 540px) {
  .scope-form { padding: 22px 18px; }
}

/* ---------- Proof band (above CTA) ---------- */
.proof-band {
  padding: 120px 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.proof-band .section-title,
.proof-band .section-eyebrow,
.proof-band .section-lede {
  text-align: center;
}
.proof-band .section-lede { max-width: 620px; margin: 0 auto 40px; }

.proof-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 36px 56px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 56px;
  max-width: 900px;
}
.proof-logos .plogo {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: -0.02em;
  opacity: 0.65;
  transition: opacity .15s ease, color .15s ease;
}
.proof-logos .plogo:hover { opacity: 1; color: var(--ink); }

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; } }
.proof-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out),
              box-shadow 0.25s var(--ease-out);
}
.proof-card:hover {
  border-color: rgba(10, 10, 9, 0.2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.proof-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.proof-q {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  margin: 0;
}
.proof-attr {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: auto;
}
.proof-attr a { color: var(--ink-2); border-bottom: 1px solid var(--line-strong); }

/* Cal.com secondary CTA on the dark band */
.contact-options { margin: 0 auto 8px; display: flex; justify-content: center; }
.btn-secondary.on-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-secondary.on-dark:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
}
.btn-secondary.on-dark .btn-icon { color: var(--accent); font-weight: 700; }

/* Primary CTA inverted for dark backgrounds (cta-band, dark cards, etc.) */
.btn-primary.on-dark,
.cta-band .btn-primary,
.qs-cta .btn-primary,
.vert-cta .btn-primary {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-primary.on-dark:hover,
.cta-band .btn-primary:hover,
.qs-cta .btn-primary:hover,
.vert-cta .btn-primary:hover {
  background: #F4F4F2;
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Monochrome scarcity card (replaces the orange seat-counter style) */
.scarcity-card {
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 18px 0 22px;
  max-width: 540px;
}
.scarcity-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
}
.scarcity-num { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.scarcity-tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-2); background: var(--bg);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line-strong);
}
.scarcity-bar { background: var(--line-strong); border-radius: 999px; height: 6px; margin-top: 12px; overflow: hidden; }
.scarcity-bar-fill { background: var(--ink); height: 100%; border-radius: 999px; transition: width 0.4s var(--ease-out); }
.scarcity-note { font-size: 12px; color: var(--ink-3); margin-top: 10px; opacity: 1; line-height: 1.5; }

/* === Accessibility: WCAG 2.2 AA additions === */

/* Skip-to-content: invisible until focused (keyboard users) */
.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  background: var(--ink); color: var(--bg);
  padding: 12px 18px; border-radius: 8px;
  font-weight: 600; font-size: 14px;
  text-decoration: none;
  z-index: 9999;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 16px; outline: 2px solid var(--bg); outline-offset: 2px; }

/* Visible focus on every interactive element (keyboard users) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Reduced motion: kill hover lifts and transitions for users who opted out */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn-primary:hover, .btn-secondary:hover, .hero-tier:hover, .service:hover {
    transform: none !important;
  }
}

/* === Homepage flagship + supporting services (P1 fix: consolidate 5-card grid) === */
.flagship-service {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 36px 40px;
  margin-top: 28px;
  max-width: 760px;
}
.flagship-tag {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2);
  background: var(--accent-soft);
  padding: 5px 11px; border-radius: 999px;
  margin-bottom: 14px;
}
.flagship-service h3 {
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  color: var(--ink);
}
.flagship-service p {
  font-size: 16px; line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 60ch;
}
.flagship-price {
  font-size: 16px; color: var(--ink-2);
  margin-bottom: 22px;
}
.flagship-price .num {
  font-weight: 700; color: var(--ink); font-size: 18px;
  letter-spacing: -0.01em;
}

.supporting-services {
  list-style: none; padding: 0;
  margin: 28px 0 22px;
  border-top: 1px solid var(--line);
  max-width: 760px;
}
.supporting-services li {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.55;
  color: var(--ink-2);
}
.supporting-services li strong { color: var(--ink); font-weight: 600; }
.supporting-price {
  flex-shrink: 0;
  font-size: 14px; font-weight: 600;
  color: var(--ink); white-space: nowrap;
}
.supporting-cta { margin-top: 8px; }

@media (max-width: 600px) {
  .supporting-services li {
    flex-direction: column; gap: 6px;
  }
  .supporting-price { font-size: 13px; }
  .flagship-service { padding: 24px 22px; }
  .flagship-service h3 { font-size: 22px; }
}

/* === Clinics 6-job grid demoted to compact list === */
.jobs-list {
  list-style: none; padding: 0; margin: 28px 0 0;
  border-top: 1px solid var(--line);
  max-width: 760px;
}
.jobs-list li {
  display: grid; grid-template-columns: 30px 1fr;
  gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.55;
  color: var(--ink-2);
}
.jobs-list li strong { color: var(--ink); font-weight: 600; }
.jobs-list .job-num {
  font-size: 12px; font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  align-self: start;
  padding-top: 2px;
}

/* ============================================================
   PREMIUM LAYER (site-wide) - elevate to a "10k without doubt" feel.
   Authority through restraint: more air, sharper type, quiet depth.
   Added 2026-05-30. Uses shared classes so every page inherits it.
   ============================================================ */

/* Generous section rhythm - premium sites breathe.
   Lower specificity than class-based section padding, so pages that set
   their own (.svc-hero, .loc-hero, etc.) keep theirs; bare sections gain air. */
main > section { padding-top: 88px; padding-bottom: 88px; }
@media (max-width: 760px) { main > section { padding-top: 56px; padding-bottom: 56px; } }

/* Eyebrows: smaller, wider, quieter - a luxury tell */
.section-eyebrow {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-4);
}
.section-title { letter-spacing: -0.032em; line-height: 1.06; }

/* Buttons: more presence, quiet depth, considered motion */
.btn-primary {
  padding: 15px 28px; font-weight: 600; letter-spacing: -0.01em;
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(10,10,9,0.18), 0 8px 24px rgba(10,10,9,0.14);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(10,10,9,0.20), 0 16px 40px rgba(10,10,9,0.20); }
.btn-secondary { padding: 14px 26px; border-radius: 11px; font-weight: 600; transition: transform .25s var(--ease-out), border-color .2s; }
.btn-secondary:hover { transform: translateY(-2px); border-color: var(--line-strong); }

/* Hero (index, accountants, clinics): gravity + a quiet gradient floor */
.hero {
  position: relative;
  padding-top: 84px; padding-bottom: 88px;
  background:
    radial-gradient(120% 80% at 12% 0%, #FCFCFB 0%, var(--bg) 46%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(10,10,9,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,9,0.018) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(80% 70% at 50% 0%, #000 0%, transparent 75%);
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(44px, 6.4vw, 78px); line-height: 1.0; letter-spacing: -0.04em; font-weight: 700; }
.hero .lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--ink-2); max-width: 60ch; }

/* Trust bar -> a precise, hairline-divided premium stat band */
.trust-bar { background: var(--ink); color: var(--bg); border: 0; padding: 40px 0; }
.trust-bar .trust-grid { gap: 0; }
.trust-bar .trust-item { padding: 6px 32px; position: relative; }
.trust-bar .trust-item + .trust-item::before {
  content: ""; position: absolute; left: 0; top: 14%; height: 72%; width: 1px;
  background: rgba(255,255,255,0.14);
}
@media (max-width: 760px) { .trust-bar .trust-item + .trust-item::before { display: none; } }
.trust-bar .num { color: var(--bg); font-weight: 700; letter-spacing: -0.03em; }
.trust-bar .label { color: rgba(255,255,255,0.62); }

/* Hero tiers: quiet card depth + crisp hover lift */
.hero-tier {
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s;
}
.hero-tier:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.hero-tier.featured { border-color: var(--ink); box-shadow: var(--shadow-md); }

/* Flagship block: a considered, weighty centerpiece */
.flagship-service {
  border: 1px solid var(--line-strong); border-radius: 20px;
  padding: 40px; background: linear-gradient(180deg, #FCFCFB 0%, var(--bg) 100%);
  box-shadow: var(--shadow-md);
}
.flagship-service h3 { letter-spacing: -0.03em; }

/* Cards across the site: refined surfaces, gentle lift */
.family-card, .proof-card, .stack-card, .pillar-card, .svc-card { box-shadow: var(--shadow-xs); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.family-card:hover, .proof-card:hover, .pillar-card:hover, .svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.proof-card { border-radius: 16px; }
.proof-label { color: var(--ink-4); letter-spacing: 0.14em; font-size: 11px; text-transform: uppercase; font-weight: 700; }

/* FAQ: refined disclosure rows */
details summary { transition: color .2s; }
details[open] summary { color: var(--ink); }

/* CTA band: deep, confident close */
.cta-band { background: var(--ink); color: var(--bg); }
.cta-band h2 { letter-spacing: -0.035em; line-height: 1.08; }

/* Single-CTA discipline: one primary button per view, secondaries demote to quiet links.
   Added 2026-05-30. "Two CTAs is no CTA." */
.cta-aside { margin-top: 18px; font-size: 14px; color: var(--ink-3); line-height: 1.7; }
.cta-aside a { color: var(--ink-2); border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; transition: color .2s, border-color .2s; }
.cta-aside a:hover { color: var(--ink); border-color: var(--ink); }
.cta-aside .dot { color: var(--ink-4); margin: 0 10px; }

/* ============================================================
   PREMIUM LAYOUT SYSTEM (site-wide) - added 2026-05-30.
   Headline-dominant heroes, numbered credential strips, framed
   offer modules. The 01-04 index motif is the through-line.
   ============================================================ */

/* Hero kicker - flush eyebrow label above a hero headline (de-pilled) */
.hero-kicker {
  display: inline-block; position: relative; font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 30px; padding-left: 22px;
}
.hero-kicker::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 14px; height: 1.5px; background: var(--accent);
}
.hero-kicker .hk-dot { color: var(--ink-4); margin: 0 4px; }

/* Hero headline dominance */
.hero-premium { padding-top: 76px; padding-bottom: 80px; }
.hero-premium h1 { max-width: 17ch; margin-bottom: 26px; }
.hero-premium .lede { max-width: 58ch; }

/* Numbered credential strip */
.hero-creds { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid var(--ink); }
.hero-creds .hc { padding: 26px 28px 4px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.hero-creds .hc:last-child { border-right: 0; padding-right: 0; }
.hc-k { font-size: 12px; font-weight: 700; color: var(--ink-4); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.hc-t { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.hc-d { font-size: 13px; color: var(--ink-3); line-height: 1.45; }
@media (max-width: 760px) {
  .hero-creds { grid-template-columns: 1fr 1fr; gap: 0; }
  .hero-creds .hc { padding: 22px 22px 4px 0; }
  .hero-creds .hc:nth-child(2) { border-right: 0; padding-right: 0; }
  .hero-creds .hc:nth-child(1), .hero-creds .hc:nth-child(2) { border-bottom: 1px solid var(--line); padding-bottom: 22px; }
}

/* Framed offer module: primary panel + numbered hairline rows */
.offer-frame { margin-top: 44px; border: 1px solid var(--line-strong); border-radius: 22px; overflow: hidden; display: grid; grid-template-columns: 1.08fr 1fr; background: var(--bg); box-shadow: var(--shadow-lg); }
@media (max-width: 900px) { .offer-frame { grid-template-columns: 1fr; } }
.offer-primary { padding: 46px; background: linear-gradient(165deg, #FBFBFA 0%, var(--bg) 70%); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
@media (max-width: 900px) { .offer-primary { border-right: 0; border-bottom: 1px solid var(--line); } }
.op-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 20px; }
.offer-primary h3 { font-size: clamp(26px, 2.6vw, 33px); letter-spacing: -0.032em; line-height: 1.08; margin: 0 0 16px; }
.offer-primary p { font-size: 15px; color: var(--ink-2); line-height: 1.62; margin: 0 0 28px; }
.offer-primary .btn-primary { align-self: flex-start; }
.op-note { font-size: 13px; color: var(--ink-3); margin-top: 16px; }
.offer-list { display: flex; flex-direction: column; }
.offer-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 18px; align-items: center; padding: 22px 30px; border-bottom: 1px solid var(--line); transition: background .18s var(--ease-out); }
.offer-row:last-child { border-bottom: 0; }
.offer-row:hover { background: var(--bg-soft); }
.or-num { font-size: 13px; font-weight: 700; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.or-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.or-body strong { font-size: 16px; font-weight: 700; letter-spacing: -0.012em; color: var(--ink); }
.or-body span { font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.or-price { font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--ink); }
.offer-row-all { background: var(--bg-soft); }
.offer-row-all:hover { background: var(--accent-soft); }

/* Service / vertical hero elevation - match the homepage's gravity */
.svc-hero, .hub-hero, .vert-hero { padding-top: 72px; padding-bottom: 56px; }
.svc-hero h1, .vert-hero h1 { font-size: clamp(40px, 5.4vw, 62px); letter-spacing: -0.038em; line-height: 1.03; }
.hub-hero h1 { font-size: clamp(42px, 6vw, 68px); letter-spacing: -0.04em; }
.svc-hero .lede, .vert-hero .lede, .hub-hero .lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; }

/* Free-guide cards (homepage + service pages) */
.guide-card { transition: border-color .2s, transform .2s, box-shadow .2s; }
.guide-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(10,10,9,0.06); }

/* ============================================================
   Centered layout - 2026-06-07 (font + palette reverted to v4 white/Inter)
   ============================================================ */
/* Top bar: centered, balanced */
.nav-inner { justify-content: center; gap: 44px; }

/* Hero: centered column, tighter top now the kicker is gone */
.hero-premium { text-align: center; padding-top: 44px; }
.hero-premium h1 { margin-left: auto; margin-right: auto; }
.hero-premium .lede { margin-left: auto; margin-right: auto; max-width: 60ch; }
.hero-premium .cta-row { justify-content: center; }
.hero-premium .cta-aside { text-align: center; }
.hero-premium .hero-creds { max-width: 920px; margin-left: auto; margin-right: auto; }

/* Other page heroes centered to match */
.hub-hero, .svc-hero, .vert-hero { text-align: center; }
.hub-hero h1, .svc-hero h1, .vert-hero h1,
.hub-hero .lede, .svc-hero .lede, .vert-hero .lede { margin-left: auto; margin-right: auto; }

/* ============================================================
   Liquid glass top bar + rounded glass buttons + braille - 2026-06-07
   ============================================================ */

/* Top bar: transparent wrapper, floating glass notch inside */
.nav { background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 14px 0; }
.nav .nav-inner {
  width: -moz-fit-content; width: fit-content;
  max-width: calc(100% - 28px);
  gap: 30px;
  padding: 8px 16px 8px 24px;
  border-radius: 100px;
  background: linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.26) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(195%) brightness(1.06);
  backdrop-filter: blur(22px) saturate(195%) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 11px 16px -11px rgba(255,255,255,0.9), inset 0 -6px 12px -8px rgba(10,10,9,0.06), 0 12px 34px rgba(10,10,9,0.13), 0 2px 6px rgba(10,10,9,0.07);
}

/* Rounded liquid-glass primary button (hero, sections, nav CTA) */
.btn-primary, .nav-cta {
  border-radius: 100px;
  background: linear-gradient(180deg, #26241f, #0a0a09);
  color: var(--bg) !important;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 18px rgba(10,10,9,0.20);
  transition: transform .18s var(--ease-out), box-shadow .2s var(--ease-out), background .2s ease;
}
.btn-primary { padding: 14px 30px; }
.btn-primary:hover, .nav-cta:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #2e2b25, #14120f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 10px 26px rgba(10,10,9,0.26);
}

/* Secondary glass pill (hero free-tool CTA) */
.btn-glass {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: 100px;
  font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.40));
  -webkit-backdrop-filter: blur(16px) saturate(190%) brightness(1.05); backdrop-filter: blur(16px) saturate(190%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 8px 12px -8px rgba(255,255,255,0.75), 0 4px 16px rgba(10,10,9,0.08);
  transition: transform .18s var(--ease-out), box-shadow .2s var(--ease-out), background .2s ease;
}
.btn-glass:hover {
  background: rgba(255,255,255,0.72); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 22px rgba(10,10,9,0.10);
}

/* (braille accent removed 2026-06-07) */

/* Remove all pills + kicker/eyebrow labels site-wide (Sal, 2026-06-07) */
.hero-kicker, .section-eyebrow, .eyebrow, .pill, .pills, .post-tag, .tag { display: none !important; }

/* ============================================================
   Centered page heroes + ONE button style site-wide - 2026-06-07
   ============================================================ */

/* Center every page hero/header */
.hero-premium, .hub-hero, .svc-hero, .vert-hero,
.vc-hero, .pb-hero, .calc-hero, .gloss-hero, .lite-hero, .me-hero { text-align: center; }
.vc-hero h1, .pb-hero h1, .calc-hero h1, .gloss-hero h1, .lite-hero h1, .me-hero h1,
.vc-hero .lede, .pb-hero .lede, .calc-hero .lede, .gloss-hero .lede, .lite-hero .lede, .me-hero .lede {
  margin-left: auto; margin-right: auto;
}
.vc-hero .lede, .pb-hero .lede, .calc-hero .lede, .gloss-hero .lede, .lite-hero .lede, .me-hero .lede { max-width: 64ch; }
.svc-hero .cta-row, .vc-hero .cta-row, .pb-hero .cta-row, .calc-hero .cta-row, .lite-hero .cta-row, .me-hero .cta-row { justify-content: center; }

/* One button style: rounded glass pills, consistent sizing everywhere */
.btn-primary, .btn-secondary, .btn-glass, .nav-cta, .vc-run, .scope-submit, .ob-submit,
#gate-btn, #wl-submit, form button[type="submit"] {
  border-radius: 100px !important;
  font-family: inherit; font-weight: 600; font-size: 15px; letter-spacing: -0.004em;
  padding: 14px 28px; line-height: 1.1; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .2s var(--ease-out), background .2s ease;
}

/* Primary fill: dark glass pill (light-context CTAs + form submits) */
.btn-primary, .nav-cta, .vc-run, .scope-submit, .ob-submit, #wl-submit, form button[type="submit"] {
  background: linear-gradient(180deg, #26241f, #0a0a09) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 18px rgba(10,10,9,0.20) !important;
}
.btn-primary:hover, .nav-cta:hover, .vc-run:hover, .scope-submit:hover, .ob-submit:hover, #wl-submit:hover, form button[type="submit"]:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #2e2b25, #14120f) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 10px 26px rgba(10,10,9,0.26) !important;
}

/* Secondary: light glass pill */
.btn-secondary, .btn-glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.40)) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(10,10,9,0.12) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), 0 4px 16px rgba(10,10,9,0.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%);
}
.btn-secondary:hover, .btn-glass:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.56)) !important;
}

/* Gate / breakdown buttons sit on DARK cards: keep them light so they pop */
#gate-btn, .vc-capture button[type="submit"] {
  background: #ffffff !important; color: #0a0a09 !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28) !important;
}
#gate-btn:hover, .vc-capture button[type="submit"]:hover { transform: translateY(-1px); background: #f2f0ea !important; }

/* ============================================================
   CENTER EVERYTHING - every page, box, button, paragraph (Sal, 2026-06-07)
   ============================================================ */
main { text-align: center !important; }
main p, main h1, main h2, main h3, main h4, main h5, main h6,
main li, main span, main label, main div, main blockquote,
main td, main th, main figcaption, main dt, main dd, main strong, main em { text-align: center !important; }
main input, main textarea, main select { text-align: center !important; }

/* CTA rows + button rows: dead centre */
main .cta-row, main .btn-row { display: flex !important; justify-content: center !important; align-items: center; flex-wrap: wrap; gap: 12px; }

/* Lists: centred clean lines (no staggered bullets) */
main ul, main ol { list-style: none; padding-left: 0; margin-left: auto; margin-right: auto; }

/* Boxes / cards / forms centred in their column */
main form, main .vc-card, main .gate-card, main .vc-capture, main .vc-results,
main .footer-cta, main table, main .pb-inside { margin-left: auto !important; margin-right: auto !important; }

/* Form dimensions left unchanged - just centred in the page (no restructuring) */

/* ============================================================
   ONE centred column down the MIDDLE of the page (Sal, 2026-06-07)
   ============================================================ */
/* Narrow the content to a centred column */
main .container, main .container-narrow, main .narrow {
  max-width: 820px !important; margin-left: auto !important; margin-right: auto !important;
}
/* Collapse every multi-column grid/row into one stacked, centred column */
main [class*="grid"], main [class*="-col"], main .tiers, main .process,
main .section-head-row, main .hero-grid {
  display: flex !important; flex-direction: column !important; gap: 20px !important; align-items: stretch !important;
}

/* Keep the hero-creds (01-04) side by side, centred */
main .hero-creds {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  justify-content: center !important; gap: 28px !important;
}
main .hero-creds > * { flex: 1 1 150px; max-width: 200px; }

/* Checkmark lists (why-list): read like a normal left-aligned list, block stays centred */
main .why-list { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }
main .why-list li {
  display: flex !important; flex-direction: row !important; align-items: flex-start;
  gap: 14px; text-align: left !important;
}
main .why-list li *, main .why-list li strong, main .why-list li span, main .why-list li div { text-align: left !important; }
main .why-list .check-box { flex: 0 0 auto; }

/* Services page: keep the service-card catalogue SIDE BY SIDE, not stacked */
main:has(.hub-section) .container { max-width: 1100px !important; }
main .svc-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 18px !important; align-items: stretch !important;
}

/* Centre all sub-heading / blurb / lede text blocks in the middle of the page */
main .lede, main .blurb, main .sub, main .section-lede, main .hub-section .blurb, main p {
  margin-left: auto !important; margin-right: auto !important;
}

/* ============================================================
   Top bar: smaller, slicker, stable, no top hairline (Sal, 2026-06-07)
   ============================================================ */
.nav { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 10px 0 !important; }
.nav .nav-inner {
  gap: 20px !important;
  padding: 5px 8px 5px 18px !important;
}
.logo { font-size: 15px !important; }
.nav-links { gap: 18px !important; }
.nav-links a, .nav-item .nav-toggle { font-size: 12.5px !important; }
.nav-cta { padding: 7px 15px !important; font-size: 12.5px !important; }
.nav-item .nav-toggle .caret { font-size: 9px !important; }

/* Kill any faint hairline at the very top of every page */
html, body, main { border-top: 0 !important; }
main > section:first-child, body > section:first-child { border-top: 0 !important; box-shadow: none !important; }

/* Services dropdown: shrink the gap + invisible bridge so it stays open when you move to it */
.nav-dropdown { top: calc(100% + 8px) !important; }
.nav-item::after {
  content: ''; position: absolute; top: 100%; left: -18px; right: -18px; height: 14px;
}

/* Nav links all identical: drop the Services caret, match Work/Blog/About exactly */
.nav-item .nav-toggle .caret { display: none !important; }
.nav-links a:not(.nav-cta), .nav-item .nav-toggle {
  font-size: 12.5px !important; font-weight: 500 !important; color: var(--ink-2) !important;
  gap: 0 !important; letter-spacing: 0 !important;
}
.nav-links a:not(.nav-cta):hover, .nav-item .nav-toggle:hover { color: var(--ink) !important; }

/* All nav items on one baseline (Services in line with Work/Blog/About) */
.nav-links { display: flex !important; align-items: center !important; }
.nav-links > a, .nav-links > .nav-item, .nav-item .nav-toggle {
  display: inline-flex !important; align-items: center !important; line-height: 1 !important;
}

/* Book a call: white text */
.nav-cta { color: #ffffff !important; }

/* ============================================================
   LIQUID GLASS - notch + buttons (Sal, 2026-06-07)
   Translucent lensing + specular rim highlights + fluid spring.
   ============================================================ */

/* The floating notch */
.nav .nav-inner {
  background: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.13)) !important;
  -webkit-backdrop-filter: blur(11px) saturate(195%) brightness(1.13) !important;
  backdrop-filter: blur(11px) saturate(195%) brightness(1.13) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow:
    inset 0 1.5px 1.5px rgba(255,255,255,1),
    inset 0 0 10px rgba(255,255,255,0.35),
    inset 0 -11px 18px -13px rgba(255,255,255,0.6),
    inset 1px 0 2px rgba(255,255,255,0.4),
    inset -1px 0 2px rgba(255,255,255,0.4),
    0 12px 36px rgba(10,10,9,0.14), 0 2px 6px rgba(10,10,9,0.07) !important;
  transition: transform .55s var(--ease-spring), box-shadow .3s var(--ease-out) !important;
}
/* specular light sweep across the glass */
.nav .nav-inner::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(125deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0) 56%, rgba(255,255,255,0.16) 80%, rgba(255,255,255,0.55) 100%);
  mix-blend-mode: screen;
}
.nav .nav-inner > * { position: relative; z-index: 1; }

/* Liquid-glass primary button */
.btn-primary, .nav-cta {
  background: linear-gradient(180deg, rgba(42,36,28,0.78), rgba(10,10,9,0.86)) !important;
  -webkit-backdrop-filter: blur(10px) saturate(165%) !important;
  backdrop-filter: blur(10px) saturate(165%) !important;
  border: 1px solid rgba(255,255,255,0.26) !important;
  color: #fff !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255,255,255,0.5), inset 0 -8px 12px -9px rgba(0,0,0,0.5), 0 6px 18px rgba(10,10,9,0.22) !important;
  transition: transform .45s var(--ease-spring), box-shadow .3s var(--ease-out), background .3s !important;
}
/* Liquid-glass light button */
.btn-glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.22)) !important;
  -webkit-backdrop-filter: blur(11px) saturate(185%) brightness(1.08) !important;
  backdrop-filter: blur(11px) saturate(185%) brightness(1.08) !important;
  border: 1px solid rgba(255,255,255,0.66) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,1), inset 0 -6px 10px -8px rgba(255,255,255,0.55), 0 5px 16px rgba(10,10,9,0.10) !important;
  transition: transform .45s var(--ease-spring), box-shadow .3s var(--ease-out), background .3s !important;
}
/* Fluidity: spring on hover, squish on press */
.btn-primary:hover, .btn-glass:hover, .nav-cta:hover { transform: scale(1.04) !important; }
.btn-primary:active, .btn-glass:active, .nav-cta:active { transform: scale(0.965) !important; }

/* Work page stats band: side by side, not stacked */
main .trust-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 20px !important; align-items: stretch !important;
}
main .trust-item { border-left: 0 !important; }

/* Work page text sections: tight centred column, heading wraps */
main .work-section .narrow {
  max-width: 700px !important; margin-left: auto !important; margin-right: auto !important;
}
main .work-section .narrow h2, main .work-section .narrow .section-title { white-space: normal !important; }

/* ============================================================
   Mobile notch: logo + Book a call only, nothing wraps (Sal, 2026-06-07)
   ============================================================ */
@media (max-width: 700px) {
  .nav-item, .nav-item .nav-toggle, .nav-dropdown,
  .nav-links > a:not(.nav-cta) { display: none !important; }
  .nav .nav-inner {
    width: calc(100% - 18px) !important; max-width: calc(100% - 18px) !important;
    gap: 12px !important; padding: 6px 8px 6px 18px !important;
    justify-content: space-between !important;
  }
  .logo { font-size: 15px !important; white-space: nowrap !important; line-height: 1.1 !important; }
  .nav-cta { white-space: nowrap !important; padding: 8px 16px !important; font-size: 12.5px !important; flex: 0 0 auto !important; }
}