/* ==========================================================================
   Top Sydney Cleaners - SERVICE PAGE SYSTEM  (Stage 8)
   Navy + gold, consistent with the Stage-7 homepage. Loaded only on the
   service pages / services hub (tsc_use_new_service), AFTER components.css.
   Self-contained: re-declares the design tokens on body.tsc-servicev2 and
   provides all service-page layout. Elementor content of these pages stays
   dormant; remove the enqueue + template_include branch to revert.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 - TOKENS  (scoped: also set by body.tsc-scope in components.css)
   -------------------------------------------------------------------------- */
body.tsc-servicev2{
  --tsc-navy:#0E2A47; --tsc-navy-900:#0B2138; --tsc-navy-600:#17395B; --tsc-navy-050:#EAF1F8;
  --tsc-gold:#F4A62A; --tsc-gold-600:#DE9012; --tsc-gold-050:#FCEFD9;

  --tsc-color-primary:#0E2A47; --tsc-color-primary-strong:#0B2138; --tsc-color-primary-soft:#EAF1F8;
  --tsc-color-secondary:#0E2A47; --tsc-color-secondary-strong:#0B2138;
  --tsc-color-cta:#F4A62A; --tsc-color-cta-strong:#DE9012;
  --tsc-color-accent:#F4A62A; --tsc-color-accent-strong:#DE9012;

  --tsc-color-bg:#F5F8FC; --tsc-color-surface:#FFFFFF; --tsc-color-surface-2:#EEF3F9; --tsc-color-card:#FFFFFF;
  --tsc-color-text:#0E2A47; --tsc-color-text-muted:#45566A; --tsc-color-text-subtle:#566579;
  --tsc-color-border:#E2E9F1; --tsc-color-border-strong:#C7D4E1;

  --tsc-amber:#F4A62A; --tsc-amber-600:#DE9012;
  --tsc-blue:#0E2A47; --tsc-blue-700:#0B2138; --tsc-blue-050:#EAF1F8;
  --tsc-ink:#0E2A47; --tsc-ink-70:#3E4E62; --tsc-ink-45:#566579; --tsc-rule:#E2E9F1;

  --tsc-shadow-sm:0 1px 2px rgba(14,42,71,.08), 0 2px 6px rgba(14,42,71,.06);
  --tsc-shadow-md:0 8px 22px rgba(14,42,71,.12);
  --tsc-shadow-lg:0 20px 48px rgba(14,42,71,.18);
  --tsc-radius-lg:14px;

  --tsc-font:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
body.tsc-servicev2{ font-family:var(--tsc-font); background:var(--tsc-color-bg); color:var(--tsc-color-text); }
body.tsc-servicev2 .tsc-svc-main{ overflow-x:clip; }
/* Astra's main.min.css sets `text-transform: capitalize` + a serif family on
   h1-h6. Reset it for the service system so sentence-case copy renders as
   written and everything uses the design font. */
body.tsc-servicev2 .tsc-svc-main :is(h1,h2,h3,h4){
  text-transform:none;
  font-family:var(--tsc-font);
}

/* --------------------------------------------------------------------------
   2 - PRIMITIVES  (mirrors of the homepage's shared bits, service-scoped)
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-container{ max-width:1200px; margin-inline:auto; padding-inline:clamp(16px,4vw,32px); }
body.tsc-servicev2 .tsc-container--narrow{ max-width:820px; }

body.tsc-servicev2 .tsc-section{ padding-block:clamp(44px,6vw,80px); }
body.tsc-servicev2 .tsc-section--tight{ padding-block:clamp(32px,4vw,52px); }
body.tsc-servicev2 .tsc-section--surface{ background:var(--tsc-color-surface); }
body.tsc-servicev2 .tsc-section--alt{ background:var(--tsc-color-surface-2); }
body.tsc-servicev2 .tsc-section__head{ max-width:44rem; margin:0 auto clamp(26px,4vw,40px); }
body.tsc-servicev2 .tsc-section--center .tsc-section__head,
body.tsc-servicev2 .tsc-section__head.tsc-section--center{ text-align:center; }
body.tsc-servicev2 .tsc-section__title{
  margin:.5rem 0 0; font-size:clamp(1.55rem,1.15rem+1.5vw,2.15rem);
  font-weight:800; line-height:1.2; color:var(--tsc-navy); text-wrap:balance;
}
body.tsc-servicev2 .tsc-section__lead{
  margin:.7rem 0 0; font-size:var(--tsc-text-base,1rem); line-height:1.6;
  color:var(--tsc-color-text-muted); text-wrap:pretty;
}
body.tsc-servicev2 .tsc-section__cta{ margin-top:clamp(22px,3vw,32px); display:flex; flex-wrap:wrap; gap:12px 18px; }
body.tsc-servicev2 .tsc-section__cta.tsc-section--center{ justify-content:center; }

body.tsc-servicev2 .tsc-eyebrow{
  display:inline-flex; align-items:center; gap:.5em; padding:.36em .95em; border-radius:999px;
  background:var(--tsc-gold-050); color:var(--tsc-navy); border:1px solid rgba(244,166,42,.4);
  font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
body.tsc-servicev2 .tsc-accent{
  color:inherit;
  background-image:linear-gradient(var(--tsc-gold), var(--tsc-gold));
  background-repeat:no-repeat; background-position:0 100%; background-size:100% .14em;
  padding-bottom:.06em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* buttons: reuse .tsc-btn from components.css; add the premium micro-interaction */
body.tsc-servicev2 .tsc-btn{
  transition:transform .15s cubic-bezier(.22,1,.36,1), box-shadow .15s cubic-bezier(.22,1,.36,1), background .15s cubic-bezier(.22,1,.36,1);
}
body.tsc-servicev2 .tsc-btn--primary{ background:var(--tsc-gold); color:var(--tsc-navy); border-color:var(--tsc-gold); }
body.tsc-servicev2 .tsc-btn--primary:hover{ background:var(--tsc-gold-600); box-shadow:0 10px 26px rgba(244,166,42,.4); transform:translateY(-2px); }
body.tsc-servicev2 .tsc-btn--secondary{ background:var(--tsc-navy); color:#fff; border-color:var(--tsc-navy); }
body.tsc-servicev2 .tsc-btn--secondary:hover{ background:var(--tsc-navy-900); transform:translateY(-2px); }
body.tsc-servicev2 .tsc-btn:active{ transform:translateY(0); }
body.tsc-servicev2 .tsc-btn--sm{ padding:10px 18px; font-size:.9rem; }

body.tsc-servicev2 .tsc-cta-link{
  display:inline-flex; align-items:center; gap:.4em; font-weight:700; color:var(--tsc-navy);
  text-decoration:none;
}
body.tsc-servicev2 .tsc-cta-link::after{ content:"\2192"; transition:transform .15s ease; }
body.tsc-servicev2 .tsc-cta-link:hover{ color:var(--tsc-navy-900); }
body.tsc-servicev2 .tsc-cta-link:hover::after{ transform:translateX(4px); }

body.tsc-servicev2 .tsc-cta-phone{
  display:inline-flex; align-items:center; gap:.5em; text-decoration:none;
  color:var(--tsc-color-text-muted); font-weight:600;
}
body.tsc-servicev2 .tsc-cta-phone__ico{ width:1.15em; height:1.15em; color:var(--tsc-gold-600); flex:none; }
body.tsc-servicev2 .tsc-cta-phone__label{ font-size:.8rem; color:var(--tsc-color-text-subtle); }
body.tsc-servicev2 .tsc-cta-phone__num{ color:var(--tsc-navy); font-weight:700; }
body.tsc-servicev2 .tsc-cta-phone:hover .tsc-cta-phone__num{ color:var(--tsc-navy-900); }

body.tsc-servicev2 a:focus-visible,
body.tsc-servicev2 button:focus-visible,
body.tsc-servicev2 summary:focus-visible{ outline:3px solid var(--tsc-gold); outline-offset:2px; border-radius:6px; }

/* --------------------------------------------------------------------------
   3 - BREADCRUMB
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-crumbs{
  font-size:.82rem; color:var(--tsc-color-text-subtle);
  padding-block:14px 0;
}
body.tsc-servicev2 .tsc-crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5em; align-items:center; }
body.tsc-servicev2 .tsc-crumbs a{ color:var(--tsc-color-text-muted); text-decoration:none; }
body.tsc-servicev2 .tsc-crumbs a:hover{ color:var(--tsc-navy); text-decoration:underline; }
body.tsc-servicev2 .tsc-crumbs li + li::before{ content:"/"; margin-right:.5em; color:var(--tsc-color-border-strong); }
body.tsc-servicev2 .tsc-crumbs [aria-current]{ color:var(--tsc-navy); font-weight:600; }

/* --------------------------------------------------------------------------
   4 - HERO
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-svc-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 460px at 84% 6%, rgba(244,166,42,.10), transparent 60%),
    linear-gradient(180deg, #EEF4FB 0%, #F5F8FC 100%);
  padding-block:clamp(24px,3.5vw,44px) clamp(10px,1.6vw,18px);
}
body.tsc-servicev2 .tsc-svc-hero__inner{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,64px); align-items:center;
}
body.tsc-servicev2 .tsc-svc-hero__copy{ max-width:36rem; }
body.tsc-servicev2 .tsc-svc-hero__title{
  margin:.7rem 0 .7rem; font-size:clamp(1.95rem,1.3rem+2.4vw,2.95rem);
  line-height:1.13; font-weight:800; letter-spacing:-.015em; color:var(--tsc-navy);
}
body.tsc-servicev2 .tsc-svc-hero__lead{
  margin:0; font-size:var(--tsc-text-md,1.075rem); line-height:1.6;
  color:var(--tsc-color-text-muted); max-width:33rem; text-wrap:pretty;
}
body.tsc-servicev2 .tsc-svc-hero__points{
  list-style:none; margin:var(--tsc-space-5,20px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem;
}
body.tsc-servicev2 .tsc-svc-hero__points li{
  display:flex; align-items:center; gap:.5em; font-size:.9rem; font-weight:600; color:var(--tsc-navy);
}
body.tsc-servicev2 .tsc-svc-hero__points svg{ width:1.15rem; height:1.15rem; color:var(--tsc-gold-600); flex:none; }

body.tsc-servicev2 .tsc-cta-group{ display:flex; flex-wrap:wrap; gap:12px 14px; margin:var(--tsc-space-5,20px) 0 12px; }
body.tsc-servicev2 .tsc-svc-hero .tsc-btn{ padding:14px 26px; font-size:1rem; }

body.tsc-servicev2 .tsc-svc-hero__rating{
  margin-top:16px; padding-top:16px; border-top:1px solid var(--tsc-color-border);
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  font-size:.9rem; color:var(--tsc-color-text-muted);
}
body.tsc-servicev2 .tsc-svc-hero__rating .tsc-g{
  width:22px; height:22px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:#fff; box-shadow:var(--tsc-shadow-sm);
  font-weight:800; color:#4285F4; font-size:13px;
}
body.tsc-servicev2 .tsc-svc-hero__rating strong{ color:var(--tsc-navy); font-weight:800; }
body.tsc-servicev2 .tsc-stars{ display:inline-flex; gap:1px; }
body.tsc-servicev2 .tsc-stars__s{ width:15px; height:15px; }
body.tsc-servicev2 .tsc-stars__s.is-on{ fill:var(--tsc-gold); color:var(--tsc-gold); }
body.tsc-servicev2 .tsc-stars__s{ fill:#D8DEE7; color:#D8DEE7; }

body.tsc-servicev2 .tsc-svc-hero__media{ position:relative; }
body.tsc-servicev2 .tsc-svc-hero__frame{
  border-radius:20px; overflow:hidden; aspect-ratio:4 / 3;
  box-shadow:0 26px 56px -22px rgba(14,42,71,.45);
}
body.tsc-servicev2 .tsc-svc-hero__frame img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; }
body.tsc-servicev2 .tsc-svc-hero__media::before{
  content:""; position:absolute; right:-5%; top:-8%; width:44%; aspect-ratio:1; z-index:-1;
  border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(244,166,42,.26), transparent 70%);
}

@media (max-width:860px){
  body.tsc-servicev2 .tsc-svc-hero__inner{ grid-template-columns:1fr; }
  body.tsc-servicev2 .tsc-svc-hero__frame{ aspect-ratio:4 / 3; }
  body.tsc-servicev2 .tsc-cta-group > .tsc-btn{ flex:1 1 100%; }
}

/* --------------------------------------------------------------------------
   5 - TRUST STRIP  (compact, verified figures only)
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-svc-trust{ background:transparent; padding-block:0 clamp(10px,1.6vw,16px); }
body.tsc-servicev2 .tsc-svc-trust__inner{
  margin-top:clamp(24px, 4vw, 40px);
  background:linear-gradient(180deg, var(--tsc-navy) 0%, var(--tsc-navy-900) 100%);
  color:#fff; border:1px solid rgba(255,255,255,.09); border-radius:16px;
  box-shadow:0 24px 54px -24px rgba(14,42,71,.5);
  padding:clamp(16px,2.2vw,22px) clamp(14px,3vw,28px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  align-content:center;
}
body.tsc-servicev2 .tsc-svc-trust__item{ text-align:center; display:flex; flex-direction:column; align-items:center; position:relative; }
body.tsc-servicev2 .tsc-svc-trust__item + .tsc-svc-trust__item::before{
  content:""; position:absolute; left:-7px; top:14%; bottom:14%; width:1px; background:rgba(255,255,255,.12);
}
body.tsc-servicev2 .tsc-svc-trust__ico{ width:30px; height:30px; margin-bottom:8px; color:var(--tsc-gold); display:inline-flex; align-items:center; justify-content:center; line-height:1; }
body.tsc-servicev2 .tsc-svc-trust__ico svg{ width:24px; height:24px; }
body.tsc-servicev2 .tsc-svc-trust__num{ font-size:clamp(1.35rem, 1.05rem + 1vw, 1.7rem); font-weight:800; line-height:1.15; }
body.tsc-servicev2 .tsc-svc-trust__label{ margin-top:4px; font-size:.78rem; line-height:1.35; color:rgba(255,255,255,.72); }
@media (max-width:720px){
  body.tsc-servicev2 .tsc-svc-trust__inner{ grid-template-columns:repeat(2,1fr); gap:16px 12px; }
  body.tsc-servicev2 .tsc-svc-trust__item + .tsc-svc-trust__item::before{ display:none; }
}

/* --------------------------------------------------------------------------
   6 - INTRO  (who it's for / what to expect)
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-svc-intro__inner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,52px); align-items:start;
}
body.tsc-servicev2 .tsc-svc-intro__body p{ margin:0 0 1rem; color:var(--tsc-color-text-muted); line-height:1.7; }
body.tsc-servicev2 .tsc-svc-intro__body p:last-child{ margin-bottom:0; }
body.tsc-servicev2 .tsc-svc-intro__aside{
  background:var(--tsc-color-surface); border:1px solid var(--tsc-color-border);
  border-radius:16px; padding:clamp(20px,2.6vw,28px);
}
body.tsc-servicev2 .tsc-svc-intro__aside h3{ margin:0 0 .8rem; font-size:1.05rem; font-weight:800; color:var(--tsc-navy); }
body.tsc-servicev2 .tsc-keylist{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
body.tsc-servicev2 .tsc-keylist li{
  display:grid; grid-template-columns:1.4rem 1fr; gap:.6rem; align-items:start;
  font-size:.92rem; line-height:1.5; color:var(--tsc-color-text);
}
body.tsc-servicev2 .tsc-keylist svg{ color:var(--tsc-gold-600); margin-top:2px; }
@media (max-width:820px){ body.tsc-servicev2 .tsc-svc-intro__inner{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   7 - WHAT'S INCLUDED  (grouped checklists)
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-incl{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,260px),1fr));
  gap:clamp(16px,2.4vw,24px);
}
/* Fewer than four inclusion groups: the full-width .tsc-incl__note (grid-column
   1/-1) pins the auto-fit track count, so a 3-group set leaves an empty 4th
   column on wide screens. Cap the width so it resolves to a balanced 3-up;
   mobile stacking is unaffected. Added by the template when count < 4. */
body.tsc-servicev2 .tsc-incl--lean{ max-width:68rem; margin-inline:auto; }
body.tsc-servicev2 .tsc-incl__group{
  background:var(--tsc-color-surface); border:1px solid var(--tsc-color-border);
  border-radius:16px; padding:clamp(18px,2.4vw,24px);
}
body.tsc-servicev2 .tsc-incl__group h3{
  margin:0 0 .8rem; display:flex; align-items:center; gap:.6rem;
  font-size:1.02rem; font-weight:800; color:var(--tsc-navy);
}
body.tsc-servicev2 .tsc-incl__ico{
  width:38px; height:38px; flex:none; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tsc-navy); color:var(--tsc-gold);
}
body.tsc-servicev2 .tsc-incl__ico svg{ width:20px; height:20px; }
body.tsc-servicev2 .tsc-incl__group ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
body.tsc-servicev2 .tsc-incl__group li{
  display:grid; grid-template-columns:1.2rem 1fr; gap:.55rem; align-items:start;
  font-size:.9rem; line-height:1.45; color:var(--tsc-color-text-muted);
}
body.tsc-servicev2 .tsc-incl__group li svg{ color:var(--tsc-gold-600); margin-top:2px; width:16px; height:16px; }
body.tsc-servicev2 .tsc-incl__note{
  grid-column:1/-1; margin:6px 0 0; font-size:.85rem; color:var(--tsc-color-text-subtle);
}
/* A 5th group (Deep Cleaning's "detailed extras") would otherwise wrap alone
   onto its own row in the 4-up auto-fit grid, leaving 3 empty columns beside
   it. Span it full-width and re-flow its list into columns instead. Scoped
   to :nth-child(5) - the class selector alone already limits this to actual
   .tsc-incl__group elements, so 4-group pages (Residential, House Cleaning,
   Regular/Recurring) are unaffected: their 5th child is the .tsc-incl__extras
   panel, not a .tsc-incl__group, so this rule simply doesn't match there. */
body.tsc-servicev2 .tsc-incl__group:nth-child(5){
  grid-column:1/-1;
}
body.tsc-servicev2 .tsc-incl__group:nth-child(5) ul{
  columns:2; column-gap:clamp(16px,2.4vw,24px);
}
@media (max-width:520px){
  body.tsc-servicev2 .tsc-incl__group:nth-child(5) ul{ columns:1; }
}

/* --------------------------------------------------------------------------
   8 - TYPES / SPACES  (cards, no heavy shadow, subtle hover)
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-types{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,240px),1fr));
  gap:clamp(16px,2.4vw,22px);
}
body.tsc-servicev2 .tsc-types__card{
  background:var(--tsc-color-surface); border:1px solid var(--tsc-color-border);
  border-radius:14px; padding:clamp(18px,2.4vw,24px);
  box-shadow:var(--tsc-shadow-sm);
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s cubic-bezier(.22,1,.36,1), border-color .2s cubic-bezier(.22,1,.36,1);
}
body.tsc-servicev2 .tsc-types__card:hover,
body.tsc-servicev2 .tsc-types__card:focus-within{ transform:translateY(-4px); box-shadow:var(--tsc-shadow-md); border-color:var(--tsc-gold); }
body.tsc-servicev2 .tsc-types__ico{
  width:44px; height:44px; border-radius:12px; margin-bottom:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tsc-navy-050); color:var(--tsc-navy);
}
body.tsc-servicev2 .tsc-types__ico svg{ width:22px; height:22px; }
body.tsc-servicev2 .tsc-types__card h3{ margin:0 0 .35rem; font-size:1.05rem; font-weight:800; color:var(--tsc-navy); }
body.tsc-servicev2 .tsc-types__card p{ margin:0; font-size:.9rem; line-height:1.55; color:var(--tsc-color-text-muted); }

/* --------------------------------------------------------------------------
   9 - HOW IT WORKS  (connected steps; vertical on mobile)
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-steps{
  list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,220px),1fr));
  gap:clamp(18px,3vw,var(--tsc-space-6,24px));
  counter-reset:tscstep;
}
body.tsc-servicev2 .tsc-steps__item{
  position:relative; overflow:hidden;
  background:var(--tsc-color-surface); border:1px solid var(--tsc-color-border);
  border-radius:14px; padding:clamp(18px,2.4vw,24px);
  display:flex; flex-direction:column; gap:8px;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s cubic-bezier(.22,1,.36,1), border-color .2s cubic-bezier(.22,1,.36,1);
}
body.tsc-servicev2 .tsc-steps__item:hover,
body.tsc-servicev2 .tsc-steps__item:focus-within{ transform:translateY(-4px); box-shadow:var(--tsc-shadow-md); border-color:var(--tsc-gold); }
body.tsc-servicev2 .tsc-steps__item::after{
  content:counter(tscstep, decimal-leading-zero); counter-increment:tscstep;
  position:absolute; top:2px; right:14px; font-size:3rem; font-weight:800; line-height:1;
  letter-spacing:-.03em; color:var(--tsc-navy); opacity:.09; pointer-events:none;
  transition:opacity .15s ease;
}
body.tsc-servicev2 .tsc-steps__item:hover::after{ opacity:.2; }
body.tsc-servicev2 .tsc-steps__icon{
  width:52px; height:52px; border-radius:15px; margin-top:2px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tsc-navy); color:var(--tsc-gold);
  transition:background .15s ease, color .15s ease;
}
body.tsc-servicev2 .tsc-steps__icon svg{ width:25px; height:25px; }
body.tsc-servicev2 .tsc-steps__item:hover .tsc-steps__icon{ background:var(--tsc-gold); color:var(--tsc-navy); }
body.tsc-servicev2 .tsc-steps__title{ margin:0; font-size:1.02rem; font-weight:800; color:var(--tsc-navy); }
body.tsc-servicev2 .tsc-steps__text{ margin:0; font-size:.88rem; line-height:1.55; color:var(--tsc-color-text-muted); }
/* Connected-steps layout: only when the whole row is guaranteed to fit on one
   line (so a wrapped grid never leaves a connector dash pointing at nothing).
   --tsc-steps is set inline by the template (3 or 4). */
@media (min-width:1000px){
  body.tsc-servicev2 .tsc-steps{
    grid-template-columns:repeat(var(--tsc-steps,3), minmax(0,1fr));
  }
  body.tsc-servicev2 .tsc-steps__item + .tsc-steps__item::before{
    content:""; position:absolute; top:50px; left:calc(-1 * clamp(18px,3vw,24px) / 2 - 1px);
    width:clamp(18px,3vw,24px); height:2px;
    background:repeating-linear-gradient(90deg, var(--tsc-gold) 0 6px, transparent 6px 12px);
  }
}

/* --------------------------------------------------------------------------
   10 - WHY CHOOSE US  (navy panel + verified points)
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-whyx__inner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,52px); align-items:center;
}
body.tsc-servicev2 .tsc-whyx__panel{
  background:linear-gradient(160deg, var(--tsc-navy) 0%, var(--tsc-navy-900) 100%);
  color:#fff; border-radius:20px; padding:clamp(24px,3.2vw,40px); box-shadow:var(--tsc-shadow-lg);
}
body.tsc-servicev2 .tsc-whyx__panel .tsc-eyebrow{ background:rgba(244,166,42,.16); color:var(--tsc-gold); border-color:rgba(244,166,42,.4); }
body.tsc-servicev2 .tsc-whyx__title{ margin:.7rem 0 .5rem; font-size:clamp(1.4rem,1.05rem+1.4vw,2rem); font-weight:800; line-height:1.2; color:#fff; }
body.tsc-servicev2 .tsc-whyx__title .tsc-accent{ color:var(--tsc-gold); background-image:none; padding-bottom:0; }
body.tsc-servicev2 .tsc-whyx__lead{ margin:0 0 var(--tsc-space-5,20px); color:rgba(255,255,255,.78); }
body.tsc-servicev2 .tsc-whyx__list{ list-style:none; margin:0 0 var(--tsc-space-6,24px); padding:0; display:grid; gap:11px; }
body.tsc-servicev2 .tsc-whyx__list li{
  display:grid; grid-template-columns:1.4rem 1fr; gap:.7rem; align-items:start;
  font-size:.92rem; line-height:1.45; color:rgba(255,255,255,.92);
}
body.tsc-servicev2 .tsc-whyx__list svg{ color:var(--tsc-gold); margin-top:1px; }
body.tsc-servicev2 .tsc-whyx__media{ border-radius:20px; overflow:hidden; aspect-ratio:4 / 3; box-shadow:0 24px 54px -22px rgba(14,42,71,.5); }
body.tsc-servicev2 .tsc-whyx__media img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; }
@media (max-width:860px){
  body.tsc-servicev2 .tsc-whyx__inner{ grid-template-columns:1fr; }
  body.tsc-servicev2 .tsc-whyx__media{ order:-1; aspect-ratio:4 / 3; }
  body.tsc-servicev2 .tsc-whyx .tsc-btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   11 - SERVICE AREAS  (editorial navy panel + map motif)
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-areas__inner{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
  gap:clamp(24px,4vw,48px); align-items:stretch;
}
body.tsc-servicev2 .tsc-areas__panel{
  background:linear-gradient(160deg, var(--tsc-navy) 0%, var(--tsc-navy-900) 100%);
  color:#fff; border-radius:20px; padding:clamp(24px,3.2vw,40px); box-shadow:var(--tsc-shadow-lg);
}
body.tsc-servicev2 .tsc-areas__panel .tsc-eyebrow{ background:rgba(244,166,42,.16); color:var(--tsc-gold); border-color:rgba(244,166,42,.4); }
body.tsc-servicev2 .tsc-areas__title{ margin:.6rem 0 .5rem; font-size:clamp(1.35rem,1.05rem+1.3vw,1.9rem); font-weight:800; color:#fff; }
body.tsc-servicev2 .tsc-areas__text{ margin:0 0 var(--tsc-space-5,20px); color:rgba(255,255,255,.8); }
body.tsc-servicev2 .tsc-areas__meta{ list-style:none; margin:0 0 var(--tsc-space-5,20px); padding:0; display:grid; gap:9px; }
body.tsc-servicev2 .tsc-areas__meta li{ display:grid; grid-template-columns:1.4rem 1fr; gap:.6rem; font-size:.9rem; color:rgba(255,255,255,.86); }
body.tsc-servicev2 .tsc-areas__meta svg{ color:var(--tsc-gold); margin-top:2px; }
body.tsc-servicev2 .tsc-areas__cta{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; }
body.tsc-servicev2 .tsc-areas__cta .tsc-link{ color:var(--tsc-gold); font-weight:700; text-decoration:none; }
body.tsc-servicev2 .tsc-areas__cta .tsc-link:hover{ color:#fff; }
body.tsc-servicev2 .tsc-areas__aside{
  position:relative; border-radius:20px; overflow:hidden; min-height:240px;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 120% at 70% 20%, rgba(244,166,42,.14), transparent 55%),
    linear-gradient(160deg, #12345A 0%, #0B2138 100%);
  border:1px solid var(--tsc-color-border);
}
body.tsc-servicev2 .tsc-areas__pin{
  position:relative; z-index:2; width:66px; height:66px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tsc-gold); color:var(--tsc-navy); box-shadow:0 16px 34px rgba(0,0,0,.35);
}
body.tsc-servicev2 .tsc-areas__pin svg{ width:30px; height:30px; }
body.tsc-servicev2 .tsc-areas__ring{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; border:2px solid rgba(255,255,255,.15); width:130px; height:130px; }
body.tsc-servicev2 .tsc-areas__ring--2{ width:210px; height:210px; border-color:rgba(255,255,255,.10); }
body.tsc-servicev2 .tsc-areas__ring--3{ width:300px; height:300px; border-color:rgba(255,255,255,.06); }
/* Stage 9/4 - real Google Map fills the location card frame */
body.tsc-servicev2 .tsc-areas__map{ position:absolute; inset:0; }
body.tsc-servicev2 .tsc-areas__map iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width:860px){
  body.tsc-servicev2 .tsc-areas__inner{ grid-template-columns:1fr; }
  body.tsc-servicev2 .tsc-areas__aside{ min-height:240px; }
  body.tsc-servicev2 .tsc-areas__ring--3{ width:230px; height:230px; }
  body.tsc-servicev2 .tsc-areas__cta .tsc-btn{ flex:1 1 100%; }
}

