/* Home hero: copy-first, subtle side proof rail (not a competing wall) */

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: auto;
  padding: 96px 0 36px;
  display: block;
}

.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(10, 7, 17, 0.5) 0%, rgba(10, 7, 17, 0.9) 72%, var(--void) 100%),
    url("/clients/everlane-digital/assets/gen/hero-atmosphere.jpg") center / cover no-repeat,
    url("/clients/everlane-digital/assets/gen/ev-atm-gradient-field.jpg") center / cover no-repeat;
  pointer-events: none;
}

.hero__glow {
  position: absolute;
  left: -18%;
  top: -8%;
  width: 62%;
  height: 52%;
  background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.2), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.hero__layout {
  position: relative;
  z-index: 2;
  width: min(100% - var(--gutter) * 2, var(--shell-wide));
  margin-inline: auto;
  display: grid;
  gap: 28px;
  align-items: center;
}

@media (min-width: 900px) {
  .hero {
    min-height: min(100svh, 820px);
    display: grid;
    align-items: center;
    padding: 100px 0 56px;
  }

  .hero__layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 340px);
    gap: clamp(28px, 4vw, 48px);
  }
}

@media (min-width: 1180px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 380px);
  }
}

.hero__copy {
  max-width: none;
}

.hero__copy .h-hero {
  margin-top: 12px;
  /* Let the line breathe across the left column (was 13ch and stacked into 5 lines) */
  max-width: 18ch;
}

.hero__copy .lede {
  margin-top: 16px;
  max-width: 42ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.hero__foot {
  margin: 18px 0 0;
  font-size: 0.88rem;
  color: var(--mute-2);
  max-width: 44ch;
}

/* Small framed shot (shared by rail + peek) */
.frame {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--void-3);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
}

.frame__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  flex: 0 0 auto;
}

.frame__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(239, 234, 247, 0.28);
}

.frame__dot:nth-child(1) {
  background: #ff5f57;
}
.frame__dot:nth-child(2) {
  background: #febc2e;
}
.frame__dot:nth-child(3) {
  background: #28c840;
}

.frame__view {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0a0711;
}

.frame__view img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Desktop: vertical proof rail — JS drives scroll; grab to scrub */
.hero__rail {
  display: none;
  position: relative;
  height: min(68vh, 560px);
  overflow: hidden;
  opacity: 0.86;
  cursor: grab;
  touch-action: none;
  user-select: none;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

.hero__rail.is-dragging {
  cursor: grabbing;
}

@media (min-width: 900px) {
  .hero__rail {
    display: block;
  }
}

.hero__rail-track {
  display: flex;
  flex-direction: column;
  gap: 16px;
  will-change: transform;
  /* Fallback only if JS never marks the track; motion.js takes over otherwise */
  animation: rail-up 90s linear infinite;
}

.hero__rail-track[data-marquee] {
  animation: none;
}

.hero__rail .frame {
  flex: 0 0 auto;
  width: 100%;
  pointer-events: none;
}

.hero__rail .frame__view {
  aspect-ratio: 16 / 10;
}

@keyframes rail-up {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -50%, 0);
  }
}

/* Phone / tablet: short horizontal peek under copy */
.hero__peek {
  display: block;
  margin: 28px calc(50% - 50vw) 0;
  width: 100vw;
  overflow: hidden;
  opacity: 0.88;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hero__peek.is-dragging {
  cursor: grabbing;
}

@media (min-width: 480px) {
  .hero__peek {
    margin-top: 36px;
  }
}

@media (min-width: 900px) {
  .hero__peek {
    display: none;
  }
}

.hero__peek-track {
  display: flex;
  gap: 14px;
  width: max-content;
  padding-inline: var(--gutter);
  will-change: transform;
  animation: peek-x 80s linear infinite;
}

.hero__peek-track[data-marquee] {
  animation: none;
}

.hero__peek-track .frame {
  flex: 0 0 auto;
  width: min(40vw, 140px);
  border-radius: var(--radius-md);
  pointer-events: none;
}

.hero__peek-track .frame__bar {
  display: none;
}

.hero__peek-track .frame__view {
  aspect-ratio: 9 / 16;
}

@keyframes peek-x {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__rail-track,
  .hero__peek-track {
    animation: none !important;
  }
}

/* Story pin: needs >1 viewport of travel so lines accumulate on scroll.
   (100vh made stage == pin and lit every line at once.) */
/* Four beats of scroll travel, not the six it used to take. The old height held one
   sentence on an empty gradient for over two screens, which read as the page having died. */
.story-pin {
  position: relative;
  height: 190vh;
}

.story-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-items: center;
  overflow: clip;
  background: var(--void);
}

