/* ═══════════════════════════════════════════════════════════════════
   page-sauna-servicing.css — /our-services/sauna-service-maintenance/
   Built to the Claude Design handover (design_handoff_sauna_servicing).
   Every colour is a brand.css token; the handover's token table is the
   site's own set. The three on-dark text colours the handover uses
   without a token were added to brand.css (--white, --on-dark-body,
   --on-dark-list, --on-dark-*), not declared here.
   Scoped under main.svc so nothing leaks into the header or footer.
   Breakpoints: 1080px (grids collapse) and 700px (padding tightens).
   ═══════════════════════════════════════════════════════════════════ */

.svc{ --svc-maxw:1200px; color:var(--body); font-weight:300; line-height:1.65; }
.svc .wrap{ max-width:var(--svc-maxw); }
.svc h1,.svc h2,.svc h3,.svc h4{ color:var(--heading); letter-spacing:-.015em; margin:0; }
.svc p{ margin:0; }
.svc a{ color:var(--heading); }
.svc a:hover{ color:var(--sauna-text); }
.svc button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
.svc img{ display:block; max-width:100%; }

/* Section head */
.svc-eyebrow{ display:block; font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; max-width:none; }
.svc-head h2{ font-weight:400; font-size:clamp(1.75rem,2.6vw,2.25rem); line-height:1.2; letter-spacing:-.02em; max-width:24ch; text-wrap:pretty; }
.svc-intro{ color:var(--body); font-weight:300; font-size:1.0625rem; line-height:1.7; max-width:62ch; margin-top:18px; text-wrap:pretty; }
.svc-intro--call{ margin-top:24px; }
.band--dark .svc-head h2{ color:var(--white); }
.band--dark .svc-eyebrow{ color:var(--nav-muted); }

/* Buttons — the site's .btn, at the handover's size and colours on this page */
.svc .btn{ font-size:.875rem; padding:.875rem 1.5rem; min-height:48px; gap:.55rem; text-decoration:none; }
.svc .btn-primary{ background:var(--cta); color:var(--white); }
.svc .btn-primary:hover{ background:var(--cta-hover); color:var(--white); }
.svc .btn-primary::after{ width:13px; height:13px; }
.svc .btn-primary:hover::after{ transform:translate(2px,-2px); }
.svc .btn-ghost{ border-color:var(--border); }
.svc .btn-ghost:hover{ background:var(--surface); color:var(--heading); }
.svc .btn-ghost-light{ background:transparent; color:var(--white); border:1px solid var(--on-dark-border); }
.svc .btn-ghost-light:hover{ background:var(--on-dark-hover); color:var(--white); }

/* 1 · Hero (the breadcrumb band sits above it, from the theme) */
.svc-hero{ background:var(--nav); color:var(--white); padding:56px 0 72px; }
.svc-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.svc-hero .svc-eyebrow{ color:var(--nav-muted); margin-bottom:20px; }
.svc-hero h1{ color:var(--white); font-weight:600; font-size:clamp(2.1rem,3.6vw,3rem); line-height:1.05; letter-spacing:-.03em; max-width:22ch; text-wrap:pretty; }
.svc-sub{ color:var(--on-dark-body); font-weight:300; font-size:clamp(1rem,1.25vw,1.125rem); line-height:1.65; margin-top:22px; max-width:54ch; text-wrap:pretty; }
.svc-actions{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.svc-hero-photo{ border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/5; background:var(--util); }
.svc-hero-photo img{ width:100%; height:100%; object-fit:cover; }

/* 2 · Stats */
.svc-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:56px; border-top:1px solid var(--border); }
.svc-stat{ padding:38px 40px 8px 0; border-right:1px solid var(--border); }
.svc-stat:last-child{ border-right:0; }
.svc-stat+.svc-stat{ padding-left:40px; }
.svc-rule{ width:34px; height:2px; background:var(--sauna); margin-bottom:26px; }
.svc-fig{ font-weight:300; font-size:clamp(2.75rem,5.2vw,4.25rem); line-height:1; letter-spacing:-.045em; color:var(--heading); font-variant-numeric:lining-nums; }
.svc-fig em{ font-style:normal; font-size:.42em; letter-spacing:-.01em; font-weight:400; color:var(--muted); display:block; margin-top:12px; }
.svc-stat p{ margin-top:16px; font-size:.95rem; line-height:1.6; color:var(--body); max-width:26ch; }

/* 3 · What fails first */
.svc-wear{ display:grid; gap:0; margin-top:56px; border-top:1px solid var(--border); }
.svc-wear-item{ display:grid; grid-template-columns:80px 1.1fr 1.4fr; gap:32px; padding:34px 0; border-bottom:1px solid var(--border); align-items:start; }
.svc-idx{ font-weight:400; font-size:.9rem; color:var(--sauna-text); letter-spacing:.06em; padding-top:4px; }
.svc-wear-item h3{ font-weight:600; font-size:1.25rem; line-height:1.25; letter-spacing:-.01em; }
.svc-wear-item p{ font-size:1rem; line-height:1.7; color:var(--body); text-wrap:pretty; }

/* 4 · Packages */
.svc-pkgs{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; align-items:start; }
.svc-pkg{ background:var(--white); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:34px 30px 32px; display:flex; flex-direction:column; gap:20px; height:100%; }
.svc-pkg--hero{ background:var(--nav); border-color:var(--nav); box-shadow:var(--shadow-product); position:relative; }
.svc-pkg-tag{ position:absolute; top:-13px; left:30px; background:var(--cta); color:var(--white); font-weight:600; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; padding:7px 13px; border-radius:100px; }
.svc-pkg-name{ font-weight:600; font-size:1.375rem; line-height:1.15; letter-spacing:-.015em; color:var(--heading); }
.svc-pkg-price{ font-weight:300; font-size:1.75rem; line-height:1.2; letter-spacing:-.03em; color:var(--heading); margin-top:10px; }
.svc-pkg-price span{ font-size:.9rem; color:var(--muted); letter-spacing:0; }
.svc-isl{ display:grid; gap:6px; font-size:1.0625rem; letter-spacing:-.01em; margin-top:12px; color:var(--heading); }
.svc-isl b{ font-weight:400; }
.svc-isl i{ font-style:normal; color:var(--muted); display:inline-block; min-width:74px; font-size:.88rem; }
.svc-pkg-who{ font-size:.95rem; line-height:1.6; color:var(--body); border-top:1px solid var(--hairline); padding-top:20px; }
.svc-pkg ul{ list-style:none; display:grid; gap:11px; margin:0; padding:0; }
.svc-pkg li{ position:relative; padding-left:20px; font-size:.94rem; line-height:1.55; color:var(--body); }
.svc-pkg li::before{ content:""; position:absolute; left:0; top:.72em; width:8px; height:1px; background:var(--sauna); }
.svc-pkg-foot{ margin-top:auto; padding-top:6px; }
.svc-pkg-foot .btn{ width:100%; }
.svc-pkg--hero .svc-pkg-name,.svc-pkg--hero .svc-pkg-price{ color:var(--white); }
.svc-pkg--hero .svc-pkg-price span{ color:var(--nav-muted); }
.svc-pkg--hero .svc-pkg-who{ color:var(--on-dark-body); border-top-color:var(--on-dark-hairline); }
.svc-pkg--hero li{ color:var(--on-dark-list); }
.svc-pkg-note{ margin-top:28px; display:grid; grid-template-columns:1.4fr 1fr; gap:28px; border:1px solid var(--border); border-radius:var(--r-xl); padding:26px 28px; background:var(--surface); }
.svc-pkg-note p{ font-size:.94rem; line-height:1.7; color:var(--body); }
.svc-pkg-note p b{ color:var(--heading); font-weight:600; }

/* 5 · Tabs */
.svc-tabs{ margin-top:48px; }
.svc-tabbar{ display:flex; gap:8px; border-bottom:1px solid var(--border); }
.svc-tabbar button{ padding:16px 4px; font-weight:500; font-size:1rem; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; margin-right:32px; transition:color .15s, border-color .15s; border-radius:0; }
.svc-tabbar button:hover{ color:var(--heading); }
.svc-tabbar button[aria-selected="true"]{ color:var(--heading); border-bottom-color:var(--cta); }
.svc-tabbar button:focus-visible{ outline:2px solid var(--heading); outline-offset:2px; }
.svc-tabpanel{ display:none; padding-top:36px; }
.svc-tabpanel.is-on{ display:block; }
.svc-lede{ font-size:1rem; color:var(--muted); letter-spacing:.01em; max-width:62ch; }
.svc-scope{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:32px; }
.svc-blk{ background:var(--white); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:26px 26px 24px; }
.svc-blk h4{ font-weight:600; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sauna-text); margin-bottom:12px; }
.svc-blk p{ font-size:.95rem; line-height:1.75; color:var(--body); text-wrap:pretty; }

/* 6 · Accordion — the project's standard +/× toggle (design system CLAUDE.md):
   32px circle, plus rotating to ×, open fill always the neutral --nav. */
.svc-acc{ border-top:1px solid var(--border); margin-top:44px; }
.svc-acc-item{ border-bottom:1px solid var(--border); }
.svc-acc-h{ margin:0; font-size:inherit; font-weight:inherit; }
.svc-acc-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; text-align:left; font-weight:500; font-size:1.0625rem; color:var(--heading); line-height:1.4; }
.svc-acc-q:focus-visible{ outline:2px solid var(--heading); outline-offset:2px; }
.svc-acc-q .pm{ width:32px; height:32px; flex:none; border:1px solid var(--border); border-radius:50%;
  background:no-repeat center/14px 14px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1F24' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition:transform .25s ease, background-color .15s, border-color .15s; }
.svc-acc-q:hover .pm{ border-color:var(--heading); }
.svc-acc-item.open .svc-acc-q .pm{ transform:rotate(45deg); background-color:var(--nav); border-color:var(--nav);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.svc-acc-body{ padding:0 0 32px; }
.svc-acc-body[hidden]{ display:none; }
table.svc-dt{ width:100%; border-collapse:collapse; font-size:.95rem; }
table.svc-dt th{ text-align:left; padding:11px 14px 11px 0; font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); }
table.svc-dt th.num,table.svc-dt td.num{ text-align:right; padding-right:0; }
table.svc-dt td{ padding:14px 14px 14px 0; border-bottom:1px solid var(--hairline); color:var(--body); vertical-align:top; line-height:1.5; }
table.svc-dt td.k{ color:var(--heading); font-weight:400; width:34%; }
table.svc-dt td.num{ color:var(--heading); white-space:nowrap; }
table.svc-dt tr:last-child td{ border-bottom:0; }
.svc-tnote{ margin-top:20px; font-size:.92rem; line-height:1.7; color:var(--muted); max-width:74ch; }
.svc-tnote b{ color:var(--heading); font-weight:400; }

/* 7 & 8 · Warranty (dark) and Who this is for */
.svc-split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; }
.svc-rt p{ font-size:1.0625rem; line-height:1.75; color:var(--body); max-width:64ch; text-wrap:pretty; }
.svc-rt p+p{ margin-top:20px; }
.svc-rt p.svc-lead{ font-size:1.25rem; line-height:1.55; color:var(--heading); font-weight:300; }
.band--dark .svc-rt p{ color:var(--on-dark-body); }
.band--dark .svc-rt p.svc-lead{ color:var(--white); }
.svc-who-photo{ border-radius:var(--r-xl); overflow:hidden; aspect-ratio:3/2; background:var(--util); margin-top:32px; }
.svc-who-photo img{ width:100%; height:100%; object-fit:cover; }

/* 9 · Quote form */
.svc-form-card{ background:var(--white); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:36px; box-shadow:var(--shadow-card); }
.svc-fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.svc-f{ display:flex; flex-direction:column; gap:7px; }
.svc-f--wide{ grid-column:1/-1; }
.svc-f label{ font-weight:500; font-size:.8rem; letter-spacing:.02em; color:var(--heading); }
.svc-f input,.svc-f select{ font-family:var(--f); font-weight:300; font-size:.95rem; color:var(--heading); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 13px; min-height:46px; width:100%; transition:border-color .15s, background .15s; }
.svc-f input::placeholder{ color:var(--placeholder); }
.svc-f input:focus,.svc-f select:focus{ outline:none; border-color:var(--heading); background:var(--white); }
.svc-f.is-error input,.svc-f.is-error select{ border-color:var(--cta-hover); }
.svc-f-err{ font-size:.78rem; color:var(--cta-hover); }
.svc-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.svc-form-err{ margin-top:18px; font-size:.9rem; color:var(--cta-hover); }
.svc-form-card .btn{ width:100%; margin-top:24px; }
.svc-form-card .btn[disabled]{ opacity:.65; cursor:progress; }
.svc-fine{ margin-top:16px; font-size:.86rem; color:var(--muted); text-align:center; }
.svc-form-done{ background:var(--white); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:36px; box-shadow:var(--shadow-card); }
.svc-form-done h3{ font-weight:500; font-size:1.25rem; line-height:1.3; }
.svc-form-done p{ margin-top:12px; font-size:1rem; line-height:1.7; color:var(--body); }

/* Motion */
@media (prefers-reduced-motion:reduce){
  .svc .btn-primary::after,.svc-acc-q .pm,.svc-tabbar button{ transition:none; }
}

/* Breakpoints — the handover's two */
@media (max-width:1080px){
  .svc-hero-grid,.svc-split,.svc-pkg-note{ grid-template-columns:1fr; gap:36px; }
  .svc-hero-photo{ aspect-ratio:16/9; }
  .svc-stats{ grid-template-columns:1fr; }
  .svc-stat{ border-right:0; border-bottom:1px solid var(--border); padding:32px 0 30px; }
  .svc-stat:last-child{ border-bottom:0; }
  .svc-stat+.svc-stat{ padding-left:0; }
  .svc-pkgs{ grid-template-columns:1fr; gap:28px; }
  .svc-pkg-tag{ left:22px; }
  .svc-wear-item{ grid-template-columns:56px 1fr; gap:8px 20px; }
  .svc-wear-item p{ grid-column:2; }
  .svc-scope{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .svc .wrap{ padding:0 22px; }
  .svc .band{ padding:64px 0; }
  .svc-hero{ padding:40px 0 56px; }
  .svc-fgrid{ grid-template-columns:1fr; }
  .svc-form-card,.svc-form-done{ padding:26px 22px; }
  .svc-tabbar{ gap:0; }
  .svc-tabbar button{ margin-right:20px; font-size:.94rem; }
}