:root {
  --navy: #233644;
  --navy-deep: #051926;
  --teal: #078396;
  --teal-dark: #056281;
  --teal-light: #53B1CD;
  --teal-pale: #e4f2f5;
  --slate: #CAD9DD;
  --near-black: #171B1B;
  --off-white: #f4f7f6;
  --white: #ffffff;
  --mid: #5a6a72;
  --border: #dde6e8;
  --gold: #c9a84c;
  --gold-light: #e8c97a;
  --dove-pink: #ef529d;
  --neon-green: #1cbc92;
  --gradient-navy-gold: linear-gradient(135deg, var(--navy-deep), var(--gold-light));
  --gradient-navy-teal: linear-gradient(135deg, var(--navy), var(--teal));
  --gradient-teal-gold: linear-gradient(135deg, var(--teal-light), var(--teal), var(--gold-light));
  --gradient-teal-green: linear-gradient(135deg, var(--teal-light), var(--neon-green));
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--off-white);
  color: var(--near-black);
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

img, iframe { max-width: 100%; }
footer, .page-offset, .section, .section-sm, .page-hero,
.hero, .services-strip, .cta-section { max-width: 100%; overflow-x: clip; }
.container, .footer-top, .hero-left, .hero-right, .contact-info,
.booking-embed, .service-block, .pricing-card, .support-card,
.case-card-full, .mini-offer-card, .credential, .value-card,
.pain-card, .proof-stat, .ms-logo-card, .service-media-card,
.ai-inline-media, .ai-wide-media { min-width: 0; }
.footer-col a, .contact-method-text, .contact-method-text p,
.credential-text, .credential-text p, .case-card-body p,
.pricing-card p, .support-card p, .legal-content {
  overflow-wrap: anywhere;
  word-break: normal;
}
body.nav-lock { overflow: hidden; }
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 1100;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-light), var(--gold-light));
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
  box-shadow: 0 0 18px rgba(83,177,205,0.35);
  pointer-events: none;
}
.scroll-progress::after {
  content: ''; position: absolute; right: -8px; top: 50%;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold-light);
  transform: translateY(-50%) scale(calc(0.45 + var(--scroll-progress, 0) * 0.55));
  box-shadow: 0 0 22px rgba(232,201,122,0.8), 0 0 36px rgba(83,177,205,0.4);
}

/* ── MOTION SYSTEM ── */
@keyframes glowDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  50% { transform: translate3d(26px, -18px, 0) scale(1.08); opacity: 1; }
}

@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 50px 50px, 50px 50px; }
}

@keyframes processFlow {
  from { transform: translateX(-120%); }
  to { transform: translateX(420%); }
}

@keyframes cardScan {
  from { transform: translateX(-120%); }
  to { transform: translateX(220%); }
}

@keyframes burstSpark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(0); }
}

.motion-burst {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  width: 1px; height: 1px;
  pointer-events: none;
}

.motion-burst span {
  position: absolute; left: 0; top: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-light), var(--gold-light));
  box-shadow: 0 0 14px rgba(83,177,205,0.55);
  animation: burstSpark 0.72s cubic-bezier(0.15, 0.9, 0.2, 1) var(--spark-delay, 0ms) both;
}

.case-card-full,
.case-card-header h3,
.hero h1,
.page-hero h1,
h2.display,
.service-block h3,
.pricing-card h3 {
  position: relative;
}

.mouse-aura {
  position: fixed; left: 0; top: 0; z-index: 900;
  width: 360px; height: 360px; border-radius: 50%;
  transform: translate3d(calc(var(--aura-x, 50vw) - 50%), calc(var(--aura-y, 50vh) - 50%), 0);
  background:
    radial-gradient(circle, rgba(83,177,205,0.18), rgba(83,177,205,0.08) 34%, transparent 68%),
    radial-gradient(circle at 64% 38%, rgba(232,201,122,0.16), transparent 30%);
  mix-blend-mode: multiply;
  opacity: 0;
  filter: blur(2px);
  pointer-events: none;
  transition: opacity 0.25s ease, width 0.22s ease, height 0.22s ease, filter 0.22s ease;
}

.mouse-aura.is-active { opacity: 1; }
.mouse-aura.is-over-target {
  width: 460px; height: 460px;
  filter: blur(0);
}

.scroll-fade {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  filter: blur(3px);
  transition:
    opacity 0.42s cubic-bezier(0.2, 0.75, 0.18, 1),
    transform 0.42s cubic-bezier(0.2, 0.75, 0.18, 1),
    filter 0.42s cubic-bezier(0.2, 0.75, 0.18, 1);
  transition-delay: var(--fade-delay, 0ms);
}

.scroll-fade.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

body.no-scroll-animations .scroll-fade {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(5,25,38,0.97);
  border-bottom: 1px solid rgba(83,177,205,0.12);
  padding: 0 4rem;
  display: flex; align-items: center; height: 72px;
  max-width: 100%;
  overflow: visible;
  transition: background 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
nav.nav-scrolled {
  background: rgba(5,25,38,0.9);
  border-bottom-color: rgba(83,177,205,0.24);
  box-shadow: 0 14px 40px rgba(5,25,38,0.22);
}
.nav-logo {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; margin-right: auto;
  min-width: 0;
}
.nav-logo-mark {
  height: 46px; width: auto; flex-shrink: 0;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.nav-logo:hover .nav-logo-mark { transform: rotate(-3deg) scale(1.04); filter: drop-shadow(0 0 12px rgba(83,177,205,0.35)); }
.nav-logo-text {
  font-family: 'DM Serif Display', serif;
  color: var(--white);
  font-size: 1.38rem;
  line-height: 1;
  white-space: nowrap;
}
.nav-logo-text small {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.64rem;
  color: var(--teal-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 0.12rem;
}
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  cursor: pointer;
}
.nav-toggle span {
  width: 19px; height: 2px;
  background: white; border-radius: 100px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-links {
  display: flex; align-items: center; gap: 0.25rem; list-style: none;
}
.nav-links a {
  text-decoration: none; color: rgba(255,255,255,0.65);
  font-size: 0.83rem; padding: 0.5rem 0.9rem; border-radius: 6px;
  transition: all 0.2s; letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 0.4rem;
}
.nav-links a:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.nav-links .has-dropdown { position: relative; }
.nav-links .has-dropdown:hover .dropdown { display: block; }
.dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  background: var(--navy-deep); border: 1px solid rgba(83,177,205,0.15);
  border-radius: 10px; padding: 0.5rem; min-width: 220px;
  margin-top: 0.5rem; box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.dropdown a {
  display: block; padding: 0.65rem 0.9rem; border-radius: 6px;
  color: rgba(255,255,255,0.7) !important; font-size: 0.82rem;
}
.dropdown a:hover { background: rgba(83,177,205,0.1) !important; color: white !important; }
.dropdown-label {
  font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-light); padding: 0.5rem 0.9rem 0.25rem;
  font-weight: 600;
}
.nav-cta {
  background: var(--teal) !important; color: white !important;
  padding: 0.55rem 1.3rem !important; border-radius: 6px !important;
  font-weight: 600 !important; margin-left: 0.75rem;
  box-shadow: 0 2px 12px rgba(7,131,150,0.35);
  transition: all 0.2s !important;
}
.nav-cta:hover { background: var(--teal-dark) !important; }

/* ── PAGE OFFSET ── */
.page-offset { padding-top: 72px; min-height: 100vh; }

/* ── SECTION PRIMITIVES ── */
.section { padding: 6rem 4rem; }
.section-sm { padding: 4rem 4rem; }
.page-offset > .page-hero + .section { padding-top: 3rem; }
.page-offset > .page-hero + .section .container > :first-child { margin-top: 0; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
.section-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal); font-weight: 600; margin-bottom: 1rem;
}
.section-tag::before { content: ''; width: 20px; height: 2px; background: var(--teal); }
.ai-help-section .section-tag::before,
.pricing-section .section-tag::before { background: var(--gradient-teal-green); }
.offer-preview .section-tag::before,
.ai-offers-section .section-tag::before { background: linear-gradient(90deg, var(--dove-pink), var(--gold-light)); }
h2.display {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  line-height: 1.12; color: var(--navy);
  margin-bottom: 1.2rem;
}
h2.display em { font-style: italic; color: var(--teal); }
h2.display-light { color: var(--white); }
h2.display-light em { color: var(--teal-light); }
.lead {
  font-size: 1rem; color: var(--mid); line-height: 1.75;
  max-width: 580px;
}
.lead-light { color: rgba(255,255,255,0.6); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none; border-radius: 6px; font-size: 0.88rem;
  font-weight: 600; transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; letter-spacing: 0.02em;
  font-family: 'DM Sans', sans-serif; cursor: pointer; border: none;
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-primary { background: var(--teal); color: white; padding: 0.85rem 1.8rem; box-shadow: 0 2px 12px rgba(7,131,150,0.3); }
.btn-primary:hover { background: var(--teal-dark); box-shadow: 0 6px 18px rgba(7,131,150,0.22); }
.btn-secondary { background: var(--navy); color: white; padding: 0.85rem 1.8rem; }
.btn-secondary:hover { background: var(--navy-deep); }
.btn-outline { border: 1.5px solid var(--border); color: var(--navy); padding: 0.8rem 1.8rem; background: white; }
.btn-outline:hover { border-color: var(--teal); color: var(--teal); box-shadow: 0 6px 18px rgba(7,131,150,0.08); }
.btn-ghost-light { border: 1px solid rgba(255,255,255,0.25); color: white; padding: 0.85rem 1.8rem; }
.btn-ghost-light:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); }

/* ── PAGE HERO ── */
.page-hero {
  background: var(--navy-deep); padding: 4.5rem 4rem 4rem;
  height: 400px;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(83,177,205,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83,177,205,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gridDrift 18s linear infinite;
}
.page-hero::after {
  content: ''; position: absolute; inset: auto -10% -45% 35%;
  height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(83,177,205,0.16), transparent 68%);
  pointer-events: none;
  animation: glowDrift 9s ease-in-out infinite;
}
.page-hero-inner { position: relative; z-index: 1; max-width: 680px; }
.page-hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: white; line-height: 1.1; margin-bottom: 1rem;
}
.page-hero h1 em { font-style: italic; color: var(--teal-light); }
.page-hero p { color: rgba(255,255,255,0.6); font-size: 1rem; line-height: 1.7; max-width: 560px; }

.about-hero {
  height: 400px;
}
.about-hero .page-hero-inner { max-width: 760px; }
.service-media-card span {
  display: block;
  color: var(--teal-light);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.breadcrumb {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: rgba(255,255,255,0.4);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--teal-light); text-decoration: none; }
.breadcrumb span { opacity: 0.4; }

/* ── CTA SECTION ── */
.cta-section {
  background: linear-gradient(135deg, var(--teal-dark), var(--navy-deep));
  text-align: center; position: relative; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: gridDrift 16s linear infinite;
}
.cta-section::after {
  content: ''; position: absolute; inset: 10% auto auto 50%;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(83,177,205,0.14), transparent 66%);
  translate: -50% 0;
  animation: glowDrift 8s ease-in-out infinite reverse;
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.cta-section h2 { color: white; margin-bottom: 1rem; }
.cta-section p { color: rgba(255,255,255,0.6); font-size: 1rem; line-height: 1.7; margin-bottom: 2.5rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── FOOTER ── */
footer {
  background: var(--navy-deep);
  padding: 4rem 4rem 2rem;
}
.footer-top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem;
  margin-bottom: 3rem; padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand p { font-size: 0.82rem; color: rgba(255,255,255,0.4); line-height: 1.7; margin-top: 1rem; max-width: 260px; }
.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-logo img { height: 42px; width: auto; flex-shrink: 0; }
.footer-logo-text {
  font-family: 'DM Serif Display', serif;
  color: var(--white);
  font-size: 1.05rem;
  line-height: 1.1;
}
.footer-logo-text small {
  display: block;
  font-family: 'DM Sans', sans-serif;
  color: var(--teal-light);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 0.12rem;
}
.footer-col h4 {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); font-weight: 600; margin-bottom: 1.25rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a {
  font-size: 0.83rem; color: rgba(255,255,255,0.55); text-decoration: none;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--teal-light); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
}
.footer-bottom p { font-size: 0.75rem; color: rgba(255,255,255,0.3); }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { font-size: 0.75rem; color: rgba(255,255,255,0.3); text-decoration: none; }
.footer-legal a:hover { color: rgba(255,255,255,0.6); }
.ms-partner-badge { margin-top: 1rem; }
.ms-partner-badge img { height: 40px; width: auto; display: block; }

/* ══════════════════════════════════════════
   HOME PAGE
══════════════════════════════════════════ */

.hero {
  min-height: calc(100vh - 72px);
  background: var(--navy-deep);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 4rem;
  padding: 4rem 4rem 6rem;
  --pointer-x: 0;
  --pointer-y: 0;
}
#spreadsheets-hero { scroll-margin-top: 72px; }
.hero-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(83,177,205,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83,177,205,0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: translate3d(calc(var(--pointer-x) * -16px), calc(var(--pointer-y) * -16px), 0);
  animation: gridDrift 24s linear infinite;
  transition: transform 0.18s ease-out;
}
.hero-glow-1 {
  position: absolute; right: 5%; top: 10%;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(7,131,150,0.18) 0%, transparent 65%);
  pointer-events: none;
  translate: calc(var(--pointer-x) * 40px) calc(var(--pointer-y) * 40px);
  animation: glowDrift 8s ease-in-out infinite;
}
.hero-glow-2 {
  position: absolute; left: -10%; bottom: -10%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.07) 0%, transparent 65%);
  pointer-events: none;
  translate: calc(var(--pointer-x) * -34px) calc(var(--pointer-y) * -34px);
  animation: glowDrift 10s ease-in-out infinite reverse;
}
.hero-left { position: relative; z-index: 2; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(83,177,205,0.12); border: 1px solid rgba(83,177,205,0.25);
  color: var(--teal-light); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0.35rem 0.9rem; border-radius: 100px;
  margin-bottom: 1.75rem;
}
.hero-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-light); }
.hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  color: white; line-height: 1.08; margin-bottom: 1.5rem;
}
.hero h1 em { font-style: italic; color: var(--teal-light); }
.hero-title-main,
.hero-title-sub { display: block; }
.hero-title-sub {
  color: var(--teal-light);
  font-style: italic;
  font-size: 0.78em;
  margin-top: 0.25rem;
}
.hero-sub {
  font-size: 1.05rem; color: rgba(255,255,255,0.6);
  line-height: 1.75; max-width: 500px; margin-bottom: 2.5rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.hero-social-proof {
  display: flex; align-items: center; gap: 1.5rem;
  padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.proof-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: rgba(255,255,255,0.45);
}
.proof-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--teal); }

.hero-right {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 1rem;
  perspective: 1000px;
  transform: translate3d(calc(var(--pointer-x) * -14px), calc(var(--pointer-y) * -14px), 0);
  transition: transform 0.18s ease-out;
}
.hero-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(83,177,205,0.15);
  border-radius: 14px; padding: 1.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.16);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(83,177,205,0.13), transparent);
  pointer-events: none;
  animation: cardScan 5.6s ease-in-out infinite;
}
.hero-card:hover { border-color: rgba(83,177,205,0.36); background: rgba(255,255,255,0.06); box-shadow: 0 30px 70px rgba(0,0,0,0.24); }
.hero-card-header {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;
}
.hero-card-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.hero-card-title { font-size: 0.78rem; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; text-transform: uppercase; }
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.stat { text-align: center; }
.stat-val {
  font-family: 'DM Serif Display', serif;
  font-size: 1.8rem; color: white; display: block;
}
.stat-label { font-size: 0.72rem; color: rgba(255,255,255,0.4); margin-top: 0.2rem; }
.problem-list { display: flex; flex-direction: column; gap: 0.5rem; }
.problem-item {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.82rem; color: rgba(255,255,255,0.65);
  padding: 0.6rem 0.75rem; background: rgba(255,255,255,0.03);
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.problem-item:hover { transform: translateX(6px); border-color: rgba(83,177,205,0.24); background: rgba(83,177,205,0.08); }
.problem-icon { font-size: 0.9rem; flex-shrink: 0; }
.problem-text { min-width: 0; flex: 1; }
.solution-tag {
  display: inline-block; margin-left: auto;
  background: rgba(7,131,150,0.2); color: var(--teal-light);
  font-size: 0.65rem; padding: 0.2rem 0.55rem; border-radius: 100px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-help-list { display: grid; gap: 0.65rem; }
.hero-help-item {
  padding: 0.9rem 1rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.hero-help-item:hover {
  transform: translateX(6px);
  border-color: rgba(83,177,205,0.24);
  background: rgba(83,177,205,0.08);
}
.hero-help-item h3 {
  font-size: 0.9rem;
  color: white;
  margin-bottom: 0.25rem;
}
.hero-help-item p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.56);
  line-height: 1.5;
}

/* Services strip */
.services-strip {
  background: white; padding: 2rem 4rem;
  border-bottom: 1px solid var(--border);
}
.strip-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.strip-label { font-size: 0.75rem; color: var(--mid); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.strip-divider { width: 1px; height: 24px; background: var(--border); }
.strip-items { display: flex; gap: 1rem; flex-wrap: wrap; }
.strip-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--navy); font-weight: 500;
  padding: 0.4rem 0.9rem; border-radius: 100px;
  background: var(--teal-pale); border: 1px solid rgba(7,131,150,0.15);
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.strip-item:hover { transform: translateY(-3px); background: white; border-color: var(--teal-light); box-shadow: 0 10px 24px rgba(7,131,150,0.1); }

/* What we build section */
.start-section {
  background:
    linear-gradient(135deg, rgba(83,177,205,0.13), transparent 34%),
    linear-gradient(315deg, rgba(239,82,157,0.08), transparent 42%),
    var(--off-white);
}
.start-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.start-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.start-card-media {
  width: calc(100% + 4rem);
  margin: -2rem -2rem 1.35rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background: var(--teal-pale);
}
.start-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.start-card:hover .start-card-media img { transform: scale(1.04); }
.start-card:nth-child(1)::after { background: linear-gradient(90deg, var(--teal-light), var(--neon-green)); }
.start-card:nth-child(2)::after { background: linear-gradient(90deg, var(--teal), var(--teal-light)); }
.start-card:nth-child(3)::after { background: linear-gradient(90deg, var(--gold-light), var(--dove-pink)); }
.start-card .btn { margin-top: auto; }
.start-card p { margin-bottom: 1.5rem; }
.build-section {
  background:
    linear-gradient(180deg, white 0%, rgba(228,242,245,0.58) 100%);
}
.build-pills { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; margin-top: 2rem; }
.build-visual-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 4rem;
  align-items: center;
}
.build-image-stack {
  position: relative;
  min-height: 420px;
}
.build-image-main {
  width: 100%;
  height: 420px;
  display: block;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 26px 64px rgba(7,131,150,0.16), 18px 18px 0 rgba(83,177,205,0.12);
}
.build-floating-card {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(7,131,150,0.16);
  box-shadow: 0 16px 38px rgba(5,25,38,0.14);
  backdrop-filter: blur(12px);
}
.build-floating-card span {
  display: block;
  color: var(--teal);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.build-floating-card strong {
  display: block;
  color: var(--navy);
  font-size: 0.95rem;
  line-height: 1.35;
}
.approach-photo {
  margin: 1.5rem 0 1.75rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 18px 42px rgba(7,131,150,0.1);
}
.approach-photo img {
  width: 100%;
  height: 250px;
  display: block;
  object-fit: cover;
  object-position: center top;
}

/* AI readiness preview */
.ai-ready-section {
  background:
    linear-gradient(135deg, rgba(83,177,205,0.12), transparent 34%),
    var(--off-white);
}
.ai-ready-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 4rem;
  align-items: center;
}
.ai-ready-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.ai-flow-panel {
  position: relative;
  display: grid;
  gap: 1rem;
}
.ai-flow-panel::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: linear-gradient(var(--teal-light), var(--teal), var(--gold-light));
}
.ai-flow-card {
  position: relative;
  margin-left: 2rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 16px 38px rgba(7,131,150,0.08);
}
.ai-flow-card span {
  position: absolute;
  left: -2rem;
  top: 1.35rem;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--teal-light);
  font-family: 'DM Serif Display', serif;
  font-size: 1rem;
  border: 4px solid var(--off-white);
}
.ai-flow-card h3 {
  color: var(--navy);
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}
.ai-flow-card p {
  color: var(--mid);
  font-size: 0.84rem;
  line-height: 1.6;
}

/* Pain section */
.pain-section {
  background:
    radial-gradient(circle at 12% 18%, rgba(232,201,122,0.18), transparent 26%),
    linear-gradient(135deg, rgba(28,188,146,0.08), transparent 42%),
    var(--off-white);
}
.pain-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
  margin-top: 3rem;
}
.pain-grid-2 {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem;
  margin-top: 3rem;
}
.pain-card {
  background: white; border-radius: 14px; padding: 2rem;
  border: 1px solid var(--border); transition: all 0.25s;
  position: relative; overflow: hidden;
  box-shadow: 0 10px 28px rgba(35,54,68,0.04);
}
.pain-card::before,
.pricing-card::before,
.case-card-full::before,
.value-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(83,177,205,0.12), transparent 42%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.pain-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, var(--teal), var(--teal-light), var(--neon-green));
  transform: scaleX(0); transition: transform 0.3s; transform-origin: left;
}
.pain-card:hover { box-shadow: 0 18px 42px rgba(7,131,150,0.12); transform: translateY(-6px); }
.pain-card:hover::before,
.pricing-card:hover::before,
.case-card-full:hover::before,
.value-card:hover::before { opacity: 1; }
.pain-card:hover::after { transform: scaleX(1); }
.pain-number {
  font-family: 'DM Serif Display', serif;
  font-size: 3rem; color: #5a9fb5; line-height: 1;
  margin-bottom: 1rem;
}
.pain-card h3 { font-size: 1rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; }
.pain-card p { font-size: 0.85rem; color: var(--mid); line-height: 1.65; }

.ai-toolkit-hero {
  display: flex;
  align-items: center;
  gap: 3rem;
}
.toolkit-hero-covers {
  position: relative;
  z-index: 1;
  display: block;
  flex: 1 1 460px;
  min-width: 360px;
  height: 300px;
  perspective: 1200px;
}
.toolkit-hero-cover {
  position: absolute;
  right: clamp(9rem, 20vw, 15rem);
  bottom: 1.4rem;
  border-radius: 8px;
  transform-origin: bottom center;
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toolkit-hero-cover img {
  display: block;
  width: clamp(118px, 11vw, 172px);
  height: auto;
  border-radius: 5px;
  box-shadow: 0 22px 50px rgba(0,0,0,0.34);
}
.toolkit-hero-cover-prompt {
  transform: translateX(-10px) translateY(8px) rotate(-2deg);
  z-index: 2;
}
.toolkit-hero-cover-readiness {
  transform: translateX(-20px) translateY(16px) rotate(-4deg);
  z-index: 3;
}
.toolkit-hero-cover-intro {
  transform: translateY(0) rotate(2deg);
  z-index: 1;
}
.toolkit-hero-covers:hover .toolkit-hero-cover-prompt {
  transform: translateX(-116px) translateY(16px) rotate(-12deg);
}
.toolkit-hero-covers:hover .toolkit-hero-cover-readiness {
  transform: translateX(-12px) translateY(-4px) rotate(0deg);
}
.toolkit-hero-covers:hover .toolkit-hero-cover-intro {
  transform: translateX(92px) translateY(16px) rotate(12deg);
}
.toolkit-series-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.toolkit-series-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(228,242,245,0.58), rgba(255,255,255,0.96) 46%),
    white;
  box-shadow: 0 14px 34px rgba(35,54,68,0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.toolkit-series-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-light), var(--gold-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.toolkit-series-card:hover {
  transform: translateY(-6px);
  border-color: rgba(83,177,205,0.55);
  box-shadow: 0 22px 48px rgba(7,131,150,0.14);
}
.toolkit-series-card:hover::after { transform: scaleX(1); }
.toolkit-cover {
  display: grid;
  place-items: end center;
  padding: 1.5rem 1.5rem 0.35rem;
  min-height: 310px;
  background:
    radial-gradient(circle at 50% 94%, rgba(35,54,68,0.18), transparent 28%),
    linear-gradient(135deg, rgba(83,177,205,0.16), rgba(232,201,122,0.12));
}
.toolkit-cover img {
  display: block;
  width: min(74%, 190px);
  height: auto;
  border-radius: 6px;
  box-shadow: 0 22px 38px rgba(5,25,38,0.22);
}
.toolkit-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.6rem 1.8rem;
}
.toolkit-series-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--teal);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.toolkit-series-label span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  color: var(--navy);
  background: var(--teal-pale);
  letter-spacing: 0;
}
.toolkit-series-card h3 {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.55rem;
}
.toolkit-series-card p {
  color: var(--mid);
  font-size: 0.86rem;
  line-height: 1.65;
}
.toolkit-request-preview {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  width: fit-content;
  max-width: 100%;
  margin: 0.25rem 0 2rem;
  padding: 1rem 0.85rem 1rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(83,177,205,0.1), rgba(232,201,122,0.11)),
    var(--off-white);
  box-shadow: 0 14px 32px rgba(35,54,68,0.06);
}
.toolkit-request-preview img {
  width: clamp(82px, 8vw, 112px);
  height: auto;
  border-radius: 5px;
  box-shadow: 0 14px 26px rgba(5,25,38,0.18);
}
.toolkit-request-preview img:nth-child(1) { transform: rotate(-5deg) translateY(5px); }
.toolkit-request-preview img:nth-child(2) { transform: translateY(-3px); }
.toolkit-request-preview img:nth-child(3) { transform: rotate(5deg) translateY(5px); }

/* Offer preview */
.offer-preview {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(228,242,245,0.72)),
    radial-gradient(circle at 85% 18%, rgba(83,177,205,0.14), transparent 30%);
}
.offer-preview-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 5rem; align-items: center;
}
.offer-preview-right { display: flex; flex-direction: column; gap: 1rem; }
.mini-offer-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 1.4rem;
  transition: all 0.25s; cursor: default;
  display: flex; gap: 1rem; align-items: flex-start;
  position: relative; overflow: hidden;
}
.mini-offer-card::after {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: 3px; background: linear-gradient(var(--teal), var(--teal-light));
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.28s ease;
}
.mini-offer-card:hover { border-color: var(--teal-light); transform: translateX(8px); box-shadow: 0 14px 32px rgba(7,131,150,0.1); }
.mini-offer-card:hover::after { transform: scaleY(1); }
.mini-offer-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--teal-pale); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; overflow: hidden;
  transition: transform 0.25s ease, background 0.25s ease;
}
.mini-offer-card:hover .mini-offer-icon { transform: rotate(-4deg) scale(1.08); background: white; }
.mini-offer-icon img { width: 24px; height: 24px; object-fit: contain; }
.mini-offer-card h3 { font-size: 0.9rem; font-weight: 600; color: var(--navy); margin-bottom: 0.3rem; }
.mini-offer-card p { font-size: 0.8rem; color: var(--mid); line-height: 1.55; }
.toolkit-assessment-section {
  background: white;
}
.toolkit-assessment-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(460px, 1.18fr);
  gap: 3.5rem;
  align-items: center;
}
.assessment-domain-list {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.5rem;
}
.assessment-domain-list div {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  color: var(--near-black);
  font-size: 0.86rem;
  line-height: 1.35;
}
.assessment-domain-list span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: var(--teal-pale);
  color: var(--teal);
  font-size: 0.68rem;
  font-weight: 800;
}
.toolkit-spider-card {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(83,177,205,0.08), rgba(232,201,122,0.1)),
    white;
  box-shadow: 0 18px 42px rgba(7,131,150,0.1);
}
.toolkit-spider-card svg {
  display: block;
  width: 100%;
  height: auto;
}
.spider-grid,
.spider-axis {
  fill: none;
  stroke: #b6dbe6;
  stroke-width: 1.3;
}
.spider-score {
  fill: rgba(32,166,200,0.3);
  stroke: #168cad;
  stroke-width: 3;
}
.spider-centre {
  fill: white;
  stroke: #dbe6ef;
  stroke-width: 1;
}
.spider-label {
  fill: var(--navy);
  font-size: 14px;
  font-weight: 700;
}
.spider-percent {
  fill: var(--navy);
  font-size: 28px;
  font-weight: 800;
}
.spider-status {
  fill: var(--mid);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.price-badge {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  background: var(--teal-pale); border-left: 3px solid var(--teal);
  padding: 0.9rem 1.4rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0;
}
.price-from { font-size: 0.78rem; color: var(--mid); }
.price-val { font-family: 'DM Serif Display', serif; font-size: 2rem; color: var(--navy); }
.price-note { font-size: 0.75rem; color: var(--mid); }

/* Social proof */
.proof-section { background: var(--navy); }
.proof-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; margin-top: 3rem; }
.proof-stat { text-align: center; }
.proof-stat-val {
  font-family: 'DM Serif Display', serif;
  font-size: 2.8rem; color: white; display: block; line-height: 1;
  margin-bottom: 0.5rem;
  transition: transform 0.25s ease, text-shadow 0.25s ease;
}
.proof-stat:hover .proof-stat-val { transform: translateY(-4px) scale(1.04); text-shadow: 0 0 24px rgba(83,177,205,0.28); }
.proof-stat-val span { color: var(--teal-light); }
.proof-stat-title {
  color: white;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.proof-stat-label { font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.5; }

/* Process */
.process-section {
  background:
    linear-gradient(135deg, rgba(35,54,68,0.04), transparent 42%),
    linear-gradient(315deg, rgba(232,201,122,0.14), transparent 38%),
    var(--off-white);
}
.process-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem;
  margin-top: 3.5rem; position: relative;
}
.process-line {
  position: absolute; top: 28px; left: 12%; right: 12%;
  height: 1px; background: linear-gradient(90deg, transparent, var(--teal-light), var(--teal), var(--teal-light), transparent);
  overflow: hidden;
}
.process-line::after {
  content: ''; position: absolute; top: -1px; bottom: -1px; left: 0;
  width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), var(--teal-light), transparent);
  animation: processFlow 3.2s ease-in-out infinite;
}
.process-step { text-align: center; position: relative; min-width: 0; }
.step-bubble {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--teal); color: white;
  font-family: 'DM Serif Display', serif; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  box-shadow: 0 0 0 8px var(--teal-pale);
  position: relative; z-index: 1;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.process-step:hover .step-bubble { transform: translateY(-5px) scale(1.06); box-shadow: 0 0 0 8px var(--teal-pale), 0 14px 28px rgba(7,131,150,0.18); }
.process-step h3 { font-size: 0.92rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; }
.process-step p { font-size: 0.82rem; color: var(--mid); line-height: 1.6; }

/* ══════════════════════════════════════════
   SERVICES PAGE
══════════════════════════════════════════ */

.services-detail {
  background:
    linear-gradient(180deg, white 0%, rgba(228,242,245,0.52) 48%, white 100%);
}
.services-detail .service-block:first-child { padding-top: 0; }
.service-block {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem;
  align-items: start; padding: 4.5rem 0;
  border-bottom: 1px solid var(--border);
}
.service-block:nth-child(even) {
  position: relative;
}
.service-block:nth-child(even)::before {
  content: '';
  position: absolute;
  inset: 2rem -2rem;
  z-index: 0;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(83,177,205,0.09), transparent 42%),
    linear-gradient(315deg, rgba(232,201,122,0.12), transparent 38%);
  pointer-events: none;
}
.service-block > * { position: relative; z-index: 1; }
.service-block:last-child { border-bottom: none; }
.service-block-left { position: sticky; top: 100px; }
.service-number {
  font-family: 'DM Serif Display', serif;
  font-size: 4rem; color: var(--teal-pale); line-height: 1;
  margin-bottom: 0.5rem;
}
.service-block h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem; color: var(--navy); margin-bottom: 0.75rem;
}
.service-block, .support-section { scroll-margin-top: 90px; }
.service-block > .service-block-left > p { font-size: 0.9rem; color: var(--mid); line-height: 1.7; }
.service-tag {
  display: inline-block; background: var(--teal-pale); color: var(--teal-dark);
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 0.75rem; border-radius: 100px; margin-bottom: 1rem;
  font-weight: 600;
}
.service-features { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.5rem 0; }
.service-media-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  min-height: 240px;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border);
  box-shadow: 0 18px 42px rgba(7,131,150,0.1);
}
.service-media-card img {
  width: 100%;
  height: 260px;
  display: block;
  object-fit: cover;
}
.service-media-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(5,25,38,0.76));
}
.service-media-card > div {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
  padding: 0.95rem 1rem;
  border-radius: 10px;
  background: rgba(5,25,38,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
}
.service-media-card strong {
  display: block;
  color: white;
  font-size: 0.92rem;
  line-height: 1.35;
}
.feature-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 1.25rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--off-white);
  transition: all 0.2s;
}
.feature-item:hover { border-color: var(--teal-light); background: var(--teal-pale); transform: translateX(6px); box-shadow: 0 10px 24px rgba(7,131,150,0.08); }
.feature-check { color: var(--teal); font-size: 1rem; flex-shrink: 0; margin-top: 0.1rem; }
.feature-item h4 { font-size: 0.88rem; font-weight: 600; color: var(--navy); margin-bottom: 0.2rem; }
.feature-item p { font-size: 0.8rem; color: var(--mid); line-height: 1.55; }
.scope-box {
  background: var(--off-white); border-radius: 12px;
  padding: 1.5rem; border: 1px solid var(--border); margin-top: 1.5rem;
  transition: all 0.2s;
}
.scope-box:hover {
  border-color: var(--teal-light);
  background: var(--teal-pale);
  transform: translateX(6px);
  box-shadow: 0 10px 24px rgba(7,131,150,0.08);
}
.scope-box h4 {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mid); margin-bottom: 1rem; font-weight: 600;
}
.scope-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.scope-col h5 { font-size: 0.78rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; }
.scope-item { font-size: 0.78rem; color: var(--mid); padding: 0.2rem 0; display: flex; gap: 0.5rem; }
.scope-yes::before { content: '✓'; color: var(--teal); font-weight: 700; }
.scope-no::before { content: '—'; color: var(--border); }

/* Pricing */
.pricing-section {
  background:
    radial-gradient(circle at 84% 18%, rgba(239,82,157,0.08), transparent 28%),
    linear-gradient(135deg, rgba(83,177,205,0.1), transparent 38%),
    var(--off-white);
}
.support-section {
  background:
    linear-gradient(180deg, white 0%, rgba(228,242,245,0.5) 100%);
}
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 3rem; }
.pricing-card {
  background: white; border-radius: 16px; padding: 2rem;
  border: 1px solid var(--border); transition: all 0.25s;
  position: relative; overflow: visible;
}
.pricing-card:hover { transform: translateY(-7px); box-shadow: 0 18px 46px rgba(7,131,150,0.12); border-color: rgba(7,131,150,0.24); }
.pricing-card.featured {
  background: var(--navy); border-color: var(--teal);
  box-shadow: 0 12px 40px rgba(7,131,150,0.2);
}
.pricing-card.featured h3 { color: white; }
.pricing-card.featured p { color: rgba(255,255,255,0.6); }
.pricing-card.featured .pricing-feature { color: rgba(255,255,255,0.75); }
.featured-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--teal); color: white; font-size: 0.68rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 1rem; border-radius: 100px;
}
.pricing-card h3 { font-size: 1rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; }
.pricing-card p { font-size: 0.82rem; color: var(--mid); margin-bottom: 1.5rem; line-height: 1.55; }
.pricing-price {
  font-family: 'DM Serif Display', serif;
  margin-bottom: 1.5rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.pricing-card.featured .pricing-price { border-color: rgba(255,255,255,0.1); }
.pricing-price-val { font-size: 2.2rem; color: var(--navy); }
.pricing-card.featured .pricing-price-val { color: white; }
.pricing-price-note { font-size: 0.78rem; color: var(--mid); font-family: 'DM Sans', sans-serif; }
.pricing-card.featured .pricing-price-note { color: rgba(255,255,255,0.5); }
.pricing-features { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 2rem; }
.pricing-feature {
  font-size: 0.82rem; color: var(--near-black);
  display: flex; gap: 0.6rem; align-items: flex-start;
}
.pricing-feature::before { content: '✓'; color: var(--teal); font-weight: 700; flex-shrink: 0; }

.support-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 3rem; }
.support-card {
  display: grid; grid-template-columns: 260px 1fr;
  gap: 1.5rem; align-items: center;
  background: var(--off-white); border: 1px solid var(--border);
  border-left: 4px solid var(--teal-light);
  border-radius: 12px; padding: 1.5rem;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.support-card:hover { transform: translateY(-4px); border-color: rgba(7,131,150,0.24); box-shadow: 0 16px 38px rgba(7,131,150,0.1); }
.support-card-featured {
  background: var(--teal-pale); border-color: rgba(7,131,150,0.25);
  border-left-color: var(--teal);
}
.support-card-top { grid-column: 1; grid-row: 1 / span 2; }
.support-card-top h3 { font-size: 1rem; font-weight: 600; color: var(--navy); margin-bottom: 0.35rem; }
.support-price {
  font-family: 'DM Serif Display', serif;
  font-size: 1.45rem; color: var(--teal-dark);
}
.support-card p { grid-column: 2; font-size: 0.82rem; color: var(--mid); line-height: 1.55; }
.support-features {
  grid-column: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.45rem 1rem;
}
.support-features div {
  font-size: 0.78rem; color: var(--near-black);
  display: flex; gap: 0.5rem; align-items: flex-start;
}
.support-features div::before { content: '✓'; color: var(--teal); font-weight: 700; flex-shrink: 0; }
.support-card .btn {
  margin-top: 1rem;
  justify-content: center;
  width: 150px;
  padding-left: 0.9rem;
  padding-right: 0.9rem;
  text-align: center;
}

/* ══════════════════════════════════════════
   AI ENABLEMENT PAGE
══════════════════════════════════════════ */

.ai-page-hero .case-detail-actions { margin-top: 2rem; }
.ai-intro-section {
  background:
    linear-gradient(135deg, rgba(83,177,205,0.1), transparent 36%),
    white;
}
.ai-help-section,
.ai-why-section { background: white; }
.ai-intro-grid,
.ai-journey-grid,
.ai-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 4rem;
  align-items: start;
}
.ai-journey-section {
  background:
    linear-gradient(135deg, rgba(83,177,205,0.14), transparent 36%),
    linear-gradient(315deg, rgba(28,188,146,0.08), transparent 44%),
    var(--off-white);
}
.ai-journey-grid { align-items: center; }
.ai-inline-media,
.ai-wide-media {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 42px rgba(7,131,150,0.1);
  background: var(--navy);
}
.ai-inline-media {
  margin-top: 1.5rem;
  aspect-ratio: 16 / 9;
}
.ai-inline-media-sm { margin: 1.5rem 0 1.75rem; }
.ai-wide-media {
  margin-top: 2rem;
  aspect-ratio: 16 / 6;
}
.ai-inline-media img,
.ai-wide-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ai-inline-media::after,
.ai-wide-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(5,25,38,0.78));
}
.ai-inline-media > div,
.ai-wide-media > div {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
  padding: 0.95rem 1rem;
  border-radius: 10px;
  background: rgba(5,25,38,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
}
.ai-inline-media span,
.ai-wide-media span {
  display: block;
  color: var(--teal-light);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.ai-inline-media strong,
.ai-wide-media strong {
  display: block;
  color: white;
  font-size: 0.92rem;
  line-height: 1.35;
}
.ai-maturity-visual {
  padding: 2rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(7,131,150,0.1);
}
.ai-maturity-visual .maturity-layout {
  display: grid;
  grid-template-columns: minmax(132px, 0.75fr) minmax(180px, 1fr);
  gap: 2rem;
  align-items: center;
}
.ai-maturity-visual .level-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 238px;
}
.ai-maturity-visual .level {
  line-height: 1.1;
}
.ai-maturity-visual .level-number {
  display: block;
  color: #d5a52f;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}
.ai-maturity-visual .level-name {
  display: block;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
}
.ai-maturity-visual .pyramid-wrap {
  width: min(100%, 260px);
  margin-left: auto;
  aspect-ratio: 1;
}
.ai-maturity-visual svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ai-help-section {
  background:
    radial-gradient(circle at 88% 12%, rgba(232,201,122,0.18), transparent 28%),
    linear-gradient(135deg, rgba(228,242,245,0.92), rgba(244,247,246,0.92));
}
.ai-service-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}
.ai-service-card {
  position: relative;
  overflow: hidden;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.45rem;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.ai-service-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-light), var(--gold-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.ai-service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(7,131,150,0.24);
  box-shadow: 0 18px 42px rgba(7,131,150,0.11);
}
.ai-service-card:hover::after { transform: scaleX(1); }
.ai-service-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--teal-pale);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.ai-service-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.ai-service-card h3,
.ai-offer-card h3 {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.ai-service-card p,
.ai-offer-card p {
  color: var(--mid);
  font-size: 0.82rem;
  line-height: 1.65;
}
.ai-offers-section {
  background:
    linear-gradient(180deg, white 0%, rgba(228,242,245,0.52) 100%);
}
.ai-offer-stack {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}
.ai-offer-card {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 2rem;
  align-items: center;
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal);
  border-radius: 12px;
  background: var(--off-white);
  padding: 1.5rem;
  scroll-margin-top: 96px;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.ai-offer-card:hover {
  transform: translateY(-4px);
  border-color: rgba(7,131,150,0.28);
  box-shadow: 0 18px 42px rgba(7,131,150,0.1);
}
.ai-offer-main .btn { margin-top: 1.25rem; }
.ai-offer-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1rem;
}
.ai-offer-features div {
  display: flex;
  gap: 0.5rem;
  color: var(--near-black);
  font-size: 0.82rem;
  line-height: 1.45;
}
.ai-offer-features div::before {
  content: '✓';
  color: var(--teal);
  font-weight: 700;
  flex-shrink: 0;
}
.ai-why-list {
  display: grid;
  gap: 0.85rem;
}

