/* ==========================================================================
   TurnKey Bathtubs - service page layer
   Sits on top of tkb-design.css and reuses its tokens (--ink, --blue, --wrap...)
   Prefix: .svc-
   ========================================================================== */

:root{
  --svc-cream:#f6f2ec;      /* hero copy panel                */
  --svc-ice:#eef6fd;        /* trust strip + process band     */
  --svc-card:#eaf3fc;       /* why-choose / cta card          */
}

.svc-main{background:#fff}

/* Inline SVGs carry no width/height attribute, so an unsized one falls back to
   300x150. Every icon is either inside a sized span (fill it) or sized directly. */
.svc-why-ico,.svc-step-ico{display:inline-block}
.svc-why-ico>svg,.svc-step-ico>svg{display:block;width:100%;height:100%}
.svc-main svg{flex:none}

/* ---------- breadcrumb ---------------------------------------------------- */
.svc-crumb{background:#fff;border-bottom:1px solid var(--line)}
.svc-crumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  list-style:none;margin:0;padding:11px 0;
  font-size:12.5px;color:var(--muted);
}
.svc-crumb li{display:flex;align-items:center;gap:8px}
.svc-crumb li+li::before{content:"";width:5px;height:5px;flex:none;border-right:1.5px solid #b9c7d6;border-bottom:1.5px solid #b9c7d6;transform:rotate(-45deg)}
.svc-crumb a{color:var(--muted);text-decoration:none}
.svc-crumb a:hover{color:var(--blue);text-decoration:underline}
.svc-crumb [aria-current]{color:var(--ink);font-weight:600}

/* ---------- hero: cream copy panel, photo bleeding off the right ---------- */
.svc-hero{position:relative;background:var(--svc-cream);overflow:hidden}
.svc-hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  align-items:center;min-height:400px;
  width:100%;max-width:none;padding:0;margin:0;
}
.svc-hero-copy{
  padding:56px 46px 56px max(var(--pad),calc((100vw - var(--wrap))/2));
  max-width:none;
}
.svc-eyebrow{
  margin:0 0 12px;font:600 11.5px/1 var(--f-body);
  letter-spacing:.20em;text-transform:uppercase;color:var(--blue);
}
.svc-hero h1{
  margin:0 0 16px;color:var(--ink);
  font:700 clamp(34px,4.4vw,54px)/1.06 var(--f-head);
  letter-spacing:-.005em;text-wrap:balance;
}
.svc-lede{margin:0 0 26px;color:var(--ink-3);font-size:16px;line-height:1.66;max-width:52ch}
.svc-hero-ctas{display:flex;flex-wrap:wrap;gap:12px}

.svc-hero-media{position:relative;align-self:stretch;min-height:400px}
.svc-hero-media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
/* soft feather so the photo melts into the cream panel */
.svc-hero-media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--svc-cream) 0%,rgba(246,242,236,.72) 12%,rgba(246,242,236,0) 34%);
}

/* buttons - matching the design system's pill CTAs */
.svc-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:999px;border:1.5px solid transparent;
  font:600 12.5px/1 var(--f-body);letter-spacing:.10em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.svc-btn svg{width:15px;height:15px;flex:none}
