/* ── The one self-hosted WOFF2 in the network (DESIGN-ALLOCATION §6.2) ──────
   Nunito 700, SIL OFL 1.1, instanced from the google/fonts OFL variable
   release at wght=700 and subset LOCALLY to the range below (423 glyphs,
   17.5 KB). It is a FIRST-PARTY file: a Google Fonts runtime request would
   send visitor IPs to a third party before consent, which is an AZOP-enforced
   problem on an EU site and exactly what this build's consent layer exists to
   prevent.
   The range includes latin-ext because Croatian needs č ć đ š ž — verified by
   cmap inspection, not assumed. A latin-only subset would break the branch's
   own place names. */
@font-face{
	font-family:"Nunito";
	src:url("../fonts/nunito-700-lat-ext.woff2") format("woff2");
	font-weight:700; font-style:normal; font-display:swap;
	unicode-range:U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20AC;
}

/* =========================================================================
   Footnote Zagreb — main.css
   Profile: city-quirk (lozenge — walking-tour network branch B4, Zagreb HR).
   Axes: rounded-friendly type (1.333 ratio, −.015em NEGATIVE tracking, 700
   headings, 1.15 leading, H1 3rem, LOWERCASE tracked eyebrows, self-hosted
   Nunito display) / boxed-card hero (surface card on a lattice FIELD, 24px
   radius, corner lozenge chip, NO photograph) / split-head rhythm (H2 left,
   intro right, lozenge chip on the H2 baseline, one lattice-tinted rule under
   both columns, NO bands and NO dark feature section) / horizontal cards
   (numbered lozenge TILE as the left column — not an image slot) / pill-nav
   header (detached, floating, fully-rounded, nav items as pills) /
   tile-lozenge texture (22px 45° lattice at ≤7% + the MARKER GLYPH, which is
   the load-bearing half of the token).
   Olive primary + blue CTA on warm paper; the batch's best CTA contrast.
   Register: cheerful, opinionated, confident roundness — the quirk lives in
   the SHAPES and the voice, never in unreadable type.
   ⚠ Zagreb Cathedral is NEVER drawn with two complete spires (it has been
   under restoration; a drawn illustration is still a factual claim), and the
   St Mark's coat of arms is NEVER reproduced — the lattice abstracts the ROOF
   PATTERN only, two colours maximum.
   Zero images: every texture is a CSS gradient or a clip-path; the only url()
   in the file is the @font-face above. No <img>, no icon font.
   See DESIGN-MANIFEST.json and walking-tour-network/DESIGN-ALLOCATION.md
   §5.7 / §5.9 / §7.4 / §8.1 / §8.2.
   1. Design tokens (:root)
   2. Reset / base (rounded-friendly type, the lozenge list marker)
   3. Layout (container, grid, split-head rhythm, tile-lozenge lattice fields)
   4. Buttons + links (pill plates)
   5. Header / nav / top bar (pill-nav: detached floating pill, pill items)
   6. Hero (boxed-card: surface card on a lattice field, corner chip, no photo)
   7. Trust signals / Open Now
   8. Cards + silo grids (horizontal: numbered lozenge tile + body)
   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 (split-head section heads, tabular figures)
   16. Quote wizard (3-step lead form)
   17. Directory (off by default) + conversion pack
   ====================================================================== */

