/* Brand: Refurbishment & Decoration. Accent moves from olive bronze to the copper of the client's
   logo (darkened enough to stay readable as text on the cream background). */
:root { --accent: #A4673A; --accent-dark: #84502A; }

.logo--mark { flex-direction: row; align-items: center; gap: 12px; }
.logo--mark img { height: 48px; width: auto; }
.logo--mark span { display: flex; flex-direction: column; }
.logo--mark b { font-size: 21px; letter-spacing: .01em; white-space: nowrap; }
.logo--mark small { margin-top: 5px; }
.logo--lockup img { width: 220px; height: auto; }
.header .wrap { gap: 32px; }
.nav { gap: 30px; }

@media (max-width: 1180px) {
  .logo--mark small { display: none; }
  .nav { gap: 22px; font-size: 13.5px; }
  .header .phone { display: none; }
}
@media (max-width: 900px) {
  .logo--mark img { height: 38px; }
  .logo--mark b { font-size: 16.5px; }
  .logo--mark small { display: block; font-size: 8px; letter-spacing: .26em; margin-top: 4px; }
  .logo--lockup img { width: 180px; }
}

/* The longer brand name needs the room: menu items never wrap, and below 1440px the header phone
   is dropped because it is already in the top bar (and in the sticky call bar on phones). */
.nav a, .header .phone, .header .btn { white-space: nowrap; }
@media (max-width: 1440px) {
  .header .phone { display: none; }
}

/* Text-only page headers never take the fixed image-header height, whatever rule comes later
   (two classes beat the single-class .phero height rules in compact.css). */
.phero.phero--plain { height: auto; }

/* Header grows with its content, so larger phone text settings never clip the logo tagline. */
@media (max-width: 900px) {
  .header .wrap { height: auto; min-height: 72px; padding-top: 10px; padding-bottom: 10px; }
  .logo--mark span { min-width: 0; }
  .logo--mark b { white-space: normal; line-height: 1.15; }
}

/* ---------------------------------------------------------------------------------------------
   Minimum white space (owner request): tightest spacing that still keeps sections distinct.
   Kept last so it wins over compact.css.
   --------------------------------------------------------------------------------------------- */
:root { --section-y: clamp(28px, 3.6vw, 52px); }
.section { padding: var(--section-y) 0; }
.section-head { margin-bottom: 22px; gap: 24px; align-items: end; }
.section-head h2 { margin-top: 8px; }
.eyebrow { font-size: 11px; }
.hero__copy { padding-top: 40px; padding-bottom: 36px; }
.hero__copy h1 { margin: 12px 0 14px; }
.hero__actions { margin-top: 22px; }
.hero__proof { margin-top: 24px; padding-top: 18px; }
.hero__media { max-height: 560px; }
.phero { height: 320px; }
.phero .wrap { padding-bottom: 30px; }
.phero.phero--plain { padding: 26px 0 10px; }
.phero--plain + .section, .phero--plain + section { padding-top: 10px; }
.trust__item { padding: 16px 0; }
.split h2 { margin: 12px 0 14px !important; }
.checks { margin: 16px 0 20px; }
.svc__body { padding: 16px 18px 18px; }
.svc .link { margin-top: 10px; }
.step { padding-top: 20px; }
.step h3 { margin: 10px 0 6px; }
.ba-meta { margin-top: 12px; }
.quote { padding: 22px 22px; }
.quote p { margin: 8px 0 16px; }
.quote footer { padding-top: 14px; }
.faq details { padding: 14px 0; }
.areas a { padding: 12px 16px 12px 0; }
.stats div { padding: 20px 0; }
.values { gap: 24px; }
.form-card { padding: 26px 26px; }
.form-card > p { margin: 4px 0 14px; }
.steps-ind { margin-bottom: 16px; }
.field { margin-bottom: 10px; }
.field label { margin-bottom: 6px; }
.prose h3 { margin: 26px 0 10px; }
.prose p { margin-bottom: 12px; }
.incl { margin: 16px 0 6px; }
.pricing { margin-top: 16px; }
.filters { margin-bottom: 18px; }
.pgrid { gap: 22px 18px; }
.qinfo li { padding: 14px 0; }
.cta__contact { margin-top: 22px; }
.footer .top { padding: 44px 0 28px; gap: 32px; }
.footer p { margin-top: 14px; }
.footer h4 { margin-bottom: 12px; }
.footer ul { gap: 8px; }
.footer .bottom { padding: 14px 0; }
.portfolio-compare { margin-top: 28px !important; }

@media (max-width: 900px) {
  :root { --section-y: 26px; }
  .section-head { margin-bottom: 14px; gap: 6px; }
  .section-head p { font-size: 14px; line-height: 1.55; }
  .hero__copy { padding: 34px var(--gutter) 26px; }
  .hero__copy h1 { margin: 10px 0 10px; }
  .hero__actions { margin-top: 16px; }
  .hero__proof { margin-top: 18px; padding-top: 14px; }
  .hero__badge { bottom: -22px; }
  .phero { height: 210px; }
  .phero .wrap { padding-bottom: 20px; }
  .phero.phero--plain { padding: 18px 0 6px; }
  .phero--plain + .section, .phero--plain + section { padding-top: 6px; }
  .trust__item, .trust__item + .trust__item { padding: 10px 0; }
  .svc__body { padding: 14px 14px 14px; }
  .step, .step + .step { padding: 12px 0; }
  .quote { padding: 18px 16px; }
  .faq details { padding: 12px 0; }
  .areas a { padding: 10px 10px 10px 0; }
  .form-card, .quote-page .form-card { padding: 20px 16px; }
  .split__media { margin-bottom: 0; }
  .footer .top { padding: 30px 0 16px; gap: 18px 16px; }
  .footer ul { gap: 0; }
  .footer li a, .footer li { padding: 4px 0; }
  .footer .bottom { padding: 12px 0 76px; }
  .stats div { padding: 12px 0; }
  .portfolio-compare { margin-top: 18px !important; }
}

/* Launch offers two services (interior + exterior painting): with only two cards, use two wide
   cards instead of half of a four-column row. Grows back automatically when services are added. */
@media (min-width: 901px) {
  .services:has(> .svc:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; gap: 28px; }
  .services:has(> .svc:nth-child(2):last-child) .svc__img { aspect-ratio: 16/9; }
  .services:has(> .svc:nth-child(2):last-child) .svc h3 { font-size: 30px; }
}
@media (max-width: 900px) {
  /* two cards fit side by side as a short swipe row; let both show more fully */
  .services:has(> .svc:nth-child(2):last-child) > * { flex-basis: 86%; }
}

/* Instant guide price under the quote form */
.nc-estimate { margin-top: 14px; padding: 12px 14px; background: #F4ECDF; border-left: 3px solid var(--accent); font-size: 14.5px; }
.nc-estimate b { color: var(--accent-dark); font-weight: 700; }
.nc-estimate small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* Three services (interior, wallpaper, exterior): three equal columns on desktop */
@media (min-width: 901px) {
  .services:has(> .svc:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .services:has(> .svc:nth-child(3):last-child) .svc__img { aspect-ratio: 4/3; }
}

/* The Google rating badge is a link to the reviews section */
a.hero__badge { color: inherit; text-decoration: none; transition: transform .2s; }
a.hero__badge:hover { transform: translateY(-2px); }
html { scroll-behavior: smooth; }
#reviews { scroll-margin-top: 96px; }

/* Quote page on phones: the form comes first, contact details after it */
@media (max-width: 900px) {
  .quote-page > .form-card { order: -1; }
}

/* Medium widths (laptops, landscape tablets): the long brand name ran into the menu.
   Shrink it first, then show the R&D mark alone; the logo never shrinks under the nav. */
.logo--mark { flex-shrink: 0; }
.header .wrap { min-width: 0; }
@media (min-width: 901px) and (max-width: 1280px) {
  .logo--mark b { font-size: 18px; }
  .header .wrap { gap: 22px; }
  .nav { gap: 20px; font-size: 13.5px; }
  .header .btn { padding: 13px 18px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .logo--mark span { display: none; }
  .logo--mark img { height: 46px; }
}