/* =========================================================================
   Eleven Crowns Bratislava — main.css
   Profile: two-centuries (panelgrid — walking-tour network PILOT).
   Axes: geometric-humanist type (1.250 ratio, +.005em POSITIVE tracking,
   500/600 weights, UPPERCASE H3 + eyebrows) / horizon-band hero (two bands,
   drawn 2px horizon, CSS skyline) / banded-dense rhythm (bone-on-bone, NO
   dark feature band) / float cards (4px radius, flat shadow, NO hover lift,
   1px top seam at the panel pitch) / inline header (hairline-separated
   small-caps row, two-line wordmark, no CTA fill) / panel-grid texture
   (28×44 non-square joints on TINTED BANDS + the hero's lower band only).
   Warm-graphite near-neutral primary + mid-green CTA on cool bone.
   Register: editorial, architectural, civic — never touristic.
   Zero images: every texture is a CSS gradient; no url(), no icon font.
   See DESIGN-MANIFEST.json and walking-tour-network/DESIGN-ALLOCATION.md
   §5.4 / §5.11 / §7.5 / §8.1 / §8.2.
   1. Design tokens (:root)
   2. Reset / base
   3. Layout (container, grid, banded-dense rhythm, panel-grid tinted bands)
   4. Buttons + links
   5. Header / nav / top bar (inline: one hairline row, two-line wordmark)
   6. Hero (horizon-band: upper content band + drawn lower skyline band)
   7. Trust signals / Open Now
   8. Cards + silo grids (float, flat, seamed, no lift)
   9. FAQ accordion
   10. CTA banner
   11. Testimonials
   12. E-E-A-T
   13. Breadcrumbs / prose / blog
   14. Footer + mobile sticky bar
   15. Utilities / a11y / motion (hairline section heads, tabular figures)
   16. Quote wizard (3-step lead form)
   17. Directory (off by default) + conversion pack
   ====================================================================== */

/* 1. TOKENS ------------------------------------------------------------- */
:root{
	/* ── PANELGRID · two-centuries · Bratislava ────────────────────────────
	   Palette from DESIGN-ALLOCATION.md §7.5, values measured in
	   research/matrix.json (regenerates from research/verify-matrix.py).
	   Register is editorial and civic, NOT touristic: no neon, no dark party
	   palette, no high-contrast shout — the market brief positions this branch
	   away from the stag-weekend read.
	   Customizer overrides --color-primary/-accent/-text + their *-hover. */
	--color-primary:#474540;        /* warm graphite — near-neutral, HSL sat 5.2%, R1-exempt (and NOT cooperstown's #24272B) */
	--color-accent:#2F7A3E;         /* mid green: every CTA fill (WHITE ink, 5.28:1 — the batch minimum) */
	--color-text:#1D1C19;           /* near-black warm grey body text (15.35:1 on surface) */
	--color-primary-hover:#35332F;  /* deeper graphite: hover on strong fills */
	--color-accent-hover:#256232;   /* deeper green: CTA hover (white ink 7.3:1) */

	--color-muted:#5C5A53;          /* warm grey secondary text (6.2:1 on surface) */
	--color-surface:#F4F3EF;        /* cool bone base band */
	--color-surface-2:#EAE8E1;      /* deeper bone alternate band (banded-dense) */
	--color-border:#DBD9D1;         /* bone hairline border */
	--color-white:#ffffff;
	--color-page:#F4F3EF;           /* cool bone page floor */
	--color-success:#2F7A3E;        /* green: open-now + success cues */

	/* Dark surface family — warm graphite, used SPARINGLY. banded-dense here
	   is bone-on-bone with textured tinted bands; unlike the structural donor
	   there is NO dark mid-page feature band. Footer floor only. */
	--color-dark:#33312D;
	--color-dark-2:#232220;
	--color-on-dark:#F4F3EF;
	--color-on-dark-muted:#C7C4BC;
	--color-dark-border:#4A4842;

	/* rgb channels for rgba() tints. */
	--color-primary-rgb:71,69,64;
	--color-accent-rgb:47,122,62;

	/* ── texture: panel-grid ──────────────────────────────────────────────
	   Petržalka's prefab panel joints. Deliberately NON-SQUARE (28×44) so it
	   can never be mistaken for blueprint-grid. Three layers: 1px verticals
	   at 28px, 1px horizontals at 44px, and every FOURTH vertical doubled to
	   2px as a building seam. Alpha ceiling 6% fine / 11% seam.
	   Tinted bands and the hero's lower band ONLY — never a full-page wash. */
	--pg-x:28px;
	--pg-y:44px;
	--pg-ink:color-mix(in srgb, var(--color-text) 6%, transparent);
	--pg-seam:color-mix(in srgb, var(--color-text) 11%, transparent);
	--pg-grid:
		repeating-linear-gradient(to right,  transparent 0 calc(var(--pg-x) - 1px), var(--pg-ink) calc(var(--pg-x) - 1px) var(--pg-x)),
		repeating-linear-gradient(to bottom, transparent 0 calc(var(--pg-y) - 1px), var(--pg-ink) calc(var(--pg-y) - 1px) var(--pg-y)),
		repeating-linear-gradient(to right,  transparent 0 calc(var(--pg-x) * 4 - 2px), var(--pg-seam) calc(var(--pg-x) * 4 - 2px) calc(var(--pg-x) * 4));

	/* ── geometric-humanist scale — ratio 1.250 ───────────────────────────
	   kachina uses the same TOKEN at ratio 1.333 with negative tracking and
	   600 throughout; every number below is the declared inversion of that
	   (DESIGN-ALLOCATION §8.1). H1 desktop base is 2.75rem. */
	--text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-lg:1.25rem;
	--text-xl:1.5625rem; --text-2xl:1.9531rem; --text-3xl:2.4414rem; --text-4xl:2.75rem;
	--text-5xl:3.0518rem; --text-6xl:3.8147rem;

	--fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;
	/* Heading leading 1.18 (kachina: tighter, undeclared). Body 1.6. */
	--lh-tight:1.18; --lh-snug:1.35; --lh-normal:1.6;

	/* POSITIVE display tracking — the opposite sign from kachina's -.01em,
	   and the cleanest verifiable inversion available on this axis.
	   Eyebrows and H3 are UPPERCASE at +.06em. */
	--track-display:.005em;
	--track-eyebrow:.06em;

	/* Densest branch in the batch. */
	--space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem;
	--space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:3.25rem; --space-20:4.5rem;

	--width-content:720px; --width-wide:1160px;
	/* Small, even radii — architectural rather than soft. */
	--radius-sm:3px; --radius:4px; --radius-lg:6px; --radius-full:999px;
	/* FLAT low shadows at 20% text-alpha. No hard offsets, no lift. */
	--shadow-sm:0 1px 3px -1px rgba(29,28,25,.2);
	--shadow-md:0 2px 6px -2px rgba(29,28,25,.2);
	--shadow-lg:0 4px 12px -4px rgba(29,28,25,.2);
	--transition:160ms ease;
	--header-h:64px; --topbar-h:36px;

	/* geometric-humanist, stack corrected per DESIGN-ALLOCATION §6.1:
	   macOS lands Avenir Next · Windows lands BAHNSCHRIFT (the variable DIN
	   bundled with Win 10/11) where kachina lands Segoe UI · Linux URW Gothic
	   then Cantarell. A declared flavour shift, both ends geometric. */
	/* BODY is deliberately HUMANIST, not geometric (DESIGN-ALLOCATION §8.1 body-stack
	   table): a geometric face at body size is hard to read for any length, so the
	   branch pairs a geometric DISPLAY with a humanist BODY. Corbel first (the Vista
	   C-font set, bundled on Windows and Office-installed on macOS), then Segoe UI. */
	--font:Corbel,'Segoe UI',-apple-system,Cantarell,sans-serif;
	--font-display:'Avenir Next',Avenir,Futura,'Century Gothic',Bahnschrift,'URW Gothic','Twentieth Century',Cantarell,system-ui,sans-serif;
}

/* 2. RESET / BASE ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font);font-size:var(--text-base);line-height:var(--lh-normal);color:var(--color-text);background:var(--color-page);-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--color-primary);text-decoration:none;}
a:hover{text-decoration:underline;}
/* geometric-humanist headings (DESIGN-ALLOCATION §8.1, the honest-reuse row
   against heat-pump-kachina-theme). Every value here is the declared
   inversion: SENTENCE case H1/H2, weight 500 H1 / 600 H2, tracking
   +.005em — POSITIVE, where kachina is -.01em — leading 1.18, ratio 1.250.
   H3 is UPPERCASE at +.06em, matching the eyebrow treatment; kachina's H3
   is normal case. No heading rule anywhere in this file may carry a
   negative letter-spacing. */
h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--lh-tight);font-weight:var(--fw-semibold);letter-spacing:var(--track-display);color:var(--color-text);margin:0 0 var(--space-4);text-transform:none;}
h1{font-size:2.05rem;font-weight:var(--fw-medium);}
h2{font-size:var(--text-2xl);font-weight:var(--fw-semibold);}
/* H3 carries the label register: uppercase, tracked, one step down. */
h3{font-size:1.375rem;font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--track-eyebrow);}
h4{font-size:var(--text-lg);}
/* H1 reaches its declared 2.75rem desktop base at the reading breakpoint —
   it does not grow past it. */
@media(min-width:720px){h1{font-size:var(--text-4xl);} h2{font-size:var(--text-3xl);}}
p{margin:0 0 var(--space-4);}
ul,ol{margin:0 0 var(--space-4);padding-left:1.25rem;}
/* Figures line up in a column wherever the page states a duration, a stop
   count, a distance, a time or a price — the numbers are the E-E-A-T
   substitute on a zero-photo build, so they must align. */
.itinerary,.itinerary th,.itinerary td,.time-box,.duration,.distance,.stop-count,
.price,.tabular,time,table,.trust-metric__value,.trust-chip,.open-now,
.freshness,.hero__logistics,.hero__phone,.service-card__price,.extra-card__price{font-variant-numeric:tabular-nums;}

/* 3. LAYOUT ------------------------------------------------------------- */
.container{width:100%;max-width:var(--width-wide);margin:0 auto;padding:0 var(--space-4);}
/* banded-dense, panelgrid variant. the structural donor (and the one
   axis shared with it) alternates dark-green/cream bands around a DARK
   FEATURE BAND mid-page. This branch alternates cool bone against tinted
   bone at 1px-ruled boundaries and has NO dark band anywhere above the
   footer: the density comes from tightened padding plus the panel-grid
   wash, not from colour. A visitor sees a quiet grey document. */
.section{padding:var(--space-16) 0;}
/* The tinted band. Panel-grid texture (28×44, every fourth vertical doubled)
   lives HERE and on the hero's lower band — never as a full-page wash and
   never behind body copy on the base surface. :where() keeps specificity
   flat so the hero and self-backgrounded sections override cleanly. */
.site-main > :where(section:nth-of-type(even)){position:relative;background-color:var(--color-surface-2);background-image:var(--pg-grid);border-block:1px solid var(--color-border);}
/* Explicit band classes for templates that opt in directly. */
.section--surface{background-color:var(--color-surface);background-image:none;}
.section--tinted,.band--tinted,.dp-texture-panel-grid .band--tinted{position:relative;background-color:var(--color-surface-2);background-image:var(--pg-grid);border-block:1px solid var(--color-border);}
/* .section--dark is INERT on this branch. The markup still emits it (see
   front-page.php), so it is re-cast here as an ordinary BASE-surface band —
   untinted and untextured, so it reads as the light half of the alternation
   instead of doubling up with the tinted bands on either side of it. There
   is no dark surface above the footer floor: no fill, no cream text, no
   inverted cards. Its specificity beats the :where() nth-of-type rule, so
   it stays light wherever it lands in the running order.
   ⚠ Do NOT reintroduce a dark mid-page band — DESIGN-ALLOCATION §7.5. */
.section--dark{position:relative;background-color:var(--color-surface);background-image:none;border-block:0;color:var(--color-text);padding:var(--space-16) 0;}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--color-text);}
.section--dark p{color:var(--color-muted);}
.grid{display:grid;gap:var(--space-6);}
.grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}
@media(min-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.grid--3{grid-template-columns:repeat(3,1fr);}.grid--4{grid-template-columns:repeat(4,1fr);}}

/* 4. BUTTONS ------------------------------------------------------------ */
/* Civic plates: small tracked uppercase labels, 3px radius, 1px rules, no
   lift and no shadow stack. The accent is a FILL only here and on the
   sticky bar — everywhere else it appears as ink or as a rule. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
	padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm);font-family:var(--font-display);
	font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--track-eyebrow);
	font-size:var(--text-sm);border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1.25;
	min-height:44px;
	transition:background var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition);}
.btn:hover{text-decoration:none;}
/* Primary CTA — mid-green fill, WHITE ink (#FFFFFF on #2F7A3E = 5.28:1, the
   batch minimum). Never lighten this fill, never fade the label: the hover
   state is DARKER by construction. */
.btn--primary{background:var(--color-accent);border-color:var(--color-accent);color:#FFFFFF;}
.btn--primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:#FFFFFF;}
/* Secondary — warm-graphite fill, bone ink (9.58:1). */
.btn--secondary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-dark);}
.btn--secondary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff;}
/* Ghost / outline on a LIGHT surface — graphite rule + graphite ink. */
.btn--ghost{background:transparent;border-color:var(--color-primary);color:var(--color-primary);}
.btn--ghost:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
/* .btn--on-dark is a donor inheritance: this build has no dark band for it
   to sit on, so it renders as a quiet outline on bone. Kept (the markup
   still emits it in the hero and the CTA banner) rather than left invisible
   as a bone rule on a bone surface. */
.btn--on-dark{background:transparent;border-color:color-mix(in srgb,var(--color-text) 38%,transparent);color:var(--color-text);}
.btn--on-dark:hover{background:var(--color-text);border-color:var(--color-text);color:var(--color-surface);}
.btn--lg{padding:var(--space-4) var(--space-8);font-size:var(--text-lg);}
.btn--block{width:100%;}
.btn svg{width:1.1em;height:1.1em;}

/* 5. HEADER (inline) ---------------------------------------------------- */
/* Slim bone utility strip, hairline-ruled. Dark chrome is the footer floor
   only on this branch, so the donor's forest utility bar is gone. */
.topbar{background:var(--color-surface-2);color:var(--color-text);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--track-eyebrow);border-bottom:1px solid var(--color-border);min-height:var(--topbar-h);}
.topbar__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2) var(--space-6);padding:var(--space-2) var(--space-4);}
.topbar a{color:var(--color-text);display:inline-flex;align-items:center;gap:var(--space-2);}
.topbar a:hover{color:var(--color-primary);}
.topbar svg{width:1em;height:1em;}
.topbar__afterhours{color:var(--color-muted);font-weight:var(--fw-semibold);}

/* header: inline — panelgrid variant. This is the most-worn token in the
   workspace (six older builds) and DESIGN-ALLOCATION §8.2 flags it as the
   delta most likely to be quietly dropped; this build is the donor for four
   later branches, so a weak delta here propagates four times. The delta:
   ONE hairline-separated row of small-caps nav items, a TWO-LINE WORDMARK
   on the left, no pill nav, no filled CTA in the bar, and no
   transparent-over-hero behaviour — the bar is opaque bone from the first
   pixel of scroll. Scroll state may deepen the hairline and nothing else.
   JS hooks unchanged: .site-header, .menu-toggle, .main-nav,
   .menu-item-has-children; JS still toggles .is-shrunk on scroll. */
