/* ==========================================================================
   FOAP — Foundation for Orthodontic Aligners Pakistan
   ========================================================================== */

/* ---------- Poppins, self-hosted ----------
   Served from /fonts, no third-party request. The unicode-range on each face
   means a browser only downloads the subset it actually needs — for English
   copy that is the latin files alone (~31 KB across all four weights). */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* the blue of the FOAP logo (public/foap-logo.svg); the shades below sit
     on the same hue */
  --blue: #2A5CAA;
  --blue-dark: #143B79;
  --blue-tint: #E4ECF8;
  --green: #46A96B;

  --bg: #ffffff;
  --bg-alt: #EFEFEF;
  --text: #2B2B2B;
  --muted: #5F6B7A;
  --line: #E2E2E2;

  --radius: 5px;
  --container: 1140px;
  --gap: 1.75rem;

  --font: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;

  /* ---------- Type scale ----------
     Four body steps and five display steps. Every font-size on the page
     resolves to one of these — no one-off values. */

  --fs-xs:      .8125rem;   /* 13px — captions, legal, form notes          */
  --fs-sm:      .875rem;    /* 14px — compact body, UI labels, buttons     */
  --fs-base:    1rem;       /* 16px — standard body copy and form inputs   */
  --fs-lg:      1.125rem;   /* 18px — lead paragraphs, card headings       */

  --fs-h3:      1.125rem;   /* 18px */
  --fs-h3-lg:   1.25rem;    /* 20px */
  --fs-h2:      clamp(1.5rem, 2.4vw, 1.9rem);
  --fs-h2-lg:   clamp(1.75rem, 2.8vw, 2.15rem);
  --fs-h1:      clamp(1.75rem, 3.2vw, 2.75rem);
  --fs-display: clamp(2.75rem, 4.4vw, 3.75rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* honour an OS-level request for less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  /* Poppins has a tall x-height, so it needs a little more leading than a
     system sans to avoid looking cramped */
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Poppins is geometric and runs wide — large sizes need negative tracking
   or headings drift apart */
h1, h2, h3 {
  line-height: 1.3;
  margin: 0 0 .75rem;
  font-weight: 600;
  letter-spacing: -.015em;
}

p { margin: 0 0 1rem; }

a { color: var(--blue); }

/* every interactive element needs a visible ring, not just form fields */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--blue);
  color: #fff;
  padding: .6rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Layout helpers ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.container.narrow { max-width: 760px; }

.center { text-align: center; }

.section { padding: 3.75rem 0; }

.section-alt { background: var(--bg-alt); }

/* the original sets section headings in a medium weight, not bold */
.section-title {
  text-align: center;
  font-size: var(--fs-h2-lg);
  font-weight: 500;
  letter-spacing: -.02em;
  margin-bottom: 2.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

/* ---------- Image placeholders ---------- */

.ph {
  position: relative;
  background: linear-gradient(135deg, #DFE4EA 0%, #CBD3DC 100%);
  border-radius: var(--radius);
  overflow: hidden;
}

.ph::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: #6B7684;
}

.ph-wide     { aspect-ratio: 16 / 10; }
.ph-4x3      { aspect-ratio: 4 / 3; }
.ph-16x9     { aspect-ratio: 16 / 9; }
.ph-portrait { aspect-ratio: 3 / 4; }
.ph-tall     { aspect-ratio: 3 / 4; }

/* ---------- Real images ---------- */

.media {
  width: 100%;
  height: auto;          /* required: the width/height attributes would otherwise
                            pin the height and cancel aspect-ratio below */
  display: block;
  border-radius: var(--radius);
  object-fit: cover;
  background: #E4E8ED;
}

/* aspect ratios chosen to match each source file, so nothing is cropped hard */
.media-hero     { aspect-ratio: 16 / 10; }
.media-intro    { aspect-ratio: 5 / 3; }
.media-4x3      { aspect-ratio: 4 / 3; }
.media-portrait { aspect-ratio: 6 / 7; }
.media-contact  { aspect-ratio: 4 / 5; }

/* cards already clip their own corners */
.card .media,
.card .ph { border-radius: 0; }

/* ---------- Buttons ---------- */

/* min-height 44px is the accessible touch-target floor */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .68rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: inherit;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .06s; }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }

.btn-light { background: #fff; color: var(--blue); }
.btn-light:hover { background: var(--blue-tint); }

.btn-outline { background: transparent; border-color: var(--blue); color: var(--blue); }
.btn-outline:hover { background: var(--blue-tint); }

.btn-accent { background: var(--green); color: #fff; }
.btn-accent:hover { filter: brightness(.93); }

/* smaller label, but the tap area stays at the 44px floor */
.btn-sm { padding: .45rem 1.15rem; }
.btn-block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.topbar { height: 5px; background: var(--blue); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 62px;
}

.logo {
  display: flex;
  align-items: center;
  color: var(--blue);
  text-decoration: none;
  margin-right: auto;
}
.logo .logo-mark { height: 26px; }

.nav { display: flex; align-items: center; gap: 2.25rem; }

/* current page is highlighted in the nav */
.nav a[aria-current="page"] { color: var(--blue); }

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-size: var(--fs-sm);
  text-decoration: none;
  white-space: nowrap;   /* "News & Events" must never break over two lines */
}
.nav a:hover { color: var(--blue); }

/* specificity must beat `.nav a` below, or this shows up on desktop too */
.nav a.nav-cta-mobile { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 36px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--text);
}

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

.hero { padding: 2.25rem 0 4rem; }

/* the hero runs wider than the rest of the page, as in the original */
.hero .container { max-width: 1560px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4.5%, 4rem);
}

.hero-card {
  background: var(--blue);
  color: #fff;
  padding: clamp(1.8rem, 3vw, 2.8rem) clamp(1.5rem, 2.6vw, 2.5rem);
  border-radius: 14px;
}

.hero-card h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.22;
  margin-bottom: 1.1rem;
}

.hero-tagline {
  font-size: var(--fs-base);
  line-height: 1.55;
  opacity: .95;
  margin-bottom: 1.8rem;
}

.media-hero { border-radius: 12px; }

/* ---------- Introduction ---------- */

.intro-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: 2.5rem;
}

.intro-copy h2 { font-size: var(--fs-h2); }

.intro-copy p { color: var(--muted); font-size: var(--fs-lg); }

/* ---------- Cards (About, News) ---------- */

.card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-body { padding: 1.15rem 1.15rem 1.35rem; }

.card-body h3 { font-size: var(--fs-h3); }

.card-body p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1rem; }

.card-body .btn { margin-top: auto; }

/* ---------- Leadership ---------- */

.leader-grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  align-items: center;
  gap: 3rem;
}

.leader-grid-reverse { grid-template-columns: 1.28fr 0.72fr; }

/* source portraits are already black and white and carry their own thin frame */
.leader-portrait .media {
  box-shadow: 0 3px 16px rgba(0, 0, 0, .16);
}

.leader-copy p { font-size: var(--fs-base); color: var(--muted); }

.leader-name {
  font-size: var(--fs-h3-lg);
  font-weight: 700;
  color: var(--text);
  margin: 1.25rem 0 0;
}

.leader-role {
  font-size: var(--fs-sm);
  color: var(--blue);
  margin: 0;
}

/* ---------- Membership ---------- */

.membership-hook {
  color: var(--blue);
  font-weight: 600;
  font-size: var(--fs-lg);
  margin-bottom: 1rem;
}

.membership p { font-size: var(--fs-base); color: var(--muted); }

.membership .btn { margin-top: .75rem; }

/* ---------- Tiles (Education, International) ---------- */

.tile {
  padding: 1.6rem 1.5rem;
  border-radius: var(--radius);
}

.tile h3 { font-size: var(--fs-h3); }

.tile p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

.tile-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 1rem;
  fill: none;
  stroke: #4A4A4A;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* was #F1F1F1 — invisible against the #EFEFEF section behind it */
