/* Arc & Form, the surviving salon direction.
   The studio's materials set the page: a cool stone floor, the black cape,
   the steel of the shears, and the oval mirror the whole consultation faces.
   One accent, oxide green, sits where a hand goes: chips, links, the price. */
:root {
  --salon-space-1: .5rem;
  --salon-space-2: 1rem;
  --salon-space-3: 1.5rem;
  --salon-space-4: 2.5rem;
  --salon-space-5: 4.5rem;
  --salon-space-6: 7rem;
  --salon-sans: "Bricolage Grotesque", "Avenir Next", sans-serif;
  --salon-serif: "Bodoni Moda", Didot, "Times New Roman", serif;
  --salon-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --salon-mono: "IBM Plex Mono", ui-monospace, monospace;
  --salon-ease: cubic-bezier(.23, 1, .32, 1);
}

.salon-page {
  color: var(--salon-ink);
  background: var(--salon-stone);
  font-family: var(--salon-body);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.salon-page *, .salon-page *::before, .salon-page *::after { box-sizing: border-box; }
.salon-page ::selection { background: var(--salon-oxide); color: var(--salon-selection); }
.salon-page a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .24em; }
.salon-page a:focus-visible { outline: 3px solid var(--salon-focus); outline-offset: 4px; }
.salon-page header a,
.salon-page footer a {
  align-items: center;
  display: inline-flex;
  min-block-size: 24px;
}
.salon-page h1, .salon-page h2, .salon-page h3, .salon-page p { margin: 0; }
.salon-page h1, .salon-page h2, .salon-page h3 { font-family: var(--salon-sans); letter-spacing: -.035em; line-height: .98; }
.salon-page ul, .salon-page ol { margin: 0; padding: 0; }
.salon-page li { list-style: none; }

.salon-skip {
  position: fixed;
  z-index: 20;
  top: -5rem;
  left: var(--salon-space-2);
  padding: .8rem 1rem;
  background: var(--salon-ink);
  color: var(--salon-stone);
  text-decoration: none;
}
.salon-skip:focus { top: var(--salon-space-2); }

.salon-page .study-shell { width: var(--qb-content-width); margin-inline: auto; }
.study-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--salon-space-2); padding-block: var(--salon-space-3); }
.study-nav__brand { font-family: var(--salon-sans); font-size: 1.1rem; font-weight: 700; letter-spacing: -.04em; text-decoration: none; }
.study-nav__links { display: flex; align-items: center; gap: var(--salon-space-3); font-size: .86rem; }
.study-nav__links a { text-decoration: none; }
.study-nav__links a:not(.study-nav__book):hover { text-decoration: underline; }
.study-nav__book { border: 1px solid currentColor; padding: .48rem .78rem; }

.study-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: .7rem 1.2rem;
  background: var(--salon-ink);
  color: var(--salon-stone) !important;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform 160ms var(--salon-ease), background-color 160ms var(--salon-ease);
}
.study-action:hover { background: var(--salon-oxide); }
.study-action:active { transform: scale(.97); }
.study-action:focus-visible { outline-color: var(--salon-focus); }

/* The mirror. The hero photo sits in a tall oval with a steel rim, the way
   the studio's own mirror frames a face; the media rule keeps the grid
   contract the salon tests pin. */
.study-hero-media { grid-area: media; display: block; width: 100%; min-width: 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--salon-ink); line-height: 0; }
.study-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: no-preference) {
  .study-hero-media[data-world-object].is-inview img { animation: world-object-settle 1.2s var(--salon-ease) both; }
  @keyframes world-object-settle {
    from { transform: scale(1.035); }
    to { transform: scale(1); }
  }
}

/* Arc & Form: stone, cape black, steel, and one oxide green. */
.arc-form {
  --salon-sans: var(--business-font-arc-form);
  --salon-stone: #d9d8d2;
  --salon-stone-deep: #cfcec7;
  --salon-card: #e7e6e1;
  --salon-ink: #1a1c1c;
  --salon-cape: #131515;
  --salon-cape-text: #d9d8d2;
  --salon-cape-muted: #9ea39f;
  --salon-muted: #4d5452;
  --salon-steel: #a3a8a4;
  --salon-rule: #b9bdb8;
  --salon-oxide: #2f5647;
  --salon-oxide-deep: #234135;
  --salon-selection: #f2f4f1;
  --salon-focus: #2f5647;
}
.arc-form .study-nav { border-bottom: 1px solid var(--salon-rule); }
.arc-amp-mark { color: var(--salon-oxide); font-family: var(--salon-serif); font-weight: 500; }

