/* CC Lead Engine — Albany Paint Crew
   Mobile-first responsive CSS. No frameworks, fast loading.
   Forked from sites/danbury-photo-booth/styles.css, given its own
   palette (deep teal + cream, with a warm amber call-to-action accent —
   evoking fresh paint / color-swatch branding) — same structural system
   (flat brand-color nav, duotone photo hero, plain underlined inline
   links, denser text, inconsistent heading sizes, big flat color panels,
   split section, accordion) as the chimney, junk-removal, and photo-booth
   sites, so the family stays visually consistent while each site keeps
   its own identity.

   Accessibility rules (skip link, 44px tap targets, 16px form inputs to
   stop iOS zoom) preserved unchanged from the reference sites. */

/* ============================================================
   RESET & BASE
   ============================================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #12303a;
  background: var(--color-bg-light, #f7f2e6);
}

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

a {
  color: #136b73;
  text-decoration: underline;
  transition: color 0.2s;
}

a:hover {
  color: #0d4d53;
}

ul, ol {
  padding-left: 1.5rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip-link:focus {
  left: 0;
  top: 0;
  background: #136b73;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 200;
  text-decoration: none;
}

/* ============================================================
   CSS VARIABLES
   ------------------------------------------------------------
   Deep teal brand color on cream, + warm amber accent for the
   call-to-action button. Deliberately distinct from chimney's
   charcoal/copper, junk-removal's forest-green/orange, and photo
   booth's plum/magenta/gold — its own identity within the family.
   ============================================================ */

:root {
  --color-primary: #12303a;
  --color-accent: #136b73;
  --color-accent-dark: #0d4d53;
  --color-bg-light: #f7f2e6;
  --color-bg-dark: #0b262c;
  --color-text: #12303a;
  --color-text-light: #4f6468;
  --color-text-white: #fff;
  --color-border: #d8e0dd;
  --color-success: #d3862b;
  --color-success-dark: #ad6b1c;
  --max-width: 1200px;
  --header-height: 70px;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

.section {
  padding: 2rem 0;
}

.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-white);
}

.section--light {
  background: var(--color-bg-light);
}

/* Flat brand-color panel — deliberately busy/dated, used once per page.
   Cards keep their normal white-card colors inside it (reset below);
   direct paragraphs/list text switch to white for contrast. */
.section--accent {
  background: var(--color-accent);
  color: var(--color-text-white);
  padding: 4rem 0;
}

.section--accent h2,
.section--accent > .container > p,
.section--accent li {
  color: var(--color-text-white);
}

.section--accent .card {
  color: var(--color-text);
}

.section--accent .card h3 {
  color: var(--color-primary);
}

.section--accent .card p {
  color: var(--color-text-light);
}

/* ============================================================
   HEADER & NAV
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-accent);
  color: var(--color-text-white);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.header__logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-white);
  white-space: nowrap;
  text-decoration: none;
}

.nav {
  display: none;
}

.nav--open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: var(--color-accent);
  padding: 1rem;
}

.nav a {
  color: var(--color-text-white);
  padding: 0.75rem 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.nav a:hover {
  background: rgba(255,255,255,0.1);
  color: #f2e6c8;
}

/* ============================================================
   SERVICES DROPDOWN
   ------------------------------------------------------------
   .nav__item wraps the "Services" link + a separate caret button, so
   tapping/clicking "Services" itself still navigates to /services.html
   while the caret toggles the submenu. Submenu shows on hover, on
   keyboard focus (:focus-within — covers the link, caret, or any
   submenu link), or via the JS-toggled .nav__item--open class (for a
   reliable mobile tap, matching the existing inline-onclick hamburger
   pattern — bare :hover/:focus-within isn't reliable on touch alone).
   ============================================================ */

.nav__item {
  display: flex;
  align-items: center;
  position: relative;
}

.nav__caret {
  background: none;
  border: none;
  color: var(--color-text-white);
  cursor: pointer;
  font-size: 1rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
}

.nav__submenu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0 0 0 1rem;
  background: rgba(0,0,0,0.12);
}

.nav__item:hover .nav__submenu,
.nav__item:focus-within .nav__submenu,
.nav__item--open .nav__submenu {
  display: block;
}

.nav__submenu a {
  color: var(--color-text-white);
  padding: 0.75rem 1rem;
  font-weight: 500;
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.nav__submenu a:hover {
  background: rgba(255,255,255,0.1);
  color: #f2e6c8;
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-white);
  transition: transform 0.2s;
}

