/* ==========================================================================
   HAPPY HANDYMAN — stylesheet
   Clean rebuild: same colours, fonts and feel, without !important hacks.
   Sections:  1 Variables & base   2 Layout helpers   3 Buttons
              4 Top bar & header   5 Hero            6 Sections & cards
              7 Content pages      8 Forms           9 Footer & bars
              10 Animations        11 Responsive
   ========================================================================== */

/* ---------- 1. VARIABLES & BASE ---------- */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/open-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/open-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/open-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/montserrat-latin-800-normal.woff2') format('woff2'); }
/* Greek letters: Open Sans has Greek; Montserrat has none, so Greek headings use Manrope (similar shape).
   unicode-range = only downloaded on pages that contain Greek text (the Greek site). */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/open-sans-greek-400-normal.woff2') format('woff2'); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/open-sans-greek-600-normal.woff2') format('woff2'); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/open-sans-greek-700-normal.woff2') format('woff2'); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/manrope-greek-600-normal.woff2') format('woff2'); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/manrope-greek-700-normal.woff2') format('woff2'); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/manrope-greek-800-normal.woff2') format('woff2'); unicode-range: U+0370-03FF, U+1F00-1FFF; }

:root {
    --primary: #1A365D;
    --primary-2: #234876;
    --accent: #E67E22;
    --accent-hover: #D35400;
    --light: #F8F9FA;
    --soft: #EDF2F7;
    --dark: #2D3748;
    --darker: #1A202C;
    --text: #4A5568;
    --muted: #718096;
    --line: #E2E8F0;
    --white: #FFFFFF;
    --wa: #25D366;

    --radius: 10px;
    --shadow-sm: 0 2px 8px rgba(26, 54, 93, .06);
    --shadow: 0 6px 20px rgba(26, 54, 93, .08);
    --shadow-lg: 0 14px 34px rgba(26, 54, 93, .14);
    --container: 1200px;
    --gutter: clamp(1rem, 4vw, 2rem);
    --header-h: 76px;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    background: var(--light);
    overflow-x: clip;
}
h1, h2, h3, h4 {
    font-family: 'Montserrat', system-ui, sans-serif;
    color: var(--primary);
    line-height: 1.2;
    margin: 0 0 1rem;
    font-weight: 800;
}
h3, h4 { font-weight: 700; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--primary); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[id] { scroll-margin-top: calc(var(--header-h) + 20px); }
@media (min-width: 761px) { #quote { scroll-margin-top: calc(var(--header-h) + 90px); } }   /* contact page: show the title above the form too */
button { font: inherit; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: .6rem 1rem; z-index: 3000; }
.skip-link:focus { left: 1rem; top: 1rem; color: #fff; }

/* ---------- 2. LAYOUT HELPERS ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 860px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.bg-soft { background: var(--soft); }
.bg-white { background: var(--white); }
.section-title { font-size: clamp(1.75rem, 3.6vw, 2.5rem); margin-bottom: 1.25rem; }
.section-intro { max-width: 800px; margin: 0 auto 2.5rem; }
.lead { font-size: 1.12rem; }
.rounded { border-radius: var(--radius); }
.shadow { box-shadow: var(--shadow-lg); }

/* Two-column text + image block — images always centered & equal in size */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split-top { align-items: start; }
.split-reverse .split-text { order: 2; }
.split-media { display: flex; justify-content: center; }
.split-media img { width: 100%; max-width: 520px; aspect-ratio: 1 / 1; object-fit: cover; }
.split-media img.portrait { aspect-ratio: 3 / 4; max-width: 460px; }
.split-media img.natural { aspect-ratio: auto; height: auto; object-fit: contain; max-width: 520px; }
.split-text p { font-size: 1.05rem; }

/* ---------- 3. BUTTONS ---------- */
.btn-primary, .btn-outline, .btn-outline-dark, .btn-white, .btn-wa, .btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .8rem 1.5rem; border-radius: 6px; font-weight: 700; line-height: 1.2;
    border: 2px solid transparent; cursor: pointer; text-align: center;
    transition: background-color .2s ease, color .2s ease, transform .2s var(--ease), box-shadow .2s ease, border-color .2s ease;
}
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-hover); color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(230, 126, 34, .35); }
.btn-outline { border-color: rgba(255,255,255,.8); color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--primary); }
.btn-outline.btn-wa-hover:hover { background: var(--wa); border-color: var(--wa); color: var(--white); }
.btn-outline-dark { border-color: var(--primary); color: var(--primary); }
.btn-outline-dark:hover { background: var(--primary); color: var(--white); }
.btn-white { background: var(--white); color: var(--primary); }
.btn-white:hover { color: var(--accent); transform: translateY(-2px); }
.btn-wa { background: var(--wa); color: var(--white); }
.btn-wa:hover { background: #1da851; color: var(--white); }
.btn-ghost { background: transparent; color: #E2E8F0; border-color: #4A5568; }
.btn-ghost:hover { border-color: #E2E8F0; color: #fff; }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn-sm { padding: .5rem 1rem; font-size: .9rem; }
.btn-block { display: flex; width: 100%; }
.link-btn { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-decoration: underline; }

/* ---------- 4. TOP BAR & HEADER ---------- */
.top-bar { background: var(--dark); color: var(--light); font-size: .88rem; }
/* Top bar + header stick together. The top bar slides away when scrolling down and comes straight back
   when scrolling up (main.js toggles .tb-hide). Only "transform" is animated: no layout work while scrolling. */
.site-top { position: sticky; top: 0; z-index: 1000; transition: transform .3s var(--ease); }
.tb-hide .site-top { transform: translateY(calc(-1 * var(--tb-h, 0px))); }
.menu-open .site-top { transition: none; transform: none; }
.top-bar-inner { max-width: var(--container); margin: 0 auto; padding: .45rem var(--gutter); display: flex; align-items: center; gap: 1.25rem; }
.top-bar a { color: inherit; }
.top-bar a:hover { color: var(--accent); }
.top-phone { font-weight: 700; }
.top-badge { color: var(--accent); font-weight: 700; display: inline-flex; align-items: center; gap: .45rem; }
.pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #48BB78; }
.pulse-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(72,187,120,.7); animation: pulse 2s infinite; }
.top-mail { margin-left: auto; }
.lang-switch { display: flex; gap: .25rem; }
.lang-switch a { padding: .1rem .45rem; border-radius: 4px; font-weight: 700; font-size: .8rem; opacity: .75; }
.lang-switch a.active { background: var(--accent); color: #fff; opacity: 1; }
.lang-switch a:hover { opacity: 1; }

.site-header { position: relative; background: var(--white); box-shadow: 0 2px 10px rgba(0,0,0,.08); transition: box-shadow .25s ease; }
.site-header.scrolled { box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.nav-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); height: var(--header-h); display: flex; align-items: center; justify-content: space-between; position: relative; }
.logo { font-family: 'Montserrat', sans-serif; font-size: 1.75rem; font-weight: 800; color: var(--primary); letter-spacing: -.5px; }
.logo span, .footer-logo span { color: var(--accent); }
/* Brand name in text: always one word, two colours (helpers.php brand_html) */
.brand { color: var(--primary); white-space: nowrap; font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: -.3px; }
.brand > span { color: var(--accent); }
.hero .brand, .site-footer .brand, .top-bar .brand { color: var(--white); }
.cta-band .brand { color: var(--white); }
.cta-band .brand > span { color: var(--primary); }
.logo:hover { color: var(--primary); }

.nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; height: 100%; }
.nav-links > li { display: flex; align-items: center; height: 100%; }
.nav-links > li > a:not(.btn-primary) { color: var(--dark); font-weight: 600; position: relative; padding: .4rem 0; }
.nav-links > li > a:not(.btn-primary)::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .25s var(--ease); }
.nav-links > li > a:hover::after, .nav-links > li > a[aria-current]::after, .nav-links > li.is-active > a::after { transform: scaleX(1); }
.nav-links > li > a:hover { color: var(--accent); }
.sub-toggle { background: none; border: 0; padding: .25rem; margin-left: .15rem; color: var(--dark); cursor: pointer; font-size: .7rem; transition: transform .25s ease; }
.has-sub.open > .sub-toggle { transform: rotate(180deg); }

