/* Ivor Building & Carpentry. Clean and corporate: white and light grey bands, black text,
   the van livery's gold on the main action and the logo only. Mobile first.
   Colours come from /_lbw/theme.css (--yellow, --ink), with fallbacks here. */
:root {
  --yellow: #e9b22a;
  --yellow-dark: #d29c14;
  --ink: #1b1b1b;
  --text: #2b2d31;
  --muted: #5b616b;
  --line: #e3e5e8;
  --grey: #f5f6f7;
  --white: #fff;
  --head: Montserrat, Inter, Arial, sans-serif;
  --body: Inter, Arial, sans-serif;
  --radius: 6px;
  --wrap: 1160px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--text); font: 400 17px/1.65 var(--body); }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--yellow-dark); outline-offset: 3px; }
input, textarea { caret-color: var(--ink); }

h1, h2, h3 { font-family: var(--head); color: var(--ink); letter-spacing: -0.02em; text-wrap: balance; }
a, button, summary, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
h1, .hero-heading { font-size: 34px; line-height: 1.15; font-weight: 800; }
h2 { font-size: 28px; line-height: 1.2; font-weight: 800; }
h3 { font-size: 19px; line-height: 1.3; font-weight: 700; }
.lead, .lead p { font-size: 19px; line-height: 1.6; color: var(--text); }
@media (min-width: 960px) {
  h1, .hero-heading { font-size: 52px; line-height: 1.08; }
  h2 { font-size: 38px; }
  h3 { font-size: 21px; }
  .lead, .lead p { font-size: 20px; }
}

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -100px; z-index: 50; padding: 12px 16px; background: var(--ink); color: var(--white); }
.skip:focus-visible { top: 12px; }

/* Buttons: one shape, gently rounded. Gold is the one main action. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px;
  border: 2px solid var(--yellow); border-radius: var(--radius); background: var(--yellow); color: var(--accent-auto-text, var(--ink));
  font: 700 16px/1.2 var(--body); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { background: var(--yellow-dark); border-color: var(--yellow-dark); }
.btn-line { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; display: inline-flex; min-height: 44px; align-items: center; }
.text-link:hover { text-decoration-color: var(--ink); }

/* ---------------------------------------------------------------- header */
.top { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ink); }
/* Stand-in for Ivor's logo (a gold tile with black roof peaks, from the van livery), drawn
   in CSS until the original artwork is supplied. */
/* Drawn in em so "Logo height" scales the placeholder mark too (40px at the default 44). */
.logo-mark { position: relative; flex: none; font-size: calc(var(--logo-height, 44px) * 40 / 44); width: 1em; height: 1em; border-radius: 0.175em; background: var(--yellow); overflow: hidden; }
.logo-mark::before, .logo-mark::after { content: ""; position: absolute; bottom: 0.25em; width: 0; height: 0; border-style: solid; border-color: transparent transparent var(--ink) transparent; }
.logo-mark::before { left: 0.125em; border-width: 0 0.225em 0.325em 0.225em; }
.logo-mark::after { left: 0.375em; border-width: 0 0.25em 0.475em 0.25em; }
.logo-text { display: grid; line-height: 1.1; }
.logo-text strong { font: 800 20px/1.05 var(--head); letter-spacing: 0.01em; text-transform: uppercase; }
.logo-text > span { font: 600 13px/1.3 var(--body); color: var(--muted); }
.menu-toggle {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
  font: 600 15px/1 var(--body); color: var(--ink); cursor: pointer;
}
.nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 600; }
.nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--text); }
.nav a:not(.btn):hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 959px) {
  /* Without the script the links stay visible as a wrapped row. With it, the menu is a
     full-screen sheet with a close button where the Menu button was. */
  .nav { width: 100%; flex-wrap: wrap; gap: 0 18px; padding-bottom: 10px; }
  .has-js .nav { display: none; }
  .has-js .nav.is-open {
    position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: stretch; gap: 0;
    width: auto; padding: 84px 20px 28px; background: var(--white); overflow-y: auto; overscroll-behavior: contain;
  }
  .has-js .nav a:not(.btn) { min-height: 64px; border-bottom: 1px solid var(--line); font: 700 24px/1.2 var(--head); letter-spacing: -0.01em; color: var(--ink); }
  .has-js .nav .btn { margin-top: 28px; min-height: 56px; font-size: 17px; }
  .menu-close { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; border: 0; border-radius: 10px; background: var(--grey); cursor: pointer; }
  .menu-close::before, .menu-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px; background: var(--ink); border-radius: 1px; transform: rotate(45deg); }
  .menu-close::after { transform: rotate(-45deg); }
  .menu-close:hover { background: var(--line); }
  html.menu-open { overflow: hidden; }
}
@media (min-width: 960px) { .menu-close { display: none; } }
@media (min-width: 960px) { .menu-toggle { display: none; } .top-inner { min-height: 80px; } }

/* ------------------------------------------------------------------ hero */
.hero-inner { display: grid; gap: 32px; padding: 36px 0 40px; }
.hero .hero-heading { max-width: 16ch; }
.hero .lead { margin-top: 16px; max-width: 34em; }
.hero .actions { margin-top: 28px; }
.hero .actions .btn { flex: 1 1 auto; }
.hero-proof { margin-top: 14px; font-size: 15px; color: var(--muted); }
.hero-proof a { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; display: inline-flex; min-height: 44px; align-items: center; }
.hero-photo { border-radius: 10px; overflow: hidden; background: var(--grey); aspect-ratio: 4 / 3; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) {
  .hero-inner { grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; padding: 72px 0 80px; }
  .hero .actions .btn { flex: 0 0 auto; }
  .hero-photo { aspect-ratio: 5 / 4; }
}

.facts { background: var(--ink); color: var(--white); }
.facts-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; padding: 28px 0; }
.facts li { display: grid; gap: 2px; align-content: start; }
.facts strong { font: 800 18px/1.25 var(--head); color: var(--yellow); }
.facts span { font-size: 14.5px; line-height: 1.45; color: #d6d7da; }
@media (min-width: 960px) {
  .facts-inner { grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 32px 0; }
  .facts strong { font-size: 21px; }
  .facts span { font-size: 15px; }
}

/* ---------------------------------------------------------------- bands */
.band { padding: 64px 0; }
.band-grey { background: var(--grey); }
.band-ink { background: var(--ink); color: #e4e5e7; }
.band-ink h2 { color: var(--white); }
.band h2 + * { margin-top: 28px; }
.head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; }
.head-row h2 + * { margin-top: 0; }
.head-row + * { margin-top: 24px; }
.intro { display: grid; gap: 14px; }
.intro h2 + * { margin-top: 0; }
.intro-text p { max-width: 40em; color: var(--muted); }
.band-ink .intro-text p { color: #c9cbcf; }
.intro + * { margin-top: 32px; }
@media (min-width: 960px) {
  .band { padding: 104px 0; }
  .band h2 + * { margin-top: 44px; }
  .head-row + *, .intro + * { margin-top: 44px; }
  .intro { grid-template-columns: 1fr 1fr; align-items: end; gap: 64px; }
}

/* Services: a ruled list in columns, not cards. */
.services { display: grid; border-top: 2px solid var(--ink); }
.services li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.services p { margin-top: 4px; color: var(--muted); }
@media (min-width: 640px) { .services { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
@media (min-width: 960px) { .services { grid-template-columns: repeat(3, 1fr); column-gap: 48px; } .services li { padding: 28px 0; } }

/* Work */
.work { display: grid; gap: 40px; }
.project-photo { border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--line); }
.project-photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.4s ease; }
.project:hover .project-photo img { scale: 1.03; }
.project h3 { margin-top: 18px; }
.project p { margin-top: 6px; color: var(--muted); }
.project .caption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (min-width: 760px) { .work { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (min-width: 1100px) { .work { grid-template-columns: repeat(4, 1fr); gap: 28px; } }

/* Reviews */
.reviews { display: grid; gap: 20px; }
.review { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 28px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.review blockquote p { font-size: 18px; line-height: 1.6; color: var(--ink); }
.review blockquote p::before { content: "\201C"; }
.review blockquote p::after { content: "\201D"; }
.review figcaption { display: grid; gap: 2px; font-size: 15px; line-height: 1.45; padding-top: 14px; border-top: 3px solid var(--yellow); }
.review figcaption strong { color: var(--ink); }
.review figcaption span { color: var(--muted); }
@media (min-width: 960px) { .reviews { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* Steps: a real sequence, so it is numbered. */
.steps { display: grid; gap: 16px; counter-reset: step; }
.steps li { counter-increment: step; padding: 24px; background: var(--white); border-radius: 10px; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 16px; border-radius: 50%; background: var(--yellow); color: var(--accent-auto-text, var(--ink)); font: 800 16px/1 var(--head); }
.steps p { margin-top: 8px; color: var(--muted); font-size: 16px; }
@media (min-width: 760px) { .steps { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* About */
.about { display: grid; gap: 32px; }
.about-photo { border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--grey); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.about-text h2 + * { margin-top: 20px; }
.about-more { margin-top: 16px; color: var(--muted); }
.about-more p + p, .lead p + p { margin-top: 12px; }
.ticks { margin-top: 24px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 32px; font-weight: 600; color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 14px; height: 8px; border-left: 3px solid var(--yellow-dark); border-bottom: 3px solid var(--yellow-dark); transform: rotate(-45deg); }
@media (min-width: 960px) { .about { grid-template-columns: 5fr 6fr; gap: 72px; align-items: center; } .about-photo { aspect-ratio: 4 / 5; } }

/* FAQ */
.faq { display: grid; gap: 28px; }
.faq h2 + * { margin-top: 0; }
.faq-list { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid #d9dce0; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 64px; padding: 14px 0; font: 600 17px/1.4 var(--body); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq details p { padding: 0 40px 20px 0; color: var(--muted); max-width: 44em; }
@media (min-width: 960px) { .faq { grid-template-columns: 4fr 7fr; gap: 72px; align-items: start; } .faq summary { font-size: 18px; } }

/* ------------------------------------- quote form (the platform's contact form, lbwc-*) */
.quote { display: grid; gap: 32px; }
.quote-intro h2 + * { margin-top: 16px; }
.contact-lines { margin-top: 24px; display: grid; gap: 6px; color: #c9cbcf; }
.contact-lines a { color: var(--white); font-weight: 600; }
.contact-social { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.quote-form { display: grid; gap: 24px; padding: 24px 20px; background: var(--white); border-radius: 12px; color: var(--text); }
.chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { padding: 0; margin-bottom: 10px; font: 700 16px/1.3 var(--body); color: var(--ink); }
.chips label { position: relative; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid #cfd3d8; border-radius: 999px;
  font: 600 15px/1.2 var(--body); color: var(--text); background: var(--white); transition: border-color 0.15s, background-color 0.15s;
}
.chips label:hover span { border-color: var(--ink); }
.chips input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chips input:focus-visible + span { outline: 3px solid var(--yellow-dark); outline-offset: 2px; }
.field { display: grid; gap: 6px; font: 700 16px/1.3 var(--body); color: var(--ink); }
.field small { font-weight: 400; color: var(--muted); font-size: 15px; }
.field input, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #c4c9cf; border-radius: var(--radius);
  background: var(--white); color: var(--ink); font: 400 16px/1.4 var(--body);
}
.field input::placeholder { color: #737882; }
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--yellow); outline-offset: 0; border-color: var(--ink); }
.chips legend small { font-weight: 400; color: var(--muted); font-size: 15px; }
.quote-form .lbwc-send { width: 100%; }
.quote-form .lbwc-privacy { font-size: 14px; color: var(--muted); }
.quote-form .lbwc-privacy a { color: var(--ink); }
.quote-form .lbwc-error { color: #b42318; font: 600 14px/1.3 var(--body); }
.quote-form .lbwc-status { font: 700 18px/1.4 var(--body); color: var(--ink); }
.quote-form .lbwc-status.is-error { font-size: 16px; color: #b42318; }
@media (min-width: 960px) {
  .quote { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
  .quote-form { padding: 36px; }
  .quote-details-only, .quote-stacked { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Heading above: the intro reads as one line of text and the contact lines sit in a row. */
  .quote-stacked .quote-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: end; }
  .quote-stacked .quote-intro h2, .quote-stacked .intro-text { grid-column: 1; }
  .quote-stacked .contact-lines { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; justify-items: end; text-align: right; }
  .quote-form .lbwc-send { width: auto; justify-self: start; }
}

/* ---------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); padding: 48px 0 28px; font-size: 15px; color: var(--muted); }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.foot-brand { grid-column: 1 / -1; display: grid; gap: 12px; }
.foot h2 { font: 700 15px/1.4 var(--body); letter-spacing: 0; color: var(--ink); margin-bottom: 6px; }
.foot-cols a { display: inline-flex; min-height: 34px; align-items: center; color: var(--text); text-underline-offset: 3px; }
.foot-cols a:hover { color: var(--ink); }
.foot-small { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; font-size: 14px; }
.foot-small a { color: var(--text); }
.credits p { font-size: 13px; line-height: 1.55; max-width: 80ch; }
@media (min-width: 960px) {
  .foot-cols { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .foot-brand { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Heading font (Logo, colours and font > Heading font). */
.font-simple { --head: Inter, Arial, sans-serif; }
.font-classic { --head: Merriweather, Georgia, serif; }
.font-classic h1, .font-classic h2, .font-classic h3 { letter-spacing: -0.01em; }
/* An uploaded logo replaces the drawn gold square. */
.logo-img { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.logo-img img { width: auto; height: var(--logo-height,44px); max-width: min(var(--logo-width,120px),100%); object-fit: contain; }
.logo-text { min-width: 0; }
.brand-image-only .logo:has(.logo-img img) .logo-text { display: none; }
.top .logo { min-width: 0; max-width: calc(100% - 64px); }
@media (max-width: 600px) { .logo-img img { max-height: 64px; } .logo-mark { font-size: min(calc(var(--logo-height, 44px) * 40 / 44), 58px); } }
/* Reveal on load and scroll (site.js adds html.reveal-on; the same effect as the LetsBuildWeb homepage). */
.reveal-on [data-reveal] { opacity: 0; transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--reveal-delay, 0s); }
.reveal-on [data-reveal="fade-up"] { transform: translateY(28px); }
.reveal-on [data-reveal="zoom"] { transform: scale(0.94); }
.reveal-on [data-reveal="slide-right"] { transform: translateX(-48px); }
.reveal-on [data-reveal="slide-left"] { transform: translateX(48px); }
.reveal-on [data-reveal].is-revealed { opacity: 1; transform: none; }
.reveal-setting [data-reveal] { transition: none !important; } /* site.js: hiding must jump, never fade out */
@media (max-width: 959px) { .reveal-on [data-reveal="slide-right"], .reveal-on [data-reveal="slide-left"] { transform: translateY(28px); } }

/* Approved design choices. Original values preserve existing sites. */
.buttons-square .btn { border-radius:0; }.buttons-soft .btn { border-radius:6px; }.buttons-pill .btn { border-radius:999px; }
.corners-square :is(.hero-photo,.about-photo,.services li,.project-photo,.review,.steps li,.quote-form) { border-radius:0; }
.corners-rounded :is(.hero-photo,.about-photo,.services li,.project-photo,.review,.steps li,.quote-form) { border-radius:20px; }
.spacing-compact .band { padding-block:36px; }.spacing-airy .band { padding-block:76px; }
.spacing-compact .hero-inner { padding-block:28px; }.spacing-airy .hero-inner { padding-block:64px; }
@media (min-width:960px) {
  .hero-layout-left .hero-text { grid-column:2; grid-row:1; }
  .hero-layout-left .hero-photo { grid-column:1; grid-row:1; }
  .hero-layout-stacked .hero-inner { grid-template-columns:minmax(0,1fr); }
  .hero-layout-stacked .hero-text { max-width:800px; }
  .hero-layout-stacked .hero-heading { max-width:24ch; }
  .hero-layout-stacked .hero-photo { width:100%; max-height:520px; }
  .spacing-compact .band { padding-block:48px; }.spacing-airy .band { padding-block:112px; }
}

/* Section overrides: removing the class restores the template/site cascade. */
#main > :is(.section-bg-white,.section-bg-mist) { --ink:#1b1b1b; --text:#2b2d31; --muted:#5b616b; --white:#fff; color:var(--text); background:#fff; }
#main > .section-bg-mist { background:#f1f3f5; }
#main > :is(.section-bg-white,.section-bg-mist) h2 { color:var(--ink); }
#main > :is(.section-bg-white,.section-bg-mist) :is(.intro-text p,.contact-lines) { color:var(--muted); }
#main > :is(.section-bg-white,.section-bg-mist) .contact-lines a { color:var(--ink); }
#main > .section-font-sans { --head:Arial,Helvetica,sans-serif; }
#main > .section-font-serif { --head:Georgia,'Times New Roman',serif; }
#main > .section-heading-compact h2 { font-size:clamp(24px,3vw,32px); }
#main > .section-heading-large h2 { font-size:clamp(32px,4.5vw,56px); }
#main > .section-heading-compact h1 { font-size:clamp(32px,4vw,48px); }
#main > .section-heading-large h1 { font-size:clamp(40px,5.5vw,76px); }
#main > .band.section-space-compact { padding-block:36px; }
#main > .band.section-space-airy { padding-block:76px; }
#main > .hero.section-space-compact .hero-inner { padding-block:28px; }
#main > .hero.section-space-airy .hero-inner { padding-block:64px; }
@media (min-width:960px) {
  #main > .band.section-space-compact { padding-block:48px; }
  #main > .band.section-space-airy { padding-block:112px; }
}

/* Layout variants keep semantic source order and collapse naturally on phones. */
#main .services-layout-cards .services { border:0; gap:20px; }
#main .services-layout-cards .services li { padding:24px; border:1px solid var(--line); border-radius:12px; }
@media(min-width:960px) {
 .services-layout-two .services,.work-layout-two .work,.reviews-layout-two .reviews,.steps-layout-two .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .work-layout-three .work { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .services-layout-list .services,.work-layout-list .work,.reviews-layout-list .reviews,.steps-layout-list .steps { grid-template-columns:minmax(0,1fr); }
 .about-layout-right .about-photo { grid-column:2; grid-row:1; }.about-layout-right .about-text { grid-column:1; grid-row:1; }
 .about-layout-stacked .about { grid-template-columns:minmax(0,1fr); }.about-layout-stacked .about-photo { aspect-ratio:16/9; }
 .faq-layout-stacked .faq,.faq-layout-columns .faq { grid-template-columns:minmax(0,1fr); }
 .faq-layout-columns .faq-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:36px; align-items:start; }
}
#main > .section-font-system { --head:system-ui,sans-serif; }
#main > .section-font-verdana { --head:Verdana,Geneva,sans-serif; }
#main > .section-font-tahoma { --head:Tahoma,Verdana,sans-serif; }
#main > .section-font-trebuchet { --head:'Trebuchet MS',Arial,sans-serif; }
#main > .section-font-palatino { --head:'Palatino Linotype',Palatino,serif; }
#main > .section-font-times { --head:'Times New Roman',Times,serif; }
#main > .section-font-mono { --head:'Courier New',Courier,monospace; }

/* A section's own colours, sizes and spacing (Design tab). Each type maps its own variables (from
   theme.css in the old editor, the section's .instance-* rule in the new one) to the shared --sec-*
   names below; the rules themselves are written once (6 November 2026: they were 286 copies). */
#main > .section-type-hero { --sec-bg:var(--hero-background-colour,#fff); --sec-text:var(--hero-text-colour,#2b2d31); --sec-heading:var(--hero-heading-colour,#1b1b1b); --sec-heading-px:var(--hero-heading-px,48px); --sec-body-px:var(--hero-body-px,18px); --sec-space:var(--hero-space-px,64px); --sec-space-bottom:var(--hero-space-bottom-px,64px); --sec-auto:var(--hero-auto-text,#111); }
#main > .section-type-services { --sec-bg:var(--services-background-colour,#fff); --sec-text:var(--services-text-colour,#2b2d31); --sec-heading:var(--services-heading-colour,#1b1b1b); --sec-heading-px:var(--services-heading-px,48px); --sec-body-px:var(--services-body-px,18px); --sec-space:var(--services-space-px,64px); --sec-space-bottom:var(--services-space-bottom-px,64px); --sec-auto:var(--services-auto-text,#111); }
#main > .section-type-work { --sec-bg:var(--work-background-colour,#fff); --sec-text:var(--work-text-colour,#2b2d31); --sec-heading:var(--work-heading-colour,#1b1b1b); --sec-heading-px:var(--work-heading-px,48px); --sec-body-px:var(--work-body-px,18px); --sec-space:var(--work-space-px,64px); --sec-space-bottom:var(--work-space-bottom-px,64px); --sec-auto:var(--work-auto-text,#111); }
#main > .section-type-reviews { --sec-bg:var(--reviews-background-colour,#fff); --sec-text:var(--reviews-text-colour,#2b2d31); --sec-heading:var(--reviews-heading-colour,#1b1b1b); --sec-heading-px:var(--reviews-heading-px,48px); --sec-body-px:var(--reviews-body-px,18px); --sec-space:var(--reviews-space-px,64px); --sec-space-bottom:var(--reviews-space-bottom-px,64px); --sec-auto:var(--reviews-auto-text,#111); }
#main > .section-type-steps { --sec-bg:var(--steps-background-colour,#fff); --sec-text:var(--steps-text-colour,#2b2d31); --sec-heading:var(--steps-heading-colour,#1b1b1b); --sec-heading-px:var(--steps-heading-px,48px); --sec-body-px:var(--steps-body-px,18px); --sec-space:var(--steps-space-px,64px); --sec-space-bottom:var(--steps-space-bottom-px,64px); --sec-auto:var(--steps-auto-text,#111); }
#main > .section-type-about { --sec-bg:var(--about-background-colour,#fff); --sec-text:var(--about-text-colour,#2b2d31); --sec-heading:var(--about-heading-colour,#1b1b1b); --sec-heading-px:var(--about-heading-px,48px); --sec-body-px:var(--about-body-px,18px); --sec-space:var(--about-space-px,64px); --sec-space-bottom:var(--about-space-bottom-px,64px); --sec-auto:var(--about-auto-text,#111); }
#main > .section-type-faq { --sec-bg:var(--faq-background-colour,#fff); --sec-text:var(--faq-text-colour,#2b2d31); --sec-heading:var(--faq-heading-colour,#1b1b1b); --sec-heading-px:var(--faq-heading-px,48px); --sec-body-px:var(--faq-body-px,18px); --sec-space:var(--faq-space-px,64px); --sec-space-bottom:var(--faq-space-bottom-px,64px); --sec-auto:var(--faq-auto-text,#111); }
#main > .section-type-contact { --sec-bg:var(--contact-background-colour,#fff); --sec-text:var(--contact-text-colour,#2b2d31); --sec-heading:var(--contact-heading-colour,#1b1b1b); --sec-heading-px:var(--contact-heading-px,48px); --sec-body-px:var(--contact-body-px,18px); --sec-space:var(--contact-space-px,64px); --sec-space-bottom:var(--contact-space-bottom-px,64px); --sec-auto:var(--contact-auto-text,#111); }
#main > .section-type-pricing { --sec-bg:var(--pricing-background-colour,#fff); --sec-text:var(--pricing-text-colour,#2b2d31); --sec-heading:var(--pricing-heading-colour,#1b1b1b); --sec-heading-px:var(--pricing-heading-px,48px); --sec-body-px:var(--pricing-body-px,18px); --sec-space:var(--pricing-space-px,64px); --sec-space-bottom:var(--pricing-space-bottom-px,64px); --sec-auto:var(--pricing-auto-text,#111); }
#main > .section-type-cta { --sec-bg:var(--cta-background-colour,#fff); --sec-text:var(--cta-text-colour,#2b2d31); --sec-heading:var(--cta-heading-colour,#1b1b1b); --sec-heading-px:var(--cta-heading-px,48px); --sec-body-px:var(--cta-body-px,18px); --sec-space:var(--cta-space-px,64px); --sec-space-bottom:var(--cta-space-bottom-px,64px); --sec-auto:var(--cta-auto-text,#111); }
#main > .section-type-features { --sec-bg:var(--features-background-colour,#fff); --sec-text:var(--features-text-colour,#2b2d31); --sec-heading:var(--features-heading-colour,#1b1b1b); --sec-heading-px:var(--features-heading-px,48px); --sec-body-px:var(--features-body-px,18px); --sec-space:var(--features-space-px,64px); --sec-space-bottom:var(--features-space-bottom-px,64px); --sec-auto:var(--features-auto-text,#111); }
#main > .section-type-video { --sec-bg:var(--video-background-colour,#fff); --sec-text:var(--video-text-colour,#2b2d31); --sec-heading:var(--video-heading-colour,#1b1b1b); --sec-heading-px:var(--video-heading-px,48px); --sec-body-px:var(--video-body-px,18px); --sec-space:var(--video-space-px,64px); --sec-space-bottom:var(--video-space-bottom-px,64px); --sec-auto:var(--video-auto-text,#111); }
#main > .section-type-table { --sec-bg:var(--table-background-colour,#fff); --sec-text:var(--table-text-colour,#2b2d31); --sec-heading:var(--table-heading-colour,#1b1b1b); --sec-heading-px:var(--table-heading-px,48px); --sec-body-px:var(--table-body-px,18px); --sec-space:var(--table-space-px,64px); --sec-space-bottom:var(--table-space-bottom-px,64px); --sec-auto:var(--table-auto-text,#111); }
#main > .section-type-team { --sec-bg:var(--team-background-colour,#fff); --sec-text:var(--team-text-colour,#2b2d31); --sec-heading:var(--team-heading-colour,#1b1b1b); --sec-heading-px:var(--team-heading-px,48px); --sec-body-px:var(--team-body-px,18px); --sec-space:var(--team-space-px,64px); --sec-space-bottom:var(--team-space-bottom-px,64px); --sec-auto:var(--team-auto-text,#111); }
#main > .section-type-logos { --sec-bg:var(--logos-background-colour,#fff); --sec-text:var(--logos-text-colour,#2b2d31); --sec-heading:var(--logos-heading-colour,#1b1b1b); --sec-heading-px:var(--logos-heading-px,48px); --sec-body-px:var(--logos-body-px,18px); --sec-space:var(--logos-space-px,64px); --sec-space-bottom:var(--logos-space-bottom-px,64px); --sec-auto:var(--logos-auto-text,#111); }
#main > .section-type-chart { --sec-bg:var(--chart-background-colour,#fff); --sec-text:var(--chart-text-colour,#2b2d31); --sec-heading:var(--chart-heading-colour,#1b1b1b); --sec-heading-px:var(--chart-heading-px,48px); --sec-body-px:var(--chart-body-px,18px); --sec-space:var(--chart-space-px,64px); --sec-space-bottom:var(--chart-space-bottom-px,64px); --sec-auto:var(--chart-auto-text,#111); }
#main > .section-type-areas { --sec-bg:var(--areas-background-colour,#fff); --sec-text:var(--areas-text-colour,#2b2d31); --sec-heading:var(--areas-heading-colour,#1b1b1b); --sec-heading-px:var(--areas-heading-px,48px); --sec-body-px:var(--areas-body-px,18px); --sec-space:var(--areas-space-px,64px); --sec-space-bottom:var(--areas-space-bottom-px,64px); --sec-auto:var(--areas-auto-text,#111); }
#main > .section-type-products { --sec-bg:var(--products-background-colour,#fff); --sec-text:var(--products-text-colour,#2b2d31); --sec-heading:var(--products-heading-colour,#1b1b1b); --sec-heading-px:var(--products-heading-px,48px); --sec-body-px:var(--products-body-px,18px); --sec-space:var(--products-space-px,64px); --sec-space-bottom:var(--products-space-bottom-px,64px); --sec-auto:var(--products-auto-text,#111); }
#main > .section-type-timetable { --sec-bg:var(--timetable-background-colour,#fff); --sec-text:var(--timetable-text-colour,#2b2d31); --sec-heading:var(--timetable-heading-colour,#1b1b1b); --sec-heading-px:var(--timetable-heading-px,48px); --sec-body-px:var(--timetable-body-px,18px); --sec-space:var(--timetable-space-px,64px); --sec-space-bottom:var(--timetable-space-bottom-px,64px); --sec-auto:var(--timetable-auto-text,#111); }
#main > .section-type-photos { --sec-bg:var(--photos-background-colour,#fff); --sec-text:var(--photos-text-colour,#2b2d31); --sec-heading:var(--photos-heading-colour,#1b1b1b); --sec-heading-px:var(--photos-heading-px,48px); --sec-body-px:var(--photos-body-px,18px); --sec-space:var(--photos-space-px,64px); --sec-space-bottom:var(--photos-space-bottom-px,64px); --sec-auto:var(--photos-auto-text,#111); }
#main > .section-type-map { --sec-bg:var(--map-background-colour,#fff); --sec-text:var(--map-text-colour,#2b2d31); --sec-heading:var(--map-heading-colour,#1b1b1b); --sec-heading-px:var(--map-heading-px,48px); --sec-body-px:var(--map-body-px,18px); --sec-space:var(--map-space-px,64px); --sec-space-bottom:var(--map-space-bottom-px,64px); --sec-auto:var(--map-auto-text,#111); }
#main > .section-type-events { --sec-bg:var(--events-background-colour,#fff); --sec-text:var(--events-text-colour,#2b2d31); --sec-heading:var(--events-heading-colour,#1b1b1b); --sec-heading-px:var(--events-heading-px,48px); --sec-body-px:var(--events-body-px,18px); --sec-space:var(--events-space-px,64px); --sec-space-bottom:var(--events-space-bottom-px,64px); --sec-auto:var(--events-auto-text,#111); }
#main > .section-type-hours { --sec-bg:var(--hours-background-colour,#fff); --sec-text:var(--hours-text-colour,#2b2d31); --sec-heading:var(--hours-heading-colour,#1b1b1b); --sec-heading-px:var(--hours-heading-px,48px); --sec-body-px:var(--hours-body-px,18px); --sec-space:var(--hours-space-px,64px); --sec-space-bottom:var(--hours-space-bottom-px,64px); --sec-auto:var(--hours-auto-text,#111); }
#main > .section-type-beforeafter { --sec-bg:var(--beforeafter-background-colour,#fff); --sec-text:var(--beforeafter-text-colour,#2b2d31); --sec-heading:var(--beforeafter-heading-colour,#1b1b1b); --sec-heading-px:var(--beforeafter-heading-px,48px); --sec-body-px:var(--beforeafter-body-px,18px); --sec-space:var(--beforeafter-space-px,64px); --sec-space-bottom:var(--beforeafter-space-bottom-px,64px); --sec-auto:var(--beforeafter-auto-text,#111); }
#main > .section-type-booking { --sec-bg:var(--booking-background-colour,#fff); --sec-text:var(--booking-text-colour,#2b2d31); --sec-heading:var(--booking-heading-colour,#1b1b1b); --sec-heading-px:var(--booking-heading-px,48px); --sec-body-px:var(--booking-body-px,18px); --sec-space:var(--booking-space-px,64px); --sec-space-bottom:var(--booking-space-bottom-px,64px); --sec-auto:var(--booking-auto-text,#111); }
#main > .section-type-menu { --sec-bg:var(--menu-background-colour,#fff); --sec-text:var(--menu-text-colour,#2b2d31); --sec-heading:var(--menu-heading-colour,#1b1b1b); --sec-heading-px:var(--menu-heading-px,48px); --sec-body-px:var(--menu-body-px,18px); --sec-space:var(--menu-space-px,64px); --sec-space-bottom:var(--menu-space-bottom-px,64px); --sec-auto:var(--menu-auto-text,#111); }
#main > .section-type-quotes { --sec-bg:var(--quotes-background-colour,#fff); --sec-text:var(--quotes-text-colour,#2b2d31); --sec-heading:var(--quotes-heading-colour,#1b1b1b); --sec-heading-px:var(--quotes-heading-px,48px); --sec-body-px:var(--quotes-body-px,18px); --sec-space:var(--quotes-space-px,64px); --sec-space-bottom:var(--quotes-space-bottom-px,64px); --sec-auto:var(--quotes-auto-text,#111); }
#main > .section-type-social { --sec-bg:var(--social-background-colour,#fff); --sec-text:var(--social-text-colour,#2b2d31); --sec-heading:var(--social-heading-colour,#1b1b1b); --sec-heading-px:var(--social-heading-px,48px); --sec-body-px:var(--social-body-px,18px); --sec-space:var(--social-space-px,64px); --sec-space-bottom:var(--social-space-bottom-px,64px); --sec-auto:var(--social-auto-text,#111); }
#main > .section-type-posts { --sec-bg:var(--posts-background-colour,#fff); --sec-text:var(--posts-text-colour,#2b2d31); --sec-heading:var(--posts-heading-colour,#1b1b1b); --sec-heading-px:var(--posts-heading-px,48px); --sec-body-px:var(--posts-body-px,18px); --sec-space:var(--posts-space-px,64px); --sec-space-bottom:var(--posts-space-bottom-px,64px); --sec-auto:var(--posts-auto-text,#111); }
#main > [class*="section-type-"].section-bg-custom { background:var(--sec-bg); }
#main > [class*="section-type-"].section-text-custom { --text:var(--sec-text); --muted:var(--sec-text); color:var(--text); }
#main > [class*="section-type-"].section-text-custom :is(h1,h2,h3) { color:var(--sec-heading); }
#main > [class*="section-type-"].section-text-custom :is(.intro-text p,.contact-lines,.contact-lines a,.lead,.lead p,.about-more,.services p,.project p,.faq details p) { color:var(--sec-text); }
#main > [class*="section-type-"].section-heading-custom :is(h1,h2) { font-size:var(--sec-heading-px); overflow-wrap:anywhere; }
#main > [class*="section-type-"].section-body-custom :is(p,.contact-lines,.ticks,.faq summary) { font-size:var(--sec-body-px); }
#main > .section-type-hero.section-space-custom .hero-inner, #main > [class*="section-type-"]:not(.section-type-hero).section-space-custom { padding-top:var(--sec-space); padding-bottom:var(--sec-space-bottom); }
@media(max-width:600px) { #main > [class*="section-type-"].section-heading-custom :is(h1,h2) { font-size:min(var(--sec-heading-px),max(28px,10vw)); } }
#main > [class*="section-type-"].section-bg-custom:not(.section-text-custom) { --ink:var(--sec-auto); --text:var(--sec-auto); --muted:var(--sec-auto); color:var(--text); }
#main > [class*="section-type-"].section-bg-custom:not(.section-text-custom) :is(h2,.intro-text p,.contact-lines,.contact-lines a) { color:var(--text); }
#main > [class*="section-type-"].section-bg-custom:not(.section-text-custom) :is(.review,.steps li,.quote-form) { --ink:#1b1b1b; --text:#2b2d31; --muted:#5b616b; color:var(--text); }
























#main > .section-bg-custom .btn:not(.btn-line) { color:#1b1b1b; }

#main > .section-bodyfont-sans { --body:Arial,Helvetica,sans-serif; font-family:var(--body); }

#main > .section-bodyfont-serif { --body:Georgia,serif; font-family:var(--body); }

#main > .section-bodyfont-system { --body:system-ui,sans-serif; font-family:var(--body); }

#main > .section-bodyfont-verdana { --body:Verdana,Geneva,sans-serif; font-family:var(--body); }

#main > .section-bodyfont-tahoma { --body:Tahoma,Verdana,sans-serif; font-family:var(--body); }

#main > .section-bodyfont-trebuchet { --body:'Trebuchet MS',Arial,sans-serif; font-family:var(--body); }

#main > .section-bodyfont-palatino { --body:'Palatino Linotype',Palatino,serif; font-family:var(--body); }

#main > .section-bodyfont-times { --body:'Times New Roman',Times,serif; font-family:var(--body); }

#main > .section-bodyfont-mono { --body:'Courier New',Courier,monospace; font-family:var(--body); }

.font-modern, #main > .section-font-modern { --head:'Montserrat',sans-serif; }
#main > .section-bodyfont-modern { --body:'Montserrat',sans-serif; font-family:var(--body); }

.font-simple, #main > .section-font-simple { --head:'Inter',sans-serif; }
#main > .section-bodyfont-simple { --body:'Inter',sans-serif; font-family:var(--body); }

.font-classic, #main > .section-font-classic { --head:'Merriweather',serif; }
#main > .section-bodyfont-classic { --body:'Merriweather',serif; font-family:var(--body); }

.font-bungee, #main > .section-font-bungee { --head:'Bungee',sans-serif; }
#main > .section-bodyfont-bungee { --body:'Bungee',sans-serif; font-family:var(--body); }

.font-anton, #main > .section-font-anton { --head:'Anton',sans-serif; }
#main > .section-bodyfont-anton { --body:'Anton',sans-serif; font-family:var(--body); }

.font-oswald, #main > .section-font-oswald { --head:'Oswald',sans-serif; }
#main > .section-bodyfont-oswald { --body:'Oswald',sans-serif; font-family:var(--body); }

.font-playfair, #main > .section-font-playfair { --head:'Playfair Display',serif; }
#main > .section-bodyfont-playfair { --body:'Playfair Display',serif; font-family:var(--body); }

.font-pacifico, #main > .section-font-pacifico { --head:'Pacifico',cursive; }
#main > .section-bodyfont-pacifico { --body:'Pacifico',cursive; font-family:var(--body); }

.font-caveat, #main > .section-font-caveat { --head:'Caveat',cursive; }
#main > .section-bodyfont-caveat { --body:'Caveat',cursive; font-family:var(--body); }

.font-marker, #main > .section-font-marker { --head:'Permanent Marker',cursive; }
#main > .section-bodyfont-marker { --body:'Permanent Marker',cursive; font-family:var(--body); }

.font-mono-web, #main > .section-font-mono-web { --head:'Space Mono',monospace; }
#main > .section-bodyfont-mono-web { --body:'Space Mono',monospace; font-family:var(--body); }

.font-sans, #main > .section-font-sans { --head:'Arial',sans-serif; }
#main > .section-bodyfont-sans { --body:'Arial',sans-serif; font-family:var(--body); }

.font-serif, #main > .section-font-serif { --head:'Georgia',serif; }
#main > .section-bodyfont-serif { --body:'Georgia',serif; font-family:var(--body); }

.font-system, #main > .section-font-system { --head:'system-ui',sans-serif; }
#main > .section-bodyfont-system { --body:'system-ui',sans-serif; font-family:var(--body); }

.font-verdana, #main > .section-font-verdana { --head:'Verdana',sans-serif; }
#main > .section-bodyfont-verdana { --body:'Verdana',sans-serif; font-family:var(--body); }

.font-tahoma, #main > .section-font-tahoma { --head:'Tahoma',sans-serif; }
#main > .section-bodyfont-tahoma { --body:'Tahoma',sans-serif; font-family:var(--body); }

.font-trebuchet, #main > .section-font-trebuchet { --head:'Trebuchet MS',sans-serif; }
#main > .section-bodyfont-trebuchet { --body:'Trebuchet MS',sans-serif; font-family:var(--body); }

.font-palatino, #main > .section-font-palatino { --head:'Palatino',serif; }
#main > .section-bodyfont-palatino { --body:'Palatino',serif; font-family:var(--body); }

.font-times, #main > .section-font-times { --head:'Times New Roman',serif; }
#main > .section-bodyfont-times { --body:'Times New Roman',serif; font-family:var(--body); }

.font-mono, #main > .section-font-mono { --head:'Courier New',monospace; }
#main > .section-bodyfont-mono { --body:'Courier New',monospace; font-family:var(--body); }

body :is(h1,h2) { font-weight:var(--heading-weight,800); }
body h3 { font-weight:var(--subheading-weight,700); }
.font-modern, #main > .section-font-modern { --heading-weight:800; --subheading-weight:700; }
.font-simple, #main > .section-font-simple { --heading-weight:800; --subheading-weight:700; }
.font-classic, #main > .section-font-classic { --heading-weight:800; --subheading-weight:700; }
.font-bungee, #main > .section-font-bungee { --heading-weight:400; --subheading-weight:400; }
.font-anton, #main > .section-font-anton { --heading-weight:400; --subheading-weight:400; }
.font-oswald, #main > .section-font-oswald { --heading-weight:700; --subheading-weight:700; }
.font-playfair, #main > .section-font-playfair { --heading-weight:800; --subheading-weight:700; }
.font-pacifico, #main > .section-font-pacifico { --heading-weight:400; --subheading-weight:400; }
.font-caveat, #main > .section-font-caveat { --heading-weight:700; --subheading-weight:700; }
.font-marker, #main > .section-font-marker { --heading-weight:400; --subheading-weight:400; }
.font-mono-web, #main > .section-font-mono-web { --heading-weight:700; --subheading-weight:700; }
.font-sans, #main > .section-font-sans { --heading-weight:800; --subheading-weight:700; }
.font-serif, #main > .section-font-serif { --heading-weight:800; --subheading-weight:700; }
.font-system, #main > .section-font-system { --heading-weight:800; --subheading-weight:700; }
.font-verdana, #main > .section-font-verdana { --heading-weight:800; --subheading-weight:700; }
.font-tahoma, #main > .section-font-tahoma { --heading-weight:800; --subheading-weight:700; }
.font-trebuchet, #main > .section-font-trebuchet { --heading-weight:800; --subheading-weight:700; }
.font-palatino, #main > .section-font-palatino { --heading-weight:800; --subheading-weight:700; }
.font-times, #main > .section-font-times { --heading-weight:800; --subheading-weight:700; }
.font-mono, #main > .section-font-mono { --heading-weight:800; --subheading-weight:700; }
.work-more { margin: 32px 0 0; text-align: center; }
.work-intro { max-width: 60ch; margin: 12px 0 32px; }
/* Full-size photo viewer (site.js): one flat dark ground, nothing drawn around the photo. */
.project-zoom { display: block; cursor: default; border-radius: inherit; } /* the normal arrow, never a hand or zoom (owner, 10 November 2026) */
/* The viewer fills the VISIBLE window (inset, not 100vw, which runs under a page scrollbar), and the page
   behind it cannot scroll while it is open, so no scrollbar shows beside the photo (owner, 6 November 2026). */
.photo-viewer { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #111; color: #fff; overflow: hidden; }
html:has(.photo-viewer[open]), html.viewer-open, html.viewer-open body { overflow: hidden; }
.photo-viewer[open] { display: grid; grid-template-rows: 1fr auto; }
.photo-viewer::backdrop { background: #111; }
.photo-viewer figure { margin: 0; min-height: 0; display: grid; place-items: center; align-content: center; gap: 12px; padding: 56px 16px 8px; }
.photo-viewer img { max-width: 100%; max-height: calc(100dvh - 170px); width: auto; height: auto; object-fit: contain; }
.photo-viewer figcaption { font: 500 15px/1.4 var(--body); color: #d8d8d8; text-align: center; max-width: 60ch; }
.photo-viewer-bar { display: flex; justify-content: center; align-items: center; gap: 24px; padding: 8px 16px 20px; }
.photo-viewer button { position: relative; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; font-size: 0; cursor: pointer; }
/* Cross and chevrons drawn in CSS: a text × or ‹ › sits off-centre in most fonts. */
.photo-viewer-close::before, .photo-viewer-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.photo-viewer-close::after { transform: rotate(-45deg); }
.photo-viewer-prev::before, .photo-viewer-next::before { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -7px 0 0 -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.photo-viewer-next::before { margin-left: -9px; transform: rotate(-135deg); }
.photo-viewer button:hover { background: rgba(255,255,255,.22); }
.photo-viewer button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.photo-viewer .photo-viewer-close { position: absolute; top: 12px; right: 12px; z-index: 1; } /* .photo-viewer button (above) would otherwise win and drop it into the grid, top left */
.photo-viewer-count { min-width: 64px; text-align: center; font: 600 14px/1 var(--body); color: #d8d8d8; }
.photo-viewer.is-single .photo-viewer-prev, .photo-viewer.is-single .photo-viewer-next { visibility: hidden; }
/* Wide screens: previous and next beside the photo, like the editor's Uploads viewer; phones keep them at the bottom, in thumb reach. */
@media (min-width: 800px) { .photo-viewer figure { padding: 56px 88px 8px; } .photo-viewer .photo-viewer-prev, .photo-viewer .photo-viewer-next { position: absolute; top: 50%; transform: translateY(-50%); } .photo-viewer .photo-viewer-prev { left: 20px; } .photo-viewer .photo-viewer-next { right: 20px; } }

/* Document-only section types (generated from the services style rules, 5 November 2026) */

/* Prices, Feature list and Call to action (section editor types, 5 November 2026) */
.pricing-intro { max-width: 60ch; }
.band h2 + .pricing-intro { margin-top: 16px; }
.pricing { display: grid; gap: 20px; margin-top: 32px; }
.price-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
/* An item's own button (price cards, services): at the foot of a card, so a row of cards lines its buttons up. */
.price-card .item-action { margin-top: auto; padding-top: 8px; }
.services .item-action { margin-top: 12px; }
.item-action .btn { max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.price-card .item-action .btn { width: 100%; }
.price-card h3 { margin: 0; }
.price-card .price { font: 800 28px/1.15 var(--head); color: var(--ink); margin: 4px 0; }
.price-card .ticks { margin-top: 8px; }
.pricing-note { margin-top: 20px; font-size: 15px; color: var(--muted); }
@media (min-width: 760px) { .pricing { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
#main .pricing-layout-list .pricing { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.corners-square .price-card { border-radius: 0; }
.corners-rounded .price-card { border-radius: 20px; }
.features { margin-top: 32px; gap: 18px 40px; }
.features li { display: grid; gap: 4px; }
.features li span { color: var(--muted); }
@media (min-width: 760px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { #main .features-layout-three .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#main .features-layout-list .features { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.cta-inner { padding: 40px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.section-type-cta.section-bg-original .cta-inner { background: var(--grey); border-color: transparent; }
.corners-square .cta-inner { border-radius: 0; }
.corners-rounded .cta-inner { border-radius: 20px; }
.cta-inner { display: grid; gap: 24px; justify-items: center; text-align: center; }
.cta-copy { display: grid; gap: 12px; max-width: 46ch; }
.cta-copy .lead { margin: 0; }
.band .cta-copy h2 + * { margin-top: 0; }
.cta-action { margin: 0; }
@media (min-width: 760px) {
  #main .cta-layout-split .cta-inner { grid-template-columns: minmax(0, 1fr) auto; justify-items: start; text-align: left; align-items: center; }
  #main .cta-layout-split .cta-copy { max-width: 60ch; }
}

/* Document-only section types, set 2 (generated from the services style rules, 5 November 2026) */

/* Video, Table, Team, Logo strip, Bar chart (section editor types, 5 November 2026) */
.video-inner { display: grid; gap: 28px; }
.video-copy { display: grid; gap: 12px; max-width: 60ch; }
.band .video-copy h2 + * { margin-top: 0; }
.video-copy .lead { margin: 0; }
.video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--ink); }
.video-frame iframe, .video-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: #fff; text-decoration: none; background: rgba(17, 17, 17, .35); }
.video-play:hover { background: rgba(17, 17, 17, .5); }
.video-play:focus-visible { outline: 3px solid var(--yellow); outline-offset: -6px; }
.video-play-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--yellow); position: relative; }
.video-play-icon::after { content: ''; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--ink); }
.video-play-text { font: 700 17px/1.2 var(--body); text-align: center; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.video-play-text small { display: block; font-weight: 500; font-size: 13px; opacity: .9; margin-top: 4px; }
/* An Instagram reel or post (owner, 9 November 2026): a narrow, tall card, centred in its column; once loaded
   it takes the height Instagram reports (site.js). The frame's own padding is Instagram's card. */
.video-frame-tall { width: min(100%, 400px); aspect-ratio: 400 / 690; justify-self: center; }
.video-frame-tall.is-loaded { aspect-ratio: auto; height: 690px; background: #fff; }
/* The site's own video (owner, 9 November 2026): our player, shaped like the video (site.js sets it exactly). */
.video-frame-file { background: #000; }
.video-file { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.video-shape-tall { aspect-ratio: 9 / 16; width: min(100%, 400px); justify-self: center; }
.video-shape-portrait { aspect-ratio: 3 / 4; width: min(100%, 460px); justify-self: center; }
.video-shape-square { aspect-ratio: 1; width: min(100%, 560px); justify-self: center; }
.video-shape-photo { aspect-ratio: 4 / 3; }
button.video-play { width: 100%; border: 0; padding: 0; font: inherit; cursor: pointer; }
button.video-play[hidden] { display: none; }
@media (min-width: 900px) {
  #main .video-layout-side .video-inner-tall { grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; max-width: 1000px; }
  #main .video-layout-left .video-inner-tall { grid-template-columns: 400px minmax(0, 1fr); gap: 64px; max-width: 1000px; }
}
.corners-square .video-frame { border-radius: 0; }
.corners-rounded .video-frame { border-radius: 20px; }
@media (min-width: 900px) { #main .video-layout-side .video-inner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: 48px; } }
.table-intro { max-width: 60ch; }
.band h2 + .table-intro, .band h2 + .chart-intro { margin-top: 16px; }
.site-table { width: 100%; margin-top: 28px; border-collapse: collapse; font-size: 17px; }
.site-table :is(th, td) { padding: 14px 16px 14px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.site-table thead th { font: 700 14px/1.3 var(--body); color: var(--muted); border-bottom: 2px solid var(--ink); }
.site-table tbody th { font-weight: 700; color: var(--ink); }
#main .table-layout-striped .site-table tbody tr:nth-child(odd) { background: var(--grey); }
#main .table-layout-striped .site-table :is(th, td) { padding-left: 12px; border-bottom: 0; }
@media (max-width: 640px) {
  .site-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .site-table, .site-table tbody, .site-table tr, .site-table th, .site-table td { display: block; }
  .site-table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .site-table :is(th, td) { padding: 2px 0; border: 0; }
  .site-table td::before { content: attr(data-label) ': '; font-weight: 700; color: var(--muted); }
  .site-table td[data-label='']::before { content: none; }
  #main .table-layout-striped .site-table tr { padding: 14px 12px; }
}
.team { display: grid; gap: 28px; margin-top: 32px; }
.person { display: grid; align-content: start; gap: 6px; }
.person h3 { margin: 8px 0 0; }
.person-role { color: var(--muted); font-weight: 600; margin: 0; }
.person-photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--grey); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.corners-square .person-photo { border-radius: 0; }
.corners-rounded .person-photo { border-radius: 20px; }
@media (min-width: 640px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { #main .team-layout-original .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#main .team-layout-list .team { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
#main .team-layout-list .person { grid-template-columns: 120px minmax(0, 1fr); column-gap: 20px; }
#main .team-layout-list .person-photo { grid-row: span 3; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 40px; margin-top: 32px; }
.logos li { display: grid; place-items: center; min-height: 64px; }
.logos img { max-height: 56px; max-width: 160px; width: auto; height: auto; object-fit: contain; }
.logos span { font: 700 17px/1.2 var(--head); color: var(--muted); }
#main .logos-layout-grid .logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
#main .logos-layout-grid .logos li { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.chart-intro { max-width: 60ch; }
.chart { display: grid; gap: 14px; margin-top: 28px; max-width: 900px; }
.bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.bar-label { font-weight: 600; color: var(--ink); }
.bar-track { display: block; height: 14px; border-radius: 7px; background: var(--grey); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--yellow); }
.bar-value { font: 700 15px/1 var(--body); color: var(--ink); font-variant-numeric: tabular-nums; }
@media (min-width: 760px) { .bar { grid-template-columns: minmax(120px, 1fr) minmax(0, 3fr) 7em; align-items: center; gap: 16px; } }
#main .chart-layout-columns .chart { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); align-items: end; max-width: none; }
#main .chart-layout-columns .bar { grid-template-columns: none; grid-template-rows: auto 160px auto; justify-items: center; text-align: center; gap: 8px; }
#main .chart-layout-columns .bar-label { grid-row: 3; }
#main .chart-layout-columns .bar-track { grid-row: 2; width: 40px; height: 160px; display: flex; align-items: flex-end; }
/* Columns: the same 0-100 steps become heights (no inline styles under the site CSP). */
#main .chart-layout-columns .bar-0{width:100%;height:0%}#main .chart-layout-columns .bar-1{width:100%;height:1%}#main .chart-layout-columns .bar-2{width:100%;height:2%}#main .chart-layout-columns .bar-3{width:100%;height:3%}#main .chart-layout-columns .bar-4{width:100%;height:4%}#main .chart-layout-columns .bar-5{width:100%;height:5%}#main .chart-layout-columns .bar-6{width:100%;height:6%}#main .chart-layout-columns .bar-7{width:100%;height:7%}#main .chart-layout-columns .bar-8{width:100%;height:8%}#main .chart-layout-columns .bar-9{width:100%;height:9%}#main .chart-layout-columns .bar-10{width:100%;height:10%}#main .chart-layout-columns .bar-11{width:100%;height:11%}#main .chart-layout-columns .bar-12{width:100%;height:12%}#main .chart-layout-columns .bar-13{width:100%;height:13%}#main .chart-layout-columns .bar-14{width:100%;height:14%}#main .chart-layout-columns .bar-15{width:100%;height:15%}#main .chart-layout-columns .bar-16{width:100%;height:16%}#main .chart-layout-columns .bar-17{width:100%;height:17%}#main .chart-layout-columns .bar-18{width:100%;height:18%}#main .chart-layout-columns .bar-19{width:100%;height:19%}#main .chart-layout-columns .bar-20{width:100%;height:20%}#main .chart-layout-columns .bar-21{width:100%;height:21%}#main .chart-layout-columns .bar-22{width:100%;height:22%}#main .chart-layout-columns .bar-23{width:100%;height:23%}#main .chart-layout-columns .bar-24{width:100%;height:24%}#main .chart-layout-columns .bar-25{width:100%;height:25%}#main .chart-layout-columns .bar-26{width:100%;height:26%}#main .chart-layout-columns .bar-27{width:100%;height:27%}#main .chart-layout-columns .bar-28{width:100%;height:28%}#main .chart-layout-columns .bar-29{width:100%;height:29%}#main .chart-layout-columns .bar-30{width:100%;height:30%}#main .chart-layout-columns .bar-31{width:100%;height:31%}#main .chart-layout-columns .bar-32{width:100%;height:32%}#main .chart-layout-columns .bar-33{width:100%;height:33%}#main .chart-layout-columns .bar-34{width:100%;height:34%}#main .chart-layout-columns .bar-35{width:100%;height:35%}#main .chart-layout-columns .bar-36{width:100%;height:36%}#main .chart-layout-columns .bar-37{width:100%;height:37%}#main .chart-layout-columns .bar-38{width:100%;height:38%}#main .chart-layout-columns .bar-39{width:100%;height:39%}#main .chart-layout-columns .bar-40{width:100%;height:40%}#main .chart-layout-columns .bar-41{width:100%;height:41%}#main .chart-layout-columns .bar-42{width:100%;height:42%}#main .chart-layout-columns .bar-43{width:100%;height:43%}#main .chart-layout-columns .bar-44{width:100%;height:44%}#main .chart-layout-columns .bar-45{width:100%;height:45%}#main .chart-layout-columns .bar-46{width:100%;height:46%}#main .chart-layout-columns .bar-47{width:100%;height:47%}#main .chart-layout-columns .bar-48{width:100%;height:48%}#main .chart-layout-columns .bar-49{width:100%;height:49%}#main .chart-layout-columns .bar-50{width:100%;height:50%}#main .chart-layout-columns .bar-51{width:100%;height:51%}#main .chart-layout-columns .bar-52{width:100%;height:52%}#main .chart-layout-columns .bar-53{width:100%;height:53%}#main .chart-layout-columns .bar-54{width:100%;height:54%}#main .chart-layout-columns .bar-55{width:100%;height:55%}#main .chart-layout-columns .bar-56{width:100%;height:56%}#main .chart-layout-columns .bar-57{width:100%;height:57%}#main .chart-layout-columns .bar-58{width:100%;height:58%}#main .chart-layout-columns .bar-59{width:100%;height:59%}#main .chart-layout-columns .bar-60{width:100%;height:60%}#main .chart-layout-columns .bar-61{width:100%;height:61%}#main .chart-layout-columns .bar-62{width:100%;height:62%}#main .chart-layout-columns .bar-63{width:100%;height:63%}#main .chart-layout-columns .bar-64{width:100%;height:64%}#main .chart-layout-columns .bar-65{width:100%;height:65%}#main .chart-layout-columns .bar-66{width:100%;height:66%}#main .chart-layout-columns .bar-67{width:100%;height:67%}#main .chart-layout-columns .bar-68{width:100%;height:68%}#main .chart-layout-columns .bar-69{width:100%;height:69%}#main .chart-layout-columns .bar-70{width:100%;height:70%}#main .chart-layout-columns .bar-71{width:100%;height:71%}#main .chart-layout-columns .bar-72{width:100%;height:72%}#main .chart-layout-columns .bar-73{width:100%;height:73%}#main .chart-layout-columns .bar-74{width:100%;height:74%}#main .chart-layout-columns .bar-75{width:100%;height:75%}#main .chart-layout-columns .bar-76{width:100%;height:76%}#main .chart-layout-columns .bar-77{width:100%;height:77%}#main .chart-layout-columns .bar-78{width:100%;height:78%}#main .chart-layout-columns .bar-79{width:100%;height:79%}#main .chart-layout-columns .bar-80{width:100%;height:80%}#main .chart-layout-columns .bar-81{width:100%;height:81%}#main .chart-layout-columns .bar-82{width:100%;height:82%}#main .chart-layout-columns .bar-83{width:100%;height:83%}#main .chart-layout-columns .bar-84{width:100%;height:84%}#main .chart-layout-columns .bar-85{width:100%;height:85%}#main .chart-layout-columns .bar-86{width:100%;height:86%}#main .chart-layout-columns .bar-87{width:100%;height:87%}#main .chart-layout-columns .bar-88{width:100%;height:88%}#main .chart-layout-columns .bar-89{width:100%;height:89%}#main .chart-layout-columns .bar-90{width:100%;height:90%}#main .chart-layout-columns .bar-91{width:100%;height:91%}#main .chart-layout-columns .bar-92{width:100%;height:92%}#main .chart-layout-columns .bar-93{width:100%;height:93%}#main .chart-layout-columns .bar-94{width:100%;height:94%}#main .chart-layout-columns .bar-95{width:100%;height:95%}#main .chart-layout-columns .bar-96{width:100%;height:96%}#main .chart-layout-columns .bar-97{width:100%;height:97%}#main .chart-layout-columns .bar-98{width:100%;height:98%}#main .chart-layout-columns .bar-99{width:100%;height:99%}#main .chart-layout-columns .bar-100{width:100%;height:100%}
.bar-0{width:0%}.bar-1{width:1%}.bar-2{width:2%}.bar-3{width:3%}.bar-4{width:4%}.bar-5{width:5%}.bar-6{width:6%}.bar-7{width:7%}.bar-8{width:8%}.bar-9{width:9%}.bar-10{width:10%}.bar-11{width:11%}.bar-12{width:12%}.bar-13{width:13%}.bar-14{width:14%}.bar-15{width:15%}.bar-16{width:16%}.bar-17{width:17%}.bar-18{width:18%}.bar-19{width:19%}.bar-20{width:20%}.bar-21{width:21%}.bar-22{width:22%}.bar-23{width:23%}.bar-24{width:24%}.bar-25{width:25%}.bar-26{width:26%}.bar-27{width:27%}.bar-28{width:28%}.bar-29{width:29%}.bar-30{width:30%}.bar-31{width:31%}.bar-32{width:32%}.bar-33{width:33%}.bar-34{width:34%}.bar-35{width:35%}.bar-36{width:36%}.bar-37{width:37%}.bar-38{width:38%}.bar-39{width:39%}.bar-40{width:40%}.bar-41{width:41%}.bar-42{width:42%}.bar-43{width:43%}.bar-44{width:44%}.bar-45{width:45%}.bar-46{width:46%}.bar-47{width:47%}.bar-48{width:48%}.bar-49{width:49%}.bar-50{width:50%}.bar-51{width:51%}.bar-52{width:52%}.bar-53{width:53%}.bar-54{width:54%}.bar-55{width:55%}.bar-56{width:56%}.bar-57{width:57%}.bar-58{width:58%}.bar-59{width:59%}.bar-60{width:60%}.bar-61{width:61%}.bar-62{width:62%}.bar-63{width:63%}.bar-64{width:64%}.bar-65{width:65%}.bar-66{width:66%}.bar-67{width:67%}.bar-68{width:68%}.bar-69{width:69%}.bar-70{width:70%}.bar-71{width:71%}.bar-72{width:72%}.bar-73{width:73%}.bar-74{width:74%}.bar-75{width:75%}.bar-76{width:76%}.bar-77{width:77%}.bar-78{width:78%}.bar-79{width:79%}.bar-80{width:80%}.bar-81{width:81%}.bar-82{width:82%}.bar-83{width:83%}.bar-84{width:84%}.bar-85{width:85%}.bar-86{width:86%}.bar-87{width:87%}.bar-88{width:88%}.bar-89{width:89%}.bar-90{width:90%}.bar-91{width:91%}.bar-92{width:92%}.bar-93{width:93%}.bar-94{width:94%}.bar-95{width:95%}.bar-96{width:96%}.bar-97{width:97%}.bar-98{width:98%}.bar-99{width:99%}.bar-100{width:100%}
.person-initial { display: grid; place-items: center; font: 800 64px/1 var(--head); color: #5b616b; } /* on its own light box, so never the page text colour */

/* A white section straight after another white section: drop the second one's top padding, so the
   gap between them is one section's padding instead of two (owner, 5 November 2026: "large gaps").
   A Big statement band is never white (it is a photo or dark), so it is left out on both sides. */
#main > .band:not(.band-grey):not(.band-ink):not(.cta-layout-statement).section-bg-original:not(.section-space-custom) + .band:not(.band-grey):not(.band-ink):not(.cta-layout-statement).section-bg-original:not(.section-space-custom),
#main > .band:not(.band-grey):not(.band-ink):not(.cta-layout-statement).section-bg-white:not(.section-space-custom) + .band:not(.band-grey):not(.band-ink):not(.cta-layout-statement).section-bg-white:not(.section-space-custom) { padding-top: 0; }

/* Document-only section types, set 3 (generated from the services style rules, 5 November 2026) */

/* Photo gallery, Map, Dates & events, Opening hours (section editor types, 5 November 2026) */
.photos-intro, .events-intro { max-width: 60ch; }
.band h2 + .photos-intro, .band h2 + .events-intro { margin-top: 16px; }
.photo-groups { margin-top: 28px; }
.photo-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.photo-tabs[hidden] { display: none; }
.photo-tabs [role=tab] { min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font: 600 15px/1 var(--body); cursor: pointer; }
.photo-tabs [role=tab][aria-selected=true] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.photo-tabs [role=tab]:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.photo-panel + .photo-panel { margin-top: 32px; }
.tabs-on .photo-panel + .photo-panel { margin-top: 0; }
.tabs-on .photo-panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.photo-panel-title { margin: 0 0 14px; }
.photo-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-grid li { overflow: hidden; border-radius: 10px; background: var(--grey); aspect-ratio: 4 / 3; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* With the viewer on, the photo sits in a link: it must fill the tile too, or the photo stops short of it. */
.photo-grid li > .project-zoom { display: block; width: 100%; height: 100%; }
@media (min-width: 760px) { .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#main .photos-layout-masonry .photo-grid { display: block; columns: 2; column-gap: 12px; }
#main .photos-layout-masonry .photo-grid li { aspect-ratio: auto; margin-bottom: 12px; break-inside: avoid; }
#main .photos-layout-masonry .photo-grid img { height: auto; }
@media (min-width: 760px) { #main .photos-layout-masonry .photo-grid { columns: 3; column-gap: 16px; } #main .photos-layout-masonry .photo-grid li { margin-bottom: 16px; } }
#main .photos-layout-featured .photo-grid li:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 760px) { #main .photos-layout-featured .photo-grid li:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } }
.corners-square :is(.photo-grid li, .map-frame, .event) { border-radius: 0; }
.corners-rounded :is(.photo-grid li, .map-frame, .event) { border-radius: 20px; }
.map-inner { display: grid; gap: 28px; }
.map-copy { display: grid; gap: 14px; align-content: start; }
.band .map-copy h2 + * { margin-top: 0; }
.map-text p { margin: 0 0 6px; }
.map-frame { position: relative; min-height: 320px; overflow: hidden; border-radius: 12px; background: var(--grey); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; text-align: center; }
.map-load:hover { background: rgba(0, 0, 0, .03); }
.map-load:focus-visible { outline: 3px solid var(--yellow); outline-offset: -6px; }
.map-load small { display: block; font-weight: 500; color: var(--muted); margin-top: 4px; }
.map-pin { width: 44px; height: 44px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--yellow); position: relative; }
.map-pin::after { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: var(--white); }
@media (min-width: 900px) { #main .map-layout-original .map-inner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: stretch; gap: 48px; } #main .map-layout-original .map-frame { min-height: 380px; } }
#main .map-layout-wide .map-frame { min-height: 420px; }
.events { display: grid; gap: 0; margin-top: 28px; }
.event { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.event-date { margin: 0; font: 800 17px/1.3 var(--head); color: var(--ink); }
.event-body h3 { margin: 0 0 4px; }
.event-body p { margin: 4px 0 0; }
.event-meta { color: var(--muted); font-weight: 600; }
.events-empty { color: var(--muted); margin-top: 20px; }
@media (max-width: 480px) { .event { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
#main .events-layout-cards .events { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
#main .events-layout-cards .event { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.opening-hours { display: grid; margin: 28px 0 0; max-width: 520px; }
.opening-hours > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.opening-hours dt { font-weight: 700; color: var(--ink); }
.opening-hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.hours-note { margin-top: 16px; color: var(--muted); }
#main .hours-layout-cards .opening-hours { max-width: none; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
#main .hours-layout-cards .opening-hours > div { flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }

/* Document-only section types, set 4 (generated from the services style rules, 5 November 2026) */

/* Before & after, Booking, Menu, Testimonials carousel, Social links (section editor types, 5 November 2026) */
.ba-intro, .menu-intro { max-width: 60ch; }
.band h2 + .ba-intro, .band h2 + .menu-intro { margin-top: 16px; }
.ba-list { display: grid; gap: 28px; margin-top: 28px; }
@media (min-width: 960px) { .ba-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ba { margin: 0; }
.ba-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ba-photos > div { position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 4 / 3; background: var(--grey); }
.ba-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-tag { position: absolute; left: 10px; top: 10px; padding: 4px 8px; border-radius: 4px; background: rgba(17, 17, 17, .75); color: #fff; font: 700 12px/1 var(--body); }
.ba-after .ba-tag { left: auto; right: 10px; }
.ba figcaption { margin-top: 10px; color: var(--muted); }
.ba-on .ba-photos { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.ba-on .ba-photos > div { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: default; z-index: 3; touch-action: pan-y; } /* no cursor change (owner) */
.ba-handle { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #fff; z-index: 2; pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.ba-handle::after { content: '‹ ›'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font: 700 16px/1 var(--body); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.ba-range:focus-visible + .ba-handle::after { outline: 3px solid var(--yellow); outline-offset: 2px; }
.corners-square :is(.ba-photos > div, .ba-on .ba-photos, .menu-group, .tm-quote, .social-link) { border-radius: 0; }
.booking-action { display: grid; justify-items: center; gap: 10px; }
.booking-note { margin: 0; font-size: 14px; color: var(--muted); }
@media (min-width: 760px) { #main .booking-layout-split .cta-inner { grid-template-columns: minmax(0, 1fr) auto; justify-items: start; text-align: left; align-items: center; } #main .booking-layout-split .booking-action { justify-items: end; } }
.menu-groups { display: grid; gap: 32px 48px; margin-top: 28px; }
@media (min-width: 860px) { #main .menu-layout-original .menu-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#main .menu-layout-one .menu-groups { max-width: 760px; }
.menu-group h3 { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.menu-items { display: grid; }
.menu-items li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.menu-line { display: flex; justify-content: space-between; gap: 16px; margin: 0; font-weight: 700; color: var(--ink); }
.menu-price { flex: none; font-variant-numeric: tabular-nums; }
.menu-description { margin: 4px 0 0; color: var(--muted); }
.menu-note { margin-top: 20px; font-size: 14px; color: var(--muted); }
.menu-tags { display: inline-block; max-width: 100%; vertical-align: 2px; margin-left: 6px; padding: 1px 6px; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: 0.04em; color: var(--muted); overflow-wrap: anywhere; }
.menu-name { min-width: 0; overflow-wrap: anywhere; }
.logos a { display: grid; place-items: center; gap: 6px; color: inherit; text-decoration: none; }
.logo-number { display: block; font-size: 14px; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.logos a .logo-number { text-decoration: underline; }
.person-link { margin: 4px 0 0; }
.person-link a { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
/* Areas we cover: tags by default, or columns, or one per line. */
.band h2 + .areas-intro, .band h2 + .products-intro, .band h2 + .timetable-intro { margin-top: 16px; }
.areas-intro, .products-intro, .timetable-intro { max-width: 60ch; }
.areas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.areas li { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
#main .areas-layout-columns .areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0 32px; }
#main .areas-layout-columns .areas li, #main .areas-layout-list .areas li { padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
#main .areas-layout-list .areas { display: grid; max-width: 760px; gap: 0; }
.areas-note, .products-note, .timetable-note { margin-top: 20px; font-size: 15px; color: var(--muted); }
/* Products: a photo, name, price and an optional button to wherever it is sold. */
.products { display: grid; gap: 28px; margin-top: 32px; }
@media (min-width: 640px) { .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { #main .products-layout-original .products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.product { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.product h3 { margin: 8px 0 0; overflow-wrap: anywhere; }
.product p { margin: 0; overflow-wrap: anywhere; }
.product-photo { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: var(--grey); }
.product-photo img { width: 100%; height: 100%; object-fit: cover; }
.corners-square .product-photo { border-radius: 0; }
.corners-rounded .product-photo { border-radius: 20px; }
.product-price { font: 800 20px/1.2 var(--head); color: var(--ink); }
.product .item-action { margin-top: auto; padding-top: 8px; }
#main .products-layout-list .products { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
#main .products-layout-list .product { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 20px; align-content: start; }
#main .products-layout-list .product > * { grid-column: 2; }
#main .products-layout-list .product-photo { grid-column: 1; grid-row: 1 / span 5; }
/* Weekly timetable: one block per day, or one list. */
.timetable { display: grid; gap: 24px 40px; margin-top: 28px; }
@media (min-width: 760px) { #main .timetable-layout-original .timetable { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
#main .timetable-layout-list .timetable { max-width: 760px; gap: 24px; }
.timetable-day h3 { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.timetable-day li { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.timetable-day p { margin: 0; overflow-wrap: anywhere; }
.timetable-time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.timetable-name { font-weight: 700; color: var(--ink); }
.timetable-detail { color: var(--muted); }
/* Announcement bar: one line above the header, in the brand accent like the buttons. */
.site-notice { margin: 0; padding: 10px 16px; background: var(--yellow); color: var(--accent-auto-text, var(--ink)); font-weight: 700; font-size: 15px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.site-notice a { color: inherit; text-decoration: underline; }
.quotes-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.quotes-nav { display: flex; gap: 8px; flex: none; }
.quotes-nav[hidden] { display: none; }
.quotes-nav button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); font: 400 24px/1 var(--body); cursor: pointer; }
.quotes { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 760px) { .quotes:not(.quotes-carousel) { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.quotes-carousel { grid-auto-flow: column; grid-auto-columns: minmax(260px, 86%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 8px; }
@media (min-width: 760px) { .quotes-carousel { grid-auto-columns: calc((100% - 32px) / 3); } }
.quotes-carousel:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.tm-quote { scroll-snap-align: start; display: grid; align-content: space-between; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.tm-quote blockquote { margin: 0; }
.tm-quote blockquote p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink); }
.tm-by { margin: 0; color: var(--muted); }
.tm-by strong { color: var(--ink); }
.social-inner { display: grid; gap: 14px; justify-items: start; }
.band .social-inner h2 + * { margin-top: 0; }
.social-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.social-link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 700; text-decoration: none; }
.social-link:hover { border-color: var(--ink); }
.social-mark { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--white); font: 800 14px/1 var(--head); }
#main .social-layout-list .social-links { flex-direction: column; align-items: stretch; width: min(100%, 360px); }

/* Document-only section types, set 5 (generated from the services style rules, 5 November 2026) */

/* News & updates (section editor type, 5 November 2026) */
.posts-intro { max-width: 60ch; }
.band h2 + .posts-intro { margin-top: 16px; }
.posts-empty { margin-top: 20px; color: var(--muted); }
.posts { display: grid; gap: 28px; margin-top: 28px; max-width: 900px; }
.post { display: grid; gap: 20px; }
@media (min-width: 760px) { .post:has(.post-photo) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } }
.post-photo { overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; background: var(--grey); }
.post-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-body h3 { margin: 4px 0 8px; }
.post-body p { margin: 0 0 8px; }
.post-meta { display: flex; gap: 10px; align-items: center; color: var(--muted); font-weight: 600; font-size: 14px; }
.post-pin { padding: 3px 8px; border-radius: 4px; background: var(--yellow); color: var(--accent-auto-text, var(--ink)); font-weight: 700; }
.post-link { font-weight: 700; color: var(--ink); text-underline-offset: 3px; }
.post.is-pinned { padding: 18px; border: 2px solid var(--yellow); border-radius: 12px; }
#main .posts-layout-cards .posts { max-width: none; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
#main .posts-layout-cards .post { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 0 0 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); }
#main .posts-layout-cards .post-photo { border-radius: 0; }
#main .posts-layout-cards .post-body { padding: 0 18px; }
#main .posts-layout-compact .posts { gap: 0; }
#main .posts-layout-compact .post { padding: 16px 0; border-bottom: 1px solid var(--line); }
#main .posts-layout-compact .post.is-pinned { padding: 16px; margin-bottom: 8px; }
.corners-square :is(.post-photo, .post.is-pinned, .posts-layout-cards .post) { border-radius: 0; }

/* Hero layouts added 5 November 2026 (owner: more layouts, starting with the top of the page).
   overlay: full-width photo, text on top over a dark fade (like the letsbuildweb.com homepage).
   card:    full-width photo with the text in a white card.
   centred: text centred, photo below.
   The photo and the text share one grid cell, so the section grows with long text instead of
   clipping it; the photo fills that cell behind. */
:is(.hero-layout-overlay, .hero-layout-inset, .hero-layout-wordmark) .hero-inner, .hero-layout-card .hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: none; padding: 0; gap: 0; min-height: min(560px, 78vh); }
:is(.hero-layout-overlay, .hero-layout-inset, .hero-layout-wordmark) .hero-photo, .hero-layout-card .hero-photo { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
:is(.hero-layout-overlay, .hero-layout-inset, .hero-layout-wordmark) .hero-text, .hero-layout-card .hero-text { position: relative; z-index: 1; align-self: end; width: min(var(--wrap), 100% - 40px); margin: 0 auto; padding: 96px 0 40px; }
:is(.hero-layout-overlay, .hero-layout-inset, .hero-layout-wordmark) .hero-photo { background: #2b2d31; } /* no photo yet: still dark enough for the white text */
:is(.hero-layout-overlay, .hero-layout-inset, .hero-layout-wordmark) .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.72)); }
@media (min-width: 960px) { :is(.hero-layout-overlay, .hero-layout-inset, .hero-layout-wordmark) .hero-photo::after { background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.45) 45%, rgba(0,0,0,.08) 75%); } }
:is(.hero-layout-overlay, .hero-layout-inset, .hero-layout-wordmark) .hero-text { --ink: #fff; --text: #fff; --muted: rgba(255,255,255,.88); color: #fff; }
:is(.hero-layout-overlay, .hero-layout-inset, .hero-layout-wordmark) .hero-heading { color: #fff; }
:is(.hero-layout-overlay, .hero-layout-inset, .hero-layout-wordmark) .hero-proof a { color: #fff; }
:is(.hero-layout-overlay, .hero-layout-inset, .hero-layout-wordmark) .btn-line { color: #fff; border-color: #fff; }
.hero-layout-card .hero-text { align-self: center; padding: 40px 0; }
.hero-layout-card .hero-text > * { max-width: 520px; }
.hero-layout-card .hero-text::before { content: ""; position: absolute; z-index: -1; inset: 16px auto 16px -24px; width: min(600px, 100% + 48px); background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.hero-layout-centred .hero-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.hero-layout-centred .hero-heading { max-width: 22ch; margin-inline: auto; }
.hero-layout-centred .lead { margin-inline: auto; }
.hero-layout-centred .actions { justify-content: center; }
.hero-layout-centred .hero-photo { width: 100%; max-height: 520px; }
@media (max-width: 600px) {
  :is(.hero-layout-overlay, .hero-layout-inset, .hero-layout-wordmark) .hero-inner, .hero-layout-card .hero-inner { min-height: 520px; }
  :is(.hero-layout-overlay, .hero-layout-inset, .hero-layout-wordmark) .hero-text { padding: 140px 0 28px; }
  .hero-layout-card .hero-text { align-self: end; padding: 160px 0 28px; }
  .hero-layout-card .hero-text::before { inset: 140px -14px 12px; width: auto; }
  .hero-layout-card .hero-text { padding-top: 168px; }
}
.corners-square .hero-layout-card .hero-text::before { border-radius: 0; }
.corners-rounded .hero-layout-card .hero-text::before { border-radius: 20px; }

/* "Keep visible" (lbw_focus_class, app/lib/sites.php): last in this sheet so it beats the crop
   defaults above, such as .about-photo img. */
img.lbw-focus-top-left { object-position: 0% 0%; } img.lbw-focus-top { object-position: 50% 0%; } img.lbw-focus-top-right { object-position: 100% 0%; }
img.lbw-focus-left { object-position: 0% 50%; } img.lbw-focus-center { object-position: 50% 50%; } img.lbw-focus-right { object-position: 100% 50%; }
img.lbw-focus-bottom-left { object-position: 0% 100%; } img.lbw-focus-bottom { object-position: 50% 100%; } img.lbw-focus-bottom-right { object-position: 100% 100%; }

/* Gallery tile shape (photos.shape). Masonry keeps every photo whole, so it is left alone. */
#main .photos-shape-square:not(.photos-layout-masonry) .photo-grid li { aspect-ratio: 1 / 1; }
#main .photos-shape-portrait:not(.photos-layout-masonry) .photo-grid li { aspect-ratio: 4 / 5; }
/* ...but the large first photo of "Large first photo" keeps its own shape. */
#main .photos-layout-featured.photos-layout-featured .photo-grid li:first-child { aspect-ratio: 16 / 9; }
@media (min-width: 760px) { #main .photos-layout-featured.photos-layout-featured .photo-grid li:first-child { aspect-ratio: auto; } }

/* About layouts added 5 November 2026: the text in a white card over the photo (kept inside the
   page width, rounded like the other photos), and centred text with the photo below. Photo and
   card share one grid cell, so long text grows the section instead of being clipped. */
#main .about-layout-card .about { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 560px; }
#main .about-layout-card .about-photo { position: absolute; inset: 0; aspect-ratio: auto; }
#main .about-layout-card .about-text { position: relative; z-index: 1; align-self: center; width: min(560px, calc(100% - 48px)); margin: 48px 24px; padding: 32px; background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.18); --ink: #1b1b1b; --text: #2b2d31; --muted: #5b616b; color: var(--text); }
#main .about-layout-card .about-text h2 { color: var(--ink); }
#main .about-layout-centred .about { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 40px; }
#main .about-layout-centred .about-text { max-width: 720px; order: -1; }
#main .about-layout-centred .ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
#main .about-layout-centred .about-photo { width: 100%; aspect-ratio: 16 / 9; }
@media (max-width: 600px) {
  #main .about-layout-card .about { min-height: 0; }
  #main .about-layout-card .about-text { align-self: end; width: auto; margin: 220px 12px 12px; padding: 22px; }
  #main .about-layout-centred .about-photo { aspect-ratio: 4 / 3; }
}
.corners-square .about-layout-card .about-text { border-radius: 0; }
.corners-rounded .about-layout-card .about-text { border-radius: 20px; }
/* Cards are always white and text on a photo is always white, so a section's custom text colours
   (picked for its own background) must not reach them: white on the white card is unreadable. */
#main > .hero.hero-layout-card .hero-text :is(h1, h2, .lead, .lead p, .hero-proof, .hero-proof a),
#main > .section-type-about.about-layout-card .about-text :is(h2, .lead, .lead p, .about-more, .about-more p, .ticks li) { color: #1b1b1b; }
#main > .hero:is(.hero-layout-overlay, .hero-layout-inset, .hero-layout-wordmark) .hero-text :is(h1, h2, .lead, .lead p, .hero-proof, .hero-proof a) { color: #fff; }

/* Reviews "First review large" (5 November 2026): the first review full width with a bigger quote,
   the rest in two columns under it. */
#main .reviews-layout-featured .reviews { grid-template-columns: minmax(0, 1fr); }
#main .reviews-layout-featured .review:first-child { padding: 36px; }
#main .reviews-layout-featured .review:first-child blockquote p { font-size: 24px; line-height: 1.45; }
@media (min-width: 760px) {
  #main .reviews-layout-featured .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main .reviews-layout-featured .review:first-child { grid-column: 1 / -1; padding: 44px 48px; }
  #main .reviews-layout-featured .review:first-child blockquote p { font-size: 28px; max-width: 40ch; }
}
#main .reviews-layout-featured .review:first-child { align-items: center; text-align: center; }
#main .reviews-layout-featured .review:first-child blockquote p { margin-inline: auto; }
#main .reviews-layout-featured .review:first-child figcaption { width: min(100%, 320px); justify-items: center; }

/* ---- Layouts added 5 November 2026 (owner: more layouts for every section) ---- */
/* Contact: centred heading and details, a narrower form under them. */
#main .quote-centred { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 32px; }
#main .quote-centred .quote-intro { max-width: 640px; }
#main .quote-centred .contact-lines { justify-items: center; }
#main .quote-centred .contact-social { justify-content: center; }
#main .quote-centred .quote-form { width: min(100%, 680px); text-align: left; }
/* Pricing: two columns. */
@media (min-width: 760px) { #main .pricing-layout-two .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; } }
/* Video: video on the left, text beside it. */
@media (min-width: 900px) {
  #main .video-layout-left .video-inner { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: 48px; }
  #main .video-layout-left .video-frame { grid-column: 1; grid-row: 1; }
  #main .video-layout-left .video-copy { grid-column: 2; grid-row: 1; }
}
/* Table: boxed in a white card with a shaded header row. */
#main .table-layout-boxed .site-table { background: var(--white); border: 1px solid var(--line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
#main .table-layout-boxed .site-table :is(th, td) { padding: 14px 18px; }
#main .table-layout-boxed .site-table thead th { background: var(--grey); color: var(--ink); border-bottom: 1px solid var(--line); }
#main .table-layout-boxed .site-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
@media (max-width: 600px) { #main .table-layout-boxed .site-table tr { padding: 14px 16px; } #main .table-layout-boxed .site-table :is(th, td) { padding: 2px 0; } }
/* Logo strip: large logos, fewer to a row. */
#main .logos-layout-large .logos { gap: 32px 56px; }
#main .logos-layout-large .logos li { min-height: 96px; }
#main .logos-layout-large .logos img { max-height: 88px; max-width: 220px; }
#main .logos-layout-large .logos span { font-size: 22px; }
/* Map: the text above, the map full width under it. */
#main .map-layout-stacked .map-inner { grid-template-columns: minmax(0, 1fr); }
#main .map-layout-stacked .map-copy { max-width: 720px; }
#main .map-layout-stacked .map-frame { min-height: 380px; }
/* Dates & events: compact, one line each. */
#main .events-layout-compact .event { grid-template-columns: 7.5em minmax(0, 1fr); padding: 10px 0; align-items: baseline; }
#main .events-layout-compact .event-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
#main .events-layout-compact .event-body h3 { margin: 0; font-size: 18px; }
#main .events-layout-compact .event-body p { margin: 0; }
#main .events-layout-compact .event-body p:not(.event-meta) { flex-basis: 100%; color: var(--muted); font-size: 15px; }
/* Opening hours: two columns of days. */
@media (min-width: 640px) { #main .hours-layout-two .opening-hours { max-width: 860px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 48px; } } /* Monday to Thursday, then Friday to Sunday */
/* Before & after: before above after, full width. */
#main .beforeafter-layout-stacked .ba-list { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
#main .beforeafter-layout-stacked .ba-photos { grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* Call to action and Booking: plain, no box, on the section's own background. */
#main .cta-layout-plain .cta-inner, #main .booking-layout-plain .cta-inner { padding: 8px 0; border: 0; background: none; }
/* Menu: each category in its own card. */
#main .menu-layout-cards .menu-groups { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
#main .menu-layout-cards .menu-group { padding: 22px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
#main .menu-layout-cards .menu-group h3 { border-bottom-width: 1px; }
/* Testimonials: one column. */
#main .quotes-layout-list .quotes { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
/* A project with several photos (owner, 6 November 2026): a badge, and the rest wait for the viewer. */
.project-photo { position: relative; }
.project-count { position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(17,17,17,.72); color: #fff; font: 600 13px/1.2 var(--body); pointer-events: none; }
.project-more { display: none; }
/* A project with a before photo (owner, 9 November 2026): a badge, or a split card; the viewer compares. */
.project-photo > .project-zoom { height: 100%; } /* else a portrait cover is cropped from its top, not its focus point */
.project-badge { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(17,17,17,.72); color: #fff; font: 600 13px/1.2 var(--body); pointer-events: none; }
.project-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0); pointer-events: none; }
.project-before img { width: 100%; height: 100%; object-fit: cover; }
.project-photo.is-split::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
/* Opens full size (owner, 9 November 2026: on a phone nothing said a project could be tapped): a small
   expand mark in the corner, the usual sign, beside the photo count when there is one. */
.project-photo > .project-zoom::after { content: ""; position: absolute; right: 10px; bottom: 10px; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(17,17,17,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-6.5 6.5M4 20l6.5-6.5'/%3E%3C/svg%3E") center / 16px no-repeat; pointer-events: none; }
.project-zoom ~ .project-count { right: 48px; bottom: 13px; }
/* A split card can be dragged right here, on a phone or a computer (site.js); a tap still opens it. */
.project-photo.is-split.can-drag { touch-action: pan-y; }
.project-photo.is-split.can-drag img { -webkit-user-drag: none; user-select: none; }
.split-knob { position: absolute; top: 50%; left: var(--split, 50%); z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff; color: var(--ink);
  display: grid; place-items: center; font: 700 13px/1 var(--body); box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none; }
.project:hover .project-photo.is-split img { scale: 1; } /* the zoom on hover would slide the two halves apart */
.project-photo .ba-tag, .photo-viewer-stage .ba-tag { z-index: 1; pointer-events: none; }
.ba-tag.ba-tag-after { left: auto; right: 10px; }
.photo-viewer-stage { position: relative; display: grid; min-height: 0; max-width: 100%; }
.photo-viewer-stage > img { grid-area: 1 / 1; }
.photo-viewer-stage > .photo-viewer-before { width: 0; min-width: 100%; height: 0; min-height: 100%; object-fit: cover; }
.photo-viewer:not(.is-compare) .photo-viewer-stage > :not(img:first-child) { display: none; }
.photo-viewer-stage .ba-range { touch-action: none; }

/* Long words (an email address, a web address, a long business name) wrap instead of pushing a heading,
   card or button wider than a phone: 'anywhere' also lets grid and flex items shrink below the word.
   One rule for every section, so no layout needs its own fix (tools/section-sweep-check.mjs). */
#main, .top, .foot { overflow-wrap: anywhere; }
#main :is(h1, h2, h3) { hyphens: auto; } /* a heading broken mid-word gets its hyphen (pages are lang="en-GB") */

/* A section sliding in sideways starts past the edge: it must not make the page scroll sideways. */
#main { overflow-x: clip; }

/* Header and footer layouts (theme.header, theme.footer: body classes). CSS only, so the editor shows them at once.
   Phones keep the same menu button in every header. */
.header-compact .logo-text > span { display: none; }
@media (min-width: 960px) {
  .header-compact .top-inner { min-height: 60px; }
  .header-centred .top-inner { flex-direction: column; justify-content: center; gap: 2px; padding-block: 10px; }
  .header-centred .top .logo { max-width: 100%; }
  .header-centred .nav { flex-wrap: wrap; justify-content: center; gap: 2px 28px; }
  html:has(.header-centred) { scroll-padding-top: 140px; }
}
.footer-centred .foot-cols { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 64px; text-align: center; }
.footer-centred .foot-brand { flex: 1 0 100%; justify-items: center; }
.footer-centred .foot-small { justify-items: center; text-align: center; }
.footer-centred .logo-text { text-align: left; }
.footer-simple .foot { padding: 32px 0 24px; }
.footer-simple .foot-cols { display: block; }
.footer-simple .foot-cols > :not(.foot-brand) { display: none; }
.footer-simple .foot-small { margin-top: 20px; }
/* Phones: logo and Menu stay on one line, however wide the logo (the name wraps instead). Without script the links stay a wrapped row. */
@media (max-width: 959px) {
  .has-js .top-inner { flex-wrap: nowrap; }
  .has-js .menu-toggle { flex: none; }
}

/* Header and footer backgrounds. Any colour the customer picks: --header-auto-text / --footer-auto-text are black or
   white, whichever reads best (always at least 4.5:1). A photo gets a fixed 60% dark tint, so white text reads on any photo. */
.headerbg-custom .top { --h: var(--header-auto-text); background: var(--header-background-colour); border-bottom-color: transparent; }
.top.has-photo { --h: #fff; background: #333; border-bottom-color: transparent; }
.top-photo { position: absolute; inset: 0; overflow: hidden; }
.top-photo img { width: 100%; height: 100%; object-fit: cover; }
.top-photo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.top-inner { position: relative; }
.top .logo { color: var(--h, var(--ink)); }
.top .logo-text > span { color: var(--h, var(--muted)); }
.top .nav a:not(.btn) { color: var(--h, var(--text)); }
.top .nav a:not(.btn):hover { color: var(--h, var(--ink)); }
.has-js .top .nav.is-open a:not(.btn) { color: var(--text); } /* the phone menu is always on white */
.footerbg-custom .foot { --ink: var(--footer-auto-text); --text: var(--footer-auto-text); --muted: var(--footer-auto-text); color: var(--footer-auto-text); background: var(--footer-background-colour); border-top-color: transparent; }

/* Website settings (9 November 2026): page colour, accent font, heading decoration, the line above headings.
   Page colour: like the header/footer colours, any colour the customer picks; --page-auto-text is black or
   white so the page text stays readable. Everything drawn on its own white (cards, the white header, the
   phone menu, buttons) keeps the normal dark text, or it would turn white on white with a dark page. */
:root { --brand-ink: var(--ink); }
body.pagebg-custom { --ink: var(--page-auto-text); --text: var(--page-auto-text); --muted: var(--page-auto-text); --line: color-mix(in srgb, var(--page-auto-text) 18%, transparent); background: var(--page-background-colour); color: var(--text); }
/* Grey bands become a slight shade of the page, moved AWAY from the text colour (lighter under black text,
   darker under white) so contrast only improves. Browsers without relative colours show the plain page. */
.pagebg-custom .band-grey { background: var(--page-background-colour); background: color-mix(in srgb, rgb(from var(--page-auto-text) calc(255 - r) calc(255 - g) calc(255 - b)) 8%, var(--page-background-colour)); }
.pagebg-custom.headerbg-white .top { background: var(--page-background-colour); }
.pagebg-custom .btn:not(.btn-line), .pagebg-custom .site-notice { --ink: var(--brand-ink); }
/* Painted with the ink colour, so they keep the original ink (white text on it) whatever the page. */
.pagebg-custom :is(.band-ink, .facts, .video-frame, .chips, .photo-tabs [role=tab][aria-selected=true], .social-mark, .skip) { --ink: var(--brand-ink); }
.pagebg-custom :is(.review, .steps li, .quote-form, .price-card, .cta-inner, .logos-layout-grid .logos li, .photo-tabs [role=tab], .events-layout-cards .event, .hours-layout-cards .opening-hours > div, .areas li, .quotes-nav button, .tm-quote, .social-link, .posts-layout-cards .post, .table-layout-boxed .site-table, .menu-layout-cards .menu-group, .hero-layout-card .hero-text, .table-layout-striped .site-table tbody tr, .map-frame, .menu-toggle),
.has-js .pagebg-custom .top .nav.is-open { --ink: var(--brand-ink); --text: #2b2d31; --muted: #5b616b; --line: #e3e5e8; color: var(--text); }
.accent-caveat { --accent: 'Caveat', cursive; }
.accent-pacifico { --accent: 'Pacifico', cursive; }
.accent-marker { --accent: 'Permanent Marker', cursive; }
.accent-playfair { --accent: 'Playfair Display', Georgia, serif; }
.accent-oswald { --accent: 'Oswald', 'Arial Narrow', sans-serif; }
.accent-mono-web { --accent: 'Space Mono', 'Courier New', monospace; }
/* The line above a heading: small capitals (default), a pill, or the accent font. */
.kicker { margin: 0 0 10px; font: 700 13px/1.4 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: inherit; overflow-wrap: anywhere; }
.kicker-pill .kicker { display: inline-block; width: fit-content; max-width: 100%; padding: 4px 12px; border: 1px solid currentColor; border-radius: 999px; letter-spacing: 0.08em; }
.kicker-accent .kicker { margin-bottom: 4px; font: 400 clamp(22px, 2.6vw, 30px)/1.2 var(--accent, var(--head)); letter-spacing: 0; text-transform: none; color: inherit; }
.kicker-accent.accent-playfair .kicker { font-style: italic; }
.kicker + :is(h1, h2) { margin-top: 0; }
.kicker { grid-column: 1 / -1; } /* in a two-column header (FAQ, How a job runs) the line spans the row; the heading keeps its column */
/* Heading decoration on section headings (their ids end in -title); the hero's own heading is left alone. */
.headdeco-rule #main [id$="-title"]:is(h1, h2):not(.hero-heading) { padding-bottom: 16px; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.headdeco-mark #main [id$="-title"]:is(h1, h2):not(.hero-heading)::before,
.headdeco-dots #main [id$="-title"]:is(h1, h2):not(.hero-heading)::before { display: block; margin-bottom: 10px; font: 400 22px/1 var(--body); letter-spacing: 0.3em; color: var(--yellow); content: "\2726"; content: "\2726" / ""; }
.headdeco-dots #main [id$="-title"]:is(h1, h2):not(.hero-heading)::before { content: "\2022\2022\2022"; content: "\2022\2022\2022" / ""; font-size: 16px; }

/* Services with photos (9 November 2026). The photo is optional in every layout; tiles, zig-zag and
   mosaic are built around it. Text on a photo sits on a fixed dark tint and stays white. */
.service-photo { margin-bottom: 14px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--grey); }
.service-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.corners-square .service-photo { border-radius: 0; }
.corners-rounded .service-photo { border-radius: 20px; }
#main .services-layout-list .service.has-photo { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: center; }
#main .services-layout-list .service.has-photo .service-photo { margin: 0; aspect-ratio: 1 / 1; }
#main .services-layout-cards .service { overflow: hidden; }
#main .services-layout-cards .service-photo { margin: -24px -24px 18px; border-radius: 0; }
/* Photo tiles and mosaic: the photo fills the tile, the words sit on it. */
#main :is(.services-layout-tiles, .services-layout-bento) .services { border: 0; gap: 16px; }
#main :is(.services-layout-tiles, .services-layout-bento) .service { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 260px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #1f2328; }
.corners-square #main :is(.services-layout-tiles, .services-layout-bento) .service { border-radius: 0; }
.corners-rounded #main :is(.services-layout-tiles, .services-layout-bento) .service { border-radius: 20px; }
#main :is(.services-layout-tiles, .services-layout-bento) .service-photo { position: absolute; inset: 0; z-index: -1; margin: 0; border-radius: 0; aspect-ratio: auto; }
#main :is(.services-layout-tiles, .services-layout-bento) .service-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .25)); }
#main [class*="section-type-"]:is(.services-layout-tiles, .services-layout-bento) .service .service-text { position: relative; width: 100%; padding: 22px; --ink: #fff; --text: #fff; --muted: #fff; --white: #1b1b1b; color: #fff; }
#main [class*="section-type-"]:is(.services-layout-tiles, .services-layout-bento) .service .service-text :is(h3, p) { color: #fff; overflow-wrap: anywhere; }
#main [class*="section-type-"]:is(.services-layout-tiles, .services-layout-bento) .service .service-text h3 { font-size: clamp(20px, 2vw, 26px); }
@media (min-width: 640px) { #main .services-layout-bento .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } #main .services-layout-bento .service:first-child { grid-column: 1 / -1; min-height: 340px; } }
@media (min-width: 960px) {
  #main .services-layout-tiles .services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #main .services-layout-bento .services { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; }
  #main .services-layout-bento .service { min-height: 240px; }
  #main .services-layout-bento .service:first-child { grid-column: span 2; grid-row: span 2; min-height: 496px; }
  #main .services-layout-bento .service:first-child h3 { font-size: clamp(26px, 2.6vw, 36px); }
}
/* Zig-zag: photo and text side by side, swapping sides each row; stacked on phones. */
#main .services-layout-zigzag .services { grid-template-columns: minmax(0, 1fr); gap: 40px; border-top: 0; }
#main .services-layout-zigzag .service { padding: 0; border: 0; }
#main .services-layout-zigzag .service h3 { font-size: clamp(22px, 2.4vw, 30px); }
@media (min-width: 760px) {
  #main .services-layout-zigzag .services { gap: 56px; }
  #main .services-layout-zigzag .service.has-photo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
  #main .services-layout-zigzag .service.has-photo .service-photo { margin: 0; }
  #main .services-layout-zigzag .service.has-photo:nth-child(even) .service-photo { order: 2; }
}
/* Mosaic with any number of services (1 to 8) and no holes: the last tiles stretch to fill their row. */
@media (min-width: 640px) and (max-width: 959px) { #main .services-layout-bento .service:first-child:nth-last-child(2n) ~ .service:last-child { grid-column: 1 / -1; } }
@media (min-width: 960px) {
  #main .services-layout-bento .service:first-child:last-child { grid-column: 1 / -1; grid-row: auto; min-height: 380px; }
  #main .services-layout-bento .service:first-child:nth-last-child(2) ~ .service { grid-column: span 2; grid-row: span 2; }
  #main .services-layout-bento .service:first-child:nth-last-child(3) ~ .service { grid-column: span 2; }
  #main .services-layout-bento .service:first-child:nth-last-child(4) ~ .service:last-child { grid-column: span 2; }
  #main .services-layout-bento .service:first-child:nth-last-child(6) ~ .service:last-child { grid-column: 1 / -1; }
  #main .services-layout-bento .service:first-child:nth-last-child(7) ~ .service:nth-last-child(-n+2) { grid-column: span 2; }
  #main .services-layout-bento .service:first-child:nth-last-child(8) ~ .service:last-child { grid-column: span 2; }
}
/* Photo tiles with any number of services and no lone tile: a six-part grid where the last row stretches
   (four services make two rows of two). */
@media (min-width: 640px) and (max-width: 959px) { #main .services-layout-tiles .service:first-child:nth-last-child(2n+1) ~ .service:last-child, #main .services-layout-tiles .service:first-child:last-child { grid-column: 1 / -1; } }
@media (min-width: 960px) {
  #main .services-layout-tiles .services { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #main .services-layout-tiles .service { grid-column: span 2; }
  #main .services-layout-tiles .service:first-child:last-child, #main .services-layout-tiles .service:first-child:nth-last-child(3n+7) ~ .service:last-child { grid-column: 1 / -1; }
  #main .services-layout-tiles .service:first-child:nth-last-child(2), #main .services-layout-tiles .service:first-child:nth-last-child(3n+2) ~ .service:nth-last-child(-n+2) { grid-column: span 3; }
  #main .services-layout-tiles .service:first-child:nth-last-child(4), #main .services-layout-tiles .service:first-child:nth-last-child(4) ~ .service { grid-column: span 3; }
}

/* Call to action, Big statement (9 November 2026): the photo fills the band behind one giant line, on a
   fixed dark tint; without a photo the band is dark. The words stay white whatever the section's colours
   or the page colour. The heading size options (compact, large, custom) still win over the giant size. */
.cta-photo { display: none; }
#main > [class*="section-type-"].cta-layout-statement { position: relative; isolation: isolate; overflow: hidden; background: #1f2328; }
#main :where(.cta-layout-statement) { padding-block: clamp(88px, 12vw, 168px); } /* weak on purpose: the section's own spacing choices still win */
#main .cta-layout-statement .cta-photo { display: block; position: absolute; inset: 0; z-index: -1; }
#main .cta-layout-statement .cta-photo img { width: 100%; height: 100%; object-fit: cover; }
#main .cta-layout-statement .cta-photo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
#main [class*="section-type-"].cta-layout-statement .cta-inner { padding: 0; border: 0; background: none; --ink: #fff; --text: #fff; --muted: #fff; color: #fff; }
#main [class*="section-type-"].cta-layout-statement .cta-inner :is(h2, .lead, .kicker) { color: #fff; }
#main [class*="section-type-"].cta-layout-statement .cta-inner .btn { --ink: var(--brand-ink); } /* the button keeps its own readable text */
#main [class*="section-type-"].cta-layout-statement .cta-copy { max-width: min(100%, 1000px); justify-items: center; }
#main :where(.cta-layout-statement) h2 { max-width: 14ch; font-size: clamp(40px, 7vw, 96px); line-height: 1.02; overflow-wrap: break-word; hyphens: auto; } /* ch of the heading itself; words break only when one cannot fit */
#main [class*="section-type-"].cta-layout-statement .cta-copy .lead { max-width: 40ch; justify-self: center; }
/* Feature list, Big numbers: each point large (25+, 4,500, 24/7) with its line under it. */
#main .features-layout-numbers .features { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 32px 40px; }
#main .features-layout-numbers .features li { padding: 16px 0 0; border-top: 3px solid var(--yellow); gap: 8px; }
#main .features-layout-numbers .features li::before { display: none; }
#main .features-layout-numbers .features span { font-weight: 400; }
#main .features-layout-numbers .features strong { font: 800 clamp(36px, 4.4vw, 60px)/1.05 var(--head); letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }

/* Overlap layouts (9 November 2026): About "Photo with a card over its edge" and Map "Photo with a visit
   card". The card is always white with dark text (like About's card layout), overlapping the photo's
   side on wide screens and its bottom on phones. The visit layout loads no map at all. */
.map-photo { display: none; }
#main :is(.about-layout-overlap .about, .map-layout-photo .map-inner.has-photo) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
#main .map-layout-photo .has-photo .map-photo { display: block; margin: 0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--grey); }
#main .map-layout-photo .has-photo .map-photo img { width: 100%; height: 100%; object-fit: cover; }
#main .map-layout-photo .has-photo .map-frame { display: none; }
#main :is(.about-layout-overlap .about-text, .map-layout-photo .has-photo .map-copy) { position: relative; z-index: 1; margin: -56px 12px 0; padding: 24px; border-radius: 12px; background: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, .18); --ink: #1b1b1b; --text: #2b2d31; --muted: #5b616b; --line: #e3e5e8; color: var(--text); }
.corners-square #main :is(.about-layout-overlap .about-text, .map-layout-photo .has-photo .map-copy, .map-layout-photo .has-photo .map-photo) { border-radius: 0; }
.corners-rounded #main :is(.about-layout-overlap .about-text, .map-layout-photo .has-photo .map-copy, .map-layout-photo .has-photo .map-photo) { border-radius: 20px; }
#main > .section-type-about.about-layout-overlap .about-text :is(h2, .kicker, .lead, .lead p, .about-more, .about-more p, .ticks li),
#main > .section-type-map.map-layout-photo .has-photo .map-copy :is(h2, .kicker, .map-text, .map-text p) { color: #1b1b1b; }
@media (min-width: 960px) {
  #main :is(.about-layout-overlap .about, .map-layout-photo .map-inner.has-photo) { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  #main :is(.about-layout-overlap .about-photo, .map-layout-photo .has-photo .map-photo) { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 4 / 3; }
  #main :is(.about-layout-overlap .about-text, .map-layout-photo .has-photo .map-copy) { grid-column: 8 / 13; grid-row: 1; margin: 0; padding: 40px; }
}

/* Photo frame (Website settings): a thin line or a block of the accent colour just behind the main photos,
   offset down and right. The photo's box stops clipping (its image clips itself instead) so the frame shows.
   Never on photos that fill a background (overlay, card, inset and wordmark heroes, About's card layout): those
   are left out of the selectors, because the frame's position:relative would undo their position:absolute. */
:root { --frame-off: 10px; }
@media (min-width: 960px) { :root { --frame-off: 18px; } }
:is(.frame-line, .frame-block) :is(.hero:not(.hero-layout-overlay, .hero-layout-card, .hero-layout-inset, .hero-layout-wordmark) .hero-photo, .section-type-about:not(.about-layout-card) .about-photo, .map-photo, .services-layout-zigzag .service-photo) { position: relative; isolation: isolate; overflow: visible; }
:is(.frame-line, .frame-block) :is(.hero:not(.hero-layout-overlay, .hero-layout-card, .hero-layout-inset, .hero-layout-wordmark) .hero-photo, .section-type-about:not(.about-layout-card) .about-photo, .map-photo, .services-layout-zigzag .service-photo) img { border-radius: inherit; }
:is(.frame-line, .frame-block) :is(.hero:not(.hero-layout-overlay, .hero-layout-card, .hero-layout-inset, .hero-layout-wordmark) .hero-photo, .section-type-about:not(.about-layout-card) .about-photo, .map-photo, .services-layout-zigzag .service-photo)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translate(var(--frame-off), var(--frame-off)); pointer-events: none; }
.frame-line :is(.hero:not(.hero-layout-overlay, .hero-layout-card, .hero-layout-inset, .hero-layout-wordmark) .hero-photo, .section-type-about:not(.about-layout-card) .about-photo, .map-photo, .services-layout-zigzag .service-photo)::before { border: 2px solid var(--ink); }
.frame-block :is(.hero:not(.hero-layout-overlay, .hero-layout-card, .hero-layout-inset, .hero-layout-wordmark) .hero-photo, .section-type-about:not(.about-layout-card) .about-photo, .map-photo, .services-layout-zigzag .service-photo)::before { background: var(--yellow); }

/* Step 5 (9 November 2026). Heroes "inset" and "wordmark" are overlay heroes (every overlay rule above covers
   them): inset sits inside a margin with rounded corners; wordmark sets the headline huge across the bottom
   of the photo with the sentence and buttons above it. The heading size options still win. */
.hero-layout-inset .hero-inner { width: calc(100% - 2 * clamp(8px, 1.4vw, 20px)); margin: clamp(8px, 1.4vw, 20px) auto 0; border-radius: 16px; overflow: hidden; }
.corners-square .hero-layout-inset .hero-inner { border-radius: 0; }
.corners-rounded .hero-layout-inset .hero-inner { border-radius: 28px; }
.hero-layout-wordmark .hero-text { display: flex; flex-direction: column; padding-top: 140px; }
.hero-layout-wordmark .hero-heading { order: 9; max-width: none; margin-top: 28px; font-size: clamp(48px, 10.5vw, 168px); line-height: 0.92; letter-spacing: -0.03em; overflow-wrap: break-word; hyphens: auto; }
.hero.hero-layout-wordmark .hero-photo::after { background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .72)); }
/* Testimonials "one big quote": the carousel, one quote at a time, large, on the accent colour (dark text, as
   on the buttons). Choosing a section background (white, grey or your own colour) still wins. */
#main :where(.quotes-layout-spotlight) { background: var(--yellow); --ink: var(--accent-auto-text, var(--brand-ink)); --text: var(--accent-auto-text, var(--brand-ink)); --muted: var(--accent-auto-text, var(--brand-ink)); color: var(--text); }
#main .quotes-layout-spotlight .quotes-carousel { grid-auto-columns: 100%; scrollbar-width: none; } /* one in view: the arrows and swiping move it, a bar would look broken */
#main .quotes-layout-spotlight .quotes-carousel::-webkit-scrollbar { display: none; }
#main .quotes-layout-spotlight .tm-quote { justify-items: center; padding: 8px 0; border: 0; background: none; text-align: center; --ink: var(--accent-auto-text, var(--brand-ink)); --text: var(--accent-auto-text, var(--brand-ink)); --muted: var(--accent-auto-text, var(--brand-ink)); } /* on the accent, not a white card: the page-colour card rule must not reach it */
#main .quotes-layout-spotlight .tm-quote blockquote p { max-width: 32ch; margin: 0 auto; font: 600 clamp(22px, 3.2vw, 40px)/1.3 var(--head); letter-spacing: -0.01em; color: var(--ink); }
/* Swipe rows: products, services or menu categories in one row that scrolls sideways (the page never does). */
#main :is(.products-layout-rail .products, .services-layout-rail .services, .menu-layout-rail .menu-groups) { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(80%, 320px); gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 12px; border-top: 0; }
#main :is(.products-layout-rail .products, .services-layout-rail .services, .menu-layout-rail .menu-groups) > * { scroll-snap-align: start; }
#main :is(.products-layout-rail .products, .services-layout-rail .services, .menu-layout-rail .menu-groups):focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
#main .services-layout-rail .service { padding: 0; border: 0; }
#main .menu-layout-rail .menu-group { padding: 22px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.corners-square #main .menu-layout-rail .menu-group { border-radius: 0; }
.pagebg-custom #main .menu-layout-rail .menu-group { --ink: var(--brand-ink); --text: #2b2d31; --muted: #5b616b; --line: #e3e5e8; color: var(--text); }

/* Text drawn ON the accent colour (buttons, notices, step numbers, the big quote) is black or white, whichever
   reads (--accent-auto-text, like the header and footer colours); a design or customer may pick any accent.
   Hover moves the accent AWAY from that text colour, so hovering never makes the words harder to read. */
@supports (color: rgb(from red r g b)) {
  :root { --accent-hover: color-mix(in srgb, var(--yellow) 84%, rgb(from var(--accent-auto-text, #000000) calc(255 - r) calc(255 - g) calc(255 - b))); }
  .btn:not(.btn-line):hover { background: var(--accent-hover); border-color: var(--accent-hover); }
}