/* ============================================================
   BY MARAM — view / scene styles
   ============================================================ */

/* ===== HERO — split seam ===== */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; background:var(--basalt) }
.hero__media{ position:absolute; inset:0; overflow:hidden }
.hero__media .figure{ position:absolute; inset:0; width:100%; height:100% }
.hero__media img{ transform:scale(1.02) }
.hero__media::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,9,8,.62) 0%, rgba(11,9,8,0) 20%,
                    rgba(11,9,8,0) 62%, rgba(11,9,8,.72) 100%),
    linear-gradient(105deg, rgba(11,9,8,.34) 0%, rgba(11,9,8,.06) 45%, rgba(11,9,8,.3) 100%) }
.hero__void{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(11,9,8,0) 0%, rgba(11,9,8,0) 38%,
    rgba(11,9,8,.55) 54%, rgba(11,9,8,.88) 72%, rgba(11,9,8,.95) 100%) }

.hero__type{ position:absolute; inset:0; z-index:3; pointer-events:none }
.hero__h{ position:absolute; color:var(--salt); font-size:var(--fs-mega) }
.hero__h--a{ top:11vh; left:calc(var(--gut) + 1vw) }
.hero__h--b{ bottom:21vh; right:calc(var(--gut) + 1vw); text-align:right }

/* shared four-up grid — the collection, shown as one object */
.grid4{ display:grid; grid-template-columns:1fr 1fr; gap:2px; aspect-ratio:1;
  width:clamp(200px,20vw,300px); max-width:100%;
  border-radius:clamp(12px,1.4vw,20px); overflow:hidden; background:var(--stone);
  box-shadow:0 46px 90px -34px rgba(11,9,8,.62) }
.grid4__tile img{ width:100%; height:100%; object-fit:cover; display:block }
.grid4__tile{ display:block; overflow:hidden; position:relative }
.grid4__tile .figure{ width:100%; height:100%; aspect-ratio:1 }
.grid4__tile .figure img{ transition:transform 1.1s var(--e-out) }
.grid4:hover .figure img{ transform:scale(1.07) }

.hero__cue{ position:absolute; z-index:4; left:var(--gut); bottom:clamp(5.5rem,10vh,7.5rem);
  color:var(--salt); display:flex; align-items:center; gap:.85rem;
  font-size:var(--fs-xs); letter-spacing:var(--tr-wide); text-transform:uppercase; opacity:.92 }
.hero__cue i{ display:block; width:44px; height:1px; background:currentColor; transform-origin:0 50% }
.hero__origin{ position:absolute; z-index:4; top:11vh; right:var(--gut); text-align:right;
  color:var(--dune); font-size:var(--fs-xs); letter-spacing:var(--tr-wide); text-transform:uppercase; line-height:2 }

@media (max-width:860px){
  .hero__media{ inset:0 0 42% 0 }
  .hero__void{ inset:58% 0 0 0 }
  .hero__h--a{ top:14vh; left:var(--gut) }
  .hero__h--b{ bottom:16vh; right:var(--gut) }
  .hero__origin{ display:none }
}

/* ===== SCATTER — converging chips ===== */
.scatter{ position:relative; min-height:170vh  /* was 320vh: 3.2 screens for a wordmark */; background:var(--clay) }
.scatter__pin{ position:relative; height:100svh; display:grid; place-items:center; overflow:hidden }
.scatter__core{ position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; gap:clamp(1.6rem,4vh,3rem) }
.scatter__title{ color:var(--salt); text-align:center;
  font-size:clamp(2.2rem,6.2vw,6.2rem); display:flex; gap:.4em; flex-wrap:wrap; justify-content:center }
.scatter__collage{ display:flex; flex-direction:column; align-items:center;
  gap:clamp(1rem,2.4vh,1.6rem); color:var(--salt); will-change:transform,opacity }
.scatter__collage .grid4{ width:clamp(200px,20vw,300px) }
.scatter__chip{ position:absolute; z-index:1; overflow:hidden; border-radius:clamp(8px,1vw,16px);
  will-change:transform }
.scatter__chip img{ width:100%; height:100%; object-fit:cover }

/* ===== BLOOM — card grows to full bleed, headline parts ===== */
.bloom{ position:relative; height:340vh; background:var(--clay) }
.bloom__pin{ position:relative; height:100svh; overflow:hidden; display:grid; place-items:center }
.bloom__frame{ position:absolute; inset:0; z-index:2; width:100%; height:100%;
  --clip-start:inset(21% 24% round 20px);
  will-change:clip-path; background:var(--stone) }
.bloom__frame img{ width:100%; height:100%; object-fit:cover; will-change:transform }
.bloom__word{ position:absolute; z-index:3; top:50%; translate:0 -50%; color:var(--salt);
  font-size:clamp(2.4rem,7vw,7.5rem); white-space:nowrap; will-change:transform }
.bloom__word--l{ right:50%; margin-right:min(27vw,356px); text-align:right }
.bloom__word--r{ left:50%; margin-left:min(27vw,356px) }
.bloom__cta{ position:absolute; z-index:4; top:50%; left:50%; translate:-50% -50%;
  opacity:0; color:var(--salt) }
