/* =========================================================
   INTEGRAL CF  (licensed full set)
   ========================================================= */
@font-face {
  font-family: "Integral CF";
  src: url("../fonts/integral-cf/IntegralCF-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Integral CF";
  src: url("../fonts/integral-cf/IntegralCF-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Integral CF";
  src: url("../fonts/integral-cf/IntegralCF-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Integral CF";
  src: url("../fonts/integral-cf/IntegralCF-Heavy.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   DESIGN TOKENS (Bay Eight palette — matches Canva mockup)
   ========================================================= */
:root {
  --color-bg: #050505;
  --color-surface: #0c0c0c;
  --color-text: #f7f4eb;
  --color-muted: #c8c8c8;

  /* Brand pinks — Canva spec */
  --color-brand:    #E82276;   /* hero title + subtitle — matches Canva element rgb(232,34,118) */
  --color-brand-2:  #E91B77;   /* logo wordmark (sampled from logo.png) */

  /* Lime accent — used on the OUR CLIENTS callout eyebrow (matches the
     bright yellow-green in the Canva mockup). */
  --color-lime:     #C8F03B;

  /*
    Display stack — Integral CF first (paid font; only used if installed
    locally), Big Shoulders Display Black as the loaded Google fallback.
  */
  --font-display: "Integral CF", "Big Shoulders Display", "Anton", Impact, sans-serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Opacity for hero text (title + Miami photo). */
  --sub-opacity: 0.65;
  /* Stronger fade — subtitle + tagline.
     0.1 = 90% transparent. */
  --sub-opacity-soft: 0.1;

  --container: 1280px;
  --gutter: clamp(1.25rem, 3.5vw, 2.5rem);

  /* Shared gap between sibling cards / columns across sections — How To
     Book steps, Reviews cards, Studios stats row, Engineers cards, Build
     columns — so inter-card spacing reads uniform page-wide. Retune here
     to change every section's card gap at once. */
  --card-gap: clamp(0.85rem, 1.5vw, 1.25rem);

  /* Shared body / paragraph text size across every section (the Reviews
     body copy is the reference), so descriptive text reads uniform
     page-wide. Retune here to resize all body text at once. */
  --body-size: clamp(0.95rem, 1.2vw, 1.1rem);

  /* Unified vertical rhythm for major content sections so the
     gap above/below each block is consistent across the page,
     instead of each section quoting its own clamp(). Edit here
     to retune the entire page at once. */
  --section-py: clamp(5rem, 8vw, 7rem);

  /* Standard section heading size for the page's main blocks
     (How To Book, Engineers, Build, Reviews). FAQ + Contact +
     Footer override this with their own scale. */
  --section-title-size: clamp(2.25rem, 5.2vw, 4.25rem);

  --radius: 14px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Match body's overflow-x: hidden — some browsers (and Lenis smooth
     scroll) ignore the body rule unless html clips too. */
  overflow-x: hidden;
}

/* Lenis required classes */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  /* Kill any horizontal page scroll caused by wide content (e.g. the
     carousel track inside an overflow-hidden viewport). */
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }

/* =========================================================
   LAYOUT
   ========================================================= */
.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

/* =========================================================
   HEADER  (just the logo top-left — top-right is empty in Canva)
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-block: 1.25rem;
  transition: background 0.3s var(--ease), backdrop-filter 0.3s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(5, 5, 5, 0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(247, 244, 235, 0.06);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Bay Eight stacked wordmark — fully HTML/CSS so it scales crisp at
   any DPI. "BAY EIGHT STUDIOS" stacks vertically in heavy display
   type; "Miami" sits below as an italic cursive script flourish. */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  text-decoration: none;
  color: var(--color-brand);
  margin-left: clamp(-3rem, -3vw, -1.5rem);   /* pull the wordmark closer to the viewport edge */
}
.logo__stack {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(0.95rem, 1.2vw, 1.2rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.logo__line { display: block; }
.logo__miami {
  align-self: flex-end;
  width: clamp(38px, 4vw, 56px);
  height: auto;
  margin-top: 0.05em;          /* tiny nudge down */
  margin-right: -1rem;         /* nudge further past the right edge of "Studios" */
}

/* Mobile-only sticky CTA — sits to the right of the logo inside
   the header. Hidden by default; fades in once the header gets
   .is-scrolled (i.e., user has scrolled past the top of the
   hero). Desktop: hidden entirely — the page already has the
   hero pill row + the "Ready to Record" section CTAs. */
.site-header__cta {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(247, 244, 235, 0.85);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.site-header__cta a {
  color: var(--color-brand);
  transition: color 0.2s var(--ease);
}
.site-header__cta a:hover { color: var(--color-lime); }
/* Phone link in the sticky CTA — icon + number on one inline-flex
   row. No underline; the icon does the visual cueing. */
.site-header__cta-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 900;
}
.site-header__cta-icon {
  width: 1em;
  height: 1em;
  display: inline-flex;
  flex-shrink: 0;
}
.site-header__cta-icon svg { width: 100%; height: 100%; }

/* Reveal once the header has scroll-state. */
.site-header.is-scrolled .site-header__cta {
  opacity: 1;
  visibility: visible;
}

/* Desktop — hide entirely, never appears. */
@media (min-width: 721px) {
  .site-header__cta { display: none; }
}

/* =========================================================
   PILLS  (solid white pills, black caps text — like Canva)
   Low subtle radius (≈10px) to match the Canva design's
   soft-rounded-rectangle look — NOT a fully rounded pill.
   ========================================================= */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55em 0.95em;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #f7f4eb;
  color: #050505;
  border: 1px solid #f7f4eb;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
  will-change: transform;
}
.pill:hover {
  transform: translateY(-1px);
  background: #0a0a0a;
  color: var(--color-lime);
  border-color: var(--color-lime);
}

/* Highlighted pill (TEXT) — white bg, magenta text */
.pill--accent { color: var(--color-brand); }
.pill--accent:hover { color: var(--color-brand-2); }

/* Phone-number variant: small phone icon inline-flexed before the
   number so the pill literally shows what tapping it will do.
   Tightens letter-spacing slightly so the digits read as one unit. */
.pill--phone {
  gap: 0.45em;
  letter-spacing: 0.04em;
}
.pill__icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.pill__icon svg { width: 100%; height: 100%; }

/* ---- HERO-ONLY pill hover ----
   Hero pills should drive calls/contact, so their hover overrides the
   site-wide dark/lime hover: stay white, paint the word pink, and lift
   + scale with a soft brand-tinted shadow. Scoped under .hero__cta so
   pills elsewhere on the page (e.g. floating contact bar) are unchanged. */
.hero__cta .pill {
  transition: transform 0.25s var(--ease),
              background-color 0.25s var(--ease),
              color 0.25s var(--ease),
              border-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.hero__cta .pill:hover,
.hero__cta .pill:focus-visible {
  background: #f7f4eb;
  color: var(--color-brand);
  border-color: var(--color-brand);
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 26px -12px rgba(232, 34, 118, 0.55);
}
.hero__cta .pill--accent:hover,
.hero__cta .pill--accent:focus-visible {
  color: var(--color-brand-2);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  /* 92vh = fallback for old browsers.
     92svh = "small viewport height" — locks to the smaller viewport size
     (with mobile URL bar visible) and DOES NOT recalculate when the URL bar
     collapses on scroll. Without this, mobile browsers visibly stretch the
     hero by ~60-80px the moment you start scrolling. */
  height: 92vh;
  height: 92svh;
  display: flex;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(5rem, 8vw, 7rem);
  /* Smaller bottom padding pulls the logo marquee closer to the hero edge */
  padding-bottom: clamp(0.4rem, 1vw, 0.9rem);
}

/* Inner: vertical column. Main content centered; trusted-by pinned to bottom. */
.hero__inner {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

/* Main centered content block (title + subtitle + tagline + CTAs) */
.hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;                                       /* tight vertical stacking */
}

/* Restore a little gap before the tagline + CTAs so they don't crowd
   the title/subtitle (which we just pulled tight). */
.hero__tagline { margin-top: 0.7em; }
.hero__cta     { margin-top: 1.25rem; }

/* Title wrapper — sized to the title so the Miami PNG can be anchored
   absolutely under the right edge of "STUDIOS". */
.hero__title-wrap {
  position: relative;
  display: inline-block;
}

/* Row 1: BAY EIGHT STUDIOS
   - weight 800
   - bigger font-size
   - positive letter-spacing so the line extends further horizontally
   - more transparent via --sub-opacity */
.hero__title {
  font-family: var(--font-display);
  font-weight: 800;                              /* heaviest — change 100–900 */
  font-size: clamp(2.5rem, 7vw, 108px);          /* size — change max px */
  line-height: 1;                                /* tighter — was 1.1 */
  letter-spacing: 0.02em;                        /* horizontal spread */
  color: var(--color-brand);                     /* #E82276 */
  text-transform: uppercase;
  white-space: nowrap;                           /* keep on a single line */
  margin: 0;
  opacity: var(--sub-opacity);                   /* visibility — see :root */
}

/* Row 2: subtitle (Miami PNG is no longer inline — it's absolute) */
.hero__sub {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2.8vw, 38px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-brand);                    /* #E82276 — same as title */
  text-transform: uppercase;
  opacity: var(--sub-opacity);                  /* same opacity as title */
  margin: 0;
}

/* Miami cursive PNG — absolute, sits BELOW "STUDIOS" with a slight
   horizontal overhang past the right edge. Same -6deg tilt. */
.hero__miami {
  position: absolute;
  right: -1.2em;                               /* push past STUDIOS' right edge */
  top: 95%;                                    /* sit entirely below the letters */
  height: clamp(34px, 3.8vw, 54px);
  width: auto;
  transform: rotate(-6deg);
  transform-origin: left center;
  pointer-events: none;
  opacity: var(--sub-opacity);                 /* photo is also faded */
  z-index: 2;
}

/* Tagline: gray (#A9A9A9), tighter spacing */
.hero__tagline {
  margin: 0.5em 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(0.85rem, 1.25vw, 1.1rem);
  color: #A9A9A9;
  opacity: var(--sub-opacity);                  /* same opacity as title */
}

/* CTA pill row */
.hero__cta {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}

/* Trusted-by section pinned to bottom of hero */
.hero__trusted {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
}
/* TRUSTED BY label + brand logos — full opacity (no fading).
   Uses Helvetica Now Display Bold (paid font — assumed installed locally
   on the design machine). Falls back to Helvetica Neue / Helvetica / Arial.
   Size: just a touch smaller than the hero tagline so the hierarchy
   stays: tagline > label > everything else. */
.hero__trusted-label {
  margin: 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(0.72rem, 1.05vw, 0.95rem);
  color: var(--color-text);
  opacity: var(--sub-opacity);                  /* match hero sub/tagline fade */
}
.hero__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  letter-spacing: 0.04em;
  color: var(--color-text);
}

/* =========================================================
   LOGO MARQUEE (Trusted-by)
   - .marquee is the viewport (overflow hidden, fades on the edges)
   - .marquee__track holds two identical .marquee__group children;
     main.js animates the track left by exactly one group's width
     and wraps with a modifier for an infinite seamless loop.
   - Logos are grayscale + faded by default and become full color
     with a soft lift on hover. The whole marquee pauses on hover.
   ========================================================= */
.marquee {
  width: 100%;
  overflow: hidden;
  /* Soft fade on the left and right edges so logos enter/leave gently
     instead of popping at the viewport boundary. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.marquee__track {
  display: flex;
  width: max-content;       /* track grows to fit both groups inline */
  will-change: transform;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-inline: clamp(1rem, 2.5vw, 2rem);  /* spacing between the two groups */
  flex-shrink: 0;
}

.marquee__logo {
  height: clamp(66px, 7.2vw, 102px);
  width: auto;
  max-width: 480px;
  object-fit: contain;
  /* Black-and-white default state */
  filter: grayscale(1) brightness(1.6) contrast(0.9);
  opacity: 0.55;
  transition:
    filter 0.4s var(--ease),
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease);
  /* Subtle base position so hover can lift without layout shift */
  transform: translateY(0) scale(1);
}

.marquee__logo:hover {
  filter: grayscale(0) brightness(1) contrast(1)
          drop-shadow(0 6px 14px rgba(232, 34, 118, 0.35));
  opacity: 1;
  transform: translateY(-3px) scale(1.08);
}

/* Pause the GSAP marquee when the user hovers anywhere inside it.
   The JS reads this attribute, so this CSS is just a visual hint. */
.marquee[data-paused="true"] .marquee__track {
  /* GSAP handles the actual pause — nothing needed here, but kept as
     an explicit anchor for the state. */
}

/* Looping hero video — full-bleed cover, muted */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Solid fallback color while the video buffers */
  background: #0a0a0a;
  pointer-events: none;
}

/* Overlay on top of the video.
   Top: 83% pure-black for dramatic contrast over the video.
   Bottom: fades into solid #111 — same color as the next section
   (.clients) — so the seam under the "Trusted by" logos disappears
   when scrolling. */
.hero__overlay {
  position: absolute;
  inset: 0;
  /* Explicit dimensions as a belt-and-braces guard in case some
     mobile browsers misresolve `inset: 0` on an absolutely-positioned
     overlay during early layout (the symptom: bright video frames
     bleed through at the left/right edges). */
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.83) 0%,
    rgba(0, 0, 0, 0.83) 55%,
    rgba(17, 17, 17, 0.95) 80%,
    #111111 100%
  );
}

/* Mobile-only: slightly darker overlay so the bright frames in the
   video (e.g. the white "YOU ARE STILL THE F..." poster) don't peek
   through the 17% transparency in the center while the darker studio
   walls on the left/right look like uncovered edges. Still keeps
   the video visible underneath. */
@media (max-width: 720px) {
  .hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.88) 55%,
      rgba(17, 17, 17, 0.96) 80%,
      #111111 100%
    );
  }
}

/* Hidden state for GSAP entrance */
/* Hero entrance animation removed — was causing jarring jump on load */
.reveal-hero { /* no transform — appears in place */ }

/* =========================================================
   OUR CLIENTS
   Layout: a full-bleed marquee of artist photos in the background
   (full color, drifting right-to-left) with a centered black
   rounded callout pill sitting in front of it. The callout uses a
   lime eyebrow + a giant white featured artist name with a brand-
   pink dot at the end. The featured name cycles in main.js.
   ========================================================= */
.clients {
  position: relative;
  /* --clients-bottom-gap: section's bottom padding (gap from marquee
     bottom down to section three).
     --clients-callout-bottom: where the callout sits relative to the
     section's bottom edge. Smaller than the gap means the callout
     drops down into the padding area while its top still overlaps
     the marquee — moving it visually lower without losing overlap. */
  --clients-bottom-gap:     clamp(12rem, 14vw, 13rem); /* +4rem of bottom padding */
  /* callout-bottom is +4rem (was negative spill) so the pill stays
     exactly where it was relative to the marquee photos — the extra
     bottom padding shows up as visible dark space BELOW the pill,
     between it and section three. */
  --clients-callout-bottom: clamp(3rem, 3vw, 4rem);

  padding-top:    clamp(6.5rem, 9vw, 8rem); /* reverted from the "huge" value */
  padding-bottom: var(--clients-bottom-gap);
  background: #111111;          /* match the next section (.section-three) so the two blend seamlessly */
  /* overflow stays visible so the callout can extend past the section's
     bottom edge into section three. The marquee has its own overflow:hidden
     + mask-image, so removing it here doesn't affect the marquee clipping. */
  overflow: visible;
  z-index: 2; /* keeps the callout above section three's background */
}

