/* Shared by every Core to Community page: index.html, events/index.html,
   directory/index.html. Moved out of index.html's third <style> tag on
   2026-09-14 so the pages can't drift apart. Load it after the donor
   Webflow CSS and the donor inline <style> blocks. */

/* ------------------------------------------------------------------
   Core to Community additions. Self-contained: nothing here depends on
   a donor Webflow class continuing to exist, except the small donor
   overrides at the top (logo, hero text guard), which exist to fix
   donor bugs without touching the locked hero markup.

   2026-09-13, homepage v3: everything below the hero was rebuilt from
   the design canvas (https://claude.ai/code/artifact/106e07ca-a5cf-40bb-969d-a7ab65eb1cde).
   Each section has its own shell: two colour doors, an editorial
   list, dashed roadmap tiles, a dotted map, a hairline logo strip,
   a photo grid, and an ink closer. State language used throughout:
   green dot = live now, dashed ring / dashed outline = coming.
   ------------------------------------------------------------------ */

:root {
  --c2c-bg: #fcfbf8;
  --c2c-surface: #ededea;
  --c2c-white: #ffffff; /* spotlight card, form fields */
  --c2c-error: #b91c1c; /* form errors, 6:1 on cream */
  --c2c-circle: #f0f0ee; /* the hero circle's own grey */
  --c2c-ink: #001011;
  --c2c-muted: #5c6566; /* 6.5:1 on --c2c-bg */
  --c2c-line: #c1c4c2;
  --c2c-dash: #8b9496;
  --c2c-accent: #ff272a; /* logo red; 3.64:1 on cream, large text/fills only */
  --c2c-accent-on-ink: #ff5d5f; /* the reversed logo's red */
  --c2c-live: #58cd36; /* logo leaf green; dots only, never text */
  --c2c-ink-text: #c9d0d0; /* body copy on ink, 12:1 */
  --c2c-ink-muted: #9aa6a7; /* secondary copy on ink, 7.6:1 */
  --c2c-ink-line: #1d2b2c;
  --c2c-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --c2c-gutter: clamp(24px, 3.34vw, 48px);
  --c2c-space: clamp(96px, 11.1vw, 160px);
  --c2c-h2: clamp(40px, 3.9vw, 56px);
  --c2c-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hero globe canvas fills the circular visual wrapper, which Webflow
   animates the width/height of on scroll. The globe's own ResizeObserver
   picks that up, so no JS is needed here. */
.c2c-hero-globe {
  flex: none;
  width: 100%;
  height: 100%;
}

/* --- donor overrides --------------------------------------------- */
/* Logo scaled 24px -> 40px. The donor pins .logo with a hard-coded
   top: 20px that only centred the old height, so centre it properly
   against the bar instead of trading one magic number for another --
   any future logo height then stays centred on its own. Past about
   44px the mark crowds the 64px bar and --header-height would have to
   grow with it. */
.logo {
  top: 0;
  height: var(--header-height, 64px);
  align-items: center;
}
.logo img {
  height: 40px;
  width: auto;
  display: block;
}
/* Under ~400px the 254px-wide mark ran into the hamburger (they
   overlapped by 20px at 320). Cap it on width so it keeps full size
   wherever it fits and only gives way when it has to. */
@media screen and (max-width: 479px) {
  .logo img {
    height: auto;
    width: min(254px, calc(100vw - 130px));
  }
}
/* Donor bug, pre-existing: .hero_header-text is capped at max-width 640px
   with no 100% floor, so as a centred flex item it refuses to shrink
   below its content and pushes ~30px of horizontal scroll onto the whole
   page under about 640px wide. Desktop rendering is unchanged. */
.hero_header-text {
  max-width: min(640px, 100%);
}
.container.is-home_hero {
  max-width: 100%;
}

/* Independence line under the hero's join pill (the footer carries the
   full disclaimer). */
.hero_header-button {
  align-items: center;
}
.c2c-hero-note {
  max-width: 36em;
  margin: 20px 0 0;
  color: var(--c2c-muted);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

/* --- shared pieces ----------------------------------------------- */
.c2c-doors,
.c2c-mission,
.c2c-roadmap,
.c2c-chapters,
.c2c-sponsors,
.c2c-spotlight,
.c2c-council,
.c2c-faq,
.c2c-closer,
.c2c-footer {
  padding-inline: var(--c2c-gutter);
  color: var(--c2c-ink);
}
:where(.c2c-doors, .c2c-mission, .c2c-roadmap, .c2c-chapters, .c2c-sponsors, .c2c-spotlight, .c2c-council, .c2c-footer) ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c2c-h2 {
  margin: 0;
  font-size: var(--c2c-h2);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.c2c-brace {
  color: var(--c2c-accent);
}
/* "{core}" in section headings is the logo itself (braces, letters and
   leaf cut from ctc-logo-primary.svg into ctc-core.svg), sized so its
   lowercase letters match the heading's x-height and sit on its
   baseline. The negative top margin keeps the leaf from pushing the
   line box taller than a plain heading. */
.c2c-core-mark {
  display: inline-block;
  width: auto;
  height: 1.53em;
  margin-top: -0.5em;
  vertical-align: -0.25em;
}
.c2c-mono {
  font-family: var(--c2c-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}
.c2c-dot {
  display: block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c2c-live);
}
.c2c-ring {
  display: block;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px dashed var(--c2c-dash);
}
.c2c-ring--ink {
  border-color: #5d6a6b;
}
.c2c-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(252, 251, 248, 0.08);
  color: var(--c2c-bg);
  font-family: var(--c2c-mono);
  font-size: 13px;
}
.c2c-live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c2c-live);
}
.c2c-live--solid {
  background: var(--c2c-ink);
}
.c2c-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--c2c-ink);
  border-radius: 999px;
  font-family: var(--c2c-mono);
  font-size: 12px;
}

/* The site's arrow glyph, resting at -45deg and turning to 0 on hover,
   the same gesture as the hero's join pill. */
.c2c-arrow {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
  transition: transform 0.45s var(--c2c-ease);
}

/* Outline pill: label + a filled arrow disc. */
.c2c-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 8px 0 22px;
  border: 1.5px solid var(--c2c-ink);
  border-radius: 999px;
  color: var(--c2c-ink);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.c2c-pill__icon {
  display: flex;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 9px;
  border-radius: 50%;
  background: var(--c2c-ink);
  color: var(--c2c-bg);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.c2c-pill:hover,
.c2c-pill:focus-visible {
  background: var(--c2c-ink);
  color: var(--c2c-bg);
}
.c2c-pill:hover .c2c-pill__icon,
.c2c-pill:focus-visible .c2c-pill__icon {
  background: var(--c2c-bg);
  color: var(--c2c-ink);
}
.c2c-pill:hover .c2c-arrow,
.c2c-pill:focus-visible .c2c-arrow {
  transform: rotate(0deg);
}
.c2c-pill--on-ink {
  border-color: rgba(252, 251, 248, 0.4);
  color: var(--c2c-bg);
}
.c2c-pill--on-ink .c2c-pill__icon {
  background: var(--c2c-bg);
  color: var(--c2c-ink);
}
.c2c-pill--on-ink:hover,
.c2c-pill--on-ink:focus-visible {
  background: var(--c2c-bg);
  border-color: var(--c2c-bg);
  color: var(--c2c-ink);
}
.c2c-pill--on-ink:hover .c2c-pill__icon,
.c2c-pill--on-ink:focus-visible .c2c-pill__icon {
  background: var(--c2c-ink);
  color: var(--c2c-bg);
}

/* --- Directory + Events doors ------------------------------------ */
.c2c-doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding-top: 40px;
  padding-bottom: var(--c2c-space);
  background: var(--c2c-bg);
}
.c2c-door {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: clamp(520px, 41.7vw, 600px);
  padding: clamp(28px, 2.8vw, 40px);
  border-radius: 28px;
  text-decoration: none;
  transition: transform 0.5s var(--c2c-ease);
}
.c2c-door--directory {
  background: var(--c2c-ink);
  color: var(--c2c-bg);
}
.c2c-door--events {
  background: var(--c2c-accent);
  color: var(--c2c-ink);
}
/* The donor's nav rule `a:is(:focus-visible, :hover) { color: canvasText }`
   (0,1,1) outranks a single class, so on hover or keyboard focus the
   Directory title went black on its ink card. Pin both doors' colours in
   those states too. */
