/* Greene Circles. One stylesheet for all pages. */

:root {
  --white: #ffffff;
  --leaf: #eef7e8;
  --green: #4fca30;
  --forest: #295b1a;
  --ink: #1b2615;
  --mute: #5f6d58;
  --line: #d6e3cf;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --text: "IBM Plex Serif", Georgia, "Times New Roman", serif;

  --gutter: clamp(16px, 5vw, 72px);
  --measure: 62ch;
  --nav-h: 72px;
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
p a, li a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.06; margin: 0; letter-spacing: 0.012em; }
h1 { font-size: clamp(2.5rem, 5.6vw, 5.1rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.9rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
/* Descriptive text is set in IBM Plex Serif; navigation, buttons and labels stay in Inter Tight */
p, blockquote { font-family: var(--text); }
p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: var(--gutter); top: -60px;
  background: var(--forest); color: var(--white); padding: 10px 14px; z-index: 100;
}
.skip:focus { top: 12px; }

/* Header */
.site-head {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  transition: background 220ms ease, box-shadow 220ms ease;
}
.site-head.is-solid { background: rgba(255,255,255,0.96); box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 1.35rem; letter-spacing: 0.01em; }
.brand-ring {
  width: 30px; height: 30px; border-radius: 50%;
  border: 6px solid var(--green);
  transform: rotate(-12deg);
  box-shadow: inset 0 0 0 1px rgba(79,202,48,0.35);
}
.nav { display: flex; gap: clamp(18px, 3vw, 40px); font-size: 0.98rem; font-weight: 400; }
.nav a { padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a[aria-current="page"] { border-bottom-color: var(--forest); }
.nav a:hover { border-bottom-color: var(--green); }
.nav-toggle {
  display: none; background: none; border: 0; padding: 8px; cursor: pointer;
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
}
@media (max-width: 760px) {
  .nav-toggle { display: inline-block; }
  .nav {
    position: fixed; top: var(--nav-h); left: 0; right: 0; height: calc(100svh - var(--nav-h)); background: var(--leaf);
    flex-direction: column; gap: 0; padding: 24px var(--gutter); overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-12px);
    transition: transform 220ms ease, opacity 220ms ease, visibility 0s linear 220ms;
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition: transform 220ms ease, opacity 220ms ease, visibility 0s; }
  .nav a { font-family: var(--serif); font-size: 2.2rem; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .site-head.menu-open { background: var(--leaf); }
}

/* Sections */
main { display: block; }
.section { padding: clamp(64px, 9vw, 128px) var(--gutter); }
.section.leaf { background: var(--leaf); }
/* Two light green bands in a row get a thin line between them so they read as two sections. */
.section.leaf + .section.leaf { border-top: 1px solid rgba(41, 91, 26, 0.3); }
.section.forest { background: var(--forest); color: var(--white); }
.section.forest .mute, .section.forest a { color: rgba(255,255,255,0.78); }
.section.forest .btn { border-color: var(--white); color: var(--white); }
.section.forest .btn.solid { background: var(--green); color: var(--ink); border-color: var(--green); }
.section.forest h2, .section.forest h3 { color: var(--white); }
/* A screen is one window tall with its content centred. If the content would be taller than the
   window, js/site.js scales it down to fit (never below 72 percent). */
.screen { min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + clamp(8px, 2.5svh, 28px)); padding-bottom: clamp(16px, 4svh, 48px); }
.screen > .wrap { margin-top: auto; margin-bottom: auto; }
.screen.last { min-height: calc(100svh - var(--foot-h, 0px)); }
.screen > .marquee { flex: none; margin: 0 calc(-1 * var(--gutter)); }
#how.screen { padding-bottom: 0; }
.wrap { max-width: 1280px; margin: 0 auto; width: 100%; }
.mute { color: var(--mute); }
.small { font-size: 0.92rem; }

/* Buttons */
.btn {
  display: inline-block; padding: 14px 22px; border: 1px solid var(--forest); border-radius: 999px;
  font-family: var(--sans); font-weight: 400; font-size: 0.98rem; color: var(--forest); background: transparent;
  cursor: pointer; transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.btn:hover { background: var(--forest); color: var(--white); }
.btn.solid { background: var(--forest); color: var(--white); }
.btn.solid:hover { background: var(--ink); border-color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Hero (home) */
.hero {
  position: relative; min-height: 100svh; display: grid;
  grid-template-columns: 1fr; align-items: center;
  padding: calc(var(--nav-h) + clamp(8px, 3svh, 32px)) var(--gutter) clamp(16px, 4svh, 48px);
  overflow: hidden;
}
.hero h1 { font-size: clamp(2.2rem, min(5.6vw, 9.4svh), 5.1rem); }
.hero .hero-cities { margin-bottom: clamp(8px, 2svh, 18px); }
.hero .hero-lead { margin-top: clamp(10px, 2.4svh, 22px); }
.hero .btn-row { margin-top: clamp(14px, 3svh, 28px); }
.hero-ring {
  position: absolute; right: -4vw; top: 50%; width: clamp(340px, 44vw, 680px);
  transform: translateY(-50%); pointer-events: none; z-index: 0;
  will-change: transform, opacity; mix-blend-mode: multiply;
}
.hero-copy { position: relative; z-index: 1; max-width: 880px; }
/* The extra space below each line keeps the tails of g, p and y from being clipped */
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.2em; }
.hero h1 .line span { display: inline-block; }
.hero-lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 48ch; margin-top: 22px; color: var(--mute); font-weight: 300; }
@media (min-width: 761px) and (max-width: 1100px) { .hero-lead { max-width: 50vw; } }
.hero-cities { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--forest); margin-bottom: 18px; }
@media (max-width: 760px) {
  .hero { align-items: start; padding-top: calc(var(--nav-h) + 24px); }
  .hero-ring { position: relative; right: auto; top: auto; transform: none; width: min(40vw, 13svh); margin: 0 0 10px; }
  .hero { display: flex; flex-direction: column; justify-content: center; }
  /* Let the headline wrap naturally on phones instead of forcing four lines */
  .hero h1 .line, .hero h1 .line span { display: inline; overflow: visible; }
}