/* Marquee viewport — full-bleed, soft fades on left/right edges */
.clients__marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right, transparent 0, #000 4%, #000 96%, transparent 100%
  );
          mask-image: linear-gradient(
    to right, transparent 0, #000 4%, #000 96%, transparent 100%
  );
}

.clients__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.clients__group {
  display: flex;
  align-items: stretch;
  gap: clamp(0.2rem, 0.45vw, 0.4rem);
  padding-inline: clamp(0.1rem, 0.25vw, 0.2rem);
  flex-shrink: 0;
}

/* Single artist card — 5:6 portrait + small caption underneath */
.artist-card {
  margin: 0;
  width: clamp(200px, 19vw, 280px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.artist-card__img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  /* Photos render in full color by default now — no grayscale */
}

.artist-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(0.7rem, 0.85vw, 0.85rem);
  color: rgba(247, 244, 235, 0.72);
  text-align: center;
}

/* Centered overlay pill — absolutely positioned over the marquee.
   Sits low on the photo row: anchored near the bottom so it overlaps
   only the lower portion of the photos (the "-30" overlap was too
   high; this drops the pill so most of each face stays visible). */
.clients__callout {
  position: absolute;
  left: 50%;
  /* Lower than the section's padding-bottom — the callout drops down
     into the padding area so visually it sits closer to section three,
     while its top still overlaps the marquee. */
  bottom: var(--clients-callout-bottom);
  transform: translateX(-50%);
  width: min(94%, 1240px);
  padding: clamp(1.5rem, 2.8vw, 2.5rem) clamp(1.5rem, 3.4vw, 3rem);
  background: #000;
  border-radius: clamp(14px, 1.4vw, 20px);
  border: 3px solid rgba(247, 244, 235, 0.73);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.6);
  text-align: center;
  z-index: 2;
}

.clients__callout-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.1rem, 3vw, 2.4rem);
  line-height: 1.05;
  color: var(--color-lime);
}

.clients__callout-name {
  margin: clamp(0.5rem, 1vw, 0.85rem) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  /* Slightly smaller cap so long names ("French Montana", "Gloria
     Estefan") still fit, and force the name to stay on a single line. */
  font-size: clamp(2.25rem, 6.5vw, 5.75rem);
  line-height: 1;
  color: #f7f4eb;
  white-space: nowrap;
  overflow: hidden;
  /* Flex aligns the leading pink dot to the vertical midpoint of
     the uppercase name; justify-content centers the dot+name group
     horizontally within the callout. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.22em;
}

/* Pink dot that precedes the featured artist name. Sized in em so it
   scales with the name's responsive font-size and is perfectly round.
   The flex parent centers it on the line-box; the extra translateY
   nudges it up so its center sits at the cap-height midpoint instead
   of the line-box midpoint (the cap-height sits ~0.06em above center
   in the Integral CF / display-font stack). */
.clients__callout-dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-brand);
  opacity: 0.6;
  flex-shrink: 0;
  transform: translateY(0.08em);
}

/* Fade hook used by main.js when cycling the featured name —
   short transition so the rapid 900ms cycle feels snappy. */
[data-featured-name] {
  display: inline-block;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
[data-featured-name].is-swapping {
  opacity: 0;
  transform: translateY(4px);
}

/* =========================================================
   SECTION THREE — full-width, content TBD
   Top padding matches .clients's bottom padding so the two sections
   read as one continuous rhythm. Bottom padding kept symmetrical
   for now until the section's actual content arrives.
   ========================================================= */
.section-three {
  position: relative;
  width: 100%;
  /* Tighter top/bottom padding so the section reads as a compact
     pill — more content, less surrounding dead space. */
  padding-top:    clamp(3rem, 4.5vw, 4.25rem);
  padding-bottom: clamp(3.5rem, 5vw, 4.75rem);
  background: #111111;
  /* Lower than .clients so the spilled-over callout pill stays in front. */
  z-index: 1;
}

/* Studios uses the SAME standard container width as every other section
   so its margins-from-edge (and card proportions) line up page-wide. */
/* Standard container width for everything in this section (heading, perks
   bar, suite carousels) so they all share the same left edge. */
.section-three > .container {
  width: min(100% - (var(--gutter) * 2), var(--container));
}
/* ONLY the badge + intro + stats/review cards use the wider envelope, so
   those two cards have room to sit side-by-side without cramming. The suite
   carousels + perks bar stay at the standard width and line up together. */
.section-three > .container.studios {
  width: min(100% - (var(--gutter) * 2), 1500px);
}
.section-three > .container.studios__head {
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}

/* =========================================================
   OUR STUDIOS badge + stats row (inside .section-three)
   The heading lives in its own .studios__head container above this.
   Two columns: left holds the 25-year badge, right holds the
   description + stats + Google reviews row. Stacks below 820px.
   ========================================================= */
.studios {
  display: grid;
  /* Single row: 25-year badge on the left, stats + Google reviews on
     the right. Left column is widened (was 0.75fr) so the bigger
     25-year badge image can render at its prominent max-clamp size
     without being squeezed by the column width. Matches the Canva mock. */
  grid-template-columns: minmax(280px, 1.15fr) minmax(0, 2.5fr);
  grid-template-areas:
    "left  right";
  align-items: center;
  /* Tight column-gap so the 25-year badge sits right next to the
     stats card — matches the Canva mock where the two read as a
     visually paired row, not as two isolated halves. */
  column-gap: clamp(0.75rem, 1.5vw, 1.5rem);
  row-gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

/* Lime "LEARN WHY..." subtitle — sits in the standard-width
   .studios__head container directly beneath the OUR STUDIOS title. */
.studios__intro {
  /* Subtitle sits directly under the title, flush to the same edge —
     matching the title→eyebrow spacing used by every other section. */
  margin: clamp(0.85rem, 1.4vw, 1.1rem) 0 0;
}

/* Left column ------------------------------------------------ */
.studios__left {
  grid-area: left;
  display: flex;
  flex-direction: column;
  /* Push the 25-year badge to the RIGHT edge of the left column so
     it sits close to (just left of) the stats card on the right —
     matches the Canva mock. */
  align-items: flex-end;
  gap: 0;
}

/* "OUR STUDIOS" — section title. Uses the shared --section-title-size
   and the same absolute pink-dot bullet as every other section title,
   so its size and margin-from-edge match the rest of the page. */
.studios__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--section-title-size);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #f7f4eb;
  display: inline-block;
  position: relative;
}
/* Solid brand-pink bullet sitting to the left of "OUR STUDIOS".
   Sized + tinted to match the SSL Suite side-label dot exactly
   (see .rooms-side-label__dot) — same brand pink at 60% opacity,
   same 20-36px responsive scale. */
.studios__title-bullet {
  /* Absolute pink dot hanging to the LEFT of the title (into the
     gutter) — identical to every other section bullet, so the title
     TEXT itself sits flush to the container edge. */
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 0.3em;
  transform: translateY(calc(-50% + 0.08em));
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-brand);
  opacity: 0.6;
}
/* Legacy inline dot (no longer used in HTML — kept harmless for compat). */
.studios__eyebrow-dot { color: var(--color-brand); }

.studios__badge {
  /* Bigger — matches the design's prominent 25-year logo. */
  width: clamp(240px, 28vw, 400px);
  height: auto;
  /* Small positive margin so the badge sits a touch lower than its
     natural flex-start position — gives a tiny visual offset from
     the heading row above. */
  margin-top: clamp(0.5rem, 1vw, 1rem);
  /* Faded to ~55% opacity per the Canva design — the badge reads as
     a subtle background mark rather than a vibrant focal element. */
  opacity: 0.55;
  /* The asset is a single-color line drawing, no background — fine on #111 */
}

/* Right column ----------------------------------------------- */
.studios__right {
  grid-area: right;
  display: flex;
  flex-direction: column;
  gap: clamp(0.15rem, 0.25vw, 0.25rem);
  padding-top: 0;
  /* min-width: 0 lets the flex item (this column) shrink below its
     content's intrinsic width — without this, a nowrap heading or
     wide stats row pushes the whole grid past the viewport. */
  min-width: 0;
}

/* "LEARN WHY..." heading — Integral CF heavy.
   Sized so it stays on a single line in the right column at common
   desktop widths and is just slightly bigger than the description below. */
.studios__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-lime);
  /* Allow wrap so the heading never pushes the right column wider than
     its allotted track (which would force horizontal page scroll). */
  white-space: normal;
  overflow-wrap: break-word;
}
.studios__heading-dot { color: var(--color-brand); }
/* Lime emphasis on "Miami's Top Recording Studio" inside the heading. */
.studios__heading-accent { color: var(--color-lime); }

/* Description — Helvetica Now Display Regular, slightly smaller than
   the heading so there's a clear hierarchy without dwarfing it. */
.studios__desc {
  margin: 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--body-size);
  line-height: 1.4;
  color: #f7f4eb;
}

/* =========================================================
   STATS row (inside .studios__right) — TWO cards side by side:
     1) .studios__stats-card  = 3 numeric stats (Platinum / Grammy / Studios)
     2) .studios__reviews-card = Google reviews summary
   Both share the same cream-bordered pill treatment so the row
   reads as a balanced pair (matches the Canva design).
   Border-top divider above pulls them away from the description.
   ========================================================= */
.studios__stats-row {
  display: grid;
  /* Stats card takes most of the row (wide, so the large disc fits) and the
     reviews card is compact — kept just wide enough for a 2-line title. */
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  /* Tighter than the shared --card-gap — just these two boxes sit closer. */
  gap: clamp(0.4rem, 0.75vw, 0.65rem);
  margin-top: clamp(0.65rem, 1.1vw, 0.95rem);
}
/* Below the width where both cards fit side-by-side airily, stack them so
   each gets the full column width (no crammed disc/labels or title overflow).
   Above ~1280px they sit side-by-side exactly like the design. */
@media (max-width: 1365px) and (min-width: 821px) {
  .studios__stats-row { grid-template-columns: 1fr; }
}

/* ===========================================================
   STATS CARD — exact design match
   3 stats laid out evenly across a white pill with cream border.
   Each stat: number (large bold) + icon next to it on top,
   single-line label directly underneath.
   =========================================================== */
.studios__stats-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;               /* each stat centered in its column — equal thirds */
  padding:
    clamp(0.5rem, 0.9vw, 0.75rem)
    clamp(1.5rem, 2.5vw, 2.2rem);
  border: 1.5px solid #ead7b4;
  border-radius: 16px;
  background: #f7f4eb;
  color: #050505;
  overflow: visible;
}

/* Each stat: number + icon on the top row, label directly beneath —
   matches the Canva mock (icon sits just to the right of the figure). */
.studios__stats-card .stat {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: clamp(2.1rem, 2.7vw, 2.5rem) auto;
  grid-template-areas:
    "value icon"
    "label label";
  align-items: center;
  justify-items: start;
  column-gap: clamp(0.45rem, 0.85vw, 0.75rem);
  row-gap: clamp(0.15rem, 0.3vw, 0.28rem);
}

.studios__stats-card .stat__value {
  grid-area: value;
  align-self: center;
  color: #050505;
  /* Use the body font (real weight range) instead of Integral CF,
     which is a heavy display face where font-weight has little effect. */
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(1.8rem, 2.5vw, 2.3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}
.studios__stats-card .stat__suffix { color: #050505; }

.studios__stats-card .stat__label {
  grid-area: label;
  align-self: start;
  margin: 0;
  color: #050505;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(0.78rem, 0.92vw, 0.9rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: none;
}

.studios__stats-card .stat__icon {
  grid-area: icon;
  align-self: center;
  justify-self: start;
  width: clamp(38px, 4vw, 50px);
  max-width: none;        /* defeat the global `img { max-width: 100% }` */
}
.studios__stats-card .stat__icon--img {
  /* Platinum disc — larger lead icon. The column-gap (gap from the number)
     is unchanged; only the disc itself grows. */
  width: clamp(60px, 6.6vw, 98px);
  max-width: none;
}
.studios__stats-card .stat__icon--grammy {
  width: clamp(42px, 4.4vw, 50px);
  max-width: none;
}

/* Brand-pink solid dot — World-Class Studios. */
.stat__icon--dot {
  width: clamp(34px, 3.5vw, 44px);
  height: clamp(34px, 3.5vw, 44px);
  border-radius: 50%;
  background: var(--color-brand);
  display: inline-block;
  flex-shrink: 0;
}
.studios__stats-card .stat__icon--dot {
  width: clamp(38px, 4vw, 50px);
  height: clamp(38px, 4vw, 50px);
}

/* Horizontal layout: icon on the left (spanning both rows), with the
   value on top-right and the label below it. Grid-template-areas makes
   this clean without any extra HTML wrapping. */
.stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon value"
    "icon label";
  column-gap: clamp(0.5rem, 0.8vw, 0.75rem);
  row-gap: 0.1rem;
  align-items: center;
  min-width: 0;
}

.stat__icon  { grid-area: icon; align-self: center; }
.stat__value { grid-area: value; min-width: 0; }
.stat__label { grid-area: label; min-width: 0; overflow-wrap: anywhere; }

.stat__icon {
  width: clamp(30px, 3.2vw, 40px);
  height: auto;
  color: var(--color-brand);
  /* will be set by JS: stroke-dasharray + stroke-dashoffset for draw-in */
}

/* The photoreal RIAA disc PNG — sized a touch larger so it reads as
   the section's hero icon, the other two echo its palette in gold/silver. */
.stat__icon--img {
  width: clamp(42px, 4.4vw, 56px);
  height: auto;
  object-fit: contain;
}

/* Gold-tinted line-art Grammy — matches the gold half of the disc. */
.stat__icon--gold {
  color: #D4A341;
  filter: drop-shadow(0 1px 0 rgba(60, 30, 0, 0.4));
}

/* Grammy trophy PNG. */
.stat__icon--grammy {
  width: clamp(36px, 3.6vw, 46px);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

/* Studio mic PNG (user-supplied). */
.stat__icon--mic {
  width: clamp(36px, 3.6vw, 46px);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

/* Google "G" stat icon — matches general stat icon sizing. */
.stat__icon--google {
  width: clamp(32px, 3.4vw, 42px);
  align-self: center;
}

/* Silver/platinum-tinted line-art mic — matches the silver half of the disc. */
.stat__icon--silver {
  color: #C9CFD4;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
}

.stat__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1;
  color: #f7f4eb;
  display: inline-flex;
  align-items: baseline;
  letter-spacing: -0.01em;
}
.stat__suffix {
  color: var(--color-brand);
  margin-left: 0.05em;
}

/* Google reviews card — WHITE pill (matches the numeric stats
   card) containing the Google "G" + title + 4.9★★★★★ + the
   yellow "645+ Reviews" badge on the right. Same slim vertical
   padding as .studios__stats-card so the two pills sit at
   matching heights. */
.studios__reviews-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.65rem, 1.1vw, 0.9rem);
  padding: clamp(0.45rem, 0.75vw, 0.65rem) clamp(0.7rem, 1.1vw, 1rem);
  border: 1.5px solid #ead7b4;
  border-radius: 16px;
  background: #f7f4eb;
  color: #050505;
  min-width: 0;
}
.studios__reviews-g {
  width: clamp(30px, 3.1vw, 38px);
  height: clamp(30px, 3.1vw, 38px);
  flex-shrink: 0;
}
.studios__reviews-body {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}
.studios__reviews-title {
  margin: 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.74rem, 0.86vw, 0.86rem);
  line-height: 1.25;
  color: #050505;
  /* Sized to stay 2 lines (via the <br>) inside the compact reviews card;
     wraps gracefully instead of clipping into the badge on small screens. */
}
.studios__reviews-meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.88rem, 1.05vw, 1rem);
  color: rgba(5, 5, 5, 0.7);
}
.studios__reviews-score {
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: #050505;
  font-size: 1.05em;
}
.studios__reviews-stars {
  color: #FBBC05;
  letter-spacing: 0.05em;
  font-size: 1.5em;
}

