/* ============================================================
   Oakly® — Homepage below the hero
   Beige canvas (#f3ede4), frosted transparencies, and layered
   micro-animations that echo the hero's blur language.
   ============================================================ */

:root {
  --beige-deep: #e9ddc9;
  --beige-mid:  #eee6d8;
  --frost:      rgba(251, 248, 243, 0.72);
  --frost-soft: rgba(251, 248, 243, 0.55);
  --frost-line: rgba(255, 255, 255, 0.65);
}

/* Let the hero's surrounding canvas share the site-wide reviews wash so
   there's no tone seam where the marquee floats at the hero's base. */
.hero-stage { background: transparent; }

/* ============================================================
   Scroll progress bar
   ============================================================ */

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 70;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  background: linear-gradient(to right, #8a6f4d, #201a14);
  transform: scaleX(0);
  transform-origin: left;
}

/* ============================================================
   Section scaffolding
   ============================================================ */

.section { padding-block: clamp(3.5rem, 9vw, 7.5rem); background: transparent; position: relative; }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-eyebrow);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oak-deep);
  font-weight: 600;
  margin-bottom: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: var(--oak-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease-out) 0.25s;
}
.is-in .eyebrow::before,
.eyebrow.is-in::before { transform: scaleX(1); }

.section-head--center { text-align: center; max-width: 46ch; margin-inline: auto; margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-head--center .eyebrow::before { display: none; }
.section-head--center h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 0.6rem; }
.section-head--center p { color: var(--ink-soft); }

.section-cta { display: flex; justify-content: center; margin-top: clamp(2rem, 5vw, 3rem); }

/* ============================================================
   Marquee ribbon
   ============================================================ */

/* Frosted glass ribbon, full-bleed edge to edge — the same translucent
   fill, heavy blur, light border, soft shadow, and slow diagonal shimmer
   as the hero email pill, just without the pill shape. */
.ribbon {
  position: relative;
  z-index: 5;
  width: 100%;
  margin-top: clamp(1.6rem, 4vw, 3rem);
  padding-block: 0.95rem;
  overflow: hidden;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.1);
  border-block: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 24px 60px -30px rgba(40, 28, 16, 0.5);
}

/* Slow diagonal shimmer — same sweep as .hero__capture-shine */
.ribbon__shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.4) 48%, transparent 64%);
  transform: translateX(-120%);
  animation: ribbon-shine 5.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ribbon-shine {
  0%, 30%   { transform: translateX(-120%); }
  70%, 100% { transform: translateX(120%); }
}

.ribbon__track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: max-content;
  /* 24 unique phrases per group scrolled over ~2 min, so no line
     comes back around for two full minutes. */
  animation: ribbon-scroll 120s linear infinite;
}
.ribbon:hover .ribbon__track { animation-play-state: paused; }

.ribbon__group {
  display: flex;
  align-items: center;
  flex: none;
}

.ribbon__group span {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.ribbon__group i {
  font-style: normal;
  font-size: 0.66rem;
  margin-inline: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--oak-deep);
  opacity: 0.55;
}

@keyframes ribbon-scroll {
  to { transform: translateX(-50%); }
}

/* ============================================================
   Reveal stagger (extends .reveal from shop.css via --rd)
   ============================================================ */

.hgrid > .hcard:nth-child(1) { --rd: 0s; }
.hgrid > .hcard:nth-child(2) { --rd: 0.09s; }
.hgrid > .hcard:nth-child(3) { --rd: 0.18s; }
.hgrid > .hcard:nth-child(4) { --rd: 0.27s; }

.timeline__step:nth-child(1) { --rd: 0s; }
.timeline__step:nth-child(2) { --rd: 0.12s; }
.timeline__step:nth-child(3) { --rd: 0.24s; }

.process__item:nth-child(1) { --rd: 0s; }
.process__item:nth-child(2) { --rd: 0.1s; }
.process__item:nth-child(3) { --rd: 0.2s; }


/* ============================================================
   Collection — frosted product cards
   ============================================================ */

.hgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 22px);
}
.hgrid > .hcard { min-width: 0; }

.hcard {
  position: relative;
  border-radius: var(--r-lg);
}

