/* 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;line-height:1.55;color:var(--text-dim)}
/* The surcharge is the number people scan for — lift it out of the dim line. */
.tier__price-alt b{font-weight:600;color:var(--text)}
/* 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}
/* the price column already carries the accent, so a gold link in the name column
   would leave the whole table gold — these read as text with a hairline underline */
.addons__table th a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--hair)}
.addons__table th a:hover{color:var(--accent-hover);border-bottom-color:var(--accent)}
.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}

/* ---------- mobile nav: services sub-list ----------
   Plain nested markup, no JS. The desktop bar keeps its five flat items; the
   service pages are reached from /services or from here. `.mobile-nav ul` sets a
   shell width and auto margins, which a nested list must not inherit. */
.mobile-nav__sub{width:auto!important;margin-inline:0!important;padding:0 0 0 1.1rem!important}
.mobile-nav__sub a{font-size:.9375rem;font-weight:400;color:var(--text-dim)}
.mobile-nav__sub a:hover{color:var(--accent-hover)}

/* ---------- long-form service copy ----------
   The site had no multi-paragraph body setting: `p{margin:0}` in the critical
   block means consecutive paragraphs collide. This is spacing and measure only —
   the list marker is the same 7px hairline as .tier__list, and h3 matches the
   size and colour already used by .panel h3 and .area h2. No new tokens. */
.prose{max-width:68ch}
.prose>p+p{margin-top:1.15rem}
.prose h3{margin-top:2.5rem;font-size:1.0625rem;color:var(--accent)}
.prose h3:first-child{margin-top:0}
.prose h3+p{margin-top:1rem}
.prose ul{list-style:none;margin:1.15rem 0 0;padding:0;display:grid;gap:.6rem;font-size:.9375rem}
.prose ul li{position:relative;padding-left:1.15rem;line-height:1.5}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--accent)}
.prose ul+p{margin-top:1.15rem}
.prose strong{font-weight:600}

/* ---------- service index cards ----------
   .panel with a linked heading. Nothing new but the hover, which borrows the
   same accent shift every other link on the site already uses. */
.svc-grid{display:grid;gap:1.25rem;margin-top:1.5rem}
@media (min-width:700px){.svc-grid{grid-template-columns:1fr 1fr}}
.panel h3 a{text-decoration:none;color:inherit}
.panel h3 a:hover{color:var(--accent-hover)}
.svc-grid .panel__price{font-size:.9375rem!important}

/* ---------- 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}
/* the heading now carries the community list rather than a one-word region, so it
   has to sit as comfortably over three lines as it did over one */
.area :is(h2,h3){font-size:1.0625rem;line-height:1.3;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)}

/* ---------- gallery ----------
   .gallery-grid and .shot sizing live in the critical block in gallery.html —
   the first row is above the fold and needs its aspect-ratio box before this
   sheet lands. What is here is everything the tile does not need to reserve space. */
.gallery-group+.gallery-group{margin-top:clamp(2.75rem,6vw,4rem)}
.gallery-group__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;margin-bottom:1.25rem}
.gallery-group :is(h2,h3){font-size:1.0625rem;color:var(--accent)}
.gallery-group__note{font-size:.9375rem;color:var(--text-dim)}
.shot img{transition:transform .45s cubic-bezier(.22,.7,.3,1),opacity .3s}
.shot:hover img,.shot:focus-visible img{transform:scale(1.04);opacity:.86}
/* the gold arrives as an edge catching light along the bottom of the tile,
   not as a frame drawn around it */
.shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 45%,transparent);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.shot:hover::after,.shot:focus-visible::after{transform:scaleX(1)}
.shot:focus-visible{outline:2px solid var(--accent-hover);outline-offset:-2px}

/* ---------- lightbox ----------
   Never painted until the dialog is opened, so none of this is critical. */
.lightbox{border:0;padding:clamp(.75rem,2vw,1.25rem);background:var(--bg);color:var(--text);border-radius:var(--radius);width:min(100% - 1.5rem,1180px);max-width:none;max-height:calc(100dvh - 1.5rem);overflow:auto}
.lightbox::backdrop{background:rgba(13,13,13,.94)}
.lightbox__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem}
.lightbox__count{font-size:.875rem;color:var(--text-dim)}
.lightbox__figure{margin:0}
.lightbox__figure img{width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 15rem);margin-inline:auto;border-radius:var(--radius)}
.lightbox__cap{margin-top:.9rem;max-width:68ch;margin-inline:auto;text-align:center;font-size:.875rem;color:var(--text-dim)}
.lightbox__nav{display:flex;justify-content:center;gap:.6rem;margin-top:1rem}
/* display:flex would otherwise beat the hidden attribute on a single-photo group */
.lightbox__nav[hidden]{display:none}
.lightbox__btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;background:transparent;border:1px solid var(--hair);border-radius:var(--radius);color:var(--text);cursor:pointer;transition:color .2s,border-color .2s}
.lightbox__btn:hover{color:var(--accent-hover);border-color:var(--accent)}
.lightbox__btn svg{width:20px;height:20px;fill:currentColor}

/* ---------- 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}
/* communities lead, the six regions sit under them as the secondary line */
.footer__areas{max-width:52ch}
.footer__areas p+p{margin-top:.3rem}

/* ---------- 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. */