/* Temasek Club Switzerland — Home
   Built from Figma frame "Home" (1440px wide). */

:root {
  --color-text: #000;
  /* secondary text: black at 62% so it stays readable on white, grey and yellow (about 5:1 or better) */
  --color-text-secondary: rgba(0, 0, 0, 0.62);
  --color-bg: #fff;
  --color-surface: #f1f1f1;
  --color-yellow: #e6dc94;
  --color-yellow-light: #f5edb2;

  --radius-sm: 10px;
  --lead-trim: 40px;   /* how much of the gap under the header is removed: 100px becomes 60px (32px of 64px on phones) */
  --radius-md: 16px; /* cards, panels and large photos */
  --radius-lg: 20px;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-title: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --noise-size: 134px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  /* Figma's "auto" line height for Inter rounds to 19px at 16px, 24px at 20px, 39px at 32px */
  line-height: 19px;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-title); }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; }
strong { font-weight: 600; }

/* ---------- Layout shell ---------- */

.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px 100px;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.main {
  width: 1248px;
  max-width: 100%;
  margin: calc(var(--lead-trim) * -1) auto 0;   /* pulls the page's first heading up closer to the header (the page gap is 100px) */
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.section-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 39px;
  white-space: nowrap;
}

/* ---------- Shared bits ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px; /* one height for every button */
  padding: 0 12px;
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-sm);
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { background: #e6e6e6; }

/* Yellow panel with the overlay-blended noise texture */
.noise-panel { position: relative; }
.noise-panel::before,
.noise-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  pointer-events: none;
}
.noise-panel::before { background: var(--color-yellow); }
.noise-panel::after {
  background: url("assets/noise.png") top left / var(--noise-size) var(--noise-size);
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.noise-panel > * { position: relative; z-index: 1; }

/* ---------- Header ---------- */

/* Sticky top bar: white, full-bleed, with a soft shadow (same treatment as ivo.ai's navbar) */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 70px;
  margin-bottom: 5px;
}
.header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--color-bg);
  box-shadow: 0 0 11px rgba(111, 96, 85, 0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand__logo {
  width: 43px;
  height: 43px;
  object-fit: cover;
}
.brand__name { white-space: nowrap; }

.nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 24px;
}
/* hover fills the item with a soft pill; negative margins keep the original spacing */
.nav__link {
  display: inline-flex;
  align-items: center;
  height: 36px; /* same height for Events, Integration, About Us and Contact us */
  margin: 0 -12px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s;
}
.nav__link:hover,
.header[data-open="integration"] [data-menu="integration"].nav__trigger,
.header[data-open="about"] [data-menu="about"].nav__trigger { background: var(--color-surface); }
/* chevron half turn: 0.4s, ease-out opening and ease-in closing (the same easing as the contact tooltip letters) */
.nav__link img { width: 24px; height: 24px; transition: transform 0.4s ease-in; }
.nav__trigger:hover img,
.nav__trigger[aria-expanded="true"] img { transform: rotate(180deg); transition: transform 0.4s ease-out; }
.nav__link:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* expanding panel: the header grows downward, the page behind is dimmed */
.menu {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  width: 100vw;
  transform: translate(-50%, -8px);
  padding: 16px 0;
  background: var(--color-bg);
  box-shadow: 0 12px 24px rgba(111, 96, 85, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
}
.header[data-open="integration"] #menu-integration,
.header[data-open="about"] #menu-about {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.2s, transform 0.2s;
}
.menu__inner {
  /* --menu-x is set by nav.js so the options line up under their parent item */
  padding-left: var(--menu-x, 0px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.menu__options { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.menu__options a {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.menu__options a:hover,
.menu__options a:focus-visible { background: var(--color-surface); }

.menu-overlay {
  position: fixed;
  z-index: -2;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s, visibility 0s 0.2s;
}
.header[data-open] .menu-overlay { opacity: 1; visibility: visible; transition: opacity 0.2s; }
.header__right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.socials {
  display: flex;
  align-items: center;
  gap: 16px;
}
.socials a { position: relative; display: block; }
.header__right .btn { height: 36px; padding: 0 12px; }
.socials img { width: 32px; height: 32px; }

/* ---------- Hero ---------- */

.hero {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.hero__title {
  font-size: 32px;
  font-weight: 400;
  line-height: 42px;
  white-space: nowrap;
}

/* Photo carousel: centre photo with neighbours peeking in at the edges;
   windows are clipped with a polygon whose edges bow while dragging (see carousel.js) */
.carousel {
  position: relative;
  height: 690px;
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate; /* keep the slides' z-index inside the carousel, below the header */
  background: var(--color-surface);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.carousel.is-dragging { cursor: grabbing; }
.carousel__stage { position: absolute; inset: 0; }
.carousel__slide {
  position: absolute;
  inset: 0;
  will-change: clip-path;
}
.carousel__slide img {
  position: absolute;
  top: 0;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.carousel__dots {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.carousel__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.3s;
}
.carousel__dot[aria-selected="true"] { opacity: 1; transform: scale(1.4); }

.hero__caption {
  display: flex;
  align-items: flex-start;
  gap: 180px; /* narrower gap = a wider intro, so "exciting events," fits on one line */
}
.hero__lead {
  flex: 1 0 0;
  min-width: 0;
  font-size: 20px;
  line-height: 24px;
}
.hero__photo-caption {
  /* fixed width so the "Join us to stay connected…" text beside it keeps the same width
     whichever caption is showing (the longest caption is about 400px) */
  flex: 0 0 420px;
  text-align: right;
  padding-top: 4px;
  font-size: 20px;
  line-height: 24px;
}

/* ---------- Events ---------- */

.events {
  width: 1242px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.events__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 42px 62px;
}
/* The yellow background is only 446px tall; the photos run past its bottom edge */
.events__panel::before,
.events__panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 446px;
  border-radius: var(--radius-md);
  pointer-events: none;
}
.events__panel::before { background: var(--color-yellow); }
.events__panel::after {
  background: url("assets/noise.png") top left / var(--noise-size) var(--noise-size);
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.events__panel > * { position: relative; z-index: 1; }

.chips {
  display: flex;
  align-items: center;
  gap: 56px;
}
.chip {
  height: 38px; /* fixed: the emoji fallback font would otherwise inflate the line box */
  padding: 6px 12px;
  border: 1px solid var(--color-yellow-light);
  border-radius: var(--radius-sm);
  font-size: 20px;
  line-height: 24px;
  white-space: pre;
}
.chip--active {
  background: var(--color-yellow-light);
  border-color: transparent;
  /* active chip has no border in the design, so it is 2px shorter */
  height: 36px;
  padding: 5px 12px;
  margin: 1px 0;
}
.chips__more { font-size: 20px; line-height: 24px; white-space: nowrap; }

/* photo strip: scrolls sideways by itself as the page scrolls (events-scroll.js), and can also be swiped */
.events__images {
  display: flex;
  align-items: center;
  gap: 1px;                       /* hairline gaps, like the hero carousel */
  position: relative;
  width: var(--window-width, 100vw); /* edge to edge of the browser window; the panel centres it, so it overflows evenly both ways */
  max-width: none;
  flex: none;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 0;               /* square corners: the photos run straight off both edges of the window */
}
.events__images::-webkit-scrollbar { display: none; }
.events__images img {
  flex: none;
  height: 454px;
  object-fit: cover;
  border-radius: 0;
}
.events__img-portrait { width: 340px; }
.events__img-wide { width: 658px; }

/* ---------- Partners ---------- */

.partners {
  display: flex;
  align-items: flex-start;
  gap: 147px /* 134px title + 147px = 281px, the same left edge as the Join us panel */;
}
.partners .section-title { flex: none; width: 134px; }

.partners__card {
  flex: 0 0 967px;
  width: 967px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 32px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.partners__quote {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.partners__avatar {
  flex: none;
  width: 120px;
  height: 120px;
  box-sizing: border-box;
  padding-top: 8px;             /* white space above his head (the photo's own background is white) */
  background: #fff;
  object-fit: cover;           /* fills the full width, so the suit runs to both edges; the extra top space costs a little of the bottom */
  object-position: 50% 0;
  border-radius: var(--radius-md);
}
.partners__text {
  width: 721px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.partners__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 1.5;
}
.partners__author {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.partners__name { font-weight: 500; line-height: 1.5; }
.partners__role { font-size: 12px; line-height: 1.5; }

.partners__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
}
.partners__links li {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* soft underline that slowly fades out on hover (same as the SOCIOTYPE link on sociodesign.co.uk) */
.partners__links a {
  white-space: nowrap;
  border-bottom: 1px solid rgba(153, 153, 153, 0.38);
  transition: color 1s, border-color 1s;
}
.partners__links a:hover { border-color: transparent; }
.partners__links a:hover,
.partners__links a:focus-visible { border-color: transparent; }
/* the arrow is hidden until hover and fades in at the same speed as the hero caption letters (0.55s, ease-out) */
.partners__links .arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.partners__links li:has(a:hover) .arrow,
.partners__links li:has(a:focus-visible) .arrow {
  opacity: 1;
  transform: none;
}
.arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 19px; /* same as the link text's line height, so it centres on the text */
  font-size: 19px;
  line-height: 1;
}

/* ---------- Join us ---------- */

/* "Contact us" scrolls here: leave room for the sticky 70px header so "Join us" stays visible */
.join { padding: 0 64px; scroll-margin-top: 118px; }

.join__inner {
  position: relative;
  width: 1248px;
  max-width: 100%;
  height: 856.22px;
}

.join__title {
  position: absolute;
  left: 0;
  top: 0;
}

/* collage: positions are the Figma offsets inside the group (which starts 364px down) */
.collage {
  position: absolute;
  left: 0;
  top: 364px;
  width: 0;
  height: 0;
}
.collage__item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* the collage PNGs are exported from Figma already rotated, with transparent corners,
   so each one simply fills its bounding box */
.collage__item > img { width: 100%; height: 100%; }
.collage__item--12 { left: 951.34px; top: 181.6px;  width: 381.95px; height: 264.01px; }
.collage__item--10 { left: 629px;    top: 182px;    width: 404.44px; height: 273.7px; }
.collage__item--8  { left: 0;        top: 0;        width: 374.44px; height: 492.22px; }
.collage__item--9  { left: 358.4px;  top: 192.27px; width: 323.41px; height: 278.67px; }

.join__panel {
  position: absolute;
  left: 281px;
  top: 0;
  width: 967px;
  height: 580px;
}
.join__panel::before,
.join__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  pointer-events: none;
}
.join__panel::before { background: var(--color-yellow); }
.join__panel::after {
  background: url("assets/noise.png") top left / var(--noise-size) var(--noise-size);
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.join__panel > * { position: absolute; z-index: 1; }

.join__ideas {
  font-family: var(--font-title); /* same typeface as the "Join us" title */
  left: 56px;
  top: 39px;
  font-size: 20px;
  line-height: 24px;
  white-space: nowrap;
}

.join__fields {
  left: 56px;
  top: 104px;   /* more space under the card's first line (was 86px) */
  width: 634px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.field--message { gap: 13px; }
.field input,
.field textarea {
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: #fff;
  color: inherit;
  font: inherit;
  padding: 12px 16px;
}
.field input { height: 50px; }
.field textarea { height: 159px; resize: none; }   /* 259px before the Topic field was added: the card keeps its size */
/* focused field: the border sits right on the field's edge, in the same light yellow as the inactive event chips */
.field input:focus,
.field textarea:focus,
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--color-yellow-light); outline-offset: 0; }
/* a soft gold glow around the focused field makes it easier to spot than the pale border alone */
.field input,
.field textarea { transition: box-shadow 0.25s ease; }
.field input:focus,
.field textarea:focus {
  box-shadow:
    0 0 0 3px rgba(196, 178, 79, 0.16),
    0 0 12px 2px rgba(196, 178, 79, 0.28);
}

.join__send {
  right: 277px;   /* 967px card - (56px margin + 634px field) = the right edge of the input fields */
  top: 509px;
  height: 36px; /* same as the header buttons */
  min-width: 104px; /* a roomier target: well over the 24px minimum and close to the 44px recommended size */
  padding: 0 24px;
}

/* orchid.png is exported from Figma already cropped to this 283x251 box */
.join__orchid {
  left: 709px;
  top: 106px;
  width: 283px;
  height: 251px;
  pointer-events: none;
}
.join__orchid img { width: 100%; height: 100%; }
/* hovering "Send" makes the orchid sway: it tilts about the base of its stem */
.join__orchid {
  transform-origin: 62% 85%;
  transition: transform 0.4s ease-in;
}
.join__send:hover ~ .join__orchid,
.join__send:focus-visible ~ .join__orchid {
  transform: rotate(6deg);
  transition: transform 0.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .join__orchid { transition: none; }
}

/* ---------- Events page ---------- */

/* shared: noise overlay used on events cards and the grey panel */
.event-card,
.past__panel { position: relative; }
.event-card::after,
.past__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: url("assets/noise.png") top left / var(--noise-size) var(--noise-size);
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}
.event-card > *, .past__panel > * { position: relative; z-index: 1; }

.upcoming {
  display: flex;
  align-items: flex-start;
  gap: 27px;
}
.upcoming .section-title { flex: none; }
.upcoming__list {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
  padding-right: 40px;
}

.event-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: 800px;
  max-width: 100%;
  padding: 24px 40px;
  background: #e4d989;
  border-radius: var(--radius-md);
}
.event-card__main {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  gap: 16px;
}
.event-card__pin { font-size: 20px; font-weight: 500; line-height: 24px; }
.event-card__row { display: flex; gap: 24px; }
.event-card__date { width: 91px; padding-top: 3px; }
.event-card__text { display: flex; flex-direction: column; gap: 10px; }
.event-card__title { margin: 0; font-size: 20px; font-weight: 500; line-height: 24px; }
.event-card__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.event-card__meta li { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.event-card__meta img { width: 24px; height: 24px; flex: none; filter: brightness(0); opacity: 0.62; }   /* black at 62%: the same shade as the "Community" text (--color-text-secondary) */
.event-card__meta span { line-height: 24px; }

/* same 32px as the gap between the upcoming cards (.main normally spaces sections 100px) */
.main--events { gap: 32px; }
.past { display: flex; justify-content: flex-end; width: 1242px; max-width: 100%; }
.past__panel {
  display: flex;
  gap: 24px;
  width: 1114px;
  max-width: 100%;
  padding: 42px 40px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.past__title { flex: 1 0 0; margin: 0; font-size: 20px; font-weight: 400; line-height: 24px; }
.past__body { display: flex; gap: 24px; align-items: flex-start; }

.years { display: flex; flex-direction: column; gap: 24px; }
.year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.year[aria-selected="true"] { background: #fff; }
.year:not([aria-selected="true"]):hover { background: #e6e6e6; }

.past__lists { width: 800px; max-width: 100%; }
.past__list { display: flex; flex-direction: column; gap: 24px; }
.past__list[hidden] { display: none; }
.past-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  min-height: 113px;
  padding: 30px 40px;
  background: #fff;
  border-radius: var(--radius-md);
}
.past-row__date { width: 91px; flex: none; padding-top: 3px; white-space: nowrap; }
.past-row__text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.past-row .btn { align-self: center; }
.past-row__title { margin: 0; font-size: 20px; font-weight: 500; line-height: 24px; }
.past-row--empty { min-height: 0; padding: 24px 40px; }

/* ---------- About page ---------- */

.page--about { position: relative; gap: 95px; padding-bottom: 0; overflow: clip; min-height: calc(1603px - var(--lead-trim)); /* Figma frame height: the train photo ends flush with the bottom */ }
.main--about { position: relative; z-index: 1; gap: 48px; }

/* decorative photos sit behind the content, positioned against the 1440px frame */
.about__deco { position: absolute; z-index: 0; pointer-events: none; max-width: none; }
.about__deco--train { left: -270px; top: calc(648px - var(--lead-trim)); width: 764px; height: 955px; object-fit: cover; }
.about__deco--greenhouse { left: 1162px; top: calc(664px - var(--lead-trim)); width: 400px; height: 267px; object-fit: cover; }

.about-intro { display: flex; align-items: flex-start; gap: 24px; }
.about-intro .section-title { flex: 1 0 0; }
.about-intro__text {
  flex: none;
  width: 782px;
  max-width: 100%;
  font-size: 20px;
  line-height: 1.5;
}
.about-intro__text p + p { margin-top: 1.5em; }

.about-panel {
  position: relative;
  align-self: flex-end;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 1114px;
  max-width: 100%;
  padding: 42px 40px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.about-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: url("assets/noise.png") top left / var(--noise-size) var(--noise-size);
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}
.about-panel > * { position: relative; z-index: 1; }

.about-card {
  padding: 24px 40px;
  background: #fff;
  border-radius: var(--radius-md);
  line-height: 1.5;
}
.about-card h2,
.strategy__item h4 { margin: 0; font-weight: 500; }
.about-card h2 { margin-bottom: 10px; font-size: 20px; line-height: 24px; }
.about-card[data-about="vision"],
.about-card[data-about="mission"],
.about-card--strategy { grid-column: 1 / -1; }   /* each card on its own row */
.about-card--strategy > h2 { margin-bottom: 8px; }

.strategy__item { padding: 24px 0; }
.strategy__item:last-child { padding-bottom: 12px; }
.strategy__item h4 { margin-bottom: 10px; font-size: 16px; line-height: 19px; }

/* ---------- Sponsors page ---------- */

.listing { display: flex; align-items: flex-start; gap: 27px; }
.listing .section-title { flex: none; width: 170px; }

/* 27px flex gap + 5px = the 32px gap between the cards; the title keeps its original 27px */
.listing-tabs { flex: none; display: flex; flex-direction: column; gap: 16px; margin-right: 5px; }
.listing-tabs .year { min-width: 76px; text-align: center; }
/* on the white page the selected tab is the filled one (Current by default) */
.listing-tabs .year { background: transparent; }
.listing-tabs .year[aria-selected="true"] { background: var(--color-surface); }
.listing-tabs .year:not([aria-selected="true"]):hover { background: var(--color-surface); }

.listing__panels { flex: 0 1 948px; min-width: 0; max-width: 100%; }
.listing__grid {
  display: grid;
  grid-template-columns: repeat(3, 281px);
  gap: 32px;
}
.listing__grid[hidden] { display: none; }
.listing__empty { grid-column: 1 / -1; padding: 24px 0; }

.listing-card { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.listing-card__img { width: 240px; height: 238px; margin-bottom: 6px; border-radius: var(--radius-md); object-fit: cover; }
.listing-card__name { margin: 0; font-size: 20px; font-weight: 500; line-height: 24px; }

/* ---------- AGM docs page ---------- */

.about__deco--agm { top: calc(616px - var(--lead-trim)); }

.agm-intro { display: flex; align-items: flex-start; gap: 72px; }
.agm-intro .section-title { flex: none; width: 466px; white-space: normal; }
.agm-intro p { flex: 1 0 0; min-width: 0; font-size: 20px; line-height: 1.5; }

.doc-list {
  position: relative;
  width: 1034px;
  max-width: 100%;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
}
/* grey backdrop sits behind the right part of the cards */
.doc-list::before,
.doc-list::after {
  content: "";
  position: absolute;
  top: 0;
  left: 510px;
  width: 734px;
  height: 950px;
  border-radius: var(--radius-md);
  pointer-events: none;
}
.doc-list::before { background: var(--color-surface); }
.doc-list::after {
  background: url("assets/noise.png") top left / var(--noise-size) var(--noise-size);
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.doc-card {
  position: relative;
  z-index: 1;
  width: 689px;
  max-width: 100%;
  padding: 24px 40px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
}
.doc-card h2 { margin: 0 0 8px; font-size: 20px; font-weight: 500; line-height: 24px; }
.doc-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  font-weight: 500;
}
.doc-card__row img { width: 24px; height: 24px; }
.doc-card__row:hover img { opacity: 0.6; }

/* ---------- Life in Switzerland page ---------- */

.life-intro { display: flex; flex-direction: column; gap: 27px; }
.life-intro__text { margin-top: 5px; font-size: 20px; line-height: 1.5; }
.life-photos {
  display: flex;
  gap: 12px;
  height: 581px;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.life-photos__a {
  flex: none;
  width: 842px;
  height: 581px;
  object-fit: cover;
  border-radius: var(--radius-md);
}
/* second photo is shown from its middle, as framed in Figma */
.life-photos__b {
  position: relative;
  flex: none;
  width: 929px;
  height: 581px;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.life-photos__b img { position: absolute; top: 0.15%; left: -49.99%; width: 100%; height: 100%; max-width: none; }

.info { display: flex; flex-direction: column; gap: 40px; }
.info__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 1242px;
  max-width: 100%;
  padding: 42px 62px;
  background: var(--color-yellow);
  border-radius: var(--radius-md);
}
.info__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: url("assets/noise.png") top left / var(--noise-size) var(--noise-size);
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}
.info__panel > * { position: relative; z-index: 1; }
button.chip { background: transparent; color: inherit; font: inherit; font-size: 20px; line-height: 24px; cursor: pointer; }
button.chip.chip--active { background: var(--color-yellow-light); }
.info__list { width: 100%; padding-left: 36px; font-size: 20px; line-height: 1.5; list-style: disc; } /* same size as the intro text above */
.info__list li { margin-bottom: 24px; }
.info__list li:last-child { margin-bottom: 0; }
.info__list li strong { font-weight: 600; }
.info__list[hidden] { display: none; }
.info__list--empty { padding-left: 0; list-style: none; }

/* ---------- Local businesses page ---------- */

.listing--plain .section-title { flex: 1 0 0; width: auto; }
.socials--grey { gap: 16px; }
.socials--grey img { width: 24px; height: 24px; }

/* ---------- Contact icon tooltips ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.tip {
  position: absolute;
  z-index: 5;
  top: calc(100% + 14px);
  left: 50%;
  width: max-content;
  max-width: 240px;
  padding: 12px 16px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(111, 96, 85, 0.14);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 0.2s 0.1s, transform 0.2s, visibility 0s 0.6s;
}
.socials a:hover .tip,
.socials a:focus-visible .tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.15s, transform 0.2s;
}
.tip__word { display: inline-block; white-space: nowrap; }
/* letters start slightly tucked in and transparent, then fade in left to right (reverse on leave) */
.tip__char {
  margin-left: -0.035em;
  opacity: 0;
  transition: margin-left 0.3s ease-in, opacity 0.3s ease-in;
  transition-delay: calc((var(--n) - var(--i)) * 6ms);
}
.socials a:hover .tip__char,
.socials a:focus-visible .tip__char {
  margin-left: 0;
  opacity: 1;
  transition: margin-left 0.3s ease-out, opacity 0.3s ease-out;
  transition-delay: calc(var(--i) * 6ms);
}
@media (prefers-reduced-motion: reduce) {
  .tip__char { transition: none !important; margin-left: 0; opacity: 1; }
}

/* ---------- Polaroid cards (Team) ----------
   An instant-photo print kept deliberately understated: a flat warm-white card (no paper grain),
   even margins round the photo with a deeper band at the bottom for the name, a barely-visible
   edge and a very soft lift. Nothing is laid over the photos. */

.listing-card--polaroid {
  position: relative;
  gap: 14px;
  padding: 14px 14px 26px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.035),
    0 4px 14px rgba(0, 0, 0, 0.05);
}
.listing-card--polaroid > * { position: relative; z-index: 1; }
/* the photo is outlined by a barely-there hairline */
.listing-card--polaroid .listing-card__img {
  width: 100%;
  height: auto;
  aspect-ratio: 240 / 238;
  margin-bottom: 0;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.listing-card--polaroid .listing-card__name,
.listing-card--polaroid p { padding: 0 6px; }
.listing-card--polaroid .listing-card__name { margin-top: 6px; }

/* ---------- Custom cursor: ang ku kueh on a leaf (switched off for now) ----------
   To turn it back on, uncomment the two rules below. The artwork is assets/cursor-ang-ku-kueh.svg.

:root { --cursor: url("assets/cursor-ang-ku-kueh.svg") 20 10, auto; }
html, body, a, button, summary, .btn, .year, .chip, .nav__link { cursor: var(--cursor); }
*/

/* Sponsors: the logos start level with the top of the Current / Past buttons */
.listing-card--flush-top { padding-top: 0; }

/* sponsor descriptions stay on one line */
.listing-card--flush-top p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* =====================================================================
   Responsive
   - up to 1300px: small fixes so nothing overflows on laptops
   - up to 960px: tablet and mobile layout (menu becomes a burger sheet, rows stack)
   - up to 600px: phone typography and spacing
   ===================================================================== */

/* the sheet only exists as a box on small screens; on desktop its children behave as before */
.header__sheet { display: contents; }
.nav__toggle,
.sheet__socials,
.sheet__cta { display: none; }

@media (max-width: 1300px) {
  .partners__card { flex: 0 1 967px; min-width: 0; }
  .partners__text { width: auto; flex: 1; min-width: 0; }
  /* the Join us panel goes full width here, so the partners card does too and both keep one left edge */
  .partners { flex-direction: column; gap: 24px; }
  .partners .section-title { width: auto; }
  .partners__card { flex: none; width: 100%; }

  /* the Join us photo collage and form are drawn at a fixed 1248px, so stack them below this width */
  /* ----- Join us (every page): the form first, the photo collage under it ----- */
  .join { padding: 0; }
  .join__inner { display: flex; flex-direction: column; gap: 24px; width: 100%; height: auto; }
  .join__title { position: static; order: 1; }
  .join__panel {
    position: relative;
    order: 2;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 16px 24px;
  }
  .join__panel > * { position: relative; left: auto; right: auto; top: auto; }
  .join__ideas { white-space: normal; font-size: 18px; line-height: 1.4; padding-right: 72px; margin-bottom: 8px; }
  .join__fields { width: 100%; }
  .field textarea { height: 180px; }
  .join__send { align-self: flex-end; }
  .join__panel > .join__orchid { position: absolute; top: -28px; right: -4px; left: auto; width: 110px; height: 98px; }
  .collage {
    position: relative;
    order: 3;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
  }
  .collage__item { position: relative; left: auto !important; top: auto !important; width: auto !important; height: auto !important; }
  .collage__item > img { width: 100%; height: auto; }
  /* the four photos were exported with different tilts (-1.3, +2.1, -1.0, +3.0 degrees), so each gets a small extra turn
     to settle on alternating -2 / +2 degrees; the flag and bunting photos are also cropped (slanted windows in index.html) */
  .collage__item--8 > img { clip-path: url(#clip-flag); transform: rotate(-.65deg); }
  .collage__item--10 > img { transform: rotate(-1deg); }
  .collage__item--12 > img { transform: rotate(-1deg); }
  .collage__item--9 > img { clip-path: url(#clip-bunting-m); }
  /* the clipped-away top of the bunting photo would leave a gap, so pull it up and bottom-align the pair */
  .collage__item--8, .collage__item--9 { align-self: end; }
  .collage__item--9 { margin-top: -17.6%; }
  .collage__item--8 > img { width: 100%; }
  .collage__item--8 { margin: -30.8% 0 -35%; }


  /* grids and panels that were fixed-width flex with the space instead */
  .listing__grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .listing-card__img { width: 100%; height: auto; aspect-ratio: 240 / 238; }
  .past__title { flex: none; width: 160px; }   /* a fixed title column, so the list gets the rest of the card */
  .past__body { flex: 1; min-width: 0; }
  .past__lists { width: auto; flex: 1; min-width: 0; }
}

@media (max-width: 960px) {
  :root { --lead-trim: 32px; }
  .page { padding: 0 20px 64px; gap: 64px; }
  .page--about { gap: 64px; min-height: 0; overflow: visible; padding-bottom: 64px; }
  .main { gap: 64px; }
  .main--events { gap: 24px; }
  .section-title { white-space: normal; font-size: 26px; line-height: 1.3; }

  /* ----- header: logo, burger, and a full-screen sheet ----- */
  .header { gap: 12px; }
  .header__right { gap: 8px; }
  .header__right .socials,
  .header__right .btn { display: none; }
  .nav__toggle {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
  }
  .nav__toggle span {
    position: absolute;
    left: 13px;
    right: 13px;
    height: 2px;
    border-radius: 1px;
    background: #000;
    transition: transform 0.3s ease, top 0.3s ease;
  }
  .nav__toggle span:nth-child(1) { top: 14px; }
  .nav__toggle span:nth-child(2) { top: 20px; }
  .header[data-mobile="open"] .nav__toggle span:nth-child(1) { top: 17px; transform: rotate(45deg); }
  .header[data-mobile="open"] .nav__toggle span:nth-child(2) { top: 17px; transform: rotate(-45deg); }

  .header__sheet {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 20px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-bg);
  }
  .header[data-mobile="open"] .header__sheet { display: flex; }

  /* the three menu items and their options stack in one list; every option is always visible */
  .nav { display: contents; }
  .nav .nav__link {
    order: 1;
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 0 12px;
    justify-content: space-between;
    font-size: 20px;
  }
  .nav .nav__link:nth-child(2) { order: 2; }
  #menu-integration { order: 3; }
  .nav .nav__link:nth-child(3) { order: 4; }
  #menu-about { order: 5; }
  .nav__trigger img { display: none; }
  /* About Us is a link, so its chevron stays and points right (the Integration heading is not a link: no chevron) */
  .nav a.nav__trigger img,
  .nav a.nav__trigger:hover img { display: block; transform: translateY(2px) rotate(-90deg); transition: none; }   /* 2px lower: level with the middle of the letters */
  .nav a.nav__trigger { justify-content: flex-start; gap: 4px; }   /* the chevron sits right after the words, not at the row's far edge */
  .nav__trigger { font-weight: 600; font-family: var(--font-title); }
  button.nav__trigger { pointer-events: none; }
  .menu {
    position: static !important;
    width: auto;
    padding: 0 0 12px 12px;
    background: none;
    box-shadow: none;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
  }
  .menu__inner { padding-left: 0 !important; max-width: none; width: auto; }
  .menu__options { width: 100%; }
  .menu__options a { height: 48px; font-size: 18px; width: 100%; }
  .menu-overlay { display: none; }
  .sheet__socials { order: 6; display: flex; gap: 16px; margin: 16px 12px 0; padding: 24px 0 8px; border-top: 1px solid rgba(0, 0, 0, 0.08); }   /* a subtle divider between the page links and the social icons */
  .sheet__socials img { width: 32px; height: 32px; }
  .sheet__cta { order: 7; display: inline-flex; align-self: flex-start; margin: 16px 12px 0; }
  .tip { display: none; }

  /* ----- home ----- */
  .hero__title { white-space: normal; font-size: 26px; line-height: 1.3; }
  .carousel { height: 420px; }
  .hero__caption { flex-direction: column; gap: 16px; }
  .hero__lead { font-size: 20px; line-height: 24px; }
  .hero__break { display: none; } /* on small screens the text just wraps naturally */
  .hero__photo-caption { order: -1; flex: none; width: auto; padding-top: 0; white-space: normal; text-align: left; } /* caption sits above the intro text */

  .events { width: 100%; gap: 24px; }
  .events__panel { padding: 28px 16px; gap: 20px; }
  .events__panel::before,
  .events__panel::after { height: calc(100% - 70px); }
  .chips { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .events__images img { height: 300px; }
  .events__img-portrait { width: 220px; }
  .events__img-wide { width: 400px; }

  .partners { flex-direction: column; gap: 24px; }
  .partners .section-title { width: auto; }
  .partners__card { flex: none; width: 100%; padding: 20px; gap: 32px; }
  .partners__quote { flex-direction: column; gap: 20px; }
  .partners__text { width: 100%; }
  .partners__links { align-items: flex-start; }
  .partners__links a { white-space: normal; padding-bottom: 6px; }   /* more room between the text and its grey underline */

  /* ----- events page ----- */
  .upcoming { flex-direction: column; gap: 20px; }
  .upcoming__list { width: 100%; padding-right: 0; align-items: stretch; gap: 16px; }
  .event-card { width: 100%; flex-direction: column; gap: 12px; padding: 20px; }
  /* first line: the pin and the date; next line: the title with its subtitle; then the location and info, full width */
  .event-card__main { flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
  .event-card__row { display: contents; }
  .event-card__date { width: auto; min-width: 0; padding-top: 0; }
  .event-card__text { flex: 0 0 100%; }
  .event-card__meta li { white-space: normal; }
  .past { width: 100%; }
  .past__panel { flex-direction: column; gap: 16px; padding: 24px 16px; }
  .past__body { flex-direction: column; gap: 16px; width: 100%; }
  .years { flex-direction: row; gap: 8px; }
  .past__lists { width: 100%; }
  .past-row { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 20px; }
  .past-row__date { width: auto; }
  .past-row .btn { align-self: flex-start; margin-top: 8px; }

  /* ----- About ----- */
  .about__deco { display: none; }
  .about-intro { flex-direction: column; gap: 20px; }
  .about-intro__text { width: 100%; font-size: 18px; }
  .about-panel { grid-template-columns: 1fr; width: 100%; padding: 20px 16px; }
  .about-card--strategy { grid-column: auto; }
  .about-card { padding: 20px; }

  /* ----- AGM docs ----- */
  .agm-intro { flex-direction: column; gap: 20px; }
  .agm-intro .section-title { width: auto; }
  .agm-intro p { font-size: 18px; }
  .doc-list { width: 100%; padding-top: 0; }
  .doc-list::before,
  .doc-list::after { display: none; }
  .doc-card { width: 100%; padding: 20px; }

  /* ----- Team, Sponsors, Local businesses ----- */
  .listing { flex-direction: column; gap: 20px; }
  .listing .section-title { width: auto; }
  .listing-tabs { flex-direction: row; margin-right: 0; }
  .listing__panels { flex: none; width: 100%; }
  .listing__grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
  .listing-card__img { width: 100%; height: auto; aspect-ratio: 240 / 238; }

  /* ----- Life in Switzerland ----- */
  .life-photos { flex-direction: column; height: auto; }
  .life-photos__a { width: 100%; height: 240px; }
  .life-photos__b { width: 100%; height: 160px; }
  .life-photos__b img { top: 0; left: 0; object-fit: cover; }
  .life-intro__text { font-size: 18px; }
  .info__panel { width: 100%; padding: 24px 16px; }
  .info__list { font-size: 18px; padding-left: 22px; }
}

@media (max-width: 600px) {
  .page { padding: 0 16px 56px; }
  .section-title { font-size: 22px; }
  .hero__title { font-size: 22px; }
  .carousel { height: 340px; }
  .brand__name { font-size: 14px; }
  .brand { gap: 10px; }
  .events__images img { height: 240px; }
  .events__img-portrait { width: 170px; }
  .events__img-wide { width: 320px; }
  .chip, button.chip, .chips__more, .hero__lead, .hero__photo-caption { font-size: 16px; line-height: 20px; }
  .listing__grid { grid-template-columns: 1fr; }
}

/* ---------- Text button wave ---------- */
.wave__char { display: inline-block; }
.btn:hover .wave__char,
.btn:focus-visible .wave__char,
.year:hover .wave__char {
  animation: letter-wave 0.45s ease-in-out both;
  animation-delay: var(--d, 0ms);
}
@keyframes letter-wave {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(calc(var(--lift, 3px) * -1)); }
}

/* ---------- Text hierarchy: secondary text is a lighter shade ---------- */
.listing-card p,
.event-card__date,
.event-card__text p,
.past-row__date,
.past-row__text p,
.partners__role,
.hero__photo-caption { color: var(--color-text-secondary); }
.hero__photo-caption strong { color: var(--color-text); }

/* event chips are real buttons: soft fill on hover, filled when selected */
.chips button.chip { cursor: pointer; transition: background 0.2s; }
.chips button.chip:not(.chip--active):hover { background: rgba(245, 237, 178, 0.55); }
.chips button.chip:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* ---------- Hero caption letters (the tooltip fade, slowed down) ---------- */
.cap__word { display: inline-block; white-space: nowrap; }
.cap__char {
  margin-left: 0;
  opacity: 1;
  /* slower than the tooltips so a whole caption settles in about a second: 0.55s fade, 18ms between letters */
  transition: margin-left 0.55s ease-out, opacity 0.55s ease-out;
  transition-delay: calc(var(--i) * 18ms);
}
/* hidden state used just before a new caption fades in: it is applied instantly, not animated */
.hero__photo-caption.is-out .cap__char {
  margin-left: -0.035em;
  opacity: 0;
  transition: none;
}
.hero__photo-caption strong .cap__char { font-weight: inherit; }
@media (prefers-reduced-motion: reduce) {
  .cap__char, .hero__photo-caption.is-out .cap__char { transition: none; }
}

/* ---------- Social icons: on hover the icon swaps to a northeast arrow ---------- */
.header__right .socials a img { transition: opacity 0.3s ease; }
.header__right .socials a::after {
  content: "↗";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.header__right .socials a:hover img,
.header__right .socials a:focus-visible img { opacity: 0; }
.header__right .socials a:hover::after,
.header__right .socials a:focus-visible::after { opacity: 1; }

/* note shown when the (not yet connected) Join us form is submitted */
.join__note { left: 56px; top: 518px; font-size: 14px; line-height: 1.4; color: var(--color-text-secondary); }

/* ---------- Content from the Google Sheet ---------- */

/* while the sheet's content is awaited the areas that it fills stay hidden, so built-in content never flashes */
.tcs-wait [data-tcs] { visibility: hidden; }

.upcoming__empty,
.past__empty,
.doc-list__empty { color: var(--color-text-secondary); }
.upcoming__empty { padding: 24px 0; }
.past__empty { padding: 24px 0; }
.doc-list__empty { position: relative; z-index: 1; width: 689px; max-width: 100%; padding: 24px 40px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: var(--radius-md); }

/* the hidden field that catches spam robots */
.join__trap { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
/* an error in the contact form is bolder, so it is not missed */
.join__note--error { color: var(--color-text); font-weight: 600; }


/* ----- flags hopping towards each other as the page is scrolled (phones only; nav.js sets --hop-x / --hop-y) ----- */
.hop { display: none; }
@media (max-width: 960px) {
  .hop { display: block; position: relative; width: 84px; height: 28px; flex: none; margin-right: 12px; pointer-events: none; }   /* 8px header gap + 12px = 20px to the burger */
  .hop__flag {
    position: absolute;
    bottom: 6px;
    height: 16px;
    border-radius: 2px;
    /* a faint, soft shadow (no outline), so the white of the Singapore flag lifts off the white header like a real flag */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.09);
    transform: translate3d(var(--hop-x, 0px), var(--hop-y, 0px), 0);
    will-change: transform;
  }
  .hop { transition: transform 0.6s cubic-bezier(0.45, 0, 0.2, 1); }
  .hop.is-met { transform: translateX(var(--hop-slide, 0px)); }
  @media (prefers-reduced-motion: reduce) { .hop { transition: none; } }
  .hop__sg { left: 0; width: 24px; }   /* sizes are fixed (3:2 and 1:1), so the flags' travel can be worked out before the images have loaded */
  .hop__ch { width: 16px; }
  .hop__ch { right: 0; transform: translate3d(calc(var(--hop-x, 0px) * -1), var(--hop-y, 0px), 0); }
}


/* ----- previous / next buttons: just the chevrons, lying over the bottom centre of the hero photo and of the events photos ----- */
.ctrl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 36px; padding: 0;   /* the box is invisible but keeps a comfortable tap target */
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: color 0.25s ease, transform 0.25s ease;
}
.ctrl:hover { color: #000; }
/* the site's own caret (assets/chevron.svg, the one beside "Integration" and "About Us"), turned to point left or right */
.ctrl .caret {
  width: 24px; height: 24px;
  background: currentColor;
  -webkit-mask: url("assets/chevron.svg") center / contain no-repeat;
  mask: url("assets/chevron.svg") center / contain no-repeat;
  transition: transform 0.25s ease;
}
.ctrl[data-dir="-1"] .caret { transform: rotate(90deg); }
.ctrl[data-dir="1"] .caret { transform: rotate(-90deg); }
.ctrl[data-dir="-1"]:hover .caret { transform: translateX(-2px) rotate(90deg); }
.ctrl[data-dir="1"]:hover .caret { transform: translateX(2px) rotate(-90deg); }
.ctrl:focus-visible { outline: 2px solid #000; outline-offset: 0; }
/* on the photo: white chevrons with a soft shadow so they read on bright and dark photos alike */
.carousel__controls {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 20; display: flex; gap: 4px;   /* above the slides (their z-index goes up to 10) */
}
.carousel__controls .ctrl,
.strip-controls .ctrl { color: rgba(255, 255, 255, 0.85); }
.carousel__controls .ctrl .caret,
.strip-controls .ctrl .caret { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
.carousel__controls .ctrl:hover,
.strip-controls .ctrl:hover { color: #fff; }
.carousel__controls .ctrl:focus-visible,
.strip-controls .ctrl:focus-visible { outline-color: #fff; }
/* the events photo strip: the same chevrons, lying over the bottom centre of the photos (pulled up by their own height, the 16px inset and the panel's 24px gap) */
.strip-controls { display: flex; gap: 4px; justify-content: center; margin-top: calc(-36px - 16px - 24px); position: relative; z-index: 3; }

@media (max-width: 960px) {
  .strip-controls { margin-top: calc(-36px - 16px - 20px); }   /* the panel's gap is 20px on small screens */
}

/* the Vision / Mission words (scroll-reveal.js sets their colour from light grey to black as you scroll) */
.reveal-word { color: #000; }

/* the four pillars under Strategy: separate soft pale-yellow pills (like the event chips) with gaps between them;
   hovering one shows its definition above */
.pillars { display: flex; flex-wrap: wrap; gap: 8px; }
.pillar {
  position: relative;
  display: inline-block;
  cursor: auto;
  padding: 5px 14px;
  background: var(--color-yellow-light);
  border-radius: var(--radius-sm);
  transition: background 0.25s ease;
}
.pillar:hover, .pillar:focus-visible { outline: 0; }   /* the colour stays the same as the active event tab; the tooltip is the hover cue */
.pillar:focus-visible { box-shadow: 0 0 0 2px #000; }
.pillar__tip {
  position: absolute;
  z-index: 6;
  bottom: calc(100% + 10px);
  left: 50%;
  width: max-content;
  max-width: min(280px, 70vw);
  padding: 12px 16px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(111, 96, 85, 0.18);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s 0.25s;
}
.pillar:hover .pillar__tip,
.pillar:focus .pillar__tip,
.pillar:focus-within .pillar__tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
@media (max-width: 960px) {
  .pillar__tip { left: 0; transform: translate(0, 4px); }
  .pillar:hover .pillar__tip, .pillar:focus .pillar__tip, .pillar:focus-within .pillar__tip { transform: translate(0, 0); }
}

/* ----- loading state between pages (phones only; nav.js adds .is-on a moment after a page link is tapped) ----- */
.page-loader { display: none; }
@media (max-width: 960px) {
  .page-loader {
    display: grid; place-items: center;
    position: fixed; inset: 0; z-index: 300;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s 0.25s;
  }
  .page-loader.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
  .page-loader__ring {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.08);
    border-top-color: #000;
    animation: page-spin 0.8s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .page-loader__ring { animation: page-pulse 1.4s ease-in-out infinite; border-color: #000; }
  }
}
@keyframes page-spin { to { transform: rotate(360deg); } }
@keyframes page-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* after a message is sent the button says "Sent!" for a few seconds, in the pale yellow of the site's chips */
.join__send--sent, .join__send--sent:disabled { background: var(--color-yellow-light); color: var(--color-text); opacity: 1; cursor: default; }
.join__send { white-space: nowrap; }

/* a hidden (screen-reader only) status line must not take part in the form's layout, or the card would grow when it is added */
.join__panel > .sr-only { position: absolute; left: 0; top: 0; }

/* "Sending…" / "Sent!" / "Send": the colour eases over, and the words appear letter by letter from left to right */
.join__send { transition: background-color 0.9s ease, color 0.9s ease; }
.join__send--sent { transition-duration: 0.5s; }                  /* turning yellow is a little quicker than easing back to grey */
.join__send-words { display: inline-flex; }
.join__send-char { display: inline-block; white-space: pre; animation: send-char-in 0.4s ease-out var(--d, 0ms) both; }
@keyframes send-char-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .join__send { transition: none; } .join__send-char { animation: none; } }