/* Photographic brand scene shared by the two home pages. The scene stays
   graphite in both themes; navigation and forms retain the selected theme. */
.brand-hero {
  --brand-night: #1e1e1e;
  --brand-white: #f8f8f8;
  --brand-blue: #579cd9;
  --brand-muted: #c9d0d7;
  --brand-line: rgba(248, 248, 248, .2);
  --brand-glass: rgba(30, 30, 30, .72);
}
.v5 .brand-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% - 40px);
  max-width: 1440px;
  border: 1px solid var(--brand-line);
  border-radius: 32px;
  background: var(--brand-night);
  color: var(--brand-white);
  box-shadow: 0 28px 64px -48px var(--v5-shadow-color);
}
.brand-hero::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url('/images/hero-blue-studio.webp') right center / auto 112% no-repeat;
  pointer-events: none;
}
.brand-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, var(--brand-night) 2%, rgba(30, 30, 30, .98) 34%, rgba(30, 30, 30, .75) 48%, rgba(30, 30, 30, .08) 74%),
    linear-gradient(0deg, rgba(30, 30, 30, .78), transparent 32%);
  pointer-events: none;
}
.v5 .brand-hero h1 { color: var(--brand-white); }
.v5 .brand-hero .lead { color: var(--brand-muted); font-size: 18px; line-height: 1.75; }
.v5 .brand-hero .eyebrow,
.v5 .brand-hero .splash__accent { color: var(--brand-blue); }
.v5 .brand-hero .eyebrow::before { background: var(--brand-blue); }
.v5 .brand-hero .note { color: var(--brand-muted); }
.v5 .brand-hero .btn--primary {
  min-height: 56px;
  padding: 16px 24px;
  border-color: var(--brand-blue);
  border-radius: 14px;
  background: var(--brand-blue);
  color: var(--brand-night);
  box-shadow: none;
}
.v5 .brand-hero .btn--primary:hover { background: var(--brand-white); border-color: var(--brand-white); }
.v5 .brand-hero a:focus-visible { outline: 3px solid var(--brand-white); outline-offset: 5px; }
.brand-hero .brand-art {
  width: 190px;
  align-self: flex-start;
  flex-shrink: 0;
  background: transparent;
  border-radius: 0;
  isolation: auto;
  mix-blend-mode: screen;
  box-shadow: none;
}
.v5 .brand-hero .hero__overview { background: transparent; border: 0; box-shadow: none; padding: 0; }
.v5 .brand-hero .hero__overview-top { color: var(--brand-muted); font-size: 12px; }
.v5 .brand-hero .hero__overview-top > span:last-child { color: var(--brand-blue); }
.v5 .brand-hero .hero__brand { display: flex; justify-content: flex-end; min-height: 300px; margin: 26px 0 0; }
.v5 .brand-hero .hero__overview-items > span {
  min-height: 86px;
  padding: 16px;
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  background: var(--brand-glass);
  color: var(--brand-white);
  font-size: 14px;
  backdrop-filter: blur(14px);
}
.v5 .brand-hero .hero__overview-items b { color: var(--brand-blue); font-size: 12px; }
.v5 .brand-hero .marker { color: var(--brand-blue); }
.v5 .brand-hero .marker::before,
.v5 .brand-hero .marker::after { background: var(--brand-white); }
.v5 .brand-hero .countdown__cell { background: var(--brand-glass); border-color: var(--brand-line); color: var(--brand-white); }
.v5 .brand-hero .countdown__unit { color: var(--brand-muted); font-size: 13px; }
.v5 .brand-hero .countdown__cell--now { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--brand-night); }
.v5 .brand-hero .countdown__cell--now .countdown__unit { color: var(--brand-night); }
@media (max-width: 900px) {
  .v5 .brand-hero { width: calc(100% - 24px); border-radius: 26px; }
  .v5 .hero.brand-hero { grid-template-columns: 1fr; }
  .brand-hero::before { background-position: right bottom; background-size: auto 68%; }
  .brand-hero::after { background: linear-gradient(180deg, var(--brand-night), rgba(30, 30, 30, .98) 40%, rgba(30, 30, 30, .3) 72%, rgba(30, 30, 30, .45)); }
  .v5 .brand-hero .hero__brand { min-height: 220px; }
}
@media (max-width: 480px) {
  .v5 .brand-hero { width: calc(100% - 20px); border-radius: 22px; }
  .brand-hero::before { background-size: auto 51%; }
  .brand-hero::after { background: linear-gradient(180deg, var(--brand-night), rgba(30, 30, 30, .98) 46%, rgba(30, 30, 30, .16) 76%, rgba(30, 30, 30, .52)); }
  .brand-hero .brand-art { width: 146px; }
  .v5 .brand-hero .lead { font-size: 16px; }
  .v5 .brand-hero .hero__overview-items > span { padding: 12px 10px; font-size: 13px; }
}