/* Better Living Services — premium refinement pass, 28 Oct 2026.
   Shared, final-layer rules: premium editorial hierarchy, responsive navigation reliability,
   clear action hierarchy, refined surfaces and reduced-motion accessibility. */
:root{
  --bls-ink:#123447; --bls-navy:#0c3043; --bls-teal:#078982; --bls-mint:#bde8d8;
  --bls-paper:#fbfaf6; --bls-line:#dbe6e1; --bls-gold:#e7c46e;
}
html{scroll-padding-top:100px}
body{background:var(--bls-paper)}
.container{width:min(1220px,calc(100% - 48px))}
.header{position:sticky;top:0;z-index:1000;isolation:isolate}
.header .nav{position:relative}
.header .navlinks a{transition:background-color .18s ease,color .18s ease,transform .18s ease}
.header .navlinks a:focus-visible{outline:3px solid var(--bls-gold);outline-offset:2px}
.header .navlinks .navcta{box-shadow:0 8px 22px rgba(7,137,130,.2)}
.hero{padding-top:clamp(58px,7.2vw,100px);padding-bottom:clamp(58px,7.2vw,100px)}
.hero .hero-grid{gap:clamp(32px,5vw,76px)}
.hero .hero-copy{max-width:650px}
.hero h1{max-width:10.8ch;text-wrap:balance}
.hero .lead{max-width:56ch}
.hero .actions .btn{min-height:52px;padding:15px 23px}
.hero .image-frame{border-radius:30px 8px 30px 8px}
.hero .image-caption{max-width:min(350px,calc(100% - 32px))}
.section .head{align-items:end}
.section .head h2{max-width:18ch}
.aud,.service,.choice,.plan,.step,.area-card,.card,.feature-card,.faq details,.formcard{
  box-shadow:0 8px 28px rgba(16,47,70,.055);border-color:rgba(16,47,70,.12)
}
.aud,.service,.choice,.plan,.area-card,.card,.feature-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.aud:hover,.service:hover,.choice:hover,.plan:hover,.area-card:hover,.card:hover,.feature-card:hover{
  transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,47,70,.11);border-color:rgba(7,137,130,.38)
}
.service h3,.choice h3,.card h3{line-height:1.15}
.btn,.navcta,.mobile-call,.mobile-text{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.btn:active,.navcta:active,.mobile-call:active,.mobile-text:active{transform:translateY(1px)}
.cta,.guide-card,.engage-panel{position:relative;overflow:hidden}
.cta:before,.guide-card:before{content:"";position:absolute;right:-80px;top:-110px;width:230px;height:230px;border:1px solid rgba(8,127,134,.16);border-radius:50%;box-shadow:0 0 0 28px rgba(8,127,134,.035),0 0 0 56px rgba(8,127,134,.025);pointer-events:none}
.cta>* ,.guide-card>*{position:relative;z-index:1}
.formcard,.form-panel,.form{box-shadow:0 18px 48px rgba(16,47,70,.07)}
input,select,textarea{transition:border-color .15s ease,box-shadow .15s ease}
.footer{position:relative}
.footer:before{content:"";display:block;width:100%;height:3px;position:absolute;top:0;left:0;background:linear-gradient(90deg,#2e795c,#07999a,#e7c46e)}
/* Menu is a single stable layer: it opens under the sticky header and remains visible
   while the user interacts with its links. Desktop and mobile rules are intentionally separate. */
@media (max-width:850px){
  .container{width:min(100% - 32px,640px)}
  .header .nav{display:flex;flex-wrap:wrap;min-height:72px;gap:8px;align-items:center}
  .header .brand{flex:1 1 auto;min-width:0;max-width:calc(100% - 112px)}
  .header .menu{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px;min-height:48px;position:relative;z-index:1002;border:1px solid #d4e2dc;border-radius:14px;background:#fff;color:var(--bls-navy);cursor:pointer;touch-action:manipulation}
  .header .menu:after{content:"☰";font-size:1.35rem;line-height:1}
  .header .menu[aria-expanded="true"]:after{content:"×";font-size:1.75rem}
  .header .navlinks{
    display:none!important;position:absolute!important;top:calc(100% - 1px)!important;left:0!important;right:0!important;z-index:1001!important;
    width:100%!important;max-height:min(72vh,620px);overflow-y:auto;overscroll-behavior:contain;
    flex-direction:column!important;align-items:stretch!important;gap:4px!important;
    margin:0!important;padding:12px!important;background:#fff!important;border:1px solid #dce7e2!important;border-radius:0 0 20px 20px!important;
    box-shadow:0 22px 42px rgba(12,48,67,.2)!important
  }
  .header .navlinks.open,.header .navlinks.is-open,.header .navlinks[data-open="true"]{display:flex!important}
  .header .navlinks a{display:flex;align-items:center;min-height:48px;padding:12px 14px;border:0;border-radius:11px;white-space:normal;font-size:.98rem;color:var(--bls-ink)}
  .header .navlinks a:hover,.header .navlinks a:focus-visible{background:#edf6f1;color:var(--bls-teal)}
  .header .navlinks .navcta{justify-content:center;margin-top:4px;border-radius:12px;background:var(--bls-teal)!important;color:#fff!important}
  body.menu-open{overflow:hidden}
  .hero{padding:36px 0 42px}
  .hero .hero-grid{gap:24px}
  .hero h1{font-size:clamp(2.45rem,9.8vw,3.7rem);max-width:12ch}
  .hero .image-frame{border-radius:22px 6px 22px 6px}
  .section,.content-section{padding-block:48px}
  .section .head{display:block;margin-bottom:26px}
  .section .head h2{max-width:20ch}
  .mobile-dock{z-index:900}
  .footer{padding-bottom:110px}
}
@media (max-width:390px){
  .container{width:calc(100% - 28px)}
  .header .brand-logo,.header .logo-img{max-width:112px!important;width:112px!important;height:56px!important}
  .header .menu{width:44px;height:44px;min-height:44px;flex-basis:44px}
  .hero h1{font-size:clamp(2.25rem,10vw,2.75rem)}
  .hero .actions .btn{width:100%}
}
@media (min-width:851px){
  .header .menu{display:none!important}
  .header .navlinks{display:flex!important;position:static!important;max-height:none;overflow:visible}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Final menu persistence override: selector is deliberately tied to the actual nav id. */
@media (max-width:850px){
  header.header .nav #primary-nav{display:none!important;visibility:hidden;opacity:0;pointer-events:none}
  header.header .nav #primary-nav.open,
  header.header .nav #primary-nav.is-open,
  header.header .nav #primary-nav[data-open="true"]{
    display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;
  }
  header.header .nav{position:relative!important;overflow:visible!important}
  header.header{overflow:visible!important}
  header.header .nav #primary-nav a{flex:0 0 auto}
}

/* Desktop action hierarchy: compact paired buttons; mobile keeps full-width thumb-friendly actions. */
@media (min-width:851px){
  .hero .actions{align-items:center;flex-wrap:wrap}
  .hero .actions .btn{width:auto!important;min-width:205px;flex:0 0 auto;padding-inline:22px}
}

/* Sequential pass 2: compact trust strip to bridge the hero and service finder. */
.bls-trust-strip{background:#fff;border-bottom:1px solid var(--bls-line);border-top:1px solid rgba(18,52,71,.06)}
.bls-trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding-block:24px}
.bls-trust-item{display:flex;align-items:flex-start;gap:12px;min-width:0}
.bls-trust-mark{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#e8f5ef;color:#147a64;font-weight:800}
.bls-trust-item strong{display:block;color:var(--bls-navy);font-size:.97rem;line-height:1.35}
.bls-trust-item p{margin:4px 0 0;color:#536773;font-size:.88rem;line-height:1.5}
@media(max-width:850px){
 .bls-trust-grid{grid-template-columns:1fr;gap:15px;padding-block:20px}
 .bls-trust-item{align-items:center}
 .bls-trust-item p{font-size:.9rem}
}

/* Sequential pass 5: consistent keyboard focus across the full site. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #087f86;outline-offset:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #087f86;outline-offset:2px;box-shadow:0 0 0 3px rgba(8,127,134,.18)}


/* Visible routes to the site's interactive tools */
.quick-tools-section{padding-top:clamp(34px,5vw,64px);padding-bottom:clamp(40px,5vw,72px)}
.quick-tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
.quick-tool-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:24px;border:1px solid #d9e8e3;border-radius:20px;background:linear-gradient(145deg,#fff 0%,#f5faf8 100%);box-shadow:0 8px 26px rgba(18,52,71,.055);color:#153b4b;text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.quick-tool-card:hover{transform:translateY(-3px);border-color:#79c8bb;box-shadow:0 14px 34px rgba(18,52,71,.1)}
.quick-tool-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#e1f4ef;color:#087f7d;font-size:1.45rem;font-weight:800}
.quick-tool-card h3{margin:18px 0 8px;font-size:1.18rem;line-height:1.3;color:#123d4e}
.quick-tool-card p{margin:0 0 18px;color:#53676e;line-height:1.6}
.quick-tool-link{display:flex;gap:8px;align-items:center;margin-top:auto;color:#087f7d;font-weight:750}
@media(max-width:760px){.quick-tools-grid{grid-template-columns:1fr;gap:12px}.quick-tool-card{padding:20px;border-radius:16px}.quick-tool-card h3{margin-top:13px}}
@media(prefers-reduced-motion:reduce){.quick-tool-card{transition:none}.quick-tool-card:hover{transform:none}}