/* GGD blocks — tiles, part finder, reviews, start-here. v0.1.0
Scoped to block roots so nothing leaks into the theme. Heebo to match the
site; navy/red tokens shared with the ggd-widget plugin. */
.ggd-tiles,.ggd-finder,.ggd-reviews,.ggd-start,.ggd-areas{
--ggd-navy:#1b3260;--ggd-red:#d42b2b;--ggd-line:rgba(255,255,255,0.12);
font-family:'Heebo',-apple-system,BlinkMacSystemFont,sans-serif;
box-sizing:border-box;
}
.ggd-tiles *,.ggd-finder *,.ggd-reviews *,.ggd-start *,.ggd-areas *{box-sizing:border-box}
/* ── Category tiles ───────────────────────────────────────── */
.ggd-tiles{
display:grid;
grid-template-columns:repeat(var(--ggd-tiles-cols,3),minmax(0,1fr));
gap:var(--ggd-tiles-gap,20px);
}
.ggd-tile{
position:relative;display:flex;flex-direction:column;
background:var(--ggd-navy);border:1px solid var(--ggd-line);
border-radius:14px;overflow:hidden;
box-shadow:0 6px 22px rgba(10,20,45,0.18);
transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;
will-change:transform;
}
.ggd-tile__media{aspect-ratio:3/2;overflow:hidden;background:rgba(255,255,255,0.05)}
.ggd-tile__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.ggd-tile__body{padding:18px 20px 20px}
.ggd-tile__title{font-size:19px;font-weight:700;line-height:1.2;margin:0 0 6px;letter-spacing:-0.02em}
.ggd-tile__link{color:#fff;text-decoration:none}
/* Stretched link — the whole card is the hit area, one for a11y */
.ggd-tile__link::after{content:"";position:absolute;inset:0;z-index:1}
.ggd-tile__sub{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,0.68);margin:0}
.ggd-tile__count{display:inline-block;margin-top:10px;font-size:12px;font-weight:600;
letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,0.5)}
.ggd-tile:hover{border-color:#5b8fe0;box-shadow:0 14px 34px rgba(10,20,45,0.3)}
.ggd-tile:hover .ggd-tile__media img{transform:scale(1.04)}
.ggd-tile__link:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
/* Tilt: compositor-only transform, no JS library */
.ggd-tiles--tilt .ggd-tile:hover{transform:perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-4px)}
.ggd-tiles--tilt .ggd-tile:nth-child(even):hover{rotate:none;transform:perspective(900px) rotateX(2deg) rotateY(2deg) translateY(-4px)}
/* ── Part finder ──────────────────────────────────────────── */
.ggd-finder{background:var(--ggd-navy);border:1px solid var(--ggd-line);border-radius:14px;padding:18px}
.ggd-finder__row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.ggd-finder__field{display:flex;flex-direction:column;gap:6px;flex:1 1 180px;min-width:0}
.ggd-finder__field--grow{flex:2 1 240px}
.ggd-finder__field--action{flex:0 0 auto}
.ggd-finder__label{font-size:12.5px;font-weight:600;color:rgba(255,255,255,0.72);letter-spacing:.01em}
.ggd-finder__opt{font-weight:400;color:rgba(255,255,255,0.45)}
.ggd-finder__select,.ggd-finder__input{
width:100%;padding:12px 14px;font:inherit;font-size:15px;color:#fff;
background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.16);
border-radius:10px;min-height:48px;-webkit-appearance:none;appearance:none;
}
.ggd-finder__select{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-opacity='.6' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}
.ggd-finder__input::placeholder{color:rgba(255,255,255,0.4)}
.ggd-finder__select:focus,.ggd-finder__input:focus{outline:none;border-color:rgba(255,255,255,0.45);background:rgba(255,255,255,0.09)}
.ggd-finder__submit{
padding:13px 26px;font:inherit;font-size:15px;font-weight:700;color:#fff;
background:var(--ggd-red);border:none;border-radius:10px;cursor:pointer;
min-height:48px;transition:background .15s;white-space:nowrap;
}
.ggd-finder__submit:hover{background:#b82222}
.ggd-finder__submit:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* ── Reviews ──────────────────────────────────────────────── */
.ggd-reviews__summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.ggd-reviews__score{font-size:34px;font-weight:800;line-height:1;color:#fff;letter-spacing:-0.03em}
.ggd-reviews__stars{display:inline-flex;gap:2px;font-size:17px;line-height:1}
.ggd-reviews__star{color:rgba(255,255,255,0.22)}
.ggd-reviews__star.is-on{color:#f5b301}
.ggd-reviews__total{font-size:14px;color:rgba(255,255,255,0.62)}
.ggd-reviews__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.ggd-reviews__card{
margin:0;padding:20px;background:var(--ggd-navy);
border:1px solid var(--ggd-line);border-radius:14px;
display:flex;flex-direction:column;gap:10px;
}
.ggd-reviews__quote{margin:0;font-size:15px;line-height:1.6;color:rgba(255,255,255,0.8);quotes:none}
.ggd-reviews__author{font-size:13.5px;font-weight:600;color:#fff;display:flex;align-items:center;gap:7px;margin-top:auto}
.ggd-reviews__source{font-size:11.5px;font-weight:500;color:rgba(255,255,255,0.5);
border:1px solid var(--ggd-line);border-radius:5px;padding:2px 7px}
/* ── Start here ───────────────────────────────────────────── */
.ggd-start{background:var(--ggd-navy);border:1px solid var(--ggd-line);border-radius:16px;padding:26px 24px}
.ggd-start__heading{font-size:25px;font-weight:700;color:#fff;margin:0 0 14px;letter-spacing:-0.02em;line-height:1.15}
.ggd-start__status{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px;font-size:14.5px}
.ggd-start__dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,0.3)}
.ggd-start.is-open .ggd-start__dot{background:#4fcca0;box-shadow:0 0 0 4px rgba(79,204,160,0.18)}
.ggd-start__state{font-weight:700;color:#fff}
.ggd-start.is-open .ggd-start__state{color:#4fcca0}
.ggd-start__note{color:rgba(255,255,255,0.65)}
.ggd-start__call{
display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
padding:14px 24px;border-radius:10px;background:var(--ggd-red);color:#fff;
font-size:15.5px;font-weight:600;text-decoration:none;min-height:50px;transition:background .15s;
}
.ggd-start__call:hover{background:#b82222;color:#fff}
.ggd-start__call strong{font-weight:800}
.ggd-start__call[hidden]{display:none}
.ggd-start__grid{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:11px}
.ggd-start__link{
display:flex;flex-direction:column;gap:5px;height:100%;
padding:16px 18px;border:1.5px solid rgba(255,255,255,0.16);border-radius:12px;
text-decoration:none;background:rgba(255,255,255,0.04);transition:border-color .16s,background .16s,transform .16s;
}
.ggd-start__link:hover{border-color:#5b8fe0;background:rgba(255,255,255,0.08);transform:translateY(-2px)}
.ggd-start__link:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ggd-start__icon{font-size:21px;color:rgba(255,255,255,0.75);margin-bottom:2px}
.ggd-start__label{font-size:15.5px;font-weight:700;color:#fff;line-height:1.25}
.ggd-start__desc{font-size:13.5px;color:rgba(255,255,255,0.62);line-height:1.45}
.ggd-start__hours{margin:16px 0 0;font-size:13px;color:rgba(255,255,255,0.5)}
/* ── Service areas ────────────────────────────────────────── */
.ggd-areas__intro{margin:0 0 12px;font-size:15px;color:rgba(255,255,255,0.7)}
.ggd-areas__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px 9px}
.ggd-areas__item{font-size:13.5px;color:rgba(255,255,255,0.72);
border:1px solid var(--ggd-line);border-radius:7px;padding:5px 11px;background:rgba(255,255,255,0.04)}
.ggd-areas__prefix{color:rgba(255,255,255,0.45);margin-right:4px}
.ggd-areas--plain{font-size:14px;line-height:1.7;color:rgba(255,255,255,0.65);margin:0}
/* ── Narrow screens ───────────────────────────────────────── */
@media (max-width:860px){
.ggd-tiles{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}
@media (max-width:560px){
.ggd-tiles{grid-template-columns:1fr;gap:16px}
.ggd-finder__field,.ggd-finder__field--grow{flex:1 1 100%}
.ggd-finder__field--action,.ggd-finder__submit{width:100%}
.ggd-start{padding:22px 18px}
.ggd-start__heading{font-size:22px}
.ggd-reviews__score{font-size:29px}
}
/* Tilt and lift are decoration — drop them when motion is unwelcome. */
@media (prefers-reduced-motion:reduce){
.ggd-tile,.ggd-tile__media img,.ggd-start__link{transition:none!important}
.ggd-tiles--tilt .ggd-tile:hover,
.ggd-tiles--tilt .ggd-tile:nth-child(even):hover,
.ggd-start__link:hover{transform:none!important}
}
/* ── Theme armor ──────────────────────────────────────────────
The theme paints every with its link colour and restyles headings,
which turned tile titles red and would do the same to start-here links.
Scoped to block roots so nothing else in the theme is affected. */
.ggd-tiles .ggd-tile__title,
.ggd-tiles .ggd-tile__link,
.ggd-tiles .ggd-tile__link:visited{color:#fff!important;text-decoration:none!important}
.ggd-tiles .ggd-tile__link:hover,
.ggd-tiles .ggd-tile:hover .ggd-tile__link{color:#fff!important;text-decoration:none!important}
.ggd-tiles .ggd-tile__sub{color:rgba(255,255,255,0.68)!important}
.ggd-tiles .ggd-tile__count{color:rgba(255,255,255,0.5)!important}
.ggd-start .ggd-start__link,
.ggd-start .ggd-start__link:visited,
.ggd-start .ggd-start__link:hover{text-decoration:none!important}
.ggd-start .ggd-start__label{color:#fff!important}
.ggd-start .ggd-start__desc{color:rgba(255,255,255,0.62)!important}
.ggd-start .ggd-start__icon{color:rgba(255,255,255,0.75)!important}
.ggd-start .ggd-start__call,
.ggd-start .ggd-start__call:visited,
.ggd-start .ggd-start__call:hover{color:#fff!important;text-decoration:none!important}
.ggd-start .ggd-start__note{color:rgba(255,255,255,0.65)!important}
.ggd-start .ggd-start__hours{color:rgba(255,255,255,0.5)!important}
.ggd-start .ggd-start__heading{color:#fff!important}
.ggd-reviews .ggd-reviews__quote{color:rgba(255,255,255,0.8)!important}
.ggd-reviews .ggd-reviews__author{color:#fff!important}
.ggd-reviews .ggd-reviews__source,
.ggd-reviews .ggd-reviews__total{color:rgba(255,255,255,0.55)!important}
.ggd-reviews .ggd-reviews__score{color:#fff!important}
.ggd-areas .ggd-areas__item{color:rgba(255,255,255,0.72)!important}
.ggd-areas .ggd-areas__prefix{color:rgba(255,255,255,0.45)!important}
.ggd-finder .ggd-finder__label{color:rgba(255,255,255,0.72)!important}
.ggd-finder .ggd-finder__select,
.ggd-finder .ggd-finder__input{color:#fff!important;-webkit-text-fill-color:#fff!important}
/* Native dropdown options render in the OS palette — force readable text. */
.ggd-finder .ggd-finder__select option{color:#13233f!important;background:#fff!important}
.ggd-finder .ggd-finder__submit{color:#fff!important;background:var(--ggd-red)!important}
.ggd-finder .ggd-finder__submit:hover{background:#b82222!important}
/* A category with no thumbnail shouldn't look broken — give the bare card
a little more presence so it reads as deliberate. */
.ggd-tile:not(:has(.ggd-tile__media)) .ggd-tile__body{padding:24px 22px}
.ggd-tile:not(:has(.ggd-tile__media)) .ggd-tile__title{font-size:20px}
/* ── Service areas: background-independent chips ──────────────
The block sits in a WHITE section, and the first pass styled it for navy —
white text on white. Solid navy chips read correctly on a light section and
on a dark one, so this no longer depends on where the block is placed. */
.ggd-areas .ggd-areas__list{gap:8px 8px}
.ggd-areas .ggd-areas__item{
background:#1b3260!important;
border:1px solid rgba(255,255,255,0.10)!important;
color:rgba(255,255,255,0.88)!important;
border-radius:8px!important;
padding:7px 13px!important;
font-size:13.5px!important;
line-height:1.3!important;
}
.ggd-areas .ggd-areas__prefix{color:rgba(255,255,255,0.55)!important;margin-right:5px}
.ggd-areas .ggd-areas__name{color:#fff!important;font-weight:600}
.ggd-areas .ggd-areas__intro{color:#33405c!important;font-size:15px}
.ggd-areas--plain{color:#33405c!important}
/* 66 suburbs stacked full height is a wall — cap it and let it breathe.
Still one semantic , so the SEO value is unchanged. */
.ggd-areas .ggd-areas__list{
max-height:none;
justify-content:center;
}
@media (min-width:861px){
.ggd-areas{max-width:1000px;margin-inline:auto}
}
/* ── Tile title sizing ────────────────────────────────────────
The theme styles h3 at 40px/48px globally, which won over the block's own
19px and forced every title onto two lines. Pin size and leading here so a
tile title fits one line at card width. */
.ggd-tiles .ggd-tile__title,
.ggd-tiles h3.ggd-tile__title{
font-size:20px!important;
line-height:1.2!important;
font-weight:700!important;
letter-spacing:-0.02em!important;
margin:0 0 6px!important;
padding:0!important;
}
.ggd-tiles .ggd-tile__sub{font-size:14px!important;line-height:1.5!important;margin:0!important}
.ggd-tiles .ggd-tile__body{padding:16px 18px 18px!important}
.ggd-tiles .ggd-tile__media{aspect-ratio:16/10}
@media (max-width:560px){
.ggd-tiles .ggd-tile__title{font-size:19px!important}
}
/* ── Service areas v2: six region cards ───────────────────────
Supersedes the flat 66-chip wall above. The old .ggd-areas__list rules
still apply inside each card, so only the new structure is defined here. */
/* Visually hidden, still read aloud. display:none would hide it from screen
readers too, which is the opposite of what this is for. */
.ggd-areas .ggd-sr-only{
position:absolute!important;
width:1px!important;height:1px!important;
padding:0!important;margin:-1px!important;
overflow:hidden!important;
clip:rect(0,0,0,0)!important;
clip-path:inset(50%)!important;
white-space:nowrap!important;
border:0!important;
}
.ggd-areas--grouped{max-width:1180px;margin-inline:auto}
.ggd-areas--grouped .ggd-areas__regions{
display:grid;
grid-template-columns:repeat(var(--ggd-areas-cols,3),minmax(0,1fr));
gap:18px;
align-items:start;
}
.ggd-areas--grouped .ggd-areas__region{
background:#1b3260;
border:1px solid rgba(255,255,255,0.10);
border-radius:14px;
padding:20px 20px 18px;
box-shadow:0 6px 22px rgba(10,20,45,0.14);
}
.ggd-areas--grouped .ggd-areas__region-title{
font-size:17px!important;
line-height:1.2!important;
font-weight:700!important;
letter-spacing:-0.015em!important;
color:#fff!important;
margin:0 0 12px!important;
padding:0 0 11px!important;
border-bottom:1px solid rgba(255,255,255,0.12);
}
/* Inside a card the chips become a plain readable list, not nested pills. */
.ggd-areas--grouped .ggd-areas__list{
display:flex;flex-wrap:wrap;gap:6px 7px;
list-style:none;margin:0;padding:0;justify-content:flex-start;
}
.ggd-areas--grouped .ggd-areas__item{
background:rgba(255,255,255,0.07)!important;
border:1px solid rgba(255,255,255,0.12)!important;
border-radius:7px!important;
padding:5px 10px!important;
font-size:13px!important;
line-height:1.35!important;
color:rgba(255,255,255,0.9)!important;
}
.ggd-areas--grouped .ggd-areas__name{color:#fff!important;font-weight:500!important}
.ggd-areas--grouped .ggd-areas__intro{
color:#33405c!important;text-align:center;margin:0 0 20px;font-size:15.5px;
}
@media (max-width:980px){
.ggd-areas--grouped .ggd-areas__regions{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media (max-width:620px){
.ggd-areas--grouped .ggd-areas__regions{grid-template-columns:1fr;gap:14px}
.ggd-areas--grouped .ggd-areas__region{padding:18px 16px 16px}
}
/* ════════════════════════════════════════════════════════════
LIGHT SURFACE VARIANT — add .ggd-light to any block root
(shortcode attribute theme="light").
The kit is navy-on-dark by default. Several sections of this site are
near-white, where a navy panel fights the page rather than sitting in it.
This is the same components with light surface tokens, not a second kit.
──────────────────────────────────────────────────────────── */
.ggd-light{
--ggd-surface:#ffffff;
--ggd-surface-sunk:#f1f4f9;
--ggd-ink:#13233f;
--ggd-ink-soft:#4a5875;
--ggd-ink-faint:#6b7893;
--ggd-line:#d9e0ec;
}
/* Labels: left-aligned. The theme centres text in these sections, which
pulled the labels to the middle of each field. */
.ggd-finder .ggd-finder__field{text-align:left!important;align-items:stretch!important}
.ggd-finder .ggd-finder__label{text-align:left!important;display:block!important;width:100%!important}
/* ── Part finder, light ── */
.ggd-finder.ggd-light{
background:var(--ggd-surface)!important;
border:1px solid var(--ggd-line)!important;
box-shadow:0 2px 10px rgba(19,35,63,0.06);
}
.ggd-finder.ggd-light .ggd-finder__label{color:var(--ggd-ink)!important;font-weight:600!important}
.ggd-finder.ggd-light .ggd-finder__opt{color:var(--ggd-ink-faint)!important;font-weight:400!important}
.ggd-finder.ggd-light .ggd-finder__select,
.ggd-finder.ggd-light .ggd-finder__input{
background:var(--ggd-surface)!important;
border:1.5px solid var(--ggd-line)!important;
color:var(--ggd-ink)!important;
-webkit-text-fill-color:var(--ggd-ink)!important;
font-weight:500!important;
}
.ggd-finder.ggd-light .ggd-finder__input::placeholder{
color:var(--ggd-ink-faint)!important;-webkit-text-fill-color:var(--ggd-ink-faint)!important;
font-weight:400!important;
}
.ggd-finder.ggd-light .ggd-finder__select:focus,
.ggd-finder.ggd-light .ggd-finder__input:focus{
border-color:#5b8fe0!important;
background:var(--ggd-surface)!important;
box-shadow:0 0 0 3px rgba(91,143,224,0.16)!important;
}
/* Chevron needs to be dark on a white field. */
.ggd-finder.ggd-light .ggd-finder__select{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2313233f' stroke-opacity='.55' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;
background-repeat:no-repeat!important;
background-position:right 14px center!important;
}
.ggd-finder.ggd-light .ggd-finder__submit{
background:var(--ggd-red)!important;color:#fff!important;
box-shadow:0 2px 8px rgba(212,43,43,0.22);
}
.ggd-finder.ggd-light .ggd-finder__submit:hover{background:#b82222!important}
/* ── Reviews, light ── */
.ggd-reviews.ggd-light .ggd-reviews__card{
background:var(--ggd-surface)!important;
border:1px solid var(--ggd-line)!important;
box-shadow:0 2px 10px rgba(19,35,63,0.05);
}
.ggd-reviews.ggd-light .ggd-reviews__quote{color:var(--ggd-ink-soft)!important}
.ggd-reviews.ggd-light .ggd-reviews__author{color:var(--ggd-ink)!important}
.ggd-reviews.ggd-light .ggd-reviews__source{
color:var(--ggd-ink-faint)!important;border-color:var(--ggd-line)!important;
}
.ggd-reviews.ggd-light .ggd-reviews__score{color:var(--ggd-ink)!important}
.ggd-reviews.ggd-light .ggd-reviews__total{color:var(--ggd-ink-faint)!important}
.ggd-reviews.ggd-light .ggd-reviews__star{color:#d7dce6}
.ggd-reviews.ggd-light .ggd-reviews__star.is-on{color:#f5b301}
/* ── Service areas, light ── */
.ggd-areas.ggd-light .ggd-areas__region{
background:var(--ggd-surface)!important;
border:1px solid var(--ggd-line)!important;
box-shadow:0 2px 10px rgba(19,35,63,0.05);
}
.ggd-areas.ggd-light .ggd-areas__region-title{
color:var(--ggd-ink)!important;
border-bottom-color:var(--ggd-line)!important;
}
.ggd-areas.ggd-light .ggd-areas__item{
background:var(--ggd-surface-sunk)!important;
border:1px solid var(--ggd-line)!important;
color:var(--ggd-ink-soft)!important;
}
.ggd-areas.ggd-light .ggd-areas__name{color:var(--ggd-ink)!important}
.ggd-areas.ggd-light .ggd-areas__intro{color:var(--ggd-ink-soft)!important}
/* ── Tiles, light (available; tiles stay navy by default) ── */
.ggd-tiles.ggd-light .ggd-tile{
background:var(--ggd-surface)!important;
border:1px solid var(--ggd-line)!important;
box-shadow:0 4px 16px rgba(19,35,63,0.07);
}
.ggd-tiles.ggd-light .ggd-tile__title,
.ggd-tiles.ggd-light .ggd-tile__link{color:var(--ggd-ink)!important}
.ggd-tiles.ggd-light .ggd-tile__sub{color:var(--ggd-ink-soft)!important}
.ggd-tiles.ggd-light .ggd-tile:hover{border-color:#5b8fe0!important}
/* ── Start here, light ── */
.ggd-start.ggd-light{
background:var(--ggd-surface)!important;border:1px solid var(--ggd-line)!important;
}
.ggd-start.ggd-light .ggd-start__heading,
.ggd-start.ggd-light .ggd-start__label{color:var(--ggd-ink)!important}
.ggd-start.ggd-light .ggd-start__desc,
.ggd-start.ggd-light .ggd-start__note{color:var(--ggd-ink-soft)!important}
.ggd-start.ggd-light .ggd-start__hours{color:var(--ggd-ink-faint)!important}
.ggd-start.ggd-light .ggd-start__icon{color:var(--ggd-ink-soft)!important}
.ggd-start.ggd-light .ggd-start__link{
background:var(--ggd-surface-sunk)!important;border-color:var(--ggd-line)!important;
}
.ggd-start.ggd-light .ggd-start__link:hover{
background:#e8eefa!important;border-color:#5b8fe0!important;
}
.ggd-start.ggd-light .ggd-start__state{color:var(--ggd-ink)!important}
.ggd-start.ggd-light.is-open .ggd-start__state{color:#0f8a63!important}
.ggd-start.ggd-light .ggd-start__dot{background:#c3ccdb}
.ggd-start.ggd-light.is-open .ggd-start__dot{background:#12a171;box-shadow:0 0 0 4px rgba(18,161,113,0.15)}
/* ── Start here: two-column portal ────────────────────────────
Left is "talk to a human", right is "tell us what you need". Two jobs,
two columns, one card — instead of a status line with four tiles under it. */
.ggd-start--split{padding:0!important;overflow:hidden}
.ggd-start--split .ggd-start__heading{padding:24px 24px 0;margin:0 0 4px!important}
.ggd-start--split .ggd-start__cols{
display:grid;
grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
align-items:stretch;
}
.ggd-start--split .ggd-start__col{
padding:26px 26px 24px;
display:flex;flex-direction:column;
min-width:0;
}
/* The divider is a border so the two halves stay equal height. */
.ggd-start--split .ggd-start__col--pick{
border-left:1px solid rgba(255,255,255,0.12);
background:rgba(255,255,255,0.03);
}
.ggd-light.ggd-start--split .ggd-start__col--pick{
border-left-color:var(--ggd-line)!important;
background:var(--ggd-surface-sunk)!important;
}
/* Left column */
.ggd-start--split .ggd-start__status{margin-bottom:8px}
.ggd-start--split .ggd-start__note{
font-size:14.5px;line-height:1.5;margin:0 0 18px;max-width:34ch;
}
.ggd-start--split .ggd-start__call{
display:inline-flex;align-items:center;gap:12px;
padding:14px 22px;border-radius:11px;background:var(--ggd-red);
color:#fff!important;text-decoration:none!important;
margin:0 0 14px;align-self:flex-start;transition:background .15s,transform .15s;
}
.ggd-start--split .ggd-start__call:hover{background:#b82222;transform:translateY(-1px)}
.ggd-start--split .ggd-start__call i{font-size:22px}
.ggd-start--split .ggd-start__call-text{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.ggd-start--split .ggd-start__call-label{font-size:12px;opacity:.85;letter-spacing:.04em;text-transform:uppercase}
.ggd-start--split .ggd-start__call-number{font-size:19px;font-weight:800;letter-spacing:-0.01em}
.ggd-start--split .ggd-start__hours{
display:flex;align-items:center;gap:7px;margin:auto 0 0!important;
font-size:13px;padding-top:12px;
}
.ggd-start--split .ggd-start__hours i{font-size:15px;opacity:.7}
/* Right column */
.ggd-start--split .ggd-start__pick-title{
font-size:15px!important;font-weight:700!important;margin:0 0 10px!important;
padding:0!important;line-height:1.2!important;letter-spacing:.01em!important;
color:#fff!important;
}
.ggd-light.ggd-start--split .ggd-start__pick-title,
.ggd-light.ggd-start--split .ggd-start__pick-title label{color:var(--ggd-ink)!important}
.ggd-start--split .ggd-start__pick-title label{cursor:pointer}
.ggd-start--split .ggd-start__picker{display:flex;flex-wrap:wrap;gap:10px}
.ggd-start--split .ggd-start__select{
flex:1 1 220px;min-width:0;
padding:14px 38px 14px 15px;border-radius:10px;min-height:52px;
font:inherit;font-size:15.5px;font-weight:500;
color:#fff;background:rgba(255,255,255,0.08);
border:1.5px solid rgba(255,255,255,0.2);
-webkit-appearance:none;appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-opacity='.65' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 15px center;
}
.ggd-start--split .ggd-start__select option{color:#13233f;background:#fff}
.ggd-start--split .ggd-start__select:focus{
outline:none;border-color:#5b8fe0;background-color:rgba(255,255,255,0.12);
}
/* Light variant of the picker field */
.ggd-light.ggd-start--split .ggd-start__select{
color:var(--ggd-ink)!important;
background-color:var(--ggd-surface)!important;
border-color:var(--ggd-line)!important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2313233f' stroke-opacity='.55' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;
}
.ggd-light.ggd-start--split .ggd-start__select:focus{
border-color:#5b8fe0!important;box-shadow:0 0 0 3px rgba(91,143,224,0.16);
}
.ggd-start--split .ggd-start__go{
flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
padding:14px 24px;min-height:52px;border-radius:10px;border:none;
font:inherit;font-size:15px;font-weight:700;letter-spacing:-0.01em;
background:var(--ggd-red);color:#fff;cursor:pointer;
transition:background .15s,opacity .15s;
}
.ggd-start--split .ggd-start__go:hover:not(:disabled){background:#b82222}
.ggd-start--split .ggd-start__go:disabled{opacity:.45;cursor:not-allowed}
.ggd-start--split .ggd-start__go:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ggd-light.ggd-start--split .ggd-start__go:focus-visible{outline-color:#13233f}
.ggd-start--split .ggd-start__go i{font-size:17px}
.ggd-start--split .ggd-start__hint{
margin:12px 0 0;font-size:13.5px;line-height:1.5;min-height:20px;
color:rgba(255,255,255,0.6);
}
.ggd-light.ggd-start--split .ggd-start__hint{color:var(--ggd-ink-faint)!important}
/* Embedded Fluent Form takes the right column when form_id is passed. */
.ggd-start--split .ggd-start__form{margin-top:4px}
.ggd-start--split .ggd-start__form .frm-fluent-form{margin:0}
.ggd-start--split .ggd-start__fallback{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.ggd-start--split .ggd-start__fallback a{color:#fff;text-decoration:underline}
/* Stack on tablet and below; the divider becomes a top border. */
@media (max-width:840px){
.ggd-start--split .ggd-start__cols{grid-template-columns:1fr}
.ggd-start--split .ggd-start__col--pick{
border-left:none;
border-top:1px solid rgba(255,255,255,0.12);
}
.ggd-light.ggd-start--split .ggd-start__col--pick{border-top-color:var(--ggd-line)!important}
.ggd-start--split .ggd-start__col{padding:22px 20px}
.ggd-start--split .ggd-start__heading{padding:20px 20px 0}
.ggd-start--split .ggd-start__hours{margin-top:14px!important}
}
@media (max-width:480px){
.ggd-start--split .ggd-start__select{flex:1 1 100%}
.ggd-start--split .ggd-start__go{width:100%;justify-content:center}
.ggd-start--split .ggd-start__call{width:100%;justify-content:center}
}
/* ── Service areas v3: minimal, no surfaces ───────────────────
Drops the card-per-region and the pill-per-suburb. 66 bordered chips inside
6 bordered cards is a lot of boxes to say "we cover these places" — this is
the same semantic list (heading + ), typeset instead of boxed. */
.ggd-areas--grouped .ggd-areas__region{
background:none!important;
border:none!important;
box-shadow:none!important;
padding:0!important;
}
.ggd-areas--grouped .ggd-areas__regions{gap:34px 48px!important}
.ggd-areas--grouped .ggd-areas__region-title{
font-size:13px!important;
font-weight:700!important;
letter-spacing:.09em!important;
text-transform:uppercase!important;
margin:0 0 12px!important;
padding:0 0 11px!important;
border-bottom:1px solid rgba(255,255,255,0.14)!important;
color:rgba(255,255,255,0.55)!important;
}
.ggd-light.ggd-areas--grouped .ggd-areas__region-title{
color:#8a95ab!important;
border-bottom-color:#e4e9f1!important;
}
/* Suburbs as running text, not chips. */
.ggd-areas--grouped .ggd-areas__list{
display:block!important;
margin:0!important;padding:0!important;
font-size:15px;line-height:2;
}
.ggd-areas--grouped .ggd-areas__item{
display:inline!important;
background:none!important;
border:none!important;
padding:0!important;
margin:0!important;
font-size:15px!important;
line-height:2!important;
color:rgba(255,255,255,0.8)!important;
}
.ggd-light.ggd-areas--grouped .ggd-areas__item{color:#44506b!important}
.ggd-areas--grouped .ggd-areas__name{font-weight:400!important;color:inherit!important}
.ggd-light.ggd-areas--grouped .ggd-areas__name{color:#2c3750!important}
/* Separator between suburbs — a thin middot, muted. */
.ggd-areas--grouped .ggd-areas__item + .ggd-areas__item::before{
content:"·";
margin:0 9px 0 7px;
color:rgba(255,255,255,0.3);
}
.ggd-light.ggd-areas--grouped .ggd-areas__item + .ggd-areas__item::before{color:#b9c2d2}
@media (max-width:980px){
.ggd-areas--grouped .ggd-areas__regions{gap:28px 36px!important}
}
@media (max-width:620px){
.ggd-areas--grouped .ggd-areas__regions{gap:26px!important}
.ggd-areas--grouped .ggd-areas__list,
.ggd-areas--grouped .ggd-areas__item{font-size:14.5px!important;line-height:1.95!important}
}
/* ── v3 specificity fix ───────────────────────────────────────
The light-variant rules above are .ggd-areas.ggd-light .x (three classes)
and were beating the minimal rules at .ggd-areas--grouped .x (two), so the
card and chip borders survived. Same declarations, matched specificity. */
.ggd-areas.ggd-areas--grouped .ggd-areas__region,
.ggd-areas.ggd-light.ggd-areas--grouped .ggd-areas__region{
background:none!important;
background-color:transparent!important;
border:0!important;
box-shadow:none!important;
padding:0!important;
border-radius:0!important;
}
.ggd-areas.ggd-areas--grouped .ggd-areas__item,
.ggd-areas.ggd-light.ggd-areas--grouped .ggd-areas__item{
display:inline!important;
background:none!important;
background-color:transparent!important;
border:0!important;
border-radius:0!important;
padding:0!important;
margin:0!important;
box-shadow:none!important;
font-size:15px!important;
line-height:2!important;
}
.ggd-areas.ggd-areas--grouped .ggd-areas__item{color:rgba(255,255,255,0.8)!important}
.ggd-areas.ggd-light.ggd-areas--grouped .ggd-areas__item{color:#44506b!important}
.ggd-areas.ggd-light.ggd-areas--grouped .ggd-areas__name{color:#2c3750!important;font-weight:400!important}
.ggd-areas.ggd-areas--grouped .ggd-areas__list,
.ggd-areas.ggd-light.ggd-areas--grouped .ggd-areas__list{
display:block!important;
gap:0!important;
margin:0!important;
padding:0!important;
}
.ggd-areas.ggd-light.ggd-areas--grouped .ggd-areas__region-title{
color:#8a95ab!important;
border-bottom:1px solid #e4e9f1!important;
background:none!important;
}
/* ── Keep suburb names whole ──────────────────────────────────
As running text the browser wraps on any space, so "Geelong East" and
"North Shore" were splitting across lines. Names never break; the line
breaks between them instead. The separator trails its own name (::after)
rather than leading the next one, so a line never starts with a middot. */
.ggd-areas.ggd-areas--grouped .ggd-areas__item,
.ggd-areas.ggd-light.ggd-areas--grouped .ggd-areas__item{
white-space:nowrap!important;
}
.ggd-areas.ggd-areas--grouped .ggd-areas__name{white-space:nowrap!important}
/* Move the separator from ::before on the next item to ::after on this one. */
.ggd-areas--grouped .ggd-areas__item + .ggd-areas__item::before{content:none!important}
.ggd-areas.ggd-areas--grouped .ggd-areas__item:not(:last-child)::after{
content:"·";
margin:0 8px;
color:rgba(255,255,255,0.32);
}
.ggd-areas.ggd-light.ggd-areas--grouped .ggd-areas__item:not(:last-child)::after{
color:#bcc5d4;
}
/* ── Service areas v4: balanced columns + typographic rhythm ───
The "random" look came from a CSS grid: six regions of wildly different
lengths (5 to 16 suburbs) forced each ROW to the height of its tallest
card, leaving big ragged gaps under the short ones.
Multi-column flows them continuously instead, so the columns balance
themselves and there are no row gutters to go ragged. break-inside keeps
a region from splitting across a column boundary. */
.ggd-areas.ggd-areas--grouped .ggd-areas__regions{
display:block!important;
column-count:3;
column-gap:56px;
max-width:1180px;
margin-inline:auto;
}
.ggd-areas.ggd-areas--grouped .ggd-areas__region{
break-inside:avoid;
-webkit-column-break-inside:avoid;
page-break-inside:avoid;
display:inline-block;
width:100%;
margin:0 0 30px!important;
}
/* Region heading: name left, count right, hairline under both. */
.ggd-areas.ggd-areas--grouped .ggd-areas__region-title,
.ggd-areas.ggd-light.ggd-areas--grouped .ggd-areas__region-title{
display:flex!important;
align-items:baseline!important;
justify-content:space-between!important;
gap:12px!important;
font-size:12.5px!important;
font-weight:700!important;
letter-spacing:.1em!important;
text-transform:uppercase!important;
margin:0 0 11px!important;
padding:0 0 9px!important;
}
.ggd-areas.ggd-areas--grouped .ggd-areas__region-name{flex:1 1 auto;min-width:0}
/* The count gives each block a consistent right-hand anchor, which is most
of what stops the set reading as random. */
.ggd-areas.ggd-areas--grouped .ggd-areas__region-count{
flex:0 0 auto;
font-size:11px;
font-weight:700;
letter-spacing:.04em;
opacity:.65;
font-variant-numeric:tabular-nums;
}
/* Slightly tighter leading than v3 — long lists read better dense. */
.ggd-areas.ggd-areas--grouped .ggd-areas__item,
.ggd-areas.ggd-light.ggd-areas--grouped .ggd-areas__item{
font-size:14.5px!important;
line-height:1.9!important;
}
@media (max-width:980px){
.ggd-areas.ggd-areas--grouped .ggd-areas__regions{column-count:2;column-gap:40px}
}
@media (max-width:620px){
.ggd-areas.ggd-areas--grouped .ggd-areas__regions{column-count:1}
.ggd-areas.ggd-areas--grouped .ggd-areas__region{margin-bottom:24px!important}
}
/* ════════════════════════════════════════════════════════════
SERVICE AREAS v5 — the ordinary version.
Previous passes kept adding devices: pills, then middot runs, then
tracked-out uppercase labels with counts. Each one made it busier. This is
the plain convention every trade site servicing a greater area uses —
a quiet group label, suburbs stacked underneath, nothing else.
──────────────────────────────────────────────────────────── */
.ggd-areas.ggd-areas--grouped .ggd-areas__regions{
display:block!important;
column-count:3;
column-gap:40px;
max-width:1060px;
margin-inline:auto;
}
.ggd-areas.ggd-areas--grouped .ggd-areas__region{
break-inside:avoid;
-webkit-column-break-inside:avoid;
display:inline-block;
width:100%;
margin:0 0 26px!important;
padding:0!important;
border:0!important;
background:none!important;
}
/* Group label: sentence case, no tracking, no rule, no uppercase. */
.ggd-areas.ggd-areas--grouped .ggd-areas__region-title,
.ggd-areas.ggd-light.ggd-areas--grouped .ggd-areas__region-title{
display:block!important;
font-size:15px!important;
font-weight:700!important;
line-height:1.3!important;
letter-spacing:0!important;
text-transform:none!important;
margin:0 0 8px!important;
padding:0!important;
border:0!important;
color:#13233f!important;
}
.ggd-areas.ggd-areas--grouped:not(.ggd-light) .ggd-areas__region-title{color:#fff!important}
/* Suburbs: one per line. No separators, no boxes. */
.ggd-areas.ggd-areas--grouped .ggd-areas__list,
.ggd-areas.ggd-light.ggd-areas--grouped .ggd-areas__list{
display:block!important;
list-style:none!important;
margin:0!important;
padding:0!important;
columns:auto!important;
}
.ggd-areas.ggd-areas--grouped .ggd-areas__item,
.ggd-areas.ggd-light.ggd-areas--grouped .ggd-areas__item{
display:block!important;
background:none!important;
border:0!important;
padding:0!important;
margin:0!important;
font-size:14.5px!important;
line-height:1.75!important;
white-space:normal!important;
color:#5b6884!important;
}
.ggd-areas.ggd-areas--grouped:not(.ggd-light) .ggd-areas__item{color:rgba(255,255,255,0.72)!important}
.ggd-areas.ggd-areas--grouped .ggd-areas__name,
.ggd-areas.ggd-light.ggd-areas--grouped .ggd-areas__name{
color:inherit!important;
font-weight:400!important;
}
/* Kill every separator from the earlier passes. */
.ggd-areas--grouped .ggd-areas__item::before,
.ggd-areas--grouped .ggd-areas__item::after,
.ggd-areas.ggd-areas--grouped .ggd-areas__item:not(:last-child)::after,
.ggd-areas.ggd-light.ggd-areas--grouped .ggd-areas__item:not(:last-child)::after{
content:none!important;
margin:0!important;
}
@media (max-width:900px){
.ggd-areas.ggd-areas--grouped .ggd-areas__regions{column-count:2;column-gap:32px}
}
@media (max-width:560px){
.ggd-areas.ggd-areas--grouped .ggd-areas__regions{column-count:1}
.ggd-areas.ggd-areas--grouped .ggd-areas__region{margin-bottom:22px!important}
}
/* ════════════════════════════════════════════════════════════
SERVICE AREAS v6 — six region cards.
Uses .ggd-areas--cards, a different root class from the old
.ggd-areas--grouped, so none of the earlier passes' rules apply here.
──────────────────────────────────────────────────────────── */
.ggd-areas--cards{
--ggd-card:#ffffff;
--ggd-line:#e3e8f0;
--ggd-ink:#13233f;
--ggd-ink-soft:#5b6884;
max-width:1120px;
margin-inline:auto;
}
.ggd-areas--cards:not(.ggd-light){
--ggd-card:rgba(255,255,255,0.05);
--ggd-line:rgba(255,255,255,0.12);
--ggd-ink:#ffffff;
--ggd-ink-soft:rgba(255,255,255,0.68);
}
.ggd-areas--cards .ggd-areas__intro{
text-align:center;
max-width:60ch;
margin:0 auto 32px;
font-size:16.5px;
line-height:1.6;
color:var(--ggd-ink-soft)!important;
}
.ggd-areas--cards .ggd-areas__grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.ggd-areas--cards .ggd-areas__card{
background:var(--ggd-card);
border:1px solid var(--ggd-line);
border-radius:14px;
padding:22px 24px 24px;
transition:border-color .18s,box-shadow .18s,transform .18s;
}
.ggd-areas--cards:not(.ggd-light) .ggd-areas__card{backdrop-filter:blur(2px)}
.ggd-areas--cards .ggd-areas__card:hover{
border-color:#5b8fe0;
box-shadow:0 6px 20px rgba(19,35,63,0.08);
transform:translateY(-2px);
}
.ggd-areas--cards .ggd-areas__card-title{
font-size:17px!important;
font-weight:700!important;
line-height:1.25!important;
letter-spacing:-0.01em!important;
text-transform:none!important;
margin:0 0 7px!important;
padding:0!important;
border:0!important;
color:var(--ggd-ink)!important;
}
.ggd-areas--cards .ggd-areas__card-list{
margin:0!important;
font-size:14.5px!important;
line-height:1.6!important;
color:var(--ggd-ink-soft)!important;
}
.ggd-areas--cards .ggd-areas__more{
color:var(--ggd-ink-soft)!important;
opacity:.75;
font-style:italic;
}
@media (max-width:900px){
.ggd-areas--cards .ggd-areas__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media (max-width:560px){
.ggd-areas--cards .ggd-areas__grid{grid-template-columns:1fr;gap:14px}
.ggd-areas--cards .ggd-areas__card{padding:18px 20px 20px}
.ggd-areas--cards .ggd-areas__intro{font-size:15.5px;margin-bottom:24px}
}
@media (prefers-reduced-motion:reduce){
.ggd-areas--cards .ggd-areas__card{transition:none!important}
.ggd-areas--cards .ggd-areas__card:hover{transform:none!important}
}
/* ── Service-area "…" expander ─────────────────────────────────
Sits inline at the end of the suburb run. No box, no extra padding on the
card: the revealed text just continues the same sentence. */
.ggd-areas--cards .ggd-areas__toggle{
display:inline!important;
background:none!important;
border:0!important;
border-radius:0!important;
padding:0 0 0 2px!important;
margin:0!important;
font:inherit!important;
font-size:inherit!important;
line-height:inherit!important;
color:var(--ggd-ink)!important;
font-weight:700!important;
letter-spacing:.06em;
cursor:pointer!important;
vertical-align:baseline;
transition:opacity .15s;
}
.ggd-areas--cards .ggd-areas__toggle:hover{opacity:.6}
.ggd-areas--cards .ggd-areas__toggle:focus-visible{
outline:2px solid #5b8fe0;
outline-offset:2px;
border-radius:3px!important;
}
/* The revealed remainder is plain continuing text. */
.ggd-areas--cards .ggd-areas__rest{
color:inherit;
}
.ggd-areas--cards .ggd-areas__rest[hidden]{display:none}
/* Card grows to fit when expanded; rows stay aligned to the top so an
expanded card does not drag its neighbours' text down. */
.ggd-areas--cards .ggd-areas__grid{align-items:start}
/* ── On-brand blues, sampled from the site's own tokens ────────
The theme publishes a design system on :root (--ggd-blue #1D4ED8,
--ggd-blue-bright #3B82F6, --ggd-blue-glow #60A5FA, --ggd-focus-ring).
These blocks were using hand-picked approximations instead. Every colour
below now references the real token, with the sampled value as a fallback
so the block still renders correctly if the theme stylesheet is absent. */
/* The "…" affordance: brand blue, lighter on hover. */
.ggd-areas--cards .ggd-areas__toggle{
color:var(--ggd-blue, #1D4ED8)!important;
font-weight:700!important;
letter-spacing:.08em;
transition:color .15s ease!important;
opacity:1!important;
}
.ggd-areas--cards .ggd-areas__toggle:hover{
color:var(--ggd-blue-bright, #3B82F6)!important;
opacity:1!important;
}
.ggd-areas--cards .ggd-areas__toggle:active{
color:var(--ggd-blue-glow, #60A5FA)!important;
}
.ggd-areas--cards .ggd-areas__toggle:focus-visible{
outline:none!important;
box-shadow:var(--ggd-focus-ring, 0 0 0 3px rgba(29,78,216,0.18))!important;
border-radius:var(--ggd-radius, 6px)!important;
color:var(--ggd-blue-bright, #3B82F6)!important;
}
/* Card hover: the same brand blue rather than the old ad-hoc #5b8fe0. */
.ggd-areas--cards .ggd-areas__card:hover{
border-color:var(--ggd-blue, #1D4ED8)!important;
box-shadow:0 6px 20px rgba(29,78,216,0.10)!important;
}
/* Region titles pick up the theme's navy, not the block's approximation. */
.ggd-areas--cards.ggd-light .ggd-areas__card-title{
color:var(--ggd-navy, #0F172A)!important;
}
.ggd-areas--cards.ggd-light .ggd-areas__card-list,
.ggd-areas--cards.ggd-light .ggd-areas__intro{
color:var(--ggd-slate, #475569)!important;
}
.ggd-areas--cards.ggd-light .ggd-areas__card{
border-color:var(--ggd-border, rgba(30,64,175,0.10))!important;
border-radius:var(--ggd-radius-lg, 10px)!important;
}
/* On the dark surface the same control needs a lighter resting blue to
clear the navy behind it. */
.ggd-areas--cards:not(.ggd-light) .ggd-areas__toggle{
color:var(--ggd-blue-glow, #60A5FA)!important;
}
.ggd-areas--cards:not(.ggd-light) .ggd-areas__toggle:hover{
color:#93C5FD!important;
}
/* ── No horizontal margin on the block root ───────────────────
.ggd-areas--cards had max-width:1120px + margin-inline:auto, which showed
as left/right margin bands inside the Elementor container. The container
already sets the page width, so the block just fills it. */
.ggd-areas.ggd-areas--cards{
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
width:100%!important;
}
.ggd-areas.ggd-areas--cards .ggd-areas__intro{
margin-left:auto!important;
margin-right:auto!important;
}
/* ── CTA: eyebrow over button ─────────────────────────────────
Colours come from the theme's own :root tokens, with the sampled values
as fallbacks. */
.ggd-cta-unit{
font-family:'Heebo',-apple-system,BlinkMacSystemFont,sans-serif;
display:flex;
flex-direction:column;
gap:12px;
align-items:center;
}
.ggd-cta-unit--left{align-items:flex-start;text-align:left}
.ggd-cta-unit--right{align-items:flex-end;text-align:right}
.ggd-cta-unit--center{align-items:center;text-align:center}
.ggd-cta-unit .ggd-cta-unit__eyebrow{
margin:0!important;
font-size:15.5px!important;
line-height:1.5!important;
font-weight:500!important;
color:var(--ggd-slate, #475569)!important;
}
.ggd-cta-unit .ggd-cta-unit__btn{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
padding:15px 32px!important;
min-height:54px!important;
border-radius:var(--ggd-radius-lg, 10px)!important;
font-size:16.5px!important;
font-weight:700!important;
letter-spacing:-0.01em!important;
line-height:1.1!important;
text-decoration:none!important;
cursor:pointer;
transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease!important;
}
.ggd-cta-unit .ggd-cta-unit__btn:hover{transform:translateY(-1px)}
.ggd-cta-unit .ggd-cta-unit__btn:focus-visible{
outline:none!important;
box-shadow:var(--ggd-focus-ring, 0 0 0 3px rgba(29,78,216,0.18))!important;
}
/* Primary: the brand red, same as the site's solid actions. */
.ggd-cta-unit .ggd-cta-unit__btn--primary,
.ggd-cta-unit .ggd-cta-unit__btn--primary:visited{
background:var(--ggd-red, #BE1E2D)!important;
border:2px solid transparent!important;
color:#fff!important;
}
.ggd-cta-unit .ggd-cta-unit__btn--primary:hover{
background:var(--ggd-red-bright, #DC2626)!important;
color:#fff!important;
}
/* Outline: navy rule, fills on hover. */
.ggd-cta-unit .ggd-cta-unit__btn--outline,
.ggd-cta-unit .ggd-cta-unit__btn--outline:visited{
background:transparent!important;
border:2px solid var(--ggd-border-strong, rgba(30,64,175,0.18))!important;
color:var(--ggd-navy, #0F172A)!important;
}
.ggd-cta-unit .ggd-cta-unit__btn--outline:hover{
border-color:var(--ggd-blue, #1D4ED8)!important;
background:var(--ggd-blue-tint, #EFF6FF)!important;
color:var(--ggd-blue-deep, #1E3A8A)!important;
}
@media (max-width:560px){
.ggd-cta-unit .ggd-cta-unit__btn{width:100%;padding:14px 22px!important}
.ggd-cta-unit .ggd-cta-unit__eyebrow{font-size:15px!important}
}
@media (prefers-reduced-motion:reduce){
.ggd-cta-unit .ggd-cta-unit__btn{transition:none!important}
.ggd-cta-unit .ggd-cta-unit__btn:hover{transform:none!important}
}
/* ── Door tiles: white card ───────────────────────────────── */
.ggd-tiles .ggd-tile{
background:#ffffff!important;
border:1px solid var(--ggd-border, rgba(30,64,175,0.10))!important;
}
.ggd-tiles .ggd-tile__title,
.ggd-tiles .ggd-tile__link,
.ggd-tiles .ggd-tile__link:visited,
.ggd-tiles .ggd-tile__link:hover{color:var(--ggd-navy, #0F172A)!important}
.ggd-tiles .ggd-tile__sub{color:var(--ggd-slate, #475569)!important}
.ggd-tiles .ggd-tile__count{color:var(--ggd-slate-light, #94A3B8)!important}
/* ── Service areas: flat, no card ─────────────────────────── */
.ggd-areas--cards .ggd-areas__card{
background:none!important;
background-color:transparent!important;
border:0!important;
box-shadow:none!important;
padding:0!important;
border-radius:0!important;
transform:none!important;
transition:none!important;
}
.ggd-areas--cards .ggd-areas__card:hover{
border:0!important;
box-shadow:none!important;
transform:none!important;
}
.ggd-areas--cards .ggd-areas__grid{gap:30px 44px!important}
/* Bigger region titles, bigger city text */
.ggd-areas--cards .ggd-areas__card-title{
font-size:21px!important;
font-weight:700!important;
line-height:1.25!important;
margin:0 0 9px!important;
color:var(--ggd-navy, #0F172A)!important;
}
.ggd-areas--cards .ggd-areas__card-list{
font-size:16.5px!important;
line-height:1.65!important;
color:var(--ggd-slate, #475569)!important;
}
/* Bold the "..." */
.ggd-areas--cards .ggd-areas__toggle{
font-weight:800!important;
font-size:18px!important;
letter-spacing:.06em!important;
padding:0 0 0 3px!important;
}
@media (max-width:560px){
.ggd-areas--cards .ggd-areas__card-title{font-size:19px!important}
.ggd-areas--cards .ggd-areas__card-list{font-size:16px!important}
}
/* ── Real Elementor e-button widgets ──────────────────────────
The widgets are native Elementor; these only add the corner radius and
hover, since this page has no plain border-radius prop example to copy. */
.ggd-el-btn{
border-radius:var(--ggd-radius-lg, 10px)!important;
text-decoration:none!important;
transition:background-color .15s ease, border-color .15s ease, color .15s ease!important;
}
.ggd-el-btn--primary:hover{background-color:var(--ggd-red-bright, #DC2626)!important}
.ggd-el-btn--outline{
border:2px solid var(--ggd-border-strong, rgba(30,64,175,0.18))!important;
}
.ggd-el-btn--outline:hover{
border-color:var(--ggd-blue, #1D4ED8)!important;
background-color:var(--ggd-blue-tint, #EFF6FF)!important;
color:var(--ggd-blue-deep, #1E3A8A)!important;
}
.ggd-el-eyebrow{
color:var(--ggd-slate, #475569)!important;
margin:0 0 10px!important;
}
/* ── e-button sizing ──────────────────────────────────────────
Elementor stretches a button widget to its container width. These sit in a
stacked column, so they were rendering as full-width bars. Shrink to the
label and centre, matching the eyebrow above. */
.ggd-el-btn{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:auto!important;
align-self:center!important;
margin-inline:auto!important;
min-height:54px!important;
font-size:16px!important;
line-height:1.1!important;
}
.ggd-el-eyebrow{
text-align:center!important;
font-size:15.5px!important;
line-height:1.5!important;
}
/* ── Tile hover: white-on-white fix ───────────────────────────
The armor block written for the navy cards still forced the title to #fff
on hover via `.ggd-tiles .ggd-tile:hover .ggd-tile__link` (four classes),
which outranked the newer white-card rule at three. Cards are white now,
so the title stays navy in every state. Matched specificity rather than
piling on more !important. */
.ggd-tiles .ggd-tile:hover .ggd-tile__link,
.ggd-tiles .ggd-tile:hover .ggd-tile__title,
.ggd-tiles .ggd-tile:focus-within .ggd-tile__link,
.ggd-tiles .ggd-tile .ggd-tile__link:hover,
.ggd-tiles .ggd-tile .ggd-tile__link:focus{
color:var(--ggd-navy, #0F172A)!important;
}
.ggd-tiles .ggd-tile:hover .ggd-tile__sub{
color:var(--ggd-slate, #475569)!important;
}
/* ── Part finder as a card, matching the ggd_widget face ──────
Same anatomy as the widget's Parts card (icon, title, lead, then the
controls) but icon on top and a white surface, not the navy panel. */
.ggd-finder--panel.ggd-light{
background:#ffffff!important;
border:1px solid var(--ggd-border, rgba(30,64,175,0.10))!important;
border-radius:var(--ggd-radius-lg, 10px)!important;
padding:26px 26px 24px!important;
box-shadow:0 2px 10px rgba(19,35,63,0.05);
}
.ggd-finder--panel .ggd-finder__head{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:0;
margin-bottom:18px;
}
/* Icon tile, same treatment as the widget's face icon. */
.ggd-finder--panel .ggd-finder__icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;height:46px;
border-radius:11px;
font-size:22px;
margin-bottom:12px;
}
.ggd-finder--panel.ggd-light .ggd-finder__icon{
background:var(--ggd-blue-tint, #EFF6FF);
color:var(--ggd-blue, #1D4ED8);
}
.ggd-finder--panel:not(.ggd-light) .ggd-finder__icon{
background:rgba(255,255,255,0.08);
color:#fff;
}
.ggd-finder--panel .ggd-finder__title{
font-size:21px!important;
font-weight:700!important;
line-height:1.2!important;
letter-spacing:-0.02em!important;
margin:0 0 5px!important;
padding:0!important;
}
.ggd-finder--panel.ggd-light .ggd-finder__title{color:var(--ggd-navy, #0F172A)!important}
.ggd-finder--panel:not(.ggd-light) .ggd-finder__title{color:#fff!important}
.ggd-finder--panel .ggd-finder__lead{
font-size:14.5px!important;
line-height:1.5!important;
margin:0!important;
max-width:52ch;
}
.ggd-finder--panel.ggd-light .ggd-finder__lead{color:var(--ggd-slate, #475569)!important}
.ggd-finder--panel:not(.ggd-light) .ggd-finder__lead{color:rgba(255,255,255,0.68)!important}
@media (max-width:560px){
.ggd-finder--panel.ggd-light{padding:20px 18px 18px!important}
.ggd-finder--panel .ggd-finder__title{font-size:19px!important}
.ggd-finder--panel .ggd-finder__head{margin-bottom:14px}
}
/* Review links: send people to Google rather than an on-site form */
.ggd-reviews .ggd-reviews__links{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ggd-reviews a.ggd-reviews__link{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:8px;font:700 15px/1 Heebo,sans-serif;text-decoration:none!important;border:2px solid currentColor;color:#fff!important}
.ggd-reviews a.ggd-reviews__link--primary{background:var(--ggd-blue,#1D4ED8);border-color:var(--ggd-blue,#1D4ED8)}
.ggd-reviews a.ggd-reviews__link:hover{opacity:.9}
.ggd-reviews.ggd-light a.ggd-reviews__link{color:var(--ggd-navy,#0F172A)!important}
.ggd-reviews.ggd-light a.ggd-reviews__link--primary{color:#fff!important}