/* ==== Breeze Exterior Cleaning — shared design system ==== */
/* Dark theme. --ink is the light foreground that sits on --paper (black),
   not the other way around. Gold comes in two weights: --gold for fills, which
   always carry dark text, and --gold-light for text, icons and rules on black. */
:root{
  --paper:#0A0A0A;
  --paper-dim:#121110;
  --band:#15120F;
  --card:#181510;
  --ink:#F3F0E7;
  --white:#FFFFFF;
  --gold:#9E8126;
  --gold-light:#C9A63C;
  --edge:#332C22;
  --line:rgba(243,240,231,0.14);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;color-scheme:dark;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.wordmark{
  font-family:'Archivo', sans-serif;
  font-weight:900;
  line-height:1.05;
  letter-spacing:-0.01em;
  margin:0;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px;}
:focus-visible{outline:3px solid var(--gold-light);outline-offset:2px;}
.divider{height:2px;background:var(--edge);width:100%;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'IBM Plex Sans', sans-serif;font-weight:600;font-size:16px;
  padding:15px 26px;border:2px solid var(--ink);background:none;cursor:pointer;
  text-decoration:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  transition:transform .12s ease, background .15s ease, color .15s ease;
}
.btn-primary{background:var(--gold);border-color:var(--gold);color:var(--paper);}
.btn-primary:hover{background:var(--gold-light);border-color:var(--gold-light);transform:translate(-1px,-2px);}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);transform:translate(-1px,-2px);}
.btn-block{width:100%;justify-content:center;}
.btn.on-gold{border-color:var(--paper);}
.btn.on-gold.btn-ghost{color:var(--paper);}
.btn.on-gold.btn-ghost:hover{background:var(--paper);color:var(--gold-light);}
.btn-small{padding:9px 16px;font-size:14px;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);}

/* Header */
header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--gold);}
.headbar{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;max-width:1160px;margin:0 auto;}
/* Brand. The headbar carries the icon mark on its own: the full lockup is close to
   5:1 and cannot sit beside the links without closing up the nav spacing, so the
   complete wordmark runs in the footer instead. The mark is shorter than the header
   button, so it does not drive the bar height. */
.wordmark{display:flex;align-items:center;text-decoration:none;color:var(--ink);}
.brand-mark{height:40px;width:auto;}
/* Sized by width so the global img max-width can shrink it on narrow footers
   without squashing the aspect ratio. */
.foot-logo{width:216px;height:auto;}
nav{display:flex;align-items:center;gap:28px;}
.nav-links{display:flex;gap:18px;}
.nav-links a{font-size:14.5px;font-weight:500;text-decoration:none;color:var(--ink);}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--gold-light);}
.head-cta{display:flex;align-items:center;gap:16px;}
.phone-link{font-weight:600;white-space:nowrap;text-decoration:none;}
.menu-btn{display:none;background:none;border:2px solid var(--ink);padding:8px 10px;cursor:pointer;}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{content:"";display:block;width:20px;height:2px;background:var(--ink);position:relative;}
.menu-btn span::before{position:absolute;top:-6px;}
.menu-btn span::after{position:absolute;top:6px;}
.mobile-nav{display:none;flex-direction:column;gap:0;border-top:2px solid var(--edge);background:var(--paper);}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:16px 28px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);font-weight:500;}

/* Hero (home, interactive slider) */
.hero{border-bottom:2px solid var(--edge);}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;min-height:640px;}
.hero-copy{padding:64px 48px 64px 28px;display:flex;flex-direction:column;justify-content:center;max-width:560px;}
.hero-copy p.kicker{font-weight:600;color:var(--gold-light);margin:0 0 14px;}
.hero-copy h1{font-size:clamp(34px,4.2vw,54px);margin-bottom:20px;}
.hero-copy .sub{font-size:18px;max-width:46ch;margin-bottom:28px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px;}
.hero-trust{display:flex;gap:22px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px;}
.hero-trust div{font-size:14px;max-width:150px;}
.hero-trust strong{display:block;font-family:'Archivo';font-size:22px;font-weight:800;}

.slider-wrap{position:relative;overflow:hidden;background:var(--paper);}
.slider-frame{position:relative;width:100%;height:100%;min-height:420px;user-select:none;}
.slider-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.img-after{z-index:1;}
.img-before{z-index:2;clip-path:inset(0 50% 0 0);}
.slider-handle{position:absolute;top:0;bottom:0;left:50%;z-index:3;width:0;transform:translateX(-1px);cursor:ew-resize;}
.slider-handle::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--white);}
.slider-handle::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;background:var(--white);color:var(--paper);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 2px 10px rgba(0,0,0,.35);}
.tag{position:absolute;bottom:18px;font-family:'IBM Plex Sans';font-weight:600;font-size:13px;padding:6px 12px;background:var(--white);color:var(--paper);z-index:4;}
.tag.before{left:18px;}
.tag.after{right:18px;background:var(--gold);color:var(--paper);}

/* Page hero (inner pages, static) */
.page-hero{border-bottom:2px solid var(--edge);}
.page-hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;min-height:380px;}
.page-hero-copy{padding:56px 48px 56px 28px;display:flex;flex-direction:column;justify-content:center;max-width:560px;}
.page-hero-copy p.kicker{font-weight:600;color:var(--gold-light);margin:0 0 12px;}
.page-hero-copy h1{font-size:clamp(30px,3.8vw,46px);margin-bottom:16px;}
.page-hero-copy .sub{font-size:17px;max-width:48ch;margin-bottom:24px;}
.page-hero-img{overflow:hidden;background:var(--paper);}
.page-hero-img img{width:100%;height:100%;min-height:320px;object-fit:cover;}
/* Breadcrumb. Runs at the end of the page rather than under the header: the site is one
   level deep, so the trail is there for the BreadcrumbList schema and for orientation,
   not for navigating, and it does not need hero space. The nav is full-bleed and carries
   the background, so the strip reads as a deliberate closing band on every page — the
   last section varies (gold on before-after and faqs, --band on the quote pages, plain
   paper on terms and the suburbs list), and a transparent trail between those and the
   footer looked like a stray sliver. Matching the footer's own background merges the two
   into one closing block, with footer's 2px --edge rule as the divider. The ol keeps
   .wrap so the text lines up with every other content column; its vertical padding is
   set as longhands, since a `padding` shorthand would drop .wrap's 28px gutters and push
   the trail to the viewport edge. The current page is the dimmed item, so the link stays
   the emphasis. */
.breadcrumb{background:var(--paper-dim);border-top:1px solid var(--line);font-size:12px;}
.breadcrumb ol{
  list-style:none;padding-top:16px;padding-bottom:16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-weight:600;text-transform:uppercase;letter-spacing:.06em;
}
.breadcrumb li{display:flex;align-items:center;gap:10px;}
.breadcrumb li+li::before{content:"—";color:var(--edge);}
.breadcrumb a{color:var(--gold-light);text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px;}
.breadcrumb [aria-current="page"]{color:var(--ink);opacity:.55;}

/* Sections */
section{padding:84px 0;}
section.tight{padding:56px 0;}
/* Content blocks added after launch use <article>, not <section>, so they never shift the
   positional addresses of saved dashboard edits. They take the same spacing as a section. */
.area-notes{padding:0 0 84px;}
.section-head{max-width:640px;margin-bottom:44px;}
.section-head h2{font-size:clamp(28px,3.2vw,40px);margin-bottom:14px;}
.section-head p{font-size:17px;max-width:56ch;}
.bg-dim{background:var(--paper-dim);}

/* Docket strip */
.docket-strip{background:var(--band);color:var(--ink);}
.docket-row{display:grid;grid-template-columns:repeat(4,1fr);}
.docket-item{padding:26px 24px;border-left:1px solid rgba(237,238,231,0.2);}
.docket-item:first-child{border-left:none;}
.docket-item strong{display:block;font-family:'Archivo';font-size:15px;font-weight:800;margin-bottom:6px;}
.docket-item span{font-size:14px;opacity:.85;}

/* Service / docket cards */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--edge);border:2px solid var(--edge);}
.service-card{background:var(--card);padding:30px 26px;clip-path:polygon(0 0,100% 0,100% 100%,18px 100%,0 calc(100% - 18px));}
.service-card h3{font-size:20px;margin-bottom:10px;}
.service-card p{font-size:15px;margin:0;}
.service-card a.more{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--gold-light);text-decoration:none;}
.check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:2px solid var(--gold-light);color:var(--gold-light);font-size:13px;font-weight:700;margin-bottom:14px;}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--edge);}
.step{padding:28px 22px 0;border-right:1px solid var(--line);}
.step:last-child{border-right:none;}
.step .num{font-family:'Archivo';font-size:15px;font-weight:800;color:var(--gold-light);margin-bottom:10px;}
.step h3{font-size:18px;margin-bottom:8px;}
.step p{font-size:14.5px;}

/* Compare panels (e.g. tile vs colorbond, soft wash vs pressure) */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--edge);border:2px solid var(--edge);}
.compare-panel{background:var(--card);padding:30px 28px;}
.compare-panel.accent{background:var(--paper);}
.compare-panel h3{font-size:19px;margin-bottom:12px;}
.compare-panel ul{margin:0;padding-left:18px;font-size:15px;}
.compare-panel li{margin-bottom:8px;}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.gallery figure{margin:0;position:relative;overflow:hidden;background:var(--card);}
.gallery img{height:220px;width:100%;object-fit:cover;transition:transform .3s ease;}
.gallery a:hover img{transform:scale(1.05);}
.gallery figcaption{position:absolute;bottom:0;left:0;right:0;padding:10px 12px;font-size:13px;color:var(--white);background:linear-gradient(transparent,rgba(0,0,0,.65));}
.filter-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;}
.filter-tab{border:2px solid var(--edge);background:none;padding:9px 18px;font-family:'IBM Plex Sans';font-weight:600;font-size:14px;cursor:pointer;}
.filter-tab.active{background:var(--gold);border-color:var(--gold);color:var(--paper);}
.gallery-item{display:none;}
.gallery-item.show{display:block;}

/* Commercial band */
.commercial{background:var(--gold);color:var(--paper);}
.commercial-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;}
.commercial h2,.commercial h1{color:var(--paper);}
.commercial p{font-size:17px;max-width:52ch;}
.commercial ul{margin:22px 0 28px;padding:0;list-style:none;}
.commercial li{display:flex;gap:10px;font-size:15px;margin-bottom:10px;}
.commercial li::before{content:"—";flex-shrink:0;}
.commercial-img{border:2px solid var(--paper);}
.commercial-img img{width:100%;height:340px;object-fit:cover;}

/* Testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.testi{border:2px solid var(--edge);padding:26px;background:var(--card);}
.testi p.quote{font-size:16px;margin-bottom:18px;}
.testi .who{font-weight:600;font-size:14px;}
.testi .who span{font-weight:400;opacity:.7;}
.note-real{font-size:13px;opacity:.65;margin-top:18px;}

/* Google reviews */
.reviews-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;}
.reviews-head .section-head{margin-bottom:0;}
.reviews-rating{display:flex;align-items:center;gap:12px;}
.reviews-rating .g-badge{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Sans';font-weight:600;font-size:15px;}
.reviews-rating .g-badge svg{flex-shrink:0;}
.reviews-rating .stars{display:flex;gap:2px;}
.reviews-rating .stars svg{width:16px;height:16px;}
.review-card{border:2px solid var(--edge);padding:26px;background:var(--card);display:flex;flex-direction:column;height:100%;}
.review-card .stars{display:flex;gap:2px;margin-bottom:14px;}
.review-card .stars svg{width:16px;height:16px;}
.review-card p.quote{font-size:16px;margin-bottom:18px;flex-grow:1;}
.review-card .who{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;}
.review-card .who-name{font-weight:600;}
.review-card .who-name span{font-weight:400;opacity:.7;display:block;font-size:13px;}
.review-card .g-icon{flex-shrink:0;opacity:.85;}
.reviews-cta{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}

/* Suburb / service-area list (unlinked utility page — see moreton-bay-suburbs.html) */
.suburb-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:8px;}
.suburb-group h3{font-size:15px;text-transform:uppercase;letter-spacing:.02em;color:var(--gold-light);margin:0 0 14px;font-family:'IBM Plex Sans';font-weight:600;}
.suburb-group ul{list-style:none;margin:0;padding:0;columns:1;}
.suburb-group li{margin-bottom:8px;font-size:15px;}
.suburb-group a{text-decoration:none;border-bottom:1px solid var(--line);}
.suburb-group a:hover{border-bottom-color:var(--ink);}
.suburb-note{font-size:14px;opacity:.75;max-width:64ch;margin-top:8px;}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:20px 0;font-family:'IBM Plex Sans';font-weight:600;font-size:17px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;color:var(--ink);}
.faq-q .plus{font-family:'Archivo';font-size:22px;font-weight:800;transition:transform .2s ease;flex-shrink:0;margin-left:16px;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:15.5px;}
.faq-a p{padding-bottom:20px;max-width:64ch;}
.faq-cat{margin-bottom:8px;}
.faq-cat h3{font-size:14px;text-transform:none;color:var(--gold-light);margin:36px 0 4px;}
.faq-cat:first-child h3{margin-top:0;}

/* Quote band / form */
.quote-band{background:var(--band);color:var(--ink);}
.quote-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;}
.quote-grid h1,.quote-grid h2{color:var(--ink);}
.quote-grid p{font-size:16px;max-width:44ch;opacity:.9;}
.quote-list{margin:24px 0 0;padding:0;list-style:none;}
.quote-list li{font-size:15px;margin-bottom:10px;display:flex;gap:10px;}
form.quote-form{background:var(--paper);color:var(--ink);padding:32px;border:2px solid var(--edge);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.form-row.full{grid-template-columns:1fr;}
label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;}
input,select,textarea{width:100%;font-family:'IBM Plex Sans';font-size:15px;padding:11px 12px;border:2px solid var(--gold);background:var(--paper-dim);color:var(--ink);}
textarea{resize:vertical;min-height:80px;}
.form-confirm{display:none;text-align:center;padding:20px 0;}
.form-confirm h3{font-size:20px;margin-bottom:8px;}
.form-error{display:none;text-align:center;padding:20px 0;}
.form-error h3{font-size:20px;margin-bottom:8px;}
/* Spam honeypot: kept off-screen rather than display:none, which some bots skip */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Sticky mobile call / quote bar.
   Phones only, where the phone is by far the highest-converting channel and the header has
   scrolled a long way out of reach. `main.js` hides it while a quote form is on screen so it
   can never sit on top of the send button. */
.sticky-cta{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  gap:10px;padding:10px 12px;
  background:rgba(10,10,10,.96);
  border-top:2px solid var(--gold);
  box-shadow:0 -8px 22px rgba(0,0,0,.5);
}
.sticky-cta .btn{flex:1;justify-content:center;padding:14px 10px;font-size:15.5px;}

/* Contact info blocks */
.contact-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--edge);border:2px solid var(--edge);margin-bottom:56px;}
.contact-info-card{background:var(--card);padding:26px;}
.contact-info-card h3{font-size:16px;margin-bottom:8px;}
.contact-info-card p,.contact-info-card a{font-size:15px;text-decoration:none;}

/* Prose pages (terms) */
.prose{max-width:720px;}
.prose h2{font-size:22px;margin:36px 0 12px;}
.prose p{font-size:15.5px;margin:0 0 14px;}
.prose ul{font-size:15.5px;}

/* Footer */
footer{background:var(--paper-dim);border-top:2px solid var(--edge);padding:48px 0 28px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px;}
.foot-grid h4{font-family:'Archivo';font-size:15px;margin-bottom:14px;}
.foot-grid ul{list-style:none;margin:0;padding:0;}
.foot-grid li{margin-bottom:8px;font-size:14.5px;}
.foot-grid a{text-decoration:none;}
.foot-grid a:hover{color:var(--gold-light);}
.foot-bottom{border-top:1px solid var(--line);padding-top:20px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;opacity:.75;}

/* Seven nav links since House Washing was added: hand over to the menu button before they
   crowd the phone number on smaller laptops. */
@media (max-width:1180px){
  .nav-links{display:none;}
  .menu-btn{display:block;}
}
@media (max-width:900px){
  .nav-links{display:none;}
  .menu-btn{display:block;}
  .hero-grid,.page-hero-grid{grid-template-columns:1fr;}
  .hero-copy,.page-hero-copy{padding:40px 20px;max-width:none;}
  .slider-frame{min-height:320px;}
  .docket-row{grid-template-columns:repeat(2,1fr);}
  .docket-item:nth-child(3){border-left:none;}
  .services-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .step{border-right:none;border-bottom:1px solid var(--line);padding-bottom:20px;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .commercial-grid{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .reviews-head{flex-direction:column;align-items:flex-start;}
  .suburb-groups{grid-template-columns:1fr 1fr;}
  .quote-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .compare-grid{grid-template-columns:1fr;}
  .contact-info-grid{grid-template-columns:1fr;}
  .sticky-cta{display:flex;}
  .sticky-cta[hidden]{display:none;}
  /* Room for the bar so it never covers the last line of the footer, on the pages that carry
     one — 404.html shares this stylesheet but has no bar. */
  body:has([data-sticky-cta]){padding-bottom:74px;}
}