@charset "UTF-8";
/* Sash Restorer — sashrestorer.com
   Plain CSS, mobile first. Colours come from the logo and the original one-page site. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --olive: #687E3E;        /* headings, accents */
  --olive-dark: #55692F;   /* links and buttons: darker so small text passes WCAG AA */
  --purple: #7970A5;       /* small accents only */
  --purple-dark: #675E94;  /* hover states */
  --ink: #262626;          /* main headings */
  --text: #636363;         /* body text: #6C6C6C darkened a touch for contrast */
  --light: #9D9D9D;        /* "Sash Restorer" in the lockup, rules */
  --line: #E6E6E6;
  --bg: #F9F9F9;
  --card: #FFFFFF;
  --radius: 6px;
  --wrap: 1120px;
  --narrow: 680px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; } /* links to a spot on the page stop below the header */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
}

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}
h1 { color: var(--ink); font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
h2 { color: var(--olive); font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem); }
h3 { color: var(--ink); font-size: 1.15rem; }

p { margin: 0 0 1.1em; }
strong { color: var(--ink); font-weight: 600; }

a { color: var(--olive-dark); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--purple-dark); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: 8px; top: -60px;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius);
  z-index: 100;
}
.skip-link:focus { top: 8px; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: var(--narrow); margin-left: auto; margin-right: auto; }
.center { text-align: center; }

.section { padding: 56px 0; }
.section + .section { padding-top: 0; }
.section-intro { max-width: var(--narrow); margin: 0 auto 32px; text-align: center; }

/* ---------- Header ----------
   Every page: stays at the top while you scroll, always solid, no animation. position: sticky keeps it in the
   page flow, so content always starts below it. (The home page header is different: see the end of this file.) */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  box-shadow: 0 2px 14px rgba(38, 38, 38, 0.09);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 68px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
.brand img { width: 44px; height: 44px; }
.brand .lockup { font-size: 1rem; }

.lockup { font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.lockup .name { color: var(--ink); }
.lockup .trade { color: var(--light); font-weight: 500; }

.nav-toggle {
  display: none;
  background: none; border: 0; border-radius: var(--radius);
  padding: 10px 0 10px 12px; font: inherit; font-size: 0.95rem; color: var(--ink); cursor: pointer; /* no line around it; lines up with the page edge */
}
.nav-toggle-bars { display: inline-block; width: 18px; height: 12px; position: relative; margin-right: 8px; vertical-align: -1px; }
.nav-toggle-bars::before, .nav-toggle-bars::after, .nav-toggle-bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink); border-radius: 1px;
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars span { top: 5px; }
.nav-toggle-bars::after { bottom: 0; }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-nav a {
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.97rem;
  padding: 6px 0; display: inline-block; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--purple-dark); border-bottom-color: var(--purple); }
.site-nav a[aria-current="page"] { color: var(--olive-dark); border-bottom-color: var(--olive); }

/* Mobile menu: only collapses when JavaScript is running, so the links are never lost.
   It drops down over the page from under the header, so opening it doesn't push the page or change the header's height. */
@media (max-width: 899px) {
  .js .nav-toggle { display: inline-flex; align-items: center; }
  .js .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); padding: 0 var(--gutter); box-shadow: 0 10px 14px rgba(38, 38, 38, 0.09);
  }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 4px 0 14px; }
  .site-nav li { border-top: 1px solid var(--line); }
  .site-nav a { display: block; padding: 12px 0; border-bottom: 0; }
  .site-nav a[aria-current="page"] { border-bottom: 0; }
  /* Without JavaScript the full link list shows in the header, so let it scroll away with the page */
  html:not(.js) .site-header { position: static; }
  html:not(.js) .header-inner { flex-wrap: wrap; }
  html:not(.js) .site-nav { width: 100%; }
}
@media (max-width: 420px) {
  .brand .lockup { font-size: 0.9rem; }
}

