/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --font-geist: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-caveat: 'Caveat', cursive;

  --dark: #060612;
  --black-soft: #0a0a0a;
  --orange: #524FE4;
  --orange-mid: #524FE4;

  --gray-text: #69686e;
  --bg: #faf9f8;
  --bg-alt: #f4f2f0;
  --bg-light: #f5f4f3;
  --border: #e7e2dd;
  --white: #ffffff;
  --card-bg: #eeecea;

  --process-bg: #f1f0ee;
  --process-text: #0f0f0f;
  --process-dark-text: #ffffff;

  --container: 1320px;
  --radius-lg: 30px;
  --radius-md: 16px;
  --radius-sm: 8px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--dark);
  font-family: var(--font-inter);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; }
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 30px;
}
@media (max-width: 809px) { .container { padding: 0 26px; } }

/* Shared by both logo marquees (.logos-marquee-track and .tech-marquee-track).
   The endpoint isn't a fixed -50% — script.js sets --marquee-shift per-track
   based on how many group-clones it actually needed, so this same keyframe
   works correctly regardless of how much content each marquee has. */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(var(--marquee-shift, -50%)); }
}

/* ==========================================================================
   Shared bits
   ========================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  background: var(--bg-alt);
  border: 1px solid var(--white);
  border-radius: 4px;
  box-shadow: inset 0 0 5px rgba(6, 6, 18, 0.18);
  margin: 0 auto;
}
.pill span {
  font-family: var(--font-geist);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-text);
  padding: 0 12px;
}
.pill img { width: 6px; height: 10px; }

.highlight { color: var(--orange-mid); }

.section-eyebrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: 40px;
}
.section-eyebrow h2 {
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: var(--dark);
  color: var(--white);
  font-family: var(--font-inter);
  font-size: 16px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--dark), inset 0 1.4px 1px rgba(255, 255, 255, 0.08), 0 1.4px 4px rgba(6, 6, 18, 0.3);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.btn-primary:hover { opacity: 0.85; }

.handwritten {
  font-family: var(--font-caveat);
  font-size: 20px;
  color: var(--orange);
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px 30px 0;
}
/* Just the logo mark itself — no coloured glow behind it — still gently
   bobbing/drifting on scroll (see script.js). */
.nav-inner {
  position: relative;
  display: inline-flex;
}
.nav-inner .logo {
  display: block;
  will-change: transform;
}
.nav-inner .logo img {
  height: 42px;
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(6, 6, 18, 0.18));
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Vertical padding only — horizontal comes from .container so it can't
   be zeroed out (a `padding: X 0 Y` shorthand would override the
   container's side padding and push content to the screen edge). */
.hero {
  padding-top: 56px;
  padding-bottom: 90px;
  text-align: center;
}
.hero-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 1280px;
  margin: 0 auto;
}
.hero-title {
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: clamp(38px, 6.4vw, 76px);
  letter-spacing: -0.05em;
  line-height: 1.12;
  color: var(--black-soft);
}
.hero-subtitle {
  max-width: 680px;
  font-family: var(--font-geist);
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--gray-text);
  line-height: 1.4;
}
.hero-buttons {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding-top: 16px;
  padding-bottom: 90px;
}
.hero-note {
  position: absolute;
  top: 30px;
  left: 62px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.hero-note-arrow { padding-right: 30px; }
.hero-note-arrow img { width: 30px; height: 30px; }
.hero-note .handwritten {
  font-size: 18px;
  white-space: nowrap;
}
@media (max-width: 809px) {
  .hero-note { display: none; }
}

.trust {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 640px;
  margin: 90px auto 0;
}
.trust hr {
  flex: 1;
  height: 1px;
  border: none;
  border-top: 1px dashed rgba(6, 6, 18, 0.1);
}
.trust p {
  font-family: var(--font-geist);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-text);
  white-space: nowrap;
}
.trust p b { color: var(--dark); }

/* Infinite marquee. script.js clones .logos-marquee-group enough times to
   always exceed the viewport width, then sets --marquee-shift to -100%
   divided by however many copies exist — so the visible strip is always
   fully covered by real content, at any screen width, however many/few
   logos there are. Edges fade via mask instead of a hard cut. */
.logos-row {
  overflow: hidden;
  width: 100%;
  padding: 16px 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logos-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 24s linear infinite;
  /* Own GPU layer — stops iOS Safari repaint flicker on the animated
     (masked) strip. */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.logos-row:hover .logos-marquee-track {
  animation-play-state: paused;
}
.logos-marquee-group {
  display: flex;
  flex: none;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
}
.logos-marquee-track img {
  flex: none;
  height: 28px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.logos-marquee-track img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .logos-marquee-track { animation: none; }
  .logos-marquee-track img { transition: filter 0.3s ease, opacity 0.3s ease; }
}

/* ==========================================================================
   Compare
   ========================================================================== */
/* Bottom padding (102) is set so the gap BELOW the compare text —
   this 102 + the results section's 40px top padding = 142 — equals the
   gap ABOVE it (the hero's 90px bottom padding + this block's 52px top
   = 142). Keeps the whitespace symmetric on both sides of the block. */
.compare {
  padding-top: 52px;
  padding-bottom: 102px;
  display: flex;
  justify-content: center;
  scroll-margin-top: 90px;
}
.compare-inner {
  width: 58%;
  min-width: 300px;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.compare h2 {
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--dark);
}
.compare h4 {
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--dark);
  margin-top: 24px;
}
@media (max-width: 809px) {
  /* width:100% + min-width:0 — the 300px min-width forced the block
     wider than a ~320px phone viewport, causing horizontal scroll. */
  .compare-inner { width: 100%; min-width: 0; }
}

/* ==========================================================================
   Results — a pixel-faithful recreation of the reference collage.
   .results-gallery-section is just the outer wrapper (centred, padded);
   the actual arrangement lives in .results-collage below, whose cards
   are absolutely positioned at % coordinates from script.js.
   ========================================================================== */
.results-gallery-section {
  margin: 0 auto;
  padding: 40px 24px;
}

/* The collage canvas — a fixed-aspect box whose ratio matches the
   content bounds of the reference image (1390:612 in reference px,
   empty margins cropped off). Every card inside is absolutely
   positioned in % of this box, so resizing the box scales the entire
   arrangement as one unit without any card moving relative to another.
   The 1000px cap is the "a bit smaller so it doesn't dominate" knob —
   raise/lower it to scale the whole collage. */
.results-collage {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 36px auto 0;
  aspect-ratio: 1390 / 612;
}

/* left/top/width come from script.js (COLLAGE_ITEMS) as inline styles;
   height is never set — each image keeps its own intrinsic ratio. */
.rc-item {
  position: absolute;
  display: block;
  padding: 0;
  border: none;
  background: none;
  transition: transform 200ms ease;
}
button.rc-item { cursor: pointer; }
.rc-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
/* The luminance — a soft halo behind the card, fades in on hover.
   Uses a blurred box-shadow on a rounded layer (matched to the card's
   own inset) rather than a radial-gradient: a gradient sized as a
   circle gets sliced into a hard-edged "box" on the wide/short cards
   (its circle is taller than the layer, so the top/bottom clip flat).
   A box-shadow spreads an even, rounded glow that follows the card
   shape no matter the aspect ratio. */
.rc-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow: 0 0 42px 8px rgba(82, 79, 228, 0.5);
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
  z-index: -1;
}
.rc-item:hover::before { opacity: 1; }
.rc-item:hover {
  transform: scale(1.04);
  z-index: 5;
}

/* Before/after pairs (subscribers →, Instagram ↓) — composite items
   rendered from the same COLLAGE_ITEMS config. */
.rc-pair {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rc-pair img {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.rc-pair--col { flex-direction: column; }
.rc-pair--col img { flex: none; width: 100%; }
.rc-arrow {
  flex: none;
  font-size: 15px;
  line-height: 1;
  color: var(--orange-mid);
}
.rc-pair--col .rc-arrow { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .rc-item, .rc-item::before { transition: none; }
  .rc-item:hover { transform: none; }
}

/* ---- Modal ---- */
.rg-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
}
.rg-modal.is-open { display: flex; }

.rg-modal-img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.rg-modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.rg-modal-close:hover { background: rgba(255, 255, 255, 0.22); }

/* ==========================================================================
   Process
   ========================================================================== */
.process { padding-top: 75px; padding-bottom: 75px; scroll-margin-top: 100px; }

.process-steps {
  display: flex;
  align-items: stretch;
  gap: 10px;
  border-radius: var(--radius-lg);
}
/* Number sits in its own column, text in another, side by side —
   this is the key fix: they can never overlap regardless of how much
   copy a given step has, because they're not stacked/absolute anymore. */
.process-step {
  position: relative;
  flex: 1;
  min-width: 90px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--process-bg);
  cursor: pointer;
  transition: flex 0.5s cubic-bezier(0.44, 0, 0.56, 1), background 0.5s ease;
  padding: 40px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.process-step.is-open {
  flex: 5;
  background: var(--black-soft);
}
.process-number {
  flex: none;
  font-family: var(--font-inter);
  font-size: clamp(56px, 6.5vw, 100px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--orange-mid);
}
.process-step.is-open .process-number { color: var(--process-dark-text); }

/* Hidden (not just faded) while closed — a closed card's copy takes
   zero layout height too, so the row's height tracks only whichever
   step is actually open, instead of an arbitrary fixed height.

   Fixed (not flexible) width so it wraps identically whether the card
   is open or closed — text never has to re-wrap as the card animates
   wider, which is what was causing the row to balloon in height. The
   overflow:hidden on .process-step clips it out of view while closed;
   opacity is the actual show/hide switch, so there's nothing left for
   JS to time or race against. */
.process-copy {
  flex: none;
  width: 480px;
  max-width: 60vw;
  padding-top: 8px;
  opacity: 0;
  transition: opacity 0.3s ease 0.15s;
}
.process-step.is-open .process-copy { opacity: 1; }

.process-copy h3 {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: var(--process-dark-text);
  margin-bottom: 20px;
}
.process-copy p {
  font-family: var(--font-inter);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.4;
  color: var(--process-dark-text);
  white-space: pre-line;
}

@media (max-width: 1199px) {
  .process-steps { flex-direction: column; }
  .process-step {
    flex: none;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    height: 90px;
    padding: 24px;
    transition: height 0.5s ease, background 0.5s ease;
  }
  .process-step.is-open { height: auto; padding: 30px; }
  .process-number { font-size: 44px; }
  /* Mobile/tablet stacks number-above-text and animates height, not
     width, so the fixed-width/opacity trick above doesn't apply here —
     back to a simple display toggle, which is safe on this layout. */
  .process-copy {
    width: auto;
    max-width: none;
    padding-top: 0;
    opacity: 1;
    display: none;
  }
  .process-step.is-open .process-copy { display: block; }
  .process-copy h3 { font-size: 22px; }
  .process-copy p { font-size: 16px; }
}

/* ==========================================================================
   Tech Stack
   ========================================================================== */
.tech-stack { padding-top: 20px; padding-bottom: 90px; }

.tech-stack-label {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 640px;
  margin: 0 auto 40px;
}
.tech-stack-label hr {
  flex: 1;
  height: 1px;
  border: none;
  border-top: 1px dashed rgba(6, 6, 18, 0.1);
}
.tech-stack-label p {
  font-family: var(--font-geist);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-text);
  white-space: nowrap;
}

/* Outer clipping window — full section width, edges fade to transparent
   so logos scroll in/out softly instead of hard-cutting at the edge. */
