/* ============================================================
   1st Step Accounting — Site Styles
   Brand fonts (per guidelines):
     Inter        — primary  (body, UI, nav, buttons)
     Almarai      — secondary (eyebrows, subheads, labels)
     The Chairman — tertiary  (large display) *substitute: Familjen Grotesk
   Palette tokens are set per-theme on :root via data-theme attr
   ============================================================ */

:root,
:root[data-theme="indigo"] {
  /* Brand */
  --c-blue: #0079B2;
  --c-indigo: #1A3764;
  --c-green: #9BCC2F;
  --c-pink: #E7559E;

  /* Surfaces */
  --bg: #0B1530;
  --bg-2: #11204A;
  --bg-3: #1A3764;
  --bg-light: #F6F8FC;
  --bg-light-2: #ECF0F8;
  --ink: #0B1530;
  --ink-soft: #3A4A6B;
  --paper: #ffffff;

  /* Text on dark */
  --on-dark: #F1F4FB;
  --on-dark-soft: rgba(241,244,251,0.72);
  --on-dark-faint: rgba(241,244,251,0.45);

  /* Accent assignments */
  --accent: #9BCC2F;      /* primary accent (green dominant) */
  --accent-2: #E7559E;    /* secondary pop (pink) */
  --accent-ink: #0B1530;  /* text on accent fills */

  /* CTA button color (per client: darker blue, not green) */
  --cta: #0E5BA8;
  --cta-ink: #ffffff;


  /* Hero gradient stops */
  --grad-1: #0B1530;
  --grad-2: #1A3764;
  --grad-3: #0079B2;
  --grad-glow-a: rgba(155,204,47,0.32);
  --grad-glow-b: rgba(231,85,158,0.28);
  --grad-glow-c: rgba(0,121,178,0.45);
}

:root[data-theme="midnight"] {
  --bg: #07091A;
  --bg-2: #0F1230;
  --bg-3: #1A1F4A;
  --bg-light: #F8F5FA;
  --bg-light-2: #EFE9F4;
  --ink: #07091A;
  --ink-soft: #3A2F45;
  --accent: #E7559E;
  --accent-2: #9BCC2F;
  --cta: #0E5BA8;
  --cta-ink: #ffffff;

  --grad-1: #07091A;
  --grad-2: #1A1F4A;
  --grad-3: #4A1A52;
  --grad-glow-a: rgba(231,85,158,0.42);
  --grad-glow-b: rgba(155,204,47,0.22);
  --grad-glow-c: rgba(0,121,178,0.35);
}

:root[data-theme="ocean"] {
  --bg: #062745;
  --bg-2: #0B3D6B;
  --bg-3: #0079B2;
  --bg-light: #F2F8FC;
  --bg-light-2: #E2EEF7;
  --ink: #062745;
  --ink-soft: #2A4B6B;
  --accent: #9BCC2F;
  --accent-2: #E7559E;
  --cta: #0E5BA8;
  --cta-ink: #ffffff;

  --grad-1: #062745;
  --grad-2: #0B3D6B;
  --grad-3: #0079B2;
  --grad-glow-a: rgba(155,204,47,0.30);
  --grad-glow-b: rgba(0,121,178,0.50);
  --grad-glow-c: rgba(231,85,158,0.22);
}

:root[data-theme="dusk"] {
  --bg: #1A0F2E;
  --bg-2: #2B1850;
  --bg-3: #3D2370;
  --bg-light: #FAF6FC;
  --bg-light-2: #F1E9F6;
  --ink: #1A0F2E;
  --ink-soft: #4A3868;
  --accent: #E7559E;
  --accent-2: #9BCC2F;
  --cta: #0E5BA8;
  --cta-ink: #ffffff;

  --grad-1: #1A0F2E;
  --grad-2: #3D2370;
  --grad-3: #0079B2;
  --grad-glow-a: rgba(231,85,158,0.40);
  --grad-glow-b: rgba(155,204,47,0.26);
  --grad-glow-c: rgba(0,121,178,0.40);
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }

/* Type roles (brand):
   --font-primary   Inter           — body, UI, nav, buttons, inputs, paragraphs
   --font-secondary Almarai         — eyebrows, subheads, labels, supporting text
   --font-display   Inter                    — large headings
   --font-flair     Playfair Display italic  — accent words */
:root {
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --font-secondary: 'Almarai', 'Inter', sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-flair: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.98;
}

.flair {
  font-family: var(--font-flair);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}

.eyebrow {
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.container {
  width: min(1240px, 100% - 48px);
  margin: 0 auto;
}

.section { padding: clamp(72px, 9vw, 140px) 0; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  will-change: transform;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--cta);
  color: var(--cta-ink);
  box-shadow: 0 8px 24px -8px color-mix(in oklab, var(--cta) 60%, transparent);
}
.btn-primary:hover {
  box-shadow: 0 14px 36px -10px color-mix(in oklab, var(--cta) 70%, transparent);
}
.btn-ghost-light {
  background: transparent;
  color: var(--on-dark);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.08); }
.btn-ghost-dark {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(11,21,48,0.18);
}
.btn-ghost-dark:hover { background: rgba(11,21,48,0.05); }
.btn .arr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  background: rgba(255,255,255,0.18);
  transition: transform 0.2s ease;
}
.btn-ghost-dark .arr,
.btn-ghost-light .arr { background: rgba(11,21,48,0.12); }
.btn-ghost-light .arr { background: rgba(255,255,255,0.14); }
.btn:hover .arr { transform: translateX(4px); }

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px 0;
  transition: background 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}
.nav.scrolled {
  padding: 12px 0;
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 38px; width: auto; }
.nav-links {
  display: flex; gap: 2px; align-items: center;
}
.nav-link {
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--on-dark-soft);
  transition: color 0.18s, background 0.18s;
}
.nav-link:hover {
  color: var(--on-dark);
  background: rgba(255,255,255,0.06);
}
.nav-cta { display: flex; gap: 10px; align-items: center; }

@media (max-width: 880px) {
  .nav-links { display: none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 140px 0 90px;
  color: var(--on-dark);
  background:
    radial-gradient(80% 60% at 12% 18%, var(--grad-glow-c) 0%, transparent 60%),
    radial-gradient(60% 50% at 90% 20%, var(--grad-glow-a) 0%, transparent 55%),
    radial-gradient(70% 60% at 70% 95%, var(--grad-glow-b) 0%, transparent 55%),
    linear-gradient(180deg, var(--grad-1) 0%, var(--grad-2) 80%, var(--grad-3) 100%);
  overflow: hidden;
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 120px;
  background: linear-gradient(180deg, transparent, var(--bg-light));
  z-index: 4;
}

/* grid noise */
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(80% 70% at 50% 30%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, black 0%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--on-dark-soft);
  font-size: 13px;
  font-weight: 500;
}
.hero-eyebrow .dot {
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 22px 0 28px;
  color: var(--on-dark);
  text-wrap: balance;
  max-width: 16ch;
}
.hero h1 .accent-word {
  color: var(--accent);
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.hero h1 .flair {
  color: var(--accent-2);
  font-weight: 500;
  white-space: nowrap;
}

.hero-sub {
  font-size: 19px;
  color: var(--on-dark-soft);
  max-width: 560px;
  margin-bottom: 36px;
  line-height: 1.55;
}

.hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.hero-meta {
  display: flex; gap: 28px; align-items: center;
  margin-top: 44px;
  color: var(--on-dark-faint);
  font-size: 14px;
  flex-wrap: wrap;
}
.hero-meta .avatars {
  display: flex;
}
.hero-meta .avatars span {
  width: 32px; height: 32px; border-radius: 999px;
  margin-left: -10px;
  background-size: cover; background-position: center;
  border: 2px solid var(--grad-2);
}
.hero-meta .avatars span:first-child { margin-left: 0; }
.hero-meta strong { color: var(--on-dark); font-weight: 600; }

/* Hero visual (portrait + cards) */
.hero-visual {
  position: relative;
  aspect-ratio: 4/5;
  max-width: 480px;
  width: 100%;
  justify-self: end;
  /* Buffer from container edge so floating cards never touch the page edge
     when captured by static renderers (Canva, html-to-image, etc.) */
  margin-right: 12px;
}
.hero-portrait {
  position: absolute; inset: 8% 0 0 0;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 60%, rgba(11,21,48,0.6)),
    var(--bg-2);
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.06);
}
.hero-portrait img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05);
}
.hero-portrait::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,21,48,0.45));
}

/* Floating cards on hero */
.float-card {
  position: absolute;
  background: rgba(255,255,255,0.96);
  color: var(--ink);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow:
    0 22px 50px -16px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.4);
  backdrop-filter: blur(8px);
  z-index: 3;
  animation: floaty 6s ease-in-out infinite;
}
.float-card.dark {
  background: rgba(15, 22, 50, 0.85);
  color: var(--on-dark);
  box-shadow:
    0 22px 50px -16px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(255,255,255,0.10);
}

.fc-savings {
  top: 8%; left: 6%;
  animation-delay: -1s;
  width: 200px;
}
.fc-status {
  top: 38%; right: 6%;
  animation-delay: -3s;
  width: 220px;
}
.fc-chart {
  bottom: 6%; left: 6%;
  animation-delay: -2s;
  width: 230px;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { justify-self: center; max-width: 440px; width: 100%; }
  .fc-savings { left: 0; }
  .fc-status { right: 0; }
  .fc-chart { left: 0; }
}

/* ============================================================
   Trust bar marquee
   ============================================================ */
.trust {
  background: var(--bg-light);
  padding: 36px 0 24px;
  border-bottom: 1px solid rgba(11,21,48,0.06);
}
.trust-label {
  text-align: center;
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 22px;
  opacity: 0.7;
}
.marquee {
  display: flex; gap: 64px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.marquee-track {
  display: flex; gap: 64px;
  animation: scroll 30s linear infinite;
  flex-shrink: 0;
}
.marquee-item {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink-soft);
  opacity: 0.55;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 12px;
}
.marquee-item .dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   Section heads
   ============================================================ */
.sec-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.sec-head .eyebrow { color: var(--accent); }
.sec-head h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 12px 0 0;
  font-weight: 700;
  text-wrap: balance;
}
.sec-head h2 .flair { color: var(--accent-2); }
.sec-head .sub {
  color: var(--ink-soft);
  font-size: 18px;
  max-width: 440px;
  justify-self: end;
}
@media (max-width: 760px) {
  .sec-head { grid-template-columns: 1fr; }
  .sec-head .sub { justify-self: start; }
}

/* On dark sections, head colors invert */
.on-dark { color: var(--on-dark); }
.on-dark h2 { color: var(--on-dark); }
.on-dark .sub { color: var(--on-dark-soft); }
.on-dark .eyebrow { color: var(--accent); }

/* ============================================================
   Services
   ============================================================ */
.services {
  background: var(--bg-light);
  position: relative;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.svc {
  position: relative;
  background: var(--paper);
  border-radius: 22px;
  padding: 28px;
  border: 1px solid rgba(11,21,48,0.06);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex; flex-direction: column;
  min-height: 280px;
}
.svc:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px -28px rgba(11,21,48,0.18);
  border-color: rgba(11,21,48,0.10);
}
.svc-num {
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  opacity: 0.6;
}
.svc h3 {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 14px 0 10px;
  font-weight: 700;
  color: var(--ink);
}
.svc p {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0 0 22px;
  line-height: 1.5;
}
.svc-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  color: var(--ink);
}
.svc-link svg { transition: transform 0.2s; }
.svc:hover .svc-link svg { transform: translateX(4px); }
.svc-glyph {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
}
.svc.dark {
  background: linear-gradient(160deg, var(--bg-2), var(--bg));
  color: var(--on-dark);
  border-color: rgba(255,255,255,0.08);
}
.svc.dark h3 { color: var(--on-dark); }
.svc.dark p { color: var(--on-dark-soft); }
.svc.dark .svc-num { color: var(--on-dark-faint); }
.svc.dark .svc-link { color: var(--on-dark); }
.svc.accent {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}
.svc.accent .svc-num { color: var(--accent-ink); opacity: 0.6; }
.svc.accent h3 { color: var(--accent-ink); }
.svc.accent p { color: var(--accent-ink); opacity: 0.7; }
.svc.accent .svc-glyph { background: var(--accent-ink); color: var(--accent); }
.svc.accent .svc-link { color: var(--accent-ink); }

.svc.pink {
  background: var(--accent-2);
  color: #ffffff;
  border-color: transparent;
}
.svc.pink .svc-num { color: #ffffff; opacity: 0.7; }
.svc.pink h3 { color: #ffffff; }
.svc.pink p { color: #ffffff; opacity: 0.85; }
.svc.pink .svc-glyph { background: #ffffff; color: var(--accent-2); }
.svc.pink .svc-link { color: #ffffff; }


/* Span widths for varied bento layout */
.svc.s-3 { grid-column: span 3; }
.svc.s-2 { grid-column: span 2; }
.svc.s-4 { grid-column: span 4; }

@media (max-width: 980px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .svc, .svc.s-2, .svc.s-3, .svc.s-4 { grid-column: span 1; }
}

/* ============================================================
   Process
   ============================================================ */
.process {
  background: linear-gradient(180deg, var(--grad-2) 0%, var(--grad-1) 100%);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
}
.process::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 40% at 80% 30%, var(--grad-glow-a) 0%, transparent 60%),
    radial-gradient(40% 40% at 15% 80%, var(--grad-glow-b) 0%, transparent 60%);
  pointer-events: none;
}
.process .container { position: relative; z-index: 2; }
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
  position: relative;
}
.step {
  position: relative;
  padding: 28px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  backdrop-filter: blur(8px);
}
.step-num {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin-bottom: 16px;
}
.step h3 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 8px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.step p {
  color: var(--on-dark-soft);
  font-size: 15px;
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 880px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .steps { grid-template-columns: 1fr; }
}

/* ============================================================
   Why us / Image showcase
   ============================================================ */
.why {
  background: var(--bg-light);
}
.why-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.why-text h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 16px 0 22px;
  font-weight: 700;
  text-wrap: balance;
}
.why-text h2 .flair { color: var(--accent-2); }
.why-text > p {
  color: var(--ink-soft);
  font-size: 18px;
  max-width: 520px;
  margin-bottom: 32px;
}
.why-list { display: grid; gap: 14px; margin: 0 0 32px; padding: 0; list-style: none; }
.why-list li {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 16px;
}
.why-list li .check {
  flex: none;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
  font-weight: 800;
}
.why-list li strong { color: var(--ink); display: block; margin-bottom: 2px; }
.why-list li span { color: var(--ink-soft); font-size: 15px; }

.why-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 28px;
  overflow: hidden;
  background: var(--bg-3);
  box-shadow: 0 30px 60px -25px rgba(11,21,48,0.25);
}
.why-visual img {
  width: 100%; height: 100%; object-fit: cover;
}
.why-stat {
  position: absolute;
  bottom: 24px; left: 24px;
  background: rgba(255,255,255,0.96);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 18px 40px -10px rgba(11,21,48,0.25);
}
.why-stat .big {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.why-stat .lbl { font-family: var(--font-secondary); font-size: 12px; color: var(--ink-soft); margin-top: 4px; letter-spacing: 0.04em; }

.why-stat-2 {
  position: absolute;
  top: 24px; right: 24px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 18px;
  padding: 12px 16px;
  font-weight: 600;
  display: inline-flex; gap: 10px; align-items: center;
  box-shadow: 0 18px 40px -10px rgba(11,21,48,0.3);
}

@media (max-width: 880px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Testimonials
   ============================================================ */
.testi {
  background: var(--bg-light-2);
}
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.testi-card {
  background: var(--paper);
  border-radius: 22px;
  padding: 28px;
  border: 1px solid rgba(11,21,48,0.06);
  display: flex; flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -28px rgba(11,21,48,0.2);
}
.testi-card.featured {
  background: linear-gradient(160deg, var(--bg-2), var(--bg));
  color: var(--on-dark);
  border-color: transparent;
}
.testi-stars { display: flex; gap: 2px; margin-bottom: 14px; color: var(--accent); }
.testi-card.featured .testi-stars { color: var(--accent); }
.testi-q {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
  color: inherit;
  font-weight: 500;
}
.testi-author {
  display: flex; gap: 12px; align-items: center;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(11,21,48,0.08);
}
.testi-card.featured .testi-author {
  border-top-color: rgba(255,255,255,0.1);
}
.testi-avatar {
  width: 44px; height: 44px; border-radius: 999px;
  background-size: cover; background-position: center;
  flex: none;
}
.testi-name { font-weight: 600; font-size: 15px; }
.testi-role { font-family: var(--font-secondary); font-size: 13px; opacity: 0.65; margin-top: 2px; }

@media (max-width: 880px) {
  .testi-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Booking CTA
   ============================================================ */
.book {
  background:
    radial-gradient(60% 60% at 20% 30%, var(--grad-glow-a) 0%, transparent 60%),
    radial-gradient(40% 50% at 80% 70%, var(--grad-glow-b) 0%, transparent 60%),
    linear-gradient(140deg, var(--grad-1), var(--grad-2) 60%, var(--grad-3));
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
}
.book-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.book-text h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 14px 0 22px;
  font-weight: 700;
  text-wrap: balance;
}
.book-text h2 .flair { color: var(--accent); }
.book-text > p {
  color: var(--on-dark-soft);
  font-size: 18px;
  max-width: 480px;
  margin-bottom: 28px;
}
.book-bullets { display: grid; gap: 12px; padding: 0; margin: 0 0 30px; list-style: none; }
.book-bullets li {
  display: flex; gap: 12px; align-items: center;
  color: var(--on-dark-soft); font-size: 15px;
}
.book-bullets li .tick {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
  flex: none;
}

.book-form {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: 28px;
  backdrop-filter: blur(8px);
}
.book-form h3 {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0 0 6px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.book-form .small { color: var(--on-dark-faint); font-size: 14px; margin: 0 0 22px; }
.field { margin-bottom: 14px; display: grid; gap: 6px; }
.field label { font-size: 13px; color: var(--on-dark-soft); }
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: var(--on-dark);
  outline: none;
  transition: border-color 0.18s, background 0.18s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--on-dark-faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,0.10);
}
.book-form .btn { width: 100%; justify-content: center; margin-top: 8px; }
.book-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.success {
  text-align: center;
  padding: 18px 0;
}
.success .ok {
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 28px;
  margin: 0 auto 14px;
}

@media (max-width: 980px) {
  .book-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer
   ============================================================ */
footer {
  background: var(--bg);
  color: var(--on-dark-soft);
  padding: 64px 0 32px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 56px;
}
.foot-brand img { height: 42px; margin-bottom: 18px; }
.foot-brand p { font-size: 14px; max-width: 320px; line-height: 1.5; }
.foot-col h4 {
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin: 8px 0 18px;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-col li a {
  font-size: 14px;
  color: var(--on-dark-soft);
  transition: color 0.18s;
}
.foot-col li a:hover { color: var(--accent); }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  color: var(--on-dark-faint);
}
.foot-socials { display: flex; gap: 10px; }
.foot-socials a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.18s, border-color 0.18s;
}
.foot-socials a:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

@media (max-width: 780px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-bottom { flex-direction: column; gap: 14px; }
}

/* ============================================================
   Scroll reveal — transform-only "rise in" enhancement.
   Content is ALWAYS visible (opacity stays 1) so a paused/frozen
   animation never leaves the page blank.
   ============================================================ */
.reveal { opacity: 1; }
.reveal.in {
  animation: revealIn 0.7s cubic-bezier(.2,.7,.2,1);
}
@keyframes revealIn {
  from { transform: translateY(20px); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .float-card, .marquee-track { animation: none !important; }
  .reveal, .reveal.in { animation: none !important; }
}

/* Motion off / subtle (Tweaks-driven) */
body.motion-still .float-card,
body.motion-still .marquee-track { animation: none !important; }
body.motion-still .reveal,
body.motion-still .reveal.in { animation: none !important; }
body.motion-still .btn:hover,
body.motion-still .svc:hover,
body.motion-still .testi-card:hover { transform: none !important; }

body[data-motion="subtle"] .float-card { animation-duration: 12s; }
body[data-motion="subtle"] .marquee-track { animation-duration: 60s; }


/* ============================================================
   Interior pages — sub-hero, FAQ, pricing tiers, team grid,
   comparison table
   ============================================================ */

/* Sub-hero (smaller than homepage hero) */
.subhero {
  position: relative;
  padding: 160px 0 90px;
  color: var(--on-dark);
  background:
    radial-gradient(60% 50% at 20% 30%, var(--grad-glow-c) 0%, transparent 60%),
    radial-gradient(50% 50% at 85% 20%, var(--grad-glow-a) 0%, transparent 55%),
    linear-gradient(180deg, var(--grad-1) 0%, var(--grad-2) 80%, var(--grad-3) 100%);
  overflow: hidden;
  isolation: isolate;
}
.subhero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 100px;
  background: linear-gradient(180deg, transparent, var(--bg-light));
  z-index: 4;
}
.subhero .container { position: relative; z-index: 2; }
.subhero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 18px 0 22px;
  color: var(--on-dark);
  text-wrap: balance;
  max-width: 18ch;
}
.subhero h1 .flair { color: var(--accent-2); font-family: var(--font-flair); font-style: italic; font-weight: 500; }
.subhero h1 .accent-word { color: var(--accent); }
.subhero p.lede {
  font-size: 19px;
  color: var(--on-dark-soft);
  max-width: 600px;
  margin: 0 0 32px;
  line-height: 1.55;
}
.subhero .crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--on-dark-faint);
  margin-bottom: 12px;
}
.subhero .crumb a { color: var(--on-dark-soft); }
.subhero .crumb a:hover { color: var(--on-dark); }

