/* ==========================================================================
   CJ's Heating and Air — Site Styles (Clean white / red-accent redesign)
   Modeled on the layout conventions of a real local HVAC business site.
   ========================================================================== */

/* -------- Design tokens -------- */
:root {
  --white: #FFFFFF;
  --gray-50: #FAFBFC;
  --gray-100: #F4F6F8;
  --gray-150: #EDEFF2;
  --gray-200: #E2E6EB;
  --gray-300: #CBD2DA;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;

  --navy: #0F172A;
  --navy-800: #1A2238;
  --navy-700: #1E293B;

  --red: #C8102E;
  --red-600: #B00B26;
  --red-700: #95091F;
  --red-soft: rgba(200, 16, 46, 0.92);

  --tan: #C2B49A;       /* tiny accents only */
  --tan-deep: #A8997D;

  --font-display: "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Open Sans", "Segoe UI", Roboto, Arial, sans-serif;

  --container: 1240px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 18px -8px rgba(15, 23, 42, 0.18);
  --shadow-lg: 0 24px 50px -20px rgba(15, 23, 42, 0.25);

  --header-top-h: 84px;
  --header-nav-h: 52px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Make in-page anchors land below the fixed header */
  scroll-padding-top: 140px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--navy-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* Reserve room for the fixed site header */
  padding-top: 140px;
}

@media (max-width: 980px) {
  body { padding-top: 84px; }
  html { scroll-padding-top: 84px; }
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-700); }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--red); color: var(--white);
  padding: 0.75rem 1rem;
  font-weight: 700;
  z-index: 200;
}
.skip-link:focus { left: 1rem; top: 1rem; outline: 2px solid var(--navy); }

/* -------- Layout helpers -------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding: clamp(3rem, 6vw, 5rem) 0; }
.section--gray { background: var(--gray-50); }
.section--navy {
  background: var(--navy);
  color: var(--white);
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.75rem;
}
.section--navy .eyebrow { color: var(--tan); }

.section-head { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; }
.section-head--left { margin: 0 0 2.5rem; text-align: left; }

.lede {
  font-size: 1.1rem;
  color: var(--gray-600);
  max-width: 62ch;
}
.section--navy .lede { color: rgba(255, 255, 255, 0.85); }

/* Thin red accent under headings */
.accent-bar {
  display: inline-block;
  width: 56px;
  height: 3px;
  background: var(--red);
  margin: 0.25rem 0 1rem;
}
.section-head .accent-bar { margin-left: auto; margin-right: auto; display: block; }

/* -------- Buttons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.4rem;
  background: var(--red);
  color: var(--white);
  border: 2px solid var(--red);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible {
  background: var(--red-700);
  border-color: var(--red-700);
  color: var(--white);
  transform: translateY(-1px);
  outline: none;
}
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.25); }

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

.btn--navy {
  background: var(--navy);
  border-color: var(--navy);
}
.btn--navy:hover { background: var(--navy-800); border-color: var(--navy-800); }

.btn--white {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}
.btn--white:hover { background: var(--gray-100); color: var(--navy); border-color: var(--gray-100); }

.btn--lg { font-size: 1rem; padding: 1rem 1.7rem; }

.btn .icon { width: 1.05em; height: 1.05em; fill: currentColor; }

/* -------- Header -------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--gray-200);
}

.header-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-top-h);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  overflow: hidden;
  max-height: 200px;
  transition: max-height 240ms ease, padding 240ms ease, opacity 200ms ease;
}

/* When the user has scrolled past the hero, collapse the top bar so
   only the nav row stays pinned at the top of the viewport. */
.site-header.is-scrolled .header-top {
  max-height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
  border-bottom: 0;
}

/* Brand block */
.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--navy);
}
.brand img {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: block;
}
.brand-text { line-height: 1.15; }
.brand-text .brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--navy);
  letter-spacing: -0.005em;
  display: block;
}
.brand-text .brand-tag {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-top: 0.2rem;
  display: block;
}

/* Centered phone block */
.header-phone {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  line-height: 1.1;
}
.header-phone .phone-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}
.header-phone .phone-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--red);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: -0.01em;
}
.header-phone .phone-number:hover { color: var(--red-700); }
.header-phone .phone-number svg { width: 1.05em; height: 1.05em; fill: currentColor; }

/* Right CTA */
.header-cta {
  justify-self: end;
}

/* Bottom nav row */
.header-nav-row {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
}
.header-nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-nav-h);
}
.primary-nav ul {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  padding: 0.85rem 0.25rem;
  border-bottom: 2px solid transparent;
  transition: color 140ms, border-color 140ms;
  display: inline-block;
}
.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* Hamburger (mobile only) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--navy);
  border-radius: var(--radius);
  margin-left: 0.5rem;
}
.nav-toggle:hover { background: var(--gray-100); }
.nav-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  position: relative;
}
.nav-toggle .bar::before,
.nav-toggle .bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--navy);
}
.nav-toggle .bar::before { top: -7px; }
.nav-toggle .bar::after { top: 7px; }

.mobile-nav {
  display: none;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0.5rem 0; }
.mobile-nav a {
  display: block;
  padding: 0.95rem var(--gutter);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-150);
}
.mobile-nav a:hover,
.mobile-nav a[aria-current="page"] { color: var(--red); background: var(--gray-50); }
.mobile-nav .mobile-cta {
  display: block;
  margin: 0.75rem var(--gutter);
  text-align: center;
  background: var(--red);
  color: var(--white);
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  font-weight: 700;
}

@media (max-width: 980px) {
  .header-top { grid-template-columns: auto 1fr auto; }
  .header-cta { display: none; }
  .header-nav-row { display: none; }
  .primary-nav { display: none; }
  .header-phone .phone-label { display: none; }
  .header-phone { align-items: flex-end; }
}
@media (min-width: 981px) {
  .nav-toggle { display: none; }
}

/* -------- Hero -------- */
.hero {
  position: relative;
  background: var(--navy);
  /* Hero fills the visible viewport on landing (viewport minus fixed header).
     The panels are absolutely positioned at the bottom so their bottom edge
     aligns with the bottom of the screen. `dvh` tracks the dynamic viewport
     so mobile browser chrome (address bar) auto-hiding doesn't reveal the
     next section below the hero. The `svh` line is a fallback for older
     browsers that don't support `dvh`. */
  min-height: calc(100svh - 140px);
  min-height: calc(100dvh - 140px);
  overflow: hidden;
}
@media (max-width: 980px) {
  .hero {
    min-height: calc(100svh - 84px);
    min-height: calc(100dvh - 84px);
  }
}
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--navy);
  overflow: hidden;
}
.hero__media .photo { position: absolute; inset: 0; border: 0; }
.hero__media .photo .placeholder {
  background:
    linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 50%, var(--navy-800) 100%);
}
.hero__media .photo .placeholder::before { content: ""; }
.hero__media .photo .placeholder .label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
  text-transform: none;
  max-width: 32ch;
}
.hero__media .photo .placeholder .filename {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.4rem;
}
.hero__media .photo .placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 24px);
  pointer-events: none;
}

/* Translucent overlay panels — pinned to the bottom of the hero so their
   bottom edge sits at the bottom of the visible viewport on landing. */
.hero__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding-bottom: 0;
}
/* Override the container so the panels stretch edge-to-edge */
.hero__overlay > .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.hero__overlay-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}
@media (min-width: 900px) {
  .hero__overlay-grid { grid-template-columns: 1fr 1fr; }
}

.hero-panel {
  padding: 0.9rem clamp(1rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-panel--red {
  /* Coral/salmon red to match the reference screenshot. Kept at 40%
     opacity so the photo still shows through. */
  background: rgba(229, 96, 75, 0.4);
  color: var(--white);
}
.hero-panel--red h1 {
  color: var(--white);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin-bottom: 0.2rem;
  line-height: 1.15;
}
.hero-panel--red p {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.92rem;
  margin-bottom: 0.7rem;
  max-width: 60ch;
  line-height: 1.45;
}
.hero-panel--red .hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.hero-panel--red .hero-cta-row .btn { padding: 0.55rem 1.1rem; font-size: 0.85rem; }

.hero-panel--white {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(226, 230, 235, 0.4);
}
.hero-panel--white h2 {
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Coral red to match the reference screenshot. */
  color: #E5604B;
  margin-bottom: 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-panel--white h2 .badge-dot {
  width: 10px; height: 10px; background: #E5604B; border-radius: 50%;
  display: inline-block;
}
.hero-panel--white .sub {
  color: var(--gray-600);
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}
.service-quicklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-quicklist li {
  border-top: 1px solid rgba(226, 230, 235, 0.5);
}
.service-quicklist li:first-child { border-top: 0; }
.service-quicklist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  color: var(--navy);
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 140ms;
}
.service-quicklist a:hover { color: var(--red); }
.service-quicklist a .chev {
  color: var(--gray-500);
  transition: color 140ms, transform 140ms;
}
.service-quicklist a:hover .chev { color: var(--red); transform: translateX(2px); }
.service-quicklist .left {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.service-quicklist .icon-mini {
  width: 22px; height: 22px; flex: 0 0 22px;
  color: var(--red);
}
.service-quicklist .icon-mini svg { width: 100%; height: 100%; fill: currentColor; }

/* -------- Photo container (clean, light) -------- */
.photo {
  position: relative;
  overflow: hidden;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}
.photo .placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--gray-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem;
  color: var(--gray-500);
}
.photo .placeholder::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  margin-bottom: 0.75rem;
  background: var(--gray-200);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 7h3l2-2h6l2 2h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm8 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 7h3l2-2h6l2 2h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm8 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/></svg>") center / contain no-repeat;
}
.photo .placeholder .label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--gray-600);
  letter-spacing: 0.01em;
  line-height: 1.4;
  max-width: 28ch;
}
.photo .placeholder .filename {
  margin-top: 0.4rem;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.72rem;
  color: var(--gray-500);
  opacity: 0.75;
}

.photo--16x9 { aspect-ratio: 16 / 9; }
.photo--4x3  { aspect-ratio: 4 / 3; }
.photo--1x1  { aspect-ratio: 1 / 1; }
.photo--4x5  { aspect-ratio: 4 / 5; }

/* When .photo is used inside the hero, fill it fully. */
.hero__media .photo { aspect-ratio: auto; border-radius: 0; }
.hero__media .photo .placeholder { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 50%, var(--navy-800) 100%); color: rgba(255,255,255,0.85); }
.hero__media .photo .placeholder::before {
  background: rgba(255,255,255,0.4);
  width: 56px; height: 56px;
}

/* -------- Why-Us / value props -------- */
.why-row {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .why-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-row { grid-template-columns: repeat(4, 1fr); } }

.why-item {
  text-align: center;
  padding: 1.5rem 1.25rem;
}
.why-item .icon-circle {
  width: 64px;
  height: 64px;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  background: rgba(200, 16, 46, 0.08);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.why-item .icon-circle svg { width: 30px; height: 30px; fill: currentColor; }
.why-item h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.why-item p { color: var(--gray-600); font-size: 0.95rem; margin: 0; }

/* -------- Services grid (homepage) -------- */
.services-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.service-card:hover, .service-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--gray-300);
  outline: none;
}
.service-card .photo { border: 0; border-radius: 0; aspect-ratio: 16/9; }
.service-card .body {
  padding: 1.25rem 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.service-card .body .head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.1rem;
}
.service-card .body .icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(200, 16, 46, 0.08);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
}
.service-card .body .icon-circle svg { width: 20px; height: 20px; fill: currentColor; }
.service-card h3 { margin: 0; font-size: 1.1rem; color: var(--navy); }
.service-card p { margin: 0; color: var(--gray-600); font-size: 0.95rem; }
.service-card .more {
  margin-top: auto;
  padding-top: 0.75rem;
  color: var(--red);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* -------- About strip -------- */
.about-strip {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .about-strip { grid-template-columns: 1fr 1.1fr; }
}
.about-strip .photo { width: 100%; }

/* The about-cj.png file has black bars baked into the top and bottom
   of the image. The default `object-fit: cover` crop at 4:5 only trims
   ~21% from each side, which isn't enough to clip the bars completely.
   Adding a `transform: scale()` zoom on the image inside the about
   containers crops an extra band around all edges and hides the bars.
   Scoped to the about-section photos only so other portrait photos on
   the site aren't affected. */
.about-strip .photo > img,
.about-camo-photo .photo > img {
  transform: scale(1.3);
  transform-origin: center;
}
.about-strip__body .stat-row {
  display: flex;
  gap: 2rem;
  margin: 1.25rem 0 1.5rem;
  flex-wrap: wrap;
}
.about-strip__body .stat {
  border-left: 3px solid var(--red);
  padding-left: 0.85rem;
}
.about-strip__body .stat .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--navy);
  display: block;
  line-height: 1.1;
}
.about-strip__body .stat .label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* -------- Testimonial -------- */
.testimonial {
  max-width: 800px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  position: relative;
  box-shadow: var(--shadow-md);
}
.testimonial__source {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
  display: inline-block;
  margin-bottom: 0.9rem;
}
.testimonial__stars {
  display: inline-flex;
  gap: 0.18rem;
  color: #F5A623;
  margin-bottom: 1rem;
  vertical-align: middle;
  margin-left: 0.75rem;
}
.testimonial__stars svg { width: 18px; height: 18px; fill: currentColor; }
.testimonial__quote {
  font-size: 1.08rem;
  color: var(--navy-700);
  line-height: 1.7;
  margin: 0 0 1.25rem;
}
.testimonial__attrib {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  font-size: 0.95rem;
}

/* -------- CTA band -------- */
.cta-band {
  background: var(--red);
  color: var(--white);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  text-align: center;
}
.cta-band h2 {
  color: var(--white);
  margin-bottom: 0.4rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.cta-band p {
  color: rgba(255, 255, 255, 0.95);
  margin: 0 auto 1.5rem;
  max-width: 56ch;
}
.cta-band .btn--white { color: var(--red); }

/* -------- Page head (inner pages) -------- */
.page-head {
  background: var(--navy);
  color: var(--white);
  padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(2rem, 4vw, 3rem);
  text-align: center;
  border-bottom: 4px solid var(--red);
}
.page-head h1 {
  color: var(--white);
  margin-bottom: 0.5rem;
}
.page-head p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 60ch;
  margin: 0 auto;
}
.crumbs {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 0.9rem;
}
.crumbs a { color: var(--tan); text-decoration: none; }
.crumbs a:hover { color: var(--white); }
.crumbs span { margin: 0 0.5rem; color: rgba(255,255,255,0.4); }

/* -------- Service detail blocks (services page) -------- */
.service-block {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: 1fr;
  padding: clamp(2rem, 5vw, 3rem) 0;
  border-bottom: 1px solid var(--gray-200);
}
.service-block:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .service-block { grid-template-columns: 1fr 1fr; }
  .service-block:nth-child(even) .service-block__media { order: 2; }
}
.service-block__body h2 { margin-bottom: 0.5rem; }
.service-block__features {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: grid;
  gap: 0.55rem;
}
.service-block__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.97rem;
  color: var(--gray-700);
}
.service-block__features svg {
  width: 18px;
  height: 18px;
  fill: var(--red);
  flex: 0 0 18px;
  margin-top: 4px;
}
.service-block__note {
  font-size: 0.9rem;
  color: var(--gray-500);
  background: var(--gray-50);
  border-left: 3px solid var(--gray-300);
  padding: 0.7rem 0.9rem;
  margin: 1rem 0;
}

/* -------- Service-area page -------- */
.town-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  margin: 1.25rem 0 1.75rem;
  padding: 0;
}
.town-tags .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  background: var(--gray-100);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.town-tags .tag svg { width: 14px; height: 14px; fill: var(--red); }

.map-frame {
  margin-top: 2rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.map-frame iframe {
  width: 100%;
  height: 460px;
  border: 0;
  display: block;
  background: var(--gray-100);
}

/* -------- Contact page -------- */
.contact-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1.3fr; }
}

.contact-info {
  background: var(--navy);
  color: var(--white);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.contact-info h2 { color: var(--white); margin-bottom: 0.25rem; }
.contact-info .lede { color: rgba(255,255,255,0.85); margin-bottom: 0.25rem; }
.contact-info .eyebrow { color: var(--red); }
.contact-info__row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.contact-info__row:first-of-type { border-top: 0; padding-top: 0; }
.contact-info__row .icon-circle {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  background: rgba(200, 16, 46, 0.18);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-info__row .icon-circle svg { width: 20px; height: 20px; fill: currentColor; }
.contact-info__row .label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: block;
  margin-bottom: 0.2rem;
}
.contact-info__row a {
  color: var(--white);
  text-decoration: none;
  font-size: 1.05rem;
  word-break: break-word;
  font-weight: 600;
}
.contact-info__row a:hover { color: var(--red); }
.contact-info__row p { margin: 0; color: rgba(255,255,255,0.85); font-size: 0.95rem; }

.contact-form {
  background: var(--white);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.contact-form .eyebrow { color: var(--red); }
.contact-form h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  color: var(--navy);
  margin-bottom: 0.45rem;
  line-height: 1.2;
}
.contact-form .accent-bar { margin-bottom: 1rem; }
.contact-form .form-note {
  font-family: var(--font-body);
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--gray-600);
  margin-bottom: 1.6rem;
}
.contact-form .form-note a {
  color: var(--red);
  font-weight: 700;
}
.contact-form .form-note a:hover {
  color: var(--red-700);
  text-decoration: underline;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 600px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .full { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}
/* Normalize native form controls so they all use the page font.
   Without `appearance: none`, Windows in particular renders <select>
   (and sometimes <input>/<textarea>) with the OS font, breaking the
   typography of the rest of the form. */
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  color: var(--navy);
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field input::placeholder,
.field textarea::placeholder {
  font-family: var(--font-body);
  color: var(--gray-500);
  opacity: 1;
}
/* Restore a clean dropdown chevron after `appearance: none` strips it. */
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2329344A'><path d='M5.5 7.5L10 12l4.5-4.5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 18px 18px;
  padding-right: 2.5rem;
  cursor: pointer;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--gray-400);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);
}
.field textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}

.contact-form .btn { margin-top: 1.6rem; }

/* When the contact cards sit inside the .section--bottomland camo
   wrapper, the camo section's white-on-dark heading/paragraph rules
   (color: #00BFFF on h2, text-shadow on p, etc.) cascade into the
   cards. These overrides keep each card's intended typography. */
.section--bottomland .contact-form h2 {
  color: var(--navy);
  text-shadow: none;
}
.section--bottomland .contact-form h3,
.section--bottomland .contact-form h4 {
  color: var(--navy);
  text-shadow: none;
}
.section--bottomland .contact-form p,
.section--bottomland .contact-form .form-note {
  color: var(--gray-600);
  text-shadow: none;
}
.section--bottomland .contact-form .eyebrow { color: var(--red); }
.section--bottomland .contact-form .accent-bar { background: var(--red); }
.section--bottomland .contact-form .field label { color: var(--navy); }

.section--bottomland .contact-info h2 {
  color: var(--white);
  text-shadow: none;
}
.section--bottomland .contact-info .lede {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: none;
}
.section--bottomland .contact-info p { text-shadow: none; }
.section--bottomland .contact-info .eyebrow { color: var(--red); }
.section--bottomland .contact-info .accent-bar { background: var(--red); }

/* -------- Footer -------- */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.8);
  padding: clamp(3rem, 5vw, 4rem) 0 1.25rem;
  border-top: 4px solid var(--red);
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.footer-brand { display: flex; flex-direction: column; gap: 1rem; }
.footer-brand img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.footer-brand .name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--white);
}
.footer-brand p { margin: 0; max-width: 36ch; font-size: 0.95rem; }

.footer-col h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--red);
  display: inline-block;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.45rem; }
.footer-col a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 0.95rem;
}
.footer-col a:hover { color: var(--white); }
.footer-col p { margin: 0 0 0.5rem; font-size: 0.94rem; color: rgba(255,255,255,0.8); }

.social-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.social-link {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  color: var(--white);
  text-decoration: none;
  transition: background-color 140ms, color 140ms;
}
.social-link:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.social-link svg { width: 18px; height: 18px; fill: currentColor; }

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}
.footer-bottom a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
}
.footer-bottom a:hover {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.55);
}

/* -------- Privacy / long-form text page -------- */
.prose {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--navy-700);
}
.prose .lede {
  font-size: 1.1rem;
  color: var(--gray-600);
  margin-bottom: 1.5rem;
}
.prose h2 {
  font-size: 1.3rem;
  margin-top: 2.25rem;
  margin-bottom: 0.6rem;
  color: var(--navy);
}
.prose h2:first-of-type { margin-top: 1.5rem; }
.prose p { margin: 0 0 1rem; }
.prose ul {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}
.prose ul li { margin-bottom: 0.35rem; }
.prose a {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.prose a:hover { color: var(--red-700); }
.prose strong { color: var(--navy); }

/* -------- FAQ accordion (homepage) -------- */
.faq {
  max-width: 800px;
  margin: 0 auto;
  border-top: 1px solid var(--gray-200);
}
.faq-item {
  border-bottom: 1px solid var(--gray-200);
  padding: 1.1rem 0;
}
.faq-item summary {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-right: 0.25rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--red);
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.faq-item[open] summary::after {
  content: "\2013"; /* en-dash */
  transform: rotate(0deg);
}
.faq-item summary:hover { color: var(--red); }
.faq-item p {
  margin: 0.7rem 0 0;
  color: var(--gray-600);
  line-height: 1.7;
  font-size: 0.98rem;
}
.faq-item p a {
  color: var(--red);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-item p a:hover { color: var(--red-700); }

/* -------- Scroll reveal (subtle) -------- */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* -------- About Us — Bottomland camo section -------- */
.about-camo {
  background-color: var(--navy);
}
.about-camo__strip {
  height: 22px;
  background-image: url("images/camo-bg.jpg");
  background-size: 360px auto;
  background-repeat: repeat;
}
.about-camo__body {
  position: relative;
  background-image: url("images/camo-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(3rem, 6vw, 5rem) 0;
  overflow: hidden;
}
.about-camo__body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 1;
}
.about-camo__body > * { position: relative; z-index: 2; }

.about-camo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .about-camo-grid {
    grid-template-columns: 55% 45%;
    gap: 0;
  }
}

.about-camo-text { padding-right: clamp(0rem, 4vw, 2.25rem); }
.about-camo-text .about-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.85rem;
}
.about-camo-text h2 {
  color: #00BFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 1.35rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.about-camo-text p {
  color: #FFFFFF;
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.btn-learn-more {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.85rem 1.85rem;
  border: 2px solid #FFFFFF;
  background: transparent;
  color: #CC0000;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.88rem;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
.btn-learn-more:hover,
.btn-learn-more:focus-visible {
  background: #FFFFFF;
  color: #B00B26;
  outline: none;
}

.about-camo-photo { position: relative; }
.about-camo-photo .photo {
  border: 0;
  border-radius: 0;
  aspect-ratio: 4 / 5;
  background: #1a1a1a;
}
.about-camo-photo .photo .placeholder {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  color: rgba(255,255,255,0.85);
}
.about-camo-photo .photo .placeholder::before {
  background: rgba(255,255,255,0.5);
}

.badge-contact {
  position: absolute;
  top: 50%;
  right: -55px;
  transform: translateY(-50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #CC0000;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  box-shadow: 0 14px 30px rgba(0,0,0,0.55);
  border: 4px solid #FFFFFF;
  transition: background-color 160ms ease, transform 160ms ease;
  z-index: 3;
}
.badge-contact:hover,
.badge-contact:focus-visible {
  background: #B00B26;
  transform: translateY(-50%) scale(1.06);
  color: #FFFFFF;
  outline: none;
}
@media (max-width: 900px) {
  .badge-contact {
    right: 16px;
    top: auto;
    bottom: 16px;
    transform: none;
    width: 104px;
    height: 104px;
    font-size: 0.85rem;
  }
  .badge-contact:hover,
  .badge-contact:focus-visible { transform: scale(1.06); }
}

/* -------- Before / After comparison (homepage) --------
   Minimal: just the photos themselves on the camo backdrop, with a
   small Before/After tag in the corner of each. No white card frame,
   no divider, no caption strip. */
.ba-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 980px) {
  .ba-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

.ba-pair {
  margin: 0;
}

.ba-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.ba-img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--gray-100);
}
.ba-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}
.ba-img .placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--gray-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: var(--gray-600);
}
.ba-img .placeholder::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 0.6rem;
  background: var(--gray-300);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 7h3l2-2h6l2 2h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm8 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 7h3l2-2h6l2 2h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm8 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/></svg>") center / contain no-repeat;
}
.ba-img .placeholder .label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  max-width: 22ch;
  line-height: 1.35;
  margin-bottom: 0.3rem;
}
.ba-img .placeholder .filename {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.66rem;
  opacity: 0.7;
  word-break: break-all;
}

/* Simple tag in the top-left corner of each photo — solid color,
   slight rounding, no shadow or backdrop blur. */
.ba-img__label {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 4;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  color: #FFFFFF;
}
.ba-img__label--before { background: var(--red); }
/* Muted forest green — fits the camo/outdoor palette. */
.ba-img__label--after  { background: #4A704B; }

.ba-cta {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* Placeholder text on the camo section shouldn't inherit white-on-dark
   text rules (only relevant if an image fails to load). */
.section--bottomland .ba-img .placeholder .label,
.section--bottomland .ba-img .placeholder .filename {
  color: var(--gray-600);
  text-shadow: none;
}

/* -------- Section: Bottomland camo background (reusable) --------
   Used on any section that needs the camo treatment with white text.
   Markup pattern:
     <section class="section--bottomland">
       <div class="bottomland__strip"></div>
       <div class="bottomland__body">
         <div class="container">... content ...</div>
       </div>
       <div class="bottomland__strip"></div>
     </section>
*/
.section--bottomland {
  background-color: var(--navy);
  color: #FFFFFF;
}
.bottomland__strip {
  height: 22px;
  background-image: url("images/camo-bg.jpg");
  background-size: 360px auto;
  background-repeat: repeat;
}
.bottomland__body {
  position: relative;
  background-image: url("images/camo-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(3rem, 6vw, 5rem) 0;
  overflow: hidden;
  color: #FFFFFF;
}
.bottomland__body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
  pointer-events: none;
}
.bottomland__body > * { position: relative; z-index: 2; }

.section--bottomland h1,
.section--bottomland h2,
.section--bottomland h3,
.section--bottomland h4 {
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.section--bottomland h2 { color: #00BFFF; }
.section--bottomland p {
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.section--bottomland .lede { color: rgba(255, 255, 255, 0.95); }
.section--bottomland .eyebrow { color: rgba(255, 255, 255, 0.75); }
.section--bottomland .accent-bar { background: var(--red); }

/* Town tags need extra contrast on camo */
.section--bottomland .town-tags .tag {
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  border-color: rgba(255, 255, 255, 0.7);
}
.section--bottomland .town-tags .tag svg { fill: var(--red); }

/* Map frame on camo */
.section--bottomland .map-frame {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}

/* Why-items on camo */
.section--bottomland .why-item h3 { color: #FFFFFF; }
.section--bottomland .why-item p { color: rgba(255, 255, 255, 0.9); }
.section--bottomland .why-item .icon-circle {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

/* -------- Utility -------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.center { text-align: center; }
.text-red { color: var(--red); }
.text-navy { color: var(--navy); }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }

/* ==========================================================================
   Mobile UX optimization (phones, ≤600px)
   --------------------------------------------------------------------------
   Tightens typography scale and section spacing so content fits cleanly on
   small screens. Layout structure (which columns stack, which rows wrap)
   is already handled by the breakpoints earlier in the file — this block
   only adjusts SIZES and PADDING for phones.

   Note on `<input>` / `<select>` / `<textarea>`: font-size deliberately
   stays at 16px on mobile. iOS Safari auto-zooms the page when a form
   field smaller than 16px is focused, which is visually disruptive.
   ========================================================================== */
@media (max-width: 600px) {

  /* ---------- Base typography ---------- */
  body  { font-size: 16px; line-height: 1.6; }
  h1    { font-size: 1.65rem; line-height: 1.2; }
  h2    { font-size: 1.3rem;  line-height: 1.25; }
  h3    { font-size: 1.05rem; }
  h4    { font-size: 1rem; }
  p     { margin: 0 0 0.9em; }

  .lede     { font-size: 1rem; }
  .eyebrow  { font-size: 0.7rem; letter-spacing: 0.14em; margin-bottom: 0.5rem; }
  .accent-bar { margin: 0.2rem 0 0.75rem; }

  /* ---------- Sections / section-head ---------- */
  .section          { padding: 2.25rem 0; }
  .section-head     { margin: 0 auto 1.5rem; }
  .section-head--left { margin: 0 0 1.5rem; }

  /* ---------- Buttons (keep ≥44px tap height) ---------- */
  .btn     { font-size: 0.9rem; padding: 0.8rem 1.15rem; }
  .btn--lg { font-size: 0.95rem; padding: 0.9rem 1.4rem; }

  /* ---------- Header (logo-only, centered, taller bar) ----------
     The logo sits dead-center in the nav bar with the hamburger pinned
     to the right edge. Brand text and phone number are hidden — just
     the mark and the menu toggle. Bar is bumped from 84px → 96px tall
     so the larger centered logo has breathing room. */
  body                        { padding-top: 72px; }
  html                        { scroll-padding-top: 72px; }
  .header-top {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    position: relative;
    gap: 0;
  }
  .header-phone               { display: none; }
  .brand                      { gap: 0; }
  .brand img                  { width: 60px; height: 60px; }
  .brand-text                 { display: none; }
  .nav-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }

  /* ---------- Hero panel (red, stretched, mobile) ----------
     White "Our Services" panel hidden. Red panel stretched vertically
     so its top edge sits a third of the way up the viewport from the
     bottom — i.e., red panel = bottom 1/3 of the screen. Content is
     vertically centered inside that taller box. */
  .hero                   { min-height: calc(100svh - 72px); }
  .hero-panel--white      { display: none; }
  .hero-panel             { padding: 1rem 1.2rem; }
  .hero-panel--red {
    min-height: 33.33vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero-panel--red h1     { font-size: 1.3rem;  margin-bottom: 0.3rem;  line-height: 1.2; }
  .hero-panel--red p      { font-size: 0.92rem; line-height: 1.5; margin-bottom: 0.85rem; }
  .hero-panel--red .hero-cta-row { gap: 0.55rem; }
  .hero-panel--red .hero-cta-row .btn { padding: 0.6rem 1.05rem; font-size: 0.85rem; }

  /* ---------- Page head (inner pages) ---------- */
  .page-head    { padding: 1.75rem 0 1.5rem; }
  .page-head h1 { font-size: 1.55rem; }
  .page-head p  { font-size: 0.95rem; }
  .crumbs       { font-size: 0.72rem; }

  /* ---------- About: homepage camo section + about-strip ---------- */
  .about-camo__body         { padding: 2.25rem 0; }
  .about-camo-grid          { gap: 1.5rem; }
  .about-camo-text          { padding-right: 0; }
  .about-camo-text h2       { font-size: 1.6rem; }
  .about-camo-text p        { font-size: 0.95rem; line-height: 1.65; }
  .about-camo-text .about-eyebrow { font-size: 0.7rem; margin-bottom: 0.55rem; }
  .about-strip              { gap: 1.5rem; }
  .about-strip__body .stat-row { gap: 1.1rem; margin: 1rem 0 1.25rem; }
  .about-strip__body .stat .num { font-size: 1.4rem; }
  .about-strip__body .stat .label { font-size: 0.65rem; }

  /* ---------- Why-Us value props ---------- */
  .why-row                  { gap: 1.25rem; }
  .why-item                 { padding: 1rem 0.5rem; }
  .why-item .icon-circle    { width: 52px; height: 52px; margin-bottom: 0.6rem; }
  .why-item .icon-circle svg { width: 24px; height: 24px; }
  .why-item h3              { font-size: 1rem; }
  .why-item p               { font-size: 0.9rem; }

  /* ---------- Services page service blocks ---------- */
  .service-block            { padding: 1.75rem 0; gap: 1.25rem; }
  .service-block__body h2   { font-size: 1.35rem; }
  .service-block__features  { font-size: 0.92rem; margin: 1rem 0; gap: 0.45rem; }
  .service-block__note      { font-size: 0.85rem; }

  /* Hide the "Where CJ Works / See Service Area" callout on the
     services page — already redundant with the Service Area link in
     the hamburger menu and footer. */
  .services-area-callout    { display: none; }

  /* ---------- Services grid (homepage) ---------- */
  .services-grid            { gap: 1rem; }

  /* ---------- Service area town tags + map ---------- */
  .town-tags                { gap: 0.45rem; }
  .town-tags .tag           { font-size: 0.82rem; padding: 0.4rem 0.75rem; }
  .map-frame iframe         { height: 260px; }

  /* ---------- Bottomland (camo) section padding ---------- */
  .bottomland__body         { padding: 2.25rem 0; }

  /* ---------- Contact: form-only on mobile ----------
     The navy "Call, Text, or Email" info card is hidden on phones —
     the same info (phone, email, service area, Facebook) is already
     accessible via the hamburger menu and the footer. */
  .contact-grid             { gap: 1.25rem; }
  .contact-info             { display: none; }

  .contact-form             { padding: 1.5rem; }
  .contact-form h2          { font-size: 1.35rem; }
  .contact-form .form-note  { font-size: 0.92rem; margin-bottom: 1.25rem; }
  .form-grid                { gap: 0.85rem; }
  .field                    { gap: 0.35rem; }
  /* Note: keep input/select/textarea at 16px (set by base rule) so iOS
     Safari doesn't auto-zoom on focus. Only adjusting padding here. */
  .field input,
  .field select,
  .field textarea           { padding: 0.75rem 0.85rem; }
  .field textarea           { min-height: 130px; }

  /* ---------- Testimonial ---------- */
  .testimonial              { padding: 1.5rem; }
  .testimonial__source      { font-size: 0.66rem; }
  .testimonial__stars       { margin-left: 0.5rem; margin-bottom: 0.75rem; }
  .testimonial__stars svg   { width: 16px; height: 16px; }
  .testimonial__quote       { font-size: 0.98rem; line-height: 1.65; }
  .testimonial__attrib      { font-size: 0.9rem; }

  /* ---------- Before & After (homepage) ---------- */
  .ba-grid                  { gap: 1.25rem; margin-top: 1.5rem; }
  .ba-img__label            { font-size: 0.62rem; padding: 0.25rem 0.55rem; top: 0.5rem; left: 0.5rem; letter-spacing: 0.1em; }
  .ba-cta                   { margin-top: 1.5rem; }

  /* ---------- CTA band ---------- */
  .cta-band                 { padding: 2rem 0; }
  .cta-band h2              { font-size: 1.4rem; }
  .cta-band p               { font-size: 0.95rem; margin: 0 auto 1.25rem; }

  /* ---------- Footer ---------- */
  .site-footer              { padding: 2rem 0 1rem; }
  .footer-grid              { gap: 1.75rem; }
  .footer-brand img         { width: 64px; height: 64px; }
  .footer-brand .name       { font-size: 1.1rem; }
  .footer-brand p           { font-size: 0.9rem; }
  .footer-col h4            { font-size: 0.95rem; }
  .footer-col p,
  .footer-col a,
  .footer-col li            { font-size: 0.9rem; }
  .footer-bottom            { margin-top: 2rem; font-size: 0.75rem; flex-direction: column; gap: 0.4rem; }
}