.tile-grey     { background: #E2E8EE; }
.tile-peach    { background: #FBEBDC; }
.tile-blue     { background: #DCE9F7; }
.tile-bordered { background: #fff; border: 1px solid var(--line); }

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

/* one wide photograph with the three cards floating over its right side */
.events-stage {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.events-bg {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: #E4E8ED;
}

.events-cards {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: .8rem;
  padding: 1.5rem clamp(1rem, 4%, 3.5rem);
}

.event-card {
  width: min(360px, 42%);
  padding: 1.1rem 1.3rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
  transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.event-card h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  margin-bottom: .3rem;
  transition: color .3s ease;
}

.event-card p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  transition: color .3s ease;
}

/* hover turns a card blue, matching the original's highlighted state */
.event-card:hover {
  background: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}

.event-card:hover h3 { color: #fff; }
.event-card:hover p { color: rgba(255, 255, 255, .92); }

/* ---------- Public awareness (numbered) ---------- */

.numbered {
  position: relative;
  aspect-ratio: .52;
  padding: 1.4rem 1.25rem;
  border-radius: 14px;
  background-color: #232323;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

/* photo sits on its own layer so the greyscale filter never touches the text */
.numbered::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

/* readability wash over the photo */
.numbered::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 18, 18, .30) 0%, rgba(10, 10, 10, .86) 100%);
}

.numbered > * { position: relative; z-index: 1; }

.aw-01::before { background-image: url("/images/awareness-01.jpg"); }
.aw-02::before { background-image: url("/images/awareness-02.jpg"); }
.aw-03::before { background-image: url("/images/awareness-03.jpg"); }
.aw-04::before { background-image: url("/images/awareness-04.jpg"); }

.numbered-num {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}

/* short vertical rule above the title, as in the original */
.numbered-rule {
  display: block;
  width: 2px;
  height: 44px;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, .85);
}

.numbered-body h3 {
  font-size: var(--fs-h3-lg);
  font-weight: 500;
  letter-spacing: -.01em;
  margin-bottom: .5rem;
}

/* .75rem = 12px, the minimum readable body size */
.numbered-body p { font-size: var(--fs-sm); line-height: 1.6; color: #D8D8D8; margin: 0; }

/* ---------- News ---------- */

#news .center,
.events-more { margin-top: 1.75rem; }

/* built from the CMS, so the layout follows how many items there are */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.news-count-1 { grid-template-columns: 1fr; }
.news-count-2 { grid-template-columns: repeat(2, 1fr); }

.card-body .news-card-meta { margin-bottom: .5rem; font-size: var(--fs-xs); }

.news-card .card-body { display: flex; flex-direction: column; flex: 1; }
.news-card .card-body .btn { align-self: flex-start; }

.news-card-fallback {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: linear-gradient(115deg, #163D7A 0%, #2A5CAA 50%, #2E6DD0 100%);
  color: rgba(255, 255, 255, .9);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: .08em;
}

.news-card .media { aspect-ratio: 16 / 9; }

/* a single item takes the full width: image beside the copy */
.news-count-1 .news-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

.news-count-1 .media,
.news-count-1 .news-card-fallback {
  height: 100%;
  min-height: 18rem;
}

.news-count-1 .card-body {
  justify-content: center;
  padding: 2.25rem 2.5rem;
}

.news-count-1 .card-body h3 { font-size: var(--fs-h2); line-height: 1.3; margin-bottom: .75rem; }
.news-count-1 .card-body p { font-size: var(--fs-base); }
.news-count-1 .card-body .news-card-meta { font-size: var(--fs-sm); }

@media (max-width: 860px) {
  .news-count-1 .news-card { grid-template-columns: 1fr; }
  .news-count-1 .media,
  .news-count-1 .news-card-fallback { height: auto; min-height: 0; }
  .news-count-1 .card-body { padding: 1.5rem 1.35rem 1.75rem; }
}

@media (max-width: 740px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3rem;
  align-items: start;
}

.contact-grid h2 { font-size: var(--fs-h2); }

.contact-lede { font-size: var(--fs-base); color: var(--muted); margin-bottom: 1.5rem; }

.field { margin-bottom: 1rem; }

.field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-bottom: .35rem;
}

.req { color: #C0392B; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

.phone-row { grid-template-columns: 110px 1fr; }

.contact-form input,
.contact-form select,
.contact-form textarea,
.join-form input,
.join-form select {
  width: 100%;
  padding: .58rem .7rem;
  border: 1px solid #CFD5DC;
  border-radius: 3px;
  background: #fff;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--text);
}

.contact-form textarea { resize: vertical; }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.join-form input:focus,
.join-form select:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

.contact-form .btn-block { margin-top: .5rem; }

/* set by the membership form's script, on the client or from the server;
   :hover is listed so the grey hover border cannot mask the error */
.join-form [aria-invalid="true"],
.join-form [aria-invalid="true"]:hover { border-color: #C0392B; }

/* Honeypot wrapper. Positioned off-screen rather than display:none, because
   some bots skip fields that are outright hidden. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile bot check. Reserves the widget's height so the button doesn't
   jump down when Cloudflare's script loads it. */
.cf-turnstile {
  min-height: 65px;
  margin: 0 0 .9rem;
}

/* Reserves its own line height so the layout does not jump when a short
   message appears. */
.form-status {
  margin: .7rem 0 0;
  min-height: 1.4em;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.form-status.is-busy { color: var(--muted); }

/* Outcomes get a panel rather than a bare line — the confirmation runs to two
   sentences and needs the weight. Both pairings clear 7:1 on their tint. */
.form-status.is-ok,
.form-status.is-error {
  padding: .8rem .95rem;
  border: 1px solid;
  border-radius: var(--radius);
}

.form-status.is-ok {
  color: #14602F;
  background: #E8F5EC;
  border-color: #BFE3CC;
}

.form-status.is-error {
  color: #8C1D18;
  background: #FDECEA;
  border-color: #F5C6C2;
}

/* ---------- Become a member (/become-a-member/) ----------
   A full-bleed photograph with the pitch on the left and the application
   card on the right. The blue wash is heaviest behind the white copy, so the
   text holds its contrast whatever the photo is doing underneath. */

.join {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  background: var(--blue-dark);   /* shows until the photo arrives */
}

.join-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.join::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(20, 63, 121, .86) 0%, rgba(20, 63, 121, .62) 45%, rgba(20, 63, 121, .22) 100%);
}

.join-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 548px);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: 560px;
}

.join-intro { color: #fff; max-width: 470px; }

.join-intro h1 {
  font-size: var(--fs-h1);
  font-weight: 500;
  margin-bottom: 1.1rem;
}

.join-intro p { font-size: var(--fs-base); line-height: 1.6; margin: 0; }

.join-lede { font-weight: 600; }

.join-card {
  background: #fff;
  border-radius: 14px;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 3.5vw, 2.9rem);
  box-shadow: 0 18px 50px rgba(10, 30, 60, .22);
  /* clears the sticky header when a "Become a member" link jumps here */
  scroll-margin-top: 90px;
}

.join-card h2 {
  font-size: var(--fs-h2-lg);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.join-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.4rem;
}

.join-form .field label { font-weight: 400; }

.join-form select {
  appearance: none;
  padding-right: 2rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%235F6B7A'/%3E%3C/svg%3E") no-repeat right .75rem center / 9px 6px;
  cursor: pointer;
}

/* dialling code and number share one bordered box, as in the design */
.phone-group {
  display: flex;
  border: 1px solid #CFD5DC;
  border-radius: 3px;
  background: #fff;
  transition: border-color .18s ease;
}

.phone-group:hover { border-color: #A9B4C0; }

.phone-group:focus-within {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

.join-form .phone-group:has([aria-invalid="true"]) { border-color: #C0392B; }

.join-form .phone-group select,
.join-form .phone-group input {
  border: 0;
  border-radius: 0;
  outline: none;   /* the group draws the ring instead */
}

/* fixed and compact, so the number keeps room for a full 11-digit mobile */
.join-form .phone-group select {
  flex: none;
  width: 5.4rem;
  padding: .58rem 1.35rem .58rem .55rem;
  font-size: var(--fs-sm);
  background-position: right .5rem center;
  border-right: 1px solid var(--line);
}

.join-form .phone-group input { flex: 1; min-width: 0; padding-left: .6rem; }

.join-form .btn-block { margin-top: .5rem; }

@keyframes join-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.join-intro { animation: join-rise .6s ease-out both; }
.join-card  { animation: join-rise .6s .12s ease-out both; }

/* ---------- Closing CTA band ----------
   A gradient rather than flat brand blue, so it separates from the footer
   below instead of the two reading as one continuous slab. */

.cta-band {
  position: relative;
  padding: 4.5rem 0;
  background: linear-gradient(115deg, #163D7A 0%, #2A5CAA 42%, #2E6DD0 100%);
  color: #fff;
  overflow: hidden;
}

/* soft highlight, as if light falls across the band from the upper left */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 22% -10%, rgba(255, 255, 255, .18) 0%, transparent 62%);
  pointer-events: none;
}

.cta-band > .container { position: relative; z-index: 1; }

.cta-title {
  font-size: var(--fs-h2-lg);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.015em;
  color: #fff;
  margin-bottom: 1.75rem;
}

.cta-band .btn { padding: .8rem 2rem; font-size: var(--fs-base); }

/* ---------- Footer ----------
   Deep navy, near charcoal. Dark enough to recede behind the CTA while
   staying in the same colour family as the brand blue. */

.site-footer {
  background: #14203A;
  color: rgba(255, 255, 255, .72);
  padding: 2rem 0 1.75rem;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .25rem 2rem;
  padding-bottom: .75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.footer-logo {
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  transition: opacity .2s ease;
}
.footer-logo .logo-mark { height: 22px; }

/* The wordmark keeps its own 155:46 ratio and takes its colour from the link
   around it, so one inline mark serves the blue header and the dark footer. */
.logo-mark {
  width: auto;
  display: block;
  flex: none;
}
.footer-logo:hover { opacity: .8; }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color .2s ease;
}
.footer-nav a:hover { color: #fff; }

.copyright {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .52);
  margin: 0;
}

/* ==========================================================================
   Motion — hover, focus and scroll reveal
   All of this is neutralised by the prefers-reduced-motion block at the top.
   ========================================================================== */

/* ---------- Header lifts off the page once you scroll ---------- */

.site-header { transition: box-shadow .25s ease; }
.site-header.is-scrolled { box-shadow: 0 2px 14px rgba(15, 30, 60, .10); }

.logo { transition: opacity .2s ease; }
.logo:hover { opacity: .78; }

/* ---------- Nav links grow an underline ---------- */

.nav a:not(.btn) { position: relative; }

.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}

.nav a:not(.btn):hover::after { transform: scaleX(1); }

.footer-nav a { position: relative; }

.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}

.footer-nav a:hover::after { transform: scaleX(1); }

/* ---------- Cards lift, their photo eases in ---------- */

.card {
  transition: transform .28s ease, box-shadow .28s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(20, 40, 80, .13);
}

/* the card clips overflow, so the photo scales inside its own frame */
.card .media { transition: transform .5s ease; }
.card:hover .media { transform: scale(1.05); }

/* ---------- Tiles ---------- */

.tile {
  transition: transform .28s ease, box-shadow .28s ease;
}

.tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 26px rgba(20, 40, 80, .11);
}

.tile-icon { transition: transform .3s ease; }
.tile:hover .tile-icon { transform: scale(1.14); }

/* ---------- Numbered awareness cards ---------- */

.numbered { transition: transform .3s ease, box-shadow .3s ease; }
.numbered::before { transition: filter .45s ease, transform .55s ease; }
.numbered::after { transition: background .35s ease; }
.numbered-num { transition: transform .3s ease; }

.numbered:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .30);
}

