/* Sound Leisure — shared stylesheet
   Desktop values match the 1440px Claude Design mockup; below that,
   type scales fluidly and layouts collapse at 1200 / 960 / 640px. */

:root {
  --cream: #FBFAF7;
  --cream-2: #F2F0EB;
  --white: #FFFFFF;
  --ink: #16130F;
  --ink-2: #211D18;
  --body: #514c42;
  --muted: #7D756A;
  --line: rgba(22, 19, 15, .15);
  --line-soft: rgba(22, 19, 15, .12);
  --field: rgba(22, 19, 15, .2);

  /* iO palette (Back of House) */
  --io-blue: #2556E6;
  --io-coral: #FF6C63;
  --io-coral-text: #C2372E;
  --io-yellow: #FFD949;

  /* Route accents */
  --brick: #B5342A;  --brick-dark: #2A1512;  --rose: #E8A49C;
  --plum: #5B2D5B;   --plum-dark: #2A152A;   --plum-tint: #F0E9F1; --plum-light: #D9A8D9;
  --teal: #1F5D52;   --teal-tint: #E4EDE8;   --teal-light: #7FC0AF;
  --brass: #8A5A12;  --brass-dark: #241C10;  --brass-tint: #F2EADB; --brass-light: #E0BC7E;

  --accent: var(--ink);
  --accent-ink: var(--cream);

  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;

  --gutter: 56px;
  --section-y: 86px;
  --max: 1440px;
}

