/* ============================================================
   CLOUD PAINTS — Landing page (Phase 4)
   8 scroll-choreographed sections on index.html only.
   Scoped to body[data-page="home"] so it never bleeds.
   ============================================================ */

/* Register --hero-color so it can be CSS-transitioned */
@property --hero-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #d92843;
}

body[data-page="home"] { background: #0b0a10; }
body[data-page="home"][data-theme="light"] { background: var(--bg); }

/* Smooth transition from the black hero into content sections */
body[data-page="home"] .lp-seam {
  position: relative;
  height: 0;
  pointer-events: none;
}
body[data-page="home"] .lp-seam::before {
  content:""; position:absolute; left:0; right:0; bottom:0;
  height: 140px;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
  pointer-events:none;
}

/* ---------- 1. Hero — "The Pour" ---------- */
.lp-hero {
  position: relative;
  min-height: 100vh;
  background: #0b0a10;
  color: #f5f1e8;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(100px, 14vh, 160px);
  padding-bottom: clamp(60px, 9vh, 120px);
}
/* Rotating room backdrop — crossfades with the bucket */
.lp-hero-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: -3;
  /* Vibrant brand-gradient fallback — visible whenever the slide 0 bg
     image is missing (the old studio photo was removed; the AI brand
     stage is pending). When .lp-hero-bg-img loads it covers this
     gradient; when its onerror fires it hides itself and reveals it. */
  /* Neutral ground. The opening slide's colour now comes from .lp-velvet,
     and this three-hue wash fought it. */
  background: radial-gradient(140% 110% at 62% 46%, #1b0d26, #09060f 74%);
}
[data-theme="light"] .lp-hero-bg {
  background:
    radial-gradient(55% 65% at 22% 26%, rgba(225,31,41,0.22), transparent 65%),
    radial-gradient(50% 60% at 78% 22%, rgba(31,64,136,0.22), transparent 65%),
    radial-gradient(60% 70% at 50% 90%, rgba(232,163,23,0.30), transparent 70%),
    linear-gradient(135deg, #fff9f0 0%, #fde8b8 45%, #f8d7c1 100%);
}
.lp-hero-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.0);
  /* Crisp and vibrant — sharper contrast and lifted saturation so
     each photo pops. Brightness pushed further so the imagery
     drives the page instead of the scrim. */
  filter: saturate(1.32) contrast(1.14) brightness(1.10);
  transition: opacity 0.9s cubic-bezier(.4,0,.2,1);
}
.lp-hero-bg-img.hs-active { opacity: 1; }

/* When the brand-stage slide is active, give the bg a warm vignette
   pulse so the studio photo feels lit, not flat. */
.lp-hero.brand-active .lp-hero-bg::after {
  background:
    linear-gradient(90deg,
      rgba(11,10,16,0.72) 0%,
      rgba(11,10,16,0.45) 30%,
      rgba(11,10,16,0.10) 60%,
      rgba(11,10,16,0.00) 100%),
    radial-gradient(60% 70% at 60% 50%, rgba(232,163,23,0.18), transparent 70%),
    radial-gradient(40% 50% at 20% 80%, rgba(217,40,67,0.15), transparent 70%);
}
/* Directional scrim — only darken behind the copy column (left), let
   the room photo breathe on the right where the bucket floats.
   Lifted again so the imagery reads bright across most of the frame;
   only the leftmost 22% holds copy contrast. Vertical band removed —
   the bottom darkening was making the entire section feel like a cave. */
.lp-hero-bg::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(11,10,16,0.60) 0%,
      rgba(11,10,16,0.36) 24%,
      rgba(11,10,16,0.10) 50%,
      rgba(11,10,16,0.00) 80%,
      rgba(11,10,16,0.00) 100%);
}
/* Typography carries its own contrast so bright photos (sage
   apartments, white kitchen) stay bright per the client's mandate
   while the headline stays legible. Dark theme only — the light
   theme uses navy text on a white mist, where a dark glow smudges. */
[data-theme="dark"] .lp-hero-h1 .row i {
  text-shadow: 0 2px 20px rgba(11,10,16,0.55), 0 1px 3px rgba(11,10,16,0.45);
}
[data-theme="dark"] .lp-hero-lede {
  text-shadow: 0 1px 14px rgba(11,10,16,0.65), 0 1px 3px rgba(11,10,16,0.5);
}
[data-theme="dark"] .lp-hero-copy .eyebrow {
  text-shadow: 0 1px 8px rgba(11,10,16,0.55);
}
/* Light theme: a soft white lift instead, for when navy text crosses
   a busy part of the photo. */
[data-theme="light"] .lp-hero-h1 .row i,
[data-theme="light"] .lp-hero-lede {
  text-shadow: 0 1px 16px rgba(255,252,244,0.85), 0 0 3px rgba(255,252,244,0.6);
}
.lp-hero::before {
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(40% 50% at 72% 22%, rgba(217,40,67,0.30), transparent 60%),
    radial-gradient(55% 60% at 25% 72%, rgba(184,147,74,0.16), transparent 65%),
    radial-gradient(60% 60% at 50% 50%, rgba(30,58,138,0.10), transparent 70%);
  filter: blur(20px);
  z-index: -2;
}
.lp-hero::after {
  content:""; position:absolute; inset:0;
  background-image: var(--grain);
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}

.lp-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
  min-height: 72vh;
}

/* Left copy column */
.lp-hero-copy .eyebrow {
  color: var(--gold-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(232,163,23,0.10);
  border: 1px solid rgba(232,163,23,0.30);
  padding: 7px 14px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
}
.lp-hero-copy .eyebrow::before {
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--gold-2);
  box-shadow: 0 0 10px var(--gold-2);
}

.lp-hero-h1 {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 8vw, 6.2rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: #f5f1e8;
  margin: 22px 0 22px;
}
.lp-hero-h1 .row { display:block; overflow: hidden; }
.lp-hero-h1 .row i {
  font-style: normal;
  display:inline-block;
  transform: translateY(115%);
  animation: lpHeroChar 0.95s var(--t-ease-pour) forwards;
}
.lp-hero-h1 .row i.em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(92deg, var(--red-glow) 0%, var(--gold-2) 55%, var(--gold) 100%);
  background-clip: text; -webkit-background-clip: text;
  color: transparent;
}
body.cp-loading .lp-hero-h1 .row i,
body.cp-loading .lp-pour-col,
body.cp-loading .lp-drip,
body.cp-loading .lp-drip path,
body.cp-loading .lp-splat,
body.cp-loading .lp-hero-bucket,
body.cp-loading .lp-hero-lede,
body.cp-loading .lp-hero-ctas,
body.cp-loading .lp-hero-stats { animation-play-state: paused; }
@keyframes lpHeroChar {
  from { transform: translateY(115%); opacity: 0.2; }
  to   { transform: translateY(0);     opacity: 1; }
}

.lp-hero-lede {
  color: rgba(245,241,232,0.72);
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.6;
  max-width: 540px;
  margin-bottom: 32px;
}

.lp-hero-ctas {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 44px;
}
.lp-hero-ctas .btn-pour {
  background: linear-gradient(135deg, var(--red-glow), var(--red-2));
  color: #fff;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 15px;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 18px 40px -14px rgba(217,40,67,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  position: relative; overflow: hidden;
}
.lp-hero-ctas .btn-pour::before {
  content:""; position:absolute; inset:0;
  background-image: var(--grain);
  opacity: 0.22; mix-blend-mode: overlay;
  pointer-events: none;
}
.lp-hero-ctas .btn-pour:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -12px rgba(217,40,67,0.7); }
/* Colour-book CTA: the button IS the colour — a blended paint
   gradient (red → magenta → violet → gold) under a grain texture. */
.lp-hero-ctas .btn-spectrum,
.btn-spectrum {
  background: linear-gradient(115deg,
    #d92843 0%, #c02364 30%, #7c3aa4 58%, #b86414 82%, #e8a317 100%);
  background-size: 160% 100%;
  background-position: 0% 50%;
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              background-position 0.6s ease;
  position: relative; overflow: hidden;
  box-shadow: 0 18px 40px -14px rgba(160,45,120,0.55),
              inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn-spectrum::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.3; mix-blend-mode: overlay;
  pointer-events: none;
}
.lp-hero-ctas .btn-spectrum:hover,
.btn-spectrum:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 24px 50px -12px rgba(160,45,120,0.65);
}
.lp-hero-ctas .btn-ghost-d {
  color: #f5f1e8;
  border: 1px solid rgba(245,241,232,0.25);
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: border-color var(--t-fast), background var(--t-fast);
  backdrop-filter: blur(8px);
}
.lp-hero-ctas .btn-ghost-d:hover {
  border-color: var(--gold-2);
  background: rgba(232,163,23,0.08);
  color: var(--gold-2);
}

.lp-hero-stats {
  display: flex;
  gap: clamp(24px, 4.5vw, 56px);
  border-top: 1px solid rgba(245,241,232,0.18);
  padding-top: 32px;
}
.lp-hero-stats .st .n {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  line-height: 1;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 20px rgba(245,241,232,0.15);
}
.lp-hero-stats .st .n sup {
  font-size: 52%; color: var(--gold-2); vertical-align: top; top: 0.28em;
  position: relative;
}
.lp-hero-stats .st .l {
  display: block;
  margin-top: 10px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(245,241,232,0.72);
  font-weight: 700;
}

/* Right: pour column */
.lp-pour {
  position: relative;
  height: 100%;
  min-height: 560px;
  display: flex; align-items: center; justify-content: center;
}