.bloom__cta{ padding:1.6rem 3rem; border-radius:999px }
.bloom__cta::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:radial-gradient(60% 100% at 50% 50%, rgba(11,9,8,.62) 0%, rgba(11,9,8,0) 100%) }
.bloom__cta .link-arrow{ font-size:clamp(1rem,1.45vw,1.4rem); letter-spacing:.26em;
  font-weight:400; text-shadow:0 2px 18px rgba(11,9,8,.9), 0 0 44px rgba(11,9,8,.7) }
.bloom__cta .link-arrow svg{ width:18px; height:18px }
@media (max-width:860px){
  .bloom__frame{ width:min(84vw,520px) }
  .bloom__frame{ --clip-start:inset(17% 7% round 12px) }
  .bloom__word--l{ right:auto; left:50%; translate:-50% -50%; margin:0; top:31%; text-align:center }
  .bloom__word--r{ left:50%; translate:-50% -50%; margin:0; top:69% }
}

/* ===== MANIFESTO ===== */
.manifesto{ background:var(--salt); color:var(--basalt); padding-block:clamp(7rem,18vh,15rem) }
.manifesto__eyebrow{ margin-bottom:clamp(3rem,7vh,5.5rem) }
.manifesto__body{ font-family:var(--display); font-weight:300; line-height:1.06;
  font-size:clamp(2rem,5.4vw,5.4rem); letter-spacing:-.014em; max-width:22ch }
.manifesto__body em{ font-style:italic; color:var(--bronze-ink) }  /* on --salt: 5.58:1 */
.manifesto__foot{ margin-top:clamp(3.5rem,8vh,6rem); display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gut) }
.manifesto__note h5{ font-size:var(--fs-xs); letter-spacing:var(--tr-wide); text-transform:uppercase;
  font-weight:400; color:var(--bronze-ink); margin-bottom:.9rem }
.manifesto__note p{ font-size:.94rem; color:var(--muted); max-width:34ch }
@media (max-width:860px){ .manifesto__foot{ grid-template-columns:1fr; row-gap:2rem } }

/* ===== RANGE — pinned product cinema =====================================
   Laid out as a three-row grid inside the chrome keep-out bands, so nothing
   can ever land under the corner labels. The arch and the sliding card are
   the only absolutely-positioned pieces, and they live in the middle row. */
.range{ position:relative; background:var(--linen); color:var(--basalt) }
.range__pin{ position:relative; height:100svh; overflow:hidden;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  padding:var(--safe-t) var(--gut) var(--safe-b) }
.range__ghost{ position:absolute; inset:0; display:grid; place-items:center; z-index:0; overflow:hidden }
.range__ghost span{ font-family:var(--display); font-weight:300; white-space:nowrap;
  font-size:clamp(6rem,16vw,16rem); line-height:1; color:color-mix(in srgb,var(--basalt) 3.5%,transparent) }

/* row 1 — label + counter */
.range__top{ position:relative; z-index:4; align-self:start; display:flex;
  justify-content:space-between; align-items:baseline; gap:1.5rem }
.range__count{ font-size:var(--fs-sm); letter-spacing:var(--tr-mid); color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap }
.range__count b{ color:var(--basalt); font-weight:400 }

/* row 2 — the stage */
.range__mid{ position:relative; z-index:3; min-height:0; align-self:stretch }
.range__stage{ position:absolute; inset:0; z-index:3; pointer-events:none }
.range__card{ position:absolute; top:50%; left:50%; width:clamp(240px,27vw,392px);
  will-change:transform,opacity }
.range__duo{ position:relative; display:block; pointer-events:auto }
.range__duo-a{ display:block }
.range__duo-a .figure{ aspect-ratio:3/4; border-radius:clamp(10px,1.1vw,18px);
  box-shadow:0 54px 110px -46px rgba(11,9,8,.6) }
.range__duo-b{ position:absolute; right:-15%; bottom:-9%; width:54%; display:block }
.range__duo-b .figure{ aspect-ratio:3/4; border-radius:clamp(8px,.9vw,14px);
  box-shadow:0 34px 70px -28px rgba(11,9,8,.62) }
.range__duo-a .figure img,
.range__duo-b .figure img{ transition:transform 1.2s var(--e-out) }
.range__duo:hover .figure img{ transform:scale(1.05) }

/* the words sit left of the arch, clear of it */
.range__info{ position:absolute; z-index:4; left:0; top:clamp(1rem,5vh,3.4rem);
  width:min(34vw,400px) }
.range__slide{ position:absolute; inset:0; opacity:0; pointer-events:none }
.range__slide.is-on{ opacity:1; pointer-events:auto }
.range__slide > *{ overflow:hidden }
.range__eyebrow{ font-size:var(--fs-xs); letter-spacing:var(--tr-wide); text-transform:uppercase;
  color:var(--bronze-ink); margin-top:1.1rem }
.range__name{ font-family:var(--display); font-weight:300; font-size:clamp(1.9rem,3.8vw,3.6rem);
  line-height:1; letter-spacing:-.012em }
.range__price{ margin-top:.7rem; font-size:1rem; color:var(--muted); font-variant-numeric:tabular-nums }
.range__go{ display:inline-flex; margin-top:1.5rem }

/* row 3 — description + thumbnails */
.range__bot{ position:relative; z-index:4; align-self:end; display:flex;
  justify-content:space-between; align-items:flex-end; gap:2rem }
.range__desc{ position:relative; width:min(34vw,400px); min-height:6.5rem }
.range__descslide{ position:absolute; inset:0; opacity:0; pointer-events:none }
.range__descslide.is-on{ opacity:1; pointer-events:auto }
.range__desc h4{ font-family:var(--display); font-size:clamp(1.05rem,1.5vw,1.35rem);
  font-weight:300; margin-bottom:.5rem; line-height:1.24 }
.range__desc p{ font-size:.9rem; color:var(--muted) }
.range__thumbs{ display:flex; gap:.7rem; flex:0 0 auto }
.range__thumb{ width:clamp(44px,4vw,58px); opacity:.4; transition:opacity .5s var(--e-out) }
.range__thumb .figure{ aspect-ratio:3/4; border-radius:5px }
.range__thumb span{ display:block; margin-top:.45rem; font-size:8px; letter-spacing:.12em;
  text-transform:uppercase; text-align:center; color:var(--muted); line-height:1.3 }
.range__thumb.is-on{ opacity:1 }

@media (max-width:900px){
  .scatter__collage .grid4{ width:min(52vw,220px) }
  /* stack: words in the upper third, the card clear beneath them */
  .range__info{ width:auto; right:0; top:0 }
  .range__name{ font-size:clamp(1.5rem,6.6vw,2.2rem) }
  .range__price{ margin-top:.5rem; font-size:.92rem }
  .range__eyebrow{ margin-top:.7rem }
  .range__go{ margin-top:.9rem }
  .range__desc{ display:none }
  .range__card{ width:min(60vw,290px); top:68% }
  .range__duo-b{ right:-11%; bottom:-6%; width:50% }
  .range__bot{ justify-content:flex-start }
  /* three-line captions under 56px thumbnails read as noise */
  .range__thumb span{ display:none }
  .range__thumb{ width:clamp(46px,13vw,62px) }
  .range__thumbs{ gap:.55rem }
}

/* ===== THE SEA — stats + parallax ===== */
.sea{ position:relative; background:var(--basalt); color:var(--salt); overflow:hidden }
.sea__bg{ position:absolute; inset:-12% 0; z-index:0 }
.sea__bg img{ width:100%; height:100%; object-fit:cover; opacity:.30 }
.sea__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    var(--basalt) 0%,
    color-mix(in srgb, var(--basalt) 74%, transparent) 22%,
    color-mix(in srgb, var(--basalt) 74%, transparent) 48%,
    var(--basalt) 72%,
    var(--basalt) 100%) }
.sea__inner{ position:relative; z-index:1; padding-block:clamp(8rem,20vh,16rem) }
.sea__lede{ max-width:24ch; font-family:var(--display); font-weight:300;
  font-size:clamp(1.9rem,4.4vw,4.2rem); line-height:1.06; letter-spacing:-.012em }
.sea__stats{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gut);
  margin-top:clamp(5rem,13vh,10rem); border-top:1px solid color-mix(in srgb,var(--salt) 22%,transparent);
  padding-top:clamp(2.4rem,5vh,3.6rem) }
.sea__stat b{ display:block; font-family:var(--display); font-weight:300;
  font-size:clamp(2.6rem,6vw,5.4rem); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.sea__stat > span{ display:block; margin-top:.9rem; font-size:var(--fs-xs); letter-spacing:var(--tr-wide);
  text-transform:uppercase; color:var(--dune) }
.sea__stat b span{ font:inherit; letter-spacing:inherit; text-transform:none }
@media (max-width:860px){ .sea__stats{ grid-template-columns:1fr; row-gap:2.6rem } }

/* ===== RITUAL BOX — fanned stack ===== */
.boxes{ background:var(--salt); color:var(--basalt); padding-block:clamp(6rem,14vh,12rem); overflow:hidden }
.boxes__head{ display:flex; justify-content:space-between; align-items:end; gap:var(--gut);
  margin-bottom:clamp(3rem,7vh,5rem); flex-wrap:wrap }
.boxes__stack{ position:relative; height:clamp(320px,54vh,560px); display:grid; place-items:center }
.boxes__card{ position:absolute; width:min(46vw,560px); will-change:transform }
.boxes__card .figure{ aspect-ratio:4/3; border-radius:clamp(8px,1vw,16px);
  box-shadow:0 50px 110px -50px rgba(11,9,8,.5) }
@media (max-width:860px){ .boxes__card{ width:76vw } }

/* ===== COLLAGE — kinetic words + chips ===== */
.collage{ background:var(--clay); color:var(--salt); padding-block:clamp(6rem,16vh,13rem); overflow:hidden }
.collage__row{ display:flex; align-items:center; justify-content:center; gap:clamp(.8rem,2.2vw,2.4rem);
  flex-wrap:nowrap; margin-block:clamp(.4rem,1.4vh,1.2rem) }
.collage__w{ font-family:var(--display); font-weight:300; font-size:clamp(1.9rem,6.4vw,6.4rem);
  line-height:1; white-space:nowrap }
.collage__chip{ flex:0 0 auto; width:clamp(84px,15vw,230px); overflow:hidden;
  border-radius:clamp(8px,1vw,16px); will-change:transform }
.collage__chip .figure{ aspect-ratio:16/10 }
.collage__chip--tall .figure{ aspect-ratio:3/4 }

/* ===== PRIVATE LIST ===== */
.list{ background:var(--basalt); color:var(--salt); padding-block:clamp(6rem,14vh,11rem) }
.list__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gut); align-items:end }
.list__title{ font-family:var(--display); font-weight:300; font-size:clamp(2rem,5vw,4.6rem);
  line-height:1.02; letter-spacing:-.014em; max-width:14ch }
