/* Tub-to-shower layout; colors and type follow the existing site system. Shared header/footer are untouched. */
body.conv-mockup { --tc-navy:var(--clr-teal); --tc-navy-deep:var(--clr-teal); --tc-gold:var(--clr-terracotta); --tc-gold-light:var(--clr-terracotta); --tc-cream:var(--clr-sand); --tc-ink:var(--clr-espresso); --tc-muted:var(--sr-muted); }
body.conv-mockup main {  line-height:1.65; color:var(--tc-ink); }
body.conv-mockup main .container { max-width:1140px; }
body.conv-mockup main p { max-width:none; }
body.conv-mockup main h2 { font-family:var(--font-display);  font-weight:600; line-height:1.12; color:var(--tc-ink); }
body.conv-mockup main h3 { color:var(--tc-ink); }
body.conv-mockup main svg { flex-shrink:0; width:24px; height:24px; }
body.conv-mockup .tc-eyebrow { display:block; color:var(--tc-gold);  letter-spacing:.17em; text-transform:uppercase; font-weight:800; margin:0 0 14px; }
body.conv-mockup .tc-heading { text-align:center; margin:0 auto 28px; max-width:850px; }
body.conv-mockup .tc-heading .tc-eyebrow { display:flex; align-items:center; justify-content:center; gap:10px; }
body.conv-mockup .tc-heading .tc-eyebrow::before, body.conv-mockup .tc-heading .tc-eyebrow::after { content:""; width:23px; height:1px; background:var(--tc-gold); }
body.conv-mockup .tc-heading h2 { margin:0 0 12px; }
body.conv-mockup .tc-heading > p { margin:0 auto; max-width:760px; line-height:1.55; }
body.conv-mockup .tc-heading-left { text-align:left; margin-left:0; max-width:760px; }
body.conv-mockup .tc-heading-left .tc-eyebrow { justify-content:flex-start; }
body.conv-mockup .tc-heading-left .tc-eyebrow::after { display:none; }