/* vertical pour column gradient */
.lp-pour {
  --hero-color: #d92843;
  transition: --hero-color 0.7s ease;
}
.lp-pour-col {
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: clamp(48px, 6vw, 78px);
  height: 110%;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hero-color), white 18%) 0%,
    var(--hero-color) 50%,
    color-mix(in srgb, var(--hero-color), black 18%) 100%
  );
  border-radius: 50% 50% 20% 20% / 20px 20px 36px 36px;
  filter: drop-shadow(0 20px 40px color-mix(in srgb, var(--hero-color), transparent 60%));
  opacity: 0;
  transform-origin: top center;
  animation: lpPourIn 1.8s var(--t-ease-pour) 0.25s forwards;
  z-index: 1;
  transition: background 0.7s ease, filter 0.7s ease;
}
body.cp-loading .lp-pour-col { animation-play-state: paused; }
@keyframes lpPourIn {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) scaleY(1); }
}
.lp-pour-col::after {
  content:""; position:absolute; left:50%; bottom:-14px; transform: translateX(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--hero-color);
  animation: lpDripDrop 3.6s ease-in-out 2s infinite;
  transition: background 0.7s ease;
}
@keyframes lpDripDrop {
  0%, 100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
  50%      { transform: translate(-50%, 80vh) scale(0.6); opacity: 0; }
  50.01%   { opacity: 0; }
  60%      { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

/* peeling drips */
.lp-drip {
  position: absolute;
  pointer-events: none;
  color: var(--hero-color);
  z-index: 2;
  transition: color 0.7s ease;
}
.lp-drip.d1 { top: 10%; left: 42%; width: 14px; height: 60px; animation: lpDripDraw 1.4s var(--t-ease-pour) 0.7s both; }
.lp-drip.d2 { top: 20%; left: 58%; width: 12px; height: 46px; animation: lpDripDraw 1.4s var(--t-ease-pour) 0.9s both; }
.lp-drip.d3 { top: 38%; left: 46%; width: 10px; height: 38px; animation: lpDripDraw 1.4s var(--t-ease-pour) 1.1s both; }
.lp-drip path {
  fill: currentColor;
  clip-path: inset(0 0 100% 0);
  animation: lpDripClip 1.4s var(--t-ease-pour) 0.7s both;
}
.lp-drip.d2 path { animation-delay: 0.9s; }
.lp-drip.d3 path { animation-delay: 1.1s; }
@keyframes lpDripClip { to { clip-path: inset(0 0 0 0); } }
@keyframes lpDripDraw {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* splatter bursts */
.lp-splat {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  color: var(--hero-color);
  opacity: 0;
  transform: scale(0.2) rotate(0);
  animation: lpSplatPop 1.2s var(--t-ease-pour) forwards;
  transition: color 0.7s ease;
}
.lp-splat.s1 { top: 8%;  left: 18%; width: 110px; height: 110px; animation-delay: 1.4s; }
.lp-splat.s2 { top: 62%; left: 70%; width: 140px; height: 140px; animation-delay: 1.6s; color: var(--hero-color); opacity: 0.7; }
.lp-splat.s3 { bottom: 10%; left: 25%; width: 90px; height: 90px; animation-delay: 1.55s; }
.lp-splat.s4 { top: 42%; right: 4%;  width: 70px;  height: 70px; animation-delay: 1.7s; opacity: 0.6; }
.lp-splat svg { width:100%; height:100%; fill: currentColor; }
@keyframes lpSplatPop {
  0%   { opacity: 0; transform: scale(0.2) rotate(-40deg); }
  70%  { opacity: 1; transform: scale(1.08) rotate(4deg); }
  100% { opacity: 0.88; transform: scale(1) rotate(0); }
}

/* Floating hero bucket — desktop */
.lp-hero-bucket {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: clamp(220px, 26vw, 380px);
  aspect-ratio: 1/1;
  overflow: visible;
  opacity: 0;
  animation: lpBucketIn 1.2s var(--t-ease-pour) 1s forwards, lpBucketFloat 7s ease-in-out 2.3s infinite;
}
/* Override float animation on mobile to match relative positioning */
@media (max-width: 1023px) {
  @keyframes lpBucketFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-12px); }
  }
}
.lp-hero-bucket img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 28px 56px rgba(0,0,0,0.55)) drop-shadow(0 8px 20px color-mix(in srgb, var(--hero-color), transparent 55%));
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), filter 0.7s ease;
}
.lp-hero-bucket img.hs-active {
  opacity: 1;
}
@keyframes lpBucketIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 40px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes lpBucketFloat {
  0%,100% { transform: translate(-50%, -50%); }
  50%     { transform: translate(-50%, calc(-50% - 14px)); }
}

/* Hero scroll cue */
.lp-scroll-cue {
  position: absolute;
  left: 50%; bottom: 34px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(245,241,232,0.55);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  animation: lpCueFade 0.8s ease 2.4s both;
}
.lp-scroll-cue span.line {
  display: block; width: 1px; height: 44px;
  background: linear-gradient(180deg, transparent, rgba(232,163,23,0.8), transparent);
  animation: lpCueLine 2s ease-in-out infinite;
}
@keyframes lpCueFade { from {opacity:0;} to {opacity:1;} }
@keyframes lpCueLine {
  0%,100% { transform: scaleY(1); }
  50%     { transform: scaleY(0.2); }
}

/* ---------- 1b. Hero — Light mode overrides ---------- */
[data-theme="light"] .lp-hero {
  background: #faf4ec;
  color: #1a1525;
}
[data-theme="light"] .lp-hero-bg::after {
  background:
    linear-gradient(90deg,
      rgba(250,244,236,0.92) 0%,
      rgba(250,244,236,0.72) 28%,
      rgba(250,244,236,0.40) 55%,
      rgba(250,244,236,0.10) 82%,
      rgba(250,244,236,0.00) 100%),
    linear-gradient(180deg,
      rgba(250,244,236,0.20) 0%,
      transparent 30%,
      transparent 70%,
      rgba(250,244,236,0.30) 100%);
}
[data-theme="light"] .lp-hero::before {
  background:
    radial-gradient(40% 50% at 72% 22%, rgba(217,40,67,0.11), transparent 60%),
    radial-gradient(55% 60% at 25% 72%, rgba(184,147,74,0.09), transparent 65%),
    radial-gradient(60% 60% at 50% 50%, rgba(30,58,138,0.04), transparent 70%);
}
[data-theme="light"] .lp-hero-h1 { color: #1a1525; }
[data-theme="light"] .lp-hero-h1 .row i.em {
  background: linear-gradient(92deg, var(--red-2) 0%, #c87a00 55%, #a86800 100%);
  background-clip: text; -webkit-background-clip: text;
}
[data-theme="light"] .lp-hero-copy .eyebrow {
  color: #8a5a00;
  background: rgba(184,147,74,0.12);
  border-color: rgba(184,147,74,0.35);
}
[data-theme="light"] .lp-hero-copy .eyebrow::before {
  background: #b87a00;
  box-shadow: 0 0 8px rgba(184,122,0,0.5);
}
[data-theme="light"] .lp-hero-lede { color: #3a3250; }
[data-theme="light"] .lp-hero-ctas .btn-ghost-d {
  color: #1a1525;
  border-color: rgba(10,14,39,0.22);
  background: rgba(10,14,39,0.04);
}
[data-theme="light"] .lp-hero-ctas .btn-ghost-d:hover {
  border-color: var(--red-2);
  background: rgba(217,40,67,0.06);
  color: var(--red-2);
}
[data-theme="light"] .lp-hero-stats {
  border-top-color: rgba(10,14,39,0.10);
}
[data-theme="light"] .lp-hero-stats .st .n { color: #1a1525; }
[data-theme="light"] .lp-hero-stats .st .n sup { color: var(--red-2); }
[data-theme="light"] .lp-hero-stats .st .l { color: rgba(10,14,39,0.44); }
[data-theme="light"] .lp-pour-col {
  filter: drop-shadow(0 20px 40px color-mix(in srgb, var(--hero-color), transparent 72%));
}
[data-theme="light"] .lp-hero-bucket img {
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.28)) drop-shadow(0 6px 16px color-mix(in srgb, var(--hero-color), transparent 78%));
}
[data-theme="light"] .lp-scroll-cue { color: rgba(10,14,39,0.4); }
[data-theme="light"] .lp-scroll-cue span.line {
  background: linear-gradient(180deg, transparent, rgba(217,40,67,0.6), transparent);
}

/* ---------- 2. Marquee enhancements ---------- */
.lp-marquee-wrap {
  background: #0b0a10;
  border-top: 1px solid rgba(245,241,232,0.06);
  border-bottom: 1px solid rgba(245,241,232,0.06);
  position: relative;
  overflow: hidden;
}
.lp-marquee-wrap::after {
  content:""; position: absolute; inset: 0;
  background-image: var(--grain); opacity: 0.1; pointer-events: none;
}
.lp-marquee-wrap .marquee-track {
  animation: cpMarquee 70s linear infinite;
}
.lp-marquee-wrap:hover .marquee-track { animation-duration: 30s; }
@keyframes cpMarquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
.lp-marquee-wrap .marquee-track span {
  color: rgba(245,241,232,0.75);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem);
  padding: 0 0.7em;
  display: inline-flex; align-items: center; gap: 0.7em;
  letter-spacing: -0.01em;
}
.lp-marquee-wrap .marquee-track span::after {
  content:""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red-glow);
  box-shadow: 0 0 14px var(--red-glow);
  display: inline-block;
  flex-shrink: 0;
}

/* ---------- 3. About Us ---------- */
.lp-about {
  padding: clamp(80px, 11vw, 140px) 0;
  background: #0d0b14;
  color: #f5f1e8;
  position: relative; overflow: hidden;
}
.lp-about-bg {
  position: absolute;
  /* Overscan vertically so the parallax drift has somewhere to slide
     into without revealing the dark section behind it. */
  top: -18%; bottom: -18%;
  left: 0; right: 0;
  background: url(../images/inspiration/inspiration-villa-cream-charcoal.jpg) center/cover no-repeat;
  /* Was brightness(0.3) saturate(0.65) — far too dim, crushed the
     villa photo into a muddy silhouette. Lifted so the architecture
     reads. */
  filter: brightness(0.62) saturate(0.95);
  will-change: transform;
}
.lp-about::before {
  content:""; position: absolute; inset:0;
  /* Lighter cinematic scrim: left/right corners still hold copy
     contrast, centre lets the villa breathe. */
  background: linear-gradient(160deg, rgba(10,8,20,0.55) 0%, rgba(10,8,20,0.20) 50%, rgba(10,8,20,0.62) 100%);
  z-index: 1;
}
.lp-about::after {
  content:""; position: absolute; inset:0;
  background-image: var(--grain); opacity: 0.06; pointer-events:none;
  z-index: 2;
}
.lp-about-inner { position: relative; z-index: 3; }
.lp-about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 100px);
  align-items: center;
}
.lp-about-copy { position: relative; z-index: 1; }
.lp-about-copy .eyebrow { color: #7eb3f5; border-color: rgba(126,179,245,0.3); background: rgba(126,179,245,0.1); }
/* This section is dark in both themes, so the promoted section name and the
   demoted line beneath it need explicit light ink — the themed --text /
   --text-2 tokens would go dark-on-dark here. */
.lp-about-copy .eyebrow.eyebrow:has(+ h2) { color: #f5f1e8; }
.lp-about-copy .eyebrow.eyebrow + h2 { color: rgba(245,241,232,0.74); }
.lp-about-copy h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 14px 0 0;
  color: #f5f1e8;
}
.lp-about-copy h2 em { font-style: italic; color: #7eb3f5; }
.lp-about-lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(245,241,232,0.9);
  margin-top: 24px;
  font-weight: 500;
}
.lp-about-copy p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(245,241,232,0.65);
  margin-top: 14px;
}
.lp-about-quote {
  border-left: 3px solid #7eb3f5;
  margin: 28px 0 28px;
  padding: 4px 0 4px 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: rgba(245,241,232,0.85);
}
.lp-about-stats {
  display: flex;
  gap: clamp(24px, 4vw, 48px);
  margin: 32px 0 36px;
  padding: 24px 28px;
  background: rgba(255,255,255,0.07);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
}
.lp-about-stat { display: flex; flex-direction: column; }
.lp-about-stat .n {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: #f5f1e8;
}
.lp-about-stat .l {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(245,241,232,0.5);
  margin-top: 4px;
  text-transform: uppercase;
  font-weight: 600;
}
.lp-about-copy .btn-outline {
  border: 1.5px solid #7eb3f5;
  color: #7eb3f5;
  background: transparent;
  padding: 13px 26px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.lp-about-copy .btn-outline:hover { background: #7eb3f5; color: #0d0b14; }
.lp-about-copy .btn-outline .arr { transition: transform var(--t-fast); }
.lp-about-copy .btn-outline:hover .arr { transform: translateX(4px); }

/* photo stack — glassmorphism frame */
.lp-about-media {
  position: relative;
  padding: clamp(12px, 1.6vw, 20px);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: clamp(22px, 2.4vw, 30px);
  box-shadow:
    0 40px 90px -28px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.28);
  overflow: hidden;
}
/* soft sheen sweeping across the glass panel */
.lp-about-media::before {
  content:""; position: absolute;
  top: -60%; left: -30%;
  width: 60%; height: 220%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: rotate(8deg);
  pointer-events: none;
}
.lp-about-photo-main {
  position: relative;
  border-radius: clamp(14px, 1.6vw, 20px);
  overflow: hidden;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,0.55);
  aspect-ratio: 4/5;
}
.lp-about-photo-main img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s ease;
}
.lp-about-photo-main:hover img { transform: scale(1.04); }
.lp-about-photo-chip {
  position: absolute;
  bottom: 18px; left: 18px;
  background: rgba(10,14,39,0.72);
  backdrop-filter: blur(10px);
  color: #f5f1e8;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  border-radius: 40px;
  display: flex; align-items: center; gap: 7px;
  border: 1px solid rgba(255,255,255,0.12);
}
.lp-about-photo-thumb {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px -12px rgba(10,14,39,0.18);
  aspect-ratio: 16/9;
}
.lp-about-photo-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  display: block;
  transition: transform 0.9s ease;
}
.lp-about-photo-thumb:hover img { transform: scale(1.04); }