/* Page themes — set on <body> */
.theme-home     { --accent: var(--ink);    --accent-ink: var(--cream); --nav-active: var(--ink);  --glow: #E9B770;}
.theme-io       { --accent: var(--io-blue); --accent-ink: #fff;       --nav-active: var(--io-blue);  --glow: #2556E6;}
.theme-jukebox  { --accent: var(--brick);  --accent-ink: var(--cream); --nav-active: var(--brick);  --glow: #E8A49C;}
.theme-audio    { --accent: var(--teal);   --accent-ink: var(--cream); --nav-active: var(--teal);  --glow: #7FC0AF;}
.theme-karaoke  { --accent: var(--plum);   --accent-ink: var(--cream); --nav-active: var(--plum);  --glow: #D9A8D9;}
.theme-curation { --accent: var(--brass);  --accent-ink: var(--cream); --nav-active: var(--brass);  --glow: #E0BC7E;}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dark :focus-visible, .on-accent :focus-visible { outline-color: currentColor; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { top: 12px; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section-flush-top { padding-top: 0; }
.bg-cream-2 { background: var(--cream-2); }
.bg-white { background: #fff; }
.dark { background: var(--ink); color: var(--cream); }

.stack { display: flex; flex-direction: column; gap: var(--gap, 18px); }
.center { align-items: center; text-align: center; }
.center > * { margin-inline: auto; }

/* Two-column split: text column flexes, media column has a fixed desktop basis (--w). */
.split { display: flex; gap: var(--split-gap, 64px); align-items: var(--split-align, center); }
.split > .split-main { flex: 1; min-width: 0; }
.split > .split-side { flex: 0 0 var(--w, 560px); min-width: 0; }
.split-top { --split-align: flex-start; }

.grid { display: grid; gap: var(--gap, 20px); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.grid-start { align-items: start; }
.cols-2 { --cols: 2; } .cols-4 { --cols: 4; } .cols-5 { --cols: 5; }

/* ---------- Type ---------- */
.display {
  --fs: 52;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(calc(var(--fs) * .4px + 12px), calc(var(--fs) * .0694vw), calc(var(--fs) * 1px));
  line-height: var(--lh, .98);
  letter-spacing: var(--ls, -.03em);
  text-wrap: balance;
}
.display-tight { --ls: -.035em; }
.title {
  --fs: 28;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(calc(var(--fs) * .7px + 4px), calc(var(--fs) * .0694vw), calc(var(--fs) * 1px));
  line-height: 1.15;
  letter-spacing: -.02em;
}
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.4;
  color: var(--eyebrow, var(--accent));
}
.center .eyebrow { justify-content: center; }
.eyebrow .rule { width: 26px; height: 1.5px; background: currentColor; flex: none; }
.eyebrow img { width: 20px; height: 20px; border-radius: 5px; flex: none; }
.label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.label-sm { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.lede { font-size: 17px; line-height: 1.55; color: var(--body); }
.copy { font-size: 16px; line-height: 1.55; color: var(--body); }
.copy-lg { font-size: 16.5px; line-height: 1.55; color: var(--body); }
.small { font-size: 14.5px; line-height: 1.55; color: var(--body); }
.fine { font-size: 13.5px; line-height: 1.5; color: var(--body); }
.strong { font-weight: 600; color: var(--ink); }
.subhead { font-weight: 600; font-size: 17px; color: var(--ink); }
.measure { max-width: var(--mw, 520px); }

.dark .lede, .dark .copy, .dark .copy-lg, .dark .small, .dark .fine { color: rgba(247, 242, 232, .72); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; padding: 14px 26px;
  font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center;
  border: 1.5px solid transparent;
  background: var(--accent); color: var(--accent-ink);
  cursor: pointer; transition: transform .15s ease, filter .15s ease, background-color .15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-md { padding: 12px 20px; font-size: 13px; letter-spacing: .04em; }
.btn-lg { padding: 15px 30px; font-size: 15.5px; }
.btn-xl { padding: 16px 32px; font-size: 15.5px; }
.btn-caps { letter-spacing: .04em; font-size: 14.5px; }
.btn-ink { background: var(--ink); color: var(--cream); }
.btn-cream { background: var(--cream); color: var(--ink); }
.btn-white { background: #fff; color: var(--io-blue); }
.btn-blue { background: var(--io-blue); color: #fff; }
.btn-yellow { background: var(--io-yellow); color: var(--ink); }
.btn-coral { background: var(--io-coral); color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); border-color: rgba(22, 19, 15, .25); }
.btn-outline:hover { filter: none; background: rgba(22, 19, 15, .05); }
.btn-self { align-self: flex-start; }

.text-link {
  font-weight: 600; font-size: 15.5px;
  border-bottom: 1.5px solid rgba(247, 242, 232, .45);
  padding-bottom: 1px;
}
.text-link.on-light { border-color: rgba(22, 19, 15, .35); }
.text-link.on-blue { border-color: rgba(255, 255, 255, .5); font-size: 15px; }
.text-link:hover { border-color: currentColor; }
.arrow-link { font-size: 14.5px; font-weight: 600; }
.arrow-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.center .actions { justify-content: center; }
.actions-tight { gap: 12px; }

/* ---------- Media ---------- */
.media {
  position: relative; overflow: hidden;
  border-radius: var(--r, 22px);
  height: var(--h, 400px);
  background: var(--cream-2);
}
.media > img { width: 100%; height: 100%; object-fit: cover; }
.media.contain > img { object-fit: contain; }
.media-hero { --r: 24px 24px 0 0; width: 100%; }

/* Glass frame around hero images */
.hero .media-hero {
  overflow: visible; background: none; isolation: isolate;
  /* Promotes the glow + glass + image as one stable GPU layer so their live
     filters don't get torn down and rebuilt on scroll, which reads as a
     brief flicker of the image. */
  transform: translateZ(0);
  will-change: transform;
}
.hero .media-hero::before {            /* soft accent glow behind the glass */
  content: ""; position: absolute; z-index: -2; inset: -70px -3% 0;
  background:
    radial-gradient(40% 60% at 22% 55%, var(--glow, #E0BC7E), transparent 70%),
    radial-gradient(40% 60% at 78% 45%, var(--glow, #E0BC7E), transparent 70%);
  opacity: .75; filter: blur(34px); pointer-events: none;
  transform: translateZ(0);
}
.hero .media-hero .glass {
  position: relative; height: 100%; padding: 10px 10px 0;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .14));
  border: 1px solid rgba(255, 255, 255, .8); border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 -6px 40px rgba(22, 19, 15, .10);
  transform: translateZ(0);
  will-change: transform;
}
.hero .media-hero .glass img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px 16px 0 0; }
.hero-dark .media-hero::before { opacity: .45; }
.hero-dark .media-hero .glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .06));
  border-color: rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 -6px 40px rgba(0, 0, 0, .25);
}
.media-fill { height: 100%; }
.r-16 { --r: 16px; } .r-18 { --r: 18px; } .r-20 { --r: 20px; }

/* ---------- Site header ---------- */
/* Header bar: sticks to the top of the viewport and follows the reader on scroll. */
:root { --hdr-top: 14px; --hdr-h: 64px; --hdr-space: calc(var(--hdr-top) + var(--hdr-h) + 12px); }
.site-header {
  position: sticky; top: 0; z-index: 40;
  padding-top: var(--hdr-top);
  /* Cancels this element's own flow height so it still floats over the hero
     at rest (same as the old position:absolute look), while position:sticky
     makes it track the viewport once the page scrolls past it. */
  margin-bottom: calc(-1 * (var(--hdr-top) + var(--hdr-h)));
  pointer-events: none;
}
.site-header .wrap { pointer-events: auto; }
.header-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  height: var(--hdr-h); padding: 0 12px 0 20px;
  /* Pinned to its own GPU layer so the live blur doesn't get torn down and
     rebuilt on scroll, which would otherwise read as a flicker. */
  transform: translateZ(0);
  will-change: transform;
}
/* The glass (and its shadow) is one pseudo-element behind the bar. It is the same
   shape the whole time: on hover it simply grows taller to hold the dropdown, so
   the corners are always the same 16px radius and never toggle. The blur sits here
   (not on the bar) so nothing nested blocks it. */
.header-bar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 100%; z-index: -1;
  border-radius: 16px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 2px rgba(22, 19, 15, .06), 0 8px 28px rgba(22, 19, 15, .10);
  transition: height .34s cubic-bezier(.3, .1, .2, 1);
}
.site-header .btn { border-radius: 10px; }
.site-header .btn-outline { background: #fff; border-color: rgba(22, 19, 15, .16); }
.site-header .btn-outline:hover { background: var(--cream); }
main > .hero:first-child { padding-top: calc(var(--hdr-space) + var(--hero-pt, 72px)); }
.brand { display: block; flex: none; }
.brand img { height: 30px; width: auto; }
.footer-logo { display: block; flex: none; margin-right: auto; }
.footer-logo img { height: 44px; width: auto; border-radius: 8px; }
.header-left { display: contents; }
.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.main-nav > ul { display: flex; gap: 26px; }
.main-nav a, .main-nav .nav-top { font-size: 14.5px; font-weight: 500; color: var(--body); white-space: nowrap; }
.main-nav a:hover { color: var(--ink); }
.main-nav [aria-current="true"], .main-nav [aria-current="page"] { color: var(--nav-active); font-weight: 600; }
.header-bar { position: relative; }
.nav-item > a { display: flex; align-items: center; height: var(--hdr-h); }
/* Full-width panel that grows out of the bar. The glass is one shared element
   (the bar's ::before), so moving between items only crossfades the text: the panel never
   restarts its animation. */
.header-bar { --panel-h: 190px; }
.nav-sub {
  position: absolute; left: 0; right: 0; top: 100%; height: var(--panel-h);
  opacity: 0; visibility: hidden;
  transition: opacity .16s ease, visibility 0s linear .16s;
}
.nav-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding: 8px 20px 0; }
.nav-panel-title { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -.01em; color: var(--ink); }
.nav-panel-intro { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.nav-panel-intro p:not(.nav-panel-title) { font-size: 14px; line-height: 1.5; color: var(--body); white-space: normal; max-width: 300px; }
.main-nav .nav-panel-cta { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.main-nav .nav-panel-cta:hover { text-decoration: underline; }
.nav-panel ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
.nav-sub li a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border-radius: 12px; color: var(--ink); white-space: normal; }
.nav-sub li a strong { font-size: 16px; font-weight: 600; }
.nav-sub li a span { font-size: 13.5px; font-weight: 400; line-height: 1.45; color: var(--body); }
.nav-sub li a:hover { background: rgba(22, 19, 15, .05); }
.nav-sub li a[aria-current="page"] strong { color: var(--nav-active); }
.nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub {
  opacity: 1; visibility: visible; transition: opacity .22s ease .12s, visibility 0s;
}
@media (min-width: 961px) {
  /* No gap between items, so the pointer never leaves the nav while crossing them */
  .main-nav > ul { gap: 0; }
  .nav-item { padding-inline: var(--nav-pad, 13px); }
  .header-bar:has(.nav-item:hover .nav-sub)::before, .header-bar:has(.nav-item:focus-within .nav-sub)::before {
    height: calc(100% + var(--panel-h));
  }
}

.main-nav .nav-cta { display: none; }
.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid rgba(22, 19, 15, .16);
  background: transparent; align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .2s ease;
}
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after { top: 6px; }
.nav-open .nav-toggle .bars { background: transparent; }
.nav-open .nav-toggle .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle .bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero .stack { --gap: 20px; }
.hero-dark { color: var(--cream); }
.hero-dark .lede, .hero-dark .copy { color: rgba(247, 242, 232, .76); }
.hero .media-hero { margin-top: 44px; }
.hero-stat { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.hero-stat strong { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: -.03em; }
.hero-stat span { font-size: 13.5px; line-height: 1.45; color: var(--body); }
.hero-note { font-size: 13.5px; color: rgba(247, 242, 232, .55); margin-top: 6px; }

.float-mark { position: absolute; pointer-events: none; }

/* Homepage: music icons floating around the hero heading.
   .mf is eased away from the cursor by JS (--mx/--my); .mf-tile bobs on its own. */
.hero > .wrap { position: relative; z-index: 1; }
.music-float { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mf {
  position: absolute; width: var(--s); height: var(--s);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) rotate(var(--r));
  filter: blur(var(--blur, 0px)); opacity: var(--o, 1);
}
.mf-tile {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 28%; color: var(--c);
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .6));
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 10px 30px rgba(22, 19, 15, .10), 0 2px 6px rgba(22, 19, 15, .06), inset 0 1px 0 #fff;
  animation: mf-bob 6s ease-in-out infinite; animation-delay: var(--delay, 0s);
}
.mf-tile svg { width: 52%; height: 52%; }
@keyframes mf-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

/* ---------- Section heads ---------- */
.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: var(--head-mb, 40px); }
.section-head.center { align-items: center; text-align: center; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.section-head-row > .stack { --gap: 16px; max-width: 620px; }

/* ---------- Trusted-by logo strip ---------- */
.trust-panel {
  border-radius: 24px; border: 1px solid rgba(247, 242, 232, .14);
  background-color: var(--ink);
  background-image: radial-gradient(rgba(247, 242, 232, .16) 1px, transparent 1px);
  background-size: 18px 18px;
  padding: 34px 0;
}
.trust-label { text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: rgba(247, 242, 232, .6); margin-bottom: 28px; }
.trust-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.trust-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: trust-scroll 26s linear infinite; }
.trust-logo {
  font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: .01em;
  color: rgba(247, 242, 232, .5); white-space: nowrap; flex: none;
}
@keyframes trust-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Cards ---------- */
.card {
  border-radius: var(--r, 20px); background: #fff; overflow: hidden;
  display: flex; flex-direction: column;
}
.card-body { padding: var(--pad, 28px); display: flex; flex-direction: column; gap: var(--gap, 12px); flex: 1; }
.card .media { --r: 0; flex: none; }
.card-dark { background: var(--ink-2); color: var(--cream); }
.card-dark .small { color: rgba(247, 242, 232, .68); }
.card-blue { background: var(--io-blue); color: #fff; }
.card-blue .small, .card-blue .fine { color: rgba(255, 255, 255, .88); }
.card-coral { background: var(--io-coral); color: var(--ink); }
.card-yellow { background: var(--io-yellow); color: var(--ink); }
.card-coral .small, .card-yellow .small, .card-coral .copy, .card-yellow .copy { color: var(--ink); }
.card-accent { background: var(--accent); color: var(--cream); }
.card-accent .copy, .card-accent .small { color: rgba(247, 242, 232, .88); }
.card-cream { background: var(--cream-2); }
.card-tint { background: var(--tint, var(--cream-2)); }

.pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  border-radius: 999px; padding: 8px 15px; font-size: 13.5px; font-weight: 600; line-height: 1.35;
}
.pill-xs { padding: 5px 12px; font-size: 11px; letter-spacing: .1em; }
.pill-soft { font-weight: 400; background: rgba(255, 255, 255, .16); }

.tile { background: #fff; border-radius: 12px; padding: 14px 16px; font-size: 14.5px; line-height: 1.45; }
.tile-lg { border-radius: 14px; padding: 20px 24px; font-size: 15px; line-height: 1.5; }

/* Ruled list: items with a top hairline, one or two columns */
.ruled { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 9px 20px; }
.ruled li { font-size: var(--fs-item, 14.5px); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 9px; }
.ruled-2 { --cols: 2; }
.ruled-lg { --fs-item: 15px; }
.dark .ruled li { border-color: rgba(247, 242, 232, .18); }

/* Dash list */
.dash-list { display: flex; flex-direction: column; gap: 11px; }
.dash-list li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; }
.dash-list li::before { content: "—"; color: var(--accent); font-weight: 700; flex: none; }

/* Numbered list (01, 02…) */
.num-list { display: flex; flex-direction: column; gap: 12px; counter-reset: n; }
.num-list li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; counter-increment: n; }
.num-list li::before { content: counter(n, decimal-leading-zero); color: var(--accent); font-weight: 700; flex: none; }

/* Process steps */
.steps { display: grid; gap: 16px; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); }
.step { border-top: 2px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.step:first-child { border-color: var(--accent); }
.step-num { font-family: var(--font-display); font-weight: 800; font-size: var(--num, 34px); line-height: 1; letter-spacing: -.03em; color: var(--muted); }
.step:first-child .step-num { color: var(--accent); }
.step h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--step-title, 19px); line-height: 1.2; }
.step p { font-size: 14px; line-height: 1.5; color: var(--body); }
.steps-lg { --cols: 4; gap: 18px; --num: 40px; --step-title: 22px; }
.steps-lg .step { padding-top: 20px; gap: 10px; }
.steps-lg .step p { font-size: 14.5px; line-height: 1.55; }

/* iO cross-link badge */
.io-badge {
  display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
  background: var(--io-blue); color: #fff; border-radius: 14px; padding: 16px 20px;
  font-size: 14.5px; font-weight: 500; line-height: 1.35; margin-top: 8px;
  transition: filter .15s ease;
}
.io-badge:hover { filter: brightness(1.08); }
.io-badge img { width: 24px; height: 24px; border-radius: 5px; flex: none; }

/* Stats */
.stat { background: var(--cream-2); border-radius: 16px; padding: 20px; }
.stat strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1.1; letter-spacing: -.02em; }
.stat span { display: block; font-size: 13.5px; color: var(--body); margin-top: 4px; }