.arc-hero {
  display: grid;
  grid-template-areas: "copy media";
  grid-template-columns: minmax(16rem, .9fr) minmax(0, 1.1fr);
  gap: clamp(var(--salon-space-4), 6vw, var(--salon-space-6));
  align-items: center;
  padding-block: var(--salon-space-4) var(--salon-space-6);
}
.arc-hero .study-hero-media {
  grid-area: media;
  aspect-ratio: auto;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px var(--salon-steel),
    0 0 0 .55rem var(--salon-stone),
    0 0 0 calc(.55rem + 1px) var(--salon-rule),
    0 2.5rem 4rem -2rem color-mix(in srgb, var(--salon-cape) 55%, transparent);
  height: clamp(34rem, 74svh, 46rem);
  justify-self: center;
  max-width: 34rem;
  width: 100%;
}
.arc-hero .study-hero-media img { object-position: 62% center; }
.arc-hero__copy { grid-area: copy; max-width: 31rem; }
.arc-hero__copy .arc-hero__mark {
  color: var(--salon-oxide);
  font-family: var(--salon-serif);
  font-size: clamp(5rem, 7vw, 7.5rem);
  font-weight: 500;
  line-height: .8;
  margin-bottom: var(--salon-space-3);
}
.arc-hero__copy h1 { font-size: clamp(3rem, 4.6vw, 5rem); font-weight: 750; letter-spacing: -.05em; line-height: .94; text-wrap: balance; }
.arc-hero__copy > p:not(.arc-hero__mark) { max-width: 28rem; margin-top: var(--salon-space-3); color: var(--salon-muted); font-size: clamp(1rem, 1.35vw, 1.12rem); }
.arc-hero__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--salon-space-3); margin-top: var(--salon-space-4); }
.arc-hero__prep { color: var(--salon-oxide); font-weight: 700; }
.arc-hero__prep:hover { color: var(--salon-oxide-deep); }

/* Consultation: three cards in the order they happen. Numbers are true
   sequence here, so they carry a real count. */
.arc-journey { padding-block: var(--salon-space-5) var(--salon-space-6); border-top: 1px solid var(--salon-rule); }
.arc-journey__head { max-width: 40rem; }
.arc-journey__head h2,
.arc-services__head h2,
.arc-prep h2,
.arc-close h2 { font-size: clamp(2.4rem, 4.2vw, 4.2rem); font-weight: 720; letter-spacing: -.045em; line-height: .96; text-wrap: balance; }
.arc-journey__head p,
.arc-services__head p { max-width: 32rem; margin-top: var(--salon-space-3); color: var(--salon-muted); }
.arc-journey .arc-steps { display: grid; gap: var(--salon-space-2); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--salon-space-4); }
.arc-steps li {
  background: var(--salon-card);
  border-top: 2px solid var(--salon-ink);
  display: grid;
  gap: var(--salon-space-2);
  grid-template-rows: auto auto 1fr;
  padding: var(--salon-space-3) var(--salon-space-3) var(--salon-space-4);
}
.arc-steps__index { color: var(--salon-oxide); font-family: var(--salon-serif); font-size: 2.4rem; font-weight: 500; line-height: .8; }
.arc-steps strong { font-family: var(--salon-sans); font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 720; letter-spacing: -.035em; line-height: 1.05; }
.arc-steps span:not(.arc-steps__index) { color: var(--salon-muted); }

/* Appointments: cards, each with the price set in the serif at card scale,
   so what it costs reads as part of the offer rather than a footnote. */
