/* ==========================================================================
   TurnKey Bathtubs - interior page layer (about, the team, contact, FAQs,
   gallery, blog, testimonials)
   Sits on top of tkb-design.css + service.css. Wherever the homepage already
   has an approved design for a block - the process steps, the FAQ accordion,
   the blog cards, the review quotes, the gallery grid - this file adds NOTHING
   and the markup reuses those classes verbatim, so the pages cannot drift from
   the homepage. Only the blocks the homepage has no equivalent for are here.
   Prefix: .pg-
   ========================================================================== */

:root{
  --pg-card:#eaf3fc;
  --pg-line:#d8e8f8;
}

.pg-main{background:#fff}
.pg-main svg{flex:none}

/* ---------- the plain copy band (same treatment as the service pages) ----- */
.pg-body{padding:var(--sec-y) 0;background:#fff}
.pg-body-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:44px;align-items:start}
.pg-body h2{margin:34px 0 14px;color:var(--ink);font:700 clamp(24px,2.5vw,32px)/1.16 var(--f-head);text-wrap:balance}
.pg-body > .tkb-wrap > .pg-body-grid > .pg-copy > :first-child{margin-top:0}
.pg-body h3{margin:28px 0 10px;color:var(--ink);font:700 clamp(19px,1.8vw,23px)/1.25 var(--f-head)}
.pg-body p{margin:0 0 15px;color:var(--ink-3);font-size:15.5px;line-height:1.78;max-width:68ch}
.pg-body a{color:var(--blue);border-bottom:1px solid rgba(28,126,214,.5);text-decoration:none}
.pg-body a:hover{border-bottom-color:var(--blue)}
.pg-body b,.pg-body strong{color:var(--ink-2);font-weight:600}
.pg-body ul,.pg-body ol{margin:16px 0 20px;padding:0;display:grid;gap:11px;max-width:68ch;list-style:none}
.pg-body ul > li,.pg-body ol > li{position:relative;padding-left:26px;color:var(--ink-3);font-size:15px;line-height:1.72}
.pg-body ul > li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.pg-body ol{counter-reset:pgol}
.pg-body ol > li{padding-left:32px;counter-increment:pgol}
.pg-body ol > li::before{
  content:counter(pgol);position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;
  background:var(--blue-pale);color:var(--blue-d);font:700 11.5px/21px var(--f-body);text-align:center;
}
.pg-figure{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);position:sticky;top:120px}
.pg-figure img{display:block;width:100%;height:auto}

