/* ============================================================
   Con-fret — pixel-perfect replica
   Reference design width: 1675 CSS px (ref.png @2x = 3349)
   1rem = 16px at 1675vw  →  html font-size scales fluidly
   (native px → rem = native / 32)
   ============================================================ */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2192, U+2197;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-tight-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans — variable (Google Fonts, OFL) */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #0a0a0a;
  --bg-dark: #060606;
  --cream: #f1f4ee;
  --accent: #00e2e2;          /* CGD cyan */
  --magenta: #f500d6;         /* CGD magenta */
  --yellow: #f0e800;          /* CGD yellow */
  --gray-head: #949494;      /* "Event" / "Insight" / "Conference" */
  --gray-body: #8d8d8d;
  --gray-dim: #6a6a6a;
  --container: 3.5rem;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font-display: 'Plus Jakarta Sans', 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

html {
  /* 16px at 1675 viewport width → everything scales proportionally */
  font-size: clamp(9px, 0.95522vw, 22px);
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #fff;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- shared: arrow icon ---------- */
.arr {
  width: .72em; height: .72em;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: square;
  transition: transform .3s var(--ease);
}
a:hover > .arr, .btn:hover .arr { transform: translate(.14em, -.14em); }

/* ---------- shared: buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  border-radius: 99rem;
  font-weight: 600; line-height: 1;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn-accent {
  background: var(--accent); color: var(--ink);
  font-size: 1.1875rem;            /* 19px */
  padding: 1.22rem 2.95rem;
}
.btn-accent:hover { background: var(--magenta); }

/* ---------- shared: editorial section labels ---------- */
.tag {
  display: inline-flex; align-items: center; gap: .8em;
  font-size: .8125rem;             /* 13px */
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
}
.tag::after {
  content: ''; width: 3.4rem; height: 1px;
  background: currentColor; opacity: .25;
}
.tag .dot  { width: .42em; height: .42em; border-radius: 50%; background: var(--magenta); }
.tag-dark  { color: #fff; }

/* ---------- shared: animated underline link ---------- */
.link-line {
  position: relative;
  display: inline-flex; align-items: center; gap: .5em;
  font-size: 1.05rem; font-weight: 600;
  padding-bottom: .45em;
  color: inherit;
}
.link-line::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.link-line:hover::after { transform: scaleX(0); transform-origin: left; }
.link-line:hover { color: var(--accent); }


.head {
  font-size: 4.95rem;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -.02em;
}
.head span { color: var(--gray-head); }

/* ---------- display typeface mapping ---------- */
.hero-title, .hero-event-title,
.manifesto-text, .head,
.menu-overlay-nav a,
.t-title, .ec-title, .ec-name, .nc-title,
.footer-head {
  font-family: var(--font-display);
}
/* Plus Jakarta Sans sits wider than Inter Tight — relax the tracking */
.hero-title { letter-spacing: -.015em; }
.manifesto-text { letter-spacing: -.012em; }
.head, .t-title { letter-spacing: -.008em; }

/* ============================================================
   NAV
   ============================================================ */
.site-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.9rem var(--container);
  color: #fff;
  font-size: 1.125rem; font-weight: 500;
}
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img {
  height: 2.6rem; width: auto; display: block;
  filter: drop-shadow(0 .15rem .8rem rgba(0,0,0,.45));
}
.nav-menu-btn {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: 1.125rem; font-weight: 500;
}
.menu-icon { display: inline-flex; flex-direction: column; gap: .28rem; width: 1.35rem; }
.menu-icon i { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .3s; }

/* menu overlay — full editorial takeover */
.menu-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg-dark);
  display: flex; flex-direction: column;
  padding: 8rem var(--container) 2.2rem;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .75s var(--ease), visibility 0s .75s;
}
.menu-overlay.open {
  clip-path: inset(0 0 0% 0);
  visibility: visible;
  transition: clip-path .75s var(--ease), visibility 0s;
}
.menu-inner {
  flex: 1;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  align-items: center;
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(2.8rem); }
  to   { opacity: 1; transform: none; }
}
.menu-overlay.open .menu-overlay-nav a,
.menu-overlay.open .menu-meta-block,
.menu-overlay.open .menu-foot {
  animation: menu-in .65s var(--ease) backwards;
  animation-delay: calc(.28s + var(--i, 0) * .07s);
}
.menu-overlay-nav { display: flex; flex-direction: column; }
.menu-overlay-nav a {
  position: relative;
  display: flex; align-items: baseline; gap: 1.8rem;
  font-family: var(--font-display);
  color: #fff;
  font-size: 4.4rem; font-weight: 700;
  line-height: 1.06; letter-spacing: -.015em;
  padding: .7rem 0;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.menu-overlay-nav a .idx {
  font-size: .9rem; font-weight: 600;
  letter-spacing: .1em;
  color: var(--gray-dim);
  transition: color .3s var(--ease);
}
/* hovering the list dims siblings, lifts the target */
.menu-overlay-nav:hover a { opacity: .25; }
.menu-overlay-nav:hover a:hover { opacity: 1; transform: translateX(1rem); }
.menu-overlay-nav a:hover .idx { color: var(--magenta); }
.menu-overlay-nav a::after {
  content: '\2197';
  font-size: .5em;
  color: var(--accent);
  opacity: 0; transform: translate(-.4em, .3em);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.menu-overlay-nav a:hover::after { opacity: 1; transform: none; }

/* meta column */
.menu-meta {
  display: flex; flex-direction: column; gap: 2.8rem;
  justify-self: end;
  min-width: 22rem;
}
.menu-meta-block { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.4rem; }
.menu-meta-label {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gray-dim);
  margin-bottom: .9rem;
}
.menu-meta-value { color: #fff; font-size: 1.15rem; font-weight: 600; }
.menu-meta .link-line { color: rgba(255,255,255,.85); font-size: 1.05rem; }
.menu-meta .link-line:hover { color: var(--accent); }
.menu-meta-links { display: flex; gap: 2rem; }

/* overlay foot */
.menu-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .9rem;
  color: rgba(255,255,255,.4);
}
.menu-dots { display: flex; gap: .55rem; }
.menu-dots i { width: .5rem; height: .5rem; border-radius: 50%; }
.menu-dots i:nth-child(1) { background: var(--yellow); }
.menu-dots i:nth-child(2) { background: var(--magenta); }
.menu-dots i:nth-child(3) { background: var(--accent); }

body.menu-open { overflow: hidden; }
body.menu-open .menu-icon i:nth-child(1) { transform: translateY(.34rem) rotate(45deg); }
body.menu-open .menu-icon i:nth-child(2) { opacity: 0; }
body.menu-open .menu-icon i:nth-child(3) { transform: translateY(-.34rem) rotate(-45deg); }
body.menu-open .nav-menu-btn { position: relative; z-index: 95; }

/* ============================================================
   HERO   (viewport 1675×1047 reference)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg-dark);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.85);
}
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,6,6,.30) 0%, rgba(6,6,6,.18) 35%, rgba(6,6,6,.72) 78%, var(--bg-dark) 100%),
    linear-gradient(100deg, rgba(6,6,6,.62) 0%, rgba(6,6,6,.25) 45%, rgba(6,6,6,.12) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 7rem var(--container) 0; }
.hero-title {
  color: #fff;
  max-width: 54vw;
  font-size: 5.9rem;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.042em;
}
.hero-title mark {
  background: none;
  color: transparent;
  -webkit-text-stroke: .016em #fff;   /* hollow outline letters */
  font-size: 1.695em;                 /* 10rem at the 5.9rem title size */
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: underline #fff;    /* solid bar stays white */
  text-decoration-thickness: .07em;
  text-underline-offset: .14em;
}
.hero-foot {
  position: relative; z-index: 2;
  margin-top: auto;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 0 var(--container) 5.5rem;
}
.hero-blurb {
  color: var(--gray-body);
  font-size: 1.0625rem;            /* 17px */
  line-height: 1.95;
  max-width: 26.5rem;
}
.hero-event { text-align: left; width: 25.1rem; }
.hero-event-date { color: #fff; font-size: 1.19rem; font-weight: 500; margin-bottom: .85rem; }
.hero-event-date span { color: var(--gray-body); }
.hero-event-title {
  display: block;
  color: #fff; font-size: 2.85rem;
  font-weight: 700; line-height: 1.04; letter-spacing: -.02em;
}
.hero-event-title .arr { stroke-width: 1.4; margin-left: .12em; }

/* ============================================================
   LOCATIONS
   ============================================================ */
.locations {
  position: relative;
  background: var(--bg-dark);
  padding: 4.6rem var(--container) 0;
}

/* editorial manifesto statement */
.manifesto { margin-top: 9.5rem; }
.manifesto .tag { margin-bottom: 3.4rem; }
.manifesto-text {
  font-size: 4.7rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.028em;
  color: #5e5e5e;
}
.manifesto-text .m-line { display: block; }
.manifesto-text em { font-style: normal; color: #fff; }
.manifesto-text .m-accent {
  font-style: normal;
  color: var(--accent);
}
.manifesto .link-line { color: #fff; }

/* stepped transition out of the dark band */
.stairs {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end;
  pointer-events: none;
}
.stairs i { display: block; width: 20%; background: #fff; }
/* inverted variant — hangs from the top, closing the white section above */
.stairs-up {
  top: 0; bottom: auto;
  align-items: flex-start;
  flex-direction: row-reverse;
}
.stairs i:nth-child(1) { height: 11.15rem; }
.stairs i:nth-child(2) { height: 14.4rem; }
.stairs i:nth-child(3) { height: 8rem; }
.stairs i:nth-child(4) { height: 5.55rem; }
.stairs i:nth-child(5) { height: .45rem; }

/* ============================================================
   UPCOMING EVENTS
   ============================================================ */
.events {
  position: relative;
  background: var(--bg-dark);
  padding: 9.5rem 0 20.5rem;
  overflow: hidden;
}
.events .tag { margin-left: var(--container); }
.carousel {
  position: relative; z-index: 1;
  display: flex; gap: 2.35rem;
  margin-top: 4.6rem;
  padding-left: var(--container);
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel.dragging { cursor: grabbing; scroll-behavior: auto; }
.event-card {
  position: relative;
  flex: 0 0 31.625rem;             /* 506px */
  overflow: hidden;
  color: #fff;
}
.event-card img {
  width: 100%; height: 41.25rem;   /* 660px */
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.event-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,6,.62) 0%, rgba(6,6,6,.18) 32%, rgba(6,6,6,0) 48%, rgba(6,6,6,.7) 100%);
  pointer-events: none;
  transition: background .4s;
}
.event-card:hover img { transform: scale(1.045); }
.event-card:hover::before {
  background: linear-gradient(180deg, rgba(6,6,6,.62) 0%, rgba(6,6,6,.18) 32%, rgba(6,6,6,.08) 48%, rgba(6,6,6,.82) 100%);
}
.ec-idx {
  position: absolute; top: 1.25rem; right: 1.5rem;
  font-size: 3.1rem; font-weight: 700; line-height: 1;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.55);
  transition: color .4s var(--ease);
}
.event-card:hover .ec-idx { color: rgba(255,255,255,.9); }
.ec-head {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 1.6rem 1.7rem 0;
}
.ec-date { font-size: .98rem; font-weight: 500; margin-bottom: .9rem; }
.ec-date span { color: var(--accent); }
.ec-title {
  font-size: 2.1rem; font-weight: 700;
  line-height: 1.04; letter-spacing: -.02em;
  max-width: 20rem;
}
.ec-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 1.7rem 1.7rem;
  transition: transform .45s var(--ease);
}
.event-card:hover .ec-foot { transform: translateY(-.5rem); }
.ec-name { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.ec-role { display: block; font-size: .95rem; color: rgba(255,255,255,.62); margin-top: .35rem; }
.ec-view {
  position: absolute; right: 1.5rem; bottom: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  background: var(--accent); color: var(--ink);
  opacity: 0; transform: translateY(.8rem) scale(.7);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.ec-view .arr { width: 1rem; height: 1rem; }
.event-card:hover .ec-view { opacity: 1; transform: none; }
.drag-cue {
  position: fixed; left: 0; top: 0; z-index: 60;
  padding: 1.15rem 1.5rem;
  border-radius: 99rem;
  background: #fff; color: var(--ink);
  font-size: .85rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0; transform: translate(-50%,-50%) scale(.6);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.drag-cue.on { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* ============================================================
   WHY CGD
   ============================================================ */
.speakers {
  background: #fff;
  padding: 5.5rem var(--container) 11rem;
  overflow: hidden;
}
.why-top .tag { margin-bottom: 3.4rem; }

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
}
.speakers-side { position: sticky; top: 6rem; }
.speakers-side .head {
  font-size: 3.9rem;
  margin-bottom: 2.6rem;
}
.why-copy {
  color: #5d5f5a;
  font-size: 1.2rem; line-height: 1.8;
  max-width: 28rem;
  margin-bottom: 2.8rem;
}

/* numbered service accordion */
.topics li { border-bottom: 1px solid rgba(10,10,10,.16); }
.topics button {
  display: grid;
  grid-template-columns: 4.6rem 1fr auto;
  align-items: baseline;
  width: 100%; text-align: left;
  padding: 2.3rem 0;
  transition: padding-left .4s var(--ease);
}
/* first row tops out level with the headline */
.topics li:first-child button { padding-top: .55rem; }
.t-idx {
  font-size: .95rem; font-weight: 600;
  letter-spacing: .08em;
  color: #9a9a9a;
  transition: color .3s var(--ease);
}
.t-title {
  font-size: 2.9rem; font-weight: 700;
  line-height: 1; letter-spacing: -.025em;
  color: #9a9a9a;
  transition: color .35s var(--ease);
}
.topics li:not(.active) button:hover { padding-left: .8rem; }
.topics li:not(.active) button:hover .t-title { color: var(--ink); }
.topics .active .t-title { color: var(--ink); }
.topics .active .t-idx { color: var(--magenta); }
.t-plus { position: relative; width: 1.1rem; height: 1.1rem; align-self: center; }
.t-plus::before, .t-plus::after {
  content: ''; position: absolute; background: currentColor;
  transition: transform .4s var(--ease), opacity .3s;
}
.t-plus::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.t-plus::after  { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }
.topics .active .t-plus::after { transform: translateX(-50%) scaleY(0); }
.t-desc {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease);
}
.t-desc > span {
  overflow: hidden;
  display: block;
  color: #5d5f5a;
  font-size: 1.15rem; line-height: 1.75;
  max-width: 36rem;
  margin-left: 4.6rem;
}
.topics .active .t-desc { grid-template-rows: 1fr; }
.topics .active .t-desc > span { padding-bottom: 2.3rem; }

/* ============================================================
   ARTICLES
   ============================================================ */
.articles {
  background: #fff;
  padding: 7.5rem 0 11rem;
}
.articles-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 var(--container);
}
.articles-head .tag { margin-bottom: 2.4rem; }
.articles-intro { width: 27rem; padding-bottom: .6rem; }
.articles-intro p {
  color: #5d5f5a;
  font-size: 1.15rem; line-height: 1.7;
  margin-bottom: 1.7rem;
}

/* staggered editorial cards */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  margin: 5.5rem var(--container) 0;
}
.note-card-link {
  display: flex; flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(10,10,10,.12);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.note-card-link:hover {
  transform: translateY(-.6rem);
  box-shadow: 0 1.6rem 3rem rgba(10,10,10,.09);
}
.nc-frame { display: block; overflow: hidden; height: 16.5rem; flex: none; }
.nc-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.note-card-link:hover .nc-frame img { transform: scale(1.06); }
.nc-kicker {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem 1.7rem 0;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: #9a9a9a;
}
.note-card-link:hover .nc-idx { color: var(--magenta); }
.nc-idx { transition: color .3s var(--ease); }
.nc-title {
  padding: 0 1.7rem;
  margin-top: 1rem;
  font-size: 1.5rem; font-weight: 700;
  line-height: 1.18; letter-spacing: -.015em;
}
.nc-more {
  display: inline-flex; align-items: center; gap: .5em;
  align-self: flex-start;
  margin: auto 1.7rem 1.8rem;
  padding-top: 1.5rem;
  font-size: .95rem; font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.note-card-link:hover .nc-more { border-bottom-color: currentColor; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  background: var(--bg-dark);
  padding-top: 19.5rem;            /* clears the inverted stairs */
  overflow: hidden;
}
.footer-main {
  padding: 0 var(--container);
  display: flex; flex-direction: column; align-items: flex-start;
}
.footer-main .tag { margin-bottom: 3rem; }
.footer-head {
  color: #fff;
  font-size: 4.2rem;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.024em;
}
.footer-head span { color: #6a6a6a; }
.footer-main .btn { margin-top: 3.4rem; }
.footer-base {
  display: flex; justify-content: space-between; align-items: center;
  margin: 9rem var(--container) 0;
  padding-top: 2.6rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer-logo img {
  height: 2.4rem; width: auto; display: block;
  opacity: .9;
  transition: opacity .3s var(--ease);
}
.footer-logo:hover img { opacity: 1; }
.footer-socials { display: flex; gap: 2.6rem; color: rgba(255,255,255,.75); }
.footer-socials .link-line { font-size: 1rem; padding-bottom: .35em; }
.footer-socials .link-line:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2rem var(--container) 2.2rem;
  margin-top: 3.4rem;
  font-size: .98rem;
  color: rgba(255,255,255,.45);
}
.footer-bottom a:hover { color: #fff; text-decoration: underline; text-underline-offset: .18em; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--rd, 0s);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  html { font-size: 13px; }

    .hero-title { font-size: 4.6rem; max-width: none; }  /* 54vw cap clips the oversized EVOLVES mark below ~960px */

  .manifesto { margin-top: 7rem; }
  .manifesto-text { font-size: 4rem; }

  .carousel { margin-top: 4rem; }
  .events { padding-top: 6.5rem; padding-bottom: 16rem; }

  .speakers { padding-top: 4.5rem; padding-bottom: 7rem; }
  .why-grid { grid-template-columns: 1fr; gap: 3.8rem; }
  .speakers-side { position: static; }
  .topics li:first-child button { padding-top: 1.7rem; }
  .t-title { font-size: 2.3rem; }
  .notes-grid { grid-template-columns: 1fr 1fr; }

  .footer { padding-top: 18rem; }
}

@media (max-width: 768px) {
  html { font-size: 14px; }
  :root { --container: 1.5rem; }

  .hero-content { padding-top: 8.5rem; }
  .hero-title { font-size: 3.2rem; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 3rem; padding-bottom: 3.5rem; }

    .head { font-size: 3.4rem; }
  .locations { padding-top: 4.5rem; }
  .manifesto { margin-top: 5rem; }
  .manifesto-text { font-size: 2.1rem; }
  .manifesto-text .m-line { display: inline; }
    .stairs i:nth-child(1) { height: 5.5rem; }
  .stairs i:nth-child(2) { height: 7.2rem; }
  .stairs i:nth-child(3) { height: 4rem; }
  .stairs i:nth-child(4) { height: 2.8rem; }
  .stairs i:nth-child(5) { height: .3rem; }

  .event-card { flex-basis: 78vw; }
  .event-card img { height: 114vw; }
  .events { padding-top: 4.5rem; padding-bottom: 10rem; }
  .drag-cue { display: none; }

  .speakers { padding-top: 3.5rem; padding-bottom: 5.5rem; }
  .topics button { grid-template-columns: 3rem 1fr auto; padding: 1.7rem 0; }
  .t-title { font-size: 1.75rem; }
  .t-desc > span { margin-left: 3rem; font-size: 1.05rem; }
  .topics .active .t-desc > span { padding-bottom: 1.7rem; }
  .menu-overlay { padding: 6.5rem var(--container) 1.8rem; overflow-y: auto; }
  .menu-inner { grid-template-columns: 1fr; gap: 3rem; align-items: start; align-content: start; }
  .menu-overlay-nav a { font-size: 2.3rem; gap: 1.1rem; padding: .55rem 0; }
  .menu-meta { justify-self: start; gap: 1.8rem; min-width: 0; width: 100%; }
  .menu-foot { font-size: .8rem; }

  .articles { padding: 5rem 0 7rem; }
  .articles-head { flex-direction: column; align-items: flex-start; gap: 2.5rem; }
  .articles-intro { width: auto; padding-bottom: 0; }
  .notes-grid { grid-template-columns: 1fr; gap: 2rem; margin-top: 3.5rem; }
  .nc-frame { height: 52vw; }

  .footer { padding-top: 10.5rem; }
  .footer-head { font-size: 2.2rem; }
  .footer-base { flex-direction: column; align-items: flex-start; gap: 1.8rem; margin-top: 5rem; }
  .footer-bottom { flex-direction: column; gap: .7rem; text-align: center; }
  .footer-bottom { flex-direction: column; gap: .8rem; margin-top: 4rem; padding: 2rem var(--container); text-align: center; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 2.45rem; }
  .hero-title br { display: none; }
  .hero-title mark { font-size: 1.55em; }  /* keeps EVOLVES inside a 320px viewport */
    .head { font-size: 2.8rem; }
  .manifesto-text { font-size: 1.7rem; }
  .t-title { font-size: 1.45rem; }
  .nc-title { font-size: 1.3rem; }
  .footer-head { font-size: 1.7rem; }
  .footer-head br { display: none; }
}

/* ============================================================
   CGD THEME COMPONENTS
   ============================================================ */
/* partner logo ticker */
.partners { padding-top: 1.4rem; }
.partners-label {
  display: flex; align-items: center; gap: .7em;
  font-size: .8125rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff;
  margin-bottom: 2.4rem;
}
.partners-label::after {
  content: ''; width: 3.4rem; height: 1px;
  background: currentColor; opacity: .25;
}
.partners-label .dot { width: .42em; height: .42em; border-radius: 50%; background: var(--magenta); }
.ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: ticker 26s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-set { display: flex; align-items: center; gap: 4.6rem; padding-right: 4.6rem; }
.ticker-set img {
  height: 2.5rem; width: auto; max-width: 13rem; object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .5;
  transition: opacity .3s var(--ease);
}
.ticker-set img[src*="sangfor"] { height: 3.2rem; max-width: 16rem; }
.ticker-set img:hover { opacity: 1; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* responsive for new components */
@media (max-width: 768px) {
  .partners-label { margin-bottom: 1.6rem; }
  .ticker-set { gap: 2.6rem; padding-right: 2.6rem; }
  .ticker-set img { height: 2rem; }
  .ec-title { font-size: 1.7rem; }
    .nav-logo img { height: 2rem; }
  }

/* ============================================================
   FIELD NOTE ARTICLE PAGE
   ============================================================ */
/* reading progress bar */
.read-progress {
  position: fixed; top: 0; left: 0; z-index: 99;
  width: 100%; height: 3px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
}

.note-hero {
  background: var(--bg-dark);
  padding: 11.5rem var(--container) 6.5rem;
  text-align: center;
}
.note-hero .tag::after { display: none; }
.note-hero .sep-slash { color: var(--accent); margin: 0 .1em; }
.note-hero-title {
  font-family: var(--font-display);
  color: #fff;
  font-size: 4.3rem;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.018em;
  max-width: 66rem;
  margin: 2.8rem auto 0;
}
.note-hero-meta {
  display: flex; align-items: center; justify-content: center; gap: 1.6rem;
  margin-top: 3rem;
  font-size: .85rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.note-hero-meta i { width: .3rem; height: .3rem; border-radius: 50%; background: rgba(255,255,255,.3); }

.note-body { background: #fff; padding: 6.5rem var(--container) 9rem; }
.note-article { max-width: 47rem; margin: 0 auto; }
.note-article p {
  font-size: 1.125rem; line-height: 1.9;
  color: #2e2e2e;
  margin-bottom: 1.7rem;
}
.note-article p a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  transition: color .3s var(--ease);
}
.note-article p a:hover { color: var(--magenta); }
.note-article .lead {
  font-family: var(--font-display);
  font-size: 1.5rem; line-height: 1.6;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 3rem;
}

/* "the short version" summary card */
.note-tldr {
  background: var(--cream);
  padding: 2.4rem 2.6rem 2.6rem;
  margin: 0 0 4.5rem;
}
.note-tldr-label {
  display: inline-flex; align-items: center; gap: .8em;
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.note-tldr-label .dot { width: .42em; height: .42em; border-radius: 50%; background: var(--magenta); }
.note-tldr ol { counter-reset: tldr; }
.note-tldr li {
  counter-increment: tldr;
  display: flex; align-items: baseline; gap: 1.2rem;
  padding: .7rem 0;
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 600;
  border-bottom: 1px solid rgba(10,10,10,.08);
}
.note-tldr li:last-child { border-bottom: 0; padding-bottom: 0; }
.note-tldr li::before {
  content: "0" counter(tldr);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .08em;
  color: var(--magenta);
}

/* numbered section headings with trailing rule */
.note-h {
  display: flex; align-items: baseline; gap: 1.3rem;
  margin: 4.4rem 0 1.6rem;
}
.note-h .n {
  font-size: .95rem; font-weight: 600;
  letter-spacing: .08em;
  color: var(--magenta);
}
.note-h h2 {
  font-family: var(--font-display);
  font-size: 1.95rem; font-weight: 700;
  line-height: 1.15; letter-spacing: -.012em;
  white-space: nowrap;
}
.note-h::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(10,10,10,.12);
  margin-left: 1.6rem;
}

/* centered pull quote */
.note-quote {
  position: relative;
  text-align: center;
  border-top: 1px solid rgba(10,10,10,.12);
  border-bottom: 1px solid rgba(10,10,10,.12);
  padding: 3.2rem 2rem;
  margin: 4.5rem 0;
  font-family: var(--font-display);
  font-size: 1.8rem; font-weight: 600;
  line-height: 1.45; letter-spacing: -.01em;
  color: var(--ink);
}
.note-quote::before {
  content: '\201C';
  display: block;
  font-size: 4.4rem; line-height: .4;
  color: var(--accent);
  margin-bottom: 1.6rem;
}

/* CMY sign-off dots */
.note-end {
  display: flex; justify-content: center; gap: .7rem;
  margin: 5.5rem 0 0;
}
.note-end i { width: .55rem; height: .55rem; border-radius: 50%; }
.note-end i:nth-child(1) { background: var(--yellow); }
.note-end i:nth-child(2) { background: var(--magenta); }
.note-end i:nth-child(3) { background: var(--accent); }

.note-cta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 3.4rem;
  padding-top: 2.8rem;
  border-top: 1px solid rgba(10,10,10,.14);
}

@media (max-width: 768px) {
  .note-hero { padding-top: 8.5rem; padding-bottom: 4rem; }
  .note-hero-title { font-size: 2.2rem; margin-top: 2rem; }
  .note-hero-meta { flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: 2rem; }
  .note-body { padding: 3.5rem var(--container) 6rem; }
  .note-article .lead { font-size: 1.22rem; }
  .note-tldr { padding: 1.8rem 1.6rem 2rem; margin-bottom: 3.2rem; }
  .note-h { margin-top: 3.4rem; }
  .note-h h2 { font-size: 1.4rem; white-space: normal; }
  .note-h::after { display: none; }
  .note-quote { font-size: 1.3rem; padding: 2.4rem 1rem; }
  .note-cta { flex-direction: column; align-items: flex-start; gap: 1.8rem; }
}

/* ============================================================
   GSAP MOTION SUPPORT
   ============================================================ */
/* when GSAP is driving, CSS transitions step aside (initial hidden state stays) */
body.gsap .reveal { transition: none; }

/* pre-paint hero start states (html.motion is set inline in <head>, before first paint) */
html.motion .hero-video { transform: scale(1.12); }
html.motion .hero-title { opacity: 0; }

/* hero line-split text reveal */
.ht-line {
  display: block;
  overflow: hidden;
  padding-bottom: .3em;    /* room for the EVOLVES underline */
  margin-bottom: -.3em;
}
.ht-line-inner { display: inline-block; will-change: transform; }

/* page transition veil */
.page-veil {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg-dark);
  clip-path: inset(100% 0 0 0);
  pointer-events: none;
}

/* depth for card tilt */
.carousel { perspective: 1100px; }
.event-card { will-change: transform; }

/* Lenis */
.lenis.lenis-smooth { scroll-behavior: auto !important; }