/* "645+ Reviews" yellow badge — matches the contact-card and
   footer badge treatment. Two-tier text inside a yellow circle. */
.studios__reviews-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(50px, 5.2vw, 64px);
  height: clamp(50px, 5.2vw, 64px);
  border-radius: 50%;
  background: #FFC73A;
  color: #050505;
  font-family: var(--font-display);
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
  gap: 1px;
}
.studios__reviews-badge-num {
  font-weight: 900;
  font-size: clamp(0.85rem, 1vw, 0.98rem);
  letter-spacing: 0.01em;
}
.studios__reviews-badge-label {
  font-weight: 700;
  font-size: clamp(0.6rem, 0.7vw, 0.7rem);
  letter-spacing: 0.04em;
  text-transform: none;
}

.stat__label {
  margin: 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(0.58rem, 0.68vw, 0.68rem);
  color: rgba(247, 244, 235, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* =========================================================
   GOOGLE REVIEWS row — sits below the stats, separated by a
   matching divider.
   ========================================================= */
.studios__reviews {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid rgba(247, 244, 235, 0.08);
}

.reviews__google {
  width: clamp(30px, 3.2vw, 38px);
  height: auto;
  flex-shrink: 0;
}

.reviews__content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.reviews__title {
  margin: 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  line-height: 1.3;
  color: #f7f4eb;
}

.reviews__meta {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(0.78rem, 0.95vw, 0.92rem);
  color: rgba(247, 244, 235, 0.7);
}
.reviews__score { font-weight: 700; color: #f7f4eb; }
.reviews__stars {
  color: #FBBC05;
  letter-spacing: 0.08em;
  font-size: 1.05em;
}
.reviews__sep { color: rgba(247, 244, 235, 0.35); }

/* =========================================================
   ROOM CAROUSEL — SSL Suite (single, bordered, editorial)
   Cream-bordered frame wraps a tall viewport plus a nav row at
   the bottom. Slides have intentionally varied widths AND heights
   (via align-self per size class) for a newspaper/editorial feel.
   No border-radius on the slides — sharp corners only.
   ========================================================= */

/* =========================================================
   PERKS BAR — sits above the SSL Suite carousel.
   Uppercase value props in cream Integral CF separated by pink
   "|" characters, infinite-looped via a CSS-only marquee.
   Two identical groups inside .perks-bar__track; we animate
   translateX from 0 to -50% so the second group lands exactly
   where the first started — visually seamless restart, no JS.
   ========================================================= */
.perks-bar {
  /* Left edge lines up with the suite card rows below (the container's
     left edge); the right edge runs full-bleed to the viewport edge. */
  margin-left: max(var(--gutter), (100% - var(--container)) / 2);
  margin-right: 0;
  width: auto;
  overflow: hidden;
  /* Vertical padding = one --card-gap. The bar has no background, so this
     padding IS the visible gap between the text row and the adjacent card
     — keeping it = --card-gap makes the text-row→card gap match the
     gaps between cards. The suites zero their margin on this side. */
  padding: var(--card-gap) 0;
  /* Bigger gap above the bar so it doesn't crowd the Our Studios
     stats / Google reviews cards sitting right on top of it. */
  margin-top: clamp(3.5rem, 6vw, 5rem);
}
/* Bottom variant — sits directly under the Whisper Suite carousel. Its
   top padding (= --card-gap) provides the card→text-row gap, so no extra
   top margin is needed. */
.perks-bar--bottom {
  margin-top: 0;
}
.perks-bar__track {
  display: flex;
  width: max-content;
  /* CSS auto-loop is only a no-JS fallback. When main.js is active it
     tags the track .is-scroll-driven and positions it from the scroll
     delta instead (moves while scrolling, stops when scrolling stops). */
  animation: perks-marquee 32s linear infinite;
  will-change: transform;
}
.perks-bar__track.is-scroll-driven {
  animation: none;   /* JS drives transform; don't let the loop fight it */
}
@media (prefers-reduced-motion: reduce) {
  .perks-bar__track { animation: none; }
}
.perks-bar__group {
  list-style: none;
  margin: 0;
  /* Tighter gap so each "|" sits close to the words on both sides
     (like a real punctuation mark) rather than floating between
     them. */
  padding: 0 clamp(0.45rem, 0.9vw, 0.75rem) 0 0;
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 0.9vw, 0.75rem);
  white-space: nowrap;
  flex-shrink: 0;
}
.perks-bar__item {
  font-family: var(--font-display);
  font-weight: 800;
  /* Bigger so the value props read clearly at a glance. */
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247, 244, 235, 0.5);
}
.perks-bar__sep {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 1.65vw, 1.5rem);
  color: var(--color-brand);
  user-select: none;
}
@keyframes perks-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.rooms {
  /* No top margin: the perks-bar above contributes the gap via its own
     --card-gap padding, so the first suite sits one card-gap below the
     text row (matching the gaps between suites). */
  margin-top: 0;
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  position: relative;
}

/* Each suite carousel (SSL / Apollo / Whisper) lives in its own
   .container.rooms wrapper, so they're siblings — the gap between each
   suite row uses the shared --card-gap so it matches the How To Book /
   Reviews card spacing (uniform gaps page-wide). */
.rooms + .rooms {
  margin-top: var(--card-gap);
}

/* Vertical "SSL Suite" label that runs along the LEFT side of the
   carousel, behind the cream-bordered frame. Bottom of the column is
   the start of the text (with the brand-pink dot below it); the text
   reads bottom-to-top with upright letters via writing-mode + 180° rotation. */
.rooms-side-label {
  position: absolute;
  /* Pushed further left than the original tight-to-frame value
     so there's a visible gap between the rotated label and the
     cream-bordered carousel frame — matches the design's
     breathing room. */
  left: clamp(-4.25rem, -3.5vw, -3rem);
  top: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Vertically center the text + dot group within the carousel
     frame so the label sits in the middle of the column. */
  justify-content: center;
  gap: clamp(0.9rem, 1.7vw, 1.4rem);     /* moderate gap between text and dot */
  pointer-events: none;
  z-index: 0;       /* behind .room (which sits at default stacking) */
  overflow: hidden; /* safety net in case font-size outpaces container */
}

.rooms-side-label__text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);     /* reads bottom→top, letters upright */
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Conservative cap so the text + dot always fit inside the
     carousel's 10px-inset bounds, even at the viewport-height cap. */
  font-size: clamp(1.25rem, 3vw, 2.6rem);
  line-height: 1;
  color: #f7f4eb;
  white-space: nowrap;
}

.rooms-side-label__dot {
  width: clamp(20px, 2.5vw, 36px);   /* matches the "Ready to Record" title dot */
  height: clamp(20px, 2.5vw, 36px);
  border-radius: 50%;
  background: var(--color-brand);
  opacity: 0.6;
  margin-left: clamp(0.55rem, 1vw, 0.95rem);   /* nudge right so dot visually aligns with the rotated text's center */
}

.room {
  position: relative;
  /* Cream-white rounded frame, tight inner padding so the slides
     hug the edge. Slides inside remain sharp-cornered. */
  border: 1px solid #f7f4eb;
  border-radius: clamp(14px, 1.6vw, 22px);
  padding: clamp(0.5rem, 0.9vw, 0.85rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1vw, 1rem);
  background: var(--color-bg);
}

.room__viewport {
  position: relative;                /* anchor for absolute nav buttons */
  overflow: hidden;
  /* Viewport height — +25% from the previous 280/34vw/440 baseline. */
  height: clamp(350px, 42.5vw, 550px);
}

.room__track {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: stretch;             /* every slide fills the viewport height */
  gap: clamp(0.6rem, 1.1vw, 1.1rem);
  width: max-content;
  will-change: transform;
  /* Drag interaction: grab cursor, prevent text-selection during drag,
     allow vertical page scroll on touch while we capture horizontal. */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.room__track.is-dragging { cursor: grabbing; }

/* All slides share the same uniform dimensions — width, height, and
   alignment. The newspaper-variant classes (--xl, --lg, etc.) are kept
   on the HTML but no longer affect sizing; the visual is now a clean
   even-tile strip with sharp corners. */
.room__slide,
.room__slide--xl,
.room__slide--lg,
.room__slide--md,
.room__slide--sm {
  position: relative;
  flex-shrink: 0;
  /* Width sized by the media's natural aspect ratio at the viewport
     height — every slide is the same height, but keeps its real
     proportions instead of being cropped to a uniform width. */
  width: auto;
  height: 100%;
  align-self: stretch;
  overflow: hidden;
  background: #0a0a0a;
  border-radius: 0;
}

/* Media fills the slide vertically and keeps its aspect ratio — the
   parent slide grows/shrinks to match. */
.room__media {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
          user-drag: none;
  pointer-events: none;              /* let drag events bubble to the track */
}

/* ----- Floating info card on the first slide of each carousel ----- */
.room-card {
  position: absolute;
  top: clamp(0.75rem, 1.5vw, 1.25rem);
  left: clamp(0.75rem, 1.5vw, 1.25rem);
  /* Larger card — matches the Canva mock where the SSL Suite info
     panel reads as a prominent block, not a compact tooltip. */
  width: clamp(380px, 80%, 620px);
  padding: clamp(1.15rem, 1.7vw, 1.55rem);
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(247, 244, 235, 0.08);
  border-radius: clamp(10px, 1.1vw, 14px);
  color: #f7f4eb;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  z-index: 2;
  /* Fades out while the carousel is moving (JS toggles --hidden). */
  transition: opacity 0.25s var(--ease);
}

.room-card--hidden {
  opacity: 0;
  pointer-events: none;
}

.room-card__head {
  /* Suite name + per-hour price share a baseline-aligned row at the
     top of the card. The name dominates, the price reads as a small
     muted subscript to its right. */
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 clamp(0.6rem, 1.1vw, 0.9rem);
}

.room-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #f7f4eb;
}

.room-card__price {
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(0.75rem, 0.95vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(247, 244, 235, 0.55);
  text-transform: uppercase;
}

.room-card__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.room-card__tag {
  font-family: var(--font-display);
  font-weight: 400;                /* "Largest Room" — lighter */
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f7f4eb;
}

/* Accent guest-count tag: no pill background — lime text on the
   card's own dark background instead, with heavier weight. */
.room-card__tag--accent {
  background: transparent;
  color: var(--color-lime);
  padding: 0;
  border-radius: 0;
  font-weight: 900;
}

.room-card__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.room-card__bullets li {
  position: relative;
  padding-left: 1.8rem;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(0.82rem, 1vw, 0.95rem);
  line-height: 1.45;
  color: #f7f4eb;
  white-space: nowrap;             /* keep each bullet on one line */
}
/* Thick plus-cross marker (matches design ref) drawn with two crossed
   bars via stacked gradients — bolder than the "+" character. */
.room-card__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1em;
  height: 1em;
  opacity: 0.6;
  background:
    linear-gradient(var(--color-brand), var(--color-brand)) center / 100% 32% no-repeat,
    linear-gradient(var(--color-brand), var(--color-brand)) center / 32% 100% no-repeat;
}

.room-card__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;       /* CTAs hug the right edge of the card */
  gap: 0.4rem;
}

.room-cta {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(0.78rem, 0.95vw, 0.9rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #050505;
  background: var(--color-lime);
  border: 1px solid var(--color-lime);
  padding: 0.55rem 0.95rem;
  border-radius: 8px;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
}
.room-cta:hover {
  background: #0a0a0a;
  color: var(--color-lime);
  transform: translateY(-1px);
}

/* ----- Lime chevron-arrow nav buttons — pinned to the BOTTOM-LEFT
         and BOTTOM-RIGHT of the viewport. They overlap the slides at
         their bottom edges and DON'T move when the track scrolls. ----- */
.room__nav {
  position: absolute;
  bottom: clamp(0.75rem, 1.25vw, 1.25rem);
  z-index: 6;
  background: transparent;
  border: 0;
  padding: 0;
  width: clamp(44px, 4.5vw, 64px);
  height: auto;
  cursor: pointer;
  transition: transform 0.18s var(--ease), opacity 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.room__nav--prev { left:  clamp(0.75rem, 1.25vw, 1.5rem); }
/* Next button lives in .rooms (not the viewport), so its right offset
   is measured from .rooms's right edge = .container's right edge,
   which sits one `--gutter` in from the visible right of the page.
   The negative offset pulls the button back out to a small margin
   from the body's right edge; bottom is bumped to compensate for
   .room's padding so it visually aligns with the prev button. */
.room__nav--next {
  /* Anchor to the BODY's right edge (not the centered .container's
     right edge). Subtracting whichever is larger — the side gutter
     or the centering margin — cancels the .container's inset so the
     button always lands `1.5rem` from the body's right on every
     viewport size.
     Vertical offset mirrors the prev arrow exactly: .room border +
     .room padding + prev arrow's own `bottom` value. */
  right:  calc(1.5rem - max(var(--gutter), (100vw - var(--container)) / 2));
  bottom: calc(1px + clamp(0.5rem, 0.9vw, 0.85rem) + clamp(0.75rem, 1.25vw, 1.25rem));
}

/* APOLLO SUITE — used to be horizontally mirrored, but the
   final design wants all three carousels reading left-to-right
   the same way, so the .rooms--apollo modifier is now a no-op
   placeholder kept for HTML/JS continuity. */

.room__nav:hover  { transform: scale(1.07); }
.room__nav:active { transform: scale(0.96); }
.room__nav:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

.room__nav-icon {
  width: 100%;
  height: auto;
  fill: var(--color-lime);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
}
.room__nav-icon--flip { transform: scaleX(-1); }

/* Tighter info-card scaling on smaller carousels */
@media (max-width: 720px) {
  .room-card {
    width: clamp(220px, 88%, 320px);
  }
  /* Mobile can't fit the long bullets on one line — let them wrap. */
  .room-card__bullets li { white-space: normal; }
  .room__nav { width: clamp(34px, 7vw, 44px); }
  /* The desktop negative pull made the logo touch the screen edge on
     mobile — drop it so the logo keeps the container gutter as a gap. */
  .logo { margin-left: 0; }
}

/* Stack on narrow viewports. On mobile, the heading would have to be
   absurdly small to stay on one line, so we let it wrap and scale up
   a touch so it still reads as a heading. Stats collapse to 1 column
   under ~480px so the numbers don't get cramped. */
@media (max-width: 820px) {
  .studios {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right";
    gap: 2rem;
  }
  .studios__heading {
    white-space: normal;
  }
  /* Stack the stats card + reviews card vertically on tablet. */
  .studios__stats-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
@media (max-width: 520px) {
  /* Keep the 3 stats in one row on phones, but scale the numbers,
     icons and labels down so everything fits without clipping.
     Labels wrap to multiple lines instead of being cut off. */
  .studios__stats-card {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;            /* top-align so the numbers line up despite wrapped labels */
    gap: clamp(0.2rem, 1.2vw, 0.45rem);
    padding: clamp(0.85rem, 3.2vw, 1.15rem) clamp(0.55rem, 2.4vw, 0.9rem);
  }
  /* Keep a small FIXED row-1 height (like desktop) so all three numbers
     sit at the same height and the icons overflow it visually — using
     "auto" rows let the bigger disc make stat 1 taller, dropping its
     number/label below the others. */
  .studios__stats-card .stat {
    column-gap: clamp(0.15rem, 0.9vw, 0.35rem);
    grid-template-rows: clamp(1.6rem, 6.5vw, 2rem) auto;
    row-gap: 0.15rem;
  }
  .studios__stats-card .stat__value {
    font-size: clamp(0.95rem, 4.6vw, 1.3rem);
    align-self: center;
    white-space: nowrap;          /* keep "100+" on one line so it can't push the disc */
  }
  .studios__stats-card .stat__icon { align-self: center; }
  .studios__stats-card .stat__label {
    align-self: start;
    margin-top: clamp(0.7rem, 3.2vw, 1.1rem);   /* clears the overflowing icon */
    font-size: clamp(0.56rem, 2.7vw, 0.72rem);
    white-space: normal;          /* wrap long labels instead of clipping */
    line-height: 1.15;
  }
  .studios__stats-card .stat__icon--img {
    width: clamp(54px, 16vw, 70px);   /* a little smaller on mobile */
    max-width: none;
    margin-left: 0;
    transform: translateY(clamp(3px, 1.6vw, 7px));   /* nudge a little lower */
  }
  .studios__stats-card .stat__icon--grammy { width: clamp(26px, 8vw, 36px); }
  .studios__stats-card .stat__icon--dot {
    width: clamp(24px, 7.5vw, 34px);
    height: clamp(24px, 7.5vw, 34px);
  }
}

/* =========================================================
   FOOTER  (full design — three rows)
   Built to match the Canva mockup 1:1: title + lime CTA top
   row, cream-bordered 5-column nav grid, bottom strip with
   brand wordmark + directions + partners + Google reviews.
   ========================================================= */
.site-footer {
  position: relative;
  /* Whole footer on #111111 (top strip + panel + link grid all match).
     No bottom padding — the legal strip terminates the footer. */
  background-color: #111111;
  color: #f7f4eb;
  padding: clamp(3rem, 6vw, 5rem) 0 0;
}

/* Footer-specific wider container — extends the rows much closer to
   the viewport edges than the site-wide 1280px container, matching
   the design's full-width footer layout. */
.site-footer .container {
  width: min(100% - (var(--gutter) * 2), 1560px);
}

/* Panel — wraps the link grid, the brand-stack/directions/reviews
   row, and the legal strip. Base color is #111111 — the same color
   used by the Our Studios section (.section-three) — so the panel
   reads as visually distinct from the pure-black #0a0a0a top row
   above, matching the design's two-tone footer. No gradient. */
.site-footer__panel {
  position: relative;
  padding-top: clamp(0.5rem, 1vw, 1rem);
  background-color: #111111;
}

/* -------- ROW 1 — Title + Contact-us CTA ---------------------- */
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.site-footer__brand-row {
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 0.8vw, 0.65rem);
  min-width: 0;
}

.site-footer__title {
  margin: 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  /* Aligned with the page's main section-title scale so the
     footer hero sits in the same typographic family as
     "Our Engineers", "Build Your Session", etc. — and stays
     on a single line next to the Contact Us pill. */
  font-size: var(--section-title-size);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #f7f4eb;
}
.site-footer__title-bullet {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 0.3em;
  transform: translateY(calc(-50% + 0.08em));
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-brand);
  opacity: 0.6;
}
.site-footer__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-lime);
}

.site-footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Bigger button: same top/bottom padding, wider sides + larger text. */
  padding: clamp(0.15rem, 0.3vw, 0.28rem) clamp(1.9rem, 3.2vw, 2.8rem);
  background: var(--color-lime);
  color: #050505;
  border: 1px solid var(--color-lime);
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.site-footer__cta:hover {
  background: #0a0a0a;
  color: var(--color-lime);
  transform: translateY(-2px);
}
.site-footer__cta:active { transform: translateY(0); }

/* -------- ROW 2 — Cream-bordered link grid -------------------- */
.site-footer__middle {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.site-footer__grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 1.15fr)
    minmax(0, 1fr)
    minmax(0, 1.2fr)
    minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.75rem, 3vw, 2.5rem);
  /* Black fill so the bordered link grid reads as a distinct block
     against the #111111 footer around it. */
  background-color: #000000;
  /* Exact same border as the How To Book step cards (.howto__step). */
  border: 1px solid #f7f4eb;
  border-radius: clamp(22px, 2.2vw, 32px);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.2vw, 1rem);
  min-width: 0;
}

.site-footer__col-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(0.9rem, 1.15vw, 1.1rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand);
  display: flex;
  align-items: baseline;
  gap: 0.3em;
}
.site-footer__col-title-sub {
  color: #f7f4eb;
  font-weight: 800;
  opacity: 0.85;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, 0.75vw, 0.6rem);
}
.site-footer__links a {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.8rem, 0.95vw, 0.9rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f7f4eb;
  transition: color 0.2s var(--ease);
}
.site-footer__links a:hover { color: var(--color-brand); }

/* ---- Connect column (phone + contact rows) ---- */
.site-footer__col--connect {
  gap: clamp(0.85rem, 1.3vw, 1.1rem);
}
.site-footer__connect-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    ".    value";
  column-gap: 0.65rem;
  row-gap: 0.15rem;
  align-items: center;
  color: #f7f4eb;
  transition: opacity 0.2s var(--ease);
}
.site-footer__connect-row:hover { opacity: 0.85; }
.site-footer__connect-icon {
  grid-area: icon;
  width: 20px;
  height: 20px;
  color: var(--color-brand);
  flex-shrink: 0;
}
.site-footer__connect-icon svg { width: 100%; height: 100%; }
.site-footer__connect-body {
  display: contents;
}
.site-footer__connect-label { grid-area: label; }
.site-footer__connect-value { grid-area: value; }
.site-footer__connect-label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f7f4eb;
}
.site-footer__connect-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  letter-spacing: 0.01em;
  color: var(--color-brand);
}
.site-footer__connect-divider {
  height: 1px;
  background: rgba(247, 244, 235, 0.18);
  margin: 0.25rem 0;
}

/* ---- Badge column (RIAA 25 years) ---- */
.site-footer__col--badge {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.site-footer__badge {
  /* Bigger — matches the design's prominent 25-year logo in the
     right-hand footer column. */
  width: clamp(200px, 22vw, 340px);
  height: auto;
  object-fit: contain;
}

/* -------- ROW 3 — Bottom strip -------------------------------- */
.site-footer__bottom {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
.site-footer__reviews { justify-self: end; }

/* Stacked brand wordmark — identical to the contact card's logo */
.site-footer__brand-stack {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.site-footer__small-heading {
  margin: 0 0 clamp(0.4rem, 0.7vw, 0.55rem);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f7f4eb;
}

.site-footer__directions address {
  font-style: normal;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(0.85rem, 0.95vw, 0.92rem);
  line-height: 1.45;
  color: rgba(247, 244, 235, 0.75);
}
.site-footer__open {
  margin: clamp(0.45rem, 0.8vw, 0.65rem) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f7f4eb;
}

/* "B.MP" partner wordmark — typographic placeholder until a real
   partner logo is dropped in. */
.site-footer__partner-mark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  letter-spacing: 0.05em;
  line-height: 1;
  color: #f7f4eb;
}
.site-footer__partner-mark span {
  color: var(--color-brand);
  margin: 0 -0.05em;
}

/* Google reviews card — matches the contact-section variant. */
.site-footer__reviews {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.6rem, 1.1vw, 0.95rem);
  background: #f7f4eb;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: clamp(0.7rem, 1.1vw, 0.95rem) clamp(0.85rem, 1.4vw, 1.15rem);
}
.site-footer__reviews-g { width: 28px; height: 28px; flex-shrink: 0; }
.site-footer__reviews-title {
  margin: 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.75rem, 0.85vw, 0.85rem);
  line-height: 1.25;
  color: #050505;
}
.site-footer__reviews-meta {
  margin: 0.15rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.site-footer__reviews-score {
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: #050505;
}
.site-footer__reviews-stars {
  color: #FBBC05;
  letter-spacing: 0.08em;
  font-size: 1.35rem;
  position: relative;
  top: -0.12em;          /* nudge the stars up to sit level with the score */
}
/* Same two-tier badge as the contact section, slightly larger
   here since the footer has more breathing room. */
.site-footer__reviews-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FFC73A;
  color: #050505;
  font-family: var(--font-display);
  text-align: center;
  text-transform: uppercase;
  flex-shrink: 0;
  line-height: 1;
  gap: 1px;
}
.site-footer__reviews-badge-num {
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}
.site-footer__reviews-badge-label {
  font-weight: 800;
  font-size: 0.55rem;
  letter-spacing: 0.04em;
}

/* =========================================================
   FOOTER LEGAL STRIP
   Bottom row of the footer: copyright on the left, Privacy
   Policy link centered, social icons on the right.
   ========================================================= */
