/*
Theme Name: Bill Bin Hire
Theme URI: https://billbinhire.com.au
Author: Embery
Description: Clean, dependency-free theme for Bill Bin Hire. Semantic HTML, no page
builder, no framework, no build step. Design tokens live in :root below.
Version: 1.0.0
License: Proprietary
Text Domain: billbinhire
*/

/* ---------------------------------------------------------------------------
   Fonts — self-hosted variable fonts (latin subset). One file per family covers
   every weight we use, so this is 3 requests / 152KB instead of a Google Fonts
   round trip on every page load.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/fonts/plus-jakarta-sans.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('assets/fonts/work-sans.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('assets/fonts/caveat.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   Design tokens — from design_handoff_hero_revamp/README.md
   --------------------------------------------------------------------------- */
:root {
  --orange: #F15A24;
  --orange-dark: #d84a15;
  --orange-light: #F79A5A;
  --green: #1D4F3F;
  --black: #0c0c0c;
  --ink: #1A1A1A;
  --ink-nav: #2b2b2b;
  --muted: #555;
  --muted-2: #666;
  --grey-footer: #C8C8C8;
  --grey-fine: #8A8A8A;
  --placeholder: #9A9A9A;
  --border: #E4E4E4;
  --border-light: #eee;
  --surface: #FAFAFA;
  --success: #2E9E4C;
  --success-bg: #EAF7EE;
  --danger: #D64545;

  --font-head: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Work Sans', system-ui, -apple-system, sans-serif;
  --font-accent: 'Caveat', cursive;

  --r-card: 20px;
  --r-card-sm: 16px;
  --r-btn: 10px;
  --r-input: 8px;
  --r-pill: 999px;

  --pad-x: clamp(20px, 5vw, 56px);
  --pad-y: clamp(48px, 6vw, 80px);
  --nav-pad-x: clamp(20px, 5vw, 56px);
  --wrap: 1360px;

  --shadow-cta: 0 8px 24px rgba(241, 90, 36, .32);
  --shadow-card: 0 30px 60px rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); margin: 0 0 .5em; }
h1 { font-size: clamp(32px, 4vw, 56px); font-weight: 800; line-height: 1.03; letter-spacing: -1.5px; }
h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.5px; }
h3 { font-size: clamp(19px, 2vw, 28px); font-weight: 800; }

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-dark); }

/* Links inside prose must be distinguishable without relying on colour alone
   (WCAG 1.4.1) — colour-blind readers can't pick an orange link out of dark body
   text. Nav, buttons and pills are excluded: they're visually obvious as controls. */
.bbh-content a:not(.bbh-btn),
.bbh-split__text a:not(.bbh-btn),
.bbh-narrow a:not(.bbh-btn),
.bbh-footer__blurb a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.bbh-content a:not(.bbh-btn):hover,
.bbh-split__text a:not(.bbh-btn):hover,
.bbh-narrow a:not(.bbh-btn):hover {
  text-decoration-thickness: 2px;
}
img { max-width: 100%; height: auto; }

/* Visible keyboard focus — the design specifies none, but shipping without it
   would fail accessibility for keyboard users. */
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.bbh-screen-reader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.bbh-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: var(--ink); padding: 12px 18px; font-weight: 700;
}
.bbh-skip-link:focus { left: 8px; top: 8px; }

