/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:15.5px;letter-spacing:.2px;text-align:center;
  padding:14px 26px;border-radius:10px;border:1px solid transparent;cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn svg{width:17px;height:17px;fill:currentColor;flex-shrink:0}
/* White text on this gold measures 2.91:1, well under WCAG AA's 4.5:1 for text
   this size. Navy on gold measures 5.27:1, and it is already the site's other
   brand color, not a fix that fights the palette. Hover keeps the same gold
   rather than darkening to gold-600, navy on gold-600 only reaches 4.08:1. */
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 4px 14px rgba(189,144,57,.28)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(189,144,57,.34)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-700);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-700)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:var(--gold);color:var(--navy)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- Placeholder image slot ---------- */
.ph{
  position:relative;width:100%;aspect-ratio:var(--ph-ratio,4/3);
  background:
    repeating-linear-gradient(45deg,var(--navy-050) 0 12px,#E6EBF2 12px 24px);
  border:1px dashed #B9C6D6;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.ph span{
  font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:#5B6E85;background:rgba(255,255,255,.9);padding:7px 13px;border-radius:20px;
  border:1px solid #C7D3E0;text-align:center;max-width:88%;
}
.ph::after{
  content:'PLACEHOLDER';position:absolute;top:9px;left:9px;
  font-size:9px;font-weight:800;letter-spacing:1.2px;color:#fff;
  background:var(--gold);padding:3px 8px;border-radius:4px;
}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--navy);color:#D6DEE8;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 70% at 78% 12%,rgba(189,144,57,.20) 0%,transparent 62%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:1;display:grid;gap:clamp(30px,4vw,56px);align-items:center;padding-block:clamp(46px,6vw,86px)}
@media (min-width:960px){ .hero-inner{grid-template-columns:1.08fr .92fr} }
.hero h1{color:#fff;margin-bottom:18px;line-height:1.08;letter-spacing:-.025em}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-lead{font-size:var(--lead);color:#B9C7D6;max-width:56ch}
.hero-points{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:11px}
.hero-points li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:#CBD7E4}
.hero-points li::before{
  content:'';flex-shrink:0;width:7px;height:12px;margin-top:5px;
  border:solid var(--gold);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.hero-media .ph{border-color:rgba(255,255,255,.35);background:repeating-linear-gradient(45deg,#0D3355 0 12px,#10406B 12px 24px)}
.hero-media .ph span{background:rgba(8,38,67,.85);color:#E3EAF2;border-color:rgba(255,255,255,.3)}

/* Trust strip under the hero.
   Title plus sub line rather than one sentence per item. Four sentences of
   different lengths made the row ragged, with one wrapping to two lines while
   its neighbours sat on one. A fixed two line structure holds the rhythm no
   matter how long the wording gets. */
.trust{background:var(--navy-700);border-top:1px solid rgba(255,255,255,.09);overflow:hidden}
.trust-track{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
}
.trust li{
  display:flex;align-items:center;gap:13px;padding:20px clamp(14px,2vw,24px);
  position:relative;
}
/* Hairline separators, drawn rather than using gap so no seam shows at the ends */
.trust li+li::before{
  content:'';position:absolute;left:0;top:18%;height:64%;width:1px;
  background:rgba(255,255,255,.12);
}
@media (min-width:720px){
  /* Desktop never scrolls, the duplicate set printed for the mobile loop
     stays out of the DOM's visible flow and out of tab order. */
  .trust li.trust-dup{display:none}
}
@media (max-width:719px){
  /* Continuous auto scrolling marquee rather than a stack or a manual swipe
     rail, nobody has to know to swipe. The list is printed twice in the
     markup (see front-page.php) and this animates the track exactly -50%
     of its own width, so the loop point where it resets is invisible, the
     duplicate set is what makes that work. Speed is fixed by duration, not
     distance, so it does not speed up or slow down with wording length. */
  .trust-track{
    display:flex;grid-template-columns:none;width:max-content;
    animation:era-trust-scroll 26s linear infinite;
  }
  /* Sized to its own content plus padding rather than a fixed 78vw/300px box.
     A fixed width left dead space after short text (e.g. "Corrimal Based"),
     so the divider anchored to the next item's edge sat hard against that
     next item's icon with a big gap on the other side, not centered in the
     seam. Content sizing keeps the padding symmetric on both sides of every
     divider regardless of how long each item's text is. */
  .trust li{flex:0 0 auto;padding:16px clamp(16px,4vw,28px)}
  .trust li+li::before{left:0;right:auto;top:18%;height:64%;width:1px}
  /* Pausable, a moving row of text is hard to read otherwise, tap or tab in */
  .trust:hover .trust-track,
  .trust:focus-within .trust-track{animation-play-state:paused}
}
@keyframes era-trust-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.trust-ic{
  flex-shrink:0;width:40px;height:40px;border-radius:11px;
  background:rgba(189,144,57,.14);border:1px solid rgba(189,144,57,.3);
  display:flex;align-items:center;justify-content:center;
}
.trust-ic svg{width:19px;height:19px;fill:var(--gold)}
.trust-txt b{display:block;color:#fff;font-size:14.5px;font-weight:700;line-height:1.25}
.trust-txt em{display:block;font-style:normal;color:#93A9C0;font-size:12.5px;line-height:1.35;margin-top:2px}

/* Why ERA Pro Care. No team photo is coming (see OPEN-QUESTIONS.md), so this
   section is designed around not needing one, an icon tile grid rather than
   text sitting beside an empty image slot. Same icon tile shape as
   .contact-ic, light background version. */
/* Flex rather than grid, same reason as .grid-center: an item count that
   does not divide evenly by the column count should center its incomplete
   last row, not leave it stuck to the left with empty space on the right. */
.why-grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(20px,2.5vw,28px);margin-top:clamp(28px,3.5vw,40px);
}
.why-tile{
  display:flex;gap:14px;align-items:flex-start;text-align:left;
  flex:1 1 min(100%,230px);max-width:290px;
}
.why-ic{
  flex-shrink:0;width:42px;height:42px;border-radius:11px;background:var(--gold-050);
  border:1px solid rgba(189,144,57,.28);display:flex;align-items:center;justify-content:center;
}
/* Same check tick as .card-list and .hero-points, drawn from a border rather
   than an icon font or a hand rolled SVG, so it can not render broken. */
.why-ic::before{
  content:'';width:9px;height:16px;margin-top:-2px;
  border:solid var(--gold-600);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.why-tile p{font-size:15px;color:var(--text);line-height:1.5;padding-top:8px}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
/* A gold rule that draws itself in on hover, rather than a static top border
   every card carries all the time, so it reads as a response, not a stripe. */
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .28s ease;z-index:1;
}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 36px -20px rgba(8,38,67,.32);border-color:#D3DDE8}
.card:hover::before{transform:scaleX(1)}
.card .ph,.card>img{border-radius:0;border-left:0;border-right:0;border-top:0}
.card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card h3{margin-bottom:9px}
.card p{font-size:15px;color:var(--muted)}
.card-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.card-list li{display:flex;gap:9px;font-size:14px;color:var(--text);line-height:1.55}
.card-list li::before{
  content:'';flex-shrink:0;width:6px;height:11px;margin-top:5px;
  border:solid var(--gold);border-width:0 2px 2px 0;transform:rotate(45deg);
}
/* A filled pill rather than a plain text link, so a grid of seven still
   reads as seven clear calls to act on, not seven captions. */
.card-link{
  margin-top:16px;align-self:flex-start;padding:10px 18px;border-radius:999px;
  font-weight:700;font-size:13.5px;color:var(--navy);background:var(--wash);
  display:inline-flex;align-items:center;gap:6px;min-height:40px;
  transition:background .2s ease,color .2s ease;
}
/* Stretched link. .card-link itself stays unpositioned so this escapes it,
   .card is the nearest positioned ancestor (position:relative, set above for
   the hover accent line), the whole card becomes the click target instead of
   just the small pill, one real anchor doing the navigating. */
.card-link::before{content:'';position:absolute;inset:0}
.card-link::after{content:'→';transition:transform .18s ease}
.card:hover .card-link{background:var(--gold-700);color:#fff}
.card:hover .card-link::after{transform:translateX(4px)}

/* ---------- How it works ----------
   Reads as one connected process rather than three separate cards. The rule
   between the numbers is what makes it a sequence instead of a list, and it is
   drawn behind the markers so it never crosses one. */
.steps{
  counter-reset:step;display:grid;gap:clamp(28px,3vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  position:relative;
}
.step{position:relative;padding-top:14px;text-align:center}
.step-n{
  position:relative;z-index:1;margin:0 auto 18px;
  width:58px;height:58px;border-radius:50%;
  background:var(--navy);color:#fff;font-weight:800;font-size:21px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(8,38,67,.22);border:3px solid var(--gold);
}
/* Connector, desktop only. Sits behind the markers and stops before the last. */
@media (min-width:860px){
  .step:not(:last-child)::after{
    content:'';position:absolute;top:43px;left:calc(50% + 40px);right:calc(-50% + 40px);
    height:2px;background:linear-gradient(90deg,rgba(189,144,57,.55),rgba(189,144,57,.18));
  }
}
.step h3{font-size:18px;margin:0 0 9px}
.step p{font-size:14.5px;color:var(--muted);max-width:34ch;margin-inline:auto}

/* Suburb chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.chips span,.chips a{
  font-size:13.5px;font-weight:600;color:var(--navy);background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:7px 15px;
}
.chips a:hover{border-color:var(--gold);color:var(--gold-700)}
.section-navy .chips span,.section-navy .chips a{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#DCE5EE}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 42px 19px 0;position:relative;
  font-weight:700;color:var(--navy);font-size:16.5px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:8px;top:50%;width:9px;height:9px;
  border:solid var(--gold);border-width:0 2px 2px 0;
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .faq-a{padding:0 0 20px;color:var(--muted);font-size:15.5px;max-width:70ch}

/* ---------- Carousels ---------- */
/* Generic scroll snap carousel, no JS library, the prev/next buttons just
   scrollBy one item's width. Shared by the homepage testimonials (empty
   until real reviews exist, see front-page.php) and the related services
   carousel on each service page (template-parts/service.php), the track and
   nav mechanics are identical, only the card inside differs. */
.carousel-track{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 2px 22px;margin:0 -2px;scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{display:none}
/* Related services carousel reuses .card (the photo card already built for
   the homepage services grid) at a fixed carousel width instead of the grid's
   flexible sizing. */
.carousel-track .card{flex:0 0 min(270px,78vw);scroll-snap-align:start}
.carousel-nav{display:flex;justify-content:center;gap:10px}
.carousel-btn{
  width:40px;height:40px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--navy);font-size:16px;display:inline-flex;
  align-items:center;justify-content:center;transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.carousel-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Callout */
.callout{
  background:var(--gold-050);border:1px solid rgba(189,144,57,.32);
  border-left:4px solid var(--gold);border-radius:var(--radius);padding:20px 24px;
}
.callout strong{color:var(--gold-700)}

/* ---------- Forms ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-sm)}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:700;color:var(--navy);margin-bottom:6px}
.field .req{color:var(--gold-700)}
.field .opt{color:var(--muted);font-weight:600;font-size:12.5px;text-transform:none;letter-spacing:0}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  padding:13px 15px;border:1px solid #CFD9E4;border-radius:9px;background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field textarea{min-height:120px;resize:vertical}
.field input[type="file"]{padding:10px 12px;cursor:pointer}
.field input[type="file"]::file-selector-button{
  font-family:inherit;font-weight:700;font-size:14px;color:var(--navy);
  background:var(--wash);border:0;border-radius:7px;padding:8px 14px;margin-right:12px;
  cursor:pointer;transition:background .18s ease;
}
.field input[type="file"]::file-selector-button:hover{background:var(--gold-050)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);box-shadow:var(--ring);outline:none}
.field-row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{width:100%;margin-top:6px;font-size:17px;padding:16px 24px}
.form-note{margin-top:12px;font-size:13px;color:var(--muted);text-align:center}

.notice{border-radius:10px;padding:14px 18px;margin-bottom:20px;font-size:15px;font-weight:600}
.notice-ok{background:var(--ok-bg);color:var(--ok);border:1px solid rgba(19,122,74,.25)}
.notice-bad{background:var(--bad-bg);color:var(--bad);border:1px solid rgba(179,38,30,.25)}

/* ---------- Contact rows ---------- */
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.contact-list li{display:flex;gap:14px;align-items:center}
.contact-ic{
  flex-shrink:0;width:42px;height:42px;border-radius:11px;background:var(--gold-050);
  border:1px solid rgba(189,144,57,.28);display:flex;align-items:center;justify-content:center;
}
.contact-ic svg{width:19px;height:19px;fill:var(--gold-600)}
.contact-list b{display:block;color:var(--navy);font-size:12px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:2px}
/* Same vertical rhythm on all three rows, the address has no link to give it
   this sizing naturally, .contact-val gets it explicitly so the row heights
   (and the gaps between them) match instead of the address row sitting
   shorter than phone and email. Colour left out of this rule on purpose,
   the links keep their normal navy from the global a{} rule, only
   .contact-val (the address, not a link) needs one set explicitly. */
.contact-list a,.contact-list .contact-val{font-size:16.5px;font-weight:700;display:inline-block;padding-block:10px;min-height:44px}
.contact-list .contact-val{color:var(--text)}

/* CTA band */
/* Full width gold band, flush against the footer directly below it, a pre
   footer rather than a floating card on a separate wash background. Site's
   other brand color, navy text throughout for contrast (checked against
   WCAG AA the same way as the --gold-700 body text elsewhere on this build,
   a gradient card here previously measured as low as 2.9:1 in places, flat
   gold with solid navy text measures 5.27:1 everywhere on the band). */
.cta-band{
  position:relative;overflow:hidden;background:var(--gold);
  padding-block:clamp(40px,5.5vw,64px);text-align:center;
}
.cta-band::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 90% at 88% 8%,rgba(8,38,67,.14) 0%,transparent 60%);
}
.cta-inner{position:relative;z-index:1;max-width:640px}
.cta-band .eyebrow{color:var(--navy);letter-spacing:.06em}
.cta-band h2{color:var(--navy);margin-bottom:12px}
.cta-band p{color:var(--navy);font-size:var(--lead)}

/* Buttons stay side by side at every width. Two equal columns rather than a
   wrapping flex row, so they never stack awkwardly on a phone. */
.cta-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  max-width:520px;margin:clamp(22px,3vw,30px) auto 0;
}
.cta-actions .btn{width:100%;padding-inline:12px;font-size:clamp(14px,3.4vw,16px)}
.cta-actions .btn svg{width:16px;height:16px}
@media (max-width:359px){
  .cta-actions{gap:8px}
  .cta-actions .btn{padding:13px 8px;font-size:13.5px;gap:6px}
}
.cta-note{margin-top:16px;font-size:13px;color:var(--navy)}

/* Breadcrumbs */
.crumbs{font-size:13px;color:var(--muted);padding-block:14px}
/* Breadcrumbs sit inline in a sentence of navigation, so they are exempt from the
   44px target rule under WCAG 2.5.8. Padded anyway to make them easier to hit. */
.crumbs a{color:var(--muted);display:inline-block;padding-block:7px}
.crumbs a:hover{color:var(--gold-700)}

/* Page header for interior pages */
.page-head{background:var(--navy-050);border-bottom:1px solid var(--line)}
.page-head .wrap{padding-block:clamp(28px,4vw,52px)}
.page-head h1{margin-bottom:12px}
.page-head p{font-size:var(--lead);color:var(--muted);max-width:62ch}

/* Prose for editor content */
.prose h2{margin:1.6em 0 .5em}
.prose h3{margin:1.4em 0 .4em}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.3em}
.prose li{margin-bottom:.4em}
.prose a{text-decoration:underline;text-underline-offset:3px}


/* ---------- Draft content ----------
   Sample copy that is NOT client confirmed. Invisible by default so the site
   can be shown to the client as a finished thing, but add ?draft=1 to any URL
   and every unconfirmed string is outlined. Register lives in OPEN-QUESTIONS.md
   and the pre launch check is `?draft=1` on every page. */
.is-draft{
  outline:2px dashed var(--gold);outline-offset:3px;
  background:rgba(189,144,57,.1);border-radius:3px;
}
.draft-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--gold);color:#fff;font-size:13px;font-weight:700;
  text-align:center;padding:9px 14px;
}

/* ---------- Where we work ----------
   Was 18 chips centred in a navy block, which reads as a blob rather than as
   information. Grouped into named columns with the Corrimal base called out,
   so a visitor can actually find their own suburb. */
/* Redesigned 2026-08-30 after the suburb by suburb grid moved to its own
   /service-areas/ page, this became just a text block with a badge, reads
   as unfinished on its own. A two column split, intro beside a distinct
   card, gives it the same visual weight as the rest of the homepage. */
.where-grid{display:grid;gap:clamp(30px,5vw,64px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){ .where-grid{grid-template-columns:1.05fr .95fr} }
.where-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:clamp(24px,3vw,32px);
}

.areas-base{
  display:flex;align-items:center;gap:13px;margin-top:24px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:14px 18px;
}
.where-card .areas-base{margin-top:0}
.areas-base svg{width:22px;height:22px;fill:var(--gold);flex-shrink:0}
.areas-base b{display:block;color:#fff;font-size:14.5px}
.areas-base em{display:block;font-style:normal;color:#93A9C0;font-size:12.5px;margin-top:2px}

.region-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.region-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(189,144,57,.12);border:1px solid rgba(189,144,57,.32);
  border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:#fff;
}
.region-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0}
.where-card .contact-line{color:#A9BCCF;font-size:14.5px;margin-top:20px}
.where-card .contact-line a{color:var(--gold);font-weight:700}

.areas-cols{display:grid;gap:clamp(20px,2.5vw,30px);grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr))}
.areas-col h3{
  font-size:12.5px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--gold);margin:0 0 12px;padding-bottom:9px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.areas-col ul{list-style:none;padding:0;margin:0;display:grid;gap:1px}
.areas-col li{
  color:#C2D0DE;font-size:14.5px;padding:7px 0 7px 17px;position:relative;
}
.areas-col li::before{
  content:'';position:absolute;left:0;top:15px;width:5px;height:5px;
  border-radius:50%;background:rgba(189,144,57,.55);
}
.areas-col li.is-base{color:#fff;font-weight:700}
.areas-col li.is-base::before{background:var(--gold);box-shadow:0 0 0 3px rgba(189,144,57,.22)}
.areas-more{margin-top:18px;font-size:14px;color:#93A9C0}
.areas-more a{display:inline-block;padding-block:12px;min-height:44px}
.areas-more a{color:var(--gold);font-weight:700}

/* ---------- Suburb + postcode pairs ---------- */
.areas-col li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;min-width:0}
.a-n{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:8px;min-width:0}
.a-p{
  flex-shrink:0;font-size:12.5px;font-variant-numeric:tabular-nums;
  color:#7F97AF;letter-spacing:.4px;
}
.areas-col li.is-base .a-p{color:var(--gold)}
.a-base{
  font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  color:#0F2B47;background:var(--gold);padding:2px 6px;border-radius:4px;
}
/* Postcode inside a chip */
.chips i,.footer-chips i{
  font-style:normal;font-size:12.5px;font-variant-numeric:tabular-nums;
  color:var(--muted);margin-left:3px;
}
.section-navy .chips i,.footer-chips i{color:#7F97AF}

/* Areas section on small screens. Two columns of suburbs rather than one long
   run, and the intro block stops trying to be a sidebar. */
@media (max-width:899px){
  .areas-cols{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:22px}
}
@media (max-width:459px){
  .areas-cols{grid-template-columns:1fr}
  .areas-col li{padding-block:9px}
}

/* ---------- Service areas page ---------- */
.area-groups{display:grid;gap:clamp(26px,3vw,34px);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.area-group{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(20px,2.5vw,28px);
}
.area-group h2{font-size:19px;margin-bottom:5px}
.area-group-sub{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.area-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-soft)}
.area-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:15px;color:var(--text);
}
.area-list .a-p{color:var(--muted)}
.area-list li.is-base{font-weight:700;color:var(--navy)}
.area-list li.is-base .a-p{color:var(--gold-700)}

/* A group with far more suburbs than the others (Sydney, added 2026-08-30)
   spans every track in the grid instead of one, then flows its own list
   into columns, so it does not sit as a single very tall column next to
   three short ones. */
.area-group-wide{grid-column:1/-1}
.area-list-cols{columns:2;column-gap:clamp(24px,3vw,48px)}
.area-list-cols li{break-inside:avoid}
@media (min-width:700px){ .area-list-cols{columns:3} }

/* ---------- Service page lead ----------
   Three blocks so the MOBILE order is intro, image, detail. The old two column
   split put the image last in source order, which on a phone buried it under
   the whole intro plus the included list plus the callout, where it did nothing
   to break up the text. Desktop still gets the image beside the copy. */
.svc-lead{display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:1fr}
@media (min-width:900px){
  .svc-lead{grid-template-columns:1.05fr .95fr;align-items:start}
  .svc-intro {grid-column:1;grid-row:1}
  .svc-detail{grid-column:1;grid-row:2}
  .svc-media {grid-column:2;grid-row:1 / span 2;position:sticky;top:96px}
}
.svc-detail h2{font-size:var(--h3)}

/* Mobile: page head buttons stay side by side, two equal columns rather than
   auto width buttons wrapping into a ragged stack, same pattern as .cta-actions. */
@media (max-width:599px){
  .page-head .btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .page-head .btn-row .btn{width:100%;padding-inline:10px;font-size:clamp(13px,3.4vw,15px)}
}
@media (max-width:379px){
  .section-wash .grid-4{grid-template-columns:1fr}
}
/* Also Available always has exactly 6 cards (7 services minus the current
   page). auto-fit lands on 4 or 5 columns across a lot of common desktop
   widths, and 6 does not divide evenly by either, leaving the short row
   stuck to one side with an empty gap. Flex plus centering above the point
   the mobile 2 up override takes over, that stays exactly as it was. */
@media (min-width:600px){
  .section-wash .grid-4{display:flex;flex-wrap:wrap;justify-content:center}
  .section-wash .grid-4>.card{flex:1 1 min(100%,215px);max-width:270px}
}

/* ---------- Hero and page header background images ----------
   Applied only when a real image exists. Without one the .has-bg class is never
   printed and both keep the flat navy they have now, so the site never shows a
   half styled header while photography is still being sourced.

   The overlay is doing real work. White text over a photograph is unreadable
   without it, and a navy gradient rather than plain black keeps the brand
   colour dominant instead of turning everything grey. */
.hero.has-bg::after,
.page-head.has-bg::after{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(180deg,rgba(8,38,67,.93) 0%,rgba(8,38,67,.86) 55%,rgba(8,38,67,.94) 100%),
    var(--bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero.has-bg::before{z-index:1}          /* gold glow sits above the photo */
.hero.has-bg .hero-inner,
.hero.has-bg .trust{position:relative;z-index:2}

/* The page header is normally a light panel with dark text. With a photo behind
   it, every one of those colours has to flip or the text disappears. */
.page-head.has-bg{
  position:relative;background:var(--navy);border-bottom-color:rgba(255,255,255,.12);
  overflow:hidden;
}
.page-head.has-bg .wrap{position:relative;z-index:2}
.page-head.has-bg h1{color:#fff}
.page-head.has-bg p{color:#B9C7D6}
.page-head.has-bg .crumbs,
.page-head.has-bg .crumbs a{color:#93A9C0}
.page-head.has-bg .crumbs a:hover{color:var(--gold)}
.page-head.has-bg .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.page-head.has-bg .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* Mobile carries the same photo at a much smaller size, so bias the crop toward
   the centre and lift the overlay slightly, small screens lose detail fast. */
@media (max-width:767px){
  .hero.has-bg::after,
  .page-head.has-bg::after{
    background-image:
      linear-gradient(180deg,rgba(8,38,67,.95) 0%,rgba(8,38,67,.90) 100%),
      var(--bg);
    background-position:50% 40%;
  }
}