@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Great+Vibes&display=swap');

@font-face {
  font-family: 'Lydian Cursive';
  src: url('assets/fonts/LydianCursive.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Venus';
  src: url('assets/fonts/Venus-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Venus';
  src: url('assets/fonts/Venus-BoldCondensed.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --background: oklch(13.5% 0 0);
  --foreground: oklch(98.5% 0 0);
  --surface: oklch(18.5% 0 0);
  --surface-2: oklch(21.5% 0 0);
  --deep: oklch(10.5% 0 0);
  --secondary: oklch(21.5% 0 0);
  --muted-foreground: oklch(74% 0 0);
  --border: oklch(100% 0 0 / 0.1);
  --input: oklch(100% 0 0 / 0.14);
  --ring: oklch(60% 0.148 255);
  --barber-red: oklch(57.71% 0.2152 27.33);
  --barber-blue: oklch(54.62% 0.2153 262.88);
  --radius: 1.125rem;
  --shadow-soft: 0 20px 50px -25px oklch(0% 0 0 / 0.9);
  --shadow-lift: 0 30px 70px -30px oklch(0% 0 0);
  --shadow-glow: 0 14px 34px -14px oklch(57.7% 0.2152 27.33 / 0.45);
  --font-script: "Great Vibes", cursive;
  --font-heading: "Lydian Cursive", cursive;
  --font-body: "Venus", "Inter", sans-serif;
}

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

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
svg { display: inline-block; vertical-align: middle; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .wrap { padding: 0 2rem; } }

/* Header */
header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  transition: background-color .4s, backdrop-filter .4s, box-shadow .4s;
}
header.scrolled {
  background-color: oklch(13.5% 0 0 / 0.75);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border);
}
nav {
  max-width: 72rem; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: 1rem;
  padding: 1.5rem 1.25rem;
}
@media (min-width: 640px) { nav { padding: 1.75rem 2rem; } }

.logo { font-family: var(--font-script); font-size: 1.85rem; line-height: 1.5; padding: .5rem .75rem .5rem 0; white-space: nowrap; }
@media (min-width: 640px) { .logo { font-size: 2.3rem; } }
.script-accent {
  background-image: linear-gradient(to bottom, var(--barber-red) 0%, oklch(98.5% 0 0) 48%, oklch(98.5% 0 0) 56%, var(--barber-blue) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block; margin-right: -.04em; padding-right: .14em;
}

.nav-links { display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 900px) { .nav-links { display: flex; gap: 2rem; } }
.nav-links a.navlink { font-size: .875rem; color: var(--muted-foreground); transition: color .25s; }
.nav-links a.navlink:hover { color: var(--barber-red); }

.btn-barber {
  background-image: linear-gradient(120deg, var(--barber-red) 0%, oklch(45% .16 320) 52%, var(--barber-blue) 100%);
  color: oklch(98.5% 0 0);
  border-radius: 999px; padding: .5rem 1.25rem; font-size: .875rem; font-weight: 600;
  box-shadow: 0 14px 34px -16px oklch(0% 0 0 / .85);
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s, background-color .28s, color .28s;
  display: inline-flex; align-items: center;
}
.btn-barber:hover {
  color: oklch(13.5% 0 0); background-color: oklch(100% 0 0); background-image: none;
  transform: translateY(-2px); box-shadow: 0 18px 40px -18px oklch(0% 0 0 / .9);
}

.menu-btn {
  display: flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--border); color: var(--foreground);
  transition: background-color .2s;
}
.menu-btn:hover { background-color: var(--secondary); }
@media (min-width: 900px) { .menu-btn { display: none; } }

.icon-circle-btn {
  display: flex; width: 2.25rem; height: 2.25rem; flex-shrink: 0; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--input); color: var(--muted-foreground);
  transition: color .25s, border-color .25s, background-color .25s;
}
.icon-circle-btn:hover { color: var(--barber-red); border-color: var(--barber-red); background-color: var(--secondary); }

