/* ==========================================================================
   summit.css — additions layered on top of style.css
   Loaded after style.css, so these rules win on ties. Kept in a separate
   file because style.css is large and gets rewritten by the editor.
   ========================================================================== */


/* ==========================================================================
   BOOTSTRAP 5 COMPATIBILITY
   Bootstrap's CSS loads before style.css, so its Reboot re-styles bare
   elements this design left to inherit. These restore the page's own
   defaults; anything class-scoped already wins on specificity.
   ========================================================================== */

h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}


/* ==========================================================================
   HERO — AI vectors
   Line motifs (neural net, chip, orbit, circuit) drifting in the empty
   flanks either side of the headline. Decorative only, behind the copy.
   ========================================================================== */

.hero-vectors {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: var(--hero-accent);
  pointer-events: none;
}

.hero-vec {
  position: absolute;
  opacity: .3;
  stroke-linecap: round;
  stroke-linejoin: round;
  will-change: transform;
}

.vec-net {
  top: 15%;
  left: 4.5%;
  width: clamp(120px, 12vw, 190px);
  animation: hero-drift-a 17s ease-in-out infinite;
}

.vec-chip {
  top: 12%;
  right: 5%;
  width: clamp(105px, 10.5vw, 165px);
  opacity: .26;
  animation: hero-drift-b 21s ease-in-out infinite;
}

.vec-orbit {
  top: 47%;
  right: 8.5%;
  width: clamp(95px, 9.5vw, 150px);
  opacity: .24;
  animation: hero-drift-a 25s ease-in-out infinite reverse;
}

.vec-circuit {
  top: 52%;
  left: 3.5%;
  width: clamp(120px, 13vw, 195px);
  opacity: .26;
  animation: hero-drift-b 19s ease-in-out infinite reverse;
}

/* Signal dots riding the same routes the motifs draw. Each offset-path
   repeats the `d` of the line it follows; negative delays stagger them so
   they never launch in step. */

.vec-dot {
  fill: currentColor;
  stroke: none;
  offset-rotate: 0deg;
  animation: vec-travel 6s linear infinite;
}

@keyframes vec-travel {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

.d-net-1 {
  offset-path: path("M28 40 L96 30 L164 62");
  animation-duration: 5.4s;
}

.d-net-2 {
  offset-path: path("M28 160 L96 100 L164 138");
  animation-duration: 6.8s;
  animation-delay: -2.2s;
}

.d-net-3 {
  offset-path: path("M28 100 L96 170 L164 138");
  animation-duration: 7.6s;
  animation-delay: -4.4s;
}

.d-chip-1 {
  offset-path: path("M90 22 L90 52");
  animation-duration: 3.2s;
}

.d-chip-2 {
  offset-path: path("M22 90 L52 90");
  animation-duration: 3.8s;
  animation-delay: -1.4s;
}

.d-chip-3 {
  offset-path: path("M158 90 L128 90");
  animation-duration: 3.5s;
  animation-delay: -2.6s;
}

.d-chip-4 {
  offset-path: path("M90 158 L90 128");
  animation-duration: 4.1s;
  animation-delay: -.8s;
}

.d-orb-1,
.d-orb-2,
.d-orb-3 {
  offset-path: path("M13 85 a72 30 0 1 0 144 0 a72 30 0 1 0 -144 0");
}

.d-orb-1 {
  animation-duration: 9s;
}

.d-orb-2 {
  animation-duration: 11s;
  animation-delay: -3.5s;
}

.d-orb-3 {
  animation-duration: 13s;
  animation-delay: -7s;
}

.d-cir-1 {
  offset-path: path("M10 26 L54 26 L72 44 L122 44");
  animation-duration: 6s;
}

.d-cir-2 {
  offset-path: path("M10 122 L68 122 L90 100 L148 100");
  animation-duration: 7.4s;
  animation-delay: -3s;
}

.d-cir-3 {
  offset-path: path("M96 100 L96 62 L180 62");
  animation-duration: 5.6s;
  animation-delay: -1.8s;
}

.d-cir-4 {
  offset-path: path("M104 44 L126 22 L180 22");
  animation-duration: 6.6s;
  animation-delay: -4.2s;
}

/* The flanks disappear once the layout narrows — the motifs would sit on
   top of the headline rather than beside it */
@media (max-width:1080px) {

  .vec-orbit,
  .vec-circuit {
    display: none;
  }

  .vec-net,
  .vec-chip {
    top: 8%;
    opacity: .18;
  }
}

@media (max-width:760px) {
  .hero-vectors {
    display: none;
  }
}


/* ==========================================================================
   KEY DISCUSSION AREAS — staggered glass cards over a drifting ribbon
   ========================================================================== */

/* Catches the full-bleed ribbon so it can't raise a horizontal scrollbar.
   `clip` rather than `hidden` — hidden would make the body a scroll
   container and kill the sticky nav. It has to live here and not on the
   section, because the section is capped at 1600px and would crop the
   ribbon on wider screens. */
body {
  overflow-x: clip;
}

/* The rule above cannot clip on its own: overflow declared on body is
   propagated to the viewport, which leaves body itself computing to visible.
   Declaring it on the root as well is what actually trims the full-bleed
   ribbon and pill rows. `clip` rather than `hidden` so no scroll container
   is created and the sticky nav keeps working. */
html {
  overflow-x: clip;
}

.discussion-flow {
  position: relative;
  margin-top: 54px;
  padding: 30px 0 56px;
}

/* Breaks out of the section's padding and max-width to run edge to edge.
   `cover` keeps the ribbon filling the band at any viewport, and the box is
   held wider than the screen so the slow drift never exposes an end. */
.discussion-flow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 116vw;
  height: 116%;
  transform: translate(-50%, -50%);
  background: url("img/discussion-wave.jpg") center center / cover no-repeat;
  pointer-events: none;
  animation: wave-drift 30s ease-in-out infinite alternate;
}

