/* Custom salon websites (customer/custom-salon-sites.js).
   Kosa: a light editorial page built from the salon's black-and-white
   photography, ink type in Oswald like kosasalon.com, and the gold of its own
   "Book now" art. The footer is the one ink band. Images and cards use a
   20px radius; buttons are pills. Photos are never shown larger than their
   1200px sources. */

/* The site runs in its own shell: no Refinelook bar, footer or tab bar. */
.custom-site-shell > .page-wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
html.has-custom-salon-site, html.has-custom-salon-site body { background: #f1f1ef; }

.kosa-site {
  --k-paper: #f1f1ef;
  --k-card: #ffffff;
  --k-ink: #131313;
  --k-soft: #e4e3df;
  --k-mute: #6a6964;
  --k-line: rgb(19 19 19 / 0.12);
  --k-gold: #c9a45c;
  --k-gold-deep: #8a6a26;
  --k-radius: 20px;
  --k-display: "Oswald", "Figtree", "Arial Narrow", sans-serif;
  --k-body: "Figtree", system-ui, sans-serif;
  --k-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --k-gutter: clamp(16px, 4vw, 64px);
  position: relative;
  background: var(--k-paper);
  color: var(--k-ink);
  font-family: var(--k-body);
  isolation: isolate;
  overflow-x: clip;
}
.kosa-site img { display: block; max-width: 100%; }
.kosa-site figure { margin: 0; }
.kosa-site h1, .kosa-site h2, .kosa-site h3 {
  font-family: var(--k-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--k-ink);
  margin: 0;
  text-wrap: wrap;
}
.kosa-site p { margin: 0; }
.kosa-site a { color: inherit; }
.kosa-site :focus-visible { outline: 2px solid var(--k-gold-deep); outline-offset: 3px; }
.kosa-arrow { width: 1.15em; height: 1.15em; flex: none; transition: transform 0.5s var(--k-ease); }

/* Buttons: pills that fill from the left on hover */
.kosa-button {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  overflow: hidden;
  font: 500 15px/1 var(--k-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.45s var(--k-ease), border-color 0.45s var(--k-ease), transform 0.2s ease;
}
.kosa-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--k-ease);
}
.kosa-button:hover::before { transform: scaleX(1); transform-origin: left; }
.kosa-button:hover .kosa-arrow { transform: translateX(4px); }
.kosa-button:active { transform: translateY(1px) scale(0.985); }
.kosa-button[disabled] { opacity: 0.45; cursor: not-allowed; }
.kosa-button.is-gold { background: var(--k-gold); color: var(--k-ink); }
.kosa-button.is-gold::before { background: var(--k-ink); }
.kosa-button.is-gold:hover { color: #fff; }
.kosa-button.is-ink { background: var(--k-ink); color: #fff; }
.kosa-button.is-ink::before { background: var(--k-gold); }
.kosa-button.is-ink:hover { color: var(--k-ink); }
.kosa-button.is-line { border-color: rgb(19 19 19 / 0.35); color: var(--k-ink); }
.kosa-button.is-line::before { background: var(--k-ink); }
.kosa-button.is-line:hover { color: #fff; border-color: var(--k-ink); }
.kosa-button.is-small { min-height: 42px; padding: 0 20px; font-size: 13px; }

.kosa-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--k-gold);
  font: 500 14px/1.2 var(--k-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  transition: background-size 0.5s var(--k-ease);
}
.kosa-link:hover { background-size: 100% 1px; }
.kosa-link:hover .kosa-arrow { transform: translateX(4px); }

/* Curtain: the logo on ink, then the page is uncovered from the bottom up */
.kosa-curtain {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  align-content: center;
  gap: 26px;
  background: var(--k-ink);
  pointer-events: none;
}
.kosa-curtain img { width: min(300px, 56vw); height: auto; }
.kosa-curtain-bar { display: block; width: min(220px, 40vw); height: 1px; background: rgb(255 255 255 / 0.2); position: relative; overflow: hidden; }
.kosa-curtain-bar::after { content: ""; position: absolute; inset: 0; background: var(--k-gold); transform: scaleX(0); transform-origin: left; }
.kosa-site.is-intro .kosa-curtain { display: grid; }
.kosa-site.is-intro .kosa-curtain img { opacity: 0; transform: translateY(14px); filter: blur(8px); }
.kosa-site.is-intro-run .kosa-curtain img { opacity: 1; transform: none; filter: none; transition: opacity 0.7s ease, transform 0.9s var(--k-ease), filter 0.7s ease; }
.kosa-site.is-intro-run .kosa-curtain-bar::after { transform: scaleX(1); transition: transform 0.85s var(--k-ease) 0.15s; }
.kosa-site.is-intro-run .kosa-curtain { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(0.76, 0, 0.24, 1) 1.05s; }
.kosa-site.is-intro-done .kosa-curtain { display: none; }
.kosa-site.from-loader .kosa-curtain img { opacity: 1; transform: none; filter: none; transition: none; }
.kosa-site.from-loader .kosa-curtain-bar::after { transform: scaleX(1); transition: none; }
.kosa-site.from-loader.is-intro-run .kosa-curtain { transition-delay: 0.45s; }

/* Loading screen for a direct visit; it matches the curtain that follows. */
.kosa-loading { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: 26px; background: #131313; }
.kosa-loading img { width: min(300px, 56vw); height: auto; }
.kosa-loading .kosa-curtain-bar { display: block; width: min(220px, 40vw); height: 1px; background: rgb(255 255 255 / 0.2); position: relative; overflow: hidden; }
.kosa-loading .kosa-curtain-bar::after { content: ""; position: absolute; inset: 0; width: 40%; background: #c9a45c; animation: kosa-load 1.1s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes kosa-load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* Progress and nav */
.kosa-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 2px; pointer-events: none; }
.kosa-progress span { display: block; height: 100%; background: var(--k-gold); transform: scaleX(0); transform-origin: left; }
.kosa-nav {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(1320px, calc(100% - 24px));
  height: 64px;
  padding: 0 10px 0 22px;
  translate: -50% 0;
  border: 1px solid rgb(19 19 19 / 0.08);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 30px -18px rgb(19 19 19 / 0.35);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.kosa-nav.is-scrolled { background: rgb(255 255 255 / 0.9); box-shadow: 0 14px 40px -20px rgb(19 19 19 / 0.45); }
.kosa-nav-logo img { width: 92px; height: auto; }
.kosa-nav nav { display: flex; gap: 26px; margin-left: auto; }
.kosa-nav nav a {
  position: relative;
  font: 400 14px/1 var(--k-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--k-mute);
  transition: color 0.3s ease;
}
.kosa-nav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--k-ink); transform: scaleX(0); transition: transform 0.4s var(--k-ease); }
.kosa-nav nav a:hover { color: var(--k-ink); }
.kosa-nav nav a:hover::after { transform: scaleX(1); }
.kosa-sample-chip {
  padding: 6px 10px;
  border-radius: 999px;
  background: #fbf5e7;
  border: 1px solid #ead7ab;
  color: var(--k-gold-deep);
  font: 500 11px/1 var(--k-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Hero: headline on the left, a layered collage of Kosa's portraits on the right */
.kosa-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  min-height: min(100dvh, 980px);
  padding: 118px var(--k-gutter) 56px;
  max-width: 1480px;
  margin: 0 auto;
}
.kosa-hero-kicker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px !important; }
.kosa-hero-kicker span { padding: 7px 13px; border-radius: 999px; background: var(--k-card); border: 1px solid var(--k-line); font-size: 13px; font-weight: 600; color: var(--k-ink); }
.kosa-hero h1 { font-size: clamp(40px, 4.3vw, 70px); line-height: 1.02; }
.kosa-line > span { white-space: nowrap; }
.kosa-hero h1 em { font-style: normal; color: var(--k-gold); }
.kosa-line { display: block; overflow: hidden; padding-bottom: 0.05em; }
.kosa-line > span { display: inline-block; }
.kosa-hero-lede { margin-top: 24px !important; max-width: 460px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: #3d3c39; }
.kosa-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.kosa-hero-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 28px; margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--k-line); }
.kosa-hero-facts dt { font-size: 12px; font-weight: 600; color: var(--k-mute); margin-bottom: 6px; }
.kosa-hero-facts dd { margin: 0; font: 500 17px/1.2 var(--k-display); letter-spacing: 0.02em; }

.kosa-hero-art {
  --px: 0;
  --py: 0;
  position: relative;
  height: min(76vh, 760px);
  min-height: 520px;
}
.kosa-art {
  position: absolute;
  overflow: hidden;
  border-radius: var(--k-radius);
  background: var(--k-soft);
  box-shadow: 0 30px 60px -30px rgb(19 19 19 / 0.45);
  translate: calc(var(--px) * var(--depth, 0) * 1px) calc(var(--shift, 0px) + var(--py) * var(--depth, 0) * 1px);
  transition: translate 0.9s var(--k-ease);
}
.kosa-art img { width: 100%; height: 100%; object-fit: cover; }
.kosa-art-main { --depth: -8; left: 12%; right: 6%; top: 4%; bottom: 10%; max-width: 600px; }
.kosa-art-a { --depth: 18; left: 0; bottom: 0; width: 34%; aspect-ratio: 4 / 5; }
.kosa-art-b { --depth: 26; right: 0; top: 0; width: 28%; aspect-ratio: 1; }
.kosa-art-c { --depth: -22; right: 2%; bottom: 3%; width: 30%; aspect-ratio: 5 / 4; }
.kosa-art-badge {
  position: absolute;
  left: 4%;
  top: 8%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: var(--k-ink);
  color: var(--k-gold);
  font: 500 10px/1 var(--k-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 16px 36px -16px rgb(19 19 19 / 0.6);
}
.kosa-art-badge img { width: 70px; height: auto; }

/* Photo ribbon */
.kosa-ribbon { overflow: hidden; padding: 8px 0 36px; }
.kosa-ribbon-track { display: flex; gap: 14px; width: max-content; will-change: transform; }
.kosa-ribbon figure { flex: none; width: clamp(180px, 16vw, 250px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--k-radius); background: var(--k-soft); }
.kosa-ribbon figure:nth-child(even) { aspect-ratio: 1; align-self: center; }
.kosa-ribbon img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--k-ease); }
.kosa-ribbon figure:hover img { transform: scale(1.06); }

