/*
 * about-us.css — About Us Template (page-about-us.php)
 * Sackett palette: gold #a89968 · navy #00062c
 *
 * Content classes (also usable in the block editor via
 * Block → Advanced → Additional CSS class):
 *   .au-eyebrow          small uppercase gold line above a title
 *   .au-title            page title (H2 — the theme banner holds the H1)
 *   .au-subheading       byline / reviewed-by / last-updated line
 *   .au-body             body copy
 *   .au-section-heading  section heading with border below
 */

/* ── Tokens ── */
:root {
  --au-gold:     #a89968;
  --au-gold-dk:  #8e7e52;
  --au-navy:     #00062c;
  --au-navy-2:   #1a2d50;
  --au-ink:      #00062c;
  --au-ink-2:    #4a4a4a;
  --au-ink-3:    #727780;
  --au-line:     #e3e6ec;
  --au-paper:    #ffffff;
  --au-paper-t:  #f9f6f0;
  --au-head:     'Playfair Display', Georgia, serif;
  --au-body:     'Open Sans', Arial, sans-serif;
}

/* ── Wrapper ── */
.au-page { background: var(--au-paper); }
.au-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 768px)  { .au-wrap { padding-left: 28px; padding-right: 28px; } }
@media (min-width: 1100px) { .au-wrap { padding-left: 40px; padding-right: 40px; } }

/* ════════════════════════════════════════
   1 · CONTENT CLASSES
════════════════════════════════════════ */
.au-eyebrow {
  font-family: var(--au-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--au-gold) !important;
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.au-eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: currentColor; flex-shrink: 0;
}

.au-title {
  font-family: var(--au-head);
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.15; font-weight: 700;
  color: var(--au-ink);
  margin: 0 0 14px;
}

.au-subheading {
  font-family: var(--au-body);
  font-size: 14px; font-style: italic;
  line-height: 1.6;
  color: var(--au-ink-3);
  margin: 0 0 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--au-line);
}

.au-body,
.au-body p,
.au-content p,
.au-content li {
  font-family: var(--au-body);
  font-size: 17px; line-height: 1.75;
  color: var(--au-ink-2);
}
.au-body p, .au-content p { margin: 0 0 18px; }
.au-body a, .au-content a { color: var(--au-gold-dk); text-decoration: underline; text-underline-offset: 2px; }
.au-body a:hover, .au-content a:hover { color: var(--au-navy); }

.au-section-heading,
.au-content h2 {
  font-family: var(--au-head);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.25; font-weight: 700;
  color: var(--au-ink);
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--au-line);
  position: relative;
}
.au-section-heading::after,
.au-content h2::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 72px; height: 2px; background: var(--au-gold);
}
.au-content h3 {
  font-family: var(--au-head);
  font-size: 21px; color: var(--au-ink);
  margin: 28px 0 10px;
}

/* Elementor heading widgets — beat the kit's global font/colour
   (.elementor-widget-heading .elementor-heading-title) */
.au-content .elementor-widget-heading .elementor-heading-title {
  font-family: var(--au-head);
  font-weight: 700;
  color: var(--au-ink);
}
.au-content .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(24px, 3vw, 32px); line-height: 1.25; margin: 0; }
.au-content .elementor-widget-heading h3.elementor-heading-title { font-size: 21px; line-height: 1.35; margin: 0; }
.au-content .elementor-widget-heading:has(h2) { margin-top: 48px; }
.au-content .elementor-section:first-child .elementor-widget-heading:has(h2) { margin-top: 0; }
.au-content .elementor-widget-heading:has(h3) { margin-top: 18px; }
.au-content .elementor-widget:not(:last-child) { margin-bottom: 14px; }

/* ════════════════════════════════════════
   2 · INTRO
════════════════════════════════════════ */
.au-intro { padding: 56px 0 36px; }

/* ════════════════════════════════════════
   3 · STATS BAND
════════════════════════════════════════ */
.au-stats { padding: 0 0 48px; }
.au-stats__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  background: var(--au-navy);
  border-radius: 6px; overflow: hidden;
}
@media (min-width: 768px) { .au-stats__grid { grid-template-columns: repeat(4, 1fr); } }
.au-stats__item {
  padding: 30px 18px; text-align: center;
  border-right: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: 8px;
}
.au-stats__value {
  font-family: var(--au-head);
  font-size: clamp(32px, 4vw, 44px); line-height: 1; font-weight: 700;
  color: var(--au-gold);
}
.au-stats__label {
  font-family: var(--au-body);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.au-stats__note {
  font-family: var(--au-body);
  font-size: 13px; font-style: italic; color: var(--au-ink-3);
  margin: 12px 0 0; text-align: center;
}

/* ════════════════════════════════════════
   4 · EDITOR CONTENT
════════════════════════════════════════ */
.au-content { padding: 8px 0 12px; }
.au-content > .au-wrap > *:first-child { margin-top: 0; }
.au-content h2:not(:first-child),
.au-content .au-section-heading:not(:first-child) { margin-top: 48px; }

/* ════════════════════════════════════════
   5 · SERVICE CARDS
════════════════════════════════════════ */
.au-services, .au-areas { margin: 48px 0; }
.au-services__grid {
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 8px;
}
@media (min-width: 768px) { .au-services__grid { grid-template-columns: repeat(3, 1fr); } }
.au-card {
  position: relative;
  background: var(--au-paper-t);
  border: 1px solid var(--au-line);
  border-top: 3px solid var(--au-gold);
  border-radius: 4px;
  padding: 24px 22px 48px;
  transition: box-shadow .25s, transform .25s;
}
.au-card:hover { box-shadow: 0 10px 28px rgba(0,6,44,.08); transform: translateY(-2px); }
.au-card__title {
  font-family: var(--au-head);
  font-size: 19px; line-height: 1.35; margin: 0 0 10px; color: var(--au-ink);
}
.au-card__title a { color: var(--au-ink) !important; text-decoration: none !important; }
.au-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.au-card__title a:hover { color: var(--au-gold-dk) !important; }
.au-card__desc {
  font-family: var(--au-body);
  font-size: 15px; line-height: 1.6; color: var(--au-ink-2); margin: 0;
}
.au-card__arrow {
  position: absolute; left: 22px; bottom: 18px;
  color: var(--au-gold); font-size: 20px; line-height: 1;
}

/* ════════════════════════════════════════
   6 · AREAS WE SERVE
════════════════════════════════════════ */
.au-areas__label {
  font-family: var(--au-body);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--au-ink); margin: 8px 0 12px;
}
/* OLD (fixed-width grid boxes) — restore this block and remove the NEW one to roll back:
.au-areas__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.au-areas__state { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--au-ink-3); }
*/

/* NEW (content-width chips that wrap like a collage; same 10px gap) */
.au-areas__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.au-areas__item { flex: 0 0 auto; }
.au-areas__link { white-space: nowrap; }
.au-areas__link {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--au-line); border-radius: 4px;
  font-family: var(--au-body); font-size: 15px;
  color: var(--au-ink) !important; text-decoration: none !important;
  background: var(--au-paper);
  transition: border-color .2s, background .2s;
}
a.au-areas__link:hover { border-color: var(--au-gold); background: var(--au-paper-t); }
.au-areas__icon  { color: var(--au-gold); font-size: 14px; }
.au-areas__city  { font-weight: 600; }
.au-areas__state { margin-left: 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--au-ink-3); }
.au-areas__more { margin: 18px 0 0; font-family: var(--au-body); font-weight: 700; }
.au-areas__more a { color: var(--au-gold-dk) !important; text-decoration: none; }
.au-areas__more a:hover { color: var(--au-navy) !important; }

/* ════════════════════════════════════════
   7 · DISCLAIMER
════════════════════════════════════════ */
.au-disclaimer-wrap { padding: 12px 0 40px; }
.au-disclaimer {
  background: var(--au-paper-t);
  border: 1px solid var(--au-line);
  border-left: 4px solid var(--au-gold);
  border-radius: 4px;
  padding: 18px 22px;
}
.au-disclaimer p {
  font-family: var(--au-body);
  font-size: 13px; line-height: 1.65; font-style: italic;
  color: var(--au-ink-3); margin: 0 0 8px;
}
.au-disclaimer p:last-child { margin-bottom: 0; }
.au-disclaimer strong { color: var(--au-ink); font-style: normal; }

/* ════════════════════════════════════════
   8 · CTA
════════════════════════════════════════ */
.au-cta { padding: 0 0 72px; }
.au-cta__box {
  background: var(--au-navy);
  background-image: radial-gradient(circle at 100% 0, var(--au-navy-2) 0, transparent 55%);
  border-radius: 6px;
  padding: 44px 24px; text-align: center;
}
@media (min-width: 768px) { .au-cta__box { padding: 56px 48px; } }
/* Title + description use the full inner width of the CTA box.
   OLD description width: max-width: 620px; */
.au-cta__title {
  font-family: var(--au-head);
  font-size: clamp(24px, 3.2vw, 34px); line-height: 1.25;
  color: #fff !important; margin: 0 auto 12px; max-width: 100%;
}
.au-cta__desc {
  font-family: var(--au-body);
  font-size: 16px; line-height: 1.65;
  color: rgba(255,255,255,.8); max-width: 100%; margin: 0 auto 26px;
}
.au-cta__phone {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
}
.au-cta__btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--au-gold); color: #fff !important;
  font-family: var(--au-body); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  padding: 14px 28px; border-radius: 50px;
  text-decoration: none !important; transition: background .25s;
}
.au-cta__btn:hover { background: var(--au-gold-dk); }
/* OLD: .au-cta__note { font-family: var(--au-body); font-size: 13px; color: rgba(255,255,255,.65); } */
/* Same size, weight, spacing and colour as the .au-cta__btn text */
.au-cta__note { font-family: var(--au-body); font-size: 16px; font-weight: 700; letter-spacing: .04em; color: #fff; }