/* Media on top, info bar below — never overlaps the product photo. */
.hcard__link {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 18px 45px -30px rgba(40, 28, 16, 0.35);
  will-change: transform;
  transition: box-shadow 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.hcard:hover .hcard__link { box-shadow: 0 40px 80px -36px rgba(40, 28, 16, 0.55); }

.hcard__media {
  position: relative;
  aspect-ratio: 4 / 4.6;
  background: var(--beige-mid);
  overflow: hidden;
}
.hcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ease-out);
}
.hcard:hover .hcard__media img { transform: scale(1.07); }

/* Soft gradient at the base of the photo, so the frosted bar below
   still reads as one continuous surface with the image. */
.hcard__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to top, rgba(19, 15, 10, 0.16), rgba(19, 15, 10, 0));
  pointer-events: none;
}

/* Frosted info bar, sitting flush below the photo */
.hcard__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--frost);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border-top: 1px solid var(--frost-line);
  overflow: hidden;
  transition: background-color 0.4s var(--ease-out);
}
.hcard:hover .hcard__bar { background: rgba(251, 248, 243, 0.94); }

/* Sheen sweep across the frosted bar on hover */
.hcard__bar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -70%;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-18deg);
  transition: left 0.9s var(--ease-out);
  pointer-events: none;
}
.hcard:hover .hcard__bar::after { left: 130%; }

.hcard__info { min-width: 0; margin-right: auto; }
.hcard__cat {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hcard__name {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.35s var(--ease-out);
}
.hcard:hover .hcard__name { color: var(--oak-deep); }

.hcard__price {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 2px;
  white-space: nowrap;
}

.hcard__go {
  flex: none;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  transition: transform 0.45s var(--ease-out), background-color 0.4s var(--ease-out);
}
.hcard__go svg { width: 15px; height: 15px; transition: transform 0.45s var(--ease-out); }
.hcard:hover .hcard__go { transform: scale(1.1); background: var(--oak-deep); }
.hcard:hover .hcard__go svg { transform: translateX(2px); }

/* ============================================================
   Editorial statement — word-by-word blur reveal
   ============================================================ */

.statement {
  padding-block: clamp(4rem, 11vw, 9rem);
  background: transparent;
  text-align: center;
}

.statement .eyebrow { justify-content: center; }
.statement .eyebrow::before { display: none; }

.statement__text {
  max-width: 22ch;
  margin-inline: auto;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
}

.statement__text .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  filter: blur(10px);
  transition:
    opacity 0.7s var(--ease-out) calc(var(--wi) * 0.055s),
    transform 0.7s var(--ease-out) calc(var(--wi) * 0.055s),
    filter 0.7s var(--ease-out) calc(var(--wi) * 0.055s);
}
.statement__text.is-in .w { opacity: 1; transform: none; filter: blur(0); }

/* ============================================================
   Craft / manifesto
   ============================================================ */

.manifesto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.manifesto__copy, .manifesto__art { min-width: 0; }

.manifesto__title {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: 1.1rem;
}

.manifesto__body p {
  color: var(--ink-soft);
  font-size: 1.02rem;
  max-width: 52ch;
}
.manifesto__body p + p { margin-top: 1rem; }

/* Stat row — quiet typography, no card, no icons. Just confident
   numbers separated by hairline rules. */
.stats {
  position: relative;
  display: flex;
  margin-top: clamp(2rem, 4.5vw, 3rem);
  padding-top: clamp(1.6rem, 3.5vw, 2.2rem);
  border-top: 1px solid var(--line);
}

/* Drifting warm particles (wood-dust motes), rendered by Three.js and
   lazy-loaded only once this section nears the viewport. Sits behind the
   numbers, ignored entirely under reduced motion / touch / small
   screens, where the canvas is simply never initialized. */
