/* ==========================================================================
   Simplegrowth — shared design system
   Built on the SG Kit Figma tokens. The homepage hero, trust strip and
   "who are we" card are pixel-derived from the Figma frame; everything else
   (inner pages, cards, pricing, forms) is styled to sit alongside them.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── SG Kit tokens (Figma variables) ── */
  --sg-dark:     #190F36;
  --purple-50:   #F8F5FF;
  --purple-100:  #EBE2FF;
  --purple-300:  #B49DFF;
  --purple-500:  #6E57B8;
  --purple-700:  #49338B;
  --purple-800:  #382673;
  --purple-900:  #281A54;
  --pink-200:    #fac8ff;

  /* ── derived aliases ── */
  --purple:       var(--purple-700);
  --purple-dark:  #2D1F5E;
  --purple-light: var(--purple-300);
  --pink:         #F59DFF;
  --white:        #ffffff;
  --off-white:    var(--purple-50);
  --text:         var(--sg-dark);
  --text-muted:   #6B6B8A;
  --border:       #E8E4F5;

  --radius-lg: 24px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* the solid header's measured height: 6px padding + 10px inner padding,
     doubled, around a 40px row (the Contact button, not the 32px logo, is
     the tallest thing in it) plus the 1px bottom border */
  --header-height: 73px;

  /* horizontal page gutter: 120px at the 1280 desktop frame */
  --gutter: clamp(24px, 9.375vw, 120px);
  /* the Figma content frame — every section lines up to this */
  --content-max: 1040px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--sg-dark);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

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

/* Keyboard focus. There was no focus style anywhere, so keyboard users got
   the browser default, which all but vanishes on the dark sections. Only
   :focus-visible, so a mouse click doesn't leave a ring behind. */
:focus-visible {
  outline: 2px solid var(--purple-700);
  outline-offset: 3px;
  border-radius: 2px;
}
/* the purple ring has nothing to sit against on the dark surfaces */
.cta :focus-visible,
footer :focus-visible,
.case-result :focus-visible,
.case-block--feature :focus-visible,
.price-card.is-popular :focus-visible {
  outline-color: var(--pink-200);
}

.container { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--text-muted); }

/* Shown only on the desktop frame / only on the mobile frame */
.only-mobile { display: none; }

/* ════════════════════════════════════════
   HEADER  (Figma 397:729)
   ════════════════════════════════════════ */
.site-header {
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  z-index: 50;
  /* 16px so the 60px inner bar sits in a 92px header, per Figma 397:729 */
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.site-header-inner {
  width: 100%;
  max-width: var(--content-max);
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-logo img { width: 217.817px; height: 40px; }

/* Inner pages: no hero to sit on, so the bar becomes solid and sticky */
.site-header--solid {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 6px 24px;
}
.site-header--solid .site-logo img { width: 174px; height: 32px; }

/* Desktop: the header sits at the top of the document and scrolls away with
   it, then returns fixed once the visitor is past the fold. It is taken out
   of flow with body padding standing in for it, so switching to fixed moves
   nothing — an in-flow header would yank the page up by its own height at
   the moment it pinned. Mobile keeps its own header and bottom bar. */
@media (min-width: 901px) {
  .site-header--solid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  body { padding-top: var(--header-height); }
  .has-scrolled .site-header--solid {
    position: fixed;
    animation: site-header-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes site-header-in {
    from { transform: translateY(-100%); }
    to   { transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .has-scrolled .site-header--solid { animation: none; }
  }
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  list-style: none;
  /* the li line box, not just the anchor, sets the row height */
  line-height: normal;
}
.nav-links a {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: var(--sg-dark);
  transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 0.6; }
.nav-links a.is-active { position: relative; opacity: 1; }
.nav-links a.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--purple-500);
}
.nav-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(25, 15, 54, 0.4);
  flex-shrink: 0;
}

.btn-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 16px;
  border-radius: 555px;
  background: var(--sg-dark);
  color: var(--pink-200);
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  transition: transform 0.2s, opacity 0.2s;
}
.btn-header:hover { transform: translateY(-1px); opacity: 0.9; }

/* ════════════════════════════════════════
   MOBILE HEADER MENU  (Figma 429:1878 closed / 429:2065-2072 open)
   The header's own toggle + dropdown — mobile's only nav now that the
   bottom bar is gone. Hidden outside the mobile media query.
   ════════════════════════════════════════ */
.mobile-menu-toggle { display: none; }
.mobile-menu-panel { display: none; }

/* ════════════════════════════════════════
   HERO  (Figma 397:648)
   ════════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--white) 0%, var(--purple-100) 100%);
}
.hero-columns {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* The header used to float over the hero on the home page; now it sits above
   it, so trim the hero's own top padding by the header's height to keep the
   distance from page top to the eyebrow at Figma's 82px. Placed after the
   base rule above, which would otherwise win on source order. */
@media (min-width: 901px) {
  .hero-columns { padding-top: calc(82px - var(--header-height)); }
}

.hero-col-text {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 750px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: var(--gutter);
}
.hero-content {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}

/* eyebrow — Figma 398:763 */
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 8px;
}
.hero-eyebrow-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--purple-500);
  flex-shrink: 0;
}
.hero-eyebrow span {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: normal;
  text-transform: uppercase;
  color: var(--sg-dark);
}

.hero-headline-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.hero h1 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: clamp(36px, 3.95vw, 50px);
  line-height: 1.2;
  color: var(--sg-dark);
  max-width: 480px;
}
/* "marketing duo" — Purple/500 on the desktop frame only; the mobile
   frame (400:1029) keeps the headline a single colour. */
.hero-h1-accent { color: var(--purple-500); }

/* pills — Figma 397:673 */
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  align-content: flex-start;
  list-style: none;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: var(--purple-800);
  white-space: nowrap;
}

/* buttons — Figma 399:766 */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  align-content: flex-start;
}
.btn-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 64px;
  padding: 20px 32px;
  border-radius: var(--radius-pill);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: normal;
  white-space: nowrap;
  transition: transform 0.2s, opacity 0.2s;
}
.btn-lg:hover { transform: translateY(-2px); opacity: 0.92; }
.btn-lg:active { transform: scale(0.98); }
.btn-lg img { width: 24px; height: 24px; flex-shrink: 0; }

