/* THE HOUSE DESIGN SYSTEM (spec 2026-10-04-ai-design-loop; proven on Klipspringer, 2026-10-04).
   Styles the site bundle's neutral HTML exactly as shipped. Every choice is a SETTING:
   a custom property on :root (numbers, colours, fonts) or a data-attribute on <html>
   (which variant of a block). The AI designer writes settings, never CSS. */

:root {
  --bg: #fff; --soft: #f6f4f0; --ink: #1d1d1f; --muted: #55575c; --heading: #111; --line: #e6e2dc;
  --primary: #d08c2b; --primary-ink: #fff; --accent: #2b4d5e; --dark: #221811; --dark-ink: #f7f4f0; --dark-muted: #cfc6bb;
  --font-h: 'Poppins', sans-serif; --font-b: 'Karla', sans-serif;
  --h-weight: 700; --h-track: -0.01em; --h-case: none; --h-lh: 1.12;
  --base: 17px; --ratio: 1.25; --b-lh: 1.65;
  --space: 1; --container: 1160px; --measure: 68ch; --gap: 24px;
  --r-btn: 8px; --r-card: 12px; --r-img: 12px;
  --shadow: 0 10px 30px -12px rgb(0 0 0 / .18);
  --edge-depth: 4vw;
  /* Room above and below a section (Tomek, 2026-10-09): 64px on a computer, easing to 44px by tablet width; 36px on a phone (below). */
  --sec-y: calc(clamp(44px, 5.9vw - 21px, 64px) * var(--space));
  --yes: #1d6b45; --no: #b42323; /* fixed marker colours (a tick, a cross): never Design settings */
  --tint3: #f3efe2; --counter: #4f8a8b; --counter-ink: #ffffff; --counter-text: #437e7f; --counter-big: #4f8a8b; --strip: #4f8a8b; --strip-ink: #ffffff;
  --accent-bg: #221811; --accent-ink: #f7f4f0; --accent-link: #f7f4f0; --header-alt: #221811; --header-alt-ink: #f7f4f0;
  --card-fill: #ffffff; --card-tint: #edf3f3; --star: #f5b301;
  --fs-b-c: 18px; --fs-b-t: 17px; --fs-b-p: 16px; --fs-h1-c: 56px; --fs-h1-t: 44px; --fs-h1-p: 32px;
  --fs-h2-c: 40px; --fs-h2-t: 32px; --fs-h2-p: 26px; --fs-shift: 0px; --fs-scale: 1;
  --btn-scale: 1; --r-box: 28px; --box-pad: 48px; --strip-size: 19px;
}

@media (max-width: 760px) { :root { --sec-y: calc(36px * var(--space)); } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-b); font-size: var(--base); line-height: var(--b-lh); }
/* Overlays reach past a band (the circle at right: -34px): clip them, never scroll sideways. `clip` is no scroll container, so a sticky child still sticks. */
main { overflow-x: clip; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-h); font-weight: var(--h-weight); letter-spacing: var(--h-track); text-transform: var(--h-case);
  line-height: var(--h-lh); color: var(--heading); margin: 0 0 .5em; text-wrap: balance; }
h2 { font-size: clamp(1.6rem, calc(.9rem + 2.4vw), calc(1rem * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))); }
h3 { font-size: calc(1rem * var(--ratio)); line-height: 1.25; letter-spacing: 0; text-transform: none; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { padding: 0; margin: 0; list-style: none; }

/* ---------- frame ---------- */
.lr-header { position: sticky; top: var(--lr-bn-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); }
.lr-header .in { max-width: var(--container); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 24px; }
.lr-header [data-site-name] { font-family: var(--font-h); font-weight: var(--h-weight); font-size: 1.15rem; text-decoration: none; color: var(--heading); letter-spacing: var(--h-track); }
.lr-header nav { display: flex; gap: 22px; font-size: .95rem; margin-left: auto; }
.lr-header nav a { text-decoration: none; color: var(--muted); }
/* The menu never wraps: a label is one line, and theme.js folds what does not fit into Resources and More (menu spec 2026-10-05). */
.lr-header nav { flex-shrink: 0; }
.lr-header nav a, .lr-nav-group > summary { white-space: nowrap; }
.lr-header [data-site-name] { flex-shrink: 0; }
.lr-header nav a:hover { color: var(--heading); }
/* a menu group: a dropdown under its name (a <details>, so it opens with no script) */
.lr-header nav { align-items: center; }
.lr-nav-group { position: relative; }
.lr-nav-group > summary { list-style: none; cursor: pointer; color: var(--muted); }
.lr-nav-group > summary::-webkit-details-marker { display: none; }
.lr-nav-group > summary::after { content: ''; display: inline-block; width: .38em; height: .38em; margin-left: .4em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-.2em) rotate(45deg); }
.lr-nav-group[open] > summary, .lr-nav-group > summary:hover { color: var(--heading); }
.lr-nav-menu { position: absolute; top: calc(100% + 10px); left: -14px; min-width: 220px; display: grid; gap: 2px; padding: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--card-radius, 12px); box-shadow: 0 12px 32px rgb(0 0 0 / .12); z-index: 30; }
.lr-nav-menu::before { content: ''; position: absolute; inset: -12px 0 auto; height: 12px; }
.lr-nav-menu a { padding: 8px 10px; border-radius: 8px; white-space: nowrap; }
.lr-nav-menu a:hover { background: var(--soft); }
.lr-nav-group[data-lr-more-group] > .lr-nav-menu { left: auto; right: -14px; }
.lr-phone-menu { display: none; }
.lr-phone-menu > summary { list-style: none; cursor: pointer; font-weight: 600; color: var(--heading); padding: .2em .45em; font-size: 1.45rem; line-height: 1; }
.lr-phone-menu > summary::-webkit-details-marker, .lr-phone-group > summary::-webkit-details-marker { display: none; }
html[data-header="dark"] .lr-nav-group > summary, html[data-header="dark"] .lr-phone-menu > summary { color: var(--dark-ink); }
.lr-header [data-site-buttons] { display: flex; gap: 10px; }
.lr-header [data-site-buttons] [data-button] { padding: .55em 1em; font-size: .9rem; }
/* Design › Header › Button: Hide (Tomek, 2026-10-20) takes the main button out of every page's header. */
html[data-header-button="hide"] .lr-header [data-site-buttons] { display: none; }
html[data-header="dark"] .lr-header { background: var(--dark); border-color: transparent; }
html[data-header="dark"] .lr-header [data-site-name] { color: var(--dark-ink); }
html[data-header="dark"] .lr-header nav a { color: var(--dark-muted); }
/* ---------- the page being read ---------- */
/* THE PAGE BEING READ (Tomek 2026-11-06): its menu entry, or the drop-down holding it, reads as the heading with the
   main colour under it; inside a drop-down or the phone menu it is the bold, shaded row. (pageDocument marks them.) */
.lr-header nav > a[aria-current="page"], .lr-nav-group[data-lr-current] > summary { color: var(--heading); text-decoration: underline 2px var(--primary); text-underline-offset: 7px; }
html[data-header="dark"] .lr-header nav > a[aria-current="page"], html[data-header="dark"] .lr-nav-group[data-lr-current] > summary { color: var(--dark-ink); }
.lr-nav-menu a[aria-current="page"] { background: var(--soft); color: var(--heading); font-weight: 600; }
.lr-phone-menu a[aria-current="page"], .lr-phone-group[data-lr-current] > summary { color: var(--heading); font-weight: 700; }
/* ---------- end the page being read ---------- */

main > section { padding: var(--sec-y) max(24px, calc((100% - var(--container)) / 2)); position: relative; }
main > section > * { max-width: var(--measure); }
main > section > ul[data-block], main > section > div[data-block], main > section > ol, main > section > ul { max-width: none; }
/* Home About & Team: the people's cards drawn inside the written band (`teamJoinsBandAbove`) take its full width. */
main > section > section[data-section-type="about_team"] { max-width: none; }
/* BAND ALIGNMENT (unified editor §6): Left, Centre or Right moves EVERY line of text in the bands below the hero — headings,
   paragraphs, lists, cards and buttons. A form, a table, the order page, the contact page's routes and side panel, and
   a product page's top area (title, price, buy) and information fold stay left. The hero keeps its own (Where the words sit). Values are physical. */
html[data-align="center"] main > section:not([data-section-type="hero"]) { text-align: center; }
html[data-align="right"] main > section:not([data-section-type="hero"]) { text-align: right; }
html[data-align="center"] main > section:not([data-section-type="hero"]) :is(h2, h2 + p, p, ul, ol, blockquote, figcaption, [data-block="faq"]) { margin-left: auto; margin-right: auto; }
html[data-align="right"] main > section:not([data-section-type="hero"]) :is(h2, h2 + p, p, ul, ol, blockquote, figcaption, [data-block="faq"]) { margin-left: auto; margin-right: 0; }
html:is([data-align="center"], [data-align="right"]) main > section:not([data-section-type="hero"]) > h2 { max-width: 34ch; }
html:is([data-align="center"], [data-align="right"]) main > section:not([data-section-type="hero"]) > h2 + p { max-width: 60ch; }
html[data-align="center"] main > section:not([data-section-type="hero"]) [data-block="buttons"] { justify-content: center; }
html[data-align="right"] main > section:not([data-section-type="hero"]) [data-block="buttons"] { justify-content: flex-end; }
html:is([data-align="center"], [data-align="right"]) main > section:not([data-section-type="hero"]) :is(ul, ol):not([data-block]) { list-style-position: inside; padding-left: 0; }
html[data-align] main > section:not([data-section-type="hero"]) :is(form, input, select, textarea, table, [data-order-page], [data-product-fold], [data-contact-details], [data-contact-side], [data-route]) { text-align: left; }
html[data-align] main > section:is([data-section-type="product_section"], [data-section-type="product_top"]) { text-align: left; }
html[data-align] main > section:is([data-section-type="product_section"], [data-section-type="product_top"]) :is(h2, h2 + p, p, ul, ol) { margin-left: 0; margin-right: 0; }
html[data-align] main > section:is([data-section-type="product_section"], [data-section-type="product_top"]) [data-block="buttons"] { justify-content: flex-start; }

/* ---------- a band's own alignment ---------- */
/* The Editor's Left / Centre / Right on one band (Tomek 2026-11-06): `:root` outweighs html[data-align]. */
:root main > section[data-align="left"]:not([data-section-type="hero"]) { text-align: left; }
:root main > section[data-align="center"]:not([data-section-type="hero"]) { text-align: center; }
:root main > section[data-align="right"]:not([data-section-type="hero"]) { text-align: right; }
:root main > section[data-align="left"]:not([data-section-type="hero"]) :is(h2, h2 + p, p, ul, ol, blockquote, figcaption, [data-block="faq"]) { margin-left: 0; margin-right: 0; }
:root main > section[data-align="center"]:not([data-section-type="hero"]) :is(h2, h2 + p, p, ul, ol, blockquote, figcaption, [data-block="faq"]) { margin-left: auto; margin-right: auto; }
:root main > section[data-align="right"]:not([data-section-type="hero"]) :is(h2, h2 + p, p, ul, ol, blockquote, figcaption, [data-block="faq"]) { margin-left: auto; margin-right: 0; }
:root main > section:is([data-align="center"], [data-align="right"]):not([data-section-type="hero"]) > h2 { max-width: 34ch; }
:root main > section:is([data-align="center"], [data-align="right"]):not([data-section-type="hero"]) > h2 + p { max-width: 60ch; }
:root main > section[data-align="left"]:not([data-section-type="hero"]) > :is(h2, h2 + p) { max-width: none; }
:root main > section[data-align="left"]:not([data-section-type="hero"]) [data-block="buttons"] { justify-content: flex-start; }
:root main > section[data-align="center"]:not([data-section-type="hero"]) [data-block="buttons"] { justify-content: center; }
:root main > section[data-align="right"]:not([data-section-type="hero"]) [data-block="buttons"] { justify-content: flex-end; }
:root main > section:is([data-align="center"], [data-align="right"]):not([data-section-type="hero"]) :is(ul, ol):not([data-block]) { list-style-position: inside; padding-left: 0; }
:root main > section[data-align]:not([data-section-type="hero"]) :is(form, input, select, textarea, table, [data-order-page], [data-product-fold], [data-contact-details], [data-contact-side], [data-route]) { text-align: left; }
html[data-mark="bar"] main > section[data-align="left"]:not([data-section-type="hero"]) > h2::before { margin-left: 0; margin-right: 0; }
html[data-mark="bar"] main > section[data-align="center"]:not([data-section-type="hero"]) > h2::before { margin-left: auto; margin-right: auto; }
html[data-mark="bar"] main > section[data-align="right"]:not([data-section-type="hero"]) > h2::before { margin-left: auto; margin-right: 0; }
/* ---------- end a band's own alignment ---------- */

/* heading mark: a small accent above every section heading */
html[data-mark="bar"] main > section > h2::before,
html[data-mark="bar"] [data-block="recent-work"] > h2::before,
html[data-mark="bar"] [data-block="location-band"] > h2::before { content: ''; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--primary); margin-bottom: .7em; }
html[data-mark="bar"][data-align="center"] main > section:not([data-section-type="hero"]) > h2::before { margin-left: auto; margin-right: auto; }
html[data-mark="bar"][data-align="right"] main > section:not([data-section-type="hero"]) > h2::before { margin-left: auto; margin-right: 0; }
html[data-mark="dot"] main > section > h2::before { content: '● '; color: var(--primary); font-size: .5em; vertical-align: .35em; }

/* section rhythm (v1): which sections get a band. Never on a theme band (.lr-band): the bands' own colours (Two / Three /
   With dark) decide those (spec 2026-10-05-designer-shape-picker S4). */
html[data-rhythm="soft"] main > section:nth-of-type(even):not([data-section-type="hero"]):not([data-section-type="trust_bar"]):not(.lr-band) { background: var(--soft); }
html[data-rhythm="bold"] main > section[data-section-type="differentiators"]:not(.lr-band),
html[data-rhythm="bold"] main > section[data-section-type="process"]:not(.lr-band),
html[data-rhythm="bold"] main > section[data-section-type="faq"]:not(.lr-band) { background: var(--soft); }
html[data-rhythm="bold"] main > section[data-section-type="testimonial"]:not(.lr-band),
html[data-rhythm="bold"] main > section[data-section-type="cta"]:not(.lr-band) { background: var(--dark); color: var(--dark-ink); }
html[data-rhythm="bold"] main > section[data-section-type="testimonial"] h2,
html[data-rhythm="bold"] main > section[data-section-type="cta"] h2 { color: var(--dark-ink); }
/* EVERY hero with no photo is a title block (Tomek, 2026-10-05): its words, button and trust chips are centred. A hero
   with a panel beside its words (contact) keeps its two columns; the editor's missing-photo box is left alone. */
main > section[data-section-type="hero"]:not(.lr-hero-panel):is(.lr-shape:is([data-lr-layout="flat"], [data-lr-layout="title"]), :not(.lr-shape):not(.has-pic)):not(:has([data-missing-hero])):not(:has(> picture)):not(:has(.lr-hero-room)) { text-align: center; }
main > section[data-section-type="hero"]:not(.lr-hero-panel):is(.lr-shape:is([data-lr-layout="flat"], [data-lr-layout="title"]), :not(.lr-shape):not(.has-pic)):not(:has([data-missing-hero])):not(:has(> picture)):not(:has(.lr-hero-room)) :is(h1, p, .lr-words, .lr-words > *) { margin-left: auto; margin-right: auto; }
main > section[data-section-type="hero"]:not(.lr-hero-panel):is(.lr-shape:is([data-lr-layout="flat"], [data-lr-layout="title"]), :not(.lr-shape):not(.has-pic)):not(:has([data-missing-hero])):not(:has(> picture)):not(:has(.lr-hero-room)) :is([data-block="buttons"], [data-block="badges"], [data-cd-boxes]) { justify-content: center; }
@media (max-width: 760px) {
  /* On a phone the chips are the left-aligned checklist (2026-10-03), set as one block in the middle of a centred hero. */
  main > section[data-section-type="hero"]:not(.lr-hero-panel):is(.lr-shape:is([data-lr-layout="flat"], [data-lr-layout="title"]), :not(.lr-shape):not(.has-pic)):not(:has([data-missing-hero])) [data-block="badges"] {
    width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; align-items: flex-start; text-align: left; }
}
/* slanted band edges */
html[data-edge="slant"] main > section[data-section-type="testimonial"],
html[data-edge="slant"] main > section[data-section-type="cta"],
html[data-edge="slant"][data-rhythm="bold"] main > section[data-section-type="process"] {
  clip-path: polygon(0 var(--edge-depth), 100% 0, 100% calc(100% - var(--edge-depth)), 0 100%);
  padding-top: calc(var(--sec-y) + var(--edge-depth)); padding-bottom: calc(var(--sec-y) + var(--edge-depth)); }

/* ---------- buttons ---------- */
[data-button] { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-b); font-weight: 700; font-size: 1rem;
  padding: .85em 1.5em; border-radius: var(--r-btn); text-decoration: none; border: 2px solid var(--primary);
  background: var(--primary); color: var(--primary-ink); transition: transform .15s, filter .15s; line-height: 1.2; }
[data-button]:hover { transform: translateY(-1px); filter: brightness(1.05); }
html[data-buttons="outline"] main [data-button] { background: transparent; color: var(--heading); }
html[data-buttons="pill"] { --r-btn: 999px; }
[data-block="buttons"] { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.4em; }
/* ---------- ask about this ---------- */
/* (product leaves the site, 2026-11-10) the runtime swaps it with Add to order by `hidden`, which the two display:flex
   rules (this one, order.css's card) would otherwise override. */
[data-product-buy] [data-product-ask][hidden], [data-product-buy] [data-order-card][hidden] { display: none; }
/* ---------- end ask about this ---------- */
/* ---------- stock notify ---------- */
/* (back in stock, 2026-11-11) the sign-up <dialog>, in the enquiry form's look */
[data-stock-notify] { padding: 0; margin: auto; border: 0; background: transparent; color: var(--ink); width: min(460px, calc(100vw - 32px)); }
[data-stock-notify]::backdrop { background: color-mix(in srgb, var(--dark) 55%, transparent); }
[data-stock-form], [data-stock-thanks] { display: grid; gap: 12px; padding: 22px; border-radius: var(--r-card); background: var(--bg); box-shadow: var(--shadow); }
[data-stock-notify] [hidden] { display: none; }
[data-stock-notify] h3 { margin: 0; font-family: var(--font-h); font-weight: var(--h-weight); color: var(--heading); font-size: var(--fs-h3); }
[data-stock-notify] p { margin: 0; }
[data-stock-notify] [disabled] { opacity: .6; }
[data-stock-field] { display: flex; flex-direction: column; gap: 5px; }
[data-stock-notify] label { font-size: .88rem; font-weight: 600; color: var(--muted); }
[data-stock-field] input, [data-stock-field] select { box-sizing: border-box; width: 100%; font: inherit; color: var(--ink); background: var(--bg); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-btn); }
[data-stock-consent] { display: flex; gap: 8px; align-items: flex-start; }
[data-stock-trap] { position: absolute; left: -10000px; }
[data-stock-error]:not(:empty) { padding: 6px 10px; border-radius: var(--r-btn); background: #fdecea; color: #b42318; font-weight: 600; }
[data-stock-notify] button { min-height: 44px; padding: .65em 1.4em; border: 0; border-radius: var(--r-btn); background: var(--primary); color: var(--primary-ink); font: inherit; font-weight: 700; cursor: pointer; }
[data-stock-notify] button[data-stock-close] { background: none; color: var(--ink); text-decoration: underline; }
[data-stock-thanks] { justify-items: center; text-align: center; }
[data-stock-tick] { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
/* ---------- end stock notify ---------- */
/* a plain text link with an arrow */
main a:not([data-button]):not([data-site-name]) { color: var(--link, var(--accent)); text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 600; }

/* ---------- hero ---------- */
main > section[data-section-type="hero"] { padding-top: calc(var(--sec-y) * .9); }
/* A photo band's bottom room is photo-style.css's (.lr-hero-band: the edge's cut plus 40px), never this. */
main > section[data-section-type="hero"]:not(.lr-hero-band) { padding-bottom: calc(var(--sec-y) * .9); }
main > section[data-section-type="hero"] > h1 { max-width: 20ch; }
main > section[data-section-type="hero"] > p { font-size: var(--fs-lead); color: var(--muted); max-width: 56ch; }
main > section[data-section-type="hero"] .lr-words > p { font-size: var(--fs-lead); }
main > section[data-section-type="hero"] [data-block="byline"] { font-size: var(--fs-small); color: var(--muted); }
/* words-only hero on the dark colour */
html[data-hero-ground="dark"] main > section[data-section-type="hero"] { background: var(--dark); color: var(--dark-ink); }
html[data-hero-ground="dark"] main > section[data-section-type="hero"] h1 { color: var(--dark-ink); }
html[data-hero-ground="dark"] main > section[data-section-type="hero"] > p { color: var(--dark-muted); }
html[data-hero-ground="soft"] main > section[data-section-type="hero"] { background: var(--soft); }
html[data-hero-ground="dark"] main > section[data-section-type="hero"] [data-block="badges"] li { color: var(--dark-ink); }
html[data-hero-pattern="on"] main > section[data-section-type="hero"] { background-image:
  repeating-linear-gradient(135deg, transparent 0 60px, color-mix(in srgb, var(--primary) 7%, transparent) 60px 120px); }
/* hero with a photo: split or banner */
main > section.has-pic[data-section-type="hero"] { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); align-items: center; }
main > section.has-pic > :not(picture) { grid-column: 1; }
main > section.has-pic > picture[data-slot="hero"] { grid-column: 2; grid-row: 1 / span 6; max-width: none; }
main > section.has-pic > picture img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--r-img); }
html[data-img-frame="offset"] main > section.has-pic > picture { position: relative; }
html[data-img-frame="offset"] main > section.has-pic > picture::before { content: ''; position: absolute; inset: 18px -18px -18px 18px; border: 3px solid var(--primary); border-radius: var(--r-img); z-index: -1; }

