/* ===================================================
   James Junk Removal — stylesheet
   Brand: #638D0B green / #0A0A0A black / #333333 dark gray
          #D9D9D9 light gray / #FFFFFF white
   Fonts: Bebas Neue (display), Montserrat (body),
          Permanent Marker (brush accent)
=================================================== */

:root {
  --green: #638D0B;
  --green-dark: #4e7009;
  --green-light: #7bab12;
  --black: #0A0A0A;
  --gray-900: #1a1a1a;
  --gray-700: #333333;
  --gray-300: #D9D9D9;
  --white: #FFFFFF;
  --cream: #fafaf7;

  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --font-brush: 'Permanent Marker', cursive;

  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.08);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.12);
  --container-w: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--gray-700);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: 0.5px;
  line-height: 1.05;
  color: var(--black);
}

h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
h3 { font-size: 1.35rem; }

.text-green { color: var(--green); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
  color: var(--green);
  margin-bottom: 10px;
}

.section { padding: 96px 0; }

.section-head { max-width: 620px; margin-bottom: 56px; }
.section-head.section-head-light h2,
.section-head.section-head-light .eyebrow { color: var(--white); }
.section-head-light .eyebrow { color: var(--green-light); }
.section-head-center { max-width: 700px; margin-left: auto; margin-right: auto; text-align: center; }

.section-sub { color: var(--gray-700); font-size: 1.05rem; margin-top: 12px; }
.section-sub-center { max-width: 560px; margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--green); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-dark); box-shadow: var(--shadow-md); }

.btn-outline { border-color: var(--white); color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--black); }

.btn-dark { background: var(--black); color: var(--white); }
.btn-dark:hover { background: var(--gray-900); }

.btn-outline-dark { border-color: var(--black); color: var(--black); background: transparent; }
.btn-outline-dark:hover { background: var(--black); color: var(--white); }

.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-white { background: var(--white); color: var(--green-dark); }
.btn-white:hover { background: var(--green-light); color: var(--white); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { height: 46px; width: 46px; object-fit: contain; border-radius: 50%; }
.brand-text {
  font-family: var(--font-display);
  color: var(--white);
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.5px;
}
.brand-text em { display: block; font-style: normal; color: var(--green-light); font-size: 0.9rem; }

.main-nav { display: flex; gap: 26px; }
.main-nav a {
  color: var(--gray-300);
  font-weight: 600;
  font-size: 0.92rem;
  transition: color 0.15s ease;
}
.main-nav a:hover { color: var(--green-light); }

.header-cta { display: flex; align-items: center; gap: 22px; }
.phone-link { display: flex; align-items: center; gap: 8px; color: var(--white); font-weight: 700; font-size: 0.92rem; }
.phone-link svg { width: 18px; height: 18px; color: var(--green-light); }
.phone-link:hover { color: var(--green-light); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 26px; height: 2.5px; background: var(--white); border-radius: 2px; transition: 0.2s; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  padding: 130px 0 100px;
}

.hero-bg-photo {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/hero-crew.jpg');
  background-size: cover;
  background-position: 58% 30%;
  filter: contrast(1.04) saturate(1.06);
  z-index: 0;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.9) 24%, rgba(10,10,10,0.55) 42%, rgba(10,10,10,0.18) 60%, rgba(10,10,10,0.05) 100%);
  z-index: 1;
}

.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 320px;
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.7) 55%, var(--black) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero-bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 85% 15%, rgba(99,141,11,0.3) 0%, transparent 40%);
  z-index: 1;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
}

.hero-copy { max-width: 560px; }

.hero-heading {
  display: inline-block;
  text-align: center;
}

.hero-copy .eyebrow { text-align: center; }

.hero-copy h1 {
  font-size: clamp(2.6rem, 5vw, 4rem);
  color: var(--white);
  margin-bottom: 18px;
  text-align: center;
}

.hero-sub {
  color: var(--gray-300);
  font-size: 1.1rem;
  max-width: 520px;
  margin-bottom: 32px;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 34px; }

.hero-trust { display: flex; flex-wrap: wrap; gap: 24px; }
.hero-trust li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; color: var(--gray-300); }
.hero-trust svg { width: 18px; height: 18px; color: var(--green-light); flex-shrink: 0; }


/* ---------- Services ---------- */
.services .section-head .eyebrow {
  display: inline-block;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-light) 100%);
  color: var(--white);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  box-shadow: 0 4px 14px rgba(99,141,11,0.35);
  margin-bottom: 16px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.service-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 32px 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--green);
}

.service-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(99,141,11,0.1);
  color: var(--green);
  margin-bottom: 18px;
}
.service-icon svg { width: 28px; height: 28px; }

