/* Aweh Black November: homepage (hero, Our Brands, Under R349 band, lifestyle
   wall, reviews band, pre-footer). Markup: templates/home.php and the partials
   it calls. Loads before aweh.css, so overrides of existing classes carry the
   .aweh2 body class for weight. Tokens come from bn/global.css. */

/* ---------- Buttons ---------- */
.aweh2 .bnbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 1px solid transparent; border-radius: 2px; font-family: var(--font-sans); font-size: .9375rem; font-weight: 700; letter-spacing: .01em; line-height: 1.1; text-decoration: none; text-align: center; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .16s ease; }
.aweh2 .bnbtn--cream { background: var(--bn-cream, #f4ece2); color: var(--bn-ink, #110b09); }
.aweh2 .bnbtn--cream:hover { background: var(--bn-gold, #c9a55f); color: var(--bn-ink, #110b09); }
.aweh2 .bnbtn--line { border-color: rgba(244, 236, 226, .5); background: transparent; color: var(--bn-cream, #f4ece2); }
.aweh2 .bnbtn--line:hover { border-color: var(--bn-cream, #f4ece2); background: rgba(244, 236, 226, .08); color: var(--bn-cream, #f4ece2); }
.aweh2 .bnbtn:focus-visible { outline: 2px solid var(--bn-gold, #c9a55f); outline-offset: 3px; }
.aweh2 .bnbtn:active { transform: scale(.98); }
/* Secondary actions are plain text links, not pills. */
.aweh2 .bnlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .9375rem; font-weight: 700; color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.aweh2 .bnlink span { transition: transform .25s ease; }
.aweh2 .bnlink:hover span { transform: translateX(4px); }
.aweh2 .bnlink:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ---------- Black November hero ----------
   Campaign layout, restrained: one gold accent (the offer), cream type on
   umber, one filled button and one quiet link, a small trust line.
   Phones and tablets (< 1024px): the portrait crop on top, fading into the
   ground, with the copy beneath it. Desktop: the 2:1 crop full bleed, type in
   the umber field on the left, the face on the right. The title is sized
   against its own column (container units), so "NOVEMBER" can never be
   wider than the space it sits in, from 320px to 1920px. */
.aweh2 .bnhero { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; background: #140908; color: var(--bn-cream, #f4ece2); }
.aweh2 .bnhero__media { position: relative; display: block; width: 100%; aspect-ratio: 1080 / 1350; max-height: min(66svh, 720px); }
.aweh2 .bnhero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.aweh2 .bnhero__media::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to top, #140908 4%, rgba(20, 9, 8, 0)); pointer-events: none; }
.aweh2 .bnhero__inner { position: relative; z-index: 1; container-type: inline-size; width: 100%; max-width: 620px; margin: -88px auto 0; padding: 0 20px 44px; box-sizing: border-box; }
.aweh2 .bnhero__kick { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 236, 226, .78); }
.aweh2 .bnhero__kick::before { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; }
.aweh2 .bnhero__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 13vw, 6rem); font-size: clamp(2.5rem, 19cqi, 8.25rem); line-height: .88; letter-spacing: .01em; text-transform: uppercase; color: var(--bn-cream, #f4ece2); overflow-wrap: anywhere; }
.aweh2 .bnhero__title span { display: block; }
.aweh2 .bnhero__offer { margin: 20px 0 0; max-width: 40ch; font-size: 1rem; line-height: 1.5; color: rgba(244, 236, 226, .82); }
.aweh2 .bnhero__offer b { display: block; margin-bottom: 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 7.5cqi, 2.5rem); line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: #d9b26b; }
.aweh2 .bnhero__sub { margin: 10px 0 0; max-width: 46ch; font-size: .875rem; line-height: 1.55; color: rgba(244, 236, 226, .66); }
.aweh2 .bnhero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 26px; }
.aweh2 .bnhero__ctas .bnbtn { flex: 1 1 100%; }
.aweh2 .bnhero__alt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .9375rem; font-weight: 700; color: var(--bn-cream, #f4ece2); text-decoration: underline; text-decoration-color: rgba(244, 236, 226, .35); text-underline-offset: 6px; transition: text-decoration-color .25s ease; }
.aweh2 .bnhero__alt:hover { text-decoration-color: currentColor; }
.aweh2 .bnhero__alt:focus-visible { outline: 2px solid #d9b26b; outline-offset: 4px; border-radius: 2px; }
.aweh2 .bnhero__alt span { transition: transform .25s ease; }
.aweh2 .bnhero__alt:hover span { transform: translateX(4px); }
.aweh2 .bnhero__trust { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid rgba(244, 236, 226, .14); font-size: .75rem; line-height: 1.6; letter-spacing: .02em; color: rgba(244, 236, 226, .6); }
/* Below 1024px the picture starts under the fixed header (bar + nav), not behind it. */
@media (max-width: 1023px) { .aweh2 .bnhero { padding-top: var(--bn-head, 108px); } }
@media (min-width: 480px) { .aweh2 .bnhero__ctas .bnbtn { flex: 0 0 auto; } }
@media (min-width: 768px) and (max-width: 1023px) {
  .aweh2 .bnhero__media { max-height: 62svh; }
  .aweh2 .bnhero__inner { margin-top: -120px; padding-inline: 40px; }
}
@media (min-width: 1024px) {
  .aweh2 .bnhero { display: grid; align-items: center; min-height: clamp(600px, 50vw, 880px); }
  .aweh2 .bnhero__media { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; max-height: none; }
  .aweh2 .bnhero__media img { object-position: 78% 30%; }
  /* Keeps the type legible where the crop pulls the face toward the copy. */
  .aweh2 .bnhero__media::after { inset: 0; height: auto; background: linear-gradient(90deg, rgba(20, 9, 8, .82) 0%, rgba(20, 9, 8, .5) 34%, rgba(20, 9, 8, 0) 58%), linear-gradient(to top, rgba(20, 9, 8, .55), rgba(20, 9, 8, 0) 30%); }
  .aweh2 .bnhero__inner { width: min(560px, 46%); max-width: none; margin: 0 0 0 max(40px, calc((100% - var(--shell, 1320px)) / 2 + 40px)); padding: calc(var(--bn-head, 108px) + 32px) 0 64px; }
}
/* ---------- Our Brands: logo marquee on the page ground ----------
   Off-white, no block: the logos rest in a soft warm grey and come to life in
   their own colours on hover, keyboard focus or a tap (two stacked images,
   cross-faded on opacity, with a small lift). */
.aweh2 .houses--bn { border-top: 0; padding-block: clamp(40px, 5vw, 72px); background: var(--background); color: var(--foreground); }
.aweh2 .houses--bn .houses__track { animation: houses var(--dur, 48s) linear infinite; }
.aweh2 .houses--bn .houses__rail:hover .houses__track,
.aweh2 .houses--bn .houses__rail:focus-within .houses__track { animation-play-state: paused; }
.aweh2 .houses--bn .houses__item { color: #9b908a; opacity: 1; }
.aweh2 .houses--bn .houses__track:hover .houses__item { opacity: .6; }
.aweh2 .houses--bn .houses__track .houses__item:hover,
.aweh2 .houses--bn .houses__item:focus-visible,
.aweh2 .houses--bn .houses__item:active { opacity: 1; color: var(--foreground); transform: translateY(-4px) scale(1.08); }
.aweh2 .houses--bn .houses__item:focus-visible { outline: 2px solid var(--bn-maroon, #6b1e28); outline-offset: 8px; border-radius: 4px; }
.aweh2 .houses--bn .houses__logo--duo { position: relative; background: none; -webkit-mask: none; mask: none; }
.aweh2 .houses--bn .houses__logo--duo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s ease; }
.aweh2 .houses--bn .houses__live { opacity: 0; }
.aweh2 .houses--bn .houses__item:hover .houses__live,
.aweh2 .houses--bn .houses__item:focus-visible .houses__live,
.aweh2 .houses--bn .houses__item:active .houses__live { opacity: 1; }
.aweh2 .houses--bn .houses__item:hover .houses__rest,
.aweh2 .houses--bn .houses__item:focus-visible .houses__rest,
.aweh2 .houses--bn .houses__item:active .houses__rest { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .aweh2 .houses--bn .houses__track { animation: none; }
  .aweh2 .houses--bn .houses__track .houses__item:hover, .aweh2 .houses--bn .houses__item:focus-visible { transform: none; }
}
/* ---------- Under R349 band during Black November ---------- */
.aweh2 .clrow--bn { background: var(--bn-ink, #110b09); color: var(--bn-cream, #f4ece2); }
.aweh2 .clrow--bn h2 { color: var(--bn-cream, #f4ece2); }
.aweh2 .clrow--bn .clrow__kick { color: var(--bn-gold, #c9a55f); }
.aweh2 .clrow--bn .clrow__line { color: var(--bn-mute, #c8bcaf); }
.aweh2 .clrow--bn .cats__all { color: var(--bn-cream, #f4ece2); border-bottom-color: var(--bn-gold, #c9a55f); }
.aweh2 .clrow--bn .minicard { background: var(--bn-cream, #f4ece2); border-color: transparent; color: var(--foreground); }
.aweh2 .clrow--bn .minicard--more { color: var(--bn-cream, #f4ece2); }

/* ---------- Lifestyle wall ----------
   One 4:5 frame for every tile, 2 across on a phone and 4 from 768px, so the
   grid is always complete. Photographs only. Motion stays small: alternate
   tiles sit a little lower and drift with the scroll, the photo zooms under a
   pointer, and the tiles rise a few pixels as the wall arrives. They are
   fully opaque at every moment, with or without the script. */
.aweh2 .bnwall { overflow: hidden; padding-block: clamp(56px, 8vw, 112px); background: var(--bn-maroon, #6b1e28); color: var(--bn-cream, #f4ece2); }
.aweh2 .bnwall__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; margin-bottom: clamp(24px, 4vw, 48px); }
.aweh2 .bnwall h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: .95; text-transform: uppercase; color: var(--bn-cream, #f4ece2); }
.aweh2 .bnwall__lede { max-width: 34ch; margin: 0; font-size: .9375rem; line-height: 1.55; color: rgba(244, 236, 226, .78); }
.aweh2 .bnwall__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aweh2 .bnwall__tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--bn-ink2, #1c1311); color: var(--bn-cream, #f4ece2); text-decoration: none; transition: transform .9s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 80ms); }
.aweh2 .bnwall__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.aweh2 .bnwall__tile::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(to top, rgba(17, 11, 9, .7), rgba(17, 11, 9, 0)); pointer-events: none; }
.aweh2 .bnwall__tile:focus-visible { outline: 2px solid var(--bn-gold, #c9a55f); outline-offset: 3px; }
.aweh2 .bnwall__tag { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; font-size: .875rem; font-weight: 700; line-height: 1.3; color: var(--bn-cream, #f4ece2); }
.aweh2 .bnwall__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 768px) {
  .aweh2 .bnwall__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .aweh2 .bnwall__tile:nth-child(even) { margin-top: 48px; }
  .aweh2 .bnwall__grid { padding-bottom: 48px; }
}
@media (prefers-reduced-motion: no-preference) {
  .aweh2 .bnwall__tile:hover .bnwall__img, .aweh2 .bnwall__tile:focus-visible .bnwall__img { transform: scale(1.05); }
  .aweh2 .bnwall.is-armed .bnwall__tile { transform: translateY(18px); }
  .aweh2 .bnwall.is-armed.is-in .bnwall__tile { transform: none; }
  @supports (animation-timeline: view()) {
    @media (min-width: 768px) {
      .aweh2 .bnwall__tile { animation: bnwallDrift linear both; animation-timeline: view(); animation-range: cover; --drift: 14px; }
      .aweh2 .bnwall__tile:nth-child(even) { --drift: -14px; }
    }
  }
}
@keyframes bnwallDrift { from { translate: 0 var(--drift, 0px); } to { translate: 0 calc(var(--drift, 0px) * -1); } }
/* ---------- What buyers say ---------- */
.aweh2 .proof { background: var(--bn-cream, #f4ece2); border-block: 0; overflow: hidden; }
.aweh2 .bnrev { padding-block: 0; }
.aweh2 .bnrev__headrow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(24px, 4vw, 40px); }
.aweh2 .bnrev h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: .95; text-transform: uppercase; color: var(--bn-maroon, #6b1e28); }
.aweh2 .bnrev__stat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .875rem; color: var(--bn-ink, #110b09); }
.aweh2 .bnrev__stat b { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1; }
.aweh2 .bnrev__stat .rstar { font-size: 1rem; }
.aweh2 .bnrev__rows { display: grid; gap: 16px; }
.aweh2 .bnrev__row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.aweh2 .bnrev__track { display: flex; width: max-content; animation: bnrevL var(--dur, 160s) linear infinite; }
.aweh2 .bnrev__row--b .bnrev__track { animation-name: bnrevR; }
.aweh2 .bnrev__rows:hover .bnrev__track,
.aweh2 .bnrev__rows:focus-within .bnrev__track { animation-play-state: paused; }
.aweh2 .bnrev__set { display: flex; flex: none; gap: 16px; padding: 4px 16px 18px 0; }
.aweh2 .bnrev__card { display: flex; flex: none; flex-direction: column; gap: 10px; width: 288px; padding: 20px; border: 1px solid rgba(107, 30, 40, .12); border-radius: 4px; background: #fff; }
.aweh2 .bnrev__stars .rstar { font-size: 1rem; }
.aweh2 .bnrev__head { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.3; color: var(--bn-ink, #110b09); }
.aweh2 .bnrev__quote { display: -webkit-box; margin: 0; overflow: hidden; -webkit-line-clamp: 5; -webkit-box-orient: vertical; font-size: .9375rem; line-height: 1.55; color: #3a2a25; }
.aweh2 .bnrev__foot { display: grid; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(107, 30, 40, .1); }
.aweh2 .bnrev__prod { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.aweh2 .bnrev__thumb { flex: none; width: 52px; height: 52px; padding: 3px; border: 1px solid rgba(17, 11, 9, .08); border-radius: 2px; background: #fff; object-fit: contain; }
.aweh2 .bnrev__who { display: grid; gap: 2px; min-width: 0; }
.aweh2 .bnrev__who b { font-size: .9375rem; color: var(--bn-ink, #110b09); }
.aweh2 .bnrev__bought { overflow: hidden; font-size: .8125rem; white-space: nowrap; text-overflow: ellipsis; color: #6b5a50; }
.aweh2 .bnrev__prod:hover .bnrev__bought { color: var(--bn-maroon, #6b1e28); text-decoration: underline; }
.aweh2 .bnrev__prod:focus-visible { outline: 2px solid var(--bn-maroon, #6b1e28); outline-offset: 3px; border-radius: 8px; }
.aweh2 .bnrev__src { font-size: .75rem; font-weight: 600; color: #6b5a50; }
.aweh2 .proof__cert { background: #fff; }
@media (min-width: 768px) { .aweh2 .bnrev__card { width: 360px; padding: 22px 24px; } }
@media (max-width: 767px) { .aweh2 .bnrev__row--b { display: none; } }
@keyframes bnrevL { to { transform: translate3d(-50%, 0, 0); } }
@keyframes bnrevR { from { transform: translate3d(-50%, 0, 0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .aweh2 .bnrev__track { width: auto; animation: none; }
  .aweh2 .bnrev__row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x mandatory; padding-inline: 20px; }
  .aweh2 .bnrev__set[aria-hidden="true"] { display: none; }
  .aweh2 .bnrev__card { scroll-snap-align: start; }
}

/* ---------- Pre-footer photograph ---------- */
.aweh2 .bnpre { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 520px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bn-ink, #110b09); color: var(--bn-cream, #f4ece2); }
.aweh2 .bnpre__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 38% 40%; }
.aweh2 .bnpre__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(17, 11, 9, .88) 0%, rgba(17, 11, 9, .4) 45%, transparent 75%); }
.aweh2 .bnpre__inner { width: 100%; padding-block: 40px; }
.aweh2 .bnpre h2 { max-width: 16ch; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.25rem, 6vw, 4.75rem); line-height: .95; text-transform: uppercase; color: var(--bn-cream, #f4ece2); }
.aweh2 .bnpre__line { max-width: 44ch; margin: 12px 0 22px; font-size: 1rem; line-height: 1.55; color: rgba(244, 236, 226, .86); }
@media (min-width: 768px) {
  .aweh2 .bnpre { min-height: 0; max-height: 82vh; aspect-ratio: var(--ar, 1920 / 1008); }
  .aweh2 .bnpre__inner { padding-block: 56px; }
  .aweh2 .bnpre__img { object-position: 50% 40%; }
}
/* Brands rail sits close to Bestsellers: one section gap, not two stacked. */
.houses.houses--bn { padding-bottom: 28px; }
.houses + .find { padding-top: clamp(32px, 4vw, 56px); }

/* The photo sat on z-index -2 with no stacking context, so it painted under the section and left a black box. */
.aweh2 .bnpre { isolation: isolate; position: relative; }

/* ---------- Round 3: small-screen sweep (320-430) ---------- */
/* Bestseller tabs wrap into rows instead of scrolling off the edge. */
.aweh2 .find__tabs { flex-wrap: wrap; overflow: visible; }
.aweh2 .find__tab { min-height: 44px; }
/* Section heads wrap rather than squeezing the heading against its link. */
.aweh2 .houses__head, .aweh2 .bnrev__headrow, .aweh2 .bnwall__head { flex-wrap: wrap; }
.aweh2 .houses__head h2, .aweh2 .bnrev h2, .aweh2 .bnwall h2, .aweh2 .bnpre h2, .aweh2 .find__head h2, .aweh2 .clrow h2 { overflow-wrap: anywhere; }
@media (max-width: 479px) {
  .aweh2 .bnrev__card { width: min(288px, 82cqi); }
  .aweh2 .bnrev__rows { container-type: inline-size; }
  .aweh2 .bnrev__row { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
  .aweh2 .bnwall__tag { left: 10px; right: 10px; bottom: 10px; font-size: .8125rem; }
  .aweh2 .bnwall__foot .bnbtn { flex: 1 1 100%; }
  .aweh2 .bnpre__inner .bnbtn { width: 100%; }
}
/* ---------- "See all" at the end of a rail: a text link, not an outlined bar ---------- */
.aweh2 .find .minirail > .minicard--more,
.aweh2 .clrow .minirail > .minicard--more { min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; justify-content: flex-end; align-items: center; font-family: var(--font-sans); font-size: .9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--foreground); }
.aweh2 .find .minirail > .minicard--more span,
.aweh2 .clrow .minirail > .minicard--more span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.aweh2 .find .minirail > .minicard--more span::after,
.aweh2 .clrow .minirail > .minicard--more span::after { content: " \2192"; display: inline-block; margin-left: 6px; text-decoration: none; transition: transform .25s ease; }
.aweh2 .find .minirail > .minicard--more:hover span::after,
.aweh2 .clrow .minirail > .minicard--more:hover span::after { transform: translateX(4px); }
.aweh2 .clrow--bn .minirail > .minicard--more { color: var(--bn-cream, #f4ece2); }
@media (max-width: 767px) {
  .aweh2 .find .minirail > .minicard--more,
  .aweh2 .clrow .minirail > .minicard--more { width: auto; padding-inline: 4px 12px; justify-content: center; }
}
.aweh2 .find .minirail > .minicard--more br, .aweh2 .clrow .minirail > .minicard--more br { display: none; }