/* ============================================================
   Mandarine Marketing Agency — Design tokens
   Palette + type locked per Brand DNA doc. Do not modify values
   without checking the brand doc's color/type rule cards.
   ============================================================ */
:root {
  /* Primary palette */
  --rust: #C06C38;
  --rust-dark: #a3592c;
  --charcoal: #333333;
  --porcelain: #FAF9F6;

  /* Secondary palette */
  --sage: #48B5A6;
  --sand: #E6DCCA;
  --sand-logo: #efd8af;

  /* Semantic */
  --bg: var(--porcelain);
  --text: var(--charcoal);
  --text-on-dark: var(--porcelain);
  --text-muted: #5f5b54;
  --border: #e4ddd1;

  /* Type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --radius: 14px;
  --radius-sm: 8px;
  --container: 1200px;

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

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--rust);
  color: var(--porcelain);
  padding: var(--space-2) var(--space-3);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--sage);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}
h1 { font-size: clamp(2.4rem, 5vw + 1rem, 3.75rem); line-height: 1.08; }
h2 { font-size: clamp(1.9rem, 3vw + 1rem, 2.75rem); line-height: 1.15; }
h3 { font-size: 1.25rem; line-height: 1.35; font-weight: 600; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 var(--space-2);
}
.rust-text { color: var(--rust); }

.section__sub {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 46ch;
  margin-top: var(--space-2);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
  min-height: 44px;
  white-space: nowrap;
}
.btn--primary {
  background: var(--rust);
  color: var(--porcelain);
  box-shadow: 0 6px 20px -8px rgba(192, 108, 56, 0.55);
}
.btn--primary:hover {
  background: var(--rust-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -8px rgba(192, 108, 56, 0.65);
}
.btn--sm { padding: 0.7rem 1.3rem; font-size: 0.75rem; }
.btn--lg { padding: 1.15rem 2.25rem; font-size: 0.9rem; }

/* ============================================================
   Footer logo lockup (small brand mark, reused from the old nav)
   ============================================================ */
.footer__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.footer__logo-full {
  width: clamp(150px, 12vw, 210px);
  height: auto;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.25));
}

/* ============================================================
   Bottom nav — minimal floating pill bar
   ============================================================ */
.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem;
  background: rgba(250, 249, 246, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  box-shadow: 0 14px 34px -12px rgba(51, 51, 51, 0.3);
}
.bottom-nav a {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--charcoal);
  white-space: nowrap;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.bottom-nav a:hover { color: var(--rust); }
.bottom-nav a.is-active {
  background: var(--rust);
  color: var(--porcelain);
}
@media (max-width: 720px) {
  .bottom-nav {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 16px;
    transform: none;
    overflow-x: auto;
    max-width: calc(100% - 1.5rem);
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .bottom-nav::-webkit-scrollbar { display: none; }
  .bottom-nav a { padding: 0.6rem 0.85rem; font-size: 0.74rem; }
}

/* ============================================================
   Hero — light, moody editorial backdrop + AI phone mockup
   ============================================================ */
.hero {
  position: relative;
  color: var(--charcoal);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: calc(var(--space-6) + 96px) 0 calc(var(--space-7) + 90px);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
}
.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 48%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: none;
}
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   Sitewide pinned logo — fixed on every page (not just in a hero), with
   its own frosted-glass backing so it stays legible over any photo, video,
   or busy background scrolling underneath it.
   ============================================================ */