/* Two motions on different beats: the ribbon slides while it breathes,
   so the loop never lands on an obvious turning point */
@keyframes wave-drift {
  from {
    transform: translate(-53%, -51%) scale(1);
  }

  to {
    transform: translate(-47%, -48%) scale(1.06);
  }
}

.discussion-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.discussion-cards li {
  display: flex;
  flex-direction: column;
  min-height: 236px;
  margin-right: -20px;
  padding: 24px 26px 26px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 16px;
  background: rgba(232, 238, 250, .5);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 16px 38px rgba(74, 23, 173, .08);
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Stepped like the reference — every second card drops, and each card
   stacks over the one to its left */
.discussion-cards li:nth-child(even) {
  transform: translateY(36px);
}

.discussion-cards li:nth-child(4n+2) {
  background: rgba(228, 246, 234, .5);
}

.discussion-cards li:nth-child(4n+3) {
  background: rgba(239, 233, 251, .5);
}

.discussion-cards li:nth-child(4n) {
  background: rgba(227, 231, 250, .52);
}

.discussion-cards li:nth-child(1) {
  z-index: 1;
}

.discussion-cards li:nth-child(2) {
  z-index: 2;
}

.discussion-cards li:nth-child(3) {
  z-index: 3;
}

.discussion-cards li:nth-child(4) {
  z-index: 4;
}

.discussion-cards li:nth-child(5) {
  z-index: 1;
}

.discussion-cards li:nth-child(6) {
  z-index: 2;
}

.discussion-cards li:nth-child(7) {
  z-index: 3;
}

.discussion-cards li:nth-child(8) {
  z-index: 4;
}

.discussion-cards li:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(74, 23, 173, .14);
}

.discussion-cards li:nth-child(even):hover {
  transform: translateY(30px);
}

.discussion-index {
  color: #8b81a5;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1.6px;
}

.discussion-cards li div {
  margin-top: auto;
}

.discussion-cards h3 {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.4px;
}

.discussion-cards p {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.65;
}

@media (max-width:1240px) {
  .discussion-cards h3 {
    font-size: 19px;
  }

  .discussion-cards li {
    padding: 22px 20px 24px;
  }
}

@media (max-width:980px) {
  .discussion-cards {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 22px;
  }

  .discussion-cards li:nth-child(even) {
    transform: translateY(28px);
  }

  .discussion-cards li:nth-child(even):hover {
    transform: translateY(22px);
  }
}

@media (max-width:620px) {
  .discussion-flow {
    margin-top: 34px;
    padding: 18px 0 24px;
  }

  .discussion-cards {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  .discussion-cards li {
    min-height: 0;
    margin-right: 0;
  }

  .discussion-cards li,
  .discussion-cards li:nth-child(even) {
    transform: none;
  }

  .discussion-cards li:hover,
  .discussion-cards li:nth-child(even):hover {
    transform: none;
  }

  .discussion-cards li div {
    margin-top: 18px;
  }
}


/* ==========================================================================
   FOCUS SECTORS — two pill rows drifting in opposite directions
   Each row holds the same five pills three times and slides exactly one
   third of its own width, so a clone lands where the original started and
   the loop is seamless. Three copies rather than two because the row has to
   stay wider than one viewport plus the distance travelled — with two, a
   wide screen runs past the end of the pills and shows a blank gap.
   The clones are aria-hidden so screen readers hear the list once.
   ========================================================================== */

.sectors {
  padding-top: 30px;
}

/* Full-bleed: the pills should run off both screen edges, not stop at the
   section's padding. The body already has overflow-x:clip to absorb it. */
.sector-marquee {
  width: 100vw;
  margin-left: 50%;
  margin-top: 46px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Essential, not cosmetic: each row is a max-content strip several
     thousand pixels wide. The mask below only clips painting, so without
     this the strip widens the whole document and the page scrolls sideways.
     body's overflow-x:clip does not catch it either — overflow set on body
     propagates to the viewport, which leaves body itself not clipping. */
  overflow: hidden;
  /* Fades the pills out at both edges instead of cutting them off mid-word */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.sector-row {
  display: flex;
  width: max-content;
  animation: sector-slide 52s linear infinite;
  will-change: transform;
}

/* Same keyframes played backwards — the second row travels the other way */
.sector-row.is-reverse {
  animation-duration: 46s;
  animation-direction: reverse;
}

@keyframes sector-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-33.3333%);
  }
}

.sector-marquee:hover .sector-row {
  animation-play-state: paused;
}

/* Spacing lives on the pills as a trailing margin, not as a flex gap. A gap
   would sit between the tracks as well, and the row would then measure
   3×track + 2 gaps — so a one-third slide would stop short of the seam and
   the loop would visibly jump. Trailing margins make the row exactly three
   times one track, which is what the -33.3333% keyframe assumes. */
.sector-track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sector-track li {
  margin-right: 18px;
  padding: 14px 30px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--muted);
  color: #190e47;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Same tint rotation the discussion cards use, so the two sections read as
   one family. Cycles over 5 pills, which is also the row length — the
   colours therefore line up across the loop seam. */
.sector-track li:nth-child(5n+2) {
  background: #e4f6ea;
}

.sector-track li:nth-child(5n+3) {
  background: #efe9fb;
}

.sector-track li:nth-child(5n+4) {
  background: #e3e7fa;
}

.sector-track li:nth-child(5n) {
  background: #e8eefa;
}

@media (max-width:620px) {
  .sector-marquee {
    margin-top: 30px;
    gap: 12px;
  }

  .sector-track li {
    margin-right: 12px;
    padding: 11px 20px;
    font-size: 14px;
  }
}


@media (prefers-reduced-motion:reduce) {

  .hero-vec,
  .vec-dot,
  .discussion-flow::before {
    animation: none !important;
  }

  .discussion-cards li {
    transition: none !important;
  }

  /* No drift: drop the clones and let the real pills wrap into a static
     block, centred inside the section instead of running full-bleed */
  .sector-marquee {
    width: auto;
    margin-left: 0;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .sector-row {
    width: auto;
    animation: none !important;
  }

  .sector-track {
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
  }

  .sector-track li {
    margin-bottom: 12px;
  }

  .sector-track.is-clone {
    display: none;
  }
}


/* ==========================================================================
   SECTION HEADINGS — one size, two-colour gradient fill
   Every h2 on the page at 45px, its text painted with a gradient rather than
   a flat colour. Listed one selector per section because style.css sizes
   several of them individually (39/62/36px) and those beat a bare `h2`.
   ========================================================================== */

h2,
.experience-copy h2,
.participate h2,
.policy h2,
.faq h2 {
  font-size: 45px;
  /* -2.5px was tuned for headings up to 58px; at 45px it closes the letters
     up too far, so the tracking eases off with the size */
  letter-spacing: -1.4px;

  /* fit-content, so the gradient spans the text rather than the full column.
     On a block-width box a centred heading would only ever sample the middle
     of the ramp and read as one flat colour. Explicit <br> breaks still
     decide the line breaks; this only shrinks the box around them. */
  width: fit-content;
  max-width: 100%;

  background-image: linear-gradient(92deg, #190e47 0%, #7843dc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Centred headings: the box no longer fills the column, so it needs its own
   centring back */
h2.text-center {
  margin-inline: auto;
}

/* The accent spans carry their own colour, which would paint over the
   clipped gradient. Transparent again lets the h2's gradient show through. */
h2 em,
.participate h2 em,
.policy h2 em {
  color: inherit;
  -webkit-text-fill-color: transparent;
}

/* Three sections sit on deep purple. The ink-to-violet ramp disappears
   there, so those headings get a light ramp instead. */
.experience-copy h2,
.participate h2,
.policy h2 {
  background-image: linear-gradient(92deg, #fff 0%, #d7baff 100%);
}





/* ==========================================================================
   KEY PARTICIPANTS — a deck of cards that stack as you scroll
   Each card is sticky at its own top offset, one notch lower than the card
   before it. Scrolling brings the next card up over the one already parked,
   leaving a sliver of every earlier card visible, so the section reads as a
   deck being dealt rather than a list. The stacking is pure CSS; the script
   only adds the settle — a covered card easing back as the next lands on it.
   ========================================================================== */

.participants {
  position: relative;
  max-width: none;
  padding: 96px 7% 120px;
  background: #fcfbff;
}

/* The gradient orb, sized to the deck rather than tiled. Sits behind
   everything and takes no pointer events, so it never blocks a card. */
.participants::before {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  z-index: 0;
  width: min(1240px, 128vw);
  aspect-ratio: 984 / 996;
  transform: translate(-50%, -50%);
  background: url("img/participants-bg.webp") center / contain no-repeat;
  pointer-events: none;
}

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

.kp-intro {
  max-width: 620px;
  margin: 18px auto 0;
  color: var(--muted-foreground);
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
}

.kp-deck {
  max-width: 880px;
  margin: 64px auto 0;
}

/* The stack itself. Every card sticks, each one notch lower than the last,
   so the parked cards leave a visible edge instead of hiding completely.
   No ancestor may take overflow:hidden — that would make itself the
   scrollport and the cards would stop sticking to the page. */
.kp-item {
  position: sticky;
  top: calc(118px + var(--i) * 18px);
  /* Column rather than a grid now the icon is gone: the copy is the whole
     card, so it centres against the card's height instead of sitting in a
     track beside something. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 214px;
  margin-bottom: 56px;
  padding: 40px 50px 42px;
  border: 1px solid #ebe5f9;
  border-radius: 26px;
  background: linear-gradient(152deg, #fff 0%, #f7f4fe 100%);
  box-shadow: 0 22px 54px rgba(74, 23, 173, .1);
  /* Each card paints over the one before it. Without this the later cards
     would slide underneath, since they share a stacking context. */
  z-index: calc(var(--i) + 1);
}

.kp-item:last-child {
  margin-bottom: 0;
}

/* Watermark in the corner, drawn in outline so it sets the position in the
   deck without competing with the title */
.kp-num {
  position: absolute;
  top: 30px;
  right: 40px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(124, 58, 237, .3);
  font-size: 62px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}

.kp-item h3 {
  max-width: 20ch;
  font-size: 29px;
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: -.8px;
}

.kp-item p {
  max-width: 52ch;
  margin: 14px 0 0;
  color: var(--muted-foreground);
  font-size: 15.5px;
  line-height: 1.7;
}

@media (max-width:900px) {
  .participants {
    padding: 74px 6% 92px;
  }

  .kp-deck {
    margin-top: 44px;
  }

  .kp-item {
    min-height: 0;
    margin-bottom: 40px;
    padding: 30px 30px 32px;
    border-radius: 22px;
  }

  .kp-num {
    top: 22px;
    right: 26px;
    font-size: 44px;
  }

  .kp-item h3 {
    max-width: none;
    padding-right: 62px;
    font-size: 23px;
  }

  .kp-item p {
    font-size: 15px;
  }
}

@media (max-width:600px) {
  /* Stacking is dropped here: a card tall enough to hold this copy on a
     phone leaves nothing of the card beneath it showing, so the effect
     costs scroll length and returns nothing. */
  .kp-item {
    position: static;
    margin-bottom: 20px;
    padding: 26px 22px 28px;
  }

  .kp-item h3 {
    padding-right: 54px;
    font-size: 21px;
  }

  .kp-num {
    font-size: 36px;
  }
}


/* ---- Key Participants: AI motifs in the flanks -------------------------
   Line-art rather than imagery, to match the vectors already drifting in
   the hero. They live either side of the deck, where the stacking cards
   never reach, so they stay visible for the whole scroll. Decorative only,
   hence aria-hidden in the markup and no pointer events here. */

/* Sticky rather than absolute, so the motifs hold in the flanks for the
   whole length of the deck instead of scrolling away after the first card.
   The negative margin cancels its own height, so it reserves no space and
   the deck starts exactly where it would have anyway. */
.kp-vectors {
  position: sticky;
  top: 0;
  /* Behind the deck. Overrides the blanket z-index:1 that lifts the
     section's other children above the background orb. */
  z-index: 0;
  height: 100vh;
  margin-bottom: -100vh;
  color: #a98ded;
  pointer-events: none;
}

.kp-vec {
  position: absolute;
  width: 172px;
  opacity: .42;
  will-change: transform;
}

.kp-vec-net {
  top: 22%;
  left: 2.5%;
  animation: kp-drift-a 21s ease-in-out infinite;
}

.kp-vec-chip {
  top: 52%;
  right: 2.5%;
  animation: kp-drift-b 26s ease-in-out infinite;
}

@keyframes kp-drift-a {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(6px, -22px) rotate(2.5deg);
  }
}

@keyframes kp-drift-b {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(-8px, 20px) rotate(-3deg);
  }
}

/* Signal dots riding the lines the motifs draw. Each offset-path repeats
   the geometry of the segment it follows; negative delays stagger them so
   they never launch in step. */
.kp-dot {
  fill: currentColor;
  stroke: none;
  offset-rotate: 0deg;
  animation: kp-travel 6s linear infinite;
}

@keyframes kp-travel {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

.kp-dot-n1 {
  offset-path: path("M20 40 L100 75 L180 70");
  animation-duration: 5.6s;
}

.kp-dot-n2 {
  offset-path: path("M20 100 L100 125 L180 130");
  animation-duration: 7.2s;
  animation-delay: -2.6s;
}

.kp-dot-n3 {
  offset-path: path("M20 160 L100 175 L180 130");
  animation-duration: 8.4s;
  animation-delay: -5s;
}

.kp-dot-c1 {
  offset-path: path("M100 160 V130");
  animation-duration: 3.4s;
}

.kp-dot-c2 {
  offset-path: path("M40 100 H70");
  animation-duration: 4.2s;
  animation-delay: -1.8s;
}

/* The flanks close up as the layout narrows — below this the motifs would
   sit under the cards rather than beside them */
@media (max-width:1240px) {
  .kp-vectors {
    display: none;
  }
}

@media (prefers-reduced-motion:reduce) {

  .kp-vec,
  .kp-dot {
    animation: none !important;
  }
}


/* ==========================================================================
   PARTICIPATE — split slab: the pitch on the left, the ways in on the right
   Replaces the flat purple panel with three columns of loose text. The ground
   gains depth from a gradient plus a fading dot field, and each way to take
   part becomes its own row that responds to the pointer, so the block reads
   as something to act on rather than a paragraph in a coloured box.
   ========================================================================== */

.participate {
  position: relative;
  overflow: hidden;
  /* The section above ends flush with no padding of its own, so without a
     top margin here the slab's rounded corners sit hard against it */
  margin: 100px 4% 0;
  max-width: none;
  padding: 88px 5.5% 86px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(760px 430px at 88% 4%, rgba(198, 156, 255, .5), transparent 66%),
    linear-gradient(152deg, #7c3aed 0%, #5b21b6 58%, #4a1c92 100%);
}

/* Dot field over the gradient, faded out toward the lower right by the mask
   so it never reaches the copy it sits behind */
.participate::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .17) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(158deg, #000 0%, transparent 58%);
  mask-image: linear-gradient(158deg, #000 0%, transparent 58%);
  pointer-events: none;
}

.pt-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 76px;
}

.participate .eyebrow {
  color: #dcc6fd;
}

.pt-intro {
  max-width: 30rem;
  margin-top: 22px;
  color: #e4d6f8;
  font-size: 16px;
  line-height: 1.72;
}

.pt-note {
  margin: 38px 0 0;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.6;
}

.pt-note span {
  color: #d5bdf3;
  font-size: 12.5px;
}

/* ---- The three ways in ---- */

.participation-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* style.css lays these out as a bordered three-column grid; every part of
     that is replaced here */
  grid-template-columns: none;
  margin: 0;
  padding: 0;
  border-bottom: 0;
  list-style: none;
}

.participation-options li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 8px 20px;
  padding: 24px 26px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}

.participation-options li:hover {
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .14);
  transform: translateX(7px);
}

.pt-num {
  padding-top: 2px;
  color: #d9c2f9;
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1.6px;
}

.participation-options h3 {
  font-size: 19px;
  font-weight: 550;
  letter-spacing: -.3px;
}

.participation-options p {
  margin-top: 9px;
  color: #e0d0f5;
  font-size: 14px;
  line-height: 1.62;
}

.pt-arrow {
  display: inline-flex;
  color: #d9c2f9;
  transition: transform .35s ease, color .35s ease;
}

.participation-options li:hover .pt-arrow {
  color: #fff;
  transform: translate(3px, -3px);
}

@media (max-width:980px) {
  .participate {
    margin-top: 68px;
    padding: 64px 7% 66px;
    border-radius: 22px;
  }

  .pt-inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .pt-intro {
    max-width: none;
  }

  .pt-note {
    margin-top: 28px;
  }

  .participation-options p {
    max-width: none;
  }
}

@media (max-width:600px) {
  .participation-options li {
    padding: 20px 20px;
    gap: 6px 14px;
  }

  /* No room for a third track — the arrow goes under the number rather than
     squeezing the copy into a sliver */
  .pt-arrow {
    display: none;
  }
}

@media (prefers-reduced-motion:reduce) {

  .participation-options li,
  .pt-arrow {
    transition: none !important;
  }
}


