*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;font-family:'Hanken Grotesk',system-ui,sans-serif;color:#152743;-webkit-font-smoothing:antialiased}
a{color:#1E5FBF;text-decoration:none}a:hover{color:#184890}
input::placeholder,textarea::placeholder{color:#9AA9BE}
select,input,textarea{font-family:'Hanken Grotesk',sans-serif}
[data-hidescroll]::-webkit-scrollbar{display:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulseGlow{0%,100%{opacity:.45}50%{opacity:.95}}
@keyframes sheen{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes marqueeR{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
/* ── Buttons: hover empties the fill and flips the text to the brand blue ──
Buttons across the site are inline-styled with the same brand gradient,
so we hook that signature instead of adding a class to all ten. */
/* .btn-grad — every brand-gradient button/link carries this class. */
.btn-grad {
position: relative;
border: 1px solid transparent;
transition: background .3s ease, color .3s ease, border-color .3s ease,
transform .25s cubic-bezier(.4,.2,.2,1), box-shadow .3s ease;
}
.btn-grad:hover {
/* A solid deep-blue fill (not transparent) so the label stays readable
wherever the button sits — light sections, dark hero panels, and the
white newsletter pill alike. A see-through hover made the white
Subscribe label vanish against the white form behind it. */
background: #123563 !important;
color: #ffffff !important;
border-color: #123563;
transform: translateY(-2px);
box-shadow: 0 14px 28px -16px rgba(10,25,60,.7);
}
.btn-grad:active {
transform: translateY(0);
}
/* Amber CTAs on the dark feature cards ("Call Now"): same lift, deepened
fill. Keeps the dark label readable rather than inverting to a pale
colour that would disappear against the card. */
.btn-amber {
border: 1px solid transparent;
transition: background .3s ease, color .3s ease, border-color .3s ease,
transform .25s cubic-bezier(.4,.2,.2,1), box-shadow .3s ease;
}
.btn-amber:hover {
background: #FFCE9A !important;
color: #3d1f04 !important;
transform: translateY(-2px);
box-shadow: 0 14px 28px -16px rgba(242,162,76,.8);
}
.btn-amber:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.btn-grad, .btn-amber { transition: none; }
.btn-grad:hover, .btn-amber:hover { transform: none; }
}
/* ── Accent font for headings ── */
.accent-word {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 600;
color: #1E5FBF;
}
.accent-word.accent-warm { color: #E0872B; }
.accent-word.accent-light { color: #6AA8E8; }
/* ── Heading reveal: letter-by-letter on scroll into view ── */
.js-reveal-ready .reveal-letter {
display: inline-block;
opacity: 0;
transform: translateY(.4em);
white-space: pre;
}
.reveal-heading.in-view .reveal-letter {
animation: revealLetter .55s cubic-bezier(.2,.6,.3,1) forwards;
}
@keyframes revealLetter {
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.reveal-letter { opacity: 1 !important; transform: none !important; }
.reveal-heading.in-view .reveal-letter { animation: none; }
}
/* Hero gradient-sheen word: needs its own reveal + sheen animations combined */
.hero-sheen-word { animation: sheen 5s linear infinite; }
.reveal-heading.in-view .hero-sheen-word.reveal-letter {
animation: revealLetter .55s cubic-bezier(.2,.6,.3,1) forwards, sheen 5s linear infinite;
}
/* ── NAVBAR ── */
#mainNavbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 9000;
padding: 0 20px;
transition: padding 0.4s cubic-bezier(.4,0,.2,1);
}
#navInner {
background: #ffffff;
border: 1px solid rgba(20,35,58,.08);
border-radius: 22px;
width: calc(100% - 40px);
max-width: 1200px;
margin: 12px auto;
box-shadow: 0 22px 50px -18px rgba(10,20,40,.4);
transition: all 0.4s cubic-bezier(.4,0,.2,1);
}
#mainNavbar.scrolled { padding: 0; }
#mainNavbar.scrolled #navInner {
border-radius: 0;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 21px;
width: 100%;
max-width: 100%;
margin: 0;
border: none;
border-bottom: 1px solid rgba(20,35,58,.12);
box-shadow: 0 10px 34px -12px rgba(10,20,40,.28);
}
.nav-item { cursor:pointer; transition:color .2s; font-weight:600; font-size:15px; text-decoration:none; color:#48618A; }
.nav-item.active { color:#0E2A52 !important; font-weight:700; }
.nav-item:hover { color:#1E5FBF; }
/* ── Universal Tag Pill ── */
.tag-pill {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(30, 95, 191, 0.22);
border-radius: 999px;
padding: 6px 14px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .2em;
color: #1747A6;
background: rgba(30, 95, 191, 0.06);
margin-bottom: 16px;
}
.tag-pill .dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #1E5FBF;
box-shadow: 0 0 7px rgba(30,95,191,.7);
flex: none;
}
/* On dark backgrounds */
.tag-pill-light {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
padding: 6px 14px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .2em;
color: #c3d2e6;
background: rgba(255,255,255,0.07);
margin-bottom: 16px;
}
.tag-pill-light .dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #3B82D6;
box-shadow: 0 0 7px rgba(59,130,214,.8);
flex: none;
}
/* ── Simple Dropdown ── */
.svc-wrap { position:relative; display:inline-flex; align-items:center; }
/* Transparent bridge across the gap so the menu doesn't close when the
cursor moves from "Services" down to the dropdown. */
.svc-wrap::after {
content: ""; position: absolute; top: 100%; left: -10px; right: -10px;
height: 18px; z-index: 99998;
}
.svc-drop {
opacity: 0; visibility: hidden;
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(8px);
transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
transition-delay: .25s; /* grace period before it closes */
background: #fff;
border: 1px solid rgba(20,35,58,.1);
border-radius: 14px;
box-shadow: 0 20px 50px -12px rgba(10,20,40,.25);
min-width: 210px;
overflow: hidden;
z-index: 99999;
}
.svc-wrap:hover .svc-drop,
.svc-drop:hover {
opacity: 1; visibility: visible;
transform: translateX(-50%) translateY(0);
transition-delay: 0s; /* opens instantly */
}
.svc-drop a {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 18px;
font-size: 14.5px;
font-weight: 600;
color: #152743;
text-decoration: none;
transition: background .15s;
}
.svc-drop a:hover { background: #F3F6FB; color: #1E5FBF; }
.svc-drop a .svc-icon {
width: 32px; height: 32px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
flex: none;
}
.svc-drop-divider { height: 1px; background: rgba(20,35,58,.07); margin: 0 14px; }
/* ── Mobile hamburger + right-side drawer (hidden on desktop) ── */
.nav-hamburger { display: none; }
#navDrawer, #navDrawerOverlay { display: none; }
.drawer-link {
display: block; padding: 14px 4px; text-decoration: none;
font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 17px;
color: #152743; border-bottom: 1px solid rgba(20,35,58,.08);
}
.drawer-link.active { color: #1E5FBF; }
.drawer-sub { display: flex; flex-direction: column; padding: 4px 0 8px 14px; }
.drawer-sub a { padding: 9px 4px; font-size: 14.5px; font-weight: 600; color: #48618A; text-decoration: none; }
.drawer-sub a:hover { color: #1E5FBF; }
.drawer-book {
margin-top: 20px; width: 100%; background: linear-gradient(90deg,#1E5FBF,#3B82D6);
color: #fff; border: none; padding: 14px; border-radius: 12px;
font-weight: 700; font-size: 15px; cursor: pointer;
}
.drawer-call {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 12px; padding: 12px; color: #1E5FBF; font-weight: 700; text-decoration: none;
}
/* ══════════════ RESPONSIVE / MOBILE ══════════════ */
@media (max-width: 860px) {
/* Navbar: swap desktop nav for a hamburger on the right */
.nav-desktop { display: none !important; }
/* The outer bar already pads 20px a side; subtracting another 40px here
overflowed the pill and pushed the hamburger off-screen. */
#mainNavbar { padding: 0 12px !important; }
#navInner { width: 100% !important; margin: 12px 0 !important; padding: 6px !important; }
#navInner > div { align-items: center !important; min-height: 68px; gap: 8px !important; }
/* Logo must shrink, not shove the hamburger out */
#navInner a[href="index.php"] { padding-left: 10px !important; gap: 8px !important; min-width: 0 !important; }
#navInner a[href="index.php"] > div:last-child { min-width: 0 !important; overflow: hidden !important; }
.nav-hamburger { flex: none !important; }
.nav-hamburger {
display: flex; align-items: center; justify-content: center;
margin-left: auto; align-self: center; margin-right: 8px;
width: 54px; height: 54px; border: none; border-radius: 14px;
background: #F3F6FB; color: #0E2A52; cursor: pointer;
}
.nav-hamburger svg { width: 28px; height: 28px; }
#navInner a[href="index.php"] > div:first-child { width: 58px !important; height: 58px !important; overflow: visible !important; }
#navInner a[href="index.php"] img { height: 58px !important; width: 58px !important; border-radius: 12px !important; }
#navDrawerOverlay {
display: block; position: fixed; inset: 0; z-index: 9500;
background: rgba(6,13,24,.55); opacity: 0; visibility: hidden; transition: opacity .3s;
}
#navDrawerOverlay.open { opacity: 1; visibility: visible; }
#navDrawer {
display: flex; flex-direction: column;
position: fixed; top: 0; right: 0; z-index: 9600;
width: min(84vw, 320px); height: 100%; background: #fff;
box-shadow: -22px 0 50px -20px rgba(10,20,40,.5);
transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
padding: 20px 22px 28px; overflow-y: auto;
}
#navDrawer.open { transform: translateX(0); }
/* Layout: reduce big containers' side padding */
/* Stack / reflow all multi-column grids */
/* 4-up grids: the stats band still reads fine 2-up, but content cards
("What's included") get too cramped — those go one per row. */
/* "How it works" timeline -> stack, hide connectors.
Once stacked, each step must span the full width and align the same
way, otherwise flex sizing leaves individual steps (e.g. step 2)
sitting at a different width than its neighbours. */
/* Shrink large headings & display numbers */
/* Trim oversized hero top padding */
/* Shrink tall fixed-height media */
/* Testimonial cards narrower than the viewport */
/* Newsletter banner: 40px padding + a nowrap Subscribe button pushed the
form past the card edge once the grid stacked. */
.nl-banner { padding: 28px 20px !important; gap: 22px !important; }
.nl-banner form { flex-wrap: wrap !important; gap: 8px !important; }
.nl-banner input[type="email"] { flex: 1 1 100% !important; min-width: 0 !important; }
.nl-banner button { flex: 1 1 100% !important; }
}
/* ==== index: reason cards ==== */
/* Reason cards: diagonal shine sweep on hover */
.reason-card {
position: relative; overflow: hidden;
transition: transform .35s cubic-bezier(.4,.2,.2,1), box-shadow .35s;
}
.reason-card::before {
content: ""; position: absolute; top: 0; left: -75%;
width: 55%; height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,.65), transparent);
transform: skewX(-20deg); pointer-events: none;
transition: left .65s ease;
}
.reason-card:hover { transform: translateY(-6px); box-shadow: 0 24px 42px -22px rgba(12,32,54,.42); }
.reason-card:hover::before { left: 130%; }
@media (prefers-reduced-motion: reduce) {
.reason-card, .reason-card::before { transition: none; }
}
/* ==== about: team flip cards ==== */
.team-card { perspective: 1400px; height: 420px; }
.team-inner {
position: relative; width: 100%; height: 100%;
transition: transform .6s cubic-bezier(.4,.2,.2,1);
transform-style: preserve-3d;
}
.team-card:hover .team-inner,
.team-card:focus-within .team-inner { transform: rotateY(180deg); }
.team-face {
position: absolute; inset: 0;
-webkit-backface-visibility: hidden; backface-visibility: hidden;
border-radius: 18px; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 18px 42px -30px rgba(20,45,90,.5);
}
.team-back { transform: rotateY(180deg); }
/* ==== Booking modal: Calendly-style scheduler ==== */
#bookingModal { transition: padding .35s ease; }
#bmCard {
position: relative; z-index: 2;
display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); overflow: hidden;
background: #fff; border: 1px solid rgba(20,35,58,.1); border-radius: 22px;
box-shadow: 0 40px 90px -30px rgba(0,0,0,.85); color: #152743;
transition: grid-template-columns .4s cubic-bezier(.4,.2,.2,1), width .4s cubic-bezier(.4,.2,.2,1);
max-width: calc(100vw - 32px);
width: min(780px, calc(100vw - 32px));
min-height: min(560px, calc(100vh - 32px));
max-height: calc(100vh - 32px);
}
/* The right column is 1fr so it always absorbs the card's full remaining
width. Capping it (e.g. minmax(0,320px)) left the difference between the
card width and the two column maxes as dead space on the right. Each step
only sets the card width; the columns then fill it exactly. */
#bmCard.bm-step-calendar { width: min(700px, calc(100vw - 32px)); }
#bmCard.bm-step-slots { width: min(600px, calc(100vw - 32px)); }
#bmCard.bm-step-details { width: min(780px, calc(100vw - 32px)); }
#bmInfo {
padding: clamp(18px, 4vw, 26px); border-right: 1px solid rgba(20,35,58,.09);
background: #FAFBFD;
display: flex; flex-direction: column; min-width: 0;
overflow-y: auto;
}
#bmInfo .bm-logo {
display: flex; align-items: center; justify-content: center; flex: none;
width: 56px; height: 56px;
margin-bottom: 16px;
}
#bmInfo .bm-logo img { height: 56px; width: 56px; border-radius: 12px; object-fit: contain; display: block; }
#bmInfo .bm-org { font-size: 13px; color: #5f7085; font-weight: 600; margin-bottom: 6px; }
#bmInfo .bm-title { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; color: #152743; line-height: 1.25; margin-bottom: 16px; }
#bmInfo .bm-meta { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #354661; font-weight: 600; margin-bottom: 10px; }
#bmInfo .bm-meta svg { flex: none; color: #5f7085; }
#bmInfo .bm-desc { font-size: 13.5px; color: #5f7085; line-height: 1.55; margin-top: 14px; }
#bmInfo .bm-selection { margin-top: auto; padding-top: 18px; border-top: 1px dashed rgba(20,35,58,.16); font-size: 13.5px; color: #152743; font-weight: 600; display: none; }
#bmInfo .bm-selection.show { display: block; }
#bmInfo .bm-back { margin-top: 16px; background: none; border: none; color: #1E5FBF; font-weight: 700; font-size: 13.5px; cursor: pointer; display: none; align-items: center; gap: 6px; padding: 0; }
#bmInfo .bm-back.show { display: inline-flex; }
#bmRight { position: relative; min-width: 0; }
#bmCloseBtn {
position: absolute; top: 16px; right: 16px; z-index: 3;
width: 34px; height: 34px; border-radius: 50%;
background: #F3F6FB; border: 1px solid rgba(20,35,58,.1); color: #5f7085;
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: background .15s, color .15s;
}
#bmCloseBtn:hover { background: #E3ECFA; color: #152743; }
.bm-pane, #bmCal {
position: absolute; inset: 0; overflow-y: auto;
/* Right padding was clamp(40px,8vw,56px) to clear the close button, but it
left a dead band beside the calendar. The button is only 34px tall, so
only the calendar header needs to dodge it (see .bm-calhead below). */
padding: clamp(18px, 4vw, 34px);
opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
#bmCard.bm-step-calendar #bmCal { opacity: 1; visibility: visible; }
#bmCard.bm-step-slots #bmPaneSlots,
#bmCard.bm-step-details #bmPaneDetails { opacity: 1; visibility: visible; }
/* Calendar */
.bm-calhead { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 22px); margin-bottom: 22px; padding-right: 44px; }
.bm-calhead button { flex: none; background: #F3F6FB; border: 1px solid rgba(20,35,58,.1); width: 32px; height: 32px; border-radius: 9px; color: #152743; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.bm-calhead button:hover:not(:disabled) { background: #E3ECFA; }
.bm-calhead button:disabled { opacity: .35; cursor: default; }
.bm-calhead .bm-month { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; color: #1E5FBF; min-width: 0; text-align: center; white-space: nowrap; }
.bm-calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(2px, 1vw, 6px); text-align: center; }
.bm-calgrid .bm-dow { font-size: 12px; color: #8291a8; font-weight: 700; padding: 6px 0 12px; }
.bm-calgrid .bm-day {
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
border-radius: 50%; font-size: 14px; color: #152743; cursor: pointer; border: none; background: none;
transition: background .15s;
}
.bm-calgrid .bm-day:hover:not(:disabled) { background: #E3ECFA; }
.bm-calgrid .bm-day:disabled { color: #c7d0dc; cursor: default; }
.bm-calgrid .bm-day.bm-today { color: #1E5FBF; font-weight: 700; }
.bm-calgrid .bm-day.bm-selected { background: #1E5FBF; color: #fff; font-weight: 700; }
/* Slots pane */
.bm-pane-title { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.bm-pane-sub { font-size: 13.5px; color: #5f7085; margin-bottom: 20px; }
.bm-slotlist { display: flex; flex-direction: column; gap: 10px; }
.bm-slot {
background: #F3F6FB; border: 1px solid rgba(20,35,58,.12); border-radius: 11px;
padding: 13px 16px; font-size: 14.5px; font-weight: 600; color: #152743;
cursor: pointer; text-align: center; transition: background .15s, border-color .15s;
}
.bm-slot:hover { background: #E3ECFA; border-color: #1E5FBF; }
/* Details form pane */
.bm-field { margin-bottom: 14px; }
.bm-field label { font-size: 13px; color: #5f7085; display: block; margin-bottom: 6px; font-weight: 600; }
.bm-field input, .bm-field textarea {
width: 100%; background: #F3F6FB; border: 1px solid rgba(20,35,58,.14); border-radius: 11px;
padding: 12px; color: #152743; font-size: 14px; outline: none; font-family: inherit;
}
.bm-terms { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; }
.bm-terms input { margin-top: 3px; flex: none; }
.bm-terms label { font-size: 12.5px; color: #5f7085; line-height: 1.55; }
.bm-terms a { color: #1E5FBF; font-weight: 600; }
@media (max-width: 760px) {
#bookingModal { padding: 0 !important; }
/* Every step, including bm-step-calendar — it was missing here, so the
calendar kept its desktop 700px width and two-column grid on phones,
leaving the card narrow with a gap down the side. */
#bmCard,
#bmCard.bm-step-calendar,
#bmCard.bm-step-slots,
#bmCard.bm-step-details {
grid-template-columns: 1fr; grid-template-rows: auto 1fr;
border-radius: 0; width: 100%; max-width: 100%; min-height: 0;
/* dvh tracks the collapsing address bar; vh is the fallback. */
height: 100vh; height: 100dvh; max-height: 100dvh;
}
#bmInfo {
min-width: 0; border-right: none; border-bottom: 1px solid rgba(20,35,58,.1);
padding: 16px 20px 14px; overflow-y: visible;
/* Header is a fixed band; the step pane below it gets the rest and
scrolls on its own, so a long title can't squeeze the calendar out. */
flex: none;
}
#bmInfo .bm-logo { width: 44px; height: 44px; margin-bottom: 10px; }
#bmInfo .bm-logo img { width: 44px; height: 44px; border-radius: 10px; }
#bmInfo .bm-title { font-size: 17px; margin-bottom: 8px; }
#bmInfo .bm-meta { display: inline-flex; margin: 0 14px 0 0; font-size: 13px; }
#bmInfo .bm-desc { display: none; }
#bmInfo .bm-selection { margin-top: 10px; padding-top: 10px; }
#bmRight { min-width: 0; min-height: 0; }
#bmCloseBtn { top: 12px; right: 12px; width: 32px; height: 32px; }
/* Even padding: the 50px right gutter to clear the close button left an
empty strip beside the slot list. Only the headings need to dodge it. */
.bm-pane, #bmCal { padding: 20px; }
.bm-pane .bm-pane-title, .bm-pane .bm-pane-sub { padding-right: 44px; }
/* Centre the calendar in the tall pane instead of pinning it to the top,
which left a large blank area underneath on phones. */
#bmCal { display: flex; flex-direction: column; justify-content: center; }
.bm-calhead { gap: 14px; margin-bottom: 18px; padding-right: 44px; }
.bm-calhead .bm-month { font-size: 16px; min-width: 0; flex: 1; }
.bm-calgrid { gap: 4px; }
/* Base already sets aspect-ratio + centring; just keep the type legible. */
.bm-calgrid .bm-day { font-size: 14px; }
.bm-calgrid .bm-dow { font-size: 11px; padding: 4px 0 8px; }
.bm-pane-title { font-size: 16px; }
/* Comfortable thumb targets for the time slots. */
.bm-slot { padding: 15px 16px; font-size: 15px; }
.bm-slotlist { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) { .team-inner { transition: none; } }
/* ==========================================================================
EXTRACTED INLINE STYLES
Declarations below are copied verbatim from the style="" attributes they
replace, so rendering is unchanged. Grouped by the component they belong to.
========================================================================== */
/* ── Shared layout primitives ── */
.page-shell { background:#fff; min-height:100vh; overflow-x:clip; color:#152743; }
.wrap-1200 { max-width:1200px; margin:0 auto; }
.wrap-1280 { max-width:1280px; margin:0 auto; }
/* ── Navbar ── */
.nav-row { display:flex; align-items:stretch; gap:24px; }
.nav-logo { display:flex; align-items:center; gap:12px; cursor:pointer; padding-left:24px; flex:none; }
/* Badge box stays 66px (keeps .nav-logo's layout width unchanged); the img
inside is sized up and allowed to overflow it slightly so the mark reads
bigger without pushing the navbar's own height out. */
.nav-logo-badge { width:66px; height:66px; display:flex; align-items:center; justify-content:center; flex:none; overflow:visible; }
.nav-logo-badge img { height:84px; width:84px; border-radius:16px; display:block; }
.nav-logo-text { display:flex; flex-direction:column; line-height:1.15; }
.nav-logo-name { font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:700; color:#0E2A52; letter-spacing:-.01em; }
.nav-logo-sub { font-size:11px; font-weight:600; color:#5a6980; letter-spacing:.08em; }
.nav-desktop { flex:1; display:flex; flex-direction:column; min-width:0; }
.nav-links-row { display:flex; align-items:center; justify-content:flex-end; gap:26px; padding:15px 24px 15px 0; }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-item-caret { display:flex; align-items:center; gap:5px; }
.svc-icon-blue { background:#EFF6FF; }
.btn-book-nav { background:linear-gradient(90deg,#1E5FBF,#3B82D6); color:#fff; border:none; padding:11px 22px; border-radius:999px; font-weight:700; font-size:14.5px; cursor:pointer; box-shadow:0 10px 26px -10px rgba(30,95,191,.5); white-space:nowrap; flex:none; }
/* ── Navbar info band ── */
.nav-band-outer { display:flex; justify-content:flex-end; margin-top:auto; }
.nav-band { display:flex; align-items:center; gap:15px; background:linear-gradient(90deg,#123563,#1E5FBF); border-top-left-radius:16px; border-bottom-right-radius:21px; padding:9px 26px; font-size:13px; }
.nav-band-item { display:flex; align-items:center; gap:8px; color:#eaf4ff; font-weight:600; }
.nav-band-dot { width:8px; height:8px; border-radius:50%; background:#F2A24C; box-shadow:0 0 8px #F2A24C; animation:pulseGlow 2.4s ease-in-out infinite; }
.nav-band-sep { color:rgba(255,255,255,.4); }
.nav-band-hours { display:flex; align-items:center; gap:7px; color:#cfe0f5; }
.nav-band-tel { color:#fff; font-weight:700; display:flex; align-items:center; gap:7px; transition:color .2s; }
/* Keep band links light on the dark gradient — the global a:hover navy is
almost the band's own colour, which made them read as invisible. */
.nav-band-tel:hover { color:#F2A24C; }
.nav-band-rule { width:1px; height:16px; background:rgba(255,255,255,.25); margin:0 2px; }
.nav-band-social { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.3); color:#fff; transition:background .2s, border-color .2s, color .2s; }
.nav-band-social:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.55); color:#fff; }
/* ── Mobile drawer ── */
.drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.drawer-brand { display:flex; align-items:center; gap:10px; }
.drawer-badge { width:40px; height:40px; display:flex; align-items:center; justify-content:center; flex:none; }
.drawer-badge img { height:40px; width:40px; border-radius:9px; }
.drawer-name { font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:700; color:#0E2A52; }
.drawer-close { background:#F3F6FB; border:none; width:38px; height:38px; border-radius:10px; color:#0E2A52; font-size:18px; cursor:pointer; }
/* ── Footer ── */
.site-footer { position:relative; background:#070E1A; color:#ffffff; overflow:hidden; margin-top:auto; }
.site-footer-dots { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:22px 22px; opacity:.6; }
.site-footer-inner { position:relative; max-width:1200px; margin:0 auto; padding:64px 32px 32px; }
.nl-banner { background:linear-gradient(120deg,#0E2A52,#1747A6); border-radius:22px; padding:40px; display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center; margin-bottom:56px; box-shadow:0 30px 70px -34px rgba(0,0,0,.7); position:relative; overflow:hidden; }
.nl-col { position:relative; }
.nl-title { font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:600; color:#fff; margin-bottom:8px; }
.nl-copy { font-size:14.5px; color:#ffffff; margin:0; line-height:1.6; }
.nl-form { display:flex; gap:10px; background:#fff; border-radius:12px; padding:6px; box-shadow:0 14px 30px -16px rgba(0,0,0,.5); }
.nl-input { flex:1; background:transparent; border:none; outline:none; color:#152743; font-size:14.5px; padding:10px 12px; }
.nl-btn { background:linear-gradient(90deg,#1E5FBF,#3B82D6); color:#fff; border:none; padding:12px 22px; border-radius:9px; font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-logo { height:135px; width:auto; border-radius:18px; display:block; margin-bottom:20px; }
.footer-blurb { font-size:14px; color:#ffffff; line-height:1.6; margin:0 0 20px; max-width:320px; }
.footer-head { font-size:12px; letter-spacing:.2em; color:#ffffff; font-weight:700; margin-bottom:16px; }
.footer-links { display:flex; flex-direction:column; gap:11px; font-size:14.5px; color:#ffffff; }
.footer-links a { color:#ffffff; }
.footer-call { display:inline-flex; align-items:center; gap:9px; background:linear-gradient(90deg,#1E5FBF,#3B82D6); color:#fff; padding:13px 28px; border-radius:999px; font-weight:700; font-size:15px; margin-bottom:12px; }
.footer-email { font-size:14px; color:#ffffff; margin-top:6px; }
.footer-hours { font-size:13.5px; color:#ffffff; margin-top:12px; line-height:1.6; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:24px; flex-wrap:wrap; }
.footer-copy { font-size:13px; color:#ffffff; }
.footer-credit { font-size:13px; color:#ffffff; margin-left:auto; }
.footer-credit a { color:#3B82D6; font-weight:700; }
.scroll-top { position:fixed; bottom:28px; right:28px; z-index:70; width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#1E5FBF,#3B82D6); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 14px 30px -10px rgba(20,45,90,.5); }
/* Mobile equivalents of the [style*=] rules these elements used to match. */
@media (max-width: 860px) {
.site-footer-inner { padding-left:18px !important; padding-right:18px !important; }
.nl-banner { grid-template-columns:1fr !important; }
.footer-grid { grid-template-columns:repeat(2,1fr) !important; }
.nl-title { font-size:21px !important; }
}
/* Phone footer: brand block centred full-width, the two link columns share a
row, then emergencies full-width. At 2 equal columns the brand column was
too narrow and the blurb wrapped one or two words per line. */
@media (max-width: 640px) {
.footer-grid {
grid-template-columns:repeat(2,1fr) !important;
gap:32px 20px;
text-align:center;
}
/* 1st child = brand, 2nd = COMPANY, 3rd = SERVICES, 4th = emergencies */
.footer-grid > :nth-child(1),
.footer-grid > :nth-child(4) { grid-column:1 / -1; }
.footer-logo { margin-left:auto; margin-right:auto; }
.footer-blurb { max-width:none; margin-left:auto; margin-right:auto; }
/* Link columns stay centred under their own heading. */
.footer-grid > :nth-child(2) .footer-links,
.footer-grid > :nth-child(3) .footer-links { align-items:center; }
.footer-bottom { flex-direction:column; justify-content:center; text-align:center; gap:8px; }
.footer-copy, .footer-credit { margin-left:0; width:100%; }
}
/* ── Booking modal shell ──
display is deliberately left as an inline style on #bookingModal: main.js
toggles it between none/flex, and an inline value is what that JS reads
and writes. Only the static properties live here. */
#bookingModal { position:fixed; inset:0; z-index:10000; align-items:center; justify-content:center; padding:16px; overflow-y:auto; }
.bm-backdrop { position:absolute; inset:0; z-index:1; background:rgba(6,13,24,.75); backdrop-filter:blur(6px); }
.bm-submit { width:100%; }
.bm-submit { background:linear-gradient(90deg,#1E5FBF,#3B82D6); color:#fff; border:none; padding:14px; border-radius:11px; font-weight:700; font-size:15px; cursor:pointer; margin-top:4px; }
/* ==========================================================================
INDEX — extracted inline styles (declarations copied verbatim)
========================================================================== */
/* ── Hero ── */
.hero { position:relative; overflow:hidden; min-height:100vh; display:flex; flex-direction:column; justify-content:center; color:#EAF1FA; background:#060D18; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-scrim-x { position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,13,24,.72) 0%,rgba(6,13,24,.34) 48%,rgba(6,13,24,.08) 100%); }
.hero-scrim-y { position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,13,24,.4) 0%,transparent 24%,transparent 58%,rgba(6,13,24,.85) 100%); }
.hero-inner { position:relative; max-width:1200px; margin:0 auto; width:100%; padding:158px 32px 188px; display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center; }
.hero-h1 { font-family:'Space Grotesk',sans-serif; font-size:62px; line-height:1.03; font-weight:600; letter-spacing:-.02em; margin:0 0 22px; }
.hero-sheen-grad { font-style:italic; background:linear-gradient(90deg,#1E5FBF,#6AA8E8,#3B82D6); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-lede { font-size:17.5px; line-height:1.6; color:#a7b8ce; max-width:500px; margin:0 0 30px; }
.hero-usps { display:flex; gap:26px; flex-wrap:wrap; margin-bottom:30px; }
.hero-usp { display:flex; align-items:center; gap:11px; }
.hero-usp-icon { width:38px; height:38px; border-radius:10px; background:rgba(59,130,214,.16); display:flex; align-items:center; justify-content:center; color:#3B82D6; }
.hero-usp-text { font-size:14.5px; color:#c3d2e6; }
.hero-rating { display:flex; align-items:center; gap:14px; }
.hero-avatars { display:flex; align-items:center; }
.hero-avatar { width:38px; height:38px; border-radius:50%; border:2px solid #0b1626; display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; }
.hero-avatar + .hero-avatar { margin-left:-10px; }
.hero-avatar-1 { background:linear-gradient(135deg,#1E5FBF,#3B82D6); }
.hero-avatar-2 { background:linear-gradient(135deg,#0891B2,#22D3EE); }
.hero-avatar-3 { background:linear-gradient(135deg,#E0872B,#F2A24C); }
.hero-rating-text { font-size:13.5px; color:#8FA1BB; }
.hero-stars { color:#F2A24C; letter-spacing:1px; }
.hero-rating-text b { color:#EAF1FA; }
/* ── Hero quote card ── */
.hero-card { background:rgba(9,17,30,.66); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:28px; box-shadow:0 30px 70px -24px rgba(0,0,0,.75); position:relative; }
.hero-card-accent { position:absolute; top:0; left:28px; right:28px; height:3px; background:linear-gradient(90deg,#1E5FBF,#3B82D6); border-radius:0 0 4px 4px; }
.hero-card-title { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:600; margin-bottom:4px; color:#EAF1FA; }
.hero-card-sub { font-size:13.5px; color:#8FA1BB; margin:0 0 20px; }
.hero-form { display:flex; flex-direction:column; gap:12px; }
.hero-field { width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:11px; padding:13px 14px; color:#EAF1FA; font-size:14.5px; outline:none; }
.hero-field-2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hero-opt { color:#0b1524; }
.hero-submit { background:linear-gradient(90deg,#1E5FBF,#3B82D6); color:#ffffff; border:none; padding:15px; border-radius:11px; font-weight:700; font-size:15px; text-align:center; cursor:pointer; margin-top:2px; }
.hero-callnote { text-align:center; font-size:12.5px; color:#8FA1BB; }
.hero-callnote a { color:#F2A24C; font-weight:600; }
/* ── Brand marquee ── */
.marquee-wrap { position:absolute; left:0; right:0; bottom:0; padding:14px 0 24px; z-index:2; }
.marquee-label { text-align:center; font-size:11px; letter-spacing:.26em; color:#8FA1BB; font-weight:700; margin-bottom:14px; }
.marquee-mask { overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.marquee-track { display:flex; gap:20px; width:max-content; animation:marquee 32s linear infinite; will-change:transform; }
.marquee-tile { flex:none; width:140px; height:58px; padding:0 26px; background:#fff; border-radius:13px; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 26px -14px rgba(0,0,0,.7); }
.marquee-tile img { height:28px; width:auto; max-width:100%; display:block; }
.marquee-wordmark { font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:700; color:#0E2A52; letter-spacing:.02em; white-space:nowrap; }
/* Mobile equivalents for hero/marquee (previously matched via [style*=]) */
@media (max-width: 860px) {
.hero-inner { grid-template-columns:1fr !important; padding-left:18px !important; padding-right:18px !important; padding-top:116px !important; }
.hero-h1 { font-size:34px !important; }
.hero-field-2col { grid-template-columns:1fr !important; }
}
/* ── Story / about section ── */
.story { max-width:1200px; margin:0 auto; padding:80px 32px 84px; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.story-cards { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.story-card { background:#F0F4FA; border:1px solid rgba(20,35,58,.07); border-radius:18px; padding:28px; }
.story-card-icon { width:48px; height:48px; border-radius:12px; background:#E3ECFA; display:flex; align-items:center; justify-content:center; color:#1747A6; margin-bottom:44px; }
.story-card-text { font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:600; color:#152743; line-height:1.3; }
.story-card-num { font-family:'Space Grotesk',sans-serif; font-size:42px; font-weight:700; color:#1747A6; line-height:1; margin-bottom:16px; }
.story-h2 { font-family:'Space Grotesk',sans-serif; font-size:40px; font-weight:600; margin:0 0 22px; line-height:1.08; letter-spacing:-.02em; color:#152743; }
.story-p { font-size:16px; line-height:1.7; color:#4f5f77; margin:0 0 18px; }
.story-p-last { font-size:16px; line-height:1.7; color:#4f5f77; margin:0 0 30px; }
.story-cta { display:inline-block; background:linear-gradient(90deg,#1E5FBF,#3B82D6); color:#fff; padding:15px 32px; border-radius:11px; font-weight:700; font-size:15px; }
@media (max-width: 860px) {
.story { grid-template-columns:1fr !important; padding-left:18px !important; padding-right:18px !important; }
.story-cards { grid-template-columns:1fr !important; }
.story-h2 { font-size:26px !important; }
.story-card-num { font-size:28px !important; }
}
/* ── Stats band ── */
.stats-wrap { max-width:1200px; margin:0 auto; padding:30px 32px 46px; }
.stats-card { position:relative; overflow:hidden; border-radius:26px; box-shadow:0 28px 56px -30px rgba(12,32,54,.65); }
.stats-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.stats-scrim { position:absolute; inset:0; background:linear-gradient(120deg,rgba(14,42,82,.95) 0%,rgba(23,71,166,.88) 60%,rgba(30,95,191,.85) 100%); }
.stats-band { position:relative; padding:46px 40px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.stat-num { font-family:'Space Grotesk',sans-serif; font-size:46px; font-weight:700; color:#fff; }
.stat-num-warm { color:#FFCE9A; }
.stat-label { font-size:14px; color:#cfe0f5; margin-top:6px; }
/* ── Services slider ── */
.svc-section { background:#eee; }
.svc-section-inner { max-width:1200px; margin:0 auto; padding:78px 32px 70px; }
.svc-head { text-align:center; max-width:640px; margin:0 auto 30px; }
.svc-h2 { font-family:'Space Grotesk',sans-serif; font-size:40px; font-weight:600; margin:0; letter-spacing:-.01em; color:#152743; }
.svc-slider-wrap { position:relative; }
.svc-slider { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 4px 18px; scrollbar-width:none; }
.svc-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid rgba(14,42,82,.15); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 24px -12px rgba(12,32,54,.4); color:#152743; }
.svc-arrow-prev { left:-16px; }
.svc-arrow-next { right:-16px; }
@media (max-width: 860px) {
.stats-wrap, .svc-section-inner { padding-left:18px !important; padding-right:18px !important; }
.stats-band { grid-template-columns:repeat(2,1fr) !important; }
.stat-num { font-size:30px !important; }
.svc-h2 { font-size:26px !important; }
}
/* ── Why choose us / reason cards ── */
.reasons-section { background:#fff; border-top:1px solid rgba(20,35,58,.07); }
.reasons-inner { max-width:1200px; margin:0 auto; padding:72px 32px; }
.reasons-head { text-align:center; max-width:620px; margin:0 auto 44px; }
.reasons-h2 { font-family:'Space Grotesk',sans-serif; font-size:38px; font-weight:600; margin:0 0 12px; color:#152743; }
.reasons-sub { font-size:15.5px; color:#5a6980; margin:0; line-height:1.6; }
.reasons-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
/* The "warm" variant was built from PHP-interpolated colours; it is a
modifier class now so no inline style is needed. */
.reason-card { background:#F3F6FB; border:1px solid rgba(20,35,58,.08); border-radius:16px; padding:26px; }
.reason-card.is-warm { background:#FFF6EA; border-color:rgba(242,162,76,.35); }
.reason-icon { width:46px; height:46px; border-radius:12px; background:#E3ECFA; display:flex; align-items:center; justify-content:center; color:#1E5FBF; margin-bottom:16px; position:relative; z-index:1; }
.reason-card.is-warm .reason-icon { background:#FBE7CC; color:#E0872B; }
.reason-title { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:600; margin-bottom:7px; color:#152743; position:relative; z-index:1; }
.reason-desc { font-size:14px; color:#5a6980; margin:0; line-height:1.55; position:relative; z-index:1; }
@media (max-width: 860px) {
.reasons-inner { padding-left:18px !important; padding-right:18px !important; }
.reasons-grid { grid-template-columns:1fr !important; }
.reasons-h2 { font-size:25px !important; }
}
/* ── ISO certification slider ── */
.iso-section { background:#0B1E3C; overflow:hidden; }
.iso-inner { max-width:1280px; margin:0 auto; padding:34px 32px; display:flex; align-items:center; gap:10px; }
.iso-label { flex:none; font-size:19px; line-height:1.4; color:#EAF1FA; font-weight:500; }
.iso-mask { flex:1; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.iso-track { display:flex; gap:22px; width:max-content; align-items:center; animation:marquee 26s linear infinite; }
.iso-tile { flex:none; width:132px; height:80px; background:#fff; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.iso-tile img { height:64px; width:auto; display:block; }
/* ── Testimonials ── */
.tst-section { background:#fff; border-top:1px solid rgba(20,35,58,.07); overflow:hidden; }
.tst-inner { max-width:1200px; margin:0 auto; padding:78px 32px 30px; }
.tst-head { text-align:center; max-width:640px; margin:0 auto 46px; }
.tst-h2 { font-family:'Space Grotesk',sans-serif; font-size:40px; font-weight:600; margin:0 0 12px; letter-spacing:-.01em; color:#152743; }
.tst-sub { font-size:15.5px; color:#5a6980; margin:0; line-height:1.6; }
@media (max-width: 860px) {
.iso-inner, .tst-inner { padding-left:18px !important; padding-right:18px !important; }
.tst-h2 { font-size:26px !important; }
}
/* ── Testimonial cards (built in PHP, rendered into the marquee) ── */
.tst-card { flex:none; width:400px; background:#F7F9FC; border:1px solid rgba(20,35,58,.08); border-radius:18px; padding:26px; box-shadow:0 14px 34px -28px rgba(12,32,54,.5); }
.tst-stars { color:#F2A24C; letter-spacing:2px; font-size:14px; margin-bottom:14px; }
.tst-text { font-size:14.5px; line-height:1.65; color:#354661; margin:0 0 20px; }
.tst-person { display:flex; align-items:center; gap:12px; }
.tst-avatar { width:44px; height:44px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; }
.tst-name { font-family:'Space Grotesk',sans-serif; font-size:14.5px; font-weight:600; color:#152743; }
.tst-loc { font-size:12.5px; color:#5f6f86; }
.tst-mask { overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.tst-track { display:flex; gap:20px; width:max-content; animation:marquee 46s linear infinite; }
.tst-track-rev { display:flex; gap:20px; width:max-content; animation:marqueeR 46s linear infinite; }
/* ── FAQ ── */
.faq-section { background:#eee; }
.faq-inner { max-width:1200px; margin:0 auto; padding:78px 32px; display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:start; }
.faq-h2 { font-family:'Space Grotesk',sans-serif; font-size:38px; font-weight:600; margin:0 0 20px; letter-spacing:-.01em; color:#152743; }
.faq-lede { font-size:15px; color:#5a6980; line-height:1.65; margin:0 0 26px; }
.faq-callcard { background:linear-gradient(135deg,#1747A6,#1E5FBF); border-radius:18px; padding:26px; color:#fff; box-shadow:0 24px 50px -30px rgba(23,71,166,.8); }
.faq-callcard-label { font-size:13px; color:#cfe0f5; margin-bottom:6px; }
.faq-callcard-tel { font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:600; color:#fff; }
.faq-callcard-btn { margin-top:16px; width:100%; background:#fff; color:#1747A6; border:none; padding:13px; border-radius:11px; font-weight:700; font-size:14.5px; cursor:pointer; }
.faq-list { display:flex; flex-direction:column; gap:12px; }
.faq-item { background:#fff; border:1px solid rgba(20,35,58,.1); border-radius:14px; padding:20px 22px; cursor:pointer; box-shadow:0 10px 30px -26px rgba(20,45,90,.5); }
.faq-callcard { box-shadow:0 24px 50px -30px rgba(30,110,208,.7); }
.faq-q-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq-q { font-weight:600; font-size:16px; color:#152743; }
.faq-icon { color:#1E5FBF; font-size:22px; font-weight:400; flex:none; }
.faq-a { font-size:14.5px; line-height:1.65; color:#5a6980; margin:14px 0 0; }
@media (max-width: 860px) {
.faq-inner { grid-template-columns:1fr !important; padding-left:18px !important; padding-right:18px !important; }
.faq-h2 { font-size:25px !important; }
.tst-card { width:290px !important; }
}
/* Avatar colours vary per person, so the two stops arrive as custom
properties set on the element; everything else is static. */
.tst-avatar { background:linear-gradient(135deg,var(--av1),var(--av2)); box-shadow:0 8px 18px -8px var(--av-shadow); }
.tst-mask-1 { margin-bottom:20px; }
.tst-mask-2 { padding-bottom:78px; }
/* ── Recent news / blog teaser ── */
.news-section { background:#fff; border-top:1px solid rgba(20,35,58,.07); }
.news-inner { max-width:1200px; margin:0 auto; padding:78px 32px 80px; }
.news-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:36px; }
.news-head-copy { max-width:600px; }
.news-h2 { font-family:'Space Grotesk',sans-serif; font-size:38px; font-weight:600; margin:0 0 10px; letter-spacing:-.01em; color:#152743; }
.news-sub { font-size:15.5px; color:#5a6980; margin:0; line-height:1.6; }
.news-all { flex:none; display:inline-flex; align-items:center; gap:8px; background:#F3F6FB; border:1px solid rgba(20,35,58,.1); color:#152743; padding:13px 24px; border-radius:11px; font-weight:700; font-size:14.5px; }
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
/* ── CTA band ── */
.cta-band { position:relative; overflow:hidden; }
.cta-bg { position:absolute; inset:0; background:linear-gradient(120deg,#0E2A52,#1747A6); }
.cta-glow { position:absolute; top:-80px; right:12%; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(59,130,214,.4),transparent 70%); filter:blur(24px); }
.cta-inner { position:relative; max-width:1200px; margin:0 auto; padding:66px 32px; text-align:center; color:#fff; }
.cta-h2 { font-family:'Space Grotesk',sans-serif; font-size:42px; font-weight:600; margin:0 0 14px; letter-spacing:-.01em; }
.cta-sub { font-size:16px; color:#cfe0f5; margin:0 auto 30px; max-width:560px; line-height:1.6; }
.cta-actions { display:inline-flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; }
.cta-btn-solid { background:#fff; color:#0E2A52; border:none; padding:16px 32px; border-radius:999px; font-weight:700; font-size:15.5px; cursor:pointer; }
.cta-btn-ghost { border:1.5px solid rgba(255,255,255,.5); color:#fff; padding:15px 30px; border-radius:999px; font-weight:600; font-size:15.5px; }
@media (max-width: 860px) {
.news-inner, .cta-inner { padding-left:18px !important; padding-right:18px !important; }
.news-grid { grid-template-columns:1fr !important; }
.news-h2 { font-size:25px !important; }
.cta-h2 { font-size:28px !important; }
}
/* ── Service slider cards (built by renderSvcCards in index.php) ── */
.svc-card { flex:none; width:calc(33.333% - 14px); min-width:330px; scroll-snap-align:start; background:#fff; border:1px solid rgba(14,42,82,.12); border-radius:20px; overflow:hidden; box-shadow:0 14px 34px -26px rgba(12,32,54,.5); transition:transform .25s, box-shadow .25s; text-decoration:none; display:flex; flex-direction:column; }
/* Replaces the inline onmouseover/onmouseout handlers the template carried. */
.svc-card:hover { transform:translateY(-6px); box-shadow:0 24px 44px -22px rgba(12,32,54,.4); }
.svc-card-media { height:230px; overflow:hidden; }
.svc-card-media img { width:100%; height:100%; object-fit:cover; }
.svc-card-body { padding:30px 26px 32px; display:flex; flex-direction:column; flex:1; }
.svc-card-title { font-family:'Space Grotesk',sans-serif; font-size:21px; font-weight:600; color:#152743; margin-bottom:8px; }
.svc-card-desc { font-size:14.5px; color:#5a6980; line-height:1.6; margin:0 0 18px; flex:1; }
.svc-card-link { font-size:14px; font-weight:700; color:#1747A6; }
@media (prefers-reduced-motion: reduce) { .svc-card { transition:none; } .svc-card:hover { transform:none; } }
/* ==========================================================================
ABOUT — extracted inline styles
========================================================================== */
.about-hero { position:relative; overflow:hidden; color:#EAF1FA; background:#060D18; }
.about-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; opacity:.72; }
.about-hero-scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,13,24,.42),rgba(6,13,24,.6)); }
.about-hero-inner { position:relative; max-width:1200px; margin:0 auto; padding:196px 32px 66px; text-align:center; }
.about-eyebrow { font-size:12px; letter-spacing:.32em; font-weight:700; color:#3B82D6; margin-bottom:16px; }
.about-h1 { font-family:'Space Grotesk',sans-serif; font-size:52px; font-weight:600; letter-spacing:-.02em; margin:0 0 16px; }
.about-lede { font-size:17px; color:#a7b8ce; max-width:620px; margin:0 auto; line-height:1.6; }
.hist { max-width:1200px; margin:0 auto; padding:74px 32px; display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.hist-eyebrow { font-size:12px; letter-spacing:.32em; font-weight:700; color:#1747A6; margin-bottom:14px; }
.hist-h2 { font-family:'Space Grotesk',sans-serif; font-size:32px; font-weight:600; margin:0 0 18px; line-height:1.14; letter-spacing:-.01em; color:#152743; }
.hist-p { font-size:15.5px; line-height:1.7; color:#4f5f77; margin:0 0 16px; }
.hist-p-last { font-size:15.5px; line-height:1.7; color:#4f5f77; margin:0; }
.hist-media { position:relative; padding:14px; }
.hist-frame { border-radius:20px; overflow:hidden; height:420px; box-shadow:0 30px 60px -34px rgba(20,45,90,.6); }
.hist-frame img { width:100%; height:100%; object-fit:cover; }
.why-section { background:#F3F6FB; border-top:1px solid rgba(20,35,58,.07); border-bottom:1px solid rgba(20,35,58,.07); }
.why-inner { max-width:1200px; margin:0 auto; padding:78px 32px; }
.why-head { text-align:center; max-width:640px; margin:0 auto 46px; }
.why-h2 { font-family:'Space Grotesk',sans-serif; font-size:38px; font-weight:600; margin:0 0 12px; color:#152743; }
.why-sub { font-size:15.5px; color:#5a6980; margin:0; line-height:1.6; }
@media (max-width: 860px) {
.about-hero-inner, .hist, .why-inner { padding-left:18px !important; padding-right:18px !important; }
.about-hero-inner { padding-top:116px !important; }
.about-h1 { font-size:30px !important; }
.hist { grid-template-columns:1fr !important; }
.hist-h2 { font-size:22px !important; }
.hist-frame { height:250px !important; }
.why-h2 { font-size:25px !important; }
}
/* About's cards sit on a grey section, so their default fill is white
(index's sit on white and use #F3F6FB). */
.reason-card.on-grey { background:#fff; }
/* About's testimonial band has no top rule (index's does). */
.tst-section.no-rule { border-top:none; }
/* ==========================================================================
SERVICE DETAIL — extracted inline styles
Per-service accent colours arrive as custom properties on .svcpage
(set once from PHP); everything else is static.
========================================================================== */
.svc-hero { position:relative; overflow:hidden; color:#EAF1FA; background:#060D18; }
.svc-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.66; }
.svc-hero-scrim-x { position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,13,24,.72) 0%,rgba(6,13,24,.34) 55%,rgba(6,13,24,.08) 100%); }
.svc-hero-scrim-y { position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,13,24,.38) 0%,transparent 30%,transparent 60%,rgba(6,13,24,.82) 100%); }
.svc-hero-inner { position:relative; max-width:1200px; margin:0 auto; padding:196px 32px 88px; }
.svc-badge { display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:7px 16px; font-size:12px; letter-spacing:.2em; color:#c3d2e6; font-weight:700; margin-bottom:22px; }
.svc-badge-dot { width:7px; height:7px; border-radius:50%; background:#1E5FBF; box-shadow:0 0 8px #1E5FBF; }
.svc-hero-sub { font-size:17px; line-height:1.65; color:#a7b8ce; max-width:540px; margin:0 0 36px; }
.svc-hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.svc-book-btn { background:linear-gradient(90deg,#1E5FBF,#3B82D6); color:#fff; border:none; padding:14px 30px; border-radius:999px; font-weight:700; font-size:15px; cursor:pointer; box-shadow:0 12px 28px -10px #1E5FBF88; }
@media (max-width: 860px) {
.svc-hero-inner { padding-left:18px !important; padding-right:18px !important; padding-top:116px !important; }
}
/* Service H1: fluid size, and the reveal animation makes each letter an
inline-block, so allow the split letters to wrap or long accent phrases
("energy-smart cooling") overflow narrow screens. */
.svc-h1 { font-family:'Space Grotesk',sans-serif; font-size:clamp(28px,6.2vw,52px); line-height:1.1; font-weight:600; letter-spacing:-.02em; margin:0 0 20px; max-width:640px; overflow-wrap:break-word; }
.svc-hero-h1 .reveal-letter { white-space:pre-wrap; }
.svc-hero-h1 .accent-word { display:inline; color:#1E5FBF; }
.svc-hero-tel { display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; border:1px solid rgba(255,255,255,.2); padding:14px 26px; border-radius:999px; font-weight:600; font-size:15px; }
/* ── Service detail: trust strip, overview, what's included ── */
.svc-trust-item { display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:#3f4f68; }
.svc-trust-item svg { stroke:var(--accent); }
.svc-overview { max-width:1200px; margin:0 auto; padding:74px 32px; display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.svc-overview-frame { border-radius:20px; overflow:hidden; height:400px; box-shadow:0 30px 60px -34px rgba(20,45,90,.6); }
.svc-overview-frame img { width:100%; height:100%; object-fit:cover; }
.svc-overview-h2 { font-family:'Space Grotesk',sans-serif; font-size:32px; font-weight:600; margin:0 0 14px; color:#152743; }
.svc-overview-p { font-size:15.5px; line-height:1.65; color:#4f5f77; margin:0 0 22px; }
.svc-bullets { display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-bottom:26px; }
.svc-bullet { display:flex; gap:9px; font-size:14px; color:#3f4f68; }
.svc-bullet-tick { color:var(--accent); }
.svc-overview-btn { background:linear-gradient(90deg,#1E5FBF,#3B82D6); color:#fff; border:none; padding:14px 28px; border-radius:11px; font-weight:700; font-size:14.5px; cursor:pointer; }
.incl-section { background:#F3F6FB; border-top:1px solid rgba(20,35,58,.07); border-bottom:1px solid rgba(20,35,58,.07); }
.incl-inner { max-width:1200px; margin:0 auto; padding:60px 32px; }
.incl-head { text-align:center; margin-bottom:44px; }
.incl-eyebrow { font-size:12px; letter-spacing:.28em; font-weight:700; color:#1E5FBF; margin-bottom:10px; }
.incl-h2 { font-family:'Space Grotesk',sans-serif; font-size:36px; font-weight:600; color:#152743; margin:0; }
.incl-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.incl-card { background:#fff; border-radius:20px; padding:28px; border:1px solid rgba(20,35,58,.08); box-shadow:0 8px 28px -10px rgba(10,20,40,.1); transition:transform .2s; }
.incl-card:hover { transform:translateY(-4px); }
.incl-icon { width:52px; height:52px; border-radius:14px; background:var(--accent-bg); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.incl-icon svg { stroke:var(--accent); }
.incl-title { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:600; color:#152743; margin:0 0 10px; }
.incl-desc { font-size:13.5px; color:#5f7085; line-height:1.6; margin:0 0 16px; }
.incl-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; }
.incl-li { display:flex; gap:8px; font-size:13px; color:#3f4f68; }
.incl-li-tick { color:var(--accent); font-weight:700; }
/* Tag pill on service pages: the original used the fixed brand blue
(#1E5FBF) with 3d/0f alpha suffixes, not the per-service accent. */
.tag-pill.is-accent { border-color:#1E5FBF3d; color:#1E5FBF; background:#1E5FBF0f; }
.tag-pill.is-accent .dot { background:#1E5FBF; box-shadow:0 0 7px #1E5FBFb3; }
@media (max-width: 860px) {
.svc-overview, .incl-inner { padding-left:18px !important; padding-right:18px !important; }
.svc-overview { grid-template-columns:1fr !important; }
.svc-overview-frame { height:240px !important; }
.svc-overview-h2 { font-size:22px !important; }
.incl-grid { grid-template-columns:1fr !important; }
.incl-h2 { font-size:24px !important; }
}
@media (prefers-reduced-motion: reduce) { .incl-card { transition:none; } .incl-card:hover { transform:none; } }
.svc-trust { background:#fff; border-bottom:1px solid rgba(20,35,58,.08); }
.svc-trust-inner { max-width:1200px; margin:0 auto; padding:22px 32px; display:flex; flex-wrap:wrap; gap:28px; justify-content:center; }
/* ── Service detail: dark feature card + how-it-works timeline ── */
.incl-dark { background:linear-gradient(135deg,#060D18,#0E2A52); border-radius:20px; padding:28px; box-shadow:0 8px 28px -10px rgba(10,20,40,.4); }
.incl-dark-icon { width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.incl-dark-title { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:600; color:#fff; margin:0 0 10px; }
.incl-dark-desc { font-size:13.5px; color:#a7b8ce; line-height:1.6; margin:0 0 22px; }
.incl-dark-cta { display:flex; align-items:center; justify-content:center; gap:9px; background:#F2A24C; color:#3d1f04; border-radius:10px; padding:13px; font-weight:700; font-size:14px; text-decoration:none; }
.steps-wrap { max-width:1200px; margin:0 auto; padding:74px 32px; }
.steps-head { text-align:center; margin-bottom:56px; }
.steps-eyebrow { font-size:12px; letter-spacing:.28em; font-weight:700; color:#1E5FBF; margin-bottom:10px; }
.steps-h2 { font-family:'Space Grotesk',sans-serif; font-size:36px; font-weight:600; color:#152743; margin:0; }
.steps-row { display:flex; align-items:flex-start; }
.step { flex:1; min-width:0; text-align:center; padding:0 8px; position:relative; }
.step-num { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#1E5FBF,#3B82D6); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-family:'Space Grotesk',sans-serif; font-weight:700; color:#fff; font-size:18px; box-shadow:0 10px 24px -10px #1E5FBF99; border:4px solid #fff; position:relative; z-index:1; }
.step-label { font-size:11px; font-weight:700; letter-spacing:.16em; color:#1E5FBF; margin-bottom:6px; }
.step-title { font-family:'Space Grotesk',sans-serif; font-size:16.5px; font-weight:600; color:#152743; margin:0 0 8px; }
@media (max-width: 860px) {
.steps-wrap { padding-left:18px !important; padding-right:18px !important; }
.steps-row { flex-direction:column !important; gap:22px !important; align-items:stretch !important; }
.step { width:100% !important; flex:none !important; padding:0 !important; }
.steps-h2 { font-size:24px !important; }
}
.step-desc { font-size:13.5px; color:#5f7085; line-height:1.6; margin:0; }
.step-conn { flex:none; width:44px; margin-top:26px; display:flex; align-items:center; justify-content:center; gap:2px; }
.step-conn-line { flex:1; height:2px; background:repeating-linear-gradient(90deg,#1E5FBF55 0 6px,transparent 6px 11px); }
.step-conn svg { flex:none; stroke:#1E5FBF; }
@media (max-width: 860px) { .step-conn { display:none !important; } }
/* ── Explore-more cards (each carries its own service accent via --card-accent) ── */
.expl-section { background:#F3F6FB; border-top:1px solid rgba(20,35,58,.07); border-bottom:1px solid rgba(20,35,58,.07); }
.expl-inner { max-width:1200px; margin:0 auto; padding:64px 32px; }
.expl-head { text-align:center; margin-bottom:40px; }
.expl-eyebrow { font-size:12px; letter-spacing:.28em; font-weight:700; color:#1E5FBF; margin-bottom:10px; }
.expl-h2 { font-family:'Space Grotesk',sans-serif; font-size:32px; font-weight:600; color:#152743; margin:0 0 10px; }
.expl-sub { font-size:15px; color:#5f7085; margin:0 auto; max-width:460px; }
.expl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.expl-card { overflow:hidden; background:#fff; border-radius:20px; border:1px solid rgba(20,35,58,.08); text-decoration:none; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; box-shadow:0 10px 28px -18px rgba(10,20,40,.22); }
/* Replaces the inline onmouseover/onmouseout handlers. */
.expl-card:hover { transform:translateY(-6px); box-shadow:0 22px 40px -18px var(--card-accent-55); }
.expl-media { position:relative; height:190px; overflow:hidden; }
.expl-media img { width:100%; height:100%; object-fit:cover; display:block; }
.expl-media-scrim { position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(6,13,24,.6)); }
.expl-badge { position:absolute; bottom:14px; left:16px; width:48px; height:48px; border-radius:13px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px rgba(0,0,0,.4); }
.expl-badge svg { stroke:var(--card-accent); }
.expl-body { padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.expl-name { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:600; color:#152743; }
.expl-blurb { font-size:13.5px; color:#5f7085; line-height:1.6; margin:0; flex:1; }
.expl-link { font-size:13.5px; font-weight:700; color:var(--card-accent); display:flex; align-items:center; gap:6px; margin-top:4px; }
@media (max-width: 860px) {
.expl-inner { padding-left:18px !important; padding-right:18px !important; }
.expl-grid { grid-template-columns:1fr !important; }
.expl-h2 { font-size:22px !important; }
}
@media (prefers-reduced-motion: reduce) { .expl-card { transition:none; } .expl-card:hover { transform:none; } }
.expl-all-wrap { text-align:center; margin-top:36px; }
.expl-all { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid rgba(20,35,58,.12); color:#152743; padding:13px 26px; border-radius:11px; font-weight:700; font-size:14.5px; }
/* ── Service CTA band ── */
.svc-cta { background:linear-gradient(90deg,#1E5FBF,#3B82D6); padding:64px 32px; text-align:center; }
.svc-cta-inner { max-width:700px; margin:0 auto; }
.svc-cta-h2 { font-family:'Space Grotesk',sans-serif; font-size:36px; font-weight:600; color:#fff; margin:0 0 14px; }
.svc-cta-p { font-size:16px; color:rgba(255,255,255,.9); margin:0 0 32px; line-height:1.6; }
.svc-cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.svc-cta-btn { background:#fff; color:#1E5FBF; border:none; padding:15px 32px; border-radius:999px; font-weight:700; font-size:15px; cursor:pointer; box-shadow:0 12px 30px -10px rgba(0,0,0,.3); }
.svc-cta-tel { display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.35); padding:15px 28px; border-radius:999px; font-weight:600; font-size:15px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); text-decoration:none; }
@media (max-width: 860px) { .svc-cta-h2 { font-size:24px !important; } }
/* ==========================================================================
CONTACT — extracted inline styles
========================================================================== */
.ct-hero { position:relative; overflow:hidden; color:#EAF1FA; background:#060D18; }
.ct-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; }
.ct-hero-scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,13,24,.42),rgba(6,13,24,.6)); }
.ct-hero-inner { position:relative; max-width:1200px; margin:0 auto; padding:196px 32px 66px; text-align:center; }
.ct-eyebrow { font-size:12px; letter-spacing:.32em; font-weight:700; color:#3B82D6; margin-bottom:16px; }
.ct-h1 { font-family:'Space Grotesk',sans-serif; font-size:52px; font-weight:600; letter-spacing:-.02em; margin:0 0 16px; }
.ct-lede { font-size:17px; color:#a7b8ce; max-width:600px; margin:0 auto; line-height:1.6; }
.ct-main { max-width:1200px; margin:0 auto; padding:66px 32px; display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start; }
.ct-card { background:#fff; border:1px solid rgba(20,35,58,.1); border-radius:20px; padding:32px; box-shadow:0 24px 54px -34px rgba(20,45,90,.5); }
.ct-card-title { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:600; margin-bottom:6px; color:#152743; }
.ct-card-sub { font-size:14px; color:#7789A0; margin:0 0 22px; }
.ct-form { display:flex; flex-direction:column; gap:14px; }
.ct-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ct-field { width:100%; background:#F3F6FB; border:1px solid rgba(20,35,58,.14); border-radius:11px; padding:14px; color:#152743; font-size:14.5px; outline:none; }
textarea.ct-field { resize:none; }
.ct-submit { background:linear-gradient(90deg,#1E5FBF,#3B82D6); color:#fff; border:none; padding:15px; border-radius:11px; font-weight:700; font-size:15px; text-align:center; cursor:pointer; }
.ct-details { display:flex; flex-direction:column; gap:16px; }
@media (max-width: 860px) {
.ct-hero-inner, .ct-main { padding-left:18px !important; padding-right:18px !important; }
.ct-hero-inner { padding-top:116px !important; }
.ct-h1 { font-size:30px !important; }
.ct-main { grid-template-columns:1fr !important; }
.ct-row2 { grid-template-columns:1fr !important; }
}
.ct-item { background:#fff; border:1px solid rgba(20,35,58,.09); border-radius:16px; padding:22px; display:flex; gap:16px; align-items:flex-start; box-shadow:0 14px 36px -30px rgba(20,45,90,.5); }
.ct-item-plain { background:#fff; border:1px solid rgba(20,35,58,.09); border-radius:16px; padding:22px; box-shadow:0 14px 36px -30px rgba(20,45,90,.5); }
.ct-icon { width:44px; height:44px; border-radius:11px; background:#E3ECFA; display:flex; align-items:center; justify-content:center; color:#1E5FBF; flex:none; }
.ct-icon-warm { background:#FBE7CC; color:#E0872B; }
.ct-label { font-size:12.5px; color:#7789A0; margin-bottom:3px; }
.ct-tel { font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:600; color:#152743; }
.ct-email { font-size:15.5px; font-weight:600; color:#152743; }
.ct-hours { font-size:14.5px; color:#152743; font-weight:500; }
.ct-hours-note { font-size:13px; color:#7789A0; margin-top:2px; }
.ct-area-head { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.ct-areas { display:flex; flex-wrap:wrap; gap:8px; }
.ct-area-chip { font-size:12.5px; color:#3f4f68; background:#F3F6FB; border:1px solid rgba(20,35,58,.1); padding:5px 11px; border-radius:999px; }
/* ==========================================================================
SERVICES INDEX — extracted inline styles
========================================================================== */
.srv-hero-scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,13,24,.42),rgba(6,13,24,.64)); }
.srv-list { background:#F3F6FB; border-bottom:1px solid rgba(20,35,58,.07); }
.srv-list-inner { max-width:1200px; margin:0 auto; padding:70px 32px 80px; }
.srv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.srv-card { overflow:hidden; background:#fff; border-radius:22px; border:1px solid rgba(20,35,58,.08); text-decoration:none; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; box-shadow:0 12px 30px -20px rgba(10,20,40,.25); }
.srv-card:hover { transform:translateY(-6px); box-shadow:0 24px 44px -20px var(--card-accent-55); }
.srv-media { position:relative; height:210px; overflow:hidden; }
.srv-media img { width:100%; height:100%; object-fit:cover; display:block; }
.srv-media-scrim { position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(6,13,24,.72)); }
.srv-media-label { position:absolute; bottom:16px; left:18px; display:flex; align-items:center; gap:11px; }
.srv-badge { width:50px; height:50px; border-radius:13px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px rgba(0,0,0,.5); }
.srv-badge svg { stroke:var(--card-accent); }
.srv-name { font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:600; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.srv-body { padding:24px; display:flex; flex-direction:column; gap:14px; flex:1; }
.srv-blurb { font-size:14.5px; color:#5f7085; line-height:1.65; margin:0; flex:1; }
.srv-link { font-size:13.5px; font-weight:700; color:var(--card-accent); display:flex; align-items:center; gap:6px; margin-top:4px; }
@media (max-width: 860px) {
.srv-list-inner { padding-left:18px !important; padding-right:18px !important; }
.srv-grid { grid-template-columns:1fr !important; }
}
@media (prefers-reduced-motion: reduce) { .srv-card { transition:none; } .srv-card:hover { transform:none; } }
.srv-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.7; }
/* services.php's lede is 620px wide; contact's is 600px. */
.ct-lede.w620 { max-width:620px; }
/* ==========================================================================
BLOG — extracted inline styles
========================================================================== */
.blog-h1 { font-family:'Space Grotesk',sans-serif; font-size:48px; font-weight:600; letter-spacing:-.02em; margin:0 0 16px; }
.blog-list { max-width:1200px; margin:0 auto; padding:64px 32px 80px; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
/* Card built by render_blog_card(); --cat-accent carries the category colour. */
.blog-card { background:#fff; border-radius:18px; overflow:hidden; border:1px solid rgba(20,35,58,.08); text-decoration:none; display:flex; flex-direction:column; box-shadow:0 8px 24px -16px rgba(10,20,40,.18); transition:transform .2s, box-shadow .2s; }
.blog-card:hover { transform:translateY(-5px); box-shadow:0 18px 34px -16px rgba(10,20,40,.28); }
.blog-card-media { height:190px; overflow:hidden; }
.blog-card-media img { width:100%; height:100%; object-fit:cover; display:block; }
.blog-card-body { padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.blog-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.blog-cat { font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--cat-accent); background:var(--cat-accent-14); padding:5px 10px; border-radius:999px; }
.blog-date { font-size:12px; color:#5f6f86; }
.blog-card-title { font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:600; color:#152743; line-height:1.35; }
.blog-excerpt { font-size:13.5px; color:#5a6980; line-height:1.6; margin:0; flex:1; }
.blog-more { font-size:13px; font-weight:700; color:#1E5FBF; display:flex; align-items:center; gap:5px; margin-top:6px; }
.blog-cta-h2 { font-family:'Space Grotesk',sans-serif; font-size:34px; font-weight:600; color:#fff; margin:0 0 14px; }
@media (max-width: 860px) {
.blog-list { padding-left:18px !important; padding-right:18px !important; }
.blog-grid { grid-template-columns:1fr !important; }
.blog-h1 { font-size:28px !important; }
.blog-cta-h2 { font-size:23px !important; }
}
@media (prefers-reduced-motion: reduce) { .blog-card { transition:none; } .blog-card:hover { transform:none; } }
.blog-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.68; }
/* ── Blog post ── */
.bp-hero { position:relative; overflow:hidden; color:#EAF1FA; background:#060D18; }
.bp-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.58; }
.bp-hero-scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,13,24,.5) 0%,rgba(6,13,24,.38) 40%,rgba(6,13,24,.8) 100%); }
.bp-hero-inner { position:relative; max-width:800px; margin:0 auto; padding:186px 32px 70px; }
.bp-back { display:inline-flex; align-items:center; gap:7px; color:#a7b8ce; font-size:13.5px; font-weight:600; margin-bottom:22px; }
.bp-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.bp-cat { font-size:11.5px; font-weight:700; letter-spacing:.08em; color:#fff; background:var(--cat-accent); padding:6px 13px; border-radius:999px; }
.bp-date { font-size:13.5px; color:#a7b8ce; }
.bp-h1 { font-family:'Space Grotesk',sans-serif; font-size:40px; line-height:1.18; font-weight:600; letter-spacing:-.01em; margin:0; }
.bp-body { max-width:760px; margin:0 auto; padding:56px 32px 20px; }
.bp-figure { border-radius:18px; overflow:hidden; margin-bottom:40px; box-shadow:0 30px 60px -34px rgba(20,45,90,.5); }
.bp-figure img { width:100%; height:340px; object-fit:cover; display:block; }
.bp-prose { font-size:16.5px; line-height:1.85; color:#354661; }
.bp-prose p { margin:0 0 22px; }
.bp-inline-cta { margin-top:20px; background:linear-gradient(135deg,#1747A6,#1E5FBF); border-radius:20px; padding:32px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.bp-inline-title { font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:600; margin-bottom:6px; }
.bp-inline-sub { font-size:14px; color:#cfe0f5; }
.bp-inline-actions { display:flex; gap:12px; flex-wrap:wrap; }
.bp-inline-btn { background:#fff; color:#1747A6; border:none; padding:13px 24px; border-radius:11px; font-weight:700; font-size:14.5px; cursor:pointer; }
.bp-inline-tel { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.3); padding:13px 22px; border-radius:11px; font-weight:600; font-size:14.5px; text-decoration:none; }
.bp-more { background:#F3F6FB; border-top:1px solid rgba(20,35,58,.07); margin-top:20px; }
.bp-more-inner { max-width:1200px; margin:0 auto; padding:64px 32px; }
.bp-more-head { text-align:center; margin-bottom:36px; }
.bp-more-eyebrow { font-size:12px; letter-spacing:.28em; font-weight:700; color:#1E5FBF; margin-bottom:10px; }
.bp-more-h2 { font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:600; color:#152743; margin:0; }
.bp-more-grid { display:grid; gap:20px; }
@media (max-width: 860px) {
.bp-hero-inner, .bp-body, .bp-more-inner { padding-left:18px !important; padding-right:18px !important; }
.bp-hero-inner { padding-top:116px !important; }
.bp-h1 { font-size:26px !important; }
.bp-figure img { height:220px !important; }
.bp-more-grid { grid-template-columns:1fr !important; }
.bp-more-h2 { font-size:22px !important; }
}
.bp-inline-cta { box-shadow:0 24px 50px -30px rgba(30,110,208,.7); }
.bp-inline-btn, .bp-inline-tel { white-space:nowrap; }
/* Column count varies with how many related posts exist. */
.bp-more-grid { grid-template-columns:repeat(var(--cols,3),1fr); }