:root{
  --ink:#1a1518;
  --ink-2:#251d20;
  --ground:#f7f5f5;
  --surface:#ffffff;
  --surface-2:#f0eaea;
  --line:#e4e2e3;
  --muted:#6a6266;
  --steel:#d62839;
  --steel-dark:#a81f2d;
  --steel-light:#f2949c;
  --amber:#f0a83c;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --wrap:1170px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--ground);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.08;letter-spacing:-0.02em;font-weight:700;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:16px;padding:14px 26px;border-radius:7px;transition:transform .15s,background .15s,box-shadow .15s;cursor:pointer;font-family:var(--body)}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.btn-primary{background:var(--steel);color:#fff;box-shadow:0 8px 22px rgba(33,86,128,0.30)}
.btn-primary:hover{transform:translateY(-2px);background:var(--steel-dark)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.55)}
.btn-ghost:hover{background:rgba(255,255,255,0.14)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--steel-dark)}
.btn-light:hover{transform:translateY(-2px)}
/* header */
header{position:sticky;top:0;z-index:50;background:rgba(247,245,245,0.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;font-size:19px;color:var(--ink);letter-spacing:-0.02em}
.logo .mark{width:40px;height:40px;flex:none}
.logo-badge{width:48px;height:48px;border-radius:50%;overflow:hidden;flex:none;background:#fff;box-shadow:0 2px 9px rgba(26,21,24,0.16)}
.logo-badge img{width:114%;height:114%;object-fit:cover;margin:-7%;display:block}
.logo small{display:block;font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--steel);margin-top:2px}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-weight:500;font-size:15px;color:var(--muted)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:15px}
.nav-phone{font-family:var(--display);font-weight:700;font-size:18px;color:var(--steel)}
@media(max-width:900px){.nav-links,.nav-phone{display:none}}
.eyebrow{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:0.16em;text-transform:uppercase;color:var(--steel)}
/* hero */
.hero{position:relative;color:#fff;overflow:hidden;background:linear-gradient(120deg,#141013 0%,#2a1a1e 46%,#5c1f28 100%)}
.hero .grain{position:absolute;inset:0;opacity:0.5}
.hero-inner{position:relative;padding:100px 0 104px;max-width:660px}
.hero h1{font-size:clamp(38px,5.6vw,64px);margin:20px 0 0;color:#fff;font-weight:800}
.hero .sub{margin-top:22px;font-size:clamp(17px,2vw,20px);color:#cdd8e4;max-width:34em}
.hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{margin-top:38px;display:flex;gap:28px;flex-wrap:wrap;font-size:14.5px;color:#c3cedb}
.hero-trust b{color:#fff;font-family:var(--display);font-weight:700}
.stars{color:var(--amber);letter-spacing:2px}
/* strip */
.strip{background:var(--ink);color:#f5f7fa}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:26px 24px;text-align:center}
.strip .n{font-family:var(--display);font-weight:800;font-size:23px;color:var(--steel-light)}
.strip .l{font-size:13px;color:#9aa6b4;margin-top:5px}
.strip .cell+.cell{border-left:1px solid rgba(255,255,255,0.1)}
@media(max-width:640px){.strip .wrap{grid-template-columns:1fr 1fr;gap:22px}.strip .cell+.cell{border-left:none}}
section{padding:76px 0}
.sec-head{max-width:660px;margin-bottom:42px}
.sec-head h2{font-size:clamp(28px,3.7vw,40px);margin-top:12px}
.sec-head p{margin-top:14px;color:var(--muted);font-size:18px}
.sec-head.center{margin-inline:auto;text-align:center}
/* services grid */
.services{background:var(--surface)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.svc{background:var(--surface);padding:28px 24px;transition:background .15s}
.svc:hover{background:var(--ground)}
.svc .ic{width:46px;height:46px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;margin-bottom:16px}
.svc .ic svg{width:25px;height:25px;stroke:var(--steel);fill:none;stroke-width:1.7}
.svc h3{font-size:19px}
.svc p{margin-top:8px;color:var(--muted);font-size:14.5px}
.svc .go{color:var(--steel);font-weight:600;font-size:13.5px;display:inline-flex;gap:5px;align-items:center;margin-top:12px}
@media(max-width:940px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.svc-grid{grid-template-columns:1fr}}
/* brand illustration panels (image slots) */
.slot{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#221a1d 0%,#8a2632 130%);display:grid;place-items:center;aspect-ratio:4/3;box-shadow:0 20px 44px rgba(26,21,24,0.16)}
.slot svg.art{width:74%;height:74%;stroke:rgba(255,255,255,0.85);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.slot .corr{position:absolute;inset:0;opacity:0.16}
.slot .tag{position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.72);font-weight:600;font-family:var(--body)}
.slot.tall{aspect-ratio:3/4}
.slot.wide{aspect-ratio:16/10}
.slot.sq{aspect-ratio:1/1}
/* gallery */
.work{background:var(--ground)}
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.gal .slot{border-radius:12px}
.g-tall{grid-column:span 4;aspect-ratio:3/4}
.g-wide{grid-column:span 8;aspect-ratio:16/10}
.g-half{grid-column:span 6;aspect-ratio:4/3}
.g-third{grid-column:span 4;aspect-ratio:1/1}
@media(max-width:820px){.g-tall,.g-wide,.g-half,.g-third{grid-column:span 6;aspect-ratio:4/3}}
@media(max-width:520px){.g-tall,.g-wide,.g-half,.g-third{grid-column:span 12}}
/* feature split */
.feature{background:var(--surface)}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.feat h2{font-size:clamp(26px,3.3vw,38px)}
.feat ul{list-style:none;padding:0;margin:24px 0 32px;display:flex;flex-direction:column;gap:14px}
.feat li{display:flex;gap:12px;font-size:16.5px}
.feat li svg{flex:none;width:22px;height:22px;stroke:var(--steel);margin-top:3px;fill:none;stroke-width:2.4}
.feat .slot{aspect-ratio:4/5}
@media(max-width:820px){.feat{grid-template-columns:1fr;gap:32px}.feat .slot{aspect-ratio:16/11}}
/* page hero */
.media-hero{position:relative;color:#fff;overflow:hidden;background:linear-gradient(115deg,#141013 0%,#241a1d 52%,#4f1e26 105%)}
.media-hero .corr{position:absolute;inset:0;opacity:0.14}
.media-hero .inner{position:relative;padding:76px 0 68px;max-width:660px}
.media-hero h1{font-size:clamp(31px,4.6vw,50px);margin-top:12px;color:#fff;font-weight:800}
.media-hero p{margin-top:16px;color:#cdd8e4;max-width:52ch;font-size:18px}
.media-hero .eyebrow{color:var(--steel-light)}
.breadcrumb{font-size:13px;color:var(--muted);padding:16px 0}
.breadcrumb a{color:var(--steel)}
/* prose + split */
.prose{max-width:70ch}
.prose p{margin-bottom:16px;color:#333c48}
.prose h2{font-size:26px;margin:34px 0 12px}
.split{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center}
.split.rev{grid-template-columns:0.95fr 1.05fr}
.split .txt h2{font-size:clamp(24px,3vw,32px)}
.split .txt p{margin-top:14px;color:#3a4250}
@media(max-width:820px){.split,.split.rev{grid-template-columns:1fr;gap:28px}.split.rev .slot{order:-1}}
.thumb-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.thumb-row .slot{aspect-ratio:4/3;border-radius:12px}
@media(max-width:640px){.thumb-row{grid-template-columns:1fr 1fr}}
.checklist{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:11px}
.checklist li{display:flex;gap:10px;font-size:15.5px;color:#3a4250}
.checklist li svg{flex:none;width:18px;height:18px;stroke:var(--steel);fill:none;stroke-width:2.6;margin-top:2px}
@media(max-width:640px){.checklist{grid-template-columns:1fr}}
/* areas */
.areas{background:var(--ink);color:#f5f7fa}
.areas h2{color:#fff}
.areas .sec-head p{color:#9aa6b4}
.areas .eyebrow{color:var(--steel-light)}
.region-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.region{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:26px;transition:transform .15s,background .15s}
.region:hover{transform:translateY(-3px);background:rgba(255,255,255,0.09)}
.region h3{color:#fff;font-size:21px}
.region p{color:#aab4c2;font-size:14.5px;margin-top:8px}
.region .subs{margin-top:14px;display:flex;flex-wrap:wrap;gap:7px}
.region .subs span{font-size:12.5px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);padding:5px 10px;border-radius:5px;color:#cdd8e4}
.region .go{color:var(--steel-light);font-weight:600;font-size:14px;margin-top:16px;display:inline-block}
@media(max-width:820px){.region-grid{grid-template-columns:1fr}}
.area-list{display:flex;flex-wrap:wrap;gap:11px;margin-top:6px}
.area-list a,.area-list span{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);padding:9px 16px;border-radius:6px;font-size:14.5px;color:#f5f7fa}
.area-list a:hover{background:rgba(255,255,255,0.16)}
/* suburb cards */
.sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sub-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;transition:transform .15s,box-shadow .15s}
.sub-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,25,34,0.1)}
.sub-card h3{font-size:19px}
.sub-card p{margin-top:8px;color:var(--muted);font-size:14.5px}
.sub-card .go{color:var(--steel);font-weight:600;font-size:14px;margin-top:12px;display:inline-block}
@media(max-width:820px){.sub-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.sub-grid{grid-template-columns:1fr}}
/* reviews */
.reviews{background:var(--ground)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px}
.rev-card .stars{font-size:15px;margin-bottom:10px;display:block}
.rev-card p{color:#333c48;font-size:15.5px}
.rev-card .who{margin-top:14px;font-weight:600;font-size:14px;color:var(--ink)}
.rev-card .who span{display:block;font-weight:400;color:var(--muted);font-size:13px}
@media(max-width:820px){.rev-grid{grid-template-columns:1fr}}
/* cta */
.cta{background:linear-gradient(120deg,var(--steel-dark),var(--steel));color:#fff;text-align:center}
.cta h2{color:#fff;font-size:clamp(28px,3.6vw,40px)}
.cta p{margin:15px auto 28px;max-width:34em;color:#dbe8f2;font-size:18px}
/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px}
.contact-card h3{font-size:20px;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:600;color:var(--muted)}
.field input,.field textarea,.field select{font-family:var(--body);font-size:15px;padding:11px 13px;border:1px solid var(--line);border-radius:8px;background:var(--ground)}
.field textarea{min-height:120px;resize:vertical}
.contact-info li{display:flex;gap:12px;margin-bottom:16px;font-size:16px;align-items:flex-start}
.contact-info svg{flex:none;width:20px;height:20px;stroke:var(--steel);fill:none;stroke-width:2;margin-top:3px}
.contact-info b{font-family:var(--display);display:block}
.contact-info a{color:var(--steel);font-weight:600}
ul.plain{list-style:none;padding:0;margin:0}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:26px}}
/* footer */
footer{background:var(--ink);color:#9aa6b4;padding:54px 0 30px;font-size:15px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.foot h4{font-family:var(--display);color:#fff;font-size:14px;margin:0 0 13px;letter-spacing:0.04em}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.foot a:hover{color:#fff}
.foot .logo{color:#fff;margin-bottom:14px}
.foot .logo small{color:var(--steel-light)}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.1);margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:#7a8492}
@media(max-width:820px){.foot{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:520px){.foot{grid-template-columns:1fr}}
.preview-note{background:var(--steel-dark);color:#e4eef6;text-align:center;font-size:13px;padding:8px;font-weight:500}
/* corrugated-metal ribbing texture */
.hero .grain{background:repeating-linear-gradient(93deg,rgba(255,255,255,0.05) 0 1px,transparent 1px 15px)}
.corr,.slot .corr{background:repeating-linear-gradient(115deg,rgba(255,255,255,0.06) 0 2px,transparent 2px 12px)}
/* real photos */
.hero.has-photo{background:#141013}
.hero .hero-photo{position:absolute;inset:0;background-size:cover;background-position:center}
.hero .hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,14,17,0.93),rgba(26,18,21,0.74) 46%,rgba(92,29,38,0.52))}
.media-hero.has-photo{background:#141013}
.media-hero .media-photo{position:absolute;inset:0;background-size:cover;background-position:center}
.media-hero .media-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(20,14,17,0.92),rgba(26,18,21,0.72) 58%,rgba(80,28,36,0.45))}
.slot.has-img{background:#221a1d}
.slot.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.slot.has-img .tag{background:linear-gradient(transparent,rgba(14,19,26,0.55));left:0;right:0;bottom:0;padding:26px 16px 12px;color:rgba(255,255,255,0.92)}