/* ---------- Forms ---------- */
.form-card { border-radius: 22px; background: #fff; padding: 36px; display: flex; flex-direction: column; gap: 24px; }
.form-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: var(--gap, 18px); }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .field > .field-label, fieldset > legend { font-size: 13px; font-weight: 600; color: var(--body); line-height: 1.4; }
.input {
  width: 100%; height: var(--ih, 49px); border: 1.5px solid var(--field); border-radius: 10px;
  padding: 0 14px; font-size: 14.5px; background: #fff; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.input { height: var(--th, 141px); padding: 14px; line-height: 1.5; resize: vertical; }
.input::placeholder { color: rgba(22, 19, 15, .35); opacity: 1; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.input[aria-invalid="true"] { border-color: #C2372E; }
.form-compact { --ih: 47px; }
.form-compact .input { padding-inline: 13px; font-size: 14px; }
.form-compact textarea.input { padding: 13px; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset > legend { padding: 0; margin-bottom: var(--legend-gap, 10px); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-block; border: 1.5px solid var(--field); border-radius: 999px;
  padding: 9px 16px; font-size: 13.5px; line-height: 1.35; cursor: pointer; background: #fff;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover span { border-color: rgba(22, 19, 15, .4); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.fieldset-row { display: flex; flex-wrap: wrap; gap: 18px 28px; }
.fieldset-row > fieldset:last-child { flex: 1 1 260px; }
.form-section { display: flex; flex-direction: column; gap: 14px; }
.form-section + .form-section { padding-top: 6px; border-top: 1px solid rgba(22, 19, 15, .1); }
.form-error { font-size: 13.5px; color: #C2372E; }
.form-success {
  border-radius: 16px; background: var(--cream-2); padding: 22px 24px;
  display: flex; flex-direction: column; gap: 7px;
}
.form-success .label-sm { color: var(--accent); }
.form-success p { font-size: 15px; line-height: 1.55; }
.form-body { display: flex; flex-direction: column; gap: var(--form-gap, 24px); }
.form-card[data-sent] .form-body { display: none; }
[hidden] { display: none !important; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- CTA band + footer ---------- */
.cta-band { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.cta-band .stack { --gap: 18px; }
.cta-band .copy-lg, .cta-band .lede { color: rgba(247, 242, 232, .74); }
/* One footer on every page, always on ink, after the page's closing band */
.site-footer { background: var(--ink); color: rgba(247, 242, 232, .6); font-size: 13.5px; border-top: 1px solid rgba(247, 242, 232, .1); }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 26px; padding-block: 40px 30px; }
.site-footer ul, .site-footer .footer-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.site-footer a:hover { color: var(--cream); }

/* ---------- Page-specific pieces ---------- */
/* Homepage: route cards */
.route-card .media { --h: 200px; }
.route-card .card-body { gap: 12px; }
.route-card .route-cta { margin-top: auto; padding-top: 20px; }
/* Route cards react on hover: the whole card is the link (stretched from the CTA) */
.route-card { position: relative; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, opacity .3s ease; }
.route-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0); transition: box-shadow .35s ease;
}
.route-card .route-cta a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 20px; }
.route-card .media img { transform: scale(1.01); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }   /* 1% overscan: stops a thin line showing at the edge while the zoom settles */
.route-card .arrow { display: inline-block; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.route-card:hover, .route-card:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .45), 0 6px 14px rgba(0, 0, 0, .25);
}
.route-card:hover::after, .route-card:focus-within::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.route-card:hover .media img, .route-card:focus-within .media img { transform: scale(1.07); }
.route-card:hover .arrow, .route-card:focus-within .arrow { transform: translateX(5px); }
.route-card:hover .arrow-link { text-decoration: underline; text-underline-offset: 3px; }
.route-card.card-blue:hover .btn-white, .route-card.card-blue:focus-within .btn-white { background: var(--io-yellow); color: var(--ink); }
.route-card .route-cta a:focus-visible { outline: none; }
.route-card .btn:hover, .route-card .btn:active { filter: none; transform: none; }
.route-card:has(a:focus-visible) { outline: 2px solid var(--io-yellow); outline-offset: 4px; }
@media (hover: hover) {
  .route-grid:hover .route-card:not(:hover) { opacity: .72; }
}
.route-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.io-tag { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .18); border-radius: 999px; padding: 5px 11px; }
.io-tag img { width: 15px; height: 15px; border-radius: 3px; }
.io-tag span { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: #fff; }

.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px; gap: 14px; }
.mosaic .media { height: auto; --r: 20px; }
.mosaic .span-rows { grid-row: span 2; }

.io-band { background: var(--io-blue); color: #fff; }
.io-band .copy-lg { color: rgba(255, 255, 255, .88); }
.io-band .eyebrow { --eyebrow: rgba(255, 255, 255, .75); }
.io-band .eyebrow img { width: 34px; height: 34px; border-radius: 7px; }
.io-benefits { margin-top: 52px; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, .22); }
.io-benefits h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; }
.io-benefits p { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .82); }