/* --------------------------------------------------------------------------
   12 - RELATED SERVICES  (image-top card, subtle hover, no heavy shadow)
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-related__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,280px),1fr));
  gap:clamp(18px,2.5vw,26px);
}
body.tsc-servicev2 .tsc-svc{
  position:relative; display:flex; flex-direction:column;
  background:var(--tsc-color-surface); border:1px solid var(--tsc-color-border);
  border-radius:16px; overflow:hidden; box-shadow:var(--tsc-shadow-sm);
  transition:transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s cubic-bezier(.22,1,.36,1), border-color .24s cubic-bezier(.22,1,.36,1);
}
body.tsc-servicev2 .tsc-svc:hover,
body.tsc-servicev2 .tsc-svc:focus-within{ transform:translateY(-6px); box-shadow:var(--tsc-shadow-lg); border-color:var(--tsc-gold); }
body.tsc-servicev2 .tsc-svc--featured{ box-shadow:0 0 0 2px var(--tsc-gold) inset, var(--tsc-shadow-sm); }
body.tsc-servicev2 .tsc-svc__media{ position:relative; display:block; aspect-ratio:16 / 11; overflow:hidden; background:var(--tsc-navy-050); }
body.tsc-servicev2 .tsc-svc__media img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; transition:transform .5s cubic-bezier(.22,1,.36,1); }
body.tsc-servicev2 .tsc-svc:hover .tsc-svc__media img{ transform:scale(1.05); }
body.tsc-servicev2 .tsc-svc__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(14,42,71,.28)); }
body.tsc-servicev2 .tsc-svc__icon{
  position:absolute; left:14px; bottom:14px; z-index:2; width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:12px;
  background:var(--tsc-navy); color:var(--tsc-gold); box-shadow:0 8px 18px rgba(14,42,71,.35);
}
body.tsc-servicev2 .tsc-svc__icon svg{ width:22px; height:22px; }
body.tsc-servicev2 .tsc-svc__body{ display:flex; flex-direction:column; gap:8px; padding:clamp(18px,2.4vw,22px); }
body.tsc-servicev2 .tsc-svc__title{ margin:0; font-size:1.15rem; font-weight:800; color:var(--tsc-navy); }
body.tsc-servicev2 .tsc-svc__text{ margin:0; font-size:.88rem; line-height:1.55; color:var(--tsc-color-text-muted); }
body.tsc-servicev2 .tsc-svc .tsc-cta-link{ margin-top:auto; padding-top:6px; }
body.tsc-servicev2 .tsc-svc__badge{
  position:absolute; top:12px; right:12px; z-index:3;
  padding:.3em .8em; border-radius:999px; font-size:.68rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; background:var(--tsc-gold); color:var(--tsc-navy);
}
/* "See all services" card - no image; make it a deliberate tinted panel that
   fills the row height rather than looking half-built. */