.kosa-sample-strip {
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px var(--k-gutter);
  color: var(--k-mute);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.kosa-sample-strip strong { color: var(--k-gold-deep); font-weight: 700; }

/* About: scroll-lit manifesto and the three rooms */
.kosa-about { max-width: 1480px; margin: 0 auto; padding: clamp(72px, 12vh, 140px) var(--k-gutter) clamp(64px, 10vh, 120px); }
.kosa-manifesto { max-width: 1180px; font: 400 clamp(28px, 3.4vw, 54px)/1.18 var(--k-display); text-transform: uppercase; }
.kosa-word { color: #c9c8c3; transition: color 0.5s ease; }
.kosa-word.is-lit { color: var(--k-ink); }
.kosa-rooms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 360px)) minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
  align-items: end;
  margin-top: clamp(56px, 9vh, 100px);
}
.kosa-room { transform: translate3d(0, var(--shift, 0px), 0); }
.kosa-room img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--k-radius); }
.kosa-room:nth-child(2) { margin-bottom: 48px; }
.kosa-room figcaption { margin-top: 12px; font: 500 13px/1 var(--k-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-mute); }
.kosa-rooms-note { align-self: end; padding: 0 0 8px clamp(0px, 2vw, 24px); }
.kosa-rooms-note strong { display: block; font: 500 20px/1.25 var(--k-display); letter-spacing: 0.02em; text-transform: uppercase; }
.kosa-rooms-note p { margin-top: 10px; color: var(--k-mute); font-size: 15px; line-height: 1.6; max-width: 320px; }

/* Menu: a sticky rounded stage beside the list; it wipes to each category */
.kosa-menu {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 4vw, 64px);
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--k-gutter);
}
.kosa-stage { position: sticky; top: 96px; height: calc(100dvh - 120px); max-height: 800px; margin: 24px 0; }
.kosa-stage-frame { position: relative; height: 100%; overflow: hidden; border-radius: var(--k-radius); background: var(--k-soft); }
.kosa-stage-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.14);
  transition: clip-path 1.1s var(--k-ease), transform 1.6s var(--k-ease);
}
.kosa-stage-image.is-active { clip-path: inset(0 0 0 0); transform: scale(1); z-index: 1; }
.kosa-stage-frame::after { content: ""; position: absolute; inset: 55% 0 0; z-index: 2; background: linear-gradient(transparent, rgb(19 19 19 / 0.55)); pointer-events: none; }
.kosa-stage-names { position: absolute; left: 28px; right: 28px; bottom: 22px; z-index: 3; height: clamp(64px, 8vw, 120px); overflow: hidden; }
.kosa-stage-names span {
  position: absolute;
  left: 0;
  top: 0;
  font: 500 clamp(64px, 8vw, 120px)/1 var(--k-display);
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  transform: translateY(105%);
  transition: transform 0.9s var(--k-ease);
}
.kosa-stage-names span.is-past { transform: translateY(-105%); }
.kosa-stage-names span.is-active { transform: translateY(0); }
.kosa-menu-body { padding: clamp(40px, 8vh, 96px) 0 clamp(64px, 11vh, 120px); }
.kosa-menu-body > h2 { font-size: clamp(44px, 5vw, 80px); line-height: 1; }
.kosa-menu-note { margin-top: 14px !important; color: var(--k-mute); font-size: 15px; line-height: 1.6; max-width: 460px; }
.kosa-menu-group { margin-top: clamp(40px, 7vh, 72px); padding: clamp(22px, 2.4vw, 34px); border-radius: var(--k-radius); background: var(--k-card); scroll-margin-top: 96px; }
.kosa-menu-group header { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline; }
.kosa-menu-count { font: 500 14px/1 var(--k-display); color: var(--k-gold-deep); letter-spacing: 0.1em; }
.kosa-menu-group header h3 { font-size: clamp(30px, 2.6vw, 40px); }
.kosa-menu-group header p { grid-column: 2; margin-top: 8px; color: var(--k-mute); font-size: 15px; line-height: 1.6; max-width: 460px; }
.kosa-menu-group header strong { color: var(--k-ink); font-weight: 600; }
.kosa-menu-inline-art { display: none; }
.kosa-menu-list { list-style: none; margin: 18px 0 0; padding: 0; }
.kosa-service {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  align-items: center;
  gap: 18px;
  width: calc(100% + 28px);
  margin: 0 -14px;
  padding: 16px 14px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--k-ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 0.35s ease;
}
.kosa-menu-list li + li .kosa-service::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: var(--k-line); }
.kosa-service:hover, .kosa-service:focus-visible { background: var(--k-paper); }
.kosa-service-name { font-size: 17px; font-weight: 600; line-height: 1.35; }
.kosa-service-name small { display: block; margin-top: 4px; color: var(--k-mute); font-size: 13.5px; font-weight: 400; }
.kosa-service-meta { display: grid; justify-items: end; gap: 5px; }
.kosa-service-meta strong { font: 500 19px/1 var(--k-display); letter-spacing: 0.02em; }
.kosa-service-meta em { font-style: normal; color: var(--k-mute); font-size: 12.5px; }
.kosa-service-go {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--k-ink);
  color: #fff;
  opacity: 0;
  transform: scale(0.6) rotate(-45deg);
  transition: opacity 0.35s ease, transform 0.5s var(--k-ease);
}
.kosa-service:hover .kosa-service-go, .kosa-service:focus-visible .kosa-service-go { opacity: 1; transform: none; }
.kosa-service[disabled] { cursor: not-allowed; opacity: 0.55; }

/* Team: names as a typographic index; the open name fills with ink */
.kosa-team { max-width: 1480px; margin: 0 auto; padding: clamp(80px, 13vh, 150px) var(--k-gutter); }
.kosa-team h2 { font-size: clamp(44px, 5vw, 80px); line-height: 1; }
.kosa-people { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--k-line); }
.kosa-person { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center; border-bottom: 1px solid var(--k-line); }
.kosa-person-name { display: flex; align-items: flex-start; gap: 18px; padding: 14px 0 8px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--k-ink); }
.kosa-person-index { padding-top: 1.4em; font: 500 14px/1 var(--k-display); letter-spacing: 0.1em; color: var(--k-gold-deep); }
.kosa-person-word { position: relative; display: block; font: 500 clamp(80px, 12vw, 190px)/0.95 var(--k-display); text-transform: uppercase; }
.kosa-person-outline { color: transparent; -webkit-text-stroke: 1.2px rgb(19 19 19 / 0.35); }
.kosa-person-fill { position: absolute; inset: 0 auto 0 0; color: var(--k-ink); clip-path: inset(0 100% 0 0); transition: clip-path 0.9s var(--k-ease); }
.kosa-person-name:hover .kosa-person-fill { clip-path: inset(0 55% 0 0); }
.kosa-person-name[aria-expanded="true"] .kosa-person-fill { clip-path: inset(0 0 0 0); }
.kosa-person-detail { display: grid; gap: 12px; justify-items: start; max-width: 440px; color: var(--k-mute); font-size: 15.5px; line-height: 1.6; opacity: 0.35; transform: translateX(12px); transition: opacity 0.6s ease, transform 0.8s var(--k-ease); }
.kosa-person:has([aria-expanded="true"]) .kosa-person-detail { opacity: 1; transform: none; }
.kosa-person-role { color: var(--k-ink); font: 500 14px/1 var(--k-display); letter-spacing: 0.16em; text-transform: uppercase; }
.kosa-person-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kosa-person-tags li { padding: 6px 12px; border-radius: 999px; background: var(--k-card); border: 1px solid var(--k-line); color: var(--k-ink); font-size: 13px; font-weight: 600; }

/* Gallery: vertical scroll pans the strip sideways on wide screens */
.kosa-gallery { position: relative; }
.kosa-site.has-pan .kosa-gallery { height: calc(100dvh + var(--pan-distance, 0px)); }
.kosa-gallery-sticky { display: grid; align-content: center; gap: 30px; padding: 64px 0; overflow: hidden; }
.kosa-site.has-pan .kosa-gallery-sticky { position: sticky; top: 0; height: 100dvh; padding: 88px 0 24px; }
.kosa-gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 0 var(--k-gutter); max-width: 1480px; }
.kosa-gallery h2 { font-size: clamp(44px, 5vw, 80px); line-height: 1; }
.kosa-gallery-head p { color: var(--k-mute); font-size: 15px; max-width: 280px; }
.kosa-gallery-track { display: flex; gap: clamp(14px, 1.6vw, 22px); padding: 0 var(--k-gutter); width: max-content; will-change: transform; }
.kosa-shot { --focus: 1; flex: none; width: min(46vw, 620px); height: min(62vh, 560px); overflow: hidden; border-radius: var(--k-radius); background: var(--k-soft); }
.kosa-shot:nth-child(3n + 2) { width: min(34vw, 440px); }
.kosa-shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - var(--focus) * 0.12)); }

/* Products */
.kosa-products {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(72px, 12vh, 130px) var(--k-gutter);
}
.kosa-products h2 { font-size: clamp(30px, 3vw, 46px); line-height: 1.05; }
.kosa-products p { margin-top: 14px; color: var(--k-mute); font-size: 15.5px; line-height: 1.6; max-width: 380px; }
.kosa-products ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.kosa-products li { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--k-radius); background: #fff; transition: transform 0.6s var(--k-ease), box-shadow 0.6s var(--k-ease); }
.kosa-products li:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -26px rgb(19 19 19 / 0.4); }
.kosa-products li img { width: 70%; }

