.brand-intro {
  margin: 0;
  padding: 0;
  scroll-margin-top: 0;
}

.brand-stage {
  /* Warm light accents sit over the same plum and powder family as the page. */
  --hero-warm: #F3D3B7;
  --hero-rose: #E0A9AF;
  --light-dx: 0px;
  --light-dy: 0px;
  --light-x: 60vw;
  --light-y: 38svh;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 48px 5vw;
  overflow: hidden;
  background: var(--plum);
}

.brand-stage .light-field {
  background:
    radial-gradient(ellipse at 4% 8%, color-mix(in srgb, var(--hero-warm) 68%, transparent), transparent 58%),
    radial-gradient(ellipse at 100% 95%, color-mix(in srgb, var(--hero-rose) 65%, transparent), transparent 64%),
    linear-gradient(120deg, color-mix(in srgb, var(--plum) 58%, var(--mauve)), var(--plum));
}

/* A stationary plum veil keeps the name legible as the light moves behind it. */
.brand-stage .light-field::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse 82% 34% at 50% 53%, color-mix(in srgb, var(--plum) 68%, transparent) 0%, color-mix(in srgb, var(--plum) 50%, transparent) 52%, transparent 100%);
}

.brand-stage .light-plane {
  inset: -18%;
  background: radial-gradient(ellipse at 15% 90%, color-mix(in srgb, var(--hero-warm) 34%, transparent), transparent 58%);
  transform: translate3d(calc(var(--light-dx) * -.65), calc(var(--light-dy) * -.65), 0);
  transition: none;
  will-change: transform;
}

.brand-stage .light-plane::before,
.brand-stage .light-plane::after {
  content: '';
  position: absolute;
  inset: -12%;
  filter: blur(clamp(34px, 4vw, 66px));
  will-change: transform, opacity;
}

.brand-stage .light-plane::before {
  background: radial-gradient(ellipse 38% 46% at 31% 45%, color-mix(in srgb, var(--cream) 88%, transparent) 0%, color-mix(in srgb, var(--hero-warm) 76%, transparent) 28%, color-mix(in srgb, var(--powder) 48%, transparent) 58%, transparent 100%);
  animation: brand-powder-drift 7s ease-in-out -2s infinite alternate;
}

.brand-stage .light-plane::after {
  background: radial-gradient(ellipse 39% 46% at 66% 51%, color-mix(in srgb, var(--hero-rose) 72%, transparent) 0%, color-mix(in srgb, var(--powder) 50%, transparent) 40%, transparent 100%);
  animation: brand-plum-drift 10s ease-in-out -6s infinite alternate;
}

.brand-stage .light-glow {
  z-index: 1;
  left: 0;
  top: 0;
  width: clamp(400px, 68vw, 1040px);
  height: clamp(380px, 61vw, 900px);
  background: radial-gradient(ellipse, color-mix(in srgb, var(--cream) 94%, transparent) 0%, color-mix(in srgb, var(--hero-warm) 82%, transparent) 23%, color-mix(in srgb, var(--hero-rose) 46%, transparent) 49%, transparent 73%);
  filter: blur(clamp(28px, 3.5vw, 58px));
  transform: translate3d(var(--light-x), var(--light-y), 0) translate(-50%, -50%);
  pointer-events: none;
  will-change: transform;
}

@keyframes brand-powder-drift {
  from { transform: translate3d(-21%, 17%, 0) scale(.88) rotate(-12deg); opacity: .7; }
  to { transform: translate3d(23%, -18%, 0) scale(1.2) rotate(14deg); opacity: 1; }
}

@keyframes brand-plum-drift {
  from { transform: translate3d(21%, -17%, 0) scale(1.13) rotate(9deg); opacity: .95; }
  to { transform: translate3d(-22%, 20%, 0) scale(.88) rotate(-14deg); opacity: .64; }
}

.brand-stage.is-motion-paused .light-plane::before,
.brand-stage.is-motion-paused .light-plane::after {
  animation-play-state: paused;
}

.brand-phi {
  position: absolute;
  z-index: 0;
  width: 80%;
  height: 116%;
  right: -13%;
  top: -8%;
  background: url('assets/phi-symbol.png') center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: .16;
  pointer-events: none;
}

.brand-signature {
  position: relative;
  z-index: 1;
  width: 100%;
}

.brand-title {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: .3em;
  width: 100%;
  margin: 0;
  color: var(--cream);
  font-family: Outfit, Arial, sans-serif;
  font-size: clamp(38px, 7.6vw, 146px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-align: center;
}

.brand-title span { white-space: nowrap; }

.brand-subtitle {
  position: absolute;
  top: calc(100% + 24px);
  left: 0;
  width: 100%;
  margin: 0;
  color: var(--cream);
  font-size: clamp(16px, 1.6vw, 24px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .12em;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}

.brand-signature.is-revealed .brand-subtitle {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 600px) {
  .brand-stage { padding: 40px 6vw; }
  .brand-stage .light-glow { width: 105vw; height: 95vw; }
  .brand-stage .light-plane::before, .brand-stage .light-plane::after { filter: blur(32px); }
  .brand-title { flex-direction: column; gap: .12em; font-size: clamp(32px, 10.5vw, 63px); }
  .brand-phi { width: 115%; height: 96%; right: -30%; top: 2%; }
  .brand-subtitle { top: calc(100% + 20px); font-size: 16px; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-stage .light-plane { transform: none; transition: none; will-change: auto; }
  .brand-stage .light-plane::before, .brand-stage .light-plane::after { animation: none; transform: none; will-change: auto; }
  .brand-stage .light-glow { will-change: auto; }
  .brand-subtitle { transition: none; transform: none; }
}

/* Selected type variant 04. Optima is used when installed; no system font is redistributed. */
.brand-title{font-family:Optima,Candara,'Trebuchet MS',sans-serif;font-weight:400;font-size:clamp(38px,7.5vw,142px);letter-spacing:0}
.brand-phi{filter:brightness(0) drop-shadow(5px 9px 10px #302b2f45);opacity:.14}
.brand-subtitle{font-family:Arial,Helvetica,sans-serif;font-size:clamp(16px,1.8vw,25px)}
.brand-stage .light-field::after{background:radial-gradient(ellipse 85% 36% at 50% 53%,#65435b90,transparent)}
@media(max-width:600px){.brand-title{font-size:clamp(35px,10vw,63px);gap:.16em}.brand-phi{opacity:.1}.brand-subtitle{font-size:16px}}
/* Decorative overflow must not create an internally scrollable hero on focus. */
.brand-stage{overflow:clip}
.brand-stage .light-field::after{background:radial-gradient(ellipse 85% 40% at 50% 53%,#65435bc9 0%,#65435ba6 45%,transparent 100%)}
.brand-stage .light-glow{opacity:.72}

/* Final hero palette: warm upper left, plum centre, rose lower right. */
.brand-stage{--hero-warm:#c79a88;--hero-rose:#ba8b8b;background:#68475f}
.brand-stage .light-field{background:radial-gradient(ellipse 80% 90% at 0% 0%,#c79a88e6,transparent 72%),radial-gradient(ellipse 70% 80% at 100% 100%,#ba8b8bcc,transparent 75%),linear-gradient(125deg,#765066,#65435b 65%,#79566a)}
.brand-stage .light-field::after{background:radial-gradient(ellipse 80% 38% at 50% 53%,#65435b70,transparent 85%)}
.brand-stage .light-plane::before{background:radial-gradient(ellipse 44% 46% at 22% 29%,#d8ac916b,transparent 75%)}
.brand-stage .light-plane::after{background:radial-gradient(ellipse 40% 45% at 80% 75%,#c6939466,transparent 75%)}
.brand-stage .light-glow{background:radial-gradient(ellipse,#d6a79173 0%,#c28e8b47 40%,transparent 72%);opacity:.62}
/* Smaller decorative Phi follows the approved proportion beside the name. */
.brand-phi{width:46%;height:92%;right:-6%;top:2%;opacity:.13}
@media(max-width:600px){.brand-phi{width:88%;height:68%;right:-23%;top:13%;opacity:.11}}
.brand-phi{filter:brightness(0) drop-shadow(10px 14px 14px #30192c80)}