.service-card h3 { margin-bottom: 8px; font-size: 1.2rem; }
.service-card p { font-size: 0.92rem; color: var(--gray-700); }

/* Services intro feature — heading + selling points paired with the promo video */
.services-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 72px;
}
.services-feature .section-head { margin-bottom: 0; max-width: 520px; }

.feature-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 28px;
}
.feature-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--gray-700);
}
.feature-points svg { width: 20px; height: 20px; color: var(--green); flex-shrink: 0; }

/* ---------- Bio / Meet the crew ---------- */
.bio {
  background: var(--cream);
  position: relative;
  /* Must stay clear of the 150px fade in .bio::before — the heading is green
     and turns unreadable over the dark end of it. The extra 40px is breathing
     room so it doesn't sit right on the boundary either. */
  padding-top: 190px;
}
.bio::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(180deg,
    #0a0a0a 0%,
    rgba(10,10,10,0.92) 14%,
    rgba(10,10,10,0.7) 32%,
    rgba(10,10,10,0.4) 54%,
    rgba(10,10,10,0.16) 74%,
    rgba(10,10,10,0.04) 88%,
    rgba(10,10,10,0) 100%);
  pointer-events: none;
}
.bio .container { position: relative; }

/* Bebas Neue only ships one weight, so "bolder" here means bigger plus a
   slight stroke thickening rather than a font-weight bump. */
.bio .section-head h2 {
  font-size: clamp(2.5rem, 5.5vw, 3.6rem);
  letter-spacing: 1.5px;
  -webkit-text-stroke: 0.7px currentColor;
}

.bio-copy { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.bio-copy p { color: var(--gray-700); font-size: 1.03rem; margin-bottom: 16px; }

.bio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.bio-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gray-300);
  box-shadow: var(--shadow-sm);
}
.bio-photo img,
.bio-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.placeholder-photo {
  aspect-ratio: 4 / 5;
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--gray-700);
  text-align: center;
  padding: 16px;
}
.placeholder-photo svg { width: 34px; height: 34px; color: var(--green); }
.placeholder-photo span { font-size: 0.82rem; font-weight: 600; }

.placeholder-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--gray-700);
  opacity: 0.7;
  margin-top: 16px;
}
.placeholder-note code { font-family: var(--font-body); font-weight: 700; }

/* ---------- Before & After Gallery ---------- */
.gallery { background: var(--white); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.gallery-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.gallery-photo {
  position: relative;
  aspect-ratio: 4 / 3;
}
.gallery-photo img,
.gallery-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}

.gallery-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  background: var(--gray-700);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 999px;
}
.gallery-tag-after { background: var(--green); }

/* ---------- Reviews ---------- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.review-card {
  background: var(--cream);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
}

.stars { color: var(--green); font-size: 1.05rem; letter-spacing: 3px; margin-bottom: 10px; }
.review-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.review-card p { color: var(--gray-700); font-size: 0.92rem; margin-bottom: 18px; }

.review-author-row { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.review-author-row div { display: flex; flex-direction: column; line-height: 1.3; }
.review-author { font-weight: 700; color: var(--black); font-size: 0.9rem; }
.review-loc { font-size: 0.78rem; color: var(--gray-700); opacity: 0.75; }

.reviews-cta { text-align: center; margin-top: 44px; }

/* ---------- Areas We Service ---------- */
.areas { background: var(--cream); padding-bottom: 40px; }

.areas-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  max-width: 940px;
  margin: 0 auto;
}

.area-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-700);
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.area-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
.area-chip:hover {
  border-color: var(--green);
  color: var(--black);
  transform: translateY(-2px);
}

.areas-wider {
  max-width: 940px;
  margin: 36px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--gray-300);
}
.areas-wider-label {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted-foreground, #5a5450);
  margin-bottom: 18px;
}
.areas-list-sm .area-chip { font-size: 0.85rem; padding: 8px 15px; }

.areas-note {
  text-align: center;
  margin-top: 36px;
  color: var(--gray-700);
  font-size: 0.95rem;
}
.areas-note a { color: var(--green); font-weight: 700; }
.areas-note a:hover { text-decoration: underline; }

/* ---------- FAQ ---------- */
.faq { background: var(--cream); padding-top: 48px; }
.faq-inner { max-width: 760px; margin: 0 auto; }

.accordion { margin-top: 32px; border-top: 1px solid var(--gray-300); }
.accordion-item { border-bottom: 1px solid var(--gray-300); }

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 18px 2px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--black);
  text-align: left;
}
.accordion-trigger svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; transition: transform 0.2s ease; }
.accordion-item.is-open .accordion-trigger svg { transform: rotate(180deg); }

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.accordion-item.is-open .accordion-panel { max-height: 240px; }
.accordion-panel p { padding: 0 2px 18px; color: var(--gray-700); font-size: 0.92rem; }

.faq-more {
  text-align: center;
  margin-top: 32px;
  color: var(--gray-700);
  font-size: 0.95rem;
}
.faq-more a { color: var(--green); font-weight: 700; }
.faq-more a:hover { text-decoration: underline; }

/* ---------- CTA + Quote form ---------- */
.cta-quote { background: var(--black); position: relative; overflow: hidden; }
.cta-quote::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 50%, rgba(99,141,11,0.2) 0%, transparent 42%),
    radial-gradient(circle at 85% 62%, rgba(99,141,11,0.14) 0%, transparent 42%);
  pointer-events: none;
}
.cta-quote .container { position: relative; z-index: 1; }
.cta-quote .section-head h2 { color: var(--white); }
.cta-quote .section-head .section-sub { color: var(--gray-300); }
.cta-quote .eyebrow { color: var(--green-light); }

.quote-form {
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
}

.quote-form-title { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.5px; margin-bottom: 4px; }
.quote-form-title-sm { font-size: 1.15rem; margin-top: 8px; margin-bottom: 16px; }
.quote-form-sub { color: var(--gray-700); font-size: 0.9rem; margin-bottom: 24px; }

.dropzone {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  margin-bottom: 12px;
  color: var(--gray-700);
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--green); background: rgba(99,141,11,0.05); }
.dropzone svg { width: 30px; height: 30px; color: var(--green); margin: 0 auto 10px; }
.dropzone p { font-size: 0.88rem; }

.photo-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.photo-preview-item {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--gray-300);
}
.photo-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(10,10,10,0.75);
  color: var(--white);
  border: none;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropzone.is-busy { opacity: 0.6; pointer-events: none; }

.photo-note {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green-dark);
  margin: -10px 0 18px;
  min-height: 1.2em;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 0.75rem;
  color: var(--gray-700);
  opacity: 0.7;
  margin-top: 4px;
}

.pill-group { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-700);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.pill:hover { border-color: var(--green); }
.pill.is-active { background: var(--green); border-color: var(--green); color: var(--white); }

.label-optional { text-transform: none; font-weight: 500; opacity: 0.7; letter-spacing: 0; }

/* ---------- Contact / form fields (shared) ---------- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form-field { margin-bottom: 18px; }
.form-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  color: var(--gray-700);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--white);
  color: var(--gray-700);
  transition: border-color 0.15s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green);
}

.form-field textarea { resize: vertical; }

.form-status {
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 1.2em;
}
.form-status.success { color: var(--green-dark); }
.form-status.error { color: #b3261e; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--gray-300); }

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 64px 0 40px;
}

.footer-brand img { width: 60px; height: 60px; border-radius: 50%; margin-bottom: 14px; }
.footer-brand p { font-family: var(--font-brush); color: var(--green-light); font-size: 1.1rem; }
.footer-brand .footer-desc { font-family: var(--font-body); color: var(--gray-300); font-size: 0.85rem; margin-top: 8px; }

.footer-col h4 {
  font-family: var(--font-body);
  color: var(--white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 0.9rem; }
.footer-col a:hover { color: var(--green-light); }

.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.footer-social svg { width: 17px; height: 17px; }
.footer-social a:hover { border-color: var(--green-light); color: var(--green-light); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); }
.footer-bottom-inner {
  display: flex;
  justify-content: center;
  padding: 22px 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
}

/* ---------- Showcase video ---------- */
.showcase-video {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 460px;
}
.showcase-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-sound-toggle {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(10,10,10,0.68);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease;
}
.video-sound-toggle:hover { background: var(--green); }
.video-sound-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
.video-sound-toggle .icon-unmuted { display: none; }
.video-sound-toggle.is-on .icon-muted { display: none; }
.video-sound-toggle.is-on .icon-unmuted { display: block; }

/* ---------- Sticky "Get My Price" CTA ---------- */
/* Hidden at the top of the page, fades in once the visitor starts scrolling,
   and gets out of the way again when the quote form itself is on screen so it
   never covers the submit button. */
