:root {
  --navy: #1f355e;
  --navy-dark: #142746;
  --navy-deep: #0c192d;
  --gold: #d7ba50;
  --gold-dark: #b89c38;
  --paper: #f8f8f8;
  --white: #ffffff;
  --ink: #222222;
  --muted: #626b77;
  --line: #dce1e7;
  --shadow: 0 22px 58px rgba(12, 25, 45, 0.15);
  --heading: "Inter", Arial, sans-serif;
  --body: "Inter", Arial, sans-serif;
  --shell: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  line-height: 1.65;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.shell {
  width: min(var(--shell), calc(100% - 40px));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 999;
  transform: translateY(-150%);
  padding: 10px 14px;
  background: var(--white);
}
.skip-link:focus { transform: none; }

.stars { color: var(--gold); letter-spacing: 2px; }

.review-strip {
  color: var(--white);
  background: var(--navy-deep);
  font-size: 0.79rem;
}
.review-strip__inner {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(31, 53, 94, 0.12);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
}
.header-row {
  min-height: 78px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  text-decoration: none;
}
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--gold);
  background: var(--navy);
  font-family: var(--heading);
  font-size: 1.05rem;
  font-weight: 600;
}
.brand-text {
  display: grid;
  line-height: 1;
}
.brand-text strong {
  font-family: var(--heading);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.brand-text small {
  margin-top: 4px;
  font-size: 0.55rem;
  letter-spacing: 0.15em;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 32px);
}
.main-nav > a,
.nav-dropdown__trigger {
  position: relative;
  padding: 28px 0 24px;
  border: 0;
  color: var(--navy);
  background: transparent;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
}
.main-nav > a::after,
.nav-dropdown__trigger::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}
.main-nav > a:hover::after,
.main-nav > a:focus-visible::after,
.nav-dropdown__trigger:hover::after,
.nav-dropdown__trigger:focus-visible::after {
  transform: translateX(-50%) scaleX(1);
}
.nav-dropdown { position: relative; }
.nav-dropdown__menu {
  position: absolute;
  top: calc(100% - 8px);
  left: 50%;
  min-width: 250px;
  padding: 9px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 16px 40px rgba(12, 25, 45, 0.13);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 9px);
  transition: opacity 0.17s ease, transform 0.17s ease;
}
.nav-dropdown__menu a {
  display: block;
  padding: 9px 11px;
  border-bottom: 1px solid #eef1f4;
  color: var(--navy);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
}
.nav-dropdown__menu a:last-child { border-bottom: 0; }
.nav-dropdown__menu a:hover { background: #f4f5f7; }
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-phone {
  display: grid;
  color: var(--navy);
  text-align: right;
  text-decoration: none;
  line-height: 1.2;
}
.header-phone small {
  color: var(--muted);
  font-size: 0.65rem;
}
.header-phone strong { font-size: 0.88rem; }
.menu-toggle { display: none; }

.button {
  min-height: 47px;
  padding: 11px 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.button--primary {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}
.button--primary:hover,
.button--primary:focus-visible {
  color: var(--navy-deep);
  background: var(--gold);
  border-color: var(--gold);
}
.button--gold {
  color: var(--navy-deep);
  background: var(--gold);
  border-color: var(--gold);
}
.button--gold:hover,
.button--gold:focus-visible {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}
.button--compact {
  min-height: 42px;
  padding-inline: 16px;
}
.button--full { width: 100%; }

.text-link,
.text-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  color: var(--navy);
  background: none;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
}
.text-link span { transition: transform 0.18s ease; }
.text-link:hover span { transform: translateX(4px); }
.text-link--light { color: var(--white); }

.hero {
  position: relative;
  isolation: isolate;
  color: var(--white);
  background: url("assets/hero-room.jpg") center / cover no-repeat;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.43) 52%, rgba(0, 0, 0, 0.22) 100%);
}
.hero-layout {
  min-height: 620px;
  padding: 64px 0 70px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(370px, 0.72fr);
  align-items: center;
  gap: clamp(44px, 7vw, 92px);
}
.hero-copy { max-width: 650px; }
.hero h1 {
  max-width: 630px;
  margin: 0;
  font-family: var(--heading);
  font-size: clamp(3.1rem, 5.4vw, 4.65rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.hero-subtitle {
  max-width: 625px;
  margin: 20px 0 22px;
  color: rgba(255,255,255,0.9);
  font-size: 1rem;
}
.hero-service-check {
  max-width: 510px;
  margin-top: 17px;
}
.hero-service-check > label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.82rem;
  font-weight: 700;
}
.zip-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
}
.zip-row input {
  min-width: 0;
  min-height: 47px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 6px;
  background: rgba(255,255,255,0.97);
  outline: none;
}
.zip-row--light input { border-color: var(--line); }
.zip-message {
  min-height: 23px;
  margin: 7px 0 0;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
}
.zip-message--dark { color: var(--navy); }
.travel-copy {
  margin: 0;
  color: rgba(255,255,255,0.76);
  font-size: 0.75rem;
}
.travel-copy a {
  color: var(--white);
  font-weight: 700;
  text-underline-offset: 3px;
}
.hero-actions {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.budget-card {
  min-height: 500px;
  overflow: hidden;
  border-top: 4px solid var(--gold);
  border-radius: 7px;
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow);
}
.budget-card__heading {
  padding: 24px 27px 18px;
  border-bottom: 1px solid var(--line);
}
.budget-card h2 {
  margin: 0;
  color: var(--navy);
  font-family: var(--heading);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.1;
}
.budget-card__heading p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}
#budget-form {
  min-height: 345px;
  padding: 22px 27px 26px;
}
.budget-step {
  display: none;
  animation: step-in 0.2s ease;
}
.budget-step.is-active { display: block; }
@keyframes step-in {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: none; }
}
.project-type {
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 0;
}
.project-type legend,
.field > span {
  grid-column: 1 / -1;
  display: block;
  margin-bottom: 6px;
  color: var(--navy-dark);
  font-size: 0.75rem;
  font-weight: 700;
}
.project-type input {
  position: absolute;
  opacity: 0;
}
.project-type label span {
  min-height: 43px;
  padding: 8px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--navy);
  text-align: center;
  font-size: 0.73rem;
  font-weight: 700;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.project-type input:checked + span {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}
.field {
  display: block;
  margin-bottom: 13px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: var(--white);
  outline: none;
}
.field textarea {
  min-height: 125px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(31,53,94,0.08);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form-help {
  display: inline-block;
  margin-top: -4px;
  color: var(--navy);
  font-size: 0.71rem;
  font-weight: 700;
  text-underline-offset: 3px;
}
.step-back,
.step-reset {
  padding: 0;
  border: 0;
  color: var(--navy);
  background: none;
  font-size: 0.73rem;
  font-weight: 700;
}
.step-back { margin-bottom: 14px; }
.step-reset {
  display: block;
  margin: 13px auto 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.budget-result > span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.budget-result strong {
  display: block;
  margin: 8px 0;
  color: var(--navy);
  font-family: var(--heading);
  font-size: 2.45rem;
  font-weight: 600;
}
.budget-result p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.78rem;
}

.section-transition {
  height: 45px;
  margin-top: -45px;
  position: relative;
  z-index: 2;
}
.section-transition--light {
  background: var(--white);
  clip-path: polygon(0 78%, 100% 0, 100% 100%, 0 100%);
}

.section { padding: 82px 0; }
.section--white { background: var(--white); }
.section--soft { background: var(--paper); }
.section--navy {
  color: var(--white);
  background: var(--navy-deep);
}
.centered-heading {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}
.centered-heading h2,
.featured-project__copy h2,
.about-home h2,
.review-section h2,
.page-hero h1,
.service-detail h2,
.content-grid h2,
.contact-card h2,
.message-form h2,
.footer-top h2 {
  margin: 0;
  color: var(--navy);
  font-family: var(--heading);
  font-size: clamp(2rem, 3.7vw, 2.8rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
}
.centered-heading--light h2 { color: var(--white); }

.problem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 17px;
}
.problem-card {
  overflow: hidden;
  border-bottom: 3px solid var(--gold);
  background: var(--paper);
  box-shadow: 0 10px 28px rgba(12, 25, 45, 0.08);
}
.problem-image {
  position: relative;
  height: 265px;
  overflow: hidden;
  background: #ececec;
}
.problem-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.problem-label {
  position: absolute;
  inset: auto 0 0;
  padding: 16px 18px;
  color: var(--white);
  background: rgba(12,25,45,0.92);
  transform: translateY(100%);
  transition: transform 0.2s ease;
}
.problem-card:hover .problem-label,
.problem-card:focus-within .problem-label {
  transform: none;
}
.problem-label span {
  display: block;
  color: var(--gold);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.problem-label strong {
  display: block;
  margin-top: 2px;
  font-family: var(--heading);
  font-size: 1rem;
  font-weight: 600;
}
.problem-content {
  min-height: 215px;
  padding: 19px;
}
.problem-content h3,
.service-card h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-family: var(--heading);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.14;
}
.problem-content p,
.service-card p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.83rem;
}

.brand-divider {
  position: relative;
  height: 38px;
  overflow: hidden;
  background: var(--white);
}
.brand-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--navy), transparent);
  background-size: 200% 100%;
  animation: divider-shift 9s linear infinite;
}
.brand-divider span {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--gold);
  background: var(--white);
  transform: translateX(-50%) rotate(45deg);
}
.brand-divider--reverse { background: var(--navy-deep); }
.brand-divider--reverse span { background: var(--navy-deep); }
@keyframes divider-shift {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.service-carousel-wrap { position: relative; }
.service-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 34px) / 3);
  gap: 17px;
  overflow-x: auto;
  padding: 3px 0 16px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.service-carousel::-webkit-scrollbar { display: none; }
.service-card {
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 9px 25px rgba(12,25,45,0.06);
  scroll-snap-align: start;
}
.service-card img {
  width: 100%;
  height: 215px;
  object-fit: cover;
}
.service-card__body { padding: 19px; }
.service-card__body p { min-height: 82px; }
.service-card a {
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 700;
  text-underline-offset: 4px;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 43px;
  height: 43px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--navy);
  background: var(--white);
  box-shadow: 0 7px 20px rgba(12,25,45,0.12);
  transform: translateY(-50%);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.carousel-arrow:hover {
  color: var(--navy-deep);
  background: var(--gold);
}
.carousel-arrow--left { left: -21px; }
.carousel-arrow--right { right: -21px; }

.featured-project {
  padding: 88px 0;
  background: var(--white);
}
.featured-project__grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  align-items: center;
  gap: 7vw;
}
.featured-project__image {
  position: relative;
}
.featured-project__image::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 48%;
  height: 44%;
  border-right: 4px solid var(--gold);
  border-bottom: 4px solid var(--gold);
  z-index: 0;
}
.featured-project__image img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 570px;
  object-fit: cover;
  box-shadow: var(--shadow);
}
.featured-project__copy p {
  margin: 15px 0 24px;
  color: var(--muted);
}

.before-after {
  position: relative;
  height: clamp(390px, 53vw, 620px);
  overflow: hidden;
  border-radius: 7px;
  background: #ddd;
  box-shadow: var(--shadow);
}
.before-after > img,
.before-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.before-layer {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
}
.before-layer img {
  width: min(var(--shell), calc(100vw - 40px));
  max-width: none;
}
.before-after input {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}
.slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: 2px;
  background: var(--white);
  transform: translateX(-50%);
}
.slider-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 4px solid var(--white);
  border-radius: 50%;
  color: var(--navy);
  background: var(--gold);
  transform: translate(-50%, -50%);
  font-weight: 900;
}
.image-tag {
  position: absolute;
  top: 16px;
  z-index: 4;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--white);
  background: rgba(12,25,45,0.84);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
.image-tag--left { left: 16px; }
.image-tag--right { right: 16px; }

.about-home__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 7vw;
}
.about-home__grid img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  box-shadow: var(--shadow);
}
.about-home__copy p {
  color: var(--muted);
}

.review-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #eef1f5, #ffffff);
}
.review-section__inner {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  align-items: center;
  gap: 7vw;
}
.review-section__rating h2 {
  margin-top: 10px;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
}
.review-section blockquote {
  margin: 0;
  padding: 36px;
  border-left: 4px solid var(--gold);
  background: var(--white);
  box-shadow: 0 16px 42px rgba(12,25,45,0.08);
}
.review-section blockquote p {
  margin: 0 0 15px;
  color: var(--navy);
  font-family: var(--heading);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 400;
  line-height: 1.3;
}
.review-section blockquote footer {
  color: var(--muted);
  font-weight: 600;
}

.site-footer {
  color: rgba(255,255,255,0.72);
  background: var(--navy-deep);
}
.footer-top {
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-top__inner {
  min-height: 145px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.footer-top h2 {
  color: var(--white);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}
.footer-top p {
  margin: 6px 0 0;
  color: rgba(255,255,255,0.72);
}
.footer-grid {
  padding: 56px 0 43px;
  display: grid;
  grid-template-columns: 1.45fr 0.72fr 0.72fr 0.85fr;
  gap: 48px;
}
.brand--footer { color: var(--white); }
.footer-brand p {
  max-width: 420px;
  font-size: 0.83rem;
}
.footer-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-column h3 {
  margin: 0 0 7px;
  color: var(--white);
  font-family: var(--heading);
  font-size: 1rem;
  font-weight: 600;
}
.footer-column a {
  text-decoration: none;
  font-size: 0.81rem;
}
.footer-column a:hover { color: var(--white); }
.footer-bottom {
  padding: 17px 0 22px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.7rem;
}
.footer-bottom a {
  color: var(--gold);
  text-decoration: none;
}

.page-hero {
  padding: 72px 0 66px;
  color: var(--white);
  background: linear-gradient(135deg, var(--navy-deep), var(--navy));
}
.page-hero h1 { color: var(--white); }
.page-hero p {
  max-width: 700px;
  margin: 12px 0 0;
  color: rgba(255,255,255,0.77);
}

.service-detail {
  padding: 72px 0;
  background: var(--white);
}
.service-detail--soft { background: var(--paper); }
.service-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 6vw;
}
.service-detail img {
  width: 100%;
  height: 390px;
  object-fit: cover;
  box-shadow: var(--shadow);
}
.service-detail p,
.content-grid p,
.content-grid li {
  color: var(--muted);
}

.content-section {
  padding: 76px 0;
  background: var(--white);
}
.content-section--soft { background: var(--paper); }
.content-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 7vw;
}
.single-review {
  max-width: 780px;
  margin: 0 auto;
  padding: 36px;
  border-left: 4px solid var(--gold);
  background: var(--white);
  box-shadow: 0 15px 40px rgba(12,25,45,0.08);
}
.single-review p {
  color: var(--navy);
  font-family: var(--heading);
  font-size: 1.8rem;
  line-height: 1.3;
}
.single-review footer {
  color: var(--muted);
  font-weight: 600;
}
.faq-list details {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  color: var(--navy);
  cursor: pointer;
  font-weight: 700;
}
.faq-list p { margin: 9px 0 0; }

.contact-section {
  padding: 78px 0;
  background: var(--paper);
}
.contact-layout {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 5vw;
}
.contact-card {
  padding: 34px;
  color: var(--white);
  background: var(--navy-deep);
}
.contact-card h2 { color: var(--white); }
.contact-item {
  margin-top: 22px;
  display: grid;
}
.contact-item span {
  color: var(--gold);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.contact-item a {
  color: var(--white);
  text-decoration: none;
}
.contact-zip {
  margin-top: 31px;
  padding-top: 25px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.contact-zip h3 {
  font-family: var(--heading);
  font-size: 1.1rem;
  font-weight: 600;
}
.contact-zip p {
  color: rgba(255,255,255,0.7);
  font-size: 0.76rem;
}
.message-form {
  padding: 34px;
  border-top: 4px solid var(--gold);
  background: var(--white);
  box-shadow: var(--shadow);
}
.message-form h2 {
  margin-bottom: 22px;
  font-size: 2.1rem;
}
.form-status {
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 700;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal--delay { transition-delay: 0.1s; }

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1080px) {
  .header-row { grid-template-columns: auto auto 1fr; }
  .menu-toggle {
    width: 40px;
    height: 40px;
    display: grid;
    place-content: center;
    gap: 5px;
    border: 0;
    background: transparent;
  }
  .menu-toggle span {
    width: 23px;
    height: 2px;
    display: block;
    background: var(--navy);
  }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px 20px 16px;
    display: grid;
    justify-content: stretch;
    gap: 0;
    border-bottom: 1px solid var(--line);
    background: var(--white);
    opacity: 0;
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .main-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: scaleY(1);
  }
  .main-nav > a,
  .nav-dropdown__trigger {
    width: 100%;
    padding: 12px 0;
    text-align: left;
    border-bottom: 1px solid var(--line);
  }
  .main-nav > a::after,
  .nav-dropdown__trigger::after {
    left: 25px;
    bottom: 6px;
    width: 50px;
  }
  .nav-dropdown__menu {
    position: static;
    min-width: 0;
    display: none;
    padding: 0 0 5px 16px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-dropdown.is-open .nav-dropdown__menu { display: block; }
  .header-actions { justify-self: end; }
  .header-phone { display: none; }
  .hero-layout {
    grid-template-columns: 1fr 400px;
    gap: 38px;
  }
  .problem-grid { grid-template-columns: 1fr 1fr; }
  .service-carousel { grid-auto-columns: calc((100% - 17px) / 2); }
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
  .footer-column:last-child {
    grid-column: 2 / 4;
  }
}

@media (max-width: 820px) {
  .header-row { min-height: 68px; }
  .header-actions { display: none; }
  .hero-layout {
    padding: 54px 0 0;
    grid-template-columns: 1fr;
  }
  .hero-copy { padding-bottom: 32px; }
  .budget-card {
    width: min(94%, 570px);
    margin: 0 auto -78px;
    position: relative;
    z-index: 3;
  }
  .section-transition {
    height: 105px;
    margin-top: 0;
    clip-path: none;
  }
  .section { padding: 72px 0; }
  .problem-grid { margin-top: 20px; }
  .service-carousel { grid-auto-columns: 76%; }
  .featured-project__grid,
  .about-home__grid,
  .review-section__inner,
  .service-detail__grid,
  .content-grid,
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .about-home__grid img { height: 400px; }
  .footer-top__inner {
    padding: 30px 0;
    align-items: flex-start;
    flex-direction: column;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-column:last-child { grid-column: auto; }
}

@media (max-width: 560px) {
  .shell { width: calc(100% - 28px); }
  .hero-layout { width: 100%; }
  .hero-copy {
    width: calc(100% - 28px);
    margin-inline: auto;
  }
  .hero h1 { font-size: 2.8rem; }
  .hero-subtitle { font-size: 0.94rem; }
  .zip-row { grid-template-columns: 1fr; }
  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .budget-card { width: calc(100% - 18px); }
  .budget-card__heading,
  #budget-form {
    padding-left: 19px;
    padding-right: 19px;
  }
  .project-type,
  .form-row { grid-template-columns: 1fr; }
  .centered-heading h2,
  .featured-project__copy h2,
  .about-home h2,
  .review-section h2,
  .page-hero h1,
  .service-detail h2,
  .content-grid h2,
  .contact-card h2,
  .message-form h2 {
    font-size: 2rem;
  }
  .problem-grid { grid-template-columns: 1fr; }
  .problem-image { height: 290px; }
  .problem-label { transform: none; }
  .problem-content { min-height: 0; }
  .service-carousel { grid-auto-columns: 88%; }
  .carousel-arrow { display: none; }
  .before-after { height: 420px; }
  .about-home__grid img { height: 340px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-bottom {
    flex-direction: column;
    gap: 7px;
  }
}


/* v10: two-level contractor header modeled after the supplied reference */
.review-strip {
  display: none !important;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border: 0;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(12, 25, 45, 0.08);
  backdrop-filter: none;
}

.desktop-masthead {
  display: block;
  background: var(--white);
}

.desktop-masthead__grid {
  min-height: 142px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 36px;
}

.masthead-review {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding-top: 25px;
}

.masthead-review__line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 0.82rem;
  white-space: nowrap;
}

.masthead-review__line > strong {
  color: var(--gold-dark);
  font-family: var(--heading);
  font-size: 1.2rem;
  font-weight: 700;
}

.masthead-review__line .stars {
  font-size: 0.93rem;
}

.masthead-review__line a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.brand--masthead {
  align-self: center;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.brand-mark--large {
  width: 72px;
  height: 62px;
  border-radius: 4px;
  font-size: 1.75rem;
}

.brand-text--large strong {
  font-size: 1.35rem;
  letter-spacing: 0.08em;
}

.brand-text--large small {
  margin-top: 6px;
  font-size: 0.62rem;
  letter-spacing: 0.19em;
}

.masthead-actions {
  align-self: stretch;
  display: grid;
  justify-items: end;
  align-content: space-between;
  padding: 18px 0 20px;
}

.masthead-schedule {
  min-width: 205px;
}

.masthead-phone {
  display: grid;
  color: var(--ink);
  text-align: right;
  text-decoration: none;
  line-height: 1.1;
}

.masthead-phone small {
  margin-bottom: 4px;
  font-size: 0.72rem;
}

.masthead-phone strong {
  font-family: var(--heading);
  font-size: 1.42rem;
  font-weight: 700;
}

.nav-band {
  position: relative;
  background: var(--navy);
}

.nav-band__inner {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4.5vw, 72px);
}

.main-nav > a,
.nav-dropdown__trigger {
  padding: 18px 0 17px;
  color: var(--white);
  font-family: var(--heading);
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.main-nav > a::after,
.nav-dropdown__trigger::after {
  bottom: 11px;
  background: var(--gold);
}

.nav-dropdown__menu {
  top: 100%;
}

.mobile-masthead {
  display: none;
}

/* The first content section should sit directly under the colored nav bar. */
.hero,
.page-hero {
  scroll-margin-top: 230px;
}

@media (max-width: 1080px) {
  .desktop-masthead {
    display: none;
  }

  .mobile-masthead {
    display: block;
    padding: 8px 0 10px;
    background: var(--white);
  }

  .mobile-review {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--ink);
    font-size: 0.67rem;
  }

  .mobile-review > strong {
    color: var(--gold-dark);
    font-family: var(--heading);
    font-size: 0.82rem;
  }

  .mobile-review .stars {
    font-size: 0.68rem;
    letter-spacing: 0;
  }

  .mobile-review a {
    color: var(--ink);
    text-underline-offset: 2px;
  }

  .mobile-brand-row {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .brand--mobile {
    gap: 9px;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
    display: grid;
    place-content: center;
    gap: 6px;
    border: 0;
    background: transparent;
  }

  .menu-toggle span {
    width: 25px;
    height: 2px;
    display: block;
    background: var(--navy);
  }

  .mobile-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mobile-cta-row .button {
    min-height: 42px;
    padding: 9px 10px;
    font-size: 0.74rem;
  }

  .nav-band {
    background: var(--navy);
  }

  .nav-band__inner {
    min-height: 0;
    display: block;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    display: grid;
    justify-content: stretch;
    gap: 0;
    padding: 8px 20px 16px;
    border-top: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.18);
    background: var(--navy);
    opacity: 0;
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .main-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: scaleY(1);
  }

  .main-nav > a,
  .nav-dropdown__trigger {
    width: 100%;
    padding: 13px 0;
    color: var(--white);
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.14);
  }

  .main-nav > a::after,
  .nav-dropdown__trigger::after {
    left: 25px;
    bottom: 7px;
    width: 50px;
  }

  .nav-dropdown__menu {
    position: static;
    min-width: 0;
    display: none;
    padding: 0 0 5px 16px;
    border: 0;
    background: rgba(0,0,0,0.12);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-dropdown.is-open .nav-dropdown__menu {
    display: block;
  }

  .nav-dropdown__menu a {
    color: var(--white);
    border-bottom-color: rgba(255,255,255,0.12);
  }

  .nav-dropdown__menu a:hover {
    background: rgba(255,255,255,0.08);
  }

  .header-row,
  .header-actions {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .mobile-masthead {
    padding-top: 5px;
  }

  .mobile-review {
    min-height: 24px;
    font-size: 0.62rem;
  }

  .mobile-brand-row {
    min-height: 62px;
  }

  .brand--mobile .brand-mark {
    width: 39px;
    height: 39px;
  }

  .brand--mobile .brand-text strong {
    font-size: 0.98rem;
  }

  .brand--mobile .brand-text small {
    font-size: 0.51rem;
  }

  .mobile-cta-row {
    width: calc(100% - 18px);
  }
}


/* v11 typography */
body,
p,
li,
input,
select,
textarea {
  font-family: "Inter", Arial, sans-serif;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero h1,
.budget-card h2,
.centered-heading h2,
.featured-project__copy h2,
.about-home h2,
.review-section h2,
.page-hero h1,
.service-detail h2,
.content-grid h2,
.contact-card h2,
.message-form h2,
.footer-top h2,
.problem-content h3,
.service-card h3,
.service-row__content h2,
.service-row__content h3 {
  font-family: "Inter", Arial, sans-serif;
  font-weight: 700;
}

.button,
.service-row__button,
.text-button,
.text-link {
  font-family: "Inter", Arial, sans-serif;
  font-weight: 500;
}

/* v11 service list layout based on the supplied reference */
.service-list-section {
  padding: 82px 0;
  background: var(--paper);
}

.service-list-section--page {
  padding-top: 54px;
}

.service-list {
  display: grid;
  gap: 20px;
}

.service-row {
  position: relative;
  min-height: 150px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
  padding: 14px 20px 14px 16px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--gold);
  border-radius: 7px;
  background: var(--white);
  box-shadow: 0 5px 15px rgba(12, 25, 45, 0.10);
}

.service-row__image {
  width: 190px;
  height: 118px;
  overflow: hidden;
  border-radius: 5px;
  background: #e9ecef;
}

.service-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-row__content {
  min-width: 0;
}

.service-row__content h2,
.service-row__content h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 1.05rem;
  line-height: 1.25;
}

.service-row__content p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.service-row__button {
  min-width: 145px;
  min-height: 44px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--navy);
  border-radius: 6px;
  color: var(--navy);
  background: var(--white);
  text-decoration: none;
  font-size: 0.75rem;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.service-row__button span {
  transition: transform 0.18s ease;
}

.service-row__button:hover,
.service-row__button:focus-visible {
  color: var(--navy-deep);
  background: var(--gold);
  border-color: var(--gold);
}

.service-row__button:hover span,
.service-row__button:focus-visible span {
  transform: translateX(4px);
}

/* The gold is used as a clear accent stripe. Navy is used for titles
   because it has much stronger contrast on white. */
.service-list-section .centered-heading {
  margin-bottom: 30px;
}

@media (max-width: 900px) {
  .service-row {
    grid-template-columns: 155px minmax(0, 1fr);
  }

  .service-row__image {
    width: 155px;
    height: 108px;
  }

  .service-row__button {
    grid-column: 2;
    justify-self: start;
    margin-top: -4px;
  }
}

@media (max-width: 620px) {
  .service-list-section {
    padding: 65px 0;
  }

  .service-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px 12px 16px;
    border-left-width: 5px;
  }

  .service-row__image {
    width: 100%;
    height: 210px;
  }

  .service-row__content h2,
  .service-row__content h3 {
    font-size: 1rem;
  }

  .service-row__content p {
    font-size: 0.82rem;
  }

  .service-row__button {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }
}


/* v12 simplified masthead */
.desktop-masthead__grid {
  grid-template-columns: 1fr auto 1fr;
}

.brand--masthead {
  grid-column: 2;
}

.masthead-actions {
  grid-column: 3;
  align-self: center;
  align-content: center;
  padding: 0;
}

.masthead-phone {
  text-align: right;
}

.mobile-masthead {
  padding-top: 9px;
}

.mobile-brand-row {
  min-height: 72px;
}

/* v12 service-area section */
.service-area-showcase {
  padding: 88px 0;
  background: var(--white);
}

.service-area-showcase__grid {
  display: grid;
  grid-template-columns: minmax(420px, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(48px, 7vw, 92px);
}

.service-area-showcase__grid--about {
  padding-top: 10px;
  padding-bottom: 10px;
}

.service-area-map {
  display: flex;
  justify-content: center;
}

.service-area-map img {
  width: 100%;
  max-width: 660px;
  max-height: 610px;
  object-fit: contain;
}

.service-area-copy h2 {
  margin: 0 0 30px;
  color: var(--navy);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(2rem, 3.7vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.service-city-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.service-city-grid ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  list-style: none;
}

.service-city-grid li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 400;
}

.location-pin {
  position: relative;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 3px solid var(--navy);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.location-pin::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--navy);
}

.service-area-note {
  margin-top: 34px;
}

.service-area-note strong {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 700;
}

.service-area-note p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.service-area-button {
  width: 100%;
  margin-top: 28px;
  min-height: 52px;
}

/* Remove unused hero ZIP area spacing */
.hero-copy .hero-actions {
  margin-top: 28px;
}

@media (max-width: 900px) {
  .service-area-showcase__grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .service-area-map img {
    max-height: 500px;
  }
}

@media (max-width: 560px) {
  .service-area-showcase {
    padding: 65px 0;
  }

  .service-area-copy h2 {
    margin-bottom: 24px;
    font-size: 2rem;
    text-align: center;
  }

  .service-city-grid {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .service-city-grid li {
    font-size: 0.92rem;
  }

  .service-area-note {
    margin-top: 27px;
  }

  .service-area-button {
    width: 100%;
  }
}


/* v13: textured full-page background with one centered website container */
html {
  background: #ecebea;
}

body {
  min-height: 100vh;
  background-color: #ecebea;
  background-image:
    linear-gradient(rgba(255,255,255,0.14), rgba(255,255,255,0.14)),
    url("assets/drywall-texture.png");
  background-repeat: repeat;
  background-size: 540px 360px;
  background-attachment: fixed;
}

/* Header stays full width, like the supplied reference site. */
.site-header {
  width: 100%;
}

/* All page content sits inside one large white container. */
main#main {
  width: min(1520px, calc(100% - 72px));
  margin: 52px auto 0;
  overflow: hidden;
  border-top: 5px solid var(--gold);
  background: var(--white);
  box-shadow:
    0 18px 52px rgba(12, 25, 45, 0.16),
    0 2px 8px rgba(12, 25, 45, 0.08);
}

/* Keep the footer aligned with the same container so the entire site
   reads as one centered panel on top of the drywall texture. */
.site-footer {
  width: min(1520px, calc(100% - 72px));
  margin: 0 auto 64px;
  box-shadow:
    0 22px 52px rgba(12, 25, 45, 0.15),
    0 3px 9px rgba(12, 25, 45, 0.07);
}

/* The first section should meet the gold rule cleanly. */
main#main > .hero,
main#main > .page-hero {
  margin-top: 0;
}

/* Slightly more contained spacing, similar to the reference layout. */
main#main .section,
main#main .featured-project,
main#main .service-area-showcase,
main#main .review-section,
main#main .content-section,
main#main .contact-section,
main#main .service-list-section,
main#main .service-detail {
  position: relative;
}

/* Prevent the decorative separators from visually spilling outside
   the main white panel. */
main#main .brand-divider,
main#main .section-transition {
  max-width: 100%;
}

/* Desktop breathing room around the content panel. */
@media (min-width: 1521px) {
  main#main,
  .site-footer {
    width: 1460px;
  }
}

@media (max-width: 900px) {
  body {
    background-attachment: scroll;
  }

  main#main,
  .site-footer {
    width: calc(100% - 28px);
  }

  main#main {
    margin-top: 24px;
    border-top-width: 4px;
  }

  .site-footer {
    margin-bottom: 24px;
  }
}

@media (max-width: 560px) {
  body {
    background-image:
      linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.10)),
      url("assets/drywall-texture.png");
    background-size: 420px 280px;
  }

  main#main,
  .site-footer {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-shadow: none;
  }

  main#main {
    margin-top: 0;
  }

  .site-footer {
    margin-bottom: 0;
  }
}


/* v14: narrower contained site + dark charcoal menu bar + disappearing top accent */
:root {
  --header-charcoal: #2d2d2d;
  --header-accent-blue: #234b7d;
}

/* Thin blue line like the supplied reference.
   It smoothly disappears once the page begins scrolling. */
.site-header {
  position: sticky;
  top: 0;
  padding-top: 7px;
  transition: padding-top 0.22s ease, box-shadow 0.22s ease;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: var(--header-accent-blue);
  transform-origin: top;
  transition: height 0.22s ease, opacity 0.22s ease;
  z-index: 2;
}

.site-header.is-scrolled {
  padding-top: 0;
  box-shadow: 0 4px 18px rgba(12, 25, 45, 0.12);
}

.site-header.is-scrolled::before {
  height: 0;
  opacity: 0;
}

/* Dark charcoal navigation band, matching the new reference. */
.nav-band {
  background: var(--header-charcoal);
}

.main-nav > a,
.nav-dropdown__trigger {
  color: #ffffff;
}

.main-nav > a::after,
.nav-dropdown__trigger::after {
  background: var(--gold);
}

.nav-dropdown__menu {
  border-color: rgba(255,255,255,0.10);
  background: #333333;
}

.nav-dropdown__menu a {
  color: #ffffff;
  border-bottom-color: rgba(255,255,255,0.10);
}

.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus-visible {
  background: rgba(255,255,255,0.08);
}

/* Make the large white website panel noticeably narrower so more
   drywall texture is visible around it. */
main#main,
.site-footer {
  width: min(1280px, calc(100% - 120px));
}

@media (min-width: 1400px) {
  main#main,
  .site-footer {
    width: 1240px;
  }
}

/* Keep interior content proportional inside the narrower panel. */
main#main .shell,
.site-footer .shell {
  width: min(1100px, calc(100% - 48px));
}

/* Mobile menu uses the same charcoal color. */
@media (max-width: 1080px) {
  .nav-band,
  .main-nav {
    background: var(--header-charcoal);
  }

  .main-nav {
    border-top-color: rgba(255,255,255,0.10);
    border-bottom-color: rgba(255,255,255,0.14);
  }

  .nav-dropdown__menu {
    background: rgba(0,0,0,0.16);
  }
}

@media (max-width: 900px) {
  main#main,
  .site-footer {
    width: calc(100% - 40px);
  }

  main#main .shell,
  .site-footer .shell {
    width: calc(100% - 32px);
  }
}

@media (max-width: 560px) {
  .site-header {
    padding-top: 5px;
  }

  .site-header::before {
    height: 5px;
  }

  main#main,
  .site-footer {
    width: 100%;
  }

  main#main .shell,
  .site-footer .shell {
    width: calc(100% - 28px);
  }
}


/* v15 masthead alignment refinements */
.site-header {
  padding-top: 14px;
}

.site-header::before {
  height: 14px;
}

/* Left-side service area wording, balanced against the phone on the right. */
.masthead-service-area {
  grid-column: 1;
  align-self: center;
  justify-self: start;
  color: #444444;
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.96rem;
  font-weight: 400;
  white-space: nowrap;
}

/* Keep the logo perfectly centered in the middle column. */
.brand--masthead {
  grid-column: 2;
  justify-self: center;
}

/* Move the phone slightly lower, like the supplied reference header. */
.masthead-actions {
  grid-column: 3;
  align-self: center;
  justify-self: end;
  transform: translateY(10px);
}

.masthead-phone small {
  margin-bottom: 6px;
}

/* The thicker blue line still disappears after scrolling. */
.site-header.is-scrolled {
  padding-top: 0;
}

.site-header.is-scrolled::before {
  height: 0;
}

@media (max-width: 1080px) {
  .site-header {
    padding-top: 10px;
  }

  .site-header::before {
    height: 10px;
  }

  .masthead-service-area {
    display: none;
  }

  .masthead-actions {
    transform: none;
  }
}

@media (max-width: 560px) {
  .site-header {
    padding-top: 8px;
  }

  .site-header::before {
    height: 8px;
  }
}


/* v16: bottom scheduling prompt and Calendly drawer */
.schedule-prompt {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 220;
  width: min(760px, calc(100% - 36px));
  min-height: 82px;
  padding: 15px 18px 15px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 22px;
  border-left: 5px solid var(--gold);
  border-radius: 8px;
  color: var(--white);
  background: var(--navy-deep);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(100% + 45px));
  transition:
    opacity 0.28s ease,
    transform 0.32s cubic-bezier(.2,.75,.25,1);
}

.schedule-prompt.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.schedule-prompt__copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.schedule-prompt__copy strong {
  color: var(--white);
  font-family: "Inter", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.schedule-prompt__copy span {
  color: rgba(255,255,255,0.72);
  font-size: 0.78rem;
}

.schedule-prompt__button {
  min-width: 145px;
}

.schedule-prompt__close {
  position: absolute;
  top: 5px;
  right: 8px;
  width: 27px;
  height: 27px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  color: rgba(255,255,255,0.65);
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
}

.schedule-prompt__close:hover,
.schedule-prompt__close:focus-visible {
  color: var(--white);
}

.scheduler-backdrop {
  position: fixed;
  inset: 0;
  z-index: 230;
  background: rgba(7, 15, 27, 0.58);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.scheduler-backdrop.is-visible {
  opacity: 1;
}

.scheduler-drawer {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 240;
  width: min(980px, calc(100% - 32px));
  max-height: min(88vh, 820px);
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: var(--white);
  box-shadow: 0 -24px 65px rgba(0, 0, 0, 0.30);
  transform: translate(-50%, 105%);
  transition: transform 0.38s cubic-bezier(.2,.78,.24,1);
}

.scheduler-drawer.is-open {
  transform: translate(-50%, 0);
}

.scheduler-drawer__header {
  min-height: 82px;
  padding: 17px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-top: 5px solid var(--gold);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.scheduler-drawer__header span {
  display: block;
  margin-bottom: 2px;
  color: var(--gold-dark);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.scheduler-drawer__header h2 {
  margin: 0;
  color: var(--navy);
  font-family: "Inter", Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
}

.scheduler-drawer__close {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--navy);
  background: var(--white);
  font-size: 1.55rem;
  line-height: 1;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.scheduler-drawer__close:hover,
.scheduler-drawer__close:focus-visible {
  border-color: var(--gold);
  background: var(--gold);
}

.scheduler-drawer__body {
  max-height: calc(min(88vh, 820px) - 82px);
  overflow-y: auto;
  background: #f7f8fa;
}

.calendly-inline-widget {
  width: 100%;
  min-height: 650px;
  background: var(--white);
}

.scheduler-fallback {
  padding: 12px 20px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  background: var(--white);
  font-size: 0.78rem;
  text-align: center;
}

.scheduler-fallback p {
  margin: 0;
}

.scheduler-fallback a {
  color: var(--navy);
  font-weight: 700;
}

body.scheduler-open {
  overflow: hidden;
}

@media (max-width: 680px) {
  .schedule-prompt {
    bottom: 10px;
    width: calc(100% - 20px);
    padding: 16px 16px 14px;
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }

  .schedule-prompt__copy {
    padding: 0 20px;
  }

  .schedule-prompt__button {
    width: 100%;
  }

  .scheduler-drawer {
    width: 100%;
    max-height: 92vh;
    border-radius: 12px 12px 0 0;
  }

  .scheduler-drawer__header {
    min-height: 74px;
    padding: 13px 15px;
  }

  .scheduler-drawer__header h2 {
    font-size: 1.08rem;
  }

  .scheduler-drawer__body {
    max-height: calc(92vh - 74px);
  }

  .calendly-inline-widget {
    min-height: 700px;
    height: 700px !important;
  }

  .scheduler-fallback {
    align-items: center;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .schedule-prompt,
  .scheduler-backdrop,
  .scheduler-drawer {
    transition-duration: 0.01ms !important;
  }
}


/* v17: always-visible bottom schedule dock with click-to-toggle drawer */

/* Hide the v16 components completely. */
.schedule-prompt,
.scheduler-backdrop,
.scheduler-drawer {
  display: none !important;
}

:root {
  --schedule-dock-height: 76px;
}

body {
  padding-bottom: var(--schedule-dock-height);
}

.schedule-dock {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 260;
  width: min(980px, calc(100% - 32px));
  transform: translateX(-50%);
  filter: drop-shadow(0 -12px 26px rgba(0,0,0,0.18));
}

.schedule-dock__toggle {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: var(--schedule-dock-height);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  border: 0;
  border-top: 4px solid var(--gold);
  color: var(--white);
  background: var(--navy-deep);
  text-align: left;
}

.schedule-dock__toggle:hover,
.schedule-dock__toggle:focus-visible {
  background: #10223d;
}

.schedule-dock__copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.schedule-dock__copy strong {
  color: var(--white);
  font-family: "Inter", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.schedule-dock__copy small {
  color: rgba(255,255,255,0.7);
  font-size: 0.76rem;
  font-weight: 400;
}

.schedule-dock__action {
  flex: 0 0 auto;
  min-width: 160px;
  min-height: 42px;
  padding: 9px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 6px;
  color: var(--navy-deep);
  background: var(--gold);
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
}

.schedule-dock__chevron {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.24s ease;
}

.schedule-dock.is-open .schedule-dock__chevron {
  transform: rotate(180deg);
}

.schedule-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--schedule-dock-height);
  max-height: min(78vh, 760px);
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: var(--white);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + var(--schedule-dock-height)));
  transition:
    transform 0.36s cubic-bezier(.2,.78,.24,1),
    opacity 0.22s ease;
}

.schedule-dock.is-open .schedule-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.schedule-panel__inner {
  max-height: min(78vh, 760px);
  overflow-y: auto;
  border-top: 5px solid var(--gold);
  background: #f7f8fa;
}

.schedule-panel .calendly-inline-widget {
  width: 100%;
  min-height: 650px;
  background: var(--white);
}

.schedule-panel__fallback {
  padding: 12px 18px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  background: var(--white);
  font-size: 0.76rem;
  text-align: center;
}

.schedule-panel__fallback a {
  color: var(--navy);
  font-weight: 700;
}

@media (max-width: 680px) {
  :root {
    --schedule-dock-height: 86px;
  }

  body {
    padding-bottom: var(--schedule-dock-height);
  }

  .schedule-dock {
    width: 100%;
  }

  .schedule-dock__toggle {
    padding: 12px 14px;
    gap: 12px;
    border-top-width: 3px;
  }

  .schedule-dock__copy strong {
    font-size: 0.88rem;
  }

  .schedule-dock__copy small {
    display: none;
  }

  .schedule-dock__action {
    min-width: 126px;
    min-height: 40px;
    padding-inline: 12px;
    font-size: 0.72rem;
  }

  .schedule-panel {
    max-height: calc(92vh - var(--schedule-dock-height));
    border-radius: 10px 10px 0 0;
  }

  .schedule-panel__inner {
    max-height: calc(92vh - var(--schedule-dock-height));
  }

  .schedule-panel .calendly-inline-widget {
    min-height: 700px;
    height: 700px !important;
  }

  .schedule-panel__fallback {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .schedule-panel,
  .schedule-dock__chevron {
    transition-duration: 0.01ms !important;
  }
}


/* v18: centered schedule message with circular open/close icon */
.schedule-dock__toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  padding-left: 74px;
  padding-right: 74px;
}

.schedule-dock__copy {
  justify-items: center;
  text-align: center;
}

.schedule-dock__copy strong {
  text-align: center;
}

.schedule-dock__copy small {
  text-align: center;
}

/* Remove the old labeled action button. */
.schedule-dock__action,
.schedule-dock__action-text,
.schedule-dock__chevron {
  display: none !important;
}

.schedule-dock__icon {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid var(--gold);
  border-radius: 50%;
  color: var(--navy-deep);
  background: var(--gold);
  transform: translateY(-50%);
  font-family: "Inter", Arial, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.schedule-dock__toggle:hover .schedule-dock__icon,
.schedule-dock__toggle:focus-visible .schedule-dock__icon {
  color: var(--white);
  background: var(--navy);
  border-color: var(--gold);
}

.schedule-dock__icon-open,
.schedule-dock__icon-close {
  grid-area: 1 / 1;
}

.schedule-dock__icon-close {
  display: none;
  font-size: 1.5rem;
  font-weight: 400;
}

.schedule-dock.is-open .schedule-dock__icon-open {
  display: none;
}

.schedule-dock.is-open .schedule-dock__icon-close {
  display: block;
}

@media (max-width: 680px) {
  .schedule-dock__toggle {
    padding-left: 58px;
    padding-right: 58px;
  }

  .schedule-dock__copy {
    padding: 0;
  }

  .schedule-dock__copy strong {
    font-size: 0.86rem;
  }

  .schedule-dock__icon {
    right: 12px;
    width: 38px;
    height: 38px;
  }
}


/* v19: reference-inspired homepage hero with a wide request-a-call form */
.hero--call-request {
  min-height: 650px;
  background-position: center 58%;
}

.hero--call-request .hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(35, 30, 25, 0.66) 0%,
      rgba(54, 47, 39, 0.54) 52%,
      rgba(35, 30, 25, 0.44) 100%
    );
}

.hero-call-layout {
  min-height: 650px;
  padding: 74px 0 38px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 38px;
}

.hero-call-copy {
  max-width: 760px;
  margin: 0 auto;
  color: var(--white);
  text-align: center;
}

.hero-call-copy h1 {
  margin: 0;
  color: var(--white);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(2.65rem, 5vw, 4.35rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.hero-call-copy h2 {
  margin: 12px 0 0;
  color: var(--white);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(1.45rem, 2.7vw, 2.35rem);
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0,0,0,0.22);
}

.hero-call-highlights {
  margin-top: 20px;
  display: grid;
  gap: 4px;
  color: rgba(255,255,255,0.96);
  font-size: clamp(0.88rem, 1.3vw, 1.03rem);
  font-weight: 600;
  line-height: 1.5;
}

.hero-phone-button {
  min-width: 295px;
  min-height: 50px;
  margin-top: 25px;
  padding: 12px 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 7px;
  color: var(--white);
  background: var(--navy);
  text-decoration: none;
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.94rem;
  font-weight: 700;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.hero-phone-button:hover,
.hero-phone-button:focus-visible {
  color: var(--navy-deep);
  background: var(--gold);
  border-color: var(--gold);
}

.hero-call-form {
  width: 100%;
  padding: 18px 20px 20px;
  border-top: 5px solid var(--gold);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(145, 101, 62, 0.97);
  box-shadow: 0 20px 48px rgba(0,0,0,0.26);
}

.hero-call-form__heading {
  margin-bottom: 13px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  color: var(--white);
  text-align: center;
}

.hero-call-form__heading h2 {
  margin: 0;
  color: var(--white);
  font-family: "Inter", Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
}

.hero-call-form__heading p {
  margin: 0;
  color: rgba(255,255,255,0.82);
  font-size: 0.76rem;
}

.hero-call-form__fields {
  display: grid;
  grid-template-columns:
    minmax(135px, 1fr)
    minmax(135px, 0.9fr)
    minmax(160px, 1.1fr)
    minmax(150px, 1fr)
    minmax(135px, 0.9fr)
    minmax(210px, 1.45fr)
    minmax(145px, 0.9fr);
  gap: 10px;
  align-items: stretch;
}

.hero-call-field {
  min-width: 0;
  margin: 0;
}

.hero-call-field > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hero-call-field input,
.hero-call-field select,
.hero-call-field textarea {
  width: 100%;
  height: 50px;
  min-height: 50px;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 5px;
  color: var(--ink);
  background: var(--white);
  outline: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 400;
}

.hero-call-field textarea {
  resize: none;
  line-height: 1.35;
}

.hero-call-field input:focus,
.hero-call-field select:focus,
.hero-call-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(215,186,80,0.22);
}

.hero-call-submit {
  width: 100%;
  height: 50px;
  min-height: 50px;
  padding-inline: 12px;
  white-space: nowrap;
}

.hero-call-status {
  min-height: 18px;
  margin: 8px 0 -4px;
  color: var(--white);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
}

@media (max-width: 1180px) {
  .hero-call-form__fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-call-field--notes {
    grid-column: span 2;
  }

  .hero-call-submit {
    grid-column: span 2;
  }
}

@media (max-width: 820px) {
  .hero--call-request {
    min-height: 0;
  }

  .hero-call-layout {
    min-height: 0;
    padding: 56px 0 28px;
    gap: 34px;
  }

  .hero-call-copy {
    width: min(100%, 630px);
  }

  .hero-call-form {
    padding: 17px;
  }

  .hero-call-form__heading {
    align-items: center;
    flex-direction: column;
    gap: 3px;
  }

  .hero-call-form__fields {
    grid-template-columns: 1fr 1fr;
  }

  .hero-call-field--notes,
  .hero-call-submit {
    grid-column: span 2;
  }
}

@media (max-width: 560px) {
  .hero-call-layout {
    width: calc(100% - 28px);
    padding: 45px 0 20px;
  }

  .hero-call-copy h1 {
    font-size: 2.42rem;
  }

  .hero-call-copy h2 {
    font-size: 1.45rem;
  }

  .hero-call-highlights {
    font-size: 0.84rem;
  }

  .hero-phone-button {
    width: 100%;
    min-width: 0;
  }

  .hero-call-form__fields {
    grid-template-columns: 1fr;
  }

  .hero-call-field--notes,
  .hero-call-submit {
    grid-column: auto;
  }

  .hero-call-field textarea {
    height: 76px;
    min-height: 76px;
  }
}


/* v20: remove the textured browser background */
html,
body {
  background-color: #f2f3f5;
  background-image: none !important;
  background-attachment: scroll;
}

main#main {
  border-top: 0;
  background: var(--white);
}

/* Taller blue cap at the very top of the header. */
.site-header {
  padding-top: 24px;
}

.site-header::before {
  height: 24px;
  background: var(--navy);
}

.site-header.is-scrolled {
  padding-top: 0;
}

.site-header.is-scrolled::before {
  height: 0;
}

/* v20 hero: image headline with a white, wide request-call card over navy */
.hero--call-request {
  min-height: 0;
  overflow: visible;
  background-position: center 58%;
}

.hero--call-request .hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(32, 28, 24, 0.64) 0%,
      rgba(53, 47, 40, 0.49) 52%,
      rgba(32, 28, 24, 0.36) 100%
    );
}

.hero-call-layout {
  min-height: 460px;
  padding: 76px 0 138px;
  display: grid;
  place-items: center;
}

.hero-call-copy {
  max-width: 790px;
}

.hero-call-copy h1 {
  font-size: clamp(2.7rem, 5.2vw, 4.55rem);
}

.hero-call-copy h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.25rem);
}

/* The old duplicate call/text button under the subheader is removed. */
.hero-phone-button {
  display: none !important;
}

.hero-form-band {
  position: relative;
  min-height: 180px;
  padding: 0 0 42px;
  background: var(--navy);
}

.hero-call-form {
  position: relative;
  z-index: 4;
  width: 100%;
  margin-top: -92px;
  padding: 27px 30px 24px;
  border-top: 0;
  border-radius: 10px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 22px 55px rgba(11, 24, 43, 0.22);
}

.hero-call-form__heading {
  margin: 0 0 17px;
  display: block;
  color: var(--navy);
  text-align: left;
}

.hero-call-form__heading h2 {
  color: var(--navy);
  font-size: 1.45rem;
}

.hero-service-type {
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 25px;
  border: 0;
}

.hero-service-type legend {
  width: 100%;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 0.79rem;
  font-weight: 700;
}

.hero-service-type label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 0.85rem;
}

.hero-service-type input {
  width: 18px;
  height: 18px;
  accent-color: var(--navy);
}

.hero-call-form__fields {
  display: grid;
  grid-template-columns:
    minmax(130px, 1fr)
    minmax(130px, 1fr)
    minmax(165px, 1fr)
    minmax(150px, 1fr)
    minmax(125px, 0.85fr)
    minmax(145px, 0.82fr);
  gap: 12px;
  align-items: end;
}

.hero-call-form__details {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(170px, 0.82fr) minmax(155px, 0.72fr) minmax(300px, 1.8fr);
  gap: 12px;
  align-items: stretch;
}

.hero-call-field {
  margin: 0;
}

.hero-call-field > span {
  position: static;
  width: auto;
  height: auto;
  margin-bottom: 6px;
  display: block;
  overflow: visible;
  clip: auto;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: normal;
}

.hero-call-field input,
.hero-call-field select,
.hero-call-field textarea {
  height: 51px;
  min-height: 51px;
  padding: 11px 13px;
  border: 1px solid #cfd5dd;
  border-radius: 7px;
  color: var(--ink);
  background: #fbfcfd;
  font-size: 0.77rem;
}

.hero-call-field textarea {
  height: 74px;
  min-height: 74px;
  resize: vertical;
}

.hero-call-submit {
  height: 51px;
  min-height: 51px;
  align-self: end;
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}

.hero-call-submit:hover,
.hero-call-submit:focus-visible {
  color: var(--navy-deep);
  background: var(--gold);
  border-color: var(--gold);
}

.hero-text-permission {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 0.76rem;
}

.hero-text-permission input {
  width: 18px;
  height: 18px;
  accent-color: var(--navy);
}

.hero-call-status {
  min-height: 18px;
  margin: 8px 0 -5px;
  color: var(--navy);
  text-align: left;
}

/* The popup is hidden until the visitor has scrolled beyond the form. */
.schedule-dock {
  width: min(650px, calc(100% - 28px));
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 115%);
  transition:
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(.2,.78,.24,1);
}

.schedule-dock.is-eligible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

:root {
  --schedule-dock-height: 50px;
}

body {
  padding-bottom: 0;
}

body.schedule-dock-visible {
  padding-bottom: var(--schedule-dock-height);
}

.schedule-dock__toggle {
  min-height: var(--schedule-dock-height);
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 58px;
  padding-right: 58px;
  border-top-width: 3px;
}

.schedule-dock__copy strong {
  font-size: 0.83rem;
}

.schedule-dock__copy small {
  display: none;
}

.schedule-dock__icon {
  right: 11px;
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
}

.schedule-dock__icon-close {
  font-size: 1.2rem;
}

.schedule-panel {
  left: 50%;
  right: auto;
  width: min(980px, calc(100vw - 32px));
  bottom: var(--schedule-dock-height);
  transform: translate(-50%, calc(100% + var(--schedule-dock-height)));
}

.schedule-dock.is-open .schedule-panel {
  transform: translate(-50%, 0);
}

@media (max-width: 1080px) {
  .site-header {
    padding-top: 16px;
  }

  .site-header::before {
    height: 16px;
  }

  .hero-call-form__fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-call-submit {
    grid-column: span 1;
  }

  .hero-call-form__details {
    grid-template-columns: 1fr 1fr;
  }

  .hero-call-field--notes {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .hero-call-layout {
    min-height: 400px;
    padding: 56px 0 122px;
  }

  .hero-form-band {
    padding-bottom: 28px;
  }

  .hero-call-form {
    margin-top: -76px;
    padding: 23px 22px;
  }

  .hero-call-form__fields {
    grid-template-columns: 1fr 1fr;
  }

  .hero-call-submit {
    grid-column: 1 / -1;
  }

  .hero-call-form__details {
    grid-template-columns: 1fr 1fr;
  }

  .hero-call-field--notes {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  :root {
    --schedule-dock-height: 54px;
  }

  .schedule-dock {
    width: 100%;
  }

  .schedule-dock__toggle {
    padding-left: 48px;
    padding-right: 48px;
  }
}

@media (max-width: 560px) {
  .site-header {
    padding-top: 12px;
  }

  .site-header::before {
    height: 12px;
  }

  .hero-call-layout {
    width: calc(100% - 28px);
    min-height: 360px;
    padding: 44px 0 104px;
  }

  .hero-call-copy h1 {
    font-size: 2.35rem;
  }

  .hero-call-form {
    margin-top: -62px;
    padding: 20px 16px;
  }

  .hero-service-type {
    flex-wrap: wrap;
  }

  .hero-call-form__fields,
  .hero-call-form__details {
    grid-template-columns: 1fr;
  }

  .hero-call-submit,
  .hero-call-field--notes {
    grid-column: auto;
  }

  .hero-call-field textarea {
    height: 88px;
  }
}


/* v21: footer redesign, service-area map section, and interior page frame */
body.page-interior {
  background:
    url('assets/drywall-texture.png') center top / 420px auto repeat,
    #eef1f4;
}

body.page-interior .page-main--interior {
  padding: 36px 0 66px;
  background: transparent;
}

body.page-interior .interior-frame {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(23, 37, 62, 0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 22px 56px rgba(16, 28, 49, 0.12);
}

body.page-interior .page-hero,
body.page-interior .content-section,
body.page-interior .contact-section,
body.page-interior .service-list-section {
  margin-inline: auto;
}

body.page-interior .page-hero {
  border-radius: 0;
}

.footer-service-area {
  padding: 56px 0 26px;
  background: transparent;
}

.footer-service-area__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 28px;
  align-items: stretch;
}

.footer-service-area__cities,
.footer-service-area__map {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(23, 37, 62, 0.11);
  border-radius: 16px;
  box-shadow: 0 16px 42px rgba(14, 27, 44, 0.1);
}

.footer-service-area__cities {
  padding: 30px 32px 28px;
}

.footer-service-area__cities h2 {
  margin: 0 0 22px;
  color: var(--navy-deep);
  text-align: left;
}

.footer-service-area__list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 30px;
}

.footer-service-area__list-grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-service-area__list-grid li {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 500;
}

.footer-service-area__note {
  margin: 12px 0 0;
  color: var(--muted);
}

.footer-service-area__map {
  padding: 0;
  overflow: hidden;
  min-height: 340px;
}

.footer-service-area__map iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  display: block;
}

.site-footer.site-footer--textured {
  margin-top: 26px;
  padding-top: 0;
  border-top: 3px solid var(--gold);
  background:
    url('assets/drywall-texture.png') center top / 420px auto repeat,
    #f7f8fa;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) minmax(0, 0.82fr);
  gap: 58px;
  padding: 52px 0 46px;
}

.footer-brand-card,
.footer-hours-card,
.footer-links-card {
  min-width: 0;
}

.site-footer .brand--footer {
  justify-content: flex-start;
  margin-bottom: 18px;
}

.footer-brand-card > p {
  max-width: 420px;
  margin: 0 0 18px;
  color: var(--muted);
}

.footer-contact-list {
  display: grid;
  gap: 8px;
}

.footer-contact-list a,
.footer-contact-list span {
  color: var(--ink);
  font-weight: 500;
}

.footer-social-links {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.footer-social-links a {
  color: var(--navy-deep);
  font-weight: 600;
}

.footer-hours-card h3,
.footer-links-card h3 {
  margin: 0 0 22px;
  position: relative;
  padding-bottom: 12px;
  color: var(--navy-deep);
  text-align: left;
}

.footer-hours-card h3::after,
.footer-links-card h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  background: var(--gold);
}

.footer-hours-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.footer-hours-card li {
  color: var(--ink);
}

.footer-hours-card strong {
  color: var(--navy-deep);
}

.footer-links-nav {
  display: grid;
  gap: 15px;
}

.footer-links-nav a {
  position: relative;
  padding-left: 16px;
  color: var(--ink);
  font-weight: 500;
}

.footer-links-nav a::before {
  content: '›';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-size: 1.08rem;
  line-height: 1;
}

.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--navy-deep);
}

.footer-bottom-bar__inner {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 26px;
  color: rgba(255, 255, 255, 0.92);
}

.footer-mini-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.footer-mini-nav a,
.footer-bottom-bar__inner span {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.94rem;
}

.footer-mini-nav a + a {
  position: relative;
}

.footer-mini-nav a + a::before {
  content: '|';
  position: absolute;
  left: -10px;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 980px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 36px 40px;
  }

  .footer-brand-card {
    grid-column: 1 / -1;
  }

  .footer-service-area__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body.page-interior .page-main--interior {
    padding: 24px 0 50px;
  }

  .footer-service-area {
    padding: 42px 0 18px;
  }

  .footer-service-area__cities {
    padding: 24px 22px 22px;
  }

  .footer-service-area__list-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 42px 0 34px;
  }

  .footer-bottom-bar__inner {
    padding: 14px 0;
    flex-direction: column;
    align-items: flex-start;
  }
}


/* v22: full-width site, compact call form, and straight hero bottom */
main#main,
.site-footer,
.footer-service-area {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-shadow: none !important;
}

main#main {
  margin-top: 0 !important;
  overflow: visible;
}

/* Return the site shells to normal full-page spacing. */
main#main .shell,
.site-footer .shell,
.footer-service-area .shell {
  width: min(var(--shell), calc(100% - 40px));
}

/* Keep interior pages full width while retaining their centered content card. */
body.page-interior .page-main--interior {
  width: 100%;
}

body.page-interior .interior-frame {
  width: min(var(--shell), calc(100% - 40px));
  margin-inline: auto;
}

/* Compact, centered desktop call form. */
.hero-form-band {
  min-height: 128px;
  padding: 0 0 28px;
  background: var(--navy);
  clip-path: none !important;
}

.hero-call-form {
  width: min(1180px, 100%);
  margin: -70px auto 0;
  padding: 18px 22px 16px;
  border-radius: 9px;
}

.hero-call-form__top {
  margin-bottom: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.hero-call-form__heading {
  margin: 0;
  flex: 0 0 auto;
}

.hero-call-form__heading h2 {
  font-size: 1.3rem;
}

.hero-service-type {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.hero-service-type legend {
  width: auto;
  margin: 0 4px 0 0;
  font-size: 0.75rem;
}

.hero-service-type label {
  font-size: 0.78rem;
}

.hero-service-type input {
  width: 16px;
  height: 16px;
}

.hero-call-form__fields {
  grid-template-columns:
    minmax(120px, 1fr)
    minmax(120px, 1fr)
    minmax(160px, 1.15fr)
    minmax(145px, 1fr)
    minmax(110px, 0.8fr)
    minmax(140px, 0.85fr);
  gap: 10px;
}

.hero-call-form__details {
  margin-top: 10px;
  grid-template-columns: minmax(165px, 0.85fr) minmax(145px, 0.75fr) minmax(300px, 1.8fr);
  gap: 10px;
}

.hero-call-field > span {
  margin-bottom: 4px;
  font-size: 0.68rem;
}

.hero-call-field input,
.hero-call-field select,
.hero-call-field textarea,
.hero-call-submit {
  height: 44px;
  min-height: 44px;
}

.hero-call-field input,
.hero-call-field select,
.hero-call-field textarea {
  padding: 9px 11px;
  font-size: 0.74rem;
}

.hero-call-field textarea {
  height: 44px;
  min-height: 44px;
  resize: none;
}

.hero-call-status {
  min-height: 0;
  margin: 6px 0 0;
}

/* No consent checkbox and no diagonal transition below the hero. */
.hero-text-permission,
.section-transition,
.section-transition--light {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  clip-path: none !important;
}

.hero--call-request,
.hero-form-band,
.hero--call-request + section {
  clip-path: none !important;
}

@media (max-width: 1080px) {
  .hero-call-form {
    width: min(940px, 100%);
  }

  .hero-call-form__top {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .hero-service-type {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .hero-call-form {
    margin-top: -58px;
    padding: 18px;
  }

  .hero-form-band {
    min-height: 110px;
    padding-bottom: 24px;
  }
}

@media (max-width: 560px) {
  main#main .shell,
  .site-footer .shell,
  .footer-service-area .shell,
  body.page-interior .interior-frame {
    width: calc(100% - 28px);
  }

  .hero-call-form {
    margin-top: -48px;
  }

  .hero-call-form__top {
    gap: 12px;
  }

  .hero-service-type {
    gap: 12px;
    flex-wrap: wrap;
  }

  .hero-service-type legend {
    width: 100%;
  }

  .hero-call-field textarea {
    height: 72px;
    min-height: 72px;
  }
}


/* v23: white call-form section, slight hero overlap, full-width schedule drawer */

/* Remove the navy field behind the form and continue the page in white. */
.hero-form-band {
  min-height: 0;
  padding: 0 0 34px;
  background: #ffffff !important;
  clip-path: none !important;
}

/* Pull the form upward so its top overlaps the hero image slightly. */
.hero-call-form {
  position: relative;
  z-index: 6;
  width: min(1180px, calc(100% - 40px));
  margin: -54px auto 0;
  padding: 18px 22px 16px;
  border: 1px solid rgba(31, 53, 94, 0.10);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 30, 52, 0.16);
}

/* Keep the hero bottom straight with no wedges or clipped edge. */
.hero--call-request,
.hero-call-layout,
.hero-form-band,
.hero--call-request + section {
  clip-path: none !important;
}

.hero-form-band::before,
.hero-form-band::after {
  display: none !important;
}

/* The section immediately below the form should remain white with no gap. */
.hero-form-band + .section,
.hero-form-band + section {
  margin-top: 0;
}

/* Make the persistent scheduling bar full viewport width on every screen. */
.schedule-dock {
  left: 0 !important;
  right: 0 !important;
  bottom: 0;
  width: 100vw !important;
  max-width: none !important;
  transform: translateY(115%) !important;
}

.schedule-dock.is-eligible {
  transform: translateY(0) !important;
}

.schedule-dock__toggle {
  width: 100%;
  border-radius: 0;
}

/* When opened, the Calendly panel also spans the full screen width. */
.schedule-panel {
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  bottom: var(--schedule-dock-height);
  border-radius: 0;
  transform: translateY(calc(100% + var(--schedule-dock-height))) !important;
}

.schedule-dock.is-open .schedule-panel {
  transform: translateY(0) !important;
}

.schedule-panel__inner,
.schedule-panel .calendly-inline-widget {
  width: 100%;
  max-width: none;
}

@media (max-width: 1080px) {
  .hero-call-form {
    width: min(940px, calc(100% - 32px));
    margin-top: -48px;
  }
}

@media (max-width: 820px) {
  .hero-form-band {
    padding-bottom: 26px;
  }

  .hero-call-form {
    width: calc(100% - 28px);
    margin-top: -42px;
    padding: 18px;
  }
}

@media (max-width: 560px) {
  .hero-call-form {
    width: calc(100% - 20px);
    margin-top: -34px;
    padding: 17px 14px;
    border-radius: 8px;
  }

  .hero-call-form__top {
    align-items: flex-start;
  }

  .hero-form-band {
    padding-bottom: 20px;
  }

  .schedule-dock,
  .schedule-panel {
    width: 100vw !important;
  }
}


/* v24: true hero/form overlap + centered hero heading */

/* Center the complete hero message horizontally and vertically. */
.hero--call-request .hero-call-layout {
  min-height: 470px;
  padding: 64px 0 112px;
  display: grid;
  place-items: center;
  text-align: center;
}

.hero--call-request .hero-call-copy {
  width: min(780px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero--call-request .hero-call-copy h1,
.hero--call-request .hero-call-copy h2,
.hero--call-request .hero-call-highlights {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hero--call-request .hero-call-highlights {
  align-items: center;
  justify-items: center;
}

/* The form band starts inside the hero image. Its transparent upper area
   lets the photo remain visible behind the overlapping form, while the
   lower portion becomes the normal white page background. */
.hero--call-request .hero-form-band {
  position: relative;
  z-index: 5;
  margin-top: -76px;
  padding: 0 0 34px;
  background:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent 76px,
      #ffffff 76px,
      #ffffff 100%
    ) !important;
}

.hero--call-request .hero-call-form {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

/* Keep the next section tight to the white area below the overlap. */
.hero--call-request + .section,
.hero--call-request + section {
  margin-top: 0 !important;
}

@media (max-width: 1080px) {
  .hero--call-request .hero-call-layout {
    min-height: 440px;
    padding: 58px 0 98px;
  }

  .hero--call-request .hero-form-band {
    margin-top: -64px;
    background:
      linear-gradient(
        to bottom,
        transparent 0,
        transparent 64px,
        #ffffff 64px,
        #ffffff 100%
      ) !important;
  }

  .hero--call-request .hero-call-form {
    width: min(940px, calc(100% - 32px));
  }
}

@media (max-width: 820px) {
  .hero--call-request .hero-call-layout {
    min-height: 405px;
    padding: 50px 0 82px;
  }

  .hero--call-request .hero-form-band {
    margin-top: -52px;
    padding-bottom: 26px;
    background:
      linear-gradient(
        to bottom,
        transparent 0,
        transparent 52px,
        #ffffff 52px,
        #ffffff 100%
      ) !important;
  }

  .hero--call-request .hero-call-form {
    width: calc(100% - 28px);
  }
}

@media (max-width: 560px) {
  .hero--call-request .hero-call-layout {
    width: calc(100% - 28px);
    min-height: 360px;
    padding: 42px 0 68px;
  }

  .hero--call-request .hero-call-copy h1 {
    max-width: 330px;
  }

  .hero--call-request .hero-call-copy h2 {
    max-width: 340px;
  }

  .hero--call-request .hero-form-band {
    margin-top: -38px;
    padding-bottom: 20px;
    background:
      linear-gradient(
        to bottom,
        transparent 0,
        transparent 38px,
        #ffffff 38px,
        #ffffff 100%
      ) !important;
  }

  .hero--call-request .hero-call-form {
    width: calc(100% - 20px);
  }
}


/* v25: new hero photo, unified dark-blue buttons, stronger top blue strip,
   and a true single-column mobile call form */

:root {
  --action-blue: var(--navy-deep);
}

/* Make the solid blue strip at the very top more substantial. */
.site-header {
  padding-top: 28px;
}

.site-header::before {
  height: 28px;
  background: var(--action-blue);
}

.site-header.is-scrolled {
  padding-top: 0;
}

.site-header.is-scrolled::before {
  height: 0;
}

/* Use the user's new image as the hero with no color or dark overlay. */
.hero--call-request {
  background-image: url('assets/hero-drywall-room-new.png') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.hero--call-request .hero-overlay {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Keep all hero wording truly centered over the photograph. */
.hero--call-request .hero-call-layout {
  display: grid;
  place-items: center;
  text-align: center;
}

.hero--call-request .hero-call-copy,
.hero--call-request .hero-call-copy h1,
.hero--call-request .hero-call-copy h2,
.hero--call-request .hero-call-highlights {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  justify-items: center;
  align-items: center;
}

/* Keep text readable without darkening the image itself. */
.hero--call-request .hero-call-copy h1,
.hero--call-request .hero-call-copy h2,
.hero--call-request .hero-call-highlights {
  color: #ffffff;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.72),
    0 4px 16px rgba(0, 0, 0, 0.46);
}

/* Use the same deep blue as the persistent scheduling bar for every
   primary button and button-like action. */
.button--primary,
.hero-call-submit,
.masthead-schedule,
.service-row__button,
.hero-phone-button {
  color: #ffffff;
  background-color: var(--action-blue);
  border-color: var(--action-blue);
}

.button--primary:hover,
.button--primary:focus-visible,
.hero-call-submit:hover,
.hero-call-submit:focus-visible,
.masthead-schedule:hover,
.masthead-schedule:focus-visible,
.service-row__button:hover,
.service-row__button:focus-visible,
.hero-phone-button:hover,
.hero-phone-button:focus-visible {
  color: var(--navy-deep);
  background-color: var(--gold);
  border-color: var(--gold);
}

/* Keep the full-width schedule dock in the same action blue. */
.schedule-dock__toggle,
.schedule-panel__header,
.footer-bottom-bar {
  background-color: var(--action-blue);
}

/* Tablet: let the form wrap cleanly before reaching the phone layout. */
@media (max-width: 940px) {
  .hero-call-form__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-call-form__details {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-call-field--notes,
  .hero-call-submit {
    grid-column: 1 / -1;
  }
}

/* Mobile: the complete call form becomes one tall, readable column. */
@media (max-width: 680px) {
  .site-header {
    padding-top: 16px;
  }

  .site-header::before {
    height: 16px;
  }

  .hero--call-request .hero-call-layout {
    min-height: 430px;
    padding: 48px 0 88px;
  }

  .hero--call-request .hero-call-copy {
    width: min(100%, 360px);
  }

  .hero--call-request .hero-call-copy h1 {
    font-size: clamp(2rem, 10vw, 2.7rem);
    line-height: 1.06;
  }

  .hero--call-request .hero-call-copy h2 {
    font-size: 1.25rem;
  }

  .hero--call-request .hero-call-highlights {
    font-size: 0.84rem;
  }

  .hero--call-request .hero-call-form {
    width: calc(100% - 20px);
    padding: 22px 16px 18px;
  }

  .hero-call-form__top {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .hero-service-type {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    justify-content: stretch;
  }

  .hero-service-type legend {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
  }

  .hero-call-form__fields,
  .hero-call-form__details {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .hero-call-field,
  .hero-call-field--notes,
  .hero-call-submit {
    width: 100%;
    grid-column: 1 !important;
  }

  .hero-call-field input,
  .hero-call-field select,
  .hero-call-field textarea,
  .hero-call-submit {
    width: 100%;
    min-height: 50px;
  }

  .hero-call-field textarea {
    min-height: 96px;
    resize: vertical;
  }

  .hero-call-submit {
    margin-top: 2px;
  }
}


/* v26: square service-area cards, exact hero centering, seamless texture */

/* Make the Proudly Serving city card and map nearly square-cornered. */
.footer-service-area__cities,
.footer-service-area__map {
  border-radius: 1px !important;
}

/* Force the hero title group to the exact horizontal center of the viewport,
   independent of the site shell or form width. */
.hero--call-request {
  position: relative;
}

.hero--call-request .hero-call-layout {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 24px;
  padding-right: 24px;
  display: block !important;
}

.hero--call-request .hero-call-copy {
  position: absolute;
  top: 44%;
  left: 50%;
  width: min(820px, calc(100% - 48px));
  max-width: none;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center !important;
}

.hero--call-request .hero-call-copy h1,
.hero--call-request .hero-call-copy h2,
.hero--call-request .hero-call-highlights,
.hero--call-request .hero-call-highlights span {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  justify-content: center !important;
  justify-items: center !important;
  align-items: center !important;
}

/* Use each drywall image once, stretched continuously across its area.
   This removes the visible tiled blocks and section-like seams. */
body.page-interior {
  background-color: #eef1f4 !important;
  background-image: url('assets/drywall-texture.png') !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

.site-footer.site-footer--textured {
  background-color: #f7f8fa !important;
  background-image: url('assets/drywall-texture.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

/* Keep the full footer as one uninterrupted textured surface. */
.site-footer.site-footer--textured .footer-main,
.site-footer.site-footer--textured .footer-brand-card,
.site-footer.site-footer--textured .footer-hours-card,
.site-footer.site-footer--textured .footer-links-card {
  background: transparent !important;
}

@media (max-width: 820px) {
  .hero--call-request .hero-call-copy {
    top: 43%;
    width: min(680px, calc(100% - 36px));
  }

  body.page-interior {
    background-attachment: scroll !important;
    background-size: auto 100% !important;
  }
}

@media (max-width: 560px) {
  .hero--call-request .hero-call-layout {
    width: 100% !important;
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero--call-request .hero-call-copy {
    top: 41%;
    width: calc(100% - 28px);
  }

  .hero--call-request .hero-call-copy h1,
  .hero--call-request .hero-call-copy h2 {
    max-width: none !important;
  }

  .footer-service-area__cities,
  .footer-service-area__map {
    border-radius: 1px !important;
  }
}


/* v27: top service bar, phone in menu, balanced hero spacing, lighter text shadow,
   and mobile form submit placed last */

/* Replace the decorative pseudo strip with a real, usable top bar. */
.site-header {
  padding-top: 0 !important;
}

.site-header::before {
  display: none !important;
}

.top-service-bar {
  max-height: 50px;
  overflow: hidden;
  color: #ffffff;
  background: var(--navy-deep);
  transition: max-height 0.22s ease, opacity 0.2s ease;
}

.top-service-bar__inner {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.site-header.is-scrolled .top-service-bar {
  max-height: 0;
  opacity: 0;
}

/* Center the logo in a simpler white masthead after moving the side content. */
.desktop-masthead__grid {
  min-height: 148px;
  grid-template-columns: 1fr !important;
  justify-items: center;
}

.brand--masthead {
  grid-column: 1 !important;
  justify-self: center;
}

/* Keep navigation centered while placing the phone at the far right. */
.nav-band__inner {
  position: relative;
  min-height: 66px;
  padding-right: 205px;
  padding-left: 205px;
}

.main-nav {
  width: auto;
  justify-content: center;
  gap: clamp(24px, 3.8vw, 60px);
}

.nav-phone {
  position: absolute;
  top: 50%;
  right: 0;
  display: grid;
  color: #ffffff;
  text-align: right;
  text-decoration: none;
  line-height: 1.08;
  transform: translateY(-50%);
}

.nav-phone small {
  margin-bottom: 3px;
  color: rgba(255,255,255,0.74);
  font-size: 0.61rem;
  font-weight: 500;
}

.nav-phone strong {
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 700;
}

/* Balance the hero copy vertically between the menu and the overlapping form. */
.hero--call-request .hero-call-layout {
  position: relative !important;
  width: 100% !important;
  min-height: 560px !important;
  margin: 0 !important;
  padding: 0 24px 86px !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box;
}

.hero--call-request .hero-call-copy {
  position: static !important;
  width: min(850px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  transform: none !important;
}

/* Reduce the heavy glow while retaining just enough contrast on the photo. */
.hero--call-request .hero-call-copy h1,
.hero--call-request .hero-call-copy h2 {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42) !important;
}

.hero--call-request .hero-call-highlights,
.hero--call-request .hero-call-highlights span {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38) !important;
}

/* Desktop form grid: the submit button remains beside ZIP, although its DOM
   position is last so it naturally becomes the final control on mobile. */
@media (min-width: 1081px) {
  .hero-call-form {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 12px;
  }

  .hero-call-form__top {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .hero-call-form__fields,
  .hero-call-form__details {
    display: contents !important;
  }

  .hero-call-form__fields > .hero-call-field:nth-child(1) { grid-column: 1; grid-row: 2; }
  .hero-call-form__fields > .hero-call-field:nth-child(2) { grid-column: 2; grid-row: 2; }
  .hero-call-form__fields > .hero-call-field:nth-child(3) { grid-column: 3; grid-row: 2; }
  .hero-call-form__fields > .hero-call-field:nth-child(4) { grid-column: 4; grid-row: 2; }
  .hero-call-form__fields > .hero-call-field:nth-child(5) { grid-column: 5; grid-row: 2; }

  .hero-call-form__details > .hero-call-field:nth-child(1) { grid-column: 1 / 3; grid-row: 3; }
  .hero-call-form__details > .hero-call-field:nth-child(2) { grid-column: 3 / 5; grid-row: 3; }
  .hero-call-form__details > .hero-call-field:nth-child(3) { grid-column: 5 / 7; grid-row: 3; }

  .hero-call-submit {
    grid-column: 6;
    grid-row: 2;
    align-self: end;
  }

  .hero-call-status {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}

@media (max-width: 1080px) {
  .top-service-bar__inner {
    min-height: 42px;
    justify-content: center;
    text-align: center;
    font-size: 0.76rem;
  }

  .top-service-bar {
    max-height: 42px;
  }

  .nav-phone {
    display: none;
  }

  .nav-band__inner {
    padding-left: 0;
    padding-right: 0;
  }

  .hero--call-request .hero-call-layout {
    min-height: 490px !important;
    padding: 0 20px 68px !important;
  }

  .hero-call-form {
    display: block !important;
  }

  .hero-call-form__fields,
  .hero-call-form__details {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  .hero-call-form__details {
    margin-top: 12px;
  }

  .hero-call-field--notes {
    grid-column: 1 / -1 !important;
  }

  .hero-call-submit {
    width: 100%;
    margin-top: 12px;
  }
}

@media (max-width: 680px) {
  .top-service-bar__inner {
    min-height: 38px;
    padding: 7px 0;
    font-size: 0.69rem;
  }

  .top-service-bar {
    max-height: 38px;
  }

  .hero--call-request .hero-call-layout {
    min-height: 455px !important;
    padding: 0 14px 54px !important;
  }

  .hero-call-form__fields,
  .hero-call-form__details {
    grid-template-columns: 1fr !important;
  }

  .hero-call-field,
  .hero-call-field--notes,
  .hero-call-submit {
    grid-column: 1 !important;
  }

  /* Since the button is last in the DOM, it is also visually last here. */
  .hero-call-submit {
    order: 99;
    margin-top: 14px;
  }
}


/* v28: mobile hero photo scales down with the viewport instead of cropping */
@media (max-width: 820px) {
  .hero--call-request {
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #c6c5c0 !important;
  }

  .hero--call-request .hero-call-layout {
    min-height: clamp(300px, 42.33vw, 390px) !important;
    padding: 18px 18px 58px !important;
  }

  .hero--call-request .hero-call-copy {
    width: min(92%, 650px) !important;
  }
}

@media (max-width: 680px) {
  .hero--call-request {
    background-size: 100% auto !important;
    background-position: center top !important;
  }

  .hero--call-request .hero-call-layout {
    min-height: clamp(190px, 58vw, 285px) !important;
    padding: 10px 12px 42px !important;
  }

  .hero--call-request .hero-call-copy {
    width: calc(100% - 24px) !important;
  }

  .hero--call-request .hero-call-copy h1 {
    font-size: clamp(1.55rem, 7.4vw, 2.1rem) !important;
    line-height: 1.04 !important;
  }

  .hero--call-request .hero-call-copy h2 {
    margin-top: 5px !important;
    font-size: clamp(0.9rem, 4.6vw, 1.12rem) !important;
    line-height: 1.12 !important;
  }

  .hero--call-request .hero-call-highlights {
    margin-top: 8px !important;
    gap: 1px !important;
    font-size: clamp(0.62rem, 3vw, 0.76rem) !important;
    line-height: 1.28 !important;
  }

  .hero--call-request .hero-form-band {
    margin-top: -28px !important;
    background:
      linear-gradient(
        to bottom,
        transparent 0,
        transparent 28px,
        #ffffff 28px,
        #ffffff 100%
      ) !important;
  }
}

@media (max-width: 390px) {
  .hero--call-request .hero-call-layout {
    min-height: 185px !important;
    padding-bottom: 36px !important;
  }

  .hero--call-request .hero-call-copy h1 {
    font-size: 1.42rem !important;
  }

  .hero--call-request .hero-call-copy h2 {
    font-size: 0.84rem !important;
  }

  .hero--call-request .hero-call-highlights {
    font-size: 0.58rem !important;
  }
}


/* v29: blue navigation, mobile hero image fills without cropping,
   interior texture only on the first section, and no footer-end gap */

/* Remove the separate top service strip completely. */
.top-service-bar,
.top-service-bar__inner {
  display: none !important;
}

.site-header {
  padding-top: 0 !important;
}

/* Use the site's deep blue for the actual menu bar instead. */
.nav-band,
.nav-band__inner {
  background-color: var(--navy-deep) !important;
}

.nav-band {
  background: var(--navy-deep) !important;
}

@media (max-width: 1080px) {
  .nav-band,
  .main-nav {
    background: var(--navy-deep) !important;
  }
}

/* Keep the hero copy exactly centered inside the photograph. */
.hero--call-request .hero-call-layout {
  position: relative !important;
}

.hero--call-request .hero-call-copy {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: min(850px, calc(100% - 48px)) !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.hero--call-request .hero-call-copy h1,
.hero--call-request .hero-call-copy h2,
.hero--call-request .hero-call-highlights,
.hero--call-request .hero-call-highlights span {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* On smaller screens, scale the complete photo to the section rather than
   zooming/cropping it or leaving empty space around it. */
@media (max-width: 820px) {
  .hero--call-request {
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .hero--call-request .hero-call-copy {
    top: 50% !important;
    width: calc(100% - 32px) !important;
  }
}

@media (max-width: 560px) {
  .hero--call-request {
    background-size: 100% 100% !important;
  }

  .hero--call-request .hero-call-copy {
    top: 50% !important;
    width: calc(100% - 24px) !important;
  }
}

/* Interior pages: the drywall texture belongs only to the opening section,
   not behind the entire page, map, or footer-service area. */
body.page-interior {
  background-color: #ffffff !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

body.page-interior .page-main--interior {
  padding-top: 30px !important;
  padding-bottom: 46px !important;
  background: #ffffff !important;
}

body.page-interior .interior-frame {
  background: #ffffff !important;
}

body.page-interior .interior-frame > .page-hero:first-child {
  position: relative;
  background-color: #f6f6f4 !important;
  background-image: url('assets/drywall-texture.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

body.page-interior .interior-frame > .page-hero:first-child h1,
body.page-interior .interior-frame > .page-hero:first-child p {
  color: var(--navy-deep) !important;
  text-shadow: none !important;
}

/* The service-area/map section always sits on clean white, never on texture. */
.footer-service-area {
  background: #ffffff !important;
}

.footer-service-area__cities,
.footer-service-area__map {
  background: #ffffff !important;
}

/* The dark utility/copyright bar is the true end of the document. */
html,
body,
body.schedule-dock-visible {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.site-footer,
.site-footer.site-footer--textured,
.footer-bottom-bar,
.footer-bottom-bar__inner {
  margin-bottom: 0 !important;
}

.footer-bottom-bar {
  padding-bottom: 0 !important;
}

body > .schedule-dock {
  margin-bottom: 0 !important;
}


/* v30: actual Honed In logo assets */
.brand--masthead,
.brand--mobile,
.brand--footer {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.site-logo {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.site-logo--desktop {
  width: clamp(155px, 12vw, 220px);
  max-height: 125px;
}

.site-logo--mobile {
  width: 128px;
  max-height: 74px;
}

.site-logo--footer {
  width: min(100%, 270px);
  max-height: 190px;
  object-position: left center;
}

/* Hide all legacy placeholder logo pieces if any remain. */
.brand-mark,
.brand-text {
  display: none !important;
}

@media (max-width: 560px) {
  .site-logo--mobile {
    width: 112px;
    max-height: 66px;
  }

  .site-logo--footer {
    width: 220px;
    margin-inline: auto;
  }
}

/* v31: smaller logo, cleaner mobile header, and taller mobile hero */

/* Give the desktop logo more breathing room underneath while making it smaller. */
.desktop-masthead__grid {
  min-height: 132px !important;
  padding-top: 18px !important;
  padding-bottom: 26px !important;
  box-sizing: border-box;
}

.site-logo--desktop {
  width: clamp(132px, 9vw, 172px) !important;
  max-height: 92px !important;
}

.brand--masthead {
  align-self: center !important;
}

@media (max-width: 1080px) {
  /* Make the mobile logo smaller and leave clear space below it. */
  .mobile-masthead {
    padding: 10px 0 16px !important;
    background: #ffffff !important;
  }

  .mobile-brand-row {
    min-height: 62px !important;
    padding-bottom: 8px !important;
  }

  .site-logo--mobile {
    width: 100px !important;
    max-height: 56px !important;
  }

  /* Remove the empty navy block that was showing below the mobile menu row.
     The actual dropdown remains absolutely positioned and still opens normally. */
  .nav-band {
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .nav-band__inner {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .main-nav {
    top: 0 !important;
    background: var(--navy-deep) !important;
  }

  /* Make the mobile hero fill the first screen and allow the photo to cover it. */
  .hero--call-request {
    min-height: calc(100svh - 150px) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .hero--call-request .hero-call-layout {
    min-height: calc(100svh - 150px) !important;
    padding: 34px 20px 118px !important;
  }

  .hero--call-request .hero-call-copy {
    top: 47% !important;
    width: min(92%, 720px) !important;
  }

  .hero--call-request .hero-call-copy h1 {
    font-size: clamp(2.35rem, 8.2vw, 3.6rem) !important;
    line-height: 1.02 !important;
  }

  .hero--call-request .hero-call-copy h2 {
    margin-top: 10px !important;
    font-size: clamp(1.25rem, 5.2vw, 2rem) !important;
    line-height: 1.08 !important;
  }

  .hero--call-request .hero-call-highlights {
    margin-top: 18px !important;
    gap: 4px !important;
    font-size: clamp(0.82rem, 3.4vw, 1rem) !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 560px) {
  .mobile-masthead {
    padding-top: 8px !important;
    padding-bottom: 14px !important;
  }

  .mobile-brand-row {
    min-height: 56px !important;
  }

  .site-logo--mobile {
    width: 88px !important;
    max-height: 50px !important;
  }

  .hero--call-request {
    min-height: calc(100svh - 138px) !important;
    background-size: cover !important;
    background-position: 52% center !important;
  }

  .hero--call-request .hero-call-layout {
    min-height: calc(100svh - 138px) !important;
    padding: 30px 14px 106px !important;
  }

  .hero--call-request .hero-call-copy {
    top: 46% !important;
    width: calc(100% - 28px) !important;
  }

  .hero--call-request .hero-call-copy h1 {
    font-size: clamp(2.1rem, 10.2vw, 3rem) !important;
    line-height: 1.01 !important;
  }

  .hero--call-request .hero-call-copy h2 {
    margin-top: 8px !important;
    font-size: clamp(1.18rem, 6vw, 1.65rem) !important;
  }

  .hero--call-request .hero-call-highlights {
    margin-top: 16px !important;
    font-size: clamp(0.8rem, 3.8vw, 0.95rem) !important;
  }
}


/* v32: gold nav accent and seamless white form/next-section background */

/* The gold line sits above the navigation bar on desktop. This gives the
   cleanest separation between the white masthead and deep-blue menu. */
@media (min-width: 1081px) {
  .nav-band {
    border-top: 3px solid var(--gold) !important;
  }
}

/* Keep the header cleaner on tablets and phones—no gold line there. */
@media (max-width: 1080px) {
  .nav-band {
    border-top: 0 !important;
  }
}

/* Make the request-call area flow directly into the next white section. */
.hero--call-request .hero-form-band,
.hero--call-request + .section,
#service-guide,
.section--white {
  background: #ffffff !important;
}

.hero--call-request .hero-call-form {
  background: #ffffff !important;
  border: 1px solid rgba(31, 53, 94, 0.10) !important;
  box-shadow: 0 10px 24px rgba(12, 25, 45, 0.10) !important;
}

/* Preserve the overlap while keeping the white background continuous. */
.hero--call-request .hero-form-band {
  position: relative !important;
  z-index: 3 !important;
}

.hero--call-request .hero-call-form {
  position: relative !important;
  z-index: 4 !important;
}

/* On small screens keep the same white background and a lighter shadow. */
@media (max-width: 680px) {
  .hero--call-request .hero-form-band {
    background: #ffffff !important;
  }

  .hero--call-request .hero-call-form {
    box-shadow: 0 7px 18px rgba(12, 25, 45, 0.09) !important;
  }
}


/* v33: keep the logo fixed to the true horizontal center of the screen */
.desktop-masthead__grid {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.brand--masthead {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  justify-self: auto !important;
}

@media (max-width: 1080px) {
  .mobile-brand-row {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .brand--mobile {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1;
  }

  .menu-toggle {
    position: relative !important;
    margin-left: auto !important;
    z-index: 2;
  }
}


/* v34: video hero with responsive full-screen mobile treatment */
.hero--call-request.hero--video {
  position: relative !important;
  isolation: isolate !important;
  min-height: 640px !important;
  overflow: visible !important;
  background: #111827 !important;
}

.hero-background-video {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -2;
  width: 100%;
  height: 640px;
  display: block;
  object-fit: cover;
  object-position: center center;
  background: #111827;
}

.hero--video .hero-overlay {
  display: none !important;
}

.hero--video .hero-call-layout {
  position: relative;
  z-index: 1;
  min-height: 640px !important;
  padding: 72px 24px 92px !important;
  display: grid !important;
  place-items: center !important;
}

.hero--video .hero-call-copy {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: min(94%, 900px) !important;
  margin: 0 auto !important;
  transform: none !important;
  text-align: center !important;
}

.hero--video .hero-call-copy h1,
.hero--video .hero-call-copy h2,
.hero--video .hero-call-highlights {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Roughly one quarter of the compact desktop form sits over the video. */
.hero--video .hero-form-band {
  position: relative !important;
  z-index: 3 !important;
  padding: 0 0 46px !important;
  background: #fff !important;
}

.hero--video .hero-call-form {
  margin-top: -58px !important;
}

@media (max-width: 1080px) {
  .hero--call-request.hero--video,
  .hero-background-video,
  .hero--video .hero-call-layout {
    min-height: 100svh !important;
    height: 100svh !important;
  }

  .hero-background-video {
    inset: 0 !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .hero--video .hero-call-layout {
    padding: 58px 20px 128px !important;
  }

  .hero--video .hero-call-copy {
    width: min(92%, 760px) !important;
  }

  .hero--video .hero-call-form {
    margin-top: -88px !important;
  }
}

@media (max-width: 680px) {
  .hero--call-request.hero--video,
  .hero-background-video,
  .hero--video .hero-call-layout {
    min-height: 100svh !important;
    height: 100svh !important;
  }

  .hero-background-video {
    object-fit: cover !important;
    object-position: center center !important;
  }

  .hero--video .hero-call-layout {
    padding: 54px 14px 150px !important;
  }

  .hero--video .hero-call-copy {
    width: calc(100% - 24px) !important;
  }

  .hero--video .hero-call-copy h1 {
    font-size: clamp(2.5rem, 11vw, 3.35rem) !important;
    line-height: 1.02 !important;
  }

  .hero--video .hero-call-copy h2 {
    font-size: clamp(1.35rem, 6.4vw, 1.9rem) !important;
    line-height: 1.08 !important;
  }

  .hero--video .hero-call-highlights {
    font-size: clamp(.9rem, 4vw, 1.05rem) !important;
  }

  /* The tall stacked mobile form overlaps the video without covering the title. */
  .hero--video .hero-call-form {
    margin-top: -110px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-background-video {
    display: none;
  }

  .hero--call-request.hero--video {
    background: url("assets/hero-room.jpg") center / cover no-repeat !important;
  }
}

/* v35: shorter navigation and tighter hero spacing */
@media (min-width: 1081px) {
  .nav-band__inner {
    min-height: 48px !important;
  }

  .main-nav > a,
  .nav-dropdown__trigger {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    font-size: 0.88rem !important;
  }

  .main-nav > a::after,
  .nav-dropdown__trigger::after {
    bottom: 7px !important;
  }

  .hero--video .hero-call-layout {
    padding-top: 44px !important;
    padding-bottom: 92px !important;
  }
}

@media (max-width: 1080px) {
  .hero--video .hero-call-layout {
    padding-top: 34px !important;
  }
}

@media (max-width: 680px) {
  .hero--video .hero-call-layout {
    padding-top: 24px !important;
  }
}


/* v36: darker video, taller desktop hero, form entrance, and mobile repairs */
.hero--call-request.hero--video {
  min-height: 760px !important;
  background: #0b1220 !important;
}

.hero-background-video {
  height: 760px !important;
}

/* Neutral black overlay over the moving video for consistent readability. */
.hero--video .hero-overlay {
  display: block !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  z-index: -1 !important;
  width: 100% !important;
  height: 760px !important;
  background: rgba(0, 0, 0, 0.38) !important;
  pointer-events: none !important;
}

.hero--video .hero-call-layout {
  min-height: 760px !important;
  height: 760px !important;
  padding-top: 30px !important;
  padding-bottom: 126px !important;
}

/* The form enters upward as it reaches the viewport on non-mobile layouts. */
@media (min-width: 681px) {
  .hero--video .hero-call-form.reveal {
    opacity: 0 !important;
    transform: translateY(92px) !important;
    transition:
      opacity .55s ease,
      transform .72s cubic-bezier(.18,.82,.2,1) !important;
  }

  .hero--video .hero-call-form.reveal.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .hero--video .hero-call-form {
    margin-top: -76px !important;
  }
}

@media (max-width: 1080px) {
  /* Give the centered mobile logo breathing room before the menu/hero. */
  .mobile-brand-row {
    min-height: 88px !important;
    padding-top: 8px !important;
    padding-bottom: 18px !important;
  }

  .hero--call-request.hero--video {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Do not change the mobile video viewport size. */
  .hero-background-video,
  .hero--video .hero-overlay,
  .hero--video .hero-call-layout {
    height: 100svh !important;
    min-height: 100svh !important;
  }

  .hero--video .hero-overlay {
    inset: 0 !important;
  }

  .hero--video .hero-call-layout {
    padding-top: 14px !important;
    padding-bottom: 132px !important;
  }

  .hero--video .hero-form-band {
    position: relative !important;
    z-index: 4 !important;
    overflow: visible !important;
    padding-bottom: 52px !important;
  }

  .hero--video .hero-call-form {
    margin-top: -112px !important;
  }
}

@media (max-width: 680px) {
  .mobile-brand-row {
    min-height: 92px !important;
    padding-top: 8px !important;
    padding-bottom: 22px !important;
  }

  .hero--video .hero-call-layout {
    padding-top: 6px !important;
    padding-bottom: 142px !important;
  }

  .hero--video .hero-call-copy {
    align-self: start !important;
    padding-top: 18px !important;
  }

  /* No entrance animation once the form is a tall single column. */
  .hero--video .hero-call-form.reveal,
  .hero--video .hero-call-form.reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Pull the complete stacked form over the bottom of the video. */
  .hero--video .hero-call-form {
    margin-top: -138px !important;
    width: calc(100% - 20px) !important;
    max-width: none !important;
    padding: 22px 16px 24px !important;
    overflow: visible !important;
  }

  .hero-call-form__fields,
  .hero-call-form__details {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    overflow: visible !important;
  }

  .hero-call-form__fields > *,
  .hero-call-form__details > *,
  .hero-call-submit {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
  }

  .hero-call-submit {
    order: 999 !important;
    margin-top: 4px !important;
  }

  .hero-call-status {
    display: block !important;
    min-height: 18px !important;
  }

  .hero--video .hero-form-band {
    padding-bottom: 64px !important;
  }
}


/* v37: force visible video overlay and true form overlap */
.hero--call-request.hero--video {
  position: relative !important;
  isolation: isolate !important;
}

.hero--video .hero-background-video {
  z-index: 0 !important;
}

.hero--video .hero-overlay {
  display: block !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  z-index: 1 !important;
  height: 760px !important;
  background: rgba(0, 0, 0, 0.46) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.hero--video .hero-call-layout {
  position: relative !important;
  z-index: 2 !important;
}

.hero--video .hero-form-band {
  position: relative !important;
  z-index: 3 !important;
  overflow: visible !important;
  background: #fff !important;
}

/* Desktop/tablet: final resting position visibly overlaps the video. */
@media (min-width: 681px) {
  .hero--video .hero-call-form.reveal {
    margin-top: 0 !important;
    opacity: 0 !important;
    transform: translateY(30px) !important;
  }

  .hero--video .hero-call-form.reveal.is-visible {
    opacity: 1 !important;
    transform: translateY(-96px) !important;
  }

  .hero--video .hero-form-band {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: -62px !important;
  }
}

@media (max-width: 1080px) {
  .hero--video .hero-overlay {
    inset: 0 !important;
    height: 100svh !important;
  }

  /* Slightly more breathing room above the centered title. */
  .hero--video .hero-call-layout {
    padding-top: 30px !important;
  }
}

@media (max-width: 680px) {
  .hero--video .hero-call-layout {
    padding-top: 24px !important;
  }

  .hero--video .hero-call-copy {
    padding-top: 28px !important;
  }

  /* Mobile: no animation, but a strong and reliable overlap. */
  .hero--video .hero-call-form.reveal,
  .hero--video .hero-call-form.reveal.is-visible,
  .hero--video .hero-call-form {
    margin-top: 0 !important;
    opacity: 1 !important;
    transform: translateY(-150px) !important;
    transition: none !important;
  }

  .hero--video .hero-form-band {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: -112px !important;
    overflow: visible !important;
  }
}