/* =========================================================
   ADbundance Agency — Design System
   Modernized refresh keeping the original brand palette.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Brand colors (lifted from original site) */
  --pink: #F2549F;
  --pink-soft: #FFEFF2;
  --magenta: #E8338A;
  --purple: #9500FF;
  --purple-deep: #7A1FE0;
  --indigo: #546AEA;
  --blue: #188bf6;
  --cyan: #00C2D1;

  /* Neutrals */
  --ink: #0F1216;
  --ink-2: #1D252C;
  --gray-900: #2A3135;
  --gray-700: #464D5F;
  --gray-500: #607179;
  --gray-300: #AFB8BC;
  --gray-200: #CDE0EC;
  --gray-100: #ECEFF3;
  --gray-50: #F7F8FB;
  --paper: #FFFCFE;
  --white: #FFFFFF;

  /* Gradients */
  --grad-brand: linear-gradient(120deg, var(--pink) 0%, var(--purple) 100%);
  --grad-brand-soft: linear-gradient(120deg, #FFD8E8 0%, #E8D6FF 100%);
  --grad-cool: linear-gradient(120deg, var(--indigo) 0%, var(--blue) 100%);
  --grad-warm: linear-gradient(120deg, var(--pink) 0%, #FF8A4D 100%);
  --grad-dark: linear-gradient(140deg, #1A1130 0%, #0F1216 100%);

  /* Type */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Montserrat", system-ui, sans-serif;

  /* Layout */
  --maxw: 1240px;
  --maxw-narrow: 880px;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 32px;
  --radius-xl: 48px;
  --shadow-sm: 0 4px 14px rgba(15, 18, 22, 0.06);
  --shadow: 0 18px 40px -16px rgba(15, 18, 22, 0.14);
  --shadow-lg: 0 30px 70px -20px rgba(149, 0, 255, 0.22);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 6px; }

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Skip to content — visible only when focused */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--ink); color: var(--white);
  padding: 12px 20px; border-radius: 0 0 12px 12px;
  font-weight: 700; font-size: 0.94rem;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 0.4em;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 800; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.005em; }
p { margin: 0 0 1em; color: var(--gray-700); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--gray-700); line-height: 1.55; }
/* Section kickers removed entirely 2026-08-31.
   They were a gradient pill, then a rule plus small caps. Both read as template.
   Every one of them ("What we do", "Packages", "Our story") only restated the
   headline directly beneath it, so deleting them cost nothing and removed the tell.
   The .eyebrow class is intentionally left undefined — no markup uses it anymore.

   The only kickers kept are the numbered service markers on services.html, which
   carry real information (section order). Set in normal sentence case at body
   weight, with the number in brand color. No uppercase, no letterspacing, no rule. */
.section-num {
  display: block;
  font-size: 0.95rem; font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 14px;
}
.section-num b {
  color: var(--purple); font-weight: 700;
  margin-right: 10px;
}

/* ---------- "What it costs" section ----------
   Replaced the three-column priced package grid on 2026-08-31. Four plain
   statements about the commercial model, then one CTA. Deliberately not styled
   like pricing cards — there is no number to anchor, so a card grid would just
   look like a pricing table with the prices missing. */
.pricing-facts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2px; background: var(--gray-100);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); overflow: hidden;
}
.pricing-fact { background: var(--white); padding: 32px 30px; }
.pricing-fact h3 { font-size: 1.12rem; margin-bottom: 8px; }
.pricing-fact p { margin: 0; font-size: 0.95rem; color: var(--gray-700); }
.pricing-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px 24px; margin-top: 36px; text-align: center;
}
.pricing-cta p {
  margin: 0; font-size: 1.05rem; color: var(--gray-700); max-width: 460px;
}
@media (max-width: 760px) {
  .pricing-facts { grid-template-columns: 1fr; }
  .pricing-fact { padding: 26px 24px; }
  .pricing-cta { flex-direction: column; }
}
.gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- Layout ---------- */
.container {
  width: 100%; max-width: var(--maxw);
  margin: 0 auto; padding: 0 24px;
}
.narrow { max-width: var(--maxw-narrow); margin: 0 auto; }
section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section-head { text-align: center; margin: 0 auto 60px; max-width: 720px; }
.section-head .eyebrow { margin-bottom: 18px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 252, 254, 0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--gray-100); background: rgba(255, 252, 254, 0.92); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; gap: 24px;
}
.nav-logo img { height: 38px; width: auto; }
.nav-links {
  display: flex; gap: 8px; list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  display: inline-block; padding: 10px 14px; border-radius: 10px;
  font-weight: 600; font-size: 0.96rem; color: var(--gray-900);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-links a:hover { background: var(--pink-soft); color: var(--magenta); }
.nav-links a.active { color: var(--purple); }
/* CTA that only appears inside the open mobile menu (the header button is
   hidden on small screens, which otherwise leaves mobile with no primary CTA). */
.nav-cta-mobile { display: none; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 12px;
  align-items: center; justify-content: center; color: var(--ink);
}
.nav-toggle svg { width: 24px; height: 24px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 14px 26px; font-weight: 700; font-size: 0.98rem;
  border-radius: 999px; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.2s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad-brand); color: var(--white);
  box-shadow: 0 14px 28px -10px rgba(149, 0, 255, 0.45);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -10px rgba(149, 0, 255, 0.55); }