.btn-dark {
  background: var(--sg-dark);
  color: var(--pink-200);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.btn-white {
  background: var(--white);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  color: var(--sg-dark);
}

/* email line — Figma 400:1316 */
.hero-email {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 400;
  font-size: 16px;
  /* not the body's 1.6 — that made the text column 6.6px tall and, since
     it is vertically centred, pushed everything above it 3.3px up */
  line-height: normal;
  color: var(--purple-800);
}
.hero-email a { text-decoration: underline; }

/* ── hero image — Figma 400:1542 ── */
/* The frame fills the hero row rather than deriving its height from its
   width, so the cut-out stays the full height of the hero at every width.
   Below the 1280 design width the column is narrower than the image, so
   object-fit:cover crops the sides (arms, not faces) instead of shrinking
   the figures away from the text. */
.hero-col-image {
  flex: 1 1 50%;
  /* Floor the column so the crop stays off the faces and the "Lana"
     label as the viewport narrows, capped at 640px so it never exceeds
     the cut-out's own width at the 1280 design size (which would make
     cover scale by width and crop the tops of their heads instead). */
  min-width: min(56%, 640px);
  display: flex;
  align-self: stretch;
  align-items: stretch;
  /* frame hugs the right edge once the column is wider than the cap below */
  justify-content: flex-end;
}
.hero-image {
  position: relative;
  width: 100%;
  /* The cut-out is near-square (1608x1660) while the frame is 640x750, so
     `cover` scales it by height and trims the sides. Capping the frame at
     the photo's own ratio for this height stops the box ever growing wider
     than the photo — which would flip cover to scaling by width and crop
     downward into the tops of their heads. */
  max-width: calc(750px * 1608 / 1660);
  overflow: hidden;
}
/* decorative "Shadow" ellipses behind the photo — Figma 400:1543 / 400:1544 */
.hero-shadow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110, 87, 184, 0.45), rgba(110, 87, 184, 0));
  filter: blur(28px);
  pointer-events: none;
}
.hero-shadow-1 { inset: 16.93% -6.47% -27.66% 51.3%; }
.hero-shadow-2 { inset: 38.01% 43.35% -19.06% 12.09%; }

/* hero_image.webp is a cut-out (transparent background) exported at the
   frame's own 640:750 ratio — the shadow ellipses above sit behind it as
   its glow. cover scales it to the frame's height and crops the sides
   when the column is narrower than 640px; at 1280+ the ratios match, so
   nothing is cropped. */
.hero-photo {
  position: absolute;
  inset: 0;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Only the stacked layout still crops (the desktop rule below fits by
     width instead). Take all of it off the right: the canvas is tight to
     Lana's shoulder and the "Lana" label on the left, where there is
     nothing to give, while the right is Stuart's sleeve — which the Figma
     mobile frame runs off the edge anyway. 100% vertically keeps them
     standing on the hero's base. */
  object-position: 0 100%;
  max-width: none;
}

/* Past the 1280 design width the centred columns block stops growing and
   the cut-out stops short of the right edge. Run the image column out to
   the edge and pin the photo to it at full height and natural width.
   Not object-fit: cover — a box wider than the photo's 0.854 ratio makes
   cover scale by width, which would crop the tops of their heads. The
   extra width to the photo's left is just hero gradient. */
@media (min-width: 1281px) {
  /* run the column out to the viewport edge; the frame's max-width above
     then holds the photo at its natural ratio, flush to that edge */
  .hero-col-image { margin-right: calc((1280px - 100vw) / 2); }
}

/* The cut-out has no horizontal slack — opaque pixels start 6px into its
   1608px canvas — so any side crop at all eats into Lana's shoulder. Below
   1281px the column never reaches the 727px the photo needs to stand at the
   hero's full height (it is 640px even at the 1280 design width), so fit by
   width across the whole desktop range and let the photo stand shorter on
   the hero's base. The space it leaves above is gradient, which is how the
   Figma desktop frame renders it too.

   Above 1281 the frame is capped to the photo's own ratio, so `contain`
   there is the same fit `cover` gave — full height, flush right, uncropped. */
@media (min-width: 901px) {
  .hero-photo img {
    object-fit: contain;
    object-position: bottom center;
  }
}

/* ════════════════════════════════════════
   TRUST STRIP  (Figma 399:814)
   ════════════════════════════════════════ */
.trust {
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.trust-inner {
  width: 100%;
  max-width: var(--content-max);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.trust-inner p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  color: var(--purple-900);
  text-align: center;
}
.trust-logos {
  width: 100%;
  padding: 7.479px 0;
}
/* Desktop: one centred, wrapping row. display:contents lets the set's
   logos wrap as direct flex children of the track, and the duplicate set
   the mobile marquee needs is dropped entirely. */
.trust-logos-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}
.trust-logos-set { display: contents; }
.trust-logos-set--clone { display: none; }
.trust-logos img { flex-shrink: 0; }
/* explicit per-logo geometry, preserved from Figma */
.logo-proshine     { width: 157px;     height: 42px; }
.logo-shoreboxing  { width: 63px;      height: 42px; }
.logo-inspirations { width: 195px;     height: 42px; }
.logo-caledonian   { width: 96.721px;  height: 42px; }

/* ════════════════════════════════════════
   WHO ARE WE  (Figma 400:1519 desktop / 400:1372 mobile)
   ════════════════════════════════════════ */
