/* ════════════════════════════════════════
   AllPro AG · site-wide refinement layer
   Loaded after each page's inline styles. Overrides only: no markup is restyled
   that the pages don't already share.
════════════════════════════════════════ */

:root {
  --muted: #4d637d;            /* was #5a708a, lifts body copy to ~5.4:1 on cream */
  --ink-soft: #2a3c51;
  --brass: #d3a24c;            /* primary button fill, navy label = 7:1 */
  --brass-hi: #ddb263;
  --navy-rgb: 12, 30, 53;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow-sm: 0 1px 2px rgba(var(--navy-rgb), .05), 0 6px 16px -8px rgba(var(--navy-rgb), .12);
  --shadow-md: 0 1px 2px rgba(var(--navy-rgb), .05), 0 22px 44px -18px rgba(var(--navy-rgb), .26);
  --z-grain: 150;
  --z-skip: 400;
}

/* ── BASE TYPE ── */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, .room-title { text-wrap: balance; }
p, li, .faq-a { text-wrap: pretty; }
h2 { letter-spacing: -0.012em; }
.room-title, .hero-content h1 { letter-spacing: -0.022em; }
.room-title em, .hero-content h1 em, h2 em { letter-spacing: -0.01em; }

/* Cormorant's default old-style figures read "$0" as "$o"; use lining numerals for data */
h1, h2, h3, h4,
.trust-num, .stat-number, .senior-pct, .feature-stat-num, .step-num, .how-step-num,
.tvp-amt, .nf-code, .brand-item { font-variant-numeric: lining-nums; }

.lead { line-height: 1.7; max-width: 58ch; }
.room-desc { font-weight: 400; color: rgba(255,255,255,0.84); }
.hero-content p { color: rgba(255,255,255,0.84); }

/* Eyebrows: calmer tracking plus a hairline lead-in */
.eyebrow, .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11.5px; letter-spacing: 0.16em;
}
.eyebrow::before, .hero-eyebrow::before {
  content: ''; width: 22px; height: 1px; background: currentColor; opacity: .7; flex: none;
}
.room-eyebrow { letter-spacing: 0.16em; font-size: 11.5px; }

/* ── NAV ── */
.logo { white-space: nowrap; }
.nav-links > li { white-space: nowrap; }
.nav-links > li > a { text-transform: none; letter-spacing: 0.01em; }

@media (min-width: 1201px) {
  nav#nav, nav#mainNav { padding: 0 clamp(24px, 3.6vw, 64px); }
  nav#nav.filled, nav#mainNav.filled {
    background: rgba(12,30,53,0.9);
    -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 12px 32px -12px rgba(0,0,0,0.55);
  }
  .nav-links { gap: clamp(14px, 1.7vw, 30px); align-items: center; }
  .nav-links > li > a {
    font-size: 15px; font-weight: 500;
    text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 9px;
    text-decoration-color: transparent;
    transition: color .2s, text-decoration-color .25s var(--ease);
  }
  .nav-links > li > a:hover { text-decoration-color: rgba(212,162,74,0.6); }
  .nav-links > li > a.nav-current { text-decoration-color: var(--gold2); }
  .nav-call { font-size: 17px; font-variant-numeric: tabular-nums; }
}
@media (min-width: 1201px) and (max-width: 1340px) {
  .nav-links > li > a { font-size: 14.5px; }
  .nav-book { padding: 12px 18px; font-size: 14.5px; }
  .nav-call { font-size: 16px; }
  .logo { font-size: 27px; }
}
@media (max-width: 1200px) {
  .nav-links > li > a { font-size: 16px; }
}

/* Phones: the logo stayed on one line only by wrapping; tighten the bar instead */
@media (max-width: 600px) {
  nav#nav, nav#mainNav { padding: 0 16px; }
  .nav-toggle { margin-left: 8px; width: 40px; padding: 8px; }
}
@media (max-width: 420px) {
  .logo { font-size: 23px; letter-spacing: 0.02em; }
  .nav-book { padding: 9px 12px; font-size: 13px; margin-right: 10px; }
  /* phone number stays in the DOM (and in call tracking); shown as a call icon */
  .nav-call {
    font-size: 0; width: 42px; height: 42px; flex: none;
    display: inline-grid; place-items: center;
    border: 1px solid rgba(255,255,255,0.28); border-radius: 11px;
  }
  .nav-call::before {
    content: ''; width: 19px; height: 19px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* ── BUTTONS ── */
/* White on #b8872a was 3.2:1; navy on brass is 7:1 and keeps the gold */
.btn-gold, .form-submit, .nav-book, .room-cta, .ba-right a.big-cta,
.areas-callout a, .brands-callout a, .sticky-bar .sticky-call {
  background: var(--brass); color: var(--navy);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(var(--navy-rgb), .18), 0 10px 22px -12px rgba(184,135,42,0.7);
  transition: background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-gold:hover, .form-submit:hover, .nav-book:hover, .room-cta:hover, .ba-right a.big-cta:hover,
.areas-callout a:hover, .brands-callout a:hover, .sticky-bar .sticky-call:hover {
  background: var(--brass-hi); color: var(--navy); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 4px rgba(var(--navy-rgb), .14), 0 16px 28px -12px rgba(184,135,42,0.75);
}
.btn-gold:active, .form-submit:active, .nav-book:active, .room-cta:active, .ba-right a.big-cta:active,
.areas-callout a:active, .brands-callout a:active, .sticky-bar .sticky-call:active,
.btn-outline-w:active, .room-cta-outline:active, .btn-white:active, .service-page-link:active, .tvp-tier:active {
  transform: translateY(1px) scale(0.985); transition-duration: .08s;
}
.form-submit { letter-spacing: 0.02em; }
.form-submit:disabled { opacity: .72; cursor: progress; transform: none; }
.room-cta, .service-page-link { text-transform: none; letter-spacing: 0.02em; font-size: 15px; }
.service-page-link:hover { color: var(--navy); background: var(--brass); border-color: var(--brass); }
.callback-success .cb-check, .sr-success .sr-check, .rc-badge { background: var(--brass); color: var(--navy); }
.sr-pstep.active .sr-dot { background: var(--brass); border-color: var(--brass); color: var(--navy); }
/* drywall price strip: small white text on the gold gradient was hard to read */
.dwp-strip { background: var(--brass); color: var(--navy); }
.dwp-strip a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.dwp-strip > div + div { border-color: rgba(var(--navy-rgb), .16); }
.dwp-strip .dwp-si { background: rgba(var(--navy-rgb), .1); }
.ci-ico svg { width: 19px; height: 19px; }
.tvp-tier[aria-pressed="true"] .tvp-pick { background: var(--brass); border-color: var(--brass); color: var(--navy); }
.btn-outline-w { transition: border-color .2s, background-color .2s, transform .2s var(--ease); }
.btn-outline-w:hover { background: rgba(255,255,255,0.08); }

/* ── FOCUS + SKIP LINK ── */
:where(a, button, [role="button"], summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--gold2); outline-offset: 3px;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: var(--z-skip);
  background: var(--brass); color: var(--navy); padding: 12px 18px; border-radius: 10px;
  font-weight: 600; font-size: 15px; text-decoration: none;
  transform: translateY(-180%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }
main:focus { outline: none; }

/* ── HERO ── */
/* svh: full-height without the iOS toolbar jump */
.hero-full { height: 100svh; }
.scroll-theater, .sticky-stage, .room-track, .room-panel { height: 100svh; }
@media (max-width: 560px) {
  .hero-reviews { border-radius: 16px; justify-content: center; gap: 6px 16px; padding: 10px 18px; }
  .hero-reviews .hr-divider { display: none; }
}

/* ── CALLBACK CARD + FORMS ── */
.cb-card { border-radius: 20px; box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 44px 80px -28px rgba(4,10,20,0.6); }
.cb-f label { font-size: 12.5px; margin-bottom: 6px; }
.cb-f input {
  height: 46px; border-radius: 10px; border-color: rgba(var(--navy-rgb), .14); font-size: 14.5px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.cb-f input:hover { border-color: rgba(var(--navy-rgb), .3); }
.cb-f input:focus { box-shadow: 0 0 0 3px rgba(212,162,74,0.22); }
.cb-btn2 { height: 46px; border-radius: 10px; }
.form-group input, .form-group select, .form-group textarea { border-radius: 10px; }
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color: rgba(var(--navy-rgb), .28); }

/* Inline validation: shows only after the visitor has touched the field */
.cb-f, .form-group, .tvp-f { position: relative; }
.cb-f input:user-invalid,
.form-group :is(input, select, textarea):user-invalid,
.tvp-f :is(input, select):user-invalid { border-color: #b4462f; box-shadow: 0 0 0 3px rgba(180,70,47,0.14); }
.cb-f:has(:user-invalid)::after,
.form-group:has(:user-invalid)::after {
  content: 'Please fill this in'; display: block; margin-top: 5px;
  font-size: 12px; font-weight: 600; color: #a63e29;
}
.cb-f:has(input[type="tel"]:user-invalid)::after, .form-group:has(input[type="tel"]:user-invalid)::after { content: 'Add a phone number so we can call you'; }
.cb-f:has(input[type="email"]:user-invalid)::after, .form-group:has(input[type="email"]:user-invalid)::after { content: 'That email looks incomplete'; }
.cb-f:has(input[name="zip"]:user-invalid)::after, .form-group:has(input[name="zip"]:user-invalid)::after { content: 'Use a 5-digit ZIP code'; }
@media (min-width: 1001px) {
  .cb-f:has(:user-invalid)::after { position: absolute; left: 0; top: 100%; white-space: nowrap; }
}
@media (max-width: 1000px) {
  .cb-grid { align-items: start; }
}

/* ── TRUST BAR ── */
.trust-bar { background: linear-gradient(180deg, #0a1a2e 0%, var(--navy) 100%); border-top: 1px solid rgba(255,255,255,0.05); }
.trust-label { text-transform: none; letter-spacing: 0.01em; font-size: 12.5px; color: rgba(255,255,255,0.66); }
.stat-label, .feature-stat-label { color: rgba(255,255,255,0.66); }
.feature-stat-label { text-transform: none; letter-spacing: 0.01em; font-size: 12px; }

/* ── SURFACES ── */
/* Cards lean on soft, navy-tinted elevation instead of border + flat fill */
.why-card {
  background: #fff; border-color: transparent; border-radius: 16px; box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.why-card h4 { font-size: 21px; line-height: 1.15; margin-bottom: 9px; }
.why-card p, .service-block p, .step p { font-size: 14.5px; line-height: 1.68; }
.service-block h3 { font-size: 23px; }
.home-service-card { border-color: transparent; background: #fff; box-shadow: var(--shadow-sm); }
.home-service-card p { font-size: 14.5px; }
.form-perk { border-color: transparent; background: #fff; box-shadow: var(--shadow-sm); }
.form-card { border-color: transparent; border-radius: 22px; box-shadow: var(--shadow-md); }
.brand-chip { color: var(--muted); border-color: transparent; box-shadow: var(--shadow-sm); }
.feature-panel, .how-detailed, .ba-section { isolation: isolate; }
.dropdown-menu:not(.mega), .dropdown-menu.mega { box-shadow: 0 30px 60px -20px rgba(var(--navy-rgb), .45), 0 2px 6px rgba(var(--navy-rgb), .08); }

/* ── REVIEWS ── */
.review-card {
  border: 0; border-radius: 18px; box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.review-card:hover { box-shadow: var(--shadow-md); }
.review-card .review-text { font-style: normal; color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; }
.review-card .review-av { border-radius: 12px; font-size: 12.5px; letter-spacing: 0.03em; }
.review-card .stars { color: var(--gold2); letter-spacing: 2px; }
.review-card .review-footer { border-top-color: rgba(var(--navy-rgb), .07); }

/* ── FAQ ── */
/* Divider list instead of stacked boxes; the question is a real <button> */
.faq-list { gap: 0; border-top: 1px solid rgba(var(--navy-rgb), .12); }
.faq-item { background: transparent; border: 0; border-bottom: 1px solid rgba(var(--navy-rgb), .12); border-radius: 0; overflow: visible; }
.faq-q {
  width: 100%; font: inherit; font-size: 17px; font-weight: 600; color: var(--navy);
  background: none; border: 0; text-align: left; padding: 22px 0; gap: 24px; line-height: 1.4;
  transition: color .2s;
}
.faq-q:hover { color: var(--gold); }
.faq-q::after, .faq-q.open::after {
  content: ''; flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(184,135,42,0.45);
  background:
    linear-gradient(var(--gold), var(--gold)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 1.5px 12px no-repeat;
  transition: transform .35s var(--ease), background-color .25s, border-color .25s;
}
.faq-q.open::after { transform: rotate(45deg); background-color: rgba(212,162,74,0.14); border-color: var(--gold2); }
.faq-a { font-size: 15.5px; line-height: 1.75; color: var(--muted); padding: 0 56px 26px 0; max-width: 68ch; }
.faq-a.open { animation: faqIn .4s var(--ease); }
@media (max-width: 600px) { .faq-q { font-size: 16px; padding: 18px 0; } .faq-a { padding-right: 4px; } }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }
.faq-aside { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 4px 0 32px; max-width: 34ch; }
.faq-aside a { white-space: nowrap; color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(184,135,42,0.5); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.faq-aside a:hover { text-decoration-color: var(--gold); }
@media (min-width: 1000px) {
  #faq > .section-inner {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 6vw, 104px); align-items: start;
  }
  #faq > .section-inner > * { grid-column: 1; justify-self: start; }
  #faq > .section-inner > .faq-list { grid-column: 2; grid-row: 1 / span 8; justify-self: stretch; max-width: none; }
}

/* ── SERVICE AREAS ── */
/* 50 pills became a scannable column list; linked cities read as links */
.areas-section .areas-grid { display: block; columns: 3 150px; column-gap: 32px; margin-bottom: 0; }
.areas-section .area-tag {
  display: block; break-inside: avoid; background: none; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 9px 0; font-size: 14px; letter-spacing: 0.01em; color: rgba(255,255,255,0.72);
}
.areas-section .area-tag:hover { background: none; border-color: rgba(255,255,255,0.08); color: #fff; }
.areas-section a.area-tag {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  color: var(--gold2); font-weight: 500; border-color: rgba(212,162,74,0.22);
}
.areas-section a.area-tag::after { content: '\2192'; opacity: .55; transition: transform .25s var(--ease), opacity .25s; }
.areas-section a.area-tag:hover { background: none; color: #f0c878; border-color: rgba(212,162,74,0.5); }
.areas-section a.area-tag:hover::after { transform: translateX(3px); opacity: 1; }
.areas-layout { align-items: stretch; }
.areas-map { height: auto; min-height: 480px; border-radius: 18px; }
.areas-intro { color: rgba(255,255,255,0.68); }
@media (max-width: 900px) { .areas-map { min-height: 360px; } }
@media (max-width: 600px) {
  .areas-section .areas-grid { columns: 2; column-gap: 20px; }
  .areas-section .area-tag { font-size: 13.5px; padding: 8px 0; }
}

/* ── DARK-SURFACE LEGIBILITY ── */
.ba-right a.text-cta { color: rgba(255,255,255,0.72); display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.ba-right a.text-cta svg { width: 17px; height: 17px; flex: none; }
.how-step-body p { color: rgba(255,255,255,0.7); }

/* ── FOOTER ── */
.footer-links a, .footer-areas-list a, .footer-col a { color: rgba(255,255,255,0.68); }
.footer-links a:hover, .footer-areas-list a:hover, .footer-col a:hover { color: var(--gold2); }
.footer-links h4, .footer-areas h4, .footer-col h4 { color: rgba(255,255,255,0.5); }
.footer-brand p { color: rgba(255,255,255,0.58); }
.footer-copy { color: rgba(255,255,255,0.5); }

/* ── TEXTURE ── */
/* Fixed film grain so the cream and navy fields aren't digitally flat */
body::after {
  content: ''; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.1 0 0 0 0 0.18 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── SCROLL REVEAL ── */
/* Classes are added by refine.js; without JS nothing is hidden */
@media (prefers-reduced-motion: no-preference) {
  html.rv-on .rv {
    opacity: 0; transform: translateY(22px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    transition-delay: var(--rv-d, 0ms);
  }
  html.rv-on .rv.rv-in { opacity: 1; transform: none; }
}
@media print {
  html.rv-on .rv { opacity: 1; transform: none; }
  body::after { display: none; }
}