/* glass-fix.css - loaded LAST. Fixes from Ant's iPhone review (2026-10-17) + design audit.
   1 menu panel: header glass moved to ::before so the header is no longer the containing block of the fixed menu
   2 button labels centred (no arrow circle pushing the text)
   3 soft sheen (no hard gradient stop), CTA cards get inner padding
   4 "Popular" badge solid + high contrast */

/* ---------- 1. header glass lives on ::before, never on .header itself ---------- */
html .header,html.lg-webkit .header,html.lg-refract .header{
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
}
.header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--lg-spec),linear-gradient(180deg,#fff,#fbfbfb);
  -webkit-backdrop-filter:blur(var(--lg-blur,18px)) saturate(var(--lg-sat,1.6));
  backdrop-filter:blur(var(--lg-blur,18px)) saturate(var(--lg-sat,1.6));
}
html.lg-webkit .header::before{
  background:var(--lg-spec),linear-gradient(180deg,#fff,#fbfbfb);
}
@media (min-width:900px){
  html.lg-refract .header::before{-webkit-backdrop-filter:none;backdrop-filter:var(--lgbf,blur(12px) saturate(1.7))}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header::before{background:#fff}
}
@media (prefers-reduced-transparency:reduce){
  .header::before{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* root cause #2: glass-a.css gives every [data-lg] a `scale` property; a non-"none" scale on the header makes it the
   containing block for the fixed menu panel (WebKit and Chromium). The bar never needs press/elastic scaling. */
.header[data-lg],.header[data-lg][data-lg-press]{scale:none;transform:none;transition:background .2s,box-shadow .25s}

/* the open menu: full-height, opaque white, above every section and the estimate bar */
html .mobile-menu{
  position:fixed;top:var(--header-h,68px);right:0;bottom:0;left:0;height:auto;max-height:none;
  z-index:49;background:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 #e6e6e6;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-bottom:calc(2rem + env(safe-area-inset-bottom));
}
html .mobile-menu .btn{justify-content:center;text-align:center}

/* ---------- 2. labels centred: the decorative arrow circle is removed everywhere ---------- */
.hero__ctas .btn--book::after,.final__ctas .btn--book::after,.est-summary__cta::after,.pricing__cta::after,
.btn--book::after,.btn--gold::after,.btn--outline-dark::after,.pkg-card__btn::after{content:none!important;display:none!important}
.hero__ctas .btn--book,.final__ctas .btn--book,.est-summary__cta,.pricing__cta,
.btn,.btn--book,.btn--gold,.btn--outline-dark,.btn--ghost,.pkg-card__btn{
  justify-content:center;text-align:center;
}
.final__ctas .btn--book,.est-summary__cta,.pricing__cta{padding:0 1.5rem}
.pricing__cta{justify-self:start;min-width:12rem}
.btn{gap:.5rem}

/* ---------- 3a. soft sheen: no hard gradient stop on the light glass buttons ---------- */
.section--dark .btn--book,.est-summary .btn--book,.est-summary__cta{
  background:var(--lg-spec),linear-gradient(180deg,#fff 0%,#f6f6f6 40%,#ececec 78%,#e4e4e4 100%);
  border-color:#fff;
  box-shadow:inset 0 1px 0 #fff,inset 0 -10px 14px -12px rgba(0,0,0,.14),0 14px 26px -12px rgba(0,0,0,.7);
}
.section--dark .btn--book:hover,.est-summary__cta:hover{
  background:var(--lg-spec),linear-gradient(180deg,#fff 0%,#fafafa 45%,#f0f0f0 100%);
}
/* chrome numerals in the estimate: soften the same hard stop */
.est-summary__amt{background-image:linear-gradient(180deg,#fff 0%,#e9e9e9 55%,#cfcfcf 100%)}
@media (prefers-reduced-transparency:reduce){
  .section--dark .btn--book,.est-summary__cta{background:#f3f3f3;background-image:none}
}

/* ---------- 3b. CTA cards: inner padding, one radius, button fully inside ---------- */
.sec-foot,.how-it-works__cta{
  box-sizing:border-box;border-radius:20px;
  padding:24px;display:grid;gap:16px;justify-items:start;align-items:center;
}
#work .sec-foot{
  padding:24px;margin-top:clamp(2rem,1.5rem + 3vw,4rem);
  border:1px solid rgba(255,255,255,.2);border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
#work .sec-foot__text{margin:0;max-width:20ch}
.sec-foot .btn,.how-it-works__cta .btn{max-width:100%}
@media (max-width:640px){
  .sec-foot .btn,.how-it-works__cta .btn{width:100%}
}
@media (min-width:760px){
  .sec-foot,.how-it-works__cta,#work .sec-foot{
    padding:32px;grid-template-columns:1fr auto;gap:24px;
  }
}

/* ---------- 4. "Popular" badge: solid, readable over any photo ---------- */
#vip .pkg-card__badge{
  background:#fff;color:#111;
  box-shadow:0 1px 2px rgba(0,0,0,.25),0 4px 12px rgba(0,0,0,.28);
}
#vip .pkg-card--featured .pkg-card__badge{
  background:#111;color:#fff;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.4);
}

/* ---------- 5. audit: low-contrast small text in the dark estimate card ---------- */
.est-summary__count{color:#d6d6d6}
html .est-summary .est-summary__badge{color:#fff;background:rgba(141,164,184,.12)}

/* ---------- 6. audit: desktop section rail dots had 26x20 hit areas (WCAG target size); enlarge hit area, keep the dot ---------- */
.chrome-rail{gap:0}
.chrome-rail a{width:44px;height:44px}
.chrome-rail a::before{right:18px;margin-top:-4px}
.chrome-rail a span{right:36px}