.arc-services { background: var(--salon-stone-deep); padding-block: var(--salon-space-6); }
.arc-services__head { max-width: 40rem; margin-bottom: var(--salon-space-4); }
.arc-services__list { display: grid; gap: var(--salon-space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.arc-card {
  background: var(--salon-card);
  display: grid;
  gap: var(--salon-space-2);
  grid-template-areas: "name price" "note price" "link price";
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  min-height: 15rem;
  padding: var(--salon-space-3);
  position: relative;
  transition: background-color 160ms var(--salon-ease), box-shadow 160ms var(--salon-ease);
}
.arc-card strong { grid-area: name; font-family: var(--salon-sans); font-size: clamp(1.4rem, 1.9vw, 1.8rem); font-weight: 720; letter-spacing: -.04em; line-height: 1.02; }
.arc-card__note { grid-area: note; color: var(--salon-muted); max-width: 26rem; }
.arc-card__price {
  align-self: start;
  color: var(--salon-ink);
  font-family: var(--salon-serif);
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 600;
  grid-area: price;
  justify-self: end;
  letter-spacing: -.02em;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}
.arc-card__price small { color: var(--salon-muted); display: block; font-family: var(--salon-mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; margin-bottom: .35rem; text-transform: uppercase; }
.arc-prep-link {
  align-self: end;
  color: var(--salon-oxide);
  font-family: var(--salon-mono);
  font-size: .74rem;
  font-weight: 700;
  grid-area: link;
  justify-self: start;
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
}
.arc-prep-link::after { content: "\2192"; display: inline-block; margin-left: .45em; transition: transform 160ms var(--salon-ease); }
.arc-prep-link:hover { color: var(--salon-oxide-deep); text-decoration: underline; }
.arc-prep-link:hover::after { transform: translateX(.2rem); }
@media (hover: hover) and (pointer: fine) {
  .arc-card:hover { background: #edece7; box-shadow: 0 1.2rem 2.4rem -1.6rem color-mix(in srgb, var(--salon-cape) 60%, transparent); }
}

/* Preparation: the cape. The one dark band on the page, where the client
   chooses the appointment and the list retunes. */
.arc-prep { background: var(--salon-cape); color: var(--salon-cape-text); }
.arc-prep__layout { display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr); gap: clamp(var(--salon-space-4), 7vw, var(--salon-space-6)); padding-block: var(--salon-space-6); }
.arc-prep h2 { color: var(--salon-cape-text); }
.arc-prep__intro > p { max-width: 26rem; margin-top: var(--salon-space-3); color: var(--salon-cape-muted); }
.arc-goal { border: 0; margin: var(--salon-space-4) 0 0; padding: 0; }
.arc-goal legend { color: var(--salon-cape-muted); font-family: var(--salon-mono); font-size: .72rem; letter-spacing: .12em; padding: 0; text-transform: uppercase; }
.arc-goal__chips { display: flex; flex-wrap: wrap; gap: var(--salon-space-1); margin-top: var(--salon-space-2); }
.arc-goal__chip { cursor: pointer; display: inline-flex; position: relative; }
.arc-goal__chip input { appearance: none; inset: 0; margin: 0; position: absolute; }
.arc-goal__chip span {
  align-items: center;
  border: 1px solid var(--salon-cape-muted);
  border-radius: 999px;
  color: var(--salon-cape-text);
  display: inline-flex;
  font-weight: 700;
  min-height: 2.6rem;
  padding: .45rem 1.05rem;
  transition: background-color 120ms var(--salon-ease), border-color 120ms var(--salon-ease), color 120ms var(--salon-ease), transform 100ms ease-out;
}
.arc-goal__chip:active span { transform: scale(.96); }
.arc-goal__chip input:checked + span { background: var(--salon-oxide); border-color: var(--salon-oxide); color: #f2f4f1; }
.arc-goal__chip input:focus-visible + span { outline: 3px solid var(--salon-cape-text); outline-offset: 3px; }
.arc-prep__list { border-top: 1px solid var(--salon-cape-muted); }
.arc-prep__list li { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: var(--salon-space-3); border-bottom: 1px solid color-mix(in srgb, var(--salon-cape-muted) 45%, transparent); }
.arc-prep__list strong { font-family: var(--salon-sans); font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 720; letter-spacing: -.035em; line-height: 1.1; }
.arc-prep__list span { margin-top: var(--salon-space-1); color: var(--salon-cape-muted); }

/* Close: the house mark once more, and the one line that speaks as the study. */
.arc-close { padding-block: var(--salon-space-6); }
.arc-close__copy { max-width: 38rem; }
.arc-close__mark { color: var(--salon-oxide); font-family: var(--salon-serif); font-size: 3.2rem; font-weight: 500; line-height: .8; margin-bottom: var(--salon-space-3); }
.arc-close p:not(.arc-close__mark) { max-width: 34rem; margin-top: var(--salon-space-3); color: var(--salon-muted); font-size: 1.05rem; }
.arc-close .study-action { margin-top: var(--salon-space-4); }

@media (max-width: 1024px) {
  .arc-journey .arc-steps { grid-template-columns: 1fr; }
  .arc-steps li { grid-template-columns: 3rem minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "index name" "index note"; }
  .arc-steps__index { grid-area: index; }
  .arc-steps strong { grid-area: name; }
  .arc-steps span:not(.arc-steps__index) { grid-area: note; }
}

@media (max-width: 760px) {
  .study-nav__links { gap: .7rem; font-size: .76rem; }
  .study-nav__book { padding: .38rem .56rem; white-space: nowrap; }
  .arc-hero { grid-template-areas: "media" "copy"; grid-template-columns: 1fr; gap: var(--salon-space-4); padding-block: var(--salon-space-2) var(--salon-space-5); }
  .arc-hero .study-hero-media { aspect-ratio: 3 / 4; height: auto; max-width: none; }
  .arc-hero__copy { grid-area: copy; max-width: none; }
  .arc-hero__copy .arc-hero__mark { font-size: 4.5rem; }
  .arc-journey,
  .arc-prep__layout {
    grid-template-columns: 1fr;
  }
  .arc-services__list { grid-template-columns: 1fr; }
  .arc-card { min-height: 0; }
  .arc-form .study-nav__links { gap: var(--salon-space-1); }
  .arc-form .study-nav__book { padding: .38rem .55rem; }
}

@media (max-width: 360px) {
  /* Narrow phones: the booking action drops under the wordmark. The fixed
     back control already owns the projects action, so the header holds
     only the brand and the one call. */
  .study-nav { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: no-preference) {
  [data-arc-prep-list].is-retuned li { animation: arc-retune 260ms var(--salon-ease) both; }
  [data-arc-prep-list].is-retuned li:nth-child(2) { animation-delay: 50ms; }
  [data-arc-prep-list].is-retuned li:nth-child(3) { animation-delay: 100ms; }
}

@keyframes arc-retune {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .salon-page *, .salon-page *::before, .salon-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}