/* "Modern Suburban" theme for the public website (customer pages, business pages). Loaded after site.css and
   customer.css. 60% clean canvas, 30% deep slate structure with mint trust fills, 10% safety-orange action.
   The accent is reserved for the main action on a page and for map areas; everything else is slate. */
:root {
  --canvas: #FFFFFF;
  --tint: #F8FAFC;
  --navy: #0F172A;
  --navy-2: #1E293B;
  --slate: #475569;
  --slate-line: #CBD5E1;
  --slate-soft: #E2E8F0;
  --mint: #E6F2E8;
  --mint-ink: #166534;
  --accent: #F97316;
  --accent-deep: #EA580C;
  --accent-soft: rgba(249, 115, 22, 0.10);
  --accent-muted: #FDBA74;
  /* Re-point the shared site tokens so every existing component picks up the palette. */
  --concrete: var(--tint);
  --concrete-2: #F1F5F9;
  --white: var(--canvas);
  --paper: var(--tint);
  --field: var(--canvas);
  --ink: var(--navy);
  --ink-2: var(--navy-2);
  --muted: var(--slate);
  --faint: #94A3B8;
  --line: var(--slate-line);
  --glass: var(--navy);
  --glass-deep: var(--navy-2);
  --glass-soft: var(--mint);
  --timber: var(--accent-deep);
  --timber-soft: #FFEDD5;
}
body, body.customer { background: var(--canvas); color: var(--navy); }
body::before, body::after { display: none; }
a { color: var(--navy); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
:is(input, select, textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--navy) !important; }

