/* ==========================================================
   Skybridge Connections & Careers — homepage styles
   ========================================================== */

:root {
  /* Palette */
  --c-bg: #faf4e8;
  --c-surface: #efe6d3;
  --c-text: #2e1d14;
  --c-text-2: #5d4a3d;
  --c-primary: #3b2417;
  --c-primary-deep: #271509;
  --c-primary-ink: #faf4e8;
  --c-panel-muted: #dccfba;
  --c-connect: #a9bb98;
  --c-think: #c9a45c;
  --c-collab: #dcbfa6;
  --c-line: #ddd0b8;
  --c-dark: #2b1a11;
  --c-dark-muted: #d3c4ae;

  /* Type */
  --f-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Modular scale, ratio 1.25 */
  --step--1: 0.8rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-5: 3.052rem;

  /* 8px spacing ladder */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 2.5rem;
  --sp-6: 3rem;
  --sp-8: 4rem;
  --sp-10: 5rem;
  --sp-12: 6rem;

  /* Radius */
  --r-chip: 999px;
  --r-btn: 999px;
  --r-card: 20px;
  --r-panel: 32px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(59, 36, 23, 0.06), 0 2px 8px rgba(59, 36, 23, 0.06);
  --sh-2: 0 10px 30px rgba(59, 36, 23, 0.16);
  --sh-3: 0 24px 60px rgba(59, 36, 23, 0.26);

  --header-h: 68px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }

[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-2)); }

.container {
  width: min(100% - 2rem, 1200px);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -100px;
  z-index: 100;
  background: var(--c-primary);
  color: var(--c-primary-ink);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-btn);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: var(--sp-1); }

:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Icons ---------- */
.icon { display: inline-block; flex-shrink: 0; vertical-align: middle; max-width: 96px; max-height: 96px; }
.icon-sm { width: 1.1rem; height: 1.1rem; }
.icon-md { width: 1.5rem; height: 1.5rem; }
.icon-lg { width: 2.25rem; height: 2.25rem; }

/* ---------- Phase chips (signature) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-chip);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.7rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text);
  white-space: nowrap;
  text-decoration: none;
}
.chip-connect { background: var(--c-connect); }
.chip-think { background: var(--c-think); }
.chip-collaborate { background: var(--c-collab); }
.chip-lg { font-size: 0.8rem; padding: 0.45rem 0.8rem; }

.chip-link {
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
  box-shadow: inset 0 0 0 2px transparent;
}
.chip-link:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 2px var(--c-text);
}
.chip-link:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 3px;
}

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 0.85rem 1.4rem;
  border-radius: var(--r-btn);
  border: 2px solid transparent;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn-primary {
  background: var(--c-primary);
  color: var(--c-primary-ink);
  box-shadow: var(--sh-2);
}
.btn-primary:hover {
  background: var(--c-primary-deep);
  color: var(--c-primary-ink);
  transform: translateY(-2px);
}
.btn-primary:focus-visible {
  outline: 3px solid var(--c-text);
  outline-offset: 3px;
}
.btn-sm { padding: 0.55rem 1rem; font-size: 0.9rem; box-shadow: none; }
.btn-block { width: 100%; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(59, 36, 23, 0.35);
  transition: text-decoration-color 0.18s var(--ease), gap 0.18s var(--ease);
}
.text-link:hover { text-decoration-color: var(--c-primary); gap: 0.65rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--header-h);
  position: relative;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--c-text);
}
.brand-mark { color: var(--c-primary); display: inline-flex; }
.brand-bridge { width: 40px; height: 24px; }
.brand-text {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  line-height: 1.05;
  display: flex;
  flex-direction: column;
}
.brand-sub {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--c-text-2);
}
.brand:hover .brand-text { color: var(--c-primary); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.nav-link {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--c-text);
  border-radius: 8px;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.nav-link:hover { background: var(--c-surface); color: var(--c-primary); }
.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--c-primary);
  box-shadow: inset 0 -2px 0 var(--c-primary);
  border-radius: 0;
}
.nav-cta-item { margin-left: var(--sp-1); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-btn);
  border: 2px solid var(--c-line);
  background: var(--c-bg);
  color: var(--c-text);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--c-primary); }
.nav-toggle-bars { display: grid; gap: 4px; }
.nav-toggle-bars span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: -1rem;
    right: -1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 16px 30px rgba(59, 36, 23, 0.14);
  }
  .nav-menu.nav-open { display: flex; }
  .nav-menu li { width: 100%; }
  .nav-link {
    display: block;
    padding: 0.85rem 0.75rem;
    color: var(--c-text);
    font-size: 1.05rem;
    border-radius: 8px;
  }
  .nav-link.active,
  .nav-link[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--c-primary);
    background: var(--c-surface);
    border-radius: 0 8px 8px 0;
  }
  .nav-cta-item { margin: var(--sp-1) 0 0; }
  .nav-cta-item .btn { width: 100%; padding: 0.85rem 1rem; }
}

/* ---------- Hero ---------- */
.hero { padding: var(--sp-8) 0 var(--sp-10); }
.hero-grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--sp-6);
  align-items: center;
}
.hero-kicker {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--c-primary);
  margin-bottom: var(--sp-2);
}
.hero-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--c-text);
}
.hero-lede {
  margin-top: var(--sp-3);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--c-text-2);
  max-width: 34rem;
}
.hero-actions {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
}