.site-header{position:sticky;top:0;z-index:100;background:var(--color-surface);box-shadow:none;border-bottom:1px solid color-mix(in srgb,var(--color-text) 14%,transparent);transition:border-color var(--transition);}
.site-header.is-shrunk{box-shadow:none;border-bottom-color:color-mix(in srgb,var(--color-text) 30%,transparent);}
.site-header__brand{background:transparent;border-bottom:0;}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:var(--header-h);}
.site-branding{display:flex;align-items:center;}
/* The two-line wordmark. Line 1 is the brand at 1.0625rem/600; line 2 is the
   city as a tracked uppercase label two steps down. Where the markup ships
   the spans the sizes come from them; until then the measure below forces
   the break so the mark still reads as two lines and not as a logotype
   stripe. Tight leading is what makes it a mark rather than a stack. */
.site-title{font-family:var(--font-display);margin:0;line-height:1.05;}
.site-title a{display:block;max-width:14ch;color:var(--color-text);font-size:1.0625rem;font-weight:var(--fw-semibold);letter-spacing:var(--track-display);line-height:1.05;text-wrap:balance;}
.site-title a:hover{color:var(--color-primary);text-decoration:none;}
.site-title a:has(.site-title__lead){max-width:none;}
.site-title__lead{display:block;font-size:1.0625rem;font-weight:var(--fw-semibold);letter-spacing:var(--track-display);line-height:1.05;}
.site-title__city{display:block;font-size:var(--text-xs);font-weight:var(--fw-medium);text-transform:uppercase;letter-spacing:var(--track-eyebrow);line-height:1.05;color:color-mix(in srgb,var(--color-text) 68%,transparent);}
.site-branding .custom-logo{max-height:44px;width:auto;}
/* The nav bar carries no fill of its own — it is part of the same hairline
   row as the wordmark. */
.site-header__nav{background:transparent;}
.main-nav > ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0;}
.main-nav li{position:relative;}
/* The hairline between items IS the token: gaps are made by padding so the
   rules can sit between them. */
.main-nav > ul > li + li{border-left:1px solid color-mix(in srgb,var(--color-text) 14%,transparent);}
.main-nav a{color:var(--color-text);font-family:var(--font-display);font-size:.8125rem;font-weight:var(--fw-medium);text-transform:uppercase;letter-spacing:var(--track-eyebrow);white-space:nowrap;display:block;padding:var(--space-2) var(--space-4);}
.main-nav a:hover,.main-nav a:focus-visible,.main-nav a[aria-current="page"]{color:var(--color-primary);box-shadow:none;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;}
/* The header CTA, when the markup ships one, is a TEXT LINK: no fill, no
   border, no radius, never .btn. The accent appears as 2px of underline ink.
   This is the only branch in the batch whose header CTA is not a fill. */
.ecb-header-cta{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-display);font-size:.8125rem;font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--track-eyebrow);color:var(--color-primary);background:none;border:0;padding:var(--space-2) 0;text-decoration:underline;text-decoration-color:var(--color-accent);text-decoration-thickness:2px;text-underline-offset:5px;}
.ecb-header-cta:hover,.ecb-header-cta:focus-visible{color:var(--color-accent-hover);text-decoration-thickness:3px;}
/* Caret on parent items with a dropdown. */
.main-nav .menu-item-has-children > a::after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--transition);}
/* Submenu dropdown — bone plate, hairline rule, flat shadow; desktop only. */
.main-nav .sub-menu{list-style:none;margin:0;padding:var(--space-2);position:absolute;top:100%;left:0;min-width:250px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);display:none;flex-direction:column;z-index:60;}
@media(min-width:960px){
	.main-nav li:hover > .sub-menu,.main-nav li:focus-within > .sub-menu{display:flex;}
}
/* Submenu items step OUT of the small-caps row register — they are reading
   text, not the masthead row. */
.main-nav .sub-menu a{white-space:normal;padding:var(--space-2) var(--space-3);border-radius:var(--radius);font-family:var(--font);font-size:var(--text-sm);text-transform:none;letter-spacing:normal;font-weight:var(--fw-normal);color:var(--color-text);}
.main-nav .sub-menu a:hover{background:var(--color-surface-2);color:var(--color-primary);text-decoration:none;box-shadow:none;}
.header-actions{display:flex;align-items:center;gap:var(--space-3);}
.header-search form{display:flex;}
.menu-toggle{display:inline-flex;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:var(--space-2);}
.menu-toggle span{width:24px;height:2px;background:var(--color-text);display:block;transition:var(--transition);}
@media(max-width:959px){
	/* Below the nav breakpoint the hairline row becomes a stacked bone panel:
	   the vertical rules turn into horizontal ones, the register is
	   unchanged, and nothing in it gains a fill. */
	.site-header{position:sticky;}
	.main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-md);max-height:calc(100vh - var(--header-h));overflow-y:auto;}
	.main-nav.is-open{display:block;}
	.main-nav > ul{flex-direction:column;flex-wrap:nowrap;gap:0;padding:0 var(--space-4);align-items:stretch;}
	.main-nav > ul > li + li{border-left:0;}
	.main-nav li{border-bottom:1px solid var(--color-border);}
	.main-nav a{display:block;padding:var(--space-3) 0;white-space:normal;min-height:44px;}
	.main-nav a:hover{box-shadow:none;}
	.main-nav .menu-item-has-children > a::after{float:right;margin-top:.5em;}
	.main-nav .sub-menu{position:static;display:none;box-shadow:none;border:0;border-radius:0;padding:0 0 var(--space-2) var(--space-4);min-width:0;background:transparent;}
	.main-nav .menu-item-has-children.is-open > .sub-menu{display:flex;}
	.main-nav .menu-item-has-children.is-open > a::after{transform:rotate(-135deg);}
	.main-nav .sub-menu li{border-bottom:0;}
	.main-nav .sub-menu a{padding:var(--space-2) 0;color:var(--color-muted);}
	.main-nav .sub-menu a:hover{background:transparent;color:var(--color-primary);}
	/* The CTA stays a link above the list; it never becomes a button here. */
	.ecb-header-cta{display:inline-flex;padding:var(--space-3) 0;}
}
@media(min-width:960px){
	.menu-toggle{display:none;}
	/* THE inline row. The donor stacks a brand row above a full-width nav
	   bar; here the two markup rows collapse into ONE hairline row aligned
	   to the wide grid, with the wordmark left and the small-caps items
	   right. The inner .container elements are unwrapped so the row does not
	   inherit two nested max-widths. */
	.site-header{display:flex;align-items:stretch;gap:var(--space-8);padding-inline:max(var(--space-4),calc((100% - var(--width-wide)) / 2));}
	.site-header__brand{flex:0 0 auto;display:flex;align-items:center;}
	.site-header__brand > .container{max-width:none;width:auto;padding:0;}
	.site-header__nav{flex:1 1 auto;min-width:0;display:flex;align-items:stretch;justify-content:flex-end;}
	.site-header__nav > .container{max-width:none;width:auto;padding:0;display:flex;align-items:stretch;}
	.main-nav{display:flex;align-items:stretch;}
	.main-nav > ul{flex-wrap:nowrap;}
}

/* 6. HERO (horizon-band) ------------------------------------------------ */
/* Two centuries in one skyline, DRAWN — the gothic coronation city against
   the Petržalka panel blocks. Two stacked bands with a horizon between them:
   the UPPER band (~70%) sits on cool bone and holds everything — eyebrow,
   H1, deck, CTA pair, logistics strip; the LOWER band (~30%) holds nothing
   at all and is the horizon. The brand colour appears here as a 2px RULE,
   not as a fill, which is what separates this from `banded` (one solid
   brand-colour band with content inside it — the donor and one sibling).
   ⚠ LCP is the H1 TEXT BLOCK. The lower band is background-image only and
   must never become an <img>: locked decision #3, zero photographs. */
