:root{
  --wall:#E3CE94; --wall-deep:#DFC172; --tan:#BBA66F;
  --trim:#5A9D68; --trim-ink:#1F3221; --cream:#EBE8DF; --mat:#29261C;
  --head:"Arial Rounded MT Bold","Avenir Next Rounded","Nunito","Trebuchet MS",ui-rounded,system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--wall);color:var(--mat);font:17px/1.55 var(--body);-webkit-text-size-adjust:100%}
img{display:block;max-width:100%;height:auto}
a{color:var(--trim-ink)}
h1,h2,h3{font-family:var(--head);font-weight:400;line-height:1.1;margin:0;color:var(--trim-ink)}
h2{font-size:clamp(1.7rem,4.5vw,2.5rem);margin-bottom:.6em}
.eyebrow{font:700 .78rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;margin:0 0 .9rem;color:var(--trim-ink)}
.note{font-size:.9rem;opacity:.85;max-width:60ch}

.concept{margin:0;padding:.55rem 16px;background:var(--mat);color:var(--cream);font-size:.82rem;text-align:center;line-height:1.4}
.concept a{color:var(--wall)}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--cream);border-bottom:6px solid var(--trim)}
.brand{text-decoration:none;color:var(--trim-ink);display:flex;flex-direction:column;line-height:1}
.brand b{font:400 1.45rem/1 var(--head)}
.brand i{font:700 .7rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;margin-top:5px;font-style:normal}
.call{background:var(--trim-ink);color:var(--cream);text-decoration:none;padding:.65rem 1rem;border-radius:999px;font-weight:700;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;gap:.4rem}
.call span{font-weight:400;opacity:.8}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.3rem;border-radius:999px;font:700 1rem var(--body);text-decoration:none;cursor:pointer;border:3px solid var(--trim-ink)}
.btn.solid{background:var(--trim-ink);color:var(--cream)}
.btn.line{background:transparent;color:var(--trim-ink)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:1.4rem 0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--mat);outline-offset:3px}

/* the window-frame motif: thick trim-green border like the salon's window and door */
.frame{border:10px solid var(--trim);border-radius:6px;background:var(--cream);box-shadow:0 0 0 4px var(--cream),0 0 0 8px var(--trim-ink)}

.hero{display:grid;gap:28px;padding:28px 16px 40px;max-width:1120px;margin:0 auto}
.hero h1{font-size:clamp(2.2rem,8vw,3.8rem);margin-bottom:.5em}
.pull{margin:0 0 .4rem}
.pull blockquote{margin:0;font:400 1.3rem/1.35 var(--head);color:var(--mat);border-left:8px solid var(--trim);padding-left:14px}
.pull figcaption{font-size:.85rem;margin:.6rem 0 0 22px;opacity:.85}
.hero-photo{order:-1;padding:12px 14px}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.facts li{background:var(--cream);border-radius:10px;padding:10px 8px;text-align:center;display:flex;flex-direction:column;gap:2px;border-bottom:4px solid var(--trim)}
.facts b{font:400 1.1rem/1.1 var(--head);color:var(--trim-ink)}
.facts span{font-size:.78rem;line-height:1.25}
sup{font-size:.65em}

.says{background:var(--cream);padding:44px 16px;border-top:6px solid var(--trim)}
.says>*{max-width:1120px;margin-left:auto;margin-right:auto}
.reviews{list-style:none;padding:0;margin:1.5rem auto 0;display:grid;gap:18px}
.reviews li{background:var(--wall);border:3px solid var(--trim-ink);border-radius:14px;padding:18px}
.reviews .when{font:700 .85rem var(--body);margin:0 0 .6rem;color:var(--trim-ink);letter-spacing:.04em}
.reviews blockquote{margin:0}
.reviews blockquote p{margin:0 0 .7em}
.reviews .who{font-size:.8rem;margin:.4rem 0 0;opacity:.8}