.qw2-topbar {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: rgba(250, 249, 246, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(51, 51, 51, 0.3);
  /* Force its own GPU compositing layer so it doesn't get dragged into the
     same repaint as the rest of the page while scrolling — pages with
     several autoplay videos (e.g. QuickWins) can otherwise make a fixed
     element visibly lag/swim mid-scroll before it snaps back into place. */
  transform: translateZ(0);
  will-change: transform;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.qw2-topbar img { width: 138px; height: auto; display: block; }

/* Fades out once the page has scrolled past the initial view, so the fixed
   logo is never on screen at the same time as content scrolling underneath
   it — avoids any visual collision with headlines/images further down the
   page — then fades back in once you're back near the top. */
.qw2-topbar--hidden {
  opacity: 0;
  transform: translateY(-8px) translateZ(0);
  pointer-events: none;
}

/* Homepage variant — original plain mark (no pill backing), just pinned
   instead of scrolling away with the hero. A drop-shadow substitutes for
   the pill's contrast insurance here, since the hero's own dark scrim
   already keeps the logo legible without one. */
.qw2-topbar--plain {
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}
.qw2-topbar--plain img {
  filter: drop-shadow(0 1px 2px rgba(51, 51, 51, 0.25)) drop-shadow(0 4px 14px rgba(51, 51, 51, 0.18));
}

.hero__inner {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0 clamp(24px, 5vw, 110px);
}
.hero__copy { max-width: clamp(260px, 20vw, 420px); }
.hero__headline {
  color: var(--charcoal);
  font-size: clamp(2rem, 3.4vw + 0.6rem, 3.1rem);
}
.hero__subhead {
  margin-top: var(--space-3);
  font-size: 1.05rem;
  color: var(--text-muted);
}
.hero__actions { margin-top: var(--space-4); }
.hero__note {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .hero__scrim {
    background: linear-gradient(
      180deg,
      rgba(250, 249, 246, 0.35) 0%,
      rgba(250, 249, 246, 0.9) 55%,
      rgba(250, 249, 246, 0.97) 100%
    );
  }
}

/* ============================================================
   Sections
   ============================================================ */
.section { padding: var(--space-7) 0; }
.section--sand { background: var(--sand); }

.section__head { max-width: 640px; margin: 0 auto var(--space-6); text-align: center; }
.section__head--left { text-align: left; margin: 0 0 var(--space-5); }
.section__head--left .section__sub { max-width: 52ch; }

/* ============================================================
   Cards — Services / Quick Wins
   ============================================================ */
.cards {
  display: grid;
  gap: var(--space-3);
}
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--porcelain);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(51,51,51,0.18);
}
.section--sand .card { background: var(--porcelain); }

.card__label {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: var(--space-1);
}
.card__title { margin-bottom: var(--space-2); }
.card__copy { color: var(--text-muted); font-size: 0.98rem; }
.card__price {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--charcoal);
}
.card__price--free { color: var(--sage); }
.card__price span { font-family: var(--font-body); font-weight: 400; font-size: 0.85rem; color: var(--text-muted); }

.card--compact { padding: var(--space-3); }
.card--compact .card__title { font-size: 1.1rem; }
.card--compact .card__copy { font-size: 0.92rem; }

@media (max-width: 980px) {
  .cards--3 { grid-template-columns: 1fr 1fr; }
  .cards--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cards--3, .cards--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   How It Works
   ============================================================ */
.how {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-6);
  align-items: center;
}
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}
.step__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--sage);
  line-height: 1;
}
.step__title { margin-bottom: var(--space-1); }
.step__copy { color: var(--text-muted); }

.how__media img {
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: 0 24px 50px -20px rgba(51,51,51,0.25);
}

@media (max-width: 900px) {
  .how { grid-template-columns: 1fr; }
  .how__media { max-width: 380px; margin: 0 auto; order: -1; }
}

/* ============================================================
   Why Mandarine
   ============================================================ */
.why {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: var(--space-6);
  align-items: center;
}
.why__media img {
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  box-shadow: 0 24px 50px -20px rgba(51,51,51,0.25);
}
.pillars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.pillar {
  padding: var(--space-3);
  background: var(--porcelain);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--rust);
}
.pillar h3 { margin-bottom: var(--space-1); }
.pillar p { color: var(--text-muted); font-size: 0.98rem; }

@media (max-width: 900px) {
  .why { grid-template-columns: 1fr; }
  .why__media { max-width: 320px; margin: 0 auto; }
}

/* ============================================================
   Social Proof (placeholder)
   ============================================================ */
.proof-card {
  position: relative;
  background: var(--sand);
  border: 1px dashed #c9bda2;
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: center;
}
.proof-card__badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--charcoal);
  color: var(--porcelain);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}
.proof-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #d9cfb8;
  margin: 0 auto var(--space-3);
}
.proof-card__lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: var(--space-3);
}
.proof-card__lines span {
  display: block;
  height: 10px;
  background: #d9cfb8;
  border-radius: 999px;
}
.proof-card__lines span.short { width: 60%; margin: 0 auto; }
.proof-card__name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* ============================================================
   Closing CTA band
   ============================================================ */
.cta-band {
  position: relative;
  background: var(--charcoal);
  color: var(--porcelain);
  padding: var(--space-7) 0;
  overflow: hidden;
  text-align: center;
}
.cta-band__texture {
  position: absolute;
  inset: 0;
  background-image: url('../assets/img/texture-dark-gold.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.14;
}
@supports (background-image: url('../assets/img/texture-dark-gold.avif')) {
  .cta-band__texture { background-image: url('../assets/img/texture-dark-gold.avif'); }
}
.cta-band__inner { position: relative; }
.cta-band h2 { color: var(--porcelain); max-width: 16ch; margin: 0 auto; }
.cta-band p {
  margin-top: var(--space-3);
  font-size: 1.15rem;
  color: #d8d4cc;
}
.cta-band .btn { margin-top: var(--space-4); }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--charcoal);
  color: #cfc9bd;
  padding: var(--space-6) 0 var(--space-3);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer__tagline {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
}
.footer__col h3 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--porcelain);
  margin-bottom: var(--space-2);
}
.footer__col p { margin-bottom: 0.6rem; font-size: 0.95rem; }
.footer__col a:hover { color: var(--rust); }

.footer__col--nav { grid-column: span 2; }
.footer__nav-cols {
  display: flex;
  gap: var(--space-5);
}

.footer__social { display: flex; gap: var(--space-2); }
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  transition: background 200ms var(--ease);
}
.social-icon svg { width: 18px; height: 18px; }
.social-icon:hover { background: var(--rust); }

.footer__bottom {
  padding-top: var(--space-3);
  font-size: 0.82rem;
  color: #8f8a80;
}

@media (max-width: 860px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; margin-bottom: var(--space-2); }
}
@media (max-width: 500px) {
  .footer__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Responsive type/section rhythm
   ============================================================ */
@media (max-width: 640px) {
  .section { padding: var(--space-6) 0; }
  .hero { padding-top: calc(76px + var(--space-5)); padding-bottom: var(--space-6); }
}

/* ============================================================
   Ghost button (used on dark / photo sections)
   ============================================================ */
.btn--ghost {
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
  opacity: 0.85;
}
.btn--ghost:hover { opacity: 1; transform: translateY(-2px); }

/* ============================================================
   Strategy summary — floating bubbles
   ============================================================ */
.strategy { padding-top: 48px; padding-bottom: 16px; }
.strategy .section__head { text-align: center; margin-bottom: 48px; }
.strategy .section__head .section__sub { max-width: 46ch; }

/* Crops the bubble field down to just its cluster's bounding box — the
   field's internal top/left percentages stay untouched so every bubble's
   relative position, size and touching neighbors are unaffected. Bubble
   size is a % of the field's WIDTH, but top/bottom placement is % of its
   HEIGHT — since the field is 3:2, a bubble's height in top-relative terms
   is its size% * 1.5, not size% (they're on different axes). */
.bubble-crop {
  position: relative;
  width: 100%;
  aspect-ratio: 2.05;
  overflow: hidden;
  margin: 24px 0 8px;
}

.bubble-field {
  position: absolute;
  top: -23%;
  left: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
}

.bubble-slot {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: var(--size);
  aspect-ratio: 1 / 1;
  will-change: transform, opacity;
}

.bubble-slot--label {
  z-index: 2;
}

.bubble-glass {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: bubble-bounce var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  background:
    radial-gradient(circle at 50% 102%, rgba(51,51,51,0.07), transparent 55%),
    radial-gradient(circle at 72% 74%, var(--tint-a), transparent 60%),
    rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow:
    inset 2px 3px 6px rgba(255,255,255,0.85),
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset -8px -12px 20px rgba(51,51,51,0.05),
    0 16px 28px -16px rgba(51,51,51,0.3),
    0 3px 8px rgba(51,51,51,0.06);
  backdrop-filter: blur(2px) saturate(1.05);
  -webkit-backdrop-filter: blur(2px) saturate(1.05);
}
.bubble-glass::before {
  /* primary crescent highlight */
  content: "";
  position: absolute;
  top: 9%;
  left: 15%;
  width: 34%;
  height: 22%;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  filter: blur(2px);
  transform: rotate(-28deg);
}
.bubble-glass::after {
  /* secondary highlight */
  content: "";
  position: absolute;
  bottom: 22%;
  right: 24%;
  width: 12%;
  height: 8%;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  filter: blur(1.5px);
}

.bubble--sage { --tint-a: rgba(72,181,166,0.12); }
.bubble--rust { --tint-a: rgba(192,108,56,0.12); }
.bubble--mixed { --tint-a: rgba(140,150,165,0.1); }

.bubble--label {
  box-shadow:
    inset 2px 3px 6px rgba(255,255,255,0.85),
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset -10px -16px 24px rgba(51,51,51,0.06),
    0 26px 42px -18px rgba(51,51,51,0.32),
    0 4px 10px rgba(51,51,51,0.08);
}

@keyframes bubble-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(calc(var(--bounce, 10px) * -1)) scale(1.02, 0.98); }
  70% { transform: translateY(calc(var(--bounce, 10px) * 0.15)) scale(0.99, 1.01); }
}

.bubble__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.4vw + 0.5rem, 1.5rem);
  color: var(--charcoal);
  text-shadow: 0 1px 3px rgba(255,255,255,0.8);
  padding: 0 10%;
  line-height: 1.15;
}

.bubble--cta {
  --tint-a: rgba(140, 70, 30, 0.85);
  background:
    radial-gradient(circle at 50% 102%, rgba(51,51,51,0.15), transparent 55%),
    radial-gradient(circle at 72% 74%, var(--tint-a), transparent 68%),
    rgba(168, 88, 42, 0.68);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 250ms var(--ease), background 250ms var(--ease);
}
.bubble--cta .bubble__label { color: var(--porcelain); text-shadow: 0 1px 4px rgba(51,51,51,0.4); }
.bubble--cta .bubble__label {
  font-size: clamp(0.68rem, 0.9vw + 0.4rem, 1rem);
  padding: 0 8%;
}
.bubble--cta:hover {
  --tint-a: rgba(120, 58, 24, 0.9);
  background:
    radial-gradient(circle at 50% 102%, rgba(51,51,51,0.15), transparent 55%),
    radial-gradient(circle at 72% 74%, var(--tint-a), transparent 68%),
    rgba(150, 76, 34, 0.75);
  box-shadow:
    inset 2px 3px 6px rgba(255,255,255,0.85),
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset -10px -16px 24px rgba(51,51,51,0.06),
    0 30px 46px -16px rgba(192,108,56,0.4),
    0 4px 10px rgba(51,51,51,0.1);
}

.strategy__cta { text-align: center; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .bubble-glass { animation: none; }
  .bubble-slot { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Dark section variant (Discovery call)
   ============================================================ */
.section--dark {
  background: var(--charcoal);
  color: var(--porcelain);
}
.section--dark .eyebrow { color: var(--sand); }
.section--dark h2 { color: var(--porcelain); }
.section--dark .section__sub { color: rgba(250,249,246,0.72); }

.discovery { padding-top: 40px; }
/* Used on pages where this section opens the page (no hero above it) —
   the fixed topbar logo is still visible at scrollY 0, so the "Back to
   Home" link needs enough top clearance to clear it, same margin the
   sitewide hero sections reserve for it. */
.discovery--top { padding-top: calc(var(--space-6) + 64px); }
.discovery__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}
.discovery__head { max-width: 640px; }
.discovery__head .section__sub { margin-left: auto; margin-right: auto; }
.discovery__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
}

/* Marble background variant (Discovery call) */
.discovery--marble {
  position: relative;
  background: var(--porcelain) url("../assets/img/discovery-marble.jpg") center / cover no-repeat;
  overflow: hidden;
}
.discovery--marble::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%,
    rgba(250,249,246,0.35) 0%,
    rgba(250,249,246,0.65) 45%,
    rgba(250,249,246,0.92) 78%);
}
.discovery--marble .container { position: relative; z-index: 1; }

/* Studio Display mockup — silver aluminum chassis + stand, centered */
.discovery__display-stage {
  display: flex;
  justify-content: center;
  width: 100%;
  perspective: 1400px;
}
.mac-display {
  position: relative;
  width: 100%;
  max-width: 840px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
.mac-display__shadow {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -6%;
  height: 10%;
  background: radial-gradient(ellipse at center, rgba(51,51,51,0.3), transparent 72%);
  filter: blur(4px);
}
.mac-display__body {
  position: relative;
  aspect-ratio: 1.282;
  background: linear-gradient(150deg, #f2f2f4, #d7d7db 45%, #b9b9be 100%);
  border-radius: 22px;
  padding: 1.4%;
  box-shadow:
    0 50px 90px -30px rgba(51,51,51,0.4),
    0 12px 30px -10px rgba(51,51,51,0.25),
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(51,51,51,0.15);
}
.mac-display__bezel {
  position: relative;
  width: 100%;
  height: 100%;
  background: #050506;
  border-radius: 14px;
  padding: 1.6%;
}
.mac-display__camera {
  position: absolute;
  top: 0.9%;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
  z-index: 2;
}
.mac-display__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--porcelain);
  border-radius: 4px;
  overflow: hidden;
}
/* Rendered at a fixed "desktop" size so HubSpot's widget never needs its
   own internal scrollbar, then uniformly scaled (via JS) to exactly fill
   the visible screen at any display size. */
.mac-display__screen-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 780px;
  transform-origin: top left;
}
.mac-display__screen-inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Studio Display stand — thin column + tilt hinge + flat foot */
.mac-display__stand {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mac-display__stand-neck {
  position: relative;
  width: 2.6%;
  height: clamp(30px, 4.4vw, 54px);
  background: linear-gradient(90deg, #b9b9be, #f2f2f4 45%, #c7c7cb 60%, #a9a9ae);
}
.mac-display__stand-hinge {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(30px, 4.2vw, 46px);
  height: clamp(10px, 1.4vw, 16px);
  border-radius: 999px;
  background: linear-gradient(90deg, #aeaeb3, #ececed 45%, #bcbcc1 60%, #9d9da2);
  box-shadow: 0 1px 2px rgba(51,51,51,0.2);
}
.mac-display__stand-hinge::before,
.mac-display__stand-hinge::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7d7d82;
  transform: translateY(-50%);
}
.mac-display__stand-hinge::before { left: 22%; }
.mac-display__stand-hinge::after { right: 22%; }
.mac-display__stand-foot {
  width: 24%;
  height: clamp(6px, 0.9vw, 10px);
  border-radius: 999px;
  background: linear-gradient(90deg, #b3b3b8, #f0f0f2 45%, #c2c2c6 55%, #a4a4a9);
  box-shadow: 0 4px 10px -2px rgba(51,51,51,0.25);
}

@media (max-width: 640px) {
  .discovery__stack { gap: var(--space-4); }
}

/* ============================================================
   Quick Wins summary — endless sliding row of glowing cards
   ============================================================ */
.quickwins-summary {
  background: #ecd9c8; /* wall tone, kept from the earlier video treatment */
}

.quickwins-summary__content {
  padding: var(--space-7) 0;
}
.quickwins-summary__content .section__head {
  margin-bottom: var(--space-5);
  padding: 0 clamp(24px, 5vw, 72px);
}

/* Full-bleed marquee track — content is duplicated in the HTML so a
   -50% translateX loops seamlessly with no visible seam or reset. */
.qw-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
}
.qw-track {
  display: flex;
  width: max-content;
  gap: 22px;
  /* Position is driven by JS (requestAnimationFrame), not a CSS @keyframes
     animation — changing animation-duration mid-flight rescales elapsed
     time against the new duration and causes a visible jump. Accumulating
     an offset by rate instead lets the speed change without ever moving
     the track anywhere but forward from wherever it already is. */
}

.qw-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--rust);
  color: var(--porcelain);
  cursor: pointer;
  box-shadow: 0 12px 26px -10px rgba(51,51,51,0.4);
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.qw-arrow:hover {
  background: var(--rust-dark);
  transform: translateY(-50%) scale(1.08);
}
.qw-arrow--left { left: clamp(10px, 2.5vw, 32px); }
.qw-arrow--right { right: clamp(10px, 2.5vw, 32px); }

.qw-box {
  position: relative;
  flex: 0 0 clamp(230px, 20vw, 320px);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: var(--space-4);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.22);
  overflow: hidden;
  isolation: isolate;
  transition: transform 250ms var(--ease);
}
.qw-box::before {
  /* soft diagonal gloss for a glassier, more considered finish */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(145deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.04) 42%, rgba(0,0,0,0.08) 100%);
}
.qw-box::after {
  /* ambient glow bleeding past the card's own edges */
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  background: radial-gradient(circle at 50% 45%, var(--qw-glow, transparent) 0%, transparent 68%);
  filter: blur(26px);
  opacity: 0.85;
}
.qw-box:hover { transform: translateY(-6px); }
.qw-box h3 {
  color: inherit;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  position: relative;
  z-index: 1;
}
.qw-box p {
  font-size: 0.9rem;
  line-height: 1.45;
  position: relative;
  z-index: 1;
  max-width: 26ch;
}
.qw-box__num {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0;
  opacity: 0.32;
}

.qw-box--rust { background: var(--rust); color: var(--porcelain); --qw-glow: rgba(192,108,56,0.55); }
.qw-box--charcoal { background: var(--charcoal); color: var(--porcelain); --qw-glow: rgba(72,181,166,0.35); }
.qw-box--sage { background: var(--sage); color: var(--porcelain); --qw-glow: rgba(72,181,166,0.5); }
.qw-box--sand { background: var(--sand); color: var(--charcoal); --qw-glow: rgba(192,108,56,0.4); }

.qw-box--cta {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  background: var(--porcelain);
  border: 1.5px solid var(--rust);
  color: var(--rust-dark);
  --qw-glow: rgba(192,108,56,0.3);
}
.qw-box__cta-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.25;
}
.qw-box--cta svg { position: relative; z-index: 1; }
.qw-box--cta:hover { background: var(--rust); color: var(--porcelain); }

@media (max-width: 640px) {
  .qw-box { flex-basis: 78vw; }
}

/* ============================================================
   Footer — looping video background variant
   ============================================================ */
.footer--video {
  position: relative;
  background: var(--charcoal);
  padding-top: var(--space-7);
  overflow: hidden;
}
.footer__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  z-index: 0;
}
.footer__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(51,51,51,0.55) 0%, rgba(51,51,51,0.88) 45%, var(--charcoal) 85%);
}
.footer--video .container { position: relative; z-index: 1; }

.footer__cta {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-6);
}
.footer__cta h2 { color: var(--porcelain); margin-top: var(--space-2); }
.footer__cta-actions {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}