/* 1. TOKENS ------------------------------------------------------------- */
:root{
	/* ── LOZENGE · city-quirk · Zagreb ─────────────────────────────────────
	   Palette from DESIGN-ALLOCATION §7.4, measured in research/matrix.json.
	   Reads as a cheerful, opinionated local walking brand with a slightly
	   silly name it is not embarrassed by — the only branch in the batch
	   allowed to be funny. Customizer overrides primary/accent/text + hovers. */
	--color-primary:#3E6B11;        /* olive: brand, links, lattice ink */
	--color-accent:#2A4FBF;         /* blue: every CTA fill (WHITE ink, 7.07:1 — the BATCH'S BEST) */
	--color-text:#1A2013;           /* near-black olive body text (15.71:1 on surface) */
	--color-primary-hover:#33580E;
	--color-accent-hover:#22409C;   /* deeper blue: CTA hover (white ink 9.2:1) */

	--color-muted:#555B49;          /* olive-grey secondary text (6.6:1 on surface) */
	--color-surface:#FBF8F1;        /* warm paper */
	--color-surface-2:#F4F0E6;      /* deeper paper — the split-head alternate */
	--color-border:#E6E0D2;
	--color-white:#ffffff;
	--color-page:#FBF8F1;
	--color-success:#3E6B11;

	/* Dark family — warm olive-dark. split-head uses NO band and NO dark
	   feature section; dark is the footer floor only. */
	--color-dark:#2A3320;
	--color-dark-2:#1C2216;
	--color-on-dark:#FBF8F1;
	--color-on-dark-muted:#C9CBBC;
	--color-dark-border:#414A36;

	--color-primary-rgb:62,107,17;
	--color-accent-rgb:42,79,191;

	/* ── texture: tile-lozenge ────────────────────────────────────────────
	   St Mark's ROOF PATTERN abstracted to a lattice — 22px pitch, ≤7% alpha,
	   two 45° gradients crossing. ⚠ The coat of arms itself is NEVER
	   reproduced (§5.9); only the lattice geometry is borrowed.
	   The MARKER GLYPH is the load-bearing half of this token: it replaces
	   every list bullet, sits as the boxed card's corner chip, and is the
	   favicon's core shape. */
	--tl-p:22px;
	--tl-ink:color-mix(in srgb, var(--color-primary) 7%, transparent);
	--tl-lattice:
		repeating-linear-gradient( 45deg, transparent 0 calc(var(--tl-p) - 1px), var(--tl-ink) calc(var(--tl-p) - 1px) var(--tl-p)),
		repeating-linear-gradient(-45deg, transparent 0 calc(var(--tl-p) - 1px), var(--tl-ink) calc(var(--tl-p) - 1px) var(--tl-p));

	/* ── rounded-friendly scale — ratio 1.333 ─────────────────────────────
	   najamvozila uses the same TOKEN at ratio 1.25 with no declared tracking;
	   every number here is the declared inversion of that, and the self-hosted
	   Nunito is what makes the difference real on Windows (§8.1). */
	--text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-lg:1.333rem;
	--text-xl:1.777rem; --text-2xl:2.369rem; --text-3xl:3rem; --text-4xl:3.157rem;
	--text-5xl:4.209rem; --text-6xl:5.61rem;

	--fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;
	--lh-tight:1.15; --lh-snug:1.35; --lh-normal:1.6;

	/* NEGATIVE display tracking (najamvozila declares none). Eyebrows are
	   LOWERCASE and tracked — the pilot's are UPPERCASE, which is the
	   cleanest case inversion available between the two branches. */
	--track-display:-.015em;
	--track-eyebrow:.06em;

	--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:4rem; --space-20:5rem;

	--width-content:720px; --width-wide:1140px;
	/* The roundest branch by a distance — pill-nav needs --radius-full to mean it. */
	--radius-sm:8px; --radius:14px; --radius-lg:24px; --radius-full:999px;
	/* Soft, high-blur shadows. NO HOVER LIFT anywhere: the pills move, the cards do not. */
	--shadow-sm:0 4px 12px -6px rgba(26,32,19,.26);
	--shadow-md:0 8px 24px -10px rgba(26,32,19,.26);
	--shadow-lg:0 14px 40px -16px rgba(26,32,19,.26);
	--transition:160ms ease;
	--header-h:64px; --topbar-h:36px;

	/* Self-hosted Nunito leads on EVERY OS — that is the point of spending the
	   exception here. The rest of the stack only applies if the file fails.
	   BODY is a plain system stack, deliberately: the one plain body in the
	   batch, so the Nunito display does all the work (§8.1 body-stack table). */
	--font-display:'Nunito',ui-rounded,'SF Pro Rounded','Hiragino Maru Gothic ProN','Segoe UI',system-ui,sans-serif;
	--font:system-ui,-apple-system,'Segoe UI',Roboto,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;}
/* rounded-friendly headings (DESIGN-ALLOCATION §8.1, the honest-reuse row
   against najamvozila-theme). Every value here is the declared inversion:
   SENTENCE case H1/H2, weight 700 THROUGHOUT, tracking −.015em — NEGATIVE,
   where najamvozila declares none — leading 1.15, ratio 1.333, H1 base 3rem
   desktop. H3 is sentence case, not a label: the tracked-label register on
   this branch is LOWERCASE and belongs to eyebrows only (the pilot's are
   UPPERCASE, which is the case inversion between the two branches).
   ⚠ No heading rule in this file may carry a POSITIVE letter-spacing or a
   text-transform:uppercase — both belong to the pilot. */
h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--lh-tight);font-weight:var(--fw-bold);letter-spacing:var(--track-display);color:var(--color-text);margin:0 0 var(--space-4);text-transform:none;}
h1{font-size:2.25rem;}
h2{font-size:var(--text-xl);}
h3{font-size:var(--text-lg);}
h4{font-size:var(--text-base);}
/* H1 reaches its declared 3rem desktop base at the reading breakpoint — it
   does not grow past it; 1.333 puts H2 one step below at 2.369rem. */
@media(min-width:720px){h1{font-size:var(--text-3xl);} h2{font-size:var(--text-2xl);} h3{font-size:var(--text-xl);} h4{font-size:var(--text-lg);}}
p{margin:0 0 var(--space-4);}
ul,ol{margin:0 0 var(--space-4);padding-left:1.25rem;}