/* Dropdowns (desktop) */
.mega, .dropdown {
    position: absolute; top: 100%; background: var(--white); border-top: 3px solid var(--accent);
    border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s var(--ease), visibility .2s;
}
.mega { left: var(--gutter); right: var(--gutter); padding: 1.5rem 1.75rem 1.1rem; max-height: calc(100vh - var(--header-h) - 16px); overflow-y: auto; overscroll-behavior: contain; }
.has-sub { position: relative; }
.has-mega { position: static; }
.dropdown { left: -1rem; min-width: 420px; padding: 1.25rem 1.5rem; }
.has-sub.open > .mega, .has-sub.open > .dropdown { opacity: 1; visibility: visible; transform: none; }

.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.mega-col ul + .mega-head { margin-top: 1.1rem; }
.mega-head { display: flex; align-items: center; gap: .6rem; font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--primary); padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 2px solid var(--soft); }
.mega-head i { color: var(--accent); width: 20px; text-align: center; }
.mega-col ul, .dropdown ul { list-style: none; }
.mega-col li a, .dropdown li a { display: block; padding: .22rem 0; line-height: 1.45; color: var(--text); font-size: .93rem; transition: color .15s, transform .15s; }
.mega-col li a:hover, .dropdown li a:hover, .mega-col li a[aria-current], .dropdown li a[aria-current] { color: var(--accent); transform: translateX(3px); }
.mega-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary), #24497a); color: var(--white); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; }
.mega-foot > span:first-child { display: inline-flex; align-items: center; gap: .6rem; }
.mega-foot i { color: var(--accent); }
.mega-foot > span:first-child i { font-size: 1.35rem; }
.mega-foot .mega-all { color: var(--white); }
.mega-foot .mega-all:hover { color: var(--accent); }
.mega-actions { display: flex; align-items: center; gap: 1.25rem; }
.mega-all { font-weight: 700; }
.dropdown-areas { min-width: 640px; left: auto; right: -7rem; }
.areas-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.areas-head { display: flex; align-items: center; gap: .45rem; font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--primary); font-size: .95rem; padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 2px solid var(--soft); white-space: nowrap; }
.areas-head i { color: var(--accent); }
a.areas-head:hover { color: var(--accent); }
.areas-head-go { margin-left: auto; font-size: .75rem; opacity: .6; transition: transform .2s; }
a.areas-head:hover .areas-head-go { transform: translateX(3px); opacity: 1; }
.chips-subtitle { font-size: 1.15rem; margin: 2.25rem 0 1rem; }
.home-area-chips { margin: 2rem 0 .75rem; }
.home-area-chips2 { margin: 0 0 1.75rem; }
/* Services hub: kinds of work */
.work-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.work-type { display: block; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem 1.4rem; border-top: 4px solid var(--accent); color: inherit; transition: transform .2s, box-shadow .2s; }
a.work-type:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.12); }
.work-type i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(230,126,34,.12); color: var(--accent); font-size: 1.25rem; margin-bottom: .9rem; }
.work-type h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.work-type p { font-size: .95rem; margin: 0; }
.text-center-h > h2 { text-align: center; }
/* Mega menu: kinds of work strip */
.mega-types { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .5rem; margin: 0 0 1.25rem; padding: 0 0 1rem; border-bottom: 1px solid var(--line); font-size: .86rem; }
.mega-types-label { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--primary); margin-right: .35rem; }
@media (min-width: 1025px) { .mega .mega-types a.mega-types-label { flex-basis: 100%; font-size: 1.15rem; margin: 0 0 .25rem; letter-spacing: -.2px; } }
.mega-types a { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .65rem; font-size: .82rem; border-radius: 999px; background: var(--soft); color: var(--primary); font-weight: 600; transition: background .15s, color .15s; }
.mega-types a i { color: var(--accent); font-size: .8rem; }
.mega-types a:hover { background: var(--accent); color: var(--white); }
.mega-types a:hover i { color: var(--white); }
.region-title a { color: inherit; }
.region-title a:hover { color: var(--accent); }
.region-title a i { font-size: .8em; color: var(--accent); }
.dropdown-all { display: inline-flex; gap: .5rem; align-items: center; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); width: 100%; font-weight: 700; }

/* Burger */
.menu-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.burger { display: block; width: 28px; }
.burger span { display: block; height: 3px; margin: 5px 0; background: var(--primary); border-radius: 3px; transition: transform .3s var(--ease), opacity .2s; }
.menu-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; }
.menu-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- 5. HERO ---------- */
.hero { position: relative; isolation: isolate; color: var(--white); text-align: center; padding: clamp(4.5rem, 10vw, 7.5rem) 0; overflow: hidden; background: var(--primary); }
.hero-small { padding: clamp(3rem, 7vw, 5rem) 0; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(26,54,93,.92), rgba(26,54,93,.78)); }
.hero-inner { max-width: 1000px; margin: 0 auto; padding: 0 var(--gutter); }
.hero h1 { color: var(--white); font-size: clamp(1.9rem, 5vw, 3.2rem); margin-bottom: 1.25rem; }
.hero-lead { font-size: clamp(1.02rem, 2vw, 1.2rem); max-width: 800px; margin: 0 auto 2rem; opacity: .95; }
.eyebrow { display: inline-flex; gap: .5rem; align-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); padding: .3rem .9rem; border-radius: 99px; font-size: .88rem; font-weight: 600; margin-bottom: 1rem; }
.eyebrow i { color: var(--accent); }
a.eyebrow-link { color: var(--white); transition: background .2s, border-color .2s; }
a.eyebrow-link:hover { color: var(--white); background: rgba(230,126,34,.35); border-color: var(--accent); }
.eyebrow-arrow { font-size: .75em; transition: transform .2s; }
a.eyebrow-link:hover .eyebrow-arrow { transform: translateX(3px); }
.hero-crumbs { position: absolute; top: 0; left: 0; right: 0; z-index: 1; max-width: var(--container); margin: 0 auto; padding: .9rem var(--gutter) 0; }
.hero-crumbs .breadcrumbs { margin: 0; }
.hero-crumbs .breadcrumbs ol { justify-content: flex-start; }
.hero.has-crumbs { padding-top: calc(clamp(4.5rem, 10vw, 7.5rem) + .5rem); }
.hero-small.has-crumbs { padding-top: calc(clamp(3rem, 7vw, 5rem) + 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.hero-badges { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin-top: 2rem; font-size: .92rem; font-weight: 600; }
.hero-badges i { color: var(--accent); margin-right: .3rem; }

.breadcrumbs { margin-bottom: 1rem; font-size: .85rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.breadcrumbs li + li::before { content: '›'; margin-right: .35rem; opacity: .6; }
.breadcrumbs a { color: rgba(255,255,255,.85); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { opacity: .8; }
.legal .breadcrumbs ol { justify-content: flex-start; }
.legal .breadcrumbs a { color: var(--text); }

/* ---------- 6. SECTIONS & CARDS ---------- */
.certification-badge { display: inline-flex; gap: .5rem; align-items: center; background: var(--primary); color: var(--white); padding: .55rem 1.1rem; border-radius: 6px; font-weight: 600; margin-top: .5rem; }
.certification-badge i { color: var(--accent); }

/* Stats */
.stats { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 2.5rem 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stat { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; }
.stat-num { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--primary); line-height: 1; height: 1em; }
.stat-plus { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.8rem; color: var(--accent); line-height: 1; }
.stat-label { flex-basis: 100%; font-size: .92rem; margin-top: .4rem; }

/* Cards */
.cards-grid { display: grid; gap: 1.75rem; }
.cards-4 { display: flex; flex-wrap: wrap; justify-content: center; }
.cards-4 > .card { flex: 1 1 200px; max-width: 290px; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s ease; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card-media { display: block; overflow: hidden; }
.card-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; position: relative; }
.card-body h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.card-body h3 a { color: var(--primary); }
.card-body h3 a:hover { color: var(--accent); }
.card-body p { font-size: .95rem; }
.card-icon { position: absolute; top: -26px; right: 1.25rem; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 1.3rem; box-shadow: 0 4px 12px rgba(230,126,34,.4); }
.card-link { margin-top: auto; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; color: var(--accent); }
.card-link i { transition: transform .2s; }
a:hover .card-link i, .card-link:hover i { transform: translateX(4px); }

/* Service cards (category pages) */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; }
.svc-card { background: var(--white); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); border: 1px solid var(--line); color: var(--text); display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); color: var(--text); }
.svc-card h3 { font-size: 1.08rem; margin: .9rem 0 .4rem; }
.svc-card p { font-size: .92rem; margin-bottom: .8rem; }
.svc-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(230,126,34,.12); color: var(--accent); font-size: 1.2rem; transition: background .25s, color .25s; }
.svc-card:hover .svc-icon { background: var(--accent); color: #fff; }

/* Mini cards (related) */
.mini-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.mini-grid > .mini-card { flex: 1 1 250px; max-width: 290px; }
.mini-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.25rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); border-left: 4px solid var(--accent); color: var(--text); transition: transform .2s var(--ease), box-shadow .2s; }
.mini-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--text); }
.mini-card i { color: var(--accent); font-size: 1.25rem; margin-top: .2rem; width: 24px; text-align: center; }
.mini-card strong { display: block; color: var(--primary); font-family: 'Montserrat', sans-serif; }
.mini-card small { font-size: .85rem; line-height: 1.45; display: block; }

