@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fecf4861d5202405.ttf) format('truetype');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/a99e3db500762027.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/a13d9b41b0a471ce.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/f433e5d333be1128.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/6bad1a774228464c.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/b9584e099e0e7f1e.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/329949c551e04130.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/9c0842c2df23beb4.ttf) format('truetype');
}

@font-face {
  font-family: Metropolis;
  src: url('/assets/e920e6b0e7987ace.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Metropolis;
  src: url('/assets/f3a738735a2c006f.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Metropolis;
  src: url('/assets/695870d15689c04f.woff2') format('woff2');
  font-weight: 600 900;
  font-display: swap;
}
:root {
  --ink: #14120f;
  --paper: #f7f5f1;
  --white: #fff;
  --line: #e1dcd4;
  --muted: #716c65;
  --accent: #7e5e3e;
  --pale: #ebe3d8;
  --success: #3b6253;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: Metropolis, Manrope, Arial, sans-serif;
  --mono: 'Roboto Mono', monospace;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  color: inherit;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
button,
a {
  touch-action: manipulation;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  border: 0;
  background: none;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.018em;
}
h1 {
  font-size: clamp(38px, 4.5vw, 64px);
}
h2 {
  font-size: clamp(32px, 3.5vw, 50px);
}
h3 {
  font-size: 32px;
}
p + p {
  margin-top: 14px;
}
small,
.small {
  font-size: 13px;
}
.muted {
  color: var(--muted);
}
.mono {
  font-family: var(--mono);
}
.eyebrow {
  font: 12px/1.5 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.accent {
  color: var(--accent);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.logo {
  width: 184px;
  height: auto;
  display: block;
}
.logo.light {
  filter: brightness(0) invert(1);
}
.icon {
  display: inline-block;
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 13px 23px;
  background: var(--ink);
  color: white;
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 600;
  transition:
    background 0.2s,
    transform 0.2s;
}
.btn:hover {
  background: #3c3125;
  transform: translateY(-1px);
}
.btn.light {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn.outline {
  color: inherit;
  border-color: currentColor;
  background: transparent;
}
.btn.outline:hover {
  background: #7e5e3e16;
}
.btn.soft {
  background: var(--pale);
  color: var(--ink);
  border-color: var(--pale);
}
.btn.text {
  background: transparent;
  color: inherit;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.btn.sm {
  padding: 7px 13px;
  min-height: 40px;
}
.btn.full {
  width: 100%;
}
.btn.bronze {
  background: var(--accent);
  border-color: var(--accent);
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  flex-shrink: 0;
}
.icon-btn:hover {
  background: var(--pale);
}
.flex {
  display: flex;
  align-items: center;
  gap: 14px;
}
.between {
  justify-content: space-between;
}
.wrap {
  flex-wrap: wrap;
}
.stack {
  display: grid;
  gap: 20px;
}
.stack.sm {
  gap: 10px;
}
.grid {
  display: grid;
  gap: 24px;
}
.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.col-span {
  grid-column: 1/-1;
}
.mt {
  margin-top: 28px;
}
.mt-sm {
  margin-top: 14px;
}
.mb {
  margin-bottom: 24px;
}
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 24px 0;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.3;
  padding: 6px 9px;
  border: 1px solid var(--line);
  white-space: normal;
}
.pill.bronze {
  background: var(--pale);
  color: var(--accent);
  border-color: transparent;
}
.pill.success {
  background: #e8eee9;
  color: var(--success);
  border-color: transparent;
}
.check-list {
  padding: 0;
  margin: 20px 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.check-list li {
  display: flex;
  gap: 10px;
  font-size: 14px;
}
.check-list li:before {
  content: '✓';
  color: var(--accent);
}
.card {
  background: var(--white);
  padding: 25px;
  border: 1px solid var(--line);
}
.card.soft {
  background: #f0ece5;
  border-color: transparent;
}
.card.dark {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.card.dark .muted {
  color: #b6ada1;
}
.card.dark .pill {
  border-color: #645748;
}
.notice {
  padding: 14px 17px;
  border-left: 2px solid var(--accent);
  background: #ede6dc;
  font-size: 14px;
  color: #544433;
  line-height: 1.6;
}
.notice.success {
  border-color: var(--success);
  background: #e9f0eb;
  color: var(--success);
}
.notice.warn {
  background: #f8eee4;
  border-color: #a65c28;
  color: #71472d;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.row:last-child {
  border-bottom: 0;
}
.row .meta {
  font-size: 13px;
  color: var(--muted);
}
.row-action {
  width: 100%;
  text-align: left;
}
.row-action:hover {
  color: var(--accent);
}
.price {
  font-family: var(--mono);
  font-weight: 400;
  white-space: nowrap;
}
.price.big {
  font-size: 26px;
}
.row.total {
  font-size: 20px;
  font-weight: 600;
  border-top: 1px solid var(--ink);
  margin-top: 9px;
}
.field {
  display: grid;
  gap: 8px;
  font-size: 14px;
  min-width: 0;
}
.field label {
  font-weight: 600;
}
.field input,
.field select,
.field textarea,
.input {
  width: 100%;
  padding: 13px 15px;
  min-height: 48px;
  background: white;
  border: 1px solid #cfc8bd;
  color: var(--ink);
  border-radius: 0;
  outline: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px #7e5e3e20;
}
.field textarea {
  resize: vertical;
  min-height: 90px;
}
.checkbox-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  cursor: pointer;
}
.checkbox-row input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.chip {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  font-size: 14px;
  background: transparent;
}
.chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}
.chip:hover {
  border-color: var(--accent);
}
.avatar {
  height: 54px;
  width: 54px;
  display: grid;
  place-items: center;
  background: var(--pale);
  border: 1px solid var(--line);
  border-radius: 50%;
  font: 19px var(--serif);
  color: var(--accent);
  flex-shrink: 0;
}
.avatar.big {
  width: 88px;
  height: 88px;
  font-size: 34px;
}
.stylist-booking-avatar { overflow: hidden; padding: 0; }
.stylist-booking-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.progress {
  height: 3px;
  background: var(--line);
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.35s;
}
.empty {
  padding: 45px 20px;
  text-align: center;
  border: 1px dashed var(--line);
}
.empty .icon {
  height: 35px;
  width: 35px;
  margin-bottom: 18px;
}
.empty p {
  margin: 15px auto 22px;
  max-width: 420px;
  color: var(--muted);
}
/* Website */
.web {
  background: var(--paper);
}
.webnav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 110px;
  padding: 0 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--paper);
  z-index: 5;
}
.webnav nav {
  display: flex;
  gap: 32px;
  align-items: center;
  font-size: 14px;
}
.webnav .logo {
  width: 185px;
}
.hero {
  height: 100svh;
  min-height: 690px;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: -3%;
  background: url('/assets/e4816d666d1ad58b.webp') center/cover;
  z-index: -2;
  animation: ink-drift 20s ease-in-out infinite alternate;
  filter: url(#water);
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #14120f66 0, transparent 55%),
    linear-gradient(0deg, #14120f 0, transparent 25%);
  z-index: -1;
}
.hero canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
.hero-copy {
  position: absolute;
  left: 9vw;
  bottom: 22%;
  width: 65%;
  max-width: 800px;
  z-index: 1;
}
.hero h1 {
  font-size: clamp(65px, 8vw, 126px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 25px 0 28px;
}
.hero h1 em {
  font-weight: 400;
  color: #cfb595;
}
.hero-copy p {
  max-width: 400px;
  color: #c9c2b7;
  font-size: 15px;
}
.hero-copy .btn {
  margin-top: 32px;
}
.hero-footer {
  position: absolute;
  bottom: 52px;
  left: 9vw;
  right: 5vw;
  display: flex;
  align-items: end;
  justify-content: space-between;
  font: 12px var(--mono);
  color: #d2c8ba;
  gap: 22px;
}
.vertical-note {
  position: absolute;
  right: 45px;
  top: 45%;
  writing-mode: vertical-rl;
  font: 11px var(--mono);
  letter-spacing: 0.2em;
}
.web-section {
  padding: 110px 8vw;
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 42px;
}
.section-heading h2 {
  font-size: clamp(45px, 5vw, 76px);
  margin-top: 16px;
}
.section-heading p {
  max-width: 375px;
  color: var(--muted);
  font-size: 15px;
}
.studio-intro {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 12%;
  align-items: center;
}
.studio-intro h2 {
  font-size: clamp(46px, 5vw, 76px);
  margin: 18px 0 28px;
}
.studio-intro p {
  color: var(--muted);
  max-width: 480px;
}
.service-table .row {
  padding: 23px 0;
  align-items: center;
}
.service-table h3 {
  font-size: 32px;
}
.service-table .price {
  font-size: 23px;
}
.service-table p {
  font-size: 13px;
}
.web .hair-photo {
  aspect-ratio: 0.79;
}
.hair-photo {
  background-image: none;
  background-size: 200% 200%;
  aspect-ratio: 1/1;
  position: relative;
  overflow: hidden;
}
.hair-photo.p0 {
  background-position: 0 0;
}
.hair-photo.p1 {
  background-position: 100% 0;
}
.hair-photo.p2 {
  background-position: 0 100%;
}
.hair-photo.p3 {
  background-position: 100% 100%;
}
.hair-tile {
  cursor: pointer;
  position: relative;
  text-align: left;
  width: 100%;
  padding: 0;
}
.hair-tile .hair-photo {
  transition: filter 0.3s;
}
.hair-tile:hover .hair-photo {
  filter: brightness(1.08);
}
.hair-tile h3 {
  font-size: 29px;
  margin: 18px 0 4px;
}
.hair-tile p {
  font-size: 13px;
  color: var(--muted);
}
.hair-tile .circle-arrow {
  position: absolute;
  bottom: 20px;
  right: 18px;
}
.circle-arrow {
  width: 44px;
  height: 44px;
  border: 1px solid #ffffff77;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
}
.collection {
  background: #ebe7df;
}
.product-art {
  background-image: url('/assets/1069cb7ebfa92592.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  aspect-ratio: 1.22;
  position: relative;
}
.product-art.jar {
  background-size: 225% auto;
  background-position: 25% 63%;
}
.product-art.spray {
  background-size: 150% auto;
  background-position: 93% 50%;
}
.product-art.care {
  background-size: 160% auto;
  background-position: 85% 20%;
  filter: sepia(0.1);
}
.product-art.paste {
  background-size: 210% auto;
  background-position: 20% 65%;
}
.product-tile {
  width: 100%;
  display: block;
  text-align: left;
  padding: 0;
}
.product-tile .product-art {
  transition: filter 0.3s;
}
.product-tile:hover .product-art {
  filter: brightness(1.08);
}
.product-art .pill {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #f7f5f1dd;
  border: 0;
  font-family: var(--mono);
}
.product-label {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 0;
}
.product-label h3 {
  font: 18px/1.3 var(--sans);
  letter-spacing: 0;
}
.product-label p {
  font: 12px var(--mono);
  color: var(--muted);
  margin-top: 7px;
}
.atelier-web {
  background: var(--ink);
  color: var(--paper);
}
.atelier-web .section-heading p {
  color: #b9afa2;
}
.plan-card {
  padding: 25px;
  background: #faf8f4;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}
.plan-card.dark {
  background: #1c1915;
  border-color: #4a4033;
  color: #f8f3ea;
}
.plan-card.featured {
  border-color: var(--accent);
  background: #eee5d8;
}
.plan-card .num {
  font: 54px var(--serif);
  color: #a38b6c;
  margin-bottom: 12px;
}
.plan-card h3 {
  font-size: 39px;
  margin: 6px 0 18px;
}
.plan-card .price {
  font-size: 23px;
}
.plan-card .check-list {
  flex: 1;
}
.plan-card .btn {
  margin-top: 15px;
}
.atelier-web .plan-card {
  background: #201d18;
  border-color: #4a4033;
  color: #f8f3ea;
}
.atelier-web .plan-card .muted {
  color: #c5b8a6;
}
.atelier-web .plan-card.featured {
  background: #d8c5a9;
  color: var(--ink);
  border-color: #d8c5a9;
}
.atelier-web .plan-card.featured .muted {
  color: #5b4d3b;
}
.academy-block {
  border-bottom: 1px solid var(--line);
}
.academy-block h2 {
  font-size: 65px;
}
.footer {
  padding: 60px 8vw 110px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 40px;
}
.footer .logo {
  width: 240px;
  margin-bottom: 25px;
}
.footer p {
  font-size: 13px;
  color: var(--muted);
}
.footer .links {
  display: flex;
  gap: 40px;
  font-size: 14px;
}
.footer strong {
  font-weight: 500;
}
.image-caption {
  font: 12px var(--mono);
  color: var(--muted);
  margin-top: 12px;
}
/* App shell */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 225px minmax(0, 1fr);
}
.sidebar {
  padding: 35px 25px;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--line);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 45px;
}
.sidebar .logo {
  width: 172px;
}
.sidebar nav {
  display: grid;
  gap: 6px;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 14px;
  margin: 0 -5px;
  font-size: 14px;
  min-height: 48px;
  text-align: left;
}
.side-link.active {
  background: #eee8df;
  color: var(--accent);
}
.side-link:hover {
  background: #f4f1ec;
}
.side-foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  font-size: 12px;
  color: var(--muted);
}
.app-main {
  min-width: 0;
  padding: 0 5vw 105px;
}
.app-top {
  height: 95px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  gap: 15px;
}
.app-top .breadcrumb {
  font: 12px var(--mono);
  letter-spacing: 0.08em;
}
.app-top .avatar {
  width: 35px;
  height: 35px;
  font-size: 14px;
}
.app-top .logo {
  width: 145px;
  display: none;
}
.page {
  max-width: 1120px;
  margin: 40px auto 0;
  animation: page-in 0.35s ease;
}
.page.narrow {
  max-width: 660px;
}
.page-head {
  margin-bottom: 32px;
}
.page-head .eyebrow {
  color: var(--accent);
  margin-bottom: 10px;
}
.page-head p {
  color: var(--muted);
  max-width: 660px;
  margin-top: 12px;
  font-size: 15px;
}
.page-head .back {
  margin-bottom: 20px;
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 0;
}
.mobile-nav {
  display: none;
}
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(250px, 1fr);
  gap: 30px;
  align-items: start;
}
.sticky {
  position: sticky;
  top: 25px;
}
.mini-hero {
  position: relative;
  min-height: 240px;
  background: var(--ink) url('/assets/e4816d666d1ad58b.webp') center/cover;
  color: var(--paper);
  padding: 30px;
  overflow: hidden;
}
.mini-hero h2 {
  font-size: 46px;
  max-width: 360px;
  margin-top: 18px;
}
.mini-hero .btn {
  margin-top: 25px;
}
.mini-hero .eyebrow {
  color: #c5af91;
}
.greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 35px;
}
.greeting h1 {
  font-size: 53px;
}
.quick-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  margin-top: 22px;
}
.quick-row button {
  padding: 24px 12px;
  border-right: 1px solid var(--line);
  display: grid;
  place-items: center;
  gap: 10px;
  font-size: 13px;
}
.quick-row button:last-child {
  border-right: 0;
}
.quick-row button:hover {
  background: var(--pale);
}
.section-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 32px 0 20px;
  gap: 20px;
}
.section-top h2 {
  font-size: 32px;
}
.appointment {
  padding: 25px;
  border: 1px solid var(--line);
  background: #fff;
}
.appointment .time-large {
  font: 44px var(--serif);
}
.appointment .date {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
}
.appointment .day {
  font: 50px var(--serif);
  border-right: 1px solid var(--line);
  padding-right: 23px;
}
.select-card {
  padding: 19px;
  border: 1px solid var(--line);
  text-align: left;
  width: 100%;
  display: block;
  background: #fff;
  position: relative;
  cursor: pointer;
}
.select-card.selected {
  border: 1px solid var(--accent);
  background: #f4eee5;
  box-shadow: inset 0 0 0 1px var(--accent);
}
.select-card .check {
  height: 20px;
  width: 20px;
  border: 1px solid #b5aa99;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}
.select-card.selected .check {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}
.select-card strong {
  font-size: 15px;
}
.select-card p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 5px;
}
.tier-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.tier-select .select-card .price {
  display: block;
  font-size: 24px;
  margin: 16px 0 5px;
}
.service-list {
  display: grid;
  gap: 10px;
}
.service-list .select-card {
  display: flex;
  align-items: center;
  gap: 15px;
}
.service-list .select-card .service-info {
  flex: 1;
}
.service-list .price {
  font-size: 14px;
}
.steps {
  display: flex;
  gap: 6px;
  margin-bottom: 30px;
}
.steps span {
  flex: 1;
  padding: 10px 3px;
  border-bottom: 2px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.steps span.active {
  color: var(--ink);
  border-color: var(--ink);
}
.booking-summary h3 {
  font-size: 29px;
}
.booking-summary .row {
  font-size: 14px;
}
.booking-summary .row.total {
  font-size: 18px;
}
.booking-summary .btn {
  margin-top: 22px;
}
.disclosure {
  border: 1px solid var(--line);
  background: #fff;
}
.disclosure summary {
  padding: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.disclosure > div {
  padding: 0 20px 20px;
}
.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.calendar-grid .dow {
  font: 12px var(--mono);
  text-align: center;
  color: var(--muted);
  padding-bottom: 8px;
}
.day-btn {
  position: relative;
  min-height: 51px;
  border: 1px solid transparent;
  text-align: center;
  font-family: var(--mono);
  font-size: 14px;
}
.day-btn small {
  display: block;
  font-size: 11px;
  line-height: 1;
}
.day-btn:hover {
  border-color: var(--accent);
}
.day-btn.selected {
  background: var(--ink);
  color: white;
}
.day-btn.vip-locked {
  color: #b4a896;
  background: #eee9e1;
}
.day-btn.past {
  color: #c4bfb8;
  pointer-events: none;
}
.day-btn.today {
  border-bottom-color: var(--accent);
}
.calendar-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  margin-top: 15px;
}
.slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}
.slot {
  border: 1px solid var(--line);
  padding: 12px 5px;
  min-height: 49px;
  font: 14px var(--mono);
}
.slot.selected {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.slot.unavailable {
  text-decoration: line-through;
  opacity: 0.32;
  cursor: not-allowed;
}
.slot.reserved {
  background: #eee7dd;
  color: var(--accent);
}
.timeline {
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 0;
  margin: 25px 0;
}
.timeline li {
  position: relative;
  display: flex;
  gap: 18px;
  padding: 0 0 30px;
}
.timeline li:before {
  content: '';
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.timeline li:last-child:before {
  display: none;
}
.timeline .dot {
  width: 27px;
  height: 27px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 12px var(--mono);
  flex-shrink: 0;
  z-index: 1;
  background: var(--paper);
}
.timeline li.done .dot {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.timeline li.current .dot {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px #7e5e3e15;
}
.timeline p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.success-symbol {
  width: 72px;
  height: 72px;
  background: #e7eee9;
  color: var(--success);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 32px;
  margin-bottom: 22px;
}
.success-center {
  text-align: center;
}
.success-center .success-symbol {
  margin: 0 auto 22px;
}
.success-center p {
  max-width: 480px;
  margin: 16px auto;
}
.receipt-number {
  padding: 22px;
  border: 1px dashed var(--accent);
  background: #f4eee5;
  font: 32px var(--mono);
  letter-spacing: 0.1em;
  text-align: center;
}
.stars {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.stars button {
  font-size: 36px;
  padding: 0;
  color: #cfc4b5;
}
.stars button.on {
  color: var(--accent);
}
.passport-card {
  background: #eae1d3;
  border: 1px solid #bda98a;
  padding: 25px;
  position: relative;
}
.passport-card h3 {
  font-size: 35px;
  margin: 14px 0;
}
.passport-data {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.passport-data label {
  display: block;
  font: 11px var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.cart-item {
  display: flex;
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.cart-item .product-art {
  width: 100px;
  height: 115px;
  flex-shrink: 0;
  aspect-ratio: auto;
}
.cart-item .info {
  flex: 1;
}
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  height: 36px;
  gap: 12px;
}
.qty button {
  height: 34px;
  width: 30px;
  font-size: 18px;
}
.qty span {
  font: 13px var(--mono);
}
.cart-item h3 {
  font: 16px var(--sans);
  line-height: 1.4;
}
.me-card {
  background: var(--ink);
  color: white;
  padding: 30px;
  position: relative;
  overflow: hidden;
}
.me-card:after {
  content: 'G';
  font: 240px var(--serif);
  position: absolute;
  right: 10px;
  bottom: -100px;
  opacity: 0.045;
  pointer-events: none;
}
.me-card .muted {
  color: #b4a797;
}
.me-card h2 {
  font-size: 44px;
  margin: 17px 0;
}
.menu-list {
  background: white;
  border: 1px solid var(--line);
  padding: 0 22px;
}
.menu-list .row {
  padding: 19px 0;
  font-size: 14px;
}
.stat {
  border: 1px solid var(--line);
  padding: 20px;
}
.stat .value {
  font: 36px var(--serif);
  margin: 12px 0 3px;
}
.stat .label {
  font-size: 13px;
  color: var(--muted);
}
.wallet-card {
  background: linear-gradient(135deg, #d3c0a6, #f0e5d5);
  padding: 34px;
  color: #282017;
  border: 1px solid #bda98a;
}
.wallet-card .amount {
  font: 45px var(--serif);
  margin: 22px 0;
}
.wallet-card .eyebrow {
  color: #6d5438;
}
.settings-list {
  display: grid;
  gap: 26px;
}
.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  font-size: 14px;
}
.toggle input {
  width: 40px;
  height: 22px;
  accent-color: var(--accent);
}
.coach-target {
  position: relative;
  z-index: 46;
  outline: 3px solid #bf9563;
  outline-offset: 6px;
}
.coach-shade {
  position: fixed;
  inset: 0;
  background: #14120fab;
  z-index: 45;
}
.coach-box {
  position: fixed;
  z-index: 47;
  background: var(--paper);
  color: var(--ink);
  padding: 25px;
  width: min(360px, calc(100vw - 32px));
  box-shadow: 0 15px 60px #0005;
}
.coach-box h3 {
  font-size: 29px;
  margin: 9px 0 13px;
}
.coach-box p {
  font-size: 14px;
  margin-bottom: 17px;
}
.auth-shell {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
}
.auth-art {
  background: var(--ink) url('/assets/e4816d666d1ad58b.webp') 70% center/cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 55px;
  color: white;
}
.auth-art .logo {
  width: 230px;
}
.auth-art h2 {
  font-size: 65px;
  max-width: 450px;
}
.auth-form {
  max-width: 500px;
  width: 100%;
  padding: 70px 40px 120px;
  margin: auto;
}
.auth-form .page-head {
  margin-bottom: 35px;
}
.social-login {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 13px;
  border: 1px solid var(--line);
  background: #fff;
  margin-bottom: 10px;
  font-size: 14px;
}
.social-login:hover {
  border-color: var(--accent);
}
.divider {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  margin: 25px 0;
}
.divider:before,
.divider:after {
  content: '';
  height: 1px;
  background: var(--line);
  flex: 1;
}
.otp-dots {
  display: flex;
  justify-content: center;
  gap: 13px;
  margin: 35px 0;
}
.otp-dots span {
  width: 52px;
  height: 59px;
  border-bottom: 1px solid currentColor;
  display: grid;
  place-items: center;
  font: 29px var(--mono);
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 310px;
  margin: auto;
}
.keypad button {
  min-height: 58px;
  font: 24px var(--sans);
  border-radius: 50%;
  background: #eae5dd;
}
.keypad button:hover {
  background: #d9c9b4;
}
.keypad button.small {
  font-size: 14px;
}
.auth-form.center {
  text-align: center;
}
.splash {
  background: var(--ink);
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #d8c9b3;
  position: relative;
  overflow: hidden;
}
.splash .logo {
  width: min(60vw, 400px);
}
.splash .eyebrow {
  margin-top: 40px;
}
.splash:after {
  content: '';
  width: 35%;
  height: 250%;
  position: absolute;
  background: linear-gradient(90deg, transparent, #ffffff16, transparent);
  transform: rotate(25deg);
  animation: sweep 2.5s linear infinite;
  pointer-events: none;
}
.splash .skip {
  position: absolute;
  bottom: 90px;
  font-size: 13px;
  color: #d8c9b3;
}
/* Internal */
.staff-theme {
  background: #14120f;
  color: #eee8df;
  --line: #3a342c;
  --white: #1d1914;
  --paper: #14120f;
  --muted: #b3a899;
  --pale: #352a1e;
  --accent: #bf9869;
  color-scheme: dark;
}
.staff-theme .sidebar {
  background: #171410;
}
.staff-theme .side-link:hover,
.staff-theme .side-link.active {
  background: #292219;
}
.staff-theme .side-link.active {
  color: #dcc5a7;
}
.staff-theme .app-top {
  border-color: #342d24;
}
.staff-theme .card {
  background: #1d1914;
}
.staff-theme .notice {
  background: #33281b;
  color: #e2cbb0;
}
.staff-theme .input,
.staff-theme input,
.staff-theme select,
.staff-theme textarea {
  background: #201a13;
  color: white;
  border-color: #5d4d39;
}
.staff-theme .btn {
  background: #d8c2a4;
  color: #201a13;
  border-color: #d8c2a4;
}
.staff-theme .btn.outline {
  background: transparent;
  color: #d8c2a4;
}
.staff-theme .chip.active {
  background: #d8c2a4;
  color: #201a13;
}
.staff-theme .select-card {
  background: #1e1913;
}
.staff-theme .select-card.selected {
  background: #30271b;
}
.staff-theme .select-card p {
  color: #c1b4a2;
}
.staff-theme .icon-btn:hover {
  background: #3a2b1a;
}
.staff-theme .timeline .dot {
  background: #1d1914;
}
.staff-theme .pill.success {
  background: #223b2e;
  color: #b9d9c5;
}
.staff-theme .row .meta {
  color: #b4a796;
}
.staff-theme .auth-shell {
  display: block;
  background: #14120f;
}
.staff-theme .auth-form {
  padding-top: 80px;
}
.staff-theme .keypad button {
  background: #29221a;
  color: #e6d8c5;
}
.staff-theme .keypad button:hover {
  background: #483522;
}
.chair-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.chair {
  border: 1px solid var(--line);
  padding: 23px;
}
.chair.busy {
  border-color: #896640;
  background: #281f16;
}
.chair .number {
  font: 35px var(--serif);
  margin-bottom: 10px;
}
.chair p {
  font-size: 13px;
  color: var(--muted);
}
.timer-display {
  font: 70px var(--mono);
  line-height: 1.1;
  margin: 25px 0;
}
.staff-note {
  padding: 16px;
  border: 1px dashed #736044;
  font-size: 14px;
}
/* Prototype controls & overlays */
.demo-dock {
  position: fixed;
  right: 22px;
  bottom: 20px;
  background: #fffefbef;
  border: 1px solid #d4cabb;
  box-shadow: 0 5px 30px #0002;
  display: flex;
  align-items: center;
  z-index: 35;
  padding: 5px;
  gap: 2px;
  backdrop-filter: blur(15px);
  color: #272018;
}
.demo-dock button {
  font-size: 12px;
  padding: 8px 12px;
  min-height: 36px;
}
.demo-dock button.active {
  background: #211a13;
  color: #fff;
}
.demo-dock .demo-label {
  padding: 0 12px;
  font: 10px var(--mono);
  color: #7b6953;
  border-right: 1px solid #d4cabb;
}
.demo-dock .more {
  font-size: 20px;
}
.overlay-shade {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #14120f99;
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
}
.modal {
  background: #f7f5f1;
  color: #14120f;
  max-height: 90svh;
  overflow: auto;
  width: min(580px, 100%);
  padding: 32px;
  box-shadow: 0 30px 100px #0004;
  border: 1px solid #cec1af;
}
.modal.wide {
  width: min(970px, 100%);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  margin-bottom: 22px;
}
.modal-head h2 {
  font-size: 39px;
}
.modal p {
  font-size: 14px;
  color: #70685b;
}
.modal .field input,
.modal .field select {
  background: white;
  color: #14120f;
}
.modal .btn {
  background: #14120f;
  color: white;
  border-color: #14120f;
}
.modal .btn.outline {
  background: transparent;
  color: #14120f;
}
.modal .row {
  border-color: #ddd3c5;
}
.modal .chip.active {
  background: #14120f;
  color: white;
}
.screen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.screen-grid button {
  text-align: left;
  border: 1px solid #ddd3c5;
  padding: 11px;
  font-size: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.screen-grid button:hover {
  background: #e7dbca;
}
.screen-grid button span {
  color: #8f7454;
  font: 12px var(--mono);
}
#toast {
  position: fixed;
  left: 50%;
  bottom: 95px;
  transform: translate(-50%, 20px);
  z-index: 120;
  background: #1d1812;
  color: #fff;
  padding: 15px 24px;
  font-size: 14px;
  max-width: min(90vw, 540px);
  box-shadow: 0 6px 25px #0003;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
}
#toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}
.spinner {
  width: 22px;
  height: 22px;
  border: 2px solid #b9a487;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
.form-error {
  font-size: 13px;
  color: #a3442c;
  margin: 10px 0;
}
.no-scroll {
  overflow: hidden;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid #b08855;
  outline-offset: 4px;
}
@keyframes ink-drift {
  0% {
    transform: scale(1.03) translate(-1%, 0);
  }
  100% {
    transform: scale(1.07) translate(1%, -1%);
  }
}
@keyframes sweep {
  0% {
    left: -80%;
  }
  100% {
    left: 150%;
  }
}
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (min-width: 1550px) {
  .app-main {
    padding-left: 6vw;
    padding-right: 6vw;
  }
  .hero-copy {
    bottom: 25%;
  }
}
@media (max-width: 1150px) {
  .app-shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .sidebar {
    padding: 30px 18px;
  }
  .sidebar .logo {
    width: 155px;
  }
  .app-main {
    padding-left: 30px;
    padding-right: 30px;
  }
  .two-col {
    grid-template-columns: minmax(0, 1.45fr) minmax(230px, 1fr);
    gap: 22px;
  }
  .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .webnav nav {
    gap: 20px;
  }
  .web-section {
    padding: 85px 6vw;
  }
  .plan-card h3 {
    font-size: 34px;
  }
  .tier-select {
    grid-template-columns: 1fr;
  }
  .tier-select .select-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
  }
  .tier-select .select-card .price {
    margin: 0;
    font-size: 21px;
  }
  .tier-select .select-card p {
    display: none;
  }
}
@media (max-width: 800px) {
  .app-shell {
    display: block;
  }
  .sidebar {
    display: none;
  }
  .app-main {
    padding: 0 22px 135px;
  }
  .app-top {
    height: 78px;
  }
  .app-top .breadcrumb {
    display: none;
  }
  .app-top .logo {
    display: block;
  }
  .page {
    margin-top: 26px;
  }
  .two-col {
    grid-template-columns: 1fr;
  }
  .sticky {
    position: static;
  }
  .mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fffefb;
    z-index: 30;
    border-top: 1px solid #dcd4c7;
    padding: 10px 6px max(12px, env(safe-area-inset-bottom));
    color: #34291c;
    justify-content: space-around;
    gap: 3px;
  }
  .mobile-nav button {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 4px 7px;
    font-size: 11px;
    min-width: 54px;
  }
  .mobile-nav button.active {
    color: var(--accent);
  }
  .mobile-nav button.book {
    background: #211a13;
    color: white;
    margin-top: -22px;
    min-width: 58px;
    border-radius: 50%;
    width: 58px;
    height: 58px;
    align-content: center;
  }
  .mobile-nav button.book .icon {
    width: 23px;
    height: 23px;
  }
  .mobile-nav button.book span {
    display: none;
  }
  .demo-dock {
    right: 8px;
    bottom: 88px;
    gap: 0;
    padding: 3px;
  }
  .demo-dock .demo-label {
    display: none;
  }
  .demo-dock button {
    padding: 6px 10px;
    min-height: 30px;
    font-size: 11px;
  }
  .web .demo-dock {
    bottom: 12px;
  }
  .demo-dock.web-dock {
    bottom: 12px;
  }
  .greeting h1 {
    font-size: 40px;
  }
  .greeting .eyebrow {
    font-size: 11px;
  }
  .mini-hero {
    min-height: 260px;
  }
  .mini-hero h2 {
    font-size: 41px;
  }
  .webnav {
    padding: 0 24px;
    height: 87px;
  }
  .webnav .logo {
    width: 160px;
  }
  .webnav nav .nav-extra {
    display: none;
  }
  .webnav nav {
    gap: 12px;
  }
  .webnav .btn {
    min-height: 42px;
    padding: 9px 15px;
    font-size: 12px;
  }
  .hero {
    min-height: 670px;
  }
  .hero-bg {
    background-position: 63% center;
  }
  .hero-copy {
    left: 7vw;
    bottom: 23%;
    width: 86%;
  }
  .hero h1 {
    font-size: clamp(62px, 12vw, 90px);
  }
  .hero-copy p {
    max-width: 300px;
    font-size: 14px;
  }
  .hero-footer {
    left: 7vw;
    right: 7vw;
    bottom: 70px;
    font-size: 10px;
  }
  .vertical-note {
    display: none;
  }
  .web-section {
    padding: 70px 24px;
  }
  .section-heading {
    display: block;
    margin-bottom: 30px;
  }
  .section-heading h2 {
    font-size: 48px;
  }
  .section-heading p {
    margin-top: 20px;
  }
  .studio-intro {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .studio-intro h2 {
    font-size: 50px;
  }
  .web .grid.four {
    gap: 24px 15px;
  }
  .web .hair-tile h3 {
    font-size: 27px;
  }
  .web .hair-tile p {
    font-size: 12px;
  }
  .footer {
    padding: 50px 24px 100px;
    display: block;
  }
  .footer .links {
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 22px;
  }
  .auth-shell {
    display: block;
  }
  .auth-art {
    display: none;
  }
  .auth-form {
    padding: 45px 28px 140px;
  }
  .auth-form .mobile-logo {
    display: block;
    margin-bottom: 50px;
  }
  .grid.three {
    grid-template-columns: 1fr;
  }
  .tier-select {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tier-select .select-card {
    display: block;
    padding: 15px 10px;
  }
  .tier-select strong {
    font-size: 12px;
    line-height: 1.45;
    display: block;
  }
  .tier-select .select-card .price {
    font-size: 19px;
    margin-top: 13px;
  }
  .card {
    padding: 22px;
  }
  .chair-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .staff-theme .mobile-nav {
    background: #1d1812;
    color: #dbc5a7;
    border-color: #4e3d29;
  }
  .modal {
    padding: 24px;
  }
  .overlay-shade {
    padding: 15px;
  }
  .screen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .plan-card h3 {
    font-size: 33px;
  }
  .plan-card {
    padding: 22px;
  }
  .plan-card .price {
    font-size: 21px;
  }
  #toast {
    bottom: 142px;
  }
}
@media (max-width: 460px) {
  .grid.two:not(.keep-two) {
    grid-template-columns: 1fr;
  }
  .grid.four {
    gap: 15px;
  }
  .web .grid.two {
    grid-template-columns: 1fr;
  }
  .web .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .atelier-web .grid.four {
    grid-template-columns: 1fr;
  }
  .plan-grid {
    grid-template-columns: 1fr !important;
  }
  .section-heading h2 {
    font-size: 43px;
  }
  .hero h1 {
    font-size: 66px;
  }
  .hero-copy {
    bottom: 24%;
  }
  .hero-footer span:last-child {
    max-width: 145px;
    text-align: right;
  }
  .page-head h1 {
    font-size: 39px;
  }
  .app-main {
    padding-left: 18px;
    padding-right: 18px;
  }
  .app-top .logo {
    width: 132px;
  }
  .app-top .small {
    display: none;
  }
  .btn {
    padding: 13px 17px;
  }
  .product-label h3 {
    font-size: 15px;
  }
  .product-label .price {
    font-size: 13px;
  }
  .hair-tile h3 {
    font-size: 26px;
  }
  .cart-item {
    gap: 15px;
  }
  .cart-item .product-art {
    width: 75px;
    height: 95px;
  }
  .cart-item .price {
    font-size: 13px;
  }
  .cart-item .remove {
    display: none;
  }
  .steps span {
    font-size: 12px;
  }
  .day-btn {
    min-height: 45px;
  }
  .slots {
    grid-template-columns: repeat(3, 1fr);
  }
  .passport-data {
    gap: 15px;
  }
  .stat .value {
    font-size: 29px;
  }
  .stat {
    padding: 15px;
  }
  .quick-row button {
    font-size: 12px;
  }
  .timer-display {
    font-size: 57px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .hero-bg {
    filter: none;
  }
  .hero canvas {
    display: none;
  }
}

@font-face {
  font-family: 'Newsreader';
  src: url('/assets/8a08d13f8a6c0d51.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
html[lang='vi'] {
  --serif: 'Newsreader', Georgia, serif;
}
/* Photography and editorial website */
.micro {
  font: 10px/1.5 var(--mono);
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.photo-v2 {
  background-size: 200% 200%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-color: #c9c0b2;
}
.photo-v2.q0 {
  background-position: 0 0;
}
.photo-v2.q1 {
  background-position: 100% 0;
}
.photo-v2.q2 {
  background-position: 0 100%;
}
.photo-v2.q3 {
  background-position: 100% 100%;
}
.hero-bg {
  filter: none !important;
  animation: none !important;
  inset: 0;
  z-index: -3;
}
.hero #liquid-hero {
  width: 100%;
  height: 100%;
  z-index: -2;
  mix-blend-mode: normal;
  opacity: 0;
  transition: opacity 1.2s;
  will-change: opacity;
}
.hero #liquid-hero.ready {
  opacity: 1;
}
.hero-shade {
  pointer-events: none;
}
.team-section {
  background: #eae6de;
}
.team-web-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.team-tile {
  text-align: left;
  padding: 0;
  min-width: 0;
  display: block;
  width: 100%;
}
.team-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: #a79888;
}
.team-image .photo-v2 {
  transition: transform 0.7s cubic-bezier(0.2, 0.65, 0.2, 1);
}
.team-tile:hover .team-image .photo-v2 {
  transform: scale(1.045);
}
.team-view {
  position: absolute;
  bottom: 16px;
  right: 16px;
  border: 1px solid #ffffff80;
  color: white;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background 0.2s;
}
.team-tile:hover .team-view {
  background: #ffffff20;
}
.portrait-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  color: white;
  font: 9px var(--mono);
  letter-spacing: 0.12em;
  border: 1px solid #ffffff60;
  padding: 6px 9px;
}
.team-caption {
  padding: 20px 0 10px;
}
.team-caption > .micro {
  color: var(--muted);
  font-size: 10px;
}
.team-caption h3 {
  font-size: 35px;
  margin: 8px 0;
}
.team-caption p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  min-height: 36px;
}
.team-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid #cfc7ba;
  font-size: 12px;
}
.team-meta > span:last-child {
  font-family: var(--mono);
}
.team-section .image-caption {
  text-align: right;
  margin-top: 24px;
}
.space-section {
  background: #14120f;
  color: #f7f5f1;
}
.space-section .section-heading p {
  color: #b7afa2;
}
.space-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
}
.space-layout button {
  padding: 0;
  position: relative;
  overflow: hidden;
  display: block;
}
.space-large {
  min-height: 700px;
}
.space-large .photo-v2 {
  position: absolute;
  inset: 0;
}
.space-caption {
  position: absolute;
  bottom: 35px;
  left: 35px;
  text-align: left;
  text-shadow: 0 1px 20px #000;
}
.space-caption span {
  font: 11px var(--mono);
}
.space-caption h3 {
  font-size: 49px;
  margin-top: 12px;
}
.space-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
}
.space-stack button .photo-v2 {
  position: absolute;
  inset: 0;
}
.space-stack button > span {
  position: absolute;
  bottom: 18px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  text-shadow: 0 1px 15px #000;
}
.space-layout .photo-v2 {
  transition: transform 0.8s cubic-bezier(0.2, 0.65, 0.2, 1);
}
.space-layout button:hover .photo-v2 {
  transform: scale(1.035);
}
.space-layout button:after {
  content: '';
  position: absolute;
  inset: 60% 0 0;
  background: linear-gradient(transparent, #0005);
  pointer-events: none;
  z-index: 0;
}
.space-caption,
.space-stack button > span {
  z-index: 1;
}
.craft-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
  align-items: center;
}
.craft-image {
  aspect-ratio: 1/1;
  overflow: hidden;
}
.craft-copy h2 {
  font-size: clamp(48px, 5vw, 77px);
  margin: 25px 0;
}
.craft-copy p {
  font-size: 15px;
  color: var(--muted);
  max-width: 360px;
}
.space-modal-image {
  height: auto;
  aspect-ratio: 1;
}
.webnav nav {
  gap: 25px;
}
.web-section {
  scroll-margin-top: 0;
}
.web .collection .product-art {
  transition: filter 0.5s;
}
.web .collection .product-tile:hover .product-art {
  filter: brightness(1.04);
}
/* The phone is the app's layout viewport, independent of the browser width. */
body.mode-app {
  background: #d9d5cf;
  overflow: hidden;
}
.device-stage {
  --phone-height: min(874px, calc(100dvh - 64px));
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(210px, 300px) 418px minmax(100px, 200px);
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 5vw, 100px);
  padding: 32px 40px;
  background: radial-gradient(ellipse at 58% 30%, #f1eeea 0, #e3dfd9 47%, #d1ccc4 100%);
}
.device-frame {
  width: 418px;
  height: var(--phone-height);
  min-height: 530px;
  background: #171614;
  border: 1px solid #57524a;
  border-radius: 44px;
  padding: 7px;
  box-shadow:
    0 25px 60px #382e2426,
    0 5px 15px #15110e26,
    inset 0 0 0 2px #35312c;
  position: relative;
}
.device-frame:before {
  content: '';
  position: absolute;
  left: -3px;
  top: 140px;
  width: 2px;
  height: 45px;
  background: #5b564f;
  border-radius: 2px;
}
.device-frame:after {
  content: '';
  position: absolute;
  right: -3px;
  top: 160px;
  width: 2px;
  height: 65px;
  background: #5b564f;
  border-radius: 2px;
}
.device-screen {
  height: 100%;
  border-radius: 35px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #faf9f6;
  color: var(--ink);
  position: relative;
  isolation: isolate;
  font-family: Manrope, Metropolis, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  --sans: Manrope, Metropolis, Arial, sans-serif;
  --white: #fff;
  --paper: #faf9f6;
  --line: #e8e3dc;
}
.device-context {
  max-width: 290px;
  color: #322b24;
  align-self: center;
}
.device-context > .eyebrow {
  font-size: 10px;
  margin-top: 64px;
  color: #786c5e;
}
.device-context > button {
  padding: 0;
}
.device-context .logo {
  width: 159px;
}
.device-context h2 {
  font-size: 48px;
  line-height: 1.04;
  margin: 20px 0;
}
.device-context p {
  font-size: 13px;
  color: #857868;
  max-width: 240px;
  line-height: 1.6;
}
.device-context-nav {
  margin: 40px 0 48px;
}
.device-context-nav button {
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #c7bfb3;
  font-size: 12px;
}
.device-context-nav .icon {
  width: 16px;
}
.device-context > .micro {
  font-size: 8px;
  color: #887e70;
}
.device-index {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: end;
  padding-bottom: 35px;
  max-width: 150px;
  color: #776c5d;
}
.device-index > .micro {
  font-size: 11px;
  color: #3a3128;
}
.device-index > span:not(.micro) {
  font-size: 12px;
}
.device-index .icon-btn {
  margin-top: 15px;
  border-color: #ada392;
}
.device-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
  flex-shrink: 0;
  padding: 12px 25px 3px;
  font-size: 12px;
  font-weight: 700;
  position: relative;
  z-index: 3;
  background: inherit;
}
.status-signals {
  display: flex;
  align-items: center;
  gap: 5px;
}
.status-signals svg {
  height: 11px;
  width: 16px;
  fill: currentColor;
}
.status-signals svg:last-child {
  width: 24px;
}
.status-signals > span {
  font-size: 9px;
}
.device-home-indicator {
  height: 17px;
  position: relative;
  flex-shrink: 0;
  background: inherit;
}
.device-home-indicator:after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 4px;
  background: currentColor;
  border-radius: 5px;
  opacity: 0.8;
}
.phone-toolbar {
  height: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 10px;
  border-bottom: 1px solid #ebe7e0;
  background: inherit;
  z-index: 4;
}
.phone-toolbar > .toolbar-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-toolbar > button {
  padding: 0;
}
.phone-toolbar > button:first-child .logo {
  width: 111px;
}
.phone-toolbar > button:first-child {
  margin-right: auto;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.phone-toolbar > button.toolbar-back {
  margin-right: 0;
  width: 30px;
  min-width: 30px;
}
.toolbar-actions {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-left: auto;
}
.toolbar-actions > button {
  position: relative;
  min-width: 33px;
  height: 44px;
  padding: 0;
}
.toolbar-actions > button i {
  position: absolute;
  right: 0;
  top: 7px;
  width: 13px;
  height: 13px;
  background: var(--ink);
  color: white;
  border-radius: 50%;
  font: 8px/13px var(--mono);
  font-style: normal;
}
.phone-toolbar .lang-button {
  font: 10px var(--mono);
  min-width: 30px;
  min-height: 44px;
  padding: 0;
}
.phone-toolbar .phone-menu {
  font-size: 23px;
  line-height: 1;
  letter-spacing: 1px;
  padding-bottom: 7px;
}
.phone-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.phone-scroll::-webkit-scrollbar {
  display: none;
}
.phone-page {
  padding: 24px 20px 28px;
  min-width: 0;
  animation: native-enter 0.22s ease-out;
}
.phone-page > * {
  max-width: 100%;
}
.phone-page h1 {
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.phone-page h2 {
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.phone-page h3 {
  font-size: 24px;
  line-height: 1.12;
}
.phone-page .page-head {
  margin: 0 0 24px;
}
.phone-page .page-head .eyebrow {
  font-size: 9px;
  margin-bottom: 10px;
}
.phone-page .page-head p {
  font-size: 13px;
  line-height: 1.65;
  margin-top: 12px;
}
.phone-page .page-head .back {
  display: none;
}
.phone-page .two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
.phone-page .sticky {
  position: static;
  top: auto;
}
.phone-page .grid.three {
  grid-template-columns: 1fr;
}
.phone-page .grid.two,
.phone-page .grid.four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.phone-page .grid.two:not(.keep-two):has(.passport-card) {
  grid-template-columns: 1fr;
}
.phone-page .stack {
  gap: 18px;
}
.phone-page .card {
  border-radius: 17px;
  padding: 20px;
}
.device-screen .btn {
  border-radius: 12px;
  min-height: 48px;
  font-size: 13px;
  padding: 12px 16px;
  gap: 8px;
  line-height: 1.4;
}
.device-screen .btn.sm {
  min-height: 44px;
  font-size: 12px;
  padding: 9px 12px;
}
.device-screen .btn:hover {
  transform: none;
}
.device-screen .btn:active,
.native-tabbar button:active {
  transform: scale(0.97);
}
.device-screen .btn.text {
  padding-left: 0;
  padding-right: 0;
}
.device-screen .btn .icon {
  width: 18px;
}
.device-screen .field input,
.device-screen .field select,
.device-screen .field textarea {
  border-radius: 12px;
  min-height: 49px;
  font-size: 16px;
}
.phone-page .field label {
  font-size: 12px;
}
.phone-page .notice {
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.65;
  padding: 13px 14px;
  border-left-width: 2px;
}
.phone-page .row {
  padding: 16px 0;
  font-size: 13px;
  gap: 12px;
  align-items: center;
}
.phone-page .row .price {
  font-size: 13px;
}
.phone-page .row.total {
  font-size: 15px;
}
.phone-page .small {
  font-size: 12px;
}
.phone-page .check-list li {
  font-size: 12px;
  line-height: 1.65;
}
.phone-page .eyebrow {
  font-size: 10px;
}
.phone-page .pill {
  border-radius: 5px;
  font-size: 9px;
}
.phone-page .empty {
  border-radius: 16px;
  padding: 28px 20px;
}
.phone-page .chip,
.phone-overlay .chip {
  border-radius: 8px;
  min-height: 42px;
  padding: 9px 12px;
  font-size: 12px;
}
.phone-page .segmented {
  gap: 6px;
}
.phone-page .mt {
  margin-top: 22px;
}
.phone-page .mb {
  margin-bottom: 20px;
}
.phone-page .disclosure {
  border-top: 1px solid var(--line);
  padding: 0;
}
.phone-page .disclosure > summary {
  font-weight: 500;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  font-size: 12px;
  list-style: none;
  cursor: pointer;
  padding: 12px 0;
}
.phone-page .disclosure > summary:after {
  content: '+';
  font-size: 22px;
  font-weight: 400;
}
.phone-page .disclosure[open] > summary:after {
  content: '−';
}
.phone-page .disclosure > div,
.phone-page .disclosure > p {
  padding: 0 0 18px;
  font-size: 12px;
  color: var(--muted);
}
.phone-page .select-card {
  border-radius: 12px;
  padding: 14px;
  font-size: 13px;
}
.phone-page .select-card p {
  font-size: 11px;
  line-height: 1.5;
}
.phone-page .price {
  font-size: 12px;
}
.native-tabbar {
  background: #fffefb;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-around;
  padding: 9px 7px 2px;
  flex-shrink: 0;
  height: 65px;
  position: relative;
  z-index: 4;
}
.native-tabbar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 61px;
  padding: 4px 4px 0;
  color: #8c8479;
}
.native-tabbar button > span {
  height: 25px;
  display: grid;
  place-items: center;
}
.native-tabbar button .icon {
  width: 21px;
  height: 21px;
}
.native-tabbar label {
  font-size: 9px;
  letter-spacing: -0.025em;
  cursor: pointer;
  white-space: nowrap;
}
.native-tabbar button.selected {
  color: #3f3022;
}
.native-tabbar button.selected label {
  font-weight: 800;
}
.native-tabbar .tab-book {
  min-width: 64px;
  padding-top: 0;
}
.native-tabbar .tab-book > span {
  border-radius: 50%;
  background: #1e1a15;
  color: #f7f2e9;
  width: 43px;
  height: 43px;
  position: absolute;
  top: -17px;
  box-shadow: 0 0 0 5px #faf9f6;
}
.native-tabbar .tab-book > label {
  padding-top: 32px;
}
.native-tabbar .tab-book .icon {
  width: 24px;
  height: 24px;
}
.native-action {
  display: flex;
  gap: 12px;
  padding: 12px 18px 5px;
  align-items: center;
  border-top: 1px solid var(--line);
  background: #fffefb;
  flex-shrink: 0;
  min-height: 76px;
  z-index: 4;
}
.native-action > div {
  flex: 1;
  min-width: 85px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.native-action .micro {
  font-size: 8px;
  color: #807465;
  letter-spacing: 0.025em;
}
.native-action strong {
  font: 14px var(--mono);
  white-space: nowrap;
}
.native-action .btn {
  max-width: 220px;
  min-width: 145px;
  font-size: 12px;
  flex: 1.6;
  padding: 12px;
}
.prototype-footnote {
  font-size: 8px;
  line-height: 12px;
  color: #958d81;
  letter-spacing: 0.03em;
  text-align: center;
  height: 13px;
  flex-shrink: 0;
  background: #fffefb;
}
.mode-app #toast {
  bottom: 110px;
  max-width: 350px;
  z-index: 150;
  font-size: 12px;
  padding: 12px 18px;
  border-radius: 12px;
}
.phone-page button:focus-visible,
.native-tabbar button:focus-visible,
.phone-toolbar button:focus-visible {
  outline: 2px solid #917250;
  outline-offset: 3px;
}
/* A home made for thumbs: image-led, short text, horizontal discoveries. */
[data-route='home'] .phone-page {
  padding: 0 0 25px;
}
.home-toolbar {
  border-bottom: 0;
}
.mobile-home-intro {
  padding: 19px 20px 0;
}
.mobile-home-intro > .micro {
  font-size: 9px;
  color: #8c8071;
}
.mobile-home-intro h1 {
  font-size: 39px;
  margin: 5px 0 21px;
  letter-spacing: -0.03em;
}
.points-chip {
  font: 10px var(--mono);
  border: 1px solid #ded5c8;
  border-radius: 30px;
  padding: 7px 10px;
  margin-bottom: 16px;
}
.home-cover {
  height: 290px;
  border-radius: 17px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: #473928;
}
.home-cover > .photo-v2 {
  position: absolute;
  inset: 0;
}
.home-cover:after {
  content: '';
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(transparent, #090805ad);
}
.home-cover-copy {
  position: absolute;
  bottom: 23px;
  left: 22px;
  right: 22px;
  color: #fff9ef;
  z-index: 1;
}
.home-cover-copy > .micro {
  font-size: 8px;
  letter-spacing: 0.15em;
}
.home-cover-copy h2 {
  font-size: 38px;
  line-height: 1.02;
  margin-top: 12px;
}
.cover-arrow {
  position: absolute;
  bottom: 3px;
  right: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #fff7;
}
.home-book {
  padding-top: 12px;
}
.home-book .btn {
  justify-content: space-between;
  min-height: 50px;
  padding: 14px 18px;
}
.now-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  padding: 14px 0;
  width: 100%;
  font-size: 9px;
  border-bottom: 1px solid var(--line);
}
.now-strip > span {
  display: flex;
  gap: 7px;
  align-items: center;
  color: #857968;
  white-space: nowrap;
}
.now-strip > span i {
  width: 5px;
  height: 5px;
  background: #5d7562;
  border-radius: 50%;
}
.now-strip strong {
  font-size: 10px;
  font-weight: 600;
}
.now-strip .icon {
  width: 13px;
  height: 13px;
}
.home-block {
  margin-top: 31px;
}
.home-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0 20px 16px;
}
.home-section-title h2 {
  font-size: 26px;
  line-height: 1.1;
  max-width: 76%;
}
.home-section-title > button {
  padding: 8px 0 8px 6px;
  font-size: 10px;
  white-space: nowrap;
  color: #7b6348;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
}
.home-section-title .icon {
  width: 13px;
  height: 13px;
}
.swipe-row {
  display: flex;
  gap: 13px;
  overflow-x: auto;
  padding: 0 20px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.swipe-row::-webkit-scrollbar {
  display: none;
}
.swipe-row > * {
  scroll-snap-align: start;
  flex: none;
}
.swipe-row:after {
  content: '';
  min-width: 6px;
}
.team-carousel .team-tile {
  width: 158px;
}
.team-carousel .team-image {
  height: 197px;
  aspect-ratio: auto;
  border-radius: 12px;
}
.team-carousel .team-view {
  width: 29px;
  height: 29px;
  right: 10px;
  bottom: 10px;
}
.team-carousel .team-view .icon {
  width: 16px;
  height: 16px;
}
.team-carousel .portrait-badge {
  font-size: 7px;
  top: 10px;
  left: 10px;
  padding: 4px 6px;
}
.team-carousel .team-caption {
  padding: 11px 0 0;
}
.team-carousel .team-caption .micro {
  font-size: 7px;
  letter-spacing: 0;
}
.team-carousel .team-caption h3 {
  font-size: 27px;
  margin: 4px 0 7px;
}
.team-carousel .team-caption p {
  font-size: 9px;
  min-height: 28px;
}
.team-carousel .team-meta {
  font-size: 9px;
  margin-top: 8px;
  padding-top: 8px;
  border-color: var(--line);
}
.look-carousel .hair-tile {
  width: 148px;
}
.look-carousel .hair-photo {
  height: 185px;
  aspect-ratio: auto;
  border-radius: 11px;
}
.phone-page .hair-tile h3 {
  font-size: 24px;
  margin-top: 11px;
}
.phone-page .hair-tile p {
  font-size: 10px;
  line-height: 1.5;
}
.phone-page .hair-tile .circle-arrow {
  width: 30px;
  height: 30px;
  right: 10px;
  bottom: 12px;
}
.phone-page .hair-tile .circle-arrow .icon {
  width: 16px;
}
.ritual-banner {
  height: 250px;
  margin: 0 20px;
  width: calc(100% - 40px);
  padding: 0;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  display: block;
  text-align: left;
  color: #fffaf0;
}
.ritual-banner > .photo-v2 {
  position: absolute;
  inset: 0;
}
.ritual-banner:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #08070670, transparent 90%);
}
.ritual-banner > div:last-child {
  position: absolute;
  inset: 25px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ritual-banner .micro {
  font-size: 8px;
}
.ritual-banner h2 {
  font-size: 37px;
  margin: 15px 0;
}
.ritual-banner div > span:last-child {
  font-size: 10px;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 15px;
}
.product-carousel .product-tile {
  width: 190px;
  flex: none;
}
.product-carousel .product-art {
  height: 225px;
  aspect-ratio: auto;
  border-radius: 12px;
}
.phone-page .product-art .pill {
  font: 7px var(--mono);
  letter-spacing: 0.05em;
  padding: 5px 6px;
  top: 12px;
  left: 12px;
}
.phone-page .product-label {
  display: block;
  padding-top: 10px;
}
.phone-page .product-label h3 {
  font: 600 11px/1.5 var(--sans);
}
.phone-page .product-label p {
  font-size: 9px;
  margin-top: 3px;
}
.phone-page .product-label .price {
  display: block;
  font-size: 11px;
  margin-top: 8px;
}
.atelier-home {
  margin: 0 20px;
  padding: 26px;
  width: calc(100% - 40px);
  border-radius: 15px;
  background: #1d1a15;
  color: #f5ead9;
  position: relative;
  overflow: hidden;
  text-align: left;
  display: flex;
  justify-content: space-between;
}
.atelier-home .micro {
  font-size: 8px;
  color: #b09a7c;
}
.atelier-home h2 {
  font-size: 35px;
  margin: 14px 0 24px;
}
.atelier-home div > span:last-child {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.atelier-symbol {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 105px;
  line-height: 1;
  color: #ad9270;
  align-self: center;
}
.guest-invitation {
  margin: 28px 20px 0;
  border-top: 1px solid var(--line);
  padding: 24px 0 4px;
  display: grid;
  gap: 6px;
  font-size: 11px;
}
.guest-invitation > span {
  color: #837768;
}
.guest-invitation button {
  padding: 5px 0;
  text-align: left;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
}
.home-smallprint {
  font: 8px/1.8 var(--mono);
  letter-spacing: 0.04em;
  color: #aaa095;
  margin: 30px 20px 0;
  text-align: center;
}
.native-next-visit {
  margin: 24px 20px 0;
  border: 1px solid #dfd6c9;
  border-radius: 12px;
  padding: 15px;
  background: #f1ece5;
}
.native-next-visit > .micro {
  font-size: 8px;
  color: #8b745b;
}
.native-next-visit > button {
  width: 100%;
  padding: 13px 0 0;
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
}
.native-next-visit strong {
  font-size: 12px;
}
.native-next-visit p {
  font-size: 10px;
  color: #85735f;
  margin-top: 3px;
}
.native-next-visit .icon {
  margin-left: auto;
  width: 16px;
}
.visit-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid #cfc2b0;
  min-width: 45px;
  padding-right: 13px;
}
.visit-date b {
  font: 28px/1 var(--serif);
}
.visit-date small {
  font-size: 8px;
}
.native-next-visit .hair-photo {
  height: 53px;
  width: 45px;
  flex-shrink: 0;
  border-radius: 6px;
}
.team-sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 12px;
}
.team-sheet-grid .team-image {
  border-radius: 10px;
}
.team-sheet-grid .team-caption h3 {
  font-size: 28px;
}
.team-sheet-grid .team-caption p {
  font-size: 10px;
}
.team-sheet-grid .team-meta {
  font-size: 10px;
}
.team-sheet-grid .team-caption {
  padding-top: 12px;
}
.team-sheet-grid .micro {
  font-size: 8px;
}
.team-sheet-grid .team-view {
  width: 30px;
  height: 30px;
  bottom: 10px;
  right: 10px;
}
/* Stylist, look and product detail screens. */
[data-route='barber'] .phone-page,
[data-route='style'] .phone-page,
[data-route='product'] .phone-page {
  padding: 0;
}
.profile-cover {
  height: 393px;
  position: relative;
  isolation: isolate;
  color: #fff8ed;
}
.profile-cover > .photo-v2 {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.profile-cover:after {
  content: '';
  position: absolute;
  inset: 36% 0 0;
  background: linear-gradient(transparent, #14120fc9);
  z-index: -1;
}
.profile-follow {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff77;
  border-radius: 50%;
  background: #2222;
  backdrop-filter: blur(5px);
}
.profile-follow.on .icon {
  fill: #f8ead6;
}
.profile-cover-copy {
  position: absolute;
  bottom: 27px;
  left: 23px;
  right: 23px;
}
.profile-cover-copy .micro {
  font-size: 9px;
  color: #d7c9b4;
}
.profile-cover-copy h1 {
  font-size: 57px;
  margin: 8px 0 9px;
}
.profile-cover-copy p {
  font-size: 12px;
  color: #e6ded2;
}
.profile-body,
.detail-body-v2 {
  padding: 0 20px 25px;
}
.profile-stats {
  display: flex;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  gap: 8px;
}
.profile-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  flex: 1;
}
.profile-stats > div + div {
  border-left: 1px solid var(--line);
}
.profile-stats strong {
  font-size: 14px;
  font-weight: 600;
}
.profile-stats span {
  font-size: 8px;
  color: #8a8072;
}
.profile-body blockquote {
  font: 31px/1.15 var(--serif);
  letter-spacing: -0.02em;
  margin: 27px 0 18px;
}
.profile-bio {
  font-size: 12px;
  line-height: 1.85;
  color: #736758;
}
.profile-body .home-section-title,
.detail-body-v2 .home-section-title {
  margin: 31px 0 16px;
}
.profile-body .home-section-title .micro {
  font-size: 8px;
  color: #a09281;
}
.profile-works {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.profile-works .hair-photo {
  height: 208px;
  border-radius: 10px;
  aspect-ratio: auto;
}
.profile-works .hair-tile h3 {
  font-size: 24px;
}
.profile-care {
  margin-top: 30px;
  display: flex;
  gap: 17px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.profile-care > div:first-child {
  width: 87px;
  min-width: 87px;
  height: 109px;
  border-radius: 8px;
  overflow: hidden;
}
.profile-care h3 {
  font-size: 23px;
  margin-bottom: 9px;
}
.profile-care p {
  font-size: 11px;
  line-height: 1.7;
  color: #7a6c5c;
}
.profile-suite {
  padding: 0;
  display: block;
  position: relative;
  width: 100%;
  height: 285px;
  overflow: hidden;
  border-radius: 12px;
  margin-top: 29px;
  color: white;
  text-align: left;
}
.profile-suite > .photo-v2 {
  position: absolute;
  inset: 0;
}
.profile-suite:after {
  content: '';
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, #0008);
}
.profile-suite > div:last-child {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  z-index: 1;
}
.profile-suite h3 {
  font-size: 33px;
  margin-top: 10px;
}
.profile-suite .icon {
  position: absolute;
  right: 0;
  bottom: 0;
}
.profile-review {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  margin-top: 8px;
}
.profile-review > div {
  font-size: 11px;
  letter-spacing: 3px;
  color: #937048;
  margin: 17px 0 12px;
}
.profile-review p {
  font-size: 13px;
  line-height: 1.8;
}
.profile-review > span:last-child {
  font-size: 10px;
  color: #8e7e6d;
  display: block;
  margin-top: 13px;
}
.profile-review > .micro {
  font-size: 8px;
  color: #8e7e6d;
}
.profile-disclaimer {
  font-size: 9px;
  line-height: 1.8;
  color: #93887b;
  margin-top: 23px;
}
.style-cover-v2 {
  height: 414px;
  position: relative;
  color: white;
}
.style-cover-v2 > .hair-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.style-cover-v2:after {
  content: '';
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(transparent, #14120fa8);
}
.style-cover-v2 > div:last-child {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 25px;
  z-index: 1;
}
.style-cover-v2 h1 {
  font-size: 50px;
  margin: 8px 0;
}
.style-cover-v2 p {
  font-size: 11px;
}
.look-facts {
  display: flex;
  gap: 15px;
  padding: 23px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  justify-content: space-between;
}
.look-facts > div {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 10px;
}
.look-facts .icon {
  width: 18px;
}
.stylist-inline {
  width: 100%;
  display: flex;
  gap: 14px;
  align-items: center;
  text-align: left;
  padding: 12px;
  background: #eee9e1;
  border-radius: 12px;
}
.stylist-inline > .photo-v2 {
  height: 66px;
  width: 57px;
  border-radius: 7px;
  flex-shrink: 0;
}
.stylist-inline > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.stylist-inline strong {
  font: 25px var(--serif);
}
.stylist-inline span {
  font-size: 8px;
  color: #8c7d6a;
}
.stylist-inline > .icon {
  margin-left: auto;
  width: 18px;
}
.product-inline {
  display: flex;
  gap: 14px;
  text-align: left;
  align-items: center;
  padding: 0;
}
.product-inline > .product-art {
  height: 115px;
  width: 82px;
  flex-shrink: 0;
  border-radius: 8px;
}
.product-inline .product-art .pill {
  display: none;
}
.product-inline strong {
  font-size: 11px;
}
.product-inline p {
  font-size: 10px;
  line-height: 1.7;
  color: #83735f;
  margin: 7px 0;
}
.product-inline > .icon {
  width: 16px;
}
.product-gallery-v2 {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  gap: 8px;
  background: #eae4d9;
  padding: 0 0 0;
}
.product-gallery-v2 > div {
  width: calc(100% - 26px);
  height: 376px;
  flex-shrink: 0;
  scroll-snap-align: start;
}
.product-gallery-v2 .product-art {
  height: 100%;
  aspect-ratio: auto;
}
.product-copy-v2 {
  padding-top: 26px;
}
.product-copy-v2 > .micro {
  font-size: 8px;
  color: #978166;
}
.product-copy-v2 h1 {
  font-size: 42px;
  margin: 10px 0 16px;
}
.product-copy-v2 > p {
  font-size: 13px;
  line-height: 1.8;
  color: #887968;
}
.product-copy-v2 .row strong {
  font-size: 10px;
  font-weight: 500;
}
.stylist-recommend {
  display: flex;
  gap: 13px;
  background: #ede6da;
  border-radius: 12px;
  padding: 17px;
  margin: 22px 0;
}
.stylist-recommend > span {
  font-size: 27px;
  color: #a18560;
}
.stylist-recommend strong {
  font-size: 11px;
}
.stylist-recommend p {
  font-size: 11px;
  line-height: 1.7;
  color: #80715f;
  margin-top: 6px;
}
/* Booking: compact choices and a persistent thumb-level primary action. */
.phone-page .steps {
  gap: 4px;
  margin: 0 0 28px;
}
.phone-page .steps span {
  font-size: 9px;
  gap: 5px;
  white-space: nowrap;
}
.phone-page .steps span b {
  width: 22px;
  height: 22px;
  min-width: 22px;
  font-size: 9px;
}
.phone-page .steps:after {
  display: none;
}
.booking-chapter {
  margin: 25px 0;
}
.booking-chapter > .micro {
  color: #8b7e6f;
  font-size: 8px;
  display: block;
  margin-bottom: 11px;
}
.booking-chapter .home-section-title {
  margin: 0 0 14px;
  align-items: start;
}
.booking-chapter .home-section-title h2 {
  font-size: 26px;
  max-width: 86%;
}
.booking-chapter .home-section-title .micro {
  font-size: 8px;
  white-space: nowrap;
  margin-top: 6px;
}
.native-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.native-tier {
  border: 1px solid #e3dbcf;
  border-radius: 12px;
  min-height: 153px;
  padding: 14px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: white;
  position: relative;
}
.native-tier > span {
  font: 22px var(--serif);
  color: #aa9376;
  line-height: 1;
}
.native-tier strong {
  font-size: 11px;
  margin-top: 8px;
}
.native-tier b {
  font: 11px var(--mono);
}
.native-tier small {
  font-size: 8px;
  color: #9a8c7a;
  margin-top: 3px;
}
.native-tier.selected {
  background: #1e1a15;
  color: #f9f1e5;
  border-color: #1e1a15;
}
.native-tier.selected small {
  color: #c8b599;
}
.native-tier.selected > span {
  color: #cbb493;
}
.duration-pills {
  display: flex;
  background: #efebe5;
  border-radius: 12px;
  padding: 5px;
  gap: 5px;
}
.duration-pills button {
  flex: 1;
  border-radius: 8px;
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 10px 4px;
  color: #8c7c69;
}
.duration-pills strong {
  font: 22px var(--serif);
}
.duration-pills span {
  font-size: 8px;
}
.duration-pills .selected {
  background: #fff;
  box-shadow: 0 2px 6px #74603c0c;
  color: #32291e;
}
.phone-page .service-list .select-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 15px 11px;
}
.phone-page .service-list .service-info {
  flex: 1;
  min-width: 0;
}
.phone-page .service-list .service-info strong {
  font-size: 12px;
}
.phone-page .service-list .service-info p {
  font-size: 10px;
  line-height: 1.6;
  margin-top: 4px;
}
.phone-page .service-list .check {
  height: 18px;
  width: 18px;
  min-width: 18px;
  border-radius: 50%;
  font-size: 10px;
}
.phone-page .service-list .price {
  font-size: 10px;
}
.chemical-picker {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 11px;
  text-align: left;
  margin-top: 10px;
  padding: 9px 12px 9px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}
.chemical-picker > .photo-v2 {
  width: 48px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 6px;
}
.chemical-picker > span {
  display: grid;
  gap: 6px;
}
.chemical-picker strong {
  font-size: 11px;
}
.chemical-picker small {
  font-size: 9px;
  color: #998a77;
}
.chemical-picker > .icon {
  margin-left: auto;
  width: 16px;
}
.ritual-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.ritual-option {
  position: relative;
  padding: 0 0 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
  background: white;
}
.ritual-option > .photo-v2 {
  height: 128px;
}
.ritual-option .ritual-choice {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff9;
  color: #251e15;
  font-size: 17px;
  backdrop-filter: blur(5px);
}
.ritual-option strong {
  display: block;
  margin: 12px 11px 0;
  font-size: 12px;
}
.ritual-option p {
  font-size: 9px;
  color: #90816e;
  margin: 5px 11px 10px;
  min-height: 29px;
  line-height: 1.6;
}
.ritual-option .price {
  margin: 0 11px;
  font-size: 10px;
}
.ritual-option.selected {
  border-color: #8b6d48;
  background: #eee7dc;
}
.ritual-option.selected .ritual-choice {
  background: #1c1813;
  color: white;
  font-size: 12px;
}
.combo-benefit {
  font-size: 10px;
  line-height: 1.7;
  margin-top: 13px;
  color: #8e704a;
}
.mobile-quote {
  margin-top: 15px;
}
.mobile-quote .card {
  background: transparent;
  border: 0;
  padding: 0;
}
.picker-portrait {
  width: 47px;
  height: 57px;
  flex-shrink: 0;
  border-radius: 7px;
}
.phone-page .calendar-head {
  gap: 10px;
  margin-bottom: 15px;
}
.phone-page .calendar-head strong {
  font-size: 12px;
}
.phone-page .calendar-head .icon-btn {
  width: 32px;
  height: 32px;
}
.phone-page .calendar-grid {
  gap: 4px;
}
.phone-page .day-btn {
  min-height: 41px;
  border-radius: 9px;
  font-size: 11px;
  padding: 7px 0;
}
.phone-page .day-btn small {
  font-size: 8px;
}
.phone-page .calendar-legend {
  font-size: 8px;
  gap: 9px;
  line-height: 1.6;
}
.phone-page .slots {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.phone-page .slot {
  min-height: 43px;
  border-radius: 9px;
  padding: 9px 3px;
  font-size: 12px;
}
.phone-page .dow {
  font-size: 9px;
}
.phone-page .booking-summary {
  font-size: 12px;
}
.phone-page .two-col > .sticky {
  margin-top: 0;
}
.phone-page .two-col > .sticky > .btn:not(.outline) {
  display: none;
}
.phone-page .cart-item {
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  padding: 20px 0;
}
.phone-page .cart-item .product-art {
  width: 73px;
  height: 92px;
  flex-shrink: 0;
  border-radius: 8px;
}
.phone-page .cart-item .product-art .pill {
  display: none;
}
.phone-page .cart-item .info {
  flex: 1;
}
.phone-page .cart-item h3 {
  font: 600 11px/1.5 var(--sans);
}
.phone-page .cart-item .small {
  font-size: 9px;
}
.phone-page .cart-item .price {
  font-size: 10px;
}
.phone-page .cart-item .remove {
  display: none;
}
.phone-page .qty {
  height: 33px;
}
.phone-page .qty button {
  min-width: 33px;
  height: 33px;
  font-size: 15px;
}
.phone-page .qty span {
  font-size: 11px;
}
.phone-page .stars button {
  font-size: 35px;
  padding: 4px;
}
.phone-page .tip-options {
  flex-wrap: wrap;
}
.phone-page .success-center .page-head h1 {
  font-size: 37px;
}
.phone-page .success-symbol {
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
}
.phone-page .success-center {
  padding: 5px 0 15px;
}
.phone-page .timeline {
  padding-right: 0;
}
.phone-page .timeline strong {
  font-size: 13px;
}
.phone-page .timeline p {
  font-size: 11px;
  line-height: 1.7;
}
.phone-page .timeline .dot {
  font-size: 10px;
}
.phone-page .timeline li {
  padding-bottom: 25px;
}
.phone-page .timer-display {
  font-size: 50px;
}
.phone-page .time-pills {
  flex-wrap: wrap;
}
.phone-page .photo-preview {
  max-height: 220px;
}
.phone-page .chair-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
/* Me, membership and the photographic passport. */
[data-route='me'] .phone-page {
  padding-top: 19px;
}
.me-intro > .micro {
  font-size: 8px;
  color: #988772;
}
.me-intro h1 {
  font-size: 41px;
  margin: 6px 0 12px;
}
.me-intro p {
  font-size: 12px;
  color: #8a7a65;
}
.society-pass {
  width: 100%;
  display: block;
  background: linear-gradient(135deg, #ba9b71, #d5be97 63%, #c9ad82);
  border: 1px solid #b89a6f;
  border-radius: 15px;
  padding: 19px 21px;
  margin: 23px 0 0;
  text-align: left;
  position: relative;
  overflow: hidden;
  color: #3b2c19;
}
.society-pass .micro {
  font-size: 8px;
  letter-spacing: 0.13em;
}
.society-pass .pill {
  background: #e9d6b84a;
  border-color: #97774e77;
  font-size: 8px;
}
.pass-monogram {
  position: absolute;
  right: 15px;
  top: 19px;
  font: 150px/1 var(--serif);
  opacity: 0.11;
  pointer-events: none;
  transform: rotate(-15deg);
}
.society-pass-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 23px 0 18px;
}
.society-pass-bottom > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.society-pass-bottom b {
  font: 37px var(--serif);
}
.society-pass-bottom span {
  font-size: 9px;
}
.society-pass-bottom > .icon {
  width: 18px;
}
.society-pass .progress {
  background: #9c7c4d40;
  height: 2px;
}
.society-pass .progress > span {
  background: #795729;
}
.society-pass > p {
  font-size: 8px;
  margin-top: 8px;
}
.me-quick {
  display: flex;
  justify-content: space-around;
  padding: 24px 0 22px;
  gap: 7px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.me-quick button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  min-width: 75px;
  min-height: 49px;
}
.me-quick .icon {
  width: 21px;
  height: 21px;
  color: #7f6749;
}
.reserve-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px;
  background: #eee8df;
  border-radius: 12px;
  width: 100%;
  text-align: left;
}
.reserve-inline > div {
  display: grid;
  gap: 5px;
}
.reserve-inline .micro {
  font-size: 8px;
  color: #8f7b62;
}
.reserve-inline strong {
  font: 20px var(--serif);
}
.reserve-inline > span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
}
.reserve-inline .icon {
  width: 16px;
}
.membership-inline {
  padding: 20px 0 8px;
  display: flex;
  gap: 14px;
  width: 100%;
  text-align: left;
  align-items: center;
}
.membership-inline .atelier-symbol {
  font-size: 49px;
  color: #9e8159;
}
.membership-inline .micro {
  font-size: 7px;
  color: #987b56;
}
.membership-inline h3 {
  font-size: 27px;
  margin: 5px 0;
}
.membership-inline p {
  font-size: 10px;
  color: #a08d75;
}
.membership-inline > .icon {
  width: 16px;
  margin-left: auto;
}
.me-membership-note {
  font-size: 9px;
  line-height: 1.75;
  color: #a49784;
  border-bottom: 1px solid var(--line);
  padding: 4px 0 19px;
}
.native-menu-list {
  margin: 8px 0;
}
.native-menu-list button {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  min-height: 57px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  width: 100%;
  font-size: 11px;
}
.native-menu-list button > .icon:first-child {
  width: 18px;
  color: #96846d;
}
.native-menu-list button > .icon:last-child {
  width: 14px;
  margin-left: auto;
  color: #b0a18e;
}
.me-guest {
  padding: 23px 0 0;
}
.me-guest h3 {
  font-size: 28px;
}
.me-guest p {
  font-size: 11px;
  line-height: 1.7;
  color: #a39179;
  margin-top: 10px;
}
.phone-page .plan-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 13px;
  margin: 0 -20px;
  padding: 5px 20px 18px;
  scrollbar-width: none;
  max-width: calc(100% + 40px);
}
.phone-page .plan-card {
  width: 305px;
  min-width: 305px;
  border-radius: 16px;
  padding: 23px;
  scroll-snap-align: center;
}
.phone-page .plan-card .num {
  font-size: 63px;
}
.phone-page .plan-card h3 {
  font-size: 35px;
}
.phone-page .plan-card .price {
  font-size: 21px;
}
.phone-page .plan-card .pill {
  font-size: 8px;
  max-width: 107px;
}
.phone-page .plan-card .eyebrow {
  font-size: 9px;
}
.phone-page .plan-card .check-list {
  min-height: 180px;
}
.phone-page .me-card,
.phone-page .wallet-card {
  border-radius: 15px;
  padding: 23px;
}
.phone-page .wallet-card .amount {
  font-size: 36px;
}
.phone-page .topup-grid {
  grid-template-columns: 1fr;
}
.passport-v2 {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: white;
  margin-top: 22px;
}
.passport-photo {
  height: 290px;
  position: relative;
}
.passport-photo > .hair-photo {
  height: 100%;
  width: 100%;
  aspect-ratio: auto;
}
.passport-photo > .pill {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #fffaf0db;
  border: 0;
  padding: 6px 10px;
}
.passport-v2-copy {
  padding: 20px;
}
.passport-v2-copy > .micro {
  font-size: 8px;
  color: #a18b70;
}
.passport-v2-copy h2 {
  font-size: 34px;
  margin: 8px 0 18px;
}
.phone-page .passport-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin: 0 0 18px;
  padding: 0;
}
.phone-page .passport-data label {
  font-size: 8px;
  color: #a08b71;
  display: block;
  margin-bottom: 6px;
}
.phone-page .passport-data span {
  font-size: 11px;
}
.passport-empty-photo {
  height: 250px;
  border-radius: 13px;
  overflow: hidden;
  margin: 22px 0;
}
.phone-page .passport-v2 .disclosure p {
  font-size: 11px;
}
/* Login is a phone flow too, including the custom numeric keypad. */
.phone-auth-body .auth-shell {
  display: block;
  min-height: 0;
  background: transparent;
}
.phone-auth-body .auth-art {
  display: none;
}
.phone-auth-body .auth-form {
  padding: 26px 24px 30px;
  max-width: none;
  width: 100%;
  min-height: 0;
  margin: 0;
}
.phone-auth-body .auth-form .mobile-logo {
  display: none;
}
.phone-auth-body .page-head {
  margin: 0 0 23px;
}
.phone-auth-body h1 {
  font-size: 41px;
  line-height: 1.06;
}
.phone-auth-body .page-head .eyebrow {
  font-size: 9px;
  margin-bottom: 10px;
}
.phone-auth-body .page-head p {
  font-size: 12px;
  line-height: 1.7;
  margin-top: 13px;
}
.phone-auth-body .page-head .back {
  display: none;
}
.phone-auth-body .social-login {
  height: 48px;
  margin-bottom: 10px;
  border-radius: 11px;
  font-size: 12px;
}
.phone-auth-body .social-login strong {
  font-size: 17px;
}
.phone-auth-body .divider {
  font-size: 10px;
  margin: 22px 0;
}
.phone-auth-body .stack {
  gap: 14px;
}
.phone-auth-body .field input {
  font-size: 16px;
  border-radius: 11px;
}
.phone-auth-body .field label {
  font-size: 11px;
}
.phone-auth-body .small {
  font-size: 10px;
}
.phone-auth-body .auth-form.center > .logo {
  width: 133px;
  margin: 7px auto 33px;
}
.phone-auth-body .notice {
  font-size: 11px;
  border-radius: 9px;
}
.phone-auth-body .pin-dots {
  margin: 28px auto;
}
.phone-auth-body .pinpad {
  max-width: 270px;
  gap: 10px;
  margin-top: 25px;
}
.phone-auth-body .pinpad button {
  border-radius: 50%;
  height: 66px;
  max-width: 66px;
  justify-self: center;
  font-size: 25px;
}
.phone-auth-body .form-error {
  font-size: 11px;
}
.device-screen .splash {
  min-height: 0;
  height: 100%;
  flex: 1;
  position: relative;
  background: #14120f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.device-screen .splash .logo {
  width: 245px;
}
.device-screen .splash .eyebrow {
  font-size: 9px;
}
.device-screen:has(.splash) {
  background: #14120f;
  color: #f7f5f1;
}
.device-screen .splash .skip {
  font-size: 10px;
  bottom: 30px;
}
/* Sheets, demo controls and internal staff surfaces. */
.overlay-shade.phone-overlay {
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 35px;
  overflow: hidden;
  background: #0d0b0970;
  backdrop-filter: blur(4px);
  z-index: 120;
}
.phone-overlay .modal {
  width: 100%;
  max-width: none;
  max-height: 89%;
  padding: 26px 21px 30px;
  border-radius: 25px 25px 0 0;
  border: 0;
  background: #faf9f6;
  box-shadow: 0 -10px 40px #09070425;
  color: #241c14;
  font:
    13px/1.65 Manrope,
    Arial,
    sans-serif;
  overscroll-behavior: contain;
  scrollbar-width: none;
  animation: sheet-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.phone-overlay .modal:before {
  content: '';
  width: 34px;
  height: 4px;
  background: #cfc5b6;
  border-radius: 5px;
  display: block;
  margin: -15px auto 23px;
}
.phone-overlay .modal h2 {
  font-size: 33px;
  line-height: 1.05;
}
.phone-overlay .modal h3 {
  font-size: 26px;
}
.phone-overlay .modal-head {
  align-items: start;
  gap: 14px;
  margin-bottom: 19px;
}
.phone-overlay .modal-head .icon-btn {
  width: 29px;
  height: 29px;
  border: 0;
  background: #ede6db;
  min-width: 29px;
}
.phone-overlay .modal-head .icon {
  width: 17px;
}
.phone-overlay .modal p {
  font-size: 12px;
  line-height: 1.75;
}
.phone-overlay .modal .notice {
  font-size: 11px;
  padding: 13px;
  border-radius: 9px;
}
.phone-overlay .modal .btn {
  border-radius: 10px;
  font-size: 12px;
}
.phone-overlay .modal .field input {
  border-radius: 10px;
  font-size: 16px;
}
.phone-overlay .modal .grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.phone-overlay .modal .screen-grid {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.phone-overlay .modal .screen-grid button {
  font-size: 9px;
  min-height: 48px;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  gap: 6px;
}
.phone-overlay .modal .screen-grid button > span {
  font-size: 9px;
  min-width: 18px;
}
.phone-overlay .modal .service-info strong {
  font-size: 12px;
}
.phone-overlay .modal .select-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 10px;
  border-radius: 10px;
}
.phone-overlay .modal .service-info {
  flex: 1;
}
.phone-overlay .modal .service-info p {
  font-size: 10px;
  margin-top: 5px;
}
.phone-overlay .modal .select-card .price {
  font-size: 10px;
}
.phone-overlay .modal .check {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.phone-overlay .modal .segmented {
  gap: 6px;
}
.phone-overlay .modal .segmented .chip {
  font-size: 10px;
  padding: 8px 10px;
}
.phone-overlay .modal .section-top {
  margin: 23px 0 15px;
}
.phone-overlay .modal .section-top h3 {
  font-size: 26px;
}
.phone-overlay .modal .space-modal-image {
  aspect-ratio: 1;
  border-radius: 10px;
}
.experience-switch,
.demo-scenarios {
  display: grid;
  gap: 0;
}
.experience-switch button,
.demo-scenarios button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  border-bottom: 1px solid #e4dbce;
  padding: 13px 0;
  font-size: 12px;
  min-height: 46px;
}
.experience-switch .icon,
.demo-scenarios .icon {
  width: 17px;
}
.phone-coach {
  border-radius: 35px;
}
.phone-coach .coach-box {
  border-radius: 16px;
  padding: 23px;
  background: #fffaf1;
  max-width: none;
  min-height: 225px;
}
.phone-coach .coach-box h3 {
  font-size: 29px;
}
.phone-coach .coach-box p {
  font-size: 12px;
}
.phone-coach .coach-box .eyebrow {
  font-size: 10px;
}
.staff-theme .device-context,
.staff-theme .device-index {
  color: #493d2d;
}
.staff-theme .device-screen {
  background: #14120f;
  color: #ede3d5;
  --line: #3b3226;
  --muted: #a99a83;
  --paper: #14120f;
  --white: #1d1913;
}
.staff-theme .phone-toolbar {
  border-color: #332b21;
}
.staff-theme .native-tabbar,
.staff-theme .native-action,
.staff-theme .prototype-footnote {
  background: #1b1711;
  color: #e8dac5;
  border-color: #3e3224;
}
.staff-theme .native-tabbar button {
  color: #8b7b64;
}
.staff-theme .native-tabbar button.selected {
  color: #e8cda3;
}
.staff-theme .phone-page .card {
  background: #201a12;
  border-color: #3f3223;
}
.staff-theme .phone-page .stat {
  padding: 15px 12px;
  border-radius: 12px;
}
.staff-theme .phone-page .stat .value {
  font-size: 28px;
}
.staff-theme .phone-page .stat .label {
  font-size: 9px;
}
.staff-theme .phone-page .stats {
  gap: 8px;
}
.staff-theme .phone-page .grid.three:has(.stat) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.staff-theme .phone-page .queue-card {
  border-radius: 12px;
  padding: 17px;
}
.staff-theme .phone-page .queue-card h3 {
  font-size: 27px;
}
.staff-theme .phone-page .queue-card p {
  font-size: 11px;
}
.staff-theme .phone-page .btn {
  background: #d7bd98;
  color: #1d160e;
  border-color: #d7bd98;
}
.staff-theme .phone-page .btn.outline {
  background: transparent;
  color: #d7bd98;
}
.staff-theme .device-home-indicator {
  color: #e8dac5;
}
.staff-theme .phone-auth-body .auth-form {
  background: transparent;
}
.staff-theme .device-status {
  color: #ede3d5;
}
.staff-theme .phone-page .field input,
.staff-theme .phone-page .field select,
.staff-theme .phone-page .field textarea {
  background: #211a12;
  color: #e7d8c1;
  border-color: #55432e;
}
.staff-theme .phone-overlay .modal {
  background: #1d1812;
  color: #e6d5bd;
}
.staff-theme .phone-overlay .modal p {
  color: #bda78a;
}
.staff-theme .phone-page .notice {
  background: #302517;
  color: #d3bfa3;
}
.staff-theme .phone-page .avatar {
  background: #382a1b;
  border-color: #594129;
  color: #debb8a;
}
.staff-theme .device-context > .logo {
  filter: none;
}
@keyframes native-enter {
  from {
    opacity: 0.65;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sheet-in {
  from {
    transform: translateY(35px);
    opacity: 0.5;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (min-width: 601px) and (max-height: 690px) {
  .device-stage {
    --phone-height: calc(100dvh - 24px);
    padding: 12px 35px;
  }
  .device-frame {
    min-height: 440px;
  }
  .device-context > .eyebrow {
    margin-top: 35px;
  }
  .device-context-nav {
    margin: 25px 0;
  }
  .device-context h2 {
    font-size: 41px;
  }
}
@media (max-width: 1100px) {
  .device-stage {
    grid-template-columns: minmax(160px, 250px) 418px;
    gap: 40px;
  }
  .device-index {
    display: none;
  }
  .webnav nav {
    gap: 17px;
  }
  .webnav nav a {
    font-size: 12px;
  }
  .team-web-grid {
    gap: 17px;
  }
  .team-caption h3 {
    font-size: 31px;
  }
  .space-large {
    min-height: 590px;
  }
}
@media (max-width: 800px) {
  .device-stage {
    display: flex;
    justify-content: center;
    padding: 24px;
    --phone-height: calc(100dvh - 48px);
  }
  .device-context {
    display: none;
  }
  .team-web-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 16px;
  }
  .team-caption {
    padding-top: 15px;
  }
  .team-caption h3 {
    font-size: 33px;
  }
  .team-caption p {
    font-size: 10px;
  }
  .team-meta {
    font-size: 10px;
  }
  .space-layout {
    gap: 13px;
    grid-template-columns: 1fr;
  }
  .space-large {
    min-height: 470px;
  }
  .space-stack {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    height: 240px;
    gap: 13px;
  }
  .space-caption {
    left: 25px;
    bottom: 28px;
  }
  .space-caption h3 {
    font-size: 42px;
  }
  .space-stack button > span {
    font-size: 10px;
    left: 14px;
    right: 14px;
  }
  .craft-section {
    display: block;
  }
  .craft-copy {
    padding-top: 35px;
  }
  .craft-copy h2 {
    font-size: 51px;
  }
  .craft-copy p {
    max-width: 100%;
  }
  .team-section .image-caption {
    font-size: 9px;
    text-align: left;
  }
  .phone-page .grid.three {
    grid-template-columns: 1fr;
  }
  .phone-page .grid.two.keep-two {
    grid-template-columns: 1fr 1fr;
  }
  .phone-page .two-col {
    grid-template-columns: 1fr;
  }
  .phone-page .card {
    padding: 20px;
  }
  .web .demo-dock {
    bottom: 15px;
  }
}
@media (max-width: 600px) {
  body.mode-app {
    background: #faf9f6;
  }
  .device-stage {
    padding: 0;
    display: block;
    height: 100dvh;
    min-height: 0;
    background: none;
  }
  .device-frame {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #faf9f6;
  }
  .device-frame:before,
  .device-frame:after {
    display: none;
  }
  .device-screen {
    border-radius: 0;
  }
  .device-context,
  .device-index {
    display: none;
  }
  .device-home-indicator {
    height: max(17px, env(safe-area-inset-bottom));
  }
  .overlay-shade.phone-overlay,
  .phone-coach {
    border-radius: 0;
  }
  .mode-app #toast {
    bottom: 115px;
    max-width: calc(100vw - 44px);
  }
  .device-status {
    padding-top: 10px;
    height: 31px;
  }
  .phone-page .plan-card {
    width: min(305px, calc(100vw - 55px));
    min-width: min(305px, calc(100vw - 55px));
  }
  .webnav .logo {
    width: 135px;
  }
  .webnav nav {
    gap: 8px;
  }
  .webnav nav > button:not(.btn) {
    font-size: 11px;
  }
  .webnav .btn {
    font-size: 10px;
    min-height: 40px;
    padding: 9px 12px;
  }
  .hero-copy {
    left: 24px;
    width: calc(100% - 48px);
    bottom: 23%;
  }
  .hero h1 {
    font-size: clamp(62px, 13vw, 82px);
  }
  .hero {
    min-height: 670px;
  }
  .hero-footer {
    left: 24px;
    right: 24px;
    font-size: 8px;
  }
  .hero-copy p {
    font-size: 13px;
  }
  .hero-copy .eyebrow {
    font-size: 9px;
  }
  .hero-copy .btn {
    font-size: 12px;
  }
  .space-large {
    min-height: 440px;
  }
  .space-stack {
    height: 205px;
  }
  .team-view {
    width: 32px;
    height: 32px;
    bottom: 12px;
    right: 12px;
  }
  .team-view .icon {
    width: 17px;
  }
  .portrait-badge {
    top: 10px;
    left: 10px;
    font-size: 7px;
  }
  .team-caption .micro {
    font-size: 8px;
  }
  .team-caption h3 {
    font-size: 30px;
  }
  .team-meta {
    margin-top: 10px;
  }
  .web .demo-dock {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    white-space: nowrap;
    gap: 0;
  }
  .web .demo-dock button {
    font-size: 11px;
  }
}
@media (max-width: 360px) {
  .phone-page {
    padding-left: 16px;
    padding-right: 16px;
  }
  .phone-toolbar {
    padding: 0 14px;
  }
  .native-action {
    padding-left: 14px;
    padding-right: 14px;
    gap: 8px;
  }
  .native-action .btn {
    min-width: 130px;
    font-size: 11px;
  }
  .native-action strong {
    font-size: 12px;
  }
  .native-tabbar button {
    min-width: 53px;
  }
  .home-section-title h2 {
    font-size: 24px;
  }
  .mobile-home-intro h1 {
    font-size: 36px;
  }
  .native-tier strong {
    font-size: 10px;
  }
  .native-tier b {
    font-size: 10px;
  }
  .profile-cover {
    height: 360px;
  }
  .profile-works .hair-photo {
    height: 187px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero #liquid-hero {
    display: none;
  }
  .photo-v2,
  .device-screen *,
  .phone-overlay * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.phone-auth-body .keypad {
  max-width: 260px;
  gap: 13px;
  margin-top: 20px;
}
.phone-auth-body .keypad button {
  width: 66px;
  height: 60px;
  min-height: 60px;
  justify-self: center;
  font-size: 24px;
}
.phone-auth-body .keypad button.small {
  font-size: 12px;
}
.phone-auth-body .otp-dots {
  margin: 28px 0;
}
.phone-auth-body .otp-dots span {
  width: 46px;
  height: 53px;
  font-size: 27px;
}
.phone-page .disclosure {
  border-left: 0;
  border-right: 0;
  background: transparent;
  border-bottom: 0;
}
.staff-theme .phone-page .grid.three:has(.stat) .stat .value {
  font-size: 23px;
  overflow-wrap: anywhere;
}
.phone-coach {
  overflow: hidden;
  background: transparent;
}
.coach-spotlight {
  position: absolute;
  border: 2px solid #d8b688;
  border-radius: 12px;
  box-shadow: 0 0 0 999px #14120fab;
  pointer-events: none;
}
.phone-coach .coach-box {
  z-index: 2;
}
.phone-overlay .modal .product-art {
  max-height: 250px;
}

/* Each crop keeps the original photographic proportions. */
.photo-v2 {
  background-size: cover;
  background-position: center;
}
.team-photo.q0 {
  background-image: none;
  background-position: center;
}
.team-photo.q1 {
  background-image: none;
  background-position: center;
}
.team-photo.q2 {
  background-image: none;
  background-position: center;
}
.team-photo.q3 {
  background-image: none;
  background-position: center;
}
.studio-photo.q0 {
  background-image: url('/assets/e926e148523dd939.webp');
  background-position: center;
}
.studio-photo.q1 {
  background-image: url('/assets/b21340ed0eafb8a2.webp');
  background-position: center;
}
.studio-photo.q2 {
  background-image: url('/assets/72242dc4a7f7b53a.webp');
  background-position: center;
}
.studio-photo.q3 {
  background-image: url('/assets/f42d458ae4cd7dbb.webp');
  background-position: center;
}
.rituals-photo.q0 {
  background-image: url('/assets/356542c237a58be6.webp');
  background-position: center;
}
.rituals-photo.q1 {
  background-image: none;
  background-position: center;
}
.rituals-photo.q2 {
  background-image: none;
  background-position: center;
}
.rituals-photo.q3 {
  background-image: url('/assets/1146d55e7f06446f.webp');
  background-position: center;
}

html[lang='vi'] .hero h1 {
  font-size: clamp(62px, 7.2vw, 113px);
  line-height: 1.04;
}
html[lang='vi'] .device-context h2 {
  font-size: 44px;
  line-height: 1.13;
}
html[lang='vi'] .mobile-home-intro h1 {
  font-size: 37px;
}
html[lang='vi'] .home-cover-copy h2 {
  font-size: 35px;
  line-height: 1.12;
}
html[lang='vi'] .phone-page .home-section-title h2 {
  font-size: 25px;
}
html[lang='vi'] .web .section-heading h2 {
  line-height: 1.12;
}
@media (max-width: 600px) {
  html[lang='vi'] .hero h1 {
    font-size: clamp(58px, 12vw, 80px);
  }
}

/* Shared additions: empty image slots, saved looks, Journal, product orders. */
.image-slot {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e9e6e0 !important;
  background-image: none !important;
  min-width: 0;
}
.image-slot > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.image-slot > span {
  font: 12px/1.5 var(--sans);
  color: #a59b8b;
  text-align: center;
  padding: 14px;
  letter-spacing: 0.02em;
}
.image-slot.is-empty:after {
  content: '';
  position: absolute;
  width: 24px;
  height: 1px;
  background: #b7ad9e;
  top: calc(50% - 20px);
  left: calc(50% - 12px);
}
.image-slot.has-image {
  background: #e9e6e0;
}
.hair-tile {
  position: relative;
}
.look-open {
  display: block;
  text-align: left;
  padding: 0;
  width: 100%;
}
.look-photo-wrap {
  position: relative;
  overflow: hidden;
}
.save-look {
  position: absolute;
  right: 11px;
  top: 11px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #faf8f1ed;
  color: #7e7060;
  border: 1px solid #e1d9cd;
  z-index: 3;
  transition:
    background 0.18s,
    transform 0.18s;
  box-shadow: 0 2px 8px #17120b05;
}
.save-look .icon {
  width: 19px;
  height: 19px;
}
.save-look:hover {
  transform: scale(1.05);
}
.save-look.saved {
  background: #211b14;
  border-color: #211b14;
  color: #e3c59e;
}
.save-look.saved .icon {
  fill: currentColor;
  stroke-width: 1.2;
}
.save-look.detail-save {
  top: 18px;
  right: 18px;
}
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.journal-card {
  padding: 0;
  text-align: left;
  display: block;
  min-width: 0;
  width: 100%;
}
.journal-photo {
  aspect-ratio: 1.35;
  overflow: hidden;
  margin-bottom: 21px;
}
.journal-photo .photo-v2 {
  transition: transform 0.5s;
}
.journal-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.journal-card:hover .photo-v2 {
  transform: scale(1.03);
}
.journal-card > .micro {
  font-size: 12px;
  color: #8d7b65;
}
.journal-card h3 {
  font-size: 34px;
  line-height: 1.16;
  margin: 13px 0;
}
.journal-card p {
  font-size: 14px;
  color: #807263;
  line-height: 1.7;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.review-card {
  background: #efe9df;
  padding: 30px;
  text-align: left;
  min-width: 0;
}
.review-stars {
  font-size: 15px;
  letter-spacing: 4px;
  color: #957249;
}
.review-card blockquote {
  font: 25px/1.5 var(--serif);
  margin: 20px 0 30px;
}
.review-card > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.review-card strong {
  font-size: 14px;
  font-weight: 600;
}
.review-card > div > span {
  font-size: 12px;
  color: #958570;
}
.content-sample-note {
  font-size: 12px !important;
  line-height: 1.6;
  color: #9b8c77;
  margin: 14px 20px 0;
}
.article-page {
  max-width: 940px;
  margin: 0 auto;
}
.article-hero {
  height: 440px;
  overflow: hidden;
}
.article-copy {
  max-width: 700px;
  margin: 0 auto;
  padding: 45px 25px;
}
.article-copy .micro {
  font-size: 12px;
  color: #8e785c;
}
.article-copy h1 {
  margin: 20px 0;
  font-size: 64px;
  line-height: 1.13;
}
.article-copy > p {
  font-size: 17px;
  line-height: 1.9;
  margin: 23px 0;
  color: #6d6254;
}
.article-copy > .article-intro {
  font-size: 21px;
  color: #332a1f;
}
.article-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid #dcd2c4;
  padding-top: 30px;
  margin-top: 38px;
}
.article-end .logo {
  width: 105px;
}
.product-order-list {
  display: grid;
  gap: 22px;
}
.product-order-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 23px;
  background: var(--white);
  min-width: 0;
}
.order-product-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 0;
  text-align: left;
  width: 100%;
  border-bottom: 1px solid var(--line);
}
.order-product-row .product-art {
  width: 77px;
  height: 99px;
  border-radius: 7px;
  flex-shrink: 0;
}
.order-product-row .product-art .pill {
  display: none;
}
.order-product-row > span:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-product-row strong {
  font-size: 14px;
  font-weight: 600;
}
.order-product-row small {
  font-size: 12px;
  color: var(--muted);
}
.order-product-row > .price {
  font-size: 13px;
}
.order-actions {
  display: flex;
  gap: 10px;
  padding-top: 12px;
}
.order-actions .btn {
  flex: 1;
  min-width: 0;
}
.menu-count {
  font: 12px var(--mono);
  color: #9a856b;
  margin-left: auto;
}
.native-menu-list .menu-count + .icon {
  margin-left: 0;
}
.personal-kit-section {
  grid-column: 1/-1;
  padding: 34px 0;
}
.personal-kit-section > .eyebrow {
  color: #9f825d;
  font-size: 12px;
}
.personal-kit-section h2 {
  font-size: 42px;
  line-height: 1.2;
  margin: 14px 0 25px;
}
.personal-kit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.personal-kit-grid > div {
  background: #eee8de;
  padding: 22px;
  border: 1px solid #e4d9c9;
  min-width: 0;
}
.personal-kit-grid .micro {
  color: #b08f64;
  font-size: 12px;
}
.personal-kit-grid h3 {
  font-size: 23px;
  line-height: 1.4;
  margin-top: 10px;
}
.quarterly-kit {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 25px;
  background: #1c1813;
  color: #ead9c1;
  padding: 25px;
}
.kit-product-photo {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
}
.quarterly-kit h3 {
  font-size: 28px;
  line-height: 1.3;
  margin: 12px 0;
}
.quarterly-kit p {
  font-size: 13px;
  color: #b8a387;
}
.quarterly-kit .micro {
  font-size: 11px;
}
.image-manager {
  display: grid;
  gap: 18px;
  margin-top: 25px;
}
.image-manager label {
  display: grid;
  gap: 8px;
}
.image-manager label > span {
  font: 12px var(--mono);
  color: #8e775a;
}
.image-manager input {
  max-width: 100%;
  font-size: 12px;
}
.demo-tools {
  border-top: 1px solid #e4d9ca;
  padding-top: 20px;
  margin-top: 22px;
}
.demo-tools > summary {
  font-size: 13px;
  cursor: pointer;
  color: #8c785f;
  min-height: 38px;
}
/* Three booking steps. No hair-condition field, pre-book upsells or estimate. */
.chemical-mark {
  display: grid;
  place-items: center;
  background: #ece3d7;
  width: 43px;
  height: 43px;
  flex-shrink: 0;
  border-radius: 8px;
  color: #9e805a;
}
.barber-choices-v3 .home-section-title {
  margin: 0 0 18px;
}
.barber-choice-list {
  display: grid;
  gap: 10px;
}
.barber-choice {
  display: flex;
  align-items: center;
  border: 1px solid #e2d9cb;
  background: #fffdf9;
  padding: 11px;
  border-radius: 13px;
  gap: 10px;
}
.barber-choice.selected {
  border-color: #97754c;
  background: #f0e8db;
}
.barber-choice-profile {
  display: flex;
  gap: 14px;
  align-items: center;
  text-align: left;
  padding: 0;
  flex: 1;
  min-width: 0;
}
.barber-choice-profile .photo-v2 {
  width: 68px;
  height: 83px;
  flex-shrink: 0;
  border-radius: 7px;
}
.barber-choice-profile .image-slot > span {
  font-size: 10px;
  padding: 5px;
}
.barber-choice-profile > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.barber-choice-profile strong {
  font: 27px/1.2 var(--serif);
}
.barber-choice-profile small {
  font-size: 12px;
  color: #8c7a64;
}
.barber-choice-profile .profile-link {
  font-size: 12px;
  color: #876338;
  margin-top: 4px;
}
.profile-link .icon {
  width: 13px;
  height: 13px;
}
.barber-choice-select {
  display: grid;
  gap: 9px;
  place-items: center;
  flex-shrink: 0;
  min-width: 81px;
  min-height: 75px;
  padding: 5px;
}
.barber-choice-select > span {
  font: 12px var(--mono);
}
.barber-choice-select > i {
  display: block;
  padding: 6px 10px;
  border: 1px solid #cabcaa;
  border-radius: 7px;
  font-style: normal;
  font-size: 11px;
  min-width: 49px;
}
.barber-choice.selected .barber-choice-select > i {
  background: #2b2115;
  color: #f3e5d1;
  border-color: #2b2115;
}
.confirmation-v3 {
  text-align: center;
  margin-bottom: 28px;
}
.confirmation-v3 .success-symbol {
  margin: 0 auto 20px;
}
.confirmation-v3 .page-head {
  margin-bottom: 0;
}
.booking-confirm-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 35px;
  align-items: start;
}
.post-booking-offers {
  background: #eee8dd;
  padding: 30px;
  border-radius: 15px;
}
.post-booking-offers > .eyebrow {
  font-size: 11px;
  color: #9b7f59;
}
.post-booking-offers > h2 {
  font-size: 40px;
  line-height: 1.13;
  margin: 17px 0;
}
.post-booking-offers > p {
  font-size: 14px;
  line-height: 1.8;
  color: #907b60;
}
.post-offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 23px;
}
.post-offer {
  background: #fffaf2;
  overflow: hidden;
  border: 1px solid #e0d5c4;
  border-radius: 10px;
  min-width: 0;
}
.post-offer > .photo-v2 {
  height: 136px;
}
.post-offer > div:last-child {
  padding: 15px;
}
.post-offer h3 {
  font-size: 25px;
  margin-bottom: 9px;
}
.post-offer p {
  font-size: 12px;
  color: #9c886d;
  line-height: 1.65;
  min-height: 43px;
  margin-bottom: 12px;
}
.post-offer .price {
  font-size: 13px;
}
.post-booking-offers .product-tile {
  min-width: 0;
}
.post-booking-offers .disclosure {
  background: transparent;
}
.post-booking-offers .disclosure > div {
  padding: 5px 0;
}
.post-booking-offers .disclosure summary {
  padding: 18px 0;
}
.post-booking-offers .disclosure p {
  font-size: 13px;
}
/* Phone: persistent G-Point header and Society greeting. */
.app-fixed-header {
  flex-shrink: 0;
  background: #faf9f6;
  z-index: 5;
  border-bottom: 1px solid #e9e2d8;
}
.app-brand-row {
  height: 58px;
  display: flex;
  align-items: center;
  padding: 0 17px;
  gap: 10px;
}
.app-brand-row > button:first-child {
  padding: 0;
  margin-right: auto;
  min-height: 44px;
}
.app-brand-row .logo {
  width: 96px;
}
.gpoint-fixed {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border: 1px solid #dacbb4;
  background: #efe5d5;
  color: #735737;
  border-radius: 40px;
  white-space: nowrap;
  min-height: 36px;
}
.gpoint-fixed > span {
  font-size: 15px;
}
.gpoint-fixed > b {
  font: 500 14px var(--mono);
}
.gpoint-fixed small {
  font-size: 11px;
}
.app-header-icons {
  display: flex;
  align-items: center;
  gap: 2px;
}
.app-header-icons > button {
  padding: 0;
  width: 32px;
  height: 43px;
  font-size: 22px;
  position: relative;
}
.app-header-icons .icon {
  width: 20px;
}
.app-header-icons sup {
  position: absolute;
  right: 0;
  top: 2px;
  font-size: 9px;
  background: #282015;
  color: white;
  border-radius: 10px;
  min-width: 14px;
  padding: 1px;
}
.app-page-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 43px;
  border-top: 1px solid #ede7df;
  padding: 0 17px;
}
.app-page-row > button:first-child {
  padding: 0;
  width: 27px;
  height: 40px;
}
.app-page-row > span {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-page-row > .btn {
  margin-left: auto;
}
.phone-page .barber-choice-profile .photo-v2 {
  width: 54px;
  height: 72px;
}
.phone-page .barber-choice-profile strong {
  font-size: 26px;
}
.phone-page .barber-choice-profile small {
  font-size: 10px;
}
.phone-page .barber-choice-profile .profile-link {
  font-size: 11px;
}
.phone-page .barber-choice-select {
  min-width: 75px;
}
.phone-page .barber-choice-select > span {
  font-size: 11px;
}
.phone-page .barber-choice {
  gap: 7px;
  padding: 10px;
}
.phone-page .barber-choices-v3 h2 {
  font-size: 29px;
}
.phone-page .booking-chapter {
  margin: 25px 0;
}
.phone-page .service-list .service-info strong {
  font-size: 15px;
}
.phone-page .service-list .service-info p {
  font-size: 12px;
}
.phone-page .chemical-picker strong {
  font-size: 13px;
}
.phone-page .chemical-picker small {
  font-size: 11px;
}
.phone-page .booking-chapter > .small {
  font-size: 12px;
}
.native-action.without-estimate {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 18px 5px;
}
.native-action.without-estimate > div {
  min-width: 0;
  display: block;
  text-align: center;
  order: 2;
}
.native-action.without-estimate .micro {
  font-size: 10px;
}
.native-action.without-estimate > .btn {
  width: 100%;
  max-width: none;
  min-height: 48px;
  flex: auto;
  font-size: 13px;
  order: 1;
}
.society-pass {
  margin-top: 0;
}
.society-greeting {
  position: relative;
  z-index: 1;
  margin-top: 26px;
}
.society-greeting > .micro {
  font-size: 9px;
  letter-spacing: 0.08em;
  opacity: 0.8;
}
.society-greeting h1 {
  font-size: 47px !important;
  line-height: 1.12;
  margin: 9px 0 12px;
}
.society-greeting p {
  font-size: 12px;
  line-height: 1.7;
  max-width: 245px;
}
.society-pass-bottom {
  margin-top: 28px;
}
.society-pass .pass-monogram {
  top: 90px;
  font-size: 200px;
}
.phone-page .society-pass > .flex .micro {
  font-size: 10px;
}
.phone-page .society-pass .pill {
  font-size: 10px;
}
.phone-page .society-pass > p {
  font-size: 10px;
}
.phone-page .society-pass-bottom span {
  font-size: 12px;
}
.phone-page .native-menu-list button {
  font-size: 13px;
  min-height: 59px;
}
.phone-page .home-journal .home-section-title h2 {
  font-size: 28px;
}
.journal-carousel .journal-card {
  width: 252px;
  flex: none;
}
.phone-page .journal-photo {
  height: 176px;
  aspect-ratio: auto;
  border-radius: 11px;
  margin-bottom: 13px;
}
.phone-page .journal-card > .micro {
  font-size: 10px;
  letter-spacing: 0.02em;
}
.phone-page .journal-card h3 {
  font-size: 28px;
  line-height: 1.17;
  margin: 10px 0;
}
.phone-page .journal-card p {
  font-size: 12px;
  line-height: 1.7;
}
.review-carousel .review-card {
  width: 295px;
  flex: none;
  padding: 24px;
  border-radius: 13px;
}
.phone-page .review-stars {
  font-size: 12px;
  letter-spacing: 3px;
}
.phone-page .review-card blockquote {
  font-size: 24px;
  line-height: 1.4;
  margin: 18px 0 22px;
}
.phone-page .review-card strong {
  font-size: 13px;
}
.phone-page .review-card > div > span {
  font-size: 11px;
}
.phone-page .journal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.phone-page .article-page {
  margin: -24px -20px -28px;
  max-width: calc(100% + 40px);
}
.phone-page .article-hero {
  height: 285px;
}
.phone-page .article-copy {
  padding: 28px 22px;
}
.phone-page .article-copy h1 {
  font-size: 40px;
  line-height: 1.15;
  margin: 14px 0;
}
.phone-page .article-copy .micro {
  font-size: 10px;
}
.phone-page .article-copy > p {
  font-size: 15px;
  line-height: 1.9;
  margin: 21px 0;
}
.phone-page .article-copy > .article-intro {
  font-size: 17px;
}
.phone-page .article-end {
  display: grid;
  gap: 20px;
}
.phone-page .article-end > .btn {
  width: 100%;
}
.phone-page .product-order-card {
  padding: 17px;
}
.phone-page .product-order-card > .flex .micro {
  font-size: 10px;
}
.phone-page .product-order-card .pill {
  font-size: 10px;
}
.phone-page .order-product-row .product-art {
  width: 63px;
  height: 86px;
}
.phone-page .order-product-row strong {
  font-size: 12px;
}
.phone-page .order-product-row small {
  font-size: 11px;
}
.phone-page .order-product-row > .price {
  font-size: 11px;
}
.phone-page .order-actions .btn {
  font-size: 12px;
}
.phone-page .booking-confirm-grid {
  grid-template-columns: 1fr;
  gap: 26px;
}
.phone-page .post-booking-offers {
  padding: 21px 16px;
}
.phone-page .post-booking-offers > h2 {
  font-size: 32px;
  line-height: 1.2;
}
.phone-page .post-booking-offers > p {
  font-size: 13px;
}
.phone-page .post-booking-offers > .eyebrow {
  font-size: 9px;
}
.phone-page .post-offer-grid {
  gap: 10px;
}
.phone-page .post-offer > div:last-child {
  padding: 12px;
}
.phone-page .post-offer > .photo-v2 {
  height: 115px;
}
.phone-page .post-offer h3 {
  font-size: 25px;
}
.phone-page .post-offer p {
  font-size: 11px;
  line-height: 1.65;
  min-height: 54px;
}
.phone-page .post-offer .btn {
  font-size: 11px;
  padding: 9px 5px;
  min-height: 44px;
}
.phone-page .post-offer .price {
  font-size: 11px;
}
.phone-page .post-booking-offers .disclosure summary {
  font-size: 12px;
}
.phone-page .personal-kit-section {
  padding: 25px 0 5px;
}
.phone-page .personal-kit-section h2 {
  font-size: 32px;
  line-height: 1.2;
}
.phone-page .personal-kit-section > .eyebrow {
  font-size: 10px;
}
.phone-page .personal-kit-grid {
  gap: 9px;
}
.phone-page .personal-kit-grid > div {
  padding: 15px 12px;
  border-radius: 10px;
}
.phone-page .personal-kit-grid h3 {
  font: 500 13px/1.65 var(--sans);
}
.phone-page .personal-kit-grid .micro {
  font-size: 10px;
}
.phone-page .quarterly-kit {
  display: grid;
  padding: 20px;
  gap: 18px;
  border-radius: 12px;
}
.phone-page .kit-product-photo {
  height: 160px;
  width: 100%;
}
.phone-page .quarterly-kit h3 {
  font-size: 27px;
}
.phone-page .quarterly-kit p {
  font-size: 12px;
  line-height: 1.8;
}
.phone-page .quarterly-kit .micro {
  font-size: 9px;
}
.phone-page .plan-card .check-list {
  min-height: 0;
}
.phone-page .plan-card .check-list li {
  font-size: 13px;
}
.phone-page .plan-card {
  width: 318px;
  min-width: 318px;
}
.phone-page .home-section-title > button {
  font-size: 12px;
}
.phone-page .team-carousel .team-caption p {
  font-size: 11px;
}
.phone-page .team-carousel .team-meta {
  font-size: 11px;
}
.phone-page .look-carousel .hair-tile p {
  font-size: 11px;
}
.phone-page .hair-tile .circle-arrow {
  width: 28px;
  height: 28px;
}
.phone-page .look-photo-wrap {
  border-radius: 11px;
}
.phone-page .native-next-visit > .micro {
  font-size: 10px;
}
.staff-theme .app-fixed-header {
  background: #14120f;
  border-color: #3c3022;
}
.staff-theme .app-page-row {
  border-color: #3c3022;
}
.staff-theme .app-brand-row > .micro {
  font-size: 11px;
  color: #c3a67e;
}
.staff-theme .phone-page .barber-choice {
  background: #211a12;
  color: #eedcc4;
}
.staff-theme .image-slot {
  background: #2e271e !important;
}
.staff-theme .image-slot > span {
  color: #8e7b61;
}
/* The Web export owns a desktop layout. It never renders the phone frame. */
body.mode-web {
  overflow: auto;
  background: #f7f5f1;
}
.web-header-v3 {
  height: 88px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 5vw;
  background: #f7f5f1;
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid #e3dacf;
  color: #2a2219;
}
.web-header-v3.over-hero {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
  color: #f6efe2;
  border-bottom: 0;
  height: 106px;
  z-index: 6;
}
.web-logo {
  padding: 0;
  flex-shrink: 0;
}
.web-logo .logo {
  width: 158px;
}
.web-header-v3 > nav {
  display: flex;
  gap: 25px;
  align-items: center;
  margin-left: auto;
}
.web-header-v3 > nav > button {
  padding: 12px 0;
  font-size: 14px;
  white-space: nowrap;
}
.web-header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}
.web-header-actions > button {
  padding: 0;
  min-width: 24px;
  min-height: 42px;
}
.web-header-actions > .gpoint-fixed {
  padding: 7px 11px;
  min-height: 36px;
}
.web-header-actions .lang-toggle {
  font: 12px var(--mono);
}
.web-header-v3.over-hero .gpoint-fixed {
  background: #f4dfbc12;
  border-color: #f6e6cf44;
  color: #ddc49d;
}
.web-header-actions sup {
  font-size: 10px;
}
.web-header-v3 .web-menu-toggle {
  display: none;
  font-size: 22px;
}
.web-portal {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.web-page {
  width: min(1160px, calc(100% - 100px));
  padding: 60px 0 80px;
  margin: auto;
  flex: 1;
}
.web-page.narrow {
  max-width: 740px;
}
.web-page .page-head {
  margin-bottom: 40px;
}
.web-page .page-head > .back {
  display: none;
}
.web-page .page-head .eyebrow {
  font-size: 12px;
  margin-bottom: 15px;
}
.web-page .page-head h1 {
  font-size: 64px;
  line-height: 1.12;
  max-width: 850px;
}
.web-page .page-head p {
  font-size: 16px;
  line-height: 1.8;
  max-width: 620px;
  margin-top: 18px;
  color: #867762;
}
.web-page .two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 42px;
  align-items: start;
}
.web-page .card {
  padding: 27px;
}
.web-page .sticky {
  position: sticky;
  top: 110px;
}
.web-page .two-col > .sticky > .btn:not(.outline) {
  display: none;
}
.web-page .disclosure {
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
.web-page .disclosure summary {
  padding: 20px 0;
}
.web-page .disclosure > div {
  padding: 0 0 20px;
}
.web-page .small {
  font-size: 14px;
  line-height: 1.7;
}
.web-page .notice {
  font-size: 14px;
  line-height: 1.8;
}
.web-page .eyebrow {
  font-size: 12px;
}
.web-page .pill {
  font-size: 12px;
}
.web-page .row {
  font-size: 15px;
}
.web-action {
  position: sticky;
  bottom: 0;
  background: #fffdf8ed;
  border-top: 1px solid #d9cbb6;
  backdrop-filter: blur(15px);
  padding: 18px max(5vw, calc((100vw - 1160px) / 2));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 36px;
  z-index: 15;
}
.web-action > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-right: auto;
  min-width: 0;
}
.web-action .micro {
  font-size: 12px;
  color: #907a5d;
}
.web-action strong {
  font: 22px var(--mono);
}
.web-action > .btn {
  min-width: 245px;
}
.web-action.without-estimate {
  max-width: 100%;
}
.web-action.without-estimate > div {
  display: block;
}
.portal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 5vw;
  gap: 20px;
  border-top: 1px solid #e0d5c7;
  color: #a08f78;
  font-size: 12px;
}
.portal-footer > span {
  font: 11px var(--mono);
}
.portal-footer > button {
  font-size: 13px;
}
.web-page .hair-photo {
  aspect-ratio: 0.8;
}
.web-page .hair-tile h3 {
  font-size: 34px;
}
.web-page .hair-tile p {
  font-size: 14px;
}
.web-page .grid.two.keep-two {
  gap: 25px;
}
.web-page .product-label h3 {
  font-size: 17px;
}
.web-page .team-sheet-grid {
  gap: 25px;
}
.web-page[data-route='barber'] {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: start;
  gap: 55px;
}
.web-page .profile-cover {
  height: 670px;
  position: sticky;
  top: 113px;
}
.web-page .profile-body {
  padding: 0;
}
.web-page .profile-stats {
  padding-top: 5px;
  padding-bottom: 26px;
}
.web-page .profile-stats strong {
  font-size: 17px;
}
.web-page .profile-stats span {
  font-size: 12px;
}
.web-page .profile-cover-copy {
  left: 35px;
  bottom: 35px;
}
.web-page .profile-cover h1 {
  font-size: 75px;
}
.web-page .profile-cover-copy .micro {
  font-size: 12px;
}
.web-page .profile-cover-copy p {
  font-size: 15px;
}
.web-page .profile-body blockquote {
  font-size: 39px;
  line-height: 1.2;
  margin: 34px 0 22px;
}
.web-page .profile-bio {
  font-size: 16px;
  line-height: 1.9;
}
.web-page .profile-works .hair-photo {
  height: 275px;
  aspect-ratio: auto;
}
.web-page .profile-care h3 {
  font-size: 29px;
}
.web-page .profile-care p {
  font-size: 14px;
}
.web-page .profile-care > div:first-child {
  height: 155px;
  width: 110px;
  min-width: 110px;
}
.web-page .profile-review p {
  font-size: 16px;
  line-height: 1.8;
}
.web-page .profile-review > .micro,
.web-page .profile-review > span:last-child {
  font-size: 12px;
}
.web-page .profile-disclaimer {
  font-size: 12px;
  line-height: 1.8;
}
.web-page .home-section-title {
  margin: 35px 0 20px;
}
.web-page .home-section-title h2 {
  font-size: 37px;
  max-width: none;
}
.web-page .profile-suite {
  height: 350px;
}
.web-page .profile-suite h3 {
  font-size: 42px;
}
.web-page .profile-suite .micro {
  font-size: 12px;
}
.web-page[data-route='style'] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  align-items: start;
}
.web-page .style-cover-v2 {
  height: 680px;
  position: sticky;
  top: 113px;
}
.web-page .style-cover-v2 > .image-slot {
  aspect-ratio: auto;
}
.web-page .style-cover-v2 h1 {
  font-size: 69px;
}
.web-page .style-cover-v2 p {
  font-size: 16px;
}
.web-page .detail-body-v2 {
  padding: 0;
}
.web-page .look-facts {
  padding: 14px 0 30px;
  margin-bottom: 35px;
}
.web-page .look-facts > div {
  font-size: 14px;
}
.web-page .detail-body-v2 > h2 {
  font-size: 43px;
  line-height: 1.15;
}
.web-page .stylist-inline {
  padding: 19px;
  gap: 20px;
}
.web-page .stylist-inline > .photo-v2 {
  width: 80px;
  height: 102px;
}
.web-page .stylist-inline strong {
  font-size: 32px;
}
.web-page .stylist-inline span {
  font-size: 12px;
}
.web-page .product-inline > .product-art {
  height: 170px;
  width: 115px;
}
.web-page .product-inline strong {
  font-size: 16px;
}
.web-page .product-inline p {
  font-size: 14px;
  line-height: 1.8;
}
.web-page .product-inline .price {
  font-size: 14px;
}
.web-page[data-route='product'] {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 50px;
  align-items: start;
}
.web-page .product-gallery-v2 {
  position: sticky;
  top: 113px;
}
.web-page .product-gallery-v2 > div {
  height: 630px;
}
.web-page .product-copy-v2 h1 {
  font-size: 62px;
}
.web-page .product-copy-v2 > .micro {
  font-size: 12px;
}
.web-page .product-copy-v2 > p {
  font-size: 17px;
  line-height: 1.8;
}
.web-page .stylist-recommend {
  padding: 22px;
}
.web-page .stylist-recommend strong {
  font-size: 15px;
}
.web-page .stylist-recommend p {
  font-size: 14px;
}
.web-page .product-copy-v2 .row strong {
  font-size: 14px;
}
.web-page[data-route='booking-service'] {
  max-width: 700px;
}
.web-page[data-route='booking-service'] .page-head h1 {
  font-size: 63px;
}
.web-page .steps span {
  font-size: 14px;
}
.web-page .booking-chapter {
  margin: 32px 0;
}
.web-page .duration-pills {
  margin-top: 23px;
  padding: 9px;
  gap: 10px;
}
.web-page .duration-pills button {
  padding: 15px;
}
.web-page .duration-pills strong {
  font-size: 32px;
}
.web-page .duration-pills span {
  font-size: 13px;
}
.web-page .service-list .select-card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 24px;
}
.web-page .service-info {
  flex: 1;
}
.web-page .service-info strong {
  font-size: 18px;
}
.web-page .service-info p {
  font-size: 14px;
  line-height: 1.7;
}
.web-page .chemical-picker {
  padding: 17px;
  gap: 19px;
}
.web-page .chemical-picker strong {
  font-size: 16px;
}
.web-page .chemical-picker small {
  font-size: 13px;
}
.web-page .chemical-mark {
  width: 55px;
  height: 55px;
}
.web-page[data-route='booking-time'] {
  max-width: 800px;
}
.web-page[data-route='booking-time'] .two-col {
  display: block;
}
.web-page[data-route='booking-time'] .two-col > .sticky {
  display: none;
}
.web-page .barber-choice-list {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.web-page .barber-choice {
  padding: 14px;
}
.web-page .barber-choice-profile .photo-v2 {
  width: 57px;
  height: 83px;
}
.web-page .barber-choice-profile small {
  font-size: 11px;
}
.web-page .barber-choice-profile .profile-link {
  font-size: 12px;
}
.web-page .barber-choice-select {
  min-width: 72px;
}
.web-page .barber-choice-select > span {
  font-size: 11px;
}
.web-page .barber-choices-v3 {
  margin-bottom: 12px;
}
.web-page .calendar-grid .day-btn {
  min-height: 60px;
  font-size: 15px;
}
.web-page .slots {
  grid-template-columns: repeat(5, 1fr);
}
.web-page .slot {
  min-height: 47px;
  font-size: 14px;
}
.web-page[data-route='me'] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 45px;
}
.web-page .society-pass {
  grid-column: 1;
  grid-row: 1/4;
  padding: 33px;
  border-radius: 18px;
  align-self: start;
}
.web-page .society-greeting {
  margin-top: 35px;
}
.web-page .society-greeting h1 {
  font-size: 68px !important;
}
.web-page .society-greeting p {
  font-size: 16px;
  max-width: 380px;
}
.web-page .society-pass-bottom b {
  font-size: 50px;
}
.web-page .society-pass-bottom span {
  font-size: 14px;
}
.web-page .society-pass .micro {
  font-size: 12px;
}
.web-page .society-pass > p {
  font-size: 12px;
}
.web-page .me-quick {
  grid-column: 1;
  margin: 0;
  align-self: start;
}
.web-page .me-quick button {
  font-size: 14px;
}
.web-page .reserve-inline {
  grid-column: 2;
  grid-row: 1;
  padding: 25px;
}
.web-page .reserve-inline strong {
  font-size: 29px;
}
.web-page .reserve-inline .micro {
  font-size: 12px;
}
.web-page .reserve-inline > span {
  font-size: 14px;
}
.web-page .membership-inline {
  grid-column: 2;
  grid-row: 2;
}
.web-page .membership-inline .micro {
  font-size: 11px;
}
.web-page .membership-inline h3 {
  font-size: 34px;
}
.web-page .membership-inline p {
  font-size: 14px;
}
.web-page .me-membership-note {
  grid-column: 2;
  grid-row: 3;
  font-size: 12px;
  line-height: 1.8;
  padding-bottom: 20px;
}
.web-page .native-menu-list {
  grid-column: 2;
  grid-row: 4/8;
  margin: 0;
}
.web-page .native-menu-list button {
  font-size: 15px;
  min-height: 65px;
}
.web-page .me-guest {
  grid-column: 1;
}
.web-page[data-route='orders'] {
  max-width: 920px;
}
.web-page .product-order-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.web-page .product-order-card .row .price {
  font-size: 16px;
}
.web-page .plan-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
}
.web-page .plan-card {
  padding: 32px;
}
.web-page .plan-card .check-list li {
  font-size: 15px;
  line-height: 1.75;
}
.web-page .plan-card h3 {
  font-size: 46px;
}
.web-page .plan-card .price {
  font-size: 25px;
}
.web-page[data-route='article'] {
  padding-top: 40px;
}
.web-page[data-route='passport'] {
  max-width: 850px;
}
.web-page .passport-v2 {
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  gap: 0;
}
.web-page .passport-photo {
  height: 100%;
  min-height: 460px;
}
.web-page .passport-v2-copy {
  padding: 30px;
}
.web-page .passport-v2-copy h2 {
  font-size: 44px;
}
.web-page .passport-v2-copy > .micro {
  font-size: 12px;
}
.web-page .passport-v2-copy .passport-data span {
  font-size: 14px;
}
.web-page .passport-v2-copy .passport-data label {
  font-size: 12px;
}
.web-auth .auth-shell {
  min-height: calc(100vh - 88px);
}
.web-auth .auth-form {
  padding-top: 55px;
  padding-bottom: 65px;
}
.web-reviews-v3 {
  background: #e7dfd2;
}
.web-reviews-v3 .review-card {
  background: #f7f2e9;
}
.web .web-header-v3 {
  font-family: var(--sans);
}
.web .plan-card .check-list li {
  font-size: 14px;
  line-height: 1.7;
}
.web .plan-card .price {
  font-size: 21px;
}
.web .team-caption p {
  font-size: 14px;
  min-height: 46px;
}
.web .team-caption > .micro {
  font-size: 12px;
}
.web .team-meta {
  font-size: 13px;
}
.web .image-slot > span {
  font-size: 13px;
}
.web .space-section .image-slot {
  background: #362e23 !important;
}
.web-header-actions .gpoint-fixed > small {
  font-size: 11px;
}
.staff-theme.mode-web .web-header-v3 {
  background: #19140e;
  color: #e7d3b5;
  border-color: #443421;
}
.staff-theme.mode-web .web-page {
  color: #e7d3b5;
}
.staff-theme.mode-web {
  background: #14120f;
}
@media (max-width: 1150px) {
  .web-header-v3 {
    padding: 0 30px;
    gap: 25px;
  }
  .web-header-v3 > nav {
    gap: 18px;
  }
  .web-header-v3 > nav > button {
    font-size: 13px;
  }
  .web-header-actions {
    gap: 11px;
  }
  .web-logo .logo {
    width: 125px;
  }
  .web-header-actions .gpoint-fixed small {
    display: none;
  }
  .web .atelier-web .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .web-page {
    width: calc(100% - 64px);
  }
  .web-page .profile-cover {
    height: 585px;
  }
  .web-page .product-gallery-v2 > div {
    height: 550px;
  }
}
@media (max-width: 850px) {
  .web-header-v3 > nav {
    display: none;
  }
  .web-header-actions {
    margin-left: auto;
    gap: 15px;
  }
  .web-header-v3 .web-menu-toggle {
    display: block;
  }
  .web-header-actions .gpoint-fixed small {
    display: block;
  }
  .web-page {
    padding-top: 35px;
    width: calc(100% - 44px);
  }
  .web-page .page-head h1 {
    font-size: 48px;
  }
  .web-page .two-col {
    grid-template-columns: 1fr;
    gap: 27px;
  }
  .web-page .sticky {
    position: static;
  }
  .web-page[data-route='barber'],
  .web-page[data-route='style'],
  .web-page[data-route='product'] {
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 650px;
  }
  .web-page .profile-cover,
  .web-page .style-cover-v2 {
    position: relative;
    top: 0;
    height: 560px;
  }
  .web-page .product-gallery-v2 {
    position: relative;
    top: 0;
  }
  .web-page .product-gallery-v2 > div {
    height: 560px;
  }
  .web-page[data-route='me'] {
    gap: 25px;
    max-width: 700px;
    display: block;
  }
  .web-page .me-quick {
    margin-top: 5px;
  }
  .web-page .reserve-inline {
    margin-top: 25px;
  }
  .web-page .membership-inline {
    padding-top: 30px;
  }
  .web-page .native-menu-list {
    margin-top: 20px;
  }
  .web-page .me-membership-note {
    margin: 12px 0;
  }
  .journal-grid,
  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .web .journal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .web .journal-card h3 {
    font-size: 27px;
  }
  .web .journal-card > .micro {
    font-size: 11px;
  }
  .web .journal-card p {
    font-size: 13px;
  }
  .web .review-card blockquote {
    font-size: 30px;
  }
  .web-page .product-order-list {
    grid-template-columns: 1fr;
  }
  .booking-confirm-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .web-page .personal-kit-section {
    padding-top: 30px;
  }
  .web-page .passport-v2 {
    grid-template-columns: 1fr;
  }
  .web-page .passport-photo {
    height: 430px;
    min-height: 0;
  }
}
@media (max-width: 600px) {
  .app-brand-row {
    gap: 9px;
    padding: 0 16px;
  }
  .app-brand-row .logo {
    width: 90px;
  }
  .gpoint-fixed {
    padding: 7px 10px;
    gap: 5px;
  }
  .gpoint-fixed small {
    font-size: 11px;
  }
  .web-header-v3,
  .web-header-v3.over-hero {
    height: 83px;
    padding: 0 22px;
    gap: 15px;
  }
  .web-logo .logo {
    width: 108px;
  }
  .web-header-actions {
    gap: 10px;
  }
  .web-header-actions > .gpoint-fixed {
    padding: 5px 8px;
    gap: 4px;
    font-size: 11px;
    min-height: 33px;
  }
  .web-header-actions > .gpoint-fixed b {
    font-size: 12px;
  }
  .web-header-actions > .gpoint-fixed small {
    display: none;
  }
  .web-header-actions > .gpoint-fixed > span {
    font-size: 12px;
  }
  .web-header-actions > button[onclick="go('favorites')"] {
    display: none;
  }
  .web-header-actions > button {
    min-width: 20px;
  }
  .web-header-actions .icon {
    width: 19px;
  }
  .web-header-actions .lang-toggle {
    font-size: 10px;
  }
  .web-page {
    width: calc(100% - 38px);
    padding: 30px 0 45px;
  }
  .web-page .page-head h1 {
    font-size: 39px;
  }
  .web-page .page-head p {
    font-size: 15px;
  }
  .web-page .page-head {
    margin-bottom: 26px;
  }
  .web-page .card {
    padding: 21px;
  }
  .web-page .grid.two:not(.keep-two) {
    grid-template-columns: 1fr;
  }
  .web-page .grid.two.keep-two {
    gap: 15px;
    grid-template-columns: 1fr 1fr;
  }
  .web-page .hair-tile h3 {
    font-size: 28px;
  }
  .web-page .hair-tile p {
    font-size: 12px;
  }
  .web-page .save-look {
    width: 34px;
    height: 34px;
  }
  .web-page .product-label {
    display: block;
  }
  .web-page .product-label h3 {
    font-size: 13px;
  }
  .web-page .product-label .price {
    font-size: 13px;
    margin-top: 10px;
    display: block;
  }
  .web-page .product-label p {
    font-size: 11px;
  }
  .web-page .profile-cover,
  .web-page .style-cover-v2 {
    height: 480px;
  }
  .web-page .profile-cover h1 {
    font-size: 62px;
  }
  .web-page .style-cover-v2 h1 {
    font-size: 53px;
  }
  .web-page .profile-body blockquote {
    font-size: 33px;
  }
  .web-page .profile-stats span {
    font-size: 11px;
  }
  .web-page .profile-stats strong {
    font-size: 15px;
  }
  .web-page .profile-works .hair-photo {
    height: 245px;
  }
  .web-page .home-section-title h2 {
    font-size: 32px;
  }
  .web-page .profile-care {
    gap: 14px;
  }
  .web-page .profile-care p {
    font-size: 13px;
  }
  .web-page .detail-body-v2 > h2 {
    font-size: 35px;
  }
  .web-page .look-facts > div {
    font-size: 12px;
  }
  .web-page .product-gallery-v2 > div {
    height: 420px;
  }
  .web-page .product-copy-v2 h1 {
    font-size: 47px;
  }
  .web-page .barber-choice-list {
    grid-template-columns: 1fr;
  }
  .web-page .barber-choice-profile strong {
    font-size: 30px;
  }
  .web-page .barber-choice-profile small {
    font-size: 12px;
  }
  .web-page .barber-choice-profile .photo-v2 {
    width: 65px;
    height: 85px;
  }
  .web-page .barber-choice-select > span {
    font-size: 13px;
  }
  .web-page .calendar-grid .day-btn {
    min-height: 45px;
    font-size: 12px;
  }
  .web-page .slots {
    grid-template-columns: repeat(3, 1fr);
  }
  .web-page[data-route='booking-service'] .page-head h1 {
    font-size: 43px;
  }
  .web-page .steps span {
    font-size: 11px;
  }
  .web-page .service-list .select-card {
    padding: 18px;
  }
  .web-page .service-info strong {
    font-size: 15px;
  }
  .web-page .service-info p {
    font-size: 13px;
  }
  .web-page .duration-pills span {
    font-size: 11px;
  }
  .web-page .duration-pills strong {
    font-size: 27px;
  }
  .web-action {
    gap: 16px;
    padding: 12px 20px;
  }
  .web-action > .btn {
    min-width: 160px;
    font-size: 12px;
    max-width: 64%;
    padding: 12px;
  }
  .web-action strong {
    font-size: 16px;
  }
  .web-action .micro {
    font-size: 10px;
  }
  .web-action.without-estimate {
    flex-direction: column;
    gap: 8px;
  }
  .web-action.without-estimate > div {
    margin: 0;
    order: 2;
  }
  .web-action.without-estimate > .btn {
    width: 100%;
    max-width: 100%;
    order: 1;
  }
  .portal-footer {
    padding: 23px 20px;
    font-size: 11px;
  }
  .portal-footer > span {
    font-size: 9px;
  }
  .portal-footer > button {
    font-size: 11px;
  }
  .web-page .plan-grid {
    grid-template-columns: 1fr !important;
  }
  .web-page .plan-card {
    padding: 27px;
  }
  .web-page .society-pass {
    padding: 25px;
  }
  .web-page .society-greeting h1 {
    font-size: 57px !important;
  }
  .web-page .society-greeting p {
    font-size: 14px;
  }
  .web .journal-grid {
    grid-template-columns: 1fr;
    gap: 33px;
  }
  .web .journal-card h3 {
    font-size: 35px;
  }
  .web .journal-card p {
    font-size: 15px;
  }
  .web .journal-card > .micro {
    font-size: 12px;
  }
  .web .journal-photo {
    height: 230px;
    aspect-ratio: auto;
  }
  .web .reviews-grid {
    gap: 17px;
  }
  .web .review-card {
    padding: 26px;
  }
  .web .review-card blockquote {
    font-size: 27px;
  }
  .web .team-caption p {
    font-size: 12px;
    min-height: 40px;
  }
  .web .team-caption > .micro {
    font-size: 10px;
  }
  .web .team-meta {
    font-size: 11px;
  }
  .web .image-slot > span {
    font-size: 12px;
  }
  .web .atelier-web .grid.four {
    grid-template-columns: 1fr;
  }
  .web .atelier-web .plan-card {
    padding: 25px;
  }
  .personal-kit-grid > div {
    padding: 17px;
  }
  .personal-kit-grid h3 {
    font-size: 20px;
  }
  .personal-kit-section h2 {
    font-size: 34px;
  }
  .quarterly-kit {
    display: grid;
    padding: 22px;
  }
  .kit-product-photo {
    height: 210px;
    width: 100%;
  }
  .article-copy {
    padding: 28px 0;
  }
  .article-copy h1 {
    font-size: 42px;
  }
  .article-hero {
    height: 280px;
  }
  .article-copy > p {
    font-size: 16px;
  }
  .article-end {
    gap: 15px;
  }
  .article-end > .btn {
    font-size: 12px;
    padding: 12px;
  }
  .post-booking-offers {
    padding: 22px 16px;
  }
  .post-booking-offers > h2 {
    font-size: 35px;
  }
  .post-offer p {
    min-height: 60px;
  }
  .post-offer .btn {
    font-size: 12px;
    padding: 10px 5px;
  }
  .post-offer > div:last-child {
    padding: 13px;
  }
  .post-offer h3 {
    font-size: 27px;
  }
  .web-page .order-product-row {
    gap: 12px;
  }
  .web-page .order-product-row .product-art {
    width: 63px;
    height: 80px;
  }
  .web-page .order-product-row strong {
    font-size: 12px;
  }
  .web-page .order-product-row > .price {
    font-size: 11px;
  }
  .web-page .order-actions .btn {
    font-size: 12px;
    padding: 12px;
  }
  .phone-page .plan-card {
    min-width: calc(100vw - 65px);
    width: calc(100vw - 65px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .save-look,
  .journal-photo .photo-v2 {
    transition: none;
    transform: none;
  }
}
.genar-button-star {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
  vertical-align: middle;
  transition: transform 300ms ease;
}
.team-view .genar-button-star { width: 22px; height: 22px; }
.profile-link .genar-button-star { width: 14px; height: 14px; margin-left: 5px; }
:is(.team-tile, .barber-choice-profile, .native-action .btn, .web-action .btn):hover .genar-button-star { transform: rotate(45deg); }