inherits the card's border and 32px padding. */ .loc-page { display: flex; flex-direction: column; } /* Robust: everything defaults to a middle order and keeps its source position; only the first sections are pulled forward. New sections added further down can't shove anything above the hero — their default order is higher. */ .loc-page > section { order: 6; } .loc-page > section:nth-of-type(1) { order: 1; } /* subhero */ .loc-page > section:nth-of-type(3) { order: 2; } /* before/after */ .loc-page > section:nth-of-type(4) { order: 3; } /* CTA strip */ .loc-page > section:nth-of-type(5) { order: 4; } /* google review */ .loc-page > section:nth-of-type(2) { order: 5; } /* area copy + form */ } /* ---------- google reviews ---------- */ .stars { display: inline-flex; gap: 2px; flex: none; } .stars svg { width: 15px; height: 15px; color: #fbbc04; } .gmark { width: 18px; height: 18px; flex: none; } /* Rating pill in the hero. */ .hero__rating { display: inline-flex; align-items: center; gap: 11px; margin-top: 28px; padding: 10px 18px 10px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; font-size: 0.84rem; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .hero__rating:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } .hero__rating strong { font-weight: 600; } .hero__rating span { color: var(--on-dark-2); } .reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .review { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; transition: transform 0.26s ease, box-shadow 0.26s ease; } .review:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .review__top { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; } .review__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--mint-wash); color: var(--teal-dark); display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; flex: none; } .review__who { min-width: 0; } .review__who { display: flex; flex-direction: column; } .review__name { display: block; font-weight: 600; font-size: 0.92rem; color: var(--forest); line-height: 1.3; } .review__meta { display: block; font-size: 0.72rem; color: var(--ink-3); margin-top: 2px; } .review__top .gmark { margin-left: auto; align-self: flex-start; } .review__stars { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .review__when { font-size: 0.72rem; color: var(--ink-3); } .review p { font-size: 0.89rem; line-height: 1.68; } /* Google truncates long reviews; we show exactly what it shows. */ .review__more { color: var(--ink-3); } .reviews__head { display: flex; justify-content: center; margin-top: 20px; } .reviews__score { display: inline-flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 10px 20px; box-shadow: var(--shadow-sm); } .reviews__score b { font-size: 1.05rem; color: var(--forest); } .reviews__score span { font-size: 0.8rem; color: var(--ink-3); } /* A single review on a location page: one compact strip, not a whole section. The full card cost ~610px of scroll; this costs about a fifth of that. */ .review-strip { display: flex; align-items: center; gap: 22px; max-width: 980px; margin-inline: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 26px; box-shadow: var(--shadow-sm); } .review-strip__score { display: flex; align-items: center; gap: 9px; flex: none; padding-right: 22px; border-right: 1px solid var(--line); } .review-strip__score b { font-size: 1.02rem; color: var(--forest); } .review-strip__body { min-width: 0; flex: 1; } .review-strip__quote { font-size: 0.88rem; line-height: 1.6; color: var(--ink-2); /* Verbatim in the DOM, visually clipped to two lines. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .review-strip__who { font-size: 0.76rem; color: var(--ink-3); margin-top: 5px; } .review-strip__who b { color: var(--forest); font-weight: 600; } @media (max-width: 860px) { .review-strip { flex-wrap: wrap; gap: 12px 14px; padding: 18px 20px; } .review-strip__score { border-right: none; padding-right: 0; } .review-strip__body { flex: 1 1 100%; order: 3; } } @media (max-width: 1080px) { .reviews { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .reviews { grid-template-columns: 1fr; } .hero__rating { margin-top: 22px; } } /* ---------- recurring quote CTA strip ---------- */ .qcta { max-width: 860px; margin-inline: auto; text-align: center; background: var(--mint-wash); border: 1px solid var(--mint-soft); border-radius: var(--r-lg); padding: 30px 28px; } .qcta__line { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 700; letter-spacing: -0.02em; color: var(--forest); margin-bottom: 6px; } .qcta__sub { font-size: 0.9rem; color: var(--ink-2); margin-bottom: 22px; } .qcta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .qcta__or { font-size: 0.86rem; font-weight: 500; color: var(--ink-3); align-self: center; } @media (max-width: 520px) { .qcta__actions .btn { flex: 1 1 100%; } .qcta__or { flex: 1 1 100%; text-align: center; } } /* ---------- locations ---------- */ .locs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .loc { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 14px; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .loc:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--mint); } .loc__pin { width: 40px; height: 40px; border-radius: 11px; background: var(--mint-wash); color: var(--teal-dark); display: grid; place-items: center; } .loc__pin svg { width: 18px; height: 18px; } .loc h3 { font-size: 1.12rem; } .loc__subs { font-size: 0.84rem; color: var(--ink-2); line-height: 1.6; } .loc__go { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 600; color: var(--forest); } .loc__go svg { width: 14px; height: 14px; transition: transform 0.22s ease; } .loc:hover .loc__go svg { transform: translate(3px, -3px); } /* Make the whole card clickable without nesting interactive elements. */ .loc__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* ---------- CTA banner ---------- */ .cta { background: var(--teal); border-radius: var(--r-xl); padding: clamp(40px, 5vw, 68px); display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; position: relative; overflow: hidden; } .cta::after { content: ""; position: absolute; width: 380px; height: 380px; right: -110px; bottom: -190px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); } .cta h2 { color: #fff; max-width: 15ch; } .cta p { color: rgba(255, 255, 255, 0.9); margin-top: 18px; max-width: 42ch; font-size: 0.97rem; } .cta__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .cta .btn--ghost-light { border-color: rgba(255, 255, 255, 0.55); } .cta__media { position: relative; z-index: 1; min-height: 260px; } /* Location-page CTA has no media column — one full-width column instead of the split. */ .cta--solo { grid-template-columns: 1fr; } /* Quote form sitting inside the teal closing banner. */ .cta__form { position: relative; z-index: 2; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: var(--r-lg); padding: 30px; box-shadow: 0 12px 40px rgba(13, 43, 33, 0.2); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .cta__form { background: var(--paper); } } .cta__form h3 { margin-bottom: 6px; } /* `.cta p` paints text white for the banner — undo that inside the card. */ .cta__form p { color: var(--ink-2); margin-top: 0; max-width: none; font-size: 0.87rem; } .cta__form .qform__alt { color: var(--ink-3); font-size: 0.8rem; } .cta__form .qform { margin-top: 18px; padding-top: 18px; } /* ---------- footer ---------- */ .footer { background: var(--forest); color: var(--on-dark-2); margin-top: var(--section-y); padding-block: clamp(56px, 6vw, 88px) 0; } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* Larger lockup in the footer, with no pill around it — it anchors the column. */ .footer .brand { background: transparent; border: none; box-shadow: none; padding: 0; gap: 15px; } .footer .brand__mark { width: 58px; height: 58px; border-radius: 13px; } .footer .brand__name { color: #fff; font-size: 1.28rem; } .footer .brand__sub { color: var(--on-dark-2); font-size: 0.64rem; } /* ---------- footer social + credit ---------- */ /* No badge — just the mark, larger. */ .social { display: flex; gap: 14px; margin-top: 24px; } .social a { color: var(--on-dark-2); display: inline-flex; transition: color 0.18s ease, transform 0.18s ease; } .social a:hover { color: var(--mint); transform: translateY(-2px); } .social svg { width: 34px; height: 34px; } .credit a { color: #fff; font-weight: 600; letter-spacing: 0.04em; transition: color 0.18s ease; } /* ABN links out to the ABR register. */ .footer__bar a { color: var(--on-dark-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.25); transition: color 0.18s ease, text-decoration-color 0.18s ease; } .footer__bar a:hover { color: var(--mint); text-decoration-color: var(--mint); } .footer__bar .credit a { color: #fff; text-decoration: none; } .footer__bar .credit a:hover { color: var(--mint); } .credit a:hover { color: var(--mint); } .footer__blurb { color: var(--on-dark-2); font-size: 0.88rem; margin-top: 24px; max-width: 34ch; } .footer h3 { color: #fff; font-size: 0.79rem; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 22px; font-weight: 600; } .footer ul { list-style: none; display: grid; gap: 12px; } .footer a { font-size: 0.88rem; color: var(--on-dark-2); transition: color 0.18s ease; } .footer a:hover { color: var(--mint); } .footer__contact li { font-size: 0.88rem; line-height: 1.6; } .footer__contact strong { color: #fff; font-weight: 500; } .footer__hours { font-size: 0.82rem; color: var(--ink-3); } /* Three columns, not space-between: with items of unequal width, space-between pushes the middle one off centre. The 1fr / auto / 1fr grid truly centres it. */ .footer__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-block: 28px; font-size: 0.79rem; } .footer__bar > :first-child { justify-self: start; } .footer__bar > :nth-child(2) { justify-self: center; text-align: center; } .footer__bar > :last-child { justify-self: end; text-align: right; } @media (max-width: 860px) { .footer__bar { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 10px; } .footer__bar > :first-child, .footer__bar > :last-child { justify-self: center; text-align: center; } } .footer__bar p { color: var(--on-dark-2); font-size: inherit; } /* ---------- location page bits ---------- */ /* Same photo treatment as the homepage hero. Set --hero-img inline to switch it on:

Without it, falls back to flat forest green + the window-pane grid. */ .subhero { background-color: var(--forest); background-image: var(--hero-img, none); background-size: cover; background-position: center right; background-repeat: no-repeat; border-radius: var(--r-xl); padding: clamp(40px, 5vw, 76px); position: relative; overflow: hidden; isolation: isolate; margin-top: 8px; } /* Scrim so the white copy stays readable over the photo: dark on the left where the text sits, clearing toward the right. A touch stronger on the right than the homepage because the subhero's proof row and pills run wider. */ .subhero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 100deg, rgba(13, 43, 33, 0.95) 0%, rgba(13, 43, 33, 0.9) 40%, rgba(13, 43, 33, 0.72) 72%, rgba(13, 43, 33, 0.55) 100% ); } /* No photo yet? The scrim is invisible over flat green, so add the window-pane grid. */ .subhero:not([style*="--hero-img"])::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 84px 84px; } .subhero h1 { color: #fff; max-width: 16ch; font-size: clamp(2.1rem, 4.4vw, 3.6rem); } .subhero p { color: var(--on-dark-2); opacity: 0.85; max-width: 52ch; margin-top: 22px; } .subhero .hero__cta { margin-top: 34px; } .subhero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; } .subhero__proof .hero__rating { margin-top: 0; } .subhero__guarantee { display: inline-flex; align-items: center; gap: 10px; max-width: 320px; font-size: 0.78rem; line-height: 1.4; color: var(--on-dark-2); } .subhero__guarantee svg { width: 26px; height: 26px; flex: none; color: var(--mint); } .subhero__guarantee strong { color: #fff; font-weight: 600; } .crumbs { display: flex; align-items: center; gap: 9px; font-size: 0.8rem; color: var(--on-dark-2); margin-bottom: 26px; flex-wrap: wrap; } .crumbs a:hover { color: var(--mint); } .crumbs span { opacity: 0.5; } .pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; opacity: 0.7; } .pill { font-size: 0.82rem; font-weight: 500; color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-pill); padding: 9px 18px; } /* Jump links: let someone landing on a location page reach the service they came for without scrolling past the whole hero. */ .jump { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .jump__label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); margin-right: 4px; opacity: 0.7; } .jump a { font-size: 0.84rem; font-weight: 500; color: #fff; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, 0.2); display: inline-flex; align-items: center; gap: 7px; opacity: 0.72; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, opacity 0.18s ease; } .jump a::after { content: ""; width: 6px; height: 6px; border-right: 1.6px solid var(--mint); border-bottom: 1.6px solid var(--mint); transform: rotate(45deg) translate(-1px, -1px); } .jump a:hover { background: var(--teal); border-color: var(--teal); transform: translateY(-2px); opacity: 1; } .jump a:hover::after { border-color: #fff; } @media (max-width: 680px) { .jump__label { width: 100%; margin-bottom: 2px; } } .prose { max-width: 68ch; } .prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 20px; } .prose h3 { margin: 36px 0 12px; font-size: 1.1rem; } .prose p + p { margin-top: 18px; } .prose p { font-size: 0.97rem; } /* In-copy links must be visibly clickable — colour alone isn't enough. */ .prose a { color: var(--teal-dark); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--mint); transition: color 0.18s ease, text-decoration-color 0.18s ease; } .prose a:hover { color: var(--forest); text-decoration-color: var(--forest); } .split { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(40px, 5vw, 80px); align-items: start; } /* Frosted glass, matching the homepage hero form — a translucent brand tint so it reads on the light page. */ .aside-card { background: linear-gradient(155deg, rgba(224, 244, 239, 0.72), rgba(198, 236, 227, 0.78)); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--r-lg); padding: 32px; position: sticky; top: 144px; box-shadow: 0 12px 36px rgba(13, 43, 33, 0.12); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .aside-card { background: var(--mint-wash); } } .aside-card h3 { margin-bottom: 8px; } .aside-card p { font-size: 0.87rem; } .aside-card ul { list-style: none; display: grid; gap: 14px; margin: 24px 0; padding-top: 24px; border-top: 1px solid var(--line); } .aside-card li { font-size: 0.87rem; color: var(--ink-2); } .aside-card li strong { display: block; color: var(--forest); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 3px; } .aside-card .btn { width: 100%; } /* ---------- quote form (Web3Forms) ---------- */ .qform { display: grid; gap: 12px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); } .field { display: grid; gap: 6px; } .field label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--forest); } .field label .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-3); } .field input, .field select, .field textarea { font-family: inherit; font-size: 0.92rem; color: var(--ink); background: var(--shell); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; width: 100%; transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; } .field textarea { resize: vertical; min-height: 66px; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-3); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; background: var(--paper); border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15, 169, 140, 0.15); } /* Browsers flag an invalid field only after the user has typed something. */ .field input:not(:placeholder-shown):invalid { border-color: #c0563f; } .field select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; } /* Honeypot — real people never see it. Clipped rather than pushed off-canvas. */ .qform__bot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; opacity: 0; pointer-events: none; } .qform .btn { margin-top: 4px; } .qform__alt { font-size: 0.8rem; color: var(--ink-3); text-align: center; margin-top: 2px; } .qform__alt a { color: var(--forest); font-weight: 600; } .qform__alt a:hover { color: var(--teal-dark); } /* Inline confirmation, shown in place of the form after a successful submit. thanks.html remains the no-JavaScript fallback. */ .qform__done { text-align: center; padding: 26px 6px 8px; margin-top: 22px; border-top: 1px solid var(--line); } .qform__tick { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; background: var(--mint-wash); color: var(--teal-dark); display: grid; place-items: center; } .qform__tick svg { width: 24px; height: 24px; } .qform__done h3 { margin-bottom: 8px; } .qform__done p { font-size: 0.87rem; margin-bottom: 20px; } .qform__done .btn { width: 100%; } .qform__error { margin-top: 12px; font-size: 0.82rem; color: #b4462f; text-align: center; } .qform__error a { font-weight: 600; color: inherit; text-decoration: underline; } /* ---------- "don't see your suburb" prompt ---------- */ .no-area { max-width: 620px; margin: 40px auto 0; text-align: center; background: var(--paper); border: 1px dashed var(--mint); border-radius: var(--r-lg); padding: 30px 28px; } .no-area h3 { font-size: 1.08rem; margin-bottom: 8px; } .no-area p { font-size: 0.89rem; max-width: 46ch; margin: 0 auto 22px; } .no-area__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } @media (max-width: 680px) { .no-area__actions .btn { flex: 1 1 100%; } } .other-locs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .other-locs a { font-size: 0.84rem; font-weight: 500; color: var(--forest); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 10px 20px; transition: border-color 0.18s ease, transform 0.18s ease; } .other-locs a:hover { border-color: var(--forest); transform: translateY(-2px); } /* ---------- before / after slider ---------- */ .ba { position: relative; width: 100%; /* 900×450 grown by ~2in each way (96 CSS px ≈ 1in) => 1100×643. */ aspect-ratio: 1100 / 643; max-width: 1100px; margin-inline: auto; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--forest); user-select: none; touch-action: pan-y; isolation: isolate; } .ba__media { position: absolute; inset: 0; } .ba__media img, .ba__media .ba__ph { width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; } .ba__media img { object-fit: cover; display: block; } /* Specificity has to match the rule above, or display:block would win. */ .ba__media .ba__ph { display: grid; } /* The "before" layer sits on top and is clipped to the handle position. */ .ba__before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); z-index: 2; } /* Placeholder art — replace each .ba__ph with an . */ .ba__ph { display: grid; align-content: center; gap: 10px; padding: 24px; } /* Captions sit on opposite sides so they never collide at the split. */ .ba__ph--before { justify-items: start; justify-content: start; text-align: left; padding-left: clamp(20px, 7%, 62px); background: repeating-linear-gradient( -50deg, rgba(0, 0, 0, 0.16) 0 3px, transparent 3px 9px ), linear-gradient(160deg, #6f7671, #565d58 60%, #6b7370); } .ba__ph--after { justify-items: end; justify-content: end; text-align: right; padding-right: clamp(20px, 7%, 62px); background: radial-gradient(120% 90% at 70% 15%, #ffffff 0%, #dff1ea 40%, #9fd8c8 100%); } .ba__ph svg { width: 30px; height: 30px; opacity: 0.85; } .ba__ph--before svg { color: #e8ecea; } .ba__ph--after svg { color: var(--teal-dark); } .ba__ph strong { font-size: 0.8rem; letter-spacing: 0.05em; font-weight: 600; line-height: 1.5; /* Must stay inside its own half of the frame. */ max-width: 17ch; } .ba__ph--before strong { color: #f2f4f3; } .ba__ph--after strong { color: var(--forest); } .ba__ph em { font-style: normal; font-size: 0.68rem; opacity: 0.75; } .ba__ph--before em { color: #dfe4e2; } .ba__ph--after em { color: var(--ink-2); } /* Corner labels */ .ba__tag { position: absolute; bottom: 16px; z-index: 3; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 15px; border-radius: var(--r-pill); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; transition: opacity 0.2s ease; } .ba__tag--before { left: 16px; background: rgba(20, 26, 24, 0.72); color: #fff; } .ba__tag--after { right: 16px; background: rgba(255, 255, 255, 0.86); color: var(--forest); } /* Divider + grab handle */ .ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: #fff; transform: translateX(-1px); z-index: 4; pointer-events: none; box-shadow: 0 0 0 1px rgba(13, 43, 33, 0.14); } .ba__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-md); display: grid; place-items: center; gap: 3px; grid-auto-flow: column; } .ba__grip::before, .ba__grip::after { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--forest); border-left: 2px solid var(--forest); } .ba__grip::before { transform: rotate(-45deg); } .ba__grip::after { transform: rotate(135deg); } /* The real control: a full-bleed range input, invisible but focusable. Gives us drag, touch and arrow-key support for free. */ .ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 5; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; /* Horizontal drags move the slider (handled in JS); a vertical swipe still scrolls the page. Without this, iOS treats the whole overlay as scroll-only. */ touch-action: pan-y; } .ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 100%; cursor: ew-resize; } .ba__range::-moz-range-thumb { width: 56px; height: 100%; border: 0; background: transparent; cursor: ew-resize; } .ba__range:focus-visible ~ .ba__handle .ba__grip { outline: 3px solid var(--teal); outline-offset: 3px; } .ba__hint { text-align: center; font-size: 0.8rem; color: var(--ink-3); margin-top: 18px; } @media (max-width: 680px) { /* A 2:1 letterbox is only ~170px tall on a phone — too short to read. */ .ba { aspect-ratio: 4 / 3; border-radius: var(--r-md); } .ba__grip { width: 44px; height: 44px; } .ba__tag { bottom: 12px; font-size: 0.64rem; padding: 7px 12px; } .ba__tag--before { left: 12px; } .ba__tag--after { right: 12px; } } /* ---------- FAQ (native

, no JS needed) ---------- */ .faq { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; } .faq__item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 26px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .faq__item[open] { border-color: var(--mint); box-shadow: var(--shadow-sm); } .faq__item:hover { border-color: var(--mint); } .faq__item summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; font-weight: 600; font-size: 0.98rem; color: var(--forest); position: relative; } .faq__item summary::-webkit-details-marker { display: none; } /* Chevron, rotated when the item is open. */ .faq__item summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: translateY(-70%) rotate(45deg); transition: transform 0.22s ease; } .faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); } .faq__a { padding: 0 0 24px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: -2px; } .faq__a p { font-size: 0.92rem; line-height: 1.7; max-width: 72ch; } /* ---------- 404 ---------- */ .mid { min-height: 62vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 22px; padding-block: 80px; } /* ---------- reveal on scroll ---------- */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } [data-reveal].is-in { opacity: 1; transform: none; } /* ---------- responsive ---------- */ @media (max-width: 1080px) { .hero__grid { min-height: 440px; } .features { grid-template-columns: repeat(2, 1fr); gap: 44px 24px; } .cards { grid-template-columns: repeat(2, 1fr); } .rail { grid-template-columns: repeat(2, 1fr); } .locs { grid-template-columns: repeat(2, 1fr); } .cta, .split { grid-template-columns: 1fr; } .cta__media { display: none; } /* Below 1080 the portrait moves inside the checklist row (.includes), so the big one alongside the whole column is hidden. */ .care { grid-template-columns: 1fr; } .care__media { display: none; } .aside-card { position: static; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; } .process__top { grid-template-columns: 1fr; gap: 28px; } .process__rule { display: none; } } @media (max-width: 860px) { .nav__group { display: none; } /* Logo left, hamburger right. DOM order already puts the brand first once the desktop link groups are hidden, so no reordering is needed. */ .nav__toggle { display: flex; justify-content: flex-end; padding-left: 0; padding-right: 12px; } /* Mirror the bars so the short one hangs off the right edge. */ .nav__toggle span::after { left: auto; right: 0; } .nav { justify-content: space-between; } /* A dropdown card under the header — not a full-screen overlay. */ .nav__panel { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 2px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 14px; max-height: min(56vh, 520px); overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 120; } .nav__panel.is-open { display: block; } .nav__mlist { list-style: none; display: grid; gap: 2px; } .nav__mlist a { display: block; padding: 12px 14px; border-radius: var(--r-sm); font-size: 0.94rem; font-weight: 500; color: var(--ink); } .nav__mlist a:hover, .nav__mlist a:focus-visible { background: var(--mint-wash); color: var(--forest); } /* Collapsed by default; only opens when tapped. */ .nav__mgroup summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: var(--r-sm); font-size: 0.94rem; font-weight: 500; color: var(--ink); } .nav__mgroup summary::-webkit-details-marker { display: none; } .nav__mgroup summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.22s ease; } .nav__mgroup details[open] summary { color: var(--forest); } .nav__mgroup details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--teal); } .nav__mgroup ul { list-style: none; display: grid; gap: 2px; padding-left: 10px; border-left: 1px solid var(--line); margin: 4px 0 8px 14px; } .nav__mgroup ul a { font-size: 0.88rem; font-weight: 400; color: var(--ink-2); padding: 10px 12px; } /* The desktop menu's subtitle spans would run inline here. */ .nav__mgroup ul a span { display: none; } .nav__panel .btn { width: 100%; margin-top: 14px; } /* Items cascade in rather than appearing all at once. */ .nav__panel.is-open > * > li, .nav__panel.is-open > .btn { animation: navIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; } .nav__panel.is-open > * > li:nth-child(1) { animation-delay: 0.03s; } .nav__panel.is-open > * > li:nth-child(2) { animation-delay: 0.07s; } .nav__panel.is-open > * > li:nth-child(3) { animation-delay: 0.11s; } .nav__panel.is-open > * > li:nth-child(4) { animation-delay: 0.15s; } .nav__panel.is-open > * > li:nth-child(5) { animation-delay: 0.19s; } .nav__panel.is-open > * > li:nth-child(6) { animation-delay: 0.23s; } .nav__panel.is-open > .btn { animation-delay: 0.27s; } } @keyframes navIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .nav__panel.is-open > * > li, .nav__panel.is-open > .btn { animation: none; } } .nowrap { white-space: nowrap; } @media (max-width: 680px) { :root { --gutter: 18px; --r-xl: 22px; } .cards, .locs { grid-template-columns: 1fr; } /* Why Choose Us: 2x2 instead of a long single column. */ .features { grid-template-columns: repeat(2, 1fr); gap: 34px 16px; } .feature__ring { width: 76px; height: 76px; margin-bottom: 18px; } .feature__ring svg { width: 26px; height: 26px; } .feature__ring::after { top: 3px; right: 8px; width: 9px; height: 9px; } .feature h3 { font-size: 1rem; } .feature p { font-size: 0.82rem; } /* Process: single column of cards. */ .mosaic { grid-template-columns: 1fr; gap: 12px; } .step__caption { padding: 18px 20px; } /* Footer: two columns instead of one tall stack. */ .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; } /* Brand runs full width. Then Services and Get In Touch stack down the left, while Areas (six links, much taller) fills the right. Otherwise a big gap opens under the short Services column. */ .footer__grid > :first-child { grid-column: 1 / -1; } .footer__grid > :nth-child(2) { grid-column: 1; grid-row: 2; } .footer__grid > :nth-child(3) { grid-column: 2; grid-row: 2 / span 2; } .footer__grid > :last-child { grid-column: 1; grid-row: 3; } .footer__blurb { max-width: none; } .footer__contact { grid-template-columns: 1fr; } /* Services now sits above "How It Works" in the markup itself, so no flex reordering is needed here — the DOM order is already what we want on mobile. */ .care__list { grid-template-columns: 1fr; } .process__aside { flex-direction: column; align-items: flex-start; gap: 20px; } .rail__head { flex-direction: column; align-items: flex-start; } .rail { grid-template-columns: 1fr; } /* Headline sits at the very top of the panel; badge drops into normal flow underneath it rather than floating over the photo. */ .hero__grid { min-height: 0; } .hero__panel { background-position: 70% center; } .hero__panel::before { background: linear-gradient( 180deg, rgba(13, 43, 33, 0.94) 0%, rgba(13, 43, 33, 0.9) 30%, rgba(13, 43, 33, 0.5) 58%, rgba(13, 43, 33, 0.9) 100% ); } .badge { position: static; margin-top: 26px; max-width: none; } .hero__cta .btn, .cta__actions .btn { flex: 1 1 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } [data-reveal] { opacity: 1; transform: none; } .rail { scroll-behavior: auto; } } /* ---------- location pages: desktop subhero ---------- */ /* At 716px tall the subhero filled the viewport and the next section began 154px below the fold, so nothing signalled there was more page. Tightening the internal rhythm lifts the following section into view. Desktop only — mobile is fine. */ @media (min-width: 861px) { .subhero { /* Bottom is deeper than the top on purpose — it stops the jump-link row sitting hard against the panel edge. */ padding: 40px 52px 74px; } .subhero .crumbs { margin-bottom: 12px; } .subhero .hero__eyebrow { margin-bottom: 12px; } .subhero h1 { font-size: clamp(2.1rem, 3.2vw, 2.8rem); } .subhero p { margin-top: 14px; } .subhero .hero__cta { margin-top: 20px; } .subhero .pills { margin-top: 18px; } .subhero .jump { margin-top: 16px; padding-top: 14px; } } /* ---------- location pages: mobile tweaks ---------- */ @media (max-width: 860px) { /* Before/after runs wider than the text column, but stops ~10px short of the screen edge — flush to the edge reads as if it's falling off. */ .loc-page .ba { width: calc(100% + (var(--gutter) - 10px) * 2); margin-inline: calc((var(--gutter) - 10px) * -1); border-radius: var(--r-md); } } @media (max-width: 680px) { /* Portrait sits ~1cm lower than the first checklist item. */ .loc-page .includes__portrait { margin-top: 32px; } } /* ---------- legal pages (privacy) ---------- */ .legal { padding-block: 56px 72px; } .legal .wrap { max-width: 820px; } .legal h1 { font-size: clamp(2rem, 4vw, 2.7rem); margin-bottom: 6px; } .legal__date { color: var(--ink-3); font-size: 0.9rem; margin-bottom: 28px; } .legal h2 { font-size: 1.25rem; margin: 34px 0 10px; } .legal p { margin: 0 0 12px; font-size: 0.95rem; line-height: 1.75; } .legal ul { margin: 0 0 16px; padding-left: 22px; color: var(--ink-2); } .legal li { margin-bottom: 5px; font-size: 0.95rem; line-height: 1.7; } .legal a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 3px; } .legal a:hover { color: var(--forest); } /* Breadcrumbs sit on a light background here, not the dark hero. */ .crumbs--light { color: var(--ink-3); margin-bottom: 22px; } .crumbs--light a { color: var(--ink-2); } .crumbs--light a:hover { color: var(--teal-dark); } /* Desktop: raise "Why Choose Us" so its heading peeks above the fold under the hero. Only the section's own top padding is touched — the hero is left alone. */ @media (min-width: 1081px) { #why { padding-top: 20px; } } /* Homepage mobile: in the bottom CTA, show the form first and drop the heading + Call banner below it (it read as a redundant call-to-action sitting above the actual form). Homepage only — location .cta has no form. */ @media (max-width: 1080px) { .home .cta { display: flex; flex-direction: column; } .home .cta__form { order: -1; } }