/* IRMA'S — page sections */

/* ── brand statement ───────────────────────────────────────────────── */

.statement {
  background:
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  position: relative;
}
/* No max-width here: this element also carries .wrap, and narrowing it would
   centre the block and leave the statement indented against every other
   section. The measure is held by the title and body instead. */
.statement__inner {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.4rem);
  justify-items: start;
}
.statement__title {
  font-size: var(--fs-h2);
  color: var(--cream);
  max-width: 16ch;
}
.statement__body {
  display: grid;
  gap: 1.1rem;
  max-width: var(--measure);
}
.statement__body p { color: var(--text-soft); font-size: var(--fs-lead); line-height: 1.62; }

/* A quiet mark of the salon's own gold, aligned to the text rather than
   floating decoratively. */
.statement__mark {
  width: 3.25rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

/* ── services ──────────────────────────────────────────────────────── */

.services { background: var(--ink-2); }

.services__head {
  display: grid;
  gap: 0.9rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.25rem);
  max-width: 46rem;
}
.services__title { font-size: var(--fs-h2); color: var(--cream); }

.services__list {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Editorial alternating rows — image and text share a baseline, no cards,
   no shadows, no floating panels. */
.service {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: center;
}
@media (min-width: 820px) {
  .service { grid-template-columns: 1.05fr 1fr; }
  .service:nth-child(even) .service__media { order: 2; }
}

.service__media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--char);
}
.service__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 908 / 512;
  object-fit: cover;
  /* slow, restrained scale on scroll — set by motion.js, never bouncing */
  transform: scale(1.04);
  will-change: transform;
}

.service__text { display: grid; gap: 0.85rem; align-content: center; }
.service__index {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.service__name { font-size: var(--fs-h3); color: var(--cream); }
.service__lede { color: var(--cream-dim); font-size: var(--fs-lead); }
.service__body { color: var(--text-mute); max-width: 34rem; }

.services__foot {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  text-align: center;
}
.services__note { font-size: var(--fs-small); color: var(--text-mute); }

/* ── the Irma's experience ─────────────────────────────────────────── */

.experience {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}

.experience__head {
  display: grid;
  gap: 0.9rem;
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.experience__title { font-size: var(--fs-h2); color: var(--cream); }

/* One tall frame carrying the room, with the written detail beside it. */
.experience__body {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
  .experience__body { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
}

.experience__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--char);
}
.experience__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 908 / 512;
  object-fit: cover;
  transform: scale(1.05);
  will-change: transform;
}
.experience__caption {
  padding: 0.9rem 1.1rem;
  font-size: var(--fs-small);
  color: var(--text-mute);
  border-top: 1px solid var(--line-soft);
  background: var(--ink-2);
}

.experience__points {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.1rem);
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}
.experience__point { display: grid; gap: 0.5rem; }
.experience__point h3 {
  font-size: var(--fs-h3);
  color: var(--cream);
  font-weight: 500;
}
.experience__point p { color: var(--text-mute); }
.experience__point::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.65;
}

/* ── gallery ───────────────────────────────────────────────────────── */

.gallery { background: var(--ink-2); }

.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.gallery__title { font-size: var(--fs-h2); color: var(--cream); }
.gallery__hint { font-size: var(--fs-small); color: var(--text-mute); }

/* Desktop: an editorial grid. Phones: a real swipe filmstrip with snap. */
.gallery__strip {
  display: grid;
  grid-auto-flow: column;
  /* leaves a clear slice of the next frame showing, so the strip reads as
     swipeable without needing to be told */
  grid-auto-columns: min(72vw, 20rem);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.75rem;
  margin: 0;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-deep) transparent;
  /* the strip scrolls, the page never does sideways */
  overscroll-behavior-x: contain;
}
.gallery__strip::-webkit-scrollbar { height: 3px; }
.gallery__strip::-webkit-scrollbar-thumb { background: var(--gold-deep); }

@media (min-width: 900px) {
  .gallery__strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    gap: 1.1rem;
    padding-bottom: 0;
  }
  /* Hierarchy in three clean bands — a pair, a trio, then one wide anchor.
     Every item in a band shares a width, so with one fixed aspect ratio the
     rows come out even and no frame is left with dead space beneath it. */
  .gallery__item:nth-child(1) { grid-column: span 3; }
  .gallery__item:nth-child(2) { grid-column: span 3; }
  .gallery__item:nth-child(3) { grid-column: span 2; }
  .gallery__item:nth-child(4) { grid-column: span 2; }
  .gallery__item:nth-child(5) { grid-column: span 2; }
  .gallery__item:nth-child(6) { grid-column: span 6; }

  /* There is nothing to swipe once this is a grid. */
  .gallery__hint { display: none; }
}

.gallery__item {
  scroll-snap-align: center;
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--char);
}
/* One aspect ratio everywhere — nothing is ever distorted to fit. */
.gallery__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 908 / 512;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) {
  .gallery__item:hover img { transform: scale(1.035); }
}
.gallery__caption {
  padding: 0.7rem 0.95rem;
  font-size: var(--fs-small);
  color: var(--text-mute);
  border-top: 1px solid var(--line-soft);
  background: var(--ink);
}

/* ── visit ─────────────────────────────────────────────────────────── */

.visit {
  background:
    linear-gradient(180deg, var(--ink) 0%, var(--green) 190%);
  position: relative;
}

.visit__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 880px) {
  .visit__inner { grid-template-columns: 1fr 1fr; align-items: start; }
}

.visit__head { display: grid; gap: 1rem; align-content: start; }
.visit__title { font-size: var(--fs-h2); color: var(--cream); }
.visit__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.6rem; }

.visit__details {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.visit__row {
  display: grid;
  gap: 0.35rem 1.5rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 520px) {
  .visit__row { grid-template-columns: 8.5rem 1fr; align-items: baseline; }
}
.visit__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.visit__value { margin: 0; color: var(--cream); }
.visit__value a {
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
}
.visit__value a:hover { border-bottom-color: var(--gold); color: var(--gold-lit); }
.visit__hours { display: grid; gap: 0.3rem; margin: 0; }
.visit__hours div { display: flex; flex-wrap: wrap; gap: 0.15rem 0.75rem; }
.visit__hours dt { color: var(--text-soft); margin: 0; }
.visit__hours dd { color: var(--cream); margin: 0; font-variant-numeric: tabular-nums; }
.visit__pending { color: var(--text-mute); font-size: var(--fs-small); }

/* ── finale ────────────────────────────────────────────────────────── */

.finale {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  text-align: center;
}
.finale__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0.26;
  filter: saturate(0.9);
}
.finale__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(110% 80% at 50% 50%, rgba(16, 14, 12, 0.42) 0%, var(--ink) 78%);
}
.finale__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  max-width: 44rem;
  margin-inline: auto;
}
.finale__title { font-size: var(--fs-h2); color: var(--cream); }
.finale__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
@media (max-width: 600px) {
  .finale__actions { width: 100%; flex-direction: column; }
  .finale__actions .btn { width: 100%; }
  .visit__actions { width: 100%; flex-direction: column; }
  .visit__actions .btn { width: 100%; }
}

/* ── footer ────────────────────────────────────────────────────────── */

.footer {
  background: var(--ink);
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 780px) {
  .footer__inner { grid-template-columns: 1.2fr 1fr 1fr; }
}
.footer__brand { display: grid; gap: 0.6rem; align-content: start; }
.footer__script {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--red-lit);
  line-height: 1;
}
.footer__name {
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
}
.footer__note { font-size: var(--fs-small); color: var(--text-mute); max-width: 26rem; }

.footer__col { display: grid; gap: 0.7rem; align-content: start; }
.footer__h {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; }
/* inline-flex + min-height gives each link a genuine tap target */
.footer__list a {
  text-decoration: none;
  color: var(--text-soft);
  font-size: var(--fs-small);
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
}
.footer__list a:hover { color: var(--gold-lit); }
.footer__hours { margin: 0; display: grid; gap: 0.4rem; font-size: var(--fs-small); }
.footer__hours div { display: grid; gap: 0.1rem; }
.footer__hours dt { color: var(--text-mute); margin: 0; }
.footer__hours dd { color: var(--cream-dim); margin: 0; font-variant-numeric: tabular-nums; }

.footer__base {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--text-mute);
}