/* ==========================================================================
   Services section: services.html (the overview) and the seven service pages
   (recording-studio, film-screen-media, industry-services, rehearsal-spaces,
   music-school, accommodation, entertainment-hire.html) — page layout only.
   Until 19 Oct 2026 this was one long page with a sticky category nav; each
   service now has its own page, as on the live site (docs/site-structure.md).
   No prices: rates are asked for through the booking page (engineer-booking.html).
   No decorative numbering (Eric, 22 Oct 2026): no section number in the heroes, no
   numbers on the overview rows, sub-headings or partner kickers.
   Components come from components.css; use contextual tokens (--fg, --rule,
   --accent…) so blocks survive theme changes.
   ========================================================================== */

/* ==========================================================================
   1. Overview hero (services.html)
   ========================================================================== */
.sv-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--header-h) + clamp(2.25rem, 5.5vw, 4.5rem)) 0 clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(55% 45% at 88% 8%, rgba(255, 106, 43, .13), transparent 70%),
    radial-gradient(45% 40% at 0% 30%, rgba(124, 204, 191, .07), transparent 70%),
    var(--ink);
}
.sv-hero__title {   /* size and weight: .t-hero (shared inner-page H1 scale) */
  max-width: 11ch;
}
.sv-hero__foot {
  display: grid; grid-template-columns: minmax(0, 52ch) auto; justify-content: space-between; align-items: end;
  gap: 1.5rem 3rem; margin-top: clamp(1.75rem, 3.5vw, 3rem); padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--rule);
}
.sv-hero__lead { font-size: var(--fs-lead); line-height: 1.5; color: rgba(243, 235, 224, .84); }
.sv-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }

.sv-hero__stage { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
/* a toned black-and-white strip (DSCF3434), so it reads as a print rather than a second copy of
   the studio hero's colour panorama */
.sv-hero__media { --ratio: 2560 / 700; border-radius: var(--r-sm); }
.sv-hero__media img { filter: grayscale(1) sepia(.3) brightness(.7) contrast(1.1); object-position: 50% 60%; }
.sv-hero__hud {
  position: absolute; inset: clamp(.75rem, 1.6vw, 1.25rem); z-index: 2; pointer-events: none;
  display: flex; justify-content: space-between; align-items: start; gap: 1rem;
  color: rgba(243, 235, 224, .85); text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
  padding: .65rem .8rem;
}
.sv-hero__hud-l, .sv-hero__hud-r { display: inline-flex; align-items: center; gap: .9rem; }
.sv-hero__tick { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(243, 235, 224, .55); }
.sv-hero__tick--tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.sv-hero__tick--tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.sv-hero__tick--bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.sv-hero__tick--br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

/* desktop lockup: title left, lead + CTAs bottom-right, so the panorama rises into the first frame */
@media (min-width: 1100px) {
  .sv-hero__head {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 6rem); align-items: end;
  }
  .sv-hero__title { grid-column: 1; }
  .sv-hero__foot {
    grid-column: 2; grid-template-columns: 1fr; justify-content: stretch; gap: 1.5rem;
    margin-top: 0; margin-bottom: .9rem;
  }
  .sv-hero__lead { max-width: 44ch; }
  .sv-hero__stage { margin-top: clamp(2rem, 3.6vw, 3.5rem); }
}
@media (max-width: 1000px) {
  .sv-hero__foot { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sv-hero__title { font-size: clamp(3.1rem, 15vw, 4.6rem); }
  .sv-hero__lead { font-size: 1.04rem; }
  .sv-hero__ctas { flex-wrap: nowrap; gap: .6rem; }
  .sv-hero__ctas .btn { flex: 1 1 auto; min-height: 52px; padding-inline: 1rem; font-size: .9rem; }
  .sv-hero__ctas .btn__icon { display: none; }
  /* designed phone crop: 4/3 of the panorama, drums + piano */
  .sv-hero__stage { padding-inline: 0; }
  .sv-hero__media { --ratio: 4 / 3; border-radius: 0; }
  .sv-hero__media img { object-position: 38% 50%; }
  .sv-hero__hud-r { display: none; }
}

/* ==========================================================================
   2. Overview list (services.html): one row per service page — name (the link, stretched
      over the row), one line, a photo from that page. No item numbers (22 Oct 2026).
   ========================================================================== */
.sv-index { padding-block: clamp(1rem, 3vw, 2.5rem) clamp(4.5rem, 8vw, 7.5rem); }
.sv-list { border-top: 1px solid var(--rule-strong); }
.sv-item {
  position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) clamp(120px, 12vw, 184px) 2rem;
  column-gap: clamp(1.25rem, 3vw, 3rem);
  padding-block: clamp(1.1rem, 2vw, 1.6rem); border-bottom: 1px solid var(--rule);
}
.sv-item__text { display: contents; }
.sv-item__name {
  font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 370;
  font-size: clamp(1.75rem, 3.1vw, 3.25rem); line-height: 1; letter-spacing: -.028em;
}
.sv-item__link { display: inline-block; transition: color .3s, transform .6s var(--ease-out); }
.sv-item__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* the whole row is the link */
.sv-item__link:focus-visible { outline: none; }
.sv-item:has(.sv-item__link:focus-visible) { outline: 2px solid var(--focus, var(--mint)); outline-offset: 4px; border-radius: var(--r-sm); }
.sv-item__line { color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.5; max-width: 46ch; }
.sv-item__media { --ratio: 3 / 2; }
.sv-item__media img { filter: saturate(.75) brightness(.85); transition: transform 1.2s var(--ease-out), filter .6s; }
.sv-item__arrow { justify-self: end; color: var(--muted); transition: color .3s, transform .45s var(--ease-out); }
.sv-item__arrow .icon { width: 18px; height: 18px; }
.sv-item:hover .sv-item__link { color: var(--mint); transform: translateX(6px); }
.sv-item:hover .sv-item__arrow { color: var(--mint); transform: translateX(4px); }
.sv-item:hover .sv-item__media img { transform: scale(1.05); filter: saturate(1) brightness(1); }
.sv-index__note { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: var(--fs-small); color: var(--fg-muted); }