/* ── texture: tile-lozenge — THE MARKER GLYPH ───────────────────────────────
   The load-bearing half of the token. A 4-point diamond in the accent blue,
   cut with clip-path so it costs no asset and no icon font. It is the same
   shape at every size: the list bullet, the boxed card's corner chip, the
   split-head baseline chip and the favicon's core.
   ⚠ It abstracts the St Mark's ROOF TILE. The coat of arms itself is never
   reproduced, and the lattice never carries more than two colours (§5.9). */
.lozenge-mark{display:inline-block;width:.7em;height:.7em;flex:none;background:var(--color-accent);
	clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
/* The glyph REPLACES every list bullet, wired as a ::before so it applies
   without a markup change. Scoped to unclassed content lists plus the prose
   and answer bodies — every structural list in the build (menus, breadcrumbs,
   silo links, footer, steps, chips) carries a class and keeps its own
   treatment. */
.site-main ul:not([class]),.prose-content ul,.entry-content ul,.faq__answer ul,.card__body ul:not([class]){list-style:none;padding-left:1.5rem;}
.site-main ul:not([class]) > li,.prose-content ul > li,.entry-content ul > li,.faq__answer ul > li,.card__body ul:not([class]) > li{position:relative;}
.site-main ul:not([class]) > li::before,.prose-content ul > li::before,.entry-content ul > li::before,.faq__answer ul > li::before,.card__body ul:not([class]) > li::before{
	content:"";position:absolute;left:-1.5rem;top:calc(.8em - .3em);width:.6em;height:.6em;
	background:var(--color-accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
/* Ordered lists keep their numerals — a diamond cannot carry sequence — but
   take the display face and the accent ink so they stay in the same family. */
.site-main ol:not([class]) > li::marker,.prose-content ol > li::marker,.entry-content ol > li::marker{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--color-accent);}
/* 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);}
/* section_rhythm: split-head. The rhythm is carried entirely by the SECTION
   HEAD — H2 left, intro right, a lozenge chip on the H2's baseline and one
   lattice-tinted rule under both columns (see §15) — and by generous, even
   vertical space. The pilot's banded-dense alternation is GONE: there is no
   automatic nth-of-type tint, no bone-on-bone alternation and no dark feature
   section anywhere above the footer floor.
   ⚠ Do NOT reintroduce a section-level colour alternation — it is the pilot's
   axis, not this branch's (DESIGN-ALLOCATION §7.4). */
.section{padding:var(--space-20) 0;}
/* ── texture: tile-lozenge — THE LATTICE ────────────────────────────────────
   The St Mark's ROOF PATTERN abstracted: two 45° gradients crossing at a 22px
   pitch in olive at 7%. It lives on OPT-IN tinted fields only — never as a
   full-page wash and never behind body copy on the base surface — plus the
   hero's field (§6). Two colours maximum: a four-colour diamond lattice would
   be the coat of arms, which is never reproduced. */
.section--tinted,.band--tinted,.dp-texture-tile-lozenge .band--tinted{position:relative;background-color:var(--color-surface-2);background-image:var(--tl-lattice);}
.section--surface{background-color:var(--color-surface);background-image:none;}
/* .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 section —
   untinted and untextured. split-head has no band and no dark feature section:
   there is no dark surface above the footer floor, no fill, no paper text on
   dark, no inverted cards.
   ⚠ Do NOT reintroduce a dark mid-page band — DESIGN-ALLOCATION §7.4. */
.section--dark{position:relative;background-color:var(--color-surface);background-image:none;border-block:0;color:var(--color-text);padding:var(--space-20) 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 ------------------------------------------------------------ */
/* Pill plates. The roundest branch by a distance, so every action is fully
   rounded and set in SENTENCE case at 700 — the tracked-label register on
   this branch is lowercase and belongs to eyebrows, not to buttons. The
   accent is a FILL here, in the header CTA and on the sticky bar; everywhere
   else it appears as ink or as the marker glyph. */
.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-full);font-family:var(--font-display);
	font-weight:var(--fw-bold);text-transform:none;letter-spacing:var(--track-display);
	font-size:var(--text-base);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 — blue fill, WHITE ink (#FFFFFF on #2A4FBF = 7.07:1, the
   BATCH'S BEST). 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 — olive fill, paper ink (6.33: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 (pill-nav) -------------------------------------------------- */
/* Slim paper utility strip. It stays flush and full-bleed — it is the strip
   the pill floats OVER, so it must not compete for roundness. Lowercase and
   tracked, in the branch's own label register. */
.topbar{background:var(--color-surface-2);color:var(--color-text);font-size:var(--text-xs);text-transform:lowercase;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: pill-nav — NEW TOKEN, first shipped use anywhere in the network
   (DESIGN-ALLOCATION §5.7; released here from the never-built red-mesa
   reserve). It is the exact opposite of the pilot's flush hairline row: a
   DETACHED, FLOATING, FULLY-ROUNDED container that never touches the viewport
   edge, sits .75rem down from the top, caps itself at --width-wide and carries
   its own 1px 12% border and soft shadow. The page shows through on either
   side — that gap is the token.
   The markup gives one common ancestor for the brand and the nav, so
   .site-header IS the pill and everything inside it is unwrapped: the outer
   band is the transparent page itself.
   ⚠ Scroll state must NOT square the pill off or take it full-width — losing
   the pill on scroll destroys the token. It gains shadow and loses padding.
   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:.75rem;z-index:100;
	width:calc(100% - (var(--space-4) * 2));max-width:var(--width-wide);margin-inline:auto;
	background:var(--color-surface);
	border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);
	border-radius:var(--radius-full);
	box-shadow:0 6px 20px -8px color-mix(in srgb,var(--color-text) 28%,transparent);
	padding:.625rem 1.25rem;
	transition:padding var(--transition),box-shadow var(--transition);}
.site-header.is-shrunk{padding:.5rem 1.25rem;box-shadow:0 10px 28px -10px color-mix(in srgb,var(--color-text) 36%,transparent);}
.site-header__brand{background:transparent;border-bottom:0;}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:44px;max-width:none;padding:0;}
.site-branding{display:flex;align-items:center;}
/* ONE pill-height lockup. The pilot stacks a two-line wordmark; here the brand
   and the city sit on a single baseline with the city as a lowercase tracked
   label, because a two-line mark cannot ride inside a pill without forcing the
   pill taller than its own radius. */
.site-title{font-family:var(--font-display);margin:0;line-height:1.1;}
.site-title a{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.45em;color:var(--color-text);font-size:1.0625rem;font-weight:var(--fw-bold);letter-spacing:var(--track-display);line-height:1.1;}
.site-title a:hover{color:var(--color-primary);text-decoration:none;}
.site-title__lead{font-size:1.0625rem;font-weight:var(--fw-bold);letter-spacing:var(--track-display);line-height:1.1;}
.site-title__city{font-size:var(--text-xs);font-weight:var(--fw-semibold);text-transform:lowercase;letter-spacing:var(--track-eyebrow);line-height:1.1;color:color-mix(in srgb,var(--color-text) 68%,transparent);}
.site-branding .custom-logo{max-height:36px;width:auto;}
/* The nav carries no plate of its own — the pill is the plate. */
.site-header__nav{background:transparent;}
.main-nav{display:flex;align-items:center;gap:var(--space-2);}
.main-nav > ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);margin:0;padding:0;}
.main-nav li{position:relative;}
/* Nav items are THEMSELVES pills: no rules between them, no underline
   register. They fill on hover, on focus and on the current page. */
