.salon-about {
  background: var(--color-ink);
}

.salon-about .technical-label {
  margin: 0;
}

.salon-about__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr);
  align-items: center;
  gap: var(--space-5);
}

.salon-about__hero-copy {
  grid-column: 1 / span 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 32.5rem;
}

.salon-about__hero-copy h1,
.salon-about__hero-copy p,
.salon-about__hero-invitation p,
.salon-about__hero-media figcaption,
.salon-about__section-intro h2,
.salon-about__section-intro p,
.salon-about__boundaries-copy h2,
.salon-about__boundaries-copy p,
.salon-about__table-copy h2,
.salon-about__table-copy p,
.salon-about__formats-intro h2,
.salon-about__formats-intro p,
.salon-about__perspectives-intro h2,
.salon-about__path-intro h2,
.salon-about__path-intro p,
.salon-about__faq-intro h2,
.salon-about__closing-copy h2,
.salon-about__closing-copy p,
.salon-about__closing-action p,
.salon-about__clarification-band p {
  margin: 0;
}

.salon-about__hero-copy h1 {
  font-size: clamp(3rem, 6.1vw, 6.5rem);
  line-height: 0.92;
}

.salon-about__hero-copy > .lead {
  max-width: 32.5rem;
}

.salon-about__hero-invitation {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 31rem;
}

.salon-about__hero-invitation .button-primary,
.salon-about__closing-action .button-primary {
  min-width: 0;
  min-height: 3rem;
}

.salon-about__hero-media {
  grid-column: 3 / span 1;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.salon-about__hero-media img {
  width: 100%;
  min-height: 31.25rem;
  height: 100%;
  object-fit: cover;
  object-position: 52% 50%;
  transition: object-position var(--transition-standard);
}

.salon-about__hero-media:hover img {
  object-position: 56% 50%;
}

.salon-about__hero-media figcaption,
.salon-about__boundaries-media figcaption,
.salon-about__table-media figcaption {
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-line);
  color: var(--color-muted);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.1;
}

.salon-about__section-intro,
.salon-about__formats-intro,
.salon-about__path-intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 37.5rem;
}

.salon-about__principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.salon-about__principle {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: var(--border-line);
}

.salon-about__principle + .salon-about__principle {
  border-left: var(--border-line);
  padding-left: var(--space-5);
}

.salon-about__principle:hover {
  border-top-color: var(--color-acid);
}

.salon-about__principle h3,
.salon-about__principle p,
.salon-about__format-card h3,
.salon-about__format-card p,
.salon-about__perspective-card h3,
.salon-about__perspective-card p,
.salon-about__path-step h3,
.salon-about__path-step p,
.salon-about__faq-question h3,
.salon-about__faq-answer p {
  margin: 0;
}

.salon-about__number {
  margin: 0;
  color: var(--color-acid);
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4vw, 4.25rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.salon-about__principle--yellow-number .salon-about__number {
  color: var(--color-yellow);
}

.salon-about__boundaries-panel {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 5fr);
  align-items: start;
  gap: var(--space-5);
  padding: var(--space-7);
  border: var(--border-line);
  background: var(--color-ink-raised);
}

.salon-about__boundaries-copy {
  grid-column: 1 / span 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 37.5rem;
}

.salon-about__boundaries-copy > .lead {
  max-width: 32.5rem;
}

.salon-about__boundaries-explainer {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 37.5rem;
  padding-top: var(--space-4);
  border-top: var(--border-acid);
}

.salon-about__boundaries-explainer h3 {
  margin: 0;
}

.salon-about__not-here {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

.salon-about__not-here ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.salon-about__not-here li {
  position: relative;
  min-width: 0;
  padding-left: var(--space-5);
}

.salon-about__not-here li::before {
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 0.5rem;
  height: 1px;
  background: var(--color-acid);
  content: "";
}

.salon-about__boundaries-media {
  grid-column: 3 / span 1;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.salon-about__boundaries-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 52%;
}

.salon-about__boundaries-media:hover figcaption {
  border-top-color: var(--color-yellow);
}

.salon-about__table-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr);
  align-items: start;
  gap: var(--space-5);
}

.salon-about__table-media {
  grid-column: 1 / span 1;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.salon-about__table-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 50%;
}