/* mobile */
@media (max-width: 900px) {
  .lp-about-inner { grid-template-columns: 1fr; }
  .lp-about-media { grid-row: 1; }
  .lp-about-copy { grid-row: 2; }
  .lp-about-photo-main { aspect-ratio: 16/10; }
  .lp-about-stats { gap: 20px; }
}
@media (max-width: 480px) {
  .lp-about-stats { flex-direction: column; gap: 16px; padding: 20px; }
}

/* ---------- 5. Featured products ---------- */

/* Splash keyframes */
@keyframes fd-drift-a {
  0%,100% { transform: rotate(-18deg) translate(0,0) scale(1); }
  33%      { transform: rotate(-12deg) translate(18px,-22px) scale(1.06); }
  66%      { transform: rotate(-22deg) translate(-10px,14px) scale(0.97); }
}
@keyframes fd-drift-b {
  0%,100% { transform: rotate(12deg) translate(0,0) scale(1); }
  40%      { transform: rotate(18deg) translate(-16px,20px) scale(1.05); }
  70%      { transform: rotate(8deg) translate(12px,-12px) scale(0.96); }
}
@keyframes fd-drift-c {
  0%,100% { transform: rotate(8deg) translate(0,0) scale(1); }
  50%      { transform: rotate(14deg) translate(14px,-18px) scale(1.07); }
}
@keyframes fd-drift-d {
  0%,100% { transform: rotate(-14deg) translate(0,0) scale(1); }
  45%      { transform: rotate(-20deg) translate(-12px,16px) scale(1.04); }
  80%      { transform: rotate(-10deg) translate(8px,-8px) scale(0.98); }
}
@keyframes fd-pulse-mid {
  0%,100% { transform: translate(-50%,-50%) rotate(22deg) scale(1); opacity:0.7; }
  50%      { transform: translate(-50%,-50%) rotate(28deg) scale(1.14); opacity:0.9; }
}
@keyframes fd-drift-ea {
  0%,100% { transform: rotate(6deg) translate(0,0); }
  50%      { transform: rotate(12deg) translate(-20px,24px); }
}
@keyframes fd-drift-eb {
  0%,100% { transform: rotate(-8deg) translate(0,0); }
  50%      { transform: rotate(-16deg) translate(16px,-20px); }
}

.lp-featured {
  padding: clamp(80px, 11vw, 140px) 0;
  background: var(--bg);
  color: var(--text);
  position: relative;
  overflow: hidden;
}

/* Paint splash decorations */
.lp-feat-deco { pointer-events: none; }
.lp-feat-deco .fd {
  position: absolute;
  z-index: 0;
  height: auto; /* the splat <img>s carry a height attribute */
}
@media (prefers-reduced-motion: no-preference) {
  .fd-tl  { animation: fd-drift-a 11s ease-in-out infinite; }
  .fd-tr  { animation: fd-drift-b 13s ease-in-out infinite; }
  .fd-bl  { animation: fd-drift-c 14s ease-in-out infinite; }
  .fd-br  { animation: fd-drift-d 12s ease-in-out infinite; }
  .fd-mid { animation: fd-pulse-mid 9s ease-in-out infinite; }
  .fd-extra-a { animation: fd-drift-ea 16s ease-in-out infinite; }
  .fd-extra-b { animation: fd-drift-eb 10s ease-in-out infinite; }
}
.fd-tl {
  width: clamp(340px, 42vw, 560px);
  top: -90px; left: -110px;
  transform: rotate(-18deg);
}
.fd-tr {
  width: clamp(300px, 36vw, 500px);
  top: -60px; right: -100px;
  transform: rotate(12deg);
}
.fd-bl {
  width: clamp(310px, 38vw, 520px);
  bottom: -70px; left: -80px;
  transform: rotate(8deg);
}
.fd-br {
  width: clamp(280px, 34vw, 460px);
  bottom: -50px; right: -70px;
  transform: rotate(-14deg);
}
.fd-mid {
  width: clamp(200px, 22vw, 320px);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(22deg);
  opacity: 0.7;
}
.fd-extra-a {
  width: clamp(220px, 26vw, 380px);
  top: 30%; left: 10%;
  transform: rotate(6deg);
  opacity: 0.85;
}
.fd-extra-b {
  width: clamp(200px, 24vw, 340px);
  top: 55%; right: 8%;
  transform: rotate(-8deg);
  opacity: 0.85;
}
.lp-featured > .container { position: relative; z-index: 1; }
.lp-featured-head {
  display: grid; grid-template-columns: 1fr auto;
  gap: 32px; align-items: end;
  margin-bottom: 52px;
}
.lp-featured-head h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-top: 12px;
  max-width: 720px;
}
.lp-featured-head h2 em { color: var(--red-2); font-style: italic; }
.lp-featured-head .eyebrow { color: var(--red-2); }
.lp-featured-head .sub { color: var(--text-2); font-size: 15px; max-width: 480px; }

.lp-featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.lp-featured-grid .product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-mid), box-shadow var(--t-mid);
  position: relative;
}
.lp-featured-grid .product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-3);
}

/* ---------- 6. Projects ribbon ---------- */
.lp-ribbon {
  padding: clamp(80px, 11vw, 140px) 0;
  background: var(--bg-soft);
  color: var(--text);
  position: relative; overflow: hidden;
}
.lp-ribbon-head { max-width: 800px; margin-bottom: 48px; }
.lp-ribbon-head .eyebrow { color: var(--red-2); }
.lp-ribbon-head h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-top: 12px;
}
.lp-ribbon-head h2 em { color: var(--red-2); font-style: italic; }

.lp-ribbon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 180px;
  gap: clamp(10px, 1.2vw, 18px);
}
.lp-ribbon-grid .cell {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  cursor: pointer;
}
.lp-ribbon-grid .cell img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--t-ease-pour);
}
.lp-ribbon-grid .cell:hover img { transform: scale(1.08); }
.lp-ribbon-grid .cell::after {
  content: attr(data-label);
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 50px 20px 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.72) 90%);
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s var(--t-fast), transform 0.4s var(--t-fast);
}
.lp-ribbon-grid .cell:hover::after { opacity: 1; transform: translateY(0); }
.lp-ribbon-grid .c1 { grid-column: span 3; grid-row: span 2; }
.lp-ribbon-grid .c2 { grid-column: span 3; grid-row: span 1; }
.lp-ribbon-grid .c3 { grid-column: span 2; grid-row: span 1; }
.lp-ribbon-grid .c4 { grid-column: span 1; grid-row: span 1; }
.lp-ribbon-grid .c5 { grid-column: span 2; grid-row: span 1; }
.lp-ribbon-grid .c6 { grid-column: span 4; grid-row: span 1; }

.lp-ribbon-more {
  margin-top: 40px;
  display: flex; justify-content: center;
}

/* ---------- 7. Why pillars ---------- */
.lp-pillars-sec {
  padding: clamp(80px, 11vw, 140px) 0;
  background: var(--bg);
  color: var(--text);
  position: relative;
}
.lp-pillars-head { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.lp-pillars-head .eyebrow { color: var(--red-2); }
.lp-pillars-head h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 12px 0 14px;
}
.lp-pillars-head h2 em { color: var(--red-2); font-style: italic; }
.lp-pillars-head p { color: var(--text-2); font-size: 1rem; max-width: 560px; margin: 0 auto; line-height: 1.6;}

.lp-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 30px);
}
.lp-pillar {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 40px);
  overflow: hidden;
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
.lp-pillar::before {
  content:""; position: absolute; top: -40px; left: -40px;
  width: 180px; height: 70px;
  background: var(--pillar-stroke, var(--red-glow));
  filter: blur(36px);
  opacity: 0.35;
  pointer-events: none;
}
.lp-pillar:hover {
  transform: translateY(-5px);
  border-color: var(--pillar-stroke, var(--red-glow));
  box-shadow: var(--shadow-2);
}
.lp-pillar .ic {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  color: var(--pillar-stroke, var(--red-glow));
  background: color-mix(in srgb, var(--pillar-stroke, var(--red-glow)) 12%, transparent);
  border-radius: 14px;
  margin-bottom: 22px;
}
.lp-pillar h3 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  line-height: 1.1;
  font-weight: 500;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.lp-pillar h3 em { color: var(--pillar-stroke, var(--red-glow)); font-style: italic; }
