/* -------------------------------------------------------------
   0. FONTS
   Archivo Black (SIL Open Font License) is the InterComms wordmark
   typeface. Self-hosted deliberately: loading it from Google Fonts
   would add a third-party request and set cookies, which would mean
   needing a consent banner. This way the site sets none.
------------------------------------------------------------- */
@font-face {
  font-family: "Archivo Black";
  src: url("fonts/archivo-black.woff2") format("woff2"),
       url("fonts/archivo-black.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------
   1. BASE & TOKENS
------------------------------------------------------------- */
:root {
  --bg-warm: #F7F5F0;
  --text-dark: #14121A;
  --text-muted: #55505F;
  --card-bg: rgba(255, 255, 255, 0.48);
  --card-border: rgba(255, 255, 255, 0.85);
  --glass-blur: 9px;

  /* Sampled from the InterComms logo bar */
  --brand-pink:   #FFAFC8;
  --brand-cyan:   #74D7EE;
  --brand-red:    #D05454;
  --brand-orange: #DE9F52;
  --brand-yellow: #FEED00;
  --brand-green:  #539967;
  --brand-blue:   #5453DF;
  --brand-purple: #93569C;

  --top-gap: 1.75rem;
  --radius: 14px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: hidden; }

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--bg-warm);
  color: var(--text-dark);
  min-height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--top-gap) 1rem 2rem;
}

h1, h2, h3 {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight: 700;
}

/* -------------------------------------------------------------
   2. NETWORK BACKGROUND
   Each hub steps through a curated rainbow rather than a raw hue
   rotation, so it never lands on acid green or muddy olive.
------------------------------------------------------------- */
.background-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.network-hub {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  /* Solid fill + radial mask, so the colour itself can be tweened
     smoothly. Animating gradient stops steps rather than fades. */
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0) 72%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0) 72%);
  will-change: transform;
  opacity: 0.62;
  animation-timing-function: ease-in-out, linear;
  animation-iteration-count: infinite, infinite;
  animation-direction: alternate, normal;
}

/* One shared seven-colour rainbow. Each hub enters it at a
   different point via a negative delay, so they stay distinct
   while fading continuously from one colour to the next. */
