/* ============================================================
   obsidian_cut — Dark Retro Barbershop Template
   Palette: Charcoal #1c1c1c · Gold #b8860b · Warm text #f5f0e8
            Surface #222 · Muted #8a7968 · Accent red #9b1c1c
   Fonts:   Bebas Neue · Lato
   ============================================================ */

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

:root {
  --clr-bg:       #1c1c1c;
  --clr-surface:  #232323;
  --clr-surface2: #2a2a2a;
  --clr-gold:     #b8860b;
  --clr-gold-l:   #d4a017;
  --clr-cream:    #f5f0e8;
  --clr-muted:    #8a7968;
  --clr-border:   #333;
  --clr-red:      #9b1c1c;
  --ff-display:   'Bebas Neue', Impact, sans-serif;
  --ff-body:      'Lato', system-ui, sans-serif;
  --radius:       .5rem;
  --shadow-gold:  0 4px 24px rgba(184,134,11,.25);
  --transition:   .3s ease;
  --max-w:        1200px;
  --header-h:     70px;
}

html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--ff-body); background: var(--clr-bg); color: var(--clr-cream); line-height: 1.7; -webkit-font-smoothing: antialiased; }

/* ---- Utility ---- */
.oc-container { max-width: var(--max-w); margin-inline: auto; padding-inline: 1.5rem; }
.oc-label { font-family: var(--ff-body); font-size: .7rem; font-weight: 900; letter-spacing: .25em; text-transform: uppercase; color: var(--clr-gold); margin-bottom: .5rem; display: block; }
.oc-section-title { font-family: var(--ff-display); font-size: clamp(2.5rem, 5.5vw, 4.5rem); letter-spacing: .04em; line-height: .95; color: var(--clr-cream); margin-bottom: 2.5rem; }
.oc-section-title em { font-style: normal; color: var(--clr-gold); }

/* ---- Buttons ---- */
.oc-btn { display: inline-flex; align-items: center; padding: .875rem 2rem; font-family: var(--ff-body); font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 2px solid transparent; border-radius: 0; transition: all var(--transition); white-space: nowrap; }
.oc-btn--gold { background: var(--clr-gold); color: var(--clr-bg); border-color: var(--clr-gold); }
.oc-btn--gold:hover { background: var(--clr-gold-l); border-color: var(--clr-gold-l); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.oc-btn--ghost { background: transparent; border-color: rgba(245,240,232,.4); color: var(--clr-cream); }
.oc-btn--ghost:hover { border-color: var(--clr-cream); transform: translateY(-2px); }
.oc-btn--wide { width: 100%; justify-content: center; }

/* ---- Reveal ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .1s; }
.reveal--d2 { transition-delay: .2s; }

/* ========== HEADER ========== */
.oc-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; height: var(--header-h); background: rgba(20,20,20,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--clr-border); transition: border-color var(--transition); }
.oc-header.scrolled { border-color: var(--clr-gold); }
.oc-header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.oc-logo { font-family: var(--ff-display); font-size: 1.5rem; letter-spacing: .08em; color: var(--clr-cream); text-decoration: none; }
.oc-logo em { color: var(--clr-gold); font-style: normal; }
.oc-nav ul { display: flex; gap: 2.5rem; list-style: none; }
.oc-nav a { font-size: .72rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--clr-muted); text-decoration: none; transition: color var(--transition); }
.oc-nav a:hover { color: var(--clr-gold); }
.oc-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.oc-burger span { display: block; width: 22px; height: 2px; background: var(--clr-cream); border-radius: 2px; transition: var(--transition); }

/* ========== DRAWER ========== */
.oc-drawer { position: fixed; inset-block-start: var(--header-h); inset-inline-start: 0; inset-block-end: 0; width: 78%; max-width: 280px; background: var(--clr-surface); border-right: 1px solid var(--clr-border); z-index: 99; transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); padding: 2rem 1.5rem; }
.oc-drawer.open { transform: none; }
.oc-drawer ul { list-style: none; display: flex; flex-direction: column; }
.oc-drawer__link { display: block; padding: .9rem .5rem; font-size: .85rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--clr-cream); text-decoration: none; border-bottom: 1px solid var(--clr-border); transition: color var(--transition); }
.oc-drawer__link:hover { color: var(--clr-gold); }
.oc-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 98; display: none; }
.oc-backdrop.show { display: block; }

/* ========== HERO ========== */
.oc-hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: var(--header-h); overflow: hidden; background: #111; }
.oc-hero__overlay { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(184,134,11,.04) 0px, rgba(184,134,11,.04) 1px, transparent 1px, transparent 60px); pointer-events: none; }
.oc-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(184,134,11,.08) 0%, transparent 60%); pointer-events: none; }
.oc-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: center; padding-block: 6rem; }
.oc-hero__eyebrow { font-size: .72rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--clr-gold); margin-bottom: 1.25rem; display: flex; align-items: center; gap: .75rem; }
.oc-hero__eyebrow::before { content: ''; display: block; width: 2rem; height: 1px; background: var(--clr-gold); }
.oc-hero__title { font-family: var(--ff-display); font-size: clamp(4rem, 8vw, 7rem); letter-spacing: .03em; line-height: .9; margin-bottom: 1.75rem; }
.oc-hero__title em { color: var(--clr-gold); font-style: normal; display: block; }
.oc-hero__sub { font-size: 1.05rem; color: var(--clr-muted); max-width: 46ch; margin-bottom: 2.5rem; line-height: 1.8; }
.oc-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.oc-hero__badges { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-end; }
.oc-badge { background: var(--clr-surface); border: 1px solid var(--clr-border); padding: 1.5rem 2rem; text-align: center; min-width: 180px; border-top: 3px solid var(--clr-gold); }
.oc-badge strong { font-family: var(--ff-display); font-size: 2.5rem; letter-spacing: .04em; color: var(--clr-gold); display: block; line-height: 1; }
.oc-badge span { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--clr-muted); }

/* ========== SERVICES ========== */
.oc-services { padding: 5.5rem 0; background: var(--clr-surface); }
.oc-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.oc-service-cat { background: var(--clr-surface2); border: 1px solid var(--clr-border); padding: 2rem; }
.oc-service-cat__title { font-family: var(--ff-display); font-size: 1.5rem; letter-spacing: .06em; color: var(--clr-gold); margin-bottom: 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--clr-border); }
.oc-menu { list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.oc-menu li { display: flex; justify-content: space-between; align-items: center; padding-bottom: .75rem; border-bottom: 1px dashed var(--clr-border); }
.oc-menu li:last-child { border-bottom: none; padding-bottom: 0; }
.oc-menu span { font-size: .9rem; color: var(--clr-cream); }
.oc-menu strong { font-size: .9rem; font-weight: 900; color: var(--clr-gold); white-space: nowrap; }

/* ========== TEAM ========== */
.oc-team { padding: 5.5rem 0; background: var(--clr-bg); }
.oc-team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.oc-barber { overflow: hidden; transition: transform var(--transition); }
.oc-barber:hover { transform: translateY(-4px); }
.oc-barber__photo { aspect-ratio: 3/4; }
.oc-barber__photo--1 { background: linear-gradient(160deg, #3d2b0a, #b8860b); }
.oc-barber__photo--2 { background: linear-gradient(160deg, #1a1a1a, #555); }
.oc-barber__photo--3 { background: linear-gradient(160deg, #1c0a0a, #7f1d1d); }
.oc-barber__photo--4 { background: linear-gradient(160deg, #0a1a1a, #1e4040); }
.oc-barber__info { padding: 1.25rem; background: var(--clr-surface); }
.oc-barber__info h3 { font-family: var(--ff-display); font-size: 1.4rem; letter-spacing: .06em; color: var(--clr-cream); line-height: 1.1; }
.oc-barber__role { font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--clr-gold); margin-top: .25rem; }
.oc-barber__spec { font-size: .8rem; color: var(--clr-muted); margin-top: .35rem; }

/* ========== GALLERY ========== */
.oc-gallery { padding: 5.5rem 0; background: var(--clr-surface); }
.oc-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 220px 220px; gap: 1px; }
.oc-gallery__item { overflow: hidden; transition: filter .4s ease; }
.oc-gallery__item:hover { filter: brightness(1.2); }
.oc-g-tall { grid-row: span 2; }
.oc-g-wide { grid-column: span 2; }
.oc-gallery__item--1 { background: linear-gradient(135deg, #2a1a00, #7a5010); }
.oc-gallery__item--2 { background: linear-gradient(180deg, #111, #2a2a2a); }
.oc-gallery__item--3 { background: linear-gradient(135deg, #1c0000, #7f1d1d); }
.oc-gallery__item--4 { background: linear-gradient(135deg, #0a1015, #1e3a4a); }
.oc-gallery__item--5 { background: linear-gradient(135deg, #1a1000, #4a3800); }

/* ========== BOOKING ========== */
.oc-book { padding: 5.5rem 0; background: var(--clr-bg); }
.oc-book__inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: 5rem; align-items: start; }
.oc-book__intro p { color: var(--clr-muted); margin-bottom: 2.5rem; }
.oc-book__hours { border: 1px solid var(--clr-border); padding: 1.5rem; }
.oc-book__hours-title { font-family: var(--ff-display); font-size: 1.1rem; letter-spacing: .06em; color: var(--clr-gold); margin-bottom: 1rem; }
.oc-hours-row { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px dashed var(--clr-border); font-size: .875rem; }
.oc-hours-row:last-child { border-bottom: none; }
.oc-hours-row span { color: var(--clr-muted); }
.oc-hours-row strong { color: var(--clr-cream); }
/* Form */
.oc-form { display: flex; flex-direction: column; gap: 1.25rem; }
.oc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.oc-form__group { display: flex; flex-direction: column; gap: .4rem; }
.oc-form__group label { font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--clr-muted); }
.oc-form__group input,
.oc-form__group select,
.oc-form__group textarea {
  padding: .75rem 1rem; border: 1px solid var(--clr-border); border-radius: 0;
  font-family: var(--ff-body); font-size: .875rem; background: var(--clr-surface); color: var(--clr-cream);
  outline: none; transition: border-color var(--transition); resize: vertical;
}
.oc-form__group select option { background: #2a2a2a; }
.oc-form__group input:focus,
.oc-form__group select:focus,
.oc-form__group textarea:focus { border-color: var(--clr-gold); }
.oc-form__ok { font-size: .85rem; font-weight: 700; color: var(--clr-gold); text-align: center; min-height: 1.4em; }

/* ========== FOOTER ========== */
.oc-footer { background: #111; border-top: 1px solid var(--clr-border); padding: 1.75rem 0; }
.oc-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.oc-footer p { font-size: .8rem; color: var(--clr-muted); }
.oc-footer__nav { list-style: none; display: flex; gap: 1.5rem; }
.oc-footer__nav a { font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--clr-muted); text-decoration: none; transition: color var(--transition); }
.oc-footer__nav a:hover { color: var(--clr-gold); }

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .oc-hero__inner { grid-template-columns: 1fr; gap: 3rem; }
  .oc-hero__badges { flex-direction: row; align-items: flex-start; }
  .oc-team__grid { grid-template-columns: repeat(2, 1fr); }
  .oc-book__inner { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 768px) {
  .oc-nav, .oc-header .oc-btn { display: none; }
  .oc-burger { display: flex; }
  .oc-services__grid { grid-template-columns: 1fr; }
  .oc-gallery__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .oc-g-tall { grid-row: auto; }
  .oc-g-wide { grid-column: span 2; }
  .oc-form__row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .oc-team__grid { grid-template-columns: 1fr; }
  .oc-gallery__grid { grid-template-columns: 1fr; }
  .oc-g-wide { grid-column: auto; }
  .oc-hero__badges { display: none; }
}