/* ============================================================
   The Global Leadership Summit — country sites  ·  v2
   Light, warm, photographic. One brand palette for all six
   countries; the flag and the content carry the country.

   Why one palette: six flag-coloured sites read as six unrelated
   projects. GLS is a single global brand arriving locally, so the
   brand stays constant and the country shows through the flag,
   the cities, the venues and the photographs.
   ============================================================ */

:root {
  /* Brand — Global Leadership Network: deep teal ground, GLN blue accent */
  --brand:        #1D4354;
  --brand-2:      #2A6076;
  --brand-soft:   #E8F6FD;
  --accent:       #009CDE;
  --accent-dark:  #0079AB;
  --accent-soft:  #E8F6FD;

  --ink:          #15181D;
  --ink-2:        #39414C;
  --muted:        #6B7480;
  --line:         #E6EAF0;
  --bg:           #FFFFFF;
  --bg-alt:       #F7F9FC;

  --radius:       18px;
  --radius-sm:    12px;
  --radius-lg:    26px;
  --shadow-sm:    0 4px 14px rgba(19, 30, 51, .06);
  --shadow:       0 18px 50px rgba(19, 30, 51, .12);
  --shadow-lg:    0 30px 80px rgba(19, 30, 51, .18);
  --shadow-accent: 0 14px 34px rgba(var(--accent-rgb), .34);

  /* Derived colours. Each default is the exact value the page always used;
     an office's own colours (Admin > Website > Customise) replace them all
     together, worked out in functions_site_content.php. */
  --accent-rgb:   0, 156, 222;
  --on-accent:    #17120A;         /* text on an accent button */
  --brand-deep:   #10303C;         /* dark end of the teal gradients */
  --panel-2:      #0F7FB5;         /* blue end of the host panel */
  --ov-1: 10, 24, 48;  --ov-2: 16, 44, 88;  --ov-3: 29, 70, 130;   /* photo overlay */
  /* The GLN mark's chip stays GLN teal whatever colours the office picks:
     it is their mark and their colour, not ours to change. */
  --gln-chip:     #1D4354;
  /* used only by the looks further down */
  --accent-dark-rgb: 0, 121, 171;
  --tint:         #EEF7FC;         /* the lightest blue wash */
  --night:        #0B1B24;  --night-2: #0F2530;  --night-deep: #050E13;
  --night-rgb:    11, 27, 36;

  --shell: min(1180px, 100% - 2.5rem);

  --font:    'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Libre Baskerville', Georgia, 'Times New Roman', serif;

  --step--1: clamp(.8rem, .77rem + .14vw, .875rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.0625rem);
  --step-1:  clamp(1.15rem, 1.07rem + .38vw, 1.375rem);
  --step-2:  clamp(1.5rem, 1.3rem + .95vw, 2.15rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.1rem);
  --step-4:  clamp(2.5rem, 1.85rem + 3.1vw, 4.4rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--step-0); line-height: 1.62;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--display); font-weight: 700; line-height: 1.06;
  letter-spacing: -.021em; margin: 0; text-wrap: balance; color: var(--ink);
}
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
.shell { width: var(--shell); margin-inline: auto; }

