/*
* Location : /public_html/assets/css/main.css
* File : main.css
* Function : Global design system — variables, reset, mega-menu, image helpers, components
* Version : 3.0.0
* Generated: 2026-04-16
*
* Changelog:
* 3.0.0 (2026-04-16) — Brand colour system from logo:
* Green #036703 · Orange #ff9934 · Blue #033699 · Red #a50321
* Near-black #1a1a1a · White #ffffff
* Accent = logo-green (primary), service colours = logo palette
* 2.0.0 (2026-04-16) — Colourful redesign, mega-menu, photo-cards
* 1.0.0 (2026-04-16) — Initial release
*/
/*
* ═══════════════════════════════════════════════════════════════
* BRAND COLOUR SYSTEM
* Extracted from logo (grafik.png) · verified WCAG AAA on white
*
* --brand-green #036703 → 7.2:1 on white (AAA) — Primary accent
* --brand-orange #ff9934 → 2.9:1 on white (AA large) — used on dark bg
* --brand-blue #033699 → 8.6:1 on white (AAA)
* --brand-red #a50321 → 7.5:1 on white (AAA)
* --brand-black #1a1a1a → 18.6:1 on white (AAA) — near-black
* --brand-white #ffffff → baseline
* ═══════════════════════════════════════════════════════════════
*/
:root {
/* ── Brand colours from logo ───────────────────────────────── */
--brand-green: #036703; /* logo green, 7.2:1 on white AAA */
--brand-orange: #ff9934; /* logo orange, 2.9:1 on white (use on dark) */
--brand-blue: #033699; /* logo blue, 8.6:1 on white AAA */
--brand-red: #a50321; /* logo red, 7.5:1 on white AAA */
--brand-black: #1a1a1a; /* near-black, 18.6:1 on white AAA */
--brand-white: #ffffff; /* white baseline */
/* ── Light tints of brand colours (for backgrounds/badges) ─── */
--brand-green-lt: #e8f5e8;
--brand-green-mid: #05a005;
--brand-green-dark:#024602;
--brand-orange-lt: #fff4e5;
--brand-orange-dark:#c97200; /* darker orange — 4.5:1 on white AA */
--brand-blue-lt: #e5eaf7;
--brand-blue-dark: #022880;
--brand-red-lt: #fae5e8;
--brand-red-dark: #7a0218;
/* ── Neutral scale ─────────────────────────────────────────── */
--bg: #f8f9fa; /* warm off-white page background */
--bg2: #eef1f5; /* slightly deeper section bg */
--surface: #ffffff; /* card / nav surface */
--border: #d4d8e0;
--border-s: #e8eaef;
/* Text — all ≥7:1 on white (WCAG AAA) */
--ink: #1a1a1a; /* 18.6:1 — primary body text */
--ink2: #2d2d2d; /* 14.7:1 — secondary text */
--muted: #4a4a4a; /* 9.5:1 — muted / captions */
--muted2:#6b6b6b; /* 6.3:1 — placeholders (AA only) */
/* ── Primary accent = brand green ─────────────────────────── */
--accent: var(--brand-green);
--accent-mid: var(--brand-green-mid);
--accent-lt: #a3d9a3;
--accent-lt2: var(--brand-green-lt);
--accent-dark: var(--brand-green-dark);
/* ── Semantic service colours (brand palette) ──────────────── */
--c-green: var(--brand-green); --c-green-lt: #e8f5e8; --c-green-bd: #7dc27d;
--c-orange: var(--brand-orange); --c-orange-lt:#fff4e5; --c-orange-bd:#ffbc72;
--c-blue: var(--brand-blue); --c-blue-lt: #e5eaf7; --c-blue-bd: #6b8fd4;
--c-red: var(--brand-red); --c-red-lt: #fae5e8; --c-red-bd: #d4698a;
/* Legacy aliases — kept so existing card/badge CSS still works */
--c-teal: #0d9488; --c-teal-lt: #ccfbf1; --c-teal-bd: #5eead4;
--c-amber: #c97200; --c-amber-lt:#fff4e5; --c-amber-bd:#ffbc72;
--c-rose: var(--brand-red); --c-rose-lt:#fae5e8; --c-rose-bd:#d4698a;
--c-purple: #5b21b6; --c-purple-lt:#ede9fe; --c-purple-bd:#a78bfa;
/* ── Typography ────────────────────────────────────────────── */
--ff-d:'Cormorant Garamond',Georgia,serif;
--ff-b:'Plus Jakarta Sans',sans-serif;
/* ── Layout ────────────────────────────────────────────────── */
--nav-h: 72px;
--r: 10px;
--r-lg: 16px;
--r-xl: 22px;
--r-2xl: 32px;
/* ── Shadows ───────────────────────────────────────────────── */
--sh-s: 0 1px 3px rgba(26,26,26,.07),0 1px 2px rgba(26,26,26,.04);
--sh-m: 0 4px 18px rgba(26,26,26,.09),0 2px 4px rgba(26,26,26,.04);
--sh-l: 0 12px 42px rgba(26,26,26,.12),0 4px 8px rgba(26,26,26,.05);
--sh-xl: 0 24px 64px rgba(26,26,26,.15),0 8px 16px rgba(26,26,26,.06);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff-b);background:var(--bg);color:var(--ink);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none}
:focus{outline:none}
:focus-visible{outline:2.5px solid var(--brand-green);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;top:-100%;left:1rem;z-index:9999;background:var(--accent);color:#fff;font-weight:600;font-size:.8rem;padding:.5rem 1rem;border-radius:0 0 var(--r) var(--r);text-decoration:none;transition:top .2s}
.skip-link:focus{top:0}
/* ═══ BUTTONS ══════════════════════════════════════════════════════════════ */
.btn-p,.btn-o,.btn-ghost{
display:inline-flex;align-items:center;gap:.45rem;
padding:.82rem 1.9rem;
border-radius:var(--r);
font-family:var(--ff-b);font-size:.875rem;font-weight:600;
cursor:pointer;text-decoration:none;letter-spacing:.01em;
transition:background .2s,transform .15s,box-shadow .2s,border-color .2s;
white-space:nowrap;
border:1.5px solid transparent;
line-height:1;
vertical-align:middle;
-webkit-appearance:none;
}
.btn-p{background:var(--brand-green);color:#fff;border-color:var(--brand-green);box-shadow:0 4px 14px rgba(3,103,3,.25)}
.btn-p:hover{background:var(--brand-green-dark);border-color:var(--brand-green-dark);transform:translateY(-2px);box-shadow:0 6px 22px rgba(3,103,3,.35);color:#fff}
.btn-p:active{transform:translateY(0);box-shadow:0 2px 8px rgba(3,103,3,.2)}
.btn-p:focus-visible{outline:3px solid var(--brand-green);outline-offset:3px}
.btn-o{background:var(--surface);color:var(--ink);border-color:var(--border);box-shadow:var(--sh-s)}
.btn-o:hover{border-color:var(--ink2);transform:translateY(-2px);color:var(--ink);box-shadow:var(--sh-m)}
.btn-o:focus-visible{outline:3px solid var(--brand-green);outline-offset:3px}
.btn-ghost{background:transparent;color:var(--brand-green);border-color:transparent;padding-left:0;padding-right:0;box-shadow:none}
.btn-ghost:hover{color:var(--brand-green-dark)}
.btn-sm{padding:.52rem 1.1rem;font-size:.8rem}
/* ═══ NAV + MEGA MENU ═══════════════════════════════════════════════════ */
/* ═══ IMAGE HELPERS ═════════════════════════════════════════════════════ */
.img-cover{width:100%;height:100%;object-fit:cover;display:block}
.img-rounded{border-radius:var(--r-xl)}
.img-shadow{box-shadow:var(--sh-xl)}
.ratio-16x9{aspect-ratio:16/9;overflow:hidden}
.ratio-4x3{aspect-ratio:4/3;overflow:hidden}
.ratio-3x2{aspect-ratio:3/2;overflow:hidden}
.ratio-1x1{aspect-ratio:1/1;overflow:hidden}
/* Photo card */
.photo-card{border-radius:var(--r-xl);overflow:hidden;position:relative;box-shadow:var(--sh-m)}
.photo-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;display:block}
.photo-card:hover img{transform:scale(1.05)}
.photo-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(17,24,39,.72) 0%,transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;color:#fff}
.photo-card-tag{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:.3rem}
.photo-card-title{font-family:var(--ff-d);font-size:1.3rem;font-weight:500;line-height:1.2}
.split-img-wrap{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-xl)}
.split-img-wrap img{width:100%;height:100%;object-fit:cover;min-height:340px}
.img-badge{position:absolute;background:var(--surface);border-radius:var(--r-lg);padding:.75rem 1rem;box-shadow:var(--sh-l);display:flex;align-items:center;gap:.6rem}
.img-badge-icon{font-size:1.3rem}
.img-badge-label{font-size:.68rem;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.img-badge-value{font-family:var(--ff-d);font-size:1.05rem;font-weight:600;color:var(--ink);line-height:1}
/* Card with image */
.card-photo{background:var(--surface);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-m);text-decoration:none;display:block;color:inherit;transition:transform .25s,box-shadow .25s}
.card-photo:hover{transform:translateY(-5px);box-shadow:var(--sh-xl);color:inherit}
.card-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.card-photo-body{padding:1.5rem 1.75rem}
/* ═══ PAGE HERO ═════════════════════════════════════════════════════════ */
.page-hero{padding:calc(var(--nav-h) + 5rem) 1.5rem 4rem;position:relative;overflow:hidden}
.page-hero-plain{background:var(--bg2);border-bottom:1px solid var(--border)}
.page-hero-img{background-size:cover;background-position:center;color:#fff}
.page-hero-img::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(17,24,39,.8) 0%,rgba(17,24,39,.4) 100%)}
.page-hero-img .page-hero-title{color:#fff}
.page-hero-img .page-hero-sub{color:rgba(255,255,255,.8)}
.page-hero-img .container-xl{position:relative;z-index:1}
.page-hero-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.65rem}
.page-hero-img .page-hero-eyebrow{color:var(--accent-mid)}
.page-hero-title{font-family:var(--ff-d);font-size:clamp(2.4rem,5.5vw,4rem);font-weight:500;color:var(--ink);letter-spacing:-.025em;line-height:1.07;max-width:700px}
.page-hero-sub{font-size:1rem;font-weight:300;color:var(--muted);line-height:1.78;max-width:580px;margin-top:1rem}
.page-hero-badge{display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
/* ═══ SECTIONS ══════════════════════════════════════════════════════════ */
.section{padding:5.5rem 1.5rem}
.section-sm{padding:3.5rem 1.5rem}
.section-alt{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-white{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-green{background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%);border-top:1px solid #bbf7d0;border-bottom:1px solid #bbf7d0}
.section-blue{background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%);border-top:1px solid #bfdbfe;border-bottom:1px solid #bfdbfe}
.section-warm{background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);border-top:1px solid #fde68a;border-bottom:1px solid #fde68a}
.section-dark{background:var(--ink);color:#fff}
.section-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.section-title{font-family:var(--ff-d);font-size:clamp(2rem,4.5vw,3.4rem);font-weight:500;color:var(--ink);letter-spacing:-.022em;line-height:1.1}
.section-title-white{color:#fff}
.section-sub{font-size:.9375rem;font-weight:300;color:var(--muted);line-height:1.75;max-width:520px;margin-top:.75rem}
.grad-divider{height:4px;background:linear-gradient(90deg,var(--brand-green) 0%,var(--brand-orange) 33%,var(--brand-blue) 66%,var(--brand-red) 100%);border:none}
/* ═══ CARDS ════════════════════════════════════════════════════════════ */
.card-service{background:var(--surface);border:1px solid var(--border-s);border-radius:var(--r-xl);padding:2rem 1.75rem;height:100%;box-shadow:var(--sh-s);transition:border-color .25s,transform .25s,box-shadow .25s;position:relative;overflow:hidden;text-decoration:none;display:block;color:inherit}
.card-service-top-bar{position:absolute;top:0;left:0;right:0;height:4px;background:var(--ca,var(--accent))}
.card-service:hover{border-color:rgba(26,107,74,.18);transform:translateY(-5px);box-shadow:var(--sh-l);color:inherit}
.card-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:1.25rem;border:1.5px solid}
.card-num{position:absolute;top:1.25rem;right:1.5rem;font-family:var(--ff-d);font-size:2.8rem;font-weight:600;color:rgba(17,24,39,.04);line-height:1;letter-spacing:-.03em}
.card-title{font-family:var(--ff-d);font-size:1.2rem;font-weight:500;color:var(--ink);margin-bottom:.5rem;letter-spacing:-.01em}
.card-body{font-size:.875rem;font-weight:300;color:var(--muted);line-height:1.72}
.card-arrow{margin-top:1.25rem;font-size:.8rem;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:.3rem}
/* ═══ STEP ══════════════════════════════════════════════════════════════ */
.step-item{display:flex;gap:1.25rem;align-items:flex-start;padding:1.5rem;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border-s);box-shadow:var(--sh-s);margin-bottom:1rem}
.step-num{width:42px;height:42px;border-radius:50%;flex-shrink:0;background:var(--accent-lt2);border:1.5px solid var(--accent-lt);display:flex;align-items:center;justify-content:center;font-family:var(--ff-d);font-size:1.15rem;font-weight:600;color:var(--accent)}
.step-title{font-family:var(--ff-d);font-size:1.05rem;font-weight:500;color:var(--ink);margin-bottom:.3rem}
.step-body{font-size:.875rem;font-weight:300;color:var(--muted);line-height:1.7}
/* ═══ INFO / BADGES ════════════════════════════════════════════════════ */
.info-box{background:var(--accent-lt2);border:1px solid var(--accent-lt);border-left:3px solid var(--accent);border-radius:var(--r);padding:1.25rem 1.5rem;font-size:.9rem;color:var(--ink2);line-height:1.7}
.info-box strong{color:var(--accent)}
.law-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .75rem;border-radius:999px;border:1.5px solid var(--accent-lt);background:var(--accent-lt2);font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-right:.4rem;margin-bottom:.4rem}
.pill{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .85rem;border-radius:999px;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.pill-green{background:var(--c-green-lt);color:#15803d;border:1px solid var(--c-green-bd)}
.pill-blue{background:var(--c-blue-lt);color:#1d4ed8;border:1px solid var(--c-blue-bd)}
.pill-amber{background:var(--c-amber-lt);color:#b45309;border:1px solid var(--c-amber-bd)}
.pill-rose{background:var(--c-rose-lt);color:#be123c;border:1px solid var(--c-rose-bd)}
.pill-purple{background:var(--c-purple-lt);color:#7c3aed;border:1px solid var(--c-purple-bd)}
.pill-teal{background:var(--c-teal-lt);color:#0d9488;border:1px solid var(--c-teal-bd)}
/* ═══ STRIP ═════════════════════════════════════════════════════════════ */
.strip{overflow:hidden;padding:.85rem 0}
.strip-colored{background:linear-gradient(90deg,#ecfdf5 0%,#eff6ff 33%,#fef3c7 66%,#ffe4e6 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.strip-track{display:flex;white-space:nowrap;animation:marquee 32s linear infinite}
.strip-track:hover{animation-play-state:paused}
.strip-item{display:inline-flex;align-items:center;gap:.85rem;padding:0 1.75rem;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.strip-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ═══ CONTACT CARD ══════════════════════════════════════════════════════ */
.contact-card{background:linear-gradient(135deg,#111827 0%,#1f2937 100%);border-radius:var(--r-xl);padding:3rem 2.5rem;color:#fff;position:relative;overflow:hidden}
.contact-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 55% at 90% 10%,rgba(26,107,74,.38) 0%,transparent 70%)}
.contact-card-title{font-family:var(--ff-d);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:500;line-height:1.1;letter-spacing:-.02em;position:relative;z-index:1}
.contact-card-sub{font-size:.9rem;font-weight:300;color:rgba(255,255,255,.62);margin-top:.75rem;line-height:1.7;position:relative;z-index:1}
.contact-info-list{margin-top:1.75rem;display:flex;flex-direction:column;gap:.875rem;position:relative;z-index:1}
.contact-info-item{display:flex;align-items:center;gap:.75rem;font-size:.9rem;color:rgba(255,255,255,.82);text-decoration:none}
.contact-info-item:hover{color:var(--accent-mid)}
.contact-info-icon{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;border:1px solid rgba(255,255,255,.07)}
/* ═══ BREADCRUMB ════════════════════════════════════════════════════════ */
.breadcrumb-nav ol{display:flex;gap:.5rem;padding:0;font-size:.75rem;color:var(--muted2);flex-wrap:wrap}
.breadcrumb-nav a{color:var(--muted2);text-decoration:none;transition:color .18s}
.breadcrumb-nav a:hover{color:var(--accent)}
/* ═══ QUOTE ═════════════════════════════════════════════════════════════ */
.quote-card{background:var(--surface);border-radius:var(--r-xl);padding:2rem;box-shadow:var(--sh-m);border-left:4px solid var(--accent);position:relative}
.quote-text{font-family:var(--ff-d);font-size:1.15rem;font-style:italic;color:var(--ink);line-height:1.65}
.quote-cite{font-size:.8rem;font-weight:600;color:var(--muted);margin-top:1rem;display:flex;align-items:center;gap:.5rem}
.quote-cite::before{content:'';display:block;width:24px;height:2px;background:var(--accent)}
/* ═══ FOOTER ════════════════════════════════════════════════════════════ */
.footer-accent-bar{height:5px;background:linear-gradient(90deg,var(--brand-green) 0%,var(--brand-orange) 33%,var(--brand-blue) 66%,var(--brand-red) 100%)}
.site-footer{background:#0f172a;color:rgba(255,255,255,.72);padding:4rem 2.5rem 2rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1fr 1fr;gap:1.75rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.07)}
.footer-brand-name{font-family:var(--ff-d);font-size:1.25rem;font-weight:600;color:#fff;margin-bottom:.6rem}
.footer-brand-desc{font-size:.8rem;font-weight:300;line-height:1.7;color:rgba(255,255,255,.44);max-width:240px}
.footer-col-title{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:.875rem}
.footer-links{display:flex;flex-direction:column;gap:.45rem}
.footer-links a{font-size:.8rem;color:rgba(255,255,255,.52);text-decoration:none;transition:color .18s}
.footer-links a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.75rem}
.footer-copy{font-size:.72rem;color:rgba(255,255,255,.27)}
.footer-bottom-links{display:flex;gap:1.5rem}
.footer-bottom-links a{font-size:.72rem;color:rgba(255,255,255,.3);text-decoration:none;transition:color .18s}
.footer-bottom-links a:hover{color:#fff}
@media(max-width:1299.98px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1.5rem}}
@media(max-width:1099.98px){.footer-grid{grid-template-columns:1fr 1fr 1fr;gap:1.5rem}}
@media(max-width:767.98px){.footer-grid{grid-template-columns:1fr 1fr;gap:1.25rem}}
@media(max-width:575.98px){.footer-grid{grid-template-columns:1fr}.site-footer{padding:3rem 1.25rem 1.5rem}.footer-bottom{flex-direction:column;align-items:flex-start}}
/* ═══ ANIMATIONS ════════════════════════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.4}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.reveal.in-view{opacity:1;transform:translateY(0)}
/* ═══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media(max-width:767.98px){
:root{--nav-h:64px}
.section{padding:2.5rem 1.25rem}
.section-sm{padding:2rem 1.25rem}
.contact-card{padding:1.75rem 1.25rem}
.split-img-wrap img{min-height:220px}
/* Page hero inner pages */
.page-hero{padding:calc(var(--nav-h)+2.5rem) 1.25rem 2.5rem}
.page-hero-title{font-size:clamp(2rem,8.5vw,3rem);line-height:1.1}
.page-hero-sub{font-size:.9rem;margin-top:.75rem}
/* Section headers */
.section-title{font-size:clamp(1.75rem,6.5vw,2.6rem)}
.section-sub{font-size:.875rem}
/* Buttons — full-width stacked on very small screens */
.btn-p,.btn-o{padding:.78rem 1.5rem;font-size:.85rem}
/* Cards */
.card-service{padding:1.5rem 1.25rem}
.card-photo-body{padding:1.1rem 1.25rem}
/* Steps */
.step-item{padding:1.1rem}
/* Info box */
.info-box{padding:1rem 1.1rem;font-size:.85rem}
/* Strip strip */
.strip-item{padding:0 1rem;font-size:.62rem;letter-spacing:.1em}
/* Contact card */
.contact-card-title{font-size:clamp(1.5rem,5.5vw,2.2rem)}
.contact-info-item{font-size:.85rem}
.contact-info-icon{width:34px;height:34px}
}
/* ── Very small ≤479px ── */
@media(max-width:479.98px){
:root{--nav-h:60px}
.section{padding:2rem 1rem}
.section-title{font-size:clamp(1.6rem,7vw,2.2rem)}
.page-hero-title{font-size:clamp(1.75rem,8vw,2.6rem)}
.btn-p,.btn-o{padding:.72rem 1.1rem;font-size:.82rem}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
.strip-track{animation:none}
.reveal{opacity:1;transform:none;transition:none}
}
/* ═══════════════════════════════════════════════════════════════════════
NAV — site-nav bar + desktop mega + mobile right-drawer
Version: 7.0.0 · 2026-04-16
Desktop: logo | nav-links (centre) | btn-nav + hamburger (right)
Mobile: logo | hamburger (right) → slide-in drawer from right
═══════════════════════════════════════════════════════════════════════ */
/* ── Nav bar ─────────────────────────────────────────────────────────── */
.site-nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 300;
height: var(--nav-h);
display: flex; align-items: center;
gap: 1rem;
padding: 0 2rem;
background: rgba(255,255,255,.97);
backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--border-s);
transition: box-shadow .3s;
}
.site-nav.scrolled { box-shadow: var(--sh-m); }
/* Brand / logo */
.nav-brand {
display: flex; align-items: center; gap: .5rem;
font-family: var(--ff-d); font-size: 1.1rem; font-weight: 600;
color: var(--ink); text-decoration: none; letter-spacing: .01em;
flex-shrink: 0; overflow: hidden;
}
.nav-brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-logo-wrap {
width: 40px; height: 40px; border-radius: 8px; overflow: hidden;
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.nav-logo-img { width: 40px; height: 40px; object-fit: contain; display: block; }
/* Desktop nav links list — centred, takes remaining space */
.nav-links {
display: flex; align-items: center; gap: 0;
list-style: none; padding: 0; margin: 0;
flex: 1; justify-content: center;
}
.nav-link, .nav-drop-btn {
display: inline-flex; align-items: center; gap: .28rem;
padding: .5rem .85rem;
font-family: var(--ff-b); font-size: .77rem; font-weight: 500;
letter-spacing: .04em; text-transform: uppercase;
color: var(--muted); text-decoration: none;
background: none; border: none; cursor: pointer;
border-radius: 6px; white-space: nowrap;
transition: color .18s;
position: relative;
}
.nav-link:hover, .nav-drop-btn:hover,
.nav-link.active { color: var(--ink); }
.nav-link.active::after {
content: ''; position: absolute; bottom: -1px;
left: .85rem; right: .85rem; height: 2px;
background: var(--brand-green); border-radius: 1px;
}
.nav-chevron { font-size: .55rem; transition: transform .22s; }
.nav-drop-btn[aria-expanded="true"] { color: var(--ink); }
.nav-drop-btn[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
/* Right-side: CTA + hamburger */
.nav-right {
display: flex; align-items: center; gap: .5rem; flex-shrink: 0; margin-left: auto;
}
.btn-nav {
font-family: var(--ff-b); font-size: .77rem; font-weight: 600;
padding: .55rem 1.25rem; border-radius: var(--r);
background: var(--brand-green); color: #fff; border: none;
cursor: pointer; text-decoration: none; white-space: nowrap;
box-shadow: 0 2px 10px rgba(3,103,3,.28);
transition: background .2s, transform .15s;
}
.btn-nav:hover { background: var(--brand-green-dark); transform: translateY(-1px); color: #fff; }
.nav-toggle {
display: none; /* hidden on desktop, shown via media query below */
align-items: center; justify-content: center;
width: 44px; height: 44px; /* 44px = minimum touch target WCAG */
border: 1.5px solid var(--border); border-radius: 8px;
background: none; cursor: pointer;
font-size: 1.3rem; color: var(--ink);
transition: background .15s, border-color .15s;
flex-shrink: 0;
/* ensure it stays on the right and is never clipped */
position: relative; z-index: 1;
}
.nav-toggle:hover { background: var(--bg2); border-color: var(--brand-green); }
.nav-toggle:active { background: var(--brand-green-lt); }
/* ── Mega wrap + panels ──────────────────────────────────────────────── */
.mega-wrap {
position: fixed; top: var(--nav-h); left: 0; right: 0;
z-index: 290; pointer-events: none; /* panels enable pointer-events when shown */
}
.mega-panel {
background: #fff;
border-bottom: 2px solid var(--border);
box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.06);
pointer-events: all;
/* animation triggered by JS via style reset — not on page load */
animation: megaIn .18s ease both;
}
.mega-panel[hidden] { display: none; }
@keyframes megaIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.mega-panel::before {
content: ''; display: block; height: 4px;
background: linear-gradient(90deg, var(--brand-green) 0%, var(--brand-orange) 33%, var(--brand-blue) 66%, var(--brand-red) 100%);
}
.mega-inner { max-width: 1380px; margin: 0 auto; padding: 1.75rem 2rem 2rem; display: grid; gap: 2rem; }
.mega-inner.cols-services { grid-template-columns: 1fr 300px; }
.mega-inner.cols-regions { grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.mega-label { font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted2); margin-bottom: .875rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border-s); }
.mega-services { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.mega-tile { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .875rem; border-radius: var(--r-lg); text-decoration: none; color: inherit; transition: background .13s; border: 1px solid transparent; }
.mega-tile:hover { background: var(--bg2); border-color: var(--border-s); }
.mega-tile-icon { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; border: 1.5px solid; }
.mega-tile-title { font-family: var(--ff-d); font-size: .975rem; font-weight: 500; color: var(--ink); line-height: 1.2; }
.mega-tile-sub { font-size: .72rem; font-weight: 300; color: var(--muted); margin-top: .18rem; line-height: 1.35; }
.mega-featured { border-radius: var(--r-xl); overflow: hidden; position: relative; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; box-shadow: var(--sh-m); }
.mega-featured img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.mega-featured:hover img { transform: scale(1.05); }
.mega-featured-body { position: relative; z-index: 1; padding: 1rem 1.1rem; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%); color: #fff; }
.mega-featured-tag { font-size: .58rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: .25rem; }
.mega-featured-title { font-family: var(--ff-d); font-size: 1.05rem; font-weight: 500; line-height: 1.25; }
.mega-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .875rem; padding: .875rem 1rem; background: linear-gradient(90deg, var(--brand-green-lt), #c8e8c8); border-radius: var(--r-lg); border: 1px solid #7dc27d; }
.mega-cta-text { font-size: .82rem; font-weight: 500; color: var(--ink); }
.mega-region-list { display: flex; flex-direction: column; gap: .25rem; }
.mega-region { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border-radius: var(--r); text-decoration: none; color: inherit; border: 1px solid transparent; transition: background .12s, transform .12s; }
.mega-region:hover { background: var(--bg2); border-color: var(--border-s); transform: translateX(3px); }
.mega-region img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.mega-region-name { font-family: var(--ff-d); font-size: .9rem; font-weight: 500; color: var(--ink); line-height: 1.2; }
.mega-region-sub { font-size: .65rem; color: var(--muted2); }
.mega-footer-bar { max-width: 1380px; margin: 0 auto; padding: .875rem 2rem 1.1rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; border-top: 1px solid var(--border-s); }
.mega-footer-text { font-size: .82rem; color: var(--muted); }
/* ══ MOBILE ≤1099px ════════════════════════════════════════════════════ */
@media (max-width: 1099.98px) {
.site-nav {
padding: 0 1rem;
gap: 0; /* no gap — brand takes what it needs, nav-right glues to right */
}
.nav-links { display: none; } /* hide desktop links */
.btn-nav { display: none; } /* hide desktop CTA */
.nav-toggle{ display: flex !important; } /* show hamburger */
.mega-wrap { display: none; } /* hide mega panels */
/* ── Backdrop ── */
.nav-backdrop {
display: none;
position: fixed; inset: 0; z-index: 297;
background: rgba(0,0,0,.52);
backdrop-filter: blur(3px);
}
.nav-backdrop.visible { display: block; }
/* ── Right-side drawer ── */
.mob-drawer {
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(320px, 88vw);
z-index: 299;
background: #fff;
display: flex;
flex-direction: column;
overflow-y: auto; overflow-x: hidden;
overscroll-behavior: contain;
box-shadow: -4px 0 32px rgba(0,0,0,.18);
transform: translateX(110%);
transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.mob-drawer[hidden] { display: none !important; }
.mob-drawer.open { transform: translateX(0); }
/* Drawer header */
.mob-drawer-header {
display: flex; align-items: center; justify-content: space-between;
padding: .875rem 1rem;
border-bottom: 3px solid transparent;
border-image: linear-gradient(90deg, var(--brand-green), var(--brand-orange), var(--brand-blue), var(--brand-red)) 1;
position: sticky; top: 0; background: #fff; z-index: 2; flex-shrink: 0;
}
.mob-drawer-brand {
display: flex; align-items: center; gap: .45rem;
font-family: var(--ff-d); font-size: .9rem; font-weight: 600;
color: var(--ink); text-decoration: none;
}
.mob-drawer-brand img { border-radius: 6px; }
.mob-drawer-close {
width: 36px; height: 36px; border: 1.5px solid var(--border); border-radius: 8px;
background: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; color: var(--ink);
transition: background .15s, color .15s;
flex-shrink: 0;
}
.mob-drawer-close:hover { background: #fce7e7; color: var(--brand-red); }
/* Nav list */
.mob-nav-list { list-style: none; padding: 0; margin: 0; flex: 1; }
.mob-nav-list > li { border-bottom: 1px solid var(--border-s); }
.mob-nav-list > li > a {
display: block; padding: .875rem 1.25rem;
font-family: var(--ff-b); font-size: .9rem; font-weight: 500;
color: var(--ink); text-decoration: none; transition: background .12s, color .12s;
}
.mob-nav-list > li > a:hover { background: var(--bg2); color: var(--brand-green); }
/* Accordion trigger */
.mob-sub-btn {
display: flex; align-items: center; justify-content: space-between; width: 100%;
padding: .875rem 1.25rem;
font-family: var(--ff-b); font-size: .9rem; font-weight: 500;
color: var(--ink); background: none; border: none; cursor: pointer;
text-align: left; transition: background .12s, color .12s;
}
.mob-sub-btn:hover { background: var(--bg2); color: var(--brand-green); }
.mob-chevron { font-size: .65rem; transition: transform .22s; flex-shrink: 0; }
.mob-sub-btn[aria-expanded="true"] { color: var(--brand-green); background: var(--bg2); }
.mob-sub-btn[aria-expanded="true"] .mob-chevron { transform: rotate(180deg); }
/* Sub panel */
.mob-sub-panel { background: var(--bg); border-top: 1px solid var(--border-s); }
.mob-sub-panel[hidden] { display: none; }
.mob-sub-link {
display: flex; align-items: center; gap: .65rem; padding: .65rem 1.25rem;
text-decoration: none; color: var(--ink);
border-bottom: 1px solid var(--border-s); transition: background .12s;
}
.mob-sub-link:last-child { border-bottom: none; }
.mob-sub-link:hover { background: var(--brand-green-lt); }
.mob-sub-icon {
width: 28px; height: 28px; border-radius: 7px;
display: flex; align-items: center; justify-content: center;
font-size: .85rem; flex-shrink: 0;
}
.mob-sub-title { font-size: .87rem; font-weight: 500; color: var(--ink); }
.mob-region-link { padding-left: 1.5rem; }
/* Bottom CTA */
.mob-cta-btn {
display: flex; align-items: center; gap: .5rem;
margin: .875rem 1rem 1rem; padding: .875rem 1rem;
background: linear-gradient(135deg, var(--brand-green-lt), #c8e8c8);
border: 1px solid #7dc27d; border-radius: var(--r-lg);
text-decoration: none; color: var(--brand-green-dark);
font-family: var(--ff-b); font-size: .82rem; font-weight: 600;
flex-shrink: 0;
transition: filter .15s;
}
.mob-cta-btn:hover { filter: brightness(.96); }
}
/* ── Hide mobile elements on desktop ── */
@media (min-width: 1100px) {
.mob-drawer { display: none !important; }
.nav-backdrop { display: none !important; }
.nav-toggle { display: none !important; }
}
/* ── Very small ≤399px ── */
@media (max-width: 399.98px) {
.mob-drawer { width: 92vw; }
.mob-nav-list > li > a, .mob-sub-btn { padding: .8rem 1rem; }
.mob-sub-link { padding: .6rem 1rem; }
.nav-brand-text { display: none; }
}