/* Proof row */
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--line); padding-top: clamp(14px, 3svh, 28px); margin-top: clamp(20px, 5svh, 56px); }
.proof .num { font-family: var(--serif); font-size: clamp(2rem, min(5vw, 7.5svh), 4.4rem); line-height: 1; color: var(--forest); }
.proof .lab { color: var(--mute); margin-top: 6px; font-size: 0.95rem; }
@media (max-width: 600px) { .proof { gap: 12px; } .proof .num { font-size: 2rem; } .proof .lab { font-size: 0.8rem; line-height: 1.35; } }

/* Upcoming */
.upcoming { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.upcoming .card {
  background: var(--forest); color: var(--white); padding: clamp(28px, 4vw, 48px); border-radius: 4px;
  position: relative; overflow: hidden;
}
.upcoming .card::after {
  content: ""; position: absolute; right: -110px; bottom: -150px; width: 280px; height: 280px; border-radius: 50%;
  border: 36px solid var(--green); opacity: 0.45; transform: rotate(-14deg);
}
.upcoming .card > * { position: relative; }
.upcoming .when { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; }
.upcoming .where { color: rgba(255,255,255,0.8); margin-top: 8px; }
.placeholder { background: #fff6cc; color: #5a4a00; padding: 2px 6px; border-radius: 3px; font-size: 0.9em; font-weight: 400; }
.section.forest .placeholder { background: rgba(255,246,204,0.95); }
@media (max-width: 900px) { .upcoming { grid-template-columns: 1fr; } }

/* How a circle works */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 48px; }
.how h3 { margin-bottom: 12px; }
.how p { color: var(--mute); }
@media (max-width: 800px) { .how { grid-template-columns: 1fr; gap: 32px; } }
.formats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 44px); margin-top: 44px; }
.formats h3 { margin-bottom: 12px; }
.formats p { color: var(--mute); font-size: 0.98rem; }
@media (max-width: 1000px) { .formats { grid-template-columns: repeat(2, 1fr); gap: 36px 32px; } }
@media (max-width: 600px) { .formats { grid-template-columns: 1fr; gap: 28px; } }

/* Marquee */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; white-space: nowrap; }
.marquee-track { display: inline-flex; gap: 0; will-change: transform; }
.marquee p { display: inline-block; margin: 0; padding: 0 1.2em; font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 3.4vw, 3rem); color: var(--forest); }
.marquee p::after { content: ""; display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; border: 0.16em solid var(--green); margin-left: 1.2em; vertical-align: middle; }

/* Event list (home and circles) */
.events { display: grid; gap: 0; }
.event {
  display: grid; grid-template-columns: 180px minmax(0, 1fr) 320px; gap: clamp(20px, 3vw, 48px);
  padding: 36px 0; border-top: 1px solid var(--line); align-items: start;
}
.event:last-child { border-bottom: 1px solid var(--line); }
.event .date { font-family: var(--serif); font-size: 1.35rem; line-height: 1.15; color: var(--forest); }
.event .date small { display: block; font-family: var(--sans); font-size: 0.9rem; color: var(--mute); margin-top: 6px; font-style: normal; }
.event h3 { font-style: italic; margin-bottom: 10px; }
.event .venue { color: var(--mute); margin-bottom: 12px; font-size: 0.95rem; }
.event .guests { font-size: 0.95rem; color: var(--mute); }
.event figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--leaf); }
.event figure img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
@media (max-width: 900px) {
  .event { grid-template-columns: 1fr; gap: 14px; }
  .event figure { order: -1; }
}

/* Circles page: pinned city column */
.circles-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.city-pin { position: sticky; top: calc(var(--nav-h) + 24px); }
.city-pin .city { font-family: var(--serif); font-style: italic; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1; color: var(--forest); min-height: 1.1em; }
.city-pin .year { font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 2rem); color: var(--mute); margin-top: 10px; }
.city-pin .hint { margin-top: 24px; color: var(--mute); font-size: 0.92rem; max-width: 24ch; }
.city-pin .jump { margin-top: 24px; display: flex; flex-direction: column; gap: 6px; font-size: 0.95rem; }
.city-pin .jump a { color: var(--forest); }
@media (max-width: 900px) {
  .circles-layout { grid-template-columns: 1fr; }
  .city-pin { position: static; }
  .city-pin .hint, .city-pin .city, .city-pin .year { display: none; }
  .city-pin .jump { margin-top: 0; flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
}
.city-group h2 { font-style: italic; margin: 48px 0 8px; }
.city-group:first-of-type h2 { margin-top: 0; }

/* Partners */
.partners { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 24px; font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.8rem); color: var(--forest); }
.partners span { padding: 4px 0; }
/* Logo rail: rolls slowly once js/site.js has doubled the list; without motion it wraps as a static grid */
.logo-rail { margin-top: 44px; overflow: hidden; }
/* Sponsors band on Home: about half a window on tablet and desktop, with half the usual padding */
.section.half { min-height: 46svh; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(28px, 4.5vw, 60px); padding-bottom: clamp(28px, 4.5vw, 60px); }
.section.half .logo-rail { margin-top: 24px; }
.flat .section.half { min-height: 0; }
@media (max-width: 700px) { .section.half { min-height: 0; } }
.logo-track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 26px clamp(40px, 5vw, 68px); }
.logo-track li { flex: none; display: flex; align-items: center; height: 66px; }
.logo-track img { height: var(--lh, 46px); width: auto; max-width: var(--mw, 200px); object-fit: contain; display: block; }
.logo-rail.is-rolling { -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.logo-rail.is-rolling .logo-track { flex-wrap: nowrap; width: max-content; gap: 0; animation: logo-roll 90s linear infinite; }
.logo-rail.is-rolling .logo-track li { margin-right: clamp(52px, 6vw, 88px); }
.logo-rail.is-rolling:hover .logo-track { animation-play-state: paused; }
@keyframes logo-roll { to { transform: translateX(-50%); } }
@media (max-width: 600px) {
  .logo-track li { height: 56px; }
  .logo-track img { height: calc(var(--lh, 46px) * 0.82); max-width: calc(var(--mw, 200px) * 0.82); }
}

/* Newsletter and forms */
.newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (max-width: 800px) { .newsletter { grid-template-columns: 1fr; } }
form { max-width: 560px; }
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font-size: 0.92rem; font-weight: 400; color: var(--forest); }
input[type="text"], input[type="email"], select, textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--white); font: inherit; color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--forest); outline: none; box-shadow: 0 0 0 3px rgba(79,202,48,0.25); }
textarea { min-height: 140px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; color: var(--mute); }
.check input { margin-top: 5px; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form input[type="email"] { flex: 1 1 240px; }
.form-note { font-size: 0.9rem; color: var(--mute); margin-top: 12px; }
.form-status { margin-top: 14px; font-weight: 400; color: var(--forest); min-height: 1.4em; }
.two-forms { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .two-forms { grid-template-columns: 1fr; } }

/* Team */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 5vw, 72px) clamp(24px, 4vw, 56px); margin-top: 48px; }
.person { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; }
.person figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: var(--leaf); }
.person figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.person h3 { margin-bottom: 4px; }
.person .role { color: var(--forest); font-size: 0.95rem; margin-bottom: 12px; }
.person p { font-size: 0.98rem; }
.person .btn { margin-top: 14px; }
.person .li { font-size: 0.92rem; margin-top: 10px; display: inline-block; color: var(--forest); text-decoration: underline; text-underline-offset: 0.18em; }
@media (max-width: 1000px) { .team { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .person { grid-template-columns: 1fr; } .person figure { max-width: 220px; } }

/* Advisory */
/* Strategic Coverage and Business Enhancements share one screen. The six services sit in a table
   of three by two: the 1px gaps let the darker grid behind show through as shared outlines. */
#coverage h2 { font-size: clamp(1.8rem, min(3.4vw, 6svh), 3rem); }
.cover-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 1px; margin-top: clamp(14px, 2.6svh, 28px); background: rgba(41, 91, 26, 0.3); }
.cover-table > div { position: relative; background: var(--leaf); padding: clamp(14px, 1.7vw, 24px); transition: transform 250ms ease, background-color 250ms ease, box-shadow 250ms ease; }
.cover-table h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); margin-bottom: 6px; }
.cover-table p { color: var(--mute); font-size: 1rem; line-height: 1.45; max-width: none; }
@media (hover: hover) and (pointer: fine) {
  .cover-table > div:hover { transform: scale(1.03); background: var(--white); box-shadow: 0 0 0 1px var(--green); z-index: 2; }
  .no-motion .cover-table > div { transition: none; }
  .no-motion .cover-table > div:hover { transform: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .cover-table > div:hover { transform: none; }
}
.enhance { margin-top: clamp(14px, 2.8svh, 30px); padding: clamp(14px, 2.6svh, 28px) clamp(14px, 1.7vw, 24px); background: rgba(255, 255, 255, 0.72); }
.areas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px clamp(16px, 2vw, 32px); margin: clamp(10px, 1.8svh, 18px) 0 0; padding: 0; list-style: none; font-family: var(--serif); font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.25; color: var(--forest); }
@media (max-width: 1000px) { .areas { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
  /* Phones: six boxes and ten items cannot share one screen at a readable size, so this section
     runs longer than the window. --free tells js/site.js not to scale it down. */
  #coverage { --free: 1; min-height: 0; padding-bottom: 40px; }
  .cover-table { grid-template-columns: repeat(2, 1fr); }
  .cover-table > div { padding: 12px; }
  .cover-table h3 { font-size: 1.12rem; }
  .cover-table p { font-size: 0.84rem; line-height: 1.4; }
  .areas { grid-template-columns: repeat(2, 1fr); gap: 8px 16px; font-size: 1.05rem; }
}

/* Members */
.rules { counter-reset: rule; list-style: none; padding: 0; margin: 32px 0 0; max-width: 640px; }
.rules li { counter-increment: rule; display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.rules li::before { content: counter(rule); font-family: var(--serif); font-size: 1.8rem; color: var(--forest); line-height: 1; }
.rules li:last-child { border-bottom: 1px solid var(--line); }
.links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.links a.tile { display: block; padding: 28px; border: 1px solid var(--line); border-radius: 4px; }
.links a.tile:hover { border-color: var(--forest); }
.links .tile h3 { margin-bottom: 8px; }
.links .tile p { color: var(--mute); font-size: 0.95rem; }
@media (max-width: 700px) { .links { grid-template-columns: 1fr; } }

/* Page intro */
.page-head { padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 112px)); padding-bottom: 0; }
.page-head + .section.leaf { margin-top: clamp(40px, 6vw, 80px); }
.page-head.center { text-align: center; }
.page-head.center p.lead { margin-left: auto; margin-right: auto; }
.page-head.center p.lead.long { max-width: 60ch; }
.page-head p.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--mute); max-width: 54ch; margin-top: 20px; }

/* Footer */
.site-foot { background: var(--ink); color: rgba(255,255,255,0.8); padding: 56px var(--gutter) 40px; font-size: 0.95rem; }
.site-foot .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.site-foot h4 { font-family: var(--sans); font-weight: 400; color: var(--white); margin: 0 0 12px; font-size: 0.95rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-foot a:hover { color: var(--green); }
.site-foot .brand { color: var(--white); margin-bottom: 14px; }
.site-foot .fine { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 20px; margin-top: 16px; color: rgba(255,255,255,0.55); font-size: 0.85rem; }
@media (max-width: 800px) { .site-foot .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-foot .wrap { grid-template-columns: 1fr; } }

/* Reveal helpers (JS adds .is-ready to html) */
.is-ready .reveal { opacity: 0; transform: translateY(18px); }
.is-ready .hero h1 .line span { transform: translateY(135%); }
.is-ready .hero-ring, .is-ready .hero-after { opacity: 0; }
.event.no-img { grid-template-columns: 180px minmax(0, 1fr); }
.event .photo-note { aspect-ratio: 4 / 3; border-radius: 4px; background: var(--leaf); display: grid; place-items: center; padding: 20px; text-align: center; font-size: 0.9rem; color: var(--mute); }
@media (max-width: 900px) { .event.no-img { grid-template-columns: 1fr; } }
/* Small laptops and landscape tablets: narrower side columns so the event text keeps its room */
@media (min-width: 901px) and (max-width: 1180px) {
  .circles-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 32px; }
  .circles-layout .event { grid-template-columns: 136px minmax(0, 1fr) 220px; gap: 20px; }
  .circles-layout .event.no-img { grid-template-columns: 136px minmax(0, 1fr); }
  .city-pin .city { font-size: 2.6rem; }
}
.no-motion .reveal, .no-motion .hero h1 .line span { opacity: 1 !important; transform: none !important; }

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