.list__form{ display:flex; flex-direction:column; gap:1.5rem }
.field{ position:relative; border-bottom:1px solid color-mix(in srgb,var(--salt) 26%,transparent) }
.field input{ width:100%; background:none; border:0; padding:1.1rem 0 .9rem; color:var(--salt);
  font:inherit; font-size:1.02rem }
.field input::placeholder{ color:transparent }
.field label{ position:absolute; left:0; top:1.1rem; pointer-events:none; color:var(--sand);
  font-size:var(--fs-sm); letter-spacing:var(--tr-mid); text-transform:uppercase;
  transition:transform .5s var(--e-out), opacity .4s }
.field input:focus + label, .field input:not(:placeholder-shown) + label{
  transform:translateY(-1.35rem) scale(.86); transform-origin:0 50%; opacity:.55 }
.field i{ position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--bronze);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--e-out) }
.field input:focus ~ i{ transform:scaleX(1) }
.list__note{ font-size:var(--fs-xs); letter-spacing:.06em; color:color-mix(in srgb,var(--salt) 66%,transparent) }
.list__ok{ color:var(--bronze); font-size:var(--fs-sm); letter-spacing:var(--tr-mid);
  text-transform:uppercase; opacity:0 }
@media (max-width:860px){ .list__grid{ grid-template-columns:1fr; row-gap:3rem } }

/* ============================================================
   COLLECTION
   ============================================================ */
.coll-hero{ background:var(--basalt); color:var(--salt); padding:clamp(9rem,20vh,15rem) 0 clamp(3rem,7vh,5rem) }
.coll-hero h1{ font-family:var(--display); font-weight:300; font-size:var(--fs-mega); line-height:.9 }
.coll-hero .lede{ max-width:46ch; margin-top:2rem }

.coll{ background:var(--basalt); color:var(--salt); padding-bottom:clamp(5rem,12vh,9rem) }
.coll__item{ position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:var(--gut); padding:clamp(1.6rem,3.4vh,2.6rem) 0;
  border-top:1px solid color-mix(in srgb,var(--salt) 14%,transparent) }
.coll__item:last-child{ border-bottom:1px solid color-mix(in srgb,var(--salt) 14%,transparent) }
.coll__idx{ font-size:var(--fs-xs); letter-spacing:var(--tr-mid); color:var(--sand); font-variant-numeric:tabular-nums }
.coll__name{ font-family:var(--display); font-weight:300; font-size:clamp(1.7rem,3.7vw,3.5rem);
  line-height:1.02; letter-spacing:-.014em; white-space:nowrap;
  transition:transform .7s var(--e-out), color .5s }
.coll__row{ display:flex; align-items:baseline; gap:clamp(1rem,2.6vw,2.4rem) }
.coll__meta{ text-align:right; font-size:var(--fs-sm); letter-spacing:.1em; text-transform:uppercase;
  color:color-mix(in srgb,var(--salt) 76%,transparent) }
.coll__item:hover .coll__name{ transform:translateX(1.4rem); color:var(--bronze) }
.coll__peek{ position:fixed; z-index:5; top:0; left:0; width:clamp(200px,20vw,300px); aspect-ratio:3/4;
  pointer-events:none; opacity:0; overflow:hidden; border-radius:clamp(6px,.8vw,12px);
  will-change:transform,opacity }
.coll__peek img{ width:100%; height:100%; object-fit:cover }
@media (max-width:860px){
  .coll__item{ grid-template-columns:1fr; row-gap:.8rem }
  .coll__name{ white-space:normal }
  .coll__meta{ text-align:left }
  .coll__peek{ display:none }
}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pdp-hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; background:var(--basalt) }
.pdp-hero__bg{ position:absolute; inset:0 }
.pdp-hero__bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02) }
.pdp-hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,9,8,.58) 0%,rgba(11,9,8,.10) 34%,rgba(11,9,8,.86) 100%) }
.pdp-hero__type{ position:absolute; z-index:2; left:var(--gut); bottom:clamp(16vh,22vh,26vh);
  color:var(--salt); max-width:min(60vw,900px);
  text-shadow:0 2px 30px rgba(11,9,8,.55) }
.pdp-hero__eyebrow{ margin-bottom:1.4rem; color:var(--dune);
  text-shadow:0 1px 14px rgba(11,9,8,.7) }
.pdp-hero__h{ font-family:var(--display); font-weight:300; font-size:var(--fs-xl); line-height:.94;
  letter-spacing:-.016em }
.pdp-hero__tag{ margin-top:1.6rem; font-family:var(--display); font-style:italic;
  font-size:clamp(1.1rem,2vw,1.7rem); color:color-mix(in srgb,var(--salt) 76%,transparent) }
@media (max-width:860px){
  .pdp-hero__type{ bottom:12vh; max-width:none; right:var(--gut) }
}

/* benefits accordion */
.bene{ background:var(--salt); color:var(--basalt); padding-block:clamp(5rem,12vh,9rem) }
.bene__head{ margin-bottom:clamp(2.4rem,5vh,3.6rem) }
.acc{ border-top:1px solid var(--rule) }
.acc__item{ border-bottom:1px solid var(--rule) }
.acc__btn{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:2rem;
  padding:clamp(1.3rem,3vh,2rem) 0; text-align:left }
.acc__label{ font-family:var(--display); font-weight:300; font-size:clamp(1.4rem,2.7vw,2.35rem);
  line-height:1.1; transition:color .45s }
.acc__item.is-open .acc__label{ color:var(--bronze-ink) }  /* .bene is --salt */
.acc__sign{ position:relative; width:14px; height:14px; flex:0 0 auto }
.acc__sign::before,.acc__sign::after{ content:""; position:absolute; inset:0; margin:auto;
  background:currentColor; transition:transform .55s var(--e-out) }
.acc__sign::before{ width:14px; height:1px }
.acc__sign::after{ width:1px; height:14px }
.acc__item.is-open .acc__sign::after{ transform:scaleY(0) }
.acc__panel{ overflow:hidden; height:0 }
.acc__panel p{ padding-bottom:clamp(1.3rem,3vh,2rem); max-width:62ch; color:var(--muted) }

/* narrative split */
.narr{ background:var(--linen); color:var(--basalt); padding-block:clamp(5rem,12vh,9rem) }
.narr__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center }
.narr__media .figure{ aspect-ratio:4/5; border-radius:clamp(8px,1vw,16px) }
.narr h2{ font-family:var(--display); font-weight:300; font-size:var(--fs-lg); line-height:1.04;
  letter-spacing:-.014em; margin-bottom:1.8rem; max-width:16ch }
.narr p + p{ margin-top:1.1rem }
.narr p{ color:var(--muted); max-width:52ch }
@media (max-width:860px){ .narr__grid{ grid-template-columns:1fr; row-gap:2.6rem } }

/* ingredients */
.ing{ background:var(--basalt); color:var(--salt); padding-block:clamp(5rem,12vh,9rem) }
.ing__head{ display:flex; justify-content:space-between; align-items:end; gap:var(--gut);
  flex-wrap:wrap; margin-bottom:clamp(2.6rem,6vh,4.4rem) }
.ing__head h2{ font-family:var(--display); font-weight:300; font-size:var(--fs-lg); line-height:1;
  letter-spacing:-.014em }
.ing__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gut) }
.ing__card{ border-top:1px solid color-mix(in srgb,var(--salt) 18%,transparent); padding-top:1.5rem }
.ing__card h3{ font-family:var(--display); font-weight:300; font-size:clamp(1.3rem,2.2vw,1.85rem);
  margin-bottom:.9rem; line-height:1.14 }
.ing__card p{ font-size:.93rem; color:color-mix(in srgb,var(--salt) 78%,transparent) }
.ing__card b{ display:block; font-family:var(--sans); font-size:var(--fs-xs); font-weight:400;
  letter-spacing:var(--tr-wide); text-transform:uppercase; color:var(--bronze); margin-bottom:1.1rem }
@media (max-width:860px){ .ing__list{ grid-template-columns:1fr; row-gap:2.2rem } }

/* ritual steps */
.steps{ background:var(--clay); color:var(--salt); padding-block:clamp(5rem,12vh,9rem) }
.steps__list{ counter-reset:s; display:grid; gap:0 }
.steps__item{ counter-increment:s; display:grid; grid-template-columns:auto 1fr auto;
  gap:clamp(1.4rem,4vw,4rem); align-items:baseline; padding:clamp(1.5rem,3.4vh,2.4rem) 0;
  border-top:1px solid color-mix(in srgb,var(--salt) 20%,transparent) }
.steps__item:last-child{ border-bottom:1px solid color-mix(in srgb,var(--salt) 20%,transparent) }
.steps__item::before{ content:"0" counter(s); font-size:var(--fs-xs); letter-spacing:var(--tr-mid);
  color:var(--dune); font-variant-numeric:tabular-nums }
.steps__item h3{ font-family:var(--display); font-weight:300; font-size:clamp(1.4rem,3vw,2.6rem); line-height:1.06 }
.steps__item p{ font-size:.93rem; color:color-mix(in srgb,var(--salt) 82%,transparent); max-width:40ch }
@media (max-width:860px){ .steps__item{ grid-template-columns:auto 1fr; row-gap:.8rem }
  .steps__item p{ grid-column:2 } }

/* details table */
.spec{ background:var(--salt); color:var(--basalt); padding-block:clamp(5rem,12vh,9rem) }
.spec__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem) }
.spec__row{ display:grid; grid-template-columns:minmax(120px,.5fr) 1fr; gap:1.5rem;
  padding:1.1rem 0; border-top:1px solid var(--rule); align-items:start }
.spec__row dt{ font-size:var(--fs-xs); letter-spacing:var(--tr-mid); text-transform:uppercase; color:var(--bronze-ink) }
.spec__row dd{ font-size:.94rem; color:var(--muted) }
@media (max-width:860px){ .spec__grid{ grid-template-columns:1fr; row-gap:1rem } }

/* sticky buy bar */
.buybar{ position:fixed; left:0; right:0; bottom:0; z-index:380;
  background:color-mix(in srgb,var(--linen) 92%, transparent); color:var(--basalt);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border-top:1px solid color-mix(in srgb,var(--basalt) 12%,transparent);
  transform:translateY(101%); will-change:transform }
.buybar__in{ display:flex; align-items:center; justify-content:space-between; gap:clamp(1rem,3vw,2.5rem);
  padding:.95rem var(--gut);
  padding-bottom:calc(.95rem + env(safe-area-inset-bottom)); }
.buybar__id .eyebrow{ font-size:var(--fs-xs); margin-bottom:.25rem }
.buybar__name{ font-family:var(--display); font-size:clamp(1.05rem,1.6vw,1.4rem); font-weight:300; line-height:1.1 }
.buybar__right{ display:flex; align-items:center; gap:clamp(.9rem,2.4vw,1.8rem) }
.buybar__price{ font-variant-numeric:tabular-nums; font-size:1.05rem }
@media (max-width:600px){
  .buybar__id{ display:none }
  .buybar__right{ width:100%; justify-content:space-between }
}

/* related */
.rel{ background:var(--linen); color:var(--basalt); padding-block:clamp(5rem,12vh,9rem) }
.rel__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gut); margin-top:clamp(2.4rem,5vh,3.6rem) }
.rel__card .figure{ aspect-ratio:3/4; border-radius:clamp(8px,1vw,14px) }
.rel__card h3{ font-family:var(--display); font-weight:300; font-size:clamp(1.2rem,2vw,1.7rem);
  margin-top:1.1rem; line-height:1.14 }
.rel__card span{ font-size:var(--fs-xs); letter-spacing:var(--tr-mid); text-transform:uppercase; color:var(--muted) }
.rel__card:hover .figure img{ transform:scale(1.06) }
.rel__card .figure img{ transition:transform 1.1s var(--e-out) }
@media (max-width:860px){ .rel__grid{ grid-template-columns:1fr; row-gap:2.2rem } }

/* ============================================================
   THE HOUSE
   ============================================================ */
.brand-hero{ position:relative; height:100svh; min-height:560px; overflow:hidden; background:var(--basalt) }
.brand-hero__bg{ position:absolute; inset:0 }
.brand-hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.55; transform:scale(1.14) }
.brand-hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,9,8,.55),rgba(11,9,8,.26) 34%,rgba(11,9,8,.93)) }
.brand-hero__type{ position:absolute; z-index:2; inset:auto var(--gut) clamp(14vh,20vh,24vh); color:var(--salt) }
.brand-hero__h{ font-family:var(--display); font-weight:300; font-size:var(--fs-mega); line-height:.88 }

.hs{ padding-block:clamp(5rem,13vh,10rem) }
.hs--light{ background:var(--salt); color:var(--basalt) }
.hs--linen{ background:var(--linen); color:var(--basalt) }
.hs--dark{ background:var(--basalt); color:var(--salt) }
.hs--clay{ background:var(--clay); color:var(--salt) }
.hs__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center }
.hs__grid--rev .hs__media{ order:2 }
.hs h2{ font-family:var(--display); font-weight:300; font-size:var(--fs-lg); line-height:1.02;
  letter-spacing:-.014em; margin-bottom:1.7rem; max-width:15ch }
.hs p{ color:color-mix(in srgb,currentColor 62%,transparent); max-width:52ch }
.hs p + p{ margin-top:1.05rem }
.hs__media .figure{ aspect-ratio:4/5; border-radius:clamp(8px,1vw,18px) }
.hs__values{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gut);
  margin-top:clamp(3rem,7vh,5rem) }
.hs__value{ border-top:1px solid color-mix(in srgb,currentColor 20%,transparent); padding-top:1.4rem }
.hs__value h4{ font-family:var(--display); font-weight:300; font-size:clamp(1.25rem,2.1vw,1.75rem);
  margin-bottom:.8rem }
@media (max-width:860px){
  .hs__grid{ grid-template-columns:1fr; row-gap:2.6rem }
  .hs__grid--rev .hs__media{ order:0 }
  .hs__values{ grid-template-columns:1fr; row-gap:2rem }
}

/* pull quote */
.quote{ padding-block:clamp(6rem,16vh,13rem); text-align:center }
.quote blockquote{ font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(1.7rem,4.6vw,4rem); line-height:1.12; letter-spacing:-.014em; max-width:19ch; margin-inline:auto }
.quote figcaption{ margin-top:2.4rem; font-size:var(--fs-xs); letter-spacing:var(--tr-wide);
  text-transform:uppercase; color:var(--dune) }

/* ============================================================
   THE FOUR — explicit range, directly under the hero
   ============================================================ */
.four{ background:var(--salt); color:var(--basalt); padding-block:clamp(4.5rem,11vh,8rem) }
.four__head{ display:flex; justify-content:space-between; align-items:end; gap:var(--gut);
  flex-wrap:wrap; margin-bottom:clamp(2.6rem,6vh,4.2rem) }
.four__head h2{ font-family:var(--display); font-weight:300; font-size:var(--fs-lg);
  line-height:1.02; letter-spacing:-.014em; max-width:16ch }
.four__head p{ max-width:38ch; color:var(--muted) }
.four__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gut) }
.four__card{ display:flex; flex-direction:column;
  border-top:1px solid var(--rule); padding-top:1.3rem }
.four__media{ position:relative; display:block; overflow:hidden;
  border-radius:clamp(8px,1vw,14px) }
.four__media .figure{ aspect-ratio:3/4; border-radius:inherit }
.four__media .figure img{ transition:transform 1.2s var(--e-out) }
.four__card:hover .four__media .figure img{ transform:scale(1.07) }
.four__idx{ display:flex; justify-content:space-between; font-size:var(--fs-xs);
  letter-spacing:var(--tr-mid); text-transform:uppercase; color:var(--bronze-ink); margin-bottom:1.1rem }
.four__name{ font-family:var(--display); font-weight:300; line-height:1.08;
  font-size:clamp(1.35rem,2.1vw,1.9rem); margin-top:1.2rem }
.four__name a{ transition:color .4s }
/* hovering used to DROP contrast from 16.8:1 to 3.2:1 — the opposite of feedback */
.four__card:hover .four__name a{ color:var(--bronze-ink) }
.four__claims{ margin-top:.65rem; font-size:var(--fs-xs); letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted) }
.four__actions{ margin-top:auto; padding-top:1.5rem; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; flex-wrap:wrap }
.four__price{ font-variant-numeric:tabular-nums; font-size:1.06rem }
@media (max-width:1100px){ .four__grid{ grid-template-columns:repeat(2,1fr); row-gap:3rem } }
@media (max-width:620px){ .four__grid{ grid-template-columns:1fr; row-gap:3rem } }

/* hero: name the range on the dark half so it reads at a glance */
.hero__range{ position:absolute; z-index:4; right:calc(var(--gut) + 1vw);
  bottom:9vh; text-align:right; color:var(--dune);
  font-size:var(--fs-xs); letter-spacing:var(--tr-mid); text-transform:uppercase; line-height:2.1 }
@media (max-width:860px){ .hero__range{ display:none } }

/* ============================================================
   OBJECT PAIR — the packshots, given their own moment
   ============================================================ */
.pair{ background:var(--salt); color:var(--basalt); padding-block:clamp(5rem,12vh,9rem) }
.pair__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gut); align-items:start }
.pair__item .figure{ aspect-ratio:1; border-radius:clamp(8px,1vw,16px) }
.pair__item figcaption, .pair__cap{ margin-top:1.1rem; display:flex; justify-content:space-between;
  gap:1rem; font-size:var(--fs-xs); letter-spacing:var(--tr-mid); text-transform:uppercase;
  color:var(--muted) }
.pair__item:nth-child(2){ margin-top:clamp(2rem,8vh,6rem) }
@media (max-width:860px){
  .pair__grid{ grid-template-columns:1fr; row-gap:2.4rem }
  .pair__item:nth-child(2){ margin-top:0 }
}

/* Narrow screens: the scrubber competes with the corner labels for the same row */
@media (max-width:700px){ .scrub{ display:none } }

/* The sticky buy bar floats over the page — keep it off the last row of the footer */
body[data-page="product"] .footer{ padding-bottom:calc(clamp(5rem,9vh,7rem) + 5.5rem) }

/* ============================================================
   STATEMENT — display type with an image set inside the sentence
   ============================================================ */
.statement{ background:var(--haze); color:var(--basalt);
  padding-block:clamp(6rem,15vh,12rem) clamp(3.5rem,8vh,6rem); overflow:hidden }
.statement__text{ font-family:var(--display); font-weight:300; letter-spacing:-.016em;
  font-size:clamp(1.8rem,5.4vw,5.2rem); line-height:1.4; text-align:center }
.statement__line{ display:block }
.statement__img{ display:inline-grid; grid-template-columns:repeat(4,1fr); gap:2px;
  vertical-align:middle; margin-inline:.28em; width:clamp(196px,30vw,460px);
  aspect-ratio:4/1; translate:0 .08em; overflow:hidden; background:var(--stone);
  border-radius:clamp(8px,1vw,16px); will-change:transform;
  box-shadow:0 40px 90px -46px rgba(11,9,8,.5) }
.statement__tile{ display:block; overflow:hidden }
.statement__tile .figure{ width:100%; height:100%; aspect-ratio:1 }
.statement__tile .figure img{ transition:transform 1.1s var(--e-out) }
.statement__img:hover .figure img{ transform:scale(1.07) }
.statement__foot{ display:flex; justify-content:center; margin-top:clamp(2.4rem,5vh,3.6rem) }

/* ============================================================
   GHOST — a paragraph over an oversized drifting wordmark
   ============================================================ */
.ghost{ position:relative; background:var(--haze); color:var(--basalt);
  padding-block:clamp(2.5rem,6vh,4.5rem) clamp(4rem,9vh,7rem) }
.ghost__lede{ max-width:30ch; margin-inline:auto; text-align:center; position:relative;
  font-family:var(--display); font-weight:300; letter-spacing:-.01em;
  font-size:clamp(1.5rem,3.2vw,2.9rem); line-height:1.28;
  color:color-mix(in srgb,var(--basalt) 92%,transparent) }

/* ============================================================
   FOUR — hover reveals a second frame
   ============================================================ */
.four__media .four__b{ position:absolute; inset:0; opacity:0;
  transition:opacity .8s var(--e-out) }
.four__card:hover .four__media .four__b{ opacity:1 }
.four__card:hover .four__media .four__a img{ transform:scale(1.07) }

/* ============================================================
   BRAND page — founder card
   ============================================================ */
.founder{ background:var(--basalt); color:var(--salt); padding-block:clamp(5rem,13vh,10rem) }
.founder__grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,6vw,6rem); align-items:center }
.founder__card .figure{ aspect-ratio:3/2; border-radius:clamp(8px,1vw,16px) }
.founder blockquote{ font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(1.5rem,3.4vw,3rem); line-height:1.14; letter-spacing:-.014em; max-width:18ch }
.founder figcaption{ margin-top:1.8rem; font-size:var(--fs-xs); letter-spacing:var(--tr-wide);
  text-transform:uppercase; color:var(--dune) }
@media (max-width:860px){ .founder__grid{ grid-template-columns:1fr; row-gap:2.4rem } }

/* A figure sitting alone inside a full-bleed wrapper must fill it. Otherwise
   its height is auto, the image inside resolves height:100% to auto, and the
   frame shows as an empty block until the file lands. */
.bloom__frame > .figure,
.pdp-hero__bg > .figure,
.brand-hero__bg > .figure,
.sea__bg > .figure{ position:absolute; inset:0; width:100%; height:100% }


/* ============================================================
   HERO ON A PHONE
   A vertical split leaves a dead band of colour and strands the headline.
   Full-bleed the plate instead, stack the two halves of the line, and sit
   the collage over the lower third where the ledge is.
   ============================================================ */
@media (max-width:860px){
  .hero__media{ inset:0 }
  .hero__media .figure{ inset:0 }
  .hero__media::after{
    background:
      linear-gradient(180deg, rgba(11,9,8,.72) 0%, rgba(11,9,8,.05) 26%,
                      rgba(11,9,8,.35) 58%, rgba(11,9,8,.94) 100%) }
  .hero__void{ display:none }
  .hero__h{ font-size:clamp(3rem,15vw,4.6rem); line-height:.95 }
  .hero__h--a{ top:calc(var(--safe-t) + 2.5vh); left:var(--gut); right:var(--gut) }
  .hero__h--b{ top:calc(var(--safe-t) + 2.5vh + 1.05em); left:var(--gut);
    right:auto; bottom:auto; text-align:left }
  .hero__cue{ bottom:calc(var(--safe-b) + .4rem) }
  .hero__origin{ display:none }
}

/* ============================================================
   PRODUCT PAGE ON A PHONE
   ============================================================ */
@media (max-width:600px){
  /* the full claim line wraps into the photograph at 400px */
  .pdp-hero__eyebrow{ font-size:.58rem; letter-spacing:.16em; margin-bottom:1rem }
  .pdp-hero__type{ bottom:calc(var(--safe-b) + 1rem) }
  .pdp-hero__h{ font-size:clamp(2.2rem,11vw,3.2rem) }
  .pdp-hero__tag{ font-size:1rem; margin-top:1rem }

  /* the bar has one row to work with — nothing in it may wrap */
  .buybar__in{ padding:.8rem var(--gut) }
  .buybar__right{ gap:.7rem }
  .buybar__price{ white-space:nowrap; font-size:.95rem }
  .buybar .btn{ padding:.85rem 1.15rem; font-size:.6rem; letter-spacing:.12em;
    white-space:nowrap }
  .qty{ padding:.45rem .8rem; gap:.8rem }
}

/* At 400px the strip plus "than … every" lands within a few pixels of the
   gutters. Pull both in so the line can never break. */
@media (max-width:600px){
  .statement__text{ font-size:clamp(1.5rem,7vw,2.2rem); line-height:1.6 }
  .statement__img{ width:min(50vw,190px); margin-inline:.2em }
  .statement{ padding-block:clamp(4.5rem,11vh,8rem) clamp(3rem,6vh,4.5rem) }
}

/* On a phone the shoreline frame is cropped so hard it reads as a competing
   photograph behind the copy. Drop it to texture and deepen the wash. */
@media (max-width:860px){
  .sea__bg img{ opacity:.14 }
  .sea__bg::after{ background:linear-gradient(180deg,
      var(--basalt) 0%,
      color-mix(in srgb, var(--basalt) 86%, transparent) 18%,
      color-mix(in srgb, var(--basalt) 86%, transparent) 52%,
      var(--basalt) 74%, var(--basalt) 100%) }
  .sea__inner{ padding-block:clamp(5rem,12vh,8rem) }
  .sea__lede{ font-size:clamp(1.6rem,7vw,2.4rem) }
  .sea__stats{ margin-top:clamp(3rem,8vh,5rem) }
  .sea__stat b{ font-size:clamp(2.4rem,13vw,3.6rem) }
}