/* ---------- trust badges ---------- */
[data-block="badges"] { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: center; }
[data-block="badges"] li { display: inline-flex; align-items: center; gap: .55em; font-weight: 600; font-size: var(--lr-body-size, 1em); color: var(--heading); }
[data-block="badges"] li img { width: 1.35em; height: 1.35em; }
main > section[data-section-type="trust_bar"] { padding-top: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
/* Trust chips take the BUTTON's shape (Square, Soft or Pill), so the site's corners agree (Tomek, 2026-10-05). */
html [data-block="badges"] li { border: 1px solid var(--line); background: var(--bg); padding: .45em .9em; border-radius: var(--r-btn, 999px); }
html[data-badges="strip"] main > section[data-section-type="trust_bar"] { background: var(--primary); border: 0; }
html[data-badges="strip"] main > section[data-section-type="trust_bar"] li { color: var(--primary-ink); }
main > section[data-section-type="hero"] [data-block="badges"] { justify-content: flex-start; margin-top: 1.6em; }

/* ---------- cards ---------- */
ul[data-block="cards"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--gap); margin-top: 1.6em; }
ul[data-block="cards"] > li { padding: 26px; border-radius: var(--r-card); background: var(--bg); display: flex; flex-direction: column; }
/* A services page group's line to its category page, under the cards, centred (Tomek, 2026-10-18). */
[data-cards-more] { text-align: center; margin-top: 1.75rem; }
ul[data-block="cards"] > li > img { margin: -26px -26px 20px; width: calc(100% + 52px); max-width: none; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-card) var(--r-card) 0 0; }
ul[data-block="cards"] > li h3 { margin-bottom: .4em; }
ul[data-block="cards"] > li p { color: var(--muted); }
ul[data-block="cards"] > li > a { margin-top: auto; }
/* ---------- card rows ---------- */
/* The title is the page's link, in the title's own look. */
main ul[data-block="cards"] > li h3 a[href]:not(#lr-card), main [data-block="featured-pages"] h3 a[href]:not(#lr-card) { color: inherit; font-weight: inherit; text-decoration: none; }
main ul[data-block="cards"] > li h3 a[href]:hover, main [data-block="featured-pages"] h3 a[href]:hover { text-decoration: underline; }
/* PLAIN CARDS LINE UP ACROSS A ROW (Tomek, 2026-11-02): picture, title, line and link each share a row, so a long title
   or line never pushes one card's words below its neighbour's. Each card takes four of the list's rows; the gap between
   cards is a margin, because a list gap would also open between those four. A browser without subgrid keeps the layout above. */
@supports (grid-template-rows: subgrid) {
  ul[data-block="cards"][data-rows] { row-gap: 0; margin-bottom: calc(var(--gap) * -1); }
  ul[data-block="cards"][data-rows] > li { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; margin-bottom: var(--gap); }
  ul[data-block="cards"][data-rows] > li > a { margin-top: 0; }
}
/* ONE CARD IN A GROUP: half picture, half words (Tomek 2026-11-06; not the Editor's lifted drag copy). */
@media (min-width: 761px) {
  main ul[data-block="cards"]:has(> li:only-child > img:first-child):not(#lr-card) { grid-template-columns: minmax(0, 1fr); }
  ul[data-block="cards"]:not(.inplace-lift) > li:only-child:has(> img:first-child) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr repeat(10, auto) 1fr; column-gap: clamp(28px, 4vw, 56px); min-height: 300px; }
  ul[data-block="cards"]:not(.inplace-lift) > li:only-child:has(> img:first-child)::before { content: ''; grid-column: 2; grid-row: 1; }
  ul[data-block="cards"]:not(.inplace-lift) > li:only-child > img:first-child { grid-column: 1; grid-row: 1 / -1; width: calc(100% + 26px); height: calc(100% + 52px); margin: -26px 0 -26px -26px; aspect-ratio: auto; border-radius: var(--r-card) 0 0 var(--r-card); }
  ul[data-block="cards"]:not(.inplace-lift) > li:only-child:has(> img:first-child) > :not(:first-child) { grid-column: 2; }
  ul[data-block="cards"]:not(.inplace-lift) > li:only-child:has(> img:first-child) > a { margin-top: .6em; justify-self: start; }
}
/* EVERY NAME STARTS LEVEL (Tomek, 2026-11-02): room for a name, a title and the link back is kept on every card, so a card
   with all three does not start higher than its neighbour with one. */
ul[data-block="testimonials"]:not(.lr-one-quote) .lr-t-who { align-items: flex-start; }
ul[data-block="testimonials"]:not(.lr-one-quote) .lr-t-id { min-height: calc(var(--fs-small) * 2.8 + 26px); }
/* The whole picture shows on a wide card, on its tint (Tomek, 2026-11-02): words in a course picture were cut at the sides. */
@media (min-width: 761px) {
  [data-block="showcase-cards"] > ul > li[data-card-shape="wide"] [data-card-picture] img { object-fit: contain; }
}
/* ---------- end card rows ---------- */
/* A card with a link is one tap (theme.js initCardClick, 2026-10-15); its controls keep their own pointer. */
[data-card-tap] { cursor: pointer; }
html[data-cards="bordered"] ul[data-block="cards"] > li { border: 1px solid var(--line); }
html[data-cards="edge"] ul[data-block="cards"] > li { border: 1px solid var(--line); border-left: 5px solid var(--primary); }
html[data-cards="edge"] ul[data-block="cards"] > li > img { margin-left: -26px; }
html[data-cards="raised"] ul[data-block="cards"] > li { box-shadow: var(--shadow); }
html[data-cards="filled"] ul[data-block="cards"] > li { background: var(--soft); }
html[data-rhythm="soft"] main > section:nth-of-type(even) ul[data-block="cards"] > li,
html[data-rhythm="bold"] main > section[data-section-type="differentiators"] ul[data-block="cards"] > li { background: var(--bg); }
/* card icons (the why cards): the bundle's drawn icon, 48px, on a shape */
ul[data-block="cards"] > li > img[width="48"] { margin: 0 0 16px; width: 46px; height: 46px; aspect-ratio: auto; padding: 10px; border-radius: calc(var(--r-card) * .7);
  background: color-mix(in srgb, var(--primary) 16%, transparent); object-fit: contain; }
html[data-icon-shape="solid"] ul[data-block="cards"] > li > img[width="48"] { background: var(--primary); }
html ul[data-block="cards"] > li > img[width="48"] { background: none; padding: 0; width: 40px; height: 40px; }
/* ---------- card icons (Tomek, 2026-10-28): where a card's icon sits, and its size. Top (absent) = 40px above the title;
   centre = 72px over a centred card; beside = 56px left of the title and words, on a phone too. An icon drawn on a shape
   (data-icon-shape) is shown 1.2x its line size, so the icon inside the shape keeps nearly its line size. ---------- */
html ul[data-block="cards"][data-icon-shape] > li > img[width="48"] { width: 48px; height: 48px; }
html[data-card-icon="centre"] ul[data-block="cards"] > li:has(> img[width="48"]) { align-items: center; text-align: center; }
html[data-card-icon="centre"] ul[data-block="cards"] > li > img[width="48"] { width: 72px; height: 72px; margin: 0 auto 18px; }
html[data-card-icon="centre"] ul[data-block="cards"][data-icon-shape] > li > img[width="48"] { width: 86px; height: 86px; }
html[data-card-icon="beside"] ul[data-block="cards"] > li:has(> img[width="48"]) { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-content: start; }
html[data-card-icon="beside"] ul[data-block="cards"][data-icon-shape] > li:has(> img[width="48"]) { grid-template-columns: 67px minmax(0, 1fr); }
html[data-card-icon="beside"] ul[data-block="cards"] > li > img[width="48"] { grid-row: 1 / span 9; width: 56px; height: 56px; margin: 0; }
html[data-card-icon="beside"] ul[data-block="cards"][data-icon-shape] > li > img[width="48"] { width: 67px; height: 67px; }
html[data-card-icon="beside"] ul[data-block="cards"] > li:has(> img[width="48"]) > :not(img) { grid-column: 2; }
html[data-card-icon="beside"] ul[data-block="cards"] > li:has(> img[width="48"]) > :first-child + * { margin-top: 4px; }
/* ---------- end card icons ---------- */

/* plain lists inside differentiators (why us with <strong> labels) */
main > section[data-section-type="differentiators"] > ul:not([data-block]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 260px), calc((100% - 2 * var(--gap)) / 3)), 1fr)); gap: var(--gap); margin-top: 1.4em; }
main > section[data-section-type="differentiators"] > ul:not([data-block]) li { padding-left: 36px; position: relative; color: var(--muted); }
main > section[data-section-type="differentiators"] > ul:not([data-block]) li::before { content: ''; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
main > section[data-section-type="differentiators"] > ul:not([data-block]) li strong { display: block; color: var(--heading); font-family: var(--font-h); font-size: var(--fs-h3); margin-bottom: .2em; }

/* ---------- photos inside a section: text beside picture ---------- */
main > section.has-side-pic { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(28px, 5vw, 72px); align-items: center; }
main > section.has-side-pic > :not(picture):not(figure):not(.lr-sec-wrap):not([data-missing-slot]) { grid-column: 1; }
main > section.has-side-pic > picture, main > section.has-side-pic > figure, main > section.has-side-pic > .lr-sec-wrap, main > section.has-side-pic > [data-missing-slot] { grid-column: 2; grid-row: 1 / span 12; max-width: none; margin: 0; }
main > section.has-side-pic.pic-left { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
main > section.has-side-pic.pic-left > :not(picture):not(figure):not(.lr-sec-wrap):not([data-missing-slot]) { grid-column: 2; }
main > section.has-side-pic.pic-left > picture, main > section.has-side-pic.pic-left > figure, main > section.has-side-pic.pic-left > .lr-sec-wrap, main > section.has-side-pic.pic-left > [data-missing-slot] { grid-column: 1; }
/* A photo beside a GRID (theme.js marks it lr-pic-head): the heading and opening words beside the photo on row 1, the
   grid and what follows it (lr-after, the section's own children again) across both columns below. On a phone the
   section is a block, so the order is words, photo, grid. */
main > section.has-side-pic.lr-pic-head[data-section-type] > .lr-after.lr-after { grid-column: 1 / -1; }
main > section.has-side-pic.lr-pic-head > .lr-after-first { margin-top: clamp(28px, 4vw, 52px); }
/* A section photo's shape is the SYSTEM's (section_photo_shapes.v1.json): every file is already cut at its shape for the
   screen (3:2, or 4:5 on desktop and tablet beside long words; a phone is always 3:2), so it shows as delivered. Only a
   draft's stock photo, which no cut touched, is boxed. */
main > section.has-side-pic img { width: 100%; height: auto; aspect-ratio: auto; object-fit: cover; border-radius: var(--r-img); }
main > section.has-side-pic picture[data-draft-stock] img { aspect-ratio: 3 / 2; }
/* A promoted service picture and a product picture are another page's files (a hero band, a catalogue shape): boxed 3:2, never shown as cut. */
main > section.has-side-pic figure[data-block="feature-image"] img { aspect-ratio: 3 / 2; }
html[data-img-frame="border"] main > section.has-side-pic img { border: 6px solid var(--bg); outline: 1px solid var(--primary); }

/* ---------- testimonials ---------- */
ul[data-block="testimonials"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--gap); margin-top: 1.6em; }
/* ONE CARD AT EVERY COUNT (spec 2026-10-05-testimonial-cards): stars and where it came from on top, the quote under a soft
   opening mark, then who said it below a line (photo or initial circle, name, title or "<Source> review · month", the link
   back). The theme wraps the bundle's own elements into .lr-t-top / .lr-t-who / .lr-t-id; no word moves. */
ul[data-block="testimonials"] li figure { margin: 0; height: 100%; padding: 26px 26px 22px; border-radius: var(--r-card); background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
ul[data-block="testimonials"] blockquote { margin: 0; font-size: 1em; line-height: 1.55; font-family: var(--font-h); font-weight: 500; color: var(--heading); }
ul[data-block="testimonials"] blockquote[data-quote="short"]::before { content: '\201C'; display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 52px; line-height: .6; font-weight: 400; color: var(--primary); opacity: .35; margin: 6px 0 4px; }
ul[data-block="testimonials"] .lr-t-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; }
ul[data-block="testimonials"] .lr-stars { display: inline-flex; gap: 2px; line-height: 0; }
ul[data-block="testimonials"] .lr-stars svg { width: 18px; height: 18px; fill: var(--star, #f5b301); }
ul[data-block="testimonials"] .lr-stars svg.lr-star-off { opacity: .25; }
main ul[data-block="testimonials"] figure p[data-field="source-label"] { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; font-size: 13px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
main ul[data-block="testimonials"] li:not([data-source]) figure p[data-field="source-label"] { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--muted); }
ul[data-block="testimonials"] .lr-t-mark { display: inline-flex; line-height: 0; }
ul[data-block="testimonials"] .lr-t-mark svg { width: 18px; height: 18px; }
ul[data-block="testimonials"] .lr-t-who { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
ul[data-block="testimonials"] .lr-t-av { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-h); font-weight: 600; font-size: 16px; line-height: 1; color: var(--primary-ink, #fff); background: var(--primary); }
ul[data-block="testimonials"] .lr-t-who > img, ul[data-block="testimonials"] .lr-t-who > picture img { width: 42px; height: 42px; flex: none; border-radius: 50%; object-fit: cover; }
ul[data-block="testimonials"] .lr-t-id { min-width: 0; }
main ul[data-block="testimonials"] figcaption { margin: 0; font-size: var(--fs-small); line-height: 1.4; font-weight: 700; color: var(--heading); }
main ul[data-block="testimonials"] figcaption > span { display: block; font-size: 1em; font-weight: 400; color: var(--muted); }
/* (:not(#lr-t) lifts the link above the bold band's light link colour: it sits on the card, never on the band) */
main ul[data-block="testimonials"] a[data-field="source"]:not(#lr-t) { display: inline-block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--link, var(--primary)); text-decoration: underline; }
/* One review: a wide card across the row (max 980px), the quote on the left in the heading face, stars, source and who on
   the right, behind a line, centred against the quote. A phone puts the right side under the quote, the line on top. */
html ul[data-block="testimonials"].lr-one-quote { grid-template-columns: 1fr; max-width: 980px; margin-left: auto; margin-right: auto; }
html ul[data-block="testimonials"].lr-one-quote li:not(:first-child) { display: none; }
html ul[data-block="testimonials"].lr-one-quote li figure { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: "q ." "q top" "q who" "q ."; gap: 0 40px; padding: 38px 40px; align-items: center; }
html ul[data-block="testimonials"].lr-one-quote blockquote[data-quote="short"] { grid-area: q; font-size: 1.35em; line-height: 1.45; }
html ul[data-block="testimonials"].lr-one-quote blockquote[data-quote="short"]::before { font-size: 80px; }
html ul[data-block="testimonials"].lr-one-quote .lr-t-top { grid-area: top; flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 0 14px 32px; border-left: 1px solid var(--line); }
html ul[data-block="testimonials"].lr-one-quote .lr-t-top p[data-field="source-label"] { margin: 0; font-size: 14px; }
html ul[data-block="testimonials"].lr-one-quote .lr-stars svg { width: 22px; height: 22px; }
html ul[data-block="testimonials"].lr-one-quote .lr-t-who { grid-area: who; margin: 0; padding: 0 0 0 32px; border-top: 0; border-left: 1px solid var(--line); }
@media (max-width: 760px) {
  html ul[data-block="testimonials"].lr-one-quote li figure { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "q" "top" "who"; gap: 16px; padding: 26px 22px; }
  html ul[data-block="testimonials"].lr-one-quote blockquote[data-quote="short"] { font-size: 1.12em; }
  html ul[data-block="testimonials"].lr-one-quote .lr-t-top { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  html ul[data-block="testimonials"].lr-one-quote .lr-t-who { padding: 0; border-left: 0; }
}
html[data-rhythm="bold"] main > section[data-section-type="testimonial"] blockquote,
html[data-rhythm="bold"] main > section[data-section-type="testimonial"] figcaption { color: var(--dark-ink); }
html[data-rhythm="bold"][data-quotes="cards"] main > section[data-section-type="testimonial"] li figure { background: color-mix(in srgb, var(--dark-ink) 7%, transparent); border-color: color-mix(in srgb, var(--dark-ink) 15%, transparent); }
html[data-rhythm="bold"][data-quotes="cards"] main > section[data-section-type="testimonial"] blockquote { color: var(--dark-ink); }

/* ---------- offer page blocks: no styling of their own, only the theme's existing parts ---------- */
/* Key facts: the hero's trust chips (see [data-block="badges"]), so only the proof line and the chip's two words need a rule. */
[data-block="facts"] [data-block="badges"] li [data-field="label"] { font-weight: 400; color: var(--muted); }
[data-block="facts"] [data-field="proof"] { margin: 14px 0 0; font-size: var(--fs-small); color: var(--muted); }
html[data-hero-ground="dark"] [data-block="facts"] [data-field="proof"] { color: var(--dark-muted); }
/* A testimonial's result and its "results vary" line: plain words in the card, like its title line. */
ul[data-block="testimonials"] figure [data-field="result"] { margin: 8px 0 0; font-weight: 700; color: var(--heading); }
ul[data-block="testimonials"] figure [data-field="typicality"] { display: block; margin-top: 4px; font-size: var(--fs-small); color: var(--muted); }
/* What you get: the house tick (the why list's), a value column and a total row. */
[data-block="stack"] { margin-top: 1.6em; max-width: 46rem; }
[data-block="stack"] ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
[data-block="stack"] li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
[data-block="stack"] li::before { content: ''; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
[data-block="stack"] li [data-field="item"] { display: block; font-weight: 600; color: var(--heading); }
[data-block="stack"] li [data-field="description"] { display: block; color: var(--muted); font-size: var(--fs-small); }
[data-block="stack"] li [data-field="value"] { grid-column: 3; grid-row: 1; font-weight: 600; font-size: 1em; color: var(--muted); white-space: nowrap; }
/* The biggest figure is the biggest text (Tomek, 2026-10-06): the total, shown only at four times the price or more, is
   larger than the price (2.2em); with no total the price is the card's largest figure. "Total value" is the size of its
   number (2026-10-07): the whole row is one size, in Counterpoint (a shade that reads at 3:1, large text). The number never
   wraps under its label: one row, the figure kept whole, the label may wrap beside it. */
[data-block="stack"] [data-field="total"] { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding: 16px 0;
  font-family: var(--font-h); font-weight: 800; font-size: var(--lr-total-size); line-height: 1.2; color: var(--counter-big); }
[data-block="stack"] [data-field="total"] [data-field="label"] { min-width: 0; }
[data-block="stack"] [data-field="total"] [data-field="now"] { white-space: nowrap; font-weight: inherit; }
/* For / not for and before / after: two cards like the why cards. Markers keep one meaning site-wide: a green tick, a red cross,
   and a plain dot in the theme's accent for a neutral list. */
[data-block="compare"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 260px), calc((100% - 2 * var(--gap)) / 3)), 1fr)); gap: var(--gap); margin-top: 1.6em; }
[data-block="compare"] > div, [data-block="price"] { padding: 26px; border-radius: var(--r-card); background: var(--bg); }
html[data-cards="bordered"] :is([data-block="compare"] > div, [data-block="price"]), html[data-cards="edge"] :is([data-block="compare"] > div, [data-block="price"]) { border: 1px solid var(--line); }
html[data-cards="raised"] :is([data-block="compare"] > div, [data-block="price"]) { box-shadow: var(--shadow); }
html[data-cards="filled"] :is([data-block="compare"] > div, [data-block="price"]) { background: var(--soft); }
/* THE PRICE BAND (Tomek, 2026-10-07, issue 16). The value stack and the price are one band (`div[data-price-band]`); the price
   block is the white band, a theme card like the compare columns above: its label left and its figure right on one row,
   the owner's line under them, then the section's button, full width, inside it. The price paid is Brand; the value
   figures are Counterpoint (`--counter-text` for the small row values, 4.5:1). Never a "was", never a saving, never struck. */
div[data-price-band] { max-width: 46rem; }
div[data-price-band] [data-block="stack"] li [data-field="value"] { color: var(--counter-text); }
[data-block="price"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 16px; margin-top: 1.6em; max-width: 46rem; }
[data-block="price"] > * { grid-column: 1 / -1; }
[data-block="price"] p { margin: 0; }
[data-block="price"] > [data-field="label"] { grid-column: 1; font-weight: 600; }
[data-block="price"] > p:has(> [data-field="price"]) { grid-column: 2; text-align: right; }
[data-block="price"] [data-field="price_note"], [data-block="price"] [data-field="payment_mode"] { font-size: var(--fs-small); color: var(--muted); }
/* "Your investment" and its amount are one size (Tomek, 2026-10-07): below the total (H2 at most), above the list's body text. */
[data-block="price"] > [data-field="label"] { font-size: var(--lr-invest-size); color: var(--muted); }
[data-block="price"] [data-field="price"] { font-family: var(--font-h); font-size: var(--lr-invest-size); line-height: 1.2; color: var(--primary); white-space: nowrap; }
[data-block="price"] [data-field="price_note"] { margin-top: 6px; }
/* ---------- bundled offers ---------- */
/* Bundled offers (2865, 2026-10-22): a holder's "Save R…" under its price, or a monthly holder's "Worth R…". */
[data-block="price"] [data-field="saving"], [data-block="price"] [data-field="worth"] { grid-column: 2; text-align: right; font-weight: 700; color: var(--accent); }
/* "Save with a bundle" cards (bundled offers R8): the members line, the price against "R… one by one", the saving. */
[data-block="cards"] [data-field="members_line"] { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-small); }
[data-block="cards"] [data-field="bundle_price"] { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
[data-block="cards"] [data-field="bundle_price"] [data-field="price"] { font-family: var(--font-h); font-size: 1.35em; color: var(--primary); white-space: nowrap; }
[data-block="cards"] [data-field="one_by_one"] { color: var(--muted); font-size: var(--fs-small); }
[data-block="cards"] [data-field="saving"], [data-block="cards"] [data-field="worth"] { margin: 4px 0 0; font-weight: 700; color: var(--accent); }
/* ---------- end bundled offers ---------- */
[data-block="price"] > [data-block="buttons"] { grid-column: 1 / -1; display: grid; margin-top: 18px; }
[data-block="price"] > [data-block="buttons"] [data-button] { width: 100%; justify-content: center; text-align: center; }
/* 2. Centred: the section's words, the total and a narrower white band on the centre line; the list's rows stay left. */
html[data-price-band="centred"] main > section:has(> div[data-price-band]) { text-align: center; }
html[data-price-band="centred"] main > section:has(> div[data-price-band]) > * { margin-left: auto; margin-right: auto; }
html[data-price-band="centred"] div[data-price-band] [data-block="stack"] li { text-align: left; }
html[data-price-band="centred"] div[data-price-band] [data-block="stack"] [data-field="total"] { justify-content: center; }
html[data-price-band="centred"] div[data-price-band] > [data-block="price"] { max-width: 26rem; margin-left: auto; margin-right: auto; text-align: left; }
/* 3. Two columns: the heading, the words and the list on the left; the deal (the total over the white band) on the right,
   one card: its outer corners the theme's, the join square. One column with a section photo, and on a phone. */
@media (min-width: 760.02px) {
html[data-price-band="split"] main > section:has(> div[data-price-band]):not(:has(.lr-sec-wrap)):not(:has([data-block="image"])) { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); row-gap: 0; align-items: start; }
html[data-price-band="split"] main > section:has(> div[data-price-band]):not(:has(.lr-sec-wrap)):not(:has([data-block="image"])) > * { grid-column: 1; max-width: none; }
html[data-price-band="split"] main > section:has(> div[data-price-band]):not(:has(.lr-sec-wrap)):not(:has([data-block="image"])) > div[data-price-band],
html[data-price-band="split"] main > section:has(> div[data-price-band]):not(:has(.lr-sec-wrap)):not(:has([data-block="image"])) div[data-price-band] > [data-block="stack"] { display: contents; }
html[data-price-band="split"] main > section:has(> div[data-price-band]):not(:has(.lr-sec-wrap)):not(:has([data-block="image"])) div[data-price-band] > [data-block="stack"] > ul { grid-column: 1; margin-top: 1.2em; }
html[data-price-band="split"] main > section:has(> div[data-price-band]):not(:has(.lr-sec-wrap)):not(:has([data-block="image"])) [data-block="stack"] [data-field="total"] { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 22px 24px 8px; background: var(--bg); border-radius: var(--r-card) var(--r-card) 0 0; }
html[data-price-band="split"] main > section:has(> div[data-price-band]):not(:has(.lr-sec-wrap)):not(:has([data-block="image"])) div[data-price-band] > [data-block="price"] { grid-column: 2; grid-row: 2 / span 40; align-self: start; margin-top: 0; padding-top: 8px;
  border-radius: 0 0 var(--r-card) var(--r-card); }
html[data-price-band="split"] main > section:has(> div[data-price-band]):not(:has([data-field="total"])):not(:has(.lr-sec-wrap)):not(:has([data-block="image"])) div[data-price-band] > [data-block="price"] { grid-row: 1 / span 40; padding-top: 26px; border-radius: var(--r-card); }
}
/* 4. Value banner: the total a full-width Counterpoint strip, joined on top of the white band. */
html[data-price-band="banner"] div[data-price-band] [data-block="stack"] [data-field="total"] { margin-top: 1.4em; padding: 12px 22px; background: var(--counter); color: var(--counter-ink);
  border-radius: var(--r-card) var(--r-card) 0 0; }
html[data-price-band="banner"] div[data-price-band] > [data-block="price"] { margin-top: 0; border-radius: 0 0 var(--r-card) var(--r-card); }
html[data-price-band="banner"] div[data-price-band]:not(:has([data-field="total"])) > [data-block="price"] { margin-top: 1.6em; border-radius: var(--r-card); }
/* 5. Centred card: the list, the total and the price in one white card on the centre line, the price row under a hairline. */
html[data-price-band="card"] main > section:has(> div[data-price-band]) { text-align: center; }
html[data-price-band="card"] main > section:has(> div[data-price-band]) > * { margin-left: auto; margin-right: auto; }
html[data-price-band="card"] div[data-price-band] { max-width: 30rem; margin-top: 1.6em; padding: 22px 24px; border-radius: var(--r-card); background: var(--bg); text-align: left; }
html[data-price-band="card"][data-cards="bordered"] div[data-price-band], html[data-price-band="card"][data-cards="edge"] div[data-price-band] { border: 1px solid var(--line); }
html[data-price-band="card"][data-cards="raised"] div[data-price-band] { box-shadow: var(--shadow); }
html[data-price-band="card"][data-cards="filled"] div[data-price-band] { background: var(--soft); }
html[data-price-band="card"] div[data-price-band] [data-block="stack"] { margin-top: 0; }
html[data-price-band="card"] div[data-price-band] [data-block="stack"] ul { border-top: 0; }
html[data-price-band="card"] div[data-price-band] [data-block="stack"] [data-field="total"] { justify-content: center; }
html[data-price-band="card"] div[data-price-band] > [data-block="price"] { margin-top: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
/* The two inner joins of the deal card (two columns) and the banner wear the same card look as the white band. */
html[data-cards="bordered"][data-price-band="split"] div[data-price-band] [data-field="total"], html[data-cards="bordered"][data-price-band="banner"] div[data-price-band] [data-field="total"], html[data-cards="edge"][data-price-band="split"] div[data-price-band] [data-field="total"], html[data-cards="edge"][data-price-band="banner"] div[data-price-band] [data-field="total"] { border: 1px solid var(--line); border-bottom: 0; }
html[data-cards="raised"][data-price-band="split"] div[data-price-band] [data-field="total"] { box-shadow: var(--shadow); }
html[data-cards="filled"][data-price-band="split"] div[data-price-band] [data-field="total"] { background: var(--soft); }
html[data-price-band="split"] div[data-price-band] > [data-block="price"], html[data-price-band="banner"] div[data-price-band] > [data-block="price"] { border-top: 0; }
/* The price band on a phone: both figures smaller, the total still the bigger. */
@media (max-width: 481.98px) {
}
[data-block="compare"] h3 { margin: 0 0 .6em; }
[data-block="compare"] ul { list-style: none; margin: 0; padding: 0; }
[data-block="compare"] li { position: relative; padding: 4px 0 4px 26px; color: var(--muted); }
[data-block="compare"] li::before { position: absolute; left: 0; font-weight: 700; }
[data-block="compare"] [data-tone="yes"] li::before { content: "\2713"; color: var(--yes); }
[data-block="compare"] [data-tone="no"] li::before { content: "\2715"; color: var(--no); }
[data-block="compare"] :is([data-tone="before"], [data-tone="after"]) li::before { content: "\2022"; left: 4px; color: var(--primary); }
/* ---------- list bullet icons ---------- */
/* The client's own icon for a compare column's bullets (bulletsSlot) and What you get's ticks (STACK_BULLETS_SLOT), 2026-10-23 */
[data-block="compare"] [data-bullet-icon] li::before { content: none; }
[data-block="compare"] [data-bullet-icon] li > img { position: absolute; left: 0; top: 6px; width: 18px; height: 18px; }
[data-block="stack"][data-bullet-icon] li::before { content: none; display: none; }
[data-block="stack"][data-bullet-icon] li > img { width: 22px; height: 22px; margin-top: 2px; }
/* A list in a centred band sits centred as one block, its bullets beside their words (Tomek, 2026-10-23) */
html[data-cta-layout="centred"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > :is(ul, ol),
html[data-align="center"] main > section:not([data-section-type="hero"]) > :is(ul, ol) { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; text-align: left; }
/* ---------- end list bullet icons ---------- */
/* An offer page's guarantee (2026-10-10): its icon above its words, drawn plain. */
main > section[data-section-type="guarantee"] > img[data-field="icon"] { display: block; width: 40px; height: 40px; margin: 0 0 14px; }

/* ---------- an event offer (spec 2026-10-10-event-offer-type): no look of its own, only the theme's parts ---------- */
/* When and where (venue map, Tomek 2026-10-10): up to THREE equal columns — When (a date tile per date, booking closes),
   Where (the venue, its address and "Get directions", getting there or how to join) and the map on its own, with nothing
   drawn over it. No map: two columns. A tablet: When | Where, the map under both. A phone: one column, the map last. */
[data-block="when-where"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: 1.6em; align-items: start; }
@media (min-width: 760px) {
  [data-block="when-where"]:has(> [data-ww="where"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-block="when-where"] > [data-field="map"] { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  [data-block="when-where"]:has(> [data-ww="where"]):has(> [data-field="map"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  [data-block="when-where"]:has(> [data-ww="where"]) > [data-field="map"] { grid-column: auto; }
}
[data-block="when-where"] [data-field="dates"] { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
[data-block="when-where"] [data-field="dates"] li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r-card); background: var(--bg); }
[data-block="when-where"] [data-tile] { display: grid; justify-items: center; padding: 8px 0 9px; border-radius: var(--r-btn); background: var(--primary); color: var(--primary-ink); line-height: 1; }
[data-block="when-where"] [data-tile-month] { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
[data-block="when-where"] [data-tile-day] { margin-top: 4px; font-family: var(--font-h); font-weight: var(--h-weight); font-size: 1.75rem; }
[data-block="when-where"] [data-date-words] { min-width: 0; }
[data-block="when-where"] [data-field="day"] { display: block; font-family: var(--font-h); font-weight: var(--h-weight); font-size: 1.1em; color: var(--heading); }
[data-block="when-where"] [data-field="time"] { display: block; color: var(--muted); }
[data-block="when-where"] [data-field="closes"] { margin: 12px 4px 0; font-size: var(--fs-small); color: var(--muted); }
[data-block="when-where"] > [data-ww="where"] { padding: 22px; border-radius: var(--r-card); background: var(--bg); }
html[data-cards="bordered"] [data-block="when-where"] :is([data-field="dates"] li, [data-ww="where"]), html[data-cards="edge"] [data-block="when-where"] :is([data-field="dates"] li, [data-ww="where"]) { border: 1px solid var(--line); }
html[data-cards="raised"] [data-block="when-where"] :is([data-field="dates"] li, [data-ww="where"]) { box-shadow: var(--shadow); }
html[data-cards="filled"] [data-block="when-where"] :is([data-field="dates"] li, [data-ww="where"]) { background: var(--soft); }
[data-block="when-where"] [data-field="venue"] { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
[data-block="when-where"] [data-venue-icon] { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-btn); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
[data-block="when-where"] [data-venue-icon] svg { width: 24px; height: 24px; }
[data-block="when-where"] [data-venue-words] { min-width: 0; overflow-wrap: anywhere; }
[data-block="when-where"] h3 { margin: 0 0 .3em; }
[data-block="when-where"] [data-field="venue"] p { margin: 0 0 .4em; color: var(--muted); }
[data-block="when-where"] [data-field="venue"] [data-field="address_note"] { color: var(--ink); }
/* `a…[href]` outranks the page-text link colour (`main a:not([data-button])…`), which drew the words in the button's own blue. */
[data-block="when-where"] a[data-link="directions"][href] { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: .6em 1.15em; border-radius: var(--r-btn); background: var(--primary); color: var(--primary-ink); font-family: var(--font-b); font-weight: 700; text-decoration: none; }
[data-block="when-where"] :is([data-field="pickups"], [data-field="join"]) { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
[data-block="when-where"] [data-field="pickups"] ul { list-style: none; margin: 0; padding: 0; }
[data-block="when-where"] [data-field="pickups"] li { position: relative; padding: 4px 0 8px 22px; }
[data-block="when-where"] [data-field="pickups"] li::before { content: "\2022"; position: absolute; left: 4px; font-weight: 700; color: var(--primary); }
[data-block="when-where"] [data-field="pickups"] li b { display: block; color: var(--heading); }
[data-block="when-where"] [data-field="pickups"] li span { color: var(--muted); }
[data-block="when-where"] [data-field="back_by"] { margin: 8px 0 0; font-weight: 600; color: var(--heading); }
[data-block="when-where"] [data-field="join"] p { margin: 0; color: var(--muted); }
[data-block="when-where"] > [data-field="map"] { position: relative; min-height: 380px; border-radius: var(--r-img, var(--r-card)); overflow: hidden; border: 1px solid var(--line); background: var(--soft); }
[data-block="when-where"] > [data-field="map"] iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 759px) {
  [data-block="when-where"] > [data-field="map"] { min-height: 260px; }
  [data-block="when-where"] a[data-link="directions"][href] { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
}
/* The photos band (2026-10-11): every photo the same size, a third of the band, in rows of up to three, centred; the site's
   own photo shape (3:2, the in-page landscape) and photo style (lr-section-photo). Six on a computer or tablet, the
   sixth carrying "+N more"; a phone swipes one at a time with a dot per photo and no scroll bar. */
[data-block="event-photos"] { margin-top: 1.6em; }
[data-block="event-photos"] > [data-field="photos"] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); list-style: none; margin: 0; padding: 0; }
[data-block="event-photos"] > [data-field="photos"] > li { position: relative; flex: 0 0 calc((100% - 2 * var(--gap)) / 3); min-width: 0; margin: 0; padding: 0; }
[data-block="event-photos"] > [data-field="photos"] > li:nth-child(n+7) { display: none; }
[data-block="event-photos"] .lr-section-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-img, var(--r-card)); background: var(--soft); }
[data-block="event-photos"] .lr-section-photo picture, [data-block="event-photos"] .lr-section-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-block="event-photos"] [data-field="caption"] { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 10px; border-radius: 0 0 var(--r-img, var(--r-card)) var(--r-img, var(--r-card)); background: linear-gradient(to top, color-mix(in srgb, var(--dark) 72%, transparent), transparent); color: var(--dark-ink); font-size: var(--fs-small); line-height: 1.35; pointer-events: none; }
[data-block="event-photos"] [data-photos-more] { position: absolute; inset: 0; display: grid; place-items: center; border: 0; border-radius: var(--r-img, var(--r-card)); background: color-mix(in srgb, var(--dark) 48%, transparent); color: var(--dark-ink); font-family: var(--font-h); font-weight: var(--h-weight); font-size: 1.2rem; cursor: pointer; }
[data-block="event-photos"] [data-photos-more]:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
[data-block="event-photos"] > [data-field="dots"] { display: none; justify-content: center; gap: 2px; margin-top: 10px; }
[data-block="event-photos"] [data-dot] { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
[data-block="event-photos"] [data-dot]::before { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 999px; background: var(--line); transform: translate(-50%, -50%); transition: width .2s; }
[data-block="event-photos"] [data-dot][aria-current="true"]::before { width: 22px; background: var(--primary); }
[data-block="event-photos"] dialog[data-photos-viewer] { width: min(1100px, 94vw); max-height: 90vh; padding: 52px 18px 18px; border: 0; border-radius: var(--r-card); background: var(--bg); color: var(--ink); }
[data-block="event-photos"] dialog[data-photos-viewer]::backdrop { background: color-mix(in srgb, var(--dark) 70%, transparent); }
[data-block="event-photos"] [data-photos-close] { position: absolute; top: 12px; right: 14px; padding: .4em .9em; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--bg); color: var(--heading); font-weight: 600; cursor: pointer; }
[data-block="event-photos"] [data-photos-all] { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); }
[data-block="event-photos"] [data-photos-all] picture, [data-block="event-photos"] [data-photos-all] img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-img, var(--r-card)); }
@media (max-width: 759.98px) {
  [data-block="event-photos"] > [data-field="photos"] { flex-wrap: nowrap; justify-content: flex-start; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  [data-block="event-photos"] > [data-field="photos"]::-webkit-scrollbar { display: none; }
  [data-block="event-photos"] > [data-field="photos"] > li { flex: 0 0 100%; scroll-snap-align: center; }
  [data-block="event-photos"] > [data-field="photos"] > li:nth-child(n+7) { display: block; }
  [data-block="event-photos"] [data-photos-more] { display: none; }
  [data-block="event-photos"] > [data-field="dots"] { display: flex; }
}
/* The programme: each step under its time or day (in place of the step number), then the same-every-day timetable. */
main > section[data-section-type="process"] > ol > li:has(> [data-field="when"]) { padding-top: 0; }
main > section[data-section-type="process"] > ol > li:has(> [data-field="when"])::before, html[data-process="line"] main > section[data-section-type="process"] > ol > li:has(> [data-field="when"])::after { content: none; display: none; }
main > section[data-section-type="process"] > ol > li > [data-field="when"] { display: block; margin-bottom: 6px; font-family: var(--font-h); font-weight: var(--h-weight); font-size: var(--fs-small); color: var(--primary); }
main > section[data-section-type="process"] > [data-field="daily"] { margin-top: 1.6em; max-width: 46rem; padding: 26px; border-radius: var(--r-card); background: var(--bg); }
html[data-cards="bordered"] main > section[data-section-type="process"] > [data-field="daily"], html[data-cards="edge"] main > section[data-section-type="process"] > [data-field="daily"] { border: 1px solid var(--line); }
html[data-cards="raised"] main > section[data-section-type="process"] > [data-field="daily"] { box-shadow: var(--shadow); }
html[data-cards="filled"] main > section[data-section-type="process"] > [data-field="daily"] { background: var(--soft); }
main > section[data-section-type="process"] > [data-field="daily"] h3 { margin: 0 0 .6em; }
main > section[data-section-type="process"] > [data-field="daily"] ul { list-style: none; margin: 0; padding: 0; }
main > section[data-section-type="process"] > [data-field="daily"] li { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink); }
main > section[data-section-type="process"] > [data-field="daily"] li:first-child { border-top: 0; }
main > section[data-section-type="process"] > [data-field="daily"] [data-field="time"] { font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; }
/* ENDED (the page's script sets data-event-ended on <body>; a bundle made after the event bakes it in): every main button
   and the booking-closes line go, the ended notes show. Both states are in the markup: this only switches them. */
body[data-event-ended] [data-button="primary"], body[data-event-ended] [data-event-live] { display: none !important; }
body[data-event-ended] p[data-ended-note][hidden] { display: block; }
body[data-event-ended] span[data-ended-note][hidden] { display: inline-block; }
[data-block="when-where"] span[data-ended-note] { margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: var(--fs-small); }
[data-block="when-where"] span[data-ended-note]:not([hidden]) { display: inline-block; }
main > section[data-section-type="hero"] p[data-ended-note] { max-width: 46ch; margin: 1.2em 0 0; padding: 14px 18px; border-radius: var(--r-card); background: var(--bg); color: var(--ink); }
main > section[data-section-type="hero"] p[data-ended-note] b { display: block; color: var(--heading); }
main > section[data-section-type="hero"] p[data-ended-note] a { color: var(--primary); }
/* BOOKING CLOSED (event timeline v1: the page's script sets data-booking-closed on <body> at the closing instant; a
   bundle made after it bakes it in): the main buttons and the booking-closes line go, the closed note shows in the hero
   — until the event ends, when the ended note takes its place. The COUNTDOWN (hidden until the script fills it) goes too. */
body[data-booking-closed] [data-button="primary"], body[data-booking-closed] [data-event-live] { display: none !important; }
body[data-booking-closed] p[data-closed-note][hidden] { display: block; }
body[data-event-ended] p[data-closed-note], body[data-booking-closed] [data-countdown], body[data-event-ended] [data-countdown] { display: none !important; }
main > section[data-section-type="hero"] p[data-closed-note] { max-width: 46ch; margin: 1.2em 0 0; padding: 14px 18px; border-radius: var(--r-card); background: var(--bg); color: var(--ink); }
main > section[data-section-type="hero"] p[data-closed-note] b { display: block; color: var(--heading); }
main > section[data-section-type="hero"] [data-countdown] { margin: 1.2em 0 0; }
main > section[data-section-type="hero"] [data-cd-boxes] { display: flex; flex-wrap: wrap; gap: 8px; }
main > section[data-section-type="hero"] [data-cd-box] { min-width: 64px; padding: 8px 6px; border-radius: var(--r-card); background: var(--bg); color: var(--muted); text-align: center; font-size: var(--fs-small); }
main > section[data-section-type="hero"] [data-cd-box] b { display: block; color: var(--heading); font-size: 1.5em; line-height: 1.1; font-variant-numeric: tabular-nums; }
main > section[data-section-type="hero"] [data-cd-left] { margin: .5em 0 0; font-size: var(--fs-small); }
main > section[data-section-type="hero"] p[data-hero-closes] { margin: .35em 0 0; font-size: var(--fs-small); }

/* ---------- mid-page call to action / closing CTA ---------- */
main > section[data-section-type="intro"][data-role="midcta"] > p { font-size: var(--fs-lead); font-family: var(--font-h); color: var(--heading); max-width: 46ch; }
html[data-align="center"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > * { margin-left: auto; margin-right: auto; }
html[data-align="right"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > * { margin-left: auto; margin-right: 0; }
main > section[data-section-type="cta"] > p { font-size: var(--fs-lead); max-width: 52ch; }
html[data-rhythm="bold"] main > section[data-section-type="cta"] > p { color: var(--dark-muted); }

/* ---------- answer passage ---------- */
[data-block="answer"] { border-left: 4px solid var(--accent); padding: 4px 0 4px 22px; font-size: var(--fs-lead); }
[data-block="answer"] p:last-child { margin: 0; }

/* ---------- process steps ---------- */
main > section[data-section-type="process"] > ol { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--gap); margin-top: 1.6em; }
main > section[data-section-type="process"] > ol > li { counter-increment: step; position: relative; padding-top: 62px; color: var(--ink); }
main > section[data-section-type="process"] > ol > li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-h); font-weight: var(--h-weight); font-size: 1.2rem; background: var(--primary); color: var(--primary-ink); }
html[data-process="line"] main > section[data-section-type="process"] > ol > li::after { content: ''; position: absolute; top: 23px; left: 58px; right: calc(var(--gap) * -1 + 8px); height: 2px; background: var(--line); }
html[data-process="line"] main > section[data-section-type="process"] > ol > li:last-child::after { display: none; }
/* Steps beside the block's picture (the words sit in .lr-words): numbered down the words' column, each number beside its step. */
main > section[data-section-type="process"] > .lr-words > ol { counter-reset: step; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 1.6em; padding-left: 0; list-style: none; }
main > section[data-section-type="process"] > .lr-words > ol > li { counter-increment: step; position: relative; min-height: 46px; padding: 10px 0 0 62px; color: var(--ink); }
main > section[data-section-type="process"] > .lr-words > ol > li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-h); font-weight: var(--h-weight); font-size: 1.2rem; background: var(--primary); color: var(--primary-ink); }
main > section[data-section-type="process"] > .lr-words > ol > li:has(> [data-field="when"]) { padding: 0; min-height: 0; }
main > section[data-section-type="process"] > .lr-words > ol > li:has(> [data-field="when"])::before { content: none; display: none; }
main > section[data-section-type="process"] > .lr-words > ol > li > [data-field="when"] { display: block; margin-bottom: 6px; font-family: var(--font-h); font-weight: var(--h-weight); font-size: var(--fs-small); color: var(--primary); }
html[data-rhythm="bold"][data-edge="slant"] main > section[data-section-type="process"]:not(.lr-band) { background: var(--soft); }

/* ---------- step numbers + line thickness (spec 2026-10-19-step-number-styles) ----------
   Both are OPTIONAL parts: with neither chosen nothing below applies, so today's disc and today's border widths stay
   exactly as they are. Only the closing-line gap (just below) applies to every steps band.
   Shape follows Buttons › Shape (--r-btn); colour is Counterpoint on the page's own grounds and the band's words colour
   on an accent band; every style follows the band's text alignment; the event programme (a time in place of the
   number) never draws one. Tablet = up to 899px (where the runtime's --steps stops), phone = up to 481px. */
/* whatever follows the steps sits as far below them as the opening line sits above (Tomek, 2026-10-19) */
main > section[data-section-type="process"] > ol + :is(p, [data-block="buttons"]) { margin-top: 1.6em; }

/* LINE THICKNESS: one weight for every button's border, outlined cards and the step lines. `!important` on the border
   width only, so it reaches every button rule (main, outline, second, header) without restating their colours. */
html[data-line-weight="thin"] { --lw: 1.5px; }
html[data-line-weight="regular"] { --lw: 2px; }
html[data-line-weight="bold"] { --lw: 3px; }
html[data-line-weight] [data-button] { border-width: var(--lw) !important; }
html[data-line-weight][data-cards="line"] :is(ul[data-block="cards"] > li, [data-block="testimonials"] figure, [data-block="answer"]) { border-width: calc(var(--lw) * .75); }

/* the shared base: each style below draws only what it sets */
html[data-step-num] [data-section-type="process"] > ol > li::before { content: counter(step); position: static; width: auto; height: auto; background: none; border-radius: 0;
  font-family: var(--font-h); font-variant-numeric: tabular-nums; line-height: 1; }