/* Pricing tiers */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.tier {
  position: relative;
  background: var(--paper);
  border-radius: 22px;
  padding: 36px 32px;
  border: 1px solid rgba(11,21,48,0.08);
  display: flex; flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tier:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px -28px rgba(11,21,48,0.2);
}
.tier.featured {
  background: linear-gradient(160deg, var(--bg-2), var(--bg));
  color: var(--on-dark);
  border-color: transparent;
  transform: translateY(-12px);
  box-shadow: 0 24px 60px -20px rgba(11,21,48,0.4);
}
.tier .badge {
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tier h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.tier .tagline {
  font-family: var(--font-secondary);
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.tier.featured .tagline { color: var(--on-dark-soft); }
.tier .price {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 22px;
}
.tier .price .num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.tier.featured .price .num { color: var(--on-dark); }
.tier .price .per {
  font-size: 14px;
  color: var(--ink-soft);
}
.tier.featured .price .per { color: var(--on-dark-soft); }
.tier ul {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: grid; gap: 12px;
  flex: 1;
}
.tier li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px;
  color: var(--ink-soft);
}
.tier.featured li { color: var(--on-dark-soft); }
.tier li .tick {
  flex: none;
  width: 22px; height: 22px; border-radius: 999px;
  background: rgba(155,204,47,0.18);
  color: #5e9410;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px;
  margin-top: 2px;
}
.tier.featured li .tick {
  background: var(--accent);
  color: var(--accent-ink);
}
.tier .btn { justify-content: center; width: 100%; }

@media (max-width: 880px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .tier.featured { transform: none; }
}

/* Comparison table */
.compare {
  margin-top: 64px;
  background: var(--paper);
  border-radius: 22px;
  padding: 8px;
  border: 1px solid rgba(11,21,48,0.08);
  overflow: hidden;
}
.compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.compare th, .compare td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(11,21,48,0.06);
}
.compare tr:last-child td { border-bottom: none; }
.compare thead th {
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  background: var(--bg-light-2);
  border-bottom: 1px solid rgba(11,21,48,0.08);
}
.compare thead th:first-child { border-radius: 14px 0 0 0; }
.compare thead th:last-child { border-radius: 0 14px 0 0; }
.compare td:first-child {
  font-weight: 600;
  color: var(--ink);
}
.compare td.us {
  background: rgba(155,204,47,0.06);
  font-weight: 600;
  color: #4a7308;
}
.compare td.no { color: #b54343; }
.compare td.ok { color: #5e9410; font-weight: 600; }
.compare .check { color: #5e9410; font-weight: 800; }
.compare .x { color: #b54343; opacity: 0.5; }

@media (max-width: 760px) {
  .compare { overflow-x: auto; }
  .compare table { min-width: 600px; }
}

/* FAQ accordion */
.faq-list {
  margin-top: 48px;
  display: grid;
  gap: 12px;
  max-width: 820px;
}
.faq-item {
  background: var(--paper);
  border: 1px solid rgba(11,21,48,0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-item:hover { border-color: rgba(11,21,48,0.16); }
.faq-item[open] {
  box-shadow: 0 18px 40px -22px rgba(11,21,48,0.15);
  border-color: rgba(11,21,48,0.12);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink-soft);
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--bg-light-2);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  transition: transform 0.25s;
}
.faq-item[open] summary::after {
  content: "−";
  background: var(--accent);
  color: var(--accent-ink);
}
.faq-item .answer {
  padding: 0 24px 24px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
}

/* Service deep-dive (alternating) */
.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 90px;
}
.service-block:last-child { margin-bottom: 0; }
.service-block:nth-child(even) .service-block-text { order: 2; }
.service-block:nth-child(even) .service-block-visual { order: 1; }
.service-block-text .num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-2);
  letter-spacing: 0.08em;
}
.service-block-text h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 10px 0 18px;
  font-weight: 700;
  text-wrap: balance;
}
.service-block-text > p {
  color: var(--ink-soft);
  font-size: 17px;
  margin: 0 0 24px;
  max-width: 520px;
}
.service-block-text .features {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: grid; gap: 10px;
}
.service-block-text .features li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 15px;
  color: var(--ink-soft);
}
.service-block-text .features li::before {
  content: "✓";
  flex: none;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
  margin-top: 1px;
}
.service-block-visual {
  position: relative;
  aspect-ratio: 5/4;
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg-3);
  box-shadow: 0 28px 60px -28px rgba(11,21,48,0.25);
}
.service-block-visual img {
  width: 100%; height: 100%; object-fit: cover;
}
.service-block-visual .pill {
  position: absolute;
  bottom: 20px; left: 20px;
  background: rgba(255,255,255,0.96);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

@media (max-width: 880px) {
  .service-block { grid-template-columns: 1fr; gap: 32px; margin-bottom: 64px; }
  .service-block:nth-child(even) .service-block-text { order: 0; }
  .service-block:nth-child(even) .service-block-visual { order: 0; }
}

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.team-card {
  background: var(--paper);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(11,21,48,0.08);
  transition: transform 0.25s, box-shadow 0.25s;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -28px rgba(11,21,48,0.2);
}
.team-photo {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-3);
}
.team-info { padding: 20px 22px 24px; }
.team-info h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--ink);
}
.team-role {
  font-family: var(--font-secondary);
  font-size: 13px;
  color: var(--accent-2);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.team-bio {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 980px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .team-grid { grid-template-columns: 1fr; } }

/* Stats strip */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 64px;
  padding: 40px 0;
  border-top: 1px solid rgba(11,21,48,0.08);
  border-bottom: 1px solid rgba(11,21,48,0.08);
}
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(44px, 4.5vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat .num .flair { color: var(--accent-2); }
.stat .lbl {
  font-family: var(--font-secondary);
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 8px;
  letter-spacing: 0.04em;
}
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 28px; } }

/* Values grid (About page) */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.value-card {
  background: var(--paper);
  border-radius: 22px;
  padding: 32px;
  border: 1px solid rgba(11,21,48,0.08);
  transition: transform 0.25s, box-shadow 0.25s;
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -28px rgba(11,21,48,0.2);
}
.value-card .icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.value-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--ink);
}
.value-card p {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 880px) { .values-grid { grid-template-columns: 1fr; } }

/* Contact split layout */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  margin-top: 56px;
  align-items: start;
}
.contact-info { display: grid; gap: 24px; }
.contact-card {
  background: var(--paper);
  border-radius: 18px;
  padding: 24px;
  border: 1px solid rgba(11,21,48,0.08);
}
.contact-card .lbl {
  font-family: var(--font-secondary);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.contact-card .val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.contact-card .sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 4px;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Light-theme booking form variant for contact page */
.book-form.light {
  background: var(--paper);
  border: 1px solid rgba(11,21,48,0.08);
  color: var(--ink);
}
.book-form.light h3 { color: var(--ink); }
.book-form.light .small { color: var(--ink-soft); }
.book-form.light .field label { color: var(--ink-soft); }
.book-form.light .field input,
.book-form.light .field select,
.book-form.light .field textarea {
  background: var(--bg-light-2);
  color: var(--ink);
  border: 1px solid rgba(11,21,48,0.08);
}
.book-form.light .field input::placeholder,
.book-form.light .field textarea::placeholder { color: var(--ink-soft); }
.book-form.light .field input:focus,
.book-form.light .field select:focus,
.book-form.light .field textarea:focus {
  border-color: var(--accent);
  background: #fff;
}


/* Active nav-link state for interior pages */
.nav-link.active {
  color: var(--on-dark);
  background: rgba(255,255,255,0.10);
}


/* ============================================================
   Quality Review — Books Health Report card
   ============================================================ */
.review-visual { display: flex; align-items: center; justify-content: center; }
.report {
  width: 100%;
  background: var(--paper);
  border-radius: 24px;
  padding: 28px;
  border: 1px solid rgba(11,21,48,0.08);
  box-shadow: 0 30px 60px -28px rgba(11,21,48,0.22);
}
.report-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(11,21,48,0.08);
  margin-bottom: 18px;
}
.report-kicker {
  font-family: var(--font-secondary);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.report-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); margin-top: 4px;
}
.report-score {
  display: flex; align-items: baseline;
  background: var(--accent-2); color: #fff;
  border-radius: 16px; padding: 10px 16px; flex: none;
}
.score-num { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; }
.score-den { font-size: 14px; opacity: 0.85; margin-left: 2px; }
.report-rows { display: grid; gap: 12px; }
.report-row {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--ink);
}
.report-row .rtag {
  margin-left: auto;
  font-family: var(--font-secondary);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-2); background: rgba(231,85,158,0.12);
  padding: 4px 10px; border-radius: 999px;
}
.report-row .rtag.ok { color: #5e9410; background: rgba(155,204,47,0.18); }
.rdot { width: 10px; height: 10px; border-radius: 999px; flex: none; }
.rdot.red { background: #d8456e; }
.rdot.amber { background: #e0a93b; }
.rdot.green { background: #7bb32b; }
.report-foot {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(11,21,48,0.08);
  font-size: 13px; color: var(--ink-soft);
}


/* ============================================================
   Pricing page (redesign)
   ============================================================ */
.pr-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
@media(max-width:940px){.pr-hero{grid-template-columns:1fr;gap:40px}}

/* Sample proposal card */
.proposal{background:var(--paper);border-radius:24px;padding:26px;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 80px -30px rgba(0,0,0,.55)}
.proposal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:18px;border-bottom:1px solid rgba(11,21,48,.08)}
.proposal-kicker{font-family:var(--font-secondary);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.proposal-title{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-top:5px}
.proposal-badge{flex:none;font-family:var(--font-secondary);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--cta);padding:6px 12px;border-radius:999px}
.p-rows{display:grid;gap:2px;margin-top:6px}
.p-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid rgba(11,21,48,.06);font-size:14px;color:var(--ink)}
.p-row .p-name{font-weight:600}
.p-row .p-tag{margin-left:auto;flex:none;font-family:var(--font-secondary);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);background:var(--bg-light-2);padding:4px 10px;border-radius:999px}
.p-row .p-tag.on{color:#4a7308;background:rgba(155,204,47,.2)}
.p-row .p-tag.once{color:var(--accent-2);background:rgba(231,85,158,.12)}
.p-total{display:flex;align-items:center;gap:14px;margin-top:16px;padding:16px 18px;border-radius:16px;background:linear-gradient(140deg,var(--bg-2),var(--bg));color:var(--on-dark)}
.p-total .lbl{font-family:var(--font-secondary);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-soft)}
.p-total .val{margin-left:auto;font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--accent)}
.proposal-foot{margin-top:14px;font-size:12.5px;color:var(--ink-soft);line-height:1.5}

