/* Adara — Home. Each section is its own spread on the shared 12-column grid (6 on mobile). */

/* ================= HERO ================= */
.hero {
  padding-top: clamp(1.5rem, 4vw, 3.5rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  align-items: start;
}
.hero > * { grid-column: 1 / -1; }

/* No z-index on the h1: that would isolate it and the logo's multiply would show its white ground.
   Stack the blended element itself instead. */
.hero__mark { margin: 0; }
.hero__logo { position: relative; z-index: 2; width: 100%; }

.hero__photo {
  aspect-ratio: 1 / 1.12;
  margin-top: 1.75rem;
  margin-left: 12%;
}
/* Label in the bottom-right corner: clear of the wordmark (top left) and the headline (bottom left).
   On mobile it sits a little higher so the overlapping first headline line never meets it. */
.hero__photo > .ph .ph__label {
  left: auto; right: 1rem;
  bottom: calc(13% + 4.25rem);
  max-width: 20ch;
  text-align: right;
}

/* Keeps the overlapping headline readable: a soft cream fade where the lines cross the photo
   (lower left on mobile, left edge on desktop). */
.hero__photo::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top right, color-mix(in srgb, var(--cream) 90%, transparent) 0%, color-mix(in srgb, var(--cream) 60%, transparent) 30%, transparent 58%);
  pointer-events: none;
}
@media (min-width: 900px) {
  .hero__photo::after {
    background: linear-gradient(to right, color-mix(in srgb, var(--cream) 80%, transparent) 0%, transparent 22%);
  }
}

.hero__line {
  position: relative; z-index: 2;
  margin-top: -1.15em;          /* the first line settles over the photo's lower edge */
  /* The three lines are set by hand and never wrap; the size shrinks so
     the longest ("the ways it feels", ~7.2em) always fits the column. */
  font-size: min(var(--t-l), calc((100vw - 2 * var(--pad)) / 7.4));
}
.hero__line .line { white-space: nowrap; }

.hero__body { margin-top: 2.25rem; }
.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 2rem;
}

@media (min-width: 900px) {
  .hero { grid-template-rows: auto auto 1fr; min-height: calc(100svh - 5.5rem); }
  .hero__mark  { grid-column: 1 / 8; grid-row: 1; padding-top: clamp(1rem, 4vh, 3rem); }
  .hero__photo {
    grid-column: 6 / 13; grid-row: 1 / 4;
    align-self: stretch;
    aspect-ratio: auto;
    min-height: min(84vh, 60rem);
    margin: 0;
  }
  .hero__line  { grid-column: 1 / 10; grid-row: 2; margin-top: clamp(2rem, 4vw, 4rem); font-size: var(--t-l); }
  .hero__photo > .ph .ph__label { bottom: calc(1rem + 13%); }
  .hero__body  { grid-column: 1 / 5; grid-row: 3; align-self: end; margin-top: 3rem; }
}

/* Hero entrance: photo opens upward, lines rise, wordmark settles, then the details */
.motion .hero__photo {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1600ms var(--ease);
}
.motion .hero__logo {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 1400ms var(--ease) 700ms, transform 1400ms var(--ease) 700ms;
}
.motion .is-loaded .hero__photo { clip-path: inset(0); }
.motion .is-loaded .hero__logo { opacity: 1; transform: none; }

.motion .hero__line .line:nth-child(1) > span { transition-delay: 450ms; }
.motion .hero__line .line:nth-child(2) > span { transition-delay: 560ms; }
.motion .hero__line .line:nth-child(3) > span { transition-delay: 670ms; }
.motion .hero__body [data-reveal] { transition-delay: 1050ms; }
.motion .hero__body .hero__actions { transition-delay: 1200ms; }

/* ================= OPENING EDITORIAL ================= */
.editorial {
  padding-block: var(--space-section);
  row-gap: clamp(2.5rem, 5vw, 5rem);
}
.editorial__head {
  grid-column: 1 / -1;
  font-size: var(--t-xl);
}
.editorial__head .line:nth-child(2) { padding-left: 1.4em; }

.editorial__copy { grid-column: 2 / -1; }

.editorial__pull {
  grid-column: 1 / 6;
  font-size: var(--t-s);
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.editorial__pull::before {
  content: "";
  display: block;
  width: 3.5rem; height: 1px;
  margin-bottom: 1.5rem;
  background: var(--terracotta);
}

@media (min-width: 900px) {
  .editorial__head { grid-column: 1 / 12; margin-left: calc(-.04em); }
  .editorial__head .line:nth-child(2) { padding-left: calc(200% / 12 + var(--gap)); }
  .editorial__copy { grid-column: 7 / 11; grid-row: 2; font-size: 1.125rem; }
  .editorial__pull { grid-column: 2 / 6; grid-row: 2; align-self: end; transform: translateY(45%); }
}

/* ================= SERVICES (contents page) ================= */
.services {
  padding-bottom: var(--space-section);
  align-items: start;
}
.services__list { grid-column: 1 / -1; counter-reset: none; padding: 0; margin: 0; list-style: none; }

.svc {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 1rem;
  padding-block: 2.25rem 2.5rem;
  border-top: 1px solid var(--hairline);
}
.svc:last-child { border-bottom: 1px solid var(--hairline); }
.svc::before { /* terracotta thread that runs along the active row */
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--slow) var(--ease);
}
.svc.is-active::before { transform: scaleX(1); }

.svc__num {
  grid-column: 1; grid-row: 1 / 3;
  padding-top: .1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1;
}
.svc__head { grid-column: 2; font-weight: 400; }
.svc__head a { display: block; text-decoration: none; }
.svc__head a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole row is the link */
.svc__head a:focus-visible { outline: none; }
.svc:focus-within { outline: 2px solid var(--espresso); outline-offset: 6px; }
.svc:has(a:focus:not(:focus-visible)) { outline: none; }

.svc__label { display: block; margin-bottom: .9rem; }
.svc__title {
  display: block;
  font-size: var(--t-m);
  line-height: 1.02;
  max-width: 17ch;
}

.svc__desc { grid-column: 2; margin-top: 1rem; max-width: 44ch; }

.svc__photo {
  grid-column: 1 / -1;
  aspect-ratio: 5 / 4;
  margin-top: 1.75rem;
}
.svc:nth-child(odd) .svc__photo { margin-right: 14%; }
.svc:nth-child(even) .svc__photo { margin-left: 14%; }

.services__stage { display: none; }

@media (min-width: 900px) {
  .services__list { grid-column: 1 / 8; }
  .svc { grid-template-columns: 5rem minmax(0, 1fr); padding-block: 2.75rem 3rem; cursor: pointer; }
  .svc__num { font-size: 1.375rem; }
  .svc__photo { display: none; }

  .services__stage {
    display: block;
    grid-column: 9 / 13; grid-row: 1;
    position: sticky; top: 12vh;
    height: 76vh;
  }
  .stage { position: relative; height: 100%; overflow: hidden; }
  .stage__item {
    position: absolute; inset: 0;
    opacity: 0;
    transform: scale(1.045);
    transition: opacity 1100ms var(--ease), transform 1600ms var(--ease);
  }
  .stage__item.is-active { opacity: 1; transform: none; }
  .stage__item img { width: 100%; height: 100%; object-fit: cover; }
}

/* ================= NATURAL TEXTURE FEATURE ================= */
.texture {
  background: var(--espresso);
  color: var(--cream);
  padding-block: var(--space-section) clamp(3.5rem, 6vw, 6rem);
  overflow: hidden;
}
.texture__intro { row-gap: 2.5rem; align-items: end; }
.texture__head { grid-column: 1 / -1; font-size: var(--t-l); }
.texture__head .line:nth-child(2) { padding-left: .9em; }
.texture__head .line:nth-child(3) { padding-left: 1.8em; }

.texture__copy { grid-column: 2 / -1; display: grid; gap: 2rem; justify-items: start; }

.texture__rail {
  margin-top: clamp(3.5rem, 7vw, 7rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-light) transparent;
}
.texture__strip {
  display: flex;
  gap: var(--gap);
  width: max-content;
  padding-inline: var(--pad);
  will-change: transform;
}
.texture__frame {
  width: 72vw;
  aspect-ratio: 3 / 4;
  scroll-snap-align: center;
}
.texture__frame--low { margin-top: 3rem; }
.texture__frame img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .texture__head { grid-column: 1 / 9; grid-row: 1; }
  .texture__copy { grid-column: 9 / 13; grid-row: 1; align-self: end; padding-bottom: .4rem; }
  .texture__rail { overflow: visible; scroll-snap-type: none; }
  .texture__frame { width: 30vw; max-width: 34rem; }
  .texture__frame--low { margin-top: 6rem; }
}

/* ================= ADARA REVISITS (terracotta banner) ================= */
.revisits {
  --breakout: 4rem;                                   /* how far the photo rises into the cream above */
  margin-top: calc(var(--breakout) + 2rem);
  margin-bottom: var(--space-section);
  padding-bottom: clamp(4.5rem, 8vw, 8rem);
  background: var(--terracotta);
  color: var(--espresso);
}
.revisits .grid { row-gap: 2.5rem; }
.revisits__photo {
  grid-column: 2 / -1;
  aspect-ratio: 4 / 5;
  margin-top: calc(-1 * var(--breakout));
}
.revisits__head { grid-column: 1 / -1; font-size: var(--t-xl); }
.revisits__head .line:nth-child(2) { padding-left: .7em; }
.revisits__copy { grid-column: 1 / -1; display: grid; gap: 2rem; justify-items: start; }
.revisits__copy p { font-weight: 400; }

@media (min-width: 900px) {
  .revisits { --breakout: clamp(6rem, 9vw, 9rem); margin-top: calc(var(--breakout) + clamp(1.5rem, 2.5vw, 2.5rem)); }
  .revisits .grid { row-gap: clamp(2.5rem, 3.5vw, 3.5rem); }
  /* Photo and its copy stack as one column on the right; the headline anchors to the column's foot. */
  .revisits__photo { grid-column: 8 / 12; grid-row: 1; }
  .revisits__copy  { grid-column: 8 / 12; grid-row: 2; }
  .revisits__head  { grid-column: 1 / 8; grid-row: 1 / 3; align-self: end; margin-bottom: -.12em; }
}

/* ================= CLOSING ================= */
.closing {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--space-section) * 1.15);
  row-gap: 2.5rem;
}
.closing__mark {
  position: absolute;
  top: clamp(2rem, 6vw, 5rem);
  right: -26vw;
  width: min(78vw, 48rem);
  z-index: 0;
}
.closing__head, .closing__copy { position: relative; z-index: 1; }
.closing__head { grid-column: 1 / -1; font-size: var(--t-xxl); line-height: .9; }
.closing__head .line:nth-child(2) { padding-left: .55em; }

.closing__copy { grid-column: 1 / -1; display: grid; gap: 2rem; justify-items: start; }
.closing__line { font-size: var(--t-s); line-height: 1.2; max-width: 14ch; }
.closing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }

@media (min-width: 900px) {
  .closing__mark { right: -9vw; top: 50%; margin-top: calc(min(46vw, 50rem) * -.47); width: min(46vw, 50rem); }
  .closing__head { grid-column: 1 / 10; }
  .closing__copy { grid-column: 2 / 7; margin-top: 1rem; }
}