:root{
    --birch:#EAE2D2;
    --birch-deep:#DED3BD;
    --paper:#F3EEE2;
    --bark:#23201B;
    --bark-soft:#4C453A;
    --sage:#4E5F49;
    --sage-deep:#3B4937;
    --brass:#B5853F;
    --line:rgba(35,32,27,.16);
    --maxw:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--birch);
    color:var(--bark);
    font-family:"Hanken Grotesk",system-ui,sans-serif;
    font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.04;letter-spacing:-.01em}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .eyebrow{
    font-family:"Hanken Grotesk",sans-serif;font-weight:600;
    font-size:12px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--sage-deep);
  }

  /* ---- birch bark spine: the signature motif ---- */
  .birch-spine{
    position:relative;width:34px;flex:0 0 34px;
    background:linear-gradient(90deg,#E7DDC8,#F1E9D8 45%,#E2D6BE);
    border-left:1px solid rgba(35,32,27,.1);
    border-right:1px solid rgba(35,32,27,.1);
    border-radius:2px;overflow:hidden;
  }
  .birch-spine::before,.birch-spine::after{
    content:"";position:absolute;left:0;right:0;height:100%;
    background-image:
      linear-gradient(90deg,transparent 2px, rgba(35,32,27,.55) 2px, rgba(35,32,27,.55) 17px, transparent 17px),
      linear-gradient(90deg,transparent 20px, rgba(35,32,27,.4) 20px, rgba(35,32,27,.4) 28px, transparent 28px);
    background-repeat:repeat-y;
    background-size:100% 64px;
    background-position:0 6px, 0 34px;
    opacity:.8;
  }
  .birch-spine::after{background-position:0 90px,0 120px;opacity:.5}

  /* ===== HEADER ===== */
  header.nav{
    position:sticky;top:0;z-index:50;
    background:rgba(234,226,210,.86);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
  .brand{display:flex;align-items:center;gap:12px;font-family:"Fraunces",serif;font-weight:600;font-size:21px;letter-spacing:-.02em}
  .brand .mark{
    width:30px;height:30px;border-radius:50%;
    background:var(--sage-deep);position:relative;flex:0 0 30px;
  }
  .brand .mark::before,.brand .mark::after{
    content:"";position:absolute;background:var(--birch);border-radius:2px;
  }
  .brand .mark::before{width:3px;height:15px;left:13.5px;top:7.5px}
  .brand .mark::after{width:11px;height:3px;left:5px;top:9px;box-shadow:0 9px 0 var(--birch)}
  nav ul{display:flex;gap:30px;list-style:none;font-size:14.5px;font-weight:500}
  nav a{position:relative;padding:4px 0;color:var(--bark-soft);transition:color .2s}
  nav a:hover{color:var(--bark)}
  nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--sage);transition:width .25s}
  nav a:hover::after{width:100%}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:14.5px;
    padding:11px 20px;border-radius:2px;cursor:pointer;transition:.2s;border:1px solid transparent;
  }
  .btn-primary{background:var(--sage-deep);color:var(--paper)}
  .btn-primary:hover{background:var(--bark)}
  .btn-ghost{border-color:var(--bark);color:var(--bark)}
  .btn-ghost:hover{background:var(--bark);color:var(--paper)}
  .nav .btn{padding:9px 17px}
  .menu-toggle{display:none;background:none;border:0;cursor:pointer}

  /* ===== HERO ===== */
  .hero{padding:78px 0 70px;position:relative}
  .hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center}
  .hero .eyebrow{margin-bottom:22px}
  .hero h1{font-size:clamp(44px,6vw,82px);font-weight:600;letter-spacing:-.025em}
  .hero h1 em{font-style:italic;font-weight:500;color:var(--sage-deep)}
  .hero p.lede{font-size:19px;color:var(--bark-soft);margin:26px 0 34px;max-width:30em}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .hero-meta{margin-top:40px;display:flex;gap:34px;flex-wrap:wrap;font-size:14px;color:var(--bark-soft)}
  .hero-meta strong{display:block;font-family:"Fraunces",serif;font-size:24px;color:var(--bark);font-weight:600;letter-spacing:-.01em}

  .hero-art{display:flex;gap:0;height:520px}
  .photo{
    flex:1;border-radius:3px;position:relative;overflow:hidden;
    background:var(--birch-deep);border:1px solid var(--line);
    display:flex;align-items:flex-end;
  }
  /* tasteful textured placeholder for real photos */
  .photo.tex1{background:
     repeating-linear-gradient(115deg, rgba(75,69,58,.06) 0 9px, transparent 9px 20px),
     linear-gradient(160deg,#46514a,#2f3a33 70%);
  }
  .photo .ph-note{
    width:100%;padding:16px 18px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
    color:rgba(243,238,226,.78);background:linear-gradient(0deg,rgba(35,32,27,.7),transparent);
    font-weight:600;
  }
  .photo.tex1 .barber-pole{
    position:absolute;top:26px;left:26px;width:18px;height:120px;border-radius:9px;
    background:repeating-linear-gradient(45deg,#e9e2d2 0 8px,#b5853f 8px 16px,#4e5f49 16px 24px);
    box-shadow:0 4px 18px rgba(0,0,0,.35);opacity:.9;
  }

  /* ===== SECTION SHELL ===== */
  section{padding:86px 0;position:relative}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:48px;flex-wrap:wrap}
  .sec-head h2{font-size:clamp(32px,4.2vw,52px)}
  .sec-head .eyebrow{margin-bottom:14px}
  .sec-head p{color:var(--bark-soft);max-width:30em;font-size:16px}
  .rule{height:1px;background:var(--line);border:0;margin:0}

  /* ===== SERVICES (menu) ===== */
  #services{background:var(--paper)}
  .menu-cat + .menu-cat{margin-top:50px}
  .menu-cat-head{display:flex;align-items:center;gap:16px;margin-bottom:4px}
  .menu-cat-head h3{font-size:25px}
  .menu-cat-head .ln{flex:1;height:1px;background:var(--line)}
  .menu-cat-head .cnt{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bark-soft);font-weight:600}
  .menu-row{display:grid;grid-template-columns:1fr auto;gap:28px;padding:19px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:padding-left .25s}
  .menu-row:hover{padding-left:8px}
  .menu-row .nm{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .menu-row h4{font-size:19px;font-family:"Fraunces",serif;font-weight:600;letter-spacing:-.01em}
  .menu-row .desc{font-size:13.5px;color:var(--bark-soft);margin-top:6px;max-width:48em;line-height:1.5}
  .menu-row .price{font-family:"Fraunces",serif;font-size:21px;white-space:nowrap;color:var(--bark)}
  .menu-row .price.tba{font-size:12px;font-family:"Hanken Grotesk",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-deep);font-weight:600}
  .badge{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;background:var(--sage-deep);color:var(--paper);padding:3px 8px;border-radius:2px;font-weight:600;font-family:"Hanken Grotesk",sans-serif;position:relative;top:-2px}
  .badge.best{background:var(--brass)}
  .svc-foot{padding:30px 4px 0;font-size:13.5px;color:var(--bark-soft);font-style:italic}

  /* ===== CRAFT / ABOUT ===== */
  .craft-grid{display:grid;grid-template-columns:34px 1fr 1fr;gap:46px;align-items:center}
  .craft-text h2{font-size:clamp(30px,4vw,46px);margin-bottom:22px}
  .craft-text p{color:var(--bark-soft);margin-bottom:18px}
  .craft-text .sig{font-family:"Fraunces",serif;font-style:italic;font-size:22px;color:var(--bark);margin-top:8px}
  .craft-photo{height:460px}
  .photo.tex2{background:
     repeating-linear-gradient(0deg, rgba(75,69,58,.05) 0 11px, transparent 11px 24px),
     linear-gradient(150deg,#5b5142,#332d24 75%);
  }

  /* ===== BARBERS ===== */
  #chairs{background:var(--paper)}
  .barbers{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .barber{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--birch);transition:transform .25s,box-shadow .25s}
  .barber:hover{transform:translateY(-4px);box-shadow:0 16px 34px -20px rgba(35,32,27,.5)}
  .barber .pic{height:220px;background:var(--birch-deep);position:relative;display:flex;align-items:flex-end}
  .barber .pic.b1{background:linear-gradient(160deg,#54614f,#39443463)}
  .barber .pic.b2{background:linear-gradient(160deg,#6a5c45,#3a3126)}
  .barber .pic.b3{background:linear-gradient(160deg,#4a5560,#2c333b)}
  .barber .pic.b4{background:linear-gradient(160deg,#5f5550,#322b27)}
  .barber .pic.b5{background:linear-gradient(160deg,#4f5b53,#2e372f)}
  .barber .pic.b6{background:linear-gradient(160deg,#695240,#332822)}
  .barber .pic.b7{background:linear-gradient(160deg,#565060,#2d2a36)}
  .barber .pic .tag{position:absolute;top:12px;left:12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,238,226,.9);font-weight:600;background:rgba(35,32,27,.45);padding:4px 9px;border-radius:2px}
  .barber .pic .tag.gold{background:var(--brass);color:#fff}
  .barber .info{padding:17px 17px 20px}
  .barber h3{font-size:20px;margin-bottom:3px}
  .barber .role{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-deep);font-weight:600;margin-bottom:9px}
  .barber p{font-size:13px;color:var(--bark-soft);line-height:1.5}
  .barber .rating{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--bark-soft);margin-bottom:11px}
  .barber .rating .stars{color:var(--brass);letter-spacing:1px;font-size:12px}
  .barber .rating .new{color:var(--sage-deep);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
  .barber .ig{display:inline-block;margin-top:11px;font-size:12px;font-weight:600;color:var(--sage-deep);border-bottom:1px solid var(--line);padding-bottom:1px;transition:border-color .2s}
  .barber .ig:hover{border-color:var(--sage)}

  /* ===== VISIT ===== */
  .visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
  .visit h2{font-size:clamp(30px,4vw,48px);margin-bottom:24px}
  .visit .detail{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
  .visit .detail:first-of-type{border-top:1px solid var(--line)}
  .visit .detail .k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep);font-weight:600;flex:0 0 92px;padding-top:3px}
  .visit .detail .v{font-size:16px}
  .visit .detail .v a{border-bottom:1px solid var(--line)}
  .visit .detail .v a:hover{border-color:var(--sage)}
  .visit .placeholder-note{color:var(--brass);font-style:italic}
  .visit-cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
  .map-card{height:430px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--birch-deep);position:relative}
  .map-card .map-grid{position:absolute;inset:0;background-image:
    linear-gradient(rgba(35,32,27,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(35,32,27,.07) 1px,transparent 1px);
    background-size:38px 38px}
  .map-card .pin{position:absolute;top:48%;left:50%;transform:translate(-50%,-100%);text-align:center}
  .map-card .pin .dot{width:18px;height:18px;background:var(--sage-deep);border:3px solid var(--paper);border-radius:50% 50% 50% 0;transform:rotate(-45deg);margin:0 auto 8px;box-shadow:0 6px 14px rgba(0,0,0,.3)}
  .map-card .pin span{font-size:13px;font-weight:600;background:var(--paper);padding:5px 11px;border-radius:2px;border:1px solid var(--line);display:inline-block}
  .map-card .road{position:absolute;left:0;right:0;top:48%;height:14px;background:var(--bark-soft);opacity:.18}

  /* ===== FOOTER ===== */
  footer{background:var(--bark);color:var(--birch);padding:64px 0 30px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(234,226,210,.16)}
  footer .brand{color:var(--birch);font-size:24px;margin-bottom:14px}
  footer .brand .mark{background:var(--birch)}
  footer .brand .mark::before,footer .brand .mark::after{background:var(--bark)}
  footer .brand .mark::after{box-shadow:0 9px 0 var(--bark)}
  footer p{color:rgba(234,226,210,.6);font-size:14px;max-width:26em}
  .foot-col h4{font-family:"Hanken Grotesk";font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(234,226,210,.5);margin-bottom:16px;font-weight:600}
  .foot-col a,.foot-col span{display:block;color:rgba(234,226,210,.82);font-size:14.5px;margin-bottom:9px;transition:color .2s}
  .foot-col a:hover{color:var(--birch)}
  .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;font-size:12.5px;color:rgba(234,226,210,.45)}

  /* reveal */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  /* ===== RESPONSIVE ===== */
  @media(max-width:900px){
    nav ul{display:none}
    .menu-toggle{display:block}
    .hero-grid{grid-template-columns:1fr;gap:40px}
    .hero-art{height:360px}
    .craft-grid{grid-template-columns:1fr;gap:30px}
    .craft-grid .birch-spine{display:none}
    .craft-photo{height:320px;order:-1}
    .barbers{grid-template-columns:repeat(2,1fr)}
    .visit-grid{grid-template-columns:1fr;gap:34px}
    .foot-grid{grid-template-columns:1fr;gap:30px}
  }
  @media(max-width:560px){
    .menu-row{grid-template-columns:1fr auto;gap:16px}
    .menu-row h4{font-size:17px}
    .barbers{grid-template-columns:1fr}
    .hero-meta{gap:24px}
  }
  @media(prefers-reduced-motion:reduce){
    *{scroll-behavior:auto}
    .reveal{opacity:1;transform:none;transition:none}
  }

  /* ===== SERVICES TEASER (home) ===== */
  #services-teaser{background:var(--paper)}
  .teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px}
  .teaser-card{border:1px solid var(--line);border-radius:3px;padding:28px 26px;background:var(--birch);transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}
  .teaser-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px -22px rgba(35,32,27,.5)}
  .teaser-card .ix{font-family:"Fraunces",serif;font-style:italic;font-size:15px;color:var(--sage-deep);margin-bottom:12px}
  .teaser-card h3{font-size:23px;margin-bottom:9px}
  .teaser-card p{font-size:14px;color:var(--bark-soft);line-height:1.5}
  .teaser-card .from{display:block;margin-top:14px;font-family:"Fraunces",serif;font-size:16px;color:var(--bark)}

  /* ===== PAGE HERO (services) ===== */
  .page-hero{padding:62px 0 8px;position:relative}
  .page-hero-grid{display:flex;gap:30px;align-items:flex-start}
  .page-hero .eyebrow{margin-bottom:16px}
  .page-hero h1{font-size:clamp(40px,5.5vw,74px);font-weight:600;letter-spacing:-.025em}
  .page-hero h1 em{font-style:italic;font-weight:500;color:var(--sage-deep)}
  .page-hero p{font-size:18px;color:var(--bark-soft);max-width:34em;margin-top:20px}
  .menu-page{padding:54px 0 92px}
  .menu-actions{margin-top:48px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .menu-actions .note{font-size:13.5px;color:var(--bark-soft);font-style:italic;margin-left:6px}

  @media(max-width:760px){
    .teaser-grid{grid-template-columns:1fr}
    .page-hero-grid{flex-direction:column;gap:18px}
    .page-hero .birch-spine{display:none}
  }