/* ── cs-tokens v1 ── Design System Foundation */
:root {
  /* 60-30-10 palette */
  --c-bg:      #FBF7F4;
  --c-ink:     #2C2724;
  --c-mid:     #7B6F68;
  --c-faint:   #EDE8E3;
  --accent:    #E94E86;
  --accent2:   #C47B2A;  /* warm amber — second chromatic cluster (h~30 vs accent h~338) */
  --accent-rgb: 233,78,134;
  --accent-light: color-mix(in srgb,var(--accent) 15%,var(--c-bg));

  /* type scale */
  --fs-xs:   clamp(.75rem,  1.5vw, .875rem);
  --fs-sm:   clamp(.875rem, 2vw,   1rem);
  --fs-base: clamp(1rem,    2.5vw, 1.125rem);
  --fs-md:   clamp(1rem,    2.5vw, 1.125rem);
  --fs-lg:   clamp(1.125rem,3vw,   1.375rem);
  --fs-xl:   clamp(1.5rem,  4vw,   2rem);
  --fs-2xl:  clamp(2rem,    5vw,   3rem);
  --fs-3xl:  clamp(2.5rem,  7vw,   4.5rem);

  /* space scale (numeric) */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;  --sp-7:3rem;   --sp-8:4rem;
  /* space scale (named — required by cs-tokens v1) */
  --sp-2xs:.125rem; --sp-xs:.25rem; --sp-sm:.5rem; --sp-md:1rem;
  --sp-lg:1.5rem;   --sp-xl:2rem;   --sp-2xl:3rem;

  /* motion */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0.0, 0.2, 1);

  /* radius & shadow */
  --r-sm:4px; --r-md:8px; --r-lg:16px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.08);
  --shadow-md:0 8px 32px rgba(0,0,0,.14);
  --shadow-lg:0 20px 60px rgba(0,0,0,.22);
}

/* ── Reset & base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{} /* lesson 30 — instant scroll */
body{
  font-family:'Nunito',sans-serif;
  background:var(--c-bg);
  color:var(--c-ink);
  line-height:1.65;
  font-size:var(--fs-md);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
a{color:var(--accent);text-decoration:none;}
h1,h2,h3,h4{
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  line-height:1.15;
  color:var(--c-ink);
}

/* ── Site Nav ── */
.site-nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:900;
  background:var(--c-bg);
  border-bottom:1px solid var(--c-faint);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--sp-6);
  height:64px;
  box-shadow:var(--shadow-sm);
}
.nav-wordmark{
  font-family:'Fredoka',sans-serif;
  font-size:var(--fs-xl);
  font-weight:600;
  color:var(--c-ink);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  white-space:nowrap;
  min-height:44px; /* touch-target F6 */
}
.nav-wordmark .paw{
  font-size:1.1em;
  color:var(--accent);
}
.nav-links{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
}
.nav-links a{
  font-family:'Nunito',sans-serif;
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--c-ink);
  text-decoration:none;
  letter-spacing:.03em;
  padding:var(--sp-2) 0;
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
  white-space:nowrap;
}
.nav-links a:hover,
.nav-links a[aria-current]{
  color:var(--accent);
  border-bottom-color:var(--accent);
}
.nav-book{
  background:var(--accent);
  color:#fff !important;
  padding:var(--sp-2) var(--sp-4) !important;
  border-radius:999px;
  border:none !important;
  min-height:44px;
  display:inline-flex !important;
  align-items:center;
}
.nav-book:hover{opacity:.9;}