.whoarewe {
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.whoarewe-card {
  width: 100%;
  max-width: var(--content-max);
  padding: 56px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.whoarewe-card h2 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.5;
  color: var(--sg-dark);
  width: 100%;
}
.whoarewe-body {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.7;
  color: var(--sg-dark);
  width: 100%;
}
.whoarewe-body em { font-style: italic; font-weight: 300; }
.whoarewe-signoff {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 28px;
  line-height: 1.5;
  color: var(--sg-dark);
  width: 100%;
}
.whoarewe-foot {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* grouped avatars — Figma 404:1077, now a single pre-grouped export
   (images/grouped_avatars.webp) rather than two cropped copies of the
   group photo positioned by hand. */
.avatars {
  width: 135px;
  height: 90px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════
   SHARED SECTION FURNITURE
   ════════════════════════════════════════ */
section.page-section { padding: 88px 24px; }
section.page-section.tint { background: var(--purple-50); }

.section-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--purple);
  margin-bottom: 12px;
}
.section-title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.2;
  margin-bottom: 16px;
}
.section-sub { color: var(--text-muted); font-size: 17px; max-width: 560px; }
.section-head { margin-bottom: 48px; }
.section-head .badge { margin-bottom: 16px; }
.section-head.centred { text-align: center; }
.section-head.centred .section-sub { margin-left: auto; margin-right: auto; }
.section-head.split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
}
/* cap the headline column so the sub stays beside it instead of wrapping under */
.section-head.split > :first-child { max-width: 620px; }
.section-head.split .section-sub { text-align: right; max-width: 320px; }

/* ── buttons (inner pages) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s, background 0.2s;
}
.btn:hover { transform: translateY(-1px); opacity: 0.92; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--sg-dark); color: var(--white); }
.btn-pink { background: var(--pink); color: var(--purple-dark); }
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--sg-dark);
  color: var(--sg-dark);
}
.btn-outline:hover { background: var(--sg-dark); color: var(--white); opacity: 1; }
.btn-sm { padding: 11px 22px; font-size: 14px; }

/* ── badge / eyebrow pill ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 12px;
  border-radius: var(--radius-pill);
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--purple-900);
  background: var(--purple-100);
}
.badge.tone-lavender { background: var(--purple-100); }
.badge.tone-pink     { background: var(--pink-200); }
.badge.tone-lime     { background: var(--purple-50); border: 1px solid var(--border); }
.badge.tone-sky      { background: #E2ECFF; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple-700); opacity: 0.7; flex-shrink: 0; }

/* ── page header (About / Services / Contact) ── */
.page-header {
  background: linear-gradient(to bottom, var(--white) 0%, var(--purple-50) 100%);
  padding: 80px 24px 88px;
  text-align: center;
}
.page-header .badge { justify-content: center; }
.page-header h1 {
  font-size: clamp(32px, 4vw, 52px);
  max-width: 720px;
  margin: 20px auto 0;
  color: var(--sg-dark);
}
.page-header p { color: var(--text-muted); font-size: 17px; max-width: 520px; margin: 16px auto 0; }

/* ── success / confirmation page ── */
.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

/* ════════════════════════════════════════
   HOMEPAGE SECTIONS BELOW THE FIGMA FRAME
   ════════════════════════════════════════ */
/* pain points */
.pain-inner {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.pain-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}
.pain-grid li {
  aspect-ratio: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  background: var(--purple-50);
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 1.4;
}
.pain-grid li img { width: 24px; height: 24px; flex-shrink: 0; }

/* how it works */
.how { background: var(--sg-dark); color: var(--white); }
.how .section-label { color: var(--purple-300); }
.how .section-title { color: var(--white); }
.how .section-sub { color: rgba(255, 255, 255, 0.65); }
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 56px;
}
.how-step { display: flex; flex-direction: column; gap: 16px; }
.how-step-num {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
  color: var(--purple-300);
}
.how-step h3 { font-size: 19px; }
.how-step p { color: rgba(255, 255, 255, 0.65); font-size: 15px; }

/* testimonial cards — Figma 431:2121 / 437:2209 */
.testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.testimonial-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 560 / 850;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--sg-dark);
}
.testimonial-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.testimonial-card-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 80px 40px 40px;
}
/* the blur itself fades in via a mask, rather than switching on abruptly
   at the text block's top edge — the dark gradient still handles the fade
   to black underneath it */
.testimonial-card-text::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 55%);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 65%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 65%);
}
.testimonial-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.testimonial-card-titles { display: flex; flex: 1 1 0; flex-direction: column; gap: 4px; color: var(--white); min-width: 0; }
.testimonial-card-stat { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 32px; line-height: 1.15; }
.testimonial-card-stat-sub { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 22px; }
.testimonial-card-logo { position: absolute; z-index: 2; top: 32px; left: 40px; height: 24px; width: auto; }
.testimonial-card-logo--shoreboxing { height: 40px; }
.testimonial-card-quote {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.5;
  color: var(--white);
}

/* services cards */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.service-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover { transform: translateY(-6px); }
.service-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.service-card-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(25, 15, 54, 0.92) 0%, rgba(25, 15, 54, 0.4) 60%, transparent 100%);
}
.service-card-body { position: relative; z-index: 1; padding: 32px; color: var(--white); }
.service-icon {
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.service-icon img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.service-card h3 { font-size: 22px; margin-bottom: 8px; }
.service-card p { color: rgba(255, 255, 255, 0.75); font-size: 15px; line-height: 1.5; }

/* instagram feed — native Instagram post embeds (embed.js) */
/* desktop: fixed 3-column x 2-row grid */
.instagram-embeds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: start;
  gap: 20px;
  margin-bottom: 40px;
}
.instagram-embeds blockquote.instagram-media { margin: 0 !important; }
/* Crops the profile header, comment box, and a 1px sliver off each side
   of every embed. embed.js renders posts in a cross-origin iframe, so
   its chrome can't be targeted directly — instead the wrapper clips to
   a JS-measured size (js/main.js) and the iframe is shifted up/left to
   hide the header and side slivers, which also clips the same amount
   off the opposite edge. */
.instagram-embed-frame {
  overflow: hidden;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  /* the iframe's negative top margin pulls it out of normal flow, so
     without a floor here the card would collapse to ~0 height until
     embed.js reports the post's real size (js/main.js) */
  min-height: 480px;
}
.instagram-embed-frame iframe.instagram-media { margin: -56px 0 0 -1px !important; display: block !important; }
/* shown only if embed.js fails to load (e.g. blocked by an ad blocker) */
.instagram-embeds blockquote.instagram-media a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 240px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--purple);
  font-weight: 600;
  text-align: center;
  padding: 24px;
}
.instagram-follow { display: flex; justify-content: center; }