/* ══════════════════════════════════════════
   WORKSHOP SIGNUP PAGE
══════════════════════════════════════════ */

.workshop-page-hero {
  height: 440px;
}
.workshop-intro-section,
.workshop-agenda-section { background: white; }
.workshop-detail-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}
.workshop-detail-card p {
  min-height: 3.2rem;
}
.workshop-emoji-icon {
  font-size: 1.35rem;
  line-height: 1;
}
.workshop-agenda-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 3rem;
}
.workshop-agenda-grid .feature-check {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

/* ══════════════════════════════════════════
   CASE STUDIES PAGE
══════════════════════════════════════════ */

.cases-grid-full {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem;
  margin-top: 3rem;
}
.case-list-section.scroll-fade,
.case-list-section .scroll-fade {
  opacity: 1;
  transform: none;
  filter: none;
}
.case-card-full {
  background: white; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border); transition: all 0.3s;
  position: relative;
}
.case-card-full:hover { box-shadow: 0 20px 52px rgba(7,131,150,0.14); transform: translateY(-7px); }
.case-card-header {
  background: var(--navy); padding: 2rem;
  position: relative; overflow: hidden;
}
.case-card-header::before {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(7,131,150,0.15);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.case-card-full:hover .case-card-header::before { transform: scale(1.25); opacity: 0.85; }
.case-type {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.25rem 0.7rem; border-radius: 100px;
  margin-bottom: 1rem; font-weight: 600;
}
.case-type-dove365 { background: rgba(7,131,150,0.2); color: var(--teal-light); }
.case-type-role { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }
.case-type-community { background: rgba(201,168,76,0.15); color: var(--gold); }
.case-read-more {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.case-card-header h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.35rem; color: white; margin-bottom: 0.4rem;
  position: relative; z-index: 1;
}
.case-sector { font-size: 0.78rem; color: rgba(255,255,255,0.4); letter-spacing: 0.06em; text-transform: uppercase; position: relative; z-index: 1; }
.case-card-body { padding: 2rem; }
.case-problem-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); font-weight: 600; margin-bottom: 0.5rem; }
.case-card-body p { font-size: 0.85rem; color: var(--mid); line-height: 1.7; margin-bottom: 1.5rem; }
.case-outcome-box {
  background: var(--teal-pale); border-left: 3px solid var(--teal);
  padding: 1rem 1.25rem; border-radius: 0 8px 8px 0; margin-bottom: 1.5rem;
  font-size: 0.85rem; color: var(--teal-dark); line-height: 1.6;
}
.case-tech-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tech-tag {
  background: var(--off-white); border: 1px solid var(--border);
  color: var(--mid); font-size: 0.72rem; padding: 0.25rem 0.65rem;
  border-radius: 100px; letter-spacing: 0.04em;
}
.case-attribution { font-size: 0.72rem; color: var(--mid); font-style: italic; margin-top: 1rem; opacity: 0.7; }

/* Case study detail pages */
.case-detail-hero {
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, #1a3a4a 100%);
  color: var(--white);
  padding: 6rem 4rem 4.5rem;
  position: relative;
  overflow: hidden;
}
.case-detail-hero::before {
  content: '';
  position: absolute;
  inset: auto -120px -180px auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(83,177,205,0.18), transparent 68%);
  pointer-events: none;
}
.case-detail-hero .container { position: relative; z-index: 1; }
.case-breadcrumb {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
.case-breadcrumb a { color: rgba(255,255,255,0.58); text-decoration: none; }
.case-breadcrumb a:hover { color: var(--teal-light); }
.case-detail-hero h1 {
  max-width: 820px;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.08;
  margin-bottom: 1.25rem;
}
.case-detail-hero h1 em { color: var(--teal-light); font-style: italic; }
.case-detail-hero p {
  max-width: 760px;
  color: rgba(255,255,255,0.66);
  font-size: 1.02rem;
  line-height: 1.75;
}
.case-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}
.case-meta-item {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 0.85rem 1rem;
}
.case-meta-label {
  display: block;
  color: var(--teal-light);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.case-meta-value { color: var(--white); font-size: 0.9rem; font-weight: 500; }
.case-detail-section { background: var(--white); }
.case-detail-section.alt { background: var(--off-white); }
.case-detail-section.dark {
  background: linear-gradient(160deg, var(--navy-deep), var(--navy));
  color: var(--white);
}
.case-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 4rem;
  align-items: start;
}
.case-detail-layout > :first-child {
  position: sticky;
  top: 100px;
}
.case-detail-label {
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.case-detail-section.dark .case-detail-label { color: var(--teal-light); }
.case-detail-section h2 {
  font-family: 'DM Serif Display', serif;
  color: var(--navy);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.case-detail-section.dark h2 { color: var(--white); }
.case-detail-copy p {
  color: var(--mid);
  font-size: 0.96rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}
.case-detail-section.dark .case-detail-copy p { color: rgba(255,255,255,0.62); }
.case-point-list {
  display: grid;
  gap: 0.85rem;
}
.case-point {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
}
.case-point strong {
  display: block;
  color: var(--navy);
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}
.case-point span {
  color: var(--mid);
  font-size: 0.86rem;
  line-height: 1.6;
}
.case-solution-grid, .case-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.25rem;
}
.case-solution-card, .case-outcome-card {
  border-radius: 8px;
  padding: 1.4rem;
  border: 1px solid var(--border);
  background: var(--white);
}
.case-detail-section.dark .case-solution-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}
.case-solution-card h3, .case-outcome-card h3 {
  color: var(--navy);
  font-family: 'DM Serif Display', serif;
  font-size: 1.05rem;
  margin-bottom: 0.55rem;
}
.case-detail-section.dark .case-solution-card h3 { color: var(--white); }
.case-solution-card p, .case-outcome-card p {
  color: var(--mid);
  font-size: 0.84rem;
  line-height: 1.65;
}
.case-detail-section.dark .case-solution-card p { color: rgba(255,255,255,0.58); }
.case-note {
  margin-top: 2rem;
  border-left: 3px solid var(--teal);
  background: var(--teal-pale);
  color: var(--teal-dark);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  line-height: 1.65;
}
.case-detail-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* Legal pages */
.legal-section { background: white; }
.legal-content {
  max-width: 860px;
  color: var(--mid);
  font-size: 0.94rem;
  line-height: 1.8;
}
.legal-content h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.65rem;
  color: var(--navy);
  margin: 2.5rem 0 0.75rem;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-size: 0.95rem;
  color: var(--navy);
  margin: 1.5rem 0 0.5rem;
}
.legal-content p { margin-bottom: 1rem; }
.legal-content ul {
  margin: 0 0 1.25rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.legal-content a { color: var(--teal-dark); font-weight: 600; }
.legal-note {
  background: var(--off-white);
  border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
}

/* ══════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════ */

.about-intro { background: white; }
.about-grid { display: grid; grid-template-columns: 360px 1fr; gap: 3rem; align-items: start; }
.about-photo-placeholder {
  max-width: 360px;
}
.about-photo-placeholder img {
  width: 100%; height: auto; display: block;
  border-radius: 16px; border: 1px solid rgba(7,131,150,0.2);
}
.photo-label { font-size: 0.78rem; color: var(--teal-dark); text-align: center; }
.photo-icon { font-size: 3rem; opacity: 0.4; }
.about-content h2 { margin-bottom: 1.5rem; }
.about-content p { font-size: 0.92rem; color: var(--mid); line-height: 1.8; margin-bottom: 1.25rem; }
.about-wide-media { aspect-ratio: 4 / 3; margin-top: 0; }
.about-reasons-grid { margin-top: 3rem; }
.founder-section {
  background:
    linear-gradient(135deg, rgba(83,177,205,0.1), transparent 40%),
    linear-gradient(315deg, rgba(232,201,122,0.12), transparent 38%),
    white;
}
.founder-grid { grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr); align-items: center; }
.founder-photo { max-width: none; }
.founder-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 46%;
  box-shadow: 0 18px 42px rgba(7,131,150,0.12);
}
.founder-highlights {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.75rem;
}
.founder-highlights .credential { background: white; }
.founder-highlights .credential-icon img[alt="Microsoft Partner"] {
  width: 42px;
}
.credentials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 2rem; }
.credential {
  display: flex; gap: 1rem; align-items: center;
  padding: 1rem 1.25rem; background: var(--off-white);
  border-radius: 10px; border: 1px solid var(--border);
  text-decoration: none; transition: all 0.2s;
}
.credential-link:hover { border-color: var(--teal); background: var(--teal-pale); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(7,131,150,0.08); }
.credential-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.25rem; }
.credential-icon img { width: 28px; height: 28px; object-fit: contain; }
.credential-text h4 { font-size: 0.88rem; font-weight: 600; color: var(--navy); }
.credential-text p { font-size: 0.78rem; color: var(--mid); margin-bottom: 0; }

/* Values */
.values-section { background: var(--off-white); }
.values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 3rem; }
.value-card {
  background: white; border-radius: 14px; padding: 2rem;
  border: 1px solid var(--border); text-align: center; transition: all 0.25s;
  position: relative; overflow: hidden;
}
.value-card:hover { border-color: var(--teal); box-shadow: 0 16px 38px rgba(7,131,150,0.12); transform: translateY(-6px); }
.value-letter {
  font-family: 'DM Serif Display', serif;
  font-size: 3.5rem; color: var(--teal); line-height: 1; margin-bottom: 0.75rem;
}
.value-card h3 { font-size: 1rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; }
.value-card p { font-size: 0.82rem; color: var(--mid); line-height: 1.65; }

/* Microsoft stack */
.microsoft-section { background: white; }
.ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.ms-logos { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.ms-logo-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem;
  text-align: center; transition: all 0.2s;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.ms-logo-card { position: relative; overflow: hidden; }
.ms-logo-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, var(--teal), var(--teal-light));
  transform: scaleX(0); transition: transform 0.3s; transform-origin: left;
}
.ms-logo-card:hover { border-color: var(--teal-light); background: var(--teal-pale); transform: translateY(-6px) scale(1.02); box-shadow: 0 14px 28px rgba(7,131,150,0.14); }
.ms-logo-card:hover::after { transform: scaleX(1); }
.ms-logo-card img { width: 36px; height: 36px; object-fit: contain; transition: transform 0.24s ease; }
.ms-logo-card:hover img { transform: scale(1.12) rotate(-3deg); }
.ms-logo-name { font-size: 0.72rem; color: var(--mid); font-weight: 500; }

/* ══════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════ */

.contact-section { background: white; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; margin-bottom: 3rem; }
.booking-full-width { margin-top: 0; }
.contact-info h2 { margin-bottom: 1rem; }
.contact-info p { font-size: 0.92rem; color: var(--mid); line-height: 1.75; margin-bottom: 2rem; }
.contact-methods { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; }
.contact-method {
  display: flex; flex-direction: row; gap: 1rem; align-items: center;
  padding: 1.25rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--off-white);
  text-decoration: none; transition: all 0.2s;
}
.contact-method:hover { border-color: var(--teal); background: var(--teal-pale); transform: translateX(6px); box-shadow: 0 12px 28px rgba(7,131,150,0.08); }
.contact-method-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--teal-pale); display: flex; align-items: center;
  justify-content: center; font-size: 1.1rem; flex-shrink: 0;
  border: 1px solid rgba(7,131,150,0.2); overflow: hidden;
}
.contact-method-icon img { width: 22px; height: 22px; object-fit: contain; }
.contact-method-text h4 { font-size: 0.88rem; font-weight: 600; color: var(--navy); }
.contact-method-text p { font-size: 0.8rem; color: var(--mid); margin-bottom: 0; }
.contact-phone-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: baseline;
}
.contact-phone-line span + span::before {
  content: '•';
  margin-right: 0.55rem;
  color: var(--teal);
}
.booking-embed {
  background: var(--off-white); border-radius: 16px; padding: 2.5rem;
  border: 1px solid var(--border);
}
.booking-embed h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.4rem; color: var(--navy); margin-bottom: 0.5rem;
}
.booking-embed p { font-size: 0.85rem; color: var(--mid); margin-bottom: 2rem; line-height: 1.6; }
.booking-placeholder {
  background: white; border-radius: 12px; border: 1px dashed var(--teal-light);
  padding: 3rem; text-align: center; color: var(--mid); font-size: 0.85rem;
}
.booking-placeholder strong { display: block; color: var(--teal-dark); font-size: 0.9rem; margin-bottom: 0.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.form-group label { font-size: 0.78rem; font-weight: 600; color: var(--navy); letter-spacing: 0.04em; }
.form-group input, .form-group textarea, .form-group select {
  border: 1.5px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem;
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: var(--near-black);
  background: white; transition: border 0.2s; outline: none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--teal);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  margin-bottom: 1rem;
  color: var(--mid);
  font-size: 0.82rem;
  line-height: 1.55;
}
.form-checkbox input {
  width: 18px;
  height: 18px;
  margin-top: 0.12rem;
  accent-color: var(--teal);
}
.form-checkbox a {
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: none;
}
.form-checkbox a:hover { color: var(--teal); }
.form-recaptcha { min-height: 78px; overflow-x: auto; }

/* ── AI READINESS ASSESSMENT ── */
.assessment-hero { height: 340px; }
.assessment-section { background: white; }
.assessment-intro { margin-bottom: 1.5rem; }
.assessment-result-card span {
  display: block;
  color: var(--mid);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.assessment-result-card strong {
  display: block;
  color: var(--navy);
  font-family: 'DM Serif Display', serif;
  font-size: 2.3rem;
  font-weight: 400;
  margin: 0.3rem 0 0.7rem;
}
.ai-summary {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(220px, 0.9fr) minmax(320px, 1.25fr);
  gap: 1.25rem;
  margin-bottom: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--navy);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(18,52,78,0.1);
  align-items: center;
}
.ai-summary .score-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.ai-summary .metric-label {
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}
.ai-summary .track {
  width: 100%;
  max-width: 230px;
  height: 9px;
  border-radius: 999px;
  background: var(--navy-deep);
  overflow: hidden;
}
.ai-summary .fill {
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: var(--gold-light);
  transition: width 0.2s ease;
}
.ai-summary .result-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.ai-summary .result-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}
.ai-summary .spark {
  color: var(--gold-light);
  font-size: 1.1rem;
  line-height: 1;
}
.ai-summary .title {
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ai-summary .result-card {
  width: 100%;
  max-width: 360px;
  height: 66px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 50%, rgba(232,201,122,0.95) 0%, rgba(232,201,122,0.4) 20%, rgba(232,201,122,0.05) 38%, rgba(5,25,38,0.8) 58%),
    var(--navy-deep);
  position: relative;
}
.ai-summary .result-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value, 0%);
  border-radius: 14px;
  background: var(--gold-light);
  transition: width 0.22s ease;
}
.ai-summary .result-score {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(2.25rem, 4.8vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  padding-left: 1rem;
  text-shadow: 0 2px 10px rgba(5,25,38,0.55);
}
.ai-summary .result-status {
  color: rgba(255,255,255,0.7);
  font-size: 0.76rem;
  font-weight: 700;
  margin-top: 0.35rem;
}
.assessment-panel {
  background: var(--off-white);
  border-radius: 12px;
}
.assessment-step { display: none; }
.assessment-step.is-active { display: block; }
.assessment-step-heading { margin-bottom: 1.5rem; }
.assessment-step-heading span {
  display: inline-block;
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}
.assessment-step-heading h3 {
  font-family: 'DM Serif Display', serif;
  color: var(--navy);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.12;
}
.assessment-note {
  border-left: 3px solid var(--teal);
  background: white;
  color: var(--mid);
  font-size: 0.86rem;
  line-height: 1.65;
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
}
.assessment-scoring-grid,
.assessment-band-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.assessment-scoring-grid div,
.assessment-band-grid div {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
}
.assessment-scoring-grid strong,
.assessment-band-grid strong,
.assessment-band-grid span {
  display: block;
  color: var(--navy);
  margin-bottom: 0.25rem;
}
.assessment-scoring-grid span {
  display: block;
  color: var(--teal);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.assessment-question {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  box-sizing: border-box;
  margin: 0 0 0.8rem;
  min-width: 0;
  padding: 1rem;
}
.assessment-question legend {
  box-sizing: border-box;
  color: var(--navy);
  display: block;
  float: left;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  max-width: 100%;
  padding: 0;
  white-space: normal;
  width: 100%;
}
.assessment-options {
  clear: both;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.assessment-options label {
  position: relative;
  cursor: pointer;
}
.assessment-options input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.assessment-options span {
  display: flex;
  justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--off-white);
  color: var(--mid);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.6rem;
  transition: border 0.2s, background 0.2s, color 0.2s;
}
.assessment-options input:checked + span {
  border-color: var(--teal);
  background: var(--teal-pale);
  color: var(--teal-dark);
}
.assessment-options input:focus-visible + span {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.assessment-section-score {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 10px;
  background: var(--navy);
  color: white;
  font-size: 0.9rem;
}
.assessment-result-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  padding: 1.35rem;
}
.assessment-result-card h4 {
  color: var(--teal-dark);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.assessment-result-graphs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.assessment-result-graphs .ai-card {
  min-width: 0;
  padding: 1.5rem;
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(18,52,78,0.12);
}
.radar-card,
.distribution-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.graph-title {
  color: var(--navy);
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 1rem;
  text-align: left;
}
.radar-wrap {
  width: min(430px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
}
.radar {
  width: 100%;
  height: 100%;
  display: block;
}
.radar .grid,
.radar .axis {
  fill: none;
  stroke: #b6dbe6;
  stroke-width: 1.2;
}
.radar .score {
  fill: rgba(32,166,200,0.35);
  stroke: #168cad;
  stroke-width: 3;
}
.radar .data-point {
  fill: #1599bc;
}
.radar .percent {
  fill: var(--navy);
  font-size: 28px;
  font-weight: 700;
}
.radar .status {
  fill: var(--navy);
  font-size: 11px;
}
.radar .axis-label {
  fill: var(--navy);
  font-size: 9px;
  font-weight: 600;
}
.assessment-breakdown {
  border-top: 1px solid var(--border);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-top: 1.5rem;
  padding: 1.25rem;
}
.assessment-breakdown h4,
.assessment-breakdown h5 {
  color: var(--navy);
  font-size: 1rem;
  margin: 0 0 0.75rem;
}
.score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #eef4f7;
  color: var(--navy);
  font-size: 0.84rem;
  padding: 0.45rem 0;
}
.score-row span:last-child {
  color: var(--teal-dark);
  font-weight: 700;
  white-space: nowrap;
}
.score-row.total {
  border-bottom: 0;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}
.distribution-card .score-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.distribution-card .score-result {
  text-align: center;
  margin-bottom: 1rem;
}
.distribution-card .percentage {
  color: var(--teal);
  font-size: 2.65rem;
  font-weight: 800;
  line-height: 1;
}
.distribution-card .status {
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
  margin-top: 0.35rem;
}
.distribution-card .chart-svg {
  display: block;
  width: 100%;
  height: auto;
}
.distribution-card .scale-number {
  fill: var(--navy);
  font-size: 11px;
  font-weight: 700;
}
.distribution-card .raw-score-label {
  fill: var(--mid);
  font-size: 10px;
  font-weight: 600;
}
.distribution-card .segment-label {
  font-size: 11px;
  font-weight: 700;
}
.distribution-card .beginner-text { fill: #f0a400; }
.distribution-card .emerging-text { fill: #1599bc; }
.distribution-card .ready-text { fill: var(--navy); }
.distribution-card .score-caption {
  color: var(--mid);
  font-size: 0.8rem;
  margin-top: 0.45rem;
  text-align: center;
}
.distribution-card .score-caption strong {
  color: var(--navy);
}
.assessment-guidance { margin-top: 1.5rem; }
.assessment-controls {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}
.assessment-controls [hidden] {
  display: none !important;
}
.assessment-controls button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  nav { padding: 0 2rem; }
  .nav-logo-mark { height: 40px; }
  .nav-links a { padding: 0.5rem 0.65rem; }
  .hero, .contact-grid, .ms-grid { gap: 2.5rem; }
  .footer-top { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 2rem; }
  .scroll-fade {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

@media (max-width: 980px) {
  nav { padding: 0 1.5rem; }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    z-index: 1001;
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0.4rem; padding: 0 1.5rem;
    width: 100vw; max-width: 100vw;
    max-height: 0;
    overflow: hidden;
    background: rgba(5,25,38,0.99);
    border-bottom: 1px solid rgba(83,177,205,0.16);
    box-shadow: 0 18px 40px rgba(0,0,0,0.26);
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.24s ease, opacity 0.18s ease, padding 0.18s ease;
  }
  .nav-open .nav-links {
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    padding: 1rem 1.5rem 1.5rem;
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a {
    width: 100%; justify-content: flex-start;
    padding: 0.85rem 1rem; font-size: 0.95rem;
  }
  .nav-cta { margin-left: 0; justify-content: center !important; }
}

@media (max-width: 900px) {
  .hero {
    min-height: auto; grid-template-columns: 1fr;
    padding: 4rem 1.5rem 4.5rem;
  }
  .hero-right {
    display: flex;
    gap: 0.85rem;
    transform: none;
    perspective: none;
  }
  .hero-card {
    padding: 1.15rem;
    border-radius: 12px;
  }
  .hero-card::before { display: none; }
  .stat-row { gap: 0.55rem; }
  .stat-val { font-size: 1.45rem; }
  .stat-label { font-size: 0.66rem; }
  .problem-item {
    padding: 0.55rem 0.65rem;
    gap: 0.55rem;
    font-size: 0.78rem;
  }
  .solution-tag { font-size: 0.58rem; padding: 0.16rem 0.42rem; }
  .hero h1 { font-size: clamp(2.35rem, 9vw, 3.6rem); }
  .hero-sub { max-width: 680px; }
  .section, .section-sm { padding: 4rem 1.5rem; }
  .case-detail-hero { padding-left: 1.5rem; padding-right: 1.5rem; }
  .page-offset > .page-hero + .section { padding-top: 2.5rem; }
  .page-hero { height: 380px; padding: 3.5rem 1.5rem 3.5rem; }
  .services-strip { padding: 1.5rem; }
  .strip-inner { align-items: flex-start; gap: 1rem; }
  .strip-divider { display: none; }
  .build-visual-grid, .offer-preview-grid, .service-block, .about-grid,
  .contact-grid, .ms-grid, .ai-ready-grid, .ai-intro-grid,
  .ai-journey-grid, .toolkit-assessment-grid, .ai-why-grid { grid-template-columns: 1fr; gap: 2rem; }
  .build-image-stack { min-height: auto; }
  .build-image-main { height: 320px; }
  .service-media-card img { height: 240px; }
  .ai-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .ai-summary .result-area {
    grid-column: 1 / -1;
  }
  .ai-summary .result-card {
    max-width: none;
    height: 64px;
  }
  .assessment-result-graphs {
    grid-template-columns: 1fr;
  }
  .service-block { padding: 3rem 0; }
  .service-block-left { position: static; }
  .start-grid, .pain-grid, .proof-grid, .values-grid, .pricing-grid,
  .cases-grid-full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-toolkit-hero {
    align-items: flex-start;
    gap: 1.5rem;
  }
  .toolkit-hero-covers {
    flex-basis: 330px;
    min-width: 280px;
    height: 235px;
    padding-top: 1.5rem;
  }
  .toolkit-hero-cover img {
    width: clamp(88px, 12vw, 122px);
  }
  .toolkit-hero-covers:hover .toolkit-hero-cover-prompt {
    transform: translateX(-86px) translateY(12px) rotate(-11deg);
  }
  .toolkit-hero-covers:hover .toolkit-hero-cover-intro {
    transform: translateX(70px) translateY(12px) rotate(11deg);
  }
  .toolkit-series-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .toolkit-series-card:last-child {
    grid-column: 1 / -1;
    max-width: calc((100% - 1.5rem) / 2);
    justify-self: center;
  }
  .ai-service-grid,
  .workshop-detail-grid,
  .workshop-agenda-grid,
  .assessment-scoring-grid,
  .assessment-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-offer-card { grid-template-columns: 1fr; gap: 1.25rem; }
  .case-meta-grid, .case-solution-grid, .case-outcomes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-detail-layout { grid-template-columns: 1fr; gap: 2rem; }
  .case-detail-layout > :first-child { position: static; }
  .process-steps, .ms-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-logo-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 1rem) / 2);
  }
  .process-line { display: none; }
  .scope-cols, .support-card, .support-features { grid-template-columns: 1fr; }
  .support-card-top, .support-card p, .support-features, .support-card .btn { grid-column: 1; grid-row: auto; }
  .support-card .btn { width: 100%; max-width: 220px; }
  .about-photo-placeholder { max-width: 320px; }
  .founder-photo { max-width: none; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  footer { padding: 3rem 1.5rem 2rem; }
}

@media (max-width: 640px) {
  body > * { max-width: 100%; }
  nav { height: 64px; padding: 0 1rem; }
  .page-offset { padding-top: 64px; }
  .nav-links {
    top: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .nav-open .nav-links {
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    padding-top: 0.8rem;
    padding-bottom: 1.25rem;
  }
  .nav-logo { gap: 0.65rem; }
  .nav-logo-mark { height: 36px; }
  .nav-logo-text { font-size: 1.12rem; }
  .nav-logo-text small { font-size: 0.54rem; letter-spacing: 0.08em; }
  .nav-toggle { width: 40px; height: 40px; }
  #spreadsheets-hero { scroll-margin-top: 64px; }
  .hero { padding: 3rem 1rem 3.5rem; }
  .hero-right { margin-top: -0.75rem; }
  .hero-card-title { font-size: 0.68rem; }
  .hero-eyebrow { font-size: 0.65rem; line-height: 1.4; }
  .hero-actions, .cta-actions, .ai-ready-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .cta-actions .btn, .booking-embed .btn, .ai-ready-actions .btn { justify-content: center; width: 100%; }
  .hero-social-proof { gap: 0.8rem; }
  .price-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 0.9rem 1rem;
  }
  .page-hero { height: auto; min-height: 320px; padding: 2.75rem 1rem 3rem; }
  .ai-toolkit-hero {
    display: block;
  }
  .toolkit-hero-covers {
    min-width: 0;
    height: 178px;
    margin-top: 1.65rem;
    padding-top: 0;
  }
  .toolkit-hero-cover {
    right: 50%;
    transform-origin: bottom center;
  }
  .toolkit-hero-cover img {
    width: clamp(76px, 25vw, 112px);
  }
  .toolkit-hero-cover-prompt { transform: translateX(calc(50% - 5px)) translateY(6px) rotate(-2deg); }
  .toolkit-hero-cover-readiness { transform: translateX(calc(50% - 13px)) translateY(12px) rotate(-4deg); }
  .toolkit-hero-cover-intro { transform: translateX(calc(50% + 5px)) translateY(0) rotate(2deg); }
  .toolkit-hero-covers:hover .toolkit-hero-cover-prompt { transform: translateX(calc(50% - 66px)) translateY(10px) rotate(-10deg); }
  .toolkit-hero-covers:hover .toolkit-hero-cover-readiness { transform: translateX(50%) translateY(-3px) rotate(0deg); }
  .toolkit-hero-covers:hover .toolkit-hero-cover-intro { transform: translateX(calc(50% + 66px)) translateY(10px) rotate(10deg); }
  .page-hero h1 { font-size: clamp(2rem, 12vw, 2.7rem); }
  .page-hero p, .lead, .cta-section p { font-size: 0.94rem; }
  .section, .section-sm { padding: 3rem 1rem; }
  .page-offset > .page-hero + .section { padding-top: 2rem; }
  h2.display { font-size: clamp(1.85rem, 10vw, 2.35rem); }
  .start-card-media {
    width: calc(100% + 2.7rem);
    margin: -1.35rem -1.35rem 1.2rem;
  }
  .build-image-main { height: 240px; }
  .build-floating-card {
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.85rem;
  }
  .approach-photo img,
  .service-media-card img { height: 210px; }
  .ai-wide-media { aspect-ratio: 16 / 9; }
  .ai-inline-media > div,
  .ai-wide-media > div {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.8rem 0.85rem;
  }
  .start-grid, .pain-grid, .proof-grid, .values-grid, .pricing-grid,
  .cases-grid-full, .process-steps, .form-row,
  .credentials, .footer-top { grid-template-columns: 1fr; }
  .toolkit-series-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2rem;
  }
  .toolkit-series-card,
  .toolkit-series-card:last-child {
    max-width: none;
    grid-column: auto;
  }
  .toolkit-cover {
    min-height: 250px;
    padding: 1.25rem 1.25rem 0.35rem;
  }
  .toolkit-cover img {
    width: min(58%, 170px);
  }
  .toolkit-card-body {
    padding: 1.25rem 1.35rem 1.45rem;
  }
  .toolkit-request-preview {
    padding: 0.9rem 0.75rem 0.9rem 0.9rem;
  }
  .ai-service-grid,
  .ai-offer-features,
  .workshop-detail-grid,
  .workshop-agenda-grid,
  .assessment-scoring-grid,
  .assessment-band-grid,
  .assessment-options { grid-template-columns: 1fr; }
  .ai-summary {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 0.9rem;
  }
  .ai-summary .result-area {
    grid-column: auto;
  }
  .ai-summary .track {
    max-width: none;
  }
  .ai-summary .result-card {
    height: 60px;
  }
  .assessment-result-graphs .ai-card {
    padding: 1.15rem;
  }
  .distribution-card .score-header {
    flex-direction: column;
    align-items: stretch;
  }
  .distribution-card .score-result {
    text-align: left;
  }
  .case-meta-grid, .case-solution-grid, .case-outcomes-grid { grid-template-columns: 1fr; }
  .case-detail-hero { padding: 3.5rem 1rem 3rem; }
  .case-detail-actions .btn { width: 100%; justify-content: center; }
  .ms-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-steps { gap: 1rem; margin-top: 2rem; }
  .process-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    text-align: left;
    align-items: start;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.15rem;
  }
  .process-step .step-bubble {
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    margin: 0;
    box-shadow: 0 0 0 5px var(--teal-pale);
    font-size: 1.1rem;
  }
  .process-step h3 { margin-bottom: 0; }
  .pain-card, .pricing-card, .value-card, .case-card-body,
  .booking-embed, .ai-service-card, .ai-offer-card { padding: 1.35rem; }
  .ai-flow-panel::before { left: 20px; }
  .ai-flow-card { margin-left: 1.8rem; padding: 1.15rem; }
  .ai-flow-card span {
    left: -1.8rem;
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }
  .ai-maturity-visual {
    padding: 1.25rem;
  }
  .ai-maturity-visual .maturity-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .ai-maturity-visual .level-list {
    min-height: 0;
    gap: 0.65rem;
  }
  .ai-maturity-visual .level {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--border);
  }
  .ai-maturity-visual .pyramid-wrap {
    margin: 0 auto;
    max-width: 260px;
  }
  .toolkit-spider-card {
    padding: 1rem;
  }
  .toolkit-spider-card svg {
    max-width: 520px;
    margin: 0 auto;
  }
  .spider-label {
    font-size: 12px;
  }
  .case-card-header { padding: 1.5rem; }
  .mini-offer-card, .feature-item, .credential, .contact-method {
    padding: 1rem; gap: 0.8rem;
  }
  .contact-method { align-items: flex-start; }
  .contact-method-icon { width: 36px; height: 36px; }
  .service-number { font-size: 3rem; }
  .service-block h3 { font-size: 1.35rem; }
  .pricing-price-val { font-size: 1.8rem; }
  .support-card { padding: 1.25rem; gap: 1rem; }
  .support-features { gap: 0.55rem; }
  .assessment-controls {
    flex-direction: column-reverse;
  }
  .assessment-controls .btn {
    justify-content: center;
    width: 100%;
  }
  .support-card .btn { max-width: none; }
  .ms-logo-card { padding: 1rem; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .footer-legal { flex-wrap: wrap; gap: 1rem; }
  .booking-full-width iframe {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: 720px;
    min-width: 0 !important;
  }
}

@media (max-width: 420px) {
  .nav-logo-mark { height: 32px; }
  .nav-logo-text { font-size: 1rem; }
  .nav-logo-text small { font-size: 0.48rem; }
  .hero h1 { font-size: 2.25rem; }
  .btn { padding-left: 1rem; padding-right: 1rem; }
  .strip-items { gap: 0.6rem; }
  .strip-item { width: 100%; justify-content: flex-start; }
  .footer-logo img { height: 36px; }
}


/* ══════════════════════════════════════════
   DROPDOWN NAV — hover gap fix
   Replaces margin-top with padding-top so
   the hover zone is unbroken on all pages
   that use dropdowns.
══════════════════════════════════════════ */

.nav-links .has-dropdown .dropdown {
  margin-top: 0 !important;
  padding-top: 0.75rem;
}


/* ══════════════════════════════════════════
   DOCS INDEX PAGE  (docs.html)
══════════════════════════════════════════ */

.docs-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}
.docs-product-card {
  background: #fff;
  border: 1px solid #e2e6ea;
  border-radius: 14px;
  padding: 2rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.docs-product-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  border-color: #c9d3dc;
}
.docs-product-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.docs-product-icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: linear-gradient(135deg, #056281 0%, #051926 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.docs-product-meta { flex: 1; }
.docs-product-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-dark);
  background: rgba(7,131,150,0.08);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  margin-top: 0.35rem;
}
.docs-product-meta h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  color: var(--navy-deep);
}
.docs-product-description {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--mid);
  margin: 0 0 1.5rem;
  flex: 1;
}
.docs-product-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #f0f2f5;
}
.docs-product-stat { text-align: center; }
.docs-product-stat-val {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy-deep);
}
.docs-product-stat-label {
  font-size: 0.78rem;
  color: var(--mid);
}
.docs-product-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.docs-product-actions .btn { text-align: center; display: block; }
.docs-product-actions .btn-link-small {
  font-size: 0.875rem;
  color: var(--mid);
  text-decoration: none;
  text-align: center;
  padding: 0.4rem;
  border-radius: 6px;
  transition: color 0.2s;
}
.docs-product-actions .btn-link-small:hover { color: var(--teal-dark); }
.docs-intro-strip {
  display: flex;
  gap: 3rem;
  align-items: center;
  flex-wrap: wrap;
}
.docs-intro-strip-stat {
  text-align: center;
  flex: 1;
  min-width: 120px;
}
.docs-intro-strip-stat strong {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--teal-dark);
}
.docs-intro-strip-stat span {
  font-size: 0.875rem;
  color: var(--mid);
}
.docs-coming-soon {
  opacity: 0.55;
  pointer-events: none;
}
@media (max-width: 600px) {
  .docs-product-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════
   CRM PRODUCT PAGE  (Dove365-CRM-Starter.html)
══════════════════════════════════════════ */

.product-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.pricing-note-box {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
}
.pricing-note-box strong { color: #fff; }
.faq-accordion {
  max-width: 860px;
  margin: 2.5rem auto 0;
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 1.4rem 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--near-black);
  gap: 1.25rem;
  transition: color 0.2s;
}
.faq-question:hover { color: var(--teal-dark); }
.faq-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1;
  color: var(--teal-dark);
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  display: none;
  padding: 0 0 1.5rem 0;
  color: var(--mid);
  line-height: 1.75;
  font-size: 1rem;
}
.faq-item.open .faq-answer { display: block; }
.feature-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.kb-cta-box {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem 3rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}
.kb-cta-box-text { flex: 1; min-width: 200px; }
.kb-cta-box-text h3 { margin: 0 0 0.5rem; font-size: 1.3rem; }
.kb-cta-box-text p { margin: 0 0 1.25rem; color: var(--mid); line-height: 1.65; }
@media (max-width: 700px) {
  .feature-grid-2col { grid-template-columns: 1fr; }
  .product-hero-actions { flex-direction: column; }
}


/* ══════════════════════════════════════════
   CRM DOCUMENTATION HUB  (crm-docs.html)
══════════════════════════════════════════ */

.docs-page {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
  align-items: start;
}
.docs-sidebar {
  position: sticky;
  top: 88px;
  padding: 2.5rem 1.5rem 2.5rem 0;
  border-right: 1px solid var(--border);
  min-height: 300px;
}
.docs-sidebar-product {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.docs-sidebar-product-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--teal-dark), var(--navy-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.docs-sidebar-product-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.25;
}
.docs-sidebar-product-sub { font-size: 0.75rem; color: var(--mid); }
.docs-sidebar-section { margin-bottom: 1.75rem; }
.docs-sidebar-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  padding: 0 0.5rem;
  margin-bottom: 0.4rem;
  display: block;
}
.docs-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
  color: var(--navy);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}