@keyframes rainbowFade {
  0%      { background-color: #FDD835; }
  14.28%  { background-color: #F59A4A; }
  28.57%  { background-color: #F07A9C; }
  42.85%  { background-color: #A15FB0; }
  57.14%  { background-color: #5B6BE0; }
  71.42%  { background-color: #56C7E8; }
  85.71%  { background-color: #4FBF7B; }
  100%    { background-color: #FDD835; }
}

/* Top left: blue */
.hub-blue {
  width: 550px; height: 550px;
  top: 5%; left: -150px;
  background-color: #5B6BE0;
  animation-name: driftBlue, rainbowFade;
  animation-duration: 5s, 56s;
  animation-delay: 0s, -32s;
}
/* Right: yellow */
.hub-yellow {
  width: 680px; height: 680px;
  top: 18%; right: -80px;
  background-color: #FDD835;
  animation-name: driftYellow, rainbowFade;
  animation-duration: 6.5s, 56s;
  animation-delay: 0s, 0s;
}
/* Bottom left: green */
.hub-green {
  width: 600px; height: 600px;
  bottom: -100px; left: -100px;
  background-color: #4FBF7B;
  animation-name: driftGreen, rainbowFade;
  animation-duration: 4.5s, 56s;
  animation-delay: 0s, -48s;
}
/* Centre: purple */
.hub-purple {
  width: 500px; height: 500px;
  top: 55%; left: 32%;
  background-color: #A15FB0;
  animation-name: driftPurple, rainbowFade;
  animation-duration: 6s, 56s;
  animation-delay: 0s, -24s;
}
/* Bottom centre: pink */
.hub-pink {
  width: 480px; height: 480px;
  bottom: -60px; left: 45%;
  background-color: #F07A9C;
  animation-name: driftPink, rainbowFade;
  animation-duration: 4s, 56s;
  animation-delay: 0s, -16s;
}

@keyframes driftBlue   { 0% { transform: translate(0, 0); } 100% { transform: translate(160px, 180px); } }
@keyframes driftYellow { 0% { transform: translate(0, 0); } 100% { transform: translate(-180px, -160px); } }
@keyframes driftGreen  { 0% { transform: translate(0, 0); } 100% { transform: translate(220px, -110px); } }
@keyframes driftPurple { 0% { transform: translate(0, 0); } 100% { transform: translate(-140px, 150px); } }
@keyframes driftPink   { 0% { transform: translate(0, 0); } 100% { transform: translate(150px, -100px); } }

/* Phones have far less GPU memory than desktops. A smaller blur on a
   smaller viewport looks the same but costs a fraction as much, and
   dropping the layer hint lets the browser decide for itself. */
@media (max-width: 900px) {
  .network-hub {
    filter: blur(55px);
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .network-hub { animation: none; }
  .nav-overlay, .nav-links a, .nav-close, .site-header,
  .logo-mark, .logo-word, .logo-stripe { transition: none; }
}

/* -------------------------------------------------------------
   3. LAYOUT & PANEL
------------------------------------------------------------- */
.page-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
}

.glass-panel {
  background: var(--card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 18px 50px rgba(20, 18, 26, 0.06);
  padding: 3rem;
  margin-bottom: 2rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 1.75rem 2.75rem;
  border-bottom: 1px solid rgba(20, 18, 26, 0.14);
  transition: padding 0.28s ease, border-radius 0.25s ease, box-shadow 0.25s ease;
  transition: border-radius 0.25s ease, box-shadow 0.25s ease;
}

/* Once stuck, the pane grows upward to meet the top of the window,
   so the resting margin closes rather than leaving a see-through gap. */
.site-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--top-gap);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.site-header.is-stuck {
  border-radius: 0;
  box-shadow: 0 8px 26px rgba(20, 18, 26, 0.08);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

/* Shrunken logo. --logo-w is not animatable on its own, so the
   properties derived from it carry the transition instead. */
.site-header.is-stuck .logo-mark { --logo-w: 118px; }

.site-header.is-stuck::before { opacity: 1; }

/* Hamburger */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 40px;
  padding: 0 9px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.menu-toggle:hover { opacity: 0.55; }

.menu-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text-dark);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.18s ease;
}

.menu-toggle.is-open .menu-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open .menu-bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-open .menu-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Full-viewport navigation.
   Lives at the root of the document, not inside the header: a
   backdrop-filter ancestor becomes the containing block for
   position: fixed, which trapped this inside the bar. */
.nav-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
  background: var(--bg-warm);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

.nav-overlay[hidden] { display: none; }

.nav-overlay .background-container { position: absolute; z-index: 0; }

.nav-close {
  position: absolute;
  top: 1.75rem;
  right: 2.75rem;
  z-index: 2;
  width: 44px;
  height: 40px;
  padding: 0 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.nav-overlay.is-open .nav-close:hover { opacity: 0.55; }

.nav-close span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text-dark);
  border-radius: 2px;
}

.nav-close span:first-child { transform: translateY(1px) rotate(45deg); }
.nav-close span:last-child { transform: translateY(-1px) rotate(-45deg); }

.nav-links {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.nav-links a {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-align: center;
  text-decoration: none;
  color: var(--text-dark);
  padding: 0.35rem 1.5rem;
  transition: color 0.22s ease, transform 0.32s ease, opacity 0.32s ease;
}

.nav-overlay.is-open .nav-links a {
  opacity: 1;
  transform: translateY(0);
}

.nav-overlay.is-open .nav-links a:nth-child(1) { transition-delay: 0.06s; }
.nav-overlay.is-open .nav-links a:nth-child(2) { transition-delay: 0.12s; }
.nav-overlay.is-open .nav-links a:nth-child(3) { transition-delay: 0.18s; }

.nav-close {
  opacity: 0;
  transition: opacity 0.3s ease 0.1s;
}

.nav-overlay.is-open .nav-close { opacity: 0.9; }

.nav-links a:hover, .nav-links a:focus-visible {
  color: var(--brand-purple);
  transform: translateY(-2px);
}

body.nav-open { overflow: hidden; }

/* While the menu is open the page background is completely covered by
   the opaque overlay, so there is no reason to keep compositing it.
   Ten large blurred layers at once can exhaust GPU memory on phones,
   which shows up as flickering. Hidden only once the overlay has
   finished fading in, and restored instantly on close. */
.background-container.is-idle { visibility: hidden; }

.brand { display: inline-block; text-decoration: none; }

/* Wordmark drawn in CSS: stacked type over the ten-colour bar */
.logo-mark {
  --logo-w: 178px;
  display: block;
  width: var(--logo-w);
  transition: width 0.28s ease;
}

.logo-word {
  display: flex;
  justify-content: space-between;
  font-family: "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: calc(var(--logo-w) * 0.240);
  line-height: 0.835;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #000000;
  transition: font-size 0.28s ease;
}

.logo-word span { display: block; }

.logo-stripe {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  height: calc(var(--logo-w) * 0.0711);
  margin-top: calc(var(--logo-w) * 0.015);
  transition: height 0.28s ease, margin-top 0.28s ease;
}

.logo-stripe span { display: block; }

/* Hero */
.hero { max-width: 780px; margin-bottom: 3rem; }

.glass-panel > .hero { margin-top: 0.5rem; }

.hero h1 {
  font-size: 3.2rem;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin-bottom: 1.1rem;
}

.hero p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 52ch;
}

/* Buttons */
.btn {
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--brand-purple);
  color: #FFFFFF;
  border: 1px solid var(--brand-purple);
}

.btn-primary:hover, .btn-primary:focus-visible {
  background: #5E2C69;
  border-color: #5E2C69;
}

.btn-light {
  background: #FFFFFF;
  color: var(--brand-purple);
  border: 1px solid #FFFFFF;
}

.btn-light:hover { background: rgba(255, 255, 255, 0.85); }

/* Section labels */
.section-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(20, 18, 26, 0.12);
  margin-bottom: 1.75rem;
}

/* Pillars */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 4rem;
}

.pillar-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(20, 18, 26, 0.07);
  border-top: 3px solid var(--brand-blue);
  border-radius: var(--radius-sm);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.pillar-card:nth-child(2) { border-top-color: var(--brand-purple); }
.pillar-card:nth-child(3) { border-top-color: var(--brand-orange); }

.pillar-icon { width: 40px; height: 40px; }

.pillar-card h3 { font-size: 1.2rem; line-height: 1.3; }

.pillar-card p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* the scheme feature */
.scheme-feature {
  text-align: center;
  background: linear-gradient(135deg, #6E3F9E 0%, #A6408C 55%, #D9563F 100%);
  border-radius: var(--radius);
  padding: 3.25rem 2rem;
  margin-bottom: 4rem;
  color: #FFFFFF;
  box-shadow: 0 14px 40px rgba(110, 63, 158, 0.28);
}

.scheme-eyebrow {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.95;
  display: block;
  margin-bottom: 1rem;
}

.scheme-feature h2 {
  font-size: 2.3rem;
  line-height: 1.15;
  margin-bottom: 1rem;
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}

.scheme-feature p {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto 1.75rem;
  opacity: 0.92;
}

/* Contact strip */
.contact-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(20, 18, 26, 0.07);
  border-radius: var(--radius-sm);
  padding: 1.75rem 2rem;
  margin-bottom: 4rem;
}

.contact-strip h3 { font-size: 1.3rem; line-height: 1.3; }

.contact-strip p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

/* Past event */
.past-event {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(20, 18, 26, 0.07);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) 1fr;
  gap: 2rem;
  align-items: center;
}

.past-event img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}

.event-date {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
  display: block;
}

.past-event h3 { font-size: 1.25rem; line-height: 1.35; margin-bottom: 0.7rem; }

.past-event p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* -------------------------------------------------------------
   4. FOOTER
------------------------------------------------------------- */
.site-footer {
  background: var(--card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(20, 18, 26, 0.06);
  padding: 3rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 3rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(20, 18, 26, 0.12);
}

.footer-brand .logo-mark { --logo-w: 160px; }

.footer-blurb {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
  max-width: 42ch;
  margin: 0 auto;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
}

.footer-nav h4 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.footer-nav a {
  color: var(--text-dark);
  text-decoration: none;
  font-size: 0.92rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}

.footer-nav a:hover, .footer-nav a:focus-visible {
  color: var(--brand-purple);
  border-bottom-color: var(--brand-purple);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding-top: 1.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer-stripe {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 1.75rem;
}

.footer-stripe span { display: block; }

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2rem;
    text-align: center;
  }
  .footer-nav { align-items: center; }
}

@media (max-width: 720px) {
  .past-event { grid-template-columns: 1fr; }
}

/* Mobile portrait: everything centred except the header row */
@media (max-width: 640px) {
  .hero, .hero p { text-align: center; margin-left: auto; margin-right: auto; }
  .pillar-card { align-items: center; text-align: center; }
  .section-title { text-align: center; }
  .contact-strip { flex-direction: column; text-align: center; }
  .contact-strip p { margin-left: auto; margin-right: auto; }
  .past-event { text-align: center; }
  .past-event p { margin-left: auto; margin-right: auto; }
  .site-header { justify-content: space-between; }
}

@media (max-width: 640px) {
  .glass-panel, .site-footer { padding: 1.75rem; }
  .hero h1 { font-size: 2.1rem; }
  .scheme-feature h2 { font-size: 1.7rem; }
  .site-header { padding: 1.25rem 1.5rem; }
  .nav-close { top: 1.25rem; right: 1.5rem; }
  .brand .logo-mark { --logo-w: 140px; }
  .brand img { width: 128px; }
}

/* -------------------------------------------------------------
   5. SUBPAGES: the scheme
------------------------------------------------------------- */
.page-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand-purple);
  margin-bottom: 1rem;
}