/* Reasons */
.reasons-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; margin-top: 1.5rem; }
.section .container > .reasons-grid { grid-template-columns: repeat(4, 1fr); }
.narrow .reasons-grid, .container.narrow > .reasons-grid { grid-template-columns: repeat(2, 1fr); }
.reason-card { background: var(--white); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s; }
.reason-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.reason-card .card-icon { position: static; width: auto; height: auto; background: none; box-shadow: none; color: var(--accent); font-size: 1.4rem; display: inline-block; margin-bottom: .6rem; }
.reason-card h3, .reason-card h4 { font-size: 1.15rem; margin-bottom: .5rem; }
.reason-card p { font-size: .95rem; margin: 0; }
.reason-card p a { color: var(--primary); font-weight: 600; text-decoration: underline; }
.about-subtitle { margin-top: 3rem; font-size: 1.5rem; color: var(--accent); }

/* Pricing */
.pricing-section { background: var(--primary); color: var(--white); padding: clamp(3.5rem, 7vw, 5rem) 0; }
.pricing-section h2 { color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
.pricing-box { background: rgba(255,255,255,.07); border: 2px solid var(--accent); padding: clamp(1.5rem, 4vw, 2.75rem); margin-top: 2rem; border-radius: var(--radius); }
.pricing-box h3 { color: var(--accent); margin-bottom: 1.5rem; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; text-align: center; }
.steps li { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.steps strong { color: var(--white); font-family: 'Montserrat', sans-serif; }
.steps span:last-child { font-size: .93rem; opacity: .9; }
.step-num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; font-family: 'Montserrat', sans-serif; margin-bottom: .4rem; }

/* Locations block (home) */
.locations-card { background: var(--white); padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: var(--radius); box-shadow: var(--shadow); }
.subhead { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text); font-size: 1.12rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 1.5rem; }
.chips-center { justify-content: center; }
.chip { display: inline-flex; gap: .4rem; align-items: center; padding: .45rem .9rem; border-radius: 99px; background: var(--white); border: 1px solid var(--line); color: var(--primary); font-weight: 600; font-size: .9rem; transition: all .2s; }
.chip i { color: var(--accent); font-size: .8rem; }
.chip small { color: var(--muted); font-weight: 400; }
.chip:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip:hover i, .chip:hover small { color: #fff; }
.chip-strong { background: var(--primary); color: #fff; border-color: var(--primary); }
.bg-soft .chip:not(.chip-strong) { background: var(--white); }

/* Area checker */
.area-checker { background: var(--soft); border-radius: var(--radius); padding: 1.25rem; margin: 1.5rem 0; border: 1px dashed #CBD5E0; }
.area-checker label { display: block; font-weight: 700; color: var(--primary); margin-bottom: .6rem; }
.area-checker label i { color: var(--accent); }
.area-checker input { width: 100%; min-width: 0; padding: .8rem 1rem; border: 2px solid var(--line); border-radius: 6px; font-size: 1rem; font-family: inherit; background: var(--white); transition: border-color .2s; }
.area-checker input:focus { border-color: var(--accent); outline: none; }
.checker-result { margin: .75rem 0 0; font-weight: 600; min-height: 1.5em; }
.checker-result.ok { color: #276749; }
.checker-result.maybe { color: var(--accent-hover); }
.checker-result a { margin-left: .2rem; text-decoration: underline; white-space: nowrap; }
.checker-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; }
.checker-input { position: relative; flex: 1 1 240px; max-width: 360px; }
.checker-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto; padding: .3rem 0; }
.checker-suggest li { padding: .5rem .9rem; cursor: pointer; font-size: .95rem; color: var(--dark); }
.checker-suggest li i { color: var(--accent); font-size: .8rem; margin-right: .25rem; }
.checker-suggest li small { color: var(--muted); }
.checker-suggest li:hover, .checker-suggest li.active { background: var(--soft); }
.checker-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; white-space: nowrap; border-radius: 6px; border: 1.5px solid var(--line); background: var(--white); color: var(--primary); font-weight: 600; font-size: .9rem; cursor: pointer; transition: border-color .2s, color .2s; }
.checker-btn i { color: var(--accent); }
.checker-btn:hover { border-color: var(--accent); color: var(--accent); }
.checker-map { margin-top: .75rem; }
.checker-map-hint { font-size: .85rem; color: var(--muted); margin: 0 0 .4rem; }
.checker-map-canvas { position: relative; isolation: isolate; z-index: 0; height: 320px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); z-index: 0; }
.checker-note { font-size: .75rem; color: var(--muted); margin: .6rem 0 0; }

