/* Chestermere Nails Bar: black marble, warm gold and quiet editorial type. */
:root{--gold:#d8aa55;--gold-deep:#b9893d;--ink:#f8f1e5;--ink-soft:#e8dcc9;--muted:#c8b99f;--hair:rgba(225,181,106,.24);--display:"Cormorant Garamond",Georgia,serif;--sans:"Outfit",system-ui,sans-serif;--on-dark:#f8f1e5;--on-dark-soft:#e8dcc9}
html{scroll-behavior:smooth}
body,body.legal-page{background:#090807 url('../photos/brand/chestermere-marble.png') center top/100% auto repeat-y fixed;color:var(--ink)}
body::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.38);pointer-events:none;z-index:-1}
.section{position:relative}
.section-label,.eyebrow,.kicker{color:var(--gold)}
h1,h2,h3{padding-bottom:.12em;overflow:visible;text-wrap:balance}
h1 em,h2 em,.feature-strip h2 em,.gallery-heading h2 em{color:var(--gold);line-height:1.2}
p{line-height:1.7}
a,button{transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #f2c979;outline-offset:4px}
.button,.special-care-bottom .button{background:var(--gold);color:#120e08;border:1px solid var(--gold);box-shadow:none}
.button:hover,.button:focus-visible,.special-care-bottom .button:hover{background:#f8ebd0;color:#120e08;transform:translateY(-2px)}
.button:active{transform:translateY(1px)}
.text-link{color:#f0cd8a;border-bottom-color:rgba(240,205,138,.6)}
.text-link:hover{color:#fff3d8}
.site-header,.site-header.scrolled,.legal-header{background:rgba(8,7,6,.93);border-color:var(--hair);color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.3);backdrop-filter:blur(12px)}
.site-header{height:104px}
.site-header.scrolled{height:94px}
.site-header .brand-lockup img,.site-header.scrolled .brand-lockup img{width:112px;height:101px;max-height:none;flex:none;object-fit:contain;background:#070605;box-shadow:0 0 0 1px var(--hair);border-radius:0}
.site-header.scrolled .brand-lockup img{width:100px;height:90px}
.desktop-nav a,.legal-header .brand-lockup,.legal-header .text-link{color:var(--ink)}
.desktop-nav a:hover,.desktop-nav a:focus-visible{color:var(--gold)}
.desktop-nav a::after{background:var(--gold)}
.menu-toggle{background:var(--gold);color:#120e08}.menu-toggle span{background:#120e08}
.mobile-nav{background:#0a0908 url('../photos/brand/chestermere-marble.png') center/cover no-repeat;color:var(--ink)}
.mobile-menu-intro span,.mobile-menu-links small{color:var(--gold)}
.mobile-menu-intro p,.mobile-nav .mobile-menu-links a{color:var(--ink)}
.mobile-nav .mobile-menu-links a:hover{color:var(--gold)}
.hero-editorial{background:#090807;min-height:min(760px,90dvh);isolation:isolate;overflow:hidden}
.hero-ambient-still{z-index:-2;opacity:.7;filter:none;object-fit:cover;object-position:center 48%}
.hero-ambient-wash{background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.24))}
.hero-editorial::after{content:"";position:absolute;width:30vw;height:30vw;min-width:230px;min-height:230px;border:1px solid rgba(216,170,85,.35);border-radius:50%;left:42%;top:9%;pointer-events:none;animation:chestermereGlow 9s ease-in-out infinite alternate}
@keyframes chestermereGlow{from{transform:scale(.96);opacity:.28}to{transform:scale(1.05);opacity:.6}}
.hero-editorial .hero-content h1{font-size:clamp(3.4rem,6vw,6.5rem);line-height:1.03;color:#fff8ec}
.hero-editorial .hero-content h1 em{color:#e9bc6b}
.hero-editorial .hero-content .eyebrow{color:#e9bc6b}
.hero-editorial .hero-copy{color:#f0e7d8;max-width:42ch}
.hero-editorial .hero-actions .button{background:var(--gold);color:#120e08}
.hero-editorial .hero-actions .button:hover{background:#fff0cf}
.hero-editorial .hero-actions .text-link{color:#fff0d0}
.hero-editorial .hero-note{color:#f8ebd0}
.hero-editorial .hero-frame{border:1px solid rgba(225,181,106,.6);background:#16110a;box-shadow:0 24px 55px rgba(0,0,0,.34)}
.hero-editorial .hero-frame figcaption{background:#0e0a06;color:#f8f1e5}
.hero-editorial .hero-frame figcaption span{color:var(--gold)}
.promo-ribbon[hidden]{display:none!important}
.promo-ribbon{background:rgba(6,5,4,.94);color:var(--ink);border-block:1px solid var(--hair)}
.promo-intro h2,.promo-intro h2 em,.promo-intro>p{color:var(--ink)}
.promo-value strong{color:var(--gold)}
.about-story,.salon-overview,.contact,.lash-feature,.self-care,.special-care,.staff-section,.gallery,.nails-pedicures,.review-invitation,.happy-visit{background:rgba(8,7,6,.78);color:var(--ink)}
.about-sheet{background:rgba(13,11,9,.93);border:1px solid var(--hair);box-shadow:0 18px 50px rgba(0,0,0,.3)}
.about-sheet::before{border-color:var(--hair);background:url('../photos/brand/letter-ornament.svg') top right/96px 96px no-repeat;opacity:.82}
.about-sheet::after{content:"";position:absolute;left:12px;bottom:12px;width:96px;height:96px;background:url('../photos/brand/letter-ornament.svg') center/contain no-repeat;transform:rotate(180deg);opacity:.82;pointer-events:none}
.about-sheet>*{position:relative;z-index:1}
.about-sheet h2,.about-tagline,.about-copy p,.about-sign,.letter-heading,.about-kicker{color:var(--ink)}
.about-sheet h2,.about-sign{color:#f4d18b}
.nails-pedicures h2,.nails-pedicures h3,.special-care-heading h2,.special-ritual h3,.staff-section h2,.lash-feature h2,.self-care h2,.salon-overview h2,.gallery-heading h2,.contact h2{color:var(--ink)}
.nails-pedicures p,.special-care-heading>p:last-child,.special-ritual p,.special-care-bottom p,.staff-heading p,.lash-feature-copy>p,.self-care-copy>p:not(.self-care-script),.overview-copy>p,.contact-details a,.contact-details p,.gallery-disclosure{color:var(--ink-soft)}
.special-care-heading h2 em,.self-care h2 em,.lash-feature h2 em{color:var(--gold)}
.lash-feature-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.5rem;margin-top:1.7rem}
.lash-feature-actions .text-link{display:inline-flex;align-items:center;min-height:44px}
.lash-feature-image>img{filter:none;object-position:center 20%}
.special-ritual-image{background:#17120d}
.special-care-bottom{border-color:var(--hair)}
.self-care-photo figcaption,.self-care-script{color:var(--gold)}
.review-invitation::before{content:"CN"}
.review-invitation h2,.review-invitation h2 em{color:var(--ink)}
.review-invitation h2 em{color:var(--gold)}
.contact-details small{color:var(--gold)}
.contact-details a:hover{color:#f8d793}
.contact .kicker{color:#f2d69b}
.contact .hours-list,.contact .hours-list li,.contact .hours-list b{color:var(--ink-soft)}
.contact .hours-list li{border-bottom-color:var(--hair)}
.site-footer{background:rgba(3,3,3,.93);border-top:1px solid var(--hair);color:var(--ink-soft)}
.site-footer a{color:var(--ink-soft)}.site-footer a:hover{color:var(--gold)}
.mobile-actions{background:rgba(4,4,4,.96)}.floating-primary{display:block;background:transparent;border:0;box-shadow:none}.floating-primary .action-book{background:var(--gold);color:#120e08;width:100%}
.legal-page{min-height:100dvh}
.legal-main{background:rgba(9,8,7,.88);color:var(--ink)}
.legal-main h1,.legal-main h2,.legal-intro,.legal-main section p{color:var(--ink)}
.legal-main h2,.legal-main .eyebrow,.legal-main section a{color:var(--gold)}
.legal-main section{border-color:var(--hair)}
.legal-footer{background:rgba(3,3,3,.96);color:var(--ink-soft);border-color:var(--hair)}
@media(max-width:900px){body,body.legal-page{background-attachment:scroll;background-size:auto 1200px}.hero-editorial{min-height:auto}.hero-editorial::after{left:55%;top:14%}.site-header{height:100px}.site-header.scrolled{height:94px}.site-header .brand-lockup img{width:106px;height:96px}.site-header.scrolled .brand-lockup img{width:100px;height:90px}}
@media(max-width:680px){.site-header{height:96px}.site-header.scrolled{height:90px}.site-header .brand-lockup img{width:100px;height:90px}.site-header.scrolled .brand-lockup img{width:96px;height:86px}.mobile-nav{padding-top:7.5rem}.hero-editorial{padding-top:8rem}.about-sheet::before{background-size:68px 68px}.about-sheet::after{width:68px;height:68px}.lash-feature-actions{align-items:stretch;flex-direction:column}.lash-feature-actions .text-link{align-self:flex-start}}
@media(max-width:600px){.hero-editorial .hero-content h1{font-size:clamp(2.9rem,11vw,4rem)}.hero-editorial::after{opacity:.2}.floating-primary .action-book{min-height:46px}.legal-main{padding-top:3rem}.legal-main h1{font-size:clamp(3.4rem,13vw,5rem)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-editorial::after,.hero-editorial .hero-frame-main,.hero-editorial .hero-frame-detail{animation:none!important}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

[hidden]{display:none!important}
.floating-primary:has(.action-call:not([hidden])){display:grid;grid-template-columns:1fr 1fr;gap:6px}
.contact-actions .btn-call-us{align-self:center}

/* Readable copy and controls across the site. */
.section-label,.eyebrow,.kicker{font-size:.875rem;line-height:1.5}
.hero-editorial .hero-content .eyebrow,.special-care-heading .eyebrow{font-size:.875rem;line-height:1.5}
.desktop-nav{font-size:.8125rem}
.button,.button-small{font-size:.875rem}
.text-link,.hero-actions .text-link,.happy-actions .text-link{font-size:.875rem;line-height:1.5}
.hero-editorial .hero-copy{font-size:1.05rem;line-height:1.65}
.about-copy p,.nails-pedicures-copy p,.special-ritual p,.staff-heading p,.staff-card p,.lash-feature-copy>p,.self-care-copy>p:not(.self-care-script),.overview-copy>p,.review-lead,.happy-visit-list span,.services-heading-wide p{font-size:1rem;line-height:1.65}
.service-panel-heading p,.service-api-copy p,.gallery-disclosure,.special-care-bottom p,.special-care-note,.promo-copy p{font-size:1rem;line-height:1.65}
.service-api-copy h4{font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.25}
.service-api-number,.service-api-category,.service-api-meta small,.service-search-bar span,.service-category-list button span,.service-category-list button small,.service-browser-label,.staff-card .staff-title,.contact-details small{font-size:.875rem;line-height:1.45}
.service-category-list button strong{font-size:clamp(1.08rem,1.5vw,1.35rem)}
.service-api-meta strong{font-size:1.15rem}
.service-search-bar input{font-size:1rem}
.staff-card .button,.service-api-booking,.service-api-retry{font-size:.875rem}
.special-care-bottom .button,.promo-book{font-size:.875rem}
.letter-heading,.about-kicker,.lash-feature-image figcaption span,.self-care-photo figcaption,.special-ritual-image>span,.hero-editorial .hero-note{font-size:.875rem}
.about-pillars li,.promo-label,.promo-copy small,.self-care-details>div>span,.special-care-details article>span,.special-care-photo figcaption,.lash-options article>span{font-size:.875rem;line-height:1.45}
.lash-options p,.mobile-menu-intro p,.gift-story p{font-size:1rem;line-height:1.6}
.contact .hours-list li{font-size:.95rem;line-height:1.5}
.site-footer>p{font-size:1rem;line-height:1.6}
.footer-address{display:block;margin-top:.2rem}
.footer-menu a{font-size:1rem}
.site-footer .footer-links{font-size:.88rem}
.legal-main section p{font-size:1.02rem;line-height:1.7}
.legal-footer{font-size:.9rem}

@media(max-width:680px){
  .site-footer{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;border-radius:0;padding:2.5rem 1.25rem calc(8rem + env(safe-area-inset-bottom));background:rgba(3,3,3,.96)}
  .footer-brand{align-self:center;justify-content:center;width:100%;margin:0 0 1.15rem}
  .footer-brand img{width:clamp(145px,43vw,175px);height:auto;clip-path:inset(0 7% 0 0)}
  .footer-brand strong{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .site-footer>p{max-width:32ch;margin:0 auto 2rem;text-align:center;font-size:1rem;line-height:1.6;overflow-wrap:anywhere}
  .footer-address{margin-top:.35rem;color:var(--ink-soft)}
  .footer-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:0;margin:0;padding:.45rem 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  .footer-menu a{display:flex;align-items:center;min-width:0;min-height:48px;padding:.7rem .25rem;border-bottom:1px solid var(--hair);font-size:1rem;line-height:1.35}
  .footer-menu a:nth-child(odd):not(:last-child){border-right:1px solid var(--hair)}
  .footer-menu a:nth-child(even){padding-left:1rem}
  .footer-menu a:last-child{grid-column:1/-1;border-bottom:0;color:#f2cf8b}
  .site-footer .footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:.4rem 1rem;padding-top:1.25rem;font-size:.9rem}
  .footer-links>a{display:flex;align-items:center;min-height:44px}
  .footer-links>span{grid-column:1/-1;text-align:left;line-height:1.5}
  .footer-links>span:first-of-type{margin-top:.8rem;color:var(--ink-soft)}
  .footer-links>span:last-of-type{color:var(--ink-soft)}
  .service-api-copy p,.service-panel-heading p{font-size:1rem}
  .staff-card p{font-size:1rem}
  .staff-card .button{font-size:.875rem;line-height:1.4}
  .hero-editorial .hero-frame figcaption{font-size:.875rem;line-height:1.4}
  .hero-editorial .hero-frame figcaption span{font-size:.8125rem}
  .mobile-menu-links small{font-size:.8125rem}
}

/* Give the live service menu a clearer visual hierarchy. */
.services:has(.service-browser){
  background:
    radial-gradient(circle at 82% 4%,rgba(216,170,85,.17),transparent 32%),
    linear-gradient(160deg,#17120d 0%,#090807 68%);
  border-block:1px solid rgba(225,181,106,.32);
}
.services-heading-wide{padding-bottom:1.5rem;border-bottom:1px solid rgba(225,181,106,.32)}
.services-heading-wide h2 em{color:#f0c879}
.services-heading-wide p{color:#f0e4d0}
.service-browser-label,.service-panel-heading [data-service-count]{color:#e4b96b;font-size:.875rem;line-height:1.45}
.service-category-list{border-top-color:rgba(225,181,106,.42)}
.service-category-list button{border-bottom-color:rgba(225,181,106,.22)}
.service-category-list button.active{
  background:linear-gradient(90deg,rgba(216,170,85,.3),rgba(216,170,85,.08));
  box-shadow:inset 3px 0 #f0c879;
  color:#fff8eb;
}
.service-category-list button:focus-visible{outline:2px solid #f0c879;outline-offset:-2px}
.service-panel{border:1px solid rgba(225,181,106,.62);box-shadow:0 30px 70px rgba(0,0,0,.32)}
.service-panel-heading{background:radial-gradient(circle at 92% 0,rgba(216,170,85,.27),transparent 48%),#f8f1e5}
.service-panel-heading h3{line-height:1.08}
@media(min-width:801px){.service-panel-heading{scroll-margin-top:128px}}
.service-api-row:hover{background:rgba(216,170,85,.16)}

/* clip prevents horizontal overflow without creating a sticky scroll container. */
@supports(overflow:clip){html,body{overflow-x:clip}}

@media(max-width:800px){
  .services,.service-browser{overflow:visible}
  .services-heading-wide{margin-bottom:1.25rem}
  .service-categories{
    position:sticky;
    top:120px;
    z-index:20;
    margin:0 -1.1rem 1rem;
    padding:.65rem 1.1rem .25rem;
    background:rgba(10,8,6,.97);
    border-block:1px solid rgba(225,181,106,.42);
    box-shadow:0 12px 24px rgba(0,0,0,.32);
  }
  .service-browser-label{margin:0 0 .35rem}
  .service-category-list{
    gap:.55rem;
    margin:0 -1.1rem;
    padding:.25rem 1.1rem .8rem;
    border:0;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .service-category-list button{
    flex:0 0 clamp(160px,62vw,225px);
    min-height:68px;
    border:1px solid rgba(225,181,106,.32);
    border-radius:4px;
    background:rgba(255,248,235,.05);
  }
  .service-category-list button.active{border-color:#e4b96b;box-shadow:inset 0 0 0 1px #e4b96b}
  .service-panel{border-radius:8px}
}
@media(max-width:680px){.service-categories{top:108px}}

/* Shared header lockup: the supplied monogram, without its square JPG frame. */
.site-header .brand-lockup{gap:.6rem}
.site-header .brand-lockup img{display:none}
.site-header .brand-lockup::before{
  content:"";
  display:block;
  flex:0 0 58px;
  width:58px;
  height:58px;
  border:1px solid rgba(216,170,85,.7);
  border-radius:50%;
  background:#080706 url('../photos/brand/chestermere-logo.jpg') center -5px/98px auto no-repeat;
  box-shadow:0 0 0 2px rgba(216,170,85,.1);
}
.site-header .brand-lockup .brand-name{
  position:static;
  display:flex;
  flex-direction:column;
  width:auto;
  height:auto;
  margin:0;
  overflow:visible;
  clip:auto;
  white-space:nowrap;
  color:#f8edda;
}
.site-header .brand-name strong{font:600 1.35rem/1 var(--display);letter-spacing:.01em}
.site-header .brand-name small{margin-top:.22rem;color:#e4b96b;font:600 .78rem/1.2 var(--sans);letter-spacing:.17em;text-transform:uppercase}

@media(max-width:980px){
  .site-header{height:84px;grid-template-columns:minmax(0,1fr) auto;padding:0 14px}
  .site-header.scrolled{height:78px}
  .site-header .brand-lockup{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    grid-column:1;
    justify-self:start;
    margin:0;
  }
  .site-header .menu-toggle{grid-column:2;justify-self:end;flex:none;width:46px;height:46px}
}
@media(max-width:680px){
  .site-header{height:78px;padding:0 12px}
  .site-header.scrolled{height:74px}
}

/* Retain the exact supplied logo artwork while hiding its baked-in dark tile. */
.site-header .brand-lockup img,
.site-header.scrolled .brand-lockup img,
.legal-header .brand-lockup img,
.footer-brand img{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  clip-path:inset(5% 8% 3% 5%);
  mix-blend-mode:screen;
}