/* iO playlists: two rows of covers auto-scrolling in opposite directions */
.io-playlists-strip { margin-top: 48px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.io-row { display: flex; width: max-content; }
.io-tile {
  position: relative; flex: none; display: block;
  width: 170px; height: 170px; margin-right: 14px; padding: 16px;
  border-radius: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.15;
  color: #fff;
}
.io-tile.io-tile-ink { color: var(--ink); }
.io-row-left { animation: io-row-left 72s linear infinite; }
.io-row-right { animation: io-row-right 72s linear infinite; }
@keyframes io-row-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes io-row-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* Hovering anywhere on the strip holds both rows still so a cover can be read */
@media (hover: hover) { .io-playlists-strip:hover .io-row { animation-play-state: paused; } }

.why-panel { border-radius: 24px; background: var(--cream-2); padding: 56px; }

/* iO: tier cards */
.tier .media { --h: 280px; }
.tier .media > img { padding: 22px; }
.tier h3 { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1.1; letter-spacing: -.02em; }
.tier .tier-sub { font-weight: 600; font-size: 16px; }
.tier ul { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; font-size: 14px; }
.tier .tier-foot { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; color: var(--body); }
.tier.card-blue .tier-foot { border-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .85); }
.tier .btn { align-self: flex-start; }

.benefit-card { border-radius: 20px; padding: 30px; min-height: 250px; display: flex; flex-direction: column; gap: 10px; }
.benefit-card .label { color: rgba(22, 19, 15, .6); }
.benefit-card.card-blue .label { color: rgba(255, 255, 255, .75); }
.benefit-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; }
.benefit-card p { font-size: 14.5px; line-height: 1.55; }
.benefit-card.card-blue p { color: rgba(255, 255, 255, .9); }

