/* ===== Design Tokens ===== */
:root{
  --bg:#0b0d12;
  --text:#f2f5f9;
  --muted:#c4cfdd;
  --card:#141823;
  --border:rgba(255,255,255,0.12);
  --accent:#e11d2e;

  --container:1100px;
  --sidepad:24px;

  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.25);

  --nav-size:20px;

  --s-4:4px;
  --s-8:8px;
  --s-12:12px;
  --s-16:16px;
  --s-24:24px;
  --s-32:32px;
  --s-48:48px;
  --s-64:64px;
  --s-96:96px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  font-size:18px;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
}

img{max-width:100%;display:block}
h1,h2,h3{line-height:1.2;margin:0 0 var(--s-16)}
p{margin:0 0 var(--s-16)}
a{color:inherit;text-decoration:none}
.small{font-size:.9rem}
.text-error{color:#ffb4b4}

/* Layout utilities */
.container{
  max-width:var(--container);
  padding:0 var(--sidepad);
  margin:0 auto;
}
.container.narrow{max-width:900px}
.center{text-align:center}

/* Sections (more breathing room site-wide) */
.section{
  padding:112px 0;
  position:relative;
}
/* Keep Services spacing as original */
#services.section{padding:var(--s-96) 0}

.section-variant{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.section + .section{border-top:1px solid var(--border)}

/* Title block */
.section-title{
  text-align:center;
  margin:0 0 var(--s-48);
}
.section-title h2{
  font-size:clamp(28px,4.2vw,40px);
  margin-bottom:var(--s-8);
}
.muted{color:var(--muted)}

/* Header (transparent always) */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:transparent;
}
.header-inner{
  height:72px; /* room for larger circular logo */
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:var(--s-12)}
/* Circular, larger logo */
.brand-logo{
  width:56px;height:56px;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
/* Optional text fallback (kept) */
.brand-fallback{display:none;font-weight:700;white-space:nowrap}

/* Brand name defaults (desktop) */
.brand-name{
  display:inline-block;
  font-weight:700;
  white-space:nowrap;
  margin-left:12px;
}

/* Desktop Nav */
.nav-desktop{display:none}
.nav-list{
  list-style:none;margin:0;padding:0;
  display:flex;gap:var(--s-12);align-items:center;
  font-size:var(--nav-size);
}
.pill-link{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  white-space:nowrap;
  transition:background .2s ease, border-color .2s ease;
}
.pill-link:hover{background:rgba(255,255,255,0.1)}
.pill-accent{background:var(--accent);color:#fff}
.pill-accent:hover{filter:brightness(1.05)}

/* Mobile Menu Button */
.menu-btn{
  inline-size:44px; block-size:44px;
  border-radius:50%;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(6px);
  color:var(--text);
  display:inline-grid;place-items:center;
  cursor:pointer;
}
.menu-icon{
  width:20px;height:2px;background:currentColor;position:relative;display:block;
}
.menu-icon::before,.menu-icon::after{
  content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;
}
.menu-icon::before{top:-6px}
.menu-icon::after{top:6px}

/* Mobile Overlay */
.menu-overlay[hidden]{display:none}
.menu-overlay{
  position:fixed;inset:0;z-index:1200;
  display:grid;grid-template-rows:auto 1fr;
  background:rgba(8,10,14,0.9);
  backdrop-filter:blur(14px);
  transition:opacity .2s ease;
  opacity:0;
}
.menu-overlay.open{opacity:1}
.menu-close{
  position:absolute;top:16px;right:16px;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.06);
  color:var(--text);font-size:28px;line-height:1;cursor:pointer;
}
.menu-overlay-inner{
  display:grid;place-items:center;
  padding-top:48px;
  gap:12px;
}
.overlay-link{
  display:flex;align-items:center;justify-content:center;
  min-height:56px;
  width:min(520px, 100% - 48px); /* spec requirement */
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.06);
  white-space:nowrap;
  font-size:20px;
}
.overlay-cta{
  background:var(--accent);
  border-color:transparent;
  color:#fff;
  margin-top:8px;
}

/* Prevent body scroll when overlay open */
.no-scroll{overflow:hidden}

/* Hero */
.hero{
  height:100vh; /* full viewport */
  display:grid;place-items:center;
  position:relative;
  background: url("./images/hero1.png") center/cover no-repeat fixed;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.32));
}
.hero-content{
  position:relative;text-align:center;
  z-index:1;
}
.hero h1{
  font-size:clamp(32px,5.2vw,56px);
  margin-bottom:var(--s-12);
}
.hero p{
  color:var(--muted);
  margin-bottom:var(--s-24);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:999px;border:0;cursor:pointer;font-weight:600;
}
.btn-accent{background:var(--accent);color:#fff;box-shadow:var(--shadow)}
.btn-accent:hover{filter:brightness(1.05)}

/* Force single-line per element on desktop */
@media (min-width: 960px){
  .nowrap-desktop{white-space:nowrap}
}

/* Cards / Services */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.gradient{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)) ,
    var(--card);
}
.card-services{padding:var(--s-24)}
.services-grid{
  display:grid;gap:var(--s-24);
}
.service-panel{
  overflow:hidden;border-radius:var(--radius);
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.service-panel .media{
  aspect-ratio:4/3;overflow:hidden;background:#0f1219;
}
.service-panel .media img{
  width:100%;height:100%;object-fit:cover;
}
.panel-body{padding:var(--s-16)}
.service-panel h3{margin-bottom:var(--s-12)}
.tick-list{
  list-style:none;padding:0;margin:0 0 var(--s-8);
}
.tick-list li{
  position:relative;padding-left:36px;margin:8px 0;
}
.tick-list li::before{
  content:"";position:absolute;left:0;top:4px;
  width:22px;height:22px;
  background:url("./images/tick-red.png") center/contain no-repeat; /* required source */
}
.note{margin-top:var(--s-8);font-size:.95rem}

/* Vertical divider on desktop */
@media (min-width: 900px){
  .services-grid{
    grid-template-columns:1fr 1fr;
    gap:var(--s-32);
    position:relative;
  }
  .services-grid::before{
    content:"";position:absolute;top:0;bottom:0;left:50%;
    width:1px;background:var(--border);
    transform:translateX(-.5px);
  }
}

/* How it Works background variant */
.hero-variant{
  position:relative;overflow:hidden;
}
.bg-img.bg-how{
  position:absolute;inset:0;
  background:url("./images/hero2.png") center/cover no-repeat fixed;
  filter:grayscale(10%);
}
.tint{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
}
.steps-grid{
  position:relative;z-index:2;
  display:grid;gap:var(--s-16);
}
.step-card{
  background:rgba(20,24,35,.8);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--s-16);
  box-shadow:var(--shadow);
}
.step-card h3{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.step-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:28px;border-radius:999px;
  background:var(--accent);color:#fff;font-weight:700;
  font-size:16px;
}

/* 3x2 on desktop */
@media (min-width: 900px){
  .steps-grid{
    grid-template-columns:repeat(3,1fr);
    gap:var(--s-24);
  }
}

/* Pricing */
.price-wrapper{padding:var(--s-24)}
.prices{display:grid;gap:var(--s-24)}
@media (min-width: 800px){
  .prices{grid-template-columns:1fr 1fr}
}
.card.price{
  text-align:center;padding:var(--s-16);
}
.card.price .media-img {
  width: 100%;
  height: clamp(140px, 18vw, 200px);
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  padding: 12px;
  border-radius: 10px;
}
.price-sub{margin-top:6px;color:var(--muted)}
/* Pricing note under the container(s) */
.pricing-note{
  margin-top:var(--s-16);
  color:var(--muted);
  text-align:center;
}

/* Map */
.map-wrapper{
  position:relative;width:100%;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  margin:0 auto var(--s-16);
  max-width:900px;
}
.map-wrapper iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
.suburbs-line{margin-top:var(--s-8)}

/* Contact */
.contact-card{padding:var(--s-24)}
.contact-form{display:grid;gap:var(--s-16)}
.grid.two{display:grid;gap:var(--s-16)}
@media (min-width: 720px){
  .grid.two{grid-template-columns:1fr 1fr}
}
.field{display:grid;gap:8px}
.field span{color:var(--muted);font-size:.95rem}
input,textarea{
  width:100%;
  background:#0f131b;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  min-height:44px;
}
textarea{min-height:120px;resize:vertical}
.talk-line{margin-top:var(--s-16);text-align:center}
.tel-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.tel-link:hover{border-bottom-color:currentColor}