/* Service picker */
.picker{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:start;margin-top:48px}
@media(max-width:940px){.picker{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;align-items:center;gap:11px;padding:15px 20px;border-radius:16px;background:var(--paper);border:1px solid rgba(11,21,48,.1);font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;transition:box-shadow .18s,transform .18s}
.chip:hover{transform:translateY(-2px);box-shadow:0 16px 34px -20px rgba(11,21,48,.28)}
.chip .box{width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(11,21,48,.22);display:flex;align-items:center;justify-content:center;flex:none}
.chip .box svg{opacity:0}
.chip[aria-pressed="true"]{background:var(--bg-3);border-color:transparent;color:#fff}
.chip[aria-pressed="true"] .box{background:var(--accent);border-color:var(--accent)}
.chip[aria-pressed="true"] .box svg{opacity:1;color:var(--accent-ink)}
.picker-note{margin:20px 0 0;font-size:14px;color:var(--ink-soft)}
.summary{background:linear-gradient(160deg,var(--bg-2),var(--bg));color:var(--on-dark);border-radius:22px;padding:28px}
.summary h3{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
.summary .cnt{font-family:var(--font-secondary);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.summary-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:16px}
.summary-list li{display:grid;gap:5px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.summary-list li:last-child{border-bottom:none;padding-bottom:0}
.summary-list .s-top{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.summary-list .s-type{margin-left:auto;flex:none;font-family:var(--font-secondary);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);background:rgba(155,204,47,.16);padding:3px 9px;border-radius:999px}
.summary-list .s-det{font-size:13.5px;color:var(--on-dark-soft);line-height:1.5}
.summary .empty{color:var(--on-dark-faint);font-size:14.5px;margin:18px 0 0;line-height:1.6}
.summary .btn{width:100%;justify-content:center;margin-top:24px}

/* Pricing factors */
.factors{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:48px}
.factor{grid-column:span 2;background:var(--paper);border-radius:20px;padding:26px;border:1px solid rgba(11,21,48,.07);transition:transform .25s,box-shadow .25s}
.factor:hover{transform:translateY(-5px);box-shadow:0 28px 60px -30px rgba(11,21,48,.2)}
.factor:nth-child(4),.factor:nth-child(5){grid-column:span 3}
.factor .fn{font-family:var(--font-display);font-size:34px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--accent-2);opacity:.35}
.factor h3{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.02em;margin:14px 0 8px;color:var(--ink)}
.factor p{font-size:14.5px;color:var(--ink-soft);margin:0;line-height:1.55}
@media(max-width:900px){.factors{grid-template-columns:1fr 1fr}.factor,.factor:nth-child(4),.factor:nth-child(5){grid-column:span 1}}
@media(max-width:560px){.factors{grid-template-columns:1fr}}

/* Always-included band */
.incl{background:linear-gradient(150deg,var(--grad-1),var(--grad-2) 60%,var(--grad-3));color:var(--on-dark);position:relative;overflow:hidden}
.incl::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 50% at 15% 20%,var(--grad-glow-a) 0%,transparent 60%),radial-gradient(45% 50% at 85% 80%,var(--grad-glow-b) 0%,transparent 60%);pointer-events:none}
.incl .container{position:relative;z-index:2}
.incl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:44px}
.incl-item{padding:24px 20px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.incl-item .ic{width:40px;height:40px;border-radius:12px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.incl-item h4{font-family:var(--font-display);font-size:16.5px;font-weight:600;letter-spacing:-.015em;margin:0;color:var(--on-dark);line-height:1.3}
@media(max-width:900px){.incl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.incl-grid{grid-template-columns:1fr}}

/* Proposal timeline */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;counter-reset:tl}
.tl-step{position:relative;background:var(--paper);border-radius:20px;padding:30px 26px;border:1px solid rgba(11,21,48,.07)}
.tl-step .tln{width:38px;height:38px;border-radius:999px;background:var(--cta);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:16px;margin-bottom:18px}
.tl-step h3{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.tl-step p{font-size:14.5px;color:var(--ink-soft);margin:0;line-height:1.55}
@media(max-width:880px){.timeline{grid-template-columns:1fr}}

/* Why clients prefer */
.prefer{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.prefer>div{padding:24px;border-radius:18px;background:var(--paper);border:1px solid rgba(11,21,48,.07)}
.prefer .pn{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.prefer .pd{font-size:13.5px;color:var(--ink-soft);margin-top:6px;line-height:1.5}
@media(max-width:880px){.prefer{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.prefer{grid-template-columns:1fr}}


/* ============================================================
   SERVICES - cursor-driven hover fill (added 2026-08-18)
   Every card fills navy on hover; .is-accent fills pink.
   ============================================================ */
.services-grid .svc{
  isolation:isolate;
  transition:transform .4s cubic-bezier(.22,1,.36,1),
             box-shadow .4s cubic-bezier(.22,1,.36,1),
             border-color .4s ease;
}
.services-grid .svc::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(160deg,var(--bg-2),var(--bg));
  clip-path:circle(0% at var(--mx,50%) var(--my,100%));
  transition:clip-path .6s cubic-bezier(.22,1,.36,1);
}
.services-grid .svc.is-accent::before{
  background:linear-gradient(160deg,#F06FB0,var(--accent-2));
}
.services-grid .svc:hover::before,
.services-grid .svc:focus-within::before{
  clip-path:circle(140% at var(--mx,50%) var(--my,100%));
}
.services-grid .svc h3,
.services-grid .svc p,
.services-grid .svc .svc-num,
.services-grid .svc .svc-link{ transition:color .35s ease .06s; }
.services-grid .svc:hover h3,
.services-grid .svc:focus-within h3,
.services-grid .svc:hover .svc-link,
.services-grid .svc:focus-within .svc-link{ color:var(--on-dark); }
.services-grid .svc:hover p,
.services-grid .svc:focus-within p{ color:var(--on-dark-soft); }
.services-grid .svc:hover .svc-num,
.services-grid .svc:focus-within .svc-num{ color:var(--on-dark-faint); }
.services-grid .svc:hover,
.services-grid .svc:focus-within{ border-color:rgba(255,255,255,.10); }
.services-grid .svc.is-accent:hover p,
.services-grid .svc.is-accent:focus-within p{ color:rgba(255,255,255,.82); }
.services-grid .svc.is-accent:hover .svc-num,
.services-grid .svc.is-accent:focus-within .svc-num{ color:rgba(255,255,255,.62); }
.services-grid .svc .svc-glyph{
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),
             background .35s ease, color .35s ease;
}
.services-grid .svc:hover .svc-glyph,
.services-grid .svc:focus-within .svc-glyph{ transform:rotate(-8deg) scale(1.08); }
/* Client: the icon chip stays green when the accent card fills pink. */
.services-grid .svc.is-accent:hover .svc-glyph,
.services-grid .svc.is-accent:focus-within .svc-glyph{ background:var(--accent); color:var(--accent-ink); }

@media (prefers-reduced-motion:reduce){
  .services-grid .svc,
  .services-grid .svc::before,
  .services-grid .svc .svc-glyph{ transition-duration:.01ms !important; }
}


/* ============================================================
   ROUND 2 - client revisions (2026-08-19)
   ============================================================ */

/* Services page: italic phrases in the service-block headings pick up the
   pink accent, matching the home / pricing / about pages. */
.service-block-text h2 .flair{ color:var(--accent-2); }

/* About page: team grid reflows to 3 columns after removing a member. */
.team-grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .team-grid{ grid-template-columns:1fr 1fr; } }

/* Pricing "How we price": 01-05 become dark-blue circles, matching the
   numbered circles in the "Getting your number" timeline. */
.factor .fn{
  width:44px;
  height:44px;
  border-radius:999px;
  background:var(--cta);
  color:#fff;
  opacity:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  letter-spacing:0;
}

/* Pricing "Getting your number": same hover lift as the .factor cards. */
.tl-step{ transition:transform .25s, box-shadow .25s; }
.tl-step:hover{
  transform:translateY(-5px);
  box-shadow:0 28px 60px -30px rgba(11,21,48,.20);
}

/* Nav "Upload Files" button: hidden below 880px, where .nav-links already
   collapse and the logo + primary CTA need the full bar. Mobile users reach
   the same link from the footer Resources column. */
@media (max-width:880px){ .nav-upload{ display:none; } }

/* Footer build credit: readable as a link without shouting. */
.foot-bottom .credit-link{ color:var(--on-dark-soft); text-decoration:none; transition:color .2s; }
.foot-bottom .credit-link:hover,
.foot-bottom .credit-link:focus-visible{ color:var(--on-dark); text-decoration:underline; }


/* ============================================================
   MOBILE NAVIGATION - hamburger + slide-down panel (2026-08-20)
   Below 880px .nav-links are hidden; this restores access to
   every page from the header on phones and small tablets.
   ============================================================ */
.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  padding:0;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.nav-toggle:hover{ background:rgba(255,255,255,.14); }
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  border-radius:2px;
  background:var(--on-dark);
  transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-mobile{
  display:none;
  max-height:0;
  overflow:hidden;
  transition:max-height .35s cubic-bezier(.22,1,.36,1);
}
.nav-mobile-inner{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:12px;
  padding-top:14px;
  padding-bottom:20px;
  border-top:1px solid rgba(255,255,255,.10);
}
.nav-mobile a{
  padding:13px 14px;
  border-radius:12px;
  color:var(--on-dark-soft);
  font-size:16px;
  font-weight:500;
  text-decoration:none;
  transition:color .18s, background .18s;
}
.nav-mobile a:hover,
.nav-mobile a:focus-visible{ color:var(--on-dark); background:rgba(255,255,255,.07); }
.nav-mobile a.is-cta{ color:var(--on-dark); font-weight:600; }
.nav-mobile-sep{ height:1px; background:rgba(255,255,255,.10); margin:10px 14px; }

@media (max-width:880px){
  .nav-toggle{ display:flex; }
  .nav-mobile{ display:block; }
  .nav-inner{ gap:12px; }
  .nav-cta .btn{ padding:11px 16px; font-size:14px; }
  .nav.is-open{
    background:color-mix(in oklab, var(--bg) 94%, transparent);
    backdrop-filter:blur(14px);
  }
  .nav.is-open .nav-mobile{ max-height:78vh; overflow-y:auto; }
}

@media (prefers-reduced-motion:reduce){
  .nav-toggle span,
  .nav-mobile{ transition-duration:.01ms !important; }
}

/* ============================================================
   ROUND 3 - client revisions (2026-09-10)
   ============================================================ */

/* ------------------------------------------------------------
   Pricing "How we price" - 01-05 now mirror the home page Services
   numbering (small label numeral) instead of solid blue circles.
   ------------------------------------------------------------ */
.factor .fn{
  width:auto;
  height:auto;
  border-radius:0;
  background:none;
  display:block;
  font-family:var(--font-secondary);
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  color:var(--ink-soft);
  opacity:.6;
}

/* ------------------------------------------------------------
   Cursor-driven colour fill - the Services-card effect, extended to
   the process steps (home + services), the pricing "How we price"
   factors and the "What's included" tiles. The fill grows from
   wherever the cursor entered the card.
   ------------------------------------------------------------ */
.steps .step,
.factors .factor,
.incl-grid .incl-item{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.22,1,.36,1),
             box-shadow .4s cubic-bezier(.22,1,.36,1),
             border-color .4s ease;
}
.steps .step::before,
.factors .factor::before,
.incl-grid .incl-item::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  clip-path:circle(0% at var(--mx,50%) var(--my,100%));
  transition:clip-path .6s cubic-bezier(.22,1,.36,1);
}
.steps .step:hover::before,
.steps .step:focus-within::before,
.factors .factor:hover::before,
.factors .factor:focus-within::before,
.incl-grid .incl-item:hover::before,
.incl-grid .incl-item:focus-within::before{
  clip-path:circle(140% at var(--mx,50%) var(--my,100%));
}
.steps .step:hover,
.factors .factor:hover,
.incl-grid .incl-item:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 60px -28px rgba(11,21,48,.28);
}

