/* Start:/local/templates/union/assets/css/zoom_index.css?17394240096352*/
body.s1 .header__video-overlay-desktop {
	background-image: url('/local/templates/union/assets/images/s1/Zoom-Recording-Studio-in-Los-Angeles_hz.webp'); 
	background-position: bottom !important;
    background-size: contain !important;
}

.s1 .h1-wrapper, .s2 .h1-wrapper, .s4 .h1-wrapper {
	top: 250px !important;
}

@media (max-width: 770px) {
	.s1 .header__video-overlay-mobile {
		display: block;
		background-position: bottom;
		background-image: url('/local/templates/union/assets/images/s1/Zoom-Recording-Studio-in-Los-Angeles.webp'); 
	}
	.s1 .header__burger:before, .s1 .header__burger:after {
		background-color: #ffffff;
	}
	.s1 .heade.sticky .header__burger span {
		background-color: #ffffff;
	}
	.s1 .header__video-overlay-mobile {
		display: block;
		background-position: bottom;
		background-image: url('/local/templates/union/assets/images/s1/Zoom-Recording-Studio-in-Los-Angeles.webp'); 
	}
    .header_video {
        height: 170vw !important;
        max-height: 170vh !important;
    }
	.s1 .h1-wrapper, .s2 .h1-wrapper, .s4 .h1-wrapper {
		top: 270px !important;
	}
    .header__sub-title {
        margin: 485px auto 0px !important;
	}
}

.youtube-button {
	position: absolute;
	top: 43%;
	left: 47%;
}
.img-youtube-video {
	width: 720px;
	height: 435px;
}
@media (max-width: 420px){
	.youtube-button {
		top: 38%;
		left: 42%;
	}
	.img-youtube-video {
		width: 100%;
		height: 240px;
	}
}
@media (min-width: 421px) and (max-width: 750px){
	.youtube-button {
		top: 38%;
		left: 44%;
	}
	.img-youtube-video {
		width: 100%;
		height: 350px;
	}
}

.offer-name {
	font-weight: bold;
}

.offer-price {
	color: #e021bf;
}

.services-section .tariff-items .tariff-item {
	margin: 25px 50px 25px 50px;
	border-radius: 25px;
	background-color: #020001;
}

.services-section .tariff-items .tariff-item .services-action .btn {
	letter-spacing: -1px;
	font-size: 22px;
	width: 100%;
	background-color: #ff0066;
	color: #020001;
	/*border-color: #020001;*/
}

.services-section .tariff-items .tariff-item.popular-offer .services-action .btn {
	background-color: #ffffff;
	color: #020001;

}

.services-section .tariff-items .tariff-item .tariff-h,
.services-section .tariff-items .tariff-item .tariff-h2 {
	text-align: center;
	width: 100%;
	font-size: 20px;
	color: #e8e5e6;
	padding-right: 0; /*delete*/
}

.services-section .tariff-items .tariff-item .tariff-include .rules{
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	color: #ffffff;
}

.services-section .tariff-items .tariff-item .tariff-include {
	min-height: 194px;
	position: relative;

}

.services-section .tariff-items .tariff-item.popular-offer .tariff-price {
	border-bottom: 4px solid #020001;
}


.services-section .tariff-items .tariff-item .tariff-price {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 64px;
	text-align: center;
	border-bottom: 4px solid #ffffff;
	color: #ffffff;
	font-weight: 900;
	width: 100%;
}


.services-section .tariff-items .tariff-item .tariff-description .list-img .list-img-item {
	background: url('/local/templates/union/assets/images/zoom-green-circle-with-tick.svg') no-repeat 0 6px;
	padding-left: 22px;
	text-align: left;
	margin-bottom: 5px;
}

.services-section .tariff-items .tariff-item .tariff-description .list-img .list-img-item.disable {
	background: url('/local/templates/union/assets/images/zoom-green-circle-with-tick-disable.svg') no-repeat 0 6px;
	padding-left: 22px;
}

.services-section .tariff-items .tariff-item .tariff-description {
	padding-top: 20px;
	text-align: justify;
	color: #ffffff;
}

.services-section .tariff-items .tariff-item.popular-offer .tariff-description {
	color: #ffffff;
}

.services-section .tariff-items .tariff-item .tariff-description  a{
	display: block;
	text-align: center;
	color: #6e289a;
	text-decoration: underline;
	margin-top: 5px;
}

.services-section .tariff-items .tariff-item .tariff-description  span{
	display: block;
	text-align: center;
	margin-top: 5px;
}

.services-section .tariff-items .tariff-item.popular-offer {
	background-color: #ff0066;
	color: #020001;
}

.services-section .tariff-items .tariff-item.popular-offer .tariff-price {
	color: #020001;
	padding: 20px 0;
}

.services-section .tariff-items .tariff-item.popular-offer .tariff-h,
.services-section .tariff-items .tariff-item.popular-offer .tariff-h2,
.services-section .tariff-items .tariff-item.popular-offer .tariff-include .include-item .include-cost,
.services-section .tariff-items .tariff-item.popular-offer .tariff-include .include-item .offer-price {
	color: #000000;
}


.tariff-items .tariff-item.popular-offer .include-h {
	padding: 8px 0 8px;
}


.services-section .tariff-items .tariff-item:hover .services-action .btn:hover {
	color: #ffffff;
	border-color: #ffffff;
}

.services-section .tariff-items .tariff-item {
	transition: transform .2s;
}

.services-section .tariff-items .tariff-item:hover {
	transform: scale(1.05);
}
.services-section .tariff-items .tariff-item .tariff-include .include-item{
	min-height: 65px;
}
.services-section .tariff-items .tariff-item{
	padding: 15px 24px 25px;
}

.services-section .section-intro{
	padding: 0;
}
.engineers-page-link{
	font-size: 18px;
	text-decoration: underline;
	display: block;
	margin-bottom: 10px;
}
.services-section .tariff-items .tariff-item .tariff-include .include-item{
	border-bottom: 1px solid #7d7d7d;
}

@media (max-width: 1025px) {
	.services-section .tariff-items .tariff-item {
		margin: 25px 20px 25px 20px;
		border-radius: 25px;
	}

	.services-section .tariff-items .tariff-item .tariff-h,
	.services-section .tariff-items .tariff-item .tariff-h2 {
		font-size: 18px;
	}

}


@media (max-width: 450px) {
	.services-section .tariff-items .tariff-item .tariff-include .rules{
		display: block;
		bottom: 0;
		width: 100%;
		text-align: center;
		color: #ffffff;
		position: relative;
	}
	.services-section .tariff-items .tariff-item {
		margin: 25px;
	}
	.services-section .tariff-items .tariff-item {
		padding: 30px 25px 36px;
	}
}
@media (max-width: 420px) {
	.services-section .tariff-items .tariff-item {
		margin: 25px;
	}
	.services-section .tariff-items .tariff-item {
		padding: 15px 25px 25px;
	}
}
@media (max-width: 375px) {
	.services-section .tariff-items .tariff-item {
		margin: 10px;
	}
	.services-section .tariff-items .tariff-item {
		padding: 15px 25px 25px;
	}
}

/* End */


/* Start:/local/templates/union/assets/css/zoom_index_refresh_full.css?1784342912131788*/
/* =============================================================================
   ZOOM homepage refresh — zoomrecordingstudio.com/index.php ONLY
   Cinematic, image-led hero rebuild in ZOOM brand colors (v2).
   SEO-safe: presentation only. No content/link/schema/alt changes.
   Source of truth for color: client/src/design.ts (ZOOM #FF006A / #1C1C1C).
   Loaded link-in-body after zoom_index.css; homepage-scoped (never loaded on
   inner pages), so .header / .addline rules cannot leak site-wide.
   ============================================================================= */

/* ---- Item 6 (owner fix, round 3): self-hosted DISPLAY font -----------------
   "Clash Display" (Fontshare, free/self-hostable) — a distinctive bold grotesque
   that elevates the "2027 console" feel. ONE weight self-hosted (Bold, 700, one
   14.5KB woff2), applied to the big hero + section headings ONLY; body copy stays
   on the fast system stack (perf). font-display:swap = no invisible-text stall
   (system-ui shows first, Clash swaps in). The single Bold face is declared over
   the 700-900 range so the heading rules' 800/900 weights map to it WITHOUT
   faux-bold synthesis. Served from the template assets (uploaded, chowned). */
@font-face {
  font-family: "Clash Display";
  src: url("/local/templates/union/assets/fonts/ClashDisplay-Bold.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Item A: token layer ---------------------------------------------------
   Homepage-scoped stylesheet, so :root tokens cannot leak to inner pages. */
:root {
  /* Brand palette */
  --zr-pink: #FF006A;          /* ZOOM primary hot-pink */
  --zr-pink-deep: #C4004F;     /* derived: pressed / deep accent */
  --zr-ground: #1C1C1C;        /* ZOOM near-black ground */
  --zr-ground-2: #141414;      /* deeper ground for scrims */
  --zr-surface: #262626;       /* lifted surface on ground */
  --zr-ink: #F6F5F4;           /* body/headline on dark (>=15:1 on ground) */
  --zr-muted: #BFBDBB;         /* muted copy on dark (>=8:1 on ground) */
  --zr-grid: #232329;          /* pricing-page matrix grid line (exact token) */

  /* Motion (emil-design-eng) */
  --zr-ease-out: cubic-bezier(.23, 1, .32, 1);
  --zr-ease-drawer: cubic-bezier(.32, .72, 0, 1);

  /* Fluid type scale — ratio ~1.28, mobile-first clamp() */
  --zr-text: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --zr-text-lg: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --zr-h3: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  --zr-h2: clamp(1.7rem, 1.3rem + 1.9vw, 2.6rem);
  --zr-display: clamp(2.35rem, 1.35rem + 5vw, 4.6rem);

  /* Spacing scale (base 8) */
  --zr-space-1: 0.5rem;
  --zr-space-2: 0.75rem;
  --zr-space-3: 1rem;
  --zr-space-4: 1.5rem;
  --zr-space-5: 2rem;
  --zr-space-6: 3rem;
  --zr-space-7: 4rem;
  --zr-space-8: 6rem;

  /* Shape */
  --zr-radius: 14px;           /* <=16px per anti-slop */
  --zr-radius-pill: 999px;

  /* New cinematic hero art (wide desktop macro / vertical mobile room) */
  --zr-hero-desktop: url('/local/templates/union/assets/images/s1/refresh/zoom-hero-desktop.jpg');
  --zr-hero-mobile: url('/local/templates/union/assets/images/s1/refresh/zoom-hero-mobile.jpg');
}

/* ---- Item B: hero (.header_video) — Concept C "Oversized Type" ------------
   Type-forward hero: a massive black-weight uppercase display H1 dominates the
   frame over a DARKENED room photo (brightness .45 / saturate 1.1), with a
   small pink mono kicker above and one committed pink pill CTA below.
   The darkened photo + bottom scrim give the white headline ~10:1+ contrast.
   The existing H1 + existing "book now" anchor are re-used verbatim
   (presentation only — href/text/alt/schema untouched). */

body.s1 .header_video {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  overflow: hidden;
  box-sizing: border-box;
  background-color: var(--zr-ground);
  /* bottom padding budget the text stack is anchored against */
  --zr-hero-pad-b: clamp(2rem, 1rem + 5vw, 3.25rem);
}

/* New hero art painted onto the template's overlay layers (over the YT video).
   Mobile = vertical room; desktop = wide macro. cover + center = full-bleed. */
body.s1 .header_video .header__video-overlay-mobile {
  background-image: var(--zr-hero-mobile) !important;
  background-size: cover !important;      /* Round 5 · Item 4: beat template contain */
  background-position: 50% 28% !important;
  background-repeat: no-repeat !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: var(--zr-ground);
  /* Item 2 (owner fix, round 4): the mobile room photo was crushed to near-black
     (brightness .45 + a heavy full scrim), hiding the red-lit room + the red ZOOM
     wall logo. Lift the image so the room reads; the bottom-weighted scrim below
     + the headline's own local text-shadow keep the type legible. */
  filter: brightness(0.66) saturate(1.1);
}
body.s1 .header_video .header__video-overlay-desktop {
  background-image: var(--zr-hero-desktop) !important;
  /* Round 5 · Item 4: the template's own hero CSS forces background-size:contain
     on this overlay (verified via computed style), which letterboxed the
     landscape photo into a centre band with black bars L/R. Force cover +
     full-bleed so the room fills the frame edge to edge. */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: var(--zr-ground);
  /* Concept C: darken the room photo so the oversized type is the star. */
  filter: brightness(0.45) saturate(1.1);
}

/* Media layers fill the hero; image overlays sit ABOVE the YT video so the
   still image (not the video) is what a visitor sees on load. */
body.s1 .header_video .header__video,
body.s1 .header_video .header__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
body.s1 .header_video .header__video-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Show only the breakpoint-correct art layer (guards against the template's
   own toggling collapsing on the inject). */
@media (max-width: 770px) {
  body.s1 .header_video .header__video-overlay-desktop { display: none !important; }
  body.s1 .header_video .header__video-overlay-mobile { display: block !important; }
}
@media (min-width: 771px) {
  body.s1 .header_video .header__video-overlay-mobile { display: none !important; }
  body.s1 .header_video .header__video-overlay-desktop { display: block !important; }
}

/* Refined scrim: transparent top -> deep ground bottom third, with a soft
   pink glow rising from the base. Layered gradients in one paint. */
body.s1 .header_video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Item 2 (owner fix, round 4): BOTTOM-weighted scrim — dark only in the lower
     third (anchors the CTA + a base for the logo), clear across the top two-thirds
     so the red-lit room + red ZOOM wall stay visible. The headline is carried by
     its own local text-shadow (below), not by darkening the whole frame. */
  background:
    radial-gradient(135% 60% at 50% 118%, rgba(255, 0, 106, 0.30) 0%, rgba(255, 0, 106, 0) 56%),
    linear-gradient(
      to top,
      rgba(19, 19, 22, 0.90) 0%,
      rgba(19, 19, 22, 0.66) 16%,
      rgba(19, 19, 22, 0.24) 34%,
      rgba(19, 19, 22, 0.00) 56%,
      rgba(19, 19, 22, 0.00) 100%
    );
}

/* Item 2 (owner fix): the faint matrix grid overlay is removed from the HERO
   entirely — the owner wants the hero photo clean. The ::before layer is
   neutralized (grid remains on the console SECTIONS below via .zr-grid-bg and
   the #tracks/#achievements ::before textures — hero only). */
body.s1 .header_video::before {
  content: none;
}

/* Headline + CTA anchored bottom-left, above the scrim. Absolute positioning
   sidesteps the template's positioned flex children. The H1 grows upward, so
   its offset clears the CTA regardless of line count. */
body.s1 .header_video .h1-wrapper,
body.s1 .header_video .header__title-container {
  position: absolute;
  left: 0;
  right: 0;
  top: auto !important;       /* override template top so bottom anchors */
  height: auto !important;
  z-index: 4;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
}

body.s1 .header_video .h1-wrapper {
  bottom: calc(var(--zr-hero-pad-b) + 78px) !important;
  padding: 0 var(--zr-space-4);
}

body.s1 .header_video .header__title-container {
  bottom: var(--zr-hero-pad-b) !important;
  padding: 0 var(--zr-space-4);
  text-align: left;
  pointer-events: none;       /* container must not eat taps beside the button */
}
body.s1 .header_video .header__title-container .btn { pointer-events: auto; }
body.s1 .header_video .header__title-container .header__sub-title { text-align: left; }

/* Pink mono kicker above the headline — reuses on-page facts (Two rooms /
   Open 24/7 / on-site parking). This is the one deliberate brand device that
   matches the pricing page's console eyebrow: mono, uppercase, .22em, pink. */
body.s1 .header_video .h1-wrapper::before {
  content: "Open 24/7";
  display: block;
  margin: 0 0 var(--zr-space-3) 0;
  max-width: 40ch;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  /* B9: the header's redundant "Open 24/7" was removed, so the hero kicker now
     carries it alone — bumped up for presence (was 11px/600). */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--zr-pink);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 1px 14px rgba(0, 0, 0, 0.7);
}

