/* Hollis & Vane Barbers (fictional demo by Weblancer Agency) - inner pages, v3 + depth (Oct 28).
   Loaded after v3.css and depth.css on services, barbers, gallery and book only.
   The homepage does not load this file. Depth effects are driven by depth.js (hero, cards,
   band, staggered 3D reveals) and pages.js (panels, price lists, photo layers, gallery).
   Everything under .d3 only runs with motion allowed; otherwise the pages stay flat and static. */

/* ---------- page hero: same layers as the homepage hero, shorter ---------- */
.hero--page { min-height: 70vh; min-height: 70svh; }
.hero--short { min-height: 58vh; min-height: 58svh; }
@media (min-width: 960px) {
  .hero--page { min-height: 74vh; }
  .hero--short { min-height: 62vh; }
}
.hero--page h1 { max-width: 12em; font-size: clamp(2.5rem, 7.2vw, 4.75rem); }
.hero--page .hero__sub { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.hero--page .hero__sub a { color: var(--text); white-space: nowrap; }
.hero .btn-row { margin-top: 0; }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.kicker .sep { color: var(--text-3); }

.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text-2); max-width: 36em; }
.fine { font-size: .875rem; color: var(--text-3); }
.fine a { color: var(--text-2); }
[data-depth-tilt] { position: relative; }

/* ---------- services: sticky section links ---------- */
.jump { position: sticky; top: 72px; z-index: 20; background: rgba(11,11,11,.94); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (min-width: 960px) { .jump { top: 84px; } }
.jump ul { list-style: none; margin: 0 auto; padding: 0 var(--gut); max-width: calc(var(--wrap) + var(--gut) * 2); display: flex; gap: 1.8rem; overflow-x: auto; scrollbar-width: none; }
.jump ul::-webkit-scrollbar { display: none; }
.jump a { display: block; white-space: nowrap; padding: 1.05rem 0 1rem; font-size: .9rem; font-weight: 500; color: var(--text-2); text-decoration: none; border-bottom: 1px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; }
.jump a:hover { color: var(--text); }
.jump a.is-current { color: var(--text); border-color: var(--accent); }

/* ---------- services: price list ---------- */
.menu { padding-top: clamp(24px, 4vw, 40px); padding-bottom: var(--sec); }
.menu-block { display: grid; gap: 1.6rem clamp(3rem, 6vw, 5.5rem); padding-top: clamp(56px, 8vw, 104px); scroll-margin-top: 140px; }
@media (min-width: 900px) {
  .menu-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
  .menu-block__head { position: sticky; top: 160px; align-self: start; }
}
.menu-block__head h2 { margin-bottom: .35em; }
.menu-block__head .muted { max-width: 24em; margin-bottom: 1.6rem; }
.menu-block__head .kicker { margin-bottom: 1rem; }
.pphoto { position: relative; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line); background: #1a1a1a; aspect-ratio: 16 / 9; }
.pphoto img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .pphoto { aspect-ratio: 4 / 3; } }

