. Visually identical: main covers the whole content column, and the dark sections paint over it anyway. This one is load-bearing - putting it on html did nothing. */ html { background: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .rv { opacity: 1 !important; transform: none !important; } } body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.65; color: var(--grey-9); background: var(--ink); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; } h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); font-weight: 800; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.028em; text-wrap: balance; } h1 { font-size: clamp(2.2rem, 1.2rem + 3.9vw, 4.1rem); font-weight: 900; letter-spacing: -.038em; line-height: 1.02; } /* A heading split into explicit lines should not also be auto-balanced. */ .hero h1, .coverage h2 { text-wrap: nowrap; } .hero h1 span, .hero h1 em, .coverage h2 span { display: block; } @media (max-width: 720px) { .hero h1, .coverage h2 { text-wrap: pretty; } } h2 { font-size: clamp(1.8rem, 1.3rem + 2.1vw, 2.9rem); letter-spacing: -.032em; } h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.024em; line-height: 1.2; } h4 { font-size: 1.02rem; } /* One accent word per heading. Cheaper than decoration and it guides the eye to the thing the section is actually about. */ h1 em, h2 em, h3 em { font-style: normal; color: var(--orange-d); } .hero h1 em, .phead h1 em { color: var(--gold); } /* Amber-on-amber is invisible, so the accent here is a rule under the word. */ .coverage h2 em { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255,255,255,.9); text-decoration-thickness: 6px; text-underline-offset: 8px; } p { margin: 0 0 1.05em; text-wrap: pretty; } /* Caps labels need looser tracking the smaller they get. */ .eyebrow, .kicker, .card-label, .proof-t i, .hdr-phone-t i, .stat span { font-feature-settings: "cv11"; } a { color: var(--orange-d); text-underline-offset: 2px; } a:hover { color: #7a4c04; } img { max-width: 100%; height: auto; display: block; } strong, b { font-weight: 700; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-left: calc(22px + env(safe-area-inset-left, 0px)); padding-right: calc(22px + env(safe-area-inset-right, 0px)); } .narrow { max-width: 800px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hp { position: absolute; left: -9999px; } .skip { position: absolute; left: -9999px; background: var(--orange); color: var(--ink); padding: 12px 18px; z-index: 300; font-weight: 800; } .skip:focus { left: 0; top: 0; } :focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; } .ic { width: 1.15em; height: 1.15em; flex: none; } .proof-ic .ic { stroke-width: 1.5; } .card-fig-mark .ic { stroke-width: 1.3; } .svc-ic .ic { stroke-width: 1.8; } .hdr-phone-ic .ic { stroke-width: 2.1; } /* Scroll reveal */ /* The sideways reveals start 26px right of where they land, which is 4px past the wrap's own gutter. That is enough to put a horizontal scrollbar on the page until the section reveals - and permanently with JS off. Clip it. `clip` rather than `hidden`: `hidden` would make this a scroll container and break `position: sticky` on the contact sidebar. */ main { overflow-x: clip; background: var(--white); } .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } .rv.in { opacity: 1; transform: none; } /* Direction-aware variants for split layouts. */ .rv-l { transform: translateX(-26px); } .rv-r { transform: translateX(26px); } .rv-l.in, .rv-r.in { transform: none; } /* --- Buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .8em 1.5em; border-radius: var(--r-pill); font-weight: 800; font-size: .98rem; letter-spacing: -.01em; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, background .16s, color .16s; white-space: nowrap; font-family: inherit; line-height: inherit; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-lg { padding: 1em 1.9em; font-size: 1.06rem; } /* Full-width buttons may wrap. `white-space: nowrap` on a long label such as "WhatsApp 083 074 6977" sets a min-content floor that forces the whole sidebar column wider than a 320px screen. */ .btn-block { display: flex; width: 100%; margin-bottom: 10px; font-size: 1.04rem; padding-block: .92em; white-space: normal; text-align: center; } .btn-call { background: var(--orange); color: var(--ink); box-shadow: 0 6px 20px rgba(232,153,43,.4); } .btn-call:hover { background: #f2a83d; color: var(--ink); box-shadow: 0 10px 28px rgba(232,153,43,.5); } .btn-blue { background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(27,29,33,.26); } .btn-blue:hover { background: #2f333b; color: #fff; } .btn-wa { background: var(--wa); color: #fff; box-shadow: 0 6px 18px rgba(37,211,102,.42); } .btn-wa:hover { background: var(--wa-d); color: #fff; box-shadow: 0 10px 28px rgba(37,211,102,.5); } .btn-wa .ic { width: 1.3em; height: 1.3em; } /* Oversized paired hero CTAs - the two things every visitor is here to do. */ .btn-xl { padding: .9em 1.8em; font-size: 1.18rem; font-weight: 800; border-radius: 14px; } .btn-xl .ic { width: 1.55em; height: 1.55em; } .btn-xl span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; font-family: var(--num); font-weight: 700; letter-spacing: .004em; font-feature-settings: "tnum" 1; } .btn-xl span i { font-style: normal; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .85; margin-bottom: 3px; } .hero-btns-big { gap: 14px; } @media (max-width: 560px) { .hero-btns-big { flex-direction: column; gap: 11px; } .hero-btns-big .btn { width: 100%; justify-content: flex-start; padding-left: 1.3em; } } .btn-ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); } .btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; } .btn-outline { background: #fff; color: var(--ink); border-color: var(--grey-2); } .btn-outline:hover { border-color: var(--orange); color: var(--orange-d); background: #fff; } /* --- Header -------------------------------------------------------------- */ .hdr-top { background: var(--ink); color: rgba(255,255,255,.66); font-size: .81rem; } .hdr-top-in { display: flex; gap: 24px; align-items: center; justify-content: space-between; min-height: 40px; } .hdr-top-in span, .hdr-top-in a { display: inline-flex; align-items: center; gap: .45em; color: inherit; text-decoration: none; } .hdr-top-in a { min-height: 26px; } .hdr-top-in a:hover { color: #fff; } .hdr-top-in .ic { color: var(--orange); width: 1em; height: 1em; } .hdr { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); border-bottom: 1px solid var(--grey-2); transition: box-shadow .2s ease; } .hdr.stuck { box-shadow: 0 6px 26px rgba(22,24,31,.10); } .hdr-in { display: flex; align-items: center; gap: 20px; min-height: 82px; } .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; margin-right: auto; } .brand img, .brand svg { height: 44px; width: auto; flex: none; } .brand-img { height: 38px !important; } /* The amber silhouette stands in for the printed mark wherever the background is dark. Swapped by context, so nothing has to remember to pick one. */ .brand-img-dark { display: none; height: 34px; width: auto; } .ftr .brand-img { display: none; } .ftr .brand-img-dark { display: block; } @media (max-width: 430px) { .brand-img { height: 32px !important; } .brand-img-dark { height: 30px; } } .brand-mark { color: var(--ink); } .ftr .brand-mark { color: #fff; } .brand-txt { display: flex; flex-direction: column; line-height: 1.08; } .brand-txt b { font-family: var(--display); font-size: 1.24rem; font-weight: 900; letter-spacing: -.035em; } /* Bright amber on white is only 2.3:1. Deep amber on the light header, bright amber in the dark footer - same brand, readable in both. */ .brand-txt i { font-style: normal; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-d); font-weight: 800; } .ftr .brand-txt i { color: var(--gold); } .nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; } .nav a { color: var(--grey-9); text-decoration: none; padding: .55em .78em; border-radius: var(--r-s); font-size: .93rem; font-weight: 600; display: block; letter-spacing: -.012em; } .nav a:hover { background: var(--grey-1); color: var(--ink); } .nav a[aria-current="page"] { color: var(--orange-d); background: var(--orange-l); } /* The phone number is the product. It gets a labelled block, not a pill. */ .hdr-cta { display: flex; align-items: center; gap: 14px; flex: none; } .hdr-phone { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); } .hdr-phone-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--orange); color: var(--ink); box-shadow: 0 4px 12px rgba(232,153,43,.42), inset 0 -2px 0 rgba(0,0,0,.10); transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s; } .hdr-phone-ic .ic { width: 21px; height: 21px; } .hdr-phone:hover .hdr-phone-ic { transform: translateY(-2px) rotate(-6deg); box-shadow: 0 8px 20px rgba(232,153,43,.55), inset 0 -2px 0 rgba(0,0,0,.10); } .hdr-phone-t { display: flex; flex-direction: column; line-height: 1.15; } .hdr-phone-t i { font-style: normal; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-d); } .hdr-phone-t b { font-family: var(--num); font-size: 1.22rem; font-weight: 700; letter-spacing: .002em; font-feature-settings: "tnum" 1; } .hdr-wa { padding: .74em 1.15em; font-size: .93rem; } @media (max-width: 1320px) { .hdr-phone-t { display: none; } .hdr-wa span { display: none; } .hdr-wa { padding: .74em .95em; } } @media (max-width: 1080px) { .hdr-wa { display: none; } .hdr-phone-t { display: flex; } } @media (max-width: 560px) { .hdr-phone-t i { display: none; } .hdr-phone-t b { font-size: 1.05rem; } } .burger { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; cursor: pointer; background: var(--grey-1); border: 1px solid var(--grey-2); border-radius: 12px; color: var(--ink); transition: background .16s, border-color .16s; } .burger:hover { background: var(--grey-2); } .burger .ic { width: 24px; height: 24px; } .burger .burger-close { display: none; } .burger[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: #fff; } .burger[aria-expanded="true"] .burger-open { display: none; } .burger[aria-expanded="true"] .burger-close { display: block; } @media (max-width: 1080px) { .hide-sm { display: none; } .burger { display: inline-flex; order: 3; } .hdr-in { min-height: 72px; gap: 12px; } .hdr-in { flex-wrap: wrap; } .nav { order: 5; width: 100%; display: none; border-top: 1px solid var(--grey-2); margin: 0 -22px; padding: 0 22px; } .nav.open { display: block; animation: navIn .22s cubic-bezier(.2,.7,.3,1); } @keyframes navIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .nav ul { flex-direction: column; gap: 2px; padding: 10px 0 16px; } .nav a { padding: .9em .8em; font-size: 1rem; border-radius: 10px; } .nav a[aria-current="page"] { background: var(--orange-l); } .hdr-call span { display: none; } .hdr-call { padding: .75em .95em; } } @media (max-width: 430px) { .hdr-top-in { font-size: .74rem; } .brand img, .brand svg { height: 38px; } } /* --- Google rating badge ------------------------------------------------- Uses Google's real mark and colours. People trust the source more than they trust us saying "5 stars", so we point straight at the profile. ------------------------------------------------------------------------ */ .gbadge { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; background: #fff; border: 1px solid var(--grey-2); border-radius: var(--r-pill); padding: 10px 22px 10px 18px; color: var(--ink); box-shadow: var(--sh-1); transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s; } .gbadge:hover { transform: translateY(-2px); box-shadow: var(--sh-2); color: var(--ink); } .gbadge .gmark { flex: none; } .gbadge-txt { display: flex; align-items: center; gap: 8px; } .gbadge-txt b { font-size: 1.32rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; } .gbadge .stars { font-size: 1.02rem; letter-spacing: .06em; } .gbadge-sub { display: flex; flex-direction: column; line-height: 1.25; font-size: .84rem; font-weight: 650; color: var(--grey-6); border-left: 1px solid var(--grey-2); padding-left: 14px; } .gbadge-sub i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--orange-d); } .gbadge-hero { margin: 0; } .gsummary { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; } @media (max-width: 460px) { .gbadge { padding: 10px 16px; gap: 10px; width: 100%; } .gbadge-sub { padding-left: 10px; font-size: .78rem; } } /* --- Breadcrumbs --------------------------------------------------------- */ .crumbs { background: var(--grey-1); font-size: .84rem; } .crumbs ul { display: flex; flex-wrap: wrap; gap: .4em; list-style: none; margin: 0; padding: 11px 0; } .crumbs li + li::before { content: "/"; margin-right: .4em; color: var(--grey-4); } .crumbs a { color: var(--grey-6); text-decoration: none; } .crumbs a:hover { color: var(--orange-d); } .crumbs [aria-current] { color: var(--ink); font-weight: 600; } /* --- Hero ---------------------------------------------------------------- */ .hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: clamp(560px, 80vh, 800px); } .hero-bg { position: absolute; inset: 0; z-index: -2; } .hero-bg img { object-position: 55% 50%; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 1; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(93deg, rgba(17,18,22,.66) 0%, rgba(17,18,22,.38) 44%, rgba(17,18,22,.06) 78%, rgba(17,18,22,0) 100%), linear-gradient(0deg, rgba(17,18,22,.62) 0%, rgba(17,18,22,.06) 40%, rgba(17,18,22,0) 68%); } /* Type carries its own contrast so the scrim can stay light. */ .hero h1, .hero .lede, .hero-ticks { text-shadow: 0 2px 18px rgba(10,11,14,.8), 0 1px 3px rgba(10,11,14,.5); } /* Narrow screens: text sits over the middle of the frame, so the scrim goes vertical instead of left-weighted. */ @media (max-width: 860px) { .hero::after { background: linear-gradient(180deg, rgba(17,18,22,.6) 0%, rgba(17,18,22,.5) 45%, rgba(17,18,22,.8) 100%); } } .hero-in { padding: clamp(64px, 8vw, 112px) 0; max-width: 800px; } .hero h1 { color: #fff; margin-bottom: .3em; } .hero h1 em { font-style: normal; color: var(--orange); } /* --- Eyebrow labels ------------------------------------------------------ Three variants, because a pill that reads well on a photo reads washed-out on white. Applied automatically by context - no extra classes to remember. ------------------------------------------------------------------------ */ .eyebrow, .sec .eyebrow, .sec-head .eyebrow, .why-txt .eyebrow, .coverage-txt .eyebrow { display: inline-flex; align-items: center; gap: .6em; font-size: 1.09rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; margin: 0 0 .8em; color: var(--orange-d); } .eyebrow .ic { width: 1.15em; height: 1.15em; } /* On light sections: the word alone. No rules, no chip - the tracking and the colour are doing enough work. */ .sec-head.center .eyebrow { justify-content: center; } /* On dark headers: the same rule-and-caps treatment as the light sections, in gold. No chip - a pill floating over a photo reads as leftover UI. */ .hero .eyebrow, .phead .eyebrow, .kicker { display: inline-flex; align-items: center; gap: .8em; font-size: .88rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 1.5em; text-shadow: 0 1px 12px rgba(0,0,0,.55); } /* No rule over a photo - it reads as a stray mark. The light sections keep theirs, where a small label needs anchoring in whitespace. */ .hero .eyebrow .ic, .phead .eyebrow .ic { color: var(--gold); } /* "Open now" pulse. A live signal beats a static clock icon for a 24/7 trade. */ .pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #35d47a; flex: none; box-shadow: 0 0 10px rgba(53,212,122,.9); } .pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #35d47a; animation: pulse 2.2s cubic-bezier(.2,.7,.3,1) infinite; } @keyframes pulse { 0% { transform: scale(.55); opacity: .9; } 70%, 100% { transform: scale(1.25); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pulse::after { animation: none; opacity: .45; transform: scale(1); } } /* Google-branded variant: white chip, real mark, dark type. */ .sec-head .eyebrow-google { margin-bottom: 1.9em; } .eyebrow-google { color: var(--ink); background: #fff; border: 1px solid var(--grey-2); padding: .5em 1.1em .5em .8em; border-radius: var(--r-pill); box-shadow: var(--sh-1); letter-spacing: .1em; } .sec .eyebrow-google::before, .sec-head.center .eyebrow-google::after { display: none; } .eyebrow-google .gmark { flex: none; } /* `.sec-head p { color: grey }` outranks `.eyebrow`, and the section rule pseudo-elements outrank the Google chip. Both need matching specificity. */ .sec .eyebrow, .sec-head .eyebrow { color: var(--orange-d); } .sec .eyebrow-google, .sec-head .eyebrow-google { color: var(--ink); } .sec .eyebrow-google::before, .sec .eyebrow-google::after, .sec-head .eyebrow-google::before, .sec-head .eyebrow-google::after, .sec-head.center .eyebrow-google::before, .sec-head.center .eyebrow-google::after { content: none; } .lede { font-size: clamp(1.06rem, .98rem + .45vw, 1.26rem); line-height: 1.6; color: rgba(255,255,255,.86); max-width: 56ch; } .sec .lede, .phead-light .lede { color: var(--grey-6); } .hero-btns { display: flex; flex-wrap: wrap; gap: 13px; margin: 2.1em 0 0; } .hero-trust { display: flex; align-items: center; gap: 18px 30px; flex-wrap: wrap; margin-top: 2.2em; padding-top: 1.8em; border-top: 1px solid rgba(255,255,255,.18); } .hero-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .55em 1.6em; font-size: .93rem; font-weight: 600; } .hero-ticks li { display: flex; align-items: center; gap: .5em; } .hero-ticks .ic { color: var(--gold); width: 1.05em; height: 1.05em; stroke-width: 2.6; } .hero-rating { display: inline-flex; align-items: center; gap: .6em; margin: 1.9em 0 0; font-size: .93rem; color: rgba(255,255,255,.78); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); padding: .6em 1.1em; border-radius: var(--r-pill); } .hero-rating b { color: #fff; } .stars { color: #ffc531; letter-spacing: .1em; } /* --- Page head (inner pages) --------------------------------------------- */ .phead { position: relative; background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; padding: clamp(42px,5vw,76px) 0; } .phead::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 500px at 82% -10%, rgba(242,183,79,.22), transparent 62%), radial-gradient(700px 420px at 10% 120%, rgba(91,74,158,.3), transparent 62%); } .phead h1 { color: #fff; } .phead .lede { color: rgba(255,255,255,.8); } .phead-in { max-width: 780px; } /* --- Sections ------------------------------------------------------------ */ .sec { padding: clamp(56px, 6.5vw, 104px) 0; } /* Two sections that share a background read as one block, so the gap between them is halved rather than doubled. Where the background CHANGES the full padding stays, otherwise the heading ends up jammed against the colour break above it. Both selectors are written at the same specificity so neither can quietly override the other. */ .sec:not(.sec-grey) + .sec:not(.sec-grey) { padding-top: 0; } .sec-grey + .sec-grey { padding-top: 0; } .sec-grey { background: var(--grey-1); } .sec-head { max-width: 700px; margin-bottom: 48px; } .sec-head h2 { margin-bottom: .38em; } .sec-head.center { margin-inline: auto; text-align: center; max-width: 660px; } .sec-head p { color: var(--grey-6); font-size: 1.09rem; line-height: 1.6; margin: 0; } .sec-foot { margin-top: 38px; display: flex; gap: 12px; flex-wrap: wrap; } .sec-foot.center { justify-content: center; } /* --- Proof band ---------------------------------------------------------- Sits directly under the hero and reads as part of it. The hero photo runs behind it at low opacity purely as texture - it is already downloaded, so it costs nothing extra. ------------------------------------------------------------------------ */ .proof { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: #fff; padding: 34px 0; } .proof::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/assets/img/hero.jpg") center 42% / cover no-repeat; opacity: .16; filter: grayscale(.4); } .proof::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(27,29,33,.96) 0%, rgba(27,29,33,.8) 50%, rgba(27,29,33,.96) 100%); } .proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .proof-i { display: flex; align-items: center; gap: 16px; padding: 4px 24px; } .proof-i:first-child { padding-left: 0; } .proof-ic { flex: none; color: #fff; } .proof-ic .ic { width: 38px; height: 38px; stroke-width: 1.4; } /* Brand rule between the mark and the label. */ .proof-rule { flex: none; width: 3px; align-self: stretch; min-height: 46px; border-radius: 2px; background: var(--orange); } .proof-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .proof-t i { font-style: normal; font-size: 11.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); } .proof-t b { font-family: var(--display); font-size: 1.04rem; font-weight: 750; letter-spacing: -.018em; line-height: 1.25; } @media (max-width: 1080px) { .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 0; } .proof-i:nth-child(odd) { padding-left: 0; } } @media (max-width: 560px) { .proof { padding: 26px 0; } .proof-grid { grid-template-columns: 1fr; gap: 20px; } .proof-i { padding: 0; } .proof-ic .ic { width: 30px; height: 30px; } .proof-rule { min-height: 38px; } } /* --- Scrolling ticker ---------------------------------------------------- Pure CSS: the list is rendered twice and the track slides exactly -50%, so the seam never shows and no JavaScript runs. ------------------------------------------------------------------------ */ .ticker { background: var(--orange); color: var(--ink); overflow: hidden; padding: 13px 0; position: relative; border-top: 1px solid rgba(0,0,0,.12); border-bottom: 1px solid rgba(0,0,0,.12); } .ticker-track { display: flex; width: max-content; animation: tick 44s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } .ticker-row { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; } .ticker-row li { display: flex; align-items: center; white-space: nowrap; font-family: var(--display); font-size: .95rem; font-weight: 750; letter-spacing: .01em; } .ticker-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(36,31,43,.42); margin: 0 26px; flex: none; } @keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } .ticker { padding: 13px 0; } .ticker-row:last-child { display: none; } .ticker-track { flex-wrap: wrap; width: 100%; justify-content: center; } } @media (max-width: 560px) { .ticker-row li { font-size: .86rem; } .ticker-dot { margin: 0 18px; } } /* --- Stats band ---------------------------------------------------------- */ .stats { background: linear-gradient(100deg, var(--ink) 0%, #2c3038 100%); color: #fff; padding: clamp(38px,4.5vw,64px) 0; position: relative; overflow: hidden; } .stats::after { content:""; position:absolute; inset:0; background: radial-gradient(760px 360px at 12% 130%, rgba(242,183,79,.2), transparent 64%), radial-gradient(620px 320px at 88% -20%, rgba(91,74,158,.34), transparent 62%); pointer-events:none; } /* --- Artwork backdrop for the stats band ---------------------------------- The scrim is deliberately heavy and flat rather than tuned to one picture. Whatever ends up in band-art.png, the numbers keep their contrast: even against solid bright orange the gold measures 6.1:1 and the labels 6.3:1. ------------------------------------------------------------------------ */ .band-hills { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; } .band-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .band-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .band-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(36,31,43,.90) 0%, rgba(36,31,43,.74) 30%, rgba(36,31,43,.74) 70%, rgba(36,31,43,.90) 100%), rgba(36,31,43,.30); } /* With artwork behind it the decorative radials just add mud. */ .stats.has-art::after { display: none; } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; z-index: 1; } .stat { text-align: center; } .stat b { display: block; font-family: var(--display); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--gold); } .stat span { display: block; margin-top: .6em; font-size: .82rem; color: rgba(255,255,255,.7); font-weight: 600; letter-spacing: .04em; } @media (max-width: 720px) { .stat-grid { grid-template-columns: 1fr 1fr; gap: 30px 18px; } } /* --- Cards --------------------------------------------------------------- */ .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .cards-3 { grid-template-columns: repeat(3, 1fr); } .cards-2 { grid-template-columns: repeat(2, 1fr); } /* Photo-led, borderless. A card box around a photo adds a second frame to something that already has one, and it is what makes a grid look like a template. The photo is the card. */ .card { display: flex; flex-direction: column; text-decoration: none; color: var(--grey-9); background: none; border: 0; border-radius: 0; } .card:hover { color: var(--grey-9); } .card-fig { display: block; position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: 14px; background: var(--grey-1); box-shadow: 0 1px 2px rgba(22,24,31,.06); } .card-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.3,1); } .card:hover .card-fig img { transform: scale(1.045); } /* No photo yet: a branded panel with the mark, same shape as a photo. */ .card-fig-mark { display: grid; place-items: center; background: linear-gradient(135deg, #26292f 0%, #14161a 100%); } .card-fig-mark::after { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 220px at 78% 12%, rgba(242,183,79,.26), transparent 62%); } .card-fig-mark .ic { width: 64px; height: 64px; color: var(--gold); stroke-width: 1.3; position: relative; z-index: 1; transition: transform .35s cubic-bezier(.2,.7,.3,1); } .card:hover .card-fig-mark .ic { transform: scale(1.08); } /* Label rides on the photo as a chip, so the text block below is just title, sentence, action - and the eye has somewhere to land. */ .card-chip { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: .5em; padding: .5em .95em; border-radius: var(--r-pill); background: var(--orange); color: var(--ink); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(36,31,43,.28); transition: transform .25s cubic-bezier(.2,.7,.3,1); } .card-chip .ic { width: 1.15em; height: 1.15em; } .card:hover .card-chip { transform: translateY(-3px); } .card-fig::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(20,17,24,.55) 0%, rgba(20,17,24,.12) 26%, transparent 48%); } .card-fig-mark::after { background: radial-gradient(420px 220px at 78% 12%, rgba(242,183,79,.26), transparent 62%); } .card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 2px 0; } .card h3, .card h2 { margin: 0 0 .4em; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); font-weight: 800; transition: color .16s; } .card:hover h3 { color: var(--orange-d); } .card p { font-size: .97rem; color: var(--grey-6); margin: 0; line-height: 1.65; flex: 1; max-width: 46ch; } .card-more { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--grey-2); font-weight: 750; font-size: .93rem; color: var(--ink); } .card-go { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1.5px solid var(--grey-2); color: var(--ink); transition: background .2s, border-color .2s, color .2s, transform .2s; } .card-go .ic { width: 1.05em; height: 1.05em; transition: transform .2s; } .card:hover .card-go { background: var(--orange); border-color: var(--orange); color: var(--ink); } .card:hover .card-go .ic { transform: translateX(3px); } .cards { gap: 44px 34px; } .cards-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1040px) { .cards, .cards-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .cards, .cards-3, .cards-2 { grid-template-columns: 1fr; } } /* --- Service blocks (on /services/) -------------------------------------- */ .svc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; padding: clamp(38px,4vw,58px) 0; border-top: 1px solid var(--grey-2); scroll-margin-top: 100px; } .svc:first-of-type { border-top: 0; } .svc:nth-child(even) .svc-img { order: 2; } .svc-img img { border-radius: var(--r); box-shadow: var(--sh-2); width: 100%; aspect-ratio: 16/10; object-fit: cover; } .svc h2 { margin-bottom: .35em; } .svc-ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--gold-l); color: var(--gold-d); margin-bottom: 14px; } .svc-ic .ic { width: 24px; height: 24px; } .svc-btns { display: flex; gap: 10px; flex-wrap: wrap; } .svc-noimg { grid-template-columns: 1fr; } .svc-noimg .svc-txt { max-width: 78ch; } @media (max-width: 860px) { .svc { grid-template-columns: 1fr; } .svc:nth-child(even) .svc-img { order: 0; } } /* --- Split --------------------------------------------------------------- */ .split { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px, 4.5vw, 64px); align-items: center; } .split-img { position: relative; } .split-img img { border-radius: var(--r); box-shadow: var(--sh-2); width: 100%; } .split-txt h2 { margin-top: 0; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } } /* One inset shared by both columns, so "Send us a message" starts on exactly the same line as "Call 24/7" inside the card. Tying them to one value means changing the card padding cannot silently knock the headings out of line. */ .split-wide { --col-inset: 30px; display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: clamp(30px, 4vw, 56px); align-items: start; } .split-wide > .prose { padding-top: var(--col-inset); } .split-wide .side-card { padding-top: var(--col-inset); } @media (max-width: 1000px) { .split-wide { grid-template-columns: minmax(0,1fr); } } /* --- Why us -------------------------------------------------------------- This block exists for one reason: it is where someone decides whether to trust a stranger with their car. So it is built as a set of standards - a credential badge overlapping the photograph, then four specific promises - rather than a photo beside a tick list. ------------------------------------------------------------------------ */ .why-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4.5vw, 60px); align-items: center; } .why-media { position: relative; } /* Square, biased right. An earlier 4:5 crop cut the front off the truck; at 1:1 the whole vehicle stays in frame - bed, cab and nose - and the column heights come within sight of each other. Checked against the source before committing to it, rather than guessed. */ .why-media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: 55% 50%; border-radius: 18px; box-shadow: var(--sh-2); } .why-badge { position: absolute; right: -18px; bottom: -22px; max-width: 270px; display: flex; align-items: flex-start; gap: 12px; background: var(--orange); color: var(--ink); padding: 16px 20px; border-radius: 16px; box-shadow: 0 16px 34px rgba(36,31,43,.26); } .why-badge .ic { width: 26px; height: 26px; flex: none; margin-top: 1px; } .why-badge span { display: flex; flex-direction: column; font-size: .84rem; line-height: 1.4; } .why-badge b { font-family: var(--display); font-size: 1.02rem; letter-spacing: -.02em; margin-bottom: 2px; } .why-txt h2 { margin-bottom: .45em; } .why-txt > p { color: var(--grey-6); max-width: 52ch; } /* A divided list, not four little boxes. Cards inside an already-panelled section read as a box in a box, and squeezing four of them into a 2x2 left no room for the copy to breathe. Rows give the text its width back and the set reads as one thing. */ .why-list { list-style: none; margin: 1.7em 0 2.1em; padding: 0; } .why-list li { display: flex; align-items: flex-start; gap: 18px; padding: 18px 4px; border-top: 1px solid var(--grey-2); } .why-list li:last-child { border-bottom: 1px solid var(--grey-2); } /* Bare marks. A tinted tile around each one is another box inside a box, and it squeezed the icon down to the point of being unreadable. */ .why-ic { display: block; flex: none; color: var(--orange); margin-top: 3px; transition: transform .2s cubic-bezier(.2,.7,.3,1); } .why-ic .ic { width: 30px; height: 30px; stroke-width: 1.7; } .why-list li:hover .why-ic { transform: translateY(-2px); } .why-copy { display: flex; flex-direction: column; min-width: 0; } .why-copy b { font-family: var(--display); font-size: 1.09rem; font-weight: 800; letter-spacing: -.022em; color: var(--ink); margin-bottom: .25em; } .why-copy > span { font-size: .95rem; line-height: 1.6; color: var(--grey-6); } @media (max-width: 900px) { .why-in { grid-template-columns: 1fr; gap: 44px; } /* Stacked, a square photo is a lot of scrolling. */ .why-media img { aspect-ratio: 4/3; } .why-badge { right: 12px; bottom: -20px; max-width: 300px; } } @media (max-width: 560px) { .why-badge { position: static; max-width: none; margin-top: 14px; border-radius: 14px; } .why-media img { border-radius: 14px; } .why-list li { gap: 14px; padding: 16px 0; } .why-ic .ic { width: 26px; height: 26px; } } /* --- Prose --------------------------------------------------------------- */ .prose { max-width: 74ch; min-width: 0; } .prose h2 { margin-top: 1.75em; } .prose h3 { margin-top: 1.5em; font-size: 1.08rem; } .prose > :first-child { margin-top: 0; } /* The tick was a flex ITEM, which made every inside the row a flex item too - so "Fixed price on the call." became its own narrow column with the description stranded beside it. Absolute-positioning the tick lets the row flow as ordinary text, and bold leads stay inline where they belong. */ .ticks { list-style: none; padding: 0; margin: 0 0 1.4em; display: grid; gap: .65em; } .ticks li { position: relative; padding-left: 1.9em; line-height: 1.6; } .ticks .ic { position: absolute; left: 0; top: .28em; color: var(--green); width: 1.15em; height: 1.15em; } .ticks li b { color: var(--ink); } .two-col { grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } } .steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; } .steps li { counter-increment: s; position: relative; padding: 20px 22px 20px 68px; background: #fff; border: 1px solid var(--grey-2); border-radius: var(--r); line-height: 1.55; } .steps li::before { content: counter(s); position: absolute; left: 20px; top: 18px; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: var(--ink); display: grid; place-items: center; font-weight: 800; font-size: .95rem; } .steps-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .steps-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .steps-4 { grid-template-columns: 1fr; } } /* --- How it works -------------------------------------------------------- Three illustrated columns and a closing line. The artwork is inline SVG in currentColor, so it inherits the theme rather than being a flat PNG. ------------------------------------------------------------------------ */ .how-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; } .how { text-align: center; } .how-art { display: block; margin: 0 auto 20px; width: clamp(190px, 23vw, 268px); color: var(--ink); } .how-art .art { width: 100%; height: auto; display: block; fill: currentColor; } .how-art img { width: 100%; height: auto; display: block; } .how h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.75rem); font-weight: 900; letter-spacing: -.03em; margin: 0 0 .45em; } .how h3 i { font-style: normal; color: var(--orange-d); } .how p { font-size: .96rem; color: var(--grey-6); line-height: 1.65; margin: 0 auto; max-width: 34ch; } .how-tag { text-align: center; margin: clamp(44px, 5vw, 72px) 0 0; font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 1.05rem + 2.9vw, 3.2rem); letter-spacing: -.04em; line-height: 1.1; color: var(--ink); } .how-tag em { font-style: normal; color: var(--orange-d); } @media (max-width: 820px) { .how-grid { grid-template-columns: 1fr; gap: 40px; max-width: 420px; margin-inline: auto; } .how-art { width: 120px; margin-bottom: 16px; } } /* --- Sidebar ------------------------------------------------------------- */ .side { display: grid; gap: 18px; position: sticky; top: 108px; min-width: 0; } .side-card { background: var(--ink); color: rgba(255,255,255,.78); border-radius: var(--r); padding: 26px; min-width: 0; } /* .btn-block carries a bottom margin for stacking, which doubled up with the card's own padding on whatever happened to be last. */ .side-card > :last-child { margin-bottom: 0; } .side-card h2 { color: #fff; font-size: 1.2rem; margin-bottom: .8em; } .side-card p { font-size: .93rem; } .side-card .btn-outline { background: transparent; color: var(--gold); border-color: rgba(242,183,79,.34); } .side-card .btn-outline:hover { background: rgba(242,183,79,.12); color: var(--gold); border-color: var(--gold); } /* The Maps link is not a phone number, so it stays neutral. */ .side-card .btn-outline[target="_blank"] { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.24); } .side-card .btn-outline[target="_blank"]:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.5); } .side-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 22px 0; font-size: .89rem; } .side-dl dt { color: rgba(255,255,255,.55); font-weight: 600; } .side-dl dd { margin: 0; color: #fff; overflow-wrap: anywhere; } .side-dl dd a { color: #ffb392; } @media (max-width: 1000px) { .side { position: static; } } /* --- CTA band ------------------------------------------------------------ */ .band { background: linear-gradient(100deg, var(--ink) 0%, #262b3a 100%); color: rgba(255,255,255,.78); padding: clamp(40px,5vw,66px) 0; position: relative; overflow: hidden; } .band::after { content:""; position:absolute; inset:0; background: radial-gradient(600px 320px at 88% 0%, rgba(232,153,43,.26), transparent 62%), radial-gradient(520px 300px at 8% 110%, rgba(91,74,158,.3), transparent 60%); pointer-events:none; } .band-in { display: flex; gap: 30px; align-items: center; justify-content: space-between; flex-wrap: wrap; position: relative; } .band h2 { color: #fff; margin: 0 0 .3em; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); } .band p { margin: 0; } .band-btns { display: flex; gap: 12px; flex-wrap: wrap; } /* --- Coverage band ------------------------------------------------------- Amber field with the island drawn on it and radar rings pulsing out of the yard. Dark type on amber, exactly as the business card does it. ------------------------------------------------------------------------ */ .coverage { background: var(--orange); color: var(--ink); padding: clamp(52px, 6vw, 88px) 0; position: relative; overflow: hidden; } .coverage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.42) 1.6px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(60% 70% at 96% 8%, #000 0%, transparent 72%); mask-image: radial-gradient(60% 70% at 96% 8%, #000 0%, transparent 72%); } .coverage-in { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); gap: clamp(28px,4vw,56px); align-items: center; position: relative; } .coverage-txt { text-align: left; } .coverage-txt h2 { color: var(--ink); margin-bottom: .55em; font-size: clamp(2rem, 1.35rem + 2.6vw, 3.4rem); letter-spacing: -.035em; line-height: 1.04; } .coverage-txt .eyebrow { color: var(--ink); } .coverage-txt p { color: rgba(36,31,43,.86); max-width: 48ch; } .coverage-txt .ticks { margin-top: 1.6em; } .coverage-txt .ticks li { font-weight: 600; } .coverage-txt .ticks .ic { color: var(--ink); } .btn-dark { background: var(--ink); color: #fff; margin-top: .6em; } .btn-dark:hover { background: #3a3346; color: #fff; } .coverage-map { position: relative; justify-self: end; width: 100%; } .coverage-map svg { display: block; width: 100%; height: auto; max-height: 620px; overflow: visible; margin-inline: auto; margin-right: -2%; filter: drop-shadow(0 18px 34px rgba(36,31,43,.22)); } @media (min-width: 1200px) { .coverage-map svg { margin-right: -8%; } } .mc { fill: rgba(255,255,255,.16); stroke: rgba(36,31,43,.42); stroke-width: 1; stroke-linejoin: round; transition: fill .2s; } .mc-base { fill: var(--ink); stroke: var(--ink); } .mc-pin { fill: #fff; stroke: var(--ink); stroke-width: 2.5; } .mc-pin-dot { fill: var(--ink); } .mc-ring { fill: none; stroke: #fff; stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: radar 4.2s cubic-bezier(.15,.6,.3,1) infinite; } @keyframes radar { 0% { transform: scale(.18); opacity: 0; } 12% { opacity: .5; } 100% { transform: scale(3.4); opacity: 0; } } .map-cap { display: inline-flex; align-items: center; gap: .5em; position: absolute; left: 4%; bottom: 4%; margin: 0; padding: .5em 1em; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: -.01em; box-shadow: 0 8px 22px rgba(36,31,43,.28); } .map-cap .ic { color: var(--gold); } .map-cap .ic { width: 1.05em; height: 1.05em; } @media (prefers-reduced-motion: reduce) { .mc-ring { animation: none; opacity: .22; transform: scale(2); } } @media (max-width: 900px) { .coverage-in { grid-template-columns: 1fr; } .coverage-map { order: -1; justify-self: center; } .coverage-map svg { max-height: 400px; margin-right: auto; } .map-cap { position: static; margin: 10px auto 0; display: inline-flex; } .coverage-map { text-align: center; } .coverage::before { -webkit-mask-image: radial-gradient(70% 40% at 96% 4%, #000 0%, transparent 70%); mask-image: radial-gradient(70% 40% at 96% 4%, #000 0%, transparent 70%); } } /* --- Coverage / counties ------------------------------------------------- */ .region { margin-bottom: 40px; } .region-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; } .region-h h3 { font-size: 1.3rem; margin: 0; } .region-h span { font-size: .82rem; font-weight: 700; color: var(--orange-d); background: var(--orange-l); padding: .3em .85em; border-radius: var(--r-pill); } .region > p { color: var(--grey-6); margin-bottom: 18px; max-width: 70ch; } .county-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(255px, 100%), 1fr)); gap: 12px; } .county { background: #fff; border: 1px solid var(--grey-2); border-radius: var(--r-s); padding: 15px 17px; } .sec-grey .county { border-color: #dfe4ea; } .county b { display: flex; align-items: center; gap: .45em; font-size: .99rem; } .county b .ic { color: var(--orange); width: 1.05em; height: 1.05em; } .county i { font-style: normal; font-size: .78rem; color: var(--orange-d); font-weight: 700; } .county p { font-size: .83rem; color: var(--grey-6); margin: .35em 0 0; line-height: 1.5; } .mw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; } .mw { display: flex; gap: 13px; align-items: flex-start; background: #fff; border: 1px solid var(--grey-2); border-radius: var(--r-s); padding: 15px 17px; } .mw b { flex: none; background: var(--ink); color: #fff; font-size: .82rem; font-weight: 800; padding: .3em .7em; border-radius: 5px; letter-spacing: .02em; } .mw span { font-size: .87rem; color: var(--grey-6); line-height: 1.5; } .town-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .town-list li { background: #fff; border: 1px solid var(--grey-2); border-radius: var(--r-pill); padding: .38em 1em; font-size: .87rem; font-weight: 600; } .sec-grey .town-list li { border-color: #dfe4ea; } /* --- Reviews ------------------------------------------------------------- */ /* Masonry via CSS columns: reviews vary in length, and a strict grid leaves a ragged half-empty last row. Columns fill top-to-bottom and always look deliberate, whatever number of reviews sit in data/reviews.mjs. */ .revs { columns: 3; column-gap: 20px; } .revs .rev { break-inside: avoid; margin-bottom: 20px; } @media (max-width: 1040px) { .revs { columns: 2; } } .rev { margin: 0; background: #fff; border: 1px solid var(--grey-2); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; } .rev-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .rev-av { width: 42px; height: 42px; border-radius: 50%; background: var(--gold-l); color: var(--gold-d); display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; flex: none; } .rev-who { display: flex; flex-direction: column; line-height: 1.3; margin-right: auto; } .rev-who b { font-size: .97rem; color: var(--ink); } .rev-who span { font-size: .81rem; color: var(--grey-6); } .rev blockquote { margin: .6em 0 1.1em; flex: 1; } .rev blockquote p { margin: 0; font-size: .97rem; line-height: 1.65; color: var(--grey-9); } .rev figcaption { display: flex; align-items: center; gap: .5em; border-top: 1px solid var(--grey-2); padding-top: 14px; font-size: .84rem; color: var(--grey-6); font-weight: 600; } .rev figcaption .ic { color: var(--green); width: 1em; height: 1em; } @media (max-width: 640px) { .revs { columns: 1; } } /* --- FAQ ----------------------------------------------------------------- */ .faq { display: grid; gap: 12px; } .faq details { background: #fff; border: 1px solid var(--grey-2); border-radius: var(--r-s); transition: border-color .2s, box-shadow .2s; } .faq details[open] { border-color: var(--orange); box-shadow: var(--sh-1); } .faq summary { cursor: pointer; padding: 18px 52px 18px 20px; font-weight: 700; font-size: 1.02rem; color: var(--ink); list-style: none; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; border-right: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange); transform: translateY(-70%) rotate(45deg); transition: transform .2s; } .faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); } .faq-a { padding: 0 20px 18px; color: var(--grey-6); } .faq-a p { margin: 0; } /* --- Map ------------------------------------------------------------------ */ .map { border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); line-height: 0; border: 1px solid var(--grey-2); } /* --- Form ---------------------------------------------------------------- */ .form { display: grid; gap: 16px; max-width: 660px; } .form label { display: grid; gap: 7px; font-weight: 650; font-size: .91rem; color: var(--ink); } .form input, .form textarea { font: inherit; padding: .78em .95em; border: 1.5px solid var(--grey-2); border-radius: var(--r-s); background: #fff; color: var(--grey-9); width: 100%; /* 16px everywhere, not just on phones: iOS - including iPad - zooms the whole page when a control under 16px takes focus. */ font-size: 16px; /* Form controls carry an intrinsic min-width from their `size`/`cols` defaults, which forces grid columns open. */ min-width: 0; } .form input:focus, .form textarea:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px rgba(235,94,34,.16); } .f-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; } @media (max-width: 560px) { .f-row { grid-template-columns: 1fr; } } .f-note { font-size: .86rem; color: var(--grey-6); margin: 0; } /* The two send routes are alternatives, not a primary and a secondary, so they get equal weight with a rule between them rather than a quiet link. */ .form-or { display: flex; align-items: center; gap: 14px; margin: 14px 0; color: var(--grey-4); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .form-or::before, .form-or::after { content: ""; flex: 1; height: 1px; background: var(--grey-2); } .form .btn-lg { width: 100%; } /* --- Contact: help band -------------------------------------------------- The call advice, the safety note and the trade note used to sit under the form in the same column: one 1900px section carrying five headings. They are their own band now, and the safety note is called out rather than buried mid-paragraph where nobody reads it. ------------------------------------------------------------------------ */ .contact-help { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(30px, 4.5vw, 64px); align-items: start; } .contact-help-main h2 { margin: 0 0 .45em; } .contact-help-lede { color: var(--grey-6); max-width: 50ch; margin-bottom: 1.6em; } .contact-help-main .ticks { margin-bottom: 0; } .contact-help-side { display: grid; gap: 16px; min-width: 0; } .form-lede { color: var(--grey-6); max-width: 56ch; } .callout { background: #fff; border: 1px solid var(--grey-2); border-radius: var(--r); padding: 26px 28px 28px; box-shadow: var(--sh-1); } .callout h3 { font-size: 1.16rem; margin: 0 0 .55em; letter-spacing: -.02em; } .callout p { font-size: .95rem; line-height: 1.62; color: var(--grey-6); margin: 0 0 .85em; } .callout p:last-child { margin-bottom: 0; } .callout-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px; background: var(--orange-l); color: var(--orange-d); } .callout-ic .ic { width: 23px; height: 23px; } .callout-link { display: inline-flex; align-items: center; gap: .55em; min-height: 44px; font-weight: 700; color: var(--orange-d); text-decoration: none; line-height: 1.25; border-bottom: 2px solid var(--orange); word-break: break-word; } .callout-link .ic { width: 18px; height: 18px; flex: none; } .callout-link:hover { color: var(--ink); } /* Safety information is the one thing on this page worth interrupting for. */ .callout-warn { background: var(--ink); border-color: var(--ink); } .callout-warn h3 { color: #fff; } .callout-warn p { color: rgba(255,255,255,.78); } .callout-warn .callout-ic { background: rgba(242,183,79,.16); color: var(--gold); } .callout-alert { color: var(--gold); font-weight: 700; border-left: 3px solid var(--gold); padding-left: 14px; } .callout-warn .callout-alert { color: var(--gold); } @media (max-width: 900px) { .contact-help { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 560px) { .callout { padding: 22px 20px 24px; } } /* --- Footer -------------------------------------------------------------- */ .ftr { background: var(--ink); color: rgba(255,255,255,.62); padding: clamp(46px,5vw,70px) 0 0; font-size: .93rem; } .ftr-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 34px; } .ftr h2 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1.3em; font-weight: 800; } .ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5em; } .ftr a { color: rgba(255,255,255,.62); text-decoration: none; } .ftr a:hover { color: var(--orange); } /* A button is a button wherever it sits. Without this, `.ftr a` wins on specificity and the label washes out to ~2:1 against its own background. */ .ftr .btn-call, .ftr .btn-call:hover { color: var(--ink); } .ftr .btn-wa, .ftr .btn-wa:hover { color: #fff; } .ftr .brand { color: #fff; margin-bottom: 16px; } .ftr .brand-txt b { color: #fff; } .ftr-brand p { max-width: 40ch; line-height: 1.65; } .ftr-motto { font-family: var(--display); font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 .2em; } .ftr-nap { display: grid; gap: .5em; margin-top: 18px; } .ftr-nap span, .ftr-nap a { display: inline-flex; align-items: flex-start; gap: .6em; } .ftr-nap .ic { color: var(--orange); margin-top: .2em; } .ftr-btm { border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding-top: 20px; padding-bottom: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .83rem; } .ftr-btm p { margin: 0; } @media (max-width: 900px) { .ftr-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .ftr-grid { grid-template-columns: 1fr; gap: 28px; } } /* --- Floating WhatsApp bubble (desktop) ---------------------------------- Always reachable without scrolling back to the header. Expands on hover. ------------------------------------------------------------------------ */ .wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 115; display: inline-flex; align-items: center; gap: 0; background: var(--wa); color: #fff; text-decoration: none; border-radius: var(--r-pill); padding: 15px; font-weight: 800; font-size: .95rem; box-shadow: 0 8px 26px rgba(37,211,102,.48); transition: gap .22s cubic-bezier(.2,.7,.3,1), padding .22s cubic-bezier(.2,.7,.3,1), transform .16s, background .16s; } .wa-float .ic { width: 26px; height: 26px; flex: none; } .wa-float span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .28s cubic-bezier(.2,.7,.3,1); } .wa-float:hover, .wa-float:focus-visible { color: #fff; background: var(--wa-d); gap: 10px; padding-right: 22px; transform: translateY(-2px); } .wa-float:hover span, .wa-float:focus-visible span { max-width: 160px; } @media (max-width: 820px) { .wa-float { display: none; } } @media (prefers-reduced-motion: reduce) { .wa-float span { max-width: 160px; } .wa-float { gap: 10px; padding-right: 22px; } } /* --- Sticky mobile call bar --------------------------------------------- */ .callbar { display: none; } @media (max-width: 820px) { body { padding-bottom: 78px; } /* --- Dark mobile header -------------------------------------------------- Safari 26 dropped support for the theme-color meta tag. It now tints its own chrome by sampling the background of whatever fixed or sticky element sits at the edge of the viewport. Ours was a white sticky header, so iOS painted the status bar white directly above the dark 24/7 strip. Making the header dark on phones fixes the tint at source, and it runs straight into the dark page header underneath instead of sandwiching a white band between two dark ones. The footer already proves the brand lockup reads on this background. */ /* --- Why the top strip goes ------------------------------------------ Safari 26 tints its chrome from fixed or STICKY elements at the viewport edge. The call bar is fixed, so the bottom picked up the dark colour immediately. The top did not: the element actually touching the top edge was .hdr-top, which is static, and the sticky .hdr sits below it until you scroll. Dropping the strip on phones puts the dark sticky header hard against the top edge, which is what Safari samples. It also returns 40px of a 844px screen. Nothing is lost: the address and email in that strip were already hidden at this width, and "open 24 hours" is repeated in the hero, the call bar and the footer. */ .hdr-top { display: none; } .hdr { background: var(--ink); border-bottom-color: rgba(255,255,255,.10); padding-top: env(safe-area-inset-top, 0px); } .hdr .brand-img { display: none; } .hdr .brand-img-dark { display: block; } .hdr.stuck { box-shadow: 0 6px 26px rgba(0,0,0,.34); } .brand-txt b { color: #fff; } .brand-txt i { color: var(--gold); } .burger { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); color: #fff; } .burger:hover { background: rgba(255,255,255,.16); } .burger[aria-expanded="true"] { background: #fff; border-color: #fff; color: var(--ink); } .nav { background: var(--ink); border-top: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.10); } .nav a { color: rgba(255,255,255,.86); } .nav a:hover { background: rgba(255,255,255,.08); color: #fff; } .nav a[aria-current="page"] { color: var(--gold); background: rgba(242,183,79,.14); } .callbar { display: flex; flex-wrap: nowrap; gap: 9px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; padding: 10px 13px calc(10px + env(safe-area-inset-bottom)); background: var(--ink); border-top: 1px solid rgba(255,255,255,.12); } .callbar-tel, .callbar-wa { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .45em; font-family: var(--num); font-weight: 700; font-size: 1.02rem; letter-spacing: .002em; border-radius: var(--r-pill); padding: .8em .7em; text-decoration: none; white-space: nowrap; overflow: hidden; } .callbar-tel { background: var(--orange); color: var(--ink); } .callbar-wa { background: var(--wa); color: #fff; } .callbar-tel .ic, .callbar-wa .ic { width: 22px; height: 22px; } } /* =========================================================================== MOBILE Most of this traffic is someone standing beside a broken car on a phone. Everything below is a fix for something measured, not a guess. =========================================================================== */ @media (max-width: 640px) { /* --- The utility bar was 117px tall, with the address wrapping over three lines. `.hide-sm` was losing to `.hdr-top-in a` on specificity, so it never actually hid anything. Matched specificity fixes it. ---------- */ .hdr-top-in .hide-sm { display: none; } .hdr-top-in span, .hdr-top-in a { font-size: 13px; } /* --- Readable floor for small type ------------------------------------ A 10.2px label is fine on a 27" monitor and unreadable at arm's length. These are in px on purpose: rem resolves against the 16px root, so `.8rem` still lands at 12.8px and quietly misses the floor. */ .eyebrow, .sec .eyebrow, .sec-head .eyebrow, .why-txt .eyebrow, .coverage-txt .eyebrow { font-size: 15px; letter-spacing: .13em; } .hero .eyebrow, .phead .eyebrow, .kicker { font-size: 14px; letter-spacing: .15em; } .btn-xl span i { font-size: 12.5px; } .card-label { font-size: 13px; } .card-chip { font-size: 12.5px; padding: .5em .9em; } .gbadge-sub { font-size: 13.5px; } .gbadge-sub i { font-size: 13px; } .proof-t i, .hdr-phone-t i { font-size: 13px; } .brand-txt i { font-size: 11px; } .ftr h2 { font-size: 13px; } .ftr-motto { font-size: 13px; } .stat span { font-size: 14px; } .county p, .mw span, .town-list li { font-size: 14px; } .crumbs { font-size: 14px; } .rev-who span, .rev figcaption, .map-cap, .f-note { font-size: 14px; } .ftr, .ftr-btm { font-size: 15px; } .how p, .card p { font-size: 16px; } /* The logo link was a 32px tap target. */ .brand { min-height: 46px; } /* Reveals go vertical on a phone. Sideways ones say nothing at this width, and their start position pushes wide blocks past the viewport edge. */ .rv-l, .rv-r { transform: translateY(22px); } /* --- Header on one row --------------------------------------------------- Brand + phone block + burger do not fit across a phone, so the header was wrapping to two rows and eating 118px before the page even started. The phone block comes out: the sticky bar at the bottom carries call and WhatsApp permanently, so nothing is actually lost. */ .hdr-cta { display: none; } .hdr-in { flex-wrap: nowrap; min-height: 64px; gap: 10px; } .burger { margin-left: auto; } .nav { position: absolute; left: 0; right: 0; top: 100%; box-shadow: var(--sh-2); margin: 0; padding: 0 20px; } /* --- Hero ---------------------------------------------------------------- Get the call and WhatsApp buttons above the fold on a 390x844 screen. */ .hero-in { padding: 34px 0 38px; } .hero h1 { font-size: clamp(2rem, 1.1rem + 4.4vw, 2.6rem); } .hero .lede { font-size: 1.02rem; line-height: 1.55; } .hero-btns { margin-top: 1.5em; } .btn-xl { padding: .8em 1.3em; font-size: 1.1rem; } .kicker { margin-bottom: 1em; } /* Let the photograph through. The vertical scrim was heavy enough to hide what the truck is actually doing. */ .hero::after { background: linear-gradient(180deg, rgba(17,18,22,.62) 0%, rgba(17,18,22,.5) 42%, rgba(17,18,22,.8) 100%); } /* --- 44px tap targets --------------------------------------------------- Stacked text links were rendering 16-25px tall, which is a coin flip to hit one-handed. Padding, not font size, so the layout does not blow up. */ /* Height was already 44px, but a short label like "FAQ" was only 29px WIDE, which is a fiddly target one-handed. Padding widens the hit area without touching the type. The negative inset keeps the column flush left. */ .ftr ul a, .ftr-nap a, .side-dl dd a { display: inline-flex; align-items: center; min-height: 44px; } .ftr ul a { padding-inline: 10px; margin-inline: -10px; min-width: 44px; } .ftr ul { gap: 0; } /* 11px of tracked uppercase is hard work at arm's length. */ .brand-txt i { font-size: 12px; } .crumbs a, .crumbs li { display: inline-flex; align-items: center; min-height: 40px; } .crumbs ul { padding: 4px 0; } .nav a { min-height: 48px; display: flex; align-items: center; } .faq summary { padding: 18px 50px 18px 18px; } /* --- Rhythm ------------------------------------------------------------- The homepage ran to ~35 phone screens. Tighter padding, same content. */ .sec { padding: 46px 0; } .sec:not(.sec-grey) + .sec:not(.sec-grey), .sec-grey + .sec-grey { padding-top: 0; } .sec-head { margin-bottom: 28px; } .sec-foot { margin-top: 26px; } .coverage { padding: 46px 0; } .band { padding: 40px 0; } .cards { gap: 34px 0; } .how-grid { gap: 34px; } .how-art { margin-bottom: 14px; } .how-tag { margin-top: 36px; } .prose h2 { margin-top: 1.4em; } /* --- Hero --------------------------------------------------------------- Full-width stacked CTAs: the two things anyone is here to do. */ .hero { min-height: auto; } .hero-in { padding: 44px 0 48px; } .hero-trust { margin-top: 1.7em; padding-top: 1.5em; gap: 14px; } .hero-ticks { gap: .5em 1.2em; font-size: .9rem; } .gbadge { width: 100%; justify-content: flex-start; } /* --- Sticky bar clearance ------------------------------------------------ The last CTA band was sitting under the fixed call bar. */ .ftr-btm { padding-bottom: 24px; } } /* Very narrow phones - SE, older Androids. */ @media (max-width: 380px) { .wrap { padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); } .hdr-phone-t b { font-size: 1rem; } .btn-xl { font-size: 1.06rem; padding: .85em 1.2em; } /* "Contact on WhatsApp now" on one line is wider than an SE. Let it wrap. */ .btn-xl { text-align: left; } .btn-xl span { min-width: 0; overflow-wrap: break-word; } .callbar-tel, .callbar-wa { font-size: .92rem; padding: .8em .5em; } } @media print { .hdr, .hdr-top, .ftr, .callbar, .band, .crumbs { display: none !important; } body { padding: 0; font-size: 12pt; } }