@media (max-width: 899px) {
  /* name and line stacked into one block, centred beside a small photo */
  .sv-item { grid-template-columns: minmax(0, 1fr) clamp(96px, 28vw, 168px); column-gap: 1.25rem; }
  .sv-item__text { display: grid; gap: .45rem; }
  .sv-item__name { font-size: clamp(1.3rem, 6.4vw, 2.4rem); }   /* "Accommodation" beside the photo at 320 */
  .sv-item__arrow { display: none; }
}
@media (max-width: 480px) {
  .sv-item__line { font-size: var(--fs-xs); }
}

/* ==========================================================================
   3. Service page hero, body and previous / next (the seven service pages)
   ========================================================================== */
.svc-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--header-h) + clamp(2.25rem, 5.5vw, 4.5rem)) 0 clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(55% 45% at 88% 8%, rgba(255, 106, 43, .1), transparent 70%),
    radial-gradient(45% 40% at 0% 30%, rgba(124, 204, 191, .06), transparent 70%),
    var(--ink);
}
.svc-hero__inner { display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 6rem); }
.svc-hero__text { display: grid; gap: 1.25rem; justify-items: start; min-width: 0; }
/* the service names are longer than the other pages' one-word titles: one step down from .t-hero */
.svc-hero__title { font-size: clamp(2.9rem, 7.2vw, 8.25rem); line-height: .94; max-width: 11ch; }
.svc-hero__lead { font-size: var(--fs-lead); line-height: 1.5; color: rgba(243, 235, 224, .84); max-width: 54ch; }
.svc-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.svc-hero__subjects { margin-top: -.25rem; }
.svc-hero__photo { box-shadow: var(--shadow-2); }
@media (min-width: 900px) {
  /* top-aligned: the title sits level with the photo on every service page, whatever the length of its copy */
  .svc-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(250px, 25vw, 360px)); align-items: start; }
}
@media (max-width: 899px) {
  .svc-hero__photo { --ratio: 2 / 1; }
}
@media (max-width: 760px) {
  .svc-hero__photo { --ratio: 16 / 10; }
  .svc-hero__title { font-size: clamp(2.2rem, 11.5vw, 3.4rem); }   /* "Accommodation" on one line at 320 */
  .svc-hero__lead { font-size: 1.04rem; }
  .svc-hero__ctas { flex-wrap: nowrap; gap: .6rem; width: 100%; }
  .svc-hero__ctas .btn { flex: 1 1 auto; min-height: 52px; padding-inline: 1rem; font-size: .9rem; }
  .svc-hero__ctas .btn__icon { display: none; }
}
@media (max-width: 359px) {
  .svc-hero__ctas { flex-wrap: wrap; }   /* "Ask about the rooms" + "Call the studio" do not share a 320px row */
}