/* Footer: the one ink band, with hours and the closing call to action */
.kosa-foot { margin: 0 12px 12px; padding: clamp(56px, 9vh, 96px) var(--k-gutter) 28px; border-radius: 28px; background: var(--k-ink); color: #f4f3ef; }
.kosa-foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 96px); max-width: 1360px; margin: 0 auto; }
.kosa-foot h2 { color: #f4f3ef; font-size: clamp(40px, 4.6vw, 72px); line-height: 1; max-width: 620px; }
.kosa-foot address { margin: 26px 0 14px; font: 400 clamp(20px, 1.8vw, 26px)/1.4 var(--k-display); font-style: normal; letter-spacing: 0.02em; }
.kosa-hours { list-style: none; margin: 0; padding: 0; display: grid; align-self: end; }
.kosa-hours li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgb(244 243 239 / 0.14); font-size: 15px; }
.kosa-hours li span { color: rgb(244 243 239 / 0.6); }
.kosa-hours li strong { font-weight: 500; }
.kosa-hours li.is-closed strong { color: rgb(244 243 239 / 0.5); font-weight: 400; }
.kosa-hours li.is-today span, .kosa-hours li.is-today strong { color: var(--k-gold); }
.kosa-cta-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1360px;
  margin: clamp(56px, 9vh, 100px) auto 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: 500 clamp(64px, 13vw, 220px)/1 var(--k-display);
  text-transform: uppercase;
  text-align: left;
  color: #f4f3ef;
}
.kosa-cta-button span { background: linear-gradient(90deg, var(--k-gold) 50%, #f4f3ef 50%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 0.9s var(--k-ease); }
.kosa-cta-button:hover span { background-position: 0 0; }
.kosa-cta-button .kosa-arrow { width: 0.46em; height: 0.46em; color: var(--k-gold); }
.kosa-cta-button:hover .kosa-arrow { transform: translateX(12px); }
.kosa-cta-button[disabled] { opacity: 0.45; cursor: not-allowed; }
.kosa-foot-base { display: flex; justify-content: space-between; align-items: center; gap: 20px; max-width: 1360px; margin: 40px auto 0; padding-top: 22px; border-top: 1px solid rgb(244 243 239 / 0.14); }
.kosa-foot-base p { max-width: 620px; color: rgb(244 243 239 / 0.6); font-size: 13px; line-height: 1.6; }
.kosa-foot-back { display: inline-flex; align-items: center; gap: 8px; color: #f4f3ef; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.kosa-foot-back:hover .kosa-arrow { transform: translateX(4px); }

/* Entrance: curtain, then headline lines rise and the collage settles in.
   Nothing is hidden until the script arms the page. */
.kosa-site.is-intro .kosa-nav { opacity: 0; translate: -50% -24px; }
.kosa-site.is-intro .kosa-line > span { transform: translateY(108%); }
.kosa-site.is-intro .kosa-rise { opacity: 0; transform: translateY(18px); filter: blur(6px); }
.kosa-site.is-intro .kosa-art { clip-path: inset(100% 0 0 0 round var(--k-radius)); }
.kosa-site.is-intro .kosa-art img { scale: 1.3; }
.kosa-site.is-intro .kosa-art-badge { opacity: 0; scale: 0.4; }
.kosa-site.is-intro .kosa-ribbon { opacity: 0; transform: translateY(40px); }
.kosa-site.is-intro-run .kosa-nav, .kosa-site.is-intro-done .kosa-nav { opacity: 1; translate: -50% 0; transition: opacity 0.8s ease 1.9s, translate 1s var(--k-ease) 1.9s, background 0.4s ease, box-shadow 0.4s ease; }
.kosa-site.is-intro-run .kosa-line > span, .kosa-site.is-intro-done .kosa-line > span { transform: none; transition: transform 1.2s var(--k-ease) 1.35s; }
.kosa-site.is-intro-run .kosa-line:nth-child(2) > span { transition-delay: 1.45s; }
.kosa-site.is-intro-run .kosa-line:nth-child(3) > span { transition-delay: 1.55s; }
.kosa-site.is-intro-run .kosa-rise, .kosa-site.is-intro-done .kosa-rise { opacity: 1; transform: none; filter: none; transition: opacity 1s ease, transform 1.1s var(--k-ease), filter 1s ease; transition-delay: calc(1.4s + var(--d, 0) * 0.08s); }
.kosa-site.is-intro-run .kosa-art, .kosa-site.is-intro-done .kosa-art { clip-path: inset(0 0 0 0 round var(--k-radius)); transition: clip-path 1.3s var(--k-ease) 1.2s, translate 0.9s var(--k-ease); }
.kosa-site.is-intro-run .kosa-art-a { transition-delay: 1.45s, 0s; }
.kosa-site.is-intro-run .kosa-art-b { transition-delay: 1.6s, 0s; }
.kosa-site.is-intro-run .kosa-art-c { transition-delay: 1.75s, 0s; }
.kosa-site.is-intro-run .kosa-art img, .kosa-site.is-intro-done .kosa-art img { scale: 1; transition: scale 2s var(--k-ease) 1.2s; }
.kosa-site.is-intro-run .kosa-art-badge, .kosa-site.is-intro-done .kosa-art-badge { opacity: 1; scale: 1; transition: opacity 0.6s ease 2.1s, scale 0.9s var(--k-ease) 2.1s; }
.kosa-site.is-intro-run .kosa-ribbon, .kosa-site.is-intro-done .kosa-ribbon { opacity: 1; transform: none; transition: opacity 1s ease 2s, transform 1.2s var(--k-ease) 2s; }
/* After the intro (or on a later visit) nothing waits on the intro delays. */
.kosa-site.is-intro-done .kosa-nav,
.kosa-site.is-intro-done .kosa-line > span,
.kosa-site.is-intro-done .kosa-rise,
.kosa-site.is-intro-done .kosa-ribbon,
.kosa-site.is-intro-done .kosa-art-badge { transition-delay: 0s; }
.kosa-site.is-intro-done .kosa-art { transition: translate 0.9s var(--k-ease); }
.kosa-site.is-intro-done .kosa-art img { transition: none; }

.kosa-site.is-armed .kosa-reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s ease, transform 1.2s var(--k-ease); }
.kosa-site.is-armed .kosa-reveal.is-in { opacity: 1; transform: none; }
.kosa-site.is-armed .kosa-room.kosa-reveal.is-in { transform: translate3d(0, var(--shift, 0px), 0); }
.kosa-site.is-armed .kosa-person.kosa-reveal { transition-delay: calc(var(--i, 0) * 0.08s); }
.kosa-site.is-armed .kosa-menu-list li { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.9s var(--k-ease); }
.kosa-site.is-armed .kosa-menu-group.is-in .kosa-menu-list li { opacity: 1; transform: none; transition-delay: calc(min(var(--n, 0), 8) * 0.05s); }

/* Reduced motion: everything in place */
.kosa-site.is-static .kosa-word { color: var(--k-ink); }
.kosa-site.is-static .kosa-stage-image:first-child { clip-path: none; transform: none; }
.kosa-site.is-static .kosa-stage-names span:first-child { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kosa-site *, .kosa-site *::before, .kosa-site *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* Tablet */
@media (max-width: 1080px) {
  .kosa-nav nav { gap: 18px; }
  .kosa-hero { grid-template-columns: 1fr; padding-top: 112px; min-height: 0; }
  .kosa-hero-art { height: 560px; min-height: 0; max-width: 720px; width: 100%; justify-self: center; }
  .kosa-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kosa-rooms-note { grid-column: 1 / -1; padding: 8px 0 0; }
  .kosa-person { grid-template-columns: 1fr; gap: 0; padding-bottom: 22px; }
  .kosa-foot-grid { grid-template-columns: 1fr; }
}

/* Phones: one column; the menu art sits above each category and the gallery
   scrolls sideways under the finger instead of panning with the page. */
@media (max-width: 760px) {
  .kosa-nav { top: 8px; height: 56px; gap: 10px; padding: 0 6px 0 16px; }
  .kosa-nav nav { display: none; }
  .kosa-nav-logo img { width: 74px; }
  .kosa-sample-chip { margin-left: auto; }
  .kosa-hero { padding: 92px 16px 32px; gap: 32px; }
  .kosa-hero h1 { font-size: clamp(32px, 9.6vw, 48px); }
  .kosa-hero-art { order: -1; margin-top: -4px; }
  .kosa-hero-kicker { margin-bottom: 18px !important; }
  .kosa-hero-actions .kosa-button { flex: 1 1 auto; }
  .kosa-hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .kosa-hero-facts dd { font-size: 15px; }
  .kosa-hero-art { height: 104vw; }
  .kosa-art-badge { width: 88px; height: 88px; }
  .kosa-art-badge img { width: 52px; }
  .kosa-ribbon figure { width: 150px; }
  .kosa-rooms { grid-template-columns: 1fr 1fr; }
  .kosa-rooms .kosa-room:nth-child(3) { display: none; }
  .kosa-room:nth-child(2) { margin-bottom: 0; }
  .kosa-menu { grid-template-columns: 1fr; }
  .kosa-stage { display: none; }
  .kosa-menu-body { padding: 24px 0 64px; }
  .kosa-menu-group { padding: 16px; }
  .kosa-menu-inline-art { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; margin-bottom: 18px; }
  .kosa-menu-inline-art img { width: 100%; height: 100%; object-fit: cover; }
  .kosa-service { grid-template-columns: minmax(0, 1fr) auto; }
  .kosa-service-go { display: none; }
  .kosa-gallery-head { flex-direction: column; align-items: start; }
  .kosa-gallery-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; transform: none !important; }
  .kosa-gallery-track::-webkit-scrollbar { display: none; }
  .kosa-shot, .kosa-shot:nth-child(3n + 2) { width: 78vw; height: 96vw; scroll-snap-align: center; }
  .kosa-shot img { transform: none; }
  .kosa-products { grid-template-columns: 1fr; }
  .kosa-foot { margin: 0 8px 8px; border-radius: 22px; }
  .kosa-foot-base { flex-direction: column; align-items: start; }
  .kosa-person-word { font-size: clamp(64px, 22vw, 120px); }
}

/* Sample salons: badge beside the name and notices in booking. */
.sample-salon-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 8px;
  border: 1px solid #d9cdf7;
  border-radius: 999px;
  background: #f4f0fd;
  color: #5b3fb5;
  font: 600 11px/1.2 "Figtree", system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.sample-salon-badge.is-heading { font-size: 12px; padding: 4px 10px; transform: translateY(-4px); }
.sample-salon-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #ddd2f8;
  border-radius: 14px;
  background: #f6f2fe;
  color: #3d2f66;
  text-align: left;
}
.sample-salon-notice strong { display: block; font-size: 15px; font-weight: 700; color: #2d2350; }
.sample-salon-notice p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: #574a7c; }
.sample-salon-notice-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #916be8;
  color: #fff;
}
.sample-salon-notice-mark svg, .sample-salon-notice-mark .icon { width: 17px; height: 17px; }
.sample-salon-notice.is-confirmation { margin: 22px auto 0; max-width: 620px; }

/* ======================================================================
   Beliz (beliz.ca), a multi-page site: /beliz (home with a 3D walk through
   the salon), /beliz/info, /beliz/services, /beliz/location, /beliz/careers.
   Thin Roboto, the Beliz wordmark and monogram (masks, so they take the
   theme colour), the salon's own photographs, and seven classic two-colour
   pairings a tap cycles through.
   ====================================================================== */
html.has-custom-salon-site:has(.beliz-site) { scrollbar-gutter: stable; }
html.has-custom-salon-site:has(.beliz-site), html.has-custom-salon-site:has(.beliz-site) body { background: var(--beliz-page-bg, #f8f8ff); }
.beliz-site {
  --b-bg: #f8f8ff;
  --b-fg: #303030;
  --b-soft: color-mix(in srgb, var(--b-fg) 6%, var(--b-bg));
  --b-line: color-mix(in srgb, var(--b-fg) 15%, transparent);
  --b-mute: color-mix(in srgb, var(--b-fg) 64%, var(--b-bg));
  --b-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --b-gutter: clamp(20px, 4.5vw, 72px);
  --b-radius: 18px;
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--b-bg);
  color: var(--b-fg);
  font-family: "Roboto", "Figtree", system-ui, sans-serif;
  font-weight: 300;
  overflow-x: clip;
}
.beliz-site h1, .beliz-site h2, .beliz-site h3 { margin: 0; color: inherit; font-weight: 300; }
.beliz-site p { margin: 0; }
.beliz-site a { color: inherit; }
.beliz-site figure { margin: 0; }
.beliz-site img { display: block; max-width: 100%; }
.beliz-site :focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; }
.beliz-site svg { flex: none; }
.beliz-mark { display: block; background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.beliz-wordmark { --mark: url("/assets/custom-sites/beliz/wordmark.webp?v=1"); aspect-ratio: 788 / 250; }
.beliz-monogram { --mark: url("/assets/custom-sites/beliz/monogram.webp?v=1"); aspect-ratio: 748 / 628; }
.beliz-kicker { font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.beliz-loading { position: fixed; inset: 0; z-index: 50; background: #f8f8ff; }
/* Before any code runs, a custom website's address shows its own backdrop */
html.custom-site-boot::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; background: var(--custom-site-boot, #f8f8ff); pointer-events: none; }
@keyframes beliz-breathe { 50% { opacity: 0.55; } }

/* Colour change: the new page appears inside a growing circle */
html.beliz-theming::view-transition-old(root), html.beliz-theming::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.beliz-ripple { position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
.beliz-site.is-preview .beliz-ripple { position: absolute; }
.beliz-ripple span { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 1px solid var(--b-fg); opacity: 0; animation: beliz-ring 1.5s var(--b-ease) forwards; }
.beliz-ripple span:nth-child(2) { animation-delay: 0.12s; }
.beliz-ripple span:nth-child(3) { animation-delay: 0.24s; }
@keyframes beliz-ring { 0% { transform: scale(0.2); opacity: 0.55; } 100% { transform: scale(46); opacity: 0; } }

/* Page change: the header stays put (only the new one is drawn, so its
   text never doubles), the old page settles back and the new one rises over
   it. Only transform, opacity and clip-path animate, so it stays smooth. */
html.beliz-paging .beliz-nav { view-transition-name: beliz-nav; }
html.beliz-paging::view-transition-group(beliz-nav) { animation: none; z-index: 2; }
html.beliz-paging::view-transition-old(beliz-nav) { display: none; }
html.beliz-paging::view-transition-new(beliz-nav) { animation: none; }
html.beliz-paging::view-transition-old(root) { animation: beliz-page-out 0.62s cubic-bezier(0.65, 0, 0.35, 1) both; }
html.beliz-paging::view-transition-new(root) { animation: beliz-page-in 0.82s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes beliz-page-out { to { opacity: 0; transform: scale(0.97); } }
@keyframes beliz-page-in { from { clip-path: inset(100% 0 0 0); transform: translateY(6%); } to { clip-path: inset(0 0 0 0); transform: none; } }

/* Header */
.beliz-nav { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 76px; padding: 0 var(--b-gutter); transform: translateZ(0); backface-visibility: hidden; transition: background-color 0.4s ease, box-shadow 0.4s ease; }
.beliz-nav.is-scrolled { background-color: color-mix(in srgb, var(--b-bg) 94%, transparent); box-shadow: 0 1px 0 var(--b-line); }
.beliz-nav-mark { justify-self: start; }
.beliz-nav-mark .beliz-monogram { width: 44px; transition: transform 0.6s var(--b-ease); }
.beliz-nav-mark:hover .beliz-monogram { transform: rotate(-6deg) scale(1.06); }
.beliz-nav nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.beliz-nav nav a, .beliz-foot a { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.beliz-nav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--b-ease); }
.beliz-nav nav a:hover::after, .beliz-nav nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.beliz-nav svg, .beliz-foot svg { width: 15px; height: 15px; }
.beliz-book { justify-self: end; position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 20px; border: 1px solid currentColor; background: none; color: inherit; font: 400 13.5px/1 "Roboto", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; overflow: hidden; transition: color 0.45s var(--b-ease); }
.beliz-book::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--b-fg); transform: translateY(101%); transition: transform 0.5s var(--b-ease); }
.beliz-book:hover { color: var(--b-bg); }
.beliz-book:hover::before { transform: none; }
.beliz-book svg { width: 15px; height: 14px; }
.beliz-book[disabled] { opacity: 0.4; cursor: not-allowed; }
.beliz-menu-toggle { display: none; }
.beliz-sheet { display: none; }

/* Buttons and links */
.beliz-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.beliz-outline, .beliz-solid { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border: 1px solid var(--b-fg); border-radius: 999px; background: none; color: var(--b-fg); font: 400 13.5px/1 "Roboto", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; overflow: hidden; transition: color 0.45s var(--b-ease), transform 0.25s var(--b-ease), opacity 0.3s ease; }
.beliz-outline svg, .beliz-solid svg { width: 18px; height: 18px; transition: transform 0.5s var(--b-ease); }
.beliz-outline::before, .beliz-solid::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform 0.55s var(--b-ease); }
.beliz-outline::before { background: var(--b-fg); }
.beliz-outline:hover { color: var(--b-bg); }
.beliz-site .beliz-solid { background: var(--b-fg); color: var(--b-bg); }
.beliz-site .beliz-outline { color: var(--b-fg); }
.beliz-site .beliz-outline:hover { color: var(--b-bg); }
.beliz-solid::before { background: color-mix(in srgb, var(--b-fg) 82%, var(--b-bg)); }
.beliz-outline:hover::before, .beliz-solid:hover:not(:disabled)::before { transform: scaleX(1); transform-origin: left; }
.beliz-outline:hover svg, .beliz-solid:hover svg { transform: translateX(4px); }
.beliz-outline:active, .beliz-solid:active { transform: scale(0.98); }
.beliz-solid:disabled { opacity: 0.45; cursor: not-allowed; }
.beliz-text-link { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: 400 14px/1.4 "Roboto", sans-serif; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--b-line); cursor: pointer; transition: text-decoration-color 0.3s ease; }
.beliz-text-link:hover { text-decoration-color: currentColor; }
.beliz-text-link svg { width: 16px; height: 16px; }
.beliz-card { padding: clamp(20px, 2.4vw, 30px); border-radius: var(--b-radius); background: var(--b-soft); border: 1px solid var(--b-line); }
.beliz-card-icon { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--b-line); }
.beliz-card-icon svg { width: 19px; height: 19px; }

/* Home: the floating wordmark between two orbits */
.beliz-main { position: relative; flex: 1; display: flex; flex-direction: column; }
.beliz-site[data-beliz-current="home"] .beliz-nav:not(.is-scrolled) { background: none; }
/* Home: a journey. The page colour covers the salon photograph except
   through the Beliz letters; scrolling flies through the B until the
   photograph fills the screen, and the information scrolls over it. */
.beliz-journey { --mark-w: min(72vw, 640px); position: relative; margin-top: -76px; color: #fff; overflow: clip; }
.beliz-journey-view { position: sticky; top: 0; z-index: 0; height: 100lvh; margin-bottom: -100lvh; overflow: hidden; background: #2b2723; pointer-events: none; }
.beliz-photos { position: absolute; inset: 0; }
.beliz-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; scale: calc(1 + var(--enter, 0)); transform-origin: 50% 50%; transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1); animation: beliz-drift 26s ease-in-out infinite alternate; will-change: transform, opacity; backface-visibility: hidden; }
.beliz-photo:nth-child(even) { animation-direction: alternate-reverse; animation-duration: 30s; }
@keyframes beliz-drift { from { transform: scale(1.04) translate3d(-1.5%, 0, 0); } to { transform: scale(1.1) translate3d(1.5%, -1%, 0); } }
.beliz-site .beliz-photo { display: block; max-width: none; }
.beliz-photo.is-active { opacity: 1; }
.beliz-shade { position: absolute; inset: 0; opacity: 0.52; background: linear-gradient(90deg, rgb(18 15 12 / 0.92) 0%, rgb(18 15 12 / 0.6) 50%, rgb(18 15 12 / 0.3) 100%), linear-gradient(180deg, rgb(18 15 12 / 0.25), transparent 30%, transparent 70%, rgb(18 15 12 / 0.35)); }
.beliz-veil { position: absolute; inset: 0; background: var(--b-bg); -webkit-mask: url("/assets/custom-sites/beliz/wordmark.svg?v=4") no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: url("/assets/custom-sites/beliz/wordmark.svg?v=4") no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; -webkit-mask-size: var(--mark-w) auto, 100% 100%; mask-size: var(--mark-w) auto, 100% 100%; -webkit-mask-position: center, 0 0; mask-position: center, 0 0; }
.beliz-intro { position: relative; z-index: 1; height: 100svh; color: var(--b-fg); }
.beliz-intro-screen { position: sticky; top: 0; display: grid; place-items: center; height: 100svh; padding: 0 var(--b-gutter); cursor: pointer; }
.beliz-intro-mark { display: block; width: var(--mark-w); aspect-ratio: 3152 / 1000; }
.beliz-journey .beliz-home-stage { width: calc(var(--mark-w) * 1.18); aspect-ratio: 1.9; }
.beliz-home-cue { position: absolute; left: 50%; bottom: 84px; translate: -50% 0; display: grid; justify-items: center; gap: 10px; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--b-mute); }
.beliz-home-cue i { width: 1px; height: 34px; background: linear-gradient(currentColor, transparent); transform-origin: top; animation: beliz-cue 2.4s var(--b-ease) infinite; }
@keyframes beliz-cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.beliz-scene { position: relative; z-index: 1; display: grid; align-content: center; gap: clamp(28px, 5vh, 56px); min-height: 100svh; padding: clamp(110px, 16svh, 180px) var(--b-gutter); cursor: pointer; }
.beliz-scene-copy { display: grid; gap: 22px; max-width: 1100px; cursor: auto; }
.beliz-scene.is-about { align-content: start; min-height: 88svh; padding-top: clamp(40px, 8svh, 90px); }
.beliz-phrase { display: inline-block; text-wrap: balance; }
.beliz-site p, .beliz-site li, .beliz-site dd { text-wrap: pretty; }
.beliz-site h1, .beliz-site h2, .beliz-site h3 { text-wrap: balance; }
.beliz-scene-copy.is-center { justify-items: center; max-width: none; text-align: center; }
.beliz-scene-copy.is-center .beliz-scene-actions { justify-content: center; }
.beliz-scene .beliz-kicker { color: rgb(255 255 255 / 0.72); }
.beliz-scene-title { font-size: clamp(40px, 5.2vw, 84px); line-height: 1.03; letter-spacing: -0.04em; text-wrap: balance; color: #fff; text-shadow: 0 2px 40px rgb(0 0 0 / 0.35); }
.beliz-scene-text, .beliz-scene .beliz-kicker { text-shadow: 0 1px 18px rgb(0 0 0 / 0.4); }
.beliz-scene.is-book .beliz-scene-copy { padding: 48px 40px; border-radius: 40px; background: radial-gradient(closest-side, rgb(18 15 12 / 0.42), transparent); }
.beliz-scene-title.is-huge { font-size: clamp(48px, 8vw, 128px); }
.beliz-scene-text { max-width: 46ch; font-size: 17px; line-height: 1.7; color: rgb(255 255 255 / 0.82); }
.beliz-scene-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.beliz-site .beliz-solid.is-light { background: #fff; color: #1d1a17; border-color: #fff; }
.beliz-site .beliz-solid.is-light::before { background: var(--b-bg); }
.beliz-site .beliz-text-link.is-light { color: #fff; text-decoration-color: rgb(255 255 255 / 0.45); }
.beliz-scene-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; margin-top: 12px; }
.beliz-scene-pages a { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: rgb(255 255 255 / 0.8); transition: color 0.3s ease; }
.beliz-scene-pages a:hover { color: #fff; }

/* Panels sit on the photograph as frosted glass */
.beliz-panel { --line: rgb(255 255 255 / 0.16); --soft: rgb(255 255 255 / 0.72); position: relative; padding: clamp(24px, 2.8vw, 36px); border-radius: 26px; background: linear-gradient(145deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04)), rgb(24 20 17 / 0.42); border: 1px solid rgb(255 255 255 / 0.18); color: #fff; box-shadow: 0 40px 90px -40px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.16); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); cursor: auto; }
.beliz-scene.is-hours .beliz-panel { max-width: 560px; }
.beliz-scene.is-policies .beliz-panel { max-width: 760px; }
.beliz-scene .beliz-card-icon { border-color: var(--line); color: #fff; }

/* Menu: one category after another, each row arriving as it scrolls in */
.beliz-scene.is-menu::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(14 12 10 / 0.62), rgb(14 12 10 / 0.38)); -webkit-mask: linear-gradient(transparent, #000 18vh, #000 calc(100% - 18vh), transparent); mask: linear-gradient(transparent, #000 18vh, #000 calc(100% - 18vh), transparent); }
.beliz-scene.is-menu > * { position: relative; }
.beliz-menu-flow { position: relative; display: grid; gap: clamp(56px, 9vh, 96px); max-width: 1100px; }
.beliz-menu-group { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px 56px; align-items: start; }
.beliz-menu-group h3 { position: sticky; top: 110px; display: grid; gap: 8px; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -0.03em; color: #fff; text-shadow: 0 2px 30px rgb(0 0 0 / 0.35); }
.beliz-menu-group h3 small { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(255 255 255 / 0.66); }
.beliz-menu-group ul { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgb(255 255 255 / 0.2); }
.beliz-menu-group li { border-bottom: 1px solid rgb(255 255 255 / 0.14); }
.beliz-menu-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 18px; width: 100%; padding: 18px 4px; border: 0; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; transition: padding 0.4s var(--b-ease), opacity 0.3s ease; }
.beliz-menu-row:hover:not(:disabled) { padding-left: 14px; }
.beliz-menu-row:disabled { cursor: not-allowed; opacity: 0.55; }
.beliz-menu-name { font-size: 17px; line-height: 1.4; }
.beliz-menu-meta { font-size: 14px; color: rgb(255 255 255 / 0.72); white-space: nowrap; }
.beliz-site.is-armed .beliz-menu-group .beliz-reveal { transform: translateY(22px); transition: opacity 0.9s ease, transform 1s var(--b-ease); transition-delay: calc(var(--i, 0) * 0.05s); }
.beliz-site.is-armed .beliz-menu-group .beliz-reveal.is-shown { transform: none; }

/* Hours: plain lines, days with the same hours together */
.beliz-hours-simple { display: grid; gap: 26px; }
.beliz-hours-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 16px; }
.beliz-hours-status strong { font-size: clamp(26px, 2.6vw, 34px); font-weight: 300; letter-spacing: -0.02em; }
.beliz-hours-status span { color: var(--soft); }
.beliz-hours-status i { width: 10px; height: 10px; border-radius: 50%; background: #9aa0a6; }
.beliz-hours-status.is-open i { background: #5fd394; animation: beliz-pulse 2s ease-out infinite; }
.beliz-hours-runs { display: grid; margin: 0; }
.beliz-hours-runs div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.beliz-hours-runs dt { font-size: 18px; }
.beliz-hours-runs dd { margin: 0; font-size: 18px; color: rgb(255 255 255 / 0.85); }
.beliz-hours-runs .is-closed dd { color: var(--soft); }
.beliz-hours-runs div { padding: 13px 0; }
.beliz-hours-runs .is-today dt, .beliz-hours-runs .is-today dd { font-weight: 500; color: #fff; }
.beliz-hours-runs em { margin-left: 10px; padding: 3px 8px; border-radius: 99px; background: rgb(255 255 255 / 0.9); color: #1d1a17; font-size: 11px; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 2px; }

/* Visit: the details beside a generous map */
.beliz-visit-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.beliz-visit-copy { display: grid; gap: 22px; }
.beliz-visit-map { position: relative; display: block; aspect-ratio: 1 / 1; max-height: 78vh; width: 100%; overflow: hidden; border-radius: 30px; box-shadow: 0 50px 120px -50px rgb(0 0 0 / 0.8); border: 1px solid rgb(255 255 255 / 0.18); }
.beliz-visit-map img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--b-ease); }
.beliz-visit-map:hover img { transform: scale(1.04); }
.beliz-visit-pin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #1d1a17; box-shadow: 0 0 0 6px rgb(255 255 255 / 0.9); }
.beliz-visit-pin::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #1d1a17; animation: beliz-pin 2.2s ease-out infinite; }
.beliz-visit-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.beliz-visit-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.beliz-visit-list svg { width: 20px; height: 20px; }
.beliz-visit-list a { color: #fff; text-decoration: none; }
.beliz-visit-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.beliz-visit-address { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.6; color: rgb(255 255 255 / 0.85); }
.beliz-policy-panel { display: grid; gap: 4px; }
.beliz-policy-row { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.beliz-policy-row strong { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 400; }
.beliz-policy-row p { font-size: 14px; line-height: 1.6; color: var(--soft); }
.beliz-policy-panel .beliz-text-link { margin-top: 14px; color: #fff; }

.beliz-site.is-armed .beliz-scene .beliz-reveal { transition-delay: calc(var(--i, 0) * 0.08s); }
.beliz-home-stage { position: relative; display: grid; place-items: center; width: min(80vw, 720px); aspect-ratio: 1.7; }
.beliz-home-word { width: min(62vw, 420px); animation: beliz-float 2.4s ease-in-out infinite; }
.beliz-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid var(--b-line); border-radius: 50%; translate: -50% -50%; }
.beliz-orbit-a { width: 112%; aspect-ratio: 2.3; animation: beliz-turn 30s linear infinite; }
.beliz-orbit-b { width: 86%; aspect-ratio: 1.4; animation: beliz-turn 44s linear infinite reverse; }
.beliz-orbit::after { content: ""; position: absolute; top: -3.5px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* The line sits just under the wordmark (its half-height is 0.159 of its width) */
.beliz-home-lede { position: absolute; left: 50%; top: calc(50% + var(--mark-w) * 0.16 + 36px); translate: -50% 0; width: min(440px, calc(100% - 40px)); text-align: center; font-size: 15px; line-height: 1.6; color: var(--b-mute); }
.beliz-home-place { position: absolute; left: var(--b-gutter); bottom: 40px; display: grid; gap: 4px; font-size: 12.5px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; }
.beliz-home-powered { position: absolute; left: 50%; bottom: 44px; translate: -50% 0; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b-mute); text-decoration: none; transition: color 0.3s ease; }
.beliz-home-powered:hover { color: var(--b-fg); text-decoration: underline; text-underline-offset: 5px; }
.beliz-ring { position: absolute; right: var(--b-gutter); bottom: 24px; width: 122px; height: 122px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.beliz-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: beliz-turn 18s linear infinite; }
.beliz-ring text { fill: currentColor; font: 400 13px "Roboto", sans-serif; letter-spacing: 0.22em; }
.beliz-ring .beliz-monogram { width: 38px; transition: transform 0.6s var(--b-ease); }
.beliz-ring:hover .beliz-monogram { transform: scale(1.18) rotate(-8deg); }
.beliz-ring[disabled] { opacity: 0.4; cursor: not-allowed; }



/* Pages */
.beliz-page { width: min(1200px, 100%); margin: 0 auto; padding: clamp(24px, 5vh, 56px) var(--b-gutter) clamp(72px, 12vh, 140px); cursor: pointer; }
.beliz-page :is(form, input, textarea, label, .beliz-card, .beliz-map-card) { cursor: auto; }
.beliz-page :is(button, a, [role="tab"]) { cursor: pointer; }
.beliz-hero-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(24px, 5vw, 72px); align-items: end; padding-bottom: clamp(28px, 5vh, 48px); margin-bottom: clamp(36px, 6vh, 64px); border-bottom: 1px solid var(--b-line); }
.beliz-hero-band:not(:has(.beliz-hero-band-art)) { grid-template-columns: 1fr; }
.beliz-hero-band-copy { display: grid; gap: 20px; align-content: end; }
.beliz-hiring h1 { font-size: clamp(52px, 6.6vw, 104px); line-height: 0.95; letter-spacing: -0.05em; }
.beliz-hero-band h1 { font-size: clamp(60px, 10vw, 150px); line-height: 0.92; letter-spacing: -0.05em; }
.beliz-hero-band-copy > p { max-width: 460px; font-size: 16px; line-height: 1.65; color: var(--b-mute); }
.beliz-hero-band-art { height: clamp(220px, 32vw, 380px); overflow: hidden; border-radius: var(--b-radius); }
.beliz-hero-band-art img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.8s var(--b-ease); }
.beliz-site.is-in .beliz-hero-band-art img { transform: scale(1); }
.beliz-split { overflow: hidden; padding-bottom: 0.08em; }
.beliz-split .beliz-word { display: inline-block; white-space: nowrap; }
.beliz-split .beliz-word > span { display: inline-block; }
.beliz-site.is-armed:not(.is-in) .beliz-split .beliz-word > span { transform: translateY(110%); }
.beliz-site.is-armed .beliz-split .beliz-word > span { transition: transform 1s var(--b-ease); transition-delay: calc(var(--c, 0) * 0.035s + 0.05s); }

.beliz-info-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.beliz-block h2 { margin-bottom: 18px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.beliz-about { font-size: clamp(21px, 2.1vw, 29px); line-height: 1.55; letter-spacing: -0.01em; }
.beliz-hours { display: grid; margin: 0; padding: 0; list-style: none; }
.beliz-hours li { display: grid; grid-template-columns: auto auto minmax(16px, 1fr) auto; align-items: baseline; gap: 10px; padding: 10px 0; font-size: 15.5px; }
.beliz-hours li em { margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: var(--b-fg); color: var(--b-bg); font-style: normal; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 2px; }
.beliz-hours li strong { font-weight: 400; }
.beliz-hours li.is-closed { color: var(--b-mute); }
.beliz-hours-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; align-self: center; background: #22c55e; }
.beliz-hours-dot.is-closed, .beliz-hours li.is-closed .beliz-hours-dot { background: color-mix(in srgb, var(--b-fg) 35%, transparent); }
.beliz-hours li.is-today.is-open .beliz-hours-dot { animation: beliz-pulse 1.8s ease-out infinite; }
.beliz-dots { align-self: end; margin-bottom: 0.5em; height: 1px; background-image: linear-gradient(to right, currentColor 1px, transparent 1px); background-size: 6px 1px; background-repeat: repeat-x; opacity: 0.35; }
.beliz-team { margin-top: clamp(56px, 9vh, 96px); }
.beliz-team ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.beliz-team li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 18px; border-radius: var(--b-radius); border: 1px solid var(--b-line); }
.beliz-avatar { grid-row: 1 / 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--b-fg); color: var(--b-bg); font-size: 20px; font-weight: 400; }
.beliz-team strong { font-size: 17px; font-weight: 400; }
.beliz-team small { color: var(--b-mute); font-size: 13px; }
.beliz-team .beliz-text-link { grid-column: 1 / -1; margin-top: 10px; font-size: 13px; }
.beliz-policies { margin-top: clamp(56px, 9vh, 96px); }
.beliz-policies blockquote { margin: 18px 0 26px; padding-left: 20px; border-left: 2px solid var(--b-fg); max-width: 820px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.7; }
.beliz-policy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.beliz-policy-grid .beliz-card { display: grid; gap: 12px; align-content: start; }
.beliz-policy-grid h3 { font-size: 17px; font-weight: 400; }
.beliz-policy-grid p { font-size: 14.5px; line-height: 1.6; color: var(--b-mute); }
.beliz-connect { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(56px, 9vh, 96px); padding: clamp(22px, 3vw, 36px); border-radius: var(--b-radius); border: 1px solid var(--b-line); }
.beliz-qr { display: flex; align-items: center; gap: 20px; }
.beliz-qr-code { width: 168px; padding: 14px; border-radius: 14px; background: #fff; color: #111; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); }
.beliz-qr-code svg { color: #111; }
.beliz-qr-code svg { display: block; width: 100%; height: auto; }
.beliz-qr figcaption { display: grid; gap: 6px; max-width: 200px; }
.beliz-qr strong { font-size: 18px; font-weight: 400; }
.beliz-qr span { font-size: 13.5px; line-height: 1.5; color: var(--b-mute); }
.beliz-contact { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.beliz-contact li { display: flex; align-items: center; gap: 14px; font-size: 15px; }
.beliz-contact a { text-decoration: none; }
.beliz-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Services: a category rail and a menu of cards */
.beliz-menu { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.beliz-menu-rail { position: sticky; top: 88px; display: grid; gap: 16px; }
.beliz-search { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 48px; border-radius: 999px; border: 1px solid var(--b-line); transition: border-color 0.3s ease; }
.beliz-search:focus-within { border-color: var(--b-fg); }
.beliz-search svg { width: 18px; height: 18px; }
.beliz-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: inherit; font: 400 15px/1 "Roboto", sans-serif; }
.beliz-search input::placeholder { color: var(--b-mute); }
.beliz-tabs { display: grid; gap: 2px; }
.beliz-tabs button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border: 0; border-radius: 12px; background: none; color: var(--b-mute); font: 400 14px/1.3 "Roboto", sans-serif; text-align: left; transition: background 0.3s ease, color 0.3s ease; }
.beliz-tabs button em { flex: none; font-style: normal; font-size: 11px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--b-line); }
.beliz-tabs button:hover { color: var(--b-fg); background: var(--b-soft); }
.beliz-tabs button[aria-selected="true"] { color: var(--b-bg); background: var(--b-fg); }
.beliz-tabs button[aria-selected="true"] em { border-color: color-mix(in srgb, var(--b-bg) 40%, transparent); }
.beliz-rail-note { display: grid; gap: 10px; padding: 16px; border-radius: var(--b-radius); background: var(--b-soft); font-size: 13px; line-height: 1.55; color: var(--b-mute); }
.beliz-rail-note strong { color: var(--b-fg); font-weight: 500; }
.beliz-rail-note a { display: inline-flex; align-items: center; gap: 6px; color: var(--b-fg); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.beliz-rail-note svg { width: 15px; height: 15px; }
.beliz-menu-art { position: relative; height: 200px; overflow: hidden; border-radius: var(--b-radius); margin-bottom: 18px; }
.beliz-menu-art img { width: 100%; height: 100%; object-fit: cover; }
.beliz-menu-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0.5), transparent 70%); }
.beliz-menu-art figcaption { position: absolute; left: 24px; bottom: 20px; z-index: 1; display: grid; gap: 4px; color: #fff; }
.beliz-menu-art h2 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.02em; }
.beliz-menu-art span { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.beliz-menu-panel.is-entering .beliz-menu-art img { animation: beliz-zoom 1.4s var(--b-ease) both; }
.beliz-menu-panel.is-entering .beliz-service-grid li { animation: beliz-rise 0.7s var(--b-ease) both; animation-delay: calc(min(var(--n, 0), 12) * 0.035s); }
.beliz-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.beliz-service { width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 16px; padding: 18px 18px 16px; border-radius: 16px; border: 1px solid var(--b-line); background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s var(--b-ease); }
.beliz-service:hover:not(:disabled), .beliz-service:focus-visible { background: var(--b-soft); border-color: var(--b-fg); transform: translateY(-2px); }
.beliz-service-name { font-size: 16px; font-weight: 400; line-height: 1.35; }
.beliz-service-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.beliz-service-meta small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--b-mute); }
.beliz-service-meta small svg { width: 14px; height: 14px; }
.beliz-service-meta strong { font-size: 17px; font-weight: 500; }
.beliz-service-book { display: none; }
.beliz-service[disabled] { opacity: 0.5; cursor: not-allowed; }
.beliz-results-count { margin-bottom: 16px !important; font-size: 15px; color: var(--b-mute); }
.beliz-empty { color: var(--b-mute); }

/* Location: a map with the Beliz pin */
.beliz-map { position: relative; height: clamp(440px, 70vh, 640px); overflow: hidden; border-radius: calc(var(--b-radius) + 6px); border: 1px solid var(--b-line); background: var(--b-soft); }
.beliz-map-view { position: absolute; inset: 0; display: block; overflow: hidden; color: inherit; cursor: pointer; }
.beliz-map-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(1.04); transform: scale(1.08); transition: transform 2.4s var(--b-ease); }
.beliz-map-image.is-photo { filter: none; }
.beliz-site.is-in .beliz-map-image { transform: scale(1); }
.beliz-map-tint { position: absolute; inset: 0; background: var(--b-bg); mix-blend-mode: multiply; opacity: 0.35; pointer-events: none; }
.beliz-map-pin { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--b-fg); color: var(--b-bg); box-shadow: 0 16px 34px -12px rgb(0 0 0 / 0.5); }
.beliz-map-pin .beliz-monogram { width: 30px; }
.beliz-map-pin i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--b-fg); animation: beliz-pin 2.4s ease-out infinite; }
.beliz-map-pin i:nth-child(2) { animation-delay: 1.2s; }
.beliz-map-card { position: absolute; left: clamp(14px, 3vw, 32px); bottom: clamp(14px, 3vw, 32px); display: grid; gap: 14px; width: min(400px, calc(100% - 28px)); padding: clamp(20px, 2.6vw, 28px); border-radius: var(--b-radius); background: color-mix(in srgb, var(--b-bg) 90%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.45); }
.beliz-map-card address { display: grid; font-style: normal; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -0.02em; }
.beliz-today { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--b-mute); }
.beliz-map-links { display: flex; flex-wrap: wrap; gap: 8px; }
.beliz-map-links > * { flex: 1 1 auto; min-height: 46px; padding: 0 18px; font-size: 12px; }
.beliz-location-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.beliz-location-photo { overflow: hidden; border-radius: var(--b-radius); min-height: 360px; }
.beliz-location-photo img { width: 100%; height: 100%; object-fit: cover; }
.beliz-location-grid .beliz-card { display: grid; gap: 16px; align-content: start; }
.beliz-location-grid .beliz-solid { margin-top: 8px; }