.site-footer__legal {
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  padding-top: clamp(1rem, 1.5vw, 1.5rem);
  /* Small bottom padding so the copyright text doesn't sit flush
     against the bottom edge now that the footer has no bottom pad. */
  padding-bottom: clamp(1rem, 1.5vw, 1.5rem);
  border-top: 1px solid rgba(247, 244, 235, 0.12);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.site-footer__copyright {
  margin: 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  letter-spacing: 0.02em;
  color: rgba(247, 244, 235, 0.6);
  justify-self: start;
}
.site-footer__privacy {
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  letter-spacing: 0.02em;
  color: rgba(247, 244, 235, 0.6);
  text-decoration: none;
  transition: color 0.2s var(--ease);
  justify-self: center;
}
.site-footer__privacy:hover { color: var(--color-brand); }
.site-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(0.85rem, 1.4vw, 1.15rem);
  justify-self: end;
}
.site-footer__social a {
  display: inline-flex;
  width: clamp(20px, 1.6vw, 24px);
  height: clamp(20px, 1.6vw, 24px);
  color: rgba(247, 244, 235, 0.65);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.site-footer__social a:hover {
  color: var(--color-brand);
  transform: translateY(-1px);
}
.site-footer__social svg { width: 100%; height: 100%; }

/* -------- Responsive collapse --------------------------------- */
@media (max-width: 980px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .site-footer__cta { justify-self: start; }
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
  .site-footer__col--badge {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .site-footer__bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
@media (max-width: 600px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__bottom { grid-template-columns: 1fr; }
  .site-footer__title { font-size: clamp(1.85rem, 8vw, 2.6rem); }
}

/* -------- Back-to-top button (outlined oval pill) -------------
   Matches the Canva mockup: an elongated pill with a 1.5px
   cream-white outline, transparent fill, and a chevron-up icon
   centered inside. Sized wider than tall so it reads as an oval
   rather than a circle. */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  width: clamp(56px, 5vw, 70px);
  height: clamp(32px, 3vw, 40px);
  border-radius: 999px;
  background: transparent;
  color: #f7f4eb;
  border: 1.5px solid rgba(247, 244, 235, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease),
    background 0.2s var(--ease),
    color 0.2s var(--ease),
    visibility 0.3s;
  z-index: 60;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: rgba(247, 244, 235, 0.12);
  transform: translateY(-2px);
}
.back-to-top svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

/* =========================================================
   RESPONSIVE
   (Reserved — mobile-specific rules live in the dedicated
   mobile-rhythm media query block further down.)
   ========================================================= */

/* =========================================================
   MOBILE — global rhythm overrides
   The page-wide CSS custom properties (--section-py, --gutter,
   --section-title-size) all clamp() against the viewport. On
   small screens those clamps still produce values built for
   desktop rhythm. This block re-binds them tighter so every
   section that uses the variables compacts at once.

   Also trims excessive interior padding in the heaviest content
   cards (contact, build configurator, build sheet, FAQ items)
   so they stop wasting horizontal space at narrow widths.
   ========================================================= */
@media (max-width: 720px) {
  :root {
    --section-py:         clamp(2.75rem, 11vw, 4rem);     /* was 5–7rem */
    --gutter:             clamp(1.5rem, 6vw, 2rem);       /* edge breathing room — was 1–1.5rem */
    --section-title-size: clamp(1.85rem, 8.5vw, 2.6rem);  /* was 2.25–4.25rem */
  }

  /* Studios section has its own padding values (predates the
     --section-py variable). Tighten in line with the rest. */
  .section-three {
    padding-top:    clamp(2.75rem, 11vw, 4rem);
    padding-bottom: clamp(2.75rem, 11vw, 4rem);
  }

  /* Clients section's bottom gap was huge (intentional desktop
     spill for the callout pill). Compress it on mobile so the
     studios section starts sooner. */
  .clients {
    --clients-bottom-gap:     clamp(8rem, 26vw, 11rem);
    --clients-callout-bottom: clamp(2rem, 6vw, 3rem);
    padding-top: clamp(3.5rem, 13vw, 5rem);
  }

  /* Contact card — reduce internal padding so the form/info
     panels don't eat the screen width. */
  .contact-info,
  .contact-form {
    padding: clamp(1.25rem, 5vw, 1.75rem) clamp(1.1rem, 4.5vw, 1.5rem);
  }

  /* Build Your Session — same treatment for both panels. */
  .build__configurator,
  .build__sheet {
    padding: clamp(1.1rem, 4.5vw, 1.6rem);
  }

  /* FAQ — tighten button + answer padding so the cards read
     cleanly on a narrow viewport. */
  .faq-item__btn {
    padding: 0.95rem 1.1rem;
    gap: 0.85rem;
  }
  .faq-item__panel-inner {
    padding: 0.85rem 1.1rem 1rem;
  }

  /* Footer top row — title was still too aggressive at small
     widths even after the earlier resize. */
  .site-footer__top { margin-bottom: 1.5rem; }
  .site-footer__middle { margin-bottom: 1.5rem; }
  .site-footer__grid { padding: 1.25rem 1.1rem; }

  /* Drop the map texture on small screens (it was visually noisy);
     the footer stays on its solid #111111 base. */
  .site-footer {
    background-image: none;
  }

  /* Side labels on the room carousels — at desktop they sit at
     left:-2.75rem (well outside the container). On mobile that
     offset clips past the body's left edge. Re-anchor closer to
     the cream frame, raise z-index so the label sits in front
     of the cream border, and bump the type + letter-spacing so
     the rotated text spans most of the carousel's height (the
     Canva spec has the label running floor-to-ceiling). */
  /* Push the carousel frame right to open a column for the vertical
     label, then sit the label in that column with a gap on BOTH sides
     (it was clipping the screen edge and touching the frame). */
  .room {
    margin-left: 1.7rem;
  }

  /* Hide the floating info card (suite name + bullets + CTAs) on
     phones. It was covering most of each slide and — because it's
     position:absolute on top of the track — capturing touch events
     so the carousel felt unswipable. The same info already lives
     in the Build Your Session sheet, so we don't lose it. */
  .room-card { display: none; }
  .rooms-side-label {
    left: -0.6rem;
    z-index: 2;
  }
  .rooms-side-label__text {
    font-size: 1.25rem;       /* a touch smaller so the column stays narrow */
    letter-spacing: 0.08em;   /* adds vertical breathing room between letters */
  }
  .rooms-side-label__dot {
    width: clamp(18px, 4.5vw, 28px);
    height: clamp(18px, 4.5vw, 28px);
  }

  /* Next-arrow on room carousels anchors to the body's right
     edge via a calc that breaks on mobile (pushes it off-canvas).
     Re-anchor it just inside the cream frame. */
  .room__nav--next { right: clamp(0.75rem, 3vw, 1.25rem); }

  /* Engineer carousel — drop the side-arrow padding so the cards
     get more horizontal space on a small screen. */
  .rooms--engineers {
    padding-left:  2.5rem;
    padding-right: 2.5rem;
  }
  .engineers__nav--prev { left:  -10px; }
  .engineers__nav--next { right: -10px; }

  /* Hero typography — the desktop clamp() mins were sized for
     viewports >570px and forced the title to overflow on small
     phones (where 7vw < 2.5rem so the min wins). Re-scale the
     three hero text levels using viewport-based values so they
     always fit inside the container. */
  .hero__title {
    font-size: clamp(1.65rem, 8vw, 3rem);
    letter-spacing: 0.01em;
  }
  .hero__sub {
    font-size: clamp(0.78rem, 3.1vw, 1.12rem);
  }
  .hero__tagline {
    font-size: clamp(0.7rem, 2.4vw, 0.95rem);
  }
  /* Miami script underline anchored to the title's right edge —
     shrink so it doesn't poke past the title's container. */
  .hero__miami {
    height: clamp(22px, 5vw, 36px);
    right: -0.6em;
  }
  /* Hero contact pill row — looser wrapping so 4 pills don't
     collide on a 320px viewport. */
  .hero__cta { gap: 0.4rem; }
  .pill { padding: 0.5em 0.8em; font-size: 0.85rem; }

  /* Trusted-by marquee logos run on a 102px max-height by default;
     drop on mobile so the strip doesn't dwarf the hero title. */
  .marquee__logo { height: clamp(40px, 11vw, 64px); }

  /* ---- Center section titles + eyebrows on mobile ----
     The section heading h2's are normally left-aligned with the
     pink-dot bullet pinned to the LEFT margin via absolute
     position + right: 100%. On mobile we (a) center the parent
     header and (b) re-flow the bullet inline so it sits right
     next to the first word of the title instead of floating off
     to the page edge. */
  .howto__head,
  .engineers__head,
  .build__head,
  .reviews__head-wrap,
  .reviews__head,
  .studios__head,
  .faq__intro {
    text-align: center;
  }
  .howto__title,
  .engineers__title,
  .build__title,
  .reviews__title,
  .studios__eyebrow,
  .faq__title {
    display: inline-block;
  }

  /* Pin every section-title bullet inline with the first line of
     the title. `position: static` flips the dot back into normal
     flow so it lives RIGHT next to the title text on every
     section (Howto / Engineers / Build / Reviews / FAQ / Contact / Footer). */
  .howto__title-bullet,
  .engineers__title-bullet,
  .build__title-bullet,
  .reviews__title-bullet,
  .studios__title-bullet,
  .faq__title-bullet,
  .contact__title-bullet,
  .site-footer__title-bullet {
    /* !important so this beats the per-section base rules that set
       position:absolute and appear LATER in the stylesheet (equal
       specificity → source order would otherwise win). Keeps the dot
       inline next to the title even when the title wraps. */
    position: static !important;
    display: inline-block !important;
    inset: auto !important;
    margin: 0 0.35em 0 0 !important;
    transform: none !important;
    vertical-align: 0.12em;        /* nudge up toward the cap height */
  }

  /* Eyebrows that were flex-aligned to the left start lines —
     center them too. */
  .build__eyebrow,
  .engineers__eyebrow {
    justify-content: center;
  }
  /* FAQ description sat under the sidebar at a tighter width;
     allow it to fill on mobile so it doesn't read as a narrow
     paragraph inside a wider column. */
  .faq__desc {
    max-width: none;
    margin-inline: auto;
    text-align: center;
  }

  /* ---- Studios section — center on mobile ----
     Desktop is a two-column grid (eyebrow + 25-yr badge on the
     left, heading + stats on the right). On mobile the grid
     stacks; center every child so the section reads as a
     centered hero column instead of left-anchored fragments. */
  .studios { justify-items: center; }
  .studios__left,
  .studios__right {
    align-items: center;
    text-align: center;
  }
  .studios__heading,
  .studios__desc { text-align: center; }
  /* Stats card + reviews card stack vertically, each centered. */
  .studios__stats-row {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .studios__stats-card,
  .studios__reviews-card {
    justify-items: center;
  }
  .stat { justify-items: center; }

  /* ---- Footer — center every row on mobile ----
     Desktop layout is title (left) + CTA (right) in row 1, a
     5-column link grid in row 2, and a four-up info strip in
     row 3. On mobile everything stacks; center each block so
     the footer reads symmetrically. */
  .site-footer__top {
    justify-items: center;
    text-align: center;
  }
  .site-footer__brand-row { align-items: center; }
  .site-footer__cta { justify-self: center; }

  /* Link grid — center the columns themselves AND the link
     lists inside each column. */
  .site-footer__col { align-items: center; text-align: center; }
  .site-footer__col-title { justify-content: center; }
  .site-footer__col--badge { justify-content: center; }
  /* On mobile, lay out the connect row as:
       row 1: [icon] Call Us  — icon sits inline beside the label
       row 2: (305) 901-4913   — value spans, centered below
     Using grid-template-areas with display:contents on the inner
     body so the label and value participate in the parent grid. */
  .site-footer__connect-row {
    grid-template-columns: auto auto;
    grid-template-areas:
      "icon  label"
      "value value";
    justify-content: center;
    align-items: center;
    column-gap: 0.4rem;
    row-gap: 0.25rem;
    text-align: center;
  }
  .site-footer__connect-body { display: contents; }
  .site-footer__connect-icon  { grid-area: icon; }
  .site-footer__connect-label { grid-area: label; }
  .site-footer__connect-value { grid-area: value; }
  .site-footer__connect-divider {
    width: 60%;
    margin-inline: auto;
  }

  /* Bottom strip — center every block. */
  .site-footer__bottom { justify-items: center; text-align: center; }
  /* Legal strip collapses to a stacked, centered column on phones. */
  .site-footer__legal {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1rem;
  }
  .site-footer__copyright,
  .site-footer__privacy,
  .site-footer__social { justify-self: center; }
  .site-footer__directions address { text-align: center; }
  .site-footer__reviews { justify-self: center; }
}

/* Extra-narrow phones (≤400px) — drop one more notch. */
@media (max-width: 400px) {
  :root {
    --gutter:             1.25rem;
    --section-py:         2.5rem;
    --section-title-size: clamp(1.65rem, 8vw, 2.2rem);
  }

  /* Contact card — even tighter inside on tiny screens. */
  .contact-info,
  .contact-form {
    padding: 1.15rem 1rem;
  }
  .build__configurator,
  .build__sheet {
    padding: 1.05rem;
  }
}

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

/* =========================================================
   HOW TO BOOK A SESSION  (section four)
   Dark, photo-backed section with four bordered step rows
   and a centered Contact Us CTA.
   ========================================================= */
.section-howto {
  position: relative;
  padding-top:    var(--section-py);
  padding-bottom: var(--section-py);
  background-color: #0a0a0a;
  /* Dim studio photo bleeds through; the linear-gradient overlay
     keeps text legible. */
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.78), rgba(10, 10, 10, 0.86)),
    url("../images/rooms/ssl-1.webp");
  background-size: cover;
  background-position: center;
  color: #f7f4eb;
}

.howto__head {
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.howto__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--section-title-size);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #f7f4eb;
  /* `position: relative` so the leading bullet can be positioned in
     the left margin without shifting the heading text. */
  position: relative;
}

/* "Tag purple dot" pattern — pink circular accent BEFORE the title,
   positioned in the left margin so the heading text starts at the
   same x position as the rest of the section. Sized in em so it
   tracks the heading's responsive font-size. */
.howto__title-bullet {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 0.3em;
  transform: translateY(calc(-50% + 0.08em));
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-brand);
  opacity: 0.6;
}

.howto__eyebrow {
  margin: clamp(0.75rem, 1.2vw, 1rem) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-lime);
}

/* Body copy under the lime "Have everything set..." subheading.
   Same Helvetica Now treatment used in .studios__desc /
   .reviews__desc / .engineers__desc / .build__desc for a consistent
   section-intro typography. */
.howto__desc {
  margin: clamp(0.4rem, 0.75vw, 0.6rem) 0 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--body-size);
  line-height: 1.5;
  color: #f7f4eb;
}

.howto__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

.howto__step {
  display: grid;
  grid-template-columns: clamp(140px, 18vw, 220px) 1fr;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  /* Cream-white border to match the carousel frames. */
  border: 1px solid #f7f4eb;
  border-radius: clamp(22px, 2.2vw, 32px);
  padding: clamp(1rem, 1.8vw, 1.6rem) clamp(1.25rem, 2.5vw, 2rem);
  background: rgba(0, 0, 0, 0.45);
  /* Fixed row height so all four boxes are identical regardless of
     how many lines the description wraps to. */
  min-height: clamp(120px, 11vw, 155px);
}

.howto__step-tag {
  display: flex;
  align-items: baseline;
  gap: clamp(0.7rem, 1.3vw, 1.15rem);
}

.howto__step-chevron {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  color: #f7f4eb;
  line-height: 1;
  transition: color 0.2s var(--ease);
}

.howto__step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-brand);
  transition: color 0.2s var(--ease);
}


/* Hovering a step row turns its number AND the leading chevron lime. */
.howto__step:hover .howto__step-num,
.howto__step:hover .howto__step-chevron { color: var(--color-lime); }

.howto__step-title {
  margin: 0 0 clamp(0.4rem, 0.8vw, 0.6rem) 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.55vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #f7f4eb;
}

.howto__step-desc {
  margin: 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--body-size);
  line-height: 1.5;
  color: rgba(247, 244, 235, 0.85);
}

.howto__cta-wrap {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  justify-content: center;
}

.howto__cta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #050505;
  background: var(--color-lime);
  padding: clamp(0.15rem, 0.3vw, 0.28rem) clamp(0.95rem, 1.6vw, 1.35rem);
  border: 1px solid var(--color-lime);
  border-radius: 10px;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.howto__cta:hover {
  background: #0a0a0a;
  color: var(--color-lime);
  transform: translateY(-1px);
}
.howto__cta:active { transform: translateY(0); }

/* On narrow viewports the tag and body stack vertically. */
@media (max-width: 720px) {
  .howto__step {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 1.1rem 1.25rem;
  }
}

/* =========================================================
   OUR ENGINEERS  (section five)
   Title + achievement line, a featured Gee Flow card with
   bio, and three supporting engineer slots below.
   ========================================================= */
.section-engineers {
  position: relative;
  padding-top:    var(--section-py);
  padding-bottom: var(--section-py);
  background: #111111;   /* match the Our Studios section background */
  color: #f7f4eb;
}

.engineers__head {
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.engineers__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--section-title-size);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #f7f4eb;
  position: relative;
}
.engineers__title-dot { color: var(--color-brand); }

/* Tag-purple-dot bullet to the left of the heading — same pattern
   as the "How To Book A Session" heading. */
.engineers__title-bullet {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 0.3em;
  transform: translateY(calc(-50% + 0.08em));
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-brand);
  opacity: 0.6;
}

.engineers__eyebrow {
  margin: clamp(0.85rem, 1.4vw, 1.1rem) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #C6FF4D;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em 0.65em;
}

.engineers__plus {
  font-weight: 900;
  color: var(--color-brand);
}

/* Body copy under the lime "The team behind..." subheading. Same
   Helvetica Now treatment as .studios__desc / .reviews__desc so the
   section hierarchy reads consistently. */
.engineers__desc {
  margin: clamp(0.5rem, 0.9vw, 0.75rem) 0 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--body-size);
  line-height: 1.5;
  color: #f7f4eb;
}

/* ---- Engineer carousel ----
   Reuses the .room / .room__viewport / .room__track / .room__slide
   skeleton (so the existing carousel JS still drives it), but each
   slide is a self-contained cream-colored "engineer card" instead
   of a photo. The .rooms--engineers modifier rewires the slide
   sizing and arrow positioning. */

.rooms--engineers {
  position: relative;
  display: block;        /* override the .rooms grid */
  /* Keep the engineers carousel's own top spacing (it's not a suite row,
     so it shouldn't inherit the suite text-row→card --card-gap above). */
  margin-top: clamp(0.5rem, 1vw, 1rem);
  /* Carousel envelope — slightly wider than .container's 1280px so
     there's room for the side arrows, but tight enough that each
     of the 3 cards stays compact. Centered horizontally regardless
     of the wrapper. */
  width: min(100vw - 2 * var(--gutter), 1340px);
  margin-left: 50%;
  transform: translateX(-50%);
  /* Reserve a strip on each side for the prev/next arrows so they
     sit OUTSIDE the cards (not overlapping them) with a small gap. */
  padding-left:  clamp(3rem, 4.5vw, 5rem);
  padding-right: clamp(3rem, 4.5vw, 5rem);
}