.salon-about__table-copy {
  grid-column: 3 / span 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 35rem;
}

.salon-about__table-secondary-copy {
  padding-top: var(--space-4);
  border-top: var(--border-acid);
}

.salon-about__rhythm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
}

.salon-about__rhythm p {
  display: grid;
  grid-template-columns: minmax(5.75rem, 0.28fr) minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--border-line);
}

.salon-about__rhythm span {
  color: var(--color-acid);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
}

.salon-about__table-link {
  min-height: 2.75rem;
  padding-top: 0.6rem;
}

.salon-about__format-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.salon-about__format-card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-line);
  border-top-color: var(--color-acid);
  background: var(--color-ink-raised);
}

.salon-about__format-card .text-link {
  min-height: 2.75rem;
  margin-top: auto;
  padding-top: 0.6rem;
}

.salon-about__format-card:hover,
.salon-about__format-card:focus-within {
  border-top-color: var(--color-yellow);
}

.salon-about__perspectives {
  background: var(--color-ink-raised);
}

.salon-about__perspectives-intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 32.5rem;
}

.salon-about__perspective-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.salon-about__perspective-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-line);
  border-top-color: var(--color-acid);
  background: var(--color-ink);
}

.salon-about__perspective-card--yellow {
  border-top-color: var(--color-yellow);
}

.salon-about__perspective-card--yellow .technical-label {
  color: var(--color-yellow);
}

.salon-about__path-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.salon-about__path-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
  padding-top: var(--space-5);
  border-top: var(--border-line);
}

.salon-about__path-step > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.salon-about__path-step .text-link {
  min-height: 2.75rem;
  margin-top: auto;
  padding-top: 0.6rem;
}

.salon-about__faq-intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  width: min(100%, 65rem);
  margin-inline: auto;
}

.salon-about__faq-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: min(100%, 65rem);
  margin: var(--space-7) auto 0;
  border-top: var(--border-line);
}

.salon-about__faq-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: var(--space-6);
  min-width: 0;
  padding-block: var(--space-5);
  border-bottom: var(--border-line);
}

.salon-about__faq-question {
  display: grid;
  grid-template-columns: minmax(2.5rem, auto) minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
}

.salon-about__faq-question span {
  color: var(--color-acid);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
}

.salon-about__faq-answer {
  min-width: 0;
  max-width: 42.5rem;
}

.salon-about__faq-answer a {
  color: var(--color-acid);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.salon-about__faq-answer a:hover {
  color: var(--color-yellow);
}

.salon-about__closing-panel {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 2fr) minmax(0, 4fr);
  align-items: end;
  gap: var(--space-5);
  padding: var(--space-7);
  border: var(--border-line);
  background: var(--color-ink-raised);
}

.salon-about__closing-copy {
  grid-column: 1 / span 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 37.5rem;
}

.salon-about__closing-copy .lead {
  max-width: 37.5rem;
}

.salon-about__closing-action {
  grid-column: 3 / span 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 27.5rem;
}

.salon-about__closing-action p {
  color: var(--color-muted);
}

.salon-about__clarification {
  padding-top: 0;
}

.salon-about__clarification-band {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 8fr) minmax(0, 2fr);
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5) 0;
  border-top: var(--border-acid);
  border-bottom: var(--border-line);
}

.salon-about__clarification-band > .technical-label {
  grid-column: 1 / span 1;
}

.salon-about__clarification-band > p {
  grid-column: 2 / span 1;
  color: var(--color-ivory);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 51.25rem;
}

.salon-about__reveal {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 420ms ease, transform 420ms ease;
}

.salon-about__reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1020px) {
  .salon-about__path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
  }
}

@media (max-width: 980px) {
  .salon-about__hero-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-5);
  }

  .salon-about__hero-copy {
    grid-column: 1 / span 5;
  }

  .salon-about__hero-media {
    grid-column: 1 / -1;
  }

  .salon-about__hero-media img {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 920px) {
  .salon-about__table-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .salon-about__table-media,
  .salon-about__table-copy {
    grid-column: 1 / -1;
  }

  .salon-about__table-copy {
    max-width: 35rem;
  }
}

@media (max-width: 900px) {
  .salon-about__principle-grid,
  .salon-about__format-grid,
  .salon-about__perspective-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .salon-about__principle:nth-child(3),
  .salon-about__format-card:nth-child(3),
  .salon-about__perspective-card:nth-child(3) {
    grid-column: 1 / -1;
  }

  .salon-about__principle:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .salon-about__boundaries-panel {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: var(--space-6);
  }

  .salon-about__boundaries-copy,
  .salon-about__boundaries-media {
    grid-column: 1 / -1;
  }

  .salon-about__boundaries-copy {
    max-width: 37.5rem;
  }
}

@media (max-width: 840px) {
  .salon-about__faq-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .salon-about__faq-answer {
    max-width: 42.5rem;
  }
}

@media (max-width: 820px) {
  .salon-about__closing-panel {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-6);
    padding: var(--space-6);
  }

  .salon-about__closing-copy,
  .salon-about__closing-action {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .salon-about__clarification-band {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: var(--space-4);
  }

  .salon-about__clarification-band > .technical-label,
  .salon-about__clarification-band > p {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .salon-about__hero-grid,
  .salon-about__table-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .salon-about__hero-copy,
  .salon-about__hero-media,
  .salon-about__table-media,
  .salon-about__table-copy {
    grid-column: 1 / -1;
  }

  .salon-about__hero-copy {
    gap: var(--space-4);
  }

  .salon-about__hero-copy h1 {
    font-size: clamp(2.5rem, 12vw, 3.5rem);
  }

  .salon-about__hero-copy > .lead {
    max-width: 34ch;
  }

  .salon-about__hero-media {
    margin-top: var(--space-2);
  }

  .salon-about__hero-media img {
    aspect-ratio: 4 / 3;
  }

  .salon-about__principle-grid,
  .salon-about__format-grid,
  .salon-about__perspective-grid,
  .salon-about__path-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .salon-about__principle:nth-child(3),
  .salon-about__format-card:nth-child(3),
  .salon-about__perspective-card:nth-child(3) {
    grid-column: 1 / -1;
  }

  .salon-about__principle + .salon-about__principle {
    border-left: 0;
    padding-left: 0;
  }

  .salon-about__boundaries-panel {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5);
  }

  .salon-about__boundaries-copy,
  .salon-about__boundaries-media {
    grid-column: 1 / -1;
  }

  .salon-about__boundaries-media {
    order: 2;
  }

  .salon-about__boundaries-copy {
    order: 1;
  }

  .salon-about__not-here {
    order: 3;
  }

  .salon-about__table-media {
    order: 2;
  }

  .salon-about__table-copy {
    order: 1;
  }

  .salon-about__table-copy .technical-label,
  .salon-about__table-copy h2 {
    order: 0;
  }

  .salon-about__table-media + .salon-about__table-copy {
    display: contents;
  }

  .salon-about__table-grid {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .salon-about__table-copy {
    display: flex;
  }

  .salon-about__table-copy .technical-label {
    order: -4;
  }

  .salon-about__table-copy h2 {
    order: -3;
  }

  .salon-about__table-media {
    order: -2;
  }

  .salon-about__table-copy > p {
    order: -1;
  }

  .salon-about__rhythm p {
    grid-template-columns: minmax(5.25rem, 0.3fr) minmax(0, 1fr);
  }

  .salon-about__format-card,
  .salon-about__perspective-card {
    padding: var(--space-5);
  }

  .salon-about__path-step {
    grid-template-columns: minmax(3rem, auto) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
  }

  .salon-about__path-step > div {
    grid-column: 2 / span 1;
  }

  .salon-about__path-step .salon-about__number {
    grid-column: 1 / span 1;
    font-size: 2.5rem;
  }
}

@media (max-width: 480px) {
  .salon-about__hero-invitation .button-primary,
  .salon-about__closing-action .button-primary {
    width: 100%;
  }

  .salon-about__boundaries-panel,
  .salon-about__closing-panel {
    padding: var(--space-5);
  }

  .salon-about__format-card,
  .salon-about__perspective-card {
    padding: var(--space-4);
  }

  .salon-about__hero-media figcaption,
  .salon-about__boundaries-media figcaption,
  .salon-about__table-media figcaption {
    padding-inline: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .salon-about__hero-media img,
  .salon-about__reveal {
    transition: none;
    transform: none;
  }

  .salon-about__reveal {
    opacity: 1;
  }
}