/* Coverage page: checker with permanent map */
.area-checker-inline { display: grid; grid-template-columns: minmax(300px, 0.8fr) 1.45fr; gap: 1.75rem; align-items: stretch; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 1.5rem; margin: 0; }
.area-checker-inline .checker-input { max-width: none; }
.area-checker-inline .checker-map { margin: 0; display: flex; }
.checker-map-wrap { position: relative; flex: 1; isolation: isolate; z-index: 0; }
.area-checker-inline .checker-map-canvas { height: 100%; min-height: 520px; }
.map-hint-badge { position: absolute; z-index: 500; top: 14px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-weight: 700; font-size: .92rem; padding: .55rem 1.1rem; border-radius: 99px; box-shadow: 0 6px 18px rgba(0,0,0,.25); pointer-events: none; white-space: nowrap; animation: hintPulse 2.4s ease-in-out infinite; transition: opacity .4s; }
.map-hint-badge i { margin-right: .35rem; }
.map-used .map-hint-badge { opacity: 0; animation: none; }
@keyframes hintPulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.05); } }
.checker-or { font-size: .92rem; color: var(--text); margin: .25rem 0 .9rem; }
.checker-or i { color: var(--accent); margin-right: .3rem; }
.map-legend { list-style: none; display: grid; gap: .45rem; font-size: .88rem; margin: 0 0 1rem; padding: .9rem 1rem; background: var(--soft); border-radius: 8px; }
.map-legend li { display: flex; align-items: center; gap: .6rem; }
.lg { width: 22px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.lg-dot { width: 12px; height: 12px; border-radius: 50%; background: #1A365D; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); margin: 0 5px; }
.lg-area { background: rgba(230,126,34,.18); border: 2px dashed #E67E22; }
.lg-base { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line); margin: 0 4px; }
.checker-not-listed { font-weight: 600; font-size: .95rem; margin: 0; }
.eyebrow-dark { color: var(--accent); font-weight: 700; font-size: .9rem; margin-bottom: .5rem; }
.hero-actions.left { justify-content: flex-start; margin-top: 1.5rem; }

/* Services index (dark) */
.services-index { background: var(--dark); color: var(--light); padding: clamp(3.5rem, 7vw, 5rem) 0; }
.services-index h2 { color: var(--white); margin-bottom: 2.5rem; font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
.columns-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.column ul + h3 { margin-top: 1.75rem; }
.column h3 { font-size: 1.05rem; padding-bottom: .5rem; margin-bottom: 1rem; border-bottom: 2px solid var(--accent); }
.column h3 a { color: var(--accent); }
.column h3 a:hover { color: var(--white); }
.column ul { list-style: none; }
.column li { margin-bottom: .45rem; }
.column li a { color: #A0AEC0; font-size: .95rem; }
.column li a:hover { color: var(--white); }

/* Gallery — 4 across on desktop, swipeable on phones */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.gallery-item { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gallery-item img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform .6s var(--ease); }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1rem .9rem; background: linear-gradient(transparent, rgba(26,32,44,.85)); color: #fff; font-size: .85rem; line-height: 1.4; }
.swipe-hint { display: none; text-align: center; font-size: .85rem; color: var(--muted); margin-top: .75rem; }

/* FAQ */
.faq { display: grid; gap: .75rem; }
.faq-item { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--line); overflow: hidden; }
.faq-item summary { cursor: pointer; list-style: none; padding: 1.1rem 3rem 1.1rem 1.25rem; font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--primary); position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--soft); color: var(--accent); display: grid; place-items: center; font-size: 1.3rem; transition: transform .25s, background .25s; }
.faq-item[open] summary::after { content: '−'; background: var(--accent); color: #fff; }
.faq-answer { padding: 0 1.25rem 1.1rem; }
.faq-answer p { margin: 0; }

/* CTA band */
.cta-band { background: linear-gradient(120deg, var(--accent), var(--accent-hover)); color: var(--white); padding: 3rem 0; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.cta-band h2 { color: var(--white); margin-bottom: .4rem; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.cta-band p { margin: 0; opacity: .95; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; flex-shrink: 0; }
.cta-band .btn-primary { background: var(--primary); }
.cta-band .btn-primary:hover { background: var(--darker); box-shadow: none; }

/* Webshop box */
.shop-box { display: flex; gap: 1.25rem; align-items: center; background: var(--soft); border: 2px solid var(--accent); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 2rem 0; }
.shop-box h3 { margin-bottom: .2rem; font-size: 1.1rem; }
.shop-box p { margin: 0; font-size: .93rem; }
.shop-icon { font-size: 2rem; color: var(--accent); }
.shop-box .btn-primary { flex-shrink: 0; margin-left: auto; }

/* ---------- 7. CONTENT PAGES ---------- */
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin-top: 2.25rem; }
.prose h3 { font-size: 1.2rem; margin-top: 1.5rem; }
.prose > :first-child { margin-top: 0; }
.prose h2.intro-h2 { margin-top: 0; margin-bottom: 1.1rem; font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.3; }
.prose p, .prose li { font-size: 1.05rem; }
.prose ul:not(.check-list), .prose ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.prose li { margin-bottom: .35rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.check-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 1.5rem; margin: 0 0 1.5rem; }
.check-list li { position: relative; padding-left: 2rem; margin: 0; }
.check-list li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: .15rem; width: 22px; height: 22px; border-radius: 50%; background: rgba(230,126,34,.15); color: var(--accent); font-size: .7rem; display: grid; place-items: center; }

/* Main + sidebar layout */
.with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.side-card { background: var(--white); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); border-top: 4px solid var(--accent); }
.side-card.sticky { position: sticky; top: calc(var(--header-h) + 1.5rem); }

/* ---------- Area pages: intro + facts, full-width "what I do" cards, narrow centred local sections ---------- */
.point-grid { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.point-grid li { position: relative; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.35rem 1.4rem 1.35rem 3.6rem; font-size: 1rem; line-height: 1.6; }
.point-grid li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 1.25rem; top: 1.4rem; width: 28px; height: 28px; border-radius: 50%; background: rgba(230,126,34,.15); color: var(--accent); font-size: .8rem; display: grid; place-items: center; }
.point-grid li a { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--primary); text-decoration: underline; text-decoration-color: rgba(230,126,34,.45); text-underline-offset: 4px; }
.point-grid li a:hover { color: var(--accent); }
.loc-sections .loc-block + .loc-block { margin-top: 3.25rem; }
.loc-sections .loc-block > h2:first-child { margin-top: 0; }
.loc-sections .loc-block-alt { background: var(--soft); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem); border-left: 4px solid var(--accent); }
.loc-intro .prose p { margin-bottom: 1.15rem; }
.side-card h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.side-card p { font-size: .95rem; }
.side-card .btn-block { margin-bottom: .6rem; }
.side-phone { display: block; text-align: center; font-weight: 700; color: var(--primary); margin: .5rem 0 1rem; font-size: 1.1rem; }
.side-phone i { color: var(--accent); }
.side-points { list-style: none; font-size: .9rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.side-points li { margin-bottom: .35rem; }
.side-points i { color: #38A169; margin-right: .4rem; }
.facts dl { margin: 0 0 1.25rem; }
.facts dt { font-weight: 700; color: var(--primary); font-size: .9rem; margin-top: .8rem; }
.facts dt i { color: var(--accent); width: 20px; }
.facts dd { margin: .1rem 0 0 1.6rem; font-size: .95rem; }

/* Services page rows */
.service-row-section { padding: clamp(3.5rem, 7vw, 5rem) 0; }
.service-row-section h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.title-icon { color: var(--accent); margin-right: .75rem; font-size: .85em; }
.service-links { list-style: none; margin: 1.25rem 0 1.75rem; display: grid; gap: .25rem; }
.service-links a { display: block; padding: .55rem .9rem; border-radius: 8px; color: var(--text); transition: background .2s, transform .2s; border-left: 3px solid transparent; }
.service-links a:hover { background: rgba(230,126,34,.08); border-left-color: var(--accent); transform: translateX(4px); }
.service-links strong { display: block; color: var(--primary); font-family: 'Montserrat', sans-serif; font-size: 1.02rem; }
.service-links span { font-size: .9rem; }

/* Coverage */
.map-wrap { margin: 2rem auto; max-width: 1100px; }
.map-wrap img { width: 100%; box-shadow: var(--shadow); }
.coverage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 1rem 0 2.5rem; }
.region-title { display: flex; align-items: center; gap: .6rem; font-size: 1.35rem; margin: 1rem 0 .25rem; }
.region-title i { color: var(--accent); }
.location-card { display: flex; flex-direction: column; background: var(--white); padding: 1.75rem; border-radius: var(--radius); box-shadow: var(--shadow-sm); border-top: 4px solid var(--accent); color: var(--text); transition: transform .25s var(--ease), box-shadow .25s; }
.location-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); color: var(--text); }
.location-card h3 { font-size: 1.3rem; margin: .5rem 0; }
.location-card p { font-size: .94rem; }
.loc-time { font-size: .82rem; font-weight: 700; color: var(--muted); }
.loc-time i { color: var(--accent); }

/* 404 */
.error-icon { font-size: 4rem; color: var(--accent); margin-bottom: 1rem; animation: wobble 2.5s ease-in-out infinite; }