/* A real street rather than an abstract field: the closing argument of the page should be
   the kind of place these sites are actually for. */
.story-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  filter: brightness(1.32) saturate(1.08);
}

/* Enough veil to hold large display type at contrast, and no more: the point of the band is
   that you can see the street. */
.story-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(66% 52% at 50% 44%, rgba(10, 7, 17, 0.62), transparent 72%),
    linear-gradient(180deg, rgba(10, 7, 17, 0.82), rgba(10, 7, 17, 0.3) 44%, rgba(10, 7, 17, 0.9));
}

.story-inner {
  position: relative;
  z-index: 1;
  width: min(100% - var(--gutter) * 2, 760px);
  margin-inline: auto;
  text-align: center;
}

.story-line {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4.5vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.story-line + .story-line {
  margin-top: 14px;
}

.story-line em {
  font-style: normal;
  color: var(--violet-hi);
}

/* The payoff beat: the towns the live work is actually in. Named places are the one trust
   signal a stock-looking page can never fake. */
.story-places {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line);
}

.story-places ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.story-places li {
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: rgba(239, 234, 247, 0.04);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--bone);
  white-space: nowrap;
}

html.reveal-ready [data-story-line] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.45s var(--soft-out),
    transform 0.45s var(--soft-out);
}

html.reveal-ready [data-story-line].is-on {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .story-pin {
    height: auto;
    padding: var(--band) 0;
  }

  .story-stage {
    position: relative;
    height: auto;
    padding: 48px 0;
  }

  html.reveal-ready [data-story-line] {
    opacity: 1;
    transform: none;
  }
}

/* Trust */
.trust {
  display: grid;
  gap: 24px;
  align-items: center;
}

@media (min-width: 860px) {
  .trust {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 40px;
  }
}

.trust__shot {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background: var(--void-3);
}

.trust__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Home breath */
.home-breath {
  position: relative;
  isolation: isolate;
  min-height: min(52vh, 420px);
  display: grid;
  align-items: end;
  overflow: clip;
  padding: clamp(48px, 8vw, 80px) 0;
}

.home-breath__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-breath__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-breath__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 7, 17, 0.35), rgba(10, 7, 17, 0.88));
  pointer-events: none;
}

.home-breath .shell {
  position: relative;
  z-index: 2;
}

.home-breath .h-band {
  max-width: 16ch;
}

.home-breath .lede {
  margin-top: 14px;
  max-width: 40ch;
}

/* Offer with media */
.offer--visual .offer__card {
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-lg);
}

.offer__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--void-4);
}

.offer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--soft-out);
}

.offer__card:hover .offer__media img {
  transform: scale(1.04);
}

.offer__body {
  padding: 22px 20px 24px;
}

.offer__body .offer__n {
  margin-bottom: 12px;
}

/* Start with side photo */
.start-grid {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 860px) {
  .start-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
  }
}

.start-grid .trust__shot {
  aspect-ratio: 4 / 5;
}

/* Pick / work home */
.pick__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 24px;
}

.pick__head .h-band {
  max-width: 12ch;
}

.pick__bento {
  display: grid;
  gap: 12px;
}

.pick__card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--bone);
  background: var(--void-3);
  min-height: 200px;
}

@media (min-width: 860px) {
  .pick__bento {
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: 1fr 1fr;
    min-height: 480px;
  }

  .pick__card {
    min-height: 0;
    height: 100%;
  }

  .pick__card--lead {
    grid-row: 1 / span 2;
  }
}

.pick__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.7s var(--soft-out);
}

.pick__card:hover img {
  transform: scale(1.04);
}

.pick__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 7, 17, 0.9));
  pointer-events: none;
}

.pick__cap {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1;
}

.pick__cap span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet-hi);
  margin-bottom: 4px;
}

.pick__cap strong {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
}

.pick__rail {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}

.pick__mini {
  position: relative;
  flex: 0 0 min(70vw, 220px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--bone);
  scroll-snap-align: start;
  background: var(--void-3);
}

@media (min-width: 860px) {
  .pick__mini {
    flex: 1 1 0;
    min-width: 0;
  }
}

.pick__mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--soft-out);
}

.pick__mini:hover img {
  transform: scale(1.04);
}

.pick__mini::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10, 7, 17, 0.92));
}

.pick__mini span {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
}

/* Ask */
.ask {
  position: relative;
  overflow: clip;
}

.ask::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(10, 7, 17, 0.78), rgba(10, 7, 17, 0.94)),
    url("/clients/everlane-digital/assets/gen/atm-03.jpg") center / cover no-repeat;
  opacity: 0.7;
  pointer-events: none;
}

.ask__glow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -30%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.18), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.ask__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 32px;
  align-items: start;
}

@media (min-width: 860px) {
  .ask__grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}