/* =============================================================================
   NEW YORK BARBERS — components.css
   Shared components used on every migrated page. Mobile-first.
   Order: buttons · links · header · nav · drawer · shop tile · shop block ·
          hours · price list · reviews · CTA band · footer
   ============================================================================= */

/* ---------- Buttons -------------------------------------------------------- */
/* Outlined/solid uppercase buttons (playbook editorial toolkit). Min 48px tall. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 48px; padding: .85rem 1.4rem; border: 1.5px solid var(--c-black); background: var(--c-black); color: var(--c-white); font-family: var(--f-body); font-size: var(--fs-cap); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; line-height: 1.2; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn:hover { background: var(--c-white); color: var(--c-black); }
.btn--line { background: transparent; color: var(--c-black); }
.btn--line:hover { background: var(--c-black); color: var(--c-white); }
/* Reversed variants for black grounds */
.on-dark .btn, .btn--inv { border-color: var(--c-white); background: var(--c-white); color: var(--c-black); }
.on-dark .btn:hover, .btn--inv:hover { background: transparent; color: var(--c-white); }
.on-dark .btn--line, .btn--inv.btn--line { background: transparent; color: var(--c-white); }
.on-dark .btn--line:hover, .btn--inv.btn--line:hover { background: var(--c-white); color: var(--c-black); }
.btn .arw { font-size: 1.1em; letter-spacing: 0; transition: transform var(--dur) var(--ease); }
.btn:hover .arw { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Text link with underline + arrow */
.link { display: inline-flex; align-items: center; gap: .55em; font-size: var(--fs-cap); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding-block: .45rem; border-bottom: 1.5px solid currentColor; }
.link .arw { letter-spacing: 0; transition: transform var(--dur) var(--ease); }
.link:hover .arw { transform: translateX(3px); }

/* ---------- Header --------------------------------------------------------- */
/* NB: no backdrop-filter/transform on the header (playbook §12 gotcha — it
   would trap the fixed mobile drawer). */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--c-white); border-bottom: var(--hair) solid var(--c-rule); transition: transform .3s var(--ease); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); height: var(--header-h); }
/* Logo: complete lock-up; ≥90px wide (brand minimum). Clear space via padding. */
.site-logo { flex: none; display: block; width: 104px; padding-block: 6px; }
.site-logo img { width: 100%; height: auto; }
@media (min-width: 960px) { .site-logo { width: 124px; } }

/* Primary nav (desktop) */
.nav { display: none; }
@media (min-width: 1080px) {
  .nav { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 2rem); }
  .nav a { font-size: var(--fs-cap); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding-block: .5rem; border-bottom: 1.5px solid transparent; transition: border-color var(--dur) var(--ease); }
  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: currentColor; }
  .nav__sep { width: 1px; height: 22px; background: var(--c-rule); }
  .nav .btn { border-bottom-width: 1.5px; padding-inline: 1.15rem; min-height: 44px; }
  .nav .btn:hover { border-bottom-color: var(--c-black); }
}