/* ---------- the team ------------------------------------------------------ */
.pg-team{padding:var(--sec-y) 0;background:#fff}
.pg-team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:940px;margin:0 auto}
.pg-member{
  margin:0;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.pg-member:hover{transform:translateY(-4px);box-shadow:var(--sh)}
/* the card IS the <figure>; give the image the ratio, never height:100%, or the
   caption overflows the clipped card */
.pg-member img{
  display:block;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;object-position:center top;background:var(--pg-card);
}
.pg-member figcaption{padding:18px 20px 20px;text-align:center}
.pg-member b{display:block;color:var(--ink);font:700 21px/1.2 var(--f-head)}
.pg-member span{display:block;margin-top:5px;color:var(--muted);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- contact ------------------------------------------------------- */
.pg-contact{padding:var(--sec-y) 0 var(--sec-y-md);background:#fff}
.pg-info{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pg-info li{
  display:flex;gap:15px;align-items:flex-start;
  background:var(--pg-card);border:1px solid var(--pg-line);border-radius:var(--r);padding:24px 24px;
}
.pg-info svg{width:24px;height:24px;flex:none;color:var(--ink-2);margin-top:2px}
.pg-info b{display:block;margin-bottom:5px;color:var(--muted);font:700 11px/1 var(--f-body);letter-spacing:.13em;text-transform:uppercase}
.pg-info span,.pg-info a{color:var(--ink);font-size:16px;font-weight:600;line-height:1.5;text-decoration:none}
.pg-info a:hover{color:var(--blue)}
.pg-lic{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--muted);font-size:13px}
.pg-lic span{display:inline-flex;align-items:center;gap:7px}
.pg-lic svg{width:14px;height:14px;color:var(--blue)}

.pg-reach{padding:0 0 var(--sec-y);background:#fff}
.pg-reach-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch}
.pg-map{margin:0;border:1px solid var(--pg-line);border-radius:var(--r);overflow:hidden;background:var(--pg-card);min-height:420px}
.pg-map iframe,.pg-map img{display:block;width:100%;height:100%;min-height:420px;border:0;object-fit:cover}
.pg-form{background:var(--pg-card);border:1px solid var(--pg-line);border-radius:var(--r);padding:32px 30px}
.pg-form h2{margin:0 0 6px;color:var(--ink);font:700 clamp(23px,2.4vw,30px)/1.14 var(--f-head)}
.pg-form > p{margin:0 0 20px;color:var(--ink-3);font-size:14.5px;line-height:1.65}
.pg-form label{display:block;margin-bottom:14px}
.pg-form label > span{display:block;margin-bottom:6px;color:var(--ink-2);font:600 12.5px/1 var(--f-body);letter-spacing:.04em}
.pg-form input,.pg-form select,.pg-form textarea{
  width:100%;padding:12px 14px;border:1px solid #cfe0f1;border-radius:var(--r-sm);
  background:#fff;color:var(--ink);font:400 15px/1.4 var(--f-body);
}
.pg-form textarea{min-height:104px;resize:vertical}
.pg-form input:focus,.pg-form select:focus,.pg-form textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.pg-form .svc-btn{width:100%;justify-content:center;margin-top:6px}
.pg-form-note{
  margin:16px 0 0;padding:12px 14px;border-radius:var(--r-sm);
  background:#fff;border:1px dashed #bcd8f2;color:var(--muted);font-size:12.5px;line-height:1.55;
}

/* ---------- gallery ------------------------------------------------------- */
.pg-gallery{padding:var(--sec-y) 0;background:#fff}
.pg-shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pg-shot{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--pg-card);aspect-ratio:7/5}
.pg-shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.pg-shot:hover img{transform:scale(1.06)}
.pg-shot a{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(11,31,51,0) 40%,rgba(11,31,51,.55));opacity:0;transition:opacity .25s ease}
.pg-shot a:hover,.pg-shot a:focus-visible{opacity:1}
.pg-shot a svg{width:36px;height:36px;color:#fff;stroke-width:1.5}
.pg-shot[hidden]{display:none}
.pg-more{margin:30px auto 0;display:block}
.pg-shot-count{margin:14px 0 0;text-align:center;color:var(--muted);font-size:13px}

.pg-video{padding:0 0 var(--sec-y);background:#fff}
.pg-video-wrap{position:relative;max-width:760px;margin:0 auto;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.pg-video-wrap img,.pg-video-wrap video{display:block;width:100%;height:auto}
.pg-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(11,31,51,.28);text-decoration:none;
}
.pg-play span{
  width:74px;height:74px;border-radius:50%;background:#fff;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 34px rgba(11,31,51,.35);transition:transform .2s ease;
}
.pg-play:hover span{transform:scale(1.08)}
.pg-play svg{width:26px;height:26px;margin-left:3px}

/* ---------- blog listing --------------------------------------------------
   .bcard itself is the homepage's approved card and is reused untouched; only
   the container differs, because the homepage scrolls horizontally and a
   listing page should not. */
.pg-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:stretch}
.pg-blog-grid .bcard{display:flex;flex-direction:column;height:100%}

/* ---------- blog listing pagination --------------------------------------- */
.pg-pager{margin:36px 0 0;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.pg-pager a,.pg-pager span{
  min-width:42px;height:42px;padding:0 12px;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);
  font:600 14px/1 var(--f-body);text-decoration:none;
}
.pg-pager a:hover{border-color:var(--blue);color:var(--blue)}
.pg-pager [aria-current]{background:var(--ink-2);border-color:var(--ink-2);color:#fff}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1080px){
  .pg-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-body-grid{grid-template-columns:1fr;gap:30px}
  .pg-figure{position:static;max-width:520px}
  .pg-shots{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .pg-team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-info{grid-template-columns:1fr}
  .pg-reach-grid{grid-template-columns:1fr}
  .pg-map,.pg-map iframe,.pg-map img{min-height:300px}
  .pg-body p,.pg-body ul,.pg-body ol{max-width:none}
}
@media (max-width:680px){
  .pg-blog-grid{grid-template-columns:1fr}
  .pg-shots{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pg-team-grid{grid-template-columns:1fr;max-width:340px}
  .pg-form{padding:26px 20px}
  .pg-play span{width:58px;height:58px}
}

@media print{
  .pg-more,.pg-play{display:none!important}
  .pg-shot[hidden]{display:block!important}
}

/* ==========================================================================
   Centred text on the interior pages (client mark-up: `center the text.jpg`)
   The mark circles the closing CTA card, whose copy sat in the left third of a
   1124px-wide band. Measuring the rest of the pages showed the section headers
   were inconsistent too - process / blog / reviews inherit centred headings
   from the homepage, while FAQ, team, gallery and video were left-aligned - so
   they are brought into line here rather than left half-and-half.

   Deliberately NOT centred: the about page's body prose and the contact form.
   Long paragraphs, bulleted lists and form fields are materially harder to read
   and to use centred, and neither is inside the marked area.
   ========================================================================== */

/* --- closing CTA band: the block the client marked --- */
.pg-cta-band .loc-cta{
  align-items:center;text-align:center;
  padding:46px 38px;
}
.pg-cta-band .loc-cta .svc-eyebrow{justify-content:center;width:100%}
.pg-cta-band .loc-cta h2{width:100%}
.pg-cta-band .loc-cta p{max-width:56ch;margin-left:auto;margin-right:auto}
.pg-cta-band .loc-cta-btns{
  flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;
}

/* --- section headers, consistently centred across all seven pages --- */
.pg-main .sec-head{text-align:center}
.pg-main .sec-head .eyebrow{justify-content:center}
.pg-main .sec-head h2,
.pg-main .sec-head .sec-sub{margin-left:auto;margin-right:auto}
.pg-main .sec-head .sec-sub{max-width:62ch}
/* The homepage FAQ header is deliberately left-anchored: text-align:left,
   margin-left:0, and a 74px rule under the h2 with margin:14px 0 0. Centring
   the text alone left the heading off-centre and the rule stranded at the far
   left, so the block and the rule are re-centred too. */
.pg-main .faq .sec-head,
.pg-main .faq .sec-head h2,
.pg-main .faq .sec-head .sec-sub{text-align:center}
.pg-main .faq .sec-head{margin-left:auto;margin-right:auto}
.pg-main .faq .sec-head h2::after{margin-left:auto;margin-right:auto}
/* the accordions and the gallery grid stay full width under a centred header */
.pg-main .faq-list{margin-left:auto;margin-right:auto}

/* --- blocks whose own copy should read centred under those headers --- */
.pg-team-grid,.pg-blog-grid{margin-left:auto;margin-right:auto}
.pg-video .pg-video-wrap{margin-left:auto;margin-right:auto}

@media (max-width:680px){
  .pg-cta-band .loc-cta{padding:32px 22px}
  .pg-cta-band .loc-cta-btns{flex-direction:column;align-items:stretch;width:100%}
  .pg-cta-band .loc-cta-btns .svc-btn{justify-content:center}
}

/* --- screen-reader-only text (the design system had no such utility) ------- */
.tkb-sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --- contact form: a disabled layout preview, not a live form ------------- */
.pg-form-fields{border:0;margin:0;padding:0;min-width:0}
.pg-form-fields:disabled{opacity:.72}
.pg-form-fields input,.pg-form-fields select,.pg-form-fields textarea{
  cursor:not-allowed;background:#f7fafd;
}
.pg-form-go{width:100%;justify-content:center;margin-top:6px}
.pg-form-note b{color:var(--ink-2)}