/* Hamburger */
.nav-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:var(--sp-2);
  min-height:44px;
  min-width:44px;
}
.nav-burger span{
  display:block;
  width:24px;height:2px;
  background:var(--c-ink);
  border-radius:2px;
  transition:transform .25s,opacity .25s;
}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ── Nav Drawer (ND-1 through ND-5) ── */
.nav-drawer{
  display:none;
  position:fixed;
  inset:0;
  z-index:800;
  pointer-events:none;
}
.nav-drawer.open{
  display:block;
  pointer-events:auto;
}
.nav-drawer-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.4);
}
.nav-drawer-panel{
  position:absolute;
  top:0;right:0;
  width:min(320px,90vw);
  height:100%;
  background-color:rgba(251,247,244,0.97); /* ND-1: alpha >= 0.92 */
  padding:80px var(--sp-5) var(--sp-5);
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
  overflow-y:auto;
  box-shadow:-4px 0 32px rgba(0,0,0,.12);
}
.nav-drawer-panel a{
  display:block;                        /* ND-2: block for height */
  padding:var(--sp-3) var(--sp-4);     /* ND-2: padding achieves 44px */
  min-height:44px;                      /* ND-2 belt-and-suspenders */
  color:#2C2724;                        /* ND-3: explicit color on <a> */
  font-family:'Nunito',sans-serif;
  font-size:var(--fs-lg);
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid var(--c-faint);
  transition:color .2s,background .2s;
  display:flex;
  align-items:center;
}
.nav-drawer-panel a:hover{
  color:var(--accent);
  background:var(--c-faint);
}
.nav-drawer-cta{
  margin-top:var(--sp-4);
  background:var(--accent) !important;
  color:#fff !important;
  border-radius:var(--r-md) !important;
  border:none !important;
  text-align:center;
  justify-content:center;
}
.nav-drawer-close{
  position:absolute;
  top:var(--sp-4);right:var(--sp-4);
  background:none;
  border:none;
  cursor:pointer;
  font-size:1.5rem;
  color:var(--c-ink);
  min-height:44px;
  min-width:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ── Hero (scroll-scrub canvas) ── */
#hero-section{
  height:200vh;
  position:relative;
}
.hero-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}
/* Lesson 14: canvas must have width:100%+height:100%+object-fit:cover as CSS backstop */
#heroCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero-scrim{
  position:absolute;
  inset:0;
  /* CANVAS SCRIM LAW: ancestor gradient >= alpha 0.25 covering all hero text */
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.50) 0%,
      rgba(0,0,0,.15) 35%,
      rgba(0,0,0,.25) 65%,
      rgba(0,0,0,.60) 100%
    );
  pointer-events:none;
}
.hero-content{
  position:absolute;
  bottom:12%;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  color:#fff;
  width:min(92vw,720px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-4);
}
.hero-eyebrow{
  font-family:'Nunito',sans-serif;
  font-size:var(--fs-xs);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
  color:#fff;
}
.hero-headline{
  font-family:'Fredoka',sans-serif;
  font-size:var(--fs-3xl);
  font-weight:700;
  line-height:1.05;
  text-shadow:0 4px 30px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.7);
  color:#fff;
}
.hero-sub{
  font-size:var(--fs-lg);
  font-weight:400;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
  color:#fff;
  max-width:520px;
}
.hero-cta{
  display:inline-flex;
  align-items:center;
  background:var(--accent);
  color:#fff;
  padding:var(--sp-3) var(--sp-7);
  min-height:44px;
  border-radius:999px;
  font-family:'Nunito',sans-serif;
  font-weight:800;
  font-size:var(--fs-md);
  text-decoration:none;
  box-shadow:0 4px 20px rgba(233,78,134,.45);
  transition:transform .2s,box-shadow .2s;
}
.hero-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(233,78,134,.55);
}
.hero-scroll-cue{
  position:absolute;
  bottom:var(--sp-5);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-1);
  color:rgba(255,255,255,.75);
  font-size:var(--fs-xs);
  letter-spacing:.15em;
  text-transform:uppercase;
  font-family:'Nunito',sans-serif;
  text-shadow:0 2px 8px rgba(0,0,0,.6); /* satisfies scrim law for this text node */
  animation:cue-bob 2s ease-in-out infinite;
}
.hero-scroll-cue::after{
  content:'';
  display:block;
  width:1px;
  height:40px;
  background:rgba(255,255,255,.5);
  margin-top:var(--sp-1);
}
@keyframes cue-bob{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(6px);}
}