/* Burger (mobile) — real <button> with aria-expanded */
.burger { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; padding: 0 .2rem 0 .8rem; border: 0; background: none; cursor: pointer; font-size: var(--fs-cap); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.burger__icon { position: relative; width: 26px; height: 12px; }
.burger__icon::before, .burger__icon::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform var(--dur) var(--ease), top var(--dur) var(--ease); }
.burger__icon::before { top: 0; }
.burger__icon::after { top: 10px; }
.burger[aria-expanded="true"] .burger__icon::before { top: 5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__icon::after { top: 5px; transform: rotate(-45deg); }
@media (min-width: 1080px) { .burger { display: none; } }

/* ---------- Mobile drawer -------------------------------------------------- */
/* Hidden by the `hidden` attribute until JS opens it, so it never traps focus
   or shows up for screen readers when closed. Solid black ground. */
.drawer { position: fixed; inset: var(--header-h) 0 0 0; z-index: 99; background: var(--c-black); color: var(--c-white); overflow-y: auto; overscroll-behavior: contain; }
.drawer[hidden] { display: none; }
.drawer__in { display: grid; gap: var(--s-10); padding-block: var(--s-8) var(--s-12); }
.drawer__nav { display: grid; }
.drawer__nav a { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.2rem, 10vw, 3.4rem); line-height: 1.05; text-transform: uppercase; text-decoration: none; padding-block: .35rem; border-bottom: var(--hair) solid var(--c-rule-inv); }
.drawer__shops { display: grid; gap: var(--s-6); }
@media (min-width: 600px) { .drawer__shops { grid-template-columns: 1fr 1fr; } }
.drawer__shop p { font-size: var(--fs-sm); color: var(--c-muted-inv); margin-top: .35rem; }
.drawer__shop .btn-row { margin-top: var(--s-4); }
.drawer__more { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: var(--fs-cap); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.drawer__more a { text-decoration: none; color: var(--c-muted-inv); }
.drawer__more a:hover { color: var(--c-white); }
body.menu-open { overflow: hidden; }

/* ---------- Shop tile (hero portrait link) --------------------------------- */
.shop-tile { position: relative; display: block; overflow: hidden; color: var(--c-white); text-decoration: none; background: var(--c-placeholder); }
.shop-tile picture, .shop-tile img { width: 100%; height: 100%; }
.shop-tile img { object-fit: cover; transition: transform 1.1s var(--ease); }
.shop-tile:hover img { transform: scale(1.03); }
/* D6: functional scrim so the label passes contrast over the photo */
.shop-tile::after { content: ""; position: absolute; inset: 45% 0 0 0; background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / .78)); pointer-events: none; }
.shop-tile__label { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: grid; gap: .25rem; padding: var(--s-4); }
.shop-tile__name { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.7rem, 1rem + 3vw, 3.4rem); line-height: .9; text-transform: uppercase; display: flex; justify-content: space-between; align-items: end; gap: .5rem; }
.shop-tile__name .arw { font-family: var(--f-body); font-size: 1.1rem; transition: transform var(--dur) var(--ease); }
.shop-tile:hover .shop-tile__name .arw { transform: translateX(4px); }
.shop-tile__meta { font-size: .78rem; line-height: 1.45; color: rgb(255 255 255 / .9); }
.shop-tile__meta .cap { font-size: .64rem; display: block; color: var(--c-white); }
@media (min-width: 960px) { .shop-tile__label { padding: var(--s-6); } .shop-tile__meta { font-size: var(--fs-sm); } .shop-tile__meta .cap { font-size: var(--fs-cap); } }

/* ---------- Shop block (homepage "The shops" + locations) ------------------ */
.shops { display: grid; gap: var(--s-16); }
@media (min-width: 960px) { .shops { grid-template-columns: 1fr 1fr; gap: 0; } .shops > .shop + .shop { border-left: var(--hair) solid var(--c-rule); } .shops > .shop:first-child { padding-right: clamp(1.5rem, 3vw, 3.5rem); } .shops > .shop + .shop { padding-left: clamp(1.5rem, 3vw, 3.5rem); } }
.shop { display: grid; gap: var(--s-6); align-content: start; }
.shop__ph { aspect-ratio: 3 / 2; }
.shop__head { display: grid; gap: var(--s-2); }
.shop__name { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.shop__intro { max-width: 32rem; }
.shop__facts { display: grid; gap: var(--s-6); }
@media (min-width: 600px) { .shop__facts { grid-template-columns: 1fr 1.25fr; } }
.shop__addr { font-style: normal; font-size: var(--fs-sm); line-height: 1.7; }
.shop__addr a { text-decoration: none; border-bottom: 1px solid var(--c-rule); }
.shop__addr a:hover { border-bottom-color: currentColor; }
.shop .btn-row { margin-top: var(--s-2); }

/* ---------- Hours table ---------------------------------------------------- */
.hours { width: 100%; font-size: var(--fs-sm); }
.hours caption { text-align: left; margin-bottom: var(--s-2); }
.hours th, .hours td { padding: .5rem 0; border-bottom: var(--hair) solid var(--c-rule); text-align: left; font-weight: 400; vertical-align: top; }
.hours td { text-align: right; white-space: nowrap; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 600; }
.hours tr.is-today th::after { content: "Today"; margin-left: .6em; padding: .1em .45em; background: var(--c-black); color: var(--c-white); font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; vertical-align: .12em; }
.on-dark .hours th, .on-dark .hours td { border-bottom-color: var(--c-rule-inv); }
.on-dark .hours tr.is-today th::after { background: var(--c-white); color: var(--c-black); }
.hours__note { margin-top: var(--s-3); font-size: .8rem; }

/* ---------- Price list ----------------------------------------------------- */
/* Service name + price on one hairline row; prices tabular for alignment. */
.prices { display: grid; }
.prices li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: .8rem; border-bottom: var(--hair) solid var(--c-rule); }
.on-dark .prices li { border-bottom-color: var(--c-rule-inv); }
.prices li:first-child { border-top: var(--hair) solid var(--c-rule); }
.on-dark .prices li:first-child { border-top-color: var(--c-rule-inv); }
.prices__name { font-weight: 400; }
.prices__price { font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ---------- Google reviews ------------------------------------------------- */
/* One column per shop. Static fallback (links) is in the HTML; reviews.js
   replaces .reviews__body only when real data arrives (D8). Min-height is
   reserved so the swap never shifts content below. */
.reviews-grid { display: grid; gap: var(--s-16); }
@media (min-width: 960px) { .reviews-grid { grid-template-columns: 1fr 1fr; gap: 0; } .reviews-grid > .reviews + .reviews { border-left: var(--hair) solid var(--c-rule); padding-left: clamp(1.5rem, 3vw, 3.5rem); } .reviews-grid > .reviews:first-child { padding-right: clamp(1.5rem, 3vw, 3.5rem); } }
.reviews { display: grid; gap: var(--s-6); align-content: start; }
.reviews__head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: var(--bar) solid var(--c-black); }
.reviews__summary { display: flex; align-items: baseline; gap: .6rem; font-size: var(--fs-sm); }
.reviews__rating { font-family: var(--f-display); font-weight: 700; font-size: 2.6rem; line-height: 1; }
.reviews__stars { letter-spacing: .1em; font-size: 1rem; }
.reviews__body { display: grid; gap: var(--s-6); align-content: start; }
/* Reserve space only when live reviews are switched on, so the swap from
   fallback to real reviews causes no layout shift (CLS). */
[data-reviews="on"] .reviews__body { min-height: 16rem; }
@media (min-width: 960px) { [data-reviews="on"] .reviews__body { min-height: 24rem; } }
/* S5: if the Function fails (data-state="fallback"), release the reserved
   space so the honest link-only fallback doesn't leave a large empty gap. */
html[data-reviews="on"] [data-state="fallback"] .reviews__body { min-height: 0; }
.reviews__fallback { display: grid; gap: var(--s-4); align-content: start; max-width: 30rem; }
.reviews__list { display: grid; gap: var(--s-6); }
.review { display: grid; gap: var(--s-3); padding-bottom: var(--s-6); border-bottom: var(--hair) solid var(--c-rule); }
.review__text { font-size: var(--fs-base); line-height: 1.6; }
.review__text::before { content: "\201C"; }
.review__text::after { content: "\201D"; }
.review__more { font-weight: 600; text-decoration: underline; }
.review__by { display: flex; align-items: center; gap: .7rem; font-size: var(--fs-sm); }
.review__avatar { width: 36px; height: 36px; border-radius: 50%; background: #eee; flex: none; object-fit: cover; }
.review__author { font-weight: 600; text-decoration: none; }
.review__author:hover { text-decoration: underline; }
.review__when { color: var(--c-muted); }
.review__stars { font-size: .85rem; letter-spacing: .08em; }
.reviews__note { font-size: .78rem; }
.reviews__foot {display: grid; gap: var(--s-3); font-size: .78rem; color: var(--c-muted); }
/* Google Maps attribution: official logo, unmodified, 18px tall (16–19 allowed),
   clear space ≥10px left/right/top and ≥5px below (Places policies, S4). */
.reviews__attr { padding: 10px 10px 5px; margin-left: -10px; line-height: 0; }
.reviews__logo { display: block; width: auto; height: 18px; }
.review__acts { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: var(--fs-sm); }
.review__flag { color: var(--c-muted); text-decoration: underline; }
.reviews[aria-busy="true"] .reviews__body { opacity: .5; }
/* Preview-only sample label (never in production files — injected by QA tooling) */
.sample-flag { display: inline-block; background: var(--c-black); color: var(--c-white); font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: .25em .6em; }

/* ---------- Closing CTA band ---------------------------------------------- */
.cta-band { text-align: left; }
.cta-band__in { display: grid; gap: var(--s-8); }
@media (min-width: 960px) { .cta-band__in { grid-template-columns: 1.4fr 1fr; align-items: end; } .cta-band .btn-row { justify-content: flex-end; } }

/* ---------- Footer --------------------------------------------------------- */
.site-footer { background: var(--c-black); color: var(--c-white); padding-block: var(--s-16) var(--s-8); font-size: var(--fs-sm); border-top: var(--hair) solid var(--c-rule-inv); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer__top { display: grid; gap: var(--s-10); padding-bottom: var(--s-12); }
@media (min-width: 700px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .footer__top { grid-template-columns: 1.3fr 1fr 1fr .9fr; } }
.footer__logo { width: 132px; }
.footer__brand p { margin-top: var(--s-5); color: var(--c-muted-inv); max-width: 22rem; }
.footer__col h2 { margin-bottom: var(--s-4); }
.footer__col address { font-style: normal; line-height: 1.75; }
.footer__col ul { display: grid; gap: .45rem; list-style: none; padding: 0; margin: 0; }
.footer__hours { margin-top: var(--s-4); color: var(--c-muted-inv); line-height: 1.7; }
.footer__col .link { margin-top: var(--s-4); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); justify-content: space-between; padding-top: var(--s-6); border-top: var(--hair) solid var(--c-rule-inv); color: var(--c-muted-inv); font-size: .78rem; }
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.footer__bottom .cap { font-size: .66rem; }

/* =============================================================================
   S3 — INNER-PAGE COMPONENTS (location pages, services, contact, gallery,
   about, FAQ). Same tokens and rules as the homepage system.
   ============================================================================= */

/* ---------- Breadcrumb ----------------------------------------------------- */
.crumbs { font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .3rem .6rem; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: .6rem; opacity: .5; }
.crumbs a { text-decoration: none; opacity: .72; }
.crumbs a:hover { opacity: 1; text-decoration: underline; }
.crumbs [aria-current] { opacity: 1; }

/* ---------- Page hero (inner pages) ---------------------------------------
   Black type block + photograph. Mobile: type, then photo. Desktop: 5/7 split
   like the homepage hero. .phero--compact = shorter, for utility pages. */
.phero { display: grid; background: var(--c-black); color: var(--c-white); }
.phero__text { display: grid; align-content: end; gap: var(--s-5); padding: var(--s-8) var(--gut) var(--s-8); }
.phero__eyebrow { display: flex; align-items: center; gap: .6em; }
.phero__eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.phero h1 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; line-height: .86; letter-spacing: var(--track-display); font-size: clamp(3.2rem, 15vw, 5.4rem); }
.phero h1 .phero__small { display: block; font-size: .42em; line-height: 1; margin-bottom: .18em; }
.phero__sub { font-size: var(--fs-lead); color: var(--c-muted-inv); max-width: 30rem; }
.phero__facts { display: grid; gap: var(--s-1); font-size: var(--fs-sm); padding-top: var(--s-5); border-top: var(--hair) solid var(--c-rule-inv); max-width: 30rem; }
.phero__facts a { text-decoration: none; border-bottom: 1px solid var(--c-rule-inv); }
.phero__facts a:hover { border-bottom-color: currentColor; }
.phero__today { font-weight: 600; }
.phero__ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-placeholder); }
.phero__ph picture, .phero__ph img { width: 100%; height: 100%; }
.phero__ph img { object-fit: cover; }
.phero__cap { position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 1; background: var(--c-black); color: var(--c-white); padding: .35rem .6rem; }
@media (min-width: 600px) { .phero h1 { font-size: clamp(4.6rem, 12vw, 6.6rem); } .phero__ph { aspect-ratio: 16 / 10; } }
@media (min-width: 960px) {
  .phero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: min(calc(100svh - var(--header-h)), 820px); }
  .phero__text { padding: var(--s-16) clamp(2rem, 4vw, 4.5rem) var(--s-12) var(--gut); gap: var(--s-6); }
  .phero h1 { font-size: clamp(4.4rem, 7.4vw, 7.6rem); }
  .phero__ph { aspect-ratio: auto; height: 100%; }
  .phero--compact { min-height: min(calc(78svh - var(--header-h)), 640px); }
}
@media (min-width: 1600px) {
  .phero { grid-template-columns: calc((100vw - var(--wrap)) / 2 + 600px) minmax(0, 1fr); }
  .phero__text { padding-left: calc((100vw - var(--wrap)) / 2 + var(--gut)); }
  .phero h1 { font-size: 7rem; }
}
/* Text-only page head (contact, FAQ, find a shop) */
.pagehead { padding-block: var(--s-12) var(--s-10); }
.pagehead__in { display: grid; gap: var(--s-6); }
.pagehead h1 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; line-height: .86; font-size: clamp(3.4rem, 13vw, 8.4rem); }
@media (min-width: 960px) { .pagehead { padding-block: var(--s-20) var(--s-12); } .pagehead__in { grid-template-columns: 7fr 5fr; align-items: end; gap: var(--s-16); } }