.lp-pillar p { color: var(--text-2); line-height: 1.65; font-size: 0.96rem; }
.lp-pillar .brush {
  position: absolute; bottom: 10px; right: 10px;
  width: 110px; height: 36px;
  color: var(--pillar-stroke, var(--red-glow));
  opacity: 0.12;
  transition: opacity var(--t-mid), transform var(--t-mid);
}
.lp-pillar:hover .brush { opacity: 0.35; transform: translateX(-6px); }

/* ---------- 8. CTA pour ---------- */
.lp-cta {
  position: relative;
  padding: clamp(100px, 14vw, 180px) 0;
  background: linear-gradient(135deg, #f0ba3c 0%, var(--gold) 45%, #b8934a 100%);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.lp-cta::before {
  content:""; position: absolute; inset:0;
  background-image: var(--grain); opacity: 0.22; mix-blend-mode: overlay;
  pointer-events: none;
}
.lp-cta::after {
  content:""; position: absolute; top: -80px; right: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217,40,67,0.5), transparent 65%);
  filter: blur(30px);
  pointer-events: none;
}
.lp-cta-inner {
  max-width: 920px; margin: 0 auto;
  text-align: center;
  position: relative; z-index: 1;
}
.lp-cta-eyebrow {
  display: inline-block;
  padding: 8px 18px;
  background: rgba(10,14,39,0.1);
  color: var(--ink);
  border-radius: 100px;
  border: 1px solid rgba(10,14,39,0.18);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
}
.lp-cta h2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 22px auto 22px;
  max-width: 780px;
}
.lp-cta h2 em { font-style: italic; color: var(--red); }
.lp-cta p { color: rgba(10,14,39,0.78); font-size: clamp(1rem, 1.2vw, 1.15rem); max-width: 580px; margin: 0 auto 38px; line-height: 1.6; }
.lp-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.lp-cta .btn-red {
  background: var(--ink);
  color: var(--gold-2);
  padding: 18px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  box-shadow: 0 20px 40px -18px rgba(10,14,39,0.5);
}
.lp-cta .btn-red:hover { transform: translateY(-2px); box-shadow: 0 28px 50px -20px rgba(10,14,39,0.6); }
.lp-cta .btn-line {
  padding: 18px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  border: 1.5px solid rgba(10,14,39,0.3);
  transition: background var(--t-fast), border-color var(--t-fast);
  display: inline-flex; align-items: center; gap: 10px;
}
.lp-cta .btn-line:hover { background: rgba(10,14,39,0.08); border-color: var(--ink); }
.lp-cta .quote-mark {
  position: absolute;
  top: 40px; left: 5%;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  color: rgba(10,14,39,0.14);
  line-height: 1;
  pointer-events: none;
}
.lp-cta .quote-mark.r { left: auto; right: 5%; top: auto; bottom: 50px; }

/* ============================================================
   Responsive — tablet + mobile
   ============================================================ */
@media (max-width: 1023px) {
  /* minmax(0,1fr): a plain 1fr track can't shrink below its items'
     min-content, and the 420px-wide bucket img was forcing the whole
     hero column to 450px inside a 375px viewport (copy clipped). */
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-hero-copy, .lp-pour { min-width: 0; }
  .lp-hero-bucket img { max-width: 100%; height: auto; }
  .lp-pour { min-height: 340px; order: 2; }
  /* Switch bucket from absolute-centred to flow-positioned on tablet/mobile */
  .lp-hero-bucket {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: clamp(160px, 44vw, 260px);
    margin: 0 auto;
    animation: lpBucketInMobile 1.2s var(--t-ease-pour) 1s forwards, lpBucketFloat 7s ease-in-out 2.3s infinite;
  }
  @keyframes lpBucketInMobile {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .lp-featured-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-pillar-grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
  .lp-ribbon-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 160px;
  }
  .lp-ribbon-grid .c1 { grid-column: span 4; grid-row: span 2; }
  .lp-ribbon-grid .c2 { grid-column: span 2; }
  .lp-ribbon-grid .c3 { grid-column: span 2; }
  .lp-ribbon-grid .c4 { grid-column: span 2; }
  .lp-ribbon-grid .c5 { grid-column: span 2; }
  .lp-ribbon-grid .c6 { grid-column: span 4; }
  .lp-featured-head { grid-template-columns: 1fr; }
  .lp-shades-rail { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  /* Mobile hero = one full screen: headline up top, the floating
     bucket / brand stage centred in the middle, both CTAs anchored
     at the bottom. The explanatory copy is desktop-only. */
  .lp-hero {
    padding-top: clamp(72px, 11vh, 96px);
    padding-bottom: 0;
    min-height: 100svh;
    display: flex;
  }
  .lp-hero-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto; /* fill the 100svh hero */
    gap: 0;
  }
  /* Dissolve the copy wrapper so h1 / pour / ctas can be reordered
     as siblings in the column. */
  .lp-hero-copy { display: contents; }
  .lp-hero-copy .eyebrow,
  .lp-hero-lede { display: none; }
  .lp-hero-h1 {
    order: 1;
    text-align: center;
    margin: 6px 0 0;
  }
  .lp-pour {
    order: 2;
    flex: 1 1 auto;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* flex items default to min-width:auto — a wide child was
       blowing the pour out to 450px and shoving the centred
       bucket off-screen. */
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  /* The brand stage and the bucket are BOTH flex children of the
     pour; the invisible one (opacity 0) still took flow space and
     pushed the visible one off-centre. Remove it from flow. */
  .lp-hero-brand:not(.hs-active) { display: none; }
  .lp-hero.brand-active .lp-hero-bucket { display: none; }
  /* Hard reset: the desktop float keyframes carry translate(-50%,-50%)
     and were dragging the bucket half off-screen. Own keyframes here. */
  .lp-hero-bucket {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: clamp(200px, 56vw, 300px);
    aspect-ratio: 4 / 5;
    /* mid-low centre: nudged below the vertical middle */
    margin: clamp(28px, 10vh, 90px) auto 0;
    /* Keep the fade-in entrance (container starts at opacity 0),
       swap only the float for the translateY-only variant. */
    animation: lpBucketInMobile 1.2s var(--t-ease-pour) 1s forwards,
               lpBucketFloatM 7s ease-in-out 2.3s infinite !important;
  }
  .lp-hero-bucket img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
  }
  .lp-hero-ctas {
    order: 3;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin: 10px 0 0;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
  }
  .lp-hero-stats { gap: 18px; flex-wrap: wrap; }
  .lp-hero-ctas .btn-pour, .lp-hero-ctas .btn-ghost-d { width: 100%; justify-content: center; }
  .lp-splat.s4 { display: none; }
  .lp-splat.s1 { top: 4%; left: 4%; width: 80px; height: 80px; }
  .lp-splat.s2 { top: 58%; left: 62%; width: 100px; height: 100px; }
  .lp-shades-rail { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .lp-featured-grid { grid-template-columns: 1fr; }
  .lp-ribbon-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
  .lp-ribbon-grid .cell { grid-column: span 2 !important; grid-row: span 1 !important; }
  .lp-ribbon-grid .c1 { grid-row: span 2 !important; }
  .lp-mix-stage { grid-template-columns: 1fr 1fr; gap: 16px; }
  .lp-mix-plus { grid-column: 1 / -1; order: 2; }
  .lp-mix-col.a { order: 1; }
  .lp-mix-col.b { order: 3; }
  .lp-cta-btns .btn-red, .lp-cta-btns .btn-line { width: 100%; justify-content: center; }
}

/* Mobile bucket float — translateY only, no centring translate */
@keyframes lpBucketFloatM {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lp-pour-col,
  .lp-pour-col::after,
  .lp-drip,
  .lp-drip path,
  .lp-splat,
  .lp-hero-bucket,
  .lp-hero-h1 .row i,
  .lp-scroll-cue,
  .lp-scroll-cue span.line,
  .lp-marquee-wrap .marquee-track {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ============================================================
   3. SURFACE TILES — "What are you painting?" homepage strip
   ============================================================ */
.lp-surfaces {
  padding: clamp(60px, 9vw, 110px) 0 clamp(40px, 6vw, 70px);
  background: var(--bg);
  position: relative;
}
.lp-surfaces-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(36px, 5vw, 50px);
}
.lp-surfaces-head .eyebrow {
  color: var(--blue-2);
  border-color: rgba(37,71,184,0.25);
  background: rgba(37,71,184,0.08);
}
.lp-surfaces-head h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-top: 14px;
}
.lp-surfaces-head h2 em { font-style: italic; color: var(--red-2); }

.lp-surfaces-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}
.lp-surface {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 3 / 4;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 20px 50px -22px rgba(10,14,39,0.32);
  transition: transform 0.5s var(--t-ease-pour), box-shadow 0.5s var(--t-ease-pour);
}
.lp-surface:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 70px -22px rgba(10,14,39,0.45);
}
.lp-surface-num {
  position: relative; z-index: 2;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.78);
  font-weight: 700;
}
.lp-surface-name {
  position: relative; z-index: 2;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-top: 8px;
  line-height: 1;
}
.lp-surface-arr {
  position: absolute;
  right: 16px; bottom: 16px;
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  color: #fff;
  transition: transform var(--t-fast), background var(--t-fast);
}
.lp-surface:hover .lp-surface-arr {
  background: rgba(255,255,255,0.34);
  transform: translateX(4px);
}