/* --- Light section (pricing factors): fill navy, exactly like Services --- */
.factors .factor::before{
  background:linear-gradient(160deg,var(--bg-2),var(--bg));
}
.factors .factor:nth-child(2)::before{
  background:linear-gradient(160deg,#F06FB0,var(--accent-2));
}
.factors .factor h3,
.factors .factor p,
.factors .factor .fn{ transition:color .35s ease .06s; }
.factors .factor:hover h3,
.factors .factor:focus-within h3{ color:var(--on-dark); }
.factors .factor:hover p,
.factors .factor:focus-within p{ color:var(--on-dark-soft); }
.factors .factor:hover .fn,
.factors .factor:focus-within .fn{ color:rgba(255,255,255,.62); opacity:1; }

/* --- Dark sections (process steps + included tiles): fill light, so the
       same reveal reads clearly against the navy --- */
.steps .step::before,
.incl-grid .incl-item::before{
  background:linear-gradient(160deg,#ffffff,#eaf0f7);
}
.steps .step:nth-child(2)::before,
.incl-grid .incl-item:nth-child(2)::before{
  background:linear-gradient(160deg,#F06FB0,var(--accent-2));
}
.steps .step h3,
.steps .step p,
.steps .step .step-num,
.incl-grid .incl-item h4{ transition:color .35s ease .06s; }
.incl-grid .incl-item .ic{
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),
             background .35s ease, color .35s ease;
}
.steps .step:hover,
.steps .step:focus-within,
.incl-grid .incl-item:hover,
.incl-grid .incl-item:focus-within{ border-color:rgba(255,255,255,.3); }

.steps .step:hover h3,
.steps .step:focus-within h3{ color:var(--ink); }
.steps .step:hover p,
.steps .step:focus-within p{ color:var(--ink-soft); }
.steps .step:hover .step-num,
.steps .step:focus-within .step-num{ color:var(--accent-2); opacity:.5; }

.steps .step:nth-child(2):hover h3,
.steps .step:nth-child(2):focus-within h3{ color:#fff; }
.steps .step:nth-child(2):hover p,
.steps .step:nth-child(2):focus-within p{ color:rgba(255,255,255,.85); }
.steps .step:nth-child(2):hover .step-num,
.steps .step:nth-child(2):focus-within .step-num{ color:rgba(255,255,255,.7); opacity:1; }

.incl-grid .incl-item:hover h4,
.incl-grid .incl-item:focus-within h4{ color:var(--ink); }
.incl-grid .incl-item:hover .ic,
.incl-grid .incl-item:focus-within .ic{ transform:rotate(-8deg) scale(1.08); }
.incl-grid .incl-item:nth-child(2):hover h4,
.incl-grid .incl-item:nth-child(2):focus-within h4{ color:#fff; }
.incl-grid .incl-item:nth-child(2):hover .ic,
.incl-grid .incl-item:nth-child(2):focus-within .ic{ background:#fff; color:var(--accent-2); }



/* ------------------------------------------------------------
   Contact page - phone / fax / hours / mailing address each get
   their own card, paired two-up beside the booking widget.
   ------------------------------------------------------------ */
.contact-info{
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-content:start;
}
.contact-info .cc-wide{ grid-column:1 / -1; }
.contact-card .val a{ color:inherit; text-decoration:none; }
.contact-card .val a:hover{ color:var(--accent-2); }
@media (max-width:520px){
  .contact-info{ grid-template-columns:1fr; }
}


/* About page - founder portrait is framed from the top so her face is never
   cropped by the fixed-height visual. */
.why-visual img.about-portrait{ object-position:50% 6%; }


/* ------------------------------------------------------------
   Nav - transparent over the hero, dark navy bar once scrolled.
   White wordmark and light links in both states.
   ------------------------------------------------------------ */
.nav-logo{ position:relative; }
.nav{
  background:transparent;
}
.nav.scrolled{
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 18px 40px -34px rgba(0,0,0,.65);
}


/* ------------------------------------------------------------
   Resources page - download cards
   ------------------------------------------------------------ */
.res-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:48px;
}
.res-card{
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:1px solid rgba(11,21,48,.07);
  border-radius:22px;
  padding:26px;
  text-decoration:none;
  color:inherit;
  min-height:200px;
}
.res-top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.res-ic{
  width:40px; height:40px; border-radius:12px;
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.res-tag{
  font-family:var(--font-secondary);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  opacity:.75;
}
.res-card h3{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0 0 8px;
  color:var(--ink);
  line-height:1.15;
}
.res-card p{
  font-size:15px;
  color:var(--ink-soft);
  margin:0 0 22px;
  line-height:1.5;
}
.res-link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:14.5px;
  color:var(--cta);
}
@media (max-width:820px){ .res-grid{ grid-template-columns:1fr; } }

/* Same cursor-driven fill as the Services cards. */
.res-grid .res-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.22,1,.36,1),
             box-shadow .4s cubic-bezier(.22,1,.36,1),
             border-color .4s ease;
}
.res-grid .res-card::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(160deg,var(--bg-2),var(--bg));
  clip-path:circle(0% at var(--mx,50%) var(--my,100%));
  transition:clip-path .6s cubic-bezier(.22,1,.36,1);
}
.res-grid .res-card:nth-child(2)::before{
  background:linear-gradient(160deg,#F06FB0,var(--accent-2));
}
.res-grid .res-card:hover::before,
.res-grid .res-card:focus-within::before{
  clip-path:circle(140% at var(--mx,50%) var(--my,100%));
}
.res-grid .res-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 60px -28px rgba(11,21,48,.28);
}
.res-card h3, .res-card p, .res-tag, .res-link, .res-ic{
  transition:color .35s ease .06s, background .35s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.res-grid .res-card:hover h3,
.res-grid .res-card:hover .res-link{ color:var(--on-dark); }
.res-grid .res-card:hover p,
.res-grid .res-card:hover .res-tag{ color:var(--on-dark-soft); }
.res-grid .res-card:hover .res-ic{ transform:rotate(-8deg) scale(1.08); }
.res-grid .res-card:nth-child(2):hover .res-ic{ background:#fff; color:var(--accent-2); }


/* ------------------------------------------------------------
   Blog - index cards, pagination and article body
   ------------------------------------------------------------ */
.post-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.post-card{
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:1px solid rgba(11,21,48,.07);
  border-radius:22px;
  padding:28px;
  text-decoration:none;
  color:inherit;
  min-height:250px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.22,1,.36,1),
             box-shadow .4s cubic-bezier(.22,1,.36,1),
             border-color .4s ease;
}
.post-card::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(160deg,var(--bg-2),var(--bg));
  clip-path:circle(0% at var(--mx,50%) var(--my,100%));
  transition:clip-path .6s cubic-bezier(.22,1,.36,1);
}
.post-card:hover::before,
.post-card:focus-within::before{ clip-path:circle(140% at var(--mx,50%) var(--my,100%)); }
.post-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 60px -28px rgba(11,21,48,.22);
}
.post-meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-secondary);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--ink-soft);
  margin-bottom:14px;
}
.post-cat{
  padding:3px 10px;
  border-radius:999px;
  background:rgba(11,21,48,.06);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:10.5px;
}
.post-card h2{
  font-family:var(--font-display);
  font-size:23px;
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:700;
  margin:0 0 10px;
  color:var(--ink);
}
.post-card p{
  font-size:15px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 22px;
}
.post-link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:14.5px;
  color:var(--cta);
}
.post-card h2,.post-card p,.post-meta,.post-link,.post-cat{
  transition:color .35s ease .06s, background .35s ease;
}
.post-card:hover h2,
.post-card:hover .post-link{ color:var(--on-dark); }
.post-card:hover p,
.post-card:hover .post-meta{ color:var(--on-dark-soft); }
.post-card:hover .post-cat{ background:rgba(255,255,255,.14); color:var(--on-dark-soft); }