/* H1 — Concept C oversized display: the single biggest thing on the screen.
   Black-weight (900) uppercase system sans, negative tracking, near-.9 leading
   so the sentences stack into a dense type wall. Verbatim text; the word
   "Sound." is wrapped in a presentational <span class="zr-accent"> — additive
   markup only, visible text + reading order byte-identical (SEO-neutral) — to
   tint it pink per the approved mockup. Mobile size lives here; desktop
   overrides below. */
body.s1 .header_video .h1-wrapper h1 {
  margin: 0;
  max-width: 13ch;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-size: clamp(38px, 11vw, 46px);
  color: var(--zr-ink);
  text-wrap: balance;
  text-align: left;
  /* Item 2 (owner fix, round 4): layered LOCAL scrim hugging the glyphs — a tight
     dark halo (1-2px) guarantees >=4.5:1 on the now-lighter image (incl. the bright
     red wall) without darkening the whole frame, plus a soft spread for depth. */
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.92),
    0 2px 10px rgba(0, 0, 0, 0.85),
    0 4px 30px rgba(0, 0, 0, 0.65);
}

/* Accent word ("Sound.") — pink tint via a presentational span in the H1.
   Additive markup only; visible text unchanged (SEO-neutral). */
body.s1 .header_video .h1-wrapper h1 .zr-accent {
  color: var(--zr-pink);
}

/* Sub-line ("Parking on Premises.") — additive <span class="zr-h1-sub">.
   De-emphasized secondary benefit: its OWN line below the big display line,
   noticeably smaller + dimmer + sentence-case (not shouting), so the hero reads
   punchy ("BETTER GEAR. BETTER SOUND.") like the approved mockup. Additive
   markup only; visible text byte-identical (SEO-neutral). */
body.s1 .header_video .h1-wrapper h1 .zr-h1-sub {
  display: block;
  margin-top: 0.5em;
  font-size: 0.4em;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-transform: none;               /* soften the H1 uppercase — quieter subline */
  color: var(--zr-dim);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

/* CTA — solid pink pill; reveal the existing (mobile-authored) anchor on all
   viewports. Same element, same href + "book now" text — presentation only. */
body.s1 .header_video .header__title-container.d-block.d-sm-none {
  display: block !important;
}
body.s1 .header_video .header__sub-title { margin: 0; }

body.s1 .header_video .header__title-container .btn,
body.s1 .header_video .header__sub-title .btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 44px;
  padding: 0.9rem 2.2rem;
  border-radius: 100px !important;  /* fully-rounded pill; overrides template's !important radius */
  overflow: hidden;               /* clip the template's shimmer pseudo */
  background: var(--zr-pink);
  color: #fff;
  font-weight: 800;
  font-size: var(--zr-text-lg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  box-shadow: 0 12px 34px -10px rgba(255, 0, 106, 0.6);
  transition: transform 140ms var(--zr-ease-out),
              background-color 140ms var(--zr-ease-out),
              box-shadow 200ms var(--zr-ease-out);
  will-change: transform;
}

/* Neutralize the template's parked white shimmer pseudo so the CTA reads as one
   clean committed pink block (Concept C). Presentation only. */
body.s1 .header_video .header__title-container .btn::before,
body.s1 .header_video .header__sub-title .btn.btn-primary::before {
  background: transparent !important;
}

/* Press feedback — critical on mobile */
body.s1 .header_video .header__title-container .btn:active,
body.s1 .header_video .header__sub-title .btn.btn-primary:active {
  transform: scale(0.97);
}

/* Hover only on real pointers (touch taps falsely trigger :hover) */
@media (hover: hover) and (pointer: fine) {
  body.s1 .header_video .header__title-container .btn:hover,
  body.s1 .header_video .header__sub-title .btn.btn-primary:hover {
    background: var(--zr-pink-deep);
    box-shadow: 0 16px 40px -10px rgba(255, 0, 106, 0.7);
    transform: translateY(-1px);
  }
  body.s1 .header_video .header__title-container .btn:active,
  body.s1 .header_video .header__sub-title .btn.btn-primary:active {
    transform: scale(0.97);
  }
}

/* Reveal-enhance on load — content is always in the DOM (never gated); the
   animation only plays the already-present proof/headline/CTA in. */
@media (prefers-reduced-motion: no-preference) {
  body.s1 .header_video .h1-wrapper {
    animation: zr-hero-rise 720ms var(--zr-ease-out) both;
  }
  body.s1 .header_video .header__title-container {
    animation: zr-hero-rise 720ms var(--zr-ease-out) 120ms both;
  }
  @keyframes zr-hero-rise {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
}

/* Mobile: lift the bottom-anchored text stack clear of the fixed accessibility
   widget (#INDmenu-btn, ~66x72px, bottom-left). Desktop already clears it via
   the wider left gutter, so this offset is mobile-only. Both the CTA and the
   headline rise by the same amount to preserve their vertical rhythm. */
@media (max-width: 770px) {
  /* Item 3 (owner fix): on tall phones (e.g. iPhone 13 Pro Max, 430x932) the
     bottom-anchored Book CTA still collided with the fixed bottom-left a11y
     widget. Robust fix: lift the whole text stack to MID-HERO — the CTA is
     anchored ~40svh up from the hero base (i.e. the middle of the hero), well
     clear of the widget's bottom-left column, with the headline stacked above
     it. Because the headline grows UPWARD from its own anchor it never reaches
     the CTA regardless of line count, and the CTA never approaches the widget
     regardless of viewport height (svh scales the gap with the screen). */
  body.s1 .header_video .header__title-container {
    bottom: calc(var(--zr-hero-pad-b) + 40svh) !important;
  }
  body.s1 .header_video .h1-wrapper {
    bottom: calc(var(--zr-hero-pad-b) + 40svh + 96px) !important;
  }
}

/* Desktop: slightly shorter than mobile, wider gutter, tighter measure, and a
   left-to-right dark scrim so the headline sits on darkness over the bright
   macro keyboard (guarantees contrast at bottom-left). */
@media (min-width: 771px) {
  body.s1 .header_video {
    min-height: 88vh;
    min-height: 88svh;
    --zr-hero-pad-b: clamp(3rem, 1rem + 4vw, 4.5rem);
  }
  body.s1 .header_video::after {
    background:
      radial-gradient(90% 55% at 22% 116%, rgba(255, 0, 106, 0.28) 0%, rgba(255, 0, 106, 0) 55%),
      linear-gradient(to right, rgba(20, 20, 20, 0.88) 0%, rgba(20, 20, 20, 0.42) 34%, rgba(20, 20, 20, 0) 62%),
      linear-gradient(to top, rgba(20, 20, 20, 0.92) 0%, rgba(20, 20, 20, 0.55) 24%, rgba(20, 20, 20, 0.08) 58%, rgba(20, 20, 20, 0.20) 100%);
  }
  body.s1 .header_video .h1-wrapper {
    bottom: calc(var(--zr-hero-pad-b) + 88px) !important;
    padding-left: clamp(1.5rem, 5vw, 5.5rem);
    padding-right: clamp(1.5rem, 5vw, 5rem);
  }
  /* CTA stays anchored at the hero base (below the floating a11y widget) and is
     shifted right of the widget's fixed ~66px bottom-left column, so it clears
     the widget HORIZONTALLY at every desktop width (px floor, not rem — the
     template root is ~10px, so rem-based clamps under-shot the 66px widget). */
  body.s1 .header_video .header__title-container {
    padding-left: clamp(92px, 7vw, 128px);
  }
  body.s1 .header_video .h1-wrapper h1 {
    max-width: 13ch;
    font-size: clamp(52px, 6vw, 74px);
  }
  body.s1 .header_video .h1-wrapper::before { max-width: 44ch; }
}

/* ---- Item C: header chrome — floating-nav scrim, more breathing room --------
   Homepage-only (stylesheet not loaded elsewhere). The fixed header sits over
   the bright hero; a soft top-down dark scrim replaces the flat black bar so
   the nav/logo read cleanly and the page feels current, not boxed. */
body.s1 #header.header {
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 20, 0.92) 0%,
    rgba(20, 20, 20, 0.72) 55%,
    rgba(20, 20, 20, 0.30) 100%
  ) !important;
  /* Item 8 (owner fix, round 3): NO backdrop-filter here. A non-none
     backdrop-filter turns #header into the containing block for the fixed mobile
     menu drawer (.menu-left, a descendant), collapsing its height:100% from the
     viewport (844px) to the header's ~133px and clipping 3 of the 5 tabs. The
     gradient scrim alone gives the floating-nav look; dropping the 3px blur
     restores the drawer to normal viewport-fixed, full-height behaviour. */
  border-bottom: 0;
}
/* a touch more breathing room around the utility bar + nav (no layout shift) */
body.s1 #header .header-info { padding-top: 4px; padding-bottom: 4px; }
body.s1 #header .main-nav { padding-top: 2px; padding-bottom: 2px; }

/* ---- Item D: HIRING VOICEOVERS band (.addline) — slim, desaturated strip ----
   Keep the link + text (revenue banner). Restyle the loud full-width yellow
   band into a refined slim pink-accent strip in brand colors. Homepage-only. */
body.s1 #header .addline {
  background: rgba(255, 0, 106, 0.14) !important;
  border-top: 1px solid rgba(255, 0, 106, 0.55);
  border-bottom: 1px solid rgba(255, 0, 106, 0.28);
  padding: 6px 12px !important;
  text-align: center;
  line-height: 1.2;
}
body.s1 #header .addline a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
}
/* colour/type on the link + its label spans; keep the template's own
   .desktop/.mobile show-hide toggle (do NOT override span display). */
body.s1 #header .addline a,
body.s1 #header .addline a span {
  color: var(--zr-ink) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em !important;
  text-shadow: none !important;
}
body.s1 #header .addline a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--zr-pink);
  box-shadow: 0 0 10px rgba(255, 0, 106, 0.8);
  flex: 0 0 auto;
}


/* =============================================================================
   ZOOM homepage refresh — BASE KIT LAYER (Concept-C "console")
   zoomrecordingstudio.com/index.php ONLY. Loaded link-in-body AFTER
   zoom_index_refresh.css (hero), so it reuses the hero's --zr-* tokens and
   only ADDS the console section-ground tokens + reusable section primitives.

   Scope: everything is under body.s1 (homepage-only class) so nothing leaks to
   inner pages. This layer defines the shared LANGUAGE (grounds, grid, rhythm,
   container, section header, panel, pill button) that per-section CSS builds on.
   It intentionally does NOT restyle any specific section yet.

   SEO-safe: presentation only. No content / link / alt / schema changes.
   Anti-slop honored: one pink mono kicker per section (opt-in class, not auto),
   real-photo sections keep their media, card radius <=16px, body contrast
   >=4.5:1 (dim 5.0-5.4:1, ink 16.9:1 — verified against #131316).
   Color source of truth: client/src/design.ts (ZOOM #FF006A).
   ============================================================================= */

/* ---- 1. Token layer (ADD-only) --------------------------------------------
   The hero (zoom_index_refresh.css) already defines: --zr-pink, --zr-pink-deep,
   --zr-grid (#232329), --zr-ink, --zr-muted, --zr-ease-out, --zr-ease-drawer,
   the fluid type scale (--zr-text..--zr-display), the spacing scale
   (--zr-space-1..8) and --zr-radius / --zr-radius-pill. We REUSE all of those
   and only add the console section grounds + panel/line/dim the base kit needs,
   so the hero's own --zr-ground (#1C1C1C hero ground) is left untouched. */
:root {
  --zr-console:   #131316;   /* console section ground (primary) */
  --zr-console-2: #16161a;   /* alternate ground for section rhythm */
  --zr-panel:     #1b1b20;   /* panel / card surface */
  --zr-line:      #2c2c33;   /* hairline border on panels + dividers */
  --zr-dim:       #8a8a95;   /* secondary / meta copy (>=5.0:1 on all grounds) */
  --zr-ink-2:     #f4f4f5;   /* base-kit heading ink (16.9:1 on #131316) */

  /* consistent horizontal gutter + centered container measure */
  --zr-gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --zr-maxw:      1120px;
  /* section vertical rhythm (spec: clamp(48px,8vw,96px)) */
  --zr-section-y: clamp(3rem, 8vw, 6rem);
  /* Item 2 (owner fix, round 3): ONE shared body-copy size, in PX. Root cause of
     the "too small / inconsistent" body text: the template's root font-size is
     ~10px, so the previous rem-based clamp (0.9375rem..1rem) computed ~9.4-10px,
     not ~15-16px. Pin the token in px so every plain paragraph matches the
     reference sentence (the #zoom-clients .zc-intro "From charting artists…"
     line, which is a hard 16px) at BOTH 390 and 1280. 16px flat = identical to
     the reference at every width. The fluid --zr-text scale stays for LEADS. */
  --zr-body:      16px;
}

/* ---- 2. Page + section grounds --------------------------------------------
   Paint the console dark behind the whole homepage and behind the generic
   template section wrappers (.section / .section-bg are present on EVERY
   homepage section, so this is a foundation, not per-section styling). The
   alternation .section (base) vs .section-bg (alt) gives quiet vertical rhythm.
   background-color only here — layout/type stays with each section's own CSS. */
body.s1 {
  background-color: var(--zr-console);
  color: var(--zr-ink);
}
body.s1 .section,
body.s1 .section-bg {
  background-color: var(--zr-console);
}
/* alternate ground so adjacent sections separate without a hard divider */
body.s1 .section-bg {
  background-color: var(--zr-console-2);
}

/* ---- 3. Matrix-grid utility (console motif) --------------------------------
   Faint 44px matrix grid, same cell + line color as the /pricing/ page and the
   hero base. Reusable: add .zr-grid-bg to any section/panel that wants the
   console texture. It paints via a ::before layer UNDER content (z-index:0 on
   the layer, content stays above) and is masked/low-opacity so it never fights
   photography or drops body contrast. Purely decorative (aria-hidden by nature
   of a pseudo-element). */
body.s1 .zr-grid-bg {
  position: relative;
  isolation: isolate;               /* keep the grid layer behind this section's own content */
}
body.s1 .zr-grid-bg > * {
  position: relative;
  z-index: 1;
}
body.s1 .zr-grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--zr-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--zr-grid) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.5;                     /* keep subtle */
  /* fade the grid out toward the vertical edges so it reads as texture, not a table */
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, #000 55%, transparent 100%);
}
/* stronger fade variant for tall sections (grid only near the top band) */
body.s1 .zr-grid-bg--top::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 24%, transparent 62%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 24%, transparent 62%);
}

/* ---- 4. Section rhythm + container ----------------------------------------
   Reusable spacing primitives. .zr-section = generous vertical padding + full
   console ground; .zr-container = centered max-width measure with the shared
   gutter. Sections compose these (they don't replace the template's own
   .container where present — .zr-container is the canonical centered wrapper
   for any new/reflowed block). */
body.s1 .zr-section {
  padding-block: var(--zr-section-y);
  padding-inline: 0;
  background-color: var(--zr-console);
}
body.s1 .zr-section--alt {
  background-color: var(--zr-console-2);
}
body.s1 .zr-container {
  width: 100%;
  max-width: var(--zr-maxw);
  margin-inline: auto;
  padding-inline: var(--zr-gutter);
  box-sizing: border-box;
}
/* normalize the template's existing .container to the same measure + gutter so
   the whole homepage shares one consistent horizontal rhythm (foundation) */
body.s1 .container {
  max-width: var(--zr-maxw);
  padding-inline: var(--zr-gutter);
  box-sizing: border-box;
}

/* ---- 5. Section header treatment ------------------------------------------
   The one deliberate brand device per section: a pink MONO KICKER above a BOLD
   UPPERCASE SANS heading, body copy in --zr-dim. Delivered as opt-in classes so
   there is never more than one kicker per section (anti-slop: no repeated
   tracked eyebrows). Heading rule carries !important on family/weight/transform
   to WIN over the shared template's Sailec/uppercase !important; body.s1 keeps
   it homepage-scoped. */

/* pink mono kicker — matches the pricing page + hero console eyebrow */
body.s1 .zr-kicker {
  display: block;
  margin: 0 0 var(--zr-space-2) 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zr-pink);
}