.stats__canvas {
  position: absolute;
  inset: -40px -20px -20px -20px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.stats__canvas.is-ready { opacity: 1; }

.stat { position: relative; z-index: 1; }

.stat {
  flex: 1;
  min-width: 0;
  padding-inline: clamp(1.2rem, 3vw, 2rem);
  text-align: left;
}
.stat:first-child { padding-left: 0; }

.stat + .stat { border-left: 1px solid var(--line); }

.stat__num {
  display: flex;
  align-items: baseline;
  gap: 0.26em;
  font-family: var(--font-head);
  font-size: clamp(2.3rem, 4vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat__num i {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.36em;
  font-weight: 500;
  color: var(--ink-faint);
}

.stat__label {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.3;
}

@media (max-width: 560px) {
  .stats { flex-direction: column; gap: 1.2rem; }
  .stat { padding-inline: 0; }
  .stat + .stat { border-left: 0; padding-top: 1.2rem; border-top: 1px solid var(--line); }
}

.manifesto__art {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.manifesto__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-out);
}
.manifesto__art:hover img { transform: scale(1.05); }

/* Floating frosted chips over the craft photo */
.chip {
  position: absolute;
  padding: 0.55rem 0.95rem;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--frost);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid var(--frost-line);
  box-shadow: 0 12px 30px -16px rgba(40, 28, 16, 0.45);
  white-space: nowrap;
  animation: chip-float 5.5s ease-in-out infinite;
}
.chip--a { top: 10%; left: 8%; }
.chip--b { bottom: 12%; right: 8%; animation-delay: -2.7s; animation-duration: 6.5s; }

@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* ============================================================
   Timeline
   ============================================================ */

.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 2.6rem);
  list-style: none;
}

.timeline__step {
  position: relative;
  padding-top: clamp(1.6rem, 3vw, 2rem);
  transition: transform 0.4s var(--ease-out);
}
.timeline__step:hover { transform: translateY(-4px); }

.timeline__step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--oak-deep), rgba(32, 26, 20, 0.15));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s var(--ease-out) var(--rd, 0s);
}
.is-in.timeline__step::before { transform: scaleX(1); }

.timeline__num {
  display: block;
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.85rem;
  color: var(--oak-deep);
  margin-bottom: 0.8rem;
  transition: letter-spacing 0.4s var(--ease-out);
}
.timeline__step:hover .timeline__num { letter-spacing: 0.08em; }

.timeline__step h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; }
.timeline__step p { color: var(--ink-soft); font-size: 0.94rem; }

/* ============================================================
   Comparison strip
   ============================================================ */

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 1.6rem);
  max-width: 760px;
  margin-inline: auto;
}

.compare__col {
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.compare__col--them {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-faint);
}

.compare__col--us {
  position: relative;
  background: linear-gradient(150deg, #f0e4cf, #e5d6bc);
  border: 1px solid var(--frost-line);
  color: var(--ink);
  overflow: hidden;
}
.compare__col--us::before {
  content: "";
  position: absolute;
  top: -40%; right: -25%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 250, 240, 0.75);
  filter: blur(50px);
  pointer-events: none;
}
.compare__col--us:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px -32px rgba(40, 28, 16, 0.45);
}

.compare__head {
  position: relative;
  margin-bottom: 1.2rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(32, 26, 20, 0.1);
}

.compare__col--them .compare__head span {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.compare__logo { height: 20px; width: auto; }

.compare__col ul { position: relative; display: grid; gap: 0.85rem; }

.compare__col li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.4;
}
.compare__col li svg { width: 16px; height: 16px; flex: none; margin-top: 0.15em; }
.compare__col--them li svg { color: var(--ink-faint); }
.compare__col--us li svg { color: var(--oak-deep); }

/* ============================================================
   Testimonials — frosted marquee over glow blobs
   ============================================================ */

/* The site-wide ambient wash already carries the reviews look, so the
   band no longer needs its own fill or glow blobs. */
.band {
  background: transparent;
  overflow: hidden;
}

.band__glow { display: none; }

.tmarquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  padding-block: 0.5rem;
}

.tmarquee__track {
  display: flex;
  width: max-content;
  animation: tmarquee-scroll 84s linear infinite;
  /* Stay paused until the section has actually revealed — otherwise the
     track keeps scrolling while off-screen and behind the fade-in, so it
     can snap to a jarring mid-loop position the moment it comes into
     view, reading as a skip or a blank frame. */
  animation-play-state: paused;
}
.tmarquee.is-in .tmarquee__track { animation-play-state: running; }
.tmarquee:hover .tmarquee__track { animation-play-state: paused; }

/* Two identical, equally-sized groups back to back — translateX(-50%)
   always lands exactly on the seam between them, so the loop never
   jumps or gets cut off. */
.tmarquee__group {
  display: flex;
  flex: none;
}

@keyframes tmarquee-scroll {
  to { transform: translateX(-50%); }
}

.t-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(380px, 78vw);
  flex: none;
  margin-right: clamp(1rem, 2vw, 1.4rem);
  padding: clamp(1.4rem, 3vw, 1.9rem);
  background: var(--frost-soft);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--frost-line);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 45px -30px rgba(40, 28, 16, 0.4);
  transition: transform 0.45s var(--ease-out), background-color 0.4s var(--ease-out);
}
.t-card:hover { transform: translateY(-6px); background: var(--frost); }

.t-card__rating { display: flex; gap: 2px; color: var(--oak-deep); }
.t-card__rating svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease-out); }
.t-card:hover .t-card__rating svg { transform: scale(1.18); }
.t-card:hover .t-card__rating svg:nth-child(2) { transition-delay: 0.04s; }
.t-card:hover .t-card__rating svg:nth-child(3) { transition-delay: 0.08s; }
.t-card:hover .t-card__rating svg:nth-child(4) { transition-delay: 0.12s; }
.t-card:hover .t-card__rating svg:nth-child(5) { transition-delay: 0.16s; }

.t-card blockquote {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.55;
}

.t-card figcaption { margin-top: auto; }
.t-card figcaption div { display: flex; flex-direction: column; line-height: 1.3; }
.t-card figcaption b { font-size: 0.88rem; font-weight: 600; }
.t-card figcaption span { font-size: 0.78rem; color: var(--ink-faint); }

/* ============================================================
   Care guide / process
   ============================================================ */

.process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 2.6rem);
}

.process__item { text-align: left; min-width: 0; }

.process__icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--frost);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--frost-line);
  color: var(--oak-deep);
  margin-bottom: 1.2rem;
  transition: transform 0.5s var(--ease-out), background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.process__icon svg { width: 24px; height: 24px; transition: transform 0.5s var(--ease-out); }
.process__item:hover .process__icon {
  transform: translateY(-4px) scale(1.07);
  background: var(--beige-deep);
  box-shadow: 0 16px 30px -18px rgba(40, 28, 16, 0.4);
}
.process__item:hover .process__icon svg { transform: rotate(-8deg); }

.process__item h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; }
.process__item p { color: var(--ink-soft); font-size: 0.94rem; }

/* ============================================================
   FAQ / accordion
   ============================================================ */

.accordion {
  max-width: 720px;
  margin-inline: auto;
  margin-top: 1.4rem;
  padding: clamp(0.4rem, 1.5vw, 1rem) clamp(1.2rem, 3vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--frost-line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 55px -38px rgba(40, 28, 16, 0.4);
}

.acc { border-bottom: 1px solid var(--line); }
.acc:last-child { border-bottom: 0; }

.acc__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  transition: color 0.3s var(--ease-out), padding-left 0.35s var(--ease-out);
}
.acc__head:hover { color: var(--oak-deep); padding-left: 0.3rem; }

.acc__head svg {
  width: 20px; height: 20px;
  flex: none;
  color: var(--ink-soft);
  transition: transform 0.35s var(--ease-out, ease);
}
.acc.is-open .acc__head svg { transform: rotate(45deg); }

.acc__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s var(--ease-out, ease), opacity 0.3s var(--ease-out) 0.05s;
}
.acc.is-open .acc__body { grid-template-rows: 1fr; opacity: 1; }
.acc__inner { overflow: hidden; }
.acc__inner p { padding-bottom: 1.15rem; color: var(--ink-soft); font-size: 0.94rem; }

/* ============================================================
   Lookbook — pinned horizontal scroll (desktop) /
   swipeable filmstrip (mobile, reduced motion, or JS-off)
   ============================================================ */