.bbh-wrap { max-width: var(--wrap); margin: 0 auto; }
.bbh-section { padding: var(--pad-y) var(--pad-x); }
.bbh-section--surface { background: var(--surface); }
.bbh-section--dark { background: var(--black); color: var(--grey-footer); }
.bbh-section--dark h2, .bbh-section--dark h3 { color: #fff; }

/* ---------------------------------------------------------------------------
   Logo — the real brand SVG, inlined. Fills are classed so the footer can
   recolour it without duplicating the markup.
   --------------------------------------------------------------------------- */
.bbh-logo { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.bbh-logo-svg { display: block; height: clamp(30px, 3.4vw, 46px); width: auto; }
.bbh-l-bin  { fill: var(--orange); }
.bbh-l-bill { fill: #fff; }
.bbh-l-mid  { fill: var(--orange); }
.bbh-l-end  { fill: var(--green); }

.bbh-footer .bbh-logo-svg { height: 40px; margin-bottom: 14px; }
.bbh-footer .bbh-l-mid { fill: var(--orange-light); }
.bbh-footer .bbh-l-end { fill: #fff; }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.bbh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--orange); color: #fff; font-family: var(--font-body);
  font-weight: 700; border: 0; border-radius: var(--r-btn); cursor: pointer;
  padding: 17px 30px; font-size: 18px; box-shadow: var(--shadow-cta);
  transition: background .15s ease;
}
.bbh-btn:hover { background: var(--orange-dark); color: #fff; }
.bbh-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.bbh-btn--sm { padding: 12px 20px; font-size: 15px; }
.bbh-btn--ghost {
  background: transparent; color: var(--ink); border: 1.5px solid var(--border);
  box-shadow: none;
}
.bbh-btn--ghost:hover { background: var(--surface); color: var(--ink); }

/* ---------------------------------------------------------------------------
   Header / nav
   --------------------------------------------------------------------------- */
.bbh-header { background: #fff; border-bottom: 1px solid #f0f0f0; position: relative; z-index: 50; }
.bbh-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(10px, 2vw, 24px); padding: 16px var(--nav-pad-x);
  max-width: var(--wrap); margin: 0 auto;
}
.bbh-nav__menu { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
.bbh-nav__menu, .bbh-nav__menu ul { list-style: none; margin: 0; padding: 0; }
.bbh-nav__menu > li { position: relative; }
.bbh-nav__menu a {
  font-weight: 600; font-size: 15px; color: var(--ink-nav); white-space: nowrap;
}
.bbh-nav__menu a:hover { color: var(--orange); }
.bbh-nav__menu .current-menu-item > a,
.bbh-nav__menu .current-menu-ancestor > a,
.bbh-nav__menu .current_page_item > a { color: var(--orange); }

/* Service Areas dropdown — hover on desktop, click-toggle on touch */
.bbh-nav__menu .sub-menu {
  position: absolute; top: calc(100% + 12px); left: 0; min-width: 230px;
  background: #fff; border: 1px solid var(--border-light); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .12); padding: 10px 0;
  /* display, not visibility/opacity. A hidden-but-present submenu kept capturing
     hover across ~980px of page, and layering visibility rules on the nested level
     re-showed children while the parent was hidden. display:none has no such
     ambiguity and nothing inside can be hit-tested while closed. */
  display: none;
}
.bbh-nav__menu > li:hover > .sub-menu,
.bbh-nav__menu > li:focus-within > .sub-menu,
.bbh-nav__menu > li.is-open > .sub-menu {
  display: block;
}
.bbh-nav__menu .sub-menu li { position: relative; }
.bbh-nav__menu .sub-menu a { display: block; padding: 9px 18px; font-weight: 500; font-size: 14px; }
.bbh-nav__menu .sub-menu a:hover { background: var(--surface); }
/* Third level (suburbs under a region) renders inline underneath its region.
   Deliberately does NOT set visibility/opacity/pointer-events: setting
   `visibility: visible` here re-shows these children even while the parent
   dropdown is hidden, so the closed menu kept capturing hover across ~980px of
   the page and opened when the cursor passed anywhere below the nav item. */
.bbh-nav__menu .sub-menu .sub-menu {
  display: block; position: static;
  box-shadow: none; border: 0; border-radius: 0; padding: 0 0 6px;
}
.bbh-nav__menu .sub-menu .sub-menu a { padding-left: 34px; font-size: 13px; color: var(--muted-2); }

.bbh-nav__phone {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange); color: #fff; font-weight: 700; font-size: 14px;
  padding: clamp(10px, 1.4vw, 12px) clamp(14px, 2vw, 22px); border-radius: var(--r-input);
  white-space: nowrap;
}
.bbh-nav__phone:hover { background: var(--orange-dark); color: #fff; }

.bbh-nav__toggle {
  display: none; flex: none; background: none; border: 1.5px solid var(--ink-nav);
  border-radius: var(--r-input); padding: 9px; cursor: pointer;
  align-items: center; justify-content: center;
}

.bbh-mobile-menu { display: none; background: #fff; border-top: 1px solid var(--border-light); }
.bbh-mobile-menu.is-open { display: block; }
.bbh-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.bbh-mobile-menu > ul { max-width: var(--wrap); margin: 0 auto; padding: 8px var(--nav-pad-x) 16px; }
.bbh-mobile-menu a {
  display: block; padding: 11px 0; font-weight: 600; font-size: 15px; color: var(--ink-nav);
  border-bottom: 1px solid #f4f4f4;
}
.bbh-mobile-menu .sub-menu a { padding-left: 16px; font-weight: 500; font-size: 14px; color: var(--muted); }
.bbh-mobile-menu .sub-menu .sub-menu a { padding-left: 32px; font-size: 13px; }

/* Single JS-driven breakpoint at 980px, per the design spec */
body.is-stacked .bbh-nav__menu { display: none; }
body.is-stacked .bbh-nav__toggle { display: flex; }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.bbh-footer {
  background: var(--black); color: var(--grey-footer);
  padding: 52px var(--pad-x) 22px; font-size: 14px;
}
.bbh-footer a { color: var(--orange-light); }
.bbh-footer a:hover { color: #fff; }
.bbh-footer__cols { max-width: var(--wrap); margin: 0 auto; display: flex; gap: 40px 64px; flex-wrap: wrap; justify-content: space-between; }
.bbh-footer__brand { flex: 0 1 380px; }
.bbh-footer__brand .bbh-logo { font-size: 24px; margin-bottom: 14px; }
.bbh-footer__brand .bbh-logo__mid { color: var(--orange-light); }
.bbh-footer__brand .bbh-logo__end { color: #fff; }
.bbh-footer__blurb { line-height: 1.6; max-width: 360px; }
.bbh-footer__col { flex: 0 1 auto; min-width: 150px; }
.bbh-footer__col h2 { color: #fff; font-weight: 700; font-size: 16px; margin-bottom: 14px; font-family: var(--font-body); letter-spacing: 0; }
.bbh-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bbh-footer__contact { display: flex; flex-direction: column; gap: 10px; }
.bbh-footer__bottom {
  max-width: var(--wrap); margin: 28px auto 0; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 12px; color: var(--grey-fine);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.bbh-footer__bottom a { color: var(--grey-fine); }
.bbh-footer__legal { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   Generic page content (suburb landing pages, blog posts, legal pages)
   --------------------------------------------------------------------------- */
.bbh-page-header { background: var(--black); color: #fff; padding: clamp(40px, 5vw, 68px) var(--pad-x); }
.bbh-page-header__inner { max-width: var(--wrap); margin: 0 auto; }
.bbh-page-header h1 { color: #fff; margin: 0; }
.bbh-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(241, 90, 36, .15); border: 1px solid rgba(247, 154, 90, .5);
  border-radius: var(--r-pill); padding: 9px 16px;
  font-size: 13px; font-weight: 700; letter-spacing: .3px; color: var(--orange-light);
  margin-bottom: 18px;
}
.bbh-content { max-width: 820px; margin: 0 auto; padding: var(--pad-y) var(--pad-x); }
.bbh-content--wide { max-width: var(--wrap); }
.bbh-content p, .bbh-content li { color: var(--muted); }
.bbh-content h2 { margin-top: 1.6em; }
.bbh-content img { border-radius: var(--r-card-sm); }
.bbh-content ul, .bbh-content ol { padding-left: 1.2em; }
.bbh-content table { width: 100%; border-collapse: collapse; }
.bbh-content th, .bbh-content td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }

/* Wide content (tables, embeds) must scroll inside itself, never the page */
.bbh-scroll-x { overflow-x: auto; }

/* ---------------------------------------------------------------------------
   Home hero — geometry taken from the handoff's computed styles:
   row justify flex-start (the card sits inboard, not flush right),
   left column 50%, quote card 366px.
   --------------------------------------------------------------------------- */
.bbh-hero {
  position: relative; overflow: hidden; display: flex; align-items: stretch;
  padding: clamp(28px, 4vh, 56px) var(--pad-x);
  /* Full height below the header. svh (not vh) so mobile browsers don't overshoot
     by the height of a collapsing URL bar. --bbh-header-h is measured in JS. */
  min-height: calc(100svh - var(--bbh-header-h, 84px));
}
@supports not (height: 100svh) {
  .bbh-hero { min-height: calc(100vh - var(--bbh-header-h, 84px)); }
}
.bbh-hero__bg { position: absolute; inset: 0; z-index: 0; }
.bbh-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.bbh-hero__scrim, .bbh-hero__fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bbh-hero__scrim {
  background: linear-gradient(105deg, rgba(8,8,10,.9) 0%, rgba(8,8,10,.62) 30%,
              rgba(8,8,10,.28) 52%, rgba(8,8,10,.62) 100%);
}
.bbh-hero__fade { background: linear-gradient(to top, rgba(8,8,10,.55) 0%, rgba(8,8,10,0) 28%); }

.bbh-hero__inner {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; gap: clamp(24px, 3vh, 48px);
}

.bbh-hero__row {
  position: relative; z-index: 2; width: 100%; margin: 0 auto;
  /* Capped tighter than the page wrapper: at full --wrap the headline's lines are
     much shorter than its column, so the surplus showed up as a middle gap that
     grew with the viewport. Capping the row centres the pair and holds the gap
     at the designed clamp instead. */
  max-width: 1180px; flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(32px, 4vw, 64px); flex-wrap: wrap; text-align: left;
}
.bbh-hero__left {
  /* Shrink-to-fit rather than grow: a growing column left ~100px of unused width
     inside itself, which read as extra gap. Sized to content, the space between
     the two columns is exactly the flex gap. */
  flex: 0 1 auto; max-width: 620px; min-width: 0; color: #fff;
  display: flex; flex-direction: column; align-items: flex-start;
}
.bbh-hero__title { color: #fff; margin: 0 0 22px; text-wrap: pretty; }
/* Desktop breaks the headline after the first sentence; the stacked layout keeps
   it inline so the centred text doesn't get an awkward orphan line. */
.bbh-hero__title span { color: var(--orange-light); display: block; }
body.is-stacked .bbh-hero__title span { display: inline; }

.bbh-hero__ctas {
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; margin-bottom: 28px;
}
.bbh-hero__call { gap: 10px; box-shadow: 0 8px 24px rgba(241,90,36,.35); }

/* Hand-drawn annotation. Laid out with flex rather than absolute offsets: the
   label's width depends on the Caveat webfont, so a hardcoded arrow position
   overlapped it once the font loaded. The arrow's rotate/scale is a transform,
   which doesn't affect layout, so it overhangs its box exactly as designed. */
.bbh-annotate { display: inline-flex; align-items: center; flex: none; margin: 0 13px; }
.bbh-annotate em {
  font-family: var(--font-accent); font-style: normal; font-weight: 700; font-size: 22px;
  color: #fff; transform: rotate(-3deg); white-space: nowrap;
  /* Sits on a photo, so a soft dark shadow keeps it legible over light patches. */
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.bbh-annotate__arrow {
  flex: none; width: 50px; height: 50px; margin-left: 50px; position: relative; z-index: 5;
  /* Paths use stroke="currentColor", so this one line colours every annotation arrow. */
  color: #F79A5A;
  /* The handoff's 45deg assumed the card sat level with the CTA row. Here the card
     is up and to the right, so the arrow is re-aimed to actually point at it. */
  transform: translateY(-10px) rotate(45deg) scaleX(1.6) scaleY(-1.6);
}

.bbh-rating--mobile { display: none; margin: 0 0 16px; }
.bbh-rating__inner {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px; padding: 10px 16px;
}
.bbh-rating__score { font-weight: 800; font-size: 20px; color: #fff; }
.bbh-rating__stars { color: var(--orange-light); font-size: 14px; }
.bbh-rating__count { color: var(--grey-footer); font-weight: 500; font-size: 13px; }

/* Selling points along the bottom of the hero — fills what was dead space and
   keeps the key reasons-to-buy above the fold. */
.bbh-usps {
  list-style: none; margin: auto auto 0; padding: 0; max-width: 1180px; width: 100%;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 26px;
}
.bbh-usps li {
  display: inline-flex; align-items: center; gap: 9px;
  color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.bbh-usps svg { flex: none; color: var(--orange-light); }

body.is-stacked .bbh-usps { justify-content: center; gap: 10px 20px; }
@media (max-width: 700px) {
  .bbh-usps { justify-content: flex-start; gap: 8px 18px; }
  .bbh-usps li { font-size: 13px; }
}

/* Instant quote card */
.bbh-quote-card {
  /* The handoff sets min-width:41% AND max-width:40% — contradictory, and min-width
     wins, which blew the card out to 558px. README states the intent as 366px / ~40%. */
  flex: 0 0 41%; width: 41%; min-width: 320px; max-width: 520px;
  position: relative; z-index: 2;
  background: #fff; border-radius: var(--r-card); padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-card);
}
.bbh-quote-card__title {
  font-size: clamp(24px, 2.6vw, 28px); font-weight: 800; color: var(--ink);
  letter-spacing: -.5px; margin: 0 0 14px; text-align: center;
}
.bbh-quote-card__badge {
  display: flex; width: fit-content; align-items: center; gap: 8px;
  background: linear-gradient(100deg, #F15A24, #FF7A3D); color: #fff;
  border-radius: var(--r-pill); padding: 9px 16px;
  font-size: 13px; font-weight: 700; margin: 0 auto 20px;
}
.bbh-quote-form__label {
  display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px;
}
.bbh-quote-form__field { position: relative; margin-bottom: 16px; }
.bbh-quote-form__field svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
.bbh-quote-form__field input {
  width: 100%; padding: 16px 16px 16px 44px; border-radius: var(--r-btn);
  border: 1.5px solid var(--border); background: var(--surface);
  font-size: 16px; font-family: inherit; color: #222;
}
.bbh-quote-form__field input:focus { outline: none; border-color: var(--orange); background: #fff; }
.bbh-quote-form__submit {
  width: 100%; background: var(--orange); color: #fff; font-weight: 700; font-size: 17px;
  padding: 17px; border: 0; border-radius: var(--r-btn); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 10px 24px rgba(241,90,36,.3); font-family: var(--font-body);
  transition: background .15s ease;
}
.bbh-quote-form__submit:hover:not(:disabled) { background: var(--orange-dark); }
.bbh-quote-form__submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.bbh-quote-form__trust {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 16px 0 0; font-size: 12px; color: var(--grey-fine); font-weight: 500;
}

/* Tightest desktop band: shrink the annotation so it stays beside the call button
   instead of wrapping. Below 980px the stacked layout takes over anyway. */
@media (min-width: 981px) and (max-width: 1120px) {
  .bbh-annotate { margin: 0 6px; }
  .bbh-annotate em { font-size: 18px; }
  .bbh-annotate__arrow { width: 38px; height: 38px; margin-left: 50px; }
  .bbh-hero__call { padding: 15px 22px; font-size: 16px; }
}

/* Stacked layout (<=980px) */
body.is-stacked .bbh-hero__row { max-width: 80vw; justify-content: center; text-align: center; }
body.is-stacked .bbh-hero__left { width: 100%; max-width: 100%; flex-basis: auto; align-items: center; }
body.is-stacked .bbh-hero__ctas { justify-content: center; width: 100%; flex-wrap: wrap; }
body.is-stacked .bbh-quote-card { width: 80vw; max-width: 80vw; min-width: auto; flex: 0 1 auto; }
body.is-stacked .bbh-rating--desktop { display: none; }
body.is-stacked .bbh-rating--mobile { display: block; }
body.is-stacked .bbh-annotate { margin: 4px 0 0; }
body.is-stacked .bbh-annotate__arrow {
  width: 60px; height: 72px; margin-left: 14px;
  transform: rotate(32deg) scaleY(1.2);
}

/* ---------------------------------------------------------------------------
   Home page sections
   --------------------------------------------------------------------------- */
.bbh-split {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; gap: clamp(32px, 4vw, 56px); flex-wrap: wrap; align-items: center;
}
.bbh-split__text { flex: 1 1 420px; min-width: 0; }
.bbh-split__media { flex: 1 1 380px; min-width: 0; }
.bbh-split--reverse .bbh-split__media { order: -1; }
body.is-stacked .bbh-split--reverse .bbh-split__media { order: 0; }
.bbh-split p { color: var(--muted); }
.bbh-section--dark .bbh-split p, .bbh-section--dark p { color: var(--grey-footer); }

.bbh-narrow { max-width: 860px; margin: 0 auto; }
.bbh-centered { text-align: center; }
.bbh-centered p { color: var(--muted); }
.bbh-section--surface .bbh-centered p { color: var(--muted); }

.bbh-btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }

.bbh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.bbh-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-card-sm);
  padding: 28px 26px;
}
.bbh-card h3 { margin: 0 0 10px; }
.bbh-card p { color: var(--muted); margin: 0; }

.bbh-photo-grid { display: grid; gap: 16px; }
.bbh-photo-grid--2 { grid-template-columns: 1fr 1fr; }
.bbh-photo-slot {
  aspect-ratio: 4 / 3; border-radius: var(--r-card-sm);
  background: repeating-linear-gradient(45deg, #f3f3f3 0 12px, #ededed 12px 24px);
  border: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px;
}
.bbh-photo-slot span { font-size: 12px; color: #9A9A9A; font-weight: 500; }

.bbh-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.bbh-section__head h2 { margin: 0; }

.bbh-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bbh-pills li a, .bbh-pills__more {
  display: inline-block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 9px 18px; font-size: 14px; font-weight: 600;
  color: var(--ink);
}
.bbh-pills li a:hover { border-color: var(--orange); color: var(--orange); }
.bbh-pills__more { color: var(--muted-2); font-weight: 500; }

/* Map keeps a fixed ratio so it can't cause layout shift while the iframe loads. */
.bbh-map { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-card-sm); overflow: hidden; }
.bbh-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Bin size chart: a wide infographic, so it must not be cropped to 4:3 like the
   photos. Scrolls inside itself on narrow screens rather than shrinking to
   illegibility or forcing the page to scroll sideways. */
.bbh-sizechart { margin: 28px 0; overflow-x: auto; }
.bbh-sizechart .bbh-photo { aspect-ratio: auto; min-width: 620px; border-radius: var(--r-card-sm); }
.bbh-sizechart figcaption { font-size: 13px; color: var(--muted-2); margin-top: 10px; text-align: center; }

/* Real photography */
.bbh-photo {
  display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 4 / 3; border-radius: var(--r-card-sm);
}
.bbh-photo-grid--2 .bbh-photo { aspect-ratio: 1 / 1; }
.bbh-photo-grid--4 { grid-template-columns: 1fr 1fr; }

/* Stat row (About) */
.bbh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; }
.bbh-stat { text-align: center; padding: 26px 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-card-sm); }
.bbh-stat b { display: block; font-family: var(--font-head); font-weight: 800; font-size: 26px; color: var(--orange); margin-bottom: 4px; }
.bbh-stat span { font-size: 14px; color: var(--muted); }

/* Waste type cards */
.bbh-waste { display: grid; gap: 24px; }
.bbh-waste__card { border: 1px solid var(--border); border-radius: var(--r-card-sm); padding: 26px; }
.bbh-waste__card > h3 { margin: 0 0 4px; }
.bbh-waste__note { color: var(--muted-2); font-size: 14px; margin: 0 0 18px; }
.bbh-waste__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bbh-waste__col h4 { font-size: 12px; letter-spacing: .6px; text-transform: uppercase; margin: 0 0 10px; font-family: var(--font-body); }
.bbh-waste__col--yes h4 { color: var(--success); }
.bbh-waste__col--no h4 { color: var(--danger); }
.bbh-waste__col ul { margin: 0; padding-left: 18px; }
.bbh-waste__col li { color: var(--muted); font-size: 15px; margin-bottom: 6px; }

/* Suburb groups (Service Areas) */
.bbh-area-group { margin-bottom: 34px; }
.bbh-area-group h3 { margin-bottom: 14px; }

/* FAQ accordion */
.bbh-faq { max-width: 860px; margin: 0 auto; }
.bbh-faq__item { border-bottom: 1px solid var(--border); }
.bbh-faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-head); font-weight: 800; font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink); padding: 22px 40px 22px 0; position: relative;
}
.bbh-faq__q::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.bbh-faq__item.is-open .bbh-faq__q::after { transform: translateY(-30%) rotate(-135deg); }
.bbh-faq__a { display: none; padding: 0 0 22px; color: var(--muted); }
.bbh-faq__item.is-open .bbh-faq__a { display: block; }

/* Contact */
.bbh-contact { display: flex; gap: clamp(28px, 4vw, 56px); flex-wrap: wrap; align-items: flex-start; max-width: var(--wrap); margin: 0 auto; }
.bbh-contact__info { flex: 1 1 380px; min-width: 0; }
.bbh-contact__form { flex: 0 1 440px; min-width: 300px; }
.bbh-info-card { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--r-card-sm); padding: 18px 20px; margin-bottom: 14px; }
.bbh-info-card b { display: block; font-size: 13px; color: var(--muted-2); font-weight: 600; margin-bottom: 2px; }
.bbh-info-card__icon { flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(241,90,36,.1); display: flex; align-items: center; justify-content: center; }

/* CTA banner */
.bbh-cta-banner { text-align: center; }
.bbh-cta-banner h2 { margin-bottom: 18px; }

/* ---------------------------------------------------------------------------
   Responsive. The 980px JS breakpoint drives the nav/hero; these handle the
   content grids at smaller sizes.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .bbh-waste__cols { grid-template-columns: 1fr; gap: 18px; }
  .bbh-section__head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 700px) {
  h1 { letter-spacing: -1px; }
  .bbh-split { gap: 28px; }
  .bbh-split__text, .bbh-split__media { flex: 1 1 100%; }
  .bbh-btn { width: 100%; }
  .bbh-btn-row { flex-direction: column; align-items: stretch; }
  .bbh-contact__form { flex: 1 1 100%; min-width: 0; }
  .bbh-footer__cols { gap: 32px; }
  .bbh-footer__bottom { flex-direction: column; gap: 12px; }
}
@media (max-width: 480px) {
  .bbh-photo-grid--2 { grid-template-columns: 1fr; }
  .bbh-stats { grid-template-columns: 1fr 1fr; }
  .bbh-quote-card { padding: 22px 18px; }
}

/* Map placeholder shown until the embed is loaded */
.bbh-map__load {
  width: 100%; height: 100%; border: 1px dashed var(--border); border-radius: var(--r-card-sm);
  background: var(--surface); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; font-family: var(--font-body);
}
.bbh-map__load span { font-weight: 700; color: var(--orange); font-size: 15px; }
.bbh-map__load small { color: var(--muted-2); font-size: 13px; text-align: center; padding: 0 16px; }
.bbh-map__load:hover { background: #fff; border-color: var(--orange); }