/* Careers: a "We're hiring" hero, then the application */
.beliz-hiring { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-bottom: clamp(64px, 10vh, 120px); }
.beliz-hiring-art { height: clamp(420px, 72vh, 700px); overflow: hidden; border-radius: calc(var(--b-radius) + 6px); }
.beliz-hiring-art img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform 2.2s var(--b-ease); }
.beliz-site.is-in .beliz-hiring-art img { transform: scale(1); }
.beliz-hiring-copy { display: grid; gap: 18px; justify-items: start; }
.beliz-hiring-role { font-size: clamp(24px, 3vw, 40px); letter-spacing: 0.08em; text-transform: uppercase; }
.beliz-rule { display: block; width: 120px; height: 1px; background: var(--b-fg); transform-origin: left; }
.beliz-site.is-armed:not(.is-in) .beliz-rule { transform: scaleX(0); }
.beliz-hiring-list { display: grid; gap: 14px; margin: 6px 0 8px; padding: 0; list-style: none; }
.beliz-hiring-list li { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 1.45; }
.beliz-hiring-list a { text-underline-offset: 4px; }
.beliz-apply { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; scroll-margin-top: 90px; }
.beliz-careers-intro { position: sticky; top: 100px; display: grid; gap: 18px; }
.beliz-careers-intro h2 { font-size: clamp(38px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.045em; }
.beliz-careers-intro > p { font-size: 16px; line-height: 1.7; color: var(--b-mute); }
.beliz-careers-note a { color: var(--b-fg); text-underline-offset: 4px; }
.beliz-form { --text-entry-border: color-mix(in srgb, var(--b-fg) 18%, transparent); --text-entry-focus-surface: color-mix(in srgb, var(--b-bg) 40%, #fff); --text-entry-focus-accent: var(--b-fg); display: grid; gap: 22px; padding: clamp(24px, 3vw, 44px); border-radius: calc(var(--b-radius) + 8px); border: 1px solid var(--b-line); background: var(--b-soft); }
.beliz-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
.beliz-form label { display: grid; gap: 9px; }
.beliz-form label > span { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b-mute); transition: color 0.25s ease; }
.beliz-form label:focus-within > span { color: var(--b-fg); }
.beliz-form input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]), .beliz-form textarea { width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid var(--text-entry-border); border-radius: 14px; background: color-mix(in srgb, var(--b-bg) 70%, #fff); color: var(--b-fg); font: 400 16px/1.4 "Roboto", sans-serif; outline: 0; transition: background-color 0.25s ease, border-color 0.25s ease; }
.beliz-form textarea { min-height: 150px; padding: 16px; line-height: 1.6; resize: vertical; }
.beliz-form input::placeholder, .beliz-form textarea::placeholder { color: color-mix(in srgb, var(--b-fg) 45%, transparent); }
.beliz-form input[readonly]:not(.beliz-date-field) { color: var(--b-mute); background: transparent; }
.beliz-form small { font-size: 12px; color: var(--b-mute); }

/* Start date: a calendar in the site's own colours */
.beliz-date { position: relative; }
.beliz-form .beliz-date-field { cursor: pointer; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='1.5'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; }
.beliz-calendar { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(320px, 100%); padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--b-bg) 40%, #fff); color: var(--b-fg); border: 1px solid var(--b-line); box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.35); animation: beliz-rise 0.35s var(--b-ease) both; }
.beliz-calendar header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.beliz-calendar header strong { font-size: 15px; font-weight: 500; }
.beliz-calendar header button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.beliz-calendar header button:hover:not(:disabled) { background: color-mix(in srgb, var(--b-fg) 8%, transparent); }
.beliz-calendar header button:disabled { opacity: 0.25; cursor: default; }
.beliz-calendar-week, .beliz-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.beliz-calendar-week span { padding: 4px 0 8px; font-size: 11px; letter-spacing: 0.1em; color: var(--b-mute); }
.beliz-calendar-days button { aspect-ratio: 1; border: 0; border-radius: 50%; background: none; color: inherit; font: 400 14px "Roboto", sans-serif; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.beliz-calendar-days button:hover:not(:disabled) { background: color-mix(in srgb, var(--b-fg) 9%, transparent); }
.beliz-calendar-days button:disabled { opacity: 0.28; cursor: default; }
.beliz-calendar-days button.is-today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b-fg) 40%, transparent); }
.beliz-calendar-days button.is-chosen { background: var(--b-fg); color: var(--b-bg); }

