@font-face { font-family: "Young Serif"; src: url("/fonts/young-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
/* Sheffield Kitchen Worktops JPT – palette taken from the stone */
:root {
  --slab: #F3F2EE;      /* honed pale stone – page (slightly warm) */
  --quartz: #FFFFFF;    /* white quartz – cards */
  --basalt: #1C2124;    /* dark granite – ink & header */
  --vein: #5D666C;      /* grey veining – secondary text (passes WCAG AA) */
  --mist: #E5E4DF;      /* rules, fills */
  --verde:#5B2D86;     /* JPT purple – the one action colour */
  --verde-dark:#47216A;
  --edge: #CDCCC5;      /* polished edge highlight */
  --hivis: #E4F222;     /* JPT hi-vis yellow – used sparingly */
  --measure: 70ch;
  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--slab); color: var(--basalt); font: 400 1.0625rem/1.65 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--verde); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--verde-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: .5rem; background: var(--quartz); padding: .5rem 1rem; z-index: 50; }
.skip:focus { left: .5rem; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* ---------- Top bar ---------- */
.topbar { background: var(--basalt); color: #AEB6B2; font-size: .88rem; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.4rem; }
.topbar p { margin: 0; }
.tb-links { display: flex; gap: 1.4rem; }
.tb-links a { color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap; }
.tb-links a:hover { text-decoration: underline; }

/* ---------- Header: white, with a polished stone edge ---------- */
.slab { background: var(--quartz); color: var(--basalt); position: relative; z-index: 20; border-bottom: 1px solid var(--edge); }
.slab::after { /* polished front edge */ content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px;
  background: linear-gradient(180deg, #D9DEDA, #F7F8F6); pointer-events: none; }
.bar { max-width: 1200px; margin: 0 auto; padding: .9rem 1rem; display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: .9rem; color: inherit; text-decoration: none; }
.logo { height: 52px; width: auto; max-width: 190px; object-fit: contain; }
.mark { display: none; font: 1.15rem/1 var(--serif); letter-spacing: .02em; padding: .5rem .55rem .45rem; border: 1.5px solid var(--basalt); border-radius: 3px; }
.brand.nologo .mark { display: inline-block; }
.name { font: 1.25rem/1.15 var(--serif); }
.name small { display: block; font: 500 .82rem/1.3 var(--sans); color: var(--vein); margin-top: .2rem; }
.actions { display: flex; align-items: center; gap: .75rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; background: var(--verde); color: #fff; font: 600 1rem/1 var(--sans); padding: .85rem 1.25rem;
  border-radius: 4px; text-decoration: none; border: 2px solid var(--verde); cursor: pointer; text-align: center; transition: background-color .15s, color .15s; }
.btn:hover { background: var(--verde-dark); border-color: var(--verde-dark); color: #fff; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--verde); }
.btn.ghost:hover { background: var(--verde); color: #fff; }

.menu-toggle { display: none; background: transparent; color: var(--basalt); border: 1.5px solid var(--edge); border-radius: 4px;
  font: 600 .95rem var(--sans); padding: .6rem .85rem; cursor: pointer; }

/* Navigation */
.site-nav { max-width: 1200px; margin: 0 auto; padding: 0 1rem; border-top: 1px solid var(--mist); }
.site-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem; }
.site-nav .top > a, .site-nav summary { display: block; color: #33393D; text-decoration: none; font-weight: 600; font-size: .97rem;
  padding: .8rem .8rem .75rem; cursor: pointer; list-style: none; border-bottom: 3px solid transparent; }
.site-nav summary::-webkit-details-marker { display: none; }
.site-nav summary::after { content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .45em; vertical-align: .2em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.site-nav .top.on > a, .site-nav .top.on summary { color: var(--verde); border-bottom-color: var(--verde); }
.site-nav .top > a:hover, .site-nav summary:hover { color: var(--verde); }
.site-nav details { position: relative; }
.panel { position: absolute; left: 0; top: calc(100% + 1px); display: flex; gap: 0; min-width: 270px; max-height: 78vh; overflow: auto;
  padding: .7rem 0; background: var(--quartz); color: var(--basalt); border: 1px solid var(--edge); border-top: 3px solid var(--verde);
  box-shadow: 0 18px 40px -16px rgba(28, 33, 36, .35); }
.panel.wide { min-width: 540px; }
.top:nth-last-child(-n+3) .panel { left: auto; right: 0; }
.panel .col { flex: 1 1 0; min-width: 250px; }
.panel .col + .col { border-left: 1px solid var(--mist); }
.col-h { margin: .2rem 1.1rem .4rem; font: 400 1rem/1.3 var(--serif); color: var(--vein); }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel a { display: block; padding: .42rem 1.1rem; color: var(--basalt); text-decoration: none; font-size: .95rem; line-height: 1.35; }
.panel a:hover { background: var(--slab); color: var(--verde-dark); }
.panel a[aria-current] { color: var(--verde); font-weight: 600; box-shadow: inset 3px 0 0 var(--verde); }

/* ---------- Inner page title band ---------- */
.pagehead { background: var(--mist); border-bottom: 1px solid var(--edge); }
.pagehead .wrap { padding-top: .2rem; padding-bottom: 2.1rem; }
.pagehead h1 { font: 400 clamp(2rem, 4.2vw, 3rem)/1.1 var(--serif); margin: .9rem 0 0; letter-spacing: -.01em; text-wrap: balance; max-width: 30ch; }

/* ---------- Hero (home) ---------- */
.hero { position: relative; min-height: min(70vh, 640px); display: flex; align-items: flex-end; background: var(--basalt); overflow: hidden; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(28,33,36,0) 25%, rgba(28,33,36,.55) 60%, rgba(28,33,36,.92) 100%); }
.hero-text { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 6rem 1rem 2.6rem; color: #fff; }
.hero h1 { font: 400 clamp(2rem, 4.4vw, 3.3rem)/1.08 var(--serif); margin: 0 0 1rem; max-width: 26ch; text-wrap: balance; letter-spacing: -.01em; }
.hero p { max-width: 52ch; font-size: 1.12rem; margin: 0 0 1.4rem; color: #E7EBE8; }
.hero .cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }
.btn.light { background: rgba(255,255,255,.08); border-color: #E7EBE8; color: #fff; }
.btn.light:hover { background: #fff; color: var(--basalt); border-color: #fff; }

/* ---------- Main layout ---------- */
main { max-width: 1200px; margin: 0 auto; padding: 0 1rem 4rem; }
.crumbs ol { list-style: none; margin: 0; padding: 1.1rem 0 0; display: flex; flex-wrap: wrap; font-size: .9rem; color: var(--vein); }
.crumbs li + li::before { content: "/"; margin: 0 .55rem; color: #A8AFAB; }
.crumbs a { color: var(--vein); }
.crumbs [aria-current] { color: var(--basalt); font-weight: 500; }
.layout { display: grid; gap: 3.5rem; padding-top: 2.2rem; }
.layout.with-aside { grid-template-columns: minmax(0, var(--measure)) minmax(260px, 320px); justify-content: space-between; }

/* Prose */
.prose { max-width: var(--measure); min-width: 0; }
.prose h1 { font: 400 clamp(2rem, 4.2vw, 3.1rem)/1.1 var(--serif); margin: .4rem 0 1.4rem; letter-spacing: -.01em; text-wrap: balance; }
.prose h2 { font: 400 1.7rem/1.2 var(--serif); margin: 2.6rem 0 .8rem; text-wrap: balance; }
.prose > :first-child, .prose > .single:first-child, .prose > .gallery:first-child { margin-top: 0; }
.prose h3 { font: 700 1.2rem/1.3 var(--sans); margin: 2rem 0 .5rem; }
.prose h4 { font: 700 1.05rem/1.3 var(--sans); margin: 1.6rem 0 .4rem; color: #3F474C; }
.prose p, .prose ul, .prose ol { margin: 0 0 1rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin: .3rem 0; }
.prose li::marker { color: var(--vein); }
.prose strong { font-weight: 700; }
.prose em { color: var(--vein); }
.prose a.tel { font-weight: 700; white-space: nowrap; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.6rem; background: var(--quartz); font-size: .97rem; }
.prose th, .prose td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--mist); vertical-align: top; }
.prose thead th { background: var(--basalt); color: var(--slab); font-weight: 600; }
.prose td:first-child { font-weight: 500; }
.prose hr { border: 0; border-top: 1px solid var(--edge); margin: 2rem 0; }

/* Images */
.single, .gallery { margin: 1.4rem 0 1.8rem; }
figure { margin: 0; }
figure img { width: 100%; border-radius: 3px; background: var(--mist); }
.gallery { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); }
.gallery.n3 { grid-template-columns: repeat(3, 1fr); }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
figcaption { font: 400 .95rem/1.4 var(--serif); color: #3F474C; padding: .45rem 0 0; }
.video, .map { position: relative; aspect-ratio: 16 / 9; margin: 1.6rem 0; background: var(--basalt); border-radius: 3px; overflow: hidden; }
.map { aspect-ratio: 4 / 3; max-height: 420px; width: 100%; }
.video iframe, .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* In this section */
.in-section { margin-top: 3.2rem; border-top: 1px solid var(--edge); padding-top: .4rem; }
.in-section h2 { font-size: 1.35rem; margin-top: 1.2rem; }
.in-section ul { list-style: none; padding: 0; margin: 0; }
.in-section li { padding: .7rem 0; border-bottom: 1px solid var(--mist); }
.in-section a { font-weight: 600; }
.in-section span { display: block; color: var(--vein); font-size: .93rem; line-height: 1.45; margin-top: .15rem; }

/* Quote card */
.card { position: sticky; top: 1.2rem; align-self: start; margin-top: .6rem; background: var(--quartz); padding: 1.4rem 1.3rem 1.2rem;
  border-radius: 4px; border-top: 4px solid var(--verde); }
.card h2 { font: 400 1.35rem/1.2 var(--serif); margin: 0 0 .6rem; }
.card p { margin: 0 0 1rem; font-size: .97rem; color: #3F474C; }
.card .btn { display: block; margin-bottom: .55rem; }
.card .small { display: block; text-align: center; font-size: .9rem; margin-top: .3rem; }
.card hr { border: 0; border-top: 1px solid var(--mist); margin: 1.1rem 0 .9rem; }
.card .offcut { margin: 0; font-size: .93rem; }

/* Quote form */
.quote { background: var(--quartz); padding: 1.3rem; border-radius: 4px; margin: 1.4rem 0 2rem; border-top: 4px solid var(--verde); }
.quote .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.quote label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: .9rem; }
.quote input, .quote select, .quote textarea { display: block; width: 100%; margin-top: .3rem; font: 400 1rem/1.4 var(--sans); color: var(--basalt);
  background: var(--slab); border: 1.5px solid #C3C9C5; border-radius: 4px; padding: .65rem .7rem; }
.quote input:focus, .quote select:focus, .quote textarea:focus { border-color: var(--verde); outline: 2px solid color-mix(in srgb, var(--verde) 25%, transparent); }
.quote .hp { position: absolute; left: -9999px; }
.quote .btn { margin-top: .2rem; }
.form-note { font-size: .92rem; color: var(--vein); margin: .8rem 0 0; }
.form-note.ok { color: var(--verde); font-weight: 600; }
.form-note.err { color: #9B2C1F; font-weight: 600; }

.sitemap ul { list-style: none; padding-left: 0; }
.sitemap ul ul { padding-left: 1.2rem; border-left: 1px solid var(--edge); margin: .2rem 0 .4rem .3rem; }

/* Footer */
.foot { background: var(--basalt); color: #C3CAC6; padding: 3.5rem 1rem 2.5rem; font-size: .95rem; }
.foot .cols { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.2rem; }
.f-brand p { max-width: 36ch; }
.foot a { color: #E7EBE8; }
.foot ul { list-style: none; padding: 0; margin: 0; line-height: 1.9; }
.fname { font: 400 1.1rem var(--serif); color: #fff; margin: 0 0 .6rem; }
.legal { max-width: 1200px; margin: 2.5rem auto 0; padding-top: 1rem; border-top: 1px solid #353D41; color: #8E9792; font-size: .88rem; }

/* Mobile dock */
.dock { display: none; }

@media (max-width: 1000px) {
  .layout.with-aside { grid-template-columns: 1fr; }
  .card { position: static; margin-top: 0; max-width: var(--measure); }
}
@media (max-width: 860px) {
  .menu-toggle { display: inline-block; }
  .actions .btn { display: none; }
  .topbar p:first-child { display: none; }
  .topbar .wrap { justify-content: center; }
  .logo { height: 42px; }
  .site-nav { display: none; padding-bottom: 1rem; }
  .site-nav.open { display: block; }
  .site-nav > ul { flex-direction: column; }
  .site-nav .top > a, .site-nav summary { padding: .8rem .2rem; border-bottom: 1px solid var(--mist); }
  .foot { padding-bottom: 6rem; }
  .panel, .panel.wide { position: static; display: block; min-width: 0; box-shadow: none; max-height: none; border-radius: 4px; margin: .3rem 0 .6rem; }
  .panel .col + .col { border-left: 0; border-top: 1px solid var(--mist); padding-top: .5rem; margin-top: .4rem; }
  .dock { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--basalt); border-top: 2px solid var(--edge); padding-bottom: env(safe-area-inset-bottom); }
  .dock a { color: #fff; text-align: center; padding: 1rem .5rem; font-weight: 700; text-decoration: none; }
  .dock a + a { background: var(--verde); }
  .foot .cols { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
  .quote .row { grid-template-columns: 1fr; }
  .gallery.n3 { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height: 72vh; }
  .hero-text { padding-bottom: 2rem; }
}
@media (max-width: 420px) {
  .name { font-size: 1rem; }
  .name small { display: none; }
  .gallery { grid-template-columns: 1fr 1fr; gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media print { .slab, .dock, .card, .foot, .crumbs { display: none; } }

.btn.wa::before { content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .5em; vertical-align: -.17em;
  background: currentColor; -webkit-mask: url("/assets/whatsapp.svg") center / contain no-repeat; mask: url("/assets/whatsapp.svg") center / contain no-repeat; }
.form-intro { margin: 0 0 1rem; color: #3F474C; font-size: .97rem; }

/* ---------- Trust strip ---------- */
.trust { background: var(--quartz); border-bottom: 1px solid var(--edge); }
.trust ul { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 1.3rem; padding-bottom: 1.3rem; }
.trust li { padding: 0 1.2rem; border-left: 1px solid var(--mist); font-size: .93rem; color: var(--vein); line-height: 1.4; }
.trust li:first-child { border-left: 0; padding-left: 0; }
.trust strong { display: block; font: 400 1.1rem/1.25 var(--serif); color: var(--basalt); margin-bottom: .2rem; }

/* ---------- Homepage ---------- */
.home-main { max-width: none; padding: 0; }
.home-main > section { padding-top: 4.2rem; padding-bottom: 0; }
.home-main h2 { font: 400 clamp(1.7rem, 3vw, 2.2rem)/1.15 var(--serif); margin: 0 0 1.4rem; text-wrap: balance; }
.h-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 3.5rem; align-items: start; }
.h-intro p { max-width: 62ch; }
.more { font-weight: 600; }
.h-prices { background: var(--quartz); border-top: 4px solid var(--verde); border-radius: 4px; padding: 1.4rem 1.4rem 1.1rem; }
.h-prices h3 { font: 400 1.35rem var(--serif); margin: 0 0 .8rem; }
.h-prices dl { margin: 0 0 1rem; }
.h-prices dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--mist); }
.h-prices dt { font-weight: 600; }
.h-prices dd { margin: 0; color: #3F474C; text-align: right; }
.h-prices p { margin: 0; font-size: .95rem; color: var(--vein); }

.h-services { margin-top: 4.2rem; padding-bottom: 4.2rem !important; background: var(--quartz); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
.tile { display: block; color: var(--basalt); text-decoration: none; }
.tile-img { display: block; overflow: hidden; border-radius: 3px; background: var(--mist); aspect-ratio: 4 / 3; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tile:hover .tile-img img { transform: scale(1.03); }
.tile-title { display: block; font: 400 1.3rem/1.25 var(--serif); margin: .9rem 0 .3rem; }
.tile:hover .tile-title { color: var(--verde); text-decoration: underline; text-underline-offset: .18em; }
.tile-text { display: block; color: var(--vein); font-size: .97rem; line-height: 1.5; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; counter-reset: step; }
.steps li { counter-increment: step; border-top: 2px solid var(--basalt); padding-top: 1rem; }
.steps li::before { content: counter(step); display: block; font: 400 2rem/1 var(--serif); color: var(--verde); margin-bottom: .6rem; }
.steps strong { display: block; font-size: 1.05rem; margin-bottom: .3rem; }
.steps span { color: var(--vein); font-size: .95rem; line-height: 1.5; }

.h-work .gallery { margin: 0 0 1.5rem; }
.h-work .video { margin: 0; }

.h-areas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.h-areas p { max-width: 52ch; }
.area-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
.area-list li { break-inside: avoid; border-bottom: 1px solid var(--edge); }
.area-list a { display: block; padding: .7rem 0; font-weight: 600; text-decoration: none; color: var(--basalt); }
.area-list a:hover { color: var(--verde); }

.h-offcuts { margin-top: 4.2rem; padding-bottom: 3.2rem !important; padding-top: 3.2rem !important; background: var(--basalt); color: #D5DAD7; }
.h-offcuts .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.h-offcuts h2 { color: #fff; margin-bottom: .6rem !important; }
.h-offcuts p { margin: 0; max-width: 60ch; }

/* ---------- Closing call-to-action band ---------- */
.cta-band { background: var(--quartz); border-top: 1px solid var(--edge); }
.home-main + .cta-band { border-top: 0; }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-top: 2.8rem; padding-bottom: 2.8rem; }
.cta-band h2 { font: 400 1.8rem/1.2 var(--serif); margin: 0 0 .4rem; }
.cta-band p { margin: 0; color: #3F474C; max-width: 58ch; }
.cta-band .cta { display: flex; gap: .7rem; flex-wrap: wrap; flex-shrink: 0; }

@media (max-width: 1000px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .h-intro, .h-areas { grid-template-columns: 1fr; gap: 2rem; }
  .trust ul { grid-template-columns: repeat(2, 1fr); row-gap: 1rem; }
  .trust li:nth-child(3) { border-left: 0; padding-left: 0; }
  .h-offcuts .wrap, .cta-band .wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 1rem; }
  .area-list { columns: 1; }
  .trust li { padding: 0 .8rem; }
  .home-main > section { padding-top: 3rem; }
}

/* ---------- Worktop quote booking ---------- */
.booking { background: var(--quartz); border: 1px solid var(--edge); border-left: 4px solid var(--verde); border-radius: 4px; padding: 1.5rem 1.5rem 1.3rem; margin: 2rem 0 2.4rem; scroll-margin-top: 1rem; }
.booking h2 { margin-top: 0 !important; }
.booking .book-steps { list-style: none; margin: 1.2rem 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: bk; }
.book-steps li { counter-increment: bk; border-top: 2px solid var(--basalt); padding-top: .7rem; margin: 0; }
.book-steps li::before { content: counter(bk); display: block; font: 400 1.5rem/1 var(--serif); color: var(--verde); margin-bottom: .4rem; }
.book-steps strong { display: block; margin-bottom: .2rem; }
.book-steps span { color: var(--vein); font-size: .95rem; line-height: 1.45; display: block; }
.book-note { background: #FFF7E0; border: 1px solid #E8D8A6; border-radius: 4px; padding: .8rem 1rem; font-size: .95rem; color: #4A4229; }
.book-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 !important; }
.book-cta span { color: var(--vein); font-size: .9rem; }
@media (max-width: 560px) { .book-steps { grid-template-columns: 1fr; } }

/* ---------- On this page ---------- */
.onpage { background: var(--quartz); border: 1px solid var(--edge); border-radius: 4px; padding: 1rem 1.2rem .8rem; margin: 1.6rem 0 1rem; }
.onpage p { margin: 0 0 .5rem !important; font: 400 1.05rem var(--serif); }
.prose .onpage ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; font-size: .95rem; }
.prose .onpage li { margin: .2rem 0; break-inside: avoid; }
.prose .onpage li::marker { color: var(--verde); }
.prose h2[id] { scroll-margin-top: 1rem; }

/* ---------- Homepage FAQ ---------- */
.faq { max-width: 860px; border-top: 1px solid var(--edge); }
.faq details { border-bottom: 1px solid var(--edge); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2.2rem 1rem 0; font-weight: 600; font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .3rem; top: .75rem; font: 400 1.5rem/1 var(--sans); color: var(--verde); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0 0 1.1rem; color: #3F474C; max-width: 70ch; }
@media (max-width: 560px) { .prose .onpage ol { columns: 1; } }

/* ---------- Hi-vis accent (offcuts only) ---------- */
.badge { display: inline-block; background: var(--hivis); color: var(--basalt); font: 700 .78rem/1 var(--sans); letter-spacing: .02em;
  padding: .35rem .55rem; border-radius: 3px; vertical-align: .35em; margin-left: .5rem; }
.h-offcuts { border-top: 4px solid var(--hivis); }
.card .offcut strong { background: var(--hivis); color: var(--basalt); padding: .05rem .35rem; border-radius: 2px; }

/* ---- Small-phone fixes (iPhone SE etc.): nothing may push the page sideways ---- */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
img, video, iframe, svg { max-width: 100%; }
.foot .cols > *, .layout > *, .tiles > *, .steps > *, .book-steps > *, .h-intro > *, .h-areas > * { min-width: 0; }
.prose a, .card a, .book-steps, .prose p, .prose li { overflow-wrap: anywhere; }
.foot a { overflow-wrap: break-word; }
@media (min-width: 861px) { .foot .cols { grid-template-columns: 1.35fr 1.3fr 1fr 1fr; } }
@media (max-width: 860px) {
  .foot .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem 1.2rem; }
}
@media (max-width: 400px) {
  .foot .cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: .9rem; }
  .prose th, .prose td { padding: .5rem .55rem; }
}
@supports (min-height: 1svh) {
  @media (max-width: 860px) { .hero { min-height: 72svh; } }
}

/* Google rating */
.stars { color: #E2A100; letter-spacing: .05em; }
.trust .stars { font-size: .95em; }
.trust li a { color: var(--vein); }
.card .rating { margin: -.2rem 0 .9rem; font-size: .93rem; }
.card .rating a { color: var(--basalt); text-decoration: none; }
.card .rating a:hover { text-decoration: underline; }

/* Customer reviews */
.reviews { margin: 3.5rem 0; }
.prose .reviews { margin: 2.5rem 0; }
.rv-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.rv-head h2, .rv-head h3 { margin: 0; }
.rv-head p { margin: 0; }
.rv-head a { color: var(--basalt); text-decoration: none; }
.rv-grid { columns: 3 300px; column-gap: 1.2rem; }
.prose .rv-grid { columns: 2 260px; }
.rv { break-inside: avoid; margin: 0 0 1.2rem; background: var(--quartz); border: 1px solid var(--mist); border-radius: 6px; overflow: hidden; display: block; }
.rv-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.rv-img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.rv blockquote { margin: 0; padding: 1.1rem 1.2rem .3rem; border: 0; }
.rv blockquote p { margin: .4rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--basalt); font-style: normal; }
.rv-noimg blockquote { padding-top: 1.4rem; }
.rv-noimg blockquote p { font: 400 1.15rem/1.55 var(--serif); }
.rv figcaption { padding: .4rem 1.2rem 1.1rem; font-weight: 700; font-size: .95rem; color: var(--basalt); }
.rv figcaption::before { content: "– "; color: var(--vein); }
.rv-more { margin: .4rem 0 0; font-size: .95rem; }
.rv-img { position: relative; }
.rv-job { position: absolute; left: .7rem; bottom: .7rem; background: rgba(28,33,36,.82); color: #fff; font-size: .8rem; font-weight: 600; padding: .25rem .6rem; border-radius: 3px; }

/* Facebook reel (click to load) */
.fb-reel { max-width: 100%; margin: 1.8rem 0; }
.fb-play, .fb-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; display: block; }
.fb-play { position: relative; cursor: pointer; overflow: hidden; color: #fff; text-align: left; font: inherit;
  background: radial-gradient(circle at 30% 25%, #47216A 0, #1C2124 70%); padding: 0; }
.fb-banner { position: absolute; top: 1rem; left: 1rem; background: #fff; color: var(--basalt); font-weight: 800; letter-spacing: .06em; padding: .25rem .6rem; font-size: .85rem; }
.fb-banner em { font-style: normal; background: #C8102E; color: #fff; margin-left: .4rem; padding: 0 .4rem; text-transform: uppercase; }
.fb-head { position: absolute; left: 1.2rem; right: 1.2rem; top: 30%; font: 400 clamp(1.2rem, 4vw, 2rem)/1.2 var(--serif); }
.fb-btn { position: absolute; left: 1.2rem; top: 58%; background: var(--hivis); color: var(--basalt); font-weight: 800; padding: .7rem 1.1rem; border-radius: 999px; }
.fb-play:hover .fb-btn, .fb-play:focus-visible .fb-btn { transform: scale(1.05); }
.fb-ticker { position: absolute; left: 0; right: 0; bottom: 0; background: var(--hivis); color: var(--basalt); font-weight: 700; font-size: .78rem; padding: .5rem .8rem; white-space: nowrap; overflow: hidden; }
.fb-note { font-size: .88rem; color: var(--vein); margin: .5rem 0 0; }
@media (max-width: 560px) {
  .fb-banner { top: .6rem; left: .6rem; font-size: .7rem; }
  .fb-head { left: .8rem; right: .8rem; top: 32%; font-size: 1.05rem; }
  .fb-btn { left: .8rem; top: auto; bottom: 2.4rem; padding: .4rem .8rem; font-size: .85rem; }
  .fb-ticker { font-size: .68rem; padding: .35rem .6rem; }
}

/* Galleries on phones: an odd last photo spans the full width instead of leaving a gap */
@media (max-width: 860px) {
  .gallery > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Reviews: tidy grid instead of uneven columns */
.rv-grid { columns: auto; display: grid; gap: 1.2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.prose .rv-grid { columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv { margin: 0; display: flex; flex-direction: column; }
.rv blockquote { flex: 1; }
.rv-noimg { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 1.5rem;
  padding: .4rem 1.4rem; border-left: 4px solid var(--verde); }
.rv-noimg blockquote { padding: 1rem 0 .4rem; }
.rv-noimg blockquote p { font-size: 1.25rem; max-width: 70ch; }
.rv-noimg figcaption { grid-column: 1 / -1; padding: 0 0 1rem; }
.rv-noimg blockquote { grid-column: 1 / -1; }
@media (max-width: 1100px) { .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rv-grid, .prose .rv-grid { grid-template-columns: 1fr; } .rv-noimg { padding: .2rem 1.2rem; } .rv-noimg blockquote p { font-size: 1.1rem; } }
.rv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rv-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: 1fr auto; }
.rv-wide .rv-img { grid-row: 1 / 3; aspect-ratio: auto; min-height: 100%; }
.rv-wide blockquote { padding: 1.4rem 1.6rem .3rem; }
.rv-wide figcaption { padding: .4rem 1.6rem 1.4rem; }
.prose .rv-wide { grid-template-columns: 1fr; grid-template-rows: auto; }
.prose .rv-wide .rv-img { grid-row: auto; aspect-ratio: 16 / 9; }
@media (max-width: 1100px) { .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rv-grid > .rv:nth-child(4):not(.rv-wide) { grid-column: 1 / -1; } }
@media (max-width: 760px) { .rv-wide { grid-template-columns: 1fr; grid-template-rows: auto; } .rv-wide .rv-img { grid-row: auto; aspect-ratio: 4 / 3; } }
@media (max-width: 600px) { .rv-grid, .prose .rv-grid { grid-template-columns: 1fr; } }
@media (min-width: 761px) {
  .reviews .rv-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .reviews .rv-wide .rv-img { position: relative; min-height: 0; }
  .reviews .rv-wide .rv-img img { position: absolute; inset: 0; }
  .reviews .rv-wide blockquote p { font-size: 1.05rem; }
  .prose .reviews .rv-wide .rv-img { position: relative; }
  .prose .reviews .rv-wide .rv-img img { position: static; }
}
/* final review layout: 3 across on desktop/tablet and inside pages, 1 across on phones */
.prose .rv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1100px) { .rv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rv-grid > .rv:nth-child(4):not(.rv-wide) { grid-column: auto; } }
@media (max-width: 760px) { .rv-grid, .prose .rv-grid { grid-template-columns: 1fr; } }
.prose .reviews .rv-wide { display: flex; flex-direction: column; }
.prose .reviews .rv-wide .rv-img { position: relative; aspect-ratio: 16 / 9; min-height: 0; }
.prose .reviews .rv-wide .rv-img img { position: absolute; inset: 0; }
.prose .rv blockquote { padding: .9rem 1rem .2rem; }
.prose .rv figcaption { padding: .3rem 1rem .9rem; }
.prose .rv blockquote p { font-size: .95rem; }
.prose .rv-noimg blockquote p { font-size: 1.15rem; }
.prose .reviews .rv-wide .rv-img { aspect-ratio: 21 / 9; }