/* mobile: single scrollable row */
@media (max-width: 900px) {
  .instagram-embeds {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-anchor: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 8px;
    margin-bottom: 32px;
  }
  /* target the wrapper, not .instagram-media directly — embed.js
     replaces the blockquote with a rendered iframe, and the wrapper is
     the stable flex/grid item across both states. */
  .instagram-embeds .instagram-embed-frame {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .instagram-embeds blockquote.instagram-media a { width: 280px; }
}

/* faq */
.faq { background: var(--purple-50); }
.faq-inner { max-width: 760px; margin: 0 auto; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 24px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--sg-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-question svg { flex-shrink: 0; transition: transform 0.3s; color: var(--purple); }
.faq-item.open .faq-question svg { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer-inner { padding: 0 24px 20px; color: var(--text-muted); font-size: 15px; line-height: 1.7; }

/* cta */
.cta { background: var(--sg-dark); text-align: center; padding: 100px 24px; }
/* .cta is always dark, so a .btn-outline inside it needs the light variant
   used elsewhere on dark surfaces (see .price-card.is-popular) - the base
   dark-on-transparent style is invisible against this background */
.cta .btn-outline { border-color: rgba(255, 255, 255, 0.4); color: var(--white); }
.cta .btn-outline:hover { background: var(--white); color: var(--sg-dark); }
.cta-inner { max-width: 640px; margin: 0 auto; }
.cta h2 {
  color: var(--white);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.2;
  margin-bottom: 20px;
}
.cta h2 em, .cta h2 .muted { font-style: italic; color: var(--purple-300); }
.cta p { color: rgba(255, 255, 255, 0.7); font-size: 17px; margin-bottom: 40px; }

/* ════════════════════════════════════════
   INNER PAGE COMPONENTS
   ════════════════════════════════════════ */
/* ── team ── */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 720px; margin: 0 auto; }
.team-card { text-align: center; }
.team-card h3 { font-size: 17px; margin-bottom: 4px; }
.team-card span { font-size: 14px; color: var(--text-muted); }

/* Pre-composed bio cards. Each PNG carries its own rounded corners and
   drop shadow inside a transparent margin, so nothing is added here —
   a second shadow would double up on the baked-in one. */
.team-grid--cards {
  grid-template-columns: repeat(2, 1fr);
  max-width: 660px;
  gap: 8px;
}
.team-grid--cards .team-card { width: 100%; height: auto; }
/* Two portrait cards side by side on a phone render ~140px wide, which
   scales the name set inside the artwork down to about 5px. Stack them so
   the baked-in text stays legible — it can't reflow like real copy. */
@media (max-width: 768px) {
  .team-grid--cards {
    grid-template-columns: 1fr;
    max-width: 340px;
    gap: 0;
  }
}

/* ── stats ── */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px 24px; }
.stat-number {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 2px;
  color: var(--purple-800);
}
.stat-number .unit { font-size: 0.55em; font-weight: 600; color: var(--text-muted); }
.stat-card p { color: var(--text-muted); font-size: 14px; margin-top: 8px; }
.stat-note { color: var(--text-muted); font-size: 13px; margin-top: 20px; }

/* ── values / why-choose ── */
.bento-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bento-card {
  border-radius: var(--radius-md);
  padding: 32px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  background: var(--purple-50);
  border: 1px solid var(--border);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-card:hover { transform: translateY(-6px); }
.bento-card.tone-lavender { background: var(--purple-100); border-color: transparent; }
.bento-card.tone-pink { background: var(--pink-200); border-color: transparent; }
.bento-card.tone-lime { background: var(--purple-50); }
.bento-card h3 { font-size: 20px; margin-bottom: 8px; }
.bento-card p { color: var(--purple-900); opacity: 0.75; font-size: 15px; }

.reasons-list { display: flex; flex-direction: column; max-width: 760px; margin: 0 auto; }
.reason-row { display: flex; gap: 24px; align-items: flex-start; padding: 28px 0; border-top: 1px solid var(--border); }
.reason-row:last-child { border-bottom: 1px solid var(--border); }
.reason-num { font-size: 14px; font-weight: 700; color: var(--purple-300); padding-top: 3px; flex-shrink: 0; width: 28px; }
.reason-row h3 { font-size: 18px; margin-bottom: 6px; }
.reason-row p { color: var(--text-muted); font-size: 15px; max-width: 520px; }

/* ── service split rows ── */
.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 56px 0; }
.split-row.reverse .split-media { order: 2; }
.split-media img { width: 100%; height: 320px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); }
.split-text .badge { margin-bottom: 20px; }
.split-text h3 { font-size: 26px; margin-bottom: 12px; }
.split-text p { color: var(--text-muted); font-size: 16px; margin-bottom: 16px; }
.split-text ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.split-text li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.split-text li img { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }

/* ── add-on card (standalone service, sold outside the tiered plans) ── */
.addon-card {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 40px;
}
.addon-card-icon {
  width: 56px; height: 56px; flex-shrink: 0;
  background: var(--pink-200);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.addon-card-icon img { width: 28px; height: 28px; }
.addon-card-body { flex: 1; }
.addon-card-body h3 { font-size: 22px; margin: 10px 0 8px; }
.addon-card-body p { color: var(--text-muted); font-size: 15px; margin-bottom: 16px; max-width: 60ch; }
.addon-card-body ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.addon-card-body li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.addon-card-body li img { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; }
.addon-card-price {
  flex-shrink: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding-left: 32px;
  border-left: 1px solid var(--border);
}
.addon-card-price .price-amount { margin-bottom: 0; }

/* ── pricing ── */
/* Prices hidden site-wide for now (Aug 2026) — remove this rule to bring
   them back; the £ amounts are still in the markup, just tagged .price-hidden. */
.price-hidden { display: none !important; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
/* one-off website builds — two cards rather than three tiers */
.pricing-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin: 0 auto; }
.price-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.price-card.is-popular { background: var(--sg-dark); color: var(--white); border-color: var(--sg-dark); }
.price-card.is-popular .price-card-tag { color: var(--purple-300); }
.price-card.is-popular .price-amount { color: var(--white); }
.price-card.is-popular .price-amount .unit { color: rgba(255, 255, 255, 0.55); }
.price-card.is-popular li { color: rgba(255, 255, 255, 0.85); }
.price-card.is-popular li img { filter: brightness(0) invert(1); }
.price-card.is-popular .btn-outline { border-color: rgba(255, 255, 255, 0.4); color: var(--white); }
.price-card.is-popular .btn-outline:hover { background: var(--white); color: var(--sg-dark); }
.price-card-tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--purple-700); margin-bottom: 12px; }
.price-card h3 { font-size: 21px; margin-bottom: 8px; }
.price-card > p { font-size: 14px; opacity: 0.7; margin-bottom: 20px; }
.price-amount {
  font-family: 'Inter Tight', sans-serif;
  display: flex; align-items: baseline; gap: 4px;
  font-size: 40px; font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 24px;
  color: var(--purple-800);
}
.price-amount .unit { font-size: 15px; font-weight: 500; color: var(--text-muted); }
.price-amount .price-from { font-size: 15px; font-weight: 500; color: var(--text-muted); margin-right: 2px; }
/* muted grey would all but disappear on the highlighted card */
.price-card.is-popular .price-amount .price-from { color: rgba(255, 255, 255, 0.55); }
/* sits directly under the headline figure — e.g. what the plan plus its
   recommended ad budget comes to, since the ad spend is not ours to bill */
