/* Homepage sections. One file, in scroll order. */

/* ---- 1. hero — one photograph, one sentence, one number ------------ */

.hero { padding-block: var(--s-6) var(--s-5); }

.hero__grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-6); }
}

.hero__say { max-width: 34rem; }
.hero .lead { margin-top: var(--s-3); color: var(--ink-soft); max-width: 42ch; }

.hero__act {
  margin-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

/* Media is a guest inside the page's own frame — never bleeds to the edge. */
.hero__shot {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink);
}
.hero__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.03);
}
@media (min-width: 900px) { .hero__shot { aspect-ratio: 5 / 6; } }

.hero__where {
  margin-top: var(--s-5);
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .hero__where { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }

.where { padding-top: var(--s-2); border-top: var(--hair) solid var(--blush); }
.where h2 { font-size: var(--t-body); font-weight: 400; margin-bottom: 2px; }
.where p { font-family: var(--util); font-size: var(--t-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---- 2. the answer — what people ask at the door ------------------- */

.answer {
  padding-block: var(--s-7);
  border-top: var(--hair) solid var(--blush);
}
.answer__grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .answer__grid { grid-template-columns: 15rem 1fr; gap: var(--s-6); }
}
.answer .lead { max-width: 46ch; }
.answer .prose { margin-top: var(--s-3); color: var(--ink-soft); }

/* ---- 3. the rail — the signature ----------------------------------
   Their photographs slide through a fixed frame as the services scroll,
   like garments moving on a conveyor. Real photos only. */

.rail { padding-block: var(--s-6) var(--s-7); }

.rail__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  padding-top: var(--s-2);
  border-top: var(--hair) solid var(--blush);
  margin-bottom: var(--s-5);
}

.rail__body { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }

@media (min-width: 1024px) {
  .rail__body { grid-template-columns: 0.82fr 1.18fr; gap: var(--s-7); align-items: start; }
}

.rail__frame { display: none; }

@media (min-width: 1024px) {
  .rail__frame {
    display: block;
    position: sticky;
    top: 104px;
    height: min(68vh, 36rem);
    overflow: hidden;
    background: var(--deep);
  }
  .rail__strip {
    /* The strip is N frames tall, so a % translate steps by exactly one
       frame. Sizing it at 100% instead silently caps travel at one frame. */
    display: grid;
    grid-auto-rows: calc(100% / var(--n, 6));
    height: calc(100% * var(--n, 6));
    will-change: transform;
    transition: transform 620ms var(--ease);
  }
  .rail__strip[data-scrub="on"] { transition: none; }
  .rail__shot { overflow: hidden; }
  .rail__shot img { width: 100%; height: 100%; object-fit: cover; }
}

.rail__list { display: grid; }

.svc {
  padding-block: var(--s-5);
  border-top: var(--hair) solid var(--blush);
}
@media (min-width: 1024px) {
  .svc {
    min-height: 68vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--s-6);
  }
}

.svc__no {
  font-family: var(--util);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  display: block;
  margin-bottom: var(--s-2);
}

.svc__shot {
  margin: var(--s-3) 0 var(--s-4);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--deep);
}
.svc__shot img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .svc__shot { display: none; } }

.svc h3 { font-size: var(--t-title); font-weight: 300; line-height: 1.08; letter-spacing: -0.015em; }
.svc__say { margin-top: var(--s-3); color: var(--ink-soft); max-width: 44ch; }

.svc__act {
  margin-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

.more {
  font-family: var(--util);
  font-size: var(--t-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: var(--hair) solid var(--ink);
  padding-bottom: 2px;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.more:hover { color: var(--ink-soft); border-bottom-color: var(--blush); }

/* Price rows — Hermès law. Name and price are the same size, the same
   weight and the same ink. The number is found by position, not contrast. */
.plist { margin-top: var(--s-4); max-width: 26rem; }
.plist li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: 0.7rem;
  border-top: var(--hair) solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.plist li:first-child { border-top-color: var(--blush); }
.plist span:last-child {
  font-family: var(--util);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plist small { display: block; font-size: var(--t-small); color: var(--ink-soft); }

/* ---- 4. the two laundries — the thing nobody knows ----------------- */

.two {
  background: var(--petal);
  padding-block: var(--s-7);
}
.two__head { max-width: 44rem; margin-bottom: var(--s-5); }
.two__grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 860px) { .two__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }

.two__col { padding-top: var(--s-2); border-top: var(--hair) solid var(--ink); }
.two__col h3 { font-size: var(--t-lead); font-weight: 400; margin-bottom: var(--s-2); }
.two__col p { color: var(--ink-soft); max-width: 40ch; }
.two__col .plist { margin-top: var(--s-3); }
.two__col .plist li:first-child { border-top-color: color-mix(in srgb, var(--ink) 30%, transparent); }

/* ---- 5. the shops -------------------------------------------------- */

.shops { padding-block: var(--s-7); }
.shops__head { margin-bottom: var(--s-5); padding-top: var(--s-2); border-top: var(--hair) solid var(--blush); }
.shops__grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 860px) { .shops__grid { grid-template-columns: 1fr 1fr; } }

.shop__shot { aspect-ratio: 4 / 3; overflow: hidden; background: var(--deep); margin-bottom: var(--s-3); }
.shop__shot img { width: 100%; height: 100%; object-fit: cover; }
.shop h3 { font-size: var(--t-lead); font-weight: 400; }
.shop__addr { font-family: var(--util); font-size: var(--t-small); color: var(--ink-soft); margin-top: 2px; }
.shop p { margin-top: var(--s-2); color: var(--ink-soft); max-width: 42ch; }
.shop .hours { color: var(--ink-soft); margin-top: var(--s-3); }
.shop .hours b { color: var(--ink); }

/* ---- 6. the dark band — one chapter break ------------------------- */

.band {
  background: var(--deep);
  color: var(--paper);
  padding-block: var(--s-7);
}
.band .label { color: color-mix(in srgb, var(--paper) 60%, transparent); }
.band__grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .band__grid { grid-template-columns: 15rem 1fr; gap: var(--s-6); } }
.band .prose { color: color-mix(in srgb, var(--paper) 80%, transparent); margin-top: var(--s-3); }
.band .title { color: var(--paper); }

/* ---- 7. faq — the AEO engine --------------------------------------- */

.faq { padding-block: var(--s-7); }
.faq__head { margin-bottom: var(--s-5); padding-top: var(--s-2); border-top: var(--hair) solid var(--blush); }
.faq__list { display: grid; gap: 0; }

.qa {
  display: grid;
  gap: var(--s-2) var(--s-5);
  grid-template-columns: 1fr;
  padding-block: var(--s-4);
  border-top: var(--hair) solid color-mix(in srgb, var(--ink) 14%, transparent);
}
@media (min-width: 900px) { .qa { grid-template-columns: 24rem 1fr; } }
.qa h3 { font-size: var(--t-body); font-weight: 400; line-height: 1.4; }
.qa p { color: var(--ink-soft); max-width: 56ch; }
.qa p + p { margin-top: var(--s-2); }

/* ---- closing call -------------------------------------------------- */

.closer { padding-block: var(--s-7); text-align: left; }
.closer__in { padding-top: var(--s-2); border-top: var(--hair) solid var(--blush); }
.closer .display { max-width: 18ch; }
.closer__act { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }