/* ===========================================================================
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 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.
2026-10-06: the photograph is now the TEAM - five people across a 16:9 frame, their heads a
quarter of the way down - and a photo of people cannot be cropped the way the vehicles were.
A wide screen crops top and bottom, so the picture sits high (43%) and the box grows with the
width (31vw), or the heads are the first thing to go. A narrow screen would crop the SIDES and
lose the two people on the ends, so from 860px down the photo is shown whole and the heading
sits on the black band under it. */
.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: 46% 43%; }
.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, max(620px, 31vw)); 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: 860px) {
/* max-height is for a phone on its side, where 16:9 of the width is taller than the screen. The
explicit width stops that limit passing through the ratio and narrowing the box instead. */
.hero--home .hero__bg { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; max-height: 72vh; }
.hero--home .hero__bg::after { content: none; }
.hero--home .hero__in { min-height: 0; padding-top: 22px; padding-bottom: 26px; }
}
/* 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; }
}