/* Rolling Precision — non-critical styles.
   Concept: gold behaves as a specular highlight travelling across a finished panel.
   Hairlines brighten toward one end; nothing is filled in gold except the primary button. */

/* ---------- shared primitives ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.muted{color:var(--text-dim)}
.small{font-size:.875rem}
.sub-h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.0625rem;letter-spacing:-.01em;margin:0 0 1.1rem}

.section,.band{position:relative;padding:clamp(3.75rem,8vw,6.5rem) 0}
.section::before,.band::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 45%,transparent);transform-origin:left}
/* JS only removes the hairline when motion is allowed, so a no-JS or
   reduced-motion page still renders every rule in its final state. */
.js-reveal .section::before,.js-reveal .band::before{transform:scaleX(0)}
.js-reveal .section.is-revealed::before,.js-reveal .band.is-revealed::before{transform:scaleX(1);transition:transform 600ms cubic-bezier(.22,.7,.3,1)}

/* ---------- inner pages ----------
   The header is fixed and, without a hero behind it, opaque from the first
   pixel — so the first section has to clear it rather than sit under it. */
.page-hero{padding-top:calc(72px + clamp(2.5rem,6vw,4.5rem))}
.page-hero::before{display:none}
.shell--measure{width:min(68ch,100% - 2.5rem);margin-inline:auto}
.page-next{margin-top:2rem}
.page-next a{font-weight:500}

.crumbs{margin-bottom:1.5rem;font-size:.875rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;color:var(--text-dim)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--hair)}
.crumbs [aria-current]{color:var(--text-dim)}

.contact-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:3rem}
/* ---------- quote form ----------
   Inputs are --panel on --bg with a hairline edge, so they read as recessed
   surfaces rather than boxes drawn in gold. */
.quote-form{margin-top:.5rem}
.field-grid{display:grid;gap:1.25rem}
@media (min-width:600px){.field-grid{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.45rem;margin:0 0 1.25rem}
.field-grid .field{margin-bottom:0}
.field label{font-size:.875rem;font-weight:600;color:var(--text)}
.field__opt{font-weight:400;color:var(--text-dim)}
.field__hint{font-size:.8125rem;color:var(--text-dim)}
.quote-form :is(input,select,textarea){
  width:100%;min-height:48px;padding:.75rem .9rem;
  background:var(--panel);color:var(--text);
  border:1px solid var(--hair);border-radius:var(--radius);
  font:400 1rem/1.4 var(--sans);
  transition:border-color .2s;appearance:none}
.quote-form textarea{min-height:120px;resize:vertical}
.quote-form :is(input,select,textarea):hover{border-color:rgba(201,162,75,.35)}
.quote-form :is(input,select,textarea):focus-visible{border-color:var(--accent)}
.quote-form select{
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.75rem}
.quote-form select:invalid{color:var(--text-dim)}
.quote-form ::placeholder{color:rgba(245,241,232,.38)}
/* :user-invalid so a field is not marked wrong before it has been filled in */
.quote-form :is(input,select,textarea):user-invalid{border-color:#E88A6A}
.quote-form button[type=submit]{margin-top:1.75rem;min-width:12rem}
.form__foot{margin-top:1.25rem}

.hours-table{width:100%;border-collapse:collapse;font-size:.9375rem}
.hours-table th{text-align:left;font-weight:400;color:var(--text-dim);padding:.5rem 0}
.hours-table td{text-align:right;padding:.5rem 0;color:var(--text);white-space:nowrap}
.hours-table tr+tr th,.hours-table tr+tr td{border-top:1px solid rgba(245,241,232,.07)}
.chips--areas li{font-size:1rem}

.section__head{margin-bottom:clamp(2rem,4vw,3rem);max-width:68ch}
.section__lead{margin-top:.9rem;color:var(--text-dim);max-width:60ch}
.section__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem}

/* ---------- services: tiers ---------- */
.tiers{display:grid;gap:1.25rem}
@media (min-width:820px){.tiers{grid-template-columns:repeat(3,1fr)}}

.tier{position:relative;display:flex;flex-direction:column;background:var(--panel) var(--weave);border:1px solid;border-radius:var(--radius);padding:2.1rem 1.6rem 1.7rem}
.tier--silver{--metal:#C0C0C0;border-color:rgba(192,192,192,.26)}
.tier--gold{--metal:#C9A24B;border-color:rgba(201,162,75,.4)}
.tier--platinum{--metal:#E5E4E2;border-color:rgba(229,228,226,.26)}
.tier__flag{position:absolute;top:-1px;right:1.4rem;font:600 .6875rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--bg);background:var(--accent);padding:.42rem .65rem;border-radius:0 0 var(--radius) var(--radius)}
.tier__name{font-size:1.5rem;color:var(--metal)}
.tier__sub{margin-top:.3rem;font-size:.9375rem;color:var(--text-dim)}
.tier__spine{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid rgba(245,241,232,.09);font-size:.8125rem;font-weight:500;letter-spacing:.02em;color:var(--accent)}
.tier__blurb{margin-top:.85rem;font-size:.9375rem;color:var(--text-dim)}
.tier__inherit{margin-top:1.3rem;font-size:.875rem;font-weight:600;color:var(--text)}
.tier__list{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.6rem;font-size:.9375rem}
.tier__list li{position:relative;padding-left:1.15rem;line-height:1.5}
.tier__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--metal)}
.tier__foot{margin-top:auto;padding-top:1.7rem}
.tier__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem;padding-top:1.3rem;border-top:1px solid rgba(245,241,232,.09)}
.tier__price span{font-size:.8125rem;color:var(--text-dim)}
.tier__price strong{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.75rem;letter-spacing:-.02em;color:var(--text)}
.tier__price em{font-style:normal;font-size:.8125rem;color:var(--text-dim)}
.tier__price-alt{margin-top:.45rem;font-size:.8125rem;color:var(--text-dim)}
/* The decision happens at the card, not four sections below it. Ghost, never
   gold — the accent fill stays reserved for the WhatsApp CTA. */
.tier__cta{width:100%;margin-top:1.35rem;line-height:1.35;text-align:center;padding-block:.8rem}
.tier__cta:hover{border-color:var(--metal,var(--accent))}
.panel .tier__cta{margin-top:1.35rem}

/* ---------- specialty pair ---------- */
.specialty,.addons,.extras-plans{margin-top:clamp(2.5rem,5vw,3.75rem)}
.specialty__grid{display:grid;gap:1.25rem}
@media (min-width:700px){.specialty__grid{grid-template-columns:1fr 1fr}}
.panel{background:var(--panel);border:1px solid var(--hair);border-radius:var(--radius);padding:1.6rem}
.panel :is(h3,h4){margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.0625rem;letter-spacing:-.01em;color:var(--accent)}
.panel p{margin-top:.75rem;font-size:.9375rem;color:var(--text-dim)}
.panel__price{margin-top:1.1rem!important;padding-top:1.1rem;border-top:1px solid rgba(245,241,232,.09);font-weight:600;color:var(--text)!important;font-size:1rem!important}

/* ---------- add-ons ---------- */
.addons__table{width:100%;max-width:46rem;border-collapse:collapse;font-size:.9375rem}
.addons__table thead th{text-align:left;font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);padding-bottom:.75rem;border-bottom:1px solid var(--hair)}
.addons__table thead th:last-child,.addons__table td{text-align:right}
.addons__table th[scope=row]{text-align:left;font-weight:400}
.addons__table tbody th,.addons__table tbody td{padding:.9rem 0;border-bottom:1px solid rgba(245,241,232,.07)}
.addons__table tbody td{color:var(--accent);font-weight:500;white-space:nowrap}
.addons__table tbody tr:last-child th,.addons__table tbody tr:last-child td{border-bottom:0}

/* ---------- extras + plans ---------- */
.extras-plans{display:grid;gap:2.5rem}
@media (min-width:700px){.extras-plans{grid-template-columns:1fr 1fr;gap:3rem}}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{border:1px solid var(--hair);border-radius:var(--radius);padding:.5rem .85rem;font-size:.875rem;color:var(--text-dim)}
.ticks{list-style:none;margin:1.1rem 0;padding:0;display:grid;gap:.7rem;font-size:.9375rem}
.ticks li{position:relative;padding-left:1.35rem}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.disclaimer{margin-top:clamp(2.5rem,5vw,3.5rem);font-size:.875rem;line-height:1.6;color:rgba(245,241,232,.62);max-width:70ch}
/* answers the question the disclaimer above just raised; sits tight to it */
.disclaimer__next{margin-top:.85rem;max-width:70ch}

/* ---------- about pillars ---------- */
.pillars{display:grid;gap:1.25rem}
@media (min-width:620px){.pillars{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.pillars{grid-template-columns:repeat(4,1fr)}}
.pillar{position:relative;padding-top:1.4rem;border-top:1px solid var(--hair)}
.pillar::after{content:"";position:absolute;top:-1px;left:0;width:42px;height:1px;background:var(--accent)}
.pillar :is(h2,h3){font-size:1.0625rem;color:var(--text)}
.pillar p{margin-top:.7rem;font-size:.9375rem;color:var(--text-dim)}

/* ---------- service area ---------- */
.areas{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden}
@media (min-width:600px){.areas{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.areas{grid-template-columns:repeat(3,1fr)}}
.area{background:var(--bg);padding:1.6rem}
.area :is(h2,h3){font-size:1.0625rem;color:var(--accent)}
.area p{margin-top:.55rem;font-size:.9375rem;color:var(--text-dim)}

/* ---------- process ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:2rem}
@media (min-width:640px){.steps{grid-template-columns:1fr 1fr;gap:2.5rem}}
@media (min-width:1040px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;padding-top:1.4rem;border-top:1px solid var(--hair)}
.step__n{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:.875rem;letter-spacing:.02em;color:var(--accent);margin-bottom:.85rem}
.step :is(h2,h3){font-size:1.0625rem}
.step p{margin-top:.7rem;font-size:.9375rem;color:var(--text-dim)}

/* ---------- faq + seasonal ---------- */
.faq-grid{display:grid;gap:2.5rem;align-items:start}
@media (min-width:900px){.faq-grid{grid-template-columns:1fr 1fr;gap:4rem}}
.faq{border-bottom:1px solid rgba(245,241,232,.09)}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 2rem 1.15rem 0;font-weight:500;position:relative;min-height:44px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.35rem;top:50%;width:9px;height:9px;border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq summary:hover{color:var(--accent-hover)}
.faq__body{padding:0 0 1.25rem}
.faq__body p{color:var(--text-dim);font-size:.9375rem;max-width:60ch}
.faq__more{margin-top:1.5rem}

.seasonal{background:var(--panel);border:1px solid var(--hair);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.25rem)}
.seasonal :is(h2,h3){font-size:1.0625rem;color:var(--accent)}
.seasonal p{margin-top:1rem;font-size:.9375rem;color:var(--text-dim)}
.seasonal .rule{margin:1.75rem 0 1.5rem}
.hours{color:var(--text)!important}
.hours strong{color:var(--accent);font-weight:600}

/* ---------- quote band ---------- */
.band{background:var(--panel);text-align:center}
.band::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 45%,transparent)}
.band__inner p{margin-top:1rem;color:var(--text-dim)}
.band .section__cta{justify-content:center}

/* ---------- why us ---------- */
.why{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--hair);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
/* five across only once each cell clears the longest label; minmax(0,1fr) keeps a
   long word from forcing the track wider than its share */
@media (min-width:1000px){.why{grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden}}
.why li{background:var(--bg);padding:1.5rem;font-weight:500;font-size:.9375rem;display:flex;align-items:flex-start;gap:.75rem;overflow-wrap:break-word}
.why li::before{content:"";flex:0 0 auto;margin-top:.62em;width:14px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}

/* ---------- reviews (Starwall embed) ----------
   The widget injects its own markup and carries its own styling, so there is
   nothing here to theme. min-height reserves the space it will occupy, or the
   injection shoves the footer down and shows up as layout shift. Tune the value
   once the rendered height is known on the live site. */
.section__lead strong{color:var(--accent);font-weight:600}
.reviews-embed{min-height:320px}
.rail__foot{margin-top:1.25rem;font-size:.9375rem}

/* ---------- footer ---------- */
.site-footer{padding:clamp(3rem,6vw,4.5rem) 0 2.5rem;border-top:1px solid var(--hair)}
.footer__top{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between;align-items:flex-start;margin-bottom:2.5rem}
.footer__brand{display:flex;align-items:center;gap:1.25rem}
.footer__crest{width:58px;height:58px;flex:0 0 auto}
.footer__wordmark{width:210px;max-width:100%;height:auto;aspect-ratio:440/93}
/* crest + wordmark together exceed a 320px shell at full size */
@media (max-width:420px){
  .footer__brand{gap:.9rem}
  .footer__crest{width:46px;height:46px}
  .footer__wordmark{width:170px}
}
.footer__links{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;max-width:34rem}
.footer__links a{color:var(--text);text-decoration:none;font-size:.9375rem;padding:.6rem 0;min-height:44px;display:inline-flex;align-items:center;gap:.55rem}
.footer__links a:hover{color:var(--accent-hover)}
.ico{flex:0 0 auto;width:16px;height:16px;fill:var(--accent);transition:fill .2s}
.footer__links a:hover .ico{fill:var(--accent-hover)}
.footer__privacy{margin-top:1.75rem;max-width:68ch;font-size:.875rem;color:var(--text-dim)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;margin-top:1.75rem;font-size:.875rem}

/* ---------- wide screens ---------- */
@media (min-width:1800px){:root{--shell:min(1320px,100% - 4rem)}}

/* The prefers-reduced-motion block lives in the critical inline CSS in index.html
   so it is in force before this sheet loads. Nothing to repeat here. */