/* ── Section wrapper ── */
.section{
  padding:var(--sp-8) var(--sp-6);
  max-width:1200px;
  margin:0 auto;
}
.section-full{
  padding:var(--sp-8) 0;
}
.section-label{
  font-family:'Nunito',sans-serif;
  font-size:var(--fs-xs);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--accent);
  margin-bottom:var(--sp-3);
}
.section-title{
  font-family:'Fredoka',sans-serif;
  font-size:var(--fs-2xl);
  font-weight:600;
  color:var(--c-ink);
  margin-bottom:var(--sp-5);
}
.section-body{
  font-size:var(--fs-md);
  color:var(--c-mid);
  max-width:60ch;
  line-height:1.7;
}

/* ── Divider ── */
.paw-divider{
  text-align:center;
  color:var(--accent);
  font-size:1.4rem;
  letter-spacing:.4em;
  opacity:.35;
  margin:var(--sp-4) 0;
}

/* ── Carol Difference cards ── */
.difference-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--sp-5);
  margin-top:var(--sp-7);
}
.difference-card{
  background:#fff;
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--c-faint);
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.difference-icon{
  font-size:2rem;
  line-height:1;
}
.difference-title{
  font-family:'Fredoka',sans-serif;
  font-size:var(--fs-lg);
  font-weight:600;
  color:var(--c-ink);
}
.difference-body{
  font-size:var(--fs-sm);
  color:var(--c-mid);
  line-height:1.65;
}

/* ── Filmstrip gallery (home hook) ── */
.filmstrip-outer{
  padding:var(--sp-8) 0;
  background:var(--c-ink);
  overflow:hidden;
}
.filmstrip-header{
  max-width:1200px;
  margin:0 auto var(--sp-6);
  padding:0 var(--sp-6);
  display:flex;
  align-items:baseline;
  gap:var(--sp-4);
}
.filmstrip-header .section-title{
  color:var(--c-bg);
  margin-bottom:0;
}
.filmstrip-header .section-label{
  color:rgba(255,255,255,.55);
}
.filmstrip-track{
  display:flex;
  gap:var(--sp-5);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:var(--sp-2) var(--sp-6) var(--sp-6);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.filmstrip-track::-webkit-scrollbar{display:none;}
.filmstrip-tile{
  flex:0 0 340px;
  scroll-snap-align:start;
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.3);
  transform:rotate(-1deg);
  transition:transform .3s,box-shadow .3s;
  aspect-ratio:4/3;
}
.filmstrip-tile:nth-child(even){transform:rotate(.8deg);}
.filmstrip-tile:hover{
  transform:rotate(0deg) scale(1.03);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.filmstrip-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ── Services section ── */
.services-bg{
  background:var(--c-bg);
  padding:var(--sp-8) 0;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--sp-4);
  margin-top:var(--sp-6);
}
.service-card{
  background:#fff;
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  border:1px solid var(--c-faint);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  position:relative;
  overflow:hidden;
}
.service-card::before{
  content:'';  /* no emoji in content — lesson 6 */
  position:absolute;
  top:var(--sp-3);
  right:var(--sp-3);
  font-size:1.2rem;
  opacity:.12;
}
.service-icon{font-size:2.2rem;}
.service-name{
  font-family:'Fredoka',sans-serif;
  font-size:var(--fs-lg);
  font-weight:600;
  color:var(--c-ink);
}
.service-desc{
  font-size:var(--fs-sm);
  color:var(--c-mid);
  line-height:1.6;
  flex:1;
}
.service-note{
  font-size:var(--fs-xs);
  color:var(--accent);
  font-weight:700;
}
.services-cta-row{
  margin-top:var(--sp-6);
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  flex-wrap:wrap;
}
.btn-primary{
  display:inline-flex;
  align-items:center;
  background:var(--accent);
  color:#fff;
  padding:var(--sp-3) var(--sp-6);
  min-height:44px;
  border-radius:999px;
  font-family:'Nunito',sans-serif;
  font-weight:800;
  font-size:var(--fs-sm);
  text-decoration:none;
  transition:transform .2s,opacity .2s;
}
.btn-primary:hover{transform:translateY(-1px);opacity:.9;}
.btn-secondary{
  display:inline-flex;
  align-items:center;
  background:transparent;
  color:var(--c-ink);
  padding:var(--sp-3) var(--sp-5);
  min-height:44px;
  border-radius:999px;
  border:2px solid var(--c-faint);
  font-family:'Nunito',sans-serif;
  font-weight:700;
  font-size:var(--fs-sm);
  text-decoration:none;
  transition:border-color .2s,color .2s;
}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);}