/* bold uppercase sans heading — the section title voice */
body.s1 .zr-heading {
  margin: 0 0 var(--zr-space-3) 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: var(--zr-h2);
  color: var(--zr-ink-2);
  text-wrap: balance;
}
body.s1 .zr-heading .zr-accent { color: var(--zr-pink); }   /* optional single accent word */

/* smaller heading step for sub-blocks within a section */
body.s1 .zr-heading--sm { font-size: var(--zr-h3); }

/* section intro / body copy — dim, comfortable measure */
body.s1 .zr-sub {
  margin: 0;
  max-width: 62ch;
  font-size: var(--zr-body);            /* Item 8: shared body-copy size */
  line-height: 1.65;
  color: var(--zr-dim);
}
/* brighter body option for longer-form paragraphs (uses hero's --zr-muted, 9.9:1) */
body.s1 .zr-sub--bright { color: var(--zr-muted); }

/* header block wrapper: stacks kicker/heading/sub with rhythm; left by default,
   .zr-header--center for centered section intros (matches .text-center blocks) */
body.s1 .zr-header {
  display: flex;
  flex-direction: column;
  gap: var(--zr-space-1);
  max-width: 42rem;
}
body.s1 .zr-header--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

/* ---- 6. Panel / card --------------------------------------------------------
   The console surface used for any boxed content. Flat, one hairline border,
   radius <=16px — no glassmorphism, no wide drop-shadow ghost card. Sections
   layer their own content/photos on top. */
body.s1 .zr-panel {
  background-color: var(--zr-panel);
  border: 1px solid var(--zr-line);
  border-radius: var(--zr-radius);      /* 14px */
  box-sizing: border-box;
}
/* padded content panel (opt-in) */
body.s1 .zr-panel--pad {
  padding: clamp(1.25rem, 4vw, 2rem);
}
/* photo-led card: same shell, clip media to the radius, no inner padding
   (rooms/gallery use real varied photos — not icon cards) */
body.s1 .zr-card {
  background-color: var(--zr-panel);
  border: 1px solid var(--zr-line);
  border-radius: var(--zr-radius);
  overflow: hidden;
  box-sizing: border-box;
}
body.s1 .zr-card > img,
body.s1 .zr-card > picture,
body.s1 .zr-card > picture > img {
  display: block;
  width: 100%;
  height: auto;
}
/* hairline divider in the console line color */
body.s1 .zr-divider {
  height: 1px;
  border: 0;
  background-color: var(--zr-line);
}

/* ---- 7. Pill buttons --------------------------------------------------------
   Solid pink primary + pink-outline secondary. Full pill, uppercase bold,
   >=44px tap target both axes, press-scale feedback, hover gated to real
   pointers, visible :focus-visible ring, reduced-motion respected. These are
   the canonical CTA classes; the hero's own .btn override stays as-is. */
body.s1 .zr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 44px;
  padding: 0.85rem 1.9rem;
  border-radius: 100px;                 /* pill */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  font-size: var(--zr-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--zr-ease-out),
              background-color 160ms var(--zr-ease-out),
              border-color 160ms var(--zr-ease-out),
              box-shadow 200ms var(--zr-ease-out);
}
/* primary — committed solid pink block */
body.s1 .zr-btn--primary {
  background-color: var(--zr-pink);
  color: #fff;                          /* 3.85:1 on pink — bold >=16px large-text, passes 3:1 */
  box-shadow: 0 12px 30px -12px rgba(255, 0, 106, 0.55);
}
/* outline — pink hairline + pink label on the console ground */
body.s1 .zr-btn--outline {
  background-color: transparent;
  color: var(--zr-pink);                /* 4.82:1 on #131316 */
  border-color: var(--zr-pink);
}
/* press feedback — critical on mobile (all pointers) */
body.s1 .zr-btn:active { transform: scale(0.97); }
/* visible keyboard focus */
body.s1 .zr-btn:focus-visible {
  outline: 2px solid var(--zr-pink);
  outline-offset: 3px;
}
/* hover only on real pointers (touch taps falsely trigger :hover) */
@media (hover: hover) and (pointer: fine) {
  body.s1 .zr-btn--primary:hover {
    background-color: var(--zr-pink-deep);
    box-shadow: 0 16px 38px -12px rgba(255, 0, 106, 0.65);
    transform: translateY(-1px);
  }
  body.s1 .zr-btn--outline:hover {
    background-color: rgba(255, 0, 106, 0.12);
    border-color: var(--zr-pink);
  }
  body.s1 .zr-btn:active { transform: scale(0.97); }
}
/* reduced motion: keep the press affordance instant, drop the lift transition */
@media (prefers-reduced-motion: reduce) {
  body.s1 .zr-btn { transition: none; }
  body.s1 .zr-btn--primary:hover { transform: none; }
}

/* ---- 8. Reveal-enhance scaffold (SEO-safe) --------------------------------
   Foundational, opt-in, and NON-GATING: content is fully visible by default
   (crawlers + no-JS see everything). Only when JS adds body.s1.zr-js do items
   start from scale(.96)+opacity and rise in when .is-in is set by an
   IntersectionObserver (once). transform/opacity only. Fully disabled under
   prefers-reduced-motion. Sections apply .zr-reveal to elements they choose to
   stagger (30-80ms between siblings). */
@media (prefers-reduced-motion: no-preference) {
  body.s1.zr-js .zr-reveal {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    transition: opacity 260ms var(--zr-ease-out),
                transform 260ms var(--zr-ease-out);
    will-change: transform, opacity;
  }
  body.s1.zr-js .zr-reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

/* ===== SECTIONS ===== */
/* --- zoom-refresh-intro-lead-and-zoom-clients --- */
/* =============================================================================
   ZOOM homepage refresh — SECTION LAYER: intro lead + #zoom-clients proof strip
   zoomrecordingstudio.com/index.php ONLY. Builds on the BASE KIT (grounds,
   kicker, panel, pill, tokens) + the hero's --zr-* tokens. Loaded AFTER both,
   and (for #zoom-clients) after the shipped zoom-clients-section.css.

   SEO-safe: presentation only — no text / heading / link (href) / alt / schema
   changes, no markup edits. All PNG art re-skinned here is DECORATIVE CSS
   background-image (not <img>), so overriding it is pure presentation.

   Anti-slop: exactly ONE pink mono kicker in #zoom-clients (the .zc-eyebrow);
   the secondary "Featured Clients" / "Industry Partners" labels are demoted to
   quiet dim micro-labels so there is never a second tracked eyebrow. Cards are
   flat console panels (radius <=16px, no glass, no gradient tiles). Partner
   wordmarks collapse to one calm monochrome row. Motion is transform-only and
   never hides content (crawler-safe). ZOOM pink #FF006A only.
   ============================================================================= */


/* =============================================================================
   A. INTRO LEAD — the first section after the hero ("ZOOM is where active
   independent artists in Los Angeles come to record consistently…").
   There is a single .tagline on the homepage; set it as a calm, well-set lead
   on the console ground: bright but light-weight, generous leading, a
   comfortable centred measure (the section is .text-center). The three
   sentences are hard-broken with <br> in the CONTENT — kept as quiet stanza
   lines; text-wrap:pretty removes orphans when each wraps on mobile. A single
   short pink tick sits above as the one calm brand mark (no tracked eyebrow).
   ============================================================================= */
body.s1 .section .tagline {
  max-width: 46ch;
  margin-inline: auto;
  margin-top: clamp(0.25rem, 2vw, 1.25rem);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.02rem + 0.85vw, 1.6rem);
  line-height: 1.6;
  letter-spacing: -0.005em !important;
  color: var(--zr-ink);                 /* #F6F5F4 — ~16:1 on console, calm-bright */
  text-transform: none !important;      /* defuse any template uppercase on .tagline */
  text-align: center;
  text-wrap: pretty;
}
/* one quiet centred pink tick above the lead — brand device, not an eyebrow */
body.s1 .section .tagline::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 0 auto clamp(1.1rem, 3vw, 1.75rem);
  border-radius: 2px;
  background-color: var(--zr-pink);
}


/* =============================================================================
   Item 4 (owner fix, round 4): rebuilt the rooms block as two clean, image-led
   ROOM CARDS with a scannable RATE BLOCK (was a name + paragraph + run-on rate
   line = a wall of text). The index.php markup is now explicit per-room:
     .zr-rooms (on .col)
       > article.zr-room                     — the console card
           > .zr-room__media (--i / --ii)     — the room photo band (top)
           > .zr-room__body
               > h3.zr-room__name             — ZOOM I / ZOOM II
               > p.zr-room__desc              — short description
               > ul.zr-rates > li.zr-rate     — labeled rate rows (number in pink/ink)
               > a.zr-room__book              — per-room "Book this room" pill
       > p.zr-mix-promo                        — MIX cross-promo (spans both cols)

   Every rate NUMBER + TERM is preserved verbatim from the source copy — the row
   LABEL carries the term ("Daytime", "Overnight (Mon-Wed)", "Overnight (Thu-Sun)",
   "Capacity", "(Smoking: +$10/hr)") and the row VALUE carries the figure
   ("$39/hr", "$16/hr" … "Up to 8 people"). Only the connective chrome ("From",
   the "·" separators, the <br>s) is dropped, replaced by visual structure.
   Mobile-first: cards stack 1-col, become 2-col at >=760px; MIX promo spans both.
   SEO-safe: presentation + additive semantic wrappers only; no ranking text /
   href / alt / schema change.
   ============================================================================= */
body.s1 section.section.text-center:has(.about-youtube-video) .zr-rooms {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: stretch;
  max-width: 920px;
  margin-inline: auto;
  text-align: left;
}

/* the console card shell — photo-led, flat, one hairline, radius <=16px */
body.s1 section.section.text-center:has(.about-youtube-video) .zr-room {
  display: flex;
  flex-direction: column;
  background: var(--zr-panel);
  border: 1px solid var(--zr-line);
  border-radius: var(--zr-radius);       /* 14px */
  overflow: hidden;
}

/* room photo band — real studio photo, cover-cropped, tops the card.
   Decorative CSS background (markup carries aria-hidden + no alt to change). */
body.s1 section.section.text-center:has(.about-youtube-video) .zr-room__media {
  height: clamp(170px, 42vw, 200px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--zr-console);
}
body.s1 section.section.text-center:has(.about-youtube-video) .zr-room__media--i {
  background-image: url("/local/templates/union/assets/images/s1/refresh/zoom-room-i.jpg");
}
body.s1 section.section.text-center:has(.about-youtube-video) .zr-room__media--ii {
  background-image: url("/local/templates/union/assets/images/s1/refresh/zoom-room-ii.jpg");
}

/* card body — left-aligned content column, grows to fill (equal card heights) */
body.s1 section.section.text-center:has(.about-youtube-video) .zr-room__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  text-align: left;
}

/* room name — console heading voice */
body.s1 section.section.text-center:has(.about-youtube-video) h3.zr-room__name {
  margin: 0 0 0.5rem;
  text-align: left !important;           /* beat template .text-center */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-size: var(--zr-h3);
  color: var(--zr-ink-2);
}

/* short description — dim body copy */
body.s1 section.section.text-center:has(.about-youtube-video) .zr-room__desc {
  margin: 0 0 clamp(1rem, 3vw, 1.35rem);
  text-align: left;
  font-size: var(--zr-body);
  line-height: 1.65;
  color: var(--zr-muted);
  text-wrap: pretty;
}

/* the RATE BLOCK — a tidy labeled list; term on the left, figure emphasized right.
   Pushed to the bottom of the body (mt-auto) so the two cards' rate blocks align. */
body.s1 section.section.text-center:has(.about-youtube-video) .zr-rates {
  list-style: none;
  margin: auto 0 0;                       /* mt-auto: sit at the card foot */
  padding: 0;
}
body.s1 section.section.text-center:has(.about-youtube-video) .zr-rate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(0.5rem, 2vw, 1rem);
  padding: 0.6rem 0;
  border-top: 1px solid var(--zr-line);  /* hairline rows */
}
body.s1 section.section.text-center:has(.about-youtube-video) .zr-rate:first-child {
  border-top: 0;
}
/* label — the preserved term (dim, uppercase-tracked micro-label) */
body.s1 section.section.text-center:has(.about-youtube-video) .zr-rate__k {
  flex: 1 1 auto;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--zr-dim);
}
/* value — the preserved figure, emphasized (prices in pink, capacity in ink) */
body.s1 section.section.text-center:has(.about-youtube-video) .zr-rate__v {
  flex: 0 0 auto;
  text-align: right;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--zr-pink);
  white-space: nowrap;
}
/* capacity value reads in ink (it is a count, not a price) */
body.s1 section.section.text-center:has(.about-youtube-video) .zr-rate--cap .zr-rate__v {
  color: var(--zr-ink-2);
  font-weight: 700;
}
/* the "(Smoking: +$10/hr)" note — quiet dim sub-line under the daytime figure */
body.s1 section.section.text-center:has(.about-youtube-video) .zr-rate__note {
  display: block;
  margin-top: 0.15rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--zr-dim);
}

/* per-room "Book this room" pill — pink outline, >=44px tap target */
body.s1 section.section.text-center:has(.about-youtube-video) .zr-room__book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: clamp(1rem, 3vw, 1.35rem);
  min-height: 44px;
  min-width: 44px;
  padding: 0.65rem 1.4rem;
  border-radius: 100px;
  border: 1px solid var(--zr-pink);
  background: transparent;
  color: var(--zr-pink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--zr-ease-out),
              background-color 160ms var(--zr-ease-out);
}
body.s1 section.section.text-center:has(.about-youtube-video) .zr-room__book:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  body.s1 section.section.text-center:has(.about-youtube-video) .zr-room__book:hover {
    background: rgba(255, 0, 106, 0.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.s1 section.section.text-center:has(.about-youtube-video) .zr-room__book { transition: none; }
}

/* MIX cross-promo — distinct, quieter secondary callout below both cards */
body.s1 section.section.text-center:has(.about-youtube-video) .zr-mix-promo {
  margin: clamp(0.25rem, 1.5vw, 0.75rem) 0 0 !important;   /* beat .mb-5 .mt-7 */
  padding: clamp(1rem, 3vw, 1.35rem) clamp(1.1rem, 3vw, 1.5rem);
  background: rgba(255, 0, 106, 0.06);
  border: 1px solid var(--zr-line);
  border-left: 3px solid var(--zr-pink);
  border-radius: var(--zr-radius);
  text-align: left;
  font-size: var(--zr-body);
  line-height: 1.7;
  color: var(--zr-dim);
}
body.s1 section.section.text-center:has(.about-youtube-video) .zr-mix-promo a {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--zr-pink);
  font-weight: 700;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  body.s1 section.section.text-center:has(.about-youtube-video) .zr-mix-promo a:hover {
    text-decoration: underline;
  }
}

/* desktop: two equal columns — ZOOM I | ZOOM II, MIX promo spans both below */
@media (min-width: 760px) {
  body.s1 section.section.text-center:has(.about-youtube-video) .zr-rooms {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  body.s1 section.section.text-center:has(.about-youtube-video) .zr-rooms .zr-mix-promo {
    grid-column: 1 / -1;
  }
}


/* =============================================================================
   Item 1 (owner fix, round 2): put the DARK console ground BACK behind
   #zoom-clients, but leave the FEATURED CLIENTS + INDUSTRY PARTNERS plates in
   their ORIGINAL design. The shipped zoom-clients-section.css drives all plate
   visuals from --zc-card-grad / --zc-partner-grad + per-plate PNGs and paints
   its own plate text explicitly (#fff / --zc-pink-bri), so it is untouched.
   We only: (a) flip the section GROUND var --zc-bg from #FFFFFF to the console
   dark, and (b) recolor the surrounding HEADER/INTRO text (which used the dark
   --zc-ink on white) to light ink / dim so it reads on the dark ground. The
   eyebrow + labels + vertical dividers are already the section's pink and stay.
   Contrast on #131316: headline ink #f4f4f5 = 16.9:1; intros dim #8a8a95 = 5.0:1;
   section pink #FF1B6B (>=14px 800 = large text) passes 3:1.
   ============================================================================= */
/* (a) dark ground — --zc-bg is used ONLY by `.zoom-clients { background }` */
body.s1 #zoom-clients { --zc-bg: var(--zr-console); }
/* (b) recolor the non-plate header/intro copy for the dark ground */
body.s1 #zoom-clients .zc-headline { color: var(--zr-ink); }
body.s1 #zoom-clients .zc-intro,
body.s1 #zoom-clients .zc-partners-intro { color: var(--zr-dim); }
/* the outline CTA used dark ink text/border (invisible on dark) -> light */
body.s1 #zoom-clients .zc-btn--outline {
  color: var(--zr-ink);
  border-color: var(--zr-ink);
}
@media (hover: hover) and (pointer: fine) {
  body.s1 #zoom-clients .zc-btn--outline:hover {
    background: var(--zr-ink);
    color: var(--zr-console);
  }
}