/* Event panel */
.event-panel {
  background: var(--c-primary);
  color: var(--c-primary-ink);
  border-radius: var(--r-panel);
  padding: var(--sp-3);
  box-shadow: var(--sh-3);
}
.event-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.event-panel-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--step-2);
  color: #ffffff;
}
.event-panel-source {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-panel-muted);
}
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-connect);
  box-shadow: 0 0 0 3px rgba(169, 187, 152, 0.35);
}

.board { display: grid; }
.board-row + .board-row { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.board-link {
  display: grid;
  grid-template-columns: 4.25rem 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-1);
  margin: 0 calc(var(--sp-1) * -1);
  color: #ffffff;
  text-decoration: none;
  border-radius: var(--r-card);
  transition: background-color 0.15s var(--ease);
}
.board-link:hover { background: var(--c-primary-deep); }
.board-link:hover .board-arrow { transform: translateX(4px); }
.board-link:focus-visible { outline: 3px solid #ffffff; outline-offset: 0; }

.board-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--c-primary-deep);
  border-radius: 10px;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.board-day {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.04em;
}
.board-month {
  margin-top: 0.3rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-panel-muted);
}
.board-info { display: grid; gap: 0.35rem; justify-items: start; min-width: 0; }
.board-name {
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  color: #ffffff;
}
.board-meta { font-size: 0.82rem; color: var(--c-panel-muted); }
.board-arrow { color: #ffffff; transition: transform 0.18s var(--ease); }

.event-panel-all {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
}
.event-panel-all:hover { text-decoration: underline; text-underline-offset: 4px; }
.event-panel-all:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ---------- Section shared ---------- */
.section-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2vw, var(--step-4));
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--c-text);
}
.section-intro {
  margin-top: var(--sp-2);
  font-size: 1.08rem;
  color: var(--c-text-2);
  max-width: 40rem;
}

/* ---------- About ---------- */
.about { padding: var(--sp-8) 0; border-top: 1px solid var(--c-line); }
.about-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-6);
  align-items: start;
}
.about-statement {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, var(--step-3));
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--c-text);
}
.about-body { display: grid; gap: var(--sp-2); color: var(--c-text-2); font-size: 1.05rem; }
.about-lead { font-size: var(--step-1); line-height: 1.55; color: var(--c-text); }

/* ---------- Phases ---------- */
.phases {
  background: var(--c-surface);
  padding: var(--sp-10) 0 var(--sp-10);
}
.phases-head { max-width: 46rem; }

.bridge-caption {
  margin-top: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-primary);
}
.bridge-caption-line {
  flex: 1;
  height: 0;
  border-top: 2px dashed rgba(201, 164, 92, 0.8);
}