/* ── Salon section (split) ── */
.salon-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-7);
  align-items:center;
  padding:var(--sp-8) var(--sp-6);
  max-width:1200px;
  margin:0 auto;
}
.salon-img{
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  aspect-ratio:4/3;
}
.salon-img img{
  width:100%;height:100%;
  object-fit:cover;
}
.salon-text{display:flex;flex-direction:column;gap:var(--sp-4);}
.salon-text .section-title{margin-bottom:0;}
.salon-text p{
  font-size:var(--fs-md);
  color:var(--c-mid);
  line-height:1.7;
}
.salon-features{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  margin-top:var(--sp-2);
}
.salon-feature{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-2);
  font-size:var(--fs-sm);
  color:var(--c-ink);
}
.salon-feature::before{
  content:'\2192'; /* → right-arrow — allowed typographic dingbat (lesson 6) */
  flex-shrink:0;
  font-size:.85rem;
  margin-top:2px;
  color:var(--accent);
}

/* ── Visit / Book section ── */
.visit-bg{
  background:var(--c-ink);
  color:var(--c-bg);
  padding:var(--sp-8) 0;
}
.visit-grid{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--sp-6);
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:var(--sp-7);
  align-items:start;
}
.visit-details{display:flex;flex-direction:column;gap:var(--sp-5);}
.visit-details .section-label{color:rgba(255,255,255,.45);}
.visit-details .section-title{color:var(--c-bg);}
.visit-item{
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
}
.visit-item-label{
  font-size:var(--fs-xs);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:rgba(255,255,255,.45);
  font-family:'Nunito',sans-serif;
}
.visit-item-value{
  font-size:var(--fs-md);
  color:var(--c-bg);
  font-weight:600;
}
.visit-item-value a{
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
}
.visit-map{
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  aspect-ratio:4/3;
}
.visit-map iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  min-height:320px;
}
.visit-actions{
  display:flex;
  gap:var(--sp-4);
  flex-wrap:wrap;
  margin-top:var(--sp-4);
}
.btn-light{
  display:inline-flex;
  align-items:center;
  background:var(--c-bg);
  color:var(--c-ink);
  padding:var(--sp-3) var(--sp-5);
  min-height:44px;
  border-radius:999px;
  font-family:'Nunito',sans-serif;
  font-weight:800;
  font-size:var(--fs-sm);
  text-decoration:none;
  transition:opacity .2s;
}
.btn-light:hover{opacity:.88;}
.btn-accent{
  display:inline-flex;
  align-items:center;
  background:var(--accent);
  color:#fff;
  padding:var(--sp-3) var(--sp-5);
  min-height:44px;
  border-radius:999px;
  font-family:'Nunito',sans-serif;
  font-weight:800;
  font-size:var(--fs-sm);
  text-decoration:none;
  transition:opacity .2s;
}
.btn-accent:hover{opacity:.88;}
.visit-payments{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  font-size:var(--fs-xs);
  color:rgba(255,255,255,.45);
  margin-top:var(--sp-2);
  font-weight:600;
  letter-spacing:.05em;
}

/* ── Footer ── */
.site-footer{
  background:var(--c-ink);
  color:rgba(255,255,255,.55);
  padding:var(--sp-7) var(--sp-6) var(--sp-5);
  border-top:1px solid rgba(255,255,255,.07);
}
.footer-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:var(--sp-7);
  padding-bottom:var(--sp-5);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-wordmark{
  font-family:'Fredoka',sans-serif;
  font-size:var(--fs-xl);
  font-weight:600;
  color:var(--c-bg);
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  text-decoration:none;
  margin-bottom:var(--sp-3);
}
.footer-wordmark .paw{color:var(--accent);}
.footer-tagline{
  font-size:var(--fs-sm);
  color:rgba(255,255,255,.45);
  font-style:italic;
}
.footer-col-title{
  font-family:'Nunito',sans-serif;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.35);
  margin-bottom:var(--sp-3);
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
.footer-links a{
  color:rgba(255,255,255,.6);
  font-size:var(--fs-sm);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  min-height:36px;
  transition:color .2s;
}
.footer-links a:hover{color:var(--accent);}
.footer-bottom{
  max-width:1200px;
  margin:var(--sp-4) auto 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:var(--fs-xs);
  color:rgba(255,255,255,.25);
  flex-wrap:wrap;
  gap:var(--sp-2);
}

/* ── Gallery page ── */
.gallery-header-bg{
  background:var(--c-ink);
  padding:calc(64px + var(--sp-8)) var(--sp-6) var(--sp-7);
  text-align:center;
}
.gallery-header-bg .section-label{color:rgba(255,255,255,.45);}
.gallery-header-bg .section-title{color:var(--c-bg);}
.gallery-header-bg p{color:rgba(255,255,255,.55);font-size:var(--fs-md);}
.gallery-masonry{
  max-width:1200px;
  margin:var(--sp-7) auto;
  padding:0 var(--sp-5);
  columns:3 280px;
  column-gap:var(--sp-4);
}
.gallery-frame{
  break-inside:avoid;
  margin-bottom:var(--sp-4);
  background:#fff;
  border-radius:var(--r-md);
  padding:var(--sp-3);
  box-shadow:var(--shadow-sm),inset 0 0 0 1px rgba(44,39,36,.10); /* mat inner-rule F3 */
  border:1px solid var(--c-faint);
  position:relative;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .5s,transform .5s;
}
.gallery-frame.visible{
  opacity:1;
  transform:translateY(0);
}
.gallery-frame::before{
  content:'';
  display:block;
  position:absolute;
  inset:var(--sp-3);
  border:1px solid rgba(44,39,36,.08);
  border-radius:4px;
  pointer-events:none;
  z-index:1;
}
.gallery-frame img{
  width:100%;
  display:block;
  border-radius:2px;
  object-fit:cover;
}
.gallery-caption{
  font-size:var(--fs-xs);
  color:var(--c-mid);
  text-align:center;
  margin-top:var(--sp-2);
  font-style:italic;
}