/* hover restores the photo's colour and washes it blue, matching the original */
.numbered:hover::before {
  filter: grayscale(0);
  transform: scale(1.05);
}

.numbered:hover::after {
  background: linear-gradient(180deg, rgba(42, 92, 170, .50) 0%, rgba(11, 42, 88, .90) 100%);
}

.numbered:hover .numbered-num { transform: translateY(-3px); }

/* ---------- Portraits ---------- */

.leader-portrait .media {
  transition: transform .35s ease, box-shadow .35s ease;
}

.leader-portrait .media:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

/* ---------- Form fields ---------- */

.contact-form input,
.contact-form select,
.contact-form textarea,
.join-form input,
.join-form select {
  transition: border-color .18s ease, box-shadow .18s ease;
}

.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover,
.join-form input:hover,
.join-form select:hover { border-color: #A9B4C0; }

/* ---------- Scroll reveal ----------
   Gated behind .js-reveal on <html>, which the script only adds when JS runs
   AND reduced motion is off. Without JS every element stays visible. */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
}

.js-reveal .reveal {
  transition: opacity .55s ease-out, transform .55s ease-out;
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* never let the reveal state hide content on paper */
@media print {
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ---------- small laptop ---------- */

@media (max-width: 1100px) {
  /* the hero's extra-wide container has nothing left to give below this */
  .hero .container { max-width: 100%; }
  .hero-grid { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
}

/* ---------- tablet landscape ---------- */

@media (max-width: 980px) {
  /* tighter gutters buy the cards back some width */
  :root { --gap: 1.25rem; }

  /* six nav links plus the CTA only fit on one row down to the hamburger
     breakpoint (860px) with less space between them */
  .nav { gap: 1.25rem; }

  /* 4-up splits cleanly into 2x2 */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* The 0.52 ratio suits narrow 4-across cards. At 2-across they are roughly
     twice as wide, and a fixed ratio would scale the height with it — about
     670px per card. Content sets the height here instead. */
  .numbered {
    aspect-ratio: auto;
    min-height: 380px;
  }

  .event-card { width: min(320px, 46%); }
  .event-card p { font-size: var(--fs-xs); }

  /* the card needs the room more than the pitch does */
  .join-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 2rem; }
}

/* ---------- tablet portrait ----------
   3-up grids stay 3-up all the way down to the mobile breakpoint. Two
   columns is never right for three cards — it always strands the third
   one alone in a half-empty row. So it's 3 across, then straight to 1. */

@media (max-width: 860px) {
  .section { padding: 2.75rem 0; }

  .nav-toggle { display: flex; }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 1.25rem 1rem;
    background: #fff;
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .nav-cta { display: none; }
  .nav a.nav-cta-mobile { display: inline-flex; margin-top: .75rem; border-bottom: none; }
  .site-header { position: relative; }

  .hero-grid,
  .intro-grid,
  .leader-grid,
  .leader-grid-reverse,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* hero image first — it carries the page on a small screen */
  .hero-media { order: -1; }
  .hero-card { padding: 1.75rem 1.5rem; }

  .leader-grid-reverse .leader-portrait { order: -1; }

  .leader-portrait { max-width: 320px; }

  /* too narrow to float cards over the photo — stack them underneath instead */
  .events-stage { border-radius: 0; overflow: visible; }
  .events-bg { aspect-ratio: 16 / 9; border-radius: 10px; }

  .events-cards {
    position: static;
    align-items: stretch;
    padding: 1rem 0 0;
  }

  .event-card { width: 100%; }

  .ph-tall,
  .media-contact { aspect-ratio: 4 / 3; }

  /* pitch stacks above the card; the wash turns vertical to follow it */
  .join-grid { grid-template-columns: 1fr; min-height: 0; gap: 1.75rem; }
  .join-intro { max-width: none; }
  .join::before {
    background: linear-gradient(180deg, rgba(20, 63, 121, .88) 0%, rgba(20, 63, 121, .6) 100%);
  }
}

/* ---------- mobile ---------- */

/* below this a third column is too narrow to read, so 3-up goes to 1-up */
@media (max-width: 740px) {
  .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .section { padding: 2.25rem 0; }
  .section-title { margin-bottom: 1.75rem; }

  .container { padding: 0 1rem; }

  .grid-3,
  .grid-4 { grid-template-columns: 1fr; gap: 1.25rem; }

  /* fixed ratio would crop the copy once it reflows to one column */
  .numbered { aspect-ratio: auto; min-height: 0; padding: 1.5rem 1.35rem 1.75rem; }
  .numbered-num { margin-bottom: 1.5rem; }
  .numbered-rule { height: 34px; margin-bottom: .75rem; }

  .events-bg { aspect-ratio: 4 / 3; }

  .field-row { grid-template-columns: 1fr; }
  .phone-row { grid-template-columns: 96px 1fr; }
  .join-fields { grid-template-columns: 1fr; }

  .cta-band { padding: 3rem 0; }
  .cta-title { line-height: 1.35; }

  /* stack and centre the footer row rather than pushing logo and nav apart */
  .footer-top {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0;
  }
  .footer-nav { gap: 1.25rem; justify-content: center; }
  .site-footer .container { text-align: center; }
  .leader-portrait { max-width: 100%; }
  .media-portrait { aspect-ratio: 4 / 3; }

  .btn-row .btn { flex: 1 1 auto; }
}

/* ---------- very narrow ---------- */

@media (max-width: 380px) {
  .logo .logo-mark { height: 22px; }
  .hero-card { padding: 1.5rem 1.25rem; }
  .phone-row { grid-template-columns: 1fr; }
}