/* =========================================================================
   Shared design system — editorial barbershop.
   Dark ink background, warm off-white text/paper, one confident oxblood
   accent (a premium nod to the barber pole, not literal red/white/blue
   stripes). Heavy serif for headlines, clean grotesque sans for body/UI.
   ========================================================================= */

:root{
  --ink:#0D0C0B;
  --ink-2:#17140F;
  --paper:#F6EFE2;
  --paper-dim:#EDE4D2;
  --text:#F2EAD9;
  --text-dim:#C9BFA9;
  --muted:#8F8672;
  --accent:#7A2320;
  --accent-hi:#9A2F2A;
  --accent-text:#F6EFE2;
  --line: rgba(246,239,226,0.14);
  --line-soft: rgba(246,239,226,0.08);
  --radius: 2px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:1.08;
  margin:0;
  color:var(--text);
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
img{max-width:100%;display:block;}
.container{max-width:1080px;margin:0 auto;padding:0 24px;}
.container-narrow{max-width:760px;margin:0 auto;padding:0 24px;}
:focus-visible{outline:3px solid var(--accent-hi);outline-offset:2px;}

/* ---- placeholder flag ------------------------------------------------ */
.ph{
  border-bottom:2px dashed var(--accent-hi);
  background:rgba(154,47,42,0.14);
  padding:0 3px;
  cursor:help;
  border-radius:1px;
}
.ph-note{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent-hi);
  background:rgba(154,47,42,0.12);
  border:1px solid rgba(154,47,42,0.4);
  padding:2px 8px;
  border-radius:2px;
  margin-left:8px;
  vertical-align:middle;
}