.regulars{background:var(--trim-ink);color:var(--cream);padding:44px 16px}
.regulars h2{color:var(--wall)}
.regulars .eyebrow{color:var(--cream)}
.reg-head,.wall{max-width:1120px;margin-left:auto;margin-right:auto}
.wall{list-style:none;padding:0;margin-top:1.4rem;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.wall li{border:6px solid var(--trim);border-radius:6px;background:var(--cream);overflow:hidden}
.wall li:nth-child(odd){transform:rotate(-.6deg)}.wall li:nth-child(even){transform:rotate(.6deg)}
.wall li.tile{background:var(--wall);border-color:var(--wall-deep);display:flex;flex-direction:column;justify-content:center;gap:14px;padding:16px;text-align:center;transform:none!important;aspect-ratio:4/5}
.wall .tile p{margin:0;font:400 1.3rem/1.25 var(--head);color:var(--trim-ink)}
.wall .tile a{font-weight:700;color:var(--trim-ink)}
.wall img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}

.services{padding:44px 16px;max-width:1120px;margin:0 auto}
.menu{list-style:none;margin:1.2rem 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.menu li{background:var(--cream);border-left:10px solid var(--trim);border-radius:6px;padding:16px 14px;font:400 1.1rem/1.2 var(--head);color:var(--trim-ink)}

.visit{background:var(--cream);border-top:6px solid var(--trim);padding:44px 16px;display:grid;gap:28px}
.visit>*{max-width:1120px}
.visit-photo{padding:12px 14px;max-width:340px;margin:0 auto}
address{font:400 1.3rem/1.3 var(--head);font-style:normal;color:var(--mat)}
.hours{border-collapse:collapse;width:100%;max-width:360px;margin:0 0 1.6rem}
.hours caption{text-align:left;font:700 .78rem var(--body);letter-spacing:.14em;text-transform:uppercase;padding-bottom:6px}
.hours th,.hours td{text-align:left;padding:7px 0;border-bottom:2px solid var(--wall);font-weight:400}
.hours th{font-weight:700}
.ask{background:var(--wall);border:3px solid var(--trim-ink);border-radius:14px;padding:18px;display:grid;gap:12px;max-width:520px}
.ask h3{font-size:1.3rem}
.ask label{display:grid;gap:4px;font-weight:700;font-size:.9rem}
.ask input,.ask textarea{font:400 1rem var(--body);padding:.7rem;border:2px solid var(--trim-ink);border-radius:8px;background:var(--cream);color:var(--mat);width:100%;min-height:44px}
.status{margin:0;font-size:.9rem;min-height:1.2em}

.foot{background:var(--mat);color:var(--cream);padding:26px 16px;font-size:.9rem}
.foot>*{max-width:1120px;margin-left:auto;margin-right:auto}
.foot a{color:var(--wall)}
.src{list-style:none;padding:0;font-size:.78rem;opacity:.85}
.src li{margin:.3rem 0}

@media(min-width:760px){
  body{font-size:18px}
  .top{padding:14px 32px}
  .hero{grid-template-columns:1.1fr .9fr;align-items:center;padding:56px 32px 64px;gap:48px}
  .hero-photo{order:0}
  .says,.regulars,.services,.visit{padding-left:32px;padding-right:32px}
  .reviews{grid-template-columns:1.4fr 1fr 1fr;align-items:start}
  .wall{grid-template-columns:repeat(4,1fr);gap:16px}
  .menu{grid-template-columns:repeat(3,1fr)}
  .visit{grid-template-columns:340px 1fr;align-items:start;gap:56px;max-width:none;justify-content:center}
  .visit-photo{margin:0}
  .foot{padding:26px 32px}
}
@media print{.wall li,.wall li:nth-child(n){transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* tap-targets */
a:where([href^="tel:"],[href^="mailto:"]){padding-block:15px}
.brand{min-height:44px}