body.tsc-servicev2 .tsc-svc--more{
  background:linear-gradient(160deg, var(--tsc-navy) 0%, var(--tsc-navy-900) 100%);
  border-color:transparent; justify-content:center;
}
body.tsc-servicev2 .tsc-svc--more .tsc-svc__body{ gap:10px; }
body.tsc-servicev2 .tsc-svc--more .tsc-svc__title{ color:#fff; }
body.tsc-servicev2 .tsc-svc--more .tsc-svc__text{ color:rgba(255,255,255,.78); }
body.tsc-servicev2 .tsc-svc--more .tsc-cta-link{ color:var(--tsc-gold); }
body.tsc-servicev2 .tsc-svc--more .tsc-cta-link::after{ color:var(--tsc-gold); }
body.tsc-servicev2 .tsc-svc--more:hover .tsc-cta-link{ color:#fff; }
body.tsc-servicev2 .tsc-svc__icon--static{
  position:static; width:42px; height:42px; box-shadow:none; margin-bottom:2px;
  background:rgba(244,166,42,.16); color:var(--tsc-gold);
}

/* --------------------------------------------------------------------------
   13 - FAQ  (navy/gold accordion; native <details name> = exclusive)
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-faq{ display:grid; gap:12px; }
body.tsc-servicev2 .tsc-faq__item{
  background:var(--tsc-color-surface); border:1px solid var(--tsc-color-border);
  border-radius:14px; overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
}
body.tsc-servicev2 .tsc-faq__item[open]{ border-color:var(--tsc-gold); box-shadow:0 12px 30px -20px rgba(14,42,71,.4); }
body.tsc-servicev2 .tsc-faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(15px,2vw,20px) clamp(16px,2.2vw,24px);
  font-weight:700; color:var(--tsc-navy); font-size:1rem; cursor:pointer; list-style:none;
}
body.tsc-servicev2 .tsc-faq__q::-webkit-details-marker{ display:none; }
body.tsc-servicev2 .tsc-faq__q-ico{ position:relative; flex:none; width:24px; height:24px; border-radius:50%; background:var(--tsc-navy-050); transition:background .15s ease; }
body.tsc-servicev2 .tsc-faq__q-ico::before,
body.tsc-servicev2 .tsc-faq__q-ico::after{
  content:""; position:absolute; top:50%; left:50%; width:10px; height:2px; border-radius:2px;
  background:var(--tsc-navy); transform:translate(-50%,-50%); transition:transform .15s ease, opacity .15s ease;
}
body.tsc-servicev2 .tsc-faq__q-ico::after{ transform:translate(-50%,-50%) rotate(90deg); }
body.tsc-servicev2 .tsc-faq__item[open] .tsc-faq__q-ico{ background:var(--tsc-gold); }
body.tsc-servicev2 .tsc-faq__item[open] .tsc-faq__q-ico::after{ transform:translate(-50%,-50%) rotate(0); opacity:0; }
body.tsc-servicev2 .tsc-faq__a{ padding:0 clamp(16px,2.2vw,24px) clamp(16px,2.2vw,22px); color:var(--tsc-color-text-muted); font-size:.92rem; line-height:1.6; }
body.tsc-servicev2 .tsc-faq__a p{ margin:0 0 .7rem; }
body.tsc-servicev2 .tsc-faq__a p:last-child{ margin:0; }
body.tsc-servicev2 .tsc-faq__a a{ color:var(--tsc-navy); font-weight:600; }
/* Inline links inside running prose: pin them to the design-system navy - a
   bare <a> would otherwise inherit Astra's unconfigured global accent
   (#5511F8 purple) - and underline them so they don't rely on colour alone
   (WCAG 1.4.1 / axe link-in-text-block). Arrow / button / breadcrumb links
   are not prose and are excluded.
   .tsc-types__card p a added (Phase 4 / End of Lease polish pass): the
   "Other ways we can clean your home" cross-link cards hit this same purple
   leak on every subservice page that has them (found live on Deep Cleaning
   too, not just the new page) - this selector list just never covered that
   container. Fixing it here corrects all of them at once. */
body.tsc-servicev2 .tsc-svc-intro__body p a,
body.tsc-servicev2 .tsc-incl__note a,
body.tsc-servicev2 .tsc-faq__a a,
body.tsc-servicev2 .tsc-quote__intro p a,
body.tsc-servicev2 .tsc-types__card p a{
  color:var(--tsc-navy); font-weight:600;
  text-decoration:underline; text-underline-offset:2px;
}
body.tsc-servicev2 .tsc-faq__item[open] .tsc-faq__a{ animation:tsc-faq-in .28s cubic-bezier(.22,1,.36,1) both; }
@keyframes tsc-faq-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* --------------------------------------------------------------------------
   14 - QUOTE / BOOKING FORM WRAPPER
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-quote__inner{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,48px); align-items:start;
}
body.tsc-servicev2 .tsc-quote__intro h2{ margin:.4rem 0 .6rem; font-size:clamp(1.4rem,1.1rem+1.3vw,1.9rem); font-weight:800; color:var(--tsc-navy); }
body.tsc-servicev2 .tsc-quote__intro p{ margin:0 0 1rem; color:var(--tsc-color-text-muted); line-height:1.6; }
body.tsc-servicev2 .tsc-quote__alt{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }
body.tsc-servicev2 .tsc-quote__form{
  background:var(--tsc-color-surface); border:1px solid var(--tsc-color-border);
  border-radius:18px; padding:clamp(20px,3vw,32px); box-shadow:var(--tsc-shadow-sm);
}
body.tsc-servicev2 .tsc-quote__form .ff-el-group{ margin-bottom:16px; }
/* Inputs render at ~14.6px by inheritance; iOS Safari zooms the viewport on
   focus for any field below 16px. Pin to 16px on the service-page quote form. */
body.tsc-servicev2 .tsc-quote__form :is(input,textarea,select){ font-size:16px; }
/* Centre the Fluent Forms submit button - it ships inside a .ff-text-left
   wrapper (left-aligned by default). Scoped to the service-page quote form
   only, so the same form on /contact/ and /book-a-clean/ is untouched. */
body.tsc-servicev2 .tsc-quote__form .ff_submit_btn_wrapper,
body.tsc-servicev2 .tsc-quote__form .ff-el-group.ff_submit_btn_wrapper{ text-align:center; }
body.tsc-servicev2 .tsc-quote__form .ff-btn-submit{
  background:var(--tsc-gold) !important; color:var(--tsc-navy) !important; border-color:var(--tsc-gold) !important;
  font-weight:700 !important; border-radius:999px !important;
  min-width:200px; min-height:44px;
}
body.tsc-servicev2 .tsc-quote__form .ff-btn-submit:hover{ background:var(--tsc-gold-600) !important; }
/* Visible keyboard focus - Astra and Fluent Forms both strip it from these
   controls and the site's focus-ring hardening doesn't reach inside the form.
   Scoped to the service-page quote form (not the same form on /contact/). */
body.tsc-servicev2 .tsc-quote__form :is(input,textarea,select):focus-visible{
  outline:2px solid var(--tsc-navy); outline-offset:1px; border-color:var(--tsc-navy);
}
body.tsc-servicev2 .tsc-quote__form .ff-btn-submit:focus-visible{
  outline:3px solid var(--tsc-navy) !important; outline-offset:2px;
}
@media (max-width:860px){ body.tsc-servicev2 .tsc-quote__inner{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   15 - CTA BAND  (final navy conversion block)
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-cta-band{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,32px);
  border-radius:20px; padding:clamp(24px,3.4vw,44px);
  background:var(--tsc-color-surface); border:1px solid var(--tsc-color-border);
}
body.tsc-servicev2 .tsc-cta-band--ink{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg, var(--tsc-navy) 0%, var(--tsc-navy-900) 100%); border-color:transparent;
}
body.tsc-servicev2 .tsc-cta-band--img .tsc-cta-band__bg{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; opacity:.16; }
body.tsc-servicev2 .tsc-cta-band--img::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(160deg, rgba(14,42,71,.86), rgba(11,33,56,.94)); }
body.tsc-servicev2 .tsc-cta-band__body{ position:relative; z-index:1; max-width:38rem; }
body.tsc-servicev2 .tsc-cta-band__title{ margin:0 0 .4rem; font-size:clamp(1.35rem,1.05rem+1.3vw,1.9rem); font-weight:800; color:#fff; }
body.tsc-servicev2 .tsc-cta-band__text{ margin:0; color:rgba(255,255,255,.82); line-height:1.55; }
body.tsc-servicev2 .tsc-cta-band__actions{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }
body.tsc-servicev2 .tsc-cta-band--ink .tsc-cta-phone{ color:#fff; }
body.tsc-servicev2 .tsc-cta-band--ink .tsc-cta-phone__ico{ color:var(--tsc-gold); }
body.tsc-servicev2 .tsc-cta-band--ink .tsc-cta-phone__label{ color:rgba(255,255,255,.72); }
body.tsc-servicev2 .tsc-cta-band--ink .tsc-cta-phone__num{ color:#fff; }
@media (max-width:600px){
  body.tsc-servicev2 .tsc-cta-band__actions{ width:100%; }
  body.tsc-servicev2 .tsc-cta-band__actions .tsc-btn{ flex:1 1 100%; }
}

/* --------------------------------------------------------------------------
   16 - SERVICES HUB extras
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-hub-guide{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,240px),1fr));
  gap:clamp(16px,2.4vw,24px);
}
body.tsc-servicev2 .tsc-hub-guide__card{
  background:var(--tsc-color-surface); border:1px solid var(--tsc-color-border);
  border-radius:14px; padding:clamp(18px,2.4vw,24px);
}
body.tsc-servicev2 .tsc-hub-guide__card h3{ margin:0 0 .4rem; font-size:1rem; font-weight:800; color:var(--tsc-navy); }
body.tsc-servicev2 .tsc-hub-guide__card p{ margin:0 0 .8rem; font-size:.9rem; line-height:1.55; color:var(--tsc-color-text-muted); }

/* ==========================================================================
   STAGE 9 - RESIDENTIAL depth additions.
   All scoped body.tsc-servicev2, reusing the existing tokens + primitives.
   Every block is opt-in: it only styles markup the template renders when the
   per-service data provides it, so /commercial/ and /airbnb-hosts/ are
   unaffected.
   ========================================================================== */

/* --- Hero floating trust card (parity with the homepage hero) ------------- */
body.tsc-servicev2 .tsc-svc-hero__media{ position:relative; }
body.tsc-servicev2 .tsc-svc-hero__badge{
  position:absolute; left:-10px; bottom:22px;
  display:flex; align-items:center; gap:.7rem;
  padding:12px 16px;
  background:#fff; border-radius:14px;
  box-shadow:var(--tsc-shadow-lg);
}
body.tsc-servicev2 .tsc-svc-hero__badge .tsc-stars{ gap:1px; }
body.tsc-servicev2 .tsc-svc-hero__badge .tsc-stars__s{ width:13px; height:13px; }
body.tsc-servicev2 .tsc-svc-hero__badge b{ display:block; font-size:var(--tsc-text-md,1.05rem); font-weight:800; color:var(--tsc-navy); line-height:1.1; }
body.tsc-servicev2 .tsc-svc-hero__badge span span{ display:block; font-size:11px; color:var(--tsc-color-text-subtle); }
@media (max-width:860px){
  body.tsc-servicev2 .tsc-svc-hero__badge{ left:8px; bottom:10px; padding:10px 12px; }
}

/* --- "Optional extras" list inside the What's-included grid --------------- */
body.tsc-servicev2 .tsc-incl__extras{
  grid-column:1 / -1;
  margin-top:6px; padding:clamp(18px,2.4vw,24px);
  background:var(--tsc-navy-050);
  border:1px solid var(--tsc-color-border);
  border-radius:16px;
}
body.tsc-servicev2 .tsc-incl__extras h3{
  margin:0 0 .8rem; display:flex; align-items:center; gap:.5rem;
  font-size:1rem; font-weight:800; color:var(--tsc-navy);
}
body.tsc-servicev2 .tsc-keylist--wrap{
  grid-template-columns:repeat(auto-fit, minmax(min(100%,220px),1fr));
}
body.tsc-servicev2 .tsc-incl__extras .tsc-keylist svg{ color:var(--tsc-gold-600); }
body.tsc-servicev2 .tsc-incl__extras .tsc-incl__note{ margin:.9rem 0 0; }

/* --- Type card "who it's for" line --------------------------------------- */
body.tsc-servicev2 .tsc-types__card{ display:flex; flex-direction:column; }
body.tsc-servicev2 .tsc-types__for{
  margin:auto 0 0; padding-top:12px;
  display:grid; grid-template-columns:1.1rem 1fr; gap:.5rem; align-items:start;
  font-size:.82rem; line-height:1.4; color:var(--tsc-navy); font-weight:600;
}
body.tsc-servicev2 .tsc-types__for svg{ color:var(--tsc-gold-600); margin-top:2px; }

/* --- Customer reviews band (navy panel; verified Google quotes only) ------ */
body.tsc-servicev2 .tsc-svc-reviews > .tsc-container{
  background:linear-gradient(165deg, var(--tsc-navy) 0%, var(--tsc-navy-900) 100%);
  border-radius:22px;
  padding:clamp(28px,3.6vw,52px) clamp(20px,3vw,44px);
  box-shadow:var(--tsc-shadow-lg);
}
body.tsc-servicev2 .tsc-svc-reviews .tsc-section__title{ color:#fff; }
body.tsc-servicev2 .tsc-svc-reviews .tsc-eyebrow{ background:rgba(244,166,42,.16); color:var(--tsc-gold); border-color:rgba(244,166,42,.4); }
body.tsc-servicev2 .tsc-svc-reviews__rating{
  margin:.7rem 0 0; display:flex; align-items:center; justify-content:center; gap:.6rem;
  color:rgba(255,255,255,.82); font-size:.95rem; flex-wrap:wrap;
}
body.tsc-servicev2 .tsc-svc-reviews__rating strong{ color:#fff; font-weight:800; }
body.tsc-servicev2 .tsc-reviews{
  list-style:none; margin:clamp(22px,3vw,32px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px);
}
body.tsc-servicev2 .tsc-reviews__item{ display:flex; }
body.tsc-servicev2 .tsc-review{
  position:relative; display:flex; flex-direction:column; gap:12px; width:100%;
  padding:clamp(20px,2.4vw,28px);
  background:#fff; border-radius:16px;
  box-shadow:0 14px 34px -22px rgba(14,42,71,.4);
}
body.tsc-servicev2 .tsc-review__mark{
  font-family:Georgia, "Times New Roman", serif;
  font-size:3rem; line-height:.6; color:var(--tsc-gold); height:1.2rem;
}
body.tsc-servicev2 .tsc-review__text{ margin:0; color:var(--tsc-color-text); font-size:.9rem; line-height:1.6; }
body.tsc-servicev2 .tsc-review__meta{
  display:flex; align-items:center; gap:.7rem;
  margin-top:auto; padding-top:14px; border-top:1px solid var(--tsc-color-border);
}
body.tsc-servicev2 .tsc-review__avatar{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tsc-navy-050); color:var(--tsc-navy); font-weight:800; font-size:.72rem;
}
body.tsc-servicev2 .tsc-review__name{ display:block; font-weight:700; color:var(--tsc-navy); font-size:.9rem; }
body.tsc-servicev2 .tsc-review__src{ display:block; font-size:11px; color:var(--tsc-color-text-subtle); }
body.tsc-servicev2 .tsc-svc-reviews__cta{ margin:clamp(20px,3vw,28px) 0 0; text-align:center; }
body.tsc-servicev2 .tsc-svc-reviews__cta .tsc-link{ color:var(--tsc-gold); font-weight:700; text-decoration:none; }
body.tsc-servicev2 .tsc-svc-reviews__cta .tsc-link:hover{ color:#fff; }
@media (max-width:880px){
  body.tsc-servicev2 .tsc-reviews{
    display:flex; grid-template-columns:none;
    align-items:stretch;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--tsc-space-4,16px)); padding-inline:var(--tsc-space-4,16px);
    scrollbar-width:none;
  }
  body.tsc-servicev2 .tsc-reviews::-webkit-scrollbar{ display:none; }
  body.tsc-servicev2 .tsc-reviews__item{ flex:0 0 86%; scroll-snap-align:center; }
}

/* --- "How our quotes work" band (no prices; verified process only) ------- */
body.tsc-servicev2 .tsc-quotehelp__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,240px),1fr));
  gap:clamp(16px,2.4vw,24px);
}
body.tsc-servicev2 .tsc-quotehelp__item{
  background:var(--tsc-color-surface); border:1px solid var(--tsc-color-border);
  border-radius:14px; padding:clamp(18px,2.4vw,24px);
}
body.tsc-servicev2 .tsc-quotehelp__item h3{
  margin:0 0 .4rem; display:flex; align-items:center; gap:.55rem;
  font-size:1rem; font-weight:800; color:var(--tsc-navy);
}
body.tsc-servicev2 .tsc-quotehelp__ico{
  width:36px; height:36px; flex:none; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tsc-navy); color:var(--tsc-gold);
}
body.tsc-servicev2 .tsc-quotehelp__ico svg{ width:18px; height:18px; }
body.tsc-servicev2 .tsc-quotehelp__item p{ margin:0; font-size:.9rem; line-height:1.55; color:var(--tsc-color-text-muted); }