/* ---------- Visit block (address · hours · map) --------------------------- */
.visit { display: grid; gap: var(--s-10); }
@media (min-width: 960px) { .visit { grid-template-columns: 4fr 4fr 5fr; gap: clamp(1.5rem, 3vw, 3.5rem); } }
.visit__col { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
.visit__col > h3 { padding-bottom: var(--s-3); border-bottom: var(--bar) solid var(--c-black); }
.on-dark .visit__col > h3 { border-bottom-color: var(--c-white); }
.addr { font-style: normal; font-size: var(--fs-base); line-height: 1.7; }
.addr strong { font-weight: 600; }
.dl { display: grid; gap: 0; font-size: var(--fs-sm); }
.dl div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-4); padding-block: .55rem; border-bottom: var(--hair) solid var(--c-rule); }
.dl dt { font-weight: 600; }
/* S5: long emails (warragul@…) must wrap at 360px instead of widening the grid; the markup has <wbr> after the @ */
.dl dd { min-width: 0; overflow-wrap: break-word; }
.dl dd a { text-decoration: none; border-bottom: 1px solid var(--c-rule); }
.dl dd a:hover { border-bottom-color: currentColor; }

/* ---------- Map (official Google Maps "Embed a map" iframe, D33) ----------
   Lazy-loaded, so Google is only contacted as the map nears the viewport. */
