/* =====================================================================
   SKIN 3 · EDITORIAL (built from the Diverse Power ad pack)
   Loaded after site.css. Same content as Diverse Power, a different
   company feel: serif headlines with an italic second line, clean type
   sitting in the photo's empty space, no boxes, badges or rows of ticks.
   Sections borrowed from the ad formats: day/night split, same-roof
   before/after, lock-screen notifications, a text-message thread.
   Motion: slow zoom on photos, notifications sliding in one by one.
   Colours come from the client's logo. Swap a client in by changing the
   tokens below + their logo/photos.
   ===================================================================== */
:root{
  --ink:#070b12; --navy:#0b1d36; --navy-2:#102a4c; --shop:#183C6C;
  --b1:#3176B1; --b2:#459CC7; --b3:#9EDBEB; --act:#3176B1; --act-d:#25659f;
  --paper:#fff; --mist:#eef3f8; --line:#dfe6ee; --line-d:rgba(158,219,235,.18);
  --txt:#0b1d36; --mut:#5a6878; --mut-d:rgba(255,255,255,.72);
  --r-card:2px; --r-btn:999px;
  --display:"Instrument Serif",Georgia,serif;
  --body:"Inter",ui-sans-serif,system-ui,sans-serif;
}
body{font-size:clamp(.96rem,.92rem + .2vw,1.04rem)}
h1,h2,h3{font-weight:400;letter-spacing:-.01em;line-height:1.02}
h2{font-size:clamp(2.4rem,1.5rem + 3vw,4.4rem)}
h2 em,h1 em{font-style:italic;color:var(--b1)}
.dark h2 em{color:var(--b3)}
h3{font-size:clamp(1.5rem,1.2rem + .8vw,1.9rem)}
.eyebrow{font:500 .74rem/1 var(--body);letter-spacing:.22em;color:var(--b1)}
.lede{color:var(--mut)}
.grad{background:none;-webkit-background-clip:initial;background-clip:initial;color:inherit;font-style:italic}
.btn{text-transform:none;letter-spacing:0;font:600 .95rem/1 var(--body);border-radius:999px;padding:16px 26px}
.btn-act{background:var(--b1)}
.link{font-weight:600}

/* slow zoom on photos once they're on screen (skin.js adds .go) */
.kb{transform:scale(1.08);transition:transform 9s linear}
.kb.go{transform:scale(1)}
@media(prefers-reduced-motion:reduce){.kb{transform:none;transition:none}}

/* top bar + header */
.topbar{background:var(--ink)}
.topbar svg{stroke:var(--b3)}
.hdr{background:rgba(11,29,54,.94)}

/* ---------- hero ---------- */
.hero-ed{min-height:min(860px,100svh)}
.hero-ed .veil{background:radial-gradient(ellipse 70% 55% at 50% 30%,rgba(7,11,18,.5),rgba(7,11,18,0) 75%),linear-gradient(180deg,rgba(7,11,18,.6) 0%,rgba(7,11,18,.2) 45%,rgba(7,11,18,.25) 62%,rgba(7,11,18,.85) 100%)}
.hero-ed .shell{justify-content:flex-start;min-height:0;padding-top:clamp(56px,9vh,110px);padding-bottom:28px;text-align:center;align-items:center}
.hero-ed .eyebrow{color:var(--b3)}
.hero-ed h1{font-size:clamp(2.7rem,1.2rem + 5vw,6rem);font-weight:400;line-height:.98;letter-spacing:-.015em;margin-top:18px;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero-ed h1 .l2{font-style:italic;color:#fff}
.hero-ed .sub{max-width:560px;margin:20px auto 0;color:rgba(255,255,255,.88);font-size:1.02rem}
.hero-ed .acts{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:28px}
.tel{display:inline-flex;align-items:center;gap:10px;font:500 1.15rem/1 var(--body);color:inherit}
.tel svg{width:20px;height:20px}
.hero-ed .tel:hover{color:var(--b3)}
.ed-foot{position:absolute!important;left:0;right:0;bottom:0;min-height:0!important;padding-top:0!important;padding-bottom:26px!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;text-align:left!important;font:500 .66rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82);gap:16px}
.ed-foot .who{display:flex;align-items:center;gap:10px}
.ed-foot .who img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:52% 18%;border:1.5px solid rgba(255,255,255,.7)}
.ed-foot .gr{display:flex;align-items:center;gap:8px}
.ed-foot .gr svg{width:16px;height:16px;background:#fff;border-radius:50%;padding:2px;box-sizing:content-box}
.ed-foot .stars{color:#fbbc04;letter-spacing:.05em}

/* ---------- day / night ---------- */
.dn{display:grid;grid-template-columns:1fr 1fr;background:var(--ink)}
.dn-p{position:relative;display:block;min-height:min(92vh,860px);overflow:hidden;color:#fff}
.dn-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dn-p::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,18,.5) 0%,rgba(7,11,18,0) 40%,rgba(7,11,18,0) 60%,rgba(7,11,18,.6) 100%)}
.dn-p.night img{filter:brightness(.62) saturate(.9)}
.dn-t{position:relative;z-index:1;padding:clamp(40px,6vw,80px) clamp(24px,4vw,64px);height:100%;display:flex;flex-direction:column}
.dn-t h2{margin:0;font-size:clamp(3rem,1.6rem + 4.4vw,6.2rem);color:#fff}
.dn-t h2 em{color:#fff}
.dn-t p{max-width:380px;margin-top:16px;color:rgba(255,255,255,.88)}
.dn-t .more{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font:500 .72rem/1 ui-monospace,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;padding-top:40px}
.dn-t .more svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.dn-p:hover .more svg{transform:translateX(6px)}

/* ---------- services: editorial index ---------- */
.ed-svc{padding:var(--sec) 0;background:#fff}
.ed-head{max-width:760px}
.ed-head .lede{margin-top:18px;max-width:520px}
.ed-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:56px}
.ed-i figure{aspect-ratio:3/4;overflow:hidden;background:var(--mist)}
.ed-i img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.ed-i:hover img{transform:scale(1.05)}
.ed-i h3{margin-top:16px}
.ed-i p{margin-top:6px;color:var(--mut);font-size:.9rem}
.ed-unsure{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--mut);max-width:760px}
.ed-unsure a{color:var(--b1);font-weight:600;white-space:nowrap}

/* ---------- before / after ---------- */
.ba{padding:var(--sec) 0;background:var(--mist)}
.ba-head{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}
.ba-head h2{margin:0}
.ba-box{position:relative;margin-top:44px;aspect-ratio:16/8;overflow:hidden;--p:50%;user-select:none}
.ba-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-box .before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-box .before img{filter:grayscale(1) contrast(1.05) brightness(.9)}
.ba-box .lab{position:absolute;top:18px;font:500 .7rem/1 ui-monospace,Menlo,monospace;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.ba-box .lab.l{left:20px}.ba-box .lab.r{right:20px}
.ba-box::after{content:"";position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.ba-box .handle{position:absolute;top:50%;left:var(--p);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.3);pointer-events:none;z-index:2}
.ba-box .handle svg{width:22px;height:22px}
.ba-box input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3}

/* ---------- owner ---------- */
.owner{background:var(--navy)}
.owner h2{font-size:clamp(2.4rem,1.5rem + 3vw,4.2rem)}
.owner .checks,.owner .proof{display:none}
.aboutvid{border-radius:2px}

/* ---------- how it works: notifications ---------- */
.nt{position:relative;overflow:hidden;color:#fff;background:var(--ink);padding:var(--sec) 0}
.nt-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.85)}
.nt-grid{position:relative;display:grid;grid-template-columns:1fr 440px;gap:64px;align-items:center}
.nt-head .eyebrow{color:var(--b3)}
.nt-head h2{color:#fff}
.nt-head h2 em{color:var(--b3)}
.nt-head .btn{margin-top:30px}
.nt-time{text-align:center;font:300 4.6rem/1 var(--body);letter-spacing:-.03em;margin-bottom:22px}
.nt-time small{display:block;font:500 .9rem/1 var(--body);letter-spacing:0;margin-bottom:6px;opacity:.85}
.note{display:flex;gap:12px;padding:14px 16px;border-radius:20px;background:rgba(245,247,250,.9);color:#111;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 30px rgba(0,0,0,.25);margin-top:10px;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.note.in{opacity:1;transform:none}
.note i{flex:none;width:36px;height:36px;border-radius:9px;background:var(--navy);display:grid;place-items:center;overflow:hidden}
.note i img{width:24px;height:24px;object-fit:contain}
.note b{display:flex;justify-content:space-between;font:600 .72rem/1.2 var(--body);color:#3c3c43;text-transform:uppercase;letter-spacing:.04em}
.note b small{font-weight:400;text-transform:none;letter-spacing:0;color:#8a8a8e}
.note strong{display:block;font:600 .95rem/1.25 var(--body);margin-top:3px}
.note span{display:block;font-size:.88rem;line-height:1.4;color:#3c3c43;margin-top:2px}
@media(prefers-reduced-motion:reduce){.note{opacity:1;transform:none}}

/* ---------- reviews: Google-native card ---------- */
.gv{padding:var(--sec) 0;background:#fff}
.gv-grid{display:grid;grid-template-columns:1fr 520px;gap:64px;align-items:center}
.gv-leave{display:inline-block;margin-top:26px;color:var(--b1);font-weight:600}
.gcard{background:#fff;border:1px solid #dadce0;border-radius:12px;box-shadow:0 1px 3px rgba(60,64,67,.15),0 18px 50px -20px rgba(11,29,54,.25);font-family:Roboto,Arial,var(--body);color:#202124;overflow:hidden}
.g-top{display:flex;align-items:center;gap:14px;padding:20px 22px;border-bottom:1px solid #e8eaed}
.g-logo{width:40px;height:40px;border-radius:50%;border:1px solid #e8eaed;display:grid;place-items:center}
.g-logo svg{width:22px;height:22px}
.g-top b{display:block;font-weight:500;font-size:1rem}
.g-top span{font-size:.85rem;color:#70757a;display:flex;align-items:center;gap:6px}
.g-num{display:inline!important;color:#202124;font-weight:500}
.gcard .stars{color:#fbbc04;letter-spacing:.04em}
.g-rev{padding:20px 22px}
.g-who{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.g-who .av{width:40px;height:40px;border-radius:50%;background:#7b1fa2;color:#fff;display:grid;place-items:center;font-weight:500}
.g-who b{display:block;font-weight:500}
.g-who small{color:#70757a;font-size:.8rem}
.g-rev p{margin-top:8px;font-size:.98rem;line-height:1.55}
.g-job{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.g-job span{font-size:.78rem;padding:5px 10px;border-radius:999px;background:#f1f3f4;color:#3c4043}
.g-go{display:block;padding:14px 22px;border-top:1px solid #e8eaed;color:#1a73e8;font-weight:500;font-size:.9rem}

/* ---------- areas: suburb check styled as a search bar ---------- */
.areas{background:var(--mist)}
.check{background:transparent;padding:0;border:0;margin-top:28px}
.check label{font:500 .74rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--b1)}
.check input{border-radius:999px;border:1px solid #dfe1e5;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%235f6368' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 18px 50%/18px no-repeat;padding:15px 18px 15px 48px;box-shadow:0 1px 6px rgba(32,33,36,.18);font-size:1rem}
.check input:focus{box-shadow:0 1px 10px rgba(32,33,36,.28);border-color:#dfe1e5}
.res.ok{color:var(--b1)}
.tabs button.on{border-color:var(--b1)}
.subs li.hq::after{background:var(--b1)}
.map{border-radius:2px}

/* ---------- FAQ: serif questions, no boxes ---------- */
.faq{background:#fff}
.faq summary{font:400 clamp(1.3rem,1.1rem + .7vw,1.7rem)/1.2 var(--display)}
.still{background:transparent;border:0;border-top:1px solid var(--line);padding:22px 0 0;border-radius:0}

/* ---------- contact: text thread + form ---------- */
.ct-ed{background:var(--navy);color:#fff}
.ct-ed h2{color:#fff;margin-top:34px}
.ct-ed h2 em{color:var(--b3)}
.ct-ed .lede{color:var(--mut-d);margin-top:16px;max-width:440px}
.thread{display:flex;flex-direction:column;gap:8px;max-width:420px}
.msg{max-width:82%;padding:10px 14px;border-radius:20px;font-size:.95rem;line-height:1.4;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.msg.in{opacity:1;transform:none}
.msg.me{align-self:flex-end;background:#0a84ff;color:#fff;border-bottom-right-radius:6px}
.msg.jr{align-self:flex-start;background:#e9e9eb;color:#111;border-bottom-left-radius:6px}
.thread .dlv{align-self:flex-end;font-size:.72rem;color:rgba(255,255,255,.55)}
@media(prefers-reduced-motion:reduce){.msg{opacity:1;transform:none}}
.ct-ed .direct{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:28px}
.ct-ed .tel{font-size:1.5rem}
.ct-ed .mail{color:var(--mut-d);border-bottom:1px solid rgba(255,255,255,.25)}
.form{border-radius:4px}

/* inner pages + footer */
.foot{background:var(--ink)}
.hero.page h1{font-weight:400}
.hero .h-big{font-weight:400}
.hero .h-mid{font-family:var(--body)}
.card,.opt,.feat,.svc3 a.s{border-radius:4px}

/* Fix (also in Diverse Power): small-phone overflow in the areas section */
.areas-grid>*,.where-grid>*,.intro-grid>*{min-width:0}
.check .row{flex-wrap:wrap}
.check input{min-width:0;flex:1 1 160px}
.tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;white-space:nowrap}
@media(min-width:1280px){
  .track{margin-left:0;width:100%;padding-left:calc((100% - var(--shell))/2 + var(--gut));scroll-padding-left:calc((100% - var(--shell))/2 + var(--gut))}
}
.opt .btn{white-space:normal;text-align:center;line-height:1.25}

@media(max-width:1080px){
  .ed-grid{grid-template-columns:repeat(3,1fr)}
  .nt-grid,.gv-grid{grid-template-columns:1fr;gap:44px}
  .nt-phone{max-width:440px}
  .ba-head{grid-template-columns:1fr;gap:16px}
}
@media(max-width:860px){
  .dn{grid-template-columns:1fr}
  .dn-p{min-height:82svh}
  .ed-foot{position:relative!important;flex-wrap:wrap;justify-content:center!important;gap:10px 18px;font-size:.6rem;padding-top:26px!important;padding-bottom:34px!important}
  .hero-ed{min-height:0}
  .ed-foot .lic{display:none}
  .ba-box{aspect-ratio:4/5}
}
@media(max-width:560px){
  .hero-ed{min-height:88svh}
  .hero-ed .sub{font-size:.96rem}
  .ed-grid{grid-template-columns:1fr 1fr;gap:18px 12px;margin-top:36px}
  .ed-grid .ed-i:first-child{grid-column:1/-1}
  .ed-grid .ed-i:first-child figure{aspect-ratio:4/3}
  .ed-i h3{font-size:1.3rem;margin-top:10px}
  .ed-i p{font-size:.82rem}
  .nt-time{font-size:3.6rem}
  .note{padding:12px 14px}
}