.phase-grid {
  position: relative;
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
/* The skybridge: one line threading the three phase chips */
.phase-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--sp-3);
  right: var(--sp-3);
  height: 4px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--c-connect) 0 33%, var(--c-think) 33% 66%, var(--c-collab) 66% 100%);
  border-radius: 4px;
  z-index: 1;
}
.phase-card {
  position: relative;
  background: var(--c-bg);
  border-radius: var(--r-card);
  padding: var(--sp-5) var(--sp-3) var(--sp-3);
  box-shadow: var(--sh-1);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  border: 1px solid var(--c-line);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.phase-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.phase-card > .chip {
  position: absolute;
  top: 0;
  left: var(--sp-3);
  transform: translateY(-50%);
  z-index: 2;
  box-shadow: 0 0 0 4px var(--c-surface);
}
.phase-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.phase-lead { color: var(--c-text); font-weight: 600; }
.phase-details { display: grid; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--c-line); }
.phase-details dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.phase-details dd { color: var(--c-text-2); font-size: 0.95rem; margin-top: 0.15rem; }
.phase-link {
  margin-top: auto;
  padding-top: var(--sp-1);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--c-primary);
  text-decoration: none;
}
.phase-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Gallery ---------- */
.gallery { background: var(--c-text); }
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.gallery-item { position: relative; overflow: hidden; }
.gallery-item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.5s var(--ease);
}
.gallery-item:nth-child(2) img { object-position: 40% 40%; }
.gallery-item:nth-child(3) img { object-position: 50% 55%; }
.gallery-item:hover img { transform: scale(1.03); }
.gallery-tag {
  position: absolute;
  left: var(--sp-2);
  bottom: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.3rem 0.3rem 0.3rem;
  background: #ffffff;
  border-radius: 8px;
}
.gallery-note {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-text-2);
  padding-right: 0.4rem;
}

/* ---------- Directory ---------- */
.directory { padding: var(--sp-10) 0 var(--sp-8); }
.phase-jump {
  margin-top: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--c-text);
}
.phase-jump-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--c-text-2);
  flex-shrink: 0;
}
.phase-jump-list {
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px;
}
.phase-jump-list::-webkit-scrollbar { display: none; }
.phase-jump-list .chip { font-size: 0.78rem; padding: 0.55rem 0.9rem; }

.dir-groups { display: grid; }
.dir-group {
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-line);
}
.dir-group-head { display: grid; gap: var(--sp-1); align-content: start; justify-items: start; }
.dir-group-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
}
.dir-list { display: grid; gap: var(--sp-1); }
.dir-row {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--c-surface);
  border-radius: var(--r-card);
}
.dir-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.dir-day {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 0.04em;
}
.dir-month {
  margin-top: 0.25rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-2);
}
.dir-text { color: var(--c-text-2); font-size: 0.95rem; }
.dir-action {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--c-primary);
  text-decoration: none;
  padding: 0.55rem 0.9rem;
  border: 2px solid var(--c-primary);
  border-radius: var(--r-btn);
  background: var(--c-bg);
  white-space: nowrap;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.dir-action:hover { background: var(--c-primary); color: var(--c-primary-ink); }

.directory-foot {
  margin-top: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.directory-foot p { font-weight: 600; color: var(--c-text); }

/* ---------- Impact / testimonials ---------- */
.impact { padding: var(--sp-8) 0; border-top: 1px solid var(--c-line); }
.impact-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-6);
  align-items: start;
}
.impact-intro { display: grid; gap: var(--sp-2); justify-items: start; }
.impact-intro p { color: var(--c-text-2); font-size: 1.05rem; }
.impact-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--sp-4);
}
.impact-item {
  padding: var(--sp-2) 0 var(--sp-3);
  border-top: 2px solid var(--c-text);
}
.impact-item dt {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--c-text);
}
.impact-item dd { margin-top: var(--sp-1); color: var(--c-text-2); font-size: 0.95rem; }

/* ---------- Contact ---------- */
.contact { padding: 0 0 var(--sp-10); }
.contact-panel {
  background: var(--c-surface);
  border-radius: var(--r-panel);
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--sp-6);
  align-items: start;
}
.contact-copy { display: grid; gap: var(--sp-2); }
.contact-copy > p { color: var(--c-text-2); font-size: 1.05rem; }
.contact-points { display: grid; gap: var(--sp-1); margin-top: var(--sp-1); }
.contact-points li {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: 600;
  color: var(--c-text);
  font-size: 0.95rem;
}

.contact-form {
  display: grid;
  gap: var(--sp-2);
  background: var(--c-bg);
  padding: var(--sp-4);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.form-group { display: grid; gap: 0.4rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.form-label { font-weight: 700; font-size: 0.9rem; color: var(--c-text); }
.form-input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--c-text);
  background: #ffffff;
  border: 2px solid var(--c-line);
  border-radius: var(--r-btn);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.form-input:hover { border-color: #c9a45c; }
.form-input:focus,
.form-input:focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(201, 164, 92, 0.35);
}
textarea.form-input { resize: vertical; min-height: 7rem; }
select.form-input { appearance: auto; }
.form-help { font-size: 0.82rem; color: var(--c-text-2); }
.form-choice { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--c-text); }