.post-nav{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:48px;
  flex-wrap:wrap;
}
.post-nav .page-numbers{
  min-width:42px;
  padding:10px 14px;
  border-radius:999px;
  text-align:center;
  text-decoration:none;
  font-weight:600;
  font-size:14.5px;
  color:var(--ink-soft);
  border:1px solid rgba(11,21,48,.1);
  transition:background .2s,color .2s,border-color .2s;
}
.post-nav .page-numbers:hover{ color:var(--ink); background:rgba(11,21,48,.05); }
.post-nav .page-numbers.current{
  background:var(--cta);
  border-color:transparent;
  color:#fff;
}
@media (max-width:980px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .post-grid{ grid-template-columns:1fr; } }

/* Article body */
.article{
  max-width:760px;
  margin:0 auto;
  font-size:17px;
  line-height:1.7;
  color:var(--ink-soft);
}
.article > *:first-child{ margin-top:0; }
.article p{ margin:0 0 22px; }
.article h2,.article h3,.article h4{
  font-family:var(--font-display);
  color:var(--ink);
  letter-spacing:-.02em;
  line-height:1.2;
  margin:40px 0 14px;
}
.article h2{ font-size:30px; font-weight:700; }
.article h3{ font-size:23px; font-weight:700; }
.article h4{ font-size:19px; font-weight:600; }
.article a{ color:var(--cta); text-decoration:underline; text-underline-offset:3px; }
.article a:hover{ color:var(--accent-2); }
.article ul,.article ol{ margin:0 0 22px; padding-left:22px; }
.article li{ margin-bottom:10px; }
.article img{ max-width:100%; height:auto; border-radius:18px; margin:12px 0 26px; }
.article figure{ margin:12px 0 26px; }
.article figcaption{ font-size:13.5px; color:var(--ink-soft); opacity:.8; margin-top:8px; }
.article blockquote{
  margin:26px 0;
  padding:18px 24px;
  border-left:3px solid var(--accent);
  background:var(--paper);
  border-radius:0 14px 14px 0;
  color:var(--ink);
}
.article blockquote p:last-child{ margin-bottom:0; }
.article iframe{ max-width:100%; border-radius:18px; }
.article table{ width:100%; border-collapse:collapse; margin:0 0 26px; font-size:15px; }
.article th,.article td{ border:1px solid rgba(11,21,48,.1); padding:10px 12px; text-align:left; }

.article-foot{
  max-width:760px;
  margin:56px auto 0;
  padding:28px;
  border-radius:22px;
  background:linear-gradient(160deg,var(--bg-2),var(--bg));
  color:var(--on-dark);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.article-foot .eyebrow{ color:var(--accent); }
.article-foot h3{
  font-family:var(--font-display);
  font-size:23px;
  font-weight:700;
  letter-spacing:-.02em;
  margin:6px 0 0;
  color:var(--on-dark);
}
.article-foot-ctas{ display:flex; gap:10px; flex-wrap:wrap; }
.article-foot .btn-ghost-dark{
  color:var(--on-dark);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
}
.article-foot .btn-ghost-dark:hover{ background:rgba(255,255,255,.08); }


/* Responsive video embeds inside article bodies */
.article .video-embed{
  margin:12px 0 26px;
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:18px;
  overflow:hidden;
  background:#000;
}
.article .video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.article .btn{ text-decoration:none; }


/* ============================================================
   ROUND 4 - client revisions (2026-09-15)
   ============================================================ */

/* Pricing timeline - the 1-2-3 markers now mirror the home page
   Services numbering instead of solid blue circles. */
.tl-step .tln{
  width:auto;
  height:auto;
  border-radius:0;
  background:none;
  display:block;
  font-family:var(--font-secondary);
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  color:var(--ink-soft);
  opacity:.6;
  margin-bottom:12px;
}

/* Next Steps - copy starts at the top of the booking panel, not centred. */
.book-grid{ align-items:start; }

/* Booking widget - the bookme.name embed renders very tall. Scale it down
   on desktop so the whole calendar fits without dominating the section.
   zoom (not transform) so the panel reflows as the widget changes height. */
@media (min-width: 900px){
  .book-form [id^="blab-widget"]{ zoom: 0.7; }
}

/* Contact page - the subhero is short and the card grid below has no
   heading, so the default sub-hero padding left a dead band on load.
   Tighten the gap and the fade on this template only. */
body.page-template-page-contact .subhero{ padding: 128px 0 48px; }
body.page-template-page-contact .subhero::after{ height: 48px; }
body.page-template-page-contact .subhero + .section{ padding-top: 56px; }


/* About "Our story" - the flat-lay is landscape, so this frame drops the
   4:5 portrait crop the founder photo used and shows the whole photo. */
.why-visual:has(.about-portrait){ aspect-ratio: 3 / 2; }
.why-visual img.about-portrait{ height: auto; aspect-ratio: 3 / 2; object-position: 50% 50%; }

/* ...and the founded-date badge sits smaller on the shorter frame, with
   its caption on one line instead of wrapping. */
.why-visual:has(.about-portrait) .why-stat{ padding: 10px 16px; border-radius: 14px; }
.why-visual:has(.about-portrait) .why-stat .big{ font-size: 24px; line-height: 1.05; }
.why-visual:has(.about-portrait) .why-stat .lbl{ font-size: 11px; white-space: nowrap; margin-top: 3px; }

/* Phones - the home Services cards and the About team cards were still
   two across under 500px (a later rule was overriding the single-column
   breakpoints), which squeezed headings and broke words onto their own
   lines. One column on phone widths. */
@media (max-width: 620px){
  .services-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: 1fr; }
}

/* Buttons on the gradients - the CTA fill sits at roughly 1.5:1 against
   the hero ombre and its drop shadow was tinted the same blue, so the
   button edge dissolved. Neutral shadow plus a hairline ring separates it
   at any point of the gradient; the ghost button gets a dark fill and a
   brighter ring so it reads as a button, not a faint outline. */
.btn-primary{
  box-shadow: 0 10px 26px -8px rgba(5,10,24,.55), inset 0 0 0 1px rgba(255,255,255,.28);
}
.btn-primary:hover{
  background: #1570C8;
  box-shadow: 0 16px 34px -10px rgba(5,10,24,.65), inset 0 0 0 1px rgba(255,255,255,.45);
}
.btn-ghost-light{
  background: rgba(11,21,48,.30);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
}
.btn-ghost-light:hover{
  background: rgba(11,21,48,.52);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85);
}

/* Blog grid - nine a page fills complete rows, but the last page of an
   uneven archive can still leave one card alone on its row. Let that
   orphan run the full width so it reads as deliberate. */
@media (min-width: 981px){
  .post-grid > :last-child:nth-child(3n+1){ grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 980px){
  .post-grid > :last-child:nth-child(2n+1){ grid-column: 1 / -1; }
}

/* Touch devices - no hover, so the cursor-driven fill can only appear as a
   stuck state after a tap. Client wants every card to stay in its resting
   look on phones, so the reveal is switched off entirely here (the accent
   cards no longer pre-fill pink either). */
@media (hover: none){
  .services-grid .svc:hover::before,
  .services-grid .svc:focus-within::before,
  .steps .step:hover::before,
  .steps .step:focus-within::before,
  .factors .factor:hover::before,
  .factors .factor:focus-within::before,
  .incl-grid .incl-item:hover::before,
  .incl-grid .incl-item:focus-within::before,
  .res-grid .res-card:hover::before,
  .res-grid .res-card:focus-within::before{ clip-path: circle(0% at 50% 100%); }

  .services-grid .svc:hover,
  .steps .step:hover,
  .factors .factor:hover,
  .incl-grid .incl-item:hover,
  .res-grid .res-card:hover{ transform: none; }

  .services-grid .svc:hover h3, .services-grid .svc:focus-within h3,
  .services-grid .svc:hover .svc-link, .services-grid .svc:focus-within .svc-link,
  .services-grid .svc.is-accent:hover h3, .services-grid .svc.is-accent:focus-within h3,
  .services-grid .svc.is-accent:hover .svc-link, .services-grid .svc.is-accent:focus-within .svc-link{ color: var(--ink); }
  .services-grid .svc:hover p, .services-grid .svc:focus-within p,
  .services-grid .svc.is-accent:hover p, .services-grid .svc.is-accent:focus-within p{ color: var(--ink-soft); }
  .services-grid .svc:hover .svc-num, .services-grid .svc:focus-within .svc-num,
  .services-grid .svc.is-accent:hover .svc-num, .services-grid .svc.is-accent:focus-within .svc-num{ color: var(--ink-soft); }
  .services-grid .svc:hover .svc-glyph, .services-grid .svc:focus-within .svc-glyph,
  .services-grid .svc.is-accent:hover .svc-glyph, .services-grid .svc.is-accent:focus-within .svc-glyph{ background: var(--accent); color: var(--accent-ink); transform: none; }

  .factors .factor:hover h3, .factors .factor:focus-within h3{ color: var(--ink); }
  .factors .factor:hover p, .factors .factor:focus-within p{ color: var(--ink-soft); }
  .factors .factor:hover .fn, .factors .factor:focus-within .fn{ color: var(--ink-soft); opacity: .6; }

  .steps .step:hover h3, .steps .step:focus-within h3,
  .steps .step:nth-child(2):hover h3, .steps .step:nth-child(2):focus-within h3{ color: var(--on-dark); }
  .steps .step:hover p, .steps .step:focus-within p,
  .steps .step:nth-child(2):hover p, .steps .step:nth-child(2):focus-within p{ color: var(--on-dark-soft); }
  .steps .step:hover .step-num, .steps .step:focus-within .step-num,
  .steps .step:nth-child(2):hover .step-num, .steps .step:nth-child(2):focus-within .step-num{ color: var(--accent); opacity: 1; }
  .steps .step:hover, .steps .step:focus-within{ border-color: rgba(255,255,255,.08); }

  .incl-grid .incl-item:hover h4, .incl-grid .incl-item:focus-within h4,
  .incl-grid .incl-item:nth-child(2):hover h4, .incl-grid .incl-item:nth-child(2):focus-within h4{ color: var(--on-dark); }
  .incl-grid .incl-item:hover .ic, .incl-grid .incl-item:focus-within .ic,
  .incl-grid .incl-item:nth-child(2):hover .ic, .incl-grid .incl-item:nth-child(2):focus-within .ic{ background: var(--accent); color: var(--accent-ink); transform: none; }
  .incl-grid .incl-item:hover, .incl-grid .incl-item:focus-within{ border-color: rgba(255,255,255,.1); }

  .res-grid .res-card:hover h3, .res-grid .res-card:focus-within h3,
  .res-grid .res-card:hover .res-link, .res-grid .res-card:focus-within .res-link{ color: var(--ink); }
  .res-grid .res-card:hover p, .res-grid .res-card:focus-within p,
  .res-grid .res-card:hover .res-tag, .res-grid .res-card:focus-within .res-tag{ color: var(--ink-soft); }
  .res-grid .res-card:hover .res-ic, .res-grid .res-card:focus-within .res-ic,
  .res-grid .res-card:nth-child(2):hover .res-ic, .res-grid .res-card:nth-child(2):focus-within .res-ic{ background: var(--accent); color: var(--accent-ink); transform: none; }
}