/* ---------- 8. FORMS ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-buttons { display: grid; gap: .75rem; margin: 1.5rem 0; }
.contact-btn { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--line); color: var(--text); transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.contact-btn:hover { transform: translateX(4px); box-shadow: var(--shadow); color: var(--text); border-color: var(--accent); }
.contact-btn i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.2rem; flex-shrink: 0; }
.contact-btn strong { display: block; color: var(--primary); }
.contact-btn span { font-size: .92rem; line-height: 1.4; }
.cb-call i { background: var(--accent); }
.cb-wa i { background: var(--wa); }
.cb-viber i { background: #7360F2; }
.cb-insta i { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); }
.cb-mail i { background: var(--primary); }
.note { font-size: .92rem; color: var(--muted); }
.note i { color: var(--accent); }

.contact-form-card { background: var(--white); padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius); box-shadow: var(--shadow-lg); position: relative; }
.anchor-alias { position: absolute; top: 0; }
.form-sub { color: var(--muted); font-size: .95rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; color: var(--dark); }
.contact-form input, .contact-form select, .contact-form textarea {
    width: 100%; padding: .8rem .9rem; border: 1.5px solid #CBD5E0; border-radius: 6px;
    font: inherit; font-size: 16px; color: var(--dark); background: var(--white); transition: border-color .2s, box-shadow .2s;
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,126,34,.18); }
.has-error input, .has-error textarea { border-color: #E53E3E; }
.err { color: #C53030; font-size: .85rem; }
.form-alert { background: #FFF5F5; color: #C53030; border: 1px solid #FEB2B2; padding: .8rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.form-privacy { font-size: .82rem; color: var(--muted); margin: .9rem 0 0; text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-success { text-align: center; padding: 2rem 0; }
.form-success > i { color: #38A169; font-size: 4rem; margin-bottom: 1rem; animation: pop .5s var(--ease); }

/* ---------- 9. FOOTER & FLOATING BARS ---------- */
.site-footer { background: var(--darker); color: #A0AEC0; padding: 4rem 0 2rem; font-size: .95rem; }
.footer-grid { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2.5rem; }
.footer-logo { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--white); margin-bottom: 1rem; }
.footer-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.footer-badges span { font-size: .8rem; padding: .3rem .7rem; border: 1px solid #4A5568; border-radius: 99px; }
.footer-badges i { color: var(--accent); }
.footer-title { color: var(--white); font-size: 1.05rem; margin-bottom: 1rem; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: .45rem; }
.footer-col a { color: #A0AEC0; }
.footer-col a:hover { color: var(--accent); }
.footer-contact a { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; word-break: break-word; }
.footer-contact i { color: var(--accent); width: 20px; font-size: 1.1rem; }
.footer-bottom { max-width: var(--container); margin: 3rem auto 0; padding: 1.5rem var(--gutter) 0; border-top: 1px solid var(--dark); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .87rem; }
.legal-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.legal-links a, .legal-links .link-btn { color: #A0AEC0; font-size: .87rem; }
.legal-links a:hover, .legal-links .link-btn:hover { color: var(--white); }

.to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; box-shadow: var(--shadow-lg); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent); }

.action-bar { display: none; }

.cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; max-width: 760px; margin: 0 auto; z-index: 2000; background: var(--darker); color: #E2E8F0; padding: 1.1rem 1.4rem; border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.35); transform: translateY(calc(100% + 140px)); transition: transform .45s var(--ease); }
.cookie-banner[hidden] { display: block; visibility: hidden; }
.cookie-banner.show { transform: none; visibility: visible; }
.cookie-content { display: flex; align-items: center; gap: 1.25rem; }
.cookie-content p { margin: 0; font-size: .9rem; line-height: 1.5; }
.cookie-content p i { color: var(--accent); }
.cookie-content a { color: var(--accent); text-decoration: underline; }
.cookie-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.cookie-actions button { padding: .6rem 1.1rem; font-size: .9rem; }

/* ---------- 10. ANIMATIONS ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@keyframes pulse { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(3); opacity: 0; } 100% { transform: scale(3); opacity: 0; } }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* ---------- 11. RESPONSIVE ---------- */

/* Small desktops */
@media (max-width: 1150px) {
    .nav-links { gap: 1.1rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .section .container > .reasons-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablets & phones: mobile menu */
@media (max-width: 1024px) {
    :root { --header-h: 66px; }
    .logo { font-size: 1.5rem; }
    .menu-toggle { display: block; }
    .main-nav {
        position: fixed; left: 0; right: 0; top: var(--nav-top, var(--header-h)); bottom: 0;
        background: var(--white); overflow-y: auto; overscroll-behavior: contain;
        clip-path: inset(0 0 0 100%); visibility: hidden; transition: clip-path .35s var(--ease), visibility .35s;   /* clip-path, not translateX: a closed menu never makes the page wider */
        border-top: 1px solid var(--line); padding-bottom: 6rem;
    }
    .menu-open .main-nav { clip-path: inset(0); visibility: visible; }
    .nav-links { flex-direction: column; align-items: stretch; gap: 0; height: auto; padding: .5rem var(--gutter) 1rem; }
    .nav-links > li { flex-wrap: wrap; height: auto; border-bottom: 1px solid var(--line); }
    .nav-links > li > a:not(.btn-primary) { flex: 1; padding: 1rem 0; font-size: 1.08rem; }
    .nav-links > li > a::after { display: none; }
    .sub-toggle { width: 48px; height: 48px; font-size: .9rem; margin: 0; }
    .mega, .dropdown { position: static; width: 100%; min-width: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; padding: 0; display: none; max-height: none; overflow: visible; }
    .main-nav { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
    .has-sub.open > .mega, .has-sub.open > .dropdown { display: block; padding: 0 0 1rem; }
    .mega-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .mega-head { font-size: .98rem; }
    .mega-foot { flex-direction: column; align-items: flex-start; }
    .areas-cols { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .dropdown-areas { min-width: 0; right: auto; }
    .nav-cta { border: 0; padding-top: 1.25rem; }
    .nav-cta .btn-primary { width: 100%; padding: 1rem; }
    body.menu-open { overflow: hidden; }

    .columns-grid { grid-template-columns: repeat(2, 1fr); }
    .with-sidebar { grid-template-columns: 1fr; }
    .point-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .work-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .side-card.sticky { position: static; }
    .coverage-grid { grid-template-columns: repeat(2, 1fr); }
    .top-mail { display: none; }
    .lang-switch { margin-left: auto; }
}

/* Phones & small tablets */
@media (max-width: 760px) {
    .split, .contact-grid, .area-checker-inline { grid-template-columns: 1fr; }
    .area-checker-inline { padding: 1rem; }
    .split-reverse .split-text { order: 0; }
    .split-media img, .split-media img.portrait { max-width: 100%; aspect-ratio: 4 / 3; }
    .split-media img.natural { aspect-ratio: auto; max-width: 480px; margin: 0 auto; }
    .cards-3 { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
    .steps { grid-template-columns: 1fr; text-align: left; }
    .steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 1rem; align-items: start; }
    .steps .step-num { grid-row: span 2; margin: 0; }
    .check-list { grid-template-columns: 1fr; }
    .hero-badges { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; gap: .65rem 1.25rem; text-align: left; font-size: .88rem; }
    .hero-badges li { display: flex; align-items: flex-start; gap: .4rem; }
    .hero-badges i { margin: .2rem 0 0; }
    .point-grid { grid-template-columns: 1fr; gap: .85rem; }
    .work-types { grid-template-columns: 1fr; }
    .point-grid li { padding: 1.1rem 1.1rem 1.1rem 3.3rem; }
    .point-grid li::before { left: 1rem; top: 1.15rem; }
    .cta-inner { flex-direction: column; text-align: center; }
    .cta-actions { justify-content: center; }
    .shop-box { flex-direction: column; text-align: center; }
    .shop-box .btn-primary { margin: 0; }
    .reasons-grid, .narrow .reasons-grid, .section .container > .reasons-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .top-badge { display: none; }

    /* Swipeable gallery */
    .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding-bottom: .5rem; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scrollbar-width: none; }
    .gallery::-webkit-scrollbar { display: none; }
    .gallery-item { flex: 0 0 72%; scroll-snap-align: center; }
    .swipe-hint { display: block; }

    /* Sticky call / WhatsApp / quote bar */
    .action-bar { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; background: var(--white); box-shadow: 0 -4px 18px rgba(0,0,0,.12); padding-bottom: env(safe-area-inset-bottom); }
    .action-bar a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .55rem 0 .5rem; font-size: .78rem; font-weight: 700; color: var(--primary); }
    .action-bar i { font-size: 1.25rem; }
    .action-bar a.ab-wa { background: var(--wa); color: var(--white); }
    .ab-call i { color: var(--accent); }
    .ab-wa i { color: var(--white); }
    .ab-quote { background: var(--accent); }
    .ab-quote, .ab-quote i { color: #fff; }
    body { padding-bottom: 64px; }
    .to-top { bottom: 80px; right: .9rem; width: 42px; height: 42px; }
    .cookie-banner { bottom: 72px; left: .6rem; right: .6rem; }
    .cookie-content { flex-direction: column; align-items: stretch; text-align: center; gap: .9rem; }
    .cookie-actions button { flex: 1; }
}

@media (max-width: 560px) {
    .coverage-grid, .columns-grid { grid-template-columns: 1fr; }
    .cards-4 > .card { max-width: none; flex-basis: 100%; }
    .mini-grid > .mini-card { max-width: none; }
    .checker-input { max-width: none; flex-basis: 100%; }
    .area-checker-inline .checker-map-canvas { min-height: 380px; }
    .map-hint-badge { font-size: .8rem; }
    .checker-btn { flex: 1 1 0; justify-content: center; }
    .mega-grid { grid-template-columns: 1fr; }
    .areas-cols { grid-template-columns: 1fr; }
    .hero-actions a { width: 100%; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; text-align: center; align-items: center; }
    .top-bar-inner { gap: .75rem; }
}

@media print {
    .top-bar, .site-header, .action-bar, .cookie-banner, .to-top, .cta-band, .site-footer { display: none; }
    .reveal { opacity: 1; transform: none; }
}


/* Services hub: client groups */
.client-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.client-card { position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: 18px; box-shadow: 0 6px 22px rgba(26,54,93,.07); padding: 2rem 1.75rem 1.75rem; border: 2px solid var(--accent); color: var(--text); transition: transform .3s var(--ease), box-shadow .3s; }
a.client-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(26,54,93,.14); }
.client-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: var(--accent); color: var(--white); font-size: 1.4rem; margin-bottom: 1.15rem; box-shadow: 0 8px 18px rgba(230,126,34,.3); }
.client-card h3 { font-size: 1.2rem; margin-bottom: .5rem; color: var(--primary); transition: color .2s; }
a.client-card:hover h3 { color: var(--accent); }
.client-card p { font-size: .97rem; margin-bottom: 1rem; }
.client-card ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; }
.client-arrow { margin-top: auto; align-self: flex-end; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(230,126,34,.12); color: var(--accent); font-size: .85rem; transition: transform .25s, background .25s, color .25s; }
a.client-card:hover .client-arrow { background: var(--accent); color: var(--white); transform: translateX(4px); }
.client-card li { position: relative; padding-left: 1.6rem; font-size: .93rem; line-height: 1.5; }
.client-card li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: .1rem; color: var(--accent); font-size: .8rem; }

.promise-list { grid-template-columns: 1fr; margin: .75rem 0 1.5rem; }
.promise-list li { font-weight: 600; color: var(--primary); }
.client-cta { margin-top: 2.25rem; display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }

/* Services hub: one block per trade */
.trade-block { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.trade-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: 2.5rem; }
.trade-head-rev .trade-intro { order: 2; }
.trade-num { display: block; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 3.2rem; line-height: 1; color: rgba(230,126,34,.22); margin-bottom: .35rem; }
.trade-intro h2 { display: flex; align-items: center; gap: .8rem; font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: .9rem; }
.trade-icon { display: grid; place-items: center; width: 54px; height: 54px; flex: 0 0 54px; border-radius: 14px; background: var(--accent); color: var(--white); font-size: 1.35rem; box-shadow: 0 8px 18px rgba(230,126,34,.3); }
.trade-short { font-size: 1.12rem; line-height: 1.7; margin-bottom: .9rem; }
.trade-count { font-weight: 700; color: var(--primary); font-size: .95rem; margin-bottom: 1.5rem; }
.trade-count i { color: var(--accent); margin-right: .35rem; }
.trade-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.trade-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.trade-services { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.trade-services > li { flex: 0 0 calc((100% - 2rem) / 3); }
.trade-services a { position: relative; display: block; height: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 3rem 1.15rem 1.25rem; color: var(--text); transition: transform .2s, box-shadow .2s, border-color .2s; }
.bg-white .trade-services a { background: var(--soft); border-color: transparent; }
.trade-services a:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(26,54,93,.1); border-color: var(--accent); }
.trade-services strong { display: block; font-family: 'Montserrat', sans-serif; color: var(--primary); font-size: 1rem; margin-bottom: .25rem; }
.trade-services span { display: block; font-size: .9rem; line-height: 1.5; }
.ts-arrow { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(230,126,34,.12); color: var(--accent); font-size: .75rem; transition: background .2s, color .2s; }
.trade-services a:hover .ts-arrow { background: var(--accent); color: var(--white); }
@media (max-width: 1024px) {
    .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trade-services > li { flex-basis: calc((100% - 1rem) / 2); }
}
@media (max-width: 760px) {
    .client-grid, .trade-head { grid-template-columns: 1fr; }
    .trade-services > li { flex-basis: 100%; }
    .trade-head-rev .trade-intro { order: 0; }
    .trade-num { font-size: 2.4rem; }
}


/* "Don't see your job?" line under service lists */
.points-more { display: flex; align-items: flex-start; justify-content: center; gap: .6rem; max-width: 760px; margin: 2rem auto 0; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--white); border: 1px dashed rgba(230,126,34,.6); font-size: .98rem; text-align: left; }
.prose .points-more { margin: 0 0 1.75rem; justify-content: flex-start; max-width: none; background: rgba(230,126,34,.06); }
.points-more i { color: var(--accent); font-size: 1.15rem; margin-top: .15rem; }
.points-more a { font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Types of work page */
.mega-types a.mega-types-label { background: none; padding: 0; font-size: .86rem; }
.mega-types a.mega-types-label:hover { background: none; color: var(--accent); }
.work-nav { position: sticky; top: calc(var(--tb-h, 0px) + var(--header-h)); z-index: 900; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0,0,0,.05); transition: transform .3s var(--ease); }
.tb-hide .work-nav { transform: translateY(calc(-1 * var(--tb-h, 0px))); }
.work-nav-inner { display: flex; gap: .5rem; overflow-x: auto; padding-top: .7rem; padding-bottom: .7rem; scrollbar-width: none; justify-content: safe center; }
.work-nav-inner::-webkit-scrollbar { display: none; }
.work-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 999px; background: var(--soft); color: var(--primary); font-weight: 600; font-size: .88rem; white-space: nowrap; transition: background .15s, color .15s; }
.work-nav a i { color: var(--accent); }
.work-nav a:hover, .work-nav a.is-current { background: var(--accent); color: var(--white); }
.work-nav a:hover i, .work-nav a.is-current i { color: var(--white); }
.work-sec { scroll-margin-top: calc(var(--header-h) + 70px); }
.work-sec-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.work-sec-label { display: flex; align-items: center; gap: .65rem; font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; font-size: .9rem; margin-bottom: .6rem; }
.work-sec-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--white); font-size: 1.1rem; box-shadow: 0 8px 18px rgba(230,126,34,.3); }
.work-sec-text h2 { margin-top: 0; }
.work-note { display: flex; gap: .6rem; padding: .9rem 1.1rem; border-left: 4px solid var(--accent); background: rgba(230,126,34,.07); border-radius: 0 var(--radius) var(--radius) 0; font-size: .97rem; }
.work-note i { color: var(--accent); margin-top: .25rem; }
.work-sec-card { background: var(--white); border: 2px solid var(--accent); border-radius: 18px; padding: 1.75rem; box-shadow: var(--shadow); }
.work-sec-img { display: block; width: calc(100% + 3.5rem); max-width: none; margin: -1.75rem -1.75rem 1.25rem; border-radius: 16px 16px 0 0; aspect-ratio: 4 / 3; object-fit: cover; }
.work-sec-card h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.work-sec-card .check-list { grid-template-columns: 1fr; gap: .7rem; }
.work-sec-card .check-list li { font-size: .95rem; }
.work-sec-card .check-list a { font-weight: 700; color: var(--primary); text-decoration: underline; text-decoration-color: rgba(230,126,34,.45); text-underline-offset: 3px; }
@media (max-width: 900px) { .work-sec-grid { grid-template-columns: 1fr; } }

