/* =========================================================================
poliranje-farova.com — main.css
Profile: optic-restoration (see DESIGN-MANIFEST.json)
1. Design tokens (:root)
2. Reset / base
3. Layout (container, section bands, grid)
4. Buttons + links
5. Header / nav / top bar
6. Hero + quote form
7. Trust signals / Open Now
8. Cards + silo grids
9. FAQ accordion
10. CTA banner
11. Testimonials
12. E-E-A-T (author box, fact-check, projects, credentials, awards, team, guarantees, freshness)
13. Breadcrumbs / prose / blog
14. Footer + mobile sticky bar
15. Utilities / a11y / motion
16. Quote wizard (2-step lead form)
17. Optic-restoration profile overrides (dp-* axes)
18. Wizard + mobile polish
====================================================================== */
/* 1. TOKENS ------------------------------------------------------------- */
:root{
/* Achromatic "clear light" brand. Graphite page chrome; the only "colour"
is the cool clear light (#DDE9FF) a restored lens transmits. The haze
(#B79A5C) is the before-state and appears ONLY as the 25% segment of the
two-tone rule — never text, never a fill. The Customizer overrides
--color-primary / --color-accent / --color-text. */
--color-primary:#191C1F; /* near-neutral graphite — dark surfaces, headings, PRIMARY BUTTON FILL ON LIGHT */
--color-accent:#DDE9FF; /* "clear" — CTA fill on DARK surfaces, beam tint, eyebrows on dark, 75% segment of the rule */
--color-text:#16171A;
--color-primary-hover:#0F1113; /* primary fill hover */
--color-accent-hover:#EEF4FF; /* accent fill hover (lighter — contrast rises) */
--color-primary-strong:#191C1F; --color-primary-ink:#191C1F; /* link ink on light = body ink → links MUST be underlined */
--color-accent-ink:#16171A; /* ink on accent fills: 14.66:1 */
--color-haze:#B79A5C; /* decorative ONLY, never text, never a fill, always the 25% segment */
--color-muted:#5C6470; /* 5.6:1 on white */
--color-surface:#F5F7FA; --color-surface-2:#E9EBEF; --color-surface-card:#FFFFFF;
--color-border:#D3D7DE; /* card hairline 14%-ish */ --color-border-strong:#8A929E; /* card hairline on hover/focus-within */
--color-field-border:#767F8E; /* form controls: 3:1 non-text boundary */
--color-white:#ffffff; --color-page:#ffffff;
--color-star:#C9A227; --color-success:#177A4F; --color-error:#B42318; --color-error-on-dark:#FF8A80;
--color-dark:#191C1F; --color-dark-2:#101214; --color-dark-3:#24282E; /* dark-3 = card/panel surface ON dark bands */
--color-on-dark:#F4F5F7; --color-on-dark-muted:#BCC3CF; --color-dark-border:#33383F;
--font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Liberation Sans',sans-serif;
--font-display:'Arial Black',-apple-system,BlinkMacSystemFont,'Segoe UI Black',Roboto,'Liberation Sans',sans-serif;
--fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-display:900; /* --fw-black is REMOVED */
--text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.25rem;
--text-2xl:clamp(1.25rem,1.1rem + .4vw,1.333rem); /* H3 */
--text-3xl:clamp(1.5rem,1.2rem + 1vw,2rem); /* H2 */
--text-4xl:clamp(1.875rem,1.4rem + 2vw,3rem); /* H1 — measured word-fit: 'Poliranje farova u Slavonskom Brodu' wraps identically on Arial Black / SF Black / Roboto */
--text-5xl:3rem; --text-6xl:3.75rem;
--lh-tight:1.06; --lh-h2:1.12; --lh-h3:1.2; --lh-snug:1.4; --lh-normal:1.6;
--track-h1:-.025em; --track-h2:-.015em; --track-h3:0; --track-eyebrow:.14em;
--space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem;
--space-12:2.75rem; --space-16:3rem; --space-20:4.25rem; --space-24:5.5rem;
--width-content:720px; --width-wide:1140px; --prose-measure:70ch;
--radius-sm:0; --radius:0; --radius-md:0; --radius-lg:0; --radius-full:0; /* the chamfer replaces radius everywhere */
--shadow-sm:none; --shadow:none; --shadow-lg:none; /* NO elevation shadow in the build; focus rings only */
--chamfer-card:20px; --chamfer-hero:24px; --chamfer-btn:8px;
--rule-2tone:linear-gradient(90deg,var(--color-haze) 0 25%,var(--color-accent) 25% 100%); /* the 25/75 before→after rule */
--gf-hi:rgba(255,255,255,.06); --gf-sh:rgba(0,0,0,.10); --gf-pitch:7px; --gf-prism:56px; /* glass-flute */
--beam-edge:rgba(221,233,255,.28); --beam-fill:rgba(221,233,255,.18); /* beam ceilings */
--transition:200ms ease; --header-h:70px;
}
/* 2. RESET / BASE ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
/* 17px base (106.25%); every rem scales from here. */
html{scroll-behavior:smooth;font-size:106.25%;}
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;}
/* Link ink on light equals body ink, so the underline IS the affordance
(§21.4 corollary); components that are visibly interactive reset it. */
a{color:var(--color-primary-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;}
/* Display headings: the single-cut black grotesque at 900 only. */
h1,h2,h3{font-family:var(--font-display);font-weight:var(--fw-display);color:var(--color-text);margin:0 0 var(--space-4);}
h1{font-size:var(--text-4xl);line-height:var(--lh-tight);letter-spacing:var(--track-h1);}
h2{font-size:var(--text-3xl);line-height:var(--lh-h2);letter-spacing:var(--track-h2);}
h3{font-size:var(--text-2xl);line-height:var(--lh-h3);letter-spacing:var(--track-h3);}
/* H4–H6 stay in the body sans at 700 — a 900 face below ~21px closes its counters. */
h4,h5,h6{font-family:var(--font);font-weight:var(--fw-bold);color:var(--color-text);margin:0 0 var(--space-3);line-height:var(--lh-snug);}
h4{font-size:var(--text-lg);} h5{font-size:var(--text-base);} h6{font-size:var(--text-sm);}
b,strong{font-weight:var(--fw-bold);}
p{margin:0 0 var(--space-4);}
ul,ol{margin:0 0 var(--space-4);padding-left:1.25rem;}
[hidden]{display:none!important;}
/* 3. LAYOUT ------------------------------------------------------------- */
.container{width:100%;max-width:var(--width-wide);margin:0 auto;padding:0 var(--space-4);}
.section{padding:var(--space-20) 0;}
/* Tinted band; the 25/75 two-tone rule on its TOP edge is drawn by the
dp-rhythm axis (section 17), never by a border or an
. */
.section--surface{background:var(--color-surface);position:relative;}
/* The ONE dark feature band per page (the process band). */
.section--dark{background:var(--color-dark);color:var(--color-on-dark);position:relative;}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff;}
.section--dark p{color:var(--color-on-dark-muted);}
.section--dark a{color:#fff;}
.grid{display:grid;gap:var(--space-6);}
.grid--2{grid-template-columns:1fr;}
.grid--3{grid-template-columns:1fr;}
.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 ------------------------------------------------------------ */
/* Flat rectangles, sentence case, 700 body sans, no radius, no glow, no lift.
Filled variants carry the 8px top-right chamfer as a BACKGROUND GRADIENT
(225deg, stop at 5.66px = 8px legs) — not clip-path, so focus rings are
never clipped. --btn-bg / --btn-ink are context-driven custom properties:
primary fill + white ink on light, accent fill + dark ink on dark. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
padding:var(--space-3) var(--space-6);border-radius:0;font-family:var(--font);font-weight:var(--fw-bold);
font-size:var(--text-base);letter-spacing:0;text-transform:none;border:2px solid transparent;cursor:pointer;text-decoration:none;line-height:1.2;
transition:color var(--transition),border-color var(--transition),background-color var(--transition);}
.btn:hover{text-decoration:none;}
.btn--primary{--btn-bg:var(--color-primary);--btn-bg-hover:var(--color-primary-hover);--btn-ink:#fff;
border:0;padding:calc(var(--space-3) + 2px) calc(var(--space-6) + 2px);color:var(--btn-ink,#fff);background-color:transparent;
background-image:linear-gradient(225deg,transparent 0 5.66px,var(--btn-bg,var(--color-primary)) 5.66px);}
.btn--primary:hover{color:var(--btn-ink,#fff);background-image:linear-gradient(225deg,transparent 0 5.66px,var(--btn-bg-hover,var(--color-primary-hover)) 5.66px);}
/* Dark contexts flip the primary button to the accent fill (one accent FILL per viewport). */
.hero .btn--primary,.section--dark .btn--primary,.site-footer .btn--primary,.sticky-bar .btn--primary,.cta-banner--dark .btn--primary{--btn-bg:var(--color-accent);--btn-bg-hover:var(--color-accent-hover);--btn-ink:var(--color-accent-ink);color:var(--btn-ink,var(--color-accent-ink));}
/* The white quote card inside the hero is a LIGHT context again. */
.hero .quote-form-wrap .btn--primary,.hero .form-fallback .btn--primary{--btn-bg:var(--color-primary);--btn-bg-hover:var(--color-primary-hover);--btn-ink:#fff;color:var(--btn-ink,#fff);}
/* Secondary — always the primary fill (search form, read-more). */
.btn--secondary{--btn-bg:var(--color-primary);--btn-bg-hover:var(--color-primary-hover);--btn-ink:#fff;
border:0;padding:calc(var(--space-3) + 2px) calc(var(--space-6) + 2px);color:var(--btn-ink,#fff);background-color:transparent;
background-image:linear-gradient(225deg,transparent 0 5.66px,var(--btn-bg,var(--color-primary)) 5.66px);}
.btn--secondary:hover{color:var(--btn-ink,#fff);background-image:linear-gradient(225deg,transparent 0 5.66px,var(--btn-bg-hover,var(--color-primary-hover)) 5.66px);}
/* Ghost / outline on a LIGHT surface — 2px primary outline, square. */
.btn--ghost{background:transparent;border-color:var(--color-primary);color:var(--color-primary-ink);}
.btn--ghost:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
/* Outline action ON a dark surface — 2px accent outline, on-dark label; fills accent on hover (§21.4). */
.btn--on-dark{background:transparent;border-color:var(--color-accent);color:var(--color-on-dark);}
.btn--on-dark:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink);}
.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 ------------------------------------------------------------- */
/* Utility topbar — dark on every page (no light strip between promo and header). */
.topbar{background:var(--color-dark-2);color:var(--color-on-dark-muted);font-size:var(--text-sm);}
.topbar__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-3) var(--space-6);padding:var(--space-2) var(--space-4);}
.topbar a{color:#fff;display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;}
.topbar a:hover{color:var(--color-accent);text-decoration:underline;text-underline-offset:.18em;}
.topbar svg{width:1em;height:1em;}
.topbar__afterhours{color:var(--color-on-dark);font-weight:var(--fw-semibold);}
/* Sticky header — dark in ALL states; transparent over the hero on .home only
(dp-header axis, section 17). z-index:100 keeps dropdowns above content;
the skip-link is bumped above this for a11y. No box-shadow in any state. */
.site-header{position:sticky;top:0;z-index:100;background:var(--color-primary);color:#fff;box-shadow:none;transition:background-color var(--transition);}
.site-header__inner{display:flex;align-items:stretch;justify-content:space-between;min-height:var(--header-h);}
.site-header__main{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
padding-left:max(var(--space-4),calc((100% - var(--width-wide)) / 2));padding-right:max(var(--space-4),calc((100% - var(--width-wide)) / 2));}
.site-branding{display:flex;align-items:center;min-width:0;}
.custom-logo-link{display:inline-flex;text-decoration:none;}
.custom-logo-link img{max-height:44px;width:auto;}
/* Wordmark in the display face — no logo upload required. */
.site-title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--text-xl);letter-spacing:var(--track-h1);line-height:1.1;margin:0;}
.site-title a{color:#fff;text-decoration:none;}
.site-title a:hover{color:#fff;text-decoration:none;}
/* Top-level nav: horizontal row of white items; hover = accent underline. */
.main-nav > ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-6);margin:0;padding:0;}
.main-nav li{position:relative;}
.main-nav a{color:#fff;font-weight:var(--fw-medium);white-space:nowrap;display:block;padding:var(--space-2) 0;text-decoration:none;}
.main-nav a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:6px;text-decoration-thickness:2px;}
.main-nav .current-menu-item > a,.main-nav .current-menu-ancestor > a{text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:6px;text-decoration-thickness:2px;}
/* Caret on parent items that have 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 panel on the dark-3 surface. Revealed on hover/focus on
DESKTOP only (scoped below); on mobile it is a tap accordion (.is-open). */
.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-dark-3);border:1px solid var(--color-dark-border);border-radius:0;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;}
}
.main-nav .sub-menu a{white-space:normal;padding:var(--space-2) var(--space-3);border-radius:0;font-weight:var(--fw-normal);color:#fff;}
.main-nav .sub-menu a:hover{background:var(--color-dark-2);color:#fff;text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:4px;}
.header-actions{display:flex;align-items:center;gap:var(--space-3);}
/* Header CTA — OUTLINE variant on the dark bar (2px accent outline, white
label, square: the chamfer identity lives on filled rectangles only). */
.pfar-header-cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
padding:var(--space-2) var(--space-5);border:2px solid var(--color-accent);background:transparent;color:#fff;
font-weight:var(--fw-bold);font-size:var(--text-base);line-height:1.2;white-space:nowrap;text-decoration:none;
transition:background-color var(--transition),color var(--transition);}
.pfar-header-cta:hover{background:var(--color-accent);color:var(--color-accent-ink);text-decoration:none;}
/* Header search — dark-field variant (the header is always dark). */
.header-search form{display:flex;gap:var(--space-2);}
.header-search .search-field{background:var(--color-dark-2);color:#fff;border:1px solid var(--color-field-border);padding:var(--space-2) var(--space-3);font:inherit;font-size:var(--text-sm);min-width:0;max-width:180px;}
.header-search .search-field::placeholder{color:var(--color-on-dark-muted);}
.site-header .btn--secondary{--btn-bg:transparent;--btn-bg-hover:var(--color-accent);--btn-ink:#fff;border:2px solid var(--color-accent);padding:var(--space-2) var(--space-4);background-image:none;font-size:var(--text-sm);}
.site-header .btn--secondary:hover{background-image:none;background-color:var(--color-accent);color:var(--color-accent-ink);}
/* Mobile: the hero CTA + sticky Call/WhatsApp bar cover conversion, so the
header CTA collapses below 768px to keep the wordmark + menu uncrowded. */
@media(max-width:767px){
.pfar-header-cta{display:none;}
}
@media(min-width:768px) and (max-width:959px){
.pfar-header-cta{padding:var(--space-2) var(--space-4);font-size:var(--text-sm);}
}
.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:#fff;display:block;transition:var(--transition);}
@media(max-width:959px){
/* Dark mobile nav sheet under the dark header. Anchored to the (sticky)
header itself, not the viewport: with the promo/top bars above, a
viewport-fixed panel opened OVER the header row and covered the toggle.
Absolute + top:100% always drops it just below the header. */
.main-nav{position:absolute;top:100%;left:0;right:0;background:var(--color-dark);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity var(--transition),transform var(--transition),visibility var(--transition);box-shadow:none;border-top:1px solid var(--color-dark-border);max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow-y:auto;z-index:90;}
.main-nav.is-open{visibility:visible;opacity:1;transform:none;}
.main-nav > ul{flex-direction:column;flex-wrap:nowrap;gap:0;padding:var(--space-4);align-items:stretch;}
.main-nav li{border-bottom:1px solid var(--color-dark-border);}
.main-nav a{display:block;padding:var(--space-3) 0;white-space:normal;}
.main-nav .menu-item-has-children > a::after{float:right;margin-top:.5em;}
/* Submenus are a tap accordion on mobile: collapsed by default, shown when
JS adds .is-open to the parent ; the caret flips when open. */
.main-nav .sub-menu{position:static;display: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-on-dark-muted);}
.main-nav .sub-menu a:hover{background:transparent;color:#fff;}
/* The row goes solid while the sheet is open (main.js toggles .is-open on the header). */
.site-header.is-open{background:var(--color-primary);}
}
@media(min-width:960px){.menu-toggle{display:none;}}
/* 6. HERO --------------------------------------------------------------- */
/* Photo-free graphite band lit by an ECE low-beam pattern: a drawn CUTOFF
line, horizontal over the left half, rising ≈15° to the right edge (the
kerb-side kick-up). The H1 hangs under the cutoff on the left; the quote
card stands in the lit rise on the right. Static, no image, no url(). */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--color-primary);color:var(--color-on-dark);}
.hero--has-media{background:var(--color-dark);}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media img{width:100%;height:100%;object-fit:cover;}
/* Operator-uploaded photo: overlay ≥ .72 keeps on-dark text AA-legible (§21.4). */
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,28,31,.74) 0%,rgba(16,18,20,.86) 100%);}
.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);padding:var(--space-20) 0;}
.hero--booking .hero__inner{gap:var(--space-8);}
.hero__content{max-width:640px;color:var(--color-on-dark);}
/* Eyebrow: body sans 700 uppercase .14em with the 16×3px two-tone dash. */
.hero__eyebrow{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font);font-weight:var(--fw-bold);font-size:var(--text-xs);line-height:1.3;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-5);}
.hero__eyebrow::before{content:"";flex:none;width:16px;height:3px;background:var(--rule-2tone);}
/* ≥.25em top clearance: an SF capital caron pokes above its line box at 1.06. */
.hero__title{font-size:var(--text-4xl);font-weight:var(--fw-display);letter-spacing:var(--track-h1);line-height:var(--lh-tight);padding-top:.25em;margin-bottom:var(--space-4);color:#fff;}
.hero__subtitle{font-size:var(--text-lg);line-height:var(--lh-snug);margin:0 0 var(--space-6);color:var(--color-on-dark-muted);max-width:56ch;}
/* Operator-fed facts row (≤3 cells, tabular figures, hairline-separated; self-hides). */
.hero__facts{margin:0 0 var(--space-6);}
.hero__facts-list{display:flex;flex-wrap:wrap;margin:0;padding:0;}
.hero__fact{margin:0;padding:var(--space-2) var(--space-5) var(--space-2) 0;}
.hero__fact + .hero__fact{border-left:1px solid var(--color-dark-border);padding-left:var(--space-5);}
/* Narrow phones: a 2-column grid so a wrapped third cell never carries a stray hairline. */
@media(max-width:480px){
.hero__facts-list{display:grid;grid-template-columns:1fr 1fr;row-gap:var(--space-2);}
.hero__fact + .hero__fact{border-left:0;padding-left:0;}
.hero__fact:nth-child(even){border-left:1px solid var(--color-dark-border);padding-left:var(--space-5);}
}
.hero__fact-label{display:block;font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:var(--track-eyebrow);text-transform:uppercase;line-height:1.3;color:var(--color-on-dark-muted);}
.hero__fact-value{display:block;margin:var(--space-1) 0 0;font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--text-xl);line-height:1.2;color:#fff;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;}
.hero__text-link{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-on-dark);font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:3px;}
.hero__text-link:hover{color:#fff;text-decoration-color:var(--color-accent);}
.hero__text-link svg{width:1.1em;height:1.1em;}
/* The beam — two pseudo-elements of the section, z-index 0, under .hero__inner (z 1).
::before = the 1px cutoff EDGE, ::after = the FILL sitting 1px lower (0% left → 18% right). */
/* --cut-y is a LENGTH that tracks the H1's cap line (inner padding-top + the
eyebrow row), so the heading hangs immediately under the cutoff whatever
height the quote card gives the band (a % of the band lands at the CTA row
once the card is tall). The rise is tan(15°) × the right 45vw (12.06vw),
capped so the right-edge point stays inside the band. */
.hero--beam-cutoff{--cut-y:calc(var(--space-20) + 2.5rem);--cut-x:55%;--cut-rise:min(12.06vw,calc(var(--cut-y,6.75rem) - .5rem));}
.hero--beam-cutoff::before,.hero--beam-cutoff::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
clip-path:polygon(-10% var(--cut-y,42%),var(--cut-x,55%) var(--cut-y,42%),100% calc(var(--cut-y,42%) - var(--cut-rise,20%)),100% 100%,-10% 100%);}
.hero--beam-cutoff::before{background:var(--beam-edge);}
.hero--beam-cutoff::after{top:1px;background:linear-gradient(90deg,rgba(221,233,255,0) 0%,var(--beam-fill) 100%);}
/* Form off: the content column spans the band and the kick-up starts at centre. */
.hero--beam-cutoff:not(.hero--booking){--cut-x:50%;}
.hero--beam-cutoff:not(.hero--booking) .hero__content{max-width:780px;}
@media(max-width:959px){.hero--beam-cutoff{--cut-y:calc(var(--space-16) + 2.5rem);}}
/* A photo replaces the beam (never composite beam + photo). */
.hero--has-media.hero--beam-cutoff::before,.hero--has-media.hero--beam-cutoff::after{display:none;}
/* LCP guard: the hero's children never wait for the reveal observer. */
.js .hero .reveal{opacity:1;transform:none;}
/* The quote card: white surface, 24px top-right chamfer (single layer is fine
on dark), the 12px glass-flute strip on its LEFT edge (dp-texture axis). */
.booking-shell{width:100%;max-width:none;margin:0;}
.hero .booking-shell{align-self:start;}
.quote-form-wrap{background:var(--color-surface-card);color:var(--color-text);padding:var(--space-8);}
.hero .quote-form-wrap{position:relative;isolation:isolate;border-radius:0;box-shadow:none;background:var(--color-surface-card);
padding:var(--space-8) var(--space-8) var(--space-8) calc(var(--space-8) + 12px);
clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);}
.hero .quote-form-wrap::after{content:none;}
.quote-form-wrap h2{font-size:var(--text-2xl);margin-bottom:var(--space-6);}
.quote-form .field{margin-bottom:var(--space-4);}
.quote-form label{display:block;font-weight:var(--fw-semibold);font-size:var(--text-sm);margin-bottom:var(--space-2);color:var(--color-text);}
.quote-form input,.quote-form select,.quote-form textarea{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-field-border);border-radius:0;font-size:var(--text-base);font-family:inherit;color:var(--color-text);background:#fff;transition:border-color var(--transition),box-shadow var(--transition);}
.quote-form input::placeholder,.quote-form textarea::placeholder{color:var(--color-muted);}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary);}
.quote-form textarea{min-height:96px;resize:vertical;}
.quote-form .btn{margin-top:var(--space-2);}
.quote-form__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.quote-form__feedback{margin-top:var(--space-3);font-weight:var(--fw-medium);}
.quote-form__feedback.is-success{color:var(--color-success);}
.quote-form__feedback.is-error{color:var(--color-error);}
.section--dark .quote-form__feedback.is-error{color:var(--color-error-on-dark);}
.spinner{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:var(--btn-ink,#fff);border-radius:50%;}
.is-loading .spinner{display:inline-block;animation:pfar-spin .7s linear infinite;}
@keyframes pfar-spin{to{transform:rotate(360deg);}}
.form-fallback{background:var(--color-surface);color:var(--color-text);border-radius:0;padding:var(--space-6);text-align:left;}
.form-fallback h2{margin-bottom:var(--space-3);}
.hero .form-fallback{border-top:4px solid transparent;border-image-source:var(--rule-2tone);border-image-slice:1;}
/* 7. TRUST / OPEN NOW --------------------------------------------------- */
.trust-bar{background:#fff;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-8) 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:1px;height:32px;background:var(--color-border);}
}
.trust-bar .trust-badges{padding:var(--space-5) var(--space-4);}
/* The hairline between the metrics row and the badges only when BOTH render
(badges-only is the shipped default — no stray rule under the top border). */
.trust-bar .trust-bar__inner + .container > .trust-badges{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-rating a{text-decoration:underline;}
.stars{display:inline-flex;color:var(--color-star);}
.stars svg{width:1.1em;height:1.1em;}
.trust-metric{display:flex;flex-direction:column;}
.trust-metric__value{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--fw-display);color:var(--color-primary);line-height:1;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;}
.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:#fff;border:1px solid var(--color-border);border-radius:0;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.2;}
.trust-badge svg{width:20px;height:20px;flex:none;color:var(--color-primary);}
.open-now{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--fw-semibold);font-size:var(--text-sm);}
.open-now__label{white-space:nowrap;}
.open-now__next{color:var(--color-on-dark-muted);font-weight:var(--fw-normal);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums;}
.open-now__dot{width:9px;height:9px;border-radius:50%;background:var(--color-on-dark-muted);}
.open-now.is-open .open-now__dot{background:var(--color-success);}
.open-now.is-closed .open-now__dot{background:var(--color-error-on-dark);}
/* 8. CARDS / SILO ------------------------------------------------------- */
/* chamfer-card: 20px top-right cut, drawn in TWO stacked layers so the 1px
hairline survives the cut (a single clipped element loses its border along
the diagonal). ::before = hairline (z -2), ::after = surface (z -1) carrying
the 4px 25/75 two-tone TOP rule that ends where the cut starts. Children sit
at z 1. No shadow, no lift, no radius; surface is always white (dark-3 on the
dark band). Cards look finished with no image — no reserved media slot. */
.card,.project-card,.team-card,.testimonial,.credential,.directory__card,.faq__item,.cta-banner,.quote-form-wrap,.process__step{
position:relative;isolation:isolate;border:0;border-radius:0;box-shadow:none;background:transparent;padding:1px;overflow:visible;
clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);}
.card::before,.project-card::before,.team-card::before,.testimonial::before,.credential::before,.directory__card::before,.faq__item::before,.cta-banner::before,.quote-form-wrap::before,.process__step::before{
content:"";position:absolute;inset:0;z-index:-2;background:var(--color-border);
clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);transition:background-color var(--transition);}
.card::after,.project-card::after,.team-card::after,.testimonial::after,.credential::after,.directory__card::after,.faq__item::after,.cta-banner::after,.quote-form-wrap::after,.process__step::after{
content:"";position:absolute;inset:1px;z-index:-1;background-color:var(--color-surface-card);
clip-path:polygon(0 0,calc(100% - 19.6px) 0,100% 19.6px,100% 100%,0 100%);
background-image:var(--rule-2tone);background-size:calc(100% - 20px) 4px;background-repeat:no-repeat;}
.card > *,.project-card > *,.team-card > *,.testimonial > *,.credential > *,.directory__card > *,.faq__item > *,.cta-banner > *,.quote-form-wrap > *,.process__step > *{position:relative;z-index:1;}
/* Component paddings are re-declared AFTER the shared 1px chamfer padding. */
.quote-form-wrap{padding:var(--space-8);}
.card{display:flex;flex-direction:column;}
/* Media renders only when an image exists (B); the rule stays visible above it. */
.card__media{display:block;margin:4px 0 0;text-decoration:none;}
.card__media img{width:100%;aspect-ratio:3/2;object-fit:cover;}
.card__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);flex:1;}
.card__title{font-size:var(--text-xl);margin:0;letter-spacing:var(--track-h3);line-height:var(--lh-h3);}
.card__title a{color:inherit;text-decoration:none;}
.card__title a:hover{color:var(--color-primary-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em;}
.card__title svg{width:.9em;height:.9em;vertical-align:-.1em;margin-right:.3em;}
.card__excerpt{color:var(--color-muted);font-size:var(--text-sm);margin:0;}
.card__meta{font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--color-text);margin:0;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;}
.card__cta{margin-top:auto;padding-top:var(--space-2);font-weight:var(--fw-bold);color:var(--color-primary-ink);display:inline-flex;align-items:center;gap:var(--space-1);text-decoration:none;}
.card__cta:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em;}
.card__cta svg{width:1em;height:1em;transition:transform var(--transition);}
.card__cta:hover svg{transform:translateX(3px);}
/* Content cards — the per-page [pfar_cards] set (Postavke stranice → Kartice).
Reuses the chamfer .card shell; the .content-card scope outranks the
.prose-content h3 rules so titles keep the card size inside page copy. */
.content-cards{display:grid;gap:var(--space-6);grid-template-columns:1fr;margin:var(--space-8) 0;}
@media(min-width:560px){
.content-cards--2,.content-cards--3,.content-cards--4{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:900px){
.content-cards--3{grid-template-columns:repeat(3,1fr);}
.content-cards--4{grid-template-columns:repeat(4,1fr);}
}
.content-card .card__title{font-size:var(--text-xl);margin:0 0 var(--space-2);letter-spacing:var(--track-h3);line-height:var(--lh-h3);}
.content-card__text{font-size:var(--text-base);line-height:var(--lh-normal);color:var(--color-text);}
.content-card__text > :first-child{margin-top:0;}
.content-card__text > :last-child{margin-bottom:0;}
/* In-content button — [pfar_button]. One plain in the site's primary
button style (graphite fill, 8px chamfer, white label) with a CSS-drawn
chevron, so the markup stays a clean, crawlable link. The scoped selectors
outrank the .prose-content link underline + highlighter, which would
otherwise turn the button into an underlined link on hover. */
.pfar-button{display:block;margin:var(--space-6) 0;}
.pfar-button--center{text-align:center;}
.pfar-button--right{text-align:right;}
.pfar-button a.pfar-button__link{min-height:48px;gap:var(--space-3);text-decoration:none;}
.pfar-button a.pfar-button__link::after{content:"";flex:0 0 auto;width:.45em;height:.45em;margin-left:-2px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform var(--transition);}
.pfar-button a.pfar-button__link:hover,.pfar-button a.pfar-button__link:focus-visible{text-decoration:none;}
.pfar-button a.btn--primary:hover,.pfar-button a.btn--primary:focus-visible{color:var(--btn-ink,#fff);background-color:transparent;background-image:linear-gradient(225deg,transparent 0 5.66px,var(--btn-bg-hover,var(--color-primary-hover)) 5.66px);}
.pfar-button a.btn--ghost:hover,.pfar-button a.btn--ghost:focus-visible{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
@media(prefers-reduced-motion:no-preference){
.pfar-button a.pfar-button__link:hover::after{transform:translateX(3px) rotate(45deg);}
}
.silo{margin:0;padding:var(--space-16) 0;background:transparent;border-radius:0;}
.silo__heading{margin-bottom:var(--space-6);font-size:var(--text-3xl);text-align:left;}
.silo__links{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-start;}
.silo__links a{background:#fff;border:1px solid var(--color-border);border-radius:0;padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--color-text);text-decoration:none;transition:background-color var(--transition),color var(--transition),border-color var(--transition);}
.silo__links a:hover{background:var(--color-primary);color:var(--color-on-dark);border-color:var(--color-primary);text-decoration:none;}
/* Manual-list rows without a resolvable page render as plain chips. */
.silo__links-item{background:var(--color-surface);border:1px solid var(--color-border);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--color-muted);}
/* "Pogledaj sve" row under a front-page grid (B emits p.grid-more). */
.grid-more{margin:var(--space-8) 0 0;text-align:left;}
/* Team / guarantees blocks on page-team.php (B emits div.team-section / div.guarantees-section around a .section-head + shortcode output). */
.team-section,.guarantees-section{margin-top:var(--space-16);}
.team-section .section-head,.guarantees-section .section-head{margin-bottom:var(--space-8);}
.team-section .section-head__eyebrow svg,.guarantees-section .section-head__eyebrow svg{width:1.1em;height:1.1em;}
/* 9. FAQ ---------------------------------------------------------------- */
.faq{padding:var(--space-20) 0;}
.faq__heading{text-align:left;margin-bottom:var(--space-8);font-size:var(--text-3xl);}
.faq__list{max-width:var(--width-content);margin:0;display:flex;flex-direction:column;gap:var(--space-3);}
.faq__item{overflow:visible;}
.faq__item[open]::before{background:var(--color-border-strong);}
.faq__summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-6);cursor:pointer;list-style:none;transition:background-color 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{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em;}
/* FAQ questions are full sentences: body sans 700 (the 900 face is for short display lines). */
.faq-question{font-family:var(--font);font-size:var(--text-lg);margin:0;font-weight:var(--fw-bold);letter-spacing:0;line-height:1.4;}
.faq__chevron{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:0;border:1px solid var(--color-border);background:#fff;color:var(--color-primary);transition:transform var(--transition),background-color 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);border-color:var(--color-primary);color:#fff;}
.faq__answer{padding:var(--space-4) var(--space-6) var(--space-6);color:var(--color-text);font-size:var(--text-base);line-height:var(--lh-normal);}
.faq__answer p:last-child{margin-bottom:0;}
/* 10. CTA BANNER -------------------------------------------------------- */
/* LIGHT chamfer card with the two-tone top rule (the page tail must not be
dark band → dark banner → dark footer). BEM inner classes only (§21.20). */
.cta-banner{width:min(calc(100% - var(--space-8)),calc(var(--width-wide) - var(--space-8)));margin:var(--space-12) auto;color:var(--color-text);text-align:left;}
.cta-banner .container{max-width:none;padding-left:0;padding-right:0;}
.cta-banner__inner{padding:var(--space-12) var(--space-8);max-width:var(--prose-measure);}
.cta-banner__title{color:var(--color-text);margin-bottom:var(--space-3);}
.cta-banner__text{color:var(--color-muted);font-size:var(--text-lg);margin-bottom:var(--space-6);max-width:60ch;}
.cta-banner__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-start;}
/* Optional dark variant (operator shortcode contexts). */
.cta-banner--dark{color:var(--color-on-dark);}
.cta-banner--dark::before{background:var(--color-dark-border);}
.cta-banner--dark::after{background-color:var(--color-dark-3);}
.cta-banner--dark .cta-banner__title{color:#fff;}
.cta-banner--dark .cta-banner__text{color:var(--color-on-dark-muted);}
.cta-banner--dark .btn--ghost{border-color:var(--color-accent);color:var(--color-on-dark);}
.cta-banner--dark .btn--ghost:hover{background:var(--color-accent);color:var(--color-accent-ink);}
/* 11. TESTIMONIALS ------------------------------------------------------ */
.testimonials{padding:var(--space-20) 0;background:var(--color-surface);position:relative;}
.testimonials__track{display:grid;gap:var(--space-6);}
@media(min-width:768px){.testimonials__track{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.testimonials__track{grid-template-columns:repeat(3,1fr);}}
.testimonial{padding:var(--space-8);}
.testimonial__stars{color:var(--color-star);margin-bottom:var(--space-3);display:flex;}
.testimonial__stars svg{width:1.1em;height:1.1em;}
.testimonial__text{font-size:var(--text-lg);margin-bottom:var(--space-4);}
.testimonial__author{font-weight:var(--fw-semibold);margin-bottom:0;}
.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-radius:0;padding:var(--space-8);margin:var(--space-12) 0;border-top:4px solid transparent;border-image-source:var(--rule-2tone);border-image-slice:1;}
.author-box__photo img{width:96px;height:96px;border-radius:0;object-fit:cover;}
.author-box__body{flex:1;min-width:240px;}
.author-box__eyebrow{display:block;text-transform:uppercase;letter-spacing:var(--track-eyebrow);font-size:var(--text-xs);font-weight:var(--fw-bold);line-height:1.3;color:var(--color-muted);}
.author-box__name{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--fw-display);line-height:var(--lh-h3);letter-spacing:var(--track-h3);color:var(--color-text);margin:var(--space-1) 0;}
.author-box__creds{color:var(--color-text);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 a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--color-border);background:#fff;text-decoration:none;color:var(--color-primary-ink);}
.author-box__social a:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
.author-box__social svg{width:1.2em;height:1.2em;}
.author-box__all{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:var(--fw-bold);text-decoration:none;}
.author-box__all:hover{text-decoration:underline;}
.author-box__all svg{width:1em;height:1em;}
.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;}
/* Editorial-process note drops below the line as a popover (never pushes the row). */
.fact-check__panel{position:absolute;top:calc(100% + 6px);left:0;min-width:260px;max-width:min(420px,90vw);background:#fff;color:var(--color-text);border:1px solid var(--color-border-strong);border-radius:0;box-shadow:none;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{display:flex;flex-direction:column;}
.project-card__images{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:4px 0 0;border-radius:0;overflow:visible;}
.project-card__images figure{margin:0;position:relative;}
.project-card__images img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.project-card__images figcaption{position:absolute;bottom:0;left:0;background:var(--color-dark-2);color:#fff;font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:var(--track-eyebrow);text-transform:uppercase;padding:3px 8px;}
.project-card__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);flex:1;}
.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:flex-start;padding:var(--space-8) 0;}
.credential{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);}
.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:flex-start;padding:var(--space-8) 0;}
.awards img{max-height:48px;width:auto;filter:grayscale(1);opacity:.75;transition:opacity var(--transition),filter 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:left;padding:var(--space-6);}
.team-card__photo img{width:120px;height:120px;border-radius:0;object-fit:cover;margin:0 0 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:left;padding:var(--space-6) var(--space-6) var(--space-6) 0;border-top:3px solid transparent;border-image-source:var(--rule-2tone);border-image-slice:1;}
.guarantee svg{width:2.4em;height:2.4em;color:var(--color-primary);margin-bottom:var(--space-2);}
.freshness{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-muted);margin:var(--space-3) 0;}
.freshness svg{width:1.1em;height:1.1em;flex:none;}
/* 13. BREADCRUMBS / PROSE / BLOG --------------------------------------- */
/* Dark strip so inner pages run header → breadcrumbs → dark hero with no light gap. */
.breadcrumbs{font-size:var(--text-sm);padding:var(--space-3) 0;background:var(--color-dark-2);color:var(--color-on-dark-muted);border:0;}
.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-dark-border);}
.breadcrumbs a{color:#fff;text-decoration:none;}
.breadcrumbs a:hover{text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:.18em;}
.content-narrow{max-width:var(--prose-measure);margin-left:auto;margin-right:auto;}
/* Prose: ≤70ch at 19px, always on white / surface, never on a dark band. */
/* Page copy shares the container's LEFT content edge with every other section
(hero, headings, grids, FAQ, footer) instead of floating centred; the text
measure is set on its children, so every block in the copy — paragraphs,
headings, tables, cards, buttons, read-more — ends at the same right edge as
the FAQ list. Nested inside a .container, the container supplies the gutter. */
.prose-content{max-width:var(--width-wide);margin:0 auto;padding:var(--space-12) var(--space-4);font-size:var(--text-lg);}
.prose-content.content-narrow{max-width:var(--width-wide);}
.container .prose-content{max-width:none;padding-left:0;padding-right:0;}
.prose-content > *{max-width:var(--width-content);}
.prose-content > .alignwide,.prose-content > .alignfull{max-width:none;}
.prose-content h2{font-size:var(--text-3xl);margin-top:var(--space-12);}
.prose-content h3{font-size:var(--text-2xl);margin-top:var(--space-8);}
.prose-content h4{margin-top:var(--space-6);}
.prose-content h2:first-child,.prose-content h3:first-child{margin-top:0;}
.prose-content a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;}
.prose-content a:hover,.prose-content a:focus-visible,.faq__answer a:hover,.faq__answer a:focus-visible,.entry-content a:hover,.form-fallback a:hover,.cta-banner__text a:hover,.contact-list a:hover,.author-box__bio a:hover,.fact-check__panel a:hover,.booking-form__photo-hint a:hover,.testimonial__text a:hover{background:var(--color-accent);text-decoration-color:var(--color-text);}
.prose-content img{border-radius:0;margin:var(--space-6) 0;}
.prose-content table{border-collapse:collapse;width:100%;margin:var(--space-6) 0;font-size:var(--text-base);}
.prose-content table td.num,.prose-content table th.num{white-space:normal;}
.prose-content th,.prose-content td{border:1px solid var(--color-border);padding:var(--space-2) var(--space-3);text-align:left;vertical-align:top;}
.prose-content th{background:var(--color-surface);font-weight:var(--fw-bold);}
.prose-content blockquote{margin:var(--space-6) 0;padding:var(--space-2) 0 var(--space-2) var(--space-5);border-left:3px solid var(--color-primary);color:var(--color-muted);}
.post-thumb img{border-radius:0;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);}
/* Single post / project header and the author archive head (structural wrappers). */
.entry-header{margin-bottom:var(--space-6);}
.entry-header h1{margin-bottom:var(--space-3);}
.author-archive-head{margin-bottom:var(--space-8);}
/* Related posts (single.php) — a white section under the author box / prose. */
.related-posts{padding-top:var(--space-12);}
/* Contact page (page-contact.php). */
.contact-info{margin-bottom:var(--space-8);}
.contact-list{list-style:none;padding:0;margin:var(--space-4) 0 0;}
.contact-list li{display:flex;align-items:flex-start;gap:var(--space-2);margin-bottom:var(--space-3);}
.contact-list svg{width:1.1em;height:1.1em;flex:none;margin-top:.25em;color:var(--color-primary);}
.contact-form .quote-form-wrap{padding:var(--space-8);}
/* Search form (search.php, 404.php). */
.search-form{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.search-form .search-field{flex:1 1 200px;padding:var(--space-3) var(--space-4);border:1px solid var(--color-field-border);border-radius:0;font:inherit;color:var(--color-text);background:#fff;}
.search-form .search-field:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary);}
/* Native WordPress pagination (blog index, archives, search). */
.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:0;font-weight:var(--fw-semibold);color:var(--color-text);text-decoration:none;font-variant-numeric:tabular-nums lining-nums;transition:background-color var(--transition),color var(--transition),border-color var(--transition);}
.pagination .page-numbers.current{background:var(--color-primary);color:#fff;border-color:var(--color-primary);}
.pagination a.page-numbers:hover{background:var(--color-surface);border-color:var(--color-border-strong);color:var(--color-primary);text-decoration:none;}
/* Read More (collapsible content) — JS-gated so no-JS shows everything.
The button only appears once JS adds .is-ready (i.e. content was long
enough to collapse), so short content never shows a dead button. */
.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%;}
/* more-tag mode */
.js .readmore.is-collapsed .readmore__hidden{display:none;}
/* height mode */
.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 ------------------------------------------------------------ */
.site-footer{background:var(--color-dark);color:var(--color-on-dark-muted);padding:var(--space-20) 0 var(--space-24);margin-top:var(--space-16);border-top:3px solid transparent;border-image-source:var(--rule-2tone);border-image-slice:1;}
.site-footer a{color:#fff;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;}
.site-footer a:hover{color:#fff;text-decoration-color:var(--color-accent);}
.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-col{min-width:0;}
.footer-widget__title,.site-footer h3{color:#fff;font-size:var(--text-lg);margin-bottom:var(--space-4);}
.site-footer h3{font-family:var(--font-display);font-weight:var(--fw-display);letter-spacing:var(--track-h3);}
.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{text-decoration:none;}
.footer-menu a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--color-accent);}
.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{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:0;border:1px solid var(--color-dark-border);background:var(--color-dark-3);text-decoration:none;transition:background-color var(--transition),color var(--transition),border-color var(--transition);}
.footer-social a:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink);}
.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:left;}
/* Mobile sticky conversion bar — graphite base, the accent fill on the last child (WhatsApp). */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;background:var(--color-dark);box-shadow:none;border-top:1px solid var(--color-dark-border);}
.sticky-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);color:#fff;font-weight:var(--fw-bold);text-decoration:none;}
.sticky-bar a+a{border-left:1px solid var(--color-dark-border);}
.sticky-bar a:last-child{background:var(--color-accent);color:var(--color-accent-ink);}
.sticky-bar svg{width:1.2em;height:1.2em;}
@media(min-width:960px){.sticky-bar{display:none;}}
body.has-sticky-bar{padding-bottom:64px;}
/* The consent banner (companion) sets --consent-h + body.has-consent so fixed chrome never hides the submit. */
body.has-consent{padding-bottom:calc(64px + var(--consent-h,0px));}
@media(min-width:960px){body.has-sticky-bar,body.has-consent{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;text-decoration:underline;}
.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;}
/* Two-tone focus ring: ink ring + accent halo on light; inverted on dark
surfaces. Both layers ≥2px so either alone satisfies 2.4.13. This is the
ONLY box-shadow in the build. */
:focus-visible{outline:3px solid var(--color-text);outline-offset:2px;box-shadow:0 0 0 6px var(--color-accent);}
.hero :focus-visible,.section--dark :focus-visible,.site-header :focus-visible,.site-footer :focus-visible,.sticky-bar :focus-visible,.main-nav :focus-visible,.pfar-consent :focus-visible,.topbar :focus-visible,.breadcrumbs :focus-visible,.promo-bar:focus-visible,.cta-banner--dark :focus-visible{outline-color:var(--color-accent);box-shadow:0 0 0 6px var(--color-primary);}
/* The white card inside the hero is a light context again. */
.quote-form-wrap :focus-visible,.form-fallback :focus-visible{outline-color:var(--color-text);box-shadow:0 0 0 6px var(--color-accent);}
.text-center{text-align:center;}
/* Section heads: LEFT-aligned — eyebrow (dash) → H2 → intro ≤60ch. */
.section-head{text-align:left;max-width:none;margin:0 0 var(--space-12);}
.section-head h1,.section-head h2{font-size:var(--text-3xl);margin-bottom:var(--space-3);max-width:24ch;}
h2.section-head{font-size:var(--text-3xl);margin:0 0 var(--space-8);max-width:none;}
.section-head p{color:var(--color-muted);font-size:var(--text-lg);margin:var(--space-3) 0 0;max-width:60ch;}
.section-head__eyebrow{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font);font-size:var(--text-xs);font-weight:var(--fw-bold);line-height:1.3;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--color-muted);margin-bottom:var(--space-3);}
.section-head__eyebrow::before{content:"";flex:none;width:16px;height:3px;background:var(--rule-2tone);}
.section--dark .section-head__eyebrow{color:var(--color-accent);}
.section--dark .section-head p{color:var(--color-on-dark-muted);}
/* Scroll reveal — only when JS is present, and only if motion allowed.
(B removes .reveal from .hero__content and .booking-shell — the H1 is the LCP.) */
.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;}
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
.card__cta:hover svg{transform:none;}
}
.no-js .reveal{opacity:1;transform:none;}
/* 16. QUOTE WIZARD (2-step lead form) --------------------------------- */
.booking-form__head{text-align:left;margin-bottom:var(--space-6);}
.booking-form__title{font-size:var(--text-2xl);margin-bottom:var(--space-2);}
.booking-form__sub{color:var(--color-muted);margin:0;}
/* Step indicator */
.booking-form:not(.is-enhanced) .booking-steps{display:none;}
.booking-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;}
.booking-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;}
.booking-steps__item:not(:first-child)::before{content:"";position:absolute;top:17px;right:50%;left:-50%;height:2px;background:var(--color-border);z-index:0;}
.booking-steps__item.is-active::before,.booking-steps__item.is-done::before{background:var(--color-primary);}
.booking-steps__num{position:relative;z-index:1;width:36px;height:36px;border-radius:0;background:var(--color-surface);border:2px solid var(--color-border);color:var(--color-muted);display:inline-flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums lining-nums;}
.booking-steps__item.is-active .booking-steps__num,.booking-steps__item.is-done .booking-steps__num{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
.booking-steps__item.is-active{color:var(--color-text);}
.booking-steps__label{line-height:1.2;}
.booking-form.is-enhanced .booking-steps__item.is-done{cursor:pointer;}
@media(max-width:479px){.booking-steps__label{display:none;}}
/* Steps: stacked & fully usable without JS; one-at-a-time once enhanced. */
.booking-step+.booking-step{margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--color-border);}
.booking-form.is-enhanced .booking-step{display:none;margin-top:0;padding-top:0;border-top:0;}
.booking-form.is-enhanced .booking-step.is-active{display:block;}
.booking-step__heading{font-family:var(--font);font-weight:var(--fw-bold);font-size:var(--text-lg);letter-spacing:0;line-height:var(--lh-snug);margin:var(--space-6) 0 var(--space-4);}
.booking-step__heading:first-child{margin-top:0;}
/* Field grid */
.booking-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4) var(--space-5);}
@media(min-width:560px){.booking-grid{grid-template-columns:1fr 1fr;}}
.booking-grid .field{margin-bottom:0;}
/* Step count — muted ink on the white card (the accent is never text on light). */
.booking-step__count{display:block;font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:var(--track-eyebrow);line-height:1.3;text-transform:uppercase;color:var(--color-muted);margin-bottom:var(--space-2);font-variant-numeric:tabular-nums lining-nums;}
.quote-form input[type="date"]{min-height:46px;-webkit-appearance:none;appearance:none;}
.field--full{grid-column:1 / -1;}
/* Honesty notes revealed by the selected condition (SSR hidden; main.js toggles). */
.choice-note{margin:0 0 var(--space-5);padding:var(--space-3) var(--space-4);background:var(--color-surface);border-left:3px solid var(--color-primary);font-size:var(--text-sm);line-height:var(--lh-snug);color:var(--color-text);}
.choice-note[hidden]{display:none!important;}
/* Nav buttons (next/back hidden until JS enhances; submit always present) */
.booking-nav{display:flex;gap:var(--space-3);margin-top:var(--space-8);align-items:center;justify-content:space-between;flex-wrap:wrap;}
.booking-nav--end{justify-content:flex-end;}
.booking-nav__btn{display:none;}
.booking-form.is-enhanced .booking-nav__btn{display:inline-flex;}
.booking-submit{margin-left:auto;}
/* Photo hint, trust microcopy and micro-copy under the submit. */
.booking-form__photo-hint{margin:var(--space-4) 0 0;font-size:var(--text-sm);line-height:var(--lh-snug);color:var(--color-text);}
.booking-form__trust{margin:var(--space-4) 0 0;text-align:left;font-size:var(--text-sm);color:var(--color-muted);}
.booking-form__trust::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.5em;background:var(--color-success);vertical-align:middle;}
.booking-form__micro{margin:var(--space-2) 0 0;font-size:var(--text-xs);line-height:var(--lh-snug);color:var(--color-muted);}
/* One-step lead form (name · contact · city · photo · send). Shares the
.quote-form field styling; only the file row and the submit differ. */
.quote-form-wrap:has(.lead-form){padding:var(--space-6);}
/* The hero card carries the 12px glass-flute strip on its left edge — keep the
same clear space on both sides of the fields (the ≤640px rule still wins). */
.hero .quote-form-wrap:has(.lead-form){padding:var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 12px);}
.lead-form{container-type:inline-size;}
.lead-form .booking-form__head{margin-bottom:var(--space-4);}
.lead-form .booking-form__title{margin:0;}
.lead-form .field{margin-bottom:var(--space-3);}
.lead-form label{margin-bottom:var(--space-1);}
.lead-form input:not([type="file"]),.lead-form select{min-height:44px;padding:var(--space-2) var(--space-3);line-height:1.3;}
.lead-form textarea{min-height:0;padding:var(--space-2) var(--space-3);line-height:1.4;}
/* Name + contact side by side once the form itself is wide enough. */
.lead-form__row{display:grid;grid-template-columns:1fr;column-gap:var(--space-3);}
@container (min-width:340px){.lead-form__row{grid-template-columns:1fr 1fr;}}
.lead-form .field__hint{margin-top:var(--space-1);}
.lead-form .booking-form__trust{margin-top:var(--space-3);}
.lead-form input[type="file"]{width:100%;padding:var(--space-2);border:1px dashed var(--color-field-border);background:var(--color-surface);font-size:var(--text-sm);cursor:pointer;}
.lead-form input[type="file"]::file-selector-button{margin-right:var(--space-3);padding:var(--space-1) var(--space-3);border:1px solid var(--color-primary);background:#fff;color:var(--color-text);font:inherit;font-size:var(--text-sm);font-weight:var(--fw-semibold);cursor:pointer;}
.lead-form input[type="file"]:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary);}
.field__hint{margin:var(--space-2) 0 0;font-size:var(--text-xs);line-height:var(--lh-snug);color:var(--color-muted);}
.lead-form__submit{width:100%;margin-top:var(--space-2);}
.hero .quote-form-wrap .btn--primary{background-color:transparent;background-image:linear-gradient(225deg,transparent 0 5.66px,var(--btn-bg,var(--color-primary)) 5.66px);}
.hero .quote-form-wrap .btn--primary:hover{background-color:transparent;background-image:linear-gradient(225deg,transparent 0 5.66px,var(--btn-bg-hover,var(--color-primary-hover)) 5.66px);}
/* =========================================================================
* Per-city DIRECTORY (imenik) + FEATURED #1 hero badge
* ====================================================================== */
.directory{padding:var(--space-20) 0;background:var(--color-surface);position:relative;}
.directory__heading{text-align:left;margin-bottom:var(--space-8);font-size:var(--text-3xl);}
.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{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);}
.directory__card--featured::before{background:var(--color-primary);}
.directory__card--featured .directory__name::after{content:"★";margin-left:.4em;color:var(--color-star);font-size:.9em;}
.directory__rank{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border-radius:0;background:var(--color-primary);color:#fff;font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--text-base);font-variant-numeric:tabular-nums lining-nums;}
.directory__card--featured .directory__rank{background:var(--color-accent);color:var(--color-accent-ink);}
.directory__name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--fw-display);letter-spacing:var(--track-h3);margin:0;color:var(--color-text);}
.directory__rating{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--color-text);font-variant-numeric:tabular-nums lining-nums;}
.directory__rating-val{font-weight:var(--fw-bold);}
.directory__star{display:inline-flex;align-items:center;justify-content:center;color:var(--color-star);}
.directory__star svg{width:1em;height:1em;}
.directory__rating-count{color:var(--color-muted);font-weight:var(--fw-normal);}
.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:0;font-size:var(--text-sm);font-weight:var(--fw-bold);border:1px solid var(--color-border);background:var(--color-white);color:var(--color-primary-ink);text-decoration:none;transition:background-color var(--transition),color var(--transition),border-color var(--transition);}
.directory__action svg{width:1em;height:1em;}
.directory__action:hover{text-decoration:none;border-color:var(--color-primary);background:var(--color-surface);color:var(--color-primary-strong);}
.directory__action--call{background:var(--color-primary-strong);border-color:var(--color-primary-strong);color:#fff;}
.directory__action--call:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff;}
.directory__action--web,.directory__action--mail{background:var(--color-white);}
/* FEATURED #1 hero badge — outline chip above the eyebrow on city pages (no second accent fill in the hero). */
.hero__featured-badge{display:inline-flex;align-items:center;gap:var(--space-2);background:transparent;border:2px solid var(--color-accent);color:var(--color-accent);font-weight:var(--fw-bold);font-size:var(--text-xs);letter-spacing:var(--track-eyebrow);line-height:1.3;text-transform:uppercase;padding:var(--space-2) var(--space-3);border-radius:0;margin-bottom:var(--space-4);box-shadow:none;}
.hero__featured-badge svg{width:1.1em;height:1.1em;}
/* Featured #1-spot tagline (city/area hero, under the business-name eyebrow). */
.hero__featured-tagline{display:block;margin:calc(-1 * var(--space-3)) 0 var(--space-5);color:var(--color-on-dark-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 with expiry — above the topbar (header.php). Dark variant by
default (dark-2 + accent text) so the accent budget stays at one fill per
viewport; main.js hides it client-side past data-until (cache safety). */
.promo-bar{display:block;background:var(--color-dark-2);color:var(--color-accent);text-align:center;font-size:var(--text-sm);font-weight:var(--fw-bold);letter-spacing:.02em;text-decoration:none;border-bottom:1px solid var(--color-dark-border);}
.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-dark-3);color:var(--color-accent-hover);text-decoration:underline;text-underline-offset:3px;}
.promo-bar--dark{background:var(--color-dark-2);color:var(--color-accent);}
a.promo-bar--dark:hover{background:var(--color-dark-3);color:var(--color-accent-hover);}
/* Kvartovi i naselja — chips + area checker (content-local-areas / [pfar_area_check]). */
.local-areas{padding:var(--space-16) 0;}
.local-areas__heading{text-align:left;margin-bottom:var(--space-6);font-size:var(--text-3xl);}
.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:#fff;border:1px solid var(--color-border);border-radius:0;padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--color-text);box-shadow:none;}
.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-field-border);border-radius:0;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 2px var(--color-primary);}
/* Result boxes carry their own light fill + border → readable on any section bg (§21.4). */
.area-check__result{max-width:560px;margin:var(--space-6) 0 0;padding:var(--space-5) var(--space-6);border-radius:0;border:1px solid var(--color-border);background:#fff;text-align:left;box-shadow:none;}
.area-check__result.is-yes{border-color:var(--color-success);}
.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 (testimonials + projects).
Self-contained dark card + accent play square: contrast-safe on light AND dark (§21.4). */
.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:0;background:var(--color-dark);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:border-color var(--transition);}
.video-facade:hover{color:#fff;text-decoration:none;border-color:var(--color-accent);box-shadow:none;}
.video-facade__play{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:0;background:var(--color-accent);color:var(--color-accent-ink);font-size:var(--text-2xl);box-shadow:none;}
.video-facade__play svg{margin-left:2px;width:1em;height:1em;}
.video-facade__label{display:block;text-align:center;}
.video-embed{margin-top:var(--space-4);}
.video-embed iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:0;}
/* Map embed — per-page override section on area/combo pages + shared iframe sizing. */
.map-embed{padding:var(--space-16) 0;}
.map-embed iframe,.pfar-map iframe{display:block;width:100%;min-height:320px;border:1px solid var(--color-border);border-radius:0;}
/* -------------------------------------------------------------------------
* Tool page (page-tool.php) — deliberately quiet chrome for linkable assets.
* The tool itself (WPCode shortcode in the content) is the whole page.
* ---------------------------------------------------------------------- */
.tool-header{border-bottom:1px solid var(--color-border,#D3D7DE);padding:var(--space-3,.75rem) 0;background:#fff;}
.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,#16171A);text-decoration:none;}
.tool-page__inner{max-width:var(--width-content,720px);padding-top:var(--space-8,2rem);padding-bottom:var(--space-12,2.75rem);}
.tool-page__title{font-size:var(--text-3xl,2rem);margin:0 0 var(--space-6,1.5rem);}
/* The tool page's prose sits inside .tool-page__inner (own gutters) — no double padding. */
.tool-page__content{padding:0;max-width:none;}
.tool-footer{border-top:1px solid var(--color-border,#D3D7DE);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,#5C6470);}
.tool-footer__inner p{margin:0;}
.tool-footer__inner a{color:inherit;}
/* =========================================================================
17. OPTIC-RESTORATION PROFILE OVERRIDES (§6 / DESIGN-MANIFEST.json)
Profile: optic-restoration (new, declared).
Axes: typography=black-grotesque · hero=beam-cutoff ·
section_rhythm=banded-dense · cards=chamfer-card · header=transparent ·
texture=glass-flute.
Scoped to the dp-* body classes seeded from PFAR_DESIGN_PROFILE
(functions.php) + the hero--beam-cutoff part class, so functionality is
identical to the base build — only the look changes.
====================================================================== */
/* --- TYPOGRAPHY: black-grotesque ---------------------------------------- */
/* The display face is asked for exactly ONE weight (900) everywhere. Arial
Black is single-cut: no italic exists, so font-synthesis is off for the
display face only (never on body) and emphasis inside a heading stays
upright. Sentence case only — never uppercase on the display face. */
.dp-type-black-grotesque h1,.dp-type-black-grotesque h2,.dp-type-black-grotesque h3,
.dp-type-black-grotesque .hero__title,.dp-type-black-grotesque .site-title,
.dp-type-black-grotesque .hero__fact-value,.dp-type-black-grotesque .trust-metric__value,
.dp-type-black-grotesque .process__num,.dp-type-black-grotesque .author-box__name,
.dp-type-black-grotesque .directory__name,.dp-type-black-grotesque .directory__rank{
font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;font-kerning:normal;text-transform:none;}
.dp-type-black-grotesque h1 em,.dp-type-black-grotesque h2 em,.dp-type-black-grotesque h3 em,
.dp-type-black-grotesque h1 i,.dp-type-black-grotesque h2 i,.dp-type-black-grotesque h3 i{font-style:normal;}
.dp-type-black-grotesque h1 strong,.dp-type-black-grotesque h2 strong,.dp-type-black-grotesque h3 strong{font-weight:inherit;}
.dp-type-black-grotesque h1{letter-spacing:var(--track-h1);line-height:var(--lh-tight);}
.dp-type-black-grotesque h2{letter-spacing:var(--track-h2);line-height:var(--lh-h2);}
.dp-type-black-grotesque h3{letter-spacing:var(--track-h3);line-height:var(--lh-h3);}
.dp-type-black-grotesque h4,.dp-type-black-grotesque h5,.dp-type-black-grotesque h6{font-family:var(--font);font-weight:var(--fw-bold);}
.dp-type-black-grotesque .site-title{letter-spacing:var(--track-h1);}
/* Wrapping: headings never hyphenate (a hyphenated city name in an H1 is a
bug) but never overflow either; body copy hyphenates by dictionary
(WordPress emits lang="hr-HR"). */
.dp-type-black-grotesque h1,.dp-type-black-grotesque h2,.dp-type-black-grotesque h3{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:anywhere;text-wrap:balance;}
.dp-type-black-grotesque p,.dp-type-black-grotesque li,.dp-type-black-grotesque dd,.dp-type-black-grotesque blockquote,
.dp-type-black-grotesque figcaption,.dp-type-black-grotesque .card__excerpt{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4;overflow-wrap:break-word;}
/* Eyebrows: body sans 700 uppercase .14em, the 16×3px two-tone dash, leading 1.3 (uppercase carons need the air). */
.dp-type-black-grotesque .section-head__eyebrow,.dp-type-black-grotesque .hero__eyebrow{font-family:var(--font);font-weight:var(--fw-bold);letter-spacing:var(--track-eyebrow);line-height:1.3;text-transform:uppercase;}
/* Figures: tabular lining numerals on every price / count / hours surface. */
.dp-type-black-grotesque .price,.dp-type-black-grotesque .price__value,.dp-type-black-grotesque .trust-metric__value,
.dp-type-black-grotesque .hours,.dp-type-black-grotesque td.num,.dp-type-black-grotesque th.num,.dp-type-black-grotesque .card__meta,
.dp-type-black-grotesque .hero__fact-value,.dp-type-black-grotesque .process__num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:normal;white-space:nowrap;}
.dp-type-black-grotesque .btn,.dp-type-black-grotesque .pfar-header-cta{text-transform:none;letter-spacing:0;font-family:var(--font);font-weight:var(--fw-bold);}
/* --- HERO: beam-cutoff -------------------------------------------------- */
/* Two-column grid ≥960: content left (eyebrow, H1, subtitle, facts, CTAs),
the quote card right, standing in the lit rise. Single column below. */
.dp-hero-beam-cutoff .hero__inner{padding:var(--space-20) 0;}
@media(min-width:960px){
.dp-hero-beam-cutoff .hero--booking .hero__inner{grid-template-columns:minmax(0,1fr) 26rem;align-items:start;column-gap:var(--space-12);}
.dp-hero-beam-cutoff .hero--booking .hero__content{padding-top:var(--space-6);}
}
/* Copy on the hero is white; subtitle uses the on-dark muted token (5.17:1 inside the lit sector at the .18 ceiling). */
.dp-hero-beam-cutoff .hero__title{color:#fff;}
.dp-hero-beam-cutoff .hero__subtitle{color:var(--color-on-dark-muted);}
/* On .home the hero is pulled under the transparent header row (dp-header axis). */
.dp-hero-beam-cutoff.home .site-main > .hero:first-child{margin-top:calc(-1 * var(--header-h));}
.dp-hero-beam-cutoff.home .site-main > .hero:first-child .hero__inner{padding-top:calc(var(--header-h) + var(--space-20));}
/* On .home the beam starts under the header row, so the transparent row always sits over flat graphite. */
.dp-hero-beam-cutoff.home .site-main > .hero--beam-cutoff:first-child::before{top:var(--header-h);}
.dp-hero-beam-cutoff.home .site-main > .hero--beam-cutoff:first-child::after{top:calc(var(--header-h) + 1px);}
/* ≤959: single column, tighter band (the --cut-y length above tracks this padding). */
@media(max-width:959px){
.dp-hero-beam-cutoff .hero__inner{padding-top:var(--space-16);padding-bottom:var(--space-16);}
.dp-hero-beam-cutoff.home .site-main > .hero:first-child .hero__inner{padding-top:calc(var(--header-h) + var(--space-16));}
}
/* Mobile: the card stacks below the CTAs at full width. */
@media(max-width:640px){
.dp-hero-beam-cutoff .hero__inner{gap:var(--space-6);}
.dp-hero-beam-cutoff .hero__ctas .btn--on-dark{display:none;} /* the sticky bar carries the call on phones */
.dp-hero-beam-cutoff .booking-shell{max-width:none;}
.dp-hero-beam-cutoff .hero .quote-form-wrap{padding:var(--space-6) var(--space-4) var(--space-6) calc(var(--space-4) + 12px);}
}
/* --- SECTION RHYTHM: banded-dense --------------------------------------- */
/* Tinted bands alternate with white; exactly ONE dark band per page (the
process band). Tinted and dark band TOPS carry the 3px 25/75 two-tone
hard-stop rule — before→after in reading order, the same direction as the
beam. Never an
, never between two white sections. */
.dp-rhythm-banded-dense .section{padding:var(--space-20) 0;}
.dp-rhythm-banded-dense .section--surface,.dp-rhythm-banded-dense .section--dark,
.dp-rhythm-banded-dense .testimonials,.dp-rhythm-banded-dense .directory{position:relative;}
.dp-rhythm-banded-dense .section--surface::before,.dp-rhythm-banded-dense .section--dark::before,
.dp-rhythm-banded-dense .testimonials::before,.dp-rhythm-banded-dense .directory::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--rule-2tone);pointer-events:none;}
.dp-rhythm-banded-dense .section-head{text-align:left;max-width:none;margin:0 0 var(--space-12);}
.dp-rhythm-banded-dense .section-head>h2::after,.dp-rhythm-banded-dense .section-head>h1::after,.dp-rhythm-banded-dense h2.section-head::after{content:none;}
.dp-rhythm-banded-dense .section-head p{max-width:60ch;margin:var(--space-3) 0 0;}
.dp-rhythm-banded-dense h2.section-head{text-align:left;margin:0 0 var(--space-8);}
/* The process band (the one dark band): 01–04 steps as dark-3 panels. */
.process .section-head{margin-bottom:var(--space-8);}
.process__heading{color:#fff;}
.process__steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6);grid-template-columns:1fr;}
@media(min-width:640px){.process__steps{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.process__steps{grid-template-columns:repeat(4,1fr);}}
.process__step{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6);color:var(--color-on-dark);}
.process__step::before{background:var(--color-dark-border);}
.process__step::after{background-color:var(--color-dark-3);}
.process__num{display:block;font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--text-3xl);line-height:1;letter-spacing:var(--track-h2);color:var(--color-accent);font-variant-numeric:tabular-nums lining-nums;margin-bottom:var(--space-2);}
.process__title{color:#fff;font-size:var(--text-xl);margin:0 0 var(--space-2);}
.process__text{color:var(--color-on-dark-muted);font-size:var(--text-sm);margin:0;}
/* --- CARDS: chamfer-card ------------------------------------------------ */
/* Hover/focus-within: the hairline darkens and the two-tone rule "clears"
(the before→after in a hover). No lift. Dark band: dark-3 surface, dark
hairline, white text. */
.dp-cards-chamfer-card .card:hover::before,.dp-cards-chamfer-card .card:focus-within::before,
.dp-cards-chamfer-card .project-card:hover::before,.dp-cards-chamfer-card .project-card:focus-within::before,
.dp-cards-chamfer-card .team-card:hover::before,.dp-cards-chamfer-card .directory__card:hover::before,
.dp-cards-chamfer-card .directory__card:focus-within::before,.dp-cards-chamfer-card .faq__item:hover::before,
.dp-cards-chamfer-card .testimonial:hover::before,.dp-cards-chamfer-card .credential:hover::before{background:var(--color-border-strong);}
.dp-cards-chamfer-card .card:hover::after,.dp-cards-chamfer-card .card:focus-within::after,
.dp-cards-chamfer-card .project-card:hover::after,.dp-cards-chamfer-card .project-card:focus-within::after,
.dp-cards-chamfer-card .directory__card:hover::after,.dp-cards-chamfer-card .directory__card:focus-within::after,
.dp-cards-chamfer-card .faq__item[open]::after{background-image:linear-gradient(90deg,var(--color-accent) 0 100%);}
.dp-cards-chamfer-card .card:hover,.dp-cards-chamfer-card .project-card:hover,.dp-cards-chamfer-card .directory__card:hover{transform:none;box-shadow:none;}
.dp-cards-chamfer-card .section--dark .card::before,.dp-cards-chamfer-card .section--dark .testimonial::before,
.dp-cards-chamfer-card .section--dark .project-card::before,.dp-cards-chamfer-card .section--dark .credential::before{background:var(--color-dark-border);}
.dp-cards-chamfer-card .section--dark .card::after,.dp-cards-chamfer-card .section--dark .testimonial::after,
.dp-cards-chamfer-card .section--dark .project-card::after,.dp-cards-chamfer-card .section--dark .credential::after{background-color:var(--color-dark-3);}
.dp-cards-chamfer-card .section--dark .card,.dp-cards-chamfer-card .section--dark .testimonial,
.dp-cards-chamfer-card .section--dark .project-card,.dp-cards-chamfer-card .section--dark .credential{color:var(--color-on-dark);}
.dp-cards-chamfer-card .section--dark .card__title,.dp-cards-chamfer-card .section--dark .card__cta,
.dp-cards-chamfer-card .section--dark .card__excerpt,.dp-cards-chamfer-card .section--dark .card__meta,
.dp-cards-chamfer-card .section--dark .testimonial__author,.dp-cards-chamfer-card .section--dark .testimonial__text{color:#fff;}
.dp-cards-chamfer-card .section--dark .card__excerpt,.dp-cards-chamfer-card .section--dark .testimonial__location{color:var(--color-on-dark-muted);}
.dp-cards-chamfer-card .card__media img,.dp-cards-chamfer-card .project-card__images img{border-radius:0;}
@media(prefers-reduced-motion:reduce){
.dp-cards-chamfer-card .card::before,.dp-cards-chamfer-card .project-card::before,.dp-cards-chamfer-card .directory__card::before,
.dp-cards-chamfer-card .faq__item::before,.dp-cards-chamfer-card .testimonial::before,.dp-cards-chamfer-card .credential::before,.dp-cards-chamfer-card .team-card::before{transition:none;}
}
/* --- HEADER: transparent (dark in ALL states) --------------------------- */
/* Transparent over the beam on .home only, with a 1px white-12% hairline;
the docked state and every inner page are closed by the 3px two-tone rule
at the bottom edge — never by a shadow. */
.dp-header-transparent .site-header{background:var(--color-primary);color:#fff;box-shadow:none;}
/* Transparent only when JS is present (main.js docks it with .is-shrunk); a JS failure leaves it solid. */
.js .dp-header-transparent.home .site-header:not(.is-shrunk):not(.is-open){background:transparent;border-bottom:1px solid rgba(255,255,255,.12);}
.dp-header-transparent .site-header.is-shrunk,.dp-header-transparent:not(.home) .site-header{border-bottom:0;}
.dp-header-transparent .site-header.is-shrunk::after,.dp-header-transparent:not(.home) .site-header::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--rule-2tone);pointer-events:none;}
.dp-header-transparent .site-header.is-open::after{content:none;}
.dp-header-transparent .topbar{background:var(--color-dark-2);color:var(--color-on-dark-muted);}
@media(max-width:640px){.dp-header-transparent.home .topbar{display:none;}}
/* --- TEXTURE: glass-flute (DARK surfaces only) -------------------------- */
/* Every line is a highlight + shadow PAIR (a relief, as on a fluted glass
lens): 7px vertical pitch, 56px horizontal prism pitch (1:8), 0°,
continuous. Ceilings: highlight 6%, shadow 10% (black on L11 graphite is
the smaller perceptual step — declared). Never on light bands (the pair
collapses into pinstripes), never behind body copy, never inside a card.
Static. QA: check moiré at DPR 1.5/2; swap to an SVG data-URI with
shape-rendering:crispEdges if banding appears. */
.dp-texture-glass-flute .section--dark,
.dp-texture-glass-flute .site-footer{
background-image:repeating-linear-gradient(90deg,var(--gf-hi) 0 1px,var(--gf-sh) 1px 2px,transparent 2px var(--gf-pitch)),
repeating-linear-gradient(180deg,var(--gf-hi) 0 1px,var(--gf-sh) 1px 2px,transparent 2px var(--gf-prism));}
/* The hero card's lens edge: a 12px STRIP on its left edge (highlight 14% — a strip, not a field). */
.dp-texture-glass-flute .hero .quote-form-wrap::before{content:"";position:absolute;inset:0 auto 0 0;width:12px;z-index:0;pointer-events:none;clip-path:none;
background-color:var(--color-surface-2);
background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,var(--gf-sh) 1px 2px,transparent 2px var(--gf-pitch));}
/* =========================================================================
18. 2-STEP WIZARD + MOBILE POLISH
====================================================================== */
/* Step-1 text-only choice pills (service, condition, location) — no price / no image. */
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-6);}
@media(max-width:640px){
/* Compact 2-col pills keep the step short on phones (≥44px tap height). */
.choice-grid{gap:var(--space-2);margin-bottom:var(--space-5);}
.choice-pill{padding:var(--space-3) var(--space-3);gap:var(--space-2);font-size:var(--text-sm);min-height:44px;}
.choice-pill__tick{width:18px;height:18px;flex-basis:18px;}
.choice-pill__tick svg{width:11px;height:11px;}
}
.choice-pill{position:relative;display:flex;align-items:center;gap:var(--space-3);border:1px solid var(--color-field-border);border-radius:0;padding:var(--space-3) var(--space-4);cursor:pointer;background:#fff;font-weight:var(--fw-semibold);font-size:var(--text-sm);line-height:1.3;color:var(--color-text);transition:border-color var(--transition),background-color var(--transition),box-shadow var(--transition);}
.choice-pill:hover{border-color:var(--color-primary);}
.choice-pill:has(.choice-pill__input:focus-visible){box-shadow:0 0 0 3px var(--color-text);}
.choice-pill__input{position:absolute;opacity:0;pointer-events:none;}
.choice-pill__tick{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 22px;border-radius:0;border:2px solid var(--color-field-border);background:#fff;color:transparent;transition:background-color var(--transition),border-color var(--transition),color var(--transition);}
.choice-pill__tick svg{width:13px;height:13px;}
.choice-pill__label{flex:1 1 auto;min-width:0;}
.choice-pill.is-selected{border-color:var(--color-primary);background:var(--color-surface);}
.choice-pill.is-selected .choice-pill__tick{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
/* Mobile: collapse the nested gutters (container + card paddings) that
squeezed the wizard fields on small screens. */
@media(max-width:640px){
/* The after-hours note ate half the first viewport; the sticky bottom
bar already covers call/WhatsApp on mobile. */
.topbar__afterhours{display:none;}
.booking-form__title{font-size:var(--text-xl);}
.booking-form__sub{font-size:var(--text-sm);}
.booking-steps{margin-bottom:var(--space-6);}
.cta-banner__inner{padding:var(--space-8) var(--space-5);}
.section-head{margin-bottom:var(--space-8);}
}