/*
* Solar Repairs — location page styles
* Loaded only on the locations CPT and the /locations/ hub (see functions.php).
* Brand tokens from Impreza theme options; fonts already loaded by the theme.
*/
/* ---------- the page itself: always light, as production is ---------- */
.sr-loc{
--accent:#f5612f; --accent-deep:#d94a1c;
--ink:#101013; --body-text:#676464;
--dark:#17181c; --muted-on-dark:#b7bbc6;
--border:#e8e8e8; --soft:#f2f2f2; --white:#fff;
--display:'Bebas Neue',Impact,sans-serif;
--body:Poppins,system-ui,sans-serif;
--ui:Overpass,system-ui,sans-serif;
--maxw:1240px; --pad:clamp(18px,5vw,40px); --sec:clamp(52px,6.5vw,96px); --r:14px;
font-family:var(--body); color:var(--body-text); background:var(--white);
line-height:1.7; font-size:16px; -webkit-font-smoothing:antialiased;
}
.sr-loc *{ box-sizing:border-box; }
.sr-loc img{ max-width:100%; display:block; }
.sr-loc a{ color:inherit; text-decoration:none; }
.sr-loc p{ margin:0 0 1rem; }
.sr-loc .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.sr-loc section{ padding-block:var(--sec); }
.sr-loc .soft-bg{ background:var(--soft); }
.sr-loc :focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }
.sr-loc .eyebrow{
font-family:var(--ui); font-weight:700; font-size:12.5px; letter-spacing:.17em;
text-transform:uppercase; color:var(--accent);
display:inline-flex; align-items:center; gap:.7em; margin:0 0 14px;
}
.sr-loc .eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); }
.sr-loc .eyebrow.on-dark{ color:#ff9b74; }
.sr-loc .sec-head{
font-family:var(--display); font-weight:400; font-size:clamp(34px,4.6vw,58px);
line-height:1.03; letter-spacing:.012em; color:var(--ink); margin:0 0 14px; text-wrap:balance;
}
.sr-loc .sec-intro{ max-width:62ch; margin:0 0 38px; }
.sr-loc .btn{
display:inline-flex; align-items:center; gap:.5em;
font-family:var(--ui); font-weight:700; font-size:14.5px; letter-spacing:.03em;
border-radius:8px; padding:14px 26px; border:2px solid transparent; transition:.18s ease;
}
.sr-loc .btn-primary{ background:var(--accent); color:#fff; box-shadow:0 10px 24px -10px rgba(245,97,47,.8); }
.sr-loc .btn-primary:hover{ background:var(--accent-deep); transform:translateY(-1px); }
.sr-loc .btn-ghost{ border-color:rgba(255,255,255,.45); color:#fff; }
.sr-loc .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); }
/* hero */
.sr-loc .hero{ position:relative; color:#fff; isolation:isolate; padding-block:clamp(54px,7vw,100px); }
.sr-loc .hero-img{
position:absolute; inset:0; z-index:-2; background:var(--dark);
background-image:
radial-gradient(120% 90% at 78% 18%, rgba(245,97,47,.30) 0%, rgba(245,97,47,0) 58%),
linear-gradient(200deg, #22242c 0%, #17181c 55%, #0e0f12 100%);
}
.sr-loc .hero::after{
content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
background-size:44px 44px;
-webkit-mask-image:linear-gradient(105deg, transparent 30%, #000 100%);
mask-image:linear-gradient(105deg, transparent 30%, #000 100%);
}
.sr-loc .hero .col{ max-width:660px; }
.sr-loc .hero h1{
font-family:var(--display); font-weight:400; font-size:clamp(42px,6.4vw,78px);
line-height:1.0; letter-spacing:.012em; color:#fff; margin:0 0 16px; text-wrap:balance;
}
.sr-loc .hero-sub{ font-size:clamp(16px,1.55vw,19px); color:#dcdee5; max-width:52ch; margin:0 0 28px; }
.sr-loc .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
/* rating strip */
.sr-loc .rating{ display:flex; align-items:center; gap:10px; margin-bottom:30px; flex-wrap:wrap; }
.sr-loc .stars{ display:inline-flex; gap:3px; }
.sr-loc .star{
width:17px; height:17px; background:var(--accent);
-webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sr-loc .star.part{ background:linear-gradient(90deg,var(--accent) 40%, rgba(255,255,255,.28) 40%); }
.sr-loc .rating-num{ font-family:var(--display); font-size:26px; color:#fff; line-height:1; }
.sr-loc .rating-dim{ font-size:14px; color:#a9aeba; }
/* badge slot — deliberately unfilled */
.sr-loc .badge-slot{ border:1px dashed rgba(255,255,255,.28); border-radius:10px; padding:14px 16px 16px; max-width:600px; }
.sr-loc .badge-slot-label{
font-family:var(--ui); font-weight:700; font-size:10.5px; letter-spacing:.14em;
text-transform:uppercase; color:#8f96a5; margin:0 0 10px;
}
.sr-loc .badges{ display:flex; flex-wrap:wrap; gap:8px 10px; padding:0; margin:0; list-style:none; }
.sr-loc .badges .ghost{
font-family:var(--ui); font-size:12px; font-weight:700; letter-spacing:.04em;
color:#7f8695; border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:6px 12px;
}
/* cards */
.sr-loc .grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); }
.sr-loc .card{
background:var(--white); border:1px solid var(--border); border-radius:var(--r);
padding:26px 24px; transition:.18s ease; display:block;
}
.sr-loc .card h3{ font-family:var(--display); font-weight:400; font-size:27px; line-height:1.08; color:var(--ink); margin:0 0 8px; }
.sr-loc .card p{ margin:0 0 12px; font-size:15px; }
.sr-loc a.card:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 16px 32px -20px rgba(0,0,0,.4); }
.sr-loc .card .more{ font-family:var(--ui); font-weight:700; font-size:13.5px; color:var(--accent); }
/* factors */
.sr-loc .factors{ display:grid; gap:20px 24px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.sr-loc .factor{ border-left:3px solid var(--accent); padding:2px 0 2px 16px; }
.sr-loc .factor strong{ display:block; font-family:var(--ui); font-weight:700; font-size:14.5px; color:var(--ink); margin-bottom:4px; letter-spacing:.01em; }
.sr-loc .factor span{ font-size:14.5px; }
/* split */
.sr-loc .split-grid{ display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .sr-loc .split-grid{ grid-template-columns:1.05fr .95fr; } }
.sr-loc .ticks{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.sr-loc .ticks li{ display:flex; gap:.75em; font-size:15.5px; }
.sr-loc .ticks li::before{ content:""; flex:none; margin-top:.5em; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.sr-loc .media-plate{
position:relative; border-radius:var(--r); aspect-ratio:4/3; overflow:hidden;
background:linear-gradient(160deg,#e9ebef,#dcdfe6); border:1px solid var(--border);
display:grid; place-items:center;
}
.sr-loc .plate-grid{
position:absolute; inset:0;
background-image:linear-gradient(rgba(23,24,28,.07) 1px,transparent 1px),
linear-gradient(90deg,rgba(23,24,28,.07) 1px,transparent 1px);
background-size:34px 34px;
}
.sr-loc .plate-label{
position:relative; font-family:var(--ui); font-weight:700; font-size:12px; letter-spacing:.14em;
text-transform:uppercase; color:#8b909c; text-align:center; line-height:1.9;
}
.sr-loc .plate-label em{ font-style:normal; letter-spacing:.04em; font-size:11px; }
/* map */
.sr-loc .map-plate{
position:relative; border:1px solid var(--border); border-radius:var(--r);
background:
radial-gradient(circle at 50% 44%, rgba(245,97,47,.10) 0%, rgba(245,97,47,0) 46%),
linear-gradient(#f7f8fa,#eef0f4);
min-height:clamp(250px,32vw,360px); display:grid; place-items:center; text-align:center; padding:28px;
overflow:hidden;
}
.sr-loc .map-plate::before{
content:""; position:absolute; inset:0;
background-image:linear-gradient(rgba(23,24,28,.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(23,24,28,.06) 1px,transparent 1px);
background-size:40px 40px;
}
.sr-loc .map-pin{
position:relative; width:22px; height:22px; border-radius:50% 50% 50% 0;
background:var(--accent); transform:rotate(-45deg); margin:0 auto 14px;
box-shadow:0 10px 22px -8px rgba(245,97,47,.9);
}
.sr-loc .map-pin::after{ content:""; position:absolute; inset:6px; background:#fff; border-radius:50%; }
.sr-loc .map-label{ position:relative; font-family:var(--display); font-size:26px; color:var(--ink); margin:0 0 6px; }
.sr-loc .map-note{ position:relative; font-size:13px; color:#8b909c; margin:0; max-width:44ch; }
.sr-loc .nearby-head{ font-family:var(--ui); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin:34px 0 0; }
.sr-loc .nearby{ display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:14px 0 0; list-style:none; }
.sr-loc .nearby a{
display:inline-block; font-family:var(--ui); font-weight:700; font-size:13.5px;
padding:9px 17px; border:1px solid var(--border); border-radius:999px; background:var(--white); transition:.16s ease;
}
.sr-loc .nearby a:hover{ border-color:var(--accent); color:var(--accent); }
.sr-loc .nearby a.all{ background:var(--ink); color:#fff; border-color:var(--ink); }
.sr-loc .nearby a.all:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
/* faq */
.sr-loc .faq-wrap{ max-width:920px; }
.sr-loc .faq{ border-bottom:1px solid #dcdcdc; }
.sr-loc .faq summary{
cursor:pointer; list-style:none; padding:20px 44px 20px 0; position:relative;
font-family:var(--ui); font-weight:700; font-size:16.5px; color:var(--ink);
}
.sr-loc .faq summary::-webkit-details-marker{ display:none; }
.sr-loc .faq summary::after{
content:""; position:absolute; right:8px; top:50%; width:13px; height:13px; margin-top:-6px; background:var(--accent);
-webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
transition:transform .18s ease;
}
.sr-loc .faq[open] summary::after{ transform:rotate(45deg); }
.sr-loc .faq .faq-body{ padding:0 0 22px; max-width:72ch; }
.sr-loc .faq .faq-body a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
/* cta */
.sr-loc .cta-band{ background:var(--dark); color:#fff; text-align:center; }
.sr-loc .cta-band h2{ font-family:var(--display); font-weight:400; font-size:clamp(34px,4.6vw,56px); line-height:1.04; color:#fff; margin:0 0 14px; text-wrap:balance; }
.sr-loc .cta-band p{ color:var(--muted-on-dark); max-width:58ch; margin:0 auto 26px; }
.sr-loc .cta-band .hero-cta{ justify-content:center; margin-bottom:18px; }
.sr-loc .cta-fine{ font-family:var(--ui); font-size:13px; color:#7f8695; margin:0; }
@media (prefers-reduced-motion: reduce){
.sr-loc *,.chrome *{ transition:none !important; transform:none !important; }
.sr-loc .map-pin{ transform:rotate(-45deg) !important; }
}
/* ---------- real photography ---------- */
.sr-loc .split-media img{ border-radius:var(--r); width:100%; aspect-ratio:4/3; object-fit:cover; }
.sr-loc .shots{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.sr-loc .shot{ margin:0; }
.sr-loc .shot img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); border:1px solid var(--border); }
.sr-loc .shot figcaption{
font-family:var(--ui); font-size:12.5px; font-weight:700; letter-spacing:.03em;
color:#8b909c; margin-top:9px;
}
/* ---------- fixes: classes the generator emits ---------- */
/* live Google map embed (the preview used a static placeholder, .map-plate) */
.sr-loc .map-embed{
width:100%; border:0; display:block; border-radius:var(--r);
height:clamp(300px,34vw,420px); background:var(--soft);
}
/* verified trust badges in the hero — the preview only styled the empty .ghost state */
.sr-loc .badges li{
display:inline-flex; align-items:center; gap:.5em;
font-family:var(--ui); font-size:13px; font-weight:700; letter-spacing:.02em;
color:#eceef3; background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:7px 14px 7px 11px;
}
.sr-loc .badges li::before{
content:""; flex:none; width:15px; height:15px; border-radius:50%; background:var(--accent);
-webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}
.sr-loc .badges li.ghost::before{ background:#6b7280; }
.sr-loc .badges{ gap:9px; margin-top:4px; }
/* service cards: keep the CTA pinned to the bottom so uneven copy still aligns */
.sr-loc .grid{ grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); }
.sr-loc .card{ display:flex; flex-direction:column; }
.sr-loc .card p{ flex:1 1 auto; }
.sr-loc .card .more{ margin-top:auto; }
/* the map section sits in a plain wrap, not a split grid */
.sr-loc .map-embed + .nearby-head{ margin-top:30px; }
/* ---------- hero trust bar (ABC-style single pill) ---------- */
.sr-loc .badgebar{
display:inline-block; margin-top:4px; padding:13px 22px;
background:rgba(10,11,14,.46); border:1px solid rgba(255,255,255,.14);
border-radius:14px; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
max-width:100%;
}
.sr-loc .badgebar .badges{ gap:10px 26px; margin:0; }
.sr-loc .badgebar .badges li{
background:none; border:0; padding:0; color:#fff; font-size:14px; font-weight:600;
}
.sr-loc .badgebar .badges li::before{ width:14px; height:14px; }
/* whole service card clickable, without nesting blocks inside an */
.sr-loc .card{ position:relative; }
.sr-loc .card .more{ margin-top:auto; text-decoration:none; }
.sr-loc .card .more::after{ content:""; position:absolute; inset:0; border-radius:var(--r); }
.sr-loc .card:hover{ border-color:var(--accent); transform:translateY(-2px);
box-shadow:0 16px 32px -20px rgba(0,0,0,.4); }
.sr-loc .card:focus-within{ border-color:var(--accent); }
/* per-suburb hero photograph sits under the gradient */
.sr-loc .hero-img{ background-size:cover; background-position:center; }
/* ---------- brand logo tiles (What we repair) ---------- */
/* A logo is recognised faster than a word, but the brand name stays as real
text inside the anchor: 44 internal links are doing work that an alt
attribute cannot. holds only inline children so wpautop leaves it alone. */
.sr-loc .grp-note{ margin:0; }
.sr-loc .brands{
display:grid; gap:14px;
grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
margin:14px 0 0; padding:0; list-style:none;
}
.sr-loc .brands li{ margin:0; }
.sr-loc .brandtile{
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:10px; height:100%; padding:16px 12px 14px;
border:1px solid var(--border); border-radius:12px;
background:var(--white); text-align:center; transition:.16s;
}
.sr-loc .brandtile:hover{
border-color:var(--accent); transform:translateY(-2px);
box-shadow:0 14px 28px -20px rgba(0,0,0,.35);
}
.sr-loc .brandtile img{
width:100%; max-width:118px; height:40px;
object-fit:contain; display:block;
}
.sr-loc .brandtile span{
font-family:var(--ui); font-weight:700; font-size:12.5px;
line-height:1.25; color:var(--ink);
}
.sr-loc .brandtile:hover span{ color:var(--accent); }
.sr-loc .brands + .nearby{ margin-top:14px; }
@media (max-width:520px){
.sr-loc .brands{ grid-template-columns:repeat(auto-fill,minmax(122px,1fr)); gap:10px; }
.sr-loc .brandtile img{ height:32px; max-width:96px; }
}
/* ---------- rebate figures ---------- */
/* Government figures move, so every block that quotes one is followed by an
.asat note naming the source and the date it was read. */
.sr-loc .asat{ font-size:14px; color:#7f8695; margin:18px 0 0; }
.sr-loc .asat a{ color:var(--accent); text-decoration:underline; }
.sr-loc .rtable{
width:100%; max-width:620px; border-collapse:collapse;
margin:26px 0 0; font-size:15.5px;
}
.sr-loc .rtable th,
.sr-loc .rtable td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); }
.sr-loc .rtable thead th{
font-family:var(--ui); font-size:12px; font-weight:700;
letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
border-bottom:2px solid var(--ink);
}
.sr-loc .rtable tbody td:last-child{ font-weight:700; color:var(--ink); white-space:nowrap; }
/* ---------- hero legibility fix ----------
An inline style="background-image:url(...)" REPLACES the gradient stack in
.hero-img rather than layering beneath it — background-image is one property,
not additive, and inline wins the cascade. Every hero carrying a photo was
therefore putting white text straight onto the photograph.
The scrim goes on a pseudo-element instead, so it sits over whatever the
markup supplies and no page markup has to change. Weighted to the left,
where .hero .col actually sits. */
.sr-loc .hero::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:
radial-gradient(120% 90% at 78% 18%, rgba(245,97,47,.22) 0%, rgba(245,97,47,0) 58%),
linear-gradient(105deg, rgba(12,13,16,.90) 0%, rgba(12,13,16,.82) 45%,
rgba(12,13,16,.55) 78%, rgba(12,13,16,.30) 100%),
linear-gradient(rgba(12,13,16,.45), rgba(12,13,16,.45));
}
/* the 44px grid overlay must stay above the scrim, not under it */
.sr-loc .hero::after{ z-index:-1; }
/* ---------- content blocks use the full container ----------
Caps of 920px / 62ch left a lot of empty right-hand column. Long prose runs
two-up instead of stretching to 150-character lines, which fills the width
without wrecking the measure. */
.sr-loc .faq-wrap{ max-width:none; }
.sr-loc .faq .faq-body{ max-width:none; }
.sr-loc .sec-intro{ max-width:82ch; }
.sr-loc .hero .col{ max-width:820px; }
.sr-loc .hero-sub{ max-width:64ch; }
.sr-loc .cta-band p{ max-width:74ch; }
.sr-loc .rtable{ max-width:none; }
@media (min-width:1000px){
.sr-loc .prose-2col{ columns:2; column-gap:clamp(34px,4vw,68px); }
.sr-loc .prose-2col > p{ margin-top:0; break-inside:avoid; }
.sr-loc .prose-2col > p:first-child{ margin-top:0; }
}
/* ---------- inverter brand grid ----------
Extends .brandtile (already live on /solar-power/) with a description line.
Not a new pattern: same canvas, border, radius and hover as the existing tile.
Staged separately so nothing lands in locations.css before sign-off. */
.sr-loc .inv-brands{
display:grid; gap:16px;
grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
margin:20px 0 0; padding:0; list-style:none;
}
.sr-loc .inv-brands li{ margin:0; }
.sr-loc .brandtile.inv-tile{
display:flex; flex-direction:column; align-items:flex-start; text-align:left;
gap:0; height:100%; padding:18px 18px 20px;
border:1px solid var(--border); border-radius:12px; background:var(--white);
transition:.16s;
}
.sr-loc .brandtile.inv-tile:hover{
border-color:var(--accent); transform:translateY(-2px);
box-shadow:0 14px 28px -20px rgba(0,0,0,.35);
}
/* fixed-height logo well keeps every mark on the same baseline regardless of
its aspect, which is what stops a wide wordmark dwarfing a compact badge */
.sr-loc .inv-tile .bt-logo{
display:flex; align-items:center; justify-content:flex-start;
height:46px; margin-bottom:12px; width:100%;
}
.sr-loc .inv-tile .bt-logo img{
max-width:150px; max-height:46px; width:auto; height:auto;
object-fit:contain; display:block;
}
/* brand with no obtainable official mark: set the name in type, visibly not a logo */
.sr-loc .inv-tile .bt-nologo{
font-family:var(--display); font-weight:400; font-size:26px; line-height:1;
letter-spacing:.02em; color:#9aa0ab;
}
.sr-loc .inv-tile .bt-name{
font-family:var(--ui); font-weight:700; font-size:14px;
letter-spacing:.01em; color:var(--ink); margin-bottom:6px;
}
.sr-loc .inv-tile .bt-desc{ font-size:13.5px; line-height:1.55; color:var(--body-text); }
.sr-loc .inv-tile:hover .bt-name{ color:var(--accent); }
/* unit shots */
.sr-loc .unit-strip{
display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
margin:24px 0 0; padding:0; list-style:none;
}
.sr-loc .unit-strip li{
margin:0; text-align:center; border:1px solid var(--border);
border-radius:12px; background:var(--white); padding:14px 12px 16px;
}
.sr-loc .unit-strip img{
width:100%; height:auto; aspect-ratio:4/3; object-fit:contain;
display:block; margin-bottom:10px; background:#fff;
}
.sr-loc .unit-strip span{
font-family:var(--ui); font-size:12.5px; font-weight:600;
line-height:1.4; color:var(--body-text);
}
/* trademark notice */
.sr-loc .tm-note{
font-size:13.5px; line-height:1.6; color:#7f8695;
border-left:3px solid var(--border); padding:2px 0 2px 14px;
margin:0 0 22px; max-width:88ch;
}
.sr-loc .tm-note.tm-small{ font-size:12.5px; margin:18px 0 0; }
/* per-group CTA */
.sr-loc .grp-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 0; }
@media (max-width:520px){
.sr-loc .inv-brands{ grid-template-columns:1fr; }
.sr-loc .unit-strip{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
}
/* ---------- PV systems page layout ----------
Adopts the section rhythm of perthsolardirect.com.au — centred headings,
image-led service tiles, a 3-up image row, FAQ beside a tall image — using
our own components, type and colour. No competitor CSS, markup or assets.
Staged separately so nothing lands in locations.css before sign-off. */
/* centred section heads: their headings are centred and large, ours are left */
.sr-loc .sec-head.centred,
.sr-loc .eyebrow.centred{ text-align:center; }
.sr-loc .eyebrow.centred{ display:flex; justify-content:center; }
.sr-loc .sec-intro.centred{ text-align:center; margin-left:auto; margin-right:auto; }
/* image-led service tiles: photo first, label under, whole tile clickable */
.sr-loc .svc-tiles{
display:grid; gap:20px;
grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
margin:34px 0 0; padding:0; list-style:none;
}
.sr-loc .svc-tiles li{ margin:0; }
.sr-loc .svc-tile{
display:block; height:100%; overflow:hidden;
border:1px solid var(--border); border-radius:var(--r);
background:var(--white); transition:.18s;
}
.sr-loc .svc-tile:hover{
border-color:var(--accent); transform:translateY(-3px);
box-shadow:0 18px 34px -22px rgba(0,0,0,.4);
}
.sr-loc .svc-tile .svc-img{ display:block; overflow:hidden; background:#f2f2f2; }
.sr-loc .svc-tile img{
width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
display:block; transition:transform .4s ease;
}
.sr-loc .svc-tile:hover img{ transform:scale(1.05); }
.sr-loc .svc-tile .svc-body{ display:block; padding:20px 22px 24px; }
.sr-loc .svc-tile h3{
font-family:var(--display); font-weight:400; font-size:25px; line-height:1.1;
color:var(--ink); margin:0 0 8px; letter-spacing:.01em;
}
.sr-loc .svc-tile:hover h3{ color:var(--accent); }
.sr-loc .svc-tile p{ font-size:14px; line-height:1.6; margin:0; color:var(--body-text); }
/* 3-up image row under the credentials band */
.sr-loc .shots-3{
display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
margin:34px 0 0; padding:0; list-style:none;
}
.sr-loc .shots-3 li{ margin:0; }
.sr-loc .shots-3 img{
width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
border-radius:var(--r); display:block;
}
.sr-loc .shots-3 figcaption{
font-family:var(--ui); font-size:12.5px; font-weight:600;
color:#7f8695; margin-top:9px;
}
/* brand strip sitting high on the page */
.sr-loc .brandstrip{
display:grid; gap:14px 20px;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
align-items:center; margin:30px 0 0; padding:0; list-style:none;
}
.sr-loc .brandstrip li{ margin:0; display:flex; justify-content:center; }
.sr-loc .brandstrip img{
max-width:172px; max-height:58px; width:auto; height:auto;
object-fit:contain; display:block;
}
/* FAQ beside a tall image */
.sr-loc .faq-split{
display:grid; gap:clamp(26px,4vw,52px); grid-template-columns:1fr; align-items:start;
}
@media (min-width:960px){
.sr-loc .faq-split{ grid-template-columns:.85fr 1.15fr; }
}
.sr-loc .faq-split .faq-media img{
width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
border-radius:var(--r); display:block;
}
/* ---------- light-background variants ----------
.badges and .btn-ghost were built for the dark hero: near-white text on a
translucent white fill. Dropped onto a light section they vanish. These give
both a legible light-background form without touching the hero versions. */
.sr-loc .badges.on-light li{
color:var(--ink); background:var(--white);
border:1px solid var(--border);
}
.sr-loc .btn-ghost.on-light{
color:var(--ink); border-color:var(--border); background:var(--white);
}
.sr-loc .btn-ghost.on-light:hover{
color:var(--accent); border-color:var(--accent);
}
/* ---------- even grids ----------
8 logos in an auto-fit grid orphaned the last one; 6 tiles at 4-across left a
ragged row. Fixed counts divide cleanly at each breakpoint. */
@media (min-width:1000px){
.sr-loc .brandstrip{ grid-template-columns:repeat(8,1fr); }
.sr-loc .svc-tiles{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:620px) and (max-width:999px){
.sr-loc .brandstrip{ grid-template-columns:repeat(4,1fr); }
.sr-loc .svc-tiles{ grid-template-columns:repeat(2,1fr); }
}
/* ---------- brand grid ----------
Replaces the single-row strip. Equal bordered cells give every mark the same
footprint, which is what stops an icon-only logo (AIKO publishes no wordmark)
reading as broken beside a row of wordmarks. Also gives the brands that have
no repair page somewhere legitimate to sit. */
.sr-loc .brandgrid{
display:grid; gap:0; margin:32px 0 0; padding:0; list-style:none;
border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
background:var(--white);
grid-template-columns:repeat(2,1fr);
}
@media (min-width:640px){ .sr-loc .brandgrid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1000px){ .sr-loc .brandgrid{ grid-template-columns:repeat(6,1fr); } }
.sr-loc .brandgrid li{
margin:0; display:flex; align-items:center; justify-content:center;
min-height:104px; padding:18px 16px;
border-right:1px solid var(--border); border-bottom:1px solid var(--border);
transition:background .16s;
}
.sr-loc .brandgrid li:hover{ background:#fafafa; }
.sr-loc .brandgrid img{
max-width:132px; max-height:52px; width:auto; height:auto;
object-fit:contain; display:block;
}
/* trailing cells: drop the outer rules so the border-radius stays clean */
@media (min-width:1000px){
.sr-loc .brandgrid li:nth-child(6n){ border-right:0; }
.sr-loc .brandgrid li:nth-last-child(-n+5):nth-child(6n+1),
.sr-loc .brandgrid li:nth-last-child(-n+5):nth-child(6n+1)~li{ border-bottom:0; }
}
@media (min-width:640px) and (max-width:999px){
.sr-loc .brandgrid li:nth-child(4n){ border-right:0; }
}
@media (max-width:639px){
.sr-loc .brandgrid li:nth-child(2n){ border-right:0; }
.sr-loc .brandgrid img{ max-width:112px; max-height:44px; }
}