/* --- studios_tracks --- */
/* =============================================================================
   ZOOM homepage refresh — SECTION LAYER: #tracks + #studios (Concept-C console)
   zoomrecordingstudio.com/index.php ONLY. Loaded AFTER the hero + base-kit CSS,
   so it reuses their --zr-* tokens and only ADDS per-section styling.

   Real markup targeted (verified via curl of the live homepage):
     #tracks  "Our Works" — an audio player (.sc-block > #music-player .inner
              with .controls / .play-bar / .song-content) + a 10-row tracklist
              (.mix-player > ol.mix-trackslist > li > a.audio-track + span.sc-track-duration).
     #studios "You May Also Like" — a cross-brand gallery (.studio-list of two
              .studio-item photo cards: a.img-link > img.card-img-top +
              .card-body>.card-title + .seemoresite). Real varied photos, brand
              names + prices, links to the sister sites (kept exactly as-is).

   SEO-safe: presentation only. No text / heading / href / alt / schema change.
   No markup edits — because the base-kit reveal scaffold and .zr-kicker require
   classes on the markup (forbidden here), scroll-reveal is intentionally NOT
   applied to these real nodes (never hide crawlable content behind a class that
   only JS resolves). Motion is interaction-only (hover / :active / focus),
   transform+opacity, hover gated to fine pointers, reduced-motion respected.
   Anti-slop: one deliberate pink device per section (a non-text pink marker,
   not a repeated tracked eyebrow); real photos not icon cards; radius <=16px.
   ============================================================================= */

/* =========================================================================
   SHARED — section shell + centered heading treatment for both sections
   ========================================================================= */

/* generous vertical rhythm; grounds already painted alt (#16161a) by base kit */
body.s1 #tracks,
body.s1 #studios {
  padding-block: var(--zr-section-y);
  position: relative;
}

/* console section heading voice — win over the template's Sailec/uppercase
   !important. Sections are .text-center, so the pink marker centers too.
   #tracks uses h2.section-title ("Our Works"); #studios a bare h3. */
body.s1 #tracks .section-title,
body.s1 #studios > .container > h3 {
  margin: 0 auto var(--zr-space-5);
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--zr-ink-2);
  text-wrap: balance;
}
body.s1 #tracks .section-title { font-size: var(--zr-h2); }
body.s1 #studios > .container > h3 { font-size: var(--zr-h3); }

/* the ONE deliberate pink device per section: a short non-text pink marker bar
   above the heading (replaces any templated eyebrow). Purely decorative. */
body.s1 #tracks .section-title::before,
body.s1 #studios > .container > h3::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 0 auto var(--zr-space-4);
  border-radius: 2px;
  background-color: var(--zr-pink);
}
/* neutralize any template underline pseudo the .section-title may carry */
body.s1 #tracks .section-title::after { content: none; }

/* =========================================================================
   #tracks — "Our Works": console audio player + matrix-textured tracklist
   ========================================================================= */

/* faint console matrix grid behind the player (top-masked so it reads as
   texture, not a table). Decorative ::before under the content. */
body.s1 #tracks { isolation: isolate; }
body.s1 #tracks > * { position: relative; z-index: 1; }
body.s1 #tracks::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--zr-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--zr-grid) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 60%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 60%);
}

/* kill the nested inner .music-section wrapper's own spacing quirks */
body.s1 #tracks .music-section { margin: 0; }

/* Item 3 (owner fix, round 3): the player + tracklist STACK as ONE single-column
   unit at EVERY width (player block on top, tracklist below) — desktop reads as
   one whole component exactly like mobile (was a 2-col side-by-side grid). Capped
   to a comfortable centered reading measure so it doesn't sprawl on wide screens. */
body.s1 #tracks .sc-block {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vw, 1.75rem);
}

/* ---- the player card ---- */
/* Item 7 (owner fix): the template skins this player with a FLOAT + ABSOLUTE
   layout — #music-player carries a black rounded box (bg #000, radius 30px 30px
   0 0) behind .inner (the desktop "ghost box"), and its <=640px media query sets
   .controls{position:absolute;right:10px} + .play-bar{position:absolute;top:46px}
   which made the mobile controls/scrubber/label overlap. Neutralize BOTH: strip
   the #music-player box, and force .inner + its float/absolute children into one
   clean flex column that wins at every width (body.s1 #tracks #music-player = 2
   ids, beats the template + its media query). */
body.s1 #tracks #music-player {
  width: 100%;
  background-color: transparent !important;   /* kill the template black ghost box */
  border-radius: 0 !important;                /* was 30px 30px 0 0 */
  padding: 0 !important;                       /* was 10px 0 */
  position: static !important;
}
body.s1 #tracks #music-player .inner {
  background-color: var(--zr-panel);
  border: 1px solid var(--zr-line);
  border-radius: var(--zr-radius);
  padding: clamp(1.25rem, 4vw, 1.75rem);
  max-width: 100%;                            /* beat template max-width:940px */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--zr-space-4);
  align-items: stretch;                   /* rows fill the panel; controls center within */
}
/* reset the template float/fixed-size/absolute layout on the three rows so the
   flex column governs at ALL widths (this is what fixes the mobile overlap) */
body.s1 #tracks #music-player .controls,
body.s1 #tracks #music-player .play-bar,
body.s1 #tracks #music-player .song-content {
  float: none !important;
  position: static !important;            /* kill <=640px position:absolute */
  width: auto !important;
  height: auto !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
}

/* transport controls: prev / play / next — real tap targets, tinted to white */
body.s1 #tracks .controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 5vw, 2rem);
  width: 100%;                            /* fill the panel so prev/play/next center, not overflow the box */
  box-sizing: border-box;
}
body.s1 #tracks .controls a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--zr-ease-out),
              background-color 160ms var(--zr-ease-out),
              opacity 160ms var(--zr-ease-out);
}
body.s1 #tracks .controls a img {
  display: block;
  width: 20px;
  height: 20px;
  /* force any source icon (svg / @2x png, colored or not) to a clean silhouette */
  filter: brightness(0) invert(1);
}
/* prev / next sit quietly until touched */
body.s1 #tracks .controls .previous img,
body.s1 #tracks .controls .next img { opacity: 0.7; }
/* play — the committed pink action */
body.s1 #tracks .controls .play {
  min-width: 60px;
  min-height: 60px;
  background-color: var(--zr-pink);
  box-shadow: 0 12px 30px -12px rgba(255, 0, 106, 0.55);
}
body.s1 #tracks .controls .play img { width: 24px; height: 24px; opacity: 1; }
body.s1 #tracks .controls a:active { transform: scale(0.92); }

/* Round 5 · Items 1+2 (owner fix): the REAL root cause of the broken transport.
   The page player JS (page.js) expects TWO separate controls — it does
   $('.play').hide(); $('.pause').show() on play, and the inverse on pause — but
   the markup ships only a .play anchor and NO .pause element, and the first
   track's <audio> has src="" (the line that loads data-src is commented out).
   So: play() ran on an empty source (nothing played) and the "pause" state had
   no element to show. The round-3 CSS faked a pause glyph on the same .play
   button, but clicking it re-fired the .play handler (play again), so it never
   actually paused. Fixed properly by zoom_refresh.js, which (a) loads the first
   track's src on load (preload=none, no eager download) and (b) injects a real
   .pause control. This CSS now just styles that real .pause button to match .play
   (pink circle + two-bar glyph). The .play anchor keeps the template's native
   hide-on-play (its inline display:none), and .pause takes over — a genuine
   toggle. jQuery .show() clears the injected inline display:none so the
   stylesheet's inline-flex below wins. */
body.s1 #tracks .controls .pause {
  min-width: 60px;
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 50%;
  cursor: pointer;
  background-color: var(--zr-pink);
  box-shadow: 0 12px 30px -12px rgba(255, 0, 106, 0.55);
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--zr-ease-out);
}
body.s1 #tracks .controls .pause::before,
body.s1 #tracks .controls .pause::after {
  content: "";
  width: 5px;
  height: 22px;
  border-radius: 1px;
  background-color: #fff;
}
body.s1 #tracks .controls .pause:active { transform: scale(0.92); }

/* scrubber / progress bar */
body.s1 #tracks .play-bar {
  display: flex;
  align-items: center;
  gap: var(--zr-space-3);
}
body.s1 #tracks .play-bar #time,
body.s1 #tracks .play-bar #total-time {
  display: block;               /* beat template <=640px .play-bar span{display:none} */
  flex: 0 0 auto;
  min-width: 3ch;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--zr-dim);
}
body.s1 #tracks .play-bar #total-time { text-align: right; }
body.s1 #tracks .play-bar .bar-bg,
body.s1 #tracks .play-bar #progress {
  flex: 1 1 auto;
  height: 6px;
  min-height: 6px;
  background-color: var(--zr-line);
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
}
/* the JS-driven fill — set colour/height only, leave width to the player script */
body.s1 #tracks .play-bar .progress {
  height: 100%;
  background-color: var(--zr-pink);
  border-radius: 999px;
}

/* now-playing label ("Track", updated by the player) */
body.s1 #tracks .song-content { text-align: center; }
body.s1 #tracks .song-content .song-info,
body.s1 #tracks .song-content .artist {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zr-dim);
}

/* ---- the tracklist ---- */
body.s1 #tracks .mix-player {
  width: 100%;
  background-color: var(--zr-panel);
  border: 1px solid var(--zr-line);
  border-radius: var(--zr-radius);
  overflow: hidden;
}
body.s1 #tracks ol.mix-trackslist {
  list-style: none;
  counter-reset: zr-track;
  margin: 0;
  padding: 0;
  max-height: clamp(320px, 46vh, 440px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--zr-line) transparent;
  text-align: left;
}
body.s1 #tracks ol.mix-trackslist::-webkit-scrollbar { width: 8px; }
body.s1 #tracks ol.mix-trackslist::-webkit-scrollbar-thumb {
  background-color: var(--zr-line);
  border-radius: 999px;
}
body.s1 #tracks .mix-trackslist li {
  counter-increment: zr-track;
  display: flex;
  align-items: center;
  gap: var(--zr-space-3);
  min-height: 46px;
  padding: 0.5rem clamp(0.9rem, 3vw, 1.25rem);
  border-bottom: 1px solid var(--zr-line);
  position: relative;
  transition: background-color 160ms var(--zr-ease-out);
}
body.s1 #tracks .mix-trackslist li:last-child { border-bottom: 0; }
/* console track index (the list's own ordinal, zero-padded) — pink mono */
body.s1 #tracks .mix-trackslist li::before {
  content: counter(zr-track, decimal-leading-zero);
  flex: 0 0 auto;
  min-width: 2.25ch;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--zr-pink);
}
body.s1 #tracks .mix-trackslist .audio-track {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--zr-ink);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color 140ms var(--zr-ease-out);
}
body.s1 #tracks .mix-trackslist .sc-track-duration {
  flex: 0 0 auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--zr-dim);
  transition: color 140ms var(--zr-ease-out);
}
/* the hidden per-row duration-probe <audio> element */
body.s1 #tracks .mix-trackslist audio { display: none; }

/* keyboard focus on a track link */
body.s1 #tracks .mix-trackslist .audio-track:focus-visible {
  outline: 2px solid var(--zr-pink);
  outline-offset: 2px;
  border-radius: 4px;
}
/* row active-press feedback (all pointers) */
body.s1 #tracks .mix-trackslist li:active { background-color: rgba(255, 0, 106, 0.08); }

/* hover only on real pointers */
@media (hover: hover) and (pointer: fine) {
  body.s1 #tracks .controls .play:hover {
    background-color: var(--zr-pink-deep);
    transform: translateY(-1px);
  }
  body.s1 #tracks .controls .previous:hover img,
  body.s1 #tracks .controls .next:hover img { opacity: 1; }
  body.s1 #tracks .mix-trackslist li:hover { background-color: rgba(255, 0, 106, 0.08); }
  body.s1 #tracks .mix-trackslist li:hover .audio-track { color: #ffffff; }
  body.s1 #tracks .mix-trackslist li:hover .sc-track-duration { color: var(--zr-pink); }
  body.s1 #tracks .mix-trackslist li:hover::before { color: var(--zr-pink); }
}

/* =========================================================================
   #studios — "You May Also Like": image-led cross-brand gallery (2 photos)
   ========================================================================= */

body.s1 #studios .studio-list {
  width: 100%;
  max-width: 760px;
  margin: var(--zr-space-6) auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3.5vw, 1.75rem);
}
@media (min-width: 560px) {
  body.s1 #studios .studio-list { grid-template-columns: 1fr 1fr; }
}

/* photo card shell */
body.s1 #studios .studio-item {
  position: relative;
  background-color: var(--zr-panel);
  border: 1px solid var(--zr-line);
  border-radius: var(--zr-radius);
  overflow: hidden;
  transition: transform 200ms var(--zr-ease-out),
              border-color 200ms var(--zr-ease-out),
              box-shadow 200ms var(--zr-ease-out);
}
/* the whole card is the link */
body.s1 #studios .studio-item .img-link {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  text-decoration: none;
}
/* real room/studio photo fills the frame */
body.s1 #studios .studio-item .card-img-top {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--zr-ease-out);
}
/* bottom scrim so the overlaid title stays readable over any photo */
body.s1 #studios .studio-item .img-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
      rgba(11, 11, 13, 0.92) 0%,
      rgba(11, 11, 13, 0.55) 34%,
      rgba(11, 11, 13, 0) 62%);
}
/* brand name + price, overlaid bottom-left */
body.s1 #studios .studio-item .card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(0.9rem, 3.5vw, 1.25rem);
}
body.s1 #studios .studio-item .card-title {
  text-align: left;
  color: var(--zr-ink);
  font-weight: 800;
  font-size: var(--zr-text-lg);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
/* "See UNION" / "See MIX" — pink pill badge, top-right */
body.s1 #studios .studio-item .seemoresite {
  position: absolute;
  top: clamp(0.7rem, 3vw, 1rem);
  right: clamp(0.7rem, 3vw, 1rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  background-color: var(--zr-pink);
  color: #ffffff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 10px 24px -12px rgba(255, 0, 106, 0.6);
  transition: background-color 160ms var(--zr-ease-out);
}

/* keyboard focus + press feedback */
body.s1 #studios .studio-item .img-link:focus-visible {
  outline: 2px solid var(--zr-pink);
  outline-offset: 3px;
}
body.s1 #studios .studio-item:active { transform: scale(0.98); }

/* hover only on real pointers: gentle photo push-in + card lift + pink edge */
@media (hover: hover) and (pointer: fine) {
  body.s1 #studios .studio-item:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 0, 106, 0.6);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
  }
  body.s1 #studios .studio-item:hover .card-img-top { transform: scale(1.05); }
  body.s1 #studios .studio-item:hover .seemoresite { background-color: var(--zr-pink-deep); }
}

/* =========================================================================
   Reduced motion — drop all transitional transforms; keep static states
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  body.s1 #tracks .controls a,
  body.s1 #tracks .mix-trackslist li,
  body.s1 #tracks .mix-trackslist .audio-track,
  body.s1 #tracks .mix-trackslist .sc-track-duration,
  body.s1 #studios .studio-item,
  body.s1 #studios .studio-item .card-img-top,
  body.s1 #studios .studio-item .seemoresite {
    transition: none;
  }
  body.s1 #tracks .controls .play:hover,
  body.s1 #studios .studio-item:hover { transform: none; }
  body.s1 #studios .studio-item:hover .card-img-top { transform: none; }
}

/* --- achievements-achievements-first-gallery --- */
/* =============================================================================
   ZOOM homepage refresh — SECTION LAYER: #achievements · #achievements-first · #gallery
   zoomrecordingstudio.com/index.php ONLY. Loaded AFTER the hero + base-kit layers,
   so it REUSES their --zr-* tokens (never redefines them).

   What each section becomes (Concept-C "console"):
   - #achievements      → restrained figures READOUT inside one console panel
                          (kills the old #ff0066 band + the SaaS hero-metric look).
   - #achievements-first→ trust RIBBON of compact console chips (kills the band).
   - #gallery ("OUR      → image-led services grid: the real on-page studio photos
     SERVICES")           featured in clean console cards (not icon cards).

   SEO-safe: presentation only — no content / link (href) / img alt / heading text
   / schema changes. All rules scoped under body.s1 (homepage-only class).
   Anti-slop: real varied photos in the gallery, one figures panel per section,
   card radius <=16px (14px), buttons = pink pills, body copy >=4.5:1 on grounds.
   Motion (emil): transform/opacity ONLY; the reveal is a self-completing time-based
   entrance (content is ALWAYS in the DOM and settles visible within <1s in any
   renderer — never gated behind scroll or JS, so it is crawler-safe), staggered
   40-60ms, fully disabled under prefers-reduced-motion. Hover gated to
   (hover:hover) and (pointer:fine).
   Color source of truth: client/src/design.ts (ZOOM #FF006A).
   ============================================================================= */

/* ---- 0. Shared vertical rhythm + gutters for the three sections -------------
   Override the template's asymmetric .section padding (20/60/100) with the
   console section rhythm. #achievements + #achievements-first have no .container,
   so they carry the horizontal gutter themselves; #gallery uses .container
   (already normalized by the base kit). id in the selector wins over .section. */
body.s1 #gallery,
body.s1 #achievements,
body.s1 #achievements-first {
  padding-block: var(--zr-section-y);
}
body.s1 #achievements,
body.s1 #achievements-first {
  padding-inline: var(--zr-gutter);
}

/* ---- 1. Shared console section heading (#gallery + #achievements) -----------
   Recolor + reweight the template .section-title into the bold uppercase console
   voice with a short pink underline. !important on family/weight/transform beats
   the shared template's heading rules (spec note). These sections are .text-center,
   so the heading + underline stay centered. */
body.s1 #gallery .section-title,
body.s1 #achievements .section-title {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: var(--zr-h2);
  color: var(--zr-ink-2);
  padding-bottom: 14px;
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}
body.s1 #gallery .section-title::after,
body.s1 #achievements .section-title::after {
  background: var(--zr-pink);   /* was #ff0066 — snap to exact ZOOM pink */
  height: 3px;
  width: 52px;
  margin-left: -26px;
  bottom: 0;
  border-radius: 2px;
}

/* =============================================================================
   #gallery — "OUR SERVICES": image-led console grid of the real studio photos
   ============================================================================= */

/* intro paragraph: dim, readable measure, drop the justified rivers (inline
   style="text-align:justify" needs !important to beat). Sits on the #16161a
   section ground where --zr-dim clears 4.5:1. */
body.s1 #gallery .fs-16 {
  max-width: 68ch;
  margin: 0 auto clamp(1.75rem, 5vw, 2.75rem);
  text-align: left !important;
  font-size: var(--zr-body);            /* Item 8: shared body-copy size */
  line-height: 1.7;
  color: var(--zr-dim);
}

/* carousel: this is a Slick slider (17 slides). NEVER override its layout —
   no display/flex/grid/width on .other-services / .slick-slider / .slick-list /
   .slick-track / .slick-slide, or the slides collapse into one full-height stack
   (the section ballooned to ~76k px). Let Slick's own horizontal layout run
   untouched; only the card SURFACES inside each slide are restyled below.
   A max-width keeps the strip within the console measure without touching the
   slider's internal layout. */
body.s1 #gallery .other-services {
  max-width: var(--zr-maxw);
  margin-inline: auto;
}

/* card shell: the .card IS the Slick slide (Slick sets .slick-slide + the slide
   width inline ON the .card) — so NEVER set width/margin here or the slides grow
   past their allotment and wrap into a tall stack. The card stays transparent
   and carries only horizontal PADDING as the inter-slide gutter (inside Slick's
   slide width, box-sizing:border-box, so the outer slide width is unchanged and
   nothing wraps). The console panel surface is painted on the two children
   (img-link + card-body) so a real gutter shows between slides. */
body.s1 #gallery .other-services .card {
  margin: 0;
  padding: 0 7px;                         /* gutter — inside Slick's slide width */
  background: transparent;
  border: 0;
  border-radius: 0 !important;            /* beat template 25px */
  display: flex;
  flex-direction: column;
  overflow: visible;
  box-sizing: border-box;
  transition: transform 220ms var(--zr-ease-out);
  will-change: transform;
}

/* media: uniform 4:3 crop of the real photos; TOP of the console panel (bg +
   hairline, top corners rounded, no bottom border — seam with the body). */
body.s1 #gallery .other-services .card .img-link {
  display: block;
  overflow: hidden;
  background: var(--zr-console);
  border: 1px solid var(--zr-line);
  border-bottom: 0;
  border-radius: var(--zr-radius) var(--zr-radius) 0 0;
  transition: border-color 220ms var(--zr-ease-out);
}
body.s1 #gallery .other-services .card .img-link:focus-visible {
  outline: 2px solid var(--zr-pink);
  outline-offset: -2px;
}
body.s1 #gallery .other-services .card .card-img-top {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0 !important;            /* card clips; beat template 25px top-radius */
  transition: transform 520ms var(--zr-ease-out);
}

/* body: BOTTOM of the console panel (bg + hairline, bottom corners rounded, no
   top border — continues from the image). Left-aligned editorial stack; CTAs
   pinned to the card bottom so slide rows line up regardless of copy length. */
body.s1 #gallery .other-services .card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1rem, 3vw, 1.35rem);
  background: var(--zr-panel);
  border: 1px solid var(--zr-line);
  border-top: 0;
  border-radius: 0 0 var(--zr-radius) var(--zr-radius);
  transition: border-color 220ms var(--zr-ease-out);
}
body.s1 #gallery .other-services .card-body h4.card-title,
body.s1 #gallery .other-services .card-body .card-title {
  margin: 0;
  text-align: left !important;            /* beat template centering */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--zr-ink-2);
}
body.s1 #gallery .other-services .card-body .card-text {
  margin: 0;
  text-align: left !important;            /* beat template centering */
  min-height: 0;                          /* drop template min-height:100px */
  font-size: var(--zr-body);              /* Item 8: shared body-copy size */
  line-height: 1.55;
  color: var(--zr-muted);                 /* >=8:1 on the #1b1b20 panel */
}

/* actions: Info = pink outline, Book = solid pink; both real pills, >=44px tap
   target, pushed to the card base. */
body.s1 #gallery .other-services .card-action {
  display: flex;
  flex-wrap: wrap;                        /* narrow slides: stack pills, never overflow right edge */
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.35rem;
}
body.s1 #gallery .other-services .card-action a.btn {
  flex: 1 1 0;
  width: auto !important;                 /* beat template width:40% */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.9rem;
  border-radius: 100px !important;        /* beat template 50px !important — pill */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none !important;            /* kill template inset-fill shimmer (even on :hover) */
  transition: transform 140ms var(--zr-ease-out),
              background-color 160ms var(--zr-ease-out),
              border-color 160ms var(--zr-ease-out),
              color 160ms var(--zr-ease-out);
}
body.s1 #gallery .other-services .card-action a.other-service-book-button {
  background: var(--zr-pink) !important;  /* beat .btn-primary #ff0066 */
  color: #fff !important;                 /* 3.85:1 on pink; bold uppercase — passes 3:1 */
  border: 1px solid var(--zr-pink) !important;
}
body.s1 #gallery .other-services .card-action a.engineer-info {
  background: transparent !important;     /* beat .btn-primary solid fill */
  color: var(--zr-pink) !important;       /* 4.82:1 on the panel */
  border: 1px solid var(--zr-pink) !important;
}
body.s1 #gallery .other-services .card-action a.btn:active { transform: scale(0.97); }
body.s1 #gallery .other-services .card-action a.btn:focus-visible {
  outline: 2px solid var(--zr-pink);
  outline-offset: 2px;
}

/* hover — real pointers only */
@media (hover: hover) and (pointer: fine) {
  body.s1 #gallery .other-services .card:hover {
    transform: translateY(-4px);
  }
  /* panel border lives on the two children — tint both on hover */
  body.s1 #gallery .other-services .card:hover .img-link,
  body.s1 #gallery .other-services .card:hover .card-body {
    border-color: rgba(255, 0, 106, 0.55);
  }
  body.s1 #gallery .other-services .card:hover .card-img-top {
    transform: scale(1.06);
  }
  body.s1 #gallery .other-services .card-action a.other-service-book-button:hover {
    background: var(--zr-pink-deep) !important;
    border-color: var(--zr-pink-deep) !important;
  }
  body.s1 #gallery .other-services .card-action a.engineer-info:hover {
    background: rgba(255, 0, 106, 0.12) !important;
    border-color: var(--zr-pink) !important;
    color: var(--zr-pink) !important;
  }
}

/* =============================================================================
   #achievements — restrained figures readout (one console panel, not a stat wall)
   ============================================================================= */

/* convert the full-width #ff0066 band into one centered console panel with a
   faint masked matrix grid — an instrument cluster, not the SaaS metric row. */
body.s1 #achievements .section-achievements-line {
  background: var(--zr-panel) !important;   /* was #ff0066 band */
  margin: 0 auto !important;                /* was margin-top:50px */
  max-width: var(--zr-maxw);
  border: 1px solid var(--zr-line);
  border-radius: var(--zr-radius);
  padding: clamp(1.25rem, 4vw, 2rem) clamp(1rem, 3vw, 1.5rem) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
}
body.s1 #achievements .section-achievements-line::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--zr-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--zr-grid) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 0%, #000 0%, #000 42%, transparent 82%);
          mask-image: radial-gradient(120% 120% at 50% 0%, #000 0%, #000 42%, transparent 82%);
}
body.s1 #achievements .achievements-items {
  position: relative;
  z-index: 1;
}

/* icon: pink line-mark — the one brand accent per figure. Beats the section's
   inline #fff and the <=450px dark-flip (both !important-free), so the mark reads
   on the dark panel at every width. */
body.s1 #achievements .DvXlvQ svg {
  color: var(--zr-pink) !important;
  stroke: currentColor !important;
}

/* figure: solid tabular numeral, restrained size (inherits the section's inline
   33px — no hero-metric inflation), ink. */
body.s1 #achievements .main-number-achievements-line {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--zr-ink-2);
}
/* label: small mono spec-caption under the figure. */
body.s1 #achievements .second-number-achievements-line {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: normal;                    /* allow wrap on narrow (inline had nowrap) */
  color: var(--zr-muted);                 /* >=8:1 on the #1b1b20 panel */
  margin-top: 4px;
}

/* desktop: 4 even columns with hairline dividers — a clean gauge cluster.
   Overrides the section's inline nowrap-flex layout and neutralizes the base
   .item-achievements-text-line{width:410px} so content centers in its cell.
   (<=980px keeps the inline 2-up / stacked layout, no dividers.) */
@media (min-width: 981px) {
  body.s1 #achievements .achievements-items {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: none;
    padding: 0 !important;
  }
  body.s1 #achievements .item-achievements-line {
    width: auto !important;
    flex: initial !important;
    padding: 6px clamp(14px, 2vw, 30px) !important;
    justify-content: center;
    box-sizing: border-box;
  }
  body.s1 #achievements .item-achievements-line:not(:first-child) {
    border-left: 1px solid var(--zr-line);
  }
  body.s1 #achievements .item-achievements-text-line {
    width: auto !important;               /* beat base 410px */
    justify-content: center;
  }
}

/* =============================================================================
   #achievements-first — trust ribbon of compact console chips
   ============================================================================= */

/* drop the #ff0066 band; the strip sits on the console section ground. */
body.s1 #achievements-first .section-achievements-first-line {
  background: transparent !important;     /* was #ff0066 */
  margin-top: 0 !important;
}

/* Item 6 (owner fix, round 2): one deliberate, evenly-spaced TRUST BAND — a
   responsive grid of 6 equal console chips (was a ragged wrapping flex that
   stranded single chips on their own rows). 1 col on narrow phones, 2 up from
   440px, 3 from 760px — a tidy 3x2 band on desktop. Every chip fills its cell
   (equal width + equal height via align-items:stretch), so the band reads as
   an intentional set, not a random list. */
body.s1 #achievements-first .achievements-first-items {
  display: grid !important;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: clamp(10px, 1.6vw, 14px);
  max-width: 1000px;
  margin-inline: auto;
}
@media (min-width: 440px) {
  body.s1 #achievements-first .achievements-first-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 760px) {
  body.s1 #achievements-first .achievements-first-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* chip: equal console card filling its grid cell (overrides the base
   flex:0 0 33.33% / max-width:33.33% and any width). */
body.s1 #achievements-first .item-achievements-first-line {
  flex: initial !important;
  width: auto !important;
  max-width: none !important;             /* beat base max-width:33.33% */
  height: 100%;
  margin: 0 !important;
  padding: 14px 16px !important;          /* beat base 20px 10px */
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 11px;
  background: var(--zr-panel);
  border: 1px solid var(--zr-line);
  border-radius: 12px;                    /* <=16px */
  box-sizing: border-box;
  transition: transform 200ms var(--zr-ease-out),
              border-color 200ms var(--zr-ease-out);
}
body.s1 #achievements-first .item-achievements-first-text-line {
  display: flex;
  align-items: center;
  gap: 11px;
}
/* icon: the source PNGs are dark line-art (built for the old pink band) — invert
   to a light mark so they read on the console ground. */
body.s1 #achievements-first .item-achievements-ico {
  margin: 0 !important;                   /* beat base margins */
  width: 26px !important;
  height: 26px;
  flex: 0 0 26px;
  overflow: hidden;                       /* clip any broken-image alt overflow */
}
body.s1 #achievements-first .item-achievements-ico img.dgFMsw {
  width: 26px;
  height: 26px;
  filter: invert(1);
  opacity: 0.9;
  /* Each chip carries a desktop + mobile <img> whose ALT is an SEO keyword
     phrase ("Best Hip Hop Mixing", "Rap Studio Rental Los Angeles", ...). These
     icons are lazy-loaded, so before they load (and if any 404s) the browser
     paints the alt text, interleaving keyword phrases into the trust ribbon.
     Suppress the alt-text glyphs (font-size:0 + transparent) WITHOUT touching the
     alt attribute — SEO/a11y text stays in the DOM, it is simply never rendered.
     The real 6 trust chips live in .second-number-achievements-line-first. */
  font-size: 0 !important;
  color: transparent !important;
}
/* label: readable ink, softened from the base shouty uppercase. */
body.s1 #achievements-first .second-number-achievements-line-first {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 600;
  font-size: var(--zr-body) !important;   /* Item 8: shared body-copy size (was 0.9rem) */
  line-height: 1.3;
  letter-spacing: 0.005em;
  text-transform: none;                   /* soften base uppercase */
  text-align: left;
  color: var(--zr-ink);                   /* was black on pink */
}

/* hover — real pointers only */
@media (hover: hover) and (pointer: fine) {
  body.s1 #achievements-first .item-achievements-first-line:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 0, 106, 0.5);
  }
}

/* =============================================================================
   Reveal-enhance (SEO-safe): time-based, self-completing entrance for the three
   sections' items. Content is never given a persistent hidden state — the
   opacity:0 exists ONLY inside the keyframe/fill, so any engine that ignores CSS
   animation shows everything, and any engine that runs it settles visible within
   <1s. transform/opacity only; staggered; disabled under reduced-motion.
   ============================================================================= */