/* ==========================================================================
   VENUE — film grain over the panel
   The noise is generated by an SVG turbulence filter carried inline as a
   data URI, so there is no texture file to load and it stays sharp at any
   density. Kept on a pseudo-element with multiply blending: the speckle
   darkens what is under it rather than laying a grey film over the type.
   ========================================================================== */

.venue {
  position: relative;
  isolation: isolate;
}

.venue::after {
  content: "";
  position: absolute;
  /* Bleeds past the section's padding so the grain reaches the edges of the
     band rather than stopping at the content box */
  inset: -60px -7%;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  /* Low enough to read as texture rather than a grey wash over the white */
  opacity: .16;
  mix-blend-mode: multiply;
  pointer-events: none;
}

@media (max-width:900px) {
  .venue::after {
    inset: -40px -6%;
  }
}


/* ==========================================================================
   OUR PUBLICATIONS — the four Elets magazines
   A logo sits above each card's copy in a fixed-height box so wordmarks of
   different proportions still line up on one baseline row across the grid.
   The whole card is one link; the arrow row is only a visual affordance.
   ========================================================================== */

.publications {
  padding-bottom: 20px;

  /* Hidden for now. The markup stays in index.html; remove this one
     declaration to bring the section back. */
  display: none;
}

.pub-head {
  max-width: 640px;
}

.pub-head p:not(.eyebrow) {
  margin-top: 18px;
  color: #625c73;
  font-size: 15px;
  line-height: 1.7;
}

.pub-grid {
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.pub-grid a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px 24px;
  border: 1px solid #e5e1ed;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}

.pub-grid a:hover {
  border-color: #d1b9f3;
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(25, 14, 71, .09);
}

/* Fixed height, contained fit: the logos arrive at different aspect ratios
   and would otherwise each set their own row height. */
.pub-logo {
  display: flex;
  align-items: center;
  height: 58px;
  margin-bottom: 22px;
}

.pub-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.pub-grid h3 {
  margin: 0 0 9px;
  font-size: 17px;
  font-weight: 550;
  letter-spacing: -.3px;
  color: #190e47;
}

.pub-grid p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #625c73;
}

.pub-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Pushed to the bottom so the arrow rows align even when the blurbs run to
     different lengths */
  margin-top: auto;
  padding-top: 20px;
  font-size: 13px;
  font-weight: 550;
  color: #6e31d4;
}

.pub-grid a:hover .pub-link svg {
  transform: translate(2px, -2px);
}

.pub-link svg {
  transition: transform .2s;
}

@media (max-width:1100px) {
  .pub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:640px) {
  .pub-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pub-logo {
    height: 48px;
    margin-bottom: 18px;
  }
}


/* ==========================================================================
   FOOTER — matched to the NBFC100 Mumbai contact footer
   Two stacked backgrounds, as on the reference: the Taj photograph on its
   cream ground, and a line-art sheet over it at low opacity. The reference
   pins that second layer with background-attachment:fixed, so the lines hold
   still while the section scrolls past.
   ========================================================================== */

.contact {
  position: relative;
  z-index: 1;
  padding: 90px 0 0;
  background: url("img/footer-taj.webp") center / cover no-repeat #f7f4f0;
  color: #190e47;
}

.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: url("img/footer-lines.png") center / cover no-repeat;
  background-attachment: fixed;
  opacity: .15;
  pointer-events: none;
}

/* Above the line-art sheet */
.contact .container {
  position: relative;
  z-index: 2;
}

/* Left on the site-wide gradient h2 (ink -> violet) rather than the
   reference's flat maroon, so the last heading on the page matches every
   heading above it. */
.contact h2 {
  margin-bottom: 30px;
}

/* Glass rather than the reference's solid slab: the ribbon and the line-art
   sheet carry on through the card instead of stopping at it. Tinted a touch
   violet so it reads as part of the palette and not as plain frosted white,
   with a lit top edge to give the pane thickness. */
.cont {
  width: 100%;
  margin: 0 0 15px;
  padding: 32px 28px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .62) 0%, rgba(236, 229, 253, .44) 100%);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(0px) saturate(165%);
  box-shadow:
    0 18px 44px rgba(74, 23, 173, .12),
    inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* Two contacts share the card, side by side while there is room */
.cont-people {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 46px;
}

/* Glass is a light ground, so the copy inverts from the reference's white to
   the page's ink, and the icons pick up the accent they could not use on a
   solid violet slab. */
.cont h4 {
  margin-bottom: 14px;
  color: #190e47;
  font-size: 20px;
  font-weight: 550;
  line-height: 30px;
  letter-spacing: -.3px;
}

.cont h5 {
  color: #574f6b;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.8;
}

.cont h5 span {
  color: #190e47;
  font-size: 16.5px;
  font-weight: 500;
}

.cont h5 svg {
  color: var(--hero-accent);
}

.cont h5 a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}

.cont h5 a:hover {
  color: var(--hero-accent);
  text-decoration: underline;
}

/* preflight sets svg{display:block}, which would drop every icon onto its own
   line instead of sitting in front of the number it labels */
.cont h5 svg {
  display: inline-block;
  vertical-align: -2px;
}

.common-txt {
  margin: 40px 0 0;
  font-size: 13px;
  line-height: 26px;
}

.copyr {
  margin-top: 20px;
  padding: 20px 0 24px;
  color: #190e47;
  font-size: 11px;
  text-align: center;
}

