/* Clear brand stage above the existing product explanation; no overlay on text. */
.brand-reveal { position: relative; isolation: isolate; overflow: hidden; min-height: 470px; padding: 108px 24px 28px; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 62%, #e4f4f5 0%, #c7e1e5 38%, #a7c5cf 74%, #8eafbe 100%); }
.brand-reveal .hero-background { position: static; z-index: auto; width: min(560px, 86vw); height: 330px; margin: 0; background: transparent; mix-blend-mode: multiply; }
.brand-reveal .hero-background img { display: block; width: 100%; height: 100%; object-fit: contain; transform: none; border: 0; border-radius: 0; box-shadow: none; }
.buyer-hero.hero-copy { min-height: 0; padding: 64px 0; display: block; background: linear-gradient(115deg, #0a2540, #164354); }
.buyer-hero.hero-copy::before { display: none; }
.hero-copy .hero-layout > div { max-width: 800px; }
.hero-copy .hero-intro, .hero-copy .hero-clarifier { max-width: 680px; }
/* Procedural water (not a clipped logo bitmap): no white rectangle or stock imagery. */
.brand-intro { position: absolute; inset: 0; z-index: 1; pointer-events: none; user-select: none; animation: intro-water-finish 2.2s linear both; }
.brand-reveal::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(172deg, #ffffff66 0%, transparent 42%, #093b5012 100%); }
.brand-reveal::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(120deg, transparent 20%, #ffffff1c 43%, #ffffff40 49%, transparent 64%), radial-gradient(ellipse at 24% 18%, #ffffff70, transparent 48%), radial-gradient(ellipse at 80% 92%, #1d52651c, transparent 55%); }
.brand-intro-drop { position: absolute; left: calc(50% - 12px); top: calc(50% + 20px); width: 24px; height: 36px; border: 0; border-radius: 52% 48% 48% 52% / 66% 66% 34% 34%; background: radial-gradient(ellipse at 32% 27%, #fff 0%, #d9ffff 12%, #7dd9dc 24%, #087c8b 52%, #043b52 73%, #b5f4ee 94%); box-shadow: inset 3px 2px 4px #e7ffff, inset -4px -5px 6px #043f6480; animation: intro-water-drop 2.2s cubic-bezier(.4, 0, .74, .7) both; transform-origin: 50% 100%; }
.brand-intro-water { position: absolute; left: 50%; top: calc(50% + 56px); width: min(650px, 94vw); height: 190px; transform: translate(-50%, -50%); }
.brand-intro-ring { position: absolute; inset: 14%; border: 1px solid #e4ffff; border-radius: 50%; background: radial-gradient(ellipse at center, transparent 60%, #06485c36 65%, #fff 68%, #6ebcc04d 71%, transparent 77%); box-shadow: 0 3px 4px #053b4e26, inset 0 3px 3px #b4e6e77a, 0 -2px 2px #fff; opacity: 0; animation: intro-water-ring 2.2s ease-out both; }
.brand-intro-ring.ring-1 { inset: 23%; animation-name: intro-water-ring-late; }
.brand-intro-ring.ring-2 { inset: 31%; animation-name: intro-water-ring-inner; }
.brand-intro-ring.ring-3 { inset: 7%; animation-name: intro-water-ring-late; }
.brand-intro-ring.ring-4 { inset: 0; animation-name: intro-water-ring-outer; }
.brand-intro-surface { position: absolute; left: calc(50% - 28px); top: calc(50% + 36px); width: 56px; height: 22px; border: 2px solid rgba(220,255,253,.9); border-top: 0; border-radius: 0 0 50% 50%; box-shadow: 0 2px 2px rgba(17,112,124,.14); opacity: 0; animation: intro-small-splash 2.2s ease-out both; transform-origin: center bottom; }

.brand-reveal.is-revealing .hero-background img { animation: intro-brand-reveal 2.2s ease-out both; }
@keyframes intro-water-drop {
  0% { opacity: 1; transform: translateY(-100vh) scale(.7, 1.4); }
  26% { opacity: 1; transform: translateY(-16px) scale(.85, 1.2); }
  31% { opacity: 1; transform: translateY(0) scale(1.4, .25); }
  33%, 100% { opacity: 0; transform: translateY(2px) scale(1.7, .02); }
}
@keyframes intro-water-ring { 0%, 29% { opacity: 0; transform: scale(.05); } 36% { opacity: .9; } 56%, 100% { opacity: 0; transform: scale(1.2); } }
@keyframes intro-water-ring-late { 0%, 33% { opacity: 0; transform: scale(.06); } 43% { opacity: .8; } 60%, 100% { opacity: 0; transform: scale(1.15); } }
@keyframes intro-water-ring-inner { 0%, 31% { opacity: 0; transform: scale(.08); } 39% { opacity: .9; } 54%, 100% { opacity: 0; transform: scale(1.4); } }
@keyframes intro-water-ring-outer { 0%, 37% { opacity: 0; transform: scale(.12); } 44% { opacity: .55; } 64%, 100% { opacity: 0; transform: scale(1.1); } }
/* Brief raised liquid rim and two connected shoulders, rather than a particle burst. */
.brand-intro-surface::before, .brand-intro-surface::after { content: ""; position: absolute; bottom: 3px; width: 8px; height: 12px; border: 2px solid rgba(213,251,248,.85); border-bottom: 0; border-radius: 80% 80% 0 0; }
.brand-intro-surface::before { left: 2px; transform: rotate(-25deg); }
.brand-intro-surface::after { right: 2px; transform: rotate(25deg); }
@keyframes intro-small-splash { 0%, 30% { opacity: 0; transform: scale(.25,.1); } 34% { opacity: 1; transform: scale(.8,1.12); } 39% { opacity: .85; transform: scale(1,.65); } 48%, 100% { opacity: 0; transform: scale(1.25,.08); } }

@keyframes intro-brand-reveal { 0%, 36% { opacity: 0; filter: blur(2px); transform: scale(.995); } 75%, 100% { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes intro-water-finish { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 720px) {
 .brand-reveal { min-height: 350px; padding: 100px 20px 20px; }
 .brand-reveal .hero-background { height: 230px; width: min(400px, 90vw); }
 .buyer-hero.hero-copy { padding: 44px 0; }
 .brand-intro-water { height: 130px; }
}
@media (prefers-reduced-motion: reduce) {
 .brand-intro { display: none; }
 .brand-reveal.is-revealing .hero-background img { animation: none; opacity: 1; filter: none; transform: none; }
 .brand-intro * { animation: none !important; }
}

/* Homepage supporting photo; existing brand reveal and copy remain unchanged. */
.buyer-hero.hero-copy .hero-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-context-photo { margin: 0; width: 100%; max-width: 320px; justify-self: end; overflow: hidden; border-radius: 16px; }
.hero-context-photo img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
 .buyer-hero.hero-copy .hero-layout { grid-template-columns: 1fr; gap: 32px; }
 .hero-context-photo { justify-self: center; max-width: 280px; }
}