.brand-opening-page { --opening-nav: 72px; }
.brand-opening-page .site-header,
.brand-opening-page > .topbar,
.brand-opening-page .topbar { position: fixed; inset: 0 0 auto; z-index: 1000; width: 100%; }
.brand-opening-page main { padding-top: var(--opening-nav); }
.brand-opening {
  position: relative;
  display: grid;
  width: 100% !important;
  max-width: none !important;
  height: calc(100svh - var(--opening-nav));
  min-height: 360px;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border-top: 0 !important;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 50%, var(--paper) 5%, transparent 48%),
    radial-gradient(circle at 36% 42%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 32%),
    radial-gradient(circle at 66% 58%, color-mix(in srgb, var(--leaf, var(--accent)) 24%, transparent), transparent 34%),
    var(--paper);
}
.brand-opening::before,
.brand-opening::after {
  content: "";
  position: absolute;
  width: min(68vw, 760px);
  aspect-ratio: 2.5;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: rotate(-7deg);
  opacity: .8;
}
.brand-opening::after { transform: rotate(8deg) scale(.78); border-color: color-mix(in srgb, var(--accent) 58%, transparent); }
.brand-opening-focus { position: relative; z-index: 1; display: grid; gap: 22px; place-items: center; width: min(640px, 78vw); text-align: center; color: var(--ink); }
.brand-opening-logo { display: grid; min-width: min(520px, 72vw); min-height: 150px; padding: 34px 50px; place-items: center; border: 1px solid var(--line-strong, var(--line)); border-radius: 30px; background: color-mix(in srgb, var(--paper) 84%, transparent); box-shadow: 0 28px 80px color-mix(in srgb, var(--ink) 11%, transparent); }
.brand-opening-logo img { display: block; width: min(420px, 62vw); max-height: 180px; object-fit: contain; }
.brand-opening-wordmark { display: inline-flex; align-items: center; gap: 16px; font-size: clamp(32px, 6vw, 70px); font-weight: 650; letter-spacing: -.045em; line-height: 1; }
.brand-opening-symbol { font-size: clamp(48px, 10vw, 110px); font-weight: 250; line-height: .8; }
.brand-opening-caption { margin: 0; color: var(--muted); font-size: 15px; letter-spacing: .12em; text-transform: none; }
.brand-down { position: absolute; z-index: 2; bottom: max(22px, env(safe-area-inset-bottom)); left: 50%; display: grid; width: 48px; height: 48px; place-items: center; color: var(--muted); transform: translateX(-50%); text-decoration: none; }
.brand-down svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.brand-down:hover svg, .brand-down:focus-visible svg { transform: translateY(4px); }
.brand-content { scroll-margin-top: var(--opening-nav); }
.brand-content:focus { outline: none; }
.brand-opening-page .site-header .wordmark,
.brand-opening-page .topbar .brand { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s; }
.brand-opening-page.brand-nav-content .site-header .wordmark,
.brand-opening-page.brand-nav-content .topbar .brand { opacity: 1; visibility: visible; pointer-events: auto; }
@media (max-width: 780px) {
  .brand-opening-page { --opening-nav: 66px; }
  .brand-opening-logo { min-width: min(360px, 80vw); min-height: 120px; padding: 26px 30px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-down svg { transition: none; }
  .brand-opening-page .site-header .wordmark,
  .brand-opening-page .topbar .brand { transition: none; }
}