/* ============================================================
   SERVICES — the recolour layer.
   Everything else on this page is the Install Day VSL's own CSS,
   copied file for file (selr-svcv-*.css). This file is the ONLY
   thing that makes the services page look like a different
   product, and it does it with colour alone: the VSL runs on the
   warm off-white ground, the services page runs inverted on the
   site's own near-black. Same components, same motion, same
   spacing. Nothing here changes a layout value.

   Ground:  --selr-near-black #161920 (the site's real imagery black)
   Accent:  --selr-purple #6736E2, unchanged. One accent still.
   Cards:   the VSL's dark cards become raised slate; the VSL's
            light cards become the near-white the site already uses.
   ============================================================ */

.svcv {
  --svcv-ground:      #12141A;  /* one step under near-black, so cards read */
  --svcv-ground-2:    #161920;  /* the site's near-black, alternate band */
  --svcv-card:        #1E212A;  /* raised card on the dark ground */
  --svcv-card-2:      #262A35;  /* the higher of the two card tiers */
  --svcv-hair:        rgba(255, 255, 255, 0.10);
  --svcv-hair-strong: rgba(255, 255, 255, 0.18);
  --svcv-ink:         #FFFFFA;
  --svcv-ink-2:       rgba(255, 255, 250, 0.72);
  --svcv-ink-3:       rgba(255, 255, 250, 0.50);
  --svcv-purple:      #6736E2;
  --svcv-purple-lift: #8A63EE;  /* purple readable ON the dark ground */
  --svcv-glow:        radial-gradient(120% 90% at 50% 0%, rgba(103, 54, 226, 0.22) 0%, rgba(103, 54, 226, 0) 62%);

  /* green / red — the approved exception, and ONLY on the for/not-for lists */
  --svcv-yes:         #4BAE7E;
  --svcv-no:          #C25D5D;

  background: var(--svcv-ground);
  color: var(--svcv-ink);
}