.main-nav a{color:var(--color-text);font-family:var(--font-display);font-size:.9375rem;font-weight:var(--fw-semibold);text-transform:none;letter-spacing:var(--track-display);white-space:nowrap;display:block;padding:.4rem .75rem;border-radius:var(--radius-full);transition:background var(--transition),color var(--transition);}
.main-nav a:hover,.main-nav a:focus-visible{color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 8%,transparent);text-decoration:none;}
.main-nav a[aria-current="page"]{color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 12%,transparent);text-decoration:none;}
/* The header CTA is a SOLID accent pill with white ink (7.07:1) — §5.7 makes
   it a fill, which is the pilot's rule inverted (its header CTA was the one
   in the batch that was never a fill). */
.fnz-header-cta{display:inline-flex;align-items:center;min-height:40px;font-family:var(--font-display);font-size:.9375rem;font-weight:var(--fw-bold);text-transform:none;letter-spacing:var(--track-display);color:#FFFFFF;background:var(--color-accent);border:1px solid var(--color-accent);border-radius:var(--radius-full);padding:.4rem 1.1rem;text-decoration:none;transition:background var(--transition),border-color var(--transition);}
.fnz-header-cta:hover,.fnz-header-cta:focus-visible{background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:#FFFFFF;text-decoration:none;}
/* 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 — a rounded paper sheet dropped clear of the pill, not an
   extension of it. Desktop only. */
.main-nav .sub-menu{list-style:none;margin:0;padding:var(--space-2);position:absolute;top:calc(100% + var(--space-3));left:0;min-width:250px;background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);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 are reading text, not pill labels — they keep the body face
   and lose the pill radius, so the pill register stays exclusive to the bar. */
.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 PILL STAYS A PILL — it only tightens its
	   radius to 28px with the burger inside it. The open menu is a SEPARATE
	   ROUNDED SHEET dropped below the pill, never an expansion of it: the pill
	   must never grow into a rectangle.
	   .site-header is the sticky (positioned) ancestor, so the sheet resolves
	   against the pill and inherits its width for free. */
	.site-header{border-radius:28px;padding:.5rem .5rem .5rem 1.125rem;}
	.site-header.is-shrunk{padding:.375rem .5rem .375rem 1.125rem;}
	.site-header__nav > .container{padding:0;}
	.main-nav{display:none;position:absolute;top:calc(100% + var(--space-3));left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
		background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-lg);
		box-shadow:var(--shadow-lg);max-height:calc(100vh - var(--header-h) - var(--space-8));overflow-y:auto;padding:var(--space-3) var(--space-4) var(--space-4);}
	.main-nav.is-open{display:flex;}
	.main-nav > ul{flex-direction:column;flex-wrap:nowrap;gap:var(--space-1);padding:0;align-items:stretch;}
	.main-nav li{border-bottom:0;}
	.main-nav a{display:block;padding:var(--space-3);white-space:normal;min-height:44px;}
	.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 a{padding:var(--space-2) var(--space-3);color:var(--color-muted);}
	.main-nav .sub-menu a:hover{background:transparent;color:var(--color-primary);}
	/* The CTA keeps its fill inside the sheet — it is the conversion path and
	   it is a pill everywhere. */
	.fnz-header-cta{display:inline-flex;justify-content:center;margin-top:var(--space-3);padding:var(--space-3) 1.1rem;}
}
@media(min-width:960px){
	.menu-toggle{display:none;}
	/* THE pill row. The markup ships a brand block above a nav block; inside
	   the pill they collapse into ONE row — wordmark left, nav pills right —
	   with both .container wrappers unwrapped so the row does not inherit two
	   nested max-widths on top of the pill's own cap. */
	.site-header{display:flex;align-items:center;gap:var(--space-6);}
	.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:center;justify-content:flex-end;}
	.site-header__nav > .container{max-width:none;width:auto;padding:0;display:flex;align-items:center;}
	.main-nav > ul{flex-wrap:nowrap;}
}