.docs-sidebar-link:hover { background: rgba(7,131,150,0.07); color: var(--teal); }
.docs-sidebar-link.active { background: rgba(7,131,150,0.1); color: var(--teal); font-weight: 600; }
.docs-sidebar-divider { height: 1px; background: var(--border); margin: 1rem 0; }
.docs-main { padding: 2.5rem 0 2.5rem 3rem; }
.docs-section { scroll-margin-top: 100px; }
.docs-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border);
}
.docs-section-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.docs-section-icon.green { background: rgba(7,131,150,0.1); color: var(--teal); }
.docs-section-icon.blue  { background: rgba(35,54,68,0.08); color: var(--navy); }
.docs-section-icon.amber { background: rgba(201,168,76,0.12); color: #9a7a20; }
.docs-section-icon.slate { background: rgba(100,116,139,0.1); color: var(--mid); }
.docs-section-header h2 { font-size: 1.3rem; font-weight: 700; color: var(--navy-deep); margin: 0; }
.docs-section-desc { font-size: 0.95rem; color: var(--mid); margin: -0.5rem 0 1.5rem; line-height: 1.6; }
.docs-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}
.docs-guide-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}
.docs-guide-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  border-color: var(--slate);
  transform: translateY(-1px);
}
.docs-guide-card-type {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.docs-guide-card-type.user  { color: var(--teal); }
.docs-guide-card-type.admin { color: var(--navy); }
.docs-guide-card-type.ref   { color: #9a7a20; }
.docs-guide-card-title { font-size: 0.975rem; font-weight: 600; color: var(--navy-deep); margin-bottom: 0.4rem; line-height: 1.35; }
.docs-guide-card-desc { font-size: 0.85rem; color: var(--mid); line-height: 1.55; flex: 1; margin-bottom: 1rem; }
.docs-guide-card-cta { font-size: 0.8rem; font-weight: 600; color: var(--teal); display: flex; align-items: center; gap: 0.25rem; }
.docs-start-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}
.docs-start-card {
  background: linear-gradient(135deg, var(--teal-dark) 0%, var(--navy-deep) 100%);
  border-radius: 10px;
  padding: 1.5rem;
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: opacity 0.2s;
}
.docs-start-card:hover { opacity: 0.9; }
.docs-start-card .step-num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.docs-start-card h3 { font-size: 1rem; font-weight: 700; color: #fff; margin: 0; }
.docs-start-card p { font-size: 0.8rem; opacity: 0.8; line-height: 1.5; margin: 0; }
.docs-search-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  margin-bottom: 2.5rem;
  color: var(--slate);
  font-size: 0.9rem;
}
.docs-search-bar svg { flex-shrink: 0; opacity: 0.6; }
@media (max-width: 860px) {
  .docs-page { grid-template-columns: 1fr; padding: 0 1.25rem 3rem; }
  .docs-sidebar {
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
  }
  .docs-sidebar-section { margin-bottom: 0; }
  .docs-sidebar-section-label { display: none; }
  .docs-sidebar-product { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
  .docs-sidebar-divider { display: none; }
  .docs-main { padding: 2rem 0 0; }
  .docs-start-strip { grid-template-columns: 1fr; }
  .docs-guide-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .docs-guide-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════
   RELEASE NOTES PAGE
══════════════════════════════════════════ */

.release-version-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(7,131,150,0.08);
  border: 1px solid rgba(7,131,150,0.2);
  border-radius: 100px;
  padding: 0.35rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--teal-dark);
  margin-bottom: 1.5rem;
}
.release-block {
  margin-bottom: 3rem;
}
.release-block-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.25rem;
}
.release-block-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--navy-deep); margin: 0; }
.release-block-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
}
.release-block-icon.teal  { background: rgba(7,131,150,0.1); color: var(--teal); }
.release-block-icon.navy  { background: rgba(35,54,68,0.08); color: var(--navy); }
.release-block-icon.amber { background: rgba(201,168,76,0.12); color: #9a7a20; }
.release-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.release-list li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--near-black);
}
.release-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  margin-top: 0.6rem;
}
.release-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 2rem;
}
.release-check-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--near-black);
}
.release-check-item::before {
  content: '✓';
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--teal);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .release-check-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════
   RESPONSIVE LAYOUT UTILITIES
   Replaces inline style grids so layouts
   collapse correctly on mobile.
══════════════════════════════════════════ */

/* 1.1fr / 0.9fr two-column feature layout */
.layout-2col {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: start;
  margin-top: 3rem;
}

/* equal two-column layout */
.layout-2col-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  margin-top: 3rem;
}

/* 5-step process override */
.process-steps-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  margin-top: 3.5rem;
}

/* 5-column footer (docs.html) */
.footer-5col {
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr !important;
  gap: 2rem !important;
}

@media (max-width: 1100px) {
  .footer-5col { grid-template-columns: 1.4fr 1fr 1fr 1fr !important; }
}

@media (max-width: 900px) {
  .layout-2col,
  .layout-2col-equal { grid-template-columns: 1fr !important; gap: 2rem; }
  .process-steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .footer-5col { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
}

@media (max-width: 640px) {
  .footer-5col { grid-template-columns: 1fr !important; }
  .process-steps-5 { grid-template-columns: 1fr !important; }
}


/* ══════════════════════════════════════════
   MOBILE NAV DROPDOWNS
   Makes .has-dropdown work on touch devices
   inside the collapsed mobile nav (≤980px).
══════════════════════════════════════════ */

@media (max-width: 980px) {
  .nav-links .has-dropdown .dropdown {
    position: static !important;
    display: none;
    background: rgba(255,255,255,0.05);
    border: none;
    border-radius: 6px;
    box-shadow: none;
    padding: 0.25rem 0 0.5rem 0.75rem;
    margin: 0.25rem 0 0.25rem;
    min-width: 0;
  }
  .nav-links .has-dropdown.open .dropdown { display: block; }
  .nav-links .has-dropdown > a::after {
    content: ' ▾';
    font-size: 0.7em;
    opacity: 0.5;
  }
  .nav-links .has-dropdown.open > a::after { content: ' ▴'; }
}


/* ══════════════════════════════════════════
   CRM DOCS SIDEBAR — MOBILE
   Collapses to a horizontal scrollable
   pill-strip below 860px.
══════════════════════════════════════════ */

@media (max-width: 860px) {
  .docs-page { grid-template-columns: 1fr !important; padding: 0 1rem 3rem; }
  .docs-sidebar {
    position: static !important;
    top: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    display: block;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .docs-sidebar::-webkit-scrollbar { display: none; }
  .docs-sidebar-product { display: none; }
  .docs-sidebar-divider { display: none; }
  .docs-sidebar-section {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: top;
  }
  .docs-sidebar-section-label { display: none; }
  .docs-sidebar-link {
    display: inline-block;
    white-space: nowrap;
    margin: 0 0.25rem 0.35rem 0;
    background: rgba(7,131,150,0.06);
    border: 1px solid rgba(7,131,150,0.18);
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--navy);
    line-height: 1.4;
  }
  .docs-sidebar-link:hover { background: rgba(7,131,150,0.12); color: var(--teal); }
  .docs-main { padding: 1.5rem 0 0 !important; }
  .docs-start-strip { grid-template-columns: 1fr !important; }
  .docs-guide-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .docs-guide-grid { grid-template-columns: 1fr !important; }
  .docs-sidebar { padding: 0.5rem 0; }
}


/* ══════════════════════════════════════════
   MOBILE — COLLAPSIBLE DOCS SIDEBAR (v2)
   Replaces the horizontal scrollable strip
   with a <details> collapsible TOC.
══════════════════════════════════════════ */

/* Desktop: hide the <details> toggle, always show */
.docs-toc-summary { display: none; }

@media (max-width: 860px) {
  /* Reset the scrollable strip entirely */
  .docs-sidebar {
    position: static !important;
    overflow: visible !important;
    white-space: normal !important;
    display: block !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--border);
    border-right: none;
  }

  /* <details> wraps all sidebar content */
  .docs-toc { margin: 0; }
  .docs-toc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .docs-toc-summary::-webkit-details-marker { display: none; }
  .docs-toc-summary::marker { display: none; }
  .docs-toc-icon {
    font-size: 0.65rem;
    color: var(--mid);
    transition: transform 0.2s;
    display: inline-block;
  }
  .docs-toc[open] .docs-toc-icon { transform: rotate(180deg); }

  /* Sidebar items when open */
  .docs-sidebar-product {
    display: flex !important;
    padding: 0.75rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
  }
  .docs-sidebar-section {
    display: block !important;
    padding: 0.1rem 1.25rem;
    margin-bottom: 0;
  }
  .docs-sidebar-section-label {
    display: block;
    padding: 0.6rem 0.5rem 0.2rem;
    font-size: 0.65rem;
  }
  .docs-sidebar-link {
    display: flex !important;
    background: none !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 0.875rem;
    padding: 0.35rem 0.5rem !important;
    white-space: normal !important;
    margin: 0 !important;
    color: var(--navy);
  }
  .docs-sidebar-link:hover { background: rgba(7,131,150,0.06) !important; color: var(--teal) !important; }
  .docs-sidebar-divider {
    display: block !important;
    margin: 0.35rem 1.25rem !important;
  }
  .docs-toc[open] > *:not(summary):last-child { padding-bottom: 0.75rem; }
  .docs-main { padding: 1.5rem 0 0 !important; }
}


/* ══════════════════════════════════════════
   MOBILE — NAV DROPDOWN FIX (v2)
   Fixes visual overlap of parent + sub items,
   and removes the annoying ▾/▴ pseudo-content
   since JS controls open/close.
══════════════════════════════════════════ */

@media (max-width: 980px) {
  /* Dropdown container: static, hidden by default */
  .nav-links .has-dropdown .dropdown {
    position: static !important;
    display: none !important;
    background: transparent !important;
    border: none !important;
    border-left: 2px solid rgba(83,177,205,0.22) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.1rem 0 0.35rem !important;
    margin: 0 0 0.35rem 1rem !important;
    min-width: 0 !important;
  }
  .nav-links .has-dropdown.open .dropdown { display: block !important; }

  /* Dropdown links: subordinate styling, no overlap with parent */
  .nav-links .has-dropdown .dropdown a {
    display: block !important;
    width: 100% !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.83rem !important;
    color: rgba(255,255,255,0.55) !important;
    background: transparent !important;
    border-radius: 4px !important;
  }
  .nav-links .has-dropdown .dropdown a:hover {
    background: rgba(83,177,205,0.1) !important;
    color: rgba(255,255,255,0.9) !important;
  }
  .nav-links .has-dropdown .dropdown .dropdown-label { display: none !important; }

  /* Parent trigger: small arrow via CSS, no layout shift */
  .nav-links .has-dropdown > a::after {
    content: ' ▾';
    font-size: 0.65em;
    opacity: 0.45;
    margin-left: 0.2em;
  }
  .nav-links .has-dropdown.open > a::after { content: ' ▴'; }
}


/* ══════════════════════════════════════════
   MOBILE — MISC LAYOUT FIXES
══════════════════════════════════════════ */

/* Breadcrumb: prevent wrapping, allow horizontal scroll */
.breadcrumb {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb a, .breadcrumb span { white-space: nowrap; flex-shrink: 0; }

/* Pricing featured badge: never wrap */
.featured-badge { white-space: nowrap; }

/* KB box: reduce padding on mobile */
@media (max-width: 640px) {
  .kb-cta-box { padding: 1.5rem 1.25rem; gap: 1.25rem; }
}

/* Wide guide cards (FAQ, Release Notes): stack on mobile */
.docs-guide-card-wide {
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}
@media (max-width: 640px) {
  .docs-guide-card-wide { flex-direction: column !important; align-items: flex-start !important; }
  .docs-guide-card-wide .docs-guide-card-cta { margin-top: 0.5rem; }
}

/* Release notes mobile */
@media (max-width: 640px) {
  .release-version-badge { font-size: 0.78rem; padding: 0.3rem 0.75rem; flex-wrap: wrap; gap: 0.25rem; }
  .release-block { margin-bottom: 2rem; }
  .release-check-grid { grid-template-columns: 1fr; }
  code { word-break: break-all; }
}


/* ══════════════════════════════════════════
   RELEASE NOTES — MOBILE FIXES
══════════════════════════════════════════ */

.release-list li {
  /* Ensure text doesn't escape the flex container */
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.release-list code {
  display: inline;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.release-block p { overflow-wrap: break-word; word-break: break-word; }

@media (max-width: 640px) {
  /* Hide logo image in kb-cta-box on mobile — it creates too much left indent */
  .kb-cta-box > img { display: none; }
  /* Release notes */
  .release-version-badge {
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
  .release-block-header h3 { font-size: 1rem; }
  .release-list li { font-size: 0.9rem; }
}


/* ══════════════════════════════════════════
   RELEASE LIST — fix layout (v2)
   Replaces display:flex with block + absolute
   dot so text fills the full available width
   and wraps naturally on mobile.
══════════════════════════════════════════ */

.release-list li {
  display: block !important;
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--near-black);
  overflow-wrap: break-word;
  word-break: break-word;
  gap: unset;
  min-width: unset;
}
.release-list li::before {
  content: '';
  position: absolute !important;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: unset;
  margin-top: 0;
}
.release-list code {
  font-size: 0.85em;
  word-break: normal;
  overflow-wrap: break-word;
}


/* ══════════════════════════════════════════════════════════════
   ✦ LAB — CUTTING-EDGE INTERACTION LAYER
   Styles for the interactive neural-network hero, the live
   "Dove365 Copilot" console, cursor spotlight, magnetic CTAs,
   3D tilt and count-up. Paired with assets/js/lab.js.
══════════════════════════════════════════════════════════════ */

/* ── motion keyframes ── */
@keyframes auroraDrift {
  0%   { transform: translate3d(-6%, -3%, 0) rotate(0deg) scale(1.05); }
  50%  { transform: translate3d(6%, 4%, 0) rotate(8deg) scale(1.18); }
  100% { transform: translate3d(-6%, -3%, 0) rotate(0deg) scale(1.05); }
}
@keyframes aiSpin { to { transform: rotate(360deg); } }
@keyframes aiBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(83,177,205,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(83,177,205,0); }
  100% { box-shadow: 0 0 0 0 rgba(83,177,205,0); }
}
@keyframes cueFloat { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* ══ NEURAL HERO ══ */
.ai-neural-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 72px);
  display: flex;
  align-items: center;
  padding: 5.5rem 4rem 6rem;
  background:
    radial-gradient(circle at 78% 30%, rgba(7,131,150,0.20), transparent 46%),
    radial-gradient(circle at 12% 80%, rgba(201,168,76,0.10), transparent 44%),
    linear-gradient(150deg, #0c1a23 0%, #112634 52%, #0a161e 100%);
  overflow: hidden;
}
.neural-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* animated aurora wash */
.ai-neural-hero::before {
  content: '';
  position: absolute; inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 44% at 70% 28%, rgba(83,177,205,0.22), transparent 70%),
    radial-gradient(34% 40% at 26% 72%, rgba(7,131,150,0.20), transparent 70%),
    radial-gradient(30% 36% at 50% 50%, rgba(201,168,76,0.10), transparent 72%);
  filter: blur(36px);
  opacity: 0.85;
  mix-blend-mode: screen;
  animation: auroraDrift 22s ease-in-out infinite;
}
/* readability veil so left copy stays crisp over the canvas */
.neural-veil {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(10,22,30,0.78) 0%, rgba(10,22,30,0.32) 42%, transparent 70%),
    linear-gradient(0deg, rgba(10,22,30,0.55), transparent 32%);
}
.neural-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: center;
  gap: 4rem;
}
.neural-copy { max-width: 580px; }
.neural-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: rgba(83,177,205,0.12);
  border: 1px solid rgba(83,177,205,0.28);
  color: var(--teal-light);
  font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.4rem 0.95rem; border-radius: 100px;
  margin-bottom: 1.6rem;
}
.neural-eyebrow .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-light);
  animation: livePulse 2.2s ease-out infinite;
}
.neural-headline {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.6rem, 5.4vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.012em;
  color: #fff;
  margin-bottom: 1.4rem;
  text-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
.neural-headline .line { display: block; }
.neural-headline .grad {
  background: linear-gradient(100deg, var(--teal-light) 0%, #8fe3c6 46%, var(--gold-light) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-style: italic;
}
.neural-headline .is-scrambling { color: var(--teal-light); }
.neural-sub {
  color: rgba(255,255,255,0.68);
  font-size: 1.06rem; line-height: 1.72;
  max-width: 484px; margin-bottom: 2.1rem;
}
.neural-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.neural-metrics {
  display: flex; gap: 2.4rem; flex-wrap: wrap;
  padding-top: 1.7rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.neural-metric strong {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-size: 2.05rem; line-height: 1; color: #fff;
  margin-bottom: 0.35rem;
  white-space: nowrap;
}
.neural-metric span {
  font-size: 0.74rem; color: rgba(255,255,255,0.52);
  letter-spacing: 0.04em;
}

/* ══ LIVE AI CONSOLE ══ */
.neural-console-wrap { perspective: 1100px; }
.ai-console {
  position: relative;
  width: 100%; max-width: 470px; margin-left: auto;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(22,40,52,0.94), rgba(11,22,30,0.9));
  border: 1px solid rgba(83,177,205,0.22);
  box-shadow: 0 44px 100px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1);
  will-change: transform;
}
.ai-console-head {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
}
.ai-dots { display: flex; gap: 6px; }
.ai-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.ai-dots span:nth-child(1) { background: rgba(83,177,205,0.7); }
.ai-title {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.82rem; font-weight: 600; color: #fff;
  margin-left: 0.2rem;
}
.ai-title svg { width: 15px; height: 15px; }
.ai-live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-light);
  background: rgba(83,177,205,0.1);
  border: 1px solid rgba(83,177,205,0.22);
  padding: 0.2rem 0.55rem; border-radius: 100px;
}
.ai-live .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal-light);
  animation: livePulse 2s ease-out infinite;
}
.ai-feed {
  height: 326px;
  padding: 1.1rem;
  display: flex; flex-direction: column; gap: 0.85rem;
  overflow: hidden;
  transition: opacity 0.45s ease;
  -webkit-mask-image: linear-gradient(transparent, #000 11%, #000 90%, transparent);
  mask-image: linear-gradient(transparent, #000 11%, #000 90%, transparent);
}
.ai-feed.ai-feed-clear { opacity: 0; }
.ai-row { display: flex; gap: 0.6rem; align-items: flex-start; }
.ai-row-user { flex-direction: row-reverse; }
.ai-avatar {
  width: 27px; height: 27px; border-radius: 8px;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em;
}
.ai-row-user .ai-avatar { background: rgba(83,177,205,0.16); color: var(--teal-light); }
.ai-row-assistant .ai-avatar {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff; font-size: 0.8rem;
  box-shadow: 0 6px 16px rgba(7,131,150,0.4);
}
.ai-bubble {
  font-size: 0.83rem; line-height: 1.55;
  padding: 0.62rem 0.82rem; border-radius: 13px;
  max-width: 85%;
}
.ai-row-user .ai-bubble {
  background: rgba(83,177,205,0.15); color: #ecf7fb;
  border-radius: 13px 13px 4px 13px;
}
.ai-row-assistant .ai-bubble {
  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.84);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 13px 13px 13px 4px;
}
.ai-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.55rem; }
.ai-tool {
  display: inline-flex; align-items: center; gap: 0.42rem;
  font-size: 0.68rem;
  padding: 0.26rem 0.58rem; border-radius: 100px;
  background: rgba(7,131,150,0.12);
  border: 1px solid rgba(83,177,205,0.22);
  color: var(--teal-light);
}
.ai-tool-spin {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid rgba(83,177,205,0.3);
  border-top-color: var(--teal-light);
  animation: aiSpin 0.7s linear infinite;
}
.ai-tool-check { color: var(--teal-light); font-size: 0.72rem; line-height: 1; }
.ai-caret {
  display: inline-block; width: 7px; height: 0.95em;
  vertical-align: -0.12em;
  background: var(--teal-light); margin-left: 2px; border-radius: 1px;
  animation: aiBlink 1.05s steps(1) infinite;
}
.ai-console-foot {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.72rem 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 0.68rem; color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.015);
}
.ai-console-foot .shield { color: var(--teal-light); }

/* scroll cue for the neural hero */
.neural-cue {
  position: absolute; left: 50%; bottom: 1.7rem; z-index: 3;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.5);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  animation: cueFloat 2.4s ease-in-out infinite;
}
.neural-cue::after {
  content: ''; display: block; width: 1px; height: 34px;
  margin: 0.65rem auto 0;
  background: linear-gradient(transparent, var(--teal-light), transparent);
}

/* ══ CURSOR SPOTLIGHT (injected overlay) ══ */
.has-spotlight { position: relative; isolation: isolate; }
.has-spotlight > *:not(.card-spotlight) { position: relative; z-index: 1; }
.card-spotlight {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(210px circle at var(--mx, -300px) var(--my, -300px),
              rgba(83,177,205,0.16), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.has-spotlight:hover .card-spotlight { opacity: 1; }

/* stable CTAs */
.btn-primary, .nav-cta { transition: background 0.2s, box-shadow 0.2s; }

/* ══ RESPONSIVE ══ */
@media (max-width: 980px) {
  .ai-neural-hero { min-height: auto; padding: 4.5rem 1.5rem 5rem; }
  .neural-hero-inner { grid-template-columns: 1fr; gap: 2.6rem; }
  .neural-copy { max-width: 640px; }
  /* Opaque console on mobile: the translucent bg + backdrop-filter let the
     hero's two-tone wash show through, reading as a grey/blue seam. */
  .ai-console {
    max-width: 100%; margin-left: 0;
    background: linear-gradient(165deg, #182a37, #0b161e);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .neural-veil {
    background:
      linear-gradient(180deg, rgba(10,22,30,0.5), rgba(10,22,30,0.2) 40%, transparent 65%),
      linear-gradient(0deg, rgba(10,22,30,0.55), transparent 30%);
  }
  /* tilt is pointer-driven only; reset any inline transform on touch */
  .ai-console[style] { transform: none !important; }
}
@media (max-width: 640px) {
  .ai-neural-hero { padding: 3.5rem 1rem 4rem; }
  .ai-neural-hero::before { opacity: 0.6; filter: blur(28px); }
  .neural-headline { font-size: clamp(2.15rem, 11vw, 3.1rem); }
  .neural-sub { font-size: 0.96rem; }
  .neural-actions { flex-direction: column; align-items: stretch; }
  .neural-actions .btn { justify-content: center; width: 100%; }
  .neural-metrics { gap: 1rem; flex-wrap: nowrap; }
  .neural-metric { flex: 1 1 0; min-width: 0; }
  .neural-metric strong { font-size: 1.45rem; white-space: nowrap; }
  .ai-feed { height: 300px; }
  .neural-cue { display: none; }
}

/* reduced-motion: kill aurora + cue drift, keep everything legible */
@media (prefers-reduced-motion: reduce) {
  .ai-neural-hero::before { animation: none; }
  .neural-cue { animation: none; }
  .ai-tool-spin { animation: none; }
  .ai-caret { animation: none; opacity: 1; }
}


/* ══════════════════════════════════════════════════════════════
   ✦ HOMEPAGE SHOWCASE — device frame that switches between the
   real CRM app screenshots and the live Copilot console.
══════════════════════════════════════════════════════════════ */
@keyframes showcaseFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* favour the showcase column slightly on the home hero */
.ai-neural-hero.home-showcase .neural-hero-inner { grid-template-columns: 0.9fr 1.1fr; }

.hero-trust { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; margin-top: 2rem; }
.hero-trust span {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.74rem; color: rgba(255,255,255,0.62);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.36rem 0.72rem; border-radius: 100px;
}
.hero-trust span::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal-light);
}

/* the showcase = a 3D deck where whole app windows tumble in and out,
   a persistent progress bar, and the tab switcher below. */
.showcase {
  position: relative;
  width: 100%; max-width: 660px; margin-left: auto;
}
.showcase-deck {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: #08121a;
  perspective: 1700px;
}

/* ── wild whole-window flip ── each window tumbles in from one side with a
   3D spin + scale overshoot + motion blur, while the outgoing window whips
   out the opposite side, so they collide across the deck. */
@keyframes frameSlam {
  0%   { opacity: 0; transform: translateX(64%) rotateY(-94deg) rotateX(12deg) rotateZ(-10deg) scale(0.42); filter: blur(26px); }
  40%  { opacity: 1; }
  62%  { transform: translateX(-7%) rotateY(15deg) rotateX(-5deg) rotateZ(3deg) scale(1.12); filter: blur(0); }
  82%  { transform: translateX(3%) rotateY(-6deg) rotateX(2deg) rotateZ(-1.5deg) scale(0.97); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes frameSlamAlt {
  0%   { opacity: 0; transform: translateX(-64%) rotateY(94deg) rotateX(12deg) rotateZ(10deg) scale(0.42); filter: blur(26px); }
  40%  { opacity: 1; }
  62%  { transform: translateX(7%) rotateY(-15deg) rotateX(-5deg) rotateZ(-3deg) scale(1.12); filter: blur(0); }
  82%  { transform: translateX(-3%) rotateY(6deg) rotateX(2deg) rotateZ(1.5deg) scale(0.97); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
.showcase-window {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: #0c1a23;
  border: 1px solid rgba(83,177,205,0.22);
  box-shadow: 0 40px 90px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
  opacity: 0; pointer-events: none;
  transform-origin: 50% 50%;
  transform: translateX(-66%) rotateY(88deg) rotateX(-10deg) rotateZ(9deg) scale(0.44);
  filter: blur(18px);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.62,-0.34,0.3,1.45), filter 0.5s ease;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}
.showcase-window:nth-child(even) {
  transform: translateX(66%) rotateY(-88deg) rotateX(-10deg) rotateZ(-9deg) scale(0.44);
}
.showcase-window.is-active {
  opacity: 1; pointer-events: auto; z-index: 3;
  transform: none; filter: none;
  animation: frameSlam 0.98s cubic-bezier(0.2,0.84,0.26,1.04) both;
}
.showcase-window:nth-child(even).is-active { animation-name: frameSlamAlt; }

/* window chrome (screenshot windows only — the AI window uses the console header) */
.showcase-bar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
}
.showcase-dots { display: flex; gap: 6px; flex-shrink: 0; }
.showcase-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.showcase-dots span:first-child { background: rgba(83,177,205,0.7); }
.showcase-urlbar {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.72rem; color: rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 100px; padding: 0.28rem 0.8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.showcase-urlbar svg { flex-shrink: 0; opacity: 0.7; }
.showcase-shot { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #0a161e; }
.showcase-shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}

/* AI window — console fills it edge to edge; its header is the chrome */
.showcase-window-ai { background: linear-gradient(165deg, rgba(18,34,45,0.98), rgba(10,20,28,0.98)); }
.showcase-window-ai .ai-console {
  width: 100%; height: 100%; max-width: none; margin: 0;
  border: 0; border-radius: 0; box-shadow: none;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  display: flex; flex-direction: column;
}
.showcase-window-ai .ai-feed { height: auto; flex: 1; min-height: 0; }

/* auto-advance progress (persistent, below the deck) */
.showcase-progress {
  position: relative; height: 2px; margin-top: 0.7rem;
  background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden;
}
.showcase-progress i {
  display: block; height: 100%; width: 100%;
  transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--teal), var(--teal-light));
}

.showcase-tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.4rem; margin-top: 1rem;
}
.showcase-tab {
  display: inline-flex; align-items: center; gap: 0.42rem;
  font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 500;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.42rem 0.85rem; border-radius: 100px;
  cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.showcase-tab:hover { color: #fff; border-color: rgba(83,177,205,0.45); transform: translateY(-1px); }
.showcase-tab.is-active {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 8px 20px rgba(7,131,150,0.4);
}
.showcase-tab .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.65; }
.showcase-tab svg { width: 13px; height: 13px; }

@media (max-width: 980px) {
  .ai-neural-hero.home-showcase .neural-hero-inner { grid-template-columns: 1fr; }
  .showcase { max-width: 100%; margin-left: 0; }
}
@media (max-width: 640px) {
  .showcase-urlbar { display: none; }
  .showcase-tabs { gap: 0.3rem; }
  .showcase-tab { font-size: 0.7rem; padding: 0.36rem 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-window,
  .showcase-window:nth-child(even) {
    transition: opacity 0.25s ease;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .showcase-progress i { display: none; }
}

/* ══════════════════════════════════════════
   TESTIMONIAL (shared, placeholder-ready)
   Used on cornerstone service pages.
══════════════════════════════════════════ */
.testimonial-band {
  background:
    radial-gradient(circle at 82% 20%, rgba(83,177,205,0.12), transparent 32%),
    linear-gradient(135deg, rgba(232,201,122,0.10), transparent 40%),
    var(--off-white);
}
.testimonial {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.testimonial-quote-mark {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-size: 4.5rem;
  line-height: 0.3;
  color: var(--teal-light);
  margin-bottom: 1.25rem;
}
.testimonial blockquote {
  font-family: 'DM Serif Display', serif;
  font-size: 1.7rem;
  line-height: 1.45;
  color: var(--navy);
  margin: 0 0 2rem;
}
.testimonial blockquote em { color: var(--teal-dark); font-style: italic; }
.testimonial-author {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  text-align: left;
}
.testimonial-avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gradient-navy-teal);
  display: grid;
  place-items: center;
  color: #fff;
  font-family: 'DM Serif Display', serif;
  font-size: 1.15rem;
}
.testimonial-meta strong { display: block; color: var(--near-black); font-size: 0.95rem; }
.testimonial-meta span { color: var(--mid); font-size: 0.82rem; }
@media (max-width: 640px) {
  .testimonial blockquote { font-size: 1.3rem; }
  .testimonial-quote-mark { font-size: 3.5rem; }
}

/* ══════════════════════════════════════════
   SERVICE-PAGE REFINEMENTS (v51)
══════════════════════════════════════════ */

/* Sticky section heading — pins the title column while the
   taller content column scrolls past (as on the AI Enablement page). */
.sticky-heading {
  position: sticky;
  top: 96px;
  align-self: start;
}
@media (max-width: 900px) {
  .sticky-heading { position: static; top: auto; }
}

/* Opt-in top-alignment for individual images where a face would otherwise
   be cropped (applied per image, not globally). */
.media-top { object-position: center top !important; }

/* Sticky media column — pins an image while the taller column beside it scrolls.
   On mobile revert to relative (not static) so the media's absolutely-positioned
   caption stays anchored to it. */
.sticky-media { position: sticky; top: 96px; align-self: start; }
@media (max-width: 900px) {
  .sticky-media { position: relative; top: auto; }
}

/* Page-hero variant that carries call-to-action buttons (service pages).
   Matches services.html hero but grows to fit the actions. */
.page-hero.page-hero-cta {
  height: auto;
  min-height: 360px;
  padding-bottom: 3.75rem;
}
.page-hero .hero-actions { margin-top: 1.9rem; }
.page-hero .page-hero-inner { max-width: 760px; }
@media (max-width: 640px) {
  .page-hero.page-hero-cta { padding: 3.5rem 1.5rem 2.75rem; min-height: 0; }
}

/* AI Enablement — "What We Help With": image left, product icons right. */
.ai-help-split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 3rem;
  align-items: start;
  margin-top: 3rem;
}
/* Image matches the Start Here card shape (16/9, full content visible) and
   sticks alongside the taller icon grid. */
.ai-help-split .ai-inline-media {
  margin-top: 0;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 0;
  position: sticky;
  top: 96px;
}
.ai-help-split .ai-service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}
@media (max-width: 900px) {
  .ai-help-split { grid-template-columns: 1fr; gap: 2rem; }
  .ai-help-split .ai-inline-media { position: relative; }
}
@media (max-width: 560px) {
  .ai-help-split .ai-service-grid { grid-template-columns: 1fr; }
}

/* AI Enablement — Start Here: keep the maturity card compact (natural height)
   so there is no dead white space around the pyramid. */
.ai-journey-grid {
  grid-template-columns: 1fr;
  align-items: start;
}
.ai-journey-grid .ai-maturity-visual { padding: 1.35rem; }
.ai-journey-grid .ai-maturity-visual .level-list { min-height: 180px; }

/* Start Here visual cards: pipeline funnel + maturity pyramid. */
.journey-visual-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1.25rem;
  margin-top: 2rem;
  min-width: 0;
}
.journey-visual-stack > .ai-maturity-visual {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  width: 100%;
}
@media (min-width: 641px) {
  /* Centre the levels + (slightly wider) pyramid within the full-width card. */
  .ai-journey-grid .ai-maturity-visual .maturity-layout {
    grid-template-columns: minmax(110px, max-content) minmax(140px, 1fr);
    justify-content: center;
    gap: 0.8rem;
  }
  .ai-journey-grid .ai-maturity-visual .pyramid-wrap {
    width: min(100%, 220px);
    margin-left: 0;
  }
}
@media (max-width: 900px) {
  .journey-visual-stack {
    grid-template-columns: 1fr;
  }
  .journey-visual-stack > .ai-maturity-visual {
    min-height: 0;
  }
}

/* AI adoption pipeline (funnel) — the second visual, above the pyramid. */
.funnel-card .funnel-wrap { display: flex; justify-content: center; width: 100%; }
.funnel {
  width: min(100%, 244px);
  overflow: hidden;
  border-radius: 18px 18px 120px 120px;
}
.funnel-stage {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.funnel-stage.stage-ideas    { background: #7cc4d8; }
.funnel-stage.stage-evaluate { background: #57b0ca; }
.funnel-stage.stage-pilot    { background: #3f9cbb; }
.funnel-stage.stage-measure  { background: #2b83a6; }
.funnel-stage.stage-rollout  { background: #1d6b8c; }

/* Wider spacing between Solution Design deliverable rows. */
.feature-grid-2col.feature-grid-gap {
  gap: 1.25rem 2.5rem;
}

/* Reduced top padding for a section that follows straight on
   from the previous one (tightens image break spacing). */
.section-flush-top { padding-top: 2rem; }

/* On touch / small screens, reveal all content immediately — the staggered
   scroll-fade could leave a card (e.g. mid-grid) briefly invisible and open
   a gap between siblings. */
@media (hover: none), (max-width: 640px) {
  .scroll-fade {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  /* iOS Safari can bleed backdrop-filter past a rounded/clipped box, making a
     media caption appear to spill onto the card below — make it solid instead. */
  .ai-inline-media > div,
  .ai-wide-media > div {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(5,25,38, 0.92);
  }
}

/* Keep the What We Help With image in normal flow (never sticky) on stacked
   mobile layouts so its caption cannot overlap the cards below. */
@media (max-width: 900px) {
  .ai-help-split .ai-inline-media {
    position: relative !important;
    top: auto;
    margin-bottom: 0.5rem;
  }
  /* Solid caption (no backdrop-filter, which can bleed past the clip on some
     mobile browsers) so it cannot visually spill onto the AI Readiness card
     directly below when the layout stacks. */
  .ai-help-split .ai-inline-media > div {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(5,25,38, 0.92);
  }
}

/* ══════════════════════════════════════════════════════════════
   Managed Support page — reuses the shared components (page-hero,
   ai-service-card, ai-flow-panel, feature-item, build/cta/faq).
   Only additions: a 4-up support grid and in-card bullet lists.
   ══════════════════════════════════════════════════════════════ */
.ai-service-grid.ms-support-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ms-support-list {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.42rem;
}
.ms-support-list li {
  position: relative;
  padding-left: 1.05rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--mid);
}
.ms-support-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-light);
}
@media (max-width: 980px) {
  .ai-service-grid.ms-support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ai-service-grid.ms-support-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   Services overview (hub) page — reuses ai-service-card, service-tag,
   ms-support-list, process-steps and buttons. Adds only a 2-up service
   panel grid and a 6-step "How we work" row.
   ══════════════════════════════════════════════════════════════ */
.services-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.services-hub-card {
  display: flex;
  flex-direction: column;
  padding: 2rem;
}
.services-hub-card .service-tag { align-self: flex-start; margin-bottom: 1rem; }
.services-hub-card h3 { font-size: 1.2rem; }
.services-hub-card > p { margin-bottom: 1.15rem; }
.services-hub-card .ms-support-list { margin-bottom: 1.75rem; }
.services-hub-card .services-hub-cta { margin-top: auto; align-self: flex-start; }
@media (max-width: 780px) {
  .services-hub-grid { grid-template-columns: 1fr; }
}

/* Six-step "How we work" process row */
.process-steps-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  margin-top: 3.5rem;
}
@media (max-width: 900px) {
  .process-steps-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .process-steps-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ══════════════════════════════════════════════════════════════
   Site-wide gradient wash on plain content sections.
   Targets ONLY <section class="section"> (exact class match), so any
   section carrying its own variant class (cta-section, proof-section,
   ai-intro-section, build-section, legal-section, etc.) keeps its own
   background. The report-bug and assessment pages use no plain .section,
   so they are naturally unaffected.
   ══════════════════════════════════════════════════════════════ */
section[class="section"] {
  background:
    radial-gradient(circle at 86% 8%, rgba(83,177,205,0.09), transparent 34%),
    linear-gradient(150deg, rgba(232,201,122,0.06), transparent 48%),
    var(--off-white);
}

/* ══════════════════════════════════════════════════════════════
   Homepage: persona explorer, flow card, build-new/extend media,
   stack visual, client results and testimonials.
   ══════════════════════════════════════════════════════════════ */

/* Hero flow card */
.flow-steps { list-style: none; display: grid; gap: 0.25rem; position: relative; }
.flow-step { display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem 0; position: relative; }
.flow-step:not(:last-child)::after {
  content: ''; position: absolute; left: 19px; top: 100%; height: 0.5rem; width: 2px; margin-top: -0.3rem;
  background: linear-gradient(var(--teal-light), transparent);
}
.flow-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(83,177,205,0.14); border: 1px solid rgba(83,177,205,0.3);
}
.flow-icon svg, .persona-tab svg, .start-card-media svg, .persona-arrow svg, .quote-mark {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.flow-icon svg { width: 20px; height: 20px; color: var(--teal-light); }
.flow-step strong { display: block; color: white; font-size: 0.92rem; font-weight: 600; }
.flow-step small { display: block; color: rgba(255,255,255,0.55); font-size: 0.78rem; }
.flow-step:nth-child(3) .flow-icon { background: rgba(28,188,146,0.14); border-color: rgba(28,188,146,0.4); }
.flow-step:nth-child(3) .flow-icon svg { color: var(--neon-green); }

/* Persona explorer */
.persona-section {
  background:
    radial-gradient(circle at 90% 0%, rgba(239,82,157,0.07), transparent 32%),
    linear-gradient(180deg, white, var(--off-white));
}
.persona-tabs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }
.persona-tab {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1.15rem; border-radius: 999px; cursor: pointer;
  font: 600 0.86rem 'DM Sans', sans-serif; color: var(--navy);
  background: white; border: 1.5px solid var(--border);
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.persona-tab svg { width: 18px; height: 18px; color: var(--teal); }
.persona-tab:hover { border-color: var(--teal-light); transform: translateY(-2px); }
.persona-tab:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 2px; }
.persona-tab.is-active { background: var(--navy); border-color: var(--navy); color: white; box-shadow: 0 10px 24px rgba(35,54,68,0.2); }
.persona-tab.is-active svg { color: var(--teal-light); }
.persona-panels { margin-top: 1.5rem; }
.persona-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1.1fr); align-items: stretch; gap: 1.25rem;
  padding: 2rem; border-radius: 18px; background: white; border: 1px solid var(--border);
  box-shadow: 0 18px 44px rgba(35,54,68,0.07);
}
.persona-panel[hidden] { display: none; }
.persona-panel.is-active { animation: personaIn 0.35s ease both; }
@keyframes personaIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.persona-label {
  display: inline-block; margin-bottom: 0.75rem;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--teal);
}
.persona-pain { padding: 0.5rem 0.5rem 0.5rem 0; }
.persona-pain .persona-label { color: var(--dove-pink); }
.persona-pain h3, .persona-build h3 { font-family: 'DM Serif Display', serif; font-weight: 400; color: var(--navy); line-height: 1.2; }
.persona-pain h3 { font-size: 1.5rem; margin-bottom: 0.8rem; }
.persona-pain p { color: var(--mid); font-size: 0.92rem; line-height: 1.7; }
.persona-arrow { display: grid; place-items: center; color: var(--teal-light); }
.persona-arrow svg { width: 40px; height: 40px; stroke-width: 1.5; }
.persona-build {
  padding: 1.5rem; border-radius: 14px;
  background: linear-gradient(135deg, var(--teal-pale), rgba(28,188,146,0.08));
  border: 1px solid rgba(7,131,150,0.14);
}
.persona-build h3 { font-size: 1.3rem; margin-bottom: 0.9rem; }
.persona-list { list-style: none; display: grid; gap: 0.6rem; margin-bottom: 1.25rem; }
.persona-list li { position: relative; padding-left: 1.5rem; font-size: 0.88rem; line-height: 1.55; color: var(--near-black); }
.persona-list li::before {
  content: ''; position: absolute; left: 0; top: 0.35em; width: 12px; height: 7px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg);
}
.persona-link { color: var(--teal-dark); font-weight: 600; font-size: 0.88rem; text-decoration: none; }
.persona-link:hover { text-decoration: underline; }

/* Build-new / extend card media: icon panels (no photography) */
.start-card-media { display: grid; place-items: center; background: var(--gradient-navy-teal); }
.start-card-media svg { width: 64px; height: 64px; color: white; transition: transform 0.35s ease; }
.start-card:hover .start-card-media svg { transform: scale(1.1) rotate(-3deg); }
.start-media-2 { background: linear-gradient(135deg, var(--teal), var(--teal-light)); }
.start-media-3 { background: linear-gradient(135deg, var(--navy), var(--dove-pink)); }

/* Stack visual */
.stack-visual { display: grid; gap: 0.75rem; }
.stack-layer {
  padding: 1.15rem 1.35rem; border-radius: 12px; color: white;
  background: linear-gradient(135deg, var(--teal), var(--teal-light));
  box-shadow: 0 14px 30px rgba(7,131,150,0.16);
  transition: transform 0.25s ease;
}
.stack-layer:nth-child(2) { background: linear-gradient(135deg, var(--teal-dark), var(--teal)); margin-inline: 1rem; }
.stack-layer:nth-child(3) { background: linear-gradient(135deg, var(--navy), var(--teal-dark)); margin-inline: 2rem; }
.stack-layer-base { background: var(--navy-deep) !important; margin-inline: 3rem !important; }
.stack-layer:hover { transform: translateX(6px); }
.stack-layer span { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; margin-bottom: 0.25rem; }
.stack-layer strong { font-size: 0.95rem; font-weight: 600; }

/* Client results */
.results-section { background: linear-gradient(180deg, var(--off-white), white); }
.results-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.result-card {
  display: flex; flex-direction: column; gap: 0.6rem; padding: 1.5rem; border-radius: 14px;
  background: white; border: 1px solid var(--border); text-decoration: none; color: inherit;
  border-top: 3px solid var(--teal);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.result-card:nth-child(2) { border-top-color: var(--teal-light); }
.result-card:nth-child(3) { border-top-color: var(--neon-green); }
.result-card:nth-child(4) { border-top-color: var(--gold); }
.result-card:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(7,131,150,0.13); }
.result-card:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; }
.result-tag { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--teal); }
.result-card h3 { font-size: 1rem; font-weight: 600; color: var(--navy); line-height: 1.35; }
.result-card p { font-size: 0.85rem; color: var(--mid); line-height: 1.65; }
.result-more { margin-top: auto; padding-top: 0.5rem; font-size: 0.84rem; font-weight: 600; color: var(--teal-dark); }
.results-all { margin-top: 1.5rem; }
.results-all a { color: var(--teal-dark); font-weight: 600; text-decoration: none; }
.results-all a:hover { text-decoration: underline; }

.quote-wall { margin-top: 4rem; scroll-margin-top: 96px; }
.quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 0.5rem; }
.quote-card {
  position: relative; padding: 2.25rem 2rem 1.75rem; border-radius: 16px; overflow: hidden;
  background: var(--navy); color: white;
}
.quote-card::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(83,177,205,0.25), transparent 70%);
}
.quote-mark { width: 32px; height: 32px; color: var(--gold-light); margin-bottom: 1rem; }
.quote-card blockquote { position: relative; z-index: 1; font-family: 'DM Serif Display', serif; font-size: 1.2rem; line-height: 1.5; margin-bottom: 1.25rem; }
.quote-card figcaption { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-light); font-weight: 600; }

@media (max-width: 1000px) {
  .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .persona-panel { grid-template-columns: 1fr; padding: 1.5rem; }
  .persona-arrow { transform: rotate(90deg); height: 32px; }
  .stack-layer, .stack-layer:nth-child(n) { margin-inline: 0 !important; }
}
@media (max-width: 640px) {
  .results-grid, .quote-grid { grid-template-columns: 1fr; }
  .persona-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x proximity; }
  .persona-tab { flex: 0 0 auto; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .persona-panel.is-active { animation: none; }
  .stack-layer, .result-card, .persona-tab { transition: none; }
}

/* Photography restored on the homepage */
.start-card-media { display: block; background: var(--teal-pale); }
.build-right { display: grid; gap: 1.5rem; min-width: 0; }
.build-image-short, .build-image-short .build-image-main { min-height: 0; height: 260px; }
@media (max-width: 900px) { .build-image-short, .build-image-short .build-image-main { height: 220px; } }

/* Homepage testimonials: three across on wide screens */
.quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quote-card blockquote { font-size: 1.05rem; }
.quote-card { display: flex; flex-direction: column; }
.quote-card figcaption { margin-top: auto; }
@media (max-width: 1000px) { .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .quote-grid { grid-template-columns: 1fr; } }

/* Persona panels: tech line and delivered-proof footer */
.persona-tech { font-size: 0.75rem; letter-spacing: 0.04em; color: var(--teal-dark); background: rgba(255,255,255,0.7); border: 1px solid rgba(7,131,150,0.16); border-radius: 8px; padding: 0.5rem 0.75rem; margin-bottom: 1.1rem; }
.persona-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(7,131,150,0.16); }
.persona-proof { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: var(--navy); text-decoration: none; font-weight: 500; }
.persona-proof > span { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: white; background: var(--teal); border-radius: 999px; padding: 0.2rem 0.55rem; }
a.persona-proof:hover { text-decoration: underline; }
.persona-tabs { gap: 0.6rem; }
.persona-tab { padding: 0.7rem 1rem; font-size: 0.82rem; }

.persona-foot { justify-content: flex-start; }

/* Hero: "what are you trying to fix" tiles */
.fix-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.fix-tile {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 0.95rem 1rem; border-radius: 10px; text-decoration: none;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.fix-tile svg { width: 22px; height: 22px; margin-bottom: 0.45rem; fill: none; stroke: var(--teal-light); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fix-tile strong { color: white; font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.fix-tile small { color: rgba(255,255,255,0.55); font-size: 0.76rem; }
.fix-tile:hover, .fix-tile:focus-visible { transform: translateY(-3px); border-color: rgba(83,177,205,0.45); background: rgba(83,177,205,0.1); outline: none; }
.fix-more { display: inline-block; margin-top: 1rem; color: var(--teal-light); font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.fix-more:hover { text-decoration: underline; }
@media (max-width: 480px) { .fix-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   Homepage decision-maker layer: stack strip, before/after ledger,
   FAQ, split CTA and mobile sticky CTA.
   ══════════════════════════════════════════════════════════════ */

/* Before / after ledger */
.ledger-section { background: white; }
.ledger { margin-top: 2.5rem; max-width: 920px; }
.ledger-switch { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--off-white); border: 1px solid var(--border); position: relative; margin-bottom: 1.5rem; }
.ledger-btn {
  position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer;
  font: 600 0.88rem 'DM Sans', sans-serif; color: var(--mid); padding: 0.65rem 1.4rem; border-radius: 999px;
  transition: color 0.25s, background 0.25s, box-shadow 0.25s;
}
.ledger-btn:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 2px; }
.ledger-btn.is-on { color: white; background: var(--navy); box-shadow: 0 6px 16px rgba(35,54,68,0.22); }
.ledger[data-state="after"] .ledger-btn.is-on { background: var(--teal); box-shadow: 0 6px 16px rgba(7,131,150,0.3); }
.ledger-rows { list-style: none; border-top: 1px solid var(--border); }
.ledger-row {
  display: grid; grid-template-columns: 28px 9rem minmax(0, 1fr); gap: 1rem 1.25rem; align-items: start;
  padding: 1.3rem 0; border-bottom: 1px solid var(--border);
}
.ledger-row svg { width: 24px; height: 24px; margin-top: 0.15rem; fill: none; stroke: var(--teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ledger-row > strong { color: var(--navy); font-size: 0.95rem; font-weight: 600; padding-top: 0.1rem; }
.ledger-text { display: grid; }
.ledger-text p { grid-area: 1 / 1; font-size: 1.12rem; line-height: 1.5; font-family: 'DM Serif Display', serif; transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease; }
.ledger-tag { display: block; font: 600 0.74rem 'DM Sans', sans-serif; margin-bottom: 0.2rem; }
.ledger-was { color: #8a979d; }
.ledger-was .ledger-tag { color: #8a979d; }
.ledger-now { color: var(--navy); }
.ledger-now .ledger-tag { color: var(--teal); }
/* Interactive (JS) state: the two sentences share one cell and crossfade */
.ledger.is-interactive[data-state="today"] .ledger-now { opacity: 0; transform: translateY(8px); filter: blur(3px); pointer-events: none; }
.ledger.is-interactive[data-state="after"] .ledger-was { opacity: 0; transform: translateY(-8px); filter: blur(3px); pointer-events: none; }
.ledger.is-interactive[data-state="after"] .ledger-row { transition: background 0.4s; }
/* No JS: show both sentences stacked, and hide the switch */
.ledger:not(.is-interactive) .ledger-text { gap: 0.9rem; }
.ledger:not(.is-interactive) .ledger-text p { grid-area: auto; }
.ledger:not(.is-interactive) .ledger-switch { display: none; }
.ledger-row:nth-child(1) .ledger-now { transition-delay: 0s; }
.ledger-row:nth-child(2) .ledger-now, .ledger-row:nth-child(2) .ledger-was { transition-delay: 0.06s; }
.ledger-row:nth-child(3) .ledger-now, .ledger-row:nth-child(3) .ledger-was { transition-delay: 0.12s; }
.ledger-row:nth-child(4) .ledger-now, .ledger-row:nth-child(4) .ledger-was { transition-delay: 0.18s; }
.ledger-row:nth-child(5) .ledger-now, .ledger-row:nth-child(5) .ledger-was { transition-delay: 0.24s; }
.ledger-note { margin-top: 1.5rem; color: var(--mid); font-size: 0.92rem; }
.ledger-note a { color: var(--teal-dark); font-weight: 600; }

/* FAQ */
.faq-section { background: var(--off-white); }
.faq-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; }
.faq-layout .lead { margin-bottom: 1.75rem; }
.faq-list { display: grid; gap: 0.75rem; }
.faq-item { background: white; border: 1px solid var(--border); border-radius: 12px; transition: border-color 0.2s, box-shadow 0.2s; }
.faq-item[open] { border-color: rgba(7,131,150,0.35); box-shadow: 0 14px 34px rgba(7,131,150,0.08); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.15rem 1.4rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-weight: 600; font-size: 0.98rem; color: var(--navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-item summary:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 2px; border-radius: 12px; }
.faq-item p { padding: 0 1.4rem 1.3rem; color: var(--mid); font-size: 0.93rem; line-height: 1.6; max-width: 60ch; }

/* Mobile sticky CTA */
.sticky-cta { display: none; }

@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; gap: 2rem; }
  .ledger-row { grid-template-columns: 28px minmax(0, 1fr); }
  .ledger-row > strong { grid-column: 2; }
  .ledger-text { grid-column: 2; }
  .sticky-cta {
    display: block; position: fixed; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 900;
    text-align: center; text-decoration: none; background: var(--teal); color: white; font-weight: 600; font-size: 0.95rem;
    padding: 0.95rem 1.2rem; border-radius: 999px; box-shadow: 0 14px 34px rgba(7,131,150,0.45);
    transform: translateY(160%); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease;
  }
  .sticky-cta.is-shown { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ledger-text p, .sticky-cta, .faq-item summary::after { transition: none; }
}

/* Footer credentials: Microsoft Partner and Cyber Essentials badges */
.footer-credentials { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 1rem; }
.footer-credentials .ms-partner-badge { margin-top: 0; }
.cred-badge { display: inline-flex; align-items: center; }
.cred-badge img { height: 40px; width: auto; display: block; }
.cred-badge:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; border-radius: 4px; }

/* ══════════════════════════════════════════════════════════════
   Homepage responsive pass (scoped to body.home)
   ══════════════════════════════════════════════════════════════ */
.nowrap { white-space: nowrap; }

@media (max-width: 900px) {
  /* Hero: stop forcing a full-screen block */
  body.home .hero { min-height: 0; padding: 2.5rem 1.25rem 3rem; gap: 2rem; }
  body.home .hero-actions { margin-bottom: 2rem; }
}

@media (max-width: 640px) {
  body.home .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.home .hero-sub { font-size: 0.98rem; line-height: 1.65; }
  body.home .hero-title-main { font-size: clamp(2rem, 9vw, 2.6rem); }
  body.home .hero-title-sub { font-size: clamp(1.35rem, 6vw, 1.7rem); }
  body.home .hero-social-proof { gap: 0.4rem 1rem; }

  /* Hero fix tiles: two compact columns, drop the sub-label */
  body.home .fix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  body.home .fix-tile { padding: 0.75rem; }
  body.home .fix-tile small { display: none; }
  body.home .fix-tile strong { font-size: 0.82rem; }
  body.home .fix-tile svg { margin-bottom: 0.3rem; }

  /* Persona tabs: all ten visible as a two-column grid instead of a hidden scroll */
  body.home .persona-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; overflow: visible; padding-bottom: 0; }
  body.home .persona-tab { width: 100%; justify-content: flex-start; padding: 0.65rem 0.8rem; font-size: 0.78rem; border-radius: 12px; gap: 0.45rem; text-align: left; line-height: 1.2; }
  body.home .persona-tab svg { flex: 0 0 auto; width: 16px; height: 16px; }
  body.home .persona-panel { padding: 1.25rem; gap: 1rem; }
  body.home .persona-pain h3 { font-size: 1.25rem; }
  body.home .persona-build { padding: 1.1rem; }

  /* What we build pills sit inline and wrap */
  body.home .build-pills { gap: 0.5rem; }
  body.home .build-pills .strip-item { padding: 0.45rem 0.8rem; font-size: 0.8rem; }

  /* Shorter photos so the page doesn't run on */
  body.home .start-card-media { aspect-ratio: 2 / 1; }
  body.home .build-image-short, body.home .build-image-short .build-image-main { height: 180px; }
  body.home .ai-wide-media img { max-height: 200px; object-fit: cover; }

  /* Sticky CTA: a smaller pill, not a full-width bar */
  .sticky-cta { left: 50%; right: auto; width: auto; white-space: nowrap; padding: 0.75rem 1.4rem; font-size: 0.88rem; transform: translate(-50%, 160%); }
  .sticky-cta.is-shown { transform: translate(-50%, 0); }
  body.home footer { padding-bottom: 4.5rem; }

  .stack-layer { padding: 0.9rem 1rem; }
  .faq-item summary { padding: 1rem 1.1rem; font-size: 0.93rem; }
  .faq-item p { padding: 0 1.1rem 1.1rem; }
}

/* ══════════════════════════════════════════════════════════════
   Carousel (case studies and testimonials): scroll-snap track with
   auto-advance and dots.
   ══════════════════════════════════════════════════════════════ */
.carousel { --gap: 1.25rem; --per: 3; margin-top: 2.5rem; }
.carousel-track {
  display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 0.5rem 0.25rem 1rem; margin: 0 -0.25rem; scrollbar-width: none; overscroll-behavior-x: contain;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 2px; border-radius: 12px; }
.carousel-item { flex: 0 0 calc((100% - var(--gap) * (var(--per) - 1)) / var(--per)); scroll-snap-align: start; min-width: 0; }
.carousel-controls { display: flex; align-items: center; justify-content: center; margin-top: 0.75rem; }
.carousel-dots { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; }
.carousel-dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: var(--border); cursor: pointer; transition: background 0.2s, transform 0.2s; }
.carousel-dot.is-active { background: var(--teal); transform: scale(1.25); }
.carousel-dot:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 2px; }
.result-card:nth-child(4n+1) { border-top-color: var(--teal); }
.result-card:nth-child(4n+2) { border-top-color: var(--teal-light); }
.result-card:nth-child(4n+3) { border-top-color: var(--gold-light); }
.result-card:nth-child(4n) { border-top-color: var(--gold); }
.quote-wall .carousel { margin-top: 0.5rem; }

@media (max-width: 1000px) { .carousel { --per: 2; } }
@media (max-width: 640px) { .carousel { --per: 1; --gap: 1rem; } }
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } }
.carousel-track { align-items: stretch; }

/* ══════════════════════════════════════════════════════════════
   Homepage page backgrounds, per the Dove365 Brand Guidelines (June 2026).
   White and Off White are the main canvases, Teal Pale is the quiet band,
   Navy is the dark field, and gold stays a restrained accent. Sections
   alternate so the page has a clear rhythm. Pink and neon green are not
   brand colours, so they are replaced with palette equivalents.
   ══════════════════════════════════════════════════════════════ */
body.home .persona-section {
  background:
    radial-gradient(55% 60% at 100% 0%, rgba(83,177,205,0.18), transparent 70%),
    radial-gradient(40% 45% at 0% 100%, rgba(228,242,245,0.95), transparent 70%),
    var(--off-white);
}
body.home .ledger-section {
  background:
    radial-gradient(45% 55% at 100% 0%, rgba(228,242,245,0.9), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(232,201,122,0.16), transparent 70%),
    var(--white);
}
body.home .start-section {
  background:
    radial-gradient(50% 60% at 0% 0%, rgba(83,177,205,0.16), transparent 70%),
    linear-gradient(180deg, var(--teal-pale), rgba(228,242,245,0.55));
  border-top: 1px solid rgba(7,131,150,0.1);
  border-bottom: 1px solid rgba(7,131,150,0.1);
}
body.home .build-section {
  background:
    radial-gradient(45% 55% at 100% 20%, rgba(83,177,205,0.14), transparent 70%),
    linear-gradient(180deg, var(--white), var(--off-white));
}
body.home .offer-preview {
  background:
    radial-gradient(40% 50% at 0% 15%, rgba(83,177,205,0.14), transparent 70%),
    radial-gradient(40% 45% at 100% 100%, rgba(232,201,122,0.18), transparent 70%),
    var(--off-white);
}
body.home .results-section {
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(228,242,245,0.9), transparent 75%),
    var(--white);
}
body.home .proof-section {
  background:
    radial-gradient(70% 90% at 85% 0%, rgba(7,131,150,0.34), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(201,168,76,0.12), transparent 70%),
    var(--navy);
  border-top: 2px solid rgba(201,168,76,0.55);
}
body.home .process-section {
  background:
    radial-gradient(50% 50% at 0% 0%, rgba(228,242,245,0.95), transparent 70%),
    var(--off-white);
}
body.home .faq-section {
  background:
    radial-gradient(55% 60% at 100% 100%, rgba(83,177,205,0.16), transparent 70%),
    var(--teal-pale);
}

/* Replace non-palette accents with Dove Teal / Gold equivalents */
body.home .persona-pain .persona-label { color: var(--mid); }
body.home .persona-build { background: linear-gradient(135deg, var(--teal-pale), rgba(255,255,255,0.7)); }
body.home .result-card:nth-child(4n+1) { border-top-color: var(--teal); }
body.home .result-card:nth-child(4n+2) { border-top-color: var(--teal-light); }
body.home .result-card:nth-child(4n+3) { border-top-color: var(--gold-light); }
body.home .result-card:nth-child(4n) { border-top-color: var(--gold); }
body.home .start-card::after,
body.home .start-card:nth-child(n)::after { background: linear-gradient(90deg, var(--teal), var(--teal-light), var(--gold-light)); }
body.home .pain-card::after { background: linear-gradient(90deg, var(--teal), var(--teal-light), var(--gold-light)); }
body.home .offer-preview .section-tag::before { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }

/* ══════════════════════════════════════════════════════════════
   Brand-guideline compliance pass (homepage)
   - DM Serif Display is regular weight only (the font ships no bold, so
     inherited bold is synthesised and distorts the letterforms)
   - Body copy line-height 145-160%
   - Contrast fixes for small text
   ══════════════════════════════════════════════════════════════ */
body.home h1, body.home h2, body.home h3,
body.home .hero-title-main, body.home .hero-title-sub,
body.home h2.display, body.home h2.display em, body.home .hero-title-sub em,
body.home .proof-stat-val, body.home .pain-number, body.home .price-val,
body.home .persona-pain h3, body.home .persona-build h3, body.home .quote-card blockquote,
body.home .ledger-text p { font-weight: 400; }
body.home em { font-weight: inherit; }
body.home h2.display em, body.home .hero-title-sub { font-style: italic; }

body.home .hero-sub, body.home .lead, body.home .persona-pain p, body.home .pain-card p,
body.home .result-card p, body.home .faq-item p,
body.home .persona-list li, body.home .mini-offer-card p, body.home .process-step p { line-height: 1.6; }

/* Small labels on white: Dove Navy keeps contrast above 4.5:1 */
body.home .result-tag { color: var(--navy); }
body.home .ledger-was, body.home .ledger-was .ledger-tag { color: var(--mid); }

/* Footer text: lift the dimmest greys so they pass contrast on Navy Deep */
footer .footer-brand p, footer .footer-col h4 { color: rgba(255,255,255,0.72); }
footer .footer-bottom p, footer .footer-legal a { color: rgba(255,255,255,0.68); }

/* Partner marks stay visually separate from the Dove365 signature */
.footer-credentials { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid rgba(255,255,255,0.14); }

/* Flat panels: no gradient on the persona "What we build" box (solid Teal Pale) */
body.home .persona-build { background: var(--teal-pale); border: 1px solid rgba(7,131,150,0.18); }

body.home .hero-card { background: rgba(5,25,38,0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.home .hero-card:hover { background: rgba(5,25,38,0.72); }

/* ══════════════════════════════════════════════════════════════
   AI Enablement page (body.ai-page): brand colouring and compliance.
   The neural hero keeps its design; only the colour is brought onto
   the Dove365 palette (Navy Deep base, Teal, Teal Light, Gold).
   ══════════════════════════════════════════════════════════════ */
body.ai-page .ai-neural-hero {
  background:
    radial-gradient(circle at 78% 30%, rgba(7,131,150,0.22), transparent 46%),
    radial-gradient(circle at 12% 80%, rgba(201,168,76,0.10), transparent 44%),
    var(--navy-deep);
}
body.ai-page .neural-veil {
  background:
    linear-gradient(105deg, rgba(5,25,38,0.8) 0%, rgba(5,25,38,0.34) 42%, transparent 70%),
    linear-gradient(0deg, rgba(5,25,38,0.6), transparent 32%);
}
/* Headline accent: solid Teal Light italic (no mint, no gradient text) */
body.ai-page .neural-headline .grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--teal-light); }
body.ai-page .neural-metric span { color: rgba(255,255,255,0.7); }

/* DM Serif Display: regular weight only */
body.ai-page h1, body.ai-page h2, body.ai-page h3,
body.ai-page .neural-headline, body.ai-page .neural-headline .line,
body.ai-page h2.display, body.ai-page h2.display em,
body.ai-page .neural-metric strong, body.ai-page .cta-inner h2 { font-weight: 400; }

/* Body copy at 145-160% line-height */
body.ai-page .neural-sub, body.ai-page .lead, body.ai-page .case-detail-copy,
body.ai-page .ai-service-card p, body.ai-page .ai-offer-main p, body.ai-page .cta-inner p,
body.ai-page .ai-intro-section p, body.ai-page .feature-item p { line-height: 1.6; }

/* Journey funnel and maturity levels: palette ramp with text that passes contrast */
body.ai-page .funnel-stage.stage-ideas    { background: var(--slate); color: var(--navy); }
body.ai-page .funnel-stage.stage-evaluate { background: var(--teal-light); color: var(--navy); }
body.ai-page .funnel-stage.stage-pilot    { background: var(--teal); color: #fff; }
body.ai-page .funnel-stage.stage-measure  { background: var(--navy); color: #fff; }
body.ai-page .funnel-stage.stage-rollout  { background: var(--navy-deep); color: #fff; }
body.ai-page .ai-maturity-visual .level-number { color: var(--navy); font-weight: 700; }
body.ai-page .feature-item h3 { font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 600; color: var(--navy); margin-bottom: 0.2rem; }

/* No pink or neon green: gold replaces them in section-tag rules */
body.ai-page .ai-offers-section .section-tag::before { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
body.ai-page .ai-help-section .section-tag::before, body.ai-page .pricing-section .section-tag::before { background: var(--teal); }

/* In-practice proof cards */
.ai-proof-section { background: var(--white); }
.ai-proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.ai-proof-card { padding: 2rem; border-radius: 14px; background: var(--off-white); border: 1px solid var(--border); border-top: 3px solid var(--teal); }
.ai-proof-card:nth-child(2) { border-top-color: var(--gold); }
.ai-proof-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--teal-pale); margin-bottom: 1.1rem; }
.ai-proof-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--teal); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ai-proof-card h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.4rem; color: var(--navy); margin-bottom: 0.6rem; }
.ai-proof-card > p { color: var(--mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.1rem; max-width: 60ch; }
.ai-proof-list { list-style: none; display: grid; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.ai-proof-list li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; color: var(--near-black); }
.ai-proof-list li::before { content: ''; position: absolute; left: 0; top: 0.4em; width: 12px; height: 7px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }

@media (max-width: 780px) { .ai-proof-grid { grid-template-columns: 1fr; } .ai-proof-card { padding: 1.4rem; } }
@media (max-width: 640px) {
  body.ai-page .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.ai-page .faq-item summary { padding: 1rem 1.1rem; font-size: 0.93rem; }
  body.ai-page .faq-item p { padding: 0 1.1rem 1.1rem; }
}
body.ai-page .neural-metrics { flex-wrap: nowrap; gap: 1.75rem; }
body.ai-page .neural-metric { flex: 1 1 0; min-width: 0; }
body.ai-page .neural-metric span { display: block; line-height: 1.4; }

/* Hero artwork: the four Dove365 brand layers (grid, circle, line, square) sit over a solid
   Navy Deep base, so the base shows through at every edge and each layer scales and moves on its own. */
body.home .hero { background: var(--navy-deep); }
body.home .hero-bg-grid, body.home .hero-glow-2 { display: none; }
body.home .hero-glow-1 { opacity: 0.55; }
.hero-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-art img { position: absolute; display: block; max-width: none; user-select: none; }
.hero-art-grid { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.hero-art-circle {
  left: 83%; top: 10%; height: 78%; width: auto; aspect-ratio: 1;
  translate: calc(var(--pointer-x) * -22px) calc(var(--pointer-y) * -16px); transition: translate 0.25s ease-out;
}
.hero-art-square {
  left: 0; top: 49%; height: 42%; width: auto;
  translate: calc(var(--pointer-x) * 10px) calc(var(--pointer-y) * -8px); transition: translate 0.25s ease-out;
}
@media (max-width: 900px) {
  .hero-art-circle { left: 58%; top: 3%; height: min(60%, 460px); }
    .hero-art-square { height: 22%; top: 62%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art-circle, .hero-art-square { transition: none; translate: none; }
}

/* ══════════════════════════════════════════════════════════════
   AI Enablement: sector band, quotes and page background rhythm
   Sections alternate Off White / White / Teal Pale, with Navy Deep as the
   one dark field mid-page and the neural hero at the top.
   ══════════════════════════════════════════════════════════════ */
body.ai-page .ai-intro-section {
  background: radial-gradient(50% 60% at 100% 0%, rgba(228,242,245,0.95), transparent 70%), var(--off-white);
}
body.ai-page .ai-sectors-section {
  background:
    radial-gradient(60% 80% at 88% 0%, rgba(7,131,150,0.30), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(201,168,76,0.10), transparent 70%),
    var(--navy-deep);
  border-top: 2px solid rgba(201,168,76,0.55);
}
body.ai-page .ai-journey-section { background: var(--teal-pale); }
body.ai-page .ai-help-section {
  background: radial-gradient(45% 50% at 0% 0%, rgba(228,242,245,0.9), transparent 70%), var(--white);
}
body.ai-page .ai-proof-section { background: var(--off-white); }
body.ai-page .ai-proof-card { background: var(--white); }
body.ai-page .ai-offers-section { background: var(--white); }
body.ai-page .ai-why-section {
  background: radial-gradient(45% 55% at 100% 100%, rgba(232,201,122,0.16), transparent 70%), var(--off-white);
}
body.ai-page .faq-section { background: var(--teal-pale); }

/* Sector band */
.ai-sectors-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 3rem;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.ai-sector { padding: 2rem 1.75rem 0.5rem; border-left: 1px solid rgba(255,255,255,0.16); }
.ai-sector:first-child { border-left: 0; padding-left: 0; }
.ai-sector:last-child { padding-right: 0; }
.ai-sector-icon { display: block; margin-bottom: 1.2rem; }
.ai-sector-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--teal-light); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ai-sector h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.55rem; color: #fff; margin-bottom: 0.7rem; }
.ai-sector > p { color: rgba(255,255,255,0.8); font-size: 0.93rem; line-height: 1.6; margin-bottom: 1.25rem; }
.ai-sector ul { list-style: none; display: grid; gap: 0.6rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.14); }
.ai-sector li { position: relative; padding-left: 1.4rem; font-size: 0.86rem; line-height: 1.5; color: rgba(255,255,255,0.88); }
.ai-sector li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 11px; height: 6px; border-left: 2px solid var(--gold-light); border-bottom: 2px solid var(--gold-light); transform: rotate(-45deg); }


@media (max-width: 1000px) {
  .ai-sectors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-sector:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ai-sector:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.16); margin-top: 1.5rem; }
}
@media (max-width: 640px) {
  .ai-sectors-grid { grid-template-columns: 1fr; }
  .ai-sector, .ai-sector:nth-child(n) { border-left: 0; padding: 1.75rem 0 0.25rem; }
  .ai-sector + .ai-sector { border-top: 1px solid rgba(255,255,255,0.16); margin-top: 1.25rem; }
}

/* AI in practice: lead example plus three supporting cards */
.ai-proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-proof-lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2.5rem; align-items: stretch; border-top-color: var(--gold); }
.ai-proof-lead h3 { font-size: 1.7rem; }
.ai-proof-lead .persona-link { display: inline-block; margin-top: 1.25rem; }
.ai-proof-result { padding: 1.5rem; border-radius: 12px; background: var(--navy-deep); color: #fff; align-self: stretch; }
.ai-proof-result-title { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 1rem; }
.ai-proof-result ul { list-style: none; display: grid; gap: 0; }
.ai-proof-result li { display: grid; gap: 0.15rem; padding: 0.85rem 0 0.85rem 1.6rem; border-top: 1px solid rgba(255,255,255,0.14); position: relative; }
.ai-proof-result li::before { content: ''; position: absolute; left: 0; top: 1.15rem; width: 11px; height: 6px; border-left: 2px solid var(--gold-light); border-bottom: 2px solid var(--gold-light); transform: rotate(-45deg); }
.ai-proof-result strong { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.15rem; color: #fff; }
.ai-proof-result li span { font-size: 0.85rem; color: rgba(255,255,255,0.78); line-height: 1.5; }
.ai-proof-card:nth-child(2) { border-top-color: var(--teal); }
.ai-proof-card:nth-child(3) { border-top-color: var(--teal-light); }
.ai-proof-card:nth-child(4) { border-top-color: var(--gold-light); }
@media (max-width: 1000px) { .ai-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-proof-lead { grid-template-columns: 1fr; gap: 1.5rem; } }
@media (max-width: 640px) { .ai-proof-grid { grid-template-columns: 1fr; } }

/* Section labels on the AI page: Dove Navy text with the teal rule, for contrast on every background */
body.ai-page .section-tag { color: var(--navy); }

/* Sector band: rows align across all four columns (icon, name, summary, list) */
.ai-sectors-grid { grid-template-rows: auto; grid-auto-rows: auto; }
@supports (grid-template-rows: subgrid) {
  .ai-sector { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}
@supports not (grid-template-rows: subgrid) {
  .ai-sector > p { min-height: 8.2em; }
}
.ai-sector > p { margin-bottom: 1.25rem; }
@media (max-width: 640px) {
  .ai-sector { display: block; }
  .ai-sector > p { min-height: 0; }
}

/* Closing section: Navy Deep with the brand artwork, copy left, what-happens-next right */
.cta-section.ai-cta { background: var(--navy-deep); text-align: left; position: relative; overflow: hidden; border-top: 2px solid rgba(201,168,76,0.55); }
.cta-section.ai-cta::before { display: none; }
.ai-cta-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 4rem; align-items: center; }
.ai-cta-copy p { color: rgba(255,255,255,0.8); line-height: 1.6; max-width: 48ch; margin-bottom: 2rem; }
.ai-cta .cta-actions { justify-content: flex-start; }
.ai-cta-steps strong { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.3rem; color: #fff; }
.ai-cta-steps span { color: rgba(255,255,255,0.78); font-size: 0.93rem; line-height: 1.6; max-width: 46ch; }
@media (max-width: 900px) {
  .ai-cta-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    }
.ai-sector ul { align-content: start; }


/* AI in practice: the three supporting cards share rows (icon, title, summary, list) so lists align */
.ai-proof-grid { row-gap: 0; }
.ai-proof-lead { margin-bottom: 1.5rem; }
@supports (grid-template-rows: subgrid) {
  .ai-proof-card:not(.ai-proof-lead) { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}
@supports not (grid-template-rows: subgrid) {
  .ai-proof-card:not(.ai-proof-lead) > p { min-height: 7.2em; }
}
.ai-proof-card:not(.ai-proof-lead) .ai-proof-icon { justify-self: start; }
.ai-proof-card:not(.ai-proof-lead) .ai-proof-list { align-content: start; }
@media (max-width: 1000px) {
  .ai-proof-grid { row-gap: 1.5rem; }
  .ai-proof-lead { margin-bottom: 0; }
  .ai-proof-card:not(.ai-proof-lead) { display: block; }
  .ai-proof-card:not(.ai-proof-lead) > p { min-height: 0; }
}

/* Closing-section list: markers sit exactly on the rule. The rule runs from marker to marker, and each
   marker is centred on it and on the first line of its title. */
.ai-cta-steps { list-style: none; counter-reset: step; padding: 0 0 0 2rem; border: 0; display: grid; gap: 1.75rem; }
.ai-cta-steps li { --mk: 15px; --cy: 0.845rem; counter-increment: step; position: relative; display: grid; gap: 0.3rem; }
.ai-cta-steps.is-points li { --mk: 6px; }
.ai-cta-steps li::before {
  content: counter(step); position: absolute; left: -32px; top: calc(var(--cy) - var(--mk)); translate: -50% 0;
  width: calc(var(--mk) * 2); height: calc(var(--mk) * 2); border-radius: 50%; display: grid; place-items: center;
  background: var(--navy-deep); border: 1.5px solid var(--teal-light); color: var(--teal-light); font-size: 0.82rem; font-weight: 600; box-sizing: border-box;
}
.ai-cta-steps.is-points li::before { content: ''; background: var(--teal-light); border: 0; }
.ai-cta-steps li:not(:last-child)::after {
  content: ''; position: absolute; left: -33px; width: 2px; background: rgba(255,255,255,0.2);
  top: calc(var(--cy) + var(--mk)); bottom: calc(-1.75rem - var(--cy) + var(--mk));
}
.ai-cta-steps strong { line-height: 1.3; }

/* Productised offers: 2x2 tiles on shared rows (head, title, summary, list, button) */
body.ai-page .ai-offers-section { background: var(--white); }
.ai-offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin-top: 2.5rem; }
.ai-offer-tile {
  display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  margin-bottom: 1.5rem; padding: 2rem; border-radius: 14px; background: var(--off-white); border: 1px solid var(--border);
}
.ai-offer-tile.is-start { background: var(--teal-pale); border-color: rgba(7,131,150,0.35); box-shadow: inset 0 3px 0 var(--teal); }
.ai-offer-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.ai-offer-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--white); border: 1px solid var(--border); }
.ai-offer-tile.is-start .ai-offer-icon { border-color: rgba(7,131,150,0.25); }
.ai-offer-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--teal); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ai-offer-kind { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.ai-offer-flag { margin-left: auto; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--gold-light); color: var(--navy); font-size: 0.74rem; font-weight: 700; }
.ai-offer-tile h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.6rem; line-height: 1.2; color: var(--navy); margin-bottom: 0.6rem; }
.ai-offer-tile > p { color: var(--mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.25rem; max-width: 52ch; }
.ai-offer-list { list-style: none; display: grid; gap: 0.55rem; align-content: start; padding-top: 1.1rem; margin-bottom: 1.5rem; border-top: 1px solid rgba(35,54,68,0.14); }
.ai-offer-list li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; line-height: 1.5; color: var(--near-black); }
.ai-offer-list li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 12px; height: 7px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.ai-offer-tile .btn { align-self: end; justify-self: start; }
@supports not (grid-template-rows: subgrid) { .ai-offer-tile > p { min-height: 4.8em; } .ai-offer-list { min-height: 11em; } }
@media (max-width: 900px) {
  .ai-offer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .ai-offer-tile { display: block; margin-bottom: 0; padding: 1.5rem; }
  .ai-offer-tile > p, .ai-offer-list { min-height: 0; }
  .ai-offer-flag { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════
   Mobile type scale (phones, up to 640px) for body.home and body.ai-page.
   Desktop sizes were carrying over: section titles 38px, stats 45px, hero 35-43px.
   Serif scale on a phone: page titles about 32px, section titles 28px, card titles 20-23px.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  body.home h2.display, body.ai-page h2.display { font-size: 1.75rem; line-height: 1.18; margin-bottom: 0.9rem; }
  body.home .lead, body.ai-page .lead { font-size: 0.97rem; }

  /* Heroes */
  body.home .hero-title-main { font-size: clamp(1.9rem, 8.4vw, 2.2rem); line-height: 1.08; }
  body.home .hero-title-sub { font-size: 1.3rem; }
  body.ai-page .neural-headline { font-size: clamp(1.95rem, 8.4vw, 2.3rem); line-height: 1.08; margin-bottom: 1rem; }
  body.ai-page .neural-metric strong { font-size: 1.25rem; }

  /* Homepage */
  body.home .proof-stat-val { font-size: 2rem; }
  body.home .price-val { font-size: 1.6rem; }
  body.home .pain-number { font-size: 2.2rem; margin-bottom: 0.6rem; }
  body.home .persona-pain h3 { font-size: 1.2rem; }
  body.home .persona-build h3 { font-size: 1.15rem; }
  body.home .ledger-text p { font-size: 1.05rem; }
  body.home .quote-card blockquote { font-size: 1rem; }
  body.home .step-bubble { font-size: 1rem; }
  body.home .process-step h3, body.home .proof-stat-title { font-size: 0.95rem; }

  /* AI Enablement */
  body.ai-page .ai-sector h3 { font-size: 1.35rem; }
  body.ai-page .ai-proof-card h3 { font-size: 1.25rem; }
  body.ai-page .ai-proof-lead h3 { font-size: 1.4rem; }
  body.ai-page .ai-proof-result strong { font-size: 1.05rem; }
  body.ai-page .ai-offer-tile h3 { font-size: 1.35rem; }

  /* Closing sections on both pages */
  .ai-cta-steps strong { font-size: 1.1rem; }
  .ai-cta-copy p { font-size: 0.97rem; }
}

/* ══════════════════════════════════════════════════════════════
   Services hub (body.services-page)
   Hero with a "where do you want to start?" router, four service cards on shared rows,
   sector band, AI band, delivered-work carousel, six-step process, FAQ, closing section.
   ══════════════════════════════════════════════════════════════ */
body.services-page h1, body.services-page h2, body.services-page h3,
body.services-page h2.display, body.services-page h2.display em { font-weight: 400; }
body.services-page .lead, body.services-page .faq-item p, body.services-page .svc-card > p,
body.services-page .svc-sector p, body.services-page .svc-step p, body.services-page .ai-cta-copy p { line-height: 1.6; }
body.services-page .section-tag { color: var(--navy); }

/* Hero */
.svc-hero { position: relative; overflow: hidden; background: var(--navy-deep); border-bottom: 2px solid rgba(201,168,76,0.55); padding: 5rem 4rem 5.5rem; }
.svc-hero .hero-art-circle { left: 74%; top: -8%; height: 120%; }
.svc-hero-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4rem; align-items: center; }
.svc-hero h1 { font-family: 'DM Serif Display', serif; font-size: clamp(2.3rem, 4.4vw, 3.7rem); line-height: 1.06; color: #fff; margin-bottom: 1.3rem; }
.svc-hero h1 em { font-style: italic; color: var(--teal-light); }
.svc-hero-copy > p { color: rgba(255,255,255,0.8); font-size: 1.05rem; line-height: 1.6; max-width: 52ch; margin-bottom: 2rem; }
.svc-hero .hero-actions { margin-bottom: 0; }
.svc-routes { display: grid; gap: 0; padding: 1.5rem 1.6rem 0.6rem; border-radius: 16px; background: rgba(5,25,38,0.66); border: 1px solid rgba(83,177,205,0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.svc-routes-title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 0.4rem; }
.svc-route { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.95rem 0; border-top: 1px solid rgba(255,255,255,0.12); text-decoration: none; transition: background 0.2s; }
.svc-routes-title + .svc-route { border-top: 0; }
.svc-route-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(83,177,205,0.14); border: 1px solid rgba(83,177,205,0.3); }
.svc-route-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--teal-light); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.svc-route-text { color: #fff; font-size: 0.95rem; line-height: 1.4; }
.svc-route-to { color: var(--teal-light); font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.svc-route-to::after { content: ' \2192'; }
.svc-route:hover .svc-route-text { text-decoration: underline; text-underline-offset: 3px; }
.svc-route:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 2px; border-radius: 8px; }

/* Services: four cards on shared rows (head, title, summary, list, button) */
body.services-page .svc-services { background: radial-gradient(45% 55% at 100% 0%, rgba(228,242,245,0.95), transparent 70%), var(--white); }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin-top: 2.5rem; }
.svc-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; margin-bottom: 1.5rem; padding: 2rem; border-radius: 14px; background: var(--off-white); border: 1px solid var(--border); }
.svc-card:nth-child(1) { border-top: 3px solid var(--teal); }
.svc-card:nth-child(2) { border-top: 3px solid var(--teal-light); }
.svc-card:nth-child(3) { border-top: 3px solid var(--gold-light); }
.svc-card:nth-child(4) { border-top: 3px solid var(--gold); }
.svc-card-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.svc-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--white); border: 1px solid var(--border); }
.svc-card-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--teal); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.svc-card-kind { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.svc-card h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.6rem; line-height: 1.2; color: var(--navy); margin-bottom: 0.6rem; }
.svc-card > p { color: var(--mid); font-size: 0.95rem; max-width: 52ch; margin-bottom: 1.25rem; }
.svc-list { list-style: none; display: grid; gap: 0.55rem; align-content: start; padding-top: 1.1rem; margin-bottom: 1.5rem; border-top: 1px solid rgba(35,54,68,0.14); }
.svc-list li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; line-height: 1.5; color: var(--near-black); }
.svc-list li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 12px; height: 7px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.svc-card .btn { align-self: end; justify-self: start; }
@supports not (grid-template-rows: subgrid) { .svc-card > p { min-height: 6.5em; } .svc-list { min-height: 11em; } }

/* Sectors */
body.services-page .svc-sectors { background: var(--off-white); }
.svc-sector-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 2.5rem; border-top: 1px solid var(--border); }
.svc-sector { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 1.75rem 1.5rem 0.25rem; border-left: 1px solid var(--border); }
.svc-sector:first-child { border-left: 0; padding-left: 0; }
.svc-sector:last-child { padding-right: 0; }
.svc-sector-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1rem; display: block; }
.svc-sector h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.45rem; color: var(--navy); margin-bottom: 0.5rem; }
.svc-sector p { color: var(--mid); font-size: 0.93rem; }

/* AI band */
body.services-page .svc-ai { background: radial-gradient(60% 80% at 90% 0%, rgba(7,131,150,0.30), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(201,168,76,0.10), transparent 70%), var(--navy-deep); border-top: 2px solid rgba(201,168,76,0.55); }
.svc-ai-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 4rem; align-items: center; }
.svc-ai .lead { max-width: 52ch; margin-bottom: 1.75rem; }
.svc-ai .section-tag { color: var(--teal-light); }

/* Proof and process */
body.services-page .svc-proof { background: var(--white); }
body.services-page .svc-process { background: radial-gradient(50% 50% at 0% 0%, rgba(228,242,245,0.95), transparent 70%), var(--off-white); }
.svc-steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; position: relative; }
.svc-step { counter-increment: s; position: relative; padding-top: 3.25rem; }
.svc-step-n { position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 0.95rem; font-weight: 600; z-index: 1; }
.svc-step-n::before { content: counter(s); }
.svc-step:not(:last-child)::after { content: ''; position: absolute; top: 18px; left: 38px; right: calc(-1.5rem); height: 2px; background: var(--slate); }
.svc-step h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.3rem; color: var(--navy); margin-bottom: 0.4rem; }
.svc-step p { color: var(--mid); font-size: 0.88rem; }

@media (max-width: 1000px) {
  .svc-sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-sector { grid-row: auto; display: block; }
  .svc-sector:nth-child(odd) { border-left: 0; padding-left: 0; }
  .svc-sector:nth-child(n+3) { border-top: 1px solid var(--border); margin-top: 1.25rem; }
  .svc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.25rem; }
  .svc-step:nth-child(3n)::after { display: none; }
}
@media (max-width: 900px) {
  .svc-hero { padding: 3.5rem 1.5rem 3.5rem; }
  .svc-hero-inner, .svc-ai-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .svc-hero .hero-art-circle { left: 55%; top: -4%; height: 420px; }
  .svc-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .svc-card { display: block; margin-bottom: 0; padding: 1.5rem; }
  .svc-card > p, .svc-list { min-height: 0; }
}
@media (max-width: 640px) {
  body.services-page .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.services-page h2.display { font-size: 1.75rem; line-height: 1.18; margin-bottom: 0.9rem; }
  body.services-page .lead { font-size: 0.97rem; }
  .svc-hero { padding: 2.75rem 1.1rem 3rem; }
  .svc-hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.3rem); }
  .svc-hero-copy > p { font-size: 0.97rem; }
  .svc-routes { padding: 1.2rem 1.1rem 0.4rem; }
  .svc-route { grid-template-columns: 34px minmax(0, 1fr); row-gap: 0.15rem; }
  .svc-route-to { grid-column: 2; }
  .svc-card h3 { font-size: 1.35rem; }
  .svc-sector-grid { grid-template-columns: 1fr; }
  .svc-sector, .svc-sector:nth-child(n) { border-left: 0; padding: 1.5rem 0 0.25rem; }
  .svc-sector + .svc-sector { border-top: 1px solid var(--border); margin-top: 0.5rem; }
  .svc-sector h3 { font-size: 1.3rem; }
  .svc-steps { grid-template-columns: 1fr; gap: 0; margin-top: 2rem; }
  .svc-step { padding: 0 0 1.75rem 3.4rem; }
  .svc-step-n { left: 0; top: 0; width: 34px; height: 34px; font-size: 0.9rem; }
  .svc-step:not(:last-child)::after { display: block; left: 16px; top: 34px; right: auto; bottom: 0; width: 2px; height: auto; }
  .svc-step h3 { font-size: 1.2rem; }
  .svc-ai .ai-proof-result strong { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .svc-route { transition: none; } }

/* Services hero: compact banner. The router moves to its own strip under the hero. */
.svc-hero { padding: 3.25rem 4rem 3.5rem; }
.svc-hero-inner { grid-template-columns: 1fr; gap: 0; }
.svc-hero h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); max-width: 22ch; margin-bottom: 1rem; }
.svc-hero-copy > p { font-size: 1rem; margin-bottom: 1.5rem; max-width: 58ch; }
.svc-hero .hero-art-circle { left: 80%; top: -30%; height: 170%; }

.svc-start { background: var(--white); padding: 0 4rem; position: relative; z-index: 2; }
.svc-start-inner { max-width: 1200px; margin: 0 auto; }
.svc-routes.svc-routes-row {
  grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto; gap: 0; margin-top: -2rem; padding: 0;
  background: var(--white); border: 1px solid var(--border); box-shadow: 0 14px 34px rgba(5,25,38,0.08);
  -webkit-backdrop-filter: none; backdrop-filter: none; overflow: hidden;
}
.svc-routes-row .svc-routes-title { grid-column: 1 / -1; padding: 1rem 1.4rem 0.2rem; color: var(--navy); }
.svc-routes-row .svc-route { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 0.6rem; align-content: start; padding: 1rem 1.4rem 1.25rem; border-top: 0; border-left: 1px solid var(--border); }
.svc-routes-row .svc-routes-title + .svc-route { border-left: 0; }
.svc-routes-row .svc-route-icon { background: var(--teal-pale); border-color: rgba(7,131,150,0.2); }
.svc-routes-row .svc-route-icon svg { stroke: var(--teal); }
.svc-routes-row .svc-route-text { color: var(--navy); font-size: 0.93rem; }
.svc-routes-row .svc-route-to { color: var(--teal-dark); }
.svc-routes-row .svc-route:hover { background: var(--teal-pale); }
body.services-page .svc-services { padding-top: 4rem; }

@media (max-width: 1000px) {
  .svc-routes.svc-routes-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-routes-row .svc-route { border-left: 0; border-top: 1px solid var(--border); }
  .svc-routes-row .svc-route:nth-child(even) { border-left: 1px solid var(--border); }
}
@media (max-width: 900px) {
  .svc-hero { padding: 2.5rem 1.5rem 3rem; }
  .svc-hero .hero-art-circle { left: 55%; top: -10%; height: 320px; }
  .svc-start { padding: 0 1.5rem; }
}
@media (max-width: 640px) {
  .svc-hero { padding: 2.25rem 1.1rem 3rem; }
  .svc-start { padding: 0 1.1rem; }
  .svc-routes.svc-routes-row { grid-template-columns: 1fr; margin-top: -1.5rem; }
  .svc-routes-row .svc-route, .svc-routes-row .svc-route:nth-child(even) { grid-template-columns: 34px minmax(0, 1fr); border-left: 0; padding: 0.9rem 1.1rem; }
  .svc-routes-row .svc-route-to { grid-column: 2; }
  .svc-routes-row .svc-routes-title { padding: 0.9rem 1.1rem 0.1rem; }
  body.services-page .svc-services { padding-top: 3rem; }
}

.svc-hero h1 { max-width: 26ch; }

/* Services: carousel tags and card copy match the homepage compliance fixes */
body.services-page .result-tag { color: var(--navy); }
body.services-page .result-card p { line-height: 1.6; }

/* Services: delivered-by-service list (replaces the copied carousel) */
.svc-deliv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.5rem; border-top: 1px solid var(--border); }
.svc-deliv-col { padding: 1.75rem 1.5rem 0.5rem; border-left: 1px solid var(--border); }
.svc-deliv-col:first-child { border-left: 0; padding-left: 0; }
.svc-deliv-col:last-child { padding-right: 0; }
.svc-deliv-col h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.45rem; color: var(--navy); margin-bottom: 1rem; }
.svc-deliv-col ul { list-style: none; display: grid; gap: 0.7rem; }
.svc-deliv-col a { color: var(--teal-dark); font-weight: 500; font-size: 0.95rem; line-height: 1.45; text-decoration: none; }
.svc-deliv-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) { .svc-deliv-grid { grid-template-columns: 1fr; } .svc-deliv-col, .svc-deliv-col:first-child, .svc-deliv-col:last-child { border-left: 0; padding: 1.5rem 0 0.25rem; } .svc-deliv-col + .svc-deliv-col { border-top: 1px solid var(--border); margin-top: 0.75rem; } }
@media (max-width: 640px) { .svc-deliv-col h3 { font-size: 1.3rem; } }

/* Single-message closing section (no right-hand list), used where a list would only repeat other sections */
.ai-cta-inner.ai-cta-single { grid-template-columns: 1fr; max-width: 760px; text-align: left; }
.ai-cta-single .ai-cta-copy p { max-width: 56ch; }

/* Services router strip: its own quiet band under the hero (no overlap, no clipped edge) */
.svc-start { background: var(--off-white); padding: 2rem 4rem; border-bottom: 1px solid var(--border); }
.svc-routes.svc-routes-row { margin-top: 0; box-shadow: none; }
body.services-page .svc-services { padding-top: 4.5rem; }
@media (max-width: 900px) { .svc-start { padding: 1.5rem 1.5rem; } }
@media (max-width: 640px) { .svc-start { padding: 1.25rem 1.1rem; } .svc-routes.svc-routes-row { margin-top: 0; } body.services-page .svc-services { padding-top: 3rem; } }
@media (max-width: 1180px) {
  .svc-routes.svc-routes-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-routes-row .svc-route { border-left: 0; border-top: 1px solid var(--border); }
  .svc-routes-row .svc-route:nth-child(odd) { border-left: 1px solid var(--border); }
  .svc-routes-row .svc-routes-title + .svc-route { border-left: 0; }
  .svc-routes-row .svc-route:last-child { grid-column: 1 / -1; border-left: 0; }
}
@media (max-width: 640px) {
  .svc-routes.svc-routes-row { grid-template-columns: 1fr; }
  .svc-routes-row .svc-route, .svc-routes-row .svc-route:nth-child(odd), .svc-routes-row .svc-route:last-child { border-left: 0; grid-column: auto; }
}

/* ══════════════════════════════════════════════════════════════
   Closing section, all pages: a Navy Deep panel on a light band, so the navy footer
   starts clearly after it (grid-on-navy running into the navy footer merged into one block).
   ══════════════════════════════════════════════════════════════ */
.cta-section.ai-cta { background: var(--white); border-top: 0; padding: 4.5rem 4rem; }
.cta-section.ai-cta .ai-cta-inner {
  position: relative; overflow: hidden; max-width: 1200px; margin: 0 auto; padding: 3.5rem 3.75rem;
  background: var(--navy-deep); border-radius: 20px; border-top: 3px solid var(--gold);
  box-shadow: 0 24px 60px rgba(5,25,38,0.18);
}
.cta-section.ai-cta .hero-art { position: absolute; inset: 0; z-index: 0; }
.cta-section.ai-cta .ai-cta-copy, .cta-section.ai-cta .ai-cta-steps { position: relative; z-index: 1; }
.cta-section.ai-cta .ai-cta-inner.ai-cta-single { max-width: 1200px; }
.ai-cta-single .ai-cta-copy { max-width: 760px; }
body.ai-page .cta-section.ai-cta, body.home .cta-section.ai-cta { background: var(--white); border-top: 0; }
@media (max-width: 900px) {
  .cta-section.ai-cta { padding: 3rem 1.5rem; }
  .cta-section.ai-cta .ai-cta-inner { padding: 2.25rem 1.75rem; border-radius: 16px; }
}
@media (max-width: 640px) {
  .cta-section.ai-cta { padding: 2.25rem 1rem; }
  .cta-section.ai-cta .ai-cta-inner { padding: 1.75rem 1.25rem; }
}

/* Services hero: oversized outlined "Build / Extend" over the gold disc. One bold move, still a compact banner. */
.svc-hero { padding: 3.75rem 4rem 4rem; }
.svc-hero .hero-art-circle { left: 70%; top: -25%; height: 150%; }
.svc-hero-copy { max-width: 600px; }
@media (max-width: 1000px) {
  }
@media (max-width: 640px) {
  .svc-hero { padding: 2.25rem 1.1rem 3rem; }
    .svc-hero .hero-art-circle { left: 40%; top: -15%; height: 300px; }
}

/* Single-message closing panel: headline and line on the left, the two actions stacked on the right */
.cta-section.ai-cta .ai-cta-single .ai-cta-copy { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 4rem; align-items: center; }
.ai-cta-single .ai-cta-copy h2, .ai-cta-single .ai-cta-copy p { grid-column: 1; max-width: 40rem; }
.ai-cta-single .ai-cta-copy .cta-actions { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: stretch; margin: 0; }
.ai-cta-single .ai-cta-copy .cta-actions .btn { justify-content: center; white-space: nowrap; }
.ai-cta-single .ai-cta-copy p { margin-bottom: 0; }
@media (max-width: 900px) {
  .cta-section.ai-cta .ai-cta-single .ai-cta-copy { grid-template-columns: 1fr; }
  .ai-cta-single .ai-cta-copy .cta-actions { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; margin-top: 1.75rem; }
  .ai-cta-single .ai-cta-copy p { margin-bottom: 0; }
}
@media (max-width: 640px) { .ai-cta-single .ai-cta-copy .cta-actions { flex-direction: column; } }

/* Services hero: photo bleeding off the right edge, fading into Navy Deep on its left. Compact banner kept. */
.svc-hero .hero-art-circle { display: none; }
.svc-hero-photo { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 48%; overflow: hidden; pointer-events: none; }
.svc-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; display: block; filter: saturate(0.9); }
.svc-hero-photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(5,25,38,0.28); }
.svc-hero-photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%); mask-image: linear-gradient(90deg, transparent 0, #000 42%); }
.svc-hero-copy { max-width: 560px; }
@media (max-width: 900px) { .svc-hero-photo { display: none; } }
.svc-hero-copy { max-width: 640px; }
.svc-hero h1 { max-width: none; text-wrap: balance; }
@media (max-width: 1200px) and (min-width: 901px) { .svc-hero-copy { max-width: 54%; } .svc-hero-photo { width: 44%; } }

/* ══════════════════════════════════════════════════════════════
   Mobile gutter: one consistent 22px side inset on phones for nav, heroes, sections,
   closing panel and footer (was 16px sections, 17.6px/20px heroes, 24px footer).
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  body.home, body.ai-page, body.services-page { --gutter-m: 1.375rem; }
  body.home nav, body.ai-page nav, body.services-page nav { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.home .hero, body.ai-page .ai-neural-hero, body.services-page .svc-hero { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.home .section, body.ai-page .section, body.services-page .section,
  body.services-page .svc-start { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.home .cta-section.ai-cta, body.ai-page .cta-section.ai-cta, body.services-page .cta-section.ai-cta { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.home footer, body.ai-page footer, body.services-page footer { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  /* panels and cards get comfortable inner padding relative to the new gutter */
  .cta-section.ai-cta .ai-cta-inner { padding: 2rem 1.5rem; }
  body.home .persona-panel, body.ai-page .ai-proof-card, body.ai-page .ai-offer-tile, body.services-page .svc-card { padding: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   Business Solutions (body.business-page)
   Compact photo hero, systems-we-have-built rows, built-in-as-standard band, handover,
   FAQ and a single-message closing panel. Reuses .svc-hero, .faq-*, .ai-cta*, .svc-list.
   ══════════════════════════════════════════════════════════════ */
body.business-page h1, body.business-page h2, body.business-page h3,
body.business-page h2.display, body.business-page h2.display em { font-weight: 400; }
body.business-page .lead, body.business-page .faq-item p, body.business-page .bs-build-body p,
body.business-page .bs-std p, body.business-page .ai-cta-copy p, body.business-page .bs-product p { line-height: 1.6; }
body.business-page .section-tag { color: var(--navy); }

/* Systems we have built */
body.business-page .bs-builds { background: radial-gradient(45% 55% at 100% 0%, rgba(228,242,245,0.95), transparent 70%), var(--white); }
.bs-product { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 2.5rem; padding: 1.75rem 2rem; border-radius: 14px; background: var(--teal-pale); border: 1px solid rgba(7,131,150,0.25); border-top: 3px solid var(--teal); }
.bs-product-tag { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.4rem; }
.bs-product h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.6rem; color: var(--navy); margin-bottom: 0.35rem; }
.bs-product p { color: var(--mid); font-size: 0.95rem; max-width: 54ch; }
.bs-product .btn { flex: 0 0 auto; white-space: nowrap; }
.bs-build-list { margin-top: 2.5rem; border-top: 1px solid var(--border); }
.bs-build { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.05fr) minmax(0, 1.15fr); gap: 2.5rem; padding: 2.25rem 0; border-bottom: 1px solid var(--border); align-items: start; }
.bs-build-head { display: flex; gap: 1rem; align-items: flex-start; }
.bs-icon { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--teal-pale); }
.bs-icon svg, .bs-std-icon svg { width: 23px; height: 23px; fill: none; stroke: var(--teal); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.bs-build h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--navy); margin-bottom: 0.4rem; }
.bs-for { font-size: 0.82rem; font-weight: 600; color: var(--mid); }
.bs-build-body p { color: var(--near-black); font-size: 1rem; }
.bs-links { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: baseline; }
.bs-links span { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.bs-links a { color: var(--teal-dark); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.bs-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bs-ticks { list-style: none; display: grid; gap: 0.7rem; align-content: start; }
.bs-ticks li { position: relative; padding-left: 1.5rem; font-size: 0.92rem; line-height: 1.55; color: var(--near-black); }
.bs-ticks li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 12px; height: 7px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }

/* Built in as standard */
body.business-page .bs-standard { background: radial-gradient(60% 80% at 88% 0%, rgba(7,131,150,0.30), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(201,168,76,0.10), transparent 70%), var(--navy-deep); border-top: 2px solid rgba(201,168,76,0.55); }
.bs-std-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 3rem; border-top: 1px solid rgba(255,255,255,0.16); }
.bs-std { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 2rem 1.75rem 0.5rem; border-left: 1px solid rgba(255,255,255,0.16); }
.bs-std:first-child { border-left: 0; padding-left: 0; }
.bs-std:last-child { padding-right: 0; }
.bs-std-icon { display: block; margin-bottom: 1.2rem; }
.bs-std-icon svg { width: 30px; height: 30px; stroke: var(--teal-light); stroke-width: 1.6; }
.bs-std h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.45rem; color: #fff; margin-bottom: 0.7rem; }
.bs-std p { color: rgba(255,255,255,0.82); font-size: 0.93rem; }

/* Handover */
body.business-page .bs-handover { background: radial-gradient(50% 50% at 0% 0%, rgba(228,242,245,0.95), transparent 70%), var(--off-white); }
.bs-handover-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; }
.bs-handover .lead { margin-bottom: 1.75rem; }
.bs-handover-list { gap: 0; margin: 0; border-top: 1px solid var(--border); padding-top: 0; }
.bs-handover-list li { padding: 1rem 0 1rem 1.75rem; border-bottom: 1px solid var(--border); font-size: 1rem; }
.bs-handover-list li::before { top: 1.45rem; }
body.business-page .faq-section { background: radial-gradient(55% 60% at 100% 100%, rgba(83,177,205,0.16), transparent 70%), var(--teal-pale); }

@media (max-width: 1100px) {
  .bs-build { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
  .bs-build-head { grid-column: 1 / -1; }
  .bs-std-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-std { grid-row: auto; display: block; }
  .bs-std:nth-child(odd) { border-left: 0; padding-left: 0; }
  .bs-std:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.16); margin-top: 1.5rem; }
}
@media (max-width: 900px) {
  .bs-handover-grid { grid-template-columns: 1fr; gap: 2rem; }
  .bs-product { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  body.business-page { --gutter-m: 1.375rem; }
  body.business-page nav, body.business-page .svc-hero, body.business-page .section,
  body.business-page .cta-section.ai-cta, body.business-page footer { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.business-page .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.business-page h2.display { font-size: 1.75rem; line-height: 1.18; margin-bottom: 0.9rem; }
  body.business-page .lead { font-size: 0.97rem; }
  body.business-page .svc-hero { padding-top: 2.25rem; padding-bottom: 3rem; }
  body.business-page .svc-hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.3rem); }
  body.business-page .svc-hero-copy > p { font-size: 0.97rem; }
  .bs-product { padding: 1.4rem 1.25rem; }
  .bs-product h3 { font-size: 1.35rem; }
  .bs-product .btn { width: 100%; justify-content: center; white-space: normal; }
  .bs-build { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.75rem 0; }
  .bs-build h3 { font-size: 1.3rem; }
  .bs-std-grid { grid-template-columns: 1fr; }
  .bs-std, .bs-std:nth-child(n) { border-left: 0; padding: 1.5rem 0 0.25rem; }
  .bs-std + .bs-std { border-top: 1px solid rgba(255,255,255,0.16); margin-top: 1rem; }
  .bs-std h3 { font-size: 1.3rem; }
  .bs-handover-list li { font-size: 0.97rem; }
  body.business-page .cta-section.ai-cta .ai-cta-inner { padding: 2rem 1.5rem; }
}
.bs-links { display: grid; gap: 0.4rem; justify-items: start; }
.bs-links span { margin-bottom: 0.1rem; }

/* ══════════════════════════════════════════════════════════════
   Inner pages: visible background rhythm (Services, Business Solutions).
   Alternating White / Off White / Teal Pale / Navy bands, each with a clear teal-light or
   gold-light wash, so sections separate the way they do on the homepage.
   ══════════════════════════════════════════════════════════════ */
/* Services */
body.services-page .svc-start { background: linear-gradient(180deg, var(--teal-pale) 0, var(--off-white) 100%); }
body.services-page .svc-services {
  background: radial-gradient(55% 45% at 100% 0%, rgba(83,177,205,0.26), transparent 72%), radial-gradient(40% 40% at 0% 100%, rgba(232,201,122,0.20), transparent 72%), var(--white);
}
body.services-page .svc-sectors { background: var(--teal-pale); border-top: 1px solid rgba(7,131,150,0.14); border-bottom: 1px solid rgba(7,131,150,0.14); }
body.services-page .svc-sectors .svc-sector-grid, body.services-page .svc-sectors .svc-sector { border-color: rgba(7,131,150,0.22); }
body.services-page .svc-proof { background: radial-gradient(50% 55% at 0% 0%, rgba(232,201,122,0.24), transparent 72%), radial-gradient(45% 50% at 100% 100%, rgba(83,177,205,0.18), transparent 72%), var(--white); }
body.services-page .svc-process { background: radial-gradient(60% 60% at 100% 0%, rgba(83,177,205,0.24), transparent 72%), var(--off-white); }
body.services-page .faq-section { background: radial-gradient(55% 60% at 0% 100%, rgba(83,177,205,0.26), transparent 72%), var(--teal-pale); }
body.services-page .cta-section.ai-cta { background: radial-gradient(60% 70% at 50% 0%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }
body.services-page .svc-card { background: var(--white); }

/* Business Solutions */
body.business-page .bs-builds { background: radial-gradient(55% 40% at 100% 0%, rgba(83,177,205,0.26), transparent 72%), radial-gradient(40% 30% at 0% 100%, rgba(232,201,122,0.20), transparent 72%), var(--white); }
body.business-page .bs-handover { background: var(--teal-pale); border-top: 1px solid rgba(7,131,150,0.14); }
body.business-page .bs-handover-list, body.business-page .bs-handover-list li { border-color: rgba(7,131,150,0.22); }
body.business-page .faq-section { background: radial-gradient(55% 60% at 100% 100%, rgba(83,177,205,0.22), transparent 72%), radial-gradient(40% 50% at 0% 0%, rgba(232,201,122,0.18), transparent 72%), var(--off-white); }
body.business-page .cta-section.ai-cta { background: radial-gradient(60% 70% at 50% 0%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }
body.business-page .bs-product { background: var(--teal-pale); }
body.business-page .faq-item { background: var(--white); }

/* ══════════════════════════════════════════════════════════════
   Business Solutions: "systems we have built" as a visual grid (replaces the three-column rows).
   Each card shows a small illustration of what the system does. Flat fills, no gradients on cards.
   ══════════════════════════════════════════════════════════════ */
.bs-build-list { display: none; }
.bs-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.bs-card { grid-column: span 4; display: flex; flex-direction: column; border-radius: 16px; background: var(--white); border: 1px solid var(--border); overflow: hidden; }
.bs-card.bs-wide { grid-column: span 7; flex-direction: row; }
.bs-card.bs-side { grid-column: span 5; }
.bs-card-top { padding: 1.5rem 1.5rem 0; background: var(--teal-pale); border-bottom: 1px solid rgba(7,131,150,0.16); display: flex; align-items: flex-end; min-height: 168px; }
.bs-card-body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.bs-card-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.bs-card h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.45rem; line-height: 1.2; color: var(--navy); margin-bottom: 0.5rem; }
.bs-card-body > p { color: var(--near-black); font-size: 0.97rem; margin-bottom: 1rem; }
.bs-card .bs-ticks { margin-bottom: 1rem; }
.bs-link, .bs-links a { color: var(--teal-dark); font-weight: 600; font-size: 0.9rem; text-decoration: none; margin-top: auto; }
.bs-link:hover, .bs-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bs-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: auto; }
.bs-card.bs-wide .bs-card-top { width: 46%; flex: 0 0 46%; border-bottom: 0; border-right: 1px solid rgba(255,255,255,0.14); }
.bs-card.bs-dark { background: var(--navy-deep); border-color: var(--navy-deep); }
.bs-dark .bs-card-top { background: var(--navy); }
.bs-dark h3 { color: #fff; }
.bs-dark .bs-card-body > p, .bs-dark .bs-ticks li { color: rgba(255,255,255,0.86); }
.bs-dark .bs-for { color: var(--teal-light); }
.bs-dark .bs-icon { background: rgba(83,177,205,0.16); }
.bs-dark .bs-icon svg { stroke: var(--teal-light); }
.bs-dark .bs-ticks li::before { border-color: var(--gold-light); }
.bs-dark .bs-link { color: var(--teal-light); }
.bs-card .bs-icon { width: 38px; height: 38px; border-radius: 10px; }
.bs-card .bs-icon svg { width: 20px; height: 20px; }

/* Illustrations (decorative, built from plain boxes) */
.bs-vis { width: 100%; font-size: 0.72rem; color: var(--navy); }
.bs-vis i { display: block; height: 22px; border-radius: 6px; background: var(--white); border: 1px solid rgba(35,54,68,0.14); }
.bs-vis i.short { width: 70%; }
.bs-vis-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; align-items: end; }
.bs-vis-kanban .k-col { display: grid; gap: 0.45rem; align-content: end; }
.bs-vis-kanban .k-title { font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,0.8); margin-bottom: 0.1rem; }
.bs-vis-kanban i { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); }
.bs-vis-kanban i.on { background: var(--teal); border-color: var(--teal-light); display: flex; align-items: center; justify-content: flex-end; padding: 0 0.5rem; }
.bs-vis-kanban i.on b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.bs-vis-kanban i.done { background: rgba(232,201,122,0.24); border-color: rgba(232,201,122,0.5); }
.bs-vis-funnel { display: grid; gap: 0.4rem; padding-bottom: 1.2rem; }
.bs-vis-funnel div { width: var(--w); background: var(--teal); border-radius: 6px; padding: 0.4rem 0.6rem; color: #fff; font-weight: 600; }
.bs-vis-funnel div:nth-child(2) { background: #0a93a8; }
.bs-vis-funnel div:nth-child(3) { background: var(--teal-light); color: var(--navy-deep); }
.bs-vis-funnel div.won { background: var(--gold); color: var(--navy-deep); }
.bs-vis-flow { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; align-items: center; gap: 0.35rem; padding-bottom: 1.4rem; }
.bs-vis-flow span { background: var(--white); border: 1px solid rgba(35,54,68,0.16); border-radius: 999px; padding: 0.35rem 0.6rem; font-weight: 600; white-space: nowrap; }
.bs-vis-flow span.end { background: var(--gold-light); border-color: var(--gold); }
.bs-vis-flow em { height: 2px; background: var(--teal-light); min-width: 6px; }
.bs-vis-form { display: grid; gap: 0.45rem; padding-bottom: 1.2rem; position: relative; }
.bs-vis-form .lock { justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 600; }
.bs-vis-form .lock svg { width: 13px; height: 13px; fill: none; stroke: var(--gold-light); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bs-vis-time { display: grid; gap: 0.5rem; padding-bottom: 1.2rem; position: relative; }
.bs-vis-time div { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: center; background: var(--white); border: 1px solid rgba(35,54,68,0.14); border-radius: 8px; padding: 0.4rem 0.65rem; }
.bs-vis-time b { color: var(--teal-dark); font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .bs-card, .bs-card.bs-side { grid-column: span 6; }
  .bs-card.bs-wide { grid-column: 1 / -1; }
  .bs-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .bs-bento { gap: 1.1rem; }
  .bs-card, .bs-card.bs-side, .bs-card.bs-wide, .bs-card:last-child { grid-column: 1 / -1; }
  .bs-card.bs-wide { flex-direction: column; }
  .bs-card.bs-wide .bs-card-top { width: auto; flex: none; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
  .bs-card-top { min-height: 0; padding-top: 1.25rem; }
  .bs-card h3 { font-size: 1.3rem; }
  .bs-card-body { padding: 1.25rem 1.25rem 1.5rem; }
}
.bs-card-top { align-items: center; padding: 1.5rem; min-height: 150px; }
.bs-vis-kanban { align-items: start; }
.bs-vis-kanban .k-col { align-content: start; }
.bs-vis-funnel, .bs-vis-flow, .bs-vis-form, .bs-vis-time { padding-bottom: 0; }
.bs-card.bs-wide .bs-card-top { min-height: 0; }
.bs-links a { margin-top: 0; }

/* Business Solutions: the three-up row aligns on shared horizontal lines (panel, label, title, sentence, points, link) */
@media (min-width: 1101px) {
  .bs-card:not(.bs-wide):not(.bs-side) .bs-card-top { height: 190px; min-height: 190px; flex: 0 0 190px; }
  .bs-card:not(.bs-wide):not(.bs-side) .bs-card-body > p { min-height: 3.2em; }
  .bs-card:not(.bs-wide):not(.bs-side) .bs-ticks { min-height: 6.2rem; align-content: start; }
  .bs-card:not(.bs-wide):not(.bs-side) .bs-card-body > .bs-link,
  .bs-card:not(.bs-wide):not(.bs-side) .bs-card-body > .bs-links { margin-top: auto; }
  .bs-card.bs-side .bs-card-top { height: 190px; min-height: 190px; flex: 0 0 190px; }
}
.bs-card-top { box-sizing: border-box; }
@media (min-width: 1101px) {
  .bs-card:not(.bs-wide):not(.bs-side) .bs-card-body > .bs-link,
  .bs-card:not(.bs-wide):not(.bs-side) .bs-card-body > .bs-links { margin-top: 0; }
  .bs-card:not(.bs-wide):not(.bs-side) .bs-ticks { margin-bottom: 0.9rem; }
  .bs-card:not(.bs-wide):not(.bs-side) .bs-links { display: grid; gap: 0.35rem; justify-items: start; }
}
@media (min-width: 1101px) and (max-width: 1320px) { .bs-card:not(.bs-wide):not(.bs-side) .bs-card-body > p { min-height: 4.9em; } }
.bs-vis-kanban i.on { justify-content: flex-start; }
.bs-vis-kanban i.on b { font-variant-numeric: normal; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1101px) and (max-width: 1320px) {
  .bs-card:not(.bs-wide):not(.bs-side) h3 { min-height: 2.4em; }
  .bs-card:not(.bs-wide):not(.bs-side) .bs-card-body > p { min-height: 4.9em; }
  .bs-card:not(.bs-wide):not(.bs-side) .bs-ticks { min-height: 7.6rem; }
}
.bs-vis i, .bs-vis-kanban i.on b { font-style: normal; }
.bs-vis-kanban i.on { padding: 0 0.55rem; }

/* ══════════════════════════════════════════════════════════════
   Solution Architecture & Design (body.architecture-page)
   Compact photo hero, three stages, layered-architecture stack, document package, risk row, FAQ.
   ══════════════════════════════════════════════════════════════ */
body.architecture-page h1, body.architecture-page h2, body.architecture-page h3,
body.architecture-page h2.display, body.architecture-page h2.display em { font-weight: 400; }
body.architecture-page .lead, body.architecture-page .faq-item p, body.architecture-page .sa-stage p,
body.architecture-page .sa-doc p, body.architecture-page .sa-risk p, body.architecture-page .ai-cta-copy p { line-height: 1.6; }
body.architecture-page .section-tag { color: var(--navy); }

/* Stages */
body.architecture-page .sa-stages { background: radial-gradient(55% 45% at 100% 0%, rgba(83,177,205,0.26), transparent 72%), radial-gradient(40% 40% at 0% 100%, rgba(232,201,122,0.20), transparent 72%), var(--white); }
.sa-stage-grid { counter-reset: st; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; margin-top: 3rem; position: relative; }
.sa-stage { counter-increment: st; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; position: relative; }
.sa-stage-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; position: relative; }
.sa-n { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 600; z-index: 1; }
.sa-n::before { content: counter(st); }
.sa-stage:not(:last-child) .sa-stage-head::after { content: ''; flex: 1; height: 2px; background: var(--slate); margin-right: -2.5rem; }
.sa-stage-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sa-stage h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.9rem; color: var(--navy); margin-bottom: 0.15rem; }
.sa-stage-q { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 0.8rem; }
.sa-stage > p { color: var(--mid); font-size: 0.97rem; margin-bottom: 1.25rem; max-width: 40ch; }
.sa-outs { list-style: none; display: grid; gap: 0; align-content: start; border-top: 1px solid var(--border); }
.sa-outs li { position: relative; padding: 0.7rem 0 0.7rem 1.5rem; border-bottom: 1px solid var(--border); font-size: 0.93rem; color: var(--near-black); }
.sa-outs li::before { content: ''; position: absolute; left: 0; top: 1.05rem; width: 12px; height: 7px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }

/* Architecture stack (dark field, flat fills stepping through the palette) */
body.architecture-page .sa-arch { background: radial-gradient(60% 80% at 88% 0%, rgba(7,131,150,0.30), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(201,168,76,0.10), transparent 70%), var(--navy-deep); border-top: 2px solid rgba(201,168,76,0.55); }
.sa-arch-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; align-items: center; }
.sa-arch-copy .lead { max-width: 46ch; margin-bottom: 1.2rem; }
.sa-stack { list-style: none; display: grid; gap: 0.5rem; padding: 0; counter-reset: ly; }
.sa-layer { display: grid; grid-template-columns: 36px 11rem minmax(0, 1fr); gap: 0.9rem; align-items: center; padding: 0.85rem 1.1rem; border-radius: 10px; color: #fff; border: 1px solid rgba(255,255,255,0.14); transition: transform 0.2s ease; }
.sa-layer:nth-child(1) { background: var(--navy); margin-inline: 0 0; }
.sa-layer:nth-child(2) { background: #1d5a73; }
.sa-layer:nth-child(3) { background: var(--teal-dark); }
.sa-layer:nth-child(4) { background: var(--teal); }
.sa-layer:nth-child(5) { background: #0a6f84; }
.sa-layer:nth-child(6) { background: #1d4a63; }
.sa-layer:nth-child(7) { background: var(--navy); border-style: dashed; border-color: rgba(232,201,122,0.55); }
.sa-layer:hover { transform: translateX(6px); }
.sa-layer-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--gold-light); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.sa-layer strong { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.2rem; }
.sa-layer > span:last-child { font-size: 0.86rem; line-height: 1.45; color: rgba(255,255,255,0.88); }

/* Package */
body.architecture-page .sa-package { background: var(--teal-pale); border-top: 1px solid rgba(7,131,150,0.14); border-bottom: 1px solid rgba(7,131,150,0.14); }
.sa-doc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.sa-doc { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 1.4rem 1.4rem 1.5rem; border-radius: 4px 14px 14px 14px; background: var(--white); border: 1px solid rgba(7,131,150,0.2); border-top: 3px solid var(--teal); position: relative; }
.sa-doc::after { content: ''; position: absolute; top: 0; right: 0; width: 22px; height: 22px; background: var(--teal-pale); border-bottom-left-radius: 8px; border-left: 1px solid rgba(7,131,150,0.2); border-bottom: 1px solid rgba(7,131,150,0.2); }
.sa-doc-icon svg, .sa-risk-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; margin-bottom: 0.9rem; }
.sa-doc h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.25rem; line-height: 1.25; color: var(--navy); margin-bottom: 0.45rem; }
.sa-doc p { color: var(--mid); font-size: 0.9rem; }

/* Risk */
body.architecture-page .sa-risks { background: radial-gradient(50% 55% at 0% 0%, rgba(232,201,122,0.24), transparent 72%), radial-gradient(45% 50% at 100% 100%, rgba(83,177,205,0.18), transparent 72%), var(--white); }
.sa-risk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 2.5rem; border-top: 1px solid var(--border); }
.sa-risk { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 1.75rem 1.5rem 0.25rem; border-left: 1px solid var(--border); }
.sa-risk:first-child { border-left: 0; padding-left: 0; }
.sa-risk:last-child { padding-right: 0; }
.sa-risk h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.45rem; color: var(--navy); margin-bottom: 0.5rem; }
.sa-risk p { color: var(--mid); font-size: 0.93rem; }
body.architecture-page .faq-section { background: radial-gradient(55% 60% at 100% 100%, rgba(83,177,205,0.22), transparent 72%), radial-gradient(40% 50% at 0% 0%, rgba(232,201,122,0.18), transparent 72%), var(--off-white); }
body.architecture-page .faq-item { background: var(--white); }
body.architecture-page .cta-section.ai-cta { background: radial-gradient(60% 70% at 50% 0%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }

@media (max-width: 1100px) {
  .sa-arch-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .sa-doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-doc { grid-row: auto; display: block; }
  .sa-risk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-risk { grid-row: auto; display: block; }
  .sa-risk:nth-child(odd) { border-left: 0; padding-left: 0; }
  .sa-risk:nth-child(n+3) { border-top: 1px solid var(--border); margin-top: 1.25rem; }
}
@media (max-width: 900px) {
  .sa-stage-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .sa-stage { grid-row: auto; display: block; }
  .sa-stage:not(:last-child) .sa-stage-head::after { margin-right: 0; }
}
@media (max-width: 640px) {
  body.architecture-page { --gutter-m: 1.375rem; }
  body.architecture-page nav, body.architecture-page .svc-hero, body.architecture-page .section,
  body.architecture-page .cta-section.ai-cta, body.architecture-page footer { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.architecture-page .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.architecture-page h2.display { font-size: 1.75rem; line-height: 1.18; margin-bottom: 0.9rem; }
  body.architecture-page .lead { font-size: 0.97rem; }
  body.architecture-page .svc-hero { padding-top: 2.25rem; padding-bottom: 3rem; }
  body.architecture-page .svc-hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.3rem); }
  body.architecture-page .svc-hero-copy > p { font-size: 0.97rem; }
  .sa-stage h3 { font-size: 1.5rem; }
  .sa-layer { grid-template-columns: 30px minmax(0, 1fr); row-gap: 0.1rem; padding: 0.8rem 0.9rem; }
  .sa-layer > span:last-child { grid-column: 2; }
  .sa-layer strong { font-size: 1.1rem; }
  .sa-doc-grid { grid-template-columns: 1fr; }
  .sa-doc h3 { font-size: 1.2rem; }
  .sa-risk-grid { grid-template-columns: 1fr; }
  .sa-risk, .sa-risk:nth-child(n) { border-left: 0; padding: 1.4rem 0 0.25rem; }
  .sa-risk + .sa-risk { border-top: 1px solid var(--border); margin-top: 0.5rem; }
  .sa-risk h3 { font-size: 1.3rem; }
  body.architecture-page .cta-section.ai-cta .ai-cta-inner { padding: 2rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .sa-layer { transition: none; } }

.sa-layer:nth-child(4) { background: #066d80; }
.sa-layer > span:last-child { color: #fff; }


/* ══════════════════════════════════════════════════════════════
   Photography in page content (inner pages): rounded photos, flat cards
   ══════════════════════════════════════════════════════════════ */
/* Business Solutions: solution examples with photos, shared rows (photo, title, sentence, outcome) */
body.business-page .bs-examples { background: radial-gradient(50% 45% at 0% 0%, rgba(83,177,205,0.22), transparent 72%), radial-gradient(45% 40% at 100% 100%, rgba(232,201,122,0.20), transparent 72%), var(--off-white); }
.bs-ex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.5rem; margin-top: 2.5rem; }
.bs-ex { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; margin-bottom: 1.5rem; background: var(--white); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.bs-ex-photo { aspect-ratio: 3 / 2; overflow: hidden; background: var(--teal-pale); }
.bs-ex-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.bs-ex:hover .bs-ex-photo img { transform: scale(1.04); }
.bs-ex h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.4rem; line-height: 1.2; color: var(--navy); padding: 1.3rem 1.5rem 0; margin-bottom: 0.5rem; }
.bs-ex > p { padding: 0 1.5rem; color: var(--mid); font-size: 0.94rem; line-height: 1.6; margin-bottom: 1rem; }
.bs-ex-out { align-self: end; margin: 0 1.5rem 1.5rem; padding: 0.7rem 0.9rem; border-left: 3px solid var(--teal); background: var(--teal-pale); border-radius: 0 8px 8px 0; color: var(--navy) !important; font-size: 0.9rem !important; line-height: 1.5; }
.bs-ex-out span { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 0.15rem; }
@media (prefers-reduced-motion: reduce) { .bs-ex-photo img { transition: none; } }
@media (max-width: 1000px) { .bs-ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .bs-ex-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .bs-ex { display: block; margin-bottom: 0; }
  .bs-ex h3 { font-size: 1.3rem; padding: 1.1rem 1.25rem 0; }
  .bs-ex > p { padding: 0 1.25rem; }
  .bs-ex-out { margin: 0 1.25rem 1.25rem; }
}
@supports not (grid-template-rows: subgrid) { .bs-ex { display: block; } }

/* Architecture: photo under the architecture copy */
.sa-photo { margin: 2rem 0 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.16); aspect-ratio: 16 / 10; }
.sa-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; display: block; }
@media (max-width: 1100px) { .sa-photo { aspect-ratio: 16 / 8; } }

/* Services: photo above the six steps */
.svc-photo { margin: 2.25rem 0 0; border-radius: 16px; overflow: hidden; aspect-ratio: 21 / 8; border: 1px solid var(--border); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .svc-photo { aspect-ratio: 16 / 9; margin-top: 1.5rem; } }

/* Outcome box: comfortable inner padding on all sides, full rounded shape */
.bs-ex .bs-ex-out { margin: 0 1.5rem 1.5rem; padding: 1.05rem 1.25rem 1.1rem; border: 1px solid rgba(7,131,150,0.22); border-left: 3px solid var(--teal); border-radius: 10px; background: var(--teal-pale); line-height: 1.55; }
.bs-ex .bs-ex-out span { margin-bottom: 0.35rem; }
@media (max-width: 640px) { .bs-ex .bs-ex-out { margin: 0 1.25rem 1.25rem; padding: 0.95rem 1.1rem 1rem; } }

/* Document tiles: clean cards (the folded-corner square was removed) */
.sa-doc { border-radius: 14px; }
.sa-doc::after { content: none; display: none; }
.sa-doc-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--teal-pale); margin-bottom: 1rem; }
.sa-doc-icon svg { margin-bottom: 0; width: 24px; height: 24px; overflow: visible; }

/* Three stages on tablet and phone: a vertical timeline (numbers in a left rail, one continuous line between them) */
@media (max-width: 900px) {
  .sa-stage-grid { gap: 0; }
  .sa-stage { display: block; position: relative; padding: 0 0 2.5rem 4rem; }
  .sa-stage:last-child { padding-bottom: 0; }
  .sa-stage-head { position: static; margin: 0; }
  .sa-stage .sa-n { position: absolute; left: 0; top: 0; width: 40px; height: 40px; }
  .sa-stage:not(:last-child) .sa-stage-head::after { content: none; display: none; }
  .sa-stage:not(:last-child)::after { content: ''; position: absolute; left: 19px; top: 48px; bottom: 8px; width: 2px; background: var(--slate); }
  .sa-stage h3 { padding-top: 0.15rem; }
}
@media (max-width: 640px) {
  .sa-stage { padding-left: 3.4rem; padding-bottom: 2.25rem; }
  .sa-stage .sa-n { width: 36px; height: 36px; font-size: 0.9rem; }
  .sa-stage:not(:last-child)::after { left: 17px; top: 44px; }
}

/* ══════════════════════════════════════════════════════════════
   Workflow Automation (body.workflow-page)
   Compact photo hero, end-to-end approval flow with a Teams-style card, what gets automated,
   older-systems band, AI list, case study links, FAQ, single-message closing.
   ══════════════════════════════════════════════════════════════ */
body.workflow-page h1, body.workflow-page h2, body.workflow-page h3,
body.workflow-page h2.display, body.workflow-page h2.display em { font-weight: 400; }
body.workflow-page .lead, body.workflow-page .faq-item p, body.workflow-page .wf-use p, body.workflow-page .wf-step p,
body.workflow-page .wf-case p, body.workflow-page .wf-ai-list span, body.workflow-page .ai-cta-copy p { line-height: 1.6; }
body.workflow-page .wf-hero-photo img { object-position: 30% 50%; }
body.workflow-page .wf-hero-photo::before { background: rgba(5,25,38,0.32); }

/* Flow */
body.workflow-page .wf-flow { background: radial-gradient(55% 45% at 100% 0%, rgba(83,177,205,0.26), transparent 72%), radial-gradient(40% 40% at 0% 100%, rgba(232,201,122,0.20), transparent 72%), var(--white); }
.wf-flow-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 3rem 4rem; align-items: center; }
.wf-flow-copy .lead { margin-bottom: 1rem; max-width: 48ch; }
.wf-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 44px rgba(5,25,38,0.10); overflow: hidden; }
.wf-card-bar { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1.1rem; background: var(--navy); color: #fff; font-size: 0.82rem; font-weight: 600; }
.wf-card-state { font-size: 0.74rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--gold-light); color: var(--navy-deep); }
.wf-card-body { padding: 1.25rem 1.3rem 1.3rem; display: grid; gap: 0.35rem; }
.wf-card-body strong { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.3rem; color: var(--navy); }
.wf-card-body > span { color: var(--mid); font-size: 0.88rem; }
.wf-card-rows { display: grid; gap: 0.4rem; margin: 0.6rem 0; }
.wf-card-rows i { display: block; height: 10px; border-radius: 5px; background: var(--teal-pale); font-style: normal; }
.wf-card-rows i.short { width: 62%; }
.wf-card-actions { display: flex; gap: 0.6rem; }
.wf-card-actions span { padding: 0.5rem 1.1rem; border-radius: 8px; border: 1.5px solid var(--border); color: var(--navy); font-weight: 600; font-size: 0.86rem; }
.wf-card-actions span.ok { background: var(--teal); border-color: var(--teal); color: #fff; }
.wf-card-foot { padding: 0.75rem 1.3rem; background: var(--teal-pale); color: var(--navy); font-size: 0.8rem; border-top: 1px solid rgba(7,131,150,0.18); }
.wf-steps { grid-column: 1 / -1; list-style: none; counter-reset: wf; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.wf-step { counter-increment: wf; position: relative; padding-top: 3.25rem; }
.wf-step-n { position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 0.95rem; font-weight: 600; z-index: 1; }
.wf-step-n::before { content: counter(wf); }
.wf-step:not(:last-child)::after { content: ''; position: absolute; top: 18px; left: 38px; right: -1.5rem; height: 2px; background: var(--slate); }
.wf-step h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.25rem; color: var(--navy); margin-bottom: 0.4rem; }
.wf-step p { color: var(--mid); font-size: 0.88rem; }

/* Uses */
body.workflow-page .wf-uses { background: var(--teal-pale); border-top: 1px solid rgba(7,131,150,0.14); border-bottom: 1px solid rgba(7,131,150,0.14); }
.wf-photo { margin: 2.25rem 0 0; border-radius: 16px; overflow: hidden; aspect-ratio: 21 / 8; border: 1px solid rgba(7,131,150,0.2); }
.wf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wf-use-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.wf-use { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 1.4rem; border-radius: 14px; background: var(--white); border: 1px solid rgba(7,131,150,0.2); border-top: 3px solid var(--teal); }
.wf-use:nth-child(even) { border-top-color: var(--teal-light); }
.wf-use-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--teal-pale); margin-bottom: 1rem; }
.wf-use-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.wf-use h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.25rem; color: var(--navy); margin-bottom: 0.45rem; }
.wf-use p { color: var(--mid); font-size: 0.9rem; }

/* Older systems */
body.workflow-page .wf-legacy { background: radial-gradient(60% 80% at 88% 0%, rgba(7,131,150,0.30), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(201,168,76,0.10), transparent 70%), var(--navy-deep); border-top: 2px solid rgba(201,168,76,0.55); }
.wf-legacy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 4rem; align-items: center; }
.wf-legacy .lead { max-width: 48ch; margin-bottom: 1rem; }
.wf-chain { display: grid; justify-items: stretch; }
.wf-chain-item { padding: 1.1rem 1.3rem; border-radius: 12px; background: var(--navy); border: 1px solid rgba(255,255,255,0.16); color: #fff; }
.wf-chain-item strong { display: block; font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.3rem; margin-bottom: 0.15rem; }
.wf-chain-item span { color: rgba(255,255,255,0.86); font-size: 0.9rem; line-height: 1.5; }
.wf-chain-item.is-legacy { border: 1px dashed rgba(232,201,122,0.65); }
.wf-chain-link { height: 28px; width: 2px; background: var(--teal-light); justify-self: center; position: relative; }
.wf-chain-link::after { content: ''; position: absolute; bottom: -1px; left: 50%; width: 9px; height: 9px; border-right: 2px solid var(--teal-light); border-bottom: 2px solid var(--teal-light); transform: translateX(-50%) rotate(45deg); }

/* AI */
body.workflow-page .wf-ai { background: radial-gradient(50% 55% at 0% 0%, rgba(232,201,122,0.24), transparent 72%), radial-gradient(45% 50% at 100% 100%, rgba(83,177,205,0.18), transparent 72%), var(--white); }
.wf-ai-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; }
.wf-ai .lead { margin-bottom: 1.5rem; }
.wf-ai-list { list-style: none; border-top: 1px solid var(--border); }
.wf-ai-list li { display: grid; gap: 0.2rem; padding: 1.1rem 0 1.1rem 1.75rem; border-bottom: 1px solid var(--border); position: relative; }
.wf-ai-list li::before { content: ''; position: absolute; left: 0; top: 1.5rem; width: 12px; height: 7px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.wf-ai-list strong { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.25rem; color: var(--navy); }
.wf-ai-list span { color: var(--mid); font-size: 0.93rem; }

/* Cases */
body.workflow-page .wf-cases { background: var(--off-white); }
.wf-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.25rem; }
.wf-case { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 1.5rem; border-radius: 14px; background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--gold); text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; }
.wf-case:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(7,131,150,0.12); }
.wf-case:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; }
.wf-case h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.35rem; line-height: 1.25; color: var(--navy); margin-bottom: 0.5rem; }
.wf-case p { color: var(--mid); font-size: 0.93rem; margin-bottom: 1rem; }
.wf-case span { color: var(--teal-dark); font-weight: 600; font-size: 0.9rem; align-self: end; }
body.workflow-page .faq-section { background: radial-gradient(55% 60% at 100% 100%, rgba(83,177,205,0.22), transparent 72%), radial-gradient(40% 50% at 0% 0%, rgba(232,201,122,0.18), transparent 72%), var(--teal-pale); }
body.workflow-page .faq-item { background: var(--white); }
body.workflow-page .cta-section.ai-cta { background: radial-gradient(60% 70% at 50% 0%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }

@media (max-width: 1100px) {
  .wf-flow-grid, .wf-legacy-grid, .wf-ai-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .wf-steps { grid-template-columns: 1fr; gap: 0; margin-top: 0.5rem; }
  .wf-step { padding: 0 0 2rem 3.4rem; }
  .wf-step:last-child { padding-bottom: 0; }
  .wf-step-n { width: 36px; height: 36px; }
  .wf-step:not(:last-child)::after { left: 17px; top: 44px; bottom: 6px; right: auto; width: 2px; height: auto; }
  .wf-use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-use { grid-row: auto; display: block; }
  .wf-case-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .wf-case { grid-row: auto; display: block; }
  .wf-case span { display: inline-block; }
}
@media (max-width: 640px) {
  body.workflow-page { --gutter-m: 1.375rem; }
  body.workflow-page nav, body.workflow-page .svc-hero, body.workflow-page .section,
  body.workflow-page .cta-section.ai-cta, body.workflow-page footer { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.workflow-page .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.workflow-page h2.display { font-size: 1.75rem; line-height: 1.18; margin-bottom: 0.9rem; }
  body.workflow-page .lead { font-size: 0.97rem; }
  body.workflow-page .svc-hero { padding-top: 2.25rem; padding-bottom: 3rem; }
  body.workflow-page .svc-hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.3rem); }
  body.workflow-page .svc-hero-copy > p { font-size: 0.97rem; }
  .wf-use-grid { grid-template-columns: 1fr; }
  .wf-photo { aspect-ratio: 16 / 9; margin-top: 1.5rem; }
  .wf-step h3, .wf-use h3, .wf-case h3 { font-size: 1.2rem; }
  .wf-ai-list strong { font-size: 1.15rem; }
  .wf-chain-item strong { font-size: 1.2rem; }
  body.workflow-page .cta-section.ai-cta .ai-cta-inner { padding: 2rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .wf-case { transition: none; } }

/* ══════════════════════════════════════════════════════════════
   Managed Services (body.managed-page)
   Compact photo hero, support cycle with a loop-back marker, what support includes, "built by
   someone else" band, product tiles, engagement options with photo, FAQ, single-message closing.
   ══════════════════════════════════════════════════════════════ */
body.managed-page h1, body.managed-page h2, body.managed-page h3,
body.managed-page h2.display, body.managed-page h2.display em { font-weight: 400; }
body.managed-page .lead, body.managed-page .faq-item p, body.managed-page .ms-step p, body.managed-page .ms-prod p,
body.managed-page .ms-engage-list span, body.managed-page .ms-take-on span, body.managed-page .ai-cta-copy p { line-height: 1.6; }

/* Cycle */
body.managed-page .ms-cycle { background: radial-gradient(55% 45% at 100% 0%, rgba(83,177,205,0.26), transparent 72%), radial-gradient(40% 40% at 0% 100%, rgba(232,201,122,0.20), transparent 72%), var(--white); }
.ms-steps { list-style: none; counter-reset: ms; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.ms-step { counter-increment: ms; position: relative; padding-top: 3.25rem; }
.ms-step-n { position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 0.95rem; font-weight: 600; z-index: 1; }
.ms-step-n::before { content: counter(ms); }
.ms-step:nth-child(n+3) .ms-step-n { background: var(--teal); }
.ms-step:not(:last-child)::after { content: ''; position: absolute; top: 18px; left: 38px; right: -1.5rem; height: 2px; background: var(--slate); }
.ms-step h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.3rem; color: var(--navy); margin-bottom: 0.4rem; }
.ms-step p { color: var(--mid); font-size: 0.88rem; }
.ms-loop { margin: 1.75rem 0 0 calc((100% - 7.5rem) / 6 * 2 + 3rem); border: 2px dashed var(--teal-light); border-top: 0; border-radius: 0 0 16px 16px; padding: 0.9rem 1.25rem 0.9rem; position: relative; text-align: center; }
.ms-loop::before { content: ''; position: absolute; top: -1px; left: 0; width: 9px; height: 9px; border-left: 2px solid var(--teal-light); border-top: 2px solid var(--teal-light); transform: translate(-6px,-5px) rotate(45deg); }
.ms-loop span { color: var(--navy); font-size: 0.9rem; font-weight: 600; }

/* Included */
body.managed-page .ms-included { background: var(--teal-pale); border-top: 1px solid rgba(7,131,150,0.14); border-bottom: 1px solid rgba(7,131,150,0.14); }
.ms-inc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.ms-inc { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 1.5rem; border-radius: 14px; background: var(--white); border: 1px solid rgba(7,131,150,0.2); border-top: 3px solid var(--teal); }
.ms-inc:nth-child(even) { border-top-color: var(--teal-light); }
.ms-inc-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--teal-pale); margin-bottom: 1rem; }
.ms-inc-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ms-inc h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.35rem; color: var(--navy); margin-bottom: 0.8rem; }
.ms-inc ul { list-style: none; display: grid; gap: 0; align-content: start; border-top: 1px solid var(--border); }
.ms-inc li { position: relative; padding: 0.6rem 0 0.6rem 1.4rem; border-bottom: 1px solid var(--border); font-size: 0.92rem; color: var(--near-black); }
.ms-inc li::before { content: ''; position: absolute; left: 0; top: 0.95rem; width: 11px; height: 6px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }

/* Elsewhere */
body.managed-page .ms-elsewhere { background: radial-gradient(60% 80% at 88% 0%, rgba(7,131,150,0.30), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(201,168,76,0.10), transparent 70%), var(--navy-deep); border-top: 2px solid rgba(201,168,76,0.55); }
.ms-elsewhere-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 4rem; align-items: center; }
.ms-elsewhere .lead { max-width: 48ch; margin-bottom: 1.75rem; }
.ms-take-on { list-style: none; counter-reset: to; display: grid; gap: 1.5rem; border-left: 1px solid rgba(255,255,255,0.22); padding-left: 2rem; }
.ms-take-on li { counter-increment: to; position: relative; display: grid; gap: 0.3rem; }
.ms-take-on li::before { content: counter(to); position: absolute; left: calc(-2rem - 15px); top: 0; width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-deep); border: 1.5px solid var(--teal-light); color: var(--teal-light); font-size: 0.82rem; font-weight: 600; }
.ms-take-on strong { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.4rem; color: #fff; }
.ms-take-on span { color: rgba(255,255,255,0.86); font-size: 0.95rem; max-width: 44ch; }

/* Products */
body.managed-page .ms-support { background: radial-gradient(50% 55% at 0% 0%, rgba(232,201,122,0.22), transparent 72%), radial-gradient(45% 50% at 100% 100%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }
.ms-prod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.ms-prod { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 1.4rem; border-radius: 14px; background: var(--white); border: 1px solid var(--border); }
.ms-prod img { width: 44px; height: 44px; object-fit: contain; margin-bottom: 0.9rem; }
.ms-prod-plug { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--teal-pale); margin-bottom: 0.9rem; }
.ms-prod-plug svg { width: 24px; height: 24px; fill: none; stroke: var(--teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ms-prod h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.25rem; color: var(--navy); margin-bottom: 0.35rem; }
.ms-prod p { color: var(--mid); font-size: 0.9rem; }

/* Engagement */
body.managed-page .ms-engage { background: var(--white); }
.ms-engage-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; }
.ms-engage-photo { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--border); }
.ms-engage-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-engage .lead { margin-bottom: 1.5rem; }
.ms-engage-list { list-style: none; border-top: 1px solid var(--border); }
.ms-engage-list li { display: grid; gap: 0.15rem; padding: 0.95rem 0 0.95rem 1.75rem; border-bottom: 1px solid var(--border); position: relative; }
.ms-engage-list li::before { content: ''; position: absolute; left: 0; top: 1.3rem; width: 12px; height: 7px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.ms-engage-list strong { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.2rem; color: var(--navy); }
.ms-engage-list span { color: var(--mid); font-size: 0.92rem; }
body.managed-page .faq-section { background: radial-gradient(55% 60% at 100% 100%, rgba(83,177,205,0.22), transparent 72%), radial-gradient(40% 50% at 0% 0%, rgba(232,201,122,0.18), transparent 72%), var(--teal-pale); }
body.managed-page .faq-item { background: var(--white); }
body.managed-page .cta-section.ai-cta { background: radial-gradient(60% 70% at 50% 0%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }

@media (max-width: 1100px) {
  .ms-steps { grid-template-columns: 1fr; gap: 0; margin-top: 2rem; }
  .ms-step { padding: 0 0 2rem 3.4rem; }
  .ms-step:last-child { padding-bottom: 0; }
  .ms-step-n { width: 36px; height: 36px; }
  .ms-step:not(:last-child)::after { left: 17px; top: 44px; bottom: 6px; right: auto; width: 2px; height: auto; }
  .ms-loop { margin: 1.5rem 0 0; border: 2px dashed var(--teal-light); border-radius: 12px; }
  .ms-loop::before { display: none; }
  .ms-inc-grid, .ms-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-inc, .ms-prod { grid-row: auto; display: block; }
  .ms-elsewhere-grid, .ms-engage-grid { grid-template-columns: 1fr; gap: 2.25rem; }
}
@media (max-width: 640px) {
  body.managed-page { --gutter-m: 1.375rem; }
  body.managed-page nav, body.managed-page .svc-hero, body.managed-page .section,
  body.managed-page .cta-section.ai-cta, body.managed-page footer { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.managed-page .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.managed-page h2.display { font-size: 1.75rem; line-height: 1.18; margin-bottom: 0.9rem; }
  body.managed-page .lead { font-size: 0.97rem; }
  body.managed-page .svc-hero { padding-top: 2.25rem; padding-bottom: 3rem; }
  body.managed-page .svc-hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.3rem); }
  body.managed-page .svc-hero-copy > p { font-size: 0.97rem; }
  .ms-inc-grid, .ms-prod-grid { grid-template-columns: 1fr; }
  .ms-step h3, .ms-inc h3, .ms-prod h3 { font-size: 1.2rem; }
  .ms-take-on strong { font-size: 1.25rem; }
  .ms-engage-list strong { font-size: 1.12rem; }
  body.managed-page .cta-section.ai-cta .ai-cta-inner { padding: 2rem 1.5rem; }
}

/* Managed Services "take on" list: centre each marker on the rule and on the first title line */
.ms-take-on { padding: 0 0 0 2rem; border-left: 0; gap: 1.75rem; }
.ms-take-on li { --mk: 15px; --cy: 0.95rem; }
.ms-take-on li::before { left: -32px; top: calc(var(--cy) - var(--mk)); translate: -50% 0; box-sizing: border-box; width: calc(var(--mk) * 2); height: calc(var(--mk) * 2); }
.ms-take-on li:not(:last-child)::after { content: ''; position: absolute; left: -33px; width: 2px; background: rgba(255,255,255,0.22); top: calc(var(--cy) + var(--mk)); bottom: calc(-1.75rem - var(--cy) + var(--mk)); }
.ms-take-on strong { line-height: 1.35; }

/* Managed Services loop: leaves from the centre of "Grow" and returns to the centre of "Review".
   Geometry follows the six-column step grid (column c = (100% - 7.5rem) / 6, gap 1.5rem). */
@media (min-width: 1101px) {
  .ms-loop {
    --c: calc((100% - 7.5rem) / 6);
    margin: 0.35rem 0 0 calc(var(--c) * 2.5 + 3rem);
    width: calc(var(--c) * 3 + 4.5rem);
    padding: 1.1rem 1.25rem 0.9rem; border: 2px solid var(--teal-light); border-top: 0; border-radius: 0 0 16px 16px; border-style: dashed; border-top-style: none;
  }
  .ms-loop::before { content: ''; position: absolute; left: -2px; top: -2px; width: 0; height: 0; border: 0; transform: none; }
  /* up-arrow head where the loop re-enters Review */
  .ms-loop::after { content: ''; position: absolute; left: -7px; top: -6px; width: 10px; height: 10px; border-left: 2px solid var(--teal-light); border-top: 2px solid var(--teal-light); transform: rotate(45deg); background: transparent; }
  /* dot where the loop leaves Grow */
  .ms-loop span::before { content: ''; position: absolute; right: -6px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--teal-light); }
  .ms-loop span { position: static; }
}

/* ══════════════════════════════════════════════════════════════
   Product icons in content: used only where a Microsoft product is named in the copy.
   ══════════════════════════════════════════════════════════════ */
body.home .strip-item.pill-product { gap: 0.55rem; }
body.home .strip-item.pill-product img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.wf-card-app { display: inline-flex; align-items: center; gap: 0.5rem; }
.wf-card-app img { width: 20px; height: 20px; object-fit: contain; background: #fff; border-radius: 5px; padding: 2px; box-sizing: content-box; }
.wf-chain-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; align-items: center; }
.wf-chain-item img, .wf-chain-mon { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 10px; background: #fff; padding: 7px; box-sizing: border-box; object-fit: contain; }
.wf-chain-mon { display: grid; place-items: center; background: rgba(232,201,122,0.14); border: 1px dashed rgba(232,201,122,0.65); padding: 0; }
.wf-chain-mon svg { width: 22px; height: 22px; fill: none; stroke: var(--gold-light); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wf-chain-item strong { grid-column: 2; margin-bottom: 0; }
.wf-chain-item span:not(.wf-chain-mon) { grid-column: 2; }
.bs-built-on { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem; margin: 1.5rem 0 0; padding: 0; }
.bs-built-on li { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.9rem 0.45rem 0.55rem; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-size: 0.86rem; font-weight: 600; }
.bs-built-on img { width: 26px; height: 26px; padding: 3px; border-radius: 50%; background: #fff; object-fit: contain; box-sizing: border-box; }
@media (max-width: 640px) { .bs-built-on { gap: 0.5rem; } .bs-built-on li { font-size: 0.8rem; padding-right: 0.75rem; } .wf-chain-item { grid-template-columns: 40px minmax(0, 1fr); column-gap: 0.85rem; } .wf-chain-item img, .wf-chain-mon { width: 40px; height: 40px; } }
@media (max-width: 640px) {
  body.home .build-pills { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
  body.home .build-pills .strip-item { width: auto; flex: 0 0 auto; }
}

/* Product badges: rounded squares with real padding, so icon corners are never clipped */
.bs-built-on li { padding: 0.4rem 1rem 0.4rem 0.4rem; gap: 0.6rem; }
.bs-built-on img { width: 32px; height: 32px; padding: 5px; border-radius: 9px; background: #fff; object-fit: contain; box-sizing: border-box; }
.wf-chain-item img { padding: 8px; border-radius: 11px; }
.wf-card-app img { padding: 3px; border-radius: 6px; width: 22px; height: 22px; box-sizing: border-box; }
@media (max-width: 640px) { .bs-built-on img { width: 30px; height: 30px; padding: 4px; } }
.bs-built-on img { background: transparent; padding: 0; border-radius: 0; width: 26px; height: 26px; }
.bs-built-on li { padding: 0.45rem 1rem 0.45rem 0.7rem; }
@media (max-width: 640px) { .bs-built-on img { width: 24px; height: 24px; padding: 0; } }

/* ══════════════════════════════════════════════════════════════
   Contact (body.contact-page)
   The Netlify form, success panel, booking iframe and their script are untouched; only the
   surroundings are restyled. Do NOT rename form ids, names or classes used by that script.
   ══════════════════════════════════════════════════════════════ */
body.contact-page h1, body.contact-page h2, body.contact-page h3, body.contact-page h2.display, body.contact-page h2.display em { font-weight: 400; }
body.contact-page .ct-hero-photo img { object-position: 62% 30%; }
body.contact-page .contact-section { background: radial-gradient(55% 45% at 100% 0%, rgba(83,177,205,0.22), transparent 72%), radial-gradient(40% 40% at 0% 100%, rgba(232,201,122,0.18), transparent 72%), var(--white); }
body.contact-page .contact-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); margin-bottom: 0; }
body.contact-page .contact-info p { line-height: 1.6; }
.contact-method-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
body.contact-page .booking-embed h3 { font-weight: 400; }
body.contact-page form.booking-embed { background: var(--off-white); border-color: var(--border); }

/* What happens next: a real sequence, so numbered, with one line through the markers */
.ct-next { margin-top: 0.5rem; }
.ct-next h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.5rem; color: var(--navy); margin-bottom: 1.25rem; }
.ct-next ol { list-style: none; counter-reset: ct; display: grid; gap: 1.5rem; padding: 0 0 0 2.75rem; margin: 0; }
.ct-next li { --mk: 15px; --cy: 0.75rem; counter-increment: ct; position: relative; display: grid; gap: 0.2rem; }
.ct-next li::before { content: counter(ct); position: absolute; left: -2.75rem; top: calc(var(--cy) - var(--mk)); width: calc(var(--mk) * 2); height: calc(var(--mk) * 2); border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 0.82rem; font-weight: 600; box-sizing: border-box; }
.ct-next li:not(:last-child)::after { content: ''; position: absolute; left: calc(-2.75rem + var(--mk) - 1px); width: 2px; background: var(--slate); top: calc(var(--cy) + var(--mk)); bottom: calc(-1.5rem - var(--cy) + var(--mk)); }
.ct-next strong { color: var(--navy); font-size: 0.98rem; font-weight: 600; line-height: 1.5; }
.ct-next span { color: var(--mid); font-size: 0.9rem; line-height: 1.6; }

/* Booking */
body.contact-page .ct-booking { background: radial-gradient(60% 60% at 100% 0%, rgba(83,177,205,0.24), transparent 72%), var(--teal-pale); border-top: 1px solid rgba(7,131,150,0.14); }
body.contact-page .ct-booking .booking-embed { background: var(--white); border-color: rgba(7,131,150,0.2); }

@media (max-width: 900px) { body.contact-page .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 640px) {
  body.contact-page { --gutter-m: 1.375rem; }
  body.contact-page nav, body.contact-page .svc-hero, body.contact-page .section, body.contact-page footer { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.contact-page .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.contact-page h2.display { font-size: 1.75rem; line-height: 1.18; margin-bottom: 0.9rem; }
  body.contact-page .svc-hero { padding-top: 2.25rem; padding-bottom: 3rem; }
  body.contact-page .svc-hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.3rem); }
  body.contact-page .svc-hero-copy > p { font-size: 0.97rem; }
  .ct-next h3 { font-size: 1.3rem; }
  body.contact-page .booking-embed { padding: 1.5rem 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════
   About (body.about-page)
   Compact photo hero, founder portrait as the centrepiece, experience band, working principles,
   speaking photos, Microsoft products, single-message closing.
   ══════════════════════════════════════════════════════════════ */
body.about-page h1, body.about-page h2, body.about-page h3, body.about-page h2.display, body.about-page h2.display em { font-weight: 400; }
body.about-page .lead, body.about-page .ab-prin p, body.about-page .ai-cta-copy p { line-height: 1.6; }
body.about-page .ab-hero-photo img { object-position: 50% 30%; }

/* Founder */
body.about-page .ab-founder { background: radial-gradient(55% 45% at 100% 0%, rgba(83,177,205,0.26), transparent 72%), radial-gradient(40% 40% at 0% 100%, rgba(232,201,122,0.20), transparent 72%), var(--white); }
.ab-founder-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4.5rem; align-items: center; }
.ab-portrait { margin: 0; position: relative; max-width: 440px; }
.ab-portrait::before { content: ''; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 2px solid var(--gold-light); border-radius: 20px; z-index: 0; }
.ab-portrait img { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; display: block; border-radius: 20px; }
.ab-founder-copy .lead { max-width: 54ch; margin-bottom: 1rem; }
.ab-creds { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 1.75rem 0 0; padding: 0; }
.ab-creds li { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 1rem; border-radius: 12px; background: var(--off-white); border: 1px solid var(--border); font-size: 0.9rem; font-weight: 600; color: var(--navy); line-height: 1.35; }
.ab-cred-icon { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; }
.ab-cred-icon img { width: 40px; height: 40px; object-fit: contain; }

/* Experience */
body.about-page .ab-fields { background: radial-gradient(60% 80% at 88% 0%, rgba(7,131,150,0.30), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(201,168,76,0.10), transparent 70%), var(--navy-deep); border-top: 2px solid rgba(201,168,76,0.55); }
.ab-fields-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.ab-fields .lead { max-width: 46ch; }
.ab-field-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255,255,255,0.18); margin: 0; padding: 0; }
.ab-field-list li { display: flex; align-items: center; gap: 0.9rem; padding: 1.25rem 0.25rem; border-bottom: 1px solid rgba(255,255,255,0.18); }
.ab-field-list li:nth-child(odd) { padding-right: 1.25rem; border-right: 1px solid rgba(255,255,255,0.18); }
.ab-field-list li:nth-child(even) { padding-left: 1.5rem; }
.ab-field-icon svg { width: 28px; height: 28px; fill: none; stroke: var(--teal-light); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ab-field-list strong { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.3rem; color: #fff; }

/* Principles */
body.about-page .ab-principles { background: var(--teal-pale); border-bottom: 1px solid rgba(7,131,150,0.14); }
.ab-prin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.ab-prin { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 1.5rem; border-radius: 14px; background: var(--white); border: 1px solid rgba(7,131,150,0.2); border-top: 3px solid var(--teal); }
.ab-prin:nth-child(even) { border-top-color: var(--gold); }
.ab-prin-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--teal-pale); margin-bottom: 1rem; }
.ab-prin-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ab-prin h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.35rem; line-height: 1.25; color: var(--navy); margin-bottom: 0.5rem; }
.ab-prin p { color: var(--mid); font-size: 0.92rem; }

