/* Section rhythm. Every full-width band uses one of these two so the page
   breathes at a consistent rate; the hero keeps its own larger measure. */
:root {
  --sec-pad: clamp(var(--space-20), 8vh, var(--space-32));
  --sec-pad-tight: clamp(var(--space-16), 6.5vh, var(--space-24));
}

/* ============================================================
   The Art of DIY — Rust-Oleum campaign hub prototype
   Rust-Oleum brand system: white ground, brand-red bands,
   black for film-led storytelling sections.
   ============================================================ */

/* ---------- Prototype banner ---------- */
.proto {
  background: var(--ro-grey-2);
  color: #1a1a1a;
  font-size: var(--text-xs);
  font-weight: 500;
  border-bottom: 1px solid var(--ro-grey-3);
}

.proto__in {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-3);
  flex-wrap: wrap;
}

.proto b {
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ro-red-deep);
  flex: none;
}

.proto a {
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: auto;
  white-space: nowrap;
  font-weight: 700;
}

/* ---------- Header ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 3px solid var(--ro-red);
}

.hdr__in {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-4);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: var(--ro-black);
  flex: none;
}

.logo__div {
  width: 1px;
  height: 1.5rem;
  background: rgb(0 0 0 / 0.18);
  flex: none;
}

.logo__campaign {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  text-transform: uppercase;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 30rem) {
  .logo__div,
  .logo__campaign {
    display: none;
  }
}

.hdr nav {
  display: flex;
  gap: var(--space-8);
  margin-left: auto;
  align-items: center;
}

.hdr nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  color: #5b5148;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.hdr nav a:hover {
  color: var(--ro-red);
}

@media (max-width: 62rem) {
  .hdr nav {
    display: none;
  }
}

/* ---------- Hero ---------- */
.lp-hero {
  position: relative;
  min-height: min(84svh, 760px);
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(var(--space-20), 10vh, var(--space-32));
  background: var(--ro-cream);
  color: var(--ro-black);
  --tx: var(--ro-black);
  --tx-muted: #554c43;
  --tx-faint: #6f6558;
  --line: rgb(0 0 0 / 0.16);
  --accent: var(--ro-red);
}

.lp-hero__bg {
  position: absolute;
  inset: 0;
}

.lp-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Hero photography is cropped so the subject sits hard right, inside the clear
     part of the cream wash. Anchoring to the right edge keeps her there at any
     viewport width. Each frame overrides this inline for its own composition. */
  object-position: 100% 52%;
  /* Rotator: frames are stacked and cross-faded. Only .is-on is visible. */
  opacity: 0;
  transition: opacity 900ms ease-in-out;
  /* Per-frame zoom, set inline. The carousel photography is composed for a square
     social card, so each frame is pushed in a little to bring its subject clear of
     the cream wash that carries the copy. */
  transform: scale(var(--z, 1));
  transform-origin: 68% 50%;
}

.lp-hero__bg img.is-on {
  opacity: 1;
}

/* No script, or motion turned down: the first frame simply stays put. */
.lp-hero__bg:not([data-rotator-ready]) img:first-child {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lp-hero__bg img {
    transition: none;
  }
}

/* ---------- Hero rotator dots ---------- */
.lp-hero__dots {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-8);
}

.lp-hero__dot {
  width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgb(23 19 15 / 0.42);
  background: transparent;
  cursor: pointer;
  transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.lp-hero__dot:hover {
  border-color: var(--ro-red);
}

.lp-hero__dot.is-on {
  background: var(--ro-red);
  border-color: var(--ro-red);
  transform: scale(1.12);
}

.lp-hero__dot:focus-visible {
  outline: 2px solid var(--ro-red);
  outline-offset: 3px;
}

.lp-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      96deg,
      rgb(253 247 239 / 0.99) 0%,
      rgb(253 247 239 / 0.97) 38%,
      rgb(253 247 239 / 0.80) 50%,
      rgb(253 247 239 / 0.22) 64%,
      rgb(253 247 239 / 0) 78%
    ),
    linear-gradient(0deg, rgb(253 247 239 / 0.72) 0%, rgb(253 247 239 / 0) 32%);
}

.lp-hero .wrap {
  position: relative;
  z-index: 1;
}

.lp-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 76%;
  text-transform: uppercase;
  font-size: var(--text-hero);
  line-height: 0.85;
  letter-spacing: -0.015em;
  max-width: 12ch;
  margin-block: var(--space-5) var(--space-6);
}

.lp-hero h1 em {
  font-style: normal;
  color: var(--ro-red);
}

.lp-hero p {
  font-size: var(--text-lg);
  line-height: 1.45;
  max-width: 36ch;
  color: var(--tx-muted);
}

.lp-hero__cta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-10);
}

/* ---------- Video slot (placeholder framework) ---------- */
.vslot {
  position: relative;
  background: var(--ro-cream-2);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: end start;
  /* it is a real control now, so reset button chrome */
  appearance: none;
  border: 0;
  padding: 0;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.vslot:focus-visible {
  outline: 3px solid var(--ro-red);
  outline-offset: 3px;
}

.vslot > img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.vslot:hover > img {
  transform: scale(1.03);
}

.vslot--tall {
  aspect-ratio: 9 / 16;
}

.vslot--43 {
  aspect-ratio: 4 / 3;
}

.vslot > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.02) brightness(0.99);
}

/* Bottom-anchored scrim only, so the photography stays bright */
.vslot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.76) 0%,
    rgb(0 0 0 / 0.42) 26%,
    rgb(0 0 0 / 0.06) 52%,
    rgb(0 0 0 / 0) 72%
  );
  pointer-events: none;
}

.vslot__ui {
  /* static so the absolutely-centred play button resolves against .vslot */
  position: static;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  text-align: left;
  padding: var(--space-5);
}

.vslot__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.28);
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--ro-red);
  display: grid;
  place-items: center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
  flex: none;
}

.vslot:hover .vslot__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--ro-red-deep);
}

.vslot__lab {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 82%;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.4;
}

.vslot__meta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: rgb(255 255 255 / 0.75);
  line-height: 1.4;
}

.vslot__badge {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  background: var(--ro-red);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
}

/* ---------- Sections ---------- */
.sec {
  padding-block: var(--sec-pad);
  background: var(--bg);
  color: var(--tx);
  scroll-margin-top: 5.5rem;
}

.sec + .sec:not(.on-red) {
  border-top: 1px solid var(--line);
}

.sec__head {
  max-width: 46ch;
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

.sec__head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 78%;
  text-transform: uppercase;
  font-size: var(--text-2xl);
  line-height: 0.96;
  letter-spacing: -0.005em;
  margin-top: var(--space-4);
}

.sec__head p {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--tx-muted);
}


.sec__head--tight {
  margin-bottom: var(--space-10);
  max-width: 64ch;
}

/* Keep the supporting line at a comfortable reading measure even though the
   heading above it is allowed to run wider. */
.sec__head--tight p {
  max-width: 44ch;
}

/* ---------- Real Art of DIY brush lockup ---------- */
.aod-mark {
  height: 1.55rem;
  width: auto;
  display: block;
  flex: none;
}

.hdr .aod-mark {
  height: 1.35rem;
  margin-top: 0.1rem;
}

.lp-hero__mark {
  margin-block: var(--space-4) var(--space-6);
  max-width: none;
}

.lp-hero__mark img {
  width: clamp(17rem, 46vw, 34rem);
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 10px rgb(253 247 239 / 0.9));
}

/* On the cream hero the white lockup needs a dark plate behind it */
.lp-hero {
  --plate: #17130f;
}

.lp-hero__mark {
  position: relative;
}

.aod-mark--ftr {
  height: 2.1rem;
  margin-top: var(--space-4);
}

/* ---------- Header nav (range links with colour dots) ---------- */
.hdr__nav {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  margin-left: auto;
}

.hdr__nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  color: #5b5148;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.hdr__nav a i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex: none;
}

.hdr__nav a:hover {
  color: var(--ro-red);
}

@media (max-width: 68rem) {
  .hdr__nav {
    display: none;
  }
}

/* ---------- Range picker ---------- */
.picker {
  padding-block: var(--sec-pad-tight);
  background: var(--ro-white);
  scroll-margin-top: 5.5rem;
}