.ew-bot-protection {
  position: absolute !important;
  left: -10000px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-dark);
  color: #ffffff;
  padding: var(--sp-8) 0 var(--sp-4);
}
.footer-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sp-6);
}
.footer-brand { display: grid; gap: var(--sp-2); justify-items: start; }
.footer-wordmark {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.6vw, var(--step-3));
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #ffffff;
  text-decoration: none;
}
.footer-wordmark:hover { color: var(--c-connect); }
.footer-wordmark:focus-visible { outline-color: var(--c-connect); }
.footer-tagline { font-weight: 700; color: var(--c-connect); }
.footer-story { color: var(--c-dark-muted); max-width: 32rem; }
.footer-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.footer-chips .chip-link:hover { box-shadow: inset 0 0 0 2px #ffffff; }
.footer-chips .chip-link:focus-visible { outline-color: #ffffff; }

.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.footer-heading {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: var(--sp-2);
}
.footer-text { color: var(--c-dark-muted); font-size: 0.95rem; margin-bottom: var(--sp-1); }
.footer-links { display: grid; gap: 0.35rem; }
.footer-links a {
  color: var(--c-dark-muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.15s var(--ease);
}
.footer-links a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; }
.footer-links a:focus-visible { outline-color: #ffffff; }

.footer-bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
}
.copyright,
.footer-credit { font-size: 0.85rem; color: var(--c-dark-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .dir-group { grid-template-columns: 1fr; gap: var(--sp-2); }
  .contact-panel { grid-template-columns: 1fr; padding: var(--sp-4); }
  .impact-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: var(--sp-3); }

  .phase-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    padding-left: var(--sp-3);
  }
  .phase-grid::before {
    top: 0;
    bottom: 0;
    left: 6px;
    right: auto;
    width: 4px;
    height: auto;
    transform: none;
    background: linear-gradient(180deg, var(--c-connect) 0 33%, var(--c-think) 33% 66%, var(--c-collab) 66% 100%);
  }
}

@media (max-width: 768px) {
  .hero { padding: var(--sp-4) 0 var(--sp-6); }
  .hero-lede { font-size: 1.08rem; margin-top: var(--sp-2); }
  .hero-actions { margin-top: var(--sp-3); }
  .event-panel { padding: var(--sp-2); border-radius: 16px; }
  .board-link { grid-template-columns: 3.5rem 1fr auto; gap: 0.75rem; }
  .board-day { font-size: 1.3rem; }

  .phases, .directory { padding: var(--sp-8) 0; }

  .gallery-strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .gallery-item { scroll-snap-align: start; }

  .dir-row { grid-template-columns: 3.5rem 1fr; }
  .dir-action { grid-column: 1 / -1; justify-self: start; }
  .directory-foot { flex-direction: column; align-items: flex-start; }

  .impact-list { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-panel { padding: var(--sp-3); gap: var(--sp-4); }
  .contact-form { padding: var(--sp-3); }
  .footer-cols { grid-template-columns: 1fr; gap: var(--sp-3); }
}

@media (max-width: 420px) {
  .brand-sub { display: none; }
  .phase-jump { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .phase-card:hover, .btn-primary:hover, .chip-link:hover { transform: none; }
  .gallery-item:hover img { transform: none; }
}
```

**About the build**

- **Event dates:** I didn't have a link to your Eventbrite page or any real event details. So instead of making up dates, the violet "Coming up" panel and the events list show one row per phase, with "--" where the date will go. Both are set up to pull your live events from Eventbrite and link each one to its sign-up page, but that only works once your Eventbrite page is connected. For now, the "Ask about the next date" buttons go to the contact form. **Please send your Eventbrite URL so we can connect it.**
- **Testimonials:** You haven't sent any attendee quotes yet, so I didn't write any. The section covers the four things you wanted the stories to show: career opportunities, projects and skills, career clarity, and mentor connections. It also says real stories are coming and has a link that invites past attendees to share theirs. **Send real quotes and they can go in as colourful cards, each tagged with the phase the person attended.**
- **Contact details:** The footer has no email, phone number or address because you didn't give any. It points people to the contact form instead.
- **Photos:** The three stock photos are labelled "illustrative photo" so they aren't mistaken for pictures of your own events. I also had to guess which phase each photo fits, since none of them shows a Skybridge event. The one-on-one conversation photo is tagged THINK, which is the weakest match.
- **Order of sections:** The page runs: opening, about, the three phases, photos, events list, testimonials, contact. I put the events list before testimonials because that's the order you asked for, even though the design plan had testimonials first.
- **Text:** Your About paragraph is used exactly as you wrote it. The three phase descriptions and the names CONNECT, THINK and COLLABORATE also appear exactly as you gave them.

**Design**

- **Opening:** No photo. The headline "Your next mentor is on the calendar." sits next to a violet panel listing your upcoming events, with the date column styled like an airport departures board.
- **The three phases:** Each has its own colour tag (lime for CONNECT, coral for THINK, cyan for COLLABORATE). The tags appear throughout the page, and a colour-coded line links the three phase cards to show the monthly order.

/* Flyer-inspired refinements */
.hero-title, .section-title, .about-statement { font-weight: 600; letter-spacing: -0.01em; }
.hero-title { line-height: 1.08; }
.chip { font-family: var(--f-body); font-weight: 700; letter-spacing: 0.1em; color: #2e1d14; }
.brand-text { font-weight: 700; letter-spacing: 0; }
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  width: 560px; height: 560px;
  right: -180px; top: -240px;
  border-radius: 50%;
  background: rgba(169, 187, 152, 0.3);
  z-index: 0;
}
.hero-grid { position: relative; z-index: 1; }
.phases { border-radius: 48px 48px 0 0; }
.gallery-item img { border-radius: 0; }
.form-input { background: #fffdf8; }
.btn-primary:hover { color: var(--c-primary-ink); }
.site-header { background: var(--c-bg); }

/* Simple rounded photo cards */
.gallery { background: var(--c-bg); padding: var(--sp-8) 0 var(--sp-2); }
.gallery-strip { width: min(100% - 2rem, 1200px); margin: 0 auto; gap: var(--sp-3); }
.gallery-item { border-radius: var(--r-card); box-shadow: var(--sh-1); }
.gallery-item img { aspect-ratio: 4 / 5; border-radius: var(--r-card); object-position: 50% 50%; }
.gallery-item:nth-child(2) img, .gallery-item:nth-child(3) img { object-position: 50% 50%; }
.gallery-tag { left: var(--sp-2); bottom: var(--sp-2); background: var(--c-bg); border-radius: var(--r-chip); padding: 0.3rem; }
@media (max-width: 768px) { .gallery-strip { width: 100%; padding: 0 1rem; box-sizing: border-box; grid-auto-columns: 82%; gap: var(--sp-2); } }

/* Gallery: clear, full-photo cards with caption below */
.gallery { padding: var(--sp-8) 0 var(--sp-6); }
.gallery-head { margin-bottom: var(--sp-4); }
.gallery-strip { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; width: min(100% - 2rem, 1200px); margin: 0 auto; padding: 0; gap: var(--sp-3); }
.gallery-item { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-1); }
.gallery-item img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 0; }
.gallery-tag { position: static; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: var(--sp-2); background: transparent; border-radius: 0; }
.gallery-note { padding: 0; }
@media (max-width: 860px) {
  .gallery-strip { grid-template-columns: 1fr; width: min(100% - 2rem, 560px); padding: 0; overflow: visible; }
}

/* EasyWebsites deterministic missing-class coverage */
.footer-inner {
  box-sizing: border-box;
  max-width: 100%;
}

.phase-card-collaborate {
  box-sizing: border-box;
  max-width: 100%;
}

.phase-card-connect {
  box-sizing: border-box;
  max-width: 100%;
}

.phase-card-think {
  box-sizing: border-box;
  max-width: 100%;
}

/* EasyWebsites runtime-contract: visible-default-v1 */
/* EasyWebsites deterministic runtime safety styles v7 */
[hidden] { display: none !important; }
/* Hosting badge: retain desktop placement and override legacy inline fixed
   positioning on phones. The Worker places this container inside the footer. */
[data-ew-badge] { position: fixed !important; bottom: 14px; left: 14px; }
@media (max-width: 639.98px) {
  [data-ew-badge-container] { display: block !important; flex: 0 0 100%; grid-column: 1 / -1; width: 100%; margin-top: 1rem; text-align: center; }
  footer:has(> [data-ew-badge-container]) { flex-wrap: wrap; }
  [data-ew-badge-footer] { padding: 1rem; }
  [data-ew-badge] { position: static !important; inset: auto !important; transform: none !important; max-width: 100%; box-sizing: border-box; }
}
.ew-bot-protection, [data-ew-bot-protection="true"] { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 0 !important; width: 0 !important; overflow: hidden !important; }
.form-payment-note { font-size: .85rem; opacity: .75; margin: .5rem 0 0; }
/* Managed-form vocabulary baseline (F3): zero-specificity fallbacks so the
   platform-rendered .form-group/.form-label/.form-input/.form-help/.form-choice
   markup stays usable even when no page CSS styles it (the renderer re-emits
   these bare classes on every form-config change). Any site rule outranks
   :where(); the light input surface stays readable on dark and light pages. */
:where(.form-group) { display: grid; gap: 0.4rem; margin: 0 0 1.1rem; padding: 0; border: 0; min-width: 0; }
:where(.form-label) { display: block; font-weight: 600; }
:where(.form-input) { display: block; width: 100%; box-sizing: border-box; padding: 0.65rem 0.8rem; border: 1px solid rgba(17, 24, 39, 0.35); border-radius: 0.5rem; background: #ffffff; color: #111827; font: inherit; }
:where(textarea.form-input) { min-height: 7rem; resize: vertical; }
:where(.form-help) { font-size: 0.85rem; opacity: 0.75; margin: 0.1rem 0 0; }
:where(.form-choice) { display: flex; align-items: center; gap: 0.5rem; }
/* Platform-injected © line baseline (v4): zero-specificity so any site rule
   wins. color: inherit + opacity rides the footer's own foreground, so the one
   rule stays readable on both light and dark footers; the .copyright-year span
   is inline and inherits everything, so it needs no rule of its own. */
:where(footer .copyright, .copyright) { margin: 1.25rem 0 0; font-size: 0.85em; line-height: 1.6; color: inherit; opacity: 0.75; text-align: center; }
/* Form feedback surfaces (FX-77/FX-112, v5): OPAQUE neutral panels — near-white
   background, near-black text, hairline border — so they read on dark and light
   cards alike. The old translucent emerald pair was invisible on an indigo
   booking card because the contrast gates never see the post-submit state. */
.ew-form-message { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 0.75rem; font-weight: 600; line-height: 1.45; background: var(--ew-panel-bg, #ffffff); color: var(--ew-panel-fg, #111827); border: 1px solid var(--ew-panel-line, rgba(17, 24, 39, 0.18)); text-align: left; }
.ew-form-message-success { border-left: 4px solid var(--ew-panel-fg, #111827); }
.ew-form-message-error { color: #991b1b; border-left: 4px solid #991b1b; }
.ew-field-error { display: block; margin: 0.35rem 0 0; padding: 0.35rem 0.6rem; border-radius: 0.5rem; font-size: 0.85rem; font-weight: 600; line-height: 1.4; background: var(--ew-panel-bg, #ffffff); color: #991b1b; border: 1px solid var(--ew-panel-line, rgba(17, 24, 39, 0.18)); }
:where(.form-input[aria-invalid="true"]) { box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.55); }
.ew-form-confirmation { margin-top: 0.5rem; padding: 1.25rem 1.25rem 1.1rem; border-radius: 0.9rem; background: var(--ew-panel-bg, #ffffff); color: var(--ew-panel-fg, #111827); border: 1px solid var(--ew-panel-line, rgba(17, 24, 39, 0.18)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); text-align: left; line-height: 1.5; }
.ew-form-confirmation:focus { outline: 2px solid var(--ew-panel-fg, #111827); outline-offset: 2px; }
.ew-form-confirmation-title { margin: 0 0 0.35rem; font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: inherit; }
.ew-form-confirmation-body { margin: 0 0 0.85rem; color: inherit; }
.ew-form-confirmation-summary { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.9rem; margin: 0 0 0.85rem; font-size: 0.95rem; }
.ew-form-confirmation-summary dt { margin: 0; font-weight: 600; opacity: 0.8; }
.ew-form-confirmation-summary dd { margin: 0; }
.ew-form-confirmation-note { margin: 0 0 0.9rem; font-size: 0.9rem; opacity: 0.85; }
.ew-form-confirmation-again { font: inherit; font-weight: 600; cursor: pointer; padding: 0.55rem 0.9rem; border-radius: 0.6rem; border: 1px solid rgba(17, 24, 39, 0.35); background: transparent; color: inherit; }
form.ew-form-submitted > :not(.ew-form-confirmation) { display: none !important; }
/* Provider chips promoted to real controls (FX-82): zero-specificity UA reset so
   the AI's own chip classes keep winning; never all:unset. */
:where(button[data-ew-provider-pick]) { appearance: none; -webkit-appearance: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
[data-ew-provider-indicator] { margin-inline-start: .5em; font-weight: 700; }
[data-ew-provider-indicator][hidden] { display: none !important; }
button[data-ew-provider-pick][aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: 2px; }
/* PHI-safe form notice (healthcare sites only render the element). Additive +
   inert elsewhere, so this rule intentionally does NOT bump the CSS marker:
   the plain-paragraph fallback on pre-existing snapshots is acceptable. */
.ew-form-privacy-note { margin: 0.75rem 0; font-size: 0.85em; line-height: 1.5; opacity: 0.75; }
.ew-lightbox { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.86); padding: 2rem; }
.ew-lightbox.open { display: flex; }
.ew-lightbox img { max-width: min(92vw, 1200px); max-height: 86vh; object-fit: contain; border-radius: 12px; box-shadow: 0 24px 80px rgba(0,0,0,0.45); }
.ew-lightbox button { position: absolute; border: 0; background: rgba(255,255,255,0.14); color: #fff; cursor: pointer; border-radius: 999px; width: 44px; height: 44px; font-size: 24px; }
.ew-lightbox-close { top: 1rem; right: 1rem; }
.ew-lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.ew-lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 768px) {
  .nav-menu { display: none; }
  /* FX-92: the open state must win over an AI `display: none !important`
     on the menu itself; the runtime also reveals hidden wrappers (below). */
  .nav-menu.nav-open { display: flex !important; }
  .nav-toggle { display: inline-flex; }
  /* A wrapper between the header and the menu that the AI hid (e.g.
     `.site-header nav { display: none !important }`) is marked by the runtime
     while the menu is open; triple-class specificity + !important outranks any
     realistic page rule. */
  .ew-nav-unhidden.ew-nav-unhidden.ew-nav-unhidden { display: block !important; pointer-events: none; }
  .ew-nav-unhidden .nav-menu, .ew-nav-unhidden .nav-menu * { pointer-events: auto; }
  /* The revealed wrapper is often position:absolute; inset:0 — keep the toggle
     clickable above it (zero specificity so AI toggle styles still win). */
  :where(header .nav-toggle, .site-header .nav-toggle) { position: relative; z-index: 2; }
  /* Zero-specificity open-panel fallback: fills only properties the page CSS
     never declares, so an intentionally styled menu is untouched. Prevents a
     transparent white-on-white open menu when the AI omits panel styling. */
  :where(.nav-menu.nav-open) {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    background: var(--ew-nav-open-bg, #ffffff);
    color: var(--ew-nav-open-fg, #111827);
    padding: 1rem;
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  }
  :where(header:has(.nav-menu.nav-open), .site-header:has(.nav-menu.nav-open)) { position: relative; }
}
@media (min-width: 769px) {
  .nav-toggle { display: none; }
  .site-header--desktop-drawer .nav-toggle { display: inline-flex; }
}
/* Opt-in interaction primitives (marquee, compare, carousel). Inert unless the
   matching data attributes are used; count-up needs no CSS. */
[data-ew-marquee] { display: flex; overflow: hidden; gap: var(--ew-marquee-gap, 2rem); }
[data-ew-marquee] > * { display: flex; gap: var(--ew-marquee-gap, 2rem); flex-shrink: 0; min-width: max-content; }
.ew-marquee-animated > * { animation: ew-marquee-scroll var(--ew-marquee-duration, 32s) linear infinite; }
.ew-marquee-animated:hover > *, .ew-marquee-animated:focus-within > * { animation-play-state: paused; }
@keyframes ew-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--ew-marquee-gap, 2rem))); } }
@media (prefers-reduced-motion: reduce) { .ew-marquee-animated > * { animation: none; } }
[data-ew-compare] { position: relative; overflow: hidden; --ew-compare-position: 50%; }
[data-ew-compare] img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-ew-compare] .ew-compare-after { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--ew-compare-position)) 0 0); }
[data-ew-compare] input[type="range"] { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: calc(100% - 1.5rem); margin: 0; z-index: 2; }
[data-ew-carousel] { position: relative; }
[data-ew-carousel] .ew-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: var(--ew-carousel-gap, 1rem); scrollbar-width: none; }
[data-ew-carousel] .ew-carousel-track::-webkit-scrollbar { display: none; }
[data-ew-carousel] .ew-carousel-track > * { scroll-snap-align: start; flex-shrink: 0; }
.ew-carousel-prev, .ew-carousel-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(15, 23, 42, 0.65); color: #ffffff; font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.ew-carousel-prev:hover, .ew-carousel-next:hover { background: rgba(15, 23, 42, 0.85); }
.ew-carousel-prev { left: 0.75rem; }
.ew-carousel-next { right: 0.75rem; }
/* end EasyWebsites deterministic runtime safety styles */

/* ew-edit:header-footer */
.brand-logo{height:52px;width:auto;display:block;border-radius:8px}
.footer-logo{height:72px;width:auto;display:block;border-radius:10px;background:#fff}
@media(max-width:700px){.brand-logo{height:44px}}
/* /ew-edit:header-footer */
/* ew-global-component:instagram-float */
.ig-float{position:fixed;right:20px;bottom:20px;z-index:900;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#3b2518;color:#f6efe2;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .2s ease,background .2s ease}.ig-float:hover,.ig-float:focus-visible{transform:scale(1.08);background:#b98e55;color:#3b2518}
/* /ew-global-component:instagram-float */