/* ============================================================
   HERO — duotone photo background
   ------------------------------------------------------------
   Each page sets --hero-img inline on .hero (style="--hero-img:url(...)").
   .hero__bg carries the desaturated photo; .hero__overlay multiplies the
   brand accent color over it for a duotone tint. Text sits in .container
   above both.
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  color: var(--color-text-white);
  padding: 4rem 0 3rem;
  text-align: center;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--hero-img) center / cover no-repeat;
  filter: grayscale(0.6) contrast(1.15);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-accent);
  mix-blend-mode: multiply;
  opacity: 0.82;
}

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

.hero h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

.hero p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.hero__phone {
  display: inline-block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-text-white);
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

.hero__phone:hover {
  color: #f2e6c8;
}

/* ============================================================
   BODY PHONE CTA — one per page, right after the intro copy
   ============================================================ */

.body-phone-cta {
  font-weight: 700;
  color: var(--color-primary);
}

.body-phone-cta a {
  color: var(--color-accent);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.2s, transform 0.1s;
  min-height: 44px;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-text-white);
}

.btn--primary:hover {
  background: var(--color-accent-dark);
  color: var(--color-text-white);
}

.btn--outline {
  background: transparent;
  border: 2px solid var(--color-text-white);
  color: var(--color-text-white);
}

.btn--outline:hover {
  background: var(--color-text-white);
  color: var(--color-bg-dark);
}

.btn--call {
  background: var(--color-success);
  color: var(--color-text-white);
  font-size: 1.1rem;
  padding: 1rem 2rem;
}

.btn--call:hover {
  background: var(--color-success-dark);
  color: var(--color-text-white);
}

.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

/* ============================================================
   CARDS / SERVICES GRID
   ============================================================ */

.grid {
  display: grid;
  gap: 1rem;
}

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 1px 4px rgba(18, 48, 58, 0.05);
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(18, 48, 58, 0.1);
}

.card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--color-primary);
}

.card p {
  color: var(--color-text-light);
}

/* ============================================================
   WHY CHOOSE US / FEATURES
   ============================================================ */

.features {
  text-align: center;
}

.features h2 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.features > p {
  color: var(--color-text-light);
  margin-bottom: 1rem;
}

.feature-item {
  padding: 1.5rem;
}

.feature-item h3 {
  margin-top: 0.5rem;
}

/* ============================================================
   FREE QUOTE BADGE
   ------------------------------------------------------------
   Clip-art-style torn-ribbon badge, sat directly above the lead form
   (contact-us.html only — that's the actual form; other pages just link
   to it). Rotated slightly for the busy/dated "slapped-on sticker" look.
   ============================================================ */

.quote-badge {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 220px;
  margin: 0 auto -1.25rem;
  transform: rotate(-6deg);
  filter: drop-shadow(0 4px 6px rgba(18, 48, 58, 0.35));
}

.quote-badge__body {
  flex: 1;
  background: var(--color-accent);
  border: 3px solid var(--color-accent-dark);
  clip-path: polygon(
    0% 15%, 8% 0%, 20% 12%, 33% 2%, 47% 14%, 60% 0%, 73% 13%, 87% 3%, 100% 15%,
    100% 85%, 88% 100%, 75% 88%, 62% 100%, 48% 87%, 35% 100%, 22% 89%, 9% 100%, 0% 85%
  );
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  padding: 0.6rem 0.5rem;
  letter-spacing: 0.03em;
}

.quote-badge__tail {
  width: 18px;
  align-self: center;
  height: 60%;
  background: var(--color-accent-dark);
}

.quote-badge__tail--left {
  clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%, 40% 50%);
  margin-right: -2px;
}

.quote-badge__tail--right {
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%, 60% 50%);
  margin-left: -2px;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */

.form-section {
  max-width: 600px;
  margin: 0 auto;
}

.form-section h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 600;
  color: var(--color-text);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 16px; /* prevent iOS zoom on focus */
  font-family: inherit;
  min-height: 44px;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(19, 107, 115, 0.18);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-success {
  display: none;
  text-align: center;
  padding: 2rem;
  background: #e8f2f1;
  border: 1px solid #bcd8d6;
  border-radius: 8px;
  color: #0d4d53;
}

.form-success.visible {
  display: block;
}

.honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ============================================================
   CTA BAR (click-to-call)
   ============================================================ */

.cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-accent);
  padding: 0.75rem;
  text-align: center;
  z-index: 99;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
}

.cta-bar a {
  color: var(--color-text-white);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: var(--color-bg-dark);
  color: rgba(255,255,255,0.7);
  padding: 2rem 0;
  text-align: center;
  font-size: 0.875rem;
}

.footer a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
}

.footer__links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* ============================================================
   SPLIT PHOTO/CONTENT SECTION
   ------------------------------------------------------------
   One per page: photo on one side, flat-color content panel on the
   other. Stacked on mobile; side-by-side from 768px+ (see responsive
   block below). .split--reverse flips which side the photo is on.
   ============================================================ */

.split {
  display: flex;
  flex-direction: column;
}

.split__media {
  min-height: 220px;
}

.split__media img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  max-height: 460px;
  object-fit: cover;
}

.split__content {
  background: var(--color-accent);
  color: var(--color-text-white);
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split__content h2,
.split__content p {
  color: var(--color-text-white);
}

/* ============================================================
   ACCORDION
   ------------------------------------------------------------
   Real <button> triggers (44px min-height), aria-expanded drives both
   the +/x icon rotation (CSS attribute selector) and, via the small
   delegated-listener script on each page that uses this, the [hidden]
   panel — never CSS-only :hover.
   ============================================================ */

.accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 1rem 0.25rem;
  background: none;
  border: none;
  text-align: left;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  cursor: pointer;
}

.accordion__icon {
  flex-shrink: 0;
  margin-left: 1rem;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-accent);
  transition: transform 0.2s;
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
}

.accordion__panel {
  padding: 0 0.25rem 1.25rem;
  color: var(--color-text-light);
}

.accordion__panel[hidden] {
  display: none;
}

/* Goals & Mission accordion sits on the dark accent section background;
   the shared .accordion__panel gray is too low-contrast there. */
#acc-vision-panel,
#acc-mission-panel {
  color: #e8e8e8;
}

/* ============================================================
   PHOTO GRID
   ============================================================ */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

/* ============================================================
   FULL-BLEED IMAGE BAND
   ------------------------------------------------------------
   Same duotone mechanism as .hero__bg/.hero__overlay, but darker
   and left-aligned — a quieter mid-page section, not another hero.
   ============================================================ */

.band {
  position: relative;
  overflow: hidden;
  color: var(--color-text-white);
  padding: 3rem 0;
  text-align: left;
}

.band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--hero-img) center / cover no-repeat;
  filter: grayscale(0.6) contrast(1.15);
}

.band__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-bg-dark);
  mix-blend-mode: multiply;
  opacity: 0.75;
}

.band .container {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

.band h2,
.band p {
  color: var(--color-text-white);
}

.band p {
  margin: 1rem 0 1.5rem;
}

/* ============================================================
   CARD ICON — plain circular glyph, no icon font/library
   ============================================================ */

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text-white);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

/* ============================================================
   FOOTER — 3-column layout
   ============================================================ */

.footer__grid {
  display: grid;
  gap: 2rem;
  text-align: left;
  margin-bottom: 1.5rem;
}

.footer__col h3 {
  color: var(--color-text-white);
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.footer__col p {
  color: rgba(255,255,255,0.7);
}

.footer__col a {
  color: rgba(255,255,255,0.9);
}

.footer__grid .footer__links {
  justify-content: flex-start;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0;
}

/* ============================================================
   RESPONSIVE — TABLET (768px+)
   ============================================================ */

@media (min-width: 768px) {
  .hero h1 {
    font-size: 2.75rem;
  }

  .hero-buttons {
    flex-direction: row;
    justify-content: center;
  }

  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .nav {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    min-width: 240px;
    background: var(--color-accent-dark);
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
    z-index: 150;
  }

  .menu-toggle {
    display: none;
  }

  .cta-bar {
    display: none;  /* Hide fixed CTA on desktop — button in hero is enough */
  }

  .split {
    flex-direction: row;
    min-height: 320px;
  }

  .split--reverse {
    flex-direction: row-reverse;
  }

  .split__media,
  .split__content {
    flex: 1;
  }

  .photo-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
  }
}

/* ============================================================
   RESPONSIVE — DESKTOP (1024px+)
   ============================================================ */

@media (min-width: 1024px) {
  .hero h1 {
    font-size: 3.25rem;
  }

  .hero {
    padding: 5rem 0 4rem;
  }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }

  .section {
    padding: 2.5rem 0;
  }

  .photo-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .band {
    padding: 4.5rem 0;
  }
}