/* ============================================================
   KINGSLAND BARBER CO. — vintage heritage barbershop template
   Palette: bottle green / aged cream / brass / oxblood
   ============================================================ */
:root{
  --green:      #173B2C;
  --green-deep: #0F2A1F;
  --green-soft: #1E4A38;
  --cream:      #F2E9D8;
  --cream-soft: #E9DEC8;
  --cream-dim:  #D8CBB2;
  --brass:      #C9A24B;
  --brass-soft: #DDBE74;
  --brass-deep: #8a6c2b;
  --oxblood:    #6E2B25;
  --oxblood-lt: #8A3A32;
  --ink:        #21281F;

  --display: "Bebas Neue", "Arial Narrow", sans-serif;
  --body:    "Crimson Text", Georgia, serif;
  --crest:   "Rye", "Georgia", serif;

  /* Paper grain, generated in-file — no external assets */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  /* Corner flourishes for framed panels — one glyph, four rotations */
  --c-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23C9A24B'%3E%3Cpath d='M2 42 V13 Q2 2 13 2 H42' stroke-width='1.6'/%3E%3Cpath d='M8.5 42 V17 Q8.5 8.5 17 8.5 H42' stroke-width='1' opacity='.5'/%3E%3C/g%3E%3Cpath d='M13 7.5 L18.5 13 L13 18.5 L7.5 13 Z' fill='%23C9A24B'/%3E%3C/svg%3E");
  --c-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg transform='rotate(90 22 22)'%3E%3Cg fill='none' stroke='%23C9A24B'%3E%3Cpath d='M2 42 V13 Q2 2 13 2 H42' stroke-width='1.6'/%3E%3Cpath d='M8.5 42 V17 Q8.5 8.5 17 8.5 H42' stroke-width='1' opacity='.5'/%3E%3C/g%3E%3Cpath d='M13 7.5 L18.5 13 L13 18.5 L7.5 13 Z' fill='%23C9A24B'/%3E%3C/g%3E%3C/svg%3E");
  --c-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg transform='rotate(180 22 22)'%3E%3Cg fill='none' stroke='%23C9A24B'%3E%3Cpath d='M2 42 V13 Q2 2 13 2 H42' stroke-width='1.6'/%3E%3Cpath d='M8.5 42 V17 Q8.5 8.5 17 8.5 H42' stroke-width='1' opacity='.5'/%3E%3C/g%3E%3Cpath d='M13 7.5 L18.5 13 L13 18.5 L7.5 13 Z' fill='%23C9A24B'/%3E%3C/g%3E%3C/svg%3E");
  --c-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg transform='rotate(270 22 22)'%3E%3Cg fill='none' stroke='%23C9A24B'%3E%3Cpath d='M2 42 V13 Q2 2 13 2 H42' stroke-width='1.6'/%3E%3Cpath d='M8.5 42 V17 Q8.5 8.5 17 8.5 H42' stroke-width='1' opacity='.5'/%3E%3C/g%3E%3Cpath d='M13 7.5 L18.5 13 L13 18.5 L7.5 13 Z' fill='%23C9A24B'/%3E%3C/g%3E%3C/svg%3E");

  /* Faint halftone dot screen for dark sections */
  --halftone: radial-gradient(rgba(242,233,216,.045) 1px, transparent 1.4px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; }
html,body{ overflow-x:hidden; overflow-x:clip; } /* clip where supported, hidden fallback */
main [id]{ scroll-margin-top:5.5rem; }

/* custom scrollbar — brass on green, subtle */
html{ scrollbar-color:var(--brass-deep) var(--green-deep); scrollbar-width:thin; }
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:var(--green-deep); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--brass-soft), var(--brass) 40%, var(--brass-deep));
  border:3px solid var(--green-deep);
  border-radius:6px;
}
::-webkit-scrollbar-thumb:hover{ background:var(--brass); border-width:2px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  font-family:var(--body);
  font-size:1.125rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  position:relative;
}
/* whole-page paper grain */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:var(--grain);
  opacity:.05;
  pointer-events:none;
  z-index:9999;
  mix-blend-mode:multiply;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; }

/* skip link — hidden until keyboard focus */
.skip-link{
  position:absolute; top:0; left:50%;
  transform:translate(-50%,-130%);
  z-index:300;
  background:var(--brass);
  color:var(--green-deep);
  font-family:var(--display);
  font-size:1rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.7rem 1.5rem .55rem;
  border:1px solid var(--brass-deep);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition:transform .2s ease;
}
.skip-link:focus,.skip-link:focus-visible{ transform:translate(-50%,0); }
:focus-visible{ outline:3px solid var(--brass); outline-offset:3px; }
.on-dark :focus-visible{ outline-color:var(--brass-soft); }
::selection{ background:var(--brass); color:var(--green-deep); }

h1,h2,h3{ font-family:var(--display); font-weight:400; letter-spacing:.05em; line-height:1.02; text-wrap:balance; }

.wrap{ width:min(1120px, 92%); margin-inline:auto; }

/* ---------- shared ornament: eyebrow + scissors divider ---------- */
.eyebrow{
  font-family:var(--display);
  font-size:.95rem;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--oxblood);
  display:flex; align-items:center; justify-content:center; gap:.9rem;
  margin-bottom:.75rem;
}
.eyebrow::before,.eyebrow::after{
  content:""; height:1px; width:2.6rem;
  background:linear-gradient(90deg, transparent, currentColor);
  opacity:.55;
}
.eyebrow::after{ background:linear-gradient(90deg, currentColor, transparent); }
.on-dark .eyebrow{ color:var(--brass); }

.section-title{
  font-size:clamp(2.4rem, 5.4vw, 3.6rem);
  letter-spacing:.06em;
  text-align:center;
  color:var(--green);
  margin-bottom:.5rem;
}
.on-dark .section-title{ color:var(--cream); text-shadow:0 2px 0 rgba(0,0,0,.25); }

.section-lede{
  max-width:38rem;
  margin:0 auto 2.8rem;
  text-align:center;
  font-size:1.15rem;
  color:var(--ink);
  opacity:.85;
}
.on-dark .section-lede{ color:var(--cream-soft); opacity:.9; }

.divider{ display:flex; justify-content:center; margin:.35rem auto 2.2rem; color:var(--brass); }
.divider svg{ overflow:visible; }

section{ padding:5.5rem 0; }
@media (max-width: 640px){
  section{ padding:4rem 0; }
  .section-lede{ margin-bottom:2.2rem; }
}

/* ---------- double-rule frame helper, now with corner flourishes ---------- */
.double-rule{
  border:1px solid var(--brass);
  position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 30px rgba(23,59,44,.08);
}
.double-rule::after{
  content:""; position:absolute; inset:5px;
  border:1px solid var(--brass);
  opacity:.55; pointer-events:none;
}
.double-rule::before{
  content:""; position:absolute; inset:0;
  background-image:var(--c-tl), var(--c-tr), var(--c-br), var(--c-bl);
  background-repeat:no-repeat;
  background-position:top 11px left 11px, top 11px right 11px, bottom 11px right 11px, bottom 11px left 11px;
  background-size:38px 38px;
  pointer-events:none;
  z-index:1;
}

/* ---------- gentle reveal-on-scroll (motion-safe only) ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.7,.35,1); }
  .reveal.in{ opacity:1; transform:none; }
  .reveal:nth-child(2){ transition-delay:.08s; }
  .reveal:nth-child(3){ transition-delay:.16s; }
  .reveal:nth-child(4){ transition-delay:.24s; }
}

/* ============ ANNOUNCEMENT BAR ============ */
.announce{
  background:var(--oxblood);
  background-image:linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,0) 45%), var(--grain);
  background-blend-mode:normal, overlay;
  color:var(--cream);
  font-family:var(--display);
  letter-spacing:.24em;
  font-size:.85rem;
  text-transform:uppercase;
  text-align:center;
  padding:.55rem 1rem;
  border-bottom:2px solid var(--brass);
}
.announce b{ color:var(--brass-soft); font-weight:400; }

/* ============ NAV ============ */
header.site{
  background:var(--green);
  background-image:var(--grain);
  background-blend-mode:overlay;
  color:var(--cream);
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid rgba(201,162,75,.45);
  box-shadow:0 2px 14px rgba(15,42,31,.35);
}
header.site::after{
  content:""; display:block; height:3px;
  background:repeating-linear-gradient(90deg, var(--brass) 0 14px, transparent 14px 22px);
  opacity:.35;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 0;
  gap:1rem;
}
.brand{
  display:flex; align-items:center; gap:.8rem;
  text-decoration:none;
}
.brand svg{ width:54px; height:54px; flex:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); transition:transform .3s ease; }
.brand:hover svg{ transform:rotate(-4deg); }
.brand-name{
  font-family:var(--crest);
  font-size:1.05rem;
  letter-spacing:.06em;
  line-height:1.15;
  color:var(--cream);
}
.brand-name small{
  display:block;
  font-family:var(--display);
  font-size:.68rem;
  letter-spacing:.46em;
  color:var(--brass);
}
.nav-links{
  display:flex; gap:2rem; list-style:none; align-items:center;
}
.nav-links a{
  font-family:var(--display);
  font-size:1.02rem;
  letter-spacing:.2em;
  text-decoration:none;
  color:var(--cream);
  padding:.35rem 0;
  position:relative;
  transition:color .25s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:2px; background:var(--brass);
  transition:right .28s ease;
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{ right:0; }
.nav-links a:hover{ color:var(--brass-soft); }
.nav-cta{
  border:1px solid var(--brass) !important;
  padding:.45rem 1.1rem !important;
  color:var(--brass-soft) !important;
  box-shadow:inset 0 0 0 3px var(--green), inset 0 0 0 4px rgba(201,162,75,.5);
  transition:background .25s ease, color .25s ease !important;
}
.nav-cta:hover{ background:var(--brass); color:var(--green-deep) !important; }
.nav-cta:active{ transform:translateY(1px); }
.nav-cta::after{ display:none; }

/* hamburger */
.burger{
  display:none;
  background:none; border:1px solid var(--brass);
  width:46px; height:42px;
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.burger span{
  display:block; width:22px; height:2px; background:var(--cream);
  transition:transform .25s ease, opacity .25s ease;
}
.burger:hover span{ background:var(--brass-soft); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

@media (max-width: 860px){
  .burger{ display:flex; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--green-deep);
    background-image:var(--grain);
    background-blend-mode:overlay;
    flex-direction:column; gap:0;
    border-bottom:2px solid var(--brass);
    display:none;
    padding:.5rem 0 1rem;
    box-shadow:0 18px 30px rgba(0,0,0,.35);
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; text-align:center; }
  .nav-links a{ display:block; padding:.8rem 0; }
  .nav-links a::after{ display:none; }
  .nav-cta{ display:inline-block !important; margin-top:.6rem; }
}

/* ============ HERO ============ */
.hero{
  background:var(--green);
  background-image:
    radial-gradient(ellipse at 50% -20%, rgba(201,162,75,.18), transparent 55%),
    radial-gradient(ellipse at 50% 118%, rgba(15,42,31,.9), transparent 62%),
    var(--halftone),
    var(--grain);
  background-size:auto, auto, 7px 7px, auto;
  background-blend-mode:normal, normal, normal, overlay;
  color:var(--cream);
  padding:5.6rem 0 6.4rem;
  overflow:hidden;
  position:relative;
}
/* layered poster frame: outer rule + inner rule + corner marks */
.hero-frame{
  position:absolute; inset:16px;
  border:1px solid rgba(201,162,75,.55);
  pointer-events:none;
}
.hero-frame::before{
  content:""; position:absolute; inset:6px;
  border:1px solid rgba(201,162,75,.28);
}
.hero-frame::after{
  content:""; position:absolute; inset:0;
  background-image:var(--c-tl), var(--c-tr), var(--c-br), var(--c-bl);
  background-repeat:no-repeat;
  background-position:top 12px left 12px, top 12px right 12px, bottom 12px right 12px, bottom 12px left 12px;
  background-size:40px 40px;
  opacity:.9;
}
/* big watermark roundel behind the composition */
.hero-mark{
  position:absolute;
  right:-140px; top:50%;
  width:560px; height:560px;
  transform:translateY(-50%);
  opacity:.05;
  pointer-events:none;
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:3.5rem;
  position:relative;
  z-index:2;
}
.hero-est{
  font-family:var(--display);
  letter-spacing:.44em;
  color:var(--brass);
  font-size:1rem;
  display:flex; align-items:center; gap:1rem;
  margin-bottom:1.4rem;
  text-transform:uppercase;
}
.hero-est::before,.hero-est::after{ content:""; height:1px; width:3rem; background:linear-gradient(90deg, transparent, var(--brass)); opacity:.7; }
.hero-est::after{ background:linear-gradient(90deg, var(--brass), transparent); }
.hero h1{
  font-size:clamp(3.4rem, 8.5vw, 6.6rem);
  color:var(--cream);
  letter-spacing:.035em;
  margin-bottom:1.2rem;
  text-shadow:0 3px 0 rgba(15,42,31,.85), 0 6px 18px rgba(0,0,0,.3);
}
.hero h1 em{
  font-style:normal;
  color:var(--brass);
  position:relative;
  display:inline-block;
}
.hero h1 em::after{
  content:""; position:absolute; left:2px; right:2px; bottom:-.12em;
  height:3px;
  background:
    linear-gradient(90deg, transparent, var(--brass) 18%, var(--brass) 82%, transparent);
  opacity:.7;
}
.hero p.lede{
  font-size:1.25rem;
  max-width:32rem;
  color:var(--cream-soft);
  margin-bottom:2.2rem;
}
.btn{
  display:inline-block;
  font-family:var(--display);
  font-size:1.15rem;
  letter-spacing:.22em;
  text-decoration:none;
  padding:.85rem 2.2rem .75rem;
  border:1px solid var(--brass);
  color:var(--green-deep);
  background:linear-gradient(var(--brass-soft), var(--brass) 45%, var(--brass));
  box-shadow:
    inset 0 0 0 2px var(--green-deep),
    inset 0 0 0 3px var(--brass),
    0 4px 0 var(--brass-deep),
    0 8px 18px rgba(0,0,0,.28);
  transition:background .25s ease, color .25s ease, transform .15s ease, box-shadow .15s ease;
  cursor:pointer;
  position:relative;
  top:0;
}
.btn:hover,.btn:focus-visible{ background:var(--brass-soft); }
.btn:active{
  transform:translateY(3px);
  box-shadow:
    inset 0 0 0 2px var(--green-deep),
    inset 0 0 0 3px var(--brass),
    0 1px 0 var(--brass-deep),
    0 2px 6px rgba(0,0,0,.28);
}
.btn.ghost{
  background:transparent; color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.0);
  transition:color .25s ease, box-shadow .25s ease, transform .15s ease;
}
.btn.ghost:hover{ color:var(--brass-soft); box-shadow:inset 0 0 0 1px rgba(201,162,75,.55); }
.btn.ghost:active{ transform:translateY(2px); }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.hero-note{
  margin-top:1.6rem;
  font-style:italic;
  color:var(--cream-dim);
  font-size:1rem;
}
.hero-note::before{
  content:"✳";
  color:var(--brass);
  margin-right:.5rem;
  font-style:normal;
  font-size:.85em;
}

/* barber pole — polished focal element */
.pole-wrap{ display:flex; flex-direction:column; align-items:center; gap:.9rem; position:relative; }
.pole-wrap::before{
  content:"";
  position:absolute; top:44%; left:50%;
  width:300px; height:300px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(201,162,75,.16), transparent 62%);
  pointer-events:none;
}
.pole-caption{
  font-family:var(--display);
  letter-spacing:.32em;
  font-size:.8rem;
  color:var(--brass);
  text-transform:uppercase;
  display:flex; align-items:center; gap:.7rem;
  transition:color .3s ease;
}
.pole-caption::before,.pole-caption::after{ content:"◆"; font-size:.5rem; opacity:.8; }
.pole{ width:126px; height:auto; filter:drop-shadow(0 14px 26px rgba(0,0,0,.45)); position:relative; }
.pole-stripes{ animation:pole-turn 3.2s linear infinite; }
/* Signature moment: hovering (or focusing) any "Book a Chair" CTA spins the
   pole faster. A second, normally-paused 56px loop on the parent group adds
   its speed on top of the base loop — pausing/resuming a looping transform
   can never cause a visual jump, so the boost engages seamlessly. */
.pole-boost{ animation:pole-turn 2.4s linear infinite; animation-play-state:paused; }
body.pole-fast .pole-boost{ animation-play-state:running; }
body.pole-fast .pole-caption{ color:var(--brass-soft); }
@keyframes pole-turn{
  from{ transform:translateY(0); }
  to{ transform:translateY(56px); }
}

@media (max-width: 860px){
  .hero{ padding:4.4rem 0 5.2rem; }
  .hero-frame{ inset:10px; }
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-est,.hero-actions{ justify-content:center; }
  .hero p.lede{ margin-inline:auto; }
  .pole-wrap{ order:-1; }
  .pole{ width:88px; }
  .hero-mark{ display:none; }
}

/* ============ SERVICES / PRICE LIST ============ */
.services{ background:var(--cream); position:relative; }
.menu-board{
  background:var(--cream-soft);
  background-image:var(--grain);
  background-blend-mode:multiply;
  padding:3.2rem clamp(1.2rem, 5vw, 3.5rem) 3.2rem;
}
.menu-head{
  text-align:center;
  font-family:var(--display);
  letter-spacing:.4em;
  font-size:.85rem;
  color:var(--oxblood);
  text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:1rem;
}
.menu-head::before,.menu-head::after{ content:""; height:1px; flex:0 1 5rem; background:currentColor; opacity:.35; }
.menu-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 3.5rem;
  margin-top:1.4rem;
}
.menu-item{
  padding:1.1rem .85rem 1.1rem .75rem;
  margin-inline:-.75rem;
  border-bottom:1px solid rgba(23,59,44,.14);
  position:relative;
  transition:background-color .25s ease;
}
.menu-item::before{
  content:""; position:absolute; left:0; top:14%; bottom:14%;
  width:3px; background:var(--brass);
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .25s ease;
}
.menu-item:hover{ background:rgba(201,162,75,.13); }
.menu-item:hover::before{ transform:scaleY(1); }
.menu-line{
  display:flex; align-items:baseline; gap:.6rem;
}
.menu-ico{
  align-self:center;
  flex:none;
  width:26px; height:26px;
  color:var(--brass-deep);
  transition:color .25s ease, transform .25s ease;
}
.menu-ico svg{ width:100%; height:100%; }
.menu-item:hover .menu-ico{ color:var(--oxblood); transform:rotate(-6deg); }
.menu-name{
  font-family:var(--display);
  font-size:1.35rem;
  letter-spacing:.1em;
  color:var(--green);
  white-space:nowrap;
}
.menu-dots{
  flex:1;
  min-width:1.5rem;
  align-self:baseline;
  height:2px;
  background-image:radial-gradient(circle, rgba(110,43,37,.6) 1px, transparent 1.5px);
  background-size:7px 2px;
  background-repeat:repeat-x;
  background-position:center;
  transform:translateY(-5px);
}
.menu-price{
  font-family:var(--display);
  font-size:1.35rem;
  letter-spacing:.05em;
  color:var(--oxblood);
  white-space:nowrap;
}
.menu-desc{ font-size:1rem; color:var(--ink); opacity:.78; margin-top:.15rem; font-style:italic; padding-left:calc(26px + .6rem); }
.menu-foot{
  text-align:center;
  margin-top:2rem;
  font-style:italic;
  color:var(--oxblood);
}
@media (max-width: 720px){
  .menu-cols{ grid-template-columns:1fr; }
  .menu-desc{ padding-left:0; }
}

/* ============ STORY SPLIT ============ */
.story{
  background:var(--green);
  background-image:var(--halftone), var(--grain);
  background-size:7px 7px, auto;
  background-blend-mode:normal, overlay;
  color:var(--cream);
  position:relative;
  border-top:3px solid var(--brass);
  border-bottom:3px solid var(--brass);
}
.story-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:3.5rem;
  align-items:center;
}
.story h2{
  font-size:clamp(2.4rem, 5vw, 3.4rem);
  color:var(--cream);
  margin-bottom:1.2rem;
  text-shadow:0 2px 0 rgba(0,0,0,.25);
}
.story h2 em{ font-style:normal; color:var(--brass); }
.story p{ color:var(--cream-soft); margin-bottom:1.1rem; }
.story blockquote{
  border-left:3px double var(--brass);
  padding-left:1.2rem;
  margin:1.6rem 0 0;
  font-style:italic;
  color:var(--brass-soft);
  font-size:1.2rem;
  position:relative;
}
.story blockquote::before{
  content:"“";
  font-family:Georgia, serif;
  position:absolute; left:-.35rem; top:-1.3rem;
  font-size:3rem;
  color:var(--brass);
  opacity:.35;
}
.story blockquote footer{ font-style:normal; font-family:var(--display); letter-spacing:.22em; font-size:.85rem; margin-top:.4rem; color:var(--cream-dim); }
.story-visual{ display:flex; justify-content:center; }
.story-visual svg{ width:100%; max-width:440px; height:auto; filter:drop-shadow(0 16px 30px rgba(0,0,0,.35)); }
@media (max-width: 860px){
  .story-grid{ grid-template-columns:1fr; }
  .story-visual{ order:-1; }
}

/* ============ BARBERS ============ */
.barbers{ background:var(--cream); }
.crew{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
}
.barber-card{
  background:var(--cream-soft);
  background-image:var(--grain);
  background-blend-mode:multiply;
  text-align:center;
  padding:2.2rem 1.3rem 1.8rem;
  transition:transform .25s ease, box-shadow .25s ease;
  position:relative;
  border:1px solid rgba(201,162,75,.45);
}
.barber-card::after{
  content:""; position:absolute; inset:5px;
  border:1px solid rgba(201,162,75,.4);
  pointer-events:none;
  transition:border-color .25s ease;
}
.barber-card:hover{ transform:translateY(-5px); box-shadow:0 14px 28px rgba(23,59,44,.16); border-color:var(--brass); }
.barber-card:hover::after{ border-color:var(--brass); }
/* chair-number ticket badge — each barber gets their chair */
.chair-badge{
  position:absolute; top:12px; right:12px;
  font-family:var(--display);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--oxblood);
  border:1px solid rgba(110,43,37,.5);
  box-shadow:inset 0 0 0 2px var(--cream-soft), inset 0 0 0 3px rgba(110,43,37,.25);
  background:rgba(242,233,216,.55);
  padding:.28rem .55rem .16rem;
  transform:rotate(6deg);
  transition:transform .25s ease, color .25s ease, border-color .25s ease;
  z-index:2;
}
.barber-card:hover .chair-badge{ transform:rotate(0deg) scale(1.04); border-color:var(--brass-deep); }
.avatar{
  width:96px; height:96px;
  margin:0 auto 1.1rem;
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%, var(--green-soft), var(--green) 68%);
  color:var(--brass);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--crest);
  font-size:2rem;
  border:2px solid var(--brass);
  box-shadow:0 0 0 5px var(--cream-soft), 0 0 0 6px var(--brass);
  transition:transform .3s ease, box-shadow .3s ease;
}
.barber-card:hover .avatar{ transform:rotate(-3deg) scale(1.03); box-shadow:0 0 0 5px var(--cream-soft), 0 0 0 6px var(--brass), 0 8px 16px rgba(23,59,44,.22); }
.avatar.ox{ background:radial-gradient(circle at 34% 28%, var(--oxblood-lt), var(--oxblood) 68%); }
.barber-card h3{ font-size:1.5rem; color:var(--green); letter-spacing:.09em; }
.barber-role{
  font-family:var(--display);
  font-size:.8rem;
  letter-spacing:.32em;
  color:var(--oxblood);
  margin:.3rem 0 .7rem;
  text-transform:uppercase;
}
.barber-card p{ font-size:.98rem; opacity:.82; }
.barber-rule{
  width:2.4rem; height:2px; background:var(--brass);
  margin:.8rem auto 0;
  transition:width .3s ease;
  position:relative;
}
.barber-rule::after{
  content:"◆"; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-52%);
  font-size:.5rem; color:var(--brass);
  background:var(--cream-soft);
  padding-inline:.3rem;
}
.barber-card:hover .barber-rule{ width:4.5rem; }
@media (max-width: 980px){ .crew{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 520px){ .crew{ grid-template-columns:1fr; } }

/* ============ GALLERY STRIP ============ */
.gallery{
  background:var(--green-deep);
  background-image:var(--halftone), var(--grain);
  background-size:7px 7px, auto;
  background-blend-mode:normal, overlay;
  padding:4.2rem 0;
}
.tiles{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:.8rem;
}
.tile{
  aspect-ratio:1;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(201,162,75,.4);
  box-shadow:inset 0 0 0 1px rgba(15,42,31,.5);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.tile:hover{ transform:scale(1.035); border-color:var(--brass); z-index:2; box-shadow:0 10px 22px rgba(0,0,0,.4); }
.tile svg{ width:100%; height:100%; transition:transform .5s ease; }
.tile:hover svg{ transform:scale(1.06); }
.tile figcaption{
  position:absolute; inset:auto 0 0 0;
  font-family:var(--display);
  font-size:.72rem;
  letter-spacing:.28em;
  text-align:center;
  color:var(--brass);
  background:linear-gradient(transparent, rgba(15,42,31,.92));
  padding:1.4rem .3rem .45rem;
  opacity:0;
  transition:opacity .3s ease;
  text-transform:uppercase;
}
.tile:hover figcaption{ opacity:1; }
@media (max-width: 900px){ .tiles{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 520px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
/* fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 1){
  .tile::after{ content:""; display:block; padding-top:100%; }
  .tile svg{ position:absolute; inset:0; height:100%; }
}

/* ============ LOYALTY BANNER ============ */
.loyalty{
  background:var(--oxblood);
  background-image:var(--halftone), var(--grain);
  background-size:7px 7px, auto;
  background-blend-mode:normal, overlay;
  color:var(--cream);
  border-top:3px solid var(--brass);
  border-bottom:3px solid var(--brass);
}
.loyalty-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:3rem;
  align-items:center;
}
.loyalty h2{ font-size:clamp(2.2rem,4.6vw,3.2rem); color:var(--cream); margin-bottom:1rem; text-shadow:0 2px 0 rgba(0,0,0,.2); }
.loyalty h2 em{ font-style:normal; color:var(--brass-soft); }
.loyalty p{ color:var(--cream-soft); margin-bottom:1rem; }
.loyalty ul{ list-style:none; margin:1.2rem 0 1.8rem; }
.loyalty li{ padding-left:1.7rem; position:relative; margin-bottom:.5rem; color:var(--cream-soft); }
.loyalty li::before{
  content:"✂"; position:absolute; left:0; color:var(--brass-soft);
}
.member-card{
  background:var(--green-deep);
  background-image:var(--grain);
  background-blend-mode:overlay;
  border:1px solid var(--brass);
  padding:1.8rem 1.8rem 1.4rem;
  max-width:420px;
  margin-inline:auto;
  box-shadow:0 18px 36px rgba(0,0,0,.35);
  transform:rotate(-2deg);
  transition:transform .3s ease, box-shadow .3s ease;
  position:relative;
}
.member-card::after{
  content:""; position:absolute; inset:6px;
  border:1px dashed rgba(201,162,75,.55);
  pointer-events:none;
}
.member-card:hover{ transform:rotate(0deg); box-shadow:0 24px 44px rgba(0,0,0,.4); }
.member-card .mc-head{
  font-family:var(--crest);
  color:var(--brass);
  font-size:1.05rem;
  text-align:center;
  margin-bottom:.2rem;
}
.member-card .mc-sub{
  font-family:var(--display);
  letter-spacing:.36em;
  font-size:.7rem;
  color:var(--cream-dim);
  text-align:center;
  margin-bottom:1.2rem;
  text-transform:uppercase;
}
.stamps{ display:flex; justify-content:center; gap:.55rem; margin-bottom:1rem; flex-wrap:wrap; }
.stamp{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--brass);
  box-shadow:inset 0 0 0 3px var(--green-deep), inset 0 0 0 4px rgba(201,162,75,.4);
  display:flex; align-items:center; justify-content:center;
  color:var(--brass);
  font-size:1.05rem;
  transform:rotate(-8deg);
}
.stamp:nth-child(2){ transform:rotate(5deg); }
.stamp:nth-child(3){ transform:rotate(-3deg); }
.stamp.empty{ opacity:.35; transform:none; box-shadow:none; border-style:dashed; }
.member-card .mc-foot{
  text-align:center;
  font-style:italic;
  color:var(--cream-dim);
  font-size:.95rem;
}
@media (max-width: 860px){ .loyalty-grid{ grid-template-columns:1fr; } }

/* ============ REVIEWS ============ */
.reviews{ background:var(--cream); }
.review-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.review{
  background:var(--cream-soft);
  background-image:var(--grain);
  background-blend-mode:multiply;
  padding:2rem 1.7rem 1.6rem;
  border:1px solid rgba(201,162,75,.4);
  border-top:3px solid var(--brass);
  display:flex; flex-direction:column;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
}
.review::before{
  content:"”";
  font-family:Georgia, serif;
  position:absolute; top:.2rem; right:1.1rem;
  font-size:4rem; line-height:1;
  color:var(--brass);
  opacity:.22;
  pointer-events:none;
}
.review:hover{ transform:translateY(-4px); box-shadow:0 14px 26px rgba(23,59,44,.14); }
.stars{ color:var(--brass); letter-spacing:.25em; font-size:1rem; margin-bottom:.8rem; text-shadow:0 1px 0 rgba(110,43,37,.3); }
.review p{ font-style:italic; flex:1; font-size:1.05rem; }
.review footer{
  margin-top:1.1rem;
  font-family:var(--display);
  letter-spacing:.22em;
  font-size:.85rem;
  color:var(--oxblood);
  text-transform:uppercase;
  display:flex; align-items:center; gap:.7rem;
}
.review footer::before{ content:""; height:1px; width:1.6rem; background:var(--brass); flex:none; }
@media (max-width: 860px){ .review-grid{ grid-template-columns:1fr; } }

/* ============ BOOKING ============ */
.booking{
  background:var(--green);
  background-image:
    radial-gradient(ellipse at 50% -30%, rgba(201,162,75,.12), transparent 55%),
    var(--halftone),
    var(--grain);
  background-size:auto, 7px 7px, auto;
  background-blend-mode:normal, normal, overlay;
  color:var(--cream);
}
.book-panel{
  max-width:720px;
  margin-inline:auto;
  background:var(--green-deep);
  background-image:var(--grain);
  background-blend-mode:overlay;
  padding:2.8rem clamp(1.2rem,5vw,3rem) 3rem;
  box-shadow:0 24px 48px rgba(0,0,0,.35);
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem 1.4rem;
  margin-top:1.8rem;
}
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field.full{ grid-column:1 / -1; }
label{
  font-family:var(--display);
  letter-spacing:.26em;
  font-size:.8rem;
  color:var(--brass);
  text-transform:uppercase;
}
input,select,textarea{
  font-family:var(--body);
  font-size:1.05rem;
  color:var(--cream);
  background:rgba(242,233,216,.06);
  border:1px solid rgba(201,162,75,.5);
  padding:.7rem .85rem;
  width:100%;
  transition:border-color .25s ease, background-color .25s ease;
}
input:hover,select:hover,textarea:hover{ border-color:rgba(201,162,75,.8); }
select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%23C9A24B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:right 14px center;
  background-size:12px 8px;
  background-repeat:no-repeat;
  padding-right:2.4rem;
  cursor:pointer;
  text-overflow:ellipsis;
}
select option{ color:var(--ink); background:var(--cream); }
input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid var(--brass); outline-offset:2px; border-color:var(--brass); background:rgba(242,233,216,.09); }
input::placeholder,textarea::placeholder{ color:rgba(242,233,216,.62); }
input[type="date"]{ color-scheme:dark; }
.hint{
  font-size:.88rem;
  font-style:italic;
  color:var(--cream-dim);
  opacity:.85;
  margin:0;
}
.book-submit{ grid-column:1 / -1; text-align:center; margin-top:.6rem; }
.book-success{
  display:none;
  text-align:center;
  padding:2.5rem 1rem;
}
.book-success.show{ display:block; }
@media (prefers-reduced-motion: no-preference){
  .book-success.show{ animation:success-in .5s ease both; }
  @keyframes success-in{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:none; }
  }
  /* the seal thumps down like a rubber stamp */
  .book-success.show .seal{ animation:stamp-thump .5s .2s cubic-bezier(.2,.9,.3,1.35) both; }
  @keyframes stamp-thump{
    0%{ opacity:0; transform:rotate(4deg) scale(1.8); }
    60%{ opacity:1; transform:rotate(-10deg) scale(.94); }
    100%{ opacity:1; transform:rotate(-8deg) scale(1); }
  }
}
/* vintage ink-stamp seal */
.seal{
  width:158px; height:158px;
  margin:0 auto 1.5rem;
  border-radius:50%;
  border:2px solid var(--brass);
  box-shadow:inset 0 0 0 4px var(--green-deep), inset 0 0 0 5px rgba(201,162,75,.5);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  transform:rotate(-8deg);
  color:var(--brass);
  position:relative;
}
.seal::before{
  content:""; position:absolute; inset:9px;
  border:1px dashed rgba(201,162,75,.6);
  border-radius:50%;
}
.seal::after{ /* worn-ink texture */
  content:""; position:absolute; inset:0;
  border-radius:50%;
  background-image:var(--grain);
  opacity:.25;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.seal .seal-top,.seal .seal-bot{
  font-family:var(--display);
  font-size:.66rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--brass-soft);
  text-indent:.34em; /* balance tracking */
}
.seal .seal-mid{
  font-family:var(--display);
  font-size:1.15rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  line-height:1.15;
  text-align:center;
  text-indent:.24em;
  border-top:1px solid rgba(201,162,75,.5);
  border-bottom:1px solid rgba(201,162,75,.5);
  padding:.35rem .2rem .25rem;
  margin:.25rem 0;
  width:70%;
}
.book-success h3{ font-size:2rem; color:var(--cream); margin-bottom:.6rem; letter-spacing:.07em; }
.book-success p{ color:var(--cream-soft); max-width:26rem; margin-inline:auto; }
@media (max-width: 640px){ .form-grid{ grid-template-columns:1fr; } }

/* ============ FOOTER ============ */
footer.site{
  background:var(--green-deep);
  background-image:var(--halftone), var(--grain);
  background-size:7px 7px, auto;
  background-blend-mode:normal, overlay;
  color:var(--cream-soft);
  padding:4.5rem 0 0;
  border-top:3px solid var(--brass);
  position:relative;
}
footer.site::before{
  content:""; position:absolute; top:5px; left:0; right:0;
  height:1px; background:rgba(201,162,75,.45);
}
.foot-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1.2fr;
  gap:3rem;
  padding-bottom:3.5rem;
}
.foot-grid h3{
  font-size:1.3rem;
  letter-spacing:.18em;
  color:var(--brass);
  margin-bottom:1rem;
  display:flex; align-items:center; gap:.8rem;
}
.foot-grid h3::after{ content:""; height:1px; flex:0 1 3.5rem; background:linear-gradient(90deg, var(--brass), transparent); opacity:.6; }
.foot-brand svg{ width:68px; height:68px; margin-bottom:1rem; filter:drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.foot-brand h3::after{ display:none; }
.foot-brand p{ font-size:1rem; max-width:22rem; }
.hours{ list-style:none; }
.hours li{
  display:flex; align-items:baseline; gap:.5rem;
  padding:.3rem 0;
  font-size:1rem;
}
.hours .d{ font-family:var(--display); letter-spacing:.16em; white-space:nowrap; }
.hours .dots{
  flex:1;
  height:1px;
  align-self:baseline;
  background-image:radial-gradient(circle, rgba(242,233,216,.4) .8px, transparent 1.2px);
  background-size:6px 1.6px;
  background-repeat:repeat-x;
  background-position:center;
  transform:translateY(-5px);
}
.hours .t{ white-space:nowrap; color:var(--cream); }
.hours .closed{ color:#D69A90; font-style:italic; } /* lightened oxblood — readable on deep green */
.map-box{ border:1px solid rgba(201,162,75,.5); box-shadow:inset 0 0 0 3px var(--green-deep), inset 0 0 0 4px rgba(201,162,75,.3); }
.map-box svg{ width:100%; height:auto; }
.foot-addr{ font-size:.98rem; margin-top:.8rem; font-style:italic; }
.foot-addr a{ color:var(--brass-soft); text-decoration:none; border-bottom:1px solid rgba(201,162,75,.45); transition:color .25s ease, border-color .25s ease; }
.foot-addr a:hover,.foot-addr a:focus-visible{ color:var(--brass); border-color:var(--brass); }
.foot-bottom{
  border-top:1px solid rgba(201,162,75,.3);
  padding:1.2rem 0;
  text-align:center;
  font-size:.92rem;
  color:var(--cream-dim);
}
.foot-bottom a{ color:var(--brass); text-decoration:none; position:relative; }
.foot-bottom a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px;
  height:1px; background:var(--brass);
  transition:right .28s ease;
}
.foot-bottom a:hover::after,.foot-bottom a:focus-visible::after{ right:0; }
@media (max-width: 860px){ .foot-grid{ grid-template-columns:1fr; } }

/* ============ MULTI-PAGE ADDITION: current-page nav state ============ */
/* Mirrors the existing hover treatment for the link of the page you're on. */
.nav-links a[aria-current="page"]{ color:var(--brass-soft); }
.nav-links a[aria-current="page"]::after{ right:0; }
@media (max-width: 860px){
  .nav-links a[aria-current="page"]{ background:rgba(201,162,75,.12); }
}