/* Branch controls use the shared site's dark surface and UI scale. */
.page-about-particle-v3 .particle-v2-map-marker span {
  transition: color 180ms ease;
}

.page-about-particle-v3 .particle-v2-map-marker:is(:hover, :focus-visible) span,
.page-about-particle-v3 .particle-v3-copy__branches button:is(:hover, :focus-visible) {
  color: var(--marker-color, var(--color-primary));
  text-decoration: none;
}

.page-about-particle-v3 :is(.particle-v2-map-marker, .particle-v3-copy__branches button):focus-visible {
  outline-color: var(--marker-color, var(--color-primary));
  border-radius: var(--radius-control, 14px);
}

.page-about-particle-v3 .branch-drawer {
  --fs-h4: 32px;
  --color-heading-reveal: var(--color-accent);
  --radius-image: 20px;
  --radius-button-filled: var(--radius-lg);
  --radius-button-hero: 12px;
  background: var(--color-dark-panel);
  color: var(--color-white);
  color-scheme: dark;
  box-shadow: -16px 0 60px color-mix(in srgb, var(--color-dark) 40%, transparent);
}

.page-about-particle-v3 .branch-drawer::backdrop {
  background: color-mix(in srgb, var(--color-dark) 64%, transparent);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.page-about-particle-v3 .branch-drawer__header > div { min-width: 0; }

.page-about-particle-v3 .branch-drawer h4 {
  margin: 0;
  color: var(--color-white);
  font-size: var(--fs-h4);
  font-weight: var(--fw-heading);
  line-height: 1.2;
  letter-spacing: -.015em;
}

.page-about-particle-v3 .branch-drawer__city { color: var(--color-accent); }

.page-about-particle-v3 .branch-drawer .subline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  color: var(--color-white);
  font-size: 10px;
  font-weight: var(--fw-label);
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.page-about-particle-v3 .branch-drawer .subline--cream > img { display: none; }
.page-about-particle-v3 .branch-drawer .subline--cream::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--color-accent);
  -webkit-mask: var(--asset-star-01) center / contain no-repeat;
  mask: var(--asset-star-01) center / contain no-repeat;
}

.page-about-particle-v3 .branch-drawer__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--color-white);
  background: var(--color-header-control-expanded);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background-color 180ms ease, color 180ms ease;
}

.page-about-particle-v3 .branch-drawer__close:is(:hover, :focus-visible) {
  background: var(--color-accent);
  color: var(--color-dark);
}

.page-about-particle-v3 .branch-drawer__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.page-about-particle-v3 .branch-drawer__photos {
  background: var(--green-900);
  border-radius: var(--radius-image);
}

.page-about-particle-v3 .branch-drawer__track {
  height: 1px;
  background: var(--color-header-separator);
}

.page-about-particle-v3 .branch-drawer__fill {
  background: var(--color-accent);
  transform: scaleX(0);
}

.page-about-particle-v3 .branch-drawer__bar[aria-current="true"] .branch-drawer__fill { transform: scaleX(1); }

.page-about-particle-v3 .branch-drawer__arrows { gap: 6px; }
.page-about-particle-v3 .branch-drawer__arrows .button {
  --button-filled-background: var(--color-header-navigation-hover-on-dark);
  --button-filled-hover-background: var(--color-accent);
  --button-filled-hover-foreground: var(--color-dark);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--button-filled-foreground);
  background: var(--button-filled-background);
}

.page-about-particle-v3 .branch-drawer__arrows .button:is(:hover, :focus-visible) {
  color: var(--button-filled-hover-foreground);
  background: var(--button-filled-hover-background);
}

.page-about-particle-v3 .branch-drawer__arrows svg {
  width: 11.25px;
  height: 11.25px;
  fill: currentColor;
  stroke: none;
}

.page-about-particle-v3 .branch-drawer__arrows [data-gallery="previous"] svg { transform: rotate(180deg); }

.page-about-particle-v3 .branch-drawer__copy {
  color: var(--color-white);
  font-size: 16px;
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
}
.page-about-particle-v3 .branch-drawer__copy p { color: inherit; }
.page-about-particle-v3 .branch-drawer__note {
  color: var(--color-on-dark-muted);
  font-size: 12px;
  line-height: var(--lh-body);
}

.page-about-particle-v3 .branch-drawer__contact.button--hero {
  --button-filled-hover-foreground: var(--color-accent);
  font-size: var(--fs-button);
  font-weight: var(--fw-button);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-button);
}

.page-about-particle-v3 .branch-drawer :focus-visible { outline-color: var(--color-accent); }
.page-about-particle-v3 .branch-drawer__close:focus-visible { outline-color: var(--color-accent); }

@media (max-width: 600px) {
  .page-about-particle-v3 .branch-drawer__arrows .button { width: 49.5px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-about-particle-v3 :is(.particle-v2-map-marker span, .branch-drawer__close) { transition: none; }
}