.plist { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: .4rem clamp(1.2rem, 3vw, 2.2rem); }
.prices { list-style: none; margin: 0; padding: 0; }
.price { padding: 1.4rem 0 1.3rem; border-bottom: 1px solid var(--line); }
.price:last-child { border-bottom: 0; }
.price__row { display: flex; align-items: baseline; gap: 1rem; }
.price__name { font-size: clamp(1.12rem, 1.8vw, 1.3rem); margin: 0; flex: 1; }
.price__amt { font: 800 1.25rem/1 var(--head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price__desc { color: var(--text-2); font-size: .95rem; margin: .45rem 0 .55rem; max-width: 36em; }
.price__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; }
.price__time { font-size: .85rem; color: var(--text-3); }
.price__note { color: var(--accent); }
.price__book { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; font-size: .88rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.price__book:hover { color: var(--accent-2); }
.price__book svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.price__book:hover svg { transform: translateX(3px); }

.note-box { display: grid; gap: 1.6rem; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 48px -28px rgba(0,0,0,.9); }
@media (min-width: 760px) { .note-box { grid-template-columns: 1fr auto; align-items: center; } }
.note-box h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .35em; }
.note-box p { margin: 0; color: var(--text-2); max-width: 36em; }
.note-box .btn { position: relative; z-index: 4; }

/* ---------- barbers: profile cards ---------- */
.team { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .team { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.profile { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; scroll-margin-top: 110px; box-shadow: 0 1px 0 rgba(255,255,255,.03) inset; }
.profile__photo { aspect-ratio: 4 / 3; overflow: hidden; background: #1a1a1a; }
.profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.profile__body { position: relative; flex: 1; display: flex; flex-direction: column; padding: 3.1rem clamp(1.3rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2rem); }
.profile__avatar { position: absolute; top: -40px; left: clamp(1.3rem, 3vw, 2rem); width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 3px solid var(--card); background: #222; }
.profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile__chair { position: absolute; top: 1.1rem; right: clamp(1.3rem, 3vw, 2rem); font-size: .78rem; color: var(--text-3); letter-spacing: .04em; }
.profile h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin-bottom: .15em; }
.profile__role { font-size: .9rem; color: var(--accent); margin-bottom: 1.1rem; }
.profile__facts { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; font-size: .9rem; color: var(--text-2); padding: .8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 1.1rem; }
.profile__facts b { color: var(--text); font-weight: 600; }
.profile__spec { font-size: .95rem; margin-bottom: .8rem; }
.profile__spec span { color: var(--text-3); }
.profile__body > p:not(.profile__role):not(.profile__spec) { color: var(--text-2); }
.profile .btn { margin-top: auto; align-self: flex-start; position: relative; z-index: 4; }
@media (max-width: 479px) { .profile .btn { align-self: stretch; } }

/* ---------- gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.filter {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .55rem 1rem;
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r);
  cursor: pointer; font-size: .92rem; font-weight: 500; color: var(--text-2);
  transition: color .2s, border-color .2s, background-color .2s;
}
.filter span { font-size: .78rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.filter:hover { color: var(--text); border-color: var(--text-3); }
.filter[aria-pressed="true"] { color: var(--text); border-color: var(--text); background: var(--card-2); }
.filter[aria-pressed="true"] span { color: var(--accent); }
.grid-count { font-size: .85rem; color: var(--text-3); margin: 0 0 2.6rem; }
.grid { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.grid li[hidden] { display: none; }
.shot { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: #1a1a1a; cursor: zoom-in; position: relative; overflow: hidden; color: #fff; }
.shot img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 1s var(--ease); }
.shot:hover img { transform: scale(1.04); }
.shot__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem .9rem .8rem;
  font-size: .82rem; text-align: left; line-height: 1.35; color: #EDEDED;
  background: linear-gradient(0deg, rgba(11,11,11,.88), rgba(11,11,11,0));
  opacity: 0; transition: opacity .3s var(--ease);
}
.shot:hover .shot__cap, .shot:focus-visible .shot__cap { opacity: 1; }
@media (hover: none) { .shot__cap { display: none; } }
.grid-after { margin-top: 3rem; }

.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(5,5,5,.96);
  display: flex; align-items: center; justify-content: center; padding: 64px 12px;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox__fig { margin: 0; max-width: min(1100px, 100%); }
.lightbox__fig img { max-height: calc(100vh - 170px); width: auto; margin: 0 auto; border-radius: var(--r); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); }
.lightbox figcaption { display: flex; justify-content: space-between; gap: 1rem; color: var(--text-2); font-size: .875rem; padding-top: .9rem; }
.lightbox__count { color: var(--text-3); white-space: nowrap; }
.lb-btn {
  position: absolute; width: 48px; height: 48px; display: grid; place-items: center;
  background: rgba(17,17,17,.7); border: 1px solid var(--line-2); border-radius: var(--r);
  color: var(--text); cursor: pointer; transition: border-color .2s, background-color .2s;
}
.lb-btn:hover { border-color: var(--text); }
.lb-close { top: 12px; right: 12px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 759px) { .lb-prev, .lb-next { top: auto; bottom: 10px; transform: none; } }

/* ---------- book ---------- */
#booking { scroll-margin-top: 72px; }
@media (min-width: 960px) { #booking { scroll-margin-top: 84px; } }
.book { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 1000px) { .book { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
.panel { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 4vw, 44px); }
.panel--raised {
  background: var(--card-2); border-color: #3a3a3a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.85), 0 60px 110px -50px rgba(0,0,0,.9);
}
.d3 .panel--raised[data-tilt].is-live {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.85), 0 60px 110px -50px rgba(0,0,0,.9),
    0 calc(var(--lift) * 30px) calc(var(--lift) * 60px) calc(var(--lift) * -20px) rgba(0,0,0,.8);
}
.side { display: grid; gap: 1.25rem; }
@media (min-width: 640px) and (max-width: 999px) { .side { grid-template-columns: 1fr 1fr; align-items: start; } }
.side h2 { font-size: 1.35rem; margin-bottom: 1rem; }
.side .hours { margin: 0; }
.side .status { margin: 1rem 0 0; font-size: .9rem; color: var(--text-2); }

.steps { list-style: none; margin: 0 0 2.2rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: s; }
.steps li { counter-increment: s; font-size: .8rem; color: var(--text-3); padding-top: .75rem; border-top: 2px solid var(--line-2); line-height: 1.3; transition: border-color .3s, color .3s; }
.steps li::before { content: "0" counter(s); display: block; font-variant-numeric: tabular-nums; margin-bottom: .15rem; }
.steps li.is-done { border-color: var(--text-3); color: var(--text-2); }
.steps li.is-current { border-color: var(--accent); color: var(--text); font-weight: 600; }
@media (max-width: 479px) {
  .steps li { font-size: 0; }
  .steps li::before { font-size: .8rem; }
  .steps li.is-current { font-size: .8rem; }
  .steps li.is-current::before { display: inline; margin-right: .35rem; }
}
.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step legend { font: 800 clamp(1.6rem, 3.2vw, 2.1rem)/1.1 var(--head); letter-spacing: -.025em; padding: 0; margin-bottom: .45rem; }
.step legend:focus { outline: none; }
.step__hint { color: var(--text-2); margin-bottom: 1.6rem; }
.step > .err { display: none; }
.options { display: grid; gap: 8px; }
@media (min-width: 620px) { .options--2 { grid-template-columns: 1fr 1fr; } }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt__box {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 62px; padding: .8rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--bg); transition: border-color .2s, background-color .2s, transform .25s var(--ease), box-shadow .25s var(--ease);
}
.opt__box b { display: block; font-weight: 600; }
.opt__box small { display: block; font-size: .825rem; color: var(--text-3); }
.opt__price { font: 800 1.15rem/1 var(--head); font-variant-numeric: tabular-nums; }
.opt:hover .opt__box { border-color: var(--text-3); }
.opt input:checked + .opt__box { border-color: var(--accent); background: #17140f; box-shadow: inset 0 0 0 1px var(--accent); }
.opt input:checked + .opt__box .opt__price { color: var(--accent); }
.opt input:focus-visible + .opt__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt input:disabled + .opt__box { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.d3 .opt:hover input:not(:disabled) + .opt__box { transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgba(0,0,0,.9); }
.d3 .opt:hover input:checked + .opt__box { box-shadow: inset 0 0 0 1px var(--accent), 0 12px 22px -14px rgba(0,0,0,.9); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slots .opt__box { min-height: 46px; justify-content: center; font-size: .9rem; font-variant-numeric: tabular-nums; }
.slots-empty { color: var(--text-2); font-size: .95rem; margin: 0; padding: 1rem; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); grid-column: 1 / -1; }
.field { display: grid; gap: .45rem; margin-bottom: 1.3rem; }
.field label, .field .label { font-size: .9rem; font-weight: 500; }
.opt-label { font-weight: 400; color: var(--text-3); }
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select {
  width: 100%; min-height: 52px; padding: .75rem 1rem; background: var(--bg); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r); transition: border-color .2s;
  color-scheme: dark;
}
.field input::placeholder, .field textarea::placeholder { color: #6E6E6E; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field .err { display: none; font-size: .85rem; color: #E8998A; }
.field.is-bad .err { display: block; }
.field.is-bad input:not([type="checkbox"]), .field.is-bad textarea { border-color: #C9705F; }
.field.is-bad .slots .opt__box { border-color: #7A4A41; }
.row2 { display: grid; gap: 0 1rem; }
@media (min-width: 620px) { .row2 { grid-template-columns: 1fr 1fr; } }
.check { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400 !important; font-size: .925rem !important; color: var(--text-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: .2rem 0 0; accent-color: var(--accent); flex: none; }
.summary { list-style: none; margin: 0 0 1.8rem; padding: 0; border-top: 1px solid var(--line-2); }
.summary li { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line-2); font-size: .925rem; }
.summary span { color: var(--text-3); }
.summary b { font-weight: 600; text-align: right; }
.form-alert { display: none; margin: 0 0 1.2rem; padding: .85rem 1rem; border-left: 2px solid #C9705F; border-radius: 0 var(--r) var(--r) 0; background: rgba(201,112,95,.1); color: #F1C7BE; font-size: .925rem; }
.form-alert.is-on { display: block; }
.form-alert.is-ok { border-color: #7FB77E; background: rgba(127,183,126,.1); color: #D3E8D2; }
.form-nav { display: flex; align-items: center; gap: .75rem; padding-top: 1.4rem; border-top: 1px solid var(--line-2); margin-top: 1rem; }
.form-nav .spacer { flex: 1; }
.form-nav [hidden] { display: none; }
.done h2 { font-size: clamp(1.9rem, 4vw, 2.5rem); }
.done p { color: var(--text-2); }
.done strong { color: var(--text); font-weight: 600; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--text-2); }
.contact-list li:first-child { padding-top: 0; }
.contact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-list b { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: var(--text-3); margin-bottom: .2rem; }
.contact-list a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.contact-list a:hover { border-color: var(--accent); }

.qa { display: grid; gap: clamp(3rem, 6vw, 5rem); }
@media (min-width: 960px) { .qa { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.faq { border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item h3 { margin: 0; font-size: inherit; }
.faq__btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 60px; padding: 1.1rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  font: 700 clamp(1.02rem, 1.6vw, 1.12rem)/1.3 var(--head); letter-spacing: -.01em;
}
.faq__btn:hover { color: var(--accent-2); }
.faq__btn::after { content: "+"; font: 300 1.5rem/1 var(--body); color: var(--accent); transition: transform .3s var(--ease); flex: none; }
.faq__btn[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq__panel { padding: 0 2rem 1.3rem 0; color: var(--text-2); }

.find { display: grid; gap: 2rem; }
@media (min-width: 900px) { .find { grid-template-columns: 1fr 1.6fr; gap: clamp(3rem, 6vw, 5rem); align-items: center; } }
.find .btn-row { margin-top: 1.6rem; }

/* ---------- depth (motion allowed only) ---------- */
/* photo layers: the photo sits a little deeper than its frame and drifts on scroll */
.d3 [data-parallax] img { scale: 1.14; will-change: transform; }
/* gallery: each column of photos on its own layer */
.d3 .grid li { will-change: transform; }
.d3 .shot { transition: opacity .9s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.d3 .shot:hover { border-color: #3a3a3a; box-shadow: 0 26px 44px -22px rgba(0,0,0,.95); }
/* lightbox opens from slightly behind */
.d3 .lightbox__fig { opacity: 0; transform: perspective(1400px) translate3d(0, 24px, -90px) rotateX(5deg); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.d3 .lightbox.is-open .lightbox__fig { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .d3 [data-parallax] img { scale: none; }
}
.side .hours { font-size: .9rem; }
.side .hours td { white-space: nowrap; padding-left: .8rem; }
.side .hours tr.is-today th::after { display: block; margin: .15rem 0 0; }