:root{
    --ink:#f4ead9;
    --ink-dim:#cdbfa8;
    --bg:#1b120f;
    --bg-2:#241a15;
    --panel:#2a1e17;
    --line: rgba(244,234,217,.14);
    --red:#a4372f;
    --red-dim:#7c2b26;
    --blue:#33495a;
    --blue-dim:#25333f;
    --brass:#c39a5c;
    --paper:#efe3cb;
    --paper-ink:#2a1e17;
    --radius: 2px;
    --max: 1120px;
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]){ 
      
    }
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Work Sans",system-ui,-apple-system,sans-serif;
    line-height:1.55;
    overflow-x:hidden;
  }
  body::before{
    content:"";
    position:fixed; inset:0;
    background-image:
      radial-gradient(circle at 15% 8%, rgba(196,154,92,.10), transparent 40%),
      radial-gradient(circle at 88% 92%, rgba(164,55,47,.10), transparent 42%);
    pointer-events:none;
    z-index:0;
  }
  /* film grain */
  .grain{
    position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  a{color:inherit}
  img{max-width:100%;display:block}
  .wrap{width:min(var(--max), calc(100% - 48px)); margin-inline:auto; position:relative; z-index:2}
  .eyebrow{font-family:"Work Sans"; font-size:.82rem; letter-spacing:.02em; color:var(--brass); font-weight:600; margin:0 0 10px}
  h1,h2,h3{font-family:"Bevan",serif; font-weight:400; margin:0; letter-spacing:.01em; color:var(--paper)}
  h2{font-size:clamp(2rem,4vw,3.1rem); line-height:1.06}
  h3{font-size:1.3rem}
  p{margin:0}
  .lede{max-width:52ch; color:var(--ink-dim); font-size:1.08rem}

  /* ---------- nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    background:linear-gradient(rgba(20,14,11,.92), rgba(20,14,11,.55) 70%, transparent);
    padding:20px 0;
  }
  .nav{display:flex; align-items:center; justify-content:space-between; gap:20px}
  .brand{display:flex; align-items:center; gap:10px; font-family:"Bevan",serif; font-size:1.2rem; letter-spacing:.02em; color:var(--paper); text-decoration:none}
  .brand .mark{width:30px;height:30px;flex:none}
  .navlinks{display:flex; gap:30px; list-style:none; margin:0; padding:0}
  .navlinks a{
    text-decoration:none; font-size:.86rem; letter-spacing:.02em; color:var(--ink-dim);
    padding-bottom:3px; border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease;
  }
  .navlinks a:hover{color:var(--paper); border-color:var(--brass)}
  .nav-cta{
    font-size:.82rem; font-weight:600; letter-spacing:.02em; text-decoration:none;
    color:var(--paper); background:var(--red); padding:10px 18px; border-radius:var(--radius);
    border:1px solid var(--red-dim); transition:background .2s ease;
    white-space:nowrap;
  }
  .nav-cta:hover{background:var(--red-dim)}
  .menu-btn{display:none; background:none; border:1px solid var(--line); color:var(--paper); padding:8px 12px; border-radius:var(--radius)}

  /* ---------- barber pole ---------- */
  .pole{
    width:22px; height:64px; border-radius:11px; overflow:hidden; position:relative;
    border:1px solid rgba(0,0,0,.4); box-shadow:inset 0 0 6px rgba(0,0,0,.5);
    background:var(--paper);
    flex:none;
  }
  .pole .stripes{
    position:absolute; inset:-40px -10px;
    background:repeating-linear-gradient(
      45deg,
      var(--red) 0 10px,
      var(--paper) 10px 20px,
      var(--blue) 20px 30px,
      var(--paper) 30px 40px
    );
    animation: pole-spin 2.6s linear infinite;
  }
  @keyframes pole-spin{ from{ transform:translateY(0) } to{ transform:translateY(40px) } }
  .pole .cap{position:absolute; left:0; right:0; height:8px; background:var(--brass)}
  .pole .cap.top{top:0} .pole .cap.bottom{bottom:0}

  /* ---------- hero ---------- */
  .hero{
    position:relative; min-height:100svh; display:flex; align-items:flex-end;
    padding:150px 0 90px;
    background:
      radial-gradient(circle at 15% 8%, rgba(196,154,92,.12), transparent 45%),
      radial-gradient(circle at 88% 92%, rgba(164,55,47,.14), transparent 45%),
      linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  }
  .hero-inner{display:grid; grid-template-columns: 1.4fr .9fr; gap:60px; align-items:end; width:min(var(--max), calc(100% - 48px))}
  .hero h1{
    font-size:clamp(3.4rem, 9vw, 7rem);
    line-height:.92;
    color:var(--paper);
    text-shadow:0 3px 0 rgba(0,0,0,.35);
  }
  .hero-line1, .hero-line2{
    display:block; overflow:hidden;
  }
  .hero-line1 span, .hero-line2 span{
    display:inline-block; transform:translateY(105%);
    animation: rise .85s cubic-bezier(.2,.9,.2,1) forwards;
  }
  .hero-line1 span{animation-delay:.15s}
  .hero-line2 span{animation-delay:.32s}
  @keyframes rise{ to{ transform:translateY(0) } }
  .hero-sub{
    opacity:0; animation: fadein .9s ease forwards; animation-delay:.75s;
    margin-top:22px; max-width:46ch; color:var(--ink-dim); font-size:1.05rem;
  }
  @keyframes fadein{ to{opacity:1} }
  .hero-cta-row{
    opacity:0; animation: fadein .9s ease forwards; animation-delay:.95s;
    margin-top:32px; display:flex; gap:16px; flex-wrap:wrap; align-items:center;
  }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-size:.92rem; font-weight:600; letter-spacing:.01em; text-decoration:none;
    padding:14px 26px; border-radius:var(--radius); transition:transform .2s ease, background .2s ease;
  }
  .btn-primary{background:var(--red); color:var(--paper); border:1px solid var(--red-dim)}
  .btn-primary:hover{background:var(--red-dim); transform:translateY(-1px)}
  .btn-ghost{background:transparent; color:var(--paper); border:1px solid var(--line)}
  .btn-ghost:hover{border-color:var(--brass); color:var(--brass)}

  .hero-plate{
    opacity:0; animation: fadein 1s ease forwards; animation-delay:1.1s;
    border:1px solid var(--line); background:rgba(20,14,11,.55); backdrop-filter:blur(3px);
    padding:24px; border-radius:var(--radius);
  }
  .hero-plate .num{font-family:"Bevan"; font-size:2.4rem; color:var(--brass); line-height:1}
  .hero-plate .lbl{font-size:.85rem; color:var(--ink-dim); margin-top:6px}
  .hero-plate hr{border:none; border-top:1px solid var(--line); margin:18px 0}

  /* ---------- section shell ---------- */
  .section{padding:96px 0; position:relative; z-index:2}
  .section-head{margin-bottom:48px; max-width:640px}
  .split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}

  /* razor sweep divider */
  .sweep-wrap{position:relative; height:1px; margin:0 auto}
  .sweep-line{
    position:absolute; top:0; left:0; height:1px; width:0; background:linear-gradient(90deg, transparent, var(--brass), transparent);
    transition: width 1.1s cubic-bezier(.2,.8,.2,1);
  }
  .sweep-line.on{width:100%}

  /* ---------- about ---------- */
  .about-photo{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line)}
  .about-photo img{width:100%; height:100%; object-fit:cover; filter:sepia(.15) contrast(1.05)}
  .about-photo::after{
    content:""; position:absolute; inset:0;
    box-shadow:inset 0 0 60px rgba(0,0,0,.5);
  }
  .quote{
    font-family:"Bevan"; font-size:1.5rem; color:var(--paper); line-height:1.3; margin:28px 0 0;
    border-left:2px solid var(--brass); padding-left:20px;
  }
  .quote cite{display:block; margin-top:12px; font-family:"Work Sans"; font-style:normal; font-size:.85rem; color:var(--ink-dim)}

  /* ---------- services ---------- */
  .services{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .price-list{
    background:var(--paper); color:var(--paper-ink); border-radius:var(--radius);
    padding:8px 0; box-shadow:0 20px 60px rgba(0,0,0,.45);
    position:relative; overflow:hidden;
  }
  .price-row{
    display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    padding:20px 32px; border-bottom:1px dashed rgba(42,30,23,.25);
  }
  .price-row:last-child{border-bottom:none}
  .price-row .name{font-family:"Bevan"; font-size:1.12rem}
  .price-row .desc{font-size:.86rem; color:rgba(42,30,23,.65); margin-top:4px; max-width:38ch}
  .price-row .price{font-family:"Bevan"; font-size:1.12rem; white-space:nowrap; color:var(--red)}
  .services-note{margin-top:22px; font-size:.86rem; color:var(--ink-dim)}

  /* ---------- gallery ---------- */
  .gallery-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:20px}
  .gcard{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); position:relative; aspect-ratio:4/5}
  .gcard.wide{aspect-ratio:16/11}
  .gcard img{width:100%; height:100%; object-fit:cover; filter:sepia(.12) contrast(1.05)}
  .gcard .tag{
    position:absolute; left:14px; bottom:14px; font-size:.78rem; letter-spacing:.02em;
    background:rgba(20,14,11,.75); color:var(--paper); padding:6px 12px; border-radius:var(--radius);
    border:1px solid var(--line);
  }
  .gcard.placeholder{
    display:flex; align-items:center; justify-content:center; background:var(--panel); color:var(--ink-dim); font-size:.85rem; text-align:center; padding:20px;
  }

  /* ---------- hours / location ---------- */
  .info-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px}
  .hours-table{width:100%; border-collapse:collapse; margin-top:20px}
  .hours-table td{padding:11px 0; border-bottom:1px solid var(--line); font-size:.98rem}
  .hours-table td:first-child{color:var(--ink-dim)}
  .hours-table td:last-child{text-align:right; font-family:"Bevan"; font-size:.95rem; color:var(--paper)}
  .contact-block{margin-top:26px; display:flex; flex-direction:column; gap:10px}
  .contact-block a{text-decoration:none; color:var(--paper); font-size:1.02rem; display:flex; gap:10px; align-items:center}
  .contact-block a:hover{color:var(--brass)}
  .map-plate{
    border:1px solid var(--line); border-radius:var(--radius); padding:28px; background:var(--panel);
    height:100%; display:flex; flex-direction:column; justify-content:space-between; min-height:320px;
  }
  .map-plate .addr{font-family:"Bevan"; font-size:1.4rem; color:var(--paper); line-height:1.3}

  /* ---------- footer cta ---------- */
  .cta-band{
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    padding:110px 0; text-align:center; border-top:1px solid var(--line);
  }
  .cta-band h2{max-width:16ch; margin-inline:auto}
  .cta-band p{margin-top:16px; color:var(--ink-dim)}
  .cta-band .btn-primary{margin-top:32px}

  footer{padding:36px 0; border-top:1px solid var(--line)}
  .footer-row{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:.85rem; color:var(--ink-dim)}
  .footer-row a{text-decoration:none; color:var(--ink-dim)}
  .footer-row a:hover{color:var(--brass)}

  .reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
  .reveal.visible{opacity:1; transform:none}

  @media (max-width:860px){
    .hero-inner{grid-template-columns:1fr}
    .hero-plate{order:-1}
    .split{grid-template-columns:1fr; gap:36px}
    .info-grid{grid-template-columns:1fr}
    .gallery-grid{grid-template-columns:1fr}
    .navlinks{display:none}
    .menu-btn{display:inline-block}
  }

  @media (prefers-reduced-motion: reduce){
    .pole .stripes{animation:none}
    .hero-line1 span,.hero-line2 span,.hero-sub,.hero-cta-row,.hero-plate{animation:none; opacity:1; transform:none}
    .reveal{opacity:1; transform:none; transition:none}
    .sweep-line{transition:none}
  }