/* ===========================================================================
Bream Bay Electrical - "live wire" theme, light cut (2026-09-28), with the
client's home-page brief of 2026-10-05 applied
---------------------------------------------------------------------------
The first preview, re-cut on white after the client's feedback on the
black version: "too dark and gloomy ... light, bright, clean and inviting".
What stays from the first cut is its voice - Barlow Condensed display type,
the photograph behind the home hero, the drawn wiring diagrams, the yellow
as the accent that runs through everything. What changes is the ground:
white and a cool light grey. No lightning, no bolts, no flicker; the one
motion left is a soft fade-up on scroll, off under prefers-reduced-motion.
2026-10-05 (todo.txt, the client's notes on the home page):
* THE HEADER IS ONE BLACK BANNER, the black of the logo, with white text.
The information bar above it is gone; only the phone number stays,
top right.
* NO UNDERLINES IN HEADINGS - the yellow stroke under a heading (.hl) is
off, and the menu marks the current page with colour, not a bar.
* NO UNDERLINED OR BOLD LINKS IN BODY COPY. A link is the deep yellow
(3.3:1 against the ink around it, 5.4:1 on white) and underlines on
hover and focus, which is what WCAG 1.4.1 asks of a link told apart by
colour (technique G183).
* NO YELLOW FILLED BOXES. Buttons, the trust strip, the call-to-action
band, the floating contact buttons and the tick marks are a yellow
OUTLINE around the text. A button fills on hover so it still reads as
one.
* The home page has its own layout (build/themes/livewire/pages/home.html):
a photo hero with the heading over it, one blended introduction with a
Read more, and the services as round photo teasers.
Every ratio below is MEASURED (WCAG relative luminance):
#16181B ink on #FFFFFF white = 17.4:1 body copy, and button text
#16181B ink on #F4F5F7 grey = 16.0:1 body copy on the grey bands
#5A5F66 muted on #FFFFFF = 6.6:1 secondary copy
#5A5F66 muted on #F4F5F7 = 6.1:1 secondary on grey
#8A6400 deep on #FFFFFF = 5.4:1 yellow as TEXT (eyebrows, links)
#8A6400 deep on #F4F5F7 = 4.9:1 same on the grey bands (AA)
#8A6400 deep vs #16181B ink = 3.3:1 a link against the copy around it
#FFFFFF white on #0C0D0F black = 19.4:1 menu and button text on the banner
#F5B900 yellow on #0C0D0F black = 11.0:1 the phone number, accents on black
#0C0D0F black on #F5B900 yellow = 11.0:1 a button on hover
#ECEDEE text on #0C0D0F = 16.9:1 copy on black
#A9AEB5 muted on #0C0D0F = 8.6:1 secondary on black
#B3261E error on #FFFFFF = 5.6:1 form errors
#F5B900 on #FFFFFF = 1.8:1 NEVER text. Outline and hover fill only.
=========================================================================== */
:root {
--white: #FFFFFF;
--grey: #F4F5F7; /* the alternate band */
--grey-2: #E9EBEF;
--line: #E2E4E8;
--line-2: #C9CDD3; /* form field borders */
--ink: #16181B;
--muted: #5A5F66;
--black: #0C0D0F;
--black-2: #16181B;
--line-dark: #2A2E34;
--on-black: #ECEDEE;
--on-black-2:#A9AEB5;
--y: #F5B900;
--y-soft: #FFF3C4;
--y-deep: #8A6400; /* yellow as TEXT on white */
--error: #B3261E;
--shadow: 0 12px 32px rgba(16, 18, 20, .08);
--shadow-2: 0 2px 10px rgba(16, 18, 20, .06);
--wrap: 1200px;
--pad: clamp(18px, 4vw, 34px);
--sec-y: clamp(56px, 7.5vw, 100px);
--radius: 4px;
--hdr-h: 104px;
--hdr-h-stuck: 92px;
/* Float bar (fleet component): white with a yellow outline, like every other button. */
--fb-bg: var(--white);
--fb-icon: var(--black);
--fb-hover-bg: var(--y);
--fb-hover-icon:var(--black);
}
/* ------------------------------------------------------------------ fonts */
@font-face { font-family: 'Barlow Condensed'; src: url('/assets/fonts/barlowcondensed-800-latin.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/assets/fonts/barlowcondensed-700-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; }
/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body {
margin: 0; background: var(--white); color: var(--ink);
font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
font-size: 18px; line-height: 1.6;
}
img, svg, video, canvas { max-width: 100%; display: block; }
img { height: auto; }
picture { display: block; }
h1, h2, h3, h4 {
font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif; font-weight: 800;
line-height: 1.06; letter-spacing: 0; margin: 0 0 .45em; color: var(--ink); text-wrap: balance;
}
h1[data-len="short"] { font-size: clamp(42px, 6vw, 76px); }
h1[data-len="long"] { font-size: clamp(38px, 5.2vw, 66px); }
h1[data-len="xlong"] { font-size: clamp(34px, 4.4vw, 56px); }
h2 { font-size: clamp(32px, 3.8vw, 48px); }
h3 { font-weight: 700; font-size: 24px; line-height: 1.15; }
p { margin: 0 0 1.05em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.25em; }
li { margin-bottom: .4em; }
strong { font-weight: 600; }
/* Links in copy: told apart by colour, underlined on hover and focus (see the header note). */
a { color: var(--y-deep); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.hdr :focus-visible, .ftr :focus-visible, .enq__copy :focus-visible, .side-cta :focus-visible, .hero--home :focus-visible { outline-color: var(--y); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--y); color: var(--black); padding: 12px 18px; font-weight: 600; text-decoration: none; }
.skip:focus { left: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.lead { font-size: 20px; }
/* The pages still mark a word or two of each H1 with .hl (the classic theme highlights them).
Here it does nothing since 2026-10-05: "get rid of all the underlines on text in the headings". */
.hl { background: none; }
.eyebrow {
display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px;
letter-spacing: .18em; text-transform: uppercase; color: var(--y-deep); line-height: 1;
}
.eyebrow::before { content: ''; width: 28px; height: 3px; background: var(--y); flex: 0 0 auto; }
/* ------------------------------------------------------------------ buttons
A yellow OUTLINE around the text since 2026-10-05, never a yellow box. The fill arrives on
hover. Components must beat prose: `a` (0,0,1) sets the link colour, so every button states
its own. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 14px 26px; border: 2px solid var(--y); border-radius: var(--radius);
background: transparent; color: var(--ink); text-decoration: none; cursor: pointer;
font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 18px;
letter-spacing: .06em; text-transform: uppercase; line-height: 1;
transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.btn:hover, .btn:focus-visible { background: var(--y); border-color: var(--y); color: var(--black); text-decoration: none; }
.btn:active { transform: translateY(1px); }
/* the quieter of two buttons side by side: a grey outline */
.btn--ghost { border-color: var(--line-2); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--sm { padding: 11px 18px; font-size: 16px; }
.btn--full { width: 100%; }
.btn[disabled] { opacity: .6; cursor: wait; }
/* on black the text is white until the hover fill */
.hdr .btn, .enq__copy .btn, .side-cta .btn { color: var(--white); }
.hdr .btn:hover, .hdr .btn:focus-visible, .enq__copy .btn:hover, .side-cta .btn:hover, .side-cta .btn:focus-visible { background: var(--y); border-color: var(--y); color: var(--black); }
/* ------------------------------------------------------------------ header
ONE banner in the black of the logo, white text (client, 2026-10-05). The logo sits straight on
it - the banner is the plate. Phone number top right, the menu under it. */
.hdr { position: sticky; top: 0; z-index: 90; background: var(--black); color: var(--white); transition: box-shadow .2s; }
.hdr[data-stuck] { box-shadow: 0 4px 18px rgba(0, 0, 0, .3); }
.hdr__in { display: flex; align-items: center; gap: 28px; padding-top: 14px; padding-bottom: 14px; transition: padding .2s; }
.hdr[data-stuck] .hdr__in { padding-top: 8px; padding-bottom: 8px; }
/* The framed logo, inline, sized by height. */
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.brand svg { height: 64px; width: auto; transition: height .2s; }
.hdr[data-stuck] .brand svg { height: 52px; }
.brand:hover .lg-elec { fill: #FFD54A; }
.hdr__main { margin-left: auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hdr__phone { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; color: var(--y); text-decoration: none; white-space: nowrap; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 25px; letter-spacing: .03em; line-height: 1; transition: color .18s; }
.hdr__phone:hover, .hdr__phone:focus-visible { color: var(--white); text-decoration: none; }
.hdr__bar { display: flex; align-items: center; gap: 16px; }
.nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.nav > a, .nav__dropbtn {
display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px;
font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px;
letter-spacing: .06em; text-transform: uppercase; color: var(--white); text-decoration: none;
background: none; border: 0; cursor: pointer; white-space: nowrap; line-height: 1.2; transition: color .18s;
}
/* the current page and the hover are the yellow of the logo - a colour, not an underline */
.nav > a:hover, .nav > a[aria-current="page"], .nav__drop:hover .nav__dropbtn,
.nav__drop[data-current] .nav__dropbtn, .nav__drop[data-open] .nav__dropbtn { color: var(--y); text-decoration: none; }
.nav__dropbtn svg { transition: transform .18s; }
.nav__drop:hover .nav__dropbtn svg, .nav__drop[data-open] .nav__dropbtn svg { transform: rotate(180deg); }
.nav__drop { position: relative; }
.nav__panel {
position: absolute; top: calc(100% + 10px); left: 0; min-width: 300px; padding: 8px 0;
background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--y);
box-shadow: var(--shadow); border-radius: var(--radius); display: flex; flex-direction: column;
opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s, transform .16s, visibility 0s linear .35s; z-index: 5;
}
/* The dead zone: a hover bridge across the gap plus a close delay (fleet rule, see
_knowledge/hover-dropdown-dead-zone.md). The visibility delay IS the close delay. */
.nav__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__drop:hover .nav__panel, .nav__drop:focus-within .nav__panel, .nav__drop[data-open] .nav__panel {
opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.nav__panel a {
display: block; padding: 10px 18px 10px 20px; border-left: 3px solid transparent;
color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px;
}
.nav__panel a:hover, .nav__panel a:focus-visible { background: var(--grey); border-left-color: var(--y); outline-offset: -3px; outline-color: var(--ink); text-decoration: none; }
.nav__panel a[aria-current="page"] { border-left-color: var(--y); background: var(--grey); }
.hdr__cta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.hdr__quote { padding: 11px 18px; font-size: 16px; }
.burger { display: none; width: 46px; height: 46px; padding: 0; background: transparent; border: 1px solid #4A4F57; border-radius: var(--radius); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--white); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-m { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-top: 1px solid var(--line); box-shadow: var(--shadow); padding: 6px 0 18px; max-height: calc(100vh - var(--hdr-h)); overflow: auto; }
.nav-m :focus-visible { outline-color: var(--ink); }
.nav-m > a { display: block; padding: 13px var(--pad); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; }
.nav-m > a:hover { background: var(--grey); }
.nav-m__label { margin: 14px var(--pad) 4px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.nav-m__label ~ a:not(.nav-m__cta) { padding-left: calc(var(--pad) + 16px); font-size: 17px; text-transform: none; letter-spacing: 0; font-family: 'Barlow', sans-serif; font-weight: 600; }
.nav-m__label ~ a[href="/projects/"], .nav-m__label ~ a[href="/about-us/"], .nav-m__label ~ a[href="/faqs/"], .nav-m__label ~ a[href="/contact-us/"] { padding-left: var(--pad); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; }
.nav-m > a[href="/projects/"] { margin-top: 8px; border-top: 1px solid var(--line); }
.nav-m__btns { display: grid; gap: 10px; padding: 18px var(--pad) 0; }
.nav-m__cta { display: block; text-align: center; padding: 14px; border: 2px solid var(--y); border-radius: var(--radius); background: transparent; color: var(--ink); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.nav-m__cta:hover { background: var(--y); color: var(--black); text-decoration: none; }
.nav-m__cta--alt { border-color: var(--line-2); }
.nav-m__cta--alt:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
/* Below the width the menu fits at, the banner is one row: logo, number, quote, burger. */
@media (max-width: 1140px) {
:root { --hdr-h: 78px; --hdr-h-stuck: 70px; }
.nav { display: none; }
.burger { display: flex; }
.hdr__main { flex-direction: row; align-items: center; gap: 18px; }
.brand svg { height: 50px; }
.hdr[data-stuck] .brand svg { height: 44px; }
.hdr__phone { font-size: 23px; }
.nav-m { display: block; }
.cnc-js .nav-m { display: none; }
.cnc-js .nav-m[data-open] { display: block; }
}
@media (min-width: 1141px) { .nav-m { display: none !important; } }
/* Phones: logo, the number, the burger. "Get a quote" is the first button in the menu. */
@media (max-width: 600px) {
:root { --hdr-h: 66px; --hdr-h-stuck: 62px; }
.hdr__in { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.hdr__main { gap: 10px; }
.brand svg, .hdr[data-stuck] .brand svg { height: 32px; }
.hdr__phone { font-size: 20px; gap: 6px; }
.hdr__phone svg { width: 15px; height: 15px; }
.hdr__quote { display: none; }
.burger { width: 44px; height: 44px; }
}
@media (max-width: 380px) {
.brand svg, .hdr[data-stuck] .brand svg { height: 28px; }
.hdr__phone { font-size: 18px; }
.hdr__phone svg { display: none; }
}
/* ------------------------------------------------------------------ hero */
.hero { position: relative; }
.hero__lede { font-size: clamp(18px, 1.5vw, 20.5px); line-height: 1.55; color: var(--muted); max-width: 60ch; margin: 0 0 26px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 22px 0 0; font-size: 16px; font-weight: 600; }
.hero__meta a { color: var(--ink); }
/* Home (2026-10-05): the photograph of the vehicles edge to edge, the heading over it bottom
left in white, on a gradient that darkens only the bottom of the picture. The introduction is
the section below, so nothing but the heading has to be read over a photograph. */
.hero--home { background: var(--black); overflow: hidden; }
.hero--home .hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero--home .hero__bg picture, .hero--home .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero--home .hero__bg::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(12,13,15,.18) 0%, rgba(12,13,15,0) 26%, rgba(12,13,15,.12) 52%, rgba(12,13,15,.78) 100%);
}
.hero--home .hero__in { position: relative; z-index: 1; min-height: clamp(340px, 60vh, 620px); display: flex; align-items: flex-end; padding-top: 60px; padding-bottom: clamp(28px, 4.6vw, 56px); }
.hero--home h1 { margin: 0; max-width: 900px; color: var(--white); text-shadow: 0 2px 22px rgba(0, 0, 0, .55); }
.hero--home h1[data-len] { font-size: clamp(34px, 4.6vw, 60px); }
@media (max-width: 600px) {
.hero--home .hero__in { min-height: clamp(300px, 50vh, 440px); }
.hero--home .hero__bg img { object-position: 50% 62%; }
}
/* Inner pages: a light grey band, copy left, the photograph right with a yellow rule down its
left edge (the photo is the page's subject, the rule is the brand). */
.hero--inner { background: var(--grey); border-bottom: 1px solid var(--line); }
.hero--inner .hero__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 64px); align-items: center; padding-top: clamp(36px, 5vw, 60px); padding-bottom: clamp(44px, 6vw, 76px); }
.hero--inner h1[data-len] { font-size: clamp(36px, 4.6vw, 58px); }
.hero--inner .hero__lede:last-child { margin-bottom: 0; }
.hero__media { position: relative; padding-left: 10px; }
.hero__media::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--y); border-radius: 2px 0 0 2px; }
.hero__media picture { overflow: hidden; border-radius: 0 var(--radius) var(--radius) 0; aspect-ratio: 4 / 3; box-shadow: var(--shadow-2); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media--tall { max-width: 420px; justify-self: end; }
.hero__media--tall picture { aspect-ratio: 4 / 5; }
.hero--solo .hero__in { grid-template-columns: 1fr; }
.hero--solo .hero__copy { max-width: 780px; }
@media (max-width: 860px) {
.hero--inner .hero__in { grid-template-columns: minmax(0, 1fr); }
.hero__media { max-width: 560px; }
.hero__media--tall { max-width: 360px; justify-self: start; }
}
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 14.5px; color: var(--muted); }
.crumbs li { margin: 0; display: inline-flex; gap: 8px; align-items: center; }
.crumbs li + li::before { content: '/'; color: var(--line-2); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
/* Contact page: the details card beside the heading. */
.contact-card { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--y); border-radius: var(--radius); padding: 10px 28px 14px; box-shadow: var(--shadow-2); }
.contact-card dl { margin: 0; }
.contact-card dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.contact-card dl > div:last-child { border-bottom: 0; }
.contact-card dt { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.contact-card dd { margin: 0; font-weight: 600; font-size: 17.5px; overflow-wrap: anywhere; }
.contact-card a { color: var(--ink); }
@media (max-width: 480px) { .contact-card dl > div { grid-template-columns: 1fr; gap: 2px; } }
/* ------------------------------------------------------------------ trust strip
A yellow OUTLINE around the four facts since 2026-10-05, not a yellow band. The box lines up
with the page's text edges: the side padding moves from the wrap out to the section. */
.strip { background: var(--white); color: var(--ink); padding: clamp(22px, 3vw, 34px) var(--pad) 0; }
.strip__in { display: grid; grid-template-columns: repeat(4, 1fr); max-width: calc(var(--wrap) - 2 * var(--pad)); padding: 0; border: 2px solid var(--y); border-radius: var(--radius); }
.strip__item { display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; }
.strip__item + .strip__item { border-left: 1px solid var(--line); }
.strip__item svg { flex: 0 0 auto; color: var(--y-deep); }
@media (max-width: 900px) { .strip__in { grid-template-columns: 1fr 1fr; } .strip__item:nth-child(3) { border-left: 0; } .strip__item:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 460px) { .strip__item { font-size: 16px; padding: 13px 12px; gap: 9px; } }
/* ------------------------------------------------------------------ sections */
.sec { position: relative; padding: var(--sec-y) 0; background: var(--white); }
.sec + .sec { border-top: 1px solid var(--line); }
.sec--2 { background: var(--grey); }
.paper { background: var(--white); }
.sec__head { max-width: 780px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec__head--c { margin-left: auto; margin-right: auto; text-align: center; }
.sec__head--c .eyebrow { justify-content: center; }
.sec__head p { font-size: 19px; color: var(--muted); max-width: 66ch; }
.sec__head--c p { margin-left: auto; margin-right: auto; }
.sec__after { margin-top: 30px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; gap: 32px; } }
.photo { border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.photo img { width: 100%; }
.banner { margin: 0 0 26px; border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.banner img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 600px) { .banner img { aspect-ratio: 16 / 10; } }
/* ------------------------------------------------------------------ prose */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(28px, 3.2vw, 38px); margin-top: 1.4em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: clamp(22px, 2.2vw, 26px); margin-top: 1.4em; }
.prose > p:first-of-type { font-size: 20px; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: .62em; width: 14px; height: 4px; background: var(--y); border-radius: 2px; }
.prose ol { padding-left: 1.3em; }
.prose ol li::marker { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; color: var(--y-deep); }
/* a long plain list of services, in two columns where there is room */
.prose ul.cols { columns: 2; column-gap: 32px; }
.prose ul.cols li { break-inside: avoid; margin-bottom: .35em; }
@media (max-width: 560px) { .prose ul.cols { columns: 1; } }
.wrap.prose > h2:first-child { margin-top: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.split__media { display: grid; gap: 18px; }
.split__media figure { margin: 0; }
.split__media figure:not(.diagram) picture { overflow: hidden; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); aspect-ratio: 4 / 3; }
.split__media figure:not(.diagram) img { width: 100%; height: 100%; object-fit: cover; }
.split__media figcaption { font-size: 14.5px; color: var(--muted); margin-top: 8px; }
.split__media .badge-me { display: block; padding: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.split__media .badge-me img { max-width: 220px; margin: 0 auto; }
@media (min-width: 961px) { .split__media { position: sticky; top: calc(var(--hdr-h-stuck) + 20px); } }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } .split__media { position: static; max-width: 560px; } }
/* ------------------------------------------------------------------ diagrams
Drawn explanations of how the work fits together: ink lines, yellow for the parts that switch,
convert or decide. Static - nothing here moves. */
.diagram { background: var(--white); border-radius: var(--radius); padding: 20px 18px 16px; border: 1px solid var(--line); }
.diagram svg { width: 100%; height: auto; }
.diagram .cond { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diagram .flow { fill: none; stroke: var(--y); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 12; }
.diagram .box { fill: var(--white); stroke: var(--ink); stroke-width: 1.5; }
.diagram .box--y { fill: var(--y); }
.diagram text { fill: var(--ink); font: 600 12.5px 'Barlow', sans-serif; }
.diagram text.sm { fill: var(--muted); font-size: 11px; font-weight: 400; }
.diagram .ico path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diagram figcaption { font-size: 14.5px; line-height: 1.45; color: var(--muted); margin-top: 12px; }
/* sidebar call-to-action card (build/themes/livewire/theme.mjs) */
.side-cta { padding: 26px; background: var(--black); color: var(--on-black); border-radius: var(--radius); border-top: 5px solid var(--y); }
.side-cta__h { margin: 0 0 6px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; }
.side-cta__num { display: block; margin-bottom: 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 34px; color: var(--y); text-decoration: none; }
.side-cta__num:hover { text-decoration: underline; }
.side-cta__p { margin: 0 0 18px; font-size: 15.5px; color: var(--on-black-2); }
.side-cta__p a { color: var(--y); }
/* ------------------------------------------------------------------ service cards (404 page) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; gap: 10px; padding: 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color .18s, box-shadow .18s, transform .18s; }
.card:hover { border-color: var(--ink); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.card__num { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: .1em; color: var(--muted); }
.card__ico { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--y); color: var(--ink); border-radius: var(--radius); }
.card h3 { font-size: 24px; margin: 4px 0 0; }
.card__p { color: var(--muted); font-size: 16.5px; flex: 1; }
.card__more { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--y-deep); }
.card:hover .card__more { text-decoration: underline; text-underline-offset: 4px; }
/* the home-page services list: a heading and one sentence per service, linked */
.svc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; counter-reset: svc; }
.svc-list > div { counter-increment: svc; position: relative; padding: 24px 24px 22px 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .18s, box-shadow .18s; }
.svc-list > div:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.svc-list > div::before { content: counter(svc, decimal-leading-zero); display: block; margin-bottom: 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: .12em; color: var(--muted); }
.svc-list > div::after { content: ''; position: absolute; left: 24px; top: 44px; width: 28px; height: 3px; background: var(--y); }
.svc-list h3 { font-size: 25px; margin-bottom: .3em; }
.svc-list h3 a { color: var(--ink); }
.svc-list > div:not(.svc-list__more) h3 a::after { content: ''; position: absolute; inset: 0; }
.svc-list p { color: var(--muted); font-size: 16.5px; }
.svc-list__more { background: var(--grey) !important; }
.svc-list__more::before { content: '?' !important; }
/* recent projects (home) */
.proj-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.proj { display: flex; flex-direction: column; gap: 6px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--y); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color .18s, box-shadow .18s; }
.proj:hover { border-color: var(--ink); border-left-color: var(--y); box-shadow: var(--shadow); text-decoration: none; }
.proj__year { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--y-deep); }
.proj__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 26px; line-height: 1.1; }
.proj__what { color: var(--muted); font-size: 16.5px; line-height: 1.5; }
@media (max-width: 900px) { .proj-list { grid-template-columns: 1fr; } }
/* project write-ups (projects page) */
.projects { display: grid; gap: 22px; max-width: 900px; }
.case { padding: clamp(24px, 3.4vw, 36px); background: var(--white); border: 1px solid var(--line); border-top: 5px solid var(--y); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.case__head { margin-bottom: 14px; }
.case__year { display: inline-block; margin-bottom: 8px; padding: 4px 10px; background: var(--black); color: var(--y); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; border-radius: 3px; }
.case h2 { font-size: clamp(26px, 3vw, 36px); margin: 0; }
.case__sub { display: block; font-weight: 700; font-size: .72em; color: var(--muted); margin-top: 4px; }
.case p { color: var(--ink); }
.case__result { font-weight: 600; padding-left: 14px; border-left: 3px solid var(--y); }
/* photo gallery with captions (projects page) */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gallery figure { margin: 0; }
.gallery picture { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; box-shadow: 0 0 0 1px var(--line); background: var(--white); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption { margin-top: 10px; font-size: 15.5px; color: var(--muted); }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } }
/* ------------------------------------------------------------------ photo mosaic */
.mosaic { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: stretch; }
.mosaic figure { margin: 0; }
.mosaic picture { height: 100%; overflow: hidden; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic .m-a picture { aspect-ratio: 4 / 3; }
.sec:has(> .wrap > .mosaic:only-child) { padding: clamp(24px, 3vw, 40px) 0; }
@media (max-width: 600px) { .mosaic { grid-template-columns: 1fr; } .mosaic .m-b picture { aspect-ratio: 4 / 3; } }
/* ------------------------------------------------------------------ why us / ticks */
.ticks { list-style: none; padding: 24px 26px; margin: 0; display: grid; gap: 14px; background: var(--grey); border: 1px solid var(--line); border-radius: var(--radius); }
.ticks li { position: relative; padding-left: 40px; margin: 0; font-size: 17px; line-height: 1.5; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .1em; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--y); }
.ticks li::after { content: ''; position: absolute; left: 8px; top: .48em; width: 10px; height: 6px; border-left: 2.5px solid var(--black); border-bottom: 2.5px solid var(--black); transform: rotate(-45deg); }
/* ------------------------------------------------------------------ CTA band
A yellow OUTLINE box on white since 2026-10-05, not a yellow band across the page. As with the
trust strip, the side padding is on the section so the box lines up with the text edges. */
.cta-band { position: relative; background: var(--white); color: var(--ink); padding: clamp(40px, 5vw, 64px) var(--pad) var(--sec-y); }
.cta-band .wrap { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: center; justify-content: space-between; max-width: calc(var(--wrap) - 2 * var(--pad)); padding: clamp(24px, 3.4vw, 40px); border: 2px solid var(--y); border-radius: var(--radius); }
.cta-band h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 0 0 .2em; }
.cta-band p { margin: 0; font-size: 18.5px; max-width: 640px; color: var(--muted); }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: 12px; }
/* Between two white sections the box borrows their padding instead of doubling the gap; next to a
grey band it keeps its own, so the outline never touches the grey. */
.sec:not(.sec--2) + .cta-band { padding-top: 0; }
.cta-band:has(+ .sec:not(.sec--2)) { padding-bottom: 0; }
/* ------------------------------------------------------------------ reviews */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.quote { margin: 0; padding: 28px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--y); box-shadow: var(--shadow-2); display: flex; flex-direction: column; }
.quote blockquote { margin: 0 0 18px; font-size: 17.5px; line-height: 1.6; color: var(--ink); flex: 1; }
.quote figcaption { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; }
.quote figcaption::before { content: ''; display: inline-block; width: 18px; height: 3px; background: var(--y); margin-right: 10px; vertical-align: middle; }
.greviews .btn svg { color: var(--y-deep); }
.greviews .btn:hover svg { color: var(--black); }
.stars { display: flex; gap: 3px; margin-bottom: 14px; color: var(--y); }
/* the Google buttons: read the reviews, leave one */
.greviews { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 30px; padding: 22px 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.greviews__t { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; flex: 1 1 260px; }
.greviews__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.sec--greviews .greviews { margin-top: 0; }
/* ------------------------------------------------------------------ team */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.member { margin: 0; }
.member__img picture { overflow: hidden; border-radius: var(--radius); aspect-ratio: 1; border-bottom: 4px solid var(--y); box-shadow: 0 0 0 1px var(--line); }
.member__img img { width: 100%; height: 100%; object-fit: cover; }
.member figcaption { padding-top: 12px; }
.member b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 23px; letter-spacing: .01em; }
.member span { color: var(--muted); font-size: 15.5px; }
@media (max-width: 900px) { .team { grid-template-columns: 1fr 1fr; } }
/* ------------------------------------------------------------------ badge */
.badge-me { display: inline-block; background: var(--white); padding: 12px 16px; border-radius: var(--radius); }
.badge-me img { width: 220px; height: auto; }
/* ------------------------------------------------------------------ FAQ */
.faq { max-width: 860px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 18px 56px 18px 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ''; position: absolute; right: 0; top: 50%; width: 30px; height: 30px; margin-top: -15px;
border-radius: 50%; border: 2px solid var(--y);
}
.faq summary::before { content: ''; position: absolute; right: 0; top: 50%; width: 30px; height: 30px; margin-top: -15px; z-index: 1; background: var(--black);
-webkit-mask: url("data:image/svg+xml;utf8,") center / 16px no-repeat;
mask: url("data:image/svg+xml;utf8,") center / 16px no-repeat; transition: transform .2s; }
.faq details[open] summary::before { transform: rotate(45deg); }
.faq summary:hover { color: var(--y-deep); }
.faq__a { padding: 0 52px 22px 0; color: #3B4046; font-size: 17.5px; max-width: 72ch; }
.faq-page { max-width: 900px; }
.faq-page > h2 { margin-top: 1.6em; font-size: clamp(26px, 3vw, 36px); }
.faq-page > h2:first-child { margin-top: 0; }
/* ------------------------------------------------------------------ areas */
.areas-line { max-width: 860px; margin: 0 auto; text-align: center; font-size: 19px; line-height: 1.5; color: var(--muted); }
.areas-line strong { color: var(--ink); }
/* ------------------------------------------------------------------ home page (2026-10-05)
build/themes/livewire/pages/home.html. Laid out after the site the client pointed at: a centred
introduction, then the services as round photographs, four across. */
.intro__in { max-width: 920px; }
.intro h2 { text-align: center; margin-bottom: .75em; }
.intro p { font-size: 19px; }
/* Read more: a native details element, so it works with no script and the hidden copy is still
in the page for search and for find-in-page. The summary is the button. */
.more { margin-top: 26px; }
.more > summary { list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more__close, .more[open] .more__open { display: none; }
.more[open] .more__close { display: inline; }
.more__body { margin-top: 28px; }
.more__body .ticks { margin: 0 0 1.05em; }
.sec.svcs { border-top: 0; padding-top: 0; }
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(20px, 2.6vw, 36px); }
.svc { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.svc__img { width: min(100%, 250px); aspect-ratio: 1; margin-bottom: 22px; border-radius: 50%; overflow: hidden; background: var(--grey); }
.svc__img picture, .svc__img img { width: 100%; height: 100%; object-fit: cover; }
.svc h3 { font-size: 27px; margin: 0 0 .4em; }
.svc h3 a { color: var(--ink); text-decoration: none; }
/* the heading link covers the whole teaser, so the photograph is clickable too */
.svc h3 a::after { content: ''; position: absolute; inset: 0; }
.svc p { flex: 1; margin: 0 0 18px; color: var(--muted); font-size: 16.5px; line-height: 1.55; }
.svc .btn { position: relative; z-index: 1; }
.svc:hover .btn { background: var(--y); color: var(--black); }
.svc:hover h3 a { color: var(--y-deep); text-decoration: none; }
.svcs__after { margin: clamp(36px, 4vw, 52px) auto 0; max-width: 760px; text-align: center; color: var(--muted); }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
.svc-grid { gap: 34px 16px; }
.svc__img { width: min(100%, 150px); margin-bottom: 14px; }
.svc h3 { font-size: 22px; }
.svc p { font-size: 15.5px; }
.svc .btn { padding: 10px 12px; font-size: 15px; }
}
.area__photo img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 60% 50%; }
.area__list { color: var(--muted); }
/* ------------------------------------------------------------------ enquiry */
.enq { position: relative; background: var(--grey); padding: var(--sec-y) 0; border-top: 1px solid var(--line); }
.enq__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.enq__copy { padding: clamp(28px, 4vw, 44px); background: var(--black); color: var(--on-black); border-radius: var(--radius); border-top: 6px solid var(--y); }
.enq__copy .eyebrow { color: var(--y); }
.enq__copy h2 { color: var(--on-black); font-size: clamp(34px, 4vw, 50px); }
.enq__copy > p { color: var(--on-black-2); }
.enq__big { display: block; margin: 18px 0 4px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: clamp(36px, 4vw, 48px); line-height: 1.05; color: var(--y); text-decoration: none; }
.enq__big:hover { text-decoration: underline; }
.enq__alt { color: var(--on-black-2); font-size: 16px; font-weight: 600; }
.enq__alt:hover { color: var(--on-black); }
.enq__facts { list-style: none; margin: 26px 0 0; padding: 0; }
.enq__facts li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 11px 0; border-top: 1px solid var(--line-dark); font-size: 16.5px; }
.enq__facts svg { color: var(--y); flex: 0 0 auto; margin-top: 4px; }
.enq__facts a { color: var(--on-black); }
.enq__note { margin: 24px 0 0; padding: 14px 16px; border-left: 3px solid var(--y); background: var(--black-2); font-size: 15.5px; color: var(--on-black-2); }
/* minmax(0, 1fr), not 1fr: a bare 1fr track cannot shrink below the email address, and the page
scrolled sideways at 320px. */
@media (max-width: 960px) { .enq__grid { grid-template-columns: minmax(0, 1fr); } }
.enq__facts a, .enq__facts span { overflow-wrap: anywhere; }
/* 🔴 Every text element in the form states its colour at two or more classes - a widget relying on
`color: inherit` renders white on its own white field the moment a parent sets a colour. */
.form { padding: clamp(24px, 3vw, 36px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.form .form__h { margin: 0 0 20px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 26px; color: var(--ink); }
.form .form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form .form__row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form .form__row label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.form .form__row input, .form .form__row select, .form .form__row textarea {
width: 100%; padding: 12px 14px; font: 400 17px 'Barlow', sans-serif; color: var(--ink); -webkit-text-fill-color: var(--ink);
background: var(--white); border: 1px solid var(--line-2); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s;
}
.form .form__row select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px; padding-right: 38px; }
.form .form__row textarea { resize: vertical; min-height: 120px; }
.form .form__row input::placeholder, .form .form__row textarea::placeholder { color: #767676; -webkit-text-fill-color: #767676; }
.form .form__row input:focus, .form .form__row select:focus, .form .form__row textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(245, 185, 0, .5); }
.form .err { display: block; color: var(--error); font-size: 14px; }
.form .err:empty { display: none; }
.form .form__msg { margin: 14px 0 0; font-size: 15.5px; color: var(--ink); }
.form .form__msg:empty { display: none; }
.form .form__msg.err { color: var(--error); }
.form .form__legal { margin: 14px 0 0; font-size: 14.5px; color: var(--muted); }
.hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 520px) { .form .form__grid { grid-template-columns: 1fr; } }
/* ------------------------------------------------------------------ footer */
.ftr { background: var(--black); color: var(--on-black-2); font-size: 16px; padding-top: clamp(48px, 6vw, 72px); }
.ftr a { color: var(--on-black); text-decoration: none; }
.ftr a:hover { text-decoration: underline; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr; gap: clamp(28px, 4vw, 60px); }
.ftr__logo { width: 300px; max-width: 100%; height: auto; margin-bottom: 20px; }
.ftr__about p { max-width: 52ch; }
.ftr__h { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; color: var(--y); margin: 0 0 16px; }
.ftr__links { display: grid; gap: 9px; }
.ftr__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ftr__contact li { display: flex; gap: 12px; margin: 0; }
.ftr__contact svg { color: var(--y); flex: 0 0 auto; margin-top: 4px; }
.ftr__review { display: inline-block; margin-top: 18px; padding: 10px 16px; border: 1px solid var(--y); border-radius: var(--radius); color: var(--y) !important; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
.ftr__review:hover { background: var(--y); color: var(--black) !important; text-decoration: none !important; }
.ftr__me { margin-top: 22px; }
.ftr__me .badge-me { padding: 10px 12px; }
.ftr__me .badge-me img { width: 170px; }
.ftr__areas-row { margin-top: clamp(32px, 4vw, 48px); }
.ftr__areas { margin: 0; padding: 20px 0; border-top: 1px solid var(--line-dark); font-size: 15.5px; }
.ftr__areas b { color: var(--on-black); font-weight: 600; }
.ftr__btm { border-top: 1px solid var(--line-dark); padding: 18px 0 30px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 14.5px; }
.ftr__credit { color: var(--on-black-2) !important; }
.ftr__social { display: flex; gap: 10px; margin-top: 18px; }
.ftr__social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-dark); border-radius: var(--radius); color: var(--on-black); transition: background .18s, color .18s; }
.ftr__social a:hover { background: var(--y); border-color: var(--y); color: var(--black); text-decoration: none; }
@media (max-width: 900px) { .ftr__grid { grid-template-columns: 1fr 1fr; } .ftr__about { grid-column: 1 / -1; } }
@media (max-width: 560px) { .ftr__grid { grid-template-columns: 1fr; } }
/* ------------------------------------------------------------------ float bar (fleet) */
.floatbar { position: fixed; right: 18px; bottom: 18px; z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.floatbar:empty { display: none; }
.floatbar__list { display: flex; flex-direction: column; gap: 10px; }
.floatbar__btn { width: 50px; height: 50px; border-radius: 50%; background: var(--fb-bg); color: var(--fb-icon); display: grid; place-items: center; border: 2px solid var(--y); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: transform .18s, background .18s, color .18s; }
.floatbar__btn:hover { background: var(--fb-hover-bg); color: var(--fb-hover-icon); transform: scale(1.06); text-decoration: none; }
.floatbar__toggle { width: 56px; height: 56px; }
.cnc-js .floatbar:not([data-open]) .floatbar__list { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; }
.cnc-js .floatbar .floatbar__list { transition: opacity .2s, transform .2s, visibility .2s; }
.fb-pop { position: fixed; inset: 0; z-index: 190; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; padding: 24px; }
.fb-pop[data-open] { display: flex; }
.fb-pop__card { background: var(--white); border-top: 6px solid var(--y); border-radius: 6px; padding: 34px 40px; text-align: center; position: relative; max-width: 380px; box-shadow: var(--shadow); }
.fb-pop__card p { color: var(--muted); font-size: 15.5px; margin: 0; }
.fb-pop__num { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 36px; color: var(--ink); margin: 6px 0 10px; }
.fb-pop__close { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--muted); }
.fb-pop__close:hover { color: var(--ink); }
/* ------------------------------------------------------------------ reveal
threshold 0 + rootMargin only (a ratio threshold never fires on a tall copy
column), scoped to .cnc-js so crawlers and no-JS visitors see everything. */
.cnc-js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.cnc-js [data-reveal].is-in { opacity: 1; transform: none; }
.cnc-js [data-reveal][data-delay="1"] { transition-delay: .08s; }
.cnc-js [data-reveal][data-delay="2"] { transition-delay: .16s; }
.cnc-js [data-reveal][data-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
.cnc-js [data-reveal] { opacity: 1; transform: none; }
}
@media print {
.hdr, .floatbar, .fb-pop, .enq form, .cta-band { display: none !important; }
body { font-size: 12pt; }
}