/* ============================================================================
   Conners Roof Restorations — website styles
   Layout replicated from brisbaneroofingsolutions.com.au (Stage 0 forensic spec);
   RESKINNED to the Summit roofing palette shared with ACC + Great Roofing:
   white / off-white grounds · deep-ink text #14161B · brand-blue #1560D8 CTA/accent
   · deep-navy #0A2338 footer. Geist typography (sharp, authoritative). AU English.
   HONESTY: no reviews/ratings/prices, no QBCC/licence claim. Illustrative stock.
   ========================================================================== */

/* ---- Fonts --------------------------------------------------------------- */
@font-face{font-family:"Geist";src:url(/assets/fonts/geist-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts/hanken-grotesk-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts/hanken-grotesk-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---- Tokens -------------------------------------------------------------- */
:root{
  --ink:#14161B;          /* primary text */
  --ink-soft:#474A52;     /* secondary text */
  --ink-mute:#6A6D75;     /* muted text */

  --blue:#1560D8;         /* primary accent / CTA */
  --blue-700:#1250BC;
  --blue-800:#0F429E;
  --azure:#2C7BEF;        /* brighter accent / focus */
  --blue-tint:#EAF1FD;
  --blue-tint2:#CFE0FB;

  --navy:#181B22;         /* dark surfaces (logo tile, chips on dark) */
  --footer:#0A2338;       /* footer ground (matches ACC/Great) */
  --footer-2:#07192a;     /* copyright bar */
  --footer-mut:#A6BAC9;   /* footer muted text */
  --footer-line:rgba(255,255,255,.12);

  --paper:#FFFFFF;        /* white ground */
  --mist:#F6F6F7;         /* off-white ground */
  --mist-2:#ECEDEF;       /* raised light card */
  --line:#E5E6E9;
  --line-2:#D5D7DB;

  --cta:var(--blue);
  --maxw:1180px;
  --sec:clamp(3.6rem,6vw,6rem);
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(17,32,50,.06),0 2px 8px rgba(17,32,50,.05);
  --shadow:0 8px 26px rgba(17,32,50,.10),0 2px 6px rgba(17,32,50,.06);
  --shadow-lg:0 26px 60px rgba(17,32,50,.16),0 8px 22px rgba(17,32,50,.09);
  --font:"Geist","Inter","Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-synthesis:none;
}

/* ---- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:120px;color-scheme:light}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--font);
  background:var(--paper);color:var(--ink);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{margin:0;font-weight:800;line-height:1.08;letter-spacing:-.02em}
p{margin:0}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--azure);outline-offset:2px;border-radius:4px}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:.7rem 1.1rem;font-weight:700;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.hl{color:var(--blue)}
.no-js .reveal{opacity:1!important;transform:none!important}

/* ---- Buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:700;letter-spacing:.01em;border:2px solid transparent;border-radius:10px;
  padding:.85rem 1.4rem;line-height:1.1;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
  cursor:pointer;text-align:center}
.btn svg{flex:none}
.btn--lg{padding:1.05rem 1.7rem;font-size:1.02rem}
.btn--primary{background:var(--cta);color:#fff;box-shadow:0 8px 20px rgba(21,96,216,.30)}
.btn--primary:hover{background:var(--blue-700);transform:translateY(-2px)}
.btn--herocall{background:var(--cta);color:#fff;box-shadow:0 8px 20px rgba(21,96,216,.30)}
.btn--herocall:hover{background:var(--blue-700);transform:translateY(-2px)}
.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--ghost-light:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn--hero-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.55)}
.btn--hero-ghost:hover{background:rgba(255,255,255,.18);border-color:#fff}
.btn--teal{background:var(--azure);color:#fff}
.btn--teal:hover{background:var(--blue);transform:translateY(-2px)}
.btn--closer{background:#fff;color:var(--blue);border-color:#fff}
.btn--closer:hover{background:var(--blue-tint);border-color:var(--blue-tint)}
.btn--google{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--google:hover{border-color:var(--blue);color:var(--blue)}
.on-light .btn--google,.btn--outline-dark{background:transparent;color:var(--ink);border-color:var(--line-2)}
.on-light .btn--google:hover,.btn--outline-dark:hover{border-color:var(--blue);color:var(--blue)}

/* ============================================================================
   BAND 0 — Header top bar  (white ground, logo + phone)
   ========================================================================== */
.site-top{background:#fff;border-bottom:1px solid var(--line)}
.site-header__row{display:flex;align-items:center;gap:1.4rem;justify-content:space-between;padding-block:.7rem;min-height:80px}
.brand{display:flex;align-items:center;gap:.7rem;flex:0 1 auto;min-width:0}
.brand__logo{height:78px;width:78px;border-radius:50%;display:block;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-size:1.2rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.brand__name b{color:var(--blue);font-weight:800}
.brand__sub{font-size:.64rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.topbar__mid{text-align:center;flex:1;min-width:0}
.topbar__mid strong{display:block;font-size:.98rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.topbar__mid span{display:block;font-size:.86rem;color:var(--ink-mute)}
.topbar__phone{display:flex;align-items:center;gap:.6rem;flex:none;color:var(--ink);font-weight:800}
.topbar__phone svg{color:var(--blue)}
.topbar__phone small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.topbar__phone b{font-size:1.4rem;letter-spacing:0;line-height:1;color:var(--ink)}
.site-header__actions{display:flex;align-items:center;gap:.8rem;flex:none}
.header-call{display:none}

/* ============================================================================
   BAND 1 — Main nav bar  (white, sticky, blue underline hover)
   ========================================================================== */
.mainnav-wrap{background:rgba(255,255,255,.97);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:90;box-shadow:0 4px 18px rgba(17,32,50,.06)}
.mainnav{display:flex;align-items:center;justify-content:center;gap:.2rem;min-height:54px;flex-wrap:wrap}
.mainnav a,.nav__btn{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .85rem;
  font-size:.84rem;font-weight:700;letter-spacing:.04em;color:var(--ink-soft);
  background:none;border:0;position:relative;transition:color .18s ease}
.mainnav a:hover,.nav__btn:hover,.mainnav a.is-current,.nav__btn.is-current{color:var(--blue)}
.mainnav a::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.24rem;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.mainnav a:hover::after,.mainnav a.is-current::after{transform:scaleX(1)}
.nav__item{position:relative}
.nav__sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:250px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:.5rem;
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:.18s ease;z-index:95}
.nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)}
.nav__sub a{display:flex;gap:.6rem;padding:.6rem .8rem;letter-spacing:0;font-size:.92rem;border-radius:8px;width:100%;color:var(--ink-soft)}
.nav__sub a:hover{background:var(--mist);color:var(--blue)}
.nav__sub a svg{color:var(--blue)}
.nav__sub a::after{display:none}
.menu-btn{display:none}

/* ============================================================================
   BAND 2 — Hero  (full-bleed photo, dark scrim, blue CTA)
   ========================================================================== */
.hero{position:relative;isolation:isolate;background:var(--navy);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__bg{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(9,12,18,.90) 0%,rgba(9,12,18,.74) 42%,rgba(9,12,18,.34) 72%,rgba(9,12,18,.12) 100%)}
.hero__inner{position:relative;padding-block:clamp(3.4rem,7vw,6.2rem);min-height:clamp(430px,52vw,560px);display:flex;align-items:center}
.hero__panel{max-width:660px}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:#CFE0FB;margin-bottom:1rem}
.hero__eyebrow svg{color:var(--azure)}
.hero__title{font-size:clamp(2.5rem,5.6vw,4rem);color:#fff;letter-spacing:-.025em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero__title .hl{color:#fff;position:relative;text-decoration:underline;text-decoration-color:var(--azure);text-decoration-thickness:4px;text-underline-offset:6px;text-decoration-skip-ink:none}
.hero__rule{width:96px;height:5px;background:var(--blue);border-radius:3px;margin:1.15rem 0 1.25rem}
.hero__sub{font-size:1.12rem;color:#e9edf2;max-width:560px;margin-bottom:.5rem}
.hero__cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:1.6rem}
.hero__call{margin-top:1.15rem;font-size:.92rem;color:#c7cfd8;display:flex;align-items:center;gap:.5rem}
.hero__call::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--azure);box-shadow:0 0 0 4px rgba(44,123,239,.24)}

/* ---- Trust strip (below hero) ------------------------------------------- */
.trustbar{background:var(--mist);border-bottom:1px solid var(--line)}
.trustbar__row{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.2rem;padding-block:1.05rem}
.trustbar__item{display:inline-flex;align-items:center;gap:.55rem;font-size:.92rem;font-weight:700;color:var(--ink-soft)}
.trustbar__item svg{color:var(--blue)}

/* ============================================================================
   Section scaffolding + heads
   ========================================================================== */
.section{padding-block:var(--sec)}
.on-light{background:var(--paper);color:var(--ink)}
.on-ink{background:var(--mist)}
.on-ink2{background:var(--paper)}
.section-head{max-width:760px;margin:0 auto 2.6rem;text-align:center}
.section-head.left{margin-inline:0;text-align:left}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);margin-bottom:.7rem}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--ink)}
.section-sub{margin-top:.9rem;font-size:1.06rem;color:var(--ink-mute)}