/* Surface tile backgrounds (CSS-only textures — match products page) */
.lp-surface--cement {
  background:
    radial-gradient(ellipse 80% 60% at 32% 22%, rgba(255,255,255,0.18), transparent 62%),
    linear-gradient(162deg, #b3a89c 0%, #6a5e51 100%);
}
.lp-surface--metal {
  background:
    radial-gradient(ellipse 80% 60% at 38% 22%, rgba(255,255,255,0.26), transparent 65%),
    linear-gradient(155deg, #7d8694 0%, #2f3540 100%);
}
.lp-surface--wood {
  background:
    radial-gradient(ellipse 80% 60% at 32% 22%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(160deg, #b08868 0%, #663f24 100%);
}
.lp-surface--exterior {
  background:
    radial-gradient(ellipse 70% 70% at 25% 28%, rgba(255,255,255,0.34), transparent 60%),
    radial-gradient(ellipse 60% 50% at 78% 78%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(160deg, #9bb6c8 0%, #3f5d75 100%);
}

@media (max-width: 1023px) {
  .lp-surfaces-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    padding: 4px var(--gutter, 22px) 8px;
    margin: 0 calc(var(--gutter, 22px) * -1);
  }
  .lp-surfaces-grid::-webkit-scrollbar { display: none; }
  .lp-surface {
    flex: 0 0 auto;
    width: 65vw;
    max-width: 280px;
    scroll-snap-align: start;
  }
}

/* ============================================================
   6. INSPIRATION TEASER — homepage preview of /inspiration
   ============================================================ */
.lp-insp {
  padding: clamp(60px, 9vw, 110px) 0;
  background: var(--bg-soft);
  position: relative;
}
.lp-insp-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: end;
  margin-bottom: clamp(32px, 5vw, 48px);
}
.lp-insp-head .eyebrow { color: var(--red-2); }
.lp-insp-head h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-top: 12px;
}
.lp-insp-head h2 em { color: var(--red-2); font-style: italic; }
.lp-insp-sub {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 12px;
  max-width: 520px;
}
.lp-insp-head .btn {
  align-self: end;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.lp-insp-head .btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.lp-insp-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 200px;
  gap: clamp(10px, 1.4vw, 18px);
}
.lp-insp-tile {
  position: relative;
  grid-column: span 2;
  grid-row: span 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px -18px rgba(10,14,39,0.28);
  text-decoration: none;
  display: block;
  cursor: pointer;
}
.lp-insp-tile--lg { grid-column: span 3; grid-row: span 2; }
/* Four-tile variant — the 6-column bento leaves holes at this count, so the
   strip becomes a plain 2x2 with tiles tall enough not to letterbox. */
.lp-insp-grid--four {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(210px, 24vw, 330px);
}
.lp-insp-grid--four .lp-insp-tile,
.lp-insp-grid--four .lp-insp-tile--lg { grid-column: span 1; grid-row: span 1; }
.lp-insp-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--t-ease-pour);
  display: block;
}
.lp-insp-tile:hover img { transform: scale(1.05); }
.lp-insp-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,8,16,0.72) 100%);
  opacity: 0.5;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.lp-insp-tile:hover::after { opacity: 0.85; }
.lp-insp-cap {
  position: absolute;
  left: 20px; bottom: 16px;
  z-index: 2;
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

@media (max-width: 1023px) {
  .lp-insp-head { grid-template-columns: 1fr; }
  .lp-insp-head .btn { justify-self: start; }
  .lp-insp-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 160px;
  }
  .lp-insp-tile { grid-column: span 2; }
  .lp-insp-tile--lg { grid-column: span 4; grid-row: span 2; }
  /* Keep the four-tile strip at two per row here — the base rule pins its
     tiles to span 1, which would otherwise give four across on 4 columns. */
  .lp-insp-grid--four {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(180px, 30vw, 260px);
  }
}
@media (max-width: 560px) {
  .lp-insp-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }
  .lp-insp-tile,
  .lp-insp-tile--lg { grid-column: span 1; grid-row: span 1; }
}

/* ============================================================
   8. VISUALISER CTA — try-the-tool full-bleed banner
   ============================================================ */
.lp-vis-cta {
  padding: clamp(60px, 9vw, 110px) 0;
  background: var(--bg);
}
.lp-vis-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding: clamp(40px, 5vw, 64px);
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2, #1c1131) 100%);
  border-radius: var(--radius-xl, 28px);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.lp-vis-inner::before {
  content: ""; position: absolute;
  top: -120px; left: -120px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31,64,136,0.55), transparent 65%);
  filter: blur(40px);
  z-index: 0;
}
.lp-vis-inner::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.08; mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.lp-vis-copy {
  position: relative; z-index: 2;
}
.lp-vis-copy .eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--gold-2, #ffc93d);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  border-radius: 100px;
}
.lp-vis-copy h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 18px 0 14px;
}
.lp-vis-copy h2 em { font-style: italic; color: var(--gold-2, #ffc93d); }
/* Always-dark panel — same reason as .lp-about-copy above. */
.lp-vis-copy .eyebrow.eyebrow:has(+ h2) { color: #fff; }
.lp-vis-copy .eyebrow.eyebrow + h2 { color: rgba(255,255,255,0.78); }
.lp-vis-copy p {
  color: rgba(255,255,255,0.80);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 26px;
  max-width: 480px;
}
.lp-vis-copy .btn-pour {
  background: var(--gold);
  color: var(--ink);
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  transition: transform var(--t-fast);
}
.lp-vis-copy .btn-pour:hover { transform: translateY(-2px); }

.lp-vis-preview {
  position: relative;
  z-index: 2;
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 80px -22px rgba(0,0,0,0.55);
}
.lp-vis-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lp-vis-paint {
  position: absolute; inset: 0;
  background: #1f4088;
  mix-blend-mode: multiply;
  opacity: 0.45;
}
.lp-vis-swatch {
  position: absolute;
  bottom: 18px; left: 18px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-radius: 100px;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,0.4);
}
.lp-vis-swatch-chip {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #1f4088;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.lp-vis-swatch-info { display: flex; flex-direction: column; gap: 1px; }
.lp-vis-swatch-info .n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
  line-height: 1;
}
.lp-vis-swatch-info .c {
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.2;
}

@media (max-width: 1023px) {
  .lp-vis-inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lp-vis-inner { padding: 28px; }
}

/* ============================================================
   HERO BRAND STAGE — slide 0 "stunner" replacing the bucket
   with an animated Cloud Paints logo + brand effects.
   ============================================================ */
.lp-hero-brand {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(280px, 34vw, 480px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.9s cubic-bezier(.4,0,.2,1);
}
.lp-hero-brand.hs-active { opacity: 1; }

/* Logo mark — dramatic scale + slight rotate entrance */
.lp-brand-mark {
  width: clamp(150px, 18vw, 220px);
  height: auto;
  filter: drop-shadow(0 24px 50px rgba(225,31,41,0.55));
  opacity: 0;
  transform: scale(0.7) rotate(-10deg);
  z-index: 2;
}
.lp-hero-brand.hs-active .lp-brand-mark {
  animation:
    lpBrandMarkIn 1.2s cubic-bezier(.34,1.4,.5,1) forwards,
    lpBrandMarkFloat 5s ease-in-out 1.2s infinite;
}
@keyframes lpBrandMarkIn {
  0%   { opacity: 0; transform: scale(0.7) rotate(-10deg); }
  60%  { opacity: 1; transform: scale(1.05) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes lpBrandMarkFloat {
  0%, 100% { transform: scale(1) translateY(0) rotate(0deg); }
  50%      { transform: scale(1.02) translateY(-6px) rotate(0.5deg); }
}

/* Wordmark — staggered character feel via letter-spacing pop */
.lp-brand-wordmark {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(3.1rem, 5.8vw, 4.7rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.18em;
  max-width: 100%;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  /* The lockup is the largest type on the site; let it render on the
     sharp side rather than the heavy side. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Luminous cream plate behind the lockup — the navy letters were
   sinking into the dark gradient without it. */
.lp-brand-wordmark::before {
  content: "";
  position: absolute;
  inset: -30% -8%;
  background: radial-gradient(ellipse at center,
    rgba(255,250,238,0.94) 0%,
    rgba(255,250,238,0.62) 45%,
    transparent 76%);
  filter: blur(18px);
  z-index: -1;
  border-radius: 50%;
}
/* CLOUD uses the true logo navy + a soft cream glow so it stays
   legible against the dark hero scrim while matching the printed logo. */
/* Contrast comes from the cream plate behind the lockup, not from glow
   piled onto the glyphs — wide 24-52px halos were bleeding into the
   counters and reading as a soft, out-of-focus wordmark. A single tight
   halo keeps the edges crisp at this size. */
.lp-brand-wordmark .c-blue {
  color: #1D1E51;
  text-shadow: 0 0 3px rgba(255,252,244,0.95);
}
.lp-brand-wordmark .c-red {
  color: #e11f29;
  font-style: italic;
  text-shadow: 0 0 3px rgba(255,252,244,0.9);
}
.lp-hero-brand.hs-active .lp-brand-wordmark {
  animation: lpBrandWordIn 0.85s cubic-bezier(.4,0,.2,1) 0.55s forwards;
}
@keyframes lpBrandWordIn {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Tagline below — soft caption */
.lp-brand-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.7);
  font-weight: 600;
  z-index: 2;
  opacity: 0;
  transform: translateY(10px);
}
.lp-hero-brand.hs-active .lp-brand-tag {
  animation: lpBrandTagIn 0.6s ease 1.05s forwards;
}
@keyframes lpBrandTagIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Pulsing brand-red halo behind the logo */
.lp-brand-halo {
  position: absolute;
  left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  width: clamp(240px, 30vw, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(225,31,41,0.62) 0%,
    rgba(225,31,41,0.26) 38%,
    transparent 68%);
  filter: blur(36px);
  opacity: 0;
  z-index: 0;
}
.lp-hero-brand.hs-active .lp-brand-halo {
  animation:
    lpBrandHaloIn 1s ease 0.2s forwards,
    lpBrandHaloPulse 4.5s ease-in-out 1.2s infinite;
}
@keyframes lpBrandHaloIn {
  to { opacity: 1; }
}
@keyframes lpBrandHaloPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

/* Paint splatters around the logo — appear, then slowly orbit */
.lp-brand-splat {
  position: absolute;
  width: clamp(130px, 16vw, 230px);
  height: auto;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.35));
}
.lp-brand-splat.s1 { top: 1%;   left: -2%;  }
.lp-brand-splat.s2 { bottom: 4%; right: -1%; }
.lp-brand-splat.s3 { top: 8%;  right: 6%; width: clamp(80px, 10vw, 140px); }
.lp-hero-brand.hs-active .lp-brand-splat {
  animation: lpBrandSplatIn 1s cubic-bezier(.4,0,.2,1) 0.8s forwards;
}
.lp-hero-brand.hs-active .lp-brand-splat.s1 { animation-delay: 0.8s; }
.lp-hero-brand.hs-active .lp-brand-splat.s2 { animation-delay: 1.0s; }
.lp-hero-brand.hs-active .lp-brand-splat.s3 { animation-delay: 1.2s; }
@keyframes lpBrandSplatIn {
  0%   { opacity: 0; transform: scale(0.3) rotate(-30deg); }
  70%  { opacity: 1; transform: scale(1.1) rotate(10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Three paint drops cascading down at different speeds & positions */
.lp-brand-drop {
  position: absolute;
  top: -16%;
  width: 12px; height: 16px;
  background: var(--drop-c, #e11f29);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: translateX(-50%);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
  opacity: 0;
  z-index: 1;
}
.lp-brand-drop.d1 { left: 30%; --drop-c: #e11f29; }
.lp-brand-drop.d2 { left: 50%; --drop-c: #e8a317; width: 9px; height: 12px; }
.lp-brand-drop.d3 { left: 72%; --drop-c: #1f4088; width: 10px; height: 14px; }
.lp-hero-brand.hs-active .lp-brand-drop.d1 { animation: lpBrandDrop 3.2s cubic-bezier(.5,0,.5,1) 1.4s infinite; }
.lp-hero-brand.hs-active .lp-brand-drop.d2 { animation: lpBrandDrop 3.8s cubic-bezier(.5,0,.5,1) 2.4s infinite; }
.lp-hero-brand.hs-active .lp-brand-drop.d3 { animation: lpBrandDrop 4.0s cubic-bezier(.5,0,.5,1) 1.9s infinite; }
@keyframes lpBrandDrop {
  0%   { opacity: 0; top: -16%; transform: translateX(-50%) scaleY(0.6); }
  18%  { opacity: 1; top: 4%;   transform: translateX(-50%) scaleY(1.2); }
  60%  { opacity: 0.8; top: 70%; transform: translateX(-50%) scaleY(1.4); }
  100% { opacity: 0; top: 100%; transform: translateX(-50%) scaleY(0.3); }
}

/* Hide brand stage on mobile reduced motion */
@media (max-width: 1023px) {
  .lp-hero-brand {
    width: clamp(220px, 70vw, 360px);
    gap: 14px;
  }
  .lp-brand-mark { width: clamp(120px, 32vw, 180px); }
  .lp-brand-splat.s3 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* Reduced motion means stop the movement, not undo the layout. These
     rules used to reset `transform` on everything in the stage — but the
     wordmark is centred with translateX(-50%), so clearing it dragged the
     lockup half its own width to the right, where the hero column's
     overflow:hidden cut the last letter off the page. Anyone browsing with
     Reduce Motion on saw "CLOUD PAINT".

     So: kill the animation, reveal the element, and leave placement to the
     layout rules that own it. The mark, tag, halo and splats are display:none
     in the current hero, and are listed here only so the stage still behaves
     if they are ever brought back. */
  .lp-hero-brand.hs-active .lp-brand-mark,
  .lp-hero-brand.hs-active .lp-brand-wordmark,
  .lp-hero-brand.hs-active .lp-brand-tag,
  .lp-hero-brand.hs-active .lp-brand-halo,
  .lp-hero-brand.hs-active .lp-brand-splat {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .lp-hero-brand.hs-active .lp-brand-mark { transform: scale(1) !important; }
  .lp-hero-brand.hs-active .lp-brand-halo { transform: translate(-50%, -50%) !important; }
  .lp-hero-brand.hs-active .lp-brand-drop { display: none; }
}

/* ============================================================
   3. WHY CLOUD PAINTS — value cards (replaces surface tiles)
   ============================================================ */
.lp-why {
  padding: clamp(70px, 10vw, 120px) 0;
  background:
    /* Top scrim so the headline sits cleanly above the photo */
    linear-gradient(180deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 92%, transparent) 25%,
      color-mix(in srgb, var(--bg) 88%, transparent) 75%,
      var(--bg) 100%),
    /* Apartments backdrop — a real Cloud Paints surface to anchor the
       section, dimmed heavily so it reads as atmosphere not subject */
    url(../images/inspiration/inspiration-apartments-sage.jpg) center/cover no-repeat fixed,
    var(--bg);
  position: relative;
  overflow: hidden;
}
.lp-why::before {
  content:""; position: absolute; inset: 0;
  /* Only the soft accent washes remain on the ::before. The dark
     'film' that used to cover the photo is replaced by the animated
     block grid below (.lp-why-blocks). */
  background:
    radial-gradient(40% 50% at 15% 25%, rgba(217,40,67,0.10), transparent 60%),
    radial-gradient(45% 55% at 88% 80%, rgba(31,64,136,0.10), transparent 60%);
  z-index: 0;
  pointer-events: none;
}

/* Kinetic block grid — 8×4 light scrim rectangles overlay the
   apartments photo. Each block pulses (scaleY → 0, hold, → 1) on a
   staggered delay so a wave of rectangles continuously sweeps across
   the section, exposing the photo beneath in slices. Reads as motion.
   For the bright-and-vibrant look, the blocks now use a soft cream
   wash instead of the previous near-black film — the photo stays
   visible at all times and the cards float over a luminous backdrop. */
.lp-why-blocks {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, 1fr);
  z-index: 0;
  pointer-events: none;
  /* Almost-clear baseline so the photo never feels obscured.
     The cards carry their own panels, so we don't need a heavy scrim. */
  background: rgba(250, 246, 236, 0.06);
}
.lp-why-blocks i {
  background: rgba(250, 246, 236, 0.32);
  transform-origin: 50% 50%;
}
/* The wave used to loop forever behind the copy — perpetual flicker with
   no meaning, and 32 elements compositing on every frame whether or not
   the section was on screen. It now passes once, when the section arrives,
   and then rests. */
.lp-why.is-painting .lp-why-blocks i {
  will-change: transform, opacity;
  animation: whyBlockPass 1.5s cubic-bezier(.65,0,.35,1) 1 both;
  animation-delay: calc(var(--i, 0) * 0.022s);
}
@keyframes whyBlockPass {
  0%   { transform: scaleY(1); opacity: 1; }
  45%  { transform: scaleY(0.04); opacity: 0.04; }
  100% { transform: scaleY(1); opacity: 1; }
}
/* Respect reduced motion: hold the blocks at half-opacity instead of
   animating, so the section still looks intentional but doesn't
   distract. */
@media (prefers-reduced-motion: reduce) {
  .lp-why.is-painting .lp-why-blocks i { animation: none; }
  .lp-why-blocks i { opacity: 0.55; }
}
.lp-why > .container { position: relative; z-index: 1; }
/* Mobile Safari has issues with background-attachment: fixed —
   fall back to scroll so the section doesn't jitter on touch */
@media (max-width: 1023px), (hover: none) {
  .lp-why {
    background-attachment: scroll, scroll;
  }
}
.lp-why-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(40px, 6vw, 56px);
}
.lp-why-head .eyebrow {
  color: var(--red-2);
  border-color: rgba(217,40,67,0.25);
  background: rgba(217,40,67,0.06);
}
.lp-why-head h2 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 14px 0 14px;
}
.lp-why-head h2 em { color: var(--red-2); font-style: italic; }
.lp-why-sub {
  color: var(--text-2);
  font-size: 1.04rem;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}
.lp-why-sub em { color: var(--text); font-style: normal; font-weight: 600; }

/* Editorial layout — big serif lead does the work, plus a softly
   accent-tinted panel, a paint-drip flourish and an italic word that
   reveals an underline on hover. Reads as four magazine plates, each
   in its own colour mood. */
.lp-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
.lp-why-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px 26px 30px;
  border-radius: 18px;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent, var(--red-2)) 14%, transparent) 0%,
      color-mix(in srgb, var(--accent, var(--red-2)) 3%, transparent) 100%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent, var(--red-2)) 22%, var(--border-2));
  transition: transform var(--t-mid), border-color var(--t-mid),
              box-shadow var(--t-mid);
}
/* Paint-drip flourish — a soft accent glow blob in the top-right.
   Adds depth without going corporate-card-shadow. */
.lp-why-card::before {
  content:""; position: absolute;
  top: -60px; right: -50px;
  width: 180px; height: 180px;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--accent, var(--red-2)) 55%, transparent) 0%,
    transparent 70%);
  filter: blur(28px);
  opacity: 0.7;
  pointer-events: none;
  z-index: -1;
  transition: transform var(--t-mid), opacity var(--t-mid);
}
/* A second flourish — a small accent dot down-left, like a stray drip */
.lp-why-card::after {
  content:""; position: absolute;
  bottom: 18px; left: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent, var(--red-2));
  opacity: 0.55;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent, var(--red-2)) 65%, transparent);
  transition: transform var(--t-mid), opacity var(--t-mid);
}
.lp-why-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent, var(--red-2)) 45%, transparent);
  box-shadow:
    0 22px 44px -22px color-mix(in srgb, var(--accent, var(--red-2)) 40%, transparent),
    0 2px 6px -2px rgba(0,0,0,0.18);
}
.lp-why-card:hover::before { transform: scale(1.15); opacity: 0.9; }
.lp-why-card:hover::after  { transform: scale(1.4); opacity: 0.85; }

/* Catalogue mark — a numbered chip in the accent colour */
.lp-why-num {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent, var(--red-2));
  margin: 0 0 24px;
}
.lp-why-num::before {
  content:""; display: inline-block;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}

/* The big lead — serif, oversized; italic accent word picks up a
   hand-drawn underline on hover. */
.lp-why-lead {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 2.8vw, 2.55rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 clamp(18px, 2vw, 24px);
  max-width: 12ch;
}
.lp-why-lead em {
  color: var(--accent, var(--red-2));
  font-style: italic;
  font-weight: 400;
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.55s cubic-bezier(.4,0,.2,1);
}
.lp-why-card:hover .lp-why-lead em { background-size: 100% 2px; }

.lp-why-card p {
  color: var(--text-2);
  font-size: 0.97rem;
  line-height: 1.65;
  margin: 0;
  max-width: 32ch;
}

@media (max-width: 1023px) {
  .lp-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .lp-why-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE HERO REDESIGN
   Tightens the home hero on phones — smaller visual, refined
   single-primary-CTA pattern, scroll cue hidden, copy tightened.
   ============================================================ */

@media (max-width: 1023px) {
  /* Section: shrink height, drop padding that wasted space */
  body[data-page="home"] .lp-hero {
    min-height: auto;
    padding-top: clamp(96px, 14vh, 130px);
    padding-bottom: clamp(36px, 6vh, 60px);
  }
  body[data-page="home"] .lp-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: clamp(20px, 4vw, 28px);
    align-items: start;
  }

  /* Copy column: tighter type, less margin */
  body[data-page="home"] .lp-hero-copy { padding-top: 0; }
  body[data-page="home"] .lp-hero-h1 {
    font-size: clamp(2.4rem, 9.5vw, 3.8rem);
    line-height: 0.96;
    margin: 14px 0 14px;
  }
  body[data-page="home"] .lp-hero-lede {
    font-size: 0.98rem;
    line-height: 1.55;
    margin-bottom: 22px;
    max-width: none;
  }

  /* CTAs: primary button + secondary text-link (no double-button crowd) */
  body[data-page="home"] .lp-hero-ctas {
    gap: 12px;
    margin-bottom: 0;
    align-items: center;
  }
  body[data-page="home"] .lp-hero-ctas .btn-pour {
    padding: 14px 24px;
    font-size: 14px;
    box-shadow: 0 14px 32px -12px rgba(217,40,67,0.55);
  }
  /* Secondary becomes a clean text-link with arrow */
  body[data-page="home"] .lp-hero-ctas .btn-ghost-d {
    border: 0;
    background: transparent;
    padding: 12px 4px;
    color: var(--gold-2, #ffc93d);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: relative;
  }
  body[data-page="home"] .lp-hero-ctas .btn-ghost-d::after {
    content: "\2192";
    margin-left: 8px;
    transition: transform 0.25s ease;
    display: inline-block;
  }
  body[data-page="home"] .lp-hero-ctas .btn-ghost-d:hover {
    background: transparent;
    border: 0;
    color: #fff;
  }
  body[data-page="home"] .lp-hero-ctas .btn-ghost-d:hover::after {
    transform: translateX(4px);
  }

  /* Visual side (.lp-pour): compact, focused */
  body[data-page="home"] .lp-pour {
    min-height: 260px;
    padding-top: 8px;
    order: 2;
  }

  /* Bucket: the hero visual — generous, floating mid-low centre */
  /* The tin used to sit at 9vh from the top of the column, which put its
     bottom edge flush with the bottom of .lp-pour — and .lp-pour clips. The
  /* ---- the mobile hero column ----------------------------------------
     One box, the same height in both phases, with whatever is on stage
     centred on its midline. Sized from content it grew when the tin was
     large and the whole hero changed height between the opening line-up
     and the first product slide — 110px of the page jumping under the
     reader's thumb, which is the shift Google measures. */
  body[data-page="home"] .lp-pour {
    flex: 0 0 auto;
    height: clamp(290px, 42vh, 400px);
    min-height: 0;
    padding-bottom: 0;
  }

  /* The name that hangs under the tin: its own height, plus the gap above
     it, plus a little air. Named once because two rules have to agree on
     it — the tin shortens by exactly this much, and pushes itself up by
     exactly this much, so the tin AND its name centre as one object. */
  body[data-page="home"] .lp-hero-bucket {
    --name-band: 74px;
    height: calc(100% - var(--name-band));
    width: auto;
    max-width: min(58vw, 280px);
    margin: 0 auto var(--name-band);
  }
  body[data-page="home"] .lp-hero-bucket img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* The opening line-up, centred as one object: five tins with the company
     name directly beneath them. The tin is 86px tall here and the lockup
     41px, so the group is 135px tall and its midline sits 18px above the
     tins' bottom edge. Both offsets are measured from the same 50% of the
     same box, which is why they cannot drift apart. */
  body[data-page="home"] .lp-intro-it { bottom: calc(50% - 18px); }
  body[data-page="home"] .lp-hero .lp-brand-wordmark { bottom: calc(50% - 67px); }

  /* Brand stage: cleaner, centered, smaller halo */
  /* The brand stage stays ABSOLUTE on mobile, spanning the column.
     It used to be flipped to position:relative here, which made it an
     in-flow flex item 216px wide inside a 358px column: it took the space,
     the tin was squeezed into the 142px left over and shoved flush right,
     and — because the wordmark is positioned against it — the company name
     centred on that 216px box instead of on the page. Both of the mobile
     hero's placement faults came from these six lines. */
  body[data-page="home"] .lp-hero-brand {
    gap: 12px;
  }
  body[data-page="home"] .lp-brand-mark {
    width: clamp(110px, 28vw, 160px);
  }
  /* Sized off the viewport rather than a clamp with a rem floor: the
     lockup is a single unbreakable line, so a floor taller than the screen
     can carry just overflows the hero. */
  body[data-page="home"] .lp-brand-wordmark {
    font-size: min(8.2vw, 2.8rem);
    letter-spacing: -0.03em;
  }
  body[data-page="home"] .lp-brand-tag {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-align: center;
  }
  body[data-page="home"] .lp-brand-halo {
    width: clamp(180px, 50vw, 280px);
  }
  /* Brand splats too dense for mobile — keep just s1 */
  body[data-page="home"] .lp-hero-brand .lp-brand-splat.s2,
  body[data-page="home"] .lp-hero-brand .lp-brand-splat.s3 { display: none; }

  /* Hide the scroll cue on mobile — it crowds the visual zone */
  body[data-page="home"] .lp-scroll-cue { display: none; }

  /* Bg side-gradient was already mobile-vertical; reinforce: */
  body[data-page="home"] .lp-hero-bg::after {
    background:
      linear-gradient(180deg,
        rgba(11,10,16,0.18) 0%,
        rgba(11,10,16,0.55) 50%,
        rgba(11,10,16,0.92) 100%) !important;
  }
  body[data-page="home"] .lp-hero.brand-active .lp-hero-bg::after {
    background:
      linear-gradient(180deg,
        rgba(11,10,16,0.20) 0%,
        rgba(11,10,16,0.55) 55%,
        rgba(11,10,16,0.94) 100%),
      radial-gradient(50% 50% at 50% 50%, rgba(232,163,23,0.18), transparent 70%),
      radial-gradient(40% 60% at 30% 80%, rgba(217,40,67,0.16), transparent 70%) !important;
  }
}

/* Very small phones (≤ 420px) — squeeze further but stay readable */
@media (max-width: 420px) {
  body[data-page="home"] .lp-hero-h1 {
    font-size: clamp(2.1rem, 9vw, 2.8rem);
  }
  body[data-page="home"] .lp-hero-lede {
    font-size: 0.94rem;
  }
  body[data-page="home"] .lp-hero-ctas .btn-pour {
    width: 100%;
    justify-content: center;
  }
  body[data-page="home"] .lp-hero-ctas .btn-ghost-d {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================
   HOME PAGE — visual richness pass (less "basic" feel)
   Adds breathing room, sharper section accents, refined dividers.
   ============================================================ */

/* Marquee: slow on mobile so eye doesn't fight the motion */
@media (max-width: 720px) {
  .lp-marquee-wrap .marquee-track { animation-duration: 95s; }
  .lp-marquee-wrap .marquee-track span {
    font-size: clamp(1.4rem, 6vw, 2.6rem);
    padding: 0 0.6em;
  }
  .lp-marquee-wrap .marquee-track span::after {
    width: 6px; height: 6px;
  }
}

/* ============================================================
   REAL WALLS OF KENYA — 8 colour cards between Why CP and Featured
   Products. Each card carries a colour-fill placeholder so the
   section still reads even before close-up shots are dropped into
   images/walls/. When an image arrives it sits on top of the fill.
   ============================================================ */
.lp-walls {
  background:
    radial-gradient(50% 60% at 18% 22%, color-mix(in srgb, var(--red-2) 6%, transparent), transparent 65%),
    radial-gradient(50% 65% at 88% 78%, color-mix(in srgb, var(--blue-2, #1f4088) 6%, transparent), transparent 65%),
    var(--bg);
  padding: clamp(70px, 10vw, 120px) 0;
  border-top: 1px solid var(--border-2);
}
.lp-walls-head {
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 60px);
  text-align: center;
}
.lp-walls-head h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-weight: 400;
  margin: 14px 0 16px;
}
.lp-walls-head h2 em { color: var(--red-2); font-style: italic; font-weight: 400; }
.lp-walls-lede {
  color: var(--text-2);
  font-size: 1.04rem;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 auto;
}

.lp-walls-strip {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
}
.lp-wall {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  /* Colour-fill placeholder so the card still reads if the close-up
     image hasn't been generated yet. Image sits over the fill once it
     exists; img[onerror] hides itself if 404 so the fill shows. */
  background: var(--c, var(--red-2));
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.lp-wall:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--c, var(--red-2)) 60%, transparent);
}
.lp-wall img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--c);
  transition: transform 0.7s cubic-bezier(.4,0,.2,1);
}
.lp-wall:hover img { transform: scale(1.06); }
.lp-wall::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(11,10,16,0.72) 100%);
  pointer-events: none;
}
/* Fresh-coat sweep — a wet coat of the tile's own shade rolls down
   on hover. Sits between the photo (z0) and the meta text (child,
   painted after). Revisit once real wall photos land if the full
   cover feels too opaque. */
.lp-wall::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c, #d92843) 74%, #fff) 0%,
    color-mix(in srgb, var(--c, #d92843) 92%, #fff) 100%);
  opacity: 0.92;
  transform: translateY(-101%);
  transition: transform 0.55s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.lp-wall:hover::before { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .lp-wall::before { display: none; }
}
.lp-wall-meta {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 1;
  display: flex; flex-direction: column;
  gap: 2px;
  color: #fff;
}
.lp-wall-hex {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}
.lp-wall-name {
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 500;
}

.lp-walls-foot {
  margin-top: clamp(28px, 3vw, 40px);
  text-align: center;
  color: var(--text-2);
  font-size: 0.94rem;
}
.lp-walls-foot a {
  color: var(--red-2);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}
.lp-walls-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .lp-walls-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .lp-walls-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Why-Cloud-Paints editorial cards on mobile: tighten the lead so the
   serif stays oversized but doesn't push the body off-screen. */
@media (max-width: 560px) {
  .lp-why-grid { gap: 18px; }
  .lp-why-card { padding: 24px 22px; }
  .lp-why-num { margin: 0 0 16px; }
  .lp-why-lead {
    font-size: clamp(1.7rem, 7.5vw, 2.2rem);
    margin-bottom: 14px;
    max-width: none;
  }
  .lp-why-card p { font-size: 0.96rem; max-width: none; }
}

/* Featured products grid mobile: card hover→tap presentation */
@media (max-width: 560px) {
  .lp-featured-grid .product-card {
    border: 1px solid var(--border-2);
  }
}

/* Section headings on mobile — tighter rhythm */
@media (max-width: 560px) {
  .lp-why-head,
  .lp-insp-head,
  .lp-featured-head {
    margin-bottom: clamp(26px, 5vw, 36px);
  }
  .lp-why-head h2,
  .lp-insp-head h2,
  .lp-featured-head h2 {
    font-size: clamp(2rem, 7vw, 2.6rem);
  }
}

/* Visualiser CTA banner: stack with refined spacing */
@media (max-width: 1023px) {
  .lp-vis-inner {
    padding: clamp(28px, 5vw, 44px);
    gap: 24px;
  }
  .lp-vis-copy h2 {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
  }
}

/* Projects ribbon (homepage) — reduce gap clutter on mobile */
@media (max-width: 600px) {
  .lp-ribbon-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 180px;
    gap: 10px;
  }
  .lp-ribbon-grid .cell { grid-column: span 1 !important; grid-row: span 1 !important; }
  .lp-ribbon-grid .c1 { grid-row: span 2 !important; }
}

/* About-us section on home — tighter on mobile, ditch the dual-photo gap */
@media (max-width: 900px) {
  body[data-page="home"] .lp-about-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  body[data-page="home"] .lp-about-media {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    padding: 12px;
  }
  body[data-page="home"] .lp-about-photo-main {
    aspect-ratio: 4/3;
  }
}

/* Final CTA section — tighter padding, single-column buttons */
@media (max-width: 560px) {
  .lp-cta {
    padding: clamp(60px, 12vw, 90px) 0;
  }
  .lp-cta h2 { font-size: clamp(2rem, 7vw, 2.6rem); }
  .lp-cta p  { font-size: 0.95rem; }
}

/* Marquee container — reduce internal padding so it doesn't dominate */
@media (max-width: 720px) {
  .lp-marquee-wrap {
    padding: 6px 0;
  }
}

/* Eyebrow text on hero brand stage — make it more readable */
@media (max-width: 560px) {
  body[data-page="home"] .lp-hero-copy .eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    padding: 6px 12px;
  }
}