html[data-step-num] [data-section-type="process"] > ol > li::after { content: none; }
html[data-step-num] [data-section-type="process"] > ol > li > p[data-field="tag"] { align-self: auto; }
@media (min-width: 482px) and (max-width: 899.98px) { html[data-step-num]:not([data-step-num="ring"]) [data-section-type="process"] > ol:not([data-lr-across="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 481.98px) { html[data-step-num] [data-section-type="process"] > ol { grid-template-columns: minmax(0, 1fr); } }

/* 1 BADGE: a filled mark in Counterpoint, the buttons' shape (pill = circle) */
html[data-step-num="badge"] [data-section-type="process"] > ol > li { padding-top: 64px; }
html[data-step-num="badge"] [data-section-type="process"] > ol > li::before { position: absolute; top: 0; left: 0; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--r-btn); background: var(--counter); color: var(--counter-ink); font-weight: var(--h-weight); font-size: 1.25rem; }
html[data-align="center"][data-step-num="badge"] [data-section-type="process"] > ol > li::before { left: 50%; transform: translateX(-50%); }
html[data-align="right"][data-step-num="badge"] [data-section-type="process"] > ol > li::before { left: auto; right: 0; }
@media (max-width: 481.98px) { html:not([data-align="center"],[data-align="right"])[data-step-num="badge"] [data-section-type="process"] > ol > li { padding: 2px 0 0 64px; min-height: 48px; } }

/* 2 RING AND PATH: an open ring at the line thickness; a path joins the rings of one row */
html[data-step-num="ring"] [data-section-type="process"] > ol > li { padding-top: 64px; }
html[data-step-num="ring"] [data-section-type="process"] > ol > li::before { position: absolute; top: 0; left: 0; width: 48px; height: 48px; box-sizing: border-box; display: grid; place-items: center;
  border-radius: var(--r-btn); border: var(--lw, 2px) solid var(--counter); color: var(--counter-text); font-weight: var(--h-weight); font-size: 1.15rem; }
html[data-step-num="ring"] [data-section-type="process"] > ol > li:not([data-lr-row-end])::after { content: ''; position: absolute; top: calc(24px - var(--lw, 2px) / 2); left: 60px;
  width: calc(100% + var(--gap) - 72px); height: var(--lw, 2px); background: var(--counter); opacity: .45; }
html[data-align="center"][data-step-num="ring"] [data-section-type="process"] > ol > li::before { left: 50%; transform: translateX(-50%); }
html[data-align="center"][data-step-num="ring"] [data-section-type="process"] > ol > li:not([data-lr-row-end])::after { left: calc(50% + 36px); }
html[data-align="right"][data-step-num="ring"] [data-section-type="process"] > ol > li::before { left: auto; right: 0; }
html[data-align="right"][data-step-num="ring"] [data-section-type="process"] > ol > li:not([data-lr-row-end])::after { left: calc(100% + 12px); }
/* one step across (Items across = One), a tablet or a phone: one column, the path down the side the words start on;
   centred, the rings sit above each step and a short path drops between them */
@media (max-width: 899.98px) { html[data-step-num="ring"] [data-section-type="process"] > ol { grid-template-columns: minmax(0, 1fr); } }
html[data-step-num="ring"] [data-section-type="process"] > ol[data-lr-across="1"] { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 899.98px) {
  html[data-step-num="ring"] [data-section-type="process"] > ol { row-gap: 28px; }
  html:not([data-align="center"],[data-align="right"])[data-step-num="ring"] [data-section-type="process"] > ol > li { padding: 4px 0 0 72px; min-height: 48px; }
  html:not([data-align="center"],[data-align="right"])[data-step-num="ring"] [data-section-type="process"] > ol > li:not(:last-child)::after { content: ''; position: absolute; background: var(--counter); opacity: .45; top: 60px; left: calc(24px - var(--lw, 2px) / 2); width: var(--lw, 2px); height: auto; bottom: -16px; }
  html[data-align="right"][data-step-num="ring"] [data-section-type="process"] > ol > li { padding: 4px 72px 0 0; min-height: 48px; }
  html[data-align="right"][data-step-num="ring"] [data-section-type="process"] > ol > li:not(:last-child)::after { content: ''; position: absolute; background: var(--counter); opacity: .45; top: 60px; left: auto; right: calc(24px - var(--lw, 2px) / 2); width: var(--lw, 2px); height: auto; bottom: -16px; }
  html[data-align="center"][data-step-num="ring"] [data-section-type="process"] > ol > li:not(:last-child)::after { content: ''; position: absolute; background: var(--counter); opacity: .45; top: auto; bottom: -24px; left: calc(50% - var(--lw, 2px) / 2); width: var(--lw, 2px); height: 20px; }
}
html[data-step-num="ring"] [data-section-type="process"] > ol[data-lr-across="1"] { row-gap: 28px; }
html:not([data-align="center"],[data-align="right"])[data-step-num="ring"] [data-section-type="process"] > ol[data-lr-across="1"] > li { padding: 4px 0 0 72px; min-height: 48px; }
html:not([data-align="center"],[data-align="right"])[data-step-num="ring"] [data-section-type="process"] > ol[data-lr-across="1"] > li:not(:last-child)::after { content: ''; position: absolute; top: 60px; left: calc(24px - var(--lw, 2px) / 2); width: var(--lw, 2px); bottom: -16px; background: var(--counter); opacity: .45; }
html[data-align="right"][data-step-num="ring"] [data-section-type="process"] > ol[data-lr-across="1"] > li { padding: 4px 72px 0 0; min-height: 48px; }
html[data-align="right"][data-step-num="ring"] [data-section-type="process"] > ol[data-lr-across="1"] > li:not(:last-child)::after { content: ''; position: absolute; top: 60px; left: auto; right: calc(24px - var(--lw, 2px) / 2); width: var(--lw, 2px); bottom: -16px; background: var(--counter); opacity: .45; }
html[data-align="center"][data-step-num="ring"] [data-section-type="process"] > ol[data-lr-across="1"] > li:not(:last-child)::after { content: ''; position: absolute; top: auto; bottom: -24px; left: calc(50% - var(--lw, 2px) / 2); width: var(--lw, 2px); height: 20px; background: var(--counter); opacity: .45; }

/* 3 BIG FIGURE: the number itself, heading face, Counterpoint, over a short rule at the line thickness */
html[data-step-num="figure"] [data-section-type="process"] > ol > li { padding-top: 0; }
html[data-step-num="figure"] [data-section-type="process"] > ol > li::before { display: block; width: max-content; min-width: 1.1em; margin: 0 0 .45em; padding-bottom: .12em;
  border-bottom: var(--lw, 2px) solid var(--counter); color: var(--counter-big); font-weight: 800; font-size: clamp(3.4rem, 6vw, 4.8rem); letter-spacing: -.04em; }
html[data-align="center"][data-step-num="figure"] [data-section-type="process"] > ol > li::before { margin-left: auto; margin-right: auto; }
html[data-align="right"][data-step-num="figure"] [data-section-type="process"] > ol > li::before { margin-left: auto; margin-right: 0; }
@media (max-width: 481.98px) {
  html[data-step-num="figure"] [data-section-type="process"] > ol > li::before { font-size: 2.9rem; }
  html:not([data-align="center"],[data-align="right"])[data-step-num="figure"] [data-section-type="process"] > ol > li:not(:has(> [data-field="when"])) { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: 14px; align-items: start; }
  html:not([data-align="center"],[data-align="right"])[data-step-num="figure"] [data-section-type="process"] > ol > li > * { grid-column: 2; }
  html:not([data-align="center"],[data-align="right"])[data-step-num="figure"] [data-section-type="process"] > ol > li > h3 { margin-top: .2em; }
  html:not([data-align="center"],[data-align="right"])[data-step-num="figure"] [data-section-type="process"] > ol > li > p[data-field="tag"] { justify-self: start; }
  html:not([data-align="center"],[data-align="right"])[data-step-num="figure"] [data-section-type="process"] > ol > li::before { grid-column: 1; grid-row: 1 / span 4; margin: 0; border-bottom: 0; }
}

/* 4 NUMBERED CARD: each step a card in the Cards look and corners, the number a tab across its top edge */
html[data-step-num="card"] [data-section-type="process"] > ol { row-gap: calc(var(--gap) + 22px); margin-top: 2.6em; }
html[data-step-num="card"] [data-section-type="process"] > ol > li { padding: 34px 22px 22px; border-radius: var(--r-card); background: var(--card-fill, var(--bg)); border: calc(var(--lw, 2px) * .75) solid var(--line); }
html[data-step-num="card"][data-cards="shadow"] [data-section-type="process"] > ol > li { border-color: transparent; box-shadow: 0 14px 34px -10px rgb(0 0 0 / .3); }
html[data-step-num="card"][data-cards="tint"] [data-section-type="process"] > ol > li { background: var(--card-tint); border-color: transparent; }
html[data-step-num="card"][data-cards="plain"] [data-section-type="process"] > ol > li { background: transparent; border-color: transparent; padding-inline: 0; }
html[data-step-num="card"] [data-section-type="process"] > ol > li::before { position: absolute; top: -20px; left: 20px; height: 40px; min-width: 40px; padding: 0 14px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: var(--r-btn); background: var(--counter); color: var(--counter-ink); font-weight: var(--h-weight); font-size: 1.1rem; }
html[data-step-num="card"][data-cards="plain"] [data-section-type="process"] > ol > li::before { left: 0; }
html[data-align="center"][data-step-num="card"] [data-section-type="process"] > ol > li::before { left: 50%; transform: translateX(-50%); }
html[data-align="right"][data-step-num="card"] [data-section-type="process"] > ol > li::before { left: auto; right: 20px; }
html[data-align="right"][data-step-num="card"][data-cards="plain"] [data-section-type="process"] > ol > li::before { right: 0; }

/* steps beside the band's picture run down the words' column, each number beside its step, in every style */
html[data-step-num] [data-section-type="process"] > .lr-words > ol > li::before { content: counter(step); position: absolute; top: 0; left: 0; width: auto; height: auto; background: none; border-radius: 0;
  font-family: var(--font-h); font-variant-numeric: tabular-nums; line-height: 1; }
html[data-step-num="badge"] [data-section-type="process"] > .lr-words > ol > li::before { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-btn); background: var(--counter); color: var(--counter-ink); font-weight: var(--h-weight); font-size: 1.25rem; }
html[data-step-num="ring"] [data-section-type="process"] > .lr-words > ol { gap: 28px; }
html[data-step-num="ring"] [data-section-type="process"] > .lr-words > ol > li::before { width: 48px; height: 48px; box-sizing: border-box; display: grid; place-items: center; border-radius: var(--r-btn);
  border: var(--lw, 2px) solid var(--counter); color: var(--counter-text); font-weight: var(--h-weight); font-size: 1.15rem; }
html[data-step-num="ring"] [data-section-type="process"] > .lr-words > ol > li:not(:last-child)::after { content: ''; position: absolute; top: 60px; bottom: -16px; left: calc(24px - var(--lw, 2px) / 2); width: var(--lw, 2px); background: var(--counter); opacity: .45; }
html[data-step-num="figure"] [data-section-type="process"] > .lr-words > ol > li { padding-left: 64px; }
html[data-step-num="figure"] [data-section-type="process"] > .lr-words > ol > li::before { color: var(--counter-big); font-weight: 800; font-size: 2.9rem; letter-spacing: -.04em; }
html[data-step-num="card"] [data-section-type="process"] > .lr-words > ol { gap: 40px; margin-top: 2.6em; }
html[data-step-num="card"] [data-section-type="process"] > .lr-words > ol > li { padding: 34px 22px 22px; border-radius: var(--r-card); background: var(--card-fill, var(--bg)); border: calc(var(--lw, 2px) * .75) solid var(--line); }
html[data-step-num="card"][data-cards="shadow"] [data-section-type="process"] > .lr-words > ol > li { border-color: transparent; box-shadow: 0 14px 34px -10px rgb(0 0 0 / .3); }
html[data-step-num="card"][data-cards="tint"] [data-section-type="process"] > .lr-words > ol > li { background: var(--card-tint); border-color: transparent; }
html[data-step-num="card"][data-cards="plain"] [data-section-type="process"] > .lr-words > ol > li { background: transparent; border-color: transparent; padding-inline: 0; }
html[data-step-num="card"] [data-section-type="process"] > .lr-words > ol > li::before { top: -20px; left: 20px; height: 40px; min-width: 40px; padding: 0 14px; box-sizing: border-box; display: grid; place-items: center;
  border-radius: var(--r-btn); background: var(--counter); color: var(--counter-ink); font-weight: var(--h-weight); font-size: 1.1rem; }
html[data-step-num="card"][data-cards="plain"] [data-section-type="process"] > .lr-words > ol > li::before { left: 0; }
html[data-step-num][data-step-num] [data-section-type="process"][data-section-type] > .lr-words > ol > li:has(> [data-field="when"])::before,
html[data-step-num][data-step-num] [data-section-type="process"][data-section-type] > .lr-words > ol > li:has(> [data-field="when"])::after { content: none; display: none; }
/* on an accent band the numbers take the band's words colour (Counterpoint is tuned for the page's own grounds) */
html[data-step-num="badge"][data-bands="accent"] .lr-contrast[data-section-type="process"] ol > li::before, html[data-step-num="card"][data-bands="accent"] .lr-contrast[data-section-type="process"] ol > li::before { background: var(--accent-ink); color: var(--lr-ground, var(--accent-bg)); }
html[data-step-num="ring"][data-bands="accent"] .lr-contrast[data-section-type="process"] ol > li::before { border-color: var(--accent-ink); color: var(--accent-ink); }
html[data-step-num="ring"][data-bands="accent"] .lr-contrast[data-section-type="process"] ol > li::after { background: var(--accent-ink); }
html[data-step-num="figure"][data-bands="accent"] .lr-contrast[data-section-type="process"] ol > li::before { color: var(--accent-ink); border-color: var(--accent-ink); }

/* the event programme: a time in place of the number, so no style draws one (nor a path or a tab) */
html[data-step-num][data-step-num] [data-section-type="process"][data-section-type] > ol > li:has(> [data-field="when"])::before, html[data-step-num][data-step-num] [data-section-type="process"][data-section-type] > ol > li:has(> [data-field="when"])::after { content: none; display: none; }
html:is([data-step-num="badge"], [data-step-num="ring"], [data-step-num="figure"])[data-step-num] [data-section-type="process"][data-section-type] > ol > li:has(> [data-field="when"]) { padding: 0; min-height: 0; }
html[data-step-num="card"] [data-section-type="process"] > ol > li:has(> [data-field="when"]) { padding-top: 22px; }
html[data-step-num="card"][data-step-num] [data-section-type="process"] > .lr-words > ol > li:has(> [data-field="when"]) { padding: 22px; }
/* ---------- end step numbers + line thickness ---------- */

/* ---------- services with photo (service_block + feature-image) ---------- */
figure[data-block="feature-image"] img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-img); }

/* ---------- products ---------- */
ul[data-block="products"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; margin-top: 1.4em; }
ul[data-block="products"] li { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); }
/* ---------- product card rows (2026-11-06) ---------- */
/* At most four product cards in a row (Tomek: five made them too thin): a column is never narrower than a quarter. */
ul[data-block="products"] { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 200px), calc((100% - 42px) / 4)), 1fr)); }
/* Every card's price and button sit at its bottom, so the buttons in a row line up whatever the words above. */
ul[data-block="products"] > li { display: flex; flex-direction: column; }
ul[data-block="products"] > li > :is([data-field="price"], [data-order-no-price]) { margin-top: auto; }
ul[data-block="products"] > li > :is([data-field="price"], [data-order-no-price]) ~ [data-order-card] { margin-top: 0; }
/* ---------- end product card rows ---------- */
ul[data-block="products"] li h3 { margin: 0; }
/* ---------- a page per product (C3: the approved product page mock-up) ---------- */
ul[data-block="products"] li [data-field="line"] { margin: .2em 0 .6em; font-size: var(--fs-small, .9em); color: var(--muted); }
ul[data-block="products"] li [data-product-choose] { margin: .6em 0 0; }
/* ---------- a collection page, shop first (2026-11-03) ---------- */
/* the facts every product shares, once above the cards; each card's own facts as small tags */
[data-field="shared"] { margin: 1.2em 0 0; padding: 10px 14px; border-radius: var(--r-card); background: var(--soft); font-size: var(--fs-small, .9em); color: var(--muted); }
[data-field="shared"] b { color: var(--ink); font-weight: 600; }
[data-field="shared-label"] { color: var(--ink); font-weight: 600; margin-right: .3em; }
ul[data-block="products"] li [data-field="facts"] { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 .6em; }
ul[data-block="products"] li [data-field="facts"] span, [data-product-out] { font-size: .8em; padding: 2px 8px; border-radius: var(--r-btn); background: var(--soft); color: var(--ink); }
[data-product-out] { width: fit-content; margin: 0 0 .6em; }
/* the compare table under the cards */
[data-block="product-compare"] { margin-top: 2em; }
[data-block="product-compare"] [data-table-scroll] { overflow-x: auto; }
[data-block="product-compare"] table { width: 100%; border-collapse: collapse; font-size: var(--fs-small, .9em); }
[data-block="product-compare"] th, [data-block="product-compare"] td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
[data-block="product-compare"] thead th { color: var(--muted); font-weight: 600; }
[data-block="product-compare"] tbody th { font-weight: 600; }
/* the words about the range, folded under "Read more" */
main > [data-collection-more] { text-align: center; padding: 0 24px calc(var(--sec-y) * .6); }
main > [data-collection-more][hidden], main > section[data-collection-folded][hidden] { display: none; }
[data-collection-more] > button { font: inherit; font-weight: 600; color: var(--primary); background: none; border: 1px solid currentColor; border-radius: var(--r-btn); padding: 9px 18px; cursor: pointer; }
/* ---------- end a collection page, shop first ---------- */
[data-product-top] { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 48px; align-items: start; }
[data-product-gallery] { position: sticky; top: calc(84px + var(--lr-bn-top, 0px)); }
[data-product-stage] { position: relative; aspect-ratio: 1; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-img); overflow: hidden; }
/* ---------- whole product pictures ---------- */
/* A PRODUCT PICTURE IS NEVER CUT (Tomek, 2026-11-03): it shows whole (contain) in its box, and a blurred, enlarged copy of
   the same file (html fitImg: the second <img>, data-pic-fill) fills the room its own shape leaves. Product cards, the
   product page's stage and the catalogue grid's cards. */
[data-product-stage] > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
[data-product-stage] > img[data-pic-fill], [data-pic-box] > img[data-pic-fill],
[data-block="showcase-cards"][data-group="product"] [data-card-picture] img[data-pic-fill] {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border-radius: 0;
  object-fit: cover; filter: blur(18px) saturate(1.1); transform: scale(1.2); opacity: .85; pointer-events: none; }
[data-pic-box] { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; margin: -18px -18px 14px;
  border-radius: var(--r-card) var(--r-card) 0 0; background: var(--soft); }
[data-pic-box] > img:not([data-pic-fill]) { position: relative; z-index: 1; display: block; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; object-fit: contain; }
[data-block="showcase-cards"][data-group="product"] [data-card-picture] img:not([data-pic-fill]) { z-index: 1; object-fit: contain; }
/* ---------- end whole product pictures ---------- */
[data-product-stage] > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
[data-product-thumbs] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
[data-product-thumbs] button { position: relative; aspect-ratio: 1; padding: 0; border: 1px solid var(--line); border-radius: var(--r-img); background: var(--soft); cursor: pointer; overflow: hidden; }
[data-product-thumbs] button img { width: 100%; height: 100%; object-fit: contain; }
[data-product-thumbs] button[aria-current="true"] { border: 2px solid var(--heading); }
button[data-video] { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; background: var(--dark); color: var(--dark-ink); aspect-ratio: 16 / 9; overflow: hidden; font: inherit; text-align: left; }
[data-product-stage] button[data-video] { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
button[data-video] > img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
[data-video-play] { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
[data-video-play] svg { width: 64px; height: 64px; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .5)); }
[data-product-thumbs] [data-video-play] svg { width: 34%; height: 34%; }
/* ---------- product 3D view (client products S5): "View in 3D · n MB" on the stage, the "3D Turn it around" tile and
   the viewer, which loads only when one of them is tapped ---------- */
[data-model-open] { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid rgb(255 255 255 / .25); border-radius: 999px; background: rgb(20 19 18 / .86); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
[data-model-open][hidden] { display: none; }
[data-model-open]:hover, [data-model-open]:focus-visible { border-color: var(--accent, #fff); }
[data-model-open] svg { width: 18px; height: 18px; }
[data-model-open] small { font-weight: 400; opacity: .75; }
[data-product-thumbs] button[data-thumb="model"] { display: grid; place-content: center; gap: 2px; color: #fff; text-align: center; background: radial-gradient(circle at 50% 45%, #3a3835, #141312 80%); }
[data-product-thumbs] button[data-thumb="model"] b { font-size: 1.05em; letter-spacing: .04em; }
[data-product-thumbs] button[data-thumb="model"] span { font-size: .72em; opacity: .8; line-height: 1.2; padding: 0 4px; }
[data-model-view] { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, #2b2926, #121110 85%); color: #e8e4dc; }
[data-model-canvas] { position: absolute; inset: 0; }
[data-model-status] { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; padding: 20px; text-align: center; }
[data-model-bar] { display: block; width: 180px; height: 4px; margin: 0 auto; border-radius: 2px; background: rgb(255 255 255 / .18); overflow: hidden; }
[data-model-bar] i { display: block; width: 0; height: 100%; background: var(--accent, #fff); transition: width .2s; }
[data-model-tip] { position: absolute; left: 14px; top: 12px; margin: 0; font-size: .82em; pointer-events: none; }
[data-model-close] { position: absolute; right: 12px; top: 10px; padding: 6px 10px; border: 1px solid rgb(255 255 255 / .3); border-radius: 6px; background: rgb(20 19 18 / .86); color: #fff; font: inherit; font-size: .85em; font-weight: 600; cursor: pointer; }
@media (max-width: 760px) { [data-model-open] small { display: none; } }
/* ---------- end product 3D view ---------- */
[data-video-caption] { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; background: linear-gradient(transparent, rgb(0 0 0 / .75)); font-size: var(--fs-small, .92rem); color: #fff; }
[data-video-caption] small { display: block; opacity: .8; }
iframe[data-video-player] { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
[data-product-up] { font-size: var(--fs-small, .9em); color: var(--muted); margin: 0 0 .6em; }
[data-product-buy] h1 { margin-bottom: .3em; }
[data-product-lede] { color: var(--muted); font-size: var(--fs-lead, 1.08rem); max-width: 52ch; }
[data-product-buy] [data-field="price"] { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 2px; }
[data-product-buy] [data-price-text] { font-family: var(--font-h); font-size: 1.85rem; font-weight: var(--h-weight); color: var(--heading); font-variant-numeric: tabular-nums; }
[data-price-from] { color: var(--muted); font-size: var(--fs-small, .9em); }
[data-picker] fieldset { margin: 18px 0 0; border: 0; padding: 0; min-width: 0; }
[data-picker] legend { font-weight: 700; font-size: .92rem; color: var(--heading); margin-bottom: 8px; padding: 0; }
[data-picker] legend [data-pick-now] { font-weight: 400; color: var(--muted); margin-left: .35em; }
[data-pick-chips] { display: flex; flex-wrap: wrap; gap: 8px; }
[data-pick-chips] label { position: relative; }
[data-pick-chips] input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
[data-pick-chips] span { display: inline-flex; align-items: center; min-width: 56px; justify-content: center; padding: 8px 12px; font-size: .92rem; border: 1px solid var(--line); border-radius: var(--r-btn, 6px); background: var(--bg); color: var(--ink); }
[data-pick-chips] label:hover span { border-color: var(--heading); }
[data-pick-chips] input:checked + span { border: 2px solid var(--heading); padding: 7px 11px; font-weight: 700; color: var(--heading); box-shadow: inset 0 -3px 0 var(--primary); }
[data-pick-chips] input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
[data-picker] [data-pick-stock], [data-picker] [data-pick-note] { margin: 12px 0 0; font-size: var(--fs-small, .9em); color: var(--heading); border-left: 2px solid var(--primary); padding-left: 10px; }
[data-picker] [hidden], [data-field="price"][hidden], [data-field="code"][hidden], [data-field="tax-note"][hidden], [data-your-pick][hidden] { display: none; }
[data-product-buy] [data-order-card], [data-product-buy] > [data-block="buttons"] { margin-top: 22px; }
[data-product-buy] [data-order-add]:disabled { opacity: .55; cursor: not-allowed; }
[data-product-meta] { margin: 12px 0 0; font-size: var(--fs-small, .9em); color: var(--muted); }
[data-key-facts] { margin: 26px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
[data-key-facts] > div { padding: 11px 0; border-bottom: 1px solid var(--line); }
[data-key-facts] dt { font-size: .8rem; color: var(--muted); }
[data-key-facts] dd { margin: 1px 0 0; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
[data-product-bar] { position: sticky; top: calc(64px + var(--lr-bn-top, 0px)); z-index: 15; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 32px; }
[data-product-bar] ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 0; list-style: none; }
[data-product-bar] a { display: block; padding: 14px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .93rem; white-space: nowrap; border-bottom: 3px solid transparent; }
[data-product-bar] a:hover, [data-product-bar] a:focus-visible, [data-product-bar] a[aria-current="true"] { color: var(--heading); border-bottom-color: var(--primary); }
main > section[data-section-type="product_top"]:not(:last-child) { padding-bottom: 0; }
html:has([data-product-bar]) { scroll-padding-top: 130px; }
details[data-product-fold] > summary { list-style: none; cursor: default; }
details[data-product-fold] > summary::-webkit-details-marker { display: none; }
details[data-product-fold] > summary h2 { display: inline-block; }
[data-block="spec-groups"] [data-spec-group] { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px 20px; }
[data-block="spec-groups"] table { width: 100%; border-collapse: collapse; font-size: .95rem; }
[data-block="spec-groups"] th, [data-block="spec-groups"] td { text-align: left; vertical-align: top; padding: 9px 0; border-top: 1px solid var(--line); }
[data-block="spec-groups"] tr:first-child th, [data-block="spec-groups"] tr:first-child td { border-top: 0; }
[data-block="spec-groups"] th { font-weight: 500; color: var(--muted); width: 42%; padding-right: 14px; }
[data-block="spec-groups"] td { color: var(--heading); font-weight: 600; font-variant-numeric: tabular-nums; }
[data-split] { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
[data-split] span { display: block; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--line); font-weight: 600; }
[data-split] span small { display: block; font-weight: 500; color: var(--muted); font-size: .76rem; }
[data-split] span[aria-current="true"] { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
[data-table-wrap] { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-card); overflow-x: auto; background: var(--bg); }
[data-block="data-table"] table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .9rem; font-variant-numeric: tabular-nums; }
[data-block="data-table"] th, [data-block="data-table"] td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
[data-block="data-table"] thead th { background: var(--soft); color: var(--heading); font-weight: 700; }
[data-block="data-table"] th[scope="row"], [data-block="data-table"] thead th:first-child { text-align: left; position: sticky; left: 0; background: var(--bg); font-weight: 500; color: var(--muted); z-index: 1; box-shadow: 1px 0 0 var(--line); }
[data-block="data-table"] thead th:first-child { background: var(--soft); color: var(--heading); font-weight: 700; z-index: 2; }
[data-block="data-table"] tbody th[scope="rowgroup"] { text-align: left; background: var(--soft); color: var(--heading); font-weight: 700; position: sticky; left: 0; }
[data-block="data-table"] tbody th[scope="rowgroup"] em { font-style: normal; font-weight: 600; font-size: .78rem; color: var(--primary); margin-left: 8px; }
[data-block="data-table"] tbody[aria-current="true"] th[scope="rowgroup"] { box-shadow: inset 4px 0 0 var(--primary); }
[data-block="data-table"] td { color: var(--heading); }
[data-table-note], [data-table-check] { margin: 12px 0 0; font-size: var(--fs-small, .9em); color: var(--muted); max-width: 90ch; }
ul[data-block="documents"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; margin: 8px 0 0; padding: 0; list-style: none; }
ul[data-block="documents"] a { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; color: var(--ink); background: var(--bg); }
ul[data-block="documents"] a:hover { border-color: var(--primary); }
[data-doc-icon] { width: 52px; height: 52px; border-radius: 4px; background: var(--soft); color: var(--heading); display: grid; place-items: center; }
[data-doc-icon] svg { width: 30px; height: 30px; }
ul[data-block="documents"] b { display: block; color: var(--heading); }
ul[data-block="documents"] small { color: var(--muted); font-size: .84rem; }
[data-doc-open] { font-weight: 600; color: var(--primary); font-size: .9rem; }
ul[data-block="videos"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; margin: 8px 0 0; padding: 0; list-style: none; }
[data-block="rich-text"] p, [data-block="rich-text"] ul { max-width: 68ch; }
/* THE LAYOUT PER TEMPLATE (spec 2026-10-10-product-page-templates): the top carries only the choices that differ from the
   defaults above, as attributes; the corners always stay the site's picture corners (--r-img). */
[data-product-top][data-gallery="right"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
[data-product-top][data-gallery="right"] > [data-product-gallery] { order: 2; }
[data-product-top][data-thumbs="beside"] [data-product-gallery]:has(> [data-product-thumbs]) { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: start; }
[data-product-top][data-thumbs="beside"] [data-product-thumbs] { order: -1; grid-template-columns: 1fr; margin-top: 0; }
[data-product-top][data-thumbs="beside"] [data-product-gallery] > [data-key-facts] { grid-column: 1 / -1; }
[data-product-gallery] > [data-key-facts] { margin-top: 22px; }
[data-product-top][data-frame="shadow"] :is([data-product-stage], [data-product-thumbs] button:not([aria-current="true"])) { border-color: transparent; background: var(--bg); }
[data-product-top][data-frame="shadow"] :is([data-product-stage], [data-product-thumbs] button) { box-shadow: var(--shadow); }
[data-product-top][data-frame="outline"] :is([data-product-stage], [data-product-thumbs] button) { background: var(--bg); }
[data-product-top][data-frame="none"] :is([data-product-stage], [data-product-thumbs] button) { background: transparent; }
[data-product-top][data-frame="none"] :is([data-product-stage], [data-product-thumbs] button:not([aria-current="true"])) { border-color: transparent; }
@media (min-width: 761px) {
  main:has([data-product-top]:is([data-property-columns="2"], [data-property-columns="3"])) [data-block="spec-groups"] :is(table, tbody) { display: block; }
  main:has([data-product-top][data-property-columns="2"]) [data-block="spec-groups"] tbody { columns: 2; column-gap: 36px; }
  main:has([data-product-top][data-property-columns="3"]) [data-block="spec-groups"] tbody { columns: 3; column-gap: 32px; }
  main:has([data-product-top]:is([data-property-columns="2"], [data-property-columns="3"])) [data-block="spec-groups"] tr { display: grid; grid-template-columns: 42% minmax(0, 1fr); break-inside: avoid; border-top: 1px solid var(--line); }
  main:has([data-product-top]:is([data-property-columns="2"], [data-property-columns="3"])) [data-block="spec-groups"] :is(th, td) { width: auto; border-top: 0; }
}
/* Tabs: the runtime marks the page once the bar works as tabs; until then (and with no script) the sections stay one
   below the other. */
@media (min-width: 761px) {
  html[data-product-tabs] main > section[data-section-type="product_section"][data-tab-off] { display: none; }
  html[data-product-tabs] [data-product-bar] a[aria-selected="true"] { color: var(--heading); border-bottom-color: var(--primary); }
}
@media (max-width: 760px) {
  html:has([data-product-bar]) { scroll-padding-top: 70px; }
  [data-product-top] { grid-template-columns: 1fr; gap: 18px; }
  [data-product-gallery] { position: static; }
  [data-product-thumbs] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  [data-product-thumbs] button { flex: 0 0 64px; scroll-snap-align: start; }
  [data-product-top][data-gallery="right"] { grid-template-columns: 1fr; }
  [data-product-top][data-gallery="right"] > [data-product-gallery] { order: 0; }
  [data-product-top][data-thumbs="beside"] [data-product-gallery]:has(> [data-product-thumbs]) { display: block; }
  [data-product-top][data-thumbs="beside"] [data-product-thumbs] { margin-top: 10px; }
  [data-product-buy] [data-price-text] { font-size: 1.6rem; }
  [data-key-facts] { column-gap: 16px; }
  [data-product-bar] { display: none; }
  main > section[data-section-type="product_section"] { padding-top: 0; padding-bottom: 0; }
  details[data-product-fold] { border-bottom: 1px solid var(--line); }
  details[data-product-fold] > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 0; }
  details[data-product-fold] > summary h2 { margin: 0; flex: 1; }
  details[data-product-fold] > summary::after { content: '+'; font-size: 1.4em; line-height: 1; color: var(--primary); }
  details[data-product-fold][open] > summary::after { content: '–'; }
  details[data-product-fold][open] { padding-bottom: 22px; }
  [data-block="spec-groups"] [data-spec-group] { border: 0; padding: 0; }
  [data-block="spec-groups"] tr { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); padding: 8px 0; }
  [data-block="spec-groups"] th, [data-block="spec-groups"] td { border: 0; padding: 0; width: auto; }
  ul[data-block="documents"] a { grid-template-columns: 44px 1fr; }
  [data-doc-open] { grid-column: 2; }
  [data-product-buy] [data-order-card] { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; z-index: 5; }
}

/* ---------- recent work ---------- */
[data-block="recent-work"] > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--gap); margin-top: 1.4em; }
[data-block="recent-work"] > ul > li img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-img); margin-bottom: 14px; width: 100%; }
[data-block="recent-work"] [data-field="meta"] { font-size: var(--fs-small); color: var(--muted); display: flex; gap: .6em; margin-bottom: .4em; }
[data-block="recent-work"] [data-field="label"] { color: var(--accent); font-weight: 700; }
[data-block="recent-work"] > h2, [data-block="recent-work"] > p { max-width: var(--measure); }

/* ---------- location band ---------- */
[data-block="location-band"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
[data-block="location-band"] > h2, [data-block="location-band"] > p { grid-column: 1; }
[data-block="location-band"] [data-band-location] { grid-column: 2; grid-row: 1 / span 3; padding: 26px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--bg); }
[data-block="location-band"] [data-location-name] { font-family: var(--font-h); font-weight: var(--h-weight); color: var(--heading); margin-bottom: .3em; }
[data-block="location-band"] address { font-style: normal; color: var(--muted); margin-bottom: 1em; }
/* A plain list in two columns, never pills (Tomek, 2026-10-05). */
[data-service-areas] { columns: 2; column-gap: 24px; margin-bottom: .6em; max-width: 26rem; }
[data-service-areas] li { break-inside: avoid; padding: .15em 0; color: inherit; }
[data-service-areas] li[hidden] { display: none; }
/* A BAND WITH ITS MAP (spec 2026-10-05-find-us-band): the words, the place and its links on the left, the map on the
   right, framed by the theme like the site's photos. Several branches (Contact) keep their cards. */
[data-block="location-band"]:not([data-location="all"]):has([data-map] iframe) { row-gap: 10px; }
[data-block="location-band"]:not([data-location="all"]):has([data-map] iframe) [data-band-location] { display: contents; }
[data-block="location-band"]:not([data-location="all"]):has([data-map] iframe) [data-band-location] > * { grid-column: 1; }
[data-block="location-band"]:not([data-location="all"]):has([data-map] iframe) [data-band-location] > [data-location-name] { display: none; }
[data-block="location-band"]:not([data-location="all"]) [data-band-location] > [data-map]:has(iframe),
[data-block="location-band"]:not([data-location="all"]) [data-band-location] > .lr-sec-wrap:has(iframe) { grid-column: 2; grid-row: 1 / span 8; align-self: center; }
[data-block="location-band"] [data-map]:has(iframe) { aspect-ratio: 16 / 10; border-radius: var(--r-img, var(--r-card)); overflow: hidden; }
[data-block="location-band"] .lr-sec-wrap [data-map]:has(iframe) { border-radius: 0; }
[data-block="location-band"] [data-map] iframe { display: block; width: 100%; height: 100%; border: 0; }
[data-block="location-band"] [data-band-location] > [data-link] { justify-self: start; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* One map per page: where the band shows a map, the footer's is left out (the theme removes it; this covers a page
   drawn before the script runs and a builder without it). */
body:has([data-block="location-band"] [data-map]) .lr-footer [data-footer-part="where"] [data-map] { display: none; }
/* The contact page never shows the footer's map, one branch or many: its details block carries the page's own (contact
   page part 1, 2026-10-07). */
body:has([data-contact-details]) .lr-footer [data-footer-part="where"] [data-map] { display: none; }

/* ---------- team ---------- */
ul[data-block="team"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--gap); margin-top: 1.6em; }
ul[data-block="team"] img { aspect-ratio: 1; object-fit: cover; border-radius: var(--r-img); margin-bottom: 12px; width: 100%; }
ul[data-block="team"] h3 { margin-bottom: .1em; }
ul[data-block="team"] [data-field="role"] { color: var(--muted); font-size: .95em; }

/* ---------- FAQ ---------- */
[data-block="faq"] { margin-top: 1.4em; max-width: 820px; }
[data-block="faq"] [data-faq-item] { border-top: 1px solid var(--line); padding: 20px 0; }
[data-block="faq"] [data-faq-item]:last-child { border-bottom: 1px solid var(--line); }
[data-block="faq"] h3 { margin: 0; }
[data-block="faq"] [data-faq-item] p { margin: .7em 0 0; color: var(--muted); }
html [data-block="faq"] [data-faq-item] h3 { cursor: pointer; display: flex; justify-content: space-between; gap: 16px; }
html [data-block="faq"] [data-faq-item] h3::after { content: '+'; color: var(--primary); font-size: 1.5em; line-height: .8; }
html [data-block="faq"] [data-faq-item]:not(.open) > :not(h3) { display: none; }
html [data-block="faq"] [data-faq-item].open h3::after { content: '–'; }

/* ---------- hub links / explore more ---------- */
ul[data-block="links"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--gap); margin-top: 1.2em; }
ul[data-block="links"] li { padding: 22px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--bg); }
ul[data-block="links"] li a { font-family: var(--font-h); font-size: var(--fs-h3); text-decoration: none; display: block; margin-bottom: .4em; color: var(--heading); }
ul[data-block="links"] li a::after { content: ' →'; color: var(--primary); }
ul[data-block="links"] li p { color: var(--muted); margin: 0; }

/* ---------- author, byline, case photos ---------- */
aside[data-block="author"] { padding: 26px; border-radius: var(--r-card); background: var(--soft); max-width: 720px; }
aside[data-block="author"] [data-field="name"] { font-family: var(--font-h); font-weight: var(--h-weight); color: var(--heading); font-size: var(--fs-h3); margin: 0; }
aside[data-block="author"] [data-field="role"] { color: var(--muted); margin-bottom: .6em; }
aside[data-block="author"] [data-field="credentials"] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1em; }
aside[data-block="author"] [data-field="credentials"] li { font-size: var(--fs-small); padding: .25em .7em; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); }
[data-block="case-study-photos"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin-top: 1.2em; max-width: none; }
[data-block="case-study-photos"] figure { margin: 0; }
[data-block="case-study-photos"] img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-img); width: 100%; }
[data-block="case-study-photos"] figcaption { font-size: var(--fs-small); color: var(--muted); margin-top: .5em; }
[data-field="stage"] { font-weight: 700; color: var(--accent); margin-right: .3em; }

/* ---------- footer ---------- */
.lr-footer { background: var(--dark); color: var(--dark-muted); padding: 56px max(24px, calc((100% - var(--container)) / 2)); font-size: .95rem; }
.lr-footer .name { font-family: var(--font-h); font-weight: var(--h-weight); color: var(--dark-ink); font-size: 1.3rem; margin-bottom: 1em; }
.lr-footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.lr-footer [data-contact-points] li { margin-bottom: .5em; display: flex; gap: .5em; align-items: center; }
.lr-footer [data-contact-points] img { width: 1.2em; height: 1.2em; }
.lr-footer a { color: var(--dark-ink); text-decoration: none; }
.lr-footer address { font-style: normal; }
.lr-footer [data-location-name] { color: var(--dark-ink); margin: 0 0 .2em; font-weight: 600; }

/* ---------- focused chrome (offer pages): logo | back link | one button, and a slim one-line footer ---------- */
.lr-header-focus [data-back] { color: var(--muted); text-decoration: none; font-size: .95rem; white-space: nowrap; }
.lr-header-focus [data-back]:hover { color: var(--heading); }
.lr-header-focus [data-back][hidden] { display: none; }
.lr-header-focus [data-site-buttons] { margin-left: auto; }
.lr-header-focus [data-back] .lr-back-short { display: none; }
html[data-header="dark"] .lr-header-focus [data-back] { color: var(--dark-muted); }
.lr-footer-slim { padding: 22px max(24px, calc((100% - var(--container)) / 2)) 20px; font-size: .88rem; text-align: center; }
/* `.lr-footer.lr-footer-slim`: the composed footer's rules further down (name size, list and item gaps) must not reach
   the slim footer, or every part sits at its own height. Option A of mock-up 2026-10-06 offer-footer: centred, name ·
   phone · email, then the address on its own line, then the copyright and legal links under a hairline. */
.lr-footer.lr-footer-slim [data-footer-slim] p, .lr-footer.lr-footer-slim [data-footer-slim] ul { margin: 0; padding: 0; list-style: none; }
.lr-footer.lr-footer-slim [data-footer-slim] ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.lr-footer.lr-footer-slim [data-footer-slim] li { margin: 0; }
.lr-footer.lr-footer-slim [data-footer-line] { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 22px; }
.lr-footer.lr-footer-slim [data-footer-name] { font-size: 1rem; margin: 0; }
.lr-footer.lr-footer-slim [data-footer-line] a { color: var(--dark-ink); }
.lr-footer.lr-footer-slim [data-footer-address] { display: block; margin: 8px auto 0; max-width: 70ch; font-style: normal; color: var(--dark-muted); text-wrap: balance; }
.lr-footer.lr-footer-slim [data-footer-legal] { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 14px auto 0; padding-top: 12px; max-width: 46rem; border-top: 1px solid color-mix(in srgb, var(--dark-ink) 16%, transparent); font-size: .82rem; color: var(--dark-muted); }
.lr-footer.lr-footer-slim [data-footer-legal] ul { gap: 6px 18px; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .lr-header-focus [data-back] .lr-back-full { display: none; }
  .lr-header-focus [data-back] .lr-back-short { display: inline; }
  .lr-footer.lr-footer-slim [data-footer-line], .lr-footer.lr-footer-slim [data-contact-points] { flex-direction: column; align-items: center; }
  .lr-footer.lr-footer-slim [data-footer-legal] { flex-direction: column-reverse; align-items: center; }
  .lr-footer.lr-footer-slim [data-footer-slim] [data-contact-points] { gap: 0; } /* each link is already a 44px tap target */
  .lr-footer-slim [data-copyright] { margin-left: 0; }
  .lr-header nav { display: none; }
  .lr-header .in { flex-wrap: wrap; }
  .lr-phone-menu { display: block; margin-left: auto; }
  .lr-phone-menu[open] { flex-basis: 100%; order: 9; }
  .lr-phone-menu[open] > summary { text-align: right; }
  .lr-phone-menu > nav { display: grid; gap: 2px; margin: 8px 0 4px; }
  .lr-phone-menu > nav a { padding: 10px 4px; border-top: 1px solid var(--line); color: var(--heading); text-decoration: none; }
  .lr-phone-group > summary { list-style: none; cursor: pointer; padding: 10px 4px; border-top: 1px solid var(--line); color: var(--heading); }
  .lr-phone-group > summary::after { content: ''; float: right; width: .45em; height: .45em; margin: .35em .3em 0; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
  .lr-phone-group[open] > summary::after { transform: rotate(-135deg); margin-top: .55em; }
  .lr-phone-menu > nav a.lr-phone-sub { display: block; padding-left: 18px; }
  .lr-header .in { justify-content: space-between; }
  main > section.has-pic[data-section-type="hero"], main > section.has-side-pic, main > section.has-side-pic.pic-left, [data-block="location-band"] { display: block; }
  main > section.has-pic > picture[data-slot="hero"] { margin-top: 28px; }
  main > section.has-side-pic > picture, main > section.has-side-pic > figure, main > section.has-side-pic > .lr-sec-wrap, main > section.has-side-pic > [data-missing-slot] { margin-top: 24px; }
  /* Stacked, a photo is never tall: the tablet file (4:5 beside long words) is boxed 3:2 here, up to 760px, where the bundle's phone file only starts at 482px. */
  main > section.has-side-pic picture img { aspect-ratio: 3 / 2; }
  [data-block="location-band"] [data-band-location] { margin-top: 20px; }
  [data-block="location-band"] [data-map]:has(iframe), [data-block="location-band"] .lr-sec-wrap { margin-top: 18px; }
  [data-block="location-band"] .lr-sec-wrap [data-map] { margin-top: 0; }
  main > section[data-section-type="hero"] [data-block="badges"], [data-block="badges"] { justify-content: flex-start; flex-direction: column; gap: 10px; }
  html[data-edge="slant"] main > section { --edge-depth: 6vw; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* An enrol button above the price card is a plain #offer-price link (Tomek, 2026-10-06): the page glides to it, and never when motion is reduced. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ===== round-1 system fixes (found by the checker; they improve every client) ===== */
/* words-only hero: the trust list becomes a panel beside the heading instead of an empty half */
main > section.lr-hero-panel[data-section-type="hero"] { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr); column-gap: clamp(32px, 5vw, 80px); align-items: center; }
main > section.lr-hero-panel > :not(.lr-panel) { grid-column: 1; }
main > section.lr-hero-panel > .lr-panel { grid-column: 2; grid-row: 1 / span 8; max-width: none; padding: 28px; border-radius: var(--r-card);
  background: color-mix(in srgb, var(--bg) 96%, transparent); color: var(--ink); box-shadow: var(--shadow); }
main > section.lr-hero-panel > .lr-panel [data-block="badges"] { flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; }
main > section.lr-hero-panel > .lr-panel [data-block="badges"] li { color: var(--heading); font-size: var(--lr-body-size, 1em); }
html[data-cards="edge"] main > section.lr-hero-panel > .lr-panel { border-left: 5px solid var(--primary); }
main > section.lr-hero-panel > h1 { max-width: 18ch; }

/* split hero: headings sized for half a screen; photo centred on the words */
main > section.has-pic[data-section-type="hero"] > h1 { max-width: 16ch; }
main > section.has-pic > picture[data-slot="hero"] { grid-row: 1 / -1; align-self: center; }
html[data-img-frame="offset"] main > section.has-pic > picture { margin: 0 18px 18px 0; }
html[data-img-frame="offset"] main > section.has-pic > picture::before { inset: 14px -14px -14px 14px; }

/* links on dark bands stay readable */
html[data-rhythm="bold"] main > section[data-section-type="testimonial"] a:not([data-button]),
html[data-rhythm="bold"] main > section[data-section-type="cta"] a:not([data-button]),
html[data-hero-ground="dark"] main > section[data-section-type="hero"] a:not([data-button]) { color: var(--dark-ink); text-decoration: underline; }

/* only the business's main action wears the primary colour; other buttons are secondary */
main [data-button][data-kind="custom"] { background: transparent; color: var(--heading); border-color: currentColor; }
html[data-hero-ground="dark"] main > section[data-section-type="hero"] [data-button][data-kind="custom"],
html[data-rhythm="bold"] main > section[data-section-type="cta"] [data-button][data-kind="custom"] { color: var(--dark-ink); }

/* mid-page call to action: a framed band, not loose text */
main > section[data-section-type="intro"][data-role="midcta"] { padding-top: calc(var(--sec-y) * .6); padding-bottom: calc(var(--sec-y) * .6); }
main > section[data-section-type="intro"][data-role="midcta"] > p { border-left: 5px solid var(--primary); padding-left: 22px; }
html:is([data-align="center"], [data-align="right"]) main > section[data-section-type="intro"][data-role="midcta"] > p { border-left: 0; padding-left: 0; }

/* phone: one-line header, a gap between hero button and photo */
@media (max-width: 760px) {
  .lr-header [data-site-name] { white-space: nowrap; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
  .lr-header [data-site-buttons] [data-button] { font-size: .8rem; padding: .5em .8em; white-space: nowrap; }
  main > section.has-pic[data-section-type="hero"] [data-block="buttons"] { margin-bottom: 8px; }
  main > section.lr-hero-panel[data-section-type="hero"] { display: block; }
  main > section.lr-hero-panel > .lr-panel { margin-top: 28px; }
}
/* round-2 system fix: the hero panel is always a light card, whatever the hero ground */
html main > section.lr-hero-panel[data-section-type="hero"] > .lr-panel [data-block="badges"] li { color: var(--heading); background: transparent; border: 0; padding: 0; border-radius: 0; }
/* round-2 system fixes, continued */
main > section.has-pic, main > section.has-side-pic, main > section.lr-hero-panel { align-items: center; }
main > section .lr-words { grid-column: 1; grid-row: 1; max-width: none; min-width: 0; }
main > section .lr-words > * { max-width: var(--measure); }
main > section .lr-words > h1 { max-width: 18ch; }
main > section.pic-left .lr-words { grid-column: 2; }
main > section.has-pic > picture, main > section.has-side-pic > picture, main > section.has-side-pic > figure, main > section.has-side-pic > .lr-sec-wrap, main > section.has-side-pic > [data-missing-slot], main > section.lr-hero-panel > .lr-panel { grid-row: 1 !important; }
main > section.lr-hero-panel > .lr-panel { align-self: center; }
main > section .lr-words > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  ul[data-block="cards"], ul[data-block="testimonials"], ul[data-block="links"], [data-block="recent-work"] > ul, ul[data-block="team"] { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  main > section .lr-words { margin-bottom: 0; }
}
/* round-2 system fixes, part 3 */
/* trust chips on a dark hero: outlined, light words */
html[data-hero-ground="dark"] main > section[data-section-type="hero"] [data-block="badges"] li { background: transparent; color: var(--dark-ink); border-color: color-mix(in srgb, var(--dark-ink) 35%, transparent); }
html main > section[data-section-type="trust_bar"] [data-block="badges"] li { color: var(--heading); }
/* Trust chips follow the hero's ground per layout: on a dark ground (band, title, flat, un-shaped dark or banner hero)
   a transparent outlined pill with light words and light icons; on a split or stack hero the ordinary chip on the light
   ground. The hero panel is a light card and keeps its own rules (it is excluded here). */
main > section[data-section-type="hero"]:not(.lr-hero-panel).lr-shape:is([data-lr-layout="band"], [data-lr-layout="title"], [data-lr-layout="flat"]) [data-block="badges"] li,
main > section[data-section-type="hero"]:not(.lr-hero-panel):not(.lr-shape):not(.has-pic) [data-block="badges"] li,
html[data-hero-ground="dark"] main > section[data-section-type="hero"]:not(.lr-hero-panel):not(.lr-shape) [data-block="badges"] li { background: transparent; color: var(--dark-ink); border-color: color-mix(in srgb, var(--dark-ink) 35%, transparent); }
main > section[data-section-type="hero"]:not(.lr-hero-panel).lr-shape:is([data-lr-layout="band"], [data-lr-layout="title"], [data-lr-layout="flat"]) [data-block="badges"] li img,
main > section[data-section-type="hero"]:not(.lr-hero-panel):not(.lr-shape):not(.has-pic) [data-block="badges"] li img,
html[data-hero-ground="dark"] main > section[data-section-type="hero"]:not(.lr-hero-panel):not(.lr-shape) [data-block="badges"]:not([data-icon-shape]) li img { filter: brightness(0) invert(1); }
/* banner hero: the photo always covers the whole band, with an even scrim */
/* author photo */
aside[data-block="author"] img, section[data-section-type="author_box"] img { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; margin-bottom: 12px; }
/* round-3 system fixes: the hero panel wins over every chip/hero rule */
main > section.lr-hero-panel > .lr-panel.lr-panel [data-block="badges"] li.lr-b { color: var(--heading); background: transparent; border: 0; padding: 0; }
/* round-3 system fix: the banner photo is sized by the hero, never by the picture */
/* words-only hero panel: lines up with the heading's top, not floating mid-band */
main > section.lr-hero-panel[data-section-type="hero"] { align-items: start; }
main > section.lr-hero-panel > .lr-panel { align-self: start; margin-top: .4em; }
/* round-4 system fixes */
@media (max-width: 760px) {
  html main > section.has-pic[data-section-type="hero"]:not(.x) > picture[data-slot="hero"] { margin-top: 32px; }
}
main picture { display: block; }

/* ===== design-loop system fixes (2026-10-04, Klipspringer run) ===== */
/* The dot mark sits ABOVE the heading like the bar, so the heading keeps the section's left edge. */
html[data-mark="dot"] main > section > h2::before, html[data-mark="dot"] main > section .lr-words > h2::before { content: ''; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); margin-bottom: .7em; font-size: 1rem; }
html[data-mark="bar"] main > section .lr-words > h2::before { content: ''; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--primary); margin-bottom: .7em; }
@media (max-width: 760px) {
  /* Phone trust chips are a LEFT CHECKLIST, never wrapped pills (Tomek, 2026-10-03). */
  [data-block="badges"] li, html [data-block="badges"] li,
  html[data-hero-ground="dark"] main > section[data-section-type="hero"] [data-block="badges"] li {
    border: 0; background: transparent; padding: 0; border-radius: 0; width: auto; }
  [data-block="badges"] li:not(:has(img))::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%;
    background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
  /* The business name wraps onto two short lines rather than being cut off. */
  .lr-header [data-site-name] { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; max-width: 55%; }
  /* One row: the name gives way (wraps, shrinks) so the button and the ☰ stay beside it, never on a line of their own. */
  .lr-header .in { gap: 10px; }
  .lr-header [data-site-name] { flex: 1 1 0; min-width: 0; }
  /* The hero's trust panel keeps clear of the main button on phone (the desktop top-alignment rule set it to .4em). */
  main > section.lr-hero-panel > .lr-panel { margin-top: 28px; }
}
/* The hero's trust panel sits level with the middle of the words, at a size that balances the heading. */
@media (min-width: 761px) {
  main > section.lr-hero-panel[data-section-type="hero"] { align-items: center; }
  main > section.lr-hero-panel > .lr-panel { align-self: center; margin-top: 0; padding: 34px 36px; }
  main > section.lr-hero-panel > .lr-panel.lr-panel [data-block="badges"] { gap: 20px; }
  main > section.lr-hero-panel > .lr-panel.lr-panel [data-block="badges"] li.lr-b { font-size: var(--lr-body-size, 1em); }
}
/* A grid mixing cards with and without a photo: the cards keep one row height, and a card with no photo becomes a
   tinted panel with its words centred — deliberate, never a hollow card or a ragged row. */
ul[data-block="cards"].lr-mixed > li:not(:has(> img:not([width="48"]))) { background: var(--soft); justify-content: center; }
ul[data-block="cards"].lr-mixed > li:not(:has(> img:not([width="48"]))) > a { margin-top: .6em; }
/* A button group with no button of the business's main action (a case study's "see the service") keeps its first
   button solid, so every screen still has one clear main action. */
main [data-button][data-kind="custom"].lr-main, main [data-button].lr-main {
  background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
/* A hero with no photo and nothing beside it (an article, a guide, a design without the trust panel) follows the
   design's alignment, so the first screen never disagrees with the sections below it (the Klipspringer run: a
   centred hero above left-aligned sections cost every direction points). Left-aligned, its heading runs WIDE and
   large, so it never reads as half a hero; centred, it is a centred composition. */
main > section[data-section-type="hero"]:not(.has-pic):not(.lr-hero-panel) > h1 { max-width: 24ch; }
main > section[data-section-type="hero"]:not(.has-pic):not(.lr-hero-panel) > p { max-width: 64ch; }
/* Process steps: one row of up to five (the runtime sets --steps), never a lone step on a second row. */
@media (min-width: 900px) {
  main > section[data-section-type="process"] > ol { grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); }
}

/* ===== the shaped hero (spec 2026-10-04-hero-edge-into-trust-strip) =====
   A hero carrying its locked shape is decorated by theme.js: section.lr-shape > .lr-hero-room > .lr-hero-fr >
   .lr-hero-pic > picture + .lr-hero-shade, then .lr-words. data-lr-layout is the layout on the CURRENT screen, and
   the boxes wear ASSEMBLY's photo-style classes for it, so photo-style.css draws the client's edge and overlay. */
main > section.lr-shape > .lr-hero-room, main > section.lr-shape > .lr-words { max-width: none; }
main > section.lr-shape .lr-hero-pic { position: relative; }
main > section.lr-shape .lr-hero-pic picture, main > section.lr-shape .lr-hero-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
main > section.lr-shape > .lr-words > * { max-width: var(--measure); }
/* WORDS ALWAYS ON TOP (Tomek, 2026-10-07): an overlay shape never crosses the words, the button or the chips. Every
   two-column section's words box (the hero's, and each section with a photo or panel beside its words) stacks above the
   photo frame and its overlay layers, whatever seat the overlay has; band and box overlays sit at z-index 3 at most. */
main > section > .lr-words { position: relative; z-index: 4; }
main > section.lr-shape > .lr-words > :last-child { margin-bottom: 0; }
main > section.lr-shape .lr-overlay-layer { position: absolute; }
/* band: the photo fills the band behind the words; the words take 56% of the width on their side. */
main > section.lr-shape[data-lr-layout="band"] { display: flex; align-items: center; min-height: var(--lr-band-h, 560px); isolation: isolate; color: #fff; }
main > section.lr-shape[data-lr-layout="band"] > .lr-hero-room, main > section.lr-shape[data-lr-layout="band"] .lr-hero-fr,
main > section.lr-shape[data-lr-layout="band"] .lr-hero-pic { position: absolute; inset: 0; z-index: -1; }
main > section.lr-shape[data-lr-layout="band"] > .lr-words { position: relative; width: 56%; }
@media (max-width: 821.98px) { main > section.lr-shape[data-lr-layout="band"] > .lr-words { width: 100%; } }
main > section.lr-shape[data-lr-layout="band"][data-lr-side="right"] { justify-content: flex-end; }
main > section.lr-shape[data-lr-layout="band"][data-lr-side="centre"] { justify-content: center; text-align: center; }
main > section.lr-shape[data-lr-layout="band"][data-lr-side="centre"] > .lr-words > * { margin-left: auto; margin-right: auto; }
/* centred words run wide, as Lovable's do (Tomek, 2026-10-23) */
@media (min-width: 822px) { main > section.lr-shape[data-lr-layout="band"][data-lr-side="centre"] > .lr-words { width: min(100%, 58rem); }
  main > section.lr-shape[data-lr-side="centre"] > .lr-words > h1 { max-width: 30ch; } }
main > section.lr-shape[data-lr-layout="band"][data-lr-side="centre"] [data-block="buttons"],
main > section.lr-shape[data-lr-layout="band"][data-lr-side="centre"] [data-block="badges"] { justify-content: center; }
main > section.lr-shape[data-lr-layout="band"] h1, main > section.lr-shape[data-lr-layout="band"] .lr-words p,
main > section.lr-shape[data-lr-layout="band"] [data-block="badges"] li { color: #fff; }
/* The tint (ASSEMBLY "Words and tint"): full strength across the word column, 10% of it at 78%, clear at 100%. */
main > section.lr-shape .lr-hero-tint { position: absolute; inset: 0; pointer-events: none;
  --lr-t: var(--lr-tint, var(--lr-tint-page, var(--dark)));
  background: linear-gradient(90deg, color-mix(in srgb, var(--lr-t) calc(var(--lr-tint-a, .55) * 100%), transparent) 0%,
    color-mix(in srgb, var(--lr-t) calc(var(--lr-tint-a, .55) * 100%), transparent) 56%,
    color-mix(in srgb, var(--lr-t) calc(var(--lr-tint-a, .55) * 10%), transparent) 78%, transparent 100%); }
main > section.lr-shape[data-lr-side="right"] .lr-hero-tint { transform: scaleX(-1); }
main > section.lr-shape[data-lr-side="centre"] .lr-hero-tint { background: color-mix(in srgb, var(--lr-t) calc(var(--lr-tint-a, .55) * 100%), transparent); }
/* split: words on the left, the picture on the right at its ratio. */
main > section.lr-shape[data-lr-layout="split"] { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); align-items: center; }
main > section.lr-shape[data-lr-layout="split"] > .lr-words { grid-column: 1; grid-row: 1; }
main > section.lr-shape[data-lr-layout="split"] > .lr-hero-room { grid-column: 2; grid-row: 1; max-width: none; }
main > section.lr-shape[data-lr-layout="split"] .lr-hero-pic { aspect-ratio: var(--lr-ratio, 4 / 3); }
/* a split with a chosen height on a computer: that tall, the picture filling it (cover-cut from its frame) */
main > section.lr-shape[data-lr-layout="split"][data-lr-fixed-h] { min-height: var(--lr-band-h); }
main > section.lr-shape[data-lr-layout="split"][data-lr-fixed-h] > .lr-hero-room { align-self: stretch; display: flex; flex-direction: column; }
main > section.lr-shape[data-lr-layout="split"][data-lr-fixed-h] .lr-hero-fr { flex: 1 1 auto; display: flex; flex-direction: column; }
main > section.lr-shape[data-lr-layout="split"][data-lr-fixed-h] .lr-hero-pic { aspect-ratio: auto; flex: 1 1 auto; min-height: 240px; }
/* The words' side chosen with the hero (unified editor §5): Right puts the words on the right and the picture on the
   left; Centre centres the words in their column. */
main > section.lr-shape[data-lr-layout="split"][data-lr-side="right"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
main > section.lr-shape[data-lr-layout="split"][data-lr-side="right"] > .lr-words { grid-column: 2; }
main > section.lr-shape[data-lr-layout="split"][data-lr-side="right"] > .lr-hero-room { grid-column: 1; }
main > section.lr-shape[data-lr-layout="split"][data-lr-side="centre"] > .lr-words { text-align: center; }
main > section.lr-shape[data-lr-layout="split"][data-lr-side="centre"] > .lr-words :is([data-block="buttons"], [data-block="badges"]) { justify-content: center; }
/* stack: the photo at its ratio, the words under it. */
main > section.lr-shape[data-lr-layout="stack"] { display: block; padding-top: 24px; }
main > section.lr-shape[data-lr-layout="stack"] > .lr-hero-room { max-width: none; margin-bottom: calc(28px * var(--space)); }
main > section.lr-shape[data-lr-layout="stack"] .lr-hero-pic { aspect-ratio: var(--lr-ratio, 3 / 2); }
/* title and flat: the words only. */
main > section.lr-shape:is([data-lr-layout="title"], [data-lr-layout="flat"]) > .lr-hero-room { display: none; }
/* none ("Picture under the title", articles and interviews): the words, then the picture at 3:2, then the rest (Tomek,
   2026-10-19: it drew no picture at all). */
main > section.lr-shape[data-lr-layout="none"] { display: flex; flex-direction: column; }
main > section.lr-shape[data-lr-layout="none"] > .lr-words { order: 0; }
main > section.lr-shape[data-lr-layout="none"] > .lr-hero-room { order: 1; max-width: none; width: 100%; margin-top: calc(28px * var(--space)); }
main > section.lr-shape[data-lr-layout="none"] > :not(.lr-words):not(.lr-hero-room) { order: 2; }
main > section.lr-shape[data-lr-layout="none"] .lr-hero-pic { aspect-ratio: var(--lr-ratio, 1.5); }
/* A hero without a photo looks the same on every screen: the phone's title block takes the flat hero's ground (the
   brand's Anchor) and its light words, never the soft one; the pattern is drawn behind both (the design v2 block). */
main > section.lr-shape:is([data-lr-layout="title"], [data-lr-layout="flat"]) { background: var(--lr-brand, var(--dark)); color: var(--dark-ink); }
main > section.lr-shape:is([data-lr-layout="title"], [data-lr-layout="flat"]) h1,
main > section.lr-shape:is([data-lr-layout="title"], [data-lr-layout="flat"]) .lr-words p { color: var(--dark-ink); }
/* The photo style's edge also cuts the bottom of these (photo-style.css draws the cut when the edge has one); where a
   trust strip follows it shows through the cut in its own colour, as a photo band's does. */
/* The section after it tucks up behind the cut (the runtime marks it `lr-hero-cut-next` and sets --lr-cut-px): a
   transparent top border keeps its content where it was, its own background shows through the cut. The doubled class
   and `body` outrank the strip's `border: 0`. */
html body main > section.lr-hero-cut-next.lr-hero-cut-next { margin-top: calc(-1px - var(--lr-cut-px, 0px)); border-top: var(--lr-cut-px, 0px) solid transparent; }

/* ===== the trust strip under a photo band (Tomek, 2026-10-04) =====
   Keyed on the design's `badges` strip while that part exists; a design without it (Design v2 drops it) gets the
   coloured strip as the house default (agreed with the design-loop owner, 2026-10-04).
   The band's cut shows through to the strip's colour, so the photo runs into the strip; the strip tucks up under a
   cut that gives its chips room (photo-style.css sets --lr-strip-tuck, 0 for full width, framed and fade). */
main > section.lr-hero-strip { position: relative; margin-top: -1px; /* never a hairline at a part-pixel join */ }
html:not([data-badges]) main > section.lr-hero-strip { background: var(--strip); border: 0; }
html:not([data-badges]) main > section.lr-hero-strip li { color: var(--strip-ink); }
html[data-badges="strip"] main > section.lr-shape.lr-meets-strip, html:not([data-badges]) main > section.lr-shape.lr-meets-strip { background: var(--strip); }
html[data-badges="strip"] main > section.lr-hero-strip, html:not([data-badges]) main > section.lr-hero-strip { padding-top: calc(26px - 22px * var(--lr-strip-tuck, 0)); }
/* Mirrored: the strip's bottom repeats the photo's cut upside down and left to right, and the chips grow with the
   colour round them (a shallow edge such as the ticket stub keeps normal chips). */
html[data-badges="strip"][data-strip-bottom="mirror"] main > section.lr-hero-strip, html:not([data-badges])[data-strip-bottom="mirror"] main > section.lr-hero-strip {
  --lr-cut: calc(var(--lr-cut-share, 0) * var(--lr-band-px, 0px));
  margin-bottom: var(--lr-cut);
  padding-top: calc(4px + var(--lr-cut) * .12 + 22px * (1 - var(--lr-strip-tuck, 0)));
  padding-bottom: calc(26px + var(--lr-cut) * .08); }
html[data-badges="strip"][data-strip-bottom="mirror"] main > section.lr-hero-strip [data-block="badges"] li, html:not([data-badges])[data-strip-bottom="mirror"] main > section.lr-hero-strip [data-block="badges"] li {
  font-size: clamp(.95rem, calc(13px + var(--lr-cut) * .08), 1.3rem); }
html[data-badges="strip"][data-strip-bottom="mirror"] main > section.lr-hero-strip::after, html:not([data-badges])[data-strip-bottom="mirror"] main > section.lr-hero-strip::after {
  content: ''; position: absolute; left: 0; right: 0; top: calc(100% - 1px); pointer-events: none;
  height: calc(var(--lr-band-px, 0px) * min(1, var(--lr-cut-share, 0) * 1000));
  background: var(--strip, var(--primary)); transform: scale(-1, -1);
  -webkit-mask: var(--lr-edge-mask), linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: var(--lr-edge-mask), linear-gradient(#000 0 0); mask-composite: exclude; }
@media (max-width: 760px) {
  html[data-badges="strip"][data-strip-bottom="mirror"] main > section.lr-hero-strip [data-block="badges"] li,
  html:not([data-badges])[data-strip-bottom="mirror"] main > section.lr-hero-strip [data-block="badges"] li {
    font-size: clamp(.85rem, calc(11px + var(--lr-cut) * .08), 1.1rem); }
}


/* ============================== DESIGN v2 (spec 2026-10-04-design-tab-v2) =======================
   Colours come from the brand palette (design.css writes the tokens, light or dark); this block only places them.
   Brand (--primary) is for the things you click, links in the words (--link) and the current menu item; it never fills a band. Tones (--soft, --tint3, --accent-bg) are the bands. Counterpoint (--counter) carries decoration. Words take the
   colour that reads on what they sit on. The hero is the page type's: nothing here changes its layout. */

/* text roles, one size each (spec 2026-10-07 #17): a role is the same size on every page type, with or without a hero
   picture or panel, in every section variant. Only the screen width (and the Design choices) changes it.
     h1 (the hero heading)   --fs-h1-c / -t / -p x --fs-scale   (max-width may differ by layout; size never;
                             every hero shares one 2.75rem cap on a computer)
     main h2                 --fs-h2-c / -t / -p x --fs-scale   (the trust-strip label is the strip's own role)
     body                    --fs-b-c / -t / -p + --fs-shift    (body text in cards and lists is body: 1em)
     h3 / card title         --fs-h3: 1rem x --ratio            (FAQ questions, product, link and author names too)
     lead                    --fs-lead: 1.15em (phone 1.02em)   (hero, mid-page and closing call to action, the answer)
     small                   --fs-small: .88em                  (eyebrow, caption, meta, label, typicality, credentials)
     price band              items + their values body; total = H2; investment label + amount .75 x H2
   Chrome (header, footer, buttons, --btn-scale) and the trust-strip fit (--strip-size, --lr-claim-f) are their own roles. */
:root { --fs-h3: calc(1rem * var(--ratio)); --fs-lead: 1.15em; --fs-small: .88em; }
@media (max-width: 760px) { :root { --fs-lead: 1.02em; } }
/* every hero, picture or none, panel or none, shares one cap on a computer: a long title in the split hero's half
   column stays within four lines (56px wrapped a 70-character title to five); 2.75rem, Tomek 2026-10-23 */
@media (min-width: 822px) { main > section[data-section-type="hero"] h1 { font-size: min(calc(var(--fs-h1-c) * var(--fs-scale)), 2.75rem); } }
body { font-size: calc(var(--fs-b-c) + var(--fs-shift)); }
/* The price band's two sizes follow the H2 (never above it), per screen width. */
body { --lr-body-size: calc(var(--fs-b-c) + var(--fs-shift)); --lr-total-size: calc(var(--fs-h2-c) * var(--fs-scale)); --lr-invest-size: calc(var(--lr-total-size) * .75); }
h1 { font-size: calc(var(--fs-h1-c) * var(--fs-scale)); }
main h2 { font-size: calc(var(--fs-h2-c) * var(--fs-scale)); }
@media (max-width: 821.98px) {
  body { font-size: calc(var(--fs-b-t) + var(--fs-shift)); --lr-body-size: calc(var(--fs-b-t) + var(--fs-shift)); --lr-total-size: calc(var(--fs-h2-t) * var(--fs-scale)); }
  h1 { font-size: calc(var(--fs-h1-t) * var(--fs-scale)); }
  main h2 { font-size: calc(var(--fs-h2-t) * var(--fs-scale)); }
}
@media (max-width: 481.98px) {
  body { font-size: calc(var(--fs-b-p) + var(--fs-shift)); --lr-body-size: calc(var(--fs-b-p) + var(--fs-shift)); --lr-total-size: calc(var(--fs-h2-p) * var(--fs-scale)); }
  h1 { font-size: calc(var(--fs-h1-p) * var(--fs-scale)); }
  main h2 { font-size: calc(var(--fs-h2-p) * var(--fs-scale)); }
}

/* header: colour and layout */
/* A branch card's town on the "Our branches" page: a card title, the h3 role's size. */
main [data-block="branches"] [data-branch-body] h2 { font-size: var(--fs-h3); }
/* the quiet end note under an article (writer byline 4130): its heading is a small label, not a band heading */
main > section[data-section-type="author_box"] > h2 { font-size: var(--fs-small); }
html[data-header="surface"] .lr-header { background: var(--soft); border-color: transparent; }
html[data-header="anchor"] .lr-header { background: var(--header-alt); border-color: transparent; }
/* ---------- header over the picture ---------- */
/* THE HEADER OVER THE PICTURE (header = over, Tomek 2026-11-03). theme.js sets data-over-pic only on a page that opens
   with a full-width picture hero, and data-over-solid once that picture has scrolled up under the bar. Over the picture
   the bar is clear, with a fade of the dark colour (Anchor; dark on a dark site too) behind it so white words read on ANY photo (light, busy or the same colour as
   the menu); the picture runs up under it. Anywhere else, and once solid, it is the white page header. */
html[data-over-pic] main > section.lr-shape[data-section-type="hero"]:first-child { margin-top: calc(-1 * var(--lr-hh, 0px)); padding-top: var(--lr-hh, 0px); }
html[data-over-pic] .lr-header { transition: background-color .25s ease, box-shadow .25s ease; }
html[data-over-pic]:not([data-over-solid]):not(:has(.lr-phone-menu[open])) .lr-header { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-over-pic] .lr-header::before { content: ""; position: absolute; inset: 0 0 -48px 0; z-index: -1; pointer-events: none; transition: opacity .25s ease;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--dark) 62%, transparent), color-mix(in srgb, var(--dark) 34%, transparent) 55%, transparent); }
html[data-over-pic]:is([data-over-solid], :has(.lr-phone-menu[open])) .lr-header::before { opacity: 0; }
html[data-over-pic]:not([data-over-solid]):not(:has(.lr-phone-menu[open])) .lr-header :is([data-site-name], nav > a, .lr-nav-group > summary, .lr-phone-menu > summary, [data-back]) { color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
html[data-over-pic]:not([data-over-solid]):not(:has(.lr-phone-menu[open])) .lr-header nav > a:hover { color: #fff; text-decoration: underline; text-underline-offset: 6px; }
/* the logo is drawn for a light header: over the picture it sits on a small plate of the page colour */
html[data-over-pic]:not([data-over-solid]):not(:has(.lr-phone-menu[open])) .lr-header [data-site-logo] { background: var(--bg); border-radius: 6px; padding: 3px 6px; box-sizing: content-box; }
/* ---------- end header over the picture ---------- */
html[data-header="anchor"] .lr-header :is([data-site-name], nav a) { color: var(--header-alt-ink); }
html[data-header-layout="menu-centre"] .lr-header .in { display: grid; grid-template-columns: 1fr auto 1fr; }
html[data-header-layout="menu-centre"] .lr-header nav { margin: 0; justify-self: center; }
html[data-header-layout="menu-centre"] .lr-header [data-site-buttons] { justify-self: end; }
html[data-header-layout="logo-centre"] .lr-header .in { display: grid; grid-template-columns: 1fr auto 1fr; row-gap: 10px; }
html[data-header-layout="logo-centre"] .lr-header [data-site-name] { grid-column: 2; grid-row: 1; font-size: 1.45rem; }
html[data-header-layout="logo-centre"] .lr-header [data-site-buttons] { grid-column: 3; grid-row: 1; justify-self: end; }
html[data-header-layout="logo-centre"] .lr-header nav { grid-column: 1 / -1; grid-row: 2; margin: 0; justify-content: center; border-top: 1px solid var(--line); padding-top: 10px; }
/* header logo (client_site_header): a box held by its height and capped by its width, never stretched. S 28px high / 130 wide,
   M 40/180, L 56/240; a logo taller than wide gets 40/52/64 high; phones use the S box. The dark logo is chosen in the markup. */
.lr-header [data-site-name][data-logo-size] { display: inline-flex; align-items: center; gap: .6em; }
.lr-header [data-site-logo] { display: block; width: auto; object-fit: contain; height: 40px; max-width: 180px; }
.lr-header [data-logo-size="s"] [data-site-logo] { height: 28px; max-width: 130px; }
.lr-header [data-logo-size="m"] [data-site-logo] { height: 40px; max-width: 180px; }
.lr-header [data-logo-size="l"] [data-site-logo] { height: 56px; max-width: 240px; }
.lr-header [data-logo-tall][data-logo-size="s"] [data-site-logo] { height: 40px; }
.lr-header [data-logo-tall][data-logo-size="m"] [data-site-logo] { height: 52px; }
.lr-header [data-logo-tall][data-logo-size="l"] [data-site-logo] { height: 64px; }
.lr-header [data-name-hidden] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .lr-header [data-site-logo] { height: 28px !important; max-width: 130px !important; }
  .lr-header [data-logo-tall] [data-site-logo] { height: 40px !important; }
}
/* THE AUTOMATIC LOGO (migration 1352, spec 2026-10-05 part B): the box comes from the logo's shape (--logo-h, --logo-w set on the
   name element: height by aspect, width capped; phones use --logo-hp / --logo-wp). The fit is the analysis's verdict:
   one colour for a flat logo that would not read, its own box kept as a badge, a small white plate behind a multicolour logo. */
.lr-header [data-logo-look] [data-site-logo] { height: var(--logo-h); max-width: var(--logo-w); }
@media (max-width: 760px) { .lr-header [data-logo-look] [data-site-logo] { height: var(--logo-hp) !important; max-width: var(--logo-wp) !important; } }
.lr-header [data-logo-fit="mono_light"] [data-site-logo] { filter: brightness(0) invert(1); }
.lr-header [data-logo-fit="mono_dark"] [data-site-logo] { filter: brightness(0); }
/* One colour on a LIGHT header is the Anchor colour, not black: the file is a mask (the img carries mask-image inline) over a
   background of that colour, the picture itself moved out of the box. Black stays where masks are not drawn. */
@supports ((mask-size: contain) or (-webkit-mask-size: contain)) {
  .lr-header [data-logo-fit="mono_dark"] [data-site-logo] { filter: none; background: var(--header-alt, var(--heading)); object-fit: none; object-position: -99999px 0;
    -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
}
/* A phone shows the no-slogan version of the logo when the export carries one (both imgs are in the markup; this picks). */
.lr-header [data-logo-phone] { display: none !important; }
@media (max-width: 760px) {
  .lr-header [data-logo-phones] [data-logo-main] { display: none !important; }
  .lr-header [data-logo-phones] [data-logo-phone] { display: block !important; }
}
.lr-header [data-logo-fit="knockout"] [data-site-logo] { mix-blend-mode: multiply; }
.lr-header [data-logo-fit="badge"] [data-site-logo] { border-radius: var(--r-btn, 8px); }
html[data-header="anchor"] .lr-header [data-logo-fit="badge"] [data-site-logo] { box-shadow: 0 0 0 1px rgb(255 255 255 / .28); }
.lr-header [data-logo-fit="plate"] [data-site-logo] { box-sizing: content-box; background: #fff; padding: 5px 10px; border-radius: var(--r-btn, 8px); }

/* heroes with no photo: Anchor (the dark token), light words, and the pattern in Counterpoint */
main > section.lr-shape:is([data-lr-layout="title"], [data-lr-layout="flat"]), main > section[data-section-type="hero"]:not(.lr-shape):not(.has-pic) { background: var(--dark); color: var(--dark-ink); isolation: isolate; }
main > section[data-section-type="hero"]:is(.lr-shape:is([data-lr-layout="title"], [data-lr-layout="flat"]), :not(.lr-shape):not(.has-pic)) :is(h1, p, li) { color: var(--dark-ink); }
/* The colour sits on the plain rule, so a shape-library pattern's own ink (design.css, one step more specific) wins
   on every hero with no photo, as it does on bands and cards (Tomek, 2026-10-05). */
main > section[data-section-type="hero"] > .lr-pattern { display: none; background: var(--counter); }
main > section.lr-shape:is([data-lr-layout="title"], [data-lr-layout="flat"]) > .lr-pattern,
main > section[data-section-type="hero"]:not(.lr-shape):not(.has-pic) > .lr-pattern {
  display: block; position: absolute; inset: 0; z-index: -1; max-width: none; width: auto; height: auto; margin: 0; opacity: .32; pointer-events: none;
  -webkit-mask-repeat: repeat; mask-repeat: repeat; }
/* Each place's pattern size (spec 2026-10-08-custom-patterns): the design's --pat-scale-<place>, 1 when it sets none;
   every pattern's mask-size there is multiplied by it. */
.lr-pattern { --lr-pat-scale: var(--pat-scale-hero, 1); }
.lr-bpat { --lr-pat-scale: var(--pat-scale-box, 1); }
.lr-cpat { --lr-pat-scale: var(--pat-scale-card, 1); }
html[data-hero-pattern="lines"] main > section[data-section-type="hero"] > .lr-pattern, main > section.lr-band[data-bpat="lines"] > .lr-bpat, ul[data-block="cards"] > li[data-cpat="lines"] > .lr-cpat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M-7 7l14-14M0 28L28 0M21 35l14-14' stroke='black' stroke-width='5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M-7 7l14-14M0 28L28 0M21 35l14-14' stroke='black' stroke-width='5'/%3E%3C/svg%3E"); -webkit-mask-size: calc(28px * var(--lr-pat-scale, 1)) calc(28px * var(--lr-pat-scale, 1)); mask-size: calc(28px * var(--lr-pat-scale, 1)) calc(28px * var(--lr-pat-scale, 1)); }
html[data-hero-pattern="dots"] main > section[data-section-type="hero"] > .lr-pattern, main > section.lr-band[data-bpat="dots"] > .lr-bpat, ul[data-block="cards"] > li[data-cpat="dots"] > .lr-cpat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='3' cy='3' r='2.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='3' cy='3' r='2.2'/%3E%3C/svg%3E"); -webkit-mask-size: calc(22px * var(--lr-pat-scale, 1)) calc(22px * var(--lr-pat-scale, 1)); mask-size: calc(22px * var(--lr-pat-scale, 1)) calc(22px * var(--lr-pat-scale, 1)); }
html[data-hero-pattern="contours"] main > section[data-section-type="hero"] > .lr-pattern, main > section.lr-band[data-bpat="contours"] > .lr-bpat, ul[data-block="cards"] > li[data-cpat="contours"] > .lr-cpat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='black' stroke-width='1.6'%3E%3Cellipse cx='60' cy='64' rx='8' ry='9' transform='rotate(0 60 64)'/%3E%3Cellipse cx='60' cy='64' rx='18' ry='17' transform='rotate(17 60 64)'/%3E%3Cellipse cx='60' cy='64' rx='26' ry='27' transform='rotate(34 60 64)'/%3E%3Cellipse cx='60' cy='64' rx='36' ry='35' transform='rotate(51 60 64)'/%3E%3Cellipse cx='60' cy='64' rx='44' ry='45' transform='rotate(68 60 64)'/%3E%3Cellipse cx='60' cy='64' rx='54' ry='53' transform='rotate(85 60 64)'/%3E%3Cellipse cx='180' cy='176' rx='8' ry='10' transform='rotate(40 180 176)'/%3E%3Cellipse cx='180' cy='176' rx='19' ry='17' transform='rotate(57 180 176)'/%3E%3Cellipse cx='180' cy='176' rx='26' ry='28' transform='rotate(74 180 176)'/%3E%3Cellipse cx='180' cy='176' rx='37' ry='35' transform='rotate(91 180 176)'/%3E%3Cellipse cx='180' cy='176' rx='44' ry='46' transform='rotate(108 180 176)'/%3E%3Cellipse cx='180' cy='176' rx='55' ry='53' transform='rotate(125 180 176)'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='black' stroke-width='1.6'%3E%3Cellipse cx='60' cy='64' rx='8' ry='9' transform='rotate(0 60 64)'/%3E%3Cellipse cx='60' cy='64' rx='18' ry='17' transform='rotate(17 60 64)'/%3E%3Cellipse cx='60' cy='64' rx='26' ry='27' transform='rotate(34 60 64)'/%3E%3Cellipse cx='60' cy='64' rx='36' ry='35' transform='rotate(51 60 64)'/%3E%3Cellipse cx='60' cy='64' rx='44' ry='45' transform='rotate(68 60 64)'/%3E%3Cellipse cx='60' cy='64' rx='54' ry='53' transform='rotate(85 60 64)'/%3E%3Cellipse cx='180' cy='176' rx='8' ry='10' transform='rotate(40 180 176)'/%3E%3Cellipse cx='180' cy='176' rx='19' ry='17' transform='rotate(57 180 176)'/%3E%3Cellipse cx='180' cy='176' rx='26' ry='28' transform='rotate(74 180 176)'/%3E%3Cellipse cx='180' cy='176' rx='37' ry='35' transform='rotate(91 180 176)'/%3E%3Cellipse cx='180' cy='176' rx='44' ry='46' transform='rotate(108 180 176)'/%3E%3Cellipse cx='180' cy='176' rx='55' ry='53' transform='rotate(125 180 176)'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-size: calc(240px * var(--lr-pat-scale, 1)) calc(240px * var(--lr-pat-scale, 1)); mask-size: calc(240px * var(--lr-pat-scale, 1)) calc(240px * var(--lr-pat-scale, 1)); }
html[data-hero-pattern="grid"] main > section[data-section-type="hero"] > .lr-pattern, main > section.lr-band[data-bpat="grid"] > .lr-bpat, ul[data-block="cards"] > li[data-cpat="grid"] > .lr-cpat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0V40' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0V40' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E"); -webkit-mask-size: calc(40px * var(--lr-pat-scale, 1)) calc(40px * var(--lr-pat-scale, 1)); mask-size: calc(40px * var(--lr-pat-scale, 1)) calc(40px * var(--lr-pat-scale, 1)); }
html[data-hero-pattern="shapes"] main > section[data-section-type="hero"] > .lr-pattern, main > section.lr-band[data-bpat="shapes"] > .lr-bpat, ul[data-block="cards"] > li[data-cpat="shapes"] > .lr-cpat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Ccircle cx='30' cy='35' r='14'/%3E%3Crect x='110' y='20' width='26' height='26' rx='5' transform='rotate%2818 123 33%29'/%3E%3Cpath d='M60 130l18-30 18 30z'/%3E%3Ccircle cx='150' cy='140' r='7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Ccircle cx='30' cy='35' r='14'/%3E%3Crect x='110' y='20' width='26' height='26' rx='5' transform='rotate%2818 123 33%29'/%3E%3Cpath d='M60 130l18-30 18 30z'/%3E%3Ccircle cx='150' cy='140' r='7'/%3E%3C/svg%3E"); -webkit-mask-size: calc(180px * var(--lr-pat-scale, 1)) calc(180px * var(--lr-pat-scale, 1)); mask-size: calc(180px * var(--lr-pat-scale, 1)) calc(180px * var(--lr-pat-scale, 1)); }

/* bands: section backgrounds from the palette */
main > section.lr-band { background: var(--bg); --lr-ground: var(--bg); }
html[data-bands="two"] main > section.lr-band.lr-b1, html[data-bands="accent"] main > section.lr-band.lr-b1 { background: var(--soft); --lr-ground: var(--soft); }
html[data-bands="three"] main > section.lr-band.lr-c1 { background: var(--soft); --lr-ground: var(--soft); }
html[data-bands="three"] main > section.lr-band.lr-c2 { background: var(--tint3); --lr-ground: var(--tint3); }
html[data-bands="accent"] main > section.lr-band.lr-contrast { background: var(--accent-bg); --lr-ground: var(--accent-bg); }
/* words follow what they sit on */
main > section.lr-band > h2, main > section.lr-band > .lr-words > h2 { color: var(--heading); }
html[data-bands="accent"] main > section.lr-contrast > :is(h2, p, h3), html[data-bands="accent"] main > section.lr-contrast > .lr-words > :is(h2, p),
html[data-bands="accent"] main > section.lr-contrast a:not([data-button]) { color: var(--accent-ink); }
html[data-bands="accent"] main > section.lr-contrast [data-button="secondary"] { color: var(--accent-link); }
/* on the Strong band the main button turns white, its words in the band's own colour (the brand would sink into it) */
html[data-bands="accent"] main > section.lr-contrast [data-button]:not([data-button="secondary"]) { background: #fff; border-color: #fff; color: var(--accent-bg); }
main ul[data-block] > li :is(h3), main [data-block="testimonials"] figure :is(blockquote, p) { color: var(--ink); }
main ul[data-block] > li h3 { color: var(--heading); }

/* boxed: EVERY section in its own block (the white ones outlined, so they all line up) */
html[data-boxed="on"] main > section.lr-band {
  margin: calc(28px * var(--space)) max(16px, calc((100% - var(--container)) / 2 - var(--box-pad))); border-radius: var(--r-box);
  padding: calc(var(--box-pad) * 1.15) var(--box-pad); }
html[data-boxed="on"][data-bands="two"] main > section.lr-band:not(.lr-b1),
html[data-boxed="on"][data-bands="three"] main > section.lr-band:not(.lr-c1):not(.lr-c2),
html[data-boxed="on"][data-bands="accent"] main > section.lr-band:not(.lr-b1):not(.lr-contrast) { border: 1px solid var(--line); }
html[data-boxed="on"] main { isolation: isolate; }
/* a heading-only section and the sections it leads are one colour: the heading sits tight on what follows */
main > section.lr-band.lr-lead { padding-bottom: calc(var(--sec-y) * .25); }
main > section.lr-band.lr-after-lead:not(.lr-lead) { padding-top: calc(var(--sec-y) * .5); }
html[data-boxed="on"] main > section.lr-band.lr-lead { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: calc(var(--box-pad) * .3); }
html[data-boxed="on"] main > section.lr-band.lr-lead + section.lr-band.lr-after-lead { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: calc(var(--box-pad) * .5); }
html[data-boxed="on"] main > section.lr-band.lr-lead[data-bedge]::before, html[data-boxed="on"] main > section.lr-band.lr-lead + section.lr-band.lr-after-lead::before { display: none; }

/* overlays on bands: every band, white ones included (full width), or every box (boxed). The ready-made four draw on ::after; a library
   overlay is one span per layer (.lr-ov-N, placed by design.css). Words stay on top of both. The ready-made four are their
   picker tiles (photoStyle overlayLayers) read at BAND_FRAME_PX: a 420 x 280 photo (spec 2026-10-07 #13). */
main > section > :is(.lr-ov, .lr-bpat) { max-width: none; }
main > section.lr-band > .lr-ov { position: absolute; z-index: -1; pointer-events: none; }
main > section.lr-band[data-bov="circle"]::after { content: ''; position: absolute; z-index: -1; width: 190px; aspect-ratio: 1; border-radius: 50%; background: var(--counter); right: -34px; top: -34px; }
main > section.lr-band[data-bov="block"]::after { content: ''; position: absolute; z-index: -1; width: 109.2px; height: 106.4px; left: -25.2px; bottom: -22.4px; border-radius: var(--r-box); background: var(--counter); }
main > section.lr-band[data-bov="dots"]::after { content: ''; position: absolute; z-index: -1; width: 189px; height: 154px; left: -33.6px; top: -28px; opacity: 0.55; background: radial-gradient(var(--counter) 2.5px, transparent 3px) 0 0 / 22px 22px; }
main > section.lr-band[data-bov="outline"]::after { content: ''; position: absolute; z-index: -1; inset: 28px -21px -22.4px 25.2px; border: 4px solid var(--counter); border-radius: var(--r-box); }
/* where it sits (boxSits): inside = clipped to the band, over = across its edge and in front of its neighbour, behind =
   under it, showing only past it (boxed only: a full-width band already reaches the page's sides, so it reads as inside).
   Absent: a box keeps the overlay behind it, a full-width band clips it. */
html[data-boxed="on"][data-box-sits="inside"] main > section.lr-band[data-bov] { isolation: isolate; overflow: clip; }
html:not([data-boxed="on"]) main > section.lr-band[data-bov] { isolation: isolate; clip-path: inset(0); }
html:not([data-boxed="on"])[data-box-sits="over"] main > section.lr-band[data-bov] { isolation: auto; clip-path: none; }
/* Over the edge (Tomek, 2026-10-07): the overlay is always on top of the edge shape and never clipped by it, its own edge
   and the next band's alike. The overlaid band is not its own layer, so in main's layer the overlay (3) is above every
   edge strip (1) and every later band; the words of every band (4) stay above any overlay crossing into them. Zero
   specificity, so a child that is already placed or layered keeps its own rule. Sideways overflow: main clips it. */
html[data-box-sits="over"] main > section.lr-band[data-bov]::after, html[data-box-sits="over"] main > section.lr-band[data-bov] > .lr-ov { z-index: 3; }
:where(html[data-box-sits="over"] main > section.lr-band) > :where(:not(.lr-ov, .lr-bpat)) { position: relative; z-index: 4; }
/* The trust strip's chips too: the first band's overlay may reach up into it (the hero's words: `.lr-words` above). */
:where(html[data-box-sits="over"] main > section[data-section-type="trust_bar"]) > :where(*) { position: relative; z-index: 4; }
html[data-edge]:not([data-edge="straight"]):not([data-boxed="on"]):not([data-box-sits="over"]) main > section.lr-band:not(.lr-first-band):not([data-nojoin])[data-bov] { clip-path: inset(-44px 0 0 0); }

/* a pattern behind a band's words, in Counterpoint at one faintness on every band, white or coloured; the words (every
   child) sit on top of it */
main > section.lr-band > .lr-bpat { position: absolute; inset: 0; z-index: 0; background: var(--counter); opacity: .16; pointer-events: none; border-radius: inherit;
  -webkit-mask-repeat: repeat; mask-repeat: repeat; }
main > section.lr-band[data-bpat] > :not(.lr-bpat):not(.lr-ov) { position: relative; }

/* the edge: between full-width bands, the lower band's colour reaches up in the chosen shape; when boxed, the page's colour reaches up
   into the bottom of the box in the same shape (`edgeOften` marks the joins that keep it with data-nojoin, the boxes with data-bedge) */
html[data-edge]:not([data-edge="straight"]):not([data-boxed="on"]) main > section.lr-band:not(.lr-first-band)::before {
  content: ''; position: absolute; left: 0; right: 0; top: -38px; height: 40px; background: inherit; pointer-events: none; z-index: 1; }
html[data-edge]:not([data-edge="straight"]):not([data-boxed="on"]) main > section.lr-band[data-nojoin]:not(.lr-first-band)::before { display: none; }
html[data-boxed="on"][data-edge]:not([data-edge="straight"]) main > section.lr-band[data-bedge]::before {
  content: ''; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 41px; background: var(--bg); pointer-events: none; z-index: 1;
  border-radius: 0 0 var(--r-box) var(--r-box); }
html[data-boxed="on"][data-edge]:not([data-edge="straight"]) main > section.lr-band[data-bedge] { padding-bottom: calc(var(--box-pad) * 1.15 + 40px); }
html[data-edge="diagonal"]:not([data-boxed="on"]) main > section.lr-band:not(.lr-first-band)::before, html[data-edge="diagonal"][data-boxed="on"] main > section.lr-band[data-bedge]::before, ul[data-block="cards"] > li[data-cedge="diagonal"]::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10L100 0V10z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10L100 0V10z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
html[data-edge="curve"]:not([data-boxed="on"]) main > section.lr-band:not(.lr-first-band)::before, html[data-edge="curve"][data-boxed="on"] main > section.lr-band[data-bedge]::before, ul[data-block="cards"] > li[data-cedge="curve"]::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10Q50 -8 100 10z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10Q50 -8 100 10z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
html[data-edge="arch"]:not([data-boxed="on"]) main > section.lr-band:not(.lr-first-band)::before, html[data-edge="arch"][data-boxed="on"] main > section.lr-band[data-bedge]::before, ul[data-block="cards"] > li[data-cedge="arch"]::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q50 18 100 0V10H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q50 18 100 0V10H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
html[data-edge="wave"]:not([data-boxed="on"]) main > section.lr-band:not(.lr-first-band)::before, html[data-edge="wave"][data-boxed="on"] main > section.lr-band[data-bedge]::before, ul[data-block="cards"] > li[data-cedge="wave"]::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 6C12 0 25 0 37 5S62 11 75 5 92 0 100 3V10H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 6C12 0 25 0 37 5S62 11 75 5 92 0 100 3V10H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
html[data-edge="zigzag"]:not([data-boxed="on"]) main > section.lr-band:not(.lr-first-band)::before, html[data-edge="zigzag"][data-boxed="on"] main > section.lr-band[data-bedge]::before, ul[data-block="cards"] > li[data-cedge="zigzag"]::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10L5 2L10 10L15 2L20 10L25 2L30 10L35 2L40 10L45 2L50 10L55 2L60 10L65 2L70 10L75 2L80 10L85 2L90 10L95 2L100 10z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10L5 2L10 10L15 2L20 10L25 2L30 10L35 2L40 10L45 2L50 10L55 2L60 10L65 2L70 10L75 2L80 10L85 2L90 10L95 2L100 10z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
html[data-edge="steps"]:not([data-boxed="on"]) main > section.lr-band:not(.lr-first-band)::before, html[data-edge="steps"][data-boxed="on"] main > section.lr-band[data-bedge]::before, ul[data-block="cards"] > li[data-cedge="steps"]::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10V7H20V4H40V1H60V4H80V7H100V10z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10V7H20V4H40V1H60V4H80V7H100V10z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
html[data-edge="scallop"]:not([data-boxed="on"]) main > section.lr-band:not(.lr-first-band)::before, html[data-edge="scallop"][data-boxed="on"] main > section.lr-band[data-bedge]::before, ul[data-block="cards"] > li[data-cedge="scallop"]::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10A5 5 0 0 1 10 10A5 5 0 0 1 20 10A5 5 0 0 1 30 10A5 5 0 0 1 40 10A5 5 0 0 1 50 10A5 5 0 0 1 60 10A5 5 0 0 1 70 10A5 5 0 0 1 80 10A5 5 0 0 1 90 10A5 5 0 0 1 100 10z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10A5 5 0 0 1 10 10A5 5 0 0 1 20 10A5 5 0 0 1 30 10A5 5 0 0 1 40 10A5 5 0 0 1 50 10A5 5 0 0 1 60 10A5 5 0 0 1 70 10A5 5 0 0 1 80 10A5 5 0 0 1 90 10A5 5 0 0 1 100 10z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* buttons: size, main (Brand), second */
/* Standard is at least body text (Tomek, 2026-10-07): smaller sizes may go below it. */
main [data-button] { font-size: calc(var(--lr-body-size, 1rem) * var(--btn-scale)); padding: calc(.75em * var(--btn-scale)) calc(1.3em * var(--btn-scale)); border-radius: var(--r-btn); }
.lr-header [data-button] { font-size: calc(.9rem * min(var(--btn-scale), 1.1)); }
html[data-main-button="outline"] main [data-button]:not([data-button="secondary"]) { background: transparent; color: var(--heading); border: 2px solid currentColor; }
/* Hero buttons wear light words ONLY where the words sit on a dark ground (band, title, flat, or an un-shaped dark/banner hero);
   on a split or stack hero the words sit on the page's light ground and the buttons keep their ordinary colours. */
html[data-main-button="outline"] main > section[data-section-type="hero"].lr-shape:is([data-lr-layout="band"], [data-lr-layout="title"], [data-lr-layout="flat"]) [data-button]:not([data-button="secondary"]),
html[data-main-button="outline"] main > section[data-section-type="hero"]:not(.lr-shape):not(.has-pic) [data-button]:not([data-button="secondary"]),
html[data-hero-ground="dark"][data-main-button="outline"]  main > section[data-section-type="hero"]:not(.lr-shape) [data-button]:not([data-button="secondary"]) { color: var(--dark-ink); }
main [data-button="secondary"] { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: none; }
html[data-second-button="outline"] main [data-button="secondary"] { background: transparent; border: 2px solid currentColor; color: var(--accent); }
html[data-second-button="soft"] main [data-button="secondary"] { background: color-mix(in srgb, var(--accent) 16%, var(--bg)); border: 2px solid transparent; color: var(--accent); }
html[data-second-button="link"] main [data-button="secondary"] { background: none; border: 0; color: var(--accent); text-decoration: underline; padding-inline: .3em; }
main > section[data-section-type="hero"].lr-shape:is([data-lr-layout="band"], [data-lr-layout="title"], [data-lr-layout="flat"]) [data-button="secondary"],
main > section[data-section-type="hero"]:not(.lr-shape):not(.has-pic) [data-button="secondary"],
html[data-hero-ground="dark"] main > section[data-section-type="hero"]:not(.lr-shape) [data-button="secondary"] { color: var(--dark-ink); }
html[data-second-button="soft"] main > section[data-section-type="hero"].lr-shape:is([data-lr-layout="band"], [data-lr-layout="title"], [data-lr-layout="flat"]) [data-button="secondary"],
html[data-second-button="soft"] main > section[data-section-type="hero"]:not(.lr-shape):not(.has-pic) [data-button="secondary"],
html[data-hero-ground="dark"][data-second-button="soft"]  main > section[data-section-type="hero"]:not(.lr-shape) [data-button="secondary"] { background: rgb(255 255 255 / .14); }

/* cards: line, shadow or tint; corners; an overlay behind the card */
html[data-cards="line"] :is(ul[data-block="cards"] > li, [data-block="testimonials"] figure) { background: var(--card-fill); border: 1.5px solid var(--line); box-shadow: none; }
html[data-cards="shadow"] :is(ul[data-block="cards"] > li, [data-block="testimonials"] figure) { background: var(--card-fill); border: 0; box-shadow: 0 14px 34px -10px rgb(0 0 0 / .3); }
html[data-cards="tint"] :is(ul[data-block="cards"] > li, [data-block="testimonials"] figure) { background: var(--card-tint); border: 0; box-shadow: none; }
/* Plain (unified editor slice 4): no line, shadow or fill — the item's words on the band's own ground. */
html[data-cards="plain"] :is(ul[data-block="cards"] > li, [data-block="testimonials"] figure) { background: transparent; border: 0; box-shadow: none; }
/* ITEMS ACROSS (unified editor slice 4): how many cards and steps sit across on a computer; a tablet shows at most two
   cards and a phone one. Absent (or the retired All) = the balanced count, at most three. The steps take the count
   through the runtime's --steps; a short last row of cards stays centred at card width (data-lr-tail). */
html[data-cols="1"] main ul[data-block="cards"] { grid-template-columns: minmax(0, 1fr); }
html[data-cols="2"] main ul[data-block="cards"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-cols="3"] main ul[data-block="cards"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 900px) {
  html[data-cols] main ul[data-block="cards"][data-lr-tail] { grid-template-columns: repeat(var(--cols2), minmax(0, 1fr)); grid-auto-flow: row; }
}
@media (max-width: 821.98px) {
  html:is([data-cols="2"], [data-cols="3"], [data-cols="all"]) main ul[data-block="cards"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
}
@media (max-width: 481.98px) {
  html[data-cols] main ul[data-block="cards"] { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; }
}
:is(ul[data-block="cards"] > li, [data-block="testimonials"] figure) { border-radius: var(--r-card); }
ul[data-block="cards"]:has(> li[data-ov]), ul[data-block="testimonials"]:has(> li[data-ov]) { isolation: isolate; }
ul[data-block="cards"] > li[data-ov], ul[data-block="testimonials"] > li[data-ov] { position: relative; overflow: visible; }
ul[data-block="cards"] > li[data-ov="circle"]::before, ul[data-block="testimonials"] > li[data-ov="circle"]::before { content: ''; position: absolute; z-index: -1; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--counter); right: -14px; top: -14px; }
ul[data-block="cards"] > li[data-ov="block"]::before, ul[data-block="testimonials"] > li[data-ov="block"]::before { content: ''; position: absolute; z-index: -1; inset: 14px -12px -12px 14px; border-radius: var(--r-card); background: var(--counter); opacity: .55; }
ul[data-block="cards"] > li[data-ov="dots"]::before, ul[data-block="testimonials"] > li[data-ov="dots"]::before { content: ''; position: absolute; z-index: -1; width: 46%; height: 42%; left: -16px; bottom: -16px; background: radial-gradient(var(--counter) 2.2px, transparent 2.6px) 0 0 / 12px 12px; }
ul[data-block="cards"] > li[data-ov="outline"]::before, ul[data-block="testimonials"] > li[data-ov="outline"]::before { content: ''; position: absolute; z-index: -1; inset: -9px 9px 9px -9px; border-radius: calc(var(--r-card) + 6px); border: 2px solid var(--counter); }
/* the wide card of a single review keeps the corner shapes at a card's size, not a third of the row */
ul[data-block="testimonials"].lr-one-quote > li[data-ov="circle"]::before { width: min(34%, 150px); }
ul[data-block="testimonials"].lr-one-quote > li[data-ov="dots"]::before { width: min(46%, 220px); height: min(42%, 140px); }
/* a library overlay is one span per layer (.lr-ov-N, placed by design.css), behind the card like the ready-made four */
ul[data-block="cards"] > li > .lr-ov, ul[data-block="testimonials"] > li > .lr-ov { position: absolute; z-index: -1; pointer-events: none; max-width: none; }
/* where it sits (cardSits): over = across the card's edge, above its fill and under its words; inside = clipped to the card;
   absent or behind = under the card, only what passes it shows */
html[data-card-sits="over"] ul[data-block="cards"] > li[data-ov] { isolation: isolate; }
html[data-card-sits="inside"] ul[data-block="cards"] > li[data-ov] { isolation: isolate; overflow: clip; }
/* a testimonial card is its <figure>: the overlay stays behind it whichever way it sits, clipped to it when inside */
html[data-card-sits="inside"] ul[data-block="testimonials"] > li[data-ov] { isolation: isolate; overflow: clip; border-radius: var(--r-card); }
/* a pattern behind a card's words, in Counterpoint; the words (every child) sit on top of it */
ul[data-block="cards"] > li[data-cpat], ul[data-block="cards"] > li[data-cedge] { position: relative; }
ul[data-block="cards"] > li > .lr-cpat { position: absolute; inset: 0; z-index: 0; background: var(--counter); opacity: .14; pointer-events: none; border-radius: inherit;
  -webkit-mask-repeat: repeat; mask-repeat: repeat; max-width: none; }
ul[data-block="cards"] > li[data-cpat] > :not(.lr-cpat):not(.lr-ov) { position: relative; }
/* the edge cuts the card's BOTTOM: a strip in the colour behind the card (--lr-ground, set by the band) reaching up in the chosen
   shape, drawn like a band's join, never a clip-path polygon. The card's border and shadow do not follow the cut. */
ul[data-block="cards"] > li[data-cedge] { padding-bottom: 50px; }
ul[data-block="cards"] > li[data-cedge]::after { content: ''; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 31px; background: var(--lr-ground, var(--bg)); pointer-events: none; z-index: 2;
  border-radius: 0 0 var(--r-card) var(--r-card); }

/* the trust strip: a palette colour (never Brand), chips as words in the colour that reads on it */
html[data-strip] main > section[data-section-type="trust_bar"], html[data-strip] main > section.lr-hero-strip { background: var(--strip); color: var(--strip-ink); border: 0; }
html[data-strip] main > section[data-section-type="trust_bar"] [data-block="badges"] { gap: 14px 40px; }
html[data-strip] main > section[data-section-type="trust_bar"] [data-block="badges"] li { background: transparent; border: 0; box-shadow: none; padding: 0; color: var(--strip-ink); font-weight: 700; font-size: var(--strip-size); gap: .5em; }
/* The same settings reach the chips INSIDE a hero (Tomek, 2026-10-07, issue 5): the strip colour is the chip's pill, the colour
   that reads on it its words, the strip's text size its size. A strip section keeps its own rule above. */
html[data-strip] main > section[data-section-type="hero"]:not(.lr-hero-strip) [data-block="badges"] li,
html[data-strip] main > section[data-section-type="hero"]:not(.lr-hero-strip) [data-block="badges"] li.lr-b { background: var(--strip) !important; color: var(--strip-ink) !important; border: 0 !important; box-shadow: none; padding: .45em .9em !important; border-radius: var(--r-btn, 999px) !important; font-size: var(--strip-size) !important; font-weight: 700; }
/* Icons inside a chip follow the chip's own ground (Tomek, 2026-10-07, issue 19): the runtime reads --strip-ink and marks <html
   data-chips-ink="light|dark">. Words light = a dark chip, so the drawing is drawn light too; words dark = a light chip, so it
   keeps its own colours. A phone's tick is drawn in the words' colour, never the Brand disc that vanished on a Deep chip. */
html[data-strip][data-chips-ink="light"] main > section [data-block="badges"]:not([data-icon-shape]) li img { filter: brightness(0) invert(1) !important; }
html[data-strip][data-chips-ink="dark"] main > section :is([data-block="badges"] li, [data-block="badges"] li.lr-b) img { filter: none !important; }
html[data-strip] [data-block="badges"] li:not(:has(img))::before { background: var(--strip-ink) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 100% no-repeat; }
html[data-strip] main > section[data-section-type="trust_bar"] [data-block="badges"] li :is(i, img) { width: 1.45em; height: 1.45em; font-size: 1.45em; color: inherit; }

/* THE TRUST STRIP WITH ICONS (Tomek, 2026-10-05): each claim its own column, its icon (30px, 46px on a shape) above
   its words, a faint divider in the words' colour between claims. Tablets keep them on one row (five or more go to
   rows of three); phones keep the left-aligned list, icon first. Under a hero edge theme.js grows the claims into the
   cut's room (--lr-claim-f) and lifts each into its own (--lr-grow, --lr-lift); the strip gains at most
   --lr-claims-extra. A list with no icons keeps the look above. The :not(.lr-x) pairs outrank the strip and mirror rules. */
html:not(.lr-x):not(.lr-y) main > section[data-section-type="trust_bar"]:not(.lr-x) [data-block="badges"]:has(> li > img) {
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-end; gap: 0; margin: 0 auto;
  padding-top: var(--lr-claims-extra, 0px); }
html:not(.lr-x):not(.lr-y) main > section[data-section-type="trust_bar"]:not(.lr-x) [data-block="badges"]:has(> li > img) > li {
  flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center;
  gap: .4em; padding: 0 26px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font-size: calc(var(--strip-size, .95rem) * var(--lr-claim-f, 1)); line-height: 1.25;
  margin-top: calc(-1 * var(--lr-grow, 0px)); transform: translateY(calc(-1 * var(--lr-lift, 0px))); }
html:not(.lr-x):not(.lr-y) main > section[data-section-type="trust_bar"]:not(.lr-x) [data-block="badges"]:has(> li > img) > li + li {
  border-left: 1.5px solid color-mix(in srgb, currentColor 26%, transparent); }
html:not(.lr-x):not(.lr-y) main > section[data-section-type="trust_bar"]:not(.lr-x) [data-block="badges"]:has(> li > img) > li > img {
  width: calc(30px * var(--lr-claim-f, 1)); height: calc(30px * var(--lr-claim-f, 1)); font-size: inherit; flex: none; }
html:not(.lr-x):not(.lr-y) main > section[data-section-type="trust_bar"]:not(.lr-x) [data-block="badges"][data-icon-shape]:has(> li > img) > li > img {
  width: calc(46px * var(--lr-claim-f, 1)); height: calc(46px * var(--lr-claim-f, 1)); }
html:not(.lr-x):not(.lr-y) main > section[data-section-type="trust_bar"]:not(.lr-x) [data-block="badges"]:has(> li > img) > li > span { white-space: nowrap; }
@media (max-width: 1024px) {
  html:not(.lr-x):not(.lr-y) main > section[data-section-type="trust_bar"]:not(.lr-x) [data-block="badges"]:has(> li > img) > li { padding: 0 10px; }
  html:not(.lr-x):not(.lr-y) main > section[data-section-type="trust_bar"]:not(.lr-x) [data-block="badges"]:has(> li > img) > li > span { white-space: normal; }
  html:not(.lr-x):not(.lr-y) main > section[data-section-type="trust_bar"]:not(.lr-x) [data-block="badges"]:has(> li:nth-child(5) > img) {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  html:not(.lr-x):not(.lr-y) main > section[data-section-type="trust_bar"]:not(.lr-x) [data-block="badges"]:has(> li:nth-child(5) > img) > li:nth-child(3n + 1) { border-left: 0; }
}
@media (max-width: 760px) {
  html:not(.lr-x):not(.lr-y) main > section[data-section-type="trust_bar"]:not(.lr-x) [data-block="badges"]:has(> li > img) {
    display: flex; flex-direction: column; align-items: stretch; padding-top: 0; margin-top: calc(-1 * var(--lr-claims-up, 0px)); }
  html:not(.lr-x):not(.lr-y) main > section[data-section-type="trust_bar"]:not(.lr-x) [data-block="badges"]:has(> li > img) > li {
    flex: none; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 11px;
    padding: calc(7px * var(--lr-claim-f, 1)) 0; margin-top: 0; transform: none; border-left: 0; }
  html:not(.lr-x):not(.lr-y) main > section[data-section-type="trust_bar"]:not(.lr-x) [data-block="badges"]:has(> li > img) > li + li {
    border-left: 0; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
  html:not(.lr-x):not(.lr-y) main > section[data-section-type="trust_bar"]:not(.lr-x) [data-block="badges"]:has(> li > img) > li > img {
    width: calc(24px * var(--lr-claim-f, 1)); height: calc(24px * var(--lr-claim-f, 1)); }
  html:not(.lr-x):not(.lr-y) main > section[data-section-type="trust_bar"]:not(.lr-x) [data-block="badges"][data-icon-shape]:has(> li > img) > li > img {
    width: calc(36px * var(--lr-claim-f, 1)); height: calc(36px * var(--lr-claim-f, 1)); }
}

/* photos of people: one shape for every team and author photo */
:is(ul[data-block="team"], [data-block="author"], [data-block="byline"]) img { object-fit: cover; }
html[data-team-photo="round"] :is(ul[data-block="team"], [data-block="author"], [data-block="byline"]) img { aspect-ratio: 1; border-radius: 50%; }
html[data-team-photo="soft"] :is(ul[data-block="team"], [data-block="author"], [data-block="byline"]) img { aspect-ratio: 1; border-radius: 18%; }
html[data-team-photo="square"] :is(ul[data-block="team"], [data-block="author"], [data-block="byline"]) img { aspect-ratio: 1; border-radius: 0; }
html[data-team-photo="portrait"] :is(ul[data-block="team"], [data-block="author"], [data-block="byline"]) img { aspect-ratio: 4 / 5; border-radius: var(--r-card); }
/* team and author photos: theme.js wraps each photo in span.lr-team-pic (the ring, the shape behind and the overlay hang off it) */
.lr-team-pic { position: relative; display: block; width: fit-content; max-width: 100%; margin-bottom: 12px; isolation: isolate; }
ul[data-block="team"] .lr-team-pic { width: 100%; }
[data-block="byline"] .lr-team-pic { display: inline-block; vertical-align: middle; margin-bottom: 0; }
:is(ul[data-block="team"], [data-block="author"], [data-block="byline"]) .lr-team-pic img { display: block; margin-bottom: 0; }
html[data-team-photo="round"] .lr-team-pic, html[data-team-photo="round"] .lr-team-ov { border-radius: 50%; }
html[data-team-photo="soft"] .lr-team-pic, html[data-team-photo="soft"] .lr-team-ov { border-radius: 18%; }
html[data-team-photo="square"] .lr-team-pic, html[data-team-photo="square"] .lr-team-ov { border-radius: 0; }
html[data-team-photo="portrait"] .lr-team-pic, html[data-team-photo="portrait"] .lr-team-ov { border-radius: var(--r-card); }
/* No ring and no shape behind (Tomek, 2026-10-05): overlays do that now. A design that still names teamRing,
   teamRingColour or teamShape keeps them as stored values, but the site draws neither. */
/* the overlay: one box over the photo (the runtime injects it), the ready-made four drawn on its ::before, a library
   overlay as one span per layer. Absent or Behind: under the photo; Over the edge: across it; Inside: clipped to the photo */
.lr-team-ov { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
html[data-team-sits="over"] .lr-team-ov { z-index: 2; }
html[data-team-sits="inside"] .lr-team-ov { z-index: 2; overflow: clip; }
.lr-team-ov > .lr-ov { position: absolute; }
.lr-team-ov[data-tov="circle"]::before, .lr-team-ov[data-tov="block"]::before, .lr-team-ov[data-tov="dots"]::before, .lr-team-ov[data-tov="outline"]::before {
  content: ''; position: absolute; width: 46%; height: 46%; right: -14%; top: -14%; background: var(--counter); border-radius: 50%; opacity: .55; }
.lr-team-ov[data-tov="block"]::before { border-radius: 6px; transform: rotate(14deg); }
.lr-team-ov[data-tov="outline"]::before { background: none; border: 3px solid var(--counter); opacity: 1; }
.lr-team-ov[data-tov="dots"]::before { border-radius: 0; background: radial-gradient(var(--counter) 2px, transparent 2.4px) 0 0 / 9px 9px; opacity: 1; }

/* the browser's own controls and scrollbars follow the site's colours */
html[data-scheme="light"] { color-scheme: light; }
html[data-scheme="dark"] { color-scheme: dark; }
html[data-scheme="both"] { color-scheme: light dark; }

/* ===== the composed footer (spec 2026-10-04-site-footer; Tomek approved the mock-up 2026-10-04) =====
   The bundle's footer is its parts in order; theme.js groups them into rows (.lr-f-row) for the screen and the
   design's `footerMap`. Two or three parts spread across the whole width; four or more share a weighted grid. */
.lr-footer [data-footer] p { margin: 0; }
.lr-footer [data-footer] ul { list-style: none; margin: 0; padding: 0; }
.lr-footer [data-footer-name] { font-family: var(--font-h); font-weight: var(--h-weight); color: var(--dark-ink); font-size: 1.3rem; margin-bottom: .8em; }
.lr-footer [data-footer-heading] { color: var(--dark-ink); font-weight: 700; font-size: .85rem; margin-bottom: .9em; }
.lr-footer [data-footer-links] li { margin-bottom: .55em; }
.lr-footer [data-footer-links] a, .lr-footer [data-footer] address { color: var(--dark-muted); font-style: normal; }
.lr-footer [data-footer-links] a:hover { color: var(--dark-ink); }
.lr-footer [data-see-all], .lr-footer [data-link="directions"] { display: inline-block; margin-top: .3em; color: var(--dark-ink); font-weight: 700; }
.lr-footer [data-footer] [data-contact-points] { margin-bottom: 1em; }
.lr-footer [data-hours] li, .lr-footer [data-serves] { color: var(--dark-muted); font-size: .9rem; }
.lr-footer [data-hours] { margin-top: 1em; }
.lr-footer [data-serves] { margin-top: 1em; }
/* The areas are a plain list, like the menus beside them (Tomek, 2026-10-05: pills read weak). */
.lr-footer [data-areas] { margin-bottom: .2em; }
.lr-footer [data-areas] li { margin-bottom: .55em; color: var(--dark-muted); }
/* Social profiles: named buttons up to three; four or more, one row of round icon buttons (named for screen readers). */
.lr-footer [data-socials] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .2em; }
.lr-footer [data-socials] a { display: inline-flex; align-items: center; gap: .5em; padding: .45em .85em .45em .6em; border: 1px solid color-mix(in srgb, var(--dark-ink) 22%, transparent); border-radius: 999px; color: var(--dark-ink); font-size: .9rem; }
.lr-footer [data-socials] img { width: 1.15em; height: 1.15em; }
.lr-footer [data-socials]:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]) a { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
.lr-footer [data-socials]:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]) a:has(img) span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The map. */
.lr-footer [data-map] { margin-top: .8em; border-radius: var(--r-img); overflow: hidden; border: 1px solid color-mix(in srgb, var(--dark-ink) 14%, transparent); }
.lr-footer [data-map] iframe { display: block; width: 100%; height: 200px; border: 0; }
/* Rows. */
.lr-footer [data-footer] .lr-f-row { display: grid; gap: 32px; padding-bottom: 30px; }
.lr-footer [data-footer] .lr-f-row + .lr-f-row { padding-top: 30px; border-top: 1px solid color-mix(in srgb, var(--dark-ink) 14%, transparent); }
.lr-footer [data-footer] .lr-f-row[data-few] { display: flex; justify-content: space-between; gap: 48px; }
.lr-footer [data-footer] .lr-f-row[data-few] > * { min-width: 0; }
.lr-footer [data-footer] .lr-f-columns:not([data-few]) { grid-template-columns: 1.25fr repeat(var(--m), 1fr); }
.lr-footer [data-footer] .lr-f-even:not([data-few]) { grid-template-columns: repeat(var(--n), 1fr); }
.lr-footer [data-footer] .lr-f-even.lr-f-lead[data-few] > :first-child { flex: 1.25 1 0; }
.lr-footer [data-footer] .lr-f-pair { display: grid; grid-template-columns: 1fr 1.25fr; }
.lr-footer [data-footer] .lr-f-two { grid-template-columns: 1fr 1fr; }
.lr-footer [data-footer] .lr-f-solo { display: block; }
.lr-footer [data-footer] .lr-f-stack > * + * { margin-top: 26px; }
/* Map layouts (the design's `footerMap`, computer only; tablet and phone have their own). */
html[data-footer-map="columns"] .lr-footer [data-footer][data-lr-layout="columns"] [data-map] iframe { height: 200px; }
html[data-footer-map="beside"] .lr-footer [data-footer] .lr-f-wide-where { grid-template-columns: 1fr 2fr; }
html[data-footer-map="beside"] .lr-footer [data-footer] .lr-f-wide-where > [data-footer-part="where"] { display: grid; grid-template-columns: 1fr 1.6fr; column-gap: 24px; align-content: start; }
html[data-footer-map="beside"] .lr-footer [data-footer] .lr-f-wide-where > [data-footer-part="where"] > :not([data-map]) { grid-column: 1; }
html[data-footer-map="beside"] .lr-footer [data-footer] .lr-f-wide-where [data-map] { grid-column: 2; grid-row: 1 / span 9; margin-top: 0; }
html[data-footer-map="beside"] .lr-footer [data-footer] .lr-f-wide-where [data-map] iframe { height: 220px; }
.lr-footer [data-footer] .lr-f-columns.lr-f-stacked { grid-template-columns: 1.15fr 1.6fr repeat(var(--s), 1fr); }
.lr-footer [data-footer] .lr-f-stacked [data-map] iframe { height: 230px; }
html[data-footer-map="strip"] .lr-footer [data-footer] .lr-f-strip { position: relative; display: block; margin: -56px calc(-1 * max(24px, (100vw - var(--container)) / 2)) 32px; padding: 0; border: 0; }
html[data-footer-map="strip"] .lr-footer [data-footer] .lr-f-strip [data-map] { margin: 0; border: 0; border-radius: 0; }
html[data-footer-map="strip"] .lr-footer [data-footer] .lr-f-strip [data-map] iframe { height: 240px; }
html[data-footer-map="strip"] .lr-footer [data-footer] .lr-f-strip > [data-footer-part="where"] > :not([data-map]) { position: relative; z-index: 1; }
html[data-footer-map="strip"] .lr-footer [data-footer] .lr-f-strip > [data-footer-part="where"] { display: grid; }
html[data-footer-map="strip"] .lr-footer [data-footer] .lr-f-strip > [data-footer-part="where"] > [data-map] { grid-row: 1 / span 9; grid-column: 1; }
html[data-footer-map="strip"] .lr-footer [data-footer] .lr-f-strip > [data-footer-part="where"] > :not([data-map]) { grid-column: 1; justify-self: start;
  margin-left: max(24px, (100vw - var(--container)) / 2); background: var(--dark); padding: 6px 18px; max-width: 320px; }
html[data-footer-map="strip"] .lr-footer [data-footer] .lr-f-strip > [data-footer-part="where"] > [data-footer-heading] { margin-top: 28px; padding-top: 16px; border-radius: 12px 12px 0 0; }
/* The base row: the copyright left, the agency credit right (lining up with the last column). */
.lr-footer [data-footer-part="base"] { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--dark-ink) 14%, transparent); font-size: .85rem; color: var(--dark-muted); }
.lr-footer [data-credit] a { color: var(--dark-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Tablet: the map gets a little lower. Phone: every link and button a full finger target (Tomek, 2026-10-04). */
@media (max-width: 821.98px) { .lr-footer [data-map] iframe { height: 190px; } }
@media (max-width: 481.98px) {
  .lr-footer [data-footer] .lr-f-row[data-few] { display: grid; }
  .lr-footer [data-footer-links] li { margin: 0; }
  .lr-footer [data-footer-links] a, .lr-footer [data-see-all], .lr-footer [data-link="directions"], .lr-footer [data-credit] a,
  .lr-footer [data-contact-points] a { display: inline-flex; align-items: center; min-height: 44px; }
  .lr-footer [data-socials] a { min-height: 44px; }
  .lr-footer [data-socials]:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]) a { width: 46px; height: 46px; }
  .lr-footer [data-footer-part="base"] { flex-direction: column; }
  .lr-footer [data-map] iframe { height: 170px; }
}
/* the FAQ's open/close mark: the client's own arrow (their icon set), down when closed, up when open */
[data-block="faq"] > [data-faq-mark] { display: none; }
html [data-block="faq"] [data-faq-item] h3:has(> .lr-faq-mark)::after, html [data-block="faq"] [data-faq-item].open h3:has(> .lr-faq-mark)::after { content: none; display: none; }
[data-block="faq"] .lr-faq-mark { width: 22px; height: 22px; flex-shrink: 0; align-self: center; transform: rotate(90deg); transition: transform .2s; }
[data-block="faq"] [data-faq-item].open .lr-faq-mark { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { [data-block="faq"] .lr-faq-mark { transition: none; } }

/* ---------- FAQ looks (Tomek, 2026-10-23): where the mark sits, and whether each question is a box ----------
   Absent = the plus on the right in Brand, as before. Every look draws the mark (the plus, or the client's own icon) in
   Counterpoint; the badge takes the buttons' shape, the boxes the cards' corners. */
html[data-faq-look] [data-block="faq"] [data-faq-item] > h3 { align-items: center; }
html[data-faq-look] [data-block="faq"] [data-faq-item] > h3::after { color: var(--counter-text); flex-shrink: 0; }
html:is([data-faq-look="left"], [data-faq-look="badge"]) [data-block="faq"] [data-faq-item] > h3 { justify-content: flex-start; }
html:is([data-faq-look="left"], [data-faq-look="badge"]) [data-block="faq"] [data-faq-item] > h3::after,
html:is([data-faq-look="left"], [data-faq-look="badge"]) [data-block="faq"] [data-faq-item] > h3 > .lr-faq-mark { order: -1; }

/* LEFT: the mark before the question, the answer lined up under the question's words */
html[data-faq-look="left"] [data-block="faq"] [data-faq-item] > h3::after { width: 22px; text-align: center; }
html[data-faq-look="left"] [data-block="faq"] [data-faq-item] > :not(h3) { margin-left: 38px; }

/* BADGE: the mark in a filled badge before the question; the client's icon on a soft Counterpoint ground */
html[data-faq-look="badge"] [data-block="faq"] [data-faq-item] > h3::after { width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-btn); background: var(--counter); color: var(--counter-ink); font-size: 1.35rem; line-height: 1; }
html[data-faq-look="badge"] [data-block="faq"] [data-faq-item] > h3 > .lr-faq-mark { width: 40px; height: 40px; padding: 9px; box-sizing: border-box;
  border-radius: var(--r-btn); background: color-mix(in srgb, var(--counter) 16%, transparent); }
html[data-faq-look="badge"] [data-block="faq"] [data-faq-item] > :not(h3) { margin-left: 56px; }

/* BOXED: each question its own box in the cards' corners, the mark on the right in a small badge; the open one turns
   to the page ground and its badge fills */
html[data-faq-look="boxed"] [data-block="faq"] { display: grid; gap: 12px; }
html[data-faq-look="boxed"] [data-block="faq"] [data-faq-item] { border: 0; padding: 18px 22px; border-radius: var(--r-card); background: var(--soft); }
html[data-faq-look="boxed"] [data-block="faq"] [data-faq-item]:not(.open) { cursor: pointer; }
html[data-faq-look="boxed"] [data-block="faq"] [data-faq-item].open { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
html[data-faq-look="boxed"] [data-block="faq"] [data-faq-item] > h3::after { width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--r-btn); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 1.2rem; line-height: 1; }
html[data-faq-look="boxed"] [data-block="faq"] [data-faq-item].open > h3::after { background: var(--counter); color: var(--counter-ink); box-shadow: none; }
html[data-faq-look="boxed"] [data-block="faq"] [data-faq-item] > h3 > .lr-faq-mark { width: 34px; height: 34px; padding: 7px; box-sizing: border-box;
  border-radius: var(--r-btn); background: var(--bg); }

/* the client's own icon replaces the plus in every look */
html[data-faq-look] [data-block="faq"] [data-faq-item] > h3:has(> .lr-faq-mark)::after { content: none; display: none; }
/* ---------- end FAQ looks ---------- */

/* The photos in the page are wrapped by theme.js (wrap > frame > photo); an empty map takes no room. */
.lr-sec-wrap { min-width: 0; }
.lr-sec-wrap:has(> .lr-map > .lr-section-photo > [data-map]:empty) { display: none; }
.lr-sec-wrap { margin: 0; }
main figure[data-block="feature-image"] { margin: 0; }

/* ---------- accreditation badges and certificates (Tomek 2026-10-05) ----------
   The numbers are badgeSizes.ts's, written out because CSS cannot read it (badges.test pins the pair).
   Badge strip: every logo in one box, 64 px tall and at most 140 px wide, contained (phone: 48 x 100). One to three
   sit centred in one line with the heading beside them and thin rules between; four or more share the row under a
   centred heading; a phone has two to a row, an odd one centred. */
main > section[data-section-type="badge_strip"] { padding-top: 28px; padding-bottom: 28px; border-block: 1px solid var(--line); }
[data-block="badge-strip"] { display: flex; align-items: center; justify-content: center; gap: 20px 40px; max-width: none; }
[data-block="badge-strip"] > h2 { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.3; flex: 0 0 auto; max-width: 11em; }
[data-block="badge-strip"] > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex: 0 1 auto; }
[data-block="badge-strip"] > ul > li { flex: 0 0 auto; display: flex; justify-content: center; padding-inline: 28px; margin: 0; }
[data-block="badge-strip"] > ul > li + li { border-inline-start: 1px solid var(--line); }
[data-block="badge-strip"] > ul > li:first-child { padding-inline-start: 0; }
[data-block="badge-strip"] > ul > li:last-child { padding-inline-end: 0; }
[data-block="badge-strip"] > ul > li > a { display: flex; align-items: center; justify-content: center; border-radius: 6px; }
[data-block="badge-strip"] > ul > li > :is(a, img) { height: 64px; width: 140px; max-width: 100%; }
[data-block="badge-strip"] > ul > li > img, [data-block="badge-strip"] > ul > li > a > img { object-fit: contain; margin: 0; border-radius: 0; }
[data-block="badge-strip"] > ul > li > a > img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
[data-block="badge-strip"]:has(> ul > li:nth-child(4)) { flex-direction: column; align-items: stretch; }
[data-block="badge-strip"]:has(> ul > li:nth-child(4)) > h2 { max-width: none; text-align: center; }
[data-block="badge-strip"]:has(> ul > li:nth-child(4)) > ul { justify-content: space-between; flex: 1 1 auto; }
[data-block="badge-strip"]:has(> ul > li:nth-child(4)) > ul > li { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
@media (max-width: 639px) {
  main > section[data-section-type="badge_strip"] { padding-top: 24px; padding-bottom: 24px; }
  [data-block="badge-strip"], [data-block="badge-strip"]:has(> ul > li:nth-child(4)) { flex-direction: column; align-items: stretch; gap: 18px; }
  [data-block="badge-strip"] > h2, [data-block="badge-strip"]:has(> ul > li:nth-child(4)) > h2 { max-width: none; text-align: center; font-size: 1.05rem; }
  [data-block="badge-strip"] > ul, [data-block="badge-strip"]:has(> ul > li:nth-child(4)) > ul { flex-wrap: wrap; justify-content: center; row-gap: 20px; }
  [data-block="badge-strip"] > ul > li, [data-block="badge-strip"]:has(> ul > li:nth-child(4)) > ul > li { flex: 0 0 50%; padding-inline: 8px; border: 0; }
  [data-block="badge-strip"] > ul > li + li { border-inline-start: 0; }
  [data-block="badge-strip"] > ul > li:only-child { flex-basis: 100%; }
  [data-block="badge-strip"] > ul > li > :is(a, img) { height: 48px; width: 100px; }
}

/* Qualifications: each certificate whole on an off-white mat in one 180 px, 4:3 frame (contained, never cropped); up
   to five in a row, two to a row on a phone, a lone one centred. Its link opens the full scan over the page (theme.js). */
[data-block="credentials"] { max-width: none; }
[data-block="credentials"] > h2 { margin: 0 0 24px; }
[data-block="credentials"] > ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, 180px); gap: 32px 24px; }
[data-block="credentials"] > ul > li { margin: 0; padding: 0; min-width: 0; }
[data-block="credentials"] figure { margin: 0; }
[data-block="credentials"] figure > :is(a, img) { display: block; width: 100%; aspect-ratio: 4 / 3; background: #fbfaf7; border: 1px solid var(--line);
  border-radius: 4px; padding: 10px; box-shadow: 0 8px 18px -12px rgba(40, 25, 10, .35); }