.ent-card .media { --h: 220px; }
.ent-card .card-body { gap: 11px; }
/* Card tagline: sits at the foot of the card with a coloured bar, like .pull-quote */
.ent-card .small { margin-bottom: 6px; }
.ent-tagline {
  margin-top: auto; padding-left: 14px; border-left: 3px solid var(--tag, var(--accent));
  font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; color: var(--ink);
}
.next-strip {
  margin-top: 22px; border-radius: 20px; background: var(--io-blue); color: #fff;
  padding: 30px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.next-strip .btn { white-space: nowrap; font-size: 14px; }

.mini-card { border-radius: 16px; background: #fff; padding: 24px; display: flex; flex-direction: column; gap: 9px; }
.mini-card h3 { font-weight: 600; font-size: 17px; line-height: 1.35; }
.mini-card p { font-size: 14px; line-height: 1.55; color: var(--body); }
.mini-card.card-yellow { background: var(--io-yellow); }
.mini-card.card-yellow p { color: var(--ink); }
.mini-card.card-blue { background: var(--io-blue); }
.mini-card.card-blue h3 { color: #fff; }
.mini-card.card-blue p { color: rgba(255, 255, 255, .85); }

.num-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 34px; }

/* Book a demo */
.way-card { border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.way-card .label-sm { color: rgba(22, 19, 15, .65); }
.way-card.card-blue .label-sm { color: rgba(255, 255, 255, .8); }
.way-card p { font-size: 16px; line-height: 1.5; }
.check-card { border-radius: 22px; background: #fff; padding: 32px; display: flex; flex-direction: column; gap: 16px; }

/* Jukebox / venue cards on dark */
.venue-card .media { --h: 280px; }
.venue-card .card-body { --pad: 32px; gap: 12px; }
.venue-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.2; }
.venue-card p { font-size: 16px; line-height: 1.55; color: rgba(247, 242, 232, .7); }

.feature-card { border-radius: 20px; background: #fff; padding: 32px; display: flex; flex-direction: column; gap: 10px; }
.feature-card p { font-size: 15px; line-height: 1.55; color: var(--body); }
.feature-card.card-accent { background: var(--accent); }
.feature-card.card-accent h3 { color: var(--cream); }
.feature-card.card-accent p { color: rgba(247, 242, 232, .88); }

.note-tile { border-radius: 20px; background: var(--cream-2); display: flex; align-items: center; justify-content: center; padding: 24px; height: var(--h, 250px); }
.note-tile p { max-width: 190px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--body); }

/* Curation */
.daypart { border-radius: 20px; background: #fff; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.daypart .label-sm { color: var(--accent); }
.daypart p { font-size: 16px; line-height: 1.5; }
.daypart.card-accent { background: var(--accent); }
.daypart.card-accent .label-sm { color: rgba(247, 242, 232, .75); }
.daypart.card-accent p { color: var(--cream); }
.pull-quote { max-width: 480px; font-size: 18px; line-height: 1.45; font-weight: 600; border-left: 3px solid var(--accent); padding-left: 18px; margin-top: 4px; }
.glass-tile { background: rgba(247, 242, 232, .08); border-radius: 16px; padding: 22px; font-size: 15px; line-height: 1.45; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  :root { --gutter: 40px; --section-y: 72px; }
  .split { --split-gap: 48px; }
  .split > .split-side { flex-basis: min(var(--w, 560px), 44%); }
  .main-nav > ul { --nav-pad: 10px; }
  .header-call { display: none; }
  .steps { --cols: 3; row-gap: 28px; }
  .steps-lg { --cols: 2; }
  .grid.cols-4 { --cols: 2; }
}

@media (max-width: 960px) {
  :root { --gutter: 28px; --section-y: 64px; }

  .float-mark { display: none; }

  /* Header collapses to a menu button */
  .nav-toggle { display: inline-flex; }
  .header-right .btn { display: none; }
  .header-bar { grid-template-columns: 1fr auto; }
  /* Same behaviour as the desktop dropdown: the bar's glass grows to hold the menu
     (JS sets --menu-h) and the links fade in over it. */
  .main-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 0 20px 22px; max-height: calc(100vh - 110px); overflow-y: auto;
    opacity: 0; visibility: hidden;
    transition: opacity .16s ease, visibility 0s linear .16s;
  }
  .nav-open .main-nav { opacity: 1; visibility: visible; transition: opacity .4s ease-out .14s, visibility 0s; }
  .nav-open .header-bar::before { height: calc(100% + var(--menu-h, 0px)); }
  .main-nav > ul { flex-direction: column; gap: 0; }
  .main-nav > ul > li { border-bottom: 1px solid var(--line-soft); }
  .main-nav a, .main-nav .nav-top { display: block; padding: 14px 0; font-size: 17px; }
  .nav-item > a { height: auto; display: block; }
  .nav-sub { position: static; height: auto; opacity: 1; visibility: visible; padding: 0 0 10px 14px; transition: none; }
  .nav-panel { display: block; padding: 0; }
  .nav-panel-intro { display: none; }
  .nav-panel ul { display: block; }
  .nav-sub li a { display: block; height: auto; padding: 8px 0; font-size: 15px; color: var(--body); }
  .nav-sub li a strong { font-size: 15px; font-weight: 500; }
  .nav-sub li a span { display: none; }
  .main-nav .nav-cta { display: flex; margin-top: 18px; padding: 14px 20px; font-size: 15px; color: var(--accent-ink); }
  /* The button sits at the bottom of the menu, so hold it back until the glass has grown down to it. */
  .main-nav .nav-cta { opacity: 0; transition: opacity .12s ease, transform .15s ease, filter .15s ease, background-color .15s ease; }
  .nav-open .main-nav .nav-cta { opacity: 1; transition: opacity .4s ease-out .3s, transform .15s ease, filter .15s ease, background-color .15s ease; }
  :root { --hdr-top: 10px; --hdr-h: 60px; }

  .split, .split-top { flex-direction: column; align-items: stretch; --split-gap: 36px; }
  .split > .split-side { flex-basis: auto; width: 100%; }
  .split.media-first-mobile > .split-side { order: -1; }
  .split > .split-side.media, .split > .split-side > .media { --h: 360px; }

  .section-head-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .grid { --cols: 2 !important; }
  .grid.keep-3 { --cols: 3 !important; }
  /* three-card rows would orphan a card at 2 columns: stack them instead */
  .grid:not(.keep-3):has(> :nth-child(3):last-child) { --cols: 1 !important; }
  .next-strip { flex-direction: column; align-items: flex-start; }
  .why-panel { padding: 36px; }
  .form-card { padding: 28px; }
  .hero .media-hero { --h: 360px !important; }
  .float-mark { opacity: .35 !important; transform: scale(.7) rotate(-8deg) !important; }
  .mf { width: calc(var(--s) * .7); height: calc(var(--s) * .7); opacity: calc(var(--o, 1) * .55); }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; --section-y: 56px; }
  main > .hero:first-child { --hero-pt: 40px !important; }
  .grid, .grid.keep-3 { --cols: 1 !important; }
  .grid.keep-2 { --cols: 2 !important; }
  .form-grid { --cols: 1 !important; }
  .ruled-2 { --cols: 1; }
  .steps, .steps-lg { --cols: 1; row-gap: 24px; }
  .mosaic { grid-template-rows: 160px 160px; }
  .hero .media-hero { --h: 260px !important; }
  .split > .split-side.media, .split > .split-side > .media { --h: 280px !important; }
  /* No photo taller than about half a phone screen, whatever height the page sets */
  .media:not(.media-hero) { max-height: 360px; }
  /* 16px stops iPhones zooming in when a form field is tapped */
  .input { font-size: 16px; }
  .pill-xs, .io-tag span { font-size: 12px; }
  /* Footer links: two columns with room to tap */
  .site-footer nav[aria-label="Footer"] ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; width: 100%; }
  .site-footer nav a, .site-footer .footer-meta a { display: inline-block; padding-block: 7px; }
  .site-footer .footer-meta { flex-direction: column; gap: 0; }
  .footer-legal a { display: inline-block; padding-block: 6px; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .text-link { align-self: center; }
  .center .actions { width: 100%; max-width: 360px; }
  .center .actions .btn { width: 100%; }
  .hero-stat span { text-align: left; }
  .btn { white-space: normal; }
  .next-strip { padding: 26px 24px; }
  .next-strip .btn { white-space: normal; }
  .why-panel { padding: 26px 20px; }
  .form-card { padding: 22px 18px; }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
  .float-mark { display: none; }
  .music-float { display: none; }
  .hero .media-hero .glass { padding: 6px 6px 0; border-radius: 18px 18px 0 0; }
  .hero .media-hero .glass img { border-radius: 13px 13px 0 0; }
  .brand img { height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .route-card:hover, .route-card:focus-within { transform: none; }
  .route-card:hover .media img { transform: scale(1.01); }
  .mf-tile { animation: none; }
  .trust-track { animation: none; }
  .io-row-left, .io-row-right { animation: none; }
  * { transition: none !important; }
}

/* Karaoke "solution" checklist: numbered tiles under the intro split */
.solution-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; counter-reset: sp; }
.solution-points li {
  counter-increment: sp; display: flex; flex-direction: column; gap: 14px;
  background: #fff; border-radius: 18px; padding: 22px 22px 26px;
  font-size: 15.5px; font-weight: 500; line-height: 1.45; color: var(--ink);
}
.solution-points li::before { content: "0" counter(sp); font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -.02em; color: var(--accent); }
@media (max-width: 960px) { .solution-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .solution-points { grid-template-columns: 1fr; } }
.footer-address { font-style: normal; }

/* iO comparison table: product columns, feature rows */
.cmp { --cols: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); }
.cmp-head {
  position: sticky; top: calc(var(--hdr-top) + var(--hdr-h) + 8px); z-index: 5;
  display: grid; grid-template-columns: var(--cols); gap: 0 12px; align-items: end;
  padding: 18px 0 16px; background: #fff; border-bottom: 1px solid var(--line);
}
.cmp-prod { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 5px solid var(--c); border-radius: 3px; }
.cmp-prod strong { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.cmp-prod small { font-size: 13px; line-height: 1.35; color: var(--body); }
.cmp-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.01em; padding: 40px 0 10px; }
.cmp-row {
  display: grid; grid-template-columns: var(--cols); gap: 0 12px; align-items: center;
  padding: 15px 0; border-top: 1px solid var(--line-soft);
}
.cmp-row:hover { background: var(--cream-2); }
.cmp-feature { font-size: 15.5px; line-height: 1.4; color: var(--ink); padding-right: 16px; }
.cmp-cell { display: flex; justify-content: flex-start; align-items: center; min-height: 28px; }
.cmp-row .cmp-cell:nth-child(2) { --c: var(--io-blue); --t: #fff; }
.cmp-row .cmp-cell:nth-child(3) { --c: var(--io-coral); --t: var(--ink); }
.cmp-row .cmp-cell:nth-child(4) { --c: var(--io-yellow); --t: var(--ink); }
.cmp-tick { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--c); fill: none; stroke: var(--t); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) {
  .cmp { --cols: repeat(3, minmax(0, 1fr)); }
  .cmp-corner { display: none; }
  .cmp-head { gap: 0 8px; }
  .cmp-prod strong { font-size: 19px; }
  .cmp-prod small { display: none; }
  .cmp-row { gap: 6px 8px; padding: 14px 0; }
  .cmp-feature { grid-column: 1 / -1; padding-right: 0; font-size: 15px; }
  .cmp-cell { justify-content: flex-start; }
}


/* Nav dropdowns: link to the main Sound Leisure site, bottom right of the panel */
.nav-panel-ext { position: absolute; right: 20px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--body); white-space: nowrap; }
.nav-panel-ext { text-decoration: none; }
.nav-ext-mobile { display: none; }
.nav-ext-mobile .ext-arrow { display: inline-block; margin-left: -4px; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.nav-panel-ext .ext-arrow { display: inline-block; margin-left: -4px; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.nav-panel-ext:hover, .nav-panel-ext:focus-visible { color: var(--ink); text-decoration: none; }
.nav-panel-ext:hover .ext-text, .nav-panel-ext:focus-visible .ext-text { text-decoration: underline; text-underline-offset: 3px; }
.nav-panel-ext:hover .ext-arrow, .nav-panel-ext:focus-visible .ext-arrow { transform: translate(3px, -3px); }
@media (prefers-reduced-motion: reduce) { .nav-panel-ext .ext-arrow { transition: none; } }
@media (max-width: 960px) {
  /* On phones the link appears once, as its own item under About, not inside each dropdown */
  .main-nav .nav-panel-ext { display: none; }
  .nav-ext-mobile { display: block; }
  .main-nav .nav-ext-mobile a { display: flex; align-items: center; gap: 7px; }
}

/* ---------- Homepage hero: live-sound motion ---------- */
/* Equaliser bars drawn behind the heading; they breathe on their own and swell toward the cursor. */
.hero-eq { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.js .hero-eq { opacity: 0; animation: eq-in 2.2s ease 1s forwards; }
@keyframes eq-in { to { opacity: 1; } }

/* Heading words rise into place; the rest of the intro follows. Only when JS is on. */
.js [data-split]:not(.is-split) { visibility: hidden; }
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .02em; margin: -.1em -.02em; }
.sw > span { display: inline-block; transform: translateY(110%); animation: sw-rise .9s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(.12s + var(--i) * .07s); }
@keyframes sw-rise { to { transform: translateY(0); } }
.js .hero-rise { opacity: 0; transform: translateY(14px); animation: hero-rise .8s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(.1s + var(--d, 0) * .09s); }
@keyframes hero-rise { to { opacity: 1; transform: none; } }
.hero-stat strong { font-variant-numeric: tabular-nums; min-width: 2ch; }
.hero-settled .sw > span, .hero-settled .hero-rise { animation: none; transform: none; opacity: 1; }
/* The rotating word in the heading (room / bar / pub / hotel ...) */
.sw-rot { transition: width .55s cubic-bezier(.2, .8, .2, 1); }
.sw-rot .rot-word { display: inline-block; color: var(--brass); transition: transform .34s cubic-bezier(.5, 0, .75, 0), opacity .28s ease; }
.sw-rot .rot-word.is-out { transform: translateY(-110%); opacity: 0; }
.sw-rot .rot-word.is-in { transform: translateY(110%); opacity: 0; transition: none; }

/* "Now playing" chip on the hero photo: cycles through what we do, links to each. */
.now-playing {
  position: absolute; left: 26px; bottom: 22px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 52px);
  padding: 9px 16px 9px 13px; border-radius: 999px;
  color: var(--cream); font-size: 13px; line-height: 1;
  background: rgba(22, 19, 15, .7);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  transition: background-color .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.now-playing:hover, .now-playing:focus-visible { background: rgba(22, 19, 15, .86); transform: translateY(-2px); }
.np-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.np-eq i { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--brass-light); transform-origin: bottom; animation: np-bar 1.1s ease-in-out infinite; }
.np-eq i:nth-child(2) { animation-delay: -.35s; animation-duration: 0.9s; }
.np-eq i:nth-child(3) { animation-delay: -.7s; animation-duration: 1.3s; }
.np-eq i:nth-child(4) { animation-delay: -.2s; animation-duration: 1s; }
@keyframes np-bar { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }
.np-label { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(247, 242, 232, .62); white-space: nowrap; }
.np-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .25s ease, transform .25s ease; }
.np-title.is-out { opacity: 0; transform: translateY(-6px); }
.np-title.is-in { opacity: 0; transform: translateY(6px); transition: none; }
@media (max-width: 640px) {
  .now-playing { left: 16px; bottom: 14px; padding: 8px 13px 8px 11px; }
  .np-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sw > span, .js .hero-rise, .js .hero-eq { animation: none; transform: none; opacity: 1; }
  .np-eq i { animation: none; transform: scaleY(.7); }
  .np-title { transition: none; }
}