.hero{--hb-h:clamp(120px,18vw,200px);position:relative;overflow:hidden;color:var(--color-text);background:var(--color-surface);padding-bottom:var(--hb-h);}
/* The lower band: the panel rhythm at the panel-grid pitch, 10% alpha, under
   the one hard line in the composition. */
.hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hb-h);
	border-top:2px solid var(--color-primary);
	background-color:var(--color-surface);
	background-image:repeating-linear-gradient(to right,transparent 0 calc(var(--pg-x) - 1px),color-mix(in srgb,var(--color-text) 10%,transparent) calc(var(--pg-x) - 1px) var(--pg-x));
	pointer-events:none;}
/* The skyline, over-drawn on the rhythm: ELEVEN points exactly — low on the
   left at the river, up to the tower, down, a bridge pylon, then the long
   flat run of equal panel blocks to the right. More points than this and it
   starts to read as an illustration asset somebody will swap for a photo. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--hb-h) - 2px);
	background:color-mix(in srgb,var(--color-primary) 24%,transparent);
	clip-path:polygon(0 100%,0 84%,22% 84%,22% 30%,29% 30%,29% 58%,52% 58%,55% 20%,58% 58%,100% 58%,100% 100%);
	pointer-events:none;}
.hero__inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-16) 0 var(--space-12);}
.hero--horizon-band .hero__content{max-width:880px;}
.hero__content{max-width:880px;}
.hero:not(.hero--request) .hero__inner{min-height:280px;justify-content:center;}
/* Eyebrow: a tracked uppercase label on the bone, not a chip. Same register
   as H3 and the nav row — one label system across the whole build. */
.hero__eyebrow{display:inline-block;font-family:var(--font-display);color:var(--color-primary);font-weight:var(--fw-semibold);font-size:var(--text-xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;padding-bottom:var(--space-2);margin-bottom:var(--space-5);border-bottom:1px solid color-mix(in srgb,var(--color-text) 22%,transparent);}
/* The H1 is the LCP element. Sentence case, weight 500, positive tracking —
   it tops out at the declared 2.75rem desktop base. */
.hero__title{font-family:var(--font-display);font-size:clamp(2.05rem,5vw,var(--text-4xl));font-weight:var(--fw-medium);text-transform:none;letter-spacing:var(--track-display);line-height:var(--lh-tight);margin-bottom:var(--space-4);color:var(--color-text);}
.hero__subtitle{font-size:var(--text-lg);line-height:var(--lh-snug);margin-bottom:var(--space-6);color:var(--color-muted);max-width:56ch;}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-5);align-items:center;}
/* The phone reads as a fact, not as a shout: display face, tabular figures,
   graphite ink on bone (8.62:1). */
.hero__phone{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-lg);letter-spacing:var(--track-display);color:var(--color-primary);line-height:1;min-height:44px;}
.hero__phone:hover{color:var(--color-accent-hover);text-decoration:underline;text-decoration-color:var(--color-accent);text-decoration-thickness:2px;text-underline-offset:5px;}
.hero__phone svg{width:1em;height:1em;flex:none;}
/* The three-cell logistics strip (walking minutes / stops / gradient) that
   closes the upper band. Hairline-divided cells, tabular figures. Renders
   only where the markup supplies it; see the markup note in the receipt. */
.hero__logistics{display:flex;flex-wrap:wrap;margin-top:var(--space-6);border-top:1px solid color-mix(in srgb,var(--color-text) 18%,transparent);}
.hero__logistics > *{flex:1 1 8rem;padding:var(--space-3) var(--space-4) 0 0;}
.hero__logistics > * + *{border-left:1px solid color-mix(in srgb,var(--color-text) 14%,transparent);padding-left:var(--space-4);}
.hero__logistics dt,.hero__logistics .hero__logistics-label{display:block;font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--track-eyebrow);color:var(--color-muted);}
.hero__logistics dd,.hero__logistics .hero__logistics-value{display:block;margin:var(--space-1) 0 0;font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--fw-semibold);color:var(--color-text);}
/* Optional media (hero--has-media). Nothing in this build ships one — the
   zero-photo decision is locked — but if a page sets a hero image it renders
   as a hairline-ruled inset BELOW the text, never as a background wash and
   never inside the lower band. */
.hero__media{position:relative;z-index:1;margin:var(--space-6) 0 0;max-width:880px;border:1px solid var(--color-border);}
.hero__media img{width:100%;height:auto;}
/* The donor's cream outline button has no dark band to sit on here. */
.hero .btn--on-dark{border-color:color-mix(in srgb,var(--color-text) 38%,transparent);color:var(--color-text);}
.hero .btn--on-dark:hover{background:var(--color-text);border-color:var(--color-text);color:var(--color-surface);}

/* Full-width request band directly below the hero — a tinted panel-grid
   band, hairline-ruled, with the 3-step wizard card centred inside. */
.dossier__band{position:relative;background-color:var(--color-surface-2);background-image:var(--pg-grid);border-block:1px solid var(--color-border);padding:var(--space-12) 0 var(--space-16);}
.dossier__shell{width:100%;max-width:760px;margin:0 auto;}

/* Quote form card — flat white plate, hairline rule, a 2px accent rule at
   the head (a rule, not a slab: the 6px bar was the awning treatment). */
.dossier-wrap{background:var(--color-white);border:1px solid var(--color-border);border-top:2px solid var(--color-accent);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:var(--space-8);color:var(--color-text);text-align:left;}
.dossier-wrap h2{font-size:var(--text-2xl);margin-bottom:var(--space-6);}
.dossier .field{margin-bottom:var(--space-4);}
.dossier label{display:block;font-weight:var(--fw-semibold);font-size:var(--text-sm);margin-bottom:var(--space-2);color:var(--color-text);}
.dossier input,.dossier select,.dossier textarea{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius);font-size:var(--text-base);font-family:inherit;background:#fff;transition:border-color var(--transition),box-shadow var(--transition);}
.dossier input:focus,.dossier select:focus,.dossier textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),.20);}
.dossier textarea{min-height:96px;resize:vertical;}
.dossier .btn{margin-top:var(--space-2);}
.dossier__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.dossier__feedback{margin-top:var(--space-3);font-weight:var(--fw-medium);}
.dossier__feedback.is-success{color:var(--color-success);}
.dossier__feedback.is-error{color:var(--color-accent-hover);}
.spinner{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.45);border-top-color:#FFFFFF;border-radius:50%;}
.is-loading .spinner{display:inline-block;animation:ecb-spin .7s linear infinite;}
@keyframes ecb-spin{to{transform:rotate(360deg);}}
.form-fallback{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-6);text-align:center;color:var(--color-text);}

/* 7. TRUST / OPEN NOW --------------------------------------------------- */
.trust-bar{background:var(--color-white);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}
.trust-bar__inner{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);align-items:center;justify-content:center;padding:var(--space-6) 0;text-align:center;}
.trust-bar__inner>*{position:relative;}
@media(min-width:768px){
	.trust-bar__inner>*+*::before{content:"";position:absolute;left:calc(var(--space-8) / -2);top:50%;transform:translateY(-50%);width:2px;height:32px;background:var(--color-border);}
}
.trust-bar .trust-badges{padding:var(--space-5) var(--space-4);border-top:1px solid var(--color-border);margin-top:var(--space-4);}
.trust-rating{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--fw-semibold);}

.trust-metric{display:flex;flex-direction:column;}
.trust-metric__value{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--fw-semibold);letter-spacing:var(--track-display);color:var(--color-primary);line-height:1;}
.trust-metric__label{font-size:var(--text-sm);color:var(--color-muted);}
.trust-chip{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-sm);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-1) var(--space-3);}
.trust-badges{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);justify-content:center;align-items:center;}
.trust-badge{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-base);font-weight:var(--fw-semibold);color:var(--color-text);line-height:1;}
.trust-badge svg{width:20px;height:20px;flex:none;color:var(--color-success);}

.open-now{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--fw-semibold);font-size:var(--text-sm);}
.open-now__dot{width:9px;height:9px;border-radius:50%;background:var(--color-muted);}
.open-now.is-open .open-now__dot{background:var(--color-success);box-shadow:0 0 0 3px rgba(37,96,60,.35);}
.open-now.is-closed .open-now__dot{background:var(--color-accent);}

/* 8. CARDS / SILO (float — flat, seamed, no lift) ----------------------- */
/* `float` is the most-reused card token in the network (six prior builds).
   The echo is a large radius + a hover LIFT + a reserved image box; all
   three are gone. 4px radius, a flat 0 2px 6px -2px shadow at 20%
   text-alpha, a 1px seam at the top edge that continues the panel-grid
   vertical pitch, and NO hover lift — the cards read as panels in the grid
   rather than as tiles floating over it.
   ⚠ `transform` is deliberately absent from the transition list: leaving it
   there is how the next hover state quietly restores the lift. */
.card{position:relative;background:var(--color-white);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--transition),border-color var(--transition);}
/* The seam. Dashes fall on the 28px panel pitch, so a row of cards keeps
   step with the texture on the band behind them. */
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:1;pointer-events:none;
	background-image:repeating-linear-gradient(to right,color-mix(in srgb,var(--color-text) 22%,transparent) 0 14px,transparent 14px var(--pg-x));}
.card:hover,.card:focus-within{box-shadow:0 3px 8px -2px rgba(29,28,25,.24);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent);}
/* Zero-photo: the media slot exists only when an image does. No reserved
   box and no aspect-ratio placeholder to collapse into a grey rectangle. */
.card__media{display:none;}
.card__media:has(img){display:block;}
.card__media img{width:100%;height:auto;display:block;}
/* The provider-name seam row, for the markup that carries it: a rendered,
   never-collapsible slot on the card's top edge, on the same pitch. */
.card__seam{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-bottom:1px solid color-mix(in srgb,var(--color-text) 11%,transparent);font-family:var(--font-display);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--track-eyebrow);color:var(--color-muted);
	background-image:repeating-linear-gradient(to right,transparent 0 calc(var(--pg-x) - 1px),color-mix(in srgb,var(--color-text) 6%,transparent) calc(var(--pg-x) - 1px) var(--pg-x));}
.card__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);flex:1;}
.card__title{font-size:var(--text-lg);margin:0;}
.card__excerpt{color:var(--color-muted);font-size:var(--text-sm);margin:0;text-transform:none;letter-spacing:normal;}
.card__cta{margin-top:auto;font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--track-eyebrow);color:var(--color-accent-hover);display:inline-flex;align-items:center;gap:var(--space-1);}
.card__title a{color:inherit;}
.card__title a:hover{color:var(--color-primary);text-decoration:none;}
.card__cta svg{width:1em;height:1em;flex:none;}
/* Silo block — a tinted panel-grid band, hairline-ruled. */
.silo{position:relative;margin:var(--space-12) 0;padding:var(--space-12) 0;background-color:var(--color-surface-2);background-image:var(--pg-grid);border-block:1px solid var(--color-border);}
.silo__heading{margin-bottom:var(--space-6);font-size:var(--text-2xl);text-align:left;padding-left:var(--space-4);}
.silo__links{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-start;padding:0 var(--space-4);}
.silo__links a{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--color-text);transition:var(--transition);}
.silo__links a:hover{background:var(--color-primary);color:var(--color-on-dark);border-color:var(--color-primary);text-decoration:none;}

/* 9. FAQ ---------------------------------------------------------------- */
.faq{padding:var(--space-16) 0;}
.faq__heading{text-align:left;margin-bottom:var(--space-8);font-size:var(--text-2xl);max-width:760px;margin-left:auto;margin-right:auto;}
/* Hairline rule under the head — architectural, in register with the horizon
   and the nav row. (The donor closed its heads with a 64×6px awning slab.) */
.faq__heading::after{content:"";display:block;width:96px;height:1px;background:color-mix(in srgb,var(--color-text) 34%,transparent);margin-top:var(--space-4);}
.faq__list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-3);}
.faq__item{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-white);overflow:hidden;transition:box-shadow var(--transition);}
.faq__item:hover{box-shadow:var(--shadow-sm);}
.faq__item[open]{box-shadow:var(--shadow-sm);}
.faq__summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-6);cursor:pointer;list-style:none;transition:background var(--transition);}
.faq__summary::-webkit-details-marker{display:none;}
.faq__summary::marker{content:"";}
.faq__item[open] .faq__summary{background:var(--color-surface);}
.faq__summary:hover .faq-question{color:var(--color-primary);}
.faq-question{font-family:var(--font-display);font-size:var(--text-lg);margin:0;font-weight:var(--fw-bold);line-height:1.4;transition:color var(--transition);}
.faq__chevron{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);background:var(--color-surface-2);color:var(--color-primary);transition:transform var(--transition),background var(--transition),color var(--transition);}
.faq__chevron svg{width:18px;height:18px;transform:rotate(90deg);}
.faq__item[open] .faq__chevron{transform:rotate(180deg);background:var(--color-primary);color:#fff;}
.faq__answer{padding:0 var(--space-6) var(--space-6);color:var(--color-muted);font-size:var(--text-base);line-height:var(--lh-normal);}
.faq__answer p:last-child{margin-bottom:0;}

/* 10. CTA BANNER -------------------------------------------------------- */
/* A tinted panel plate — hairline rule, flat shadow, panel-grid wash. */
.cta-banner{position:relative;background-color:var(--color-surface-2);background-image:var(--pg-grid);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:var(--space-16) var(--space-8);text-align:center;margin:var(--space-16) auto;}
.cta-banner h2{color:var(--color-text);}
.cta-banner p{color:var(--color-muted);margin-bottom:var(--space-6);}
.cta-banner__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;}
.cta-banner .btn--on-dark{border-color:color-mix(in srgb,var(--color-text) 38%,transparent);color:var(--color-text);}
.cta-banner .btn--on-dark:hover{background:var(--color-text);border-color:var(--color-text);color:var(--color-surface);}

/* 11. TESTIMONIALS ------------------------------------------------------ */
.testimonials{position:relative;padding:var(--space-16) 0;background-color:var(--color-surface-2);background-image:var(--pg-grid);border-block:1px solid var(--color-border);}
.testimonials__track{display:grid;gap:var(--space-6);}
.testimonial{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:var(--space-6);}

.testimonial__text{font-size:var(--text-lg);margin-bottom:var(--space-4);}
.testimonial__author{font-weight:var(--fw-semibold);}
.testimonial__location{color:var(--color-muted);font-size:var(--text-sm);}

/* 12. E-E-A-T ----------------------------------------------------------- */
.author-box{display:flex;flex-wrap:wrap;gap:var(--space-6);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:var(--space-8);margin:var(--space-16) 0;}
.author-box__photo img{width:96px;height:96px;border-radius:50%;object-fit:cover;}
.author-box__body{flex:1;min-width:240px;}
/* Same tracked-uppercase label register as the hero eyebrow, H3 and the nav
   row — a rule beneath, no chip fill. */
.author-box__eyebrow{display:inline-block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--track-eyebrow);font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--color-primary);padding:0 0 var(--space-1);border-bottom:1px solid color-mix(in srgb,var(--color-text) 22%,transparent);}
.author-box__name{font-size:var(--text-xl);margin:var(--space-1) 0;}
.author-box__creds{color:var(--color-primary);font-weight:var(--fw-semibold);font-size:var(--text-sm);margin-bottom:var(--space-2);}
.author-box__social{display:flex;gap:var(--space-3);margin-top:var(--space-3);}
.author-box__social svg{width:1.2em;height:1.2em;}

.fact-check{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-muted);margin:var(--space-3) 0;}
.fact-check > svg{width:1.1em;height:1.1em;color:var(--color-success);flex:none;}
.fact-check__details{display:inline-flex;align-items:center;}
.fact-check__details summary{cursor:pointer;color:var(--color-primary);list-style:none;display:inline-flex;align-items:center;}
.fact-check__details summary::-webkit-details-marker{display:none;}
.fact-check__details summary::marker{content:"";}
.fact-check__details summary svg{width:1.1em;height:1.1em;}
.fact-check__panel{position:absolute;top:calc(100% + 6px);left:0;min-width:260px;max-width:min(420px,90vw);background:var(--color-white);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:var(--space-4);z-index:20;}
.fact-check__panel p{margin:0 0 var(--space-2);}
.fact-check__panel p:last-child{margin-bottom:0;}

.projects__grid{display:grid;gap:var(--space-6);grid-template-columns:1fr;}
@media(min-width:640px){.projects__grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.projects__grid{grid-template-columns:repeat(3,1fr);}}
.project-card{border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);overflow:hidden;background:var(--color-white);}
.project-card__images{display:grid;grid-template-columns:1fr 1fr;}
.project-card__images figure{margin:0;position:relative;}
.project-card__images figcaption{position:absolute;bottom:0;left:0;background:rgba(13,36,21,.88);color:var(--color-on-dark);font-size:var(--text-xs);padding:2px 8px;}
.project-card__body{padding:var(--space-6);}
.project-card__meta{font-size:var(--text-sm);color:var(--color-muted);margin-bottom:var(--space-2);}

.credentials{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center;padding:var(--space-8) 0;}
.credential{display:flex;align-items:center;gap:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);background:var(--color-white);}
.credential svg{width:1.4em;height:1.4em;color:var(--color-primary);}
.credential__value{font-weight:var(--fw-semibold);}

.awards{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center;justify-content:center;padding:var(--space-8) 0;}
.awards img{max-height:48px;width:auto;filter:grayscale(1);opacity:.75;transition:var(--transition);}
.awards a:hover img,.awards img:hover{filter:grayscale(0);opacity:1;}

.team-grid{display:grid;gap:var(--space-6);grid-template-columns:1fr;}
@media(min-width:640px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.team-grid{grid-template-columns:repeat(3,1fr);}}
.team-card{text-align:center;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:var(--space-6);}
.team-card__photo img{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto var(--space-3);}

.guarantees{display:grid;gap:var(--space-6);grid-template-columns:1fr;}
@media(min-width:640px){.guarantees{grid-template-columns:repeat(3,1fr);}}
.guarantee{text-align:center;padding:var(--space-6);}
.guarantee svg{width:2.4em;height:2.4em;color:var(--color-primary);margin-bottom:var(--space-2);}

.freshness{font-size:var(--text-sm);color:var(--color-muted);margin:var(--space-3) 0;}

/* 13. BREADCRUMBS / PROSE / BLOG --------------------------------------- */
.breadcrumbs{font-size:var(--text-sm);padding:var(--space-3) 0;background:var(--color-surface-2);border-bottom:1px solid var(--color-border);}
.breadcrumbs__list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;}
.breadcrumbs__item+.breadcrumbs__item::before{content:"/";margin-right:var(--space-2);color:var(--color-muted);}
.content-narrow{max-width:760px;margin-left:auto;margin-right:auto;}
.prose-content{max-width:var(--width-content);margin:0 auto;padding:var(--space-12) var(--space-4);font-size:var(--text-lg);}
.prose-content.content-narrow{max-width:760px;}
.prose-content h2{font-size:var(--text-2xl);margin-top:var(--space-12);}
.prose-content h3{font-size:var(--text-xl);margin-top:var(--space-8);}
.prose-content h2:first-child,.prose-content h3:first-child{margin-top:0;}
.prose-content a{text-decoration:underline;text-underline-offset:2px;}
.prose-content img{border:1px solid var(--color-border);border-radius:var(--radius-sm);margin:var(--space-6) 0;}
.post-thumb img{border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:var(--space-6);}
.entry-meta{color:var(--color-muted);font-size:var(--text-sm);margin-bottom:var(--space-6);}
.post-list{display:grid;gap:var(--space-8);}
.pagination{margin-top:var(--space-12);}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-weight:var(--fw-semibold);color:var(--color-text);transition:var(--transition);}
.pagination .page-numbers.current{background:var(--color-primary);color:var(--color-on-dark);border-color:var(--color-primary);}
.pagination a.page-numbers:hover{background:var(--color-surface-2);color:var(--color-primary-hover);text-decoration:none;}

/* Read More (collapsible) — JS-gated so no-JS shows everything. */
.readmore__btn{display:none;margin-top:var(--space-6);}
.readmore--center{text-align:center;}
.readmore--right{text-align:right;}
.readmore__visible,.readmore__hidden,.readmore__inner{text-align:left;}
.js .readmore.is-ready .readmore__btn{display:inline-flex;}
.js .readmore--block.is-ready .readmore__btn{display:flex;width:100%;}
.js .readmore.is-collapsed .readmore__hidden{display:none;}
.readmore--height{position:relative;}
.js .readmore--height.is-collapsed .readmore__inner{max-height:var(--readmore-h,480px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent);}
@media(prefers-reduced-motion:no-preference){
	.js .readmore--height .readmore__inner{transition:max-height var(--transition);}
}

/* 14. FOOTER ------------------------------------------------------------ */
/* The footer floor is the ONLY dark surface on this branch (there is no dark
   feature band mid-page) and it is closed by a 2px primary rule, the same
   drawn line as the hero's horizon — the composition ends the way it began. */
.site-footer{position:relative;background:var(--color-dark-2);color:var(--color-on-dark-muted);border-top:2px solid var(--color-primary);padding:var(--space-16) 0 var(--space-12);margin-top:var(--space-20);}
.site-footer a{color:var(--color-on-dark);}
.site-footer a:hover{color:#fff;}
.footer-grid{display:grid;gap:var(--space-8);grid-template-columns:1fr;}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr;}}
.footer-widget__title,.site-footer h3{color:#fff;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--track-eyebrow);font-family:var(--font-display);font-weight:var(--fw-semibold);margin-bottom:var(--space-4);}
.footer-tagline{color:var(--color-on-dark);font-weight:var(--fw-semibold);}
.site-footer p{margin-bottom:var(--space-2);color:var(--color-on-dark-muted);}
.footer-menu,.site-footer ul{list-style:none;padding:0;margin:0;}
.footer-menu li{margin-bottom:var(--space-2);}
.footer-menu a:hover{color:#fff;text-decoration:underline;}
.footer-license{font-size:var(--text-sm);color:var(--color-on-dark-muted)!important;}
.footer-social{display:flex;gap:var(--space-3);margin-top:var(--space-4);}
.footer-social a{width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--radius-full);background:rgba(255,255,255,.08);transition:var(--transition);}
.footer-social a:hover{background:var(--color-primary);color:#fff;}
.footer-social a{display:inline-flex;}
.footer-social svg{width:1.4em;height:1.4em;}
.footer-bottom{border-top:1px solid var(--color-dark-border);margin-top:var(--space-8);padding-top:var(--space-6);font-size:var(--text-sm);text-align:center;}

/* Mobile sticky conversion bar — graphite base, green Text action, white ink
   (5.28:1, the batch minimum: never lighten the fill, never fade the label). */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;background:var(--color-dark);border-top:2px solid var(--color-dark-2);}
.sticky-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);color:var(--color-on-dark);font-weight:var(--fw-bold);}
.sticky-bar a+a{border-left:1px solid var(--color-dark-border);}
.sticky-bar a:last-child{background:var(--color-accent);color:#FFFFFF;}
.sticky-bar svg{width:1.2em;height:1.2em;}
@media(min-width:960px){.sticky-bar{display:none;}}
body.has-sticky-bar{padding-bottom:64px;}
@media(min-width:960px){body.has-sticky-bar{padding-bottom:0;}}

/* 15. UTILITIES / A11Y / MOTION ---------------------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:var(--color-primary);padding:var(--space-3);z-index:1000;}
.skip-link:focus{left:var(--space-3);}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;}
.text-center{text-align:center;}
/* Section heads: left-aligned sentence-case display, closed by a 96×1px
   HAIRLINE. The donor closed its heads with a 64×6px slab — the awning
   treatment — which is exactly the register this branch does not have. */
.section-head{text-align:left;max-width:760px;margin:0 0 var(--space-8);}
.section-head h1,.section-head h2{font-size:var(--text-2xl);margin-bottom:var(--space-3);}
h2.section-head{font-size:var(--text-2xl);margin:0 0 var(--space-6);max-width:760px;}
.section-head>h2::after,.section-head>h1::after,h2.section-head::after{content:"";display:block;width:96px;height:1px;border-radius:0;background:color-mix(in srgb,var(--color-text) 34%,transparent);margin:var(--space-4) 0 0;}
.section-head p{color:var(--color-muted);font-size:var(--text-lg);line-height:var(--lh-snug);margin:0;}
.section--dark .section-head p{color:var(--color-muted);}
@media(min-width:720px){
	.section-head h1,.section-head h2,h2.section-head{font-size:var(--text-3xl);}
}

/* Scroll reveal — only with JS + motion allowed. */
.js .reveal{opacity:0;transform:translateY(16px);}
@media(prefers-reduced-motion:no-preference){
	.js .reveal{transition:opacity .5s ease,transform .5s ease;}
	.js .reveal.is-visible{opacity:1;transform:none;}
}
@media(prefers-reduced-motion:reduce){
	html{scroll-behavior:auto;}
	.js .reveal{opacity:1;transform:none;}
	*{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}
.no-js .reveal{opacity:1;transform:none;}

/* 16. QUOTE WIZARD (3-step lead form) ----------------------------------- */
.walk-dossier__head{text-align:center;margin-bottom:var(--space-6);}
.walk-dossier__title{font-size:var(--text-2xl);margin-bottom:var(--space-2);}
.walk-dossier__sub{color:var(--color-muted);margin:0;}

.dossier__steps{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-2);margin:0 0 var(--space-8);padding:0;}
.dossier__steps__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);position:relative;color:var(--color-muted);font-size:var(--text-sm);font-weight:var(--fw-semibold);text-align:center;}
.dossier__steps__item:not(:first-child)::before{content:"";position:absolute;top:17px;right:50%;left:-50%;height:2px;background:var(--color-border);z-index:0;}
.dossier__steps__item.is-active::before,.dossier__steps__item.is-done::before{background:var(--color-primary);}
.dossier__steps__num{position:relative;z-index:1;width:36px;height:36px;border-radius:var(--radius-full);background:var(--color-surface-2);border:1px solid var(--color-border);color:var(--color-muted);display:inline-flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);}
.dossier__steps__item.is-active .dossier__steps__num,.dossier__steps__item.is-done .dossier__steps__num{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
.dossier__steps__item.is-active{color:var(--color-text);}
.dossier__steps__label{line-height:1.2;}
.walk-dossier.is-enhanced .dossier__steps__item.is-done{cursor:pointer;}
@media(max-width:479px){.dossier__steps__label{display:none;}}

.dossier__step+.dossier__step{margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--color-border);}
.walk-dossier.is-enhanced .dossier__step{display:none;margin-top:0;padding-top:0;border-top:0;}
.walk-dossier.is-enhanced .dossier__step.is-active{display:block;}
.dossier__step__heading{font-size:var(--text-lg);margin:var(--space-6) 0 var(--space-4);}
.dossier__step__heading:first-child{margin-top:0;}

.dossier__grid{display:grid;grid-template-columns:1fr;gap:var(--space-4) var(--space-5);}
@media(min-width:560px){.dossier__grid{grid-template-columns:1fr 1fr;}}
.dossier__grid .field{margin-bottom:0;}
.field--full{grid-column:1 / -1;}

.dossier__nav{display:flex;gap:var(--space-3);margin-top:var(--space-8);align-items:center;justify-content:space-between;flex-wrap:wrap;}
.dossier__nav--end{justify-content:flex-end;}
.dossier__nav__btn{display:none;}
.walk-dossier.is-enhanced .dossier__nav__btn{display:inline-flex;}
.dossier__submit{margin-left:auto;}

/* Service option cards (Step 2) — same outline-and-hard-shadow family. */
.service-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);}
@media(min-width:560px){.service-grid{grid-template-columns:1fr 1fr;}}
.service-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;background:var(--color-white);transition:border-color var(--transition),box-shadow var(--transition);}
.service-card:hover{border-color:var(--color-text);}
.service-card__input{position:absolute;opacity:0;width:1px;height:1px;}
.service-card__media{position:relative;aspect-ratio:16/10;background:var(--color-surface-2);display:flex;align-items:center;justify-content:center;color:rgba(var(--color-primary-rgb),.35);}
.service-card__media img{width:100%;height:100%;object-fit:cover;}
.service-card__tick{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:var(--radius-full);background:var(--color-primary);color:#fff;display:none;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);}
.service-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1;}
.service-card__title{font-weight:var(--fw-bold);font-size:var(--text-lg);}
.service-card__models{color:var(--color-muted);font-size:var(--text-sm);}
.service-card__chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-1) 0;}
.chip{font-size:var(--text-xs);font-weight:var(--fw-semibold);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:3px 10px;color:var(--color-muted);}
.service-card__price{margin-top:auto;padding-top:var(--space-2);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-lg);color:var(--color-text);}
.service-card.is-selected{border-color:var(--color-text);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),.20);}
.service-card.is-selected .service-card__tick{display:inline-flex;}
.service-card__input:focus-visible+.service-card__media{outline:3px solid var(--color-accent);outline-offset:-3px;}

/* Extras list (Step 3) */
.extras-list{display:flex;flex-direction:column;gap:var(--space-3);}
.extra-card{position:relative;display:flex;align-items:center;gap:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-4) var(--space-5);cursor:pointer;background:var(--color-white);transition:border-color var(--transition),box-shadow var(--transition);}
.extra-card:hover{border-color:var(--color-text);}
.extra-card__input{position:absolute;opacity:0;width:1px;height:1px;}
.extra-card__check{flex:none;width:26px;height:26px;border-radius:var(--radius-sm);border:1px solid var(--color-border);display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:var(--transition);}
.extra-card__check svg{opacity:0;}
.extra-card__body{display:flex;flex-direction:column;}
.extra-card__title{font-weight:var(--fw-semibold);}
.extra-card__price{color:var(--color-muted);font-size:var(--text-sm);}
.extra-card.is-selected{border-color:var(--color-text);box-shadow:0 0 0 3px rgba(var(--color-accent-rgb),.18);}
.extra-card.is-selected .extra-card__check{background:var(--color-primary);border-color:var(--color-primary);}
.extra-card.is-selected .extra-card__check svg{opacity:1;}
.extra-card__input:focus-visible+.extra-card__check{outline:3px solid var(--color-accent);outline-offset:2px;}

/* =========================================================================
 * 17. Per-city DIRECTORY (off by default in this lead-gen build) +
 *     FEATURED #1 hero badge. Kept + self-hiding; hairline panel retint.
 * ====================================================================== */
.directory{position:relative;padding:var(--space-16) 0;background-color:var(--color-surface-2);background-image:var(--pg-grid);border-block:1px solid var(--color-border);}
.directory__heading{text-align:left;margin-bottom:var(--space-8);font-size:var(--text-2xl);font-weight:var(--fw-semibold);}
.directory__heading::after{content:"";display:block;width:96px;height:1px;background:color-mix(in srgb,var(--color-text) 34%,transparent);margin-top:var(--space-4);}
.directory__list{display:grid;gap:var(--space-6);grid-template-columns:1fr;}
@media(min-width:680px){.directory__list{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.directory__list{grid-template-columns:repeat(3,1fr);}}

.directory__card{position:relative;display:flex;flex-direction:column;gap:var(--space-3);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:var(--space-6);transition:box-shadow var(--transition);}
.directory__card:hover{box-shadow:var(--shadow-lg);}
.directory__card--featured{border-color:var(--color-accent);}
/* paid-card star glyph removed 2026-07-30: it reused rating iconography to mean "paid". A word label is emitted in PHP instead. */

.directory__name{font-size:var(--text-lg);font-weight:var(--fw-bold);margin:0;color:var(--color-text);}



.directory__desc{margin:0;color:var(--color-muted);font-size:var(--text-sm);line-height:var(--lh-normal);}
.directory__meta{display:flex;align-items:flex-start;gap:var(--space-2);margin:0;color:var(--color-muted);font-size:var(--text-sm);}
.directory__icon{display:inline-flex;flex:none;color:var(--color-primary);margin-top:2px;}
.directory__icon svg{width:1em;height:1em;}

.directory__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:auto;padding-top:var(--space-3);}
.directory__action{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--fw-semibold);border:1px solid var(--color-border);background:var(--color-white);color:var(--color-primary);transition:var(--transition);}
.directory__action svg{width:1em;height:1em;}
.directory__action:hover{text-decoration:none;border-color:var(--color-text);background:var(--color-surface-2);color:var(--color-primary-hover);}
/* Call action — the one accent FILL in this component, WHITE ink (5.28:1). */
.directory__action--call{background:var(--color-accent);border-color:var(--color-accent);color:#FFFFFF;}
.directory__action--call:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:#FFFFFF;}

.hero__featured-badge{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--color-accent);color:#FFFFFF;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);margin-bottom:var(--space-4);}
.hero__featured-badge svg{width:1.1em;height:1.1em;}

.hero__featured-tagline{display:block;margin:calc(-1 * var(--space-4)) 0 var(--space-5);color:var(--color-muted);font-size:var(--text-lg);font-weight:var(--fw-semibold);max-width:48ch;}

/* =========================================================================
 * CONVERSION PACK — promo bar, area checker, video facade, map embed
 * ====================================================================== */
.promo-bar{display:block;background:var(--color-accent);color:#FFFFFF;text-align:center;font-size:var(--text-sm);font-weight:var(--fw-bold);letter-spacing:var(--track-display);}
.promo-bar__inner{display:block;padding:var(--space-2) var(--space-4);}
a.promo-bar{text-decoration:none;}
a.promo-bar:hover{background:var(--color-accent-hover);color:#FFFFFF;text-decoration:underline;text-underline-offset:3px;}
.promo-bar--dark{background:var(--color-dark);color:var(--color-on-dark);border-top:1px solid var(--color-dark-border);border-bottom:1px solid var(--color-dark-border);}
a.promo-bar--dark:hover{background:var(--color-dark-2);color:#fff;}

/* Areas we cover — chips + area checker. */
.local-areas{padding:var(--space-8) 0;}
.local-areas__heading{text-align:left;margin-bottom:var(--space-6);font-size:var(--text-2xl);}
.local-areas__heading::after{content:"";display:block;width:96px;height:1px;background:color-mix(in srgb,var(--color-text) 34%,transparent);margin-top:var(--space-3);}
.area-chips{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-start;margin:0 0 var(--space-8);padding:0;}
.area-chips li{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--color-text);}
.area-check{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-start;align-items:stretch;max-width:560px;margin:0;}
.area-check__label{flex:1;min-width:220px;display:block;}
.area-check input[type="search"]{width:100%;height:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius);font-size:var(--text-base);font-family:inherit;background:#fff;color:var(--color-text);transition:border-color var(--transition),box-shadow var(--transition);}
.area-check input[type="search"]:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),.20);}
.area-check__result{max-width:560px;margin:var(--space-6) 0 0;padding:var(--space-5) var(--space-6);border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-white);text-align:left;}
.area-check__result.is-yes{border-color:var(--color-success);background:rgba(37,96,60,.08);}
.area-check__msg{font-weight:var(--fw-semibold);margin:0 0 var(--space-3);color:var(--color-text);}
.area-check__result.is-yes .area-check__msg{color:var(--color-success);}

/* Video facade — click-to-load privacy embed. */
/* The click-to-load facade keeps a dark plate (it stands in for a video
   frame, not for a page band) but takes the panel rhythm instead of the
   awning stripes — white ink at 6%, the same 28px pitch. */
.video-facade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-8) var(--space-4);border-radius:var(--radius);background-color:var(--color-dark);background-image:repeating-linear-gradient(to right,transparent 0 calc(var(--pg-x) - 1px),rgba(255,255,255,.06) calc(var(--pg-x) - 1px) var(--pg-x));border:1px solid var(--color-dark-border);color:var(--color-on-dark);font-weight:var(--fw-semibold);font-size:var(--text-sm);text-decoration:none;transition:box-shadow var(--transition);}
.video-facade:hover{color:#fff;text-decoration:none;box-shadow:var(--shadow-sm);}
.video-facade__play{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--radius-full);background:var(--color-accent);color:#FFFFFF;font-size:var(--text-2xl);}
.video-facade__play svg{margin-left:2px;}
.video-embed{margin-top:var(--space-4);}
.video-embed iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius-sm);}

/* Map embed. */
.map-embed{padding:var(--space-8) 0;}
.map-embed iframe,.ecb-map iframe{display:block;width:100%;min-height:320px;border:1px solid var(--color-border);border-radius:var(--radius-sm);}

/* Tool page (page-tool.php) — quiet chrome for linkable assets. */
.tool-header{border-bottom:2px solid var(--color-border, #DBD9D1);padding:var(--space-3, .75rem) 0;background:var(--color-surface, #F4F3EF);}
.tool-header__inner{display:flex;align-items:center;justify-content:center;}
.tool-header .custom-logo-link img{max-height:36px;width:auto;}
.tool-header__title{margin:0;font-size:var(--text-base, 1rem);font-weight:700;}
.tool-header__title a{color:var(--color-text);text-decoration:none;}
.tool-page__inner{max-width:var(--width-content, 720px);padding-top:var(--space-8, 2rem);padding-bottom:var(--space-12, 3rem);}
.tool-page__title{font-size:var(--text-2xl, 1.73rem);margin:0 0 var(--space-6, 1.5rem);}
.tool-footer{border-top:2px solid var(--color-border, #DBD9D1);padding:var(--space-6, 1.5rem) 0;margin-top:var(--space-8, 2rem);}
.tool-footer__inner{display:flex;flex-wrap:wrap;gap:var(--space-4, 1rem);justify-content:center;font-size:var(--text-sm, .875rem);color:var(--color-muted, #5C5A53);}
.tool-footer__inner p{margin:0;}
.tool-footer__inner a{color:inherit;}