.lookbook-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.lookbook-hint::after {
  content: "→";
  display: inline-block;
  animation: lookbook-hint-nudge 1.6s ease-in-out infinite;
}
.lookbook-hint.is-shown { opacity: 1; }
.lookbook-hint.is-done { opacity: 0; }
@keyframes lookbook-hint-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}

/* Default (progressive-enhancement base): a plain, always-works
   horizontally-scrollable filmstrip with scroll-snap. Works with no JS,
   on touch, and under reduced motion. */
.lookbook-pin { position: relative; }

.lookbook-pin__sticky { height: auto; }

.lookbook-track {
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
  padding-inline: var(--pad-x, clamp(1.4rem, 3.2vw, 3.2rem));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  will-change: transform;
}
.lookbook-track::-webkit-scrollbar { display: none; }
.lookbook-tile { scroll-snap-align: start; }

/* Opt-in (desktop, fine pointer, motion allowed): JS adds .is-pinned and
   sets --pin-h to give the sticky viewport room to traverse the full
   track width, then drives the track's transform on scroll. */
.lookbook-pin.is-pinned { height: var(--pin-h, auto); }

.lookbook-pin.is-pinned .lookbook-pin__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.lookbook-pin.is-pinned .lookbook-track {
  overflow-x: visible;
  scroll-snap-type: none;
}
.lookbook-pin.is-pinned .lookbook-tile { scroll-snap-align: none; }

.lookbook-tile {
  display: block;
  position: relative;
  flex: none;
  width: clamp(190px, 20vw, 300px);
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 55px -36px rgba(40, 28, 16, 0.4);
}

.lookbook-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(19, 17, 16, 0.5), rgba(19, 17, 16, 0) 55%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
}
.lookbook-tile:hover::after { opacity: 1; }

.lookbook-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out);
}
.lookbook-tile:hover img { transform: scale(1.07); }

/* Frosted name chip that rises on hover */
.lookbook-tile__chip {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 1;
  padding: 0.5rem 0.85rem;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
  background: var(--frost);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--frost-line);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lookbook-tile:hover .lookbook-tile__chip { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
  .lookbook-tile { width: clamp(200px, 72vw, 320px); }
}

/* ============================================================
   CTA — dark card with hero-style glows
   ============================================================ */

/* CTA band — sits inside the footer shell, over the same interior photo,
   as a light beige grainy frosted-glass card matching the footer. */
.cta-band {
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem);
}

.cta {
  position: relative;
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(2.2rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: rgba(243, 237, 228, 0.5);
  backdrop-filter: blur(30px) saturate(1.15);
  -webkit-backdrop-filter: blur(30px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 30px 70px -40px rgba(40, 28, 16, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Grain over the frosted card */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.06;
  pointer-events: none;
}

.cta__body, .cta__form { min-width: 0; position: relative; z-index: 1; }

.cta__title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.cta__body p { color: var(--ink-soft); max-width: 42ch; }

.cta__form { display: flex; gap: 0.6rem; }

.cta__form input {
  flex: 1;
  min-width: 0;
  padding: 0.95rem 1.2rem;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(32, 26, 20, 0.16);
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.cta__form input::placeholder { color: var(--ink-faint); }
.cta__form input:focus {
  outline: none;
  border-color: rgba(32, 26, 20, 0.4);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 4px rgba(32, 26, 20, 0.08);
}
.cta__form .btn { flex: none; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  .hgrid { grid-template-columns: repeat(2, 1fr); }
  .manifesto { grid-template-columns: 1fr; }
  .manifesto__art { order: -1; aspect-ratio: 4 / 5; }
  .process { grid-template-columns: 1fr; gap: 2rem; }
  .compare { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; gap: 2rem; }
  .cta { grid-template-columns: 1fr; text-align: left; }
}

@media (max-width: 480px) {
  .hgrid { grid-template-columns: 1fr; }
  .cta__form { flex-direction: column; }
  .cta__form .btn { width: 100%; }
  .chip--a { top: 6%; left: 5%; }
  .chip--b { bottom: 8%; right: 5%; }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .ribbon__track, .ribbon__shine, .tmarquee__track, .chip, .cta__glow { animation: none !important; }
  .statement__text .w { opacity: 1; transform: none; filter: none; }
  .progress { display: none; }
}