/* Contact form: attachments */
.file-drop { position: relative; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.15rem; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--soft); cursor: pointer; transition: border-color .2s, background .2s; }
.file-drop:hover, .file-drop.is-over { border-color: var(--accent); background: rgba(230,126,34,.06); }
.file-drop.is-bad { border-color: #c53030; }
.file-drop.is-busy { opacity: .7; pointer-events: none; }
.contact-form button[disabled] { opacity: .65; cursor: wait; }
.file-drop > i { font-size: 1.6rem; color: var(--accent); }
.file-drop-text { font-size: .92rem; line-height: 1.45; }
.file-drop-text strong { color: var(--primary); }
.file-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file-list { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .88rem; display: grid; gap: .25rem; }
.file-list i { color: var(--accent); margin-right: .25rem; }
.file-list .file-err { color: #c53030; font-weight: 600; }


/* Service pages v2: fixed prices + travel calculator, guide table */
.prose a.btn-primary, .prose a.btn-wa { text-decoration: none; color: var(--white); }
.price-placeholder { max-width: 520px; margin: -1rem auto 1.5rem; text-align: center; font-size: .88rem; font-weight: 700; color: #b7791f; background: #fffaf0; border: 1px dashed #ed8936; border-radius: 999px; padding: .4rem 1rem; }
.price-calc { max-width: 640px; margin: 0 auto 2.25rem; background: var(--white); border-radius: 18px; box-shadow: var(--shadow); padding: 1.25rem 1.5rem; text-align: center; }
.price-calc label { display: block; font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--primary); margin-bottom: .6rem; }
.price-calc label i { color: var(--accent); }
.price-calc select { width: 100%; max-width: 420px; padding: .75rem 1rem; border: 2px solid var(--line); border-radius: 10px; font: inherit; background: var(--white); }
.price-calc select:focus { border-color: var(--accent); outline: none; }
.price-calc-hint { font-size: .86rem; margin: .7rem 0 0; color: var(--text); }
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 2px solid var(--line); border-radius: 18px; padding: 2rem 1.6rem 1.6rem; box-shadow: var(--shadow); }
.price-card.is-popular { border-color: var(--accent); box-shadow: 0 18px 40px rgba(230,126,34,.18); }
.price-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--white); font-weight: 700; font-size: .8rem; padding: .3rem .9rem; border-radius: 999px; white-space: nowrap; }
.price-tag { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); margin: 0 0 .3rem; }
.price-card h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.price-for { font-size: .95rem; margin-bottom: 1rem; }
.price-amount { margin: 0 0 .75rem; }
.price-from.is-empty { visibility: hidden; }
.price-from { display: block; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text); margin-bottom: .1rem; }
.price-num { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 2.3rem; color: var(--primary); line-height: 1; }
.price-amount small { display: block; font-size: .85rem; margin-top: .25rem; }
.price-lines[hidden] { display: none; }
.price-lines { display: grid; grid-template-columns: 1fr auto; gap: .3rem .75rem; margin: 0 0 1rem; padding: .75rem 1rem; background: var(--soft); border-radius: 10px; font-size: .92rem; }
.price-lines dt { margin: 0; white-space: nowrap; }
.price-lines dt small { display: block; font-size: .8rem; color: var(--text); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .price-lines dd { margin: 0; text-align: right; font-weight: 700; }
.price-lines .price-total { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--primary); border-top: 1px solid var(--line); padding-top: .35rem; font-size: 1.02rem; }
.price-lines dd.price-total { color: var(--accent); }
.price-card .check-list { grid-template-columns: 1fr; gap: .45rem; margin-bottom: 1.25rem; }
.price-card .check-list li { font-size: .93rem; }
.price-card .btn-block { margin-top: auto; }
/* whole card clickable (the button link stretches over the card) + hover */
.price-card { transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; cursor: pointer; }
.price-card .price-card-link { position: static; transform: none; }
.price-card-link::after { content: ''; position: absolute; inset: 0; border-radius: 18px; z-index: 1; }
.price-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 22px 44px rgba(26,54,93,.15); }
.price-card:hover .price-card-link { background: var(--accent-hover); }
.price-card:focus-within { border-color: var(--accent); }
.price-included { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; margin-top: 2.25rem; background: var(--white); border-radius: 18px; padding: 1.75rem 2rem; box-shadow: var(--shadow); }
.price-included h3 { font-size: 1.1rem; margin-bottom: .9rem; }
.price-included h3 i { color: var(--accent); }
.price-included .check-list { grid-template-columns: 1fr 1fr; }
.plus-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.plus-list li { position: relative; padding-left: 1.6rem; font-size: .95rem; }
.plus-list li::before { content: '+'; position: absolute; left: .2rem; top: -.05rem; font-weight: 800; color: var(--accent); font-size: 1.1rem; }
.svc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-table-wrap { overflow-x: auto; border-radius: 14px; box-shadow: var(--shadow); background: var(--white); }
.guide-table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.guide-table th, .guide-table td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide-table thead th { background: var(--primary); color: var(--white); font-family: 'Montserrat', sans-serif; font-weight: 700; }
.guide-table tbody th { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--primary); width: 34%; }
.guide-table tbody tr:nth-child(even) { background: var(--soft); }
.guide-table tbody tr:last-child th, .guide-table tbody tr:last-child td { border-bottom: 0; }
@media (min-width: 1200px) { .price-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; } .price-grid-4 .price-card { padding: 1.75rem 1.25rem 1.4rem; } .price-grid-4 .price-num { font-size: 2rem; } }
@media (min-width: 761px) and (max-width: 1199px) { .price-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .price-grid, .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .price-grid, .svc-cards, .price-included, .price-included .check-list { grid-template-columns: 1fr; }
    .price-card.is-popular { order: -1; }
    /* table becomes stacked cards on phones */
    .guide-table thead { display: none; }
    .guide-table, .guide-table tbody, .guide-table tr, .guide-table th, .guide-table td { display: block; width: auto; }
    .guide-table tr { padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
    .guide-table tbody th, .guide-table td { padding: 0; border: 0; font-size: .93rem; }
    .guide-table tbody th { font-size: 1rem; margin-bottom: .35rem; width: auto; }
    .guide-table td::before { content: attr(data-label) ': '; font-weight: 700; color: var(--primary); }
    .guide-table td + td { margin-top: .2rem; }
}


.price-included h3 { margin-bottom: 1.3rem; }
.price-confirm { display: flex; align-items: flex-start; justify-content: center; gap: .6rem; max-width: 760px; margin: 1.75rem auto 0; font-size: .96rem; text-align: left; }
.price-confirm i { color: var(--accent); margin-top: .25rem; }
/* price cards: the text above the price grows, so prices, totals and buttons line up */
.price-card .price-for { flex-grow: 1; }
.upsell-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.upsell-card { display: flex; gap: 1.25rem; align-items: flex-start; background: var(--white); border: 2px solid var(--accent); border-radius: 18px; padding: 1.75rem; box-shadow: var(--shadow); }
.upsell-icon { flex: 0 0 56px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent); color: var(--white); font-size: 1.4rem; box-shadow: 0 8px 18px rgba(230,126,34,.3); }
.upsell-card h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.upsell-card .check-list { grid-template-columns: 1fr; gap: .45rem; margin: .9rem 0 1.25rem; }
.upsell-card .check-list li { font-size: .94rem; }
.svc-sections { max-width: 1040px; }
@media (max-width: 760px) { .upsell-grid { grid-template-columns: 1fr; } .upsell-card { flex-direction: column; } }


/* v21: price section spacing, upsell inside it, compare boxes, aligned upsell buttons */
.price-section .section-intro { margin-bottom: 1.75rem; }
.price-section .price-placeholder { margin: 0 auto 2rem; }
.price-section .price-calc { margin-bottom: 3.25rem; }
.price-section .price-confirm { margin-top: 2.5rem; }
.price-section .price-included { margin-top: 2.5rem; }
.price-section .price-included .check-list { gap: .7rem 1.5rem; }
.price-card .price-amount { margin-bottom: 1.1rem; }
.price-card .price-for { margin-bottom: 1.25rem; }
.upsell-wrap { margin-top: 4rem; padding-top: 3.25rem; border-top: 1px solid var(--line); }
.upsell-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 1.75rem; }
.upsell-grid { align-items: stretch; }
.upsell-card > div { display: flex; flex-direction: column; height: 100%; }
.upsell-card > div > a { margin-top: auto; align-self: flex-start; }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 1.25rem 0 1.5rem; }
.compare-col { background: var(--white); border-radius: 14px; padding: 1.25rem 1.4rem; box-shadow: 0 4px 14px rgba(26,54,93,.06); }
.compare-col h3 { font-size: 1.02rem; margin: 0 0 .85rem; display: flex; gap: .5rem; align-items: center; }
.compare-col h3 i { color: var(--accent); }
.prose .compare-col .check-list { grid-template-columns: 1fr; gap: .5rem; margin: 0; }
.prose .compare-col .check-list li { font-size: .97rem; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } .upsell-wrap { margin-top: 3rem; padding-top: 2.5rem; } }