@media (max-width:900px) {
  .contact {
    padding-top: 60px;
  }

  /* iOS Safari does not composite a fixed background reliably, and the sheet
     jumps as the address bar collapses. Scrolling with the section is the
     safer read on a phone. */
  .contact::before {
    background-attachment: scroll;
  }

  /* Keeps the copy clear of the dome, which cover-crops toward the right */
  .contact .container {
    background: linear-gradient(90deg, rgba(247, 244, 240, .82) 62%, transparent);
  }
}


/* ==========================================================================
   REGISTER PAGE — the embedded form given a setting
   A lavender ground that fades to white behind the card, the summit's line
   motifs drifting in the flanks, and the iframe seated in a raised panel so
   the third-party form reads as part of the page rather than pasted onto it.
   ========================================================================== */

.register-page {
  position: relative;
  overflow: hidden;
  padding: 54px 0 96px;
  background: linear-gradient(180deg, #f6f2fd 0%, #fbfaff 340px, #fff 620px);
}

.register-head {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto 38px;
  padding: 0 5%;
  text-align: center;
}

/* The site-wide gradient h2 is width:fit-content, so a centred one needs its
   own centring back */
.register-head h2 {
  margin-inline: auto;
}

.register-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.register-meta li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border: 1px solid #e9e2f7;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #574f6b;
  font-size: 13.5px;
  line-height: 1;
  box-shadow:
    0 1px 3px rgba(74, 23, 173, .04),
    0 10px 24px rgba(74, 23, 173, .05);
}

.register-meta svg {
  color: var(--hero-accent);
}

/* Capped at the form's own maximum width (measured at 798px): past that the
   form stops growing and the extra frame would just be Zoho's grey page.
   overflow:hidden both rounds the iframe's corners with the panel and hides
   the crop below. */
.register-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  max-width: 798px;
  margin-inline: auto;
  border: 1px solid #e9e2f7;
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 2px 6px rgba(74, 23, 173, .04),
    0 26px 60px rgba(74, 23, 173, .10);
}

/* The embedded page draws a 31px grey gutter on all four sides that no rule of
   ours can reach. Oversizing the frame by exactly that much and pulling it up
   and left crops the gutter away, so the panel reads as white to its edges.
   The form tracks the frame width, so the side crop holds at every size.

   The bottom is cropped by the card's own height instead, because this form
   does not post its height to the parent (checked — no message arrives), so
   the frame cannot self-size. The heights below are the form's measured
   content height at each tier, plus a few px of slack. If fields are ever
   added to the form these want re-measuring, or the last field will be clipped
   — the "open in a new tab" link below the card is the way out if that
   happens. */
.register-card {
  height: 1248px;
}

.register-card iframe {
  display: block;
  width: calc(100% + 62px);
  height: 1400px;
  margin: -31px 0 0 -31px;
  border: 0;
}

/* Below 992px the card narrows and the form reflows taller. Measured at the
   frame width each of these tiers actually produces: 1246 / 1269 / 1291. */
@media (max-width:991px) {
  .register-card {
    height: 1271px;
  }
}

@media (max-width:575px) {
  .register-card {
    height: 1272px;
  }
}

/* ---- the motifs in the flanks ---- */

.register-vectors {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: var(--hero-accent);
  pointer-events: none;
}

.register-vec {
  position: absolute;
  opacity: .22;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.register-vec-net {
  top: 74px;
  left: 3%;
  width: clamp(110px, 10vw, 165px);
  animation: hero-drift-a 19s ease-in-out infinite;
}

.register-vec-chip {
  top: 132px;
  right: 3.5%;
  width: clamp(96px, 9vw, 145px);
  animation: hero-drift-b 23s ease-in-out infinite reverse;
}

/* Below this the flanks are gone and the motifs would land on the card */
@media (max-width:1180px) {
  .register-vectors {
    display: none;
  }
}

@media (max-width:620px) {
  .register-page {
    padding: 34px 0 64px;
  }

  .register-head {
    margin-bottom: 28px;
  }

  .register-meta li {
    padding: 8px 14px;
    font-size: 12.5px;
  }

  .register-card {
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .register-vec {
    animation: none !important;
  }
}