/* City tabs (circles page) */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.tabs [role="tab"] {
  font: inherit; font-weight: 400; font-size: 0.95rem; color: var(--forest);
  background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.tabs [role="tab"]:hover { border-color: var(--forest); }
.tabs [role="tab"][aria-selected="true"] { background: var(--forest); color: var(--white); border-color: var(--forest); }
.event[hidden] { display: none; }
.events-empty { padding: 40px 0; color: var(--mute); }

/* Join links */
.join { display: inline-block; margin-top: 14px; font-size: 0.92rem; color: var(--forest); text-decoration: underline; text-underline-offset: 0.18em; }
.join-box { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--mute); }
.join-box p { margin-bottom: 12px; }
.btn.small-btn { padding: 10px 16px; font-size: 0.9rem; }
[hidden] { display: none !important; }

/* Upcoming circles: a green edge, a tinted block and a pill, so they read apart from the archive.
   js/site.js decides upcoming or past from each event's data-date. */
.event.upcoming { background: var(--leaf); border-top-color: transparent; border-left: 4px solid var(--green); border-radius: 0 6px 6px 0; padding: 30px clamp(18px, 2.6vw, 32px); margin-bottom: 12px; }
.event.upcoming + .event.upcoming { margin-top: 0; }
.badge { display: flex; width: max-content; align-items: center; gap: 7px; font-family: var(--sans); font-size: 0.78rem; font-weight: 500; line-height: 1; color: var(--forest); background: var(--white); border: 1px solid var(--green); border-radius: 999px; padding: 5px 11px 5px 9px; margin-bottom: 12px; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.list-divider { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--ink); margin: 44px 0 18px; }
.list-divider:first-child { margin-top: 0; }

/* Upcoming circles: a plain green circle around each event, with the details inside it.
   The section is one screen tall and the circles shrink to fit it. Text is sized in container
   units so it scales with the circle. */