/* Emergency page */
.emg-bar { background: #c53030; padding: 1.1rem 0; }
.emg-bar-inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.emg-bar a { display: inline-flex; align-items: center; gap: .9rem; padding: .85rem 1.6rem; border-radius: 14px; color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.35rem; line-height: 1.15; transition: transform .2s; }
.emg-bar a:hover { transform: translateY(-2px); color: #fff; }
.emg-bar a i { font-size: 1.6rem; }
.emg-bar a small { display: block; font-size: .78rem; font-weight: 600; opacity: .9; }
.emg-call { background: rgba(0,0,0,.18); border: 2px solid rgba(255,255,255,.6); }
.emg-wa { background: var(--wa); }
.emg-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.emg-case { display: flex; gap: 1rem; align-items: flex-start; background: var(--white); border-radius: 16px; padding: 1.4rem 1.5rem; box-shadow: var(--shadow); border-left: 4px solid #c53030; }
.emg-icon { flex: 0 0 48px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(197,48,48,.1); color: #c53030; font-size: 1.25rem; }
.emg-case h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.emg-case p { margin: 0; font-size: .96rem; }
.emg-steps { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; }
.emg-steps li { display: flex; gap: 1rem; align-items: flex-start; background: var(--white); border-radius: 14px; padding: 1.1rem 1.25rem; box-shadow: 0 4px 14px rgba(26,54,93,.06); }
.emg-steps li > span { flex: 0 0 38px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 800; }
.emg-steps li p { margin: .35rem 0 0; }
.footer-emg { color: #feb2b2 !important; }
.top-bar a.top-badge:hover, .top-bar a.top-badge:focus-visible { color: var(--accent); }
/* Guides */
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.guide-card { display: flex; flex-direction: column; background: var(--white); border: 2px solid var(--line); border-radius: 18px; padding: 1.75rem 1.6rem; box-shadow: var(--shadow); color: var(--text); transition: transform .25s, border-color .25s, box-shadow .25s; }
.guide-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 18px 38px rgba(26,54,93,.12); }
.guide-card h2 { font-size: 1.2rem; margin: .5rem 0 .6rem; }
.guide-card p { font-size: .96rem; flex-grow: 1; }
.guide-meta { font-size: .82rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .4px; }
.guide-toc { background: var(--soft); border-radius: 14px; padding: 1.1rem 1.4rem; margin: 1.5rem 0 2rem; }
.guide-toc strong { font-family: 'Montserrat', sans-serif; color: var(--primary); }
.guide-toc ol { margin: .5rem 0 0; padding-left: 1.3rem; }
.guide-toc a { text-decoration: none; }
.guide-body h2 { scroll-margin-top: calc(var(--header-h) + 20px); }
.guide-checklist { margin-top: 2.5rem; }
@media (max-width: 1024px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .guide-grid, .emg-cases { grid-template-columns: 1fr; } .emg-bar a { width: 100%; justify-content: center; font-size: 1.2rem; } }

/* Very small phones: hero badges one per row */
@media (max-width: 359px) { .hero-badges { grid-template-columns: max-content; } }

/* v28 readability: text links inside sentences are a slightly deeper orange and underlined (contrast + not colour-only) */
:root { --accent-text: var(--accent); --muted: #5F6B7D; }   /* v50: text links in the brand orange (was #B4530A, darker for contrast) */
main p a:not([class]), main li a:not([class]), main dd a:not([class]), main td a:not([class]) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
main p a:not([class]):hover, main li a:not([class]):hover { color: var(--primary); }
main .breadcrumbs a:not([class]) { color: rgba(255,255,255,.85); }
main .legal .breadcrumbs a:not([class]) { color: var(--text); }
main .breadcrumbs a:not([class]):hover { color: var(--accent); }
main .column li a:not([class]) { color: #A0AEC0; text-decoration: none; }
main .column li a:not([class]):hover { color: var(--white); }
main .section-intro a:not([class]), .guide-toc a { color: var(--accent-text); }
/* contact form: hide the dropdown arrow of the area suggestions (suggestions still appear while typing) */
#f-location::-webkit-calendar-picker-indicator { display: none !important; opacity: 0; }
#f-location::-webkit-list-button { display: none !important; }

/* cookie banner: small close button (closing = no choice: cookieless statistics only) */
.cookie-banner { padding-right: 2.6rem; }
.cookie-close { position: absolute; top: .45rem; right: .5rem; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #A0AEC0; font-size: 1rem; cursor: pointer; display: grid; place-items: center; }
.cookie-close:hover, .cookie-close:focus-visible { color: #fff; background: rgba(255,255,255,.1); }

/* v34 cookie banner: inviting Accept button, small "No thanks" text button under it */
.cookie-actions { flex-direction: column; align-items: center; gap: .35rem; }
.cookie-accept { padding: .75rem 1.6rem !important; font-size: 1rem !important; font-weight: 700; border-radius: 999px; box-shadow: 0 6px 18px rgba(230,126,34,.45); }
.cookie-accept i { margin-right: .3rem; }
.cookie-decline { background: none; border: 0; padding: .2rem .4rem !important; color: #CBD5E0; font-size: .8rem !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cookie-decline:hover, .cookie-decline:focus-visible { color: #fff; }
@media (max-width: 768px) { .cookie-actions { align-items: stretch; } .cookie-decline { align-self: center; } }

/* v35 cookie banner: "No thanks" right after the question, privacy link aligned right under the text */
.cookie-text { flex: 1; min-width: 0; }
.cookie-text .cookie-decline { display: inline; margin-left: .2rem; padding: 0 !important; vertical-align: baseline; }
.cookie-privacy { display: block; text-align: right; font-size: .8rem; margin-top: .35rem; }
.cookie-privacy-m { display: none; }
@media (max-width: 768px) { .cookie-privacy-d { display: none; } .cookie-privacy-m { display: block; text-align: center; margin-top: .2rem; } }
@media (max-width: 768px) {
    /* v36 cookie banner on phones: text, Accept, then privacy link underneath */
    .cookie-text { display: contents; }
    .cookie-text p { order: 1; }
    .cookie-actions { order: 2; }
    .cookie-privacy { order: 3; margin-top: -.2rem; }
    /* v36 bottom contact bar: Call button blue */
    .action-bar a.ab-call { background: var(--primary); color: var(--white); }
    .action-bar a.ab-call i { color: var(--white); }
}

/* v42 cracked-glass click effect (assets/js/crack.js + assets/img/crack.webp, switch: 'crack_effect' in app/config.php) */
html { touch-action: manipulation; }   /* quick taps are not taken as "double-tap to zoom" (pinch zoom still works) */
.hh-crack-wrap { position: fixed; inset: 0; z-index: 1500; pointer-events: none; overflow: hidden; }
.hh-crack { position: absolute; max-width: none; transform: var(--hh-t); animation: hhCrackIn .14s ease-out; filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
.hh-crack-lines { position: absolute; inset: 0; }
.hh-cl { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: hhCrackRun .45s .08s cubic-bezier(.2,.8,.3,1) forwards; }
.hh-crack-out { opacity: 0; transition: opacity 1.1s ease; }
@keyframes hhCrackIn { 0% { transform: var(--hh-t) scale(.35); opacity: 0; } 70% { transform: var(--hh-t) scale(1.04); opacity: 1; } 100% { transform: var(--hh-t) scale(1); } }
@keyframes hhCrackRun { to { stroke-dashoffset: 0; } }

/* v45 ---------------------------------------------------------------- */
/* hero: "24/7 emergencies" links to the emergency page, red on hover */
.hero-badges a.hero-badge-emg { color: inherit; transition: color .2s; }
.hero-badges a.hero-badge-emg:hover, .hero-badges a.hero-badge-emg:focus-visible { color: #FC8181; }
.hero-badges a.hero-badge-emg:hover i { color: #FC8181; }
/* home: "20+ years experience | Belgian certified" is a button to the About page */
a.certification-badge { color: var(--white); border-radius: 14px; padding: .7rem 1.25rem; transition: transform .2s var(--ease), box-shadow .2s, background-color .2s; }
a.certification-badge:hover, a.certification-badge:focus-visible { color: var(--white); background: var(--primary-2); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,54,93,.3); }
.certification-badge .cb-arrow { color: var(--accent); font-size: .85em; transition: transform .2s; }
a.certification-badge:hover .cb-arrow { transform: translateX(3px); }
/* buttons: rounder corners, Montserrat and slightly bigger icons (like the emergency page buttons) */
.btn-primary, .btn-outline, .btn-outline-dark, .btn-white, .btn-wa, .btn-ghost { border-radius: 12px; font-family: 'Montserrat', sans-serif; }
.btn-primary i, .btn-outline i, .btn-outline-dark i, .btn-white i, .btn-wa i, .btn-ghost i { font-size: 1.15em; }
.btn-lg { border-radius: 14px; }
.cookie-accept { border-radius: 999px; }
/* stats under the hero: labels in bold like "Don't see the exact service you need?" */
.stat-label { font-weight: 700; color: var(--dark); font-size: 1rem; }
/* cookie banner on computers: privacy link at the end of the text, on the right */
.cookie-privacy-inline { float: right; margin-left: 1rem; font-size: .8rem; }
@media (min-width: 769px) { .cookie-privacy { display: none; } }
@media (max-width: 768px) { .cookie-privacy-inline { display: none; } }
/* WhatsApp logo size on all WhatsApp buttons: change 1.4em to make it bigger or smaller (1em = text size) */
.btn-wa .fa-whatsapp, .cb-wa .fa-whatsapp, .ab-wa .fa-whatsapp { font-size: 1.4em; }

/* v48: portrait photo above the "At a glance" card on trade pages (desktop only; lazy, so phones never load it) */
.side-photo { margin: 0 0 1.5rem; }
.side-photo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 1024px) { .side-photo { display: none; } }

/* v51: "On the job" cards link to the trade pages */
.gallery-link { display: block; color: inherit; text-decoration: none; }
.gallery-item figcaption .fa-arrow-right { color: var(--accent); margin-left: .3rem; transition: transform .25s var(--ease); }
.gallery-link:hover figcaption .fa-arrow-right, .gallery-link:focus-visible figcaption .fa-arrow-right { transform: translateX(4px); }
.gallery-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }