/* ============================================================================
   Installation, Training, Spares and Service (id_cms=15) — service layout
   ----------------------------------------------------------------------------
   Loaded only on this page, from `cms/page.tpl`. Everything here is scoped to
   `.svc`, the wrapper class the CMS content itself carries, so the file is
   inert on every other CMS page even if it were ever loaded globally.

   Measured on the stock page before this existed (1440px):

     reading measure    832px capped by cms-premium.css, ~570px of empty right
     tables             2, both borderless 2-column prose tables; the phone
                        numbers rendered as a bare grid with no affordance —
                        no tel: links, nothing tappable on a phone
     h2 treatment       full-width hairline under every heading, which chopped
                        the page into six equal grey slabs with no hierarchy
     scannable elements 0 — one 90-word lede then six prose blocks

   The layout answers the question a buyer actually arrives with ("what do I
   get after I pay, and who do I call"), so the four included services are
   numbered pillars, the machine-side requirements are a spec table, and the
   phone numbers are cards with real `tel:` links.

   MARKUP CONSTRAINT: the HTML lives in the database and is re-purified on every
   back-office save. HTMLPurifier here strips <section>, data-* and aria-*
   (verified against Tools::purifyHTML() for about-premium.css). So every
   numeral, tick, rule and arrow below is drawn in CSS — the content is
   div/p/h2/h3/ul/li/span/a/table + class only. Keep it that way.

   PALETTE: pink and white only, plus neutral ink for body copy. No gold, no
   dark bands, no gradients — restraint is what reads as premium here.
   ========================================================================== */

:root {
  --skt-pink: #d50075;
  --skt-pink-dark: #9e0056;
  --skt-pink-tint: #fef0f7;
  --skt-pink-border: #f0dce8;
  --skt-ink: #1a0010;
  --skt-muted: #5c4453;
}

/* cms-premium.css caps `.page-cms.rich-text` at 52rem — the right measure for a
   column of prose, the wrong one for a stat band or a four-up card grid. The
   cap is lifted here and re-applied per block instead. */
.page-cms.rich-text:has(.svc) {
  max-width: none;
}

.svc {
  --svc-measure: 46rem;
  counter-reset: svcstep;
  color: #3a3a40;
}

/* ---------- Page title ----------
   page.tpl ships the h1 with class `h4`, so it rendered at 24px — smaller than
   the h2s underneath it, which is backwards. `:has(.svc)` keeps this off the
   other CMS pages that share this template (Delivery, Legal Notice, Terms…). */
body#cms:has(.svc) .page-header {
  text-align: center;
  margin-bottom: 0;
}

body#cms:has(.svc) .page-header h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--skt-ink);
  margin: 0;
}

/* ---------- Hero ---------- */
.svc__eyebrow {
  text-align: center;
  margin: 0 0 1rem;
}

.svc__eyebrow span {
  display: inline-block;
  padding: .4rem 1rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 999px;
  background: var(--skt-pink-tint);
  color: var(--skt-pink-dark);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-cms.rich-text .svc__lede {
  max-width: 46rem;
  margin: 1.25rem auto 0;
  text-align: center;
  font-size: clamp(1.125rem, 1rem + .7vw, 1.5rem);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--skt-ink);
}

.page-cms.rich-text .svc__intro {
  max-width: 38rem;
  margin: 1rem auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--skt-muted);
}

/* ---------- Stat band ----------
   Same construction as the About page's band (1px grid gap over a tinted
   background draws the hairlines), so the two pages read as one system. */
.svc__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: clamp(2.25rem, 4.5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--skt-pink-border);
  border: 1px solid var(--skt-pink-border);
  border-radius: 18px;
  overflow: hidden;
}

.svc__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: clamp(1.25rem, 3vw, 2rem) .75rem;
  background: #fff;
  text-align: center;
  transition: background-color .3s ease;
}

@media (hover: hover) {
  .svc__stat:hover {
    background: var(--skt-pink-tint);
  }
}

.svc__stat-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--skt-pink);
  /* Lining, tabular figures: the counter animation must not make the row twitch
     as it ticks through digits of different widths. */
  font-variant-numeric: lining-nums tabular-nums;
}

.svc__stat-label {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--skt-muted);
  line-height: 1.35;
}

@media (max-width: 767.98px) {
  .svc__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Blocks ---------- */
.svc__block {
  max-width: var(--svc-measure);
  margin: 0 auto clamp(2.75rem, 5.5vw, 4.5rem);
}

.page-cms.rich-text .svc__h2 {
  position: relative;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.05rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--skt-ink);
  margin: 0 0 1rem;
  padding: 0 0 .75rem;
  /* cms-premium.css draws a full-width hairline under every CMS h2; at this
     size it cut the page into slabs. A short brand rule replaces it. */
  border-bottom: 0;
}

.page-cms.rich-text .svc__h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--skt-pink);
}

/* The four included services are numbered 01–04 by CSS counter rather than by
   text in the content, so an editor reordering or rewording them cannot leave a
   stale numeral behind — and nothing depends on an attribute the purifier
   strips. "Service network" and "Who to call" carry no `--num` and so are not
   counted: they describe the company, not the package. */
/* Specificity matters here: the base rule above is
   `.page-cms.rich-text .svc__h2` (0,3,0) and sets `padding` as a SHORTHAND, so
   a `padding-left` on a (0,2,0) selector loses and the numeral lands on top of
   the heading text. Measured before this prefix was added: "01" overlapped
   "Installation and commissioning" at every breakpoint. */
.page-cms.rich-text .svc__block--num .svc__h2 {
  padding-left: 3.5rem;
}

.svc__block--num .svc__h2::before {
  counter-increment: svcstep;
  content: counter(svcstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .1em;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .06em;
  color: var(--skt-pink);
  background: var(--skt-pink-tint);
  border: 1px solid var(--skt-pink-border);
  border-radius: 999px;
  padding: .35rem .7rem;
  line-height: 1;
}

.svc__block--num .svc__h2::after {
  left: 3.5rem;
}

/* On a phone a 3.5rem indent costs a heading most of its line. The numeral
   moves above the heading instead of beside it. */
@media (max-width: 575.98px) {
  .page-cms.rich-text .svc__block--num .svc__h2 {
    padding-left: 0;
  }

  .svc__block--num .svc__h2::before {
    position: static;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 0 .6rem;
  }

  .svc__block--num .svc__h2::after {
    left: 0;
  }
}

.page-cms.rich-text .svc__h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--skt-ink);
  margin: 2rem 0 .75rem;
  padding: 0;
  border-bottom: 0;
}

.svc__standfirst {
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--skt-ink);
  margin-bottom: 1rem;
}

.svc__block p {
  margin-bottom: 1rem;
}

.svc__note {
  font-size: .875rem;
  color: var(--skt-muted);
}

/* ---------- Tick list ----------
   The tick is a pseudo-element, not a font icon: the About page inherited
   `<em class="icon-ok">` from a theme that left years ago and drew nothing at
   0×20px for a decade. Nothing here can go missing that way. */
.page-cms.rich-text .svc__points {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.svc__points li {
  position: relative;
  padding: .8rem 1rem .8rem 3rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 12px;
  background: #fff;
  font-weight: 600;
  color: var(--skt-ink);
  line-height: 1.5;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.svc__points li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--skt-pink) center / 12px 12px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.5 3.5L13 5'/%3E%3C/svg%3E");
}

@media (hover: hover) {
  .svc__points li:hover {
    border-color: var(--skt-pink);
    box-shadow: 0 8px 20px rgba(213, 0, 117, .1);
    transform: translateY(-2px);
  }
}

/* ---------- Spec table (site requirements) ----------
   Three columns of short technical values. On phones the whole table scrolls
   inside its own wrapper rather than forcing the page to scroll sideways —
   `display: block` on the table is what makes the overflow actually apply. */
.page-cms.rich-text .svc__spec,
.page-cms.rich-text .svc__warranty {
  width: 100%;
  margin: 1.25rem 0 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--skt-pink-border);
  border-radius: 14px;
  overflow: hidden;
  font-size: .9375rem;
}

.page-cms.rich-text .svc__spec th,
.page-cms.rich-text .svc__warranty th {
  background: var(--skt-pink-tint);
  color: var(--skt-ink);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--skt-pink-border);
  padding: .8rem 1rem;
}

.page-cms.rich-text .svc__spec td,
.page-cms.rich-text .svc__warranty td {
  border: 0;
  border-bottom: 1px solid #f4eef1;
  padding: .8rem 1rem;
  vertical-align: top;
  line-height: 1.5;
}

.page-cms.rich-text .svc__spec tbody tr:last-child td,
.page-cms.rich-text .svc__warranty tbody tr:last-child td {
  border-bottom: 0;
}

.page-cms.rich-text .svc__spec td:first-child,
.page-cms.rich-text .svc__warranty td:first-child {
  font-weight: 600;
  color: var(--skt-ink);
  white-space: nowrap;
}

/* The warranty table's first column is a product name, not a label — it has to
   be allowed to wrap. */
.page-cms.rich-text .svc__warranty td:first-child {
  white-space: normal;
}

/* Three columns of technical values do not fit a 390px phone. The table sits in
   a `.svc__scroll` wrapper in the content and scrolls inside it; the page body
   itself never scrolls sideways.

   The wrapper is a real div rather than `display: block; overflow: auto` on the
   <table>: turning a table into a block makes it size to its content, so it
   crushes every column to two words per line and never actually overflows —
   and putting the min-width back on `thead`/`tbody` splits them into two
   independent tables whose columns no longer line up. */
.svc__scroll {
  margin: 1.25rem 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-cms.rich-text .svc__scroll .svc__spec {
  margin: 0;
}

@media (max-width: 575.98px) {
  .page-cms.rich-text .svc__scroll .svc__spec {
    min-width: 33rem;
  }

  .page-cms.rich-text .svc__spec td:first-child {
    white-space: normal;
  }
}

/* ---------- Spare-part cards ---------- */
.svc__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 0;
}

.svc__card {
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 14px;
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease;
}

@media (hover: hover) {
  .svc__card:hover {
    border-color: var(--skt-pink);
    box-shadow: 0 8px 20px rgba(213, 0, 117, .08);
  }
}

.svc__card-t {
  font-weight: 700;
  color: var(--skt-ink);
  margin: 0 0 .4rem;
}

.page-cms.rich-text .svc__card-d {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--skt-muted);
  margin: 0;
}

@media (max-width: 575.98px) {
  .svc__cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- Callout ----------
   The "call, don't order online, if the line is down" advice is the single most
   useful sentence on the page for a customer in trouble, and it was buried
   mid-paragraph. */
.page-cms.rich-text .svc__callout {
  position: relative;
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem 1rem 3.25rem;
  border: 1px solid var(--skt-pink-border);
  border-left: 3px solid var(--skt-pink);
  border-radius: 0 12px 12px 0;
  background: var(--skt-pink-tint);
  color: var(--skt-ink);
  font-size: .9375rem;
  line-height: 1.6;
}

.page-cms.rich-text .svc__callout::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 1.05rem;
  width: 20px;
  height: 20px;
  background: center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d50075' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}

/* ---------- Credential strip (warranty block) ---------- */
.page-cms.rich-text .svc__creds {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}

.svc__creds li {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 14px;
  background: #fff;
  text-align: center;
  transition: background-color .3s ease, border-color .3s ease;
}

@media (hover: hover) {
  .svc__creds li:hover {
    background: var(--skt-pink-tint);
    border-color: var(--skt-pink);
  }
}

.svc__cred-k {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--skt-ink);
  line-height: 1.2;
}

.svc__cred-v {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--skt-muted);
}

@media (max-width: 575.98px) {
  .page-cms.rich-text .svc__creds {
    grid-template-columns: 1fr;
  }

  .svc__creds li {
    text-align: left;
  }
}

/* ---------- Offices ---------- */
.svc__offices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

.svc__office {
  padding: 1.25rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 14px;
  background: #fff;
}

.page-cms.rich-text .svc__office-k {
  margin: 0 0 .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--skt-pink);
}

.page-cms.rich-text .svc__office-a {
  margin: 0 0 .65rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--skt-ink);
}

.page-cms.rich-text .svc__office-l {
  margin: 0;
  font-size: .875rem;
}

@media (max-width: 575.98px) {
  .svc__offices {
    grid-template-columns: 1fr;
  }
}

/* ---------- City chips ---------- */
.page-cms.rich-text .svc__chips {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.svc__chips li {
  padding: .35rem .85rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 999px;
  background: #fff;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--skt-muted);
}

/* ---------- Contact cards ----------
   Was a borderless two-column table. On a phone the numbers were plain text:
   nothing to tap, nothing to copy cleanly. */
.svc__contacts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 0;
}

.svc__contact {
  padding: 1.25rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 14px;
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

@media (hover: hover) {
  .svc__contact:hover {
    border-color: var(--skt-pink);
    box-shadow: 0 10px 24px rgba(213, 0, 117, .1);
    transform: translateY(-2px);
  }
}

.page-cms.rich-text .svc__contact-k {
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--skt-pink);
}

.page-cms.rich-text .svc__contact-v {
  margin: 0 0 .3rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  line-height: 1.25;
}

.svc__contact-v a {
  color: var(--skt-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--skt-pink-border);
  transition: color .2s ease, border-color .2s ease;
}

.svc__contact-v a:hover,
.svc__contact-v a:focus-visible {
  color: var(--skt-pink);
  border-color: var(--skt-pink);
}

.page-cms.rich-text .svc__contact-d {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--skt-muted);
}

@media (max-width: 575.98px) {
  .svc__contacts {
    grid-template-columns: 1fr;
  }
}

/* ---------- CTA ----------
   `.btn-primary` is forced pink globally with !important in theme.css, so this
   is a plain anchor styled here instead — one button, one job, no fight with
   the theme's button rules. */
.page-cms.rich-text .svc__cta {
  margin: 1.75rem 0 0;
}

.svc__btn {
  display: inline-block;
  padding: .85rem 1.75rem;
  border-radius: 999px;
  background: var(--skt-pink);
  color: #fff !important;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.svc__btn:hover,
.svc__btn:focus-visible {
  background: var(--skt-pink-dark);
  box-shadow: 0 10px 24px rgba(213, 0, 117, .25);
  transform: translateY(-1px);
  color: #fff !important;
  text-decoration: none;
}

.page-cms.rich-text .svc__smallprint {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--skt-pink-border);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--skt-muted);
}

/* ---------- Focus ---------- */
.svc a:focus-visible,
.svc__btn:focus-visible {
  outline: 2px solid var(--skt-pink);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Scroll reveal ----------
   `.svc` only gains `is-ready` once service-premium.js runs, so with JS blocked
   or broken every block sits at its natural opacity instead of an invisible
   page. Failing open matters more here than the animation does. */
.svc.is-ready .svc__reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
              transform .6s cubic-bezier(.22, .61, .36, 1);
}

.svc.is-ready .svc__reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .svc.is-ready .svc__reveal,
  .svc.is-ready .svc__reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .svc__stat,
  .svc__points li,
  .svc__card,
  .svc__creds li,
  .svc__contact,
  .svc__btn {
    transition: none;
  }
}

/* ---------- Print ----------
   Buyers print this page for a purchase file. Cards keep their hairlines, the
   CTA button and the reveal state go. */
@media print {
  .svc.is-ready .svc__reveal,
  .svc.is-ready .svc__reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .svc__cta {
    display: none;
  }

  .svc__block {
    break-inside: avoid;
  }
}