:root {
  --navy: #092c50;
  --navy-2: #0e416f;
  --blue: #238fca;
  --blue-light: #83c9ee;
  --red: #df3039;
  --ink: #132331;
  --muted: #5c6b78;
  --paper: #f5f8fb;
  --white: #fff;
  --line: #dbe4eb;
  --shadow: 0 24px 70px rgba(7, 35, 61, .13);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff; padding: 12px; }
.skip-link:focus { left: 12px; top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topbar { background: #061e36; color: #d9e7f2; font-size: .78rem; letter-spacing: .035em; }
.topbar-inner { display: flex; justify-content: space-between; gap: 20px; padding-block: 8px; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(9,44,80,.09); backdrop-filter: blur(14px); }
.nav-wrap { min-height: 78px; display: flex; align-items: center; gap: 32px; }
.brand { flex: 0 0 auto; }
.brand img { width: 176px; height: auto; }
.site-nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.site-nav a { font-size: .89rem; font-weight: 650; text-decoration: none; }
.site-nav a:hover { color: var(--blue); }
.nav-call { margin-left: 4px; padding: 12px 17px; color: #fff; background: var(--red); border-radius: 7px; font-size: .87rem; font-weight: 800; text-decoration: none; box-shadow: 0 10px 24px rgba(223,48,57,.2); }
.menu-toggle { display: none; border: 0; background: transparent; padding: 10px; margin-left: auto; }
.menu-toggle span:not(.sr-only) { display: block; width: 25px; height: 2px; background: var(--navy); margin: 5px 0; }
.van-runner { position: relative; height: 126px; overflow: hidden; border-bottom: 1px solid rgba(9,44,80,.2); background: linear-gradient(rgba(244,250,254,.08), rgba(229,241,248,.14)), url("assets/cardiff-street-backdrop.webp") center / 100% 100% no-repeat; }
.van-drive { --van-end: calc(100vw - 244px); --wheel-rotation: 5400deg; position: absolute; left: 0; bottom: 4px; width: 220px; will-change: transform; animation: smc-van-drive 6.8s cubic-bezier(.2,.72,.22,1) .2s both; }
.van-chassis { position: relative; animation: smc-van-bob .38s ease-in-out .25s 18 alternate; }
.van-body { display: block; width: 100%; filter: drop-shadow(0 8px 7px rgba(5,31,56,.2)); }
.van-wheel { position: absolute; z-index: 2; top: 62.8%; width: 14.6%; aspect-ratio: 1; border-radius: 50%; background: url("assets/smc-van-wheel-v2.webp") center / contain no-repeat; transform-origin: 50% 50%; will-change: transform; animation: smc-wheel-spin 6.8s cubic-bezier(.2,.72,.22,1) .2s both; }
.van-wheel-rear { left: 13.8%; }
.van-wheel-front { left: 76.25%; }
@keyframes smc-van-drive {
  from { transform: translateX(-230px); }
  to { transform: translateX(var(--van-end)); }
}
@keyframes smc-van-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}
@keyframes smc-wheel-spin {
  from { transform: rotate(0); }
  to { transform: rotate(var(--wheel-rotation)); }
}
.hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: linear-gradient(120deg, #061f3a 0%, var(--navy) 52%, #125887 100%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .19; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(90deg, black, transparent 78%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(1px); z-index: -1; }
.hero-glow-one { width: 480px; height: 480px; right: -150px; top: -190px; background: radial-gradient(circle, rgba(68,176,228,.4), transparent 68%); }
.hero-glow-two { width: 300px; height: 300px; left: 39%; bottom: -220px; background: rgba(223,48,57,.18); }
.hero-grid { min-height: 600px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 34px; padding-block: 70px 80px; }
.eyebrow { margin: 0 0 13px; text-transform: uppercase; letter-spacing: .15em; color: var(--blue-light); font-size: .75rem; font-weight: 850; }
.eyebrow.blue { color: var(--blue); }
.eyebrow.light { color: #a9dbf4; }
h1, h2, h3 { margin-top: 0; line-height: 1.05; letter-spacing: -.035em; }
h1 { max-width: 760px; margin-bottom: 23px; font-size: clamp(3rem, 6vw, 5.6rem); }
h1 span { color: #8cd0f2; }
.hero-title-line { display: block; opacity: 0; transform: translateY(24px); animation: hero-title-reveal .78s cubic-bezier(.2,.78,.25,1) both; }
.hero-title-main { color: #fff; animation-delay: .12s; }
.hero-title-accent { position: relative; width: fit-content; color: #8cd0f2; animation-delay: .46s; }
.hero-title-accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .055em; border-radius: 99px; background: linear-gradient(90deg, var(--red), #ff7379 54%, rgba(255,115,121,0)); transform: scaleX(0); transform-origin: left; animation: hero-title-underline .72s cubic-bezier(.2,.78,.25,1) .98s both; }
@keyframes hero-title-reveal {
  from { opacity: 0; transform: translateY(24px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes hero-title-underline {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
h2 { font-size: clamp(2.25rem, 4vw, 4rem); }
h3 { font-size: 1.45rem; }
.hero-lead { max-width: 650px; margin: 0 0 30px; color: #dbe9f4; font-size: 1.12rem; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 21px; border-radius: 8px; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-red { color: #fff; background: var(--red); box-shadow: 0 14px 30px rgba(223,48,57,.25); }
.button-ghost { color: #fff; border: 1px solid rgba(255,255,255,.45); }
.button-white { color: var(--navy); background: #fff; }
.hero-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; font-size: .88rem; }
.stars { color: #ffd166; letter-spacing: .13em; }
.hero-visual { position: relative; height: 455px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 24px; box-shadow: 0 30px 70px rgba(0,0,0,.3); }
.hero-visual::after { content: ""; position: absolute; inset: auto 0 0; z-index: 2; height: 38%; background: linear-gradient(transparent, rgba(4,24,43,.35)); pointer-events: none; }
.hero-visual img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }
.hero-stamp { position: absolute; right: 2%; top: 2%; z-index: 3; width: 116px; height: 116px; border: 2px solid rgba(255,255,255,.5); border-radius: 50%; display: grid; place-content: center; text-align: center; transform: rotate(8deg); background: rgba(5,31,56,.48); box-shadow: 0 0 0 6px rgba(255,255,255,.06); }
.hero-stamp b, .hero-stamp span { font-size: .65rem; letter-spacing: .16em; }
.hero-stamp strong { font-size: 1.65rem; line-height: 1; }
.trust-strip { position: relative; z-index: 3; color: #fff; background: linear-gradient(110deg, #082b4d, #0e5987); border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 38px rgba(6,31,56,.16); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { min-height: 112px; display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-right: 1px solid rgba(255,255,255,.15); }
.trust-item:first-child { border-left: 1px solid rgba(255,255,255,.15); }
.trust-icon { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.1); }
.trust-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trust-item:first-child .trust-icon svg { fill: #ffd166; stroke: #ffd166; }
.trust-copy { min-width: 0; }
.trust-copy strong, .trust-copy small { display: block; }
.trust-copy strong { color: #fff; font-size: .98rem; line-height: 1.2; }
.trust-copy small { margin-top: 4px; color: #c8deeb; font-size: .75rem; }
.accreditation-strip { padding-block: 58px 68px; background: #fff; border-top: 8px solid #e5edf2; border-bottom: 1px solid var(--line); }
.accreditation-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 50px; margin-bottom: 30px; }
.accreditation-heading h2 { max-width: 680px; margin-bottom: 0; color: var(--navy); font-size: clamp(2rem, 3.7vw, 3.25rem); }
.accreditation-heading > p { max-width: 460px; margin: 0 0 4px; color: var(--muted); }
.accreditation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.accreditation-badge { display: flex; min-height: 112px; align-items: center; justify-content: center; padding: 14px 18px; border: 1px solid #d2e1e8; border-radius: 14px; background: #f8fbfd; box-shadow: 0 10px 24px rgba(9,44,80,.07); }
.accreditation-badge img { display: block; max-width: 100%; max-height: 76px; width: auto; height: auto; object-fit: contain; }
.accreditation-badge:first-child img { max-height: 68px; }
.accreditation-badge:nth-child(2) img { max-height: 70px; }
.accreditation-badge:nth-child(3) img { max-height: 82px; }
.accreditation-badge:nth-child(4) img { max-height: 78px; }
.accreditation-badge strong { color: var(--navy); font-size: .98rem; }
.accreditation-badge span { color: var(--muted); font-size: .74rem; }
.section { padding-block: 105px; }
.services { position: relative; background: var(--paper); border-top: 8px solid #e5edf2; }
.services::before { content: ""; position: absolute; top: -8px; left: 50%; width: 82px; height: 8px; transform: translateX(-50%); background: var(--red); }
.split-heading { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 60px; margin-bottom: 42px; }
.split-heading h2 { max-width: 700px; margin-bottom: 0; color: var(--navy); }
.split-heading > p { max-width: 500px; margin: 0 0 8px; color: var(--muted); font-size: 1.05rem; }
.section-heading-action { max-width: 500px; margin-bottom: 8px; }
.section-heading-action p { margin: 0 0 13px; color: var(--muted); font-size: 1.05rem; }
.text-link { color: var(--blue); font-size: .88rem; font-weight: 850; text-decoration: none; }
.text-link span { margin-left: 6px; transition: margin .2s ease; }
.text-link:hover span { margin-left: 10px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.service-card { --tile-accent: #43b1e4; position: relative; min-height: 430px; display: flex; flex-direction: column; padding: 25px; overflow: hidden; color: var(--navy); border: 1px solid #d6e4ec; border-radius: 22px; background: linear-gradient(150deg, #fff 0%, #f5fafc 58%, color-mix(in srgb, var(--tile-accent) 11%, #edf6fa) 100%); box-shadow: 0 15px 45px rgba(9,44,80,.1); isolation: isolate; transition: transform .25s ease, box-shadow .25s ease; }
.service-card::before { content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; right: -95px; top: -105px; border-radius: 50%; background: color-mix(in srgb, var(--tile-accent) 12%, transparent); box-shadow: 0 0 0 28px color-mix(in srgb, var(--tile-accent) 5%, transparent); }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 22px 55px rgba(9,44,80,.2); }
.service-card.service-boiler { --tile-accent: #39a6dc; }
.service-card.service-boiler-install { --tile-accent: #65c7eb; }
.service-card.service-gas { --tile-accent: #ef5660; }
.service-card.service-plumbing { --tile-accent: #3bb6c7; }
.service-card.service-bathrooms { --tile-accent: #80caed; }
.service-card.service-cover { --tile-accent: #f4c556; }
.service-number { margin-bottom: 52px; color: var(--blue); font-size: .75rem; font-weight: 850; letter-spacing: .12em; }
.featured .service-number { color: #93d3f3; }
.service-card .service-number { margin-bottom: 0; color: var(--blue); }
.service-graphic { width: 170px; height: 155px; margin: 5px auto 4px; background-position: center; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(0 16px 16px rgba(8,52,85,.13)); }
.service-graphic svg { display: none; }
.service-card.service-boiler .service-graphic, .directory-card.service-boilers .service-graphic { background-image: url("assets/service-3d-boiler-repair.webp"); }
.service-card.service-boiler-install .service-graphic, .directory-card.service-boiler-install .service-graphic { background-image: url("assets/service-3d-boiler-install.webp"); }
.service-card.service-gas .service-graphic, .directory-card.service-gas .service-graphic { background-image: url("assets/service-3d-gas-v2.webp"); }
.service-card.service-plumbing .service-graphic, .directory-card.service-plumbing .service-graphic { background-image: url("assets/service-3d-plumbing-v2.webp"); }
.service-card.service-bathrooms .service-graphic, .directory-card.service-bathrooms .service-graphic { background-image: url("assets/service-3d-bathroom.webp"); }
.service-card.service-cover .service-graphic, .directory-card.service-cover .service-graphic { background-image: url("assets/service-3d-cover.webp"); }
.directory-card.service-heating .service-graphic { background-image: url("assets/service-3d-heating-v2.webp"); }
.directory-card.service-kitchens .service-graphic { background-image: url("assets/service-3d-kitchen.webp"); }
.service-card h3 { margin-bottom: 9px; color: var(--navy); }
.service-card p { margin: 0 0 18px; color: var(--muted); font-size: .88rem; }
.service-number { color: #a8ddf5; }
.service-card a { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 11px 12px 11px 15px; color: #fff; border-radius: 9px; background: var(--navy); font-size: .83rem; font-weight: 850; text-decoration: none; transition: background .2s ease, color .2s ease; }
.service-card a:hover { color: #fff; background: var(--red); }
.service-card a span { display: grid; width: 28px; height: 28px; place-items: center; color: #fff; border-radius: 50%; background: var(--red); font-size: 1.1rem; line-height: 1; }
.service-card a:hover span { color: var(--red); background: #fff; }
.work-showcase-section { position: relative; color: #fff; border-top: 8px solid #dbe7ee; background: radial-gradient(circle at 82% 10%, rgba(57,166,220,.22), transparent 25%), linear-gradient(135deg, #061f3a, #0b4f7b); }
.work-showcase-section::before { content: ""; position: absolute; top: -8px; left: 50%; width: 82px; height: 8px; transform: translateX(-50%); background: var(--red); }
.work-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: end; margin-bottom: 34px; }
.work-heading h2 { max-width: 720px; margin: 0; color: #fff; }
.work-heading > div:last-child { display: flex; align-items: flex-start; flex-direction: column; gap: 16px; }
.work-heading p { margin: 0; color: #dceaf4; }
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 230px; gap: 14px; }
.work-card { position: relative; grid-column: span 4; min-width: 0; padding: 0; overflow: hidden; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: #082b4d; box-shadow: 0 18px 44px rgba(0,0,0,.2); cursor: zoom-in; }
.work-card:nth-child(1), .work-card:nth-child(3) { grid-row: span 2; }
.work-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.work-card:hover img { transform: scale(1.035); }
.work-card::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(3,20,36,.88)); pointer-events: none; }
.work-card span { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; text-align: left; font-size: .83rem; font-weight: 850; }
.work-card:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.work-lightbox { width: min(920px, calc(100vw - 30px)); max-height: 92vh; padding: 0; overflow: hidden; color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; background: #061f3a; box-shadow: 0 32px 90px rgba(0,0,0,.55); }
.work-lightbox::backdrop { background: rgba(2,15,28,.82); backdrop-filter: blur(6px); }
.work-lightbox img { display: block; width: 100%; max-height: 80vh; object-fit: contain; background: #031526; }
.work-lightbox p { margin: 0; padding: 14px 20px 18px; color: #fff; font-weight: 800; }
.work-lightbox-close { position: absolute; z-index: 3; top: 12px; right: 12px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(5,31,56,.82); font-size: 1.65rem; line-height: 1; cursor: pointer; }
.cover-card { border-color: rgba(255,255,255,.18); }
.installation-hero-image img { object-position: 50% 34%; }
.installation-showcase { padding-block: 105px; color: #fff; border-top: 8px solid #dbe7ee; background: linear-gradient(135deg, #061f3a, #0d527e); }
.installation-showcase-heading { display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: 65px; margin-bottom: 34px; }
.installation-showcase-heading h2 { margin: 0; color: #fff; }
.installation-showcase-heading > p { margin: 0; color: #dceaf4; }
.installation-gallery { display: grid; grid-template-columns: 1.25fr .75fr; grid-auto-rows: 520px; gap: 16px; }
.installation-gallery figure { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 22px; background: #082b4d; box-shadow: 0 20px 45px rgba(0,0,0,.22); }
.installation-gallery img { width: 100%; height: 100%; object-fit: cover; }
.installation-gallery figcaption { position: absolute; right: 14px; bottom: 14px; left: 14px; padding: 12px 15px; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(3,25,45,.86); font-size: .82rem; font-weight: 850; }
.installation-accreditations { background: #f2f8fb; }
.installation-accreditation-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 72px; }
.installation-accreditation-grid h2 { color: var(--navy); }
.installation-logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.installation-logo-grid div { min-height: 190px; display: grid; place-items: center; padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 16px 38px rgba(9,44,80,.08); }
.installation-logo-grid img { width: auto; max-width: 92%; height: 82px; object-fit: contain; }
.diagnostic-edge { padding-block: 96px; border-top: 1px solid #d6e4ec; background: linear-gradient(135deg, #edf7fb, #f8fbfd); }
.diagnostic-edge-grid { display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: 68px; }
.diagnostic-edge-copy h2 { color: var(--navy); }
.diagnostic-edge-copy p:last-child { margin-bottom: 0; color: #405462; }
.diagnostic-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.diagnostic-cards article { min-height: 260px; padding: 24px 21px; border: 1px solid #d2e3eb; border-radius: 17px; background: #fff; box-shadow: 0 14px 34px rgba(9,44,80,.08); }
.diagnostic-cards article > span { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 30px; color: #fff; border-radius: 50%; background: var(--blue); font-size: .72rem; font-weight: 900; }
.diagnostic-cards h3 { margin-bottom: 10px; color: var(--navy); font-size: 1.08rem; }
.diagnostic-cards p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.fix-first { padding-block: 105px; color: #fff; background: #082b4c; overflow: hidden; }
.fix-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 80px; }
.fix-copy h2 { max-width: 660px; margin-bottom: 25px; }
.fix-copy > p:not(.eyebrow) { max-width: 630px; color: #d9e6f0; font-size: 1.05rem; }
.check-list { list-style: none; padding: 0; margin: 27px 0 34px; }
.check-list li { position: relative; padding: 8px 0 8px 30px; color: #edf6fb; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: #85d0f4; font-weight: 900; }
.fix-panel { position: relative; min-height: 470px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 30px; background: linear-gradient(145deg, #2b9dd5, #0c4e7e); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), var(--shadow); }
.fix-panel::before, .fix-panel::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); }
.fix-panel::before { width: 360px; height: 360px; }
.fix-panel::after { width: 430px; height: 430px; }
.dial { position: relative; z-index: 2; width: 190px; height: 190px; border: 18px solid rgba(255,255,255,.17); border-top-color: #fff; border-right-color: var(--red); border-radius: 50%; display: grid; place-items: center; transform: rotate(-30deg); }
.dial-inner { transform: rotate(30deg); text-align: center; }
.dial strong { display: block; font-size: 2.7rem; line-height: .9; }
.dial span { letter-spacing: .25em; font-size: .82rem; }
.fix-panel blockquote { position: relative; z-index: 2; max-width: 360px; margin: 35px 25px 0; text-align: center; color: #eef8fd; font-size: .97rem; font-weight: 700; }
.reviews { background: #fff; }
.review-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.review-heading h2 { max-width: 720px; margin-bottom: 0; color: var(--navy); }
.rating-block { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.rating-block span { color: #ffb300; letter-spacing: .11em; }
.rating-block strong { font-size: .82rem; color: var(--muted); }
.google-reviews-block { padding: 28px; border: 1px solid #d6e5ed; border-top: 6px solid #4285f4; border-radius: 20px; background: #f6fafc; box-shadow: 0 18px 48px rgba(9,44,80,.09); }
.google-review-summary { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 36px; margin-bottom: 30px; padding: 23px 26px; overflow: hidden; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 15px 45px rgba(9,44,80,.08); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.google-review-summary::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(#4285f4 0 25%, #ea4335 25% 50%, #fbbc05 50% 75%, #34a853 75%); }
.google-review-summary:hover { transform: translateY(-2px); box-shadow: 0 20px 55px rgba(9,44,80,.13); }
.google-review-brand { display: flex; align-items: center; gap: 14px; }
.google-g { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; color: #4285f4; border: 1px solid #dfe6eb; border-radius: 50%; background: #fff; font-size: 1.65rem; font-weight: 850; }
.google-review-brand strong, .google-review-brand small, .google-review-rating strong, .google-review-rating small { display: block; }
.google-review-brand strong { color: var(--navy); font-size: 1rem; }
.google-review-brand small, .google-review-rating small { color: var(--muted); font-size: .76rem; }
.google-review-rating { min-width: 190px; text-align: center; }
.google-review-rating strong { color: var(--navy); font-size: 1.35rem; line-height: 1; }
.google-review-rating span { display: block; margin: 4px 0 2px; color: #fbbc05; letter-spacing: .12em; }
.google-review-summary > b { color: var(--blue); font-size: .88rem; white-space: nowrap; }
.review-platform { padding-top: 4px; }
.platform-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 0 0 20px; }
.platform-heading h3 { margin: 0; color: var(--navy); font-size: 1.55rem; }
.platform-heading .eyebrow { margin-bottom: 7px; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review-carousel { display: flex; overflow-x: auto; gap: 18px; padding: 0 2px 18px; scroll-snap-type: x mandatory; scrollbar-color: #9cc9df transparent; }
.review-carousel .review-card { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; }
.review-card { position: relative; margin: 0; padding: 33px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.quote-mark { display: block; height: 36px; color: var(--blue); font: 700 3.6rem/1 Georgia, serif; }
.review-card p { color: #314250; font-size: .96rem; }
.review-card footer { margin-top: 25px; color: var(--navy); font-size: .8rem; font-weight: 850; }
.review-links { display: flex; justify-content: space-between; gap: 20px; margin-top: 24px; color: var(--muted); font-size: .84rem; }
.review-links a { color: var(--blue); font-weight: 800; }
.mybuilder-review-panel { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 34px; margin-top: 72px; padding: 34px 36px; overflow: hidden; color: #fff; border: 1px solid #174f79; border-top: 6px solid var(--red); border-radius: 20px; background: linear-gradient(115deg, #071f38, #0d4c78); box-shadow: 0 18px 48px rgba(7,31,56,.18); }
.mybuilder-review-panel::before { content: ""; position: absolute; width: 260px; height: 260px; right: -110px; bottom: -180px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.mybuilder-review-panel h3 { margin: 0 0 7px; color: #fff; font-size: 1.55rem; }
.mybuilder-review-panel p:not(.eyebrow) { max-width: 680px; margin: 0; color: #d1e4ef; font-size: .92rem; }
.mybuilder-review-panel .eyebrow { margin: 10px 0 8px; }
.mybuilder-wordmark { display: inline-flex; padding: 7px 12px; color: var(--navy); border-radius: 7px; background: #fff; font-size: 1rem; font-weight: 900; letter-spacing: -.02em; }
.mybuilder-review-panel .button { position: relative; z-index: 1; }
.about { background: var(--paper); }
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 75px; align-items: center; }
.about-journey { display: grid; gap: 14px; }
.about-journey figure { position: relative; height: 255px; margin: 0; overflow: hidden; border-radius: 20px; background: #dcebf4; box-shadow: 0 18px 45px rgba(9,44,80,.13); }
.about-journey img { width: 100%; height: 100%; object-fit: cover; }
.about-journey figcaption { position: absolute; inset: auto 16px 16px; display: inline-flex; align-items: center; gap: 9px; width: fit-content; padding: 9px 12px; color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; background: rgba(5,30,54,.88); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.about-journey figcaption strong { font-size: .85rem; }
.about-journey figcaption span { color: #dceaf4; font-size: .75rem; }
.about-copy h2 { margin-bottom: 25px; color: var(--navy); }
.about-copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.02rem; }
.about-copy .about-closing { padding-left: 18px; color: var(--navy); border-left: 3px solid var(--red); font-weight: 750; }
.about-link-button { margin-top: 8px; color: #fff; background: var(--blue); box-shadow: 0 14px 30px rgba(36,148,203,.2); }
.about-link-button span { margin-left: 12px; }

/* About page */
.about-page-hero { overflow: hidden; padding: 90px 0 72px; color: #fff; background: radial-gradient(circle at 82% 20%, rgba(41,154,214,.28), transparent 32%), linear-gradient(135deg, #071f38, #0b4f7b); }
.about-page-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px; align-items: center; }
.about-page-hero h1 { max-width: 760px; margin: 10px 0 24px; font-size: clamp(2.8rem, 5.2vw, 5.2rem); line-height: .98; letter-spacing: -.055em; }
.about-page-hero h1 span { color: #79c9ef; }
.about-page-hero p:not(.eyebrow) { max-width: 650px; color: #d9e9f3; font-size: 1.08rem; }
.about-hero-vans { position: relative; min-height: 390px; display: flex; align-items: center; padding: 34px; border: 1px solid rgba(255,255,255,.18); border-radius: 28px; background: linear-gradient(155deg, rgba(255,255,255,.11), rgba(255,255,255,.035)); box-shadow: 0 30px 70px rgba(0,0,0,.22); }
.about-hero-vans img { position: relative; z-index: 1; width: 112%; max-width: none; margin-left: -6%; filter: drop-shadow(0 22px 18px rgba(0,0,0,.32)); }
.about-hero-vans.photo-vans { min-height: 0; aspect-ratio: 4 / 3; padding: 0; }
.about-hero-vans.photo-vans img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; margin: 0; object-fit: cover; object-position: center; filter: none; }
.about-hero-vans > span { position: absolute; z-index: 2; right: 20px; bottom: 20px; padding: 10px 13px; border-radius: 8px; background: var(--red); font-size: .78rem; font-weight: 850; }
.about-page-story { background: #fff; }
.about-story-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: start; }
.about-story-grid h2 { color: var(--navy); }
.about-story-copy { display: grid; gap: 18px; }
.about-story-copy p { margin: 0; color: var(--muted); font-size: 1.05rem; }
.about-timeline { background: var(--paper); border-block: 1px solid var(--line); }
.about-timeline-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.about-timeline-grid figure { position: relative; height: 430px; margin: 0; overflow: hidden; border-radius: 24px; background: #dcebf4; box-shadow: 0 20px 48px rgba(9,44,80,.13); }
.about-timeline-grid img { width: 100%; height: 100%; object-fit: cover; }
.about-timeline-grid figcaption { position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 11px 14px; color: #fff; border-radius: 9px; background: rgba(5,30,54,.9); }
.about-timeline-grid figcaption strong { font-size: 1rem; }
.about-timeline-grid figcaption span { color: #dceaf4; font-size: .82rem; }
.awards-showcase { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 15% 15%, rgba(41,154,214,.26), transparent 33%), linear-gradient(135deg, #071f38, #0b4f7b); }
.awards-showcase::after { content: ""; position: absolute; right: -110px; top: -110px; width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.025), 0 0 0 110px rgba(255,255,255,.018); }
.awards-showcase-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; align-items: center; }
.awards-photo { position: relative; aspect-ratio: 591 / 800; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 26px; background: #0b365b; box-shadow: 0 28px 65px rgba(0,0,0,.24); }
.awards-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.awards-photo > span { position: absolute; left: 18px; top: 18px; padding: 9px 12px; border-radius: 8px; background: var(--red); box-shadow: 0 8px 22px rgba(0,0,0,.22); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.awards-copy h2 { max-width: 720px; margin-bottom: 18px; }
.awards-copy > p:not(.eyebrow) { max-width: 700px; color: #dceaf4; }
.awards-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 30px; }
.awards-list article { min-height: 145px; padding: 20px; border: 1px solid rgba(255,255,255,.15); border-radius: 15px; background: rgba(255,255,255,.07); backdrop-filter: blur(4px); }
.awards-list span, .awards-list strong { display: block; }
.awards-list span { margin-bottom: 12px; color: #79c9ef; font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.awards-list strong { color: #fff; font-size: .95rem; line-height: 1.4; }
.about-values { background: #fff; }
.about-team { border-block: 1px solid var(--line); background: linear-gradient(180deg, #f7fbfd 0%, #eef6fa 100%); }
.about-team .section-heading { max-width: 760px; }
.about-team .section-heading > p:last-child { margin: 0; color: var(--muted); font-size: 1.05rem; }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.team-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d3e2e9; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px rgba(9,44,80,.09); }
.team-photo { height: 300px; background: #dbe8ee; }
.team-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.team-copy { display: flex; flex-direction: column; justify-content: center; padding: 28px; }
.team-role { margin: 0 0 9px; color: var(--blue); font-size: .73rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.team-copy h3 { margin: 0 0 14px; color: var(--navy); font-size: 1.9rem; }
.team-copy > p:last-child { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.about-values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.about-values-grid article { padding: 30px; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 18px; background: #fff; box-shadow: 0 16px 38px rgba(9,44,80,.07); }
.about-values-grid article > span { display: inline-grid; width: 42px; height: 42px; place-items: center; margin-bottom: 28px; color: #fff; border-radius: 50%; background: var(--navy); font-size: .75rem; font-weight: 900; }
.about-values-grid h3 { margin-bottom: 12px; color: var(--navy); }
.about-values-grid p { margin: 0; color: var(--muted); }
.about-local { color: #fff; background: linear-gradient(135deg, #072540, #0b527e); }
.about-local-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.about-local h2 { margin-bottom: 20px; }
.about-local p:not(.eyebrow) { color: #dceaf4; }
.about-local-points { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.about-local-points p { margin: 0; padding: 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: rgba(255,255,255,.07); }
.about-local-points b, .about-local-points span { display: block; }
.about-local-points b { margin-bottom: 5px; color: #fff; }
.about-local-points span { color: #cfe2ee; font-size: .82rem; }
.about-credentials { background: #f4f8fb; border-bottom: 1px solid var(--line); }
.credential-logo-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.credential-logo-grid > div { min-height: 150px; display: grid; place-items: center; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 14px 34px rgba(9,44,80,.07); }
.credential-logo-grid img { max-width: 100%; max-height: 96px; object-fit: contain; }
.faq { background: #fff; }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 75px; align-items: start; }
.faq-grid h2 { margin-bottom: 20px; color: var(--navy); }
.faq-intro { max-width: 410px; color: var(--muted); font-size: 1.02rem; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 0; color: var(--navy); font-size: 1rem; font-weight: 800; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--red); font-size: 1.4rem; font-weight: 500; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 640px; margin: -4px 38px 21px 0; color: var(--muted); font-size: .94rem; }
.credential-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 32px; }
.credential-row div { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.credential-row strong, .credential-row span { display: block; }
.credential-row strong { color: var(--navy); font-size: .88rem; }
.credential-row span { color: var(--muted); font-size: .72rem; }
.contact { padding-block: 92px; color: #fff; background: linear-gradient(110deg, #0b365f, #126898); }
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: center; }
.contact h2 { margin-bottom: 17px; }
.contact p:not(.eyebrow) { max-width: 560px; color: #dceaf3; }
.service-area-note { margin-top: 22px; padding-left: 15px; border-left: 3px solid var(--red); }
.service-area-note strong { color: #fff; }
.urgent-callout { margin-top: 22px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.24); border-radius: 12px; background: rgba(5,24,43,.2); }
.urgent-callout strong { color: #fff; }
.urgent-callout a { color: #fff; font-weight: 850; }
.contact-actions { display: grid; gap: 12px; }
.booking-form { padding: 25px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 18px 45px rgba(3,24,44,.16); }
.booking-heading { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid #dfebf1; }
.booking-heading span { color: #1479a9; font-size: .72rem; font-weight: 850; letter-spacing: .13em; }
.booking-heading h3 { margin: 7px 0 5px; color: var(--navy); font-size: 1.55rem; line-height: 1.15; }
.booking-heading p { margin: 0; color: #53697a !important; font-size: .88rem; line-height: 1.5; }
.booking-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.booking-form label { display: grid; gap: 6px; color: var(--navy); font-size: .78rem; font-weight: 800; }
.booking-form input, .booking-form select, .booking-form textarea { width: 100%; padding: 11px 12px; border: 1px solid #cbd9e2; border-radius: 8px; color: var(--ink); background: #f9fbfc; font: inherit; }
.booking-form textarea { resize: vertical; }
.booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus { outline: 3px solid rgba(35,143,202,.22); border-color: var(--blue); }
.booking-message { grid-column: 1 / -1; }
.booking-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 17px; }
.booking-actions .button { min-height: 46px; border: 0; cursor: pointer; }
.booking-actions .button-white { color: var(--navy); border: 1px solid #cbd9e2; }
.booking-note { margin: 12px 0 0; color: var(--muted); font-size: .76rem; }
.contact-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(255,255,255,.08); text-decoration: none; transition: background .2s ease, transform .2s ease; }
.contact-card:hover { transform: translateX(3px); background: rgba(255,255,255,.13); }
.contact-card span { color: #c7e1f0; font-size: .77rem; text-transform: uppercase; letter-spacing: .11em; }
.contact-card strong { text-align: right; }
.footer { padding-block: 65px 25px; color: #c9d8e5; background: #061c31; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 80px; }
.footer-brand img { display: block; width: 190px; height: auto; padding: 9px 11px; border: 1px solid rgba(255,255,255,.9); border-radius: 8px; background: #fff; box-sizing: border-box; }
.footer-brand p { max-width: 340px; font-size: .88rem; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 8px; }
.footer-grid strong { margin-bottom: 6px; color: #fff; }
.footer-grid a, .footer-grid span { color: #aebfcd; font-size: .84rem; text-decoration: none; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 52px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: .74rem; }
.legal-page { background: #f5f8fa; }
.legal-copy { max-width: 820px; }
.legal-copy h2 { margin: 34px 0 10px; color: var(--navy); font-size: 1.5rem; }
.legal-copy h2:first-child { margin-top: 0; }
.legal-copy p { max-width: 760px; }
.legal-copy a { color: var(--blue); font-weight: 750; }
.legal-updated { margin-top: 42px; color: var(--muted); font-size: .82rem; }

/* Service pages */
.service-hero { overflow: hidden; color: #fff; background: linear-gradient(120deg, #061f3a, #0d4777); }
.service-hero-grid { min-height: 510px; display: grid; grid-template-columns: 1fr .82fr; align-items: center; gap: 70px; padding-block: 64px; }
.service-hero-copy h1, .service-index-intro h1, .cover-hero h1 { margin-bottom: 22px; font-size: clamp(3.2rem, 7vw, 6.2rem); }
.service-hero-copy > p:not(.eyebrow), .service-index-intro > p:not(.eyebrow), .cover-hero-grid > div:first-child > p:not(.eyebrow) { max-width: 650px; color: #dceaf4; font-size: 1.08rem; }
.service-hero-image { height: 390px; overflow: hidden; border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,.28); }
.service-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.kitchen-hero .service-hero-grid { grid-template-columns: 1fr 1.1fr; gap: 40px; }
.kitchen-hero .service-hero-copy h1 { font-size: clamp(2.8rem, 4.7vw, 4.8rem); }
.kitchen-hero .service-hero-image { height: auto; aspect-ratio: 4 / 3; }
.kitchen-hero .service-hero-image img { display: block; object-position: center; }
@media (max-width: 980px) { .kitchen-hero .service-hero-grid { grid-template-columns: 1fr; } }
.gas-range-hero img { object-position: center 43%; }
.mini-trust { border-bottom: 1px solid var(--line); background: #fff; }
.mini-trust .shell { min-height: 76px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; }
.mini-trust span { padding: 8px 18px; color: var(--navy); border-right: 1px solid var(--line); text-align: center; font-size: .82rem; font-weight: 800; }
.mini-trust span:first-child { border-left: 1px solid var(--line); }
.detail-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 80px; align-items: start; }
.detail-grid h2 { color: var(--navy); }
.detail-lead { max-width: 620px; color: var(--muted); font-size: 1.05rem; }
.bathroom-service-copy > p { color: var(--muted); }
.workmanship-guarantee { margin-top: 25px; padding: 20px 21px; border-left: 4px solid var(--red); border-radius: 0 12px 12px 0; background: #eef6fa; }
.workmanship-guarantee strong { display: block; margin-bottom: 5px; color: var(--navy); font-size: 1rem; }
.workmanship-guarantee p { margin: 0; color: #425565; font-size: .92rem; }
.service-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.service-list li { position: relative; min-height: 75px; display: flex; align-items: center; padding: 16px 16px 16px 46px; color: var(--navy); border: 1px solid var(--line); border-radius: 11px; background: var(--paper); font-size: .9rem; font-weight: 750; }
.service-list li::before { content: "✓"; position: absolute; left: 18px; color: var(--blue); }
.bathroom-hero-image img { object-position: 50% 44%; }
.bathroom-experience { position: relative; padding-block: 88px; overflow: hidden; color: #fff; background: linear-gradient(125deg, #061f3a 0%, #093b66 58%, #0a5684 100%); }
.bathroom-experience::before { content: ""; position: absolute; width: 440px; height: 440px; right: -170px; bottom: -260px; border-radius: 50%; background: rgba(62,177,224,.16); filter: blur(3px); }
.bathroom-experience-grid { position: relative; display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: 62px; }
.bathroom-experience-copy h2 { margin-bottom: 20px; font-size: clamp(2.3rem, 4vw, 4rem); }
.bathroom-experience-copy > p:not(.eyebrow) { margin: 0; color: #dceaf4; font-size: 1.04rem; }
.bathroom-experience-film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 24px; background: #082b4b; box-shadow: 0 30px 65px rgba(0,0,0,.34); }
.bathroom-experience-film::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 58%, rgba(4,24,43,.55)); }
.bathroom-experience-film video { width: 100%; height: 100%; display: block; object-fit: cover; }
.bathroom-experience-badge { position: absolute; z-index: 1; left: 22px; bottom: 20px; padding: 9px 13px; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(5,32,56,.68); backdrop-filter: blur(8px); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.bathroom-project-feature { padding: 88px 0 78px; color: #fff; background: linear-gradient(135deg, rgba(5,30,55,.94), rgba(6,56,82,.88)), url('assets/calypso-bathroom-0456.jpeg') center 44% / cover no-repeat; }
.calypso-heading { display: grid; grid-template-columns: 1fr .78fr; align-items: end; gap: 52px; margin-bottom: 30px; }
.calypso-heading h2 { margin: 0; font-size: clamp(2.6rem, 4.4vw, 4.7rem); line-height: 1.04; }
.calypso-heading > p { max-width: 550px; margin: 0 0 5px; color: #dcebf3; font-size: 1.05rem; }
.calypso-showcase { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); gap: 16px; height: clamp(450px, 50vw, 660px); }
.calypso-main-photo, .calypso-video-card { position: relative; min-width: 0; height: 100%; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 19px; background: #08263f; }
.calypso-main-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 46%; }
.calypso-main-photo::after { content: ''; position: absolute; inset: 55% 0 0; pointer-events: none; background: linear-gradient(transparent, rgba(2,18,33,.7)); }
.calypso-main-photo figcaption { position: absolute; z-index: 1; bottom: 20px; left: 22px; font-size: .9rem; font-weight: 700; }
.calypso-video-card { display: flex; align-items: center; justify-content: center; }
.calypso-video-card video { width: 100%; height: 100%; display: block; object-fit: contain; }
.calypso-video-card > span { position: absolute; left: 13px; bottom: 54px; padding: 7px 11px; border-radius: 8px; color: #fff; background: rgba(3,25,44,.76); pointer-events: none; font-size: .78rem; font-weight: 750; }
.calypso-photo-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 28px 0 14px; }
.calypso-photo-header p { margin: 0; font-size: 1.17rem; font-weight: 800; }
.calypso-photo-rail { display: flex; gap: 12px; overflow-x: auto; padding: 0 0 12px; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-color: rgba(255,255,255,.5) transparent; }
.calypso-photo-rail figure { flex: 0 0 clamp(154px, 17vw, 226px); aspect-ratio: 4 / 5; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; scroll-snap-align: start; }
.calypso-photo-rail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bathroom-project-feature .gallery-button { border-color: rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.1); }
.bathroom-project-feature .gallery-button:hover { color: var(--navy); background: #fff; }
.bathroom-before-after { padding: 94px 0; border-block: 1px solid #b8d5e5; background: linear-gradient(135deg, #ecf6fb, #dceef7); }
.before-after-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(42px, 8vw, 110px); align-items: center; }
.before-after-copy h2 { max-width: 520px; margin: 0 0 22px; color: var(--navy); font-size: clamp(2.4rem, 4.2vw, 4.4rem); line-height: 1.07; }
.before-after-copy > p:not(.eyebrow) { max-width: 490px; color: var(--muted); font-size: 1.1rem; }
.before-after-hint { display: inline-block; margin-top: 22px; padding: 12px 18px; border: 1px solid #b5d1e0; border-radius: 999px; color: #174567; background: #fff; font-weight: 750; font-size: .9rem; box-shadow: 0 7px 18px rgba(13,68,105,.07); }
.comparison-stage { position: relative; width: min(100%, 540px); aspect-ratio: 3 / 4; margin-inline: auto; overflow: hidden; border: 6px solid #fff; border-radius: 23px; background: #d6e4ec; box-shadow: 0 27px 60px rgba(6,43,72,.2); }
.comparison-stage > img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparison-after { clip-path: inset(0 calc(100% - var(--reveal)) 0 0); }
.comparison-label { position: absolute; z-index: 2; top: 18px; padding: 8px 13px; border-radius: 999px; color: #fff; background: rgba(6,33,58,.77); font-size: .77rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.comparison-label-after { left: 18px; }
.comparison-label-before { right: 18px; }
.comparison-divider { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--reveal); width: 3px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.3); pointer-events: none; }
.comparison-divider > span { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 52px; height: 52px; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 50%; color: var(--navy); background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.25); font-size: 1.35rem; font-weight: 800; }
.comparison-stage input[type="range"] { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.comparison-stage:focus-within { outline: 3px solid #238fca; outline-offset: 4px; }
.kitchen-project-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 52px; padding-top: 40px; border-top: 1px solid #b8d5e5; }
.kitchen-project-gallery figure { margin: 0; overflow: hidden; border-radius: 16px; background: #fff; }
.kitchen-project-gallery a { display: block; }
.kitchen-project-gallery img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.kitchen-project-gallery figure:first-child img, .kitchen-project-gallery figure:last-child img { object-fit: contain; background: #102d42; }
.kitchen-project-gallery figcaption { padding: 18px; color: var(--navy); font-size: 1rem; font-weight: 700; }
@media (max-width: 760px) { .kitchen-project-gallery { grid-template-columns: 1fr; gap: 24px; } .kitchen-project-gallery img { aspect-ratio: auto; height: auto; } }
.bathroom-teal-feature { padding: 96px 0 90px; border-top: 8px solid #fff; color: #fff; background: linear-gradient(140deg, rgba(3,30,46,.94), rgba(5,58,69,.88)), url('assets/teal-bathroom-after.jpeg') center 45% / cover no-repeat; }
.teal-feature-heading { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 65px; margin-bottom: 38px; }
.teal-feature-heading h2 { max-width: 650px; margin: 0; font-size: clamp(2.5rem, 4.4vw, 4.7rem); line-height: 1.06; }
.teal-feature-heading > p { max-width: 520px; margin: 0 0 5px; color: #dcecf0; font-size: 1.05rem; }
.teal-feature-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .55fr); align-items: center; gap: 55px; }
.teal-feature-main .comparison-stage { width: min(100%, 560px); margin: 0; }
.teal-feature-note { display: grid; gap: 14px; padding: 26px 0 26px 24px; border-left: 3px solid #83d9da; }
.teal-feature-note strong { font-size: clamp(1.5rem, 2.8vw, 2.7rem); line-height: 1.12; }
.teal-feature-note span { max-width: 310px; color: #d7e9ed; }
.teal-detail-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 50px 0 20px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.25); }
.teal-detail-heading h3 { margin: 0; font-size: 1.4rem; }
.teal-detail-heading span { color: #c8e4e9; font-size: .9rem; }
.teal-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.teal-detail-grid figure { aspect-ratio: 3 / 4; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: #083044; }
.teal-detail-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bathroom-stone-feature { padding: 95px 0 88px; border-top: 8px solid #fff; border-bottom: 1px solid #cad8dd; background: linear-gradient(120deg, rgba(246,246,242,.96), rgba(234,240,239,.93)), url('assets/stone-bathroom-overview.jpeg') center / cover no-repeat; }
.stone-feature-heading { max-width: 850px; margin-bottom: 35px; }
.stone-feature-heading h2 { margin: 0 0 20px; color: var(--navy); font-size: clamp(2.6rem, 4.6vw, 4.8rem); line-height: 1.05; }
.stone-feature-heading > p:last-child { max-width: 700px; margin: 0; color: var(--muted); font-size: 1.08rem; }
.stone-feature-showcase { display: grid; grid-template-columns: 1.18fr .82fr; gap: 17px; height: clamp(450px, 53vw, 650px); }
.stone-feature-showcase figure { position: relative; min-width: 0; height: 100%; margin: 0; overflow: hidden; border: 5px solid #fff; border-radius: 20px; background: #d5dcda; box-shadow: 0 19px 40px rgba(15,48,63,.14); }
.stone-feature-showcase figure::after { content: ''; position: absolute; inset: 65% 0 0; background: linear-gradient(transparent, rgba(4,21,31,.7)); pointer-events: none; }
.stone-feature-showcase img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stone-feature-main-photo img { object-position: center 57%; }
.stone-feature-shower-photo img { object-position: center 45%; }
.stone-feature-showcase figcaption { position: absolute; z-index: 1; left: 20px; bottom: 18px; color: #fff; font-weight: 800; font-size: .95rem; }
.stone-feature-detail-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; margin: 44px 0 16px; padding-top: 24px; border-top: 1px solid #b8cbd0; }
.stone-feature-detail-heading h3 { margin: 0; color: var(--navy); font-size: 1.4rem; }
.stone-feature-detail-heading span { color: var(--muted); font-size: .9rem; }
.stone-feature-rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 17px; scroll-snap-type: x mandatory; scrollbar-color: #9eb7b8 transparent; }
.stone-feature-rail figure { flex: 0 0 clamp(170px, 18vw, 235px); aspect-ratio: 4 / 5; margin: 0; overflow: hidden; border: 3px solid #fff; border-radius: 13px; background: #d5dcda; box-shadow: 0 8px 22px rgba(15,48,63,.1); scroll-snap-align: start; }
.stone-feature-rail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bathroom-gallery-section { padding-top: 0; background: var(--paper); }
.bathroom-stone-feature + .bathroom-gallery-section { padding-top: 82px; border-top: 1px solid #fff; }
.gallery-heading { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 60px; margin-bottom: 36px; }
.gallery-heading h2 { max-width: 700px; margin-bottom: 0; color: var(--navy); }
.gallery-intro > p { max-width: 500px; margin: 0 0 18px; color: var(--muted); font-size: 1.02rem; }
.gallery-controls { display: flex; gap: 9px; }
.gallery-button { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #bfcfda; border-radius: 50%; color: var(--navy); background: #fff; font: inherit; font-size: 1.2rem; font-weight: 800; line-height: 1; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }
.gallery-button:hover { color: #fff; background: var(--navy); transform: translateY(-2px); }
.gallery-button:focus-visible { outline: 3px solid rgba(35,143,202,.32); outline-offset: 3px; }
.bathroom-gallery { display: flex; gap: 14px; overflow-x: auto; padding: 0 0 20px; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: #9eb7c8 transparent; }
.bathroom-gallery figure { flex: 0 0 calc((100% - 28px) / 3); aspect-ratio: 3 / 4; margin: 0; overflow: hidden; border-radius: 14px; background: #dbe4eb; box-shadow: 0 14px 35px rgba(9,44,80,.09); scroll-snap-align: start; }
.bathroom-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.bathroom-gallery figure:hover img { transform: scale(1.025); }
.why-panel { padding-block: 86px; color: #fff; background: linear-gradient(120deg, var(--navy), #0d598b); }
.why-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start; }
.why-grid h2 { margin: 0; }
.why-grid p:not(.eyebrow) { margin-top: 0; color: #dceaf4; font-size: 1.04rem; }
.related-services { border-block: 1px solid #d8e5ed; background: linear-gradient(180deg, #f8fbfd 0%, #eef6fa 100%); }
.related-services h2 { margin-bottom: 28px; color: var(--navy); }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.related-card { --related-accent: #48b2df; position: relative; min-height: 132px; display: grid; grid-template-columns: 92px minmax(0,1fr) 38px; align-items: center; gap: 14px; padding: 14px; overflow: hidden; color: var(--navy); border: 1px solid #ccdde7; border-radius: 18px; background: linear-gradient(112deg, #fff 0 72%, color-mix(in srgb, var(--related-accent) 12%, #edf6fa) 72% 100%); box-shadow: 0 12px 30px rgba(9,44,80,.08); text-decoration: none; isolation: isolate; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.related-card::before { content: ""; position: absolute; z-index: -1; width: 120px; height: 120px; right: -72px; top: -75px; border-radius: 50%; background: color-mix(in srgb, var(--related-accent) 15%, transparent); box-shadow: 0 0 0 22px color-mix(in srgb, var(--related-accent) 6%, transparent); }
.related-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--related-accent) 60%, #c4d7e2); box-shadow: 0 18px 38px rgba(9,44,80,.14); }
.related-card-visual { width: 92px; height: 92px; border: 1px solid color-mix(in srgb, var(--related-accent) 22%, #d8e7ee); border-radius: 15px; background-color: color-mix(in srgb, var(--related-accent) 10%, #f1f8fb); background-position: center; background-repeat: no-repeat; background-size: contain; box-shadow: inset -7px -7px 16px rgba(37,118,160,.08), inset 7px 7px 16px rgba(255,255,255,.75); }
.related-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.related-card-copy strong { color: var(--navy); font-size: .94rem; font-weight: 850; line-height: 1.15; }
.related-card-copy small { color: var(--muted); font-size: .73rem; font-weight: 650; line-height: 1.35; }
.related-card-arrow { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--navy); font-size: 1.05rem; font-weight: 850; line-height: 1; transition: transform .22s ease, background .22s ease; }
.related-card:hover .related-card-arrow { transform: translateX(3px); background: var(--red); }
.related-card.service-boiler-install { --related-accent: #65c7eb; }
.related-card.service-boilers { --related-accent: #3fa7db; }
.related-card.service-heating { --related-accent: #ed6570; }
.related-card.service-gas { --related-accent: #f0a64e; }
.related-card.service-plumbing { --related-accent: #36b6c4; }
.related-card.service-bathrooms { --related-accent: #81caed; }
.related-card.service-kitchens { --related-accent: #5fbdb3; }
.related-card.service-cover { --related-accent: #f3c556; }
.related-card.service-heatpumps { --related-accent: #35b98b; }
.related-card.service-boiler-install .related-card-visual { background-image: url("assets/service-3d-boiler-install.webp"); }
.related-card.service-boilers .related-card-visual { background-image: url("assets/service-3d-boiler-repair.webp"); }
.related-card.service-heating .related-card-visual { background-image: url("assets/service-3d-heating-v2.webp"); }
.related-card.service-gas .related-card-visual { background-image: url("assets/service-3d-gas-v2.webp"); }
.related-card.service-plumbing .related-card-visual { background-image: url("assets/service-3d-plumbing-v2.webp"); }
.related-card.service-bathrooms .related-card-visual { background-image: url("assets/service-3d-bathroom.webp"); }
.related-card.service-kitchens .related-card-visual { background-image: url("assets/service-3d-kitchen.webp"); }
.related-card.service-cover .related-card-visual { background-image: url("assets/service-3d-cover.webp"); }
.related-card.service-heatpumps .related-card-visual { background-color: #eef8f7; background-image: url("assets/service-3d-heatpump.webp"); background-size: contain; }
.compact-contact { padding-block: 75px; }
.service-index-hero { min-height: 410px; display: grid; align-items: center; }
.service-index-intro { padding-block: 65px; }
.service-index-intro > p:not(.eyebrow) { max-width: 720px; }
.directory-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.directory-card { --tile-accent: #48b2df; position: relative; min-height: 440px; display: flex; flex-direction: column; padding: 27px; overflow: hidden; color: var(--navy); border: 1px solid #d6e4ec; border-radius: 22px; background: linear-gradient(150deg, #fff 0%, #f5fafc 58%, color-mix(in srgb, var(--tile-accent) 11%, #edf6fa) 100%); box-shadow: 0 18px 45px rgba(9,44,80,.11); text-decoration: none; isolation: isolate; transition: transform .22s ease, box-shadow .22s ease; }
.directory-card::before { content: ""; position: absolute; z-index: -1; width: 245px; height: 245px; right: -110px; top: -115px; border-radius: 50%; background: color-mix(in srgb, var(--tile-accent) 12%, transparent); box-shadow: 0 0 0 31px color-mix(in srgb, var(--tile-accent) 5%, transparent); }
.directory-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(9,44,80,.23); }
.directory-card > span { color: var(--blue); font-size: .76rem; font-weight: 850; letter-spacing: .12em; }
.directory-card .service-graphic { width: 188px; height: 170px; margin: 2px auto 0; }
.directory-card h2 { margin: 8px 0 10px; color: var(--navy); font-size: 1.65rem; }
.directory-card p { margin: 0 0 17px; color: var(--muted); font-size: .9rem; }
.directory-card b { margin-top: auto; color: var(--blue); font-size: .86rem; }
.directory-card.service-plumbing { --tile-accent: #36b6c4; }
.directory-card.service-heating { --tile-accent: #ed6570; }
.directory-card.service-gas { --tile-accent: #f0a64e; }
.directory-card.service-boilers { --tile-accent: #3fa7db; }
.directory-card.service-boiler-install { --tile-accent: #65c7eb; }
.directory-card.service-bathrooms { --tile-accent: #81caed; }
.directory-card.service-kitchens { --tile-accent: #5fbdb3; }
.directory-card.service-cover { --tile-accent: #f3c556; }
.directory-card.service-heatpumps { --tile-accent: #35b98b; }
.directory-card.service-heatpumps .service-graphic { display: grid; place-items: center; padding: 18px; border-radius: 28px; background: linear-gradient(145deg, #e9fbf5, #c7f0e3); filter: drop-shadow(0 16px 16px rgba(8,52,85,.11)); }
.directory-card.service-heatpumps .service-graphic svg { display: block; width: 100%; height: 100%; fill: none; stroke: #08795f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Heat pumps */
.heatpump-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 82% 15%, rgba(69,205,160,.24), transparent 28%), linear-gradient(120deg, #061f3a, #0b5271); }
.heatpump-hero-grid { min-height: 560px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 72px; padding-block: 72px; }
.heatpump-hero h1 { margin-bottom: 22px; font-size: clamp(3.1rem, 6.6vw, 6rem); }
.heatpump-hero h1 span { color: #8de4c6; }
.heatpump-hero-copy > p:not(.eyebrow) { max-width: 660px; color: #dceaf4; font-size: 1.08rem; }
.heatpump-hero-media { position: relative; height: 430px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; background: #dce9ee; box-shadow: 0 28px 65px rgba(0,0,0,.24); }
.heatpump-hero-media > img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.daikin-badge { position: absolute; left: 18px; bottom: 18px; min-width: 185px; padding: 13px 16px 11px; border-radius: 11px; background: rgba(255,255,255,.95); box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.daikin-badge img { display: block; width: 122px; height: auto; }
.daikin-badge span { display: block; margin-top: 5px; color: #315061; font-size: .7rem; font-weight: 800; }
.learning-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start; }
.learning-grid h2 { color: var(--navy); }
.learning-copy p { color: var(--muted); font-size: 1.04rem; }
.learning-points { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 24px; }
.learning-points article { min-height: 155px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(9,44,80,.07); }
.learning-points span { color: #15966f; font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.learning-points h3 { margin: 11px 0 7px; color: var(--navy); font-size: 1.1rem; }
.learning-points p { margin: 0; color: var(--muted); font-size: .84rem; }

/* Boiler cover */
.cover-hero { overflow: hidden; color: #fff; background: linear-gradient(118deg, #061f3a, #0d5184); }
.cover-hero-grid { min-height: 570px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 65px; padding-block: 70px; }
.cover-hero h1 span { color: #8cd0f2; }
.cover-portrait { position: relative; min-height: 450px; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 28px; background: #0b365b; box-shadow: 0 30px 70px rgba(0,0,0,.28); }
.cover-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(5,28,49,.68)); }
.cover-portrait img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cover-portrait > div { position: absolute; z-index: 3; left: 20px; bottom: 20px; padding: 14px 17px; border-radius: 10px; background: var(--red); box-shadow: var(--shadow); }
.cover-portrait strong, .cover-portrait span { display: block; }
.cover-portrait span { font-size: .75rem; }
.cover-heading { max-width: 780px; margin-bottom: 38px; }
.cover-heading h2 { margin-bottom: 18px; color: var(--navy); }
.cover-heading > p:last-child { color: var(--muted); }
.cover-plans { background: linear-gradient(180deg, #fff, #f2f7fa); border-bottom: 1px solid var(--line); }
.service-only { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; padding: 18px 22px; border: 1px solid #cfe0e9; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(9,44,80,.06); }
.service-only > div { display: flex; align-items: center; gap: 15px; }
.service-only p { margin: 0; color: var(--muted); font-size: .9rem; }
.service-only strong { color: var(--navy); }
.service-only-icon { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--blue); font-weight: 900; }
.service-only a { color: var(--blue); font-size: .84rem; font-weight: 850; white-space: nowrap; text-decoration: none; }
.plan-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; align-items: stretch; }
.plan-card { --accent: #2494cb; --accent-soft: #e5f4fb; position: relative; min-height: 640px; display: flex; flex-direction: column; padding: 0 28px 28px; overflow: hidden; border: 1px solid #cfdee7; border-top: 7px solid var(--accent); border-radius: 24px; background: #fff; box-shadow: 0 22px 55px rgba(9,44,80,.1); }
.plan-card.essentials { --accent: #63839a; --accent-soft: #dbe7ee; border-color: #b8cad5; background: linear-gradient(155deg, #edf3f6 0%, #fff 68%); }
.plan-card.plus { --accent: #168fca; --accent-soft: #cceeff; transform: translateY(-10px); border-color: #72bee3; background: linear-gradient(155deg, #e7f6fe 0%, #fff 68%); box-shadow: 0 28px 70px rgba(9,64,104,.17); }
.plan-card.priority { --accent: #f5c451; --accent-soft: rgba(255,255,255,.1); color: #fff; border-color: #164f79; background: linear-gradient(145deg, #071f38, #0d5687); }
.plan-art { position: relative; height: 118px; margin: 0 -28px 22px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-soft), #f8fcfe); }
.priority .plan-art { background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(44,151,207,.35)); }
.plan-ring { position: absolute; width: 128px; height: 128px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 50%; box-shadow: 0 0 0 23px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 0 46px color-mix(in srgb, var(--accent) 6%, transparent); }
.plan-symbol { position: relative; z-index: 2; width: 60px; height: 60px; display: grid; place-items: center; color: #fff; border-radius: 18px; background: var(--accent); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 35%, transparent); font-size: 1.65rem; font-weight: 900; }
.priority .plan-symbol { color: var(--navy); }
.plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plan-name { color: var(--navy); font-size: 1.28rem; font-weight: 900; letter-spacing: -.025em; }
.plan-top small { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.priority .plan-name, .priority .plan-top small { color: #fff; }
.plan-price { display: flex; align-items: baseline; gap: 7px; margin: 18px 0 12px; color: var(--navy); }
.plan-price strong { font-size: 2.55rem; line-height: 1; letter-spacing: -.055em; }
.plan-price span { color: var(--muted); font-size: .83rem; }
.priority .plan-price, .priority .plan-price span { color: #fff; }
.plan-card > p { min-height: 72px; margin: 0 0 18px; color: var(--muted); font-size: .91rem; }
.priority > p { color: #dceaf4; }
.plan-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.plan-numbers span { min-height: 70px; padding: 12px; border: 1px solid #d8e5ec; border-radius: 12px; color: var(--muted); background: #f7fafc; font-size: .72rem; line-height: 1.35; }
.plan-numbers b { display: block; color: var(--navy); font-size: 1.12rem; }
.priority .plan-numbers span { color: #d9e8f2; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
.priority .plan-numbers b { color: #fff; }
.plan-card ul { list-style: none; margin: 0 0 24px; padding: 0; color: var(--muted); font-size: .86rem; }
.plan-card li { position: relative; padding: 7px 0 7px 25px; }
.plan-card li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 900; }
.priority ul { color: #e8f2f8; }
.plan-card > a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-top: auto; padding: 0 16px; color: #fff; border-radius: 9px; background: var(--accent); font-size: .85rem; font-weight: 850; text-decoration: none; }
.priority > a { color: var(--navy); }
.popular-flag { position: absolute; z-index: 4; right: 14px; top: 13px; padding: 7px 10px; color: #fff; border-radius: 999px; background: var(--red); font-size: .66rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.plan-note { margin: 22px 0 0; color: var(--muted); font-size: .78rem; }
.cover-steps { padding-block: 92px; background: #fff; }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.steps-grid article { padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.steps-grid article > span { display: inline-grid; width: 44px; height: 44px; place-items: center; margin-bottom: 35px; color: #fff; border-radius: 50%; background: var(--blue); font-size: .77rem; font-weight: 900; }
.steps-grid h3 { margin-bottom: 12px; color: var(--navy); }
.steps-grid p { margin: 0; color: var(--muted); font-size: .9rem; }
.cover-details { padding-block: 88px; color: #fff; background: linear-gradient(115deg, #061f39, #0b507f); }
.details-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 75px; align-items: start; }
.details-grid h2 { margin-bottom: 22px; }
.details-grid > div:first-child > p:last-child { color: #d7e7f1; }
.detail-points { display: grid; gap: 12px; }
.detail-points p { display: grid; grid-template-columns: 155px 1fr; gap: 18px; margin: 0; padding: 18px 20px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(255,255,255,.06); }
.detail-points b { color: #fff; }
.detail-points span { color: #d9e8f2; font-size: .88rem; }
.cover-faq { background: #f4f8fb; }
.cover-faq .faq-list details { background: #fff; }
.cover-application-page { background: #f3f7fa; }
.application-intro { padding-block: 64px; color: #fff; background: linear-gradient(118deg, #061f3a, #0d5184); }
.application-intro-grid { display: grid; grid-template-columns: 1fr 330px; align-items: end; gap: 70px; }
.application-intro h1 { max-width: 700px; margin-bottom: 18px; font-size: clamp(2.7rem, 5vw, 4.8rem); }
.application-intro p:not(.eyebrow) { max-width: 650px; margin-bottom: 0; color: #dceaf4; }
.back-link { display: inline-block; margin-bottom: 35px; color: #b9dff3; font-size: .82rem; font-weight: 800; text-decoration: none; }
.application-promise { display: flex; align-items: center; gap: 15px; padding: 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; background: rgba(255,255,255,.08); }
.application-promise > span { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; color: var(--navy); border-radius: 50%; background: #fff; font-weight: 900; }
.application-promise strong, .application-promise small { display: block; }
.application-promise small { margin-top: 4px; color: #d2e5f1; line-height: 1.4; }
.application-body { padding-block: 70px 100px; }
.application-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 28px; align-items: start; }
.cover-application-form { display: grid; gap: 18px; }
.application-progress { display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.application-progress span { min-height: 72px; display: flex; align-items: center; gap: 10px; padding: 15px; color: var(--muted); border-right: 1px solid var(--line); font-size: .78rem; font-weight: 800; }
.application-progress span:last-child { border-right: 0; }
.application-progress b { width: 30px; height: 30px; display: grid; flex: 0 0 30px; place-items: center; color: var(--navy); border: 1px solid var(--line); border-radius: 50%; }
.application-progress .active { color: var(--navy); background: #f2f9fd; }
.application-progress .active b { color: #fff; border-color: var(--blue); background: var(--blue); }
.application-section { min-width: 0; margin: 0; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 13px 35px rgba(9,44,80,.06); }
.application-section legend { padding: 0 8px 0 0; color: var(--navy); font-size: 1.22rem; font-weight: 900; }
.application-section legend span { display: inline-grid; width: 36px; height: 36px; place-items: center; margin-right: 8px; color: #fff; border-radius: 50%; background: var(--blue); font-size: .7rem; vertical-align: middle; }
.application-plan-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }
.application-plan-option { cursor: pointer; }
.application-plan-option input { position: absolute; opacity: 0; pointer-events: none; }
.application-plan-option > span { position: relative; min-height: 158px; display: flex; flex-direction: column; padding: 22px 18px; overflow: hidden; border: 2px solid #dbe5eb; border-radius: 15px; background: #f8fbfd; transition: border .2s ease, transform .2s ease, box-shadow .2s ease; }
.application-plan-option input:checked + span { border-color: var(--blue); background: #eef8fd; box-shadow: 0 12px 28px rgba(35,143,202,.16); transform: translateY(-2px); }
.application-plan-option.priority input:checked + span { color: #fff; border-color: var(--navy); background: linear-gradient(145deg, #082b4d, #0d5788); }
.application-plan-option b, .application-plan-option small, .application-plan-option em { display: block; }
.application-plan-option b { color: var(--navy); font-size: 1rem; }
.application-plan-option small { margin-top: 8px; color: var(--blue); font-size: .93rem; font-weight: 900; }
.application-plan-option em { margin-top: auto; color: var(--muted); font-size: .68rem; font-style: normal; }
.application-plan-option.priority input:checked + span b, .application-plan-option.priority input:checked + span small, .application-plan-option.priority input:checked + span em { color: #fff; }
.application-plan-option i { position: absolute; right: 9px; top: 9px; padding: 4px 7px; color: #fff; border-radius: 999px; background: var(--red); font-size: .55rem; font-style: normal; font-weight: 900; text-transform: uppercase; }
.application-fields { display: grid; gap: 17px; margin-top: 17px; }
.application-fields.two-column { grid-template-columns: repeat(2,minmax(0,1fr)); }
.application-fields label { min-width: 0; color: var(--navy); font-size: .8rem; font-weight: 800; }
.application-fields label > span:first-child { display: block; margin-bottom: 7px; }
.application-fields .full { grid-column: 1 / -1; }
.application-fields input[type="text"], .application-fields input[type="tel"], .application-fields input[type="email"], .application-fields select, .application-fields textarea { width: 100%; min-height: 50px; padding: 11px 13px; color: var(--ink); border: 1px solid #cbd9e1; border-radius: 9px; background: #fff; font: inherit; font-size: .92rem; }
.application-fields textarea { resize: vertical; }
.application-fields input:focus, .application-fields select:focus, .application-fields textarea:focus { outline: 3px solid rgba(35,143,202,.16); border-color: var(--blue); }
.inline-options { display: flex; flex-wrap: wrap; gap: 8px; }
.inline-options label { padding: 10px 13px; border: 1px solid #cfdae1; border-radius: 9px; background: #f7fafc; font-weight: 700; }
.field-help { display: block; margin-top: 8px; color: var(--muted); font-size: .72rem; font-weight: 500; }
.application-consent { display: grid; gap: 10px; padding: 22px; border: 1px solid #cfe0e9; border-radius: 15px; background: #eaf6fc; }
.application-consent label { display: flex; align-items: flex-start; gap: 10px; color: #314655; font-size: .79rem; }
.application-consent input { flex: 0 0 auto; margin-top: 4px; }
.application-submit { min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #fff; border: 0; border-radius: 10px; background: var(--red); box-shadow: 0 14px 28px rgba(223,48,57,.2); font: inherit; font-weight: 900; cursor: pointer; }
.application-submit b { width: 32px; height: 32px; display: grid; place-items: center; color: var(--red); border-radius: 50%; background: #fff; }
.application-footnote { margin: -7px 0 0; color: var(--muted); font-size: .73rem; text-align: center; }
.application-error { padding: 13px 15px; color: #8a2028; border: 1px solid #efb9be; border-radius: 9px; background: #fff1f2; font-size: .84rem; font-weight: 700; }
.application-summary { position: sticky; top: 100px; padding: 27px; color: #fff; border-radius: 20px; background: linear-gradient(145deg, #071f38, #0d5687); box-shadow: 0 24px 55px rgba(9,44,80,.18); }
.application-summary h2 { margin-bottom: 12px; font-size: 1.8rem; }
.application-summary [data-plan-summary] > strong { display: block; color: #fff; font-size: 1.8rem; }
.application-summary [data-plan-summary] > span { display: block; margin-top: 8px; color: #d8e8f2; font-size: .82rem; }
.application-summary [data-plan-summary] > p { color: #d8e8f2; }
.summary-checks { display: grid; gap: 9px; margin: 26px 0; padding-block: 22px; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.summary-checks span { color: #e5f1f8; font-size: .8rem; }
.application-summary > a { color: #fff; font-size: .82rem; font-weight: 850; }
.cover-mobile-cta { display: none; }
.compact-checks { margin-bottom: 0; }
@media (max-width: 980px) {
  .nav-call { display: none; }
  .site-nav { gap: 18px; }
  .hero-grid { grid-template-columns: 1fr; padding-top: 64px; }
  .hero-visual { max-width: 720px; width: 100%; height: 430px; margin-inline: auto; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-hero-grid, .cover-hero-grid { grid-template-columns: 1fr; }
  .bathroom-experience-grid { grid-template-columns: 1fr; gap: 36px; }
  .heatpump-hero-grid, .learning-grid { grid-template-columns: 1fr; gap: 42px; }
  .installation-accreditation-grid { grid-template-columns: 1fr; gap: 40px; }
  .diagnostic-edge-grid { grid-template-columns: 1fr; gap: 38px; }
  .application-intro-grid { grid-template-columns: 1fr; gap: 30px; }
  .application-promise { max-width: 520px; }
  .application-layout { grid-template-columns: 1fr; }
  .application-summary { position: static; grid-row: 1; }
  .service-hero-image { height: 360px; }
  .cover-portrait { max-width: 600px; width: 100%; margin-inline: auto; }
  .directory-grid { grid-template-columns: repeat(2,1fr); }
  .related-grid { grid-template-columns: repeat(2,1fr); }
  .bathroom-gallery figure { flex-basis: calc((100% - 14px) / 2); }
  .before-after-grid { grid-template-columns: 1fr; gap: 35px; }
  .comparison-stage { width: min(100%, 520px); }
  .teal-feature-heading { grid-template-columns: 1fr; gap: 18px; }
  .teal-feature-main { grid-template-columns: minmax(0, 1fr) minmax(180px, .65fr); gap: 35px; }
  .teal-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stone-feature-showcase { height: 490px; }
  .fix-grid, .about-grid, .contact-grid { gap: 48px; }
  .about-page-hero-grid, .about-story-grid, .about-local-grid, .awards-showcase-grid { gap: 44px; }
  .about-grid { grid-template-columns: .9fr 1.1fr; }
}
@media (max-width: 760px) {
  .bathroom-project-feature { padding-block: 60px; }
  .calypso-heading { grid-template-columns: 1fr; gap: 15px; }
  .calypso-showcase { grid-template-columns: 1fr; height: auto; }
  .calypso-main-photo { height: 420px; }
  .calypso-video-card { height: min(88vh, 660px); }
  .calypso-photo-rail figure { flex-basis: 42%; }
  .bathroom-before-after { padding-block: 62px; }
  .bathroom-teal-feature { padding-block: 66px; }
  .teal-feature-main { grid-template-columns: 1fr; gap: 20px; }
  .teal-feature-main .comparison-stage { width: min(100%, 520px); margin-inline: auto; }
  .teal-feature-note { padding: 8px 0 8px 18px; }
  .teal-detail-heading { margin-top: 38px; }
  .bathroom-stone-feature { padding-block: 66px; }
  .stone-feature-showcase { grid-template-columns: 1fr; height: auto; gap: 12px; }
  .stone-feature-showcase .stone-feature-main-photo { height: 440px; }
  .stone-feature-showcase .stone-feature-shower-photo { height: 335px; }
  .stone-feature-showcase figure { border-width: 3px; border-radius: 14px; }
  .stone-feature-showcase figcaption { left: 11px; bottom: 12px; font-size: .75rem; }
  .stone-feature-rail figure { flex-basis: 48%; }
  .bathroom-stone-feature + .bathroom-gallery-section { padding-top: 66px; }
  .bathroom-experience { padding-block: 60px; }
  .bathroom-experience-film { border-radius: 18px; }
  .bathroom-experience-badge { left: 14px; bottom: 13px; font-size: .62rem; }
  .shell { width: min(100% - 28px, 1180px); }
  .topbar-inner span:last-child { display: none; }
  .nav-wrap { min-height: 68px; }
  .brand img { width: 150px; }
  .menu-toggle { display: block; }
  .site-nav { position: absolute; top: 68px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 20px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 18px 28px rgba(7,35,61,.12); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid #edf1f4; }
  .hero-grid { min-height: auto; padding-block: 58px 35px; }
  .heatpump-hero-grid { min-height: auto; padding-block: 58px; }
  h1 { font-size: clamp(2.7rem, 13vw, 4.4rem); }
  .hero-lead { font-size: 1rem; }
  .hero-visual { height: 380px; }
  .hero-stamp { width: 94px; height: 94px; right: 12px; top: 12px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item { min-height: 96px; border-bottom: 1px solid rgba(255,255,255,.15); }
  .accreditation-heading { grid-template-columns: 1fr; gap: 12px; }
  .section, .fix-first { padding-block: 72px; }
  .split-heading, .fix-grid, .about-grid, .contact-grid, .faq-grid, .about-page-hero-grid, .about-story-grid, .about-local-grid, .awards-showcase-grid, .work-heading, .installation-showcase-heading { grid-template-columns: 1fr; }
  .work-heading { gap: 22px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 280px; }
  .work-card, .work-card:nth-child(1), .work-card:nth-child(3) { grid-column: span 1; grid-row: span 1; }
  .about-hero-vans { min-height: 340px; }
  .about-hero-vans.photo-vans { min-height: 0; }
  .awards-photo { width: min(100%, 430px); margin-inline: auto; }
  .credential-logo-grid { grid-template-columns: repeat(2,1fr); }
  .detail-grid, .why-grid { grid-template-columns: 1fr; gap: 35px; }
  .gallery-heading { grid-template-columns: 1fr; gap: 16px; }
  .mini-trust .shell { grid-template-columns: repeat(2,1fr); }
  .mini-trust span { min-height: 58px; display: grid; place-items: center; border-bottom: 1px solid var(--line); }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card { min-height: 610px; }
  .plan-card.plus { transform: none; }
  .service-only { align-items: flex-start; flex-direction: column; }
  .service-only a { white-space: normal; }
  .steps-grid, .details-grid { grid-template-columns: 1fr; }
  .application-plan-options { grid-template-columns: 1fr; }
  .application-plan-option > span { min-height: 130px; }
  .details-grid { gap: 38px; }
  .related-grid { grid-template-columns: 1fr; }
  .split-heading { gap: 20px; }
  .review-heading { align-items: flex-start; flex-direction: column; }
  .rating-block { align-items: flex-start; }
  .google-review-summary { grid-template-columns: 1fr auto; gap: 20px; }
  .google-review-summary > b { grid-column: 1 / -1; }
  .review-carousel .review-card { flex-basis: calc((100% - 18px) / 2); }
  .mybuilder-review-panel { grid-template-columns: 1fr; }
  .about-journey { max-width: 650px; width: 100%; margin-inline: auto; }
  .credential-row { grid-template-columns: 1fr; }
  .contact-grid { gap: 34px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 42px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 470px) {
  .topbar { text-align: center; }
  body:has(.cover-mobile-cta) { padding-bottom: 74px; }
  .cover-mobile-cta { position: fixed; z-index: 45; left: 14px; right: 14px; bottom: 12px; min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 19px; color: #fff; border-radius: 10px; background: var(--red); box-shadow: 0 15px 35px rgba(7,31,56,.3); font-size: .9rem; font-weight: 900; text-decoration: none; }
  .topbar-inner { justify-content: center; }
  .hero-actions .button { width: 100%; }
  .hero-rating { align-items: flex-start; flex-direction: column; }
  .van-runner { height: 98px; }
  .van-drive { --van-end: calc(100vw - 181px); --wheel-rotation: 2880deg; width: 165px; bottom: 4px; }
  .hero-visual { height: 300px; }
  .hero-visual img { object-position: 44% center; }
  .hero-stamp { width: 84px; height: 84px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item { min-height: 118px; align-items: flex-start; flex-direction: column; gap: 10px; padding: 17px 14px; border-left: 1px solid rgba(255,255,255,.15); }
  .trust-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .trust-icon svg { width: 20px; height: 20px; }
  .trust-copy strong { font-size: .9rem; }
  .trust-copy small { font-size: .72rem; }
  .service-grid { grid-template-columns: 1fr; }
  .related-card { min-height: 118px; grid-template-columns: 78px minmax(0,1fr) 34px; gap: 11px; padding: 12px; border-radius: 16px; }
  .related-card-visual { width: 78px; height: 78px; border-radius: 13px; }
  .related-card-copy strong { font-size: .9rem; }
  .related-card-copy small { font-size: .7rem; }
  .related-card-arrow { width: 32px; height: 32px; }
  .accreditation-grid { grid-template-columns: 1fr 1fr; }
  .accreditation-strip { padding-block: 44px 52px; }
  .accreditation-heading { margin-bottom: 24px; }
  .accreditation-heading h2 { font-size: 2rem; }
  .accreditation-heading > p { font-size: .92rem; }
  .accreditation-badge { min-height: 132px; padding: 16px 12px; }
  .service-hero-grid { min-height: auto; padding-block: 55px; }
  .service-hero-image { height: 270px; }
  .installation-hero-image { height: 390px; }
  .service-list { grid-template-columns: 1fr; }
  .installation-showcase { padding-block: 72px; }
  .installation-gallery { grid-template-columns: 1fr; grid-auto-rows: 390px; }
  .installation-logo-grid { grid-template-columns: 1fr; }
  .installation-logo-grid div { min-height: 145px; }
  .diagnostic-edge { padding-block: 72px; }
  .diagnostic-cards { grid-template-columns: 1fr; }
  .diagnostic-cards article { min-height: 0; }
  .diagnostic-cards article > span { margin-bottom: 18px; }
  .bathroom-gallery { gap: 12px; }
  .bathroom-gallery figure { flex-basis: 86%; aspect-ratio: 4 / 5; }
  .directory-grid, .related-grid { grid-template-columns: 1fr; }
  .directory-card { min-height: 340px; }
  .heatpump-hero-media { height: 320px; }
  .learning-points { grid-template-columns: 1fr; }
  .cover-hero-grid { min-height: auto; padding-block: 55px; }
  .cover-portrait { min-height: 400px; }
  .application-intro { padding-block: 45px; }
  .application-body { padding-block: 42px 70px; }
  .application-section { padding: 22px 18px; }
  .application-progress { grid-template-columns: 1fr; }
  .application-progress span { min-height: 50px; border-right: 0; border-bottom: 1px solid var(--line); }
  .application-progress span:last-child { border-bottom: 0; }
  .application-fields.two-column { grid-template-columns: 1fr; }
  .application-fields .full { grid-column: auto; }
  .plan-card { min-height: auto; padding-inline: 22px; }
  .plan-art { margin-inline: -22px; }
  .plan-card > p { min-height: auto; }
  .steps-grid { grid-template-columns: 1fr; }
  .detail-points p { grid-template-columns: 1fr; gap: 5px; }
  .service-card { min-height: 270px; }
  .work-grid { display: flex; gap: 12px; overflow-x: auto; padding: 0 0 12px; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.45) transparent; }
  .work-card, .work-card:nth-child(1), .work-card:nth-child(3) { flex: 0 0 86%; min-height: 320px; scroll-snap-align: start; }
  .google-review-summary { grid-template-columns: 1fr; }
  .google-reviews-block { padding: 18px 14px; border-radius: 16px; }
  .google-review-rating { min-width: 0; text-align: left; }
  .google-review-summary > b { grid-column: auto; }
  .platform-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .review-carousel .review-card { flex-basis: 88%; }
  .mybuilder-review-panel { margin-top: 52px; padding: 28px 22px; border-radius: 16px; }
  .fix-panel { min-height: 390px; }
  .fix-panel::after { width: 345px; height: 345px; }
  .fix-panel::before { width: 290px; height: 290px; }
  .about-journey figure { height: 225px; }
  .about-page-hero { padding-block: 66px 54px; }
  .about-hero-vans { min-height: 260px; padding: 20px; }
  .about-hero-vans.photo-vans { min-height: 0; padding: 0; }
  .about-timeline-grid, .about-values-grid, .about-local-points { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-timeline-grid figure { height: 300px; }
  .awards-photo { width: min(100%, 390px); }
  .awards-list { grid-template-columns: 1fr; }
  .awards-list article { min-height: auto; }
  .credential-logo-grid > div { min-height: 120px; padding: 16px; }
  .contact-card { align-items: flex-start; flex-direction: column; }
  .contact-card strong { text-align: left; }
  .booking-fields { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
}
@media (max-width: 760px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-photo { height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .van-drive { animation: none; transform: translateX(var(--van-end)); }
  .van-chassis, .van-wheel { animation: none; }
  .hero-title-line { opacity: 1; transform: none; filter: none; animation: none; }
  .hero-title-accent::after { opacity: 1; transform: scaleX(1); animation: none; }
  .bathroom-experience-film video { display: none; }
  .bathroom-experience-film { background: #082b4b url('assets/smc-bathroom-spa-poster.webp') center / cover no-repeat; }
}

/* Finished kitchen project gallery */
.kitchen-finished-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.kitchen-finished-gallery figure { margin: 0; overflow: hidden; border: 1px solid #d7e5ed; border-radius: 16px; background: #fff; }
.kitchen-finished-gallery button { display: block; width: 100%; padding: 0; border: 0; background: #e8eff3; cursor: zoom-in; }
.kitchen-finished-gallery button:focus-visible { outline: 3px solid var(--blue); outline-offset: -4px; }
.kitchen-finished-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.kitchen-finished-gallery figcaption { padding: 18px; color: var(--navy); font-size: 1rem; font-weight: 700; }
@media (max-width: 980px) { .kitchen-finished-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kitchen-finished-gallery { grid-template-columns: 1fr; gap: 24px; } .kitchen-finished-gallery img { aspect-ratio: auto; } }

/* Subtle project photography, consistent with the bathroom feature sections. */
.kitchen-project-background { background: linear-gradient(120deg, rgba(6,31,58,.94), rgba(9,59,94,.88)), url('assets/kitchen-gallery-island-pendants.webp') center 55% / cover no-repeat; }

/* Kitchen plan-to-finish video */
.kitchen-reveal-section { padding-block: 88px; border-block: 1px solid #cfe0e8; background: linear-gradient(135deg, #f7fbfd 0%, #e7f2f7 100%); }
.kitchen-reveal-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 48px; align-items: center; }
.kitchen-reveal-copy h2 { max-width: 500px; }
.kitchen-reveal-copy > p:not(.eyebrow):not(.kitchen-reveal-note) { max-width: 520px; color: #405664; font-size: 1.08rem; line-height: 1.7; }
.kitchen-reveal-note { margin-top: 22px; color: #6d8491; font-size: .88rem; }
.kitchen-reveal-video-frame { overflow: hidden; border: 1px solid rgba(7,44,75,.16); border-radius: 24px; background: #061f3a; box-shadow: 0 24px 55px rgba(9,44,80,.18); }
.kitchen-reveal-video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 900px) { .kitchen-reveal-grid { grid-template-columns: 1fr; gap: 28px; } .kitchen-reveal-copy h2 { max-width: none; } }

.hero-supplied-note { margin-top: -8px; color: #fff !important; font-size: 1rem !important; font-weight: 750; }

/* Keep the engineer and boiler visible in the portrait hero photograph. */
.boiler-repairs-hero .service-hero-image { height: auto; aspect-ratio: 3 / 4; }
.boiler-repairs-hero .service-hero-image img { display: block; object-fit: contain; }

/* Keep the complete logo visible behind the home contact section. */
.contact-brand-film { position: relative; isolation: isolate; overflow: hidden; background: #061b30; }
.contact-brand-video { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.contact-brand-film::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgba(5,25,44,.88), rgba(5,31,53,.77)); }
.brand-motion-toggle { position: absolute; right: 24px; bottom: 18px; padding: 8px 12px; border: 1px solid #8aafc7; border-radius: 8px; background: #092c50; color: #fff; font: inherit; font-size: .875rem; cursor: pointer; }
.brand-motion-toggle[hidden] { display: none; }
.brand-motion-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 760px) { .contact-brand-video { object-position: center 12%; } }

/* Keep the supplied portrait tap photo clear in the plumbing hero. */
.plumbing-hero .service-hero-image { height: auto; aspect-ratio: 3 / 4; background: #092c50; }
.plumbing-hero .service-hero-image img { display: block; object-fit: contain; }

.pump-accreditation { padding-block: 44px; background: #f2f8fb; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pump-accreditation-inner { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; align-items: center; gap: 42px; }
.pump-accreditation img { display: block; width: 100%; max-width: 280px; height: auto; mix-blend-mode: multiply; }
.pump-accreditation h2 { margin-bottom: 10px; color: var(--navy); }
.pump-accreditation p:not(.eyebrow) { max-width: 620px; margin: 0; color: var(--muted); }
@media (max-width: 760px) { .pump-accreditation-inner { grid-template-columns: 1fr; gap: 24px; } .pump-accreditation img { max-width: 230px; } }

.recent-plumbing-work { background: #fff; }
.recent-work-grid { display: grid; grid-template-columns: minmax(240px, .9fr) 1.1fr; gap: 58px; align-items: center; }
.recent-work-image { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 20px; background: #092c50; box-shadow: var(--shadow); }
.recent-work-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.recent-work-grid h2 { margin-bottom: 14px; color: var(--navy); }
.recent-work-grid p:not(.eyebrow) { max-width: 600px; color: var(--muted); }
@media (max-width: 760px) { .recent-work-grid { grid-template-columns: 1fr; gap: 28px; } }

.manufacturer-strip { overflow: hidden; padding: 22px 0 26px; background: #f2f8fb; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.manufacturer-strip-label { margin-bottom: 12px; color: var(--navy); font-size: .76rem; font-weight: 850; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.manufacturer-marquee { overflow: hidden; }
.manufacturer-track { display: flex; width: max-content; align-items: center; gap: 28px; animation: manufacturer-scroll 24s linear infinite; }
.manufacturer-track span { position: relative; flex: 0 0 220px; width: 220px; height: 90px; overflow: hidden; border: 1px solid #d2e1e8; border-radius: 12px; background: #fff; }
.manufacturer-track img { position: absolute; display: block; left: 50%; top: 50%; width: 188px; max-width: none; max-height: none; height: auto; transform: translate(-50%, -50%); }
.manufacturer-track img[alt="Baxi"] { width: 150px; }
.manufacturer-track img[alt="Viessmann"] { width: 250px; }
.manufacturer-track img[alt="Glow-worm"] { width: 190px; transform: translate(-50%, -68.4%); }
.manufacturer-track img[alt="Vaillant"] { width: 200px; transform: translate(-50%, -49.2%); }
@keyframes manufacturer-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 14px)); } }
@media (prefers-reduced-motion: reduce) { .manufacturer-track { animation-play-state: paused; } }

.manufacturer-details { background: #fff; }
.manufacturer-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.manufacturer-card { display: grid; grid-template-columns: 150px 1fr; gap: 26px; align-items: center; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: #f8fbfd; }
.manufacturer-card-logo { display: flex; min-height: 90px; align-items: center; justify-content: center; padding: 12px; border-radius: 12px; background: #fff; }
.manufacturer-card-logo img { display: block; max-width: 100%; max-height: 62px; width: auto; height: auto; object-fit: contain; }
.manufacturer-card h2 { margin-bottom: 10px; color: var(--navy); font-size: 1.45rem; }
.manufacturer-card p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.65; }
@media (max-width: 900px) { .manufacturer-detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .manufacturer-card { grid-template-columns: 1fr; gap: 18px; } .manufacturer-card-logo { justify-content: flex-start; width: 180px; } }

.wb-card-link { color: inherit; text-decoration: underline; text-decoration-color: #a8c4d7; text-underline-offset: 5px; }
.wb-card-link:hover { color: #0068a7; }

/* Compact homepage navigation and readable review motion. */
.home-page #services{scroll-margin-top:100px;padding-top:55px;padding-bottom:55px}.home-page .service-card{min-height:310px;padding:20px}.home-page .service-card .service-graphic{width:125px;height:105px}.home-page .service-card .service-number{display:none}.home-page .services .section-heading{margin-bottom:25px}.home-page .services h2{font-size:clamp(1.9rem,3vw,2.7rem)}.home-page .hero-actions .button{width:auto;padding:13px 20px}.home-page .review-carousel .review-card{flex:0 0 calc((100% - 36px)/2.35);margin:0;min-height:285px}.home-page .review-carousel{padding-top:6px;padding-bottom:20px}.home-page .review-card{transition:box-shadow .25s ease,transform .25s ease}.home-page .review-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px #092c5014}.review-motion-button{border:1px solid #ccdce6;border-radius:24px;background:white;color:#092c50;padding:10px 15px;font:inherit;font-size:.8rem;cursor:pointer}.review-motion-button[hidden]{display:none}.home-page .platform-heading .gallery-controls{flex-wrap:wrap}.home-page .review-motion-button:focus-visible{outline:3px solid #2183b6;outline-offset:3px}@media(max-width:760px){.home-page .service-card{min-height:275px}.home-page .review-carousel .review-card{flex-basis:88%}.home-page .platform-heading{gap:18px;flex-wrap:wrap}.home-page .hero-actions .button{flex:1 1 160px}.home-page #services{padding-top:38px;padding-bottom:38px}}@media(prefers-reduced-motion:reduce){.home-page .review-card{transition:none}.home-page .review-card:hover{transform:none}}

.heating-photo-hero .service-hero-image{height:auto;aspect-ratio:3/4;max-width:480px;width:100%;justify-self:center}.heating-photo-hero .service-hero-image img{display:block;object-fit:contain;object-position:center}

.radiator-showcase{background:#f1f6fa}.radiator-showcase .section-heading>p:last-child{max-width:740px;color:#526574}.radiator-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.radiator-gallery figure{margin:0;overflow:hidden;background:#fff;border-radius:18px;border:1px solid #d6e4ec}.radiator-gallery button{display:block;width:100%;padding:0;border:0;background:#e5edf2;cursor:zoom-in}.radiator-gallery img,.radiator-gallery video{display:block;width:100%;height:390px;object-fit:contain;background:#e5edf2}.radiator-gallery figcaption{padding:16px 18px;color:#092c50;font-weight:700;font-size:.9rem}.radiator-gallery button:focus-visible{outline:3px solid #1686bd;outline-offset:-4px}@media(max-width:900px){.radiator-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.radiator-gallery{grid-template-columns:1fr;gap:20px}.radiator-gallery img,.radiator-gallery video{height:auto;max-height:520px;min-height:220px}}

/* Shared subtle fleet photograph across page introductions. */
.fleet-background { position: relative; isolation: isolate; overflow: hidden; }
.fleet-background::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(6,31,58,.45), rgba(6,31,58,.15), rgba(6,31,58,.4)), url("assets/smc-fleet-background.jpeg") center 58% / cover no-repeat; opacity: .18; mask-image: linear-gradient(180deg, transparent 0%, black 16%, black 84%, transparent 100%); }
@media (max-width: 760px) { .fleet-background::after { background-size: auto, auto 100%; background-position: center, 42% center; opacity: .14; } }

/* Accessible social links shared by every page footer. */
.footer .footer-social { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.footer .footer-social a { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:10px 13px; border:1px solid #52718b; border-radius:9px; color:#fff; text-decoration:none; font-size:.88rem; line-height:1.2; }
.footer-social svg { width:21px; height:21px; flex-shrink:0; }
.footer .footer-social a:hover { background:#164769; border-color:#8cd0f2; }
.footer .footer-social a:focus-visible { outline:3px solid #8cd0f2; outline-offset:4px; }

/* Scroll-aware sticky navigation without changing page layout. */
.site-header { transition: transform .24s ease; }
.site-header.header-hidden { transform: translateY(calc(-100% - 2px)); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

/* Original accreditation badges, balanced for a compact footer row. */
.footer-credentials { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; padding-bottom:32px; margin-bottom:36px; border-bottom:1px solid #ffffff26; }
.footer-credential { display:flex; align-items:center; justify-content:center; width:160px; height:100px; padding:10px; background:#fff; border-radius:8px; }
.footer-credential img { display:block; width:100%; height:100%; object-fit:contain; }
.footer-credential-worcester { width:200px; }
@media(max-width:600px) { .footer-credentials { gap:10px; padding-bottom:24px; margin-bottom:28px; } .footer-credential,.footer-credential-worcester { width:calc((100% - 20px) / 3); height:82px; padding:7px; } }

/* Compact homepage shortcuts keep services easy to find. */
.home-page #services { position:relative; isolation:isolate; overflow:hidden; padding-block:32px; background:#edf6fa; }
.home-page #services::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,rgba(237,246,250,.92),rgba(237,246,250,.78),rgba(237,246,250,.9)),url("assets/smc-service-vans.jpeg") 78% 54% / cover no-repeat; opacity:.95; }
.home-page #services .shell { position:relative; z-index:1; }
.home-page #services .section-heading { align-items:center; margin-bottom:20px; gap:20px; }
.home-page #services .section-heading-action p { margin-bottom:6px; }
.service-shortcuts { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.service-shortcut { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:150px; padding:14px 8px; border:1px solid #d6e4ec; border-radius:14px; background:rgba(255,255,255,.94); color:var(--navy); text-decoration:none; text-align:center; font-weight:800; font-size:.88rem; line-height:1.3; transition:background .2s,border-color .2s; }
.service-shortcut img { display:block; width:88px; height:76px; object-fit:contain; }
.service-shortcut .shortcut-arrow { color:#147aaf; font-size:1.05rem; }
.service-shortcut:hover { background:#edf7fc; border-color:#238fca; }
.service-shortcut:focus-visible { outline:3px solid #238fca; outline-offset:3px; }
@media(max-width:1000px) { .service-shortcuts { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) { .home-page #services { padding-block:28px; } .home-page #services::before { background-position:82% center; background-size:auto 100%; } .service-shortcuts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .service-shortcut { min-height:132px; padding:10px 8px; gap:6px; } .service-shortcut img { width:70px; height:60px; } .home-page #services .section-heading-action p { display:none; } }
@media(prefers-reduced-motion:reduce) { .service-shortcut { transition:none; } }

/* Service icons respond to pointer and keyboard without delaying navigation. */
.service-shortcut { position:relative; isolation:isolate; overflow:hidden; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease; }
.service-shortcut img { position:relative; z-index:1; transition:transform .35s ease,filter .35s ease; }
.service-shortcut > span { position:relative; z-index:1; }
.service-shortcut .shortcut-arrow { transition:transform .25s ease; }
.service-shortcut::before { content:""; position:absolute; width:120px; height:100px; top:-16px; left:50%; transform:translateX(-50%) scale(.7); border-radius:50%; background:radial-gradient(ellipse,#58c4ef66,transparent 70%); opacity:0; transition:opacity .3s,transform .3s; pointer-events:none; }
@keyframes service-float { 0%,100% { transform:translateY(-4px) rotate(-2deg); } 50% { transform:translateY(-8px) rotate(2deg); } }
.service-shortcut:focus-visible { transform:translateY(-4px); box-shadow:0 10px 22px #092c5020; }
.service-shortcut:focus-visible::before { opacity:1; transform:translateX(-50%) scale(1.3); }
.service-shortcut:focus-visible img { transform:translateY(-5px) scale(1.06); }
.service-shortcut:focus-visible .shortcut-arrow { transform:translateX(5px); }
@media(hover:hover) and (pointer:fine) {
 .service-shortcut:hover { transform:translateY(-5px); box-shadow:0 12px 25px #092c5024; }
 .service-shortcut:hover::before { opacity:1; transform:translateX(-50%) scale(1.3); }
 .service-shortcut:hover img { transform:translateY(-5px) scale(1.06); filter:drop-shadow(0 7px 6px #1686bd33); }
 .service-shortcut[href="plumbing.html"]:hover img,.service-shortcut[href="bathrooms.html"]:hover img { animation:service-float 1s ease-in-out 2; }
 .service-shortcut[href="boiler-cover.html"]:hover img { transform:translateY(-5px) rotate(-7deg) scale(1.08); }
 .service-shortcut:hover .shortcut-arrow { transform:translateX(5px); }
}
.service-shortcut:active { transform:scale(.98); }
@media(prefers-reduced-motion:reduce) {
 .service-shortcut,.service-shortcut img,.service-shortcut .shortcut-arrow,.service-shortcut::before,.service-shortcut::after { transition:none!important; animation:none!important; }
 .service-shortcut:hover,.service-shortcut:focus-visible,.service-shortcut:active,.service-shortcut:hover img,.service-shortcut:focus-visible img,.service-shortcut:hover .shortcut-arrow,.service-shortcut:focus-visible .shortcut-arrow { transform:none; }
 .service-shortcut::after { display:none; }
}

/* Stronger service outlines, retaining the lift and icon animations. */
.service-shortcut { border-width:2px; border-color:#9ebfd3; }
.service-shortcut::after { content:none; }
.service-shortcut:focus-visible { border-color:#147aaf; }
@media(hover:hover) and (pointer:fine) { .service-shortcut:hover { border-color:#147aaf; } }

.booking-trap { display:none!important; }
.booking-photo { display:grid; gap:8px; margin-top:16px; font-weight:700; }
.booking-photo input { max-width:100%; font:inherit; }
.booking-photo small { font-weight:400; }
[data-booking-status]:empty { display:none; }
[data-booking-status] { padding:12px; border:1px solid currentColor; border-radius:8px; }
[data-booking-send]:disabled { opacity:.65; cursor:wait; }
.booking-note a { color:inherit; text-decoration:underline; }

#contact { scroll-margin-top:110px; }