/* Classy Glass Horsham */

:root {
  /* Colours from the logo: charcoal "CLASSY", blue "GLASS", cyan prism. */
  --navy: #1f2d3a;
  --navy-deep: #141d26;
  --sky: #3aa8d8;
  --sky-dark: #1673b3;
  --ink: #2e3134;
  --muted: #5b636b;
  --tint: #f1f5f8;
  --line: #dde3e8;
  --white: #fff;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(31, 45, 58, .10);
  --head: "Montserrat", Arial, Helvetica, sans-serif;
  --body: "Jost", Arial, Helvetica, sans-serif;
  --gutter: 16px;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
h1, h2, h3 { font-family: var(--head); font-weight: 600; letter-spacing: -.01em; color: var(--navy); line-height: 1.18; margin: 0 0 .5em; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 700px) { :root { --gutter: 28px; } }

.visually-hidden, .hp {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--navy); color: #fff; padding: 8px 14px; border-radius: 6px; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: 2px; }

.icon { width: 1.15em; height: 1.15em; flex: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 600 .95rem/1 var(--body); letter-spacing: .04em; text-transform: uppercase;
  color: #01141f; background: var(--sky); border: 2px solid var(--sky);
  padding: .95em 1.6em; border-radius: 6px; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.btn:hover { background: var(--sky-dark); border-color: var(--sky-dark); color: #fff; transform: translateY(-1px); }
.btn-small { padding: .65em 1em; font-size: .85rem; }
.btn-ghost { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-ghost:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-ghost-light { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand img { height: 44px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a:not(.btn) {
  font-weight: 500; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
}
.site-nav a:not(.btn):hover { color: var(--sky-dark); }
.nav-toggle { display: none; }

@media (max-width: 859px) {
  .nav-toggle {
    display: grid; place-items: center; width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer; padding: 0;
  }
  .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
    content: ""; display: block; width: 24px; height: 2px; background: var(--navy);
    position: relative; transition: transform .2s, background .2s;
  }
  .nav-toggle-bar::before { position: absolute; top: -7px; }
  .nav-toggle-bar::after { position: absolute; top: 7px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

  .site-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    padding: 8px var(--gutter) 20px; display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .site-nav .btn { margin-top: 16px; }
}

/* Hero: clean white, text beside a clear photo (no wash over the photo). */
.hero { padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 6vw, 72px); background: linear-gradient(180deg, #fff 60%, var(--tint)); }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 5fr 6fr; gap: 48px; } }
.hero-title {
  /* Sized so "Window Cleaning" (about 8.9em wide) stays on one line beside the photo. */
  font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 600; letter-spacing: -.02em;
  color: var(--navy); margin: 0 0 10px;
}
.hero-tagline {
  font: 500 clamp(.95rem, 1.6vw, 1.1rem)/1.4 var(--head); letter-spacing: .12em; text-transform: uppercase;
  color: var(--sky-dark); margin: 0 0 32px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .rating-chip { margin-top: 26px; }
.hero-media { display: block; margin: 0; }
.hero-media img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: calc(var(--radius) + 4px); box-shadow: 0 18px 44px rgba(31, 45, 58, .16);
  border: 8px solid #fff;
}
@media (max-width: 959px) {
  .hero-text { text-align: center; }
  .hero-actions { justify-content: center; }
  .hero-media { max-width: 720px; margin-inline: auto; }
  .hero-media img { border-width: 5px; }
}

/* Sections */
.section { padding: clamp(64px, 9vw, 110px) 0; }
.section-tint { background: var(--tint); }
.section-navy { background: var(--navy); color: #e8eef5; }
.section-navy h2 { color: #fff; }
.eyebrow {
  font: 600 .8rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--sky-dark); margin-bottom: 14px;
}
.section-navy .eyebrow { color: var(--sky); }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 40em; }

/* About */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; } }
.split-media { margin: 0; }
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.split-text p { color: var(--muted); }
.split-text .btn { margin-top: 8px; }

/* Services */
.services { list-style: none; padding: 0; margin: 40px 0; display: grid; gap: 20px; }
@media (min-width: 600px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .services { grid-template-columns: repeat(4, 1fr); } }
.service { background: #fff; border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow); }
.service p { color: var(--muted); margin: 0; font-size: 1rem; }
.service-icon {
  display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px;
  border-radius: 50%; background: rgba(58, 168, 216, .16); color: var(--sky-dark);
}
.service-icon .icon { width: 26px; height: 26px; }
/* Service photos: three slanted panels; the one under the pointer widens.
   --s is how far each slanted edge leans across the panel height. */
.trio {
  --s: 72px; --gap: 8px; --frame: 8px;
  padding: var(--frame); background: #fff;
  border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow);
  touch-action: pan-y; /* sideways drags scrub the panels; vertical still scrolls */
}
.trio-track {
  display: flex; height: clamp(300px, 38vw, 430px);
  border-radius: var(--radius); overflow: hidden;
}
.trio-panel {
  position: relative; margin: 0; min-width: 0;
  flex: 1 1 0; transition: flex-grow .55s cubic-bezier(.2, .8, .2, 1);
  clip-path: polygon(0 0, calc(100% - var(--s)) 0, 100% 100%, var(--s) 100%);
}
.trio-panel + .trio-panel { margin-left: calc(var(--gap) - var(--s)); }
.trio-panel:first-child { clip-path: polygon(0 0, calc(100% - var(--s)) 0, 100% 100%, 0 100%); }
.trio-panel:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--s) 100%); }
.trio-panel img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2, .8, .2, 1); }

/* Label: a solid tag centred near the bottom, readable on any photo.
   Panels after the first lean in at the bottom, so their visible bottom edge
   is shifted right by about half the slant; centre on that, not the box. */
.trio-panel figcaption {
  position: absolute; z-index: 1; bottom: 16px; left: 50%; transform: translateX(-50%);
  padding: .5em .8em .45em; border-radius: 6px;
  background: #fff; color: var(--navy); box-shadow: 0 2px 10px rgba(8, 25, 43, .18);
  font: 700 clamp(.95rem, 1.6vw, 1.15rem)/1 var(--head); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.trio-panel + .trio-panel figcaption { left: calc(50% + var(--s) * .45); }

/* Resting state: middle photo bigger. */
.trio-panel.is-featured { flex-grow: 1.6; }
/* Active state (set by JS on pointer move / touch). */
.trio[data-active] .trio-panel { flex-grow: .7; }
.trio[data-active] .trio-panel.is-active { flex-grow: 2.6; }
.trio-panel.is-active img { transform: scale(1.03); }
/* Shrunk panels are too narrow for a label. */
.trio[data-active] .trio-panel:not(.is-active) figcaption { opacity: 0; transform: translate(-50%, 6px); }
/* Without JS, plain hover still works with a mouse. */
.trio:not(.is-live):hover .trio-panel { flex-grow: .7; }
.trio:not(.is-live) .trio-panel:hover { flex-grow: 2.6; }

.trio-hint { display: none; margin: 12px 0 0; text-align: center; font-size: .85rem; color: var(--muted); }
@media (hover: none) { .trio-hint { display: block; } }

@media (max-width: 639px) {
  .trio { --s: 34px; --gap: 6px; --frame: 6px; }
  .trio-track { height: 320px; }
  .trio-panel figcaption { bottom: 12px; font-size: .9rem; opacity: 0; }
  /* Only label the photo that has room. */
  .trio:not([data-active]) .trio-panel.is-featured figcaption,
  .trio-panel.is-active figcaption { opacity: 1; transform: translateX(-50%); }
}

/* Reviews: a summary tile plus the Google reviews, 3 x 2 on desktop. */
.reviews { display: grid; gap: 20px; margin-top: 36px; }
@media (min-width: 680px) { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.stars { color: #f5b301; letter-spacing: .12em; font-size: 1.1rem; line-height: 1; }

.review {
  margin: 0; padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(31, 45, 58, .04);
  transition: box-shadow .2s, transform .2s;
}
.review:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.review blockquote { margin: 0; flex: 1; position: relative; }
.review blockquote p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink); }
.review figcaption {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.review-avatar {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(58, 168, 216, .16); color: var(--sky-dark);
  font: 600 1rem/1 var(--head);
}
.review-who { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.review-name { font-weight: 600; color: var(--navy); }
.review-where { font-size: .85rem; color: var(--muted); }
.review blockquote p + p { margin-top: .5em; }
.review-note { margin: 18px 0 0; font-size: .9rem; color: var(--muted); max-width: 52em; }
.review-source .icon-google { width: 20px; height: 20px; display: block; }

.review-summary {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 32px 28px; border-radius: var(--radius);
  background: var(--navy); color: #cfdbe8;
}
.review-summary p { margin: 0; }
.review-summary-source {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 999px; background: #fff;
  color: var(--ink); font-size: .85rem; font-weight: 500;
}
.review-summary-source .icon-google { width: 18px; height: 18px; }
.review-summary-score { margin-top: 22px !important; font: 700 4.2rem/1 var(--head); color: #fff; }
.review-summary .stars { margin-top: 10px; font-size: 1.35rem; }
.review-summary-count { margin-top: 8px !important; font-size: .95rem; }
.review-summary-actions { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.review-summary-actions .btn { padding: .8em 1.15em; font-size: .82rem; }

/* Photo gallery */
.gallery-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 32px; }
.gallery-head h2 { margin: 0; }
.ig-handle { display: inline-flex; align-items: center; gap: .45em; color: #fff; font-weight: 500; text-decoration: none; }
.ig-handle:hover { color: var(--sky); }
.ig-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .ig-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (min-width: 980px) { .ig-grid { grid-template-columns: repeat(4, 1fr); } }
.ig-item figure { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--navy-deep); }
.ig-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ig-item figure:hover img { transform: scale(1.04); }
.ig-caption {
  position: absolute; inset: auto 0 0 0; padding: 28px 12px 10px;
  font-size: .85rem; line-height: 1.35; color: #fff;
  background: linear-gradient(transparent, rgba(8, 25, 43, .85));
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s;
}
.ig-item figure:hover .ig-caption { opacity: 1; transform: none; }
@media (hover: none) { .ig-caption { display: none; } }
.gallery-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }

/* Contact */

.contact-form { display: grid; gap: 18px; }
.field-row { display: grid; gap: 18px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field > span { font-weight: 500; font-size: .95rem; }
.field abbr { color: #c0392b; text-decoration: none; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: 12px 14px; border: 1px solid #c4c7cf; border-radius: 6px; background: #fff;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--sky-dark); box-shadow: 0 0 0 3px rgba(58, 168, 216, .3); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #c0392b; }
.contact-form .btn { justify-self: start; }
.contact-form .btn[disabled] { opacity: .6; cursor: progress; }
.form-status { padding: 14px 16px; border-radius: 6px; font-weight: 500; }
.form-status[data-state="ok"] { background: #e3f6ea; color: #1d6b3a; }
.form-status[data-state="error"] { background: #fdecea; color: #a12a1d; }

/* Footer */
.site-footer { background: var(--navy); color: #cfdbe8; text-align: center; padding: 40px 0; font-size: .95rem; }
.site-footer p { margin: 0 0 6px; }
.site-footer strong { color: #fff; }
.site-footer .small { margin-top: 14px; font-size: .85rem; opacity: .75; }


/* Service cards: the whole card is the link. */
.service { position: relative; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.service:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(31, 45, 58, .16); }
.service-link { color: inherit; text-decoration: none; }
.service-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.service-link:focus-visible { outline: none; }
.service:has(.service-link:focus-visible) { outline: 3px solid var(--sky-dark); outline-offset: 2px; }
.service p { flex: 1; }
.service-more { margin-top: 14px; font-weight: 600; font-size: .9rem; color: var(--sky-dark); }

/* ---------------------------------------------------------------------
   Service pages
   --------------------------------------------------------------------- */
.page-hero { padding: 28px 0 clamp(48px, 7vw, 88px); background: linear-gradient(180deg, #fff, var(--tint)); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 28px; font-size: .9rem; color: var(--muted); }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; }
.breadcrumb a { color: var(--muted); }
.page-hero-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 880px) { .page-hero-grid { grid-template-columns: 7fr 5fr; gap: 56px; } }
.page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
.page-hero .lede { color: var(--muted); }
.hero-actions-left { justify-content: flex-start; margin-top: 26px; }
.page-hero-media { margin: 0; }
.page-hero-media img {
  width: 100%; max-height: 520px; object-fit: cover; aspect-ratio: 4 / 5;
  border-radius: var(--radius); box-shadow: var(--shadow); border: 8px solid #fff;
}
@media (max-width: 879px) { .page-hero-media img { aspect-ratio: 4 / 3; max-height: 360px; } }
.rating-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  padding: 8px 14px 8px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  color: var(--ink); font-size: .9rem; text-decoration: none;
}
.rating-chip:hover { border-color: var(--sky-dark); }
.rating-chip .icon-google { width: 18px; height: 18px; }
.rating-chip .stars { font-size: .95rem; }

.detail-grid { display: grid; gap: 48px; }
@media (min-width: 880px) { .detail-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.detail-grid h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.checklist { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.05rem; }
.checklist .icon {
  flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%;
  background: var(--sky); color: var(--navy-deep); stroke-width: 3;
}
.steps { list-style: none; counter-reset: step; padding: 0; margin: 20px 0 0; display: grid; gap: 18px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; }
.steps li::before {
  content: counter(step); grid-row: span 2; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff;
  font: 700 1.1rem/1 var(--head);
}
.steps strong { color: var(--navy); font-size: 1.05rem; }
.steps span { color: var(--muted); }

.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--navy); text-decoration: none; }
.text-link:hover { color: var(--sky-dark); }
.text-link .icon-google { width: 18px; height: 18px; }

.work-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.work-grid li { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.work-grid img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 680px) { .reviews-two { grid-template-columns: repeat(2, 1fr); } }
.reviews-two { margin-top: 0; }
@media (min-width: 1000px) { .reviews-two { grid-template-columns: repeat(2, 1fr); } }

.town-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.town-list li {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px;
  border-radius: 999px; background: var(--tint); color: var(--navy); font-weight: 500; font-size: .95rem;
}
.town-list .icon { width: 16px; height: 16px; color: var(--sky-dark); }

.other-services { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.other-services a {
  display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--muted); font-size: .92rem; line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}
.other-services a:hover { border-color: var(--sky-dark); box-shadow: var(--shadow); }
.other-services strong { display: block; color: var(--navy); font-size: 1rem; margin-bottom: 2px; }
.other-services .service-icon { margin: 0; flex: none; }
.not-found h1 { font-size: clamp(2rem, 4.6vw, 3rem); }
.not-found .other-services { max-width: 640px; margin-bottom: 32px; }

/* Footer with service links and towns */
.site-footer { text-align: left; padding: 48px 0 28px; }
.footer-grid { display: grid; gap: 28px; margin-bottom: 24px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1.3fr; gap: 40px; } }
.site-footer a { color: #fff; }
.footer-heading { color: #fff; font-weight: 600; margin-bottom: 10px !important; }
.footer-links ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-towns { line-height: 1.7; }
.site-footer .small { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 18px; margin: 0; }

/* Before / after pair (service pages and homepage showcase).
   One white frame around both photos, a white divider between them,
   and an arrow badge on the divider pointing from before to after. */
.before-after {
  --frame: 8px;
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--frame);
  padding: var(--frame); background: #fff;
  border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow);
}
.before-after figure { position: relative; margin: 0; overflow: hidden; }
.before-after figure:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.before-after figure:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.before-after img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.before-after::after {
  content: "→"; position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: #fff; border: 4px solid #fff;
  font: 700 1.25rem/1 var(--body); box-shadow: 0 4px 14px rgba(8, 25, 43, .25);
  pointer-events: none;
}
.ba-tag {
  position: absolute; top: 14px; left: 14px; padding: .45em .8em .4em; border-radius: 6px;
  font: 700 .85rem/1 var(--head); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(8, 25, 43, .2);
}
.ba-before { background: #fff; color: var(--navy); }
.ba-after { background: var(--sky); color: var(--navy-deep); }
@media (max-width: 479px) {
  .before-after { --frame: 5px; }
  .before-after::after { width: 36px; height: 36px; border-width: 3px; font-size: 1rem; }
  .ba-tag { top: 8px; left: 8px; font-size: .72rem; }
}

/* Homepage before/after showcase */
.showcase { background: #fff; }
.showcase-head { text-align: center; margin-bottom: 28px; }
.showcase-head h2 { margin-bottom: 22px; }
.showcase-tabs {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  padding: 6px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(31, 45, 58, .05);
}
.showcase-tabs[hidden] { display: none; }
.showcase-tabs button {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink); font: 500 .95rem/1 var(--body); cursor: pointer;
  transition: background .2s, color .2s;
}
.showcase-tabs button:hover { background: var(--tint); }
.showcase-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; }
.showcase-tabs .icon { width: 18px; height: 18px; }
.showcase-panel { max-width: 720px; margin: 0 auto; }
.showcase-panel + .showcase-panel { margin-top: 48px; } /* stacked when JS is off */
.showcase.is-live .showcase-panel + .showcase-panel { margin-top: 0; }
.showcase-panel[hidden] { display: none; }
.showcase.is-live .showcase-panel:not([hidden]) { animation: showcase-in .35s ease; }
@keyframes showcase-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.showcase-caption {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
  margin: 18px 0 0; text-align: center; color: var(--muted);
}
.showcase-caption a { font-weight: 600; color: var(--navy); text-decoration: none; }
.showcase-caption a:hover { color: var(--sky-dark); }
@media (max-width: 559px) {
  .showcase-tabs { border-radius: var(--radius); }
  .showcase-tabs button { padding: 9px 12px; font-size: .88rem; }
}

/* Photo widget: keep the subject in frame when a panel is narrow. */
.trio-panel:nth-child(1) img { object-position: 70% 50%; }
.trio-panel:nth-child(2) img { object-position: 50% 50%; }
.trio-panel:nth-child(3) img { object-position: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .showcase.is-live .showcase-panel:not([hidden]) { animation: none; } }
/* Service pages: keep the pair the same size as on the homepage. */
.ba-section .before-after { max-width: 720px; margin: 0 auto; }
.ba-section .gallery-head { max-width: 720px; margin-left: auto; margin-right: auto; }


/* Contact: details on the left, form in a card on the right */
.contact-layout { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 5fr 6fr; gap: 64px; } }
.contact-intro .lede { color: var(--muted); }
.contact-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 4px; }
.contact-list a {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin: 0 -14px;
  border-radius: var(--radius); text-decoration: none; color: var(--muted); font-size: .95rem; line-height: 1.35;
  transition: background .2s;
}
.contact-list a:hover { background: rgba(255, 255, 255, .7); }
.contact-list strong { display: block; color: var(--navy); font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; }
.contact-list .icon {
  flex: none; width: 42px; height: 42px; padding: 10px; border-radius: 50%;
  background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(31, 45, 58, .1);
}
.form-card {
  background: #fff; border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow);
  padding: clamp(22px, 3.5vw, 36px);
}
.form-card .contact-form .btn { width: 100%; justify-self: stretch; }

/* Phones: keep the page short and easy to scan */
@media (max-width: 679px) {

  /* Service cards: icon beside the text */
  .services { gap: 12px; margin: 28px 0; }
  .service { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 18px; }
  .service .service-icon { grid-row: span 3; width: 44px; height: 44px; margin: 0; }
  .service h3 { margin-bottom: 4px; font-size: 1.2rem; }
  .service p { font-size: .95rem; }
  .service-more { margin-top: 8px; }

  /* Reviews: swipe sideways, next card peeks in */
  .reviews {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 16px; scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .reviews::-webkit-scrollbar { display: none; }
  .reviews > * { flex: 0 0 84%; scroll-snap-align: start; position: relative; }
  .review:hover { transform: none; }
}
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }