/* Service detail pages — /services/<service>/ and /design-your-shower/.
   Loads AFTER the frozen shared site.css. site.css is not edited by this build.
   Components that already exist in site.css (.sec, .sec-head, .sec-num, .checks,
   .btn*, .band, .pj-media, .pj-tag, .more, footer) are used, not redefined.
   Components borrowed from about.css / services.css / blog.css are redeclared
   here because those sheets do not load on these pages. */

/* ---- breadcrumbs (same component as the blog) ---- */
.crumbs{background:var(--cream);border-bottom:1px solid var(--line);font-size:.85rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 0;margin:0}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:#9AA1AA}
.crumbs a{text-decoration:none;font-weight:600}
.crumbs a:hover{color:var(--orange)}
.crumbs [aria-current]{color:var(--ink);font-weight:700}

/* ---- orange eyebrow (same as the Services page) ---- */
.hero-eyebrow{color:var(--orange);font-weight:800;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;margin:0 0 .7rem}

/* ---- split-panel hero: copy left, image right (same as About Us) ---- */
.pg-hero{background:var(--cream);border-bottom:1px solid var(--line);padding:56px 0 72px}
.pg-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center}
.pg-hero-copy h1{margin-bottom:.5em}
.pg-hero-media picture{display:block}
.pg-hero-media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn-ink{background:#000;color:#fff;border-color:#000;display:inline-flex;align-items:center;gap:10px;justify-content:center}
.btn-ink:hover{background:#1c1c1c;border-color:#1c1c1c}
.btn-ico{width:18px;height:18px;fill:currentColor;flex:none}

/* The 40-80 word answer. It sits directly under the h1 and before anything else,
   so it is sized to be read first rather than skimmed past. */
.answer{font-size:1.12rem;line-height:1.6;color:var(--ink);max-width:56ch;margin:0;
  padding-left:20px;border-left:4px solid var(--orange)}

/* before/after pair inside the hero media slot */
.pg-hero-media .ba-pair{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.pg-hero-media .ba-pair img{border-radius:0;box-shadow:none;aspect-ratio:8/9}

/* ---- text / image split rows ---- */
.sec-what{background:#fff}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center}
.split-media picture{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.split-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.split-body h2{margin-bottom:.5em}
.split-body p:last-child{margin-bottom:0}
.split-body a{color:var(--orange);font-weight:700}

/* ---- black feature band: what is included ---- */
.sec-included .sec-head p{color:#C9CDD3}
.incl-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 46px;max-width:1040px;margin:0 auto}
.incl-grid .checks li{color:#E7EAEE;font-size:.97rem;margin-bottom:.85em;line-height:1.55}
.incl-grid .checks li b{color:#fff}
.incl-foot{max-width:800px;margin:36px auto 0;text-align:center;color:#C9CDD3;font-size:.95rem}

/* ---- the choices ---- */
.sec-choices{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.choice-grid>li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow)}
.choice-ico{display:grid;place-items:center;width:50px;height:50px;margin:0 0 15px;border-radius:50%;border:2px solid var(--orange)}
.choice-ico svg{width:25px;height:25px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.choice-grid h3{font-size:1rem;margin-bottom:.45em}
.choice-grid h4{font-size:1rem;margin-bottom:.45em}
.choice-grid p{font-size:.93rem;margin:0}

/* ---- Design Your Shower panel — deliberately mid-page, not a primary CTA ---- */
.design-panel{display:flex;gap:22px;align-items:flex-start;margin:40px 0 0;
  background:#fff;border:1px solid var(--line);border-left:5px solid var(--orange);
  border-radius:var(--radius);padding:28px 30px}
.design-ico{flex:none;width:52px;height:52px;border-radius:50%;border:2px solid var(--orange);display:grid;place-items:center}
.design-ico svg{width:25px;height:25px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.design-panel h3{font-size:1.1rem;margin-bottom:.4em}
.design-panel p{font-size:.96rem}
.design-panel .more{font-size:.92rem}

/* ---- doors: three options, presented level ---- */
.doors{margin-top:48px}
.doors h3{font-size:1.3rem;margin-bottom:.4em}
.doors>p{max-width:70ch}
.door-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:26px}
.door-grid>li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow)}
.door-grid p{font-size:.93rem;margin:0}
.doors-note{margin-top:24px;font-size:.95rem;max-width:78ch}
.doors-note a,.design-panel a:not(.more),.incl-foot a,.tl-foot a,.area-foot a{color:var(--orange);font-weight:700}

/* ---- timeline ---- */
.sec-timeline{background:#fff}
.tl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tl-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px}
.tl-num{display:block;font-size:.82rem;font-weight:800;letter-spacing:.18em;color:var(--orange);margin-bottom:.7rem}
.tl-card h3{font-size:1.06rem;margin-bottom:.45em}
.tl-card p{font-size:.95rem;margin:0}
.tl-foot{max-width:78ch;margin:34px auto 0;text-align:center;font-size:.95rem}

/* ---- proof: before/after + detail strip ---- */
.sec-proof{background:var(--cream);border-top:1px solid var(--line)}
.sec-proof .pj-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);max-width:900px;margin:0 auto}
.sec-proof .pj-media img{width:100%;height:auto;aspect-ratio:8/9;object-fit:cover}
.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:34px}
.detail-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:840px;margin-left:auto;margin-right:auto}
.detail-grid>li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.detail-grid picture{display:block}
.detail-grid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.detail-grid span{display:block;padding:14px 18px 18px;font-size:.9rem}
.proof-foot{text-align:center;margin:32px 0 0}

/* ---- blog links ---- */
.sec-read{background:#fff}
.read-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 30px;max-width:1000px;margin:0 auto}
.read-list li{display:flex;gap:14px;align-items:flex-start}
.read-ico{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid var(--orange);display:grid;place-items:center}
.read-ico svg{width:19px;height:19px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.read-list a{text-decoration:none;font-weight:700;color:var(--ink);font-size:.97rem;padding-top:7px}
.read-list a:hover{color:var(--orange)}
.read-more{text-align:center;margin:34px 0 0}

/* ---- service area ---- */
.sec-area{background:var(--cream);border-top:1px solid var(--line)}
.area-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 18px;max-width:1000px;margin:0 auto}
.area-list li{background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 14px;font-size:.9rem;font-weight:600;color:var(--ink);text-align:center}
.area-foot{display:flex;gap:16px;align-items:flex-start;max-width:820px;margin:34px auto 0;font-size:.95rem}
.area-ico{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--orange);display:grid;place-items:center}
.area-ico svg{width:22px;height:22px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---- the 14 colours, named not swatched ---- */
.colour-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 18px;max-width:1000px;margin:0 auto}
.colour-list li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:8px;padding:13px 16px;font-weight:700;color:var(--ink);font-size:.95rem}
.colour-note{max-width:78ch;margin:34px auto 0;text-align:center;font-size:.95rem}