/* Honeypot */
.hp{
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* Footer */
.site-footer{
  background:transparent;border-top:1px solid var(--border);
  padding:var(--s-24) 0;
}
.footer-inner{display:grid;gap:var(--s-16)}
.footer-nav{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--s-8);
  justify-content:center;
}

/* Responsive adjustments */
@media (min-width: 960px){
  .nav-desktop{display:block}
  .menu-btn{display:none}
  .brand-fallback{display:none}
}

@media (max-width: 959.98px){
  .brand-fallback{display:inline-block}
}

/* Parallax off on small screens for performance */
@media (max-width: 899.98px){
  .hero{background-attachment:scroll}
  .bg-img.bg-how{background-attachment:scroll}
}

/* Safety clamp for header logo */
.site-header .brand img{
  width:56px; height:56px; border-radius:50%; object-fit:cover; display:block;
}

/* Ensure the How it Works title sits above the tint/background */
#how-it-works.hero-variant .section-title {
  position: relative;
  z-index: 2; /* higher than .tint / .bg-img */
}

#how-it-works.hero-variant .bg-img,
#how-it-works.hero-variant .tint {
  z-index: 0; /* explicitly below content */
}

#how-it-works .section-title h2,
#how-it-works .section-title p {
  text-align: center;
}

/* Make How-It-Works section taller but centered */
#how-it-works.hero-variant {
  min-height: 85vh;       /* 90% of viewport height */
  display: flex;          /* enable centering */
  flex-direction: column; /* stack title and grid vertically */
  justify-content: center;/* vertical centering */
}



/* === Feedback (submit.php) Consolidated === */
body.feedback-only{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Full-bleed hero using ./images/hero3.png */
.feedback-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:url("./images/hero3.png") center/cover no-repeat fixed;
}
.feedback-hero .hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.38));
}
.feedback-hero .container{
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  justify-content:center;
}

/* Card */
.feedback-card{
  width:100%;
  max-width:760px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  padding:48px 32px;
  text-align:center;
}

/* Type & spacing */
.feedback-title{
  font-size:clamp(24px, 3.4vw, 32px);
  font-weight:800;
  margin:0 0 20px;
}
.feedback-sub{
  color:var(--muted);
  margin:0 0 28px;
}
.text-error{ color:#ffb4b4; }

/* Actions (both red pills) */
.feedback-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin:0 0 20px;
}
.feedback-card .btn{
  min-width:160px;
  padding:14px 22px;
}

/* Hide site footer on this page (if any) */
body.feedback-only .site-footer{ display:none; }

/* Mobile tweaks */
@media (max-width: 420px){
  .feedback-card{ padding:28px 18px; }
  .feedback-card .btn{ min-width:140px; }
}

/* Optional: turn off fixed background on small screens for perf */
@media (max-width: 899.98px){
  .feedback-hero{ background-attachment:scroll; }
}



/* --- Mobile brand layout: logo left, brand text centered --- */
@media (max-width: 768px){
  .site-header .header-inner{
    position:relative;
    display:flex;align-items:center;
  }
  .site-header .brand-logo{
    flex-shrink:0;
    margin-right:auto;             /* pushes logo to far left */
  }
  .site-header .brand-name{
    position:absolute;
    left:50%; transform:translateX(-50%);
    margin:0;
    font-size:18px;
    white-space:nowrap;
  }
}

/* Slightly shorter header + scaled logo on small phones (optional) */
@media (max-width: 599.98px){
  .header-inner{ height:60px; }
  .brand-logo{ width:44px; height:44px; }
}

/* === Mobile overlay spacing/tap targets (enhanced) === */
@media (max-width: 959.98px){
  .menu-overlay .menu-overlay-inner{
    gap:24px;              /* more vertical space between links */
    padding-top:64px;      /* push content slightly down from close button */
  }
  .menu-overlay a.overlay-link{
    min-height:64px;       /* larger tap targets */
    padding:18px 24px;
  }
  .menu-overlay a.overlay-cta{
    margin-top:8px;
  }
}