/* ---------- Home intro (as on the original site) ---------- */
.intro { text-align: center; padding: 48px 0 40px; }
.intro-logo { width: 240px; height: 240px; margin: 0 auto 20px; }
@media (min-width: 700px) { .intro-logo { width: 320px; height: 320px; } }
.intro .lockup { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); margin: 0 auto; }
.rule { width: 56px; height: 1px; background: var(--light); border: 0; margin: 18px auto 26px; }
.intro h1 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); color: var(--olive); }
.intro p { max-width: 640px; margin-left: auto; margin-right: auto; }

/* Services with small purple ▪ separators */
.dots {
  list-style: none; padding: 0; margin: 22px auto 28px; max-width: 760px;
  text-align: center; text-wrap: balance;
  color: var(--ink); font-weight: 500; font-size: 0.97rem; line-height: 2;
}
.dots li { display: inline; white-space: nowrap; margin: 0 0.7em; }
.dots li::before { /* a purple square bullet in front of every service */
  content: ""; width: 6px; height: 6px; background: var(--purple);
  margin-right: 0.6em; display: inline-block; vertical-align: 0.15em;
}

.actions { display: flex; flex-direction: column; gap: 14px; justify-content: center; align-items: center; } /* button, then "or call" underneath */
.actions .tel { font-weight: 600; color: var(--ink); text-decoration: none; }
.actions .tel:hover { color: var(--purple-dark); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; background: var(--olive-dark); color: #fff;
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.3;
  padding: 14px 24px; border-radius: var(--radius); border: 2px solid var(--olive-dark);
  text-decoration: none; cursor: pointer; text-align: center;
}
.btn:hover { background: var(--purple-dark); border-color: var(--purple-dark); color: #fff; }
.btn-outline { background: transparent; color: var(--olive-dark); }
.btn-outline:hover { background: transparent; color: var(--purple-dark); border-color: var(--purple-dark); }

/* ---------- Banner ---------- */
.banner { max-width: 1600px; margin: 0 auto; }
.banner img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 1100px) { .banner { padding: 0 var(--gutter); } .banner img { border-radius: var(--radius); } }

/* ---------- Cards / key points ---------- */
.points { display: grid; gap: 0; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
@media (min-width: 760px) { .points { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
/* No boxes anywhere: content sits on the page background, divided by thin grey lines */
.card { background: none; border: 0; border-radius: 0; padding: 0; }
/* Key points: no box, just thin grey lines dividing them (stacked on phones; a line above each column on wider screens) */
.points .card { background: none; border: 0; border-radius: 0; padding: 22px 0; }
.points .card + .card { border-top: 1px solid var(--line); }
@media (min-width: 760px) { .points .card { padding: 20px 0 0; border-top: 1px solid var(--line); } }
.card h3 { margin-bottom: 0.4em; }
.card p:last-child { margin-bottom: 0; }

/* ---------- Photo grids ---------- */
.photo-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); list-style: none; padding: 0; margin: 0; }
@media (min-width: 760px) { .photo-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.photo-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: #e9e9e9; }
.photo-grid figure { margin: 0; }
.photo-grid figcaption { font-size: 0.9rem; margin-top: 8px; line-height: 1.45; }
.photo-grid a { display: block; border-radius: var(--radius); }
.photo-grid a:hover img { opacity: 0.92; }
.tag {
  display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--purple-dark); margin-right: 6px;
}

.more { text-align: center; margin-top: 28px; }

/* ---------- Gallery ---------- */
.job { padding: 40px 0; border-top: 1px solid var(--line); }
.job:first-of-type { border-top: 0; padding-top: 8px; }
.job h2 { font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.5rem); margin-bottom: 18px; }
.job .meta { color: var(--light); font-weight: 500; }

/* Lightbox (gallery) */
.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
  width: 100vw; height: 100vh; margin: 0;
}
.lightbox::backdrop { background: rgba(20, 20, 20, 0.9); }
.lightbox-inner { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 12px 16px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: 4px; }
.lightbox p { color: #eee; margin: 12px 0 0; text-align: center; max-width: 640px; font-size: 0.95rem; }
.lightbox button {
  position: absolute; background: rgba(255,255,255,0.12); color: #fff; border: 0; border-radius: var(--radius);
  font: inherit; font-size: 1rem; cursor: pointer; padding: 10px 14px;
}
.lightbox button:hover { background: rgba(255,255,255,0.25); }
.lightbox .lb-close { top: 12px; right: 12px; }
.lightbox .lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 12px; top: 50%; transform: translateY(-50%); }

/* ---------- Page headers ---------- */
.page-head { text-align: center; padding: 48px 0 28px; }
.page-head p { max-width: var(--narrow); margin-left: auto; margin-right: auto; }

/* ---------- Services ---------- */
.services { display: grid; gap: 18px; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
@media (min-width: 760px) { .services { grid-template-columns: repeat(2, 1fr); } }
.price { display: inline-block; margin-top: 4px; font-weight: 600; color: var(--olive-dark); }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 auto; max-width: var(--narrow); }
.steps li { counter-increment: step; position: relative; padding: 0 0 22px 32px; }
.steps li::before {
  content: counter(step) "."; position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; /* just the number, no circle */
  color: var(--purple-dark); font-weight: 600; display: block; font-size: 1.05rem; line-height: inherit;
}

.faq { max-width: var(--narrow); margin: 0 auto; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 18px 36px 18px 0; font-weight: 600; color: var(--ink); list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.15s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding: 0 0 8px; }

/* ---------- Two-column text + photo ---------- */
.split { display: grid; gap: 32px; align-items: start; }
@media (min-width: 860px) { .split { grid-template-columns: 1.2fr 1fr; gap: 48px; } }
.split img { border-radius: var(--radius); width: 100%; }
.split figure { margin: 0; }
.split figcaption { font-size: 0.9rem; margin-top: 8px; }

.facts { list-style: none; padding: 0; margin: 0 0 1.2em; }
.facts li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.facts li:last-child { border-bottom: 0; }

/* ---------- Call to action band ---------- */
.cta {
  border-top: 1px solid var(--line);
  text-align: center; padding: 52px 0;
}
.cta p { max-width: 560px; margin-left: auto; margin-right: auto; }

