/* Eri's Barbershop: concept by KERA Tech Solutions. Layout rebuilt from the CRISP (crispmtl.com) reference. */
:root {
  --bg: #f3efed;
  --ink: #0a090c;
  --line: #e3dfdb;
  --line-dark: #2c2b2c;
  --accent: #2638c8;
  --accent-deep: #18227f;
  --light-f1: #cfd4f4;
  --light-f2: #e6e8fa;
  --display: "Archivo", "Arial Black", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --pad: 32px;
  --gap: 196px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--display);
  font-stretch: 105%;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: opacity .3s; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, h4, figure, blockquote { margin: 0; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.skip { position: fixed; left: 16px; top: -60px; z-index: 10001; background: var(--ink); color: var(--bg); padding: 10px 14px; font-size: 14px; }
.skip:focus { top: 16px; }

/* ---------- type ---------- */
.h1, .h2, .h3, .btn23, .menu-book, .wordmark, .lang, .mq b, .badge, .footer-logo-text, .svc-book {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
}
.h1 { font-size: 92px; line-height: 92px; color: var(--bg); text-align: center; margin: 20px 0 10px; }
.h2 { font-size: 72px; line-height: 72px; padding-top: 3px; letter-spacing: -.005em; }
.h3 { font-size: 32px; line-height: 32px; }
.text { font-size: 16px; line-height: 20px; font-weight: 500; }
.text strong { font-weight: 700; }
.small { font-size: 12px; line-height: 16px; margin-top: 10px; font-weight: 500; max-width: 34ch; }
.mini-text { font-family: var(--serif); font-size: 15px; line-height: 20px; font-weight: 400; text-transform: none; letter-spacing: .005em; }
.white-text { color: var(--bg); }
.align-center { text-align: center; }
.normal-link { text-transform: none; }
.normal-link:hover { opacity: .66; }
.link { color: inherit; text-transform: none; }
.link:hover { opacity: .66; }
.word { will-change: transform, opacity; }

/* ---------- header (reference .wrapper.menu) ---------- */
.menu {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 100%; display: flex; align-items: center;
  padding: 24px var(--pad);
  mix-blend-mode: exclusion; color: var(--bg);
  transition: transform .4s ease-out;
}
.menu.is-hidden { transform: translateY(-100px); }
.menu-third { width: 33.33%; display: flex; align-items: center; }
.menu-third.center { justify-content: center; }
.menu-third.right { justify-content: flex-end; gap: 24px; }
.burger { position: relative; width: 24px; height: 24px; }
.menu-bar {
  position: absolute; left: 50%; top: calc(50% - 6px);
  width: 24px; height: 3px; background: var(--bg);
  transform: translate(-50%, -50%); transition: all .6s ease;
}
.menu-bar:nth-child(2) { top: 50%; }
.menu-bar:nth-child(3) { top: calc(50% + 6px); }
.burger.open .menu-bar:nth-child(1) { top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.burger.open .menu-bar:nth-child(2) { width: 0; }
.burger.open .menu-bar:nth-child(3) { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }
.wordmark { font-size: 22px; letter-spacing: .1em; line-height: 1; opacity: .85; }
.menu-book { font-size: 16px; line-height: 1; padding-top: 3px; }
.menu-book:hover { opacity: .66; }
.book-short { display: none; }
.lang { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1; }
.lang span { opacity: .5; }
.lang-btn { padding: 4px 2px; opacity: .5; font-stretch: 125%; font-weight: 700; transition: opacity .3s; }
.lang-btn[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.lang-btn:hover { opacity: 1; }

/* ---------- overlay menu (reference .menu-open) ---------- */
.menu-open {
  position: fixed; inset: 0; z-index: 1;
  background: var(--ink); color: var(--bg);
  padding: 96px var(--pad) var(--pad);
  display: flex; flex-direction: column; justify-content: space-between;
  visibility: hidden;
}
.menu-open.is-open { visibility: visible; }
.menu-links { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 50%; }
.white-link { color: var(--bg); display: block; }
.opacity-hover { transition: opacity .3s; }
.opacity-hover:hover { opacity: .5; }
.menu-foot { display: flex; flex-direction: column; gap: 6px; width: 45%; }

/* ---------- page shell ---------- */
.global-wrapper { position: relative; z-index: 2; width: 100%; }
.global-wrapper.is-scaled { cursor: pointer; }
.sub-wrapper { position: relative; background: var(--bg); min-height: 100vh; overflow-x: clip; }
.lines, .lines-mobile {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; padding: 0 var(--pad);
}
.lines-mobile { display: none; }
.line { width: 16.67%; border-right: 1px solid var(--line); }
.line.first-line { border-left: 1px solid var(--line); }
.line.footer-line { border-color: var(--line-dark); }
.lines-mobile .line { width: 50%; }

.wrapper {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: var(--gap);
  padding: 0 var(--pad);
}
.container { position: relative; z-index: 1; width: 100%; }
.half { width: 50%; }
._2-3 { width: 66.22%; }
.space-between { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.space-between-mobile { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.space-between-center { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.space-between-bottom {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; width: 100%; padding-bottom: 32px;
}
.space-between-bottom .mini-text { margin-bottom: 10px; }

/* ---------- buttons (reference .button23: two filler bars wipe down) ---------- */
.btn23 {
  position: relative; display: inline-flex; flex: none;
  align-items: center; justify-content: center;
  padding: 13px 15px 9px; overflow: hidden;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  font-size: 16px; line-height: 20px;
}
.btn23_text { position: relative; z-index: 2; white-space: nowrap; }
.btn23_f1, .btn23_f2 {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .3s ease-in-out;
}
.btn23_f1 { z-index: 0; background: var(--accent-deep); }
.btn23_f2 { z-index: 1; background: var(--accent); }
.btn23:hover .btn23_f1, .btn23:focus-visible .btn23_f1 { transform: scaleY(1); transition: transform .5s cubic-bezier(.77, 0, .175, 1); }
.btn23:hover .btn23_f2, .btn23:focus-visible .btn23_f2 { transform: scaleY(1); transition: transform .5s cubic-bezier(.77, 0, .175, 1) .2s; }
.btn23.is-light { background: #fff; border-color: #fff; color: #000; }
.btn23.is-outline { background: #fff; border-color: var(--ink); color: #000; }
.btn23.is-light .btn23_f1, .btn23.is-outline .btn23_f1 { background: var(--light-f1); }
.btn23.is-light .btn23_f2, .btn23.is-outline .btn23_f2 { background: var(--light-f2); }
.mb13 { margin-bottom: 13px; }

/* ---------- hero ---------- */
.hero {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  min-height: 100vh; padding: var(--pad);
  margin-bottom: var(--gap);
  background: #000; color: var(--bg);
}
.hero_bg_img_wrap { position: absolute; inset: 0; overflow: hidden; }
.hero_bg_img_wrap picture, .hero_bg_img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero_bg_img { object-fit: cover; object-position: 50% 30%; }
.hero_bg_img_overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.mask-wrap { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 auto; overflow: hidden; }
.motion .hero_bg_img_wrap, .motion .split-hero, .motion .hero_btn_wrap { opacity: 0; }

/* ---------- story ---------- */
.story { display: flex; justify-content: space-between; align-items: flex-start; }
.image-left { width: 33.33%; height: 66vh; overflow: hidden; }
.image-left img, .fws-bg img { width: 100%; height: 100%; object-fit: cover; }
.image-left img { object-position: 50% 40%; }
.section-right {
  width: 65%; height: 66vh;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
}
.section-right .head { padding-top: 6px; }
.section-right .half:first-child { display: flex; flex-direction: column; align-items: flex-start; }

/* ---------- hover links + image stack ---------- */
.hover-links { display: flex; flex-direction: column; align-items: flex-start; }
.hover-link { display: flex; width: fit-content; color: var(--ink); transition: transform .3s ease-in-out; }
.hover-link:hover, .hover-link:focus-visible { transform: translateX(32px); }
.hover-image-container { min-height: 50vh; }
.hover-image {
  position: absolute; top: 0; right: 0;
  width: 47vw; height: 50vh; object-fit: cover;
}
.hover-image.hi1 { z-index: 1; }

/* ---------- visit accordion ---------- */
.loc-head .h2 { width: 70%; }
.loc-head .mini-text { text-align: right; }
.acc { border-top: .09rem solid var(--ink); }
.acc-item { border-bottom: .09rem solid var(--ink); }
.acc-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 1.5rem 0; text-align: left; color: var(--ink);
}
.acc-icon { width: 1.4rem; height: 1.4rem; flex: none; margin-right: 5px; }
.acc-panel { overflow: hidden; }
.js .acc-panel { display: none; }
.acc-pad { padding-bottom: 2rem; }
.menu-third.space-between-vertical, .acc .space-between-vertical {
  flex-direction: column; justify-content: space-between; align-items: flex-start; height: 33vh;
}
.acc .menu-third { width: 33.33%; display: block; padding-right: 16px; }
.acc .menu-third.space-between-vertical { display: flex; }
.acc .menu-third:last-child { padding-right: 0; }
.acc h4.mini-text { margin-bottom: 10px; }
.acc .mt { margin-top: 24px; }
.location-image { width: 100%; height: 33vh; object-fit: cover; }

/* ---------- services table ---------- */
.table { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.table-cell { border: 1px solid var(--ink); padding: 16px; }
.table-cell-center { border-left-width: 0; border-right-width: 0; }
.cell-wrapper { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 33vh; height: 100%; }
.cell-wrapper .h3 + .text { margin-top: 2px; }
.svc-list { list-style: none; margin: 0; padding: 0; }
.svc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 16px; line-height: 20px; color: var(--ink); text-transform: none; }
.svc-book { font-size: 11px; letter-spacing: .02em; opacity: .4; transition: opacity .3s; }
.svc-row:hover .svc-book, .svc-row:focus-visible .svc-book { opacity: 1; color: var(--accent); }

/* ---------- gallery sliders ---------- */
.carousel-table { display: grid; grid-template-columns: 1fr 1fr 1fr; height: 66vh; }
.cell { overflow: hidden; min-width: 0; }
.slider { width: 100%; height: 100%; overflow: hidden; }
.track { display: flex; width: 100%; height: 100%; }
.track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.track img.crop-left { object-position: 0% 40%; }

/* ---------- reviews ---------- */
.quotes { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.quote-col { padding-right: 32px; }
.badge { display: inline-block; border: 1px solid var(--ink); padding: 11px 14px 8px; font-size: 14px; line-height: 18px; }
.badge-note { margin-top: 14px; }
.quote-text { font-size: 20px; line-height: 26px; font-weight: 500; font-stretch: 100%; letter-spacing: -.005em; }
.quote-col figcaption { margin-top: 16px; }

/* ---------- marquee (reference .marquee) ---------- */
.marquee {
  position: relative; z-index: 1;
  display: flex; gap: 1rem; width: 100%; overflow: hidden;
  margin-top: 2rem; padding: 2rem 0;
}
.marquee-content { flex: none; display: flex; justify-content: space-around; align-items: center; gap: 1rem; min-width: 100%; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 1rem)); } }
.scroll { animation: scroll 22s linear infinite; }
.reverse { animation-direction: reverse; }
.mq { display: inline-flex; align-items: flex-start; gap: 6px; white-space: nowrap; padding: 0 1.5rem; }
.mq b { font-size: 20px; line-height: 24px; }
.mq i { font-family: var(--serif); font-style: normal; font-size: 16px; line-height: 16px; color: var(--accent); }
.mq-note { position: relative; z-index: 1; text-align: center; padding: 0 var(--pad); opacity: .6; }

/* ---------- full-width walk-in band ---------- */
.full-width-section {
  position: relative; z-index: 1; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px;
  height: 100vh; margin-top: var(--gap); padding: 0 var(--pad);
  background: #000; text-align: center;
}
.fws-bg { position: absolute; inset: 0; }
.fws-bg img { object-position: 50% 30%; }
.fws-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.full-width-section > :not(.fws-bg) { position: relative; z-index: 1; }

/* ---------- footer ---------- */
.footer { position: relative; background: var(--ink); color: var(--bg); padding: 64px var(--pad) 32px; overflow: hidden; }
.footer-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 64px; }
.footer-center-block { width: 33.33%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.footer-line-2 { margin-top: 16px; }
.strip { display: flex; gap: 3px; width: 100%; padding: 3px; background: var(--bg); }
.strip img { flex: 1 1 0; min-width: 0; height: auto; aspect-ratio: 148 / 268; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.footer-third { width: 33.33%; padding-right: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer .text { color: var(--bg); }
.footer-last-block { flex-direction: row; justify-content: space-between; align-items: center; padding-right: 0; }
.footer-logo { width: 100%; overflow: hidden; }
.footer-logo-text { display: block; width: max-content; font-size: 25vw; line-height: .78; padding-top: .04em; color: var(--bg); white-space: nowrap; letter-spacing: -.01em; }
.foot-bottom { align-items: center; }
.footer-text { font-size: 12px; line-height: 16px; font-weight: 500; }
.socials { display: flex; align-items: center; }
.socials a { display: inline-flex; margin-right: 12px; }
.socials svg { width: 20px; height: 20px; }

/* ---------- concept toast ---------- */
.toast {
  position: fixed; left: 16px; bottom: 16px; z-index: 10000;
  max-width: 340px; padding: 14px 44px 14px 16px;
  background: var(--ink); color: var(--bg);
  border: 1px solid rgba(243, 239, 237, .18);
  font-size: 13px; line-height: 18px; font-weight: 500;
  opacity: 0; transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
}
.toast.show { opacity: 1; transform: none; }
.toast-x { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; font-size: 20px; line-height: 28px; color: var(--bg); }
.toast-x:hover { opacity: .66; }

/* ---------- responsive (reference breakpoints 991 / 479) ---------- */
@media (min-width: 1680px) {
  .quote-text { font-size: 22px; line-height: 28px; }
}
@media (max-width: 991px) {
  .h1 { font-size: 56px; line-height: 56px; }
  .h2 { font-size: 48px; line-height: 54px; }
  .h3 { font-size: 24px; line-height: 24px; }
  .text, .svc-row { font-size: 14px; line-height: 18px; }
  .section-right { height: auto; min-height: 66vh; gap: 32px; }
  .section-right .space-between-bottom { flex-direction: column; align-items: flex-start; gap: 24px; }
  .section-right .half { width: 100%; }
  .quotes { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .quotes .quote-col:first-child { grid-column: 1 / -1; }
  .quote-text { font-size: 17px; line-height: 23px; }
  .footer-center-block { width: 50%; }
  .menu-third.right { gap: 16px; }
  .hero { padding-bottom: 96px; }
  .toast { max-width: 300px; }
}
@media (max-width: 767px) {
  :root { --gap: 128px; }
  .table { grid-template-columns: 1fr; }
  .table-cell-center { border-width: 0 1px; }
  .cell-wrapper { min-height: 0; }
  .acc-pad.space-between { flex-direction: column; gap: 16px; }
  .acc .menu-third { width: 100%; padding-right: 0; }
  .acc .space-between-vertical { height: auto; gap: 16px; }
  .location-image { height: 40vh; margin-bottom: 16px; }
  .menu-book .book-long { display: none; }
  .menu-book .book-short { display: inline; }
}
@media (max-width: 479px) {
  :root { --pad: 16px; --gap: 96px; }
  .menu { padding: 20px var(--pad); }
  .menu-third.left { width: auto; }
  .menu-third.center { position: absolute; left: 50%; transform: translateX(-50%); width: auto; }
  .menu-third.right { width: auto; margin-left: auto; gap: 14px; }
  .menu-book { font-size: 14px; }
  .wordmark { font-size: 16px; }
  .menu .lang > span, .menu .lang-btn[aria-pressed="true"] { display: none; }
  .menu .lang-btn { opacity: 1; font-size: 13px; padding: 6px 4px; }
  .hero { padding: 16px 16px 20vh; min-height: 100svh; }
  .hero_bg_img { object-position: 50% 22%; }
  .h1 { font-size: 30px; line-height: 34px; width: 100%; }
  .h2 { font-size: 32px; line-height: 32px; }
  .h3 { font-size: 22px; line-height: 24px; }
  .text, .svc-row { font-size: 14px; line-height: 19px; }
  .lines { display: none; }
  .lines-mobile { display: flex; }
  .story { flex-direction: column; }
  .image-left { width: 100%; height: 50vh; }
  .section-right { width: 100%; height: auto; min-height: 0; }
  .space-between-mobile.head { margin-top: 16px; padding-bottom: 16px; }
  .space-between { flex-direction: column; justify-content: flex-start; gap: 16px; }
  .space-between-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  .container.half, ._2-3, .loc-head .h2 { width: 100%; }
  .hover-image-container { display: none; }
  .hover-sec .hover-links { width: 100%; gap: 4px; }
  .loc-head .mini-text { text-align: left; }
  .carousel-table { height: 25vh; }
  .quotes { grid-template-columns: 1fr; }
  .quote-col { padding-right: 0; }
  .full-width-section { height: 60vh; margin-top: 96px; }
  .footer { padding-top: 56px; }
  .footer-center-block { width: 75%; }
  .footer-third { width: 100%; }
  .footer-last-block { flex-direction: row; }
  .foot-bottom { align-items: flex-start; }
  .socials svg { width: 24px; height: 24px; }
  .socials a { margin-right: 16px; }
  .mq b { font-size: 16px; }
  .marquee { gap: .5rem; }
  .menu-links { width: 100%; }
  .menu-foot { width: 100%; }
  .toast { right: 16px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll { animation: none; }
  .btn23_f1, .btn23_f2, .hover-link, .menu, .menu-bar, .toast { transition: none !important; }
  .hover-link:hover, .hover-link:focus-visible { transform: none; }
}