/* the page ground behind everything, including overscroll */
html.svcv-html, body.svcv-body { background: #12141A; }

/* ---------- TYPE ----------
   The two framer preset classes the VSL partials use, written out
   as real properties so the 486KB harvest sheet never ships here.
   Values read from harvest.css lines 631/632/633. */
.framer-text { margin: 0; }
.framer-styles-preset-pc4jh9 {
  font-family: "Manrope Variable", "Manrope", sans-serif;
  font-size: 80px;
  font-variation-settings: "wght" 585;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-feature-settings: "liga" off, "ss01" on;
  color: var(--svcv-ink);
}
@media (max-width: 1199px) { .framer-styles-preset-pc4jh9 { font-size: 60px; } }
@media (max-width: 809px)  { .framer-styles-preset-pc4jh9 { font-size: 35px; } }

/* ---------- SECTION GROUND ---------- */
.svcv .selr-sec { background: transparent; }
.svcv .selr-sec.is-band { background: var(--svcv-ground-2); }

/* ---------- HERO ----------
   The purple bloom is the one thing the services page has that the
   Install Day page does not. It is the product marker: you know
   which page you are on before you read a word. */
.svcv .selr-vsl-hero { background: var(--svcv-ground); position: relative; }
.svcv .selr-vsl-hero::before {
  content: ""; position: absolute; inset: 0; background: var(--svcv-glow);
  pointer-events: none;
}
.svcv .selr-vsl-hero-inner { position: relative; }
.svcv .selr-vsl-hero h1,
.svcv .selr-vsl-hero h1 * { color: var(--svcv-ink); }
/* the tone span (and the word-split spans inside it) must outrank the
   blanket h1 * rule above, or the second line renders white */
.svcv .selr-vsl-hero h1 .selr-vsl-h1-tone,
.svcv .selr-vsl-hero h1 .selr-vsl-h1-tone * { color: var(--svcv-purple-lift); }

/* the roof-line headline runs two full sentences; a step down from the
   80px preset keeps the hero at three lines instead of five */
@media (min-width: 1200px) { .svcv .selr-vsl-hero h1 { font-size: 64px; } }
.svcv .selr-vsl-product { color: var(--svcv-ink-2); }
.svcv .selr-vsl-event,
.svcv .selr-vsl-sub { color: var(--svcv-ink-2); }
.svcv .selr-city-tag {
  background: rgba(255, 255, 250, 0.08);
  color: var(--svcv-ink);
  border: 1px solid var(--svcv-hair);
}
.svcv .selr-vsl-proof-line { color: var(--svcv-ink-3); }
.svcv .selr-vsl-stars svg { fill: var(--svcv-purple-lift); }
.svcv .selr-vsl-faces img { box-shadow: 0 0 0 2px var(--svcv-ground); }

/* buttons: solid purple stays the primary, ghost inverts */
.svcv .selr-pill-btn,
.svcv .selr-vsl-btn { background: var(--svcv-purple); color: #FFFFFA; }
.svcv .selr-vsl-btn-ghost {
  background: rgba(255, 255, 250, 0.06);
  color: var(--svcv-ink);
  border: 1px solid var(--svcv-hair-strong);
}
.svcv .selr-vsl-btn-ghost:hover { background: rgba(255, 255, 250, 0.12); }
.svcv .selr-vsl-btn-play { border-left-color: var(--svcv-ink); }

/* the film card */
.svcv .selr-vsl-card { background: var(--svcv-card); border: 1px solid var(--svcv-hair); }
.svcv .selr-vsl-card-label {
  background: rgba(18, 20, 26, 0.55);
  color: var(--svcv-ink);
  border: 1px solid var(--svcv-hair);
}

/* ---------- INTRO (full-bleed image card) ---------- */
.svcv .selr-intro-card { background: var(--svcv-ground-2); }
.svcv .selr-intro-veil {
  background: linear-gradient(180deg, rgba(18, 20, 26, 0.55) 0%, rgba(18, 20, 26, 0.82) 100%);
}
.svcv .selr-intro-h,
.svcv .selr-intro-phrase { color: var(--svcv-ink); }
.svcv #intro .selr-intro-tone { color: var(--svcv-purple-lift); }
.svcv .selr-intro-sub,
.svcv .selr-intro-line { color: var(--svcv-ink-2); }

/* ---------- COMPARISON ----------
   The VSL pairs a near-white card with a purple one on a warm
   ground. On the dark ground that reads as one hole and one panel,
   so the pair becomes recessed vs purple-lifted instead: the same
   contrast job, no hole. comparison-pin.css scopes everything to
   #before-after, so these have to as well or they lose the cascade. */
.svcv #before-after { background: var(--svcv-ground); }
.svcv #before-after .selr-cmp-line-a { color: var(--svcv-ink); }
.svcv #before-after .selr-cmp-line-b { color: var(--svcv-ink-3); }
.svcv #before-after .selr-cmp-card.is-before {
  background: #0D0F14;
  box-shadow: inset 0 0 0 1px var(--svcv-hair);
}
.svcv #before-after .selr-cmp-card.is-after {
  background: linear-gradient(155deg, #6736E2 0%, #4A22B0 100%);
}
.svcv #before-after .selr-cmp-label { color: var(--svcv-ink-3); }
.svcv #before-after .selr-cmp-title { color: var(--svcv-ink); }
.svcv #before-after .selr-cmp-item p { color: var(--svcv-ink-2); }
.svcv #before-after .is-after .selr-cmp-label { color: #EEE8FF; }
.svcv #before-after .is-after .selr-cmp-title { color: #FFFFFA; }
.svcv #before-after .is-after .selr-cmp-item p { color: #EEE8FF; }
.svcv #before-after .selr-cmp-lockup { filter: brightness(0) invert(1); opacity: 0.85; }
.svcv #before-after .is-before .selr-check {
  background: rgba(255, 255, 250, 0.10); color: var(--svcv-ink-3);
}
.svcv #before-after .is-after .selr-check { background: #FFFFFA; color: #4A22B0; }

/* ---------- THE PATH (the ownership accordion, reused) ---------- */
.svcv .selr-own { background: var(--svcv-ground-2); }
.svcv .selr-own-h, .svcv .selr-own-head h2 { color: var(--svcv-ink); }
.svcv .selr-own-tone { color: var(--svcv-purple-lift); }
.svcv .selr-own-sub { color: var(--svcv-ink-2); }
.svcv .selr-section-kicker { color: var(--svcv-purple-lift); }
.svcv .selr-own-card {
  background: var(--svcv-card);
  border: 1px solid var(--svcv-hair);
  color: var(--svcv-ink);
}
.svcv .selr-own-card.is-open { background: var(--svcv-card-2); border-color: var(--svcv-hair-strong); }
.svcv .selr-own-card.is-selr.is-open {
  background: linear-gradient(150deg, #2A1E58 0%, var(--svcv-card-2) 70%);
  border-color: rgba(138, 99, 238, 0.45);
}
.svcv .selr-own-num { color: var(--svcv-ink-3); }
.svcv .selr-own-name { color: var(--svcv-purple-lift); }
.svcv .selr-own-title { color: var(--svcv-ink); }
.svcv .selr-own-copy { color: var(--svcv-ink-2); }
.svcv .selr-own-icon { background: rgba(255, 255, 250, 0.07); color: var(--svcv-ink); }
.svcv .selr-own-card.is-selr .selr-own-icon { background: var(--svcv-purple); color: #FFFFFA; }
.svcv .selr-own-dots i { background: rgba(255, 255, 250, 0.22); }

/* the course, faded, with the sticker across it */
.svcv .selr-own-card.is-soon { opacity: 0.42; pointer-events: none; position: relative; }
.svcv .selr-own-card.is-soon .selr-soon {
  position: absolute; top: 16px; right: 14px; z-index: 2;
  transform: rotate(-4deg);
  background: var(--svcv-purple); color: #FFFFFA;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 6px; opacity: 1;
}

/* ---------- WHO — green and red, the approved exception ---------- */
.svcv .selr-who { background: var(--svcv-ground); }
.svcv .selr-who-head h2, .svcv .selr-who-h3 { color: var(--svcv-ink); }
.svcv .selr-who-tone { color: var(--svcv-purple-lift); }
.svcv .selr-who-sub, .svcv .selr-who-list p { color: var(--svcv-ink-2); }
.svcv .selr-who-kicker { color: var(--svcv-ink-3); }
.svcv .selr-who-card {
  background: var(--svcv-card); border: 1px solid var(--svcv-hair);
}
.svcv .selr-who-card.is-quiet { background: #0D0F14; }
.svcv .selr-who-check { background: var(--svcv-yes); color: #0D0F14; }
.svcv .selr-who-check svg { stroke: currentColor; fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.svcv .selr-who-card.is-quiet .selr-who-check { background: var(--svcv-no); color: #0D0F14; }
.svcv .selr-who-quote { color: var(--svcv-ink-2); border-top-color: var(--svcv-hair); }
.svcv .selr-who-attr { color: var(--svcv-ink-3); }

/* ---------- REQUEST ---------- */
.svcv .selr-apply { background: var(--svcv-ground-2); }
.svcv .selr-apply-card {
  background: var(--svcv-card); border: 1px solid var(--svcv-hair);
}
.svcv .selr-apply-h { color: var(--svcv-ink); }
.svcv .selr-apply-kicker { color: var(--svcv-purple-lift); }
.svcv .selr-apply-sub { color: var(--svcv-ink-2); }

/* the gate form, inverted. It is fully tokenised, so the whole
   inversion is a token flip and not one rule about its layout. */
.svcv .selr-gate-form {
  --sgf-surface:    var(--svcv-card);
  --sgf-surface-hi: #0D0F14;
  --sgf-ink:        var(--svcv-ink);
  --sgf-muted:      var(--svcv-ink-3);
  --sgf-accent:     var(--svcv-purple-lift);
  --sgf-hair:       var(--svcv-hair);
  --sgf-field:      rgba(255, 255, 250, 0.05);
  --sgf-field-focus: rgba(255, 255, 250, 0.10);
}
.svcv .selr-gate-form .card { background: transparent; }
.svcv .selr-gate-form .opt { background: var(--sgf-field); border-color: var(--svcv-hair); }
.svcv .selr-gate-form .opt:hover { background: rgba(255, 255, 250, 0.11); }
.svcv .selr-gate-form .btn { background: var(--svcv-purple); color: #FFFFFA; }

/* ---------- STRIP (the proof numbers) ---------- */
.svcv .selr-strip { background: var(--svcv-ground); }
.svcv .selr-strip-n { color: var(--svcv-ink); }
.svcv .selr-strip-l { color: var(--svcv-ink-3); }
.svcv .selr-strip-item { border-color: var(--svcv-hair); }

/* ---------- the seam into the site's purple close band ----------
   The footer replica below is the light site footer. Without this
   the dark page ends on a hard edge above the purple. */
.svcv-seam {
  height: 140px;
  background: linear-gradient(180deg, var(--svcv-ground-2) 0%, #3D1F8C 62%, #6736E2 100%);
}

@media (prefers-reduced-motion: reduce) {
  .svcv .selr-vsl-hero::before { opacity: 0.6; }
}

/* ---------- the journey chip ----------
   The rail name stays the offer name so a collapsed card reads in
   one line. Where the card sits on the path is a chip.

   The chip is ABSOLUTE, deliberately. On mobile the accordion card
   is a four-row grid (rail / name / title / copy) and the collapsed
   state works by driving the last row to 0fr. A fifth flow child
   shifts the copy into an implicit row, the 0fr lands on the wrong
   thing, and every card opens at once into a tall empty box. Taking
   the chip out of flow keeps that grid exactly four rows. */
.svcv .selr-own-chip {
  position: absolute; top: 22px; right: 22px; z-index: 2;
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 40px;
  background: rgba(255, 255, 250, 0.10);
  color: var(--svcv-ink-2);
  border: 1px solid var(--svcv-hair);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .32s ease, transform .32s ease;
  pointer-events: none;
}
.svcv .selr-own-card { position: relative; }
.svcv .selr-own-card.is-open .selr-own-chip {
  opacity: 1; transform: none; transition-delay: 170ms;
}
.svcv .selr-own-card.is-selr.is-open .selr-own-chip {
  background: rgba(138, 99, 238, 0.24);
  border-color: rgba(138, 99, 238, 0.5);
  color: #EEE8FF;
}
/* on a phone every card is open enough to read, so the chip always shows */
@media (max-width: 809.98px) {
  .svcv .selr-own-chip { opacity: 1; transform: none; top: 20px; right: 20px; }
  /* the mobile sheet paints collapsed titles #242424 for the light
     ground. On the dark ground that is invisible. */
  .svcv .selr-own-card:not(.is-open) .selr-own-title,
  .svcv .selr-own-card.is-selr:not(.is-open) .selr-own-title { color: var(--svcv-ink); }
  .svcv .selr-own-card:not(.is-open) .selr-own-copy { color: var(--svcv-ink-2); }
  .svcv .selr-own-name { padding-right: 120px; }
}

/* the quiet who card, actually quieter than its neighbour */
.svcv .selr-who-card.is-quiet { background: #0C0E13; }

/* The VSL hero sets its sub tight under a two-line headline. This one
   runs to four lines on a phone, and the descenders were landing on the
   first line of the sub. Give the pair real air at every width. */
.svcv .selr-vsl-hero h1 { margin-bottom: 22px; }
.svcv .selr-vsl-sub { margin-top: 0; }
@media (max-width: 809px) {
  .svcv .selr-vsl-hero h1 { margin-bottom: 18px; }
}

/* ---------- the path, on a phone ----------
   The accordion's mobile state collapses the copy row to 0fr, which
   on a four-card stack cuts a sentence off mid-word. There is no
   hover on a phone and no reason to hide three of four services, so
   every card reads in full and the accordion becomes a plain list. */
@media (max-width: 809.98px) {
  .svcv .selr-own-card,
  .svcv .selr-own-card.is-open { grid-template-rows: auto auto auto 1fr; }
  .svcv .selr-own-card .selr-own-copy { padding-top: 12px; }
  .svcv .selr-own-chip { font-size: 10px; padding: 5px 9px; letter-spacing: 0.06em; }
  .svcv .selr-own-card.is-soon .selr-own-chip { display: none; }
  .svcv .selr-own-card.is-soon .selr-soon { top: 20px; right: 20px; }
}

/* intro.css paints its own ground at ID specificity, and it is the
   warm off-white. The card inside it is already the site near-black,
   so only the frame around it needs turning. */
.svcv section#intro.selr-intro { background: var(--svcv-ground); }
.svcv #intro .selr-intro-card { background: var(--svcv-ground-2); }

/* The gate form renders its own heading. The lux sheet hides it inside
   .p-apply-form, which is the private-install wrapper, not this one.
   Without this the words "Enquire now" appear twice, side by side. */
.svcv .selr-apply-form .selr-gate-form .head { display: none; }
.svcv .selr-apply-form .selr-gate-form .card { padding: 0; background: transparent; }

/* the chosen answer, on the dark ground. The light sheet marks it with
   a hairline, which all but disappears here. */
.svcv .selr-gate-form .opt:has(input:checked) {
  background: rgba(103, 54, 226, 0.30);
  border-color: var(--svcv-purple-lift);
}
.svcv .selr-gate-form .opt:has(input:checked) .opt-key {
  background: var(--svcv-purple-lift); color: #FFFFFA;
}

/* ---------- the intro, rewritten 2026-08-26 ----------
   Luke: the text over the image could not be read, and the image is
   the good part. So the words sit on the dark ground like every other
   section head, and the photo runs clean below them with nothing on it. */
.svcv .selr-pi-intro { background: var(--svcv-ground); }
.svcv .selr-pi-intro .selr-sec-inner { display: flex; flex-direction: column; gap: 48px; }
.svcv .selr-pi-tone { color: var(--svcv-purple-lift); }
.svcv .selr-pi-photo { border-radius: 40px; overflow: hidden; }
.svcv .selr-pi-photo img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 10; object-fit: cover; }
@media (max-width: 809px) {
  .svcv .selr-pi-intro .selr-sec-inner { gap: 28px; }
  .svcv .selr-pi-photo { border-radius: 30px; }
  .svcv .selr-pi-photo img { aspect-ratio: 4 / 3; }
}

/* ---------- the traveller, on the dark ground ---------- */
body.svcv-body .selr-traveller .selr-traveller-track { background: rgba(255, 255, 250, 0.14); }
body.svcv-body .selr-traveller .selr-traveller-fill { background: var(--svcv-purple-lift, #8A63EE); }

/* ---------- the footer, meeting the dark page ----------
   The close band and the seam are gone, so the light footer wrap
   now rises straight out of the dark ground behind its purple dome. */
body.svcv-body .svc-footerwrap { background: var(--svcv-ground, #12141A); }

/* ---------- the enquiry process rail (2026-08-26) ----------
   Luke: the by-request handling has to be unmissable, and the highest
   ticket page earns the cleanest form. The left column now walks the
   four steps from enquiry to booked call, on a hairline rail. */
.svcv .selr-pi-steps {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 26px;
  position: relative;
}
.svcv .selr-pi-steps::before {
  content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px;
  width: 1px; background: var(--svcv-hair);
}
.svcv .selr-pi-steps li {
  position: relative; padding-left: 52px;
  display: flex; flex-direction: column; gap: 4px;
}
.svcv .selr-pi-step-n {
  position: absolute; left: 0; top: 0;
  width: 31px; height: 31px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--svcv-card-2); border: 1px solid var(--svcv-hair-strong);
  color: var(--svcv-purple-lift);
  font-size: 13px; font-weight: 600;
}
.svcv .selr-pi-steps li:last-child .selr-pi-step-n {
  background: var(--svcv-purple); border-color: var(--svcv-purple);
  color: #FFFFFA;
}
.svcv .selr-pi-step-t {
  font-size: 16px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--svcv-ink);
}
.svcv .selr-pi-step-l {
  font-size: 14px; line-height: 1.5; color: var(--svcv-ink-3);
  max-width: 340px;
}
@media (max-width: 809px) {
  .svcv .selr-pi-steps { margin-top: 24px; gap: 20px; }
}

/* ---------- the done screen's reassurance rows ---------- */
.svcv .selr-gate-form .done-points {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 18px;
  text-align: left;
}
.svcv .selr-gate-form .done-points li { display: flex; gap: 14px; align-items: flex-start; }
.svcv .selr-gate-form .dp-mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--svcv-purple); color: #FFFFFA;
  margin-top: 1px;
}
.svcv .selr-gate-form .dp-body { display: flex; flex-direction: column; gap: 3px; }
.svcv .selr-gate-form .dp-t { font-weight: 600; font-size: 15px; letter-spacing: -0.02em; color: var(--svcv-ink); }
.svcv .selr-gate-form .dp-l { font-size: 14px; line-height: 1.5; color: var(--svcv-ink-3); max-width: 420px; }