.svc-body { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(4rem, 8vw, 7rem); }
.svc-body.theme-cream { padding-top: clamp(3rem, 6vw, 5.5rem); }   /* rehearsal spaces: a cream page body */

/* previous / next service: the section's tabs order, the overview at both ends */
.svc-pager { border-top: 1px solid var(--rule); }
.svc-pager__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-pager__item { display: flex; }
.svc-pager__item--next { justify-content: flex-end; text-align: right; border-left: 1px solid var(--rule); }
.svc-pager__link { display: grid; gap: .6rem; align-content: start; padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1rem, 3vw, 3rem) clamp(1.75rem, 3.5vw, 3rem) 0; }
.svc-pager__item--next .svc-pager__link { padding-inline: clamp(1rem, 3vw, 3rem) 0; justify-items: end; }
.svc-pager__dir { color: var(--fg-muted); }
/* the arrows are decoration: the alternative text after "/" keeps them out of the link's name */
.svc-pager__dir::before { content: "\2190\00a0\00a0"; content: "\2190\00a0\00a0" / ""; }
.svc-pager__item--next .svc-pager__dir::before { content: none; }
.svc-pager__item--next .svc-pager__dir::after { content: "\00a0\00a0\2192"; content: "\00a0\00a0\2192" / ""; }
.svc-pager__name {
  font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 370;
  font-size: var(--fs-d3); line-height: 1.02; letter-spacing: -.025em;
  transition: color .3s, transform .6s var(--ease-out);
}
.svc-pager__link:hover .svc-pager__name { color: var(--mint); transform: translateX(-4px); }
.svc-pager__item--next .svc-pager__link:hover .svc-pager__name { transform: translateX(4px); }
@media (max-width: 760px) {
  .svc-pager__name { font-size: clamp(1.1rem, 5.2vw, 1.45rem); }   /* "Accommodation" in half of a 320 row */
}

/* ==========================================================================
   4. Service blocks: hairline lists, not boxes (recording, film & screen, industry,
      entertainment hire)
   ========================================================================== */
.rs-block { display: grid; gap: 1.1rem; align-content: start; padding-top: 1.4rem; border-top: 1px solid var(--rule-strong); min-width: 0; }
.rs-block__head { display: grid; gap: .45rem; }
.rs-block__title {
  font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 380;
  font-size: clamp(1.65rem, 2.3vw, 2.4rem); line-height: 1.02; letter-spacing: -.022em;
}
.rs-block__kicker { color: var(--fg-muted); }
.rs-block__fine { font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.55; max-width: 60ch; }

.rs-list { display: grid; }
.rs-row { display: grid; gap: .3rem; padding: .82rem .1rem .8rem; border-bottom: 1px dashed var(--rule); }
.rs-row:first-child { border-top: 1px solid var(--rule); }
.rs-row__name { font-weight: 500; line-height: 1.3; min-width: 0; }
.rs-row__aside { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--fg-muted); }
.rs-row__note { font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.45; }