#next { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--nav-h) + clamp(12px, 3svh, 32px)); padding-bottom: clamp(24px, 5svh, 56px); overflow-x: clip; }
.flat #next { min-height: 0; }
.rings-head { text-align: center; }
.rings-head h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.rings-head p { max-width: 560px; margin: 14px auto 0; }
.rings { --gap: clamp(16px, 3vw, 48px); --d: clamp(280px, min(calc((100vw - 2 * var(--gutter) - var(--gap)) / 2), calc(100svh - var(--nav-h) - 250px)), 560px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin-top: clamp(18px, 3svh, 36px); }
.ring-item { flex: none; }
.ring { position: relative; width: var(--d); height: var(--d); border-radius: 50%; background: rgba(255, 255, 255, 0.72); container-type: inline-size; display: grid; place-items: center; transition: transform 350ms ease; }
/* A pale hairline keeps the disc reading as a circle while the green edge is not drawn */
.ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line); pointer-events: none; }
/* The outline is an SVG circle so it can draw itself in. Its width is 2.6 percent of the circle. */
.ring-stroke { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
/* The dash is a hair longer than the circle so the two ends overlap and leave no seam. The gap is
   longer than the circle so that no speck of the next dash shows at the top while undrawn. */
.ring-stroke circle { fill: none; stroke: var(--green); stroke-width: 2.6; stroke-dasharray: 1.03 1.2; stroke-dashoffset: 0; }
.ring-body { position: relative; width: 70cqw; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ring-body p { margin: 0; max-width: none; }
.ring-body h3 { font-style: italic; font-size: max(19px, 6.6cqw); line-height: 1.08; max-width: 64cqw; text-wrap: balance; }
.ring-body .ring-where { margin-top: 2.2cqw; font-size: max(14px, 3.6cqw); line-height: 1.32; font-weight: 500; color: var(--forest); }
.ring-body .ring-when { font-size: max(14px, 3.6cqw); line-height: 1.32; }
.ring-body .ring-details { margin-top: 1.8cqw; max-width: 60cqw; font-size: max(13px, 3.2cqw); line-height: 1.38; color: var(--mute); text-wrap: balance; }
.ring-body .btn { margin-top: 3cqw; }
/* Small circles (phones): slightly smaller type and button so the text stays clear of the outline */
@container (max-width: 340px) {
  .ring-body h3 { font-size: 18px; }
  .ring-body .ring-where, .ring-body .ring-when { font-size: 13px; line-height: 1.3; }
  .ring-body .ring-details { font-size: 12px; margin-top: 4px; max-width: 56cqw; }
  .ring-body .btn { margin-top: 7px; padding: 8px 14px; font-size: 0.84rem; }
}
.is-ready .ring-stroke circle { stroke-dashoffset: 1.03; }
.is-ready .ring-body { opacity: 0; transform: translateY(10px); }
/* With a mouse: no green edge at rest. On hover or keyboard focus it draws clockwise from the top
   and the circle grows a little; it undraws on leave. Touch screens keep the edge that draws once
   on entrance (js/site.js). */
@media (hover: hover) and (pointer: fine) {
  .ring-stroke circle { stroke-dashoffset: 1.03; transition: stroke-dashoffset 400ms ease-in-out; }
  .ring:hover .ring-stroke circle, .ring:focus-within .ring-stroke circle { stroke-dashoffset: 0; transition-duration: 800ms; }
  .ring:hover, .ring:focus-within { transform: scale(1.04); }
  .no-motion .ring, .no-motion .ring-stroke circle { transition: none; }
  .no-motion .ring:hover, .no-motion .ring:focus-within { transform: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .ring:hover, .ring:focus-within { transform: none; }
}
@media (max-width: 700px) {
  /* Too narrow for two side by side: the circles sit in a row that swipes sideways, with the
     next one showing at the edge, so the section still fits one screen */
  .rings { --d: clamp(260px, min(calc(100vw - 2 * var(--gutter) - 24px), calc(100svh - var(--nav-h) - 290px)), 440px); flex-wrap: nowrap; justify-content: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; }
  .rings::-webkit-scrollbar { display: none; }
  .rings::before, .rings::after { content: ""; flex: 1 0 0px; margin: 0 -7px; }
  .ring-item { scroll-snap-align: center; }
}

/* Upcoming cards: the next one in forest, later ones lighter beneath it */
.card-stack { display: grid; gap: 14px; }
.upcoming .card .what { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1.9vw, 1.55rem); line-height: 1.2; margin-top: 18px; }
.upcoming .card .sub { margin-top: 8px; font-size: 0.95rem; color: rgba(255,255,255,0.85); }
.upcoming .card .btn-row { margin-top: 20px; }
.upcoming .card .btn { border-color: var(--white); color: var(--white); }
.upcoming .card .btn:hover { background: var(--white); color: var(--forest); }
.upcoming .card.is-later { background: var(--white); color: var(--ink); border: 1px solid var(--line); padding: clamp(20px, 2.6vw, 30px); }
.upcoming .card.is-later::after { display: none; }
.upcoming .card.is-later .when { font-size: clamp(1.35rem, 2vw, 1.7rem); color: var(--forest); }
.upcoming .card.is-later .where, .upcoming .card.is-later .sub { color: var(--mute); }
.upcoming .card.is-later .what { margin-top: 12px; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.upcoming .card.is-later .btn { border-color: var(--forest); color: var(--forest); padding: 10px 16px; font-size: 0.9rem; }
.upcoming .card.is-later .btn:hover { background: var(--forest); color: var(--white); }

/* Event galleries and portrait posters */
.event .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.event .gallery figure:first-child { grid-column: 1 / -1; }
.event figure.portrait { aspect-ratio: 3 / 4; }
.event .gallery.two figure { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
@media (max-width: 900px) { .event .gallery { order: -1; } }

/* Testimonials */
.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 32px; }
.voice { margin: 0; padding: 28px 0 0; border-top: 2px solid var(--green); }
.voice p { font-family: var(--serif); font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.25; color: var(--ink); }
.voice footer { margin-top: 16px; font-size: 0.92rem; color: var(--mute); }
@media (max-width: 800px) { .voices { grid-template-columns: 1fr; } }

/* Debug aid: ?flat in the URL removes full-height sections for tall screenshots */
.flat .fill, .flat .hero, .flat .screen { min-height: 0; }

/* Display type: a touch more air between letters */
.brand, .hero-cities, .proof .num, .upcoming .when, .upcoming .card .what, .marquee p, .event .date, .city-pin .city, .city-pin .year, .list-divider, .areas, .voice p { letter-spacing: 0.012em; }

/* Phones: rows of repeated items swipe sideways, with the next one showing at the edge, so each
   screen stays one window tall */
@media (max-width: 700px) {
  .swipe { display: flex; flex-wrap: nowrap; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { flex: 0 0 84%; scroll-snap-align: center; }
  .formats.swipe { margin-top: 28px; }
  .formats.swipe > div { border-top: 2px solid var(--green); padding-top: 16px; }
  .upcoming > div:first-child .btn-row { display: none; }
}

/* Advisory: title and lede fade in, the three steps arrive one after another, and two rows of
   small rings drift in opposite directions at the top and bottom of How It Works */
.is-ready [data-fade] { opacity: 0; transform: translateY(12px); }
.is-ready .trickle > * { opacity: 0; transform: translateY(16px); }
.dot-rail { position: relative; height: 18px; overflow: hidden; margin: 0 calc(-1 * var(--gutter)); }
.dot-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: -46px; right: -46px; background: radial-gradient(circle at 23px 9px, transparent 0, transparent 5.6px, var(--green) 6.1px, var(--green) 8.6px, transparent 9.1px) 0 0 / 46px 18px repeat-x; animation: dots-roll 5s linear infinite; }
.dot-rail.reverse::before { animation-direction: reverse; }
@keyframes dots-roll { to { transform: translateX(-46px); } }
.no-motion .dot-rail::before { animation: none; }
/* How It Works: one window tall, a row of rings just under the nav and another at the bottom edge */
.screen.railed { padding-top: var(--nav-h); padding-bottom: 0; }
.screen.railed > .dot-rail { flex: none; }
.screen.railed > .dot-rail:first-child { margin-top: 10px; }
.screen.railed > .dot-rail:last-child { margin-bottom: 16px; }
.screen.railed > .wrap { padding: 16px 0; }
.screen.railed .how { margin-top: clamp(20px, 4.5svh, 48px); }

/* Contact: concentric rings beside the heading, and the two forms as cards on a light green band */
.page-head.has-orbit { position: relative; overflow: hidden; padding-bottom: clamp(28px, 5vw, 72px); }
.has-orbit .wrap { position: relative; }
.orbit { position: absolute; top: 50%; right: clamp(-200px, -8vw, -60px); width: clamp(380px, 44vw, 640px); height: auto; transform: translateY(-46%) rotate(-90deg); pointer-events: none; }
.orbit circle { fill: none; stroke: var(--green); stroke-width: 2; stroke-dasharray: 1.03 1.2; stroke-dashoffset: 0; opacity: 0.34; }
.orbit circle:nth-child(2) { opacity: 0.46; }
.orbit circle:nth-child(3) { stroke-width: 9; opacity: 0.5; }
.is-ready .orbit circle { stroke-dashoffset: 1.03; }
.page-head.has-orbit + .section.leaf { margin-top: 0; }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: clamp(22px, 3vw, 40px); }
.form-card h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-bottom: 22px; }
.form-card form { max-width: none; }
.forms-band .two-forms { align-items: stretch; }
.reach { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; max-width: none; font-size: 0.95rem; color: var(--mute); }
.reach a { color: var(--forest); text-decoration: underline; text-underline-offset: 0.18em; }
@media (max-width: 760px) {
  .orbit { top: 0; right: -30vw; width: 70vw; transform: translateY(-55%) rotate(-90deg); }
}