/* =================================================
   BRAND VARIABLES
   (Single source of truth in assets/css/site-brand.css)
================================================= */
/* =================================================
   BASE TYPOGRAPHY
================================================= */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-dark);
  background: #ffffff;
  padding-bottom: 90px; /* space for sticky bar */
}

h1 {
  font-size: 2.4rem;
  margin: 0 0 16px;
  color: var(--brand-black);
}

h2 {
  font-size: 1.8rem;
  margin: 0 0 14px;
  color: var(--brand-black);
}

p {
  max-width: 68ch;
  margin: 0 0 16px;
}

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
}

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

/* Mobile type scaling */
@media (max-width: 768px) {
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.5rem; }
  p  { font-size: 0.95rem; }
}

/* =================================================
   LAYOUT
================================================= */
.page-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

section {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* =================================================
   HEADER / NAV (PURPLE + YELLOW DIVIDER)
================================================= */
.site-header {
  background: var(--ats-header-bg);
  border-bottom: 5px solid var(--ats-divider); /* slightly thicker yellow */
  position: relative;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  height: 60px;
}

/* Nav links */
.main-nav {
  display: flex;
  gap: 18px;
}

.main-nav a {
  font-weight: 600;
  color: #ffffff;
}

.main-nav a.cta {
  background: var(--ats-divider);
  color: #111;
  padding: 8px 14px;
  border-radius: 12px;
  font-weight: 800;
}

/* Hamburger */
.nav-toggle {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: #ffffff;
}

/* Mobile nav */
@media (max-width: 900px) {
  .logo img {
    height: 48px;
  }

  .nav-toggle {
    display: block;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--ats-purple);
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    border-bottom: 5px solid var(--ats-divider);
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav a {
    padding: 12px 0;
  }
}

/* =================================================
   BUTTONS
================================================= */
.button {
  display: inline-block;
  background: var(--ats-button-bg);
  color: var(--ats-button-text);
  padding: 12px 25px;
  border-radius: 6px;
  font-weight: bold;
}

/* =================================================
   QUOTE FORM
================================================= */
.form-wrapper {
  display: flex;
  justify-content: center;
}

.quote-form {
  max-width: 860px;
  width: 100%;
  padding: 40px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 64px;
}

.quote-form label {
  font-weight: 600;
}

.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.quote-form textarea {
  min-height: 120px;
}

.full-width {
  grid-column: 1 / -1;
}

.quote-form button {
  grid-column: 1 / -1;
  background: var(--ats-button-bg);
  color: var(--ats-button-text);
  padding: 12px 22px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

/* Mobile form */
@media (max-width: 700px) {
  .quote-form {
    grid-template-columns: 1fr;
    padding: 24px 18px;
  }

  .quote-form button {
    width: 100%;
  }
}

/* =================================================
   GALLERY
================================================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.gallery-grid img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

/* =================================================
   MAP
================================================= */
.map-section {
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 0 20px;
}

.map-section iframe {
  width: 100%;
  height: 280px;
  border-radius: 12px;
  border: 0;
}

/* =================================================
   FOOTER (PURPLE + YELLOW DIVIDER)
================================================= */
footer {
  background: var(--ats-footer-bg);
color: #ffffff;
  text-align: center;
  border-top: 5px solid var(--ats-divider); /* slightly thicker yellow */
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer p {
  margin-top: 20px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
}

/* =================================================
   STICKY BAR (PURPLE, NO DROPUP)
================================================= */
.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  z-index: 999;

  background: var(--ats-purple);
  border-top: 5px solid var(--ats-divider);
}

.call-btn,
.text-btn {
  flex: 1;
  text-align: center;
  padding: 16px 0;
  font-weight: 800;
  color: #ffffff;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Keep your desktop centering */
@media (min-width: 769px) {
  .sticky-bar {
    max-width: 1100px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 12px 12px 0 0;
  }
}

/* =================================================
   PAGE SPACING FIX (PREVENT OVERLAP)
================================================= */
body {
  padding-bottom: 80px;
}


/* =================================================
   FOOTER LINKS (SERVICE AREAS)
================================================= */
.footer-links {
  max-width: 900px;
  margin: 0 auto 18px;
  padding: 0 14px;
}

.footer-links-title {
  margin: 0 0 8px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.footer-links a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-links a:hover {
  opacity: 0.9;
}

/* =================================================
   BEFORE & AFTER (PAIRED) + CITY PAGE GALLERY CTA
================================================= */
.ba-pair-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin: 18px 0 34px;
}
.ba-pair{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}
.ba-labels{
  display:flex;
  justify-content:space-between;
  padding: 12px 14px;
  font-weight:700;
  color: var(--brand-black);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.ba-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.ba-col a, .ba-col img{
  display:block;
  width:100%;
}
.ba-col img{
  width:100%;
  height:auto;
}
.gallery-cta{
  margin-top: 34px;
  padding: 20px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}
.gallery-cta h2{
  margin-top: 0;
}
@media (max-width: 700px){
  .ba-row{ grid-template-columns: 1fr; }
}


/* =========================
   FOOTER SOCIAL ICONS
========================= */
.footer-social{
  display:flex;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}
.social-link{
  width:44px;
  height:44px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.social-link svg{
  width:22px;
  height:22px;
  fill: var(--brand-yellow);
}
.social-link:hover{
  transform: translateY(-1px);
}
.social-link:active{
  transform: translateY(0px);
}
.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;
}


/* =================================================
   SERVICES PAGE LAYOUT
================================================= */
.services-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:24px;
  margin: 18px 0 8px;
}
.service-block{
  background:#fff;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
  padding: 22px;
}
.service-block ul{ margin: 0 0 14px; }
.service-block .muted{ color: #4b5563; font-size: 0.95rem; }
@media (max-width: 900px){
  .services-grid{ grid-template-columns: 1fr; }
}

/* Slightly larger tap targets on mobile */
@media (max-width: 768px){
  .main-nav a{ padding: 12px 8px; }
  .button, .quote-form button{ padding: 14px 22px; }
}


/* ===== Footer Service Areas + Social Icons ===== */
.footer-inner{
  gap: 18px;
}
.footer-links, .footer-socials{
  width: 100%;
  max-width: 1100px;
}
.footer-links ul{
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.footer-links a{
  text-decoration: underline;
}
.social-icons{
  margin-top: 10px;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.social-icons img{
  width: 28px;
  height: 28px;
  display: block;
}


/* ===============================
   FOOTER — TIGHT + LINKY
=============================== */
.site-footer{
  background: var(--ats-purple);
  color: #fff;
  border-top: 6px solid var(--ats-yellow);
}
.site-footer .footer-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 34px 20px 22px;
}
.footer-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  margin-bottom: 18px;
}
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr; text-align: center; }
  .footer-links{ display: inline-block; text-align: left; }
}
.footer-col h3{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
}
.footer-links{
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li{ margin: 8px 0; }
.footer-links a{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 700;
}
.footer-links a:hover{ opacity: .9; }

.footer-social{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 900px){
  .footer-social{ justify-content: center; }
}
.social-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}
.social-icon:hover{ background: rgba(255,255,255,.16); }

.footer-callout{
  margin: 18px auto 10px;
  max-width: 900px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
}
.footer-bottom{
  text-align: center;
  font-weight: 700;
  opacity: .95;
  margin-top: 8px;
}

/* Remove any legacy "Find Us" blocks if present */
.find-us, .footer-findus, .footer-find-us{ display:none !important; }


/* =========================
   About: People cards
   ========================= */
.people-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .people-grid{ grid-template-columns: 1fr; }
}
.person-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.person-top{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.headshot-wrap{
  width: 74px;
  height: 74px;
  border-radius: 0;
  overflow: visible;
  flex: 0 0 auto;
  border: none;
}
.headshot-wrap img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.person-card h3{
  margin: 0;
}
.person-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.bio{
  position: relative;
}
.bio-text{
  /* Preserve user-entered line breaks, but avoid huge gaps from multiple blank lines */
  white-space: pre-line;
  line-height: 1.5;
}
.bio.bio-collapsed .bio-text{
  max-height: 138px;
  overflow: hidden;
}
.bio.bio-collapsed::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(12,12,20,.92));
  pointer-events: none;
  border-radius: 12px;
}
.bio-toggle{
  align-self: flex-start;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
}
.bio-toggle:hover{ background: rgba(0,0,0,.28); }

.contact-line{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.contact-sep{
  opacity: .85;
}

/* =========================
   Contact Us: split layout
   ========================= */
.contact-split{
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 28px;
  align-items: center;
}

/* Footer uses the same honeycomb language as the Contact page */
.footer-social.footer-honeycomb{
  justify-content: center;
}

.footer-social.footer-honeycomb .honey{
  width: 42px;
  height: 48px;
}

.footer-social.footer-honeycomb .honey img{
  width: 22px;
  height: 22px;
}
.contact-split .form-wrapper{ justify-content: flex-start; }
.contact-split .quote-form{ max-width: none; }

.contact-right{
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

@media (max-width: 900px){
  .contact-split{ grid-template-columns: 1fr; }
}

/* =========================
   Contact: honeycomb socials
   ========================= */
.social-honeycomb{
  /* 3-1-2 honeycomb layout */
  --hex: 56px;
  display: grid;
  grid-template-columns: repeat(3, var(--hex));
  grid-auto-rows: var(--hex);
  gap: 12px 12px;
  margin-top: 12px;
  justify-content: center;
  align-content: start;
}

/* Position helpers */
.social-honeycomb .pos-top-1{ grid-column: 1; grid-row: 1; }
.social-honeycomb .pos-top-2{ grid-column: 2; grid-row: 1; }
.social-honeycomb .pos-top-3{ grid-column: 3; grid-row: 1; }
.social-honeycomb .pos-center{ grid-column: 2; grid-row: 2; }
.social-honeycomb .pos-bottom-1{ grid-column: 1; grid-row: 3; }
.social-honeycomb .pos-bottom-2{ grid-column: 3; grid-row: 3; }
.honey{
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 900;
  background: var(--ats-purple2);
  color: var(--brand-yellow);
  border: 2px solid var(--brand-yellow);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  box-shadow: 0 10px 22px rgba(0,0,0,0.14);
}

.honey img{
  width: 28px;
  height: 28px;
  display: block;
}
.honey:hover{ filter: brightness(1.05); }

.contact-section{

  margin-top: 28px;
}
.contact-map iframe{
  width: 100%;
  min-height: 340px;
  border: 0;
  border-radius: 18px;
}


/* =========================
   Social icons (PNG) — injected
========================= */
.footer-social .social-link{
  width:44px;
  height:44px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, opacity .12s ease;
}
.footer-social .social-link img{
  width:22px;
  height:22px;
  display:block;
}
.footer-social .social-link:hover{ transform: translateY(-1px); }
.footer-social .social-link:hover img{ filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.footer-social .social-link:active{ transform: translateY(0px); }

.footer-social .social-link.is-disabled{
  opacity:.45;
  pointer-events:none;
  filter: grayscale(0.1);
}

/* Brand-tinted hover ring */
.footer-social .social-facebook:hover{ box-shadow: 0 0 0 2px rgba(24,119,242,.85), 0 10px 22px rgba(0,0,0,.18); }
.footer-social .social-yelp:hover{ box-shadow: 0 0 0 2px rgba(211,35,35,.85), 0 10px 22px rgba(0,0,0,.18); }
.footer-social .social-nextdoor:hover{ box-shadow: 0 0 0 2px rgba(0,178,70,.85), 0 10px 22px rgba(0,0,0,.18); }
.footer-social .social-yellowpages:hover{ box-shadow: 0 0 0 2px rgba(255,212,0,.85), 0 10px 22px rgba(0,0,0,.18); }
.footer-social .social-google:hover{ box-shadow: 0 0 0 2px rgba(66,133,244,.85), 0 10px 22px rgba(0,0,0,.18); }
.footer-social .social-instagram:hover{ box-shadow: 0 0 0 2px rgba(228,64,95,.85), 0 10px 22px rgba(0,0,0,.18); }

/* Honeycomb tweaks to match footer */
.social-honeycomb .honey{
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, opacity .12s ease;
}
.social-honeycomb .honey:hover{ transform: translateY(-1px); }
.social-honeycomb .honey:hover img{ filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.social-honeycomb .honey.is-disabled{
  opacity:.45;
  pointer-events:none;
}
.social-honeycomb .honey.social-facebook:hover{ box-shadow: 0 0 0 2px rgba(24,119,242,.85), 0 10px 22px rgba(0,0,0,.14); }
.social-honeycomb .honey.social-yelp:hover{ box-shadow: 0 0 0 2px rgba(211,35,35,.85), 0 10px 22px rgba(0,0,0,.14); }
.social-honeycomb .honey.social-nextdoor:hover{ box-shadow: 0 0 0 2px rgba(0,178,70,.85), 0 10px 22px rgba(0,0,0,.14); }
.social-honeycomb .honey.social-yellowpages:hover{ box-shadow: 0 0 0 2px rgba(255,212,0,.85), 0 10px 22px rgba(0,0,0,.14); }
.social-honeycomb .honey.social-google:hover{ box-shadow: 0 0 0 2px rgba(66,133,244,.85), 0 10px 22px rgba(0,0,0,.14); }
.social-honeycomb .honey.social-instagram:hover{ box-shadow: 0 0 0 2px rgba(228,64,95,.85), 0 10px 22px rgba(0,0,0,.14); }


/* === SERVICES DROPDOWN (Desktop hover + mobile-safe) === */
.main-nav { display: flex; gap: 14px; align-items: center; }

.nav-item.dropdown { position: relative; }
.nav-item .dropbtn { display: inline-flex; align-items: center; gap: 6px; }

.dropdown-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 280px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 14px 30px rgba(0,0,0,0.14);
  border-radius: 16px;
  padding: 10px;
  display: none;
  z-index: 999;
}



/* Ensure dropdown text is readable (dropdown has white background) */
.dropdown-menu a,
.dropdown-menu .submenu-title{
  color:#1b1b1b;
}
.dropdown-menu a{ text-decoration:none; }
.dropdown-menu a:hover{ background:#f3f3f6; }
.dropdown-sep{
  height:1px;
  background:#e7e7ee;
  margin:8px 0;
}

/* Mobile: click-to-open dropdowns */
.nav-item.dropdown.open .dropdown-menu{ display:block; }

.nav-item.dropdown:hover .dropdown-menu,
.nav-item.dropdown:focus-within .dropdown-menu{
  display: block;
}

.dropdown-group{
  padding: 8px 10px;
  border-radius: 12px;
}

.dropdown-group + .dropdown-group{
  margin-top: 6px;
}

.submenu-title{
  font-weight: 700;
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
}

.submenu{
  display: none;
  padding-top: 6px;
  gap: 6px;
}

.dropdown-group:hover .submenu,
.dropdown-group:focus-within .submenu{
  display: grid;
}

.submenu a{
  padding: 8px 10px;
  border-radius: 10px;
}

.submenu a:hover{
  background: rgba(0,0,0,0.06);
}

/* Mobile: no hover — show dropdown content as stacked lists when nav is open */
@media (max-width: 900px){
  .main-nav{ display: none; flex-direction: column; align-items: stretch; gap: 10px; }
  .main-nav.open{ display: flex; }

  .nav-item.dropdown{ position: static; }
  .dropdown-menu{
    position: static;
    display: block;     /* always visible inside mobile menu */
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.10);
    margin-top: 6px;
  }
  .submenu{ display: grid; }
}