/* ---- recording: four session formats (name, then its length as the source puts it: "Half Day (5 hrs)") ---- */
.rs-block--sessions { gap: 1.6rem; }
.rs-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--rule); }
.rs-fig { position: relative; display: grid; gap: .65rem; align-content: start; padding: 1.4rem 1.25rem 1.5rem; border-left: 1px solid var(--rule); }
.rs-fig:first-child { border-left: 0; padding-left: 0; }
.rs-fig__label { color: var(--fg-muted); }
.rs-fig__name {
  font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 360;
  font-size: clamp(1.85rem, 2.7vw, 2.9rem); line-height: 1; letter-spacing: -.03em;
}
.rs-fig__note { font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.5; max-width: 26ch; }
@media (max-width: 860px) {
  .rs-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-fig:nth-child(3) { border-left: 0; padding-left: 0; }
  .rs-fig:nth-child(-n + 2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 480px) {
  .rs-fig { padding: 1.1rem .9rem 1.2rem; }
  .rs-fig:nth-child(odd) { padding-left: 0; }
  .rs-fig__name { font-size: 1.7rem; }
}

/* ---- release formats: what production, editing, mixing and mastering cover ---- */
.rs-formats { margin-top: clamp(3rem, 5vw, 4.5rem); }
.rs-formats__bar {
  padding: 1.1rem 1.25rem; border: 1px solid var(--rule); border-radius: var(--r-md);
  background: linear-gradient(120deg, rgba(124, 204, 191, .06), transparent 60%), var(--ink-2);
}
.rs-formats__label { color: var(--mint); margin-bottom: .55rem; }
.rs-defs { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; margin: 0; }
.rs-defs div { display: flex; gap: .55rem; align-items: baseline; }
.rs-defs dt { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--cream); }
.rs-defs dd { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 600px) {   /* phones: one format per row, the descriptions on one left edge */
  .rs-defs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem 1rem; }
  .rs-defs div { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
}
.rs-formats__tags { gap: .45rem; padding-top: .2rem; }
.rs-formats__tags .tag { padding: .38rem .75rem; border-color: var(--rule-strong); border-radius: var(--r-pill); color: var(--fg); white-space: normal; }

.rs-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 4vw, 4rem) clamp(2rem, 4vw, 4rem); margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.svc-body .container > .rs-pair:first-child { margin-top: 0; }
.rs-pair--wide { margin-top: clamp(3rem, 5vw, 4.5rem); }
.rs-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 4vw, 4rem) clamp(1.75rem, 3vw, 3rem); margin-top: clamp(2.5rem, 4vw, 3.5rem); }
@media (max-width: 1099px) { .rs-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .rs-pair, .rs-trio { grid-template-columns: 1fr; } }

/* ---- dry hire: the one boxed card (it is a different kind of booking) ---- */
.rs-block--dry {
  padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  background: radial-gradient(120% 80% at 100% 0%, rgba(255, 106, 43, .08), transparent 60%), var(--ink-2);
}
.rs-dry__photo { margin-bottom: .4rem; }
.rs-dry__photo img { filter: brightness(.85) saturate(.95); }
.rs-dry__figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-block: 1rem; border-block: 1px solid var(--rule); }
.rs-dry__figs p { display: grid; gap: .5rem; align-content: start; }
/* booking terms in the serif of the session formats, so the hours read as durations, not a price row */
.rs-dry__fig {
  font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 360; white-space: nowrap;
  font-size: clamp(1.6rem, 2.2vw, 2.2rem); line-height: 1; letter-spacing: -.03em;
}
.rs-dry__label { color: var(--fg-muted); }

/* ---- film & screen matrix ---- */
.rs-matrix-wrap { border-top: 1px solid var(--rule-strong); }
.rs-matrix { width: 100%; text-align: left; }
.rs-matrix th, .rs-matrix td { padding: 1.15rem 1rem 1.15rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; font-weight: 400; }
.rs-matrix thead th { padding-block: 1rem .85rem; vertical-align: bottom; }
.rs-matrix thead .mono { color: var(--fg-muted); }
.rs-matrix__tier { font-family: var(--font-display); font-variation-settings: var(--soft); font-style: italic; font-weight: 330; font-size: clamp(1.3rem, 1.7vw, 1.75rem); letter-spacing: -.01em; }
.rs-matrix tbody th { width: 28%; }
.rs-matrix__svc { display: block; font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 400; font-size: clamp(1.25rem, 1.6vw, 1.6rem); line-height: 1.1; letter-spacing: -.015em; }
.rs-matrix__sub { display: block; margin-top: .35rem; font-size: var(--fs-xs); color: var(--fg-muted); }
.rs-matrix__desc { display: block; font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.4; color: var(--fg); max-width: 22ch; }
@media (max-width: 760px) {
  .rs-matrix, .rs-matrix tbody, .rs-matrix tr, .rs-matrix th, .rs-matrix td { display: block; width: auto; }
  .rs-matrix thead { display: none; }
  .rs-matrix tbody tr { padding-block: 1.1rem .4rem; border-bottom: 1px solid var(--rule-strong); }
  .rs-matrix tbody th { width: auto; padding: 0 0 .6rem; border: 0; }
  .rs-matrix td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed var(--rule); }
  .rs-matrix td:last-child { border-bottom: 0; }
  .rs-matrix td::before { content: attr(data-label); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-muted); padding-top: .3em; }
}

