/* ============================================================
   Barbers Corner Barbershop — Foundation (tokens · base · fonts · nav · footer)
   Premium-Barbershop · Charcoal-Black + Vintage-Amber + Cream · cinematic-vintage-bold
   ============================================================ */

/* ---------- Self-hosted fonts (Zero-Tracking, no Google CDN) ---------- */
@font-face { font-family: "Anton";  font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/anton-400.woff2")  format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/oswald-500.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/oswald-600.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/oswald-700.woff2") format("woff2"); }
@font-face { font-family: "Inter";  font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff2")  format("woff2"); }
@font-face { font-family: "Inter";  font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.woff2")  format("woff2"); }
@font-face { font-family: "Inter";  font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff2")  format("woff2"); }

:root {
  /* Brand palette — Charcoal + Vintage-Amber */
  --c-ink:        #161310;   /* charcoal / near-black, warm */
  --c-ink-2:      #1e1a16;   /* slightly lifted surface */
  --c-ink-3:      #262019;   /* card surface on dark */
  --c-line:       #3a3128;   /* hairline on dark */
  --c-amber:      #c8881f;   /* vintage amber / brass accent */
  --c-amber-br:   #e0a843;   /* brighter amber */
  --c-amber-dk:   #9c6713;   /* deep amber */
  --c-cream:      #efe7d8;   /* light surface / text on dark */
  --c-cream-2:    #e2d8c5;
  --c-cream-mute: #b8ad99;   /* muted cream text on dark */

  /* text */
  --c-on-dark:        #efe7d8;
  --c-on-dark-mute:   #a69d8b;
  --c-on-dark-faint:  #7d7464;
  --c-on-light:       #24201b;
  --c-on-light-mute:  #6a6052;

  /* fonts */
  --f-head:    "Anton", "Oswald", Impact, sans-serif;
  --f-display: "Oswald", "Anton", Impact, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* type scale */
  --size-h1: clamp(2.8rem, 8vw, 6.4rem);
  --size-h2: clamp(2rem, 5vw, 3.8rem);
  --size-h3: clamp(1.3rem, 2.6vw, 2rem);

  /* spacing */
  --gap-xs: 0.5rem;
  --gap-sm: 0.85rem;
  --gap-md: 1.4rem;
  --gap-lg: 2.2rem;
  --gap-xl: 3.6rem;
  --gap-2xl: 6rem;

  --shell: 1240px;
  --shell-tight: 880px;
  --radius: 3px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.72;
  color: var(--c-on-dark);
  background: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  max-width: 100vw;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.05; letter-spacing: 0.005em; }
p { max-width: 66ch; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 3.5rem); }
.shell-tight { max-width: var(--shell-tight); margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 2rem); }
section { padding: clamp(3.6rem, 9vw, 7rem) 0; position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-display); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--c-amber);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--c-amber); display: inline-block; }
.eyebrow.center { justify-content: center; }
.eyebrow.center::before { display: none; }

.kicker-rule { display:inline-block; width:54px; height:3px; background:var(--c-amber); margin-bottom: 1.1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--f-display); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 1rem 1.9rem; border-radius: var(--radius);
  cursor: pointer; border: 1.5px solid transparent;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: var(--c-amber); color: #1a1308; border-color: var(--c-amber); }
.btn-primary:hover { background: var(--c-amber-br); border-color: var(--c-amber-br); }
.btn-ghost { background: transparent; color: var(--c-cream); border-color: rgba(239,231,216,0.4); }
.btn-ghost:hover { border-color: var(--c-amber); color: var(--c-amber); }
.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--c-amber), var(--c-amber-br));
  transform: scaleX(0); transform-origin: left; z-index: 200;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem clamp(1.2rem, 5vw, 3.2rem);
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(16,13,10,0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding-top: 0.8rem; padding-bottom: 0.8rem;
  border-bottom-color: var(--c-line);
}
.nav-brand { display: flex; align-items: center; gap: 0.7rem; }
.nav-brand img { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--c-amber); }
.nav-brand .nb-text { display: flex; flex-direction: column; line-height: 1; }
.nav-brand .nb-name { font-family: var(--f-head); font-size: 1.18rem; letter-spacing: 0.04em; color: var(--c-cream); text-transform: uppercase; }
.nav-brand .nb-sub  { font-family: var(--f-display); font-size: 0.56rem; letter-spacing: 0.32em; color: var(--c-amber); text-transform: uppercase; margin-top: 3px; }
.nav-menu { display: flex; align-items: center; gap: 1.7rem; }
.nav-menu a {
  font-family: var(--f-display); font-weight: 500; font-size: 0.82rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-cream-mute);
  position: relative; padding: 4px 0; transition: color .25s var(--ease);
}
.nav-menu a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--c-amber); transition:width .3s var(--ease); }
.nav-menu a:hover, .nav-menu a.active { color: var(--c-cream); }
.nav-menu a:hover::after, .nav-menu a.active::after { width:100%; }
.nav-menu .nav-cta { color:#1a1308; background:var(--c-amber); padding:0.6rem 1.15rem; border-radius:var(--radius); }
.nav-menu .nav-cta::after { display:none; }
.nav-menu .nav-cta:hover { background: var(--c-amber-br); color:#1a1308; }

.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-burger span { width: 26px; height: 2px; background: var(--c-cream); transition: .3s var(--ease); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 140; background: rgba(16,13,10,0.98);
  backdrop-filter: blur(8px); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.6rem;
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
}
.nav-mobile.open { opacity: 1; pointer-events: auto; }
.nav-mobile a { font-family: var(--f-head); font-size: 1.7rem; letter-spacing: 0.04em; color: var(--c-cream); text-transform: uppercase; }
.nav-mobile a:hover { color: var(--c-amber); }
.nav-mobile .nm-book { background: var(--c-amber); color:#1a1308; padding: 0.8rem 2rem; border-radius: var(--radius); font-size: 1.1rem; margin-top: 0.6rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-ink-2); border-top: 1px solid var(--c-line); padding: clamp(3.2rem,7vw,5rem) 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; }
.footer-brand .fb-name { font-family: var(--f-head); font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-cream); }
.footer-brand .fb-sub { font-family: var(--f-display); font-size: 0.62rem; letter-spacing: 0.3em; color: var(--c-amber); text-transform: uppercase; margin-top: 5px; }
.footer-brand p { color: var(--c-on-dark-mute); margin-top: 1.1rem; font-size: 0.94rem; }
.footer-col h4 { font-family: var(--f-display); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-amber); margin-bottom: 1.1rem; }
.footer-col a, .footer-col p { display: block; color: var(--c-on-dark-mute); font-size: 0.94rem; margin-bottom: 0.55rem; transition: color .25s var(--ease); }
.footer-col a:hover { color: var(--c-amber); }
.footer-bottom { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; justify-content: space-between; align-items: center; }
.footer-bottom .fb-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-bottom a, .footer-bottom span { font-size: 0.82rem; color: var(--c-on-dark-faint); }
.footer-bottom a:hover { color: var(--c-amber); }
.footer-zero { font-size: 0.78rem; color: var(--c-on-dark-faint); }

/* ---------- Demo notice pill ---------- */
.demo-notice {
  position: fixed; left: 16px; bottom: 16px; z-index: 180;
  background: rgba(16,13,10,0.92); border: 1px solid var(--c-amber);
  color: var(--c-cream); font-size: 0.72rem; letter-spacing: 0.02em;
  padding: 0.55rem 0.85rem; border-radius: 999px; max-width: 280px; line-height: 1.4;
  backdrop-filter: blur(8px); box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
.demo-notice strong { color: var(--c-amber); }

/* ---------- Sticky mobile booking CTA ---------- */
.sticky-cta { display: none; }

@media (max-width: 860px) {
  .nav-menu { display: none; }
  .nav-burger { display: flex; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .sticky-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
    background: rgba(16,13,10,0.95); border-top: 1px solid var(--c-line);
    padding: 0.7rem 0.9rem; gap: 0.7rem; backdrop-filter: blur(10px);
  }
  .sticky-cta a { flex: 1; justify-content: center; padding: 0.85rem 0.5rem; font-size: 0.74rem; }
  .demo-notice { left: 10px; bottom: 70px; font-size: 0.66rem; padding: 0.45rem 0.7rem; max-width: 210px; }
  body { padding-bottom: 64px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}