/* ============================================================
   HERO INTRO FLASH — the range bounces in once on load
   Sits inside .lp-pour, removes itself, hands over to the slides.
   ============================================================ */
.lp-intro {
  position: absolute;
  inset: 0;
  z-index: 4;
  /* visible, not hidden: fit() sizes the row to the column, and clipping
     here only hid the overflow instead of fixing it */
  overflow: visible;
  pointer-events: none;
}
/* The opening stage shows the range, not the logo lockup. The halo stays
   as ambient glow behind the tins; the mark, wordmark, tagline and splats
   would only compete with them. */
.lp-brand-mark,
.lp-brand-tag,
.lp-brand-splat { display: none !important; }

/* The lockup used to be a centred flex column sized to its contents. With
   only the wordmark left in it, percentage offsets resolved inside that
   small box, so the name floated above the tins. Let it span the column
   instead, and the halo goes: it sat right behind the tins and washed the
   labels out. */
.lp-hero .lp-hero-brand {
  inset: 0;
  left: 0; top: 0;
  width: auto;
  transform: none;
  display: block;
}
.lp-brand-halo { display: none !important; }

/* The name comes back — just the name — sitting under the line-up. */
.lp-hero .lp-brand-wordmark {
  display: flex !important;
  position: absolute;
  left: 50%;
  /* Keyed off the tins' own offset (30%) so the two never drift apart,
     whatever the column height. */
  bottom: calc(30% - 3.5rem);
  transform: translateX(-50%) !important;
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
  white-space: nowrap;
  opacity: 0;
  filter: none !important;
  animation: none !important;
  transition: opacity 0.5s ease 0.35s;
}
.lp-hero.brand-active .lp-brand-wordmark { opacity: 1; }

/* The rotating bucket sits idle while the line-up holds the stage. */
.lp-hero.intro-running .lp-hero-bucket { opacity: 0 !important; }

.lp-intro-it {
  position: absolute;
  left: 50%;
  bottom: 30%;
  opacity: 0;
  will-change: transform, opacity;
}
.lp-intro-it img {
  display: block;
  /* A fixed box with contain, so every tin occupies the same footprint.
     Sizing on height alone made the wide tins read as bigger products.
     No filter — the labels have to stay legible. */
  width: clamp(74px, 9.2vw, 128px);
  height: clamp(86px, 10.6vw, 150px);
  object-fit: contain;
}
.lp-intro-pool {
  position: absolute;
  left: 50%; bottom: -9px;
  width: 128px; height: 26px;
  transform: translateX(-50%) scale(.4);
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--c), transparent 70%);
  filter: blur(7px);
}
.lp-intro-ring {
  position: absolute;
  left: 50%; bottom: -4px;
  width: 20px; height: 8px;
  margin-left: -10px;
  border: 2px solid var(--c);
  border-radius: 50%;
  opacity: 0;
}
@media (max-width: 780px) {
  .lp-intro-pool { width: 76px; height: 17px; }
  /* Size only. Placement for both the line-up and the lockup is set once,
     together, in the mobile hero column block above — they have to be
     measured from the same 50% of the same box or they drift apart, which
     is how the name ended up sitting on top of the tins. A `bottom` here
     would win on source order and undo that. */
  body[data-page="home"] .lp-hero .lp-brand-wordmark {
    font-size: min(6.6vw, 2rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* The line-up stays. hero-intro.js draws it in its resting position with
     no flight, no squash and no splash under this preference, so there is
     nothing left here to suppress — and hiding it threw away the content
     along with the movement, leaving an empty stage where the range should
     be. Only the falling exit is a problem, and that is handled in JS too.

     The one thing worth killing here is the idle shimmer on the pool. */
  .lp-intro-pool,
  .lp-intro-ring { display: none; }
}

/* ------------------------------------------------------------
   HERO SLIDE LABEL — one product, one name
   ------------------------------------------------------------ */
.lp-slide-label {
  /* Anchored to the bucket, not to the column, so it tracks the product
     wherever the bucket lands. */
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  /* Tight to the tin. The label is anchored to the bucket's bottom edge, so
     every millimetre here is a millimetre closer to whatever sits under the
     hero column — on a phone that is the call-to-action block. */
  margin-top: clamp(6px, 1vw, 12px);
  width: max-content;
  max-width: min(88vw, 460px);
  z-index: 5;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
/* The backdrop behind this changes every slide and some are bright, so the
   label carries its own soft scrim rather than relying on the photo. */
.lp-slide-label::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 120%; height: 260%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(8,7,12,0.55), transparent 70%);
  z-index: -1;
}
[data-theme="light"] .lp-slide-label::before {
  background: radial-gradient(ellipse at center, rgba(250,244,236,0.62), transparent 70%);
}
.lp-slide-label .cat {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.62);
  margin-bottom: 9px;
}
.lp-slide-label .nm {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.1vw, 1.65rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #f5f1e8;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
.lp-slide-label .tick {
  display: block;
  height: 2px;
  width: 0;
  margin: 10px auto 0;
  border-radius: 3px;
  background: var(--c, var(--red-2));
}
[data-theme="light"] .lp-slide-label .cat { color: rgba(26,21,37,0.6); }
[data-theme="light"] .lp-slide-label .nm  { color: #1a1525; text-shadow: 0 2px 14px rgba(255,252,244,0.6); }

/* ============================================================
   VELVET BED — the opening slide's ground
   Jewel tones rather than bright brand hues, plush two-stop falloff,
   a slow sheen across the pile, grain so it reads as fabric, and a
   vignette to sink the corners. Only shown while slide 0 holds.
   ============================================================ */
.lp-velvet {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s ease;
  background: radial-gradient(140% 110% at 62% 46%, #241030, #0b0610 72%);
}
.lp-hero.brand-active .lp-velvet { opacity: 1; }

.lp-velvet i {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.lp-velvet .v1 {
  width: 78%; aspect-ratio: 1; left: -16%; top: -28%;
  background: radial-gradient(circle, rgba(150,20,52,.95), rgba(96,12,40,.55) 42%, transparent 70%);
  filter: blur(74px); animation: lpVelA 9s ease-in-out infinite;
}
.lp-velvet .v2 {
  width: 74%; aspect-ratio: 1; right: -18%; top: -22%;
  background: radial-gradient(circle, rgba(28,36,120,.92), rgba(18,22,78,.52) 44%, transparent 70%);
  filter: blur(74px); animation: lpVelB 11s ease-in-out infinite;
}
.lp-velvet .v3 {
  width: 80%; aspect-ratio: 1; left: 20%; bottom: -44%;
  background: radial-gradient(circle, rgba(150,100,18,.72), rgba(96,62,10,.40) 44%, transparent 72%);
  filter: blur(84px); animation: lpVelC 13s ease-in-out infinite;
}
/* Warms to the incoming slide's colour just before the hand-off, so the
   ground has already moved toward the photograph before the cut. */
.lp-velvet .vnext {
  width: 62%; aspect-ratio: 1.3; right: 4%; bottom: 0;
  background: radial-gradient(ellipse, var(--next, #d92843), transparent 68%);
  filter: blur(94px);
  opacity: 0;
  transition: opacity 1.1s ease;
}
.lp-velvet .vnext.warm { opacity: .58; }

.lp-velvet .vsheen {
  inset: -20% -40%;
  width: auto; height: auto;
  border-radius: 0;
  background: linear-gradient(102deg, transparent 34%, rgba(255,226,196,.16) 48%,
    rgba(255,238,214,.05) 56%, transparent 68%);
  filter: blur(26px);
  animation: lpVelPile 14s ease-in-out infinite;
}
/* The pile. Without texture a soft gradient reads as gas, not fabric. */
.lp-velvet::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: var(--grain) repeat;
  opacity: .16;
  mix-blend-mode: overlay;
}
/* Velvet is darkest where it folds away. */
.lp-velvet::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  background: radial-gradient(120% 100% at 60% 45%, transparent 42%, rgba(6,4,10,.72) 100%);
}

@keyframes lpVelA {
  0%,100% { transform: translate(0,0) scale(.96); opacity: .72 }
  25%     { transform: translate(38%,18%) scale(1.28); opacity: 1 }
  50%     { transform: translate(62%,-12%) scale(1.02); opacity: .78 }
  75%     { transform: translate(22%,-26%) scale(1.34); opacity: 1 }
}
@keyframes lpVelB {
  0%,100% { transform: translate(0,0) scale(1.04); opacity: .76 }
  30%     { transform: translate(-44%,24%) scale(1.32); opacity: 1 }
  60%     { transform: translate(-66%,-14%) scale(.98); opacity: .72 }
  85%     { transform: translate(-20%,-30%) scale(1.24); opacity: 1 }
}
@keyframes lpVelC {
  0%,100% { transform: translate(0,0) scale(.98); opacity: .66 }
  35%     { transform: translate(-36%,-26%) scale(1.36); opacity: 1 }
  70%     { transform: translate(32%,-38%) scale(1.1); opacity: .86 }
}
@keyframes lpVelPile {
  0%,100% { transform: translateX(-16%) skewX(-6deg); opacity: .5 }
  50%     { transform: translateX(14%) skewX(-6deg); opacity: 1 }
}

@media (prefers-reduced-motion: reduce) {
  .lp-velvet i { animation: none !important; }
  .lp-velvet .vsheen { display: none; }
}

/* The rotating bucket defaults to the Weatherguard artwork, and it was
   only hidden on the opening slide inside a mobile media query. On desktop
   it appeared over the velvet for the ~780ms between the line-up clearing
   and the first product arriving. The opening slide shows the range, never
   a single product, at any width. */
.lp-hero.brand-active .lp-hero-bucket { opacity: 0 !important; }

/* ============================================================
   WHY CARDS — rolled on, not faded in
   Each card is covered by its own accent, which then rolls off and
   leaves the content behind. It is a paint metaphor on a paint site,
   it carries the card's accent colour, and it happens once.
   ============================================================ */
.lp-why-paint {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: var(--accent, var(--red-2));
  transform: scaleX(0);
  transform-origin: left center;
}
/* Content waits behind the paint until the roller has passed. */
.lp-why-card > :not(.lp-why-paint) { opacity: 0; }
.lp-why-card.painted > :not(.lp-why-paint) { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lp-why-paint { display: none; }
  .lp-why-card > :not(.lp-why-paint) { opacity: 1; }
}