.svc-btn-primary{background:var(--ink-2);color:#fff;box-shadow:0 10px 26px rgba(20,48,77,.24)}
.svc-btn-primary:hover{background:var(--ink);transform:translateY(-2px);box-shadow:0 16px 34px rgba(20,48,77,.30)}
.svc-btn-ghost{background:#fff;color:var(--ink-2);border-color:#d7e2ee}
.svc-btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.svc-btn-blue{background:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(28,126,214,.28)}
.svc-btn-blue:hover{background:var(--blue-d);transform:translateY(-2px)}

/* ---------- trust strip --------------------------------------------------- */
.svc-trust{background:var(--svc-ice);border-block:1px solid #dbe9f7}
.svc-trust ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.svc-trust li{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:20px 14px;text-align:left;
}
.svc-trust li+li{border-left:1px solid #d3e4f5}
.svc-trust svg{width:26px;height:26px;flex:none;color:var(--ink-2)}
.svc-trust b{
  display:block;color:var(--ink-2);
  font:600 13px/1.3 var(--f-body);max-width:9em;
}

/* ---------- about: copy | photo | why-card -------------------------------- */
.svc-about{padding:var(--sec-y) 0;background:#fff}
.svc-about-grid{
  display:grid;grid-template-columns:1.15fr .95fr .85fr;
  gap:34px;align-items:start;
}
.svc-about h2{
  margin:0 0 14px;color:var(--ink);
  font:700 clamp(26px,2.7vw,34px)/1.14 var(--f-head);
}
.svc-about p{margin:0 0 12px;color:var(--ink-3);font-size:15px;line-height:1.68}
.svc-checks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px}
.svc-checks li{
  display:flex;gap:11px;align-items:flex-start;
  color:var(--ink-2);font-size:14.5px;line-height:1.5;font-weight:500;
}
.svc-checks svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--blue)}

.svc-about-photo{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.svc-about-photo img{display:block;width:100%;height:100%;min-height:280px;object-fit:cover}

.svc-why{
  background:var(--svc-card);border-radius:var(--r);
  padding:26px 24px;border:1px solid #d8e8f8;
}
.svc-why-ico{width:30px;height:30px;flex:none;color:var(--ink-2);margin-bottom:12px}
.svc-why h3{margin:0 0 10px;color:var(--ink);font:700 20px/1.2 var(--f-head)}
.svc-why p{margin:0 0 12px;color:var(--ink-3);font-size:14px;line-height:1.65}
.svc-why ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.svc-why li{
  position:relative;padding-left:16px;
  color:var(--ink-3);font-size:13.5px;line-height:1.5;
}
.svc-why li::before{
  content:"";position:absolute;left:0;top:8px;
  width:5px;height:5px;border-radius:50%;background:var(--blue);
}
.svc-why a{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  color:var(--blue);font-weight:600;font-size:13.5px;text-decoration:none;
}
.svc-why a svg{width:15px;height:15px;flex:none}
.svc-why a:hover{text-decoration:underline}

/* ---------- process ------------------------------------------------------- */
.svc-proc{padding:var(--sec-y) 0;background:var(--svc-ice)}
.svc-proc h2{margin:0 0 var(--head-gap);color:var(--ink);font:700 clamp(26px,2.7vw,34px)/1.14 var(--f-head)}
.svc-steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:0;
}
.svc-step{position:relative;padding-right:30px}
.svc-step:last-child{padding-right:0}
/* connector arrow between steps */
.svc-step:not(:last-child)::after{
  content:"";position:absolute;top:20px;right:12px;
  width:9px;height:9px;
  border-top:1.5px solid #9db8d2;border-right:1.5px solid #9db8d2;
  transform:rotate(45deg);
}
.svc-step-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.svc-num{
  width:40px;height:40px;flex:none;border-radius:50%;
  background:var(--ink-2);color:#fff;
  display:grid;place-items:center;
  font:700 12.5px/1 var(--f-body);letter-spacing:.04em;
}
.svc-step-ico{width:27px;height:27px;color:var(--ink-2);flex:none}
.svc-step b{display:block;margin-bottom:6px;color:var(--ink);font:600 15px/1.3 var(--f-body)}
.svc-step p{margin:0;color:var(--ink-3);font-size:13.5px;line-height:1.6}

/* ---------- detail body: the rest of the real page copy -------------------
   Plain content only, per the client's markup on "make changes.jpg":
   one column, no cards, no panels, no grid. Hierarchy comes from type alone. */
.svc-body{padding:var(--sec-y) 0;background:#fff}
.svc-body-grid{display:block}

.svc-block+.svc-block{margin-top:46px}
.svc-block>h2{
  margin:0 0 16px;color:var(--ink);
  font:700 clamp(24px,2.5vw,31px)/1.16 var(--f-head);text-wrap:balance;
}
.svc-block>h3{
  margin:32px 0 10px;color:var(--ink);
  font:700 clamp(19px,1.8vw,22px)/1.25 var(--f-head);text-wrap:balance;
}
.svc-block>h4{
  margin:26px 0 8px;color:var(--ink-2);
  font:600 16.5px/1.3 var(--f-body);letter-spacing:.005em;
}
.svc-block>p{margin:0 0 14px;color:var(--ink-3);font-size:15.5px;line-height:1.75;max-width:72ch}
.svc-block>p:last-child{margin-bottom:0}
.svc-block a{color:var(--blue)}
.svc-block b,.svc-block strong{color:var(--ink-2);font-weight:600}

.svc-block>ul{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:12px;max-width:72ch}
.svc-block>ul>li{
  position:relative;padding-left:24px;
  color:var(--ink-3);font-size:15px;line-height:1.7;
}
.svc-block>ul>li::before{
  content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--blue);
}
.svc-block>ul>li b{color:var(--ink-2);font-weight:600}

/* ---------- related services --------------------------------------------- */
.svc-rel{padding:var(--sec-y-md) 0;background:var(--paper-2);border-top:1px solid var(--line)}
.svc-rel h2{margin:0 0 22px;color:var(--ink);font:700 clamp(22px,2.3vw,28px)/1.18 var(--f-head)}
.svc-rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.svc-rel-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.svc-rel-card:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:#cfe0f2}
.svc-rel-card span{display:block}
.svc-rel-card .k{
  font:600 10.5px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:6px;
}
.svc-rel-card .t{color:var(--ink);font:600 15.5px/1.2 var(--f-body)}
.svc-rel-card svg{width:16px;height:16px;flex:none;color:var(--blue)}
.svc-checks svg{width:17px;height:17px;flex:none}
.svc-rel-card[aria-current]{border-color:var(--blue);background:var(--svc-card)}

/* ---------- work gallery -------------------------------------------------- */
.svc-work{padding:var(--sec-y) 0;background:#fff}
.svc-work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:var(--head-gap)}
.svc-work-head h2{margin:0;color:var(--ink);font:700 clamp(26px,2.7vw,34px)/1.14 var(--f-head)}
.svc-work-head a{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  color:var(--blue);font:600 13px/1 var(--f-body);text-decoration:none;
}
.svc-work-head a:hover{text-decoration:underline}
.svc-work-head a svg{width:15px;height:15px;flex:none}
.svc-work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.svc-shot{margin:0}
.svc-shot-img{
  position:relative;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh);aspect-ratio:4/3;background:var(--paper-2);
}
.svc-shot-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.svc-shot:hover .svc-shot-img img{transform:scale(1.045)}
.svc-shot figcaption{
  margin-top:10px;color:var(--ink-3);
  font-size:13px;line-height:1.45;
}
.svc-shot figcaption b{display:block;color:var(--ink-2);font-weight:600}

/* ---------- faq + cta ----------------------------------------------------- */
.svc-faq{padding:var(--sec-y) 0 calc(var(--sec-y) + 6px);background:#fff;border-top:1px solid var(--line)}
.svc-faq-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.svc-faq h2{margin:0 0 var(--head-gap);color:var(--ink);font:700 clamp(26px,2.7vw,34px)/1.14 var(--f-head)}

.svc-acc{border-top:1px solid var(--line)}
.svc-acc details{border-bottom:1px solid var(--line)}
.svc-acc summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 2px;color:var(--ink-2);
  font:500 15px/1.4 var(--f-body);
}
.svc-acc summary::-webkit-details-marker{display:none}
.svc-acc summary:hover{color:var(--blue)}
.svc-acc summary::after{
  content:"";flex:none;width:11px;height:11px;
  background:
    linear-gradient(var(--blue),var(--blue)) center/11px 1.5px no-repeat,
    linear-gradient(var(--blue),var(--blue)) center/1.5px 11px no-repeat;
  transition:transform .22s ease;
}
.svc-acc details[open] summary::after{transform:rotate(45deg)}
.svc-acc-body{padding:0 2px 18px;color:var(--ink-3);font-size:14.5px;line-height:1.7}
.svc-acc-body :first-child{margin-top:0}
.svc-acc-body p{margin:0 0 10px}
.svc-acc-body ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.svc-acc-body li{position:relative;padding-left:16px}
.svc-acc-body li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--blue)}