/* ── About page ── */
.about-hero{
  padding:calc(64px + var(--sp-8)) var(--sp-6) var(--sp-8);
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-7);
  align-items:center;
}
.about-hero-text{display:flex;flex-direction:column;gap:var(--sp-4);}
.about-hero-text p{
  font-size:var(--fs-md);
  color:var(--c-mid);
  line-height:1.75;
}
.about-hero-img{
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  /* aspect-ratio removed F4: d383fb93 is 1800x4000; natural flow avoids crop-loss */
}
.about-hero-img img{width:100%;height:auto;display:block;}
.about-quals{
  background:var(--c-faint);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  margin-top:var(--sp-4);
}
.about-quals-title{
  font-family:'Fredoka',sans-serif;
  font-size:var(--fs-lg);
  margin-bottom:var(--sp-3);
  color:var(--c-ink);
}
.qual-list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
.qual-item{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-2);
  font-size:var(--fs-sm);
  color:var(--c-ink);
}
.qual-check{
  color:var(--accent);
  font-weight:900;
  flex-shrink:0;
}
.about-salon-band{
  background:var(--c-ink);
  padding:var(--sp-8) var(--sp-6);
}
.about-salon-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:var(--sp-7);
  align-items:center;
}
.about-salon-img-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-3);
}
.about-salon-img-grid img{
  border-radius:var(--r-md);
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.about-salon-img-grid img:first-child{
  grid-column:1/-1;
  aspect-ratio:16/9;
}
.about-salon-text{
  color:var(--c-bg);
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}
.about-salon-text .section-label{color:rgba(255,255,255,.4);}
.about-salon-text .section-title{color:var(--c-bg);}
.about-salon-text p{
  color:rgba(255,255,255,.65);
  font-size:var(--fs-md);
  line-height:1.7;
}

/* ── Prices page ── */
.prices-hero{
  padding:calc(64px + var(--sp-8)) var(--sp-6) var(--sp-7);
  max-width:800px;
  margin:0 auto;
  text-align:center;
}
.prices-grid{
  max-width:1000px;
  margin:0 auto var(--sp-8);
  padding:0 var(--sp-6);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--sp-5);
}
.price-card{
  background:#fff;
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  border:1px solid var(--c-faint);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  text-align:center;
  transition:box-shadow .2s;
}
.price-card:hover{box-shadow:var(--shadow-md);}
.price-icon{font-size:2.5rem;}
.price-name{
  font-family:'Fredoka',sans-serif;
  font-size:var(--fs-xl);
  font-weight:600;
  color:var(--c-ink);
}
.price-desc{
  font-size:var(--fs-sm);
  color:var(--c-mid);
  line-height:1.6;
  flex:1;
}
.price-cta-note{
  background:var(--accent-light);
  border-radius:var(--r-md);
  padding:var(--sp-5) var(--sp-6);
  max-width:680px;
  margin:0 auto var(--sp-7);
  text-align:center;
  border-left:4px solid var(--accent);
}
.price-cta-note p{
  font-size:var(--fs-md);
  color:var(--c-ink);
  line-height:1.65;
}
.price-cta-note a{
  color:var(--accent);
  font-weight:800;
  text-decoration:none;
}
.payment-row{
  max-width:680px;
  margin:0 auto;
  padding:0 var(--sp-6);
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  font-size:var(--fs-sm);
  color:var(--c-mid);
}

/* ── FAQ page ── */
.faq-hero{
  padding:calc(64px + var(--sp-8)) var(--sp-6) var(--sp-6);
  max-width:800px;
  margin:0 auto;
  text-align:center;
}
.faq-grid{
  max-width:900px;
  margin:0 auto var(--sp-8);
  padding:0 var(--sp-6);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:var(--sp-5);
}
.faq-card{
  background:#fff;
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  border:1px solid var(--c-faint);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.faq-number{
  font-family:'Fredoka',sans-serif;
  font-size:var(--fs-2xl);
  color:var(--accent);
  line-height:1;
  opacity:.25;
}
.faq-q{
  font-family:'Fredoka',sans-serif;
  font-size:var(--fs-lg);
  font-weight:600;
  color:var(--c-ink);
  line-height:1.25;
}
.faq-a{
  font-size:var(--fs-sm);
  color:var(--c-mid);
  line-height:1.7;
}
.faq-a a{
  color:var(--accent);
  font-weight:700;
}

/* ── Page padding (below fixed nav) ── */
.page-top{padding-top:64px;}

/* ── Focus-visible accessibility (cs-tokens v1 §4a) ── */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
a:focus-visible,
button:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}

/* ── Paw SVG icon utility ── */
.paw-svg{
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0;
  fill:currentColor;
}
.nav-wordmark .paw-svg{color:var(--accent);}
.footer-wordmark .paw-svg{color:var(--accent);}

/* ── Scroll-reveal utility ── */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .55s ease,transform .55s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* ── Responsive ── */
@media(max-width:768px){
  .nav-links,.nav-book{display:none;}
  .nav-burger{display:flex;}

  #hero-section{height:180vh;}
  .hero-content{bottom:10%;width:92vw;}

  .salon-split{grid-template-columns:1fr;}
  .visit-grid{grid-template-columns:1fr;}
  .about-hero{grid-template-columns:1fr;}
  .about-hero-img{aspect-ratio:auto;}
  .about-salon-inner{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;}

  .gallery-masonry{columns:2 180px;}
  .faq-grid{grid-template-columns:1fr;}
  .prices-grid{grid-template-columns:1fr 1fr;}
}

@media(max-width:480px){
  .gallery-masonry{columns:1;}
  .prices-grid{grid-template-columns:1fr;}
  .filmstrip-tile{flex:0 0 280px;}
}