.hero h1 + p { margin-top: 0; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-bottom: 4rem;
}

.stat {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(20, 18, 26, 0.07);
  border-radius: var(--radius-sm);
  padding: 1.5rem 1.75rem;
}

.stat strong {
  display: block;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat span {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.prose { max-width: 68ch; margin-bottom: 4rem; }

.prose p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
}

.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text-dark); }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 4rem;
}

.step {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(20, 18, 26, 0.07);
  border-radius: var(--radius-sm);
  padding: 1.75rem;
}

.step-number {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--brand-purple);
  margin-bottom: 0.9rem;
}

.step h3 { font-size: 1.1rem; line-height: 1.3; margin-bottom: 0.6rem; }

.step p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Application form */
.form-panel {
  border-radius: var(--radius);
  margin-bottom: 2rem;
}

.form-heading { font-size: 2rem; line-height: 1.15; margin-bottom: 0.75rem; }

.form-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 60ch;
  margin-bottom: 2.5rem;
}

.form-status {
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.form-status--ok { background: rgba(83, 153, 103, 0.16); color: #2F6B45; }
.form-status--error { background: rgba(208, 84, 84, 0.16); color: #8C2F2F; }
.form-status[hidden] { display: none; }

.apply-form { max-width: 720px; }

.field { margin-bottom: 1.75rem; }

.field label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.field-hint {
  display: block;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-dark);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(20, 18, 26, 0.18);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.field textarea { resize: vertical; line-height: 1.55; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(147, 86, 156, 0.18);
}

.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.apply-form button { border: 0; font-family: inherit; }

@media (max-width: 640px) {
  .stat, .step, .prose, .form-intro { text-align: center; }
  .prose, .form-intro { margin-left: auto; margin-right: auto; }
  .field label, .field-hint { text-align: left; }
  .form-heading { text-align: center; }
}

/* Embedded Google Form + fallback */
.embed-wrap { position: relative; min-height: 320px; }
.embed-wrap[hidden] { display: none; }

.embed-loading {
  position: absolute;
  top: 2rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.embed-loading[hidden] { display: none; }

.form-embed {
  width: 100%;
  height: 1500px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.form-embed.is-ready { opacity: 1; }

.embed-fallback {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(20, 18, 26, 0.07);
  border-radius: var(--radius-sm);
  padding: 2rem;
  text-align: center;
}

.embed-fallback[hidden] { display: none; }

.embed-fallback h3 { font-size: 1.3rem; margin-bottom: 0.75rem; }

.embed-fallback p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 54ch;
  margin: 0 auto 1.5rem;
}

.embed-note {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 1.5rem;
  max-width: none;
}

.embed-note + .embed-note { margin-top: 0.4rem; }

.embed-note a {
  color: var(--brand-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.embed-note a:hover { color: var(--text-dark); }

@media (max-width: 640px) {
  .form-embed { height: 1900px; }
  .embed-note { text-align: center; margin-left: auto; margin-right: auto; }
}

.embed-actions { margin-top: 1.5rem; }

@media (max-width: 640px) {
  .embed-actions { text-align: center; }
}

/* -------------------------------------------------------------
   6. INNER PAGES: full-width running text, contact, legal
------------------------------------------------------------- */

/* On wider screens the running text uses the full glass pane
   rather than a narrow measure. */
.page-inner .hero { max-width: none; }

.page-inner .hero p,
.page-inner .lede,
.prose { max-width: none; }

/* The headline still wants a readable measure even when the
   paragraph below it runs the full width of the pane. */
.page-inner .hero h1 { max-width: 26ch; }

.lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.contact-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(20, 18, 26, 0.07);
  border-radius: var(--radius-sm);
  padding: 1.75rem;
}

.contact-card h3 { font-size: 1.15rem; line-height: 1.3; margin-bottom: 0.6rem; }

.contact-card p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.contact-card a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}

.contact-card a:hover { color: var(--text-dark); }

/* Legal pages */
.notice-draft {
  background: rgba(222, 159, 82, 0.18);
  border-left: 3px solid var(--brand-orange);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.35rem;
  margin-bottom: 2.5rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-dark);
}

.legal h2 {
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 2.5rem 0 0.9rem;
}

.legal h2:first-child { margin-top: 0; }
.legal p { margin-bottom: 1rem; }

/* Portrait: two columns leave the third stat card orphaned on the
   left, so stack them below the width where three still fit. */
@media (orientation: portrait) and (max-width: 740px) {
  .stat-row { grid-template-columns: 1fr; }
}

/* Portrait: centre the card rows */
@media (orientation: portrait) and (max-width: 900px) {
  .stat-row, .steps, .contact-grid { justify-items: center; }
  .stat, .step, .contact-card { width: 100%; text-align: center; }
  .notice-draft, .legal { text-align: left; }
}

/* -------------------------------------------------------------
   7. MAILING LIST SIGN-UP
------------------------------------------------------------- */
.join-panel {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(20, 18, 26, 0.07);
  border-radius: var(--radius-sm);
  border-top: 3px solid var(--brand-green);
  padding: 2.25rem 2rem;
  margin-bottom: 4rem;
}

.join-intro { margin-bottom: 1.75rem; }

.join-eyebrow {
  color: var(--brand-green);
  opacity: 1;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  margin-bottom: 0.75rem;
}

.join-intro h2 {
  font-size: 1.7rem;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

.join-intro p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.join-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.join-fields .field { margin-bottom: 0; }

.join-fields label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  cursor: pointer;
}

.consent input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--brand-purple);
}

.consent a {
  color: var(--brand-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent-note {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: -0.75rem 0 1.5rem;
}

.consent-note a {
  color: var(--brand-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.join-form button { border: 0; font-family: inherit; }

@media (orientation: portrait) and (max-width: 900px) {
  .join-panel { text-align: center; }
  .join-intro h2, .join-intro p { margin-left: auto; margin-right: auto; }
  .join-fields label { text-align: left; }
  .consent { text-align: left; margin-left: auto; margin-right: auto; }
  .consent-note { text-align: left; margin-left: auto; margin-right: auto; }
}

/* Footer: Connect column */
.footer-connect a { word-break: break-word; }

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.footer-social svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: color 0.2s;
}

.footer-social:hover svg, .footer-social:focus-visible svg { color: var(--brand-purple); }

/* Privacy sits with the copyright rather than as a fourth column. */
.footer-bottom a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.footer-bottom a:hover, .footer-bottom a:focus-visible {
  color: var(--text-dark);
  border-bottom-color: var(--brand-purple);
}

/* Links within legal prose */
.legal a {
  color: var(--brand-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal a:hover, .legal a:focus-visible { color: var(--text-dark); }

/* Consent gate in front of the embedded Google Form */
.embed-consent {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(20, 18, 26, 0.07);
  border-radius: var(--radius-sm);
  border-top: 3px solid var(--brand-blue);
  padding: 2.25rem 2rem;
  text-align: center;
}

.embed-consent[hidden] { display: none; }

.embed-consent h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 0.75rem; }

.embed-consent p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 58ch;
  margin: 0 auto 1.5rem;
}

/* Mailing list confirmation page */
.thanks-hero { margin-bottom: 3.5rem; }
.thanks-hero .lede + .lede { margin-top: 1rem; }

/* A call to action sitting inside running prose */
.prose-cta { margin: 1.75rem 0 2rem; }

.btn-lg {
  padding: 1.05rem 2.1rem;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
}

@media (orientation: portrait) and (max-width: 900px) {
  .prose-cta { text-align: center; }
}

/* -------------------------------------------------------------
   8. MOBILE MENU: no animated nodes
   A second set of large blurred, animated layers on top of the
   page's own is what makes the overlay flicker on phones. On small
   screens the overlay drops them and uses static gradients instead:
   same colouring, but painted once, with no filter, no animation
   and no compositing layers, so there is nothing left to drop a
   frame. Kept at the end of the file so it overrides the base rule.
------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-overlay .background-container { display: none; }

  .nav-overlay {
    background-color: var(--bg-warm);
    background-image:
      radial-gradient(65% 45% at 12% 18%, rgba(91, 107, 224, 0.22), transparent 70%),
      radial-gradient(60% 40% at 88% 28%, rgba(253, 216, 53, 0.26), transparent 70%),
      radial-gradient(65% 45% at 22% 82%, rgba(79, 191, 123, 0.22), transparent 70%),
      radial-gradient(55% 40% at 82% 88%, rgba(240, 122, 156, 0.22), transparent 70%),
      radial-gradient(50% 35% at 55% 55%, rgba(161, 95, 176, 0.18), transparent 70%);
  }
}