/* Eyebrow — names the section's role */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-2); margin: 0 0 1.1rem;
}
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--accent); }
.on-dark .eyebrow, .hero .eyebrow { color: #fff; }
.on-dark .eyebrow::before { background: var(--accent); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--ink); padding: .8rem 1.2rem; font-weight: 700; border-radius: 0 0 var(--radius-sm) 0; }
.skip:focus { left: 0; }
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.7rem; border: 0; cursor: pointer; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: .975rem;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  box-shadow: var(--shadow-accent);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); background: var(--accent-dark); color: #fff; }
.btn--navy { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn--navy:hover { background: var(--brand-2); color: #fff; }
.btn--outline {
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--outline:hover { background: var(--ink); color: #fff; box-shadow: none; }
.btn--onphoto {
  background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5);
}
.btn--onphoto:hover { background: #fff; color: var(--brand); box-shadow: none; }
.btn--sm { padding: .68rem 1.25rem; font-size: .9rem; }

/* ---------- masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.masthead__in { display: flex; align-items: center; gap: 1.1rem; min-height: 74px; }
.masthead__brands { display: flex; align-items: center; gap: .9rem; margin-right: auto; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
/* GLN mark leading the masthead, where the flag used to sit. The supplied
   file has a white wordmark, so it needs a dark ground to be legible on the
   white masthead; the chip is the clear-space buffer their guidelines ask for,
   made visible. 46px clears their 45px minimum. */
.brand__gln { display: inline-flex; align-items: center;
  background: var(--gln-chip); border-radius: var(--radius-sm);
  padding: .5rem .8rem; }
.brand__gln img { height: 34px; width: auto; display: block; }
@media (max-width: 30rem) { .brand__gln img { height: 28px; } }
.brand__flag {
  width: 38px; height: 26px; flex: none; border-radius: 5px;
  box-shadow: 0 2px 8px rgba(19,30,51,.22);
}
.brand__name { font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.15; letter-spacing: -.015em; }
.brand__sub { display: block; font-size: .655rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 1.7rem; }
.nav a { text-decoration: none; font-size: .945rem; font-weight: 500; color: var(--ink-2); transition: color .2s var(--ease); }
.nav a:hover { color: var(--brand); }
.nav__toggle { display: none; }
/* A menu item never breaks inside itself ("About / us"). When the whole menu
   no longer fits, site.js folds it into the menu button instead (below). */
.nav:not(.is-open) a { white-space: nowrap; }

/* Language switch — only on sites that ship a second language. It sits
   outside the collapsible nav on purpose: someone who cannot read the page's
   language must be able to see the way out without opening a menu. */
.langsw {
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  padding: .45rem .85rem; border-radius: 999px; text-decoration: none;
  font-size: .86rem; font-weight: 600; color: var(--brand);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: color .2s var(--ease), box-shadow .2s var(--ease);
}
.langsw:hover { color: var(--accent-dark); box-shadow: inset 0 0 0 1.5px var(--accent); }
.langsw svg { flex: none; }
.langsw__short { display: none; }
@media (max-width: 30rem) {
  .langsw { padding: .45rem .65rem; }
  .langsw__long { display: none; }
  .langsw__short { display: inline; }
}
/* ---- the bar on a multilingual site ----
   It carries one more control, and Spanish section names run longer, so it is
   laid out more carefully. Everything here is scoped to .masthead--langs,
   which only a multilingual site emits: the single-language mastheads keep
   the spacing they were designed and checked with. */

/* The GLN mark never shrinks. As a flex item it used to give way first when
   the menu was crowded, drawn at as little as 55% of its width — and the GLN
   guidelines forbid distorting it. The name and the menu wrap instead. */
.masthead--langs .brand__gln { flex: none; }
/* The call to action is one pill; it must never break inside itself. */
.masthead--langs .nav .btn { white-space: nowrap; }
@media (min-width: 64.01rem) and (max-width: 75rem) {
  .masthead--langs .masthead__in { gap: .9rem; }
  .masthead--langs .nav { gap: 1.1rem; }
  .masthead--langs .nav a { font-size: .9rem; }
}
/* Below 1024px the full menu no longer fits beside an unshrinking mark and a
   switch, so these bars fold into the menu button earlier than the others. */
@media (max-width: 64rem) {
  .masthead--langs .nav { display: none; }
  .masthead--langs .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; inset: 74px 0 auto; background: #fff;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: .5rem 0;
  }
  .masthead--langs .nav.is-open a { padding: .95rem 1.25rem; border-bottom: 1px solid var(--line); }
  .masthead--langs .nav.is-open .btn { margin: .8rem 1.25rem; }
  .masthead--langs .nav__toggle {
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    background: var(--brand-soft); border: 0; border-radius: 12px; cursor: pointer; color: var(--brand);
  }
}
@media (max-width: 30rem) {
  .masthead--langs .masthead__in { gap: .6rem; }
  .masthead--langs .brand { gap: .55rem; }
  .masthead--langs .brand__gln { padding: .4rem .55rem; }
  .masthead--langs .langsw { padding: .4rem .5rem; gap: .3rem; }
}
@media (max-width: 22.5rem) {
  .masthead--langs .langsw svg { display: none; }
}

/* ---- the bar folded because the menu would not fit ----
   The section names are the office's own (Admin > Website) and can be long,
   so no fixed breakpoint knows when the full menu stops fitting. site.js
   measures: with .masthead--measure on, the name and the menu take their
   natural widths. If the bar overflows it first tries .masthead--tight
   (closer spacing, slightly smaller menu text); only if that still overflows
   does it get .masthead--fold, the same menu button and drop-down a phone
   gets. */
.masthead--measure .masthead__brands, .masthead--measure .nav { flex: none; }
.masthead--tight .masthead__in { gap: .9rem; }
.masthead--tight .nav { gap: 1.1rem; }
.masthead--tight .nav a { font-size: .9rem; }
.masthead--tight .nav .btn { padding: .6rem 1rem; }
.masthead--fold .nav { display: none; }
.masthead--fold .nav.is-open {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  position: absolute; inset: 74px 0 auto; background: #fff;
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: .5rem 0;
}
.masthead--fold .nav.is-open a { padding: .95rem 1.25rem; border-bottom: 1px solid var(--line); }
.masthead--fold .nav.is-open .btn { margin: .8rem 1.25rem; }
.masthead--fold .nav__toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  background: var(--brand-soft); border: 0; border-radius: 12px; cursor: pointer; color: var(--brand);
}

/* ---------- hero ---------- */
.hero {
  position: relative; color: #fff; isolation: isolate; text-align: center;
  padding: clamp(4.5rem, 11vw, 8.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.hero .eyebrow { justify-content: center; }
/* Photograph if present, brand gradient underneath. A missing photo
   degrades to the gradient rather than a broken image. */
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: linear-gradient(115deg, rgba(var(--ov-1),.90) 8%, rgba(var(--ov-2),.72) 52%, rgba(var(--ov-3),.58) 100%),
                    var(--hero-photo, none),
                    linear-gradient(125deg, var(--brand-deep) 0%, var(--brand) 48%, var(--brand-2) 100%);
  background-size: cover, cover, cover;
  background-position: center, center, center;
}
/* ---- hero background: video or slideshow ----
   Both sit under .hero__bg's overlay gradient, which is what keeps the
   headline readable. z-index -3 puts them behind that overlay but still
   above nothing; the brand gradient on .hero__bg remains the floor, so a
   video that never loads degrades to exactly the old look. */
.hero__media {
  position: absolute; inset: 0; z-index: -3; overflow: hidden;
  background: linear-gradient(125deg, var(--brand-deep) 0%, var(--brand) 48%, var(--brand-2) 100%);
}
.hero__media iframe, .hero__media video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
}
/* A 16:9 frame cropped to fill any viewport: whichever of width/height is
   the binding constraint wins, so there are never letterbox bars. */
.hero__media iframe, .hero__media video {
  width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh;
}
.hero__slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease-in-out;
}
.hero__slide.is-on { opacity: 1; }
/* The overlay strength the office sets in Admin > Website. */
.hero__bg[data-overlay] { background-image: none; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(115deg,
              rgba(var(--ov-1),var(--scrim-a, .90)) 8%,
              rgba(var(--ov-2),calc(var(--scrim-a, .90) * .8)) 52%,
              rgba(var(--ov-3),calc(var(--scrim-a, .90) * .64)) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

.hero__glow {
  position: absolute; z-index: -1; inset: auto -8% -30% auto; width: min(620px, 70vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(var(--accent-rgb),.34), transparent 66%); filter: blur(30px); pointer-events: none;
}
.hero h1 { color: #fff; font-size: var(--step-4); font-weight: 700; max-width: 17ch; margin-inline: auto; }
.hero h1 .accent { color: var(--accent); }
.hero__lede { margin: 1.5rem auto 0; max-width: 48ch; font-size: var(--step-1); color: rgba(255,255,255,.86); line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.1rem; justify-content: center; }


/* ---------- trust bar ---------- */
.trust { margin-top: -2.5rem; position: relative; z-index: 5; }
.trust__card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem); display: grid; gap: 1.4rem;
}
@media (min-width: 44rem) { .trust__card { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.trust__item { display: grid; gap: .2rem; }
@media (min-width: 44rem) { .trust__item + .trust__item { border-left: 1px solid var(--line); padding-left: 2rem; } }
.trust__n { font-family: var(--display); font-weight: 700; font-size: var(--step-2); line-height: 1; color: var(--brand); }
.trust__k { font-size: .9rem; color: var(--muted); }

/* ---------- generic section ---------- */
.sec { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.sec--alt { background: var(--bg-alt); }
.sec__head { max-width: 34rem; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.sec__head h2 { font-size: var(--step-3); }
.sec__head p { margin: 1rem 0 0; color: var(--muted); font-size: var(--step-1); line-height: 1.55; }

/* A dated caveat under the events list — the offices confirm Summit dates
   site by site, so the page says so rather than implying silence means none. */
.note { margin-top: 1.75rem; display: flex; align-items: center; gap: .6rem;
  color: var(--muted); font-size: .92rem; }
.note::before { content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); flex: none; }

/* ---------- value cards ---------- */
.gains { display: grid; gap: 1.25rem; }
@media (min-width: 44rem) { .gains { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .gains { grid-template-columns: repeat(4, 1fr); } }
.gain {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem 1.5rem; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gain:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.gain__ic {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); margin-bottom: 1.1rem;
}
.gain h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.gain p { margin: 0; color: var(--muted); font-size: .945rem; line-height: 1.55; }

/* ---------- events ----------
   Populated from the app's JSON feed. The markup ships with a working
   fallback card, so with JavaScript off — or the feed down — the section
   still points at the full events page instead of sitting empty. */
.evts { display: grid; gap: 1.25rem; }
@media (min-width: 44rem) { .evts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .evts { grid-template-columns: repeat(3, 1fr); } }

.evt {
  position: relative;
  display: flex; flex-direction: column; gap: .8rem; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.evt:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.evt__top { display: flex; align-items: flex-start; gap: 1rem; }
.evt__date {
  flex: none; width: 62px; border-radius: 12px; overflow: hidden;
  text-align: center; background: var(--brand); color: #fff; line-height: 1;
}
.evt__d { display: block; font-family: var(--display); font-weight: 700; font-size: 1.5rem; padding: .5rem 0 .15rem; }
.evt__m { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .12em; padding-bottom: .5rem; color: var(--accent); }
/* The day is not fixed yet: the month fills the block on its own. */
.evt__date--month { display: flex; align-items: center; justify-content: center; min-height: 54px; }
.evt__date--month .evt__m { font-size: .8rem; padding: .5rem .35rem; color: #fff; }
.evt h3 { font-size: 1.1rem; line-height: 1.25; }
.evt__when { margin: .3rem 0 0; font-size: .85rem; color: var(--muted); }
/* The card carries two links — the event and, for a company, the way to
   sponsor it — so the title's link is stretched over the whole card instead of
   the card itself being one. The sponsor link sits above that layer. */
.evt__link { color: inherit; text-decoration: none; }
.evt__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.evt__link:focus-visible { outline: none; }
.evt__link:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 3px; }
.evt__sponsor {
  position: relative; z-index: 1; align-self: flex-start; margin-top: -.2rem;
  font-size: .85rem; font-weight: 600; color: var(--brand-2); text-decoration: none;
}
.evt__sponsor:hover { color: var(--accent-dark); text-decoration: underline; }
.evt__blurb { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.5; }
.evt__meta { display: flex; flex-wrap: wrap; gap: .45rem; }
/* The early bird on an event card, and the price it brings down, full price
   struck through: the figures the event's registration form shows. */
.evt__eb { margin: 0; align-self: flex-start; padding: .28rem .75rem; border-radius: 999px;
  background: #E7F6EC; color: #14532D; font-size: .82rem; line-height: 1.35; }
.evt__price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; color: var(--ink); }
.evt__price strong { font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.evt__price s { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.evt__from { color: var(--muted); font-size: .82rem; font-weight: 600; }
.evt__foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .9rem; font-weight: 600; color: var(--brand-2); display: flex; align-items: center; gap: .4rem; }
.evt:hover .evt__foot { color: var(--accent-dark); }
/* The event's poster, from the feed: the whole flyer, set on a blurred copy of
   itself, in one frame for every card whatever shape the flyer is. It runs to
   the card's edges, over the padding. */
.evt__pic {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; flex: none;
  margin: -1.5rem -1.5rem .2rem; background: var(--brand-soft);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.evt__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.evt__pic img:first-child { object-fit: cover; filter: blur(18px); transform: scale(1.15); opacity: .6; }
.evt--all { justify-content: center; background: var(--brand-soft); border-style: dashed; }
.evt--all:only-child { grid-column: 1 / -1; text-align: center; align-items: center; }
.evt--all:only-child .evt__blurb { max-width: 46ch; }
/* Beside an event it keeps its own height: stretched to a card with a poster
   it was a tall, empty dashed box. The link to all events is its words. */
.evts > .evt--all:not(:only-child) { align-self: start; }
.evts > .evt--all:not(:only-child) .evt__foot { margin-top: .6rem; }

/* Speaker faces on an event card. Overlapped portraits read as "who is
   teaching" at a glance, which is what decides most ticket purchases. */
.evt__spk { display: flex; align-items: center; gap: .6rem; }
.evt__faces { display: flex; }
.evt__faces img, .evt__faces span {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(19,30,51,.2);
  margin-left: -10px; background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
}
.evt__faces > :first-child { margin-left: 0; }
.evt__names { font-size: .82rem; color: var(--muted); line-height: 1.35; }

/* ---------- community hub ----------
   Cards that lead into the app: marketplace, directory, events, membership.
   The website promotes these; it never reimplements them. One shared copy of
   each page serves every country, which is the whole point of the app. */
.hub { display: grid; gap: 1.25rem; }
@media (min-width: 44rem) { .hub { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .hub { grid-template-columns: repeat(4, 1fr); } }
.hubcard {
  display: flex; flex-direction: column; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem 1.5rem 1.4rem; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hubcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.hubcard__ic {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-dark); margin-bottom: 1.1rem;
}
.hubcard h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.hubcard p { margin: 0; color: var(--muted); font-size: .945rem; line-height: 1.55; }
.hubcard__go {
  margin-top: auto; padding-top: 1.15rem; font-size: .9rem; font-weight: 600;
  color: var(--brand-2); display: flex; align-items: center; gap: .4rem;
}
.hubcard:hover .hubcard__go { color: var(--accent-dark); }

/* Primary call under the network cards. The four cards explain the offer;
   this is the single action that follows from it. */
.hub__cta { margin-top: clamp(2rem, 4vw, 2.75rem); text-align: center; }
.hub__cta p { margin: .9rem 0 0; color: var(--muted); font-size: .93rem; }

/* ---------- host ---------- */
.host__in { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 58rem) { .host__in { grid-template-columns: 1fr 1fr; } }
.host__list { margin: 1.6rem 0 2rem; padding: 0; list-style: none; display: grid; gap: .85rem; }
.host__list li { display: flex; gap: .8rem; align-items: flex-start; color: var(--ink-2); font-size: .975rem; }
.host__list svg { flex: none; margin-top: .28rem; color: var(--accent-dark); }
.host__media {
  border-radius: var(--radius-lg); aspect-ratio: 4 / 3; box-shadow: var(--shadow);
  background-image: var(--host-photo, none), linear-gradient(140deg, var(--brand), var(--panel-2));
  background-size: cover; background-position: center;
}

/* Host panel — stands in for assets/photos/host.jpg when there is no photo.
   Same footprint as .host__media so the two-column layout is unchanged. */
.host__panel {
  border-radius: var(--radius-lg); aspect-ratio: 4 / 3; box-shadow: var(--shadow);
  background: linear-gradient(140deg, var(--brand), var(--panel-2)); color: #fff;
  padding: clamp(1.5rem, 3.5vw, 2.5rem); display: flex; flex-direction: column;
  justify-content: center; overflow: hidden;
}
.host__panel-k { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.62); }
.host__panel-n { margin: .5rem 0 0; font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 700;
  line-height: 1; letter-spacing: -.02em; color: var(--accent); }
.host__panel-s { margin: .55rem 0 0; font-size: .95rem; line-height: 1.45;
  color: rgba(255,255,255,.84); max-width: 32ch; }
.host__panel-k--sub { margin-top: 1.5rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.18); }
.host__panel-l { list-style: none; margin: .85rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem; }
.host__panel-l li { font-size: .9rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.13); border-radius: 999px; padding: .34rem .8rem; }

/* ---------- common questions ----------
   The office's own FAQs, the first few from the app's JSON feed, each one
   opening in place. Hairline rows on the section's own ground rather than
   cards, so every look — light or dark, round or square — takes them as they
   are. The list ships empty and stays out of the way until the feed fills it;
   the button to the full page is in the HTML, so the section is never blank. */
.faqs { border-top: 1px solid var(--line); }
.faqs:empty { display: none; }
.faq { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  line-height: 1.35; letter-spacing: -.015em; color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
  font-family: var(--font); font-size: 1.3rem; font-weight: 600; line-height: 1;
  transition: transform .25s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.faq__q:hover::after, .faq[open] > .faq__q::after { background: var(--brand); color: #fff; }
.faq[open] > .faq__q::after { transform: rotate(45deg); }
.faq__q:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
/* Line breaks as the office typed them; a long web address wraps on a phone. */
.faq__a { max-width: 68ch; padding: 0 0 1.5rem; color: var(--ink-2); line-height: 1.65;
  white-space: pre-line; overflow-wrap: anywhere; }
.faq__a a { color: var(--accent-dark); text-underline-offset: 2px; }
.faqs__more { margin-top: clamp(1.8rem, 3.5vw, 2.4rem); }

/* ---------- photo albums ----------
   The newest albums the office published, from the app's JSON feed, each
   card leading to its photos in the app. The section ships hidden and appears
   only when the feed brings an album. */
.albs { display: grid; gap: 1.25rem; }
@media (min-width: 44rem) { .albs { grid-template-columns: repeat(3, 1fr); } }
.alb {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.alb:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.alb__pic { aspect-ratio: 4 / 3; overflow: hidden; background: var(--brand-soft); }
.alb__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.alb:hover .alb__pic img { transform: scale(1.04); }
.alb h3 { font-size: 1.1rem; line-height: 1.25; margin: 1.1rem 1.25rem 0; }
.alb__meta { margin: .35rem 1.25rem 1.25rem; font-size: .88rem; color: var(--muted); }
.albs__more { margin-top: clamp(1.8rem, 3.5vw, 2.4rem); }

/* ---------- closing band ---------- */
.close {
  background: linear-gradient(125deg, var(--brand-deep) 0%, var(--brand) 52%, var(--brand-2) 100%);
  color: #fff; text-align: center; padding: clamp(3.5rem, 8vw, 6rem) 0;
}
.close h2 { color: #fff; font-size: var(--step-3); margin-inline: auto; max-width: 18ch; }
.close p { max-width: 44ch; margin: 1.1rem auto 2rem; color: rgba(255,255,255,.82); font-size: var(--step-1); }
.close .hero__actions { justify-content: center; }

/* ---------- footer ---------- */
.foot { background: #0C1526; color: rgba(255,255,255,.72); padding: clamp(3rem, 6vw, 4.5rem) 0 2.25rem; font-size: .94rem; }
.foot h3 { color: #fff; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; font-family: var(--font); font-weight: 700; }
.foot__grid { display: grid; gap: 2.25rem; }
@media (min-width: 54rem) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.foot a { color: rgba(255,255,255,.72); text-decoration: none; }
.foot a:hover { color: var(--accent); }
/* GLN mark in the footer. Height is fixed at 46px (their minimum is 45) and
   the padding is the clear-space buffer their guidelines require. Nothing here
   recolours or crops the mark -- it renders the supplied file untouched. */
.foot__gln { display: inline-flex; align-items: center; padding: .55rem .9rem; }
.foot__gln img { height: 46px; width: auto; display: block; }
@media (max-width: 40rem) { .foot__gln { padding-left: 0; } }

/* The country flag, moved down here from the masthead. */
.foot__flag { margin: 0 0 .9rem; line-height: 0; }
.foot__flag svg { height: 30px; width: auto; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.22); display: block; }

.foot__by { color: rgba(255,255,255,.62); }
.foot__by a { color: rgba(255,255,255,.86); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.28); padding-bottom: 1px; }
.foot__by a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.foot__legal { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; font-size: .84rem; color: rgba(255,255,255,.52); }

/* ---------- install prompt (PWA) ---------- */
.install {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(140%);
  bottom: 1rem; z-index: 80; width: min(420px, calc(100% - 2rem));
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 1rem 1.1rem; display: flex; align-items: center; gap: .9rem;
  transition: transform .4s var(--ease);
}
.install.is-up { transform: translateX(-50%) translateY(0); }
.install p { margin: 0; font-size: .9rem; line-height: 1.4; flex: 1; }
.install strong { display: block; font-family: var(--display); }
.install__x { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 1.3rem; line-height: 1; padding: .2rem; }

/* ---------- reveal ---------- */
.js .rise { opacity: 0; transform: translateY(16px); }
.js .rise.is-in { opacity: 1; transform: none; transition: opacity .65s var(--ease), transform .65s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rise { opacity: 1; transform: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 56rem) {
  .nav { display: none; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; inset: 74px 0 auto; background: #fff;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: .5rem 0;
  }
  .nav.is-open a { padding: .95rem 1.25rem; border-bottom: 1px solid var(--line); }
  .nav.is-open .btn { margin: .8rem 1.25rem; }
  .nav__toggle {
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    background: var(--brand-soft); border: 0; border-radius: 12px; cursor: pointer; color: var(--brand);
  }
  .trust { margin-top: -1.5rem; }
}

/* ============================================================
   Looks — ten ways the same page can read, chosen per country in
   Admin > Website and set on <html data-theme="…">. Classic is
   everything above; each other look is a block below.

   Every look is drawn in the colour settings at the top of this file, so
   they all start in the Global Leadership Network palette — deep teal
   #1D4354 and GLN blue #009CDE — and all follow an office's own colours
   when it sets them. Only the two typefaces already loaded are used. They differ in light or dark, type, shape and layout.
   The markup never changes, so a look can be switched after the page is
   built and a static site needs no rebuild.

   The footer stays dark in every look: it carries the white GLN mark,
   which style.glni.org allows only on a dark ground.
   ============================================================ */

/* Looks that set the headline to the left */
[data-theme="bold"] .hero, [data-theme="editorial"] .hero, [data-theme="minimal"] .hero { text-align: left; }
[data-theme="bold"] .hero .eyebrow, [data-theme="editorial"] .hero .eyebrow,
[data-theme="minimal"] .hero .eyebrow { justify-content: flex-start; }
[data-theme="bold"] .hero h1, [data-theme="editorial"] .hero h1, [data-theme="minimal"] .hero h1 { margin-inline: 0; }
[data-theme="bold"] .hero__lede, [data-theme="editorial"] .hero__lede, [data-theme="minimal"] .hero__lede { margin-left: 0; }
[data-theme="bold"] .hero .hero__actions, [data-theme="editorial"] .hero .hero__actions,
[data-theme="minimal"] .hero .hero__actions { justify-content: flex-start; }

/* ---------- Bold: dark, heavy type, GLN blue ---------- */
[data-theme="bold"] {
  --bg: var(--night); --bg-alt: var(--night-2);
  --ink: #F2F6F9; --ink-2: #C5D3DC; --muted: #94A8B4; --line: rgba(255,255,255,.12);
  --brand-soft: rgba(var(--accent-rgb),.16); --accent-soft: rgba(var(--accent-rgb),.16);
  --radius: 8px; --radius-sm: 6px; --radius-lg: 12px;
  --shadow-sm: none; --shadow: 0 22px 50px rgba(0,0,0,.45); --shadow-lg: 0 30px 80px rgba(0,0,0,.55);
  --display: var(--font);
  color-scheme: dark;
}
[data-theme="bold"] h1, [data-theme="bold"] h2, [data-theme="bold"] h3 { font-weight: 800; letter-spacing: -.03em; }
[data-theme="bold"] .btn { font-weight: 800; border-radius: var(--radius-sm); }
[data-theme="bold"] .btn--navy { background: #fff; color: var(--brand); }
[data-theme="bold"] .btn--navy:hover { background: var(--accent); color: var(--on-accent); }
[data-theme="bold"] .btn--outline:hover { background: #fff; color: var(--brand); }
[data-theme="bold"] .masthead { background: rgba(var(--night-rgb), .9); }
[data-theme="bold"] .nav a:hover { color: var(--accent); }
[data-theme="bold"] .nav .btn { color: var(--on-accent); }
[data-theme="bold"] .nav.is-open { background: var(--bg); }
[data-theme="bold"] .nav__toggle { background: rgba(255,255,255,.08); color: #fff; }
[data-theme="bold"] .langsw { color: var(--ink); }
[data-theme="bold"] .langsw:hover { color: var(--accent); }
[data-theme="bold"] .sec .eyebrow { color: var(--accent); }
[data-theme="bold"] .hero { min-height: min(86vh, 52rem); display: flex; align-items: center; }
[data-theme="bold"] .hero h1 { font-size: clamp(2.7rem, 1.5rem + 5vw, 6rem); max-width: 14ch; line-height: .98; }
[data-theme="bold"] .hero__glow { background: radial-gradient(circle, rgba(var(--accent-rgb),.5), transparent 66%); }
[data-theme="bold"] .trust__card { background: var(--bg-alt); border: 1px solid var(--line); }
[data-theme="bold"] .trust__n { color: var(--accent); font-weight: 800; }
[data-theme="bold"] .gain, [data-theme="bold"] .evt, [data-theme="bold"] .hubcard { background: var(--bg-alt); }
[data-theme="bold"] .sec--alt .gain { background: var(--bg); }
[data-theme="bold"] .gain:hover, [data-theme="bold"] .evt:hover, [data-theme="bold"] .hubcard:hover { border-color: var(--accent); }
[data-theme="bold"] .gain__ic, [data-theme="bold"] .hubcard__ic { color: var(--accent); }
[data-theme="bold"] .evt__foot, [data-theme="bold"] .hubcard__go { color: var(--accent); }
[data-theme="bold"] .evt--all { background: transparent; }
[data-theme="bold"] .evt__faces img, [data-theme="bold"] .evt__faces span { border-color: var(--bg-alt); }
[data-theme="bold"] .host__list svg { color: var(--accent); }
[data-theme="bold"] .close { background: var(--accent); color: var(--on-accent); }
[data-theme="bold"] .close h2 { color: var(--on-accent); }
[data-theme="bold"] .close p { color: var(--on-accent); opacity: .86; }
[data-theme="bold"] .close .btn { background: var(--on-accent); color: var(--accent); box-shadow: none; }
[data-theme="bold"] .close .btn--onphoto { background: transparent; color: var(--on-accent); box-shadow: inset 0 0 0 2px var(--on-accent); backdrop-filter: none; }
[data-theme="bold"] .close .btn:hover { background: #fff; color: #17120A; }
[data-theme="bold"] .foot { background: var(--night-deep); }
[data-theme="bold"] .install { background: var(--bg-alt); color: var(--ink); }

/* ---------- Editorial: magazine — serif, rules, square corners ---------- */
[data-theme="editorial"] {
  --bg-alt: #F4F6F7; --line: #D6DCE1;
  --radius: 0; --radius-sm: 0; --radius-lg: 0;
  --shadow-sm: none; --shadow: none; --shadow-lg: none; --shadow-accent: none;
}
[data-theme="editorial"] h1, [data-theme="editorial"] h2 { font-weight: 400; letter-spacing: -.02em; }
[data-theme="editorial"] .btn {
  border-radius: 0; font-family: var(--font); font-weight: 700; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; background: var(--brand); color: #fff;
}
[data-theme="editorial"] .btn:hover { background: var(--accent-dark); transform: none; }
/* The menu's button keeps its normal case: the bar has no room to spare. */
[data-theme="editorial"] .nav .btn { font-size: .9rem; letter-spacing: 0; text-transform: none; }
[data-theme="editorial"] .btn--onphoto { background: transparent; box-shadow: inset 0 0 0 1px #fff; backdrop-filter: none; }
[data-theme="editorial"] .btn--onphoto:hover { background: #fff; color: var(--brand); }
[data-theme="editorial"] .btn--outline { box-shadow: inset 0 0 0 1px var(--ink); }
[data-theme="editorial"] .masthead { background: #fff; border-bottom: 1px solid var(--ink); }
[data-theme="editorial"] .hero { padding-bottom: clamp(4rem, 9vw, 6.5rem); }
[data-theme="editorial"] .hero h1 { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 5.4rem); max-width: 16ch; line-height: 1.05; }
[data-theme="editorial"] .hero__glow { display: none; }
[data-theme="editorial"] .trust { margin-top: 0; }
[data-theme="editorial"] .trust__card { background: transparent; border-bottom: 1px solid var(--ink); padding-inline: 0; }
[data-theme="editorial"] .trust__n { color: var(--ink); font-weight: 400; font-size: var(--step-3); }
[data-theme="editorial"] main { counter-reset: sec; }
[data-theme="editorial"] .sec__head { max-width: none; border-top: 2px solid var(--ink); padding-top: 1.2rem; }
@media (min-width: 58rem) {
  [data-theme="editorial"] .sec__head { display: grid; grid-template-columns: 13rem minmax(0, 40rem); column-gap: 3rem; }
  [data-theme="editorial"] .sec__head > * { grid-column: 2; }
  [data-theme="editorial"] .sec__head > .eyebrow { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
}
/* Numbered sections: 01, 02, 03 … in place of the eyebrow's dash */
[data-theme="editorial"] .sec .eyebrow { display: block; color: var(--ink); counter-increment: sec; }
[data-theme="editorial"] .sec .eyebrow::before {
  content: counter(sec, decimal-leading-zero); display: block; width: auto; height: auto; margin-bottom: .45rem;
  background: none; border-radius: 0; color: var(--accent-dark);
  font-family: var(--display); font-size: 1.9rem; font-weight: 400; letter-spacing: 0; line-height: 1;
}
[data-theme="editorial"] .gain, [data-theme="editorial"] .hubcard {
  background: transparent; border: 0; border-top: 1px solid var(--ink); padding: 1.4rem 0 0;
}
[data-theme="editorial"] .gain:hover, [data-theme="editorial"] .hubcard:hover,
[data-theme="editorial"] .evt:hover { transform: none; }
[data-theme="editorial"] .gain__ic, [data-theme="editorial"] .hubcard__ic {
  background: none; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink);
}
[data-theme="editorial"] .hubcard__go, [data-theme="editorial"] .evt__foot { color: var(--accent-dark); }
[data-theme="editorial"] .evt { border-color: var(--ink); }
[data-theme="editorial"] .evt:hover { background: var(--bg-alt); }
[data-theme="editorial"] .evt__date { background: var(--ink); }
[data-theme="editorial"] .evt--all { background: var(--bg-alt); border-style: solid; border-color: var(--line); }
[data-theme="editorial"] .close { background: var(--bg-alt); color: var(--ink); border-top: 1px solid var(--ink); }
[data-theme="editorial"] .close h2 { color: var(--ink); font-weight: 400; }
[data-theme="editorial"] .close p { color: var(--ink-2); }
[data-theme="editorial"] .close .btn--onphoto { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
[data-theme="editorial"] .close .btn--onphoto:hover { background: var(--ink); color: #fff; }
[data-theme="editorial"] .foot { background: var(--ink); }

/* ---------- Minimal: plain type, fine borders, framed photo ---------- */
[data-theme="minimal"] {
  --bg-alt: #FFFFFF;
  --radius: 10px; --radius-sm: 8px; --radius-lg: 16px;
  --shadow-sm: none; --shadow: none; --shadow-lg: none; --shadow-accent: none;
  --display: var(--font);
}
[data-theme="minimal"] h1, [data-theme="minimal"] h2, [data-theme="minimal"] h3 { font-weight: 600; letter-spacing: -.02em; }
[data-theme="minimal"] .btn { font-weight: 600; border-radius: var(--radius-sm); background: var(--brand); color: #fff; }
[data-theme="minimal"] .btn:hover { background: var(--accent-dark); transform: none; }
[data-theme="minimal"] .btn--onphoto { background: rgba(255,255,255,.12); }
[data-theme="minimal"] .btn--onphoto:hover { background: #fff; color: var(--brand); }
[data-theme="minimal"] .btn--outline { background: transparent; color: var(--ink); }
[data-theme="minimal"] .hero {
  width: var(--shell); margin: 1rem auto 0; border-radius: var(--radius-lg); overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.4rem, 5vw, 4rem);
}
[data-theme="minimal"] .hero > .shell { width: auto; margin-inline: 0; }
[data-theme="minimal"] .hero h1 { font-size: var(--step-3); max-width: 22ch; }
[data-theme="minimal"] .hero__glow { display: none; }
[data-theme="minimal"] .trust { margin-top: 1rem; }
[data-theme="minimal"] .trust__card { border: 1px solid var(--line); }
[data-theme="minimal"] .trust__n { color: var(--ink); font-weight: 600; }
[data-theme="minimal"] .sec--alt { border-block: 1px solid var(--line); }
[data-theme="minimal"] .sec .eyebrow { color: var(--muted); }
[data-theme="minimal"] .sec .eyebrow::before { display: none; }
[data-theme="minimal"] .gain:hover, [data-theme="minimal"] .evt:hover,
[data-theme="minimal"] .hubcard:hover { transform: none; border-color: var(--accent); }
[data-theme="minimal"] .gain__ic, [data-theme="minimal"] .hubcard__ic {
  width: auto; height: auto; background: none; color: var(--accent-dark); place-items: start;
}
[data-theme="minimal"] .evt__date { background: var(--brand-soft); color: var(--brand); }
[data-theme="minimal"] .evt__m { color: var(--accent-dark); }
[data-theme="minimal"] .close {
  width: var(--shell); margin: 0 auto clamp(3rem, 6vw, 4.5rem); border-radius: var(--radius-lg);
  background: var(--brand);
}
[data-theme="minimal"] .close .btn:not(.btn--onphoto) { background: #fff; color: var(--brand); }
[data-theme="minimal"] .close .btn:not(.btn--onphoto):hover { background: var(--accent-soft); }
[data-theme="minimal"] .foot { background: #15181D; }

/* ---------- Community: soft tints, very round, curved photo edge ---------- */
[data-theme="warm"] {
  --bg-alt: var(--tint);
  --radius: 26px; --radius-sm: 18px; --radius-lg: 34px;
  --display: var(--font);
}
[data-theme="warm"] h1, [data-theme="warm"] h2, [data-theme="warm"] h3 { font-weight: 800; letter-spacing: -.025em; }
[data-theme="warm"] .hero {
  overflow: hidden;
  border-radius: 0 0 50% 50% / 0 0 clamp(1.5rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
}
[data-theme="warm"] .hero h1 { font-size: clamp(2.3rem, 1.6rem + 3.2vw, 4.3rem); }
[data-theme="warm"] .trust__n { color: var(--accent-dark); font-weight: 800; }
[data-theme="warm"] .sec__head { margin-inline: auto; text-align: center; }
/* Centred: the dash goes above the words, so a label that wraps stays centred */
[data-theme="warm"] .sec__head .eyebrow { flex-direction: column; align-items: center; gap: .5rem; }
[data-theme="warm"] .gain, [data-theme="warm"] .hubcard { border: 0; }
[data-theme="warm"] .hubcard { background: var(--bg-alt); box-shadow: none; }
[data-theme="warm"] .gain { box-shadow: 0 8px 26px rgba(var(--accent-dark-rgb),.09); }
[data-theme="warm"] .gain__ic, [data-theme="warm"] .hubcard__ic {
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff;
}
[data-theme="warm"] .evt { border: 0; box-shadow: 0 8px 26px rgba(var(--accent-dark-rgb),.10); }
[data-theme="warm"] .evt__date { border-radius: var(--radius-sm); background: var(--accent-dark); }
[data-theme="warm"] .evt__m { color: #fff; opacity: .85; }
[data-theme="warm"] .evt--all { background: var(--bg-alt); border: 2px dashed rgba(var(--accent-dark-rgb),.3); box-shadow: none; }
[data-theme="warm"] .close {
  background: linear-gradient(125deg, var(--accent-dark) 0%, var(--brand) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
[data-theme="warm"] .close .btn { background: #fff; color: var(--brand); box-shadow: none; }
[data-theme="warm"] .close .btn:hover { background: var(--accent-soft); color: var(--brand); }
[data-theme="warm"] .close .btn--onphoto { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
[data-theme="warm"] .foot { background: var(--brand-deep); }

/* ---------- Split: the headline on a solid panel, the photo beside it ---------- */
[data-theme="split"] {
  --radius: 8px; --radius-sm: 6px; --radius-lg: 12px;
  --display: var(--font);
}
[data-theme="split"] h1, [data-theme="split"] h2, [data-theme="split"] h3 { font-weight: 700; letter-spacing: -.025em; }
[data-theme="split"] .btn { border-radius: var(--radius-sm); }
[data-theme="split"] .hero { text-align: left; }
[data-theme="split"] .hero .eyebrow { justify-content: flex-start; }
[data-theme="split"] .hero h1 { margin-inline: 0; font-size: clamp(2.3rem, 1.6rem + 2.8vw, 3.9rem); }
[data-theme="split"] .hero__lede { margin-left: 0; }
[data-theme="split"] .hero .hero__actions { justify-content: flex-start; }
[data-theme="split"] .hero__glow { display: none; }
@media (min-width: 58rem) {
  [data-theme="split"] .hero { background: var(--brand); padding: clamp(5rem, 9vw, 7.5rem) 0 clamp(5rem, 8vw, 6.5rem); }
  [data-theme="split"] .hero__bg, [data-theme="split"] .hero__media, [data-theme="split"] .hero__scrim { left: 50%; }
  /* Beside the headline the photo can be itself, not under a dark wash */
  [data-theme="split"] .hero__bg { background-image: var(--hero-photo, none), linear-gradient(125deg, var(--brand-deep), var(--brand-2)); }
  [data-theme="split"] .hero__bg[data-overlay] { background-image: none; }
  [data-theme="split"] .hero__scrim { opacity: .35; }
  [data-theme="split"] .hero > .shell { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  [data-theme="split"] .hero > .shell > * { grid-column: 1; }
}
[data-theme="split"] .sec__head { border-left: 4px solid var(--accent); padding-left: 1.2rem; }
[data-theme="split"] .gain, [data-theme="split"] .hubcard, [data-theme="split"] .evt { border-left: 4px solid var(--accent); }
[data-theme="split"] .close { background: var(--brand); }

/* ---------- Horizon: slanted edges, gradients, energy ---------- */
[data-theme="horizon"] {
  --bg-alt: var(--tint);
  --radius: 14px; --radius-sm: 10px; --radius-lg: 20px;
  --display: var(--font);
}
[data-theme="horizon"] h1, [data-theme="horizon"] h2, [data-theme="horizon"] h3 { font-weight: 800; letter-spacing: -.03em; }
[data-theme="horizon"] .btn { background: linear-gradient(135deg, var(--accent-dark), var(--brand)); color: #fff; }
[data-theme="horizon"] .btn:hover { background: var(--brand); color: #fff; }
[data-theme="horizon"] .btn--onphoto { background: rgba(255,255,255,.14); }
[data-theme="horizon"] .btn--onphoto:hover { background: #fff; color: var(--brand); }
[data-theme="horizon"] .hero {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%);
  padding-bottom: calc(clamp(3rem, 6vw, 4.5rem) + 5vw);
}
[data-theme="horizon"] .hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.8vw, 5rem); }
[data-theme="horizon"] .sec--alt {
  clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%);
  padding-block: calc(clamp(3.5rem, 8vw, 6.5rem) + 3vw);
}
[data-theme="horizon"] .sec .eyebrow { color: var(--accent-dark); }
[data-theme="horizon"] .gain, [data-theme="horizon"] .hubcard, [data-theme="horizon"] .evt {
  border: 0; border-top: 4px solid var(--accent); box-shadow: 0 10px 30px rgba(var(--accent-dark-rgb), .10);
}
[data-theme="horizon"] .evt--all { border: 2px dashed rgba(var(--accent-dark-rgb), .3); }
[data-theme="horizon"] .close {
  clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
  padding-top: calc(clamp(3.5rem, 8vw, 6rem) + 4vw);
  background: linear-gradient(125deg, var(--brand-deep), var(--accent-dark));
}
[data-theme="horizon"] .close .btn:not(.btn--onphoto) { background: #fff; color: var(--brand); }

/* ---------- Elegant: light serif, hairlines, generous space ---------- */
[data-theme="elegant"] {
  --radius: 4px; --radius-sm: 3px; --radius-lg: 6px;
  --shadow-sm: none; --shadow: 0 16px 40px rgba(19,30,51,.08); --shadow-lg: 0 24px 60px rgba(19,30,51,.10); --shadow-accent: none;
}
[data-theme="elegant"] h1, [data-theme="elegant"] h2, [data-theme="elegant"] h3 { font-weight: 400; letter-spacing: -.01em; }
[data-theme="elegant"] .hero { min-height: min(80vh, 48rem); display: flex; flex-direction: column; justify-content: center; }
[data-theme="elegant"] .hero h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.8rem); line-height: 1.12; }
[data-theme="elegant"] .hero h1 .accent { font-style: italic; }
[data-theme="elegant"] .eyebrow { letter-spacing: .32em; font-weight: 600; font-size: .7rem; }
[data-theme="elegant"] .eyebrow::before, [data-theme="elegant"] .eyebrow::after {
  content: ""; width: 28px; height: 1px; border-radius: 0; background: currentColor; opacity: .6;
}
[data-theme="elegant"] .host__in .eyebrow::after { display: none; }
[data-theme="elegant"] .sec__head { margin-inline: auto; text-align: center; }
[data-theme="elegant"] .sec__head .eyebrow { justify-content: center; }
[data-theme="elegant"] .btn {
  background: transparent; color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); border-radius: 2px;
  font-family: var(--font); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 1rem 1.8rem;
}
[data-theme="elegant"] .btn:hover { background: var(--brand); color: #fff; transform: none; }
[data-theme="elegant"] .nav .btn { font-size: .88rem; letter-spacing: 0; text-transform: none; padding: .62rem 1.1rem; }
[data-theme="elegant"] .hero .btn, [data-theme="elegant"] .close .btn { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); backdrop-filter: none; }
[data-theme="elegant"] .hero .btn:hover, [data-theme="elegant"] .close .btn:hover { background: #fff; color: var(--brand); }
[data-theme="elegant"] .gain, [data-theme="elegant"] .hubcard, [data-theme="elegant"] .evt { box-shadow: none; }
[data-theme="elegant"] .gain:hover, [data-theme="elegant"] .hubcard:hover,
[data-theme="elegant"] .evt:hover { transform: none; box-shadow: var(--shadow); }
[data-theme="elegant"] .gain__ic, [data-theme="elegant"] .hubcard__ic { background: none; border: 1px solid var(--line); border-radius: 50%; }
[data-theme="elegant"] .trust__n { font-weight: 400; }
[data-theme="elegant"] .close { background: var(--brand-deep); }
[data-theme="elegant"] .close h2 { font-weight: 400; }

/* ---------- Night: the Classic page after dark ---------- */
[data-theme="night"] {
  --bg: var(--night); --bg-alt: var(--night-2);
  --ink: #EEF3F6; --ink-2: #C3D0D8; --muted: #93A6B2; --line: rgba(255,255,255,.1);
  --brand-soft: rgba(var(--accent-rgb),.14); --accent-soft: rgba(var(--accent-rgb),.14);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.3); --shadow: 0 18px 50px rgba(0,0,0,.45); --shadow-lg: 0 30px 80px rgba(0,0,0,.5);
  color-scheme: dark;
}
[data-theme="night"] .masthead { background: rgba(var(--night-rgb), .88); }
[data-theme="night"] .nav a:hover { color: var(--accent); }
[data-theme="night"] .nav.is-open { background: var(--bg); }
[data-theme="night"] .nav__toggle { background: rgba(255,255,255,.08); color: #fff; }
[data-theme="night"] .langsw { color: var(--ink); }
[data-theme="night"] .sec .eyebrow { color: var(--accent); }
[data-theme="night"] .trust__card, [data-theme="night"] .gain, [data-theme="night"] .evt,
[data-theme="night"] .hubcard { background: var(--night-2); }
[data-theme="night"] .sec--alt .gain { background: var(--bg); }
[data-theme="night"] .trust__n, [data-theme="night"] .gain__ic, [data-theme="night"] .hubcard__ic,
[data-theme="night"] .evt__foot, [data-theme="night"] .hubcard__go, [data-theme="night"] .host__list svg { color: var(--accent); }
[data-theme="night"] .evt--all { background: transparent; }
[data-theme="night"] .evt__faces img, [data-theme="night"] .evt__faces span { border-color: var(--night-2); }
[data-theme="night"] .btn--navy { background: #fff; color: var(--brand); }
[data-theme="night"] .btn--outline:hover { background: #fff; color: var(--brand); }
[data-theme="night"] .close { background: linear-gradient(125deg, var(--night-deep), var(--brand)); }
[data-theme="night"] .foot { background: var(--night-deep); border-top: 1px solid var(--line); }
[data-theme="night"] .install { background: var(--night-2); color: var(--ink); }

/* ---------- Mosaic: every section a panel on a soft blue page ---------- */
[data-theme="mosaic"] {
  --bg: var(--tint); --bg-alt: var(--tint);
  --radius: 22px; --radius-sm: 14px; --radius-lg: 30px;
  --display: var(--font);
}
[data-theme="mosaic"] h1, [data-theme="mosaic"] h2, [data-theme="mosaic"] h3 { font-weight: 700; letter-spacing: -.025em; }
[data-theme="mosaic"] .masthead { background: rgba(255,255,255,.9); }
[data-theme="mosaic"] .hero {
  width: var(--shell); margin: .9rem auto 0; border-radius: var(--radius-lg); overflow: hidden;
  padding-inline: clamp(1.4rem, 5vw, 4rem);
}
/* margin 0, not auto: in a flex hero (a tall photo) auto margins would
   shrink the text block to its content and float it towards the middle */
[data-theme="mosaic"] .hero > .shell, [data-theme="mosaic"] .close > .shell { width: auto; margin-inline: 0; }
/* The figures sit under the photo as a panel of their own; overlapping it,
   the photo's rounded corners showed as slivers either side */
[data-theme="mosaic"] .trust { margin-top: .9rem; }
[data-theme="mosaic"] .hero h1 { font-size: clamp(2.3rem, 1.6rem + 3vw, 4.2rem); }
[data-theme="mosaic"] .sec { padding: .9rem 0; }
[data-theme="mosaic"] .sec > .shell { background: #fff; border-radius: var(--radius-lg); padding: clamp(1.8rem, 4vw, 3.4rem); }
[data-theme="mosaic"] .gain, [data-theme="mosaic"] .evt { background: var(--tint); border: 0; box-shadow: none; }
[data-theme="mosaic"] .hubcard { border: 0; box-shadow: none; color: #fff; }
[data-theme="mosaic"] .hubcard:nth-child(4n+1) { background: var(--brand); }
[data-theme="mosaic"] .hubcard:nth-child(4n+2) { background: var(--panel-2); }
[data-theme="mosaic"] .hubcard:nth-child(4n+3) { background: var(--brand-2); }
[data-theme="mosaic"] .hubcard:nth-child(4n+4) { background: var(--brand-deep); }
[data-theme="mosaic"] .hubcard h3, [data-theme="mosaic"] .hubcard p,
[data-theme="mosaic"] .hubcard__go, [data-theme="mosaic"] .hubcard:hover .hubcard__go { color: #fff; }
[data-theme="mosaic"] .hubcard__ic { background: rgba(255,255,255,.16); color: #fff; }
[data-theme="mosaic"] .trust__card { box-shadow: none; }
[data-theme="mosaic"] .close { width: var(--shell); margin: .9rem auto; border-radius: var(--radius-lg); padding-inline: clamp(1.4rem, 5vw, 4rem); }
[data-theme="mosaic"] .foot { background: var(--brand-deep); }

/* ---------- Every look but Classic: details a visual review found ----------
   Classic keeps exactly what it always had; these apply to the other nine. */
/* The menu's button took the menu links' grey (pale, in the dark looks)
   instead of its own button colour. Each look gets its button's own text. */
[data-theme="bold"] .nav .btn, [data-theme="warm"] .nav .btn, [data-theme="split"] .nav .btn,
[data-theme="night"] .nav .btn, [data-theme="mosaic"] .nav .btn { color: var(--on-accent); }
[data-theme="editorial"] .nav .btn, [data-theme="minimal"] .nav .btn,
[data-theme="horizon"] .nav .btn { color: #fff; }
[data-theme="elegant"] .nav .btn { color: var(--brand); }
[data-theme] .nav .btn:hover { color: #fff; }
/* The Host card: blue figure on the blue card read at under 3:1; white does */
[data-theme] .host__panel-n { color: #fff; }
/* On a phone the card grows to fit its content instead of cutting it off */
[data-theme] .host__panel { overflow: visible; }
[data-theme] .host__in h2 { font-size: var(--step-3); }
/* "Ticketed" and "Members only" as two labels, not one run-on phrase */
[data-theme] .evt__meta .badge {
  display: inline-block; padding: .16rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; background: var(--brand-soft); color: var(--brand);
}
[data-theme="bold"] .evt__meta .badge, [data-theme="night"] .evt__meta .badge { color: var(--accent); }
[data-theme="bold"] .evt__eb, [data-theme="night"] .evt__eb { background: rgba(74, 222, 128, .14); color: #86EFAC; }
[data-theme="mosaic"] .evt__meta .badge { background: #fff; }   /* its cards are already the pale tint */
/* "See all events" left alone on its own row spans the row instead */
@media (min-width: 44rem) and (max-width: 69.99rem) {
  [data-theme] .evts > .evt--all:nth-child(2n+1):last-child { grid-column: 1 / -1; }
}
@media (min-width: 70rem) {
  [data-theme] .evts > .evt--all:nth-child(3n+1):last-child { grid-column: 1 / -1; }
}
/* A label that wraps keeps its dash beside its first line */
[data-theme="bold"] .sec .eyebrow::before, [data-theme="split"] .sec .eyebrow::before,
[data-theme="horizon"] .sec .eyebrow::before, [data-theme="night"] .sec .eyebrow::before,
[data-theme="mosaic"] .sec .eyebrow::before { align-self: flex-start; margin-top: .55em; flex: none; }
/* On a phone the label over the headline drops its dash rather than strand it */
@media (max-width: 40rem) {
  [data-theme] .hero .eyebrow::before, [data-theme] .hero .eyebrow::after { display: none; }
  [data-theme="elegant"] .eyebrow { letter-spacing: .18em; }
}
/* Horizon: the closing band's slant meets the section above it without a gap,
   and the main button stands out from the dark photo */
[data-theme="horizon"] .close { margin-top: -4vw; }
[data-theme="horizon"] .hero .btn:not(.btn--onphoto) { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent); }
[data-theme="horizon"] .hero .btn:not(.btn--onphoto):hover { background: #fff; color: var(--brand); }
/* Elegant: the main button filled, so it reads as the one to press */
[data-theme="elegant"] .hero .btn:not(.btn--onphoto), [data-theme="elegant"] .close .btn:not(.btn--onphoto) {
  background: #fff; color: var(--brand); box-shadow: none;
}
[data-theme="elegant"] .hero .btn:not(.btn--onphoto):hover, [data-theme="elegant"] .close .btn:not(.btn--onphoto):hover {
  background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #fff;
}
[data-theme="elegant"] .host__panel-n { font-family: var(--display); font-weight: 400; }
/* Split: the Host section's text gets the coloured bar every other section has */
[data-theme="split"] .host__in > div:first-child { border-left: 4px solid var(--accent); padding-left: 1.2rem; }
/* Common questions: in the dark looks the teal of the + is lost on the ground,
   so it takes GLN blue, as the other icons there do */
[data-theme="bold"] .faq__q::after, [data-theme="night"] .faq__q::after,
[data-theme="bold"] .faq__a a, [data-theme="night"] .faq__a a { color: var(--accent); }
[data-theme="bold"] .faq__q:hover::after, [data-theme="bold"] .faq[open] > .faq__q::after,
[data-theme="night"] .faq__q:hover::after, [data-theme="night"] .faq[open] > .faq__q::after {
  background: var(--accent); color: var(--on-accent);
}
/* The looks that centre their section headings centre the buttons under the questions and photos too */
[data-theme="warm"] .faqs__more, [data-theme="elegant"] .faqs__more,
[data-theme="warm"] .albs__more, [data-theme="elegant"] .albs__more { text-align: center; }
/* Photo albums take each look's card, as the event cards do. The section is a
   tinted one, so in the dark looks a card is the page's own ground. */
[data-theme="bold"] .alb, [data-theme="night"] .alb { background: var(--bg); }
[data-theme="bold"] .alb:hover { border-color: var(--accent); }
[data-theme="editorial"] .alb { border-color: var(--ink); }
[data-theme="editorial"] .alb:hover, [data-theme="minimal"] .alb:hover { transform: none; }
[data-theme="minimal"] .alb:hover { border-color: var(--accent); }
[data-theme="warm"] .alb { border: 0; box-shadow: 0 8px 26px rgba(var(--accent-dark-rgb), .10); }
[data-theme="horizon"] .alb { border: 0; border-top: 4px solid var(--accent); box-shadow: 0 10px 30px rgba(var(--accent-dark-rgb), .10); }
[data-theme="elegant"] .alb { box-shadow: none; }
[data-theme="elegant"] .alb:hover { transform: none; box-shadow: var(--shadow); }
[data-theme="mosaic"] .alb { background: var(--tint); border: 0; box-shadow: none; }

/* ============================================================
   The office's own choices (Admin > Website > Customise), set as
   data-* attributes on <html> by the page's head script and site.js,
   or by public/home.php. They come after every look so that a choice
   made on purpose wins over a look's own default.
   ============================================================ */

/* Where the headline sits */
[data-hero-align="left"] .hero { text-align: left; }
[data-hero-align="left"] .hero .eyebrow { justify-content: flex-start; }
[data-hero-align="left"] .hero h1 { margin-inline: 0; }
[data-hero-align="left"] .hero__lede { margin-left: 0; margin-right: auto; }
[data-hero-align="left"] .hero .hero__actions { justify-content: flex-start; }
[data-hero-align="center"] .hero { text-align: center; }
[data-hero-align="center"] .hero .eyebrow { justify-content: center; }
[data-hero-align="center"] .hero h1 { margin-inline: auto; }
[data-hero-align="center"] .hero__lede { margin-inline: auto; }
[data-hero-align="center"] .hero .hero__actions { justify-content: center; }

/* How tall the top photo is */
[data-hero-height="compact"] .hero {
  min-height: 0; padding-top: clamp(3rem, 7vw, 4.5rem); padding-bottom: clamp(3rem, 5vw, 3.75rem);
}
[data-hero-height="tall"] .hero {
  min-height: min(92vh, 60rem); display: flex; flex-direction: column; justify-content: center;
}

/* Button corners */
[data-btn="round"] .btn { border-radius: 999px; }
[data-btn="soft"] .btn { border-radius: 10px; }
[data-btn="square"] .btn { border-radius: 0; }

/* The order of the four middle sections, and which of them show. The top
   photo and the figures stay first and the closing band last. */
[data-ordered] main { display: flex; flex-direction: column; }
[data-ordered] main > .close { order: 20; }
[data-ordered] #events    { order: var(--ord-events, 1); }
[data-ordered] #summit    { order: var(--ord-summit, 2); }
[data-ordered] #community { order: var(--ord-community, 3); }
[data-ordered] #host      { order: var(--ord-host, 4); }
/* Not among the four: the questions, then the photos, stay just above the
   closing band. Without this they would take order 0 and jump up under the
   figures. */
[data-ordered] #faq       { order: 18; }
[data-ordered] #photos    { order: 19; }
[data-hide~="trust"] .trust,
[data-hide~="summit"] #summit,
[data-hide~="community"] #community,
[data-hide~="host"] #host,
[data-hide~="host"] .nav a[href="#host"] { display: none; }
/* The photo's glow reaches below it, where the figures usually sit over it */
[data-hide~="trust"] .hero__glow { display: none; }