.c2c-door--directory:is(:hover, :focus-visible) {
  color: var(--c2c-bg);
}
.c2c-door--events:is(:hover, :focus-visible) {
  color: var(--c2c-ink);
}
.c2c-door:hover,
.c2c-door:focus-visible {
  transform: translateY(-4px);
}
.c2c-door:hover .c2c-arrow,
.c2c-door:focus-visible .c2c-arrow {
  transform: rotate(0deg);
}
.c2c-door__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.c2c-door__arrow {
  display: flex;
  flex: none;
  width: 64px;
  height: 64px;
  padding: 21px;
  border-radius: 50%;
  background: var(--c2c-bg);
  color: var(--c2c-ink);
}
.c2c-door--events .c2c-door__arrow {
  background: var(--c2c-ink);
  color: var(--c2c-bg);
}
.c2c-door__copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.c2c-door__title {
  font-size: clamp(40px, 4.45vw, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}
.c2c-door__text {
  max-width: 460px;
  font-size: clamp(17px, 1.46vw, 21px);
  line-height: 1.5;
  text-wrap: pretty;
}
.c2c-door--directory .c2c-door__text {
  color: var(--c2c-ink-text);
}
/* Directory: three blank listing rows hint at the product without
   inventing members. Decorative only. */
.c2c-door__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.c2c-door__row {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 64px;
  padding: 0 16px;
  border-radius: 14px;
  background: rgba(252, 251, 248, 0.09);
}
.c2c-door__row:nth-child(2) {
  background: rgba(252, 251, 248, 0.065);
}
.c2c-door__row:nth-child(3) {
  background: rgba(252, 251, 248, 0.04);
}
.c2c-door__row > span:first-child {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(252, 251, 248, 0.16);
}
.c2c-door__row > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
}
.c2c-door__row i {
  display: block;
  height: 8px;
  width: 62%;
  border-radius: 4px;
  background: rgba(252, 251, 248, 0.28);
}
.c2c-door__row i + i {
  height: 6px;
  width: 42%;
  background: rgba(252, 251, 248, 0.12);
}
.c2c-door__row:nth-child(2) i {
  width: 48%;
}
.c2c-door__row:nth-child(2) i + i {
  width: 28%;
}
.c2c-door__row:nth-child(3) i {
  width: 55%;
}
.c2c-door__row:nth-child(3) i + i {
  width: 35%;
}
.c2c-door__row b {
  flex: none;
  width: 72px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(252, 251, 248, 0.18);
}
/* Events: a honeycomb of tokens. Solid = gatherings we've had, the
   dashed one = the next. Colour comes from the card (currentColor). */
.c2c-door__tokens {
  display: block;
  width: min(100%, 432px);
  height: auto;
  margin-inline: auto;
}

/* --- The Mission ------------------------------------------------- */
.c2c-mission {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--c2c-gutter);
  align-items: start;
  padding-bottom: var(--c2c-space);
  background: var(--c2c-bg);
}
.c2c-mission__tagline {
  display: block;
  color: var(--c2c-accent);
}
.c2c-mission__welcome {
  max-width: 24em;
  margin: 24px 0 0;
  color: var(--c2c-muted);
  font-size: clamp(17px, 1.39vw, 20px);
  font-weight: 400;
  line-height: 1.5;
  text-wrap: balance;
}
/* 24px floor keeps the red braces at large-text size (3.64:1 on cream). */
.c2c-mission__statement {
  max-width: 620px;
  margin: 0.35em 0 0;
  color: var(--c2c-ink);
  font-size: clamp(24px, 1.95vw, 28px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* --- Roadmap ----------------------------------------------------- */
.c2c-roadmap {
  padding-block: clamp(72px, 8.3vw, 120px);
  background: var(--c2c-circle);
}
.c2c-roadmap__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 3.3vw, 48px);
}
.c2c-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 15px;
  color: var(--c2c-muted);
}
.c2c-legend > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.c2c-legend .c2c-dot {
  width: 10px;
  height: 10px;
}
.c2c-legend .c2c-ring {
  width: 12px;
  height: 12px;
}
.c2c-roadmap__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.1vw, 16px);
}
/* Keeps "in-person" from breaking at its hyphen. */
.c2c-nowrap {
  white-space: nowrap;
}
/* Blueprint tiles: each tile draws what is coming in dashed line (dashed =
   not built yet) with one red detail, then names it. */
.c2c-roadmap__list li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: clamp(250px, 21vw, 310px);
  padding: clamp(16px, 2.4vw - 10px, 32px);
  border: 1.5px dashed var(--c2c-dash);
  border-radius: 20px;
  color: var(--c2c-ink);
}
.c2c-roadmap__glyph {
  display: block;
  width: min(100%, 136px);
  height: auto;
  overflow: visible;
}
.c2c-roadmap__glyph .d {
  fill: none;
  stroke: var(--c2c-ink);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.c2c-roadmap__glyph .f {
  fill: var(--c2c-circle); /* the band colour, so the front bubble hides the back one */
}
.c2c-roadmap__glyph .a {
  fill: var(--c2c-accent);
  stroke: none;
}
.c2c-roadmap__glyph .dots {
  fill: var(--c2c-dash);
}
.c2c-roadmap__name {
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
/* Six across holds down to 1120px with every name on two lines at most:
   the fluid gap, padding and name size above keep "Open additional
   chapters" from stacking three deep. Under that: 3 x 2, then 2 x 3. */
@media screen and (max-width: 1119px) {
  .c2c-roadmap__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .c2c-roadmap__list li {
    padding: 24px;
  }
  .c2c-roadmap__glyph {
    width: min(100%, 184px);
  }
  .c2c-roadmap__name {
    font-size: 22px;
  }
}
@media screen and (max-width: 991px) {
  .c2c-roadmap__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 599px) {
  .c2c-roadmap__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .c2c-roadmap__list li {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    min-height: 0;
    padding: 18px 20px;
    border-radius: 16px;
  }
  .c2c-roadmap__glyph {
    flex: none;
    width: 88px;
  }
  .c2c-roadmap__name {
    font-size: 20px;
  }
}

/* --- Current Chapters -------------------------------------------- */
.c2c-chapters {
  display: flex;
  align-items: center;
  gap: clamp(48px, 7.2vw, 104px);
  padding-block: var(--c2c-space);
  background: var(--c2c-bg);
}
.c2c-map {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: min(620px, 43vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c2c-circle);
}
.c2c-map__inner {
  position: relative;
  width: 74%;
  transform: translateX(-1.3%);
}
.c2c-map__inner img {
  display: block;
  width: 100%;
  height: auto;
}
.c2c-map__pin {
  position: absolute;
  top: var(--y);
  right: calc(100% - var(--x) + 22px);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--c2c-line);
  border-radius: 999px;
  background: var(--c2c-bg);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.c2c-chapters__body {
  flex: 1;
  min-width: 0;
}
.c2c-chapters__list {
  margin-top: 40px;
  border-bottom: 1px solid var(--c2c-line);
}
.c2c-chapter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 0;
  border-top: 1px solid var(--c2c-line);
}
.c2c-chapter__top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.c2c-chapter__name {
  font-size: clamp(34px, 3.06vw, 44px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}
.c2c-chapter__text {
  padding-left: 26px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--c2c-muted);
}
.c2c-startcta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 36px;
  padding: 28px;
  border: 1.5px dashed var(--c2c-dash);
  border-radius: 20px;
}
.c2c-startcta__text {
  color: var(--c2c-ink);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 330px;
  margin: 0;
  font-size: clamp(19px, 1.53vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.c2c-startcta__text .c2c-ring {
  width: 12px;
  height: 12px;
  margin-top: 7px;
}
/* Second line, indented to sit under the question's text (ring 12px +
   gap 14px). */
.c2c-startcta__note {
  max-width: 330px;
  margin: 8px 0 0;
  padding-left: 26px;
  color: var(--c2c-muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  text-wrap: balance;
}

/* --- Core Sponsors ----------------------------------------------- */
.c2c-sponsors {
  padding-bottom: var(--c2c-space);
  background: var(--c2c-bg);
}
.c2c-sponsors__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 48px;
  border-block: 1px solid var(--c2c-line);
}
.c2c-sponsors__list li + li {
  border-left: 1px solid var(--c2c-line);
}
.c2c-sponsors__list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  height: 230px;
  padding: 24px 16px;
  color: var(--c2c-ink);
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.c2c-sponsors__list a:hover,
.c2c-sponsors__list a:focus-visible {
  background: var(--c2c-circle);
}
.c2c-sponsors__list a:hover .c2c-chip,
.c2c-sponsors__list a:focus-visible .c2c-chip {
  background: var(--c2c-accent);
  color: var(--c2c-bg);
}
.c2c-sponsors__list a:hover .c2c-arrow,
.c2c-sponsors__list a:focus-visible .c2c-arrow {
  transform: rotate(0deg);
}
.c2c-sponsors__logo {
  display: flex;
  align-items: center;
  height: 92px;
}
.c2c-sponsors__list img {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--logo-h, 64px);
  object-fit: contain;
}

/* --- Member spotlight -------------------------------------------- */
.c2c-spotlight {
  padding-bottom: var(--c2c-space);
  background: var(--c2c-bg);
}
.c2c-spotlight__card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  margin-top: 48px;
  border: 1px solid var(--c2c-line);
  border-radius: 24px;
  background: var(--c2c-white);
  overflow: hidden;
}
.c2c-spotlight__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 4.45vw, 64px);
  border-right: 1px solid var(--c2c-line);
}
.c2c-spotlight__brand img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
}
.c2c-spotlight__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding: clamp(32px, 3.9vw, 56px);
}
.c2c-spotlight__label {
  margin: 0;
  color: var(--c2c-muted);
}
.c2c-spotlight__name {
  margin: 0;
  font-size: clamp(36px, 3.34vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.c2c-spotlight__text {
  max-width: 520px;
  margin: 14px 0 0;
  color: var(--c2c-muted);
  font-size: clamp(19px, 1.53vw, 22px);
  line-height: 1.35;
  text-wrap: pretty;
}
.c2c-spotlight__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin: 0;
}
.c2c-spotlight__facts dt {
  color: var(--c2c-muted);
  font-weight: 400;
}
.c2c-spotlight__facts dd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 17px;
  font-weight: 500;
}
.c2c-spotlight__pin {
  width: 18px;
  height: 18px;
  flex: none;
}
.c2c-spotlight__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --- Core Council ------------------------------------------------ */
.c2c-council {
  padding-bottom: var(--c2c-space);
  background: var(--c2c-bg);
}
.c2c-council__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 24px;
  margin-top: 48px;
}
.c2c-person {
  display: flex;
  flex-direction: column;
}
.c2c-person__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 20px;
  background: var(--c2c-surface);
}
/* Name left, badge right on the name's first line. The name wraps
   inside its own space rather than knocking the badge to a new line. */
.c2c-person__head {
  display: flex;
  align-items: flex-start;
  gap: 6px 10px;
  margin-top: 18px;
}
.c2c-person__head .c2c-person__name {
  min-width: 0;
}
.c2c-person__name {
  font-size: clamp(17px, 1.53vw, 22px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.c2c-person__title {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--c2c-muted);
}
/* Tenure badge: years at Apple, set right after the name. The mark is
   the same apple glyph the hero globe draws (assets/js/globe.js). */
.c2c-tenure {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  /* centre the 24px pill on the name's first line (name is
     clamp(17px, 1.53vw, 22px) at line-height 1.2) */
  margin-top: calc((clamp(17px, 1.53vw, 22px) * 1.2 - 24px) / 2);
  gap: 5px;
  height: 24px;
  padding: 0 9px 0 8px;
  border-radius: 999px;
  background: var(--c2c-ink);
  color: var(--c2c-bg);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.c2c-tenure__mark {
  display: block;
  flex: none;
  width: 10px;
  height: 12px;
  margin-top: -2px;
  fill: currentColor;
}
.c2c-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.c2c-person__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
/* Link chip: the join pill's anatomy at a smaller size (ink arrow disc
   on the left, label on a pill) in grey at rest, and the join pill's
   own red on hover. */
.c2c-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px 0 42px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--c2c-surface);
  color: var(--c2c-ink);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.c2c-chip__icon {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 32px;
  height: 32px;
  padding: 9px;
  border-radius: 0 16px 16px 0;
  background: var(--c2c-ink);
  color: var(--c2c-bg);
}
.c2c-chip:hover,
.c2c-chip:focus-visible {
  background: var(--c2c-accent);
  color: var(--c2c-bg);
}
.c2c-chip:hover .c2c-arrow,
.c2c-chip:focus-visible .c2c-arrow {
  transform: rotate(0deg);
}
.c2c-invite {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  aspect-ratio: 1;
  padding: clamp(18px, 2.2vw, 32px);
  border-radius: 20px;
  background: var(--c2c-ink);
  color: var(--c2c-bg);
}
.c2c-invite__text {
  margin: 0;
  color: var(--c2c-bg);
  font-size: clamp(19px, 1.95vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.c2c-invite__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.c2c-invite .c2c-pill {
  min-height: 44px;
}

/* Phones swap "get in touch" for the shorter "reach out" so the pill fits
   the half-width card. */
.c2c-invite__short {
  display: none;
}

/* --- FAQ ---------------------------------------------------------
   Numbered hairline rows on the roadmap's grey band. Each row is a native
   <details>: number, question, and a round +/× toggle; the answer lines up
   under the question. */
.c2c-faq {
  padding-block: var(--c2c-space);
  background: var(--c2c-circle);
}
.c2c-faq__item {
  border-top: 1px solid var(--c2c-line);
}
.c2c-faq__item summary {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
}
.c2c-faq__item summary::-webkit-details-marker {
  display: none;
}
.c2c-faq__item summary:focus-visible {
  outline: 2px solid var(--c2c-ink);
  outline-offset: 4px;
  border-radius: 4px;
}
.c2c-faq__num {
  color: var(--c2c-muted);
  font-family: var(--c2c-mono);
  font-size: 13px;
  line-height: 1.4;
}
.c2c-faq__q {
  color: var(--c2c-ink);
  font-size: clamp(20px, 1.67vw, 24px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.c2c-faq__icon {
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c2c-line);
  border-radius: 50%;
  color: var(--c2c-ink);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.3s var(--c2c-ease);
}
.c2c-faq__icon::before,
.c2c-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 4px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.c2c-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.c2c-faq__item summary:hover .c2c-faq__icon {
  border-color: var(--c2c-ink);
  background: var(--c2c-bg);
}
/* Also while hovered: this must outrank the hover rule above. */
.c2c-faq__item[open] summary .c2c-faq__icon {
  border-color: var(--c2c-ink);
  background: var(--c2c-ink);
  color: var(--c2c-bg);
  transform: rotate(45deg);
}
.c2c-faq__a {
  padding: 0 68px 32px 88px;
}
.c2c-faq__a p {
  max-width: 720px;
  margin: 0;
  color: var(--c2c-ink);
  font-size: clamp(17px, 1.39vw, 19px);
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .c2c-faq__item summary {
    grid-template-columns: 28px minmax(0, 1fr) 40px;
    gap: 12px;
    padding: 20px 0;
  }
  .c2c-faq__q {
    font-size: 19px;
  }
  .c2c-faq__icon {
    width: 40px;
    height: 40px;
  }
  .c2c-faq__a {
    padding: 0 0 24px 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c2c-faq__icon {
    transition: none;
  }
}

/* The FAQ list carried as one whole ink block (the doors' own device):
   cream question type, continuous 01-13 numbering, no category breaks. */
.c2c-faqx-ledger {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.3vw, 48px);
}
.c2c-faqx-ledger__panel {
  background: var(--c2c-ink);
  border-radius: 28px;
  padding: 4px clamp(24px, 3vw, 40px);
}
.c2c-faqx-ledger__item {
  border-top: 1px solid var(--c2c-ink-line);
}
.c2c-faqx-ledger__list > .c2c-faqx-ledger__item:first-child {
  border-top: 0;
}
.c2c-faqx-ledger__item summary {
  padding-block: 24px;
}
.c2c-faqx-ledger__num {
  color: var(--c2c-ink-muted);
}
.c2c-faqx-ledger__q {
  color: var(--c2c-bg);
}
.c2c-faqx-ledger__icon {
  border-color: var(--c2c-ink-line);
  color: var(--c2c-bg);
}
.c2c-faqx-ledger__item summary:hover .c2c-faqx-ledger__icon {
  border-color: var(--c2c-bg);
  background: transparent;
}
.c2c-faqx-ledger__item[open] summary .c2c-faqx-ledger__icon {
  border-color: var(--c2c-bg);
  background: var(--c2c-bg);
  color: var(--c2c-ink);
}
.c2c-faqx-ledger__a p {
  color: var(--c2c-ink-text);
}

/* --- Closer ------------------------------------------------------ */
.c2c-closer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  padding-top: var(--c2c-space);
  padding-bottom: clamp(80px, 9.7vw, 140px);
  background: var(--c2c-ink);
  color: var(--c2c-bg);
}
.c2c-closer__title {
  margin: 0;
  color: var(--c2c-bg);
  font-size: clamp(64px, 11.7vw, 168px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.c2c-closer__title .c2c-brace {
  color: var(--c2c-accent-on-ink);
}
.c2c-closer__side {
  flex: none;
  width: min(440px, 100%);
  padding-bottom: 12px;
}
.c2c-closer__text {
  margin: 0;
  font-size: clamp(17px, 1.46vw, 21px);
  line-height: 1.5;
  color: var(--c2c-ink-text);
}
.c2c-closer__cta {
  display: flex;
  margin-top: 32px;
}
/* The hero's join pill, recoloured for ink: the arrow chip and the
   hover layer go cream so neither disappears into the background. */
.c2c-closer .button-icon-wrapper,
.c2c-closer .button-primary-hover {
  background-color: var(--c2c-bg);
  outline-color: var(--c2c-bg);
  color: var(--c2c-ink);
}
.c2c-closer .button-icon {
  color: var(--c2c-ink);
}

/* --- Join modal ---------------------------------------------------
   kiwistrategic.com's pattern: a native <dialog> with our own form in
   front of HubSpot's submissions API, so the form looks like the site
   instead of HubSpot's embed. Every join link opens it; the link's
   href (HubSpot's hosted form) stays as the no-JavaScript fallback. */
html.c2c-modal-open {
  overflow: hidden;
}
.c2c-modal {
  width: min(560px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: var(--c2c-bg);
  color: var(--c2c-ink);
  box-shadow: 0 30px 80px rgba(0, 16, 17, 0.35);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.c2c-modal[open] {
  animation: c2c-modal-in 0.4s var(--c2c-ease);
}
.c2c-modal::backdrop {
  background: rgba(0, 16, 17, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@keyframes c2c-modal-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}
.c2c-modal__panel {
  padding: clamp(28px, 3.9vw, 44px);
}
.c2c-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c2c-ink);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.c2c-modal__close:hover,
.c2c-modal__close:focus-visible {
  background: var(--c2c-surface);
}
.c2c-modal__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.c2c-modal__eyebrow {
  margin: 0 0 12px;
  color: var(--c2c-muted);
}
.c2c-modal__title {
  margin: 0;
  padding-right: 40px;
  font-size: clamp(40px, 3.9vw, 56px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.c2c-modal__title:focus {
  outline: none;
}
.c2c-modal__note {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--c2c-surface);
  color: var(--c2c-ink);
  font-size: 16px;
  line-height: 1.45;
}
.c2c-modal__text {
  margin: 20px 0 28px;
  color: var(--c2c-muted);
  font-size: 18px;
  line-height: 1.5;
}
.c2c-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 28px 0 0;
}
.c2c-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.c2c-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c2c-form__field[hidden] {
  display: none;
}
.c2c-form label {
  margin: 0;
  color: var(--c2c-ink);
  font-size: 15px;
  font-weight: 500;
}
.c2c-form__note {
  color: var(--c2c-muted);
  font-weight: 400;
}
.c2c-form input,
.c2c-form textarea {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--c2c-line);
  border-radius: 12px;
  background: var(--c2c-white);
  color: var(--c2c-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.c2c-form textarea {
  min-height: 96px;
  resize: vertical;
}
.c2c-form input:focus,
.c2c-form textarea:focus {
  outline: none;
  border-color: var(--c2c-ink);
  box-shadow: 0 0 0 3px rgba(0, 16, 17, 0.14);
}
.c2c-form [aria-invalid="true"] {
  border-color: var(--c2c-error);
}
/* "Getting involved": a fieldset of full-width checkbox rows, each row
   the same white field as the inputs, its border going ink when ticked. */
.c2c-form__checks {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.c2c-form__checks legend {
  margin: 0 0 8px;
  padding: 0;
  color: var(--c2c-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.c2c-form__checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c2c-form .c2c-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 13px 14px;
  border: 1px solid var(--c2c-line);
  border-radius: 12px;
  background: var(--c2c-white);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.c2c-form .c2c-check:hover,
.c2c-form .c2c-check:has(:checked) {
  border-color: var(--c2c-ink);
}
.c2c-form .c2c-check:has(:focus-visible) {
  border-color: var(--c2c-ink);
  box-shadow: 0 0 0 3px rgba(0, 16, 17, 0.14);
}
.c2c-form input[type="checkbox"] {
  display: grid;
  place-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--c2c-dash);
  border-radius: 4px;
  background: var(--c2c-white);
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.c2c-form input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 5px;
  margin-top: -2px;
  border-bottom: 2px solid var(--c2c-bg);
  border-left: 2px solid var(--c2c-bg);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.15s ease;
}
.c2c-form input[type="checkbox"]:checked {
  border-color: var(--c2c-ink);
  background: var(--c2c-ink);
}
.c2c-form input[type="checkbox"]:checked::before {
  transform: rotate(-45deg) scale(1);
}
.c2c-form input[type="checkbox"]:focus {
  box-shadow: none;
}
.c2c-form__error {
  margin: 0;
  color: var(--c2c-error);
  font-size: 15px;
  line-height: 1.4;
}
/* Small print under the join button: the current-employee note from the
   footer disclaimer, where an employee decides to sign up. */
.c2c-form__fineprint {
  margin: 0;
  color: var(--c2c-muted);
  font-size: 13px;
  line-height: 1.45;
}
/* The join pill's resting anatomy (ink arrow tab, red pill), in CSS so a
   form button can wear it; the arrow turns on hover like the chips. */
.c2c-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 48px;
  margin-top: 6px;
  padding: 0 26px 0 66px;
  border: 0;
  border-radius: 48px;
  overflow: hidden;
  background: var(--c2c-accent);
  color: var(--c2c-bg);
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1;
  cursor: pointer;
}
.c2c-submit__icon {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 48px;
  height: 48px;
  padding: 15px;
  border-radius: 0 24px 24px 0;
  background: var(--c2c-ink);
  color: var(--c2c-bg);
}
.c2c-submit:hover .c2c-arrow,
.c2c-submit:focus-visible .c2c-arrow {
  transform: rotate(0deg);
}
.c2c-modal .c2c-pill {
  padding: 0 24px;
  background: transparent;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
}
.c2c-modal .c2c-pill:hover,
.c2c-modal .c2c-pill:focus-visible {
  background: var(--c2c-ink);
  color: var(--c2c-bg);
}
.c2c-submit:disabled {
  cursor: progress;
  opacity: 0.7;
}
@media screen and (max-width: 479px) {
  .c2c-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .c2c-modal[open] {
    animation: none;
  }
}

/* --- Footer ------------------------------------------------------ */
.c2c-footer {
  padding-top: clamp(48px, 5vw, 72px);
  padding-bottom: 40px;
  border-top: 1px solid var(--c2c-ink-line);
  background: var(--c2c-ink);
  color: var(--c2c-ink-muted);
}
.c2c-footer a {
  color: var(--c2c-bg);
  text-decoration: none;
}
.c2c-footer a:hover,
.c2c-footer a:focus-visible {
  color: var(--c2c-accent-on-ink);
}
.c2c-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
}
.c2c-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.c2c-footer__brand img {
  display: block;
  width: auto;
  height: 40px;
}
.c2c-footer__brand p {
  margin: 0;
  color: var(--c2c-ink-muted);
  font-size: 18px;
  line-height: 1.4;
}
.c2c-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 18px;
}
.c2c-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
}
.c2c-footer__disclaimer {
  max-width: 760px;
  color: var(--c2c-ink-muted);
  margin: 64px 0 0;
  font-size: 14px;
  line-height: 1.6;
}
.c2c-footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 10px 24px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--c2c-ink-line);
  font-size: 14px;
}
.c2c-footer__legal a {
  color: var(--c2c-ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.c2c-footer__legal a.c2c-footer__kiwi {
  color: var(--c2c-bg);
}

/* --- responsive -------------------------------------------------- */
/* Under 1280px the four-up invite card is too narrow for the email
   line; the "get in touch" pill already carries the same mailto. */
@media screen and (max-width: 991px) {
  .c2c-doors {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding-top: 64px;
  }
  .c2c-door {
    min-height: 0;
  }
  .c2c-chapters {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .c2c-map {
    width: min(100%, 460px);
    align-self: center;
  }
  /* Unwrap the text column so its children interleave with the map:
     heading, map, chapter rows, then the start-a-chapter card. */
  .c2c-chapters__body {
    display: contents;
  }
  .c2c-chapters__body .c2c-h2 {
    order: -1;
  }
  .c2c-chapters__list {
    order: 1;
    margin-top: 0;
  }
  .c2c-startcta {
    order: 2;
    margin-top: -8px;
  }
  .c2c-mission {
    grid-template-columns: minmax(0, 1fr);
  }
  .c2c-mission__statement {
    margin-top: 32px;
  }
  .c2c-sponsors__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .c2c-sponsors__list li:nth-child(2n + 1) {
    border-left: 0;
  }
  .c2c-sponsors__list li:nth-child(n + 3) {
    border-top: 1px solid var(--c2c-line);
  }
  .c2c-spotlight__card {
    grid-template-columns: minmax(0, 1fr);
  }
  .c2c-spotlight__brand {
    border-right: 0;
    border-bottom: 1px solid var(--c2c-line);
  }
  .c2c-council__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 12px;
    margin-top: 32px;
  }
  .c2c-closer {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .c2c-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .c2c-footer__nav {
    flex-direction: row;
    gap: 24px;
  }
  .c2c-footer__disclaimer {
    margin-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  .c2c-sponsors__list {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 32px;
  }
  .c2c-sponsors__list li {
    border-left: 0;
  }
  .c2c-sponsors__list li + li {
    border-left: 0;
    border-top: 1px solid var(--c2c-line);
  }
  .c2c-sponsors__list a {
    flex-direction: row;
    justify-content: space-between;
    height: 112px;
    padding: 0 4px;
  }
  .c2c-sponsors__logo {
    height: 80px;
  }
  .c2c-sponsors__list img {
    height: calc(var(--logo-h, 64px) * 0.8);
  }
  .c2c-spotlight__card {
    margin-top: 32px;
    border-radius: 20px;
  }
  .c2c-startcta {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
  }
  .c2c-map__pin {
    height: 26px;
    padding: 0 10px;
    font-size: 14px;
    right: calc(100% - var(--x) + 14px);
  }
  .c2c-door__arrow {
    width: 52px;
    height: 52px;
    padding: 16px;
  }
  .c2c-door__row {
    height: 52px;
  }
  .c2c-door__row > span:first-child {
    width: 28px;
    height: 28px;
  }
  .c2c-door__row b {
    width: 56px;
  }
  .c2c-person__head {
    margin-top: 12px;
  }
  /* Two-up phone cards are too narrow for name + badge on one line:
     the badge drops under the name, left-aligned. */
  .c2c-person__head {
    flex-wrap: wrap;
  }
  .c2c-tenure {
    margin-left: 0;
    margin-top: 0;
  }
  .c2c-person__title {
    font-size: 14px;
  }
  .c2c-invite .c2c-pill {
    gap: 8px;
    padding: 0 6px 0 14px;
    font-size: 15px;
  }
  .c2c-invite__long {
    display: none;
  }
  .c2c-invite__short {
    display: inline;
  }
  .c2c-invite .c2c-pill__icon {
    width: 28px;
    height: 28px;
    padding: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c2c-door,
  .c2c-arrow {
    transition: none;
  }
  .c2c-door:hover,
  .c2c-door:focus-visible {
    transform: none;
  }
}

/* ==================================================================
   Inner pages (2026-09-14), from design canvas pages 6 (/events) and 7
   (/directory). Every class below is new; nothing here restyles a
   homepage class. Breakpoints match the homepage: 991 / 767 / 479.
   ================================================================== */

.c2c-pagehero,
.c2c-past {
  padding-inline: var(--c2c-gutter);
}

/* --- Page hero: big lowercase title, intro, notify pill, graphic --- */
.c2c-pagehero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  align-items: end;
  padding-top: clamp(128px, 12.8vw, 184px);
  padding-bottom: clamp(72px, 8.3vw, 120px);
}
.c2c-pagehero__title {
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: clamp(88px, 11.7vw, 168px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.055em;
}
.c2c-pagehero__intro {
  max-width: 520px;
  margin: 32px 0 0;
  color: inherit;
  font-size: clamp(19px, 1.53vw, 22px);
  line-height: 1.45;
  text-wrap: pretty;
}
.c2c-pagehero__cta {
  display: flex;
  margin-top: 32px;
}
.c2c-pagehero__art {
  padding-bottom: 8px;
}

/* "get notified": the join pill's resting anatomy (.c2c-submit) as a
   link, so the join modal picks it up. Cream arrow tab on both pages;
   the pill is ink on the red band and red on the ink band. */
.c2c-notify {
  margin-top: 0;
  text-decoration: none;
  white-space: nowrap;
}
.c2c-notify .c2c-submit__icon {
  background: var(--c2c-bg);
  color: var(--c2c-ink);
}
.c2c-notify--ink,
.c2c-notify--ink:hover,
.c2c-notify--ink:focus-visible {
  background: var(--c2c-ink);
  color: var(--c2c-bg);
}
.c2c-notify--red,
.c2c-notify--red:hover,
.c2c-notify--red:focus-visible {
  background: var(--c2c-accent);
  color: var(--c2c-bg);
}
.c2c-notify:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.c2c-evhero .c2c-notify:focus-visible {
  outline-color: var(--c2c-ink);
}
.c2c-dirhero .c2c-notify:focus-visible {
  outline-color: var(--c2c-bg);
}

/* --- /events -------------------------------------------------------- */
.c2c-evhero {
  background: var(--c2c-accent);
  color: var(--c2c-ink);
}
.c2c-evhero .c2c-pagehero__title {
  margin-top: 28px;
}
.c2c-evhero .c2c-pagehero__art {
  display: flex;
  justify-content: flex-end;
}
.c2c-evhero__tokens {
  margin-inline: 0;
}
/* Ink chip, dashed ring = coming (the site's state language). */
.c2c-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  margin: 0;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--c2c-ink);
  color: var(--c2c-bg);
  font-family: var(--c2c-mono);
  font-size: 13px;
  line-height: 1;
}
.c2c-status__ring {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px dashed rgba(252, 251, 248, 0.7);
}

.c2c-past {
  padding-top: var(--c2c-space);
  padding-bottom: var(--c2c-space);
  background: var(--c2c-bg);
  color: var(--c2c-ink);
}
.c2c-past__meta {
  margin: 0;
  color: var(--c2c-muted);
  font-family: var(--c2c-mono);
  font-size: 13px;
  line-height: 1.4;
}
.c2c-past__index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.c2c-gathering {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--c2c-ink);
  text-decoration: none;
}
.c2c-gathering__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.5s var(--c2c-ease);
}
a.c2c-gathering:hover .c2c-gathering__media,
a.c2c-gathering:focus-visible .c2c-gathering__media {
  transform: translateY(-4px);
}
.c2c-gathering__media--soon {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--c2c-dash);
}
.c2c-gathering__soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c2c-muted);
  font-family: var(--c2c-mono);
  font-size: 13px;
}
.c2c-gathering__soon .c2c-ring {
  width: 12px;
  height: 12px;
}
.c2c-gathering__name {
  margin: 0;
  color: var(--c2c-ink);
  font-size: clamp(24px, 2.23vw, 32px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
/* The Apple glyph inside a title: x-height tall, on the baseline. */
.c2c-apple {
  display: inline-block;
  width: auto;
  height: 0.82em;
  margin: 0 0.04em;
  vertical-align: -0.04em;
}

.c2c-post {
  margin-top: clamp(56px, 6.67vw, 96px);
  padding-top: clamp(32px, 3.34vw, 48px);
  border-top: 1px solid var(--c2c-line);
}
/* A gathering on its own page (/events/<slug>/): no page hero above it,
   so it clears the fixed nav itself and drops the divider it has when it
   follows another section. */
.c2c-event {
  padding-top: clamp(120px, 10.5vw, 152px);
}
.c2c-post--page {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.c2c-crumb {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.c2c-crumb:is(:hover, :focus-visible) {
  color: var(--c2c-ink);
}
.c2c-post__title {
  max-width: 1100px;
  margin: 18px 0 0;
  color: var(--c2c-ink);
  font-size: clamp(40px, 6.1vw, 88px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.c2c-post__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1094 / 560;
  margin-top: clamp(28px, 3.34vw, 48px);
  object-fit: cover;
  border-radius: clamp(16px, 1.67vw, 24px);
}
.c2c-post__cols {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  column-gap: clamp(48px, 8.3vw, 120px);
  align-items: start;
  margin-top: 56px;
}
.c2c-post__facts {
  margin: 0;
  border-bottom: 1px solid var(--c2c-line);
}
.c2c-post__facts > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0;
  border-top: 1px solid var(--c2c-line);
}
.c2c-post__facts dt {
  margin: 0;
  color: var(--c2c-muted);
  font-family: var(--c2c-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
.c2c-post__facts dd {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
}
.c2c-post__body {
  max-width: 760px;
}
.c2c-post__body p {
  margin: 0;
  color: var(--c2c-ink);
  font-size: clamp(17px, 1.39vw, 20px);
  line-height: 1.6;
}
.c2c-post__body p + p {
  margin-top: 1.1em;
}
.c2c-post__body a {
  color: var(--c2c-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.c2c-post__body a:hover,
.c2c-post__body a:focus-visible {
  text-decoration-thickness: 2px;
}
.c2c-post__body h2 {
  margin: 2em 0 0.6em;
  color: var(--c2c-ink);
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.c2c-post__body ul {
  margin: 1em 0 0;
  padding-left: 1.25em;
}
.c2c-post__body ul + p {
  margin-top: 1.1em;
}
.c2c-post__body li {
  color: var(--c2c-ink);
  font-size: clamp(17px, 1.39vw, 20px);
  line-height: 1.6;
}
.c2c-post__body li + li {
  margin-top: 0.4em;
}
.c2c-post__gallery-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: clamp(48px, 5vw, 72px) 0 20px;
}
.c2c-post__gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c2c-post__gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: #e4e4e1;
  transition: opacity 0.2s ease;
}
.c2c-post__shot {
  display: block;
  border-radius: 12px;
  cursor: zoom-in;
}
.c2c-post__shot:hover img {
  opacity: 0.82;
}
.c2c-post__shot:focus-visible {
  outline: 2px solid var(--c2c-ink);
  outline-offset: 3px;
}

/* Photo viewer: full-screen <dialog> on the ink backdrop, photo fitted to
   the screen, round cream buttons. Arrows sit at the sides on desktop and
   drop to a bottom row either side of the counter on phones. */
.c2c-viewer {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c2c-bg);
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
.c2c-viewer[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: c2c-viewer-in 0.3s var(--c2c-ease);
}
.c2c-viewer::backdrop {
  background: rgba(0, 16, 17, 0.94);
}
@keyframes c2c-viewer-in {
  from {
    opacity: 0;
  }
}
.c2c-viewer__img {
  display: block;
  max-width: calc(100% - 184px);
  max-height: calc(100% - 128px);
  width: auto;
  height: auto;
  border-radius: 12px;
  user-select: none;
  -webkit-user-drag: none;
}
.c2c-viewer__count {
  position: absolute;
  bottom: 28px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: var(--c2c-bg);
  font-family: var(--c2c-mono);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.c2c-viewer__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(252, 251, 248, 0.12);
  color: var(--c2c-bg);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.c2c-viewer__btn:hover,
.c2c-viewer__btn:focus-visible {
  background: var(--c2c-bg);
  color: var(--c2c-ink);
}
.c2c-viewer__btn:focus-visible {
  outline: 2px solid var(--c2c-bg);
  outline-offset: 3px;
}
.c2c-viewer__btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.c2c-viewer__close {
  top: 20px;
  right: 20px;
}
.c2c-viewer__prev,
.c2c-viewer__next {
  top: 50%;
  transform: translateY(-50%);
}
.c2c-viewer__prev {
  left: 32px;
}
.c2c-viewer__next {
  right: 32px;
}
@media screen and (max-width: 767px) {
  .c2c-viewer__img {
    max-width: calc(100% - 32px);
    max-height: calc(100% - 176px);
    border-radius: 8px;
  }
  .c2c-viewer__close {
    top: 16px;
    right: 16px;
  }
  .c2c-viewer__prev,
  .c2c-viewer__next {
    top: auto;
    bottom: 16px;
    transform: none;
  }
  .c2c-viewer__prev {
    left: 16px;
  }
  .c2c-viewer__next {
    right: 16px;
  }
  .c2c-viewer__count {
    bottom: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c2c-viewer[open] {
    animation: none;
  }
}

/* --- /directory ----------------------------------------------------- */
.c2c-dirhero {
  column-gap: 96px;
  background: var(--c2c-ink);
  color: var(--c2c-bg);
}
.c2c-dirhero .c2c-pagehero__intro {
  max-width: 540px;
  margin-top: 36px;
  color: var(--c2c-ink-text);
}
/* The compact band's right column: intro, then the button. */
.c2c-pagehero__side {
  justify-self: end;
  max-width: 540px;
}
.c2c-spotlight--page {
  padding-top: var(--c2c-space);
}

/* --- inner pages, responsive --------------------------------------- */
@media screen and (max-width: 991px) {
  .c2c-pagehero {
    grid-template-columns: minmax(0, 1fr);
  }
  .c2c-pagehero__art {
    margin-top: 48px;
    padding-bottom: 0;
  }
  .c2c-evhero .c2c-pagehero__art {
    justify-content: center;
  }
  .c2c-evhero__tokens {
    width: min(100%, 312px);
  }
  .c2c-post__cols {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 28px;
  }
  /* Phone reads the story first, then the facts. */
  .c2c-post__facts {
    order: 2;
    margin-top: 32px;
  }
  .c2c-post__gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .c2c-pagehero__intro {
    margin-top: 24px;
  }
  .c2c-pagehero__cta {
    margin-top: 28px;
  }
  .c2c-evhero .c2c-pagehero__title {
    margin-top: 24px;
  }
  .c2c-dirhero .c2c-pagehero__intro {
    margin-top: 24px;
  }
  .c2c-past__index {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-top: 32px;
  }
  .c2c-gathering {
    gap: 12px;
  }
  .c2c-gathering__media {
    border-radius: 12px;
  }
  .c2c-post__title {
    margin-top: 14px;
  }
  .c2c-post__facts dd {
    font-size: 16px;
  }
  .c2c-post__gallery-head {
    margin-bottom: 16px;
  }
  .c2c-post__gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .c2c-post__gallery img,
  .c2c-post__shot {
    border-radius: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c2c-gathering__media {
    transition: none;
  }
  a.c2c-gathering:hover .c2c-gathering__media,
  a.c2c-gathering:focus-visible .c2c-gathering__media {
    transform: none;
  }
}

/* --- /directory/register ------------------------------------------- */
/* The listing form. Ink hero (continuing /directory), then the form: "about
   you" on cream, and "your business" on a full-bleed grey band that starts
   at the divider sentence, so the switch from person to public business
   listing is a change of ground, not just a rule. A live preview of the
   card sits sticky beside the form from 992px up. */
.c2c-reghero {
  align-items: end;
  padding-bottom: clamp(56px, 6.2vw, 88px);
}
.c2c-reghero__crumb {
  margin: 0;
  color: var(--c2c-ink-muted);
  font-size: 13px;
}
.c2c-reghero .c2c-crumb:is(:hover, :focus-visible) {
  color: var(--c2c-bg);
}
.c2c-reghero__title {
  margin: 20px 0 0;
  color: var(--c2c-bg);
  font-family: inherit;
  font-size: clamp(44px, 6.67vw, 96px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.c2c-reghero__brace {
  color: var(--c2c-accent-on-ink);
}
.c2c-reghero .c2c-pagehero__intro {
  justify-self: end;
  margin: 0;
  padding-bottom: 6px;
}
.c2c-reghero .c2c-pagehero__intro a {
  color: var(--c2c-bg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.c2c-reghero .c2c-pagehero__intro a:is(:hover, :focus-visible) {
  color: var(--c2c-accent-on-ink);
}

.c2c-reg {
  padding-inline: var(--c2c-gutter);
  padding-bottom: var(--c2c-space);
  color: var(--c2c-ink);
}
.c2c-reg__form {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(340px, 400px);
  grid-template-rows: auto auto auto;
  justify-content: space-between;
  column-gap: clamp(40px, 5vw, 96px);
  row-gap: 0;
  margin: 0;
}
.c2c-reg__part,
.c2c-reg__send {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.c2c-reg__part--you {
  grid-row: 1;
  padding-block: clamp(56px, 6.2vw, 88px);
}
/* Full-bleed grey behind the business half: the spread shadow paints the
   band out to both edges of the viewport and clip-path trims it back to
   the element's own height. The preview column sits above it. */
.c2c-reg__part--biz {
  grid-row: 2;
  padding-block: clamp(48px, 5vw, 72px) clamp(56px, 6.2vw, 88px);
  background: var(--c2c-circle);
  box-shadow: 0 0 0 100vmax var(--c2c-circle);
  clip-path: inset(0 -100vmax);
}
.c2c-reg__send {
  grid-row: 3;
  align-items: flex-start;
  gap: 16px;
  padding-top: clamp(40px, 4.4vw, 64px);
}

/* Section heads: a mono index tag, then the lowercase heading. */
.c2c-reg__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.c2c-reg__title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  color: var(--c2c-ink);
  font-size: clamp(34px, 3.06vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.c2c-reg__num {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--c2c-ink);
  border-radius: 999px;
  font-family: var(--c2c-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}
.c2c-reg__req {
  margin: 0;
  color: var(--c2c-muted);
  font-size: 13px;
  white-space: nowrap;
}
.c2c-reg__star {
  color: var(--c2c-error);
  font-weight: 500;
}
.c2c-reg__labelrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
/* "private": an ink outline chip with a lock, the one field that never
   reaches the listing. */
.c2c-reg__private {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: var(--c2c-ink);
  color: var(--c2c-bg);
  font-size: 12px;
  line-height: 1;
}
.c2c-reg__private svg {
  width: 10px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.c2c-reg .c2c-reg__help {
  margin: 0;
  color: var(--c2c-muted);
  font-size: 14px;
  line-height: 1.45;
}
/* The only links in help text are the ones asking you to email something,
   so they carry an underline: muted on muted can't be told apart by colour. */
.c2c-reg__help a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.c2c-reg__help a:is(:hover, :focus-visible) {
  color: var(--c2c-ink);
}
.c2c-reg__help--where {
  display: flex;
  align-items: center;
  gap: 12px;
}
.c2c-reg__glyph {
  display: none;
  flex: none;
  width: 48px;
  height: 32px;
  color: var(--c2c-ink);
}
.c2c-reg__count {
  color: var(--c2c-muted);
  font-size: 12px;
  white-space: nowrap;
}
.c2c-reg__count.is-low {
  color: var(--c2c-error);
}

/* The divider: the seam where the ground turns grey. */
.c2c-reg__turn {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(28px, 3vw, 40px);
  border-bottom: 1px solid var(--c2c-line);
}
.c2c-reg__turn-icon {
  display: flex;
  flex: none;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  padding: 12px;
  border-radius: 50%;
  background: var(--c2c-ink);
  color: var(--c2c-bg);
}
.c2c-reg__turn-icon .c2c-arrow {
  transform: rotate(90deg);
}
.c2c-reg .c2c-reg__turn-text {
  max-width: 34em;
  margin: 0;
  color: var(--c2c-muted);
  font-size: clamp(24px, 1.95vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.c2c-reg__turn-text strong {
  color: var(--c2c-ink);
  font-weight: 500;
}

/* City and state on one row; service area checkboxes below it. */
.c2c-reg__where {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
  gap: 14px;
}
.c2c-reg__areas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (max-width: 599px) {
  .c2c-reg__areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.c2c-reg #r-area-help {
  margin: -2px 0 10px;
}
.c2c-reg__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.c2c-reg .c2c-reg__sub {
  margin: 0;
  color: var(--c2c-ink);
  font-size: clamp(20px, 1.67vw, 24px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.c2c-reg__linkgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
  margin-top: 12px;
}
.c2c-reg__other {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.c2c-reg__other legend {
  margin: 0 0 8px;
  padding: 0;
  color: var(--c2c-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
}
.c2c-reg__otherrow {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
}
.c2c-reg__other .c2c-reg__help {
  margin-top: 8px;
}
.c2c-reg__copyfield {
  margin-top: 16px;
}
.c2c-reg__copyfield + .c2c-reg__copyfield {
  margin-top: 0;
}

/* Select: the input's field with the site's own chevron. */
.c2c-form select {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 40px 12px 14px;
  border: 1px solid var(--c2c-line);
  border-radius: 12px;
  background: var(--c2c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23001011' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
  color: var(--c2c-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.c2c-form select:focus {
  outline: none;
  border-color: var(--c2c-ink);
  box-shadow: 0 0 0 3px rgba(0, 16, 17, 0.14);
}
.c2c-form select:has(option[value=""]:checked) {
  color: var(--c2c-muted);
}
.c2c-reg input::placeholder {
  color: #737c7d; /* 4.6:1 on white */
  opacity: 1;
}
.c2c-reg .c2c-form__error {
  margin: 0;
}
.c2c-reg__fielderr {
  margin: 0;
  color: var(--c2c-error);
  font-size: 14px;
  line-height: 1.4;
}

.c2c-form .c2c-reg__confirm {
  align-self: stretch;
  max-width: 720px;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}
.c2c-form .c2c-reg__confirm[aria-invalid="true"] {
  border-color: var(--c2c-error);
}
.c2c-reg__submit {
  margin-top: 8px;
}
.c2c-reg__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- live preview ---- */
.c2c-reg__preview {
  position: sticky;
  z-index: 1;
  top: 88px;
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: clamp(56px, 6.2vw, 88px);
  /* A listing with every field maxed out is taller than a laptop screen;
     past that the preview scrolls inside itself instead of hiding its
     bottom until the form ends. */
  max-height: calc(100svh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.c2c-reg .c2c-reg__prevlabel {
  margin: 0;
  color: var(--c2c-muted);
  font-size: 12px;
}
.c2c-reg .c2c-reg__prevlabel + .c2c-card {
  margin-bottom: 14px;
}
.c2c-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--c2c-line);
  border-radius: 20px;
  background: var(--c2c-white);
  color: var(--c2c-ink);
}
.c2c-card--page {
  gap: 12px;
  padding: 20px 24px;
  border-style: dashed;
  border-color: var(--c2c-dash);
  /* Opaque, so it reads as one object while the sticky preview crosses
     the cream/grey seam. */
  background: var(--c2c-bg);
}
.c2c-card p,
.c2c-card h3 {
  margin: 0;
  color: inherit;
  font-weight: 400;
}
.c2c-card .c2c-card__cat {
  align-self: flex-start;
  color: var(--c2c-muted);
  font-size: 12px;
}
.c2c-card .c2c-card__name {
  font-size: clamp(24px, 2.23vw, 32px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}
.c2c-card .c2c-card__where,
.c2c-card .c2c-card__role {
  color: var(--c2c-muted);
  font-size: 15px;
  line-height: 1.4;
}
/* "Based in …" and, for a statewide or national business, "Serves …" on
   its own line. */
.c2c-card__where > span {
  display: block;
}
.c2c-card .c2c-card__summary {
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.c2c-card .c2c-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.c2c-card .c2c-card__contact {
  color: var(--c2c-muted);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.c2c-card__links,
.c2c-card__services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.c2c-card__links:empty,
.c2c-card__services:empty {
  display: none;
}
/* Preview-only link chip: the homepage chip at 28px, not interactive. */
.c2c-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px 0 4px;
  border-radius: 999px;
  background: var(--c2c-surface);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.c2c-card__chip i {
  display: flex;
  width: 20px;
  height: 20px;
  padding: 5px;
  border-radius: 50%;
  background: var(--c2c-ink);
  color: var(--c2c-bg);
}
.c2c-card__service {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--c2c-line);
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
}
.c2c-card__by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--c2c-line);
  font-size: 15px;
  font-weight: 500;
}
.c2c-card .c2c-card__years {
  margin: 0;
}
/* Empty slot: skeleton bars in the directory door's language. */
.c2c-skel {
  display: block;
  height: 0.62em;
  margin-block: 0.28em;
  border-radius: 4px;
  background: var(--c2c-surface);
}
.c2c-skel + .c2c-skel {
  margin-top: 0.5em;
}
.c2c-card__years .c2c-skel {
  width: 64px;
  height: 8px;
  margin: 0;
  background: rgba(252, 251, 248, 0.24);
}
.c2c-card__person .c2c-skel {
  width: 120px;
}
/* The slot for the field that has focus gets a red ring: the one red
   detail, like the roadmap tiles. */
[data-slot] {
  border-radius: 4px;
  outline: 2px solid transparent;
  outline-offset: 5px;
  transition: outline-color 0.25s var(--c2c-ease);
}
[data-slot].is-focus {
  outline-color: var(--c2c-accent);
}
[data-slot].is-new {
  animation: c2c-slot-in 0.45s var(--c2c-ease);
}
@keyframes c2c-slot-in {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}

/* --- sent ---- */
.c2c-reg__done {
  max-width: 760px;
  padding-top: clamp(64px, 7vw, 104px);
}
.c2c-reg__donetitle {
  margin: 0;
  color: var(--c2c-ink);
  font-size: clamp(40px, 4.45vw, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.c2c-reg__donetitle:focus {
  outline: none;
}
.c2c-reg .c2c-reg__donetext {
  max-width: 34em;
  margin: 24px 0 32px;
  color: var(--c2c-muted);
  font-size: clamp(17px, 1.46vw, 21px);
  line-height: 1.5;
}
.c2c-reg__donetext a {
  color: var(--c2c-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.c2c-reg__donetext a:is(:hover, :focus-visible) {
  color: var(--c2c-ink);
  text-decoration-thickness: 2px;
}

@media screen and (max-width: 991px) {
  .c2c-reghero .c2c-pagehero__intro {
    justify-self: start;
    margin-top: 24px;
  }
  .c2c-pagehero__side {
    justify-self: start;
  }
  .c2c-reg__form {
    grid-template-columns: minmax(0, 1fr);
  }
  .c2c-reg__part,
  .c2c-reg__send,
  .c2c-reg__preview {
    grid-column: 1;
    grid-row: auto;
  }
  /* The preview drops in after the business half, as a check before
     sending; the drawings take over the "where it shows" job. */
  .c2c-reg__preview {
    position: static;
    max-height: none;
    overflow: visible;
    width: min(100%, 440px);
    margin-top: clamp(40px, 4.4vw, 64px);
  }
  .c2c-reg__glyph {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .c2c-reg__linkgrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .c2c-reg__turn {
    gap: 14px;
  }
  .c2c-reg__turn-icon {
    width: 32px;
    height: 32px;
    padding: 9px;
  }
}
@media screen and (max-width: 479px) {
  .c2c-reg__head {
    flex-direction: column;
    gap: 8px;
  }
  .c2c-card {
    padding: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-slot] {
    transition: none;
  }
  [data-slot].is-new {
    animation: none;
  }
}

/* --- /directory listings + /members/<slug>/ ------------------------- */
/* Built at deploy by scripts/build-directory.mjs from the Members Sheet.
   The cards are the same .c2c-card the registration form previews, so a
   member sees on /directory what they saw while filling in the form. */
.c2c-dir {
  padding-top: clamp(56px, 6.2vw, 88px);
  padding-inline: var(--c2c-gutter);
  color: var(--c2c-ink);
}
.c2c-dir__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.c2c-dir .c2c-dir__count {
  margin: 0;
  color: var(--c2c-muted);
  font-size: 13px;
}
.c2c-dir__body {
  margin-top: 32px;
}
/* Desktop: a filter rail beside the results. The rail sticks while the
   grid scrolls, so the active filters stay in view. */
@media screen and (min-width: 992px) {
  .c2c-dir--rail .c2c-dir__body {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: clamp(32px, 3.1vw, 48px);
    align-items: start;
  }
  .c2c-dir--rail .c2c-dir__grid {
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  }
}
.c2c-dir__rail {
  position: sticky;
  top: 104px;
  max-height: calc(100dvh - 128px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -8px;
  padding: 4px 8px 24px;
  scrollbar-width: thin;
}

/* Active filters: an ink block at the top of the rail. */
.c2c-dir__active {
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 16px;
  background: var(--c2c-ink);
  color: var(--c2c-bg);
}
.c2c-dir__active p {
  margin: 0 0 12px;
  color: var(--c2c-ink-muted);
  font-size: 12px;
  line-height: 1.4;
}
.c2c-dir__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.c2c-dir__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 6px 10px 6px 14px;
  border: 1px solid rgba(252, 251, 248, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--c2c-bg);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.c2c-dir__chip svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.c2c-dir__chip:is(:hover, :focus-visible) {
  border-color: var(--c2c-bg);
  background: var(--c2c-bg);
  color: var(--c2c-ink);
}
.c2c-dir__chip:focus-visible {
  outline: 2px solid var(--c2c-bg);
  outline-offset: 2px;
}
.c2c-dir__clearall {
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c2c-ink-text);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.c2c-dir__clearall:is(:hover, :focus-visible) {
  color: var(--c2c-bg);
  text-decoration-thickness: 2px;
}

/* Filter groups */
.c2c-dir__facet {
  margin: 0;
  padding: 16px 0 20px;
  border: 0;
  border-top: 1px solid var(--c2c-line);
}
.c2c-dir__facet legend {
  float: left;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  color: var(--c2c-muted);
  font-size: 12px;
  line-height: 1.4;
}
.c2c-dir__opt {
  clear: both;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  margin: 0 -8px;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--c2c-ink);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.c2c-dir__opt:hover {
  background: var(--c2c-surface);
}
.c2c-dir__opt input {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--c2c-dash);
  border-radius: 4px;
  background: var(--c2c-white) center / 12px 12px no-repeat;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.c2c-dir__opt input:checked {
  border-color: var(--c2c-ink);
  background-color: var(--c2c-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fcfbf8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.c2c-dir__opt input:focus-visible {
  outline: 2px solid var(--c2c-ink);
  outline-offset: 2px;
}
.c2c-dir__optname {
  flex: 1;
  min-width: 0;
}
.c2c-dir__optn {
  color: var(--c2c-muted);
  font-family: var(--c2c-mono);
  font-size: 12px;
}
.c2c-dir__opt:has(input:disabled) {
  opacity: 0.45;
  cursor: default;
}
.c2c-dir__opt:has(input:disabled):hover {
  background: none;
}
.c2c-dir__opt input:disabled {
  cursor: default;
}
/* Category: a ticked group opens its subcategories under a hairline. */
.c2c-dir__subs {
  margin: 2px 0 8px 8px;
  padding-left: 10px;
  border-left: 1px solid var(--c2c-line);
}
.c2c-dir__opt--sub {
  margin-right: -8px;
  margin-left: 0;
  font-size: 14px;
}
.c2c-dir__showall {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c2c-ink);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.c2c-dir__showall:is(:hover, :focus-visible) {
  color: var(--c2c-ink);
  text-decoration-thickness: 2px;
}

/* Search, filters button (phones), sort */
.c2c-dir__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.c2c-dir__search {
  flex: 1 1 320px;
  max-width: 520px;
  min-height: 48px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--c2c-line);
  border-radius: 12px;
  background: var(--c2c-white);
  color: var(--c2c-ink);
  font: inherit;
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.c2c-dir__search::placeholder {
  color: #737c7d;
  opacity: 1;
}
.c2c-dir__search:focus {
  outline: none;
  border-color: var(--c2c-ink);
  box-shadow: 0 0 0 3px rgba(0, 16, 17, 0.14);
}
.c2c-dir__toolrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.c2c-dir__filterbtn,
.c2c-dir__sort select {
  height: 44px;
  margin: 0;
  border: 1px solid var(--c2c-line);
  border-radius: 999px;
  background-color: transparent;
  color: var(--c2c-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.c2c-dir__filterbtn:hover,
.c2c-dir__sort select:hover {
  border-color: var(--c2c-ink);
}
.c2c-dir__filterbtn:focus-visible,
.c2c-dir__sort select:focus-visible {
  outline: 2px solid var(--c2c-ink);
  outline-offset: 3px;
}
.c2c-dir__filterbtn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 14px;
}
.c2c-dir__filterbtn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.c2c-dir__filtern {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--c2c-ink);
  color: var(--c2c-bg);
  font-family: var(--c2c-mono);
  font-size: 12px;
}
.c2c-dir__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--c2c-muted);
  font-size: 12px;
  font-weight: 400;
}
.c2c-dir__sort select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 36px 0 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23001011' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px 12px no-repeat;
}
/* Phones: the same chips as the rail, as a bar above the grid. */
.c2c-dir__chips--bar {
  flex-basis: 100%;
}
.c2c-dir__chips--bar .c2c-dir__chip {
  border-color: var(--c2c-ink);
  background: var(--c2c-ink);
  color: var(--c2c-bg);
}
.c2c-dir__chips--bar .c2c-dir__chip:is(:hover, :focus-visible) {
  background: transparent;
  color: var(--c2c-ink);
}
.c2c-dir__chips--bar .c2c-dir__chip:focus-visible {
  outline-color: var(--c2c-ink);
}

.c2c-dir__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.c2c-dir__grid > [hidden] {
  display: none;
}

/* No results: the single removals that bring listings back. */
.c2c-dir__empty {
  margin-top: 24px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px dashed var(--c2c-dash);
  border-radius: 20px;
}
.c2c-dir__empty p {
  margin: 0;
  color: var(--c2c-ink);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
}
.c2c-dir__hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.c2c-dir__hints:empty {
  display: none;
}
.c2c-dir__hint {
  min-height: 40px;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--c2c-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--c2c-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.c2c-dir__hint:is(:hover, :focus-visible) {
  background: var(--c2c-ink);
  color: var(--c2c-bg);
}
.c2c-dir__hint:focus-visible {
  outline: 2px solid var(--c2c-ink);
  outline-offset: 3px;
}
.c2c-dir__empty .c2c-dir__clearall,
.c2c-dir__sheet .c2c-dir__clearall {
  color: var(--c2c-ink);
}
.c2c-dir__empty .c2c-dir__clearall {
  margin-top: 16px;
}

/* Phones and tablets: the filters open as a bottom sheet. */
.c2c-dir__sheet {
  width: 100%;
  max-width: 100%;
  max-height: 88dvh;
  margin: auto 0 0;
  border-radius: 28px 28px 0 0;
  overflow: hidden;
}
.c2c-dir__sheet[open] {
  display: flex;
  flex-direction: column;
  animation: c2c-sheet-in 0.4s var(--c2c-ease);
}
@keyframes c2c-sheet-in {
  from {
    transform: translateY(100%);
  }
}
.c2c-dir__sheethead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px 8px 24px;
}
.c2c-dir__sheet .c2c-dir__sheettitle {
  margin: 0;
  color: var(--c2c-ink);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.c2c-dir__sheet .c2c-modal__close {
  position: static;
}
/* Content-sized, shrinks to scroll at the sheet's max-height. flex: 1
   (basis 0) collapsed the body to its padding in iOS Safari, which sizes
   an auto-height column flexbox from the flex-basis. */
.c2c-dir__sheetbody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 24px 16px;
}
.c2c-dir__sheet .c2c-dir__opt {
  min-height: 44px;
}
.c2c-dir__sheetfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c2c-line);
}
.c2c-dir__sheetfoot .c2c-dir__clearall {
  margin: 0;
  font-size: 15px;
}
.c2c-dir__show {
  height: 52px;
  margin: 0;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--c2c-ink);
  color: var(--c2c-bg);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.c2c-dir__show:focus-visible {
  outline: 2px solid var(--c2c-ink);
  outline-offset: 3px;
}
/* With the rail showing, its ink block already lists the filters. */
@media screen and (min-width: 992px) {
  .c2c-dir--rail .c2c-dir__chips--bar {
    display: none;
  }
}
@media screen and (max-width: 991px) {
  .c2c-dir__rail {
    display: none;
  }
  .c2c-dir--rail .c2c-dir__filterbtn {
    display: inline-flex;
  }
  .c2c-dir__toolrow {
    margin-left: 0;
  }
}

/* A card in the grid: the name links to the member page and its hit area
   covers the whole card; the link chips sit above that and go out. */
.c2c-card--link {
  position: relative;
  transition: border-color 0.25s ease, transform 0.45s var(--c2c-ease);
}
.c2c-card--link:hover,
.c2c-card--link:focus-within {
  border-color: var(--c2c-ink);
  transform: translateY(-4px);
}
.c2c-card--link .c2c-card__name a {
  color: inherit;
  text-decoration: none;
}
.c2c-card--link .c2c-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.c2c-card--link .c2c-card__name a:is(:hover, :focus-visible) {
  color: var(--c2c-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}
.c2c-card--link .c2c-card__name a:focus-visible {
  outline: none;
}
.c2c-card--link:has(.c2c-card__name a:focus-visible) {
  box-shadow: 0 0 0 3px rgba(0, 16, 17, 0.14);
}
.c2c-card--link .c2c-card__by {
  margin-top: auto;
}
.c2c-card--link .c2c-card__summary {
  margin-bottom: 6px;
}
a.c2c-card__chip {
  position: relative;
  z-index: 1;
  max-width: 100%;
  color: var(--c2c-ink);
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}
/* A long domain in a narrow card: cut it short; the aria-label has it whole. */
a.c2c-card__chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
a.c2c-card__chip i {
  flex: none;
}
a.c2c-card__chip .c2c-arrow {
  transition: transform 0.45s var(--c2c-ease);
}
a.c2c-card__chip:is(:hover, :focus-visible) {
  background: var(--c2c-accent);
  color: var(--c2c-bg);
}
a.c2c-card__chip:is(:hover, :focus-visible) .c2c-arrow {
  transform: rotate(0deg);
}
a.c2c-card__chip:focus-visible {
  outline: 2px solid var(--c2c-ink);
  outline-offset: 2px;
}

/* Member page: the gathering-page article (title, facts column, story). */
.c2c-member .c2c-member__lead {
  max-width: 760px;
  margin: 24px 0 0;
  color: var(--c2c-ink);
  font-size: clamp(19px, 1.53vw, 22px);
  line-height: 1.45;
  text-wrap: pretty;
}
.c2c-member .c2c-member__by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 24px 0 0;
  color: var(--c2c-ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
}
.c2c-member__by .c2c-tenure {
  margin: 0;
}
.c2c-post__facts dd a {
  color: var(--c2c-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}
.c2c-post__facts dd a:is(:hover, :focus-visible) {
  color: var(--c2c-ink);
  text-decoration-thickness: 2px;
}
.c2c-post__facts dd a.c2c-card__chip {
  text-decoration: none;
}
.c2c-post__facts dd a.c2c-card__chip:is(:hover, :focus-visible) {
  color: var(--c2c-bg);
}
.c2c-member__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
}
.c2c-post__body .c2c-member__services {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c2c-post__body .c2c-member__services li {
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--c2c-line);
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
}
.c2c-post__body > h2:first-child {
  margin-top: 0;
}
.c2c-member .c2c-member__note {
  margin: clamp(48px, 5vw, 72px) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--c2c-line);
  color: var(--c2c-muted);
  font-size: 14px;
  line-height: 1.5;
}
.c2c-member__note a {
  color: var(--c2c-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.c2c-member__note a:is(:hover, :focus-visible) {
  color: var(--c2c-ink);
  text-decoration-thickness: 2px;
}

@media screen and (max-width: 1119px) {
  .c2c-dir__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .c2c-dir__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .c2c-dir__search {
    flex-basis: 100%;
    max-width: none;
  }
  .c2c-dir__toolrow {
    width: 100%;
    justify-content: space-between;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c2c-card--link {
    transition: none;
  }
  .c2c-card--link:hover,
  .c2c-card--link:focus-within {
    transform: none;
  }
}