/* ---- entertainment hire: DJ genres ---- */
.rs-dj__label { color: var(--fg-muted); }

/* ==========================================================================
   5. Rehearsal spaces (rehearsal-spaces.html, a cream page body)
   ========================================================================== */
/* the five rooms by type: Duo Rooms beside Premier Rooms; each group shows its rooms' photos (one tile per room,
   in the list's order) above the list of rooms with their capacities (round 2, 22 Oct 2026: Kais asked for the
   right room names on the photos, and for the Duo Rooms, which are also the music school's studios, to be shown) */
.pr-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem clamp(2rem, 4vw, 4rem); align-items: start; }
.pr-group { min-width: 0; }
.pr-group__title { padding-bottom: .85rem; border-bottom: 1px solid var(--rule-strong); color: var(--accent); }
/* one row of tiles per group: three portrait Duo Room photos (4:5) or two Premier Room photos. Both groups' rows
   are the same height, the height of a 4:5 tile a third of the group wide, so the two rows line up side by side;
   the Premier photos (3:2 originals) are cropped a little to fill it. Without container units: 4:5 and 5:4. */
.pr-shots {
  --shot-gap: clamp(.5rem, 1.1vw, 1rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--shot-gap);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.pr-shots--premier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-shot { display: block; --ratio: 4 / 5; }
.pr-shots--premier .pr-shot { --ratio: 5 / 4; }
@supports (height: 1cqi) {
  .pr-group { container-type: inline-size; }
  .pr-shot { aspect-ratio: auto; height: calc((100cqi - 2 * var(--shot-gap)) / 3 * 1.25); }
}
.pr-shot .media__caption { left: .7rem; bottom: .65rem; }
/* a soft shade under the room name: some photos are light at the bottom (Santiago's floor) */
.pr-shot::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(8, 6, 5, .42));
}
/* "5 photos": the room's other photos follow its tile in the gallery */
.pr-shot__count {
  position: absolute; z-index: 2; top: .55rem; right: .55rem; padding: .3rem .6rem; border-radius: var(--r-pill);
  background: rgba(15, 13, 12, .6); color: var(--cream); font-size: .62rem; letter-spacing: .08em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pr-list { margin-top: .6rem; }
.pr-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--rule); }
.pr-room { font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 380; font-size: clamp(1.5rem, 2.2vw, 2.25rem); line-height: 1; letter-spacing: -.025em; }
.pr-cap { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }
.pr-dots { display: inline-grid; grid-template-columns: repeat(4, 6px); gap: 3px; }
.pr-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .85; }
.pr-app {
  display: flex; gap: 1rem; align-items: start; max-width: 46rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); padding: 1.1rem 1.25rem;
  border: 1px solid rgba(47, 106, 96, .35); border-radius: var(--r-md); background: rgba(47, 106, 96, .07);
}
.pr-app__body { display: grid; gap: .9rem; min-width: 0; }
.pr-app p { font-size: var(--fs-small); color: var(--fg-muted); }
.pr-app strong { color: var(--fg); font-weight: 600; }
.pr-app p a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.pr-app__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--cream); }
.pr-app__icon .icon { width: 20px; height: 20px; }
/* App Store / Google Play: shown by services.js once their URLs are set (APP_LINKS) */
.pr-app__stores { display: flex; flex-wrap: wrap; gap: .5rem; }
.pr-app__stores[hidden], .pr-store[hidden] { display: none; }
@media (max-width: 760px) {
  .pr-rooms { grid-template-columns: 1fr; }
  .pr-room { font-size: 1.85rem; }
}
@media (max-width: 420px) {
  .pr-shot .media__caption { left: .5rem; bottom: .45rem; font-size: .62rem; letter-spacing: .08em; }
  .pr-shot__count { top: .4rem; right: .4rem; padding: .25rem .5rem; font-size: .58rem; }
}

/* ==========================================================================
   6. Music school (music-school.html)
   ========================================================================== */
.ms-sub + .ms-sub { margin-top: clamp(3.5rem, 6vw, 5rem); }
.ms-sub__title {
  padding-bottom: 1rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 380; font-size: clamp(1.5rem, 2.2vw, 2.2rem); letter-spacing: -.02em; line-height: 1.1;
}
.ms-teachers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 3rem) var(--grid-gap); align-items: start; }
.teacher .person__body { display: grid; gap: .45rem; }
.teacher .person__name { font-size: clamp(1.15rem, 1.35vw, 1.4rem); }
.teacher__bio { font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.55; }
.teacher__bio p + p { margin-top: .6em; }
.js .teacher__bio.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.js .teacher__bio.is-clamped p + p { display: none; }
.teacher__more { justify-self: start; min-height: 44px; font-size: .7rem; color: var(--mint); }
/* the teachers' portraits (the client's request, 24 Oct 2026: "like the team page"): black and white at rest; the mint
   duotone on hover, on keyboard focus of the "Read bio" button, and on touch screens while the photo crosses the middle
   of the screen (services.js sets .is-lit), as on The Team page's contact sheet (team.css). The first group undoes the
   shared .person warm-up to full colour (components.css: :hover, :focus-within, .is-warm), with no zoom and no tungsten
   bloom, like the sheet; the lit states come after it, so they win the ties. Hover only where the device can hover: a
   tap's :hover sticks on touch screens. The change runs on the .portrait transitions, so it is instant with reduced motion. */
.teacher .portrait, .teacher:hover .portrait, .teacher:focus-within .portrait, .teacher .portrait.is-warm { background-color: #fff; }           /* multiply by white = identity */
.teacher .portrait::after, .teacher:hover .portrait::after, .teacher:focus-within .portrait::after, .teacher .portrait.is-warm::after { background-color: #000; } /* lighten with black = identity */
.teacher .portrait::before, .teacher:hover .portrait::before, .teacher:focus-within .portrait::before, .teacher .portrait.is-warm::before { opacity: 0; }
.teacher .portrait img, .teacher:hover .portrait img, .teacher:focus-within .portrait img, .teacher .portrait.is-warm img { transform: none; filter: grayscale(1) contrast(1.1) brightness(var(--duo-b, 1)); }
.teacher .portrait.is-lit { background-color: var(--duo-hi); }
.teacher .portrait.is-lit::after { background-color: var(--duo-lo); }
.teacher .portrait.is-lit img { filter: grayscale(1) contrast(1.25) brightness(var(--duo-b, 1)); }
.teacher:has(.teacher__more:focus-visible) .portrait { background-color: var(--duo-hi); }
.teacher:has(.teacher__more:focus-visible) .portrait::after { background-color: var(--duo-lo); }
.teacher:has(.teacher__more:focus-visible) .portrait img { filter: grayscale(1) contrast(1.25) brightness(var(--duo-b, 1)); }
@media (hover: hover) {
  .teacher:hover .portrait { background-color: var(--duo-hi); }
  .teacher:hover .portrait::after { background-color: var(--duo-lo); }
  .teacher:hover .portrait img { filter: grayscale(1) contrast(1.25) brightness(var(--duo-b, 1)); }
}
.ms-cta {
  display: grid; gap: .9rem; align-content: end; align-self: stretch;
  padding: clamp(1.1rem, 2vw, 1.5rem); border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  background: radial-gradient(120% 90% at 100% 0%, rgba(124, 204, 191, .18), transparent 60%), var(--ink-3);
}
.ms-cta__kicker { color: var(--mint); }
.ms-cta__title { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: clamp(1.35rem, 1.8vw, 1.85rem); line-height: 1.08; letter-spacing: -.02em; }
.ms-cta__copy { font-size: var(--fs-xs); color: var(--fg-muted); }
.ms-cta .btn { justify-self: start; }

/* six rooms (22 Oct 2026: London added, the Santiago card shows Santiago; 24 Oct: London is Studio 5): one row of
   six from 1440px (where the longest tag, "Studio 4 · up to 5", fits a card), two rows of three below, a swipe row on phones */
.ms-rooms { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
.ms-room { display: grid; gap: .55rem; align-content: start; }
.ms-room__media { --ratio: 4 / 5; margin-bottom: .45rem; }
.ms-room__media img { filter: saturate(.9); transition: transform 1.2s var(--ease-out), filter .6s; }
.ms-room:hover .ms-room__media img { transform: scale(1.04); filter: saturate(1.05); }
.ms-room__tag { color: var(--mint); }
.ms-room__name { font-family: var(--font-display); font-variation-settings: var(--soft); font-style: italic; font-weight: 330; font-size: clamp(1.45rem, 1.9vw, 2rem); line-height: 1; letter-spacing: -.02em; }
.ms-room__name::before { content: "~"; color: var(--fg-muted); margin-right: .1em; font-style: normal; }
.ms-room__name::after { content: "~"; color: var(--fg-muted); margin-left: .1em; font-style: normal; }
.ms-room__text { font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.5; }
.ms-rooms__note { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: 1.1rem; border-top: 1px dashed var(--rule); font-size: var(--fs-small); color: var(--fg-muted); max-width: 72ch; }

@media (max-width: 1439px) {
  /* two rows of three (no orphan) */
  .ms-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(2rem, 4vw, 2.75rem); }
}
@media (min-width: 1100px) and (max-width: 1439px) {
  .ms-room__media { --ratio: 1 / 1; }   /* the wide three-column cards: square crops keep the two rows compact */
}
@media (max-width: 1099px) {
  .ms-teachers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ms-cta { grid-column: span 2; }
}
@media (max-width: 760px) {
  .ms-teachers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem .85rem; }
  .ms-teachers > li:nth-child(2n) { margin-top: 1.5rem; }
  .ms-cta { grid-column: 1 / -1; margin-top: 0 !important; }
  .js .teacher__bio.is-clamped { -webkit-line-clamp: 3; line-clamp: 3; }
  /* rooms: designed swipe row */
  .ms-rooms { display: flex; gap: .85rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .ms-rooms::-webkit-scrollbar { display: none; }
  .ms-room { flex: none; width: 62vw; max-width: 280px; scroll-snap-align: start; }
}

/* ---- teacher bio modal (rendered into the shared dialog by services.js) ---- */
.modal--teacher .modal__panel { --modal-w: 1000px; }
.teacher-modal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.25rem, 3vw, 3rem); padding: clamp(1rem, 3vw, 2.5rem); align-items: start; }
.teacher-modal__photo { aspect-ratio: 1; overflow: hidden; border-radius: var(--r-sm); background: var(--ink-3); }
.teacher-modal__photo img { width: 100%; height: 100%; object-fit: cover; }
.teacher-modal__body { display: grid; gap: 1.1rem; justify-items: start; padding-top: .5rem; }
.teacher-modal__kicker { color: var(--mint); }
.teacher-modal__name { font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 370; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: .98; letter-spacing: -.03em; padding-right: 5.5rem; }
.teacher-modal__bio { display: grid; gap: .9em; color: var(--muted); max-width: 58ch; }
@media (max-width: 700px) {
  .teacher-modal { grid-template-columns: 1fr; }
  .teacher-modal__photo { max-width: 240px; }
  .teacher-modal__name { padding-right: 0; }
}

/* ==========================================================================
   7. Accommodation (accommodation.html)
   ========================================================================== */
.acc-list { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.acc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.acc:nth-child(even) .acc__media { order: 2; }
.acc__media { display: block; max-width: 640px; box-shadow: var(--shadow-2); }
.acc__count { position: absolute; z-index: 2; left: .9rem; bottom: .8rem; padding: .35rem .7rem; border-radius: var(--r-pill); background: rgba(15, 13, 12, .6); color: var(--cream); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.acc__body { display: grid; gap: 1rem; justify-items: start; }
.acc__kicker { color: var(--fg-muted); }
.acc__name { font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 370; font-size: var(--fs-d3); line-height: 1.02; letter-spacing: -.025em; }
.acc__text { color: var(--fg-muted); max-width: 52ch; }
.acc__facts { display: flex; flex-wrap: wrap; gap: .4rem; }
.acc__facts li { padding: .3rem .7rem; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); }
.acc .link-arrow { max-width: 100%; overflow-wrap: anywhere; }
.acc-note { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); padding: 1.1rem 1.25rem; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--ink-2); }
.acc-note p { color: var(--fg-muted); font-size: var(--fs-small); max-width: 62ch; }
.acc-note .mono { color: var(--mint); margin-right: .8em; }
@media (max-width: 699px) {
  .acc { grid-template-columns: 1fr; }
  .acc:nth-child(even) .acc__media { order: 0; }
}
@media (max-width: 760px) {
  .acc .link-arrow--mono { font-size: .66rem; letter-spacing: .06em; }
}