/* NovaNode Web — base.css
Structure only. Every colour, typeface and shape comes from a theme file
via custom properties. Blocks never use literal colours.
A theme MUST define:
--ground --surface --ink --muted --line --accent --on-accent
--font-display --font-body --radius --radius-button --measure
Optional (fall back to sensible values):
--border-w --link-underline --card-gap
*/
/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* ---------- structural tokens ---------- */
:root {
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
--space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 7rem;
--border-w: 1px;
--card-gap: var(--space-5);
--page-narrow: 30rem; /* link pages */
--page-wide: 72rem; /* sites */
--gutter: clamp(1.25rem, 5vw, 3.5rem);
--tap: 2.75rem; /* 44px minimum target */
}
/* ---------- page frame ---------- */
body {
background: var(--ground);
color: var(--ink);
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.w-page { display: flex; flex-direction: column; min-height: 100vh; }
.w-main { flex: 1 0 auto; width: 100%; margin: 0 auto; padding: 0 var(--gutter); }
.w-layout-narrow .w-main { max-width: calc(var(--page-narrow) + 2 * var(--gutter)); }
.w-layout-wide .w-main { max-width: calc(var(--page-wide) + 2 * var(--gutter)); }
.w-block { padding-block: var(--space-7); }
.w-block + .w-block { padding-top: 0; }
.w-block-tight { padding-block: var(--space-5); }
.w-block-spacious { padding-block: var(--space-8); }
/* full-bleed sections carry their own background and break out of the gutter */
.w-block-band { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); background: var(--surface); }
.w-block + .w-block-band, .w-block-band + .w-block { padding-top: var(--space-7); }
/* ---------- type scale (Elements of Typographic Style, ~1.25 ratio, fluid) ---------- */
.w-h1, h1 { font-family: var(--font-display); font-weight: var(--weight-display, 500); font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); line-height: 1.02; letter-spacing: var(--tracking-display, -0.02em); max-width: 22ch; text-wrap: balance; }
.w-h2, h2 { font-family: var(--font-display); font-weight: var(--weight-display, 500); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.12; letter-spacing: var(--tracking-display, -0.015em); max-width: 28ch; text-wrap: balance; }
.w-h3, h3 { font-family: var(--font-display); font-weight: var(--weight-display, 500); font-size: 1.25rem; line-height: 1.25; }
p, li, dd, td, th, label { max-width: var(--measure); }
.w-lede { font-size: 1.25rem; line-height: 1.45; color: var(--ink); }
.w-muted { color: var(--muted); }
.w-small { font-size: 0.9375rem; }
.w-prose > * + * { margin-top: var(--space-4); }
.w-prose h2 { margin-top: var(--space-6); }
.w-prose h3 { margin-top: var(--space-5); }
.w-prose a { text-decoration: underline; text-decoration-thickness: var(--link-underline, 1px); text-underline-offset: 0.15em; }
.w-prose a:hover { color: var(--accent); }
.w-prose ul { list-style: disc; padding-left: 1.25em; }
.w-prose ol { list-style: decimal; padding-left: 1.25em; }
.w-prose strong { font-weight: 600; }
/* ---------- nav ---------- */
.w-nav { width: 100%; margin: 0 auto; padding: var(--space-4) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.w-layout-narrow .w-nav { max-width: calc(var(--page-narrow) + 2 * var(--gutter)); }
.w-layout-wide .w-nav { max-width: calc(var(--page-wide) + 2 * var(--gutter)); }
.w-brand { font-family: var(--font-display); font-weight: var(--weight-display, 500); font-size: 1.25rem; text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }
.w-menu { display: flex; gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 52rem) { .w-nav { flex-wrap: nowrap; align-items: center; } .w-menu { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: var(--space-2); } .w-menu::-webkit-scrollbar { display: none; } .w-menu a { white-space: nowrap; } .w-brand { flex: none; } .w-lang { flex: none; } }
.w-menu a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3); text-decoration: none; border-radius: var(--radius-button); }
.w-menu a:hover { background: var(--surface); }
.w-menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: var(--link-underline, 1.5px); text-underline-offset: 0.3em; }
.w-lang { display: flex; gap: var(--space-1); }
.w-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); text-decoration: none; border-radius: var(--radius-button); font-size: 0.9375rem; color: var(--muted); }
.w-lang a:hover { background: var(--surface); }
.w-lang a[aria-current="true"] { color: var(--ink); font-weight: 600; }
/* ---------- identity (link pages) ---------- */
.w-identity { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.w-avatar { width: 6rem; height: 6rem; border-radius: var(--radius-avatar, 50%); object-fit: cover; background: var(--surface); }
.w-avatar-initials { display: grid; place-items: center; font-family: var(--font-display); font-size: 2rem; color: var(--muted); }
.w-tagline { font-size: 1.125rem; color: var(--muted); }
.w-credit { font-size: 0.875rem; color: var(--muted); }
.w-credit a { text-decoration: underline; text-underline-offset: 0.15em; }
/* ---------- links (the linktree block) ---------- */
.w-links { display: flex; flex-direction: column; gap: var(--space-3); }
.w-layout-wide .w-links { max-width: 36rem; }
.w-link { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-4); min-height: 3.5rem; padding: var(--space-3) var(--space-5); text-decoration: none; border: var(--border-w) solid var(--line-strong, var(--ink)); border-radius: var(--radius-button); background: var(--surface); transition: background .12s, border-color .12s; }
.w-link:hover { background: var(--ground); border-color: var(--accent); }
.w-link-label { font-weight: 600; }
.w-link-kicker { display: block; font-size: 0.875rem; color: var(--muted); margin-bottom: 1px; }
.w-link-meta { font-size: 0.9375rem; color: var(--muted); text-align: right; }
.w-link-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.w-link-primary:hover { background: var(--accent-hover, var(--accent)); color: var(--on-accent); }
.w-link-primary .w-link-kicker, .w-link-primary .w-link-meta { color: var(--on-accent); opacity: .8; }
.w-link-featured { min-height: 5rem; }
/* ---------- actions & buttons ---------- */
.w-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.w-button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 var(--space-5); border-radius: var(--radius-button); text-decoration: none; font-weight: 600; border: var(--border-w) solid var(--accent); background: var(--accent); color: var(--on-accent); transition: background .12s; }
.w-button:hover { background: var(--accent-hover, var(--accent)); border-color: var(--accent-hover, var(--accent)); }
.w-button-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong, var(--ink)); }
.w-button-secondary:hover { background: var(--surface); border-color: var(--accent); }
.w-textlink { text-decoration: underline; text-decoration-thickness: var(--link-underline, 1px); text-underline-offset: 0.2em; font-weight: 600; }
.w-textlink:hover { color: var(--accent); }
/* ---------- hero ---------- */
.w-hero { display: grid; gap: var(--space-5); align-content: start; }
.w-hero-copy { display: grid; gap: var(--space-5); }
.w-hero .w-lede { max-width: var(--measure); }
@media (min-width: 52rem) {
.w-hero-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-7); align-items: end; }
}
/* ---------- text with heading, optional two-column ---------- */
.w-text { display: grid; gap: var(--space-4); }
@media (min-width: 52rem) {
.w-text-columns { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-7); }
.w-text-columns > h2 { max-width: 16ch; }
}
/* ---------- cards / publications / services ---------- */
.w-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-5); }
.w-cards { display: grid; gap: var(--card-gap); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.w-card { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; }
.w-card figure { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.w-card img { width: 100%; height: 100%; object-fit: cover; }
.w-card h3 { text-wrap: balance; }
.w-card p { color: var(--muted); font-size: 0.9375rem; }
.w-card-source { font-size: 0.875rem; color: var(--muted); }
a.w-card:hover h3 { text-decoration: underline; text-decoration-thickness: var(--link-underline, 1px); text-underline-offset: 0.15em; }
/* ---------- gallery ---------- */
.w-gallery { display: grid; gap: var(--space-2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.w-gallery figure { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.w-gallery img { width: 100%; height: 100%; object-fit: cover; }
.w-gallery-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 40rem) { .w-gallery-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- placeholder image (editor + samples only; renderer emits real ![]()
) ---------- */
.w-img-placeholder { width: 100%; height: 100%; background: var(--surface); display: grid; place-items: end start; padding: var(--space-3); color: var(--muted); font-size: 0.875rem; }
/* ---------- hours ---------- */
.w-hours { max-width: 28rem; }
.w-hours th, .w-hours td { padding: var(--space-3) 0; border-bottom: var(--border-w) solid var(--line); text-align: left; font-weight: 400; vertical-align: top; }
.w-hours th { color: var(--muted); width: 40%; }
.w-hours td { text-align: right; }
.w-hours tr[data-today] th, .w-hours tr[data-today] td { font-weight: 600; color: var(--ink); }
.w-hours-note { margin-top: var(--space-3); color: var(--muted); font-size: 0.9375rem; }
/* ---------- map + address ---------- */
.w-map { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .w-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.w-map figure { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.w-map address { font-style: normal; line-height: 1.6; display: grid; gap: var(--space-3); justify-items: start; }
/* ---------- contact form ---------- */
.w-form { display: grid; gap: var(--space-4); max-width: 34rem; }
h2 + .w-form, .w-lede + .w-form { margin-top: var(--space-5); }
.w-field { display: grid; gap: var(--space-2); }
.w-field label { font-weight: 600; font-size: 0.9375rem; }
.w-field input, .w-field textarea, .w-field select { width: 100%; min-height: 3rem; padding: var(--space-3) var(--space-4); border: var(--border-w) solid var(--line-strong, var(--ink)); border-radius: var(--radius); background: var(--surface); }
.w-field textarea { min-height: 9rem; resize: vertical; }
.w-field input:focus, .w-field textarea:focus { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.w-form-note { color: var(--muted); font-size: 0.9375rem; }
.w-form-row { display: grid; gap: var(--space-4); }
.w-field-check label { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: 400; max-width: var(--measure); }
.w-field-check input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; flex: none; accent-color: var(--accent); }
@media (min-width: 40rem) { .w-form-row { grid-template-columns: 1fr 1fr; } }
/* ---------- legal notice ---------- */
.w-legal { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); }
.w-legal dl { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--space-5); row-gap: var(--space-2); }
.w-legal dt { font-weight: 600; color: var(--ink); }
/* ---------- notice / statement box ---------- */
.w-notice { padding: var(--space-5); border: var(--border-w) solid var(--line-strong, var(--ink)); border-radius: var(--radius); max-width: 34rem; display: grid; gap: var(--space-2); }
.w-notice h3 { font-size: 1.0625rem; }
/* ---------- list (queue, price tiers, facts) ---------- */
.w-list { display: grid; }
.w-list > li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--border-w) solid var(--line); align-items: baseline; max-width: none; }
.w-list > li:first-child { border-top: var(--border-w) solid var(--line); }
.w-list-title { font-weight: 600; }
.w-list-desc { color: var(--muted); font-size: 0.9375rem; }
.w-list-value { text-align: right; font-variant-numeric: tabular-nums; }
/* ---------- status pill ---------- */
.w-status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.9375rem; }
.w-status::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--status, var(--accent)); }
.w-status-open { --status: var(--ok, #2e7d4f); }
.w-status-closed { --status: var(--muted); }
/* ---------- footer ---------- */
.w-footer { width: 100%; margin: 0 auto; padding: var(--space-5) var(--gutter) var(--space-6); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: 0.9375rem; color: var(--muted); border-top: var(--border-w) solid var(--line); }
.w-layout-narrow .w-footer { max-width: calc(var(--page-narrow) + 2 * var(--gutter)); }
.w-layout-wide .w-footer { max-width: calc(var(--page-wide) + 2 * var(--gutter)); }
.w-footer ul { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.w-footer a { text-decoration: none; }
.w-footer a:hover { text-decoration: underline; }
/* ======================================================================
v2 additions: the blocks a business page actually needs
====================================================================== */
/* kicker: small line above a heading (no caps, no mono; just size + colour) */
.w-kicker { font-weight: 600; color: var(--accent); font-size: 0.9375rem; margin-bottom: var(--space-2); }
/* cover hero: photo behind text, gradient scrim from the theme's ink */
.w-hero-cover { position: relative; margin-inline: calc(-1 * var(--gutter)); min-height: min(78vh, 46rem); display: grid; align-items: end; overflow: hidden; border-radius: 0; padding: 0; }
.w-hero-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w-hero-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--cover-scrim, var(--ink)) 82%, transparent) 0%, color-mix(in srgb, var(--cover-scrim, var(--ink)) 35%, transparent) 55%, transparent 100%); }
.w-hero-cover-copy { position: relative; z-index: 1; padding: var(--space-8) var(--gutter) var(--space-7); display: grid; gap: var(--space-4); color: var(--on-cover, #fff); max-width: 44rem; }
.w-hero-cover-copy h1, .w-hero-cover-copy .w-h1 { color: var(--on-cover, #fff); font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); }
.w-hero-cover-copy .w-lede { color: var(--on-cover, #fff); opacity: .92; }
.w-hero-cover-copy .w-kicker { color: var(--on-cover, #fff); opacity: .85; }
.w-hero-cover-copy .w-button-secondary { color: var(--on-cover, #fff); border-color: var(--on-cover, #fff); }
.w-hero-cover-copy .w-button-secondary:hover { background: rgba(255,255,255,.12); }
.w-hero-cover + .w-block { padding-top: var(--space-8); }
@media (max-width: 40rem) { .w-hero-cover { min-height: 70vh; } }
/* feature: image beside copy, alternating */
.w-feature { display: grid; gap: var(--space-6); align-items: center; }
.w-feature-copy { display: grid; gap: var(--space-4); }
.w-feature-copy h2 { max-width: 20ch; }
.w-feature-img { overflow: hidden; border-radius: var(--radius-img, var(--radius)); background: var(--surface); }
.w-feature-img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 52rem) {
.w-feature { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--space-8); }
.w-feature-left .w-feature-copy { order: 2; }
.w-feature-left .w-feature-img { order: 1; }
}
/* stats strip */
.w-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-5); padding: var(--space-6) 0; border-top: var(--border-w) solid var(--line); border-bottom: var(--border-w) solid var(--line); }
.w-stats li { display: grid; gap: var(--space-1); }
.w-stats strong { font-family: var(--font-display); font-weight: var(--weight-display, 600); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1; letter-spacing: var(--tracking-display, -0.02em); color: var(--accent); }
.w-stats span { color: var(--muted); }
/* quote */
.w-quote { display: grid; gap: var(--space-4); max-width: 44rem; padding-left: var(--space-5); border-left: 4px solid var(--accent); }
.w-quote blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.375rem, 1rem + 1.4vw, 1.875rem); line-height: 1.3; font-weight: var(--weight-display, 500); }
.w-quote figcaption { color: var(--muted); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.w-quote figcaption span::before { content: "— "; }
/* files */
.w-files { display: grid; gap: var(--space-3); max-width: 40rem; }
.w-files a { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); padding: var(--space-4) var(--space-5); border: var(--border-w) solid var(--line-strong, var(--ink)); border-radius: var(--radius-button); text-decoration: none; background: var(--surface); }
.w-files a:hover { border-color: var(--accent); }
.w-files-title { font-weight: 600; }
.w-files-desc { grid-column: 1; color: var(--muted); font-size: 0.9375rem; }
.w-files-meta { grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 0.875rem; white-space: nowrap; }
/* band tones + image */
.w-block-band { border-radius: var(--radius-band, 0); }
.w-band-accent { background: var(--accent); color: var(--on-accent); }
.w-band-accent h2, .w-band-accent p, .w-band-accent .w-muted, .w-band-accent .w-status { color: var(--on-accent); }
.w-band-accent .w-button { background: var(--on-accent); color: var(--accent); border-color: var(--on-accent); }
.w-band-accent .w-textlink { color: var(--on-accent); }
.w-band-ink { background: var(--ink); color: var(--ground); }
.w-band-ink h2, .w-band-ink p, .w-band-ink .w-status { color: var(--ground); }
.w-band-ink .w-button { background: var(--ground); color: var(--ink); border-color: var(--ground); }
.w-band-ink .w-textlink { color: var(--ground); }
.w-band-surface { background: var(--surface); }
.w-band-with-img { display: grid; gap: var(--space-6); align-items: center; }
.w-band-img { overflow: hidden; border-radius: var(--radius-img, var(--radius)); }
.w-band-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (min-width: 52rem) { .w-band-with-img { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-8); } }
/* surface-toned text section */
.w-block-surface { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); background: var(--surface); padding-block: var(--space-7); }
.w-block + .w-block-surface { padding-top: var(--space-7); }
.w-block-surface + .w-block { padding-top: var(--space-7); }
/* cards: styles and column counts */
.w-cards.w-cols-2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
@media (min-width: 52rem) { .w-cards.w-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .w-cards.w-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.w-cards.w-cols-4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.w-cards-numbered .w-card { padding: var(--space-5); border: var(--border-w) solid var(--line); border-radius: var(--radius); background: var(--surface); }
.w-card-num { font-family: var(--font-display); font-weight: var(--weight-display, 600); font-size: 1.75rem; color: var(--accent); line-height: 1; }
.w-cards-tiles .w-card { position: relative; overflow: hidden; border-radius: var(--radius-img, var(--radius)); background: var(--ink); color: #fff; min-height: 18rem; justify-content: flex-end; padding: var(--space-5); gap: var(--space-2); }
.w-cards-tiles .w-card figure { position: absolute; inset: 0; margin: 0; border-radius: 0; aspect-ratio: auto; }
.w-cards-tiles .w-card figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.05) 60%); }
.w-cards-tiles .w-card h3, .w-cards-tiles .w-card p, .w-cards-tiles .w-card .w-card-source { position: relative; color: #fff; }
.w-cards-tiles .w-card p { opacity: .9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.w-cards-tiles .w-card h3 { font-size: 1.5rem; }
a.w-cards-tiles .w-card:hover h3 { text-decoration: none; }
.w-cards-tiles a.w-card:hover figure img { transform: scale(1.03); }
.w-cards-tiles figure img { transition: transform .3s; }
/* image radius token per theme; fall back to radius */
:root { --radius-img: var(--radius); }
/* ======================================================================
v3: blocks that do a job — info bar, price tables, index lists,
mosaic photos, stacked hero, call bar. No overlays, no gradients.
====================================================================== */
body { font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); }
.w-prose { line-height: 1.65; }
.w-prose > * + * { margin-top: 0.9em; }
.w-section-title { margin-bottom: var(--space-5); }
/* logo in the nav */
.w-brand { gap: var(--space-3); }
.w-logo { height: 2.75rem; width: auto; border-radius: var(--radius-logo, 0); }
/* stacked hero: text, then one wide photo */
.w-hero-stacked { padding-bottom: 0; }
.w-hero-stacked .w-hero-copy { max-width: 48rem; }
.w-hero-wide { margin-top: var(--space-6); aspect-ratio: 16 / 7; overflow: hidden; border-radius: var(--radius-img, var(--radius)); background: var(--surface); }
.w-hero-wide img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 40rem) { .w-hero-wide { aspect-ratio: 4 / 3; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; } }
/* info bar: the four things people came for */
.w-infobar { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); border-top: var(--border-w) solid var(--line-strong, var(--ink)); border-bottom: var(--border-w) solid var(--line); }
.w-infobar > div { padding: var(--space-4) var(--space-5) var(--space-4) 0; }
.w-infobar > div + div { border-left: var(--border-w) solid var(--line); padding-left: var(--space-5); }
.w-infobar dt { font-size: 0.875rem; color: var(--muted); margin-bottom: 2px; }
.w-infobar dd { margin: 0; font-weight: 600; line-height: 1.35; }
.w-infobar a { text-decoration: none; }
.w-infobar a:hover { text-decoration: underline; }
@media (max-width: 40rem) { .w-infobar > div + div { border-left: 0; padding-left: 0; border-top: var(--border-w) solid var(--line); } }
/* price tables */
.w-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.w-table { min-width: 26rem; max-width: 46rem; font-variant-numeric: tabular-nums; }
.w-table th, .w-table td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: var(--border-w) solid var(--line); text-align: left; vertical-align: baseline; max-width: none; }
.w-table thead th { font-size: 0.875rem; font-weight: 600; color: var(--muted); border-bottom-color: var(--line-strong, var(--ink)); }
.w-table tbody th { font-weight: 400; }
.w-table td { font-weight: 600; white-space: nowrap; }
.w-table-intro { color: var(--muted); margin: calc(-1 * var(--space-3)) 0 var(--space-4); }
.w-table-note { color: var(--muted); font-size: 0.9375rem; margin-top: var(--space-3); }
/* index list: services, practical pages */
.w-cards-index { display: block; border-top: var(--border-w) solid var(--line-strong, var(--ink)); }
.w-cards-index > li { border-bottom: var(--border-w) solid var(--line); }
.w-cards-index .w-card { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 9rem; column-gap: var(--space-5); align-items: center; padding: var(--space-5) 0; }
.w-cards-index .w-card-num { font-family: var(--font-body); font-size: 0.9375rem; color: var(--muted); font-weight: 600; align-self: start; padding-top: .35rem; }
.w-cards-index .w-card-body { display: grid; gap: var(--space-1); }
.w-cards-index h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); }
.w-cards-index p { max-width: 60ch; }
.w-cards-index figure { aspect-ratio: 4 / 3; border-radius: var(--radius-img, var(--radius)); overflow: hidden; margin: 0; }
.w-cards-index figure img { width: 100%; height: 100%; object-fit: cover; }
.w-cards-index a.w-card:hover h3 { color: var(--accent); text-decoration: none; }
.w-cards-index > li:not(:has(figure)) .w-card { grid-template-columns: 3rem minmax(0, 1fr); }
@media (max-width: 40rem) { .w-cards-index .w-card { grid-template-columns: 2rem minmax(0, 1fr) 5.5rem; column-gap: var(--space-3); } .w-cards-index > li:has(figure) p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .9375rem; } .w-cards-index > li:not(:has(figure)) .w-card { grid-template-columns: 2rem minmax(0, 1fr); } }
/* mosaic: one big photo, then smaller ones, no uniform grid */
.w-gallery-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(8rem, 14vw, 13rem); grid-auto-flow: dense; gap: var(--space-2); }
.w-gallery-mosaic figure { aspect-ratio: auto; height: 100%; }
.w-gallery-mosaic > li:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
.w-gallery-mosaic > li:nth-child(10n+6) { grid-column: 3 / span 2; }
@media (max-width: 40rem) { .w-gallery-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 9rem; } .w-gallery-mosaic > li:nth-child(10n+6) { grid-column: span 2; } }
/* table of contents for long pages */
.w-toc { margin-bottom: var(--space-6); padding: var(--space-4) 0; border-top: var(--border-w) solid var(--line); border-bottom: var(--border-w) solid var(--line); }
.w-toc ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.w-toc a { text-decoration: none; font-weight: 600; }
.w-toc a:hover { color: var(--accent); }
.w-prose h2[id], .w-prose h3[id] { scroll-margin-top: var(--space-6); }
/* form: wider, two fields per row where marked */
.w-form { max-width: 44rem; }
.w-form-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 36rem) { .w-form-row { grid-template-columns: 1fr 1fr; } }
/* call bar on phones */
.w-callbar { display: none; }
@media (max-width: 52rem) {
.w-callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--ink); }
.w-callbar a { min-height: 3.25rem; display: flex; align-items: center; justify-content: center; font-weight: 600; text-decoration: none; color: var(--ground); }
.w-callbar a:first-child { background: var(--accent); color: var(--on-accent); }
body:has(.w-callbar) { padding-bottom: 3.25rem; }
}
/* list containers: items are layout, not reading text */
.w-cards > li, .w-gallery > li, .w-links > *, .w-list > li, .w-stats > li, .w-files > li, .w-toc li { max-width: none; }
/* ratio classes (published pages have a CSP without inline styles) */
.w-r-4-5 { aspect-ratio: 4 / 5; } .w-r-1-1 { aspect-ratio: 1 / 1; } .w-r-4-3 { aspect-ratio: 4 / 3; } .w-r-3-2 { aspect-ratio: 3 / 2; } .w-r-16-10 { aspect-ratio: 16 / 10; }
.w-hero-split > figure { overflow: hidden; border-radius: var(--radius-img, var(--radius)); }
.w-hero-split > figure img { width: 100%; height: 100%; object-fit: cover; }
.w-actions-spaced { margin-top: var(--space-5); }
/* ======================================================================
v4: the SiteBuilder-era blocks, done properly
====================================================================== */
.w-icon { width: 1.5rem; height: 1.5rem; flex: none; }
.w-section-intro { color: var(--muted); max-width: 60ch; margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
/* features: icon + title + text, as grid, numbered steps, or boxes */
.w-features { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
@media (min-width: 52rem) { .w-features.w-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w-features.w-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .w-features.w-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.w-features > li { max-width: none; }
.w-feature-item { display: grid; gap: var(--space-2); align-content: start; text-decoration: none; height: 100%; }
.w-feature-icon { width: 2rem; height: 2rem; color: var(--accent); margin-bottom: var(--space-2); }
.w-feature-item h3 { font-size: 1.1875rem; }
.w-feature-sub { font-weight: 600; color: var(--ink); }
.w-feature-item p { color: var(--muted); }
a.w-feature-item:hover h3 { color: var(--accent); }
.w-features-boxed .w-feature-item { padding: var(--space-5); border: var(--border-w) solid var(--line); border-radius: var(--radius); background: var(--surface); }
.w-features-steps { counter-reset: none; }
.w-features-steps .w-feature-item { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-4); }
.w-features-steps .w-feature-item > * { grid-column: 2; }
.w-features-steps .w-step { grid-column: 1; grid-row: 1 / span 4; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: 700; font-family: var(--font-display); }
.w-features-steps .w-feature-icon { display: none; }
/* cards: icon and button */
.w-card-icon { width: 2rem; height: 2rem; color: var(--accent); }
.w-card-button { align-self: start; margin-top: var(--space-2); display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--space-4); border: var(--border-w) solid var(--line-strong, var(--ink)); border-radius: var(--radius-button); font-weight: 600; font-size: .9375rem; }
a.w-card:hover .w-card-button { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.w-cards-plain .w-card, .w-cards-numbered .w-card { height: 100%; }
/* contact: details left, form right */
.w-contact { display: grid; gap: var(--space-6); }
@media (min-width: 52rem) { .w-contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-8); align-items: start; } }
.w-contact-info { display: grid; gap: var(--space-5); align-content: start; }
.w-contact-details { display: grid; gap: var(--space-4); }
.w-contact-details > div { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); align-items: start; }
.w-contact-details .w-icon { grid-row: 1 / span 2; color: var(--accent); margin-top: 2px; }
.w-contact-details > div:not(:has(.w-icon)) { grid-template-columns: 1fr; }
.w-contact-details dt { font-size: .875rem; color: var(--muted); }
.w-contact-details dd { margin: 0; font-weight: 600; }
.w-contact-details a { text-decoration: none; }
.w-contact-details a:hover { text-decoration: underline; }
.w-contact-form .w-form { max-width: none; }
/* social */
.w-social { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.w-social li { max-width: none; }
.w-social a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-4) 0 var(--space-3); border: var(--border-w) solid var(--line); border-radius: var(--radius-button); text-decoration: none; font-weight: 600; font-size: .9375rem; background: var(--surface); }
.w-social a:hover { border-color: var(--accent); color: var(--accent); }
.w-social .w-icon { width: 1.25rem; height: 1.25rem; }
/* FAQ: , no script */
.w-faq { max-width: 52rem; border-top: var(--border-w) solid var(--line-strong, var(--ink)); }
.w-faq details { border-bottom: var(--border-w) solid var(--line); }
.w-faq summary { list-style: none; cursor: pointer; padding: var(--space-4) 2.5rem var(--space-4) 0; font-weight: 600; font-size: 1.0625rem; position: relative; min-height: var(--tap); }
.w-faq summary::-webkit-details-marker { display: none; }
.w-faq summary::after { content: ""; position: absolute; right: .5rem; top: 50%; width: .6rem; height: .6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.w-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.w-faq summary:hover { color: var(--accent); }
.w-faq-a { padding: 0 0 var(--space-5); color: var(--ink); max-width: var(--measure); }
/* before / after */
.w-ba { display: grid; gap: var(--space-6); }
.w-ba > li { max-width: none; }
.w-ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.w-ba-pair figure { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-img, var(--radius)); background: var(--surface); }
.w-ba-pair img { width: 100%; height: 100%; object-fit: cover; }
.w-ba-tag { position: absolute; left: var(--space-3); top: var(--space-3); z-index: 1; padding: 2px var(--space-3); background: var(--ground); color: var(--ink); font-size: .8125rem; font-weight: 700; border-radius: var(--radius-button); }
.w-ba-after { background: var(--accent); color: var(--on-accent); }
.w-ba-caption { margin-top: var(--space-3); color: var(--muted); }
@media (max-width: 40rem) { .w-ba-pair { grid-template-columns: 1fr; } }
/* carousel: horizontal scroll-snap, no script */
.w-gallery-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 28rem); grid-template-columns: none; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: var(--space-3); scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.w-gallery-carousel > li { scroll-snap-align: start; }
.w-gallery-carousel figure { aspect-ratio: 4 / 3; }
@media (min-width: 52rem) { .w-gallery-carousel { grid-auto-columns: calc((100% - 2 * var(--space-3)) / 3); } }
/* v4 fixes */
.w-hero-stacked + .w-block, .w-hero-stacked + .w-block-tight { padding-top: var(--space-7); }
.w-hero-stacked + .w-block:has(.w-infobar) { padding-top: 0; }
.w-feature-item h3 { font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem); }
.w-hours caption { text-align: left; caption-side: top; padding-bottom: var(--space-2); color: var(--muted); font-size: .9375rem; }
@media (min-width: 52rem) { .w-gallery-carousel { grid-auto-columns: calc((100% - 3 * var(--space-3)) / 3.4); } }
.w-gallery-carousel { scroll-padding-inline: 0; }
/* contact card + QR */
.w-vcard { display: grid; gap: var(--space-6); align-items: center; }
.w-vcard-copy { display: grid; gap: var(--space-4); }
.w-vcard-name span { color: var(--muted); }
.w-qr { margin: 0; justify-self: start; display: grid; gap: var(--space-2); }
.w-qr svg { width: 11rem; height: 11rem; border: var(--border-w) solid var(--line); border-radius: var(--radius); background: #fff; }
.w-qr figcaption { font-size: .875rem; color: var(--muted); }
@media (min-width: 40rem) { .w-vcard { grid-template-columns: minmax(0, 1fr) auto; } .w-layout-narrow .w-vcard { grid-template-columns: 1fr; } }
/* cards showing logos, badges, certificates: whole image, centred, on a quiet ground */
ul.w-cards-contain .w-card figure { position: relative; aspect-ratio: 4 / 3; background: var(--surface); overflow: hidden; }
ul.w-cards-contain .w-card figure img { position: absolute; inset: var(--space-4); width: calc(100% - 2 * var(--space-4)); height: calc(100% - 2 * var(--space-4)); max-width: none; object-fit: contain; transform: none; }
/* ======================================================================
Menus.