/* ---- warranty (same component as every other page) ---- */
.sec-warranty{background:#fff;border-top:1px solid var(--line)}
.warranty-card{display:flex;gap:22px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-left:5px solid var(--orange);border-radius:var(--radius);padding:30px 32px}
.warranty-ico{flex:none;width:52px;height:52px;border-radius:50%;border:2px solid var(--orange);display:grid;place-items:center}
.warranty-ico svg{width:26px;height:26px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.warranty-card h2{font-size:1.25rem;margin-bottom:.4em}
.warranty-text{margin:0;font-size:1rem}

/* ---- closing CTA band (same component as the Services page) ---- */
.band-cta{border-top:1px solid rgba(255,255,255,.12)}
.band-cta-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center}
.band-cta h2{color:#fff;margin-bottom:.4em}
.band-cta p{color:#C9CDD3;margin:0}
.band-cta-actions{display:flex;flex-direction:column;gap:12px}

/* ---- responsive ---- */
@media (max-width:1024px){
  .pg-hero{padding:40px 0 60px}
  .pg-hero-grid,.split{grid-template-columns:1fr;gap:32px}
  .choice-grid,.door-grid,.tl-grid,.detail-grid,.detail-grid-2{grid-template-columns:1fr 1fr}
  .area-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .colour-list{grid-template-columns:1fr 1fr}
  .band-cta-grid{grid-template-columns:1fr;gap:28px}
  .read-list{grid-template-columns:1fr}
}
@media (max-width:767px){
  .pg-hero{padding:30px 0 48px}
  .answer{font-size:1.04rem;padding-left:16px}
  .hero-actions .btn{width:100%}
  .incl-grid{grid-template-columns:1fr;gap:0}
  .choice-grid,.door-grid,.tl-grid,.detail-grid,.detail-grid-2,.colour-list{grid-template-columns:1fr}
  .area-list{grid-template-columns:1fr 1fr}
  .design-panel,.warranty-card,.area-foot{flex-direction:column;gap:16px;padding:22px}
  .area-foot{padding:0}
  .band-cta-actions .btn{width:100%}
}