/* ==========================================================================
   FADE SHACK BARBERS — main.css  (v2, brand-led rebuild)

   The visual language here is lifted from the client's OWN artifacts, not from
   a house template:
     · his A-board  → chalkboard menu, gold ribbon banners, ★ dividers,
                      dotted price leaders, barber poles, crossed scissors,
                      condensed chalk lettering
     · his badge    → flowing script, palm trees, gold ring, "EST. 2024"
     · his shop     → warm & bright (olive walls, gold chairs, wood) — so the
                      site is CREAM-based, with chalkboard used as a deliberate
                      material (the menu board), never as a default dark cave.

   Every palette value is sampled from the A-board photo.
   ========================================================================== */

/* -------- 0. FONTS (self-hosted) ------------------------------------------
   Oswald    — condensed caps. His board's workhorse ("HAIRCUT + WASH",
               "OPEN 7 DAYS"). Display + labels + nav + buttons.
   Work Sans — warm humanist body. His board has no body copy, so this is a
               free, legible choice that stays out of the way.
   Yellowtail— flowing brush script. Matches the badge script and the board's
               "Quality Cuts ★ Friendly Service". DECORATIVE ACCENT ONLY.
   3 families is a deliberate step past the "max 2" guideline — his own
   signage uses three lettering styles (slab caps + condensed + script), so
   matching the brand needs all three. Script is never used for running text.
   -------------------------------------------------------------------------- */
@font-face { font-family:'Oswald'; src:url('/assets/fonts/oswald-var.woff2') format('woff2-variations');
  font-weight:200 700; font-style:normal; font-display:swap; }
@font-face { font-family:'Work Sans'; src:url('/assets/fonts/worksans-var.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Yellowtail'; src:url('/assets/fonts/yellowtail.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }

/* -------- 1. TOKENS -------------------------------------------------------
   WARM NATURAL palette — brown / cream / white / dark / green — read straight
   off the LOGO (cream script, rust-brown outline, muted olive-brass ring) and
   the SHOP (olive walls, wood, plants, tan leather). Deliberately NOT the
   A-board's saturated primary red/white/blue barber-pole colours — those read
   as generic-barbershop and clash with the coastal, earthy feel.
   -------------------------------------------------------------------------- */
:root {
  --cream:      #F2E7D2;   /* warm cream base */
  --cream-2:    #E9DBC0;
  --white:      #FBF5EA;   /* cards / lightest */
  --ink:        #241B12;   /* warm espresso text on cream (13.8:1) */
  --ink-soft:   #584B3B;   /* 6.9:1 on cream */

  --espresso:   #2A2019;   /* darkest warm surface (not cold black) */
  --espresso-2: #342A21;
  --green:      #4E5838;   /* olive — the shop walls; secondary dark surface + accent (6.17:1 on cream) */
  --green-lit:  #8A9068;   /* sage — accent on dark (4.75:1 on espresso) */

  --rust:       #7C3F26;   /* logo outline — PRIMARY accent (6.6:1 on cream) */
  --rust-lit:   #A6603C;
  --wood:       #8A6E52;   /* wood / leather taupe */

  --gold:       #8F7538;   /* muted olive-brass — large/display on cream only */
  --gold-lit:   #C6A968;   /* lit brass — accent on dark surfaces */

  /* legacy aliases so any not-yet-rewritten rule still resolves warmly */
  --paper:      var(--cream);
  --paper-2:    var(--cream-2);
  --card:       var(--white);
  --board:      var(--espresso);
  --board-2:    var(--espresso-2);
  --chalk:      #F3EAD8;   /* warm chalk on espresso */
  --chalk-soft: #C9BCA6;
  --gold-deep:  #7C632C;
  --red:        var(--rust);
  --olive:      var(--green);

  /* razor pole — the LOGO's cream-and-brass razor, NOT red/white/blue */
  --pole-a:     #F3EAD8;
  --pole-b:     #8F7538;
  --chrome:     #E4DCC8;
  --chrome-2:   #A99E82;

  --err:        #9E2B1E;

  /* type */
  --f-display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --f-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-script: 'Yellowtail', 'Snell Roundhand', cursive;

  --t-kicker: 1.2rem;
  --t-sm:   clamp(1rem, 0.95rem + 0.15vw, 1.0625rem);
  --t-body: clamp(1.0625rem, 1rem + 0.25vw, 1.18rem);
  --t-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  --t-h4:   clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --t-h3:   clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem);
  --t-h2:   clamp(2.1rem, 1.5rem + 2.6vw, 3.8rem);
  --t-h1:   clamp(2.8rem, 1.9rem + 4.4vw, 6rem);

  --gut: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem);
  --sec: clamp(4rem, 2.6rem + 6vw, 7.5rem);
  --maxw: 1220px;
  --maxw-narrow: 720px;

  --r: 6px;
  --r-lg: 12px;
  --shadow: 0 2px 4px rgba(32,27,20,.06), 0 12px 30px -12px rgba(32,27,20,.28);
  --shadow-lg: 0 4px 8px rgba(32,27,20,.08), 0 30px 60px -16px rgba(32,27,20,.36);
  --ease: cubic-bezier(0.4,0,0.2,1);
  --dur: 200ms;
  --dur-slow: 460ms;
}

/* -------- 2. RESET --------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body {
  font-family:var(--f-body); font-size:var(--t-body); line-height:1.6;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,picture,svg,video { display:block; max-width:100%; }
img { height:auto; }
input,button,textarea,select { font:inherit; color:inherit; }
button { background:none; border:0; cursor:pointer; }
a { color:inherit; }

h1,h2,h3,h4 {
  font-family:var(--f-display); font-weight:600; line-height:1.02;
  text-transform:uppercase; letter-spacing:.005em; text-wrap:balance;
}
h1{font-size:var(--t-h1);} h2{font-size:var(--t-h2);}
h3{font-size:var(--t-h3);} h4{font-size:var(--t-h4);}
p{text-wrap:pretty;}

:focus-visible { outline:3px solid var(--red); outline-offset:3px; border-radius:3px; }
.on-board :focus-visible { outline-color:var(--gold-lit); }
::selection { background:var(--gold); color:var(--board); }

.skip-link {
  position:absolute; top:-100px; left:var(--gut); z-index:200;
  background:var(--rust); color:var(--cream); padding:.75rem 1.25rem;
  border-radius:0 0 var(--r) var(--r); font-family:var(--f-display);
  font-weight:600; text-transform:uppercase; letter-spacing:.06em; text-decoration:none;
}
.skip-link:focus { top:0; }
.visually-hidden { position:absolute!important; width:1px;height:1px; padding:0;margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* -------- 3. LAYOUT -------------------------------------------------------- */
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow { max-width:var(--maxw-narrow); }
.section { padding-block:var(--sec); position:relative; }
.section--tight { padding-block:calc(var(--sec)*.62); }

/* Chalkboard surface — the deliberate dark material (menu board / footer / hero back).
   Faint chalk grain so it reads as slate, not flat black. */
.on-board {
  background-color:var(--board); color:var(--chalk);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.025) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.02) 0, transparent 50%);
}
.on-board h1,.on-board h2,.on-board h3,.on-board h4 { color:var(--chalk); }
.on-olive, .on-green { background:var(--green); color:var(--white); }
.on-olive h2,.on-olive h3,.on-green h2,.on-green h3,.on-green h1 { color:var(--white); }
.on-cream { background:var(--cream); }
.on-espresso { background:var(--espresso); color:var(--chalk); }
.on-espresso h1,.on-espresso h2,.on-espresso h3 { color:var(--chalk); }

/* Editorial offset grid — used by inner-page bodies */
.ed-grid { display:grid; grid-template-columns:1fr; gap:clamp(1.75rem,1rem + 3vw,3.5rem); }
.ed-grid > *, .twin > *, .gal > *, .hero__inner > *, .svc > *, .footer-grid > * { min-width:0; }
@media (min-width:900px){
  .ed-grid { grid-template-columns:repeat(12,1fr); align-items:start; grid-auto-flow:row dense; }
  .ed-grid > .col-lead { grid-column:1 / span 5; }
  .ed-grid > .col-body { grid-column:7 / span 6; }
  .ed-grid > .col-wide { grid-column:1 / span 7; }
  .ed-grid > .col-narrow { grid-column:9 / span 4; }
  .ed-grid > .col-full { grid-column:1 / -1; }
}
.lead { font-size:var(--t-lead); line-height:1.5; }
.muted { color:var(--ink-soft); }

/* Editorial-grid images: cap to a controlled landscape aspect + frame, so
   portrait source photos never render as super-tall columns. */
.ed-grid .col-narrow > picture img,
.ed-grid .col-body > picture img,
.ed-grid .col-lead > picture img,
.ed-grid .col-wide > picture img {
  width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 35%;
  border-radius:var(--r-lg); display:block;
  box-shadow:0 0 0 1px rgba(198,169,104,.3), var(--shadow);
}
@media (min-width:900px){
  /* on desktop the narrow column is slim — a portrait crop reads better */
  .ed-grid .col-narrow > picture img { aspect-ratio:3/4; }
}
.on-board .muted, .on-olive .muted, .on-green .muted { color:var(--chalk-soft); }

/* Compatibility: inner pages not yet converted from v1 still emit .eyebrow,
   .on-dark, .panel--ink, .stars, .tag-save, .btn--ghost, .svc__incl markers.
   These aliases keep them on-brand until each page is converted. */
.eyebrow { font-family:var(--f-display); font-weight:600; font-size:var(--t-kicker);
  letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin-bottom:1rem;
  display:flex; align-items:center; gap:.6rem; }
.eyebrow::after { content:''; flex:1; height:1px; max-width:3.5rem; background:currentColor; opacity:.4; }
.on-board .eyebrow, .on-olive .eyebrow, .page-head .eyebrow { color:var(--gold-lit); }
.on-dark { background-color:var(--board); color:var(--chalk);
  background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.025) 0,transparent 45%); }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4 { color:var(--chalk); }
.on-dark .muted { color:var(--chalk-soft); }
.on-dark { --walk-fg:var(--chalk); --walk-bg:var(--board); }
.on-dark .eyebrow { color:var(--gold-lit); }
.stars { color:var(--gold-lit); }
.btn--ghost { background:transparent; color:var(--red); border-color:currentColor; }
.btn--ghost:hover { background:var(--red); color:var(--paper); border-color:var(--red); }
.on-board .btn--ghost, .on-dark .btn--ghost { color:var(--gold-lit); }
.svc__incl li::before { content:''; width:15px; height:15px; flex:none; margin-top:.28em; border-radius:50%;
  background:rgba(181,138,46,.3); box-shadow:inset 0 0 0 1.5px var(--gold); }
.tag-save { display:inline-flex; align-items:center; gap:.375rem; background:var(--red); color:var(--paper);
  font-family:var(--f-display); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .75rem; border-radius:var(--r); margin-bottom:.875rem; }
.cta-note { color:var(--ink-soft); }
.section--tight { padding-block:calc(var(--sec)*.62); }

/* -------- 4. ORNAMENTS ----------------------------------------------------- */
.orn { display:inline-block; }
.orn-scissors { width:38px; height:38px; color:var(--gold); }
.orn-star { width:16px; height:16px; color:var(--gold); }
.orn-palm { width:34px; height:34px; color:var(--gold); }
/* CSS barber pole — tiles cleanly at any height (no SVG stretch distortion) */
.pole { display:flex; flex-direction:column; align-items:center; width:22px; height:100%; }
.pole__cap { flex:none; width:22px; height:9px; border-radius:4px;
  background:linear-gradient(180deg, var(--chrome) 0%, var(--chrome-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.pole__tube { flex:1; width:16px; min-height:0; margin-block:2px; border-radius:8px; overflow:hidden;
  position:relative; background:var(--pole-a);
  box-shadow:inset 2px 0 3px rgba(0,0,0,.25), inset -2px 0 3px rgba(0,0,0,.25), inset 0 0 0 1px var(--chrome-2); }
.pole__stripes { position:absolute; left:-30%; right:-30%; top:-60%; bottom:-60%;
  background:repeating-linear-gradient(48deg,
    var(--pole-a) 0 9px, var(--pole-b) 9px 18px); }
@media (prefers-reduced-motion:no-preference){
  .pole__stripes { animation:pole 2.8s linear infinite; }
}
@keyframes pole { to { transform:translateY(24px); } }  /* 18px * sin(48°) ≈ one stripe cycle */

/* Section eyebrow — a bold Oswald caps label (legible, on-brand). Script is
   reserved for the hero, the brand wordmark and the board's "Quality cuts"
   accent, so the page never feels like it has too many fonts going at once. */
.kicker {
  font-family:var(--f-display); font-weight:600;
  font-size:var(--t-kicker); letter-spacing:.14em; text-transform:uppercase;
  line-height:1.2; color:var(--rust); margin-bottom:1rem; display:block;
}
.on-board .kicker, .on-dark .kicker, .hero .kicker { color:var(--gold-lit); }
.on-green .kicker { color:#DFCB9E; }
.on-olive .kicker { color:#F0D9A8; }

/* Label — small condensed caps (the board's sub-labels). Not a bulleted list. */
.label {
  font-family:var(--f-display); font-weight:600; font-size:var(--t-kicker);
  letter-spacing:.18em; text-transform:uppercase; color:var(--red);
}
.on-board .label { color:var(--gold-lit); }
.on-olive .label { color:#F0D9A8; }

/* Star rule — replaces plain <hr>/thin rules */
.starrule { display:flex; align-items:center; gap:1rem; justify-content:center; margin-block:1.5rem; }
.starrule span { flex:1; height:1px; max-width:180px;
  background:linear-gradient(90deg,transparent,currentColor); opacity:.4; }
.starrule span:last-child { background:linear-gradient(90deg,currentColor,transparent); }
.starrule .orn-star { flex:none; }
.on-board .starrule, .on-board .starrule .orn-star { color:var(--gold); }

/* Gold ribbon banner — "PREMIUM BARBERING" / "WALK-INS WELCOME", folded corners */
.ribbon {
  display:inline-block; position:relative; isolation:isolate;
  background:var(--gold-lit); color:var(--espresso);
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:var(--t-kicker);
  padding:.5rem 1.4rem; margin-inline:14px;
}
.ribbon__in { position:relative; z-index:1; white-space:nowrap; }
.ribbon::before, .ribbon::after {
  content:''; position:absolute; top:0; bottom:0; width:14px; background:var(--gold);
}
.ribbon::before { left:-14px; clip-path:polygon(0 0,100% 0,100% 100%,0 100%,50% 50%); }
.ribbon::after  { right:-14px; clip-path:polygon(0 0,100% 0,50% 50%,100% 100%,0 100%); }
.ribbon--lit { background:#D8BE86; }
.ribbon--lit::before, .ribbon--lit::after { background:var(--gold-lit); }

/* -------- 5. BUTTONS ------------------------------------------------------- */
/* Twin CTA is load-bearing: Book and Walk-in stay identical in size + weight.
   Barbershop styling (solid gold vs chalk-outline), not the template's
   filled-white + hairline-outline. */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:54px; padding:.9rem 1.7rem;
  font-family:var(--f-display); font-weight:600; font-size:1.05rem;
  text-transform:uppercase; letter-spacing:.06em; text-decoration:none; text-align:center;
  border:2px solid transparent; border-radius:var(--r);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }

.btn--book { background:var(--book-bg,var(--rust)); color:var(--book-fg,var(--white)); border-color:var(--book-bg,var(--rust)); }
.btn--book:hover { filter:brightness(1.08); box-shadow:0 10px 22px -8px rgba(124,63,38,.55); }

.btn--walk { background:transparent; color:var(--walk-fg,var(--ink)); border-color:var(--walk-fg,var(--ink)); }
.btn--walk:hover { background:var(--walk-fg,var(--ink)); color:var(--walk-bg,var(--paper)); }
.on-board,.on-olive,.on-green,.on-espresso,.hero,.site-header,.drawer,.sticky-cta,.site-footer,.page-head {
  --walk-fg:var(--chalk); --walk-bg:var(--board);
  --book-bg:var(--gold-lit); --book-fg:var(--espresso);
}

.btn--sm { min-height:46px; padding:.65rem 1.2rem; font-size:.95rem; }
.btn--block { width:100%; }

.cta-pair { display:flex; flex-wrap:wrap; gap:.75rem; }
.cta-pair > .btn { flex:1 1 190px; }
@media (min-width:560px){ .cta-pair > .btn { flex:0 1 auto; min-width:210px; } }
.cta-note { margin-top:.9rem; font-size:var(--t-sm); color:var(--ink-soft); }
.on-board .cta-note, .hero .cta-note { color:var(--chalk-soft); }

/* -------- 6. HEADER -------------------------------------------------------- */
.site-header {
  position:sticky; top:0; z-index:100; background:var(--board);
  border-bottom:3px solid var(--gold);
  color:var(--chalk);
}
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:74px; }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--chalk); min-height:44px; }
.brand__badge { width:50px; height:50px; border-radius:50%; flex:none; }
.brand__text { display:flex; flex-direction:column; line-height:.95; }
.brand__name { font-family:var(--f-script); font-size:1.5rem; color:var(--gold-lit); }
.brand__sub { font-family:var(--f-display); font-weight:600; font-size:.72rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--chalk-soft); margin-top:2px; }

.nav { display:none; }
@media (min-width:1000px){
  .nav { display:flex; align-items:center; gap:1.6rem; }
  .nav a { position:relative; text-decoration:none; font-family:var(--f-display); font-weight:500;
    font-size:1rem; text-transform:uppercase; letter-spacing:.08em;
    color:var(--chalk-soft); padding:.4rem 0; transition:color var(--dur) var(--ease); }
  .nav a::after { content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
    background:var(--gold-lit); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-slow) var(--ease); }
  .nav a:hover, .nav a[aria-current="page"] { color:var(--chalk); }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform:scaleX(1); }
}
.header-cta { display:none; }
@media (min-width:1000px){ .header-cta { display:flex; gap:.5rem; } }

.burger { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px;
  margin-right:-8px; color:var(--chalk); border-radius:var(--r); }
@media (min-width:1000px){ .burger { display:none; } }
.burger__box { position:relative; width:24px; height:15px; }
.burger__box span { position:absolute; left:0; height:2.5px; width:100%; background:currentColor; border-radius:2px;
  transition:transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease); }
.burger__box span:nth-child(1){top:0;} .burger__box span:nth-child(2){top:6.5px;} .burger__box span:nth-child(3){top:13px;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.drawer { position:fixed; inset:0; z-index:99; background:var(--board); padding:90px var(--gut) 2rem;
  display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), visibility var(--dur-slow);
  overflow-y:auto; }
.drawer[data-open="true"] { opacity:1; visibility:visible; transform:none; }
@media (min-width:1000px){ .drawer { display:none; } }
.drawer nav { display:flex; flex-direction:column; }
.drawer nav a { font-family:var(--f-display); font-weight:600; font-size:1.9rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--chalk); text-decoration:none; padding:.7rem 0;
  border-bottom:1px solid rgba(224,175,92,.22); display:flex; justify-content:space-between; align-items:center; }
.drawer nav a[aria-current="page"] { color:var(--gold-lit); }
.drawer nav a .orn-star { opacity:.5; }
.drawer__cta { margin-top:auto; padding-top:2rem; display:grid; gap:.75rem; }
.drawer__meta { margin-top:1.5rem; font-size:var(--t-sm); color:var(--chalk-soft); }
.drawer__meta a { color:var(--gold-lit); }
body[data-lock="true"] { overflow:hidden; }

/* -------- 7. OPEN/CLOSED PILL --------------------------------------------- */
.status { display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .9rem;
  border-radius:999px; font-family:var(--f-display); font-weight:500; text-transform:uppercase;
  letter-spacing:.05em; font-size:var(--t-sm);
  border:1px solid rgba(244,240,230,.28); background:rgba(244,240,230,.06); color:var(--chalk); }
.status__dot { width:9px; height:9px; border-radius:50%; background:var(--chalk-soft); flex:none; }
.status[data-state="open"] .status__dot { background:#6FBF7F; }
.status[data-state="closed"] .status__dot { background:var(--red); }
@media (prefers-reduced-motion:no-preference){
  .status[data-state="open"] .status__dot { animation:pulse 2.4s var(--ease) infinite; }
}
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(111,191,127,.6);} 70%{box-shadow:0 0 0 7px rgba(111,191,127,0);} 100%{box-shadow:0 0 0 0 rgba(111,191,127,0);} }
.status--light { border-color:rgba(32,27,20,.2); background:rgba(32,27,20,.04); color:var(--ink); }
.status--light .status__dot { background:var(--olive); }
.status--light[data-state="open"] .status__dot { background:#3F8A50; }
.status--light[data-state="closed"] .status__dot { background:var(--red); }

/* -------- 8. HERO — content beside a framed photo, on a warm brown ground -
   The photo sits in a contained frame (not full-bleed) so the lower-res GBP
   source reads sharp. Warm espresso ground with a soft brass/rust glow. */
.hero { position:relative; background:var(--espresso); color:var(--chalk); overflow:hidden;
  background-image:
    radial-gradient(120% 100% at 88% 6%, rgba(198,169,104,.14) 0, transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(124,63,38,.16) 0, transparent 55%);
  padding-block:clamp(2rem,1.2rem + 4vw,4.5rem); }
.hero__inner { position:relative; display:grid; gap:clamp(1.75rem,1.2rem + 2.5vw,3rem); align-items:center; }
/* side-by-side from tablet up (720px) so the cropped/tablet width doesn't
   stack a huge headline over a huge photo */
@media (min-width:720px){ .hero__inner { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .hero__inner { grid-template-columns:1.05fr .95fr; } }
.hero__kicker { font-family:var(--f-script); color:var(--gold-lit);
  font-size:clamp(2.2rem,1.5rem + 2vw,3.2rem); line-height:1; margin-bottom:.5rem; display:block; }
.hero h1 { font-size:clamp(2.3rem,1.6rem + 2.8vw,4.4rem); font-weight:700; line-height:.96;
  max-width:15ch; color:var(--chalk); }
.hero__sub { font-size:var(--t-lead); max-width:46ch; margin-top:1.15rem; color:var(--chalk-soft); }
.hero__cta { margin-top:1.75rem; }
.hero__meta { margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; align-items:center;
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.06em; font-size:var(--t-sm);
  color:var(--chalk-soft); }
.hero__meta .orn-star { color:var(--gold-lit); }
.hero__meta a { color:var(--chalk); text-underline-offset:3px; text-decoration-color:var(--gold-lit); }
/* framed photo — capped height on mobile so it never dominates; fills its
   column on tablet+ */
.hero__frame { position:relative; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 0 0 1px rgba(198,169,104,.4), var(--shadow-lg); }
.hero__frame img { width:100%; aspect-ratio:5/6; max-height:60vh; object-fit:cover; object-position:center 14%; display:block; }
@media (min-width:720px){ .hero__frame img { aspect-ratio:4/5; max-height:none; object-position:center 30%; } }

.ph { display:grid; place-items:center; text-align:center; background:var(--espresso-2);
  color:var(--chalk-soft); font-family:var(--f-display); text-transform:uppercase; letter-spacing:.1em;
  font-size:var(--t-sm); border-radius:var(--r-lg); box-shadow:inset 0 0 0 3px rgba(198,169,104,.3); }

/* -------- 8b. HOMEPAGE SECTIONS (new architecture) ------------------------ */

/* MANIFESTO — an editorial statement on cream, not a stat strip */
.manifesto { background:var(--cream); }
.manifesto__lead { font-family:var(--f-display); font-weight:500; text-transform:uppercase;
  font-size:clamp(1.5rem,1rem + 2.4vw,2.9rem); line-height:1.12; letter-spacing:.005em;
  max-width:20ch; color:var(--ink); }
.manifesto__lead .script { font-family:var(--f-script); font-weight:400; text-transform:none;
  color:var(--rust); letter-spacing:0; }
.manifesto__foot { margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem 2.5rem;
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.06em; font-size:var(--t-sm);
  color:var(--ink-soft); }
.manifesto__foot span { display:flex; align-items:center; gap:.5rem; }
.manifesto__foot .orn-star { color:var(--rust); }
.manifesto__lead { margin-inline:auto; text-align:center; max-width:24ch; }
.manifesto__foot { justify-content:center; }

.board-intro { text-align:center; margin-bottom:2.25rem; }

/* THE WORK — editorial photo feature, asymmetric (not a uniform card row) */
.work__head { max-width:56ch; margin-bottom:2.25rem; }
.work__grid { display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media (min-width:900px){
  .work__grid { grid-template-columns:1.35fr 1fr; grid-template-rows:auto auto; }
  .work__fig--lead { grid-row:1 / span 2; }
}
.work__fig { position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.work__fig img { width:100%; height:100%; object-fit:cover; aspect-ratio:5/4; transition:transform 600ms var(--ease); }
.work__fig--lead img { aspect-ratio:4/5; }
@media (min-width:900px){ .work__fig--lead img { aspect-ratio:auto; height:100%; } }
.work__fig:hover img { transform:scale(1.04); }
.work__fig figcaption { position:absolute; left:0; right:0; bottom:0; padding:3rem 1.1rem 1rem;
  background:linear-gradient(to top,rgba(20,14,8,.94) 0%,rgba(20,14,8,.7) 45%,transparent); color:var(--white);
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.04em; font-size:var(--t-sm); }

/* KIDS — olive-green section, calm, photo alongside (not a saturated band) */
.kids__grid { display:grid; gap:clamp(1.75rem,1rem + 3vw,3rem); align-items:center; }
@media (min-width:900px){ .kids__grid { grid-template-columns:1fr 1fr; } }
.kids__fig { margin:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.kids__fig img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.kids__price { font-family:var(--f-display); font-weight:700; font-size:clamp(2.5rem,1.8rem + 3vw,4rem);
  line-height:1; color:var(--white); margin-top:1.5rem; }
.kids__price span { display:block; font-size:.28em; font-weight:600; letter-spacing:.1em; color:#E4D3A6; margin-top:.5rem; }

/* FEATURE QUOTE — one big testimonial on espresso (not a 2x2 grid) */
.feature-quote { text-align:center; padding-block:clamp(4rem,2.5rem + 5vw,7rem); }
.feature-quote .wrap-narrow { padding-inline:clamp(1.25rem,1rem + 2vw,2.5rem); }
.orn-star-row { display:flex; justify-content:center; gap:.4rem; margin-bottom:1.5rem; }
.orn-star-row .orn-star { color:var(--gold-lit); width:22px; height:22px; }
.big-quote { font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.6rem,1.1rem + 2.4vw,3rem); line-height:1.1; letter-spacing:.005em;
  color:var(--chalk); max-width:22ch; margin:0 auto; }
.big-cite { display:block; margin-top:1.5rem; font-style:normal; font-family:var(--f-script);
  font-size:1.7rem; color:var(--gold-lit); }
.big-cite span { font-family:var(--f-display); text-transform:uppercase; font-size:.72rem;
  letter-spacing:.12em; color:var(--chalk-soft); vertical-align:middle; }

/* VISIT — warm block with a contained, framed map (not full-width) */
.visit__grid { display:grid; gap:clamp(2rem,1.2rem + 3vw,3.5rem); }
@media (min-width:820px){ .visit__grid { grid-template-columns:1fr 1fr; align-items:start; } }
.visit__map .map { box-shadow:0 0 0 1px rgba(198,169,104,.35), var(--shadow); }
.visit__hours { margin-top:1.5rem; }


/* Contact list — icon + text rows (replaces emoji) */
.contact-list { list-style:none; padding:0; margin:0; display:grid; gap:1rem; font-size:var(--t-body); }
.contact-list a { display:flex; align-items:center; gap:.75rem; color:var(--rust); font-weight:600;
  text-decoration:none; }
.on-board .contact-list a, .on-olive .contact-list a { color:var(--gold-lit); }
.contact-list svg { width:22px; height:22px; flex:none; }
.contact-list a:hover { text-decoration:underline; text-underline-offset:3px; }

/* Spacing: give pull-quotes room off their border, tidy the manifesto foot */
.pull { padding-left:clamp(1.5rem,1rem + 2vw,2.75rem); }
.manifesto__foot { margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--cream-2);
  max-width:760px; margin-inline:auto; }

/* -------- 9. TRUST STRIP -------------------------------------------------- */
.trust { background:var(--olive); color:var(--paper); border-block:3px solid var(--gold); }
.trust__list { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.5rem clamp(1rem,.4rem + 2vw,2.4rem); padding-block:1rem; list-style:none; margin:0;
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.07em; font-size:var(--t-sm); }
.trust__item { display:flex; align-items:center; gap:.5rem; }
.trust__item + .trust__item::before { content:''; width:0; }
.trust__item .orn-star { color:var(--gold-lit); width:13px; height:13px; }
.trust a { color:var(--paper); text-underline-offset:3px; text-decoration-color:var(--gold-lit); }
.trust a:hover { color:var(--gold-lit); }
.trust strong { color:var(--gold-lit); }

/* -------- 10. TWIN PANELS (book / walk-in) -------------------------------- */
.twin { display:grid; gap:1.25rem; }
@media (min-width:800px){ .twin { grid-template-columns:1fr 1fr; } }
.panel { display:flex; flex-direction:column; gap:1.15rem; padding:clamp(1.75rem,1.2rem + 2.5vw,2.75rem);
  border-radius:var(--r-lg); border:2px solid var(--paper-2); background:var(--card);
  transition:transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease); }
.panel:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.panel__head { display:flex; align-items:center; gap:.75rem; }
.panel__icon { width:46px; height:46px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--board); color:var(--gold-lit); }
.panel__icon svg { width:24px; height:24px; }
.panel h3 { font-size:var(--t-h3); }
.panel p { color:var(--ink-soft); }
.panel .btn { margin-top:auto; }
.panel--board, .panel--ink { background:var(--board); color:var(--chalk); border-color:var(--board); }
.panel--board p, .panel--ink p { color:var(--chalk-soft); }
.panel--board h3, .panel--board h4, .panel--ink h3, .panel--ink h4 { color:var(--chalk); }
.panel--board .panel__icon, .panel--ink .panel__icon { background:rgba(224,175,92,.16); color:var(--gold-lit); }

/* -------- 11. THE CHALKBOARD MENU — his A-board, on the web ---------------- */
.board {
  background-color:var(--board); color:var(--chalk); border-radius:var(--r-lg);
  border:3px solid var(--gold);
  padding:clamp(1.75rem,1.2rem + 3vw,3.5rem) clamp(1.1rem,.6rem + 3vw,3.5rem);
  position:relative;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.03) 0, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,.02) 0, transparent 45%);
}
/* Barber poles at the board edges — shown at EVERY width, including mobile.
   The board padding-inline below is widened enough that the menu rows always
   clear the poles (slimmer poles + more padding on phones so nothing overlaps). */
.board__poles { position:absolute; top:1.4rem; bottom:1.4rem; width:13px; display:block; }
.board__poles--l { left:11px; }
.board__poles--r { right:11px; }
.board__poles .pole { width:13px; height:100%; }
/* padding that keeps ALL content well clear of the poles (poles occupy ~11-24px each side) */
.board { padding-inline:clamp(2.9rem,1.4rem + 5vw,5.5rem); }
/* on the narrowest screens shrink the ribbon so its flag ends never reach the poles */
@media (max-width:519px){
  .board__head .ribbon, .board__foot .ribbon {
    font-size:.8rem; letter-spacing:.06em; padding:.46rem 1rem; margin-inline:12px; max-width:78%;
  }
  .board__head .ribbon .ribbon__in, .board__foot .ribbon .ribbon__in { white-space:normal; }
}
@media (min-width:700px){
  .board__poles { width:22px; top:1.75rem; bottom:1.75rem; }
  .board__poles--l { left:20px; }
  .board__poles--r { right:20px; }
  .board__poles .pole { width:22px; }
  .board { padding-inline:clamp(3.75rem,2rem + 5vw,5.5rem); }
}
.board__head { text-align:center; margin-bottom:1.75rem; position:relative; }
.board__head .orn-scissors { color:var(--gold-lit); margin-bottom:.75rem; }
.board__head h2 { font-size:clamp(2.2rem,1.5rem + 3.2vw,4rem); font-weight:700; line-height:1;
  padding-top:.1em; }
.board__head .ribbon { margin-top:1.1rem; }

.board__rows { list-style:none; margin:1.5rem auto 0; padding:0; max-width:660px; }
.board__row { display:flex; align-items:center; gap:.6rem; padding:.7rem 0; }
@media (min-width:520px){ .board__row { gap:.85rem; } }
.board__row .ico { width:30px; height:30px; color:var(--chalk); flex:none; }
@media (min-width:520px){ .board__row .ico { width:34px; height:34px; } }
.board__label { display:flex; flex-direction:column; flex:0 1 auto; min-width:0; }
.board__label b { overflow-wrap:anywhere; }
.board__label b { font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.05rem,.9rem + .6vw,1.35rem); letter-spacing:.03em; line-height:1.1; }
.board__label span { font-family:var(--f-display); font-weight:500; text-transform:uppercase;
  font-size:.92rem; letter-spacing:.07em; color:var(--gold-lit); margin-top:.15rem; }
/* the dotted leader fills the gap between label and price, like his board */
.board__leader { flex:1 1 auto; align-self:flex-end; margin-bottom:.42em; min-width:1.5rem;
  border-bottom:2px dotted rgba(224,175,92,.55); }
.board__price { flex:none; font-family:var(--f-display); font-weight:700; color:var(--gold-lit);
  font-size:clamp(1.4rem,1.1rem + 1vw,2rem); line-height:1; white-space:nowrap; }
/* the featured (Kids) row — gold dashed box, like his board */
.board__row--feature { border:2px dashed var(--gold); border-radius:var(--r); padding:.85rem 1rem; margin-block:.5rem; }
.board__foot { text-align:center; margin-top:1.75rem; }
.board__foot .script { font-family:var(--f-script); color:var(--chalk); font-size:1.6rem; }
.board__foot .ribbon { margin-top:1rem; }
.board__hours { margin-top:1.25rem; font-family:var(--f-display); text-transform:uppercase;
  letter-spacing:.06em; font-size:var(--t-sm); color:var(--chalk-soft); }
.board__addon { text-align:center; margin-top:1rem; font-size:var(--t-sm); color:var(--chalk-soft); }
.board__addon b { color:var(--gold-lit); }

/* -------- 12b. SERVICES — menu rows: photo thumbnail + details + price -----
   A refined, scannable menu with photos. Not the alternating split, not
   stacked banners, not tiles. */
.svc-menu { max-width:920px; margin-inline:auto; }
.svc-item { display:grid; gap:clamp(1.25rem,1rem + 1.5vw,2rem); align-items:center;
  padding-block:clamp(2rem,1.4rem + 2vw,2.75rem); }
.svc-item + .svc-item { border-top:2px dotted var(--cream-2); }
@media (min-width:720px){ .svc-item { grid-template-columns:300px 1fr; } }
.svc-item__thumb { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
  box-shadow:0 0 0 1px rgba(198,169,104,.3), var(--shadow); }
.svc-item__thumb img { width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 40%;
  transition:transform 600ms var(--ease); }
@media (min-width:720px){ .svc-item__thumb img { aspect-ratio:4/5; } }
.svc-item:hover .svc-item__thumb img { transform:scale(1.05); }
.svc-item__head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap; }
.svc-item__head h2 { font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem); }
.svc-item__price { font-family:var(--f-display); font-weight:700; color:var(--rust);
  font-size:clamp(1.9rem,1.4rem + 1.6vw,2.8rem); line-height:1; white-space:nowrap; }
.svc-item__price .strike { font-size:.6em; margin-right:.4rem; color:var(--ink-soft); }
.svc-item__meta { font-family:var(--f-display); text-transform:uppercase; letter-spacing:.1em;
  font-size:var(--t-sm); color:#7C5E18; margin-top:.4rem; }
.svc-item__desc { margin-top:.9rem; color:var(--ink-soft); max-width:58ch; }
.svc-item__incl { margin-top:1rem; font-size:var(--t-sm); color:var(--ink-soft); }
.svc-item__incl span { font-family:var(--f-display); text-transform:uppercase; letter-spacing:.1em;
  font-weight:600; color:var(--rust); margin-right:.5rem; }
.svc-item--value .svc-item__price { color:var(--gold); }
.tag-save { display:inline-flex; align-items:center; gap:.4rem; background:var(--rust); color:var(--cream);
  font-family:var(--f-display); font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:.35rem .8rem; border-radius:999px; margin-top:.75rem; }

/* Face-mask add-on — clean row, room to breathe */
.addon { display:flex; align-items:center; gap:clamp(1.25rem,1rem + 1.5vw,2rem);
  max-width:920px; margin:clamp(2rem,1.4rem + 2vw,3rem) auto 0;
  padding:clamp(1.5rem,1.2rem + 1.5vw,2.25rem); border-radius:var(--r-lg);
  background:var(--espresso); color:var(--chalk); border:2px dashed var(--gold-lit); }
.addon__price { font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,1.5rem + 1.5vw,2.75rem);
  color:var(--gold-lit); line-height:1; flex:none; }
.addon__body { flex:1; }
.addon__body h3 { font-size:var(--t-h4); }
.addon__body h3 span { font-family:var(--f-display); text-transform:uppercase; letter-spacing:.08em;
  font-size:.7rem; color:var(--gold-lit); font-weight:500; margin-left:.5rem; }
.addon__body p { color:var(--chalk-soft); font-size:var(--t-sm); margin-top:.4rem; }

/* -------- 12. SERVICE FEATURE ROWS (legacy split — unused after redesign) -- */
.svc { display:grid; gap:clamp(1.5rem,1rem + 3vw,3rem); align-items:center;
  padding-block:clamp(2rem,1.2rem + 3vw,3.5rem); }
.svc + .svc { border-top:2px dotted var(--paper-2); }
@media (min-width:860px){ .svc{grid-template-columns:1fr 1fr;} .svc:nth-child(even) .svc__media{order:2;} }
.svc__media { position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.svc__media img,.svc__media .ph { width:100%; aspect-ratio:5/4; object-fit:cover; transition:transform 600ms var(--ease); }
.svc__media:hover img { transform:scale(1.04); }
.svc__body { max-width:46ch; }
.svc__head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.svc__head h2 { font-size:var(--t-h3); }
.svc__price { font-family:var(--f-display); font-weight:700; color:var(--red); font-size:var(--t-h2); line-height:1; white-space:nowrap; }
.svc__meta { font-family:var(--f-display); text-transform:uppercase; letter-spacing:.1em; font-size:.85rem; color:#7C5E18; margin-top:.4rem; }
.svc__desc { margin-top:1rem; color:var(--ink-soft); }
.svc__incl { list-style:none; padding:0; margin:1.25rem 0 0; display:grid; gap:.5rem; }
.svc__incl li { display:flex; gap:.6rem; align-items:flex-start; font-size:var(--t-sm); }
.svc__incl li .orn-star { margin-top:.2em; flex:none; }
.svc--value .svc__price { color:var(--gold-deep); }
.strike { text-decoration:line-through; opacity:.5; font-weight:400; margin-right:.4rem; }

.addon { display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 1.75rem;
  padding:clamp(1.5rem,1.1rem + 1.5vw,2.25rem); border-radius:var(--r-lg);
  background:var(--espresso); color:var(--chalk); margin-top:2.5rem; border:2px dashed var(--gold-lit); }
.addon__price { font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,1.5rem + 1.5vw,2.75rem);
  color:var(--gold-lit); line-height:1; flex:none; }
.addon > div { flex:1 1 260px; }
.addon h3 { font-size:var(--t-h4); margin-bottom:.35rem; }
.addon p { color:var(--chalk-soft); font-size:var(--t-sm); }
.addon p { color:var(--chalk-soft); }
.addon .muted { color:var(--chalk-soft); }

/* -------- 13. PULL QUOTES ------------------------------------------------- */
.pull { position:relative; padding-left:clamp(1.25rem,.8rem + 2vw,2.25rem); border-left:3px solid var(--gold); }
.pull blockquote { font-family:var(--f-display); font-weight:500; text-transform:uppercase;
  font-size:var(--t-h4); line-height:1.15; letter-spacing:.01em; }
.pull cite { display:block; margin-top:.9rem; font-style:normal; font-family:var(--f-script);
  font-size:1.35rem; color:#7C5E18; }
.on-board .pull cite, .on-dark .pull cite { color:var(--gold-lit); }
.on-olive .pull cite { color:#F0D9A8; }
.pull cite span { display:block; font-family:var(--f-display); text-transform:uppercase;
  letter-spacing:.1em; font-size:.72rem; font-weight:500; opacity:.7; margin-top:.15rem; }
.quote-grid { display:grid; gap:clamp(1.5rem,1rem + 2vw,2.5rem); }
@media (min-width:820px){ .quote-grid { grid-template-columns:1fr 1fr; }
  .quote-grid > .pull:nth-child(odd){ margin-top:clamp(0rem,-2rem + 4vw,2.5rem); } }

/* -------- 14. GALLERY ----------------------------------------------------- */
.hscroll { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,68vw); gap:1rem;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut);
  padding-inline:var(--gut); padding-block:.5rem 1.5rem; margin-inline:calc(var(--gut)*-1);
  scrollbar-width:thin; scrollbar-color:var(--gold) transparent; }
@media (min-width:700px){ .hscroll{grid-auto-columns:minmax(280px,32vw);} }
@media (min-width:1100px){ .hscroll{grid-auto-columns:320px;} }
.hscroll::-webkit-scrollbar{height:6px;}
.hscroll::-webkit-scrollbar-thumb{background:var(--gold); border-radius:99px;}
.hscroll__item { scroll-snap-align:start; }
.hscroll__item img,.hscroll__item .ph { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 3px rgba(224,175,92,.3); }
.hscroll-hint { display:flex; align-items:center; gap:.5rem; font-family:var(--f-display);
  text-transform:uppercase; letter-spacing:.08em; font-size:var(--t-sm); color:var(--gold-deep); margin-top:-.5rem; }
.on-board .hscroll-hint { color:var(--gold-lit); }

.gal { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:640px){ .gal{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .gal{grid-template-columns:repeat(3,1fr);} }
.gal__fig { position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--board-2);
  box-shadow:inset 0 0 0 3px rgba(224,175,92,.28); }
.gal__fig img,.gal__fig .ph { width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; transition:transform 600ms var(--ease); }
.gal__fig:hover img { transform:scale(1.05); }
@media (min-width:640px){
  .gal__fig--tall{grid-row:span 2;} .gal__fig--tall img,.gal__fig--tall .ph{aspect-ratio:4/8.15;}
  .gal__fig--wide{grid-column:span 2;} .gal__fig--wide img,.gal__fig--wide .ph{aspect-ratio:16/10;}
}
.gal__cap { position:absolute; left:0; right:0; bottom:0; padding:2.5rem .9rem .9rem;
  background:linear-gradient(to top,rgba(23,22,19,.92),transparent); color:var(--chalk);
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.05em; font-size:var(--t-sm);
  opacity:0; transform:translateY(6px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.gal__fig:hover .gal__cap, .gal__fig:focus-within .gal__cap { opacity:1; transform:none; }
@media (hover:none){ .gal__cap{opacity:1; transform:none;} }

.filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.filter { min-height:46px; padding:.5rem 1.2rem; border-radius:var(--r); border:2px solid var(--paper-2);
  background:var(--card); font-family:var(--f-display); font-weight:500; text-transform:uppercase; letter-spacing:.06em;
  font-size:.95rem; color:var(--ink); transition:all var(--dur) var(--ease); }
.filter:hover { border-color:var(--gold); }
.filter[aria-pressed="true"] { background:var(--board); color:var(--chalk); border-color:var(--board); }
.filter__n { opacity:.55; margin-left:.35rem; font-size:.85rem; }

/* -------- 15. KIDS -------------------------------------------------------- */
.kids-band { background-color:var(--green); background-image:linear-gradient(160deg,#565E3E 0%,#3E462C 100%); color:var(--white); }
.kids-band h2 { color:var(--paper); }
.kids-band .kicker { color:#E4D3A6; }
.kids-band .pull cite { color:#E4D3A6; }
.kids-band .pull { border-left-color:var(--gold-lit); }
.kids-band .label { color:#E4D3A6; }
.kids-band { --walk-fg:var(--white); --walk-bg:var(--green); }
.perks { list-style:none; padding:0; margin:1.75rem 0 0; display:grid; gap:.875rem; }
@media (min-width:640px){ .perks{grid-template-columns:1fr 1fr;} }
.perks li { display:flex; align-items:center; gap:.75rem; font-family:var(--f-display); font-weight:500;
  text-transform:uppercase; letter-spacing:.04em; font-size:var(--t-sm);
  padding:.8rem 1rem; border-radius:var(--r); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); }
.perks li svg { width:22px; height:22px; flex:none; color:#F3D6A0; }

/* -------- 16. HOURS ------------------------------------------------------- */
.hours { list-style:none; padding:0; margin:0; }
.hours li { display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0;
  border-bottom:1px solid rgba(32,27,20,.12); font-family:var(--f-display); text-transform:uppercase;
  letter-spacing:.04em; font-size:var(--t-sm); }
.on-board .hours li { border-color:rgba(244,240,230,.14); }
.hours li[data-today="true"] { color:var(--red); font-weight:600; }
.on-board .hours li[data-today="true"], .on-dark .hours li[data-today="true"] { color:var(--gold-lit); }
.on-olive .hours li[data-today="true"], .on-green .hours li[data-today="true"] { color:#DFCB9E; }
.hours__day { display:flex; align-items:center; gap:.5rem; }
.hours__today-tag { font-size:.68rem; letter-spacing:.1em; background:var(--rust); color:var(--cream);
  padding:.15rem .5rem; border-radius:3px; font-weight:600; }
.on-board .hours__today-tag, .on-green .hours__today-tag { background:var(--gold-lit); color:var(--espresso); }

/* -------- 17. MAP --------------------------------------------------------- */
.map { border:0; width:100%; aspect-ratio:16/11; border-radius:var(--r-lg); background:var(--paper-2);
  filter:grayscale(.25) sepia(.15) contrast(1.03); box-shadow:inset 0 0 0 3px rgba(224,175,92,.3); }
@media (min-width:800px){ .map{aspect-ratio:16/9;} }

/* -------- 18. FORMS ------------------------------------------------------- */
.form { display:grid; gap:1.25rem; }
.field { display:grid; gap:.4rem; }
.field label { font-family:var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.9rem; }
.field .req { color:var(--red); }
.on-board .field .req, .on-dark .field .req { color:var(--gold-lit); }
.on-olive .field .req { color:#F0D9A8; }
.input,.textarea { width:100%; min-height:54px; padding:.85rem 1rem; border:2px solid var(--paper-2);
  border-radius:var(--r); background:var(--card); color:var(--ink);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.textarea { min-height:130px; resize:vertical; padding-top:.9rem; }
.input:hover,.textarea:hover { border-color:var(--gold); }
.input:focus,.textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(181,138,46,.28); }
.input::placeholder,.textarea::placeholder { color:color-mix(in srgb,var(--ink) 55%,transparent); }
.field[data-invalid="true"] .input,.field[data-invalid="true"] .textarea { border-color:var(--err); }
.field__err { font-family:var(--f-body); font-size:.9rem; font-weight:500; color:var(--err); display:none; align-items:center; gap:.4rem; }
.field[data-invalid="true"] .field__err { display:flex; }
.field__err::before { content:'!'; display:grid; place-items:center; width:16px; height:16px; border-radius:50%;
  background:var(--err); color:var(--paper); font-size:.65rem; font-weight:800; flex:none; }

.select { position:relative; }
.select__btn { width:100%; min-height:54px; padding:.85rem 2.75rem .85rem 1rem; border:2px solid var(--paper-2);
  border-radius:var(--r); background:var(--card); color:var(--ink); text-align:left;
  display:flex; align-items:center; justify-content:space-between; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.select__btn:hover { border-color:var(--gold); }
.select__btn[aria-expanded="true"] { border-color:var(--gold); box-shadow:0 0 0 3px rgba(181,138,46,.28); }
.select__btn[data-placeholder="true"] { color:color-mix(in srgb,var(--ink) 70%,transparent); }
.select__chev { position:absolute; right:1rem; top:50%; translate:0 -50%; width:12px; height:12px; pointer-events:none;
  color:var(--gold-deep); transition:rotate var(--dur-slow) var(--ease); }
.select__btn[aria-expanded="true"] ~ .select__chev { rotate:180deg; }
.select__list { position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0; background:var(--card);
  border:2px solid var(--gold); border-radius:var(--r); box-shadow:var(--shadow-lg); padding:.35rem; margin:0; list-style:none;
  max-height:260px; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); }
.select__list[data-open="true"] { opacity:1; visibility:visible; transform:none; }
.select__opt { padding:.6rem .75rem; border-radius:4px; cursor:pointer; font-size:var(--t-sm);
  display:flex; justify-content:space-between; gap:1rem; min-height:44px; align-items:center; }
.select__opt:hover,.select__opt[data-active="true"] { background:rgba(181,138,46,.16); }
.select__opt[aria-selected="true"] { font-weight:600; }
.select__opt span { color:var(--gold-deep); font-family:var(--f-display); font-weight:600; }

.check { display:flex; align-items:center; gap:.75rem; cursor:pointer; font-size:var(--t-sm); min-height:44px; }
.check input { position:absolute; opacity:0; width:0; height:0; }
.check__box { width:24px; height:24px; flex:none; border-radius:4px; border:2px solid var(--paper-2); background:var(--card);
  display:grid; place-items:center; transition:all var(--dur) var(--ease); }
.check__box svg { width:14px; height:14px; color:var(--board); opacity:0; transform:scale(.6); transition:all var(--dur) var(--ease); }
.check input:checked + .check__box { background:var(--gold); border-color:var(--gold); }
.check input:checked + .check__box svg { opacity:1; transform:none; }
.check input:focus-visible + .check__box { outline:3px solid var(--red); outline-offset:2px; }

.btn[data-loading="true"] { pointer-events:none; opacity:.75; }
.btn__spin { width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; display:none; }
.btn[data-loading="true"] .btn__spin { display:block; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }

/* -------- 19. MODAL + TOAST ----------------------------------------------- */
.modal { position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:var(--gut);
  opacity:0; visibility:hidden; transition:opacity var(--dur-slow) var(--ease), visibility var(--dur-slow); }
.modal[data-open="true"] { opacity:1; visibility:visible; }
.modal__scrim { position:absolute; inset:0; background:rgba(23,22,19,.72); backdrop-filter:blur(6px); }
.modal__panel { position:relative; z-index:1; width:100%; max-width:480px; background:var(--card); border-radius:var(--r-lg);
  padding:clamp(1.5rem,1rem + 2vw,2.25rem); box-shadow:var(--shadow-lg); border-top:5px solid var(--gold);
  transform:translateY(12px) scale(.98); transition:transform var(--dur-slow) var(--ease); max-height:86vh; overflow-y:auto; }
.modal[data-open="true"] .modal__panel { transform:none; }
.modal__close { position:absolute; top:.75rem; right:.75rem; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:var(--ink); transition:background-color var(--dur) var(--ease); }
.modal__close:hover { background:var(--paper-2); }
.modal__close svg { width:18px; height:18px; }
.modal h3 { margin-bottom:.6rem; padding-right:2.5rem; font-size:var(--t-h3); }
.modal p { color:var(--ink-soft); font-size:var(--t-sm); }
.modal__cta { display:grid; gap:.6rem; margin-top:1.5rem; }

.toast-host { position:fixed; z-index:200; bottom:0; left:0; right:0; padding:var(--gut); display:grid; gap:.6rem; justify-items:center; pointer-events:none; }
@media (min-width:700px){ .toast-host{left:auto; bottom:1.25rem; right:1.25rem; justify-items:end; padding:0;} }
.toast { pointer-events:auto; display:flex; align-items:center; gap:.75rem; background:var(--board); color:var(--chalk);
  padding:.9rem 1.15rem; border-radius:var(--r); box-shadow:var(--shadow-lg); border-left:4px solid var(--gold);
  font-size:var(--t-sm); max-width:400px; animation:toast-in var(--dur-slow) var(--ease); }
.toast[data-kind="err"] { border-left-color:var(--red); }
.toast svg { width:18px; height:18px; flex:none; color:var(--gold-lit); }
@keyframes toast-in { from{opacity:0; transform:translateY(12px);} }
.toast[data-leaving="true"] { animation:toast-out var(--dur-slow) var(--ease) forwards; }
@keyframes toast-out { to{opacity:0; transform:translateY(8px);} }

/* -------- 20. FAQ --------------------------------------------------------- */
.faq { border-top:2px dotted var(--paper-2); }
.on-board .faq { border-color:rgba(244,240,230,.16); }
.faq__item { border-bottom:2px dotted var(--paper-2); }
.on-board .faq__item { border-color:rgba(244,240,230,.16); }
.faq__q { width:100%; text-align:left; padding:1.25rem 2.5rem 1.25rem 0; position:relative;
  font-family:var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:.02em;
  font-size:var(--t-h4); color:var(--ink); line-height:1.15; transition:color var(--dur) var(--ease); }
.on-board .faq__q { color:var(--chalk); }
.faq__q:hover { color:var(--red); }
.on-board .faq__q:hover { color:var(--gold-lit); }
.faq__sign { position:absolute; right:0; top:50%; translate:0 -50%; width:16px; height:16px; color:var(--gold-deep); }
.on-board .faq__sign { color:var(--gold-lit); }
.faq__sign::before,.faq__sign::after { content:''; position:absolute; background:currentColor; border-radius:2px; transition:transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease); }
.faq__sign::before { top:7px; left:0; width:16px; height:2px; }
.faq__sign::after { left:7px; top:0; width:2px; height:16px; }
.faq__q[aria-expanded="true"] .faq__sign::after { transform:rotate(90deg); opacity:0; }
.faq__a { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-slow) var(--ease); }
.faq__a > div { overflow:hidden; }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows:1fr; }
.faq__a p { padding-bottom:1.25rem; color:var(--ink-soft); max-width:62ch; }
.on-board .faq__a p { color:var(--chalk-soft); }
.faq__a a { color:var(--red); text-underline-offset:3px; }
.on-board .faq__a a { color:var(--gold-lit); }

/* -------- 21. STICKY MOBILE CTA ------------------------------------------- */
.sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
  padding:.625rem var(--gut) calc(.625rem + env(safe-area-inset-bottom)); background:var(--board);
  border-top:3px solid var(--gold); transform:translateY(110%); transition:transform var(--dur-slow) var(--ease); }
.sticky-cta[data-show="true"] { transform:none; }
.sticky-cta .btn { min-height:48px; font-size:.95rem; padding-inline:.75rem; }
@media (min-width:1000px){ .sticky-cta{display:none;} }
@media (max-width:999px){ body[data-sticky="true"]{padding-bottom:78px;} }

/* -------- 22. FOOTER ------------------------------------------------------ */
.site-footer { background-color:var(--board); color:var(--chalk); padding-block:var(--sec) 2rem; border-top:3px solid var(--gold);
  background-image:radial-gradient(circle at 12% 10%, rgba(255,255,255,.025) 0, transparent 40%); }
.footer-grid { display:grid; gap:2.5rem; }
@media (min-width:760px){ .footer-grid{grid-template-columns:1.6fr 1fr 1.3fr;} }
@media (min-width:1040px){ .footer-grid{grid-template-columns:1.8fr 1fr 1.3fr;} }
.site-footer h4 { font-family:var(--f-display); font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lit); margin-bottom:1.1rem; }
.footer-list { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; font-size:var(--t-sm); }
.footer-list a { color:var(--chalk-soft); text-decoration:none; transition:color var(--dur) var(--ease); }
.footer-list a:hover { color:var(--gold-lit); }
.footer-brand__badge { width:72px; height:72px; border-radius:50%; margin-bottom:1rem; box-shadow:0 0 0 3px rgba(224,175,92,.3); }
.footer-brand p { font-size:var(--t-sm); color:var(--chalk-soft); max-width:34ch; }
.footer-brand .script { font-family:var(--f-script); color:var(--gold-lit); font-size:1.5rem; }
.socials { display:flex; gap:.6rem; margin-top:1.25rem; }
.socials a { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; border:2px solid rgba(224,175,92,.4); color:var(--gold-lit); transition:all var(--dur) var(--ease); }
.socials a:hover { background:var(--gold); color:var(--board); border-color:var(--gold); transform:translateY(-2px); }
.socials svg { width:19px; height:19px; }
.footer-areas { margin-top:2.5rem; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.06em; font-size:var(--t-sm); color:var(--chalk-soft); }
.footer-areas a { color:var(--chalk-soft); text-decoration:none; }
.footer-areas a:hover { color:var(--gold-lit); }
.footer-bottom { margin-top:1.25rem; padding-top:1.5rem; border-top:1px solid rgba(244,240,230,.14);
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between; font-size:.85rem; color:var(--chalk-soft); }
.footer-bottom a { color:var(--chalk-soft); }
.footer-bottom a:hover { color:var(--gold-lit); }

/* -------- 23. BREADCRUMBS + PAGE HEAD ------------------------------------- */
.crumbs { font-family:var(--f-display); text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; padding-block:1rem 0; }
.crumbs ol { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.crumbs li { display:flex; align-items:center; gap:.5rem; color:var(--chalk-soft); }
.crumbs li + li::before { content:'/'; opacity:.4; }
.crumbs a { color:var(--chalk-soft); text-decoration:none; }
.crumbs a:hover { color:var(--gold-lit); }
.crumbs [aria-current="page"] { color:var(--chalk); }

.page-head { background-color:var(--board); color:var(--chalk); padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem); position:relative; overflow:hidden; border-bottom:3px solid var(--gold);
  background-image:radial-gradient(100% 90% at 88% 0%, rgba(224,175,92,.16) 0, transparent 58%); }
.page-head__rail { position:absolute; left:16px; top:1.25rem; bottom:1.25rem; width:16px; display:none; }
@media (min-width:1000px){ .page-head__rail { display:block; } }
.page-head__rail .pole { width:16px; height:100%; }
.page-head > .wrap { position:relative; }
.page-head h1 { margin-top:1rem; font-size:clamp(2.6rem,1.9rem + 3.6vw,5rem); font-weight:700; }
.page-head__sub { font-size:var(--t-lead); max-width:52ch; margin-top:1.1rem; color:var(--chalk-soft); }

/* -------- 24. SUBURB / NEARBY --------------------------------------------- */
.dist { display:flex; flex-wrap:wrap; gap:.625rem; list-style:none; padding:0; margin:1.5rem 0 0; }
.dist li { display:flex; align-items:center; gap:.5rem; font-family:var(--f-display); font-weight:500; text-transform:uppercase; letter-spacing:.05em; font-size:var(--t-sm);
  padding:.5rem .9rem; border-radius:var(--r); background:rgba(181,138,46,.14); border:1px solid rgba(181,138,46,.34); color:var(--gold-deep); }
.on-board .dist li { color:var(--gold-lit); background:rgba(224,175,92,.14); border-color:rgba(224,175,92,.3); }
.nearby { display:flex; flex-wrap:wrap; gap:.5rem; }
.nearby a { font-family:var(--f-display); text-transform:uppercase; letter-spacing:.05em; font-size:var(--t-sm);
  padding:.5rem 1rem; border-radius:var(--r); border:2px solid var(--paper-2); text-decoration:none; color:var(--ink);
  min-height:44px; display:inline-flex; align-items:center; transition:all var(--dur) var(--ease); }
.nearby a:hover { border-color:var(--gold); background:rgba(181,138,46,.1); }

/* -------- 25. 404 --------------------------------------------------------- */
.err-page { min-height:60vh; display:grid; place-items:center; text-align:center; }
.err-code { font-family:var(--f-display); font-weight:700; font-size:clamp(5rem,3rem + 14vw,12rem); line-height:.82; color:#7C5E18; }

/* -------- 26. MOTION ------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  [data-anim] { opacity:0; transform:translateY(16px); }
  [data-anim].is-in { opacity:1; transform:none; transition:opacity 500ms var(--ease), transform 500ms var(--ease); }
  [data-anim][data-delay="1"].is-in { transition-delay:80ms; }
  [data-anim][data-delay="2"].is-in { transition-delay:160ms; }
  [data-anim][data-delay="3"].is-in { transition-delay:240ms; }
  [data-anim][data-delay="4"].is-in { transition-delay:320ms; }
  :target { animation:arrive 1.6s var(--ease); }
  @keyframes arrive { 0%,100%{background-color:transparent;} 18%{background-color:rgba(181,138,46,.16);} }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  [data-anim]{opacity:1; transform:none;}
  .pole__stripes{animation:none;}
}

/* -------- 27. PRINT ------------------------------------------------------- */
@media print {
  .site-header,.sticky-cta,.drawer,.toast-host,.modal{display:none!important;}
  body{background:#fff; color:#000;}
  .on-board,.hero,.site-footer,.board{background:#fff!important; color:#000!important;}
}