/* Service pages: guitar, violin, keyboard, drums, the rentals and the two
   free-class pages.

   These were first built on the article template, which gave every one of them
   a standfirst and a single narrow column of prose, so they read as blog posts
   rather than as pages about a class. They now use the same architecture as the
   approved programme page: a page head with the lede beside the title, a row of
   real facts, a full-width image, then the copy grouped into sections. */

.sv-prose{max-width:680px}
.sv-prose p{margin:0 0 20px;color:var(--p-body);font-size:16.5px;line-height:1.72}
.sv-prose p:last-child{margin-bottom:0}
.sv-prose h3{margin:32px 0 12px;font:600 18px/1.3 'Switzer',sans-serif;
  letter-spacing:.1px;color:var(--p-ink)}
.sv-prose b{font-weight:600;color:var(--p-ink)}
.sv-prose ul{margin:0 0 20px;padding-left:20px}
.sv-prose li{margin:0 0 9px;color:var(--p-body);font-size:16.5px;line-height:1.65}
.sv-prose a{color:var(--dept,var(--p-ink));font-weight:500}
.sv-prose a:hover,.sv-prose a:focus-visible{text-decoration:underline}

/* Prose left, a carousel of the rooms on the right. The two studio photographs
   used to sit stacked in the flow, one above the prose and one below it, which
   read as decoration rather than as a look at what you are hiring. */
.sv-split{display:grid;grid-template-columns:1fr .92fr;gap:clamp(32px,5vw,72px);align-items:start}
.sv-split .sv-prose{max-width:none}
.sv-split .carousel{margin:0}
.sv-split .carousel-slide img{height:clamp(280px,26vw,380px)}
@media(max-width:900px){
  .sv-split{grid-template-columns:1fr;gap:30px}
  .sv-split .carousel-slide img{height:260px}
}
.sv-hero{margin:0}
.sv-hero img{display:block;width:100%;height:clamp(280px,36vw,460px);
  object-fit:cover;border-radius:20px}

.sv-figure{margin:28px 0 0;max-width:680px}
.sv-figure img{display:block;width:100%;border-radius:16px}

/* Accreditations sit on the same three-column rhythm as the info row above
   them, so the page keeps one grid rather than introducing a second. */
.sv-accred{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(26px,3vw,42px)}
.sv-acc{display:flex;flex-direction:column;gap:9px}
.sv-acc-mark{display:flex;align-items:flex-end;height:46px}
.sv-acc-mark img{max-height:46px;max-width:150px;width:auto;object-fit:contain}
.sv-acc-mark i{font-size:31px;color:var(--dept,var(--p-ink))}
.sv-acc b{font-size:15px;font-weight:600;color:var(--p-ink)}
.sv-acc>span:last-child{color:var(--p-quiet);font-size:13.5px;line-height:1.55}

/* Department colour enters through the tag dot, links and hover only, per the
   colour application hierarchy in DESIGN-SYSTEM.md section 2. */
.sv-dance{--dept:var(--dance)}
.sv-music{--dept:var(--music)}
.sv-tkd{--dept:var(--tkd)}

.sv .times-pending{margin:0}
.sv-timetable{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;
  border:1px solid var(--p-line);border-radius:8px;color:var(--p-ink);
  font-size:14px;font-weight:600;letter-spacing:.1px}
.sv-timetable i:first-child{font-size:1.05rem;line-height:1}
.sv-timetable i:last-child{font-size:.85rem;line-height:1}
.sv-timetable:hover,.sv-timetable:focus-visible{border-color:var(--dept,var(--p-ink));
  color:var(--dept,var(--p-ink))}

/* Links from a department page out to a service page. */
.m-row-link{display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  color:var(--music);font-size:13.5px;font-weight:600;letter-spacing:.1px}
.m-row-link i{font-size:.82rem;line-height:1}
.m-row-link:hover,.m-row-link:focus-visible{filter:brightness(.88)}

.sv-related{max-width:1120px;margin:70px auto 0;padding-top:34px;
  border-top:1px solid var(--p-line,#EDE9F2)}
.sv-related h2{margin:0 0 22px;font-size:clamp(18px,1.76vw,22px);line-height:1.2}
.sv-related-list{display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0;list-style:none}
.sv-related-list a{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;
  border:1px solid var(--p-line,#EDE9F2);border-radius:8px;color:var(--ink);
  font-size:14px;font-weight:600}
.sv-related-list a i{font-size:.85rem;line-height:1}
.sv-related-list a:hover,.sv-related-list a:focus-visible{border-color:var(--ink)}

@media (max-width:640px){
  .sv-prose p,.sv-prose li{font-size:16px}
}

/* Benefits.

   Every one of these pages says what the lessons do for a child, and it was
   disappearing into the opening paragraph. The words are the page's own, lifted
   out so they carry weight. Deliberately lighter than .card: a benefit is one
   word, not a description, so it needs no body copy or border. */
.benefit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(20px,2.4vw,32px)}
.benefit{display:flex;flex-direction:column;gap:12px;padding:26px 24px;
  background:var(--paper-soft,#F8F6FA);border-radius:16px}
.benefit i{font-size:26px;color:var(--dept,var(--p-ink));line-height:1}
.benefit h3{margin:0;font:600 17px/1.25 'Switzer',sans-serif;letter-spacing:.1px;
  color:var(--p-ink)}

@media (max-width:640px){ .benefit{padding:22px 20px} }