.map { position: relative; aspect-ratio: 4 / 3; background: var(--c-placeholder); overflow: hidden; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__note { font-size: .78rem; margin-top: var(--s-3); }
.map__note a { font-weight: 600; text-decoration: underline; }

/* ---------- Split (photo + text, ~60/40, alternating) --------------------- */
.split { display: grid; gap: var(--s-8); align-items: start; }
.split__ph { aspect-ratio: 4 / 3; }
.split__ph--tall { aspect-ratio: 4 / 5; }
.split__copy { display: grid; gap: var(--s-5); align-content: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 6rem); }
  .split--rev { grid-template-columns: 5fr 7fr; }
  .split--rev .split__ph { order: 2; }
  .split__ph { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* ---------- Photo mosaic (editorial grid, no boxed cards) ----------------- */
.mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.mosaic figure { position: relative; aspect-ratio: 1; }
.mosaic .m-wide { grid-column: span 2; aspect-ratio: 16 / 9; }
.mosaic .m-tall { grid-row: span 2; aspect-ratio: auto; }
.mosaic figcaption { position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 1; background: var(--c-black); color: var(--c-white); padding: .3rem .55rem; font-size: .6rem; }
@media (min-width: 960px) {
  .mosaic { grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(12rem, 17vw, 17rem); }
  .mosaic figure, .mosaic .m-wide { aspect-ratio: auto; grid-column: span 4; }
  .mosaic .m-wide { grid-column: span 8; }
  .mosaic .m-tall { grid-row: span 2; }
  .mosaic .m-6 { grid-column: span 6; }
  .mosaic .m-3 { grid-column: span 3; }
  .mosaic figcaption { left: var(--s-4); bottom: var(--s-4); font-size: var(--fs-cap); }
}

/* ---------- Photo band (mono with intent — type over the image, D15) ------ */
.pband { position: relative; overflow: hidden; color: var(--c-white); background: var(--c-black); }
.pband__ph { position: absolute; inset: 0; }
.pband__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .86) 0%, rgb(0 0 0 / .62) 55%, rgb(0 0 0 / .3) 100%); }
.pband__in { position: relative; display: grid; gap: var(--s-6); padding-block: clamp(5rem, 4rem + 8vw, 11rem); }
.pband h2 { max-width: 16ch; }
.pband p { max-width: 30rem; color: rgb(255 255 255 / .82); }

/* ---------- Other-shop teaser ---------------------------------------------- */
.othershop { display: grid; color: inherit; text-decoration: none; background: var(--c-black); color: var(--c-white); }
.othershop__ph { aspect-ratio: 16 / 9; }
.othershop__ph img { transition: transform 1.1s var(--ease); }
.othershop:hover .othershop__ph img { transform: scale(1.03); }
.othershop__copy { display: grid; gap: var(--s-4); align-content: center; padding: var(--s-8) var(--gut); }
.othershop__copy .d-h2 { display: flex; align-items: end; gap: .3em; }
.othershop .arw { font-family: var(--f-body); font-size: .45em; transition: transform var(--dur) var(--ease); }
.othershop:hover .arw { transform: translateX(6px); }
@media (min-width: 960px) { .othershop { grid-template-columns: 7fr 5fr; } .othershop__ph { aspect-ratio: auto; min-height: 26rem; } .othershop__copy { padding: var(--s-12) clamp(2rem, 4vw, 4.5rem); } }