/* ---------- Contact ---------- */
.contact-layout { display: grid; gap: 40px; max-width: 800px; } /* form first, contact details underneath */
.contact-details { display: grid; gap: 8px 40px; border-top: 1px solid var(--line); padding-top: 28px; }
@media (min-width: 700px) { .contact-details { grid-template-columns: 1fr 1fr; } }
.contact-details h2 { font-size: 1.25rem; }
.contact-details .big { font-size: 1.2rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.contact-details .big:hover { color: var(--purple-dark); }

.form { display: grid; gap: 18px; }
.form .row { display: grid; gap: 18px; }
@media (min-width: 600px) { .form .row { grid-template-columns: 1fr 1fr; } }
.field label, .field legend { display: block; font-weight: 600; color: var(--ink); margin-bottom: 6px; font-size: 0.97rem; }
.field .opt { font-weight: 400; color: var(--text); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid #BDBDBD; border-radius: var(--radius); padding: 12px 14px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--purple); }
.field fieldset { border: 0; padding: 0; margin: 0; }
.radios { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.radios label { font-weight: 400; color: var(--text); display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.radios input { width: 18px; height: 18px; accent-color: var(--olive-dark); }
.hp { display: none !important; }
.form-note { font-size: 0.92rem; margin: 0; }
.form-status { border-radius: var(--radius); padding: 18px 20px; }
.form-status:empty { display: none; }
.form-status.ok { background: #F1F4EA; border: 1px solid #C9D3B4; color: var(--ink); }
.form-status.error { background: #F6F3FA; border: 1px solid #CFC9E3; color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 44px 0 28px; font-size: 0.95rem; margin-top: 56px; }
.cta + .site-footer { margin-top: 0; }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.1fr 1.1fr 1.2fr 0.9fr; } }
.site-footer h2 { font-size: 1rem; color: var(--ink); margin-bottom: 0.5em; }
.site-footer p { margin-bottom: 0.6em; }
.site-footer .lockup { font-size: 1.05rem; margin-bottom: 8px; }
.badges { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.badge-slot { min-width: 1px; } /* reserved for the City & Guilds Qualified logo when Frank supplies it */
.footer-bottom { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: 0.9rem; }

.services h2 { font-size: 1.15rem; color: var(--ink); margin-bottom: 0.4em; }

/* ---------- Home: linked services list ---------- */
.dots a { color: inherit; text-decoration: none; }
.dots a:hover { color: var(--purple-dark); text-decoration: underline; }
.intro .actions + .dots { margin-top: 30px; margin-bottom: 0; }

/* ---------- Breadcrumbs ---------- */
.breadcrumb { padding-top: 18px; font-size: 0.9rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.breadcrumb li + li::before { content: "\203A"; color: var(--light); margin: 0 8px; }
.breadcrumb a { color: var(--text); }
.breadcrumb a:hover { color: var(--purple-dark); }
.breadcrumb [aria-current="page"] { color: var(--ink); }
.breadcrumb + .page-head { padding-top: 24px; }
.breadcrumb + .svc-hero { padding-top: 28px; }

/* ---------- Service cards ---------- */
.svc-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .svc-cards { grid-template-columns: repeat(3, 1fr); } }
.svc-card {
  position: relative; border-top: 1px solid var(--line); padding-top: 20px;
  display: flex; flex-direction: column;
}
.svc-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #e9e9e9; border-radius: var(--radius); }
.svc-card-body { padding: 16px 0 4px; }
.svc-card h2, .svc-card h3 { font-size: 1.1rem; color: var(--ink); margin: 0 0 0.4em; }
.svc-card h2 a, .svc-card h3 a { color: inherit; text-decoration: none; }
.svc-card h2 a::after, .svc-card h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card is the link */
.svc-card:hover h2, .svc-card:hover h3 { color: var(--purple-dark); }
.svc-card:focus-within { outline: 3px solid var(--purple); outline-offset: 2px; }
.svc-card a:focus-visible { outline: none; }
.svc-card p { font-size: 0.97rem; margin-bottom: 0.5em; }
.svc-card .price { margin-top: 0; }

/* ---------- Service page ---------- */
.svc-hero .lead { font-size: 1.12rem; color: var(--ink); }
.price-big { color: var(--olive-dark); font-size: 1.1rem; }
.actions-left { align-items: flex-start; margin-top: 8px; }
.svc-figure { margin: 0; }
.svc-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.svc-figure figcaption { font-size: 0.9rem; margin-top: 8px; }

/* ---------- Footer services list ---------- */
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 4px; }

/* ---------- Terms of Business ---------- */
.terms section { scroll-margin-top: 16px; padding-top: 8px; }
.terms h2 { font-size: 1.2rem; color: var(--ink); margin: 1.6em 0 0.6em; padding-top: 1em; border-top: 1px solid var(--line); }
.terms p { margin-bottom: 0.9em; }
.clause-no { font-weight: 600; color: var(--olive-dark); margin-right: 4px; }
.terms-contents { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.terms-contents summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--ink); }
.terms-contents ol { list-style: none; padding: 0 0 14px; margin: 0; columns: 2 240px; column-gap: 24px; }
.terms-contents li { padding: 3px 0; break-inside: avoid; }

/* ---------- Contact form: photos ---------- */
.photos legend { margin-bottom: 10px; }
.photo-slots { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .photo-slots { grid-template-columns: 1fr 1fr; } }
.photo-slot { display: block; font-weight: 400; font-size: 0.92rem; color: var(--text); }
.photo-slot input { display: block; margin-top: 4px; max-width: 100%; font-size: 0.9rem; }
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  border: 2px dashed #C9C3DD; border-radius: 8px; background: #FCFCFD; padding: 24px 16px; cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--purple); background: #F6F4FA; }
.dropzone.is-full { opacity: 0.55; cursor: default; }
.dz-icon { width: 34px; height: 34px; fill: none; stroke: var(--purple); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dz-drag { margin: 0; color: var(--ink); font-weight: 500; }
.dz-hint { margin: 0; font-size: 0.9rem; }
.dz-button { padding: 10px 20px; font-size: 0.95rem; }
#photo-add:focus-visible + .dz-button { outline: 3px solid var(--purple); outline-offset: 2px; }
#photo-add:disabled + .dz-button { opacity: 0.6; pointer-events: none; }
@media (hover: none) { .dz-drag { display: none; } } /* phones and tablets: no dragging, just the button */
.photo-previews { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 600px) { .photo-previews { grid-template-columns: repeat(5, 1fr); } }
.photo-preview { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; }
.photo-preview img, .photo-noprev {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: #eee;
}
.photo-noprev { display: grid; place-items: center; padding: 4px; text-align: center; word-break: break-all; font-size: 0.7rem; }
.photo-size { color: var(--text); }
.photo-remove {
  font: inherit; font-size: 0.8rem; color: var(--olive-dark); background: none; border: 1px solid var(--line);
  border-radius: 4px; padding: 4px 6px; cursor: pointer;
}
.photo-remove:hover { color: var(--purple-dark); border-color: var(--purple); }
.photo-msg { font-size: 0.92rem; color: var(--ink); margin: 6px 0 0; }
.photo-msg:empty { display: none; }
.photos .form-note { margin-top: 12px; }
.thanks { padding-bottom: 40px; }


/* Service card with no photo yet (draught proofing): the logo on a soft background */
.svc-card-noimg { aspect-ratio: 4 / 5; display: grid; place-items: center; background: #F1EFF6; border-radius: var(--radius); }
.svc-card-noimg img { width: 110px; height: 110px; aspect-ratio: auto; object-fit: contain; background: none; border-radius: 0; }

/* Service page: "More photos" (centred, so one or two photos don't sit off to one side) */
.svc-photos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.svc-photos li { width: calc(50% - 8px); }
@media (min-width: 760px) { .svc-photos li { width: calc(33.333% - 11px); } }
.svc-photos figure { margin: 0; }
.svc-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: #e9e9e9; }
.svc-photos figcaption { font-size: 0.9rem; margin-top: 8px; line-height: 1.45; }

/* ---------- Home page header (like restorer.com) ----------
   Fixed to the top over the page. With JavaScript it starts transparent with only the menu showing, then main.js
   adds .is-solid once you're about halfway past the logo, name and headline. Without JavaScript it is simply solid.
   Only colours, shadow and opacity change, so nothing on the page moves. */
.site-header--home {
  position: fixed; left: 0; right: 0;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header--home .brand { transition: opacity 0.2s ease, visibility 0s linear 0s; }
.js .site-header--home:not(.is-solid):not(.menu-open) { background: transparent; box-shadow: none; }
.js .site-header--home:not(.is-solid):not(.menu-open) .brand {
  opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.js .site-header--home + main .intro { padding-top: calc(68px + 16px); } /* room for the fixed header */
@media (min-width: 900px) { .site-header--home + main .intro { padding-top: calc(68px + 16px); } }
@media (prefers-reduced-motion: reduce) {
  .site-header--home, .site-header--home .brand,
  .js .site-header--home:not(.is-solid):not(.menu-open) .brand { transition: none; }
}

/* Home: "Listed on Restorer.com" badge in a full-width white band exactly the badge's height (57px) */
.badge-band { background: #fff; height: 57px; display: flex; justify-content: center; align-items: center; }
.send-note { margin-top: 10px; color: var(--ink); }
.send-note:empty { display: none; }

/* Listed & Heritage: show the whole doorcase photo, pediment included (no portrait crop) */
.svc-figure--full img { aspect-ratio: auto; }

/* Painted sashes photo: crop lower so the bottom of the sash isn't cut off */
img[src*="sash-paint-finished"] { object-position: 50% 85%; }

/* Doorcase pilaster photo: crop lower to show the splice and resin repair at the base */
img[src*="wood-rot-repair-doorcase"] { object-position: 50% 100%; }

/* Spliced rail photo: crop further left to show the joint of the new section */
img[src*="wood-rot-repair-spliced-rail"] { object-position: 12% 50%; }

/* New cill photo: crop lower so more of the cill shows */
img[src*="window-cill-repair-new-cill"] { object-position: 50% 100%; }

/* ---------- Site map ---------- */
.sitemap h2 { margin-top: 1.6em; }
.sitemap h2:first-child { margin-top: 0; }
.sitemap ul { list-style: none; padding: 0; margin: 0 0 8px; border-top: 1px solid var(--line); }
.sitemap li { border-bottom: 1px solid var(--line); }
.sitemap li a { display: block; padding: 10px 0; }

/* ---------- Step-by-step strip: always three across ---------- */
.svc-photos.photo-steps { gap: 8px; }
.svc-photos.photo-steps li { width: calc(33.333% - 6px); }
@media (min-width: 760px) { .svc-photos.photo-steps { gap: 16px; } .svc-photos.photo-steps li { width: calc(33.333% - 11px); } }

/* ---------- Email address protection ----------
   Decoy characters hidden from readers (and left out when copying); see js/email.js. */
.e-x { display: none !important; }
a.email:not([href]) { color: inherit; text-decoration: none; }

/* ---------- Home: Google reviews carousel ----------
   CSS scroll-snap; main.js adds the arrow buttons and arrow keys. Without JS the track simply scrolls sideways.
   One review on phones, two on tablets, three on desktop, with the next one peeking in. No boxes: thin lines between slides. */
.reviews h2 { margin-bottom: 28px; }
.carousel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; }
.carousel-track {
  grid-column: 1 / -1; grid-row: 1;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 8px; /* room for the scrollbar without JS */
}
.carousel-track:focus-visible { outline: 2px solid var(--olive-dark); outline-offset: 4px; border-radius: var(--radius); }
.js .carousel-track { scrollbar-width: none; padding-bottom: 0; }
.js .carousel-track::-webkit-scrollbar { display: none; }
.carousel-list { display: flex; list-style: none; margin: 0; padding: 0; } /* flex rows stretch, so every slide is as tall as the longest */
.review {
  flex: 0 0 85%; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 4px 28px; text-align: center;
}
.review + .review { border-left: 1px solid var(--line); }
@media (min-width: 600px) { .review { flex-basis: 44%; } }
@media (min-width: 900px) { .review { flex-basis: 30%; padding: 4px 32px; } }
.review-stars { display: flex; gap: 3px; justify-content: center; color: var(--purple); margin: 0 0 14px; }
.review-text { margin: 0 0 14px; }
.review-text p { margin: 0; }
.review-by { margin: 0; font-size: 0.875rem; color: var(--light); }
.carousel-btn { display: none; }
.js .carousel-btn {
  display: inline-flex; align-items: center; justify-content: center; grid-row: 2;
  width: 44px; height: 44px; padding: 0 0 3px; border: 1px solid var(--line); border-radius: 50%;
  background: none; color: var(--olive-dark); font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.js .carousel-prev { justify-self: end; }
.js .carousel-next { justify-self: start; }
.carousel-btn:hover { color: var(--purple-dark); border-color: var(--purple); }
.carousel-btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.carousel-btn[aria-disabled="true"]:hover { color: var(--olive-dark); border-color: var(--line); }
.reviews-actions { margin-top: 32px; }
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } }
img[src*="glass-putty-new-putty-going-in"] { object-position: 35% 50%; } /* landscape photo in portrait frames: keep the putty line and glass in view */
img[src*="paint-stripped-bare-timber"] { object-position: 50% 22%; } /* keep the top sash in frame */