.tech-stack-logos {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* script.js clones .tech-marquee-group enough times to always exceed the
   viewport width, then sets --marquee-shift to -100% divided by however
   many copies exist — keeps the strip fully covered by real content at
   any screen width, whether there are 4 logos or 40. */
.tech-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tech-stack-logos:hover .tech-marquee-track {
  animation-play-state: paused;
}

.tech-marquee-group {
  display: flex;
  flex: none;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
}

/* Monochrome at rest, full color on hover. Logos should be plain PNGs
   (or SVG) with a transparent background — no baked-in white/black box —
   so the grayscale filter reads cleanly against the page. Bounded to a
   consistent box since the source files are a mix of formats/aspect
   ratios (svg/png/jpg/webp). */
.tech-marquee-track img {
  flex: none;
  width: 110px;
  height: 40px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.tech-marquee-track img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .tech-marquee-track { animation: none; }
  .tech-marquee-track img { transition: filter 0.3s ease, opacity 0.3s ease; }
}

/* ==========================================================================
   FAQ / Booking
   ========================================================================== */
.faq {
  padding-top: 41px;
  padding-bottom: 41px;
  text-align: center;
}
.faq-eyebrow {
  position: relative;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.faq-note {
  position: absolute;
  bottom: -20px;
  right: -144px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  pointer-events: none;
}
.faq-note .handwritten {
  font-size: 18px;
  white-space: nowrap;
}
.faq-note-arrow {
  width: 72px;
  height: 38px;
  transform: rotate(-59deg) rotateX(180deg) rotateY(180deg);
}
.faq-note-arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 1199px) {
  .faq-note { right: -30px; }
}
@media (max-width: 809px) {
  .faq-note { display: none; }
}
#cal-booking {
  margin-top: 40px;
  width: 100%;
  max-width: 1131px;
  min-height: 496px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  padding: 40px 0 0;
  border-top: 1px solid var(--border);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  padding: 44px 0;
}
.footer-col { flex: 1; min-width: 200px; }
.footer-logo { display: block; width: auto; height: 60px; margin-bottom: 20px; }
.footer-logo img { height: 100%; width: auto; object-fit: contain; object-position: left; }

.footer-heading {
  font-family: var(--font-geist);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-text);
  margin-bottom: 16px;
}
.footer-links { display: flex; gap: 60px; }
.footer-links ul { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  color: var(--gray-text);
  font-size: 16px;
  transition: color 0.3s ease;
}
.footer-links a:hover { color: var(--orange); }

.footer-contact { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.footer-contact a {
  color: var(--dark);
  font-size: 16px;
  transition: color 0.3s ease;
}
.footer-contact a:hover { color: var(--orange); }

.footer-socials { display: flex; gap: 8px; }
.footer-socials a {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.footer-socials a:hover { opacity: 0.8; }
.footer-socials img { width: 14px; height: 14px; }

.footer-divider {
  height: 1px;
  margin: 20px 0 0;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}

@media (max-width: 809px) {
  .footer-top { flex-direction: column; gap: 30px; padding: 24px 0; }
  .footer-links { gap: 40px; }
}

/* ==========================================================================
   Scroll reveal
   Elements fade + slide up the first time they enter the viewport.
   JS toggles .is-visible via IntersectionObserver — see script.js
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* .process-step already animates its own `flex` on hover/click — merge
   that with the reveal fade instead of letting one `transition` shorthand
   clobber the other. */
.process-step.reveal {
  transition: flex 0.5s cubic-bezier(0.44, 0, 0.56, 1),
              background 0.5s ease,
              opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
}

/* ==========================================================================
   Phone optimisation (≤809px)
   Tightens the big desktop paddings, scales the headline down, and —
   the main fix — reflows the Results collage from its fixed-ratio
   absolute-positioned desktop art into a simple 2-column masonry so
   every card stays readable on a phone instead of shrinking to a sliver.
   ========================================================================== */
/* Page-level guard: never allow sideways scroll from a stray wide
   element. `clip` (not `hidden`) doesn't create a scroll container, so
   the sticky nav still pins to the viewport correctly. */
html { overflow-x: clip; }

@media (max-width: 809px) {
  /* --- Hero --- much smaller headline (was dominating the whole
     screen), tighter gaps, and reclaim the space that was reserved
     under the button for the note that's hidden on phones. */
  .hero { padding-top: 28px; padding-bottom: 36px; }
  .hero-top { gap: 14px; }
  /* Sized so "Your Audience. Our Infrastructure." (its own line, via the
     <br>) fits on ONE line — width-tied so it holds across phone sizes. */
  .hero-title { font-size: clamp(18px, 5vw, 28px); line-height: 1.2; }
  .hero-subtitle { font-size: 12.5px; }
  .hero-buttons { padding-bottom: 14px; }
  .trust { margin-top: 30px; }

  /* --- "Trusted by …" row --- was overflowing off the right (the
     horizontal-scroll you saw) AND sitting left-aligned. Drop the dash
     rules, centre the whole row + text, and let it wrap so it can never
     exceed the viewport width. */
  .trust { justify-content: center; margin-top: 30px; }
  .trust hr { display: none; }
  .trust p {
    width: 100%;
    white-space: normal;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.08em;
    line-height: 1.5;
  }

  /* --- Logo marquee --- smaller + tighter so it doesn't feel crammed. */
  .logos-marquee-track img { height: 22px; max-width: 100px; }
  .logos-marquee-group { gap: 40px; padding-right: 40px; }

  /* --- Compare --- smaller copy + inset from the edges so there's a
     clear white margin around the block instead of it hugging the sides. */
  .compare { padding-top: 28px; padding-bottom: 36px; }
  .compare-inner { width: 100%; }
  .compare h2, .compare h4 { font-size: 18px; line-height: 1.3; }
  .compare h4 { margin-top: 14px; }

  /* --- Results --- reflow the collage. Desktop absolute-positions every
     card at % coords inside a fixed 1390:612 box; on a phone that box is
     ~150px tall and cards become unreadable/overlapping. On mobile it
     becomes a flex flow instead: money/revenue cards + growth pairs
     (.rc-item--big) run full-width and first, the small view/stat chips
     fill 3-per-row below. Tap any single card for the full-size modal.
     !important beats the inline left/top/width the JS sets per card. */
  .results-gallery-section { padding: 24px 20px; }
  .results-collage {
    position: static;
    aspect-ratio: auto;
    max-width: 460px;
    margin: 16px auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
  }
  .rc-item {
    position: static !important;
    left: auto !important;
    top: auto !important;
    /* small stat chips — 3 per row */
    width: calc(33.333% - 6px) !important;
    margin: 0 !important;
  }
  .rc-item--big { width: 100% !important; }   /* money / pairs / funnel */
  .rc-item:hover { transform: none; }

  /* --- Tech-stack marquee --- same tightening as the hero logos. */
  .tech-marquee-track img { width: 92px; height: 34px; }
  .tech-marquee-group { gap: 40px; padding-right: 40px; }

  /* --- Process --- inset it inside a framed, rounded panel so it reads
     as a tidy card with breathing room around it, not edge-to-edge. */
  .process { padding-top: 36px; padding-bottom: 36px; }
  .process .section-eyebrow { margin-bottom: 22px; }
  .process-steps {
    padding: 8px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 18px;
  }

  /* --- Tech / Booking / Footer --- trim large paddings --- */
  .tech-stack { padding-top: 12px; padding-bottom: 44px; }
  .tech-stack-label { margin-bottom: 20px; }
  .faq { padding-top: 22px; padding-bottom: 22px; }
  footer { padding: 28px 0 0; }
}

/* Extra squeeze for very small phones (SE / mini). */
@media (max-width: 380px) {
  /* hero-title handled by the width-tied clamp above — no override here,
     so it keeps fitting the headline on one line on tiny phones too. */
  .results-collage { max-width: 320px; }
  .rc-item { width: calc(50% - 4px) !important; }  /* chips 2 per row */
}