/* iO page: the scrolling playlist covers, shown on the page's cream background */
.io-strip-section { overflow: hidden; padding-bottom: 96px; }
@media (max-width: 640px) { .io-strip-section { padding-bottom: 64px; } }


/* iO page: customer names, shown as a scrolling row of tiles inside a cream panel */
.cust-panel { border-radius: 28px; background: transparent; padding: 56px 0 60px; }
.cust-panel .section-head { padding-inline: 24px; }
.cust-viewport {
  overflow: hidden; padding-block: 8px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cust-track { display: flex; gap: 16px; width: max-content; list-style: none; padding: 0 8px; margin: 0; animation: trust-scroll 34s linear infinite; }
.cust-viewport:hover .cust-track { animation-play-state: paused; }
.cust-tile {
  flex: none; display: grid; place-items: center; width: 196px; height: 104px; padding: 16px 18px;
  border-radius: 18px; background: #fff; box-shadow: 0 10px 22px -14px rgba(22, 19, 15, .28);
  font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -.01em;
  text-align: center; color: var(--ink);
}
.cust-logo img { width: auto; height: auto; max-width: 100%; max-height: 64px; object-fit: contain; mix-blend-mode: multiply; }  /* white logo backgrounds melt into the cream tile */
@media (max-width: 640px) {
  .cust-logo img { max-height: 52px; }
  .cust-panel { border-radius: 22px; padding: 40px 0 44px; }
  .cust-tile { width: 156px; height: 84px; font-size: 16px; border-radius: 14px; }
  .cust-track { gap: 12px; padding-inline: 6px; }
}
/* No motion: show every name once, wrapped, instead of a moving row */
@media (prefers-reduced-motion: reduce) {
  .cust-viewport { -webkit-mask-image: none; mask-image: none; padding-inline: 16px; }
  .cust-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .cust-tile[aria-hidden="true"] { display: none; }
}

/* Homepage heading has a long word ("entertainment"); keep it inside the screen on very small phones */
@media (max-width: 360px) { .hero-title { font-size: min(40.8px, 11.2vw); } }

/* Footer: legal links on their own row under the contact details */
.footer-legal { flex: 0 0 100%; align-self: stretch; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 22px; padding-top: 18px; margin-top: 4px; border-top: 1px solid rgba(247, 242, 232, .12); font-size: 12.5px; }
.footer-company { color: rgba(247, 242, 232, .5); }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-legal a { color: rgba(247, 242, 232, .5); }
.footer-legal a:hover { color: var(--cream); }

.legend-hint { font-weight: 400; color: var(--muted); }

/* iO tier cards: share one set of rows so the heading, text, list, grey rule and button
   line up across all three cards, however long each card's text is. */
@supports (grid-template-rows: subgrid) {
  .tier-grid { row-gap: 0; margin-bottom: calc(var(--gap, 20px) * -1); }
  .tier-grid .tier { display: grid; grid-row: span 8; grid-template-rows: subgrid; margin-bottom: var(--gap, 20px); }
  .tier-grid .tier > .card-body { display: grid; grid-row: 2 / span 7; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
  .tier-grid .tier .pill { justify-self: start; }
  .tier-grid .tier .btn { justify-self: start; align-self: start; }
}

/* Homepage "Why Sound Leisure": text beside a workshop photo, with the four facts in a row underneath */
.why-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.why-photo { border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--cream-2); }
.why-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.why-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
@media (max-width: 960px) {
  .why-top { grid-template-columns: 1fr; gap: 32px; }
  .why-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
}

/* Karaoke page: the three solutions under the hero */
.kr-solution { background: var(--cream-2); padding: 34px; gap: 12px; }
.kr-solution .label { color: var(--accent); }
.kr-solution p:not(.label) { font-size: 16px; }
.kr-solution .arrow-link { margin-top: auto; padding-top: 14px; color: var(--accent); }
.kr-solution .arrow { display: inline-block; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.kr-solution .arrow-link:hover .arrow, .kr-solution .arrow-link:focus-visible .arrow { transform: translateX(5px); }

/* Karaoke "The solution": text with the photo underneath on the left, the eight points as boxes on the right */
.kr-solution-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.kr-solution-left { display: flex; flex-direction: column; gap: 32px; }
.kr-solution-layout .solution-points { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 960px) { .kr-solution-layout { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) { .kr-solution-layout .solution-points { grid-template-columns: 1fr; } }
@media (min-width: 961px) {
  /* Both columns end on the same line: the photo takes up any spare height, and the boxes share the column height equally */
  .kr-solution-layout { align-items: stretch; }
  .kr-solution-left .media { height: auto; flex: 1 1 auto; min-height: 380px; position: relative; }
  .kr-solution-left .media img { position: absolute; inset: 0; }
  .kr-solution-layout .solution-points { grid-template-rows: repeat(4, minmax(0, 1fr)); }
}

/* Contact form: follow-up questions that appear when an area is ticked */
.interest-panel { display: flex; flex-direction: column; gap: 18px; padding: 4px 0 4px 20px; border-left: 3px solid var(--line); }
.interest-panel[hidden] { display: none; }

/* Jukebox rental page: the Prime Minister's letter sits faded behind the John Bull story */
#john-bull { position: relative; overflow: hidden; }
#john-bull .wrap { position: relative; z-index: 1; }
.jb-letter-bg { position: absolute; top: 0; bottom: 0; left: max(48%, 640px); right: 6%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 76%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 76%, transparent 100%); }
/* The picture keeps its own shape, sits on the bottom edge and is pushed down by a quarter of its height, so the section ends just under the signature however wide the screen is */
.jb-letter-bg { overflow: hidden; mix-blend-mode: multiply; }  /* the paper's white melts into the section's own beige, so only the writing shows and the section colour stays as it was */
.jb-letter-bg img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; transform: translateY(24%); opacity: .5; }
.jb-letter-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, #fff 0%, transparent 16%, transparent 90%, #fff 100%); }
@media (max-width: 960px) {
  .jb-letter-bg { left: 0; right: 0; -webkit-mask-image: none; mask-image: none; }
  .jb-letter-bg img { height: 100%; object-fit: cover; transform: none; }
  .jb-letter-bg img { opacity: .2; }
}

/* Full Audio Install: the "That could include" tiles match the other pages' point boxes (same radius, padding and text size as the Karaoke boxes) */
.pa-points { grid-auto-rows: 1fr; }
.pa-points .tile { display: flex; align-items: center; border-radius: 18px; padding: 22px; font-size: 15.5px; font-weight: 500; line-height: 1.45; color: var(--ink); }

/* "How it works" steps: the coloured line and number fill in step by step as the page scrolls.
   The script sets --fill (0 to 1) on each step from the scroll position, so there is no timed animation to lag behind. */
.js .steps .step { position: relative; border-top-color: var(--line); --fill: 0; }
.js .steps .step:first-child { border-color: var(--line); }
.js .steps .step::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(var(--fill)); transform-origin: left; }
.js .steps .step .step-num, .js .steps .step:first-child .step-num { color: var(--muted); }
.js .steps .step.is-on .step-num { color: var(--accent); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .js .steps .step .step-num, .js .steps .step.is-on .step-num, .js .steps .step:first-child .step-num { color: color-mix(in srgb, var(--accent) calc(var(--fill) * 100%), var(--muted)); }
}
@media (prefers-reduced-motion: reduce) { .js .steps .step { --fill: 1; } }

/* Hero entrance: the intro text and buttons wait for the heading to be ready, so they never pop in on their own first */
.js:not(.hero-ready) .hero-rise { animation-play-state: paused; }

/* Front of House: the three jukebox models. The product photos have black backgrounds, so the picture area is black. */
.jb-product .media { height: auto; aspect-ratio: 5 / 4; }   /* a shorter frame, so the jukeboxes sit smaller on the card */
.jb-product .media img { object-fit: contain; padding: 18px 24px; mix-blend-mode: multiply; }   /* the photos' white backgrounds melt into the frame's own colour */
.jb-product .card-body { gap: 12px; }
.jb-product h3 { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
.jb-product .btn { align-self: flex-start; margin-top: auto; background: var(--accent); color: var(--accent-ink); }
.jb-product p.small { font-size: 15px; line-height: 1.55; }
.jb-product .jb-pay { font-weight: 600; color: var(--ink); margin-top: 2px; }

/* Karaoke "The solution" sits on white, so its numbered tiles turn cream to stay visible */
.bg-white .solution-points li { background: var(--cream-2); }

/* Full Audio Install tiles sit on white, so they turn cream to stay visible */
.bg-white .pa-points .tile { background: var(--cream-2); }

/* The page background is now almost white, so white cards get a hairline edge to stay distinct */
.card, .tile, .mini-card, .check-card, .feature-card, .daypart, .solution-points li, .form-card { box-shadow: 0 0 0 1px rgba(22, 19, 15, .07); }
.bg-white .tile, .bg-white .solution-points li, .kr-solution, .feature-card.card-accent, .tile.card-accent { box-shadow: none; }