/* NB: #gallery cards are intentionally EXCLUDED here — they live inside a Slick
   track that is itself transformed, so a per-card transform reveal fights the
   carousel. The gallery cards appear immediately. */
@media (prefers-reduced-motion: no-preference) {
  body.s1 #achievements .item-achievements-line,
  body.s1 #achievements-first .item-achievements-first-line {
    animation: zr-sec-rise 600ms var(--zr-ease-out) both;
  }
  body.s1 #achievements .item-achievements-line:nth-child(2),
  body.s1 #achievements-first .item-achievements-first-line:nth-child(2) { animation-delay: 50ms; }
  body.s1 #achievements .item-achievements-line:nth-child(3),
  body.s1 #achievements-first .item-achievements-first-line:nth-child(3) { animation-delay: 100ms; }
  body.s1 #achievements .item-achievements-line:nth-child(4),
  body.s1 #achievements-first .item-achievements-first-line:nth-child(4) { animation-delay: 150ms; }
  body.s1 #achievements-first .item-achievements-first-line:nth-child(5) { animation-delay: 200ms; }
  body.s1 #achievements-first .item-achievements-first-line:nth-child(6) { animation-delay: 250ms; }

  @keyframes zr-sec-rise {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
}

/* --- quotes-reviews-and-map --- */
/* =============================================================================
   ZOOM homepage refresh — SECTIONS: #quotes (reviews) + #map (contact / map)
   zoomrecordingstudio.com/index.php ONLY. Loaded AFTER the hero + base-kit CSS,
   so it reuses the hero --zr-* tokens and the base-kit console primitives; it
   does NOT redefine any token.

   Scope: everything under body.s1 (homepage-only class) so nothing leaks to
   inner pages. SEO-safe: presentation only — no markup / text / heading /
   link(href) / image-alt / JSON-LD change. The one deliberate pink mono kicker
   per section is decorative CSS ::before generated content placed on the
   CONTAINER (never inside the heading), so the h2/h3 text + accessible name are
   untouched. The LeadConnector reviews iframe INTERNALS are GHL-owned and are
   NOT restyled here (widget colors are set inside GHL settings, spec §9) — this
   file styles only the section container/header around it.

   Real selectors (verified against live markup 2026-07-16):
     #quotes.section.text-center > .container
        > h2.section-title ("Testimonials") + iframe.lc_reviews_widget
     #map.map-section.section > .container.text-center
        > h3 ("CONTACT", inline style="padding:40px")
        > .container > .row
             > .section-intro.map-bg.col-12.col-lg-4  (contact readout)
             > .studio-competence.col-12.col-lg-8 > iframe.map-bg (Google map)

   Contrast (WCAG, verified): kicker pink #FF006A on #131316 = 4.82:1; contact
   heading/values ink #f4f4f5 on #131316 = 16.9:1; dim labels #8a8a95 = 5.4:1;
   contact links kept INK (16.9:1) with a pink underline (pink text on ground is
   4.82:1 — used only as decoration, not required to pass as body text).
   Color source of truth: client/src/design.ts (ZOOM #FF006A).
   ============================================================================= */


/* ============================================================================
   #quotes — reviews / LeadConnector reputation widget
   Console-dark section header over the existing widget; widget untouched.
   ============================================================================ */

/* console vertical rhythm (ground comes from base-kit .section; reasserted) */
body.s1 #quotes {
  padding-block: var(--zr-section-y);
  background-color: var(--zr-console);
}

/* pink MONO KICKER — the single deliberate label, decorative ::before on the
   container (not the h2), so the heading text/a11y name stay pristine */
body.s1 #quotes > .container { position: relative; }
body.s1 #quotes > .container::before {
  content: "Client Reviews";
  display: block;
  margin: 0 0 var(--zr-space-2);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zr-pink);
}

/* BOLD UPPERCASE SANS heading — console voice. !important on family/weight/
   transform wins over the shared template's .section-title (uppercase, 700). */
body.s1 #quotes .section-title {
  margin: 0 0 var(--zr-space-4);
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 800 !important;
  font-size: var(--zr-h2);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase !important;
  color: var(--zr-ink-2);
  text-wrap: balance;
}
/* retire the template's legacy pink underline bar (::after) — the kicker +
   heading pair is the console header device (matches hero + /pricing/) */
body.s1 #quotes .section-title::after { display: none; }

/* LeadConnector reviews widget — CONTAINER framing only, internals untouched.
   Full-width + transparent (GHL owns the widget's own colors). Console rhythm
   above it, plus a light CLS floor while reviews_widget.js sizes the iframe. */
body.s1 #quotes .lc_reviews_widget {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: var(--zr-space-5) auto 0;
  border: 0;
  min-height: 200px;          /* CLS floor; the widget script grows this to fit */
  box-sizing: border-box;
}


/* ============================================================================
   #map — contact readout + framed Google map embed
   ============================================================================ */

/* console vertical rhythm + ground (reasserts base-kit .section ground) */
body.s1 #map {
  padding-block: var(--zr-section-y);
  background-color: var(--zr-console);
}

/* the section nests a second .container; collapse the inner one's gutter so the
   base-kit .container padding isn't applied twice (outer keeps the gutter) */
body.s1 #map .container .container {
  max-width: none;
  padding-inline: 0;
}

/* pink MONO KICKER above the CONTACT heading (decorative ::before on container) */
body.s1 #map > .container.text-center { position: relative; }
body.s1 #map > .container.text-center::before {
  content: "Find the Studio";
  display: block;
  margin: 0 0 var(--zr-space-2);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zr-pink);
}

/* CONTACT heading (h3) — console voice; !important on padding beats the inline
   style="padding:40px", !important on family/transform beats template heading */
body.s1 #map > .container.text-center > h3 {
  margin: 0 0 var(--zr-space-5);
  padding: 0 !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 800 !important;
  font-size: var(--zr-h2);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase !important;
  color: var(--zr-ink-2);
  text-wrap: balance;
}

/* contact readout column — strip the legacy white .map-bg card (bg #fff + heavy
   drop-shadow). Rendered as clean console text on the ground: no competing box,
   which also keeps native bootstrap grid gutters intact (no border collisions).
   Left-aligned reads as a tidy studio readout. */
body.s1 #map .section-intro.map-bg {
  background-color: transparent;
  box-shadow: none;
  border: 0;
  text-align: left;
  margin-bottom: var(--zr-space-5);   /* separates readout from map when stacked */
}
body.s1 #map .map-items { margin-top: var(--zr-space-2); }

/* small dim UPPERCASE mono field labels (Address / Hours / Phone / E-mail) */
body.s1 #map .map-item .item-h {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zr-dim);
}
/* field values in bright ink */
body.s1 #map .map-item .item-txt {
  font-size: var(--zr-body);            /* Item 8: shared body-copy size */
  line-height: 1.55;
  color: var(--zr-ink);
}
/* recolour the light-grey field dividers to the console hairline */
body.s1 #map .map-item:not(:first-child) {
  border-top: 1px solid var(--zr-line);
}
/* contact links: INK text (16.9:1) with a pink underline carrying the brand.
   focus-visible ring for keyboard; underline thickens on real-pointer hover. */
body.s1 #map .map-item .item-txt a {
  color: var(--zr-ink);
  text-decoration: underline;
  text-decoration-color: var(--zr-pink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  border-radius: 2px;
  transition: text-decoration-thickness 140ms var(--zr-ease-out);
}
body.s1 #map .map-item .item-txt a:focus-visible {
  outline: 2px solid var(--zr-pink);
  outline-offset: 3px;
}

/* FRAME the Google map embed cleanly — rounded panel + hairline console border.
   The iframe carries inline style="border:0", so the border needs !important;
   border-radius + overflow clip the map corners in modern engines. Height is
   left on the 450 attribute (reserved space) to avoid any CLS regression. */
body.s1 #map iframe.map-bg {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--zr-line) !important;
  border-radius: var(--zr-radius);
  overflow: hidden;
  box-shadow: none;
  background-color: var(--zr-panel);   /* fills behind map tiles while they load */
  box-sizing: border-box;
  /* Item 8: dark-mode the bright Google Maps embed so it reads on-brand while
     labels stay legible (double invert + 180deg hue-rotate keeps text/roads
     readable and returns the pink POI/water hues to natural). */
  filter: invert(0.92) hue-rotate(180deg) saturate(0.8) brightness(0.9);
}


/* ---- motion: hover gated to real pointers; reduced-motion respected -------- */
@media (hover: hover) and (pointer: fine) {
  body.s1 #map .map-item .item-txt a:hover { text-decoration-thickness: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  body.s1 #map .map-item .item-txt a { transition: none; }
}

/* --- diagnostic-test --- */
body.s1 .zr-bookbar{display:none}

/* --- assembly-verify-fixes: megasale + offer + quotes-readability + about/faq --- */
/* =============================================================================
   ZOOM homepage refresh — assembly-verify fixes (CSS-only, all body.s1 scoped).
   Restyles the previously un-styled template-pink sections into the console
   language. SEO-safe: NO text / heading / href / alt / JSON-LD change.
   NOTE: #offer (booking form) and #quotes (reviews) are CROSS-ORIGIN GHL iframes
   (api/services.leadconnectorhq.com) — their internal fields/colors are set in
   GHL settings (spec §9) and cannot be themed from here. We frame the container
   and make them readable only.
   Contrast (on --zr-panel #1b1b20): ink #F6F5F4 ~15:1; muted #BFBDBB ~8:1;
   dim #8a8a95 ~4.6:1; pink #FF006A ~4.7:1; #fff on pink ~3.9:1 (bold >=16px).
   ============================================================================= */

/* ---- 1. shared console section heading — match #gallery / #achievements ------
   system-ui 800 uppercase + centered pink accent rule. Replaces the template
   heading font on these four sections so they read cohesively. */
body.s1 #megasale .section-title,
body.s1 #offer .section-title,
body.s1 #about .section-title,
body.s1 #faq-page h2 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: var(--zr-h2);
  color: var(--zr-ink-2);
  position: relative;
  padding-bottom: 18px;
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem) !important;  /* beat inline margin-bottom:0 on #megasale */
}
body.s1 #megasale .section-title::after,
body.s1 #offer .section-title::after,
body.s1 #about .section-title::after,
body.s1 #faq-page h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 52px;
  height: 3px;
  border-radius: 2px;
  background: var(--zr-pink);   /* snap to exact ZOOM pink; replaces template underline */
}

/* ---- 2. #megasale STUDIO RENTAL — template-pink tariff cards -> console panels */
body.s1 #megasale .tariff-item {
  background: var(--zr-panel) !important;      /* beat .popular-offer #ff0066 + the near-black card */
  border: 1px solid var(--zr-line);
  border-radius: var(--zr-radius) !important;  /* beat template 25px (<=16px) */
  box-sizing: border-box;
}
/* text: was near-black on pink -> ink/muted on the console panel */
body.s1 #megasale .tariff-h,
body.s1 #megasale .tariff-h2 { color: var(--zr-ink) !important; }
body.s1 #megasale .tariff-price,
body.s1 #megasale .new-price { color: var(--zr-ink) !important; }
body.s1 #megasale .tariff-price span { color: var(--zr-dim) !important; }   /* the "from" prefix */
body.s1 #megasale .studio-rental-text { color: var(--zr-muted) !important; }
body.s1 #megasale .studio-rental-text.studio-rental-price,
body.s1 #megasale .studio-rental-price { color: var(--zr-ink) !important; }
body.s1 #megasale .list-img-item { color: var(--zr-muted) !important; }
body.s1 #megasale .studio-rental-line { background: var(--zr-line) !important; }
body.s1 #megasale .justify-content-center { color: var(--zr-muted); }
body.s1 #megasale h4 { color: var(--zr-ink) !important; }   /* beat inline color:#222222 */
/* Book Now: template white/pink ghost pill w/ shimmer -> flat pink pill */
body.s1 #megasale .btn-ghost-primary {
  background: var(--zr-pink) !important;
  color: #fff !important;
  border: 1px solid var(--zr-pink) !important;
  border-radius: 100px !important;             /* beat template 50px */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.4rem;
  box-shadow: none !important;
  cursor: pointer;
  transition: transform 140ms var(--zr-ease-out), background-color 160ms var(--zr-ease-out);
}
body.s1 #megasale .btn-ghost-primary::before,
body.s1 #megasale .btn-ghost-primary::after { content: none !important; display: none !important; }
body.s1 #megasale .btn-ghost-primary:active { transform: scale(0.97); }

/* Item 9 (owner fix): the "3 hours minimum" / "2 hours minimum" captions under
   each Book Now render dark-on-dark on the console panel — one inherits the
   template's dark default, the other carries an inline color:#fff we normalize.
   Lift both to --zr-dim (5.4:1 on the panel) so they read as quiet meta. */
body.s1 #megasale .services-action .mt-5 {
  color: var(--zr-dim) !important;
}

/* ---- 3. #offer booking form — GHL cross-origin iframe: frame only ------------
   Constrain width + console hairline + sane radius (beats the inline 40px GHL
   sets after load). The form's pink ground + white fields are GHL-internal and
   must be recolored in GHL settings (spec §9). */
body.s1 #offer iframe {
  max-width: 640px;
  margin-inline: auto;
  /* Round 6 · Item B2: make the GHL form TRULY embedded (no "window"). Drop the
     frame + rounded corners; form_embed.js already auto-sizes the iframe to its
     content height (verified 1026px, so no real internal scroll). The last step
     to "dimpless" is GHL-side: set the form Background to the page ground #131316
     (see the GHL form spec) so the form ground melts into the #offer section and
     only the white fields + pink button read as native page controls. */
  border: none !important;
  border-radius: 0 !important;               /* beat inline border-radius:40px */
  background: transparent;
  box-sizing: border-box;
}

/* ---- 4. #quotes reviews widget — GHL cross-origin iframe: readability floor --
   Until GHL theming, give the widget a light neutral surface so its default
   dark cards + the "what our clients say" subheading read (>=4.5:1). Internals
   untouched (spec §9). */
body.s1 #quotes .lc_reviews_widget {
  /* Round 6 · B4: the reviews widget is now dark-themed in GHL (console palette),
     so drop the light readability fallback and let it sit natively on the section. */
  background: transparent !important;
  border: none;
  max-width: 1120px;
  margin-inline: auto;
}

/* ---- Item B5: line the #achievements header up with the other section headers -
   #achievements has no .container, so its heading + stats sat flush at the page
   gutter — further left (and wider at max-width:1200) than every other section
   header, which lives inside the centered 1120 .container. Give the heading + the
   stats block the SAME centered 1120 container box (drop the section-level gutter
   so it isn't double-applied) so "ACHIEVEMENTS" lines up with "OUR SERVICES",
   "OUR WORKS", "STUDIO RENTAL", etc. */
/* Full-bleed section keeps its dark background edge-to-edge, but its inline
   padding is pushed to the SAME inset as a centered 1120 .container — so the
   heading (which the earlier rule pins at margin-left:0) starts exactly where
   "OUR SERVICES"/"OUR WORKS" do. The stats block fills that same content box. */
body.s1 #achievements {
  padding-inline: max(var(--zr-gutter), calc((100% - var(--zr-maxw)) / 2 + var(--zr-gutter))) !important;
}
body.s1 #achievements .section-title,
body.s1 #achievements .section-intro {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
body.s1 #achievements .achievements-items {
  max-width: 100% !important;   /* was inline 1200px — now fills the container box */
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* ---- Item B6 (Fable final-gate follow-up): kill a pre-existing sub-360px
   overflow — the legacy About/studio-tour video thumbnail carries a fixed 340px
   width, pushing the page ~33px wide at 320px. Constrain it so nothing scrolls
   sideways on the smallest phones. Not introduced by the refresh; fixed here. */
body.s1 .imgYoutube,
body.s1 .img-youtube-video,
body.s1 .service-single-video {
  max-width: 100% !important;
  height: auto;
}

/* ---- Item B7: player transport centering ------------------------------------
   The template gives the control anchors asymmetric margins (12px each, but .next
   carries margin-right:45px). Our flex `justify-content:center` counted that
   trailing 45px as content and shoved prev/play/next ~22px left. Zero the margins
   so only the symmetric flex gap spaces them → play sits dead-centre. */
body.s1 #tracks .controls a { margin: 0 !important; }

/* ---- Item B8: mobile header flush to top ------------------------------------
   The fixed header sits at top:20px, so a 20px strip of the hero photo showed
   above the "Los Angeles / call" bar on phones (desktop is unaffected/good).
   Pin it to the top on mobile only. */
@media (max-width: 770px) {
  body.s1 .header.fffixed-top { top: 0 !important; }
}

/* ---- Item B9: reorganize the header — declutter + clearer hierarchy ----------
   Owner note: the header felt scattered (Los Angeles / call-text / Open 24/7 /
   logo). Fixes: (1) drop the redundant "Open 24/7" from the header — the hero
   kicker now carries it (bumped up above) and this also removes its overlap with
   the logo; (2) the phone is now just a number with a phone glyph (no "call/text:"
   label, set in s1/phone_top.php); (3) tidy the top utility bar (location left,
   phone right) and the logo/burger row. All ZOOM-scoped. */
body.s1 header.header .open24 { display: none !important; }

/* top utility bar: location left · phone right, aligned + consistent type */
body.s1 header.header .header-info {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}
body.s1 header.header .header-city {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font: 500 13px/1.2 system-ui, -apple-system, sans-serif;
  white-space: nowrap;
}
body.s1 header.header .header-city .fa-map-marker,
body.s1 header.header .header-city .marker-img { color: var(--zr-pink); font-size: 14px; }
body.s1 header.header .head-phone {
  flex: 0 0 auto;
  width: auto;
  text-align: right;
}
body.s1 header.header .head-phone a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font: 600 14px/1.2 system-ui, -apple-system, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: color 140ms var(--zr-ease-out);
}
body.s1 header.header .head-phone a .fa-phone { color: var(--zr-pink); font-size: 13px; }
@media (hover: hover) and (pointer: fine) {
  body.s1 header.header .head-phone a:hover { color: var(--zr-pink); }
}

/* logo + burger row: with "Open 24/7" gone, spread cleanly (no overlap) */
@media (max-width: 767px) {
  body.s1 header.header .main-nav {
    justify-content: space-between !important;
    align-items: center;
  }
  body.s1 header.header .row.header-logo-city { flex: 0 0 auto; margin: 0; }
  body.s1 header.header .header__burger { flex: 0 0 auto; }
  /* align "Los Angeles" with the ZOOM logo's left edge — the template pulls it to
     the far edge with margin-left:-15px; the logo sits ~11px in from the gutter. */
  body.s1 header.header .header-city { margin-left: 11px !important; }
}

/* ---- 5. #about + #faq-page fine-tuning --------------------------------------
   Read More (about) + See all FAQs pill: kill the template diagonal shimmer
   pseudo; flat pink pill for See all FAQs (radius 100px). */
body.s1 .btn-widder,
body.s1 #about .button-more {
  background: var(--zr-pink) !important;
  color: #fff !important;
  border: 1px solid var(--zr-pink) !important;
  border-radius: 100px !important;             /* beat template 50px */
  box-shadow: none !important;
  transition: transform 140ms var(--zr-ease-out), background-color 160ms var(--zr-ease-out);
}
/* Read More is a bare <button> — give it real pill geometry + a tap target */
body.s1 #about .button-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
}
body.s1 .btn-widder::before,
body.s1 .btn-widder::after,
body.s1 #about .button-more::before,
body.s1 #about .button-more::after { content: none !important; display: none !important; }
body.s1 .btn-widder:active,
body.s1 #about .button-more:active { transform: scale(0.97); }

/* Item 6 (black-on-black): the About body uses <b> labels the template paints in
   dark slate (#4F545E, ~2.4:1 on the console ground) and a "Read More" button in
   pure black (~1.1:1). Lift the bold labels to bright ink (16.9:1); the button is
   handled by the pink pill above. */
body.s1 #about b { color: var(--zr-ink) !important; }

/* Item 2 (owner fix, round 3): the "Why choose our recording studio in Los
   Angeles" (#about) body paragraphs were never given a size, so they inherited
   the template's ~10px root and rendered tiny + dark-on-dark. Normalize them to
   the shared 16px body size + readable muted ink, and left-align (kills the
   inline text-align:justify rivers) so they match every other section's copy at
   390 and 1280. Size/colour/alignment only — no text change. */
body.s1 #about .section-intro p,
body.s1 #about .box-content-text-more p {
  font-size: var(--zr-body) !important;   /* 16px — beat template inherited size */
  line-height: 1.7;
  color: var(--zr-muted) !important;
  text-align: left !important;            /* beat inline text-align:justify */
}

/* Item 7 (FAQ outline too bright): the accordion boxes carry a 1px pure-white
   (#fff) / near-white (#f6f5f4) outline that glares on the console ground. Snap
   every FAQ box border to the quiet console hairline (#2c2c33). The "See all
   FAQs" pill is already flat pink (no shimmer) via .btn-widder above. */
body.s1 #faq-page .box-faq,
body.s1 #faq-page .box-content-text-faq,
body.s1 #faq-page .box-content-text-faq * {
  border-color: var(--zr-line) !important;
}

@media (hover: hover) and (pointer: fine) {
  body.s1 #megasale .btn-ghost-primary:hover { background: var(--zr-pink-deep) !important; border-color: var(--zr-pink-deep) !important; }
}

/* --- fable-design-review-polish (p3) --- */
/* =============================================================================
   FABLE DESIGN-REVIEW POLISH (p3) — final override layer, body.s1 scoped.
   zoomrecordingstudio.com/index.php ONLY. Appended last so it wins on the
   cascade over the section layers above (equal-or-higher specificity + later,
   or !important where an earlier !important must be beaten).

   SEO-safe: presentation only — NO text / heading / href / alt / JSON-LD change,
   and NO new visible copy injected via `content:` (the only `content:` touched
   here is the PRE-EXISTING hero kicker string, whose visible text is byte-
   identical — a normal hyphen is swapped for a non-breaking hyphen U+2011 so
   "On-site" cannot split mid-word; same glyph, same characters).
   ZOOM pink #FF006A only. Card radius <=16px. Motion transform/opacity only.
   ============================================================================= */

/* ---- P0-1. Two type voices: kill the last non-grotesque section headings ----
   Census found 2 headings still fighting the system-ui voice: the standalone
   "About" H2 (template Sailec Bold, in the rooms section) and the #zoom-clients
   "Professional Sound. Proven by the Industry." headline (Anton). Snap BOTH to
   the bold grotesque system-ui the hero + /pricing/ + every other section use.
   EXCEPTION: the FEATURED CLIENTS / INDUSTRY PARTNERS plate names (.zc-name,
   Playfair / Sunkis) are deliberately NOT touched. */
body.s1 section.section.text-center:has(.about-youtube-video) h2.section-title,
body.s1 #zoom-clients h2.zc-headline,
body.s1 #zoom-clients .zc-headline {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

/* ---- P1-4. One heading grammar across ALL sections = the /pricing/ style -----
   /pricing/ uses a LEFT-ALIGNED pink mono kicker + LEFT-ALIGNED bold uppercase
   grotesque heading, with NO centered underline bar. Converge every homepage
   section on that: LEFT-align the heading, and turn each centered underline /
   centered marker into a SHORT LEFT RULE (a 52px pink bar anchored at the
   heading's left edge). Heading TEXT is unchanged; no kicker text is injected
   where none exists. #zoom-clients (TRUSTED BY) already left-aligns via its own
   sheet, so it is left alone apart from the P0-1 font fix. */

/* (a) sections whose heading carries a template ::after underline bar */
body.s1 section.section.text-center:has(.about-youtube-video) h2.section-title,
body.s1 #gallery .section-title,
body.s1 #achievements .section-title,
body.s1 #megasale .section-title,
body.s1 #offer .section-title,
body.s1 #about .section-title,
body.s1 #faq-page h2 {
  text-align: left !important;
  margin-left: 0;
  margin-right: 0;
  text-wrap: balance;
}
body.s1 section.section.text-center:has(.about-youtube-video) h2.section-title::after,
body.s1 #gallery .section-title::after,
body.s1 #achievements .section-title::after,
body.s1 #megasale .section-title::after,
body.s1 #offer .section-title::after,
body.s1 #about .section-title::after,
body.s1 #faq-page h2::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
  width: 52px !important;
  height: 3px !important;
  border-radius: 2px !important;
  background: var(--zr-pink) !important;   /* snap the standalone-About bar off #ff0066 too */
}

/* (b) sections whose heading carries a centered ::before pink marker */
body.s1 #tracks .section-title,
body.s1 #studios > .container > h3 {
  text-align: left !important;
}
body.s1 #tracks .section-title::before,
body.s1 #studios > .container > h3::before {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* (c) kicker sections (#quotes "CLIENT REVIEWS", #map "FIND THE STUDIO") —
   left-align the kicker (::before on the container) + the heading. The reviews
   widget / map iframe stay centered via their own margin:auto (unaffected). */
body.s1 #quotes > .container,
body.s1 #map > .container.text-center {
  text-align: left;
}
body.s1 #quotes .section-title,
body.s1 #map > .container.text-center > h3 {
  text-align: left !important;
}

/* ---- Item 5 (owner fix, round 3): hero kicker is just "Open 24/7" ------------
   Shortened from "Two rooms · Open 24/7 · On-site parking" to a single short
   phrase. Being one short line, it can no longer wrap or collide with the fixed
   HIRING VOICEOVERS strip at 390/430 (re-verified). Same decorative CSS string —
   no markup / heading / link change. */
body.s1 .header_video .h1-wrapper::before {
  content: "Open 24/7";
  overflow-wrap: normal;
  word-break: normal;
}
/* Clearance: the bottom-anchored mobile hero stack rose too high — the kicker's
   top (~126px) tucked under the fixed HIRING banner (bottom ~154px). Drop the
   whole stack a deterministic 44px (both anchors, so the h1<->CTA gap is kept),
   putting the kicker top ~170px — clear of the banner with a ~16px gap. Verified
   at 390 + 430. */
@media (max-width: 770px) {
  body.s1 .header_video .header__title-container {
    bottom: calc(var(--zr-hero-pad-b) + 40svh - 44px) !important;
  }
  body.s1 .header_video .h1-wrapper {
    bottom: calc(var(--zr-hero-pad-b) + 40svh - 44px + 96px) !important;
  }
  /* Item 2 (owner fix, round 4): LOCAL scrim behind the headline only. With the
     mobile image lifted (brightness .66) the bulk of the backdrop behind the type
     is very dark (mean ~9:1) but a few bright room highlights sit under the glyphs.
     A soft, feathered dark wash sits ONLY behind the kicker + headline block (not
     the whole image), guaranteeing the white type clears >=4.5:1 everywhere while
     the red-lit room + red ZOOM wall around it stay visible. It paints between the
     hero image and the text (z-index:-1 inside the z-4 .h1-wrapper), left-anchored
     to hug the left-aligned type, and fades to transparent so there is no box. */
  body.s1 .header_video .h1-wrapper::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(-1 * var(--zr-space-4));
    right: 0;
    top: -0.7em;
    bottom: -0.45em;
    pointer-events: none;
    background: radial-gradient(
      130% 105% at 26% 50%,
      rgba(14, 14, 17, 0.80) 0%,
      rgba(14, 14, 17, 0.58) 38%,
      rgba(14, 14, 17, 0.22) 66%,
      rgba(14, 14, 17, 0) 84%
    );
  }
}

/* ---- P1-5. Intro lead was an orphaned ~290px / 10px card at far left ---------
   A template rule pins .tagline to max-width:~290px + font-size:10px with
   !important, so the earlier (non-!important) lead styling lost. Re-assert it
   decisively: a centered standalone statement — ~600px measure, 16-17px, 1.6
   leading, bright ink — with the existing pink tick above it (unchanged). Same
   copy. Contrast: ink #F6F5F4 on #131316 = ~16:1. */
body.s1 section.section.text-center .tagline,
body.s1 .section .col .tagline {
  display: inline-block !important;   /* centered by the parent .col text-align:center (beats template margin:0) */
  max-width: 600px !important;
  font-size: clamp(16px, 15px + 0.4vw, 17px) !important;   /* 16 -> 17px (template root is ~10px, so use px) */
  line-height: 1.6 !important;
  text-align: center !important;
  color: var(--zr-ink) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ---- P1-6. Pink pill discipline: SOLID pink is booking-only ------------------
   Non-booking actions become the outline pink pill (transparent bg, pink border,
   pink text) matching "SEE PARTNER COMPANIES". Booking CTAs (hero, BOOK NOW,
   BOOK, tariff Book Now, the gallery Book pill) keep SOLID pink. Also removes the
   heavy pink glow box-shadow on "VIEW FULL CLIENT LIST" (ghost-glow tell).
   Pink #FF006A label on console #131316 = 4.82:1 (large/bold — passes). */
body.s1 #zoom-clients .zc-btn--primary,
body.s1 #zoom-clients .zc-btn--outline,
body.s1 .btn-widder,
body.s1 #about .button-more {
  background: transparent !important;
  color: var(--zr-pink) !important;
  border: 1px solid var(--zr-pink) !important;
  box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
  body.s1 #zoom-clients .zc-btn--primary:hover,
  body.s1 #zoom-clients .zc-btn--outline:hover,
  body.s1 .btn-widder:hover,
  body.s1 #about .button-more:hover {
    background: rgba(255, 0, 106, 0.12) !important;
    color: var(--zr-pink) !important;
    border-color: var(--zr-pink) !important;
    box-shadow: none !important;
  }
}

/* ---- P1-7. Standardize vertical rhythm --------------------------------------
   One section scale for every section that reads --zr-section-y: ~64px mobile ->
   ~128px desktop (was 48->96). Redefining the token on :root re-flows all
   sections consistently. */
:root { --zr-section-y: clamp(64px, 8vw, 108px); }   /* ~64px mobile -> ~108px desktop (template root ~10px, so px not rem) */
/* OUR WORKS (#tracks): Item 3 (round 3) makes this a single stacked column at all
   widths, so the player + tracklist panels fill the measure (stretch), not center. */
@media (min-width: 820px) {
  body.s1 #tracks .sc-block { align-items: stretch; }
}

/* ---- P1-8. Service carousel card type: clamp descriptions to 2 lines ---------
   Titles already render at ~1.05rem (>=14px). Clamp the description to 2 lines so
   any overflow ellipsis lands at a line boundary (deliberate) rather than mid-
   word ("Dedi...", "the p..."). */
body.s1 #gallery .other-services .card-body .card-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- P2-12 + Item 5 (owner fix, round 4). Carousel dots -> console language ----
   Slick injects .slick-dots li > button (+ a '•' glyph in button::before) at
   runtime. The owner disliked the default white "bubbles". Restyle to the console
   vocabulary: small DIM dots, PINK for the active one, NO white bubble — while
   keeping a >=24px tap target (the li/button hit area stays 24px; the visible dot
   is a 7px pip centered inside it). */
body.s1 #gallery .slick-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 0;
  margin-top: clamp(0.75rem, 3vw, 1.25rem);
  list-style: none;
}
body.s1 #gallery .slick-dots li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
}
body.s1 #gallery .slick-dots li button {
  position: relative;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0;                          /* kill the '•' glyph sizing */
  line-height: 0;
  color: transparent;
}
/* the visible dot — a small dim pip; content:"" overrides Slick's '•' bullet */
body.s1 #gallery .slick-dots li button::before {
  content: "" !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--zr-dim);             /* dim, no bubble */
  opacity: 1 !important;
  font-size: 0 !important;               /* belt-and-braces: no glyph */
  transition: background-color 160ms var(--zr-ease-out),
              transform 160ms var(--zr-ease-out);
}
/* active dot — solid ZOOM pink */
body.s1 #gallery .slick-dots li.slick-active button::before {
  background: var(--zr-pink) !important;
  transform: translate(-50%, -50%) scale(1.15);
}
@media (hover: hover) and (pointer: fine) {
  body.s1 #gallery .slick-dots li button:hover::before {
    background: var(--zr-muted);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.s1 #gallery .slick-dots li button::before { transition: none; }
}

/* ---- P0-3 (code side). Accessibility launcher occlusion on mobile -----------
   #INDmenu-btn is injected by the a11y widget at runtime. On phones, shrink +
   pin it bottom-left so it covers less of the lower viewport. NOT hidden. (The
   GHL booking-agent bubble auto-dismiss is GHL config — out of CSS scope.) */
@media (max-width: 767px) {
  body.s1 #INDmenu-btn {
    transform: scale(0.8);
    transform-origin: left bottom;
  }
}

/* ---- Item 1 (owner fix, round 4): REVERT the display font on headings ----------
   Round 3 wrongly applied "Clash Display" to every heading; the owner wanted only
   plain-text changes. The heading application block is removed so ALL headings —
   the hero H1 + every section heading — render in the bold grotesque system-ui
   (800/900) they used before (the Fable-consolidated state). Each of those
   selectors already carries its own `font-family: system-ui … !important` rule
   earlier in this sheet, so with the Clash override gone they fall straight back
   to system-ui. The @font-face + uploaded woff2 above are LEFT in place but are
   now unreferenced (a browser never fetches an unused @font-face), so nothing
   renders in Clash Display anymore. */

/* ---- Item 8 (owner fix, round 3): mobile burger menu = console drawer ----------
   The template's mobile menu is a full-height LEFT SLIDE-IN DRAWER: the <ul>
   (.navbar-nav.menu) is position:fixed, parked at left:-100vw when closed and
   slid to left:0 when the burger opens it (full viewport height). We keep that
   geometry 100% untouched — position / left / right / width / top / height are
   the open-close animation and MUST NOT be overridden (doing so pins the drawer
   on-screen permanently). We restyle only the SURFACE + the tab rows into the
   console language: a console-dark ground (not the flat black the owner disliked),
   no white outline, and a clean left-aligned single-column tab list with hairline
   dividers + pink active/press accents. Presentation only — no markup / link /
   text change. Scoped to the collapsed breakpoint (<=767px). */
@media (max-width: 767px) {
  /* drawer SURFACE only — no geometry props here */
  body.s1 #navbar-collapse .navbar-nav.menu {
    background: var(--zr-console) !important;   /* was flat black */
    border: 0 !important;                        /* kill the white outline */
    box-shadow: none !important;
    padding: 10px 12px !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;                /* single column, never wrap */
  }
  /* remove any stray outline on the collapse container / nav */
  body.s1 #navbar-collapse,
  body.s1 .header .navbar-expand-md .navbar-collapse { border: 0 !important; }

  /* each tab = a full-width row with a hairline divider */
  body.s1 #navbar-collapse .navbar-nav .nav-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    border: 0 !important;
    border-bottom: 1px solid var(--zr-line) !important;
  }
  body.s1 #navbar-collapse .navbar-nav .nav-item:last-child {
    border-bottom: 0 !important;
  }

  body.s1 #navbar-collapse .navbar-nav .nav-link {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    min-height: 52px;
    padding: 14px 12px !important;
    text-align: left !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--zr-ink) !important;
  }
  body.s1 #navbar-collapse .navbar-nav .nav-link.active,
  body.s1 #navbar-collapse .navbar-nav .nav-item:active .nav-link {
    color: var(--zr-pink) !important;
  }

  /* dropdown caret marks: park them at the row's right edge (were left:85% top:20px) */
  body.s1 #navbar-collapse .dropdown-mark {
    position: absolute !important;
    top: 50% !important;
    left: auto !important;
    right: 16px !important;
    transform: translateY(-50%) !important;
    color: var(--zr-dim) !important;
  }
  /* if the template reveals a mobile sub-dropdown, give it the console surface
     instead of the light plate (parent link still navigates when tapped) */
  body.s1 #navbar-collapse .dropdown-content {
    background: var(--zr-console-2) !important;
    border: 1px solid var(--zr-line) !important;
    border-radius: 10px;
  }
  body.s1 #navbar-collapse .dropdown-content li a {
    color: var(--zr-muted) !important;
  }
}

/* =============================================================================
   ROUND 5 — owner fixes (2026-07-17): carousel desktop scroll + booking toggle
   ============================================================================= */

/* ---- Item 6: OUR SERVICES — native horizontal scroll on desktop --------------
   The services strip is a Slick carousel (17 slides). The prior round proved you
   MUST NOT change display/width/flex on the slides/track (they collapse into a
   ~76k-px vertical stack). This turns it into a real desktop scroller WITHOUT
   touching any of that: only the .slick-list gets overflow-x:auto and the track's
   Slick transform is neutralised, so the existing floated, inline-width slides
   simply become a scrollable row. Native trackpad / drag / scrollbar all work.
   (zoom_refresh.js nudges the initial scrollLeft past any leading Slick clones.) */
@media (min-width: 992px) {
  body.s1 #gallery .other-services .slick-list {
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    padding-bottom: 12px;                 /* clearance for the scrollbar */
  }
  body.s1 #gallery .other-services .slick-list:active { cursor: grabbing; }
  body.s1 #gallery .other-services .slick-track {
    transform: none !important;           /* let native scroll own the offset */
  }
  body.s1 #gallery .other-services .slick-slide { scroll-snap-align: start; }
  /* thin console scrollbar */
  body.s1 #gallery .other-services .slick-list::-webkit-scrollbar { height: 8px; }
  body.s1 #gallery .other-services .slick-list::-webkit-scrollbar-track {
    background: transparent;
  }
  body.s1 #gallery .other-services .slick-list::-webkit-scrollbar-thumb {
    background: var(--zr-line);
    border-radius: 4px;
  }
  body.s1 #gallery .other-services .slick-list:hover::-webkit-scrollbar-thumb {
    background: var(--zr-pink);
  }
  /* Slick arrows no longer drive the strip (native scroll does) — hide them so
     they don't read as broken. */
  body.s1 #gallery .other-services .slick-arrow { display: none !important; }
}

/* ---- Item 3: booking manual / instant toggle (like MIX) ----------------------
   Markup added in #offer (index.php) reuses the SHARED template.js .jsBookBtn
   toggle (already loaded on this site): two buttons flip .active + show the
   matching #jsBookBlock_*. MANUAL = the existing GHL form; INSTANT = a console
   panel that hands off to the live StudioLink self-serve page (recstudiolink.com
   /zoom). Console styling; no template pink. */
body.s1 #offer .zr-book-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  margin: 0 auto clamp(1.5rem, 4vw, 2.25rem);
  background: var(--zr-console);
  border: 1px solid var(--zr-line);
  border-radius: var(--zr-radius-pill);
}
body.s1 #offer .zr-book-toggle .jsBookBtn {
  appearance: none;
  border: 0;
  margin: 0 !important;
  padding: 11px clamp(16px, 4vw, 26px);
  border-radius: var(--zr-radius-pill);
  background: transparent;
  color: var(--zr-dim);
  font: 700 clamp(12px, 1.1vw, 14px)/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms var(--zr-ease-out), background-color 160ms var(--zr-ease-out);
}
body.s1 #offer .zr-book-toggle .jsBookBtn:hover { color: var(--zr-ink); }
body.s1 #offer .zr-book-toggle .jsBookBtn.active {
  background: var(--zr-pink);
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(255, 0, 106, 0.55);
}
body.s1 #offer .jsBookBlocks { display: none; }
body.s1 #offer #jsBookBlock_BOOK { display: block; }   /* manual shown by default */
/* INSTANT panel — console card that sends the visitor to StudioLink self-serve */
body.s1 #offer .zr-instant-panel {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 2.75rem);
  background: var(--zr-console);
  border: 1px solid var(--zr-line);
  border-radius: var(--zr-radius);
  text-align: center;
}
body.s1 #offer .zr-instant-panel p {
  color: var(--zr-dim);
  font: 400 var(--zr-body)/1.6 system-ui, sans-serif;
  margin: 0 auto 1.5rem;
  max-width: 44ch;
}
body.s1 #offer .zr-instant-panel .zr-instant-go {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 15px 30px;
  border-radius: var(--zr-radius-pill);
  background: var(--zr-pink);
  color: #fff;
  font: 800 clamp(14px, 1.3vw, 16px)/1 system-ui, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 14px 34px -14px rgba(255, 0, 106, 0.6);
  transition: transform 160ms var(--zr-ease-out);
}
body.s1 #offer .zr-instant-panel .zr-instant-go:hover { transform: translateY(-2px); }
body.s1 #offer .zr-instant-panel .zr-instant-go:active { transform: scale(0.97); }

/* ---- Item 5: "You May Also Like" card photos --------------------------------
   The two cross-brand cards render from an iblock (their <img> src lives in the
   Bitrix DB, not editable from index.php). Swap the visible photo per the owner's
   picks via a CSS background on the card link, and fade the original <img> to
   transparent so its alt text stays in the DOM (SEO-neutral). Targeted by each
   card's brand href. UNION = BLK Maze; MIX = The Mixdown Room. */
body.s1 #studios .studio-item .img-link[href*="unionrecstudios"] {
  background: url('/local/templates/union/assets/images/s1/refresh/zoom-similar-union.jpg') center / cover no-repeat !important;
}
body.s1 #studios .studio-item .img-link[href*="mixrecordingstudio"] {
  background: url('/local/templates/union/assets/images/s1/refresh/zoom-similar-mix.jpg') center / cover no-repeat !important;
}
body.s1 #studios .studio-item .img-link[href*="unionrecstudios"] .card-img-top,
body.s1 #studios .studio-item .img-link[href*="mixrecordingstudio"] .card-img-top {
  opacity: 0;   /* hide the iblock photo, keep alt in the DOM */
}

/* =============================================================================
   ROUND 6 — owner fixes (2026-07-17): video spacing + vlog card photo
   ============================================================================= */

/* ---- Item 5: breathing room above + below the studio-tour video -------------- */
body.s1 section.section.text-center:has(.about-youtube-video) .about-youtube-video {
  margin-top: clamp(1.5rem, 5vw, 3rem);
  margin-bottom: clamp(2rem, 6vw, 4rem);
}

/* ---- Item 2: OUR SERVICES "Studio Vlog" card photo --------------------------
   Same technique as the "You May Also Like" cards — swap the carousel card's
   visible photo via a CSS background on the card link and fade the iblock <img>
   so its alt stays in the DOM (SEO-neutral). Targeted by the card's service href. */
body.s1 #gallery .other-services .card .img-link[href*="studio-vlog"] {
  background: url('/local/templates/union/assets/images/s1/refresh/zoom-vlog.jpg') center / cover no-repeat !important;
}
body.s1 #gallery .other-services .card .img-link[href*="studio-vlog"] .card-img-top {
  opacity: 0;
}

/* End */


/* Start:/local/templates/.default/components/bitrix/news.list/achievements_first/style.css?16674956632813*/
.section-achievements-first-line {
    /*margin-top: 50px;*/
}

.achievements-first-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /*align-items: flex-start;*/
    align-items: stretch;
}

.item-achievements-first-text-line {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.item-achievements-first-line {
    display: flex;
    flex-wrap: initial;
    padding: 20px 10px 20px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
    width: 100%;
}

.second-number-achievements-line-first {
    font-family: 'Sailec Light', Arial, sans-serif;
    font-size: 20px;
    /* font-weight: bold; */
    text-align: left;
    margin-top: auto;
    margin-bottom: auto;
    text-transform: uppercase;
}

.s1 .section-achievements-first-line {
    background: #ff0066;
}

.s1 .second-number-achievements-line-first {
    color: black;
}

.s2 .section-achievements-first-line {
    background: #F3C426;
}

.s2 .second-number-achievements-line-first {
    color: black;
}

.s4 .section-achievements-first-line {
    background: #6e289a;
}

.s4 .second-number-achievements-line-first {
    color: white;
}

.item-achievements-ico {
    margin-left: 10px;
    margin-right: 10px;
    width: 36px;
    /*width: 50%;*/
    transform: translate(0px, 0px) rotate(0deg);
}

@media (max-width: 1250px) {
    .achievements-first-items {
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .item-achievements-first-line {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.3333333333%;
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%;
        width: 100%;
    }
}

@media (max-width: 720px) {
    .item-achievements-first-line {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50.0%;
        flex: 0 0 50.0%;
        max-width: 50.0%;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .achievements-first-hide {
        display: none;
    }

    .achievements-first-items {
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .section-achievements-first-line {
        margin-left: 20px;
        margin-right: 20px;
        border-radius: 20px;
    }

    .item-achievements-first-text-line {
        flex-direction: column;
    }

    .item-achievements-first-line {
        flex-basis: 50%;
        justify-content: center;
    }

    .second-number-achievements-line-first {
        font-size: 14px;
    }

    .item-achievements-first-text {
        line-height: 1.2;
    }

    .item-achievements-ico {
        width: 68px;
    }
}
/* End */


/* Start:/local/templates/.default/components/bitrix/news.list/zoom_rental/style.css?16882082943095*/
.studio-rental-title {
    text-transform: uppercase;
    text-align: center;
    font-weight: 800;
    font-size: 52px;
    position: relative;
    color: white;
    background: red;
    border-radius: 20px;
    margin-bottom: 50px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: max-content;
    padding-left: 18px;
    padding-right: 18px;
    /*transform: scale(1, 4);*/
}

.new-price {
    margin-bottom: 10px;
    border-bottom: unset !important;
    line-height: 0.7;
    /*margin-bottom: 20px;*/
    /*margin-top: 20px;*/
}

.old-price {
    width: auto !important;
}

.old-price:before {
    content: "";
    border-bottom: 3px solid white;
    position: absolute;
    width: 110%;
    height: 56%;
    transform: rotate(337deg);
    left: -10px;
}

.studio-rental-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    min-height: 65px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    /*border-bottom: 1px solid #F2F2F2;*/
    margin-bottom: 10px;
}

.studio-rental-item {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    position: relative;
    line-height: 1.5;
}

.studio-rental-item-right {
    /*align-items: flex-end;*/
}

.studio-rental-price {
    font-weight: 900 !important;
}

.studio-rental-price-old:before {
    content: "";
    border-bottom: 2px solid white;
    position: absolute;
    width: 110%;
    height: 12%;
    transform: rotate(337deg);
    left: -5px;
}

.studio-rental-text {
    font-weight: 200;
}

.include-item {
    border-bottom: unset !important;
}

.studio-rental-line {
    display: block;
    width: 100%;
    border-bottom: 2px solid #ffffff;
    margin-bottom: 10px;
    margin-top: 10px;
}

.studio-rental-line-color {
    border-bottom: 2px solid #020001;
}

.studio-rental-center {
    width: 100%;
}

.studio-rental-center-one {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
    margin: 25px 30px 25px 30px !important;
}

.studio-rental-center-two {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 27%;
    flex: 0 0 27%;
    max-width: 27%;
    margin: 25px 30px 25px 30px !important;
}

@media screen and ( max-width: 480px ) {
    .studio-rental-title {
        font-size: 36px;
    }

    .studio-rental-img {
        display: none;
    }

    .studio-rental-center {
        width: unset;
    }

    .studio-rental-text {
        font-size: 14px;
    }

    .studio-rental-center-one {
        -webkit-box-flex: unset;
        -webkit-flex: unset;
        flex: unset;
        max-width: unset;
        margin: unset;
    }

    .studio-rental-center-two {
        -webkit-box-flex: unset;
        -webkit-flex: unset;
        flex: unset;
        max-width: unset;
        margin: unset;
    }
}
/* End */


/* Start:/local/components/anahata/feedback/templates/zoom/style.css?169426618169*/
[name="engineer_select"]:focus .disable-selected {
	display: none;
}

/* End */
/* /local/templates/union/assets/css/zoom_index.css?17394240096352 */
/* /local/templates/union/assets/css/zoom_index_refresh_full.css?1784342912131788 */
/* /local/templates/.default/components/bitrix/news.list/achievements_first/style.css?16674956632813 */
/* /local/templates/.default/components/bitrix/news.list/zoom_rental/style.css?16882082943095 */
/* /local/components/anahata/feedback/templates/zoom/style.css?169426618169 */