/* Brand theme: the Figma layout dressed in the logo's colours (teal, coral, lavender, sand + navy outline).
   Loaded after site.css when theme() is "brand". Brand colours stay accents; text uses navy or the ink shades. */

.theme-brand {
  --teal: #82d0c8;   --teal-tint: #eaf7f5;     --teal-ink: #1f5f58;
  --coral: #f5a687;  --coral-tint: #fdf0ea;    --coral-ink: #97452a;
  --lav: #b19cdb;    --lav-tint: #f3effb;      --lav-ink: #56428f;
  --sand: #f5d59e;   --sand-tint: #fdf6e6;     --sand-ink: #7f5a12;
  --navy-brand: #182a47;

  --ink: #162a40;
  --text: #334458;
  --text-card: #4a5a6e;
  --muted: #5b829a;
  --page: #f7f9fb;
  --blue: #24658c;
  --blue-dark: #1d5473;
  --mark: var(--teal);

  background: var(--page);
}

/* Highlighted words: navy text on a marker stroke in a logo colour, which changes per section */
.theme-brand .hl {
  color: inherit;
  background: linear-gradient(transparent 58%, var(--mark) 58%, var(--mark) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .06em;
}
.theme-brand .hero { --mark: var(--teal); }
.theme-brand .intro { --mark: var(--coral); }
.theme-brand .problem { --mark: var(--lav); }
.theme-brand .ecosystem { --mark: var(--sand); }
.theme-brand .audience { --mark: var(--teal); }
.theme-brand .story { --mark: var(--coral); }
.theme-brand .on-blue .hl { background: none; color: var(--sand); padding: 0; }

/* The marker stroke draws in from left to right when its heading scrolls into view */
.has-motion .theme-brand .hl,
.theme-brand.has-motion .hl { background-repeat: no-repeat; background-size: 100% 100%; }
.has-motion .theme-brand .reveal .hl { background-size: 0% 100%; transition: background-size .9s cubic-bezier(.2, .7, .2, 1) .35s; }
.has-motion .theme-brand .reveal.is-visible .hl { background-size: 100% 100%; }
.has-motion .theme-brand .hero .hl { background-size: 0% 100%; transition: background-size 1s cubic-bezier(.2, .7, .2, 1) .7s; }
.has-motion.is-loaded .theme-brand .hero .hl { background-size: 100% 100%; }

/* Logo tiles pop in one by one, like the mark assembling itself */
.has-motion .theme-brand .tiles-anim.reveal { opacity: 1; transform: none; }
.has-motion .theme-brand .tiles-anim rect { transform-box: fill-box; transform-origin: center; transform: scale(0) rotate(-30deg); opacity: 0; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1), opacity .3s ease; }
.has-motion .theme-brand .tiles-anim.is-visible rect { transform: none; opacity: 1; }
.theme-brand .tiles-anim rect:nth-child(1) { transition-delay: .05s; }
.theme-brand .tiles-anim rect:nth-child(2) { transition-delay: .12s; }
.theme-brand .tiles-anim rect:nth-child(3) { transition-delay: .19s; }
.theme-brand .tiles-anim rect:nth-child(4) { transition-delay: .26s; }
.theme-brand .tiles-anim rect:nth-child(5) { transition-delay: .33s; }
.theme-brand .tiles-anim rect:nth-child(6) { transition-delay: .40s; }
.theme-brand .tiles-anim rect:nth-child(7) { transition-delay: .47s; }
.theme-brand .tiles-anim rect:nth-child(8) { transition-delay: .54s; }

/* Loose tiles drift gently */
@keyframes eucli-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(-2deg); }
}
.has-motion .theme-brand .deco--mission,
.has-motion .theme-brand .deco--audience { animation: eucli-drift 7s ease-in-out infinite; }

/* Buttons in the portal blue */
.theme-brand .btn--primary { background: var(--blue); border-color: var(--blue); }
.theme-brand .btn--primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.theme-brand .btn--outline { color: var(--blue); border-color: var(--blue); }
.theme-brand .btn--white { color: var(--navy-brand); }

/* The four-colour line, used as a small accent */
.theme-brand .hero__panel,
.theme-brand .card--blue,
.theme-brand .mission,
.theme-brand .cta-banner__panel { position: relative; overflow: hidden; }
.theme-brand .hero__panel::before,
.theme-brand .card--blue::before,
.theme-brand .mission::before,
.theme-brand .cta-banner__panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--stripe);
}
.theme-brand .hero__panel { background: rgba(255, 255, 255, .9); }

/* Navy instead of bright blue for the big panels, with the logo tiles as decoration */
.theme-brand .card--blue,
.theme-brand .mission { background: var(--navy-brand); }
.theme-brand .cta-banner__panel { background: rgba(24, 42, 71, .88); }
.theme-brand .flip-card__back { background: var(--white); }
.theme-brand .flip-card__back::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--stripe); }

.theme-brand .deco { display: block; position: absolute; pointer-events: none; user-select: none; }

.theme-brand .intro .container { position: relative; }
.theme-brand .deco--intro-mark { position: static; width: 64px; height: 64px; margin: 0 auto 22px; }

.theme-brand .deco--lead-tiles { position: static; width: 52px; height: 52px; margin: 0 0 6px -4px; }
.theme-brand .card--blue > :not(.deco) { position: relative; z-index: 1; }

.theme-brand .mission { position: relative; }
.theme-brand .mission .container { position: relative; z-index: 1; }
.theme-brand .deco--mission { right: 2%; top: 4px; width: 300px; opacity: .9; }

.theme-brand .audience__head { position: relative; }
.theme-brand .deco--audience { right: 0; top: -40px; width: 240px; opacity: .6; }

.theme-brand .deco--cta { display: none; }
.theme-brand .cta-banner__panel > :not(.deco) { position: relative; z-index: 1; }

/* Cards: thin top edge and badges cycling teal, coral, lavender, sand */
.theme-brand .value-card,
.theme-brand .eco-card,
.theme-brand .who-card { border-top: 3px solid var(--edge, var(--teal)); }
.theme-brand .grid-3 > :nth-child(4n+1) { --edge: var(--teal); --edge-ink: var(--teal-ink); --edge-tint: var(--teal-tint); }
.theme-brand .grid-3 > :nth-child(4n+2) { --edge: var(--coral); --edge-ink: var(--coral-ink); --edge-tint: var(--coral-tint); }
.theme-brand .grid-3 > :nth-child(4n+3) { --edge: var(--lav); --edge-ink: var(--lav-ink); --edge-tint: var(--lav-tint); }
.theme-brand .grid-3 > :nth-child(4n+4) { --edge: var(--sand); --edge-ink: var(--sand-ink); --edge-tint: var(--sand-tint); }
.theme-brand .value-card__title,
.theme-brand .who-card__title { color: var(--ink); }
.theme-brand .who-card__subtitle { color: var(--blue); }
.theme-brand .eco-card__title { color: var(--ink); }
.theme-brand .arrow-link,
.theme-brand .arrow-link__icon { color: var(--blue); }

/* Eyebrow as a brand chip with a dot */
.theme-brand .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--teal-tint);
  color: var(--teal-ink);
  font-size: 13px; letter-spacing: .12em; line-height: 1.4;
}
.theme-brand .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }

/* Maps: shift the bright blue towards the logo's teal */
.theme-brand .story__bg { filter: hue-rotate(-38deg) saturate(.7); }

/* Headings in the logo's navy */
.theme-brand .display,
.theme-brand .hero__title { color: var(--ink); }
.theme-brand .mission .display { color: var(--white); }

@media (max-width: 680px) {
  .theme-brand .deco--mission { width: 200px; right: -50px; top: -6px; opacity: .6; }
  .theme-brand .deco--audience { width: 180px; top: -40px; }
}

/* ---------- Inner pages in the logo colours ---------- */
.theme-brand .page-section:nth-of-type(4n+1) { --mark: var(--coral); }
.theme-brand .page-section:nth-of-type(4n+2) { --mark: var(--lav); }
.theme-brand .page-section:nth-of-type(4n+3) { --mark: var(--sand); }
.theme-brand .page-section:nth-of-type(4n+4) { --mark: var(--teal); }

.theme-brand .dark-band,
.theme-brand .host-band { background: var(--navy-brand); }
.theme-brand .join-band__panel { background: var(--navy-brand); }
.theme-brand .join-band__panel,
.theme-brand .host-band { position: relative; }
.theme-brand .join-band__panel::before,
.theme-brand .host-band::before,
.theme-brand .dark-band.page-section::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--stripe);
}
.theme-brand .dark-band.page-section { position: relative; }
.theme-brand .eyebrow--on-dark { background: rgba(255, 255, 255, .1); color: var(--sand); }
.theme-brand .eyebrow--on-dark::before { background: var(--sand); }
.theme-brand .btn--sand { background: var(--sand); border-color: var(--sand); color: var(--navy-brand); }
.theme-brand .btn--sand:hover { background: #f8e2b8; border-color: #f8e2b8; }

/* Cards cycle teal, coral, lavender, sand: thin top edge, icon circle and label */
.theme-brand .grid-2 > :nth-child(4n+1), .theme-brand .grid-4 > :nth-child(4n+1), .theme-brand .layers > :nth-child(4n+1) { --edge: var(--teal); --edge-ink: var(--teal-ink); --edge-tint: var(--teal-tint); }
.theme-brand .grid-2 > :nth-child(4n+2), .theme-brand .grid-4 > :nth-child(4n+2), .theme-brand .layers > :nth-child(4n+2) { --edge: var(--coral); --edge-ink: var(--coral-ink); --edge-tint: var(--coral-tint); }
.theme-brand .grid-2 > :nth-child(4n+3), .theme-brand .grid-4 > :nth-child(4n+3), .theme-brand .layers > :nth-child(4n+3) { --edge: var(--lav); --edge-ink: var(--lav-ink); --edge-tint: var(--lav-tint); }
.theme-brand .grid-2 > :nth-child(4n+4), .theme-brand .grid-4 > :nth-child(4n+4), .theme-brand .layers > :nth-child(4n+4) { --edge: var(--sand); --edge-ink: var(--sand-ink); --edge-tint: var(--sand-tint); }
.theme-brand .soft-card { border-top: 3px solid var(--edge, var(--teal)); }
.theme-brand .icon-circle { background: var(--edge-tint, var(--teal-tint)); color: var(--edge-ink, var(--teal-ink)); }
.theme-brand .soft-card .card-label,
.theme-brand .soft-card__meta { color: var(--edge-ink, var(--teal-ink)); }
.theme-brand .rule-item { border-top-color: var(--edge, var(--teal)); }
.theme-brand .person__photo--initials { background: var(--edge-tint, var(--teal-tint)); color: var(--edge-ink, var(--teal-ink)); }
.theme-brand .date-tile { background: var(--navy-brand); }
.theme-brand .date-tile::after { content: ""; width: 34px; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--stripe); }
.theme-brand .event-meta svg { color: var(--teal-ink); }
.theme-brand .chip--button.is-active { background: var(--navy-brand); border-color: var(--navy-brand); }
.theme-brand .main-nav ul a[aria-current="page"] { color: var(--navy-brand); font-weight: 600; box-shadow: inset 0 -3px 0 var(--teal); }
.theme-brand .empty-box { border-color: #b8d9d5; background: var(--teal-tint); }

/* Headings on navy stay white (the navy heading colour above is for light backgrounds) */
.theme-brand .on-blue .display,
.theme-brand .dark-band .display,
.theme-brand .host-band .display { color: var(--white); }