body.conv-mockup .tc-hero { position:relative; isolation:isolate; background:var(--tc-navy); min-height:490px; color:#fff; overflow:hidden; }
body.conv-mockup .tc-hero-photo { position:absolute; inset:0; z-index:-2; }
body.conv-mockup .tc-hero-photo img { width:100%; height:100%; object-fit:cover; object-position:65% 52%; }
body.conv-mockup .tc-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(16,42,67,.98),rgba(16,42,67,.88) 27%,rgba(16,42,67,.53) 47%,rgba(16,42,67,.08) 72%); }
body.conv-mockup .tc-hero-inner { padding-top:clamp(6.5rem,11vw,8rem); padding-bottom:25px; }
body.conv-mockup .tc-hero-copy { max-width:560px; }
body.conv-mockup .tc-hero .tc-eyebrow { color:#f1eee5;  margin-bottom:13px; }


body.conv-mockup .tc-hero-intro { max-width:480px;  line-height:1.65; color:#f3f4f5; }
body.conv-mockup .tc-hero-actions { display:flex; flex-wrap:wrap; gap:26px; align-items:center; margin-top:23px; }
body.conv-mockup .tc-hero-phone { display:inline-flex; align-items:center; gap:12px; color:#fff; text-decoration:none;  font-weight:700; }
body.conv-mockup .tc-hero-phone svg { color:var(--tc-gold-light); }
body.conv-mockup .tc-hero-points { display:flex; flex-wrap:wrap; gap:22px; margin-top:32px; max-width:740px; }
body.conv-mockup .tc-hero-points > div { display:flex; gap:12px; align-items:center; padding-right:24px; border-right:1px solid #ffffff35; }
body.conv-mockup .tc-hero-points > div:last-child { border:0; }
body.conv-mockup .tc-hero-points svg { width:31px; height:31px; color:var(--tc-gold-light); }
body.conv-mockup .tc-hero-points p { margin:0; line-height:1.45; }
body.conv-mockup .tc-hero-points strong { display:block;  }
body.conv-mockup .tc-hero-points span { display:block;  color:#e2e8ec; }
body.conv-mockup .tc-planning { padding:52px 0; background:#fff; scroll-margin-top:24px; }
body.conv-mockup .tc-planning-grid { display:grid; grid-template-columns:1.05fr 1fr; align-items:start; gap:75px; }
body.conv-mockup .tc-planning-copy { padding-top:24px; }
body.conv-mockup .tc-planning-copy h2 { margin-bottom:22px;  }
body.conv-mockup .tc-planning-copy p {  }
body.conv-mockup .tc-benefits { display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin-top:24px;  font-weight:700; }
body.conv-mockup .tc-benefits li { position:relative; padding-left:24px; }
body.conv-mockup .tc-benefits li::before, body.conv-mockup .tc-check-list li::before { content:"✓"; position:absolute; left:0; top:3px; display:grid; place-items:center; background:var(--tc-gold); color:#fff; width:15px; height:15px; border-radius:50%;  font-weight:800; line-height:1; }
body.conv-mockup .tc-estimate.estimate-card { padding:24px 22px 18px; border:1px solid var(--clr-limestone); border-radius:12px; background:var(--tc-navy-deep); box-shadow:0 10px 30px #102a4328; }


body.conv-mockup .tc-estimate .tc-form-intro { color:#edf1f4;  text-align:center; margin:0 0 15px; }
body.conv-mockup .tc-estimate .ghl-survey-embed { padding:8px; border-radius:9px; background:#fff; }
body.conv-mockup .tc-estimate iframe { min-height:485px; }
body.conv-mockup .tc-estimate .form-subhead { color:#e0e6eb; text-align:center;  margin:12px 0 0; line-height:1.55; }
body.conv-mockup .tc-transformation { padding:42px 0; background:linear-gradient(var(--tc-cream),#fff); }
body.conv-mockup .tc-before-after { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:980px; margin:auto; }
body.conv-mockup .tc-before-after figure { position:relative; border-radius:13px; overflow:hidden; box-shadow:0 8px 20px #102a4318; }
body.conv-mockup .tc-before-after img { width:100%; height:280px; object-fit:cover; object-position:center 52%; }
body.conv-mockup .tc-before-after figcaption { position:absolute; left:15px; bottom:14px; padding:5px 18px; color:#fff; background:var(--tc-navy); border-radius:7px;  font-weight:700; }
body.conv-mockup .tc-before-after .tc-label-after { left:auto; right:15px; background:var(--tc-gold); }
body.conv-mockup .tc-compare-arrow { position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px; display:grid; place-items:center; background:#fff; border-radius:50%; box-shadow:0 2px 15px #00000012; }
body.conv-mockup .tc-suitability { padding:46px 0; background:var(--tc-cream); }
body.conv-mockup .tc-suitability .tc-heading h2 { max-width:35ch; }
body.conv-mockup .tc-fit-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
body.conv-mockup .tc-fit-card { background:#fff; border:1px solid var(--clr-limestone); border-radius:12px; overflow:hidden; box-shadow:0 4px 12px #102a4312; }
body.conv-mockup .tc-fit-card > img { width:100%; height:165px; object-fit:cover; object-position:center 35%; }
body.conv-mockup .tc-fit-card > div { padding:18px 24px 22px; }
body.conv-mockup .tc-fit-card h3 {  font-family:var(--font-body); margin:0 0 13px; line-height:1.3; }
body.conv-mockup .tc-check-list { display:grid; gap:8px;  line-height:1.55; }
body.conv-mockup .tc-check-list li { position:relative; padding-left:23px; }
body.conv-mockup .tc-check-list li::before { top:2px; width:13px; height:13px;  }
body.conv-mockup .tc-keep-tub { display:grid; grid-template-columns:1fr 1fr; background:var(--tc-navy); color:#fff; }
body.conv-mockup .tc-keep-photo { min-height:400px; position:relative; }
body.conv-mockup .tc-keep-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
body.conv-mockup .tc-keep-copy { padding:50px clamp(28px,5.4vw,90px); align-self:center; }
body.conv-mockup .tc-keep-copy h2 {  color:#fff; max-width:22ch; margin:0 0 20px; }
body.conv-mockup .tc-keep-copy .tc-eyebrow { color:var(--tc-gold-light); }
body.conv-mockup .tc-keep-copy p {  color:#eef1f3; line-height:1.75; }
body.conv-mockup .tc-materials { padding:45px 0; background:#fff; }
body.conv-mockup .tc-material-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-bottom:20px; }
body.conv-mockup .tc-material-grid figure { position:relative; border-radius:10px; overflow:hidden; }
body.conv-mockup .tc-material-grid figure::after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,#102a43c9); pointer-events:none; }
body.conv-mockup .tc-material-grid img { width:100%; height:170px; object-fit:cover; }
body.conv-mockup .tc-material-grid figcaption { position:absolute; z-index:1; left:16px; bottom:14px; color:#fff;  font-weight:700; }
body.conv-mockup .tc-table-scroll { overflow-x:auto; border:1px solid var(--clr-limestone); border-radius:9px; }
body.conv-mockup .tc-table-scroll:focus-visible { outline:3px solid var(--tc-gold); outline-offset:4px; }
body.conv-mockup .tc-table-scroll table { width:100%; min-width:680px; border-collapse:collapse;  background:#fff; }
body.conv-mockup .tc-table-scroll th,body.conv-mockup .tc-table-scroll td { text-align:left; vertical-align:top; border-bottom:1px solid var(--clr-limestone); padding:10px 14px; }
body.conv-mockup .tc-table-scroll th { color:var(--tc-navy); font-weight:800; }
body.conv-mockup .tc-table-scroll thead { background:var(--tc-cream); }
body.conv-mockup .tc-table-scroll tbody tr:nth-child(even) { background:var(--tc-cream); }
body.conv-mockup .tc-table-scroll tbody tr:last-child > * { border-bottom:0; }
body.conv-mockup .tc-process { padding:42px 0 48px; background:var(--tc-cream); }
body.conv-mockup .tc-process-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; }
body.conv-mockup .tc-process-grid > li { position:relative; min-width:0; padding:22px 14px; background:#fff; border:1px solid var(--clr-limestone); border-radius:12px; box-shadow:0 5px 12px #102a430c; text-align:center; }
body.conv-mockup .tc-process-grid > li:not(:last-child)::after { content:"→"; position:absolute; z-index:2; right:-15px; top:43px;  color:var(--tc-navy); }
body.conv-mockup .tc-step-icon { display:inline-grid; place-items:center; color:var(--tc-gold); margin-bottom:14px; }
body.conv-mockup .tc-step-icon svg { width:35px; height:35px; }
body.conv-mockup .tc-process-grid h3 {  font-family:var(--font-body); line-height:1.4; margin:0 0 10px; }
body.conv-mockup .tc-process-grid p {  line-height:1.65; text-align:left; }
body.conv-mockup .tc-cost { padding:45px 0; background:#fff; }
body.conv-mockup .tc-cost-grid { display:grid; grid-template-columns:.9fr 1.15fr; gap:44px; align-items:stretch; }
body.conv-mockup .tc-cost-photo { min-height:410px; border-radius:12px; overflow:hidden; }
body.conv-mockup .tc-cost-photo img { width:100%; height:100%; object-fit:cover; object-position:60% center; }
body.conv-mockup .tc-cost-copy .tc-heading { margin-bottom:16px; }
body.conv-mockup .tc-cost-copy .tc-heading h2 {  max-width:22ch; }
body.conv-mockup .tc-cost-copy > p {  line-height:1.65; margin:10px 0; }
body.conv-mockup .tc-cost-copy > p:first-of-type { padding:12px 16px; border-left:3px solid var(--tc-gold); background:var(--tc-cream); }
body.conv-mockup .tc-cost-copy a { color:var(--clr-eucalyptus); text-decoration:underline; }
body.conv-mockup .tc-cost-bottom { display:grid; grid-template-columns:1.5fr 1fr; gap:22px; margin-top:22px; align-items:start; }
body.conv-mockup .tc-cost-bottom h3 {  font-family:var(--font-body); margin-bottom:10px; line-height:1.45; }
body.conv-mockup .tc-cost-bottom .tc-check-list {  }
body.conv-mockup .tc-cost-bottom aside { border:1px solid var(--clr-limestone); border-radius:9px; background:var(--tc-cream); padding:18px; }
body.conv-mockup .tc-cost-bottom aside svg { width:32px; height:32px; color:var(--tc-gold); margin-bottom:7px; }
body.conv-mockup .tc-cost-bottom aside p {  line-height:1.6; }
body.conv-mockup .tc-cta { padding:34px 0; background:var(--tc-navy); text-align:center; }
body.conv-mockup .tc-cta h2 { color:#fff;  margin-bottom:10px; }
body.conv-mockup .tc-cta p { color:#e3e8eb;  margin:0 0 20px; }
body.conv-mockup .tc-cta .container > div { display:flex; flex-wrap:wrap; justify-content:center; gap:25px; }
body.conv-mockup .tc-faq { padding:36px 0 42px; background:#fff; }
body.conv-mockup .tc-faq .tc-heading { margin-bottom:20px; }
body.conv-mockup .tc-faq .tc-heading h2 {  }
body.conv-mockup .tc-faq .tc-heading p {  }
body.conv-mockup .tc-faq .faq-list { max-width:900px; margin:auto; display:grid; gap:10px; }
body.conv-mockup .tc-faq .faq-item { background:#fff; padding:0; border:1px solid #e1e5e7; border-radius:8px; box-shadow:0 3px 8px #102a430b; }
body.conv-mockup .tc-faq .conv-faq-no { display:none; }




@media (max-width:1000px) {
 body.conv-mockup .tc-planning-grid { gap:35px; }
 body.conv-mockup .tc-process-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
 body.conv-mockup .tc-process-grid > li:nth-child(3n)::after { display:none; }
 body.conv-mockup .tc-cost-grid { grid-template-columns:.8fr 1.2fr; gap:25px; }
 body.conv-mockup .tc-cost-bottom { grid-template-columns:1fr; }
 body.conv-mockup .tc-cost-bottom aside { display:block; }
 body.conv-mockup .tc-keep-copy { padding:35px; }
}
@media (max-width:700px) {
 body.conv-mockup main h2 {  }
 body.conv-mockup .tc-hero { min-height:0; }
 body.conv-mockup .tc-hero-photo img { object-position:68% center; }
 body.conv-mockup .tc-hero::after { background:linear-gradient(90deg,#102a43e8,#102a43ad 65%,#102a434d); }
 body.conv-mockup .tc-hero-inner { padding-top:clamp(6.5rem,11vw,8rem); padding-bottom:28px; }
 
 body.conv-mockup .tc-hero-intro {  }
 body.conv-mockup .tc-hero-actions { gap:18px; }
 body.conv-mockup .tc-hero-phone {  }
 body.conv-mockup .tc-hero-points { gap:15px; margin-top:28px; }
 body.conv-mockup .tc-hero-points > div { padding-right:0; border:0; gap:7px; }
 body.conv-mockup .tc-hero-points strong {  }
 body.conv-mockup .tc-hero-points span {  }
 body.conv-mockup .tc-hero-points svg { width:23px; height:23px; }
 body.conv-mockup .tc-planning, body.conv-mockup .tc-transformation, body.conv-mockup .tc-suitability, body.conv-mockup .tc-materials, body.conv-mockup .tc-process, body.conv-mockup .tc-cost { padding:35px 0; }
 body.conv-mockup .tc-planning-grid,body.conv-mockup .tc-fit-grid,body.conv-mockup .tc-cost-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
 body.conv-mockup .tc-planning-copy { padding-top:0; }
 body.conv-mockup .tc-planning-copy h2 {  }
 body.conv-mockup .tc-benefits { gap:12px 15px; }
 body.conv-mockup .tc-before-after { gap:14px; }
 body.conv-mockup .tc-before-after img { height:205px; }
 body.conv-mockup .tc-compare-arrow { width:34px; height:34px; margin:-17px; }
 body.conv-mockup .tc-before-after figcaption { bottom:9px; left:9px; padding:4px 12px;  }
 body.conv-mockup .tc-before-after .tc-label-after { left:auto; right:9px; }
 body.conv-mockup .tc-fit-card > img { height:185px; }
 body.conv-mockup .tc-keep-tub { grid-template-columns:1fr; }
 body.conv-mockup .tc-keep-photo { min-height:0; height:270px; }
 body.conv-mockup .tc-keep-copy { padding:35px 22px; }
 body.conv-mockup .tc-material-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
 body.conv-mockup .tc-material-grid img { height:155px; }
 body.conv-mockup .tc-material-grid figcaption { left:12px; bottom:10px;  }
 body.conv-mockup .tc-process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
 body.conv-mockup .tc-process-grid > li::after { display:none; }
 body.conv-mockup .tc-process-grid p {  }
 body.conv-mockup .tc-cost-photo { min-height:0; height:280px; }
 body.conv-mockup .tc-cost-bottom aside { display:block; }
 body.conv-mockup .tc-cta .container > div { gap:14px; }
 body.conv-mockup .tc-cta .tc-button { width:100%; }
 
}
@media (prefers-reduced-motion:reduce) {  }

/* Keep FAQ content readable without depending on the legacy scroll animation. */
body.conv-mockup .tc-faq .faq-item { opacity:1!important; transform:none!important; transition:none!important; }





/* Use the existing site's typography scale with the new section layout. */
body.conv-mockup main h2 { font-size:clamp(2rem,3.4vw,2.75rem); }
body.conv-mockup .tc-eyebrow { font-size:11px; }
body.conv-mockup .tc-hero-intro { font-size:clamp(1rem,1.5vw,1.125rem); }
body.conv-mockup .tc-hero-phone { font-size:var(--fs-btn); }
body.conv-mockup .tc-hero-points strong,
body.conv-mockup .tc-hero-points span,
body.conv-mockup .tc-before-after figcaption,
body.conv-mockup .tc-material-grid figcaption { font-size:var(--fs-sm); }
body.conv-mockup .tc-benefits,
body.conv-mockup .tc-check-list { font-size:var(--fs-body); }
body.conv-mockup .tc-fit-card h3,
body.conv-mockup .tc-cost-bottom h3 { font-size:var(--fs-h4); }
body.conv-mockup .tc-process-grid h3 { font-family:var(--font-display); font-size:1.35rem; font-weight:600; }
body.conv-mockup .tc-process-grid p { font-size:15px; }
body.conv-mockup .tc-table-scroll table,
body.conv-mockup .tc-estimate .form-subhead { font-size:var(--fs-sm); }
body.conv-mockup .tc-benefits li::before,
body.conv-mockup .tc-check-list li::before { font-size:10px; top:.4em; }
body.conv-mockup .tc-process-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
body.conv-mockup .tc-process-grid > li:nth-child(3n)::after { display:none; }
@media(max-width:700px) {
 body.conv-mockup .tc-process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 body.conv-mockup .tc-benefits { grid-template-columns:1fr; }
}