/* 6. HERO (boxed-card) -------------------------------------------------- */
/* hero: boxed-card — THIRD network use (dugorocni, evandelje) and its FIRST
   PHOTO-FREE one. Both existing uses put the card over a full-bleed
   photograph; there is no photograph here and none is coming.
   The composition is two parts:
     · the FIELD — the section itself, carrying the tile-lozenge lattice in
       olive at 7% on warm paper. That lattice is what the photo used to do.
     · the CARD — .hero__inner: --color-surface fill, a 1px 12% border, a 24px
       radius (--radius-lg) and a single lozenge chip in its TOP-LEFT corner.
   ⚠ LCP is the H1 TEXT BLOCK INSIDE THE CARD. No <img>, no image preload, no
   background photograph — locked decision #3. A card with nothing but paper
   behind it is a genuinely different composition, and holding that is the
   whole point of the token's third use.
   ⚠ Nothing in this section may grow into a drawn skyline. Zagreb Cathedral
   is never rendered with two complete spires, and the St Mark's coat of arms
   is never reproduced. */
.hero{position:relative;color:var(--color-text);
	background-color:var(--color-surface);background-image:var(--tl-lattice);
	padding:var(--space-12) 0 var(--space-16);}
/* THE CARD. */
.hero__inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--space-6);
	background:var(--color-surface);
	border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-md);
	padding:var(--space-8) var(--space-6) var(--space-8);}
@media(min-width:720px){.hero__inner{padding:var(--space-12) var(--space-12) var(--space-12);}}
/* THE CORNER CHIP — one lozenge, top-left, the same glyph as every list
   bullet and every split-head chip. It is the card's only ornament. */
.hero__inner::before{content:"";position:absolute;top:var(--space-5);left:var(--space-5);width:14px;height:14px;
	background:var(--color-accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);pointer-events:none;}
@media(min-width:720px){.hero__inner::before{top:var(--space-6);left:var(--space-6);width:16px;height:16px;}}
.hero__content{max-width:62ch;}
.hero:not(.hero--request) .hero__inner{min-height:280px;justify-content:center;}
/* Eyebrow: LOWERCASE and tracked — the pilot's are uppercase, and that case
   inversion is the cleanest one available between the two branches. No rule
   under it: the chip above already opens the card. */
.hero__eyebrow{display:inline-block;font-family:var(--font-display);color:var(--color-primary);font-weight:var(--fw-bold);font-size:var(--text-sm);letter-spacing:var(--track-eyebrow);text-transform:lowercase;margin-bottom:var(--space-4);}
/* The H1 is the LCP element and it is TEXT. Sentence case, weight 700,
   NEGATIVE tracking, 1.15 leading — it tops out at the declared 3rem base. */
.hero__title{font-family:var(--font-display);font-size:clamp(2.25rem,6vw,var(--text-3xl));font-weight:var(--fw-bold);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,
   olive ink on paper (5.97:1). */
.hero__phone{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--fw-bold);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 card. Lozenge-tinted cells rather than hairline-divided ones —
   the card is round, so its internal furniture is round too. Renders only
   where the markup supplies it. */
.hero__logistics{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6);}
.hero__logistics > *{flex:1 1 8rem;padding:var(--space-3) var(--space-4);border-radius:var(--radius);background:color-mix(in srgb,var(--color-primary) 6%,transparent);}
.hero__logistics dt,.hero__logistics .hero__logistics-label{display:block;font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--fw-bold);text-transform:lowercase;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-bold);letter-spacing:var(--track-display);color:var(--color-text);}
/* Optional media (hero--has-media). Nothing in this build ships one — the
   zero-photo decision is locked and the LCP is the H1 text — but if a page
   sets a hero image it renders as a rounded inset BELOW the text, never as a
   background wash and never behind the card. */
.hero__media{position:relative;z-index:1;margin:var(--space-6) 0 0;max-width:880px;border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;}
.hero__media img{width:100%;height:auto;}
/* The donor's outline-on-dark button has no dark surface 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 — the same lattice field as
   the hero, so the two read as one composition, with the 3-step wizard card
   centred inside it. */
.gloss__band{position:relative;background-color:var(--color-surface);background-image:var(--tl-lattice);padding:var(--space-12) 0 var(--space-16);}
.gloss__shell{width:100%;max-width:760px;margin:0 auto;}

/* Quote form card — the same boxed-card construction as the hero: paper fill,
   1px 12% border, 24px radius, one lozenge chip in the top-left corner. */
.gloss-wrap{position:relative;background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-8);color:var(--color-text);text-align:left;}
.gloss-wrap::before{content:"";position:absolute;top:var(--space-5);left:var(--space-5);width:12px;height:12px;background:var(--color-accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);pointer-events:none;}
.gloss-wrap h2{font-size:var(--text-xl);margin-bottom:var(--space-6);}
.marginalia .field{margin-bottom:var(--space-4);}
.marginalia label{display:block;font-weight:var(--fw-semibold);font-size:var(--text-sm);margin-bottom:var(--space-2);color:var(--color-text);}
.marginalia input,.marginalia select,.marginalia 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);}
.marginalia input:focus,.marginalia select:focus,.marginalia textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),.20);}
.marginalia textarea{min-height:96px;resize:vertical;}
.marginalia .btn{margin-top:var(--space-2);}
.gloss__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.gloss__feedback{margin-top:var(--space-3);font-weight:var(--fw-medium);}
.gloss__feedback.is-success{color:var(--color-success);}
.gloss__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:fnz-spin .7s linear infinite;}
@keyframes fnz-spin{to{transform:rotate(360deg);}}
.form-fallback{background:var(--color-surface-2);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-lg);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 color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-full);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 color-mix(in srgb,var(--color-success) 35%,transparent);}
.open-now.is-closed .open-now__dot{background:var(--color-accent);}

/* 8. CARDS / SILO (horizontal — numbered lozenge tile + body) ----------- */
/* cards: horizontal — SECOND network use (seawall's token). The echo puts an
   IMAGE in the left column; this build has no images, so the delta is that
   the left column is a NUMBERED LOZENGE TILE instead — lattice-washed, with
   the sequence number set in it and room for the duration and the
   meeting-point district. That is what lets the card be finished with no
   image at all: there is no reserved thumbnail box left to collapse into a
   grey rectangle.
   The number comes from a CSS counter, so the tile is complete without a
   markup change; where the markup ships a real .card__tile it takes over and
   the generated tile stands down (see the receipt for the two data lines).
   ⚠ NO HOVER LIFT anywhere on this branch — the pills move, the cards do not.
   `transform` is deliberately absent from the transition list: leaving it
   there is how the next hover state quietly restores the lift. */
.grid,.post-list,.projects__grid,.directory__list,.team-grid{counter-reset:fnz-card;}
.card{position:relative;background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;
	display:grid;grid-template-columns:1fr;counter-increment:fnz-card;
	transition:box-shadow var(--transition),border-color var(--transition);}
/* THE TILE. Not an image slot: a lattice-washed olive panel with the walk's
   number in the display face. */
.card::before{content:counter(fnz-card,decimal-leading-zero);
	grid-column:1;grid-row:1;
	display:flex;align-items:flex-end;justify-content:flex-start;
	min-height:5.25rem;padding:var(--space-8) var(--space-5) var(--space-5);
	font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--fw-bold);letter-spacing:var(--track-display);line-height:1;
	color:var(--color-primary);font-variant-numeric:tabular-nums;
	background-color:color-mix(in srgb,var(--color-primary) 8%,transparent);
	background-image:var(--tl-lattice);}
/* The tile's own lozenge chip, in the card's top-left corner. */
.card::after{content:"";position:absolute;top:var(--space-4);left:var(--space-4);width:12px;height:12px;z-index:1;pointer-events:none;
	background:var(--color-accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
.card__seam,.card__media,.card__body{grid-column:1;}
/* With a provider seam present the body row is the one that takes the slack,
   so a short seam line never stretches to half the card. */
.card:has(.card__seam){grid-template-rows:auto 1fr;}
@media(min-width:560px){
	.card{grid-template-columns:8.5rem 1fr;}
	.card::before{grid-row:1 / span 3;align-items:flex-end;min-height:0;font-size:var(--text-2xl);}
	.card__seam,.card__media,.card__body{grid-column:2;}
}
/* Markup variant: a real .card__tile takes the same slot and the generated
   one stands down, so the two data lines can be authored rather than faked. */
.card:has(.card__tile)::before{content:none;}
.card__tile{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-1);
	min-height:5.25rem;padding:var(--space-8) var(--space-5) var(--space-5);
	background-color:color-mix(in srgb,var(--color-primary) 8%,transparent);background-image:var(--tl-lattice);}
@media(min-width:560px){.card__tile{grid-row:1 / span 3;min-height:0;}}
.card__number{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--fw-bold);letter-spacing:var(--track-display);line-height:1;color:var(--color-primary);font-variant-numeric:tabular-nums;}
@media(min-width:560px){.card__number{font-size:var(--text-2xl);}}
.card__duration{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--fw-bold);letter-spacing:var(--track-display);color:var(--color-text);font-variant-numeric:tabular-nums;}
.card__district{font-size:var(--text-xs);color:var(--color-muted);text-transform:lowercase;letter-spacing:var(--track-eyebrow);}
.card:hover,.card:focus-within{box-shadow:var(--shadow-lg);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 at the top of the body column. Lowercase and
   tracked, in the branch's own label register. */
.card__seam{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:var(--space-3) var(--space-6) 0;font-family:var(--font-display);font-size:var(--text-xs);text-transform:lowercase;letter-spacing:var(--track-eyebrow);color:var(--color-muted);}
.card__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);}
.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;padding-top:var(--space-2);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--fw-bold);text-transform:none;letter-spacing:var(--track-display);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 rounded lattice field, no rules. */
.silo{position:relative;margin:var(--space-12) var(--space-4);padding:var(--space-12) var(--space-2);background-color:var(--color-surface-2);background-image:var(--tl-lattice);border-radius:var(--radius-lg);}
.silo__heading{margin-bottom:var(--space-6);font-size:var(--text-xl);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-surface);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-full);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--fw-semibold);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-20) 0;}
/* The FAQ head takes the split-head chip rather than a rule — one marker
   system across the build. */
.faq__heading{position:relative;text-align:left;margin-bottom:var(--space-8);font-size:var(--text-xl);max-width:760px;margin-left:auto;margin-right:auto;padding-left:1.35em;}
.faq__heading::before{content:"";position:absolute;left:0;top:.52em;width:10px;height:10px;background:var(--color-accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
.faq__list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-3);}
.faq__item{border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-lg);background:var(--color-surface);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-full);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 boxed card on a lattice wash — the hero's construction, reused as the
   page's closing plate. Still no dark surface: this is the light branch. */
.cta-banner{position:relative;background-color:var(--color-surface-2);background-image:var(--tl-lattice);color:var(--color-text);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-lg);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-20) 0;background-color:var(--color-surface);background-image:var(--tl-lattice);}
.testimonials__track{display:grid;gap:var(--space-6);}
/* Each quote is a small boxed card with the marker glyph opening it. */
.testimonial{position:relative;background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-8) var(--space-6) var(--space-6);}
.testimonial::before{content:"";position:absolute;top:var(--space-4);left:var(--space-4);width:10px;height:10px;background:var(--color-accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}

.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-surface);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-lg);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;}
/* The same LOWERCASE tracked eyebrow register as the hero — one label system
   across the build, and the case inversion against the pilot. */
.author-box__eyebrow{display:inline-block;font-family:var(--font-display);text-transform:lowercase;letter-spacing:var(--track-eyebrow);font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--color-primary);padding:0;}
.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-surface);color:var(--color-text);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-lg);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 color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;background:var(--color-surface);}
.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:color-mix(in srgb,var(--color-dark-2) 88%,transparent);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 color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-full);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-surface);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-lg);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 color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-full);font-weight:var(--fw-bold);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-base);text-transform:lowercase;letter-spacing:var(--track-eyebrow);font-family:var(--font-display);font-weight:var(--fw-bold);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_rhythm: split-head ─────────────────────────────────────────────
   FOURTH network use (dugorocni, cooperstown, luxury-travel-seo). The head is
   the rhythm on this branch: H2 LEFT, intro RIGHT on desktop, with the lozenge
   marker as a 10px chip sitting ON THE H2'S BASELINE and ONE 1px rule in the
   lattice ink running under BOTH columns.
   ⚠ There is no band and no dark feature section behind it — the pilot's
   banded alternation was removed with this axis, and reintroducing a tinted
   or dark section band would put the pilot's rhythm back. */
