/* Next Level Barbershop — elevator concept: black-cherry, peach, cream; Unbounded + Outfit */
:root { --cherry: #2a0a16; --cherry2: #3d1222; --peach: #ffb38a; --cream: #fff4ea; --rose: #e9c9b8; }
body { font-family: Outfit, system-ui, sans-serif; font-size: 1.07rem; line-height: 1.6; color: var(--cream); background: var(--cherry); }
h1, h2, h3 { font-family: Unbounded, sans-serif; font-weight: 700; line-height: 1.05; margin: 0 0 .5em; }
a { color: var(--peach); }
:focus-visible { outline: 3px solid var(--peach); outline-offset: 3px; }
.demo-banner { background: var(--peach); color: var(--cherry); font-weight: 500; }
.ph { background: #fff3b0; color: #4d3b00; }
.lvl { font: 500 .8rem Unbounded, sans-serif; color: var(--peach); margin-bottom: 10px; }
.fine { font-size: .88rem; color: var(--rose); }

/* header: elevator car with floor display and round floor buttons */
.car { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 16px; padding: 10px clamp(16px, 3vw, 40px); background: rgba(42,10,22,.95); border-bottom: 1px solid #5a2236; }
.nl-logo { display: flex; align-items: center; gap: 8px; color: var(--cream); text-decoration: none; font: 700 1rem/1 Unbounded, sans-serif; }
.nl-logo svg { width: 30px; height: 30px; color: var(--peach); }
.nl-logo small { display: block; font: 400 .72rem Outfit, sans-serif; color: var(--rose); margin-top: 3px; }
.floor-display { margin-left: auto; display: flex; align-items: center; gap: 6px; background: #120308; border: 2px solid #5a2236; padding: 4px 12px; font: 700 1.2rem/1 "Courier New", monospace; color: var(--peach); text-shadow: 0 0 8px rgba(255,179,138,.7); min-width: 74px; justify-content: center; }
.floor-display .arrow { font-size: .8rem; }
.floor-btns { display: none; list-style: none; margin: 0; padding: 0; gap: 10px; }
.floor-btns a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--rose); color: var(--cream); text-decoration: none; font: 700 .95rem Unbounded, sans-serif; }
.floor-btns a:hover, .floor-btns a[aria-current] { background: var(--peach); color: var(--cherry); border-color: var(--peach); box-shadow: 0 0 12px rgba(255,179,138,.6); }
.nav-toggle { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--rose); background: transparent; display: grid; place-items: center; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 18px; height: 2px; background: var(--cream); position: relative; transition: transform .2s; }
.nav-toggle span::before { position: absolute; top: -6px; } .nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--cherry2); padding: 10px clamp(16px, 3vw, 40px) 22px; border-bottom: 2px solid var(--peach); }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu a { display: flex; gap: 14px; align-items: center; padding: 12px 0; color: var(--cream); text-decoration: none; font-weight: 500; font-size: 1.15rem; border-bottom: 1px solid #5a2236; }
.mobile-menu b { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--peach); display: grid; place-items: center; font: 700 .8rem Unbounded, sans-serif; color: var(--peach); }
@media (min-width: 900px) { .floor-btns { display: flex; } .nav-toggle { display: none; } .floor-display { margin-left: 24px; } .car nav { margin-left: auto; } }

/* buttons: squared with double rule, up-arrow */
.btn-up { display: inline-flex; align-items: center; gap: 10px; background: var(--peach); color: var(--cherry); text-decoration: none; font-weight: 700; padding: 14px 22px; border-radius: 4px; border: 0; box-shadow: 0 0 0 2px var(--cherry), 0 0 0 4px var(--peach); cursor: pointer; font-size: 1rem; }
.btn-up:hover { background: var(--cream); color: var(--cherry); }
.btn-up--alt { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 2px var(--rose); }

/* lobby */
.lobby { display: grid; gap: 30px; padding: clamp(40px, 7vw, 90px) clamp(16px, 3vw, 40px); max-width: 1240px; margin: 0 auto; }
.lobby h1 { font-size: clamp(2.3rem, 6.5vw, 4.8rem); font-weight: 900; letter-spacing: -.02em; }
.lobby-copy > p { max-width: 32em; color: var(--rose); font-size: 1.15rem; }
.lobby-cta { display: flex; flex-wrap: wrap; gap: 18px; margin: 26px 0 18px; }
.walkin { display: inline-block; border: 1px dashed var(--peach); padding: 6px 12px; color: var(--cream) !important; font-size: .98rem !important; }
.lobby-photo { margin: 0; position: relative; background: var(--cherry2); overflow: hidden; border: 3px solid var(--peach); outline: 10px solid var(--cherry2); }
.lobby-photo::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(255,179,138,.55); }
.lobby-photo img { width: 100%; aspect-ratio: 9/11; object-fit: cover; }
.lobby-photo figcaption { position: absolute; left: 12px; bottom: 12px; }
@media (min-width: 900px) { .lobby { grid-template-columns: minmax(0,1.3fr) minmax(0,.8fr); align-items: center; } }

/* menu: wide rows with level lines */
.menu { background: var(--cream); color: var(--cherry); padding: clamp(60px, 9vw, 110px) clamp(16px, 3vw, 40px); }
.menu > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.menu .lvl { color: #9a3b1d; }
.menu h2 { font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 900; }
.menu-rows { border-top: 3px solid var(--cherry); }
.mrow { display: grid; grid-template-columns: minmax(0,1fr); gap: 4px 30px; padding: 24px 0; border-bottom: 1px solid #d9b9a6; }
.mrow h3 { font-size: 1.3rem; margin: 0; }
.mrow p { margin: 0; color: #5a2a36; }
.mrow .ph { justify-self: start; }
@media (min-width: 760px) { .mrow { grid-template-columns: 1.1fr 1.6fr auto; align-items: baseline; } }

/* VIP clock */
.vip { padding: clamp(60px, 9vw, 110px) clamp(16px, 3vw, 40px); max-width: 1100px; margin: 0 auto; }
.vip h2 { font-size: clamp(1.9rem, 5vw, 3.4rem); max-width: 14em; }
.vip-clock { display: grid; gap: 18px; margin: 30px 0; }
.slot { background: #120308; border: 2px solid #5a2236; padding: 26px; }
.slot .t { font: 900 clamp(3.6rem, 12vw, 6rem)/1 Unbounded, sans-serif; color: var(--peach); text-shadow: 0 0 18px rgba(255,179,138,.45); }
.slot .ampm { font: 700 1.2rem Unbounded, sans-serif; margin-left: 8px; color: var(--rose); }
.slot p { margin: 12px 0 0; color: var(--rose); }
@media (min-width: 760px) { .vip-clock { grid-template-columns: 1fr 1fr; } }

/* crew */
.crew { background: var(--cherry2); padding: clamp(60px, 9vw, 110px) clamp(16px, 3vw, 40px); }
.crew > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.crew h2 { font-size: clamp(2rem, 5.5vw, 3.8rem); }
.crew-grid { display: grid; gap: 30px; margin: 30px auto; }
.barber img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--cherry); border-bottom: 6px solid var(--peach); }
.barber h3 { margin-top: 18px; font-size: 1.5rem; }
.barber p { color: var(--rose); }
@media (min-width: 760px) { .crew-grid { grid-template-columns: 1fr 1fr; } .barber:nth-child(2) { margin-top: 70px; } }
.overheard { margin: 40px auto 20px; padding: 26px 0; border-top: 1px solid #5a2236; border-bottom: 1px solid #5a2236; text-align: center; }
.overheard p { font: 500 clamp(1.2rem, 3vw, 1.7rem)/1.4 Unbounded, sans-serif; color: var(--cream); margin-bottom: 10px; }
.overheard footer { font-size: .9rem; color: var(--rose); }

/* shaft: vertical photo row */
.shaft { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; padding: 6px; background: #120308; }
.shaft button { padding: 0; border: 0; background: var(--cherry2); cursor: zoom-in; }
.shaft img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.shaft .photo-note { grid-column: 1 / -1; justify-self: center; margin: 8px; }

/* pine hills */
.pinehills { display: grid; gap: 30px; padding: clamp(60px, 9vw, 110px) clamp(16px, 3vw, 40px); max-width: 1240px; margin: 0 auto; }
.pinehills h2 { font-size: clamp(2rem, 5.5vw, 3.6rem); }
.tel a { font: 900 clamp(1.6rem, 5vw, 2.4rem) Unbounded, sans-serif; color: var(--peach); text-decoration: none; }
.ph-map { min-height: 340px; background: var(--cherry2); border: 3px solid var(--peach); border-radius: 0 0 120px 0; overflow: hidden; }
.ph-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }
@media (min-width: 900px) { .pinehills { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); } }

/* roof form */
.roof { background: var(--peach); color: var(--cherry); padding: clamp(56px, 8vw, 96px) clamp(16px, 3vw, 40px); }
.roof > * { max-width: 820px; margin-left: auto; margin-right: auto; }
.roof .lvl { color: var(--cherry); }
.roof h2 { font-size: clamp(2rem, 5.5vw, 3.4rem); }
.roof-form { display: grid; gap: 14px; }
.field label { display: block; font-weight: 700; margin-bottom: 5px; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 2px solid var(--cherry); border-radius: 4px; background: var(--cream); color: var(--cherry); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--cherry); outline-offset: 2px; }
.roof .field-error { color: #fff; background: #7a1010; padding: 3px 8px; display: none; }
.roof .field.has-error .field-error { display: inline-block; }
.roof .btn-up { background: var(--cherry); color: var(--cream); box-shadow: 0 0 0 2px var(--peach), 0 0 0 4px var(--cherry); justify-self: start; }
.roof :focus-visible { outline-color: var(--cherry); }
@media (min-width: 640px) { .roof-form { grid-template-columns: 1fr 1fr 1fr; } .roof-form .field:nth-child(4), .roof .btn-up { grid-column: 1 / -1; } }

/* footer: elevator panel */
.panel { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; padding: 44px clamp(16px, 3vw, 40px); background: #120308; }
.panel-btns { display: grid; grid-template-columns: repeat(2, 38px); gap: 8px; }
.panel-btns span { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #5a2236; display: grid; place-items: center; font: 700 .8rem Unbounded, sans-serif; color: var(--rose); }
.panel-btns .on { border-color: var(--peach); color: var(--peach); box-shadow: 0 0 10px rgba(255,179,138,.6); }
.panel > div:last-child { min-width: 0; flex: 1 1 280px; }
.panel-name { font: 900 1.6rem Unbounded, sans-serif; margin: 0 0 6px; }
.panel p { overflow-wrap: anywhere; }

/* rooftop: VIP hours + location together */
.vip { padding-bottom: clamp(60px, 9vw, 110px); }
.roof-where { display: grid; gap: 26px; margin-top: 40px; padding-top: 34px; border-top: 1px solid #5a2236; }
.ph-h { font-size: clamp(1.6rem, 4vw, 2.4rem); }
@media (min-width: 900px) { .roof-where { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); } }
.demo-chip { display: inline-block; font-size: .8rem; font-weight: 700; border: 1px dashed currentColor; padding: 3px 9px; }
.menu .fine { color: #5a2a36; margin-top: 18px; }
.menu .fine a { color: #9a3b1d; }
.mrow { grid-template-columns: minmax(0,1fr); }
@media (min-width: 760px) { .mrow { grid-template-columns: 1.1fr 1.6fr; } }
.demo-line { margin-bottom: 18px; }