.btn-ghost {
  background: var(--white); color: var(--ink);
  border: 1.5px solid var(--gray-100);
}
.btn-ghost:hover { border-color: var(--purple); color: var(--purple); transform: translateY(-2px); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { transform: translateY(-2px); background: var(--ink-2); }
.btn svg { width: 16px; height: 16px; }
.btn-sm { padding: 10px 18px; font-size: 0.9rem; }

/* ---------- Hero ---------- */
.hero {
  padding: clamp(60px, 8vw, 100px) 0 clamp(60px, 9vw, 120px);
  position: relative; overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  align-items: center; gap: 60px;
}
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  margin-bottom: 22px;
}
.hero .lead { max-width: 560px; margin-bottom: 32px; font-size: clamp(1.1rem, 1.5vw, 1.28rem); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }

/* Risk-reversal / reassurance line under a CTA */
.trust-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  list-style: none; padding: 0; margin: 0 0 32px;
  font-size: 0.86rem; color: var(--gray-500); font-weight: 600;
}
.trust-line li { display: flex; align-items: center; gap: 7px; }
.trust-line li svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--purple); }
.trust-line.on-dark { color: rgba(255, 255, 255, 0.78); justify-content: center; }
.trust-line.on-dark li svg { color: var(--pink); }
.trust-line.centered { justify-content: center; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 22px 32px; align-items: center;
  color: var(--gray-700); font-size: 0.92rem;
}
.hero-meta .stat { display: flex; flex-direction: column; }
.hero-meta .stat strong {
  font-size: 1.6rem; font-weight: 800; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1;
}
.hero-meta .stat span { font-size: 0.82rem; color: var(--gray-500); margin-top: 4px; }

/* Hero visual — layered organic blobs */
.hero-visual {
  position: relative; aspect-ratio: 1 / 1; max-width: 560px; justify-self: end;
}
.blob {
  position: absolute; border-radius: 50%; filter: blur(0.5px);
  animation: float 9s ease-in-out infinite;
}
.blob-1 { width: 60%; height: 60%; left: 10%; top: 6%; background: var(--grad-brand); }
.blob-2 { width: 45%; height: 45%; right: 0; top: 28%; background: var(--grad-cool); animation-delay: -3s; }
.blob-3 { width: 35%; height: 35%; left: 18%; bottom: 4%; background: var(--grad-warm); animation-delay: -6s; }
.blob-4 {
  width: 28%; height: 28%; right: 18%; bottom: 12%;
  background: linear-gradient(135deg, #FFD56A, var(--pink));
  animation-delay: -1.5s;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-14px) rotate(2deg); }
}
.hero-card {
  position: absolute; padding: 14px 18px;
  background: var(--white); border-radius: 18px;
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 12px;
  font-size: 0.85rem; font-weight: 600; color: var(--ink);
  z-index: 2;
}
.hero-card .dot {
  width: 36px; height: 36px; border-radius: 12px;
  display: grid; place-items: center; color: var(--white);
}
.hero-card-1 { top: 10%; left: -6%; animation: float 7s ease-in-out infinite; }
.hero-card-1 .dot { background: var(--grad-brand); }
.hero-card-2 { bottom: 20%; left: -10%; animation: float 8s ease-in-out -2s infinite; }
.hero-card-2 .dot { background: var(--grad-cool); }
.hero-card-3 { top: 38%; right: -8%; animation: float 9s ease-in-out -4s infinite; }
.hero-card-3 .dot { background: var(--grad-warm); }

/* Hero background flourishes */
.hero::before, .hero::after {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  border-radius: 50%; filter: blur(60px); opacity: 0.35;
}
.hero::before { width: 380px; height: 380px; top: -120px; left: -120px; background: var(--pink); }
.hero::after { width: 460px; height: 460px; bottom: -180px; right: -160px; background: var(--purple); }

/* ---------- Press logos strip ---------- */
.press {
  padding: 40px 0; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100);
  background: var(--white);
}
.press-label {
  text-align: center; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray-500); margin-bottom: 22px;
}
.press-grid {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
.press-grid img {
  height: 38px; width: auto; max-width: 140px; object-fit: contain;
  filter: grayscale(1); opacity: 0.55;
  transition: filter 0.2s var(--ease), opacity 0.2s var(--ease);
}
.press-grid img:hover { filter: grayscale(0); opacity: 1; }

/* ---------- Service cards ---------- */
.services { background: var(--gray-50); }
.service-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
}
.service-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 36px; display: flex; gap: 28px; align-items: flex-start;
  border: 1px solid var(--gray-100);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  position: relative; overflow: hidden;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.service-card .service-img {
  flex: 0 0 130px; width: 130px; height: 130px;
  border-radius: 24px; overflow: hidden;
  background: var(--pink-soft);
  display: grid; place-items: center;
}
.service-card .service-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.service-body { flex: 1; }
.service-body h3 { margin-bottom: 8px; }
.service-body p { margin-bottom: 14px; font-size: 0.97rem; }
/* Platform list. Was a row of grey rounded pills — same template tell as the old
   eyebrow badge. Now a plain separated text line. */
.service-tags {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 8px; margin-top: 4px;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gray-500);
}
.service-tags span { display: inline-flex; align-items: center; gap: 8px; }
.service-tags span + span::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--gray-300);
}
.service-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-weight: 700; font-size: 0.92rem; color: var(--purple);
  min-height: 44px;
}
.service-link svg { width: 15px; height: 15px; transition: transform 0.18s var(--ease); }
.service-link:hover svg { transform: translateX(3px); }