.price-note {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: -18px 0 22px;
}
.price-card.is-popular .price-note { color: rgba(255, 255, 255, 0.6); }
/* a saving or condition called out inside the feature list */
.price-card li.price-highlight { font-weight: 600; color: var(--purple-700); }
.price-card.is-popular li.price-highlight { color: var(--purple-300); }
.price-terms {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 4px;
}
.price-card.is-popular .price-terms { color: rgba(255, 255, 255, 0.55); border-top-color: rgba(255, 255, 255, 0.18); }
.price-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; flex: 1; }
.price-card li { font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.price-card li img { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; }

/* ── contact ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; }
.contact-info-list { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; }
.contact-info-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-info-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--purple-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-icon img { width: 20px; height: 20px; }
.contact-info-item h4 { font-size: 15px; margin-bottom: 2px; }
.contact-info-item p, .contact-info-item a { font-size: 14px; color: var(--text-muted); }
.contact-info-item a { text-decoration: underline; }

.contact-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px;
}
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-field label { font-size: 14px; font-weight: 600; }
.form-field input, .form-field textarea {
  font-family: inherit; font-size: 15px; padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--white); color: var(--sg-dark);
  transition: border-color 0.2s;
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--purple-500); }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-muted); opacity: 0.8; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* A text input carries an intrinsic width of roughly 20 characters, which a
   grid track honours as its minimum. Without this the pair refuses to shrink
   and pushes the whole page sideways on a phone. */
.form-field { min-width: 0; }
.form-note { font-size: 13px; color: var(--text-muted); margin-top: 12px; text-align: center; }

/* submission feedback from the HubSpot Forms API */
.form-status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1.5;
}
.form-status[data-state="pending"] { background: var(--purple-50); color: var(--text-muted); }
.form-status[data-state="success"] { background: var(--purple-100); color: var(--purple-900); }
.form-status[data-state="error"]   { background: #FCE9E9; color: #8A1C1C; }

/* ════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════ */
footer { background: #120A28; color: rgba(255, 255, 255, 0.6); padding: 48px 24px 32px; }
.footer-inner { max-width: var(--content-max); margin: 0 auto; }
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.footer-brand img { height: 24px; margin-bottom: 12px; }
.footer-brand p { font-size: 14px; max-width: 280px; }
.footer-links { display: flex; gap: 48px; flex-wrap: wrap; }
.footer-col h4 {
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; transition: color 0.2s; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 8px;
}

/* ════════════════════════════════════════
   REVEAL MOTION
   ════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════
   MOBILE FRAME  (Figma 400:1176)
   ════════════════════════════════════════ */
@media (max-width: 900px) {
  .only-desktop { display: none !important; }
  .only-mobile  { display: block; }

  /* One header now, the same on every page (Figma 429:1878): logo left,
     a Menu toggle right. Sticky rather than the old floated/pill
     treatments this replaces — it stays pinned to the top as the page
     scrolls, and still anchors the dropdown panel below via the panel's
     own `position: absolute`, same as a plain in-flow header would. */
  .site-header,
  .site-header--solid,
  .site-header--home {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    background: var(--white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* 20px top/bottom; the 24px sides match the mobile gutter everywhere else */
    padding: 20px 24px;
  }
  .site-header-inner { padding: 0; justify-content: space-between; }
  .site-header--solid .site-logo img,
  .site-header--home .site-logo img {
    width: 196.035px;
    height: 36px;
  }
  /* undo the desktop pill capsule the home page's logo sits in */
  .site-header--home .site-logo {
    display: block;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 40px;
    padding: 8px 8px 8px 12px;
    border: 1px solid var(--sg-dark);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--sg-dark);
    font-family: 'Inter Tight', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    cursor: pointer;
    transition: background 0.2s;
  }
  /* matches the panel's own open-state highlight in Figma */
  .mobile-menu-toggle[aria-expanded="true"] { background: rgba(25, 15, 54, 0.1); }
  .mobile-menu-toggle svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transform: rotate(180deg);
    transition: transform 0.2s;
  }
  .mobile-menu-toggle[aria-expanded="true"] svg { transform: none; }

  .mobile-menu-panel {
    display: block;
    position: absolute;
    left: 24px;
    right: 24px;
    top: 100%;
    margin-top: 16px;
    z-index: 55;
    background: var(--white);
    border: 1px solid rgba(25, 15, 54, 0.1);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 16px;
  }
  .mobile-menu-panel[hidden] { display: none; }
  .mobile-menu-links { list-style: none; }
  .mobile-menu-links a {
    display: block;
    padding: 12px 0;
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    color: var(--sg-dark);
  }
  .mobile-menu-links a.is-active { color: var(--purple-700); }
  .mobile-menu-actions { display: flex; gap: 8px; padding-top: 16px; }
  .mobile-menu-actions a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: var(--radius-pill);
    font-family: 'Inter Tight', sans-serif;
    font-weight: 500;
    font-size: 16px;
  }
  .mobile-menu-btn--dark { background: var(--sg-dark); color: var(--pink-200); }
  .mobile-menu-btn--outline { border: 1px solid var(--sg-dark); color: var(--sg-dark); }

  .hero-columns {
    flex-direction: column;
    align-items: stretch;
    padding-top: 48px;
    gap: 0;
  }
  .hero-col-text {
    flex: none;
    min-height: 0;
    padding: 0 24px;
    align-items: center;
  }
  .hero-content {
    max-width: none;
    align-items: center;
    gap: 24px;
  }
  .hero-eyebrow { display: none; }
  .hero h1 {
    max-width: none;
    text-align: center;
    font-size: 36px;
    line-height: 44px;
  }
  /* the mobile frame keeps the headline one colour */
  .hero-h1-accent { color: inherit; }
  .hero-pills { justify-content: center; }
  .pill { padding: 6px 12px; }
  .hero-actions {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
    width: 100%;
  }
  .hero-actions .btn-lg { width: 100%; height: 56px; padding: 0 24px; font-size: 17px; }

  /* stacked: the frame is full-width, so its own ratio drives the height
     again — don't let the desktop stretch rule override it */
  /* no gap: Figma stacks the image column straight onto the text column
     (404:1047), the apparent space is transparent area in the cut-out */
  .hero-col-image { flex: none; margin-top: 0; align-items: flex-end; }
  .hero-image { aspect-ratio: 402 / 471.094; }

  .trust { padding: 32px 24px; }
  .trust-inner { gap: 24px; }
  .trust-inner p { font-size: 16px; }

  /* ── mobile: one row, scrolling infinitely ──
     The track holds two identical sets. Each set carries its own trailing
     gap as padding-right, so the set's outer width is (content + gap) and
     translating the track by exactly -50% lands the clone precisely where
     the original was — a seamless loop with no jump. */
  .trust-logos {
    --marquee-gap: 40px;
    overflow: hidden;
    /* fade the logos in and out at the edges rather than clipping hard */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  }
  .trust-logos-track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    gap: 0;
    animation: trust-marquee 22s linear infinite;
    will-change: transform;
  }
  .trust-logos-set,
  .trust-logos-set--clone {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--marquee-gap);
    padding-right: var(--marquee-gap);
  }

  @keyframes trust-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* Reduced motion: stop the animation, but keep the row usable by
     letting it scroll by hand instead of hiding most of it. */
  @media (prefers-reduced-motion: reduce) {
    .trust-logos {
      overflow-x: auto;
      -webkit-mask-image: none;
      mask-image: none;
    }
    .trust-logos-track { animation: none; }
    .trust-logos-set--clone { display: none; }
  }

  .whoarewe { padding: 0 24px 40px; }
  .whoarewe-card {
    padding: 32px 24px;
    gap: 24px;
  }
  .whoarewe-heading-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .whoarewe-card h2 { font-size: 20px; }
  .whoarewe-subtitle {
    font-family: 'Inter Tight', sans-serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(25, 15, 54, 0.5);
  }
  .whoarewe-body { font-size: 20px; }

  /* keeps the export's 134:90 ratio */
  .avatars { width: 159px; height: 106px; }

  /* inner-page layouts collapse to one column */
  .pain-inner { grid-template-columns: 1fr; gap: 40px; }
  /* three-across squares are too small a target on mobile — back to two,
     and drop the forced square so the shorter mobile copy doesn't leave
     a mostly-empty tall card */
  .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pain-grid li { aspect-ratio: auto; padding: 20px; }
  .how-grid { grid-template-columns: 1fr; gap: 32px; }
  .services-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  /* side-by-side title + logo doesn't fit a single narrow column — stack them */
  .testimonial-card-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .testimonial-card-quote { display: none; }
  .testimonial-card-text { padding: 24px; }
  .testimonial-card-logo { left: 24px; }
  .testimonial-card-stat-sub { font-size: 18px; }
  .bento-3col { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid, .pricing-grid--two { grid-template-columns: 1fr; }
  /* Stacked, the plans read top-to-bottom instead of left-to-right, so
     lead with the flagship: Growth, Premium, then Hosting & Maintenance.
     Scoped to #plans so the two website build cards keep their order. */
  #plans .pricing-grid > :nth-child(1) { order: 3; }
  #plans .pricing-grid > :nth-child(2) { order: 2; }
  #plans .pricing-grid > :nth-child(3) { order: 1; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  /* first/last name stack rather than squeezing into half a phone width */
  .form-row { grid-template-columns: 1fr; }
  .split-row { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .split-row.reverse .split-media { order: -1; }
  .section-head.split { flex-direction: column; align-items: flex-start; }
  .section-head.split .section-sub { text-align: left; }
  .addon-card { flex-direction: column; align-items: flex-start; }
  .addon-card-price {
    border-left: none;
    padding-left: 0;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    width: 100%;
    align-items: flex-start;
  }
  .footer-top { flex-direction: column; }

  /* ── one 24px gutter, everywhere ──
     The section supplies it. .container was adding its own 24px on top,
     so content sat at 44px in sections that use one and 20px in those
     that don't — a visible step from block to block down the page.
     Sections keep their own horizontal padding; .container drops its. */
  .container { padding-left: 0; padding-right: 0; }
  section.page-section,
  .page-header,
  .cta {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 480px) {
  /* vertical rhythm only — the gutter above stays at 24px */
  section.page-section { padding-top: 60px; padding-bottom: 60px; }
  .page-header { padding-top: 56px; padding-bottom: 64px; }
  .cta { padding-top: 72px; padding-bottom: 72px; }
  .stats-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 24px 20px; }
  .addon-card { padding: 28px 24px; }
}

/* ════════════════════════════════════════
   CASE STUDY — editorial treatment
   Modelled on the Merkil project-page language the client asked for:
   left-aligned, quiet labels instead of pills, square full-bleed imagery
   with no shadow, tighter display tracking, and a lot more air. Scoped to
   .case-page so the other eight pages keep the existing look.
   ════════════════════════════════════════ */
.case-page .case-wide {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* hero: no badge pill, no centring, just a kicker and the headline */
.case-page .page-header--case {
  background: var(--white);
  text-align: left;
  padding: 72px 0 48px;
}
.case-page .page-header--case h1 {
  /* ~2-3 lines at desktop; .page-header h1 centres itself with auto margins */
  max-width: 22ch;
  margin: 0;
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
/* .page-header p sets `margin: 16px auto 0`, which centres the kicker */
.case-page .page-header--case .case-kicker {
  font-size: 15px;
  color: var(--text-muted);
  max-width: none;
  margin: 0 0 20px;
}

/* the site itself, in a rounded card, panning downward as the card
   scrolls through the viewport (see initCaseShowcase in main.js) - the
   track image is taller than the card, so most of it starts off-screen */
.case-showcase-card {
  position: relative;
  overflow: hidden;
  height: clamp(280px, 53vw, 630px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.case-showcase-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
}
.case-showcase-track img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .case-showcase-card { border-radius: var(--radius-md); }
}

/* quiet section labels, in place of uppercase micro-eyebrows */
/* .case-page prefix so this outranks `.case-overview-body p`, which would
   otherwise drag the label down to body size */
.case-page .case-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--sg-dark);
  max-width: none;
  margin-bottom: 20px;
}

.case-page section.page-section { padding: 104px 0; }

/* overview beside the client meta */
.case-overview-grid,
.case-challenge-grid {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: 72px;
  align-items: start;
}
.case-overview-body p,
.case-challenge-body p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 60ch;
}
.case-overview-body p + p,
.case-challenge-body p + p { margin-top: 18px; }
.case-challenge-body strong { color: var(--sg-dark); font-weight: 600; }

/* Merkil's meta list: plain sentence-case labels, no letter-spacing tricks */
.case-meta { display: grid; gap: 28px; }
.case-meta dt {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.case-meta dd {
  font-family: 'Inter Tight', sans-serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--sg-dark);
}

.case-portrait { margin: 0; }
.case-portrait img { width: 100%; height: auto; display: block; }

/* left-aligned section headers, tighter tracking */
.case-page .section-head { margin-bottom: 56px; }
.case-page .section-title { letter-spacing: -0.02em; }
.case-page .case-block-text h3 { letter-spacing: -0.02em; }

/* screenshots: square and flat, the way the reference treats them */
.case-page .case-figure img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.case-page .case-figure figcaption {
  font-size: 15px;
  color: var(--text-muted);
  margin-top: 14px;
}

@media (max-width: 900px) {
  .case-page .page-header--case { padding: 48px 0 32px; }
  .case-page section.page-section { padding: 64px 0; }
  .case-overview-grid,
  .case-challenge-grid { grid-template-columns: 1fr; gap: 36px; }
  .case-portrait { max-width: 420px; }
  .case-page .section-head { margin-bottom: 36px; }
}

/* ════════════════════════════════════════
   WORK INDEX
   ════════════════════════════════════════ */
/* flex, not grid: a grid's 1fr tracks always stretch to fill the row, so
   fewer cards than columns leaves the odd ones flush-left with dead space
   beside them. Flex-wrap plus justify-content:center collapses that gap
   and centers whatever's left in an underfull last row too. */
.work-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}
.work-card {
  display: block;
  flex: 1 1 380px;
  max-width: 420px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s;
}
.work-card:hover { transform: translateY(-4px); border-color: var(--purple-300); }
.work-card-media { aspect-ratio: 16 / 10; overflow: hidden; }
.work-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.work-card-body { padding: 28px; }
.work-card-client { font-size: 14px; color: var(--text-muted); margin-bottom: 6px; }
.work-card-stat {
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sg-dark);
  margin-bottom: 16px;
}
.work-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--sg-dark);
}
.work-card-link img { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.work-card:hover .work-card-link img { transform: translateX(3px); }

@media (max-width: 640px) {
  .work-card { flex-basis: 100%; max-width: none; }
}

/* ════════════════════════════════════════
   CASE STUDY
   ════════════════════════════════════════ */
/* the homepage result card's link through to the full study */
.testimonial-card-link {
  display: inline-block;
  margin-top: 16px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--pink-200);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.testimonial-card-link:hover { color: var(--white); }

/* ── workstream blocks ──
   Five blocks, deliberately not five identical cards. The screenshots are
   the argument here, so they break out past the 1040px content column and
   the composition changes between blocks to stop the page reading as a
   template. Text keeps a ~68ch measure regardless of how wide the shots go. */
.case-block { margin-top: 96px; }
.case-block:first-of-type { margin-top: 0; }

.case-wide {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.case-block-text { max-width: 680px; }
.case-block-text h3 {
  font-size: clamp(24px, 2.4vw, 30px);
  color: var(--sg-dark);
  margin-bottom: 12px;
}
.case-block-text p { color: var(--text-muted); font-size: 17px; line-height: 1.7; }
.case-block-text a {
  color: var(--purple-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* a screenshot, at whatever width its container allows */
.case-figure { margin-top: 28px; }
.case-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* screenshots are flat UI, so a tinted shadow reads better than a hard edge */
  box-shadow: 0 18px 50px rgba(25, 15, 54, 0.10);
}
.case-figure figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--purple-500);
}

/* the secondary shot sits narrower and pushed right, so two stacked
   screenshots don't read as two identical slabs */
.case-figure--inset {
  max-width: 880px;
  margin-left: auto;
}

/* split blocks: text one side, screenshots the other */
.case-split-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 56px;
  align-items: start;
}
.case-split-grid--reverse { grid-template-columns: 1.35fr 1fr; }
.case-split-grid--reverse .case-block-text { order: 2; }
.case-split-grid--reverse .case-split-figures { order: 1; }
.case-split-figures { display: grid; gap: 32px; }
.case-split-grid .case-block-text { position: sticky; top: 120px; }