/* Buttons: slate by default; .accent only for the critical action. */
.btn, .btn.glass { background: var(--navy); color: #FFFFFF; box-shadow: none; background-image: none; }
.btn:hover, .btn.glass:hover { background: var(--navy-2); }
.btn.accent, .btn.glass.accent { background: var(--accent); color: var(--navy); font-weight: 700; }
.btn.accent:hover { background: var(--accent-deep); color: var(--navy); }
.btn.light { background: #FFFFFF; color: var(--navy); }
.btn.line { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Flat surfaces with slate borders instead of frosted glass. */
.panel, .card, .offer, .door.home, .sc, .plan, .kpi, .faq-group, .customer .finder { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.customer .site-head, .site-head { background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid var(--slate-soft); }
.customer .white, .band.white { background: var(--canvas); }
.customer .band:not(.white):not(.biz-band) { background: var(--tint); }
.customer .sec-head .lede, .customer .service-main .lede { color: var(--slate); }
.eyebrow, .category-label { color: var(--slate); }
.customer .why .panel, .customer .cat-filters, .customer .offer, .customer .map-box, .customer .service-main .card, .trust-layout .panel, .customer .why-band { border-color: var(--slate-soft); }
.customer .why b { color: var(--navy); }
.customer :is(.why span, .service-copy p) { color: var(--slate); }
.customer .cat-filters input, .customer .cat-filters select, .customer .finder input { border-color: var(--slate-line); background: var(--canvas); color: var(--navy); }
.customer .empty-state { background: var(--mint); border-color: #C6E2CC; }
.site-foot { background: #020617; color: #CBD5E1; border-top: 1px solid #1E293B; }

/* Service cards */
.feature-card, .customer .cat-card { border: 1px solid var(--slate-soft); border-radius: 14px; background: var(--canvas); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, border-color .25s ease; }
.feature-card:hover, .customer .cat-card:hover { transform: translateY(-4px); border-color: var(--slate-line); box-shadow: 0 18px 36px -24px rgba(15, 23, 42, .45); }
.service-visual, .customer .service-visual, .customer .service-thumb, .customer .service-art { background: var(--tint); color: var(--slate); overflow: hidden; }
.feature-card:nth-child(3n) .service-visual { background: var(--tint); color: var(--slate); }
.service-visual picture img, .service-thumb picture img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.feature-card:hover picture img, .cat-card:hover picture img { transform: scale(1.06); }
.pricing-label { color: var(--navy); }
.service-action { color: var(--navy); }
/* Card photos carry no overlay label; credits live on each service guide and the photo credits list. */
:is(.service-visual, .service-thumb).has-service-image > small { display: none !important; }

/* Hero: drone film of an Australian suburb under a slate scrim, one accent action. */
.customer .hero { background: var(--navy); position: relative; overflow: hidden; isolation: isolate; }
.customer .hero-media { position: absolute; inset: 0; z-index: -1; background: var(--navy) center / cover no-repeat; background-image: var(--hero-poster, none); border-radius: 0; }
.customer .hero-media img, .customer .hero-media video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.customer .hero-media video { opacity: 0; transition: opacity 1.2s ease; }
.customer .hero-media video.ready { opacity: 1; }
.customer .hero-media::after { display: block; content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15, 23, 42, .9) 0%, rgba(15, 23, 42, .72) 45%, rgba(15, 23, 42, .4) 100%); }
.customer .hero > .wrap > .lede, .customer .hero-aside p, .customer .proof { color: #E2E8F0; }
.customer .hero .eyebrow-dark { color: var(--accent-muted); }
.customer .hero .finder { border-radius: 16px; }
.customer .hero .finder .who { color: var(--slate); }
.customer .hero .finder .ticks { color: var(--slate); }
.customer .hero .finder .ticks li::before { border-color: var(--mint-ink); }
.customer .proof { border-top-color: rgba(255, 255, 255, .2); }

/* Task A: three pricing models as flat cards. */
.customer .price-paths { gap: 18px; }
.customer .price-paths article { background: var(--tint); border: 1px solid var(--slate-line); border-top: 1px solid var(--slate-line); border-radius: 14px; padding: 24px; display: grid; gap: 10px; align-content: start; transition: transform .25s ease, box-shadow .25s ease; }
.customer .price-paths article:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -24px rgba(15, 23, 42, .5); }
.price-paths .pp-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); }
.price-paths .pp-icon svg { width: 24px; height: 24px; }
.customer .price-paths span { color: var(--slate); }
.customer .price-paths :is(h2, h3) { margin: 4px 0 0; }
.customer .price-paths p { color: var(--slate); }
.payment-note { background: var(--mint); color: var(--navy); }

/* Task C: business band, inverted. */
.customer .biz-band { background: var(--navy); color: #FFFFFF; }
.customer .biz-band .ops-cta { background: transparent; padding: 0; border-radius: 0; }
.customer .biz-band :is(h2, h3) { color: #FFFFFF; }
.customer .biz-band p { color: #E2E8F0; }
.customer .biz-band .biz-points { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: #F1F5F9; font-size: .95rem; }
.customer .biz-band .biz-points li { display: flex; gap: 8px; align-items: center; }
.customer .biz-band .biz-points li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.customer .biz-band .btn.light { background: #FFFFFF; color: var(--navy); }

/* Verification micro-tags: ABN checked / Public liability insurance verified. */
.badge, .badge.verified, .badge.check { background: var(--mint); color: var(--mint-ink); border-radius: 6px; font-size: .74rem; font-weight: 650; padding: 3px 8px; letter-spacing: .005em; }
.badge svg { color: var(--mint-ink); }

/* Map: light basemap, approximate areas in a 10% accent fill. */
.customer .map-box { background: #F1F5F9; }

/* Step-by-step request form */
.wizard-progress { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: ws; }
.wizard-progress li { counter-increment: ws; display: grid; gap: 6px; font-size: .82rem; font-weight: 650; color: var(--slate); }
.wizard-progress li::before { content: ""; height: 4px; border-radius: 4px; background: var(--slate-soft); transition: background .3s ease; }
.wizard-progress li.done::before, .wizard-progress li.current::before { background: var(--navy); }
.wizard-progress li.current { color: var(--navy); }
.wizard-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
.wizard-step > legend { font-size: 1.25rem; font-weight: 750; letter-spacing: -.02em; padding: 0; margin-bottom: 4px; color: var(--navy); }
.js-wizard .wizard-step:not(.current) { display: none; }
.js-wizard .wizard-step.current { animation: step-in .35s cubic-bezier(.2, .7, .2, 1); }
.wizard-nav { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.wizard-nav .btn { min-width: 140px; }
.wizard-nav .grow { flex: 1; }
.customer #ask { background: var(--canvas); border: 1px solid var(--slate-soft); }
body.customer:has(#ask) { background: var(--tint); }
#ask :is(input:not([type=checkbox]):not([type=file]), select, textarea) { border-color: var(--slate-line) !important; background: var(--canvas) !important; }
#ask button[type=submit] { font-size: 1.08rem; min-height: 54px; }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* Homepage motion: entrance, scroll reveal, attention on the main action. Transform/opacity only. */
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cta-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .45); } 50% { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); } }
.customer .hero .eyebrow-dark, .customer .hero h1, .customer .hero > .wrap > .lede, .customer .hero .doors, .customer .hero .proof { animation: rise-in .8s cubic-bezier(.2, .7, .2, 1) both; }
.customer .hero h1 { animation-delay: .08s; }
.customer .hero > .wrap > .lede { animation-delay: .18s; }
.customer .hero .doors { animation-delay: .28s; }
.customer .hero .proof { animation-delay: .4s; }
.customer .hero .btn.accent { animation: cta-glow 2.4s ease-in-out 1.4s 3; }
.reveal-on .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.reveal-on .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .customer .hero *, .customer .hero .btn.accent, .js-wizard .wizard-step.current { animation: none !important; }
  .reveal-on .reveal { opacity: 1; transform: none; transition: none; }
  .feature-card, .customer .cat-card, .customer .price-paths article, .service-visual picture img, .service-thumb picture img { transition: none; }
  .customer .hero-media video { display: none; }
}
#request-service-media:empty { display: none; }