.picks {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* One row for the whole range set on desktop. auto-fit's 15rem minimum only fits
   four across the container, which pushed the fifth range onto its own line.
   Threshold is 75rem because that is where the tile stops shrinking (198px) and
   'Custom Spray 5-in-1' still sets without breaking mid-token. */
@media (min-width: 75rem) {
  .picks {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.pick {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ro-grey-line);
  border-top: 5px solid var(--chip);
  text-decoration: none;
  color: var(--ro-ink);
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.pick:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.11);
}

/* The pack shot is the first thing you see — it names the product without words.
   Fixed height + absolutely positioned image so all four panels are identical
   whatever the pack shape, and nothing can overflow the card. */
.pick__shot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16.5rem;
  padding: var(--space-6);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 100%, color-mix(in srgb, var(--chip) 22%, transparent) 0%, transparent 70%);
}

.pick__shot img {
  /* flex parent has a definite height, so percentage maxima resolve here */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgb(20 16 12 / 0.22));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pick:hover .pick__shot img {
  transform: translateY(-4px) scale(1.03);
}

.pick__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6) var(--space-6);
  /* Centred to sit under the centred pack shots (client request). */
  text-align: center;
}

.pick__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 70%;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--chip);
}

.pick__name {
  font-family: var(--font-display);
  font-weight: 800;
  /* Condensed enough that the longest range name — Stops Rust 5 in 1 — holds a
     single line at every breakpoint. Client asked for no wrapping here. */
  font-stretch: 70%;
  text-transform: uppercase;
  font-size: var(--text-lg);
  line-height: 1.05;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

.pick__fmt {
  /* push the price + CTA block to the bottom so all four cards line up */
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ro-grey-2);
  font-size: var(--text-xs);
  line-height: 1.45;
  /* These lines now carry the carousel's full project descriptor, so they run to
     two or three lines. Reserving three keeps every divider on the same line. */
  min-height: calc(var(--space-4) + 3 * 1.45em);
  color: #6f6558;
  letter-spacing: 0.03em;
}

.pick__fmt b {
  font-weight: 900;
  color: var(--ro-black);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.pick__go {
  padding-top: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- Sticky range bar ---------- */
.rangebar {
  position: sticky;
  top: 0;
  z-index: 70;
  background: rgb(255 255 255 / 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ro-grey-line);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.rangebar.is-on {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.rangebar__in {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-3);
  overflow-x: auto;
}

.rangebar__lab {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 78%;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8177;
  flex: none;
}

.rangebar nav {
  display: flex;
  gap: var(--space-5);
}

.rangebar nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  color: #3d362f;
  white-space: nowrap;
  padding-block: 0.15rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.rangebar nav a i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex: none;
}

.rangebar nav a:hover,
.rangebar nav a.is-here {
  color: var(--ro-black);
  border-bottom-color: currentColor;
}

/* ---------- Range section ---------- */
.rng {
  padding-block: var(--sec-pad);
  background: var(--bg);
  color: var(--tx);
  scroll-margin-top: 4rem;
  border-top: 1px solid var(--line);
}

.rng__head {
  display: grid;
  gap: var(--space-8) var(--space-10);
  /* Third column carries the pack shot. Widened from 0.62fr so landscape kit
     box art reads at a proper size; portrait cans stay height-bound. */
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.3fr) minmax(0, 0.85fr);
  align-items: start;
  padding-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

@media (max-width: 74rem) {
  .rng__head {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
  }
  .rng__shot {
    grid-column: 1 / -1;
  }
}

@media (max-width: 60rem) {
  .rng__head {
    grid-template-columns: 1fr;
  }
}

/* Pack shot cell — names the product for this section without a caption doing the work */
.rng__shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background: transparent;
  border: 0;
}

.rng__shot img {
  max-height: 15rem;
  width: auto;
  /* 100% so landscape kit-box art can use the full cell. Portrait cans are
     still bound by max-height, so this leaves them unchanged. */
  max-width: 100%;
  display: block;
  filter: drop-shadow(0 14px 24px rgb(20 16 12 / 0.22));
}

.rng__shotcap {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  word-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  line-height: 1.4;
}

.rng__id {
  border-left: 5px solid var(--chip);
  padding-left: var(--space-5);
}

.rng__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 68%;
  font-size: var(--text-2xl);
  line-height: 0.9;
  color: var(--chip);
}

.rng__logo {
  display: block;
  height: auto;
  width: min(100%, 12rem);
  max-width: min(100%, 12rem);
  margin-top: var(--space-4);
  object-fit: contain;
  object-position: left center;
}

.rng__logo--type {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 76%;
  text-transform: uppercase;
  font-size: var(--text-xl);
  line-height: 0.94;
  letter-spacing: -0.01em;
  word-spacing: 0.1em;
  height: auto;
  width: auto;
  max-width: none;
  color: var(--ro-black);
}

/* Archivo at condensed widths closes up word gaps — open them back out
   on every uppercase display heading so two words never read as one. */
.pick__name,
.rng__pitch h2,
.rng__story h3,
.rng__shophead h3,
.rng__films,
.prod h4,
.closer h2,
.sec__head h2,
.ftr__cols h4 {
  word-spacing: 0.14em;
}

.rng__fmt {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--tx-muted);
  letter-spacing: 0.03em;
}

.rng__fmt b {
  font-weight: 900;
  color: var(--tx);
}



.rng__pitch h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  text-transform: uppercase;
  font-size: var(--text-xl);
  line-height: 1.02;
  letter-spacing: -0.005em;
  max-width: 30ch;
}

.rng__feats {
  list-style: none;
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-2);
  /* Single column: the old two-column grid made each column too narrow, so
     bullets of similar length wrapped inconsistently and looked ragged. */
  grid-template-columns: 1fr;
}

/* Bullets hang into the gutter so the bullet TEXT sits flush with the heading
   above it. The ul also has to lose the browser's default 40px indent. */
.rng__feats {
  padding-left: 0;
  margin-left: -1.15rem;
}


.rng__feats li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--tx-muted);
}

.rng__feats li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.42rem;
  height: 0.42rem;
  background: var(--chip);
  border-radius: 50%;
}

/* No gutter to hang into once the layout is a single column, so the marker is
   dropped instead of dangling at the screen edge. Text stays flush. */
@media (max-width: 60rem) {
  .rng__feats {
    margin-left: 0;
    gap: var(--space-4) var(--space-6);
  }
  .rng__feats li {
    padding-left: 0;
  }
  .rng__feats li::before {
    display: none;
  }
}

/* Film + story */
.rng__film {
  display: grid;
  gap: var(--space-8) var(--space-10);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
}

@media (max-width: 60rem) {
  .rng__film {
    grid-template-columns: 1fr;
  }
}

.rng__story h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  text-transform: uppercase;
  font-size: var(--text-lg);
  line-height: 1.04;
  max-width: 24ch;
}

.rng__story p {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--tx-muted);
  max-width: 40ch;
}

.rng__films {
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Shop block */
.rng__shop {
  margin-top: clamp(var(--space-12), 6vw, var(--space-20));
}

.rng__shophead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-bottom: var(--space-5);
  border-bottom: 2px solid var(--chip);
  margin-bottom: var(--space-8);
}

.rng__shophead h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 76%;
  text-transform: uppercase;
  font-size: var(--text-lg);
  letter-spacing: 0.01em;
}

.rng__all {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.rng__all a {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.rng__all a:hover {
  border-bottom-color: currentColor;
}

.rng__note {
  margin-top: var(--space-8);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--tx-faint);
  max-width: 62ch;
}

/* ---------- Product cards ---------- */
.prods {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}

.prod {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: #fff;
  border: 1px solid var(--ro-grey-line);
  padding: var(--space-5);
  transition: box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.prod:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgb(0 0 0 / 0.08);
}

.prod__chip {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid rgb(0 0 0 / 0.09);
  position: relative;
  background-position: center;
}

/* Real Rust-Oleum cap render sits on the colour it dispenses */
.prod__chip--cap {
  display: grid;
  place-items: center;
  background: var(--ro-grey-1);
  overflow: hidden;
}

.prod__chip--cap i {
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
}

.prod__chip--cap img {
  position: relative;
  z-index: 1;
  width: 62%;
  height: auto;
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.2));
}

.prod__body {
  flex: 1;
}

.prod h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 82%;
  text-transform: uppercase;
  font-size: 0.9375rem;
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--ro-black);
}

.prod__meta {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: #6f6558;
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.prod__sku {
  color: #968d82;
}

.prod__price {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  color: var(--ro-black);
}

.prod__price b {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 84%;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.prod__price s {
  font-size: var(--text-xs);
  color: #8f867b;
}

.prod__save {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ro-red);
  color: #fff;
  padding: 0.14rem 0.4rem;
}

.prod__rat {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: #5f574e;
  text-decoration: none;
  border-bottom: 1px solid rgb(0 0 0 / 0.16);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.prod__rat b {
  font-weight: 900;
  color: var(--ro-black);
}

.prod__rat:hover {
  color: var(--ro-red);
  border-bottom-color: var(--ro-red);
}

.prod__rat--none {
  border-bottom: 0;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 0.625rem;
}

.prod__buy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ro-grey-2);
}

/* Buy links become full-width buttons inside a product card */
.prod__buy .buy-link {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 0.62rem 0.7rem;
  background: var(--ro-black);
  color: #fff;
  border: 1px solid var(--ro-black);
  border-bottom: 1px solid var(--ro-black);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.prod__buy .buy-link:hover {
  background: var(--ro-red);
  border-color: var(--ro-red);
  color: #fff;
}

/* Bunnings is the primary (solid) action. Everything else is secondary, whether
   it sits second on the card or is the only stockist. */
.prod__buy .buy-link:not([data-retailer='bunnings']) {
  background: #fff;
  color: var(--ro-black);
  border-color: var(--ro-grey-3);
}

.prod__buy .buy-link:not([data-retailer='bunnings']):hover {
  border-color: var(--ro-red);
  color: var(--ro-red);
  background: #fff;
}

/* ---------- Closer ---------- */
.closer {
  padding-block: var(--sec-pad);
  background: var(--ro-red);
  color: #fff;
  text-align: center;
}

.closer h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 74%;
  text-transform: uppercase;
  font-size: var(--text-2xl);
  line-height: 0.95;
  letter-spacing: -0.008em;
  max-width: 24ch;
  margin-inline: auto;
}

.closer p {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  color: rgb(255 255 255 / 0.9);
  max-width: 40ch;
  margin-inline: auto;
}

.closer__buy {
  margin-top: var(--space-10);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

.closer__buy .buy-link {
  text-decoration: none;
  background: #fff;
  color: var(--ro-black);
  border: 0;
  padding: 0.9rem 1.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  transition: background 0.2s ease, color 0.2s ease;
}

.closer__buy .buy-link:hover {
  background: var(--ro-black);
  color: #fff;
}

/* ---------- Footer ---------- */
.ftr {
  background: var(--ro-black);
  color: rgb(255 255 255 / 0.62);
  padding-block: clamp(var(--space-16), 7vh, var(--space-24)) var(--space-8);
}

.ftr__in {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  align-items: start;
}

@media (max-width: 60rem) {
  .ftr__in {
    grid-template-columns: 1fr;
  }
}

.ftr__brand p {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.45);
}

.ftr__cols {
  /* two columns now, so let them sit together rather than stretch apart */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) clamp(var(--space-10), 7vw, var(--space-24));
}

.ftr__cols h4 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 78%;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-4);
}

.ftr__cols ul {
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.ftr__cols a {
  font-size: var(--text-sm);
  color: rgb(255 255 255 / 0.66);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ftr__cols a:hover {
  color: #fff;
}

.ftr__legal {
  margin-top: clamp(var(--space-12), 6vw, var(--space-20));
  padding-top: var(--space-6);
  border-top: 1px solid rgb(255 255 255 / 0.13);
}

.ftr__legal p {
  font-size: var(--text-xs);
  line-height: 1.55;
  color: rgb(255 255 255 / 0.42);
  max-width: 74ch;
}

/* ============================================================
   Vertical social film — these are 9:16 creator cuts, not TVCs
   ============================================================ */
.vslot--vert {
  aspect-ratio: 9 / 16;
}

.rng__film {
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-10) var(--space-12);
}

@media (max-width: 60rem) {
  .rng__film {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .vslot--vert {
    width: min(100%, 20rem);
  }
}

/* ============================================================
   Swipe rails — horizontal on small screens, grid on desktop
   ============================================================ */
.swipe-hint {
  display: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  word-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tx-faint);
  margin-bottom: var(--space-4);
}

@media (max-width: 60rem) {
  .swipe-hint {
    display: block;
  }

  /* Break the rail out of the page gutter so cards can bleed and peek */
  .rail {
    margin-inline: calc(var(--gutter, 1.25rem) * -1);
    padding-inline: var(--gutter, 1.25rem);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--gutter, 1.25rem);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .rail::-webkit-scrollbar {
    display: none;
  }

  .rail > .prods,
  .rail > .picks {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-4);
    /* trailing spacer so the last card can snap clear of the edge */
    padding-inline-end: var(--gutter, 1.25rem);
  }

  .rail > .prods > .prod {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }

  .rail > .picks > .pick {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}

/* ============================================================
   Featured customer review, verbatim from Bunnings
   ============================================================ */
.rvw {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: rgb(255 255 255 / 0.7);
  border: 1px solid var(--line);
  border-left: 4px solid var(--chip);
  max-width: 44ch;
}

.rvw__stars {
  display: flex;
  gap: 3px;
  margin-bottom: var(--space-3);
}

.rvw__stars svg {
  width: 15px;
  height: 15px;
  fill: var(--ink);
  flex: none;
}

.rvw h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 82%;
  text-transform: uppercase;
  font-size: 0.9375rem;
  line-height: 1.15;
  word-spacing: 0.14em;
  color: var(--ro-black);
  margin-bottom: var(--space-3);
}

.rvw blockquote {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--tx-muted);
}

.rvw figcaption {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  font-size: var(--text-xs);
  color: var(--tx-faint);
}

.rvw figcaption a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.rvw figcaption a:hover {
  border-bottom-color: currentColor;
}


/* ============================================================
   Real Bunnings product photography — the whole pack, uncropped
   ============================================================ */
.prod__shot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 0.07);
  padding: var(--space-3);
}

.prod__shot img {
  /* contain, never cover — a cropped spray can is useless */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}

/* the colour this pack actually dispenses, as a corner tab */
.prod__dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-top: 1px solid rgb(0 0 0 / 0.08);
  border-left: 1px solid rgb(0 0 0 / 0.08);
}

/* Wide section head — headline left, explainer right, so the copy fills the page */
.sec__head--wide {
  max-width: 76rem;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-6) clamp(var(--space-10), 6vw, var(--space-20));
  align-items: start;
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-14));
}

.sec__head--wide > .eyebrow {
  grid-column: 1 / -1;
}

.sec__head--wide > h2 {
  margin-top: 0;
}

.sec__head--wide > p {
  margin-top: 0.35rem;
  max-width: 48ch;
}

@media (max-width: 60rem) {
  .sec__head--wide {
    grid-template-columns: 1fr;
  }
}

/* What the product actually is, in one sentence, before anyone clicks */
.pick__blurb {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: #4a423a;
  margin-top: var(--space-1);
}

/* Range-level rating, straight from Bunnings */
.rng__rating {
  font-size: var(--text-sm);
  color: var(--tx-muted);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.rng__rating b {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 84%;
  font-size: var(--text-lg);
  color: var(--ro-black);
}

.rng__rating span {
  color: var(--tx-faint);
  font-size: var(--text-xs);
}

.rng__shophead {
  align-items: end;
}

/* Live Bunnings star ratings */
.prod__stars {
  display: inline-flex;
  gap: 2px;
  vertical-align: -2px;
}

.prod__stars svg {
  width: 13px;
  height: 13px;
  fill: var(--ink);
  flex: none;
}

.prod__stars svg.is-off {
  fill: rgb(0 0 0 / 0.16);
}

.prod__rat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 0;
}

.prod__rat span:last-child {
  color: var(--tx-faint);
}

.rng__rating .prod__stars svg {
  width: 15px;
  height: 15px;
}

.rvw__stars svg.is-off {
  fill: rgb(0 0 0 / 0.16);
}

.rvw figcaption {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

/* ============================================================
   Range switcher inside the sticky header.
   Sticky rather than fixed so it survives being embedded in an
   iframe, where position:fixed pins to the frame, not the screen.
   ============================================================ */
.hdr nav.hdr__ranges {
  display: none;
}

@media (max-width: 68rem) {
  .hdr {
    /* the header now carries two rows */
    padding-bottom: 0;
  }

  .hdr nav.hdr__ranges {
    display: block;
    border-top: 1px solid var(--ro-grey-2);
    background: rgb(255 255 255 / 0.96);
  }

  .hdr nav.hdr__ranges .hdr__ranges-in {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--gutter, 1.25rem);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .hdr nav.hdr__ranges .hdr__ranges-in::-webkit-scrollbar {
    display: none;
  }

  .hdr nav.hdr__ranges a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    background: var(--ro-grey-1);
    border: 1px solid var(--ro-grey-3);
    text-decoration: none;
    color: #4a423a;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .hdr nav.hdr__ranges a i {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--chip);
    flex: none;
  }

  .hdr nav.hdr__ranges a b {
    font-family: var(--font-display);
    font-weight: 800;
    font-stretch: 80%;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .hdr nav.hdr__ranges a.is-here {
    background: #fff;
    border-color: var(--chip);
    color: var(--ro-black);
    box-shadow: inset 0 -2px 0 var(--chip);
  }

  /* the desktop range bar is redundant once the header carries them */
  .rangebar {
    display: none;
  }
}

/* ---------- per-range grounds ---------- */
/* Each range gets its own bright tint drawn from its chip colour, so the four
   sections read as separate chapters rather than one continuous white page. */
.on-range-2x {
  --bg: #fdeee5;
  --surface: var(--ro-white);
  --surface-2: #fae0d2;
  --line: #f0d6c4;
  --tx: var(--ro-black);
  --tx-muted: #6b4e3e;
  --tx-faint: #8a6a56;
}
.on-range-home {
  --bg: #eff5ea;
  --surface: var(--ro-white);
  --surface-2: #e1ebd7;
  --line: #d4e1c8;
  --tx: var(--ro-black);
  --tx-muted: #4c5a41;
  --tx-faint: #6b7a5d;
}
.on-range-5in1 {
  --bg: #fbf3e0;
  --surface: var(--ro-white);
  --surface-2: #f5e6c6;
  --line: #e9dab7;
  --tx: var(--ro-black);
  --tx-muted: #6a5a38;
  --tx-faint: #8a7850;
}
.on-range-chalked {
  --bg: #ebf3f8;
  --surface: var(--ro-white);
  --surface-2: #dae9f2;
  --line: #cddfea;
  --tx: var(--ro-black);
  --tx-muted: #43555f;
  --tx-faint: #5f717c;
}
.on-range-tubtile {
  /* Mint, taken off the pack's green rather than its blue. Chalked (04) sits
     directly above and is pale blue, so a blue ground here made the two
     sections read as one continuous block while scrolling. */
  --bg: #dcefe7;
  --surface: var(--ro-white);
  --surface-2: #c9e5da;
  --line: #b2d8c9;
  --tx: var(--ro-black);
  --tx-muted: #40566b;
  --tx-faint: #6a7f8e;
}


/* On narrow screens the hero copy crosses the subject, so the wash has to be
   near-solid on the left rather than a soft side gradient. */
@media (max-width: 48rem) {
  .lp-hero__bg img {
    object-position: 82% 34%;
  }
  .lp-hero__bg::after {
    background:
      linear-gradient(
        180deg,
        rgb(253 247 239 / 0.62) 0%,
        rgb(253 247 239 / 0.86) 34%,
        rgb(253 247 239 / 0.94) 62%,
        rgb(253 247 239 / 0.82) 100%
      );
  }
}


/* Hero manifesto line — the sentiment leads, the supporting copy follows. */
.lp-hero__line {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 88%;
  font-size: clamp(1.15rem, 2.1vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ro-black);
  margin: 0 0 var(--space-3);
  max-width: 34ch;
}

/* ---- HOME tint palette -------------------------------------------------- */
.tint {
  margin-top: clamp(var(--space-12), 6vw, var(--space-20));
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
}

.tint__head {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(var(--space-6), 3vw, var(--space-8));
}

.tint__head h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 76%;
  text-transform: uppercase;
  font-size: var(--text-lg);
  letter-spacing: 0.01em;
  word-spacing: 0.14em;
  color: var(--tx);
  margin: 0 0 var(--space-2);
}

.tint__head p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--tx-muted);
  max-width: 62ch;
}

.tint__base + .tint__base {
  margin-top: clamp(var(--space-8), 4vw, var(--space-10));
}

.tint__baseh {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tx);
  margin: 0 0 var(--space-5);
}

.tint__baseh span {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--tx-faint);
}

.tint__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-4) var(--space-3);
}

.tint__grid li {
  margin: 0;
}

.tint__chip {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: var(--tint);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}

.tint__name {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.3;
  min-height: 2.6em;
  color: var(--tx-muted);
}

@media (max-width: 600px) {
  .tint__grid {
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  }
}



/* ============================================================
   Project reel lightbox. Instagram's embed is a fixed-width card
   with its own chrome, so it gets a plain dark surround rather
   than being forced into the 9:16 tile it was launched from.
   ============================================================ */
.reelbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgb(12 9 6 / 0.82);
  display: grid;
  place-items: center;
  padding: var(--space-6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.reelbox__in {
  position: relative;
  width: min(100%, 26rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}

.reelbox__frame {
  width: 100%;
  height: min(76vh, 44rem);
  border: 0;
  background: #fff;
  border-radius: 4px;
  display: block;
}

.reelbox__x {
  position: absolute;
  top: -2.6rem;
  right: -0.25rem;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.reelbox__x:hover { background: rgb(255 255 255 / 0.28); }

.reelbox__x:focus-visible {
  outline: 3px solid var(--ro-red);
  outline-offset: 2px;
}

.reelbox__out {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.82);
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 0.34);
}

.reelbox__out:hover { color: #fff; border-bottom-color: #fff; }

@media (max-width: 30rem) {
  .reelbox { padding: var(--space-4); }
  .reelbox__frame { height: 70vh; }
  .reelbox__x { top: -2.4rem; }
}

/* Creator credit inside the project story copy */
.rng__cred {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.rng__cred:hover {
  color: var(--ro-red);
  border-bottom-color: currentColor;
}

/* ---- Small print under the range features -------------------------------- */
/* Substantiation for asterisked claims and range-level retail notes. Kept
   deliberately quiet: it is legal/al detail, not a selling line. */
.rng__fine {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: #7d756b;
}

/* ---- Product cards: centred copy ----------------------------------------- */
/* The pack shot sits above the text, so centring the name, size and rating
   lines them up with the middle of the shot instead of hanging off to one
   side. The buy buttons centre with them. */
.prod__body {
  text-align: center;
}
.prod__rat {
  justify-content: center;
}
.prod__buy {
  justify-content: center;
}
/* .prod__meta is a flex row, so text-align cannot centre it. */
.prod__meta {
  justify-content: center;
}

/* ---------- Hero: split panel from 62rem up ----------
   Below this width the photography stays full-bleed behind the cream wash, which
   is the only thing that works in a narrow column. From 62rem the hero splits:
   the copy keeps a plain cream column on the left and the rotating photography
   gets its own window on the right. That is what makes the rotation visible —
   with a full-bleed wash wide enough to carry the copy, only a sliver of each
   frame ever showed, so changing frames read as a flicker rather than a change.
   It also means a frame no longer has to be composed with its subject hard right:
   any of the square social crops can sit in the window. */
@media (min-width: 62rem) {
  .lp-hero {
    --hero-panel: 43%;
  }

  .lp-hero__bg {
    left: auto;
    width: var(--hero-panel);
  }

  /* Only a short feather on the inside edge, so the panel meets the cream
     without a hard seam. The rest of the frame is left clear. */
  .lp-hero__bg::after {
    background: linear-gradient(
      96deg,
      rgb(253 247 239 / 1) 0%,
      rgb(253 247 239 / 0.55) 7%,
      rgb(253 247 239 / 0) 20%
    );
  }

  /* Keep the copy clear of the panel. */
  .lp-hero .wrap > * {
    max-width: min(100%, calc((100% - var(--hero-panel)) - var(--space-10)));
  }
}

/* ---------- Hero: stacked on narrow screens ----------
   The same problem as the desktop split, in one column: a wash wide enough to
   carry the copy hides almost all of the photograph, so the rotation is invisible
   on a phone — where most of this campaign's traffic will land. Stacking gives the
   photography a clean band of its own under the copy, with no wash over it. */
@media (max-width: 61.999rem) {
  .lp-hero {
    min-height: 0;
    padding-block: var(--space-12) 0;
    row-gap: var(--space-8);
  }

  .lp-hero__bg {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  /* No wash: nothing sits over the photograph in this layout. */
  .lp-hero__bg::after {
    display: none;
  }

  .lp-hero .wrap {
    order: 1;
  }
}

/* Brand name never splits across lines at its hyphen. */
.nobr {
  white-space: nowrap;
}