/* Résumé */
.beliz-file input { width: 100%; padding: 12px; border: 1px dashed color-mix(in srgb, var(--b-fg) 30%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--b-bg) 70%, #fff); font: 400 14px "Roboto", sans-serif; color: var(--b-fg); cursor: pointer; }
.beliz-file input::file-selector-button { margin-right: 14px; padding: 9px 16px; border: 1px solid var(--b-fg); border-radius: 999px; background: transparent; color: var(--b-fg); font: 400 12px "Roboto", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.3s ease, color 0.3s ease; }
.beliz-file input::file-selector-button:hover { background: var(--b-fg); color: var(--b-bg); }

/* Consent: a custom box aligned with its sentence */
.beliz-form .beliz-consent { position: relative; display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 14px; cursor: pointer; }
.beliz-consent input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.beliz-consent i { position: relative; width: 22px; height: 22px; border: 1.5px solid color-mix(in srgb, var(--b-fg) 55%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--b-bg) 70%, #fff); transition: background 0.2s ease, border-color 0.2s ease; }
.beliz-consent i::after { content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 5px; height: 10px; border: solid var(--b-bg); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.2s var(--b-ease); }
.beliz-consent input:checked + i { background: var(--b-fg); border-color: var(--b-fg); }
.beliz-consent input:checked + i::after { transform: rotate(45deg) scale(1); }
.beliz-consent input:focus-visible + i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-fg) 22%, transparent); }
.beliz-form .beliz-consent > span { font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--b-fg); }
.beliz-form-foot { display: grid; gap: 12px; }
.beliz-form-foot .beliz-solid { width: 100%; }
.beliz-form-status { min-height: 1.4em; font-size: 14px; }
.beliz-form-status.is-success { color: #15803d; }
.beliz-form-status.is-error { color: #b91c1c; }

.beliz-foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 22px var(--b-gutter) 26px; border-top: 1px solid var(--b-line); background: var(--b-bg); font-size: 13px; color: var(--b-mute); }
.beliz-foot a { font-size: 12.5px; text-decoration: none; }
/* The platform's safety links, added after the footer, sit centred under it */
.beliz-site > .rl-safety-actions { position: relative; z-index: 2; justify-content: center; gap: 6px 22px; padding: 0 var(--b-gutter) calc(22px + env(safe-area-inset-bottom)); background: var(--b-bg); color: var(--b-mute); font-size: 12.5px; text-align: center; }
.beliz-foot a:hover { color: var(--b-fg); }

/* Entrance and reveals */
.beliz-site.is-armed:not(.is-in) .beliz-in { opacity: 0; transform: translateY(18px); }

/* First arrival on the home page, slow and in order: the salon photograph
   surfaces inside the letters as they settle, the two orbits drift in and
   open, then the words and the header follow. The frame the letter window
   is measured from never moves, so the letters land exactly in place. */
.beliz-intro-cover { position: absolute; inset: 0; background: var(--b-bg); opacity: 0; pointer-events: none; }
.beliz-site.is-armed:not(.is-in) .beliz-intro-cover { opacity: 1; }
.beliz-site.is-armed:not(.is-in) :is(.beliz-intro-cover, .beliz-veil, .beliz-orbit, .beliz-intro-screen .beliz-in) { transition: none; }
.beliz-site[data-beliz-current="home"].is-armed:not(.is-in) .beliz-nav { transition: none; }
.beliz-site.is-armed.is-in .beliz-intro-cover { transition: opacity 2.2s cubic-bezier(0.45, 0, 0.2, 1) 0.1s; }
.beliz-site.is-armed:not(.is-in) .beliz-veil { transform: scale(1.08); }
.beliz-site.is-armed .beliz-veil { transform-origin: 50% 50%; }
.beliz-site.is-armed.is-in .beliz-veil { transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1); }
.beliz-site.is-armed:not(.is-in) .beliz-orbit { opacity: 0; scale: 0.72; }
.beliz-site.is-armed.is-in .beliz-orbit { transition: opacity 1.8s ease 0.9s, scale 2.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s; }
.beliz-site.is-armed.is-in .beliz-orbit-b { transition-delay: 1.15s, 1.05s; }
.beliz-site[data-beliz-current="home"].is-armed:not(.is-in) .beliz-nav { opacity: 0; translate: 0 -14px; }
.beliz-site[data-beliz-current="home"].is-armed.is-in .beliz-nav { transition: opacity 1.4s ease 1.6s, translate 1.6s cubic-bezier(0.16, 1, 0.3, 1) 1.6s, background-color 0.4s ease, box-shadow 0.4s ease; }
.beliz-site.is-armed .beliz-in, .beliz-site.is-armed .beliz-rule { transition: opacity 1s ease, transform 1.1s var(--b-ease); transition-delay: calc(var(--d, 0) * 0.08s + 0.05s); }
.beliz-site.is-armed.is-in .beliz-intro-screen .beliz-in { transition: opacity 1.6s ease, transform 1.8s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(1.2s + var(--d, 0) * 0.14s); }
.beliz-site.is-armed .beliz-reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1.2s var(--b-ease); }
.beliz-site.is-armed .beliz-reveal.is-shown { opacity: 1; transform: none; }
.beliz-site.is-static .beliz-veil { display: none; }
.beliz-site.is-static .beliz-intro { height: auto; }
.beliz-site.is-static .beliz-intro-screen { position: relative; color: #fff; }
.beliz-site.is-static .beliz-intro-mark { background: #fff; -webkit-mask: url("/assets/custom-sites/beliz/wordmark.svg?v=4") center / contain no-repeat; mask: url("/assets/custom-sites/beliz/wordmark.svg?v=4") center / contain no-repeat; }
.beliz-site.is-static .beliz-home-lede, .beliz-site.is-static .beliz-home-powered { color: rgb(255 255 255 / 0.85); }

/* Inside Pro Home the site is a framed preview */
.beliz-site.is-preview { min-height: 0; }

@keyframes beliz-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes beliz-turn { to { rotate: 360deg; } }
@keyframes beliz-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes beliz-zoom { from { transform: scale(1.12); } to { transform: none; } }
@keyframes beliz-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, #22c55e 50%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes beliz-pin { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes beliz-sheet { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .beliz-site *, .beliz-site *::before, .beliz-site *::after { animation: none !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 960px) {
  /* Phones and tablets: the header is fixed, not sticky. A fixed header is
     held in place by the browser's compositor, so it never jitters while
     the page scrolls or the address bar slides; a spacer keeps content
     from starting under it. */
  .beliz-site { --nav-h: 76px; }
  .beliz-site:not(.is-preview) .beliz-nav { position: fixed; top: 0; left: 0; right: 0; }
  .beliz-site:not(.is-preview) .beliz-main { padding-top: var(--nav-h); }
  /* The fixed header is solid here: a page's big heading slides under it
     and is hidden, instead of showing through it as it scrolls. The home
     page stays clear at its top, over the salon photograph. */
  .beliz-site:not(.is-preview) .beliz-nav { background-color: var(--b-bg); }
  .beliz-nav { grid-template-columns: 1fr auto; }
  .beliz-nav nav { display: none; }
  .beliz-book { justify-self: end; }
  .beliz-menu-toggle { display: grid; gap: 6px; align-content: center; width: 42px; height: 42px; padding: 0 10px; border: 0; background: none; color: inherit; cursor: pointer; }
  .beliz-menu-toggle span:not(.sr-only) { display: block; height: 1px; background: currentColor; transition: transform 0.5s var(--b-ease); }
  .beliz-site.is-menu-open .beliz-menu-toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
  .beliz-site.is-menu-open .beliz-menu-toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
  /* The menu unfolds from the header and folds back up when closed */
  .beliz-sheet { position: fixed; inset: var(--nav-h) 0 auto; z-index: 29; display: grid; padding: 12px var(--b-gutter) 28px; background: color-mix(in srgb, var(--b-bg) 97%, transparent); box-shadow: 0 30px 60px -40px rgb(0 0 0 / 0.35); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.55s; }
  .beliz-site.is-menu-open .beliz-sheet { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
  .beliz-site.is-preview .beliz-sheet { position: absolute; }
  .beliz-sheet nav { display: grid; }
  .beliz-sheet a, .beliz-sheet-book { --n: 0; display: block; padding: 15px 0; border: 0; border-bottom: 1px solid var(--b-line); background: none; color: inherit; font: 300 15px/1.2 "Roboto", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; text-align: left; text-decoration: none; opacity: 0; transform: translateY(-8px); transition: opacity 0.3s ease, transform 0.4s var(--b-ease); }
  .beliz-site.is-menu-open .beliz-sheet a, .beliz-site.is-menu-open .beliz-sheet-book { opacity: 1; transform: none; transition: opacity 0.5s ease calc(0.08s + var(--n) * 0.045s), transform 0.6s var(--b-ease) calc(0.08s + var(--n) * 0.045s); }
  .beliz-sheet nav > :nth-child(2) { --n: 1; } .beliz-sheet nav > :nth-child(3) { --n: 2; } .beliz-sheet nav > :nth-child(4) { --n: 3; } .beliz-sheet nav > :nth-child(5) { --n: 4; } .beliz-sheet nav > :nth-child(6) { --n: 5; } .beliz-sheet nav > :nth-child(7) { --n: 6; }
  .beliz-sheet a[aria-current="page"] { font-weight: 500; }
  .beliz-sheet-book { margin-top: 18px; padding: 15px 0; border: 1px solid var(--b-fg); border-radius: 999px; background: var(--b-fg); color: var(--b-bg); text-align: center; cursor: pointer; }
  .beliz-sheet-book[disabled] { opacity: 0.4; cursor: not-allowed; }
  .beliz-nav .beliz-book { display: none; }
  .beliz-hero-band, .beliz-info-grid, .beliz-menu, .beliz-location-grid, .beliz-hiring, .beliz-apply { grid-template-columns: 1fr; }
  .beliz-menu-rail { position: static; }
  .beliz-tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .beliz-careers-intro { position: static; }
  .beliz-connect { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Phones: just the wordmark, centred, and "Powered by Refinelook" below */
  .beliz-journey { --mark-w: 76vw; margin-top: -64px; }
  .beliz-journey .beliz-home-stage { width: min(calc(var(--mark-w) * 1.18), 100%); }
  .beliz-intro-screen { justify-items: center; }
  .beliz-home-lede, .beliz-home-place { display: none; }
  .beliz-home-powered { bottom: calc(32px + env(safe-area-inset-bottom)); }
  .beliz-home-cue { display: none; }
  .beliz-scene { align-content: end; min-height: 100svh; padding: 120px 16px 56px; gap: 24px; }
  .beliz-scene.is-menu, .beliz-scene.is-hours, .beliz-scene.is-visit, .beliz-scene.is-policies { align-content: start; }
  .beliz-scene-title { font-size: clamp(36px, 10.5vw, 48px); }
  .beliz-scene-title.is-huge { font-size: clamp(44px, 13vw, 60px); }
  .beliz-scene-text { font-size: 15.5px; }
  .beliz-scene-actions { gap: 16px 22px; }
  .beliz-scene-actions .beliz-solid { width: 100%; }
  /* Phones: the closing call and the footer line up on one centre */
  .beliz-scene-copy.is-center { width: 100%; padding: 40px 0; }
  .beliz-scene-copy.is-center .beliz-scene-actions { flex-direction: column; align-items: center; width: 100%; }
  .beliz-scene-pages { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 0 18px; width: 100%; }
  .beliz-scene-pages a { font-size: 11.5px; letter-spacing: 0.14em; }
  .beliz-foot { flex-direction: column; justify-content: center; gap: 12px; padding: 26px var(--b-gutter) calc(28px + env(safe-area-inset-bottom)); text-align: center; }
  .beliz-panel { padding: 20px 18px; border-radius: 20px; }
  .beliz-menu-group { grid-template-columns: 1fr; gap: 14px; }
  .beliz-menu-group h3 { position: static; font-size: 28px; }
  .beliz-menu-row { padding: 15px 2px; }
  .beliz-menu-name { font-size: 15.5px; }
  .beliz-hours-runs dt, .beliz-hours-runs dd { font-size: 16px; }
  .beliz-visit-layout { grid-template-columns: 1fr; }
  .beliz-visit-map { aspect-ratio: 4 / 5; border-radius: 24px; }
  .beliz-shade { background: linear-gradient(180deg, rgb(18 15 12 / 0.35) 0%, rgb(18 15 12 / 0.55) 45%, rgb(18 15 12 / 0.9) 100%); }
  .beliz-site { --nav-h: 64px; }
  .beliz-nav { height: 64px; gap: 8px; }
  .beliz-book { padding: 0 14px; }
  .beliz-form-grid, .beliz-service-grid { grid-template-columns: 1fr; }
  .beliz-actions > * { width: 100%; }
  /* Phones: the map stands clear with its pin in view, and the address card
     rises from under it like a sheet instead of covering it. */
  .beliz-map { height: auto; overflow: visible; border: 0; border-radius: 0; background: none; }
  .beliz-map-view { position: relative; inset: auto; height: min(62vw, 300px); min-height: 240px; border: 1px solid var(--b-line); border-radius: 26px; background: var(--b-soft); -webkit-tap-highlight-color: transparent; }
  .beliz-map-view:active .beliz-map-image { transform: scale(1.02); transition-duration: 0.3s; }
  .beliz-map-pin { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .beliz-map-pin .beliz-monogram { width: 26px; }
  .beliz-map-card { position: relative; left: auto; bottom: auto; z-index: 1; width: auto; gap: 12px; margin: -28px 10px 0; padding: 20px 18px 18px; border: 1px solid var(--b-line); border-radius: 22px; background: var(--b-bg); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 18px 40px -26px rgb(0 0 0 / 0.4); }
  .beliz-map-card address { font-size: 19px; line-height: 1.25; }
  .beliz-map-card .beliz-today { font-size: 14px; }
  .beliz-map-links { flex-wrap: nowrap; }
  .beliz-map-links > * { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 10px; font-size: 11px; letter-spacing: 0.12em; }
  .beliz-location-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .beliz-qr { flex-direction: column; align-items: flex-start; }
}
/* The opening never lets its lines run into one another: the tagline shows
   only on wide, tall screens; the place leaves before it could meet
   "Powered by Refinelook"; on short screens the scroll cue goes before it
   could touch the wordmark. */
@media (max-width: 960px), (max-height: 720px) {
  .beliz-home-lede { display: none; }
}
@media (max-width: 760px) {
  .beliz-home-place { display: none; }
}
@media (max-height: 560px) {
  .beliz-home-cue { display: none; }
}
@media (max-height: 360px) {
  .beliz-home-powered { display: none; }
}

/* Kosa inside Pro Home: a framed preview, not a full-page takeover. */
.kosa-site.is-preview .kosa-curtain, .kosa-site.is-preview .kosa-progress { display: none; }
.kosa-site.is-preview .kosa-nav { position: sticky; top: 12px; left: auto; translate: none; width: auto; margin: 12px 12px 0; }
.kosa-site.is-preview .kosa-hero { padding-top: 48px; min-height: 0; }
.kosa-site.is-preview .kosa-gallery-sticky { top: 0 !important; }

/* "Report this salon": a quiet platform link beside "Powered by Refinelook". */
.kosa-foot-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 22px; }
.kosa-foot-report, .beliz-foot-report { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.kosa-foot-report svg, .beliz-foot-report svg { width: 14px; height: 14px; flex: none; }
.kosa-foot-report { color: rgb(244 243 239 / 0.6); font-size: 13px; }
.kosa-foot-report:hover { color: #f4f3ef; text-decoration-color: currentColor; }
.beliz-foot-links { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 22px; }
.beliz-foot-report { color: var(--b-mute); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.beliz-foot-report:hover { color: var(--b-fg); text-decoration-color: currentColor; }
.kosa-foot-report:focus-visible, .beliz-foot-report:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
@media (max-width: 760px) { .kosa-foot-links { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .kosa-foot-report, .beliz-foot-report { transition: none; } }