@font-face{font-family:"Bebas Neue";src:url(../fonts/bebas-neue.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url(../fonts/manrope.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
/* ==========================================================================
McLellan Master Plasterers & Roughcasting Specialists
Tokens off the embroidered logo. Every literal below is in PALETTE or in
DERIVED with a reason; mc_gates.py fails the build on anything else.
========================================================================== */
:root {
--ink:#0A0906; --ink-2:#2A2924; --ink-80:#2A2924;
--yellow:#FBF803; --yellow-dark:#E2E003;
--sky:#00A5F2; --deep:#0061B4; --link:#0061B4;
--paper:#F7F6F2; --render:#E3E4DF; --white:#FFFFFF;
--muted:#55554F; --rule:#DEDCD5;
--wa:#25D366; --wa-dark:#128C7E;
--slab:"Bebas Neue","Oswald","Arial Narrow",Impact,sans-serif;
--sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--wrap:1296px; --pad:clamp(20px,4vw,72px);
--sec:clamp(48px,6vw,84px);
--r:3px; --r-lg:4px;
--bar:0px; /* the mobile sticky bar's height, set below */
--shadow:0 2px 4px rgba(20,20,20,.05),0 12px 32px rgba(20,20,20,.08);
--shadow-lg:0 4px 8px rgba(20,20,20,.06),0 24px 60px rgba(20,20,20,.14);
}
/* The base reset. scrollbar-gutter is deliberately NOT set: it reserves a
scrollbar's width whether or not one exists and takes 15px off every
full bleed element at every desktop width. */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--paper); }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body {
margin:0; background:var(--paper); color:var(--ink);
font-family:var(--sans); font-size:16px; line-height:1.65;
font-synthesis-weight:none; -webkit-font-smoothing:antialiased;
overflow-wrap:break-word;
padding-bottom:var(--bar);
}
img,picture,svg,video { max-width:100%; display:block; }
img { height:auto; }
a { color:var(--link); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { color:var(--ink); }
h1,h2,h3,h4 {
font-family:var(--slab); font-weight:400; line-height:.92;
letter-spacing:.005em; margin:0 0 .35em; color:var(--ink);
text-transform:uppercase; text-wrap:balance;
}
/* The pack's scale: h1 92/64, h2 68/50. Bebas has a tall cap and no
descenders to speak of, so .92 line-height is tight, not broken. */
h1 { font-size:clamp(3.1rem,2rem + 4.6vw,5.75rem); }
h2 { font-size:clamp(2.5rem,1.7rem + 3.2vw,4.25rem); }
h3 { font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem); }
h4 { font-size:1.3rem; }
/* Bebas is a display face. Anything that has to be read as prose, or sits in
a control, stays in Manrope. */
.card h3,.step h3,.trust-item h3,.aside-card h3,.mini h3,.faq summary,
.ftr h3,.contact-list b {
font-family:var(--sans); font-weight:800; text-transform:none;
letter-spacing:-.01em; line-height:1.25;
}
p { margin:0 0 1.05em; }
ul,ol { margin:0 0 1.05em; padding-left:1.15em; }
li { margin:0 0 .4em; }
:focus-visible { outline:3px solid var(--sky); outline-offset:2px; border-radius:3px; }
.container { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.sr { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip { position:absolute; left:-9999px; top:0; z-index:200; background:var(--yellow);
color:var(--ink); padding:12px 18px; font-weight:700; }
.skip:focus { left:12px; top:12px; }
.eyebrow {
font-family:var(--sans); font-weight:800; font-size:.76rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--deep); margin:0 0 .65em;
}
.on-ink .eyebrow { color:var(--sky); }
.lede { font-size:clamp(1.05rem,1rem + .35vw,1.22rem); color:var(--muted); }
.section { padding-block:var(--sec); }
.section-head { max-width:720px; margin-bottom:clamp(32px,4vw,52px); }
.section-head .lede { margin-bottom:0; }
.on-ink { background:var(--ink); color:var(--paper); }
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4 { color:var(--white); }
.on-ink .lede,.on-ink p { color:#D8D7D0; }
.on-ink a { color:var(--sky); }
.on-ink a:hover { color:var(--yellow); }
/* The roughcast decoration. Generated aggregate, never behind body text, and
never over a photograph. */
.tex { position:relative; isolation:isolate; }
.tex::before {
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background-image:url("data:image/svg+xml,"); background-size:240px 240px; opacity:.055;
}
.on-ink.tex::before { opacity:.14; filter:invert(1); }
.rule-dash { height:6px; background-image:url("data:image/svg+xml,"); background-size:120px 120px;
opacity:.5; border-block:1px solid var(--rule); }
/* ---------- buttons -------------------------------------------------- */
.btn {
display:inline-flex; align-items:center; justify-content:center; gap:.55em;
min-height:52px; padding:0 24px; border-radius:var(--r); border:2px solid transparent;
font-family:var(--sans); font-weight:700; font-size:1rem; line-height:1;
text-decoration:none; cursor:pointer; text-align:center;
transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.btn svg { flex:none; }
/* ONE PRIMARY, SITE WIDE: his deep blue with white on it, 6.23:1. The yellow
is 1.13:1 against white and cannot carry text, so it is an accent fill with
black on it and never a button label colour. */
.btn-primary { background:var(--deep); color:var(--white); border-color:var(--deep); }
.btn-primary:hover,.btn-primary:focus-visible { background:var(--link-dark); border-color:var(--link-dark); color:var(--white); }
.btn-yellow { background:var(--yellow); color:var(--ink); border-color:var(--ink); font-weight:800; }
.btn-yellow:hover { background:var(--yellow-dark); color:var(--ink); border-color:var(--ink); }
.btn-ghost { background:var(--white); color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover { background:var(--ink); color:var(--white); }
.on-ink .btn-ghost { background:transparent; color:var(--white); border-color:rgba(255,255,255,.55); }
.on-ink .btn-ghost:hover { background:var(--white); color:var(--ink); border-color:var(--white); }
/* A BUTTON IS NOT A LINK AND MUST NOT INHERIT A LINK COLOUR.
`.on-ink a` is (0,1,1) and `.btn-primary` is (0,1,0), so inside any dark
section every button anchor was being painted cyan: cyan on the yellow
primary at about 1.5:1, and cyan on WhatsApp green. Measured, not guessed.
These restate each fill at the same specificity as the thing beating it. */
/* These restate the primary's label colour where a section rule would
otherwise win. They said `ink` while the primary was yellow; the primary is
now his deep blue, so ink on it measured 1.9:1 and was unreadable on the
drawer and the quote card. White on that blue is 6.23:1. */
.on-ink .btn-primary, .on-ink .btn-primary:hover { color:var(--white); }
.on-ink .btn-wa { color:var(--ink); }
.on-ink .btn-wa:hover { color:var(--white); }
.sb-wa { color:var(--ink)!important; }
/* Same bug again, in the mobile drawer, where it matters most: the drawer's
own `.drawer-body a` (0,1,1) painted the Get a quote button white on
yellow at 1.1:1. The button gate found this one, not a person. */
.drawer .btn-primary, .drawer .btn-primary:hover { color:var(--white); }
.drawer .btn-wa { color:var(--ink); }
.drawer .btn-wa:hover { color:var(--white); }
.drawer .btn-ghost { color:var(--white); }
.drawer .btn-ghost:hover { color:var(--ink); }
.btn-wa { background:var(--wa); color:var(--white); border-color:var(--wa); }
.btn-wa:hover { background:var(--wa-dark); border-color:var(--wa-dark); color:var(--white); }
.btn-block { width:100%; }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
/* ---------- header --------------------------------------------------- */
/* WHITE HEADER. His logo is a yellow wordmark with a BLACK outline and a
black M; on a dark bar the outline disappears and the mark turns to mush.
COLOURS.md says so and a composite on charcoal confirmed it. */
.hdr { background:var(--white); color:var(--ink); position:relative; z-index:60;
border-bottom:1px solid var(--rule); box-shadow:0 1px 0 rgba(10,9,6,.04); }
.hdr-in { display:flex; align-items:center; gap:18px; min-height:84px; }
.brand { display:flex; align-items:center; flex:none; padding:10px 0; }
.brand img { height:56px; width:auto; }
.nav { margin-left:auto; display:flex; align-items:center; gap:2px; }
.nav li { list-style:none; }
.nav-top > li { position:relative; }
.nav ul { margin:0; padding:0; }
.nav-top { display:flex; align-items:center; gap:2px; margin:0; padding:0; }
.nav-link,.nav-btn {
display:inline-flex; align-items:center; gap:.4em; min-height:44px; padding:0 13px;
color:var(--ink); font-weight:700; font-size:.95rem; text-decoration:none;
background:none; border:0; font-family:var(--sans); cursor:pointer; border-radius:var(--r);
}
.nav-link:hover,.nav-btn:hover,.nav-link:focus-visible,.nav-btn:focus-visible { background:var(--paper); color:var(--deep); }
.nav-link[aria-current="page"] { color:var(--deep); box-shadow:inset 0 -3px 0 var(--yellow); }
.nav-btn svg { transition:transform .16s ease; }
.has-menu[data-open="1"] .nav-btn svg { transform:rotate(180deg); }
.menu {
position:absolute; top:100%; left:0; min-width:290px; background:var(--white);
border:1px solid var(--rule); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
padding:8px; display:none; z-index:70;
}
.menu-wide { min-width:520px; columns:2; column-gap:8px; }
.has-menu[data-open="1"] .menu { display:block; }
.menu li { list-style:none; break-inside:avoid; }
.menu a {
display:block; padding:10px 12px; min-height:44px; border-radius:var(--r);
color:var(--ink); text-decoration:none; font-weight:600; font-size:.95rem; line-height:1.35;
}
.menu a:hover,.menu a:focus-visible { background:var(--paper); color:var(--ink); }
.menu a[aria-current="page"] { color:var(--link); }
.hdr-cta { display:flex; align-items:center; gap:10px; flex:none; }
.hdr-tel {
display:inline-flex; align-items:center; gap:.45em; color:var(--ink);
font-weight:700; text-decoration:none; min-height:44px; padding:0 8px; white-space:nowrap;
}
.hdr-tel:hover { color:var(--deep); }
.hdr-tel svg { color:var(--deep); }
.burger { display:none; }
@media (max-width:1100px) {
.hdr-tel span { display:none; }
.nav-link,.nav-btn { padding:0 10px; font-size:.9rem; }
}
@media (max-width:980px) {
.nav { display:none; }
.hdr-cta .btn { display:none; }
.burger {
display:inline-flex; align-items:center; justify-content:center; gap:.5em;
margin-left:auto; min-height:46px; min-width:46px; padding:0 14px;
background:var(--white); color:var(--ink); border:2px solid var(--ink);
border-radius:var(--r); font-family:var(--sans); font-weight:700; font-size:.92rem; cursor:pointer;
}
.hdr-in { gap:10px; min-height:66px; }
.brand img { height:46px; }
}
/* the drawer */
.drawer {
position:fixed; inset:0; z-index:90; background:var(--ink); color:var(--white);
display:none; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.drawer[data-open="1"] { display:flex; }
/* The drawer header is WHITE, like the site header, for the same reason: his
logo's black outlines vanish on a dark ground. COLOURS.md says to put it on
a white badge wherever the section behind it is dark. */
.drawer-top { display:flex; align-items:center; gap:12px; padding:12px var(--pad);
border-bottom:1px solid var(--rule); position:sticky; top:0; background:var(--white); }
.drawer-top img { height:44px; width:auto; }
.drawer .drawer-close { background:var(--white); color:var(--ink); border:2px solid var(--ink); }
.drawer-close {
margin-left:auto; min-width:46px; min-height:46px; display:inline-flex;
align-items:center; justify-content:center; background:var(--ink-80);
color:var(--white); border:1px solid rgba(255,255,255,.2); border-radius:var(--r); cursor:pointer;
}
.drawer-body { padding:10px var(--pad) 40px; }
.drawer-body ul { list-style:none; margin:0; padding:0; }
.drawer-body a {
display:block; padding:14px 0; min-height:48px; color:var(--white);
text-decoration:none; font-weight:700; font-size:1.06rem;
border-bottom:1px solid rgba(255,255,255,.12);
}
.drawer-body a:hover { color:var(--yellow); }
.drawer-sub a { font-weight:500; font-size:.98rem; color:#D8D7D0; padding-left:14px; }
.drawer-h { font-family:var(--slab); font-weight:800; font-size:.8rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--sky); margin:24px 0 2px; }
.drawer-cta { display:grid; gap:10px; margin-top:26px; }
/* ---------- hero ----------------------------------------------------- */
.hero { position:relative; background:var(--ink); color:var(--white); isolation:isolate; }
/* THE BOX IS .hero-bg AND THE PICTURE HAS TO FILL IT.
`height:100%` on the img alone resolves against , which is auto
height, so the img fell back to its intrinsic aspect ratio: 1080px tall
inside a 551px box on every sub page hero. It overflowed 529px down the
page and sat on top of whatever was under the hero, which on the gallery
meant the Exterior and Interior filter buttons could not be clicked at all.
Nothing in the markup showed it; a click that timed out did. */
.hero-bg { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-bg picture { display:block; width:100%; height:100%; }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-scrim {
position:absolute; inset:0; z-index:-1;
/* Lighter than the first build's. Side by side against Birkdale and SMB
the hero read as a grey slab: the photograph is the proof and the scrim
was burying it. Still 10.5:1 behind the headline, measured. */
background:linear-gradient(100deg,rgba(36,35,35,.93) 0%,rgba(36,35,35,.84) 32%,rgba(36,35,35,.46) 62%,rgba(36,35,35,.14) 100%);
}
.hero-in { display:grid; gap:clamp(28px,4vw,56px); padding-block:clamp(48px,6.5vw,96px); align-items:center; }
@media (min-width:1024px) { .hero-in { grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr); } }
.hero h1 { color:var(--white); margin-bottom:.4em; }
.hero .lede { color:#E2E1DA; max-width:36em; }
.hero-promise {
display:inline-block; font-family:var(--sans); font-weight:800;
font-size:clamp(.9rem,.85rem + .3vw,1.02rem); line-height:1.3;
background:var(--yellow); color:var(--ink); padding:7px 12px;
margin:0 0 18px; max-width:34ch; border-radius:3px;
}
.ftr-promise { display:inline-block; font-weight:800; font-size:.95rem;
background:var(--yellow); color:var(--ink); padding:7px 12px;
border-radius:3px; margin-bottom:14px; }
.hero-ticks { list-style:none; margin:26px 0 28px; padding:0; display:grid; gap:12px; }
.hero-ticks li { display:flex; align-items:flex-start; gap:12px; font-weight:600; font-size:1rem; color:var(--white); margin:0; }
.tick {
flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
background:rgba(63,182,217,.18); color:var(--sky); margin-top:2px;
}
.on-paper .tick { background:rgba(28,127,176,.12); color:var(--link); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
/* On a phone the reference sites stack full width buttons, and three buttons
of three different widths down a 390 screen reads as an accident. */
@media (max-width:600px) {
.hero-actions { display:grid; grid-template-columns:1fr; gap:10px; }
.hero-actions .btn { width:100%; }
}
.hero-tel { display:inline-flex; align-items:center; gap:.5em; color:var(--white);
font-weight:700; font-size:1.05rem; text-decoration:none; min-height:52px; padding:0 6px; }
.hero-tel:hover { color:var(--yellow); }
/* ---- the mobile fold -----------------------------------------------------
Measured at 390x844 with the 62px sticky bar over the bottom: the quote
button sat at 701 and WhatsApp at 825, which is behind the bar. The buttons
are what the page is for, so on a phone the tick list moves BELOW them
using flex order (the markup stays in reading order for a screen reader)
and the hero's padding comes in. That lifts the three CTAs about 150px. */
@media (max-width:600px) {
.hero-copy { display:flex; flex-direction:column; }
.hero-copy .eyebrow { order:1; }
.hero-copy h1 { order:2; font-size:clamp(2.5rem,1.9rem + 3.4vw,3.1rem); }
.hero-copy .hero-promise { order:3; margin-bottom:12px; }
.hero-copy .lede { order:4; margin-bottom:16px; font-size:1rem; }
.hero-copy .hero-actions { order:5; }
.hero-copy .hero-ticks { order:6; margin:18px 0 0; gap:9px; }
.hero-copy .hero-covering{ order:7; }
.hero .hero-in { padding-block:26px 30px; }
}
/* inner page hero: shorter, same language */
@media (max-width:900px) {
.hero-scrim { background:linear-gradient(to bottom,rgba(36,35,35,.86) 0%,rgba(36,35,35,.92) 45%,rgba(36,35,35,.96) 100%); }
}
.hero-sub .hero-in { padding-block:clamp(36px,4.5vw,70px); }
.hero-sub h1 { font-size:clamp(1.85rem,1.1rem + 2.7vw,3rem); }
.hero-plain { background:var(--ink); color:var(--white); }
/* ---------- breadcrumbs ---------------------------------------------- */
.crumbs { background:var(--ink-2); color:#C9C8C1; font-size:.86rem; }
.crumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:.4em; margin:0; padding:10px 0; }
.crumbs li { margin:0; display:flex; gap:.4em; align-items:center; }
.crumbs a { color:#C9C8C1; text-decoration:none; }
.crumbs a:hover { color:var(--yellow); }
.crumbs [aria-current] { color:var(--white); font-weight:600; }
/* ---------- quote card / form ---------------------------------------- */
.quote-card {
background:var(--white); color:var(--ink); border-radius:var(--r-lg);
border:1px solid var(--rule); box-shadow:var(--shadow-lg); padding:clamp(20px,2.4vw,30px);
}
.quote-card h2 { font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem); margin-bottom:.25em; }
.form-intro { color:var(--muted); font-size:.95rem; margin-bottom:1.1em; }
.form-grid { display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field.full { grid-column:1 / -1; }
.field > span { font-weight:700; font-size:.9rem; }
.field input,.field select,.field textarea {
font-family:var(--sans); font-size:16px; line-height:1.4; color:var(--ink);
background:var(--white); border:1.5px solid var(--rule); border-radius:var(--r);
padding:13px 14px; min-height:50px; width:100%;
}
.field textarea { resize:vertical; min-height:104px; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--link); outline:none; box-shadow:0 0 0 3px rgba(21,101,140,.16); }
.field small { color:var(--muted); font-size:.8rem; }
.field-error { color:#A42D28; font-size:.84rem; font-weight:600; }
.field.checkbox { flex-direction:row; align-items:flex-start; gap:10px; }
.field.checkbox input { width:22px; height:22px; min-height:22px; margin-top:2px; flex:none; }
.field.checkbox > span { font-weight:500; font-size:.92rem; }
.hp-field { position:absolute!important; left:-9999px; width:1px; height:1px; opacity:0; }
.quote-form .btn { margin-top:16px; }
.form-note { color:var(--muted); font-size:.82rem; margin:12px 0 0; }
.form-status { margin:12px 0 0; padding:12px 14px; border-radius:var(--r); font-weight:600; font-size:.95rem; }
.form-status[data-state="ok"] { background:#E8F3EC; color:#1B5E34; border:1px solid #B9DCC6; }
.form-status[data-state="bad"] { background:#FBECEC; color:#8E1F27; border:1px solid #EFC6C8; }
@media (max-width:560px) { .form-grid { grid-template-columns:1fr; } }
/* The quote card is a WHITE card that sits inside .hero.on-ink and inside the
dark enquiry block. Without this, `.on-ink p` (0,1,1) beats `.form-intro`
(0,1,0) and every paragraph in the card is painted #D8D7D0 on white, and
`.on-ink .eyebrow` paints "No obligation" sky blue on white at 2.09:1.
Both shipped on the first build and a screenshot is what caught them. */
.on-ink .quote-card p,
.on-ink .quote-card .form-intro,
.on-ink .quote-card .form-note,
.on-ink .quote-card label > span { color:var(--muted); }
.on-ink .quote-card .eyebrow { color:var(--link); }
.on-ink .quote-card h1,.on-ink .quote-card h2,
.on-ink .quote-card h3,.on-ink .quote-card label > span { color:var(--ink); }
.on-ink .quote-card .field > span { color:var(--ink); }
.on-ink .quote-card a { color:var(--link); }
.on-ink .quote-card .field-error { color:#A42D28; }
/* The strapline badge is a YELLOW chip inside the dark hero, so it needs its
ink restated: `.on-ink p` is (0,1,1) and was painting it #D8D7D0 on yellow,
which is the same specificity trap as the quote card and the buttons. */
.on-ink .hero-promise, .on-ink p.hero-promise { color:var(--ink); }
.ftr .ftr-promise, .ftr p.ftr-promise { color:var(--ink); }
/* ---------- mobile carousel ------------------------------------------------
Under 768px a row of four cards becomes a 2,000px scroll nobody reaches the
end of. The same markup turns into a swipeable rail: CSS scroll-snap does
the work, so there is no JavaScript in the critical path and no layout
shift. One card plus a peek of the next, which is what tells a thumb there
is more to the right. No autoplay: a carousel that moves on its own takes
the choice away and is the single most complained-about pattern on a phone.
The dots are rendered by the script and are real buttons, so they are
keyboard reachable and announce themselves. */
.rail-dots { display:none; }
@media (max-width:767px) {
.rail[data-rail] {
display:grid; grid-template-columns:none; /* see the trust-card note */
grid-auto-flow:column;
grid-auto-columns:86%; /* one card + a peek of the next */
gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad);
padding-inline:var(--pad); margin-inline:calc(-1 * var(--pad));
padding-bottom:10px;
-webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.rail[data-rail]::-webkit-scrollbar { display:none; }
.rail[data-rail] > * { scroll-snap-align:start; min-width:0; width:auto; }
/* the trust band is a card row too, so it rails the same way */
.trust-card[data-rail] {
/* grid-template-columns MUST be cleared. The desktop rule sets four
explicit columns, and items fill those before grid-auto-columns is ever
consulted, so the cards came out at a quarter width inside the rail and
the headings wrapped a word per line. */
display:grid; grid-template-columns:none;
grid-auto-flow:column; grid-auto-columns:86%;
gap:0; overflow-x:auto; scroll-snap-type:x mandatory;
scroll-padding-inline:0; border:0; background:none; box-shadow:none;
margin-top:-22px; scrollbar-width:none;
}
.trust-card[data-rail]::-webkit-scrollbar { display:none; }
.trust-item {
scroll-snap-align:center; background:var(--white); border:1px solid var(--rule);
border-radius:var(--r-lg); box-shadow:var(--shadow); margin-right:12px;
}
.trust-item + .trust-item { border-left:1px solid var(--rule); border-top:1px solid var(--rule); }
.rail-dots {
display:flex; gap:8px; justify-content:center; margin:14px 0 0; padding:0;
list-style:none;
}
.rail-dots button {
width:34px; height:34px; padding:0; border:0; background:none; cursor:pointer;
display:grid; place-items:center; /* 34px tap target round a 9px dot */
}
.rail-dots button::before {
content:""; width:9px; height:9px; border-radius:50%;
background:var(--rule); transition:background-color .15s ease, transform .15s ease;
}
.rail-dots button[aria-current="true"]::before {
background:var(--deep); transform:scale(1.3);
}
}
@media (min-width:768px) { .rail[data-rail] { display:grid; } }
/* ---------- WhatsApp, one treatment everywhere ---------------------------- */
/* WHATSAPP GREEN STAYS, THE LABEL GOES BLACK.
White on #25D366 measures 1.98:1. That fails AA at every size, including
the 3:1 large-text bar, so "official green with white on it" cannot ship
as readable. The green is the thing people recognise, so the green is kept
and the label and glyph go black: 10.04:1 on the same fill. Hover darkens
to WhatsApp's own #128C7E and the label turns white there (4.14:1). */
.btn-wa { background:var(--wa); color:var(--ink); border-color:var(--ink); font-weight:800; }
.btn-wa:hover,.btn-wa:focus-visible { background:var(--wa-dark); border-color:var(--wa-dark); color:var(--white); }
.btn-wa svg { width:20px; height:20px; flex:none; }
/* ---------- utility bar (above the header) ---------------------------- */
.utilbar { background:var(--paper); color:var(--ink); font-size:.82rem;
border-bottom:1px solid var(--rule); }
.utilbar-in { display:flex; flex-wrap:wrap; align-items:center; gap:4px 22px; min-height:40px; }
/* 44px minimum, including in the utility bar. It measured 38px on a phone,
which is a thumb miss on the one WhatsApp link above the fold. */
.util-item { display:inline-flex; align-items:center; gap:.45em; color:var(--ink);
text-decoration:none; padding:8px 0; font-weight:600; min-height:44px; }
.util-item svg { flex:none; color:var(--deep); width:15px; height:15px; }
a.util-item:hover { color:var(--deep); }
.util-wa svg { color:var(--wa-dark); }
.util-area { margin-left:auto; }
@media (max-width:900px) {
.util-area,.utilbar .util-item:nth-child(2) { display:none; }
.utilbar-in { justify-content:center; gap:0 20px; }
}
/* ---------- hero covering line ---------------------------------------- */
.hero-covering { margin:20px 0 0; font-size:.88rem; color:#C9C8C1; }
.hero-covering a { color:var(--white); text-decoration-color:var(--sky); }
.hero-covering a:hover { color:var(--yellow); }
/* ---------- stats beside the local intro ------------------------------ */
.stats { display:grid; gap:0; margin-top:18px; border:1px solid var(--rule);
border-radius:var(--r-lg); background:var(--white); }
.stat { display:flex; align-items:baseline; gap:14px; padding:14px 18px; }
.stat + .stat { border-top:1px solid var(--rule); }
.stat-n { font-family:var(--slab); font-size:2.3rem; line-height:1; color:var(--deep);
min-width:2.4ch; }
.stat-l { font-size:.9rem; color:var(--muted); }
/* ---------- why us: the pack's numbered tag ---------------------------- */
.why { background:var(--ink-80); border:1px solid rgba(255,255,255,.12);
border-radius:var(--r-lg); padding:clamp(20px,2.4vw,30px); position:relative; }
.why-n {
display:inline-block; font-family:var(--slab); font-size:1.2rem; line-height:1;
background:var(--yellow); color:var(--ink); padding:7px 11px 5px;
border:2px solid var(--ink); border-radius:2px; margin-bottom:16px; letter-spacing:.06em;
}
.why h3 { color:var(--white); margin-bottom:.4em; }
.why p { margin:0; color:#C9C8C1; font-size:.95rem; }
/* ---------- yellow band accents on section eyebrows -------------------- */
.eyebrow { position:relative; padding-left:26px; }
.eyebrow::before {
content:""; position:absolute; left:0; top:50%; width:18px; height:4px;
margin-top:-2px; background:var(--yellow); border:1px solid var(--ink);
}
/* ---------- the big headings take the pack's tight leading ------------- */
.section-head h2 { max-width:16ch; }
.cta-band h2 { max-width:16ch; }
/* ---------- trust band / why-us ---------------------------- */
/* ---------- trust band ----------------------------------------------- */
.trust { background:var(--paper); }
.trust-card {
background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg);
box-shadow:var(--shadow); margin-top:calc(-1 * clamp(28px,3.4vw,52px)); position:relative; z-index:5;
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
}
.trust-item { display:flex; gap:14px; padding:clamp(18px,2vw,26px); align-items:flex-start; }
.trust-item + .trust-item { border-left:1px solid var(--rule); }
.trust-ic { flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
background:var(--yellow); color:var(--ink); border:2px solid var(--ink); }
.trust-item h3 { font-size:1rem; margin:0 0 2px; }
.trust-item p { margin:0; font-size:.88rem; color:var(--muted); line-height:1.45; }
@media (max-width:900px) {
.trust-card { grid-template-columns:repeat(2,minmax(0,1fr)); }
.trust-item:nth-child(3) { border-left:0; }
.trust-item:nth-child(n+3) { border-top:1px solid var(--rule); }
}
@media (max-width:540px) {
.trust-card { grid-template-columns:1fr; margin-top:-22px; }
.trust-item + .trust-item { border-left:0; border-top:1px solid var(--rule); }
}
/* ---------- service cards -------------------------------------------- */
.grid { display:grid; gap:clamp(16px,2vw,26px); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:980px) { .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .grid-3,.grid-2 { grid-template-columns:1fr; } }
.card {
background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg);
overflow:hidden; display:flex; flex-direction:column; position:relative;
transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.card:hover { border-color:var(--ink); box-shadow:var(--shadow); }
.card-media { position:relative; background:var(--render); }
.card-media img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.card-body { padding:clamp(16px,1.8vw,22px); display:flex; flex-direction:column; flex:1; }
.card h3 { margin:0 0 .35em; font-size:1.16rem; }
.card p { margin:0 0 1em; color:var(--muted); font-size:.95rem; line-height:1.5; }
.card-go { margin-top:auto; display:inline-flex; align-items:center; gap:.45em;
font-weight:700; color:var(--link); text-decoration:none; font-size:.95rem; }
.card a.stretch::after { content:""; position:absolute; inset:0; }
.card:hover .card-go { color:var(--ink); }
.card-tag {
position:absolute; left:12px; top:12px; background:var(--ink); color:var(--white);
font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
padding:5px 9px; border-radius:4px;
}
/* ---------- before / after ------------------------------------------- */
.ba { position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--render);
border:1px solid var(--rule); touch-action:pan-y; }
.ba-pane { margin:0; }
.ba-before { position:relative; }
.ba-before img { width:100%; display:block; }
.ba-after { position:absolute; inset:0; clip-path:inset(0 0 0 var(--ba-pos)); }
.ba-after img { width:100%; height:100%; object-fit:cover; }
.ba-tag {
position:absolute; bottom:12px; background:rgba(20,20,20,.86); color:var(--white);
font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
padding:6px 11px; border-radius:4px; pointer-events:none;
}
.ba-before .ba-tag { left:12px; }
.ba-after .ba-tag { right:12px; }
.ba-handle {
position:absolute; top:0; bottom:0; left:var(--ba-pos); width:3px; margin-left:-1.5px;
background:var(--white); pointer-events:none; box-shadow:0 0 0 1px rgba(20,20,20,.25);
}
.ba-handle span {
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:46px; height:46px; border-radius:50%; background:var(--yellow);
border:3px solid var(--white); box-shadow:0 2px 10px rgba(20,20,20,.35);
}
.ba-handle span::before,.ba-handle span::after {
content:""; position:absolute; top:50%; width:0; height:0; margin-top:-5px;
border-block:5px solid transparent;
}
.ba-handle span::before { left:9px; border-right:7px solid var(--ink); }
.ba-handle span::after { right:9px; border-left:7px solid var(--ink); }
.ba-range {
position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0;
cursor:ew-resize; -webkit-appearance:none; appearance:none; background:transparent;
}
.ba-range::-webkit-slider-thumb { -webkit-appearance:none; width:52px; height:100%; }
.ba-range::-moz-range-thumb { width:52px; height:100%; border:0; }
.ba-range:focus-visible { opacity:1; outline:3px solid var(--sky); outline-offset:-3px; background:transparent; }
.ba-sr { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ba-cap { font-size:.9rem; color:var(--muted); margin:10px 0 0; }
.on-ink .ba-cap { color:#C9C8C1; }
/* showcase: slider beside project cards */
.showcase { display:grid; gap:clamp(20px,2.6vw,36px); align-items:start; }
@media (min-width:900px) { .showcase { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); } }
.showcase-list { display:grid; gap:12px; }
.mini {
display:flex; gap:14px; align-items:center; background:var(--ink-80); border-radius:var(--r-lg);
padding:10px; text-decoration:none; color:var(--white); border:1px solid rgba(255,255,255,.1);
}
.mini:hover { background:var(--ink-2); border-color:rgba(255,255,255,.3); color:var(--white); }
.mini img { width:96px; height:72px; object-fit:cover; border-radius:var(--r); flex:none; }
.mini h3 { font-size:1rem; margin:0 0 2px; color:var(--white); }
.mini p { margin:0; font-size:.84rem; color:#C9C8C1; line-height:1.35; }
/* ---------- process -------------------------------------------------- */
.steps { counter-reset:step; display:grid; gap:clamp(16px,2vw,24px); }
.steps-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:980px) { .steps-3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .steps-3 { grid-template-columns:1fr; } }
.step { background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; }
.on-ink .step { background:var(--ink-80); border-color:rgba(255,255,255,.12); }
.step-media img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.step-body { padding:clamp(16px,1.8vw,22px); }
.step-n {
counter-increment:step; display:inline-grid; place-items:center; width:34px; height:34px;
border-radius:50%; background:var(--yellow); color:var(--ink); font-family:var(--slab);
font-weight:800; font-size:1rem; margin-bottom:12px;
}
.step-n::before { content:counter(step); }
.step h3 { font-size:1.08rem; margin:0 0 .35em; }
.step p { margin:0; font-size:.94rem; color:var(--muted); }
.on-ink .step p { color:#C9C8C1; }
.on-ink .step h3 { color:var(--white); }
/* ---------- split: exterior / interior -------------------------------- */
.split { display:grid; gap:clamp(16px,2.2vw,28px); }
@media (min-width:860px) { .split { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.split-panel {
position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:420px;
display:flex; align-items:flex-end; color:var(--white); isolation:isolate;
}
.split-panel img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.split-panel::after {
content:""; position:absolute; inset:0; z-index:-1;
/* Measured, not guessed: the body text sits between 35% and 60% of the
panel, and at .72 over a white rendered wall it was under AA. */
background:linear-gradient(to top,rgba(20,20,20,.96) 14%,rgba(20,20,20,.90) 46%,rgba(20,20,20,.62) 72%,rgba(20,20,20,.28) 100%);
}
.split-body { padding:clamp(22px,2.6vw,34px); width:100%; }
.split-body h3 { color:var(--white); font-size:clamp(1.4rem,1.1rem + 1.1vw,1.9rem); margin-bottom:.3em; }
.split-body p { color:#D8D7D0; font-size:.98rem; margin-bottom:1em; }
.split-list { list-style:none; margin:0 0 1.2em; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.split-list li { margin:0; }
.split-list a {
display:inline-block; padding:7px 12px; border-radius:999px; font-size:.86rem; font-weight:600;
background:rgba(255,255,255,.12); color:var(--white); text-decoration:none; border:1px solid rgba(255,255,255,.22);
}
.split-list a:hover { background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
/* ---------- about / media rows ---------------------------------------- */
.media-row { display:grid; gap:clamp(22px,3vw,48px); align-items:center; }
@media (min-width:880px) { .media-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
.media-row.flip .media-row-fig { order:2; } }
.media-row-fig { margin:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--rule); }
.media-row-fig img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.media-stack { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.media-stack figure { margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--rule); }
.media-stack img { width:100%; aspect-ratio:1/1; object-fit:cover; }
/* ---------- reviews --------------------------------------------------- */
.rev-note {
display:flex; gap:12px; align-items:flex-start; background:var(--render);
border:1px solid var(--rule); border-left:4px solid var(--link);
border-radius:var(--r); padding:14px 16px; margin-bottom:26px; font-size:.92rem;
}
.rev-note p { margin:0; color:var(--ink); }
.rev { background:var(--white); border:1px dashed var(--rule); border-radius:var(--r-lg);
padding:clamp(18px,2vw,26px); position:relative; }
.rev-badge {
display:inline-block; background:var(--render); color:var(--ink); border:1px solid var(--rule);
font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
padding:4px 8px; border-radius:4px; margin-bottom:12px;
}
.rev blockquote { margin:0 0 14px; font-size:1rem; line-height:1.55; color:var(--muted); }
.rev cite { font-style:normal; font-weight:700; font-size:.9rem; color:var(--muted); }
/* ---------- FAQ ------------------------------------------------------- */
.faq { max-width:860px; }
.faq details { border:1px solid var(--rule); border-radius:var(--r); background:var(--white); margin-bottom:10px; }
.faq details[open] { border-color:var(--ink); }
.faq summary {
cursor:pointer; list-style:none; padding:16px 48px 16px 18px; min-height:56px;
font-family:var(--slab); font-weight:700; font-size:1.02rem; position:relative; display:flex; align-items:center;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
content:""; position:absolute; right:18px; top:50%; width:11px; height:11px; margin-top:-7px;
border-right:2.5px solid var(--link); border-bottom:2.5px solid var(--link);
transform:rotate(45deg); transition:transform .16s ease;
}
.faq details[open] summary::after { transform:rotate(-135deg); margin-top:-2px; }
.faq .faq-a { padding:0 18px 18px; color:var(--muted); }
.faq .faq-a p:last-child { margin-bottom:0; }
/* ---------- prose ----------------------------------------------------- */
.prose { max-width:760px; }
.prose h2 { margin-top:1.6em; }
.prose h2:first-child { margin-top:0; }
.prose h3 { margin-top:1.4em; }
.prose p,.prose li { color:var(--muted); }
.prose strong { color:var(--ink); }
.cols { display:grid; gap:clamp(24px,3vw,48px); }
@media (min-width:980px) { .cols { grid-template-columns:minmax(0,1fr) 340px; align-items:start; } }
.aside { display:grid; gap:16px; position:sticky; top:20px; }
.aside-card { background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg); padding:20px; }
.aside-card h3 { font-size:1.05rem; margin-bottom:.5em; }
.aside-card p { font-size:.92rem; color:var(--muted); }
.aside-card ul { list-style:none; padding:0; margin:0; }
.aside-card li { margin:0; }
.aside-card li a { display:block; padding:9px 0; min-height:42px; border-bottom:1px solid var(--rule);
text-decoration:none; font-weight:600; font-size:.93rem; color:var(--ink); }
.aside-card li:last-child a { border-bottom:0; }
.aside-card li a:hover { color:var(--link); }
/* ---------- gallery --------------------------------------------------- */
.filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(24px,3vw,36px); }
.filter {
min-height:46px; padding:0 20px; border-radius:999px; border:1.5px solid var(--rule);
background:var(--white); color:var(--ink); font-family:var(--sans); font-weight:700;
font-size:.94rem; cursor:pointer; display:inline-flex; align-items:center;
}
.filter[aria-pressed="true"] { background:var(--ink); color:var(--white); border-color:var(--ink); }
.filter:hover { border-color:var(--ink); }
.gal { display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:860px) { .gal { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .gal { grid-template-columns:1fr; } }
.gal figure { margin:0; position:relative; border-radius:var(--r); overflow:hidden; background:var(--render); }
.gal img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.gal button { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.gal figcaption {
position:absolute; left:0; right:0; bottom:0; padding:28px 12px 10px; color:var(--white);
font-size:.84rem; line-height:1.35; text-align:left;
background:linear-gradient(to top,rgba(20,20,20,.88),rgba(20,20,20,0));
}
.lb { border:0; padding:0; background:transparent; max-width:min(1100px,94vw); max-height:92vh; }
.lb::backdrop { background:rgba(20,20,20,.92); }
.lb img { max-height:82vh; width:auto; margin-inline:auto; border-radius:var(--r); }
.lb-cap { color:var(--white); text-align:center; font-size:.92rem; margin:12px 0 0; }
.lb-close {
position:absolute; top:-6px; right:-6px; width:48px; height:48px; border-radius:50%;
background:var(--white); color:var(--ink); border:0; font-size:1.6rem; line-height:1; cursor:pointer;
}
/* ---------- area pills ------------------------------------------------ */
.pills { display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0; }
.pills li { margin:0; }
.pills a {
display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px;
background:var(--white); border:1.5px solid var(--rule); color:var(--ink);
font-weight:600; font-size:.94rem; text-decoration:none;
}
.pills a:hover { border-color:var(--ink); background:var(--ink); color:var(--white); }
.on-ink .pills a { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:var(--white); }
.on-ink .pills a:hover { background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
/* ---------- CTA band --------------------------------------------------- */
.cta-band { background:var(--yellow); color:var(--ink); }
.cta-band .container { display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between; padding-block:clamp(32px,4vw,52px); }
.cta-band h2 { margin:0; max-width:18ch; font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem); }
.cta-band p { margin:.4em 0 0; font-weight:600; }
.cta-band .btn-ghost { background:var(--ink); color:var(--white); border-color:var(--ink); }
.cta-band .btn-ghost:hover { background:var(--white); color:var(--ink); }
.cta-band .btn-primary { background:var(--white); border-color:var(--white); }
.cta-band .btn-primary:hover { background:var(--ink); color:var(--white); border-color:var(--ink); }
/* ---------- contact ---------------------------------------------------- */
.contact-grid { display:grid; gap:clamp(24px,3vw,44px); align-items:start; }
@media (min-width:920px) { .contact-grid { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
.contact-list { list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px; }
.contact-list li { margin:0; }
.contact-list a { display:flex; gap:14px; align-items:center; text-decoration:none; color:inherit;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
border-radius:var(--r-lg); padding:14px 16px; min-height:64px; }
.contact-list a:hover { border-color:var(--sky); }
.contact-ic { flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
background:rgba(63,182,217,.16); color:var(--sky); }
.contact-list b { display:block; font-size:1.02rem; }
.contact-list span { font-size:.86rem; color:#C9C8C1; }
/* ---------- footer ------------------------------------------------------ */
.ftr { background:var(--ink); color:#C9C8C1; padding-block:clamp(44px,5vw,68px) 0; }
.ftr h3 { color:var(--white); font-size:.84rem; letter-spacing:.14em; text-transform:uppercase;
font-family:var(--sans); font-weight:800; margin-bottom:1em; }
.ftr-grid { display:grid; gap:clamp(26px,3vw,44px); grid-template-columns:1.3fr 1fr 1fr 1.1fr; }
@media (max-width:900px) { .ftr-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .ftr-grid { grid-template-columns:1fr; } }
.ftr img.ftr-logo { height:84px; width:auto; margin-bottom:18px; }
.ftr ul { list-style:none; margin:0; padding:0; }
.ftr li { margin:0 0 2px; }
.ftr a { color:#C9C8C1; text-decoration:none; font-size:.94rem; display:inline-block;
padding:5px 0; min-height:34px; }
.ftr a:hover { color:var(--yellow); }
.ftr p { font-size:.94rem; }
.ftr-tel { display:flex; align-items:center; gap:.5em; color:var(--white)!important; font-weight:700; font-size:1.05rem!important; }
.ftr-tel svg { color:var(--sky); }
.ftr-wa { display:inline-flex; align-items:center; gap:.5em; min-height:44px; }
.ftr-wa svg { color:var(--wa); width:18px; height:18px; flex:none; } /* on the black footer, 6.4:1 */
.ftr-bottom { margin-top:clamp(32px,4vw,52px); border-top:1px solid rgba(255,255,255,.13);
padding-block:20px 26px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
font-size:.84rem; }
.ftr-bottom p { margin:0; font-size:.84rem; }
/* ---------- mobile sticky bar -------------------------------------------- */
.stickybar { display:none; }
@media (max-width:860px) {
:root { --bar:calc(62px + env(safe-area-inset-bottom,0px)); }
.stickybar {
display:grid; grid-template-columns:1fr 1fr; gap:0;
position:fixed; left:0; right:0; bottom:0; z-index:80;
background:var(--ink); border-top:1px solid rgba(255,255,255,.16);
padding-bottom:env(safe-area-inset-bottom,0px);
}
.stickybar a {
display:flex; align-items:center; justify-content:center; gap:.5em;
min-height:62px; color:var(--white); text-decoration:none; font-weight:700; font-size:1rem;
}
.stickybar a + a { border-left:1px solid rgba(255,255,255,.16); }
/* Equal halves, each its own colour, each a 62px target. Call takes the
primary blue so it matches every other primary on the site; WhatsApp
keeps its own brand green because a green button IS the WhatsApp
affordance and recolouring it loses the recognition. */
.stickybar a { flex:1 1 50%; }
.sb-call { background:var(--deep); color:var(--white)!important; }
.sb-call:hover { background:var(--link-dark); }
.sb-wa { background:var(--wa); color:var(--ink)!important; }
.sb-wa:hover { background:var(--wa-dark); color:var(--white)!important; }
.stickybar svg { width:20px; height:20px; flex:none; }
.aside { position:static; }
/* 44px minimum on every control on a phone. The footer link list and the
aside link lists were 34px and 42px, which is a thumb miss. */
.ftr a,.ftr-bottom a { padding:10px 0; min-height:44px; }
.aside-card li a { padding:11px 0; min-height:44px; }
.field.checkbox { min-height:44px; align-items:center; }
.field.checkbox input { width:24px; height:24px; min-height:24px; }
}
/* ---------- reveal -------------------------------------------------------
The hidden state is behind a class the script itself adds before first
paint, so a script that fails to run leaves a fully visible page rather
than a blank one. Controls, forms, the header and the sticky bar are never
animated: a button that is invisible when a thumb arrives is a lost call. */
html.rv [data-rv] { opacity:0; transform:translateY(16px); }
html.rv [data-rv].is-in { opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.6,.2,1) var(--rv-d,0ms),transform .7s cubic-bezier(.2,.6,.2,1) var(--rv-d,0ms); }
html.rv [data-rv].is-out { transition:opacity .45s ease,transform .45s ease; }
html.no-anim [data-rv],
html.no-anim [data-rv].is-out { opacity:1!important; transform:none!important; transition:none!important; }
@media (prefers-reduced-motion:reduce) {
html.rv [data-rv],html.rv [data-rv].is-out { opacity:1!important; transform:none!important; transition:none!important; }
}
/* ---------- print ------------------------------------------------------- */
@media print {
.hdr,.stickybar,.drawer,.cta-band,.quote-card { display:none!important; }
body { padding-bottom:0; }
}