/* Speaking */
body.about-page .ab-speaking { background: radial-gradient(50% 55% at 0% 0%, rgba(232,201,122,0.22), transparent 72%), radial-gradient(45% 50% at 100% 100%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }
.ab-speak-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.ab-speak-grid figure { margin: 0; border-radius: 16px; overflow: hidden; background: var(--white); border: 1px solid var(--border); }
.ab-speak-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.ab-speak-grid figcaption { padding: 0.9rem 1.2rem 1rem; color: var(--mid); font-size: 0.9rem; line-height: 1.5; }
.ab-speak-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; margin-top: 1.5rem; }
.ab-speak-links a { color: var(--teal-dark); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.ab-speak-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ab-speak-links span { color: var(--mid); font-size: 0.9rem; }

/* Expertise */
body.about-page .ab-expertise { background: var(--white); }
.ab-exp-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; }
.ab-built-on { list-style: none; display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 0; padding: 0; }
.ab-built-on li { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem 0.5rem 0.7rem; border-radius: 999px; background: var(--teal-pale); border: 1px solid rgba(7,131,150,0.2); color: var(--navy); font-size: 0.88rem; font-weight: 600; }
.ab-built-on img { width: 26px; height: 26px; object-fit: contain; }
body.about-page .cta-section.ai-cta { background: radial-gradient(60% 70% at 50% 0%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }

@media (max-width: 1000px) {
  .ab-founder-grid, .ab-fields-grid, .ab-exp-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ab-portrait { max-width: 360px; margin-inline: 0 auto; }
  .ab-prin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-prin { grid-row: auto; display: block; }
}
@media (max-width: 640px) {
  body.about-page { --gutter-m: 1.375rem; }
  body.about-page nav, body.about-page .svc-hero, body.about-page .section, body.about-page .cta-section.ai-cta, body.about-page footer { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.about-page .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.about-page h2.display { font-size: 1.75rem; line-height: 1.18; margin-bottom: 0.9rem; }
  body.about-page .lead { font-size: 0.97rem; }
  body.about-page .svc-hero { padding-top: 2.25rem; padding-bottom: 3rem; }
  body.about-page .svc-hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.3rem); }
  body.about-page .svc-hero-copy > p { font-size: 0.97rem; }
  .ab-portrait { max-width: 78%; margin-right: 1.25rem; }
  .ab-portrait::before { inset: 0.9rem -0.9rem -0.9rem 0.9rem; }
  .ab-creds, .ab-prin-grid, .ab-speak-grid { grid-template-columns: 1fr; }
  .ab-field-list { grid-template-columns: 1fr; }
  .ab-field-list li:nth-child(odd), .ab-field-list li:nth-child(even) { padding: 1rem 0.25rem; border-right: 0; }
  .ab-field-list strong, .ab-prin h3 { font-size: 1.2rem; }
  body.about-page .cta-section.ai-cta .ai-cta-inner { padding: 2rem 1.5rem; }
}
.ab-speak-grid img { height: auto; aspect-ratio: 16 / 10; object-position: 22% 62%; }
.ab-speak-grid figure:first-child img { object-position: 18% 66%; }

/* About: re-sequenced (principles, speaking, experience, products, founder last), backgrounds re-alternated */
body.about-page .ab-principles { background: radial-gradient(55% 45% at 100% 0%, rgba(83,177,205,0.22), transparent 72%), var(--teal-pale); }
body.about-page .ab-speaking { background: var(--white); }
body.about-page .ab-expertise { background: radial-gradient(50% 55% at 0% 0%, rgba(232,201,122,0.22), transparent 72%), radial-gradient(45% 50% at 100% 100%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }
body.about-page .ab-founder { background: radial-gradient(55% 45% at 100% 0%, rgba(83,177,205,0.26), transparent 72%), radial-gradient(40% 40% at 0% 100%, rgba(232,201,122,0.20), transparent 72%), var(--white); }
.ab-speak-grid figure { border: 0; background: transparent; }
.ab-speak-grid img { border-radius: 16px; }

/* About: "Giving back to the community" (copy and contributions left, photos right) */
.ab-give-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 4rem; align-items: start; }
.ab-give-copy .lead { max-width: 52ch; margin-bottom: 1.5rem; }
.ab-give-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.ab-give-item { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 1.1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.ab-give-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--teal-pale); }
.ab-give-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ab-give-item h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.3rem; color: var(--navy); margin-bottom: 0.3rem; }
.ab-give-item p { color: var(--mid); font-size: 0.93rem; line-height: 1.6; margin-bottom: 0.5rem; max-width: 52ch; }
.ab-give-item a { color: var(--teal-dark); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.ab-give-item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ab-give-photos { display: grid; gap: 1.25rem; }
.ab-give-photos figure { margin: 0; }
.ab-give-photos img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: 16px; object-position: 22% 62%; }
@media (max-width: 1000px) { .ab-give-grid { grid-template-columns: 1fr; gap: 2.5rem; } .ab-give-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ab-give-photos { grid-template-columns: 1fr; } .ab-give-item h3 { font-size: 1.2rem; } .ab-give-item { grid-template-columns: 40px minmax(0, 1fr); gap: 0.9rem; } .ab-give-icon { width: 40px; height: 40px; } }

/* ══════════════════════════════════════════════════════════════
   Legal pages (body.legal-page): Privacy, Cookie and Terms. Nav, footer and styling only; the
   legal text and the Cookiebot declaration are untouched.
   ══════════════════════════════════════════════════════════════ */
body.legal-page h1, body.legal-page h2, body.legal-page h3, body.legal-page .legal-content h2, body.legal-page .legal-content h3 { font-weight: 400; }
body.legal-page .legal-hero { padding: 3rem 4rem 3.25rem; }
body.legal-page .legal-hero .svc-hero-copy > p { margin-bottom: 0; }
body.legal-page .legal-hero h1 { margin-bottom: 0.9rem; }
body.legal-page .legal-section { background: radial-gradient(50% 40% at 100% 0%, rgba(228,242,245,0.9), transparent 72%), var(--white); }
body.legal-page .legal-content p, body.legal-page .legal-content li { line-height: 1.6; }
body.legal-page .legal-content a { color: var(--teal-dark); }
@media (max-width: 640px) {
  body.legal-page { --gutter-m: 1.375rem; }
  body.legal-page nav, body.legal-page .svc-hero, body.legal-page .section, body.legal-page footer { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.legal-page .section { padding-top: 3rem; padding-bottom: 3.5rem; }
  body.legal-page .legal-hero { padding-top: 2.25rem; padding-bottom: 2.5rem; }
  body.legal-page .svc-hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.3rem); }
  body.legal-page .legal-content h2 { font-size: 1.35rem; }
}

/* ══════════════════════════════════════════════════════════════
   Products (body.products-page)
   Compact photo hero, two live products as full cards, coming-soon products as quieter cards.
   ══════════════════════════════════════════════════════════════ */
body.products-page h1, body.products-page h2, body.products-page h3, body.products-page h2.display, body.products-page h2.display em { font-weight: 400; }
body.products-page .lead, body.products-page .pf-desc, body.products-page .ai-cta-copy p { line-height: 1.6; }
body.products-page .pf-available { background: radial-gradient(55% 45% at 100% 0%, rgba(83,177,205,0.26), transparent 72%), radial-gradient(40% 40% at 0% 100%, rgba(232,201,122,0.20), transparent 72%), var(--white); }
body.products-page .pf-coming { background: var(--teal-pale); border-top: 1px solid rgba(7,131,150,0.14); border-bottom: 1px solid rgba(7,131,150,0.14); }
body.products-page .cta-section.ai-cta { background: radial-gradient(60% 70% at 50% 0%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }

.pf-head { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin-bottom: 1.1rem; }
.pf-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--teal-pale); }
.pf-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pf-head h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.55rem; line-height: 1.2; color: var(--navy); }
.pf-tag { display: block; margin-top: 0.2rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); }
.pf-badge { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.pf-badge-live { background: var(--teal); color: #fff; }
.pf-badge-soon { background: var(--gold-light); color: var(--navy-deep); }

/* Live products */
.pf-live-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin-top: 2.5rem; }
.pf-live { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 2rem; border-radius: 16px; background: var(--off-white); border: 1px solid var(--border); border-top: 3px solid var(--teal); margin-bottom: 1.5rem; }
.pf-live:nth-child(2) { border-top-color: var(--gold); }
.pf-live .pf-head { grid-template-columns: 52px minmax(0, 1fr) auto; }
.pf-desc { color: var(--mid); font-size: 0.95rem; margin-bottom: 1.25rem; max-width: 56ch; }
.pf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1.5rem; }
.pf-stats > div { padding: 0.85rem 1rem; border-radius: 12px; background: var(--white); border: 1px solid var(--border); }
.pf-stats dt { order: 2; font-size: 0.78rem; color: var(--mid); }
.pf-stats dd { margin: 0; font-family: 'DM Serif Display', serif; font-size: 1.7rem; line-height: 1.1; color: var(--navy); }
.pf-stats > div { display: flex; flex-direction: column; }
.pf-stats dd { order: 1; margin-bottom: 0.2rem; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; align-self: end; }
.pf-link { color: var(--teal-dark); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.pf-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Coming soon */
.pf-soon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.pf-soon { display: flex; flex-direction: column; padding: 1.6rem; border-radius: 14px; background: var(--white); border: 1px dashed rgba(7,131,150,0.4); }
.pf-soon .pf-head { grid-template-columns: 46px minmax(0, 1fr); margin-bottom: 0.9rem; }
.pf-soon .pf-icon { width: 46px; height: 46px; border-radius: 12px; }
.pf-soon .pf-icon svg { width: 23px; height: 23px; }
.pf-soon .pf-head h3 { font-size: 1.3rem; }
.pf-soon .pf-desc { font-size: 0.92rem; margin-bottom: 1rem; }
.pf-covers { list-style: none; display: grid; gap: 0.45rem; margin: 0 0 1.25rem; padding: 0.9rem 0 0; border-top: 1px solid var(--border); }
.pf-covers li { position: relative; padding-left: 1.45rem; font-size: 0.9rem; color: var(--near-black); }
.pf-covers li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 11px; height: 6px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.pf-soon .pf-badge { margin-top: auto; align-self: flex-start; }

@media (max-width: 1000px) { .pf-soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pf-live-grid { grid-template-columns: 1fr; gap: 1.25rem; } .pf-live { display: block; margin-bottom: 0; } .pf-live .pf-actions { margin-top: 0; } }
@media (max-width: 640px) {
  body.products-page { --gutter-m: 1.375rem; }
  body.products-page nav, body.products-page .svc-hero, body.products-page .section, body.products-page .cta-section.ai-cta, body.products-page footer { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.products-page .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.products-page h2.display { font-size: 1.75rem; line-height: 1.18; margin-bottom: 0.9rem; }
  body.products-page .lead { font-size: 0.97rem; }
  body.products-page .svc-hero { padding-top: 2.25rem; padding-bottom: 3rem; }
  body.products-page .svc-hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.3rem); }
  body.products-page .svc-hero-copy > p { font-size: 0.97rem; }
  .pf-live { padding: 1.4rem; }
  .pf-live .pf-head { grid-template-columns: 46px minmax(0, 1fr); }
  .pf-live .pf-badge { grid-column: 1 / -1; justify-self: start; }
  .pf-head h3 { font-size: 1.3rem; }
  .pf-stats dd { font-size: 1.45rem; }
  .pf-soon-grid { grid-template-columns: 1fr; }
  body.products-page .cta-section.ai-cta .ai-cta-inner { padding: 2rem 1.5rem; }
}
.pf-also { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.4rem; color: var(--navy); margin: 2.5rem 0 0; }
.pf-soon-grid.pf-soon-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.1rem; }
.pf-soon-grid.pf-soon-grid-2 .pf-soon { background: rgba(255,255,255,0.65); }
@media (max-width: 640px) { .pf-soon-grid.pf-soon-grid-2 { grid-template-columns: 1fr; } .pf-also { font-size: 1.2rem; margin-top: 2rem; } }
@media (min-width: 1001px) { .pf-soon-grid:not(.pf-soon-grid-2) .pf-head { min-height: 4.6rem; align-items: start; } }
.pf-icon.pf-icon-logo img { width: 34px; height: 34px; object-fit: contain; display: block; }
.pf-icon.pf-icon-logo { background: var(--navy-deep); }
.pf-icon.pf-icon-logo img { width: 36px; height: 36px; }

/* ══════════════════════════════════════════════════════════════
   Dove365 CRM — Starter product page (body.crm-page)
   Hero with the live dashboard screenshot, facts strip, features, included/not included,
   screenshots, pricing card, deployment steps, FAQ, closing with documentation links.
   ══════════════════════════════════════════════════════════════ */
body.crm-page h1, body.crm-page h2, body.crm-page h3, body.crm-page h2.display, body.crm-page h2.display em { font-weight: 400; }
body.crm-page .lead, body.crm-page .faq-item p, body.crm-page .crm-feat p, body.crm-page .crm-step p, body.crm-page .ai-cta-copy p, body.crm-page .crm-what-list dd { line-height: 1.6; }

/* Hero */
body.crm-page .crm-hero { padding-bottom: 4.25rem; }
.crm-hero-inner { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 3rem; align-items: center; }
.crm-crumb { margin: 0 0 1rem; font-size: 0.82rem; color: rgba(255,255,255,0.7); }
.crm-crumb a { color: var(--teal-light); text-decoration: none; }
.crm-crumb a:hover { text-decoration: underline; }
.crm-hero h1 { max-width: 20ch; }
.crm-hero-shot { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 28px 60px rgba(0,0,0,0.4); background: #fff; transform: perspective(1400px) rotateY(-4deg); }
.crm-hero-shot img { display: block; width: 100%; height: auto; }

/* Facts */
.crm-facts { background: var(--white); padding: 0 4rem; }
.crm-facts ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1200px; margin: -2rem auto 0; padding: 0; position: relative; z-index: 2; background: var(--white); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 34px rgba(5,25,38,0.08); overflow: hidden; }
.crm-facts li { padding: 1.25rem 1.5rem; border-left: 1px solid var(--border); display: grid; gap: 0.1rem; }
.crm-facts li:first-child { border-left: 0; }
.crm-facts strong { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.7rem; color: var(--navy); line-height: 1.1; }
.crm-facts span { color: var(--mid); font-size: 0.86rem; }

/* What it is */
body.crm-page .crm-what { background: radial-gradient(55% 45% at 100% 0%, rgba(83,177,205,0.22), transparent 72%), var(--white); padding-top: 4.5rem; }
.crm-what-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4rem; align-items: start; }
.crm-what-list { margin: 0; border-top: 1px solid var(--border); }
.crm-what-list > div { padding: 1.1rem 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.25rem; }
.crm-what-list dt { font-family: 'DM Serif Display', serif; font-size: 1.2rem; color: var(--navy); }
.crm-what-list dd { margin: 0; color: var(--mid); font-size: 0.95rem; }

/* Features */
body.crm-page .crm-features { background: var(--teal-pale); border-top: 1px solid rgba(7,131,150,0.14); border-bottom: 1px solid rgba(7,131,150,0.14); }
.crm-feat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.crm-feat { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 1.35rem 1.2rem; border-radius: 14px; background: var(--white); border: 1px solid rgba(7,131,150,0.2); border-top: 3px solid var(--teal); }
.crm-feat:nth-child(even) { border-top-color: var(--teal-light); }
.crm-feat-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--teal-pale); margin-bottom: 0.9rem; }
.crm-feat-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.crm-feat h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.15rem; line-height: 1.25; color: var(--navy); margin-bottom: 0.4rem; }
.crm-feat p { color: var(--mid); font-size: 0.86rem; }

/* Included */
body.crm-page .crm-included { background: radial-gradient(60% 80% at 88% 0%, rgba(7,131,150,0.30), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(201,168,76,0.10), transparent 70%), var(--navy-deep); border-top: 2px solid rgba(201,168,76,0.55); }
.crm-inc-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; }
.crm-included .lead { max-width: 44ch; }
.crm-inc-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255,255,255,0.18); }
.crm-inc-cols > div { padding: 1.25rem 1.25rem 0.5rem; border-left: 1px solid rgba(255,255,255,0.18); }
.crm-inc-cols > div:first-child { border-left: 0; padding-left: 0; }
.crm-inc-cols h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.2rem; color: #fff; margin-bottom: 0.9rem; }
.crm-inc-cols ul { list-style: none; display: grid; gap: 0.6rem; margin: 0; padding: 0; }
.crm-inc-cols li, .crm-price-list li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; line-height: 1.45; color: rgba(255,255,255,0.9); }
.crm-inc-cols li.yes::before, .crm-price-list li.yes::before { content: ''; position: absolute; left: 0; top: 0.4em; width: 11px; height: 6px; border-left: 2px solid var(--gold-light); border-bottom: 2px solid var(--gold-light); transform: rotate(-45deg); }
.crm-inc-cols li.no::before { content: ''; position: absolute; left: 0.1rem; top: 0.72em; width: 10px; height: 2px; background: rgba(255,255,255,0.55); }
.crm-inc-no li { color: rgba(255,255,255,0.78); }

/* Screens */
body.crm-page .crm-dash { background: radial-gradient(50% 55% at 0% 0%, rgba(232,201,122,0.22), transparent 72%), radial-gradient(45% 50% at 100% 100%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }
.crm-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.crm-shots figure { margin: 0; }
.crm-shots img, .crm-hero-shot img { cursor: zoom-in; }
.crm-shots img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 14px 34px rgba(5,25,38,0.10); background: #fff; }
.crm-shots figcaption { margin-top: 0.6rem; font-size: 0.86rem; font-weight: 600; color: var(--navy); }
.crm-inline-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.5rem; }
.crm-inline-links a, .crm-support-note a { color: var(--teal-dark); font-weight: 600; text-decoration: none; }
.crm-inline-links a:hover, .crm-support-note a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Pricing */
body.crm-page .crm-pricing { background: var(--white); }
.crm-price-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; }
.crm-support-note { margin-top: 1.25rem; color: var(--mid); font-size: 0.92rem; line-height: 1.6; max-width: 46ch; }
.crm-price-card { padding: 2rem; border-radius: 16px; background: var(--navy-deep); color: #fff; border-top: 3px solid var(--gold); }
.crm-price-label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 0.75rem; }
.crm-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0 0 0.9rem; }
.crm-price strong { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 3.2rem; line-height: 1; }
.crm-price span { color: rgba(255,255,255,0.8); font-size: 0.9rem; }
.crm-price-desc { color: rgba(255,255,255,0.86); font-size: 0.95rem; line-height: 1.6; margin: 0 0 1.25rem; }
.crm-price-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.25rem; margin: 0 0 1.5rem; padding: 1.1rem 0 0; border-top: 1px solid rgba(255,255,255,0.16); }
.crm-licence { padding: 1rem 1.15rem; border-radius: 10px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,0.9); margin-bottom: 1.5rem; }
.crm-licence strong { color: #fff; }
.crm-price-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.crm-price-actions .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.crm-price-actions .btn-outline:hover { border-color: #fff; color: #fff; }

/* Deployment */
body.crm-page .crm-deploy { background: radial-gradient(50% 50% at 0% 0%, rgba(228,242,245,0.95), transparent 70%), var(--off-white); }
.crm-steps { list-style: none; counter-reset: cs; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.crm-step { counter-increment: cs; position: relative; padding-top: 3.25rem; }
.crm-step-n { position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 0.95rem; font-weight: 600; z-index: 1; }
.crm-step-n::before { content: counter(cs); }
.crm-step:not(:last-child)::after { content: ''; position: absolute; top: 18px; left: 38px; right: -1.5rem; height: 2px; background: var(--slate); }
.crm-step h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.3rem; color: var(--navy); margin-bottom: 0.4rem; }
.crm-step p { color: var(--mid); font-size: 0.88rem; }
body.crm-page .faq-section { background: radial-gradient(55% 60% at 100% 100%, rgba(83,177,205,0.22), transparent 72%), radial-gradient(40% 50% at 0% 0%, rgba(232,201,122,0.18), transparent 72%), var(--teal-pale); }
body.crm-page .faq-item { background: var(--white); }

/* Closing with documentation */
body.crm-page .cta-section.ai-cta .ai-cta-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.crm-docs-panel { position: relative; z-index: 1; border-left: 1px solid rgba(255,255,255,0.2); padding-left: 2rem; }
.crm-docs-panel h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.4rem; color: #fff; margin-bottom: 1rem; }
.crm-docs-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.crm-docs-panel li { border-top: 1px solid rgba(255,255,255,0.14); }
.crm-docs-panel li:first-child { border-top: 0; }
.crm-docs-panel a { display: block; padding: 0.75rem 0; color: var(--teal-light); font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.crm-docs-panel a:hover { color: #fff; }
body.crm-page .cta-section.ai-cta { background: radial-gradient(60% 70% at 50% 0%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }

@media (max-width: 1200px) { .crm-feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .crm-feat:nth-child(n) { grid-row: auto; display: block; } }
@media (max-width: 1000px) {
  .crm-hero-inner, .crm-what-grid, .crm-inc-grid, .crm-price-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .crm-hero-shot { transform: none; }
  .crm-facts { padding: 0 1.5rem; }
  .crm-facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-facts li:nth-child(3) { border-left: 0; }
  .crm-facts li:nth-child(n+3) { border-top: 1px solid var(--border); }
  .crm-shots { grid-template-columns: 1fr; }
  .crm-steps { grid-template-columns: 1fr; gap: 0; margin-top: 2rem; }
  .crm-step { padding: 0 0 2rem 3.4rem; }
  .crm-step:last-child { padding-bottom: 0; }
  .crm-step-n { width: 36px; height: 36px; }
  .crm-step:not(:last-child)::after { left: 17px; top: 44px; bottom: 6px; right: auto; width: 2px; height: auto; }
  body.crm-page .cta-section.ai-cta .ai-cta-inner { grid-template-columns: 1fr; gap: 2rem; }
  .crm-docs-panel { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 1.5rem; }
}
@media (max-width: 760px) { .crm-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-inc-cols { grid-template-columns: 1fr; } .crm-inc-cols > div, .crm-inc-cols > div:first-child { border-left: 0; padding: 1.1rem 0 0.4rem; } .crm-inc-cols > div + div { border-top: 1px solid rgba(255,255,255,0.18); } .crm-what-list > div { grid-template-columns: 1fr; gap: 0.3rem; } }
@media (max-width: 640px) {
  body.crm-page { --gutter-m: 1.375rem; }
  body.crm-page nav, body.crm-page .svc-hero, body.crm-page .section, body.crm-page .cta-section.ai-cta, body.crm-page footer { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.crm-page .crm-facts { padding: 0 var(--gutter-m); }
  body.crm-page .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.crm-page h2.display { font-size: 1.75rem; line-height: 1.18; margin-bottom: 0.9rem; }
  body.crm-page .lead { font-size: 0.97rem; }
  body.crm-page .svc-hero { padding-top: 2.25rem; padding-bottom: 3.25rem; }
  body.crm-page .svc-hero h1 { font-size: clamp(1.9rem, 8vw, 2.25rem); }
  body.crm-page .svc-hero-copy > p { font-size: 0.97rem; }
  .crm-facts strong { font-size: 1.4rem; }
  .crm-facts li { padding: 1rem 1.1rem; }
  .crm-feat-grid { grid-template-columns: 1fr; }
  .crm-price-card { padding: 1.5rem 1.25rem; }
  .crm-price strong { font-size: 2.6rem; }
  .crm-price-list { grid-template-columns: 1fr; }
  .crm-step h3, .crm-feat h3 { font-size: 1.2rem; }
  body.crm-page .cta-section.ai-cta .ai-cta-inner { padding: 2rem 1.5rem; }
}
.crm-facts { background: var(--off-white); padding: 2rem 4rem; border-bottom: 1px solid var(--border); }
.crm-facts ul { margin-top: 0; box-shadow: none; }
.crm-hero h1 { max-width: 26ch; }
body.crm-page .crm-hero { padding-bottom: 3.5rem; }
@media (max-width: 1000px) { .crm-facts { padding: 1.5rem; } }
@media (max-width: 640px) { body.crm-page .crm-facts { padding: 1.25rem var(--gutter-m); } }

/* ══════════════════════════════════════════════════════════════
   CRM page refinements: hero facts row, feature list, screenshot viewer, grouped FAQ
   ══════════════════════════════════════════════════════════════ */
/* Facts live in the hero now (no separate band) */
.crm-facts { display: none; }
.crm-hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem 0; margin: 2rem 0 0; padding: 0; }
.crm-hero-facts li { display: grid; padding: 0 1.75rem; border-left: 1px solid rgba(255,255,255,0.22); }
.crm-hero-facts li:first-child { padding-left: 0; border-left: 0; }
.crm-hero-facts strong { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.55rem; line-height: 1.1; color: #fff; }
.crm-hero-facts span { font-size: 0.82rem; color: rgba(255,255,255,0.72); }
body.crm-page .crm-hero { padding-bottom: 4rem; }

/* Features: two quiet columns of icon rows */
.crm-feat-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3.5rem; margin: 2.5rem 0 0; padding: 0; }
.crm-feat-list .crm-feat { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1.1rem 0; margin: 0; background: transparent; border: 0; border-bottom: 1px solid rgba(7,131,150,0.22); border-radius: 0; grid-row: auto; }
.crm-feat-list .crm-feat:nth-child(-n+2) { border-top: 1px solid rgba(7,131,150,0.22); }
.crm-feat-list .crm-feat-icon { background: var(--white); margin: 0; }
.crm-feat-list h3 { font-size: 1.2rem; margin-bottom: 0.15rem; }
.crm-feat-list p { font-size: 0.92rem; margin: 0; }

/* Screenshot viewer */
.crm-viewer { margin-top: 2.5rem; }
.crm-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.crm-tab { padding: 0.6rem 1.15rem; border-radius: 999px; border: 1.5px solid var(--border); background: var(--white); color: var(--navy); font: 600 0.88rem 'DM Sans', sans-serif; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.crm-tab:hover { border-color: var(--teal-light); }
.crm-tab:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 2px; }
.crm-tab.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.crm-frame { border-radius: 16px; overflow: hidden; background: var(--navy-deep); border: 1px solid rgba(5,25,38,0.25); box-shadow: 0 30px 70px rgba(5,25,38,0.22); }
.crm-frame-bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1rem; background: var(--navy-deep); }
.crm-frame-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.28); }
.crm-frame-bar span { margin-left: 0.75rem; font-size: 0.78rem; color: rgba(255,255,255,0.65); }
.crm-panel { margin: 0; }
.crm-panel[hidden] { display: none; }
.crm-panel img { display: block; width: 100%; height: auto; cursor: zoom-in; background: #fff; }
.crm-panel figcaption { padding: 1rem 1.4rem 1.15rem; background: var(--navy); color: rgba(255,255,255,0.9); font-size: 0.95rem; line-height: 1.55; }
.crm-zoom-hint { margin-top: 0.9rem; font-size: 0.82rem; color: var(--mid); }

/* Grouped FAQ */
.crm-faq { display: grid; gap: 0.7rem; }
.crm-faq .faq-group { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.25rem; color: var(--navy); margin: 1.1rem 0 0.1rem; padding-bottom: 0.45rem; border-bottom: 1px solid rgba(7,131,150,0.25); }
.crm-faq .faq-group:first-child { margin-top: 0; }
.crm-faq .faq-item p { max-width: 64ch; }
.crm-faq .faq-item p a { color: var(--teal-dark); font-weight: 600; text-decoration: none; }
.crm-faq .faq-item p a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) { .crm-feat-list { grid-template-columns: 1fr; } .crm-feat-list .crm-feat:nth-child(2) { border-top: 0; } }
@media (max-width: 640px) {
  .crm-hero-facts { margin-top: 1.5rem; }
  .crm-hero-facts li { padding: 0 1rem; }
  .crm-hero-facts strong { font-size: 1.25rem; }
  .crm-tabs { gap: 0.4rem; }
  .crm-tab { padding: 0.5rem 0.9rem; font-size: 0.82rem; }
  .crm-panel figcaption { padding: 0.85rem 1rem 1rem; font-size: 0.9rem; }
  .crm-frame { border-radius: 12px; }
  .crm-faq .faq-group { font-size: 1.15rem; }
}

/* ══════════════════════════════════════════════════════════════
   Dove365 Support product page (body.support-page, also body.crm-page)
   Reuses the CRM product blocks; adds the walkthrough video band.
   ══════════════════════════════════════════════════════════════ */
body.support-page .sup-tour { background: var(--teal-pale); border-top: 1px solid rgba(7,131,150,0.14); border-bottom: 1px solid rgba(7,131,150,0.14); }
.sup-tour-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3.5rem; align-items: center; }
.sup-tour-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.sup-tour-list li { position: relative; padding-left: 1.6rem; color: var(--navy); font-size: 0.97rem; line-height: 1.5; }
.sup-tour-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gold); }
.sup-tour-alt { display: inline-block; margin-top: 1.5rem; color: var(--teal-dark); font-weight: 600; text-decoration: none; }
.sup-tour-alt:hover { text-decoration: underline; text-underline-offset: 3px; }
.sup-player { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--navy-deep); border: 1px solid rgba(5,25,38,0.14); box-shadow: 0 24px 50px rgba(5,25,38,0.22); }
.sup-player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0.55; }
.sup-player::after { content: ""; position: absolute; inset: 0; background: rgba(5,25,38,0.45); pointer-events: none; }
.sup-player iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; }
.sup-play { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.4rem 0.85rem 1.1rem; border: 0; border-radius: 999px; background: var(--white); color: var(--navy-deep); font: 600 0.95rem 'DM Sans', sans-serif; cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,0.35); }
.sup-play svg { width: 1.5rem; height: 1.5rem; fill: var(--teal); stroke: var(--teal); stroke-width: 1.75; stroke-linejoin: round; }
.sup-play:hover { background: var(--teal-pale); }
.sup-play:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; }
.sup-player.is-playing::after { display: none; }
@media (max-width: 900px) { .sup-tour-grid { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 640px) { .sup-play span { font-size: 0.88rem; } .sup-play { padding: 0.7rem 1.1rem 0.7rem 0.9rem; } }

/* Hero facts on phones: three even columns instead of a wrapping row */
@media (max-width: 640px) {
  .crm-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 1.5rem; }
  .crm-hero-facts li { padding: 0 0.75rem; align-content: start; }
  .crm-hero-facts li:first-child { padding-left: 0; }
  .crm-hero-facts strong { font-size: 1.15rem; }
  .crm-hero-facts span { font-size: 0.76rem; line-height: 1.35; }
}

/* ══════════════════════════════════════════════════════════════
   Documentation hub (body.docs-hub-page, also body.products-page)
   Reuses the products blocks; adds the "what you will find inside" tiles.
   ══════════════════════════════════════════════════════════════ */
body.docs-hub-page .dc-inside { background: var(--white); }
.dc-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 2.5rem 0 0; padding: 0; }
.dc-tile { padding: 1.6rem; border-radius: 14px; background: var(--off-white); border: 1px solid var(--border); border-top: 3px solid var(--teal); }
.dc-tile:nth-child(2) { border-top-color: var(--gold); }
.dc-tile:nth-child(3) { border-top-color: var(--teal-light); }
.dc-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--teal-pale); margin-bottom: 0.9rem; }
.dc-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--teal); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.dc-tile h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.35rem; line-height: 1.2; color: var(--navy); margin-bottom: 0.45rem; }
.dc-tile p { font-size: 0.93rem; line-height: 1.6; color: var(--mid); max-width: 38ch; }
@media (max-width: 900px) { .dc-grid { grid-template-columns: 1fr; } .dc-tile p { max-width: none; } }

/* ══════════════════════════════════════════════════════════════
   AI Toolkit (body.toolkit-page)
   The request form, success panel and submit script are untouched, and so is the spider chart
   (markup and the .toolkit-spider-card / .spider-* styles are shared with the docs site).
   Only the surroundings are restyled.
   ══════════════════════════════════════════════════════════════ */
body.toolkit-page h1, body.toolkit-page h2, body.toolkit-page h3, body.toolkit-page h2.display, body.toolkit-page h2.display em { font-weight: 400; }
body.toolkit-page .lead, body.toolkit-page .ai-cta-copy p, body.toolkit-page .contact-info p, body.toolkit-page .tk-why-item p { line-height: 1.6; }

/* Hero: three guide covers fanned on the right */
body.toolkit-page .tk-hero { padding-bottom: 4rem; }
.tk-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; align-items: center; }
.tk-hero h1 { max-width: 18ch; }
.tk-covers { display: flex; justify-content: center; align-items: center; padding: 1rem 0; }
.tk-cover { flex: 0 0 auto; width: clamp(130px, 16vw, 210px); margin: 0 -1.6rem; transform-origin: bottom center; transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tk-cover img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 28px rgba(0,0,0,0.5)); }
.tk-cover-a { transform: rotate(-6deg) translateY(16px); z-index: 1; }
.tk-cover-b { transform: translateY(-8px); z-index: 2; }
.tk-cover-c { transform: rotate(6deg) translateY(16px); z-index: 1; }
/* Spread on hover or keyboard focus, as on the original hero */
.tk-covers:hover .tk-cover-a, .tk-covers:focus-within .tk-cover-a { transform: translateX(-30px) translateY(18px) rotate(-10deg); }
.tk-covers:hover .tk-cover-b, .tk-covers:focus-within .tk-cover-b { transform: translateY(-14px) rotate(0deg) scale(1.04); }
.tk-covers:hover .tk-cover-c, .tk-covers:focus-within .tk-cover-c { transform: translateX(26px) translateY(18px) rotate(10deg); }
@media (prefers-reduced-motion: reduce) { .tk-cover { transition: none; } }

/* Guides: cover tile, kind, title, text on shared rows */
body.toolkit-page .tk-included { background: radial-gradient(55% 45% at 100% 0%, rgba(83,177,205,0.24), transparent 72%), radial-gradient(40% 40% at 0% 100%, rgba(232,201,122,0.18), transparent 72%), var(--white); }
.tk-rows { display: grid; gap: 3rem; margin-top: 3rem; }
.tk-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3.5rem; align-items: center; }
.tk-row:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.tk-row:nth-child(even) .tk-row-art { order: 2; }
.tk-row-art { position: relative; display: grid; place-items: center; min-height: 340px; padding: 2rem; border-radius: 18px; background: var(--teal-pale); border: 1px solid rgba(7,131,150,0.18); overflow: hidden; }
.tk-row:nth-child(2) .tk-row-art { background: var(--off-white); border-color: var(--border); }
.tk-row-ring { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: rgba(83,177,205,0.2); right: -90px; bottom: -150px; }
.tk-row:nth-child(even) .tk-row-ring { background: rgba(201,168,76,0.2); right: auto; left: -90px; }
.tk-row-art img { position: relative; z-index: 1; display: block; width: min(210px, 58%); height: auto; filter: drop-shadow(0 22px 26px rgba(5,25,38,0.38)); transform: rotate(-3deg); transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tk-row:nth-child(even) .tk-row-art img { transform: rotate(3deg); }
.tk-row:hover .tk-row-art img { transform: rotate(0deg) translateY(-6px); }
.tk-guide-kind { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); }
.tk-row h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 2rem; line-height: 1.15; color: var(--navy); margin: 0.4rem 0 0.8rem; }
.tk-row p { font-size: 1rem; line-height: 1.6; color: var(--mid); max-width: 52ch; }
.tk-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; }
.tk-chips li { padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--white); border: 1px solid rgba(7,131,150,0.3); font-size: 0.82rem; font-weight: 500; color: var(--navy); }
.tk-row-link { display: inline-block; margin-top: 1.25rem; color: var(--teal-dark); font-weight: 600; text-decoration: none; }
.tk-row-link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .tk-row-art img { transition: none; } }

/* Assessment band (chart card unchanged) */
body.toolkit-page .tk-assess { background: var(--off-white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tk-areas { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.25rem; margin: 1.5rem 0 0; padding: 0; }
.tk-areas li { position: relative; padding-left: 1.5rem; font-size: 0.92rem; line-height: 1.4; color: var(--near-black); }
.tk-areas li::before { content: ''; position: absolute; left: 0; top: 0.4em; width: 11px; height: 6px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
body.toolkit-page .toolkit-assessment-grid .ai-ready-actions { margin-top: 2rem; }

/* Why Dove365 */
body.toolkit-page .tk-why { background: var(--teal-pale); border-bottom: 1px solid rgba(7,131,150,0.14); }
.tk-why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.tk-why-grid .lead + .lead { margin-top: 1rem; }
.tk-why-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; }
.tk-why-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0.85rem; align-items: start; padding: 1.2rem; border-radius: 14px; background: var(--white); border: 1px solid rgba(7,131,150,0.2); }
.tk-why-icon img { display: block; width: 36px; height: 36px; object-fit: contain; }
.tk-why-item h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.1rem; line-height: 1.25; color: var(--navy); margin-bottom: 0.25rem; }
.tk-why-item p { font-size: 0.88rem; color: var(--mid); }

/* Request */
body.toolkit-page .tk-request { background: radial-gradient(55% 45% at 100% 0%, rgba(83,177,205,0.22), transparent 72%), radial-gradient(40% 40% at 0% 100%, rgba(232,201,122,0.18), transparent 72%), var(--white); }
body.toolkit-page .tk-request .contact-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); margin-bottom: 0; }
body.toolkit-page .booking-embed { background: var(--off-white); border-color: var(--border); }
body.toolkit-page .booking-embed h3 { font-weight: 400; }
body.toolkit-page .tk-request .ct-next { margin-top: 2rem; }
body.toolkit-page .cta-section.ai-cta { background: radial-gradient(60% 70% at 50% 0%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }

/* Prompt framework band: the page's bold moment, on Navy Deep with the brand grid */
body.toolkit-page .tk-prompt { position: relative; overflow: hidden; background: radial-gradient(60% 80% at 88% 0%, rgba(7,131,150,0.30), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(201,168,76,0.10), transparent 70%), var(--navy-deep); border-top: 2px solid rgba(201,168,76,0.55); }
body.toolkit-page .tk-prompt .hero-art { opacity: 0.6; }
.tk-prompt-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3.5rem; align-items: center; }
.tk-parts { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; }
.tk-part { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0.9rem; align-items: start; padding: 1.15rem 1.2rem; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); }
.tk-part:nth-child(5) { grid-column: 1 / -1; }
.tk-part-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(83,177,205,0.16); }
.tk-part-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--teal-light); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tk-part h3 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.3rem; line-height: 1.2; color: #fff; margin-bottom: 0.2rem; }
.tk-part p { font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.74); }
@media (max-width: 1000px) { .tk-prompt-grid { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 560px) { .tk-parts { grid-template-columns: 1fr; } .tk-part:nth-child(5) { grid-column: auto; } }
@media (max-width: 1000px) { .tk-why-grid { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 900px) {
  .tk-hero-inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .tk-row, .tk-row:nth-child(even) { grid-template-columns: 1fr; gap: 1.5rem; }
  .tk-row:nth-child(even) .tk-row-art { order: 0; }
  .tk-row-art { min-height: 260px; padding: 1.5rem; }
  .tk-row p { max-width: none; }
  body.toolkit-page .tk-request .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 640px) {
  body.toolkit-page { --gutter-m: 1.375rem; }
  body.toolkit-page nav, body.toolkit-page .svc-hero, body.toolkit-page .section, body.toolkit-page .cta-section.ai-cta, body.toolkit-page footer { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.toolkit-page .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.toolkit-page h2.display { font-size: 1.75rem; line-height: 1.18; margin-bottom: 0.9rem; }
  body.toolkit-page .lead { font-size: 0.97rem; }
  body.toolkit-page .svc-hero { padding-top: 2.25rem; padding-bottom: 3rem; }
  body.toolkit-page .svc-hero h1 { font-size: clamp(1.9rem, 8vw, 2.25rem); }
  body.toolkit-page .svc-hero-copy > p { font-size: 0.97rem; }
  .tk-cover { width: 28vw; margin: 0 -1.1rem; }
  .tk-areas { grid-template-columns: 1fr; }
  .tk-why-list { grid-template-columns: 1fr; }
  body.toolkit-page .booking-embed { padding: 1.5rem 1.25rem; }
  body.toolkit-page .cta-section.ai-cta .ai-cta-inner { padding: 2rem 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   AI Readiness Assessment (body.assessment-page)
   The form, its steps, hidden fields, success panel, scoring script and the result charts are
   untouched (automation depends on them). Only the surroundings and the colours of the existing
   classes are restyled here. The radar chart styles (.radar*, .ai-card) are deliberately NOT touched.
   ══════════════════════════════════════════════════════════════ */
body.assessment-page h1, body.assessment-page h2, body.assessment-page h3, body.assessment-page h2.display, body.assessment-page h2.display em { font-weight: 400; }
body.assessment-page .lead, body.assessment-page .ai-cta-copy p, body.assessment-page .assessment-step p, body.assessment-page .assessment-note { line-height: 1.6; }
body.assessment-page .as-hero { padding-bottom: 4rem; }
body.assessment-page .as-hero .svc-hero-photo img { object-position: 50% 35%; }
body.assessment-page .assessment-section { background: radial-gradient(55% 40% at 100% 0%, rgba(83,177,205,0.18), transparent 72%), radial-gradient(40% 35% at 0% 100%, rgba(232,201,122,0.16), transparent 72%), var(--off-white); padding-top: 4rem; }
body.assessment-page .assessment-intro { margin-bottom: 2rem; }

/* Live score dashboard: Navy Deep, flat bar, gold fill */
body.assessment-page .ai-summary { background: var(--navy-deep); border-radius: 16px; padding: 1.6rem 1.75rem; gap: 2rem; box-shadow: 0 18px 40px rgba(5,25,38,0.18); border-top: 3px solid var(--gold); margin-bottom: 1.5rem; }
body.assessment-page .ai-summary .metric-label { color: rgba(255,255,255,0.88); font-size: 0.7rem; margin-bottom: 0.3rem; }
body.assessment-page .ai-summary .track { height: 8px; background: rgba(255,255,255,0.12); max-width: none; }
body.assessment-page .ai-summary .fill { background: var(--teal-light); }
body.assessment-page .ai-summary .result-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.22); height: 72px; max-width: none; }
body.assessment-page .ai-summary .result-card::before { background: rgba(83,177,205,0.45); }
body.assessment-page .ai-summary .result-card:hover { transform: none; box-shadow: none; }
body.assessment-page .ai-summary .result-score { font-weight: 400; font-size: clamp(2.4rem, 4.6vw, 3.4rem); text-shadow: none; }
body.assessment-page .ai-summary .spark, body.assessment-page .ai-summary .result-status { color: var(--gold-light); }
body.assessment-page .ai-summary .result-status { font-size: 0.85rem; }

/* Panel and progress */
body.assessment-page .assessment-panel { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 2rem 2.25rem 2.25rem; box-shadow: 0 14px 34px rgba(5,25,38,0.07); }
.as-progress { margin: 0 0 1.75rem; }
.as-progress-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.as-progress-count { color: var(--mid); }
.as-progress-track { height: 6px; margin-top: 0.6rem; border-radius: 999px; background: var(--slate); overflow: hidden; }
.as-progress-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--teal); transition: width 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .as-progress-fill { transition: none; } }

/* Steps */
body.assessment-page .assessment-step-heading span { padding: 0.28rem 0.75rem; border-radius: 999px; background: var(--teal-pale); color: var(--navy); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; }
body.assessment-page .assessment-step-heading h3 { font-weight: 400; margin-top: 0.4rem; }
body.assessment-page .assessment-note { border-left-color: var(--gold); background: var(--off-white); border-radius: 0 10px 10px 0; color: var(--navy); }
body.assessment-page .assessment-scoring-grid div { border-radius: 14px; border-top: 3px solid var(--teal); background: var(--off-white); }
body.assessment-page .assessment-scoring-grid div:nth-child(2) { border-top-color: var(--gold); }
body.assessment-page .assessment-scoring-grid div:nth-child(3) { border-top-color: var(--slate); }
body.assessment-page .assessment-scoring-grid strong { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.4rem; }

/* Questions: the answer buttons carry their meaning in colour as well as text */
body.assessment-page .assessment-question { border-radius: 14px; padding: 1.15rem 1.25rem; background: var(--white); transition: border-color 0.2s, box-shadow 0.2s; }
body.assessment-page .assessment-question:focus-within { border-color: var(--teal-light); box-shadow: 0 8px 22px rgba(7,131,150,0.1); }
body.assessment-page .assessment-question legend { font-size: 0.97rem; }
body.assessment-page .assessment-options span { border-radius: 10px; padding: 0.7rem; font-size: 0.86rem; }
body.assessment-page .assessment-options label:hover span { border-color: var(--teal-light); }
body.assessment-page .assessment-options input[value="2"]:checked + span { border-color: var(--teal); background: var(--teal); color: #fff; }
body.assessment-page .assessment-options input[value="1"]:checked + span { border-color: var(--gold); background: var(--gold-light); color: var(--navy-deep); }
body.assessment-page .assessment-options input[value="0"]:checked + span { border-color: var(--navy); background: var(--navy); color: #fff; }
body.assessment-page .assessment-section-score { background: var(--teal-pale); color: var(--navy); border: 1px solid rgba(7,131,150,0.2); border-radius: 12px; }
body.assessment-page .assessment-section-score strong { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.15rem; }
body.assessment-page .assessment-result-card { border-radius: 14px; border-top: 3px solid var(--teal); }
body.assessment-page .assessment-result-card strong { font-weight: 400; }
body.assessment-page .assessment-controls { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
body.assessment-page .cta-section.ai-cta { background: radial-gradient(60% 70% at 50% 0%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }

@media (max-width: 900px) { body.assessment-page .assessment-panel { padding: 1.5rem 1.25rem; } }
@media (max-width: 640px) {
  body.assessment-page { --gutter-m: 1.375rem; }
  body.assessment-page nav, body.assessment-page .svc-hero, body.assessment-page .section, body.assessment-page .cta-section.ai-cta, body.assessment-page footer { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.assessment-page .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.assessment-page h2.display { font-size: 1.75rem; line-height: 1.18; margin-bottom: 0.9rem; }
  body.assessment-page .lead { font-size: 0.97rem; }
  body.assessment-page .svc-hero { padding-top: 2.25rem; padding-bottom: 3rem; }
  body.assessment-page .svc-hero h1 { font-size: clamp(1.9rem, 8vw, 2.25rem); }
  body.assessment-page .svc-hero-copy > p { font-size: 0.97rem; }
  body.assessment-page .assessment-section { padding-top: 3rem; }
  body.assessment-page .ai-summary { padding: 1.25rem; gap: 1.25rem; }
  body.assessment-page .assessment-panel { padding: 1.25rem 1rem; border-radius: 14px; }
  body.assessment-page .assessment-question { padding: 1rem; }
  body.assessment-page .assessment-step-heading h3 { font-size: 1.6rem; }
  body.assessment-page .cta-section.ai-cta .ai-cta-inner { padding: 2rem 1.5rem; }
  .as-progress-meta { font-size: 0.7rem; }
}

/* Assessment layout: questions first. The live score becomes a sticky sidebar beside the form on
   desktop, so the questions start right under the hero and the score stays in view while answering. */
body.assessment-page .as-hero { padding-bottom: 3rem; }
body.assessment-page .assessment-section { padding-top: 2.5rem; padding-bottom: 4rem; scroll-margin-top: 80px; }
body.assessment-page .assessment-intro { margin-bottom: 1.25rem; }
body.assessment-page .assessment-intro .section-tag { display: none; }
body.assessment-page .assessment-intro h2.display { font-size: clamp(1.7rem, 2.6vw, 2.15rem); margin-bottom: 0.4rem; }
body.assessment-page .assessment-intro .lead { max-width: 72ch; font-size: 0.97rem; margin-bottom: 0; }
@media (min-width: 1025px) {
  body.assessment-page .assessment-section .container { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 0 2rem; align-items: start; }
  body.assessment-page .assessment-intro { grid-column: 1 / -1; }
  body.assessment-page .ai-summary { grid-column: 1; grid-row: 2; position: sticky; top: 96px; display: flex; flex-direction: column; align-items: stretch; gap: 1.1rem; margin: 0; padding: 1.35rem 1.25rem; }
  body.assessment-page .ai-summary .result-area { order: -1; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.14); }
  body.assessment-page .ai-summary .score-list { gap: 0.6rem; }
  body.assessment-page .ai-summary .result-card { height: 64px; }
  body.assessment-page .assessment-panel { grid-column: 2; grid-row: 2; }
}
@media (max-width: 1024px) {
  /* Phones and tablets: a slim score strip; the per-section bars are in the results step */
  body.assessment-page .ai-summary { grid-template-columns: 1fr; padding: 1rem 1.25rem; gap: 0; }
  body.assessment-page .ai-summary .score-list { display: none; }
  body.assessment-page .ai-summary .result-card { height: 56px; }
  body.assessment-page .ai-summary .result-score { font-size: 2rem; }
}


/* Assessment step headings: smaller, so the questions sit higher */
body.assessment-page .assessment-step-heading { margin-bottom: 1.1rem; }
body.assessment-page .assessment-step-heading h3 { font-size: clamp(1.35rem, 2vw, 1.65rem); line-height: 1.2; margin-top: 0.35rem; }
@media (max-width: 640px) { body.assessment-page .assessment-step-heading h3 { font-size: 1.3rem; } }

/* Assessment hero: the eight areas it measures, on a flat translucent panel */
body.assessment-page .as-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; align-items: center; }
.as-areas { padding: 1.5rem 1.6rem 1.7rem; border-radius: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); }
.as-areas-title { margin: 0 0 1rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-light); }
.as-areas-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin: 0; padding: 0; }
.as-areas-list li { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.8rem; border-radius: 12px; background: rgba(5,25,38,0.55); border: 1px solid rgba(255,255,255,0.1); color: #fff; font-size: 0.9rem; font-weight: 500; line-height: 1.3; }
.as-area-icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: rgba(83,177,205,0.18); }
.as-area-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--teal-light); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { body.assessment-page .as-hero-inner { grid-template-columns: 1fr; } .as-areas { display: none; } }

/* ══════════════════════════════════════════════════════════════
   Testimonials (body.testimonials-page)
   Photo hero, one featured quote beside a photo, the other five as quote cards, single-message closing.
   Quotes are the approved wording, attributed by role only.
   ══════════════════════════════════════════════════════════════ */
body.testimonials-page h1, body.testimonials-page h2, body.testimonials-page h3, body.testimonials-page h2.display, body.testimonials-page h2.display em { font-weight: 400; }
body.testimonials-page .lead, body.testimonials-page .ai-cta-copy p, body.testimonials-page .tt-card p { line-height: 1.6; }
body.testimonials-page .tt-hero .svc-hero-photo img { object-position: 50% 30%; }

/* Featured quote */
body.testimonials-page .tt-featured { background: radial-gradient(55% 45% at 100% 0%, rgba(83,177,205,0.22), transparent 72%), radial-gradient(40% 40% at 0% 100%, rgba(232,201,122,0.18), transparent 72%), var(--white); }
.tt-feat-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 1.5rem; align-items: stretch; }
.tt-feat { position: relative; margin: 0; padding: 2.75rem 2.75rem 2.5rem; border-radius: 18px; background: var(--navy-deep); border-top: 3px solid var(--gold); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.tt-feat-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: rgba(83,177,205,0.16); margin-bottom: 1.25rem; }
.tt-feat-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--teal-light); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tt-feat-topic { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 0.9rem; }
.tt-feat blockquote { margin: 0; }
.tt-feat blockquote p { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: clamp(1.4rem, 2.3vw, 1.95rem); line-height: 1.32; color: #fff; }
.tt-feat figcaption { margin-top: 1.5rem; }
.tt-feat figcaption strong { font-weight: 600; font-size: 0.95rem; color: var(--gold-light); }
.tt-feat-rec { margin-top: 0.4rem; font-size: 0.9rem; line-height: 1.55; color: rgba(255,255,255,0.74); }
.tt-feat-photo { position: relative; border-radius: 18px; overflow: hidden; min-height: 320px; }
.tt-feat-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; filter: saturate(0.9); }
.tt-feat-photo::after { content: ''; position: absolute; inset: 0; background: rgba(5,25,38,0.2); }

/* The rest: quote cards on a six-column grid, three then two */
body.testimonials-page .tt-all { background: var(--teal-pale); border-top: 1px solid rgba(7,131,150,0.14); border-bottom: 1px solid rgba(7,131,150,0.14); }
.tt-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.tt-card { grid-column: span 2; grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; margin: 0; padding: 1.75rem; border-radius: 16px; background: var(--white); border: 1px solid rgba(7,131,150,0.2); border-top: 3px solid var(--teal); }
.tt-card:nth-child(2) { border-top-color: var(--gold); }
.tt-card:nth-child(3) { border-top-color: var(--teal-light); }
.tt-card:nth-child(n+4) { grid-column: span 3; }
.tt-card:nth-child(4) { border-top-color: var(--gold); }
.tt-topic { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 0.8rem; }
.tt-card blockquote { margin: 0; }
.tt-card blockquote p { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.2rem; line-height: 1.4; color: var(--navy); }
.tt-card figcaption { margin-top: 1.25rem; }
.tt-card figcaption strong { font-weight: 600; font-size: 0.92rem; color: var(--navy); }
.tt-rec { display: flex; gap: 0.55rem; align-items: flex-start; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.86rem; line-height: 1.5; color: var(--mid); }
.tt-rec-icon svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 0.1rem; fill: none; stroke: var(--teal); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.testimonials-page .cta-section.ai-cta { background: radial-gradient(60% 70% at 50% 0%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }

@media (max-width: 1000px) { .tt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tt-card, .tt-card:nth-child(n+4) { grid-column: span 1; } .tt-card:nth-child(5) { grid-column: 1 / -1; } }
@media (max-width: 900px) { .tt-feat-grid { grid-template-columns: 1fr; } .tt-feat-photo { min-height: 220px; } }
@media (max-width: 640px) {
  body.testimonials-page { --gutter-m: 1.375rem; }
  body.testimonials-page nav, body.testimonials-page .svc-hero, body.testimonials-page .section, body.testimonials-page .cta-section.ai-cta, body.testimonials-page footer { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.testimonials-page .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.testimonials-page h2.display { font-size: 1.75rem; line-height: 1.18; margin-bottom: 0.9rem; }
  body.testimonials-page .lead { font-size: 0.97rem; }
  body.testimonials-page .svc-hero { padding-top: 2.25rem; padding-bottom: 3rem; }
  body.testimonials-page .svc-hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.3rem); }
  body.testimonials-page .svc-hero-copy > p { font-size: 0.97rem; }
  .tt-feat { padding: 1.75rem 1.4rem; }
  .tt-grid { grid-template-columns: 1fr; }
  .tt-card, .tt-card:nth-child(n+4), .tt-card:nth-child(5) { grid-column: auto; grid-row: auto; display: block; }
  body.testimonials-page .cta-section.ai-cta .ai-cta-inner { padding: 2rem 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   Case studies landing page (body.cases-page)
   Photo hero, product filters, an outcome-first bento grid (Maritime featured), a looping
   testimonial carousel, closing. Case copy is unchanged from the original page (anonymised).
   ══════════════════════════════════════════════════════════════ */
body.cases-page h1, body.cases-page h2, body.cases-page h3, body.cases-page h2.display, body.cases-page h2.display em { font-weight: 400; }
body.cases-page .lead, body.cases-page .ai-cta-copy p, body.cases-page .cs-tile p { line-height: 1.6; }
body.cases-page .cs-hero .svc-hero-photo img { object-position: 50% 40%; }
body.cases-page .cs-list { background: radial-gradient(55% 30% at 100% 0%, rgba(83,177,205,0.2), transparent 72%), radial-gradient(40% 25% at 0% 100%, rgba(232,201,122,0.16), transparent 72%), var(--off-white); }

/* "What are you trying to fix?" The visitor picks a problem in plain words and sees two to four short
   before-and-after stories. No technology, sector or client detail on this page. */
.cs-toolbar { margin-bottom: 2rem; }
.cs-toolbar h2.display { margin: 0 0 0.6rem; }
.cs-toolbar .lead { margin: 0; max-width: 56ch; }
.cs-needs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.cs-need { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0.9rem; align-items: start; padding: 1.05rem 1.1rem; border-radius: 16px; border: 1.5px solid var(--border); background: var(--white); text-align: left; font: inherit; color: var(--navy); cursor: pointer; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s; }
.cs-need:hover { border-color: var(--teal-light); transform: translateY(-2px); }
.cs-need:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 2px; }
.cs-need-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--teal-pale); }
.cs-need-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--teal); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cs-need-text { display: grid; gap: 0.2rem; min-width: 0; }
.cs-need-text strong { font-size: 0.98rem; font-weight: 600; line-height: 1.3; }
.cs-need-text small { font-size: 0.82rem; line-height: 1.4; color: var(--mid); }
.cs-need.is-active { background: var(--navy-deep); border-color: var(--navy-deep); box-shadow: 0 16px 34px rgba(5,25,38,0.22); transform: none; }
.cs-need.is-active .cs-need-ico { background: rgba(83,177,205,0.18); }
.cs-need.is-active .cs-need-ico svg { stroke: var(--teal-light); }
.cs-need.is-active .cs-need-text strong { color: #fff; }
.cs-need.is-active .cs-need-text small { color: rgba(255,255,255,0.72); }

.cs-answers { margin-top: 1.4rem; padding: 2.4rem 2.2rem 2.2rem; border-radius: 22px; background: var(--teal-pale); border: 1px solid rgba(7,131,150,0.18); }
.cs-answers-title { margin: 0 0 1.4rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-dark); }
.cs-answers-title strong { font-weight: 700; color: var(--navy); }
.cs-need-cta { margin-top: 0.35rem; font-size: 0.78rem; font-weight: 600; color: var(--teal-dark); }
.cs-cta-on { display: none; }
.cs-need.is-active .cs-cta-off { display: none; }
.cs-need.is-active .cs-cta-on { display: inline; color: var(--gold-light); }
.cs-need:hover .cs-cta-off { text-decoration: underline; text-underline-offset: 3px; }
.cs-answer[hidden] { display: none; }
.cs-answer:not([hidden]) { animation: cs-in 0.4s ease; }
@keyframes cs-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cs-stories { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-stories.cs-n1 { grid-template-columns: minmax(0, 520px); }
.cs-stories.cs-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-stories.cs-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-story { display: flex; flex-direction: column; gap: 1rem; padding: 1.6rem 1.6rem 1.4rem; border-radius: 18px; background: var(--white); border: 1px solid rgba(7,131,150,0.2); border-top: 3px solid var(--teal); color: inherit; text-decoration: none; transition: transform 0.25s, box-shadow 0.25s; }
.cs-story:nth-child(2) { border-top-color: var(--gold); }
.cs-story:nth-child(3) { border-top-color: var(--teal-light); }
.cs-story:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(5,25,38,0.12); }
.cs-story:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; }
.cs-story h3 { margin: 0; font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.45rem; line-height: 1.2; color: var(--navy); }
.cs-ba { display: grid; gap: 0.25rem; margin: 0; font-size: 0.97rem; line-height: 1.5; }
.cs-ba span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.cs-before { color: var(--mid); }
.cs-before span { color: var(--mid); }
.cs-after { padding-left: 0.9rem; border-left: 3px solid var(--teal); color: var(--navy); font-weight: 500; }
.cs-after span { color: var(--teal-dark); }
.cs-more-link { margin-top: auto; padding-top: 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--teal-dark); }
.cs-story:hover .cs-more-link { text-decoration: underline; text-underline-offset: 3px; }
.cs-extra { margin: 1.4rem 0 0; font-size: 0.95rem; color: var(--navy); }
.cs-extra a { color: var(--teal-dark); font-weight: 600; text-decoration: none; }
.cs-extra a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cs-unsure { margin: 1.6rem 0 0; text-align: center; font-size: 1rem; color: var(--mid); }
.cs-unsure a { color: var(--teal-dark); font-weight: 600; text-decoration: none; }
.cs-unsure a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Testimonial carousel: one at a time, looping, dots only */
body.cases-page .cs-voice { background: var(--teal-pale); border-top: 1px solid rgba(7,131,150,0.14); border-bottom: 1px solid rgba(7,131,150,0.14); padding-top: 3.75rem; padding-bottom: 3.25rem; }
.cs-carousel { margin-top: 0; --gap: 0rem; }
.cs-carousel .carousel-track { align-items: center; }
.cs-quote { margin: 0; max-width: none; padding: 0 max(1rem, calc((100% - 880px) / 2)); text-align: center; box-sizing: border-box; }
.cs-quote-mark { width: 40px; height: 40px; margin: 0 auto 1.1rem; display: block; fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cs-quote blockquote { margin: 0; }
.cs-quote blockquote p { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.35; color: var(--navy); }
.cs-quote figcaption { margin-top: 1.25rem; font-size: 0.92rem; }
.cs-quote figcaption strong { font-weight: 600; color: var(--navy); }
.cs-voice .carousel-dots { margin-top: 0.5rem; }
.cs-voice-link { margin: 1.1rem 0 0; text-align: center; }
.cs-voice-link a { color: var(--teal-dark); font-weight: 600; text-decoration: none; }
.cs-voice-link a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.cases-page .cta-section.ai-cta { background: radial-gradient(60% 70% at 50% 0%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }

@media (prefers-reduced-motion: reduce) { .cs-need, .cs-story { transition: none; } .cs-need:hover, .cs-story:hover { transform: none; } .cs-answer:not([hidden]) { animation: none; } }
@media (max-width: 1100px) {
  .cs-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-stories, .cs-stories.cs-n4, .cs-stories.cs-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .cs-needs { grid-template-columns: 1fr; gap: 0.6rem; }
  .cs-need { grid-template-columns: 40px minmax(0, 1fr); padding: 0.85rem 0.95rem; }
  .cs-need-ico { width: 40px; height: 40px; }
  .cs-need-text small { display: none; }
  .cs-need-cta { margin-top: 0.1rem; }
  .cs-need { align-items: center; }
  .cs-answers { padding: 1.6rem 1.1rem 1.4rem; }
  .cs-stories, .cs-stories.cs-n1, .cs-stories.cs-n2, .cs-stories.cs-n3, .cs-stories.cs-n4 { grid-template-columns: 1fr; }
  .cs-story { padding: 1.3rem 1.2rem 1.2rem; }
}
@media (max-width: 640px) {
  body.cases-page { --gutter-m: 1.375rem; }
  body.cases-page nav, body.cases-page .svc-hero, body.cases-page .section, body.cases-page .cta-section.ai-cta, body.cases-page footer { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.cases-page .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.cases-page h2.display { font-size: 1.75rem; line-height: 1.18; margin-bottom: 0.9rem; }
  body.cases-page .svc-hero { padding-top: 2.25rem; padding-bottom: 3rem; }
  body.cases-page .svc-hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.3rem); }
  body.cases-page .svc-hero-copy > p { font-size: 0.97rem; }
  body.cases-page .cs-voice { padding-top: 3rem; padding-bottom: 2.75rem; }
  .cs-quote { padding: 0 0.25rem; }
  body.cases-page .cta-section.ai-cta .ai-cta-inner { padding: 2rem 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   Case study detail pages (body.casedetail-page)
   Template for the individual case studies, first used on Maritime Incident & CRM Platform.
   Photo hero with an at-a-glance strip, the problem as an icon list beside the story, the
   solution as a platform map on Navy Deep, outcomes as icon cards, platform components as
   icon pills, single-message closing. The copy is the original wording.
   ══════════════════════════════════════════════════════════════ */
body.casedetail-page h1, body.casedetail-page h2, body.casedetail-page h3, body.casedetail-page h2.display, body.casedetail-page h2.display em { font-weight: 400; }
body.casedetail-page .lead, body.casedetail-page .cd-copy p, body.casedetail-page .cd-point p, body.casedetail-page .cd-mod p, body.casedetail-page .cd-out p, body.casedetail-page .ai-cta-copy p { line-height: 1.6; }
body.casedetail-page .cd-hero { padding-bottom: 3.5rem; }
body.casedetail-page .cd-hero .svc-hero-photo img { object-position: 30% 40%; }
body.casedetail-page .cd-hero h1 { max-width: 22ch; }
.cd-meta { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 2rem; margin: 2rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid rgba(255,255,255,0.2); max-width: 520px; }
.cd-meta li { display: grid; gap: 0.15rem; align-content: start; }
.cd-meta span { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-light); }
.cd-meta strong { font-weight: 500; font-size: 0.97rem; line-height: 1.35; color: #fff; }
.cd-meta-icons { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.15rem; }
.cd-meta-icons img { display: block; width: 28px; height: 28px; padding: 3px; border-radius: 8px; background: var(--white); box-sizing: content-box; object-fit: contain; }
.cd-ico { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; background: var(--teal-pale); }
.cd-ico svg { width: 23px; height: 23px; fill: none; stroke: var(--teal); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Challenge: the story with a photo on the left, the five problems as an icon list on the right */
body.casedetail-page .cd-challenge { background: radial-gradient(55% 40% at 100% 0%, rgba(83,177,205,0.2), transparent 72%), radial-gradient(40% 35% at 0% 100%, rgba(232,201,122,0.16), transparent 72%), var(--white); }
.cd-challenge-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5rem; align-items: start; }
.cd-copy p { color: var(--mid); font-size: 1.02rem; max-width: 56ch; }
.cd-copy p + p { margin-top: 1rem; }
.cd-photo { position: relative; margin-top: 2rem; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; }
.cd-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; filter: saturate(0.9); }
.cd-photo::after { content: ''; position: absolute; inset: 0; background: rgba(5,25,38,0.18); }
.cd-points { list-style: none; display: grid; gap: 0.9rem; margin: 0; padding: 0; }
.cd-point { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.2rem 1.3rem; border-radius: 14px; background: var(--off-white); border: 1px solid var(--border); border-left: 3px solid var(--gold); }
body.casedetail-page .cd-point h3 { margin: 0 0 0.2rem; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 1.02rem; line-height: 1.35; color: var(--navy); }
.cd-point p { margin: 0; font-size: 0.92rem; color: var(--mid); }
.cd-point .cd-ico { background: rgba(201,168,76,0.22); }
.cd-point .cd-ico svg { stroke: var(--navy); }

/* Solution: a platform map on Navy Deep */
body.casedetail-page .cd-solution { position: relative; overflow: hidden; background: radial-gradient(60% 80% at 88% 0%, rgba(7,131,150,0.30), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(201,168,76,0.10), transparent 70%), var(--navy-deep); border-top: 2px solid rgba(201,168,76,0.55); }
body.casedetail-page .cd-solution .hero-art { opacity: 0.5; }
.cd-solution-inner { position: relative; z-index: 1; }
.cd-solution-inner .lead { max-width: 62ch; }
.cd-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 2.5rem; }
.cd-mod { padding: 1.6rem 1.5rem; border-radius: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-top: 3px solid var(--teal-light); transition: background 0.25s, transform 0.25s; }
.cd-mod:nth-child(3n+2) { border-top-color: var(--gold); }
.cd-mod:hover { background: rgba(255,255,255,0.1); transform: translateY(-3px); }
.cd-mod .cd-ico { background: rgba(83,177,205,0.16); margin-bottom: 1rem; }
.cd-mod .cd-ico svg { stroke: var(--teal-light); }
.cd-mod h3 { margin: 0 0 0.4rem; font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.35rem; line-height: 1.2; color: #fff; }
.cd-mod p { margin: 0; font-size: 0.93rem; color: rgba(255,255,255,0.76); }

/* Outcomes */
body.casedetail-page .cd-outcomes { background: var(--teal-pale); border-bottom: 1px solid rgba(7,131,150,0.14); }
.cd-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 2.5rem; }
.cd-out { padding: 1.6rem 1.5rem; border-radius: 16px; background: var(--white); border: 1px solid rgba(7,131,150,0.2); border-top: 3px solid var(--teal); }
.cd-out:nth-child(3n+2) { border-top-color: var(--gold); }
.cd-out:nth-child(3n+3) { border-top-color: var(--teal-light); }
.cd-out .cd-ico { margin-bottom: 1rem; }
.cd-out h3 { margin: 0 0 0.4rem; font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.35rem; line-height: 1.2; color: var(--navy); }
.cd-out p { margin: 0; font-size: 0.93rem; color: var(--mid); }

/* Platform components */
body.casedetail-page .cd-platform { background: var(--white); }
.cd-platform-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem; align-items: center; }
.cd-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.cd-tech { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; }
.cd-tech li { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.95rem 0.45rem 0.6rem; border-radius: 999px; background: var(--off-white); border: 1px solid var(--border); font-size: 0.88rem; font-weight: 500; color: var(--navy); }
.cd-tech img { width: 24px; height: 24px; object-fit: contain; display: block; }
.cd-tech li.cd-plain { padding-left: 0.95rem; }
body.casedetail-page .cta-section.ai-cta { background: radial-gradient(60% 70% at 50% 0%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }

/* Five cards: three across, then two wider cards, so there is no gap */
.cd-mods.cd-n5, .cd-outs.cd-n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cd-mods.cd-n5 > *, .cd-outs.cd-n5 > * { grid-column: span 2; }
.cd-mods.cd-n5 > :nth-child(n+4), .cd-outs.cd-n5 > :nth-child(n+4) { grid-column: span 3; }
/* Sections with four cards sit two by two */
.cd-mods.cd-n4, .cd-outs.cd-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (prefers-reduced-motion: reduce) { .cd-mod { transition: none; } .cd-mod:hover { transform: none; } }
@media (max-width: 1000px) {
  .cd-challenge-grid, .cd-platform-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .cd-mods, .cd-outs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-mods.cd-n5, .cd-outs.cd-n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-mods.cd-n5 > *, .cd-outs.cd-n5 > *, .cd-mods.cd-n5 > :nth-child(n+4), .cd-outs.cd-n5 > :nth-child(n+4) { grid-column: auto; }
  .cd-mods.cd-n5 > :last-child, .cd-outs.cd-n5 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body.casedetail-page { --gutter-m: 1.375rem; }
  body.casedetail-page nav, body.casedetail-page .svc-hero, body.casedetail-page .section, body.casedetail-page .cta-section.ai-cta, body.casedetail-page footer { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.casedetail-page .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.casedetail-page h2.display { font-size: 1.75rem; line-height: 1.18; margin-bottom: 0.9rem; }
  body.casedetail-page .lead { font-size: 0.97rem; }
  body.casedetail-page .svc-hero { padding-top: 2.25rem; padding-bottom: 3rem; }
  body.casedetail-page .svc-hero h1 { font-size: clamp(1.8rem, 7.6vw, 2.1rem); }
  body.casedetail-page .svc-hero-copy > p { font-size: 0.97rem; }
  .cd-meta { grid-template-columns: 1fr 1fr; gap: 0.8rem 1.25rem; }
  .cd-mods, .cd-outs, .cd-mods.cd-n4, .cd-outs.cd-n4, .cd-mods.cd-n5, .cd-outs.cd-n5 { grid-template-columns: 1fr; }
  .cd-mods.cd-n5 > :last-child, .cd-outs.cd-n5 > :last-child { grid-column: auto; }
  .cd-point { padding: 1.05rem 1.1rem; gap: 0.85rem; }
  .cd-actions .btn { width: 100%; justify-content: center; }
  body.casedetail-page .cta-section.ai-cta .ai-cta-inner { padding: 2rem 1.5rem; }
}

/* Business Solutions: links inside the dark service desk card stay legible */
.bs-dark .bs-links a { color: var(--teal-light); }
.bs-dark .bs-links a:hover { color: #fff; }

/* AI Enablement: the case-study link sits inside the card's list row, without a tick */
.ai-proof-list li.ai-proof-more { padding-left: 0; margin-top: 0.15rem; }
.ai-proof-list li.ai-proof-more::before { display: none; }

/* AI Enablement lead card: the paragraph sits inside .ai-proof-lead-copy, so the direct-child rule missed it.
   Give it the same colour, size and spacing as the other cards, so the divider has room above it. */
.ai-proof-lead-copy > p { color: var(--mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.25rem; max-width: 60ch; }
.ai-proof-lead-copy .ai-proof-list { padding-top: 1.1rem; }

/* ══════════════════════════════════════════════════════════════
   AI Without the Hype workshop (body.workshop-page)
   Light-touch rebuild: the page is still being worked on, so the content and section order are the
   originals. The sign-up form, its success panel and its script are untouched (Netlify form).
   ══════════════════════════════════════════════════════════════ */
body.workshop-page h1, body.workshop-page h2, body.workshop-page h3, body.workshop-page h2.display, body.workshop-page h2.display em { font-weight: 400; }
body.workshop-page .lead, body.workshop-page .ws-copy p, body.workshop-page .ws-learn p, body.workshop-page .ws-step p, body.workshop-page .ai-cta-copy p { line-height: 1.6; }
body.workshop-page .ws-hero { padding-bottom: 3.5rem; }
body.workshop-page .ws-hero .svc-hero-photo img { object-position: 50% 35%; }
body.workshop-page .ws-hero h1 { max-width: 20ch; }
.ws-ico { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; background: var(--teal-pale); }
.ws-ico svg { width: 23px; height: 23px; fill: none; stroke: var(--teal); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Intro */
body.workshop-page .ws-intro { background: radial-gradient(55% 40% at 100% 0%, rgba(83,177,205,0.2), transparent 72%), radial-gradient(40% 35% at 0% 100%, rgba(232,201,122,0.16), transparent 72%), var(--white); }
.ws-intro-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3.5rem; align-items: center; }
.ws-copy p { color: var(--mid); font-size: 1.02rem; max-width: 56ch; }
.ws-copy p + p { margin-top: 1rem; }
.ws-photo { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; }
.ws-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; filter: saturate(0.9); }
.ws-photo::after { content: ''; position: absolute; inset: 0; background: rgba(5,25,38,0.16); }

/* Event details */
body.workshop-page .ws-details { background: var(--teal-pale); border-top: 1px solid rgba(7,131,150,0.14); border-bottom: 1px solid rgba(7,131,150,0.14); }
.ws-detail-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin: 2.5rem 0 0; padding: 0; }
.ws-detail { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.3rem 1.4rem; border-radius: 16px; background: var(--white); border: 1px solid rgba(7,131,150,0.2); border-top: 3px solid var(--teal); }
.ws-detail:nth-child(2n) { border-top-color: var(--gold); }
.ws-detail:nth-child(3n) { border-top-color: var(--teal-light); }
.ws-detail h3 { margin: 0 0 0.2rem; font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 600; color: var(--navy); }
body.workshop-page .ws-detail h3 { font-weight: 600; }
.ws-detail p { margin: 0; font-size: 0.93rem; color: var(--mid); }
.ws-detail-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ws-detail-grid .ws-detail { grid-column: span 2; }
.ws-detail-grid .ws-detail:nth-child(n+4) { grid-column: span 3; }

/* What you will learn: Navy Deep, three columns */
body.workshop-page .ws-learnings { position: relative; overflow: hidden; background: radial-gradient(60% 80% at 88% 0%, rgba(7,131,150,0.30), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(201,168,76,0.10), transparent 70%), var(--navy-deep); border-top: 2px solid rgba(201,168,76,0.55); }
body.workshop-page .ws-learnings .hero-art { opacity: 0.5; }
.ws-learn-inner { position: relative; z-index: 1; }
.ws-learn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 2.5rem; }
.ws-learn { padding: 1.8rem 1.6rem; border-radius: 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-top: 3px solid var(--teal-light); }
.ws-learn:nth-child(2) { border-top-color: var(--gold); }
.ws-tag { display: inline-block; padding: 0.28rem 0.75rem; border-radius: 999px; background: rgba(83,177,205,0.18); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ws-learn h3 { margin: 1rem 0 0.6rem; font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: #fff; }
.ws-learn p { margin: 0 0 1.1rem; font-size: 0.95rem; color: rgba(255,255,255,0.78); }
.ws-learn ul { list-style: none; display: grid; gap: 0.55rem; margin: 0; padding: 1rem 0 0; border-top: 1px solid rgba(255,255,255,0.16); }
.ws-learn li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; line-height: 1.45; color: #fff; }
.ws-learn li::before { content: ''; position: absolute; left: 0; top: 0.4em; width: 12px; height: 7px; border-left: 2px solid var(--gold-light); border-bottom: 2px solid var(--gold-light); transform: rotate(-45deg); }

/* Session overview: a real sequence, so numbered, on one line */
body.workshop-page .ws-agenda { background: var(--off-white); }
.ws-steps { list-style: none; counter-reset: ws; display: grid; gap: 0; margin: 2.5rem 0 0; padding: 0 0 0 3.25rem; max-width: 760px; }
.ws-step { --mk: 18px; counter-increment: ws; position: relative; padding: 0 0 2rem; }
.ws-step:last-child { padding-bottom: 0; }
.ws-step::before { content: counter(ws); position: absolute; left: -3.25rem; top: -2px; width: calc(var(--mk) * 2); height: calc(var(--mk) * 2); border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; font-size: 0.82rem; font-weight: 700; box-shadow: 0 0 0 5px var(--off-white); z-index: 1; }
.ws-step:not(:last-child)::after { content: ''; position: absolute; left: calc(-3.25rem + var(--mk) - 1px); top: calc(var(--mk) * 2 - 2px); bottom: 0; width: 2px; background: var(--slate); }
.ws-step h3 { margin: 0 0 0.25rem; font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.4rem; line-height: 1.2; color: var(--navy); }
.ws-step p { margin: 0; font-size: 0.97rem; color: var(--mid); }

/* Sign up */
body.workshop-page .ws-signup { background: radial-gradient(55% 45% at 100% 0%, rgba(83,177,205,0.22), transparent 72%), radial-gradient(40% 40% at 0% 100%, rgba(232,201,122,0.18), transparent 72%), var(--white); }
body.workshop-page .ws-signup .contact-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); margin-bottom: 0; }
body.workshop-page .ws-signup .contact-info p { line-height: 1.6; }
.ws-methods { display: grid; gap: 1rem; margin-top: 1.75rem; }
.ws-method { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 1rem; align-items: center; }
.ws-method h4 { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); }
.ws-method p { margin: 0.1rem 0 0; font-size: 0.95rem; color: var(--navy); }
body.workshop-page .booking-embed { background: var(--off-white); border-color: var(--border); }
body.workshop-page .booking-embed h3 { font-weight: 400; }
body.workshop-page .cta-section.ai-cta { background: radial-gradient(60% 70% at 50% 0%, rgba(83,177,205,0.20), transparent 72%), var(--off-white); }

@media (max-width: 1000px) { .ws-detail-grid, .ws-learn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ws-detail-grid .ws-detail, .ws-detail-grid .ws-detail:nth-child(n+4) { grid-column: auto; } .ws-detail-grid .ws-detail:last-child { grid-column: 1 / -1; } .ws-intro-grid { grid-template-columns: 1fr; gap: 2rem; } body.workshop-page .ws-signup .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 640px) {
  body.workshop-page { --gutter-m: 1.375rem; }
  body.workshop-page nav, body.workshop-page .svc-hero, body.workshop-page .section, body.workshop-page .cta-section.ai-cta, body.workshop-page footer { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  body.workshop-page .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.workshop-page h2.display { font-size: 1.75rem; line-height: 1.18; margin-bottom: 0.9rem; }
  body.workshop-page .lead { font-size: 0.97rem; }
  body.workshop-page .svc-hero { padding-top: 2.25rem; padding-bottom: 3rem; }
  body.workshop-page .svc-hero h1 { font-size: clamp(1.9rem, 8vw, 2.25rem); }
  body.workshop-page .svc-hero-copy > p { font-size: 0.97rem; }
  .ws-detail-grid, .ws-learn-grid { grid-template-columns: 1fr; }
  .ws-detail-grid .ws-detail:last-child { grid-column: auto; }
  .ws-steps { padding-left: 2.75rem; }
  .ws-step::before { left: -2.75rem; --mk: 16px; }
  .ws-step:not(:last-child)::after { left: calc(-2.75rem + 16px - 1px); }
  body.workshop-page .booking-embed { padding: 1.5rem 1.25rem; }
  body.workshop-page .cta-section.ai-cta .ai-cta-inner { padding: 2rem 1.5rem; }
}