.rooms--engineers .room {
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.rooms--engineers .room__viewport {
  height: auto;          /* card-content-driven height */
  overflow: hidden;
  padding-block: clamp(1rem, 1.5vw, 1.5rem);
}

.rooms--engineers .room__track {
  align-items: stretch;
  /* Shared page-wide card gap (--card-gap). */
  gap: var(--card-gap);
}

.rooms--engineers .room__slide {
  /* Show exactly THREE engineer cards inside the visible viewport.
     Uses the wider 1480px envelope (matches .rooms--engineers above),
     minus the side-arrow padding, minus two inter-card gaps, divided
     by 3. */
  width: calc(
    (min(100vw - 2 * var(--gutter), 1340px)
     - 2 * clamp(3rem, 4.5vw, 5rem)        /* arrow padding */
     - 2 * var(--card-gap))    /* inter-card gaps */
    / 3
  );
  height: auto;
  background: #f7f4eb;
  align-self: stretch;
}

/* Two cards on tablet, one on phone. */
@media (max-width: 900px) {
  .rooms--engineers .room__slide {
    width: calc(
      (min(100vw - 2 * var(--gutter), 1340px)
       - 2 * clamp(3rem, 4.5vw, 5rem)
       - var(--card-gap))
      / 2
    );
  }
}
@media (max-width: 600px) {
  /* Break the circular percentage reference on the engineer carousel:
       parent .room__track has width:max-content (sized by children),
       so a child with `width: 100%` resolves against an indeterminate
       inline size and collapses to min-content. The card then gets
       stretched VERTICALLY by align-items:stretch on the track, and
       the photo's padding-bottom:100% computes against the (tiny)
       collapsed width — producing the "tall narrow blue strip".
     Fix: give the slide an explicit calc width referenced to the
     viewport (not a parent %), and disable the vertical stretch so
     each card sizes to its own content. */
  .rooms--engineers .room__track {
    align-items: flex-start;
  }
  .rooms--engineers .room__slide {
    /* Wider slack vs. the 5rem section padding — gives the card ~3rem
       of visible breathing room on each side inside the carousel
       viewport so it reads as a "card on a phone" with real padding
       rather than a slab pressed against the edges. */
    width: calc(100vw - 2 * var(--gutter) - 8rem);
    align-self: flex-start;
    height: auto;
    /* Center the (now narrower) card horizontally inside the slide
       slot it occupies in the flex track, so the breathing room sits
       on BOTH sides instead of all bunched up on the right. */
    margin-inline: auto;
  }
  /* Belt-and-braces: switch the photo to native aspect-ratio so it
     can't be derailed if the containing-block inline size is briefly
     indeterminate during layout. */
  .engineer-card__photo {
    aspect-ratio: 1 / 1;
    padding-bottom: 0;
    height: auto;
  }
}

/* Engineer card content */
.engineer-card {
  display: flex;
  flex-direction: column;
  gap: 0;        /* per-child margins below control the spacing */
  /* Equal top padding and role→photo margin (see .engineer-card__top
     below) — the role sits with symmetric breathing room above and
     below. */
  padding: clamp(0.3rem, 0.4vw, 0.45rem) clamp(1.65rem, 2.5vw, 2.4rem) clamp(1.25rem, 1.9vw, 1.85rem);
  background: #f7f4eb;
  color: #050505;
  border-radius: clamp(14px, 1.5vw, 22px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.engineer-card__top {
  text-align: center;
  /* Same value as .engineer-card's padding-top above — symmetric
     spacing above and below the role label. */
  margin-bottom: clamp(0.3rem, 0.4vw, 0.45rem);
  /* line-height: 1 strips the font's built-in vertical breathing
     room so the symmetric margins land exactly at the role text's
     cap-height instead of including font-leading on each side. */
  line-height: 1;
}

.engineer-card__role {
  font-family: var(--font-display);
  font-weight: 800;
  /* Bigger than the engineer name below. */
  font-size: clamp(1.15rem, 1.65vw, 1.5rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #050505;
}

.engineer-card__photo {
  /* Shared placeholder portrait — every engineer card uses this image
     until individual headshots replace it (per-card via inline
     `style="background-image: url(...)"` or a per-engineer modifier). */
  background-image: url("../images/engineer-placeholder.webp");
  background-size: cover;
  background-position: center;
  background-color: #0a0a0a;
  /* Sharp corners — no border-radius on the photo. */
  border-radius: 0;
  /* Bulletproof 1:1 aspect ratio via the padding-bottom hack — works
     reliably even when the photo lives inside a flex column where
     `aspect-ratio` can be misresolved against the parent's auto
     height. Matches the placeholder's near-square (800x802) source
     so the portrait never crops top or bottom. */
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  flex-shrink: 0;
  /* Positioning context for the certification disc overlay (cards 1
     and 3 — see .engineer-card__disc). */
  position: relative;
}

/* Certification disc overlay — sits in the top-left corner of the
   engineer's photo for engineers with platinum/diamond credentials.
   Slowly rotates continuously like a vinyl, with a subtle hover
   speed-up for interactivity. Respects prefers-reduced-motion. */
.engineer-card__disc {
  position: absolute;
  /* Inside the photo, anchored to its top-left corner. Stays within
     the photo bounds (no negative offset bleeding above/left). */
  top: 0;
  left: 0;
  width: clamp(48px, 5.5vw, 78px);
  height: clamp(48px, 5.5vw, 78px);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  /* Subtle pulse animation — gently scales the disc up and down so
     it feels alive without distracting from the engineer photo. */
  animation: engineer-disc-pulse 2.4s ease-in-out infinite;
  transform-origin: center center;
}

/* Platinum variant — used on the Jeronimo card. The icon-platinum-
   records.png artwork contains TWO discs (silver + gold) stacked
   diagonally, so it needs more room to read clearly. Bigger than the
   base RIAA Diamond badge, and shifted LEFT with a negative offset
   so the silver+gold pair sits flush against the photo's left edge
   (compensating for the transparent padding baked into the PNG).
   The base .engineer-card__disc rule keeps top:0 — only `left` is
   overridden here so the Geeflowcl disc stays where it is. */
.engineer-card__disc--platinum {
  width: clamp(90px, 10vw, 140px);
  height: clamp(90px, 10vw, 140px);
  left: clamp(-1.5rem, -2vw, -0.85rem);
}
.engineer-card__disc img {
  width: 100%;
  height: 100%;
  /* `object-position: top left` aligns the artwork's top-left to the
     container's top-left, so any internal whitespace ends up on the
     bottom + right side instead of pushing the discs toward the
     center of the container. */
  object-fit: contain;
  object-position: top left;
  display: block;
}
.engineer-card:hover .engineer-card__disc {
  animation-duration: 1.2s;
}
@keyframes engineer-disc-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .engineer-card__disc { animation: none; }
}

.engineer-card__body {
  display: flex;
  flex-direction: column;
  /* Very tight gap — applies between name → subtitle so the
     subtitle reads as a tagline attached to the name. The bio's
     own margin-top below pushes it further away. */
  gap: clamp(0.1rem, 0.15vw, 0.18rem);
  /* Tighter breathing room below the photo. */
  margin-top: clamp(0.45rem, 0.7vw, 0.65rem);
}

.engineer-card__name {
  margin: 0;
  /* Anton — condensed heavy display, loaded from Google Fonts. */
  font-family: "Anton", Impact, sans-serif;
  font-weight: 400;                /* Anton only ships at weight 400 */
  font-size: clamp(1.1rem, 1.55vw, 1.45rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #050505;
}

.engineer-card__subtitle {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* Smaller than the Anton name above. */
  font-size: clamp(0.68rem, 0.82vw, 0.82rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #050505;
}

.engineer-card__bio {
  /* Adds extra space ABOVE the bio so the subtitle visually attaches
     to the engineer name above (tight body gap) while the description
     sits in its own block below (this margin-top). */
  margin: clamp(0.5rem, 0.75vw, 0.7rem) 0 0;
  /* Helvetica Now Display, regular weight. */
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(0.7rem, 0.85vw, 0.83rem);
  line-height: 1.45;
  color: rgba(5, 5, 5, 0.85);
}

/* Carousel nav arrows for the engineer carousel — vertically centered
   on the cards, sitting just inside the body's left and right edges. */
.engineers__nav {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}
.engineers__nav--prev {
  left: calc(clamp(0.5rem, 1.5vw, 1.5rem) - 20px);
}
.engineers__nav--next {
  /* Override the SSL carousel's body-right calc — the engineer next
     button sits inside .rooms--engineers, anchored to its right. */
  right: calc(clamp(0.5rem, 1.5vw, 1.5rem) - 20px);
  left: auto;
}
.engineers__nav:hover  { transform: translateY(-50%) scale(1.07); }
.engineers__nav:active { transform: translateY(-50%) scale(0.96); }

/* "Contact Us" CTA below the engineer carousel — same lime pill
   pattern as the "How To Book A Session" CTA so the page has
   one consistent primary-CTA style throughout. */
.engineers__cta-wrap {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  display: flex;
  justify-content: center;
}
.engineers__cta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #050505;
  background: var(--color-lime);
  padding: clamp(0.15rem, 0.3vw, 0.28rem) clamp(0.95rem, 1.6vw, 1.35rem);
  border: 1px solid var(--color-lime);
  border-radius: 10px;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.engineers__cta:hover {
  background: #0a0a0a;
  color: var(--color-lime);
  transform: translateY(-1px);
}
.engineers__cta:active { transform: translateY(0); }

/* =========================================================
   BUILD YOUR SESSION  (section six)
   Two-column interactive booking configurator.
   LEFT  : three input groups (Room / Hours / Add-ons) styled
           as cream tiles that invert to dark + lime when
           selected (mirrors the Canva mockup state).
   RIGHT : sticky live "Session Sheet" with an Integral CF
           Heavy count-up total (soft lime glow = console
           readout vibe) and the two booking CTAs.
   ========================================================= */
.section-build {
  position: relative;
  padding-top:    var(--section-py);
  padding-bottom: var(--section-py);
  background-color: #0a0a0a;
  /* SSL room photo with the Bay Eight Studios pink wordmark on
     screen — the studio "money shot". A lighter overlay than the
     FAQ section so the pink wash + monitors stay visible behind
     the configurator. Swap the URL for a different shot if needed. */
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.78), rgba(10, 10, 10, 0.88)),
    url("../images/rooms/ssl-2.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #f7f4eb;
}

.build__head { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }

.build__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--section-title-size);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #f7f4eb;
  position: relative;
}

/* Pink-dot bullet in the left margin — same pattern as the
   "How To Book" and "Our Engineers" titles. */
.build__title-bullet {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 0.3em;
  transform: translateY(calc(-50% + 0.08em));
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-brand);
  opacity: 0.6;
}

.build__eyebrow {
  margin: clamp(0.85rem, 1.4vw, 1.1rem) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-lime);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* Tighter horizontal gap so each "|" sits close to the words on
     both sides instead of floating between them. */
  gap: 0.5em 0.3em;
}
.build__plus { font-weight: 900; color: var(--color-brand); }

/* Body copy under the lime "Choose the room | ..." subheading. Same
   Helvetica Now treatment as the other section descriptions
   (.studios__desc / .reviews__desc / .engineers__desc). */
.build__desc {
  margin: clamp(0.4rem, 0.75vw, 0.6rem) 0 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--body-size);
  line-height: 1.5;
  color: #f7f4eb;
}

.build__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--card-gap);
  align-items: start;
}

/* -------- LEFT — Configurator -------------------------------- */
.build__configurator {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid #f7f4eb;
  border-radius: clamp(18px, 1.8vw, 26px);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: rgba(0, 0, 0, 0.4);
}

.build-group {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.2vw, 1rem);
  min-width: 0;
}

.build-group__label {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.78rem, 0.95vw, 0.9rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-lime);
  padding-bottom: clamp(0.4rem, 0.7vw, 0.6rem);
  border-bottom: 1px solid rgba(247, 244, 235, 0.1);
}
.build-group__optional {
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(247, 244, 235, 0.7);
}
.build-group__note {
  margin: 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(0.7rem, 0.85vw, 0.8rem);
  letter-spacing: 0.02em;
  color: rgba(247, 244, 235, 0.5);
}

/* ---- Room tiles ---- */
.build-rooms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.6rem, 1vw, 0.85rem);
}

.build-room {
  appearance: none;
  border: 1px solid transparent;
  background: #f7f4eb;
  color: #050505;
  border-radius: clamp(10px, 1vw, 14px);
  padding: clamp(1rem, 1.5vw, 1.35rem) clamp(0.9rem, 1.4vw, 1.25rem);
  text-align: left;
  display: grid;
  /* Pack rows at the top so when the parent grid stretches this card
     to match a taller sibling (e.g. a card with a 2-line hint vs a
     1-line hint), the extra height sits AT THE BOTTOM instead of
     getting distributed between rows — keeps the price/PER HOUR gap
     identical across all three cards. */
  align-content: start;
  gap: 0.15rem;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
              color 0.2s var(--ease), box-shadow 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.build-room:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}
.build-room:focus-visible {
  outline: 2px solid var(--color-lime);
  outline-offset: 2px;
}

.build-room__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.72rem, 0.92vw, 0.85rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(5, 5, 5, 0.7);
}
.build-room__price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 2.1vw, 1.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-brand);
  display: inline-flex;
  align-items: baseline;
  margin-top: 0.15rem;
}
.build-room__currency {
  font-size: 0.55em;
  margin-right: 0.05em;
  transform: translateY(-0.4em);
}
.build-room__per {
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(0.65rem, 0.78vw, 0.72rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(5, 5, 5, 0.66);
}
.build-room__hint {
  margin-top: clamp(0.7rem, 1.1vw, 0.9rem);
  padding-top: clamp(0.55rem, 0.9vw, 0.75rem);
  border-top: 1px solid rgba(5, 5, 5, 0.15);
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(0.65rem, 0.78vw, 0.75rem);
  letter-spacing: 0.02em;
  color: rgba(5, 5, 5, 0.65);
}

/* Selected room — dark inverted with lime accent + glow */
.build-room.is-selected {
  background: #0a0a0a;
  color: #f7f4eb;
  border-color: var(--color-lime);
  box-shadow:
    0 0 0 1px rgba(200, 240, 59, 0.4),
    0 14px 30px rgba(0, 0, 0, 0.5);
}
.build-room.is-selected .build-room__name  { color: var(--color-lime); }
.build-room.is-selected .build-room__price { color: #f7f4eb; }
.build-room.is-selected .build-room__currency { color: var(--color-brand); }
.build-room.is-selected .build-room__per   { color: rgba(247, 244, 235, 0.55); }
.build-room.is-selected .build-room__hint  {
  border-top-color: rgba(247, 244, 235, 0.12);
  color: rgba(247, 244, 235, 0.7);
}

/* ---- Hours tiles ---- */
.build-hours {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.9vw, 0.75rem);
}
.build-hour {
  appearance: none;
  border: 1px solid transparent;
  background: #f7f4eb;
  color: #050505;
  border-radius: clamp(10px, 1vw, 14px);
  padding: clamp(0.9rem, 1.4vw, 1.2rem) 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.18em;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
              color 0.2s var(--ease), box-shadow 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.build-hour:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}
.build-hour:focus-visible {
  outline: 2px solid var(--color-lime);
  outline-offset: 2px;
}
.build-hour__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.build-hour__suffix {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.65rem, 0.8vw, 0.75rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(5, 5, 5, 0.66);
}
.build-hour.is-selected {
  background: #0a0a0a;
  color: #f7f4eb;
  border-color: var(--color-lime);
  box-shadow:
    0 0 0 1px rgba(200, 240, 59, 0.4),
    0 14px 30px rgba(0, 0, 0, 0.5);
}
.build-hour.is-selected .build-hour__suffix { color: var(--color-lime); }

/* ---- Add-ons ---- */
.build-addons {
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 0.7vw, 0.6rem);
}
.build-addon {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.75rem, 1.2vw, 1rem);
  background: #f7f4eb;
  color: #050505;
  border: 1px solid transparent;
  border-radius: clamp(10px, 1vw, 14px);
  padding: clamp(0.85rem, 1.3vw, 1.1rem) clamp(1rem, 1.6vw, 1.35rem);
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
              color 0.2s var(--ease), box-shadow 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.build-addon:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}