.mobile-menu {
  display: none; flex-direction: column; gap: 1.25rem;
  padding: 1.5rem 1.25rem 2rem; background-color: var(--deep); border-top: 1px solid var(--border);
}
.mobile-menu.open { display: flex; }
.mobile-menu a.navlink { font-size: 1rem; color: var(--muted-foreground); }
@media (min-width: 900px) { .mobile-menu { display: none !important; } }

/* Decorative side artwork (desktop only) */
main { position: relative; }
.side-art {
  display: none;
  position: absolute;
  top: 0;
  width: 170px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.side-art-left { left: 0; }
.side-art-right { right: 0; }
.side-art-icon {
  position: absolute;
  color: oklch(52% 0 0);
  opacity: .26;
}
@media (min-width: 1500px) {
  .side-art { display: block; }
}

/* Sections */
section { border-top: 1px solid var(--border); padding: 5rem 1.25rem; }
@media (min-width: 640px) { section { padding: 6rem 2rem; } }
#home { border-top: none; padding-top: 8rem; padding-bottom: 5rem; }
@media (min-width: 640px) { #home { padding-top: 10rem; } }

.eyebrow { font-size: .875rem; font-weight: 500; color: var(--barber-red); }
h2 { margin-top: .75rem; font-size: 2.25rem; font-weight: 400; font-family: var(--font-heading); }
@media (min-width: 640px) { h2 { font-size: 3rem; } }
.section-lede { margin-top: 1rem; max-width: 36rem; font-size: 1.0625rem; line-height: 1.625; color: var(--muted-foreground); font-family: var(--font-body); font-weight: 300; }

/* Hero */
.hero-grid { max-width: 72rem; margin: 0 auto; display: grid; align-items: center; gap: 3.5rem; }
@media (min-width: 820px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--border); border-radius: 999px; padding: .375rem .875rem;
  font-size: .75rem; color: var(--muted-foreground);
}
.pill-dot { width: .375rem; height: .375rem; border-radius: 999px; background-color: var(--barber-red); }

h1 { margin-top: 1.5rem; font-size: 2.5rem; font-weight: 400; line-height: 1.15; font-family: var(--font-heading); }
@media (min-width: 640px) { h1 { font-size: 3.75rem; } }
@media (min-width: 1024px) { h1 { font-size: 4.25rem; } }

.price-line { margin-top: 1rem; font-size: .875rem; font-weight: 600; letter-spacing: .025em; color: var(--barber-red); }
@media (min-width: 640px) { .price-line { font-size: 1rem; } }
.subhead { margin-top: 1rem; font-size: 1.25rem; font-weight: 300; font-family: var(--font-body); }
@media (min-width: 640px) { .subhead { font-size: 1.375rem; } }
.blurb { margin-top: .75rem; max-width: 28rem; font-size: 1.0625rem; line-height: 1.625; color: var(--muted-foreground); font-family: var(--font-body); font-weight: 300; }

.cta-row { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.cta-group { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

.cta-glow { transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s, background-color .25s; }
.cta-glow:hover { border-color: var(--barber-red); box-shadow: var(--shadow-glow); transform: translateY(-2px); }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 999px; border: 1px solid transparent; background-color: var(--foreground);
  color: var(--background); padding: .875rem 1.75rem; font-size: .875rem; font-weight: 600;
  box-shadow: var(--shadow-soft);
}
.btn-primary svg { transition: transform .25s; }
.btn-primary:hover svg { transform: translateX(4px); }

.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 999px; border: 1px solid var(--input); padding: .625rem 1.25rem;
  font-size: .875rem; font-weight: 500; color: var(--muted-foreground);
}
.btn-outline:hover { background-color: var(--secondary); }

.badges { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .625rem; }
.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 999px; background-color: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
  padding: .5rem 1rem; font-size: .75rem; color: var(--muted-foreground);
}
.badge svg { color: var(--barber-red); }

.hero-photo { aspect-ratio: 4 / 5; width: 100%; display: block; border-radius: 1.5rem; object-fit: cover; object-position: 50% 35%; box-shadow: var(--shadow-lift); }

