/* Header (DS Header v2: bar 60 / 56px, logo 26 / 22px, sm quote button), Footer (DS Footer v2 + Hodfords credit), CtaBand, PageHero. */

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--surface-page);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-header); }
.site-header__bar { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; }
.site-header__bar--desktop { height: 60px; padding: 0 var(--page-x); gap: 32px; }
.site-header__bar--mobile { height: 56px; padding: 0 var(--page-x-m); gap: 12px; display: none; }
.site-header__spacer { flex: 1; }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.site-header__phone {
  display: flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--font-mono); font-weight: 500;
  font-size: 14px; letter-spacing: 0.02em; color: var(--text-strong); border-radius: var(--radius-sm);
}
.site-header__phone .icon { color: var(--icon); }
.site-header__phone:hover { color: var(--text-link); }

@media (max-width: 1199px) { .site-header__phone { display: none; } }   /* compact desktop */
@media (max-width: 1023px) {
  .site-header__bar--desktop { display: none; }
  .site-header__bar--mobile { display: flex; }
}

/* desktop nav */
.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav__tab { position: relative; }
.main-nav__btn {
  position: relative; display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px 0 12px; border: 0;
  white-space: nowrap; background: transparent; border-radius: var(--radius-sm); font-family: var(--font-body);
  font-weight: 600; font-size: 15px; line-height: 1; color: var(--text-strong); cursor: pointer;
}
.main-nav__btn:hover, .main-nav__btn[aria-current="page"] { color: var(--text-link); }
.main-nav__btn[aria-expanded="true"] { background: var(--surface-inset); }
.main-nav__btn[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 10px; bottom: 0; height: 2px; background: var(--graphic); pointer-events: none;
}
.main-nav__chev { transition: transform var(--dur) var(--ease); }
.main-nav__btn[aria-expanded="true"] .main-nav__chev { transform: rotate(180deg); }

.nav-panel { position: absolute; top: 100%; left: 0; padding-top: 8px; }
.main-nav__tab--center .nav-panel { left: 50%; transform: translateX(-50%); }
.nav-panel__box {
  padding: 8px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-2);
}
.nav-panel__list { list-style: none; display: flex; flex-direction: column; }
.nav-panel__item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-strong); }
.nav-panel__item:hover { background: var(--surface-inset); color: var(--text-strong); }
.nav-panel__name { font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--text-strong); }
.nav-panel__item[aria-current="page"] .nav-panel__name { color: var(--text-link); }
.nav-panel__desc { font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.nav-panel__divider { height: 1px; background: var(--border); margin: 8px 4px; }
.nav-panel__all {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--text-link);
}
.nav-panel__all span { white-space: nowrap; }
.nav-panel__all:hover { background: var(--surface-inset); color: var(--text-link-hover); }
.nav-panel__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.nav-panel__list--split { padding-right: 8px; border-right: 1px solid var(--border); }
.nav-panel__platforms { display: flex; flex-direction: column; gap: 6px; padding-left: 8px; }
.nav-panel__pills { list-style: none; padding: 0 12px 6px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.nav-panel__pills a {
  display: flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-full); font-weight: 600; font-size: 13px; line-height: 1; color: var(--text-strong);
}
.nav-panel__pills a:hover { background: var(--surface-inset); color: var(--text-link); }

/* no-JS fallback: panels open on hover / keyboard focus */
html:not(.js) .main-nav__tab:hover .nav-panel,
html:not(.js) .main-nav__tab:focus-within .nav-panel { display: block !important; }

/* mobile menu */
.menu-toggle {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex: none;
  border: 1px solid var(--border-strong); background: transparent; border-radius: var(--radius-md); color: var(--text-strong); cursor: pointer;
}
.menu-toggle .icon { --icon-size: 22px; }
.menu-toggle__close, .menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }
.m-sheet {
  position: absolute; top: 56px; left: 0; right: 0; height: calc(100vh - 56px); height: calc(100dvh - 56px);
  background: var(--surface-page); border-top: 1px solid var(--border); overflow: auto;
}
@media (min-width: 1024px) { .m-sheet { display: none !important; } }
.m-sheet__inner { max-width: 1280px; margin: 0 auto; padding: 8px 20px 24px; min-height: 100%; display: flex; flex-direction: column; }
.m-group { display: flex; flex-direction: column; border-bottom: 1px solid var(--border); }
.m-group__btn, .m-sheet__contact {
  position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0; border: 0;
  background: transparent; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--text-strong); cursor: pointer; text-align: left;
}
.m-sheet__contact { border-bottom: 1px solid var(--border); }
.m-group__btn[aria-current="page"], .m-sheet__contact[aria-current="page"] { color: var(--text-link); }
.m-group__btn[aria-current="page"]::before, .m-sheet__contact[aria-current="page"]::before,
.m-item__link[aria-current="page"]::before {
  content: ""; position: absolute; left: -12px; top: 12px; bottom: 12px; width: 2px; background: var(--graphic); pointer-events: none;
}
.m-item__link[aria-current="page"]::before { left: 0; }
.m-group__chev { --icon-size: 20px; }
.m-group__btn[aria-expanded="true"] .m-group__chev { transform: rotate(180deg); }
.m-group__panel { display: flex; flex-direction: column; padding: 0 0 12px; }
.m-item { display: flex; flex-direction: column; }
.m-item__link {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 0 6px 16px; color: var(--text-strong);
}
.m-item__name { font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--text-strong); }
.m-item__link[aria-current="page"] .m-item__name { color: var(--text-link); }
.m-item__desc { font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.m-item__pills { list-style: none; padding: 0 0 8px 16px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.m-item__pills a {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-full); font-weight: 600; font-size: 15px; color: var(--text-strong);
}
.m-group__all { display: flex; align-items: center; gap: 8px; min-height: 48px; padding-left: 16px; font-weight: 600; font-size: 16px; color: var(--text-link); }
.m-group__all span { white-space: nowrap; }
.m-sheet__foot { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.m-sheet__hours { font-size: 14px; color: var(--text-muted); text-align: center; }
body.menu-open { overflow: hidden; }

/* ---------- footer ---------- */
.site-footer { background: var(--surface-subtle); border-top: 1px solid var(--border); }
.site-footer__inner { max-width: 1280px; margin: 0 auto; padding: 72px var(--page-x) 0; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(5, minmax(0,1fr)); gap: 32px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 20px; }
.site-footer__logo { align-self: flex-start; }
.site-footer__dc { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.site-footer__phone { align-self: flex-start; font-family: var(--font-mono); font-weight: 500; font-size: 16px; color: var(--text-strong); }
.site-footer__phone:hover { color: var(--text-link); }
.site-footer__hours { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__col .eyebrow { margin-bottom: 4px; text-wrap: balance; }
.site-footer__col a { align-self: flex-start; font-size: 15px; line-height: 1.4; color: var(--text-body); }
.site-footer__col a:hover { color: var(--text-link); }
.site-footer__bottom {
  margin-top: 64px; padding: 24px 0 32px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: baseline; justify-content: space-between; font-size: 14px; color: var(--text-muted);
}
.site-footer__credit { display: flex; flex-direction: row; align-items: baseline; gap: 16px; }
.site-footer__sep { width: 1px; height: 20px; align-self: center; background: var(--border-strong); }
.site-footer__hodfords { display: inline-flex; align-items: baseline; gap: 8px; color: var(--text-muted); }
.site-footer__hodfords img { height: 22px; width: auto; display: block; }
.site-footer__hodfords:hover { color: var(--text-link); }
.site-footer__legal { display: flex; gap: 20px; }
.site-footer__legal a { color: var(--text-muted); }
.site-footer__legal a:hover { color: var(--text-link); }
@media (max-width: 1023px) {
  .site-footer__inner { padding: 56px var(--page-x-m) 0; }
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px 32px; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .site-footer__inner { padding-top: 48px; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px 24px; }
  .site-footer__bottom { margin-top: 40px; }
  .site-footer__credit { flex-direction: column; align-items: flex-start; gap: 8px; }
  .site-footer__sep { display: none; }
}

/* ---------- CtaBand ---------- */
.cta-band { background: var(--band-bg); border-radius: var(--radius-lg); }
.cta-band__inner {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 48px; align-items: end;
  padding: 72px 64px; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
}
.cta-band__motif {
  position: absolute; right: -60px; bottom: -120px; width: 420px; height: auto; opacity: var(--motif-opacity); pointer-events: none;
}
.cta-band__text { position: relative; display: flex; flex-direction: column; gap: 16px; }
.cta-band__title {
  font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 1.08; letter-spacing: var(--tracking-display); color: var(--text-strong);
}
.cta-band__body { font-size: 18px; line-height: 1.6; color: var(--text-body); max-width: 52ch; text-wrap: pretty; }
.cta-band__actions { position: relative; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
@media (max-width: 767px) {
  .cta-band__inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 24px; }
  .cta-band__motif { right: -80px; width: 260px; }
  .cta-band__title { font-size: 34px; }
  .cta-band__body { font-size: 16px; }
  .cta-band__actions { justify-content: stretch; }
}
.cta-section { padding: 96px var(--page-x); }
@media (max-width: 767px) { .cta-section { padding: 48px var(--page-x-m) 64px; } }
.cta-section > .cta-band { max-width: 1200px; margin: 0 auto; }

/* ---------- PageHero ---------- */
.page-hero { position: relative; overflow: hidden; background: var(--surface-page); }
.page-hero__motif {
  position: absolute; right: -80px; top: -150px; width: 520px; height: auto; opacity: var(--motif-opacity); pointer-events: none;
}
.page-hero__inner {
  position: relative; max-width: 1280px; margin: 0 auto; padding: 88px var(--page-x) 72px; display: flex; flex-direction: column; gap: 20px;
}
.page-hero--compact .page-hero__inner { padding: 64px var(--page-x) 52px; }
.page-hero__title {
  font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 1.08; letter-spacing: var(--tracking-display);
  color: var(--text-strong); max-width: 20ch; text-wrap: balance;
}
.page-hero--compact .page-hero__title { font-size: 44px; }
.page-hero__sub { font-size: 18px; line-height: 1.6; color: var(--text-body); max-width: 40em; text-wrap: pretty; }
.page-hero__price {
  font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.2; letter-spacing: var(--tracking-heading); color: var(--text-strong);
}
.page-hero__call { font-size: 16px; line-height: 1.5; color: var(--text-body); }
.page-hero__call a { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (max-width: 1023px) {
  .page-hero__inner { padding: 64px var(--page-x-m) 56px; }
  .page-hero__title { font-size: 42px; }
  .page-hero--compact .page-hero__inner { padding: 40px var(--page-x-m) 36px; }
  .page-hero--compact .page-hero__title { font-size: 32px; }
  .page-hero__sub { font-size: 17px; }
  .page-hero__price { font-size: 24px; }
  .page-hero__motif { width: 260px; right: -110px; top: -70px; }
}
@media (max-width: 767px) {
  .page-hero__inner { padding: 48px var(--page-x-m) 44px; }
  .page-hero__title { font-size: 34px; }
  .page-hero__ctas .btn { width: 100%; }
}