.build-addon__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.build-addon__input:focus-visible + .build-addon__check {
  outline: 2px solid var(--color-lime);
  outline-offset: 2px;
}
.build-addon__check {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
  border: 1.5px solid rgba(5, 5, 5, 0.35);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
/* CSS-only checkmark — two rotated borders form the tick */
.build-addon__check::after {
  content: "";
  width: 0.62rem;
  height: 0.32rem;
  border-left:   2px solid #050505;
  border-bottom: 2px solid #050505;
  transform: rotate(-45deg) translate(1px, -2px) scale(0);
  transform-origin: center;
  transition: transform 0.2s var(--ease);
}
.build-addon__title {
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.build-addon__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  letter-spacing: 0.02em;
  /* Darker magenta than --color-brand so the price clears 4.5:1 on the
     cream tile (the brand pink #e82276 only hits 3.87:1). */
  color: #bf1862;
  white-space: nowrap;
}
.build-addon__per {
  font-weight: 500;
  font-size: 0.72em;
  color: rgba(5, 5, 5, 0.66);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 0.1em;
}
.build-addon.is-selected {
  background: #0a0a0a;
  color: #f7f4eb;
  border-color: var(--color-lime);
  box-shadow:
    0 0 0 1px rgba(200, 240, 59, 0.4),
    0 10px 22px rgba(0, 0, 0, 0.45);
}
.build-addon.is-selected .build-addon__check {
  background: var(--color-lime);
  border-color: var(--color-lime);
}
.build-addon.is-selected .build-addon__check::after {
  transform: rotate(-45deg) translate(1px, -2px) scale(1);
}
.build-addon.is-selected .build-addon__price { color: var(--color-lime); }
.build-addon.is-selected .build-addon__per   { color: rgba(247, 244, 235, 0.5); }

/* -------- RIGHT — Session sheet ----------------------------- */
.build__sheet {
  position: sticky;
  top: clamp(5rem, 7vw, 6.5rem);
  background: #0a0a0a;
  border: 1px solid #f7f4eb;
  border-radius: clamp(18px, 1.8vw, 26px);
  padding: clamp(1.5rem, 2.4vw, 2.15rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.6vw, 1.35rem);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  min-width: 0;
}

/* Suite preview image at the top of the session sheet.
   Bleeds through the sheet's padding to sit edge-to-edge with the
   sheet's rounded top corners. The image cross-fades when the user
   picks a different suite (driven by main.js). */
.build-sheet__preview {
  position: relative;
  margin: calc(clamp(1.5rem, 2.4vw, 2.15rem) * -1) calc(clamp(1.5rem, 2.4vw, 2.15rem) * -1) 0;
  border-radius: clamp(17px, 1.8vw, 25px) clamp(17px, 1.8vw, 25px) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #0a0a0a;
}
.build-sheet__preview-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s var(--ease);
}
.build-sheet__preview.is-fading .build-sheet__preview-img { opacity: 0; }

/* Suite tag pinned to the top-right of the preview image.
   Lime pill with dark Integral CF caps — pops against any photo. */
.build-sheet__preview-tag {
  position: absolute;
  top: clamp(0.65rem, 1.1vw, 0.95rem);
  right: clamp(0.65rem, 1.1vw, 0.95rem);
  background: var(--color-lime);
  color: #0a0a0a;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: clamp(0.3rem, 0.55vw, 0.45rem) clamp(0.6rem, 1vw, 0.85rem);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  /* Cross-fade in sync with the image swap. */
  transition: opacity 0.35s var(--ease);
}
.build-sheet__preview.is-fading .build-sheet__preview-tag { opacity: 0; }

.build-sheet__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: clamp(0.75rem, 1.1vw, 1rem);
  border-bottom: 1px solid rgba(247, 244, 235, 0.12);
}
.build-sheet__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-brand);
  opacity: 0.7;
  flex-shrink: 0;
}
.build-sheet__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-lime);
}

.build-sheet__rows {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 0.95vw, 0.85rem);
}
.build-sheet__row {
  display: grid;
  grid-template-columns: clamp(72px, 7vw, 96px) 1fr;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
}
.build-sheet__key {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.7rem, 0.82vw, 0.78rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(247, 244, 235, 0.72);
}
.build-sheet__val {
  margin: 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  line-height: 1.3;
  color: #f7f4eb;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  align-items: baseline;
  min-width: 0;
}
.build-sheet__rate {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85em;
  letter-spacing: 0.02em;
  color: var(--color-lime);
}

.build-sheet__total {
  margin-top: clamp(0.5rem, 0.8vw, 0.75rem);
  padding-top: clamp(1rem, 1.4vw, 1.25rem);
  border-top: 1px solid rgba(247, 244, 235, 0.12);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.build-sheet__total-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247, 244, 235, 0.6);
}
.build-sheet__total-amount {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #f7f4eb;
  display: inline-flex;
  align-items: baseline;
  /* Soft lime glow — feels like a console / LED readout. */
  text-shadow:
    0 0 18px rgba(200, 240, 59, 0.25),
    0 0 38px rgba(200, 240, 59, 0.12);
}
.build-sheet__currency {
  font-size: 0.5em;
  color: var(--color-brand);
  transform: translateY(-0.55em);
  margin-right: 0.05em;
}

.build-sheet__cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: clamp(0.25rem, 0.5vw, 0.5rem);
}
.build-sheet__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(0.7rem, 0.85vw, 0.82rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: clamp(0.6rem, 0.95vw, 0.8rem) 0.8rem;
  border-radius: 8px;
  transition: filter 0.2s var(--ease), transform 0.2s var(--ease), background 0.2s var(--ease);
  text-align: center;
  white-space: nowrap;
}
.build-sheet__btn--ghost {
  background: transparent;
  color: #f7f4eb;
  border: 1px solid #f7f4eb;
}
.build-sheet__btn--ghost:hover {
  background: rgba(247, 244, 235, 0.08);
  transform: translateY(-1px);
}
.build-sheet__btn--primary {
  background: var(--color-lime);
  color: #050505;
  border: 1px solid var(--color-lime);
}
.build-sheet__btn--primary:hover {
  background: #0a0a0a;
  color: var(--color-lime);
  border-color: var(--color-lime);
  transform: translateY(-1px);
}

/* -------- Responsive collapse ------------------------------- */
@media (max-width: 960px) {
  .build__grid { grid-template-columns: 1fr; }
  .build__sheet { position: static; }
}
@media (max-width: 600px) {
  .build-rooms     { grid-template-columns: 1fr; }
  .build-hours     { grid-template-columns: repeat(2, 1fr); }
  .build-sheet__cta { grid-template-columns: 1fr; }
  .build-sheet__row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

/* =========================================================
   OUR REVIEWS  (section seven)
   Two infinite review-card marquees scrolling in OPPOSITE
   directions (top row right-to-left, bottom row left-to-right).
   Cards mirror the engineer-card aesthetic — cream surface on
   the dark section, gold stars, brand-pink avatar, Google "G"
   attribution. Edge masks fade content out softly at the
   viewport's left and right.
   ========================================================= */
.section-reviews {
  position: relative;
  padding-top:    var(--section-py);
  /* Extra breathing room below the review cards before the next section. */
  padding-bottom: calc(var(--section-py) + clamp(2rem, 4vw, 4rem));
  background: #111111;   /* match the Our Studios section background */
  color: #f7f4eb;
  overflow: hidden;
}

.reviews__head-wrap {
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.reviews__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--section-title-size);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #f7f4eb;
  position: relative;
}

.reviews__title-bullet {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 0.3em;
  transform: translateY(calc(-50% + 0.08em));
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-brand);
  opacity: 0.6;
}

.reviews__eyebrow {
  margin: clamp(0.85rem, 1.4vw, 1.1rem) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-lime);
}
/* Body copy under the lime subheading. Same Helvetica Now treatment
   as .studios__desc so the section hierarchy reads consistently.
   Stays on one line at desktop widths; wraps naturally on mobile
   (see the @media block below). */
.reviews__desc {
  margin: clamp(0.2rem, 0.4vw, 0.4rem) 0 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--body-size);
  line-height: 1.45;
  color: #f7f4eb;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .reviews__desc { white-space: normal; }
}

/* ----- Marquee viewport (two stacked, opposite directions) ----- */
.reviews-marquee {
  width: 100%;
  overflow: hidden;
  /* Soft fade on left + right edges so cards drift in/out gently. */
  -webkit-mask-image: linear-gradient(
    to right, transparent 0, #000 5%, #000 95%, transparent 100%
  );
          mask-image: linear-gradient(
    to right, transparent 0, #000 5%, #000 95%, transparent 100%
  );
  /* Drag affordance — cursor swaps to grabbing during drag (see
     [data-dragging="true"]) and touch users can still scroll the
     page vertically because we only opt into horizontal panning. */
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.reviews-marquee[data-dragging="true"] { cursor: grabbing; }
.reviews-marquee + .reviews-marquee {
  margin-top: clamp(0.85rem, 1.5vw, 1.25rem);
}

.reviews-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.reviews-group {
  display: flex;
  gap: var(--card-gap);
  padding-inline: clamp(0.4rem, 0.8vw, 0.6rem);
  flex-shrink: 0;
  align-items: stretch;
}

/* ----- Card ----- */
.review-card {
  flex-shrink: 0;
  width: clamp(280px, 24vw, 360px);
  background: #f7f4eb;
  color: #050505;
  border-radius: clamp(10px, 1vw, 14px);
  padding: clamp(1rem, 1.4vw, 1.25rem) clamp(1.1rem, 1.5vw, 1.35rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 0.85vw, 0.75rem);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5);
}

.review-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
}

.review-card__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-brand);
  color: #f7f4eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}
/* Alt avatar tone — darker pink/purple for visual variety
   between cards (mirrors how Google reviews algorithmically
   colors avatars by initial). */
.review-card__avatar--alt {
  background: #8b3aa8;
}

.review-card__meta { min-width: 0; }
.review-card__name {
  margin: 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  color: #050505;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-card__time {
  margin: 0.1rem 0 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 0.78rem;
  color: rgba(5, 5, 5, 0.7);
}

.review-card__google {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}

.review-card__stars {
  margin: 0;
  color: #FBBC05;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  line-height: 1;
}

.review-card__body {
  margin: 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(5, 5, 5, 0.85);
  /* Truncate to 4 lines so every card has the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----- See-all CTA ----- */
.reviews__cta-wrap {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  display: flex;
  justify-content: center;
}
.reviews__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-lime);
  padding: 0.4rem 0;
  border-bottom: 1px solid currentColor;
  transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}
.reviews__cta-arrow { transition: transform 0.2s var(--ease); }
.reviews__cta:hover { color: var(--color-brand); gap: 0.65rem; }
.reviews__cta:hover .reviews__cta-arrow { transform: translateX(2px); }

/* ----- Responsive ----- */
@media (max-width: 600px) {
  .review-card {
    width: clamp(240px, 80vw, 300px);
  }
}

/* =========================================================
   FAQ  (section eight)
   Two-column layout: left = sticky title block, right =
   accordion list of white question cards. Background uses
   a studio photo with a magenta-tinted dark overlay (matches
   the Canva mockup's pink wash). JS animates the panel height
   via GSAP and rotates the brand-pink "+" into "×".
   ========================================================= */
.section-faq {
  position: relative;
  padding-top:    var(--section-py);
  padding-bottom: var(--section-py);
  background-color: #0a0a0a;
  /* Dark overlay over the whisper photo — matches the depth of the How To
     Book / Build sections (same gradient strength). */
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.78), rgba(10, 10, 10, 0.86)),
    url("../images/rooms/new-whisper-flip.jpg");
  background-size: cover;
  background-position: center center;
  color: #f7f4eb;
  overflow: hidden;
}

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

/* ---- LEFT — sticky intro column ---- */
.faq__intro {
  position: sticky;
  top: clamp(5rem, 7vw, 6.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.2vw, 1rem);
}

.faq__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 4.5vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #f7f4eb;
  position: relative;
}
/* Pink-dot bullet in the left margin — same pattern as
   How-To-Book, Engineers, Build, Reviews. */
.faq__title-bullet {
  position: absolute;
  top: 0.4em;
  right: 100%;
  margin-right: 0.35em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-brand);
  opacity: 0.6;
}

.faq__eyebrow {
  margin: clamp(0.5rem, 1vw, 0.85rem) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-lime);
}

.faq__desc {
  margin: clamp(0.5rem, 1vw, 0.85rem) 0 0;
  max-width: 38ch;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--body-size);
  line-height: 1.5;
  color: rgba(247, 244, 235, 0.75);
}

/* ---- RIGHT — accordion list ---- */
.faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1vw, 0.85rem);
}

.faq-item {
  background: #f7f4eb;
  color: #050505;
  border-radius: clamp(8px, 0.9vw, 12px);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
}

.faq-item__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  background: transparent;
  border: 0;
  padding: clamp(1rem, 1.5vw, 1.35rem) clamp(1.25rem, 2vw, 1.75rem);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.faq-item__btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}

.faq-item__q {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #050505;
}

/* CSS-only "+" → "×" toggle. Two crossing bars built from
   ::before / ::after; the vertical bar collapses on open. */
.faq-item__icon {
  position: relative;
  width: clamp(22px, 1.8vw, 28px);
  height: clamp(22px, 1.8vw, 28px);
  flex-shrink: 0;
  transition: transform 0.35s var(--ease);
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--color-brand);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
.faq-item__icon::before {
  /* Horizontal bar — thicker for a bolder + */
  left: 0;
  right: 0;
  top: 50%;
  height: 5px;
  margin-top: -2.5px;
}
.faq-item__icon::after {
  /* Vertical bar — rotates out on open */
  top: 0;
  bottom: 0;
  left: 50%;
  width: 5px;
  margin-left: -2.5px;
}
.faq-item.is-open .faq-item__icon {
  /* Whole icon rotates so the cross feels like a unified motion */
  transform: rotate(135deg);
}

.faq-item__panel {
  /* GSAP toggles inline height + opacity; initial state hides it. */
  height: 0;
  opacity: 0;
  overflow: hidden;
}
/* Belt-and-suspenders — when the panel has the [hidden] attribute
   it MUST be fully removed from layout, even if a later CSS rule
   accidentally sets `display:` on it. Without this, a stale
   inline height set by GSAP could keep a closed panel pushing the
   next item down. */
.faq-item__panel[hidden] {
  display: none !important;
}
.faq-item__panel-inner {
  padding: 0 clamp(1.25rem, 2vw, 1.75rem) clamp(1.1rem, 1.6vw, 1.45rem);
  border-top: 1px solid rgba(5, 5, 5, 0.08);
  padding-top: clamp(0.85rem, 1.3vw, 1.15rem);
}
.faq-item__panel-inner p {
  margin: 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--body-size);
  line-height: 1.6;
  color: rgba(5, 5, 5, 0.78);
}

/* Stack on tablet/mobile — sidebar moves above the list. */
@media (max-width: 900px) {
  .faq {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  /* The FAQ stacks into one column at 900px, so it must also CENTER
     here — not only at the 720px section-centering breakpoint, or the
     721–900px range shows a stacked-but-left-aligned intro. */
  .faq__intro {
    position: static;
    text-align: center;
  }
  .faq__title {
    display: inline-block;
    font-size: clamp(2rem, 7vw, 2.75rem);
  }
  .faq__eyebrow { text-align: center; }
  .faq__desc {
    max-width: none;
    margin-inline: auto;
    text-align: center;
  }
  .faq__title-bullet {
    position: static !important;
    display: inline-block !important;
    inset: auto !important;
    margin: 0 0.35em 0 0 !important;
    transform: none !important;
    vertical-align: 0.12em;
  }
}
@media (max-width: 600px) {
  .faq-item__btn {
    grid-template-columns: 1fr auto;
    gap: 0.9rem;
  }
}

/* =========================================================
   CONTACT  (section nine — "Ready To Record")
   Centered title block + pill row, then a two-tone card:
   WHITE info panel on the left + LIME form panel on the right.
   Matches the Canva mockup. GSAP cascades the entrance:
   header pulses in, card scales up, then info rows + form
   fields stagger.
   ========================================================= */
.section-contact {
  position: relative;
  padding-top:    var(--section-py);
  padding-bottom: var(--section-py);
  background: #111111;   /* match the Our Studios section background */
  color: #f7f4eb;
  overflow: hidden;
}

.contact { display: block; }

/* ---- Centered header (title / eyebrow / pills) ---- */
.contact__head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.contact__title {
  display: inline-block;
  margin: 0;
  position: relative;
  padding-left: 0;
  font-family: var(--font-display);
  font-weight: 900;
  /* Capped a touch lower (was max 7rem) so "Ready to Record?" fits on
     a single line inside the container at standard desktop widths. */
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #f7f4eb;
  white-space: nowrap;
}
@media (max-width: 720px) {
  /* On phones the text would overflow the viewport even at the min
     clamp size — let it wrap onto two lines instead. */
  .contact__title { white-space: normal; }
}

.contact__title-bullet {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 0.3em;
  transform: translateY(calc(-50% + 0.08em));
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-brand);
  opacity: 0.6;
}

.contact__eyebrow {
  margin: clamp(0.65rem, 1.1vw, 0.95rem) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-lime);
}

.contact__pills {
  list-style: none;
  padding: 0;
  margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

/* ---- The two-tone card -------------------------------------- */
.contact-card {
  display: grid;
  /* Left info column fixed width; the rest of the (wider) card is the form. */
  grid-template-columns: minmax(0, 26.5rem) minmax(0, 1fr);
  background: #f7f4eb;
  border-radius: clamp(9px, 1vw, 14px);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  /* Thin cream ring around the whole card, offset so the dark section
     shows through a wide gap. The outline follows this radius. */
  outline: 1.5px solid #f7f4eb;
  outline-offset: 20px;
  /* Full page content width (matches the section title / container). */
  max-width: var(--container);
  margin: 0 auto;
}

/* ---- LEFT — white info column ---- */
.contact-info {
  background: #f7f4eb;
  color: #050505;
  /* No right padding — the lime panel's left margin provides the gap.
     Generous left padding so the content sits inset from the edge. */
  padding: clamp(1.75rem, 3vw, 2.75rem) 0 clamp(1.75rem, 3vw, 2.75rem) clamp(1.85rem, 3.1vw, 2.7rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2vw, 1.5rem);
}

.contact-info__brand {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(0.85rem, 1vw, 1rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.contact-info__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.6vw, 1.35rem);
}

.contact-info__row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: clamp(0.85rem, 1.3vw, 1.1rem);
  align-items: start;
}

.contact-info__icon {
  width: 40px;
  height: 40px;
  /* Rounded-square box (matches the social icon boxes + the design). */
  border-radius: 10px;
  border: 1px solid rgba(5, 5, 5, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #050505;
  flex-shrink: 0;
}
.contact-info__icon svg { width: 18px; height: 18px; }

.contact-info__body { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.contact-info__title {
  margin: 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.2;
  color: #050505;
}
.contact-info__sub {
  margin: 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(0.82rem, 0.92vw, 0.9rem);
  line-height: 1.4;
  color: rgba(5, 5, 5, 0.6);
}
.contact-info__highlight {
  margin: 0.1rem 0 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.85rem, 0.95vw, 0.92rem);
  line-height: 1.4;
  color: #050505;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
a.contact-info__highlight:hover { border-bottom-color: #050505; }

/* Reviews badge row */
.contact-info__reviews {
  /* Sits below the info rows, partway down (the social row is pinned to the bottom). */
  margin-top: clamp(3.75rem, 8.5vw, 6.5rem);
  /* No divider line. Middle column takes the slack (1fr) so the block
     spans the full content width — badge sits at the right edge, in line
     with the info rows above. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.6rem, 1vw, 0.95rem);
}
.contact-info__google { width: 28px; height: 28px; flex-shrink: 0; }
.contact-info__reviews-title {
  margin: 0;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.85rem, 0.98vw, 0.98rem);
  line-height: 1.25;
  color: #050505;
}
.contact-info__reviews-meta {
  margin: 0.1rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.contact-info__reviews-score {
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #050505;
}
.contact-info__reviews-stars {
  color: #FBBC05;
  letter-spacing: 0.08em;
  font-size: 1rem;
}
/* 645+ Reviews pip — two-tier text inside a yellow circle to
   match the Canva design exactly: "645+" bigger on top, smaller
   "REVIEWS" caption underneath. */
.contact-info__reviews-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #FFC73A;
  color: #050505;
  font-family: var(--font-display);
  text-align: center;
  text-transform: uppercase;
  flex-shrink: 0;
  line-height: 1;
  gap: 1px;
  /* Nudge left, away from the photo panel edge. */
  margin-right: clamp(1rem, 2.5vw, 2.3rem);
}
.contact-info__reviews-badge-num {
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}
.contact-info__reviews-badge-label {
  font-weight: 800;
  font-size: 0.55rem;
  letter-spacing: 0.04em;
}

/* Social icons — small rounded squares with a thin outline so
   they read as a grouped row at the bottom of the white panel
   (matches the design mock). */
.contact-info__social {
  list-style: none;
  padding: 0;
  /* Pinned to the bottom of the info column. */
  margin: auto 0 0;
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 0.7vw, 0.6rem);
}
.contact-info__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #050505;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(5, 5, 5, 0.18);
  background: #f7f4eb;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              background 0.2s var(--ease), transform 0.2s var(--ease);
}
.contact-info__social svg { width: 16px; height: 16px; }
.contact-info__social a:hover {
  color: var(--color-brand);
  border-color: var(--color-brand);
  transform: translateY(-2px);
}

/* ---- RIGHT — form over a studio photo ---- */
.contact-form {
  position: relative;
  color: #f7f4eb;
  /* Photo fills the right column (full height, flush to the right edge),
     with all four corners rounded — the right corners align with the card,
     the left corners round against the cream column. */
  border-radius: clamp(10px, 1.1vw, 15px);
  overflow: hidden;
  /* Magenta studio shot — light gradient only, so the photo stays vivid
     (white text stays legible). */
  background-image:
    linear-gradient(180deg, rgba(20, 0, 16, 0.12) 0%, rgba(20, 0, 16, 0.04) 42%, rgba(8, 0, 6, 0.45) 100%),
    url("../images/contact-bg.webp");
  background-size: cover;
  background-position: center;
  /* Padding sets the magenta margin around the heading + white card. */
  padding: clamp(1.5rem, 2.6vw, 2.3rem) 8% clamp(1.7rem, 2.9vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 0.6vw, 0.55rem);
}

.contact-form__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(0.8rem, 0.95vw, 0.9rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-lime);
}
.contact-form__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #f7f4eb;
}
/* Intro copy sits directly on the photo, in white. */
.contact-form__desc {
  margin: 0 0 clamp(0.55rem, 1.1vw, 0.95rem);
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.45vw, 1.35rem);
  line-height: 1.5;
  color: #f7f4eb;
  max-width: 42ch;
}

/* ---- White form card over the photo ---- */
.contact-form__card {
  background: #f7f4eb;
  border-radius: clamp(14px, 1.4vw, 20px);
  padding: clamp(0.7rem, 1.1vw, 1rem) clamp(1.05rem, 1.8vw, 1.55rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.36rem, 0.62vw, 0.55rem);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

/* ---- Labelled field group ---- */
.contact-field { display: flex; flex-direction: column; gap: clamp(0.3rem, 0.5vw, 0.45rem); }
.contact-field__label {
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.82rem, 0.95vw, 0.92rem);
  color: #050505;
}
.contact-field__req { color: var(--color-brand); font-style: italic; font-weight: 600; }
.contact-field__opt { color: rgba(5, 5, 5, 0.5); font-style: italic; font-weight: 500; }
.contact-field__grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.6rem, 1vw, 0.9rem);
}

/* ---- Inputs / textarea / select inside the card ---- */
.contact-input,
.contact-textarea,
.contact-select {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid rgba(5, 5, 5, 0.2);
  border-radius: 8px;
  padding: clamp(0.4rem, 0.6vw, 0.52rem) clamp(0.7rem, 1vw, 0.85rem);
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(0.85rem, 0.95vw, 0.92rem);
  line-height: 1.4;
  color: #050505;
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-input::placeholder,
.contact-textarea::placeholder {
  color: rgba(5, 5, 5, 0.4);
  font-weight: 500;
}
.contact-input:focus,
.contact-textarea:focus,
.contact-select:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px rgba(232, 34, 118, 0.18);
}
.contact-textarea { resize: vertical; min-height: 2.9rem; }
/* Dropdowns — boxed inputs with a custom dark chevron. */
.contact-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23050505' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.95rem;
}
.contact-select:has(option[value=""]:checked) { color: rgba(5, 5, 5, 0.4); }
.contact-select option { color: #050505; }

/* ---- Captcha ---- */
.contact-form__captcha { margin-top: clamp(0.15rem, 0.3vw, 0.3rem); min-height: 65px; }

/* ---- Submit button — brand-pink pill ---- */
.contact-form__submit {
  align-self: flex-start;
  margin-top: clamp(0.25rem, 0.5vw, 0.45rem);
  background: var(--color-brand);
  color: #f7f4eb;
  border: 0;
  padding: clamp(0.6rem, 1vw, 0.8rem) clamp(1.8rem, 3vw, 2.4rem);
  border-radius: 999px;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}
.contact-form__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(232, 34, 118, 0.4);
  filter: brightness(1.06);
}
.contact-form__submit:active { transform: translateY(0); }

/* ---- Initial state used by GSAP for the entrance animation
       (set in JS via gsap.set so non-JS users don't see the
       elements hidden). ---- */

/* ---- Responsive — stack the card columns below 760px ---- */
@media (max-width: 760px) {
  .contact-card {
    grid-template-columns: 1fr;
  }
  .contact-info__reviews { grid-template-columns: auto 1fr; }
  .contact-info__reviews-badge { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 480px) {
  /* Stack the paired fields (first/last, phone/email) on small screens. */
  .contact-field__grid2 { grid-template-columns: 1fr; }
}

/* =========================================================
   GRAVITY FORMS — restyled to the NEW white-card design.
   Scoped to .section-contact so it never affects GF elsewhere.
   The shortcode lives inside .contact-form__card (white card on
   the magenta photo panel). Mirrors .contact-input / .contact-select
   / .contact-form__submit. Tuned without seeing form #1's exact
   fields — expect minor adjustments once it renders.
   ========================================================= */
.section-contact .gform_wrapper,
.section-contact .gform_wrapper * { box-sizing: border-box; }
.section-contact .gform_wrapper { width: 100%; }

/* Field rows — two-column grid so GF half-width fields sit side by side. */
.section-contact .gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.5rem, 0.9vw, 0.8rem) clamp(0.6rem, 1vw, 0.9rem);
}
.section-contact .gform_wrapper .gfield { grid-column: 1 / -1; min-width: 0; margin: 0; }
.section-contact .gform_wrapper .gfield.gf_left_half,
.section-contact .gform_wrapper .gfield.gf_right_half,
.section-contact .gform_wrapper .gfield[class*="gfield--width-half"] { grid-column: span 1; }

/* Labels + required marker */
.section-contact .gform_wrapper .gfield_label {
  display: block;
  margin: 0 0 clamp(0.3rem, 0.5vw, 0.45rem);
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.82rem, 0.95vw, 0.92rem);
  color: #050505;
}
.section-contact .gform_wrapper .gfield_required {
  color: var(--color-brand);
  font-style: italic;
  font-weight: 600;
  margin-left: 0.25em;
}

/* Boxed white inputs / textarea / select */
.section-contact .gform_wrapper input[type="text"],
.section-contact .gform_wrapper input[type="email"],
.section-contact .gform_wrapper input[type="tel"],
.section-contact .gform_wrapper input[type="url"],
.section-contact .gform_wrapper input[type="number"],
.section-contact .gform_wrapper input[type="password"],
.section-contact .gform_wrapper textarea,
.section-contact .gform_wrapper select {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid rgba(5, 5, 5, 0.2);
  border-radius: 8px;
  padding: clamp(0.4rem, 0.6vw, 0.52rem) clamp(0.7rem, 1vw, 0.85rem);
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(0.85rem, 0.95vw, 0.92rem);
  line-height: 1.4;
  color: #050505;
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.section-contact .gform_wrapper textarea { resize: vertical; min-height: 2.9rem; }
.section-contact .gform_wrapper input::placeholder,
.section-contact .gform_wrapper textarea::placeholder { color: rgba(5, 5, 5, 0.4); font-weight: 500; }
.section-contact .gform_wrapper input:focus,
.section-contact .gform_wrapper textarea:focus,
.section-contact .gform_wrapper select:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px rgba(232, 34, 118, 0.18);
}

/* Dropdowns — custom dark chevron */
.section-contact .gform_wrapper select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23050505' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.95rem;
}

/* Name (first/last) and other multi-input fields */
.section-contact .gform_wrapper .ginput_complex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.6rem, 1vw, 0.9rem);
}
.section-contact .gform_wrapper .ginput_complex > span { display: block; }
.section-contact .gform_wrapper .ginput_complex label {
  font-size: clamp(0.7rem, 0.8vw, 0.78rem);
  color: rgba(5, 5, 5, 0.5);
  font-weight: 500;
}

/* Footer / submit — brand-pink pill */
.section-contact .gform_wrapper .gform_footer,
.section-contact .gform_wrapper .gform-footer {
  display: flex;
  margin: clamp(0.4rem, 0.7vw, 0.6rem) 0 0;
  padding: 0;
}
.section-contact .gform_wrapper .gform_button {
  background: var(--color-brand);
  color: #f7f4eb;
  border: 0;
  padding: clamp(0.6rem, 1vw, 0.8rem) clamp(1.8rem, 3vw, 2.4rem);
  border-radius: 999px;
  font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}
.section-contact .gform_wrapper .gform_button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(232, 34, 118, 0.4);
  filter: brightness(1.06);
}
.section-contact .gform_wrapper .gform_button:active { transform: translateY(0); }

/* Errors + confirmation */
.section-contact .gform_wrapper .gfield_error input,
.section-contact .gform_wrapper .gfield_error textarea,
.section-contact .gform_wrapper .gfield_error select { border-color: #e23; }
.section-contact .gform_wrapper .validation_message,
.section-contact .gform_wrapper .gform_validation_errors { color: #c00; font-size: 0.8rem; margin-top: 0.25rem; }
.section-contact .gform_confirmation_message { color: #050505; font-weight: 600; }

@media (max-width: 480px) {
  .section-contact .gform_wrapper .gform_fields,
  .section-contact .gform_wrapper .ginput_complex { grid-template-columns: 1fr; }
}