.section-head{position:relative;text-align:left;max-width:none;margin:0 0 var(--space-12);padding-bottom:var(--space-6);display:grid;grid-template-columns:1fr;gap:var(--space-4);}
@media(min-width:900px){
	.section-head{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-12);align-items:start;}
}
/* The rule under both columns. */
.section-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:color-mix(in srgb,var(--color-primary) 24%,transparent);}
.section-head h1,.section-head h2{font-size:var(--text-xl);margin:0;}
h2.section-head{display:block;font-size:var(--text-xl);margin:0 0 var(--space-8);padding-bottom:var(--space-4);}
/* THE CHIP. An inline-block clip-path box takes its baseline from its bottom
   margin edge, so the diamond literally sits on the H2's baseline rather than
   floating beside it — and it is the same glyph as every list bullet. */
.section-head > h2::before,.section-head > h1::before,h2.section-head::before{
	content:"";display:inline-block;width:10px;height:10px;margin-right:.45em;
	background:var(--color-accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
.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-2xl);}
}

/* 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-gloss__head{text-align:center;margin-bottom:var(--space-6);}
.walk-gloss__title{font-size:var(--text-2xl);margin-bottom:var(--space-2);}
.walk-gloss__sub{color:var(--color-muted);margin:0;}

.gloss__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;}
.gloss__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;}
.gloss__steps__item:not(:first-child)::before{content:"";position:absolute;top:17px;right:50%;left:-50%;height:2px;background:var(--color-border);z-index:0;}
.gloss__steps__item.is-active::before,.gloss__steps__item.is-done::before{background:var(--color-primary);}
.gloss__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);}
.gloss__steps__item.is-active .gloss__steps__num,.gloss__steps__item.is-done .gloss__steps__num{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
.gloss__steps__item.is-active{color:var(--color-text);}
.gloss__steps__label{line-height:1.2;}
.notecase.is-enhanced .gloss__steps__item.is-done{cursor:pointer;}
@media(max-width:479px){.gloss__steps__label{display:none;}}

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

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

.gloss__nav{display:flex;gap:var(--space-3);margin-top:var(--space-8);align-items:center;justify-content:space-between;flex-wrap:wrap;}
.gloss__nav--end{justify-content:flex-end;}
.gloss__nav__btn{display:none;}
.notecase.is-enhanced .gloss__nav__btn{display:inline-flex;}
.gloss__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 color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-lg);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-bold);background:var(--color-surface-2);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-full);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 color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-lg);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-20) 0;background-color:var(--color-surface-2);background-image:var(--tl-lattice);}
.directory__heading{position:relative;text-align:left;margin-bottom:var(--space-8);font-size:var(--text-xl);font-weight:var(--fw-bold);padding-left:1.35em;}
.directory__heading::before{content:"";position:absolute;left:0;top:.52em;width:10px;height:10px;background:var(--color-accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
.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-surface);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-lg);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-full);font-size:var(--text-sm);font-weight:var(--fw-bold);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);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-bold);font-size:var(--text-sm);letter-spacing:var(--track-eyebrow);text-transform:lowercase;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);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{position:relative;text-align:left;margin-bottom:var(--space-6);font-size:var(--text-xl);padding-left:1.35em;}
.local-areas__heading::before{content:"";position:absolute;left:0;top:.52em;width:10px;height:10px;background:var(--color-accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
.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-surface);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);border-radius:var(--radius-full);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--fw-semibold);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-lg);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);background:var(--color-surface);text-align:left;}
.area-check__result.is-yes{border-color:var(--color-success);background:color-mix(in srgb,var(--color-success) 8%,transparent);}
.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) and takes the lozenge lattice in white ink at
   6%, at the same 22px pitch as everything else. */
.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-lg);background-color:var(--color-dark);
	background-image:
		repeating-linear-gradient( 45deg,transparent 0 calc(var(--tl-p) - 1px),rgba(255,255,255,.06) calc(var(--tl-p) - 1px) var(--tl-p)),
		repeating-linear-gradient(-45deg,transparent 0 calc(var(--tl-p) - 1px),rgba(255,255,255,.06) calc(var(--tl-p) - 1px) var(--tl-p));
	border:1px solid var(--color-dark-border);color:var(--color-on-dark);font-weight:var(--fw-bold);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,.fnz-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, #E6E0D2);padding:var(--space-3, .75rem) 0;background:var(--color-surface, #FBF8F1);}
.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, #E6E0D2);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, #555B49);}
.tool-footer__inner p{margin:0;}
.tool-footer__inner a{color:inherit;}