/* ---------- Pricing / Packages ---------- */
.packages { background: var(--paper); position: relative; }
.package-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-items: stretch;
}
.package {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 36px 32px; border: 1px solid var(--gray-100);
  display: flex; flex-direction: column;
  position: relative;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.package:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.package-name {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gray-500);
  margin-bottom: 14px;
}
.package-tag {
  font-size: 1.85rem; font-weight: 800; color: var(--ink);
  letter-spacing: -0.02em; margin-bottom: 8px; line-height: 1;
}
.package-price {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 8px; color: var(--ink);
}
.package-price .amount { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; }
.package-price .period { font-size: 0.95rem; color: var(--gray-500); font-weight: 600; }
.package-blurb { font-size: 0.95rem; color: var(--gray-700); margin-bottom: 24px; min-height: 48px; }
.package-features {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.package-features li {
  display: flex; gap: 10px; font-size: 0.94rem; color: var(--gray-900);
  align-items: flex-start; line-height: 1.4;
}
.package-features svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: var(--purple); }
.package .btn { width: 100%; margin-top: auto; }
.package-note {
  margin: 12px 0 0; text-align: center;
  font-size: 0.78rem; color: var(--gray-500); line-height: 1.4;
}
.package.featured .package-note { color: rgba(255, 255, 255, 0.65); }

.package.featured {
  background: var(--grad-dark); color: var(--white);
  border-color: transparent;
  transform: translateY(-12px);
  box-shadow: 0 30px 60px -20px rgba(149, 0, 255, 0.4);
}
.package.featured:hover { transform: translateY(-16px); box-shadow: 0 36px 70px -20px rgba(149, 0, 255, 0.5); }
.package.featured .package-name { color: #C8B5FF; }
.package.featured .package-tag,
.package.featured .package-price { color: var(--white); }
.package.featured .package-blurb { color: rgba(255, 255, 255, 0.78); }
.package.featured .package-features li { color: rgba(255, 255, 255, 0.9); }
.package.featured .package-features svg { color: var(--pink); }
.package.featured .badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--grad-brand); color: var(--white);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Testimonials ---------- */
.testimonials { background: linear-gradient(180deg, var(--paper), #F8F0FA); }
.testimonial-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.testimonial {
  background: var(--white); border-radius: var(--radius);
  padding: 32px; border: 1px solid var(--gray-100);
  display: flex; flex-direction: column; gap: 20px;
}
.testimonial .quote { font-size: 1.02rem; color: var(--ink-2); line-height: 1.55; margin: 0; }
.testimonial .quote::before { content: "“"; font-size: 2.6rem; line-height: 0; vertical-align: -16px; color: var(--pink); margin-right: 4px; }
.testimonial .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testimonial .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-brand); color: var(--white);
  display: grid; place-items: center; font-weight: 700; font-size: 1rem;
}
.testimonial .who-name { font-weight: 700; color: var(--ink); font-size: 0.94rem; }
.testimonial .who-role { font-size: 0.84rem; color: var(--gray-500); }
.testimonial-stars { display: flex; gap: 2px; color: #F7B500; }
.testimonial-stars svg { width: 16px; height: 16px; }

/* ---------- Process ---------- */
.process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  counter-reset: step;
}
.step {
  background: var(--white); border-radius: var(--radius);
  padding: 32px 28px; border: 1px solid var(--gray-100);
  position: relative;
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block; font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.18em; margin-bottom: 18px;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Was `.step h4`. The Process cards on index.html used <h4> directly under an <h2>,
   skipping a heading level; they are <h3> now. Visual result is identical. */
.step h3 { margin-bottom: 8px; font-size: 1.15rem; }
.step p { font-size: 0.93rem; margin: 0; color: var(--gray-700); }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--grad-dark);
  color: var(--white); position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 72px);
  margin: clamp(40px, 6vw, 80px) 0;
}
.cta-banner::before, .cta-banner::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5;
}
.cta-banner::before { width: 360px; height: 360px; left: -100px; top: -120px; background: var(--pink); }
.cta-banner::after { width: 360px; height: 360px; right: -100px; bottom: -120px; background: var(--purple); }
.cta-banner-inner {
  position: relative; display: grid;
  grid-template-columns: 1fr auto; align-items: center; gap: 32px;
}
.cta-banner h2 { color: var(--white); margin: 0 0 10px; }
.cta-banner p { color: rgba(255, 255, 255, 0.78); margin: 0; max-width: 540px; }
.cta-banner .btn-primary { background: var(--white); color: var(--ink); box-shadow: none; }
.cta-banner .btn-primary:hover { background: var(--pink-soft); color: var(--magenta); }

/* ---------- About sections ---------- */
.about-hero { padding: clamp(60px, 8vw, 100px) 0 60px; }
.about-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 60px; align-items: center;
}
/* Mirrored variant — replaces the old `direction: rtl` hack.
   Falls back to text-first on small screens. */
.about-grid.reverse > *:last-child { order: -1; }
.about-portrait {
  position: relative; aspect-ratio: 4/5; max-width: 460px; justify-self: center;
}
.about-portrait .shape {
  position: absolute; inset: 8% 8% 8% 8%;
  background: var(--grad-brand); border-radius: 60% 40% 60% 40% / 50% 60% 40% 50%;
  animation: morph 11s ease-in-out infinite;
}
.about-portrait img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain;
}
@keyframes morph {
  0%, 100% { border-radius: 60% 40% 60% 40% / 50% 60% 40% 50%; }
  50% { border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%; }
}

.values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.value {
  padding: 36px 32px; background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--gray-100);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.value:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.value .icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center; color: var(--white);
  margin-bottom: 20px;
}
.value:nth-child(1) .icon { background: var(--grad-brand); }
.value:nth-child(2) .icon { background: var(--grad-cool); }
.value:nth-child(3) .icon { background: var(--grad-warm); }
.value h3 { margin-bottom: 8px; }
.value p { margin: 0; font-size: 0.96rem; }