/* ---- top banner (shown while placeholders remain) --------------------- */
.build-banner{
  background:#2A1210;
  color:#F0C9C4;
  text-align:center;
  font-size:13px;
  padding:9px 16px;
  border-bottom:1px solid rgba(154,47,42,0.5);
}
.build-banner strong{color:#fff;}

/* ---- nav --------------------------------------------------------------- */
header.site-nav{
  background:rgba(13,12,11,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:40;
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;max-width:1080px;margin:0 auto;gap:20px;
}
.nav-logo{font-family:'Playfair Display',serif;font-weight:800;font-size:21px;white-space:nowrap;}
.nav-links{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.nav-links a{font-size:13px;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;color:var(--text-dim);}
.nav-links a:hover,.nav-links a.active{color:var(--text);}
.nav-book{white-space:nowrap;}
.nav-toggle{display:none;}
@media (max-width:760px){
  .nav-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:var(--ink-2);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 18px;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 0;width:100%;border-bottom:1px solid var(--line-soft);}
  .nav-toggle{
    display:inline-flex;background:none;border:1px solid var(--line);color:var(--text);
    padding:8px 12px;font-size:13px;font-weight:700;border-radius:var(--radius);
  }
}

/* ---- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--radius);font-weight:700;font-size:14px;
  letter-spacing:0.02em;border:2px solid transparent;white-space:nowrap;
}
.btn-accent{background:var(--accent);color:var(--accent-text);}
.btn-accent:hover{background:var(--accent-hi);}
.btn-outline{background:transparent;color:var(--text);border-color:var(--line);}
.btn-outline:hover{border-color:var(--text);}
.btn-outline-light{background:transparent;color:#fff;border-color:#fff;}
.btn-outline-light:hover{background:#fff;color:var(--ink);}
.btn-small{padding:10px 18px;font-size:13px;}
.btn:disabled{opacity:0.55;cursor:not-allowed;}

/* ---- hero ---------------------------------------------------------------- */
.hero{padding:92px 0 76px;border-bottom:1px solid var(--line);}
.hero .eyebrow{
  color:var(--accent-hi);font-weight:700;font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;margin-bottom:20px;
}
.hero h1{font-size:clamp(38px,6.4vw,68px);margin-bottom:20px;max-width:16ch;}
.hero p.lead{color:var(--text-dim);font-size:18px;line-height:1.65;max-width:52ch;margin-bottom:34px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.hero-meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:44px;color:var(--muted);font-size:13px;}
.hero-meta strong{color:var(--text-dim);display:block;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px;font-weight:700;}

/* ---- section basics ------------------------------------------------------ */
.section{padding:76px 0;}
.section-tight{padding:56px 0;}
.section-alt{background:var(--ink-2);}
.section-paper{background:var(--paper);color:var(--ink);}
.section-paper h1,.section-paper h2,.section-paper h3{color:var(--ink);}
.section-paper .muted{color:#6B6455;}
.section-head{max-width:640px;margin-bottom:44px;}
.eyebrow-dark{color:var(--accent-hi);font-weight:700;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:14px;display:block;}
.section h2{font-size:clamp(28px,4vw,40px);margin-bottom:16px;}
.section p.lead{font-size:16px;line-height:1.7;color:var(--text-dim);max-width:60ch;}
.section-paper p.lead{color:#6B6455;}

/* ---- cards / grids -------------------------------------------------------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:760px){.grid-2,.grid-3{grid-template-columns:1fr;}}

.card{
  background:var(--ink-2);border:1px solid var(--line);padding:26px 24px;border-radius:var(--radius);
}
.section-paper .card{background:#fff;border-color:#E4DCC9;}

.service-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:20px 0;border-bottom:1px solid var(--line-soft);
}
.service-row:first-child{padding-top:0;}
.service-row .name{font-family:'Playfair Display',serif;font-weight:700;font-size:19px;}
.service-row .note{color:var(--muted);font-size:13px;margin-top:4px;}
.service-row .meta{text-align:right;white-space:nowrap;}
.service-row .price{font-weight:800;font-size:18px;}
.service-row .duration{color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:0.05em;}

.gallery-item{
  aspect-ratio:4/5;background:var(--ink-2);border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--muted);font-size:13px;padding:16px;border-radius:var(--radius);
}

.review-card p.quote{font-size:16px;line-height:1.7;margin-bottom:14px;font-style:italic;}
.review-card .who{font-size:13px;color:var(--muted);font-weight:600;}
.stars{color:var(--accent-hi);letter-spacing:2px;margin-bottom:10px;display:block;}

/* ---- hours table --------------------------------------------------------- */
.hours-table{width:100%;border-collapse:collapse;}
.hours-table td{padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:14px;}
.hours-table td:first-child{color:var(--text-dim);font-weight:600;}
.hours-table td:last-child{text-align:right;}
.section-paper .hours-table td{border-color:#E4DCC9;}
.section-paper .hours-table td:first-child{color:#6B6455;}

/* ---- offer / promo banner ------------------------------------------------- */
.promo{
  background:var(--accent);color:var(--accent-text);border-radius:var(--radius);
  padding:26px 28px;display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.promo h3{color:#fff;font-size:20px;margin-bottom:6px;}
.promo p{margin:0;color:rgba(246,239,226,0.85);font-size:14px;max-width:48ch;}
.promo-inactive{
  background:var(--ink-2);border:1px dashed var(--line);color:var(--text-dim);
}
.promo-inactive h3{color:var(--text);}

/* ---- forms ---------------------------------------------------------------- */
.field{margin-bottom:18px;}
.field label{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:8px;}
.field input,.field textarea{
  width:100%;background:var(--ink-2);border:1px solid var(--line);color:var(--text);
  padding:13px 14px;font-size:15px;font-family:inherit;border-radius:var(--radius);
}
.field input:focus,.field textarea:focus{border-color:var(--accent-hi);}
.field textarea{resize:vertical;min-height:100px;}
.form-note{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.6;}
.form-status{font-size:14px;margin-top:16px;padding:12px 14px;border-radius:var(--radius);display:none;}
.form-status.show{display:block;}
.form-status.ok{background:rgba(122,35,32,0.15);border:1px solid var(--accent);color:var(--text);}
.form-status.err{background:rgba(154,47,42,0.2);border:1px solid var(--accent-hi);color:#F0C9C4;}

/* ---- footer ---------------------------------------------------------------- */
footer.site-footer{background:var(--ink-2);border-top:1px solid var(--line);padding:52px 0 30px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;gap:28px;}}
.footer-col h4{font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:14px;font-weight:700;font-family:'Inter';}
.footer-col a,.footer-col p{display:block;font-size:14px;color:var(--text-dim);margin-bottom:8px;line-height:1.6;}
.footer-col a:hover{color:var(--text);}
.footer-bottom{
  border-top:1px solid var(--line-soft);padding-top:22px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
}
.footer-bottom .copyright{font-size:12.5px;color:var(--muted);}
.footer-bottom .upsell-link{font-size:12.5px;color:var(--muted);}
.footer-bottom .upsell-link a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;}
.footer-bottom .upsell-link a:hover{color:var(--text-dim);}

/* ---- utility ---------------------------------------------------------------- */
.mt-0{margin-top:0;}
.center{text-align:center;}
.small{font-size:13px;}