/* Page sections for the single-page site. */

.section { padding: clamp(5rem, 10vw, 9rem) 0; }
.section-alt { background: var(--surface-2); }
.band { background: var(--band); color: var(--on-band); }
.band-deep { background: var(--band-deep); }
.band h2, .band h3 { color: var(--on-band); }
.band .lede { color: var(--on-band-2); }
.band p { color: var(--on-band-2); }

/* ---------- hero ---------- */
.hero {
  background: var(--band); color: var(--on-band);
  padding: clamp(3.5rem, 8vw, 7rem) 0 0;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; right: -12%; bottom: -55%; width: 52vw; height: 52vw; max-width: 640px; max-height: 640px;
  border-radius: 50%; border: 1px solid var(--band-line); pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; position: relative; }
.hero h1 { color: var(--on-band); margin-bottom: 1.4rem; max-width: 12ch; }
.hero-subline {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 2.3vw, 2rem); color: var(--gold); margin-bottom: 1.5rem;
}
.hero .lede { color: var(--on-band-2); }
.hero-note { font-size: .88rem; color: var(--on-band-muted); margin-top: 1.4rem; max-width: 52ch; }
.hero-figure { position: relative; margin: 0; }
.hero-figure img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 999px 999px 1rem 1rem; box-shadow: var(--shadow);
}
.hero-caption {
  position: absolute; left: -1.5rem; bottom: 2.2rem; width: min(78%, 330px);
  color: var(--ink); border-radius: 1rem;
  padding: 1.3rem 1.4rem;
}
.hero-caption-title { display: block; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: .8rem; }
.hero-caption ul { list-style: none; }
.hero-caption li { font-size: .95rem; padding: .3rem 0 .3rem 1.4rem; position: relative; line-height: 1.35; }
.hero-caption li::before { content: ""; position: absolute; left: 0; top: .72rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); }
.hero-strip {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding: 1.6rem 0; border-top: 1px solid var(--band-line);
}
.hero-strip p { color: var(--on-band-2); font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.4rem; max-width: 64ch; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; }
  .hero-figure { margin-top: 1rem; }
  .hero-figure img { aspect-ratio: 4 / 3; border-radius: 1.2rem; }
  .hero-caption { position: relative; left: auto; bottom: auto; width: auto; margin-top: -2.5rem; margin-inline: 1rem; }
}

/* ---------- ecosystem ---------- */
.dims { display: grid; grid-template-columns: 340px 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.dims-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.dim-tab {
  display: grid; grid-template-columns: 2.2rem 1.6rem 1fr; align-items: center; gap: .6rem;
  width: 100%; text-align: left; padding: .95rem .6rem; background: none; border: 0; border-bottom: 1px solid var(--line);
  cursor: pointer; color: var(--ink-2); transition: color .15s, background-color .15s, padding-left .2s;
}
.dim-tab:hover { color: var(--ink); background: var(--surface); }
.dim-tab.is-active { color: var(--ink); background: var(--surface); padding-left: 1rem; box-shadow: inset 2px 0 0 var(--gold); }
.dim-num { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.05rem; color: var(--muted); }
.dim-tab.is-active .dim-num { color: var(--gold); }
.dim-name { font-size: 1rem; font-weight: 500; }
.dim-icon { width: 1.35rem; height: 1.35rem; background: currentColor; opacity: .75;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.dim-icon-heart { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/></svg>"); }
.dim-icon-mind { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 2a4.5 4.5 0 0 0-4.4 5.5A4 4 0 0 0 4 14a4 4 0 0 0 3 7h1.5V2zM14.5 2a4.5 4.5 0 0 1 4.4 5.5A4 4 0 0 1 20 14a4 4 0 0 1-3 7h-1.5V2z'/></svg>"); }
.dim-icon-book { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2zM22 4h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z'/></svg>"); }
.dim-icon-people { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.5'/><path d='M2 21a7 7 0 0 1 14 0'/><circle cx='17' cy='9' r='2.5'/><path d='M16 15a5 5 0 0 1 6 5'/></svg>"); }
.dim-icon-briefcase { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='7' width='20' height='14' rx='2'/><path d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M2 13h20'/></svg>"); }
.dim-icon-coins { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='9' cy='7' rx='7' ry='3'/><path d='M2 7v5c0 1.7 3.1 3 7 3s7-1.3 7-3V7M2 12v5c0 1.7 3.1 3 7 3s7-1.3 7-3v-5M16 10c3.3.3 6 1.5 6 3v5c0 1.7-2.7 3-6 3'/></svg>"); }
.dim-icon-leaf { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20c0-9 6-16 16-16 0 10-6 16-16 16z'/><path d='M4 20c3-5 7-9 12-12'/></svg>"); }

.dims-panels { position: sticky; top: 6rem; }
.dim-panel {
  border-radius: 1.2rem;
  padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: var(--card-shadow);
}
.dim-panel-kicker { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: .5rem; }
.dim-panel h3 { font-size: clamp(2rem, 3vw, 2.8rem); margin-bottom: 1.4rem; }
.dim-panel dt { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-top: 1.3rem; margin-bottom: .35rem; }
.dim-panel dt:first-child { margin-top: 0; }
.dim-panel dd { font-size: 1.08rem; color: var(--ink-2); }
.pathway { list-style: none; counter-reset: step; display: grid; gap: .55rem; margin-top: .3rem; }
.pathway li { position: relative; padding-left: 2.4rem; counter-increment: step; padding-top: .15rem; }
.pathway li::before {
  content: counter(step); position: absolute; left: 0; top: .05rem; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--green-soft); color: var(--green); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1rem; font-weight: 600;
  display: grid; place-items: center;
}
.pathway li:not(:last-child)::after { content: ""; position: absolute; left: .82rem; top: 1.85rem; bottom: -.55rem; width: 1px; background: var(--line-strong); }
.dims-foot { margin-top: 1.4rem; font-size: .95rem; color: var(--muted); max-width: 60ch; }
@media (max-width: 900px) {
  .dims { grid-template-columns: 1fr; }
  .dims-list { flex-direction: row; flex-wrap: wrap; border: 0; gap: .5rem; }
  .dim-tab { width: auto; grid-template-columns: auto auto; border: 1px solid var(--line); border-radius: 999px; padding: .55rem .9rem; gap: .45rem; }
  .dim-tab.is-active { padding-left: .9rem; box-shadow: none; border-color: var(--accent); }
  .dim-icon { display: none; }
  .dims-panels { position: static; }
}

/* ---------- segments ---------- */
.seg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.5vw, 2rem); }
.seg-card { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; }
.seg-media { position: relative; }
.seg-media img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.seg-num { position: absolute; left: 1.1rem; top: 1.1rem; color: var(--ink); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; padding: .45rem .8rem; border-radius: 999px; }
.seg-body { padding: clamp(1.4rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: .9rem; flex: 1; }
.seg-body h3 { font-size: 2rem; }
.seg-summary { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.35rem; line-height: 1.35; color: var(--ink-2); }
.ticks { list-style: none; display: grid; gap: .5rem; color: var(--ink-2); font-size: .98rem; }
.ticks li { padding-left: 1.5rem; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .55rem; width: .75rem; height: .4rem; border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(-45deg); }
.seg-body .link-arrow { margin-top: auto; padding-top: .4rem; }
@media (max-width: 800px) { .seg-grid { grid-template-columns: 1fr; } }

/* ---------- deliver ---------- */
.deliver-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 4vw, 4rem); border-top: 1px solid var(--line); }
.deliver-item { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.deliver-num { font-size: 2rem; color: var(--gold); line-height: 1; font-style: italic; font-weight: 500; }
.deliver-item h3 { margin-bottom: .45rem; font-size: 1.55rem; }
.deliver-item p { color: var(--ink-2); font-size: .98rem; }
@media (max-width: 800px) { .deliver-list { grid-template-columns: 1fr; } }

/* ---------- why ---------- */
.why-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.why-head { position: sticky; top: 6rem; }
.why-head h2 { margin-bottom: 1rem; }
.pull-quote { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: var(--gold) !important; margin-top: 2rem; line-height: 1.3; max-width: 22ch; border-left: 2px solid var(--gold); padding-left: 1.2rem; }
.cap-list { list-style: none; border-top: 1px solid var(--band-line); }
.cap-item { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1.8rem 0; border-bottom: 1px solid var(--band-line); }
.cap-num { font-size: 2.2rem; color: var(--gold); line-height: 1; font-style: italic; font-weight: 500; }
.cap-item h3 { margin-bottom: .5rem; font-size: 1.6rem; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } .why-head { position: static; } }

/* ---------- evidence ---------- */
.evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.stages { list-style: none; display: grid; gap: 0; border-left: 1px solid var(--line-strong); margin-left: .6rem; }
.stages li { position: relative; padding: 0 0 1.8rem 1.8rem; }
.stages li::before { content: ""; position: absolute; left: -.42rem; top: .35rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--surface-2); }
.stage-num { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.stages h3 { margin: .2rem 0 .3rem; }
.stages p { color: var(--ink-2); font-size: .98rem; }
.evidence-figure img { border-radius: 1rem; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 2rem; }
.indicators { list-style: none; display: grid; gap: .9rem; }
.indicators li { display: grid; gap: .15rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.indicators strong { font-weight: 500; font-size: 1.02rem; }
.indicators span { color: var(--muted); font-size: .92rem; }
@media (max-width: 900px) { .evidence-grid { grid-template-columns: 1fr; } }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.about-figure img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 1rem 1rem; box-shadow: var(--shadow); }
.about-copy h2 { margin-bottom: 1rem; }
.about-copy .lede { margin-bottom: 1rem; }
.about-copy > p { color: var(--ink-2); }
.founder { margin-top: 2rem; padding: 1.6rem; border-radius: 1rem; }
.founder p { color: var(--ink-2); margin-bottom: 1rem; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } .about-figure { max-width: 420px; } }

/* ---------- community ---------- */
.community { position: relative; overflow: hidden; padding: clamp(5rem, 12vw, 10rem) 0; isolation: isolate; }
.community-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.community::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--overlay) 0%, rgba(0, 0, 0, .15) 100%); z-index: -1; }
.community-card { max-width: 540px; border-radius: 1rem; padding: clamp(2rem, 3.5vw, 3rem); }
.community-card h2 { margin-bottom: .8rem; }
.community-card p { color: var(--ink-2); margin-bottom: 1.5rem; }

/* ---------- partner ---------- */
.partner-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.partner-copy h2 { margin-bottom: 1rem; }
.steps { list-style: none; counter-reset: s; margin-top: 2.2rem; display: grid; gap: 1.2rem; }
.steps li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; align-items: baseline; counter-increment: s; }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: "Cormorant Garamond", Georgia, serif; color: var(--gold); font-size: 1.4rem; font-style: italic; }
.step-title { display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--on-band); }
.step-desc { display: block; color: var(--on-band-2); font-size: .98rem; }
@media (max-width: 900px) { .partner-grid { grid-template-columns: 1fr; } }