.sticky-cta {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  box-shadow: 0 8px 26px rgba(0,0,0,0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.15s ease;
}
.sticky-cta.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.sticky-cta:hover { background: var(--green-dark); }
.sticky-cta svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Full-width bar on phones — easier to hit with a thumb. */
@media (max-width: 600px) {
  .sticky-cta {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 16px 20px;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: opacity 0.01s linear; transform: none; }
  .sticky-cta.is-visible { transform: none; }
}

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* =========================================================
   Blog
========================================================= */
.blog-hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  padding: 120px 0 70px;
  text-align: center;
}
.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(99,141,11,0.32) 0%, transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(99,141,11,0.18) 0%, transparent 45%);
  pointer-events: none;
}
.blog-hero .container { position: relative; z-index: 1; }
.blog-hero .eyebrow { color: var(--green-light); }
.blog-hero h1 {
  color: var(--white);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 16px;
}
.blog-hero p {
  color: var(--gray-300);
  font-size: 1.1rem;
  max-width: 620px;
  margin: 0 auto;
}
/* Fade the dark blog hero into the light list below, matching the homepage style. */
.blog-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, var(--black) 100%);
  z-index: 1;
  pointer-events: none;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--green);
}

.blog-card-media {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  color: var(--white);
  overflow: hidden;
}
.blog-card-media svg { width: 56px; height: 56px; }
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 26px;
  flex-grow: 1;
}

.blog-tag {
  display: inline-block;
  align-self: flex-start;
  background: rgba(99,141,11,0.12);
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 12px;
  border-radius: 999px;
}
.blog-card-body h2 { font-size: 1.3rem; line-height: 1.1; }
.blog-card-body p { font-size: 0.92rem; color: var(--gray-700); }
.blog-readmore {
  margin-top: auto;
  padding-top: 6px;
  color: var(--green);
  font-weight: 700;
  font-size: 0.9rem;
}

/* ---------- Article page ---------- */
.article { padding: 56px 0 88px; }
.article-container { max-width: 760px; }

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 28px;
}
.article-back:hover { text-decoration: underline; }

.article-header { margin-bottom: 36px; }
.article-header .blog-tag { margin-bottom: 16px; }
.article-header h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  margin-bottom: 14px;
}
.article-meta { color: var(--muted-foreground, #5a5450); font-size: 0.9rem; font-weight: 600; }

.article-body { font-size: 1.06rem; color: var(--gray-700); }
.article-body > p { margin-bottom: 20px; }
.article-body h2 {
  font-family: var(--font-display);
  color: var(--black);
  font-size: 1.7rem;
  letter-spacing: 0.5px;
  margin: 38px 0 14px;
}
.article-body h3 {
  color: var(--black);
  font-size: 1.15rem;
  margin: 26px 0 10px;
}
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 4px; }
.article-body li {
  position: relative;
  list-style: none;
  padding-left: 26px;
  margin-bottom: 10px;
}
.article-body ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}
.article-body ol { counter-reset: steps; }
.article-body ol li { counter-increment: steps; }
.article-body ol li::before {
  content: counter(steps);
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-body strong { color: var(--black); }
.article-body a { color: var(--green); font-weight: 600; text-decoration: underline; }

.article-note {
  background: var(--cream);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 0.98rem;
}

.article-cta {
  margin-top: 44px;
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  text-align: center;
}
.article-cta h3 { color: var(--white); font-size: 1.6rem; margin-bottom: 8px; }
.article-cta p { color: var(--gray-300); margin-bottom: 22px; }
.article-cta .btn-primary {
  background: var(--white);
  color: var(--green-dark);
}
.article-cta .btn-primary:hover {
  background: var(--green-light);
  color: var(--white);
}

/* ---------- Area (suburb) pages ---------- */
.area-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
}

.area-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  justify-content: center;
  margin-top: 26px;
}
.area-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--gray-300);
}
.area-trust svg { width: 17px; height: 17px; color: var(--green-light); flex-shrink: 0; }

/* Nearby-suburb chips sit inside .article-body, which underlines and greens
   every link — undo that so they still read as chips. */
.area-nearby { justify-content: flex-start; margin: 0 0 20px; }
.article-body .area-chip {
  color: var(--gray-700);
  font-weight: 600;
  text-decoration: none;
}
.article-body .area-chip:hover { color: var(--black); border-color: var(--green); }

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1024px) {
  .hero { padding: 110px 0 80px; }
  .hero-copy { max-width: 100%; text-align: center; margin: 0 auto; }
  .hero-copy p, .hero-actions, .hero-trust { justify-content: center; margin-left: auto; margin-right: auto; }

  /* The crew are in the middle-right of the frame. On a narrow portrait crop
     the default 58%/30% lands on the rooflines, so recentre on the two of them. */
  .hero-bg-photo { background-position: 52% 42%; }

  /* Was 0.8 -> 0.96 black, which buried the photo entirely on a phone. Keep the
     top dark enough for the headline, then let the crew actually show through. */
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(10,10,10,0.92) 0%,
      rgba(10,10,10,0.86) 40%,
      rgba(10,10,10,0.66) 72%,
      rgba(10,10,10,0.5) 100%);
  }
  /* Shorter bottom fade so it blends into the next section without blacking
     out the lower third of the photo. */
  .hero::after { height: 150px; }
  .hero-actions { justify-content: center; }
  .hero-trust { justify-content: center; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .bio-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid-6 { grid-template-columns: repeat(2, 1fr); }

  .services-feature { grid-template-columns: 1fr; gap: 34px; text-align: center; }
  .services-feature .section-head { max-width: 620px; margin-left: auto; margin-right: auto; }
  .feature-points { align-items: center; }
  .showcase-video { max-width: 420px; margin-left: auto; margin-right: auto; }

  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* Collapse to hamburger early enough that the nav items never crowd the bar. */
@media (max-width: 960px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; order: 3; }
  .brand { order: 1; }

  /* Keep the phone number tappable in the bar itself rather than burying it
     behind the hamburger — most visitors are on a phone and calling is the
     fastest way for them to book. The "Get My Price" button stays in the menu. */
  .header-cta { display: flex; order: 2; gap: 12px; margin-left: auto; margin-right: 14px; }
  .header-cta .btn { display: none; }
  .phone-link { font-size: 0.86rem; white-space: nowrap; }
  .phone-link svg { width: 16px; }

  /* Expanded mobile menu — links + CTA flow naturally, so any number of items fits. */
  .site-header.nav-open .header-inner {
    flex-wrap: wrap;
    height: auto;
    align-items: center;
    row-gap: 4px;
    padding-bottom: 22px;
  }
  .site-header.nav-open .main-nav {
    order: 3;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    gap: 4px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .site-header.nav-open .main-nav a {
    padding: 12px 4px;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .site-header.nav-open .header-cta {
    order: 4;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-basis: 100%;
    gap: 14px;
    margin: 18px 0 0;
  }
  .site-header.nav-open .phone-link { justify-content: center; font-size: 1.05rem; }
  /* Button is hidden in the collapsed bar — bring it back inside the open menu. */
  .site-header.nav-open .header-cta .btn { display: inline-flex; width: 100%; }
}

/* Very narrow phones: drop the "Call" word so the logo, number and hamburger
   all still fit on one line. The number itself stays visible. */
@media (max-width: 430px) {
  .phone-link .phone-label { display: none; }
  .brand-logo { height: 40px; width: 40px; }
  .brand-text { font-size: 1.15rem; }
  .header-cta { margin-right: 8px; }
}

@media (max-width: 860px) {
  .reviews-grid-6 { grid-template-columns: 1fr; }
  .quote-form { padding: 28px 22px; }
}

/* Phones: the hero copy is ~550px tall, which is most of a phone screen — so
   there is no way to overlay it on the photo without covering the crew. Give
   the photo its own band across the top instead and run the copy underneath
   on solid dark. Text can't reach their faces because it starts below the
   band. Stops are in px, not %, so the fades track the band rather than the
   hero's content-dependent height. */
@media (max-width: 700px) {
  .hero { padding: 0 0 60px; }

  .hero-bg-photo {
    bottom: auto;
    height: 330px;
    background-size: auto 190%;
    background-position: 52% 42%;
    /* Feather the bottom of the photo into the black rather than cutting it
       off with a hard horizontal line. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
  }

  /* The green radial glow sits at 85% 15%, which on a phone lands right on
     top of the photo band and hazes the crew over in green. Kill it here —
     it still does its job on wider screens where it sits beside the copy. */
  .hero-bg-pattern { display: none; }

  /* Darker under the sticky header for the logo, then as close to clear as
     possible over the crew so the photo reads sharply. */
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(10,10,10,0.60) 0px,
      rgba(10,10,10,0.04) 92px,
      rgba(10,10,10,0.04) 250px,
      rgba(10,10,10,0.00) 340px);
  }

  .hero-inner { padding-top: 352px; }

  /* The 320px bottom fade existed to blend into the next section; with the
     photo now confined to a band it just darkens empty space. */
  .hero::after { display: none; }
}

@media (max-width: 600px) {
  .section { padding: 64px 0; }

  /* .section's 64px above would otherwise win over .bio's padding-top (same
     specificity, later in the file) and drop the green heading into the dark
     part of the fade. Shorten the fade a little too, so clearing it doesn't
     leave a slab of empty cream on a small screen. */
  .bio { padding-top: 150px; }
  .bio::before { height: 110px; }
  .services-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .bio-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; gap: 6px; text-align: center; }
}