: there is one
value per row, and a table would promise a comparison across columns
that does not exist here. */
.prices{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.prices__group{margin-top:30px}
.prices__group h3{
font-family:var(--display);font-size:12px;font-weight:800;
letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:12px;
}
.prices__row{
display:flex;align-items:baseline;justify-content:space-between;gap:20px;
padding:16px 0;border-bottom:1px solid var(--line);
}
.prices__name{display:block;color:var(--white);font-size:16px;font-weight:600}
.prices__incl,.prices__note{display:block;font-size:13px;line-height:1.6;margin-top:4px}
.prices__incl{color:var(--body)}
.prices__note{color:var(--muted)}
.prices__price{
flex:0 0 auto;font-family:var(--display);font-size:17px;font-weight:800;
color:var(--white);font-variant-numeric:tabular-nums;
}
@media (max-width:520px){
/* Stacking keeps the price on its own line rather than letting a long
service name squeeze it to the point of wrapping mid-figure. */
.prices__row{flex-direction:column;gap:6px}
.prices__price{font-size:19px}
}
.ctable .yes{color:var(--amber);font-weight:700}
.ctable .no{color:var(--muted)}
/* The brand links in the header row were 16px tall. This table scrolls
sideways on a phone, so those are targets you hit with a thumb while the
thing under it is moving. Padding buys the height; the matching negative
margin keeps the header row the size it already was. */
.ctable thead th a{display:inline-block;padding-block:5px;margin-block:-5px}
/* ── per-suburb service switcher ──────────────────────────────
Sits directly under the hero on location pages. Someone landing
on "Car Detailing Bankstown" who actually wants tinting should
not have to reach the footer to find it; these links were
previously 91% of the way down the page.
Deliberately not a card grid: it is navigation, so it is a row
of links that wraps. Min-height 44px keeps every target above
the comfortable touch size on mobile. */
.svc-switch{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;
padding:18px 0 4px;
}
.svc-switch__label{
font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);margin-right:4px;
}
.svc-switch a{
display:inline-flex;align-items:center;min-height:44px;
padding:10px 16px;border-radius:999px;
border:1px solid var(--line-2);background:var(--panel-2);
font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--body);
transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.svc-switch a:hover{border-color:var(--amber);color:var(--white)}
.svc-switch a[aria-current="page"]{
background:var(--amber);border-color:var(--amber);color:var(--on-gold);
}
@media (max-width:680px){
.svc-switch{gap:8px}
.svc-switch a{padding:10px 13px;font-size:11px;letter-spacing:.06em}
.svc-switch__label{width:100%;margin-bottom:2px}
}
/* numbered process steps */
.steps{counter-reset:step;display:flex;flex-direction:column;gap:0}
.step{
display:grid;grid-template-columns:88px 1fr;gap:28px;
padding:30px 0;border-bottom:1px solid var(--line);
}
.step:first-child{border-top:1px solid var(--line)}
.step__num{
font-family:var(--display);font-size:34px;font-weight:800;line-height:1;
color:var(--amber);opacity:.85;
}
.step h3{margin-bottom:10px}
.step p{font-size:16px;line-height:1.8}
.step p + p{margin-top:12px}
/* comparison table */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.compare__col{
padding:30px 28px;border-radius:var(--r-lg);
background:var(--panel-2);border:1px solid var(--line);
}
.compare__col--good{border-color:rgba(240,188,96,.55)}
.compare__col h3{margin-bottom:6px}
.compare__col h3 em{color:var(--amber)}
.compare__col ul{list-style:none;padding:0;margin-top:18px;display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.7}
.compare__col li{padding-left:26px;position:relative}
.compare__col li::before{content:"✕";position:absolute;left:0;top:0;color:var(--muted);font-weight:700}
.compare__col--good li::before{content:"✓";color:var(--amber)}
/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{
padding:30px 28px;border-radius:var(--r-lg);
background:var(--panel-2);border:1px solid var(--line);
display:flex;flex-direction:column;gap:16px;
}
.quote__mark{font-family:var(--display);font-size:38px;font-weight:800;color:var(--amber);line-height:.7}
.quote p{font-size:14px;line-height:1.75;flex:1}
.quote footer{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.quote__stars{color:var(--amber);letter-spacing:3px;font-size:12px}
/* next cards */
.next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.next-card{
display:flex;flex-direction:column;gap:12px;
padding:28px 26px;border-radius:var(--r-lg);
background:var(--panel-2);border:1px solid var(--line);
transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.next-card:hover{border-color:var(--amber);transform:translateY(-3px)}
.next-card p{font-size:14px;line-height:1.7;flex:1}
.next-card .link-arrow{align-self:flex-start;border-color:transparent;padding-bottom:0}
/* contact cards */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-card{
padding:34px 30px;border-radius:var(--r-lg);
background:var(--panel-2);border:1px solid var(--line);
display:flex;flex-direction:column;
}
.contact-card h3{margin-bottom:16px}
.contact-card .btn{margin-top:26px;align-self:flex-start}
.hours{margin:20px 0 0;display:flex;flex-direction:column;gap:8px}
.hours div{display:flex;justify-content:space-between;gap:20px;font-size:13px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.hours div:last-child{border-bottom:0}
.hours dt{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.hours dd{margin:0;color:var(--white)}
.map{margin-top:22px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.map img{width:100%;aspect-ratio:16/9;object-fit:cover;height:auto}
/* ── responsive ───────────────────────────────────────────── */
@media (max-width:1180px){
.cards,.cases__row{grid-template-columns:repeat(2,1fr)}
.quotes,.next-grid{grid-template-columns:1fr}
.footer__grid{grid-template-columns:1fr 1fr 1fr}
.footer__brand{grid-column:1 / -1}
}
@media (max-width:980px){
.nav{display:none}
.nav.is-open{display:flex;flex-basis:100%;flex-direction:column;align-items:stretch;
gap:2px;padding-bottom:18px}
.nav.is-open .nav__item{position:static}
.nav.is-open .nav__top{padding:12px 0;justify-content:space-between}
.nav.is-open .nav__top::after{display:none}
.nav.is-open .nav__chev{display:none}
/* menus stay open on mobile: a nested accordion inside a burger menu is a
worse experience than a slightly longer scroll */
.nav.is-open .nav__menu{
position:static;opacity:1;visibility:visible;transform:none;
min-width:0;margin:0 0 10px;padding:4px 0 4px 14px;
background:none;border:0;border-left:1px solid var(--line-2);
border-radius:0;box-shadow:none;
}
.nav.is-open .nav__menu::before{display:none}
.nav.is-open .nav__menu a{padding:9px 0}
.burger{display:block;flex-shrink:0}
.header-actions{display:none}
/* flex-wrap is what makes .nav.is-open{flex-basis:100%} mean "own row".
Without it the open menu stayed on the brand/burger line and was pushed
off the right edge: 23 of 24 links were outside the viewport at 375px and
the page picked up horizontal scroll. It also squeezed the burger itself
from 44px down to 22px, so the control you needed to close the menu was
the hardest thing on screen to hit. */
.site-header__inner{gap:14px;justify-content:space-between;flex-wrap:wrap}
.brand{margin-right:auto}
.story__grid,.enquire__grid,.why__grid,.comfort__grid,.split,.compare,.contact-grid{grid-template-columns:1fr;gap:40px}
.why__intro,.split__rail{position:static}
.story__media,.comfort__media{order:-1}
.side-tab{display:none}
.hero{min-height:620px}
.hero__content{padding-bottom:118px}
.page-hero{min-height:360px}
.page-hero__content{padding-bottom:88px}
}
@media (max-width:680px){
:root{--gutter:18px;--r-lg:16px;--r-xl:24px}
.announce__inner{flex-direction:column;gap:8px}
.cards,.cases__row,.form__row,.stats__grid{grid-template-columns:1fr}
.stat + .stat{padding-left:0;border-left:0;border-top:1px solid var(--line)}
.stat{padding-block:24px}
.footer__grid{grid-template-columns:1fr}
.newsletter__form{width:100%}
.newsletter__form input{min-width:0;flex:1}
.story,.treatments,.enquire,.why,.cases,.gallery,.comfort,.section{padding-block:56px}
.sheet{margin-inline:10px}
.sheet > .banner,.sheet > .newsletter{margin-inline:10px}
.ba-track{grid-auto-columns:minmax(80vw,1fr)}
.step{grid-template-columns:1fr;gap:12px}
.step__num{font-size:26px}
.feature + .feature{margin-top:44px;padding-top:44px}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
html{scroll-behavior:auto}
.reveal{opacity:1;transform:none}
}
/* ── proposal placeholders ────────────────────────────────── */
.tbc{color:var(--amber)!important;font-weight:600}
.footer__note{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.6}
/* ── form validation ──────────────────────────────────────── */
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
border-color:var(--danger);
box-shadow:0 0 0 3px rgba(229,72,77,.18);
}
.field__error{
display:block;margin-top:2px;
font-size:12px;font-weight:500;letter-spacing:.01em;text-transform:none;
color:var(--danger-ink);line-height:1.5;
}
.field.has-error > span{color:var(--danger-ink)}
/* ── partner / product badges ─────────────────────────────── */
.partners{
display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;
}
.partner{
display:flex;flex-direction:column;gap:5px;
padding:16px 20px;min-width:160px;flex:1 1 160px;
border:1px solid var(--line-2);border-radius:var(--r);
background:var(--panel-2);
transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.partner:hover{border-color:var(--amber);transform:translateY(-2px)}
/* real supplier marks — normalised to a common optical height */
/* aspect ratios differ hugely between these marks, so they're sized
optically rather than to one shared height */
.partner__logo{
width:auto;height:auto;
max-height:30px;max-width:128px;object-fit:contain;
opacity:.92;transition:opacity .25s var(--ease);
}
.partner__logo--sq{max-height:46px;max-width:52px} /* Ethos — near-square */
.partner__logo--wide{max-height:20px;max-width:142px} /* Rayno — long wordmark */
.partner__logo--stack{max-height:58px;max-width:58px} /* Magnum — shield over a two-line wordmark */
.partner:hover .partner__logo{opacity:1}
.partner__role{
font-size:9.5px;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--amber);
}
.partners--compact .partner{
flex-direction:row;align-items:center;gap:10px;
padding:11px 16px;min-width:0;flex:0 0 auto;
}
.partners--compact .partner__role{display:none}
/* ── product blocks ───────────────────────────────────────── */
.product{
padding:30px 28px;border-radius:var(--r-lg);
background:var(--panel-2);border:1px solid var(--line);
scroll-margin-top:100px;
}
.product + .product{margin-top:20px}
.product__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.product__tag{
font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:var(--amber);white-space:nowrap;
}
.product h3{margin-bottom:12px}
/* The link IS the whole heading here, so the WCAG 2.5.8 inline-in-a-sentence
exception does not cover it, and at 20px it was under the 24px minimum.
Padded to 30px, pulled back by the same amount so the card spacing is
unchanged. */
.product h3 a{display:inline-block;padding-block:5px;margin-block:-5px}
.product p{font-size:16px;line-height:1.75}
.product p + p{margin-top:12px}
.product .chips{margin-top:18px}
/* ── payment methods ──────────────────────────────────────── */
/* Uniform card-sized tiles. The source logos have wildly different aspect
ratios (Visa 3:1, Afterpay 5:1, Amex 1:1), so each is contained inside a
fixed tile rather than matched on height — which is how acceptance marks
are normally set. Explicit width/height keep it CLS-free. */
.pay{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.pay img{
width:54px;height:34px;display:block;
object-fit:contain;padding:5px 7px;border-radius:5px;
background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.pay img[alt="American Express"]{padding:0}
/* Afterpay is a 5.4:1 wordmark, not a card mark. In a card-shaped tile
`contain` renders it under 8px tall and it reads as an empty chip, so it
gets a wider tile — its artwork then draws at the same optical height as
the Visa wordmark next to it. Black-on-mint is their own brand guideline. */
.pay img[alt="Afterpay"]{width:92px;background:#B2FCE4;padding-inline:10px}
/* ── partner cards as outbound links ──────────────────────── */
a.partner{position:relative;text-decoration:none}
a.partner:hover{border-color:var(--amber)}
.partner__ext{
position:absolute;top:10px;right:12px;
font-size:12px;line-height:1;color:var(--muted);
transition:color .25s var(--ease),transform .25s var(--ease);
}
a.partner:hover .partner__ext{color:var(--amber);transform:translate(1px,-1px)}
/* ── Google reviews ───────────────────────────────────────── */
.reviews{padding-block:92px;border-top:1px solid var(--line)}
.reviews__head{
display:flex;align-items:flex-end;justify-content:space-between;
gap:32px;flex-wrap:wrap;margin-bottom:38px;
}
.reviews__score{display:flex;align-items:center;gap:18px}
.reviews__num{
font-family:var(--display);font-size:clamp(44px,5vw,66px);font-weight:800;
line-height:1;color:var(--white);
}
.reviews__num em{color:var(--amber)}
.reviews__meta{display:flex;flex-direction:column;gap:5px}
.reviews__stars{color:var(--amber);letter-spacing:3px;font-size:15px}
.reviews__count{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.reviews__track{
display:grid;grid-auto-flow:column;grid-auto-columns:minmax(330px,1fr);gap:20px;
overflow-x:auto;scroll-snap-type:x mandatory;
padding-bottom:16px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
scrollbar-width:thin;scrollbar-color:var(--panel-3) transparent;
}
.review{
scroll-snap-align:start;
padding:26px 24px;border-radius:var(--r-lg);
background:var(--panel-2);border:1px solid var(--line);
display:flex;flex-direction:column;gap:14px;
}
.review__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.review__stars{color:var(--amber);letter-spacing:2px;font-size:13px}
.review__when{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.review__body{font-size:16px;line-height:1.7;flex:1}
.review__who{
display:flex;align-items:center;gap:11px;
padding-top:14px;border-top:1px solid var(--line);
}
.review__avatar{
width:34px;height:34px;border-radius:50%;flex:none;
display:grid;place-items:center;
background:var(--panel-3);color:var(--amber);
font-size:13px;font-weight:700;
}
.review__name{font-size:14px;font-weight:600;color:var(--white)}
.reviews__empty{
padding:34px 30px;border-radius:var(--r-lg);
background:var(--panel-2);border:1px dashed var(--line-2);
max-width:70ch;
}
.reviews__empty p{font-size:16px;line-height:1.75}
.reviews__empty p + p{margin-top:12px}
.reviews__empty .btn{margin-top:22px}
@media (max-width:680px){
.reviews{padding-block:56px}
.reviews__track{grid-auto-columns:minmax(80vw,1fr)}
}
/* ── service area list ────────────────────────────────────── */
.area-list{
list-style:none;padding:0;margin:0 0 26px;
display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 20px;
}
.area-list li{
display:flex;align-items:baseline;justify-content:space-between;gap:12px;
padding:9px 0;border-bottom:1px solid var(--line);
}
.area-list a{color:var(--white);font-size:15px;transition:color .2s var(--ease)}
.area-list a:hover{color:var(--amber)}
.area-list span{font-size:11px;letter-spacing:.08em;color:var(--muted);white-space:nowrap}
/* narrow sticky rail: long single words (e.g. "STRAIGHTFORWARD") must not
escape the column at large clamp sizes */
.split__rail h2{text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
/* ---------- live Google reviews ----------
Five is the Places API's hard cap, so the layout is built for five
rather than pretending to be a carousel of hundreds. */
.cadrev {
display: grid; gap: 18px; margin-top: 28px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cadrev__card {
margin: 0; padding: 22px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
border-radius: 16px;
display: flex; flex-direction: column; gap: 12px;
}
.cadrev__stars { color: #e8b64c; letter-spacing: 2px; font-size: 14px; }
.cadrev__text {
margin: 0; font-size: 15px; line-height: 1.55;
/* reviews run long; clamp so the grid stays even and the card stays readable */
display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;
overflow: hidden;
}
.cadrev__by { display: flex; align-items: center; gap: 10px; margin-top: auto; font-size: 13px; }
.cadrev__avatar { border-radius: 50%; flex: none; }
.cadrev__name { font-weight: 600; }
.cadrev__when { opacity: .78; } /* .6 gave 3.49:1 on the card; .74 is the WCAG AA floor here */
@media (max-width: 640px) {
/* Scroller, not a stack. Four cards stacked ran to ~1200px on a phone,
which pushed everything after the reviews off the bottom of the page.
Same mechanics as .ba-track so the gesture is consistent sitewide. */
.cadrev {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(255px, 80vw);
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
padding-bottom: 14px;
/* bleed to the screen edge so the next card is visibly clipped - that
is the only affordance telling you there is more to the side */
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
scrollbar-width: thin;
scrollbar-color: var(--panel-3) transparent;
}
.cadrev__card { scroll-snap-align: start; }
}
/* ---------------------------------------------------------------
Spacing corrections
--------------------------------------------------------------- */
/* Every other intro block gets its heading-to-paragraph gap from a rule
scoped to that block (.why__intro p, .story__copy p, .split__rail p all
set margin-top:20px). .section--tight never had one, so its heading sat
flush against the paragraph while the rest of the page ran at 20px. */
.section--tight h2 + p { margin-top: 20px; }
/* Every prose block on this site is measured - .prose 66ch, .story__copy p
52ch, .finance p 56ch, .why__intro p 38ch. This section had no measure at
all and ran 144 characters per line. 66ch matches the general .prose rule. */
.section--tight .container > p,
.section--tight .container > ul:not(.prices) { max-width: 66ch; }
/* .prices is excluded above on purpose: a measure cap is right for prose,
but the price menu needs the full container so the figures sit on the
right-hand edge. Capped at 66ch it stopped 560px short and the whole
list hugged the left. */
.section--tight .container > ul.prices { max-width: none; }
/* Full-bleed band. With no margin it butted straight into the rounded card
above and the section below, so the amber read as part of both. */
.marquee { margin-block: 48px; }
/* The summary panel sits directly after the cards at every width, so this
gap belongs outside the mobile query - it was scoped to mobile first and
left the desktop grid butting straight into the panel. */
.cadrev { margin-bottom: 34px; }
@media (max-width: 640px) {
/* the scroller's 14px padding-bottom leaves room for the scrollbar, not
for the summary panel that follows it */
.cadrev { margin-bottom: 26px; }
.marquee { margin-block: 32px; }
}
/* ---------------------------------------------------------------
Button hit area
The theme's .btn rules land on the WordPress wrapper , which
carries the background, radius and padding. The
inside keeps its
default size, so the visible pill was 249x74 while only the inner
187x36 responded to a tap - the outer ~30px of every button did
nothing. The stretched pseudo-element hands the whole wrapper to the
anchor without touching a single layout value, so every variant
(.btn--lg, .btn--primary, .btn--outline) keeps its exact appearance.
--------------------------------------------------------------- */
.wp-block-button.btn { position: relative; }
.wp-block-button.btn > .wp-block-button__link::after {
content: "";
position: absolute;
inset: 0;
/* deliberately NOT inherit: that pulls the anchor's 9999px pill radius,
which curves the hit area away from the wrapper's 12px corners and
leaves them dead. A square hit area covers the visible shape. */
border-radius: 0;
}
/* ---------------------------------------------------------------
Nav density
The primary nav gained a top-level item (Dash Cams). Between the
burger breakpoint (980px) and roughly 1400px the row no longer
clears the logo and the call/book buttons on 24px gaps - it
overflowed by 73px at 1280. Tighten the gap over that band only;
above it the original 24px still fits.
--------------------------------------------------------------- */
@media (min-width: 981px) and (max-width: 1400px) {
.nav { gap: 13px; }
}
/* ---------------------------------------------------------------
Fluent Forms controls
Fluent ships its own control styling at 13.3px. Under 16px, iOS
Safari zooms the page when a field takes focus - and this is the
contact form, the main conversion path. The theme's own .field
input rule already sets 16px for this reason; Fluent's class
names simply never matched it.
--------------------------------------------------------------- */
.fluentform .ff-el-form-control { font-size: 16px; }
/* ---------------------------------------------------------------
'Where to next' cards
The link sits on the heading so the anchor text Google reads is
the destination's name, not the whole card concatenated. The
stretched pseudo-element gives the click target back to the
entire card.
--------------------------------------------------------------- */
.next-card { position: relative; }
.next-card h3 a {
color: inherit;
text-decoration: none;
}
.next-card h3 a::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.next-card:hover h3 a { color: var(--amber); }
/* The description and arrow sit after the heading in the DOM, so without a
z-index they paint over the stretched link and swallow the click. */
.next-card h3 a::after { z-index: 1; }
/* ---------------------------------------------------------------
Header on the narrowest phones
Below ~335px (iPhone SE, small Androids) the brand (241px) plus the
burger (44px) and the 14px gap need 299px, but the header offers only
284px inside its 18px padding. The burger wrapped onto a second row,
orphaned bottom-left, and the header grew from 73px to 131px.
Two points off the brand name brings the brand to 214px and the row
fits with 12px to spare. 340px and up is untouched.
--------------------------------------------------------------- */
@media (max-width: 339px) {
.brand__name { font-size: 12px; }
}
/* ---------------------------------------------------------------
Header buttons in the tight inline-nav band
From 981px (where the nav goes inline) to about 1090px the two
header buttons - the phone number and Book Online - need 314px side
by side but get only 271px after the nav, so they stacked vertically
and the header grew from 79px to 122px. The brand name is already
hidden in this band to make room; tightening the buttons is the half
that was missing. Both keep their full text. 1100px and up is
untouched.
--------------------------------------------------------------- */
@media (min-width: 981px) and (max-width: 1099px) {
.header-actions .btn {
padding: 12px 14px;
font-size: 11px;
letter-spacing: .08em;
}
}
/* ---------------------------------------------------------------
Call button on mobile
.header-actions was hidden below 980px and the burger menu carries
no phone number, so on a phone there was no persistent way to call -
the first call button sat in the hero and then nothing until 10,000px
down. For a business whose main conversion is a phone call that is
the wrong thing to hide.
Bring the call button back and drop the wordmark to pay for it: the
same trade the 981-1272px band already makes, and the name is still
in the title, the H1 and the footer. Book Online stays hidden - it
duplicates Contact, which is in the menu.
Measured: header 73px -> 77px at both 320 and 375. No overflow.
--------------------------------------------------------------- */
@media (max-width: 980px) {
.header-actions { display: flex; }
.header-actions .btn--primary { display: none; }
.brand__name { display: none; }
}
/* ---------------------------------------------------------------
Required-field marker
Fluent Forms tags required labels with .ff-el-is-required but ships
no visual for it, so email, phone and service all looked optional
until a submit failed. Now that a phone number is mandatory that
guesswork costs enquiries.
--------------------------------------------------------------- */
.fluentform .ff-el-is-required > label::after {
content: " *";
color: var(--amber);
font-weight: 700;
}