/* --- Related-services in-page jump links -------------------------------- */
body.tsc-servicev2 .tsc-related__jumps{
  margin:clamp(18px,2.4vw,26px) 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center;
}
body.tsc-servicev2 .tsc-related__jumps a{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5em 1em; border-radius:999px;
  background:var(--tsc-navy-050); color:var(--tsc-navy);
  font-size:.85rem; font-weight:700; text-decoration:none;
  border:1px solid var(--tsc-color-border);
  transition:background .15s ease, border-color .15s ease;
}
body.tsc-servicev2 .tsc-related__jumps a:hover{ background:var(--tsc-gold-050); border-color:var(--tsc-gold); }
body.tsc-servicev2 .tsc-related__jumps svg{ color:var(--tsc-gold-600); }

/* --------------------------------------------------------------------------
   17 - ANIMATION  (JS-gated; identical language to the homepage)
   -------------------------------------------------------------------------- */
html.tsc-js body.tsc-servicev2 [data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--reveal-i, 0) * 70ms);
}
html.tsc-js body.tsc-servicev2 [data-reveal].is-visible{ opacity:1; transform:none; }
html.tsc-js body.tsc-servicev2 .tsc-svc-hero__copy > *,
html.tsc-js body.tsc-servicev2 .tsc-svc-hero__media{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
html.tsc-js body.tsc-servicev2.is-loaded .tsc-svc-hero__copy > *,
html.tsc-js body.tsc-servicev2.is-loaded .tsc-svc-hero__media{ opacity:1; transform:none; }
html.tsc-js body.tsc-servicev2.is-loaded .tsc-svc-hero__copy > :nth-child(1){ transition-delay:.05s; }
html.tsc-js body.tsc-servicev2.is-loaded .tsc-svc-hero__copy > :nth-child(2){ transition-delay:.12s; }
html.tsc-js body.tsc-servicev2.is-loaded .tsc-svc-hero__copy > :nth-child(3){ transition-delay:.19s; }
html.tsc-js body.tsc-servicev2.is-loaded .tsc-svc-hero__copy > :nth-child(4){ transition-delay:.26s; }
html.tsc-js body.tsc-servicev2.is-loaded .tsc-svc-hero__copy > :nth-child(5){ transition-delay:.33s; }
html.tsc-js body.tsc-servicev2.is-loaded .tsc-svc-hero__media{ transition-delay:.2s; }

@media (prefers-reduced-motion:reduce){
  html.tsc-js body.tsc-servicev2 [data-reveal],
  body.tsc-servicev2 .tsc-svc-hero__copy > *,
  body.tsc-servicev2 .tsc-svc-hero__media{ opacity:1 !important; transform:none !important; transition:none !important; }
  body.tsc-servicev2 .tsc-btn,
  body.tsc-servicev2 .tsc-types__card,
  body.tsc-servicev2 .tsc-steps__item,
  body.tsc-servicev2 .tsc-steps__item::after,
  body.tsc-servicev2 .tsc-benefits__card,
  body.tsc-servicev2 .tsc-svc,
  body.tsc-servicev2 .tsc-svc__media img,
  body.tsc-servicev2 .tsc-faq__item,
  body.tsc-servicev2 .tsc-faq__q-ico,
  body.tsc-servicev2 .tsc-faq__q-ico::before,
  body.tsc-servicev2 .tsc-faq__q-ico::after{ transition:none !important; }
  body.tsc-servicev2 .tsc-btn:hover,
  body.tsc-servicev2 .tsc-types__card:hover,
  body.tsc-servicev2 .tsc-steps__item:hover,
  body.tsc-servicev2 .tsc-benefits__card:hover,
  body.tsc-servicev2 .tsc-svc:hover{ transform:none !important; }
  body.tsc-servicev2 .tsc-faq__item[open] .tsc-faq__a{ animation:none !important; }
  body.tsc-servicev2 .tsc-related__jumps a{ transition:none !important; }
  body.tsc-servicev2 .tsc-reviews{ scroll-behavior:auto !important; }
}

/* --------------------------------------------------------------------------
   18 - VISUALLY HIDDEN helper
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   19 - CONTACT PAGE  (Stage 13; only new component - everything else on the
        Contact template reuses the sections above via body.tsc-servicev2)
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-contact-cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,240px),1fr));
  gap:clamp(14px,2.4vw,22px);
}
body.tsc-servicev2 .tsc-contact-card{
  display:flex; flex-direction:column; gap:.5rem;
  background:var(--tsc-color-surface); border:1px solid var(--tsc-color-border);
  border-radius:16px; padding:clamp(18px,2.6vw,26px); box-shadow:var(--tsc-shadow-sm);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.tsc-servicev2 .tsc-contact-card:hover{
  transform:translateY(-3px); border-color:var(--tsc-gold); box-shadow:var(--tsc-shadow-md);
}
body.tsc-servicev2 .tsc-contact-card__ico{
  width:42px; height:42px; flex:none; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tsc-navy); color:var(--tsc-gold);
}
body.tsc-servicev2 .tsc-contact-card h3{
  margin:.25rem 0 0; font-size:1.08rem; font-weight:800; color:var(--tsc-navy);
}
body.tsc-servicev2 .tsc-contact-card__val{
  margin:0; font-weight:700; color:var(--tsc-navy); line-height:1.4; overflow-wrap:anywhere;
}
body.tsc-servicev2 .tsc-contact-card__sub{
  margin:0; font-size:.9rem; line-height:1.45; color:var(--tsc-color-text-muted);
}
body.tsc-servicev2 .tsc-contact-card .tsc-btn{ margin-top:auto; align-self:flex-start; }
body.tsc-servicev2 .tsc-contact-map{
  border-radius:16px; overflow:hidden; border:1px solid var(--tsc-color-border);
  height:clamp(280px,42vw,420px);
}
body.tsc-servicev2 .tsc-contact-map iframe{ width:100%; height:100%; border:0; display:block; }
body.tsc-servicev2 .tsc-contact-map__addr{
  margin:.9rem 0 0; text-align:center; font-size:.92rem; color:var(--tsc-color-text-muted);
}
@media (max-width:520px){
  body.tsc-servicev2 .tsc-contact-card .tsc-btn{ align-self:stretch; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  body.tsc-servicev2 .tsc-contact-card{ transition:none; }
  body.tsc-servicev2 .tsc-contact-card:hover{ transform:none; }
}

/* --------------------------------------------------------------------------
   20 - ABOUT PAGE  (Stage 14; only new component - hero, trust strip,
        .tsc-svc-intro, .tsc-types, .tsc-whyx, .tsc-reviews and .tsc-cta-band
        are all reused from the sections above)
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-about-founder__inner{
  display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
  gap:clamp(28px,4.5vw,56px); align-items:center;
}
body.tsc-servicev2 .tsc-about-founder__media{
  border-radius:20px; overflow:hidden; border:1px solid var(--tsc-color-border);
  box-shadow:var(--tsc-shadow-md); aspect-ratio:4 / 3;
}
body.tsc-servicev2 .tsc-about-founder__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block;
}
body.tsc-servicev2 .tsc-about-founder__body .tsc-section__title{ margin:.35rem 0 1rem; }
body.tsc-servicev2 .tsc-about-founder__body p{
  margin:0 0 1rem; color:var(--tsc-color-text-muted); line-height:1.7;
}
body.tsc-servicev2 .tsc-about-sig{
  display:flex; align-items:center; gap:14px;
  margin-top:1.6rem; padding-top:1.25rem; border-top:1px solid var(--tsc-color-border);
}
body.tsc-servicev2 .tsc-about-sig__mono{
  width:52px; height:52px; flex:none; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tsc-navy); color:var(--tsc-gold);
  font-weight:800; font-size:1.02rem; letter-spacing:.03em;
}
body.tsc-servicev2 .tsc-about-sig__who{ display:flex; flex-direction:column; }
body.tsc-servicev2 .tsc-about-sig__name{
  font-size:clamp(16px,15px + 0.4vw,19px);
  font-weight:800; color:var(--tsc-navy); line-height:1.35;
}
body.tsc-servicev2 .tsc-about-sig__role{
  margin-top:2px; font-size:.9rem; line-height:1.45; color:var(--tsc-color-text-muted);
}

/* Desktop: let the founder image and the "why choose us" image fill the height
   of the taller column beside them, so neither floats in a tall empty gap.
   Scoped to .tsc-aboutv2 so the shared service-page .tsc-whyx layout is untouched. */
@media (min-width:861px){
  body.tsc-servicev2.tsc-aboutv2 .tsc-about-founder__media,
  body.tsc-servicev2.tsc-aboutv2 .tsc-whyx__media{
    align-self:stretch; aspect-ratio:auto;
  }
}

@media (max-width:860px){
  body.tsc-servicev2 .tsc-about-founder{ padding-bottom:clamp(28px,5vw,44px); }
  body.tsc-servicev2 .tsc-about-founder__inner{ grid-template-columns:1fr; gap:clamp(18px,5vw,28px); }
  body.tsc-servicev2 .tsc-about-founder__media{
    aspect-ratio:4 / 3; width:100%; max-width:420px;
    justify-self:center; margin-inline:auto;
  }
  body.tsc-servicev2 .tsc-about-founder__body{ text-align:center; }
  body.tsc-servicev2 .tsc-about-sig{
    flex-direction:column; align-items:center; text-align:center; gap:10px;
    border-top:none; padding-top:.25rem; margin-top:1rem;
  }
  body.tsc-servicev2 .tsc-about-sig__who{ align-items:center; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  body.tsc-servicev2 .tsc-about-founder__media{ transition:none; }
}

/* --------------------------------------------------------------------------
   21 - BENEFITS  (House Cleaning page; only new component - everything else
        on that page reuses the sections above via body.tsc-servicev2. Same
        card language as TYPES / STEPS: low shadow, subtle hover lift, no
        purple - reused, not reinvented.)
   -------------------------------------------------------------------------- */
body.tsc-servicev2 .tsc-benefits__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,240px),1fr));
  gap:clamp(16px,2.4vw,22px);
}
body.tsc-servicev2 .tsc-benefits__card{
  background:var(--tsc-color-surface); border:1px solid var(--tsc-color-border);
  border-radius:14px; padding:clamp(18px,2.4vw,24px);
  box-shadow:var(--tsc-shadow-sm);
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s cubic-bezier(.22,1,.36,1), border-color .2s cubic-bezier(.22,1,.36,1);
}
body.tsc-servicev2 .tsc-benefits__card:hover,
body.tsc-servicev2 .tsc-benefits__card:focus-within{ transform:translateY(-4px); box-shadow:var(--tsc-shadow-md); border-color:var(--tsc-gold); }
body.tsc-servicev2 .tsc-benefits__ico{
  width:44px; height:44px; border-radius:12px; margin-bottom:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tsc-navy-050); color:var(--tsc-navy);
}
body.tsc-servicev2 .tsc-benefits__ico svg{ width:22px; height:22px; }
body.tsc-servicev2 .tsc-benefits__card h3{ margin:0 0 .35rem; font-size:1.05rem; font-weight:800; color:var(--tsc-navy); }
body.tsc-servicev2 .tsc-benefits__card p{ margin:0; font-size:.9rem; line-height:1.55; color:var(--tsc-color-text-muted); }
@media (max-width:520px){
  body.tsc-servicev2 .tsc-benefits__grid{ grid-template-columns:1fr; }
}
/* Final QA (Move-Out polish pass): auto-fit alone leaves a lone 4th card
   orphaned on its own row between ~700-1180px (3 columns fit, not 4) - every
   subservice page has exactly 4 benefit cards, so this affected all of them,
   not just this page. Force a clean 2x2 in that range instead. */
@media (min-width:521px) and (max-width:1199px){
  body.tsc-servicev2 .tsc-benefits__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (prefers-reduced-motion:reduce){
  body.tsc-servicev2 .tsc-benefits__card{ transition:none; }
  body.tsc-servicev2 .tsc-benefits__card:hover{ transform:none; }
}