/* the reporting block, which is the point the whole system builds to.
   It runs straight into the results section rather than leaving a strip of
   white between two dark blocks, which read as a seam. The two together
   make one dark payoff: here is the measurement, here is what it measured. */
.case-block--feature {
  background: var(--sg-dark);
  padding: 80px 0;
  margin-top: 96px;
}
/* matching section.page-section's specificity, or its 88px wins */
section.page-section.case-work { padding-bottom: 0; }
.case-result { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.case-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.case-block--feature .case-block-text h3 { color: var(--white); }
.case-block--feature .case-block-text p { color: rgba(255, 255, 255, 0.72); }
.case-block--feature .case-figure { margin-top: 0; }
.case-block--feature .case-figure img {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}
.case-block--feature .case-figure figcaption { color: var(--purple-300); }

@media (max-width: 900px) {
  .case-block { margin-top: 64px; }
  .case-split-grid,
  .case-split-grid--reverse,
  .case-feature-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* sticky text would trap the reader above the images once stacked */
  .case-split-grid .case-block-text { position: static; }
  .case-split-grid--reverse .case-block-text { order: 1; }
  .case-split-grid--reverse .case-split-figures { order: 2; }
  .case-figure--inset { max-width: none; }
  .case-block--feature { padding: 56px 0; margin-top: 64px; }
}

/* the headline number */
.case-result { background: var(--sg-dark); }
.case-result-inner { text-align: center; max-width: 860px; margin: 0 auto; }
.case-result-stats {
  display: flex;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}
.case-result-stats > div { flex: 1 1 280px; max-width: 360px; }
.case-result-stat {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--pink-200);
}
.case-result-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 17px;
  line-height: 1.4;
  color: var(--white);
  margin-top: 10px;
}
.case-result-quote { margin-top: 40px; }
.case-result-quote p {
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.case-result-quote cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 15px;
  color: var(--white);
}

/* Google-style review stars above the quote */
.case-stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 20px;
}
.case-stars img { width: 22px; height: 22px; }

/* ════════════════════════════════════════
   LEGAL / LONG-FORM PROSE  (privacy notice)
   The only place on the site with sustained body copy, so it gets a
   measure of its own rather than the full content width.
   ════════════════════════════════════════ */
.legal-content {
  max-width: 720px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-muted);
}
.legal-content .legal-meta {
  font-size: 14px;
  color: var(--purple-500);
  margin-bottom: 40px;
}
.legal-content h2 {
  font-size: 26px;
  color: var(--sg-dark);
  margin-top: 48px;
  margin-bottom: 14px;
}
.legal-content h3 {
  font-size: 19px;
  color: var(--sg-dark);
  margin-top: 32px;
  margin-bottom: 10px;
}
.legal-content > :first-child { margin-top: 0; }
.legal-content p { margin-bottom: 16px; }
.legal-content ul {
  margin: 0 0 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-content li { padding-left: 4px; }
.legal-content strong { color: var(--sg-dark); font-weight: 600; }
.legal-content a {
  color: var(--purple-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-content code {
  font-size: 15px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--purple-50);
  color: var(--purple-700);
}

/* the footer's legal row — a link and the cookie control sitting together */
.footer-bottom-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-cookie-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.footer-cookie-link:hover { color: var(--white); }

/* ════════════════════════════════════════
   COOKIE CONSENT BANNER
   Injected by js/analytics.js, and only while the visitor has yet to
   answer. Above everything else on the page — the mobile menu panel,
   the tallest thing here otherwise, sits at 55.
   ════════════════════════════════════════ */
.consent-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.14);
  animation: consent-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes consent-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .consent-banner { animation: none; }
}

/* Dims and blocks the rest of the page while the banner is unanswered —
   mobile only (desktop stays non-modal, see js/analytics.js). Sits just
   under the banner's own z-index so it covers everything else, including
   the mobile CTA bar underneath. */
.consent-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
@media (max-width: 900px) {
  .consent-backdrop {
    background: rgba(25, 15, 54, 0.55);
    pointer-events: auto;
    animation: consent-backdrop-in 0.4s ease;
  }
  @keyframes consent-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .consent-backdrop { animation: none; }
  }

  body.consent-modal-open { overflow: hidden; }
}

.consent-banner-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}
.consent-banner-text a {
  color: var(--purple-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.consent-btn {
  height: 44px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.consent-btn:hover { opacity: 0.85; }
.consent-btn--accept { background: var(--sg-dark); color: var(--pink-200); }
.consent-btn--decline { background: transparent; border-color: var(--sg-dark); color: var(--sg-dark); }

/* Narrower than the 900px mobile frame on purpose: the row only actually
   runs out of room once the text and both buttons can't share a line. */
@media (max-width: 600px) {
  .consent-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
  }
  .consent-banner-actions .consent-btn { flex: 1; }
}

/* ════════════════════════════════════════
   MOBILE CTA BAR (SG Kit, Figma node 400:1803)
   Floating "Book a free review" / WhatsApp bar, mobile only. Slides up
   once the visitor is past the fold — reuses the has-scrolled state
   main.js already sets for the desktop header, rather than a second
   scroll listener.
   ════════════════════════════════════════ */
.mobile-cta-bar { display: none; }

@media (max-width: 900px) {
  /* room at the foot of the page so the floating bar never sits over the
     last row of footer links */
  footer { padding-bottom: calc(32px + 96px + env(safe-area-inset-bottom)); }

  .mobile-cta-bar {
    display: flex;
    gap: 12px;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 55;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 12px;
    background: var(--white);
    border-radius: var(--radius-pill);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16);
    transform: translateY(calc(100% + 32px));
  }
  .has-scrolled .mobile-cta-bar { transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .mobile-cta-bar { transition: none; }
  }

  .mobile-cta-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-radius: var(--radius-pill);
    font-family: 'Inter Tight', sans-serif;
    font-weight: 500;
    font-size: 16px;
    transition: opacity 0.2s;
  }
  .mobile-cta-btn:active { opacity: 0.85; }
  .mobile-cta-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
  .mobile-cta-btn--dark { background: var(--sg-dark); color: var(--pink-200); }
  .mobile-cta-btn--whatsapp { background: #25D366; color: var(--white); }
}