.svc-cta{
  position:relative;overflow:hidden;
  background:var(--svc-card);border:1px solid #d8e8f8;border-radius:var(--r);
  padding:34px 32px;
}
.svc-cta-leaf{
  position:absolute;right:-14px;bottom:-20px;width:190px!important;height:auto!important;
  color:#bcd8f2;opacity:.55;pointer-events:none;
}
.svc-cta>*{position:relative;z-index:1}
.svc-cta .svc-eyebrow{color:var(--blue-d)}
.svc-cta h2{margin:0 0 12px;font:700 clamp(23px,2.4vw,30px)/1.14 var(--f-head);color:var(--ink)}
.svc-cta p{margin:0 0 22px;color:var(--ink-3);font-size:14.5px;line-height:1.66;max-width:44ch}
.svc-cta-btns{display:flex;flex-wrap:wrap;gap:11px}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1080px){
  .svc-about-grid{grid-template-columns:1fr 1fr}
  .svc-why{grid-column:1/-1}
  .svc-steps{grid-template-columns:repeat(3,1fr);gap:26px 0}
  .svc-step:nth-child(3n)::after{display:none}
  .svc-work-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .svc-hero-grid{grid-template-columns:1fr;min-height:0}
  .svc-hero-copy{padding:40px var(--pad) 34px;max-width:none;order:2}
  .svc-hero-media{order:1;min-height:270px;height:44vw;max-height:360px}
  .svc-hero-media::before{
    background:linear-gradient(0deg,var(--svc-cream) 0%,rgba(246,242,236,0) 40%);
  }
  .svc-trust ul{grid-template-columns:repeat(2,1fr)}
  .svc-trust li:nth-child(odd)+li{border-left:1px solid #d3e4f5}
  .svc-trust li:nth-child(3),.svc-trust li:nth-child(4){border-top:1px solid #d3e4f5}
  .svc-trust li:nth-child(3){border-left:0}
  .svc-faq-grid{grid-template-columns:1fr;gap:34px}
}
@media (max-width:680px){
  .svc-about-grid{grid-template-columns:1fr}
  .svc-about-photo img{min-height:220px}
  .svc-steps{grid-template-columns:1fr;gap:22px}
  .svc-step{padding-right:0}
  .svc-step::after{display:none!important}
  .svc-work-grid{grid-template-columns:1fr 1fr;gap:12px}
  .svc-work-head{flex-direction:column;align-items:flex-start;gap:10px}
  .svc-hero-ctas .svc-btn,.svc-cta-btns .svc-btn{flex:1 1 100%;justify-content:center}
  .svc-cta{padding:28px 22px}
  .svc-cta-leaf{width:140px;opacity:.4}
}

/* ---------- print --------------------------------------------------------- */
@media print{
  .tkb-float,.tkb-totop,.svc-crumb{display:none!important}
  .svc-hero,.svc-trust,.svc-proc{background:#fff!important}
}