/* ---------- Contact / Intake form ---------- */
.intake {
  background: var(--paper); padding: clamp(60px, 8vw, 100px) 0;
}
.intake-grid {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px;
  align-items: start;
}
.intake-aside {
  position: sticky; top: 110px;
  padding: 36px; border-radius: var(--radius-lg);
  background: var(--grad-dark); color: var(--white);
  overflow: hidden; position: relative;
}
.intake-aside h2 { color: var(--white); }
.intake-aside p { color: rgba(255, 255, 255, 0.8); }
.intake-aside ul { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.intake-aside ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; color: rgba(255, 255, 255, 0.92); }
.intake-aside ul li svg { width: 18px; height: 18px; color: var(--pink); flex: 0 0 18px; margin-top: 2px; }
.intake-aside .contact-line { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); }
.intake-aside .contact-line strong { color: var(--white); display: block; margin-bottom: 4px; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }

.intake-form {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 40px; border: 1px solid var(--gray-100);
  box-shadow: var(--shadow-sm);
}
.steps-bar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 28px;
}
.steps-bar .step-pill {
  flex: 1; height: 6px; border-radius: 999px; background: var(--gray-100);
  transition: background 0.3s var(--ease);
}
.steps-bar .step-pill.active { background: var(--grad-brand); }
.step-meta { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--gray-500); margin-bottom: 14px; }
.step-meta strong { color: var(--ink); }
.form-step { display: none; }
.form-step.active { display: block; animation: fadeIn 0.3s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 0.92rem; color: var(--ink); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid var(--gray-100); background: var(--gray-50);
  font: inherit; color: var(--ink); transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--purple); background: var(--white); outline: none;
  box-shadow: 0 0 0 3px rgba(149, 0, 255, 0.18);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--magenta); background: var(--pink-soft);
}
.field textarea { resize: vertical; min-height: 120px; }
.field .hint { display: block; font-weight: 500; font-size: 0.82rem; color: var(--gray-500); margin: -4px 0 8px; }

/* Grouped inputs (radio / checkbox sets) */
.field-group { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.field-group > legend {
  display: block; font-weight: 600; font-size: 0.92rem;
  color: var(--ink); margin-bottom: 8px; padding: 0;
}

/* Inline validation message */
.form-error {
  display: none; align-items: center; gap: 8px; margin-top: 14px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--pink-soft); color: #B01E63;
  font-size: 0.9rem; font-weight: 600;
}
.form-error.show { display: flex; }
/* Multi-line variant used for the "form is not connected / send did not go through"
   fallback, which is a sentence plus an action link rather than a one-line error.
   `.show.form-error-block` beats `.form-error.show` on specificity, so the block
   display wins without !important. */
.form-error.show.form-error-block {
  display: block; line-height: 1.5; font-weight: 500; padding: 16px 18px;
}
.form-error .form-error-action {
  display: inline-flex; align-items: center; margin-top: 12px;
  padding: 11px 16px; border-radius: 10px;
  background: var(--grad-brand); color: var(--white);
  font-weight: 700; font-size: 0.9rem; text-decoration: none;
  min-height: 44px; box-sizing: border-box;
}
.form-error .form-error-action:hover { filter: brightness(1.08); }
.form-error .form-error-action:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.option-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.option {
  position: relative; cursor: pointer;
  padding: 16px; border: 1.5px solid var(--gray-100); border-radius: 14px;
  background: var(--gray-50); display: flex; gap: 10px; align-items: flex-start;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.option:hover { border-color: var(--purple); }
/* The real input is visually hidden, so surface its focus ring on the wrapper. */
.option:focus-within { outline: 3px solid var(--purple); outline-offset: 2px; border-color: var(--purple); }
.option:has(input:checked) { border-color: var(--purple); background: var(--white); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option .check {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--gray-300);
  display: grid; place-items: center; flex: 0 0 20px; margin-top: 2px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.option .check svg { width: 14px; height: 14px; color: var(--white); opacity: 0; }
.option input:checked ~ .check {
  background: var(--grad-brand); border-color: transparent;
}
.option input:checked ~ .check svg { opacity: 1; }
.option input:checked ~ .opt-label { color: var(--ink); font-weight: 700; }
.option .opt-label { font-size: 0.94rem; color: var(--gray-900); flex: 1; }
.option input:checked + .check + .opt-label { color: var(--ink); }

.step-actions {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 28px;
}
.step-actions .btn-back { background: transparent; color: var(--gray-700); padding: 14px 18px; }
.step-actions .btn-back:hover { color: var(--ink); }
.success-card {
  text-align: center; padding: 32px 20px;
}
.success-card .check-circle {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--grad-brand); color: var(--white);
  display: grid; place-items: center; margin: 0 auto 20px;
}
.success-card h3 { margin-bottom: 10px; }
.success-card p { color: var(--gray-700); }

/* ---------- Page hero (smaller, used on inner pages) ---------- */
.page-hero {
  padding: 60px 0 40px; text-align: center; position: relative; overflow: hidden;
}
.page-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); margin-bottom: 16px; }
.page-hero p { max-width: 620px; margin: 0 auto; font-size: 1.1rem; }
.page-hero::before, .page-hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.18; z-index: -1;
}
.page-hero::before { width: 320px; height: 320px; top: -100px; left: -80px; background: var(--pink); }
.page-hero::after { width: 320px; height: 320px; bottom: -160px; right: -80px; background: var(--purple); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink); color: rgba(255, 255, 255, 0.7);
  padding: 64px 0 28px; margin-top: 60px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-brand img { height: 48px; width: auto; margin-bottom: 18px; }
/* No brightness/invert filter here. It used to flatten the whole wordmark to solid
   white, killing the magenta-to-purple AD. assets/images/logo-footer-onbrand.png is
   built for dark backgrounds already: white lettering, gradient AD intact. */
.footer-brand p { color: rgba(255, 255, 255, 0.6); font-size: 0.94rem; max-width: 320px; }
.footer-col h4 { color: var(--white); font-size: 0.92rem; letter-spacing: 0.06em; margin-bottom: 16px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.94rem; }
.footer-col a:hover { color: var(--pink); }
.footer-newsletter form { display: flex; gap: 8px; }
.footer-newsletter input {
  flex: 1; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06); color: var(--white); font: inherit;
}
.footer-newsletter input::placeholder { color: rgba(255, 255, 255, 0.62); }
.footer-newsletter input:focus { outline: none; border-color: var(--pink); }
.footer-newsletter button {
  background: var(--grad-brand); color: var(--white);
  padding: 12px 18px; border-radius: 10px; font-weight: 700; font-size: 0.9rem;
}
/* Status line under the footer subscribe box. Empty and hidden until script.js fills
   it in, so it takes no vertical space in the default state and the footer grid is
   unchanged. Replaces the old fake "Subscribed ✓" button label. */
.newsletter-note {
  display: none; margin: 12px 0 0;
  font-size: 0.85rem; line-height: 1.5; color: rgba(255, 255, 255, 0.6);
}
.newsletter-note.show { display: block; }
.newsletter-note a { color: var(--pink); text-decoration: underline; }
.social {
  display: flex; gap: 10px; margin-top: 16px;
}
.social a {
  width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.06);
  display: grid; place-items: center; color: var(--white); transition: background 0.2s var(--ease);
}
.social a:hover { background: var(--grad-brand); }
.social a svg { width: 18px; height: 18px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; font-size: 0.84rem; color: rgba(255, 255, 255, 0.5);
  flex-wrap: wrap; gap: 16px;
}
.footer-bottom .legal-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--pink); }
.footer-bottom, .footer-bottom a { color: rgba(255, 255, 255, 0.62); }

/* ---------- Stats strip ---------- */
.stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding: 60px; background: var(--grad-dark); color: var(--white);
  border-radius: var(--radius-lg); position: relative; overflow: hidden;
}
.stats-strip::after {
  content: ""; position: absolute; right: -120px; bottom: -120px;
  width: 320px; height: 320px; border-radius: 50%; background: var(--pink); filter: blur(100px); opacity: 0.4;
}
.stats-strip .stat strong {
  display: block; font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 800;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; line-height: 1;
}
.stats-strip .stat span { font-size: 0.9rem; color: rgba(255, 255, 255, 0.65); margin-top: 8px; display: block; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--gray-100); padding: 22px 0;
}
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 16px; font-weight: 700; color: var(--ink); font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.6rem; color: var(--purple); transition: transform 0.2s var(--ease);
  flex: 0 0 auto;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 12px 0 0; color: var(--gray-700); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; padding: 16px; background: var(--white);
    border-bottom: 1px solid var(--gray-100); box-shadow: var(--shadow-sm);
    gap: 4px;
  }
  .nav-links.open a { padding: 14px; min-height: 48px; display: flex; align-items: center; }
  .nav-cta-mobile { display: block; margin-top: 8px; }
  .nav-cta-mobile .btn { width: 100%; min-height: 52px; }
  .nav-links.open .nav-cta-mobile a { color: var(--white); justify-content: center; }
  .nav-links.open .nav-cta-mobile a:hover { background: var(--grad-brand); color: var(--white); }
  .nav-toggle { display: inline-flex; }
  .nav-actions .btn:not(.nav-toggle) { display: none; }
  .hero-grid, .about-grid, .intake-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-grid.reverse > *:last-child { order: 0; }
  .hero-visual { max-width: 420px; margin: 0 auto; justify-self: center; }
  .service-grid, .package-grid, .testimonial-grid, .values-grid, .process-grid,
  .stats-strip, .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .package.featured { transform: none; }
  .package.featured:hover { transform: translateY(-4px); }
  .cta-banner-inner { grid-template-columns: 1fr; text-align: center; }
  .cta-banner-inner .btn { justify-self: center; }
  .intake-aside { position: static; }
}
@media (max-width: 640px) {
  .nav-actions .btn { display: none; }
  .service-card { flex-direction: column; }
  .service-card .service-img { width: 100%; height: 180px; flex: 0 0 auto; }
  .service-grid, .package-grid, .testimonial-grid, .values-grid, .process-grid,
  .stats-strip, .footer-grid { grid-template-columns: 1fr; }
  .stats-strip { padding: 36px; }
  .option-grid { grid-template-columns: 1fr; }
  .intake-form { padding: 28px 22px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  /* Larger tap targets on touch screens */
  .footer-col ul { gap: 2px; }
  .footer-col ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .legal-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .btn { min-height: 48px; }
  .step-actions { flex-wrap: wrap; }
  .step-actions .btn { flex: 1 1 auto; }
  .faq-item summary { min-height: 44px; }
}

/* =========================================================
   Direction A additions (hero photo + work-product previews)
   ========================================================= */

/* ---------- Hero banner ----------
   The brand artwork, uncropped, directly beneath the sticky nav.

   It is a finished composition: the ADbundance wordmark and the "Experiences of
   Prosperity" tagline are painted into the image near its edges. Any fixed height
   with object-fit:cover cuts that type off, so height stays auto and the image
   always renders at its natural 16:9 ratio.

   The image is capped at --maxw and centred, with the brand gradient filling the
   margins on wider screens. Uncapped it would be ~1080px tall on a 1920 display,
   which buries the headline and both CTAs below the fold. */
.hero-banner {
  padding: 0;
  background: var(--grad-brand);
  line-height: 0;
  display: flex;
  justify-content: center;
}
.hero-banner img {
  width: 100%;
  max-width: var(--maxw);
  height: auto;
  display: block;
}

/* With a banner above it the hero no longer needs its own big top padding,
   and the decorative blurred blobs behind it fight the image. */
.hero.has-banner { padding-top: clamp(44px, 5vw, 72px); }
.hero.has-banner::before, .hero.has-banner::after { display: none; }

/* ---------- Hero right column: ad mockup ---------- */
.hero-visual.work {
  aspect-ratio: auto;
  display: flex; align-items: center; justify-content: center;
  max-width: 460px;
}
.ad-mockup {
  width: 100%; max-width: 340px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 34px 60px -24px rgba(15, 18, 22, 0.28);
}
.ad-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.ad-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--grad-brand); flex: 0 0 34px;
}
.ad-who { display: flex; flex-direction: column; line-height: 1.25; }
.ad-who b { font-size: 0.86rem; font-weight: 700; color: var(--ink); }
.ad-who small { font-size: 0.72rem; color: var(--gray-500); }
.ad-media {
  aspect-ratio: 4 / 5;
  background: var(--grad-brand);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px; gap: 18px;
}
.ad-media-hed {
  color: var(--white); font-weight: 800;
  font-size: 1.24rem; line-height: 1.2; letter-spacing: -0.01em;
}
.ad-media-cta {
  background: var(--white); color: var(--purple);
  font-weight: 700; font-size: 0.84rem;
  padding: 9px 18px; border-radius: 8px;
}
.ad-actions { display: flex; gap: 14px; padding: 12px 14px 6px; color: var(--ink); }
.ad-actions svg { width: 21px; height: 21px; }
.ad-caption {
  margin: 0; padding: 0 14px 14px;
  font-size: 0.8rem; color: var(--gray-700); line-height: 1.45;
}
.ad-caption b { color: var(--ink); font-weight: 700; }

@media (max-width: 960px) {
  .hero-visual.work { max-width: 340px; margin: 0 auto; }
}
@media (max-width: 640px) {
}

/* Service preview (work-product mockups) */
.service-card .service-preview {
  flex: 0 0 200px; width: 200px; height: 220px;
  border-radius: 24px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; box-sizing: border-box;
  position: relative;
}
.service-card .service-preview.preview-pink { background: #FFEFF2; }
.service-card .service-preview.preview-purple { background: #F4E9FF; }
.service-card .service-preview.preview-blue { background: #E6F1FB; }
.service-card .service-preview.preview-warm { background: #FFF3EA; }

/* Mini phone mockup (Ads + Video previews) */
.mini-phone {
  width: 108px; height: 190px;
  background: #0F1216;
  border-radius: 20px; padding: 5px; box-sizing: border-box;
  box-shadow: 0 20px 30px -12px rgba(15, 18, 22, 0.35);
}
.mini-phone .screen {
  width: 100%; height: 100%; border-radius: 16px; overflow: hidden;
  background: white;
  display: flex; flex-direction: column;
}
.mini-phone .visual {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: white; text-align: center;
  padding: 8px; box-sizing: border-box;
  font-size: 10px; font-weight: 700; line-height: 1.2;
}
.mini-phone .visual .cta {
  background: white; color: var(--purple);
  font-size: 8px; font-weight: 700;
  padding: 4px 8px; border-radius: 5px;
  display: inline-block; margin-top: 8px;
}
.mini-phone .caption {
  padding: 6px 8px; font-size: 8px;
  color: #0F1216; background: white; font-weight: 500;
  border-top: 1px solid #ECEFF3;
}
.mini-phone .caption strong { font-weight: 700; }

/* Mini browser mockup (SEO preview) */
.mini-browser {
  width: 180px;
  background: white; border-radius: 10px;
  border: 1px solid #ECEFF3; overflow: hidden;
  box-shadow: 0 12px 24px -12px rgba(15, 18, 22, 0.2);
}
.mini-browser .bar {
  height: 18px; background: #F7F8FB;
  border-bottom: 1px solid #ECEFF3;
  display: flex; align-items: center; padding: 0 8px; gap: 4px;
}
.mini-browser .bar span {
  width: 5px; height: 5px; border-radius: 50%; background: #CDE0EC;
}
.mini-browser .body { padding: 10px; }
.mini-browser .search {
  background: #E6F1FB; padding: 4px 8px; border-radius: 4px;
  color: var(--blue); margin-bottom: 8px;
  font-weight: 600; font-size: 9px;
}
.mini-browser .result { margin-bottom: 6px; padding: 0; }
.mini-browser .result.top {
  background: #E6F1FB; padding: 6px; border-radius: 6px;
  border: 1px solid #B5D4F4; margin-bottom: 6px;
}
.mini-browser .result strong {
  color: var(--blue); display: block;
  font-size: 9px; font-weight: 700; margin-bottom: 2px;
}
.mini-browser .result small {
  color: var(--gray-500); font-size: 7.5px;
  display: block; line-height: 1.3;
}
.mini-browser .result.secondary strong { color: #464D5F; }

/* Mini review notification (Reputation preview) */
.mini-review {
  width: 175px; background: white; padding: 12px;
  border-radius: 14px; border: 1px solid #ECEFF3;
  box-shadow: 0 14px 24px -12px rgba(15, 18, 22, 0.15);
}
.mini-review .head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.mini-review .icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--pink), #FF8A4D);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 12px; font-weight: 800;
  flex: 0 0 28px;
}
.mini-review .head strong { font-size: 10px; font-weight: 700; }
.mini-review .head small { display: block; font-size: 8px; color: var(--gray-500); }
.mini-review .stars {
  color: #FFB800; font-size: 12px; letter-spacing: 2px;
  margin-bottom: 4px; line-height: 1;
}
.mini-review .quote {
  font-size: 8.5px; color: #0F1216; line-height: 1.4;
}

/* About-portrait variant: work-product mockups (used on services.html) */
.about-portrait.preview {
  aspect-ratio: 1/1; max-width: 460px;
  border-radius: 32px;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.about-portrait.preview.preview-pink { background: #FFEFF2; }
.about-portrait.preview.preview-purple { background: #F4E9FF; }
.about-portrait.preview.preview-blue { background: #E6F1FB; }
.about-portrait.preview.preview-warm { background: #FFF3EA; }
.about-portrait.preview .mini-phone { width: 200px; height: 360px; border-radius: 32px; padding: 8px; }
.about-portrait.preview .mini-phone .screen { border-radius: 26px; }
.about-portrait.preview .mini-phone .visual { font-size: 15px; padding: 16px; }
.about-portrait.preview .mini-phone .visual .cta { font-size: 12px; padding: 6px 12px; margin-top: 12px; }
.about-portrait.preview .mini-phone .caption { font-size: 11px; padding: 10px 12px; }
.about-portrait.preview .mini-browser { width: 320px; }
.about-portrait.preview .mini-browser .bar { height: 26px; padding: 0 12px; }
.about-portrait.preview .mini-browser .bar span { width: 8px; height: 8px; }
.about-portrait.preview .mini-browser .body { padding: 16px; }
.about-portrait.preview .mini-browser .search { font-size: 14px; padding: 6px 12px; }
.about-portrait.preview .mini-browser .result strong { font-size: 14px; }
.about-portrait.preview .mini-browser .result small { font-size: 11px; }
.about-portrait.preview .mini-review { width: 320px; padding: 20px; border-radius: 18px; }
.about-portrait.preview .mini-review .icon { width: 44px; height: 44px; font-size: 18px; flex: 0 0 44px; border-radius: 12px; }
.about-portrait.preview .mini-review .head strong { font-size: 15px; }
.about-portrait.preview .mini-review .head small { font-size: 12px; }
.about-portrait.preview .mini-review .stars { font-size: 18px; margin-bottom: 8px; }
.about-portrait.preview .mini-review .quote { font-size: 13px; }

/* Responsive tweaks for previews */
@media (max-width: 960px) {
  .service-card .service-preview { flex: 0 0 auto; width: 100%; height: 220px; }
}
@media (max-width: 640px) {
  .service-card .service-preview { height: 240px; }
}


/* ---------- Reveal-on-scroll (used by JS) ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* =========================================================
   MEDIA SECTIONS  (adopted 2026-08-31 from preview option B)

   HOW THIS WORKS — read before changing a background anywhere.

   A media section is three stacked layers:

     <section class="services media-section">
       <div class="media-layer">  image or looping video   </div>  z-index 0
       <div class="media-overlay"></div>                            z-index 1
       <div class="container"> ...content... </div>                 z-index 2
     </section>

   The OVERLAY is what makes the text readable, never the media. Footage and
   photography change brightness across the frame, across crops and across
   screen sizes; a scrim does not. Every overlay below sits between 74% and 82%
   opaque. Those numbers were set by compositing each real poster frame under
   its own overlay and checking body copy against it — at the 90%+ they started
   at, the footage was invisible and the bandwidth was being wasted. If you swap
   in brighter media and the text gets hard to read, raise the opacity here — do
   not darken the video, because the next clip you drop in will be wrong again.

   SWAPPING IN YOUR OWN MEDIA
   The files are named slots. Overwrite the file, keep the name, change nothing
   else. See MEDIA-GUIDE.md for the shopping list, sizes and encoding settings.
     assets/video/services.{mp4,webm} + services-poster.jpg
     assets/video/process.{mp4,webm}  + process-poster.jpg
     assets/video/cta.{mp4,webm}      + cta-poster.jpg
     assets/images/services-bg.jpg, pricing-bg.jpg, about-bg.jpg
   ========================================================= */

.media-section { position: relative; overflow: hidden; isolation: isolate; }
.media-layer {
  position: absolute; inset: 0; z-index: 0; line-height: 0;
  background-size: cover; background-position: center;
}
.media-layer img,
.media-layer video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.media-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.media-section > .container { position: relative; z-index: 2; }

/* Videos are added by script.js only when the section is near the viewport, so
   nothing downloads on a page the visitor never scrolls to. Anyone whose OS asks
   for reduced motion keeps the poster frame and no video is ever fetched. */
@media (prefers-reduced-motion: reduce) {
  .media-layer video { display: none; }
}

/* ---------- Services: brand gradient over media ---------- */
.services.media-section { background: transparent; }
.services .media-overlay {
  background: linear-gradient(120deg, rgba(242, 84, 159, 0.82) 0%, rgba(149, 0, 255, 0.82) 100%);
}
.services .media-layer img,
.services .media-layer video { filter: saturate(1.25) contrast(1.04); }
.services .section-head h2,
.services .section-head h2 .gradient-text {
  color: var(--white); -webkit-text-fill-color: var(--white); background: none;
}
.services .section-head p.lead { color: rgba(255, 255, 255, 0.88); }
.services .service-card {
  border-color: transparent;
  box-shadow: 0 26px 50px -24px rgba(26, 17, 48, 0.55);
}

/* ---------- Process: cool scrim over video, glass cards ---------- */
.process-section { background: transparent; }
.process-section .media-overlay {
  background: linear-gradient(120deg, rgba(84, 106, 234, 0.82) 0%, rgba(24, 139, 246, 0.78) 100%);
}
.process-section .section-head h2 { color: var(--white); }
.process-section .section-head p.lead { color: rgba(255, 255, 255, 0.88); }
.process-section .step {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.process-section .step h3 { color: var(--white); }
.process-section .step p { color: rgba(255, 255, 255, 0.82); }
.process-section .step::before {
  background: none; color: rgba(255, 255, 255, 0.65); -webkit-text-fill-color: rgba(255, 255, 255, 0.65);
}

/* ---------- Pricing: deep ink over media, frosted panels ---------- */
.packages.media-section { background: transparent; }
.packages .media-overlay {
  background:
    linear-gradient(140deg, rgba(26, 17, 48, 0.74) 0%, rgba(15, 18, 22, 0.78) 100%),
    radial-gradient(55% 60% at 15% 0%, rgba(149, 0, 255, 0.35), transparent 70%);
}
.packages .section-head h2,
.packages .section-head h2 .gradient-text {
  color: var(--white); -webkit-text-fill-color: var(--white); background: none;
}
.packages .section-head p.lead { color: rgba(255, 255, 255, 0.78); }
.packages .pricing-facts {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.22);
}
/* Card fill went 0.07 -> 0.13 and the blur 8px -> 14px when the pricing background
   changed from a near-black desk flat-lay to a warm, much brighter barbershop
   interior. The overlay was left alone deliberately: dulling the photo to protect
   the cards would waste the image. Protecting the cards directly is the better
   trade, and it holds up if you swap in something brighter still. */
.packages .pricing-fact {
  background: rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.packages .pricing-fact h3 { color: var(--white); }
.packages .pricing-fact p { color: rgba(255, 255, 255, 0.80); }
.packages .pricing-cta p { color: rgba(255, 255, 255, 0.85); }
.packages .trust-line { color: rgba(255, 255, 255, 0.75); }
.packages .trust-line li svg { color: var(--pink); }

/* ---------- Closing CTA: full brand colour over video ---------- */
.cta-section .media-overlay {
  background: linear-gradient(120deg, rgba(232, 51, 138, 0.80) 0%, rgba(149, 0, 255, 0.78) 100%);
}
.cta-section .cta-banner { background: transparent; }
.cta-section .cta-banner::before,
.cta-section .cta-banner::after { display: none; }
.cta-section .cta-banner p { color: rgba(255, 255, 255, 0.90); }

/* =========================================================
   Portfolio (portfolio.html)
   Screenshot-led. The image is the claim, so it gets the space and the
   whole tile is a link to the live site — a prospect checking the work
   should never have to hunt for the URL.
   ========================================================= */
.work-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
}
.work-card {
  background: var(--white); border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.work-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.work-shot {
  display: block; background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
  overflow: hidden;
}
.work-shot img {
  width: 100%; height: auto; display: block;
  transition: transform 0.5s var(--ease);
}
.work-card:hover .work-shot img { transform: scale(1.03); }
.work-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.work-body h3 { margin-bottom: 6px; }
.work-body p { font-size: 0.95rem; margin-bottom: 14px; }
.work-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
  margin-bottom: 14px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gray-500);
}
.work-tags span { display: inline-flex; align-items: center; gap: 8px; }
.work-tags span + span::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--gray-300);
}
.work-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto;
  font-weight: 700; font-size: 0.92rem; color: var(--purple); min-height: 44px;
}
.work-link svg { width: 15px; height: 15px; transition: transform 0.18s var(--ease); }
.work-link:hover svg { transform: translate(2px, -2px); }

/* Video reel grid.
   Nine real edits, six vertical and three landscape. Rather than forcing one aspect
   ratio and cropping half of them, each <video> keeps its own intrinsic ratio and the
   landscape ones span two columns. That is why the markup carries width/height — the
   browser reserves the right box before the poster loads, so the grid does not jump. */
/* Four columns, not three. Only the four vertical reels are shown at the moment,
   and three columns left one orphaned on a second row. The reel--wide span-2 rule
   below still behaves if the landscape reels are un-hidden later. */
.reel-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; align-items: start;
}
.reel {
  margin: 0; background: var(--ink); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 22px 44px -22px rgba(26, 17, 48, 0.55);
}
.reel--wide { grid-column: span 2; }
.reel video {
  width: 100%; height: auto; display: block; background: var(--ink);
}
.reel figcaption {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 10px 14px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.75);
}
.reel-dur {
  font-variant-numeric: tabular-nums; font-weight: 600;
  background: rgba(255, 255, 255, 0.12); padding: 3px 9px; border-radius: 999px;
}

/* =========================================================
   FAQ page (faq.html)
   Grouped so 13 questions do not read as one undifferentiated wall.
   ========================================================= */
.faq-page { max-width: 820px; margin: 0 auto; }
.faq-group + .faq-group { margin-top: 52px; }
.faq-group > h2 {
  font-size: 1.4rem; margin-bottom: 6px;
  padding-bottom: 14px; border-bottom: 2px solid var(--gray-100);
}
.faq-page .faq-item summary { padding-right: 8px; }

@media (max-width: 1100px) {
  .reel-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .work-grid { grid-template-columns: 1fr; }
  .reel-grid { grid-template-columns: repeat(2, 1fr); }
  .reel--wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .reel-grid { grid-template-columns: 1fr; }
  .reel--wide { grid-column: span 1; }
  .work-body { padding: 22px 22px 24px; }
}