/* ============================================================================
   BAND 3 — Welcome + media  (2-col; left copy, right 3 stacked feature cards)
   ========================================================================== */
.welcome{background:var(--paper)}
.welcome__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.welcome__copy .eyebrow{color:var(--blue)}
.welcome__kicker{font-size:.82rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.welcome__copy h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:.5rem 0 1.1rem;color:var(--ink)}
.welcome__copy p{color:var(--ink-soft);margin-bottom:1.05rem}
.welcome__copy p strong{color:var(--ink)}
.welcome__sub{font-size:1.15rem;font-weight:800;color:var(--ink);margin:1.6rem 0 .8rem!important;display:flex;align-items:center;gap:.6rem}
.welcome__sub svg{color:var(--blue)}
.wpoints{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.2rem}
.wpoints li{display:flex;gap:.6rem;align-items:flex-start;font-size:.96rem;color:var(--ink-soft)}
.wpoints svg{color:var(--blue);flex:none;margin-top:2px}
.welcome__cta{margin-top:1.7rem;display:flex;gap:.8rem;flex-wrap:wrap}
/* right column feature cards */
.wmedia{display:flex;flex-direction:column;gap:1.1rem}
.wcard{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.wcard__title{padding:.7rem 1rem;font-size:.95rem;font-weight:800;letter-spacing:.01em;color:var(--ink);background:#fff;display:flex;align-items:center;gap:.55rem;border-bottom:1px solid var(--line)}
.wcard__title svg{color:var(--blue)}
.wcard__media{position:relative;aspect-ratio:550/250;overflow:hidden}
.wcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.wcard:hover .wcard__media img{transform:scale(1.05)}

/* ============================================================================
   BAND 4 — Feature strip  (light band, 4 bordered cards, blue icons)
   ========================================================================== */
.featstrip{background:var(--mist);position:relative}
.featstrip__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.featcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem;
  border:1px solid var(--line);border-radius:14px;padding:1.9rem 1.2rem;background:#fff;box-shadow:var(--shadow-sm);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.featcard:hover{border-color:var(--blue-tint2);transform:translateY(-4px);box-shadow:var(--shadow)}
.featcard__ic{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-tint);border:1px solid var(--blue-tint2);color:var(--blue)}
.featcard h3{font-size:1.02rem;letter-spacing:.02em;color:var(--ink)}
.featcard p{font-size:.92rem;color:var(--ink-mute)}
.featcard__more{margin-top:auto;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:.35rem}

/* ============================================================================
   Services grid (photo cards) — home + services index + service pages
   ========================================================================== */
.svc__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.svccard{position:relative;border-radius:16px;overflow:hidden;min-height:290px;display:flex;align-items:flex-end;
  border:1px solid var(--line);box-shadow:var(--shadow);isolation:isolate}
.svccard>a{position:absolute;inset:0;z-index:3}
.svccard__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s ease}
.svccard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(9,12,18,.95) 8%,rgba(9,12,18,.5) 48%,rgba(9,12,18,.08) 100%)}
.svccard:hover .svccard__bg{transform:scale(1.06)}
.svccard__body{padding:1.4rem 1.4rem 1.5rem}
.svccard__title{font-size:1.28rem;color:#fff;margin-bottom:.4rem}
.svccard__desc{font-size:.94rem;color:#dfe3e8;margin-bottom:.8rem}
.svccard__more{font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:.4rem}
.svccard:hover .svccard__more{color:var(--blue-tint2)}

/* ============================================================================
   BAND 5 — Gallery CTA  (2-col: left copy+button, right angled photo collage)
   ========================================================================== */
.gcta{background:var(--mist)}
.gcta__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.gcta__copy h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:1rem;color:var(--ink)}
.gcta__copy p{color:var(--ink-soft);margin-bottom:1.6rem;max-width:460px}
.gcta__copy .hl{color:var(--blue)}
.collage{position:relative;min-height:360px}
.collage figure{position:absolute;margin:0;border-radius:12px;overflow:hidden;border:4px solid #fff;box-shadow:0 24px 50px -18px rgba(17,32,50,.35)}
.collage img{width:100%;height:100%;object-fit:cover}
.collage figure:nth-child(1){width:58%;aspect-ratio:4/3;top:0;left:2%;transform:rotate(-5deg);z-index:2}
.collage figure:nth-child(2){width:52%;aspect-ratio:4/3;bottom:0;right:2%;transform:rotate(4deg);z-index:3}
.collage figure:nth-child(3){width:40%;aspect-ratio:1/1;top:34%;left:38%;transform:rotate(-1deg);z-index:4}

/* ============================================================================
   BAND 6 — Why-us panel + Contact form  (2-col)  [honesty: no fake reviews]
   ========================================================================== */
.contactsec{background:var(--paper)}
.contactsec__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:stretch}
/* left promise panel on image (dark scrim, white text) */
.promise{position:relative;border-radius:16px;overflow:hidden;min-height:520px;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.6rem,3vw,2.6rem);border:1px solid var(--line);isolation:isolate}
.promise__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.promise::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,rgba(9,12,18,.9),rgba(9,12,18,.7))}
.promise h3{font-size:clamp(1.5rem,2.8vw,2rem);color:#fff;margin-bottom:1rem}
.promise__lead{color:#d7dde3;font-size:1.06rem;max-width:440px}
.promise__list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.promise__list li{display:flex;gap:.85rem;align-items:flex-start}
.promise__list svg{color:var(--azure);flex:none;margin-top:3px}
.promise__list b{display:block;color:#fff;font-size:1.02rem}
.promise__list span{color:#c7cfd8;font-size:.94rem}
.promise__cta{margin-top:1.7rem;display:flex;gap:.8rem;flex-wrap:wrap}
/* right form card */
.formcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(1.5rem,3vw,2.4rem);box-shadow:var(--shadow)}
.formcard h3{font-size:1.5rem;color:var(--ink);margin-bottom:.5rem}
.formcard>p{color:var(--ink-mute);margin-bottom:1.4rem;font-size:.98rem}
.formcard__phone{color:var(--blue);font-weight:800}

/* ---- Forms (light) ------------------------------------------------------ */
.cform{display:grid;gap:1rem}
.cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-size:.86rem;font-weight:700;color:var(--ink)}
.field .opt{color:var(--ink-mute);font-weight:500}
.field input,.field select,.field textarea{
  background:#fff;border:1.5px solid var(--line-2);border-radius:9px;color:var(--ink);
  padding:.8rem .9rem;font:inherit;font-size:.98rem;transition:border-color .15s ease,box-shadow .15s ease}
.field textarea{min-height:110px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,96,216,.15)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231560D8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.4rem}
.err{color:#c0362b;font-size:.82rem;min-height:0}
.field .err:empty{display:none}
.qform__senderr{margin:0}
.qform__foot{font-size:.82rem;color:var(--ink-mute);margin-top:.4rem}
.qform__foot .muted{color:var(--ink-mute)}
.hp-field{position:absolute!important;left:-9999px!important}
.qsuccess{text-align:center}
.qsuccess__tick{display:inline-grid;place-items:center;margin-bottom:.6rem}
.qsuccess h3{color:var(--ink)}
.qsuccess p{color:var(--ink-mute);margin-top:.5rem}
.qsuccess__meta a{color:var(--blue);font-weight:700}

/* ============================================================================
   Split section (service/about pages)
   ========================================================================== */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split__body .lede{font-size:1.2rem;font-weight:600;color:var(--ink)}
.split__body .prose p{color:var(--ink-soft);margin-bottom:1rem}
.split__body h3{color:var(--ink)}
.split__media{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:11/8}
.incl{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.2rem}
.incl li{display:flex;gap:.55rem;align-items:flex-start;font-size:.96rem;color:var(--ink-soft)}
.incl svg{color:var(--blue);flex:none;margin-top:2px}

/* ---- Page hero (inner pages) — photo + dark scrim ----------------------- */
.phero{position:relative;isolation:isolate;background:var(--navy);overflow:hidden}
.phero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.phero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(9,12,18,.9),rgba(9,12,18,.58) 70%,rgba(9,12,18,.32))}
.phero__inner{padding-block:clamp(2.8rem,6vw,4.6rem);max-width:720px}
.phero__crumbs{font-size:.82rem;color:#c7cfd8;margin-bottom:1rem}
.phero__crumbs a{color:var(--blue-tint2)}
.phero__eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#CFE0FB;margin-bottom:.8rem}
.phero__eyebrow svg{color:var(--azure)}
.phero h1{font-size:clamp(2.1rem,4.4vw,3.2rem);color:#fff}
.phero__sub{margin-top:1rem;font-size:1.1rem;color:#e9edf2;max-width:620px}
.phero__cta{margin-top:1.6rem;display:flex;gap:.8rem;flex-wrap:wrap}

/* ---- Process ------------------------------------------------------------ */
.process{background:var(--mist)}
.psteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.pstep{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.pstep__media{aspect-ratio:4/3;overflow:hidden}
.pstep__img{width:100%;height:100%;object-fit:cover}
.pstep__body{padding:1.1rem 1.2rem 1.4rem;position:relative}
.pstep__n{font-size:.8rem;font-weight:800;letter-spacing:.06em;color:var(--blue)}
.pstep__title{font-size:1.08rem;color:var(--ink);margin:.2rem 0 .5rem}
.pstep__desc{font-size:.92rem;color:var(--ink-mute)}

/* ---- Areas -------------------------------------------------------------- */
.areas{background:var(--paper)}
.areas__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.4rem);align-items:center}
.areas__copy h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:1rem;color:var(--ink)}
.areas__copy>p{color:var(--ink-soft);margin-bottom:1.2rem}
.areas__chips,.suburbs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.suburbs{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.areas__chips li,.suburbs li{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;color:var(--ink-soft);
  background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem}
.areas__chips svg,.suburbs svg{color:var(--blue)}
.areas__out{margin-top:1.2rem}
.areas__out a{color:var(--blue);font-weight:700}
.mapframe,.contact__mapwrap{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);min-height:340px;background:var(--mist-2)}
.mapframe iframe,.contact__mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.6rem;color:var(--ink-mute);text-align:center}
.map-ph svg{color:var(--blue)}

/* ---- Gallery grid ------------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gallery figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.06)}

/* ---- Contact details ---------------------------------------------------- */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
.contact__details{display:grid;gap:1rem;margin-bottom:1.4rem}
.cdetail{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;box-shadow:var(--shadow-sm)}
.cdetail__ic{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--blue-tint);border:1px solid var(--blue-tint2);color:var(--blue);flex:none}
.cdetail h3{font-size:1rem;color:var(--ink);margin-bottom:.15rem}
.cdetail p{font-size:.94rem;color:var(--ink-mute);overflow-wrap:anywhere}
.cdetail a{color:var(--blue);font-weight:700;overflow-wrap:anywhere}
.contact__grid>*,.contactsec__grid>*,.welcome__grid>*,.areas__grid>*,.gcta__grid>*,.split>*{min-width:0}

/* ============================================================================
   Closer CTA band  (blue gradient, white text)
   ========================================================================== */
.closer{background:linear-gradient(180deg,rgba(8,12,22,.42),rgba(8,12,22,.2)),linear-gradient(118deg,#0F429E 0%,#1560D8 52%,#2C7BEF 100%);position:relative;overflow:hidden}
.closer__inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:var(--sec)}
.closer__eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#CFE0FB;margin-bottom:.7rem}
.closer h2{font-size:clamp(1.9rem,3.6vw,2.7rem);color:#fff;margin-bottom:1rem}
.closer__copy>p{color:#e9edf2;margin-bottom:1.3rem}
.closer__trust{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.closer__trust li{display:flex;gap:.6rem;align-items:center;color:#f2f5f9}
.closer__trust svg{color:#fff}
.closer__actions{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.closer__actions .btn{width:100%}
.closer__hours{font-size:.86rem;color:#cdd9ee;margin-top:.4rem}

/* ============================================================================
   BAND 7 — Footer  +  BAND 8 — Copyright bar  (dark navy)
   ========================================================================== */
.site-footer{background:var(--footer);color:var(--footer-mut);border-top:1px solid var(--footer-line);padding-block:clamp(3rem,5vw,4.4rem) 2.4rem}
.site-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(1.6rem,4vw,3rem)}
.site-footer__col{min-width:0}
.site-footer__col a,.site-footer__col li{overflow-wrap:anywhere}
.footbrand{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.footbrand__logo{height:56px;width:56px;border-radius:50%;display:block}
.footbrand__name{font-size:1.1rem;font-weight:800;color:#fff;line-height:1.05}
.footbrand__name span{display:block;font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-tint2)}
.site-footer__blurb{color:var(--footer-mut);font-size:.94rem;margin-bottom:1.1rem;max-width:340px}
.site-footer__trust{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.site-footer__trust li{display:flex;gap:.5rem;align-items:center;font-size:.9rem;color:#d4dee7}
.site-footer__trust svg{color:var(--azure)}
.site-footer__col h3{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:1rem}
.site-footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.site-footer__col a,.site-footer__col li{color:var(--footer-mut);font-size:.94rem;transition:color .15s ease}
.site-footer__col a:hover{color:#fff}
.copybar{background:var(--footer-2);border-top:1px solid var(--footer-line)}
.copybar__row{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:center;padding-block:1rem;font-size:.82rem;color:var(--footer-mut)}
.copybar__row a{color:var(--footer-mut)}
.copybar__row a:hover{color:#fff}

/* ---- Sticky mobile call bar --------------------------------------------- */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;gap:.6rem;padding:.6rem;
  background:rgba(255,255,255,.98);backdrop-filter:blur(8px);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(17,32,50,.10)}
.stickybar .btn{flex:1;padding:.85rem}
.stickybar__call{background:var(--azure);color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:800}

/* ============================================================================
   Mobile drawer  (white panel)
   ========================================================================== */
.navdrawer{position:fixed;inset:0;z-index:150;visibility:hidden;opacity:0;transition:.2s ease}
.navdrawer.is-open{visibility:visible;opacity:1}
.navdrawer__backdrop{position:absolute;inset:0;background:rgba(9,12,18,.5)}
.navdrawer__panel{position:absolute;top:0;right:0;height:100%;width:min(360px,86vw);background:#fff;
  border-left:1px solid var(--line);padding:1.2rem;overflow-y:auto;transform:translateX(100%);transition:transform .24s ease;display:flex;flex-direction:column}
.navdrawer.is-open .navdrawer__panel{transform:none}
.navdrawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.navdrawer__title{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:800}
.navdrawer__close{background:var(--mist);border:1px solid var(--line);border-radius:8px;width:44px;height:44px;display:grid;place-items:center;color:var(--ink)}
.navdrawer__sublabel{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin:1.2rem 0 .5rem}
.navdrawer__links{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.navdrawer__links a{display:flex;align-items:center;gap:.7rem;padding:.75rem .8rem;border-radius:9px;color:var(--ink-soft);font-weight:600;min-height:44px}
.navdrawer__links a svg{color:var(--blue)}
.navdrawer__links a:hover,.navdrawer__links a.is-current{background:var(--blue-tint);color:var(--blue)}
.navdrawer__links a.is-current svg{color:var(--blue)}
.navdrawer__cta{margin-top:auto;padding-top:1.4rem;display:grid;gap:.7rem}
.navdrawer__cta .btn{width:100%}
.navdrawer__call{display:flex;align-items:center;justify-content:center;gap:.5rem;color:var(--blue);font-weight:800;padding:.5rem;min-height:44px}

/* ============================================================================
   Reveal animation
   ========================================================================== */
.reveal{opacity:0}

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .svc__grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .topbar__mid{display:none}
  .featstrip__grid{grid-template-columns:repeat(2,1fr)}
  .psteps{grid-template-columns:repeat(2,1fr)}
  .welcome__grid,.gcta__grid,.contactsec__grid,.split,.areas__grid,.contact__grid,.closer__inner{grid-template-columns:1fr}
  .closer__actions{align-items:stretch}
  .split__media,.gcta .collage{order:-1}
  .collage{min-height:300px;max-width:520px;margin-inline:auto}
  .site-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .mainnav{display:none}
  .menu-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--mist);border:1px solid var(--line);
    border-radius:9px;padding:.6rem .9rem;color:var(--ink);font-weight:700;min-height:44px;flex:none}
  .menu-btn__bars{width:18px;height:2px;background:currentColor;position:relative;display:block}
  .menu-btn__bars::before,.menu-btn__bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
  .menu-btn__bars::before{top:-6px}.menu-btn__bars::after{top:6px}
  /* declutter the header — the sticky bottom bar + drawer handle calling */
  .topbar__phone{display:none}
  .header-call{display:none}
  .site-header__row{gap:.8rem}
  .brand__txt{min-width:0}
  .brand__name{font-size:1.08rem;white-space:normal;overflow-wrap:anywhere}
  .stickybar{display:flex}
  body{padding-bottom:74px}
  .suburbs{grid-template-columns:repeat(2,1fr)}
  .wpoints{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .site-header__row{gap:.6rem;min-height:74px}
  .brand__logo{height:60px;width:60px}
  .svc__grid,.gallery,.featstrip__grid,.psteps{grid-template-columns:1fr}
  .incl,.cform .row2{grid-template-columns:1fr}
  .site-footer__grid{grid-template-columns:1fr}
  .hero__cta .btn,.phero__cta .btn{width:100%}
  .collage figure:nth-child(3){display:none}
  .collage figure:nth-child(1){width:66%}.collage figure:nth-child(2){width:60%}
}