/* ---------- FAQ (native <details>, keyboard + no-JS friendly) ------------ */
.faq { border-top: var(--hair) solid var(--c-rule); }
.faq details { border-bottom: var(--hair) solid var(--c-rule); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-block: var(--s-5); cursor: pointer; list-style: none; font-weight: 600; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat; transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__a { padding-bottom: var(--s-6); max-width: 42rem; color: var(--c-muted); }
.faq .faq__a > * + * { margin-top: .8em; }
.faq .faq__a a { color: var(--c-black); font-weight: 600; }
.on-dark .faq, .on-dark .faq details { border-color: var(--c-rule-inv); }
.on-dark .faq .faq__a { color: var(--c-muted-inv); }
.on-dark .faq .faq__a a { color: var(--c-white); }

/* ---------- Reviews — single shop (location pages) ------------------------ */
.reviews--single .reviews__head { border-bottom: var(--bar) solid var(--c-black); align-items: center; }
@media (min-width: 960px) {
  .reviews--single .reviews__list { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 3.5rem); }
  [data-reviews="on"] .reviews--single .reviews__body { min-height: 20rem; }
}

/* ---------- Forms ----------------------------------------------------------- */
.form { display: grid; gap: var(--s-6); }
.form__row { display: grid; gap: var(--s-6); }
@media (min-width: 700px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .45rem; }
.field label { font-size: var(--fs-cap); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: .8rem 0; border: 0; border-bottom: 1.5px solid currentColor; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: 1rem; }
.field select { appearance: none; background: linear-gradient(45deg, transparent 50%, currentColor 50%) right .5rem center / 7px 7px no-repeat, transparent; padding-right: 2rem; }
.on-dark .field select option { color: var(--c-black); }
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.field__opt { font-weight: 400; letter-spacing: .04em; text-transform: none; opacity: .7; }
.form__note { font-size: .8rem; color: var(--c-muted); }
.on-dark .form__note { color: var(--c-muted-inv); }
.form__note a { color: inherit; }
/* Tablet: address + hours side by side, map full width and shorter */
@media (min-width: 640px) and (max-width: 959px) {
  .visit { grid-template-columns: 1fr 1fr; }
  .visit__col:last-child { grid-column: 1 / -1; }
  .visit .map { aspect-ratio: 16 / 7; }
}

/* =============================================================================
   S4 — FORMS (forms.js states), ARTICLE CARDS, LEGAL PROSE
   ============================================================================= */

/* ---------- Form states (forms.js) ---------------------------------------- */
/* Errors use text + a heavier rule, never colour alone (brand has no red). */
.field__err[hidden] { display: none; }   /* display:flex below would beat the hidden attribute (S3 gotcha) */
.field__err { font-size: .8rem; font-weight: 600; display: flex; gap: .45em; align-items: baseline; }
.field__err::before { content: "!"; display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; flex: none; border: 1.5px solid currentColor; border-radius: 50%; font-size: .8em; line-height: 1; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-bottom-width: 3px; }
.field__hint { font-size: .8rem; opacity: .75; }
.form__status { font-size: var(--fs-sm); font-weight: 600; min-height: 1.6em; }
.form__status:empty { min-height: 0; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Article cards (blog index, "More BarberTalk") ----------------- */
.pcards { display: grid; gap: var(--s-12) clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 640px) { .pcards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .pcards { grid-template-columns: repeat(3, 1fr); } }
.pcard__link { display: grid; gap: var(--s-3); align-content: start; text-decoration: none; }
.pcard__ph { display: block; aspect-ratio: 3 / 2; margin-bottom: var(--s-2); }
.pcard__ph img { transition: transform 1.1s var(--ease); }
.pcard__link:hover .pcard__ph img { transform: scale(1.03); }
.pcard__title { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.45rem, 1.25rem + .6vw, 1.8rem); line-height: .98; letter-spacing: var(--track-display); }
.pcard__link:hover .pcard__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.pcard__ex { color: var(--c-muted); font-size: var(--fs-sm); }
.on-dark .pcard__ex { color: var(--c-muted-inv); }