/* Cards */
.grid-cards { margin-top: 3rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.grid-cards > li { flex: 1 1 240px; max-width: 340px; }

.services-grid { max-width: 800px; margin-left: auto; margin-right: auto; }
.services-grid > li { flex: 0 1 calc(50% - 0.5rem); max-width: calc(50% - 0.5rem); }
@media (min-width: 900px) {
  .services-grid > li { flex: 0 0 250px; max-width: 250px; }
}

.reviews-grid > li { flex: 1 1 100%; max-width: 100%; }
@media (min-width: 640px) { .reviews-grid > li { flex: 0 1 calc(50% - 0.5rem); max-width: calc(50% - 0.5rem); } }
@media (min-width: 640px) { .reviews-grid { max-width: 56rem; margin-left: auto; margin-right: auto; } }

.card-surface {
  height: 100%; background-color: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-soft); border-radius: 1.25rem;
  transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s, background-color .25s;
  display: flex; flex-direction: column; padding: 1.5rem;
}
.card-surface:hover {
  border-color: var(--barber-red); box-shadow: var(--shadow-lift);
  background-color: var(--surface-2); transform: translateY(-4px);
}

.card-barber {
  background-image: linear-gradient(135deg, oklch(57.71% .2152 27.33 / 0) 0%, oklch(54.62% .2153 262.88 / 0) 100%);
  transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s, background-image .3s, background-color .3s;
}
.card-barber:hover {
  background-image: linear-gradient(135deg, oklch(57.71% .2152 27.33 / .12) 0%, oklch(54.62% .2153 262.88 / .12) 100%);
}

.card-icon {
  display: flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center;
  border-radius: .75rem; background-color: var(--secondary); color: var(--foreground);
  transition: color .25s;
}
.card-surface:hover .card-icon { color: var(--barber-red); }
.card-surface h3 { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 600; }
.why-grid h3 { font-size: 1.25rem; }
.card-surface p { margin-top: .375rem; font-size: .9375rem; line-height: 1.625; color: var(--muted-foreground); font-family: var(--font-body); font-weight: 300; }
.card-price { margin-top: 1.25rem; font-size: .875rem; font-weight: 600; color: var(--foreground); }
.why-grid svg.check { color: var(--barber-red); }

/* Gallery */
.gallery-columns { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 640px) { .gallery-columns { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.gallery-item { margin: 0; }
.gallery-frame {
  display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; border-radius: 1rem; position: relative; overflow: visible;
  border: none; padding: 0; cursor: pointer;
}
.gallery-clip { display: block; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.gallery-media { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .28s cubic-bezier(.22,1,.36,1), filter .28s; }
.gallery-frame:hover .gallery-media { transform: scale(1.07); filter: brightness(1.1); }

@property --pole-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.gallery-frame::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: calc(1rem + 6px);
  padding: 4px;
  --pole-angle: 0deg;
  background: conic-gradient(from var(--pole-angle),
    #dc2626, #fff, #2563eb, #fff, #dc2626, #fff, #2563eb, #fff, #dc2626);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 5;
  animation: barber-pole-spin 3s linear infinite;
  animation-play-state: paused;
}
.gallery-frame:hover::before { opacity: 1; animation-play-state: running; }

@keyframes barber-pole-spin {
  from { --pole-angle: 360deg; }
  to { --pole-angle: 0deg; }
}

/* Reviews */
.stars { display: flex; gap: .125rem; color: var(--barber-red); }
.stars svg { fill: var(--barber-red); }
blockquote { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.625; font-family: var(--font-body); font-weight: 300; }
figcaption { margin-top: 1.25rem; font-size: .875rem; color: var(--muted-foreground); }

/* About */
.about-grid { max-width: 72rem; margin: 0 auto; display: grid; align-items: center; gap: 3rem; }
@media (min-width: 820px) { .about-grid { grid-template-columns: 0.8fr 1fr; } }
.about-photo { aspect-ratio: 4/5; width: 100%; max-width: 24rem; border-radius: 1.5rem; object-fit: cover; box-shadow: var(--shadow-soft); }
.about-heading { margin-top: 0; margin-bottom: 1rem; }
.about-text { font-size: 1.0625rem; line-height: 1.625; color: var(--muted-foreground); font-family: var(--font-body); font-weight: 300; }
@media (min-width: 640px) { .about-text { font-size: 1.125rem; } }
@media (min-width: 1024px) { .about-text { font-size: 1.25rem; } }

/* Steps */
.steps-grid { counter-reset: step; }
.step { position: relative; }
.step-num {
  display: flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--border); font-size: .875rem; font-weight: 600;
}
.step-arrow { margin: .75rem auto 0; text-align: center; color: var(--muted-foreground); }
@media (min-width: 760px) {
  .step-arrow { position: absolute; right: -1rem; top: 50%; margin: 0; transform: translateY(-50%) rotate(-90deg); }
}

/* CTA / Book */
#book { background-color: var(--deep); padding: 6rem 1.25rem; text-align: center; }
@media (min-width: 640px) { #book { padding: 7rem 2rem; } }
#book .inner { max-width: 42rem; margin: 0 auto; }
#book h2 { text-align: center; }
#book .lede { margin: 1.25rem auto 0; max-width: 36rem; font-size: 1.0625rem; line-height: 1.625; color: var(--muted-foreground); font-family: var(--font-body); font-weight: 300; }
@media (min-width: 640px) { #book .lede { font-size: 1.125rem; } }
.book-actions { margin-top: 2.25rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.btn-primary-lg {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 999px; background-color: var(--foreground); color: var(--background);
  padding: 1.125rem 2.5rem; font-size: 1rem; font-weight: 600; box-shadow: var(--shadow-lift);
}
.limited { font-size: .875rem; font-weight: 600; color: var(--barber-red); }
.phone-link { font-size: .875rem; color: var(--muted-foreground); }
.phone-link:hover { color: var(--barber-red); }

/* FAQ */
#faq .wrap { max-width: 48rem; }
#faq h2 { font-family: var(--font-body); font-weight: 300; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  padding: 1rem 0; text-align: left; font-size: 1.0625rem; font-weight: 300;
  font-family: var(--font-body);
}
.faq-q svg { transition: transform .2s; color: var(--muted-foreground); flex-shrink: 0; }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; font-size: .9375rem; color: var(--muted-foreground); font-family: var(--font-body); font-weight: 300; }
.faq-item.open .faq-a { max-height: 10rem; }
.faq-a p { padding-bottom: 1rem; }

/* Footer */
footer { border-top: 1px solid var(--border); background-color: var(--deep); padding: 3.5rem 1.25rem; }
@media (min-width: 640px) { footer { padding: 3.5rem 2rem; } }
.footer-top {
  max-width: 72rem; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2rem;
}
@media (min-width: 640px) { .footer-top { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer-logo { font-family: var(--font-script); font-size: 2.1rem; line-height: 1.5; padding-right: .5rem; }
.footer-location { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px;
  border: 1px solid var(--input); padding: .625rem 1.25rem; font-size: .875rem; color: var(--muted-foreground);
  transition: color .25s;
}
.btn-ghost:hover { color: var(--barber-red); }
.btn-footer-cta { border-radius: 999px; border: 1px solid transparent; background-color: var(--foreground); color: var(--background); padding: .625rem 1.25rem; font-size: .875rem; font-weight: 600; }
.copyright { max-width: 72rem; margin: 2.5rem auto 0; font-size: .75rem; color: var(--muted-foreground); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity: 1; transform: none; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; padding: 2rem;
  background-color: oklch(0% 0 0 / 0.9);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: .75rem; }
.lightbox-close {
  position: absolute; top: 1.5rem; right: 1.5rem; width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background-color: oklch(100% 0 0 / .1); color: var(--foreground);
}
.lightbox-close:hover { background-color: oklch(100% 0 0 / .2); }