/* ---------- glass + auras ---------- */
.glass {
  background: color-mix(in srgb, var(--surface) 64%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid color-mix(in srgb, #ffffff 55%, var(--line));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), var(--shadow);
}
[data-theme="dark"] .glass {
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  border-color: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--shadow);
}

.has-aura { position: relative; overflow: hidden; }
.has-aura > .wrap { position: relative; }
.aura { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.aura::before, .aura::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55;
}
.aura-hero::before { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; right: -8%; top: -18%; background: #dfe9df; }
.aura-hero::after { width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; left: -10%; bottom: -30%; background: #efe4cf; }
.aura-eco::before { width: 42vw; height: 42vw; max-width: 600px; max-height: 600px; right: -12%; bottom: 0; background: #e6efe6; }
.aura-eco::after { width: 26vw; height: 26vw; max-width: 380px; max-height: 380px; left: 30%; top: 10%; background: #f1e9d6; opacity: .45; }
.aura-partner::before { width: 44vw; height: 44vw; max-width: 620px; max-height: 620px; right: -10%; top: -10%; background: #dfe9df; }
.aura-partner::after { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; left: -8%; bottom: -20%; background: #efe4cf; }
[data-theme="dark"] .aura::before, [data-theme="dark"] .aura::after { opacity: .18; }

.hero > .wrap, .hero .hero-grid { position: relative; z-index: 1; }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--page); padding: 1rem 0; }
.marquee-track { display: flex; gap: 0; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.35rem; color: var(--ink-2);
  padding: 0 1.6rem; white-space: nowrap; position: relative;
}
.marquee-track span::after { content: ""; position: absolute; right: -.25rem; top: 50%; width: .4rem; height: .4rem; border-radius: 50%; background: var(--gold); transform: translateY(-50%); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- motion ---------- */
.seg-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.seg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.seg-media { overflow: hidden; }
.seg-media img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.seg-card:hover .seg-media img { transform: scale(1.04); }
.dim-panel:not([hidden]) { animation: panel-in .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero-caption { animation: float 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.btn-primary, .btn-accent { transition: background-color .2s, box-shadow .25s, transform .2s; }
.btn-primary:hover, .btn-accent:hover { box-shadow: 0 10px 24px -14px rgba(23, 32, 27, .6); transform: translateY(-1px); }
.about-figure img, .evidence-figure img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.about-figure:hover img, .evidence-figure:hover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .seg-card, .seg-media img, .about-figure img, .evidence-figure img { transition: none; }
  .hero-caption, .dim-panel:not([hidden]) { animation: none; }
}