[data-block="credentials"] figure > img { object-fit: contain; }
[data-block="credentials"] figure > a { cursor: zoom-in; }
[data-block="credentials"] figure > a > img { width: 100%; height: 100%; object-fit: contain; margin: 0; border-radius: 0; }
[data-block="credentials"] figcaption { margin-top: 12px; }
[data-block="credentials"] figcaption p { margin: 0; }
[data-block="credentials"] [data-field="title"] { font-weight: 600; color: var(--heading); font-size: .92rem; line-height: 1.35; }
[data-block="credentials"] [data-field="issued-by"] { margin-top: 3px; font-size: .82rem; color: var(--muted); }
[data-block="credentials"] [data-field="issued-by"] a { color: inherit; }
@media (max-width: 639px) {
  [data-block="credentials"] > ul { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  [data-block="credentials"] > ul:has(> li:only-of-type) { grid-template-columns: minmax(0, 220px); justify-content: center; }
  [data-block="credentials"] > h2 { text-align: center; }
}
/* ---------- old qualifications HTML ---------- */
/* A page drawn before the gallery had its list (figures straight in the section) keeps the old grid until rebuilt. */
[data-block="credentials"]:not(:has(> ul)) { display: grid; grid-template-columns: repeat(auto-fill, 180px); gap: 32px 24px; }
[data-block="credentials"]:not(:has(> ul)) > h2 { grid-column: 1 / -1; margin: 0 0 -8px; }
@media (max-width: 639px) {
  [data-block="credentials"]:not(:has(> ul)) { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  [data-block="credentials"]:not(:has(> ul)):has(> figure:only-of-type) { grid-template-columns: minmax(0, 220px); justify-content: center; }
}
/* ---------- end old qualifications HTML ---------- */
.lr-enlarge { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(20, 14, 10, .82); padding: 3vh 3vw; }
.lr-enlarge img { max-width: 94vw; max-height: 84vh; width: auto; height: auto; background: #fff; border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lr-enlarge p { color: #fff; margin: 0; font-weight: 500; }
/* A HighLevel booking page over the site (talk to create piece 5): the page fills the screen, the business's note beside
   it on a computer and above it on a phone; "Open in a new tab" is always there for a page that refuses to be framed. */
html.lr-booking-open { overflow: hidden; }
.lr-booking { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: stretch; justify-content: center; padding: 3vh 3vw; background: rgba(0, 0, 0, .72); }
.lr-booking-panel { display: flex; flex-direction: column; width: min(1200px, 100%); background: #fff; color: #111; border-radius: var(--r-card); overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lr-booking-bar { display: flex; align-items: center; gap: 16px; padding: 10px 14px 10px 20px; border-bottom: 1px solid #e6e2dc; font-family: var(--font-b); }
.lr-booking-bar span { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-booking-bar a { color: #111; font-size: .9em; text-decoration: underline; }
.lr-booking-bar button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f1efeb; color: #111; font-size: 22px; line-height: 1; cursor: pointer; }
.lr-booking-body { flex: 1; display: flex; min-height: 0; }
.lr-booking-body iframe { flex: 1; width: 100%; height: 100%; border: 0; }
.lr-booking-note { flex: 0 0 280px; padding: 20px; overflow: auto; white-space: pre-line; background: #f6f4f0; border-inline-end: 1px solid #e6e2dc; font-family: var(--font-b); line-height: 1.55; }
@media (max-width: 700px) {
  .lr-booking { padding: 0; }
  .lr-booking-panel { border-radius: 0; }
  .lr-booking-body { flex-direction: column; }
  .lr-booking-note { flex: 0 0 auto; max-height: 30vh; border-inline-end: 0; border-bottom: 1px solid #e6e2dc; }
}
.lr-enlarge button { position: absolute; top: 18px; inset-inline-end: 22px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: #111; font-size: 22px; line-height: 1; cursor: pointer; }

/* Team photos never grow past 320 px. A team of ONE is a side-by-side card: a 300 px photo beside the name, role and
   bio (phone: 220 px, on top, centred). Before this a lone member's photo filled the page width as a square. */
ul[data-block="team"] .lr-team-pic, ul[data-block="team"] > li > img { max-width: 320px; }
ul[data-block="team"]:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); }
/* the words are centred on the portrait, whatever its frame (spec 2026-10-07 #19): two 1fr rows share the spare height,
   and an empty ::before holds the first one so the words flow from the second row down in their own order */
ul[data-block="team"] > li:only-child:has(> :is(img, picture, .lr-team-pic):first-child) { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: 1fr repeat(10, auto) 1fr; column-gap: 40px; }
ul[data-block="team"] > li:only-child > :is(img, picture, .lr-team-pic):first-child { grid-column: 1; grid-row: 1 / -1; width: 300px; max-width: 100%; margin-bottom: 0; }
ul[data-block="team"] > li:only-child > :not(:first-child) { grid-column: 2; }
ul[data-block="team"] > li:only-child:has(> :is(img, picture, .lr-team-pic):first-child)::before { content: ''; grid-column: 2; grid-row: 1; }
ul[data-block="team"] > li:only-child:has(> :is(img, picture, .lr-team-pic):first-child) > :last-child { margin-bottom: 0; }
ul[data-block="team"] > li:only-child > h3 { margin-top: 0; }
@media (max-width: 639px) {
  ul[data-block="team"] > li:only-child:has(> :is(img, picture, .lr-team-pic):first-child) { display: block; }
  ul[data-block="team"] > li:only-child > :is(img, picture, .lr-team-pic):first-child { width: 220px; margin: 0 auto 16px; }
  ul[data-block="team"] > li:only-child > :is(h3, [data-field="role"]) { text-align: center; }
}
/* A team of ONE inside its written band (theme.js marks it lr-team-one, and pic-left by the page's photo rhythm): the
   photo, with the name and role under it, sits beside the band's story instead of below it (Tomek, 2026-10-17).
   Phone: the heading, then a small photo with the name and role beside it, then the story. */
main > section.lr-team-one > section[data-section-type="about_team"] > ul[data-block="team"] { display: block; margin-top: 0; }
main > section.lr-team-one > section[data-section-type="about_team"] > ul[data-block="team"] > li:only-child { display: block; }
main > section.lr-team-one > section[data-section-type="about_team"] > ul[data-block="team"] > li:only-child::before { content: none; }
main > section.lr-team-one > section[data-section-type="about_team"] > ul[data-block="team"] > li:only-child > :first-child { width: 100%; max-width: 340px; margin: 0; }
main > section.lr-team-one > section[data-section-type="about_team"] > ul[data-block="team"] > li:only-child .lr-team-pic img { width: 100%; }
main > section.lr-team-one > section[data-section-type="about_team"] > ul[data-block="team"] > li:only-child > h3 { margin: 18px 0 2px; }
main > section.lr-team-one > section[data-section-type="about_team"] > ul[data-block="team"] > li:only-child > [data-field="role"] { margin: 0; }
@media (min-width: 768px) {
  main > section.lr-team-one { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); column-gap: clamp(40px, 5vw, 80px); align-items: start; }
  main > section.lr-team-one.pic-left { grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); }
  main > section.lr-team-one > * { grid-column: 1; min-width: 0; }
  main > section.lr-team-one.pic-left > * { grid-column: 2; }
  main > section.lr-team-one > section[data-section-type="about_team"] { grid-column: 2; grid-row: 1 / span 20; margin: 0; }
  main > section.lr-team-one.pic-left > section[data-section-type="about_team"] { grid-column: 1; }
}
@media (max-width: 767px) {
  main > section.lr-team-one { display: flex; flex-direction: column; }
  main > section.lr-team-one > h2 { order: -2; }
  main > section.lr-team-one > section[data-section-type="about_team"] { order: -1; margin: 0 0 24px; }
  main > section.lr-team-one > section[data-section-type="about_team"] > ul[data-block="team"] > li:only-child { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 18px; align-items: center; }
  main > section.lr-team-one > section[data-section-type="about_team"] > ul[data-block="team"] > li:only-child > :first-child { grid-row: 1 / span 2; width: 120px; }
  main > section.lr-team-one > section[data-section-type="about_team"] > ul[data-block="team"] > li:only-child > :is(h3, [data-field="role"]) { grid-column: 2; margin: 0; text-align: left; }
  main > section.lr-team-one > section[data-section-type="about_team"] > ul[data-block="team"] > li:only-child > h3 { align-self: end; }
  main > section.lr-team-one > section[data-section-type="about_team"] > ul[data-block="team"] > li:only-child > [data-field="role"] { align-self: start; }
}

/* Recent work with ONE job: its photo beside its words, never a 4:3 photo the width of the page (Tomek, 2026-10-17).
   Only a job with a photo; the 'list' layout draws none and keeps its plain row. Phone: the photo on top. */
[data-block="recent-work"] > ul:has(> li:only-child > img:first-child) { display: block; }
/* the words are centred on the photo as the team of one's are: two 1fr rows share the spare height, and an empty
   ::before holds the first one so the words flow from the second row down in their own order */
[data-block="recent-work"] > ul > li:only-child:has(> img:first-child) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: 1fr repeat(10, auto) 1fr; column-gap: clamp(28px, 4vw, 56px); }
[data-block="recent-work"] > ul > li:only-child:has(> img:first-child)::before { content: ''; grid-column: 2; grid-row: 1; }
[data-block="recent-work"] > ul > li:only-child > img:first-child { grid-column: 1; grid-row: 1 / -1; align-self: center; margin: 0; }
[data-block="recent-work"] > ul > li:only-child:has(> img:first-child) > :not(:first-child) { grid-column: 2; }
[data-block="recent-work"] > ul > li:only-child:has(> img:first-child) > :last-child { margin-bottom: 0; }
@media (max-width: 639px) {
  [data-block="recent-work"] > ul > li:only-child:has(> img:first-child) { display: block; }
  [data-block="recent-work"] > ul > li:only-child > img:first-child { margin-bottom: 14px; }
}

/* ---------- the About page's Featured pages band (2026-10-05) ----------
   1–3 cards to the money pages; data-count keys the layout: 1 = one wide row, picture left; 2 = side by side, picture
   beside the words; 3 = columns. A phone: the first card full, the rest short rows. A hub card is outlined. */
/* Its colour is the band's (Two / Three / With dark and the theme's colours, spec 2026-10-05-designer-shape-picker S4); the
   soft fill is only for a page the theme has not tagged into bands. */
main > section[data-section-type="featured_pages"]:not(.lr-band) { background: var(--soft); }
[data-block="featured-pages"] > ul { display: grid; gap: var(--gap); margin-top: 1.4em; }
[data-block="featured-pages"] > ul > li { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
[data-block="featured-pages"] > ul > li[data-hub] { border-color: var(--primary); }
[data-block="featured-pages"] [data-card-picture] { display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: color-mix(in srgb, var(--primary) 12%, var(--bg)); }
/* The picture fills the box and never sets its height: a tall photo would otherwise stretch its card past the others. */
[data-block="featured-pages"] [data-card-picture] img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; display: block; }
[data-block="featured-pages"] [data-card-picture] [data-picture-none] { display: block; width: 100%; height: 100%; }
[data-block="featured-pages"] > ul > li > div { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
[data-block="featured-pages"] h3 { margin: 0 0 .35em; }
[data-block="featured-pages"] li p { color: var(--muted); margin: 0 0 .9em; }
[data-block="featured-pages"] li > div > a { margin-top: auto; font-weight: 600; }
[data-block="featured-pages"][data-count="3"] > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-block="featured-pages"][data-count="2"] > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-block="featured-pages"][data-count="2"] > ul > li { flex-direction: row; }
[data-block="featured-pages"][data-count="2"] [data-card-picture] { width: 44%; flex: 0 0 auto; aspect-ratio: auto; min-height: 180px; }
[data-block="featured-pages"][data-count="1"] > ul > li { flex-direction: row; min-height: 240px; }
[data-block="featured-pages"][data-count="1"] [data-card-picture] { width: 46%; flex: 0 0 auto; aspect-ratio: auto; }
[data-block="featured-pages"][data-count="1"] > ul > li > div { padding: 30px 34px; justify-content: center; }
[data-block="featured-pages"][data-count="1"] li p { max-width: 46ch; }
[data-block="featured-pages"][data-count="1"] li > div > a { margin-top: .4em; }
@media (max-width: 760px) {
  [data-block="featured-pages"][data-count] > ul { grid-template-columns: 1fr; gap: 12px; }
  [data-block="featured-pages"][data-count] > ul > li { flex-direction: column; min-height: 0; }
  [data-block="featured-pages"][data-count] [data-card-picture] { width: 100%; aspect-ratio: 3 / 2; min-height: 0; }
  [data-block="featured-pages"][data-count] > ul > li > div { padding: 14px 16px 16px; }
  [data-block="featured-pages"][data-count] > ul > li + li { flex-direction: row; }
  [data-block="featured-pages"][data-count] > ul > li + li [data-card-picture] { width: 96px; aspect-ratio: 1; flex: 0 0 auto; }
  [data-block="featured-pages"][data-count] > ul > li + li p { margin-bottom: .5em; }
}

/* A showcase page's cards (2026-10-12): one grid per group; short = a column, wide = the row, picture beside. */
/* Widths: data-card-span (fitShowcaseRuns, 2026-10-22) on 12 columns. */
[data-block="showcase-cards"] > ul { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: 1.2em; padding: 0; list-style: none; }
[data-block="showcase-cards"] li { grid-column: span 4; }
[data-block="showcase-cards"] [data-card-span=quarter], [data-block="showcase-cards"] [data-card-group=product]:not([data-card-span]) { grid-column: span 3; }
[data-block="showcase-cards"] [data-card-span=half] { grid-column: span 6; }
[data-block="showcase-cards"] > ul > li { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin: 0; }
[data-block="showcase-cards"] > ul > li[hidden] { display: none; }
[data-block="showcase-cards"] [data-card-picture] { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--primary) 12%, var(--bg)); }
[data-block="showcase-cards"][data-group="product"] [data-card-picture] { aspect-ratio: 1; }
[data-block="showcase-cards"] [data-card-picture] img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; display: block; }
[data-block="showcase-cards"] [data-card-picture] [data-picture-none] { display: block; width: 100%; height: 100%; }
[data-block="showcase-cards"] [data-card-date] { position: absolute; top: 10px; left: 10px; display: grid; justify-items: center; padding: 6px 11px 7px; border-radius: var(--r-btn); background: var(--bg); color: var(--ink); line-height: 1; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); }
[data-block="showcase-cards"] [data-card-date] b { font-family: var(--font-h); font-size: 24px; color: var(--primary); }
[data-block="showcase-cards"] [data-card-date] span { font-size: 12px; font-weight: 700; }
[data-block="showcase-cards"] [data-card-body] { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: .35em; flex: 1; min-width: 0; }
[data-block="showcase-cards"] h3 { margin: 0; }
[data-block="showcase-cards"] h3 a { color: inherit; text-decoration: none; }
[data-block="showcase-cards"] p { margin: 0; }
[data-block="showcase-cards"] [data-field="when"] { font-weight: 700; }
[data-block="showcase-cards"] [data-field="summary"] { color: var(--muted); }
[data-block="showcase-cards"] [data-field="hook"] { font-weight: 700; font-size: 1.05em; }
[data-block="showcase-cards"] [data-field="points"] { margin: .2em 0 .3em; padding-left: 1.2em; }
[data-block="showcase-cards"] [data-field="price"] { font-family: var(--font-h); font-weight: 700; font-size: 1.15em; }
[data-block="showcase-cards"] [data-field="closes"] { color: var(--muted); font-size: .9em; }
[data-block="showcase-cards"] [data-field="saving"] { font-weight: 700; color: var(--accent); }
[data-block="showcase-cards"] [data-card-foot] { margin-top: auto; padding-top: .5em; display: flex; flex-direction: column; gap: .4em; align-items: stretch; }
/* `a[data-card-button][href]`: specific enough to beat `main a:not([data-button]):not([data-site-name])`, whose link colour
   otherwise paints the words the button's own colour (2026-10-15, seen blank on the Theme Designer's Showcase page). */
[data-block="showcase-cards"] a[data-card-button][href] { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: .6em 1.15em; border-radius: var(--r-btn); background: var(--primary); color: var(--primary-ink); font-weight: 700; text-decoration: none; }
[data-block="showcase-cards"] li[data-card-group="read"] a[data-card-button][href] { background: none; color: var(--primary); padding: 0; min-height: 0; justify-content: flex-start; text-decoration: underline; text-underline-offset: 3px; }
[data-block="showcase-cards"] > ul > li[data-card-shape="wide"] { grid-column: 1 / -1; flex-direction: row; }
[data-block="showcase-cards"] > ul > li[data-card-shape="wide"] [data-card-picture] { flex: 0 0 42%; aspect-ratio: auto; min-height: 250px; }
[data-block="showcase-cards"] > ul > li[data-card-shape="wide"] [data-card-body] { padding: 20px 24px; gap: .5em; }
[data-block="showcase-cards"] > ul > li[data-card-shape="wide"] [data-card-foot] { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; }
/* Booking closed (Tomek, 2026-10-12): the card stays, its closed words in place of the price and the button. The page
   script hides the price, the closes line and the button at the closing instant, so [hidden] must beat their display. */
[data-block="showcase-cards"] [data-card-foot] [hidden] { display: none; }
[data-block="showcase-cards"] [data-field="closed"] { font-weight: 700; color: var(--heading); }
/* A wide case study card's customer quote, in the picture's place (the approved wide-card mock-up). */
[data-block="showcase-cards"] blockquote[data-card-quote] { margin: 0; flex: 0 0 42%; padding: 26px 24px; background: color-mix(in srgb, var(--primary) 9%, var(--bg)); font-family: var(--font-h); font-weight: 700; font-size: 1.3em; line-height: 1.35; color: var(--heading); }
[data-block="showcase-cards"] blockquote[data-card-quote]::before { content: '\201C'; display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 52px; line-height: .6; font-weight: 400; color: var(--primary); opacity: .5; margin: 6px 0 8px; }
[data-block="showcase-cards"] [data-field="who"] { font-size: .8em; font-weight: 700; color: var(--primary); }
@media (max-width: 900px) {
  [data-block="showcase-cards"] > ul > li:not([data-card-shape=wide]) { grid-column: span 6; }
}
@media (max-width: 760px) {
  [data-block="showcase-cards"] > ul { gap: 12px; }
  [data-block="showcase-cards"] > ul > li:not([data-card-group=product]) { grid-column: 1 / -1; }
  [data-block="showcase-cards"] > ul > li[data-card-shape="wide"] { flex-direction: column; }
  [data-block="showcase-cards"] > ul > li[data-card-shape="wide"] [data-card-picture] { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  [data-block="showcase-cards"] > ul > li[data-card-shape="wide"] [data-card-body] { padding: 14px 15px 16px; }
  [data-block="showcase-cards"] blockquote[data-card-quote] { flex: none; padding: 18px 16px; font-size: 1.1em; }
}

/* The contact page's reply line (contact page parts 2-3, 2026-10-08, "reply once"): in the title band, after its words,
   never in the details block below. Its dot is the accent. */
[data-hero-reply] { display: inline-flex; align-items: center; gap: 10px; margin: 12px 0 0; font-weight: 500; }
[data-hero-reply] [data-reply-dot] { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }

/* Each place's overlay size (spec 2026-10-09-overlay-sizes): every piece of an overlay grows or shrinks round its own
   centre (a library piece's box is centred on its anchor point), by the design's --ov-scale-<place>, 1 when it sets none.
   The frame outline never changes size: the ready-made one is left out here, a library one is set back in design.css or
   the photo style. */
main > section.lr-band > .lr-ov, main > section.lr-band[data-bov]:not([data-bov="outline"])::after { scale: var(--ov-scale-box, 1); }
:is(ul[data-block="cards"], ul[data-block="testimonials"]) > li > .lr-ov,
:is(ul[data-block="cards"], ul[data-block="testimonials"]) > li[data-ov]:not([data-ov="outline"])::before { scale: var(--ov-scale-card, 1); }
.lr-team-ov > .lr-ov, .lr-team-ov[data-tov]:not([data-tov="outline"])::before { scale: var(--ov-scale-team, 1); }
.lr-hero-frame > .lr-overlay-layer, .lr-hero-frame::before, .lr-hero-frame::after { scale: var(--ov-scale-hero, 1); }
.lr-section-frame > .lr-overlay-layer, .lr-section-frame::before, .lr-section-frame::after { scale: var(--ov-scale-section, 1); }
/* A ready-made shape on a band, a card or a team photo is pinned to one corner: that corner is where it grows from, so
   it stays tucked into its corner at every size (a library piece grows from its own anchor point, its box's centre). The
   team photo's block is already turned round its centre, so it grows from there too. */
main > section.lr-band[data-bov="circle"]::after, :is(ul[data-block="cards"], ul[data-block="testimonials"]) > li[data-ov="circle"]::before,
.lr-team-ov[data-tov="circle"]::before, .lr-team-ov[data-tov="dots"]::before { transform-origin: right top; }
main > section.lr-band[data-bov="block"]::after, :is(ul[data-block="cards"], ul[data-block="testimonials"]) > li[data-ov="dots"]::before { transform-origin: left bottom; }
main > section.lr-band[data-bov="dots"]::after { transform-origin: left top; }
:is(ul[data-block="cards"], ul[data-block="testimonials"]) > li[data-ov="block"]::before { transform-origin: right bottom; }


/* ---------- the "Our branches" page (spec 2026-10-09-branches-hub; the approved mock-up) ----------
   One card per branch, two to a row: the branch's map on top, then its town (the main branch tagged), the areas it covers,
   its facts with an icon each and its buttons. "Send <town> a message" opens the site's form INSIDE that card, which then
   takes the whole row: the branch's map and facts on the left, the form on the right (stacked on a phone). Theme
   variables only. */
[data-block="branches"] [data-branch-grid] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--gap); align-items: start; }
[data-block="branches"] [hidden] { display: none !important; }
[data-block="branches"] [data-branch-card] { display: grid; grid-template-rows: auto 1fr; min-width: 0; background: var(--card-fill, var(--bg)); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; scroll-margin-top: 110px; }
[data-block="branches"] [data-branch-card] > [data-map] { aspect-ratio: 16 / 8; background: var(--soft); }
[data-block="branches"] [data-branch-card] > [data-map] iframe { display: block; width: 100%; height: 100%; border: 0; }
[data-block="branches"] [data-branch-body] { display: grid; gap: 14px; align-content: start; padding: 22px 24px 24px; min-width: 0; }
[data-block="branches"] [data-branch-body] h2 { margin: 0; line-height: 1.15; }
[data-block="branches"] [data-branch-primary] { display: inline-block; margin-left: 10px; vertical-align: .35em; padding: 5px 11px; border-radius: 999px; background: var(--dark); color: var(--dark-ink); font-family: var(--font-b); font-size: .78rem; font-weight: 700; letter-spacing: 0; line-height: 1; }
[data-block="branches"] [data-branch-covers] { margin: -6px 0 0; color: var(--muted); }
[data-block="branches"] [data-branch-facts] { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
[data-block="branches"] [data-branch-facts] > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; line-height: 1.45; }
[data-block="branches"] [data-icon] { width: 20px; height: 20px; margin-top: 2px; color: var(--primary); }
[data-block="branches"] [data-branch-facts] address { font-style: normal; }
[data-block="branches"] [data-branch-facts] a { color: var(--link, var(--accent)); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
[data-block="branches"] [data-open-state] { display: block; font-weight: 700; color: var(--heading); }
[data-block="branches"] [data-open-state]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: 1px; border-radius: 50%; background: var(--yes); }
[data-block="branches"] [data-open-state="closed"]::before { background: var(--no); }
[data-block="branches"] [data-week-list] summary { width: fit-content; cursor: pointer; color: var(--link, var(--accent)); font-weight: 600; font-size: .92rem; }
[data-block="branches"] [data-week-list] [data-hours] { list-style: none; margin: 6px 0 0; padding: 0; font-size: .92rem; }
[data-block="branches"] [data-branch-actions] { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 16px; border-top: 1px solid var(--line); }
[data-block="branches"] [data-branch-message], [data-block="branches"] [data-link="directions"] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: .6em 1.15em; border-radius: var(--r-btn); font-family: var(--font-b); font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; }
[data-block="branches"] [data-branch-message] { border: 2px solid var(--primary); background: var(--primary); color: var(--primary-ink); }
[data-block="branches"] [data-link="directions"] { border: 2px solid var(--heading); background: transparent; color: var(--heading); }
[data-block="branches"] [data-branch-actions] [data-icon] { margin: 0; color: currentColor; }
[data-block="branches"] [data-link="areas"] { margin-left: auto; color: var(--link, var(--accent)); font-weight: 600; text-underline-offset: 3px; }
[data-block="branches"] :is([data-branch-message], [data-link], [data-branch-change], [data-branch-form-close]):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* Open: the card takes the whole row, its map and facts left, the form right. */
[data-block="branches"] [data-branch-card][data-open] { grid-column: 1 / -1; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; border: 2px solid var(--primary); }
[data-block="branches"] [data-branch-card][data-open] > [data-map] { grid-column: 1; grid-row: 1; }
[data-block="branches"] [data-branch-card][data-open] > [data-branch-body] { grid-column: 1; grid-row: 2; background: var(--soft); border-right: 1px solid var(--line); }
[data-block="branches"] [data-branch-card][data-open] [data-branch-message] { display: none; }
[data-block="branches"] [data-branch-form-slot] { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 12px; align-content: start; padding: 22px 24px 26px; min-width: 0; }
[data-block="branches"] [data-branch-form-top] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r-btn); background: color-mix(in srgb, var(--primary) 14%, var(--bg)); color: var(--heading); }
[data-block="branches"] [data-branch-going] { margin: 0; font-weight: 700; }
[data-block="branches"] [data-branch-change] { margin-left: auto; appearance: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--link, var(--accent)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
[data-block="branches"] [data-branch-form-close] { appearance: none; border: 0; background: none; padding: 2px 6px; font: inherit; font-size: 1.4rem; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 6px; }
[data-block="branches"] [data-branch-form-slot] [data-enquiry] { border: 0; padding: 0; background: transparent; }
[data-block="branches"] [data-branch-form-slot][data-chosen] [data-enquiry-field="branch"] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-block="branches"] [data-branch-form-slot]:not([hidden]) { animation: lr-branch-form-in .3s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes lr-branch-form-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  [data-block="branches"] [data-branch-grid] { grid-template-columns: minmax(0, 1fr); }
  [data-block="branches"] [data-branch-card][data-open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  [data-block="branches"] [data-branch-card][data-open] > :is([data-map], [data-branch-body], [data-branch-form-slot]) { grid-column: 1; grid-row: auto; }
  [data-block="branches"] [data-branch-card][data-open] > [data-branch-body] { border-right: 0; border-bottom: 1px solid var(--line); }
  [data-block="branches"] [data-link="areas"] { margin-left: 0; }
}
@media (max-width: 520px) {
  [data-block="branches"] :is([data-branch-body], [data-branch-form-slot]) { padding: 18px 16px; }
  [data-block="branches"] [data-branch-actions] > :is([data-branch-message], [data-link="directions"]) { flex: 1 1 auto; justify-content: center; }
}
/* The enquiry form inside a branch card: the contact block's own rules, scoped to this block (the contact block's
   section below takes only its own selectors). */
[data-block="branches"] [data-enquiry] { display: grid; gap: 12px; padding: 22px; border: 2px solid var(--primary); border-radius: var(--r-card); background: var(--bg); color: var(--ink); min-width: 0; }
[data-block="branches"] [data-enquiry][hidden], [data-block="branches"] [data-enquiry] [hidden] { display: none; }
[data-block="branches"] [data-enquiry] h3 { margin: 0; font-family: var(--font-h); font-weight: var(--h-weight); color: var(--heading); font-size: var(--fs-h3); }
[data-block="branches"] [data-enquiry-field] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
[data-block="branches"] [data-enquiry-pair] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
[data-block="branches"] [data-enquiry] label { font-family: var(--font-b); font-size: .88rem; font-weight: 600; color: var(--muted); }
[data-block="branches"] [data-enquiry] select, [data-block="branches"] [data-enquiry] input, [data-block="branches"] [data-enquiry] textarea, [data-block="branches"] [data-enquiry-select] { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--bg); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-btn); min-width: 0; }
[data-block="branches"] [data-enquiry] textarea { resize: vertical; min-height: 6em; }
[data-block="branches"] [data-enquiry] select:focus, [data-block="branches"] [data-enquiry] input:focus, [data-block="branches"] [data-enquiry] textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
[data-block="branches"] [data-enquiry-options] { list-style: none; margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-btn); font-size: .9rem; color: var(--muted); }
[data-block="branches"] [data-enquiry-options] [data-enquiry-group] { font-weight: 600; color: var(--heading); }
[data-block="branches"] [data-enquiry-trap] { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
[data-block="branches"] [data-enquiry-privacy] { margin: 0; font-size: .85rem; color: var(--muted); }
[data-block="branches"] [data-enquiry-privacy] a { color: var(--link, var(--accent)); }
[data-block="branches"] [data-enquiry-send] { justify-self: start; min-height: 44px; padding: .75em 1.4em; border: 0; border-radius: var(--r-btn); background: var(--primary); color: var(--primary-ink); font-family: var(--font-b); font-weight: 700; cursor: pointer; }
[data-block="branches"] [data-enquiry-send][disabled] { opacity: .6; cursor: progress; }
[data-block="branches"] [data-enquiry-error] { margin: 0; color: var(--heading); font-weight: 600; }
[data-block="branches"] [data-enquiry-error]:empty { padding: 0; background: none; }
[data-block="branches"] [data-enquiry-optional] { font-weight: 400; }
[data-block="branches"] [data-enquiry-required] { color: var(--heading); }
[data-block="branches"] [data-enquiry-done] { padding: 0; margin: auto; border: 0; background: transparent; color: var(--ink); width: min(420px, calc(100vw - 32px)); max-width: 100%; overflow: visible; }
[data-block="branches"] [data-enquiry-done]::backdrop { background: color-mix(in srgb, var(--dark) 55%, transparent); }
[data-block="branches"] [data-enquiry-inline] { justify-self: center; margin: 0; }
[data-block="branches"] [data-enquiry-done-box] { display: grid; justify-items: center; gap: 10px; padding: 26px 24px 22px; text-align: center; background: var(--bg); color: var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow); font-family: var(--font-b); }
[data-block="branches"] [data-enquiry-inline] [data-enquiry-done-box] { border: 1px solid var(--line); }
[data-block="branches"] [data-enquiry-tick] { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
[data-block="branches"] [data-enquiry-tick] svg { width: 26px; height: 26px; }
[data-block="branches"] [data-enquiry-done-box] h3 { margin: 4px 0 0; font-family: var(--font-h); font-weight: var(--h-weight); color: var(--heading); font-size: var(--fs-h3); }
[data-block="branches"] [data-enquiry-done-box] p { margin: 0; color: var(--ink); }
[data-block="branches"] [data-enquiry-reply] { color: var(--muted); }
[data-block="branches"] [data-enquiry-close] { margin-top: 6px; min-height: 44px; padding: .65em 1.6em; border: 0; border-radius: var(--r-btn); background: var(--primary); color: var(--primary-ink); font-family: var(--font-b); font-weight: 700; cursor: pointer; }
[data-block="branches"] [data-enquiry-close]:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (max-width: 640px) { [data-block="branches"] [data-enquiry-pair] { grid-template-columns: minmax(0, 1fr); } }

/* ===== CALL-TO-ACTION BAND (Tomek, 2026-10-10; spec 2026-10-10-cta-band-design-knobs) ==============================
   Two Design parts for BOTH bands that ask the visitor to act: the home page's mid-page call to action (an intro with
   role midcta: a sentence and the buttons) and every page's closing call to action (heading, sentence, buttons).
   ctaLayout (html[data-cta-layout]): below | centred | right | left — right/left put the buttons beside the words, as one
   pair, vertically centred; a phone stacks every layout with full-width buttons, main first.
   ctaGround (html[data-cta-ground]): none (the page's own band colours) | tint | brand | card.
   Every rule needs a chosen value: absent, both bands draw exactly as before. It sits after the band colours (.lr-band,
   .lr-contrast) and the rhythm rules on purpose: several tie on specificity and the later rule must win. CSS only — no
   markup, so the Editor's tap-to-edit and every exported site take it from the theme they already ship. */

/* -- layout -- */
html[data-cta-layout="below"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > * { margin-left: 0; margin-right: 0; text-align: left; }
html[data-cta-layout="below"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-block="buttons"] { justify-content: flex-start; }
html[data-cta-layout="below"] main > section[data-section-type="intro"][data-role="midcta"] > p { border-left: 5px solid var(--primary); padding-left: 22px; }
html[data-cta-layout="centred"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > * { margin-left: auto; margin-right: auto; text-align: center; }
html[data-cta-layout="centred"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-block="buttons"] { justify-content: center; }
html[data-cta-layout="centred"] main > section[data-section-type="intro"][data-role="midcta"] > p,
html[data-cta-layout="right"] main > section[data-section-type="intro"][data-role="midcta"] > p,
html[data-cta-layout="left"] main > section[data-section-type="intro"][data-role="midcta"] > p { border-left: 0; padding-left: 0; }
/* right / left: two columns over the section's own children (heading, sentence, buttons; the midcta has no heading). The
   buttons span the words' rows so they sit centred against them; empty spanned rows are zero high. */
html[data-cta-layout="right"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(var(--gap) * 2); row-gap: 0; align-items: center; }
html[data-cta-layout="left"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(var(--gap) * 2); row-gap: 0; align-items: center; }
/* (a band's pattern and overlay layers are absolute children: never placed in a column, or they would cover only it) */
html[data-cta-layout="right"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > :where(:not(.lr-ov, .lr-bpat)) { grid-column: 1; margin-left: 0; margin-right: 0; text-align: left; }
html[data-cta-layout="left"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > :where(:not(.lr-ov, .lr-bpat)) { grid-column: 2; margin-left: 0; margin-right: 0; text-align: left; }
html[data-cta-layout="right"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > [data-block="buttons"] { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; flex-wrap: nowrap; justify-content: flex-end; }
html[data-cta-layout="left"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > [data-block="buttons"] { grid-column: 1; grid-row: 1 / span 2; margin-top: 0; flex-wrap: nowrap; justify-content: flex-start; }
/* the mid-page band is one sentence: its buttons span that row alone, so no empty row takes height */
html[data-cta-layout="right"] main > section[data-section-type="intro"][data-role="midcta"] > [data-block="buttons"],
html[data-cta-layout="left"] main > section[data-section-type="intro"][data-role="midcta"] > [data-block="buttons"] { grid-row: 1; }
html[data-cta-layout="right"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > :is(h2, p):has(+ [data-block="buttons"]),
html[data-cta-layout="left"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > :is(h2, p):has(+ [data-block="buttons"]) { margin-bottom: 0; }
html[data-cta-layout="right"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > :is(h2, p):first-child,
html[data-cta-layout="left"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > :is(h2, p):first-child { margin-top: 0; }
/* a phone stacks every chosen layout: words, then the buttons full width, main first */
@media (max-width: 760px) {
  html[data-cta-layout="right"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]),
  html[data-cta-layout="left"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) { display: block; }
  html[data-cta-layout="right"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > [data-block="buttons"],
  html[data-cta-layout="left"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > [data-block="buttons"] { margin-top: 1.4em; }
  html[data-cta-layout="below"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-block="buttons"],
  html[data-cta-layout="centred"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-block="buttons"],
  html[data-cta-layout="right"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-block="buttons"],
  html[data-cta-layout="left"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-block="buttons"] { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  html[data-cta-layout="below"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-button],
  html[data-cta-layout="centred"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-button],
  html[data-cta-layout="right"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-button],
  html[data-cta-layout="left"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-button] { justify-content: center; text-align: center; }
}

/* -- background -- */
html[data-cta-ground="tint"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) { background: var(--soft); --lr-ground: var(--soft); color: var(--ink); }
html[data-cta-ground="card"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) {
  background: var(--card-fill); --lr-ground: var(--card-fill); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow); clip-path: none; margin: calc(var(--sec-y) * .6) max(16px, calc((100% - var(--container)) / 2));
  padding: calc(var(--box-pad) * .9) var(--box-pad); }
/* a card is a clean raised box: the band's edge art, shape overlay and pattern stay off it, and nothing clips its shadow
   (the overlay's own clip on a shaped-edge site is far more particular, hence the !important) */
html[data-cta-ground="card"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"])::before,
html[data-cta-ground="card"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"])::after,
html[data-cta-ground="card"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > :is(.lr-ov, .lr-bpat) { display: none; }
html[data-cta-ground="card"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"])[data-bov] { clip-path: none !important; }
/* on a boxed design the card lines up with the boxes around it, and drops the room a box keeps for its shaped edge */
html[data-cta-ground="card"][data-boxed="on"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]),
html[data-cta-ground="card"][data-boxed="on"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"])[data-bedge] {
  margin-left: max(16px, calc((100% - var(--container)) / 2 - var(--box-pad))); margin-right: max(16px, calc((100% - var(--container)) / 2 - var(--box-pad)));
  padding: calc(var(--box-pad) * 1.15) var(--box-pad); }
/* the heading mark follows the band's own alignment, not the site's */
html[data-cta-layout="centred"][data-mark="bar"] main > section[data-section-type="cta"] > h2::before { margin-left: auto; margin-right: auto; }
html[data-cta-layout="below"][data-mark="bar"] main > section[data-section-type="cta"] > h2::before,
html[data-cta-layout="right"][data-mark="bar"] main > section[data-section-type="cta"] > h2::before,
html[data-cta-layout="left"][data-mark="bar"] main > section[data-section-type="cta"] > h2::before { margin-left: 0; margin-right: 0; }
html[data-cta-ground="brand"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) { background: var(--primary); --lr-ground: var(--primary); color: var(--primary-ink); }
/* light grounds: words and buttons in their light-band colours, even on a band the page made dark (Strong, bold rhythm) */
html[data-cta-ground="tint"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > :is(h2, h3),
html[data-cta-ground="card"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > :is(h2, h3),
html[data-cta-ground="tint"] main > section[data-section-type="intro"][data-role="midcta"] > p,
html[data-cta-ground="card"] main > section[data-section-type="intro"][data-role="midcta"] > p { color: var(--heading); }
html[data-cta-ground="tint"] main > section[data-section-type="cta"] > p,
html[data-cta-ground="card"] main > section[data-section-type="cta"] > p { color: var(--ink); }
html[data-cta-ground="tint"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) a:not([data-button]),
html[data-cta-ground="card"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) a:not([data-button]) { color: var(--link, var(--accent)); text-decoration: none; }
html[data-cta-ground="tint"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]).lr-contrast [data-button]:not([data-button="secondary"]),
html[data-cta-ground="card"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]).lr-contrast [data-button]:not([data-button="secondary"]) { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
html[data-cta-ground="tint"][data-main-button="outline"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-button]:not([data-button="secondary"]),
html[data-cta-ground="card"][data-main-button="outline"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-button]:not([data-button="secondary"]) { background: transparent; border-color: currentColor; color: var(--heading); }
html[data-cta-ground="tint"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-button="secondary"],
html[data-cta-ground="card"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-button="secondary"] { color: var(--accent); }
html[data-cta-ground="tint"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-button][data-kind="custom"],
html[data-cta-ground="card"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-button][data-kind="custom"] { color: var(--heading); }
/* brand: everything in the brand's own ink, the theme's guaranteed pair; the main button turns inside out */
html[data-cta-ground="brand"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) > :is(h2, h3, p),
html[data-cta-ground="brand"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) a:not([data-button]) { color: var(--primary-ink); }
html[data-cta-ground="brand"] main > section[data-section-type="intro"][data-role="midcta"] > p { border-left-color: var(--primary-ink); }
html[data-cta-ground="brand"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-button]:not([data-button="secondary"]) { background: var(--primary-ink); border-color: var(--primary-ink); color: var(--primary); }
html[data-cta-ground="brand"][data-main-button="outline"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-button]:not([data-button="secondary"]) { background: transparent; border-color: currentColor; color: var(--primary-ink); }
html[data-cta-ground="brand"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-button="secondary"] { color: var(--primary-ink); border-color: currentColor; }
html[data-cta-ground="brand"][data-second-button="soft"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) [data-button="secondary"] { background: color-mix(in srgb, var(--primary-ink) 14%, transparent); border-color: transparent; }
@media (max-width: 760px) {
  html[data-cta-ground="card"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]),
  html[data-cta-ground="card"][data-boxed="on"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]),
  html[data-cta-ground="card"][data-boxed="on"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"])[data-bedge] { padding: 28px 22px; }
}

/* ===== A CALL TO ACTION WITH ITS PICTURE (every-band-has-a-picture S5, Tomek 2026-10-20) ======================
   A cta or Mid-page CTA band with a picture (theme.runtime.js marks it lr-cta-pic): the picture is a box BESIDE the
   words, never behind them, alternating sides like every band; the words and buttons stay together (.lr-words), the
   button layout applies inside that column, and a phone draws the picture first. After the band's own rules, at the
   same weight or more, so its button grid never lays the picture under the words. */
html main > section.lr-cta-pic.has-side-pic[data-section-type] { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(28px, 5vw, 72px); row-gap: 0; align-items: center; }
html main > section.lr-cta-pic.has-side-pic[data-section-type].pic-left { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
html main > section.lr-cta-pic.has-side-pic[data-section-type] > .lr-words { grid-column: 1; grid-row: 1; margin: 0; }
html main > section.lr-cta-pic.has-side-pic[data-section-type] > :is(picture, figure, .lr-sec-wrap, [data-missing-slot]) { grid-column: 2; grid-row: 1; margin: 0; }
html main > section.lr-cta-pic.has-side-pic[data-section-type].pic-left > .lr-words { grid-column: 2; }
html main > section.lr-cta-pic.has-side-pic[data-section-type].pic-left > :is(picture, figure, .lr-sec-wrap, [data-missing-slot]) { grid-column: 1; }
html main > section.lr-cta-pic.has-side-pic[data-section-type] > .lr-words [data-block="buttons"] { flex-wrap: wrap; margin-top: 1.4em; justify-content: flex-start; }
html[data-cta-layout="centred"] main > section.lr-cta-pic.has-side-pic > .lr-words [data-block="buttons"] { justify-content: center; }
html[data-cta-layout="right"] main > section.lr-cta-pic.has-side-pic > .lr-words [data-block="buttons"] { justify-content: flex-end; }
html main > section.lr-cta-pic.has-side-pic[data-section-type][data-section-type="cta"] > .lr-words > p { font-size: var(--fs-lead); }
main > section.lr-cta-pic[data-role="midcta"] > .lr-words > p { font-size: var(--fs-lead); font-family: var(--font-h); color: var(--heading); }
html[data-rhythm="bold"] main > section.lr-cta-pic[data-section-type="cta"] > .lr-words > p { color: var(--dark-muted); }
html:is([data-cta-ground="tint"], [data-cta-ground="card"]) main > section.lr-cta-pic > .lr-words > :is(h2, h3) { color: var(--heading); }
html:is([data-cta-ground="tint"], [data-cta-ground="card"]) main > section.lr-cta-pic[data-section-type="cta"] > .lr-words > p { color: var(--ink); }
html[data-cta-ground="brand"] main > section.lr-cta-pic[data-section-type] > .lr-words > :is(h2, h3, p) { color: var(--primary-ink); }
@media (max-width: 760px) {
  html main > section.lr-cta-pic.has-side-pic[data-section-type] { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  html main > section.lr-cta-pic.has-side-pic[data-section-type] > :is(picture, figure, .lr-sec-wrap, [data-missing-slot]) { order: -1; margin: 0; }
}
/* ===== THE FAQ WITH ITS PICTURE (every-band-has-a-picture S7): questions one side, the picture at the top of the
   other and kept in view (an answer opening never moves it); a phone draws it after the questions. */
html main > section.has-side-pic[data-section-type="faq"] { align-items: start; }
html main > section.has-side-pic[data-section-type="faq"] > :is(picture, figure, .lr-sec-wrap, [data-missing-slot]) { align-self: start; position: sticky; top: calc(84px + var(--lr-bn-top, 0px)); }
html main > section.has-side-pic[data-section-type="faq"] > .lr-words > [data-block="faq"] { max-width: none; }
@media (max-width: 760px) {
  html main > section.has-side-pic[data-section-type="faq"] > :is(picture, figure, .lr-sec-wrap, [data-missing-slot]) { position: static; }
}
/* ===== FIGURES THAT STAND OUT (Tomek, 2026-10-10; Design > Figures; theme.runtime.js marks the leading figure) =====
   Bigger: the figure grows in its line. Stat: it stands on its own line above its words (a chip becomes a small stat
   tile; a card heading leads with it). A figure joined to its word ("30-minute") always stays in its line. Chips keep
   their ink (they sit on light, dark and coloured bands alike); card figures wear the brand colour on the card. */
html[data-figures="bigger"] [data-lr-figure],
html[data-figures="stat"] [data-lr-figure="joined"] { font-family: var(--font-h); font-weight: 800; font-size: 1.5em; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
html[data-figures="bigger"] [data-block="cards"] [data-lr-figure],
html[data-figures="stat"] [data-block="cards"] [data-lr-figure] { color: var(--primary); }
html[data-figures="stat"] [data-block="badges"] li[data-lr-has-figure] { flex-direction: column; justify-content: center; gap: .1em; text-align: center; border-radius: var(--r-card, 14px); padding: .65em 1.15em; }
html[data-figures="stat"] [data-block="badges"] li[data-lr-has-figure="own"] img { display: none; }
html[data-figures="stat"] [data-lr-figure="own"] { display: block; font-family: var(--font-h); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html[data-figures="stat"] [data-block="badges"] [data-lr-figure="own"] { font-size: 2em; }
html[data-figures="stat"] [data-block="cards"] [data-lr-figure="own"] { font-size: 2.4em; margin-bottom: .12em; }

/* ===== COUNTED CARDS (offer bands, 2026-10-13, R7) ===============================================================
   Opt-in: only an offer page's What's inside built from its parts and a Cards extra band carry data-count. 1–3 cards
   one row, 4–8 two columns, 9 or more one card per row; a phone stacks them like every card group. A part's tag
   ("Term two", "R800") is a small chip above its title. */
@media (min-width: 900px) {
  ul[data-block="cards"][data-count="1"] { grid-template-columns: minmax(0, 1fr); }
  ul[data-block="cards"][data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ul[data-block="cards"][data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  ul[data-block="cards"][data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- three across ---------- */
/* AT MOST THREE CARDS ACROSS (Tomek, 2026-11-09). Four sit two by two in a narrower block, so each card keeps the
   width it has in a row of three (the runtime marks it data-lr-pair). A fixed-minimum grid (differentiators, compare,
   credits, branch cards) takes a third of the row as its smallest track, so it never fits a fourth. */
@media (min-width: 900px) {
  html body main ul[data-lr-pair][data-lr-pair] { width: auto; max-width: min(100%, 820px); margin-left: auto; margin-right: auto; }
}
/* ---------- end three across ---------- */
@media (min-width: 761px) {
  ul[data-block="cards"]:is([data-count="5"], [data-count="6"], [data-count="7"], [data-count="8"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ul[data-block="cards"][data-count]:not([data-count="1"], [data-count="2"], [data-count="3"], [data-count="4"], [data-count="5"], [data-count="6"], [data-count="7"], [data-count="8"]) { grid-template-columns: minmax(0, 1fr); }
}
/* A short last row keeps the card width of the rows above and sits centred (Tomek, 2026-10-18). The runtime marks the
   grid with how many cards the last row holds; the grid doubles its tracks, every card spans two, and the first card
   of the short row starts where centring puts it. Desktop only: below 900px the columns are auto-fit. */
@media (min-width: 900px) {
  html :is(ul[data-block="cards"], ul[data-block="testimonials"], ul[data-block="links"], [data-block="recent-work"] > ul, ul[data-block="team"])[data-lr-tail] { grid-template-columns: repeat(var(--cols2), minmax(0, 1fr)); }
  html :is(ul[data-block="cards"], ul[data-block="testimonials"], ul[data-block="links"], [data-block="recent-work"] > ul, ul[data-block="team"])[data-lr-tail] > * { grid-column: span 2; }
  html :is(ul[data-block="cards"], ul[data-block="testimonials"], ul[data-block="links"], [data-block="recent-work"] > ul, ul[data-block="team"])[data-lr-tail="1"] > :nth-last-child(1),
  html :is(ul[data-block="cards"], ul[data-block="testimonials"], ul[data-block="links"], [data-block="recent-work"] > ul, ul[data-block="team"])[data-lr-tail="2"] > :nth-last-child(2),
  html :is(ul[data-block="cards"], ul[data-block="testimonials"], ul[data-block="links"], [data-block="recent-work"] > ul, ul[data-block="team"])[data-lr-tail="3"] > :nth-last-child(3) { grid-column: var(--tail-start) / span 2; }
}
ul[data-block="cards"] > li > p[data-field="tag"], ol[data-block="steps"] > li > p[data-field="tag"] { align-self: flex-start; display: inline-block; margin: 0 0 .7em; padding: .2em .75em; border-radius: 999px; background: var(--soft); color: var(--heading); font-size: .78em; font-weight: 700; letter-spacing: .02em; }
html[data-cards="filled"] ul[data-block="cards"] > li > p[data-field="tag"] { background: var(--bg); }

/* ===== THE WRITER BYLINE (Tomek, 2026-10-17; migration 4130) ========================================================
   A small line, never a call to attention: the writer's 40px photo (the About page's team photo shape), "By <name>,
   <role>" and an article's "Published / Updated <day>", under the title and standfirst (a case study: under its title).
   The author box at the end is a quiet note: a small muted heading, a thin rule, a 72px photo beside the name.
   writer (html[data-writer]): absent = both | top (no end note) | end (no photo or name at the top; the date stays). */
div[data-block="byline"] { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; text-align: left; font-size: var(--fs-small); line-height: 1.35; color: inherit; }
div[data-block="byline"] > :is(img, .lr-team-pic) { flex: none; width: 40px; height: 40px; margin: 0; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 35%, transparent); }
div[data-block="byline"] > img, div[data-block="byline"] .lr-team-pic img { width: 40px; height: 40px; object-fit: cover; margin: 0; }
html:not([data-team-photo]) div[data-block="byline"] > :is(img, .lr-team-pic), html:not([data-team-photo]) div[data-block="byline"] img { border-radius: 50%; }
div[data-block="byline"] [data-field="lines"] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
div[data-block="byline"] p { margin: 0; max-width: none; font-size: inherit; }
div[data-block="byline"] strong { font-weight: 700; }
div[data-block="byline"] [data-field="date"] { opacity: .75; }
main > section[data-section-type="author_box"] { padding-top: 8px; padding-bottom: 40px; }
main > section[data-section-type="author_box"] > h2 { font-family: var(--font-b); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted); margin: 0 0 10px; }
main > section[data-section-type="author_box"] aside[data-block="author"] { max-width: 680px; padding: 18px 20px; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
main > section[data-section-type="author_box"] aside[data-block="author"]:has(> :is(img, .lr-team-pic)) { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 18px; align-items: start; }
main > section[data-section-type="author_box"] aside[data-block="author"] > :not(img, .lr-team-pic) { grid-column: 2; min-width: 0; }
main > section[data-section-type="author_box"] aside[data-block="author"] > :is(img, .lr-team-pic) { grid-column: 1; grid-row: 1 / span 12; width: 72px; height: 72px; margin: 0; }
main > section[data-section-type="author_box"] aside[data-block="author"] > img, main > section[data-section-type="author_box"] aside[data-block="author"] .lr-team-pic img { width: 100%; height: 100%; margin: 0; }
main > section[data-section-type="author_box"] aside[data-block="author"] [data-field="name"] { font-size: 1.05em; }
main > section[data-section-type="author_box"] aside[data-block="author"] [data-field="role"] { margin-bottom: .45em; font-size: .92em; }
main > section[data-section-type="author_box"] aside[data-block="author"] [data-field="credentials"] { margin-bottom: .6em; }
main > section[data-section-type="author_box"] aside[data-block="author"] [data-field="credentials"] li { font-size: .8em; padding: .15em .6em; }
main > section[data-section-type="author_box"] aside[data-block="author"] > p:not([data-field]) { font-size: .92em; color: var(--muted); margin: 0; }
@media (max-width: 639px) {
  main > section[data-section-type="author_box"] aside[data-block="author"] { padding: 16px 0; }
  main > section[data-section-type="author_box"] aside[data-block="author"]:has(> :is(img, .lr-team-pic)) { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; }
  main > section[data-section-type="author_box"] aside[data-block="author"] > :is(img, .lr-team-pic) { width: 56px; height: 56px; }
}
html:is([data-writer="top"], [data-writer="none"]) main > section[data-section-type="author_box"] { display: none; }
html:is([data-writer="end"], [data-writer="none"]) div[data-block="byline"] > :is(img, .lr-team-pic), html:is([data-writer="end"], [data-writer="none"]) div[data-block="byline"] [data-field="by"] { display: none; }
html:is([data-writer="end"], [data-writer="none"]) div[data-block="byline"]:not(:has([data-field="date"])) { display: none; }
html:is([data-writer="end"], [data-writer="none"]) p[data-block="byline"] { display: none; }
/* the photo shows ONCE (Tomek, 2026-10-18): with Both, in the note at the end and not beside the name at the top; at the top
   only when the note is off (writer = top) */
html:not([data-writer="top"]) div[data-block="byline"] > :is(img, .lr-team-pic) { display: none; }
/* writerPhoto (html[data-writer-photo]): absent = with | without — the name and the note close up, as with no photo on file */
html[data-writer-photo="without"] div[data-block="byline"] > :is(img, .lr-team-pic) { display: none; }
html[data-writer-photo="without"] main > section[data-section-type="author_box"] aside[data-block="author"] { display: block; }
html[data-writer-photo="without"] main > section[data-section-type="author_box"] aside[data-block="author"] > :is(img, .lr-team-pic) { display: none; }

/* ===== THE ANSWER PASSAGE FOLLOWS THE CARDS (Tomek, 2026-10-18) =====================================================
   No setting of its own (Tomek chose this over five looks of its own): the answer is drawn as a card in the site's chosen
   card look (html[data-cards]: line | shadow | tint — fill, outline or shadow, and the card corners), exactly as the cards
   are: no side line of its own (Tomek, 2026-10-18: no brand line down the side). The card sets its own ink, so it reads
   the same on a light, soft or dark band. A page with no Design (no data-cards) keeps the plain accent line above. CSS only. */
html[data-cards] [data-block="answer"] { color: var(--ink); border-left: 0; border-radius: var(--r-card); padding: 24px 28px; }
html[data-cards="line"] [data-block="answer"] { background: var(--card-fill); border: 1.5px solid var(--line); }
html[data-cards="shadow"] [data-block="answer"] { background: var(--card-fill); box-shadow: 0 14px 34px -10px rgb(0 0 0 / .3); }
html[data-cards="tint"] [data-block="answer"] { background: var(--card-tint); }
html[data-cards="plain"] [data-block="answer"] { background: transparent; padding-left: 0; padding-right: 0; }
html[data-cards] [data-block="answer"] a { color: var(--link, var(--accent)); }
@media (max-width: 640px) {
  html[data-cards] [data-block="answer"] { padding: 18px; }
}

/* ---------- image credits ---------- */
/* One card per photograph, in the site's card style. auto-fill: a lone photo keeps a card's width (Tomek, 2026-11-02). */
ul[data-block="credits"] { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 240px), calc((100% - 2 * var(--gap)) / 3)), 1fr)); gap: var(--gap); margin: 1.6em 0 0; }
ul[data-block="credits"] > li { padding: 26px; border-radius: var(--r-card); background: var(--bg); display: flex; flex-direction: column; overflow-wrap: anywhere; }
ul[data-block="credits"] > li > img { margin: -26px -26px 20px; width: calc(100% + 52px); max-width: none; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-card) var(--r-card) 0 0; }
ul[data-block="credits"] > li > p { margin: 0; }
ul[data-block="credits"] > li > p + p { margin-top: .5em; color: var(--muted); font-size: var(--fs-small, .9em); }
html:is([data-cards="bordered"], [data-cards="edge"]) ul[data-block="credits"] > li { border: 1px solid var(--line); }
html[data-cards="edge"] ul[data-block="credits"] > li { border-left: 5px solid var(--primary); }
html[data-cards="raised"] ul[data-block="credits"] > li { box-shadow: var(--shadow); }
html[data-cards="filled"] ul[data-block="credits"] > li { background: var(--soft); }
html[data-rhythm="soft"] main > section:nth-of-type(even) ul[data-block="credits"] > li { background: var(--bg); }
html[data-cards="line"] ul[data-block="credits"] > li { background: var(--card-fill); border: 1.5px solid var(--line); }
html[data-cards="shadow"] ul[data-block="credits"] > li { background: var(--card-fill); box-shadow: 0 14px 34px -10px rgb(0 0 0 / .3); }
html[data-cards="tint"] ul[data-block="credits"] > li { background: var(--card-tint); }
html[data-cards="plain"] ul[data-block="credits"] > li { background: transparent; padding: 0; }
html[data-cards="plain"] ul[data-block="credits"] > li > img { margin: 0 0 14px; width: 100%; border-radius: var(--r-img); }
/* ---------- end image credits ---------- */

/* ---------- band backgrounds + finish ---------- */
/* BAND BACKGROUNDS, THE FINISH, PICTURE GLOW, THE BUTTON ON DARK GROUNDS AND CARDS THAT LIFT (spec
   2026-11-09-theme-emphasis-gradient-and-finish). design.css makes every colour here from the look's six (fromBrand.ts
   bandDecl): --grad-<ground> only for a Gradient design and only where both ends stay readable, --glow-cta only for the
   Glow finish (the white main button on a dark ground is design.css's own rule).
   1. Each coloured ground names its gradient in --lr-grad beside its --lr-ground, at the same weight and in the same order
      as the rules that colour it, so whichever colour wins also picks the gradient (a call to action on Brand never takes
      the pale band's). White bands name none and stay white. A raised card is a card: none. */
html[data-bands="two"] main > section.lr-band.lr-b1, html[data-bands="accent"] main > section.lr-band.lr-b1, html[data-bands="three"] main > section.lr-band.lr-c1 { --lr-grad: var(--grad-soft); }
html[data-bands="three"] main > section.lr-band.lr-c2 { --lr-grad: var(--grad-tonal); }
html[data-bands="accent"] main > section.lr-band.lr-contrast { --lr-grad: var(--grad-strong); --lr-glow: var(--counter); }
main > section.lr-shape:is([data-lr-layout="title"], [data-lr-layout="flat"]), main > section[data-section-type="hero"]:not(.lr-shape):not(.has-pic),
html[data-rhythm="bold"] main > section:is([data-section-type="testimonial"], [data-section-type="cta"]):not(.lr-band) { --lr-grad: var(--grad-hero); --lr-glow: var(--counter); }
html[data-cta-ground="tint"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) { --lr-grad: var(--grad-soft); --lr-glow: transparent; }
html[data-cta-ground="card"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) { --lr-grad: none; --lr-glow: transparent; }
html[data-cta-ground="brand"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]) { --lr-grad: var(--grad-cta); --lr-glow: var(--glow-cta, var(--counter)); }
/* …and one rule draws it, left to right, on a phone too (never a fixed attachment). The band's shaped edge copies its
   background (background: inherit), so a slanted or wavy join carries the gradient. */
html[data-band-grad="gradient"] main > section:is(.lr-band, [data-section-type="cta"], [data-section-type="intro"][data-role="midcta"], [data-section-type="hero"], [data-section-type="testimonial"]) { background-image: var(--lr-grad, none); }
/* 2. The finish: Glow. The main button's hover and focus get a soft Counterpoint halo (only the shadow is animated)… */
html[data-finish="glow"] [data-button]:not([data-button="secondary"]) { transition: transform .15s, filter .15s, box-shadow .25s ease; }
html[data-finish="glow"] [data-button]:not([data-button="secondary"]):is(:hover, :focus-visible) {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--counter) 70%, transparent), 0 6px 26px -2px color-mix(in srgb, var(--counter) 75%, transparent); }
/* …and a soft light pools in the top-right corner of the Strong band, the call to action on Brand and a title hero (the
   colour each names in --lr-glow, transparent on the light call-to-action grounds). On its own ::after; a band whose
   ::after draws its box overlay takes the light as a background layer instead, and its edge strip copies only the gradient. */
html[data-finish="glow"][data-bands="accent"] main > section.lr-band.lr-contrast:not([data-bov]),
html[data-finish="glow"][data-cta-ground="brand"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]):not([data-bov]) { isolation: isolate; }
html[data-finish="glow"][data-bands="accent"] main > section.lr-band.lr-contrast:not([data-bov])::after,
html[data-finish="glow"][data-cta-ground="brand"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"]):not([data-bov])::after,
html[data-finish="glow"] main > section[data-section-type="hero"]:is(.lr-shape:is([data-lr-layout="title"], [data-lr-layout="flat"]), :not(.lr-shape):not(.has-pic))::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(ellipse 55% 75% at 100% 0%, color-mix(in srgb, var(--lr-glow, transparent) 34%, transparent), transparent 70%); }
html[data-finish="glow"][data-bands="accent"] main > section.lr-band.lr-contrast[data-bov],
html[data-finish="glow"][data-cta-ground="brand"] main > section:is([data-section-type="cta"], [data-section-type="intro"][data-role="midcta"])[data-bov] {
  background-image: radial-gradient(ellipse 55% 75% at 100% 0%, color-mix(in srgb, var(--lr-glow, transparent) 34%, transparent), transparent 70%), var(--lr-grad, none); }
html[data-finish="glow"][data-edge]:not([data-edge="straight"]):not([data-boxed="on"]) main > section.lr-band:not(.lr-first-band)[data-bov]:is(.lr-contrast, [data-section-type="cta"], [data-section-type="intro"][data-role="midcta"])::before { background-image: var(--lr-grad, none); }
/* 3. Picture glow, set per place like its edge and overlay (never part of the finish): a soft Counterpoint halo round team
   and author photos, and round each card that carries a picture on the cards its own "which" names (the picture runs to
   the card's edge, so the halo is the card's). Section and hero pictures glow from photo-style.css. */
html[data-team-glow="glow"] :is(ul[data-block="team"], [data-block="author"], [data-block="byline"]) img {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--counter) 22%, transparent), 0 10px 44px 4px color-mix(in srgb, var(--counter) 55%, transparent); }
html main ul[data-block="cards"] > li[data-cglow]:has(img:not([width="48"])) {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--counter) 22%, transparent), 0 10px 44px 4px color-mix(in srgb, var(--counter) 55%, transparent); }
/* 4. The main button on a dark ground (automatic, white with Anchor words where Brand does not read on the Anchor) is
   drawn by design.css (fromBrand.ts darkButtonCss), only for a design that needs it, so no other site's buttons move. */
/* 5. Cards that are links lift on hover (house, no setting): 2px up, the shadow a little larger; reduced motion keeps
   the shadow only. */
html[data-cards="shadow"] ul[data-block="cards"] > li:has(a) { transition: transform .25s ease, box-shadow .25s ease; }
html[data-cards="shadow"] ul[data-block="cards"] > li:has(a):hover { transform: translateY(-2px); box-shadow: 0 20px 40px -10px rgb(0 0 0 / .34); }
@media (prefers-reduced-motion: reduce) { html[data-cards="shadow"] ul[data-block="cards"] > li:has(a):hover { transform: none; } }
/* ---------- end band backgrounds + finish ---------- */
/* ===== CONTACT DETAILS BLOCK (contact page part 1, 2026-10-07; replaces slice G) ===================================
   The contact page's `<div data-contact-details>` (bundleV2/html.ts contactDetailsHtml), the approved knobs mock-up:
   the routes (a lead card, the second route outlined, then rows), a side column (hours, where, reply time) and, at
   several branches, a link per branch. The design's `contactLayout` (html[data-contact-layout]) lays the routes out as
   ways (absent, the default) or tiles. Every colour, font and corner is a Design variable; long values wrap inside
   their card. It is not a section or a data-block, so no other rule reaches it. EVERY rule here is scoped under
   [data-contact-details]. This block stays LAST in the file: its guard reads from the marker to the end.
   Parts 2-3 (2026-10-08, the approved Editor mock-up): the side column is a soft-tinted panel. WITH a map drawn
   (data-contact-map="yes") it stretches to the routes' height and the map fills it; WITHOUT one the block is one column
   (the lead full width, the rest two to a row) and the facts are one tinted band. Tiles size by data-route-count. On a
   phone the facts always stack, the map full width at 16:10. The Editor's greyed routes ([data-absent]) never ship. */
[data-contact-details] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: var(--container); margin: 0 auto; padding: 48px 24px; color: var(--ink); align-items: start; }
[data-contact-details][data-contact-side] { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
[data-contact-details] > [data-contact-branches], [data-contact-details] > [data-contact-empty] { grid-column: 1 / -1; }
[data-contact-details] [data-contact-routes] { display: grid; gap: 12px; align-content: start; min-width: 0; }
[data-contact-details] [data-route] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); color: var(--ink); min-width: 0; }
html[data-cards="edge"] [data-contact-details] [data-route]:not([data-role="lead"]) { border-left: 5px solid var(--primary); }
[data-contact-details] [data-route] > [data-icon] { grid-column: 1; grid-row: 1 / span 3; width: 24px; height: 24px; color: var(--link, var(--accent)); }
[data-contact-details] [data-route] > p { grid-column: 2; margin: 0; min-width: 0; }
[data-contact-details] [data-route-title] { font-family: var(--font-h); font-weight: var(--h-weight); color: var(--heading); line-height: 1.25; }
[data-contact-details] [data-route-value] { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--heading); }
[data-contact-details] [data-route-value] a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
[data-contact-details] [data-route-helper] { font-size: .88rem; color: var(--muted); }
[data-contact-details] [data-route-go] { grid-column: 3; grid-row: 1 / span 3; font-weight: 600; color: var(--link, var(--accent)); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
[data-contact-details] [data-route][data-role="second"] { border: 2px solid var(--primary); }
[data-contact-details] [data-route][data-role="lead"] { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px; background: var(--dark); color: var(--dark-ink); border-color: var(--dark); }
[data-contact-details] [data-route][data-role="lead"] > [data-icon] { width: 28px; height: 28px; color: var(--dark-ink); }
[data-contact-details] [data-route][data-role="lead"] [data-route-title] { font-size: 1.35rem; color: var(--dark-ink); }
[data-contact-details] [data-route][data-role="lead"] [data-route-value] { font-size: 1.15rem; color: var(--dark-ink); }
[data-contact-details] [data-route][data-role="lead"] [data-route-helper] { color: var(--dark-muted); }
[data-contact-details] [data-route][data-role="lead"] [data-route-go] { margin-top: 12px; display: inline-flex; align-items: center; min-height: 44px; padding: .75em 1.3em; border-radius: var(--r-btn); background: var(--primary); color: var(--primary-ink); font-family: var(--font-b); font-weight: 700; text-decoration: none; }
[data-contact-details] [data-route-go][data-go="whatsapp"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); text-decoration: none; padding: .5em .9em; border-radius: var(--r-btn); }
[data-contact-details] [data-contact-side] { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 22px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-card); }
[data-contact-details] [data-side] { margin: 0; min-width: 0; }
[data-contact-details] [data-label] { margin: 0 0 6px; font-family: var(--font-b); font-size: .82rem; font-weight: 600; color: var(--muted); }
[data-contact-details] [data-hours] { list-style: none; margin: 0; padding: 0; font-size: .95rem; color: var(--ink); font-variant-numeric: tabular-nums; }
[data-contact-details] [data-hours] li { padding: 6px 0; border-bottom: 1px solid var(--line); }
[data-contact-details] [data-hours] li:last-child { border-bottom: 0; }
[data-contact-details] address { font-style: normal; color: var(--ink); overflow-wrap: anywhere; }
[data-contact-details] [data-side="where"] [data-link="directions"] { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--link, var(--accent)); }
[data-contact-details] [data-side="where"] p { margin: 0; }
[data-contact-details] [data-areas] { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
[data-contact-details] [data-areas] li { padding: 4px 12px; border-radius: var(--r-btn); background: var(--soft); border: 1px solid var(--line); font-size: .92rem; }
[data-contact-details] [data-map] { margin-top: 10px; aspect-ratio: 16 / 10; border-radius: var(--r-img, var(--r-card)); overflow: hidden; }
[data-contact-details] [data-map] iframe { display: block; width: 100%; height: 100%; border: 0; }
[data-contact-details][data-contact-map="yes"] { align-items: stretch; }
[data-contact-details][data-contact-map="yes"] [data-side="where"] { flex: 1; display: flex; flex-direction: column; }
[data-contact-details][data-contact-map="yes"] [data-side="where"] [data-link="directions"] { align-self: flex-start; }
[data-contact-details][data-contact-map="yes"] [data-map] { flex: 1; aspect-ratio: auto; min-height: 170px; }
[data-contact-details][data-contact-map="no"] { grid-template-columns: minmax(0, 1fr); }
[data-contact-details][data-contact-map="no"] [data-contact-routes] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-contact-details][data-contact-map="no"] [data-contact-routes] > [data-role="lead"] { grid-column: 1 / -1; }
[data-contact-details][data-contact-map="no"] [data-contact-side] { flex-direction: row; flex-wrap: wrap; gap: 18px 40px; align-items: flex-start; }
[data-contact-details][data-contact-map="no"] [data-contact-side] > * { flex: 1 1 200px; }
[data-contact-details][data-contact-map="no"] [data-map] { display: none; }
[data-contact-details] > [data-enquiry], [data-contact-details] > [data-enquiry-inline] { grid-column: 1 / -1; }
[data-contact-details] [data-route][data-absent] { border-style: dashed; background: var(--bg); color: var(--muted); }
[data-contact-details] [data-route][data-absent] > [data-icon] { color: var(--muted); }
[data-contact-details] [data-route][data-absent] [data-route-title] { color: var(--muted); }
[data-contact-details] [data-absent-why] { font-size: .85rem; color: var(--muted); }
[data-contact-details] [data-absent-go] { font-weight: 600; color: var(--link, var(--accent)); }
[data-contact-details] [data-contact-branches] h2 { margin: 0 0 6px; }
[data-contact-details] [data-contact-branches] > p { margin: 0 0 14px; color: var(--muted); }
[data-contact-details] [data-branch-list] { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 230px), calc((100% - 24px) / 3)), 1fr)); gap: 12px; }
[data-contact-details] [data-branch-link] { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 13px 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); color: var(--ink); text-decoration: none; min-width: 0; }
[data-contact-details] [data-branch-link] > [data-icon] { grid-row: 1 / span 3; width: 22px; height: 22px; color: var(--link, var(--accent)); }
[data-contact-details] [data-branch-link] > span { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
[data-contact-details] [data-branch-link]:has([data-branch-primary]) { border: 2px solid var(--primary); }
[data-contact-details] [data-branch-name] { font-family: var(--font-h); font-weight: var(--h-weight); color: var(--heading); }
[data-contact-details] [data-branch-primary] { justify-self: start; font-size: .78rem; font-weight: 600; padding: 2px 9px; border-radius: var(--r-btn); background: var(--soft); color: var(--muted); }
[data-contact-details] [data-branch-link] [data-contact-word="contact_branch_link"] { font-size: .88rem; color: var(--link, var(--accent)); font-weight: 600; }
[data-contact-details] [data-branch] { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--bg); min-width: 0; }
[data-contact-details] [data-branch] > [data-branch-name] { margin: 0; }
[data-contact-details] [data-branch] > [data-branch-primary] { margin: 0; }
[data-contact-details] [data-field] { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--heading); }
[data-contact-details] [data-field] a { color: var(--link, var(--accent)); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
[data-contact-details] [data-field="phone"] a, [data-contact-details] [data-field="email"] a { font-weight: 600; }
[data-contact-details] [data-field] [data-label] { margin: 0; }
[data-contact-details] [data-contact-empty] { padding: 20px; border: 2px dashed var(--line); border-radius: var(--r-card); color: var(--muted); }
[data-contact-details] [data-contact-empty] p { margin: 0; }
html[data-contact-layout="tiles"] [data-contact-details] { grid-template-columns: minmax(0, 1fr); }
html[data-contact-layout="tiles"] [data-contact-details] [data-contact-routes] { display: flex; flex-wrap: wrap; gap: 14px; }
html[data-contact-layout="tiles"] [data-contact-details] [data-route] { flex: 3 1 190px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 20px; }
html[data-contact-layout="tiles"] [data-contact-details] [data-route][data-role="lead"] { flex: 4 1 250px; }
html[data-contact-layout="tiles"] [data-contact-details] [data-route] > [data-icon] { width: 28px; height: 28px; }
html[data-contact-layout="tiles"] [data-contact-details] [data-route-go] { margin-top: auto; }
html[data-contact-layout="tiles"] [data-contact-details] [data-contact-side] { flex-direction: row; flex-wrap: wrap; gap: 18px 40px; align-items: flex-start; }
html[data-contact-layout="tiles"] [data-contact-details] [data-contact-side] > * { flex: 1 1 200px; }
html[data-contact-layout="tiles"] [data-contact-details] [data-route-count="5"] > [data-route][data-role="lead"], html[data-contact-layout="tiles"] [data-contact-details] [data-route-count="6"] > [data-route][data-role="lead"], html[data-contact-layout="tiles"] [data-contact-details] [data-route-count="7"] > [data-route][data-role="lead"], html[data-contact-layout="tiles"] [data-contact-details] [data-route-count="8"] > [data-route][data-role="lead"] { flex: 1 1 100%; }
html[data-contact-layout="tiles"] [data-contact-details] [data-route-count="5"] > [data-route]:not([data-role="lead"]), html[data-contact-layout="tiles"] [data-contact-details] [data-route-count="6"] > [data-route]:not([data-role="lead"]), html[data-contact-layout="tiles"] [data-contact-details] [data-route-count="7"] > [data-route]:not([data-role="lead"]), html[data-contact-layout="tiles"] [data-contact-details] [data-route-count="8"] > [data-route]:not([data-role="lead"]) { flex: 1 1 0; min-width: 150px; }
/* The enquiry form (contact page parts 2-3, landing e): the "Prefer to write?" route is a row in Ways and a tile in Tiles,
   dashed until its form is open; the form is the block's own full-width row after the routes and the side panel (a
   direct child of the details, so an open form never stretches the side panel or its map), closed until clicked. The
   name and the email sit side by side, stacked on a phone. Theme variables only. */
[data-contact-details] [data-route="write"] { cursor: pointer; border-style: dashed; }
[data-contact-details] [data-route="write"][data-open] { border-style: solid; border-color: var(--primary); }
[data-contact-details] button[data-route-go] { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; color: var(--link, var(--accent)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: start; }
[data-contact-details] [data-enquiry] { display: grid; gap: 12px; padding: 22px; border: 2px solid var(--primary); border-radius: var(--r-card); background: var(--bg); color: var(--ink); min-width: 0; }
[data-contact-details] [data-enquiry][hidden], [data-contact-details] [data-enquiry] [hidden] { display: none; }
[data-contact-details] [data-enquiry] h3 { margin: 0; font-family: var(--font-h); font-weight: var(--h-weight); color: var(--heading); font-size: var(--fs-h3); }
[data-contact-details] [data-enquiry-field] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
[data-contact-details] [data-enquiry-pair] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
[data-contact-details] [data-enquiry] label { font-family: var(--font-b); font-size: .88rem; font-weight: 600; color: var(--muted); }
[data-contact-details] [data-enquiry] select, [data-contact-details] [data-enquiry] input, [data-contact-details] [data-enquiry] textarea, [data-contact-details] [data-enquiry-select] { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--bg); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-btn); min-width: 0; }
[data-contact-details] [data-enquiry] textarea { resize: vertical; min-height: 6em; }
[data-contact-details] [data-enquiry] select:focus, [data-contact-details] [data-enquiry] input:focus, [data-contact-details] [data-enquiry] textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
[data-contact-details] [data-enquiry-options] { list-style: none; margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-btn); font-size: .9rem; color: var(--muted); }
[data-contact-details] [data-enquiry-options] [data-enquiry-group] { font-weight: 600; color: var(--heading); }
[data-contact-details] [data-enquiry-trap] { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
[data-contact-details] [data-enquiry-privacy] { margin: 0; font-size: .85rem; color: var(--muted); }
[data-contact-details] [data-enquiry-privacy] a { color: var(--link, var(--accent)); }
[data-contact-details] [data-enquiry-send] { justify-self: start; min-height: 44px; padding: .75em 1.4em; border: 0; border-radius: var(--r-btn); background: var(--primary); color: var(--primary-ink); font-family: var(--font-b); font-weight: 700; cursor: pointer; }
[data-contact-details] [data-enquiry-send][disabled] { opacity: .6; cursor: progress; }
[data-contact-details] [data-enquiry-error] { margin: 0; color: var(--heading); font-weight: 600; }
[data-contact-details] [data-enquiry-error]:empty { padding: 0; background: none; }
/* The phone field (client enquiries, landing g): "(optional)" quieter than its word, "*" for a required one. */
[data-contact-details] [data-enquiry-optional] { font-weight: 400; }
[data-contact-details] [data-enquiry-required] { color: var(--heading); }
/* The success dialog (client enquiries, landing g; Tomek 2026-10-08): a native <dialog> opened modal (the top layer, above
   the sticky header), dimmed behind. The box sets its own surface and ink from the site's variables, so a dark band around
   the block never reaches it; the tick is the accent, the button the form's own Send look. In the Editor it is drawn in the
   page, open (data-enquiry-inline). */
[data-contact-details] [data-enquiry-done] { padding: 0; margin: auto; border: 0; background: transparent; color: var(--ink); width: min(420px, calc(100vw - 32px)); max-width: 100%; overflow: visible; }
[data-contact-details] [data-enquiry-done]::backdrop { background: color-mix(in srgb, var(--dark) 55%, transparent); }
[data-contact-details] [data-enquiry-inline] { justify-self: center; margin: 0; }
[data-contact-details] [data-enquiry-done-box] { display: grid; justify-items: center; gap: 10px; padding: 26px 24px 22px; text-align: center; background: var(--bg); color: var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow); font-family: var(--font-b); }
[data-contact-details] [data-enquiry-inline] [data-enquiry-done-box] { border: 1px solid var(--line); }
[data-contact-details] [data-enquiry-tick] { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
[data-contact-details] [data-enquiry-tick] svg { width: 26px; height: 26px; }
[data-contact-details] [data-enquiry-done-box] h3 { margin: 4px 0 0; font-family: var(--font-h); font-weight: var(--h-weight); color: var(--heading); font-size: var(--fs-h3); }
[data-contact-details] [data-enquiry-done-box] p { margin: 0; color: var(--ink); }
[data-contact-details] [data-enquiry-reply] { color: var(--muted); }
[data-contact-details] [data-enquiry-close] { margin-top: 6px; min-height: 44px; padding: .65em 1.6em; border: 0; border-radius: var(--r-btn); background: var(--primary); color: var(--primary-ink); font-family: var(--font-b); font-weight: 700; cursor: pointer; }
[data-contact-details] [data-enquiry-close]:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (max-width: 760px) {
  [data-contact-details][data-contact-side] { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  [data-contact-details] { padding: 28px 16px; }
  [data-contact-details] [data-route][data-role="lead"] [data-route-go] { width: 100%; justify-content: center; }
  [data-contact-details][data-contact-map="yes"] [data-map] { min-height: 220px; }
}
@media (max-width: 640px) {
  html[data-contact-layout="tiles"] [data-contact-details] [data-route] { flex-basis: 100%; }
  [data-contact-details] [data-contact-side], [data-contact-details][data-contact-map="no"] [data-contact-side] { flex-direction: column; flex-wrap: nowrap; }
  html[data-contact-layout="tiles"] [data-contact-details] [data-contact-side] { flex-direction: column; flex-wrap: nowrap; }
  [data-contact-details] [data-contact-side] > *, html[data-contact-layout="tiles"] [data-contact-details] [data-contact-side] > * { flex: 0 0 auto; width: 100%; }
  [data-contact-details][data-contact-map="yes"] [data-map] { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 10; min-height: 0; }
  [data-contact-details][data-contact-map="no"] [data-contact-routes] { grid-template-columns: minmax(0, 1fr); }
  html[data-contact-layout="tiles"] [data-contact-details] [data-contact-routes] > [data-route]:not([data-role="lead"]) { flex-basis: 100%; }
  [data-contact-details] [data-route] { grid-template-columns: auto minmax(0, 1fr); }
  [data-contact-details] [data-route] > [data-route-go] { grid-column: 2; grid-row: auto; justify-self: start; }
  [data-contact-details] [data-enquiry-pair] { grid-template-columns: minmax(0, 1fr); }
}